/* ==========================================================================
   HOME — HERO DASHBOARD COMPOSITION
   ========================================================================== */
.hero{ position:relative; padding-top:calc(var(--nav-h) + clamp(30px,6vw,70px)); padding-bottom:clamp(40px,7vw,90px); overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,4vw,60px); align-items:center; }
@media(max-width:1024px){ .hero-grid{ grid-template-columns:1fr; } }

.hero-copy{ position:relative; z-index:3; }
.hero h1{ font-size:clamp(2.7rem,6.6vw,5.8rem); line-height:.95; letter-spacing:-.035em; margin:22px 0 0; }
.hero h1 .line{ display:block; overflow:hidden; }
.hero h1 .line > span{ display:block; transform:translateY(110%); animation:heroLine 1s var(--ease-out) forwards; }
.hero h1 .line:nth-child(2) > span{ animation-delay:.12s; }
.hero h1 .line:nth-child(3) > span{ animation-delay:.22s; }
@keyframes heroLine{ to{ transform:translateY(0); } }
@media(prefers-reduced-motion:reduce){ .hero h1 .line > span{ transform:none; animation:none; } }
.hero-lead{ margin-top:26px; font-size:clamp(1.05rem,1.6vw,1.32rem); color:var(--muted); max-width:30ch; }
.hero-actions{ margin-top:34px; display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.hero-meta{ margin-top:34px; display:flex; gap:clamp(20px,3vw,44px); flex-wrap:wrap; }
.hero-meta .hm{ }
.hero-meta .hm b{ font-family:var(--font-display); font-size:1.5rem; font-weight:700; display:block; line-height:1; }
.hero-meta .hm small{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }

/* hero availability bar */
.hero-avail{ display:inline-flex; align-items:center; gap:.7em; padding:.5em .95em; border:1px solid var(--line-2); border-radius:var(--r-pill); background:var(--bg-2); font-family:var(--font-mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.hero-avail .live{ width:7px; height:7px; border-radius:50%; background:#1bbf6a; box-shadow:0 0 0 0 rgba(27,191,106,.6); animation:livePulse 2s infinite; }

/* dashboard composition (V1 foundation) */
.dash{ position:relative; min-height:clamp(420px,46vw,560px); }
.dash-frame{
  position:relative; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-xl);
  box-shadow:var(--sh-3); overflow:hidden; padding:18px;
  transform:translateY(0); transition:transform .6s var(--ease-out);
}
.dash.in .dash-frame{ animation:dashIn 1s var(--ease-out) both; }
@keyframes dashIn{ from{ opacity:0; transform:translateY(40px) scale(.97); } to{ opacity:1; transform:none; } }
.dash-head{ display:flex; align-items:center; justify-content:space-between; padding:4px 6px 14px; border-bottom:1px solid var(--line); }
.dash-dots{ display:flex; gap:6px; }
.dash-dots i{ width:10px; height:10px; border-radius:50%; background:var(--line-2); display:block; }
.dash-dots i:nth-child(1){ background:#ff5f57; } .dash-dots i:nth-child(2){ background:#febc2e; } .dash-dots i:nth-child(3){ background:#28c840; }
.dash-title{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }

/* growth chart */
.dash-chart{ position:relative; height:clamp(150px,16vw,210px); margin-top:8px; }
.dash-chart svg{ width:100%; height:100%; overflow:visible; }
.gline{ fill:none; stroke:url(#gradLine); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1000; stroke-dashoffset:1000; }
.dash.in .gline{ animation:drawLine 2.2s var(--ease-out) .4s forwards; }
@keyframes drawLine{ to{ stroke-dashoffset:0; } }
.garea{ fill:url(#gradArea); opacity:0; }
.dash.in .garea{ animation:fadeIn 1s ease 1.4s forwards; }
@keyframes fadeIn{ to{ opacity:1; } }
.gdot{ fill:var(--accent); }

.dash-kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:14px; }
.dash-kpis .kpi{ background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--r-md); padding:12px; }
.dash-kpis .kpi .kv{ font-family:var(--font-display); font-weight:700; font-size:1.25rem; line-height:1; }
.dash-kpis .kpi .kl{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:6px; }
.dash-kpis .kpi .up{ color:#0c8a44; font-size:.7rem; font-family:var(--font-mono); }

/* floating chips around dashboard */
.float{ position:absolute; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-2); padding:12px 14px; z-index:4; }
.float .ft{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.float .fv{ font-family:var(--font-display); font-weight:700; font-size:1.1rem; margin-top:3px; }
.f-rank{ top:8%; left:-8%; animation:bob 6s ease-in-out infinite; }
.f-roas{ bottom:14%; left:-10%; animation:bob 7s ease-in-out infinite .5s; }
.f-lead{ top:18%; right:-9%; animation:bob 6.5s ease-in-out infinite .9s; }
.f-ctr{ bottom:6%; right:-6%; animation:bob 7.5s ease-in-out infinite 1.3s; }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
@media(max-width:1024px){ .f-rank,.f-roas{ left:0; } .f-lead,.f-ctr{ right:0; } }
@media(max-width:560px){ .float{ display:none; } }
@media(prefers-reduced-motion:reduce){ .float{ animation:none; } }

/* hero scroll cue */
.scroll-cue{ position:absolute; left:50%; bottom:22px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); z-index:3; }
.scroll-cue .m{ width:22px; height:34px; border:1.5px solid var(--line-2); border-radius:12px; position:relative; }
.scroll-cue .m::after{ content:""; position:absolute; left:50%; top:7px; width:3px; height:7px; border-radius:2px; background:var(--accent); transform:translateX(-50%); animation:scrollDot 1.6s ease-in-out infinite; }
@keyframes scrollDot{ 0%{ opacity:0; transform:translate(-50%,0); } 40%{ opacity:1; } 100%{ opacity:0; transform:translate(-50%,10px); } }

/* ==========================================================================
   TRUST STRIP
   ========================================================================== */
.trust{ border-block:1px solid var(--line); padding:28px 0; background:var(--bg-2); }
.trust .tlabel{ text-align:center; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:18px; }
.brandrow{ display:flex; gap:clamp(36px,6vw,84px); align-items:center; }
.brandrow .b{ font-family:var(--font-display); font-weight:600; font-size:clamp(1rem,1.6vw,1.35rem); color:var(--muted); white-space:nowrap; opacity:.7; transition:opacity .25s,color .25s; letter-spacing:-.01em; }
.brandrow .b:hover{ opacity:1; color:var(--ink); }

/* ==========================================================================
   HOME — SERVICES INTERACTIVE
   ========================================================================== */
.h-services{ position:relative; }
.hs-layout{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(30px,4vw,60px); align-items:start; }
@media(max-width:900px){ .hs-layout{ grid-template-columns:1fr; } }
.hs-left{ position:sticky; top:calc(var(--nav-h) + 30px); }
.hs-left h2{ font-size:clamp(2.2rem,5vw,3.8rem); line-height:1; letter-spacing:-.03em; margin-top:18px; }
.hs-left .lead{ margin-top:22px; }
.hs-visual{ position:relative; aspect-ratio:4/3; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); margin-top:26px; background:var(--bg-3); }
.hs-visual img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .5s var(--ease),transform 6s linear; transform:scale(1); }
.hs-visual img.on{ opacity:1; transform:scale(1.06); }
.hs-visual .gv-num{ position:absolute; left:18px; bottom:16px; font-family:var(--font-display); font-weight:800; font-size:4rem; line-height:1; color:rgba(255,255,255,.92); text-shadow:0 4px 24px rgba(0,0,0,.35); z-index:2; }

.hs-list{ border-top:1px solid var(--line); }
.hs-row{ border-bottom:1px solid var(--line); position:relative; }
.hs-row a{ display:grid; grid-template-columns:auto 1fr auto auto; gap:clamp(16px,2vw,28px); align-items:center; padding:clamp(20px,2.4vw,30px) 6px; transition:padding .4s var(--ease); }
.hs-row:hover a{ padding-left:16px; }
.hs-row .hnum{ font-family:var(--font-mono); font-size:.8rem; color:var(--muted-2); letter-spacing:.1em; }
.hs-row .hname{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.4rem,2.6vw,2rem); letter-spacing:-.02em; line-height:1; transition:color .3s; }
.hs-row:hover .hname{ color:var(--accent-ink); }
.hs-row .hdesc{ font-size:.86rem; color:var(--muted); max-width:30ch; opacity:0; max-width:0; overflow:hidden; transition:opacity .35s,max-width .5s var(--ease); white-space:nowrap; }
.hs-row:hover .hdesc{ opacity:1; max-width:34ch; }
.hs-row .harr{ width:42px; height:42px; border-radius:50%; border:1px solid var(--line-2); display:grid; place-items:center; transition:background .3s,color .3s,transform .4s var(--ease),border-color .3s; }
.hs-row:hover .harr{ background:var(--ink); color:#fff; border-color:var(--ink); transform:rotate(-45deg); }
@media(max-width:600px){ .hs-row .hdesc{ display:none; } .hs-row a{ grid-template-columns:auto 1fr auto; } }

/* ==========================================================================
   HOME — METRICS / OUTCOMES
   ========================================================================== */
.metrics-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
@media(max-width:880px){ .metrics-grid{ grid-template-columns:repeat(2,1fr); } }
.metrics-grid .stat{ background:var(--bg-2); padding:clamp(26px,3vw,42px); }
.metrics-grid .stat .num .plus{ color:var(--accent); }

/* big before/after band */
.ba-band{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:clamp(20px,2vw,32px); margin-top:clamp(36px,5vw,60px); }
@media(max-width:900px){ .ba-band{ grid-template-columns:1fr; } }
.ba-card{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(22px,2.4vw,32px); position:relative; overflow:hidden; }
.ba-card .ba-fig{ display:flex; align-items:flex-end; gap:14px; margin-top:14px; }
.ba-card .ba-before b{ font-family:var(--font-display); font-size:1.4rem; color:var(--muted-2); text-decoration:line-through; }
.ba-card .ba-before small{ font-family:var(--font-mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); }
.ba-card .ba-after b{ font-family:var(--font-display); font-size:clamp(1.8rem,3vw,2.6rem); color:var(--accent-ink); }
.ba-card .ba-arrow{ font-size:1.5rem; color:var(--accent); padding-bottom:.3em; }
.ba-card .ba-delta{ font-family:var(--font-mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink); margin-top:6px; }
.ba-card .ba-note{ font-size:.85rem; color:var(--muted); margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }

/* ==========================================================================
   HOME — PROCESS HORIZONTAL
   ========================================================================== */
.hp-track{ display:grid; grid-template-columns:repeat(7,minmax(220px,1fr)); gap:0; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:10px; }
.hp-track::-webkit-scrollbar{ height:6px; } .hp-track::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:4px; }
.hp-step{ scroll-snap-align:start; padding:clamp(24px,2vw,36px); border-left:1px solid var(--line); }
.hp-step:first-child{ border-left:0; }
.hp-step .n{ font-family:var(--font-display); font-weight:800; font-size:2.6rem; color:var(--line-2); line-height:1; transition:color .3s; }
.hp-step:hover .n{ color:var(--accent); }
.hp-step h4{ margin:14px 0 6px; }
.hp-step p{ font-size:.88rem; color:var(--muted); }

/* ==========================================================================
   HOME — CASE PREVIEW
   ========================================================================== */
.work-preview{ display:grid; grid-template-columns:1.4fr .9fr .9fr; grid-auto-rows:240px; gap:14px; }
@media(max-width:900px){ .work-preview{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .work-preview{ grid-template-columns:1fr; grid-auto-rows:200px; } }
.wc{ position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); }
.wc.big{ grid-row:span 2; }
@media(max-width:900px){ .wc.big{ grid-row:span 1; } }
.wc img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.wc:hover img{ transform:scale(1.06); }
.wc .wc-overlay{ position:absolute; inset:0; background:linear-gradient(180deg,transparent 35%,rgba(15,13,8,.82)); padding:18px; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; }
.wc .wc-overlay .wc-cat{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; opacity:.8; }
.wc .wc-overlay h4{ color:#fff; margin:4px 0 0; font-size:1.15rem; }
.wc .wc-overlay .wc-met{ font-size:.78rem; opacity:.8; margin-top:4px; }
.wc .wc-go{ position:absolute; top:14px; right:14px; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.9); color:var(--ink); display:grid; place-items:center; transform:scale(0); transition:transform .35s var(--ease); }
.wc:hover .wc-go{ transform:scale(1); }

/* ==========================================================================
   HOME — TESTIMONIAL
   ========================================================================== */
.tm-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2vw,30px); }
@media(max-width:900px){ .tm-grid{ grid-template-columns:1fr; } }
.tm-card{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(24px,2.6vw,36px); display:flex; flex-direction:column; gap:18px; transition:transform .4s var(--ease),box-shadow .4s; }
.tm-card:hover{ transform:translateY(-5px); box-shadow:var(--sh-2); }
.tm-card .quote{ font-size:1.02rem; line-height:1.55; color:var(--ink-2); }
.tm-card .quote::before{ content:"\201C"; font-family:var(--font-display); font-size:2.6rem; line-height:0; color:var(--accent); vertical-align:-.35em; margin-right:.1em; }
.tm-card .who{ display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:16px; border-top:1px solid var(--line); }
.tm-card .avatar{ width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#06222b; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:1.1rem; flex:none; }
.tm-card .who b{ display:block; font-weight:600; }
.tm-card .who small{ color:var(--muted); font-size:.82rem; }
.tm-card .flag{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-ink); }

/* ==========================================================================
   HOME — WHY / CAPABILITIES (asymmetric)
   ========================================================================== */
.why-layout{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(30px,4vw,64px); align-items:start; }
@media(max-width:900px){ .why-layout{ grid-template-columns:1fr; } }
.why-list .wl-row{ display:grid; grid-template-columns:auto 1fr auto; gap:clamp(16px,2vw,24px); align-items:center; padding:22px 0; border-top:1px solid var(--line); }
.why-list .wl-row:last-child{ border-bottom:1px solid var(--line); }
.why-list .wl-ic{ width:46px; height:46px; border-radius:12px; background:var(--bg-soft); border:1px solid var(--line); display:grid; place-items:center; color:var(--accent-ink); flex:none; }
.why-list h4{ font-size:1.1rem; margin-bottom:3px; }
.why-list p{ font-size:.9rem; color:var(--muted); }
.why-list .wl-arr{ color:var(--muted-2); }

/* HOME CTA band (light, editorial) */
.home-cta{ position:relative; overflow:hidden; border-radius:var(--r-xl); padding:clamp(40px,6vw,80px); background:linear-gradient(135deg,var(--bg-2),var(--bg-soft)); border:1px solid var(--line); }
.home-cta .hc-grid{ display:grid; grid-template-columns:1.4fr .9fr; gap:30px; align-items:center; }
@media(max-width:760px){ .home-cta .hc-grid{ grid-template-columns:1fr; } }
.home-cta h2{ font-size:clamp(2rem,5vw,3.6rem); line-height:1; letter-spacing:-.03em; }
.home-cta .hc-actions{ display:flex; flex-direction:column; gap:14px; align-items:flex-start; }

/* partner badges marquee */
.partner-track{ display:flex; gap:clamp(24px,4vw,54px); align-items:center; width:max-content; animation:marquee 28s linear infinite; }
.partner-track .pb{ font-family:var(--font-mono); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); white-space:nowrap; display:flex; align-items:center; gap:.5em; }
.partner-track .pb .pd{ width:6px; height:6px; border-radius:50%; background:var(--accent); }