/* 8D Interactive — Brand System v0.3; source: approved Oct 2026 web logo and canonical landing design */
:root{
  --8d-graphite:#080D19;
  --8d-cyan:#00CEF2;
  --8d-blue:#1655FF;
  --8d-violet:#A12CFF;
  --8d-white:#F4F8FF;
  --8d-muted:#A6B6CE;
  --8d-panel:#10192B;
  --8d-panel2:#17223B;
  --8d-line:#293651;
  --bg:var(--8d-graphite);
  --accent:var(--8d-cyan);
  --accent2:var(--8d-blue);
  --a2:var(--8d-blue);
  --panel:var(--8d-panel);
  --panel2:var(--8d-panel2);
  --surface:var(--8d-panel);
  --surface2:var(--8d-panel2);
  --stroke:var(--8d-line);
  --line:var(--8d-line);
  --white:var(--8d-white);
  --text:var(--8d-white);
  --muted:var(--8d-muted);
  color-scheme:dark;
}
html{background:var(--8d-graphite)}
body{background-color:var(--8d-graphite);color:var(--8d-white)}
body::before{background:radial-gradient(ellipse 56% 65% at 85% 8%,rgba(22,85,255,.16),transparent 78%)}
:is(.site-header,.top){border-color:var(--8d-line)}
:is(.brand,.wordmark){display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--8d-white)}
.brand-logo{display:block;width:76px;height:76px;max-width:76px;min-width:76px;object-fit:contain;object-position:center;flex-shrink:0;background:#000;border:1px solid rgba(0,206,242,.24);border-radius:15px;box-shadow:0 0 23px rgba(22,85,255,.14)}
.brand-lockup-copy{display:flex;flex-direction:column;gap:4px}
.brand-lockup-copy strong{font-size:13px;letter-spacing:.16em;line-height:1.1}
.brand-lockup-copy small{font-size:11px;color:var(--8d-muted);letter-spacing:.025em}
.site-header .brand-logo{width:91px;height:91px;max-width:91px;min-width:91px;border-radius:17px}
.site-header .brand-text{border-left:0;padding-left:0}
.site-header .brand-text strong{font-size:14px;letter-spacing:.18em}
.site-header .brand-text small{color:var(--8d-muted)}
.brand:hover .brand-logo,.wordmark:hover .brand-logo{border-color:rgba(0,206,242,.58)}
.demo-nav{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;padding:13px 14px;background:#101728;border-bottom:1px solid var(--8d-line);font:650 12px system-ui,sans-serif}
.demo-nav a{color:#cbd9ed;text-decoration:none;border:1px solid rgba(22,85,255,.22);background:rgba(16,25,43,.68);border-radius:9px;padding:8px 12px;transition:background .16s,border-color .16s}
.demo-nav a[aria-current=page]{color:#071726;background:var(--8d-cyan);border-color:var(--8d-cyan)}
.demo-nav a:hover{border-color:var(--8d-cyan);color:#fff}
.demo-nav a[aria-current=page]:hover{color:#08131d}
:is(.pill,.tag:not(.warn)){background:rgba(22,85,255,.12);border:1px solid rgba(0,206,242,.31);color:#b5f3ff}
:is(.pill,.tag:not(.warn))::before{background:var(--8d-cyan)}
:is(.card,.stat,.actions-card){border-color:var(--8d-line)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--8d-cyan);outline-offset:3px}
.nav a[aria-current=page],.btn:not(.outline):not(.quiet),.lang-switch button[aria-pressed=true]{background:var(--8d-cyan);border-color:var(--8d-cyan);color:#061729}
:is(.intro h1,.hero h1){text-wrap:balance}
.eyebrow{color:var(--8d-cyan)}
body:has(.top){background-image:radial-gradient(circle at 88% -10%,rgba(22,85,255,.19),transparent 35%),radial-gradient(circle at 0% 36%,rgba(161,44,255,.055),transparent 35%)}
@media(max-width:700px){.brand-logo{width:59px;height:59px;max-width:59px;min-width:59px}.site-header .brand-logo{width:69px;height:69px;max-width:69px;min-width:69px}.demo-nav{justify-content:stretch}.demo-nav a{flex:1 1 140px;text-align:center}.site-header .brand-text strong{font-size:12px}}
@media(prefers-reduced-motion:reduce){.demo-nav a{transition:none}}