/* ============================================================
   Aigency — design system
   Brand: pink #d38fbe → purple #787aba on black & white
   ============================================================ */
:root {
  --ink: #0b0812;
  --ink-2: #14101f;
  --paper: #ffffff;
  --paper-2: #f7f5fa;
  --text: #1a1523;
  --text-soft: #5c5570;
  --text-inverse: #f4f1fa;
  --text-inverse-soft: #b9b2cc;
  --pink: #d38fbe;
  --purple: #787aba;
  --neon-pink: #f394d8;
  --neon-purple: #9d8cff;
  --grad: linear-gradient(100deg, var(--pink), var(--purple));
  --grad-bright: linear-gradient(100deg, var(--neon-pink), var(--neon-purple));
  --radius: 20px;
  --font-head: "Sora", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --wrap: 1180px;
  --shadow-soft: 0 20px 60px rgba(26, 21, 35, 0.10);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--paper);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-head); line-height: 1.12; letter-spacing: -0.02em; font-weight: 700;
  /* even out line lengths instead of leaving a stray word on its own line */
  text-wrap: balance;
}
/* Hard breaks are authored for desktop widths; on narrow screens they fight
   natural wrapping and strand single words, so drop them and let the text
   balance itself. */
@media (max-width: 700px) {
  h1 br, h2 br { display: none; }
  h1 br + span::before, h2 br + span::before { content: " "; }
}
h1 { font-size: clamp(2.6rem, 6.5vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.55rem); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
section { padding: 96px 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--purple);
  margin-bottom: 22px;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; border-radius: 2px;
  background: var(--grad);
}
.dark .eyebrow { color: var(--neon-pink); }

.grad-text {
  /* White-dominant on dark: the purple end of a full pink→purple ramp went
     almost black against the ink background. Colour now arrives as pops that
     travel through white letters, so it reads cleanly and still shifts hue.
     Ends match (#fff) so the loop is seamless. */
  background: linear-gradient(100deg,
    #ffffff 0%, #ffffff 14%,
    var(--neon-pink) 25%, #f6ecff 33%,
    #ffffff 46%, #ffffff 56%,
    var(--neon-purple) 67%, #f2eaff 75%,
    #ffffff 88%, #ffffff 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: gradShimmer 6s linear infinite;
}
/* soft brand halo so the white letters still feel lit, not flat */
.dark .grad-text, .hero .grad-text, .stats .grad-text {
  filter: drop-shadow(0 0 12px rgba(243, 148, 216, 0.30))
          drop-shadow(0 0 26px rgba(157, 140, 255, 0.22));
}
.light-sec .grad-text, .tint-sec .grad-text {
  background-image: linear-gradient(100deg,
    var(--pink), var(--purple), var(--pink), var(--purple), var(--pink));
  background-size: 250% 100%;
}
@keyframes gradShimmer {
  from { background-position: 0% 50%; }
  to { background-position: -250% 50%; }
}
@media (prefers-reduced-motion: reduce) { .grad-text { animation: none; } }

/* Phone widths: the hard <br> is dropped above, which let the gradient phrase
   start mid-line and read as part of the sentence before it. Promote it to its
   own block so each sentence keeps its own lines and balances independently.
   (The br + span::before space would sit at the start of that block, so drop it.) */
@media (max-width: 700px) {
  .hero h1 .grad-text { display: block; }
  .hero h1 br + .grad-text::before { content: none; }
}
/* The hero canvas runs close behind the copy on a phone, and the gradient
   headline was washing out against it. Two causes, both fixed here:
   1. text-shadow is painted OVER a background-clip:text fill (the element's
      background is painted before the text layer), so the hero's heavy dark
      shadow on .hero h1 was sitting on top of the gradient and muting it to a
      grey-purple. Drop it for this span and get the same separation from a
      drop-shadow filter, which composites behind the glyphs instead.
   2. the ramp's mid-tones are too dark against a lit background, so lift them.
   760px matches the mobile threshold in web.js — keep the two in step. */
@media (max-width: 760px) {
  .hero .grad-text {
    /* same white-dominant ramp as desktop, so the treatment is consistent
       across breakpoints — colour arrives as pops, not as the base tone */
    background-image: linear-gradient(100deg,
      #ffffff 0%, #ffffff 14%,
      var(--neon-pink) 25%, #fdf2ff 33%,
      #ffffff 46%, #ffffff 56%,
      var(--neon-purple) 67%, #f6f0ff 75%,
      #ffffff 88%, #ffffff 100%);
    text-shadow: none;
    filter:
      drop-shadow(0 1px 3px rgba(11, 8, 18, 0.95))
      drop-shadow(0 0 16px rgba(11, 8, 18, 0.8));
  }
}

.lede { font-size: clamp(1.05rem, 1.7vw, 1.3rem); color: var(--text-soft); max-width: 640px; }
.dark .lede { color: var(--text-inverse-soft); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-head); font-weight: 600; font-size: 1rem;
  padding: 16px 30px; border-radius: 999px; text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
  cursor: pointer; border: none;
}
.btn-primary {
  /* looping ramp so the colour flow drifts across the button endlessly */
  background: linear-gradient(100deg,
    var(--pink), var(--purple), var(--pink), var(--purple), var(--pink));
  background-size: 250% 100%;
  color: #fff;
  box-shadow: 0 8px 30px rgba(120, 122, 186, 0.45);
  animation: gradShimmer 7s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .btn-primary { animation: none; } }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(211, 143, 190, 0.55); }
.btn-ghost {
  background: transparent; color: var(--text);
  box-shadow: inset 0 0 0 1.5px rgba(26,21,35,0.25);
}
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--purple); color: var(--purple); }
/* heroes are dark too, but carry .hero rather than .dark — without them here
   the secondary CTA renders near-black on the dark hero and disappears */
.dark .btn-ghost, .hero .btn-ghost { color: var(--text-inverse); box-shadow: inset 0 0 0 1.5px rgba(244,241,250,0.35); }
.dark .btn-ghost:hover, .hero .btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--neon-pink); color: var(--neon-pink); }
.btn .arrow { transition: transform .25s ease; }
.btn:hover .arrow { transform: translateX(4px); }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  transition: background .35s ease, box-shadow .35s ease;
}
.nav-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 18px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nav.scrolled { background: rgba(11, 8, 18, 0.82); backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(255,255,255,0.06); }
/* While the mobile menu is open, drop the blur: backdrop-filter on the nav
   makes it the containing block for the fixed overlay inside it, shrinking
   the overlay to the nav bar and leaving the links floating over the page. */
