/* ============ Self-hosted fonts (no external requests, ever) ============ */
@font-face{font-family:'Inter Var';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/inter.woff2') format('woff2-variations')}
@font-face{font-family:'JetBrains Mono Var';font-style:normal;font-weight:100 800;font-display:swap;src:url('../fonts/jetbrains-mono.woff2') format('woff2-variations')}

/* ============ Mask.ID tokens (v2 · Quiet Signal · wordmark-only) ============ */
:root{
  --bg:#0a0b0f; --surface:#14151c; --elevated:#1e2029; --border:#2a2d38; --border-strong:#3a3e4d;
  --indigo:#5b6bff; --indigo-fill:#5262fb; --indigo-fill-hover:#4c5cf5; --indigo-text:#8f9aff;
  --violet:#8e30eb; --violet-text:#b678f6;
  --text:#f2f4f8; --text-2:#9aa0ae; --text-3:#848b9d; --ghost:#5c6170;
  --success:#2be08c; --warning:#f5d547; --danger:#ff3a5c; --info:#3dd7e5;
  --gold:#d4af37; --platinum:#dce6f2; --silver:#b9c0cc; --bronze:#c08a50;
  --font-ui:'Inter Var',ui-sans-serif,system-ui,sans-serif;
  --font-mono:'JetBrains Mono Var',ui-monospace,'SF Mono',monospace;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font-ui);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
::selection{background:rgba(91,107,255,.35)}
a{color:var(--indigo-text)}
:focus-visible{outline:2px solid var(--indigo-text);outline-offset:3px;border-radius:4px}

.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
section{padding:96px 0}
.kicker{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--indigo-text);display:block}
.kicker.red{color:var(--danger)}
h2{font-size:clamp(29px,4.4vw,39px);font-weight:700;letter-spacing:-.02em;line-height:1.15;margin:14px 0 12px}
.lede{color:var(--text-2);max-width:620px;font-size:17.5px}
.center{text-align:center}
.center .lede{margin:0 auto}

/* wordmark */
.wm{font-family:var(--font-ui);font-weight:700;letter-spacing:-.02em;color:var(--text);text-decoration:none}
.wm .id{font-family:var(--font-mono);font-weight:700;color:var(--indigo-text);letter-spacing:0;font-size:.92em}
.tagline{font-family:var(--font-mono);font-size:9.5px;line-height:1.5;letter-spacing:.13em;text-transform:uppercase;color:var(--text-3);white-space:nowrap}

/* buttons & chips */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-ui);font-size:15px;font-weight:600;padding:13px 26px;min-height:48px;border-radius:10px;cursor:pointer;border:1px solid transparent;transition:all .15s var(--ease);text-decoration:none;color:var(--text)}
.btn-primary{background:var(--indigo-fill);color:#fff}
.btn-primary:hover{background:var(--indigo-fill-hover);transform:translateY(-1px)}
.btn-ghost{background:transparent;border-color:var(--border-strong)}
.btn-ghost:hover{border-color:var(--indigo-text);color:var(--indigo-text)}
.chips{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12.5px;letter-spacing:.05em;padding:9px 17px;border-radius:999px;border:1px solid var(--border);color:var(--text-2);background:rgba(20,21,28,.6)}
.chip .tick{color:var(--success);font-size:16px;line-height:1}

/* cards */
.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:26px}
.grid{display:grid;gap:18px}
.g3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}

