/* RecensLabs — home page */

/* HERO */
.hero{padding:80px 0 60px; position:relative; overflow:hidden;}
.hero-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:center;}
.hero-grid .hero-top{max-width:520px; margin-bottom:0;}
.hero .eyebrow{margin-bottom:18px; text-transform:none;}
h1{font-family:var(--font-display); font-weight:700; font-size:clamp(32px,4.6vw,56px); line-height:1.08; letter-spacing:-0.01em; margin-bottom:22px;}
h1 .accent{color:var(--indigo);}
.hero-top p.sub{font-size:17px; color:var(--slate); max-width:480px; margin-bottom:32px;}
.hero-actions{display:flex; gap:14px;}

/* ADMIN DASHBOARD MOCK */
.hero-admin{position:relative; perspective:1600px;}
.admin-win{background:var(--white); border:1px solid var(--paper-dim); border-radius:16px; overflow:hidden;
  box-shadow:0 44px 80px -34px rgba(91,76,255,0.42), 0 14px 30px -20px rgba(21,19,31,0.16);
  transform:rotateY(-7deg) rotateX(2.5deg); transform-origin:center; transition:transform 0.6s cubic-bezier(0.22,1,0.36,1);}
.hero-admin:hover .admin-win{transform:rotateY(0deg) rotateX(0deg);}
.admin-chrome{height:38px; background:var(--paper); border-bottom:1px solid var(--paper-dim); display:flex; align-items:center; gap:7px; padding:0 14px;}
.admin-chrome .dot{width:9px; height:9px; border-radius:50%; background:var(--paper-dim);}
.admin-chrome .dot:first-child{background:var(--coral); opacity:0.75;}
.admin-url{margin-left:12px; font-family:var(--font-mono); font-size:10.5px; color:var(--slate-light); background:var(--white); border:1px solid var(--paper-dim); border-radius:6px; padding:3px 12px;}
.admin-body{display:grid; grid-template-columns:52px 1fr; height:346px; background:linear-gradient(160deg,#FBFBFE 0%,#F1F0F9 100%);}
.admin-side{background:var(--ink); padding:16px 0; display:flex; flex-direction:column; align-items:center; gap:22px;}
.admin-logo{width:22px; height:22px; border-radius:7px; background:linear-gradient(135deg,var(--indigo),var(--coral));}
.admin-nav{display:flex; flex-direction:column; gap:14px;}
.admin-nav .an{width:20px; height:20px; border-radius:6px; background:rgba(255,255,255,0.10);}
.admin-nav .an.active{background:var(--indigo);}
.admin-main{padding:20px;}
.admin-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px;}
.admin-title{width:118px; height:12px; border-radius:4px; background:var(--paper-dim);}
.admin-avatar{width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,var(--indigo-soft),var(--indigo));}
.admin-kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px;}
.kpi{background:var(--white); border:1px solid var(--paper-dim); border-radius:10px; padding:12px 12px 11px;}
.kpi-label{font-family:var(--font-mono); font-size:8.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--slate-light); margin-bottom:7px;}
.kpi-num{font-family:var(--font-display); font-weight:700; font-size:17px; letter-spacing:-0.02em; color:var(--ink);}
.kpi-trend{font-family:var(--font-mono); font-size:9px; margin-top:5px;}
.kpi-trend.up{color:#12A87A;}
.kpi-trend.down{color:var(--coral);}
.admin-chart{background:var(--white); border:1px solid var(--paper-dim); border-radius:10px; padding:14px 14px 12px; margin-bottom:12px;}
.admin-chart .bars{display:flex; align-items:flex-end; gap:8px; height:72px;}
.admin-chart .bars span{flex:1; border-radius:4px 4px 0 0; background:linear-gradient(180deg,var(--indigo-soft),var(--indigo)); opacity:0.85;}
.admin-chart .bars span:last-child{background:linear-gradient(180deg,#FF9C8C,var(--coral)); opacity:1;}
.admin-rows{display:flex; flex-direction:column; gap:7px;}
.arow{height:9px; border-radius:4px; background:var(--paper-dim);}
.arow.w80{width:80%;}
.arow.w60{width:60%;}
.admin-badge{position:absolute; z-index:4; background:var(--white); border:1px solid var(--paper-dim); border-radius:100px; padding:8px 14px; font-family:var(--font-mono); font-size:11px; font-weight:700; box-shadow:0 18px 32px -18px rgba(21,19,31,0.24); display:flex; align-items:center; gap:8px;}
.badge-a{top:22px; right:-14px; color:var(--ink);}
.badge-a::before{content:''; width:8px; height:8px; border-radius:50%; background:#12A87A; box-shadow:0 0 0 3px rgba(18,168,122,0.18);}
.badge-b{bottom:26px; left:-16px; color:var(--indigo);}

/* CLIENT MARQUEE */
.clients{padding:38px 0; border-top:1px solid var(--paper-dim); border-bottom:1px solid var(--paper-dim); background:var(--white);}
.clients-label{text-align:center; font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--slate-light); margin-bottom:22px;}
.marquee{-webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);}
.marquee-track{gap:56px; align-items:center; padding-right:56px;}
.client-word{font-family:var(--font-display); font-weight:600; font-size:20px; color:var(--slate-light); white-space:nowrap; letter-spacing:-0.01em;}

/* SERVICES */
.services{padding:80px 0;}
.services-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.service-card{display:flex; flex-direction:column; background:var(--white); border:1px solid var(--paper-dim); border-radius:16px; padding:26px 22px; transition:transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;}
.service-card:hover{transform:translateY(-4px); box-shadow:0 20px 40px -24px rgba(91,76,255,0.35); border-color:var(--indigo-soft);}
.service-card .service-tag{margin-bottom:16px; align-self:flex-start;}
.service-card h3{font-family:var(--font-display); font-size:16.5px; font-weight:600; margin-bottom:8px;}
.service-card p{font-size:13px; color:var(--slate); flex:1;}
.service-more{font-family:var(--font-mono); font-size:12px; color:var(--indigo); margin-top:16px; font-weight:700; opacity:0; transform:translateX(-4px); transition:opacity 0.18s ease, transform 0.18s ease;}
.service-card:hover .service-more{opacity:1; transform:translateX(0);}

/* PROCESS */
.process{background:var(--ink); color:var(--paper); padding:76px 0; border-radius:24px; margin:0 32px;}
.process .wrap{max-width:1116px;}
.process .section-head p{color:var(--slate-light);}
.process .section-head h2{color:var(--paper);}
.process-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:0;}
.process-step{padding:0 24px 0 0; position:relative;}
.process-step:not(:last-child)::after{content:''; position:absolute; top:20px; right:0; width:1px; height:calc(100% - 40px); background:rgba(255,255,255,0.1);}
.process-num{font-family:var(--font-mono); font-size:13px; color:var(--indigo-soft); margin-bottom:14px;}
.process-step h3{font-family:var(--font-display); font-size:17px; font-weight:600; margin-bottom:10px;}
.process-step p{font-size:13px; color:var(--slate-light);}

/* ABOUT BAND */
.about-band{padding:88px 0;}
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.about-copy .eyebrow{color:var(--indigo); margin-bottom:14px;}
.about-copy h2{margin-bottom:16px;}
.about-copy p{color:var(--slate); font-size:15.5px; line-height:1.65; margin-bottom:26px; max-width:460px;}
.about-stats{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.about-stat{background:var(--white); border:1px solid var(--paper-dim); border-radius:16px; padding:26px 24px;}
.about-stat .num{font-family:var(--font-display); font-weight:700; font-size:34px; letter-spacing:-0.02em; color:var(--indigo);}
.about-stat .lbl{font-family:var(--font-mono); font-size:12px; color:var(--slate); margin-top:6px;}

/* PRODUCTS TEASER */
.products-teaser{padding:76px 0; border-top:1px solid var(--paper-dim);}
.product-row{display:flex; gap:16px; flex-wrap:wrap;}
.product-chip{background:var(--white); border:1px solid var(--paper-dim); border-radius:12px; padding:18px 22px; display:flex; align-items:center; gap:14px; flex:1; min-width:220px; transition:transform 0.16s ease, box-shadow 0.16s ease;}
.product-chip:hover{transform:translateY(-3px); box-shadow:0 16px 34px -22px rgba(91,76,255,0.4);}
.product-dot{width:10px; height:10px; border-radius:3px; background:var(--indigo);}
.product-chip .pname{font-family:var(--font-display); font-size:14px; font-weight:600;}
.product-chip .pdesc{font-size:12px; color:var(--slate);}
.product-launch{margin-left:auto; color:var(--slate-light); font-size:16px;}
.product-chip:hover .product-launch{color:var(--indigo);}

/* CASE STUDIES */
.work{padding:76px 0; border-top:1px solid var(--paper-dim);}
.work-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.work-card{display:block; background:var(--white); border:1px solid var(--paper-dim); border-radius:16px; overflow:hidden; transition:transform 0.18s ease, box-shadow 0.18s ease;}
.work-card:hover{transform:translateY(-4px); box-shadow:0 24px 46px -26px rgba(91,76,255,0.4);}
.work-thumb{height:150px; position:relative; overflow:hidden;}
.work-thumb.thumb-a{background:linear-gradient(135deg, #C9C2FF, var(--indigo));}
.work-thumb.thumb-b{background:linear-gradient(135deg, #FFC9BF, var(--coral));}
.work-thumb.thumb-c{background:linear-gradient(135deg, #E4E1F7, var(--paper-dim));}
.work-thumb .tag-row{position:absolute; bottom:12px; left:12px; display:flex; gap:6px;}
.work-body{padding:20px 22px;}
.work-body .client{font-family:var(--font-mono); font-size:11px; color:var(--slate-light); margin-bottom:6px;}
.work-body h3{font-family:var(--font-display); font-size:16px; font-weight:600; margin-bottom:8px;}
.work-body p{font-size:13px; color:var(--slate);}
.work-stat{font-family:var(--font-mono); font-size:12px; color:var(--indigo); margin-top:12px; font-weight:700;}
.work-cta{margin-top:36px;}

@media(max-width:1000px){
  .services-grid, .process-grid, .work-grid{grid-template-columns:repeat(2,1fr);}
  .process-step:nth-child(2)::after{display:none;}
  .hero-grid{grid-template-columns:1fr;}
  .hero-admin{display:none;}
  .about-grid{grid-template-columns:1fr; gap:32px;}
}