.nav.menu-open, .nav.menu-open.scrolled {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.nav-logo img { height: 26px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 34px; list-style: none; }
.nav-links a {
  color: var(--text-inverse); text-decoration: none; font-size: 0.95rem; font-weight: 500;
  opacity: 0.85; transition: opacity .2s ease, color .2s ease;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { opacity: 1; color: var(--neon-pink); }
.nav-cta { padding: 11px 22px; font-size: 0.9rem; }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: #fff; margin: 5px 0; border-radius: 2px; transition: transform .3s, opacity .3s; }

/* On light pages the nav sits over a dark header band anyway */

@media (max-width: 860px) {
  .nav-links {
    position: fixed; inset: 0; z-index: 55;
    /* fully opaque: backdrop-filter is unreliable on some mobile browsers and
       a see-through overlay leaves the links unreadable over page content */
    background: #0b0812;
    background-image: radial-gradient(ellipse 90% 60% at 50% 30%, rgba(120,122,186,0.22), transparent 70%);
    flex-direction: column; justify-content: center; gap: 22px;
    /* visibility pairs with opacity so the menu is never invisible-but-tappable */
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .28s ease, visibility 0s linear .28s;
  }
  .nav-links.open {
    opacity: 1; visibility: visible; pointer-events: auto;
    transition: opacity .28s ease, visibility 0s;
  }
  .nav-links a { font-size: 1.4rem; font-family: var(--font-head); }
  .nav-toggle { display: block; z-index: 60; }
  .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: center;
  background: var(--ink); color: var(--text-inverse);
  overflow: hidden; padding: 140px 0 100px;
}
#flow-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 75% at 28% 48%, rgba(11,8,18,0.82) 0%, rgba(11,8,18,0.55) 45%, transparent 75%),
    linear-gradient(rgba(11,8,18,0.35), rgba(11,8,18,0.10) 38%, rgba(11,8,18,0.55) 82%, var(--ink) 100%);
  pointer-events: none;
}
.hero-content { position: relative; z-index: 2; max-width: 780px; text-shadow: 0 2px 24px rgba(11,8,18,0.9); }
.hero h1 { margin-bottom: 26px; text-shadow: 0 4px 44px rgba(11,8,18,0.95), 0 1px 10px rgba(11,8,18,0.8); }
.hero .lede { margin-bottom: 40px; color: #ded9ec; text-shadow: 0 2px 22px rgba(11,8,18,0.95), 0 1px 6px rgba(11,8,18,0.85); }
.hero .hero-ctas { text-shadow: none; }
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }
.scroll-cue {
  position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);
  z-index: 2; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-inverse-soft); display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-decoration: none;
}
.scroll-cue::after {
  content: ""; width: 1.5px; height: 44px;
  background: linear-gradient(var(--neon-pink), transparent);
  animation: cue 2.2s ease-in-out infinite;
}
@keyframes cue { 0%,100% { opacity: .3; transform: scaleY(.6); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } }

@media (min-width: 700px) { .nowrap-desktop { white-space: nowrap; } }

/* page-header hero variant (interior pages) */
.hero.hero-page { min-height: 62svh; padding: 160px 0 90px; }

/* ---------- home hero: neon web vortex ---------- */
.hero-home {
  text-align: center;
  /* reserve space for the stat cards that float up over this hero, so they
     can never crowd or cover the CTAs on short viewports */
  padding-bottom: 250px;
}
.hero-home .hero-content { margin: 0 auto; max-width: 700px; }
.hero-home .eyebrow { justify-content: center; }
.hero-home .hero-ctas {
  /* primary CTA dead-centre, secondary tucked beneath it */
  flex-direction: column; align-items: center; justify-content: center; gap: 14px;
}
.hero-home .hero-veil {
  /* whisper of a scrim, feathered far past the ring so no disc edge shows —
     the canvas's own glowing ring provides the copy's frame */
  background:
    radial-gradient(circle at 50% 50%, rgba(11,8,18,0.38) 0%, rgba(11,8,18,0.14) 42%, transparent 78%),
    /* dissolve the network into ink at the bottom edge so it flows into the
       stats band rather than being guillotined at the section boundary */
    linear-gradient(to bottom, transparent 82%, rgba(11,8,18,0.30) 94%, #0b0812 100%);
}
/* logo floats in the void while the web charges, then hands off to the copy */
/* 760px matches the `mobile` threshold in web.js. Below it the clearing has to
   shrink to stay inside the narrow half-width, so the network runs much closer
   behind the copy — lift the scrim to keep the headline and ghost CTA legible.
   Keep these two breakpoints in step. */
@media (max-width: 760px) {
  .hero-home .hero-veil {
    background:
      radial-gradient(circle at 50% 46%,
        rgba(11,8,18,0.60) 0%, rgba(11,8,18,0.34) 46%, rgba(11,8,18,0.10) 80%),
      linear-gradient(to bottom, transparent 80%, rgba(11,8,18,0.45) 94%, #0b0812 100%);
  }
}

.hero-orb-logo {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 2; width: min(190px, 44vw); opacity: 0; pointer-events: none;
  filter: drop-shadow(0 0 24px rgba(243,148,216,0.55));
}
.hero-home.intro .hero-orb-logo {
  animation: orbPulse 1.4s ease-in-out infinite;
  opacity: 1;
}
.hero-home.charged .hero-orb-logo {
  opacity: 0; transition: opacity .45s ease;
}
@keyframes orbPulse {
  0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.97); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.03); }
}
/* copy hides during the charge, then pops in staggered.
   The 3s fallback animation guarantees the copy appears even if JS dies. */
.hero-home.intro .hero-stagger {
  opacity: 0; transform: translateY(16px) scale(0.985);
  animation: heroReveal 0.01s linear 3s forwards;
}
.hero-home.charged .hero-stagger {
  opacity: 1; transform: none;
  transition: opacity .65s cubic-bezier(.2,.7,.2,1), transform .65s cubic-bezier(.2,.7,.2,1);
}
.hero-home.charged .hero-stagger:nth-child(2) { transition-delay: .08s; }
.hero-home.charged .hero-stagger:nth-child(3) { transition-delay: .18s; }
.hero-home.charged .hero-stagger:nth-child(4) { transition-delay: .3s; }
@keyframes heroReveal { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero-home.intro .hero-stagger { opacity: 1; transform: none; animation: none; }
  .hero-orb-logo { display: none; }
}

