/* =========================================================================
   Soundwave Digital — Homepage + WebGL hero
   ========================================================================= */

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;isolation:isolate;overflow:hidden;padding-top:var(--header-h)}
.hero__poster,#hero-gl{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__poster{z-index:0;background:
  radial-gradient(60% 70% at 78% 28%,rgba(232,121,249,.22),transparent 60%),
  radial-gradient(55% 65% at 18% 72%,rgba(34,211,238,.22),transparent 60%),
  radial-gradient(40% 50% at 50% 50%,rgba(99,102,241,.14),transparent 70%),
  var(--bg);}
#hero-gl{z-index:1}
.hero::after{ /* vignette + bottom fade into page */
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,7,13,.35) 0%,transparent 22%,transparent 60%,rgba(6,7,13,.85) 100%);
}
.hero__content{position:relative;z-index:3;width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.hero__inner{max-width:min(94vw,54rem)}
.hero h1{font-size:clamp(2.6rem,5.6vw,5rem);line-height:1.04;margin-bottom:1.5rem;font-weight:700;letter-spacing:-.03em;max-width:14ch;text-wrap:balance}
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .char{display:inline-block;will-change:transform}
.hero .sub{font-size:clamp(1.05rem,1.7vw,1.3rem);color:var(--text);max-width:48ch;margin-bottom:2.2rem;opacity:.92}
.hero .hero-actions{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.hero .scroll-cue{position:absolute;bottom:1.8rem;left:50%;transform:translateX(-50%);z-index:3;color:var(--muted);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:.6rem}
.hero .scroll-cue .bar{width:1px;height:34px;background:linear-gradient(180deg,var(--cyan),transparent);animation:cue 2s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}
.hero .hero-badges{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:2.2rem}
@media (prefers-reduced-motion:reduce){.hero .scroll-cue .bar{animation:none}}
@media (max-width:680px){.hero .scroll-cue{display:none}}

/* ---------- Value / "cut through the noise" split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.split .media{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3;background:var(--surface)}
.split .media img{width:100%;height:100%;object-fit:cover}
.split.reverse .media{order:-1}
@media (max-width:860px){.split.reverse .media{order:0}}

/* ---------- Amplifi feature ---------- */
.amplifi-feature{position:relative;overflow:hidden}
.amplifi-feature::before{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(50% 60% at 85% 30%,rgba(34,211,238,.10),transparent 60%),
  radial-gradient(45% 55% at 15% 80%,rgba(232,121,249,.10),transparent 60%);}
.data-indicators{display:grid;grid-template-columns:repeat(7,1fr);gap:.7rem;margin-top:2rem}
@media (max-width:900px){.data-indicators{grid-template-columns:repeat(4,1fr)}}
@media (max-width:520px){.data-indicators{grid-template-columns:repeat(2,1fr)}}
.indicator{text-align:center;padding:1rem .6rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);font-size:.82rem;color:var(--muted);transition:border-color .25s,color .25s,transform .25s}
.indicator:hover{border-color:var(--cyan);color:var(--text);transform:translateY(-3px)}
.indicator .n{display:block;font-family:var(--font-mono);font-size:.7rem;color:var(--cyan);margin-bottom:.4rem}

/* ---------- Process steps ---------- */
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
@media (max-width:820px){.steps{grid-template-columns:1fr}}
.step{position:relative;padding:1.8rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.step .num{font-family:var(--font-mono);font-size:.8rem;color:var(--cyan);letter-spacing:.1em}
.step h3{margin:.7rem 0 .5rem}
.step p{color:var(--muted);font-size:.96rem}

/* ---------- Channels band ---------- */
.channel-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
@media (max-width:860px){.channel-row{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.channel-row{grid-template-columns:1fr}}

/* ---------- Case-study stat cards ---------- */
.results{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
@media (max-width:820px){.results{grid-template-columns:1fr}}
.result{padding:2rem 1.8rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);position:relative;overflow:hidden}
.result::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--magenta),transparent);opacity:.6}
.result .metric{font-family:var(--font-display);font-weight:700;font-size:clamp(2.4rem,4.5vw,3.4rem);line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.result .client{font-weight:600;margin:.7rem 0 .5rem;font-family:var(--font-display)}
.result p{color:var(--muted);font-size:.94rem}

/* ---------- Testimonial ---------- */
.testimonial{max-width:820px;margin-inline:auto;text-align:center}
.testimonial blockquote{font-family:var(--font-display);font-size:clamp(1.3rem,2.6vw,2rem);line-height:1.4;font-weight:500;margin-bottom:1.4rem}
.testimonial blockquote .mark{color:var(--cyan)}
.testimonial cite{font-style:normal;color:var(--muted);font-family:var(--font-mono);font-size:.85rem;letter-spacing:.1em;text-transform:uppercase}

/* ---------- Capabilities core list (what we do) ---------- */
.feature-list{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem 2.4rem}
@media (max-width:760px){.feature-list{grid-template-columns:1fr}}
.feature-item{display:flex;gap:1rem;padding:1.1rem 0;border-bottom:1px solid var(--line)}
.feature-item .fi-ico{flex:0 0 auto;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--grad-soft);color:var(--cyan);border:1px solid var(--line-2)}
.feature-item .fi-ico svg{width:20px;height:20px}
.feature-item h4{font-family:var(--font-display);font-size:1.05rem;margin-bottom:.25rem}
.feature-item p{color:var(--muted);font-size:.92rem}

/* ---------- Section heading block ---------- */
.sec-head{margin-bottom:clamp(2rem,4vw,3.2rem);max-width:64ch}
.sec-head.center{margin-inline:auto}