/* ============================================================
   Quantifeye Social — styles.css
   Faithful framework-free reproduction (fixed desktop layout).
   All values transplanted verbatim from the source inline styles.
   ============================================================ */

/* ---------- Self-hosted fonts ----------
   Same-origin variable woff2 (subset to latin + latin-ext) so there is no
   third-party round-trip and no fallback→webfont flicker. Files live in
   source/fonts/; the latin files are <link rel="preload">ed in <head>.
   Each family is a single variable font spanning the weight axis we use. */
@font-face{
  font-family:'Sora';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('../fonts/sora-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Sora';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('../fonts/sora-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Geist';font-style:normal;font-weight:300 600;font-display:swap;
  src:url('../fonts/geist-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Geist';font-style:normal;font-weight:300 600;font-display:swap;
  src:url('../fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('../fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- Globals (from <helmet> <style>) ---------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--color-bg);
  font-family:var(--font-body);
  color:var(--color-text);
  overflow-x:hidden;
}

@keyframes qfPulse{0%,100%{opacity:.35;transform:scale(.9);}50%{opacity:1;transform:scale(1.15);}}
@keyframes qfFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
@keyframes qfMarquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
/* Rapid "powering-on" stutter (game/neon style): many fast on-off jumps that
   settle to fully visible — used for every flicker reveal on the page. */
@keyframes qfFlicker{
  0%{opacity:0;}
  8%{opacity:1;}
  10%{opacity:0;}
  18%{opacity:1;}
  20%{opacity:.2;}
  26%{opacity:1;}
  30%{opacity:0;}
  38%{opacity:1;}
  42%{opacity:.35;}
  48%{opacity:1;}
  52%{opacity:.1;}
  60%{opacity:1;}
  66%{opacity:.6;}
  72%{opacity:1;}
  78%{opacity:.85;}
  84%{opacity:1;}
  100%{opacity:1;}
}

/* Accessibility override (replaces DC reduceMotion prop).
   The !important resets are a documented accessibility override: when the
   user prefers reduced motion we force every animated/revealed element to its
   final, static state. */
@media (prefers-reduced-motion: reduce){
  [data-anim]{ animation: none !important; }
  .qf-anim [data-reveal],
  .qf-anim .flicker-seg{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
    animation:none !important;
  }
}

/* ---------- Design tokens ---------- */
:root{
  /* surfaces */
  --color-bg:#070b14;          /* page background */
  --color-bg-alt:#080d18;      /* alternating section background */
  --color-card:#0b1220;        /* card background */
  --color-footer:#060910;      /* deep footer background */
  /* brand accents */
  --color-accent:#22d3ee;      /* cyan */
  --color-blue:#3b82f6;
  --color-green:#34d399;
  /* text */
  --color-heading:#f3f7fc;
  --color-text:#cdd6e4;
  --color-muted:#9aa6b8;
  --color-dim:#6f7d92;
  --color-dimmer:#5b6678;
  /* fonts */
  --font-display:'Sora',sans-serif;
  --font-body:'Geist',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  /* motion (scroll-reveal entrance animations).
     Every time-based token is a 1x base value multiplied by --motion-scale,
     so the overall animation speed is tuned from a single constant. */
  --motion-scale:2;                                       /* global slow-down factor */
  --reveal-dur:calc(.6s * var(--motion-scale));           /* fade/slide duration */
  --reveal-ease:ease-in-out;                              /* soft start/end for all reveals */
  --reveal-shift:14px;                                    /* slight slide distance (not time-scaled) */
  --stagger-step:calc(.08s * var(--motion-scale));        /* per-item cascade delay */
  --convo-step:calc(.375s * var(--motion-scale));         /* slower cadence: chat bubbles arrive one by one */
  --flicker-dur:calc(.26s * var(--motion-scale));         /* rapid game-style stutter */
  --flicker-step:calc(.06s * var(--motion-scale));        /* badge word cascade delay */
  --hero-reveal-dur:calc(.75s * var(--motion-scale));     /* longer, gentle hero text fade */
  --bar-fill-dur:calc(.45s * var(--motion-scale));        /* progress bar grows as its row fades in */
  --bar-fill-ease:ease-out;                               /* decelerate into the final value */
  --chart-step:calc(.18s * var(--motion-scale));          /* chart-card cascade: rows reveal one after another */
  /* Live CRM pipeline (js/pipeline.js). The board reserves room for
     --pipeline-rows cards per column; slide/fade durations are read back off
     these vars by the engine so JS and CSS share one source of truth. */
  --pipeline-rows:4;                                      /* visible-row capacity per column */
  --deal-card-h:54px;                                     /* reserved height of one deal card */
  --deal-card-gap:9px;                                    /* vertical gap between deal cards */
  --deal-slide-dur:calc(.5s * var(--motion-scale));       /* card slide stage → stage (FLIP) */
  --deal-fade-dur:calc(.4s * var(--motion-scale));        /* card fade on loss / archive */
}

/* ============================================================
   SHARED COMPONENTS
   ============================================================ */

/* Eyebrow label (mono, cyan, letter-spaced, uppercase) */
.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--color-accent);
  margin-bottom:16px;
}

/* Section heading + subtitle */
.section-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:40px;
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--color-heading);
  margin:0 0 16px;
  text-wrap:balance;
}
.section-title--38{font-size:38px;}
/* 42px centered variant (intelligence layer) */
.section-title--42{font-size:42px;line-height:1.08;margin:0 auto 16px;max-width:760px;}
/* 50px centered variant (final CTA) */
.section-title--50{font-weight:800;font-size:50px;line-height:1.06;letter-spacing:-.025em;margin:0 auto 18px;max-width:760px;}