/* ---------- dark / light sections ---------- */
.dark { background: var(--ink); color: var(--text-inverse); }
.light-sec { background: var(--paper); }
.tint-sec { background: var(--paper-2); }

/* ---------- stat bar ---------- */
.stats {
  position: relative; color: var(--text-inverse);
  /* Float the cards up onto the hero so they sit on the live network rather
     than on a separate black slab. --stats-lift is both the overlap distance
     and where the solid ink below has to begin, so the two can't drift apart.
     Interior heroes are far shorter, so they opt in via .stats-float only —
     at 190px the cards collided with their hero copy. */
  --stats-lift: 0px;
  margin-top: calc(var(--stats-lift) * -1);
  padding: 0 0 96px;
  background: none;
  z-index: 3;
}
.stats-float { --stats-lift: 190px; }
.stats::before {
  /* ink for the part of the band that hangs below the hero's bottom edge */
  content: ""; position: absolute; inset: var(--stats-lift) 0 0 0;
  background:
    radial-gradient(ellipse 70% 120% at 50% 0%, rgba(120, 122, 186, 0.14), transparent 70%),
    var(--ink);
  z-index: -1;
}
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stat {
  padding: 30px 26px; border-radius: var(--radius);
  /* frosted glass: the neon network stays visible behind, blurred enough that
     the copy on top is still comfortable to read */
  background: linear-gradient(160deg, rgba(28, 22, 44, 0.72), rgba(15, 11, 26, 0.62));
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(211, 143, 190, 0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 22px 50px rgba(0,0,0,0.45);
}
.stat b {
  display: block; font-family: var(--font-head); font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  background: var(--grad-bright); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.02em; margin-bottom: 10px;
}
.stat span { font-size: 0.92rem; color: var(--text-inverse-soft); }
/* Word-phrase stats (home page) need a smaller face than short figures like
   "2.89%" — at the figure size they wrapped mid-phrase and looked broken. */
.stat-words .stat b {
  font-size: clamp(1.35rem, 2.1vw, 1.72rem);
  line-height: 1.15; text-wrap: balance;
}
@media (max-width: 860px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .stats.stats-float { --stats-lift: 90px; } }

/* ---------- cards ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  border-radius: var(--radius); padding: 38px 32px;
  background: var(--paper); border: 1px solid rgba(26,21,35,0.08);
  box-shadow: var(--shadow-soft);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  position: relative; overflow: hidden;
  text-decoration: none; display: block;
}
.card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--grad); opacity: 0; transition: opacity .3s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: 0 30px 70px rgba(120,122,186,0.22); border-color: rgba(120,122,186,0.35); }
.card:hover::before { opacity: 1; }
.card h3 { margin: 18px 0 12px; }
.card p { color: var(--text-soft); font-size: 0.98rem; }
.card .card-link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 20px;
  font-weight: 600; font-size: 0.95rem; color: var(--purple); text-decoration: none;
}
.card:hover .card-link { color: var(--pink); }
.card-icon {
  width: 54px; height: 54px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(211,143,190,0.14), rgba(120,122,186,0.14));
  display: flex; align-items: center; justify-content: center;
}
.card-icon svg { width: 28px; height: 28px; }

/* ---------- process ---------- */
.process-step { display: flex; gap: 28px; padding: 34px 0; border-top: 1px solid rgba(255,255,255,0.1); }
.process-step:last-child { border-bottom: 1px solid rgba(255,255,255,0.1); }
.process-num {
  font-family: var(--font-head); font-weight: 700; font-size: 1.05rem;
  background: var(--grad-bright); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; min-width: 46px; padding-top: 4px;
}
.process-step h3 { margin-bottom: 8px; }
.process-step p { color: var(--text-inverse-soft); max-width: 640px; }

/* ---------- work cards ---------- */
.work-card {
  position: relative; border-radius: var(--radius); overflow: hidden; display: block;
  text-decoration: none; aspect-ratio: 4 / 3; background: var(--ink-2);
}
.work-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.work-card:hover img { transform: scale(1.05); }
.work-card .work-info {
  position: absolute; inset: auto 0 0 0; padding: 26px;
  background: linear-gradient(transparent, rgba(11,8,18,0.88) 55%);
  color: #fff;
}
.work-info small {
  text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.7rem; font-weight: 600;
  color: var(--neon-pink);
}
.work-info h3 { margin-top: 6px; font-size: 1.3rem; }
.work-info p { font-size: 0.9rem; color: var(--text-inverse-soft); margin-top: 6px; }

/* ---------- team ---------- */
.team-card { text-align: left; text-decoration: none; }
.team-card img { border-radius: var(--radius); aspect-ratio: 1; object-fit: cover; }
.team-card h3 { margin: 18px 0 2px; font-size: 1.15rem; }
.team-card small { color: var(--purple); font-weight: 600; font-size: 0.85rem; }
.team-card p { margin-top: 10px; font-size: 0.93rem; color: var(--text-soft); }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; text-align: center; padding: 120px 0; }
.cta-band h2 { max-width: 760px; margin: 0 auto 20px; }
.cta-band .lede { margin: 0 auto 40px; }
.cta-waves { position: absolute; inset: 0; pointer-events: none; opacity: 0.85; }

/* ---------- checklists / prose ---------- */
.check-list { list-style: none; margin: 26px 0; display: grid; gap: 18px; }
/* relative + absolute tick, NOT flex — a flex li would make <strong> its own
   column and break the label away from the sentence it belongs to */
.check-list li {
  position: relative; padding-left: 40px; color: var(--text-soft); line-height: 1.7;
}
.check-list li::before {
  content: "✓"; position: absolute; left: 0; top: 2px;
  width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(211,143,190,0.18), rgba(120,122,186,0.18));
  color: var(--purple); font-weight: 700; font-size: 0.8rem;
  display: flex; align-items: center; justify-content: center;
}
.check-list li strong { color: var(--text); margin-right: 6px; }
.dark .check-list li strong { color: var(--text-inverse); }
.dark .check-list li { color: var(--text-inverse-soft); }

