.vsa-home-root, .vsa-home-root * { box-sizing:border-box; }
  /* the homepage reset must never touch the shared header, sheet or overlays,
     otherwise their padding differs from every other page */
  .vsa-home-root,
  .vsa-home-root *:not(:where(
    .vsa-nav-wrap, .vsa-nav-wrap *,
    .vsa-nav-cta, .vsa-brand, .vsa-brand *,
    .vsa-vetmark, .vsa-vetmark *,
    .vsa-burger, .vsa-burger *,
    .vsa-sheet, .vsa-sheet *,
    .vsa-cookie, .vsa-cookie *,
    .vsa-modal, .vsa-modal *
  )) { margin:0; padding:0; }
  html.vsa-home body { background:#030305; color:#fff; font-family:DM Sans, sans-serif; overflow-x:hidden; }
  canvas#scene { position:fixed; inset:0; width:100vw; height:100vh; z-index:-10; display:block; }
  /* the WebGL canvas sits behind everything, so the React page wrapper must stay transparent */
  .vsa-home-root { background:transparent !important; }
  .spacer { height:1400vh; }

  /* ---------- site footer ---------- */
  .site-footer{
    position:relative; z-index:40; font-family:DM Sans, sans-serif;
    border-top:1px solid rgba(255,255,255,0.08);
    background:linear-gradient(180deg, rgba(3,3,5,0.82), rgba(3,3,5,0.98));
    -webkit-backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    padding:clamp(48px,5vw,72px) clamp(20px,5vw,64px) 28px;
  }
  .site-footer .ft-wrap{ max-width:1200px; margin:0 auto; display:grid; gap:40px; grid-template-columns:1.3fr 1fr 1fr 1fr; }
  .site-footer img.ft-logo{ height:28px; width:auto; }
  .site-footer p.ft-blurb{ margin-top:16px; max-width:280px; font-size:13.5px; line-height:1.65; color:rgba(255,255,255,0.6); }
  .site-footer .ft-head{
    font-size:10px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase;
    color:rgba(255,255,255,0.42); margin-bottom:14px;
  }
  .site-footer .ft-col{ display:flex; flex-direction:column; gap:9px; }
  .site-footer a{ color:rgba(255,255,255,0.72); text-decoration:none; font-size:13.5px; transition:color .2s ease; }
  .site-footer a:hover{ color:#fff; }
  .site-footer .ft-base{
    max-width:1200px; margin:40px auto 0; padding-top:22px;
    border-top:1px solid rgba(255,255,255,0.06); font-size:12px; color:rgba(255,255,255,0.35);
  }
  .site-footer .ft-base-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; }
  .site-footer .ft-base-left, .site-footer .ft-base-right{ display:flex; flex-wrap:wrap; align-items:center; gap:20px; }
  /* cookie banner */
  #cookie-banner{
    position:fixed; left:16px; right:16px; bottom:16px; z-index:90;
    max-width:980px; margin:0 auto; padding:16px 18px; border-radius:18px;
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px;
    background:rgba(10,16,26,0.86); border:1px solid rgba(255,255,255,0.16);
    -webkit-backdrop-filter:blur(28px) saturate(1.4); -webkit-backdrop-filter:blur(28px) saturate(1.4);
    backdrop-filter:blur(28px) saturate(1.4); -webkit-backdrop-filter:blur(28px) saturate(1.4);
    box-shadow:0 24px 70px rgba(0,0,0,0.5);
    color:rgba(255,255,255,0.82); font-size:13.5px; line-height:1.55;
  }
  #cookie-banner[hidden]{ display:none; }
  #cookie-banner p{ margin:0; max-width:640px; }
  #cookie-banner a{ color:#fff; }
  #cookie-banner .ck-actions{ display:flex; gap:10px; }
  #cookie-banner button{
    height:40px; padding:0 20px; border-radius:9999px; font-size:13.5px; font-weight:600;
    cursor:pointer; border:1px solid rgba(255,255,255,0.7); background:#fff; color:#0a0a12;
    font-family:inherit;
  }
  #cookie-banner button.is-ghost{ background:transparent; color:rgba(255,255,255,0.82); border-color:rgba(255,255,255,0.22); }
  @media (max-width:640px){ #cookie-banner{ flex-direction:column; align-items:flex-start; } }
  @media (max-width:900px){ .site-footer .ft-wrap{ grid-template-columns:1fr 1fr; } }
  @media (max-width:560px){ .site-footer .ft-wrap{ grid-template-columns:1fr; } }

  .overlay { position:fixed; inset:0; pointer-events:none; }
  /* Safe first paint: later scenes stay hidden while the WebGL module loads. */
  .overlay[data-state="before"], .overlay[data-state="after"] { opacity:0; visibility:hidden; }
  .overlay[data-state="initial"], .overlay[data-state="visible"] { opacity:1; visibility:visible; }

  /* ---------- accessibility ---------- */
  .skip-link{
    position:fixed; left:16px; top:-80px; z-index:200;
    background:#fff; color:#04121f; font-family:DM Sans, sans-serif; font-weight:600;
    padding:10px 18px; border-radius:9999px; text-decoration:none; font-size:14px;
    transition:top .18s ease;
  }
  .skip-link:focus{ top:16px; }
  .vsa-home-root a:focus-visible, .vsa-home-root button:focus-visible, .vsa-home-root [tabindex]:focus-visible{
    outline:2px solid #7fd4ff; outline-offset:3px; border-radius:8px;
  }
  .vsa-home-root [data-state="before"], .vsa-home-root [data-state="after"]{ pointer-events:none; }
  @media (prefers-reduced-motion: reduce){
    .skip-link{ transition:none; }
  }



  /* ---------- eyebrow ---------- */
  .top-label{
    position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px;
    border-radius:9999px; background:rgba(255,255,255,0.04); padding:10px 20px;
    font-size:clamp(13px,0.95vw,14px); font-weight:500; color:#fff; line-height:1;
    -webkit-backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    box-shadow:0 4px 20px rgba(0,0,0,0.2);
  }
  .top-label > svg{ flex:0 0 auto; display:block; }
  .top-label > span:not(.ring){ display:inline-block; line-height:1; letter-spacing:0.06em; }
  .ring{
    position:absolute; inset:0; padding:1px; border-radius:inherit; pointer-events:none;
    background-size:200% 100%;
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
  }
  .ring-label{
    background-image:linear-gradient(90deg, rgba(255,255,255,0.08), rgba(255,255,255,0.35), rgba(255,255,255,0.08));
    animation:ringMove 3000ms linear infinite;
  }
  .ring-btn{
    background-image:linear-gradient(90deg, #7fd4ff, #3f7dff, #7fd4ff);
    animation:ringMove 4000ms linear infinite;
  }
  @keyframes ringMove { from { background-position:0% 0%; } to { background-position:200% 0%; } }

  /* ---------- buttons ---------- */
  .btn-primary, .btn-secondary{
    position:relative; height:56px; border-radius:9999px;
    font-family:DM Sans, sans-serif; font-size:clamp(15px,1.1vw,16px); font-weight:500;
    cursor:pointer; transition:all 0.2s; pointer-events:auto; border:none; text-decoration:none;
    display:inline-flex; align-items:center;
  }
  .btn-primary:hover, .btn-secondary:hover { transform:translateY(-2px); }
  .btn-primary{
    padding:0 16px 0 32px; color:#fff; gap:12px;
    -webkit-backdrop-filter:blur(24px) saturate(1.5); -webkit-backdrop-filter:blur(24px) saturate(1.5);
    backdrop-filter:blur(24px) saturate(1.5); -webkit-backdrop-filter:blur(24px) saturate(1.5);
    background:rgba(20,25,35,0.4);
    box-shadow:inset 0 2px 10px rgba(255,255,255,0.35), inset 0 -6px 16px rgba(0,0,0,0.75),
               inset 0 0 0 1px rgba(255,255,255,0.05), 0 8px 24px rgba(0,0,0,0.4);
  }
  .btn-primary:hover{
    background:rgba(30,35,50,0.5);
    box-shadow:inset 0 2px 12px rgba(255,255,255,0.45), inset 0 -8px 20px rgba(0,0,0,0.85),
               inset 0 0 0 1px rgba(255,255,255,0.08), 0 12px 32px rgba(0,0,0,0.5);
  }
  .arrow-badge{
    position:relative; width:32px; height:32px; border-radius:9999px;
    background:rgba(255,255,255,0.02);
    display:inline-flex; align-items:center; justify-content:center; flex:none;
  }
  .arrow-badge .ring-arrow{
    position:absolute; inset:0; padding:1px; border-radius:inherit;
    background-image:linear-gradient(135deg, #7fd4ff, #3f7dff);
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
  }
  .btn-secondary{
    padding:0 32px; border:1px solid rgba(255,255,255,0.08);
    background:rgba(255,255,255,0.04); color:rgba(255,255,255,0.75);
    -webkit-backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  }
  .btn-secondary:hover{ background:rgba(255,255,255,0.08); color:#fff; border-color:rgba(255,255,255,0.15); }

  /* ---------- headings ---------- */
  .display{
    font-family:DM Sans, sans-serif; font-weight:600; line-height:1.2; letter-spacing:-0.03em;
    color:#fff;
    display:flex; flex-wrap:wrap;
  }
  .title-center{ font-size:clamp(34px,5.4vw,80px); text-align:center; justify-content:center; }
  .title-left{ font-size:clamp(30px,4.6vw,64px); text-align:left; justify-content:flex-start; }
  .word{ display:inline-block; white-space:nowrap; }
  .char{
    display:inline-block;
    transform:translateY(40px); opacity:0; filter:blur(16px);
    transition:transform 1200ms cubic-bezier(0.165,0.84,0.44,1),
               opacity 1200ms cubic-bezier(0.165,0.84,0.44,1),
               filter 1200ms cubic-bezier(0.165,0.84,0.44,1);
  }
  .char.in{ transform:translateY(0); opacity:1; filter:blur(0px); }
  .char.out{ transform:translateY(-40px); opacity:0; filter:blur(16px); }

  /* ---------- reveal states ---------- */
  .reveal{
    opacity:0; transform:translateY(30px);
    transition:opacity 1.2s cubic-bezier(0.2,1,0.2,1), transform 1.2s cubic-bezier(0.2,1,0.2,1);
  }
  .reveal.is-visible{ opacity:1; transform:translateY(0); }
  .reveal.is-leaving{ opacity:0; transform:translateY(-30px); }

.lead{ font-size:clamp(15px,1.25vw,18px); line-height:1.5; color:#a0a0a0; }
.btn-row{ display:flex; gap:16px; flex-wrap:wrap; }

/* ---------- google partner badge ---------- */
.partner-badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 18px; border-radius:9999px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.10);
  -webkit-backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  font-size:13px; font-weight:500; color:#d8d8e0;
  pointer-events:auto; margin-top:8px;
}
.partner-badge svg{ width:22px; height:22px; flex:none; }
.partner-badge strong{ color:#fff; font-weight:600; }
#hero .partner-badge{ margin-top:28px; }

  /* ---------- hero ---------- */
  #hero{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 20px; text-align:center; z-index:10; }
  #hero .top-label{ margin-bottom:40px; }
  #hero h1{ display:block; font-family:Verdana, Geneva, sans-serif; font-weight:700; max-width:480px; margin-bottom:24px; font-size:clamp(26px,3.2vw,36px); line-height:1.25; letter-spacing:-0.02em; text-wrap:balance; }
  #hero .lead{ max-width:600px; margin-bottom:48px; }

  /* ---------- dna cards ---------- */
  #dna{ position:fixed; inset:0; z-index:5; perspective:1200px; pointer-events:none; opacity:0; }
  .dna-card{
    position:absolute; left:0; top:0; will-change:transform;
    width:clamp(220px,74vw,400px); border-radius:20px;
    border:1px solid rgba(255,255,255,0.5);
    background:linear-gradient(180deg, rgba(255,255,255,0.97), rgba(244,247,252,0.95));
    padding:26px 26px 22px; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    box-shadow:0 30px 70px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.9);
    text-align:left; font-family:DM Sans, sans-serif; color:#14141a;
  }
  .dna-card h3{
    font-family:DM Sans, sans-serif; font-size:9.5px; font-weight:700;
    text-transform:uppercase; letter-spacing:0.14em; color:#8a90a0; margin-bottom:12px;
  }
  .dna-card .stat{
    font-family:DM Sans, sans-serif; font-size:clamp(38px,4vw,58px); font-weight:700;
    line-height:1; margin-bottom:14px; letter-spacing:-0.03em;
    background:linear-gradient(90deg,#1a73ff,#4a9dff);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .dna-card .lead{
    font-size:12.5px; line-height:1.55; color:#5c6273;
    padding-top:12px; border-top:1px solid rgba(16,24,40,0.08); margin:0;
  }
  .dna-spark{ display:flex; align-items:flex-end; gap:5px; height:38px; margin-bottom:16px; }
  .dna-spark i{ flex:1; max-width:20px; border-radius:3px 3px 0 0; background:linear-gradient(180deg,#4a9dff,#1a73ff); opacity:0.85; }

  /* ---------- wave ---------- */
  #wave{ display:flex; align-items:center; justify-content:center; gap:60px; padding:0 10vw; text-align:left; z-index:10; }
  #wave .col-left{ max-width:800px; }
  #wave .col-right{ max-width:500px; }
  #wave .top-label{ margin-bottom:24px; }
  #wave .lead{ margin-bottom:40px; }
  @media (max-width:1024px){ #wave{ flex-direction:column; gap:32px; padding:0 8vw; } }

  /* ---------- services constellation ---------- */
  #services-preview{
    display:grid; grid-template-columns:minmax(260px,0.78fr) minmax(0,1.22fr); grid-template-areas:"intro orbit";
    align-items:center; justify-content:center; gap:clamp(24px,5vw,78px); padding:0 7vw; text-align:left; z-index:10;
  }
  #services-preview .services-intro{ grid-area:intro; max-width:440px; }
  #services-preview .top-label{ margin-bottom:24px; }
  #services-preview h2{ max-width:460px; margin-bottom:20px; }
  #services-preview .lead{ max-width:390px; margin-bottom:28px; color:#fff; }
  #services-preview .btn-primary{ pointer-events:auto; }
  .services-orbit{
    grid-area:orbit; position:relative; width:min(670px,52vw,74vh); aspect-ratio:1.12/1; margin-inline:auto; pointer-events:none;
    filter:drop-shadow(0 22px 48px rgba(3,18,50,0.28));
  }
  .services-orbit::before,.services-orbit::after{ content:""; position:absolute; left:50%; top:50%; translate:-50% -50%; border:1px solid rgba(127,212,255,0.13); border-radius:50%; pointer-events:none; }
  .services-orbit::before{ width:54%; height:67%; rotate:28deg; animation:serviceOrbit 28s linear infinite; }
  .services-orbit::after{ width:78%; height:90%; rotate:-32deg; border-style:dashed; opacity:.7; animation:serviceOrbit 40s linear reverse infinite; }
  @keyframes serviceOrbit{ to{ rotate:388deg; } }
  .service-axis{ position:absolute; left:50%; top:50%; background:rgba(127,212,255,0.16); transform-origin:center; }
  .axis-horizontal{ width:92%; height:1px; translate:-50% -50%; }
  .axis-vertical{ width:1px; height:88%; translate:-50% -50%; }
  .service-core{
    position:absolute; left:50%; top:50%; translate:-50% -50%; z-index:2; width:31%; aspect-ratio:1; border-radius:50%; display:grid; place-content:center; gap:5px; padding:18px; text-align:center;
    color:#fff; border:1px solid rgba(174,227,255,0.55); background:radial-gradient(circle at 50% 25%,rgba(89,188,255,0.5),rgba(7,28,66,0.82) 68%);
    box-shadow:0 0 0 8px rgba(91,181,255,0.05),0 0 74px rgba(54,151,255,0.42),inset 0 1px 0 rgba(255,255,255,0.28); animation:serviceCoreBreath 5s ease-in-out infinite;
  }
  .service-core small{ color:#9fdcff; font:700 9px/1 DM Sans,sans-serif; letter-spacing:.16em; }
  .service-core strong{ font:600 clamp(12px,1.35vw,18px)/1.15 DM Sans,sans-serif; }
  .service-core>span:last-child{ color:rgba(255,255,255,.57); font:400 clamp(8px,.75vw,10px)/1.25 DM Sans,sans-serif; }
  .core-pulse{ position:absolute; inset:-11px; border:1px solid rgba(127,212,255,.24); border-radius:50%; animation:corePulse 2.8s ease-out infinite; }
  @keyframes serviceCoreBreath{ 0%,100%{ box-shadow:0 0 0 8px rgba(91,181,255,.05),0 0 58px rgba(54,151,255,.3),inset 0 1px 0 rgba(255,255,255,.24); } 50%{ box-shadow:0 0 0 12px rgba(91,181,255,.08),0 0 96px rgba(54,151,255,.52),inset 0 1px 0 rgba(255,255,255,.3); } }
  @keyframes corePulse{ 0%{ transform:scale(.82); opacity:.8; } 100%{ transform:scale(1.34); opacity:0; } }
  .service-node{
    position:absolute; left:var(--x); top:var(--y); z-index:3; pointer-events:auto; transform:translate(-50%,-50%); display:flex; align-items:center; gap:9px; width:min(190px,31%); min-height:58px; padding:9px 10px; color:#fff; text-decoration:none;
    border:1px solid rgba(160,220,255,.24); border-radius:13px; background:linear-gradient(145deg,rgba(40,121,207,.32),rgba(3,17,43,.8)); box-shadow:0 15px 34px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.16); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
    animation:serviceNodeFloat 7s ease-in-out infinite; animation-delay:var(--d); transition:transform 220ms cubic-bezier(.23,1,.32,1),border-color 220ms ease,box-shadow 220ms ease;
  }
  @keyframes serviceNodeFloat{ 0%,100%{ transform:translate(-50%,-50%) translateY(0); } 50%{ transform:translate(-50%,-50%) translateY(-9px); } }
  .service-node:hover{ transform:translate(-50%,-50%) translateY(-6px) scale(1.06); border-color:rgba(127,212,255,.78); box-shadow:0 22px 50px rgba(9,79,150,.45),inset 0 1px 0 rgba(255,255,255,.28); }
  .service-node-icon{ flex:none; display:grid; place-items:center; width:31px; height:31px; border-radius:9px; color:#9fddff; border:1px solid rgba(127,212,255,.42); background:rgba(64,156,255,.18); }
  .service-node strong{ display:block; font:600 11.5px/1.2 DM Sans,sans-serif; }
  .service-node small{ display:block; margin-top:3px; color:rgba(255,255,255,.58); font:400 9px/1.2 DM Sans,sans-serif; white-space:nowrap; }
  .service-node-arrow{ flex:none; margin-left:auto; color:#8fd8ff; opacity:.7; }
  @media (prefers-reduced-motion:reduce){ .services-orbit::before,.services-orbit::after,.service-node,.service-core,.core-pulse{ animation:none; } .service-node{ transition:none; } }
  @media (max-width:1100px){ #services-preview{ gap:24px; padding:0 4vw; } .services-orbit{ width:min(580px,55vw,68vh); } .service-node{ width:min(174px,34%); } }
  @media (max-width:900px) and (min-width:701px){ #services-preview{ grid-template-columns:1fr; grid-template-areas:"intro" "orbit"; justify-items:center; text-align:center; gap:18px; } #services-preview .services-intro{ max-width:580px; } #services-preview .lead{ margin-inline:auto; } #services-preview .btn-primary{ margin-inline:auto; } .services-orbit{ width:min(600px,82vw,54vh); } }

  /* ---------- galaxy ---------- */
  #galaxy{ display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:15vh 20px; text-align:center; z-index:10; }

  /* ---------- galaxy ---------- */
  #galaxy{ display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:15vh 20px; text-align:center; z-index:10; }
  #galaxy .top-label{ margin-bottom:40px; }
  #galaxy h2{ max-width:1000px; }
  #galaxy .lead{ max-width:600px; margin-bottom:32px; }
  #galaxy .grp{ display:flex; flex-direction:column; align-items:center; }

  /* ---------- platform ---------- */
  #tools{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 5vw; text-align:center; z-index:10; }
  #tools .top-label{ margin-bottom:22px; }
  #tools h2{ max-width:900px; }
  #tools .lead{ max-width:660px; margin-bottom:clamp(22px,2.6vw,38px); color:#fff; font-weight:500; }
  .plat-wrap{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(20px,2.6vw,46px); align-items:center; width:100%; max-width:1180px; text-align:left; }
  .feat-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(8px,0.9vw,12px); }
  .feat{
    display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:12px;
    background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.13);
    -webkit-backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    transition:transform 380ms cubic-bezier(0.2,1,0.2,1), background 380ms ease, border-color 380ms ease;
  }
  .feat:hover{ transform:translateY(-4px); background:rgba(255,255,255,0.12); border-color:rgba(120,190,255,0.42); }
  .feat-ico{
    flex:none; width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
    color:#8fd0ff; background:linear-gradient(150deg, rgba(120,190,255,0.26), rgba(60,120,220,0.12));
    border:1px solid rgba(140,200,255,0.28);
  }
  .feat-txt{ min-width:0; }
  .feat-name{ display:block; font-family:DM Sans, sans-serif; font-weight:600; font-size:clamp(12px,0.95vw,14px); color:#fff; letter-spacing:-0.01em; line-height:1.25; }
  .feat-sub{ display:block; font-size:clamp(10px,0.78vw,11.5px); color:rgba(255,255,255,0.62); margin-top:2px; }
  /* mock UI, mirrors the real client portal aesthetic */
  .plat-shot{
    position:relative; border-radius:18px; overflow:hidden; padding:14px;
    background:linear-gradient(180deg, rgba(255,255,255,0.97), rgba(244,247,252,0.95));
    border:1px solid rgba(255,255,255,0.5);
    box-shadow:0 36px 80px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.9);
    font-family:DM Sans, sans-serif; color:#14141a;
  }
  .shot-bar{ display:flex; align-items:center; gap:8px; padding-bottom:11px; border-bottom:1px solid rgba(16,24,40,0.08); }
  .shot-dot{ width:8px; height:8px; border-radius:50%; background:rgba(16,24,40,0.14); }
  .shot-crumb{ margin-left:6px; font-size:11px; color:#8a90a0; }
  .shot-crumb b{ color:#14141a; font-weight:700; }
  .shot-crumb i{ font-style:normal; color:#1a73ff; }
  .shot-live{ margin-left:auto; font-size:10px; font-weight:700; letter-spacing:0.08em; color:#0b6b4f; background:rgba(16,185,129,0.14); border-radius:999px; padding:4px 8px; }
  .shot-tabs{ display:flex; gap:4px; margin:11px 0 12px; background:rgba(16,24,40,0.045); border-radius:10px; padding:3px; }
  .shot-tabs span{ font-size:10.5px; color:#6b7285; padding:5px 9px; border-radius:8px; white-space:nowrap; }
  .shot-tabs span.on{ background:#fff; color:#14141a; font-weight:700; box-shadow:0 1px 3px rgba(16,24,40,0.12); }
  .kpi-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; margin-bottom:11px; }
  .kpi{ border:1px solid rgba(16,24,40,0.08); border-radius:12px; padding:9px 9px 10px; background:linear-gradient(180deg,#fff,rgba(246,249,255,0.9)); }
  .kpi u{ display:block; width:18px; height:18px; border-radius:6px; background:rgba(26,115,255,0.12); margin-bottom:7px; }
  .kpi small{ display:block; font-size:8.5px; letter-spacing:0.1em; color:#8a90a0; text-transform:uppercase; }
  .kpi b{ display:block; font-size:clamp(14px,1.35vw,19px); font-weight:700; letter-spacing:-0.02em; margin-top:2px; }
  .shot-sec{ font-size:9px; letter-spacing:0.14em; color:#8a90a0; text-transform:uppercase; margin:0 0 7px; }
  .shot-row{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:9px 11px; border-radius:11px; margin-bottom:6px;
    background:#fff; border:1px solid rgba(16,24,40,0.08);
  }
  .shot-row b{ font-size:11.5px; font-weight:700; color:#14141a; }
  .shot-row small{ display:block; font-size:9.5px; color:#8a90a0; margin-top:2px; }
  .pill-ok{ font-size:9.5px; font-weight:700; color:#0b6b4f; background:rgba(16,185,129,0.14); border-radius:999px; padding:4px 8px; white-space:nowrap; }
  .pill-warn{ font-size:9.5px; font-weight:700; color:#8a5a00; background:rgba(245,182,66,0.18); border-radius:999px; padding:4px 8px; white-space:nowrap; }
  .shot-chart{ display:flex; align-items:flex-end; gap:4px; height:46px; padding:8px 10px 0; border:1px solid rgba(16,24,40,0.08); border-radius:11px; background:#fff; }
  .shot-chart i{ flex:1; border-radius:3px 3px 0 0; background:linear-gradient(180deg,#4a9dff,#1a73ff); opacity:0.85; }
  .shot-blur{ filter:blur(4.5px); opacity:0.7; pointer-events:none; }
  .shot-veil{ text-align:center; font-size:9.5px; letter-spacing:0.14em; color:#8a90a0; margin-top:10px; }
  #tools .btn-row{ margin-top:clamp(22px,2.6vw,36px); justify-content:center; }
  .shot-slim{ margin-top:clamp(16px,1.8vw,24px); padding:11px 11px 12px; border-radius:16px; }
  .shot-slim .kpi-grid{ margin-bottom:8px; }
  .shot-slim .kpi u{ display:none; }
  .shot-slim .kpi{ padding:7px 8px 8px; }
  .shot-slim .shot-tabs{ margin:9px 0 9px; }
  .shot-slim .shot-chart{ height:48px; padding:8px 9px 0; }
  @media (max-width:1024px){ .shot-slim{ display:none; } }
  @media (max-width:1000px){ .plat-wrap{ grid-template-columns:1fr; } .plat-shot{ display:none; } }
  @media (max-width:620px){ .feat-grid{ grid-template-columns:1fr; } .feat:nth-child(n+7){ display:none; } }



  /* ---------- about us (visual proof grid) ---------- */
  #clinics .about-scrim{ position:absolute; left:0; right:0; top:0; height:52%; pointer-events:none; z-index:0;
    opacity:0; transition:opacity 600ms ease;
    background:radial-gradient(60% 100% at 50% 30%, rgba(3,7,18,0.86) 0%, rgba(3,7,18,0.55) 55%, rgba(3,7,18,0) 100%); }
  #clinics[data-state="visible"] .about-scrim{ opacity:1; }
  #clinics .top-label, #clinics h2, #clinics .lead, #clinics .proof-grid, #clinics .btn-row{ position:relative; z-index:1; }
  #clinics{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 5vw; text-align:center; z-index:10; }
  #clinics .top-label{ margin-bottom:26px; }
  #clinics h2{ margin-bottom:14px; text-shadow:0 2px 26px rgba(3,7,18,0.85), 0 1px 4px rgba(3,7,18,0.7); }
  #clinics .lead{ text-shadow:0 2px 18px rgba(3,7,18,0.9); max-width:640px; color:#fff; font-weight:500; margin:0 auto; }

  .proof-grid{
    display:grid; width:100%; max-width:1180px; margin-top:clamp(18px,2.4vw,30px);
    grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(10px,1.1vw,16px); text-align:left;
  }
  .pcard{
    position:relative; border-radius:20px; padding:clamp(14px,1.4vw,20px); overflow:hidden;
    background:linear-gradient(180deg, rgba(6,13,28,0.72), rgba(6,13,28,0.60));
    border:1px solid rgba(255,255,255,0.14); backdrop-filter:blur(20px) saturate(1.1); -webkit-backdrop-filter:blur(20px) saturate(1.1);
    box-shadow:0 24px 50px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.14);
    display:flex; flex-direction:column; gap:10px; min-height:150px;
  }
  .pcard.w2{ grid-column:span 2; }
  .pcard .pico{
    width:34px; height:34px; border-radius:11px; display:grid; place-items:center; color:#8fc4ff;
    background:rgba(96,165,250,0.16); border:1px solid rgba(147,197,253,0.30);
  }
  .pcard h4{ font-family:DM Sans, sans-serif; font-weight:600; font-size:clamp(14px,1.05vw,16px); color:#fff; letter-spacing:-0.01em; }
  .pcard p{ font-size:clamp(11.5px,0.9vw,13px); line-height:1.55; color:rgba(255,255,255,0.66); }
  .pcard .pnum{ font-family:DM Sans, sans-serif; font-weight:600; font-size:clamp(26px,3vw,40px); color:#fff; letter-spacing:-0.03em; line-height:1; }
  .pcard .plabel{ font-size:9.5px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.52); }
  .pcard .spacer{ flex:1; }

  .pbars{ display:flex; align-items:flex-end; gap:5px; height:54px; }
  .pbars i{ flex:1; border-radius:4px 4px 2px 2px; background:linear-gradient(180deg,#7fc6ff,#3b82f6); opacity:0.9; }
  .pring{ width:74px; height:74px; flex:0 0 74px; border-radius:50%; display:grid; place-items:center;
    background:conic-gradient(#60a5fa 0turn 0.97turn, rgba(255,255,255,0.14) 0.97turn 1turn); }
  .pring span{ width:56px; height:56px; border-radius:50%; background:rgba(10,18,34,0.72); display:grid; place-items:center;
    font-family:DM Sans, sans-serif; font-weight:600; font-size:15px; color:#fff; }
  .pcard-ret{ align-items:center; justify-content:center; text-align:center; gap:14px; }
  .pcard-ret .pret-txt{ display:flex; flex-direction:column; gap:6px; }
  .pmap{ position:relative; height:76px; border-radius:12px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.10); overflow:hidden; }
  .pmap i{ position:absolute; width:7px; height:7px; border-radius:50%; background:#7fc6ff; box-shadow:0 0 12px rgba(127,198,255,0.9); }
  .ptags{ display:flex; flex-wrap:wrap; gap:6px; }
  .ptags span{ font-size:10.5px; letter-spacing:0.04em; padding:5px 9px; border-radius:999px; color:rgba(255,255,255,0.82);
    background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.16); }
  .pok{ display:inline-flex; align-items:center; gap:6px; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase;
    color:#8ff0c2; background:rgba(45,212,168,0.12); border:1px solid rgba(45,212,168,0.30); border-radius:999px; padding:4px 9px; align-self:flex-start; }
  #clinics .btn-row{ margin-top:clamp(18px,2vw,26px); justify-content:center; }
  @media (max-width:1000px){ .proof-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
  @media (max-width:620px){ .proof-grid{ grid-template-columns:1fr; } .pcard.w2{ grid-column:span 1; } .pcard{ min-height:0; } }








  /* ---------- big bang glow ---------- */
  #glow{
    position:fixed; left:50%; top:50%; width:100px; height:100px; border-radius:9999px;
    transform:translate(-50%,-50%) scale(0); opacity:0; z-index:10; pointer-events:none;
    background:radial-gradient(circle, rgba(255,255,255,1) 40%, rgba(255,255,255,0) 80%);
  }

  /* ---------- nav bar ---------- */
  #nav-wrap{
    position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:60;
    display:flex; align-items:stretch; justify-content:center; gap:14px;
    max-width:calc(100vw - 360px);
    pointer-events:none;
  }
  #nav-wrap > * { pointer-events:auto; }
  #nav{
    position:relative;
    display:flex; align-items:center; justify-content:center; gap:16px;
    width:auto; flex:0 0 auto; flex-wrap:nowrap;
    height:50px;
    padding:0 12px;
    border-radius:22px;
    background:rgba(255,255,255,0.82);
    border:1px solid rgba(255,255,255,0.72);
    -webkit-backdrop-filter:blur(20px) saturate(1.6);
    backdrop-filter:blur(20px) saturate(1.6);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.9),
      0 18px 50px rgba(0,0,0,0.35);
    transition:background 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
  }
  #nav.scrolled{
    background:rgba(255,255,255,0.9);
    border-color:#fff;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.95),
      0 22px 60px rgba(0,0,0,0.45);
  }
  #brand{
    position:fixed; top:22px; left:28px; z-index:61;
    display:flex; align-items:center; gap:10px; text-decoration:none;
  }
  #brand img{ height:30px; width:auto; display:block; opacity:0.95; }
  #vetmark{
    position:fixed; top:18px; right:28px; z-index:61;
    display:flex; align-items:center; pointer-events:none;
  }
  #vetmark img{ height:54px; width:auto; display:block; opacity:0.95; filter:drop-shadow(0 4px 22px rgba(0,0,0,0.55)); }

  .nav-menu{ display:flex; align-items:center; gap:2px; }
  .nav-item{ position:relative; }
  .nav-link{
    display:inline-flex; align-items:center; gap:6px;
    background:none; border:none; cursor:pointer; color:#2b2b38;
    font-family:DM Sans, sans-serif; font-size:14px; font-weight:500;
    padding:0 14px; height:36px; border-radius:9999px; text-decoration:none; white-space:nowrap;
    transition:color 180ms ease, background 180ms ease;
  }
  .nav-link:hover, .nav-item.open .nav-link{ color:#0a0a12; background:rgba(20,20,30,0.08); }
  @media (max-width:1460px){
    #nav{ gap:8px; padding:0 10px; }
    .nav-link{ font-size:13px; padding:0 10px; height:34px; }
    .nav-link-cta{ padding:0 18px; font-size:13px; right:86px; }
  }
  @media (max-width:1260px){
    #nav-wrap{ gap:10px; }
    #nav{ gap:4px; padding:0 8px; }
    .nav-link{ font-size:12.5px; padding:0 8px; height:34px; gap:4px; }
    .nav-link-cta{ right:80px; }
  }
  .nav-link-cta{
    position:fixed; top:16px; right:92px; z-index:60;
    display:inline-flex; align-items:center; height:50px; padding:0 22px;
    border-radius:22px; border:1px solid rgba(255,255,255,0.72);
    background:rgba(14,16,28,0.72); color:#fff; font-weight:600;
    -webkit-backdrop-filter:blur(20px) saturate(1.6);
    backdrop-filter:blur(20px) saturate(1.6);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.16), 0 18px 50px rgba(0,0,0,0.35);
    pointer-events:auto;
  }
  .nav-link-cta:hover{ background:rgba(14,16,28,0.88); color:#fff; }

  .nav-link svg{ transition:transform 220ms ease; opacity:0.7; }
  .nav-item.open .nav-link svg{ transform:rotate(180deg); }

  /* ---------- mega menu ---------- */
  .dropdown{
    position:fixed; top:78px; left:50%;
    transform:translateX(-50%) translateY(-10px);
    width:min(980px, calc(100vw - 48px)); white-space:normal;
    display:grid; grid-template-columns:minmax(0,1fr) 258px; gap:16px;
    background:rgba(10,16,26,0.92);
    border:1px solid rgba(255,255,255,0.22);
    border-radius:26px; padding:14px;
    -webkit-backdrop-filter:blur(72px) saturate(1.8); -webkit-backdrop-filter:blur(72px) saturate(1.8);
    backdrop-filter:blur(72px) saturate(1.8); -webkit-backdrop-filter:blur(72px) saturate(1.8);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.22),
      0 0 0 1px rgba(127,212,255,0.12),
      0 0 80px rgba(63,125,255,0.35),
      0 34px 100px rgba(0,0,0,0.65);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity 220ms ease, transform 220ms cubic-bezier(.2,.7,.3,1), visibility 220ms;
    max-height:min(76vh, 620px); overflow-x:hidden; overflow-y:auto;
    scrollbar-width:thin; scrollbar-color:rgba(127,212,255,0.45) transparent;
  }
  .dropdown::-webkit-scrollbar{ width:8px; height:0; }
  .dropdown::-webkit-scrollbar-track{ background:transparent; }
  .dropdown::-webkit-scrollbar-thumb{ background:rgba(127,212,255,0.35); border-radius:8px; }
  .dropdown::after{
    content:''; position:absolute; inset:0; z-index:-2; pointer-events:none;
    background:radial-gradient(circle at 50% 0%, rgba(127,212,255,0.28), transparent 55%);
    filter:blur(52px); opacity:0.95;
  }
  .dropdown::before{
    content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
    background:linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02));
    -webkit-backdrop-filter:blur(40px); -webkit-backdrop-filter:blur(40px);
    backdrop-filter:blur(40px); -webkit-backdrop-filter:blur(40px);
  }
  .dropdown.compact{ width:min(720px, calc(100vw - 48px)); }
  .dropdown .gap-bridge{
    position:absolute; left:0; right:0; top:-16px; height:16px;
  }
  .nav-item.open .dropdown{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }

  .dd-main{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px 8px; }
  .dropdown.compact .dd-main{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .dd-col{ display:flex; flex-direction:column; gap:4px; min-width:0; }
  .dd-head{
    font-size:10px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase;
    color:rgba(255,255,255,0.42); padding:6px 10px 4px;
  }
  .dropdown a{
    display:flex; align-items:center; gap:12px; padding:8px; border-radius:16px;
    text-decoration:none; width:100%; white-space:normal; overflow-wrap:anywhere;
    color:#fff; font-size:13.6px; font-weight:700; min-width:0;
    border:1px solid transparent;
    transition:background 160ms ease, border-color 160ms ease;
  }
  .dropdown a:hover{
    background:rgba(255,255,255,0.10); border-color:rgba(255,255,255,0.14);
  }
  .dd-ico{
    flex:0 0 auto; display:grid; place-items:center; width:46px; height:46px; border-radius:14px;
    color:#8fd0ff; background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.12);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.14);
    transition:color 160ms ease, background 160ms ease, border-color 160ms ease;
  }
  .dropdown a:hover .dd-ico{ color:#bfe6ff; border-color:rgba(143,208,255,0.42); background:rgba(63,150,255,0.20); }
  .dd-txt{ min-width:0; display:flex; flex-direction:column-reverse; gap:1px; }
  .dropdown a .dd-label{ display:block; line-height:1.25; color:#fff; letter-spacing:-0.005em; }
  .dd-desc{
    display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
    font-size:11.5px; font-weight:400; color:rgba(255,255,255,0.52); line-height:1.3;
  }

  .dd-feature{
    display:flex; flex-direction:column; gap:10px; padding:16px; border-radius:20px;
    background:linear-gradient(160deg, rgba(63,150,255,0.24), rgba(20,40,90,0.28));
    border:1px solid rgba(255,255,255,0.14);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.16);
  }
  .dd-feature .dd-kicker{
    font-size:10.5px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:#9fd6ff;
  }
  .dd-feature p{ margin:0; font-size:12.5px; line-height:1.5; color:rgba(255,255,255,0.72); }
  .dd-feature .dd-actions{ margin-top:auto; display:flex; flex-direction:column; gap:8px; }
  .dd-feature a{
    justify-content:center; padding:11px 12px; border-radius:12px; font-size:12.8px; font-weight:700;
    background:#fff; color:#0a1220; border:1px solid rgba(255,255,255,0.5);
  }
  .dd-feature a:hover{ background:#eaf4ff; color:#0a1220; }
  .dd-feature a.ghost{
    background:rgba(255,255,255,0.08); color:#fff; border-color:rgba(255,255,255,0.22);
  }
  .dd-feature a.ghost:hover{ background:rgba(255,255,255,0.16); color:#fff; }
  @media (max-width:1100px){
    .dropdown{ grid-template-columns:minmax(0,1fr); }
    .dd-main{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  }


  .nav-cta{ display:flex; align-items:center; gap:8px; }
  .nav-ghost{
    color:#d8d8e0; text-decoration:none; font-size:14px; font-weight:500;
    padding:9px 14px; border-radius:9999px; white-space:nowrap; transition:color 180ms ease, background 180ms ease;
  }
  .nav-ghost:hover{ color:#fff; background:rgba(255,255,255,0.08); }
  .nav-btn{
    position:relative; display:inline-flex; align-items:center; gap:8px;
    height:38px; padding:0 18px; border-radius:9999px; border:none; cursor:pointer; white-space:nowrap;
    color:#fff; font-family:DM Sans, sans-serif; font-size:14px; font-weight:600;
    background:rgba(255,255,255,0.10);
    -webkit-backdrop-filter:blur(24px) saturate(1.5); -webkit-backdrop-filter:blur(24px) saturate(1.5);
    backdrop-filter:blur(24px) saturate(1.5); -webkit-backdrop-filter:blur(24px) saturate(1.5);
    transition:transform 180ms ease, background 180ms ease;
  }
  .nav-btn{ text-decoration:none; }
  .nav-btn:hover{ transform:translateY(-2px); background:rgba(255,255,255,0.16); }

  #nav-toggle{
    display:none; background:none; border:none; cursor:pointer; color:#fff; padding:8px;
  }
  #mobile-menu{
    position:fixed; top:78px; left:16px; right:16px; z-index:59;
    background:linear-gradient(rgba(255,255,255,0.22), rgba(255,255,255,0.16)), rgba(18,18,26,0.72); border:1px solid rgba(255,255,255,0.28);
    border-radius:20px; padding:12px; display:grid; gap:2px;
    -webkit-backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
    backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
    opacity:0; visibility:hidden; transform:translateY(-10px);
    transition:opacity 220ms ease, transform 220ms ease, visibility 220ms;
    max-height:78vh; overflow-y:auto;
  }
  #mobile-menu.open{ opacity:1; visibility:visible; transform:translateY(0); }
  #mobile-menu .m-group{ padding:10px 12px 4px; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:rgba(255,255,255,0.6); }
  #mobile-menu a{ display:block; padding:11px 12px; border-radius:12px; color:#fff; text-decoration:none; font-size:15px; }
  #mobile-menu a:hover{ background:rgba(255,255,255,0.22); }
  #mobile-menu .m-cta{ margin-top:8px; text-align:center; background:rgba(255,255,255,0.1); font-weight:600; }

  @media (max-width:1100px){
    .nav-menu{ display:none; }
    #nav-toggle{ display:inline-flex; }
    #nav-wrap{ top:14px; left:50%; max-width:calc(100vw - 24px); }
    #nav{ padding:7px 8px; gap:10px; max-width:100%; }
    .nav-link-cta{ display:none; }
    #brand{ top:18px; left:16px; }
    #brand img{ height:24px; }
    #vetmark{ top:14px; right:16px; }
    #vetmark img{ height:44px; }
  }

  /* ================= phone navigation ================= */
  #menu-scrim{
    position:fixed; inset:0; z-index:58; background:rgba(4,8,18,0.58);
    -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
    opacity:0; visibility:hidden; transition:opacity 240ms ease, visibility 240ms;
    display:none;
  }
  #menu-scrim.open{ opacity:1; visibility:visible; }

  @media (max-width:700px){
    /* one unified translucent header rail: logo left, vet mark + menu right */
    #menu-scrim{ display:block; }
    #nav-wrap{
      top:10px; left:10px; right:10px; transform:none; width:auto; max-width:none;
      justify-content:flex-end; gap:0; pointer-events:none;
    }
    #nav{
      pointer-events:auto;
      width:100%; max-width:none; justify-content:flex-end; align-items:center;
      height:56px; padding:0 8px 0 0; border-radius:18px;
      background:rgba(255,255,255,0.10);
      border:1px solid rgba(255,255,255,0.16);
      box-shadow:0 14px 40px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.18);
      -webkit-backdrop-filter:blur(22px) saturate(1.5); backdrop-filter:blur(22px) saturate(1.5);
    }
    #brand{ top:22px; left:22px; z-index:61; }
    #brand img{ height:22px; }
    #vetmark{ top:19px; right:70px; z-index:61; }
    #vetmark img{ height:38px; }
    #nav-toggle{
      width:42px; height:42px; padding:0; border-radius:13px;
      align-items:center; justify-content:center;
      background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.22);
      color:#fff; transition:background 180ms ease, transform 180ms ease;
    }
    #nav-toggle:active{ transform:scale(0.94); }
    #nav-toggle svg{ width:20px; height:20px; }
    #nav-toggle .ic-x{ display:none; }
    #nav-toggle[aria-expanded="true"] .ic-bars{ display:none; }
    #nav-toggle[aria-expanded="true"] .ic-x{ display:block; }
    #nav-toggle[aria-expanded="true"]{ background:rgba(255,255,255,0.24); }


    /* full-height sheet */
    #mobile-menu{
      top:76px; left:10px; right:10px; z-index:60;
      max-height:calc(100dvh - 96px);
      padding:10px 10px 0;
      border-radius:24px;
      background:linear-gradient(180deg, rgba(24,46,86,0.86), rgba(8,14,28,0.94));
      border:1px solid rgba(255,255,255,0.16);
      box-shadow:0 30px 80px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.16);
      -webkit-backdrop-filter:blur(30px) saturate(1.6); backdrop-filter:blur(30px) saturate(1.6);
      transform:translateY(-14px) scale(0.985); transform-origin:top center;
      overscroll-behavior:contain;
      display:flex; flex-direction:column; gap:0;
    }
    #mobile-menu.open{ transform:translateY(0) scale(1); }
    #mobile-menu .m-group{
      padding:16px 12px 6px; font-size:10px; letter-spacing:0.16em;
      color:rgba(150,205,255,0.85); font-weight:700;
    }
    #mobile-menu .m-group:first-of-type{ padding-top:10px; }
    #mobile-menu a{
      position:relative; display:flex; align-items:center; min-height:48px;
      padding:12px 40px 12px 12px; border-radius:14px;
      font-size:15.5px; font-weight:500; letter-spacing:-0.01em;
      color:rgba(255,255,255,0.94);
      border-bottom:1px solid rgba(255,255,255,0.06);
    }
    #mobile-menu a:last-of-type{ border-bottom:none; }
    #mobile-menu a::after{
      content:''; position:absolute; right:16px; top:50%;
      width:7px; height:7px; margin-top:-4px;
      border-right:1.6px solid rgba(255,255,255,0.34);
      border-top:1.6px solid rgba(255,255,255,0.34);
      transform:rotate(45deg);
    }
    #mobile-menu a:active{ background:rgba(255,255,255,0.12); }
    #mobile-menu .m-cta{
      position:sticky; bottom:0; margin:12px -10px 0; padding:16px 12px;
      min-height:60px; justify-content:center; border-radius:0 0 24px 24px;
      border-bottom:none; font-weight:700; font-size:15px; color:#04121f;
      background:linear-gradient(180deg, #eaf6ff, #ffffff);
      box-shadow:0 -14px 30px rgba(6,12,26,0.5);
    }
    #mobile-menu .m-cta::after{ display:none; }
    #mobile-menu .m-cta:active{ background:#dceeff; }
  }


  /* React overlays (cookie banner, newsletter modal) live inside .vsa-home-root,
     so the reset above zeroes their padding and spacing. Restore it here. */
  .vsa-home-root .vsa-cookie { padding:16px 18px; }
  .vsa-home-root .vsa-cookie-actions button { padding:0 20px; }
  .vsa-home-root .vsa-modal { padding:24px; }
  .vsa-home-root .vsa-modal-panel { padding:30px; }
  .vsa-home-root .vsa-modal-panel input { padding:11px 14px; }
  .vsa-home-root .vsa-modal-panel .mt-2 { margin-top:0.5rem; }
  .vsa-home-root .vsa-modal-panel .mt-3 { margin-top:0.75rem; }
  .vsa-home-root .vsa-modal-panel .mt-4 { margin-top:1rem; }
  .vsa-home-root .vsa-modal-panel .mt-6 { margin-top:1.5rem; }
  .vsa-home-root .vsa-modal-panel .vsa-btn { padding:0 28px; }
  @media (max-width:640px) {
    .vsa-home-root .vsa-cookie { padding:16px; }
    .vsa-home-root .vsa-cookie-actions { width:100%; }
    .vsa-home-root .vsa-cookie-actions button { flex:1; }
    .vsa-home-root .vsa-modal-panel { padding:24px; }
  }

  /* ================= phone: normal document flow ================= */
  /* On phones the fixed, scroll driven scenes clipped their own content and the
     footer floated in early. Below 700px every scene becomes a normal stacked
     block, always visible, so the page scrolls natively top to bottom and the
     footer sits where it belongs, at the very end. */
  @media (max-width:700px){
    .spacer{ height:0; }

    .vsa-home-root .overlay{
      position:relative; inset:auto;
      height:auto; min-height:0;
      width:100%;
      display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
      opacity:1 !important; visibility:visible !important;
      pointer-events:auto !important;
      overflow:visible;
      padding:64px 18px;
      text-align:center;
      z-index:10;
    }
    .vsa-home-root #hero{ padding-top:132px; padding-bottom:72px; min-height:100dvh; justify-content:center; }

    /* reveal + title animations would leave content invisible in flow mode */
    .vsa-home-root .reveal{ opacity:1 !important; transform:none !important; }
    .vsa-home-root .char,
    .vsa-home-root .char.in,
    .vsa-home-root .char.out{ opacity:1 !important; transform:none !important; filter:none !important; }

    /* stat cards: the 3D carousel cannot work in flow, stack them instead */
    #dna{
      position:relative; inset:auto; perspective:none;
      opacity:1 !important; pointer-events:auto;
      display:flex; flex-direction:column; gap:14px;
      padding:8px 18px 56px;
    }
    #dna[data-hidden]{ opacity:1 !important; }
    .dna-card{
      position:relative !important; left:auto !important; top:auto !important;
      width:auto !important; max-width:none !important;
      transform:none !important; opacity:1 !important; z-index:auto !important;
    }

    #wave{ flex-direction:column; gap:22px; text-align:left; align-items:stretch; }
    #wave .lead{ margin-bottom:22px; }
    #wave .col-left, #wave .col-right{ width:100%; }

    #hero .top-label{ margin-bottom:22px; }
    #hero h1{ margin-bottom:16px; }
    #hero .lead{ margin-bottom:26px; }
    #hero .partner-badge{ margin-top:18px; }

    /* Mobile flow needs explicit rhythm because the scoped reset removes all
       browser heading and paragraph margins. Keep every eyebrow, heading,
       supporting line and CTA as a distinct block. */
     .vsa-home-root #wave .top-label,
     .vsa-home-root #services-preview .top-label,
     .vsa-home-root #tools .top-label,
     .vsa-home-root #clinics .top-label,
     .vsa-home-root #galaxy .top-label{ margin-bottom:22px; }
     .vsa-home-root #wave h2,
     .vsa-home-root #services-preview h2,
     .vsa-home-root #tools h2,
     .vsa-home-root #clinics h2,
     .vsa-home-root #galaxy h2{ margin-bottom:20px; }
     .vsa-home-root #services-preview .lead{ margin-bottom:26px; }
     .vsa-home-root #tools .lead{ margin-bottom:30px; }
     .vsa-home-root #clinics .lead{ margin-bottom:30px; }
     .vsa-home-root #galaxy{ gap:0; }
     .vsa-home-root #galaxy .lead{ margin-top:30px; margin-bottom:30px; }
     .vsa-home-root #services-preview .btn-primary,
     .vsa-home-root #tools .btn-row,
     .vsa-home-root #clinics .btn-row{ margin-top:32px; }

     .btn-row{ gap:10px; flex-wrap:wrap; justify-content:center; }
     .btn-primary, .btn-secondary{ height:48px; font-size:14px; }
     .btn-primary{ padding:0 12px 0 22px; }
     .btn-secondary{ padding:0 22px; }

     .site-footer{ position:relative; z-index:40; padding-bottom:120px; }

     /* consistent vertical rhythm between stacked scenes (id specificity beats
        the desktop rules that zero these paddings out) */
     .vsa-home-root #wave,
     .vsa-home-root #services-preview,
     .vsa-home-root #tools,
     .vsa-home-root #clinics,
     .vsa-home-root #galaxy{ padding:72px 18px; }
     .vsa-home-root #wave,
     .vsa-home-root #services-preview,
     .vsa-home-root #tools,
     .vsa-home-root #clinics{ padding-top:72px; padding-bottom:72px; }
     .vsa-home-root #services-preview{ display:flex; flex-direction:column; align-items:stretch; gap:26px; text-align:left; }
     /* intro dissolves into the column so the CTA can sit after the service list */
     .vsa-home-root #services-preview .services-intro{ display:contents; max-width:none; }
     .vsa-home-root #services-preview .services-intro>*{ order:1; }
     .vsa-home-root #services-preview .services-orbit{ order:2; }
     .vsa-home-root #services-preview .services-intro>.btn-primary{ order:3; align-self:center; }

     .vsa-home-root #services-preview .services-orbit{ display:grid; position:relative; width:100%; aspect-ratio:auto; gap:10px; filter:none; }
     .vsa-home-root #services-preview .service-axis,
     .vsa-home-root #services-preview .services-orbit::before,
     .vsa-home-root #services-preview .services-orbit::after{ display:none; }
     .vsa-home-root #services-preview .service-core{ position:relative; left:auto; top:auto; translate:none; width:100%; aspect-ratio:auto; min-height:118px; border-radius:18px; padding:20px; display:flex; align-items:center; justify-content:space-between; gap:14px; text-align:left; }
     .vsa-home-root #services-preview .service-core>span:last-child{ max-width:120px; }
     .vsa-home-root #services-preview .core-pulse{ display:none; }
     .vsa-home-root #services-preview .service-node{ position:relative; left:auto; top:auto; width:100%; min-height:62px; transform:none; animation:none; }
     .vsa-home-root #services-preview .service-node:hover{ transform:none; }
     .vsa-home-root #services-preview .service-node small{ white-space:normal; }
     .vsa-home-root #dna{ padding:8px 18px 56px; }
  }



/* ---------- industries showcase: floating orbit ---------- */
#serve{
  display:grid; grid-template-columns:minmax(260px,0.85fr) minmax(0,1.15fr);
  grid-template-rows:auto auto;
  grid-template-areas:
    "intro orbit"
    "cta   orbit";
  align-items:center; align-content:center; justify-content:center;
  gap:clamp(20px,3vw,48px) clamp(24px,4vw,64px);
  padding:calc(96px + env(safe-area-inset-top,0px)) 6vw 72px; text-align:left; z-index:10;
}

#serve .serve-intro{ grid-area:intro; max-width:440px; align-self:center; }
#serve .serve-cta{ grid-area:cta; pointer-events:auto; justify-self:start; align-self:start; margin-top:-12px; }
#serve .serve-orbit{ grid-area:orbit; align-self:center; }
#serve .top-label{ margin-bottom:24px; }
#serve h2{ max-width:460px; margin-bottom:20px; }
#serve .lead{ max-width:420px; margin-bottom:28px; color:#fff; }

.serve-orbit{
  position:relative; width:min(600px,46vw,72vh); aspect-ratio:1/0.92; margin-inline:auto; pointer-events:none;
}
.orbit-ring{
  position:absolute; left:50%; top:50%; translate:-50% -50%; border-radius:50%;
  border:1px solid rgba(127,212,255,0.16);
}
.orbit-ring.o1{ width:36%; height:39%; border-style:solid; }
.orbit-ring.o2{ width:64%; height:69%; border-style:dashed; border-color:rgba(127,212,255,0.13); animation:orbitSpin 46s linear infinite; }
.orbit-ring.o3{ width:92%; height:99%; border-color:rgba(127,212,255,0.08); animation:orbitSpin 78s linear reverse infinite; }
@keyframes orbitSpin{ to{ rotate:360deg; } }

.serve-core{
  position:absolute; left:50%; top:50%; translate:-50% -50%; z-index:2;
  width:32%; aspect-ratio:1; border-radius:50%; display:grid; place-content:center; text-align:center; gap:4px;
  border:1px solid rgba(255,255,255,0.2);
  background:radial-gradient(circle at 50% 30%,rgba(87,177,255,0.34),rgba(4,13,30,0.6) 70%);
  box-shadow:0 0 60px rgba(71,143,255,0.28), inset 0 1px 0 rgba(255,255,255,0.2);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  animation:coreBreath 6s ease-in-out infinite;
}
.serve-core strong{ font:600 clamp(24px,2.6vw,34px)/1 DM Sans,sans-serif; color:#fff; }
.serve-core small{ display:block; max-width:150px; margin:0 auto; color:rgba(255,255,255,0.6); font:400 10.5px/1.35 DM Sans,sans-serif; }
@keyframes coreBreath{ 0%,100%{ box-shadow:0 0 50px rgba(71,143,255,0.22), inset 0 1px 0 rgba(255,255,255,0.2); } 50%{ box-shadow:0 0 88px rgba(71,143,255,0.42), inset 0 1px 0 rgba(255,255,255,0.24); } }

.serve-pod{
  position:absolute; left:var(--x); top:var(--y); z-index:3; pointer-events:auto;
  width:min(224px,38%); display:flex; align-items:center; gap:11px; padding:12px 13px;
  border:1px solid rgba(255,255,255,0.16); border-radius:16px; color:#fff; text-decoration:none; overflow:hidden;
  background:linear-gradient(150deg,rgba(255,255,255,0.13),rgba(4,13,30,0.5));
  box-shadow:0 20px 50px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.16);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  transform:translate(-50%,-50%);
  animation:podFloat 9s ease-in-out infinite; animation-delay:var(--d);
  transition:border-color 240ms ease, box-shadow 240ms ease, scale 240ms cubic-bezier(0.23,1,0.32,1);
}
@keyframes podFloat{
  0%,100%{ transform:translate(-50%,-50%) translate3d(0,0,0); }
  50%{ transform:translate(-50%,-50%) translate3d(0,-13px,0); }
}
.pod-glow{ position:absolute; inset:0; opacity:0; transition:opacity 240ms ease;
  background:radial-gradient(120% 120% at 0% 0%,rgba(87,177,255,0.34),transparent 62%); }
.serve-pod:hover{ border-color:rgba(127,212,255,0.6); scale:1.05; box-shadow:0 26px 70px rgba(9,52,110,0.55), inset 0 1px 0 rgba(255,255,255,0.24); }
.serve-pod:hover .pod-glow{ opacity:1; }
.serve-pod > *{ position:relative; z-index:1; }
.pod-ic{ flex:none; display:grid; place-items:center; width:36px; height:36px; border-radius:11px;
  border:1px solid rgba(127,212,255,0.42); background:rgba(71,143,255,0.16); color:#7fd4ff; }
.pod-txt{ min-width:0; }
.pod-txt strong{ display:block; font:600 13px/1.25 DM Sans,sans-serif; }
.pod-txt small{ display:block; margin-top:3px; color:rgba(255,255,255,0.58); font:400 10.5px/1.3 DM Sans,sans-serif; }
.pod-go{ flex:none; margin-left:auto; color:#7fd4ff; opacity:0; translate:-5px 0; transition:opacity 200ms ease, translate 200ms ease; }
.serve-pod:hover .pod-go{ opacity:1; translate:0 0; }

@media (prefers-reduced-motion:reduce){
  .serve-pod,.orbit-ring,.serve-core{ animation:none; }
  .serve-pod,.pod-glow,.pod-go{ transition:none; }
}
@media (max-width:1180px){
  #serve{ gap:24px; padding:0 4vw; }
  .serve-orbit{ width:min(560px,52vw,68vh); }
  .serve-pod{ width:min(200px,42%); padding:11px; }
}
@media (max-width:900px) and (min-width:701px){
  #serve{ grid-template-columns:1fr; justify-items:center; text-align:center; gap:18px; }
  #serve .serve-intro{ max-width:560px; }
  .serve-orbit{ width:min(520px,84vw,52vh); }
}
@media (max-width:700px){
  .vsa-home-root #serve{
    display:flex; flex-direction:column; align-items:stretch; gap:28px; padding:72px 18px; text-align:left;
  }
  .vsa-home-root #serve .serve-intro{ max-width:none; align-self:stretch; }
  .vsa-home-root #serve h2{ margin-bottom:20px; }
  .vsa-home-root #serve .lead{ margin-bottom:26px; }
  .vsa-home-root #serve .serve-cta{ align-self:center; margin-top:0; order:99; }
  .vsa-home-root .serve-orbit{ position:static; width:100%; aspect-ratio:auto; display:flex; flex-direction:column; gap:10px; }
  .vsa-home-root .orbit-ring{ display:none; }
  .vsa-home-root .serve-core{ position:static; translate:none; width:100%; aspect-ratio:auto; border-radius:18px;
    padding:18px; display:flex; align-items:center; justify-content:space-between; gap:14px; text-align:left; }
  .vsa-home-root .serve-core small{ margin:0; max-width:180px; }
  .vsa-home-root .serve-pod{ position:static; width:100%; transform:none; animation:none; }
  .vsa-home-root .serve-pod .pod-go{ opacity:1; translate:0 0; }
}