:root{
    /* — Brand purple+pink, refined for premium feel — */
    --indigo: #8A6BFF;             /* brighter purple */
    --indigo-deep: #5436E0;
    --indigo-glow: rgba(138,107,255,0.22);
    --pink: #FF7FB5;               /* brighter, juicier */
    --pink-deep: #C9558C;
    --pink-soft: #FFD1E6;
    --pink-glow: rgba(255,127,181,0.22);

    /* Premium accent — same brand hue family but used as a hairline / detail color */
    --accent: var(--pink);
    --accent-soft: var(--pink-soft);
    --accent-glow: var(--pink-glow);

    --bg:   #0F0D17;
    --bg-2: #1A1726;
    --bg-3: #25213A;
    --bg-elev: linear-gradient(180deg, rgba(255,255,255,0.018) 0%, rgba(255,255,255,0) 100%);

    --fg:   #F5F1E6;
    --fg-2: rgba(245,241,230,0.82);
    --fg-3: rgba(245,241,230,0.62);
    --fg-4: rgba(245,241,230,0.42);

    --line:        rgba(245,241,230,0.12);
    --line-strong: rgba(245,241,230,0.22);

    /* Soft inner-highlight used on premium surfaces */
    --highlight-top: inset 0 1px 0 rgba(255,255,255,0.045);
    --highlight-soft: inset 0 1px 0 rgba(255,255,255,0.035), inset 0 0 0 1px rgba(255,255,255,0.012);

    /* legacy aliases */
    --cream: #F5F1E6;
    --cream-2: #1A1726;
    --ink: #F5F1E6;
    --ink-2: rgba(245,241,230,0.82);
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family: 'Inter', system-ui, sans-serif;
    background: var(--bg);
    color: var(--fg);
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "ss01","cv11","ss03","cv09";
    overflow-x:hidden;
    font-weight: 400;
    line-height: 1.5;
    position: relative;
  }
  /* Film grain — fixed, sits above content, soft overlay tint */
  body::before{
    content:'';
    position:fixed; inset:0;
    pointer-events:none;
    z-index: 9990;
    opacity: 0.055;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 220px 220px;
  }
  /* Subtle viewport vignette to focus content */
  body::after{
    content:'';
    position:fixed; inset:0;
    pointer-events:none;
    z-index: 9991;
    background: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(0,0,0,0.30) 100%);
  }
  .mono{font-family:'JetBrains Mono', ui-monospace, monospace; font-weight:400; font-feature-settings:"ss02","zero"}
  .serif{font-family:'Instrument Serif', serif; font-style:italic; font-weight:400}
  .serif-display{font-family:'Instrument Serif', serif; font-style:normal; font-weight:400; letter-spacing:-0.01em}
  /* Editorial body serif — optical-size aware, designed for long-form readability */
  .editorial{font-family:'Newsreader', 'Instrument Serif', Georgia, serif; font-weight:400; font-style:normal; letter-spacing:-0.005em}
  .editorial-italic{font-family:'Newsreader', 'Instrument Serif', Georgia, serif; font-weight:400; font-style:italic; letter-spacing:-0.005em}
  h1,h2,h3,h4{font-weight:500; letter-spacing:-0.022em; margin:0}
  h1, h2 { text-rendering: optimizeLegibility; font-feature-settings: "ss01","cv11","ss03"; }
  p{margin:0}
  ::selection{background: var(--pink); color: var(--bg)}
  a{color:inherit}
  button{font-family:inherit}

  /* Premium card surface — subtle linear gradient + inner top highlight */
  .surface{
    background: linear-gradient(180deg, rgba(255,255,255,0.022) 0%, rgba(255,255,255,0) 60%), var(--bg-2);
    border: 1px solid var(--line);
    box-shadow: var(--highlight-top), 0 1px 0 rgba(0,0,0,0.4), 0 30px 60px -40px rgba(0,0,0,0.6);
  }
  .surface-elev{
    background: linear-gradient(180deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0) 55%), var(--bg-2);
    border: 1px solid var(--line-strong);
    box-shadow: var(--highlight-top), 0 1px 0 rgba(0,0,0,0.4), 0 40px 80px -40px rgba(0,0,0,0.65);
  }

  /* ───── Reveal on scroll ───── */
  .reveal{opacity:0; transform:translateY(20px); transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1)}
  .reveal.in{opacity:1; transform:translateY(0)}
  .reveal-up{opacity:0; transform:translateY(36px); transition: opacity 1s cubic-bezier(.2,.8,.2,1), transform 1s cubic-bezier(.2,.8,.2,1)}
  .reveal-up.in{opacity:1; transform:translateY(0)}
  .reveal.no-anim, .reveal-up.no-anim{transition:none}

  /* ───── Body fade-in on splash dismiss — smooth handoff ───── */
  #root{opacity:0; transition: opacity .55s cubic-bezier(.2,.8,.2,1)}
  body.app-ready #root{opacity:1}

  /* ───── Scroll-progress bar — pinned to top, fills with scroll ───── */
  .scroll-progress{
    position:fixed; top:0; left:0; right:0; height:2px;
    background: transparent;
    z-index: 9995;
    pointer-events:none;
  }
  .scroll-progress-fill{
    height:100%; width:0%;
    background: linear-gradient(90deg, var(--indigo) 0%, var(--pink) 100%);
    box-shadow: 0 0 12px var(--pink-glow);
    transition: width .12s linear;
  }

  /* ───── Reduced motion ───── */
  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
    }
    .word{opacity:1 !important; transform:none !important}
    .reveal, .reveal-up{opacity:1 !important; transform:none !important}
  }

  /* ───── Marquee ───── */
  @keyframes marquee {
    from { transform: translateX(0) }
    to   { transform: translateX(-50%) }
  }
  .marquee-track{display:flex; gap:64px; animation: marquee 50s linear infinite; width:max-content}
  .marquee-track:hover{animation-play-state:paused}
  @keyframes marquee-reverse {
    from { transform: translateX(-50%) }
    to   { transform: translateX(0) }
  }
  .marquee-track-rev{display:flex; gap:64px; animation: marquee-reverse 50s linear infinite; width:max-content}
  .marquee-track-rev:hover{animation-play-state:paused}

  /* Credibility — micro accent bar + breathing dot */
  @keyframes credBreathe {
    0%,100%{opacity:.55; transform:scale(1)}
    50%{opacity:1; transform:scale(1.35)}
  }
  .cred-pulse{display:inline-block; width:6px; height:6px; border-radius:99px; animation: credBreathe 2.6s ease-in-out infinite}
  .cred-bar{display:block; height:2px; border-radius:2px; transform-origin:left center; animation: barGrow 1.2s cubic-bezier(.2,.8,.2,1) both}
  @keyframes barGrow { from{ transform:scaleX(0) } to{ transform:scaleX(1) } }

  /* Logo card lift */
  .logo-card{transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease, border-color .5s ease}
  .logo-card:hover{transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,0.35), 0 0 0 1px var(--pink-glow); border-color: var(--pink-glow)}

  /* Logo marquee: keep auto-scrolling on all sizes; just tighten gap on mobile */
  .logo-marquee-wrap{ position: relative; }
  @media (max-width: 900px){
    .logo-marquee-track{
      gap: 18px !important;
      animation-duration: 38s !important;
    }
  }

  /* Credibility: grid on desktop, marquee on mobile */
  @media (max-width: 900px){
    .cred-grid{ display: none !important; }
    .cred-marquee{ display: block !important; }
  }

  /* ───── Float / orb glow ───── */
  @keyframes floaty {
    0%,100%{transform:translateY(0) rotate(0)}
    50%{transform:translateY(-16px) rotate(4deg)}
  }
  @keyframes pulse-glow {
    0%,100%{opacity:.4; transform:scale(1)}
    50%{opacity:.6; transform:scale(1.06)}
  }

  /* ───── Underline reveal ───── */
  .link-underline{position:relative; text-decoration:none; padding-bottom:2px}
  .link-underline::after{content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .6s cubic-bezier(.2,.8,.2,1)}
  .link-underline:hover::after{transform:scaleX(1)}
  .link-underline.active::after{transform:scaleX(1); background:var(--pink)}

  /* ───── Refined hairline divider — used in eyebrows ───── */
  .hairline{display:inline-block; width:24px; height:1px; background:linear-gradient(90deg, var(--pink) 0%, rgba(255,127,181,0.15) 100%); vertical-align:middle}

  /* ───── Magnetic button ───── */
  .mag{transition: transform .3s cubic-bezier(.2,.8,.2,1)}

  /* ───── Hero gradient blobs ───── */
  .blob{position:absolute; border-radius:9999px; filter:blur(80px); pointer-events:none}

  /* ───── Word-by-word stagger ───── */
  .word{display:inline-block; opacity:0; transform:translateY(40%); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1)}
  .in .word{opacity:1; transform:translateY(0)}

  /* ───── Card hover lift ───── */
  .card-lift{
    transition: transform .6s cubic-bezier(.2,.8,.2,1),
                border-color .35s ease,
                box-shadow .6s cubic-bezier(.2,.8,.2,1);
    box-shadow: var(--highlight-top), 0 1px 0 rgba(0,0,0,0.4), 0 24px 50px -32px rgba(0,0,0,0.55);
  }
  .card-lift:hover{
    transform: translateY(-6px);
    border-color: var(--line-strong);
    box-shadow: var(--highlight-top), 0 1px 0 rgba(0,0,0,0.4), 0 50px 90px -40px rgba(0,0,0,0.75);
  }

  /* ───── Cursor caret blink (purple) ───── */
  @keyframes blink { 50% { opacity:0 } }
  .caret{display:inline-block; width:.36em; height:.85em; background:var(--indigo); margin-left:.12em; vertical-align:-.06em; animation: blink 1.05s step-end infinite; box-shadow: 0 0 18px var(--indigo-glow)}

  /* ───── Hero scroll cue ───── */
  @keyframes scrollHint {
    0% { transform: translateX(-100%) }
    60%,100% { transform: translateX(280%) }
  }

  /* ───── Ken Burns slow zoom ───── */
  @keyframes kenburns {
    from { transform: scale(1.04) translate(0,0) }
    to   { transform: scale(1.16) translate(-1.5%, -1%) }
  }

  /* ───── Premium polish ───── */
  /* (text-rendering set on h1/h2 above; nothing to add here) */

  /* ───── Mobile responsive overrides ───── */
  @media (max-width: 900px){
    body{ overflow-x: hidden; }

    /* Container padding (React renders padding:'0 40px' as 'padding: 0px 40px') */
    [style*="padding: 0px 40px"]{
      padding-left: 22px !important;
      padding-right: 22px !important;
    }
    [style*="padding: 18px 40px"]{
      padding-left: 18px !important;
      padding-right: 18px !important;
      padding-top: 14px !important;
      padding-bottom: 14px !important;
    }
    [style*="padding: 10px 40px"]{
      padding-left: 18px !important;
      padding-right: 18px !important;
    }

    /* Two-column grids → single column */
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns: 1fr 1.2fr"],
    [style*="grid-template-columns: 1fr 1.4fr"],
    [style*="grid-template-columns: 1.1fr 1fr"],
    [style*="grid-template-columns: 1.2fr 1fr"],
    [style*="grid-template-columns: 1.4fr 1fr"],
    [style*="grid-template-columns: 5fr 7fr"],
    [style*="grid-template-columns: 260px 1fr"],
    [style*="grid-template-columns: 200px 1fr"]{
      grid-template-columns: 1fr !important;
      gap: 28px !important;
    }

    /* Three-column grid → single column */
    [style*="grid-template-columns: 1fr 1fr 1fr"]{
      grid-template-columns: 1fr !important;
      gap: 18px !important;
    }

    /* Four-column footer grid → 2 cols */
    [style*="grid-template-columns: 2fr 1fr 1fr 1fr"]{
      grid-template-columns: 1fr 1fr !important;
      gap: 32px 24px !important;
    }

    /* Credibility 4-col → 2-col */
    [style*="grid-template-columns: repeat(4, 1fr)"]{
      grid-template-columns: 1fr 1fr !important;
      gap: 16px 12px !important;
      row-gap: 22px !important;
    }

    /* "Who we work with" table row 80px 1.2fr 2fr 1fr → stacked */
    [style*="grid-template-columns: 80px 1.2fr 2fr 1fr"]{
      grid-template-columns: 1fr !important;
      gap: 8px !important;
      padding: 20px 4px !important;
    }
    [style*="grid-template-columns: 80px 1.2fr 2fr 1fr"] > *:last-child{
      text-align: left !important;
    }

    /* Hero typography tighter */
    section h1{ font-size: clamp(36px, 9vw, 56px) !important; }
    section h2{ font-size: clamp(26px, 6.5vw, 38px) !important; line-height: 1.12 !important; }

    /* Reduce huge vertical padding on sections — match React's '140px 0' → '140px 0px' */
    section[style*="padding: 140px 0px"],
    section[style*="padding: 120px 0px"],
    section[style*="padding: 100px 0px"]{
      padding-top: 56px !important;
      padding-bottom: 56px !important;
    }
    section[style*="padding: 80px 0px 100px"],
    section[style*="padding: 60px 0px 100px"],
    section[style*="padding: 60px 0px 120px"]{
      padding-top: 40px !important;
      padding-bottom: 56px !important;
    }
    section[style*="padding: 72px 0px 76px"]{
      padding-top: 48px !important;
      padding-bottom: 48px !important;
    }

    /* PageOpener tighter on mobile */
    section[style*="padding: 160px 0px 80px"]{
      padding: 110px 0px 56px !important;
      min-height: 56vh !important;
    }
    section[style*="min-height: 72vh"]{ min-height: 56vh !important; }

    /* Footer — tight, compact on mobile */
    footer[style*="padding: 72px 0px 28px"]{
      padding-top: 40px !important;
      padding-bottom: 18px !important;
    }
    footer [style*="padding-bottom: 48px"]{
      padding-bottom: 28px !important;
    }
    footer [style*="grid-template-columns: 2fr 1fr 1fr 1fr"]{
      grid-template-columns: 1fr 1fr !important;
      gap: 28px 20px !important;
    }
    /* Logo block spans both columns on mobile */
    footer [style*="grid-template-columns: 2fr 1fr 1fr 1fr"] > div:first-child{
      grid-column: 1 / -1 !important;
      padding-bottom: 8px !important;
      border-bottom: 1px solid var(--line) !important;
      margin-bottom: 8px !important;
    }
    /* Footer logo block smaller */
    footer [style*="font-size: 14px"][style*="line-height: 1.6"]{
      font-size: 13px !important;
      line-height: 1.5 !important;
    }
    footer p{ font-size: 13px !important; }
    /* Footer column heads — quieter on mobile */
    footer .mono[style*="margin-bottom: 22px"]{
      margin-bottom: 12px !important;
      font-size: 9.5px !important;
      letter-spacing: 0.24em !important;
    }
    /* Footer links — smaller, lighter, more air */
    footer a[style*="font-size: 13px"]{
      font-size: 12.5px !important;
      letter-spacing: 0 !important;
    }
    footer [style*="gap: 13px"]{ gap: 10px !important; }
    footer [style*="font-size: 13.5"]{ font-size: 12.5px !important; }
    footer a{ padding: 1px 0; }
    /* Footer bottom row */
    footer [style*="padding-top: 24px"]{ padding-top: 18px !important; }

    /* Footer bottom row stacks + readable */
    footer [style*="justify-content: space-between"][style*="align-items: center"]{
      flex-direction: column !important;
      gap: 12px !important;
      align-items: flex-start !important;
      text-align: left !important;
    }

    /* Nav: hide center links + ghost CTA, show burger */
    .nav-links{ display: none !important; }
    .nav-cta{ display: none !important; }
    .nav-burger{ display: inline-flex !important; }

    /* Full-screen mobile menu — show only on mobile */
    .nav-fullscreen{ display: flex !important; }

    /* Hero indicators (top right) → move under nav, smaller */
    .hero-indicators{ top: 70px !important; right: 18px !important; }

    /* Scroll cue hide on mobile */
    .hero-scroll-cue{ display: none !important; }

    /* FAQ sticky → static */
    [style*="position: sticky"][style*="top: 120px"]{
      position: static !important;
    }

    /* CTA strip right column → left-align */
    [style*="align-items: flex-end"][style*="flex-direction: column"]{
      align-items: flex-start !important;
    }
    [style*="justify-content: flex-end"][style*="flex-wrap: wrap"]{
      justify-content: flex-start !important;
    }

    /* Hero section padding */
    section[id="top"]{
      padding-top: 72px !important;
      padding-bottom: 80px !important;
      min-height: 88vh !important;
    }
    section[id="top"] h1{ margin-bottom: 24px !important; }

    /* Reduce side blob bleed */
    .blob{ filter: blur(60px) !important; }

    /* Card minimum heights — let content drive */
    [style*="min-height: 380px"]{ min-height: auto !important; }
    [style*="min-height: 340px"]{ min-height: auto !important; }
    [style*="min-height: 520px"]{ min-height: 420px !important; }

    /* Tags / badges full-bleed safe */
    img{ max-width: 100%; height: auto; }

    /* Cinematic break — softer min height */
    section[style*="min-height: 520px"]{ min-height: 380px !important; padding: 60px 0 !important; }

    /* CTA Strip — stack copy + action, action sits below, left aligned, smaller */
    [style*="grid-template-columns: 1.4fr 1fr"]{
      grid-template-columns: 1fr !important;
      gap: 36px !important;
    }
    [style*="grid-template-columns: 1.4fr 1fr"] > div:last-child [style*="align-items: flex-end"],
    section [style*="flex-direction: column"][style*="align-items: flex-end"]{
      align-items: flex-start !important;
      gap: 14px !important;
      padding-top: 4px !important;
    }
    /* CTA button: shrink "lg" button down on mobile */
    section [style*="padding: 17px 30px"][style*="font-size: 14"]{
      padding: 11px 22px !important;
      font-size: 13px !important;
    }
    /* CTA heading: tighter on mobile */
    section h2[style*="font-size: clamp(40px, 5vw, 76px)"]{
      font-size: clamp(32px, 8vw, 44px) !important;
      line-height: 1.06 !important;
    }

    /* Founder image aspect */
    [style*="aspect-ratio: 4 / 5"]{ max-width: 380px; margin: 0 auto; }

    /* Service card padding */
    [style*="padding: 34px 34px 28px"]{ padding: 26px 24px 24px !important; }
    [style*="padding: 40px 40px 32px"]{ padding: 28px 24px 28px !important; }
    [style*="padding: 40px 40px"]{ padding: 26px 22px !important; }
    [style*="padding: 48px 48px"]{ padding: 28px 22px !important; }
    [style*="padding: 28px 30px"]{ padding: 22px 22px !important; }
    [style*="padding: 22px 22px 24px"]{ padding: 18px 18px 20px !important; }

    /* Tighter font sizes on heavy elements */
    [style*="font-size: 18.5"]{ font-size: 16px !important; }
    [style*="font-size: 17px"]{ font-size: 15.5px !important; }
    [style*="font-size: 16.5"]{ font-size: 15px !important; }

    /* Marquee — slight smaller logos */
    .marquee-track{ gap: 28px !important; }

    /* Bigger gap collapse */
    [style*="gap: 80px"]{ gap: 36px !important; }
    [style*="gap: 64px"]{ gap: 32px !important; }
    [style*="gap: 60px"]{ gap: 28px !important; }
    [style*="gap: 48px"]{ gap: 28px !important; }
  }

  @media (max-width: 520px){
    [style*="grid-template-columns: repeat(4, 1fr)"]{
      grid-template-columns: 1fr 1fr !important;
    }
    [style*="grid-template-columns: 2fr 1fr 1fr 1fr"]{
      grid-template-columns: 1fr 1fr !important;
    }
    /* Smaller hero text on very narrow */
    section h1{ font-size: clamp(32px, 10vw, 48px) !important; line-height: 1.04 !important; }
    /* Stat numbers smaller */
    [style*="font-size: 24px"][style*="font-weight: 500"]{ font-size: 22px !important; }
  }