.prose { max-width: 720px; }
.prose h2 { margin: 48px 0 16px; font-size: 1.6rem; }
.prose p, .prose li { color: var(--text-soft); margin-bottom: 14px; }
.prose ul { padding-left: 22px; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 36px; } }
.split img { border-radius: var(--radius); }

/* ---------- FAQ ---------- */
.faq details {
  border-bottom: 1px solid rgba(26,21,35,0.1); padding: 6px 0;
}
.faq summary {
  cursor: pointer; font-family: var(--font-head); font-weight: 600; font-size: 1.05rem;
  padding: 18px 30px 18px 0; list-style: none; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-size: 1.4rem; color: var(--purple); transition: transform .25s ease;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { color: var(--text-soft); padding: 0 0 18px; max-width: 680px; }

/* ---------- forms ---------- */
.form-grid { display: grid; gap: 18px; }
.form-grid label { font-weight: 600; font-size: 0.9rem; display: grid; gap: 8px; }
.form-grid input, .form-grid select, .form-grid textarea {
  font: inherit; padding: 14px 16px; border-radius: 12px;
  border: 1.5px solid rgba(26,21,35,0.16); background: #fff; width: 100%;
  transition: border-color .2s ease, box-shadow .2s ease;
  /* 16px minimum — iOS Safari zooms the whole page on focus below this */
  font-size: max(16px, 1rem);
}
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus {
  outline: none; border-color: var(--purple); box-shadow: 0 0 0 4px rgba(120,122,186,0.15);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
footer { background: var(--ink); color: var(--text-inverse); padding: 80px 0 36px; position: relative; overflow: hidden; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 56px; position: relative; z-index: 1; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
footer .f-logo img { height: 28px; margin-bottom: 18px; }
footer p, footer a { color: var(--text-inverse-soft); font-size: 0.94rem; text-decoration: none; }
footer a:hover { color: var(--neon-pink); }
footer h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.16em; margin-bottom: 18px; color: #fff; }
footer ul { list-style: none; display: grid; gap: 10px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.09); padding-top: 28px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 0.85rem; color: var(--text-inverse-soft); position: relative; z-index: 1;
}
.footer-glow {
  position: absolute; bottom: -180px; left: 50%; transform: translateX(-50%);
  width: 900px; height: 340px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(120,122,186,0.28), rgba(211,143,190,0.12) 55%, transparent 75%);
  filter: blur(40px); pointer-events: none;
}

/* ---------- reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- wave divider ---------- */
.wave-divider { display: block; width: 100%; height: 90px; }

/* ============================================================
   MOBILE OPTIMISATION — the majority of visitors are on phones
   ============================================================ */
@media (max-width: 700px) {
  body { font-size: 16.5px; }
  .wrap { padding: 0 20px; }
  section { padding: 62px 0; }
  .stats { padding-bottom: 56px; }

  h1 { font-size: clamp(2.15rem, 9.5vw, 3rem); line-height: 1.08; }
  h2 { font-size: clamp(1.7rem, 7vw, 2.2rem); }
  .lede { font-size: 1.02rem; }

  /* hero: trim the dead space top and bottom */
  .hero { padding: 118px 0 72px; min-height: 92svh; }
  .hero.hero-page { min-height: auto; padding: 124px 0 60px; }
  .hero-home { padding-bottom: 160px; }
  .hero h1 { margin-bottom: 18px; }
  .hero .lede { margin-bottom: 30px; }

  /* full-width CTAs are far easier to hit one-handed */
  .hero-ctas { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero-ctas .btn { width: 100%; justify-content: center; }
  .btn { padding: 15px 26px; }

  /* comfortable tap targets in the overlay menu */
  .nav-links a { padding: 12px 18px; }
  .nav-inner { padding: 14px 20px; }

  .card { padding: 30px 24px; }
  .stat { padding: 24px 20px; }
  .cta-band { padding: 76px 0; }
  .pull-quote { padding: 76px 0; }
  .pull-quote::before { font-size: 7rem; top: 16px; }
  .process-step { gap: 16px; padding: 26px 0; }
  .cs-split { gap: 28px; }
  footer { padding: 60px 0 30px; }
  .footer-grid { gap: 32px; margin-bottom: 40px; }
}

/* Spend calculator: keep the running total on screen while toggling */
@media (max-width: 900px) {
  .calc-grid { display: flex; flex-direction: column; }
  .calc-grid > div:last-child { order: -1; }        /* total above the list */
  .calc-total { position: sticky; top: 74px; z-index: 5; padding: 22px 22px; }
  .calc-big { font-size: 2.3rem; }
  .calc-year { margin-top: 14px; padding: 12px 14px; }
  .calc-year b { font-size: 1.3rem; }
  .calc-fine { display: none; }                      /* restated in the fine print below */
  .spend-row { padding: 15px 16px; gap: 12px; }
  .spend-desc { display: none; }                     /* label + price is enough on a phone */
  .spend-amt { font-size: 0.95rem; }
}

/* Tables: make the horizontal scroll obvious rather than a hidden edge */
@media (max-width: 760px) {
  .cmp-wrap { position: relative; }
  .cmp-wrap::after {
    content: "swipe to compare →"; position: sticky; left: 0; bottom: 0;
    display: block; padding: 8px 14px; font-size: 0.75rem;
    color: var(--purple); background: linear-gradient(rgba(247,245,250,0), var(--paper-2) 55%);
  }
  .cmp th, .cmp td { padding: 12px 14px; font-size: 0.86rem; }
}

/* ---------- case study components ---------- */
.chip-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: 999px; text-decoration: none;
  font-family: var(--font-head); font-weight: 600; font-size: 0.85rem;
  color: var(--text-inverse);
  background: linear-gradient(#14101f, #14101f) padding-box,
              var(--grad) border-box;
  border: 1.5px solid transparent;
  transition: transform .25s ease, box-shadow .25s ease;
}
.chip:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(211,143,190,0.35); }

.cs-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.cs-split.flip > .cs-media { order: 2; }
@media (max-width: 900px) {
  .cs-split { grid-template-columns: 1fr; gap: 32px; }
  .cs-split.flip > .cs-media { order: 0; }
}
.cs-media { position: relative; }
.cs-media img { border-radius: var(--radius); width: 100%; }
.cs-media::after {
  content: ""; position: absolute; inset: 18px -18px -18px 18px;
  border-radius: var(--radius); z-index: -1;
  background: linear-gradient(135deg, rgba(211,143,190,0.25), rgba(120,122,186,0.25));
  filter: blur(2px);
}
.cs-split h2 { margin: 14px 0 18px; }
.cs-split p { color: var(--text-soft); margin-bottom: 14px; }
.dark .cs-split p { color: var(--text-inverse-soft); }
/* outbound client links — visible without shouting */
.cs-split p a, .prose p a {
  color: var(--purple); font-weight: 600; text-decoration: none;
  border-bottom: 1.5px solid rgba(120,122,186,0.35);
  transition: color .2s ease, border-color .2s ease;
}
.cs-split p a:hover, .prose p a:hover { color: var(--pink); border-color: var(--pink); }
.dark .cs-split p a { color: var(--neon-pink); border-color: rgba(243,148,216,0.4); }

/* Editorial grid: one feature tile (2x2) + uniform cells. Fixed row height
   keeps every tile flush — auto rows left holes when images differed in ratio. */
.gallery {
  display: grid; grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 250px; gap: 18px; margin-top: 52px;
}
.gallery img {
  border-radius: 16px; width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease;
}
.gallery img:hover { transform: scale(1.03); box-shadow: 0 24px 60px rgba(120,122,186,0.35); }
.g-feature { grid-column: span 2; grid-row: span 2; }
.g-cell { grid-column: span 1; grid-row: span 1; }
/* legacy aliases */
.g-wide { grid-column: span 2; }
.g-sq, .g-tall { grid-column: span 1; }
@media (max-width: 860px) {
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; }
  .g-feature { grid-column: span 2; grid-row: span 2; }
  .g-wide { grid-column: span 2; }
}
@media (max-width: 520px) {
  .gallery { grid-template-columns: 1fr; grid-auto-rows: 260px; }
  .g-feature, .g-wide { grid-column: span 1; grid-row: span 1; }
}