.section-subtitle{
  font-size:17px;
  line-height:1.6;
  color:var(--color-muted);
  margin:0;
}

/* Section header block (centered, capped width) */
.section-head{text-align:center;margin:0 auto 52px;}
.section-head--720{max-width:720px;}            /* 52px (default) */
.section-head--740{max-width:740px;}            /* 52px (default) */
.section-head--740-56{max-width:740px;margin-bottom:56px;}
.section-head--720-48{max-width:720px;margin-bottom:48px;}

/* Brand gradient text */
.gradient-text{
  background:linear-gradient(90deg,var(--color-accent),var(--color-blue));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ---------- Scroll-reveal entrance animations ----------
   Pre-animation state is scoped to `.qf-anim` (set on <html> in the markup).
   `is-inview` is added by js/reveal.js when an element scrolls into view; the
   per-item stagger index (--i, also set by reveal.js) makes grouped children
   cascade left-to-right. A <noscript> rule in <head> and the reduced-motion
   block above both reveal everything when JS or motion is unavailable. */
.qf-anim [data-reveal]{opacity:0;}
.qf-anim [data-reveal="down"]{transform:translateY(calc(-1 * var(--reveal-shift)));}
.qf-anim [data-reveal="left"]{transform:translateX(calc(-1 * var(--reveal-shift)));}
.qf-anim [data-reveal].is-inview{
  opacity:1;
  transform:none;
  transition:opacity var(--reveal-dur) var(--reveal-ease),
             transform var(--reveal-dur) var(--reveal-ease);
  transition-delay:calc(var(--i, 0) * var(--stagger-step));
}

/* The hero text uses a longer fade (on the shared ease-in-out curve) so it
   emerges smoothly from transparent instead of appearing abruptly on load. */
.qf-anim .hero__inner [data-reveal]{
  --reveal-dur:var(--hero-reveal-dur);
}

/* Hero badge: words split into .flicker-seg by reveal.js, flicker on in
   sequence (left to right) once the badge scrolls into view. */
.qf-anim .flicker-seg{opacity:0;}
.qf-anim .hero__badge.is-inview .flicker-seg{
  animation:qfFlicker var(--flicker-dur) steps(1,end) both;
  animation-delay:calc(var(--i, 0) * var(--flicker-step));
}
/* After the flicker has played once, a language re-split appears instantly. */
.qf-anim .hero__badge.flickered .flicker-seg{
  animation:none;
  opacity:1;
}

/* Platform Insights card: whole block flickers in after the last regular card
   finishes (5 cards × stagger-step + reveal-dur = card-06 completion time). */
.qf-anim .platform-card--wide[data-reveal="flicker"].is-inview{
  animation-delay:calc(5 * var(--stagger-step) + var(--reveal-dur));
}

/* Flicker-in entrance variant: snaps an element on with the rapid stutter
   (steps(1,end) for hard, digital on/off jumps) instead of fading. Shares the
   is-inview observer and the per-[data-stagger]-group --i index, so flagged
   elements flicker on in sequence. Declared after the generic
   [data-reveal].is-inview rule so it wins on equal specificity; the running
   animation drives opacity regardless. */
.qf-anim [data-reveal="flicker"].is-inview{
  animation:qfFlicker var(--flicker-dur) steps(1,end) both;
  animation-delay:calc(var(--i, 0) * var(--stagger-step));
}

/* Heading triplets across the page: the eyebrow flickers (small text) while the
   title + subtitle (big + normal) use the longer, gentle hero fade + slide from
   top — matching the hero. Centered section heads share one rule; Intelligence
   and the final CTA carry their triplet directly in their inner wrapper. */
.qf-anim .section-head [data-reveal="down"],
.qf-anim .intel [data-reveal="down"],
.qf-anim .cta [data-reveal="down"]{
  --reveal-dur:var(--hero-reveal-dur);
}

/* AI Agents heading, subcopy + checklist use the longer, gentle hero fade
   (same ease-in-out, slide from top) rather than the default reveal duration. */
.qf-anim .agents [data-reveal="down"]{
  --reveal-dur:var(--hero-reveal-dur);
}

/* Conversation panel: widen the per-item cascade so the chat bubbles arrive
   one at a time (like a live thread) instead of together — header, then each
   bubble ~0.75s apart, then the lead-card flickers in at the end. */
.qf-anim .convo{
  --stagger-step:var(--convo-step);
}
/* Each bubble itself fades in quickly (snappy) — the unhurried feel comes from
   the gap between them (--convo-step), not from a slow fade. */
.qf-anim .convo [data-reveal="fade"]{
  --reveal-dur:calc(.22s * var(--motion-scale));
}

/* "Content That Learns": the eyebrow flickers while the title + subcopy use the
   longer, gentle hero fade (slide from top), matching the AI Agents heading. */
.qf-anim .content [data-reveal="down"]{
  --reveal-dur:var(--hero-reveal-dur);
}

/* Chart card cascades its children one after another (title, delta, each bar
   row, then the insight) — a wider step than the default so the rows read as a
   clear sequence rather than appearing in unison. Mirrors the .convo override. */
.qf-anim .chart-card{
  --stagger-step:var(--chart-step);
}

/* The bar rows fade in quickly (snappy) — the sequenced feel comes from the
   per-row stagger, not a slow fade. */
.qf-anim .content .chart-card__bars [data-reveal="fade"]{
  --reveal-dur:calc(.3s * var(--motion-scale));
}

/* Progress bars (chart card): each row fades in on its own staggered delay and,
   in step with that fade, its fill grows from 0 to its target width while
   reveal.js counts the value up over the same duration. The fill shares the
   row's stagger offset (--i × --stagger-step), so bar and number move together.
   `bars-armed` (added by reveal.js only when motion is enabled) holds the fills
   at 0 until their row reveals — so without JS or under reduced motion the
   markup's full widths render unchanged. */
.qf-anim .content .chart-card__bars.bars-armed .bar-fill{
  width:0;
}
.qf-anim .content .chart-card__bars.bars-armed [data-reveal="fade"].is-inview .bar-fill{
  transition:width var(--bar-fill-dur) var(--bar-fill-ease);
  transition-delay:calc(var(--i, 0) * var(--stagger-step));
}
.qf-anim .content .chart-card__bars.bars-armed [data-reveal="fade"].is-inview .bar-fill--92{width:92%;}
.qf-anim .content .chart-card__bars.bars-armed [data-reveal="fade"].is-inview .bar-fill--66{width:66%;}
.qf-anim .content .chart-card__bars.bars-armed [data-reveal="fade"].is-inview .bar-fill--44{width:44%;}
.qf-anim .content .chart-card__bars.bars-armed [data-reveal="fade"].is-inview .bar-fill--30{width:30%;}

/* Buttons */
.btn{
  text-decoration:none;
  border-radius:9px;
  display:inline-block;
}
.btn--primary{
  font-size:15px;
  font-weight:600;
  color:#06121a;
  background:var(--color-accent);
  padding:14px 26px;
  box-shadow:0 8px 30px rgba(34,211,238,.28);
}
.btn--ghost{
  font-size:15px;
  font-weight:500;
  color:var(--color-text);
  border:1px solid rgba(255,255,255,.16);
  padding:14px 26px;
}
/* large CTA-section variants */
.btn--lg-primary{
  font-size:16px;
  font-weight:600;
  color:#06121a;
  background:var(--color-accent);
  padding:16px 30px;
  border-radius:10px;
  box-shadow:0 10px 40px rgba(34,211,238,.3);
}
.btn--lg-ghost{
  font-size:16px;
  font-weight:500;
  color:var(--color-text);
  border:1px solid rgba(255,255,255,.18);
  padding:16px 30px;
  border-radius:10px;
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(14px);
  background:rgba(7,11,20,.78);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav__inner{
  max-width:1280px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 40px;
}
.nav__left{display:flex;align-items:center;gap:38px;}
.nav__logo{height:28px;display:block;position:relative;top:2px;cursor:pointer;}
.nav__links{display:flex;gap:26px;font-size:14.5px;color:var(--color-muted);}
.nav__link{color:var(--color-muted);text-decoration:none;}
.nav__right{display:flex;align-items:center;gap:14px;}
.lang-toggle{
  display:flex;
  border:1px solid rgba(255,255,255,.14);
  border-radius:8px;
  overflow:hidden;
  font-family:var(--font-mono);
  font-size:12px;
}
.lang-pill{padding:7px 11px;cursor:pointer;}
.lang-pill.is-active{background:var(--color-accent);color:#06121a;font-weight:600;}
.lang-pill.is-inactive{background:transparent;color:var(--color-muted);}
.nav__signin{font-size:14.5px;color:var(--color-muted);cursor:pointer;text-decoration:none;}
.nav__cta{
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  color:#06121a;
  background:var(--color-accent);
  padding:10px 18px;
  border-radius:8px;
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  background:radial-gradient(900px 600px at 50% -12%,rgba(34,211,238,.13),transparent 60%);
}
.hero__inner{
  max-width:1280px;
  margin:0 auto;
  padding:72px 40px 26px;
  text-align:center;
}
.hero__badge{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--color-accent);
  border:1px solid rgba(34,211,238,.3);
  background:rgba(34,211,238,.07);
  padding:7px 14px;
  border-radius:100px;
  margin-bottom:26px;
}
.pulse-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--color-accent);
  display:inline-block;
  animation:qfPulse 2.4s ease-in-out infinite;
}
.hero__title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:60px;
  line-height:1.04;
  letter-spacing:-.02em;
  color:var(--color-heading);
  margin:0 auto 22px;
  max-width:920px;
  text-wrap:balance;
}
.hero__sub{
  font-size:18.5px;
  line-height:1.6;
  color:var(--color-muted);
  margin:0 auto 32px;
  max-width:640px;
}
.hero__actions{display:flex;gap:14px;justify-content:center;}