/* grain */
.grain{position:relative}
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ============ Header ============ */
header.site{position:sticky;top:0;z-index:50;background:rgba(10,11,15,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;max-width:1080px;margin:0 auto}
.nav-left{display:flex;align-items:center;gap:16px}
.burger{width:44px;height:44px;border-radius:10px;border:1px solid var(--border-strong);background:none;cursor:pointer;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger span{display:block;width:18px;height:1.5px;background:var(--text-2);border-radius:2px;transition:all .2s var(--ease)}
.burger:hover span{background:var(--indigo-text)}
.brand-lockup{display:flex;flex-direction:row;align-items:center;gap:12px;text-decoration:none}
.brand-lockup .wm{font-size:27px;line-height:1}
.brand-lockup .tagline{font-size:8px;border-left:1px solid var(--border-strong);padding-left:12px}
@media (max-width:540px){.brand-lockup .tagline{display:none}}
.nbr{display:none}
@media (max-width:600px){.nbr{display:inline}}
.nav-right{display:flex;align-items:center;gap:10px}
.hsearch{position:relative}
.hsearch summary{list-style:none;cursor:pointer;width:44px;height:44px;border:1px solid var(--border-strong);border-radius:10px;display:inline-flex;align-items:center;justify-content:center;color:var(--text-2);transition:all .15s var(--ease)}
.hsearch summary::-webkit-details-marker{display:none}
.hsearch summary:hover,.hsearch[open] summary{border-color:var(--indigo-text);color:var(--indigo-text)}
.hsearch-panel{position:absolute;right:0;top:calc(100% + 12px);width:min(360px,calc(100vw - 32px));background:var(--elevated);border:1px solid var(--border-strong);border-radius:13px;padding:16px;box-shadow:0 18px 44px rgba(4,5,9,.6);z-index:70}
.hsearch-panel .hint{font-size:11.5px;color:var(--text-3);margin-top:9px}
.hsearch-panel .klabel{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);display:block;margin-bottom:9px}
@media (max-width:560px){.hsearch{position:static}.hsearch-panel{left:16px;right:16px;width:auto}}

/* drawer */
.drawer{position:fixed;inset:0;z-index:60;visibility:hidden}
.drawer.open{visibility:visible}
.drawer .scrim{position:absolute;inset:0;background:rgba(5,6,9,.6);opacity:0;transition:opacity .24s var(--ease)}
.drawer.open .scrim{opacity:1}
.drawer nav{position:absolute;top:0;left:0;bottom:0;width:min(320px,86vw);background:var(--surface);border-right:1px solid var(--border);padding:26px;transform:translateX(-100%);transition:transform .24s var(--ease);display:flex;flex-direction:column;overflow-y:auto}
.drawer.open nav{transform:none}
.drawer nav a{display:block;padding:13px 10px;font-size:15.5px;font-weight:500;color:var(--text);text-decoration:none;border-radius:9px}
.drawer nav a:hover{background:var(--elevated);color:var(--indigo-text)}
.drawer nav a.tor{color:var(--violet-text)}
.drawer .close{align-self:flex-end;width:40px;height:40px;border-radius:9px;border:1px solid var(--border-strong);background:none;color:var(--text-2);font-size:17px;cursor:pointer;margin-bottom:12px}
.drawer .dsec{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ghost);padding:18px 10px 6px}