.pull-quote { position: relative; text-align: center; padding: 110px 0; overflow: hidden; }
.pull-quote blockquote {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.5rem); line-height: 1.25; letter-spacing: -0.02em;
  max-width: 850px; margin: 0 auto;
}
.pull-quote cite { display: block; margin-top: 26px; font-style: normal; font-size: 0.95rem; color: var(--text-inverse-soft); }
/* ---------- reel showcase: 9:16 video adverts ---------- */
.reels {
  display: grid; grid-template-columns: repeat(2, minmax(0, 340px));
  justify-content: center; gap: 40px; margin-top: 52px;
}
@media (max-width: 760px) { .reels { grid-template-columns: minmax(0, 340px); } }
.reel { margin: 0; }
.reel-frame {
  position: relative; aspect-ratio: 9 / 16; overflow: hidden;
  border-radius: 18px; background: var(--ink-2);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
.reel-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 74px; height: 74px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(11, 8, 18, 0.55);
  backdrop-filter: blur(6px);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.35), 0 8px 30px rgba(0, 0, 0, 0.5);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.reel-play::before {
  /* the triangle */
  content: ""; position: absolute; top: 50%; left: 53%;
  transform: translate(-50%, -50%);
  border-style: solid; border-width: 13px 0 13px 21px;
  border-color: transparent transparent transparent #fff;
}
.reel-play::after {
  /* breathing brand glow so it reads as "tap me" */
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  background: radial-gradient(circle, rgba(243, 148, 216, 0.35), transparent 70%);
  z-index: -1; animation: reelPulse 2.4s ease-in-out infinite;
}
.reel-play:hover {
  transform: translate(-50%, -50%) scale(1.08);
  background: rgba(120, 122, 186, 0.6);
  box-shadow: 0 0 0 1.5px var(--neon-pink), 0 8px 34px rgba(211, 143, 190, 0.5);
}
@keyframes reelPulse {
  0%, 100% { opacity: .5; transform: scale(.95); }
  50% { opacity: 1; transform: scale(1.12); }
}
.reel.playing .reel-play { display: none; }
.reel figcaption { padding: 18px 4px 0; }
.reel figcaption b {
  display: block; font-family: var(--font-head); font-size: 1.05rem;
  color: var(--text-inverse); margin-bottom: 4px;
}
.reel figcaption span { color: var(--text-inverse-soft); font-size: 0.92rem; }
.reel-note {
  text-align: center; margin-top: 26px; font-size: 0.8rem;
  color: var(--text-inverse-soft); opacity: .8;
}
@media (prefers-reduced-motion: reduce) { .reel-play::after { animation: none; } }

/* ---------- full-width screenshot showcase ---------- */
.shots { display: grid; grid-template-columns: minmax(0, 1fr); gap: 46px; margin-top: 56px; }
/* min-width:0 stops the grid item growing to its content and overflowing
   the page when the screenshot inside is wider than the viewport */
.shot { position: relative; min-width: 0; }
.shot figure {
  margin: 0; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
  background: #14101f;
}
.shot .shot-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 16px; background: rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.shot .shot-bar i {
  width: 10px; height: 10px; border-radius: 50%; display: block;
  background: rgba(255,255,255,0.18);
}
.shot .shot-bar i:first-child { background: var(--neon-pink); opacity: .7; }
.shot .shot-bar i:nth-child(2) { background: var(--neon-purple); opacity: .7; }
.shot figure img { width: 100%; display: block; }
.shot figcaption { padding: 20px 4px 0; }
.shot figcaption b {
  display: block; font-family: var(--font-head); font-size: 1.12rem;
  color: var(--text-inverse); margin-bottom: 6px;
}
.shot figcaption span { color: var(--text-inverse-soft); font-size: 0.95rem; }
.shot-note {
  display: inline-block; margin-top: 14px; font-size: 0.78rem;
  color: var(--text-inverse-soft); opacity: .75;
  border-left: 2px solid var(--purple); padding-left: 10px;
}
@media (min-width: 900px) { .shots { gap: 60px; } }

/* Wide screenshots stay legible on phones: pan them rather than shrink to 23%.
   Must sit after the base .shot rules above to win the cascade. */
