/* ───────────────────────── Neurobird AI Agency ─────────────────────────
   Brand: Satoshi · #F5FFAB lime · #FFFFFF · #17172B navy · #3431A5 blue   */

:root {
  --lime:  #F5FFAB;
  --white: #FFFFFF;
  --navy:  #17172B;
  --blue:  #3431A5;
  --ink:   #0e0e1c;
  --muted: rgba(255,255,255,.62);
  --muted-dark: rgba(23,23,43,.66);
  --rule:  rgba(255,255,255,.18);
  --max:   1320px;
  --pad:   clamp(20px, 4vw, 64px);
  font-synthesis: none;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  background: var(--navy);
  color: var(--white);
  line-height: 1.4;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img, canvas { max-width: 100%; display: block; }

/* ── shared bits ── */
.tag {
  display: inline-block;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .14em;
  color: var(--white);
}
.num {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .1em;
  opacity: .8;
}
.num--light { color: var(--white); display: block; margin-bottom: 18px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  transition: transform .15s ease, background .2s ease, color .2s ease;
  white-space: nowrap;
}
.btn--lime {
  background: var(--lime);
  color: var(--navy);
  padding: 17px 32px;
  border-radius: 8px;
  letter-spacing: .06em;
}
.btn--lime:hover { transform: translateY(-2px); background: #eaff8a; }
.btn--sm { padding: 12px 22px; font-size: 12px; }
.btn--outline {
  background: transparent;
  color: var(--white);
  padding: 18px 34px;
  border: 1.5px solid var(--white);
}
.btn--outline:hover { background: var(--white); color: var(--navy); }

/* ──────────── HERO BLOCK: header + hero share one dark particle bg ──────────── */
.hero-block {
  position: relative;
  background: #050510;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: clamp(600px, 100vh, 1000px);
}
.hero-block .hero__particles {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
}
.hero-block .hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(120% 90% at 50% 60%, rgba(52,49,165,.22), transparent 60%),
    linear-gradient(180deg, rgba(5,5,16,.35), rgba(5,5,16,.10) 40%, rgba(5,5,16,.62));
  pointer-events: none;
}

/* ───────────────────────── HEADER (transparent overlay) ───────────────────────── */
.header {
  position: relative; z-index: 5;
  background: transparent;
}
.header__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 26px var(--pad) 20px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.logo { display: flex; align-items: center; color: var(--white); flex: none; }
.logo__mark {
  flex: none; display: block;
  width: 38px; height: 38px;
  /* recolor the black line-art logo to brand lime (#F5FFAB) */
  filter: brightness(0) saturate(100%) invert(96%) sepia(28%) saturate(640%) hue-rotate(8deg) brightness(104%) contrast(101%);
}

.nav {
  display: flex;
  gap: 38px;
  margin-left: clamp(28px, 5vw, 70px);
  font-weight: 500;
  font-size: 16px;
}
.nav a {
  position: relative; color: var(--white); opacity: .9;
  padding-bottom: 4px; transition: opacity .2s;
}
.nav a:hover { opacity: .55; }
/* underline grows in for the section currently in view */
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  height: 2px; width: 100%; background: var(--lime);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s cubic-bezier(.22,.8,.3,1);
}
.nav a.is-current { opacity: 1; }
.nav a.is-current::after { transform: scaleX(1); }
.btn--lime { margin-left: auto; }

.header__rule { height: 2px; background: var(--white); max-width: var(--max); margin: 0 auto; }

.nav__toggle { display: none; background: none; border: 0; flex-direction: column; gap: 5px; cursor: pointer; padding: 6px; }
.nav__toggle span { width: 26px; height: 2px; background: var(--white); display: block; }

/* ───────────────────────── HERO ───────────────────────── */
.hero {
  position: relative; z-index: 2;
  display: flex;
  flex: 1;
}
.hero__inner {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(28px, 4vh, 52px) var(--pad) clamp(40px, 5vh, 64px);
  width: 100%;
  display: flex;
  flex-direction: column;
}
.hero__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.hero__since { text-align: right; color: var(--white); font-weight: 500; font-size: clamp(13px, 1vw, 15px); opacity: .92; }

.hero__title {
  margin: clamp(20px, 4vh, 48px) 0 0;
  font-weight: 900;
  font-size: clamp(40px, 8vw, 120px);
  line-height: .94;
  letter-spacing: -.02em;
  color: var(--lime);
  text-transform: uppercase;
  /* lines are split by <br/>; never let an individual line wrap/break — the
     font-size scales down on small screens instead (see mobile rule). */
  white-space: nowrap;
}

/* ───────── Animated headline word (the MAINTENANCE slot) ─────────
   Soft cross-dissolve word cycler: the current word drifts up + blurs out
   while a skeleton shimmer fades in, then the next word eases up from below
   and unblurs. The slot's width GLIDES between words so nothing snaps.
   Inherits the H1's font/weight/color/size automatically. */
.hero-rotate {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
  min-width: 1ch;
  /* keep the rotating word on ONE line — never let "AI AGENTS" break to two */
  white-space: nowrap;
  /* JS sets an explicit px width per word; this transition makes it glide */
  transition: width .78s cubic-bezier(.16, 1, .3, 1);
  will-change: width;
}
.hero-rotate-word {
  display: inline-block;
  white-space: nowrap;   /* multi-word values ("AI AGENTS") stay unbreakable */
  /* out-expo curve, long durations + small travel = soft dissolve, not a jump */
  transition:
    opacity .62s cubic-bezier(.16, 1, .3, 1),
    transform .78s cubic-bezier(.16, 1, .3, 1),
    filter .62s cubic-bezier(.16, 1, .3, 1);
  will-change: opacity, transform, filter;
}
/* exit: current word lifts up + blurs out */
.hero-rotate.is-loading .hero-rotate-word {
  opacity: 0;
  transform: translateY(-0.16em);
  filter: blur(2.5px);
}
/* enter (one frame): start just below + blurred, then release to baseline */
.hero-rotate.is-entering .hero-rotate-word {
  opacity: 0;
  transform: translateY(0.18em);
  filter: blur(2.5px);
  transition: none;
}
/* skeleton shimmer bar — fades in over the slot during the swap */
.hero-rotate-skel {
  position: absolute;
  left: 0;
  right: 0;
  top: 0.12em;
  bottom: 0.14em;          /* hug the glyph box (asymmetric for the baseline) */
  border-radius: 0.12em;
  pointer-events: none;
  opacity: 0;
  transform: scaleX(.96);
  transform-origin: left center;
  background: linear-gradient(100deg,
    rgba(245, 255, 171, 0.10) 25%,
    rgba(245, 255, 171, 0.34) 50%,
    rgba(245, 255, 171, 0.10) 75%);   /* lime-tinted to match the headline */
  background-size: 220% 100%;
  transition: opacity .34s ease, transform .34s cubic-bezier(.16, 1, .3, 1);
}
.hero-rotate.is-loading .hero-rotate-skel {
  opacity: 1;
  transform: scaleX(1);
  animation: heroRotateShimmer 1.1s linear infinite;
}
@keyframes heroRotateShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -120% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-rotate,
  .hero-rotate-word { transition: none; }
  .hero-rotate-skel { display: none; }
}

/* ───────── Futuristic loading skeletons (real structural placeholders) ─────────
   A JS module wraps each media block: the REAL content is hidden until ready,
   and an OPAQUE wireframe placeholder of the same size/shape is shown in its
   place first — a sidebar+cards dashboard wireframe, an image+caption wireframe,
   or a social-post wireframe. Each placeholder box shimmers with a single-color
   brand sheen (lime on dark, white on light). On reveal the placeholder fades
   out. The host gets `.has-skel`; `.skel-real` wraps the real content. */
.has-skel { position: relative; }

/* real content: the wrapper is layout-TRANSPARENT (display:contents) so the
   host's own grid/flex still sees the original children directly — wrapping
   never collapses dashmock/findash grids. The opaque skeleton on top hides the
   content until reveal; we don't fade the content itself (display:contents
   can't be opacity-faded), the skeleton fade-out IS the reveal. */
.has-skel > .skel-real { display: contents; }

/* the opaque placeholder layer — sits ON TOP and HIDES the content beneath */
.skel {
  position: absolute;
  inset: 0;
  z-index: 8;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  transform: translateZ(0.1px);          /* escape any parent 3D plane */
  background: var(--skel-bg, #0c0c18);   /* OPAQUE — the whole point */
  display: flex;
  gap: 10px;
  padding: 14px;
  opacity: 1;
  transition: opacity .55s ease, transform .55s cubic-bezier(.16,1,.3,1);
}
.has-skel.skel--done > .skel { opacity: 0; transform: translateZ(0.1px) scale(1.012); }

/* every wireframe box: a tonal block with a single-color brand sheen sweep
   (no holographic / chromatic edges — just our palette). */
.skel b {
  display: block;
  border-radius: 7px;
  background: var(--skel-box, rgba(255,255,255,.06));
  position: relative;
  overflow: hidden;
}
.skel b::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    transparent 32%,
    var(--skel-sheen, rgba(245,255,171,.42)) 50%,
    transparent 68%);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: skelSheen 1.25s linear infinite;
  animation-delay: var(--d, 0s);
  will-change: background-position;
}
@keyframes skelSheen {
  0%   { background-position: 170% 0; }
  100% { background-position: -70% 0; }
}

/* layout helpers used by the JS-built wireframes */
.skel .skel-col { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.skel .skel-row { display: flex; gap: 9px; }
.skel .skel-grow { flex: 1; }
.skel .skel-side { width: 26%; max-width: 150px; }
.skel .skel-round { border-radius: 50%; }

/* per-context tints — landing page palette only (lime on dark, white on light) */
.dashmock.has-skel, .findash.has-skel {
  --skel-bg: #0b0b16;            /* matches the navy mockup surface */
  --skel-box: rgba(255,255,255,.055);
  --skel-sheen: rgba(245,255,171,.42);   /* brand lime */
}
.adcard.has-skel {
  --skel-bg: #0e0e1e;
  --skel-box: rgba(255,255,255,.06);
  --skel-sheen: rgba(245,255,171,.42);   /* brand lime */
}
.project__shot.has-skel {
  --skel-bg: #11111f;
  --skel-box: rgba(255,255,255,.07);
  --skel-sheen: rgba(255,255,255,.55);   /* neutral white (shots are over light JPGs) */
}

@media (prefers-reduced-motion: reduce) {
  .has-skel > .skel { display: none; }
  .has-skel > .skel-real { opacity: 1; transform: none; transition: none; }
}

/* sub-copy + button sit bottom-RIGHT, beneath the headline, like the guide */
.hero__bottom {
  display: grid;
  grid-template-columns: 1fr minmax(300px, 480px);
  gap: 24px;
  margin-top: auto;
  padding-top: clamp(30px, 6vh, 72px);
  align-items: end;
}
.hero__cta { text-align: left; }
.hero__sub { color: var(--white); font-size: clamp(18px, 1.5vw, 23px); font-weight: 500; line-height: 1.38; margin-bottom: 26px; }

/* ───────────────────────── /01 DESIGN ───────────────────────── */
.design { background: var(--lime); color: var(--navy); }
.design__head {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(56px, 8vw, 120px) var(--pad) 40px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(30px, 5vw, 90px);
  align-items: stretch;   /* let the right column be full height to pin its summary low */
}
.design__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 36px; align-items: start; }
.design__cols .col h3 { font-weight: 900; font-size: 22px; letter-spacing: -.02em; margin-bottom: 14px; }
.design__cols .col p { color: var(--muted-dark); font-size: 16px; line-height: 1.5; }
/* AI Agents spans the full width on a second row, divided by the signature
   BOLD black rule (matches the reference's thick divider line). */
