:root{
    --bg:#FAFAFB;
    --surface:#F3F2FA;
    --surface-2:#EDECF9;
    --ink:#14141C;
    --ink-soft:#5B5B68;
    --ink-faint:#8E8E9C;
    --line:#E4E3ED;
    --line-strong:#D3D2E2;

    --signal:#9389F6;
    --signal-deep:#6D62E8;
    --signal-pale:#ECE9FD;
    --signal-ink:#3C3596;

    --leak:#C2665C;

    --dark:#14141C;
    --dark-2:#232330;
    --dark-line:#33333F;
    --dark-ink-soft:rgba(255,255,255,.62);

    --font-display:'Instrument Serif', serif;
    --font-body:'Instrument Sans', sans-serif;
    --font-mono:'Space Mono', monospace;

    --container:1240px;
    --pad-inline: clamp(1.5rem, 5vw, 4rem);

    --sp-3xs:.25rem; --sp-2xs:.5rem; --sp-xs:.75rem; --sp-sm:1rem;
    --sp-md:1.5rem; --sp-lg:2.5rem; --sp-xl:4.5rem; --sp-2xl:7.5rem; --sp-3xl:9.5rem;

    --ease: cubic-bezier(.16,.8,.24,1);
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important;}
  }

  body{
    background:var(--bg);
    color:var(--ink);
    font-family:var(--font-body);
    font-size:16px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  img,canvas{display:block; max-width:100%;}
  a{color:inherit; text-decoration:none;}
  ul{list-style:none;}
  button{font-family:inherit; cursor:pointer; border:none; background:none;}
  :focus-visible{outline:2px solid var(--signal-deep); outline-offset:3px; border-radius:2px;}

  .container{ max-width:var(--container); margin-inline:auto; padding-inline:var(--pad-inline); }

  .eyebrow{
    font-family:var(--font-mono); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
    color:var(--signal-ink); display:inline-flex; align-items:center; gap:.55em;
  }
  .eyebrow::before{
    content:''; width:6px; height:6px; border-radius:50%; background:var(--signal);
    box-shadow:0 0 0 4px var(--signal-pale); flex-shrink:0;
    animation:eyebrow-pulse 2.6s ease-in-out infinite;
  }
  @keyframes eyebrow-pulse{ 0%,100%{ box-shadow:0 0 0 4px var(--signal-pale); } 50%{ box-shadow:0 0 0 6px var(--signal-pale); } }
  .eyebrow.on-dark{ color:var(--signal); }
  .eyebrow.on-dark::before{ box-shadow:0 0 0 4px rgba(147,137,246,.25); animation-name:eyebrow-pulse-dark; }
  @keyframes eyebrow-pulse-dark{ 0%,100%{ box-shadow:0 0 0 4px rgba(147,137,246,.25); } 50%{ box-shadow:0 0 0 6px rgba(147,137,246,.25); } }

  h1,h2,h3{ font-family:var(--font-display); font-weight:400; letter-spacing:-.01em; line-height:1.08; color:var(--ink); }
  .accent{ color:var(--signal-deep); }
  .accent-italic{ color:var(--signal-deep); font-style:italic; font-weight:400; }

  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
    padding:.9rem 1.6rem; border-radius:100px; font-family:var(--font-body); font-weight:600; font-size:.95rem;
    transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .25s var(--ease);
    white-space:nowrap;
  }
  .btn-dark{ background:var(--dark); color:#fff; }
  .btn-dark:hover{ transform:translateY(-2px); box-shadow:0 12px 24px -8px rgba(20,20,28,.35); background:var(--dark-2); }
  .btn-light{ background:#fff; color:var(--ink); }
  .btn-light:hover{ transform:translateY(-2px); box-shadow:0 12px 24px -8px rgba(0,0,0,.25); }
  .btn-ghost{ font-family:var(--font-mono); font-size:.85rem; color:var(--ink-soft); gap:.4em; }
  .btn-ghost:hover{ color:var(--ink); }
  .btn-ghost svg{ transition:transform .3s var(--ease); }
  .btn-ghost:hover svg{ transform:translateY(3px); }

  .reveal{
    opacity:0; transform:translateY(30px); filter:blur(7px);
    transition:opacity 1.3s var(--ease), transform 1.3s var(--ease), filter 1.3s var(--ease);
  }
  .reveal.is-visible{ opacity:1; transform:translateY(0); filter:blur(0); }

  /* ============ GRAIN + PROGRESS ============ */
  .grain{
    position:fixed; inset:0; z-index:998; pointer-events:none; opacity:.035; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size:180px 180px;
  }
  .scroll-progress{
    position:fixed; top:0; left:0; height:2.5px; width:100%; z-index:999;
    background:var(--signal-deep); transform:scaleX(0); transform-origin:0 50%;
    will-change:transform;
  }

  /* ============ HEADER ============ */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100; padding:1.2rem 0;
    transition:padding .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
    border-bottom:1px solid transparent;
  }
  header.scrolled{
    padding:.7rem 0; background:rgba(250,250,251,.78);
    backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
    border-bottom:1px solid var(--line);
  }
  .nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:2rem; }
  .logo img{ height:26px; width:auto; display:block; }
  .nav-links{ display:flex; align-items:center; gap:2.1rem; font-size:.92rem; color:var(--ink-soft); }
  .nav-links a{ position:relative; padding:.2rem 0; transition:color .25s var(--ease); }
  .nav-links a::after{
    content:''; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:var(--ink);
    transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
  }
  .nav-links a:hover{ color:var(--ink); }
  .nav-links a:hover::after{ transform:scaleX(1); }
  .nav-right{ display:flex; align-items:center; gap:1.5rem; }
  .nav-cta{ padding:.7rem 1.35rem; font-size:.88rem; }
  .nav-toggle{ display:none; width:38px; height:38px; align-items:center; justify-content:center; flex-direction:column; gap:5px; }
  .nav-toggle span{ width:20px; height:1.5px; background:var(--ink); transition:transform .3s var(--ease), opacity .3s var(--ease); }
  .mobile-menu{
    display:none; position:fixed; inset:0; top:0; background:var(--bg); z-index:99;
    padding:6.5rem 2rem 2rem; flex-direction:column; gap:1.75rem;
    font-family:var(--font-display); font-style:italic; font-size:2.1rem; font-weight:400;
    transform:translateY(-100%); transition:transform .45s var(--ease);
  }
  .mobile-menu.open{ transform:translateY(0); display:flex; }

  /* ============ HERO ============ */
  .hero{
    position:relative; min-height:100vh; display:flex; align-items:center;
    padding:calc(var(--sp-xl) + 3.5rem) 0 var(--sp-2xl); overflow:hidden;
  }
  .hero-vignette{
    position:absolute; inset:0; z-index:0; pointer-events:none;
    background:radial-gradient(ellipse 80% 60% at 62% 42%, rgba(147,137,246,.11), transparent 65%);
  }
  .hero-grid{
    position:relative; z-index:1; width:100%;
    display:grid; grid-template-columns:1.05fr 1fr; gap:1.5rem; align-items:center;
  }

  @keyframes hero-in{ from{ opacity:0; transform:translateY(26px); filter:blur(8px); } to{ opacity:1; transform:translateY(0); filter:blur(0); } }
  @keyframes hero-globe-in{ from{ opacity:0; transform:scale(.9); filter:blur(16px); } to{ opacity:1; transform:scale(1); filter:blur(0); } }

  .hero-copy{ position:relative; z-index:2; max-width:33rem; }
  .hero-copy .eyebrow{ animation:hero-in 1s var(--ease) both; animation-delay:.05s; }
  .hero-copy h1{
    font-size:clamp(2.9rem, 5.2vw, 5.4rem); margin-block:1.5rem 1.75rem; line-height:1.06;
    animation:hero-in 1.15s var(--ease) both; animation-delay:.22s;
  }
  .hero-copy p{
    font-size:clamp(1.05rem, 1.3vw, 1.22rem); color:var(--ink-soft); max-width:30rem; line-height:1.65; margin-bottom:2.4rem;
    animation:hero-in 1s var(--ease) both; animation-delay:.55s;
  }
  .hero-actions{
    display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap;
    animation:hero-in 1s var(--ease) both; animation-delay:.75s;
  }
  .hero-globe-stage{
    position:relative; z-index:1; width:100%; max-width:640px; aspect-ratio:1/1;
    margin-inline:auto;
    animation:hero-globe-in 1.8s var(--ease) both; animation-delay:.3s;
  }
  .globe-glow{
    position:absolute; inset:-22%;
    background:radial-gradient(circle at 50% 50%, rgba(147,137,246,.32), rgba(147,137,246,.09) 42%, transparent 68%);
    filter:blur(8px); pointer-events:none;
  }
  .globe-glow-outer{
    position:absolute; inset:-65%; z-index:-1;
    background:radial-gradient(circle at 50% 50%, rgba(147,137,246,.13), transparent 70%);
    filter:blur(26px); pointer-events:none;
  }
  .globe-ring{
    position:absolute; inset:6%; border-radius:50%; border:1px solid var(--line-strong);
    box-shadow:0 40px 90px -30px rgba(109,98,232,.28), inset 0 0 70px rgba(147,137,246,.07);
  }
  #globe-canvas{ position:absolute; inset:0; width:100%; height:100%; cursor:grab; touch-action:pan-y; }
  #globe-canvas:active{ cursor:grabbing; }

  .scroll-cue{
    position:absolute; left:50%; bottom:2.5rem; transform:translateX(-50%); z-index:2;
    display:flex; flex-direction:column; align-items:center; gap:.6rem;
    font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);
    animation:hero-in 1s var(--ease) both; animation-delay:1.1s;
  }
  .scroll-cue-line{ width:1px; height:34px; background:linear-gradient(180deg, var(--ink-faint), transparent); animation:scroll-cue-drift 2.2s ease-in-out infinite; }
  @keyframes scroll-cue-drift{ 0%,100%{ transform:scaleY(1); opacity:.5; } 50%{ transform:scaleY(.55); opacity:1; } }

  /* ============ INTEGRATIONS MARQUEE ============ */
  .integrations{ padding:var(--sp-lg) 0 var(--sp-xl); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .integrations-head{ text-align:center; margin-bottom:2.25rem; }
  .integrations-head p{ color:var(--ink-soft); font-size:.98rem; margin-top:.6rem; }
  .marquee{
    position:relative; overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  }
  .marquee-track{ display:flex; align-items:center; width:max-content; animation:marquee 46s linear infinite; }
  .marquee:hover .marquee-track{ animation-play-state:paused; }
  @keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
  .marquee-item{
    display:flex; align-items:center; justify-content:center;
    padding:0 clamp(2rem, 4vw, 3.5rem); flex-shrink:0;
  }
  .marquee-item img{
    height:28px; width:auto; object-fit:contain;
    opacity:.88;
    transition:transform .4s var(--ease), opacity .35s var(--ease);
  }
  .marquee-item:hover img{ transform:translateY(-3px) scale(1.06); opacity:1; }

  /* ============ SECTION SHELL ============ */
  .section{ padding:var(--sp-2xl) 0; position:relative; isolation:isolate; }
  .section--tint{
    background:linear-gradient(180deg, transparent 0%, var(--surface) 10%, var(--surface) 90%, transparent 100%);
  }
  .float-blob{
    position:absolute; width:440px; height:440px; border-radius:50%;
    background:radial-gradient(circle, rgba(147,137,246,.17), transparent 70%);
    filter:blur(10px); pointer-events:none; z-index:-1;
    animation:blob-drift 20s ease-in-out infinite;
  }
  @keyframes blob-drift{
    0%,100%{ transform:translate(0,0) scale(1); }
    50%{ transform:translate(34px,-28px) scale(1.08); }
  }

  /* ============ SECTION GRID BACKGROUND (Capabilities) ============ */
  .section-grid-bg{
    position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
    --mx:50%; --my:30%;
  }
  .section-grid-bg .grid-layer{
    position:absolute; inset:-60px;
    background-image:
      linear-gradient(var(--line-strong) 1px, transparent 1px),
      linear-gradient(90deg, var(--line-strong) 1px, transparent 1px);
    background-size:44px 44px;
    opacity:.4;
    animation:grid-drift 30s linear infinite;
  }
  .section-grid-bg .grid-layer--highlight{
    opacity:.9;
    background-image:
      linear-gradient(var(--signal) 1px, transparent 1px),
      linear-gradient(90deg, var(--signal) 1px, transparent 1px);
    -webkit-mask-image:radial-gradient(280px circle at var(--mx) var(--my), #000, transparent 72%);
    mask-image:radial-gradient(280px circle at var(--mx) var(--my), #000, transparent 72%);
  }
  @keyframes grid-drift{ from{ background-position:0 0, 0 0; } to{ background-position:44px 44px, 44px 44px; } }
  .section-grid-bg .grid-fade{
    position:absolute; inset:0;
    background:linear-gradient(180deg, var(--bg) 0%, transparent 12%, transparent 88%, var(--bg) 100%);
  }
  .section-grid-bg .grid-orb{
    position:absolute; border-radius:50%; filter:blur(50px); pointer-events:none;
  }
  .section-grid-bg .grid-orb--a{ top:-10%; right:-6%; width:34%; aspect-ratio:1/1; background:radial-gradient(circle, rgba(147,137,246,.24), transparent 70%); }
  .section-grid-bg .grid-orb--b{ bottom:-14%; left:-8%; width:30%; aspect-ratio:1/1; background:radial-gradient(circle, rgba(194,102,92,.14), transparent 70%); }
  @media (prefers-reduced-motion: reduce){
    .section-grid-bg .grid-layer{ animation:none; }
  }
  @media (pointer: coarse){
    .section-grid-bg .grid-layer--highlight{ display:none; }
    .section-grid-bg .grid-orb{ filter:blur(28px); }
  }
  @media (max-width:640px){
    .section-grid-bg .grid-layer{ background-size:34px 34px; animation-duration:40s; }
  }
  .section-head{ max-width:42rem; margin-bottom:var(--sp-xl); }
  .section-head h2{ font-size:clamp(2.05rem, 3.4vw, 3.1rem); margin-top:1rem; letter-spacing:-.025em; }
  .section-head p{ color:var(--ink-soft); font-size:1.05rem; margin-top:1rem; max-width:36rem; }

  /* ============ LEAK ============ */
  .leak-panel{
    background:var(--dark); border-radius:32px; color:#fff; position:relative; overflow:hidden; isolation:isolate;
    padding:var(--sp-2xl) clamp(1.75rem,5vw,4rem);
  }
  .leak-panel::before{
    content:'01'; position:absolute; top:-3rem; left:-1rem;
    font-family:var(--font-mono); font-weight:700; font-size:clamp(7rem,16vw,12rem); line-height:1;
    color:#fff; opacity:.04; z-index:-1; pointer-events:none; user-select:none;
  }
  .leak-glow{
    position:absolute; top:-25%; right:-8%; width:50%; aspect-ratio:1/1; z-index:-1;
    background:radial-gradient(circle, rgba(194,102,92,.16), transparent 65%); filter:blur(10px); pointer-events:none;
  }
  .leak-head{ max-width:34rem; }
  .leak-head h2{ color:#fff; }
  .leak-head h2 .accent-italic{ color:var(--signal); }
  .leak-head p{ color:var(--dark-ink-soft); margin-top:1rem; font-size:1.05rem; }
  .leak-row{
    display:grid; grid-template-columns:repeat(3,1fr); margin-top:3.5rem;
    border-top:1px solid var(--dark-line);
  }
  .leak-cell{
    position:relative; padding:2.5rem 2rem 0; border-right:1px solid var(--dark-line);
    transition:transform .5s var(--ease);
  }
  .leak-cell:last-child{ border-right:none; }
  .leak-cell:hover{ transform:translateY(-4px); }
  .leak-status{
    position:absolute; top:2.5rem; right:2rem; width:7px; height:7px; border-radius:50%;
    background:var(--leak); box-shadow:0 0 0 4px rgba(194,102,92,.22);
    animation:status-pulse 2.2s ease-in-out infinite;
  }
  @keyframes status-pulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.45; transform:scale(1.35); } }
  .leak-value{
    font-family:var(--font-mono); font-weight:700; font-size:clamp(2.5rem,3.9vw,3.5rem); letter-spacing:-.02em;
    font-variant-numeric:tabular-nums; color:#fff; display:flex; align-items:baseline; gap:.15em;
  }
  .leak-value.is-error{ color:var(--leak); font-size:clamp(1.5rem,2.4vw,2rem); animation:flicker 4s steps(1) infinite; }
  @keyframes flicker{ 0%,89%,91%,100%{ opacity:1; } 90%{ opacity:.35; } }
  .leak-value .unit{ font-size:.42em; color:rgba(255,255,255,.35); font-weight:400; }
  .leak-label{ margin-top:1.1rem; color:var(--dark-ink-soft); font-size:.95rem; line-height:1.6; max-width:18rem; padding-bottom:2.5rem; }
  .leak-tag{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:1.5rem; display:block; }


  /* ============ CAPABILITIES INTRO ============ */
  .cap-intro{ max-width:44rem; margin-bottom:var(--sp-2xl); }
  .cap-intro h2{ font-size:clamp(2.15rem,3.6vw,3.25rem); margin-top:1rem; letter-spacing:-.025em; }
  .cap-intro p{ color:var(--ink-soft); font-size:1.08rem; margin-top:1.1rem; }

  /* ============ CHAPTER: SHARED ============ */
  .chapter{ padding:var(--sp-2xl) 0; position:relative; }
  .chapter-outcome{
    font-family:var(--font-display); font-style:italic; font-weight:400; font-size:clamp(1.3rem,1.9vw,1.7rem);
    letter-spacing:-.005em; line-height:1.3; margin-top:2rem; padding-top:2rem; border-top:1px solid var(--line-strong);
  }
  .chapter-outcome span{ color:var(--signal-deep); }

  /* --- Chapter 1: Data Intelligence — centered / radial --- */
  .chapter-radial{ text-align:center; position:relative; isolation:isolate; }
  .chapter-radial::before{
    content:'01'; position:absolute; top:-.5rem; left:50%; transform:translateX(-50%);
    font-family:var(--font-mono); font-weight:700; font-size:2.75rem; line-height:1;
    color:var(--signal-deep); opacity:.14; z-index:-1; pointer-events:none; user-select:none;
    letter-spacing:.02em;
  }
  .radial-stage{
    position:relative; width:100%; max-width:520px; aspect-ratio:1/1; margin:0 auto 1rem;
    display:flex; align-items:center; justify-content:center;
  }
  .radial-ring{
    position:absolute; border:1px solid var(--signal); border-radius:50%; opacity:0;
    animation:radial-ping 4.6s var(--ease) infinite;
  }
  .radial-ring:nth-child(1){ width:20%; height:20%; animation-delay:0s; }
  .radial-ring:nth-child(2){ width:20%; height:20%; animation-delay:.9s; }
  .radial-ring:nth-child(3){ width:20%; height:20%; animation-delay:1.8s; }
  .radial-ring:nth-child(4){ width:20%; height:20%; animation-delay:2.7s; }
  @keyframes radial-ping{
    0%{ width:14%; height:14%; opacity:.55; border-color:var(--signal-deep); }
    100%{ width:100%; height:100%; opacity:0; border-color:var(--signal-pale); }
  }
  .radial-core{
    position:relative; z-index:2; width:14%; aspect-ratio:1/1; border-radius:50%;
    background:var(--signal); box-shadow:0 0 0 10px var(--signal-pale), 0 20px 50px -10px rgba(109,98,232,.5);
  }
  .chapter-radial h3{ font-size:clamp(1.7rem,3vw,2.6rem); max-width:34rem; margin:0 auto; }
  .chapter-radial .chapter-body{ max-width:32rem; margin:1.25rem auto 0; color:var(--ink-soft); font-size:1.05rem; }
  .chapter-radial .chapter-outcome{ max-width:30rem; margin-inline:auto; }

  /* --- Chapter 2: AI Growth Engine — dark / asymmetric / flowing --- */
  .chapter-flow{
    background:var(--dark); border-radius:32px; color:#fff;
    padding:var(--sp-2xl) clamp(1.75rem,5vw,4rem);
    display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center;
    position:relative; overflow:hidden; isolation:isolate;
  }
  .chapter-flow::before{
    content:'02'; position:absolute; top:1.75rem; right:2rem;
    font-family:var(--font-mono); font-weight:700; font-size:2.75rem; line-height:1;
    color:var(--signal); opacity:.22; z-index:-1; pointer-events:none; user-select:none;
    letter-spacing:.02em;
  }
  .chapter-flow-glow{
    position:absolute; top:-20%; left:-10%; width:55%; aspect-ratio:1/1;
    background:radial-gradient(circle, rgba(147,137,246,.28), transparent 65%); filter:blur(8px); pointer-events:none;
  }
  .chapter-flow h3{ color:#fff; font-size:clamp(1.7rem,3vw,2.6rem); position:relative; z-index:1; }
  .chapter-flow .chapter-body{ color:var(--dark-ink-soft); font-size:1.05rem; margin-top:1.1rem; max-width:28rem; position:relative; z-index:1; }
  .chapter-flow .chapter-outcome{ border-top:1px solid var(--dark-line); position:relative; z-index:1; }
  .chapter-flow .chapter-outcome span{ color:var(--signal); }

  .node-graph-wrap{ position:relative; z-index:1; width:100%; }
  .node-graph-svg{ width:100%; height:auto; overflow:visible; }
  .node-line{
    stroke:var(--dark-line); stroke-width:1.25; fill:none;
    stroke-dasharray:230; stroke-dashoffset:230;
    transition:stroke-dashoffset 1.6s var(--ease), stroke 1.6s var(--ease);
  }
  .chapter.is-visible .node-line{ stroke-dashoffset:0; stroke:rgba(147,137,246,.35); }
  .node-marker-glow{ fill:rgba(147,137,246,.16); }
  .node-marker{ fill:var(--signal); }
  .node-core-ring{
    fill:none; stroke:var(--signal); stroke-width:1; opacity:0;
    transform-origin:200px 200px; animation:core-ping 3.8s var(--ease) infinite;
  }
  @keyframes core-ping{ 0%{ transform:scale(1); opacity:.5; } 100%{ transform:scale(2.6); opacity:0; } }
  .node-core{ fill:var(--signal); }
  .node-label{
    font-family:var(--font-mono); font-size:11px; letter-spacing:.03em; text-transform:uppercase;
    fill:var(--dark-ink-soft);
  }

  .app-callout{
    margin-top:2rem; padding:1.25rem 1.4rem; border-radius:16px;
    background:rgba(147,137,246,.1); border:1px dashed rgba(147,137,246,.4);
    display:flex; gap:1rem; align-items:flex-start; position:relative; z-index:1; max-width:30rem;
  }
  .app-callout-icon{
    width:30px; height:30px; border-radius:9px; background:var(--signal); flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:700; color:#14141C; font-size:.85rem;
  }
  .app-callout-text{ font-size:.9rem; color:var(--dark-ink-soft); line-height:1.55; }
  .app-callout-text strong{ color:#fff; display:block; margin-bottom:.2rem; font-size:.95rem; }

  /* --- Chapter 3: Tailored Dashboard — split / product mockup --- */
  .chapter-dash{ display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center; position:relative; isolation:isolate; }
  .chapter-dash::before{
    content:'03'; position:absolute; top:-.5rem; right:0;
    font-family:var(--font-mono); font-weight:700; font-size:2.75rem; line-height:1;
    color:var(--signal-deep); opacity:.14; z-index:-1; pointer-events:none; user-select:none;
    letter-spacing:.02em;
  }
  .chapter-dash h3{ font-size:clamp(1.7rem,3vw,2.6rem); }
  .chapter-dash .chapter-body{ color:var(--ink-soft); font-size:1.05rem; margin-top:1.1rem; max-width:28rem; }

  .dash-mock{
    background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:1.75rem;
    transform:perspective(1400px) rotateY(-6deg) rotateX(2deg); box-shadow:0 50px 90px -40px rgba(30,25,80,.28);
    transition:transform .6s var(--ease);
  }
  .dash-mock:hover{ transform:perspective(1400px) rotateY(0deg) rotateX(0deg); }
  .dash-mock-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem; }
  .dash-mock-head span{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); }
  .dash-dots{ display:flex; gap:5px; }
  .dash-dots i{ width:7px; height:7px; border-radius:50%; background:var(--line-strong); display:block; }
  .dash-row{ display:flex; justify-content:space-between; align-items:center; padding:1rem 0; border-top:1px solid var(--line); }
  .dash-row:first-of-type{ border-top:none; }
  .dash-row-label{ font-size:.85rem; color:var(--ink-soft); }
  .dash-row-value{ font-family:var(--font-mono); font-weight:700; font-size:1.2rem; color:var(--ink); }
  .dash-bar-track{ height:5px; border-radius:4px; background:var(--surface-2); margin-top:.5rem; overflow:hidden; }
  .dash-bar-fill{ height:100%; border-radius:4px; background:var(--signal); width:0%; transition:width 1.4s var(--ease); }
  .dash-mock-foot{ margin-top:1.25rem; font-size:.72rem; color:var(--ink-faint); font-style:italic; }

  /* ============ PROCESS ============ */
  .process-track{ position:relative; margin-top:3.5rem; }
  .process-line{
    position:absolute; top:15px; left:0; right:0; height:1px; background:var(--line-strong);
  }
  .process-line-fill{
    position:absolute; top:0; left:0; height:1px; width:0; background:var(--signal-deep);
    transition:width 1.8s var(--ease);
  }
  .process-track.is-visible .process-line-fill{ width:100%; }
  .process-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.5rem; position:relative; }
  .process-item{ position:relative; }
  .process-node{
    width:31px; height:31px; border-radius:50%; background:var(--bg); border:1px solid var(--line-strong);
    display:flex; align-items:center; justify-content:center; position:relative; z-index:1; margin-bottom:2rem;
    transition:border-color .5s var(--ease), background .5s var(--ease);
  }
  .process-item.is-active .process-node{ border-color:var(--signal-deep); background:var(--signal-pale); }
  .process-node i{ width:6px; height:6px; border-radius:50%; background:var(--ink-faint); transition:background .5s var(--ease); }
  .process-item.is-active .process-node i{ background:var(--signal-deep); }
  .process-num{
    font-family:var(--font-display); font-style:italic; font-size:clamp(2.5rem,4vw,3.4rem);
    color:var(--line-strong); display:block; margin-bottom:.75rem; line-height:1; transition:color .6s var(--ease);
  }
  .process-item.is-active .process-num{ color:var(--signal-deep); }
  .process-item h3{ font-size:1.2rem; margin-bottom:.7rem; }
  .process-item p{ color:var(--ink-soft); font-size:.93rem; line-height:1.6; max-width:22rem; }

  /* ============ PROOF ============ */
  .proof-layout{ display:grid; grid-template-columns:1.5fr 1fr; gap:3.5rem; margin-top:3.5rem; align-items:start; }
  .proof-featured{ position:relative; }
  .proof-featured .proof-mark{
    font-family:var(--font-display); font-style:italic; font-size:6rem; line-height:1; color:var(--signal-pale);
    display:block; margin-bottom:-1.5rem; margin-left:-.25rem;
  }
  .proof-featured .proof-quote{
    font-family:var(--font-display); font-size:clamp(1.6rem,2.6vw,2.15rem); line-height:1.35; letter-spacing:-.01em; color:var(--ink);
  }
  .proof-featured .proof-attr{ margin-top:1.75rem; }
  .proof-side{ display:flex; flex-direction:column; gap:2.25rem; }
  .proof-side-item{ padding-top:2rem; border-top:1px solid var(--line); }
  .proof-side-item:first-child{ padding-top:0; border-top:none; }
  .proof-quote{ font-family:var(--font-body); font-size:.98rem; line-height:1.55; color:var(--ink-soft); }
  .proof-attr{ margin-top:1.1rem; font-family:var(--font-mono); font-size:.72rem; color:var(--ink-faint); letter-spacing:.03em; text-transform:uppercase; }
  .proof-note{ margin-top:2.5rem; font-size:.82rem; color:var(--ink-faint); font-style:italic; }


  /* ============ FAQ ============ */
  .faq-list{ margin-top:2.5rem; border-top:1px solid var(--line); max-width:52rem; }
  .faq-item{ border-bottom:1px solid var(--line); }
  .faq-item summary{
    list-style:none; cursor:pointer; padding:1.5rem 0; display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-q{ display:flex; align-items:baseline; gap:1rem; }
  .faq-num{ font-family:var(--font-mono); font-size:.78rem; color:var(--signal-deep); flex-shrink:0; }
  .faq-q h3{ font-family:var(--font-body); font-weight:600; font-size:1.05rem; letter-spacing:0; line-height:1.4; }
  .faq-icon{
    flex-shrink:0; width:28px; height:28px; border-radius:50%; border:1px solid var(--line-strong);
    display:flex; align-items:center; justify-content:center; position:relative; transition:transform .35s var(--ease), border-color .3s var(--ease);
  }
  .faq-icon::before, .faq-icon::after{ content:''; position:absolute; background:var(--ink); transition:transform .3s var(--ease); }
  .faq-icon::before{ width:10px; height:1.4px; }
  .faq-icon::after{ width:1.4px; height:10px; }
  .faq-item[open] .faq-icon{ transform:rotate(180deg); border-color:var(--signal); }
  .faq-item[open] .faq-icon::after{ transform:scaleY(0); }
  .faq-answer{ padding:0 0 1.75rem; max-width:44rem; color:var(--ink-soft); font-size:.96rem; line-height:1.65; }

  /* ============ CTA / CONTACT ============ */
  .cta-section{ background:var(--dark); border-radius:32px; margin-inline:var(--pad-inline); padding:var(--sp-2xl) var(--pad-inline); color:#fff; position:relative; overflow:hidden; }
  .cta-glow{ position:absolute; top:-30%; right:-10%; width:60%; aspect-ratio:1/1; background:radial-gradient(circle, rgba(147,137,246,.35), transparent 65%); filter:blur(10px); pointer-events:none; }
  .cta-head{ text-align:center; max-width:38rem; margin-inline:auto; position:relative; z-index:1; }
  .cta-head h2{ color:#fff; font-size:clamp(1.9rem,3.2vw,2.9rem); margin-top:1rem; }
  .cta-head h2 .accent-italic{ color:var(--signal); }
  .cta-head p{ color:rgba(255,255,255,.62); margin-top:1rem; font-size:1.05rem; }
  .calendly-wrap{ margin-top:2.75rem; background:#fff; border-radius:20px; overflow:hidden; position:relative; z-index:1; }
  .calendly-inline-widget{ min-width:320px; height:700px; }

  /* ============ FOOTER ============ */
  footer{ padding:var(--sp-xl) 0 var(--sp-lg); }
  .footer-inner{ display:flex; justify-content:space-between; align-items:center; padding-top:2rem; border-top:1px solid var(--line); flex-wrap:wrap; gap:1.5rem; }
  .footer-logo img{ height:22px; width:auto; }
  .footer-links{ display:flex; gap:1.75rem; font-size:.85rem; color:var(--ink-soft); flex-wrap:wrap; }
  .footer-copy{ font-family:var(--font-mono); font-size:.75rem; color:var(--ink-faint); }

  /* ============ RESPONSIVE ============ */
  @media (max-width:1024px){
    .hero{ min-height:auto; display:block; padding-top:calc(var(--sp-xl) + 4rem); padding-bottom:2rem; }
    .hero-grid{ display:block; }
    .hero-vignette{ background:radial-gradient(ellipse 90% 50% at 50% 15%, rgba(147,137,246,.11), transparent 65%); }
    .hero-copy{ max-width:none; text-align:left; }
    .hero-copy p{ max-width:none; }
    .hero-globe-stage{ width:min(78vw, 440px); margin:1rem auto 0; }
    .scroll-cue{ display:none; }
    .leak-row{ grid-template-columns:1fr; }
    .leak-cell{ border-right:none; border-bottom:1px solid var(--dark-line); padding-bottom:2rem; }
    .leak-cell:last-child{ border-bottom:none; }
    .process-list{ grid-template-columns:1fr; gap:2.5rem; }
    .process-line{ display:none; }
    .proof-layout{ grid-template-columns:1fr; gap:2.5rem; }
    .chapter-flow{ grid-template-columns:1fr; }
    .chapter-dash{ grid-template-columns:1fr; }
    .dash-mock{ transform:none; order:-1; }
    .nav-links{ display:none; }
    .nav-toggle{ display:flex; }
  }
  @media (max-width:640px){
    :root{ --sp-2xl:4rem; --sp-3xl:5rem; --sp-xl:3rem; --pad-inline:1.25rem; }
    .hero{ padding-top:calc(var(--sp-xl) + 3.2rem); }
    .hero-copy h1{ font-size:clamp(2.35rem, 9vw, 3rem); }
    .hero-globe-stage{ width:min(84vw, 360px); }
    .btn-dark, .btn-light{ padding:.85rem 1.4rem; font-size:.9rem; }
    .section-head h2, .cap-intro h2{ font-size:clamp(1.75rem,7vw,2.3rem); }
    .leak-panel, .chapter-flow, .cta-section{ border-radius:22px; padding:2.25rem 1.5rem; }
    .leak-value{ font-size:clamp(2rem,9vw,2.6rem); }
    .node-graph-wrap{ margin-top:2rem; }
    .node-label{ font-size:13.5px; }
    .cta-section{ margin-inline:1rem; }
    .nav-right .btn-dark{ display:none; }
    .marquee-item{ padding:0 1.5rem; }
    .marquee-item img{ height:22px; }
    .proof-featured .proof-quote{ font-size:1.5rem; }
    .dash-mock{ padding:1.4rem; }
  }