@media (max-width: 860px) {
  .shots { gap: 34px; }
  .shot figure { overflow: hidden auto; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .shot figure img { width: 760px; max-width: none; height: auto; }
  .shot figcaption::after {
    content: "← swipe the screen to explore →";
    display: block; margin-top: 10px; font-size: 0.76rem;
    color: var(--neon-pink); opacity: .85; letter-spacing: .04em;
  }
}

.pull-quote::before {
  content: "“"; position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-head); font-size: 11rem; line-height: 1;
  background: var(--grad-bright); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; opacity: 0.35; pointer-events: none;
}

/* ---------- 3D tilt cards (adapted from Uiverse concept, brand-styled) ---------- */
.tilt, .card.tilt:hover {
  position: relative;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 160ms ease-out, box-shadow 300ms ease;
  will-change: transform;
  overflow: hidden;
}
.tilt::after {
  /* cursor-following glare + glow */
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background:
    radial-gradient(circle at var(--gx, 50%) var(--gy, 50%),
      rgba(255, 255, 255, 0.10), transparent 55%),
    radial-gradient(circle at var(--gx, 50%) var(--gy, 50%),
      rgba(211, 143, 190, 0.16), rgba(120, 122, 186, 0.08) 45%, transparent 70%);
  opacity: var(--glow, 0);
  transition: opacity 300ms ease;
  pointer-events: none;
}
.tilt.tilting { box-shadow: 0 24px 60px rgba(120, 122, 186, 0.35); }
.stat.tilt.tilting { border-color: rgba(211, 143, 190, 0.45); }
/* corner accents on dark stat badges, brand gradient */
.stat.tilt::before {
  content: ""; position: absolute; inset: 10px; border-radius: 12px;
  pointer-events: none;
  background:
    linear-gradient(var(--neon-pink), var(--neon-pink)) top left    / 14px 1.5px,
    linear-gradient(var(--neon-pink), var(--neon-pink)) top left    / 1.5px 14px,
    linear-gradient(var(--neon-purple), var(--neon-purple)) bottom right / 14px 1.5px,
    linear-gradient(var(--neon-purple), var(--neon-purple)) bottom right / 1.5px 14px;
  background-repeat: no-repeat;
  opacity: 0; transition: opacity 300ms ease;
}
.stat.tilt.tilting::before { opacity: 0.8; }
@media (prefers-reduced-motion: reduce), (hover: none) {
  .tilt { transform: none !important; }
  .tilt::after, .stat.tilt::before { display: none; }
}

/* ---------- aura (adapted from the DaisyUI aura concept, brand-toned) ----------
   Wrapper-element approach, same as the original: the wrapper IS the rotating
   ring, the card sits opaquely on top. No pseudo-element stacking to go wrong. */
@property --aura-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.aura-wrap {
  position: relative;
  padding: 2.5px;
  border-radius: calc(var(--radius) + 3px);
  background: conic-gradient(from var(--aura-angle),
    var(--neon-pink), var(--neon-purple), var(--purple),
    var(--pink), var(--neon-pink));
  animation: auraSpin 5s linear infinite;
}
.aura-wrap::before {
  /* soft glowing halo breathing behind the ring */
  content: ""; position: absolute; inset: -3px;
  border-radius: inherit;
  background: conic-gradient(from var(--aura-angle),
    var(--neon-pink), var(--neon-purple), var(--purple),
    var(--pink), var(--neon-pink));
  filter: blur(20px); opacity: 0.5;
  z-index: -1;
  animation: auraSpin 5s linear infinite;
}
.aura-wrap > * { height: 100%; }
@keyframes auraSpin { to { --aura-angle: 360deg; } }

/* text aura: solid white letters inside an illuminated neon border — the
   coloured rim hugs the glyph edges and its glow breathes pink <-> lavender */
.aura-text {
  background: none;
  -webkit-text-fill-color: #fff;
  color: #fff;
  -webkit-text-stroke: 1px rgba(243, 148, 216, 0.55);
  animation: auraEdge 2.8s ease-in-out infinite alternate;
}
@keyframes auraEdge {
  from {
    filter: drop-shadow(0 0 3px rgba(243, 148, 216, 0.8))
            drop-shadow(0 0 10px rgba(243, 148, 216, 0.45))
            drop-shadow(0 0 24px rgba(157, 140, 255, 0.3));
  }
  to {
    filter: drop-shadow(0 0 4px rgba(157, 140, 255, 0.9))
            drop-shadow(0 0 14px rgba(157, 140, 255, 0.5))
            drop-shadow(0 0 32px rgba(243, 148, 216, 0.4));
  }
}
@media (prefers-reduced-motion: reduce) {
  .aura-wrap, .aura-wrap::before { animation: none; }
  .aura-text {
    animation: none;
    filter: drop-shadow(0 0 3px rgba(243, 148, 216, 0.7))
            drop-shadow(0 0 12px rgba(157, 140, 255, 0.4));
  }
}
@media (max-width: 700px) {
  .aura-wrap::before { filter: blur(13px); }
}

/* ---------- pricing tiers ---------- */
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 56px; align-items: start; }
@media (max-width: 980px) { .tier-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }

