/* Voltary landing — dark, electric-blue, minimal geometric. System fonts only. */
:root{
  --bg:#0A0E16; --panel:#111726; --panel-2:#0E1320; --line:#1E2940;
  --ink:#E8EEF9; --muted:#B4C0D4; --faint:#8A97AD;
  --blue:#007ff7; --accent:#38BDF8; --blue-deep:#2148D8;
  --radius:16px; --maxw:1040px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden}
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--font);
  line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:6px}
img,svg{display:block; max-width:100%}
.skip{position:absolute; left:-9999px; top:0; background:var(--blue); color:#fff; padding:10px 16px; border-radius:0 0 10px 0; z-index:100}
.skip:focus{left:0}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}

/* Header */
.site-header{position:sticky; top:0; z-index:20; background:rgba(10,14,22,.78);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; align-items:center; gap:12px; color:var(--ink); font-weight:750; font-size:20px; letter-spacing:-.02em}
.brand svg{width:34px; height:34px; border-radius:9px}
.brand .v{color:var(--accent)}
.nav{display:flex; gap:22px; font-size:14.5px}
.nav a{color:var(--muted)} .nav a:hover{color:var(--ink); text-decoration:none}
@media(max-width:560px){ .nav{display:none} }

/* Hero */
.hero{position:relative; overflow:hidden; text-align:center; padding:72px 0 56px}
.hero::before{content:""; position:absolute; inset:0;
  background:radial-gradient(900px 460px at 50% -8%, rgba(0,127,247,.22), transparent 60%); pointer-events:none}
.hero .logo{width:92px; height:92px; margin:0 auto 22px; border-radius:22px;
  filter:drop-shadow(0 14px 36px rgba(0,127,247,.45))}
.hero h1{font-size:clamp(34px,7vw,56px); line-height:1.05; margin:0 0 10px; letter-spacing:-.03em}
.hero h1 .v{color:var(--accent)}
.hero .tagline{font-size:clamp(17px,3.6vw,21px); color:var(--ink); font-weight:600; margin:0 0 10px}
.hero .sub{max-width:620px; margin:0 auto 28px; color:var(--muted); font-size:16.5px}
.cta-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; align-items:center}
.badge-soon{display:inline-flex; align-items:center; gap:10px; background:var(--panel);
  border:1px solid var(--line); color:var(--ink); padding:12px 20px; border-radius:14px; font-weight:600}
.badge-soon svg{width:22px;height:22px}
.badge-soon small{display:block; color:var(--faint); font-weight:500; font-size:11.5px; letter-spacing:.04em}
.pill{display:inline-block; margin-bottom:20px; padding:6px 14px; border:1px solid var(--line);
  border-radius:999px; color:var(--accent); font-size:12.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase}

/* Features */
.section{padding:56px 0}
.section h2{font-size:clamp(24px,4.5vw,34px); letter-spacing:-.02em; margin:0 0 8px; text-align:center}
.section .lead{text-align:center; color:var(--muted); max-width:560px; margin:0 auto 36px}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px}
.card{background:linear-gradient(180deg,var(--panel),var(--panel-2)); border:1px solid var(--line);
  border-radius:var(--radius); padding:22px}
.card .ic{width:40px; height:40px; border-radius:11px; display:grid; place-items:center;
  background:rgba(0,127,247,.14); color:var(--accent); margin-bottom:14px}
.card .ic svg{width:22px; height:22px}
.card h3{margin:0 0 6px; font-size:17px}
.card p{margin:0; color:var(--muted); font-size:14.5px}

/* Strip */
.strip{background:linear-gradient(180deg,var(--panel-2),var(--bg)); border-top:1px solid var(--line);
  border-bottom:1px solid var(--line); text-align:center}
.strip .wrap{padding:44px 20px}
.strip p{color:var(--muted); max-width:640px; margin:8px auto 0}

/* Footer */
.site-footer{border-top:1px solid var(--line); padding:34px 0 48px; color:var(--faint); font-size:14px}
.site-footer .wrap{display:flex; flex-wrap:wrap; gap:16px 28px; justify-content:space-between; align-items:center}
.site-footer .links{display:flex; flex-wrap:wrap; gap:18px}
.site-footer a{color:var(--muted)}
.site-footer .copy{color:var(--faint)}

/* Legal / long-form pages */
.legal{padding:44px 0 64px}
.legal .doc{max-width:760px; margin:0 auto}
.legal h1{font-size:clamp(28px,5vw,40px); letter-spacing:-.02em; margin:0 0 6px}
.legal .updated{color:var(--faint); font-size:14px; margin:0 0 28px}
.legal h2{font-size:21px; margin:34px 0 10px; letter-spacing:-.01em}
.legal h3{font-size:16.5px; margin:20px 0 6px}
.legal p,.legal li{color:var(--muted); font-size:16px}
.legal ul{padding-left:22px} .legal li{margin:6px 0}
.legal a{color:var(--accent)}
.legal .note{background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--blue);
  border-radius:10px; padding:14px 16px; margin:18px 0}
.legal .note strong{color:var(--ink)}
hr{border:none; border-top:1px solid var(--line); margin:30px 0}

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