/* Vadium: engraved platinum. Brushed metal plates, bevels and a specular sweep. No glass, no blur panels. */
:root{
  --bg:#08080a; --bg2:#0c0c0f;
  --m1:#17181c; --m2:#1f2126; --m3:#2a2d34;
  --line:#23252b; --line2:#31343c; --edge:#3d4048;
  --ink:#f1eee8; --dim:#93918c; --dim2:#63625f;
  --up:#5cb489; --dn:#cf6b62;
  --pl1:#f4f2ec; --pl2:#d6d3ca; --pl3:#b8b5ac;
  --sans:"Geist","Inter Tight",system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,Menlo,monospace;
  --sheen:120deg;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:15px/1.55 var(--sans);-webkit-font-smoothing:antialiased;
  background-image:linear-gradient(180deg,#0b0b0e 0,#08080a 240px)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{width:min(1180px,92vw);margin:0 auto}

/* metal plate: bevel, hairline, specular sweep on hover */
.plate{position:relative;overflow:hidden;background:linear-gradient(160deg,var(--m2) 0,var(--m1) 42%,#101114 100%);
  border:1px solid var(--line2);border-radius:3px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(0,0,0,.65),0 12px 30px -22px #000}
.plate::after{content:"";position:absolute;inset:-40% -60%;pointer-events:none;
  background:linear-gradient(var(--sheen),transparent 34%,rgba(255,255,255,.09) 47%,rgba(255,255,255,.02) 53%,transparent 66%);
  transform:translateX(-28%);transition:transform .75s cubic-bezier(.2,.7,.2,1)}
.plate:hover::after{transform:translateX(28%)}

header.top{position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#101115,#0a0a0c);box-shadow:0 1px 0 rgba(255,255,255,.05),0 16px 30px -26px #000}
header.top .wrap{display:flex;align-items:center;gap:26px;height:66px}
.brand{display:flex;align-items:center;gap:11px;font-weight:600;letter-spacing:-.01em;
  text-shadow:0 1px 0 rgba(0,0,0,.9),0 -1px 0 rgba(255,255,255,.10)}
.brand img{height:26px;width:auto;filter:drop-shadow(0 1px 1px rgba(0,0,0,.7))}
.nav{display:flex;gap:24px;margin-left:auto;font-size:14px;color:var(--dim)}
.nav a{position:relative}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;
  background:linear-gradient(90deg,transparent,var(--pl3),transparent)}

.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 17px;
  border:1px solid var(--line2);border-radius:3px;cursor:pointer;font:500 14px var(--sans);color:var(--ink);
  background-image:repeating-linear-gradient(180deg,rgba(255,255,255,.07) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,#2e3138 0,#1d2026 46%,#14161a 62%,#22252b 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.65),0 6px 14px -12px #000;
  transition:background-color .18s,border-color .18s,transform .18s}
.btn:hover{border-color:var(--edge);background:linear-gradient(180deg,#2a2d34,#171a1f);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.pri{color:#0a0a0c;border-color:#f4f2ec;
  background-image:repeating-linear-gradient(180deg,rgba(255,255,255,.5) 0 1px,rgba(0,0,0,.03) 1px 3px),
    linear-gradient(180deg,#fff 0,#f1efe9 16%,#dcd9d1 44%,#bfbcb3 60%,#eae7e0 76%,#c9c6bd 100%);
  box-shadow:inset 0 2px 0 #fff,inset 0 -2px 0 rgba(0,0,0,.28),inset 1px 0 0 rgba(255,255,255,.7),inset -1px 0 0 rgba(0,0,0,.12),0 10px 24px -16px #000}
.btn.pri::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(102deg,transparent 26%,rgba(255,255,255,.9) 38%,rgba(255,255,255,.15) 44%,transparent 58%);opacity:.55}
.btn.pri:hover{background:linear-gradient(180deg,#fff,var(--pl1) 55%,var(--pl2))}
.btn.pri::before{content:"";position:absolute;inset:0;border-radius:2px;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.75) 48%,transparent 56%);
  opacity:0;transition:opacity .3s}
.btn.pri:hover::before{opacity:.55}
.btn.big{height:47px;padding:0 23px;font-size:15px}
.btn.sm{height:30px;padding:0 11px;font-size:13px;color:var(--dim);background:linear-gradient(180deg,#1b1d22,#121317)}
.btn.full{width:100%}
.btn[disabled]{opacity:.42;cursor:not-allowed;transform:none}
.btn.on{border-color:var(--ink)}

main{padding-bottom:96px}
h1{font-size:53px;line-height:1.01;letter-spacing:-.038em;font-weight:600;margin:0 0 20px;
  background:linear-gradient(180deg,#fffefb 0,#e9e6df 52%,#b9b6ae 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.85))}
h1 .dim{background:linear-gradient(180deg,#9c9a94,#6c6b67 70%,#8b8983);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none}
h2{font-size:28px;letter-spacing:-.022em;font-weight:600;margin:0 0 10px;
  background:linear-gradient(180deg,#fbf9f4,#dcd9d1 60%,#b3b0a8);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.8))}
h3{font-size:16px;letter-spacing:-.01em;font-weight:600;margin:0}
p{margin:0}
.lead{color:var(--dim);font-size:16px;max-width:52ch}
.hero{display:grid;grid-template-columns:1fr 1.02fr;gap:56px;padding:66px 0 58px;align-items:start}
.ctas{display:flex;gap:10px;margin:26px 0 22px;flex-wrap:wrap}

.ca{display:flex;align-items:center;gap:12px;padding:9px 13px;border:1px solid var(--line2);border-radius:3px;
  font-family:var(--mono);font-size:12.5px;color:var(--dim);width:fit-content;
  background:linear-gradient(180deg,#14161a,#0d0e11);box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.ca b{font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.03em;color:var(--ink);
  padding-right:12px;border-right:1px solid var(--line2)}
.ca.soon span{color:var(--dim2)}

/* desk */
.desk{border:1px solid var(--edge);border-radius:3px;overflow:hidden;
  background-image:repeating-linear-gradient(180deg,rgba(255,255,255,.07) 0 1px,rgba(0,0,0,.03) 1px 3px),
    linear-gradient(168deg,#33363d 0,#1d2026 36%,#121418 66%,#181b20 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.34),inset 2px 0 0 rgba(255,255,255,.1),inset 0 -2px 0 rgba(0,0,0,.8),0 30px 70px -46px #000}
.desk .hd{display:flex;justify-content:space-between;padding:12px 16px;font-size:12px;color:var(--dim);
  font-family:var(--mono);border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.045),transparent)}
.rowm{display:grid;grid-template-columns:26px 1fr 92px 96px 96px;gap:10px;align-items:center;padding:13px 16px;font-size:13.5px;
  border-bottom:1px solid rgba(255,255,255,.045);position:relative}
.rowm:last-child{border-bottom:0}
.rowm:hover{background:linear-gradient(90deg,rgba(255,255,255,.045),rgba(255,255,255,.012))}
.rowm .lg{width:20px;height:20px;border-radius:2px;object-fit:contain;background:#101216;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.rowm .nm{display:flex;align-items:center;gap:10px;font-weight:500}
.rowm .nm small{color:var(--dim2);font-weight:400;font-size:12px}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.rowm .r{color:var(--ink)}
.rowm .s{color:var(--dim)}
.bar{height:2px;margin-top:6px;background:rgba(255,255,255,.07)}
.bar i{display:block;height:2px;background:linear-gradient(90deg,var(--pl3),#6d6b66)}
.desk .ft{padding:11px 16px;font-size:12.5px;color:var(--dim2);display:flex;justify-content:space-between;gap:12px;
  border-top:1px solid var(--line);font-family:var(--mono)}

section.s{padding:46px 0;border-top:1px solid var(--line);position:relative}
section.s::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.13),transparent)}
.sh{max-width:62ch;margin-bottom:28px}
.sh p{color:var(--dim);margin-top:8px}

.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.door{padding:24px 21px;border:1px solid #454952;border-radius:3px;
  background-image:repeating-linear-gradient(180deg,rgba(255,255,255,.085) 0 1px,rgba(0,0,0,.04) 1px 3px),
    linear-gradient(165deg,#34373e 0,#202329 40%,#14171b 68%,#1c1f25 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.38),inset 2px 0 0 rgba(255,255,255,.12),inset 0 -2px 0 rgba(0,0,0,.75),0 20px 36px -30px #000;
  position:relative;overflow:hidden;transition:transform .25s,border-color .25s}
.door::after{content:"";position:absolute;inset:-40% -60%;pointer-events:none;
  background:linear-gradient(var(--sheen),transparent 36%,rgba(255,255,255,.10) 48%,transparent 62%);
  transform:translateX(-30%);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.door:hover{transform:translateY(-2px);border-color:var(--edge)}
.door:hover::after{transform:translateX(30%)}
.door h3{margin-bottom:8px}
.door p{color:var(--dim);font-size:14px}
.door .qs{margin-top:16px;padding-top:12px;border-top:1px solid rgba(255,255,255,.07);font-family:var(--mono);font-size:12px;color:var(--dim2)}

ol.plain{list-style:none;padding:0;margin:0;border-top:1px solid var(--line);counter-reset:n}
ol.plain li{display:grid;grid-template-columns:44px 1fr;gap:18px;padding:17px 0;border-bottom:1px solid var(--line);color:var(--dim);font-size:14.5px}
ol.plain li b{color:var(--ink);font-weight:500}
ol.plain li span:first-child{font-family:var(--mono);color:var(--pl3);font-size:12.5px;padding-top:3px;opacity:.8}

table.cmp{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;border:1px solid var(--line2);border-radius:3px;overflow:hidden}
table.cmp th,table.cmp td{text-align:left;padding:13px 15px;border-bottom:1px solid rgba(255,255,255,.05)}
table.cmp tr:last-child td{border-bottom:0}
table.cmp th{color:var(--dim2);font-weight:400;font-size:12px;font-family:var(--mono);letter-spacing:.04em;text-transform:uppercase;
  background:linear-gradient(180deg,#1a1c21,#14161a)}
table.cmp td:first-child{color:var(--dim)}
table.cmp td.y{color:var(--ink);position:relative}
table.cmp tr:hover td{background:rgba(255,255,255,.02)}

dl.faq{margin:0;border-top:1px solid var(--line)}
dl.faq div{padding:17px 0;border-bottom:1px solid var(--line)}
dl.faq dt{font-weight:500;margin-bottom:6px}
dl.faq dd{margin:0;color:var(--dim);font-size:14.5px;max-width:78ch}

.gr{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gr .c{padding:21px;border:1px solid var(--line2);border-radius:3px;
  background-image:repeating-linear-gradient(180deg,rgba(255,255,255,.075) 0 1px,rgba(0,0,0,.035) 1px 3px),
    linear-gradient(165deg,#2e3138,#181b20 58%,#111418);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.32),inset 0 -2px 0 rgba(0,0,0,.7)}
.gr .c h3{margin-bottom:7px;font-size:14.5px}
.gr .c p{color:var(--dim);font-size:13.5px}

footer{background:linear-gradient(180deg,#0a0a0c,#000);border-top:1px solid #000;padding:36px 0 42px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
footer .brand{margin-bottom:11px}
footer p{color:#7a7976;font-size:13px;max-width:34ch}
footer h4{font-size:12px;font-family:var(--mono);color:#6a6a67;font-weight:400;letter-spacing:.06em;text-transform:uppercase;margin:0 0 11px}
footer a{display:block;color:#c6c5c1;font-size:13.5px;padding:3px 0}
footer a:hover{color:#fff}
footer .bot{margin-top:28px;padding-top:17px;border-top:1px solid #16171a;display:flex;justify-content:space-between;color:#5c5c59;font-size:12px;font-family:var(--mono)}

/* app */
.shell{display:grid;grid-template-columns:1.35fr .9fr;gap:14px;padding:14px 0;min-height:calc(100vh - 66px);width:min(1320px,96vw);margin:0 auto}
.shell>.c{padding:22px;border:1px solid var(--line2);border-radius:3px;background:linear-gradient(170deg,#121418,#0b0c0f);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.mk{display:grid;grid-template-columns:24px 1fr 100px 104px;gap:10px;align-items:center;padding:12px 13px;font-size:13.5px;cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.05);position:relative}
.mk:hover{background:linear-gradient(90deg,rgba(255,255,255,.05),transparent)}
.mk.on{background:linear-gradient(90deg,rgba(255,255,255,.09),rgba(255,255,255,.02));
  box-shadow:inset 2px 0 0 var(--pl2)}
.mk .nm{display:flex;gap:9px;align-items:center;font-weight:500}
.panel{position:sticky;top:88px}
.tabs{display:flex;border:1px solid var(--line2);border-radius:3px;overflow:hidden;margin-bottom:18px;
  background:linear-gradient(180deg,#16181d,#101216)}
.tabs button{flex:1;height:35px;background:0;border:0;border-right:1px solid var(--line2);color:var(--dim);font:500 13px var(--sans);cursor:pointer;transition:color .15s,background .15s}
.tabs button:last-child{border-right:0}
.tabs button:hover{color:var(--ink)}
.tabs button.on{color:#0a0a0c;background:linear-gradient(180deg,var(--pl1),var(--pl3));text-shadow:0 1px 0 rgba(255,255,255,.5)}
.fld{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:13.5px;color:var(--dim)}
.fld b{color:var(--ink);font-family:var(--mono);font-weight:400}
.inp{width:100%;height:42px;padding:0 11px;color:var(--ink);font:400 15px var(--mono);border-radius:2px;
  background:#0a0b0e;border:1px solid var(--line2);box-shadow:inset 0 2px 4px rgba(0,0,0,.6)}
.inp:focus{outline:0;border-color:var(--pl3);box-shadow:inset 0 2px 4px rgba(0,0,0,.6),0 0 0 3px rgba(255,255,255,.05)}
select.inp{font-family:var(--sans)}
.pres{display:flex;gap:6px;margin-top:8px}
.hint{color:var(--dim2);font-size:12.5px;margin-top:10px;line-height:1.55}
.pos{padding:13px 14px;margin-bottom:10px;font-size:13px;border:1px solid var(--line2);border-radius:3px;
  background:linear-gradient(170deg,#16181d,#0f1013)}
.pos .t{display:flex;justify-content:space-between;font-weight:500;margin-bottom:8px}
.pos .t span{font-family:var(--mono);color:var(--dim)}
.pos .l{display:flex;justify-content:space-between;color:var(--dim);padding:3px 0}
.empty{border:1px dashed var(--line2);border-radius:3px;padding:26px;color:var(--dim2);font-size:13.5px;text-align:center;background:rgba(255,255,255,.012)}
.warn{color:var(--up)}
.bad{color:var(--dn)}

/* docs */
.doc{max-width:76ch}
.doc h2{margin:36px 0 12px;font-size:22px}
.doc p,.doc li{color:var(--dim);font-size:14.5px}
.doc ul{padding-left:18px}
.doc table{width:100%;border-collapse:collapse;font-size:13px;margin:16px 0;border:1px solid var(--line2)}
.doc td{border-bottom:1px solid rgba(255,255,255,.05);padding:10px;font-family:var(--mono);font-size:12.5px}
.doc td:first-child{font-family:var(--sans);color:var(--dim)}
.doc tr:last-child td{border-bottom:0}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(14px);padding:11px 17px;font-size:13.5px;opacity:0;pointer-events:none;transition:.18s;z-index:60;border-radius:3px;
  background:linear-gradient(180deg,#1b1d22,#121317);border:1px solid var(--line2);box-shadow:0 14px 30px -18px #000}
.toast.show{opacity:1;transform:translateX(-50%)}
.toast.bad{border-color:#6d3d38;color:#e8bcb7}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.7);display:none;align-items:center;justify-content:center;z-index:70}
.modal.open{display:flex}
.modal .box{padding:22px;width:min(360px,92vw);position:relative;border-radius:3px;
  background:linear-gradient(170deg,#1b1d22,#101113);border:1px solid var(--line2);box-shadow:0 30px 60px -30px #000}
.modal h3{margin-bottom:14px}
.wbtn{display:flex;align-items:center;gap:10px;width:100%;height:42px;margin-bottom:8px;padding:0 12px;cursor:pointer;font-size:14px;color:var(--ink);border-radius:2px;
  background:linear-gradient(180deg,#23252b,#16181c);border:1px solid var(--line2)}
.wbtn:hover{border-color:var(--edge)}
.wbtn img{width:20px;height:20px}
.mclose{position:absolute;right:10px;top:8px;background:0;border:0;color:var(--dim);font-size:20px;cursor:pointer}
@media (max-width:960px){
  h1{font-size:38px}
  .hero{grid-template-columns:1fr;gap:32px;padding:38px 0}
  .doors,.gr{grid-template-columns:1fr}
  .shell{grid-template-columns:1fr;width:auto;padding:12px}
  .panel{position:static}
  footer .cols{grid-template-columns:1fr}
  .nav{display:none}
  .rowm{grid-template-columns:26px 1fr 84px;row-gap:4px}
  .rowm .s:nth-child(5){display:none}
}