.tier {
  position: relative; border-radius: var(--radius); padding: 36px 30px;
  background: var(--paper); border: 1px solid rgba(26,21,35,0.09);
  box-shadow: var(--shadow-soft); overflow: hidden;
}
.tier::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--grad);
}
.tier.featured {
  /* white like its siblings — the aura ring provides the emphasis */
  border-color: transparent;
  box-shadow: 0 30px 80px rgba(120, 122, 186, 0.25);
}
.tier-badge {
  display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; padding: 6px 14px; border-radius: 999px;
  background: var(--grad); color: #fff; margin-bottom: 18px;
}
.tier h3 { font-size: 1.4rem; margin-bottom: 6px; }
.tier .tier-tag { font-size: 0.95rem; color: var(--text-soft); margin-bottom: 24px; }
.tier-price {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px;
  font-family: var(--font-head); font-weight: 800; letter-spacing: -0.02em;
}
.tier-price b {
  font-size: clamp(2.1rem, 4vw, 2.8rem);
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tier-price span { font-size: 0.9rem; font-weight: 500; color: var(--text-soft); font-family: var(--font-body); }
.tier-hosting {
  margin: 14px 0 24px; padding: 14px 16px; border-radius: 12px;
  background: rgba(120,122,186,0.08); font-size: 0.92rem;
}
.tier-hosting b { font-family: var(--font-head); font-size: 1.15rem; }
.tier-feats { list-style: none; display: grid; gap: 12px; margin: 0 0 28px; }
.tier-feats li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.94rem; color: var(--text-soft); }
.tier-feats li::before {
  content: "✓"; flex: none; width: 20px; height: 20px; border-radius: 50%; margin-top: 2px;
  background: linear-gradient(135deg, rgba(211,143,190,0.2), rgba(120,122,186,0.2));
  color: var(--purple); font-size: 0.7rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.tier .btn { width: 100%; justify-content: center; }
.tier-note { font-size: 0.78rem; color: var(--text-soft); margin-top: 16px; line-height: 1.5; }

/* ---------- spend calculator ---------- */
.calc-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 30px; margin-top: 48px; align-items: start; }
@media (max-width: 900px) { .calc-grid { grid-template-columns: 1fr; } }
.spend-row {
  display: flex; gap: 16px; align-items: flex-start; width: 100%; text-align: left;
  padding: 18px 20px; margin-bottom: 12px; border-radius: 14px; cursor: pointer;
  background: var(--paper); border: 1.5px solid rgba(26,21,35,0.1);
  font: inherit; color: inherit;
  transition: border-color .25s ease, background .25s ease, transform .2s ease;
}
.spend-row:hover { transform: translateY(-2px); border-color: rgba(120,122,186,0.4); }
.spend-row[aria-pressed="true"] {
  border-color: var(--purple);
  background: linear-gradient(rgba(211,143,190,0.06), rgba(120,122,186,0.06));
}
.spend-check {
  flex: none; width: 22px; height: 22px; border-radius: 6px; margin-top: 2px;
  border: 1.5px solid rgba(26,21,35,0.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; color: #fff; transition: all .25s ease;
}
.spend-row[aria-pressed="true"] .spend-check { background: var(--grad); border-color: transparent; }
.spend-row[aria-pressed="true"] .spend-check::after { content: "✓"; }
.spend-label { font-weight: 600; font-size: 0.98rem; display: block; }
.spend-desc { font-size: 0.85rem; color: var(--text-soft); margin-top: 4px; }
.spend-amt { margin-left: auto; font-family: var(--font-head); font-weight: 700; white-space: nowrap; padding-left: 12px; }

.calc-total {
  position: sticky; top: 100px;
  border-radius: var(--radius); padding: 32px 28px;
  background: var(--ink); color: var(--text-inverse);
  border: 1px solid rgba(211,143,190,0.3);
  box-shadow: 0 24px 60px rgba(120,122,186,0.25);
}
.calc-total .calc-eyebrow {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--neon-pink); margin-bottom: 12px;
}
.calc-big {
  font-family: var(--font-head); font-size: clamp(2.4rem, 5vw, 3.2rem); font-weight: 800; letter-spacing: -0.02em;
  background: var(--grad-bright); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.calc-sub { font-size: 0.9rem; color: var(--text-inverse-soft); }
.calc-year {
  margin-top: 22px; padding: 16px; border-radius: 12px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.09);
}
.calc-year b { display: block; font-family: var(--font-head); font-size: 1.6rem; font-weight: 800; color: #fff; }
.calc-fine { font-size: 0.78rem; color: var(--text-inverse-soft); margin-top: 18px; line-height: 1.6; }

/* ---------- comparison table ---------- */
.cmp-wrap { overflow-x: auto; margin-top: 48px; border-radius: var(--radius); border: 1px solid rgba(26,21,35,0.1); }
.cmp { width: 100%; min-width: 640px; border-collapse: collapse; background: var(--paper); }
.cmp th, .cmp td { padding: 15px 18px; text-align: center; font-size: 0.92rem; }
.cmp th:first-child, .cmp td:first-child { text-align: left; }
.cmp thead th {
  font-family: var(--font-head); font-size: 0.9rem; border-bottom: 1px solid rgba(26,21,35,0.12);
  background: linear-gradient(rgba(211,143,190,0.09), rgba(120,122,186,0.09));
  border-top: 3px solid transparent; border-image: var(--grad) 1;
}
.cmp thead th:first-child { background: none; border-image: none; color: var(--text-soft); font-weight: 600; }
.cmp tbody tr:nth-child(even) { background: var(--paper-2); }
.cmp tbody td { border-top: 1px solid rgba(26,21,35,0.07); color: var(--text-soft); }
.cmp tbody td:first-child { color: var(--text); font-weight: 500; }
.cmp .yes { color: var(--purple); font-weight: 700; }
.cmp .no { color: rgba(26,21,35,0.22); }

/* ---------- growth funnel infographic (home finance section, dark) ---------- */
.funnel { max-width: 560px; }
.funnel-bar {
  width: var(--w, 100%); min-width: 210px;
  padding: 15px 20px; border-radius: 12px;
  background: linear-gradient(100deg, rgba(211,143,190,0.30), rgba(120,122,186,0.30));
  border: 1px solid rgba(211,143,190,0.35);
  font-family: var(--font-head); font-weight: 600; font-size: 0.97rem;
  color: var(--text-inverse); white-space: nowrap;
}
.funnel-win {
  background: var(--grad); border-color: transparent; color: #fff;
  box-shadow: 0 14px 44px rgba(211,143,190,0.35);
}
.funnel-leak {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 6px 0 6px 14px; padding: 8px 0 8px 16px;
  border-left: 2px dashed rgba(243,148,216,0.45);
  font-size: 0.87rem; color: var(--text-inverse-soft); line-height: 1.5;
}
.funnel-leak b { color: var(--neon-pink); font-weight: 600; }
.funnel-leak .drip { flex: none; margin-top: 2px; }
.funnel-note { margin-top: 22px; font-size: 0.9rem; color: var(--text-inverse-soft); max-width: 480px; }
@media (max-width: 700px) {
  .funnel-bar { font-size: 0.88rem; padding: 13px 16px; }
  .funnel-leak { font-size: 0.83rem; }
}

/* ---------- process steps on light backgrounds (audit timeline) ---------- */
.light-sec .process-step, .tint-sec .process-step { border-color: rgba(26,21,35,0.1); }
.light-sec .process-step p, .tint-sec .process-step p { color: var(--text-soft); }

/* ---------- leak calculator (growth audit page, dark) ---------- */
.leak-calc { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center; margin-top: 52px; }
@media (max-width: 900px) { .leak-calc { grid-template-columns: 1fr; gap: 36px; } }
.leak-field { margin-bottom: 26px; }
.leak-field:last-child { margin-bottom: 0; }
.leak-field label {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  font-weight: 600; font-size: 0.93rem; color: var(--text-inverse); margin-bottom: 10px;
}
.leak-field output {
  font-family: var(--font-head); font-weight: 700; font-size: 1.05rem;
  color: var(--neon-pink); white-space: nowrap;
}
.leak-field input[type="range"] {
  width: 100%; height: 6px; cursor: pointer; accent-color: var(--pink);
}
.leak-out {
  border-radius: var(--radius); padding: 36px 32px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(211,143,190,0.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 24px 60px rgba(0,0,0,0.35);
}
.leak-eyebrow {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--neon-pink); margin-bottom: 12px;
}
.leak-big {
  font-family: var(--font-head); font-size: clamp(2.2rem, 4.6vw, 3rem); font-weight: 800;
  letter-spacing: -0.02em;
  background: var(--grad-bright); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.leak-sub { color: var(--text-inverse-soft); font-size: 0.92rem; margin-top: 8px; }
.leak-month {
  margin-top: 22px; padding: 15px 18px; border-radius: 12px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.09);
  font-size: 0.88rem; color: var(--text-inverse-soft);
}
.leak-month b { display: block; font-family: var(--font-head); font-size: 1.3rem; font-weight: 800; color: #fff; }
.leak-fine { font-size: 0.78rem; color: var(--text-inverse-soft); margin-top: 18px; line-height: 1.6; }

/* ---------- growth story: bottleneck → released → result (case studies) ---------- */
.gstory {
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 16px; align-items: stretch; margin-top: 46px;
}
.gstory-step {
  padding: 30px 26px; border-radius: var(--radius);
  background: var(--paper); border: 1px solid rgba(26,21,35,0.08);
  box-shadow: var(--shadow-soft);
}
.gstory-icon {
  width: 46px; height: 46px; border-radius: 12px; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(211,143,190,0.16), rgba(120,122,186,0.16));
  color: var(--purple);
}
.gstory-icon svg { width: 24px; height: 24px; }
.gstory-step small {
  display: block; text-transform: uppercase; letter-spacing: 0.14em;
  font-size: 0.7rem; font-weight: 700; color: var(--text-soft);
}
.gstory-step p { margin-top: 10px; color: var(--text); font-size: 0.97rem; line-height: 1.65; }
.gstory-arrow { align-self: center; color: var(--pink); font-size: 1.5rem; line-height: 1; }
.gstory-win { border-color: rgba(211,143,190,0.42); box-shadow: 0 26px 60px rgba(120,122,186,0.20); }
.gstory-win .gstory-icon { background: var(--grad); color: #fff; }
@media (max-width: 900px) {
  .gstory { grid-template-columns: 1fr; gap: 10px; }
  .gstory-arrow { transform: rotate(90deg); justify-self: center; padding: 4px 0; }
}

/* ---------- symptom cards: the bottleneck a service releases ---------- */
.symptom-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 46px; }
@media (max-width: 980px) { .symptom-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .symptom-grid { grid-template-columns: 1fr; } }
.symptom {
  padding: 30px 26px; border-radius: var(--radius);
  background: var(--paper); border: 1px solid rgba(26,21,35,0.08);
  box-shadow: var(--shadow-soft);
}
.symptom-mark {
  width: 34px; height: 34px; border-radius: 50%; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(211,143,190,0.18), rgba(120,122,186,0.18));
  color: var(--purple); font-family: var(--font-head); font-weight: 800; font-size: 1rem;
}
.symptom b {
  display: block; font-family: var(--font-head); font-weight: 600;
  font-size: 1.02rem; color: var(--text); line-height: 1.45;
}
.symptom p {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(26,21,35,0.08);
  color: var(--text-soft); font-size: 0.94rem; line-height: 1.65;
}
.symptom p::before { content: "→ "; color: var(--pink); font-weight: 700; }