.col--agents {
  grid-column: 1 / -1;
  border-top: 6px solid var(--navy);   /* thick/bold divider, matching the reference */
  padding-top: clamp(30px, 3vw, 44px);
  margin-top: clamp(24px, 3vw, 40px);
}
.col--agents p { max-width: 620px; }

/* ── B2B Sales Automation block: lives in the right "/01 Services" column ──
   Left-aligned (the column itself is right-aligned), separated by a hairline.
   Vertical pipeline = a connecting rail with lime number badges down the side. */
.sales {
  text-align: left;
  margin-top: 36px; padding-top: 28px;
  border-top: 1px solid rgba(23,23,43,.18);
}
.sales__title { font-weight: 700; font-size: 21px; letter-spacing: -.01em; color: var(--navy); margin-bottom: 12px; }
.sales__copy { color: var(--muted-dark); font-size: 15px; line-height: 1.5; max-width: 460px; }

.pipe { position: relative; list-style: none; margin: 24px 0 0; padding: 0; }
.pipe__step {
  position: relative; display: flex; gap: 14px;
  padding: 0 0 18px 0; padding-left: 2px;
  transition: opacity .3s ease;
}

/* ── flowing lead token: a lime dot travels down the rail, lighting each step ──
   JS sets --y (px) to the active step's badge center; the token glides there. */
.pipe__token {
  position: absolute; left: 16px; top: 0; z-index: 2;
  width: 10px; height: 10px; margin: 7px 0 0 -5px; border-radius: 50%;
  background: var(--lime); box-shadow: 0 0 0 4px rgba(245,255,171,.25);
  transform: translateY(var(--y, 0));
  transition: transform .55s cubic-bezier(.5,0,.2,1);
  opacity: 0;
}
.pipe.is-running .pipe__token { opacity: 1; }
/* the step the token is currently on gets a brighter badge + crisper text */
.pipe__num { transition: background .25s ease, box-shadow .25s ease, transform .25s ease; }
.pipe__step.is-active .pipe__num { box-shadow: 0 0 0 4px rgba(245,255,171,.3); transform: scale(1.06); }
.pipe__step.is-active .pipe__name { color: var(--navy); }
.pipe.is-running .pipe__step:not(.is-active) { opacity: .62; }

/* ── live mock email at the Personalize step ── */
.mailcard {
  margin-top: 12px; max-width: 360px;
  background: var(--navy); border-radius: 8px; overflow: hidden;
  opacity: 0; transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease;
}
.pipe__step.is-active .mailcard { opacity: 1; transform: none; }
.mailcard__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,.12);
}
.mailcard__to { font-size: 11px; color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums; }
.mailcard__tag { font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--navy); background: var(--lime); padding: 3px 7px; border-radius: 5px; }
.mailcard__body { margin: 0; padding: 12px; font-size: 12.5px; line-height: 1.55; color: rgba(255,255,255,.9); min-height: 3.2em; }
.mailcard__caret { display: inline-block; width: 2px; height: 1em; vertical-align: -2px; margin-left: 1px; background: var(--lime); animation: mailcaret 1s step-end infinite; }
@keyframes mailcaret { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .pipe__token { display: none; }
  .pipe.is-running .pipe__step { opacity: 1; }
  .mailcard { opacity: 1; transform: none; }
  .mailcard__caret { animation: none; }
}
/* vertical connecting rail behind the badges */
.pipe__step::before {
  content: ""; position: absolute; left: 14px; top: 26px; bottom: -2px; width: 1.5px;
  background: rgba(23,23,43,.22);
}
.pipe__step:last-child { padding-bottom: 0; }
.pipe__step:last-child::before { display: none; }
.pipe__num {
  position: relative; z-index: 1; flex: none;
  display: inline-grid; place-items: center; width: 30px; height: 24px;
  background: var(--lime); color: var(--navy);
  font-size: 12px; font-weight: 800; letter-spacing: .04em; border-radius: 6px;
}
.pipe__body { padding-top: 1px; }
.pipe__name { display: block; margin-bottom: 4px; font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: var(--navy); }
.pipe__desc { display: block; font-size: 13px; line-height: 1.5; color: var(--muted-dark); max-width: 380px; }
.agent-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.agent-chips span {
  font-size: 12.5px; font-weight: 500; color: var(--navy);
  background: rgba(23,23,43,.07); border: 1px solid rgba(23,23,43,.16);
  border-radius: 20px; padding: 6px 13px;
}

/* GEO/AIO - clean, integrated (plain text on lime) with a subtle live tag + link */
.design__cols .col h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.geo-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--navy);
  background: rgba(23,23,43,.09);
  border-radius: 20px; padding: 3px 9px 3px 8px;
}
.geo-dot { width: 6px; height: 6px; border-radius: 50%; background: #1a8f4a;
  box-shadow: 0 0 0 0 rgba(26,143,74,.6); animation: geoPulse 2s infinite; }
