/* ============================================================
   VISULIS - shared styles for legal / policy pages.
   Tokens mirror the design system in index.html so the
   policy pages sit inside the same brand, not beside it.
   ============================================================ */

:root{
  --brand-cyan:#2DC8FF; --brand-cyan-hi:#5BE7FF; --brand-blue:#2D9DFF;
  --brand-royal:#3C5FDA; --brand-indigo:#4661E7; --brand-violet:#703BFE;
  --brand-purple:#8A4BFF;
  --grad-brand:linear-gradient(105deg,var(--brand-cyan) 0%,var(--brand-blue) 30%,var(--brand-indigo) 60%,var(--brand-violet) 100%);
  --grad-glow:radial-gradient(60% 80% at 50% 40%,rgba(65,41,112,.55) 0%,rgba(8,23,38,0) 70%);
  --grad-text:linear-gradient(100deg,var(--brand-cyan-hi),var(--brand-violet));
  --bg-void:#05080F; --bg-900:#081726; --bg-800:#0E1B2E; --bg-700:#14243A; --bg-600:#1C2E48;
  --fg-1:#F4F8FF; --fg-2:#AEC0D8; --fg-3:#6E8099; --fg-4:#44566E;
  --stroke-1:rgba(174,192,216,.10); --stroke-2:rgba(174,192,216,.18);
  --stroke-brand:rgba(91,231,255,.40);
  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Plus Jakarta Sans',system-ui,sans-serif;
  --font-round:'Quicksand','Plus Jakarta Sans',sans-serif;
  --font-mono:'JetBrains Mono','SF Mono',ui-monospace,monospace;
  --glow-violet:0 0 0 1px rgba(138,75,255,.25),0 8px 44px rgba(112,59,254,.35);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{background:var(--bg-void);color:var(--fg-1);font-family:var(--font-body);-webkit-font-smoothing:antialiased}
::selection{background:rgba(91,231,255,.3)}
body::-webkit-scrollbar{width:10px}
body::-webkit-scrollbar-thumb{background:var(--bg-600);border-radius:999px;border:3px solid var(--bg-void)}
a{color:var(--brand-cyan);text-decoration:none}
a:hover{color:var(--brand-cyan-hi);text-decoration:underline}
:focus-visible{outline:2px solid var(--brand-cyan-hi);outline-offset:3px;border-radius:4px}

/* ---- stage ---- */
.vz-stage{position:relative;min-height:100vh;background:var(--bg-void);overflow:hidden}
.vz-glow{position:fixed;top:-10%;left:50%;transform:translateX(-50%);width:1100px;height:700px;background:var(--grad-glow);pointer-events:none;z-index:0}
.vz-orb{position:fixed;border-radius:50%;filter:blur(90px);opacity:.45;pointer-events:none;z-index:0}
.vz-orb-a{width:520px;height:520px;background:radial-gradient(circle,#2DC8FF55,transparent 70%);top:-140px;left:-160px}
.vz-orb-b{width:580px;height:580px;background:radial-gradient(circle,#703BFE55,transparent 70%);top:320px;right:-200px}
.vz-main{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:0 32px}
@media(max-width:600px){.vz-main{padding:0 20px}}

/* ---- nav ---- */
.vz-nav{position:sticky;top:0;z-index:50;padding:14px 0;background:rgba(8,23,38,.6);backdrop-filter:blur(16px);border-bottom:1px solid var(--stroke-1)}
.vz-nav-inner{max-width:1200px;margin:0 auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between;gap:24px}
@media(max-width:600px){.vz-nav-inner{padding:0 20px}}
.vz-brand-logo{height:34px;width:auto;display:block}
.vz-nav-links{display:flex;gap:28px}
.vz-nav-links a{font-weight:500;font-size:15px;color:var(--fg-2);transition:color .2s}
.vz-nav-links a:hover{color:var(--fg-1);text-decoration:none}
@media(max-width:760px){.vz-nav-links{display:none}}
.vz-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:600;font-size:15px;border:none;cursor:pointer;border-radius:14px;padding:13px 22px;transition:transform .2s cubic-bezier(.22,1,.36,1),filter .2s}
.vz-btn-primary{background:var(--grad-brand);color:#fff;box-shadow:var(--glow-violet)}
.vz-btn-primary:hover{transform:translateY(-2px);filter:brightness(1.08);text-decoration:none;color:#fff}
.vz-btn:active{transform:scale(.97)}

/* ---- legal document ---- */
.vz-doc{padding:64px 0 40px;max-width:74ch}
@media(max-width:600px){.vz-doc{padding:44px 0 32px}}
.vz-eyebrow{font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-cyan);margin-bottom:18px}
.vz-doc h1{font-family:var(--font-display);font-weight:700;font-size:clamp(34px,5vw,54px);line-height:1.04;letter-spacing:-.03em;margin-bottom:20px}
.text-gradient{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.vz-doc-meta{font-size:14px;color:var(--fg-3);font-family:var(--font-mono);margin-bottom:44px}
.vz-doc h2{font-family:var(--font-display);font-weight:600;font-size:clamp(21px,2.4vw,27px);line-height:1.2;letter-spacing:-.01em;color:var(--fg-1);margin:48px 0 14px;scroll-margin-top:90px}
.vz-doc h3{font-family:var(--font-display);font-weight:600;font-size:17px;color:var(--fg-1);margin:28px 0 10px}
.vz-doc p{font-size:16px;line-height:1.65;color:var(--fg-2);margin-bottom:16px}
.vz-doc ul,.vz-doc ol{margin:0 0 18px 20px}
.vz-doc li{font-size:16px;line-height:1.65;color:var(--fg-2);margin-bottom:9px}
.vz-doc li::marker{color:var(--brand-cyan)}
.vz-doc strong{color:var(--fg-1);font-weight:600}
.vz-doc hr{border:none;border-top:1px solid var(--stroke-1);margin:44px 0}

/* Statutory details / key-value card */
.vz-card{background:linear-gradient(180deg,rgba(20,36,58,.72),rgba(14,27,46,.5));border:1px solid var(--stroke-2);border-radius:20px;padding:28px 30px;margin:26px 0 34px}
@media(max-width:600px){.vz-card{padding:22px 20px}}
.vz-card h2:first-child,.vz-card h3:first-child{margin-top:0}
.vz-kv{display:grid;grid-template-columns:210px 1fr;gap:12px 22px}
@media(max-width:640px){.vz-kv{grid-template-columns:1fr;gap:2px 0}}
.vz-kv dt{font-size:13px;font-family:var(--font-display);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3);padding-top:2px}
.vz-kv dd{font-size:16px;color:var(--fg-1);margin-bottom:4px}
@media(max-width:640px){.vz-kv dd{margin-bottom:16px}}
.vz-kv dd .mono{font-family:var(--font-mono);letter-spacing:.02em}

/* Contents list */
.vz-toc{background:rgba(8,23,38,.55);border:1px solid var(--stroke-1);border-radius:16px;padding:20px 24px;margin-bottom:40px}
.vz-toc-t{font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);margin-bottom:12px}
.vz-toc ol{margin:0 0 0 18px}
.vz-toc li{font-size:15px;margin-bottom:6px;color:var(--fg-2)}

/* Table (cookies / retention) */
.vz-table-wrap{overflow-x:auto;margin:20px 0 28px;border:1px solid var(--stroke-2);border-radius:16px}
table.vz-table{width:100%;border-collapse:collapse;min-width:520px}
.vz-table th,.vz-table td{text-align:left;padding:13px 16px;font-size:15px;line-height:1.5;border-bottom:1px solid var(--stroke-1);vertical-align:top}
.vz-table th{font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);background:rgba(8,23,38,.6)}
.vz-table td{color:var(--fg-2)}
.vz-table tr:last-child td{border-bottom:none}

/* Footer */
.vz-footer{position:relative;z-index:1;max-width:1200px;margin:40px auto 0;padding:40px 32px}
@media(max-width:600px){.vz-footer{padding:36px 20px}}
.vz-footer-inner{border-top:1px solid var(--stroke-1);padding-top:32px}
.vz-footer-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px}
.vz-footer-logo{height:54px;width:auto}
.vz-footer-socials{display:flex;gap:12px}
.vz-soc{width:40px;height:40px;border-radius:12px;border:1px solid var(--stroke-2);display:flex;align-items:center;justify-content:center;color:var(--fg-2);transition:border-color .2s,color .2s,background .2s}
.vz-soc:hover{border-color:var(--stroke-brand);color:var(--brand-cyan);background:rgba(91,231,255,.06)}
.vz-footer-links{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:28px}
.vz-footer-links a{font-size:14px;color:var(--fg-2)}
.vz-footer-links a:hover{color:var(--brand-cyan)}
.vz-legal{margin-top:22px;font-size:13px;line-height:1.65;color:var(--fg-3);max-width:80ch}
.vz-legal .mono{font-family:var(--font-mono)}
.vz-footer-bottom{display:flex;justify-content:space-between;margin-top:22px;font-size:13px;color:var(--fg-3);flex-wrap:wrap;gap:8px}
.vz-footer-bottom .slogan{font-family:var(--font-round);font-weight:500;color:var(--fg-2)}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}