/* ====================================================================
     DESIGN TOKENS
  ==================================================================== */
  :root {
    --bg: #F6F4FD;
    --surface: #FFFFFF;
    --text: #0E1024;
    --text-muted: #6B7090;
    --text-soft: #8A8EAD;
    --border: #EAE6F8;
    --border-soft: #F0ECFA;

    --primary: #6D4AFF;
    --primary-dark: #5935E5;
    --primary-light: #A78BFA;
    --primary-soft: #EDE7FF;
    --primary-softer: #F5F1FF;

    /* Logo gradient — sampled from uploaded logo-Photoroom.png */
    --logo-blue: #4E75FA;
    --logo-mid:  #6366F1;
    --logo-purple: #8B5CF6;

    --accent-yellow: #F5B400;
    --accent-yellow-bg: #FFF3D1;
    --accent-green: #10B87A;
    --accent-green-bg: #D7F3E4;
    --accent-blue: #3B82F6;
    --accent-blue-bg: #DEEAFF;
    --accent-pink: #EC4899;
    --accent-red: #EF4444;

    --shadow-sm: 0 2px 8px rgba(20, 16, 48, 0.04);
    --shadow-md: 0 8px 24px rgba(20, 16, 48, 0.06);
    --shadow-lg: 0 20px 48px rgba(60, 40, 150, 0.08);
    --shadow-cta: 0 12px 28px rgba(109, 74, 255, 0.35), 0 2px 8px rgba(109, 74, 255, 0.2);

    --gradient-text: linear-gradient(135deg, #6D4AFF 0%, #A78BFA 50%, #7C3AED 100%);
    --gradient-logo: linear-gradient(92deg, #4E75FA 0%, #6366F1 48%, #8B5CF6 100%);
    --gradient-cta: linear-gradient(135deg, #6D4AFF 0%, #7C3AED 100%);
    --gradient-bg: radial-gradient(ellipse at top, #F1EDFC 0%, #F8F6FD 50%, #FDFCFF 100%);

    --radius-pill: 999px;
    --radius-lg: 24px;
    --radius-md: 16px;
    --radius-sm: 12px;

    --ease-liquid: cubic-bezier(0.76, 0, 0.24, 1);
    --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);

    --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-display: 'Bricolage Grotesque', 'Plus Jakarta Sans', sans-serif;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  *::selection { background: var(--primary-soft); color: var(--primary-dark); }
  html { scroll-behavior: smooth; }

  body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text);
    font-weight: 400;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
  }

  img { max-width: 100%; display: block; user-select: none; }
  button { font-family: inherit; border: none; cursor: pointer; background: none; }
  a { color: inherit; text-decoration: none; }

  /* ====================================================================
     PAGE WRAPPER + AMBIENT BLOBS
  ==================================================================== */
  .page-wrap {
    background: var(--gradient-bg);
    position: relative;
    overflow: hidden;
  }
  .page-wrap::before,
  .page-wrap::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
    z-index: 0;
    pointer-events: none;
  }
  .page-wrap::before {
    top: -100px; left: -150px;
    width: 400px; height: 400px;
    background: radial-gradient(circle, #C4B5FD 0%, transparent 70%);
  }
  .page-wrap::after {
    top: 300px; right: -150px;
    width: 420px; height: 420px;
    background: radial-gradient(circle, #DDD6FE 0%, transparent 70%);
  }

  /* ====================================================================
     WATER DROP / LIQUID GLASS — SHARED
     ================================================================
     The `.water` class gives any container:
       - Heavy transparency (see-through)
       - SVG-based turbulence distortion (real lens refraction — via
         `backdrop-filter: url(#water-lens)`)
       - Saturation/contrast pump for a "magnified" optical feel
       - Specular meniscus highlights (inset + ::before/::after)
     Applied to both the navbar and the features capsule.
  ==================================================================== */
  .water {
    position: relative;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.32) 0%,
      rgba(255, 255, 255, 0.12) 55%,
      rgba(255, 255, 255, 0.20) 100%
    );
    /* url(#water-lens) = turbulence-displacement distortion
       saturate/contrast boost = magnifying-lens optical feel
       2.5px blur = refraction softness without frosting */
    backdrop-filter: url(#water-lens) saturate(170%) contrast(108%) blur(2.5px);
    -webkit-backdrop-filter: saturate(170%) contrast(108%) blur(2.5px); /* Safari fallback, no url() */
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow:
      /* Bright meniscus along the top — surface tension of water */
      inset 0 2px 0 rgba(255, 255, 255, 1),
      /* Secondary inner highlight */
      inset 0 4px 12px rgba(255, 255, 255, 0.35),
      /* Subtle bottom reflection meniscus */
      inset 0 -1.5px 0 rgba(255, 255, 255, 0.5),
      inset 0 -6px 14px rgba(180, 200, 255, 0.15),
      /* Inner colored body — magnified ambient tint */
      inset 0 0 30px rgba(160, 180, 255, 0.22),
      /* Outer drop-shadow — droplet resting on the page */
      0 10px 32px rgba(70, 40, 160, 0.14),
      0 2px 8px rgba(70, 40, 160, 0.08),
      0 0 0 1px rgba(140, 130, 200, 0.08); /* crisp outline so edge reads */
  }

  /* Specular highlight streak — top-left droplet shine */
  .water::before {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: inherit;
    background:
      radial-gradient(ellipse 50% 30% at 25% 15%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 60%),
      radial-gradient(ellipse 30% 20% at 80% 80%, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 70%);
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: screen;
    opacity: 0.9;
  }

  /* Tiny sparkle dot — moves subtly, like a refracted point of light */
  .water::after {
    content: '';
    position: absolute;
    top: 30%;
    left: 18%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 70%);
    pointer-events: none;
    filter: blur(0.5px);
    animation: sparkle 6s ease-in-out infinite;
    z-index: 0;
  }
  @keyframes sparkle {
    0%,100% { opacity: 0.6; transform: translate(0,0) scale(1); }
    50%     { opacity: 1;   transform: translate(14px,-2px) scale(1.3); }
  }

  /* ====================================================================
     NAVBAR — WATER DROP
  ==================================================================== */
  .nav-shell {
    position: fixed;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 500; /* always above article overlays */
    width: calc(100% - 40px);
    max-width: 980px;
    transition: max-width 700ms var(--ease-liquid), top 500ms var(--ease-liquid);
  }

  .navbar {
    /* inherits .water */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 10px 10px 22px;
    border-radius: var(--radius-pill);
    transition:
      padding 700ms var(--ease-liquid),
      background 500ms ease,
      box-shadow 500ms ease;
  }

  .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 1;
    position: relative;
    transition: transform 500ms var(--ease-liquid);
  }
  .logo-mark {
    width: 34px;
    height: 34px;
    filter: drop-shadow(0 1px 2px rgba(78, 117, 250, 0.3));
    transition: transform 500ms var(--ease-liquid);
  }
  .logo-text {
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: 22px;
    text-transform: lowercase;
    letter-spacing: -0.025em;
    background: var(--gradient-logo);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    white-space: nowrap;
    overflow: hidden;
    max-width: 220px;
    transition: opacity 300ms ease, max-width 500ms var(--ease-liquid), transform 500ms var(--ease-liquid);
  }

  .nav-links {
    display: flex;
    align-items: center;
    gap: 38px;
    z-index: 1;
    position: relative;
    transition: opacity 400ms ease, max-width 600ms var(--ease-liquid), transform 500ms var(--ease-liquid);
    max-width: 500px;
    overflow: hidden;
  }
  .nav-links a {
    font-weight: 500;
    font-size: 15px;
    color: var(--text);
    opacity: 0.85;
    transition: opacity 200ms ease, color 200ms ease;
    position: relative;
    white-space: nowrap;
  }
  .nav-links a::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--primary);
    border-radius: 2px;
    transform: translateX(-50%);
    transition: width 250ms ease;
  }
  .nav-links a:hover { opacity: 1; color: var(--primary); }
  .nav-links a:hover::after { width: 20px; }

  /* ====================================================================
     BUTTON CURSOR-SPREAD EFFECT
  ==================================================================== */
  .spread-btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    --x: 50%;
    --y: 50%;
  }
  .spread-btn::before {
    content: '';
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 0;
    height: 0;
    background: radial-gradient(
      circle,
      var(--spread-color, rgba(255, 255, 255, 0.8)) 0%,
      var(--spread-color-soft, rgba(255, 255, 255, 0.3)) 40%,
      transparent 70%
    );
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 700ms ease-out, height 700ms ease-out;
    pointer-events: none;
    z-index: 0;
  }
  .spread-btn:hover::before { width: 440px; height: 440px; }
  .spread-btn > * { position: relative; z-index: 1; }

  .nav-cta {
    padding: 12px 24px;
    border-radius: var(--radius-pill);
    background: var(--gradient-cta);
    color: white;
    font-weight: 600;
    font-size: 14.5px;
    letter-spacing: -0.005em;
    box-shadow: 0 6px 18px rgba(109, 74, 255, 0.32);
    transition: transform 200ms ease, box-shadow 300ms ease;
    --spread-color: rgba(255, 215, 120, 0.75);
    --spread-color-soft: rgba(255, 180, 90, 0.35);
  }
  .nav-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(109, 74, 255, 0.4); }



  /* ====================================================================
     HAMBURGER BUTTON — circular glass capsule
     Hidden by default on desktop. Shown when navbar is shrunk on scroll
     AND always shown on mobile. Sits at the leftmost position via flex order.
  ==================================================================== */
  .nav-hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.25) 100%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow:
      inset 0 2px 0 rgba(255, 255, 255, 0.95),
      inset 0 -2px 6px rgba(180, 200, 255, 0.18),
      0 4px 12px rgba(70, 40, 160, 0.12);
    cursor: pointer;
    z-index: 1;
    position: relative;
    margin: 0;
    transition: transform 250ms var(--ease-soft), box-shadow 300ms ease;
  }
  .nav-hamburger:hover {
    transform: translateY(-1px);
    box-shadow:
      inset 0 2px 0 rgba(255, 255, 255, 0.95),
      inset 0 -2px 6px rgba(180, 200, 255, 0.18),
      0 6px 16px rgba(109, 74, 255, 0.22);
  }
  .nav-hamburger:active { transform: translateY(0); }

  .hamburger-icon {
    position: relative;
    width: 16px;
    height: 12px;
    display: block;
  }
  .hamburger-icon span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1.8px;
    background: var(--primary-dark);
    border-radius: 2px;
    transition: transform 320ms var(--ease-liquid), opacity 200ms ease, top 320ms var(--ease-liquid), bottom 320ms var(--ease-liquid);
  }
  .hamburger-icon span:nth-child(1) { top: 0; }
  .hamburger-icon span:nth-child(2) { top: 50%; transform: translateY(-50%); }
  .hamburger-icon span:nth-child(3) { bottom: 0; }

  /* Animate to X when menu is open */
  .nav-hamburger.is-open .hamburger-icon span:nth-child(1) {
    top: 50%; transform: translateY(-50%) rotate(45deg);
  }
  .nav-hamburger.is-open .hamburger-icon span:nth-child(2) { opacity: 0; }
  .nav-hamburger.is-open .hamburger-icon span:nth-child(3) {
    bottom: 50%; transform: translateY(50%) rotate(-45deg);
  }

  /* Reveal hamburger when navbar is shrunk on scroll, leftmost via order */
  .nav-shell.scrolled .nav-hamburger {
    display: flex;
    order: -1;
  }

  /* ====================================================================
     FLOATING GLASS MENU PANEL (drops below navbar from the LEFT)
  ==================================================================== */
  .nav-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    z-index: 99;
    min-width: 210px;
    padding: 12px;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    gap: 2px;

    /* Hidden state */
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px) scale(0.94);
    transform-origin: top left;
    transition:
      opacity 240ms ease,
      transform 320ms var(--ease-liquid);
  }
  .nav-menu.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }
  .nav-menu a {
    position: relative;
    z-index: 1;
    display: block;
    padding: 11px 16px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14.5px;
    letter-spacing: -0.005em;
    color: var(--text);
    transition: background 200ms ease, color 200ms ease, transform 200ms ease;
  }
  .nav-menu a:hover {
    background: rgba(109, 74, 255, 0.08);
    color: var(--primary);
    transform: translateX(2px);
  }

  /* ====================================================================
     MOBILE NAVBAR — hamburger leftmost, links hidden, compact CTA
  ==================================================================== */
  @media (max-width: 720px) {
    .nav-hamburger {
      display: flex;
      order: -1;
    }
    .nav-links { display: none; }
    .nav-shell { max-width: 380px; width: calc(100% - 24px); }
    .navbar { padding: 8px 8px 8px 14px; }
    .logo-mark { width: 30px; height: 30px; }
    .logo-text { font-size: 18px; max-width: 160px; }
    .nav-cta {
      padding: 9px 16px;
      font-size: 13px;
      white-space: nowrap;
      letter-spacing: -0.01em;
    }
    .nav-menu { left: 4px; min-width: 200px; }
  }
  @media (max-width: 400px) {
    .nav-shell { width: calc(100% - 16px); }
    .navbar { padding: 7px 7px 7px 12px; }
    .logo-text { font-size: 17px; max-width: 130px; }
    .nav-cta { padding: 8px 14px; font-size: 12.5px; }
    .nav-hamburger { width: 36px; height: 36px; }
    .hamburger-icon { width: 14px; height: 11px; }
  }

  /* SCROLLED NAV — stays watery, just contracts */
  .nav-shell.scrolled { max-width: 320px; top: 14px; }
  .nav-shell.scrolled .navbar { padding: 8px 8px 8px 16px; }
  .nav-shell.scrolled .logo-text { max-width: 0; opacity: 0; transform: translateX(-6px); }
  .nav-shell.scrolled .logo-mark { transform: scale(0.92); }
  .nav-shell.scrolled .nav-links { max-width: 0; opacity: 0; transform: scale(0.9); pointer-events: none; }
  .nav-shell.scrolled .nav-cta { padding: 10px 20px; font-size: 13.5px; }

  /* ====================================================================
     HERO
     ================================================================
     Content stack: badge → h1 → subtext → buttons → illustration
     Illustration now sits IN FLOW after the buttons (not behind them).
     Animation sequence unchanged: 0.10s → 0.28s → 0.55s → 0.85s → 1.30s
  ==================================================================== */
  .hero {
    position: relative;
    padding: 140px 24px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
  }

  .hero-content {
    position: relative;
    z-index: 2;
    max-width: 720px;
    text-align: center;
  }

  .hero-content .anim { opacity: 0; transform: translateY(14px); animation: fadeUp 0.7s var(--ease-soft) forwards; }
  .hero-content .anim.d1 { animation-delay: 0.10s; }
  .hero-content .anim.d2 { animation-delay: 0.28s; }
  .hero-content .anim.d3 { animation-delay: 0.55s; }
  .hero-content .anim.d4 { animation-delay: 0.85s; }
  @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

  .badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: rgba(245, 241, 255, 0.9);
    color: var(--primary-dark);
    border: 1px solid rgba(109, 74, 255, 0.15);
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .badge svg { width: 14px; height: 14px; }

  .hero h1 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(40px, 6vw, 72px);
    line-height: 1.05;
    letter-spacing: -0.035em;
    margin-top: 28px;
    margin-bottom: 22px;
    color: var(--text);
  }
  .gradient-word {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
  }

  .hero-sub {
    font-size: 17px;
    color: var(--text-muted);
    max-width: 480px;
    margin: 0 auto 36px;
    line-height: 1.6;
  }

  .cta-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
  }

  .btn-primary {
    padding: 16px 34px;
    background: var(--gradient-cta);
    color: white;
    font-weight: 600;
    font-size: 15.5px;
    letter-spacing: -0.005em;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-cta);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: transform 200ms ease, box-shadow 300ms ease;
    --spread-color: rgba(255, 220, 130, 0.85);
    --spread-color-soft: rgba(255, 180, 90, 0.4);
  }
  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(109, 74, 255, 0.42); }
  .btn-primary svg { width: 18px; height: 18px; transition: transform 400ms var(--ease-soft); }
  .btn-primary:hover svg { transform: translateX(4px); }

  .btn-secondary {
    padding: 16px 30px 16px 20px;
    background: white;
    color: var(--text);
    font-weight: 600;
    font-size: 15.5px;
    letter-spacing: -0.005em;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    box-shadow: var(--shadow-sm);
    transition: transform 200ms ease, box-shadow 300ms ease, border-color 300ms ease;
    --spread-color: rgba(167, 139, 250, 0.55);
    --spread-color-soft: rgba(109, 74, 255, 0.18);
  }
  .btn-secondary:hover {
    transform: translateY(-2px);
    border-color: var(--primary-light);
    box-shadow: 0 8px 22px rgba(109, 74, 255, 0.14);
  }
  .play-icon {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--gradient-cta);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
  }
  .play-icon svg { width: 10px; height: 10px; }

  /* ====================================================================
     HERO IMAGE TUNING — change these values when you swap the
     illustration. Every spacing/positioning choice flows from here.
     ================================================================
       --hero-max-width   : Optional safety cap for very wide screens
                            (4K / ultrawide). On normal screens the
                            illustration ALWAYS spans the full viewport
                            edge-to-edge. Set to a large number (e.g.
                            2400px) so the cap rarely kicks in. Set to
                            `none` to disable the cap entirely.

       --hero-gap-top     : Space between the CTA buttons and the top
                            of the image. Negative values pull the
                            image up under the buttons; positive push
                            it down.

       --hero-gap-bottom  : Space between the bottom of the image and
                            the features capsule. Positive values keep
                            them separated (no overlap).

       --hero-face-lift   : Vertical nudge applied to the image only.
                            NEGATIVE pulls the image UP (face gets
                            closer to the buttons, more of the lower
                            streams show); POSITIVE pushes down.
                            Range: roughly -80px to +20px.

       --hero-top-fade    : Height of the soft fade at the TOP of the
                            image (as % of image height). Higher values
                            dampen the upper streams so the centered
                            face pops. 0% = no fade, 20% is strong.

       --hero-bottom-fade : Same idea, for the bottom edge. Helps the
                            image blend into the features capsule.
  ==================================================================== */
  :root {
    --hero-max-width: 2700px;
    --hero-gap-top: -200px;
    --hero-gap-bottom: 25px;
    --hero-face-lift: -28px;
    --hero-top-fade: 13%;
    --hero-bottom-fade: 8%;
  }

  .hero-illustration {
    /* FULL-VIEWPORT EDGE-TO-EDGE TECHNIQUE
       ============================================================
       The illustration lives inside `.hero` which has horizontal
       padding. To break out of that padding and any other parent
       constraint and span all the way to the screen edges (no white
       gaps when zoomed out), we set:
         width:        100vw                    -> exactly viewport-wide
         margin-left:  calc(50% - 50vw)         -> escape left to edge
         margin-right: calc(50% - 50vw)         -> escape right to edge

       `100% - 100vw` would also work but the 50/50 split is the
       canonical pattern and works regardless of flex/grid context.

       max-width is the OPTIONAL safety cap for ultrawide displays.
       Combined with margin-left/right:auto it would re-introduce
       side gaps, so on wide screens we let the image just BE wide.
    */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: var(--hero-gap-top);
    margin-bottom: 0;
    max-width: var(--hero-max-width);

    padding: 0;
    pointer-events: none;
    opacity: 0;
    transform: translateY(24px) scale(0.98);
    animation: heroRise 1.4s var(--ease-soft) 1.30s forwards;

    /* Soft top + bottom fade — focuses the eye on the face. */
    -webkit-mask-image: linear-gradient(
      180deg,
      transparent 0%,
      rgba(0,0,0,0.4) calc(var(--hero-top-fade) * 0.4),
      black var(--hero-top-fade),
      black calc(100% - var(--hero-bottom-fade)),
      transparent 100%
    );
            mask-image: linear-gradient(
      180deg,
      transparent 0%,
      rgba(0,0,0,0.4) calc(var(--hero-top-fade) * 0.4),
      black var(--hero-top-fade),
      black calc(100% - var(--hero-bottom-fade)),
      transparent 100%
    );
  }
  .hero-illustration img {
    width: 100%;
    height: auto;
    display: block;
    /* Nudges the image up/down inside its own space without changing
       the container height — buttons-to-face distance is controlled
       by --hero-face-lift. */
    transform: translateY(var(--hero-face-lift));
  }
  @keyframes heroRise {
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  /* ====================================================================
     FEATURES — WATER-DROP CAPSULE
  ==================================================================== */
  .features-wrap {
    position: relative;
    z-index: 5;
    padding: 0 24px;
    /* Positive margin ⇒ capsule sits CLEARLY below the illustration.
       No overlap. Controlled by --hero-gap-bottom. */
    margin-top: var(--hero-gap-bottom);
    margin-bottom: 20px;
  }
  .features {
    /* inherits .water — transparent, distorted, magnifying */
    max-width: 1180px;
    margin: 0 auto;
    padding: 26px 36px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    border-radius: 90px; /* capsule shape — large rounded */
  }
  .feature {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 0 4px;
    position: relative;
    z-index: 1; /* above the .water ::before specular overlay */
  }
  .feature + .feature::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 10%;
    bottom: 10%;
    width: 1px;
    background: linear-gradient(180deg,
      transparent 0%,
      rgba(255,255,255,0.55) 30%,
      rgba(255,255,255,0.55) 70%,
      transparent 100%);
  }
  .feature-icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* Solid backgrounds for icon tiles so they pop against the watery surface */
    box-shadow: 0 2px 6px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.6);
  }
  .feature-icon svg { width: 24px; height: 24px; }
  .icon-purple { background: var(--primary-soft); color: var(--primary); }
  .icon-yellow { background: var(--accent-yellow-bg); color: var(--accent-yellow); }
  .icon-green { background: var(--accent-green-bg); color: var(--accent-green); }
  .icon-blue { background: var(--accent-blue-bg); color: var(--accent-blue); }

  .feature h4 {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 3px;
    letter-spacing: -0.01em;
    /* slight halo to keep text readable over water */
    text-shadow: 0 1px 0 rgba(255,255,255,0.6);
  }
  .feature p {
    font-size: 12.5px;
    color: var(--text-muted);
    line-height: 1.45;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
  }

  /* ====================================================================
     HOW IT WORKS
  ==================================================================== */
  .how-works { padding: 130px 24px 90px; background: #FFFFFF; position: relative; }
  .how-inner { max-width: 1180px; margin: 0 auto; text-align: center; }
  .eyebrow {
    display: inline-block;
    font-size: 13px; font-weight: 700;
    color: var(--primary);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 16px;
  }
  .how-title {
    font-family: var(--font-display);
    font-size: clamp(32px, 4.4vw, 52px);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text);
    margin-bottom: 80px;
    line-height: 1.1;
  }
  .steps {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 0;
    align-items: start;
    max-width: 1100px;
    margin: 0 auto;
  }
  .step {
    position: relative;
    padding: 36px 26px 28px;
    background: #FBFAFE;
    border: 1px solid var(--border-soft);
    border-radius: 22px;
    transition: transform 400ms var(--ease-soft), box-shadow 400ms ease, border-color 400ms ease;
  }
  .step:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(60, 40, 150, 0.08);
    border-color: var(--primary-light);
  }
  .step-num {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px; height: 26px;
    border-radius: var(--radius-pill);
    background: var(--primary);
    color: white;
    font-size: 12px; font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.06em;
  }
  .step-icon {
    width: 130px; height: 130px;
    margin: 18px auto 26px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .step-icon svg { width: 100%; height: 100%; }
  .step h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.015em; color: var(--text); margin-bottom: 8px; }
  .step p { font-size: 14px; color: var(--text-muted); line-height: 1.55; }
  .step-arrow { display: flex; align-items: center; justify-content: center; padding-top: 110px; min-width: 80px; }
  .step-arrow svg { width: 72px; height: 18px; }
  .step-arrow .dash { stroke-dasharray: 4 6; animation: dashMove 2.6s linear infinite; }
  @keyframes dashMove { to { stroke-dashoffset: -20; } }

  /* ====================================================================
     TRUST / PARTNERS
  ==================================================================== */
  .trust { padding: 30px 24px 80px; background: #FFFFFF; text-align: center; }
  .trust-line {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 15px;
    color: var(--text-muted);
    margin-bottom: 36px;
  }
  .trust-line svg { width: 16px; height: 16px; color: var(--accent-pink); }
  .partners { display: flex; justify-content: center; align-items: center; gap: 64px; flex-wrap: wrap; opacity: 0.55; }
  .partner { display: inline-flex; align-items: center; gap: 10px; color: var(--text-soft); font-weight: 700; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; transition: opacity 300ms ease, color 300ms ease; }
  .partner:hover { color: var(--text); }
  .partner svg { width: 18px; height: 18px; }
  .partner-label span { display: block; line-height: 1.1; }

  /* ====================================================================
     RESPONSIVE
  ==================================================================== */
  @media (max-width: 960px) {
    .features { grid-template-columns: repeat(2, 1fr); gap: 24px 20px; padding: 28px 30px; border-radius: 36px; }
    .feature + .feature::before { display: none; }
    .feature:nth-child(2n+1)::after {
      content: '';
      position: absolute;
      right: -10px; top: 10%; bottom: 10%;
      width: 1px;
      background: linear-gradient(180deg, transparent, rgba(255,255,255,0.55) 30%, rgba(255,255,255,0.55) 70%, transparent);
    }
    .steps { grid-template-columns: 1fr; gap: 20px; }
    .step-arrow { padding-top: 0; transform: rotate(90deg); min-height: 40px; }
    .nav-links { display: none; }
    .hero { padding-top: 120px; }
    .hero-illustration { margin-top: 40px; }
  }
  @media (max-width: 600px) {
    .features { grid-template-columns: 1fr; border-radius: 32px; padding: 24px 22px; }
    .feature + .feature::before,
    .feature:nth-child(2n+1)::after { display: none !important; }
    .hero { padding: 110px 20px 0; }
    .hero h1 { font-size: 38px; }
    .btn-primary, .btn-secondary { padding: 14px 24px; font-size: 14.5px; }
    .how-works { padding: 90px 20px 70px; }
    .how-title { margin-bottom: 50px; }
    .partners { gap: 28px; }
    .nav-shell { top: 12px; width: calc(100% - 24px); }
    .navbar { padding: 7px 7px 7px 14px; }
    .logo-text { font-size: 17px; }
    .logo-mark { width: 28px; height: 28px; }
    .nav-cta { padding: 9px 16px; font-size: 13px; white-space: nowrap; }
    .spread-btn:hover::before { width: 340px; height: 340px; }
  }

  /* ====================================================================
     FLUID ETHER CANVAS + DARK-HERO OVERRIDES (blog.html)
  ==================================================================== */

  /* The canvas fills the page-wrap (nav + hero area) */
  #fluidCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    display: block;
    pointer-events: none; /* mouse events pass through to page-wrap */
  }

  /* Dark base for the fluid page-wrap area */
  .page-wrap.has-fluid {
    background: #06031a;
    cursor: crosshair;
  }

  /* Suppress the light ambient blobs — fluid canvas provides the bg */
  .page-wrap.has-fluid::before,
  .page-wrap.has-fluid::after { display: none; }

  /* Suppress the blog-hero's own radial glow — canvas does it better */
  .has-fluid .blog-page-hero::before { display: none; }

  /* Nav stays above the canvas */
  .has-fluid .nav-shell { z-index: 100; }

  /* Fluid-to-listing gradient transition */
  .fluid-fade {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 160px;
    background: linear-gradient(to bottom, transparent 0%, var(--bg) 100%);
    z-index: 6;
    pointer-events: none;
  }

  /* ── Hero text on dark fluid background ── */
  .has-fluid .blog-page-hero {
    position: relative; /* stacking context for z-index */
  }
  .has-fluid .blog-page-hero-inner {
    position: relative;
    z-index: 1; /* above canvas (z-index:0) */
  }
  .has-fluid .blog-page-hero h1 {
    color: #ffffff;
    text-shadow: 0 0 60px rgba(109, 74, 255, 0.45), 0 2px 4px rgba(0,0,0,0.4);
  }
  .has-fluid .blog-page-hero h1 .gradient-word {
    /* keep gradient but boost for dark bg */
    filter: brightness(1.25) saturate(1.1);
  }
  .has-fluid .badge {
    background: rgba(109, 74, 255, 0.20);
    color: rgba(210, 190, 255, 0.95);
    border-color: rgba(109, 74, 255, 0.40);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    text-shadow: none;
  }
  .has-fluid .hero-sub {
    color: rgba(255, 255, 255, 0.65);
    text-shadow: 0 1px 8px rgba(0,0,0,0.5);
  }
  .has-fluid .blog-search {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(109, 74, 255, 0.45);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 4px 24px rgba(109,74,255,0.15), inset 0 1px 0 rgba(255,255,255,0.08);
  }
  .has-fluid .blog-search:focus-within {
    border-color: rgba(167, 139, 250, 0.7);
    box-shadow: 0 0 0 3px rgba(109,74,255,0.18), 0 4px 24px rgba(109,74,255,0.2);
  }
  .has-fluid .blog-search input { color: #ffffff; }
  .has-fluid .blog-search input::placeholder { color: rgba(255,255,255,0.35); }
  .has-fluid .blog-search button {
    background: linear-gradient(135deg, rgba(109,74,255,0.9), rgba(124,58,237,0.9));
    backdrop-filter: blur(4px);
  }

  /* ── Nav glass over dark canvas — keep existing water style, just ensure
     text is readable (nav links are already dark, fine on glass overlay) ── */

  /* ====================================================================
     NAV ACTIVE STATE (blog page)
  ==================================================================== */
  .nav-link-active {
    color: var(--primary) !important;
    opacity: 1 !important;
  }
  .nav-link-active::after { width: 20px !important; }

  /* ====================================================================
     BLOG PAGE HERO (inside page-wrap, replaces main hero on blog.html)
  ==================================================================== */
  .blog-page-hero {
    padding: 130px 24px 48px;
    text-align: center;
    position: relative;
    z-index: 1;
  }
  .blog-page-hero::before {
    content: '';
    position: absolute;
    top: -120px; left: 50%; transform: translateX(-50%);
    width: 800px; height: 700px;
    background: radial-gradient(circle, rgba(109,74,255,0.07) 0%, transparent 68%);
    pointer-events: none;
  }
  .blog-page-hero-inner {
    max-width: 680px;
    margin: 0 auto;
    position: relative;
  }
  .blog-page-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(36px, 5.5vw, 64px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.035em;
    color: var(--text);
    margin: 22px 0 18px;
  }
  .blog-page-hero .hero-sub { margin-bottom: 32px; }

  /* Filter pills when nested inside hero */
  .blog-page-hero .blog-filters {
    margin-top: 24px;
    margin-bottom: 0;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
  }

  /* d5 animation delay for pills row */
  .anim.d5 { animation-delay: 1.05s; }

  /* Blog listing area — starts right after hero */
  .blog-listing {
    background: var(--bg);
    padding: 36px 24px 100px;
  }
  .blog-listing .blog-inner { max-width: 1180px; margin: 0 auto; }

  /* ====================================================================
     BLOG SECTION
  ==================================================================== */
  .blog-section {
    padding: 110px 24px 100px;
    background: var(--bg);
    position: relative;
    overflow: hidden;
  }
  .blog-section::before {
    content: '';
    position: absolute;
    top: -80px; left: 50%; transform: translateX(-50%);
    width: 900px; height: 600px;
    background: radial-gradient(ellipse at center, rgba(109,74,255,0.05) 0%, transparent 65%);
    pointer-events: none;
  }
  .blog-inner { max-width: 1180px; margin: 0 auto; }

  .blog-header {
    text-align: center;
    margin-bottom: 56px;
  }
  .blog-header .eyebrow { margin-bottom: 14px; }
  .blog-header h2 {
    font-family: var(--font-display);
    font-size: clamp(30px, 4vw, 50px);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text);
    line-height: 1.1;
    margin-bottom: 16px;
  }
  .blog-header p {
    font-size: 16px;
    color: var(--text-muted);
    max-width: 500px;
    margin: 0 auto 32px;
    line-height: 1.65;
  }

  /* Search bar */
  .blog-search {
    display: flex;
    align-items: center;
    gap: 10px;
    background: white;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 6px 6px 6px 20px;
    max-width: 420px;
    margin: 0 auto;
    box-shadow: var(--shadow-sm);
    transition: border-color 200ms, box-shadow 200ms;
  }
  .blog-search:focus-within {
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(109,74,255,0.1), var(--shadow-sm);
  }
  .blog-search input {
    flex: 1; border: none; outline: none;
    font-family: var(--font-sans); font-size: 14px;
    color: var(--text); background: transparent;
  }
  .blog-search input::placeholder { color: var(--text-soft); }
  .blog-search button {
    background: var(--gradient-cta); color: white;
    border-radius: var(--radius-pill);
    padding: 9px 20px;
    font-family: var(--font-sans); font-size: 13px; font-weight: 700;
    transition: opacity 200ms;
  }
  .blog-search button:hover { opacity: 0.88; }

  /* Filter pills */
  .blog-filters {
    display: flex; flex-wrap: wrap; gap: 8px;
    justify-content: center;
    margin-bottom: 0;
  }
  .blog-pill {
    background: white;
    color: var(--text-muted);
    font-size: 12.5px; font-weight: 700;
    padding: 7px 18px;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--border);
    cursor: pointer;
    transition: all 180ms ease;
    user-select: none;
  }
  .blog-pill:hover { border-color: var(--primary-light); color: var(--primary); }
  .blog-pill.active {
    background: var(--gradient-cta); color: white;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(109,74,255,0.28);
  }

  /* Featured card */
  .blog-featured {
    border-radius: var(--radius-lg);
    background: linear-gradient(130deg, var(--primary-dark) 0%, var(--primary) 55%, var(--primary-light) 100%);
    padding: clamp(28px,5vw,52px);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    margin-bottom: 48px;
    box-shadow: 0 20px 50px rgba(109,74,255,0.28), 0 4px 16px rgba(109,74,255,0.18);
    transition: transform 250ms var(--ease-soft), box-shadow 300ms ease;
  }
  .blog-featured::before {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 280px; height: 280px;
    background: rgba(255,255,255,0.07);
    border-radius: 50%;
  }
  .blog-featured::after {
    content: '';
    position: absolute;
    bottom: -80px; left: 30%;
    width: 200px; height: 200px;
    background: rgba(255,255,255,0.04);
    border-radius: 50%;
  }
  .blog-featured:hover {
    transform: translateY(-4px);
    box-shadow: 0 28px 60px rgba(109,74,255,0.35), 0 6px 20px rgba(109,74,255,0.22);
  }
  .bf-in { position: relative; z-index: 1; }
  .bf-tag {
    display: inline-block;
    background: rgba(255,255,255,0.18);
    color: white; font-size: 11px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    padding: 5px 14px; border-radius: var(--radius-pill);
    margin-bottom: 16px;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.2);
  }
  .blog-featured h2 {
    font-family: var(--font-display);
    font-size: clamp(19px,3.2vw,32px);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: white; line-height: 1.15;
    margin-bottom: 12px;
  }
  .blog-featured p {
    font-size: clamp(13px,1.7vw,15px);
    color: rgba(255,255,255,0.72);
    max-width: 480px; line-height: 1.6;
    margin-bottom: 18px;
  }
  .bf-meta { font-size: 12.5px; color: rgba(255,255,255,0.55); font-weight: 500; }
  .bf-btn {
    position: relative; z-index: 1;
    background: white; color: var(--primary);
    font-size: 13.5px; font-weight: 800;
    padding: 13px 24px; border-radius: var(--radius-pill);
    white-space: nowrap; flex-shrink: 0;
    transition: transform 200ms, box-shadow 200ms;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  }
  .blog-featured:hover .bf-btn { transform: scale(1.05); box-shadow: 0 8px 24px rgba(0,0,0,0.18); }
  @media (max-width: 600px) {
    .blog-featured { grid-template-columns: 1fr; }
    .bf-btn { display: none; }
  }

  /* Blog grid count row */
  .blog-grid-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 22px;
  }
  .blog-grid-header h3 { font-size: 15px; font-weight: 700; color: var(--text); }
  .blog-grid-header span { font-size: 13px; color: var(--text-soft); }

  /* Cards grid */
  .blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 22px;
  }
  .blog-card {
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--surface);
    cursor: pointer;
    display: flex; flex-direction: column;
    transition: transform 220ms var(--ease-soft), box-shadow 280ms ease, border-color 220ms;
  }
  .blog-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 48px rgba(109,74,255,0.1), 0 4px 12px rgba(109,74,255,0.06);
    border-color: var(--primary-light);
  }
  .bc-img {
    height: 130px;
    display: flex; align-items: center; justify-content: center;
    font-size: 44px; position: relative; overflow: hidden;
  }
  .bc-img .bc-rt {
    position: absolute; top: 10px; right: 10px;
    background: rgba(0,0,0,0.32); color: white;
    font-size: 10.5px; font-weight: 700;
    padding: 4px 10px; border-radius: var(--radius-pill);
    backdrop-filter: blur(6px);
  }
  .bc-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
  /* card tag row — category pill + optional badges */
  .bc-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 9px; }
  .bc-cat-pill {
    display: inline-block;
    font-size: 10px; font-weight: 800;
    letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--primary);
    background: var(--primary-softer);
    padding: 3px 10px; border-radius: var(--radius-pill);
    border: 1px solid rgba(109,74,255,0.14);
  }
  .bc-helpful {
    display: inline-block;
    font-size: 10px; font-weight: 800;
    letter-spacing: 0.05em; text-transform: uppercase;
    color: #92600a;
    background: #fff4d1;
    padding: 3px 10px; border-radius: var(--radius-pill);
    border: 1px solid rgba(245,180,0,0.3);
  }
  /* keep old selectors as no-ops so nothing breaks */
  .bc-cat { display: none; }
  .bc-chips { display: none; }
  .bc-chip { display: none; }
  .bc-title {
    font-size: 15px; font-weight: 700;
    color: var(--text); line-height: 1.38;
    margin-bottom: 9px; letter-spacing: -0.01em; flex: 1;
  }
  .bc-excerpt { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin-bottom: 14px; }
  .bc-foot {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: auto;
  }
  .bc-auth { font-size: 12px; color: var(--text-soft); font-weight: 500; }
  .bc-arr {
    width: 30px; height: 30px;
    background: var(--primary-softer); border-radius: 50%;
    display: grid; place-items: center;
    transition: background 200ms;
  }
  .bc-arr svg {
    width: 13px; height: 13px; fill: none;
    stroke: var(--primary); stroke-width: 2.5;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .blog-card:hover .bc-arr { background: var(--primary); }
  .blog-card:hover .bc-arr svg { stroke: white; }

  /* Card header gradient swatches */
  .bg1 { background: linear-gradient(135deg,#EDE7FF,#C4A8F5); }
  .bg2 { background: linear-gradient(135deg,#E0EEFF,#A8C0F5); }
  .bg3 { background: linear-gradient(135deg,#E8FFF0,#A8F5C0); }
  .bg4 { background: linear-gradient(135deg,#FFF3E0,#F5C4A8); }
  .bg5 { background: linear-gradient(135deg,#FCE8FF,#E4A8F5); }
  .bg6 { background: linear-gradient(135deg,#E8F0FF,#A8B8F5); }
  .bg7 { background: linear-gradient(135deg,#E8FFFA,#A8F0E8); }
  .bg8 { background: linear-gradient(135deg,#FFECE8,#F5B0A0); }
  .bg9 { background: linear-gradient(135deg,#F3E8FF,#D4A8F5); }
  .bg10 { background: linear-gradient(135deg,#E8F5FF,#A8D5F5); }

  /* ====================================================================
     ARTICLE OVERLAY PANEL
  ==================================================================== */
  /* Article overlay — full screen so no strip shows at top */
  .ba-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: var(--surface); overflow-y: auto;
  }
  .ba-overlay.open { display: block; }

  /* Old ba-nav bar — hidden, replaced by back hyperlink */
  .ba-nav { display: none; }

  /* Back hyperlink — full-width block.
     Background is var(--primary-soft) so the glass nav island blurs a
     visible lilac tint rather than plain white; top padding clears the nav. */
  .ba-back-link {
    display: block;
    background: var(--surface);
    padding: 104px clamp(1rem,4vw,2.5rem) 18px;
    font-family: var(--font-sans); font-size: 13px; font-weight: 700;
    color: var(--primary); text-decoration: none;
    transition: color 200ms;
  }
  .ba-back-link:hover { color: var(--primary-dark); text-decoration: underline; text-underline-offset: 3px; }

  /* Progress bar — pinned to the very bottom of the browser viewport */
  .ba-pbar {
    position: fixed; bottom: 0; top: auto; left: 0; right: 0;
    height: 5px; background: rgba(109,74,255,0.12); z-index: 201;
    pointer-events: none;
  }
  .ba-pfill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
    width: 0%; transition: width 0.1s linear;
  }

  /* Article hero */
  .ba-hero {
    padding: clamp(24px,3vw,36px) clamp(1rem,4vw,2.5rem) clamp(36px,5vw,56px);
    text-align: center;
    background: var(--surface);
    position: relative; overflow: hidden;
  }
  .ba-hero::before {
    content: '';
    position: absolute; top: -100px; left: 50%; transform: translateX(-50%);
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(109,74,255,0.06) 0%, transparent 68%);
    pointer-events: none;
  }
  .ba-hero-in { max-width: 720px; margin: 0 auto; position: relative; }
  .ba-badge {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--primary-soft); color: var(--primary);
    font-size: 11.5px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    padding: 6px 16px; border-radius: var(--radius-pill);
    margin-bottom: 20px;
    border: 1px solid rgba(109,74,255,0.15);
  }
  .ba-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(22px,4vw,44px);
    font-weight: 700; letter-spacing: -0.03em;
    color: var(--text); line-height: 1.1;
    margin: 0 0 18px;
  }
  .ba-hero h1 .hl { color: var(--primary); }
  .ba-meta {
    display: inline-flex; flex-wrap: wrap;
    justify-content: center; align-items: center;
    gap: 8px; font-size: 12.5px;
    color: var(--text-soft); font-weight: 500;
  }
  .ba-dot { width: 3px; height: 3px; background: var(--primary-light); border-radius: 50%; }
  .ba-snote {
    display: inline-block; background: var(--primary-softer);
    border: 1px solid var(--border); color: var(--text-muted);
    font-size: 11px; padding: 5px 12px;
    border-radius: var(--radius-pill); margin-top: 12px;
  }

  /* Article content */
  .ba-lede-wrap { max-width: 660px; margin: 0 auto; padding: 44px clamp(1rem,4vw,2.5rem) 0; }
  .ba-lede {
    font-size: clamp(16px,2.1vw,20px); font-weight: 600;
    line-height: 1.65; color: var(--text);
    border-left: 3px solid var(--primary-light);
    padding-left: 22px; margin-bottom: 0;
    font-style: italic;
  }
  article.ba-body {
    max-width: 660px; margin: 0 auto;
    padding: 32px clamp(1rem,4vw,2.5rem) 80px;
  }
  article.ba-body p { color: var(--text); margin-bottom: 22px; line-height: 1.8; }
  article.ba-body h2 {
    font-family: var(--font-display);
    font-size: clamp(18px,2.8vw,26px); font-weight: 700;
    letter-spacing: -0.025em; color: var(--text);
    margin: 52px 0 14px; line-height: 1.2;
  }
  article.ba-body h2 .hl { color: var(--primary); }
  article.ba-body h3 { font-size: 16.5px; font-weight: 700; color: var(--text); margin: 28px 0 9px; }
  article.ba-body a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
  article.ba-body strong { font-weight: 700; color: var(--text); }

  /* Pull quote */
  .ba-pq {
    margin: 44px 0;
    background: linear-gradient(135deg, var(--primary-soft) 0%, var(--primary-softer) 100%);
    border-radius: var(--radius-lg);
    padding: 30px 36px;
    border: 1px solid rgba(109,74,255,0.14);
    position: relative;
  }
  .ba-pq::before {
    content: '\201C';
    position: absolute; top: 12px; left: 26px;
    font-size: 60px; font-weight: 800;
    color: var(--primary-light); line-height: 1;
    font-family: Georgia, serif;
  }
  .ba-pq p {
    font-size: clamp(15px,2vw,19px); font-weight: 600;
    line-height: 1.5; color: var(--primary-dark);
    padding-top: 18px; margin: 0; font-style: italic;
  }
  .ba-pq cite { display: block; margin-top: 10px; font-size: 12.5px; color: var(--text-soft); font-style: normal; font-weight: 600; }

  /* Stats */
  .ba-stats {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 12px; margin: 36px 0;
  }
  .ba-stat {
    flex: 1 1 140px; min-width: 140px; max-width: calc(50% - 6px);
    background: var(--primary-softer);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    padding: 22px 16px; text-align: center;
  }
  .ba-stat .n {
    font-size: 32px; font-weight: 800; letter-spacing: -0.04em;
    color: var(--primary); display: block; line-height: 1; margin-bottom: 7px;
  }
  .ba-stat .l { font-size: 12px; color: var(--text-muted); line-height: 1.4; font-weight: 600; }

  /* Steps */
  .ba-steps { list-style: none; margin: 26px 0; display: flex; flex-direction: column; gap: 12px; }
  .ba-step {
    display: flex; gap: 16px; align-items: flex-start;
    background: var(--primary-softer);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md); padding: 20px;
  }
  .ba-sn {
    width: 36px; height: 36px; background: var(--gradient-cta);
    color: white; border-radius: 10px;
    display: grid; place-items: center;
    font-size: 14px; font-weight: 800; flex-shrink: 0;
  }
  .ba-sb strong { display: block; font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
  .ba-sb p { font-size: 13.5px; color: var(--text-muted); margin: 0; line-height: 1.6; }

  /* Tip box */
  .ba-tip { margin: 36px 0; border-radius: var(--radius-md); overflow: hidden; border: 1.5px solid var(--border); }
  .ba-tiph {
    background: var(--gradient-cta); color: white;
    padding: 12px 22px; font-size: 11.5px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    display: flex; align-items: center; gap: 6px;
  }
  .ba-tipb { background: var(--primary-softer); padding: 22px; }
  .ba-tipb p { font-size: 14px; margin-bottom: 10px; color: var(--text-muted); line-height: 1.7; }
  .ba-tipb p:last-child { margin: 0; }

  /* Table */
  .ba-tw { overflow-x: auto; margin: 28px 0; border-radius: var(--radius-md); border: 1.5px solid var(--border); }
  .ba-tw table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 440px; }
  .ba-tw thead th {
    background: var(--gradient-cta); color: white;
    padding: 12px 15px; text-align: left;
    font-weight: 700; font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase;
  }
  .ba-tw tbody td { padding: 12px 15px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: top; line-height: 1.5; }
  .ba-tw tbody tr:last-child td { border-bottom: none; }
  .ba-tw tbody tr:nth-child(even) td { background: var(--primary-softer); }
  .ba-tw .hl td { background: var(--primary-soft) !important; font-weight: 600; color: var(--primary-dark); }
  .ba-ck { color: #16a34a; font-weight: 700; }
  .ba-cx { color: #dc2626; }

  /* FAQ */
  .ba-faq { border-bottom: 1px solid var(--border); padding: 22px 0; }
  .ba-faq h3 { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 8px; line-height: 1.4; }
  .ba-faq p { font-size: 14px; margin: 0; color: var(--text-muted); }

  /* Keywords */
  .ba-kws { background: var(--primary-softer); border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 18px; margin: 32px 0; }
  .ba-kws p { font-size: 11px; font-weight: 700; color: var(--text-soft); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 10px; }
  .ba-ktags { display: flex; flex-wrap: wrap; gap: 6px; }
  .ba-ktag { font-size: 11px; font-weight: 600; background: white; border: 1px solid var(--border); color: var(--primary); padding: 4px 10px; border-radius: var(--radius-pill); }

  /* ── Article CTA ─────────────────────────────────────────────── */
  .ba-cta {
    margin: 64px 0 20px;
    background: #F5F1FF;
    border-radius: var(--radius-lg);
    padding: clamp(40px,6vw,56px) clamp(24px,5vw,44px);
    text-align: center;
  }
  .ba-cin { position: relative; z-index: 1; }

  /* Heading — (0,2,1) beats article.ba-body h2 (0,1,2) */
  .ba-cta .ba-cin h2 {
    font-family: var(--font-display);
    font-size: clamp(28px,5vw,52px);
    font-weight: 800; letter-spacing: -0.035em;
    color: var(--text);
    margin: 0 0 16px; line-height: 1.05;
  }
  /* Highlighted word — purple, specificity (0,3,1) beats h2 inheritance */
  .ba-cta .ba-cin h2 .hl { color: var(--primary) !important; }

  /* Subtext — (0,2,0) beats article.ba-body p (0,1,1) */
  .ba-cta .ba-cin p {
    font-size: 17px; color: var(--text);
    max-width: 480px; margin: 0 auto 36px; line-height: 1.6;
  }

  /* Primary button — matches .btn-primary hero style exactly */
  /* (0,2,0) beats article.ba-body a (0,1,1) */
  .ba-cta .ba-b1 {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 16px 34px;
    background: var(--gradient-cta); color: #ffffff;
    font-family: var(--font-sans); font-size: 15.5px; font-weight: 600;
    letter-spacing: -0.005em; border-radius: var(--radius-pill);
    box-shadow: var(--shadow-cta);
    text-decoration: none; margin-right: 12px;
    position: relative; overflow: hidden; isolation: isolate;
    --x: 50%; --y: 50%;
    --spread-color: rgba(255,220,130,0.85);
    --spread-color-soft: rgba(255,180,90,0.4);
    transition: transform 200ms ease, box-shadow 300ms ease;
  }
  .ba-cta .ba-b1::before {
    content: '';
    position: absolute; left: var(--x); top: var(--y);
    width: 0; height: 0;
    background: radial-gradient(circle, var(--spread-color) 0%, var(--spread-color-soft) 40%, transparent 70%);
    border-radius: 50%; transform: translate(-50%,-50%);
    transition: width 700ms ease-out, height 700ms ease-out;
    pointer-events: none; z-index: 0;
  }
  .ba-cta .ba-b1 > span { position: relative; z-index: 1; }
  .ba-cta .ba-b1:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(109,74,255,0.42); }
  .ba-cta .ba-b1:hover::before { width: 440px; height: 440px; }

  /* Secondary button — matches .btn-secondary hero style exactly */
  .ba-cta .ba-b2 {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 16px 30px;
    background: #ffffff; color: var(--text);
    font-family: var(--font-sans); font-size: 15.5px; font-weight: 600;
    letter-spacing: -0.005em; border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    position: relative; overflow: hidden; isolation: isolate;
    --x: 50%; --y: 50%;
    --spread-color: rgba(167,139,250,0.55);
    --spread-color-soft: rgba(109,74,255,0.18);
    transition: transform 200ms ease, box-shadow 300ms ease, border-color 300ms ease;
  }
  .ba-cta .ba-b2::before {
    content: '';
    position: absolute; left: var(--x); top: var(--y);
    width: 0; height: 0;
    background: radial-gradient(circle, var(--spread-color) 0%, var(--spread-color-soft) 40%, transparent 70%);
    border-radius: 50%; transform: translate(-50%,-50%);
    transition: width 700ms ease-out, height 700ms ease-out;
    pointer-events: none; z-index: 0;
  }
  .ba-cta .ba-b2 > span { position: relative; z-index: 1; }
  .ba-cta .ba-b2:hover { transform: translateY(-2px); border-color: var(--primary-light); box-shadow: 0 8px 22px rgba(109,74,255,0.14); }
  .ba-cta .ba-b2:hover::before { width: 440px; height: 440px; }

  @media (max-width: 640px) {
    .ba-cta { padding: 32px 20px; }
    .ba-cta .ba-b1, .ba-cta .ba-b2 {
      display: flex; justify-content: center;
      width: 100%; margin-right: 0; box-sizing: border-box;
    }
    .ba-cta .ba-b1 { margin-bottom: 10px; }
  }

  /* Related articles */
  .ba-rel { margin: 48px 0 0; }
  .ba-rel h3 { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 14px; }
  .ba-rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 12px; }
  .ba-rc {
    background: var(--primary-softer);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px; cursor: pointer;
    transition: border-color 200ms, background 200ms;
  }
  .ba-rc:hover { border-color: var(--primary); background: var(--primary-soft); }
  .ba-rcat { font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--primary); margin-bottom: 5px; }
  .ba-rtitle { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.35; }

  /* 2-column mobile grid ─────────────────────────────────────────── */
  @media (max-width: 640px) {
    .blog-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }
    /* Simplify cards so they fit at half-width */
    .bc-img { height: 90px; font-size: 28px; }
    .bc-body { padding: 12px; }
    .bc-title { font-size: 12.5px; line-height: 1.35; margin-bottom: 0; }
    .bc-excerpt { display: none; }
    .bc-foot { margin-top: 10px; }
    .bc-auth { display: none; }
    /* Hero text on small screens */
    .blog-page-hero h1 { font-size: 28px; }

    /* Article CTA — stack buttons vertically on mobile */
    .ba-cta { padding: 32px 20px; }
    .ba-b1, .ba-b2 {
      display: flex; justify-content: center;
      width: 100%; margin-right: 0; box-sizing: border-box;
    }
    .ba-b1 { margin-bottom: 10px; }

    /* Stats — allow single-column on very small screens */
    .ba-stat { max-width: 100%; }
  }

  /* ====================================================================
     BLOG FOOTER
  ==================================================================== */
  .blog-footer {
    background: var(--text);
    padding: 36px clamp(1rem, 4vw, 2.5rem);
  }
  .blog-footer-inner {
    max-width: 1180px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 16px;
  }
  .blog-footer-logo {
    display: flex; align-items: center; gap: 9px; text-decoration: none;
    filter: brightness(0) invert(1); /* make logo white */
    opacity: 0.9;
    transition: opacity 200ms;
  }
  .blog-footer-logo:hover { opacity: 1; }
  .blog-footer-brand {
    font-family: var(--font-sans);
    font-weight: 800; font-size: 17px;
    text-transform: lowercase; letter-spacing: -0.025em;
    color: #ffffff;
  }
  .blog-footer-links {
    display: flex; gap: 22px; flex-wrap: wrap;
  }
  .blog-footer-links a {
    font-size: 13px; font-weight: 500;
    color: rgba(255,255,255,0.45); text-decoration: none;
    transition: color 200ms;
  }
  .blog-footer-links a:hover { color: rgba(255,255,255,0.85); }
  .blog-footer-copy {
    font-size: 12px; color: rgba(255,255,255,0.28); margin: 0;
  }
  @media (max-width: 600px) {
    .blog-footer-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  }

  /* ====================================================================
     PRICING SECTION (placeholder)
  ==================================================================== */
  .pricing-section {
    padding: 110px 24px 100px;
    background: white;
    text-align: center;
  }
  .pricing-inner { max-width: 1100px; margin: 0 auto; }
  .pricing-section .eyebrow { margin-bottom: 14px; }
  .pricing-section h2 {
    font-family: var(--font-display);
    font-size: clamp(30px,4vw,50px); font-weight: 700;
    letter-spacing: -0.03em; color: var(--text); line-height: 1.1;
    margin-bottom: 16px;
  }
  .pricing-section > .pricing-inner > p {
    font-size: 16px; color: var(--text-muted);
    max-width: 480px; margin: 0 auto 60px; line-height: 1.65;
  }
  .pricing-cards {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
    gap: 24px; max-width: 960px; margin: 0 auto;
  }
  .pricing-card {
    background: var(--bg); border: 1.5px solid var(--border);
    border-radius: var(--radius-lg); padding: 36px 32px;
    text-align: left; position: relative;
    transition: transform 250ms var(--ease-soft), box-shadow 300ms ease, border-color 250ms;
  }
  .pricing-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--primary-light); }
  .pricing-card.featured-plan {
    background: linear-gradient(160deg, var(--primary-dark), var(--primary));
    border-color: transparent;
    box-shadow: 0 20px 50px rgba(109,74,255,0.3);
  }
  .pricing-card.featured-plan:hover { transform: translateY(-8px); box-shadow: 0 28px 60px rgba(109,74,255,0.4); }
  .plan-badge {
    display: inline-block; background: rgba(255,255,255,0.2);
    color: white; font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    padding: 4px 12px; border-radius: var(--radius-pill); margin-bottom: 20px;
  }
  .plan-name { font-size: 19px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
  .featured-plan .plan-name { color: white; }
  .plan-price { font-family: var(--font-display); font-size: 44px; font-weight: 800; letter-spacing: -0.04em; color: var(--primary); line-height: 1; margin-bottom: 6px; }
  .featured-plan .plan-price { color: white; }
  .plan-period { font-size: 13px; color: var(--text-soft); margin-bottom: 28px; }
  .featured-plan .plan-period { color: rgba(255,255,255,0.65); }
  .plan-features { list-style: none; margin-bottom: 32px; display: flex; flex-direction: column; gap: 10px; }
  .plan-features li { font-size: 14px; color: var(--text-muted); display: flex; align-items: center; gap: 10px; }
  .featured-plan .plan-features li { color: rgba(255,255,255,0.8); }
  .plan-features li::before { content: '✓'; color: var(--accent-green); font-weight: 800; font-size: 13px; flex-shrink: 0; }
  .featured-plan .plan-features li::before { color: rgba(255,255,255,0.8); }
  .plan-btn {
    display: block; width: 100%; text-align: center;
    padding: 13px 20px; border-radius: var(--radius-pill);
    font-family: var(--font-sans); font-size: 14px; font-weight: 700;
    background: var(--gradient-cta); color: white;
    box-shadow: 0 4px 14px rgba(109,74,255,0.25);
    transition: transform 200ms, box-shadow 200ms;
  }
  .plan-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(109,74,255,0.4); }
  .featured-plan .plan-btn { background: white; color: var(--primary); }
  .featured-plan .plan-btn:hover { box-shadow: 0 8px 22px rgba(0,0,0,0.16); }

  @media (prefers-reduced-motion: reduce) {
    .hero-content .anim,
    .hero-illustration,
    .water::after {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
    }
    .spread-btn::before { transition: none; }
  }