@keyframes geoPulse {
  0% { box-shadow: 0 0 0 0 rgba(26,143,74,.5); }
  70% { box-shadow: 0 0 0 6px rgba(26,143,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(26,143,74,0); }
}
/* inline GEO link, woven into the paragraph — reads as text, links subtly */
.geo-inline {
  color: var(--navy); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1.5px; text-decoration-color: rgba(23,23,43,.4);
  transition: text-decoration-color .2s ease;
}
.geo-inline:hover { text-decoration-color: var(--navy); }
/* Right column (matches the reference): /01 + big "Services" at top, a closing
   summary pinned to the BOTTOM-right. */
.design__big { text-align: right; display: flex; flex-direction: column; height: 100%; }
.design__big .num { color: var(--navy); display: block; margin-bottom: 6px; }
.design__big h2 {
  font-weight: 900;
  font-size: clamp(54px, 9vw, 150px);
  letter-spacing: -.02em;
  line-height: .9;
}
.design__summary {
  margin-top: auto;                 /* push to the bottom of the column */
  max-width: 440px; margin-left: auto;
  font-size: clamp(18px, 1.7vw, 24px); font-weight: 500; line-height: 1.35;
  letter-spacing: -.01em; color: var(--navy);
}

.design__concept {
  max-width: var(--max);
  margin: 24px auto 0;
  padding: clamp(40px, 5vw, 70px) var(--pad) clamp(60px, 8vw, 110px);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
  border-top: 2px solid var(--navy);
}
.concept__media {
  perspective: 2400px;
  perspective-origin: 50% 40%;
  /* let the tilt breathe without overlapping the text column */
}

/* open-source LLM logos: real brand marks on a dark panel, slow marquee.
   Mono off-white at rest, tint to lime on hover. Edge fade-masks + pause-on-hover.
   Replaces the old fake-icon chip grid. */
.lmarquee {
  position: relative; overflow: hidden;
  display: flex; gap: clamp(28px, 3vw, 44px);
  background: var(--navy); border-radius: 14px;
  padding: clamp(22px, 2.4vw, 30px) 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
}
.lmarquee__track {
  flex: none; min-width: 100%;
  display: flex; align-items: center; gap: clamp(28px, 3vw, 44px);
  padding-left: clamp(28px, 3vw, 44px);
  animation: lmarquee 34s linear infinite;
  will-change: transform;
}
.lmarquee:hover .lmarquee__track { animation-play-state: paused; }
@keyframes lmarquee { to { transform: translateX(calc(-100% - clamp(28px, 3vw, 44px))); } }
.lmark {
  display: inline-flex; align-items: center; gap: 11px; white-space: nowrap;
  color: rgba(255,255,255,.92); opacity: .55;
  transition: opacity .2s ease, color .2s ease, transform .2s ease;
}
.lmark__svg { flex: none; }
.lmark__nm { font-weight: 800; font-size: 17px; letter-spacing: -.01em; }
.lmark:hover { opacity: 1; color: var(--lime); transform: translateY(-1px); }
@media (max-width: 980px) { .lmark__nm { font-size: 15px; } }
@media (prefers-reduced-motion: reduce) {
  .lmarquee { -webkit-mask-image: none; mask-image: none; flex-wrap: wrap; gap: 14px; padding: 18px; }
  .lmarquee__track { animation: none; flex-wrap: wrap; min-width: 0; padding-left: 0; gap: 14px 26px; }
  .lmarquee__track[aria-hidden] { display: none; }
}

.concept__intro { color: var(--muted-dark); font-size: 17px; line-height: 1.55; margin: 0 0 clamp(22px, 3vw, 30px); }

/* headline value as a real stat block: big lime number + supporting copy */
.savecard {
  display: flex; align-items: center; gap: 18px;
  background: var(--lime); border-radius: 12px;
  padding: 20px 22px; margin: 0 0 clamp(22px, 3vw, 30px);
}
.savecard__num {
  flex: none; font-weight: 900; font-size: clamp(34px, 4.4vw, 52px);
  letter-spacing: -.03em; line-height: .9; color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.savecard__copy { color: var(--navy); font-size: 15px; line-height: 1.45; }
.savecard__copy b { font-weight: 900; }

/* trust row: badges as a deliberate row, then a calm caption */
.trustrow { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.pbadge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: var(--navy); border-radius: 7px;
  padding: 7px 11px; line-height: 1;
}
.pbadge svg { color: var(--lime); flex: none; }
.concept__caption { color: var(--muted-dark); font-size: 15px; line-height: 1.55; margin: 0; }
/* Tilted dashboard mockup (the "Carry Horizon" admin panel) */
.dashmock {
  --bg: #11111f;
  display: grid;
  grid-template-columns: 132px 1fr;
  width: 100%;
  aspect-ratio: 16/11;
  border-radius: 18px;
  overflow: hidden;
  background: var(--bg);
  color: #fff;
  font-size: 9.5px;
  line-height: 1.3;
  box-shadow:
    0 40px 80px -20px rgba(10,10,25,.55),
    0 10px 30px rgba(10,10,25,.4);
  transform: rotateX(7deg) rotateY(-15deg) scale(.98);
  transform-origin: center center;
  border: 1px solid rgba(255,255,255,.07);
  backface-visibility: hidden;
}
.dashmock__side {
  background: #0e0e20;
  padding: 14px 12px;
  display: flex; flex-direction: column; gap: 14px;
  border-right: 1px solid rgba(255,255,255,.05);
}
.dashmock__brand { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 10px; }
.dashmock__brand .dot { width: 14px; height: 14px; border-radius: 5px; background: linear-gradient(135deg,#5b8cff,#3431A5); flex: none; }
.dashmock__nav { display: flex; flex-direction: column; gap: 9px; color: rgba(255,255,255,.55); }
.dashmock__nav span { white-space: nowrap; }
.dashmock__nav span {
  display: block; padding: 5px 7px; margin: -3px -4px; border-radius: 6px;
  transition: background .35s ease, color .35s ease;
}
.dashmock__nav .is-active { color: #fff; background: #3431A5; }
.dashmock__card { margin-top: auto; height: 56px; border-radius: 8px; background: linear-gradient(135deg,#3a55c8,#7c5cff);
  transition: filter .5s ease; }

.dashmock__main { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.dashmock__search { background: #1e1e3a; border-radius: 7px; padding: 8px 10px; color: rgba(255,255,255,.4);
  display: flex; align-items: center; }
.dashmock__cursor { width: 1px; height: 11px; background: rgba(255,255,255,.65); margin-left: 1px;
  animation: dashblink 1s steps(2) infinite; }
@keyframes dashblink { 0%,50%{opacity:1} 50.01%,100%{opacity:0} }
.dashmock__results { background: linear-gradient(135deg,#1c2b5a,#10204a); border-radius: 10px; padding: 11px 12px; }
.dashmock__results-h { color: rgba(255,255,255,.7); margin-bottom: 9px; transition: opacity .3s ease; }
.dashmock__stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.dashmock__stats > div { display: flex; flex-direction: column; gap: 2px; }
.dashmock__stats small { color: rgba(255,255,255,.5); font-size: 7.5px; transition: opacity .3s ease; }
.dashmock__stats b { font-size: 17px; font-weight: 800; transition: color .25s ease, transform .25s ease; }
.dashmock__stats b.bump { color: #b9a8ff; transform: translateY(-1px); }
.dashmock__stats i { font-style: normal; font-size: 7.5px; }
.dashmock__stats .up { color: #6ee7a8; }
.dashmock__stats .dn { color: #ff8a8a; }

/* swappable panel + tab-switch motion */
.dashmock__panel { position: relative; }
.dashmock__panel.swap { animation: dashSwap .5s cubic-bezier(.22,.8,.3,1); }
@keyframes dashSwap {
  0%   { opacity: 0; transform: translateY(8px); filter: blur(2px); }
  100% { opacity: 1; transform: translateY(0);   filter: blur(0); }
}
.dashmock__panel-h { font-size: 14px; font-weight: 800; margin-top: 4px; margin-bottom: 10px; }
.dashmock__rows { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-top: 2px; }
.dashmock__rows li { display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.08); padding-bottom: 9px; }
.dashmock__rows li.row-in { animation: dashRowIn .45s ease both; }
@keyframes dashRowIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.dashmock__rows span { color: rgba(255,255,255,.5); letter-spacing: .3px; }
.dashmock__rows em { font-style: normal; color: rgba(255,255,255,.9); }

.concept__text h3 { font-weight: 900; font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -.02em; margin-bottom: 14px; }

.concept__text h3 { font-weight: 900; font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -.02em; margin-bottom: 14px; }
.concept__text p { color: var(--muted-dark); font-size: 17px; line-height: 1.5; margin-bottom: 16px; }
.concept__lead { font-weight: 700 !important; color: var(--navy) !important; font-size: 19px !important; }

/* ───────────────────────── /02 DEVELOPMENT ───────────────────────── */
.dev {
  background: var(--navy);
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(60px, 9vw, 130px) var(--pad);
}
.dev__title {
  font-weight: 900;
  font-size: clamp(46px, 8vw, 132px);
  letter-spacing: -.02em;
  line-height: .92;
  margin-bottom: 26px;
}
.dev__copy { max-width: 640px; color: var(--muted); font-size: clamp(17px, 1.6vw, 21px); line-height: 1.5; }

.dev__servicebar {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 34px;
}
.dev__servicebar span {
  border: 1px solid var(--rule);
  border-radius: 30px;
  padding: 10px 20px;
  font-size: 14px; font-weight: 500;
  color: var(--white);
}
.dev__rule { height: 2px; background: var(--white); margin: clamp(40px,6vw,80px) 0 30px; }

/* ── Selected work / projects showcase ── */
.projects__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; }
.projects__label { font-weight: 700; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.projects__hint { color: var(--muted); font-size: 14px; }

/* Portfolio bento: ~70% projects (2x2) + ~30% founder card */
.pfbento { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(260px, 1fr); gap: clamp(16px, 1.8vw, 26px); align-items: stretch; }
.projects { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 1.6vw, 24px); align-content: start; }

/* founder card */
.founder {
  display: flex; flex-direction: column;
  background: var(--navy);
  border: 1px solid rgba(255,255,255,.08); border-radius: 14px; overflow: hidden;
}
.founder__photo { position: relative; aspect-ratio: 1/1; overflow: hidden; }
/* monochrome on-brand portrait; eases to color on hover */
.founder__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block;
  filter: grayscale(1) contrast(1.04) brightness(.98);
  transition: filter .3s ease;
}
.founder:hover .founder__photo img { filter: grayscale(.15) contrast(1.02); }
.founder__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(17,17,31,.55)); }
.founder__body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.founder__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--lime); }
.founder__name { font-size: 24px; font-weight: 900; letter-spacing: -.02em; }
.founder__role { color: var(--muted); font-size: 14px; line-height: 1.5; margin-bottom: 4px; }
.founder__link {
  margin-top: auto; display: inline-flex; align-items: center; gap: 9px; align-self: flex-start;
  font-weight: 800; font-size: 13px; color: var(--navy); background: var(--lime);
  border-radius: 8px; padding: 10px 15px; transition: background .2s ease, transform .15s ease;
}
.founder__link:hover { background: #eaff8a; transform: translateY(-1px); }
.founder__link svg { flex: none; }
@media (max-width: 860px) {
  .pfbento { grid-template-columns: 1fr; }
  .founder { flex-direction: row; align-items: stretch; }
  .founder__photo { width: 40%; aspect-ratio: auto; }
}
@media (max-width: 560px) {
  .projects { grid-template-columns: 1fr; }
  .founder { flex-direction: column; }
  .founder__photo { width: 100%; aspect-ratio: 1/1; }
}
.project {
  display: block; text-decoration: none; color: #fff;
  background: var(--navy);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 20px 50px -28px rgba(0,0,0,.7);
  opacity: 0; transform: translateY(24px);
  transition: transform .6s cubic-bezier(.22,.8,.3,1), opacity .6s ease, box-shadow .35s ease, border-color .35s ease;
}
.projects.in .project { opacity: 1; transform: none; }
.projects.in .project:nth-child(2) { transition-delay: .08s; }
.projects.in .project:nth-child(3) { transition-delay: .16s; }
.projects.in .project:nth-child(4) { transition-delay: .24s; }
.project:hover { transform: translateY(-6px); border-color: rgba(245,255,171,.55); box-shadow: 0 32px 70px -30px rgba(0,0,0,.8); }

.project__shot { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.project__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block;
  filter: grayscale(1) contrast(1.03) brightness(.97);   /* monochrome at rest */
  transition: transform .6s cubic-bezier(.22,.8,.3,1), filter .35s ease; }
.project:hover .project__shot img { transform: scale(1.04); filter: grayscale(0) contrast(1) brightness(1); }
@media (prefers-reduced-motion: reduce) { .project__shot img { transition: filter .35s ease; } }
/* flat navy fade that settles the shot into our style (no blue tint) */
.project__shot::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(23,23,43,0) 45%, var(--navy) 100%);
  transition: opacity .4s ease;
}
.project:hover .project__shot::after { opacity: .6; }

.project__meta { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 16px 18px; }
.project__meta b { font-size: 17px; font-weight: 700; }
.project__meta small { display: block; color: var(--muted); font-size: 13px; margin-top: 3px; }
.project__go { color: var(--lime); font-weight: 700; font-size: 13px; white-space: nowrap;
  transition: opacity .2s ease; }
.project:hover .project__go { opacity: .75; }

/* ───────────────────────── /03 MARKETING ───────────────────────── */
.mkt {
  background: var(--lime);
  color: var(--navy);
  overflow: hidden;
}
.mkt__inner { max-width: var(--max); margin: 0 auto; padding: clamp(60px, 9vw, 130px) var(--pad); }
.mkt .num--light { color: var(--navy); opacity: .7; }
.mkt__head {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 60px);
  align-items: end; margin-bottom: 30px;
}
.mkt__title {
  font-weight: 900; font-size: clamp(46px, 8vw, 132px); letter-spacing: -.02em;
  line-height: .92; color: var(--navy); margin-top: 8px;
}
.mkt__copy { color: var(--muted-dark); font-size: clamp(17px, 1.6vw, 21px); line-height: 1.5; }

.mkt__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(40px, 6vw, 72px); }
.mkt__tags span {
  border: 1px solid rgba(23,23,43,.25); border-radius: 30px; padding: 9px 18px;
  font-size: 14px; font-weight: 500; color: var(--navy);
}

/* ── the 3D ad stage ── */
.adstage {
  display: grid;
  grid-template-columns: 1.15fr .8fr 1.15fr;
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
  perspective: 2200px;
  perspective-origin: 50% 40%;
}
.adcard {
  position: relative;
  background: #0e0e1e;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
  color: #fff;
  font-size: 12px;
  box-shadow: 0 34px 70px -26px rgba(23,23,43,.5), 0 0 0 1px rgba(255,255,255,.05);
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.22,.8,.3,1);
  will-change: transform;
}
.adcard:hover { transform: translateY(-6px) rotateX(0) rotateY(0) !important; }
.adcard--fb { transform: rotateY(15deg) rotateX(5deg); }
.adcard--ig { transform: rotateX(7deg) scale(1.04); z-index: 3; }
.adcard--g  { transform: rotateY(-15deg) rotateX(5deg); }

.adcard__bar {
  display: flex; align-items: center; gap: 8px; font-weight: 700;
  padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.85);
}
.adcard__logo { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; flex: none; overflow: hidden; }
.adcard__logo svg { width: 100%; height: 100%; display: block; }
.adcard__logo.fb { background: #1877f2; }
.adcard__logo.fb svg { width: 22px; height: 22px; }
.adcard__logo.ig { background: linear-gradient(45deg,#feda75,#d62976,#962fbf,#4f5bd5); border-radius: 7px; padding: 4px; }
.adcard__logo.g  { background: #fff; padding: 3px; }

/* Facebook */
.adcard__post { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.adcard__poster { display: flex; align-items: center; gap: 9px; }
.adcard__pic { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg,#f5ffab,#9bd400); flex: none;
  display: grid; place-items: center; font-weight: 900; font-size: 14px; color: #11111e; }
.adcard__poster b { font-size: 12.5px; } .adcard__poster small { color: rgba(255,255,255,.45); font-size: 10px; display: block; }
.adcard__txt { color: rgba(255,255,255,.85); line-height: 1.4; }
.adcard__creative {
  aspect-ratio: 16/10; border-radius: 10px; position: relative; overflow: hidden;
  display: grid; place-items: center;
  /* studio product backdrop */
  background:
    radial-gradient(70% 90% at 50% 38%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(120% 100% at 18% 0%, #3431a5, transparent 60%),
    linear-gradient(160deg, #1c1b3c 0%, #11111e 100%);
}
/* soft floor shadow under product */
.adcard__creative::before {
  content: ""; position: absolute; bottom: 16%; left: 50%; transform: translateX(-50%);
  width: 46%; height: 14px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.55), transparent);
  filter: blur(3px);
}
.ad-brand {
  position: absolute; top: 12px; left: 14px;
  font-weight: 900; font-size: 13px; letter-spacing: .14em; color: #fff; opacity: .9;
}
.prod { position: relative; z-index: 2; display: grid; place-items: center; }
.prod--fb .racket-svg { height: 150px; filter: drop-shadow(0 14px 20px rgba(0,0,0,.45)); transform: rotate(18deg); }
.racket-svg { display: block; height: 150px; width: auto; }
/* branded glass racket photo (replaces the inline SVG in the FB + IG creatives) */
.racket-img { display: block; width: auto; }
/* Source image is a SQUARE (1145x1145) studio shot: the whole racket, centered,
   with padding all around. object-fit:contain scales it to fit ENTIRELY inside
   the creative — head + handle + NEUROBIRD branding all visible, never clipped.
   It sits on the studio-gradient backdrop already painted behind it. A slight
   inset + rotation keeps it product-shot lively without pushing it past edges. */
.prod--fb { position: absolute; inset: 0; overflow: hidden; }
.prod--fb .racket-img {
  width: 100%; height: 100%; max-width: none;
  /* Fit the racket to the creative box — cover fills it edge to edge (no empty
     gaps), its dark studio bg blends into the creative backdrop. No extra zoom. */
  object-fit: cover;
  object-position: 50% 50%;
  filter: drop-shadow(0 18px 26px rgba(0,0,0,.5));
}
.adcard__cta {
  position: absolute; bottom: 12px; left: 12px; z-index: 3;
  background: var(--lime); color: #11111e; border-radius: 8px; padding: 7px 14px;
  font-weight: 800; font-size: 11px;
}
.adcard__react { display: flex; gap: 14px; color: rgba(255,255,255,.45); font-size: 11px; padding-top: 4px; border-top: 1px solid rgba(255,255,255,.07); }

/* Instagram (story) */
.adcard--ig { aspect-ratio: 9/16; max-height: 460px; overflow: hidden; display: flex; flex-direction: column;
  background: #000; }
.ig__bars { display: flex; gap: 4px; padding: 10px 12px 0; }
.ig__bars i { flex: 1; height: 2.5px; border-radius: 2px; background: rgba(255,255,255,.3); }
.ig__bars i.on { background: #fff; }
.adcard__bar.ig { border-bottom: 0; font-size: 11px; padding: 10px 12px; }
.ig__creative { flex: 1; position: relative; overflow: hidden; display: grid; place-items: center;
  background:
    radial-gradient(70% 50% at 50% 32%, rgba(245,255,171,.22), transparent 60%),
    radial-gradient(90% 70% at 70% 15%, #6f5cff, transparent 60%),
    linear-gradient(160deg, #2a2860, #3431a5 50%, #11111e); }
.prod--ig {
  position: absolute; inset: 0;   /* racket fills the WHOLE creative now */
  z-index: 2; overflow: hidden;
}
.prod--ig .racket-svg { height: 230px; filter: drop-shadow(0 18px 26px rgba(0,0,0,.5)); transform: rotate(-12deg); }
/* Fit the racket to the tall story box — cover fills it edge to edge (no empty
   gaps). Its dark bg blends into the story backdrop. No extra zoom. */
.prod--ig .racket-img {
  width: 100%; height: 100%; max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
  filter: drop-shadow(0 24px 36px rgba(0,0,0,.55));
}
/* small aesthetic pill label at the TOP of the story — lets the racket own the
   whole frame (zoomed in, NEUROBIRD branding fully visible). */
.ig__label {
  position: absolute; top: 14px; left: 14px; z-index: 3;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #fff;
  background: rgba(17,17,30,.34);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.18); border-radius: 999px;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
.ig__label::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--lime); box-shadow: 0 0 8px var(--lime);
}
.ig__headline span { font-weight: 900; font-size: 26px; letter-spacing: -.02em; }
.ig__cta { margin: 14px; background: rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.3); border-radius: 24px; text-align: center; padding: 10px;
  font-weight: 700; }

/* Google Search */
.adcard--g { background: #fff; color: #202124; }
.adcard__bar.g { background: #fff; border-bottom: 1px solid #eee; color: #5f6368; }
.g__search { margin: 14px; padding: 11px 14px; border: 1px solid #dfe1e5; border-radius: 22px; color: #202124;
  display: flex; align-items: center; }
.g__cursor { width: 1px; height: 13px; background: #202124; margin-left: 2px; animation: dashblink 1s steps(2) infinite; }
.g__result { margin: 0 14px 16px; padding: 12px 14px; border-radius: 12px; background: #f8f9fa; }
.g__ad { font-weight: 700; color: #202124; font-size: 11px; margin-right: 8px; }
.g__url { color: #202124; font-size: 12px; }
.g__title { display: block; color: #1a0dab; font-size: 16px; font-weight: 600; margin: 5px 0 4px; }
.g__desc { color: #4d5156; font-size: 12px; line-height: 1.45; }

/* ── LEGO-BLOCK ASSEMBLY: client creative snaps into the placement ── */
.lego { transform-origin: center; }
.adstage.play .lego {
  animation: legoSnap .9s cubic-bezier(.34,1.56,.64,1) both;
}
.adstage.play .lego[data-lego="1"] { animation-delay: .15s; }
.adstage.play .lego[data-lego="2"] { animation-delay: .45s; }
.adstage.play .lego[data-lego="3"] { animation-delay: .7s; }
.adstage.play .lego[data-lego="4"] { animation-delay: .9s; }
@keyframes legoSnap {
  0%   { opacity: 0; transform: translateY(-46px) scale(.86) rotateX(35deg); }
  60%  { opacity: 1; transform: translateY(4px) scale(1.02) rotateX(-4deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotateX(0); }
}
/* little "snap" flash on landing */
.adstage.play .lego::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 0 2px var(--lime); opacity: 0;
  animation: legoFlash .5s ease 1; animation-delay: inherit;
}
@keyframes legoFlash { 0%{opacity:0} 40%{opacity:.9} 100%{opacity:0} }

/* (mobile rules for marketing/ads consolidated in the RESPONSIVE block below) */

/* ───────────────────────── /04 MAINTENANCE ───────────────────────── */
.maint {
  background:
    radial-gradient(120% 120% at 50% 0%, #6f6ee0 0%, #3431A5 38%, #1d1b66 72%, var(--navy) 100%);
}
.maint__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(60px, 9vw, 130px) var(--pad) 0;
  text-align: center;
}
.maint .num--light { opacity: .85; }
.maint__title {
  font-weight: 900;
  font-size: clamp(52px, 9vw, 150px);
  letter-spacing: -.02em;
  line-height: .9;
  color: var(--lime);
  margin-bottom: 28px;
}
.maint__copy { max-width: 720px; margin: 0 auto; color: var(--white); font-size: clamp(18px, 1.8vw, 24px); font-weight: 500; line-height: 1.45; }
.maint__media {
  padding-top: clamp(40px, 6vw, 80px);
  position: relative;
}
/* soft glow under the device for depth */
.maint__media::before {
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(1000px, 92%); height: 70%;
  background: radial-gradient(60% 80% at 50% 100%, rgba(124,92,255,.45), transparent 70%);
  filter: blur(30px); pointer-events: none;
}

/* Finance dashboard mockup (Balance / My activity / Fast transfer) - premium */
.findash {
  position: relative; z-index: 1;
  max-width: 1000px; margin: 0 auto;
  background:
    radial-gradient(120% 140% at 0% 0%, #1a1832 0%, #0d0d1c 55%);
  border-radius: 22px 22px 0 0;
  box-shadow:
    0 -2px 0 rgba(255,255,255,.06) inset,
    0 30px 90px -20px rgba(0,0,0,.7),
    0 0 0 1px rgba(255,255,255,.06);
  display: grid;
  grid-template-columns: 64px 1fr;
  overflow: hidden;
  text-align: left;
  color: #fff;
  font-size: 12px;
  border-bottom: none;
}
.findash__rail {
  background: linear-gradient(180deg, #0a0a1c, #07071a);
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  padding: 22px 0; color: rgba(255,255,255,.35); font-size: 14px;
  border-right: 1px solid rgba(255,255,255,.05);
}
.findash__ava { width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg,#ffb59a,#a18cd1);
  box-shadow: 0 0 0 2px rgba(255,255,255,.12); }
.findash__body { padding: 24px 26px 30px; }
.findash__top { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.findash__top b { font-size: 16px; letter-spacing: -.01em; }
.findash__search { margin-left: auto; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
  border-radius: 22px; padding: 8px 18px; color: rgba(255,255,255,.4); }
.findash__bell { color: rgba(255,255,255,.5); width: 30px; height: 30px; display: grid; place-items: center;
  background: rgba(255,255,255,.05); border-radius: 50%; }

.findash__grid { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 18px; }
.findash__col {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px; padding: 16px 16px 18px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset;
  position: relative; overflow: hidden;
}
/* staggered entry */
.fd-col { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,.8,.3,1); }
.findash.play .fd-col { opacity: 1; transform: none; }
.findash.play .fd-col:nth-child(2) { transition-delay: .12s; }
.findash.play .fd-col:nth-child(3) { transition-delay: .24s; }

.findash__head { display: flex; justify-content: space-between; align-items: center; color: rgba(255,255,255,.65); font-size: 11px; }
.findash__head .plus { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.08);
  display: grid; place-items: center; font-size: 13px; }
.findash__head .yr { background: rgba(255,255,255,.08); border-radius: 7px; padding: 3px 9px; font-size: 9px; }
.findash__bal { font-size: 26px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.findash__card {
  border-radius: 14px; padding: 15px; margin-top: 4px;
  background: linear-gradient(125deg,#3a2b6b 0%,#6f5cff 55%,#a98bff 100%);
  display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden;
  box-shadow: 0 10px 24px -8px rgba(111,92,255,.55);
}
.findash__card::after { content: ""; position: absolute; right: -20px; top: -30px; width: 90px; height: 90px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.28), transparent 70%); }
.findash__card small { opacity: .9; font-size: 10px; }
.findash__cnum { letter-spacing: 2px; opacity: .85; font-size: 10px; }
.findash__card b { font-size: 19px; }

.findash__legend { display: flex; align-items: center; gap: 7px; color: rgba(255,255,255,.55); font-size: 9.5px; }
.findash__legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.findash__legend .inc { background: #8a6dff; } .findash__legend .exp { background: #c9b8ff; }

.findash__chartwrap { position: relative; }
.findash__tooltip {
  position: absolute; top: -6px; left: 58%; transform: translateX(-50%) translateY(-6px) scale(.92);
  z-index: 4; background: #fff; color: #17172b; border-radius: 10px;
  padding: 8px 11px; font-size: 9px; line-height: 1.45; font-weight: 600; white-space: nowrap;
  box-shadow: 0 12px 28px rgba(0,0,0,.4);
  opacity: 0; transition: opacity .5s ease .9s, transform .5s cubic-bezier(.34,1.56,.64,1) .9s;
}
.findash.play .findash__tooltip { opacity: 1; transform: translateX(-50%) translateY(-6px) scale(1); }
.findash__tooltip::after { content: ""; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%) rotate(45deg);
  width: 9px; height: 9px; background: #fff; border-radius: 2px; }
.findash__chart { display: flex; align-items: flex-end; gap: 5px; height: 100px; }
.findash__chart span { flex: 1; height: var(--h); border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg,#b9a3ff 0%,#7c5cff 55%,#4c3bd6 100%);
  box-shadow: 0 2px 8px -2px rgba(111,92,255,.5);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .7s cubic-bezier(.22,.8,.3,1);
}
.findash__chart span.peak { background: linear-gradient(180deg,#f5ffab 0%,#a98bff 70%,#6f5cff 100%); }
.findash.play .findash__chart span { transform: scaleY(1); }
.findash.play .findash__chart span:nth-child(1){transition-delay:.30s}
.findash.play .findash__chart span:nth-child(2){transition-delay:.35s}
.findash.play .findash__chart span:nth-child(3){transition-delay:.40s}
.findash.play .findash__chart span:nth-child(4){transition-delay:.45s}
.findash.play .findash__chart span:nth-child(5){transition-delay:.50s}
.findash.play .findash__chart span:nth-child(6){transition-delay:.55s}
.findash.play .findash__chart span:nth-child(7){transition-delay:.60s}
.findash.play .findash__chart span:nth-child(8){transition-delay:.65s}
.findash.play .findash__chart span:nth-child(9){transition-delay:.70s}
.findash.play .findash__chart span:nth-child(10){transition-delay:.75s}
.findash.play .findash__chart span:nth-child(11){transition-delay:.80s}
.findash.play .findash__chart span:nth-child(12){transition-delay:.85s}

.findash__avas { display: flex; margin-bottom: 2px; }
.findash__avas span { width: 24px; height: 24px; border-radius: 50%; margin-left: -7px; border: 2px solid #131228;
  background: linear-gradient(135deg,#ffd1a1,#ff8fb1); }
.findash__avas span:nth-child(2){ background:linear-gradient(135deg,#a1c4ff,#7c8bff);}
.findash__avas span:nth-child(3){ background:linear-gradient(135deg,#b9ffd1,#7ce0a8);}
.findash__avas span:nth-child(4){ background:linear-gradient(135deg,#ffc1f0,#c98bff);}
.findash__avas span:nth-child(5){ background:linear-gradient(135deg,#fff0a1,#ffcf6e);}
.findash__avas span:first-child { margin-left: 0; }
.findash__field { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07);
  border-radius: 11px; padding: 9px 12px; font-size: 11px; }
.findash__field small { display: block; color: rgba(255,255,255,.4); font-size: 9px; margin-bottom: 3px; }
.findash__btn { background: linear-gradient(90deg,#a98bff,#6f5cff); border-radius: 24px; text-align: center;
  padding: 11px; font-weight: 700; margin-top: 4px; box-shadow: 0 10px 24px -8px rgba(111,92,255,.6); }
/* (findash mobile rules consolidated in the RESPONSIVE block) */

/* ───────────────────────── FOOTER ───────────────────────── */
.footer {
  background: var(--navy);
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(56px, 8vw, 110px) var(--pad) 40px;
}
.footer__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: end;
  margin-top: 30px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--rule);
}
.footer__title {
  font-weight: 900;
  font-size: clamp(52px, 9vw, 120px);
  letter-spacing: -.02em;
  line-height: .9;
}
.footer__cols { display: flex; gap: 40px; flex-wrap: wrap; justify-content: flex-end; }
.fcol { display: flex; flex-direction: column; gap: 8px; }
.fcol__label { font-size: 12px; letter-spacing: .12em; color: var(--muted); }
.fcol a { font-weight: 500; font-size: 17px; }
.fcol a:hover { color: var(--lime); }

/* monochrome WhatsApp contact button (footer) */
.wabtn {
  display: inline-flex; align-items: center; gap: 9px; align-self: flex-start;
  font-weight: 700 !important; font-size: 15px !important; line-height: 1;
  color: #fff; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16); border-radius: 9px;
  padding: 11px 15px; cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .15s ease;
}
.wabtn__icon { color: var(--lime); flex: none; transition: color .18s ease; }
.wabtn:hover {
  background: var(--lime); border-color: var(--lime); color: var(--navy) !important;
  transform: translateY(-1px);
}
.wabtn:hover .wabtn__icon { color: var(--navy); }
.wabtn__txt { font-variant-numeric: tabular-nums; }

.footer__base {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 28px; color: var(--muted); font-size: 14px; flex-wrap: wrap; gap: 16px;
}

/* ───────────────────────── RESPONSIVE ───────────────────────── */

/* Global safety: never allow horizontal scroll; wrap long words/URLs */
html, body { max-width: 100%; overflow-x: hidden; }
p, h1, h2, h3, a, span, b, small, em { overflow-wrap: break-word; word-wrap: break-word; }

/* Fallback for browsers without aspect-ratio (older Safari/Edge): keep boxes from collapsing */
@supports not (aspect-ratio: 1 / 1) {
  .concept__mock, .adcard__creative, .project__shot { min-height: 180px; }
  .dashmock { min-height: 280px; }
  .adcard--ig { min-height: 460px; }
}
/* object-fit fallback: if unsupported, center the image */
@supports not (object-fit: cover) {
  .project__shot img { width: auto; max-width: 100%; margin: 0 auto; }
}

/* ── Tablet / large phone (<= 980px) ── */
@media (max-width: 980px) {
  .adstage { grid-template-columns: 1fr; gap: 30px; max-width: 420px; margin: 0 auto; }
  .adcard, .adcard--fb, .adcard--ig, .adcard--g { transform: none !important; }
  .adcard--ig { max-height: 520px; margin: 0 auto; width: 100%; }
  .findash__grid { grid-template-columns: 1fr; gap: 14px; }
  .findash__tooltip { position: static; transform: none; opacity: 1; margin-bottom: 8px; white-space: normal; }
  .findash__tooltip::after { display: none; }
  .mkt__head { grid-template-columns: 1fr; }
}

/* ── Phones / small tablets (<= 820px) ── */
@media (max-width: 820px) {
  .nav { display: none; }
  .btn--lime { margin-left: auto; }
  .nav__toggle { display: flex; }
  .header__inner { gap: 14px; }

  .hero-block { min-height: auto; }
  .hero__inner { padding-bottom: 48px; }
  .hero__bottom { grid-template-columns: 1fr; gap: 0; }
  .hero__top { flex-direction: column; gap: 14px; }
  .hero__since { text-align: left; }

  .design__head { grid-template-columns: 1fr; }
  .design__big { text-align: left; }
  .design__big h2 { font-size: clamp(56px, 16vw, 110px); }
  .design__cols { grid-template-columns: 1fr; gap: 28px; }
  .design__concept { grid-template-columns: 1fr; }

  /* the tilted product mocks: flatten + fully contain on mobile */
  .design__concept, .design__concept > * { min-width: 0; }
  .concept__media { perspective: none; overflow: hidden; min-width: 0; max-width: 100%; }
  .dashmock { transform: none; width: 100%; max-width: 100%; min-width: 0; font-size: 9px; grid-template-columns: 88px 1fr; }
  .dashmock__main { overflow: hidden; min-width: 0; padding: 11px; gap: 9px; }
  .dashmock__side { padding: 11px 7px; gap: 11px; }
  .dashmock__search { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  .dashmock__results, .dashmock__panel { min-width: 0; overflow: hidden; }
  .dashmock__results { padding: 9px; }
  /* show 2 stats on mobile so they fit comfortably */
  .dashmock__stats { grid-template-columns: 1fr 1fr; gap: 6px; }
  .dashmock__stats > div { min-width: 0; }
  .dashmock__stats > div:nth-child(3) { display: none; }
  .dashmock__stats b { font-size: 14px; }
  .dashmock__stats small, .dashmock__stats i { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dashmock__rows li { font-size: 9px; gap: 8px; }
  .dashmock__rows span, .dashmock__rows em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .projects { grid-template-columns: 1fr 1fr; }

  .footer__row { grid-template-columns: 1fr; align-items: start; }
  .footer__cols { justify-content: flex-start; }
}

/* ── Small phones (<= 480px) ── */
@media (max-width: 480px) {
  :root { --pad: 18px; }
  .projects { grid-template-columns: 1fr; }
  /* Mobile: each line ("DEVELOPMENT." / "AI ANALYTICS" = 12 chars, the longest)
     must fit the screen width on ONE line. ~8.4vw keeps 12 bold chars inside a
     phone's content width; nowrap (below) guarantees no breaking. */
  .hero__title { font-size: clamp(30px, 8.4vw, 60px); line-height: 1.02; }
  .dev__title, .mkt__title, .maint__title { font-size: clamp(40px, 14vw, 72px); }
  .footer__title { font-size: clamp(44px, 15vw, 80px); }
  .design__big h2 { font-size: clamp(48px, 17vw, 84px); }
  .mkt__tags span, .dev__servicebar span { font-size: 12px; padding: 7px 13px; }
  .findash { grid-template-columns: 44px 1fr; }
  .findash__body { padding: 16px 14px 20px; }
  .geo-tag { font-size: 9.5px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ───────────────────────── Support chatbot widget ─────────────────────────
   Square, minimal, transparent launcher (echoes the ESTIMATE PROJECT button)
   that opens a glassmorphism chat window, bottom-right. */
.chat {
  position: fixed;
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 32px);
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}

/* launcher — flat solid navy square with a lime icon (on-brand, sharp). */
.chat__toggle {
  width: 58px; height: 58px;
  display: grid; place-items: center;
  background: var(--navy);
  border: 0;
  border-radius: 10px;
  color: var(--lime);
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(23,23,43,.35);
  transition: transform .2s cubic-bezier(.16,1,.3,1), background .25s ease, color .25s ease;
}
.chat__toggle:hover { transform: translateY(-3px); }
.chat__toggle .chat__icon-close { display: none; }
.chat.is-open .chat__toggle .chat__icon-open { display: none; }
.chat.is-open .chat__toggle .chat__icon-close { display: block; }
.chat.is-open .chat__toggle { background: var(--lime); color: var(--navy); }

/* ADAPTIVE: over a LIGHT (lime) section a navy square reads fine, but flip the
   icon accent + add a hairline so it stays crisp on lime. JS toggles .on-light. */
.chat.on-light .chat__toggle { box-shadow: 0 12px 30px rgba(23,23,43,.28); }
.chat.on-light.is-open .chat__toggle { background: var(--navy); color: var(--lime); }

/* chat window — FLAT brand style: solid navy, sharp geometry, hairline rules,
   lime accents. No backdrop-filter glass (it muddied to olive over the lime
   section). Matches DESIGN.md. */
.chat__window {
  width: min(380px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 130px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  background: var(--navy);                 /* SOLID — opaque, no glass */
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  color: #fff;
  transform-origin: bottom right;
  animation: chatIn .3s cubic-bezier(.16,1,.3,1);
}
.chat__window[hidden] { display: none; }
@keyframes chatIn {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.chat__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 15px 16px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.chat__id { display: flex; align-items: center; gap: 11px; }
.chat__avatar {
  width: 38px; height: 38px; border-radius: 8px; flex: none;
  display: grid; place-items: center;
  background: var(--lime);                 /* solid lime block, like brand */
}
.chat__avatar img { width: 22px; height: 22px; }
.chat__id b { font-size: 13.5px; display: block; font-weight: 700; letter-spacing: -.01em; }
.chat__id small { font-size: 10px; color: var(--muted); display: flex; align-items: center; gap: 6px; letter-spacing: .04em; text-transform: uppercase; }
.chat__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); }
.chat__close {
  background: transparent; border: 0; color: var(--muted); cursor: pointer;
  width: 30px; height: 30px; border-radius: 6px; display: grid; place-items: center;
  transition: background .2s ease, color .2s ease;
}
.chat__close:hover { background: rgba(255,255,255,.1); color: #fff; }

.chat__log {
  flex: 1; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent;
}
.chat__log::-webkit-scrollbar { width: 6px; }
.chat__log::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 6px; }

.chat__msg {
  max-width: 86%; padding: 11px 14px; border-radius: 12px;
  font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word;
  animation: msgIn .26s cubic-bezier(.16,1,.3,1);
}
@keyframes msgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.chat__msg--bot {
  align-self: flex-start;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  border-bottom-left-radius: 3px;
}
.chat__msg--user {
  align-self: flex-end; color: var(--navy);
  background: var(--lime); border-bottom-right-radius: 3px; font-weight: 600;
}
.chat__msg--typing { display: inline-flex; gap: 4px; }
.chat__msg--typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); animation: typing 1.1s infinite; }
.chat__msg--typing i:nth-child(2) { animation-delay: .18s; }
.chat__msg--typing i:nth-child(3) { animation-delay: .36s; }
@keyframes typing { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.chat__form {
  display: flex; gap: 8px; padding: 12px;
  border-top: 1px solid rgba(255,255,255,.14);
}
.chat__input {
  flex: 1; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16); border-radius: 8px;
  padding: 12px 14px; color: #fff; font: inherit; font-size: 13.5px;
  outline: none; transition: border-color .2s ease, background .2s ease;
}
.chat__input::placeholder { color: rgba(255,255,255,.42); }
.chat__input:focus { border-color: var(--lime); background: rgba(255,255,255,.1); }
.chat__send {
  flex: none; width: 46px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--lime); color: var(--navy); display: grid; place-items: center;
  transition: background .2s ease, transform .15s ease, opacity .2s ease;
}
.chat__send:hover { background: #eaff8a; transform: translateY(-1px); }
.chat__send:disabled { opacity: .45; cursor: default; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .chat__window, .chat__msg { animation: none; }
}

/* ═════════════════ AI Agents · voice console ═════════════════
   Matches the Neurobird brand guide: FLAT, sharp, high-contrast, editorial.
   Solid #17172B navy surface, hairline rules (no glows/gradients/violet), lime
   used as confident flat blocks. Sits in the lime .design section. */
.vplayer {
  margin-top: 26px;
  background: var(--navy);
  border-radius: 10px;        /* subtle, like the brand's rounded rectangles */
  color: #fff;
  overflow: hidden;
}
.vplayer__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 14px 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.vplayer__eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--lime);
}
.vplayer__live { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); }
.vplayer.is-playing .vplayer__live { animation: vlive 1.4s infinite; }
@keyframes vlive { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.vplayer__hint { font-size: 10.5px; color: rgba(255,255,255,.45); letter-spacing: .02em; text-transform: uppercase; }

/* voice selector — flat square tabs, active = solid lime block */
.vplayer__voices { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.vvoice {
  flex: 1 1 0; min-width: 0; position: relative; cursor: pointer;
  font: inherit; line-height: 1.1;
  padding: 14px 12px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  color: rgba(255,255,255,.62);
  background: transparent; border: 0;
  border-right: 1px solid rgba(255,255,255,.12);
  transition: background .18s ease, color .18s ease;
}
.vvoice:last-child { border-right: 0; }
.vvoice__nm { font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; }
.vvoice__sub { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
.vvoice:hover { background: rgba(255,255,255,.06); color: #fff; }
.vvoice.is-active { background: var(--lime); color: var(--navy); }
.vvoice.is-active .vvoice__sub { opacity: .7; }

/* transport deck — flat, square play button, hairline progress */
.vplayer__deck { display: flex; align-items: center; gap: 16px; padding: 18px 20px; }
.vplay {
  position: relative; flex: none; width: 48px; height: 48px; border-radius: 8px; cursor: pointer; border: 0;
  display: grid; place-items: center;
  background: var(--lime); color: var(--navy);
  transition: transform .15s ease, background .2s ease;
}
.vplay:hover { transform: translateY(-1px); background: #eaff8a; }
.vplay:active { transform: translateY(0); }
.vplay .vplay__pause { display: none; }
.vplayer.is-playing .vplay .vplay__play { display: none; }
.vplayer.is-playing .vplay .vplay__pause { display: block; }
.vplay.is-loading { pointer-events: none; }
.vplay.is-loading svg { opacity: 0; }
.vplay.is-loading::after {
  content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(23,23,43,.25); border-top-color: var(--navy); animation: vspin .7s linear infinite;
}
@keyframes vspin { to { transform: rotate(360deg); } }

.vplayer__meta { flex: 1; min-width: 0; }
.vplayer__now { display: flex; align-items: baseline; gap: 8px; margin-bottom: 9px; }
.vplayer__now b { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.vplayer__now small { font-size: 10.5px; color: rgba(255,255,255,.5); letter-spacing: .04em; text-transform: uppercase; }
.vplayer__bar { height: 4px; cursor: pointer; background: rgba(255,255,255,.16); position: relative; }
.vplayer__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--lime); transition: width .08s linear; }
.vplayer__time { flex: none; font-size: 11px; color: rgba(255,255,255,.55); font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }

/* waveform — flat bars, lime on play. When playing, bar HEIGHTS are driven live
   from the audio spectrum via Web Audio (.is-analysing) so they react to the
   real voice. If Web Audio is unavailable, the CSS keyframe bounce is the
   fallback (still only while .is-playing). */
/* waveform is hidden while idle (the flat dashed line read as noise);
   it collapses to zero height + fades out, and only appears on playback. */
.vwave {
  display: flex; align-items: flex-end; gap: 3px;
  height: 0; padding: 0 20px; opacity: 0; overflow: hidden;
  transition: height .25s ease, padding .25s ease, opacity .25s ease;
}
.vplayer.is-playing .vwave { height: 32px; padding: 0 20px 18px; opacity: 1; }
.vwave i {
  flex: 1; height: 14%; background: var(--lime);
  transition: background .3s ease, height .09s ease-out;   /* smooths the analyser frames */
}
/* CSS fallback bounce — only when NOT analysing real audio */
.vplayer.is-playing:not(.is-analysing) .vwave i { animation: vbar 1.1s ease-in-out infinite; }
.vplayer.is-playing:not(.is-analysing) .vwave i:nth-child(odd) { animation-delay: .15s; }
.vplayer.is-playing:not(.is-analysing) .vwave i:nth-child(3n)  { animation-delay: .3s; }
.vplayer.is-playing:not(.is-analysing) .vwave i:nth-child(4n)  { animation-delay: .45s; }
.vplayer.is-playing:not(.is-analysing) .vwave i:nth-child(5n)  { animation-delay: .6s; }
@keyframes vbar { 0%,100% { height: 12%; } 50% { height: 90%; } }

/* ── live-call action: a small, restrained LIME PILL in the console header ──
   (One interactive block: this is the console's primary action, sitting beside
   "HEAR THEM SPEAK". Flat + on-brand — no loud rainbow border.) */
.vlive { display: inline-flex; align-items: center; gap: 10px; }
.vlive__btn {
  position: relative; z-index: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  padding: 9px 14px; border: 0; border-radius: 8px;
  color: var(--navy); background: var(--lime);
  transition: background .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.vlive__btn:hover { background: #eaff8a; transform: translateY(-1px); }
.vlive__icon { display: grid; place-items: center; width: 16px; height: 16px; position: relative; z-index: 1; }
.vlive__icon .vlive__stop { display: none; }
.vlive__btn .vlive__mic { color: var(--navy); }
.vlive__label { position: relative; z-index: 1; }

/* ── holographic live-border: a brand-palette sheen travels the pill edge ──
   Signals "this is a real, connectable agent" without going off-brand. The
   conic gradient cycles lime -> white -> brand-blue -> lime so the shimmer
   reads as on-brand iridescence (not rainbow glassmorphism); a short bright
   glint rides ahead of it. Rotating --vedge (via @property) sweeps it round. */
@property --vedge { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
/* The ring sits OUTSIDE the lime pill (inset -3px) so it reads against the
   dark backdrop, not lime-on-lime. The mask punches out the centre so only the
   3px rim paints, so it can sit ABOVE the button (z 0, below the label at z 1)
   without a negative z-index, which previously dropped it behind the panel and
   made it appear only on hover. Shared by "Talk live" and "Run the studio". */
.vlive__btn::before, .studio__btn::before {
  content: ""; position: absolute; inset: -3px; z-index: 0; padding: 3px; pointer-events: none;
  border-radius: 11px;
  background: conic-gradient(from var(--vedge),
    #F5FFAB 0deg,        /* lime */
    #ffffff 55deg,       /* white glint */
    #F5FFAB 120deg,      /* lime */
    #3431A5 200deg,      /* brand blue */
    #6f6bff 250deg,      /* lighter blue, keeps it visible on navy */
    #F5FFAB 320deg,
    #F5FFAB 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  filter: drop-shadow(0 0 5px rgba(245,255,171,.5));
  animation: vedge 2.6s linear infinite;
}
@keyframes vedge { to { --vedge: 360deg; } }

/* connecting — translucent outline pill */
.vlive.is-connecting .vlive__btn {
  background: transparent; color: var(--lime); box-shadow: inset 0 0 0 1px rgba(245,255,171,.5); pointer-events: none;
}
.vlive.is-connecting .vlive__icon::after {
  content: ""; position: absolute; width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid rgba(245,255,171,.3); border-top-color: var(--lime); animation: vspin .7s linear infinite;
}
.vlive.is-connecting .vlive__mic { opacity: 0; }

/* live (in call) — outlined pill, lime stop icon + a gentle pulse */
.vlive.is-live .vlive__btn {
  background: transparent; color: var(--lime); box-shadow: inset 0 0 0 1px rgba(245,255,171,.5);
  animation: vlivepulse 1.8s ease-in-out infinite;
}
.vlive.is-live .vlive__mic { display: none; }
.vlive.is-live .vlive__stop { display: block; }
@keyframes vlivepulse { 0%,100% { box-shadow: inset 0 0 0 1px rgba(245,255,171,.5), 0 0 0 0 rgba(245,255,171,0); } 50% { box-shadow: inset 0 0 0 1px rgba(245,255,171,.8), 0 0 0 4px rgba(245,255,171,.12); } }

.vlive__status {
  font-size: 10.5px; color: rgba(255,255,255,.55); font-weight: 600; letter-spacing: .02em; white-space: nowrap;
}
.vlive__status:empty { display: none; }
.vlive__status.is-err { color: #ffb4a6; }

@media (prefers-reduced-motion: reduce) {
  .vplayer.is-playing .vplayer__live, .vplayer.is-playing .vwave i,
  .vplay.is-loading::after, .vlive.is-live .vlive__btn, .vlive.is-connecting .vlive__icon::after,
  .vlive__btn::before, .studio__btn::before { animation: none; }
}
/* on narrow screens, let the header wrap the pill below the eyebrow */
@media (max-width: 560px) {
  .vplayer__head { flex-wrap: wrap; }
  .vplayer__voices { flex-wrap: wrap; }
  .vvoice { flex: 1 1 50%; border-bottom: 1px solid rgba(255,255,255,.12); }
  .vvoice:nth-child(2) { border-right: 0; }
}
@media (max-width: 560px) {
  .vplayer__voices { flex-wrap: wrap; }
  .vvoice { flex: 1 1 50%; border-bottom: 1px solid rgba(255,255,255,.12); }
  .vvoice:nth-child(2) { border-right: 0; }
}

/* ───────────────────────── AI-visibility mini-audit (GEO card) ─────────────────────────
   Minimalist, flat, on the lime section: navy input + button, hairline result
   card. A live teaser of the GEO/AIO product. */
.audit { margin-top: 18px; }
.audit__label {
  display: block; margin-bottom: 8px;
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--navy);
}
.audit__row { display: flex; gap: 8px; }
.audit__input {
  flex: 1; min-width: 0; font: inherit; font-size: 14px; color: var(--navy);
  background: transparent; border: 1.5px solid var(--navy); border-radius: 8px;
  padding: 10px 13px; outline: none;
  transition: box-shadow .2s ease;
}
.audit__input::placeholder { color: rgba(23,23,43,.45); }
.audit__input:focus { box-shadow: inset 0 0 0 1px var(--navy); }
.audit__btn {
  flex: none; cursor: pointer; font: inherit; font-size: 12px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  background: var(--navy); color: var(--lime); border: 0; border-radius: 8px; padding: 10px 16px;
  transition: transform .15s ease, opacity .2s ease;
}
.audit__btn:hover { transform: translateY(-1px); }
.audit__btn:disabled { opacity: .55; cursor: default; transform: none; }

.audit__result { margin-top: 16px; }
.audit__result[hidden] { display: none; }
/* score header */
.audit__score { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.audit__score b { font-size: 34px; font-weight: 900; letter-spacing: -.02em; line-height: 1; color: var(--navy); }
.audit__score b span { font-size: 16px; font-weight: 700; opacity: .5; }
.audit__verdict { font-size: 13px; font-weight: 700; color: var(--navy); }
/* score bar */
.audit__bar { height: 4px; background: rgba(23,23,43,.18); border-radius: 4px; margin: 12px 0 16px; overflow: hidden; }
.audit__bar i { display: block; height: 100%; width: 0; background: var(--navy); border-radius: 4px; transition: width .8s cubic-bezier(.16,1,.3,1); }
/* findings */
.audit__findings { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.audit__finding { display: flex; gap: 9px; font-size: 13px; line-height: 1.4; color: var(--muted-dark); }
.audit__mark { flex: none; width: 16px; height: 16px; margin-top: 1px; border-radius: 4px; display: grid; place-items: center; font-size: 10px; font-weight: 900; }
.audit__mark--ok { background: var(--navy); color: var(--lime); }
.audit__mark--gap { background: rgba(23,23,43,.12); color: var(--navy); }
.audit__finding b { color: var(--navy); font-weight: 700; }
/* "how AI sees you" line */
.audit__ai {
  font-size: 12.5px; line-height: 1.5; color: var(--navy);
  border-left: 3px solid var(--navy); padding: 4px 0 4px 12px; margin-bottom: 14px;
}
.audit__ai span { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .55; margin-bottom: 4px; }
.audit__cta {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700; color: var(--navy);
  border-bottom: 2px solid var(--navy); padding-bottom: 2px;
}
.audit__cta:hover { opacity: .7; }
/* loading + error states */
.audit__msg { font-size: 13px; color: var(--muted-dark); display: flex; align-items: center; gap: 9px; }
.audit__msg.is-err { color: #b4341f; }
.audit__spin { width: 14px; height: 14px; border: 2px solid rgba(23,23,43,.25); border-top-color: var(--navy); border-radius: 50%; animation: vspin .7s linear infinite; }
@media (prefers-reduced-motion: reduce) { .audit__bar i { transition: none; } .audit__spin { animation: none; } }

/* ───────────────────────── Cold-email personalizer (Sales block) ─────────────────────────
   Minimalist, on the lime section: navy input/button (like the audit widget),
   result rendered as a navy email card (reuses the .mailcard look). */
.cmail { margin-top: 26px; }
.cmail__label {
  display: block; margin-bottom: 8px;
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--navy);
}
.cmail__row { display: flex; gap: 8px; max-width: 440px; }
.cmail__input {
  flex: 1; min-width: 0; font: inherit; font-size: 14px; color: var(--navy);
  background: transparent; border: 1.5px solid var(--navy); border-radius: 8px;
  padding: 10px 13px; outline: none; transition: box-shadow .2s ease;
}
.cmail__input::placeholder { color: rgba(23,23,43,.45); }
.cmail__input:focus { box-shadow: inset 0 0 0 1px var(--navy); }
.cmail__btn {
  flex: none; cursor: pointer; font: inherit; font-size: 12px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  background: var(--navy); color: var(--lime); border: 0; border-radius: 8px; padding: 10px 16px;
  transition: transform .15s ease, opacity .2s ease;
}
.cmail__btn:hover { transform: translateY(-1px); }
.cmail__btn:disabled { opacity: .55; cursor: default; transform: none; }

.cmail__result { margin-top: 16px; max-width: 440px; }
.cmail__result[hidden] { display: none; }
/* the generated email, styled as a navy card */
.cmail__mail { background: var(--navy); border-radius: 10px; overflow: hidden; }
.cmail__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.12);
}
.cmail__to { font-size: 11px; color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmail__tag { flex: none; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--navy); background: var(--lime); padding: 3px 7px; border-radius: 5px; }
.cmail__subject { padding: 11px 14px 0; font-size: 13px; font-weight: 700; color: #fff; }
.cmail__body { margin: 0; padding: 8px 14px 14px; font-size: 12.5px; line-height: 1.55; color: rgba(255,255,255,.9); white-space: pre-wrap; }
.cmail__why { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--navy); border-left: 3px solid var(--navy); padding-left: 12px; }
.cmail__why span { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .55; margin-bottom: 3px; }
/* loading + error */
.cmail__msg { font-size: 13px; color: var(--muted-dark); display: flex; align-items: center; gap: 9px; }
.cmail__msg.is-err { color: #b4341f; }
.cmail__spin { width: 14px; height: 14px; border: 2px solid rgba(23,23,43,.25); border-top-color: var(--navy); border-radius: 50%; animation: vspin .7s linear infinite; }
@media (prefers-reduced-motion: reduce) { .cmail__spin { animation: none; } }

/* ───────────────────────── Ad-creative generator (Marketing, dark section) ─────────────────────────
   Lime-accent-on-dark to match the dark Marketing section. Minimal input +
   a framed result image. */
.adgen { max-width: 640px; margin: 0 0 clamp(32px, 5vw, 56px); }
.adgen__label {
  display: block; margin-bottom: 8px;
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--lime);
}
.adgen__row { display: flex; gap: 8px; }
.adgen__input {
  flex: 1; min-width: 0; font: inherit; font-size: 14px; color: #fff;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: 8px;
  padding: 11px 14px; outline: none; transition: border-color .2s ease, background .2s ease;
}
.adgen__input::placeholder { color: rgba(255,255,255,.42); }
.adgen__input:focus { border-color: var(--lime); background: rgba(255,255,255,.1); }
.adgen__btn {
  flex: none; cursor: pointer; font: inherit; font-size: 12px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  background: var(--lime); color: var(--navy); border: 0; border-radius: 8px; padding: 11px 18px;
  transition: background .2s ease, transform .15s ease, opacity .2s ease;
}
.adgen__btn:hover { background: #eaff8a; transform: translateY(-1px); }
.adgen__btn:disabled { opacity: .5; cursor: default; transform: none; }

.adgen__stage { margin-top: 16px; }
.adgen__stage[hidden] { display: none; }
.adgen__frame {
  position: relative; width: min(340px, 80vw); aspect-ratio: 1/1;
  border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
}
.adgen__frame img { width: 100%; height: 100%; object-fit: cover; display: block;
  animation: adgenIn .5s cubic-bezier(.16,1,.3,1); }
@keyframes adgenIn { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
.adgen__cap { margin-top: 10px; font-size: 11.5px; color: rgba(255,255,255,.5); }
.adgen__cap b { color: rgba(255,255,255,.8); font-weight: 700; }
/* loading + error */
.adgen__msg { display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(255,255,255,.7); }
.adgen__msg.is-err { color: #ffb4a6; }
.adgen__spin { width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.25); border-top-color: var(--lime); border-radius: 50%; animation: vspin .7s linear infinite; }
/* skeleton shimmer while generating */
.adgen__skel { width: min(340px, 80vw); aspect-ratio: 1/1; border-radius: 12px; background:
  linear-gradient(100deg, rgba(255,255,255,.05) 30%, rgba(245,255,171,.12) 50%, rgba(255,255,255,.05) 70%);
  background-size: 220% 100%; animation: adgenShim 1.2s linear infinite; margin-top: 4px; }
@keyframes adgenShim { 0% { background-position: 180% 0; } 100% { background-position: -60% 0; } }
@media (prefers-reduced-motion: reduce) { .adgen__frame img, .adgen__spin, .adgen__skel { animation: none; } }

/* ═════════════════ TRY OUR AI, LIVE — unified demo band ═════════════════
   One deliberate showcase instead of demos scattered across sections. Flat navy
   band, editorial. Tabs switch between the three live tools. */
.trylive { background: var(--navy); color: #fff; position: relative; overflow: hidden; }
/* faint editorial grid wash in the background — high-end texture, not a glow */
.trylive::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 100% 64px,
    radial-gradient(120% 60% at 85% -10%, rgba(245,255,171,.06), transparent 60%);
}
.trylive__inner { position: relative; max-width: var(--max); margin: 0 auto; padding: clamp(56px, 8vw, 110px) var(--pad); }

/* editorial 2-column header: title block left, stat rail right */
.trylive__head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 5vw, 72px); align-items: end;
  margin-bottom: clamp(34px, 5vw, 56px);
  padding-bottom: clamp(24px, 3vw, 36px);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.trylive__headmain { max-width: 680px; }
.trylive__head .num { color: var(--lime); display: block; margin-bottom: 12px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.trylive__title { font-weight: 900; font-size: clamp(40px, 6vw, 84px); letter-spacing: -.025em; line-height: .92; margin-bottom: 18px; }
.trylive__copy { color: rgba(255,255,255,.62); font-size: clamp(15px, 1.4vw, 17px); line-height: 1.55; }
.trylive__stats { list-style: none; display: flex; gap: clamp(18px, 2.4vw, 34px); padding: 0; margin: 0; }
.trylive__stats li { display: flex; flex-direction: column; gap: 2px; text-align: right; }
.trylive__stats b { font-weight: 900; font-size: clamp(24px, 3vw, 38px); letter-spacing: -.02em; line-height: 1; color: #fff; }
.trylive__stats span { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.42); }
@media (max-width: 860px) {
  .trylive__head { grid-template-columns: 1fr; align-items: start; gap: 22px; }
  .trylive__stats { gap: 28px; }
  .trylive__stats li { text-align: left; }
}

/* ── ONE input drives the whole studio: a premium command bar ── */
.studio { max-width: 760px; margin-bottom: clamp(34px, 4vw, 52px); }
.studio__bar {
  display: flex; align-items: stretch; gap: 0;
  border: 1px solid rgba(255,255,255,.18); border-radius: 14px;
  background: rgba(255,255,255,.04);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
  transition: border-color .2s ease, box-shadow .25s ease, background .2s ease;
}
.studio__bar:focus-within {
  border-color: var(--lime); background: rgba(255,255,255,.06);
  box-shadow: 0 0 0 4px rgba(245,255,171,.14), 0 8px 30px rgba(0,0,0,.25);
}
.studio__glyph {
  display: flex; align-items: center; padding: 0 10px 0 18px;
  color: rgba(255,255,255,.5); transition: color .2s ease;
}
.studio__bar:focus-within .studio__glyph { color: var(--lime); }
.studio__prefix {
  display: flex; align-items: center; padding: 0 2px 0 2px;
  color: rgba(255,255,255,.38); font-size: 16px; font-variant-numeric: tabular-nums;
}
.studio__input {
  flex: 1; min-width: 0; font: inherit; font-size: clamp(16px, 1.6vw, 19px);
  color: #fff; background: transparent; border: 0; outline: 0;
  padding: 18px 12px 18px 4px;
}
.studio__input::placeholder { color: rgba(255,255,255,.38); }
.studio__btn {
  position: relative; z-index: 0;
  flex: none; display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  font: inherit; font-weight: 800; font-size: 14px; letter-spacing: .01em;
  color: var(--navy); background: var(--lime); border: 0;
  margin: 6px; border-radius: 9px;
  padding: 0 clamp(18px, 2vw, 26px);
  transition: background .2s ease, transform .15s ease;
}
.studio__btn-label, .studio__btn-arr { position: relative; z-index: 1; }
.studio__btn:hover { background: #eaff8a; transform: translateY(-1px); }
.studio__btn:disabled { opacity: .7; cursor: default; }
.studio__btn-arr { transition: transform .2s ease; }
.studio__btn:hover .studio__btn-arr { transform: translateX(3px); }
.studio.is-busy .studio__btn-arr { animation: studioSpin .7s linear infinite; }
@keyframes studioSpin { to { transform: rotate(360deg); } }

.studio__seeds { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.studio__seedlabel { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.seed {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  color: rgba(255,255,255,.8); background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16); border-radius: 6px;
  padding: 6px 12px; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.seed:hover { background: rgba(245,255,171,.12); border-color: var(--lime); color: #fff; }
.seed--rand { color: var(--lime); }

/* ── "what AI understood about you" reveal panel ── */
.studcoxt {
  margin-bottom: clamp(18px, 2.5vw, 28px);
  padding: clamp(18px, 2.5vw, 26px) clamp(20px, 3vw, 30px);
  background: rgba(245,255,171,.05);
  border: 1px solid rgba(245,255,171,.22);
  border-left: 3px solid var(--lime);
  border-radius: 10px;
  animation: tryIn .35s cubic-bezier(.16,1,.3,1);
}
.studcoxt[hidden] { display: none; }
.studcoxt__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.studcoxt__eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--lime); }
.studcoxt__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); animation: scellPulse 1.2s infinite; }
.studcoxt.is-ready .studcoxt__dot { animation: none; }
.studcoxt__name { font-weight: 900; font-size: clamp(18px, 2vw, 24px); letter-spacing: -.01em; }
.studcoxt__liner { color: rgba(255,255,255,.78); font-size: clamp(15px, 1.5vw, 18px); line-height: 1.5; min-height: 1.2em; }
.studcoxt__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.studcoxt__tag {
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
  border-radius: 6px; padding: 5px 11px;
}

/* ── live dashboard: 3 cells fill in as the studio works ── */
.studio__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 22px); align-items: start; }
.scell {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column; min-height: 340px;
  transition: border-color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.scell:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.2); box-shadow: 0 14px 40px rgba(0,0,0,.28); }
.scell.is-running { border-color: rgba(245,255,171,.45); }
.scell.is-done { border-color: rgba(245,255,171,.28); }
.scell.is-err { border-color: rgba(255,120,120,.3); }
/* top accent bar: dim by default, lights lime + slides while running */
.scell__accent { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.scell__accent::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--lime), transparent); }
.scell.is-running .scell__accent { background: rgba(245,255,171,.25); }
.scell.is-running .scell__accent::after { animation: scellSweep 1.1s linear infinite; }
.scell.is-done .scell__accent { background: var(--lime); }
@keyframes scellSweep { to { transform: translateX(100%); } }
.scell__head {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,.09);
}
.scell__step { font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--navy); background: var(--lime); border-radius: 5px; padding: 3px 7px; }
.scell__icon { display: inline-flex; color: rgba(255,255,255,.55); transition: color .25s ease; }
.scell.is-running .scell__icon, .scell.is-done .scell__icon { color: var(--lime); }
.scell__title { font-weight: 900; font-size: 16px; letter-spacing: -.01em; flex: 1; }
.scell__stat { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.scell__body { position: relative; padding: 18px; flex: 1; display: flex; flex-direction: column; }
.scell__idle { color: rgba(255,255,255,.5); font-size: 14px; line-height: 1.5; }
/* No fake placeholder at idle: an idle cell shows ONLY its description, so it
   never looks like it's loading when the studio hasn't been run. The real
   loading skeletons (.skl*) appear only once a run starts. */
.scell.is-running .scell__idle, .scell.is-done .scell__idle, .scell.is-err .scell__idle { display: none; }
@keyframes scellShim { 0% { background-position: 180% 0; } 100% { background-position: -60% 0; } }
@media (prefers-reduced-motion: reduce) {
  .scell__accent::after { animation: none; }
}

/* the result blocks animate in */
.studio__grid .audit__result, .studio__grid .cmail__result, .studio__grid .adgen__stage {
  animation: tryIn .3s cubic-bezier(.16,1,.3,1);
}
@keyframes tryIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.studio__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: clamp(24px, 3vw, 36px); padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.14);
  animation: tryIn .4s cubic-bezier(.16,1,.3,1);
}
.studio__foot[hidden] { display: none; }
.studio__foot span { color: rgba(255,255,255,.7); font-size: 15px; max-width: 560px; }

@media (max-width: 900px) {
  .studio__grid { grid-template-columns: 1fr; }
  .scell { min-height: 0; }
}

/* ── dark-band overrides: the audit/cmail inputs were styled for the LIME
   section (navy on lime). On this navy band, flip to light-on-dark. ── */
.trylive .audit__input, .trylive .cmail__input {
  color: #fff; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18); border-radius: 8px;
}
.trylive .audit__input::placeholder, .trylive .cmail__input::placeholder { color: rgba(255,255,255,.42); }
.trylive .audit__input:focus, .trylive .cmail__input:focus { border-color: var(--lime); background: rgba(255,255,255,.1); box-shadow: none; }
.trylive .audit__btn, .trylive .cmail__btn { background: var(--lime); color: var(--navy); }
.trylive .audit__btn:hover, .trylive .cmail__btn:hover { background: #eaff8a; }
/* audit scorecard on dark: flip navy-on-lime accents to lime-on-dark */
.trylive .audit__score b, .trylive .audit__verdict, .trylive .audit__finding b { color: #fff; }
.trylive .audit__score b span { color: rgba(255,255,255,.5); }
.trylive .audit__bar { background: rgba(255,255,255,.16); }
.trylive .audit__bar i { background: var(--lime); }
.trylive .audit__finding { color: rgba(255,255,255,.7); }
.trylive .audit__mark--ok { background: var(--lime); color: var(--navy); }
.trylive .audit__mark--gap { background: rgba(255,255,255,.14); color: #fff; }
.trylive .audit__ai { color: rgba(255,255,255,.85); border-left-color: var(--lime); }
.trylive .audit__ai span { color: rgba(255,255,255,.5); }
.trylive .audit__cta { color: var(--lime); border-bottom-color: var(--lime); }
.trylive .cmail__why { color: rgba(255,255,255,.8); border-left-color: var(--lime); }
.trylive .cmail__why span { color: rgba(255,255,255,.5); }
.trylive .audit__msg, .trylive .cmail__msg { color: rgba(255,255,255,.7); }
.trylive .audit__spin, .trylive .cmail__spin { border-color: rgba(255,255,255,.25); border-top-color: var(--lime); }
/* reset the old top-margins (they were spacing within a service column) */
.trylive .audit, .trylive .cmail, .trylive .adgen { margin: 0; }

/* in-cell working + error states */
.scell__work { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.6); font-size: 13px; margin-bottom: 16px; }
.scell__spin {
  width: 15px; height: 15px; flex: none; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.22); border-top-color: var(--lime);
  animation: studioSpin .7s linear infinite;
}
.scell__errmsg { color: rgba(255,160,160,.85); font-size: 13.5px; line-height: 1.5; }

/* ── shaped loading skeletons (mirror each cell's eventual result) ── */
.skl {
  display: block; border-radius: 6px;
  background: linear-gradient(100deg, rgba(255,255,255,.05) 28%, rgba(245,255,171,.13) 50%, rgba(255,255,255,.05) 72%);
  background-size: 220% 100%; animation: sklShim 1.4s linear infinite;
}
@keyframes sklShim { 0% { background-position: 180% 0; } 100% { background-position: -60% 0; } }
.skl-audit, .skl-mail, .skl-ad { display: flex; flex-direction: column; gap: 14px; animation: tryIn .3s ease; }
/* audit: score + verdict, meter, finding rows */
.skl-audit__top { display: flex; align-items: center; gap: 14px; }
.skl--score { width: 64px; height: 40px; border-radius: 8px; }
.skl--verdict { flex: 1; height: 14px; }
.skl--meter { width: 100%; height: 6px; border-radius: 3px; }
.skl-audit__rows { list-style: none; padding: 0; margin: 2px 0 0; display: flex; flex-direction: column; gap: 12px; }
.skl-audit__rows li { display: flex; align-items: center; gap: 10px; }
.skl--dot { width: 18px; height: 18px; flex: none; border-radius: 5px; }
.skl--bar { flex: 1; height: 11px; }
.skl-audit__rows li:nth-child(2) .skl--bar { max-width: 82%; }
.skl-audit__rows li:nth-child(3) .skl--bar { max-width: 68%; }
.skl-audit__rows li:nth-child(4) .skl--bar { max-width: 88%; }
/* mail: header row, subject, body lines */
.skl-mail__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.skl--to { width: 45%; height: 12px; }
.skl--tag { width: 52px; height: 16px; border-radius: 5px; }
.skl--subj { width: 70%; height: 14px; }
.skl-mail__body { display: flex; flex-direction: column; gap: 9px; margin-top: 2px; }
.skl--line { height: 10px; }
.skl--line.short { width: 55%; }
/* ad: square frame + caption */
.skl--frame { width: 100%; aspect-ratio: 1 / 1; border-radius: 10px; }
.skl--cap { width: 60%; height: 10px; }

@media (prefers-reduced-motion: reduce) { .skl { animation: none; } }
/* the ad image fills its cell nicely */
.studio__grid .adgen__frame { border-radius: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); }
.studio__grid .adgen__frame img { display: block; width: 100%; height: auto; }
.studio__grid .adgen__cap { color: rgba(255,255,255,.55); font-size: 12.5px; margin-top: 8px; }
.studio__grid .adgen__cap b { color: var(--lime); font-weight: 700; }
/* slightly tighter score inside the compact cell */
.studio__grid .audit__score b { font-size: clamp(34px, 4vw, 46px); }

@media (prefers-reduced-motion: reduce) {
  .studio__grid .audit__result, .studio__grid .cmail__result, .studio__grid .adgen__stage, .studio__foot { animation: none; }
}