/* ---------- Flow loop ---------- */
.loop{max-width:1280px;margin:0 auto;padding:30px 40px 26px;}
.loop__row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0;}
.loop-step{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  width:120px;
  text-align:center;
}
.loop-step__node{
  width:54px;height:54px;
  border-radius:13px;
  background:linear-gradient(160deg,#0f1b2c,#0b1320);
  border:1px solid rgba(34,211,238,.25);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--color-accent);
  font-weight:600;
}
.loop-step__node--active{
  background:linear-gradient(160deg,#12233a,#0b1320);
  border:1px solid rgba(34,211,238,.45);
  box-shadow:0 0 0 4px rgba(34,211,238,.08);
}
.loop-step__node--revenue{
  background:linear-gradient(160deg,#13261d,#0b1320);
  border:1px solid rgba(52,211,153,.4);
  color:var(--color-green);
}
.loop-step__label{font-size:12.5px;color:var(--color-text);font-weight:500;}
.loop-step__label--active{color:var(--color-accent);font-weight:600;}
.loop-step__label--revenue{color:var(--color-green);font-weight:600;}
.loop-connector{
  width:30px;height:1px;
  background:linear-gradient(90deg,rgba(34,211,238,.5),rgba(34,211,238,.15));
}
.loop-connector--revenue{
  background:linear-gradient(90deg,rgba(34,211,238,.5),rgba(52,211,153,.4));
}
.loop__insights{
  margin:24px auto 0;
  max-width:760px;
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:center;
  padding:12px 18px;
  border-radius:100px;
  border:1px dashed rgba(34,211,238,.3);
  background:rgba(34,211,238,.04);
  flex-wrap:wrap;
}
.loop__insights-tag{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--color-accent);
}
.loop__insights-text{font-size:13px;color:var(--color-muted);}

/* ---------- Channel marquee (hero) ---------- */
.marquee{max-width:1280px;margin:0 auto;padding:18px 40px 64px;text-align:center;}
.marquee__label{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--color-dim);
  margin-bottom:16px;
}
.marquee__row{
  display:flex;gap:9px;justify-content:center;flex-wrap:wrap;
  max-width:780px;margin:0 auto;
}
.marquee-badge{
  width:36px;height:36px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;color:#fff;
}
.marquee-badge--ig{background:linear-gradient(135deg,#f9ce34,#ee2a7b,#6228d7);font-size:11px;}
.marquee-badge--fb{background:#1877f2;font-size:14px;}
.marquee-badge--msg{background:#0084ff;font-size:12px;}
.marquee-badge--wa{background:#25d366;font-size:10px;}
.marquee-badge--in{background:#0a66c2;font-size:12px;}
.marquee-badge--tt{background:#111;border:1px solid rgba(255,255,255,.15);font-size:10px;color:#25f4ee;}
.marquee-badge--yt{background:#ff0033;font-size:9px;}
.marquee-badge--tg{background:#229ed9;font-size:12px;}
.marquee-badge--wp{background:#21759b;font-size:10px;}
.marquee-badge--g{background:#4285f4;font-size:12px;}
.marquee-badge--more{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  font-size:12px;color:var(--color-accent);
}

/* ============================================================
   PROBLEM
   ============================================================ */
.problem{
  background:var(--color-bg-alt);
  border-top:1px solid rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.problem__inner{max-width:1280px;margin:0 auto;padding:92px 40px;}
.problem__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.problem-card{
  background:var(--color-card);
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  padding:22px;
}
.problem-card__num{
  font-family:var(--font-display);
  font-size:13px;
  color:var(--color-dimmer);
  font-weight:600;
  margin-bottom:12px;
}
.problem-card__text{
  font-size:14.5px;
  line-height:1.5;
  color:var(--color-text);
}

/* ============================================================
   PLATFORM
   ============================================================ */
.platform{scroll-margin-top:80px;}
.platform__inner{max-width:1280px;margin:0 auto;padding:96px 40px;}
.platform__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.platform-card{
  background:linear-gradient(180deg,#0d1422,#0a0f1b);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:26px;
}
.platform-card--featured{
  border:1px solid rgba(34,211,238,.25);
  box-shadow:0 0 0 1px rgba(34,211,238,.08);
}
.platform-card__num{
  width:42px;height:42px;
  border-radius:11px;
  background:rgba(34,211,238,.1);
  border:1px solid rgba(34,211,238,.25);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;
  font-family:var(--font-mono);
  font-size:13px;font-weight:600;color:var(--color-accent);
}
.platform-card__num--featured{
  background:rgba(34,211,238,.16);
  border:1px solid rgba(34,211,238,.4);
}
.platform-card__title{
  font-family:var(--font-display);
  font-size:19px;font-weight:600;
  color:var(--color-heading);
  margin:0 0 9px;
}
.platform-card__desc{
  font-size:14.5px;line-height:1.55;
  color:var(--color-muted);
  margin:0;
}
/* full-width gradient card #07 */
.platform-card--wide{
  grid-column:1 / -1;
  background:linear-gradient(110deg,rgba(34,211,238,.12),rgba(59,130,246,.07));
  border:1px solid rgba(34,211,238,.28);
  border-radius:16px;
  padding:30px 32px;
  display:flex;
  align-items:center;
  gap:24px;
  justify-content:space-between;
  flex-wrap:wrap;
}
.platform-card--wide .platform-wide__left{display:flex;align-items:center;gap:20px;}
.platform-wide__num{
  width:48px;height:48px;
  border-radius:12px;
  background:rgba(34,211,238,.18);
  border:1px solid rgba(34,211,238,.45);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);
  font-size:14px;font-weight:600;color:var(--color-accent);
}
.platform-wide__title{
  font-family:var(--font-display);
  font-size:21px;font-weight:600;
  color:var(--color-heading);
  margin:0 0 5px;
}
.platform-wide__desc{
  font-size:14.5px;line-height:1.55;
  color:#b9c3d3;
  margin:0;
  max-width:560px;
}
.platform-wide__pill{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--color-accent);
  border:1px solid rgba(34,211,238,.35);
  padding:8px 13px;
  border-radius:100px;
  white-space:nowrap;
}

/* ============================================================
   AI AGENTS
   ============================================================ */
.agents{
  background:var(--color-bg-alt);
  border-top:1px solid rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.05);
  scroll-margin-top:80px;
}
.split{
  max-width:1280px;
  margin:0 auto;
  padding:96px 40px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:center;
}
.agents__sub{
  font-size:17px;line-height:1.6;
  color:var(--color-muted);
  margin:0 0 28px;
  max-width:520px;
}
.agents__checks{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
.check{display:flex;gap:10px;align-items:flex-start;}
.check__mark{flex:none;color:var(--color-accent);font-size:15px;margin-top:1px;}
.check__text{font-size:14.5px;color:var(--color-text);}

/* conversation -> lead visual */
.convo{
  position:relative;
  background:linear-gradient(180deg,#0e1626,#0b1220);
  border:1px solid rgba(255,255,255,.09);
  border-radius:18px;
  padding:22px;
  box-shadow:0 30px 70px rgba(0,0,0,.45);
}
.convo__head{display:flex;align-items:center;gap:9px;margin-bottom:16px;}
.convo__avatar{
  width:30px;height:30px;border-radius:8px;
  background:linear-gradient(135deg,#f9ce34,#ee2a7b,#6228d7);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;color:#fff;
}
.convo__handle{font-size:13px;color:var(--color-text);font-weight:600;}
.convo__thread{display:flex;flex-direction:column;gap:10px;}
.bubble{
  font-size:13px;
  padding:10px 13px;
  border-radius:13px;
}
.bubble--in{
  align-self:flex-start;max-width:80%;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-bottom-left-radius:4px;
  color:#dbe6f2;
}
.bubble--ai{
  align-self:flex-end;max-width:82%;
  background:linear-gradient(135deg,rgba(34,211,238,.16),rgba(59,130,246,.12));
  border:1px solid rgba(34,211,238,.28);
  border-bottom-right-radius:4px;
  color:#eaf4fb;
}
.bubble__tag{
  font-family:var(--font-mono);
  font-size:9px;letter-spacing:1px;text-transform:uppercase;
  color:var(--color-accent);
  margin-bottom:5px;
}
.lead-card{
  margin-top:14px;
  padding:14px;
  border-radius:13px;
  background:rgba(52,211,153,.07);
  border:1px solid rgba(52,211,153,.28);
}
.lead-card__head{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.lead-card__dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--color-green);
  animation:qfPulse 2.4s ease-in-out infinite;
}
.lead-card__tag{
  font-family:var(--font-mono);
  font-size:10px;letter-spacing:1px;text-transform:uppercase;
  color:var(--color-green);
}
.lead-card__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.lead-field__label{font-size:10.5px;color:var(--color-dim);}
.lead-field__value{font-size:13px;color:#eef3f9;font-weight:600;}
.lead-field__value--intent{font-size:13px;color:var(--color-green);font-weight:700;}

/* ============================================================
   CRM & FUNNEL
   ============================================================ */
.crm{scroll-margin-top:80px;}
.crm__inner{max-width:1280px;margin:0 auto;padding:96px 40px;}
.pipeline{display:grid;grid-template-columns:repeat(5,1fr);gap:13px;}
.pipeline-col{
  background:var(--color-card);
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  padding:15px;
}
.pipeline-col--qualified{border:1px solid rgba(34,211,238,.25);}
.pipeline-col--won{
  background:linear-gradient(180deg,rgba(52,211,153,.08),#0b1220);
  border:1px solid rgba(52,211,153,.3);
}
.pipeline-col__head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:13px;
}
.pipeline-col__name{font-size:12.5px;font-weight:600;color:var(--color-text);}
.pipeline-col__name--qualified{color:var(--color-accent);}
.pipeline-col__name--won{color:var(--color-green);}
.pipeline-col__count{font-family:var(--font-mono);font-size:11px;color:var(--color-dim);}
.pipeline-col__count--won{font-family:var(--font-mono);font-size:11px;color:var(--color-green);}
/* Reserve room for --pipeline-rows cards so columns keep a steady height as the
   live engine (js/pipeline.js) adds and removes cards. */
.pipeline-col__cards{
  display:flex;flex-direction:column;
  gap:var(--deal-card-gap);
  min-height:calc(
    var(--pipeline-rows) * var(--deal-card-h) +
    (var(--pipeline-rows) - 1) * var(--deal-card-gap)
  );
}
.deal-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  border-radius:10px;
  padding:11px;
}
/* Live-board states driven by js/pipeline.js. The engine only adds these when
   motion is enabled (it bails under prefers-reduced-motion), so the static
   fallback cards never animate. --moving carries the FLIP slide; --spawning
   flickers a new card on with the shared game-style stutter; --leaving fades a
   lost / archived card out before removal. */
.deal-card--moving{
  position:relative;
  z-index:2;
  transition:transform var(--deal-slide-dur) var(--reveal-ease);
  will-change:transform;
}
.deal-card--spawning{
  animation:qfFlicker var(--flicker-dur) steps(1,end) both;
}
.deal-card--leaving{
  opacity:0;
  transition:opacity var(--deal-fade-dur) var(--reveal-ease);
}
.deal-card--qualified{
  background:rgba(34,211,238,.07);
  border:1px solid rgba(34,211,238,.22);
}
.deal-card--won{
  background:rgba(52,211,153,.08);
  border:1px solid rgba(52,211,153,.25);
}
.deal-card__name{font-size:12.5px;color:#eef3f9;font-weight:600;}
.deal-card__meta{font-size:10.5px;color:var(--color-dim);margin-top:3px;}
.deal-card__meta--accent{font-size:10.5px;color:var(--color-green);margin-top:3px;}

/* ============================================================
   CONTENT THAT LEARNS
   ============================================================ */
.content{
  background:var(--color-bg-alt);
  border-top:1px solid rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.content__sub{
  font-size:17px;line-height:1.6;
  color:var(--color-muted);
  margin:0;
  max-width:520px;
}
.chart-card{
  background:linear-gradient(180deg,#0e1626,#0b1220);
  border:1px solid rgba(255,255,255,.09);
  border-radius:18px;
  padding:24px;
  box-shadow:0 30px 70px rgba(0,0,0,.4);
}
.chart-card__head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:18px;
}
.chart-card__title{font-size:13px;color:var(--color-text);font-weight:600;}
.chart-card__delta{font-family:var(--font-mono);font-size:10.5px;color:var(--color-green);}
.chart-card__bars{display:flex;flex-direction:column;gap:13px;}
.bar-row__head{display:flex;justify-content:space-between;margin-bottom:5px;}
.bar-row__label{font-size:12.5px;color:var(--color-text);}
.bar-row__value{font-family:var(--font-mono);font-size:11px;color:var(--color-muted);}
.bar-track{
  height:8px;border-radius:4px;
  background:rgba(255,255,255,.06);
  overflow:hidden;
}
.bar-fill{
  height:100%;
  background:linear-gradient(90deg,var(--color-accent),var(--color-blue));
}
.bar-fill--92{width:92%;}
.bar-fill--66{width:66%;}
.bar-fill--44{width:44%;}
.bar-fill--30{width:30%;}
.chart-card__insight{
  margin-top:18px;
  padding:13px;
  border-radius:12px;
  background:rgba(34,211,238,.06);
  border:1px solid rgba(34,211,238,.22);
  font-size:12.5px;color:#b9c3d3;line-height:1.5;
}
.chart-card__insight-label{color:var(--color-accent);font-weight:600;}

/* ============================================================
   OMNICHANNEL
   ============================================================ */
.omni{scroll-margin-top:80px;}
.omni__inner{max-width:1280px;margin:0 auto;padding:96px 40px;}
/* Frogger-style marquee: three lanes scrolling in alternating directions.
   Edges fade out via a horizontal mask so tiles slide in/out smoothly. */
.omni__marquee{
  display:flex;flex-direction:column;gap:14px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.omni__row{overflow:hidden;}
/* Each track holds two copies of the lane, so animating translateX(0→-50%)
   (qfMarquee) scrolls exactly one copy and loops seamlessly. Tile spacing is
   a trailing margin (not flex gap) so the gap is uniform across the wrap. */
.omni__track{
  display:flex;width:max-content;
  animation:qfMarquee 58s linear infinite;
  will-change:transform;
}
.omni__track:hover{animation-play-state:paused;}
.omni__row--a .omni__track{animation-direction:reverse;}
.omni__row--b .omni__track{animation-duration:66s;}
.omni__row--c .omni__track{animation-duration:50s;animation-direction:reverse;}
.channel-tile{
  display:flex;flex-direction:row;align-items:center;gap:14px;
  flex:0 0 auto;
  min-width:248px;
  margin-right:14px;
  background:var(--color-card);
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;
  padding:18px 24px;
}
.channel-tile__name{font-size:15px;color:var(--color-muted);white-space:nowrap;}
.channel-badge{
  width:46px;height:46px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;color:#fff;flex:0 0 auto;
}
.channel-badge--ig{background:linear-gradient(135deg,#f9ce34,#ee2a7b,#6228d7);font-size:12px;}
.channel-badge--fb{background:#1877f2;font-size:15px;}
.channel-badge--msg{background:#0084ff;font-size:13px;}
.channel-badge--wa{background:#25d366;font-size:11px;}
.channel-badge--g{background:#4285f4;font-size:13px;}
.channel-badge--wp{background:#21759b;font-size:11px;}
.channel-badge--webchat{
  background:rgba(34,211,238,.15);
  border:1px solid rgba(34,211,238,.3);
  font-size:13px;color:var(--color-accent);
}
.channel-badge--in{background:#0a66c2;font-size:13px;}
.channel-badge--tt{background:#111;border:1px solid rgba(255,255,255,.14);font-size:11px;color:#25f4ee;}
.channel-badge--yt{background:#ff0033;font-size:10px;}
.channel-badge--threads{background:#111;border:1px solid rgba(255,255,255,.14);font-size:13px;}
.channel-badge--pinterest{background:#e60023;font-size:13px;}
.channel-badge--tg{background:#229ed9;font-size:13px;}
.channel-badge--discord{background:#5865f2;font-size:13px;}
.channel-badge--reddit{background:#ff4500;font-size:13px;}
.channel-badge--bluesky{background:#1185fe;font-size:13px;}
.channel-badge--mastodon{background:#6364ff;font-size:13px;}
.channel-badge--ghost{background:#15171a;border:1px solid rgba(255,255,255,.14);font-size:13px;}
.channel-badge--blogger{background:#ff5722;font-size:13px;}
.channel-badge--rss{background:#f26522;font-size:13px;}
.channel-badge--signal{background:#3a76f0;font-size:13px;}

/* ============================================================
   HUMAN + AI
   ============================================================ */
.human{
  background:var(--color-bg-alt);
  border-top:1px solid rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.human__inner{max-width:1280px;margin:0 auto;padding:96px 40px;}
.human__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
.feature-card{
  background:var(--color-card);
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  padding:22px;
}
.feature-card__icon{
  width:40px;height:40px;border-radius:10px;
  background:rgba(34,211,238,.1);
  border:1px solid rgba(34,211,238,.25);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:14px;
  color:var(--color-accent);
  font-size:16px;
}
.feature-card__title{
  font-family:var(--font-display);
  font-size:16px;font-weight:600;
  color:var(--color-heading);
  margin:0 0 7px;
}
.feature-card__desc{
  font-size:13px;line-height:1.5;
  color:var(--color-muted);
  margin:0;
}

/* ============================================================
   INTELLIGENCE LAYER
   ============================================================ */
.intel{
  position:relative;
  background:radial-gradient(800px 460px at 50% 0%,rgba(34,211,238,.1),transparent 60%);
}
.intel__inner{
  max-width:1280px;margin:0 auto;
  padding:96px 40px;
  text-align:center;
}
.intel__sub{
  font-size:17.5px;line-height:1.6;
  color:var(--color-muted);
  margin:0 auto 40px;
  max-width:640px;
}
.intel__pills{
  display:flex;gap:13px;justify-content:center;flex-wrap:wrap;
  margin-bottom:34px;
}
.intel-pill{
  background:rgba(34,211,238,.08);
  border:1px solid rgba(34,211,238,.28);
  border-radius:100px;
  padding:11px 22px;
  font-size:14.5px;
  color:#dbe6f2;
  font-weight:500;
}
.intel__tag{
  display:inline-block;
  font-family:var(--font-display);
  font-size:22px;
  font-weight:600;
}

/* ============================================================
   USE CASES
   ============================================================ */
.usecases{
  background:var(--color-bg-alt);
  border-top:1px solid rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.05);
  scroll-margin-top:80px;
}
.usecases__inner{max-width:1280px;margin:0 auto;padding:96px 40px;}
.usecases__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.usecase-card{
  background:var(--color-card);
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  padding:22px;
}
.usecase-card__text{
  font-size:14.5px;
  color:#eef3f9;
  font-weight:600;
  line-height:1.4;
}

/* ============================================================
   FINAL CTA
   ============================================================ */
.cta{
  position:relative;
  scroll-margin-top:80px;
  background:radial-gradient(900px 500px at 50% 120%,rgba(34,211,238,.16),transparent 62%);
}
.cta__inner{
  max-width:1000px;margin:0 auto;
  padding:110px 40px;
  text-align:center;
}
.cta__sub{
  font-size:19px;line-height:1.6;
  color:var(--color-muted);
  margin:0 auto 36px;
  max-width:600px;
}
.cta__actions{display:flex;gap:14px;justify-content:center;margin-bottom:22px;}
.cta__contact{
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--color-dim);
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  border-top:1px solid rgba(255,255,255,.07);
  background:var(--color-footer);
}
.footer__top{
  max-width:1280px;margin:0 auto;
  padding:56px 40px 40px;
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:40px;
}
.footer__logo{height:34px;display:block;margin-bottom:16px;}
.footer__tag{
  font-size:14px;line-height:1.6;
  color:#7d8a9e;
  margin:0;
  max-width:300px;
}
.footer__col-title{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--color-dimmer);
  margin-bottom:16px;
}
.footer__links{display:flex;flex-direction:column;gap:11px;font-size:14px;}
.footer__link{color:var(--color-muted);text-decoration:none;}
.footer__bottom{
  max-width:1280px;margin:0 auto;
  padding:24px 40px 40px;
  border-top:1px solid rgba(255,255,255,.05);
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
}
.footer__rights{font-size:12.5px;color:var(--color-dimmer);}
.footer__langs{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:1px;
  color:var(--color-dimmer);
}

/* ============================================================
   MOBILE
   Desktop remains the source-of-truth above. These overrides only reshape the
   fixed desktop composition for phone-sized viewports.
   ============================================================ */
@media (max-width:767px), (max-width:900px) and (pointer:coarse){
  :root{
    --motion-scale:1.25;
    --pipeline-rows:3;
  }

  html{scroll-padding-top:70px;}

  .section-title,
  .section-title--38,
  .section-title--42,
  .section-title--50{
    font-size:clamp(30px,8.5vw,36px);
    line-height:1.12;
    letter-spacing:-.025em;
  }
  .section-subtitle,
  .agents__sub,
  .content__sub,
  .intel__sub,
  .cta__sub{
    font-size:16px;
    line-height:1.55;
  }
  .section-head,
  .section-head--740-56,
  .section-head--720-48{margin-bottom:36px;}
  .eyebrow{font-size:11px;line-height:1.5;margin-bottom:12px;}

  .nav__inner{padding:11px 16px;gap:8px;}
  .nav__left{gap:0;min-width:0;}
  .nav__logo{width:78px;height:auto;top:1px;}
  .nav__links,
  .nav__signin{display:none;}
  .nav__right{gap:7px;}
  .lang-toggle{font-size:11px;border-radius:7px;}
  .lang-pill{
    min-width:34px;
    min-height:40px;
    padding:0 8px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .nav__cta{
    min-height:40px;
    display:flex;
    align-items:center;
    padding:0 11px;
    font-size:12px;
    text-align:center;
  }

  .hero{
    background:radial-gradient(520px 420px at 50% -8%,rgba(34,211,238,.15),transparent 66%);
  }
  .hero__inner{padding:54px 20px 18px;}
  .hero__badge{
    max-width:100%;
    justify-content:center;
    padding:7px 12px;
    margin-bottom:22px;
    font-size:10px;
    line-height:1.5;
    letter-spacing:1px;
  }
  .hero__title{font-size:clamp(36px,10.5vw,44px);line-height:1.07;margin-bottom:18px;}
  .hero__sub{font-size:16px;line-height:1.55;margin-bottom:26px;}
  .hero__actions,
  .cta__actions{flex-direction:column;gap:10px;}
  .hero__actions .btn,
  .cta__actions a{
    width:100%;
    min-height:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 20px;
    text-decoration:none;
  }

  .loop{padding:24px 20px 22px;}
  .loop__row{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    row-gap:24px;
  }
  .loop-step{width:auto;min-width:0;gap:8px;}
  .loop-step__node{width:48px;height:48px;border-radius:12px;}
  .loop-step__label{font-size:11.5px;line-height:1.25;}
  .loop-connector{display:none;}
  .loop__insights{
    margin-top:26px;
    padding:14px 16px;
    border-radius:16px;
    gap:7px;
  }
  .loop__insights-tag,
  .loop__insights-text{
    width:100%;
    text-align:center;
    line-height:1.45;
  }
  .loop__insights-text{font-size:12.5px;}

  .marquee{padding:14px 20px 52px;}
  .marquee__row{gap:8px;}
  .marquee-badge{width:34px;height:34px;border-radius:8px;}

  .problem__inner,
  .platform__inner,
  .crm__inner,
  .omni__inner,
  .human__inner,
  .intel__inner,
  .usecases__inner{padding:68px 20px;}

  .problem__grid,
  .platform__grid,
  .human__grid,
  .usecases__grid{grid-template-columns:1fr;gap:12px;}

  .problem-card,
  .usecase-card{
    display:flex;
    align-items:flex-start;
    gap:14px;
    padding:18px;
  }
  .problem-card__num{flex:none;margin:2px 0 0;}
  .problem-card__text,
  .usecase-card__text{font-size:14px;}

  .platform-card{padding:22px;}
  .platform-card__num{margin-bottom:15px;}
  .platform-card--wide{
    padding:22px;
    align-items:flex-start;
    gap:18px;
  }
  .platform-card--wide .platform-wide__left{
    align-items:flex-start;
    gap:15px;
  }
  .platform-wide__num{width:44px;height:44px;flex:none;}
  .platform-wide__title{font-size:19px;}
  .platform-wide__desc{font-size:14px;}
  .platform-wide__pill{margin-left:59px;}

  .split{
    padding:68px 20px;
    grid-template-columns:1fr;
    gap:38px;
    align-items:start;
  }
  .agents__sub{margin-bottom:24px;}
  .agents__checks{grid-template-columns:1fr;gap:12px;}
  .check__text{font-size:14px;line-height:1.45;}
  .convo,
  .chart-card{padding:18px;border-radius:16px;}
  .convo__handle{font-size:12px;}
  .bubble{font-size:12.5px;line-height:1.45;}
  .bubble--in,
  .bubble--ai{max-width:90%;}
  .lead-card__grid{gap:12px 8px;}
  .lead-field__value,
  .lead-field__value--intent{font-size:12px;}

  .crm__inner{overflow:hidden;}
  .pipeline{
    grid-template-columns:repeat(5,minmax(220px,78vw));
    gap:12px;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x proximity;
    scrollbar-width:thin;
    scrollbar-color:rgba(34,211,238,.35) rgba(255,255,255,.05);
    padding:0 1px 12px;
  }
  .pipeline::-webkit-scrollbar{height:6px;}
  .pipeline::-webkit-scrollbar-track{background:rgba(255,255,255,.05);border-radius:6px;}
  .pipeline::-webkit-scrollbar-thumb{background:rgba(34,211,238,.35);border-radius:6px;}
  .pipeline-col{scroll-snap-align:start;}
  .pipeline-col__cards{min-height:calc(3 * var(--deal-card-h) + 2 * var(--deal-card-gap));}

  .chart-card__head{gap:12px;align-items:flex-start;}
  .chart-card__title{line-height:1.4;}
  .chart-card__delta{white-space:nowrap;}

  .omni__marquee{
    gap:10px;
    margin-inline:-20px;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  }
  .channel-tile{
    min-width:205px;
    margin-right:10px;
    padding:14px 17px;
    gap:11px;
    border-radius:14px;
  }
  .channel-badge{width:40px;height:40px;border-radius:10px;}
  .channel-tile__name{font-size:13.5px;}

  .feature-card{
    display:grid;
    grid-template-columns:42px 1fr;
    column-gap:14px;
    padding:18px;
  }
  .feature-card__icon{
    grid-row:1 / span 2;
    width:42px;
    height:42px;
    margin:0;
  }
  .feature-card__title{margin:0 0 5px;font-size:15px;}
  .feature-card__desc{font-size:13px;}

  .intel__sub{margin-bottom:30px;}
  .intel__pills{gap:9px;margin-bottom:28px;}
  .intel-pill{padding:9px 14px;font-size:13px;}
  .intel__tag{font-size:19px;line-height:1.35;}

  .cta__inner{padding:78px 20px;}
  .cta__sub{margin-bottom:30px;}
  .cta__actions{margin-bottom:20px;}
  .cta__contact{font-size:11px;line-height:1.6;overflow-wrap:anywhere;}

  .footer__top{
    padding:48px 20px 34px;
    grid-template-columns:1fr 1fr;
    gap:34px 22px;
  }
  .footer__top > :first-child{grid-column:1 / -1;}
  .footer__tag{max-width:100%;}
  .footer__top > :last-child{grid-column:1 / -1;}
  .footer__bottom{
    padding:22px 20px 32px;
    align-items:flex-start;
    flex-direction:column;
  }
}

@media (max-width:360px){
  .nav__inner{padding-inline:12px;}
  .nav__logo{width:70px;}
  .nav__right{gap:5px;}
  .lang-pill{min-width:31px;padding-inline:6px;}
  .nav__cta{padding-inline:9px;font-size:11.5px;}
  .hero__inner,
  .loop,
  .marquee,
  .split{padding-left:16px;padding-right:16px;}
}
