@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;src:url(/assets/fonts/plus-jakarta-sans-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;src:url(/assets/fonts/plus-jakarta-sans-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

  /* ---------- Tokens ---------- */
  /* Quest360 glass rebrand: light-first, warm, one signature colour per pillar.
     The legacy token names below (--blue, --text, --p-*, --ink*, ...) are aliases onto the
     new system, so every existing component inherits the new look without per-rule edits. */
  :root{
    color-scheme: light;
    --bg: #FFFFFF;
    --bg-soft: #F6F7FB;
    --surface: #FFFFFF;
    --surface-soft: #F8F9FC;
    --border: rgba(23,24,40,0.09);
    --border-strong: rgba(23,24,40,0.16);
    --fg: #191A23;
    --fg-muted: #585B6E;
    --fg-faint: #6B6E80;
    --accent: #2F6FED;
    --accent-deep: #1E55C9;
    --accent-wash: rgba(47,111,237,0.10);
    --on-accent: #FFFFFF;

    --c-build: #2F6FED;      --c-build-wash: rgba(47,111,237,0.12);
    --c-manage: #0D9C9E;     --c-manage-wash: rgba(13,156,158,0.12);
    --c-protect: #F0593D;    --c-protect-wash: rgba(240,89,61,0.12);
    --c-automate: #8257E5;   --c-automate-wash: rgba(130,87,229,0.12);
    --c-grow: #1FA35C;       --c-grow-wash: rgba(31,163,92,0.12);

    --shadow-sm: 0 1px 2px rgba(23,24,43,0.06), 0 1px 1px rgba(23,24,43,0.04);
    --shadow-md: 0 10px 24px -10px rgba(23,24,43,0.16), 0 2px 6px rgba(23,24,43,0.05);
    --shadow-lg: 0 24px 56px -18px rgba(23,24,43,0.22), 0 4px 10px rgba(23,24,43,0.05);

    --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --radius-lg: 24px;
    --radius-md: 16px;

    --glass-bg: rgba(255,255,255,0.55);
    --glass-bg-strong: rgba(255,255,255,0.72);
    --glass-border: rgba(255,255,255,0.65);
    --glass-highlight: rgba(255,255,255,0.8);
    --glass-blur: 22px;

    --amb-build: rgba(47,111,237,0.22);
    --amb-manage: rgba(13,156,158,0.20);
    --amb-protect: rgba(240,89,61,0.18);
    --amb-automate: rgba(130,87,229,0.20);
    --amb-grow: rgba(31,163,92,0.18);

    /* ---- legacy aliases (do not use in new rules) ---- */
    --font-body: var(--font-display);
    --font-mono: var(--font-display);
    --navy: var(--fg);
    --navy-2: var(--fg);
    --blue: var(--accent-deep);
    --blue-2: #5B93FF;
    --blue-soft: var(--accent-wash);
    --blue-soft-strong: rgba(47,111,237,0.18);
    --bg-alt: rgba(255,255,255,0.38);
    --text: var(--fg);
    --text-mute: var(--fg-muted);
    --shadow: var(--shadow-md);
    --shadow-lift: var(--shadow-lg);
    --grid-dot: rgba(23,24,40,0.08);
    --compass-shadow: var(--shadow-lg);

    --ink: var(--glass-bg-strong);
    --ink-2: var(--glass-bg-strong);
    --ink-line: var(--border);
    --ink-text: var(--fg);
    --ink-mute: var(--fg-muted);
    --ink-blue: var(--accent-deep);
    --ink-protect: var(--c-protect);

    --warm: #F0900F;
    --warm-2: #FFAA33;
    --warm-soft: rgba(240,144,15,0.12);
    --warm-soft-strong: rgba(240,144,15,0.22);

    --p-build: var(--c-build);       --p-build-soft: var(--c-build-wash);       --p-build-soft-strong: rgba(47,111,237,0.20);
    --p-manage: var(--c-manage);     --p-manage-soft: var(--c-manage-wash);     --p-manage-soft-strong: rgba(13,156,158,0.20);
    --p-protect: var(--c-protect);   --p-protect-soft: var(--c-protect-wash);   --p-protect-soft-strong: rgba(240,89,61,0.20);
    --p-automate: var(--c-automate); --p-automate-soft: var(--c-automate-wash); --p-automate-soft-strong: rgba(130,87,229,0.20);
    --p-grow: var(--c-grow);         --p-grow-soft: var(--c-grow-wash);         --p-grow-soft-strong: rgba(31,163,92,0.20);
  }

  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      color-scheme: dark;
      --bg: #14151D;
      --bg-soft: #1A1B26;
      --surface: #1E1F2B;
      --surface-soft: #242534;
      --border: rgba(247,248,250,0.09);
      --border-strong: rgba(247,248,250,0.16);
      --fg: #F3F4F8;
      --fg-muted: #ABAEBC;
      --fg-faint: #8D90A3;
      --accent: #6E97FF;
      --accent-deep: #8FADFF;
      --accent-wash: rgba(110,151,255,0.16);
      --on-accent: #0B1020;
      --c-build: #6E97FF;      --c-build-wash: rgba(110,151,255,0.16);
      --c-manage: #2DD4D1;     --c-manage-wash: rgba(45,212,209,0.16);
      --c-protect: #FF8669;    --c-protect-wash: rgba(255,134,105,0.16);
      --c-automate: #A98CF8;   --c-automate-wash: rgba(169,140,248,0.16);
      --c-grow: #3FCB84;       --c-grow-wash: rgba(63,203,132,0.16);
      --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
      --shadow-md: 0 10px 24px -10px rgba(0,0,0,0.45);
      --shadow-lg: 0 24px 56px -18px rgba(0,0,0,0.55);
      --glass-bg: rgba(30,31,43,0.52);
      --glass-bg-strong: rgba(30,31,43,0.75);
      --glass-border: rgba(255,255,255,0.1);
      --glass-highlight: rgba(255,255,255,0.14);
      --amb-build: rgba(110,151,255,0.22);
      --amb-manage: rgba(45,212,209,0.18);
      --amb-protect: rgba(255,134,105,0.18);
      --amb-automate: rgba(169,140,248,0.2);
      --amb-grow: rgba(63,203,132,0.18);
      --blue-2: #8FADFF;
      --blue-soft-strong: rgba(110,151,255,0.24);
      --bg-alt: rgba(30,31,43,0.38);
      --grid-dot: rgba(247,248,250,0.09);
      --warm: #FFAC3D; --warm-2: #FFC670; --warm-soft: rgba(255,172,61,0.16); --warm-soft-strong: rgba(255,172,61,0.26);
      --p-build-soft-strong: rgba(110,151,255,0.26);
      --p-manage-soft-strong: rgba(45,212,209,0.26);
      --p-protect-soft-strong: rgba(255,134,105,0.26);
      --p-automate-soft-strong: rgba(169,140,248,0.26);
      --p-grow-soft-strong: rgba(63,203,132,0.26);
    }
  }
  :root[data-theme="dark"]{
    color-scheme: dark;
    --bg: #14151D;
    --bg-soft: #1A1B26;
    --surface: #1E1F2B;
    --surface-soft: #242534;
    --border: rgba(247,248,250,0.09);
    --border-strong: rgba(247,248,250,0.16);
    --fg: #F3F4F8;
    --fg-muted: #ABAEBC;
    --fg-faint: #8D90A3;
    --accent: #6E97FF;
    --accent-deep: #8FADFF;
    --accent-wash: rgba(110,151,255,0.16);
    --on-accent: #0B1020;
    --c-build: #6E97FF;      --c-build-wash: rgba(110,151,255,0.16);
    --c-manage: #2DD4D1;     --c-manage-wash: rgba(45,212,209,0.16);
    --c-protect: #FF8669;    --c-protect-wash: rgba(255,134,105,0.16);
    --c-automate: #A98CF8;   --c-automate-wash: rgba(169,140,248,0.16);
    --c-grow: #3FCB84;       --c-grow-wash: rgba(63,203,132,0.16);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 10px 24px -10px rgba(0,0,0,0.45);
    --shadow-lg: 0 24px 56px -18px rgba(0,0,0,0.55);
    --glass-bg: rgba(30,31,43,0.52);
    --glass-bg-strong: rgba(30,31,43,0.75);
    --glass-border: rgba(255,255,255,0.1);
    --glass-highlight: rgba(255,255,255,0.14);
    --amb-build: rgba(110,151,255,0.22);
    --amb-manage: rgba(45,212,209,0.18);
    --amb-protect: rgba(255,134,105,0.18);
    --amb-automate: rgba(169,140,248,0.2);
    --amb-grow: rgba(63,203,132,0.18);
    --blue-2: #8FADFF;
    --blue-soft-strong: rgba(110,151,255,0.24);
    --bg-alt: rgba(30,31,43,0.38);
    --grid-dot: rgba(247,248,250,0.09);
    --warm: #FFAC3D; --warm-2: #FFC670; --warm-soft: rgba(255,172,61,0.16); --warm-soft-strong: rgba(255,172,61,0.26);
    --p-build-soft-strong: rgba(110,151,255,0.26);
    --p-manage-soft-strong: rgba(45,212,209,0.26);
    --p-protect-soft-strong: rgba(255,134,105,0.26);
    --p-automate-soft-strong: rgba(169,140,248,0.26);
    --p-grow-soft-strong: rgba(63,203,132,0.26);
  }


  *{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

  body{
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  img,canvas,svg{ display:block; max-width:100%; }

  h1,h2,h3,h4{
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.1;
    text-wrap: balance;
    margin: 0;
    color: var(--text);
  }

  p{ margin: 0; }
  a{ color: inherit; text-decoration: none; }

  .eyebrow{
    font-family: var(--font-mono);
    font-size: 0.76rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--blue);
  }

  .wrap{
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 48px);
  }

  section{ position: relative; }
  ::selection{ background: var(--blue); color: #fff; }

  a:focus-visible, button:focus-visible, .btn:focus-visible{
    outline: 2px solid var(--blue);
    outline-offset: 3px;
    border-radius: 4px;
  }

  /* ---------- Buttons ---------- */
  .btn{
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.85em 1.55em;
    border-radius: 10px;
    border: 1.5px solid transparent;
    background: transparent;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  }
  .btn:hover{ transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(10,28,61,0.35); }
  .btn:active{ transform: translateY(0); }
  .btn::before{
    content:''; position:absolute; top:0; bottom:0; left:0; width:36%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.32), transparent);
    transform: translateX(-120%) skewX(-12deg); pointer-events:none;
  }
  .btn:hover::before{ animation: q360-shine .85s ease; }
  @media (prefers-reduced-motion: reduce){ .btn:hover::before{ animation:none; } .btn:hover{ transform:none; } }
  .btn-primary{ background: linear-gradient(135deg, var(--blue-2), var(--blue) 62%); color: #fff; box-shadow: 0 1px 1px rgba(10,20,40,0.06); }
  .btn-primary:hover{ background: linear-gradient(135deg, var(--blue-2), #0064D1 62%); }
  .btn-outline-navy{ border-color: var(--border-strong); color: var(--text); }
  .btn-outline-navy:hover{ background: var(--blue-soft); border-color: var(--blue); }
  .btn-outline-ink{ border-color: var(--ink-line); color: var(--ink-text); }
  .btn-outline-ink:hover{ background: rgba(243,246,251,0.08); }
  .btn-white{ background: #fff; color: var(--navy); }
  .btn-white:hover{ background: #E8F0FE; }
  .btn-whatsapp{ background:#22C35E; color:#fff; }
  .btn-whatsapp:hover{ background:#1CA750; }
  .btn-sm{ padding: 0.65em 1.2em; font-size: 0.88rem; }
  .btn-block{ width:100%; justify-content:center; }

  /* ---------- Nav ---------- */
  .nav{
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--bg) 90%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
  }
  .nav-row{
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px clamp(20px, 5vw, 48px);
    max-width: 1180px; margin: 0 auto;
    gap: 24px;
  }
  .brand{ display: flex; align-items: center; flex-shrink: 0; }
  .brand img{ height: 30px; width: auto; flex-shrink: 0; }
  .brand .brand-logo-dark{ display: none; }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .brand .brand-logo-light{ display: none; }
    :root:not([data-theme="light"]) .brand .brand-logo-dark{ display: block; }
  }
  :root[data-theme="dark"] .brand .brand-logo-light{ display: none; }
  :root[data-theme="dark"] .brand .brand-logo-dark{ display: block; }
  .nav-links{
    display: flex; align-items: center; gap: clamp(14px, 2.2vw, 26px);
    font-size: 0.92rem; font-weight: 500;
    list-style: none; margin: 0; padding: 0;
  }
  .nav-links > li > a{ color: var(--text-mute); padding: 6px 2px; border-bottom: 2px solid transparent; }
  .nav-links > li > a:hover{ color: var(--navy); border-color: var(--blue); }
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .nav-links > li > a:hover{ color: var(--text); } }
  :root[data-theme="dark"] .nav-links > li > a:hover{ color: var(--text); }
  .nav-cta{ display: flex; align-items: center; gap: 14px; }
  .nav-toggle{
    display: none; background: none; border: 1px solid var(--border-strong);
    border-radius: 8px; padding: 8px 10px; font-family: var(--font-mono);
    font-size: 0.85rem; color: var(--text);
  }
  .mobile-panel{ display: none; }

  @media (max-width: 900px){
    .nav-links{ display: none; }
    .nav-toggle{ display: inline-block; }
    .nav-cta .btn-primary{ display: none; }
    .mobile-panel.open{
      display: flex; flex-direction: column; gap: 2px;
      padding: 8px clamp(20px,5vw,48px) 18px;
      border-bottom: 1px solid var(--border);
      background: var(--bg);
      max-height: 75vh; overflow-y: auto;
    }
    .mobile-panel > a{
      padding: 12px 4px; border-bottom: 1px solid var(--border);
      font-size: 0.98rem; color: var(--text);
    }
    .mobile-panel .mp-start-project{
      width: 100%; justify-content: center; margin-bottom: 10px;
    }
  }

  /* ---------- Nav dropdowns (desktop) ---------- */
  .nav-item-drop{ position: relative; }
  .nav-drop-btn{
    display:inline-flex; align-items:center; gap:5px; background:none; border:none; cursor:pointer;
    font-family: var(--font-body); font-weight:500; font-size:0.92rem; color:var(--text-mute); padding:6px 2px;
  }
  .nav-drop-btn:hover{ color:var(--navy); }
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .nav-drop-btn:hover{ color:var(--text); } }
  :root[data-theme="dark"] .nav-drop-btn:hover{ color:var(--text); }
  .nav-drop-btn svg{ width:13px; height:13px; stroke:currentColor; transition: transform .15s ease; }
  .nav-item-drop:hover .nav-drop-btn svg, .nav-item-drop:focus-within .nav-drop-btn svg{ transform: rotate(180deg); }
  .nav-drop-panel{
    position:absolute; top:100%; left:50%; transform:translate(-50%,-6px);
    margin-top:14px; width:300px; background:var(--surface); border:1px solid var(--border);
    border-radius:16px; box-shadow:var(--shadow); padding:10px; opacity:0; visibility:hidden;
    transition: opacity .15s ease, transform .15s ease, visibility .15s; z-index:60;
  }
  .nav-item-drop:hover .nav-drop-panel, .nav-item-drop:focus-within .nav-drop-panel{
    opacity:1; visibility:visible; transform:translate(-50%,0);
  }
  .nav-drop-panel a{
    display:flex; align-items:flex-start; gap:12px; padding:10px; border-radius:10px; color:var(--text);
    transition: background .12s ease;
  }
  .nav-drop-panel a:hover{ background: var(--blue-soft); }
  .nav-drop-panel .di{
    width:32px; height:32px; border-radius:9px; background: linear-gradient(150deg, var(--blue-soft-strong), var(--blue-soft)); flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
  }
  .nav-drop-panel .di svg{ width:16px; height:16px; stroke:var(--blue); }
  /* Per-pillar coloring for the Services mega-menu (Build, Manage, Protect, Automate, Grow, in DOM order). */
  .nav-links > .nav-item-drop:first-of-type .nav-drop-panel a:nth-of-type(2) .di{ background:linear-gradient(150deg, var(--p-manage-soft-strong), var(--p-manage-soft)); }
  .nav-links > .nav-item-drop:first-of-type .nav-drop-panel a:nth-of-type(2) .di svg{ stroke:var(--p-manage); }
  .nav-links > .nav-item-drop:first-of-type .nav-drop-panel a:nth-of-type(3) .di{ background:linear-gradient(150deg, var(--p-protect-soft-strong), var(--p-protect-soft)); }
  .nav-links > .nav-item-drop:first-of-type .nav-drop-panel a:nth-of-type(3) .di svg{ stroke:var(--p-protect); }
  .nav-links > .nav-item-drop:first-of-type .nav-drop-panel a:nth-of-type(4) .di{ background:linear-gradient(150deg, var(--p-automate-soft-strong), var(--p-automate-soft)); }
  .nav-links > .nav-item-drop:first-of-type .nav-drop-panel a:nth-of-type(4) .di svg{ stroke:var(--p-automate); }
  .nav-links > .nav-item-drop:first-of-type .nav-drop-panel a:nth-of-type(5) .di{ background:linear-gradient(150deg, var(--p-grow-soft-strong), var(--p-grow-soft)); }
  .nav-links > .nav-item-drop:first-of-type .nav-drop-panel a:nth-of-type(5) .di svg{ stroke:var(--p-grow); }
  .nav-drop-panel .dt{ font-size:0.92rem; font-weight:600; }
  .nav-drop-panel .dd{ font-size:0.8rem; color:var(--text-mute); margin-top:2px; }
  .nav-drop-panel .dall{ margin-top:4px; padding-top:12px; border-top:1px solid var(--border); font-size:0.85rem; font-weight:600; color:var(--blue); justify-content:center; }
  .nav-active{ color: var(--navy) !important; }
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .nav-active{ color: var(--text) !important; } }
  :root[data-theme="dark"] .nav-active{ color: var(--text) !important; }

  /* mobile details/summary subnav */
  .mobile-panel details{ border-bottom:1px solid var(--border); }
  .mobile-panel summary{
    padding:12px 4px; font-size:0.98rem; color:var(--text); cursor:pointer; list-style:none;
    display:flex; align-items:center; justify-content:space-between;
  }
  .mobile-panel summary::-webkit-details-marker{ display:none; }
  .mobile-panel summary::after{ content:'+'; font-family:var(--font-mono); color:var(--text-mute); }
  .mobile-panel details[open] summary::after{ content:'\2212'; }
  .mobile-panel details .sub-links{ display:flex; flex-direction:column; padding:0 0 10px 10px; }
  .mobile-panel details .sub-links a{ border-bottom:none; padding:9px 4px; font-size:0.92rem; color:var(--text-mute); }

  /* ---------- Page routing ---------- */
  .page{ display:none; }
  .page.active{ display:block; }

  /* ---------- Hero (home) ---------- */
  .hero{ background: radial-gradient(circle, var(--grid-dot) 1px, transparent 1.6px) 0 0/24px 24px, var(--bg-alt); overflow: hidden; position:relative; }
  .hero-grid{
    max-width: 1180px; margin: 0 auto;
    padding: clamp(16px, 2vw + 1.6vh, 40px) clamp(20px,5vw,48px) clamp(20px, 2.4vw + 1.6vh, 44px);
    display: grid; grid-template-columns: 1.08fr 0.92fr;
    gap: clamp(20px, 5vw, 48px);
    align-items: center;
    position: relative; z-index: 1;
  }
  .hero-eyebrow{ margin-bottom: 12px; }
  .hero-badge{
    display:inline-flex; align-items:center; gap:8px; margin-bottom:12px;
    background:var(--blue-soft); border:1px solid var(--blue-soft-strong); color:var(--blue);
    font-size:0.82rem; font-weight:600; padding:7px 14px; border-radius:999px; text-decoration:none;
  }
  .hero-badge:hover{ background:var(--blue-soft-strong); }
  .hero-badge svg{ width:14px; height:14px; stroke:currentColor; flex-shrink:0; }
  .stat-pill{
    display:inline-flex; align-items:center; gap:8px; margin-bottom:14px;
    background:var(--p-protect-soft); border:1px solid var(--p-protect-soft-strong); color:var(--p-protect);
    font-size:0.82rem; font-weight:600; padding:7px 14px; border-radius:999px;
  }
  .stat-pill svg{ width:14px; height:14px; stroke:currentColor; flex-shrink:0; }
  .hero h1{
    font-size: clamp(1.85rem, 2.6vw + 1.6vh, 3.2rem);
    letter-spacing: -0.01em;
  }
  .hero h1 em{ font-style: normal; color: var(--blue); }
  .hero-sub{
    margin-top: 14px; max-width: 46ch;
    color: var(--text-mute); font-size: clamp(0.95rem, 0.5vw + 0.8vh, 1.07rem);
  }
  .hero-ctas{ display: flex; flex-wrap: wrap; gap: 14px; margin-top: 22px; }
  .hero-trust{
    display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 22px;
    font-size: 0.87rem; color: var(--text-mute); font-weight: 500;
  }
  .hero-trust span{ display: inline-flex; align-items: center; gap: 7px; }
  .hero-trust svg{ width: 15px; height: 15px; stroke: var(--blue); flex-shrink: 0; }

  .compass-wrap{
    position: relative; width: 100%; max-width: min(460px, 54vh); margin: 0 auto;
    filter: drop-shadow(var(--compass-shadow));
  }
  .compass-chip{
    position:absolute; display:flex; align-items:center; justify-content:center;
    width:38px; height:38px; border-radius:50%; background:var(--surface);
    border:1.5px solid var(--border-strong); box-shadow:0 10px 22px -12px rgba(10,28,61,0.32); z-index:2;
  }
  .compass-chip svg{ width:17px; height:17px; stroke:var(--blue); }
  .compass-chip.c1{ top:-2%; right:-4%; }
  .compass-chip.c2{ bottom:2%; left:-6%; }
  @media (max-width:900px){ .compass-chip{ display:none; } }
  #compass{ display:block; width: 100%; aspect-ratio: 1/1; }

  /* ---------- Breadcrumb + inner hero (non-home pages) ---------- */
  .breadcrumb{ font-size:0.85rem; color:var(--text-mute); display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
  .breadcrumb a{ color:var(--text-mute); }
  .breadcrumb a:hover{ color:var(--blue); }
  .breadcrumb .sep{ opacity:0.5; }

  .inner-hero{ background: radial-gradient(circle, var(--grid-dot) 1px, transparent 1.6px) 0 0/24px 24px, var(--bg-alt); padding: clamp(26px,4vw,38px) 0 clamp(44px,6vw,64px); position:relative; overflow:hidden; }
  .inner-hero .breadcrumb{ margin-bottom: 22px; }
  .inner-hero h1{ font-size: clamp(2rem, 3.6vw, 2.8rem); margin-top: 12px; max-width: 20ch; }
  .inner-hero p.lead{ margin-top: 16px; max-width: 62ch; color: var(--text-mute); font-size: 1.05rem; }
  .inner-hero .hero-ctas{ margin-top: 28px; }
  .inner-hero .wrap{ position:relative; z-index:1; }
  .inner-hero-grid{ display:grid; grid-template-columns:1.3fr 0.9fr; gap:clamp(24px,4vw,48px); align-items:center; }
  @media (max-width:900px){ .inner-hero-grid{ grid-template-columns:1fr; } .inner-hero-grid .hero-orbit{ display:none; } }

  /* ---------- Value / feature cards: hover ---------- */
  .value-card{ transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
  .value-card:hover{ transform: translateY(-4px); box-shadow: 0 16px 34px -18px rgba(10,28,61,0.32); border-color:var(--border-strong); }
  .value-card:hover .icon{ animation: q360-float-sm 1.1s ease-in-out infinite; }
  @media (prefers-reduced-motion: reduce){ .value-card:hover{ transform:none; } .value-card:hover .icon{ animation:none; } }

  /* ---------- Section headers ---------- */
  .sec-head{ max-width: 640px; margin-bottom: clamp(30px,5vw,48px); }
  .sec-head h2{ font-size: clamp(1.65rem, 3vw, 2.4rem); margin-top: 12px; }
  .sec-head p{ margin-top: 15px; color: var(--text-mute); font-size: 1.02rem; max-width: 58ch; }

  /* ---------- Value / feature cards ---------- */
  .intro{ padding: clamp(52px,8vw,84px) 0; }
  .value-row{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .value-row.cols-4{ grid-template-columns:repeat(4,1fr); }
  @media (max-width:960px){ .value-row.cols-4{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:560px){ .value-row.cols-4{ grid-template-columns:1fr; } }
  .value-row.cols-5{ grid-template-columns:repeat(5,1fr); }
  @media (max-width:1100px){ .value-row.cols-5{ grid-template-columns:repeat(3,1fr); } }
  @media (max-width:700px){ .value-row.cols-5{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:480px){ .value-row.cols-5{ grid-template-columns:1fr; } }
  .value-card{
    background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
    padding: 26px 24px; box-shadow: var(--shadow);
  }
  .value-card .icon{
    width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(150deg, var(--blue-soft-strong), var(--blue-soft));
    display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
  }
  .value-card .icon svg{ width: 19px; height: 19px; stroke: var(--blue); }
  .value-card h3{ font-size: 1.08rem; font-weight: 700; }
  .value-card p{ margin-top: 8px; color: var(--text-mute); font-size: 0.94rem; }
  @media (max-width: 780px){ .value-row{ grid-template-columns: 1fr; } }

  /* ---------- Callout (startup banner etc) ---------- */
  .callout{
    margin-top: 22px;
    display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap;
    background: var(--blue-soft); border:1px solid var(--blue-soft-strong); border-radius:18px;
    padding: clamp(22px,3vw,30px);
  }
  .callout .ci{
    width:46px; height:46px; border-radius:12px; background:#fff; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow);
    animation: q360-float-sm 4.5s ease-in-out infinite;
  }
  @media (prefers-reduced-motion: reduce){ .callout .ci{ animation:none; } }
  .callout .ci svg{ width:22px; height:22px; stroke:var(--blue); }
  .callout-body{ flex:1; min-width:220px; }
  .callout h3{ font-size:1.2rem; }
  .callout p{ margin-top:8px; color:var(--text-mute); font-size:0.98rem; max-width:60ch; }
  .callout .btn{ margin-top:14px; }

  /* ---------- Pillars ---------- */
  .pillars{ padding: clamp(20px,4vw,32px) 0 clamp(68px,9vw,104px); }
  .pillar-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  @media (max-width: 780px){ .pillar-grid{ grid-template-columns: 1fr; } }

  .pillar{
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: clamp(24px, 3vw, 34px);
    box-shadow: var(--shadow);
    scroll-margin-top: 90px;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    display:flex; flex-direction:column;
    position:relative; overflow:hidden;
  }
  .pillar::before{
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background: var(--p-build); opacity:0; transition: opacity .2s ease;
  }
  .pillar:hover{ transform: translateY(-3px); border-color: var(--border-strong); box-shadow: var(--shadow-lift); }
  .pillar:hover::before{ opacity:1; }
  .pillar-top{ display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
  .pillar-bearing{ font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-mute); letter-spacing: 0.05em; }
  .pillar-bearing b{ color: var(--p-build); font-weight: 600; }
  .pillar-icon{
    width: 44px; height: 44px; border-radius: 12px;
    background: linear-gradient(150deg, var(--p-build-soft-strong), var(--p-build-soft));
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    transition: transform .3s ease;
  }
  .pillar:hover .pillar-icon{ transform:rotate(-6deg) scale(1.06); }
  .pillar-icon svg{ width: 22px; height: 22px; stroke: var(--p-build); }
  @media (prefers-reduced-motion: reduce){ .pillar:hover .pillar-icon{ transform:none; } }
  /* Per-pillar accent on the homepage teaser grid (Build, Manage, Protect, Automate, Grow, in DOM order). */
  #pillar-teaser .pillar:nth-child(2)::before{ background: var(--p-manage); }
  #pillar-teaser .pillar:nth-child(2) .pillar-bearing b{ color: var(--p-manage); }
  #pillar-teaser .pillar:nth-child(2) .pillar-icon{ background: linear-gradient(150deg, var(--p-manage-soft-strong), var(--p-manage-soft)); }
  #pillar-teaser .pillar:nth-child(2) .pillar-icon svg{ stroke: var(--p-manage); }
  #pillar-teaser .pillar:nth-child(3)::before{ background: var(--p-protect); }
  #pillar-teaser .pillar:nth-child(3) .pillar-bearing b{ color: var(--p-protect); }
  #pillar-teaser .pillar:nth-child(3) .pillar-icon{ background: linear-gradient(150deg, var(--p-protect-soft-strong), var(--p-protect-soft)); }
  #pillar-teaser .pillar:nth-child(3) .pillar-icon svg{ stroke: var(--p-protect); }
  #pillar-teaser .pillar:nth-child(4)::before{ background: var(--p-automate); }
  #pillar-teaser .pillar:nth-child(4) .pillar-bearing b{ color: var(--p-automate); }
  #pillar-teaser .pillar:nth-child(4) .pillar-icon{ background: linear-gradient(150deg, var(--p-automate-soft-strong), var(--p-automate-soft)); }
  #pillar-teaser .pillar:nth-child(4) .pillar-icon svg{ stroke: var(--p-automate); }
  #pillar-teaser .pillar:nth-child(5)::before{ background: var(--p-grow); }
  #pillar-teaser .pillar:nth-child(5) .pillar-bearing b{ color: var(--p-grow); }
  #pillar-teaser .pillar:nth-child(5) .pillar-icon{ background: linear-gradient(150deg, var(--p-grow-soft-strong), var(--p-grow-soft)); }
  #pillar-teaser .pillar:nth-child(5) .pillar-icon svg{ stroke: var(--p-grow); }
  .pillar h3{ font-size: 1.5rem; margin-top: 16px; }
  .pillar .tagline{ color: var(--text-mute); margin-top: 8px; font-size: 0.97rem; }
  .chip-row{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
  .chip{
    font-size: 0.81rem; font-weight: 500; color: var(--text);
    background: var(--bg-alt); border: 1px solid var(--border);
    padding: 6px 12px; border-radius: 999px;
  }
  .pillar-link{
    margin-top:18px; display:inline-flex; align-items:center; gap:6px;
    font-size:0.88rem; font-weight:600; color:var(--blue);
  }

  /* ---------- Industries strip (home) + hub grid ---------- */
  .industry-strip{ padding: clamp(50px,7vw,80px) 0; background: var(--bg-alt); }
  .industry-chip-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:14px; margin-top:8px; }
  .industry-chip{
    background:var(--surface); border:1px solid var(--border); border-radius:16px;
    padding:20px 16px; text-align:center; box-shadow:var(--shadow); transition:transform .15s ease, box-shadow .15s ease;
  }
  .industry-chip:hover{ transform:translateY(-3px); box-shadow: var(--shadow-lift); }
  .industry-chip .ii{
    width:36px; height:36px; border-radius:10px; background: linear-gradient(150deg, var(--blue-soft-strong), var(--blue-soft)); margin:0 auto 10px;
    display:flex; align-items:center; justify-content:center; transition:transform .3s ease;
  }
  .industry-chip:hover .ii{ transform:rotate(-8deg) scale(1.08); }
  .industry-chip .ii svg{ width:18px; height:18px; stroke:var(--blue); }
  @media (prefers-reduced-motion: reduce){ .industry-chip:hover .ii{ transform:none; } }
  .industry-chip span{ font-size:0.86rem; font-weight:600; display:block; }
  @media (max-width:900px){ .industry-chip-grid{ grid-template-columns:repeat(3,1fr); } }
  @media (max-width:560px){ .industry-chip-grid{ grid-template-columns:repeat(2,1fr); } }

  /* ---------- Differentiators (navy band) ---------- */
  .diff{ background: var(--ink); color: var(--ink-text); padding: clamp(56px,8vw,92px) 0; }
  .diff .eyebrow{ color: var(--ink-blue); }
  .diff-head{ max-width: 640px; }
  .diff-head h2{ color: var(--ink-text); font-size: clamp(1.65rem,3vw,2.4rem); margin-top: 12px; }
  .diff-head p{ margin-top: 15px; color: var(--ink-mute); font-size: 1.02rem; max-width: 56ch; }
  .diff-grid{
    margin-top: 40px; display: grid; grid-template-columns: repeat(2,1fr); gap: 26px 40px;
  }
  .diff-item{ display: flex; gap: 14px; }
  .diff-item .tick{
    width: 30px; height: 30px; border-radius: 9px; background: rgba(76,155,255,0.16);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px;
  }
  .diff-item .tick svg{ width: 16px; height: 16px; stroke: var(--ink-blue); }
  .diff-item h4{ color: var(--ink-text); font-size: 1.03rem; font-weight: 600; }
  .diff-item p{ margin-top: 6px; color: var(--ink-mute); font-size: 0.92rem; }
  @media (max-width: 700px){ .diff-grid{ grid-template-columns: 1fr; } }

  /* ---------- Homepage threat/stats spotlight ---------- */
  .threat-section{ background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%); color: var(--ink-text); padding: clamp(56px,8vw,92px) 0; }
  .threat-section .eyebrow{ color: var(--ink-blue); }
  .threat-head{ max-width: 640px; }
  .threat-head h2{ color: var(--ink-text); font-size: clamp(1.65rem,3vw,2.4rem); margin-top: 12px; }
  .threat-head p{ margin-top: 15px; color: var(--ink-mute); font-size: 1.02rem; max-width: 58ch; }
  .threat-grid{ margin-top: 36px; display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
  .threat-card{
    background: rgba(243,246,251,0.05); border: 1px solid var(--ink-line); border-radius: 16px;
    padding: 22px 20px; transition: transform .18s ease, border-color .18s ease;
  }
  .threat-card:hover{ transform: translateY(-3px); border-color: rgba(74,222,128,0.4); }
  .threat-num{
    font-family: var(--font-display); font-weight: 800; color: var(--ink-protect);
    font-size: clamp(1.9rem,3vw,2.5rem); font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
  }
  .threat-card p{ margin-top: 8px; color: var(--ink-mute); font-size: 0.88rem; line-height: 1.5; }
  .threat-sources{ margin-top: 22px; font-size: 0.74rem; line-height: 1.6; color: var(--ink-mute); max-width: 820px; }
  .threat-sources a{ color: var(--ink-mute); text-decoration: underline; }
  .threat-sources a:hover{ color: var(--ink-text); }
  .threat-ctas{ display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
  @media (max-width: 900px){ .threat-grid{ grid-template-columns: repeat(2,1fr); } }
  @media (max-width: 520px){ .threat-grid{ grid-template-columns: 1fr; } }

  /* ---------- Process ---------- */
  .process{ background: var(--bg-alt); padding: clamp(56px,8vw,92px) 0; }
  .steps{ display: flex; flex-wrap: wrap; gap: 0; margin-top: 6px; }
  .step{ flex: 1 1 220px; padding: 22px 22px 22px 0; }
  .step h4{ font-size: 1.1rem; margin-top: 10px; }
  .step p{ margin-top: 8px; color: var(--text-mute); font-size: 0.94rem; }
  .step-arrow{ display: flex; align-items: center; color: var(--border-strong); font-family: var(--font-mono); padding: 0 6px; font-size: 1.2rem; }
  @media (max-width: 780px){ .steps{ flex-direction: column; } .step-arrow{ display:none; } }

  /* ---------- Signs-you-need-this section (pillar & industry pages) ---------- */
  .signs-section{ padding: clamp(40px,6vw,60px) 0 clamp(52px,7vw,76px); border-top: 1px solid var(--border); }
  .signs-list{ list-style:none; margin: 18px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:14px 32px; max-width: 900px; }
  .signs-list li{ display:flex; align-items:flex-start; gap:12px; font-size:0.98rem; color:var(--text-mute); line-height:1.5; }
  .signs-list li svg{ width:18px; height:18px; stroke:var(--blue); flex-shrink:0; margin-top:3px; }
  @media (max-width:700px){ .signs-list{ grid-template-columns:1fr; } }

  /* ---------- FAQ ---------- */
  .faq-section{ padding: clamp(50px,7vw,84px) 0; }
  .faq-list{ margin-top:8px; border-top:1px solid var(--border); }
  .faq-item{ border-bottom:1px solid var(--border); }
  .faq-q{
    width:100%; text-align:left; background:none; border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:18px 2px; font-family:var(--font-display); font-weight:600; font-size:1rem; color:var(--text);
  }
  .faq-q .plus{ width:20px; height:20px; flex-shrink:0; position:relative; }
  .faq-q .plus::before, .faq-q .plus::after{ content:''; position:absolute; background:var(--blue); border-radius:2px; }
  .faq-q .plus::before{ top:50%; left:1px; right:1px; height:2px; transform:translateY(-50%); }
  .faq-q .plus::after{ left:50%; top:1px; bottom:1px; width:2px; transform:translateX(-50%); transition:transform .2s ease; }
  .faq-item.open .faq-q .plus::after{ transform:translateX(-50%) rotate(90deg); }
  .faq-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .25s ease; }
  .faq-item.open .faq-a{ grid-template-rows:1fr; }
  .faq-a-inner{ overflow:hidden; }
  .faq-a p{ padding:0 2px 18px; color:var(--text-mute); font-size:0.95rem; max-width:68ch; }

  /* ---------- FAQ search + category filter toolbar ---------- */
  .faq-toolbar{ display:flex; flex-direction:column; gap:16px; }
  .faq-search{ position:relative; }
  .faq-search svg.faq-search-ic{
    position:absolute; left:16px; top:50%; transform:translateY(-50%);
    width:18px; height:18px; stroke:var(--text-mute); pointer-events:none;
  }
  .faq-search input{
    width:100%; padding:14px 44px 14px 46px; border-radius:14px; border:1px solid var(--border);
    background:var(--surface); font-family:var(--font-body); font-size:0.98rem; color:var(--text);
    box-shadow:var(--shadow); transition:border-color .15s ease, box-shadow .15s ease;
  }
  .faq-search input::placeholder{ color:var(--text-mute); }
  .faq-search input:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft); }
  .faq-search-clear{
    position:absolute; right:9px; top:50%; transform:translateY(-50%) scale(0.9); width:26px; height:26px;
    border-radius:50%; border:none; background:var(--bg-alt); color:var(--text-mute); cursor:pointer;
    font-size:15px; line-height:1; display:flex; align-items:center; justify-content:center;
    opacity:0; visibility:hidden; transition:opacity .15s ease, transform .15s ease, visibility .15s;
  }
  .faq-search-clear.show{ opacity:1; visibility:visible; transform:translateY(-50%) scale(1); }
  .faq-chip-filter{ display:flex; flex-wrap:wrap; gap:8px; }
  .faq-chip{
    display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:999px;
    border:1px solid var(--border); background:var(--surface); color:var(--text-mute);
    font-size:0.85rem; font-weight:600; cursor:pointer; transition:background .15s ease, border-color .15s ease, color .15s ease;
  }
  .faq-chip:hover{ border-color:var(--border-strong); color:var(--text); }
  .faq-chip.active{ background:var(--blue); border-color:var(--blue); color:#fff; }
  .faq-chip-count{ font-size:0.76rem; opacity:0.7; font-weight:500; }
  .faq-result-count{ font-size:0.85rem; color:var(--text-mute); margin:20px 2px 0; }
  .faq-no-results{ display:none; text-align:center; padding:56px 20px; color:var(--text-mute); }
  .faq-no-results.show{ display:block; }
  .faq-no-results p{ font-size:1rem; }
  mark.faq-hl{ background:var(--warm-soft-strong); color:inherit; padding:0 2px; border-radius:3px; }

  /* ---------- FAQ category boxes (expandable, per-pillar accent) ---------- */
  .faq-groups{ margin-top:22px; display:flex; flex-direction:column; gap:14px; }
  .faq-group{
    background:var(--surface); border:1px solid var(--border); border-radius:16px;
    overflow:hidden; transition:border-color .15s ease, box-shadow .2s ease;
  }
  .faq-group[hidden]{ display:none; }
  .faq-group:hover{ border-color:var(--border-strong); }
  .faq-group.open{ box-shadow:var(--shadow-lift); }
  .faq-group-head{
    width:100%; display:flex; align-items:center; gap:14px; padding:18px 20px;
    background:none; border:none; cursor:pointer; text-align:left;
  }
  .faq-group-icon{
    width:38px; height:38px; border-radius:10px; flex-shrink:0;
    background:linear-gradient(150deg, var(--cat-soft-strong, var(--blue-soft-strong)), var(--cat-soft, var(--blue-soft)));
    display:flex; align-items:center; justify-content:center; transition:transform .3s ease;
  }
  .faq-group.open .faq-group-icon{ transform:rotate(-6deg) scale(1.05); }
  .faq-group-icon svg{ width:19px; height:19px; stroke:var(--cat-accent, var(--blue)); }
  .faq-group-title{
    flex:1; font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--text);
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  }
  .faq-group-count{
    font-family:var(--font-mono); font-size:0.74rem; font-weight:500; color:var(--text-mute);
    background:var(--bg-alt); padding:2px 9px; border-radius:999px;
  }
  .faq-group-chevron{ width:20px; height:20px; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:transform .25s ease; }
  .faq-group-chevron svg{ width:16px; height:16px; stroke:var(--text-mute); }
  .faq-group.open .faq-group-chevron{ transform:rotate(180deg); }
  .faq-group-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease; }
  .faq-group.open .faq-group-body{ grid-template-rows:1fr; }
  .faq-group-body-inner{ overflow:hidden; }
  .faq-group .faq-list{ margin-top:0; border-top:1px solid var(--border); padding:0 20px; }
  .faq-group .faq-list .faq-item:last-child{ border-bottom:none; }
  .faq-group .faq-item[hidden]{ display:none; }
  @media (prefers-reduced-motion: reduce){ .faq-group-icon, .faq-group-chevron{ transition:none; } }
  .faq-group[data-cat="build"]{ --cat-accent:var(--p-build); --cat-soft:var(--p-build-soft); --cat-soft-strong:var(--p-build-soft-strong); }
  .faq-group[data-cat="manage"]{ --cat-accent:var(--p-manage); --cat-soft:var(--p-manage-soft); --cat-soft-strong:var(--p-manage-soft-strong); }
  .faq-group[data-cat="protect"]{ --cat-accent:var(--p-protect); --cat-soft:var(--p-protect-soft); --cat-soft-strong:var(--p-protect-soft-strong); }
  .faq-group[data-cat="automate"]{ --cat-accent:var(--p-automate); --cat-soft:var(--p-automate-soft); --cat-soft-strong:var(--p-automate-soft-strong); }
  .faq-group[data-cat="grow"]{ --cat-accent:var(--p-grow); --cat-soft:var(--p-grow-soft); --cat-soft-strong:var(--p-grow-soft-strong); }
  .faq-group[data-cat="pricing"]{ --cat-accent:var(--warm); --cat-soft:var(--warm-soft); --cat-soft-strong:var(--warm-soft-strong); }

  /* ---------- CTA ---------- */
  .cta{
    background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
    color: var(--ink-text);
    padding: clamp(64px,9vw,104px) 0; text-align: center;
  }
  .cta .eyebrow{ color: var(--ink-blue); }
  .cta h2{ color: var(--ink-text); font-size: clamp(1.8rem, 4vw, 2.8rem); margin-top: 14px; max-width: 22ch; margin-left:auto; margin-right:auto;}
  .cta p{ color: var(--ink-mute); margin-top: 15px; max-width: 52ch; margin-left: auto; margin-right: auto; font-size: 1.02rem; }
  .cta-actions{ display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 30px; }
  .cta-email{ margin-top: 20px; font-family: var(--font-mono); font-size: 0.9rem; color: var(--ink-mute); }
  .cta-email a{ color: var(--ink-text); border-bottom: 1px solid var(--ink-line); }

  /* ---------- Contact page ---------- */
  .contact-hero{ background: radial-gradient(circle, var(--grid-dot) 1px, transparent 1.6px) 0 0/24px 24px, var(--bg-alt); padding:clamp(26px,4vw,38px) 0 0; position:relative; overflow:hidden; }
  .contact-hero .wrap{ position:relative; z-index:1; }
  .reply-live{ display:inline-flex; align-items:center; gap:8px; font-size:0.86rem; font-weight:600; color:var(--text-mute); margin-top:10px; }
  .contact-quick{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:30px; }
  .quick-card{
    background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:22px;
    box-shadow:var(--shadow); display:flex; flex-direction:column; gap:10px;
  }
  .quick-card .qi{ width:38px; height:38px; border-radius:10px; background:var(--blue-soft); display:flex; align-items:center; justify-content:center; margin-bottom:8px; }
  .quick-card .qi svg{ width:19px; height:19px; stroke:var(--blue); }
  .quick-card h3{ font-size:1.02rem; }
  .quick-card p{ color:var(--text-mute); font-size:0.9rem; flex:1; }
  @media (max-width:780px){ .contact-quick{ grid-template-columns:1fr; } }

  .contact-form-section{ padding: clamp(50px,7vw,84px) 0 clamp(70px,9vw,100px); }
  .contact-layout{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap:48px; align-items:start; }
  .form-card{
    background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:clamp(24px,3vw,34px);
    box-shadow:var(--shadow);
  }
  .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .field{ display:flex; flex-direction:column; gap:6px; margin-top:16px; }
  .field label{ font-size:0.85rem; font-weight:600; color:var(--text); }
  .field input, .field select, .field textarea{
    font-family:var(--font-body); font-size:0.96rem; color:var(--text);
    background:var(--bg); border:1.5px solid var(--border-strong); border-radius:10px;
    padding:11px 14px; width:100%;
  }
  .field input:focus, .field select:focus, .field textarea:focus{
    outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft);
  }
  .field textarea{ resize:vertical; min-height:120px; }
  .form-note{ margin-top:14px; font-size:0.83rem; color:var(--text-mute); }
  .form-submit{ margin-top:20px; }
  @media (max-width:900px){ .contact-layout{ grid-template-columns:1fr; } }
  @media (max-width:560px){ .form-row{ grid-template-columns:1fr; } }

  .side-card{ background:var(--bg-alt); border-radius:16px; padding:22px; }
  .side-card + .side-card{ margin-top:16px; }
  .side-card h3{ font-size:1.05rem; }
  .side-card .faq-list{ margin-top:6px; border-top:none; }
  .side-card .faq-q{ padding:14px 0; font-size:0.94rem; }
  .mini-steps{ margin-top:14px; display:flex; flex-direction:column; gap:12px; }
  .mini-step{ display:flex; gap:12px; align-items:flex-start; }
  .mini-step .n{
    font-family:var(--font-mono); font-size:0.78rem; font-weight:600; color:var(--blue);
    width:24px; height:24px; border-radius:50%; background:var(--blue-soft);
    display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px;
  }
  .mini-step p{ font-size:0.9rem; color:var(--text-mute); }
  .mini-step p b{ color:var(--text); font-weight:600; }

  /* ---------- Article pages (Insights blog posts) ---------- */
  .article-hero{ background: var(--bg-alt); padding: clamp(36px,6vw,52px) 0 clamp(28px,4vw,40px); }
  .article-hero .wrap{ max-width: 780px; }
  .article-tag{
    display:inline-block; font-family:var(--font-mono); font-size:0.75rem; letter-spacing:0.08em;
    text-transform:uppercase; color:var(--blue); font-weight:500; margin-top:16px;
  }
  .article-hero h1{ font-size: clamp(1.8rem,3.4vw,2.5rem); margin-top:10px; max-width:22ch; }
  .article-meta{ margin-top:18px; font-size:0.85rem; color:var(--text-mute); font-family:var(--font-mono); }
  .insight-card{ display:flex; flex-direction:column; }
  .insight-read-link{
    margin-top:14px; display:inline-flex; align-items:center; gap:5px; font-size:0.88rem; font-weight:600;
    color:var(--blue); text-decoration:none;
  }
  .insight-read-link:hover{ text-decoration:underline; }

  /* ---------- Pricing page ---------- */
  .pricing-grid{ display:grid; gap:20px; margin-top:8px; }
  .pricing-grid.cols-3{ grid-template-columns:repeat(3,1fr); }
  .pricing-grid.cols-5{ grid-template-columns:repeat(5,1fr); }
  .pricing-grid.cols-2{ grid-template-columns:repeat(2,1fr); }
  @media (max-width:1100px){ .pricing-grid.cols-5{ grid-template-columns:repeat(3,1fr); } }
  @media (max-width:900px){ .pricing-grid.cols-3{ grid-template-columns:repeat(2,1fr); } .pricing-grid.cols-2{ grid-template-columns:1fr; } }
  @media (max-width:640px){ .pricing-grid.cols-5, .pricing-grid.cols-3{ grid-template-columns:1fr; } }
  .price-card{
    background:var(--surface); border:1px solid var(--border); border-radius:18px;
    padding:clamp(22px,3vw,28px); box-shadow:var(--shadow); display:flex; flex-direction:column;
    position:relative; transition:transform .18s ease, border-color .18s ease;
  }
  .price-card.featured{ border-color:var(--blue); border-width:2px; }
  .price-card .badge{
    position:absolute; top:-12px; left:50%; transform:translateX(-50%);
    background:var(--blue); color:#fff; font-size:0.7rem; font-weight:700; letter-spacing:0.05em;
    text-transform:uppercase; padding:4px 12px; border-radius:999px; white-space:nowrap;
  }
  .price-icon{
    width:40px; height:40px; border-radius:11px; background:var(--bg-alt); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center; margin-bottom:14px; flex-shrink:0;
  }
  .price-icon svg{ width:20px; height:20px; stroke:var(--blue); }
  .price-card.featured .price-icon{ background:var(--blue); border-color:var(--blue); }
  .price-card.featured .price-icon svg{ stroke:#fff; }
  .price-card h3{ font-size:1.05rem; }
  .price-card .price{ font-family:var(--font-mono); font-size:1.7rem; color:var(--text); margin:10px 0 2px; line-height:1.2; }
  .price-card .price span{ font-size:0.8rem; color:var(--text-mute); font-weight:400; font-family:var(--font-body); }
  .price-card .min-note{ font-size:0.76rem; color:var(--text-mute); margin-bottom:12px; }
  .price-card .desc{ color:var(--text-mute); font-size:0.88rem; margin-bottom:14px; }
  .price-card ul{ list-style:none; margin:0 0 20px; padding:0; flex:1; }
  .price-card ul li{
    display:flex; gap:8px; align-items:flex-start; font-size:0.86rem; color:var(--text-mute);
    padding:7px 0; border-top:1px solid var(--border);
  }
  .price-card ul li:first-child{ border-top:none; }
  .price-card ul li svg{ width:14px; height:14px; stroke:var(--blue); flex-shrink:0; margin-top:3px; }
  .pricing-flagship{
    background:var(--bg-alt); border:1.5px solid var(--border-strong); border-radius:20px;
    padding:clamp(26px,4vw,40px); margin-top:14px; display:flex; gap:28px; flex-wrap:wrap;
    align-items:center; justify-content:space-between;
  }
  .pricing-flagship .fl-price{ font-family:var(--font-mono); font-size:2.2rem; color:var(--blue); white-space:nowrap; }
  .pricing-flagship .fl-price span{ font-size:0.85rem; color:var(--text-mute); font-weight:400; font-family:var(--font-body); }
  .pricing-note-box{
    margin-top:22px; font-size:0.85rem; color:var(--text-mute); background:var(--bg-alt);
    border:1px solid var(--border); border-radius:12px; padding:14px 18px;
  }

  /* ---------- Pricing details modal ---------- */
  .pmodal-overlay{
    position:fixed; inset:0; background:rgba(6,12,26,0.6); backdrop-filter:blur(3px);
    display:flex; align-items:center; justify-content:center; padding:20px; z-index:200;
    opacity:0; visibility:hidden; transition:opacity .22s ease, visibility .22s;
  }
  .pmodal-overlay.show{ opacity:1; visibility:visible; }
  .pmodal{
    background:var(--surface); border:1px solid var(--border); border-radius:20px;
    max-width:640px; width:100%; max-height:88vh; overflow-y:auto; box-shadow:0 30px 60px -20px rgba(6,12,26,0.5);
    padding:clamp(22px,4vw,34px); position:relative; transform:translateY(16px) scale(0.98); transition:transform .22s ease;
  }
  .pmodal-overlay.show .pmodal{ transform:none; }
  .pmodal-close{
    position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:50%;
    background:var(--bg-alt); border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
    cursor:pointer; color:var(--text-mute);
  }
  .pmodal-close svg{ width:16px; height:16px; }
  .pmodal-icon{ width:52px; height:52px; border-radius:14px; background:var(--bg-alt); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
  .pmodal-icon svg{ width:26px; height:26px; stroke:var(--blue); }
  .pmodal .pmodal-badge{
    display:inline-block; background:var(--blue); color:#fff; font-size:0.68rem; font-weight:700; letter-spacing:0.05em;
    text-transform:uppercase; padding:3px 10px; border-radius:999px; margin-bottom:10px;
  }
  .pmodal h3{ font-size:1.35rem; margin-bottom:4px; }
  .pmodal .pmodal-price{ font-family:var(--font-mono); font-size:1.9rem; color:var(--blue); margin:6px 0 2px; }
  .pmodal .pmodal-price span{ font-size:0.8rem; color:var(--text-mute); font-weight:400; font-family:var(--font-body); }
  .pmodal .pmodal-minnote{ font-size:0.78rem; color:var(--text-mute); margin-bottom:12px; }
  .pmodal .pmodal-longdesc{ color:var(--text-mute); font-size:0.92rem; line-height:1.6; margin:10px 0 16px; }
  .pmodal .pmodal-idealfor{
    background:var(--bg-alt); border:1px solid var(--border); border-radius:12px; padding:12px 16px;
    font-size:0.85rem; color:var(--text); margin-bottom:18px;
  }
  .pmodal .pmodal-idealfor strong{ color:var(--blue); }
  .pmodal-feature-list{ list-style:none; margin:0 0 22px; padding:0; }
  .pmodal-feature-list li{
    display:flex; gap:9px; align-items:flex-start; font-size:0.9rem; color:var(--text-mute);
    padding:8px 0; border-top:1px solid var(--border);
  }
  .pmodal-feature-list li:first-child{ border-top:none; }
  .pmodal-feature-list li svg{ width:15px; height:15px; stroke:var(--blue); flex-shrink:0; margin-top:3px; }
  .pmodal-tiernav{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:18px; }
  .pmodal-tiernav button{
    display:flex; align-items:center; gap:6px; background:none; border:1px solid var(--border); border-radius:999px;
    padding:8px 14px; font-size:0.82rem; font-weight:600; color:var(--text); cursor:pointer; font-family:inherit;
  }
  .pmodal-tiernav button:hover:not(:disabled){ border-color:var(--blue); color:var(--blue); }
  .pmodal-tiernav button:disabled{ opacity:0.35; cursor:default; }
  .pmodal-tiernav button svg{ width:14px; height:14px; }
  .pmodal-categories{ margin-bottom:20px; }
  .pmodal-categories .k{ font-size:0.78rem; color:var(--text-mute); margin-bottom:8px; display:block; }
  .pmodal-cta{ display:flex; gap:10px; flex-wrap:wrap; }
  @media (max-width:520px){ .pmodal-cta{ flex-direction:column; } .pmodal-cta .btn{ width:100%; justify-content:center; } }

  /* ---------- Start a project — multi-step enquiry modal ---------- */
  .spmodal-overlay{
    position:fixed; inset:0; background:rgba(6,12,26,0.6); backdrop-filter:blur(3px);
    display:flex; align-items:center; justify-content:center; padding:20px; z-index:210;
    opacity:0; visibility:hidden; transition:opacity .22s ease, visibility .22s;
  }
  .spmodal-overlay.show{ opacity:1; visibility:visible; }
  .spmodal{
    background:var(--surface); border:1px solid var(--border); border-radius:20px;
    max-width:760px; width:100%; max-height:90vh; overflow-y:auto; box-shadow:0 30px 60px -20px rgba(6,12,26,0.5);
    padding:clamp(24px,4vw,40px); position:relative; transform:translateY(16px) scale(0.98); transition:transform .22s ease;
  }
  .spmodal-overlay.show .spmodal{ transform:none; }
  .sp-progress-track{ height:6px; border-radius:999px; background:var(--border); overflow:hidden; margin:18px 0 8px; }
  .sp-progress-fill{ height:100%; width:20%; background:var(--blue); border-radius:999px; transition:width .3s ease; }
  .sp-step-label{ font-family:var(--font-mono); font-size:0.76rem; color:var(--text-mute); letter-spacing:0.05em; text-transform:uppercase; margin-bottom:18px; }
  .sp-step-title{ font-size:1.25rem; }
  .sp-pills{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
  .sp-pill{
    padding:10px 16px; border-radius:999px; border:1.5px solid var(--border-strong);
    background:var(--bg); color:var(--text-mute); font-size:0.88rem; font-weight:600;
    cursor:pointer; text-align:center; font-family:inherit;
  }
  .sp-pill[aria-pressed="true"]{ border-color:var(--blue); color:var(--blue); background:var(--blue-soft); }
  .sp-review{ background:var(--bg-alt); border:1px solid var(--border); border-radius:14px; padding:16px 18px; font-size:0.86rem; color:var(--text-mute); margin-top:18px; line-height:1.7; }
  .sp-review strong{ color:var(--text); }
  .sp-nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:28px; padding-top:20px; border-top:1px solid var(--border); }
  .sp-nav button:disabled{ opacity:0.35; cursor:default; }
  @media (max-width:560px){ .spmodal{ padding:22px; } }

  /* ---------- Fab menu (WhatsApp / Assistant chooser) ---------- */
  .fab-menu{
    position:absolute; bottom:66px; right:0; background:var(--surface); border:1px solid var(--border);
    border-radius:16px; box-shadow:0 16px 34px -12px rgba(6,12,26,0.35); padding:8px; width:222px;
    opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .fab-menu.show{ opacity:1; visibility:visible; transform:none; }
  .fab-menu button, .fab-menu a{
    display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:none; border:none;
    padding:10px 12px; border-radius:10px; font-size:0.86rem; font-weight:600; color:var(--text); cursor:pointer;
    font-family:inherit; text-decoration:none;
  }
  .fab-menu button:hover, .fab-menu a:hover{ background:var(--bg-alt); }
  .fab-menu .fm-ic{ width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .fab-menu .fm-ic.wa{ background:#22C35E; }
  .fab-menu .fm-ic.wa svg{ width:16px; height:16px; fill:#fff; }
  .fab-menu .fm-ic.bot{ background:var(--blue); }
  .fab-menu .fm-ic.bot svg{ width:16px; height:16px; stroke:#fff; }
  .fab-menu .co-sub{ display:block; font-size:0.72rem; font-weight:400; color:var(--text-mute); margin-top:2px; }

  /* ---------- Chat assistant panel ---------- */
  .chat-panel{
    position:fixed; right:clamp(16px,4vw,28px); bottom:clamp(84px,10vw,96px); z-index:190;
    width:min(360px,calc(100vw - 32px)); max-height:min(560px,72vh); display:flex; flex-direction:column;
    background:var(--surface); border:1px solid var(--border); border-radius:20px;
    box-shadow:0 26px 54px -16px rgba(6,12,26,0.45); overflow:hidden;
    opacity:0; visibility:hidden; transform:translateY(14px) scale(0.98); transition:opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .chat-panel.show{ opacity:1; visibility:visible; transform:none; }
  .chat-header{
    background:var(--navy); color:#fff; padding:16px 18px; display:flex; align-items:center; gap:12px;
    flex-shrink:0;
  }
  .chat-header .chat-avatar{
    width:36px; height:36px; border-radius:50%; background:var(--blue); display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .chat-header .chat-avatar svg{ width:18px; height:18px; stroke:#fff; }
  .chat-header .chat-title{ font-weight:700; font-size:0.95rem; }
  .chat-header .chat-sub{ font-size:0.74rem; opacity:0.75; }
  .chat-header button{
    margin-left:auto; background:rgba(255,255,255,0.12); border:none; width:28px; height:28px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; cursor:pointer; color:#fff; flex-shrink:0;
  }
  .chat-header button svg{ width:14px; height:14px; stroke:#fff; }
  .chat-body{ padding:18px; overflow-y:auto; flex:1; }
  .chat-bubble{
    background:var(--bg-alt); border-radius:14px; padding:12px 15px; font-size:0.88rem; color:var(--text);
    margin-bottom:14px; line-height:1.5;
  }
  .chat-options{ display:flex; flex-direction:column; gap:8px; }
  .chat-opt-btn{
    text-align:left; background:var(--surface); border:1px solid var(--border); border-radius:12px;
    padding:11px 14px; font-size:0.86rem; font-weight:600; color:var(--text); cursor:pointer; font-family:inherit;
    transition:border-color .15s ease, color .15s ease;
  }
  .chat-opt-btn:hover{ border-color:var(--blue); color:var(--blue); }
  .chat-opt-btn .co-sub{ display:block; font-size:0.76rem; font-weight:400; color:var(--text-mute); margin-top:2px; }
  .chat-footer{
    border-top:1px solid var(--border); padding:10px 14px; display:flex; justify-content:space-between; align-items:center;
    gap:8px; flex-shrink:0;
  }
  .chat-footer button{
    background:none; border:none; font-size:0.78rem; font-weight:600; color:var(--text-mute); cursor:pointer;
    font-family:inherit; display:flex; align-items:center; gap:5px; padding:6px 4px;
  }
  .chat-footer button:hover:not(:disabled){ color:var(--blue); }
  .chat-footer button:disabled{ opacity:0.35; cursor:default; }
  .chat-footer button svg{ width:14px; height:14px; }
  @media (max-width:480px){
    .chat-panel{ right:12px; left:12px; width:auto; bottom:80px; }
  }

  /* ---------- Quest Technology Score tool ---------- */
  .ts-breakdown{ margin-top:26px; display:flex; flex-direction:column; gap:14px; }
  .ts-cat-head{ display:flex; justify-content:space-between; font-size:0.85rem; font-weight:600; color:var(--text); margin-bottom:6px; }
  .ts-cat-head span:last-child{ font-family:var(--font-mono); color:var(--text-mute); font-weight:500; }
  .ts-bar{ height:8px; border-radius:999px; background:var(--border); overflow:hidden; }
  .ts-bar-fill{ height:100%; background:var(--blue); border-radius:999px; width:0%; transition:width .3s ease; }
  .ts-recs{ margin-top:22px; display:flex; flex-direction:column; gap:10px; }
  .ts-rec-card{
    background:var(--surface); border:1px solid var(--border); border-radius:12px;
    padding:12px 14px; font-size:0.85rem; color:var(--text-mute);
  }
  .ts-rec-card b{ color:var(--text); display:block; margin-bottom:2px; }
  .ts-rec-card a{ color:var(--blue); font-weight:600; text-decoration:none; }
  .ts-rec-card a:hover{ text-decoration:underline; }

  /* ---------- Legal pages (Privacy / Terms / Cookies) ---------- */
  .legal-body{ padding: clamp(36px,6vw,56px) 0 clamp(60px,8vw,96px); }
  .legal-body .wrap{ max-width: 780px; }
  .legal-meta{ font-size:0.88rem; color:var(--text-mute); margin-bottom:8px; }
  .legal-body h2{ font-size: clamp(1.25rem,2vw,1.5rem); margin-top: 44px; }
  .legal-body h2:first-of-type{ margin-top: 0; }
  .legal-body h3{ font-size: 1.08rem; margin-top: 28px; }
  .legal-body p{ margin-top: 14px; color: var(--text-mute); }
  .legal-body ul, .legal-body ol{ margin-top: 14px; padding-left: 22px; color: var(--text-mute); }
  .legal-body li{ margin-top: 8px; }
  .legal-body li:first-child{ margin-top:0; }
  .legal-body a{ color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
  .legal-body strong{ color: var(--text); }
  .legal-note{
    background: var(--blue-soft); border:1px solid var(--blue-soft-strong); border-radius: 12px;
    padding: 16px 18px; margin-top: 32px; font-size: 0.92rem; color: var(--text);
  }
  .legal-note p{ color: var(--text); margin-top: 8px; }
  .legal-note p:first-child{ margin-top: 0; }
  .legal-jump{ display:flex; flex-wrap:wrap; gap:10px 18px; margin-top:18px; font-size:0.88rem; }
  .legal-jump a{ color: var(--text-mute); text-decoration: none; border-bottom:1px solid var(--border-strong); padding-bottom:1px; }
  .legal-jump a:hover{ color: var(--blue); }
  .legal-body code{
    font-family: var(--font-mono); font-size: 0.86em; background: var(--blue-soft);
    padding: 2px 6px; border-radius: 5px; color: var(--navy);
  }
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .legal-body code{ color: var(--text); } }
  :root[data-theme="dark"] .legal-body code{ color: var(--text); }

  /* ---------- Footer ---------- */
  footer{ background: var(--ink); color: var(--ink-mute); border-top: 1px solid var(--ink-line); }
  .foot-row{ padding: 44px 0 28px; display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr; gap: 28px; }
  .foot-logo-badge{ display: inline-flex; }
  .foot-logo-badge img{ height: 30px; width: auto; }
  .foot-brand p{ margin-top: 14px; max-width: 30ch; font-size: 0.9rem; }
  .foot-brand .btn{ margin-top:16px; }
  footer h5{
    font-family: var(--font-mono); font-size: 0.73rem; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--ink-text); margin: 0 0 12px; font-weight: 500;
  }
  footer ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 0.92rem; }
  footer ul a:hover{ color: var(--ink-text); }
  .foot-legal-links a:hover{ color: var(--ink-text); }
  .foot-trust{
    display: flex; flex-wrap: wrap; align-items: center; gap: 16px 30px;
    border-top: 1px solid var(--ink-line); padding: 20px 0;
  }
  .foot-trust-item{ display: flex; align-items: center; gap: 8px; font-size: 0.83rem; color: var(--ink-mute); font-weight: 500; }
  .foot-trust-item svg{ width: 16px; height: 16px; stroke: var(--ink-protect); flex-shrink: 0; }
  .foot-trust a.foot-trust-link{ color: var(--ink-blue); font-weight: 600; text-decoration: none; margin-left: auto; }
  .foot-trust a.foot-trust-link:hover{ text-decoration: underline; }
  .foot-bottom{
    border-top: 1px solid var(--ink-line); padding: 18px 0 28px;
    display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between; font-size: 0.82rem;
  }
  @media (max-width: 900px){ .foot-row{ grid-template-columns: 1fr 1fr; } }
  @media (max-width: 520px){ .foot-row{ grid-template-columns: 1fr; } }

  /* ---------- Floating buttons ---------- */
  .fab-stack{
    --fab-offset: clamp(16px,4vw,28px);
    position: fixed; right: var(--fab-offset); bottom: var(--fab-offset);
    display:flex; flex-direction:column; align-items:flex-end; gap:12px; z-index:80;
  }
  .fab{
    width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    box-shadow: 0 10px 24px -8px rgba(10,20,40,0.4); border:none; cursor:pointer;
  }
  .fab-whatsapp{ background:#22C35E; position:relative; transition: transform .18s ease; }
  .fab-whatsapp:hover{ transform: scale(1.08); }
  .fab-whatsapp svg{ width:28px; height:28px; position:relative; z-index:1; }
  .fab-whatsapp::before{
    content:''; position:absolute; inset:0; border-radius:50%; background:#22C35E;
    animation: q360-pulse-ring 2.6s cubic-bezier(.4,0,.3,1) infinite;
  }
  @media (prefers-reduced-motion: reduce){ .fab-whatsapp::before{ animation:none; } .fab-whatsapp:hover{ transform:none; } }
  .fab-chat{ background:var(--blue); position:relative; transition: transform .18s ease, background .18s ease; }
  .fab-chat:hover{ transform: scale(1.08); }
  .fab-chat svg{ width:26px; height:26px; stroke:#fff; position:relative; z-index:1; }
  .fab-chat::before{
    content:''; position:absolute; inset:0; border-radius:50%; background:var(--blue);
    animation: q360-pulse-ring 2.6s cubic-bezier(.4,0,.3,1) infinite;
  }
  .fab-chat[aria-expanded="true"]{ background:var(--navy); }
  .fab-chat[aria-expanded="true"]::before{ display:none; }
  @media (prefers-reduced-motion: reduce){ .fab-chat::before{ animation:none; } .fab-chat:hover{ transform:none; } }
  .fab-top{
    width:42px; height:42px; background:var(--surface); border:1px solid var(--border);
    opacity:0; visibility:hidden; transform:translateY(6px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .fab-top.show{ opacity:1; visibility:visible; transform:none; }
  .fab-top svg{ width:18px; height:18px; stroke:var(--text); }

  /* ---------- Reveal ---------- */
  .reveal{ opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
  .reveal.in{ opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity: 1; transform: none; transition: none; }
    .nav-item-drop .nav-drop-panel, .faq-a, .fab-top{ transition:none; }
  }

  /* ---------- Motion system: floating / pulsing / drifting accents ---------- */
  @keyframes q360-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
  @keyframes q360-float-sm{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
  @keyframes q360-drift{ 0%{ transform:translate(0,0); } 33%{ transform:translate(14px,-16px); } 66%{ transform:translate(-10px,10px); } 100%{ transform:translate(0,0); } }
  @keyframes q360-spin{ to{ transform:rotate(360deg); } }
  @keyframes q360-spin-rev{ to{ transform:rotate(-360deg); } }
  @keyframes q360-pulse-ring{ 0%{ transform:scale(0.85); opacity:0.55; } 70%{ transform:scale(1.9); opacity:0; } 100%{ opacity:0; } }
  @keyframes q360-pulse-soft{ 0%,100%{ opacity:1; } 50%{ opacity:0.45; } }
  @keyframes q360-shine{ 0%{ transform:translateX(-120%) skewX(-12deg); } 100%{ transform:translateX(220%) skewX(-12deg); } }

  .mo-float{ animation: q360-float 5.5s ease-in-out infinite; }
  .mo-float-sm{ animation: q360-float-sm 4.2s ease-in-out infinite; }
  .mo-float-slow{ animation: q360-float 8s ease-in-out infinite; }
  .mo-drift{ animation: q360-drift 13s ease-in-out infinite; }
  .mo-spin{ animation: q360-spin 26s linear infinite; }
  .mo-spin-rev{ animation: q360-spin-rev 34s linear infinite; }
  .mo-spin-slow{ animation: q360-spin 60s linear infinite; }

  .pulse-dot{ position:relative; display:inline-flex; width:9px; height:9px; border-radius:50%; background:var(--blue); flex-shrink:0; }
  .pulse-dot::after{
    content:''; position:absolute; inset:0; border-radius:50%; background:var(--blue);
    animation: q360-pulse-ring 2.2s cubic-bezier(.4,0,.3,1) infinite;
  }
  .pulse-dot.green{ background:#1FAE63; } .pulse-dot.green::after{ background:#1FAE63; }

  /* soft blurred background blobs used behind hero/section content for a living backdrop */
  /* soft blurred background blobs used behind hero/section content for a living backdrop.
     Colour comes from --blob-1/--blob-2, which default to the blue brand tone but are
     overridden per service-page id below so each pillar's hero glows in its own accent. */
  .bg-blob-field{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
  .bg-blob{ position:absolute; border-radius:50%; filter:blur(50px); opacity:0.55; }
  .bg-blob.b1{
    width:300px; height:300px; top:-70px; right:6%;
    background: radial-gradient(circle at 35% 30%, var(--blob-1, var(--blue-soft-strong)), transparent 72%);
  }
  .bg-blob.b2{
    width:230px; height:230px; bottom:-50px; left:3%;
    background: radial-gradient(circle at 60% 60%, var(--blob-2, rgba(76,155,255,0.16)), transparent 72%);
  }
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .bg-blob{ opacity:0.32; } }
  :root[data-theme="dark"] .bg-blob{ opacity:0.32; }
  /* Per-pillar hero tint -- same markup everywhere, just a different accent per page. */
  #page-manage .bg-blob.b1{ --blob-1: var(--p-manage-soft-strong); } #page-manage .bg-blob.b2{ --blob-2: var(--p-manage-soft); }
  #page-protect .bg-blob.b1{ --blob-1: var(--p-protect-soft-strong); } #page-protect .bg-blob.b2{ --blob-2: var(--p-protect-soft); }
  #page-automate .bg-blob.b1{ --blob-1: var(--p-automate-soft-strong); } #page-automate .bg-blob.b2{ --blob-2: var(--p-automate-soft); }
  #page-grow .bg-blob.b1{ --blob-1: var(--p-grow-soft-strong); } #page-grow .bg-blob.b2{ --blob-2: var(--p-grow-soft); }

  /* orbiting hero motif: a center icon with small nodes travelling a ring */
  .hero-orbit{ position:relative; width:min(280px,72vw); aspect-ratio:1/1; margin:0 auto; }
  .hero-orbit .ring{
    position:absolute; inset:0; border-radius:50%; border:1.5px dashed var(--border-strong);
  }
  .hero-orbit .ring2{ position:absolute; inset:15%; border-radius:50%; border:1px solid var(--border); }
  .hero-orbit .center{
    position:absolute; inset:0; margin:auto; width:34%; height:34%; border-radius:50%;
    background:var(--surface); border:1.5px solid var(--border-strong); box-shadow:0 14px 30px -14px rgba(10,28,61,0.28);
    display:flex; align-items:center; justify-content:center; z-index:2;
  }
  .hero-orbit .center svg{ width:44%; height:44%; stroke:var(--orbit-accent, var(--blue)); }
  .hero-orbit .orbiter{ position:absolute; inset:0; animation: q360-spin 26s linear infinite; }
  .hero-orbit .orbiter.rev{ animation-name: q360-spin-rev; animation-duration: 26s; }
  .hero-orbit .node{
    position:absolute; width:15%; height:15%; border-radius:50%; background:var(--surface);
    border:1.5px solid var(--orbit-accent, var(--blue)); display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 18px -10px rgba(10,28,61,0.3);
  }
  .hero-orbit .node svg{ width:60%; height:60%; stroke:var(--orbit-accent, var(--blue)); animation: q360-spin-rev 26s linear infinite; }
  .hero-orbit .orbiter.rev .node svg{ animation-name: q360-spin; }
  .hero-orbit .node.n1{ top:-6%; left:50%; transform:translateX(-50%); }
  .hero-orbit .node.n2{ bottom:6%; right:-2%; }
  .hero-orbit .node.n3{ bottom:6%; left:-2%; }
  /* Per-pillar orbit accent -- same markup everywhere, just a different stroke per page. */
  #page-manage .hero-orbit{ --orbit-accent: var(--p-manage); }
  #page-protect .hero-orbit{ --orbit-accent: var(--p-protect); }
  #page-automate .hero-orbit{ --orbit-accent: var(--p-automate); }
  #page-grow .hero-orbit{ --orbit-accent: var(--p-grow); }
  @media (prefers-reduced-motion: reduce){
    .mo-float,.mo-float-sm,.mo-float-slow,.mo-drift,.mo-spin,.mo-spin-rev,.mo-spin-slow,.hero-orbit .orbiter,.hero-orbit .node svg,.pulse-dot::after{ animation:none; }
  }

  @media (max-width: 900px){
    .hero-grid{ grid-template-columns: 1fr; }
    .compass-wrap{ max-width: 280px; margin: 32px auto 0; }
  }

  /* ---------- Scroll progress bar ---------- */
  .scroll-progress{ position:fixed; top:0; left:0; width:100%; height:3px; z-index:100; background:transparent; pointer-events:none; }
  .scroll-progress-bar{ height:100%; width:0%; background:linear-gradient(90deg, var(--blue), var(--ink-blue)); transition:width .08s linear; }
  @media (prefers-reduced-motion: reduce){ .scroll-progress-bar{ transition:none; } }

  /* ---------- Theme toggle ---------- */
  .theme-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:38px; height:38px; border-radius:10px; border:1px solid var(--border-strong);
    background:none; cursor:pointer; color:var(--text); flex-shrink:0;
  }
  .theme-toggle:hover{ background:var(--blue-soft); border-color:var(--blue); }
  .theme-toggle svg{ width:17px; height:17px; stroke:currentColor; }
  .theme-toggle .ic-system, .theme-toggle .ic-light, .theme-toggle .ic-dark{ display:none; }
  .theme-toggle[data-mode="system"] .ic-system{ display:block; }
  .theme-toggle[data-mode="light"] .ic-light{ display:block; }
  .theme-toggle[data-mode="dark"] .ic-dark{ display:block; }
  .mobile-theme-row{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 4px; border-bottom:1px solid var(--border); font-size:0.98rem; color:var(--text);
  }

  /* ---------- Animated stat strip ---------- */
  .stat-strip{ background:var(--bg); padding: clamp(30px,4vw,44px) 0; border-bottom:1px solid var(--border); }
  .stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; text-align:center; }
  .stat-num{
    font-family:var(--font-display); font-weight:800; color:var(--navy);
    font-size:clamp(1.7rem,3vw,2.3rem); font-variant-numeric: tabular-nums; letter-spacing:-0.01em;
  }
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .stat-num{ color:var(--text); } }
  :root[data-theme="dark"] .stat-num{ color:var(--text); }
  .stat-label{ margin-top:6px; font-size:0.82rem; color:var(--text-mute); font-weight:500; }
  .stat-label sup{ font-size:0.7em; }
  .stat-sources{ margin-top:24px; font-size:0.74rem; line-height:1.6; color:var(--text-mute); text-align:center; max-width:820px; margin-left:auto; margin-right:auto; }
  .stat-sources a{ color:var(--text-mute); text-decoration:underline; }
  .stat-sources a:hover{ color:var(--navy); }
  @media (max-width:700px){ .stat-grid{ grid-template-columns:repeat(2,1fr); gap:26px 18px; } }

  /* ---------- Plan builder ---------- */
  .builder{ padding: clamp(50px,7vw,84px) 0; background:var(--bg-alt); }
  .builder-card{
    background:var(--surface); border:1px solid var(--border); border-radius:22px;
    padding:clamp(24px,4vw,40px); box-shadow:var(--shadow);
    display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:start;
  }
  @media (max-width:860px){ .builder-card{ grid-template-columns:1fr; } }
  .builder-picks{ display:flex; flex-direction:column; gap:10px; }
  .pick{
    display:flex; align-items:center; gap:14px; text-align:left; width:100%;
    background:var(--bg); border:1.5px solid var(--border-strong); border-radius:14px;
    padding:14px 16px; cursor:pointer; font-family:var(--font-body);
    transition: border-color .15s ease, background .15s ease;
  }
  .pick:hover{ border-color:var(--blue); }
  .pick[aria-pressed="true"]{ border-color:var(--blue); background:var(--blue-soft); }
  .pick .pick-box{
    width:22px; height:22px; border-radius:6px; border:1.5px solid var(--border-strong);
    flex-shrink:0; position:relative; background:var(--surface);
  }
  .pick[aria-pressed="true"] .pick-box{ background:var(--blue); border-color:var(--blue); }
  .pick[aria-pressed="true"] .pick-box::after{
    content:''; position:absolute; left:6px; top:2px; width:6px; height:11px;
    border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
  }
  .pick-text{ flex:1; }
  .pick-text b{ display:block; font-size:0.98rem; color:var(--text); }
  .pick-text span{ font-size:0.84rem; color:var(--text-mute); }
  .builder-summary{
    background:var(--bg-alt); border-radius:16px; padding:24px; display:flex; flex-direction:column; min-height:100%;
  }
  .builder-summary h3{ font-size:1.05rem; }
  .builder-summary-body{ margin-top:12px; flex:1; }
  .builder-summary-body p{ color:var(--text-mute); font-size:0.94rem; }
  .builder-line{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--border); font-size:0.92rem; }
  .builder-line:last-child{ border-bottom:none; }
  .builder-line b{ color:var(--text); }
  .builder-total{ margin-top:14px; padding-top:14px; border-top:1.5px solid var(--border-strong); display:flex; justify-content:space-between; align-items:baseline; }
  .builder-total .amt{ font-family:var(--font-display); font-weight:800; font-size:1.5rem; color:var(--blue); }
  .builder-summary .btn{ margin-top:18px; }

  /* ---------- Interactive calculators (Build / Automate / Protect pages) ---------- */
  .calc-section{ padding: clamp(50px,7vw,84px) 0; background:var(--bg-alt); }
  .calc-card{
    background:var(--surface); border:1px solid var(--border); border-radius:22px;
    padding:clamp(24px,4vw,40px); box-shadow:var(--shadow);
    display:grid; grid-template-columns:1.1fr 0.9fr; gap:36px; align-items:start;
  }
  @media (max-width:860px){ .calc-card{ grid-template-columns:1fr; } }
  .calc-opt{
    display:flex; align-items:flex-start; gap:14px; padding:13px 4px; border-bottom:1px solid var(--border); cursor:pointer;
  }
  .calc-opt:last-child{ border-bottom:none; }
  .calc-opt .cb{
    width:20px; height:20px; border-radius:6px; border:1.5px solid var(--border-strong);
    flex-shrink:0; margin-top:2px; position:relative; background:var(--bg);
  }
  .calc-opt[aria-pressed="true"] .cb{ background:var(--blue); border-color:var(--blue); }
  .calc-opt[aria-pressed="true"] .cb::after{
    content:''; position:absolute; left:5px; top:1px; width:6px; height:10px;
    border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
  }
  .calc-opt-text{ flex:1; display:flex; justify-content:space-between; gap:10px; }
  .calc-opt-text b{ font-size:0.94rem; font-weight:600; }
  .calc-opt-text span.desc{ display:block; font-size:0.82rem; color:var(--text-mute); font-weight:400; margin-top:2px; }
  .calc-opt-price{ font-family:var(--font-mono); font-size:0.88rem; color:var(--blue); white-space:nowrap; }
  .calc-result{ background:var(--bg-alt); border-radius:16px; padding:24px; text-align:center; }
  .calc-result .k{ font-size:0.82rem; color:var(--text-mute); font-weight:500; }
  .calc-result .big{ font-family:var(--font-display); font-weight:800; font-size:clamp(2rem,4vw,2.6rem); color:var(--blue); margin-top:6px; font-variant-numeric: tabular-nums; }
  .calc-result .note{ margin-top:10px; font-size:0.84rem; color:var(--text-mute); }
  .price-note{ font-size:0.84rem; color:var(--text-mute); }
  .calc-result .btn{ margin-top:18px; width:100%; justify-content:center; }
  .calc-field{ margin-top:16px; }
  .calc-field label{ display:flex; justify-content:space-between; font-size:0.88rem; font-weight:600; color:var(--text); margin-bottom:8px; }
  .calc-field label .v{ font-family:var(--font-mono); color:var(--blue); font-weight:600; }
  .calc-field input[type="range"]{
    width:100%; accent-color:var(--blue); height:6px;
  }
  .calc-toggle-row{ display:flex; gap:10px; margin-top:10px; }
  .calc-toggle{
    flex:1; padding:10px; border-radius:10px; border:1.5px solid var(--border-strong);
    background:var(--bg); text-align:center; font-size:0.92rem; font-weight:600; cursor:pointer; color:var(--text-mute);
  }
  .calc-toggle[aria-pressed="true"]{ border-color:var(--blue); color:var(--blue); background:var(--blue-soft); }

  /* ---------- Segmented toggle (before/after) ---------- */
  .seg-toggle{ display:inline-flex; background:rgba(255,255,255,0.08); border:1px solid var(--ink-line); border-radius:999px; padding:4px; margin-top:20px; }
  .seg-btn{
    padding:9px 20px; border-radius:999px; border:none; background:none; cursor:pointer;
    font-family:var(--font-body); font-weight:600; font-size:0.88rem; color:var(--ink-mute);
  }
  .seg-btn[aria-pressed="true"]{ background:var(--ink-blue); color:#08132b; }
  .diff-panel{ display:none; }
  .diff-panel.active{ display:block; }

  /* ---------- Insights ---------- */
  .insight-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
  @media (max-width:780px){ .insight-grid{ grid-template-columns:1fr; } }
  .insight-card{
    background:var(--surface); border:1px solid var(--border); border-radius:16px;
    padding:24px; box-shadow:var(--shadow);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .insight-card:hover{ transform:translateY(-4px); box-shadow:0 16px 34px -18px rgba(10,28,61,0.32); border-color:var(--border-strong); }
  @media (prefers-reduced-motion: reduce){ .insight-card:hover{ transform:none; } }
  .insight-card .tag{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--blue); font-weight:500; }
  .insight-card h3{ font-size:1.15rem; margin-top:10px; }
  .insight-card p{ margin-top:10px; color:var(--text-mute); font-size:0.93rem; }

  /* ---------- WhatsApp teaser bubble ---------- */
  .wa-teaser{
    /* Clears the full fab-stack (back-to-top + chat button, which is always reserved in
       the stack's layout even while back-to-top is invisible) plus a small breathing gap. */
    position:fixed; right: clamp(16px,4vw,28px); bottom: calc(clamp(16px,4vw,28px) + 56px + 12px + 42px + 12px); z-index:79;
    background:var(--surface); border:1px solid var(--border); border-radius:16px 16px 4px 16px;
    box-shadow:var(--shadow); padding:14px 40px 14px 16px; max-width:230px;
    font-size:0.88rem; color:var(--text);
    opacity:0; visibility:hidden; transform:translateY(8px) scale(0.96);
    transition:opacity .25s ease, transform .25s ease, visibility .25s;
  }
  .wa-teaser.show{ opacity:1; visibility:visible; transform:none; }
  .wa-teaser button.wa-close{
    position:absolute; top:8px; right:8px; width:22px; height:22px; border-radius:50%;
    border:none; background:var(--bg-alt); color:var(--text-mute); cursor:pointer; font-size:14px; line-height:1;
  }
  @media (prefers-reduced-motion: reduce){ .wa-teaser{ transition:none; } }
  @media (max-width:520px){ .wa-teaser{ display:none; } }

  .cookie-banner{
    position:fixed; left:0; right:0; bottom:0; z-index:95;
    background:var(--surface); border-top:1px solid var(--border); box-shadow:0 -8px 24px rgba(0,0,0,0.1);
    padding:16px clamp(16px,4vw,28px);
    transform:translateY(110%); transition:transform .3s ease;
  }
  .cookie-banner.show{ transform:none; }
  .cookie-banner-inner{ max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
  .cookie-banner-inner p{ margin:0; font-size:0.86rem; color:var(--text); flex:1 1 320px; }
  .cookie-banner-inner p a{ color:var(--blue); text-decoration:underline; }
  .cookie-banner-actions{ display:flex; gap:10px; flex-shrink:0; }
  @media (prefers-reduced-motion: reduce){ .cookie-banner{ transition:none; } }

  /* ---------- Founder checklist (Startup Program) ---------- */
  .checklist-card{
    background:var(--surface); border:1px solid var(--border); border-radius:22px;
    padding:clamp(24px,4vw,40px); box-shadow:var(--shadow); margin-top:32px;
  }
  .checklist-list{ display:flex; flex-direction:column; gap:16px; list-style:none; padding:0; margin:0; }
  .checklist-list li{ display:flex; gap:14px; align-items:flex-start; }
  .ci-num{
    width:26px; height:26px; border-radius:50%; background:var(--blue-soft); color:var(--blue);
    font-family:var(--font-mono); font-size:0.78rem; font-weight:600;
    display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px;
  }
  .checklist-list b{ display:block; font-size:0.96rem; color:var(--text); font-weight:600; }
  .checklist-list span{ display:block; font-size:0.86rem; color:var(--text-mute); margin-top:2px; }
  .checklist-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }

  /* ---------- Updates signup strip ---------- */
  .updates-strip{
    margin-top:28px; background:var(--bg-alt); border:1px solid var(--border); border-radius:18px;
    padding:clamp(20px,3vw,28px); display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  }
  .updates-strip h4{ font-size:1.02rem; color:var(--text); }
  .updates-strip p{ margin-top:4px; color:var(--text-mute); font-size:0.88rem; max-width:44ch; }
  .updates-form{ display:flex; gap:10px; flex-wrap:wrap; }
  .updates-form input{
    padding:11px 14px; border-radius:10px; border:1.5px solid var(--border-strong); background:var(--surface);
    color:var(--text); font-family:var(--font-body); font-size:0.92rem; min-width:220px;
  }
  .updates-form input:focus{ outline:none; border-color:var(--blue); }

  /* ---------- Insights tag filter ---------- */
  .filter-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:30px; }
  .filter-chip{
    font-size:0.85rem; font-weight:600; color:var(--text-mute); font-family:var(--font-body);
    background:var(--bg-alt); border:1.5px solid var(--border); padding:8px 16px; border-radius:999px; cursor:pointer;
  }
  .filter-chip:hover{ border-color:var(--blue); }
  .filter-chip[aria-pressed="true"]{ background:var(--blue); border-color:var(--blue); color:#fff; }
  .insight-card.hidden{ display:none; }

  /* ---------- Print (founder checklist) ---------- */
  @media print{
    .nav, .scroll-progress, .fab-stack, .wa-teaser, .cookie-banner, footer, .no-print{ display:none !important; }
  }

  /* =====================================================================
     GLASS REBRAND LAYER
     Sits after the original component rules and before the Quest360 AI
     rules (which must keep winning inside #page-ai).
     ===================================================================== */

  /* Ambient colour wash: body's own background (no pseudo-element), pinned to the viewport,
     so every glass surface has colour behind it at any scroll position. */
  html{
    background-color: var(--bg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-image:
      radial-gradient(60% 60% at 4% 0%, var(--amb-build), transparent 72%),
      radial-gradient(55% 58% at 100% 6%, var(--amb-manage), transparent 72%),
      radial-gradient(62% 64% at 96% 68%, var(--amb-protect), transparent 72%),
      radial-gradient(58% 60% at 2% 64%, var(--amb-grow), transparent 72%),
      radial-gradient(56% 58% at 50% 100%, var(--amb-automate), transparent 72%),
      radial-gradient(48% 50% at 48% 38%, var(--amb-build), transparent 75%);
    min-height: 100%;
  }
  body{ background: none; font-size: 15.5px; overflow-x: clip; }
  h1,h2,h3,h4{ font-weight: 750; letter-spacing: -0.025em; }
  h4{ letter-spacing: -0.015em; }

  .glass,
  .value-card, .pillar, .industry-chip, .threat-card, .callout, .builder-card, .quick-card, .form-card,
  .side-card, .price-card, .pricing-flagship, .calc-card, .insight-card, .checklist-card, .updates-strip,
  .faq-group, .stat-item, .step, .builder-summary, .calc-result{
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-highlight);
  }
  .value-card, .pillar, .threat-card, .callout, .builder-card, .quick-card, .form-card,
  .price-card, .pricing-flagship, .calc-card, .insight-card, .checklist-card, .updates-strip, .faq-group{
    border-radius: var(--radius-lg);
  }
  .value-card:hover, .pillar:hover, .industry-chip:hover, .insight-card:hover, .price-card:hover{
    background: var(--glass-bg-strong);
    box-shadow: var(--shadow-md), inset 0 1px 0 var(--glass-highlight);
    border-color: var(--border-strong);
  }
  .side-card, .calc-result, .builder-summary{ border-radius: var(--radius-md); }
  .step{ border-radius: var(--radius-md); padding: 22px; }
  .step-arrow{ display: none; }
  .steps{ gap: 14px; }

  /* Section bands become transparent so the wash shows through */
  .industry-strip, .process, .builder, .calc-section, .article-hero, .stat-strip{ background: transparent; border-bottom: 0; }

  /* Eyebrows: a coloured-dot pill, not mono caps */
  .eyebrow{
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--font-display); font-size: 0.78rem; font-weight: 650; letter-spacing: 0; text-transform: none;
    padding: 7px 14px 7px 10px; border-radius: 999px; background: var(--accent-wash); color: var(--accent-deep);
  }
  .eyebrow::before{ content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
  .hero-eyebrow, .hero-badge{ margin-bottom: 0; }
  .pill{
    display: inline-flex; align-items: center; gap: 7px; font-size: 0.78rem; font-weight: 650;
    padding: 7px 14px 7px 10px; border-radius: 999px; background: var(--accent-wash); color: var(--accent-deep);
  }
  .pill .dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }

  ::selection{ background: var(--accent); color: var(--on-accent); }
  a:focus-visible, button:focus-visible, .btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 999px; }

  /* Buttons: pills */
  .btn{ border-radius: 999px; font-family: var(--font-display); font-weight: 700; padding: 0.85em 1.5em; }
  .btn::before{ display: none; }
  .btn:hover{ box-shadow: none; }
  .btn-primary{
    background: var(--c-build); color: var(--on-accent); border-color: transparent;
    box-shadow: 0 10px 22px -10px var(--c-build), var(--shadow-sm);
  }
  .btn-primary:hover{ background: var(--c-build); filter: brightness(0.93); box-shadow: 0 16px 28px -12px var(--c-build); }
  .btn-outline-navy, .btn-outline-ink, .btn-white{
    background: var(--glass-bg); color: var(--fg); border-color: var(--glass-border);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5); backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
    box-shadow: var(--shadow-sm);
  }
  .btn-outline-navy:hover, .btn-outline-ink:hover, .btn-white:hover{ background: var(--glass-bg-strong); border-color: var(--accent); color: var(--accent-deep); }
  .btn-whatsapp{ color: #fff; background: #168A49; }
  .btn-whatsapp:hover{ background: #12703C; }

  /* Nav: floating glass pill */
  .nav{
    top: max(12px, env(safe-area-inset-top, 0px));
    width: min(1180px, calc(100% - 24px)); margin: 12px auto 0;
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5); backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
    border: 1px solid var(--glass-border); border-radius: 999px;
    box-shadow: var(--shadow-md), inset 0 1px 0 var(--glass-highlight);
  }
  .nav:has(.mobile-panel.open){ border-radius: 28px; }
  .nav-row{ padding: 10px 12px 10px 22px; }
  .nav-links > li > a, .nav-drop-btn{ font-weight: 600; }
  .nav-links > li > a{ border-bottom: 0; }
  .nav-links > li > a:hover, .nav-drop-btn:hover, .nav-active{ color: var(--fg) !important; }
  .nav-drop-panel{ background: var(--glass-bg-strong); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5); backdrop-filter: blur(var(--glass-blur)) saturate(1.5); border-color: var(--glass-border); border-radius: var(--radius-md); }
  .nav-drop-panel .di{ border-radius: 12px; }
  .nav-toggle{ border-radius: 999px; font-family: var(--font-display); font-weight: 600; }
  .mobile-panel.open{ background: transparent; border-bottom: 0; }
  .nav-cta .btn-primary{ padding: 0.6em 1.25em; }

  /* Hero */
  .hero{ background: transparent; }
  .hero-dots{
    position: absolute; inset: -10% -10% auto auto; width: 60%; height: 70%; pointer-events: none;
    background-image: radial-gradient(var(--border-strong) 1.3px, transparent 1.3px); background-size: 22px 22px; opacity: .55;
    -webkit-mask-image: radial-gradient(ellipse at 70% 20%, black 0%, transparent 65%); mask-image: radial-gradient(ellipse at 70% 20%, black 0%, transparent 65%);
  }
  .hero-grid{ padding-block: clamp(36px, 6vw, 72px) clamp(40px, 6vw, 80px); }
  .hero-copy{ display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
  .hero h1{ font-size: clamp(2.1rem, 4.4vw, 3.15rem); line-height: 1.1; letter-spacing: -0.025em; }
  .hero h1 em{ color: var(--accent); }
  .hero-sub{ margin-top: 0; font-size: 1.08rem; line-height: 1.6; max-width: 46ch; }
  .hero-ctas{ margin-top: 0; }
  .hero-note{ display: flex; align-items: center; gap: 8px; font-size: 0.86rem; color: var(--fg-muted); font-weight: 600; }
  .hero-note svg{ width: 15px; height: 15px; stroke: var(--c-grow); flex: none; }
  @media (max-width: 900px){
    .hero-grid{ grid-template-columns: 1fr; }
    .hero-copy{ align-items: center; text-align: center; }
    .hero-ctas{ justify-content: center; }
  }

  /* Floating pillar cluster */
  .cluster-stage{ position: relative; width: 100%; max-width: 460px; aspect-ratio: 1/0.95; margin-inline: auto; }
  .cluster-glow{
    position: absolute; inset: -15%; border-radius: 50%; pointer-events: none; filter: blur(36px); opacity: .5;
    background:
      radial-gradient(28% 28% at 22% 24%, var(--c-build-wash), transparent 70%),
      radial-gradient(28% 28% at 80% 18%, var(--c-manage-wash), transparent 70%),
      radial-gradient(30% 30% at 86% 62%, var(--c-protect-wash), transparent 70%),
      radial-gradient(28% 28% at 58% 88%, var(--c-automate-wash), transparent 70%),
      radial-gradient(28% 28% at 10% 66%, var(--c-grow-wash), transparent 70%);
  }
  .cluster-core{
    position: absolute; top: 50%; left: 50%; width: 132px; height: 132px; margin: -66px 0 0 -66px;
    border-radius: 28px; background: var(--glass-bg-strong);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5); backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
    border: 1px solid var(--glass-border);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-highlight);
  }
  .cluster-core b{ font-size: 1.3rem; letter-spacing: -0.02em; }
  .cluster-core span{ font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; color: var(--fg-faint); }
  .cluster-line{ position: absolute; top: 50%; left: 50%; height: 2px; border-top: 2px dashed; opacity: .35; transform-origin: left center; }
  .cluster-chip{
    position: absolute; width: 84px; margin-left: -42px; margin-top: -42px;
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    animation: chip-float 5.5s ease-in-out infinite;
  }
  .cluster-chip i{ width: 56px; height: 56px; border-radius: 18px; display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: var(--shadow-md); }
  .cluster-chip i svg{ width: 24px; height: 24px; stroke: currentColor; }
  .cluster-chip em{
    font-style: normal; font-size: 0.74rem; font-weight: 700; color: var(--fg); background: var(--glass-bg-strong);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border); padding: 2px 9px; border-radius: 999px; box-shadow: var(--shadow-sm);
  }
  @keyframes chip-float{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-9px); } }
  @media (prefers-reduced-motion: reduce){ .cluster-chip{ animation: none; } }
  @media (max-width: 600px){
    .cluster-stage{ max-width: 320px; }
    .cluster-chip{ width: 68px; margin-left: -34px; margin-top: -34px; }
    .cluster-chip i{ width: 46px; height: 46px; border-radius: 14px; }
    .cluster-chip i svg{ width: 19px; height: 19px; }
    .cluster-core{ width: 104px; height: 104px; margin: -52px 0 0 -52px; border-radius: 22px; }
  }

  /* Stat pills */
  .statrow{ display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding-block: 6px 12px; }
  .statpill{
    display: flex; align-items: center; gap: 10px; background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5); backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
    border: 1px solid var(--glass-border); border-radius: 999px; padding: 10px 18px;
    box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-highlight); font-size: 0.88rem; color: var(--fg-muted); font-weight: 600;
  }
  .statpill b{ color: var(--fg); font-size: 0.98rem; }
  .statpill i{ width: 8px; height: 8px; border-radius: 50%; flex: none; }
  .stat-sources{ margin-top: 14px; text-align: center; font-size: 0.76rem; color: var(--fg-muted); }
  .stat-sources a{ text-decoration: underline; }

  /* Section shell */
  .section{ padding-block: clamp(48px, 7vw, 88px); }
  .sec-head{ display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
  .sec-head h2{ margin-top: 0; font-size: clamp(1.65rem, 3.2vw, 2.35rem); }
  .sec-head p{ margin-top: 0; }

  /* Home pillar cards: five glass cards, each in its own colour */
  .pillars-grid{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
  .pillar-card{
    display: flex; flex-direction: column; gap: 14px; padding: 24px 20px 22px; border-radius: var(--radius-lg);
    background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5); backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
    border: 1px solid var(--glass-border); box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-highlight);
    transition: transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s ease, border-color .2s ease, background .2s ease;
  }
  .pillar-card:hover{ transform: translateY(-6px); background: var(--glass-bg-strong); box-shadow: var(--shadow-md), inset 0 1px 0 var(--glass-highlight); border-color: var(--border-strong); }
  .pillar-card .pi{ width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #fff; }
  .pillar-card .pi svg{ width: 21px; height: 21px; stroke: currentColor; }
  .pillar-card h3{ font-size: 1.05rem; }
  .pillar-card p{ font-size: 0.88rem; color: var(--fg-muted); line-height: 1.55; flex: 1; }
  .pillar-card .pl{ font-size: 0.84rem; display: inline-flex; align-items: center; gap: 5px; font-weight: 700; }
  .pillar-card .pl svg{ width: 13px; height: 13px; stroke: currentColor; transition: transform .15s ease; }
  .pillar-card:hover .pl svg{ transform: translateX(3px); }
  @media (max-width: 980px){ .pillars-grid{ grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 640px){ .pillars-grid{ grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 420px){ .pillars-grid{ grid-template-columns: 1fr; } }
  .pc-build .pi{ background: var(--c-build); }       .pc-build .pl{ color: color-mix(in srgb, var(--c-build) 62%, var(--fg)); }
  .pc-manage .pi{ background: var(--c-manage); }     .pc-manage .pl{ color: color-mix(in srgb, var(--c-manage) 62%, var(--fg)); }
  .pc-protect .pi{ background: var(--c-protect); }   .pc-protect .pl{ color: color-mix(in srgb, var(--c-protect) 62%, var(--fg)); }
  .pc-automate .pi{ background: var(--c-automate); } .pc-automate .pl{ color: color-mix(in srgb, var(--c-automate) 62%, var(--fg)); }
  .pc-grow .pi{ background: var(--c-grow); }         .pc-grow .pl{ color: color-mix(in srgb, var(--c-grow) 62%, var(--fg)); }
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .pillar-card .pi, :root:not([data-theme="light"]) .cluster-chip i{ color: #0B1020; } }
  :root[data-theme="dark"] .pillar-card .pi, :root[data-theme="dark"] .cluster-chip i{ color: #0B1020; }

  /* Original pillar cards (still used elsewhere): colour icon chip */
  .pillar-icon{ border-radius: 14px; }
  .pillar-bearing{ display: none; }

  /* Closing CTA: centred booking card on a local blob cluster */
  .cta{ background: transparent; position: relative; overflow: hidden; padding: clamp(64px, 9vw, 104px) 0; }
  .cta::before{
    content: ''; position: absolute; inset: 0; pointer-events: none; filter: blur(4px);
    background:
      radial-gradient(32% 60% at 14% 30%, var(--amb-build), transparent 70%),
      radial-gradient(30% 55% at 88% 20%, var(--amb-automate), transparent 70%),
      radial-gradient(34% 60% at 80% 85%, var(--amb-protect), transparent 70%),
      radial-gradient(30% 55% at 10% 85%, var(--amb-grow), transparent 70%);
  }
  .cta .wrap{
    position: relative; max-width: 760px; text-align: center; background: var(--glass-bg-strong);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5); backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
    border: 1px solid var(--glass-border); border-radius: 32px; box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-highlight);
    padding: clamp(36px, 6vw, 56px) clamp(24px, 6vw, 56px); margin-inline: auto;
    width: min(760px, calc(100% - 32px));
  }
  .cta .eyebrow{ color: var(--accent-deep); }
  .cta-email{ font-family: var(--font-display); font-weight: 600; }

  /* Differentiators / threat bands: glass instead of navy */
  .diff, .threat-section{ background: transparent; color: var(--fg); }
  .diff-item .tick{ background: var(--c-protect-wash); }
  .diff-item .tick svg{ stroke: var(--c-protect); }
  .threat-card:hover{ border-color: var(--c-protect); }

  /* Footer: frosted glass */
  footer{
    background: var(--glass-bg-strong); color: var(--fg-muted);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4); backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    border-top: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 var(--glass-highlight);
  }
  footer h5{ font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.04em; font-weight: 700; color: var(--fg-faint); }
  footer ul a:hover, .foot-legal-links a:hover{ color: var(--accent-deep); }
  .foot-trust-item svg{ stroke: var(--c-grow); }
  .foot-trust a.foot-trust-link{ color: var(--accent-deep); }

  /* Inner pages: transparent hero over the wash, pillar colour carried by --accent */
  .inner-hero{ background: transparent; }
  .inner-hero::after{
    content: ''; position: absolute; right: -8%; top: -30%; width: 46%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
    background: radial-gradient(closest-side, var(--accent-wash), transparent); filter: blur(10px);
  }
  .inner-hero h1{ font-size: clamp(2rem, 3.6vw, 2.8rem); }
  #page-build{ --pg: var(--c-build); }
  #page-manage{ --pg: var(--c-manage); }
  #page-protect{ --pg: var(--c-protect); }
  #page-automate{ --pg: var(--c-automate); }
  #page-grow{ --pg: var(--c-grow); }
  #page-manage, #page-protect, #page-automate, #page-grow{
    --accent: var(--pg);
    --accent-deep: color-mix(in srgb, var(--pg) 62%, var(--fg));
    --accent-wash: color-mix(in srgb, var(--pg) 13%, transparent);
    --blue: color-mix(in srgb, var(--pg) 62%, var(--fg)); --blue-soft: var(--accent-wash);
    --blue-soft-strong: color-mix(in srgb, var(--pg) 22%, transparent);
  }

  /* Legal pages stay plain and readable */
  #page-privacy, #page-terms, #page-cookies{ --glass-bg: var(--surface); }

  /* Misc: mono accents become the display face */
  .btn-sm{ padding: 0.65em 1.2em; }
  .faq-item{ border-radius: var(--radius-md); }
  .theme-toggle{ border-radius: 999px; }

  @media (prefers-reduced-motion: reduce){ .pillar-card:hover{ transform: none; } }

  /* =====================================================================
     DEPTH LAYER: 3D + glass texture
     Sheen (light catching the top-left edge), fine grain, thickness
     shadows, glossy 3D chips/buttons and a pointer-driven tilt.
     ===================================================================== */
  :root{
    --sheen: linear-gradient(135deg, rgba(255,255,255,0.62) 0%, rgba(255,255,255,0.16) 42%, rgba(255,255,255,0.04) 100%);
    --edge-dark: rgba(23,24,43,0.06);
    --noise: 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='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/></svg>");
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --sheen: linear-gradient(135deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.03) 45%, rgba(255,255,255,0) 100%);
      --edge-dark: rgba(0,0,0,0.35);
    }
  }
  :root[data-theme="dark"]{
    --sheen: linear-gradient(135deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.03) 45%, rgba(255,255,255,0) 100%);
    --edge-dark: rgba(0,0,0,0.35);
  }

  /* Glass surfaces: sheen + grain on top of the frosted fill, plus a lower edge for thickness */
  .glass, .nav, .nav-drop-panel, .statpill, .pillar-card, .cluster-core, .cta .wrap, .fab-menu, footer, .btn-outline-navy, .btn-outline-ink, .btn-white,
  .value-card, .pillar, .industry-chip, .threat-card, .callout, .builder-card, .quick-card, .form-card,
  .side-card, .price-card, .pricing-flagship, .calc-card, .insight-card, .checklist-card, .updates-strip,
  .faq-group, .stat-item, .step, .builder-summary, .calc-result, .cluster-chip em{
    background-image: var(--sheen), var(--noise);
    background-blend-mode: normal, soft-light;
  }
  .nav, .statpill, .pillar-card, .cluster-core, .cta .wrap, .value-card, .pillar, .industry-chip, .threat-card, .callout,
  .builder-card, .quick-card, .form-card, .price-card, .pricing-flagship, .calc-card, .insight-card, .checklist-card, .faq-group, .step{
    box-shadow:
      inset 0 1px 0 var(--glass-highlight),
      inset 0 -1px 0 var(--edge-dark),
      inset 1px 0 0 rgba(255,255,255,0.25),
      var(--shadow-md);
  }
  .pillar-card:hover, .value-card:hover, .pillar:hover, .price-card:hover, .insight-card:hover, .industry-chip:hover{
    box-shadow:
      inset 0 1px 0 var(--glass-highlight),
      inset 0 -1px 0 var(--edge-dark),
      0 2px 4px rgba(23,24,43,0.06), 0 22px 40px -16px rgba(23,24,43,0.28);
  }

  /* Glossy 3D icon chips */
  .pillar-card .pi, .cluster-chip i, .pillar-icon, .value-card .icon, .industry-chip .ii{
    position: relative;
    box-shadow:
      inset 0 1.5px 0 rgba(255,255,255,0.55),
      inset 0 -4px 8px rgba(0,0,0,0.16),
      0 10px 18px -8px rgba(23,24,43,0.45);
  }
  .pillar-card .pi::after, .cluster-chip i::after{
    content: ''; position: absolute; inset: 1px 1px 52% 1px; border-radius: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,255,255,0));
    pointer-events: none;
  }
  .pc-build .pi, .cluster-chip:nth-child(1) i{ background-image: linear-gradient(160deg, color-mix(in srgb, var(--c-build) 78%, #fff), var(--c-build) 55%, color-mix(in srgb, var(--c-build) 80%, #000)); }
  .pc-manage .pi, .cluster-chip:nth-child(2) i{ background-image: linear-gradient(160deg, color-mix(in srgb, var(--c-manage) 78%, #fff), var(--c-manage) 55%, color-mix(in srgb, var(--c-manage) 80%, #000)); }
  .pc-protect .pi, .cluster-chip:nth-child(3) i{ background-image: linear-gradient(160deg, color-mix(in srgb, var(--c-protect) 78%, #fff), var(--c-protect) 55%, color-mix(in srgb, var(--c-protect) 80%, #000)); }
  .pc-automate .pi, .cluster-chip:nth-child(4) i{ background-image: linear-gradient(160deg, color-mix(in srgb, var(--c-automate) 78%, #fff), var(--c-automate) 55%, color-mix(in srgb, var(--c-automate) 80%, #000)); }
  .pc-grow .pi, .cluster-chip:nth-child(5) i{ background-image: linear-gradient(160deg, color-mix(in srgb, var(--c-grow) 78%, #fff), var(--c-grow) 55%, color-mix(in srgb, var(--c-grow) 80%, #000)); }

  /* Glossy primary buttons */
  .btn-primary{
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--c-build) 94%, #fff), var(--c-build));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 8px 16px -10px var(--c-build), var(--shadow-sm);
  }
  .btn-primary:hover{ filter: none; background-image: linear-gradient(180deg, color-mix(in srgb, var(--c-build) 90%, #fff), color-mix(in srgb, var(--c-build) 94%, #000)); box-shadow: 0 10px 18px -10px var(--c-build), var(--shadow-sm); }
  .btn-primary:active{ box-shadow: var(--shadow-sm); }

  /* Cluster core as a stacked, floating slab */
  .cluster-stage{ perspective: 900px; }
  .cluster-tilt{ position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .25s ease-out; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
  .cluster-core{ transform: translateZ(10px); }
  .cluster-core::before, .cluster-core::after{
    content: ''; position: absolute; inset: 0; border-radius: inherit; border: 1px solid var(--glass-border); pointer-events: none;
  }
  .cluster-core::before{ transform: translateZ(-18px) scale(1.07); opacity: .55; background: var(--glass-bg); }
  .cluster-core::after{ transform: translateZ(-36px) scale(1.15); opacity: .3; background: var(--glass-bg); }
  .cluster-chip i{ transform: translateZ(46px); }
  .cluster-chip{ transform-style: preserve-3d; }

  /* Pointer tilt on pillar cards */
  .pillars-grid{ perspective: 1100px; }
  .pillar-card{ transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; }
  .pillar-card:hover{ transform: perspective(900px) translateY(-6px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
  .pillar-card .pi{ transform: translateZ(26px); }
  @media (prefers-reduced-motion: reduce){
    .cluster-tilt{ transform: none !important; }
    .pillar-card, .pillar-card:hover{ transform: none !important; }
  }

  /* Nav: keep the longer CTA on one line between 900px and 1200px */
  .nav-row{ gap: 14px; }
  .nav-links{ gap: clamp(10px, 1.5vw, 26px); }
  .nav-cta .btn-primary{ white-space: nowrap; padding: 0.6em 1.15em; font-size: 0.9rem; }
  @media (max-width: 1120px){
    .nav-links > li > a, .nav-drop-btn{ font-size: 0.86rem; }
    .nav-row{ padding-left: 16px; }
    .brand img{ height: 26px; }
  }

  .contact-alt-head{ margin: clamp(32px, 5vw, 52px) 0 16px; }
  .contact-alt-head h3{ font-size: 1.15rem; }
  #contact-form .contact-quick{ margin-top: 0; }

  /* Less is more: text-led inner heroes, no decorative blobs */
  .inner-hero-grid{ grid-template-columns: 1fr; }
  .inner-hero h1{ max-width: 22ch; font-size: clamp(2.1rem, 4.2vw, 3.1rem); }
  .inner-hero p.lead{ max-width: 56ch; font-size: 1.1rem; }
  .bg-blob-field, .inner-hero::after{ display: none; }
  .lead-panel{
    max-width: 760px; padding: clamp(24px, 4vw, 36px); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
    background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5); backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
    border: 1px solid var(--glass-border); background-image: var(--sheen), var(--noise); background-blend-mode: normal, soft-light;
    box-shadow: inset 0 1px 0 var(--glass-highlight), inset 0 -1px 0 var(--edge-dark), var(--shadow-md);
  }
  .lead-panel .eyebrow{ background: var(--c-protect-wash); color: color-mix(in srgb, var(--c-protect) 62%, var(--fg)); }
  .lead-panel .eyebrow::before{ background: var(--c-protect); }
  .lead-panel p{ font-size: 1.15rem; line-height: 1.55; color: var(--fg); font-weight: 500; }
  .lead-actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
  .lead-actions .pillar-link{ margin-top: 0; }

  /* ---- Brand-new-tech-company pass ---- */
  /* Menus: near-opaque so text never fights the background */
  .nav-drop-panel{
    background: color-mix(in srgb, var(--surface) 97%, transparent);
    -webkit-backdrop-filter: blur(36px) saturate(1.6); backdrop-filter: blur(36px) saturate(1.6);
    border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-highlight);
    width: 320px; padding: 12px;
  }
  .nav-drop-panel a:hover{ background: var(--accent-wash); }
  .nav-drop-panel .dt, .nav-drop-panel .dd{ display: block; }
  .nav-drop-panel .dd{ color: var(--fg-muted); line-height: 1.35; }
  .nav:has(.mobile-panel.open){ background: color-mix(in srgb, var(--surface) 97%, transparent); }
  .fab-menu, .wa-teaser{ background: color-mix(in srgb, var(--surface) 96%, transparent); }

  /* Gradient emphasis */
  .grad{
    background: linear-gradient(96deg, var(--c-build) 0%, var(--c-automate) 52%, var(--c-protect) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
    font-style: normal; padding-bottom: 0.08em;
  }
  .hero h1 em.grad{ color: transparent; }

  /* Ambient aurora: slow-moving colour behind everything */
  .aurora{ position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
  .aurora i{ position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%; filter: blur(90px); opacity: .55; will-change: transform; }
  .aurora i:nth-child(1){ left: -12vmax; top: -14vmax; background: var(--amb-build); animation: aur1 28s ease-in-out infinite alternate; }
  .aurora i:nth-child(2){ right: -14vmax; top: 18vh; background: var(--amb-automate); animation: aur2 34s ease-in-out infinite alternate; }
  .aurora i:nth-child(3){ left: 22vw; bottom: -22vmax; background: var(--amb-manage); animation: aur3 31s ease-in-out infinite alternate; }
  @keyframes aur1{ to{ transform: translate(14vmax, 10vmax) scale(1.15); } }
  @keyframes aur2{ to{ transform: translate(-16vmax, 8vmax) scale(1.1); } }
  @keyframes aur3{ to{ transform: translate(-10vmax, -12vmax) scale(1.2); } }
  @media (prefers-reduced-motion: reduce){ .aurora i{ animation: none; } }

  /* Bigger, sharper type */
  .hero h1{ font-size: clamp(2.5rem, 5.6vw, 4.2rem); line-height: 1.03; letter-spacing: -0.04em; font-weight: 800; }
  .hero-sub{ font-size: clamp(1.05rem, 1.4vw, 1.2rem); max-width: 48ch; }
  .sec-head h2, .cta h2{ font-size: clamp(1.9rem, 3.8vw, 2.9rem); letter-spacing: -0.035em; font-weight: 800; }
  .inner-hero h1{ letter-spacing: -0.04em; font-weight: 800; }
  .pill .dot.pulse{ position: relative; }
  .pill .dot.pulse::after{ content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; animation: q360-pulse-ring 2.4s ease-out infinite; }

  /* 360 ring around the hero cluster */
  .cluster-ring{
    position: absolute; inset: 4%; border-radius: 50%; pointer-events: none;
    border: 1.5px dashed var(--border-strong); animation: ring-spin 70s linear infinite;
  }
  .cluster-ring::before, .cluster-ring::after{ content: ''; position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px var(--accent-wash); }
  .cluster-ring::before{ top: -5px; left: 50%; margin-left: -5px; }
  .cluster-ring::after{ bottom: -5px; left: 50%; margin-left: -5px; background: var(--c-protect); box-shadow: 0 0 0 5px var(--c-protect-wash); }
  @keyframes ring-spin{ to{ transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce){ .cluster-ring{ animation: none; } }

  /* Bento pillars: security leads */
  .bento{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .b-protect{ grid-column: span 2; grid-row: span 2; padding: clamp(26px, 3.4vw, 40px); gap: 16px; justify-content: flex-start; }
  .b-protect .pi{ width: 60px; height: 60px; border-radius: 18px; }
  .b-protect .pi svg{ width: 28px; height: 28px; }
  .b-protect h3{ font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -0.03em; }
  .b-protect p{ font-size: 1.05rem; flex: 0 0 auto; max-width: 36ch; }
  .b-tag{ align-self: flex-start; font-size: 0.74rem; font-weight: 700; padding: 5px 11px; border-radius: 999px; background: var(--c-protect-wash); color: color-mix(in srgb, var(--c-protect) 62%, var(--fg)); }
  .b-chips{ list-style: none; margin: 0 0 auto; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
  .b-chips li{ font-size: 0.82rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--glass-bg-strong); border: 1px solid var(--glass-border); }
  .b-protect .pl{ margin-top: 12px; }
  @media (max-width: 980px){ .bento{ grid-template-columns: repeat(2, 1fr); } .b-protect{ grid-column: span 2; grid-row: auto; } }
  @media (max-width: 520px){ .bento{ grid-template-columns: 1fr; } .b-protect{ grid-column: auto; } }

  /* Quest360 AI hero (light glass) */
  .qai-bg{ display: none; }
  .qai-hero2{ display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(24px, 5vw, 56px); align-items: center; padding-block: clamp(44px, 7vw, 88px) clamp(28px, 4vw, 48px); }
  .qai2-copy{ display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
  .qai-hero2 h1{ font-size: clamp(2.8rem, 6.4vw, 4.8rem); line-height: 1; letter-spacing: -0.045em; font-weight: 800; }
  .qai2-tag{ font-size: clamp(1.1rem, 1.8vw, 1.4rem); font-weight: 650; color: var(--fg); }
  .qai-hero2 .qai-lead{ opacity: 1; transform: none; color: var(--fg-muted); font-size: 1.08rem; max-width: 50ch; margin: 0; text-align: left; }
  .qai-hero2 .qai-lead strong{ color: var(--accent-deep); }
  .qai2-orb{ position: relative; width: min(100%, 380px); aspect-ratio: 1; margin-inline: auto; }
  .qai2-orb .r{ position: absolute; border-radius: 50%; border: 1.5px dashed var(--border-strong); animation: ring-spin 60s linear infinite; }
  .qai2-orb .r1{ inset: 0; } .qai2-orb .r2{ inset: 13%; animation-direction: reverse; animation-duration: 80s; } .qai2-orb .r3{ inset: 26%; border-style: solid; border-color: var(--glass-border); animation: none; }
  .qai2-orb .core{
    position: absolute; inset: 31%; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.85), transparent 38%), linear-gradient(145deg, color-mix(in srgb, var(--c-build) 80%, #fff), var(--c-automate) 60%, color-mix(in srgb, var(--c-manage) 70%, var(--c-build)));
    color: #fff; box-shadow: inset 0 2px 0 rgba(255,255,255,0.5), inset 0 -10px 22px rgba(0,0,0,0.18), 0 28px 50px -18px var(--c-automate);
    animation: chip-float 6s ease-in-out infinite;
  }
  .qai2-orb .core b{ font-size: 1.35rem; letter-spacing: -0.02em; }
  .qai2-orb .core span{ font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: .85; }
  .qai2-orb .m{
    position: absolute; font-size: 0.74rem; font-weight: 700; padding: 5px 12px; border-radius: 999px; color: var(--fg);
    background: var(--glass-bg-strong); border: 1px solid var(--glass-border); box-shadow: var(--shadow-md); animation: chip-float 5.5s ease-in-out infinite;
  }
  .qai2-orb .m1{ left: 4%; top: 18%; } .qai2-orb .m2{ right: 2%; top: 8%; animation-delay: -1.2s; } .qai2-orb .m3{ right: -2%; bottom: 30%; animation-delay: -2.4s; } .qai2-orb .m4{ left: 24%; bottom: 2%; animation-delay: -.6s; } .qai2-orb .m5{ left: -3%; bottom: 36%; animation-delay: -3s; }
  @media (max-width: 860px){ .qai-hero2{ grid-template-columns: 1fr; } .qai2-orb{ width: min(86%, 320px); } }
  @media (prefers-reduced-motion: reduce){ .qai2-orb .r, .qai2-orb .core, .qai2-orb .m{ animation: none; } }

  .page [id]{ scroll-margin-top: 110px; }
  /* Contact page: same transparent, text-led hero as every other page */
  .contact-hero{ background: transparent; padding: clamp(26px, 4vw, 38px) 0 clamp(4px, 1.5vw, 16px); overflow: visible; }
  .contact-hero .wrap{ display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
  .contact-hero .breadcrumb{ margin-bottom: 6px; }
  .contact-hero h1{ margin: 4px 0 0 !important; max-width: 20ch; font-size: clamp(2.1rem, 4.2vw, 3.1rem) !important; letter-spacing: -0.04em; font-weight: 800; line-height: 1.05; }
  .contact-hero .lead{ max-width: 56ch; margin: 0; font-size: 1.1rem; color: var(--fg-muted); line-height: 1.55; }
  .contact-hero .reply-live{ margin-top: 2px; }
  .contact-form-section{ padding: clamp(24px, 4vw, 48px) 0 clamp(56px, 8vw, 88px); }
  .contact-layout{ gap: clamp(24px, 4vw, 48px); }

  /* ---- Interactive tools: quizzes + estimators ---- */
  .calc-card{ gap: clamp(24px, 4vw, 48px); align-items: start; }
  .quiz-q{ margin: 0 !important; padding: 18px 0; border-bottom: 1px solid var(--border); }
  .quiz-q:first-child{ padding-top: 0; }
  .quiz-q:last-child{ border-bottom: 0; padding-bottom: 0; }
  .quiz-q > p{ font-size: 1rem !important; font-weight: 600 !important; line-height: 1.4; margin-bottom: 12px !important; }
  .calc-toggle-row{ display: flex; gap: 10px; margin-top: 0; }
  .calc-toggle{
    flex: 0 0 auto; min-width: 104px; padding: 10px 20px; border-radius: 999px; font: inherit; font-size: 0.92rem; font-weight: 650;
    background: var(--glass-bg-strong); border: 1.5px solid var(--border-strong); color: var(--fg);
    transition: background .15s, border-color .15s, color .15s, transform .1s; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  }
  .calc-toggle:hover{ border-color: var(--accent); }
  .calc-toggle:active{ transform: scale(0.98); }
  .calc-toggle[aria-pressed="true"]{ background: var(--accent-wash); border-color: var(--accent); color: var(--accent-deep); }
  .calc-toggle[data-answer="yes"][aria-pressed="true"]{ background: var(--c-grow-wash); border-color: var(--c-grow); color: color-mix(in srgb, var(--c-grow) 62%, var(--fg)); }
  .calc-toggle[data-answer="no"][aria-pressed="true"]{ background: var(--c-protect-wash); border-color: var(--c-protect); color: color-mix(in srgb, var(--c-protect) 62%, var(--fg)); }
  .calc-toggle[data-answer][aria-pressed="true"]::before{ font-weight: 800; }
  .calc-toggle[data-answer="yes"][aria-pressed="true"]::before{ content: '✓'; }
  .calc-toggle[data-answer="no"][aria-pressed="true"]::before{ content: '!'; }
  .calc-opt .cb{ background: var(--glass-bg-strong); }
  .calc-result{ text-align: left; position: sticky; top: 110px; }
  .calc-result .big{ text-align: center; }
  .calc-result .k, .calc-result .note{ text-align: center; }
  .qz-level{ margin: 10px auto 0; width: max-content; max-width: 100%; padding: 5px 14px; border-radius: 999px; font-size: 0.82rem; font-weight: 700; background: var(--accent-wash); color: var(--accent-deep); }
  .lvl-high .qz-level{ background: var(--c-grow-wash); color: color-mix(in srgb, var(--c-grow) 62%, var(--fg)); }
  .lvl-mid .qz-level{ background: var(--warm-soft-strong); color: color-mix(in srgb, #F0900F 55%, var(--fg)); }
  .lvl-low .qz-level{ background: var(--c-protect-wash); color: color-mix(in srgb, var(--c-protect) 62%, var(--fg)); }
  .qz-bar{ height: 6px; border-radius: 999px; background: var(--border); margin: 14px 0 4px; overflow: hidden; }
  .qz-bar i{ display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent); transition: width .25s ease; }
  .lvl-high .qz-bar i{ background: var(--c-grow); } .lvl-mid .qz-bar i{ background: #F0900F; } .lvl-low .qz-bar i{ background: var(--c-protect); }
  .qz-gaps{ margin-top: 14px; font-size: 0.86rem; }
  .qz-gaps b{ display: block; margin-bottom: 6px; font-size: 0.8rem; letter-spacing: 0.02em; color: var(--fg-muted); }
  .qz-gaps ul{ margin: 0; padding-left: 18px; color: var(--fg); display: grid; gap: 6px; }
  .qz-reset{ display: block; margin: 12px auto 0; background: none; border: 0; font: inherit; font-size: 0.84rem; font-weight: 600; color: var(--fg-muted); text-decoration: underline; cursor: pointer; }
  .qz-reset:hover{ color: var(--accent-deep); }
  .handoff-note{ font-size: 0.86rem; color: var(--accent-deep); background: var(--accent-wash); padding: 8px 12px; border-radius: 12px; margin-bottom: 8px; }
  @media (max-width: 860px){ .calc-result{ position: static; } }

  /* Home: why-it-matters stats */
  .need-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .need-card{
    padding: 26px 24px; border-radius: var(--radius-lg); background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5); backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
    border: 1px solid var(--glass-border); background-image: var(--sheen), var(--noise); background-blend-mode: normal, soft-light;
    box-shadow: inset 0 1px 0 var(--glass-highlight), inset 0 -1px 0 var(--edge-dark), var(--shadow-md);
  }
  .need-num{ font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: color-mix(in srgb, var(--c-protect) 70%, var(--fg)); font-variant-numeric: tabular-nums; }
  .need-card p{ margin-top: 10px; color: var(--fg-muted); font-size: 0.95rem; line-height: 1.5; }
  .need-source{ margin-top: 16px; font-size: 0.78rem; color: var(--fg-muted); }
  .need-source a{ text-decoration: underline; }
  .need-cta{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
  .hero-sub sup{ font-size: 0.65em; }
  @media (max-width: 760px){ .need-grid{ grid-template-columns: 1fr; } }

  /* Footer logo: theme-aware pair cloned from the nav (see script) */
  .foot-logo-badge .brand-logo-dark{ display: none; }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .foot-logo-badge .brand-logo-light{ display: none; }
    :root:not([data-theme="light"]) .foot-logo-badge .brand-logo-dark{ display: block; }
  }
  :root[data-theme="dark"] .foot-logo-badge .brand-logo-light{ display: none; }
  :root[data-theme="dark"] .foot-logo-badge .brand-logo-dark{ display: block; }

  /* Floating chat button + menu: glass */
  .fab{ box-shadow: var(--shadow-md); }
  .fab-chat{
    width: 60px; height: 60px; color: var(--on-accent);
    background: linear-gradient(145deg, color-mix(in srgb, var(--c-build) 84%, #fff), var(--c-build) 55%, color-mix(in srgb, var(--c-automate) 65%, var(--c-build)));
    border: 1px solid rgba(255,255,255,0.5);
    box-shadow: 0 16px 30px -10px var(--c-build), inset 0 1px 0 rgba(255,255,255,0.5);
  }
  .fab-chat svg{ width: 27px; height: 27px; stroke: currentColor; }
  .fab-chat::before{ background: var(--c-build); }
  .fab-chat::after{
    content: ''; position: absolute; top: 1px; right: 1px; width: 13px; height: 13px; border-radius: 50%;
    background: var(--c-grow); border: 2.5px solid var(--bg); z-index: 2;
  }
  .fab-chat .ic-close{ display: none; }
  .fab-chat[aria-expanded="true"]{ background: var(--fg); border-color: transparent; color: var(--bg); box-shadow: var(--shadow-md); }
  .fab-chat[aria-expanded="true"] .ic-open{ display: none; }
  .fab-chat[aria-expanded="true"] .ic-close{ display: block; }
  .fab-chat[aria-expanded="true"]::after{ display: none; }
  .fab-top{
    background: var(--glass-bg-strong); border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5); backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  }
  .fab-menu{
    bottom: 74px; width: 250px; border-radius: 20px; padding: 8px;
    background: var(--glass-bg-strong); border-color: var(--glass-border);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5); backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
    box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-highlight);
  }
  .fab-menu button, .fab-menu a{ border-radius: 14px; }
  .fab-menu button:hover, .fab-menu a:hover{ background: var(--accent-wash); }
  .fab-menu .fm-ic.wa{ background: #137A41; }
  .fab-menu .fm-ic.bot{ background: var(--c-build); }
  .fab-menu .fm-ic.bot svg{ stroke: var(--on-accent); }
  .wa-teaser{
    bottom: calc(clamp(16px,4vw,28px) + 60px + 12px + 42px + 12px);
    background: var(--glass-bg-strong); border-color: var(--glass-border); border-radius: 20px 20px 6px 20px;
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5); backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  }
  .chat-panel{ border-radius: 24px; background: var(--surface); }

  /* Consistent vertical rhythm: bands are transparent now, so padding no longer needs to stack */
  .intro, .process, .industry-strip, .builder, .calc-section, .signs-section, .faq-section, .diff, .threat-section, .pillars{
    padding-block: clamp(36px, 5vw, 60px);
  }
  .signs-section{ border-top: 0; }
  .inner-hero{ padding-bottom: clamp(8px, 2vw, 20px); }

  /* Contrast fixes found in the QA audit */
  .btn-whatsapp{ background: #137A41; }
  .btn-whatsapp:hover{ background: #0F6636; }
  .stat-pill{ color: color-mix(in srgb, var(--p-protect) 62%, var(--fg)); }
  .filter-chip[aria-pressed="true"], .price-card .badge{ background: var(--c-build); border-color: var(--c-build); color: var(--on-accent); }

  /* Enlarge hit areas of small inline links without changing layout */
  .breadcrumb a, .pillar-link, .foot-trust a.foot-trust-link{ position: relative; }
  .breadcrumb a::after, .pillar-link::after, .foot-trust a.foot-trust-link::after{ content: ''; position: absolute; inset: -11px -6px; }

  /* ---------- Quest360 AI homepage teaser strip ---------- */
  .qai-teaser-strip{
    position: relative; overflow: hidden;
    background: linear-gradient(180deg, var(--bg-alt), var(--bg) 85%);
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  }
  .qai-teaser-strip::before{
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(680px 340px at 84% 50%, rgba(13,148,136,0.16), transparent 68%);
  }
  /* Small version of the AI landing page's wireframe globe, sitting in the background */
  .qai-teaser-globe-wrap{
    position: absolute; top: 50%; right: clamp(-70px, 4vw, 20px); transform: translateY(-50%);
    width: clamp(200px, 24vw, 340px); height: clamp(200px, 24vw, 340px); z-index: 0; pointer-events: none;
    -webkit-mask-image: radial-gradient(circle, #000 50%, transparent 78%);
    mask-image: radial-gradient(circle, #000 50%, transparent 78%);
    opacity: 0.55;
  }
  .qai-teaser-globe{ position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
  .qai-teaser-globe-spin{
    position: absolute; inset: 0; transform-style: preserve-3d;
    animation: qai-globe-spin 46s linear infinite;
  }
  .qai-teaser-meridian{
    position: absolute; inset: 0; border-radius: 50%;
    border: 1px solid rgba(13,148,136,0.4); transform-style: preserve-3d;
  }
  .qai-teaser-equator{ border-color: rgba(13,148,136,0.6); }
  @media (prefers-reduced-motion: reduce){ .qai-teaser-globe-spin{ animation: none; transform: rotateY(28deg) rotateX(-10deg); } }
  @media (max-width: 780px){ .qai-teaser-globe-wrap{ display: none; } }

  .qai-teaser-inner{
    position: relative; z-index: 1;
    padding: 48px 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: 18px;
  }
  .qai-teaser-badge{
    font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
    color: #0D9488; background: rgba(13,148,136,0.12); border: 1px solid rgba(13,148,136,0.35);
    border-radius: 999px; padding: 5px 13px; flex-shrink: 0;
  }
  :root:not([data-theme="light"]) .qai-teaser-badge{ color: #67B2C9; background: rgba(13,148,136,0.18); }
  :root[data-theme="dark"] .qai-teaser-badge{ color: #67B2C9; background: rgba(13,148,136,0.18); }
  .qai-teaser-headline{
    font-family: var(--font-display); font-weight: 700; font-size: clamp(1.25rem, 2.6vw, 1.7rem);
    color: var(--text); max-width: 640px; line-height: 1.35;
  }
  .qai-teaser-headline strong{
    background: linear-gradient(90deg, #0D9488, #67B2C9); -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .qai-teaser-sub{ font-family: var(--font-body); font-size: 0.96rem; color: var(--text-mute); max-width: 520px; }
  .qai-teaser-cta{
    display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.95rem;
    color: #fff; background: linear-gradient(100deg, #0D9488, #0f8fa3); border-radius: 999px; padding: 12px 24px; flex-shrink: 0;
    box-shadow: 0 14px 32px -16px rgba(13,148,136,0.6); transition: filter .15s ease, transform .15s ease;
  }
  .qai-teaser-cta:hover{ filter: brightness(1.08); transform: translateY(-1px); }
  @media (max-width: 640px){ .qai-teaser-inner{ padding: 34px 0; gap: 14px; } }

  /* ==========================================================
     Quest360 AI — coming soon page
     Self-contained dark brand system (deliberately does not use
     the site's light/dark theme variables — always dark).
     ========================================================== */
  /* Quest360 AI now lives inside the normal site chrome (nav, footer, chat) in the light glass style. */
  .qai-page{
    --qai-bg: transparent;
    --qai-surface: var(--glass-bg-strong);
    --qai-border: var(--border-strong);
    --qai-teal: color-mix(in srgb, var(--c-manage) 62%, var(--fg));
    --qai-teal2: color-mix(in srgb, var(--c-build) 82%, var(--fg));
    --qai-cyan: color-mix(in srgb, var(--c-build) 82%, var(--fg));
    --qai-white: var(--fg);
    --qai-mute: var(--fg-muted);
    --qai-field: color-mix(in srgb, var(--surface) 88%, transparent);
    --qai-panel: color-mix(in srgb, var(--surface) 62%, transparent);
    --qai-deep: var(--surface);
    --qai-tint: color-mix(in srgb, var(--fg) 4%, transparent);
    --qai-on: var(--on-accent);
    --qai-font-head: var(--font-display);
    --qai-font-body: var(--font-display);
    background: var(--qai-bg);
    color: var(--qai-white);
    font-family: var(--qai-font-body);
    position: relative;
    padding-bottom: 8px;
  }
  .qai-page h1, .qai-page h2, .qai-page h3{
    font-family: var(--qai-font-head); font-weight: 600; letter-spacing: -0.01em; color: var(--qai-white);
  }
  .qai-bg{
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
      radial-gradient(560px 360px at 12% -6%, rgba(13,148,136,0.22), transparent 60%),
      radial-gradient(620px 420px at 88% 8%, rgba(103,178,201,0.16), transparent 60%),
      radial-gradient(700px 500px at 50% 100%, rgba(13,148,136,0.10), transparent 60%);
  }
  .qai-shell{ position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; padding: 0 clamp(20px,5vw,48px); }

  .qai-hero{ text-align: center; }

  /* ---------- Scroll-pinned 3D unveiling scene ---------- */
  .qai-scene{ position: relative; height: 150vh; }
  .qai-stage{
    position: sticky; top: 0; height: 100vh; overflow: hidden; perspective: 1100px;
    display: flex; align-items: center; justify-content: center;
  }

  /* Huge wireframe "world" — visible immediately, spins continuously, not scroll-gated */
  .qai-globe-wrap{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 0; }
  .qai-globe{
    position: relative; width: clamp(340px, 52vw, 680px); height: clamp(340px, 52vw, 680px);
    transform-style: preserve-3d;
  }
  .qai-globe-glow{
    position: absolute; inset: -12%; border-radius: 50%;
    background: radial-gradient(circle, rgba(13,148,136,0.20), rgba(13,148,136,0.05) 55%, transparent 75%);
    filter: blur(6px);
  }
  .qai-globe-spin{
    position: absolute; inset: 0; transform-style: preserve-3d;
    animation: qai-globe-spin 46s linear infinite;
  }
  .qai-meridian{
    position: absolute; inset: 0; border-radius: 50%;
    border: 1px solid rgba(103,178,201,0.32); transform-style: preserve-3d;
  }
  .qai-equator{ border-color: rgba(103,178,201,0.5); }
  @keyframes qai-globe-spin{ from{ transform: rotateY(0deg) rotateX(-8deg); } to{ transform: rotateY(360deg) rotateX(-8deg); } }
  @media (prefers-reduced-motion: reduce){
    .qai-globe-spin{ animation: none; transform: rotateY(28deg) rotateX(-10deg); }
  }

  /* "Scroll to reveal" hint — shown until the visitor starts scrolling */
  .qai-scroll-hint{
    position: absolute; left: 50%; bottom: clamp(20px,4vh,40px); transform: translateX(-50%);
    z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px;
    font-family: var(--qai-font-body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--qai-mute); transition: opacity .3s ease;
  }
  .qai-scroll-hint svg{ width: 20px; height: 20px; stroke: var(--qai-teal2); animation: qai-hint-bounce 1.6s ease-in-out infinite; }
  @keyframes qai-hint-bounce{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(7px); } }
  @media (prefers-reduced-motion: reduce){ .qai-scroll-hint svg{ animation: none; } .qai-scroll-hint{ transition: none; display: none; } }

  .qai-scene-text{ position: relative; z-index: 1; text-align: center; }
  .qai-text-scrim{
    position: absolute; left: 50%; top: 50%; width: min(900px, 130vw); height: min(560px, 100vh);
    transform: translate(-50%, -50%); z-index: 0; pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(15,17,21,0.62), rgba(15,17,21,0.22) 55%, transparent 75%);
  }
  .qai-scene-text .qai-eyebrow{
    display: inline-flex; align-items: center; gap: 8px; font-family: var(--qai-font-body);
    font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; color: var(--qai-teal2);
    background: rgba(13,148,136,0.12); border: 1px solid rgba(13,148,136,0.35);
    padding: 7px 16px; border-radius: 999px; margin-bottom: 24px;
    opacity: 0; transform: translateY(18px); will-change: transform, opacity;
    transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
  }
  .qai-dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--qai-teal); box-shadow: 0 0 0 3px rgba(13,148,136,0.25); flex-shrink: 0; }
  .qai-scene-text h1{
    font-size: clamp(3.4rem,10vw,7.2rem); line-height: 1; margin: 0 0 18px; font-weight: 800; letter-spacing: -0.02em;
    opacity: 0; transform: translateY(36px); filter: blur(14px); will-change: transform, opacity, filter;
    text-shadow: 0 0 60px rgba(103,178,201,0.35);
    transition: opacity .65s cubic-bezier(.16,1,.3,1) .08s, transform .65s cubic-bezier(.16,1,.3,1) .08s, filter .65s cubic-bezier(.16,1,.3,1) .08s;
  }
  .qai-word{
    display: inline-block; background: linear-gradient(100deg, var(--fg) 20%, #ffffff 42%, #bfe8ee 50%, #ffffff 58%, var(--fg) 80%);
    background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: qai-word-shimmer 7s ease-in-out infinite;
  }
  .qai-scene-text h1 .qai-accent{
    background: linear-gradient(100deg, #0d9488 8%, #9fe6da 42%, #67B2C9 55%, #0d9488 88%);
    background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 0 30px rgba(103,178,201,0.55));
    opacity: 0; transform: none; transform-origin: center center;
  }
  .qai-scene-text h1 .qai-accent.qai-ai-in{
    will-change: opacity, transform, filter;
    animation: qai-ai-glitch 640ms linear forwards, qai-word-shimmer 7s ease-in-out 640ms infinite;
  }
  @keyframes qai-word-shimmer{ 0%, 100%{ background-position: 0% 0; } 50%{ background-position: 100% 0; } }
  @keyframes qai-ai-glitch{
    /* A quick digital glitch/flash reveal: a few fast, jittery opacity+position snaps (like a
       signal cutting in and out), then a bright white flash bloom, settling to the normal cyan
       glow. Built only from opacity/transform/drop-shadow -- no clip-path or blur() here: animating
       either of those on an element that also uses background-clip:text rasterises as a solid box
       in Chromium (found twice already in testing), so those two properties are off the table for
       this element for good. Per-keyframe timing-functions keep the jitter feeling crisp/stepped
       while the flash-to-settle tail stays smooth. */
    0%    { opacity: 0;    transform: translateX(0) skewX(0); filter: none; animation-timing-function: steps(1, jump-end); }
    7%    { opacity: 1;    transform: translateX(-6px) skewX(-9deg); filter: none; animation-timing-function: steps(1, jump-end); }
    13%   { opacity: 0.12; transform: translateX(5px) skewX(6deg); filter: none; animation-timing-function: steps(1, jump-end); }
    19%   { opacity: 1;    transform: translateX(-4px) skewX(-5deg); filter: none; animation-timing-function: steps(1, jump-end); }
    25%   { opacity: 0.15; transform: translateX(3px) skewX(4deg); filter: none; animation-timing-function: steps(1, jump-end); }
    32%   { opacity: 1;    transform: translateX(-2px) skewX(-2deg); filter: none; animation-timing-function: steps(1, jump-end); }
    38%   { opacity: 0.3;  transform: translateX(1px) skewX(1deg); filter: none; animation-timing-function: cubic-bezier(.16,1,.3,1); }
    46%   { opacity: 1;    transform: none;
             filter: drop-shadow(0 0 46px rgba(255,255,255,0.95)) drop-shadow(0 0 22px rgba(163,230,238,0.9));
             animation-timing-function: cubic-bezier(.16,1,.3,1); }
    100%  { opacity: 1;    transform: none; filter: drop-shadow(0 0 30px rgba(103,178,201,0.55)); }
  }
  @media (prefers-reduced-motion: reduce){
    .qai-word{ animation: none; }
    .qai-scene-text h1 .qai-accent{ opacity: 1; transform: none; filter: drop-shadow(0 0 30px rgba(103,178,201,0.55)); }
  }
  .qai-scene-text .qai-tagline{
    font-family: var(--qai-font-head); font-weight: 500; font-size: clamp(1.2rem,2.6vw,1.65rem); color: var(--qai-white); margin: 0;
    opacity: 0; transform: translateY(18px); will-change: transform, opacity;
    transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
  }
  /* The tagline reveals on its own timer (once Quest360 -> AI finishes, see revealQaiHero) rather
     than with the rest of .qai-hero-in, since that now fires long before the tagline should show. */
  .qai-scene-text .qai-tagline.qai-tagline-in{ opacity: 1; transform: none; }
  /* Hero auto-appears on load — no scroll required. JS adds this class right after the page is shown,
     then orchestrates the Quest360 -> AI -> tagline reveal sequence (see revealQaiHero). */
  .qai-scene-text.qai-hero-in .qai-eyebrow{ opacity: 1; transform: none; }
  .qai-scene-text.qai-hero-in h1{ opacity: 1; transform: none; filter: blur(0); }
  @media (prefers-reduced-motion: reduce){
    .qai-scene-text .qai-eyebrow, .qai-scene-text h1, .qai-scene-text .qai-tagline{
      transition: none; opacity: 1; transform: none; filter: none;
    }
  }

  .qai-hero-rest{ padding: 4px 0 48px; text-align: center; }
  .qai-lead{ max-width: 680px; margin: 0 auto 40px; color: var(--qai-mute); font-size: 1.05rem; line-height: 1.65; }
  .qai-lead strong{ color: var(--qai-teal2); font-weight: 600; }

  .qai-waitlist{
    max-width: 620px; margin: 0 auto; background: var(--qai-surface); border: 1px solid var(--qai-border);
    border-radius: 16px; padding: 24px; text-align: left; box-shadow: 0 20px 50px -20px rgba(23,24,43,0.16);
  }
  .qai-waitlist-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .qai-field{ margin-bottom: 16px; }
  .qai-field label{ display: block; font-size: 0.85rem; font-weight: 600; color: var(--qai-white); margin-bottom: 8px; }
  .qai-field label span{ font-weight: 400; color: var(--qai-mute); }
  .qai-field input, .qai-field select{
    width: 100%; background: var(--qai-field); border: 1px solid var(--qai-border); border-radius: 10px;
    padding: 12px 14px; font-family: var(--qai-font-body); font-size: 0.95rem; color: var(--qai-white);
  }
  .qai-field input::placeholder{ color: #5b6472; }
  .qai-field input:focus, .qai-field select:focus{ outline: none; border-color: var(--qai-teal); box-shadow: 0 0 0 3px rgba(13,148,136,0.2); }
  .qai-field select{ appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
  .qai-submit{
    width: 100%; border: none; border-radius: 10px; padding: 13px 20px; font-family: var(--qai-font-head);
    font-weight: 600; font-size: 0.98rem; color: var(--qai-on); background: var(--qai-teal2); cursor: pointer;
    transition: filter .15s ease, transform .1s ease; margin-top: 4px;
  }
  .qai-submit:hover{ filter: brightness(1.08); }
  .qai-submit:disabled{ opacity: 0.6; cursor: not-allowed; }
  .qai-microcopy{ text-align: center; font-size: 0.82rem; color: var(--qai-mute); margin: 16px 0 0; }
  .qai-form-status{ display: none; margin-top: 14px; padding: 12px 14px; border-radius: 10px; font-size: 0.9rem; line-height: 1.5; }
  .qai-honeypot{ display: none; }

  /* ---------- 3D "unveil" reveal-on-scroll (used on every section below the hero) ---------- */
  .qai-reveal{
    opacity: 0; transform: perspective(1000px) translateY(54px) rotateX(12deg) scale(0.94);
    transition: opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1);
  }
  .qai-reveal.in{ opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce){
    .qai-reveal{ opacity: 1; transform: none; transition: none; }
  }

  /* ---------- Nova teaser ---------- */
  .qai-nova{
    display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
    padding: 84px 0; border-top: 1px solid var(--qai-border);
  }
  .qai-kicker{ font-family: var(--qai-font-body); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--qai-teal); margin-bottom: 10px; }
  .qai-nova h2{ font-size: clamp(1.6rem,3vw,2.1rem); margin: 0 0 14px; }
  .qai-nova p{ color: var(--qai-mute); font-size: 1rem; line-height: 1.65; margin: 0; }
  .qai-command-mock{ background: var(--qai-surface); border: 1px solid var(--qai-border); border-radius: 16px; padding: 18px; box-shadow: 0 20px 50px -24px rgba(0,0,0,0.55); }
  .qai-command-bar{
    display: flex; align-items: center; gap: 10px; background: var(--qai-field); border: 1px solid var(--qai-border);
    border-radius: 10px; padding: 12px 14px; color: var(--qai-mute); font-size: 0.92rem; margin-bottom: 14px;
  }
  .qai-command-bar kbd{
    font-family: var(--qai-font-body); font-size: 0.72rem; font-weight: 600; color: var(--qai-white);
    background: var(--qai-border); border-radius: 5px; padding: 3px 7px; flex-shrink: 0;
  }
  .qai-command-examples{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
  .qai-command-examples li{
    display: flex; align-items: center; gap: 10px; font-size: 0.88rem; color: var(--qai-white);
    padding: 10px 12px; border-radius: 9px; background: transparent; border: 1px solid transparent;
  }
  .qai-command-examples li:hover{ background: rgba(13,148,136,0.08); border-color: rgba(13,148,136,0.25); }
  .qai-command-examples li::before{ content: '↳'; color: var(--qai-teal2); font-family: var(--qai-font-body); flex-shrink: 0; }

  /* ---------- Interactive system diagram ---------- */
  .qai-system{ padding: 84px 0 80px; border-top: 1px solid var(--qai-border); text-align: center; }
  .qai-system h2{ font-size: clamp(1.6rem,3vw,2.1rem); margin: 0 0 8px; }
  .qai-system > p.qai-system-lead{ color: var(--qai-mute); max-width: 620px; margin: 0 auto 48px; }
  .qai-icon{
    width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
    background: rgba(103,178,201,0.12); color: var(--qai-teal2); margin-bottom: 14px;
  }
  .qai-icon svg{ width: 20px; height: 20px; }

  .qai-system-body{
    display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,0.85fr); gap: 44px; align-items: start; text-align: left;
  }
  .qai-orbit-wrap{ position: relative; width: 100%; max-width: 560px; aspect-ratio: 1 / 1; margin: 0 auto; }
  .qai-orbit-ring{ position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--qai-border); }
  .qai-orbit-ring.qai-ring-in{ inset: 16%; border-color: rgba(103,178,201,0.16); border-style: dashed; }

  .qai-orbit-svg{ position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; }
  .qai-orbit-line{
    stroke: rgba(103,178,201,0.22); stroke-width: 0.55; fill: none; transition: stroke .25s ease, stroke-width .25s ease;
  }
  .qai-orbit-line.active{ stroke: var(--qai-teal2); stroke-width: 0.9; }
  .qai-orbit-pulse{
    stroke: var(--qai-teal2); stroke-width: 1; fill: none; stroke-linecap: round;
    stroke-dasharray: 5 95; opacity: 0.85; animation: qai-line-flow 3.2s linear infinite;
  }
  .qai-orbit-svg line:nth-of-type(2n) + .qai-orbit-pulse,
  .qai-orbit-pulse:nth-of-type(3n){ animation-delay: -1.1s; }
  @keyframes qai-line-flow{ to{ stroke-dashoffset: -200; } }
  @media (prefers-reduced-motion: reduce){ .qai-orbit-pulse{ animation: none; opacity: 0; } }

  .qai-nova-core{
    position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
    width: clamp(84px, 16vw, 110px); height: clamp(84px, 16vw, 110px); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px;
    background: radial-gradient(circle at 35% 28%, rgba(34,211,238,0.4), rgba(13,148,136,0.16) 60%, transparent 78%) var(--qai-surface);
    border: 1px solid rgba(34,211,238,0.5); cursor: pointer; color: var(--qai-white); padding: 0;
    font-family: var(--qai-font-head); font-weight: 700; font-size: 0.86rem; z-index: 2;
    transition: transform .2s ease, border-color .2s ease, box-shadow .3s ease;
  }
  .qai-nova-core svg{ width: 28px; height: 28px; color: var(--qai-cyan); }
  .qai-nova-core::before{
    content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid rgba(34,211,238,0.35);
    animation: qai-nova-pulse 2.6s ease-out infinite;
  }
  @keyframes qai-nova-pulse{ 0%{ transform: scale(0.9); opacity: 0.8; } 100%{ transform: scale(1.35); opacity: 0; } }
  @media (prefers-reduced-motion: reduce){ .qai-nova-core::before{ animation: none; display: none; } }
  .qai-nova-core:hover, .qai-nova-core.active{ transform: translate(-50%,-50%) scale(1.05); border-color: var(--qai-cyan); }
  .qai-nova-core.active{ box-shadow: 0 0 0 6px rgba(34,211,238,0.18); }
  .qai-nova-core:focus-visible{ outline: 2px solid var(--qai-cyan); outline-offset: 4px; }

  .qai-node-wrap{ position: absolute; transform: translate(-50%,-50%); z-index: 2; }
  .qai-node{
    width: clamp(48px, 9.4vw, 62px); height: clamp(48px, 9.4vw, 62px); border-radius: 50%; padding: 0;
    background: var(--qai-surface); border: 1px solid var(--qai-border); color: var(--qai-teal2);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    transition: transform .2s cubic-bezier(.16,1,.3,1), border-color .2s ease, background .2s ease, box-shadow .2s ease;
  }
  .qai-node::before{
    content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid rgba(103,178,201,0.28);
    opacity: 0; transition: opacity .2s ease, transform .2s ease; transform: scale(0.85);
  }
  .qai-node:hover::before, .qai-node:focus-visible::before{ opacity: 1; transform: scale(1); }
  .qai-node svg{ width: 20px; height: 20px; }
  .qai-node-label{
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 8px;
    font-family: var(--qai-font-body); font-size: clamp(0.62rem, 1.7vw, 0.7rem); font-weight: 600; color: var(--qai-mute);
    white-space: nowrap; transition: color .2s ease; pointer-events: none;
  }
  .qai-node:hover, .qai-node:focus-visible{ border-color: rgba(103,178,201,0.55); transform: scale(1.1); background: rgba(103,178,201,0.1); }
  .qai-node.active{
    border-color: var(--qai-teal2); background: rgba(103,178,201,0.16); color: var(--qai-white);
    box-shadow: 0 0 0 5px rgba(103,178,201,0.14); transform: scale(1.12);
  }
  .qai-node:focus-visible{ outline: 2px solid var(--qai-teal2); outline-offset: 3px; }
  .qai-node-wrap:hover .qai-node-label, .qai-node.active ~ .qai-node-label{ color: var(--qai-white); font-weight: 700; }

  .qai-system-panel{
    background: var(--qai-surface); border: 1px solid var(--qai-border); border-radius: 18px; padding: 30px;
    min-height: 340px; position: sticky; top: 24px; box-shadow: 0 20px 50px -24px rgba(0,0,0,0.55);
    display: flex; flex-direction: column;
  }
  .qai-panel-top{ display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
  .qai-panel-tag{
    display: inline-flex; align-items: center; gap: 6px; font-family: var(--qai-font-body); font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--qai-teal); background: rgba(13,148,136,0.14);
    border-radius: 999px; padding: 4px 10px;
  }
  .qai-panel-icon{
    width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    background: rgba(103,178,201,0.12); color: var(--qai-teal2); margin-bottom: 18px;
  }
  .qai-panel-icon svg{ width: 23px; height: 23px; }
  .qai-system-panel h3{ font-family: var(--qai-font-head); font-size: 1.35rem; margin: 0 0 10px; transition: opacity .15s ease; }
  .qai-system-panel > p{ color: var(--qai-mute); line-height: 1.6; margin: 0 0 22px; font-size: 0.94rem; }
  .qai-panel-features{ list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 13px; }
  .qai-panel-features li{ display: flex; gap: 10px; align-items: flex-start; font-size: 0.9rem; color: var(--qai-white); line-height: 1.5; }
  .qai-panel-features li svg{ width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; stroke: var(--qai-teal2); }
  .qai-panel-nav{ display: flex; gap: 10px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--qai-border); }
  .qai-panel-nav-btn{
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
    background: var(--qai-field); border: 1px solid var(--qai-border); border-radius: 10px; padding: 10px 12px;
    font-family: var(--qai-font-body); font-size: 0.82rem; font-weight: 600; color: var(--qai-white); cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
  }
  .qai-panel-nav-btn:hover, .qai-panel-nav-btn:focus-visible{ border-color: rgba(103,178,201,0.5); background: rgba(103,178,201,0.08); }
  .qai-panel-nav-btn svg{ width: 14px; height: 14px; flex-shrink: 0; }

  @media (max-width: 900px){
    .qai-system-body{ grid-template-columns: 1fr; gap: 32px; }
    .qai-system-panel{ position: static; }
  }

  /* Scroll-driven "tour" through the modules — the whole diagram+panel pins in place
     while scrolling advances the active module, one per roughly 10% of the scroll range. */
  .qai-system-scroll{ position: relative; height: 400vh; }
  .qai-system-sticky{ position: sticky; top: 24px; padding-top: 4px; }
  .qai-system-steps{ display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 28px; }
  .qai-step-dot{
    width: 8px; height: 8px; border-radius: 50%; background: var(--qai-border); border: none; padding: 0; cursor: pointer;
    transition: background .2s ease, transform .2s ease;
  }
  .qai-step-dot:hover{ background: rgba(103,178,201,0.5); }
  .qai-step-dot.done{ background: rgba(13,148,136,0.5); }
  .qai-step-dot.active{ background: var(--qai-teal2); transform: scale(1.45); }
  .qai-step-dot:focus-visible{ outline: 2px solid var(--qai-teal2); outline-offset: 3px; }

  @media (max-width: 900px), (prefers-reduced-motion: reduce){
    .qai-system-scroll{ height: auto; }
    .qai-system-sticky{ position: static; top: auto; padding-top: 0; }
  }

  /* ---------- Connectors ("plays well with others") ---------- */
  .qai-connectors{ padding: 84px 0; border-top: 1px solid var(--qai-border); text-align: center; }
  .qai-connectors > p.qai-system-lead{ color: var(--qai-mute); max-width: 620px; margin: 0 auto 40px; }
  .qai-connectors-grid{
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 36px;
    max-width: 840px; margin: 0 auto 14px;
  }
  .qai-connector-logo{
    font-family: var(--qai-font-head); font-size: 1.05rem; font-weight: 700; color: var(--qai-mute);
    letter-spacing: 0.01em; opacity: 0.72; transition: opacity .2s ease, color .2s ease;
  }
  .qai-connector-logo:hover{ opacity: 1; color: var(--qai-white); }
  .qai-connectors-more{ font-size: 0.82rem; font-weight: 600; color: var(--qai-teal2); margin-bottom: 48px; }

  .qai-connectors-features{ display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; max-width: 920px; margin: 0 auto; text-align: left; }
  .qai-connectors-feature{
    background: var(--qai-surface); border: 1px solid var(--qai-border); border-radius: 16px; padding: 22px 20px;
    transition: transform .25s cubic-bezier(.16,1,.3,1), border-color .25s ease, box-shadow .25s ease;
  }
  .qai-connectors-feature:hover{ transform: translateY(-3px); border-color: rgba(103,178,201,0.4); box-shadow: 0 20px 40px -26px rgba(23,24,43,0.16); }
  .qai-connectors-feature .icon{
    width: 36px; height: 36px; border-radius: 10px; background: rgba(103,178,201,0.12); color: var(--qai-teal2);
    display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
  }
  .qai-connectors-feature .icon svg{ width: 18px; height: 18px; }
  .qai-connectors-feature h4{ font-family: var(--qai-font-head); font-size: 1rem; margin: 0 0 6px; color: var(--qai-white); }
  .qai-connectors-feature p{ font-size: 0.85rem; color: var(--qai-mute); line-height: 1.6; margin: 0; }

  @media (max-width: 900px){
    .qai-connectors-features{ grid-template-columns: 1fr; }
    .qai-connectors-grid{ gap: 14px 26px; }
    .qai-connector-logo{ font-size: 0.94rem; }
  }

  /* ---------- Dashboard preview (app-window mockup) ---------- */
  /* .qai-preview lives outside .qai-shell (see the HTML) so the dashboard can grow past the
     rest of the page's 1120px reading-width cap — its own horizontal padding below matches
     the shell's formula so the heading text still lines up with every other section. */
  .qai-preview{ padding: 84px clamp(20px,5vw,48px); border-top: 1px solid var(--qai-border); text-align: center; }
  .qai-preview h2{ font-size: clamp(1.6rem,3vw,2.1rem); margin: 0 0 8px; }
  .qai-app{ margin: 0 auto; width: 100%; max-width: 1320px; text-align: left; }

  /* Scroll-driven "Ask Nova" narrative — pins the app window while scrolling steps through
     a task being asked, then carried out via the relevant module underneath. The window
     itself is height-capped (see .qai-app-window) so it always fits inside one viewport
     instead of overflowing it while pinned. */
  .qai-preview-scroll{ position: relative; height: 380vh; }
  .qai-preview-sticky{
    position: sticky; top: 0; min-height: 100vh; padding: 28px 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  }
  .qai-preview-steps{ display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 22px; flex-shrink: 0; }

  @media (max-width: 900px), (prefers-reduced-motion: reduce){
    .qai-preview-scroll{ height: auto; }
    .qai-preview-sticky{ position: static; top: auto; min-height: 0; padding: 0; width: auto; margin-left: 0; padding-left: 0; padding-right: 0; display: block; }
  }
  .qai-app-window{
    position: relative; background: var(--qai-deep); border: 1px solid rgba(34,211,238,0.16); border-radius: 20px; overflow: hidden;
    box-shadow: 0 50px 110px -36px rgba(23,24,43,0.16), 0 0 90px -32px rgba(34,211,238,0.24), 0 0 0 1px rgba(34,211,238,0.1), inset 0 1px 0 var(--qai-tint);
    display: flex; flex-direction: column; max-height: min(720px, 86vh); width: 100%;
  }
  @media (max-width: 900px), (prefers-reduced-motion: reduce){
    .qai-app-window{ max-height: none; }
  }
  /* Sweeps across the top edge while Nova is "working" — a small, recognisable
     product-grade loading affordance that makes the ask feel like it's really happening. */
  .qai-app-loadingbar{
    position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 6; opacity: 0; pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--qai-cyan), var(--qai-teal) 60%, transparent);
    background-size: 200% 100%; transition: opacity .2s ease;
  }
  .qai-app-loadingbar.active{ opacity: 1; animation: qai-loadingbar-sweep 1.1s linear infinite; }
  @keyframes qai-loadingbar-sweep{ 0%{ background-position: 200% 0; } 100%{ background-position: -200% 0; } }
  @media (prefers-reduced-motion: reduce){ .qai-app-loadingbar{ display: none; } }
  .qai-app-topbar{ flex-shrink: 0; display: flex; align-items: center; gap: 7px; padding: 8px 16px; background: var(--qai-surface); border-bottom: 1px solid var(--qai-border); }
  .qai-app-dot{ width: 10px; height: 10px; border-radius: 50%; background: #3a3f4b; }
  .qai-app-dot-r{ background: color-mix(in srgb, var(--c-protect) 68%, var(--fg)); } .qai-app-dot-y{ background: color-mix(in srgb, #F0900F 60%, var(--fg)); } .qai-app-dot-g{ background: color-mix(in srgb, var(--c-grow) 68%, var(--fg)); }
  .qai-app-url{
    margin-left: 12px; flex: 1; max-width: 340px; background: var(--qai-field); border: 1px solid var(--qai-border); border-radius: 7px;
    padding: 5px 12px; font-family: var(--qai-font-body); font-size: 0.78rem; color: var(--qai-mute); text-align: center;
  }
  .qai-app-top-icons{ display: flex; align-items: center; gap: 10px; margin-left: 12px; color: var(--qai-mute); flex-shrink: 0; }
  .qai-app-top-icons svg{ width: 16px; height: 16px; }
  .qai-app-top-avatar{
    width: 24px; height: 24px; border-radius: 50%; background: rgba(103,178,201,0.2); color: var(--qai-teal2);
    display: flex; align-items: center; justify-content: center; font-size: 0.62rem; font-weight: 700; font-family: var(--qai-font-head); flex-shrink: 0;
  }
  .qai-app-top-bell{ position: relative; }
  .qai-app-top-bell::after{ content: ''; position: absolute; top: -2px; right: -2px; width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, #F0900F 60%, var(--fg)); border: 1.5px solid var(--qai-surface); }

  /* Persistent KPI strip — stays visible across every module, so it always reads as one dashboard */
  .qai-app-kpis{
    flex-shrink: 0; display: grid; grid-template-columns: repeat(5,1fr); gap: 1px; background: var(--qai-border);
    border-bottom: 1px solid var(--qai-border);
  }
  .qai-kpi{ position: relative; background: var(--qai-panel); padding: 8px 14px; transition: background .25s ease, transform .1s ease; }
  .qai-kpi-label{ font-family: var(--qai-font-body); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.03em; color: var(--qai-mute); text-transform: uppercase; }
  .qai-kpi-row{ display: flex; align-items: baseline; gap: 7px; margin-top: 3px; }
  .qai-kpi-val{ font-family: var(--qai-font-head); font-size: 1.06rem; font-weight: 700; color: var(--qai-white); }
  .qai-kpi-trend{ font-family: var(--qai-font-body); font-size: 0.66rem; font-weight: 700; display: inline-flex; align-items: center; gap: 2px; }
  .qai-kpi-trend.up{ color: color-mix(in srgb, var(--c-grow) 68%, var(--fg)); } .qai-kpi-trend.down{ color: color-mix(in srgb, var(--c-protect) 68%, var(--fg)); }
  .qai-kpi-trend svg{ width: 9px; height: 9px; }
  .qai-kpi.highlight{ background: rgba(34,211,238,0.1); box-shadow: inset 0 -2px 0 var(--qai-cyan); animation: qai-kpi-pop .45s cubic-bezier(.34,1.56,.64,1); }
  .qai-kpi.highlight .qai-kpi-label{ color: var(--qai-cyan); }
  @keyframes qai-kpi-pop{ 0%{ transform: scale(1); } 35%{ transform: scale(1.045); } 100%{ transform: scale(1); } }
  @media (prefers-reduced-motion: reduce){ .qai-kpi.highlight{ animation: none; } }

  .qai-app-body{ flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 184px 1fr 216px; }
  .qai-app-nav{ background: var(--qai-panel); border-right: 1px solid var(--qai-border); padding: 10px 7px; display: flex; flex-direction: column; gap: 1px; overflow-y: auto; }
  .qai-app-nav-item{
    position: relative; display: flex; align-items: center; gap: 9px; padding: 6px 9px; border-radius: 8px; background: none; border: none;
    color: var(--qai-mute); font-family: var(--qai-font-body); font-size: 0.79rem; font-weight: 600; cursor: pointer; text-align: left;
    transition: background .18s cubic-bezier(.16,1,.3,1), color .18s ease;
  }
  .qai-app-nav-item::before{
    content: ''; position: absolute; left: -7px; top: 50%; width: 3px; height: 0; background: var(--qai-cyan);
    border-radius: 0 4px 4px 0; transform: translateY(-50%); transition: height .3s cubic-bezier(.34,1.56,.64,1);
    box-shadow: 0 0 8px 0 rgba(34,211,238,0.6);
  }
  .qai-app-nav-item.active::before{ height: 58%; }
  .qai-app-nav-item svg{ width: 15px; height: 15px; flex-shrink: 0; transition: transform .18s cubic-bezier(.16,1,.3,1); }
  .qai-app-nav-item span{ flex: 1; }
  .qai-app-nav-item:hover{ background: rgba(34,211,238,0.08); color: var(--qai-white); }
  .qai-app-nav-item:hover svg{ transform: scale(1.08); }
  .qai-app-nav-item:focus-visible{ background: rgba(34,211,238,0.08); color: var(--qai-white); outline: 2px solid var(--qai-cyan); outline-offset: -2px; }
  .qai-app-nav-item.active{ background: rgba(34,211,238,0.12); color: var(--qai-white); }
  .qai-app-nav-item.active svg{ color: var(--qai-cyan); }
  .qai-app-nav-divider{ height: 1px; background: var(--qai-border); margin: 6px 4px; }
  .qai-app-nav-badge{
    flex-shrink: 0; font-family: var(--qai-font-body); font-size: 0.62rem; font-weight: 700; color: var(--qai-mute);
    background: var(--qai-tint); border-radius: 999px; padding: 1px 6px; min-width: 8px; text-align: center;
  }
  .qai-app-nav-item.active .qai-app-nav-badge{ background: rgba(34,211,238,0.22); color: var(--qai-cyan); }

  .qai-app-main{ padding: 14px 18px; overflow-y: auto; position: relative; }
  .qai-app-main-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 9px; }
  .qai-app-main-head h4{ font-family: var(--qai-font-head); font-size: 0.98rem; margin: 0 0 3px; color: var(--qai-white); }
  .qai-app-main-head p{ font-size: 0.78rem; color: var(--qai-mute); margin: 0; max-width: 460px; }
  .qai-app-main-badge{
    flex-shrink: 0; font-family: var(--qai-font-body); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--qai-teal2); background: rgba(13,148,136,0.14); border: 1px solid rgba(13,148,136,0.3); border-radius: 999px; padding: 5px 11px; white-space: nowrap;
  }
  .qai-app-main.is-loading{ opacity: 0.4; filter: blur(1.5px); transition: opacity .2s ease, filter .2s ease; }
  .qai-app-main:not(.is-loading){ transition: opacity .25s ease, filter .25s ease; }

  /* Slim, on-brand scrollbars for the internal panels that may scroll once the
     window's overall height is capped (see .qai-app-window). */
  .qai-app-main, .qai-app-activity, .qai-app-nav{ scrollbar-width: thin; scrollbar-color: rgba(103,178,201,0.25) transparent; }
  .qai-app-main::-webkit-scrollbar, .qai-app-activity::-webkit-scrollbar, .qai-app-nav::-webkit-scrollbar{ width: 6px; }
  .qai-app-main::-webkit-scrollbar-track, .qai-app-activity::-webkit-scrollbar-track, .qai-app-nav::-webkit-scrollbar-track{ background: transparent; }
  .qai-app-main::-webkit-scrollbar-thumb, .qai-app-activity::-webkit-scrollbar-thumb, .qai-app-nav::-webkit-scrollbar-thumb{ background: rgba(34,211,238,0.22); border-radius: 999px; }
  .qai-app-main::-webkit-scrollbar-thumb:hover, .qai-app-activity::-webkit-scrollbar-thumb:hover, .qai-app-nav::-webkit-scrollbar-thumb:hover{ background: rgba(34,211,238,0.4); }

  /* Right-hand "what Nova has done" activity log — grows as the tour advances */
  .qai-app-activity{ background: var(--qai-panel); border-left: 1px solid var(--qai-border); padding: 12px 12px; overflow-y: auto; }
  .qai-app-activity-head{
    font-family: var(--qai-font-body); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--qai-mute); margin-bottom: 10px; display: flex; align-items: center; gap: 6px;
  }
  .qai-app-activity-head svg{ width: 12px; height: 12px; color: var(--qai-cyan); }
  .qai-activity-item{ display: flex; gap: 9px; padding-bottom: 11px; position: relative; cursor: pointer; border-radius: 8px; transition: background .15s ease; }
  .qai-activity-item:hover, .qai-activity-item:focus-visible{ background: rgba(34,211,238,0.06); outline: none; }
  .qai-activity-item::before{
    content: ''; position: absolute; left: 8px; top: 20px; bottom: 0; width: 1px; background: var(--qai-border);
  }
  .qai-activity-item:last-child::before{ display: none; }
  .qai-activity-mark{
    flex-shrink: 0; width: 17px; height: 17px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: rgba(13,148,136,0.18); color: var(--qai-teal2); margin-top: 1px;
  }
  .qai-activity-mark svg{ width: 10px; height: 10px; }
  .qai-activity-item.pending .qai-activity-mark{ background: var(--qai-tint); color: var(--qai-mute); }
  .qai-activity-item.current .qai-activity-mark{ background: var(--qai-cyan); color: var(--qai-on); box-shadow: 0 0 0 3px rgba(34,211,238,0.25); }
  .qai-activity-name{ font-family: var(--qai-font-body); font-size: 0.72rem; font-weight: 700; color: var(--qai-white); }
  .qai-activity-item.pending .qai-activity-name{ color: var(--qai-mute); font-weight: 600; }
  .qai-activity-task{ font-size: 0.7rem; color: var(--qai-mute); margin-top: 2px; line-height: 1.4; }
  .qai-activity-item.current .qai-activity-task{ color: var(--fg); }

  /* shared "fake UI" building blocks reused across every module's preview */
  .qai-mock-row{ display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; background: var(--qai-tint); border: 1px solid var(--qai-border); margin-bottom: 6px; }
  .qai-mock-avatar{
    width: 28px; height: 28px; border-radius: 50%; background: rgba(34,211,238,0.16); color: var(--qai-cyan);
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.66rem; flex-shrink: 0;
    font-family: var(--qai-font-head);
  }
  .qai-mock-name{ font-weight: 600; font-size: 0.8rem; color: var(--qai-white); }
  .qai-mock-sub{ font-size: 0.71rem; color: var(--qai-mute); margin-top: 1px; }
  .qai-mock-pill{ margin-left: auto; font-size: 0.67rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; }
  .qai-mock-pill.teal{ background: rgba(34,211,238,0.16); color: var(--qai-cyan); }
  .qai-mock-pill.amber{ background: rgba(217,119,6,0.18); color: color-mix(in srgb, #F0900F 60%, var(--fg)); }
  .qai-mock-pill.gray{ background: rgba(156,163,175,0.16); color: var(--qai-mute); }

  .qai-mock-command{ display: flex; align-items: center; gap: 9px; background: var(--qai-field); border: 1px solid var(--qai-border); border-radius: 9px; padding: 10px 12px; font-size: 0.82rem; color: var(--qai-white); margin-bottom: 11px; }
  .qai-mock-kbd{ font-family: var(--qai-font-body); font-size: 0.66rem; font-weight: 700; color: var(--qai-white); background: var(--qai-border); border-radius: 5px; padding: 2px 6px; flex-shrink: 0; }
  .qai-mock-note{ font-size: 0.75rem; color: var(--qai-cyan); margin: 0 0 11px; }

  .qai-mock-timeline{ display: flex; flex-direction: column; gap: 6px; }
  .qai-mock-step{ display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; background: var(--qai-tint); border: 1px solid var(--qai-border); }
  .qai-mock-step-num{
    width: 21px; height: 21px; border-radius: 50%; background: rgba(13,148,136,0.16); color: var(--qai-teal); font-family: var(--qai-font-head);
    font-weight: 700; font-size: 0.68rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  }

  .qai-mock-call{ display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; padding: 14px 0 11px; }
  .qai-mock-wave{ display: flex; align-items: flex-end; gap: 3px; height: 22px; margin-top: 8px; }
  .qai-mock-wave span{ width: 3px; background: var(--qai-cyan); border-radius: 2px; opacity: 0.75; }
  .qai-mock-wave span:nth-child(1){ height: 40%; } .qai-mock-wave span:nth-child(2){ height: 70%; }
  .qai-mock-wave span:nth-child(3){ height: 100%; } .qai-mock-wave span:nth-child(4){ height: 55%; }
  .qai-mock-wave span:nth-child(5){ height: 85%; } .qai-mock-wave span:nth-child(6){ height: 35%; }
  .qai-mock-wave span:nth-child(7){ height: 60%; }
  .qai-mock-tip{ font-size: 0.77rem; color: var(--qai-white); background: var(--qai-tint); border: 1px solid var(--qai-border); border-radius: 9px; padding: 7px 10px; margin-bottom: 6px; }
  .qai-mock-tip-label{ font-weight: 700; color: var(--qai-cyan); margin-right: 6px; }

  /* ---------- "System in action" mini-demos ----------
     A brief, self-playing cutscene that plays over the settled panel the moment Voice or
     Inbox becomes the active module — dialling a lead + leaving a voicemail, and drafting
     + sending an automatic email reply. The real, final panel content is already rendered
     underneath (see renderAppMain/playModuleDemo), so this overlay just fades away to
     reveal it once the mini-sequence finishes; if anything goes wrong mid-sequence the
     worst case is the last frame stays put rather than a broken layout. Skipped entirely
     for reduced-motion visitors. */
  .qai-demo-overlay{
    position: absolute; inset: 0; z-index: 5; background: var(--qai-deep);
    display: flex; align-items: center; justify-content: center;
    opacity: 1; transition: opacity .4s ease;
  }
  .qai-demo-overlay.qai-demo-out{ opacity: 0; }
  .qai-demo-stage{
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px;
    opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease;
  }
  .qai-demo-stage.qai-demo-stage-in{ opacity: 1; transform: translateY(0); }

  .qai-demo-ring-avatar{ position: relative; width: 50px; height: 50px; margin-bottom: 7px; }
  .qai-demo-ring-avatar .qai-mock-avatar{ width: 50px; height: 50px; font-size: 0.95rem; position: relative; z-index: 2; }
  .qai-demo-ring-avatar::before, .qai-demo-ring-avatar::after{
    content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--qai-cyan); opacity: 0;
    animation: qai-ring-pulse 1.6s ease-out infinite;
  }
  .qai-demo-ring-avatar::after{ animation-delay: .5s; }
  @keyframes qai-ring-pulse{ 0%{ transform: scale(1); opacity: .55; } 100%{ transform: scale(1.85); opacity: 0; } }

  .qai-demo-status{ font-size: 0.8rem; font-weight: 600; color: var(--qai-cyan); display: inline-flex; align-items: center; gap: 7px; margin-top: 5px; }
  .qai-demo-status-dots{ display: inline-flex; gap: 3px; }
  .qai-demo-status-dots span{ width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: qai-dot-bounce 1s ease-in-out infinite; }
  .qai-demo-status-dots span:nth-child(2){ animation-delay: .15s; }
  .qai-demo-status-dots span:nth-child(3){ animation-delay: .3s; }

  .qai-demo-badge{
    display: inline-flex; align-items: center; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 999px; margin-top: 5px;
  }
  .qai-demo-badge.warn{ background: rgba(240,179,77,0.16); color: color-mix(in srgb, #F0900F 60%, var(--fg)); }
  .qai-demo-badge.ok{ background: rgba(34,211,238,0.16); color: var(--qai-cyan); }

  .qai-demo-mic{
    width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: rgba(34,211,238,0.14); color: var(--qai-cyan); margin-bottom: 2px;
  }
  .qai-demo-mic svg{ width: 19px; height: 19px; }

  .qai-demo-progress{ width: 140px; height: 4px; border-radius: 999px; background: var(--qai-border); overflow: hidden; margin-top: 9px; }
  .qai-demo-progress-fill{ display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--qai-teal), var(--qai-cyan)); width: 0%; transition: width 1.3s linear; }

  .qai-demo-check{
    width: 27px; height: 27px; border-radius: 50%; background: rgba(34,211,238,0.16); color: var(--qai-cyan);
    display: flex; align-items: center; justify-content: center; margin-bottom: 2px;
  }
  .qai-demo-check svg{ width: 14px; height: 14px; }

  .qai-demo-compose{
    margin-top: 12px; width: 220px; text-align: left; background: var(--qai-field); border: 1px solid var(--qai-border);
    border-radius: 9px; padding: 9px 11px;
  }
  .qai-demo-compose-to{ font-size: 0.63rem; font-weight: 700; color: var(--qai-mute); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 5px; }
  .qai-demo-compose-text{ font-size: 0.75rem; color: var(--qai-white); line-height: 1.5; min-height: 3.2em; }
  .qai-demo-compose-text::after{
    content: ''; display: inline-block; width: 2px; height: 1em; margin-left: 1px; vertical-align: -2px;
    background: var(--qai-cyan); animation: qai-caret-blink .9s steps(1) infinite;
  }

  @media (prefers-reduced-motion: reduce){
    .qai-demo-overlay{ display: none; }
  }

  .qai-mock-flow{ display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: center; padding: 14px 0; }
  .qai-mock-flow-node{ background: var(--qai-field); border: 1px solid var(--qai-border); border-radius: 9px; padding: 8px 12px; font-size: 0.73rem; font-weight: 700; color: var(--qai-white); text-align: center; line-height: 1.4; }
  .qai-mock-flow-node span{ display: block; font-weight: 400; color: var(--qai-mute); font-size: 0.69rem; margin-top: 2px; }
  .qai-mock-flow-arrow{ width: 20px; height: 2px; background: var(--qai-border); position: relative; flex-shrink: 0; }
  .qai-mock-flow-arrow::after{ content: ''; position: absolute; right: -1px; top: 50%; transform: translateY(-50%); border: 4px solid transparent; border-left-color: var(--qai-border); }

  .qai-mock-kanban{ display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
  .qai-mock-kanban-col{ background: var(--qai-field); border: 1px solid var(--qai-border); border-radius: 9px; padding: 8px; }
  .qai-mock-kanban-head{ font-size: 0.67rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--qai-mute); margin-bottom: 6px; }
  .qai-mock-kanban-card{ background: var(--qai-surface); border: 1px solid var(--qai-border); border-radius: 7px; padding: 7px 9px; font-size: 0.75rem; font-weight: 600; color: var(--qai-white); display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-bottom: 6px; }
  .qai-mock-kanban-card:last-child{ margin-bottom: 0; }
  .qai-mock-kanban-card span{ font-size: 0.67rem; font-weight: 700; color: var(--qai-cyan); }

  .qai-mock-tiles{ display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
  .qai-mock-tile{ background: var(--qai-field); border: 1px solid var(--qai-border); border-radius: 9px; padding: 12px 9px; text-align: center; }
  .qai-mock-tile-num{ font-family: var(--qai-font-head); font-size: 1.28rem; font-weight: 700; color: var(--qai-white); }
  .qai-mock-tile-label{ font-size: 0.69rem; color: var(--qai-mute); margin-top: 3px; }
  .qai-mock-tiles.qai-mock-overview{ grid-template-columns: repeat(4,1fr); margin-bottom: 14px; }

  .qai-mock-section-label{
    font-family: var(--qai-font-body); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--qai-mute); margin: 14px 0 8px;
  }
  .qai-mock-section-label:first-child{ margin-top: 0; }

  .qai-mock-bars{ display: flex; flex-direction: column; gap: 8px; }
  .qai-mock-bar-row{ display: flex; align-items: center; gap: 9px; }
  .qai-mock-bar-label{ width: 98px; flex-shrink: 0; font-size: 0.73rem; color: var(--qai-mute); }
  .qai-mock-bar-track{ flex: 1; height: 7px; border-radius: 999px; background: var(--qai-field); overflow: hidden; }
  .qai-mock-bar-fill{ height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--qai-teal), var(--qai-cyan)); }
  .qai-mock-bar-val{ width: 34px; flex-shrink: 0; text-align: right; font-size: 0.73rem; font-weight: 700; color: var(--qai-white); }

  .qai-mock-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
  .qai-mock-list li{
    display: flex; align-items: center; gap: 8px; font-size: 0.77rem; color: var(--fg); padding: 7px 9px;
    background: var(--qai-tint); border: 1px solid var(--qai-border); border-radius: 9px;
  }
  .qai-mock-list li svg{ width: 13px; height: 13px; flex-shrink: 0; color: var(--qai-cyan); }
  .qai-mock-list li span.t{ flex: 1; }
  .qai-mock-list li span.meta{ font-size: 0.68rem; color: var(--qai-mute); flex-shrink: 0; }

  /* "Ask Nova" prompt bar inside the dashboard preview app window, with a typing caret
     and a brief "working" status before the result appears below. */
  .qai-app-ask{
    flex-shrink: 0; display: flex; align-items: center; gap: 9px; padding: 10px 18px; flex-wrap: wrap;
    background: rgba(34,211,238,0.07); border-bottom: 1px solid var(--qai-border); min-height: 22px;
  }
  .qai-app-ask-label{
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; font-family: var(--qai-font-body); font-size: 0.66rem; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--qai-cyan); background: rgba(34,211,238,0.14);
    border-radius: 999px; padding: 4px 10px 4px 8px;
  }
  .qai-app-ask-label svg{ width: 12px; height: 12px; flex-shrink: 0; }
  .qai-app-ask-text{
    font-family: var(--qai-font-head); font-size: 0.92rem; font-weight: 600; color: var(--qai-white); flex: 1; min-width: 200px;
  }
  .qai-app-ask-text::after{
    content: ''; display: inline-block; width: 2px; height: 1em; margin-left: 3px; vertical-align: -2px;
    background: var(--qai-cyan); opacity: 0;
  }
  .qai-app-ask[data-status="typing"] .qai-app-ask-text::after{ opacity: 1; animation: qai-caret-blink 0.9s steps(1) infinite; }
  .qai-app-ask-working{
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; font-family: var(--qai-font-body); font-size: 0.72rem;
    font-weight: 600; color: var(--qai-cyan); opacity: 0; transition: opacity .2s ease;
  }
  .qai-app-ask[data-status="working"] .qai-app-ask-working{ opacity: 1; }
  .qai-app-ask-working-dots{ display: inline-flex; gap: 3px; }
  .qai-app-ask-working-dots span{ width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: qai-dot-bounce 1s ease-in-out infinite; }
  .qai-app-ask-working-dots span:nth-child(2){ animation-delay: .15s; }
  .qai-app-ask-working-dots span:nth-child(3){ animation-delay: .3s; }
  @keyframes qai-caret-blink{ 50%{ opacity: 0; } }
  @keyframes qai-dot-bounce{ 0%,80%,100%{ transform: translateY(0); opacity: .5; } 40%{ transform: translateY(-3px); opacity: 1; } }
  @media (prefers-reduced-motion: reduce){
    .qai-app-ask-text::after{ display: none; }
    .qai-app-ask-working-dots span{ animation: none; }
  }

  .qai-app-result{
    display: flex; align-items: flex-start; gap: 7px; font-size: 0.78rem; color: var(--qai-cyan);
    background: rgba(34,211,238,0.07); border: 1px solid rgba(34,211,238,0.22); border-radius: 10px;
    padding: 8px 12px; margin-bottom: 11px; line-height: 1.5;
  }
  .qai-app-result svg{ width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; stroke: var(--qai-cyan); }

  /* Small tag naming the real tools each module leans on — reinforces the "Fits into the
     stack you already run" section above with the same honest, real-tool-name treatment. */
  .qai-integ-tag{
    display: inline-flex; align-items: center; gap: 6px; font-size: 0.68rem; color: var(--qai-mute);
    background: rgba(34,211,238,0.06); border: 1px solid rgba(34,211,238,0.2); border-radius: 999px;
    padding: 3px 10px 3px 8px; margin-bottom: 9px;
  }
  .qai-integ-tag svg{ width: 11px; height: 11px; color: var(--qai-cyan); flex-shrink: 0; }
  .qai-integ-tag b{ color: var(--qai-cyan); font-weight: 700; }

  @media (max-width: 1180px){
    .qai-app-body{ grid-template-columns: 184px 1fr; }
    .qai-app-activity{ display: none; }
  }
  @media (max-width: 720px){
    .qai-app-kpis{ grid-template-columns: repeat(2,1fr); }
    .qai-app-body{ grid-template-columns: 1fr; min-height: 0; }
    .qai-app-nav{ flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--qai-border); gap: 4px; }
    .qai-app-nav-item{ flex-shrink: 0; padding: 9px; }
    .qai-app-nav-item::before{ display: none; }
    .qai-app-nav-item span, .qai-app-nav-item .qai-app-nav-badge{ display: none; }
    .qai-app-nav-divider{ width: 1px; height: 22px; margin: 0 2px; }
    .qai-mock-kanban, .qai-mock-tiles, .qai-mock-tiles.qai-mock-overview{ grid-template-columns: 1fr; }
    .qai-app-ask-text{ font-size: 0.9rem; }
    .qai-app-ask-working span.qai-app-ask-working-label{ display: none; }
    .qai-app-top-icons{ display: none; }
    .qai-mock-bar-label{ width: 76px; }
  }

  /* ---------- Philosophy strip ---------- */
  .qai-philosophy{ padding: 80px 0; border-top: 1px solid var(--qai-border); text-align: center; }
  .qai-philosophy blockquote{
    font-family: var(--qai-font-head); font-size: clamp(1.4rem,3.2vw,2rem); font-weight: 600; margin: 0 0 16px;
    color: var(--qai-white);
  }
  .qai-philosophy p{ max-width: 560px; margin: 0 auto; color: var(--qai-mute); line-height: 1.65; }

  /* ---------- Bottom CTA ---------- */
  .qai-cta-bottom{
    padding: 84px 0 96px; border-top: 1px solid var(--qai-border); text-align: center;
  }
  .qai-cta-bottom h2{ font-size: clamp(1.6rem,3vw,2.1rem); margin: 0 0 10px; }
  .qai-cta-bottom p{ color: var(--qai-mute); margin: 0 0 26px; }
  .qai-cta-btn{
    display: inline-flex; align-items: center; gap: 8px; font-family: var(--qai-font-head); font-weight: 600;
    font-size: 0.98rem; color: var(--qai-on); background: var(--qai-teal2); border: none; border-radius: 10px;
    padding: 14px 28px; cursor: pointer; text-decoration: none; box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 14px 30px -14px rgba(103,178,201,0.5);
    transition: filter .2s ease, transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s cubic-bezier(.16,1,.3,1);
  }
  .qai-cta-btn svg, .qai-cta-btn span{ transition: transform .2s cubic-bezier(.16,1,.3,1); }
  .qai-cta-btn:hover{ filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 18px 36px -14px rgba(103,178,201,0.65); }
  .qai-cta-btn:hover span{ transform: translateY(2px); }
  .qai-cta-btn:active{ transform: translateY(0); }
  .qai-footnote{ margin-top: 18px; font-size: 0.82rem; color: var(--qai-mute); }
  .qai-footnote a{ color: var(--qai-teal2); text-decoration: underline; }

  /* ---------- Problem / pain points ---------- */
  .qai-problem{ padding: 84px 0; border-top: 1px solid var(--qai-border); }
  .qai-problem-head{ max-width: 640px; margin: 0 auto 36px; text-align: center; }
  .qai-problem-head h2{ font-size: clamp(1.6rem,3vw,2.1rem); margin: 10px 0 12px; }
  .qai-problem-head p{ color: var(--qai-mute); line-height: 1.65; margin: 0; }
  .qai-pain-grid{ display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
  .qai-pain{
    display: flex; gap: 14px; align-items: flex-start; background: var(--qai-surface);
    border: 1px solid var(--qai-border); border-radius: 16px; padding: 18px 20px;
  }
  .qai-pain-icon{
    width: 34px; height: 34px; border-radius: 9px; background: rgba(239,68,68,0.12); color: color-mix(in srgb, var(--c-protect) 68%, var(--fg));
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  }
  .qai-pain-icon svg{ width: 17px; height: 17px; }
  .qai-pain p{ margin: 0; font-size: 0.94rem; color: var(--qai-white); line-height: 1.55; }

  /* ---------- How it works ---------- */
  .qai-how{ padding: 84px 0; border-top: 1px solid var(--qai-border); text-align: center; }
  .qai-how h2{ font-size: clamp(1.6rem,3vw,2.1rem); margin: 0 0 8px; }
  .qai-how > p{ color: var(--qai-mute); max-width: 560px; margin: 0 auto 40px; }
  .qai-steps{ display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; text-align: left; }
  .qai-step{ position: relative; background: var(--qai-surface); border: 1px solid var(--qai-border); border-radius: 16px; padding: 24px 20px; }
  .qai-step-num{
    font-family: var(--qai-font-head); font-weight: 700; font-size: 0.82rem; color: var(--qai-teal);
    background: rgba(13,148,136,0.14); border-radius: 999px; width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
  }
  .qai-step h3{ font-size: 1.02rem; margin: 0 0 8px; }
  .qai-step p{ font-size: 0.9rem; color: var(--qai-mute); line-height: 1.55; margin: 0; }

  /* ---------- Old way vs. Quest360 AI comparison ---------- */
  .qai-compare{ padding: 84px 0; border-top: 1px solid var(--qai-border); text-align: center; }
  .qai-compare h2{ font-size: clamp(1.6rem,3vw,2.1rem); margin: 0 0 40px; }
  .qai-compare-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; text-align: left; }
  .qai-compare-col{ border-radius: 16px; padding: 26px 24px; border: 1px solid var(--qai-border); }
  .qai-compare-old{ background: rgba(239,68,68,0.05); }
  .qai-compare-new{ background: linear-gradient(180deg, rgba(13,148,136,0.10), var(--qai-surface) 55%); border-color: rgba(13,148,136,0.4); }
  .qai-compare-col h3{ font-family: var(--qai-font-head); font-size: 1.05rem; margin: 0 0 18px; }
  .qai-compare-old h3{ color: color-mix(in srgb, var(--c-protect) 68%, var(--fg)); }
  .qai-compare-new h3{ color: var(--qai-teal2); }
  .qai-compare-col ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
  .qai-compare-col li{ display: flex; gap: 10px; align-items: flex-start; font-size: 0.92rem; color: var(--qai-white); line-height: 1.5; }
  .qai-compare-col li svg{ width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
  .qai-compare-old li svg{ stroke: color-mix(in srgb, var(--c-protect) 68%, var(--fg)); }
  .qai-compare-new li svg{ stroke: var(--qai-teal2); }

  /* ---------- Benefits & cost savings ---------- */
  .qai-savings{ padding: 84px 0; border-top: 1px solid var(--qai-border); text-align: center; }
  .qai-savings h2{ font-size: clamp(1.6rem,3vw,2.1rem); margin: 0 0 8px; }
  .qai-savings > p.qai-system-lead{ color: var(--qai-mute); max-width: 640px; margin: 0 auto 48px; }
  .qai-savings-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 20px; text-align: left; }
  .qai-savings-card{
    background: var(--qai-surface); border: 1px solid var(--qai-border); border-radius: 16px; padding: 22px 20px;
    transition: transform .25s cubic-bezier(.16,1,.3,1), border-color .25s ease, box-shadow .25s ease;
  }
  .qai-savings-card:hover{ transform: translateY(-3px); border-color: rgba(103,178,201,0.4); box-shadow: 0 20px 40px -26px rgba(23,24,43,0.16); }
  .qai-savings-card .qai-icon{ margin-bottom: 14px; }
  .qai-savings-card h3{ font-family: var(--qai-font-head); font-size: 1.02rem; margin: 0 0 8px; color: var(--qai-white); }
  .qai-savings-card p{ font-size: 0.9rem; color: var(--qai-mute); line-height: 1.55; margin: 0; }

  /* "Estimate your own time back" mini calculator — same honest, illustrative-estimate
     convention as the main site's other calculators (Automate page's value estimator,
     the Technology Score, and so on): the visitor's own numbers, not a claimed result. */
  .qai-savings-calc{
    display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 0; align-items: stretch; text-align: left;
    background: var(--qai-surface); border: 1px solid var(--qai-border); border-radius: 18px; overflow: hidden;
    box-shadow: 0 30px 60px -30px rgba(23,24,43,0.16); margin-top: 28px;
  }
  .qai-savings-calc-inputs{ padding: 30px 32px; }
  .qai-savings-calc-label{ font-family: var(--qai-font-body); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--qai-teal); margin-bottom: 16px; }
  .qai-calc-field{ margin-bottom: 20px; }
  .qai-calc-field:last-child{ margin-bottom: 0; }
  .qai-calc-field label{ display: flex; justify-content: space-between; gap: 10px; font-size: 0.88rem; font-weight: 600; color: var(--qai-white); margin-bottom: 10px; }
  .qai-calc-field label .v{ font-family: var(--qai-font-head); color: var(--qai-teal2); font-weight: 700; }
  .qai-calc-field input[type="range"]{
    -webkit-appearance: none; appearance: none; width: 100%; height: 5px; border-radius: 999px;
    background: linear-gradient(90deg, var(--qai-teal2), var(--qai-teal2)) 0 / var(--qai-fill, 50%) 100% no-repeat, var(--qai-border);
    cursor: pointer; outline: none;
  }
  .qai-calc-field input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance: none; appearance: none; width: 17px; height: 17px; border-radius: 50%;
    background: var(--qai-white); border: 3px solid var(--qai-teal2); cursor: pointer;
    box-shadow: 0 2px 8px rgba(23,24,43,0.16); transition: transform .15s cubic-bezier(.16,1,.3,1);
  }
  .qai-calc-field input[type="range"]::-webkit-slider-thumb:hover{ transform: scale(1.15); }
  .qai-calc-field input[type="range"]::-moz-range-thumb{
    width: 17px; height: 17px; border-radius: 50%; background: var(--qai-white); border: 3px solid var(--qai-teal2);
    cursor: pointer; box-shadow: 0 2px 8px rgba(23,24,43,0.16);
  }
  .qai-calc-field input[type="range"]::-moz-range-track{ height: 5px; border-radius: 999px; background: var(--qai-border); }
  .qai-calc-field input[type="range"]::-moz-range-progress{ height: 5px; border-radius: 999px; background: var(--qai-teal2); }
  .qai-savings-calc-result{
    background: linear-gradient(165deg, rgba(13,148,136,0.14), var(--qai-surface) 60%);
    border-left: 1px solid var(--qai-border); padding: 30px 32px; display: flex; flex-direction: column; justify-content: center;
  }
  .qai-savings-calc-result .k{ font-family: var(--qai-font-body); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--qai-mute); margin-bottom: 8px; }
  .qai-savings-calc-result .big{
    font-family: var(--qai-font-head); font-size: clamp(1.9rem,4vw,2.5rem); font-weight: 700; color: var(--qai-white);
    margin-bottom: 4px; transition: opacity .15s ease;
  }
  .qai-savings-calc-result .sub{ font-size: 0.88rem; color: var(--qai-teal2); font-weight: 600; margin-bottom: 16px; }
  .qai-savings-calc-result .note{ font-size: 0.8rem; color: var(--qai-mute); line-height: 1.55; margin-bottom: 18px; }
  .qai-savings-calc-result .qai-cta-btn{ align-self: flex-start; padding: 11px 22px; font-size: 0.9rem; }
  @media (max-width: 900px){
    .qai-savings-calc{ grid-template-columns: 1fr; }
    .qai-savings-calc-result{ border-left: none; border-top: 1px solid var(--qai-border); }
  }

  /* ---------- Founding access ---------- */
  .qai-founding{ padding: 84px 0; border-top: 1px solid var(--qai-border); text-align: center; }
  .qai-founding h2{ font-size: clamp(1.6rem,3vw,2.1rem); margin: 0 0 8px; }
  .qai-founding > p{ color: var(--qai-mute); max-width: 560px; margin: 0 auto 40px; }
  .qai-founding-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; text-align: left; }
  .qai-founding-card{ background: var(--qai-surface); border: 1px solid var(--qai-border); border-radius: 16px; padding: 24px 20px; }
  .qai-founding-card .qai-icon{ margin-bottom: 14px; }
  .qai-founding-card h3{ font-family: var(--qai-font-head); font-size: 1.02rem; margin: 0 0 8px; color: var(--qai-white); }
  .qai-founding-card p{ font-size: 0.9rem; color: var(--qai-mute); line-height: 1.55; margin: 0; }

  /* ---------- FAQ (dark override of the site-wide .faq-item pattern) ---------- */
  .qai-faq{ padding: 84px 0; border-top: 1px solid var(--qai-border); }
  .qai-faq-head{ text-align: center; max-width: 560px; margin: 0 auto 32px; }
  .qai-faq-head h2{ font-size: clamp(1.6rem,3vw,2.1rem); margin: 0 0 8px; }
  .qai-faq-head p{ color: var(--qai-mute); margin: 0; }
  .qai-faq-list{ max-width: 720px; margin: 0 auto; }
  .qai-faq-list .faq-item{ border-bottom: 1px solid var(--qai-border); }
  .qai-faq-list .faq-q{
    width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px;
    background: none; border: none; text-align: left; padding: 18px 4px; cursor: pointer;
    font-family: var(--qai-font-body); font-size: 0.98rem; font-weight: 600; color: var(--qai-white);
  }
  .qai-faq-list .faq-q .plus{
    position: relative; width: 16px; height: 16px; flex-shrink: 0;
  }
  .qai-faq-list .faq-q .plus::before, .qai-faq-list .faq-q .plus::after{
    content: ''; position: absolute; background: var(--qai-teal2); border-radius: 2px; transition: transform .2s ease;
  }
  .qai-faq-list .faq-q .plus::before{ left: 0; top: 7px; width: 16px; height: 2px; }
  .qai-faq-list .faq-q .plus::after{ left: 7px; top: 0; width: 2px; height: 16px; }
  .qai-faq-list .faq-item.open .faq-q .plus::after{ transform: rotate(90deg); opacity: 0; }
  .qai-faq-list .faq-a{ max-height: 0; overflow: hidden; transition: max-height .25s ease; }
  .qai-faq-list .faq-item.open .faq-a{ max-height: 400px; }
  .qai-faq-list .faq-a-inner{ padding: 0 4px 18px; }
  .qai-faq-list .faq-a-inner p{ margin: 0; font-size: 0.92rem; color: var(--qai-mute); line-height: 1.6; }

  /* ---------- Final CTA + waitlist form ---------- */
  .qai-cta-bottom .qai-final-lead{ color: var(--qai-mute); max-width: 560px; margin: 0 auto 32px; }

  @media (max-width: 900px){
    .qai-nova{ grid-template-columns: 1fr; gap: 32px; }
    .qai-pain-grid{ grid-template-columns: 1fr; }
    .qai-steps{ grid-template-columns: 1fr; }
    .qai-compare-grid{ grid-template-columns: 1fr; }
    .qai-founding-grid{ grid-template-columns: 1fr; }
    .qai-savings-grid{ grid-template-columns: 1fr; }
    .qai-savings-calc{ grid-template-columns: 1fr; }
    /* Consistent, calmer vertical rhythm once sections stack on narrower screens —
       the generous 84px desktop rhythm would feel heavy on a phone. */
    .qai-nova, .qai-system, .qai-preview, .qai-philosophy, .qai-cta-bottom,
    .qai-problem, .qai-how, .qai-compare, .qai-founding, .qai-faq, .qai-savings, .qai-connectors{
      padding-top: 56px; padding-bottom: 56px;
    }
    .qai-cta-bottom{ padding-bottom: 64px; }
  }
  @media (max-width: 640px){
    .qai-waitlist-row{ grid-template-columns: 1fr; }
    .qai-waitlist{ padding: 18px; }
  }

  /* =====================================================================
     Quest360 AI: system diagram v2 (light glass)
     Nine modules orbit Nova on a visible ring; each has its own colour,
     the active one lights up and its spoke animates; the detail panel
     takes the same colour.
     ===================================================================== */
  .qai-system{ border-top: 0; padding: clamp(48px, 7vw, 80px) 0 clamp(40px, 6vw, 64px); }
  .qai-system h2{ font-size: clamp(1.9rem, 3.6vw, 2.8rem); letter-spacing: -0.035em; font-weight: 800; }
  .qai-system-body{ gap: clamp(28px, 5vw, 64px); align-items: center; }
  .qai-system-sticky{ top: 92px; }
  .qai-orbit-wrap{ margin-block: 18px; }

  .qai-orbit-wrap{ max-width: 600px; }
  .qai-orbit-ring{ inset: 12%; border: 1.5px dashed var(--border-strong); animation: ring-spin 120s linear infinite; }
  .qai-orbit-ring.qai-ring-in{ inset: 27%; border: 1px solid var(--glass-border); animation: none; background: radial-gradient(closest-side, var(--accent-wash), transparent 92%); }
  @media (prefers-reduced-motion: reduce){ .qai-orbit-ring{ animation: none; } }

  .qai-orbit-line{ stroke: var(--border-strong); stroke-width: 0.28; stroke-dasharray: 1.1 1.1; opacity: 1; }
  .qai-orbit-line.active{ stroke: var(--accent); stroke-width: 0.55; stroke-dasharray: none; }
  .qai-orbit-pulse{ stroke: var(--accent); stroke-width: 0.45; opacity: 0.8; stroke-dasharray: 2.2 97.8; }

  .qai-nova-core{
    width: clamp(92px, 18vw, 126px); height: clamp(92px, 18vw, 126px); border: 0; color: #fff; gap: 3px;
    background: radial-gradient(circle at 30% 24%, rgba(255,255,255,0.85), transparent 38%),
      linear-gradient(145deg, color-mix(in srgb, var(--c-build) 80%, #fff), var(--c-automate) 60%, color-mix(in srgb, var(--c-manage) 70%, var(--c-build)));
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.5), inset 0 -10px 22px rgba(0,0,0,0.18), 0 26px 46px -16px var(--c-automate);
    font-size: 1rem; letter-spacing: -0.01em;
  }
  .qai-nova-core svg{ color: #fff; width: 30px; height: 30px; }
  .qai-nova-core::before{ border-color: var(--c-automate); }
  .qai-nova-core:hover, .qai-nova-core.active{ border: 0; }
  .qai-nova-core.active{ box-shadow: inset 0 2px 0 rgba(255,255,255,0.5), inset 0 -10px 22px rgba(0,0,0,0.18), 0 0 0 7px color-mix(in srgb, var(--c-automate) 20%, transparent), 0 26px 46px -16px var(--c-automate); }

  .qai-node{
    --mod: var(--c-build);
    width: clamp(52px, 10vw, 66px); height: clamp(52px, 10vw, 66px);
    background-color: var(--glass-bg-strong); background-image: var(--sheen); border: 1.5px solid var(--glass-border);
    color: color-mix(in srgb, var(--mod) 72%, var(--fg));
    box-shadow: inset 0 1px 0 var(--glass-highlight), 0 14px 24px -14px color-mix(in srgb, var(--mod) 60%, transparent), var(--shadow-sm);
  }
  .qai-node svg{ width: 24px; height: 24px; }
  .qai-node::before{ border-color: color-mix(in srgb, var(--mod) 45%, transparent); }
  .qai-node:hover, .qai-node:focus-visible{ border-color: var(--mod); background-color: var(--glass-bg-strong); transform: scale(1.08); }
  .qai-node.active{
    color: #fff; border-color: transparent; transform: scale(1.14);
    background-image: linear-gradient(150deg, color-mix(in srgb, var(--mod) 78%, #fff), var(--mod) 58%, color-mix(in srgb, var(--mod) 80%, #000));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 0 0 6px color-mix(in srgb, var(--mod) 20%, transparent), 0 18px 30px -10px var(--mod);
  }
  .qai-node[data-key="scout"], .qai-node[data-key="inbox"]{ --mod: var(--c-build); }
  .qai-node[data-key="reach"], .qai-node[data-key="deals"]{ --mod: var(--c-manage); }
  .qai-node[data-key="voice"], .qai-node[data-key="pulse"]{ --mod: var(--c-protect); }
  .qai-node[data-key="replay"], .qai-node[data-key="signals"]{ --mod: var(--c-automate); }
  .qai-node[data-key="flow"]{ --mod: var(--c-grow); }
  :root[data-theme="dark"] .qai-node.active{ color: #0B1020; }
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .qai-node.active{ color: #0B1020; } }

  .qai-node-label{
    margin-top: 10px; padding: 3px 11px; border-radius: 999px; font-size: clamp(0.66rem, 1.8vw, 0.76rem); font-weight: 700; color: var(--fg);
    background: var(--glass-bg-strong); border: 1px solid var(--glass-border); box-shadow: var(--shadow-sm);
  }
  .qai-node-wrap:has(.qai-node[data-key="scout"]) .qai-node-label,
  .qai-node-wrap:has(.qai-node[data-key="reach"]) .qai-node-label,
  .qai-node-wrap:has(.qai-node[data-key="signals"]) .qai-node-label{ top: auto; bottom: 100%; margin: 0 0 10px; }
  .qai-node-wrap:has(.qai-node[data-key="voice"]) .qai-node-label,
  .qai-node-wrap:has(.qai-node[data-key="replay"]) .qai-node-label{ top: 50%; left: 100%; transform: translateY(-50%); margin: 0 0 0 12px; }
  .qai-node-wrap:has(.qai-node[data-key="pulse"]) .qai-node-label,
  .qai-node-wrap:has(.qai-node[data-key="deals"]) .qai-node-label{ top: 50%; left: auto; right: 100%; transform: translateY(-50%); margin: 0 12px 0 0; }
  @media (max-width: 700px){
    .qai-node-wrap .qai-node-label{ top: 100% !important; bottom: auto !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; margin: 6px 0 0 !important; }
  }

  .qai-system-panel{
    --mod: var(--c-automate);
    border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 36px); min-height: 0;
    background-color: var(--glass-bg-strong); background-image: var(--sheen), var(--noise); background-blend-mode: normal, soft-light;
    border: 1px solid var(--glass-border);
    box-shadow: inset 0 1px 0 var(--glass-highlight), inset 0 -1px 0 var(--edge-dark), var(--shadow-lg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5); backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  }
  .qai-system-panel[data-mod="scout"], .qai-system-panel[data-mod="inbox"]{ --mod: var(--c-build); }
  .qai-system-panel[data-mod="reach"], .qai-system-panel[data-mod="deals"]{ --mod: var(--c-manage); }
  .qai-system-panel[data-mod="voice"], .qai-system-panel[data-mod="pulse"]{ --mod: var(--c-protect); }
  .qai-system-panel[data-mod="replay"], .qai-system-panel[data-mod="signals"]{ --mod: var(--c-automate); }
  .qai-system-panel[data-mod="flow"]{ --mod: var(--c-grow); }
  .qai-system-panel[data-mod="nova"]{ --mod: var(--c-automate); }
  .qai-panel-top{ margin-bottom: 16px; }
  .qai-panel-tag{ background: color-mix(in srgb, var(--mod) 14%, transparent); color: color-mix(in srgb, var(--mod) 62%, var(--fg)); letter-spacing: 0.05em; }
  .qai-panel-icon{
    width: 56px; height: 56px; border-radius: 17px; margin-bottom: 16px; color: #fff;
    background-image: linear-gradient(150deg, color-mix(in srgb, var(--mod) 78%, #fff), var(--mod) 58%, color-mix(in srgb, var(--mod) 80%, #000));
    box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.5), inset 0 -4px 8px rgba(0,0,0,0.14), 0 14px 22px -10px var(--mod);
  }
  .qai-panel-icon svg{ width: 26px; height: 26px; }
  .qai-system-panel h3{ font-size: clamp(1.5rem, 2.4vw, 1.9rem); letter-spacing: -0.03em; font-weight: 800; margin-bottom: 10px; }
  .qai-system-panel > p{ font-size: 1rem; color: var(--fg-muted); }
  .qai-panel-features{ gap: 12px; }
  .qai-panel-features li{ font-size: 0.95rem; }
  .qai-panel-features li svg{ stroke: color-mix(in srgb, var(--mod) 65%, var(--fg)); stroke-width: 2.4; background: color-mix(in srgb, var(--mod) 14%, transparent); border-radius: 50%; padding: 3px; width: 20px; height: 20px; margin-top: 1px; }
  .qai-panel-nav{ border-top-color: var(--border); }
  .qai-panel-nav-btn{ border-radius: 999px; background: var(--glass-bg-strong); border-color: var(--border-strong); font-weight: 650; }
  .qai-panel-nav-btn:hover, .qai-panel-nav-btn:focus-visible{ border-color: var(--mod); background: color-mix(in srgb, var(--mod) 10%, transparent); }

  .qai-system-steps{ gap: 10px; margin-top: 32px; }
  .qai-step-dot{ width: 9px; height: 9px; background: var(--border-strong); }
  .qai-step-dot:hover{ background: var(--accent); }
  .qai-step-dot.done{ background: color-mix(in srgb, var(--accent) 45%, transparent); }
  .qai-step-dot.active{ background: var(--accent); transform: scale(1.5); }

  /* =====================================================================
     ICON SYSTEM + INTERACTION POLISH
     One icon language (24px grid, 1.75 round stroke), three chip sizes,
     visible focus everywhere, 44px touch targets, no hover-only controls.
     ===================================================================== */
  :root{ --icon-stroke: 1.75; --chip-sm: 36px; --chip-md: 44px; --chip-lg: 56px; }
  html{ scroll-padding-top: 100px; }

  svg[fill="none"]{ stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
  /* small inline glyphs (arrows, chevrons, ticks) need a touch more weight to hold up at 12-16px */
  .pl svg, .pillar-link svg, .btn svg, .faq-group-chevron svg, .faq-search-ic, .snap-list svg, .hero-note svg, .calc-opt svg,
  .qai-panel-features li svg, .qai-panel-nav-btn svg, .signs-list svg, .foot-trust-item svg, .breadcrumb svg{ stroke-width: 2; }
  svg{ flex-shrink: 0; }

  /* chips: sm 36 / md 44 / lg 56 ([class] lifts specificity above the older per-component sizes) */
  .di[class], .ii[class], .faq-group-icon[class], .qai-pain-icon[class]{
    width: var(--chip-sm); height: var(--chip-sm); min-width: var(--chip-sm); min-height: var(--chip-sm); border-radius: 11px; flex: none;
  }
  .di[class] svg, .ii[class] svg, .faq-group-icon[class] svg, .qai-pain-icon[class] svg{ width: 18px; height: 18px; }
  .value-card .icon[class], .qai-connectors-feature .icon[class], .qai-icon[class], .pillar-icon[class], .price-icon[class], .qi[class], .ci[class], .pillar-card .pi[class]{
    width: var(--chip-md); height: var(--chip-md); min-width: var(--chip-md); min-height: var(--chip-md); border-radius: 14px; flex: none;
  }
  .value-card .icon[class] svg, .qai-connectors-feature .icon[class] svg, .qai-icon[class] svg, .pillar-icon[class] svg, .price-icon[class] svg, .qi[class] svg, .ci[class] svg, .pillar-card .pi[class] svg{ width: 22px; height: 22px; }
  .b-protect .pi[class], .cluster-chip i, .qai-panel-icon[class]{
    width: var(--chip-lg); height: var(--chip-lg); min-width: var(--chip-lg); min-height: var(--chip-lg); border-radius: 18px; flex: none;
  }
  .b-protect .pi[class] svg, .cluster-chip i svg, .qai-panel-icon[class] svg{ width: 26px; height: 26px; }

  /* focus: always visible, never hidden behind the sticky nav */
  :focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }
  input:focus-visible, select:focus-visible, textarea:focus-visible{ outline-offset: 1px; border-color: var(--accent); }
  .calc-opt:focus-visible, .pick:focus-visible, .qai-node:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 12px; }
  .skip-link{
    position: absolute; left: 16px; top: -100px; z-index: 300; padding: 10px 18px; border-radius: 999px; font-weight: 700; font-size: 0.9rem;
    background: var(--surface); color: var(--fg); border: 2px solid var(--accent); box-shadow: var(--shadow-lg); transition: top .15s ease;
  }
  .skip-link:focus{ top: 14px; }
  main:focus, .page h1:focus{ outline: none; }

  /* touch: 44px targets, no 300ms delay */
  button, a, .calc-opt, .pick, summary{ touch-action: manipulation; }
  @media (pointer: coarse){
    .btn, .btn-sm, .calc-toggle, .filter-chip, .faq-chip, .nav-toggle, .theme-toggle, .qz-reset, .pick, .pillar-link, .qai-panel-nav-btn{ min-height: 44px; }
    .theme-toggle{ min-width: 44px; }
    .faq-q{ min-height: 48px; }
    .qai-step-dot{ width: 12px; height: 12px; }
    .breadcrumb a{ padding-block: 8px; }
  }
  button:disabled, .btn:disabled, .btn[aria-disabled="true"]{ opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
  .calc-opt{ cursor: pointer; }
  .calc-opt[aria-disabled="true"]{ cursor: default; }

  /* accordions: closed content must not be tabbable or read out */
  .faq-item:not(.open) .faq-a-inner, .faq-group:not(.open) .faq-group-body-inner{ visibility: hidden; transition: visibility 0s .3s; }
  .faq-item.open .faq-a-inner, .faq-group.open .faq-group-body-inner{ visibility: visible; transition-delay: 0s; }

  /* nav dropdowns: opened by click, Enter/Space or hover intent (state lives in .is-open) */
  .nav-item-drop .nav-drop-panel, .nav-item-drop:hover .nav-drop-panel, .nav-item-drop:focus-within .nav-drop-panel{ opacity: 0; visibility: hidden; transform: translate(-50%,-6px); }
  .nav-item-drop.is-open .nav-drop-panel{ opacity: 1; visibility: visible; transform: translate(-50%,0); }
  .nav-item-drop .nav-drop-btn svg, .nav-item-drop:hover .nav-drop-btn svg, .nav-item-drop:focus-within .nav-drop-btn svg{ transform: none; }
  .nav-item-drop.is-open .nav-drop-btn svg{ transform: rotate(180deg); }
  .nav-drop-panel::before{ content: ''; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
  .nav-drop-btn{ min-height: 36px; }

  /* forms: inline errors tied to their field */
  .field-error{ display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; font-size: 0.84rem; font-weight: 600; color: color-mix(in srgb, var(--c-protect) 70%, var(--fg)); }
  .field-error::before{ content: '!'; flex: none; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 800; background: var(--c-protect-wash); color: inherit; }
  .field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"]{ border-color: var(--c-protect); }
  .field-hint{ font-size: 0.8rem; color: var(--fg-muted); margin-top: 6px; }
  .req{ color: color-mix(in srgb, var(--c-protect) 70%, var(--fg)); font-weight: 700; margin-left: 2px; }

  .faq-chip.active, .faq-chip[aria-pressed="true"]{ background: var(--c-build); border-color: var(--c-build); color: var(--on-accent); }
  .faq-chip.active .faq-chip-count, .faq-chip[aria-pressed="true"] .faq-chip-count{ color: var(--on-accent); background: color-mix(in srgb, var(--on-accent) 18%, transparent); }


  /* founder checklist */
  .cl-progress{ display: grid; gap: 6px; margin: 4px 0 18px; }
  .cl-count{ font-size: 0.9rem; font-weight: 650; color: var(--fg-muted); }
  button.cl-toggle{ border: 0; cursor: pointer; font: inherit; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; transition: background .15s, color .15s, transform .1s; }
  button.cl-toggle:hover{ background: var(--accent-wash); }
  button.cl-toggle:active{ transform: scale(0.94); }
  .checklist-list li.done .cl-toggle{ background: var(--c-grow); color: transparent; position: relative; }
  .checklist-list li.done .cl-toggle::after{ content: '\2713'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.95rem; }
  .checklist-list li.done b{ color: var(--fg-muted); }
  @media print{ button.cl-toggle{ border: 1px solid #888; } }

  /* option rows (share-of-work etc.) wrap instead of overflowing; yes/no pills keep their size */
  .calc-toggle-row{ flex-wrap: wrap; }
  .calc-toggle:not([data-answer]){ flex: 1 1 auto; min-width: 0; white-space: normal; }

  /* small controls keep a visually small mark but a 44px hit area */
  button.cl-toggle, .qai-step-dot, .faq-search-clear, .wa-teaser button.wa-close{ position: relative; }
  button.cl-toggle::before, .qai-step-dot::before, .faq-search-clear::before, .wa-teaser button.wa-close::before{ content: ''; position: absolute; inset: -9px; }

  .qai-teaser-badge{ color: color-mix(in srgb, var(--c-manage) 62%, var(--fg)); }
  .faq-chip.active .faq-chip-count, .faq-chip[aria-pressed="true"] .faq-chip-count{ background: rgba(0,0,0,0.22); color: #fff; }
  :root[data-theme="dark"] .faq-chip.active .faq-chip-count{ background: rgba(255,255,255,0.3); color: var(--on-accent); }
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .faq-chip.active .faq-chip-count{ background: rgba(255,255,255,0.3); color: var(--on-accent); } }

  /* filter result line */
  .filter-status{ margin: 14px 0 0; font-size: 0.9rem; color: var(--fg-muted); display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
  .filter-status button{ background: none; border: 0; padding: 0; font: inherit; font-weight: 650; color: var(--accent-deep); text-decoration: underline; cursor: pointer; }

  /* theme toggle: keep a visible state label for screen readers only */
  .sr-only{ position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

  /* about: key facts */
  .facts{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 0; }
  .facts > div{
    padding: 20px 22px; border-radius: var(--radius-md); background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5); backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
    border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow-sm);
  }
  .facts dt{ font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 6px; }
  .facts dd{ margin: 0; font-size: 0.98rem; line-height: 1.55; }
  .facts dd a{ color: var(--accent-deep); text-decoration: underline; }
  @media (max-width: 760px){ .facts{ grid-template-columns: 1fr; } }

  .lead-panel--info .eyebrow{ background: var(--accent-wash); color: var(--accent-deep); }
  .lead-panel--info .eyebrow::before{ background: var(--accent); }