/* ---------- audit scorecard: what the deliverable looks like ---------- */
.scorecard {
  border-radius: var(--radius); padding: 26px 24px;
  background: var(--ink); color: var(--text-inverse);
  border: 1px solid rgba(211,143,190,0.28);
  box-shadow: 0 26px 60px rgba(0,0,0,0.35);
}
.sc-head {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-head); font-weight: 700; font-size: 0.95rem;
  padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.sc-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--grad-bright); flex: none; }
.sc-row { padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,0.07); }
.sc-row-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sc-row b { font-size: 0.95rem; }
.sc-row p { margin-top: 6px; font-size: 0.86rem; color: var(--text-inverse-soft); line-height: 1.55; }
.sc-pill {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px; white-space: nowrap; flex: none;
}
.sc-crit { background: var(--grad); color: #fff; }
.sc-warn { background: rgba(157,140,255,0.22); color: #c9beff; border: 1px solid rgba(157,140,255,0.4); }
.sc-ok { background: rgba(255,255,255,0.08); color: var(--text-inverse-soft); border: 1px solid rgba(255,255,255,0.14); }
.sc-fix {
  margin-top: 18px; padding: 16px 18px; border-radius: 12px; font-size: 0.9rem;
  background: linear-gradient(100deg, rgba(211,143,190,0.18), rgba(120,122,186,0.18));
  border: 1px solid rgba(211,143,190,0.35);
}
.sc-fix b {
  display: block; color: var(--neon-pink); font-size: 0.72rem;
  letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 6px;
}
.sc-fine { font-size: 0.75rem; color: var(--text-inverse-soft); margin-top: 14px; line-height: 1.55; }

/* ---------- form submission states ---------- */
/* Off-screen rather than display:none — bots that skip hidden fields still
   fill this one, and it stays out of the tab order for real visitors. */
.form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status:empty { display: none; }
.form-status {
  font-size: 0.9rem; line-height: 1.6; padding: 13px 16px; border-radius: 12px;
}
.form-status.ok {
  color: #12674c; background: rgba(18, 103, 76, 0.09); border: 1px solid rgba(18, 103, 76, 0.28);
}
.form-status.err {
  color: #9c2942; background: rgba(156, 41, 66, 0.08); border: 1px solid rgba(156, 41, 66, 0.28);
}
.form-status a { color: inherit; font-weight: 600; }