/* ============ Hero — stage fog (procedural canvas) ============ */
.hero{position:relative;overflow:hidden;text-align:center;padding:104px 24px 150px;
  background:
    radial-gradient(55% 38% at 50% 108%, rgba(91,107,255,.16), transparent 72%),
    linear-gradient(180deg,#0a0b0f 0%,#0b0c12 60%,#0d0e16 100%)}
canvas.fog{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-inner{position:relative;z-index:1}
.hero .wm-big{font-size:clamp(40px,7vw,64px);line-height:1;display:inline-block}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes dotland{0%{opacity:0;transform:translateY(-24px)}55%{opacity:1;transform:translateY(3px)}100%{opacity:1;transform:none}}
.reveal .w1{display:inline-block;animation:rise .55s var(--ease) .1s both}
.reveal .w2{display:inline-block;animation:rise .55s var(--ease) .32s both}
.reveal .dlet{display:inline-block;animation:dotland .5s var(--ease) .72s both}
.hero .dlet{position:relative}
.hero .dlet::after{content:"";position:absolute;left:50%;top:72%;width:12px;height:12px;transform:translate(-50%,-50%);border-radius:50%;animation:halo 2.8s var(--ease) 2.2s infinite}
@keyframes halo{0%{box-shadow:0 0 0 0 rgba(91,107,255,.5)}70%{box-shadow:0 0 0 22px rgba(91,107,255,0)}100%{box-shadow:0 0 0 0 rgba(91,107,255,0)}}
.hero h1{font-size:clamp(30px,5vw,52px);font-weight:700;letter-spacing:-.02em;line-height:1.1;margin-top:34px;animation:rise .6s var(--ease) .5s both}
.hero h1 .lo{color:var(--text-2)}
.hero .lede{margin:22px auto 0;animation:rise .6s var(--ease) .66s both}
.hero .cta{display:flex;gap:14px;justify-content:center;margin-top:34px;flex-wrap:wrap;animation:rise .6s var(--ease) .8s both}
.hero .chips{margin-top:30px;animation:rise .6s var(--ease) .92s both}

/* ============ Sections ============ */
.problem-card{border-left:2px solid var(--danger);border-radius:10px 14px 14px 10px}
.problem-card h3{font-size:16.5px;font-weight:700;margin-bottom:7px}
.problem-card p{font-size:14px;color:var(--text-2)}

.choice{border:1px solid var(--border);border-radius:14px;background:var(--surface);padding:26px;text-align:center}
.choice .lab{font-family:var(--font-mono);font-size:14px;font-weight:700;letter-spacing:.24em;color:var(--text-2);text-transform:uppercase}
.choice p{margin-top:12px;font-size:15.5px;color:var(--text-2)}
.good{color:var(--success);font-weight:700}
.bad{color:var(--danger);font-weight:700}
.choice3{font-size:clamp(19px,2.6vw,23px);font-weight:700;margin-top:34px}

.step-num{width:34px;height:34px;border-radius:50%;background:rgba(91,107,255,.14);border:1px solid rgba(91,107,255,.4);color:var(--indigo-text);font-family:var(--font-mono);font-weight:700;font-size:14px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:16px}
.step h3{font-size:17.5px;font-weight:700;margin-bottom:8px}
.step p{font-size:14px;color:var(--text-2)}

/* profile card */
.avatar-mono{font-weight:700;background:var(--elevated);border:1px solid var(--border-strong);color:var(--text-2);border-radius:50%;display:inline-flex;align-items:center;justify-content:center}
.badge{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;padding:6px 13px;border-radius:999px;border:1px solid}
.badge .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.badge-gold{color:var(--gold);border-color:rgba(212,175,55,.35);background:rgba(212,175,55,.07)}
.badge-silver{color:var(--silver);border-color:rgba(185,192,204,.35);background:rgba(185,192,204,.07)}
.badge-bronze{color:var(--bronze);border-color:rgba(192,138,80,.4);background:rgba(192,138,80,.08)}

.mask-chip{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;padding:11px 22px;border-radius:999px;border:1px solid var(--border-strong);color:var(--text)}
.mask-chip .pd{width:7px;height:7px;border-radius:50%;background:var(--indigo)}

.pchip{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px 20px;font-size:14px;color:var(--text-2)}
.pchip svg{flex-shrink:0;color:var(--success)}

/* footer */
footer{border-top:1px solid var(--border);background:var(--surface)}
.foot{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:34px;padding:52px 24px;max-width:1080px;margin:0 auto}
.foot h4{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);margin-bottom:14px;font-weight:600}
.foot p, .foot a.fl{font-size:13.5px;color:var(--text-2);text-decoration:none;display:block;line-height:2}
.foot a.fl:hover{color:var(--indigo-text)}
.foot .story{color:var(--indigo-text);font-size:13px;text-decoration:none;font-weight:600}
.soc{display:flex;gap:10px;margin-top:16px}
.soc a{width:34px;height:34px;border-radius:9px;border:1px solid var(--border-strong);display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:12px;text-decoration:none}
.search-box{display:flex;border:1px solid var(--border-strong);border-radius:9px;overflow:hidden}
.search-box span.at{font-family:var(--font-mono);font-size:13px;color:var(--text-3);padding:10px 0 10px 12px}
.search-box input{background:none;border:none;font-family:var(--font-mono);font-size:13px;color:var(--text);padding:10px 12px 10px 4px;flex:1;min-width:0;outline:none}
.search-box input::placeholder{color:var(--ghost)}
.search-box button{background:var(--indigo-fill);color:#fff;border:none;padding:0 15px;font-size:13px;font-weight:600;cursor:pointer;font-family:var(--font-ui)}
.legal{border-top:1px solid var(--border);padding:16px 24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;max-width:1080px;margin:0 auto}
.legal span, .legal a{font-family:var(--font-mono);font-size:10.5px;color:var(--text-3);letter-spacing:.08em;text-decoration:none}
.legal a:hover{color:var(--indigo-text)}

/* sign-in dialog */
dialog{background:var(--elevated);color:var(--text);border:1px solid var(--border-strong);border-radius:16px;padding:34px;max-width:430px;width:calc(100vw - 40px);margin:auto}
dialog::backdrop{background:rgba(5,6,9,.7);backdrop-filter:blur(3px)}
dialog h3{font-size:21px;font-weight:700;letter-spacing:-.01em}
dialog p.dp{font-size:14px;color:var(--text-2);margin-top:12px}
.sign-path{display:flex;align-items:center;gap:14px;width:100%;background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:15px 18px;margin-top:12px;cursor:pointer;color:var(--text);font-size:14.5px;font-weight:600;text-align:left;font-family:var(--font-ui)}
.sign-path:hover{border-color:var(--indigo-text)}
.sign-path svg{color:var(--indigo-text);flex-shrink:0}
.sign-path small{display:block;font-weight:400;font-size:12px;color:var(--text-3);margin-top:2px}
.keyline{font-family:var(--font-mono);font-size:10.5px;color:var(--text-3);letter-spacing:.06em;margin-top:18px;line-height:1.7}

/* reveal on scroll */
html.js .io{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
html.js .io.in{opacity:1;transform:none}

@media (max-width:860px){.foot{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot{grid-template-columns:1fr}.hero{padding:72px 20px 120px}section{padding:68px 0}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.io{opacity:1;transform:none}}

/* ============ Subpages ============ */
.page-hero{position:relative;text-align:center;padding:88px 24px 64px;border-bottom:1px solid var(--border);
  background:radial-gradient(50% 34% at 50% 112%, rgba(91,107,255,.12), transparent 72%),linear-gradient(180deg,#0a0b0f,#0c0d13)}
.page-hero h1{font-size:clamp(31px,5vw,49px);font-weight:700;letter-spacing:-.02em;line-height:1.1;margin-top:14px}
.page-hero .lede{margin:18px auto 0}
.prose{max-width:680px;margin:0 auto}
.prose h2{font-size:25px;margin:44px 0 12px}
.prose h3{font-size:18px;font-weight:600;margin:30px 0 8px}
.prose p{color:var(--text-2);margin:14px 0;font-size:16px}
.prose strong{color:var(--text)}
.prose a{font-weight:600;text-decoration:none}
.prose .mono-note{font-family:var(--font-mono);font-size:12px;color:var(--text-3);letter-spacing:.04em;line-height:1.7}
.draft-note{border:1px dashed var(--border-strong);border-radius:12px;padding:14px 18px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.05em;color:var(--warning);margin:26px 0}
.cta-band{text-align:center;padding:84px 24px;border-top:1px solid var(--border);
  background:radial-gradient(55% 40% at 50% 108%, rgba(91,107,255,.16), transparent 72%),linear-gradient(180deg,#0a0b0f,#0d0e16)}
.cta-band h2{font-size:clamp(26px,4vw,36px);font-weight:700;letter-spacing:-.02em}
.price-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:34px;position:relative}
.price-card.free{border-color:rgba(91,107,255,.5)}
.price-card .amount{font-size:44px;font-weight:700;letter-spacing:-.02em}
.price-card .amount small{font-size:15px;font-weight:500;color:var(--text-3)}
.price-card ul{list-style:none;margin-top:20px;padding:0}
.price-card li{padding:8px 0;font-size:14.5px;color:var(--text-2);display:flex;gap:10px;align-items:baseline}
.price-card li::before{content:"✓";color:var(--success);font-family:var(--font-mono);font-size:12px}
.onion{font-family:var(--font-mono);font-size:13px;word-break:break-all;background:var(--surface);border:1px solid var(--border-strong);border-radius:10px;padding:14px 18px;color:var(--violet-text)}

/* ============ Ported: the kept CURRENT footer (decision 3.10 K) ============
   Content and look of the pre-redesign footer — brand lockup, colored social
   chips, Why PIVX / Why Vector columns, Contact modal — rebuilt against the
   new token system (the compiled app.css snapshot is gone). */
.flock{display:flex;align-items:center;gap:10px}
.flock .tagline{border-left:1px solid var(--border-strong);padding-left:10px;font-size:8px}
.fsoc{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.fsoc a{width:38px;height:38px;border-radius:10px;border:1px solid var(--border-strong);display:inline-flex;align-items:center;justify-content:center;color:var(--fsc,var(--text-2));transition:all .15s var(--ease)}
.fsoc a:hover,.fsoc a:focus-visible{color:#fff;border-color:var(--fsc,var(--indigo-text))}
.fsoc a[data-social="x"]{--fsc:#fff}
.fsoc a[data-social="x"]:hover,.fsoc a[data-social="x"]:focus-visible{color:#0a0b0f;background:#fff}
.fsoc a[data-social="reddit"]{--fsc:#ff4500}
.fsoc a[data-social="telegram"]{--fsc:#29a9eb}
.fsoc a[data-social="discord"]{--fsc:#5865f2}
.fsoc svg{width:20px;height:20px}
.fsoc img{width:22px;height:22px;border-radius:5px}
.fico{width:16px;height:16px;vertical-align:-3px;margin-right:6px}
.foot h4 .fico{display:inline-block}
.legal .lsep{color:var(--ghost);padding:0 7px}
@media (max-width:700px){.legal{flex-direction:column;align-items:flex-start}}

/* Contact Us modal + form (ported behavior: data-footer-* hooks) */
dialog[data-footer-modal]{max-width:480px}
.fmodal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px}
.fmodal-head h3{font-size:19px}
.fmodal-close{width:36px;height:36px;border-radius:9px;border:1px solid var(--border-strong);background:none;color:var(--text-2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.fmodal-close:hover{color:var(--text);border-color:var(--indigo-text)}
.fmodal-close svg{width:16px;height:16px}
.fform{display:grid;gap:12px}
.fform .input,.fform .select,.fform .textarea{width:100%;background:var(--bg);border:1px solid var(--border-strong);border-radius:9px;padding:11px 13px;font-family:var(--font-ui);font-size:14px;color:var(--text);outline:none;transition:border-color .15s var(--ease)}
.fform .input::placeholder,.fform .textarea::placeholder{color:var(--ghost)}
.fform .input:focus,.fform .select:focus,.fform .textarea:focus{border-color:var(--indigo-text)}
.fform .textarea{resize:vertical;min-height:76px}
.fform .select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239aa0ae' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center}
.fform-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.footer-form-status{font-size:13px}
.footer-form-status.is-ok{color:var(--success)}
.footer-form-status.is-err{color:var(--danger)}
.footer-form-status.is-checking{color:var(--text-3)}
.fform-alt{font-size:12.5px;color:var(--text-3)}

/* Orwell proof card — real avatar instead of the monogram (decision 3.5 H) */
.avatar-img{width:64px;height:64px;border-radius:50%;object-fit:cover;border:1px solid var(--border-strong);flex-shrink:0}

/* Prose lists — the global reset zeroes list styling; merged content pages
   (accessibility, privacy, terms, tor) need real bullets. */
.prose ul,.prose ol{padding-left:24px;margin:14px 0;color:var(--text-2)}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{font-size:15px;margin:7px 0}