/* ============================================================================
   Sentinel Core Vision — marketing site design system
   Premium dark theme. Restrained: near-black canvas, white text, ONE cyan accent,
   magenta reserved for the gradient CTA + subtle glow. No rainbow gradients.
   ========================================================================== */

:root{
  /* canvas */
  --bg:           #07070D;
  --bg-2:         #0B0B15;
  --panel:        #0E0F1A;
  --panel-2:      #12131F;
  --hair:         rgba(255,255,255,.07);
  --hair-2:       rgba(255,255,255,.11);

  /* text */
  --text:         #EDEEF7;
  --muted:        #9A9CB8;
  --dim:          #62647F;

  /* brand */
  --cyan:         #00E5FF;
  --cyan-deep:    #00B8D4;
  --magenta:      #FF3DDB;
  --grad:         linear-gradient(100deg, #00E5FF 0%, #6A8Cff 48%, #FF3DDB 100%);
  --grad-soft:    linear-gradient(100deg, rgba(0,229,255,.16), rgba(255,61,219,.16));

  /* violet co-accent — pulled from the hero banner; cyan stays primary, violet is the duotone partner */
  --violet:       #8B5CF6;
  --violet-deep:  #6D28D9;
  --lilac:        #C4B5FD;
  --violet-glow:  rgba(139,92,246,.22);
  --grad-vio:     linear-gradient(120deg, #00E5FF 0%, #7C5CFF 55%, #C084FC 100%);
  --grad-river:   linear-gradient(90deg, #00E5FF 0%, #7C5CFF 50%, #FF3DDB 100%);
  --grad-vio-soft:linear-gradient(120deg, rgba(0,229,255,.14), rgba(139,92,246,.16));
  --shadow-vio:   0 0 0 1px rgba(139,92,246,.16), 0 34px 90px -34px rgba(124,92,255,.42);

  /* status */
  --green:        #2BE08B;

  /* type */
  --font:         "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  --display:      "Space Grotesk", "Inter", -apple-system, "Segoe UI", sans-serif;

  /* rhythm */
  --maxw:         1160px;
  --radius:       16px;
  --radius-sm:    10px;
  --shadow:       0 24px 70px -24px rgba(0,0,0,.7);
  --shadow-glow:  0 0 0 1px rgba(0,229,255,.12), 0 30px 80px -30px rgba(0,229,255,.22);
  --ease:         cubic-bezier(.22,.61,.36,1);

  /* --- extended scales (design-system foundation) --- */
  --red:#FF6B7A; --danger:#FF6B7A; --amber:#FFB84D;
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.5rem; --space-6:2rem; --space-7:3rem; --space-8:4rem; --space-9:6rem;
  --r-xs:6px; --r-sm:10px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-pill:100px;
  --fs-xs:clamp(.78rem, .75rem + .2vw, .85rem);
  --fs-sm:clamp(.85rem, .82rem + .2vw, .92rem);
  --fs-lead:clamp(1.05rem, 1rem + .6vw, 1.2rem);
  --section-y:clamp(3.5rem, 8vw, 7.75rem);
  --maxw-prose:72ch; --maxw-wide:1320px;
}

/* ---- reset ---------------------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
/* the hidden attribute must always win, even over components that set display:flex/grid */
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none}
ul{list-style:none}
::selection{background:rgba(0,229,255,.25);color:#fff}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:4px}

/* ambient glow behind everything */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(820px 520px at 82% -8%, rgba(0,229,255,.10), transparent 60%),
    radial-gradient(720px 560px at 12% 2%,  rgba(139,92,246,.13), transparent 58%),
    radial-gradient(620px 480px at 46% -14%, rgba(124,92,255,.08), transparent 60%),
    radial-gradient(560px 460px at 6% 10%,  rgba(255,61,219,.06), transparent 55%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(circle at 50% 0%, #000 0%, transparent 70%);
          mask-image:radial-gradient(circle at 50% 0%, #000 0%, transparent 70%);
}

/* ---- layout --------------------------------------------------------------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 max(24px,env(safe-area-inset-right)) 0 max(24px,env(safe-area-inset-left))}
.section{padding:var(--section-y) 0}
.section-sm{padding:84px 0}
.center{text-align:center}
.eyebrow{
  display:inline-block;font-family:var(--font);font-size:12px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);
  padding:6px 14px;border:1px solid rgba(0,229,255,.22);border-radius:100px;
  background:rgba(0,229,255,.05);margin-bottom:20px;
}
.h1{font-family:var(--display);font-weight:700;font-size:clamp(2.4rem,5.4vw,4.1rem);line-height:1.04;letter-spacing:-.02em}
.h2{font-family:var(--display);font-weight:700;font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.08;letter-spacing:-.02em}
.h3{font-family:var(--display);font-weight:600;font-size:1.28rem;letter-spacing:-.01em}
.lead{font-size:clamp(1.05rem,1.5vw,1.2rem);color:var(--muted);max-width:62ch}
.muted{color:var(--muted)}
.dim{color:var(--dim)}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.section-head{max-width:680px;margin:0 auto 56px}
.section-head.center{text-align:center}
.section-head .h2{margin-bottom:16px}

/* ---- buttons -------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-weight:600;font-size:15px;line-height:1;
  padding:14px 24px;border-radius:12px;border:1px solid transparent;
  transition:transform .18s var(--ease), box-shadow .25s var(--ease), background .2s, border-color .2s, color .2s;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-primary{
  background:var(--grad);color:#04121A;font-weight:700;
  box-shadow:0 10px 30px -10px rgba(0,229,255,.5);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 44px -12px rgba(0,229,255,.6)}
.btn-ghost{background:rgba(255,255,255,.03);color:var(--text);border-color:var(--hair-2)}
.btn-ghost:hover{background:rgba(255,255,255,.06);border-color:rgba(0,229,255,.4);color:#fff}
.btn-lg{padding:17px 30px;font-size:16px}
.btn-block{width:100%;justify-content:center}

/* ---- nav ------------------------------------------------------------------ */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(7,7,13,.72);backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--hair);
  padding-top:env(safe-area-inset-top);
}
.nav-inner{display:flex;align-items:center;gap:28px;height:68px;max-width:var(--maxw);margin:0 auto;padding:0 max(24px,env(safe-area-inset-right)) 0 max(24px,env(safe-area-inset-left))}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.01em;white-space:nowrap;flex:none}
.brand .mark{
  width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
  font-size:13px;font-weight:800;color:#04121A;background:var(--grad);
  box-shadow:0 6px 18px -6px rgba(0,229,255,.6);
}
.brand .mark-text{color:#fff}
.brand .mark-text b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav-links{display:flex;align-items:center;gap:6px;margin-left:auto}
.nav-links a{
  font-size:14.5px;font-weight:500;color:var(--muted);padding:9px 14px;border-radius:9px;
  transition:color .15s, background .15s;
}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,.05)}
.nav-links a.active{color:#fff}
.nav-cta{display:flex;align-items:center;gap:10px;margin-left:14px}
.nav-cta .btn{padding:10px 18px;font-size:14px}
.nav-toggle{display:none;margin-left:auto;width:44px;height:44px;border-radius:10px;border:1px solid var(--hair-2);color:var(--text);font-size:20px;align-items:center;justify-content:center}
.discord-link{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:14px;font-weight:500;padding:9px 12px;border-radius:9px}
.discord-link:hover{color:#fff;background:rgba(88,101,242,.14)}

/* ---- hero ----------------------------------------------------------------- */
.hero{position:relative;padding:96px 0 60px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{margin-bottom:22px}
.hero .lead{margin-bottom:32px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero-note{margin-top:20px;display:flex;align-items:center;gap:10px;color:var(--dim);font-size:13.5px}
.hero-note .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}
.hero-shot{position:relative}
.shot-frame{
  border-radius:var(--radius);border:1px solid var(--hair-2);overflow:hidden;
  background:var(--panel);box-shadow:var(--shadow);
  transform:perspective(1600px) rotateY(-8deg) rotateX(2deg);
  transition:transform .5s var(--ease);
}
.shot-frame:hover{transform:perspective(1600px) rotateY(-3deg) rotateX(1deg)}
.shot-frame .bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#0a0a14;border-bottom:1px solid var(--hair)}
.shot-frame .bar i{width:11px;height:11px;border-radius:50%;background:#22232f;display:block}
.shot-frame .bar i:nth-child(1){background:#ff5f57}.shot-frame .bar i:nth-child(2){background:#febc2e}.shot-frame .bar i:nth-child(3){background:#28c840}
.shot-frame .bar span{margin-left:8px;font-size:12px;color:var(--dim)}
.shot-frame img{width:100%;display:block}
.hero-glow{position:absolute;inset:-40px -20px;z-index:-1;background:radial-gradient(closest-side, rgba(0,229,255,.22), transparent 70%);filter:blur(20px)}

/* logo strip / trust */
.trust{padding:34px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.trust-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 40px;color:var(--dim);font-size:13px;font-weight:600;letter-spacing:.04em}
.trust-row .stat{display:flex;align-items:baseline;gap:8px}
.trust-row .stat b{font-family:var(--display);font-size:22px;color:var(--text);font-weight:700}

/* ---- feature grid --------------------------------------------------------- */
.grid{display:grid;gap:22px}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-2{grid-template-columns:repeat(2,1fr)}
.card{
  background:linear-gradient(180deg, var(--panel), var(--bg-2));
  border:1px solid var(--hair);border-radius:var(--radius);padding:28px;
  transition:transform .2s var(--ease), border-color .2s, box-shadow .25s;
}
.card:hover{transform:translateY(-4px);border-color:var(--hair-2);box-shadow:var(--shadow)}
.card .ico{
  width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:20px;margin-bottom:18px;
  background:var(--grad-soft);border:1px solid rgba(0,229,255,.2);
}
.card h3{margin-bottom:9px}
.card p{color:var(--muted);font-size:15px}
.card .why{margin-top:14px;padding-top:14px;border-top:1px solid var(--hair);font-size:13.5px;color:var(--cyan)}

/* split feature rows */
.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center;padding:46px 0}
.feature-row.flip .feat-copy{order:2}
.feature-copy .h2{margin:14px 0 16px}
.feature-copy ul.checks{margin-top:22px;display:flex;flex-direction:column;gap:12px}
.feature-copy ul.checks li{display:flex;gap:12px;align-items:flex-start;color:var(--muted);font-size:15px}
.feature-copy ul.checks li::before{content:"";flex:none;width:20px;height:20px;margin-top:2px;border-radius:50%;background:var(--grad-soft);border:1px solid rgba(0,229,255,.35);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300E5FF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:12px}

/* ---- steps ---------------------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:step}
.step{position:relative;padding:28px;border:1px solid var(--hair);border-radius:var(--radius);background:var(--panel)}
.step .n{font-family:var(--display);font-size:14px;font-weight:700;color:#04121A;width:34px;height:34px;border-radius:10px;background:var(--grad);display:grid;place-items:center;margin-bottom:16px}
.step h3{margin-bottom:8px;font-size:1.1rem}
.step p{color:var(--muted);font-size:14.5px}

/* ---- pricing -------------------------------------------------------------- */
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:24px;max-width:1120px;margin:0 auto}
.price{position:relative;background:linear-gradient(180deg,var(--panel),var(--bg-2));border:1px solid var(--hair);border-radius:20px;padding:34px}
.price.featured{border-color:rgba(0,229,255,.4);box-shadow:var(--shadow-glow)}
.price .tag{position:absolute;top:-12px;right:24px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#04121A;background:var(--grad);padding:5px 12px;border-radius:100px}
.price .plan{font-family:var(--display);font-weight:600;font-size:1.2rem;margin-bottom:6px}
.price .desc{color:var(--muted);font-size:14px;margin-bottom:22px;min-height:40px}
.price .amount{display:flex;align-items:flex-end;gap:6px;margin-bottom:4px}
.price .amount .num{font-family:var(--display);font-weight:700;font-size:3rem;line-height:1;letter-spacing:-.02em}
.price .amount .per{color:var(--dim);font-size:14px;margin-bottom:8px}
.price .sub{color:var(--dim);font-size:13px;margin-bottom:26px}
.price ul.feats{display:flex;flex-direction:column;gap:13px;margin-bottom:30px}
.price ul.feats li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--muted)}
.price ul.feats li::before{content:"";flex:none;width:18px;height:18px;margin-top:1px;border-radius:50%;background:rgba(0,229,255,.1);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300E5FF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:11px}

/* ---- FAQ accordion -------------------------------------------------------- */
.faq{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.qa{border:1px solid var(--hair);border-radius:var(--radius-sm);background:var(--panel);overflow:hidden;transition:border-color .2s}
.qa[open]{border-color:var(--hair-2)}
.qa summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 22px;cursor:pointer;font-weight:600;font-size:16px;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary .chev{flex:none;width:22px;height:22px;color:var(--cyan);transition:transform .25s var(--ease)}
.qa[open] summary .chev{transform:rotate(180deg)}
.qa .a{padding:0 22px 22px;color:var(--muted);font-size:15px}

/* ---- CTA band ------------------------------------------------------------- */
.cta-band{position:relative;border:1px solid rgba(0,229,255,.2);border-radius:24px;padding:60px 40px;text-align:center;overflow:hidden;background:linear-gradient(180deg,#0b1320,#0a0a14)}
.cta-band::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(600px 300px at 50% -30%, rgba(0,229,255,.18), transparent 70%)}
.cta-band>*{position:relative;z-index:1}
.cta-band .h2{margin-bottom:14px}
.cta-band .lead{margin:0 auto 28px}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---- footer --------------------------------------------------------------- */
.footer{border-top:1px solid var(--hair);padding:64px 0 38px;margin-top:40px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px}
.footer .brand{margin-bottom:16px}
.footer-about p{color:var(--muted);font-size:14.5px;max-width:34ch}
.footer-col h4{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:16px;font-weight:600}
.footer-col a{display:block;color:var(--muted);font-size:14.5px;padding:6px 0;transition:color .15s}
.footer-col a:hover{color:var(--cyan)}
.footer-bottom{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;padding-top:26px;border-top:1px solid var(--hair);color:var(--dim);font-size:13px}
.footer-bottom .legal{display:flex;flex-wrap:wrap;gap:12px 20px}
.footer-bottom .legal a:hover{color:var(--muted)}
.disclaimer{margin-top:18px;color:#4a4c63;font-size:12px;line-height:1.6;max-width:90ch}

/* ---- page header (interior pages) ----------------------------------------- */
.page-head{padding:74px 0 10px;text-align:center}
.page-head .h1{font-size:clamp(2.1rem,4.4vw,3.3rem);margin-bottom:16px}
.page-head .lead{margin:0 auto}

/* ---- misc ----------------------------------------------------------------- */
.divider{height:1px;background:var(--hair);border:0;margin:0}
.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:100px;border:1px solid var(--hair-2);background:var(--panel);font-size:13px;color:var(--muted)}
.kbd{font-family:"Consolas",monospace;background:var(--panel-2);border:1px solid var(--hair-2);border-radius:6px;padding:2px 8px;font-size:13px;color:var(--cyan)}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* overflow safety — stop grid/flex children (esp. ones holding screenshots) from blowing
   out wider than the viewport, which would clip the whole page on small screens */
html,body{max-width:100%;overflow-x:clip}
.hero-grid>*,.feature-row>*,.grid>*,.price-grid>*,.steps>*,.footer-grid>*,.trust-row>*{min-width:0}
.shot-frame{max-width:100%}
.shot-frame .bar{min-width:0}
.shot-frame .bar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.h1,.h2,.h3{overflow-wrap:break-word}

/* ============================================================================
   ELEVATION LAYER — motion, billboard metrics, trust badges, story, gallery
   ========================================================================== */
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes blobDrift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(38px,-26px) scale(1.1)}66%{transform:translate(-26px,20px) scale(.93)}}
@keyframes glowPulse{0%,100%{box-shadow:0 12px 34px -12px rgba(0,229,255,.55)}50%{box-shadow:0 18px 52px -10px rgba(0,229,255,.8),0 0 28px -6px rgba(255,61,219,.45)}}
.floaty{animation:floatY 7.5s var(--ease) infinite}
.btn-primary.glow{animation:glowPulse 4.2s ease-in-out infinite}

/* animated ambient blobs (.blobs > .blob.b1/.b2/.b3 inside a positioned section) */
.blobs{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(64px);opacity:.5;will-change:transform}
.blob.b1{width:520px;height:520px;top:-180px;right:-90px;background:radial-gradient(circle,rgba(0,229,255,.5),transparent 65%);animation:blobDrift 19s ease-in-out infinite}
.blob.b2{width:440px;height:440px;top:90px;left:-150px;background:radial-gradient(circle,rgba(255,61,219,.42),transparent 65%);animation:blobDrift 23s ease-in-out infinite reverse}
.blob.b3{width:380px;height:380px;bottom:-160px;left:42%;background:radial-gradient(circle,rgba(106,140,255,.4),transparent 65%);animation:blobDrift 27s ease-in-out infinite}

/* centered hero with a big product shot below */
.hero-c{position:relative;text-align:center;padding:90px 0 0}
.hero-c .eyebrow{margin-bottom:24px}
.hero-c .lead{margin:0 auto 32px}
.hero-c .hero-actions{justify-content:center}
.hero-c .hero-note{justify-content:center}
.hero-big{position:relative;margin:60px auto 0;max-width:1120px;perspective:2200px}
.hero-big .shot-frame{transform:rotateX(4deg);transform-origin:center top;transition:transform .4s var(--ease)}
.hero-big .shot-frame:hover{transform:rotateX(1deg)}
.hero-big .hero-glow{inset:-70px -50px;background:radial-gradient(closest-side, rgba(0,229,255,.26), transparent 70%)}

/* billboard metrics */
.metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:20px}
.metric{text-align:center;padding:18px 10px}
.metric .big{display:block;font-family:var(--display);font-weight:700;font-size:clamp(2.7rem,5.8vw,4.6rem);line-height:1;letter-spacing:-.03em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.metric .lab{margin-top:12px;color:var(--muted);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase}

/* built-for / trust badges */
.builtfor{text-align:center}
.builtfor .label{color:var(--dim);font-size:12px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:24px}
.badges{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.badge{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;border:1px solid var(--hair-2);border-radius:100px;background:var(--panel);color:var(--muted);font-size:14px;font-weight:600;transition:border-color .2s,color .2s,transform .2s}
.badge:hover{border-color:rgba(0,229,255,.4);color:#fff;transform:translateY(-2px)}
.badge .tick{color:var(--cyan);font-weight:800}

/* problem / solution story */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:940px;margin:0 auto;align-items:stretch}
.compare .col{border:1px solid var(--hair);border-radius:var(--radius);padding:32px}
.compare .col.bad{background:#0c0c14}
.compare .col.good{border-color:rgba(0,229,255,.32);background:linear-gradient(180deg,#0b1422,#0a0a14);box-shadow:var(--shadow-glow)}
.compare h3{font-family:var(--display);font-size:1.18rem;margin-bottom:20px;display:flex;align-items:center;gap:10px}
.compare ul{display:flex;flex-direction:column;gap:15px}
.compare li{display:flex;gap:13px;align-items:flex-start;color:var(--muted);font-size:15px}
.compare li .mk{flex:none;width:21px;height:21px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;margin-top:1px}
.compare .bad li .mk{background:rgba(255,80,90,.13);color:#ff6b7a}
.compare .good li{color:#cfd2e6}
.compare .good li .mk{background:rgba(0,229,255,.13);color:var(--cyan)}

/* 5-step workflow (collapses responsively; class beats the inline-style trap) */
.steps.steps-5{grid-template-columns:repeat(5,1fr)}

/* product gallery */
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.gshot{border:1px solid var(--hair-2);border-radius:14px;overflow:hidden;background:var(--panel);box-shadow:var(--shadow);transition:transform .25s var(--ease),box-shadow .25s,border-color .2s}
.gshot:hover{transform:translateY(-6px);border-color:rgba(0,229,255,.3);box-shadow:var(--shadow-glow)}
.gshot .gbar{display:flex;gap:6px;padding:9px 12px;background:#0a0a14;border-bottom:1px solid var(--hair);align-items:center}
.gshot .gbar i{width:9px;height:9px;border-radius:50%;background:#22232f;display:block}
.gshot .gbar span{margin-left:8px;font-size:11px;color:var(--dim)}
.gshot img{width:100%;display:block}
.gshot .cap{padding:17px 19px}
.gshot .cap h4{font-family:var(--display);font-size:1.05rem;margin-bottom:5px}
.gshot .cap p{color:var(--muted);font-size:13.5px}

/* ---- responsive ----------------------------------------------------------- */
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero-shot{order:-1}
  .shot-frame{transform:none}
  .hero-big .shot-frame{transform:none}
  .cols-3{grid-template-columns:repeat(2,1fr)}
  .feature-row{grid-template-columns:1fr;gap:30px;padding:30px 0}
  .feature-row.flip .feat-copy{order:0}
  .steps{grid-template-columns:1fr}
  .steps.steps-5{grid-template-columns:repeat(2,1fr)}
  .metric-grid{gap:34px 20px}
  .compare{grid-template-columns:1fr;gap:18px}
  .gallery{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:30px}
  .footer-about{grid-column:1/-1}
}
/* mid-width nav — 1180 breakpoint: the 7 marketing links move into the hamburger drawer first
   (they're the least urgent thing on screen), while sign-in/account controls (nav-cta) stay live
   in the bar. Signed-in state adds an email pill + plan badge on top of the CTA button, so this
   needs to happen well before the 768px "collapse everything" breakpoint or the bar overflows
   past the viewport edge on ordinary laptop widths once a user is signed in. */
@media (max-width:1180px){
  .nav-links{display:none}
  .nav-toggle{display:flex}
  .nav.open .nav-links{display:flex;position:absolute;top:calc(68px + env(safe-area-inset-top));left:0;right:0;flex-direction:column;gap:2px;padding:14px max(16px,env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:rgba(8,8,16,.98);border-bottom:1px solid var(--hair-2);backdrop-filter:blur(16px);max-height:calc(100dvh - 68px);overflow-y:auto}
  .nav.open .nav-links a{padding:13px 14px;font-size:16px;border-radius:9px}
}
/* mobile nav — 768 breakpoint; .nav-cta also leaves the bar now, CTAs move into the drawer */
@media (max-width:768px){
  .nav-cta,.discord-link{display:none}
  .nav-cta-mobile{display:flex;flex-direction:column;gap:10px;margin-top:10px;padding-top:14px;border-top:1px solid var(--hair)}
  .nav-cta-mobile .btn{width:100%;justify-content:center}
  .nav-cta-mobile a:not(.btn){text-align:center;padding:12px;color:var(--muted);font-weight:600}
}
@media (max-width:680px){
  .section{padding:74px 0}
  .cols-3,.cols-2,.price-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;gap:16px;text-align:center}
  .cta-band{padding:44px 22px}
  .hero{padding:60px 0 30px}
  .hero-c{padding:60px 0 0}
  .hero-big{margin-top:42px}
  .steps.steps-5{grid-template-columns:1fr}
  .metric-grid{gap:30px 16px}
  .metric .lab{font-size:11px}
  .badge{padding:9px 14px;font-size:13px}
  .compare .col{padding:24px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* ============================================================================
   COMPONENT LIBRARY — shared primitives (one definition, every page inherits)
   ========================================================================== */

/* ---- form fields (unified: 16px = no iOS zoom, one focus ring, autofill-safe) */
.field{margin-bottom:16px}
.field label,.lbl{display:block;font-size:var(--fs-sm);font-weight:500;color:var(--muted);margin-bottom:7px}
.field input,.field textarea,.field select,.input{
  width:100%;font-family:inherit;font-size:16px;line-height:1.4;color:var(--text);
  background:var(--panel-2);border:1px solid var(--hair-2);border-radius:var(--r-md);
  padding:13px 15px;transition:border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.field textarea,textarea.input{min-height:130px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus,.input:focus{
  outline:none;border-color:rgba(0,229,255,.55);box-shadow:0 0 0 3px rgba(0,229,255,.14);
}
.field input::placeholder,.field textarea::placeholder,.input::placeholder{color:var(--dim)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"],.input[aria-invalid="true"]{
  border-color:var(--danger);box-shadow:0 0 0 3px rgba(255,107,122,.14);
}
.field input:-webkit-autofill,.input:-webkit-autofill{
  -webkit-text-fill-color:var(--text);-webkit-box-shadow:0 0 0 40px var(--panel-2) inset;caret-color:var(--text);
}

/* ---- consent checkboxes (>=44px hit area; required, un-checked by default) */
.consent{display:flex;flex-direction:column;gap:2px;margin:4px 0 20px}
.consent-item{display:flex;gap:12px;align-items:flex-start;padding:9px 0;min-height:44px;cursor:pointer;font-size:var(--fs-sm);color:var(--muted);line-height:1.5}
.consent-item input[type="checkbox"]{
  flex:none;appearance:none;-webkit-appearance:none;width:22px;height:22px;margin-top:1px;
  border:1.5px solid var(--hair-2);border-radius:6px;background:var(--panel-2);cursor:pointer;
  display:grid;place-items:center;transition:border-color .15s, background .15s;
}
.consent-item input[type="checkbox"]:checked{background:var(--grad);border-color:transparent}
.consent-item input[type="checkbox"]:checked::after{content:"";width:11px;height:6px;border:2px solid #04121A;border-top:0;border-right:0;transform:rotate(-45deg) translateY(-1px)}
.consent-item input[type="checkbox"]:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.consent-item a{color:var(--cyan);text-decoration:underline;text-underline-offset:2px}

/* ---- alerts / inline messages */
.alert{display:block;padding:12px 15px;border-radius:var(--r-md);font-size:var(--fs-sm);line-height:1.5;border:1px solid transparent}
.alert[hidden]{display:none}
.alert-error{background:rgba(255,107,122,.1);border-color:rgba(255,107,122,.35);color:#ffb3bb}
.alert-success{background:rgba(43,224,139,.1);border-color:rgba(43,224,139,.35);color:#87ecc0}
.alert-info{background:rgba(0,229,255,.08);border-color:rgba(0,229,255,.3);color:#9fe9f5}

/* ---- spinner (one definition; replaces per-page acspin/cospin) */
.spinner{width:18px;height:18px;border-radius:50%;border:2px solid var(--hair-2);border-top-color:var(--cyan);animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- status pill */
.status{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:var(--fs-sm)}
.status .status-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 9px var(--green)}
.status.off .status-dot{background:var(--dim);box-shadow:none}
.status.degraded .status-dot{background:var(--amber);box-shadow:0 0 9px var(--amber)}

/* ---- prose (legal / docs / long-form; readable measure) */
.prose{max-width:var(--maxw-prose);margin:0 auto;color:var(--muted);font-size:16px;line-height:1.75}
.prose h2{font-family:var(--display);color:var(--text);font-size:1.5rem;font-weight:600;letter-spacing:-.01em;margin:2.4em 0 .7em}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--display);color:var(--text);font-size:1.15rem;font-weight:600;margin:1.8em 0 .5em}
.prose p{margin:0 0 1.1em}
.prose ul,.prose ol{margin:0 0 1.1em;padding-left:1.3em;display:flex;flex-direction:column;gap:.5em}
.prose li{list-style:disc}
.prose ol li{list-style:decimal}
.prose a{color:var(--cyan);text-decoration:underline;text-underline-offset:2px}
.prose strong{color:var(--text);font-weight:600}
.prose .legal-note{padding:16px 18px;background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-md);color:var(--dim);font-size:var(--fs-sm);margin-bottom:2em}
.prose .updated{color:var(--dim);font-size:var(--fs-sm);margin-bottom:2.2em}

/* ---- table (overflow floor so wide tables scroll INSIDE their box, never the page) */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-lg)}

/* ---- mobile-nav drawer CTAs (cloned into the drawer by site.js on small screens) */
.nav-cta-mobile{display:none}

/* ---- media: reserve space (kills CLS) + brand-tint the feature icons */
.shot-frame img,.gshot img{aspect-ratio:16/9;object-fit:cover}
.card .ico svg{width:23px;height:23px}

/* ---- trust signals (near purchase CTAs) */
.trust-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 26px;margin:34px auto 0;max-width:820px}
.trust-chips .tc{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:13.5px;font-weight:500}
.trust-chips .tc svg{width:17px;height:17px;color:var(--cyan);flex:none}

/* ============================================================================
   DUOTONE UPGRADE LAYER — cyan + violet
   Cross-page transitions · prominent auth · banner hero · feature chips ·
   packet-flow river · video/custom backgrounds · micro-interactions.
   Everything here is additive; existing components keep their cyan identity.
   ========================================================================== */

/* ---- cross-document page transitions (View Transitions API) ---------------- */
@view-transition{ navigation:auto; }
::view-transition-old(root),::view-transition-new(root){ animation-duration:.42s; animation-timing-function:var(--ease); }
@keyframes vtFadeOut{ to{ opacity:0; transform:translateY(-8px) scale(.994); } }
@keyframes vtFadeIn{ from{ opacity:0; transform:translateY(12px) scale(.994); } }
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){ animation-name:vtFadeOut; }
  ::view-transition-new(root){ animation-name:vtFadeIn; }
}
/* graceful fallback for browsers without cross-document view transitions */
@supports not (view-transition-name:none){
  @media (prefers-reduced-motion:no-preference){
    @keyframes pageFade{ from{ opacity:0 } to{ opacity:1 } }
    body{ animation:pageFade .5s var(--ease) both; }
  }
}
::selection{background:rgba(139,92,246,.32);color:#fff}

/* ---- prominent nav auth (upgraded from the old muted text link by site.js) - */
.nav-signin{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  font-size:14px;font-weight:600;color:var(--text);
  padding:9px 15px;border-radius:10px;border:1px solid var(--hair-2);
  background:rgba(255,255,255,.03);
  transition:border-color .18s var(--ease),background .18s,color .18s,transform .18s var(--ease);
}
.nav-signin:hover{border-color:rgba(139,92,246,.55);background:rgba(139,92,246,.12);color:#fff;transform:translateY(-1px)}
.nav-signin svg{width:15px;height:15px;opacity:.9;flex:none}
.nav-signin.is-account{border-color:rgba(0,229,255,.42);background:var(--grad-vio-soft);color:#fff}
.nav-signin.is-account .dot-live{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 9px var(--green)}

/* ---- video / custom backgrounds (drop-in for any positioned section) ------- */
.bg-media{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.bg-media video,.bg-media img{width:100%;height:100%;object-fit:cover;display:block}
.bg-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,7,13,.55) 0%,rgba(7,7,13,.72) 45%,rgba(7,7,13,.94) 100%)}
.bg-media.tint-violet::after{background:
  radial-gradient(120% 90% at 50% 0%,rgba(124,92,255,.22),transparent 55%),
  linear-gradient(180deg,rgba(7,7,13,.5) 0%,rgba(7,7,13,.8) 55%,rgba(7,7,13,.96) 100%)}

/* ---- banner hero (the SEE. ANALYZE. DOMINATE. showpiece) ------------------- */
.hero-banner{
  position:relative;margin:44px auto 0;max-width:1180px;
  border-radius:22px;overflow:hidden;background:#05050b;
  border:1px solid rgba(139,92,246,.30);
  box-shadow:var(--shadow-vio);
  transform:translateZ(0);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .3s;
}
.hero-banner:hover{transform:translateY(-4px);border-color:rgba(139,92,246,.5);
  box-shadow:0 0 0 1px rgba(139,92,246,.22),0 44px 110px -40px rgba(124,92,255,.55)}
.hero-banner img{width:100%;display:block;aspect-ratio:1983/793;object-fit:cover}
.hero-banner-glow{position:absolute;inset:-16% -8%;z-index:-1;
  background:radial-gradient(closest-side,var(--violet-glow),transparent 72%);filter:blur(34px)}
/* a slow one-pass sheen when the hero reveals */
.hero-banner .sheen{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(196,181,253,.14) 50%,transparent 62%);
  transform:translateX(-120%)}
.reveal.in .hero-banner .sheen,.hero-banner.in .sheen{animation:sheenSweep 1.7s var(--ease) .25s both}
@keyframes sheenSweep{to{transform:translateX(120%)}}

/* ---- hero feature chips (the four badges from the banner, as live HTML) ----- */
.hero-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px}
.hero-chip{display:inline-flex;align-items:center;gap:10px;padding:11px 18px;border-radius:100px;
  border:1px solid var(--hair-2);background:rgba(139,92,246,.06);color:var(--muted);
  font-size:14px;font-weight:600;transition:border-color .2s,color .2s,transform .2s var(--ease),background .2s}
.hero-chip:hover{border-color:rgba(139,92,246,.55);color:#fff;transform:translateY(-2px);background:rgba(139,92,246,.12)}
.hero-chip svg{width:18px;height:18px;color:var(--violet);flex:none}
.hero-chip b{color:var(--lilac);font-weight:700}

/* ============================================================================
   PACKET-FLOW RIVER — the pipeline, alive.
   DOM stage nodes (crisp labels) over a <canvas> that draws the conduits and
   the packets flowing Capture → … → Motion Output. Canvas is pointer-inert.
   ========================================================================== */
.river-stage{position:relative;margin-top:14px;padding:30px 8px;border-radius:var(--radius);
  border:1px solid var(--hair);background:linear-gradient(180deg,rgba(14,15,26,.6),rgba(11,11,21,.6));overflow:hidden}
.river-stage::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(70% 120% at 50% -10%,rgba(124,92,255,.10),transparent 60%)}
.river-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.river-track{position:relative;z-index:2;display:flex;align-items:stretch;justify-content:space-between;gap:10px}
.river-node{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:10px;padding:8px 6px;transition:transform .3s var(--ease)}
.river-node .rico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;flex:none;
  color:var(--cyan);background:rgba(0,229,255,.06);border:1px solid rgba(0,229,255,.22);
  transition:border-color .3s,background .3s,color .3s,box-shadow .3s,transform .3s var(--ease)}
.river-node .rico svg{width:24px;height:24px}
.river-node .rmeta{display:flex;flex-direction:column;gap:3px;align-items:center;min-width:0}
.river-node .rname{font-family:var(--display);font-weight:600;font-size:13.5px;color:var(--text);line-height:1.15;letter-spacing:-.01em}
.river-node .rsub{font-size:11px;color:var(--dim);letter-spacing:.06em;text-transform:uppercase}
/* hue shift along the river: cyan intake → violet compute → magenta output */
.river-node[data-hue="cyan"] .rico{color:var(--cyan);background:rgba(0,229,255,.07);border-color:rgba(0,229,255,.24)}
.river-node[data-hue="violet"] .rico{color:#a78bfa;background:rgba(139,92,246,.09);border-color:rgba(139,92,246,.30)}
.river-node[data-hue="magenta"] .rico{color:#ff7ae6;background:rgba(255,61,219,.08);border-color:rgba(255,61,219,.28)}
.river-node.hot{transform:translateY(-3px)}
.river-node.hot .rico{transform:scale(1.08);box-shadow:0 0 0 1px currentColor,0 0 26px -4px currentColor}
.river-legend{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:20px;color:var(--dim);font-size:12.5px}
.river-legend .pk{width:10px;height:10px;border-radius:50%;background:var(--grad-river);box-shadow:0 0 12px -1px rgba(124,92,255,.8)}
@media (max-width:820px){
  .river-track{flex-direction:column;align-items:stretch;gap:6px}
  .river-node{flex-direction:row;justify-content:flex-start;text-align:left;gap:14px;padding:9px 10px}
  .river-node .rico{width:46px;height:46px}
  .river-node .rmeta{align-items:flex-start}
  .river-node .rname{font-size:15px}
}

/* ---- micro-interactions (professional, restrained) ------------------------ */
.btn-primary:hover{box-shadow:0 16px 44px -14px rgba(0,229,255,.5),0 8px 30px -10px rgba(124,92,255,.5)}
.btn-vio{background:var(--grad-vio);color:#0a0716;font-weight:700;box-shadow:0 12px 34px -12px rgba(124,92,255,.6)}
.btn-vio:hover{transform:translateY(-2px);box-shadow:0 20px 52px -14px rgba(124,92,255,.72)}
.btn-discord{background:#5865F2;color:#fff;font-weight:650;box-shadow:0 12px 30px -12px rgba(88,101,242,.6)}
.btn-discord:hover{transform:translateY(-2px);background:#4a57e0;box-shadow:0 18px 44px -14px rgba(88,101,242,.7)}
.btn-discord svg{width:19px;height:19px;flex:none}
.card:hover,.gshot:hover,.price.featured:hover{box-shadow:0 30px 80px -30px rgba(124,92,255,.28),var(--shadow)}
:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.tap{transition:transform .12s var(--ease)} .tap:active{transform:scale(.97)}

@media (prefers-reduced-motion:reduce){
  .hero-banner .sheen{animation:none;display:none}
  .river-node,.river-node .rico{transition:none}
}

/* ---- "inside the system" animated background (circuit-bg.js self-mounts it) */
#circuit-bg{position:fixed;inset:0;width:100%;height:100%;z-index:-3;pointer-events:none;opacity:.85}
body.has-circuit::after{display:none} /* the animated grid supersedes the static one */
@media (prefers-reduced-motion:reduce){#circuit-bg{opacity:.4}}

/* ---- living hero banner: Ken Burns + breathing glow + scan sweep + HUD ---- */
.hero-banner .scanline{position:absolute;left:0;right:0;top:0;height:24%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(0,229,255,.13) 50%,transparent);
  mix-blend-mode:screen;transform:translateY(-130%);opacity:0}
.hero-hud{position:absolute;top:14px;right:16px;width:84px;height:84px;color:var(--cyan);
  opacity:.5;mix-blend-mode:screen;pointer-events:none}
.hero-hud svg{width:100%;height:100%}
@media (max-width:600px){.hero-hud{width:58px;height:58px;top:10px;right:10px}}
@media (prefers-reduced-motion:no-preference){
  .hero-banner img{animation:heroKen 26s ease-in-out infinite alternate;transform-origin:55% 42%}
  .hero-banner-glow{animation:heroGlow 7s ease-in-out infinite}
  .hero-banner .scanline{animation:heroScan 7.5s ease-in-out infinite}
  .hero-hud .ring-rot{transform-box:fill-box;transform-origin:center;animation:spin 24s linear infinite}
}
@keyframes heroKen{from{transform:scale(1.01)}to{transform:scale(1.05)}}
@keyframes heroGlow{0%,100%{opacity:.62;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
@keyframes heroScan{0%{transform:translateY(-130%);opacity:0}12%{opacity:1}45%{opacity:1}60%{opacity:0}100%{transform:translateY(460%);opacity:0}}

/* ============================================================================
   PER-PAGE ACCENT THEMES — one colour identity per page (set by site.js from the
   filename). Same layout everywhere; accent + gradient + ambient glow + the
   background light-trails all shift together. The brand logo mark stays constant.
   ========================================================================== */
:root{
  --grad-brand:linear-gradient(100deg,#00E5FF 0%,#6A8Cff 48%,#FF3DDB 100%);
  --accent:#00E5FF; --accent-2:#7C5CFF; --accent-hue:190;
}
html[data-page-theme="features"]      {--accent:#8B5CF6;--accent-2:#C084FC;--accent-hue:262;--grad:linear-gradient(100deg,var(--accent),var(--accent-2))}
html[data-page-theme="technology"]    {--accent:#38BDF8;--accent-2:#22D3EE;--accent-hue:200;--grad:linear-gradient(100deg,var(--accent),var(--accent-2))}
html[data-page-theme="pricing"]       {--accent:#FF5FC4;--accent-2:#A855F7;--accent-hue:322;--grad:linear-gradient(100deg,var(--accent),var(--accent-2))}
html[data-page-theme="downloads"]     {--accent:#2BE08B;--accent-2:#22D3EE;--accent-hue:158;--grad:linear-gradient(100deg,var(--accent),var(--accent-2))}
html[data-page-theme="docs"]          {--accent:#5CC8FF;--accent-2:#818CF8;--accent-hue:202;--grad:linear-gradient(100deg,var(--accent),var(--accent-2))}
html[data-page-theme="faq"]           {--accent:#FFB454;--accent-2:#FF7A6B;--accent-hue:38 ;--grad:linear-gradient(100deg,var(--accent),var(--accent-2))}
html[data-page-theme="changelog"]     {--accent:#8B93F8;--accent-2:#C084FC;--accent-hue:245;--grad:linear-gradient(100deg,var(--accent),var(--accent-2))}
html[data-page-theme="support"]       {--accent:#2DD4BF;--accent-2:#38BDF8;--accent-hue:172;--grad:linear-gradient(100deg,var(--accent),var(--accent-2))}
html[data-page-theme="contact"]       {--accent:#FB7185;--accent-2:#C084FC;--accent-hue:344;--grad:linear-gradient(100deg,var(--accent),var(--accent-2))}
html[data-page-theme="troubleshooting"]{--accent:#FBBF24;--accent-2:#FB7185;--accent-hue:44;--grad:linear-gradient(100deg,var(--accent),var(--accent-2))}

/* brand logo mark keeps the signature 3-stop gradient on every page */
.brand .mark{background:var(--grad-brand)}
.brand .mark-text b{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}

/* accent-driven surfaces follow the page theme */
.eyebrow{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 30%,transparent);background:color-mix(in srgb,var(--accent) 7%,transparent)}
.card .why{color:var(--accent)}
.footer-col a:hover,.prose a,.nav-links a.active{color:var(--accent)}
:focus-visible{outline-color:var(--accent)}
.card .ico{background:color-mix(in srgb,var(--accent) 11%,transparent);border-color:color-mix(in srgb,var(--accent) 26%,transparent)}
.card .ico svg{stroke:var(--accent)}
.btn-primary{box-shadow:0 10px 30px -10px color-mix(in srgb,var(--accent) 52%,transparent)}
.btn-primary:hover{box-shadow:0 18px 46px -12px color-mix(in srgb,var(--accent) 62%,transparent)}
/* small themed accents that used to be hard-cyan */
.qa summary .chev{color:var(--accent)}
.trust-chips .tc svg{color:var(--accent)}
.kbd{color:var(--accent)}
.feature-copy ul.checks li::before{
  background-color:color-mix(in srgb,var(--accent) 16%,transparent);
  border-color:color-mix(in srgb,var(--accent) 42%,transparent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EDEEF7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.price ul.feats li::before{
  background-color:color-mix(in srgb,var(--accent) 18%,transparent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EDEEF7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* ambient page glow picks up the accent */
body::before{
  background:
    radial-gradient(820px 520px at 82% -8%, color-mix(in srgb,var(--accent) 13%,transparent), transparent 60%),
    radial-gradient(720px 560px at 12% 2%,  color-mix(in srgb,var(--accent-2) 15%,transparent), transparent 58%),
    radial-gradient(600px 470px at 46% -14%, color-mix(in srgb,var(--accent) 8%,transparent), transparent 60%);
}

/* ============================================================================
   HERO VISION-CORE — a bespoke, animated, themeable emblem built from the brand
   geometry (Sentinel triangle + HUD rings + radar sweep + wordmark). Replaces the
   raster banner; vector = crisp at any DPI and recolours with the page accent.
   ========================================================================== */
.hero-core{
  position:relative;margin:44px auto 0;max-width:1180px;border-radius:22px;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 12%,transparent),0 44px 110px -44px color-mix(in srgb,var(--accent) 42%,transparent);
  background:
    radial-gradient(120% 150% at 18% 6%, color-mix(in srgb,var(--accent) 9%,transparent), transparent 52%),
    radial-gradient(120% 150% at 92% 96%, color-mix(in srgb,var(--accent-2) 9%,transparent), transparent 52%),
    linear-gradient(180deg,#0a0b16,#06060d);
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center;gap:14px;
  padding:34px 46px;min-height:372px;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .3s;
}
.hero-core:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.hero-core::after{ /* faint corner-bracket frame */
  content:"";position:absolute;inset:14px;border-radius:14px;pointer-events:none;
  background:
    linear-gradient(var(--accent),var(--accent)) 0 0/22px 2px no-repeat,
    linear-gradient(var(--accent),var(--accent)) 0 0/2px 22px no-repeat,
    linear-gradient(var(--accent),var(--accent)) 100% 0/22px 2px no-repeat,
    linear-gradient(var(--accent),var(--accent)) 100% 0/2px 22px no-repeat,
    linear-gradient(var(--accent),var(--accent)) 0 100%/22px 2px no-repeat,
    linear-gradient(var(--accent),var(--accent)) 0 100%/2px 22px no-repeat,
    linear-gradient(var(--accent),var(--accent)) 100% 100%/22px 2px no-repeat,
    linear-gradient(var(--accent),var(--accent)) 100% 100%/2px 22px no-repeat;
  opacity:.5;
}
.core-art{width:100%;max-width:400px;justify-self:center;aspect-ratio:1/1;color:var(--accent);position:relative;z-index:1}
.core-art svg{width:100%;height:100%;display:block;overflow:visible}
.core-copy{position:relative;z-index:1;min-width:0}
.core-word{font-family:var(--display);font-weight:700;font-size:clamp(2.6rem,7.2vw,5rem);line-height:.98;letter-spacing:.06em;
  background:linear-gradient(176deg,#fff 20%,color-mix(in srgb,var(--accent) 70%,#c7cbe0) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.core-sub{font-family:var(--display);font-weight:600;letter-spacing:.4em;color:var(--accent);
  font-size:clamp(.85rem,2.1vw,1.28rem);margin-top:8px;text-shadow:0 0 22px color-mix(in srgb,var(--accent) 60%,transparent)}
.core-rule{height:1px;margin:20px 0 16px;background:linear-gradient(90deg,var(--accent),transparent)}
.core-tag{color:var(--muted);letter-spacing:.26em;font-size:12.5px;text-transform:uppercase}
.core-tag b{color:var(--accent);font-weight:700}
.core-domain{display:inline-flex;align-items:center;gap:9px;margin-top:18px;padding:8px 16px;border-radius:100px;
  border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);background:color-mix(in srgb,var(--accent) 8%,transparent);
  font-size:13.5px;color:var(--text);letter-spacing:.02em}
.core-domain svg{width:15px;height:15px;color:var(--accent)}
@media (max-width:820px){
  .hero-core{grid-template-columns:1fr;text-align:center;padding:30px 22px;gap:6px}
  .core-copy{display:flex;flex-direction:column;align-items:center}
  .core-rule{width:60%}
  .core-art{max-width:280px}
}
/* emblem motion (all reduced-motion gated) */
@media (prefers-reduced-motion:no-preference){
  .core-art .rot-slow{transform-box:fill-box;transform-origin:center;animation:spin 46s linear infinite}
  .core-art .rot-med{transform-box:fill-box;transform-origin:center;animation:spin 30s linear infinite reverse}
  .core-art .rot-orbit{transform-box:fill-box;transform-origin:center;animation:spin 16s linear infinite}
  .core-art .sweep{transform-box:fill-box;transform-origin:center;animation:spin 5.5s linear infinite}
  .core-art .mark{transform-box:fill-box;transform-origin:center;animation:corePulse 4.2s ease-in-out infinite}
}
@keyframes corePulse{0%,100%{opacity:.9}50%{opacity:1}}

/* ============================================================================
   MOLTEN CORE — flagship brand identity (fire). Home + auth/legal + social use
   this; interior pages keep their per-page accents. The Sentinel triangle logo
   is the brand mark on every page (fire gradient, always constant).
   ========================================================================== */
:root{
  --accent:#FF5A1F; --accent-2:#FF8A3D; --accent-hue:20;
  --grad:linear-gradient(100deg,#FF9A3D 0%,#FF5A1F 48%,#D42410 100%);
  --grad-brand:linear-gradient(125deg,#FFC26B 0%,#FF5A1F 50%,#C21A0B 100%);
}
/* nav/footer brand mark → the actual Sentinel triangle logo, filled with the fire gradient */
.brand .mark{
  background:var(--grad-brand);
  border-radius:0; box-shadow:none; color:transparent; font-size:0;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='white' stroke-width='7' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M24 30 L76 30 L50 78 Z'/%3E%3Cpath d='M37 41 L50 62 L63 41'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='white' stroke-width='7' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M24 30 L76 30 L50 78 Z'/%3E%3Cpath d='M37 41 L50 62 L63 41'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---- Detonation-core hero (the animated "nuke") -------------------------- */
.det-stage{position:relative;width:100%;max-width:430px;justify-self:center;aspect-ratio:1/1}
.det-canvas{position:absolute;inset:0;width:100%;height:100%}
.det-logo{position:absolute;inset:0;display:grid;place-items:center;z-index:1;color:#FFD9A8;
  filter:drop-shadow(0 0 16px rgba(255,90,31,.65))}
.det-logo svg{width:33%;height:auto}
@media (prefers-reduced-motion:no-preference){
  .det-logo{transform-origin:center;animation:detPulse 3.2s ease-in-out infinite}
}
@keyframes detPulse{0%,100%{transform:scale(1);opacity:.92}50%{transform:scale(1.06);opacity:1}}

/* hero feature chips follow the page accent (were hard-violet) */
.hero-chip{border-color:color-mix(in srgb,var(--accent) 24%,var(--hair-2));background:color-mix(in srgb,var(--accent) 6%,transparent)}
.hero-chip:hover{border-color:color-mix(in srgb,var(--accent) 50%,transparent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.hero-chip svg{color:var(--accent)}
.hero-chip b{color:color-mix(in srgb,var(--accent) 72%,#fff)}

/* ---- living skull hero (the brand figure) -------------------------------- */
.skull-stage{position:relative;width:100%;max-width:470px;justify-self:center;aspect-ratio:1/1;border-radius:20px;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 16%,transparent),0 44px 110px -44px rgba(255,70,20,.55)}
.skull-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:65% 44.5%}
.skull-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
@media (prefers-reduced-motion:no-preference){.skull-img{animation:skullBreathe 13s ease-in-out infinite}}
@keyframes skullBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}