/* ============================================================
   TRINITY INTELLIGENCE NETWORK — terminal/typewriter design system
   pure monochrome · black bg · white ink · IBM Plex Mono only
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');

:root{
  --bg:#000; --ink:#ece5f8;
  --dim:rgba(255,255,255,.56);
  /* a11y: raised from .34 (2.9:1 — failed WCAG AA) to .52 (~5.7:1 on black) so legal/disclaimer
     text (.disc), footer copy, and labels meet the 4.5:1 body-text minimum. Kept below --dim so
     the secondary-text hierarchy survives. */
  --faint:rgba(255,255,255,.52);
  --ghost:rgba(255,255,255,.16);
  --line:rgba(255,255,255,.14);
  --line-2:rgba(255,255,255,.26);
  --panel:#070707;
  --panel-2:#0c0c0c;
  --mono:'IBM Plex Mono','SF Mono',ui-monospace,monospace;
  /* dimensional void — the one accent color (event-horizon purple) */
  --void:#8b5cf6; --void-soft:rgba(139,92,246,.55); --void-glow:rgba(139,92,246,.32);
  /* pearl — white surfaces get a reflective pearl sheen */
  --pearl:#eae3f7; --pearl-lo:#cbbaeb; --pearl-grad:linear-gradient(155deg,#ffffff 0%,#f6f0ff 20%,#d9c4f2 50%,#efe3fc 76%,#ffffff 100%);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* a11y: solid --void (#8b5cf6 ≈ 4.96:1 on black) meets the 3:1 focus-indicator minimum;
   --void-soft (.55 alpha ≈ 2.1:1) did not. Double ring keeps it visible over both the black
   background and the pearl/white buttons. */
:focus-visible{outline:2px solid var(--void);outline-offset:2px;box-shadow:0 0 0 4px rgba(139,92,246,.35)}
/* a11y: skip-to-content link — WCAG 2.4.1 Bypass Blocks. Off-screen until keyboard-focused,
   then drops into the top-left. White-on-black text (21:1) with a purple frame. */
.skip-link{position:absolute;left:8px;top:-72px;z-index:300;background:#fff;color:#000;
  border:2px solid var(--void);padding:10px 16px;border-radius:6px;font-family:var(--mono);
  font-size:13px;font-weight:600;letter-spacing:.04em;text-decoration:none;transition:top .18s}
.skip-link:focus{top:8px}
[id="main"]:focus{outline:none}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--mono);background:var(--bg);color:var(--ink);
  -webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden;
  line-height:1.55;letter-spacing:-.01em;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--void);color:#f3effb}
.wrap{width:100%;max-width:1160px;margin:0 auto;padding:0 24px}
.mono{font-family:var(--mono)}
.dim{color:var(--dim)} .faint{color:var(--faint)}
.up{text-transform:uppercase;letter-spacing:.16em}
.cursor::after{content:"_";animation:blink 1.1s steps(1) infinite;margin-left:1px}
@keyframes blink{50%{opacity:0}}

/* ---------- TOP: single fixed header wrapper (status + treasury + nav) ---------- */
.topbars{
  position:fixed;top:0;left:0;right:0;z-index:120;background:#000;
  padding-top:env(safe-area-inset-top);
}
.statusbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:11px;letter-spacing:.08em;color:var(--dim);
  padding:7px 24px;
  background:#000;border-bottom:1px solid var(--line);text-transform:uppercase;
}
.statusbar .left{display:flex;align-items:center;gap:10px}
.statusbar .dot{width:6px;height:6px;border-radius:50%;background:var(--pearl);box-shadow:0 0 8px #f3effb;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
.statusbar .right{display:flex;align-items:center;gap:18px}
@media(max-width:680px){.statusbar .right .hide-sm{display:none}}

/* ---------- TREASURY STRIP (top of every page) ---------- */
.treasury-strip{
  background:#000;border-bottom:1px solid var(--line);
}
.treasury-strip .inner{
  max-width:1160px;margin:0 auto;display:flex;align-items:stretch;
  overflow-x:auto;scrollbar-width:none;
}
.treasury-strip .inner::-webkit-scrollbar{display:none}
.tcell{
  flex:1 0 auto;min-width:118px;padding:9px 18px;border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:1px;white-space:nowrap;
}
.tcell:first-child{min-width:150px}
.tcell .k{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.tcell .v{font-size:15px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.tcell .v.pos{color:#f3effb}
.tcell.flag{flex:0 0 auto;min-width:0;justify-content:center;align-items:flex-start}
.tcell.flag .tag{font-size:9px;letter-spacing:.12em;border:1px solid var(--line-2);padding:3px 7px;color:var(--dim);text-transform:uppercase}
@media(max-width:680px){
  .tcell{min-width:104px;padding:8px 14px}
  .tcell:first-child{min-width:128px}
  .tcell .v{font-size:13px}
}

/* body padding-top is set by JS to the header height (notch-safe) */

/* ---------- NAV ---------- */
nav.main{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 24px;background:#000;border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:11px}
.brand img{width:34px;height:34px;border-radius:0;flex:0 0 auto;object-fit:contain;filter:drop-shadow(0 0 9px var(--void-glow))}
.brand .nm{font-weight:700;font-size:14px;letter-spacing:.04em}
.brand .nm small{display:block;font-size:8.5px;letter-spacing:.2em;color:var(--faint);font-weight:500}
.navlinks{display:flex;align-items:center;gap:6px}
.navlinks a{font-size:12.5px;color:var(--dim);padding:7px 11px;letter-spacing:.04em;transition:color .15s,background .15s}
.navlinks a:hover,.navlinks a.active{color:#000;background:var(--pearl)}
.btn{
  font-family:var(--mono);font-size:12.5px;font-weight:600;cursor:pointer;
  padding:9px 15px;background:transparent;color:var(--ink);border:1px solid var(--line-2);
  letter-spacing:.04em;transition:background .15s,color .15s,border-color .15s;white-space:nowrap;
}
.btn::before{content:"[ "}.btn::after{content:" ]"}
.btn:hover{background:var(--pearl);color:#000;border-color:#f3effb}
.btn.solid{background:var(--pearl);color:#000;border-color:#f3effb}
.btn.solid:hover{background:transparent;color:#f3effb;border-color:var(--line-2)}
.btn.lg{padding:13px 20px;font-size:13.5px}
.burger{display:none;width:42px;height:42px;border:1px solid var(--line-2);background:transparent;color:#f3effb;cursor:pointer;font-family:var(--mono);font-size:16px}
#walletPill{display:none;font-size:12px;border:1px solid var(--line-2);padding:8px 12px;color:var(--ink)}

/* ---------- TREASURY CHART (landing, top) ---------- */
.tchart{padding:24px 0;border-bottom:1px solid var(--line)}
.tchart .panel{border:1px solid var(--line);background:#000}
.tchart .bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--line)}
.tchart .bar .ttl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.tchart .bar .ttl::before{content:"// "}
.tc-ranges{display:flex;border:1px solid var(--line)}
.tc-ranges button{background:transparent;border:0;border-right:1px solid var(--line);color:var(--faint);font-family:var(--mono);font-size:11px;letter-spacing:.06em;padding:6px 12px;cursor:pointer;transition:background .12s,color .12s}
.tc-ranges button:last-child{border-right:0}
.tc-ranges button:hover{color:var(--ink)}
.tc-ranges button.on{background:var(--pearl);color:#000}
.tc-statrow{display:flex;gap:26px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--line)}
.tc-statrow .s .k{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);display:block}
.tc-statrow .s .v{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
.tc-chartwrap{position:relative}
.tc-mark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:230px;max-width:46%;opacity:.07;pointer-events:none}
.tchart canvas{position:relative;display:block;width:100%;height:230px}
.tchart .legend{display:flex;gap:20px;padding:10px 16px;border-top:1px solid var(--line);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.tchart .legend span{display:inline-flex;align-items:center;gap:7px}
.tchart .legend i{width:16px;height:0;border-top:2px solid #f3effb;display:inline-block}
.tchart .legend .lk i{border-top:1.5px dashed rgba(255,255,255,.5)}
.tchart .legend .flag{margin-left:auto;border:1px solid var(--line-2);padding:2px 8px;color:var(--dim);font-size:9px}
@media(max-width:680px){.tchart canvas{height:180px}.tchart .bar .stat{gap:16px}.tchart .bar .stat .v{font-size:15px}}

/* ---------- ARCHIVE (portfolio shots + integration chips) ---------- */
.shotgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
.shotcard{border:1px solid var(--line);background:var(--panel);overflow:hidden;transition:border-color .15s}
.shotcard:hover{border-color:var(--line-2)}
.shotcard .thumb{aspect-ratio:16/10;background:#0c0c0c center top/cover no-repeat;border-bottom:1px solid var(--line);transition:transform .3s ease,filter .3s;filter:brightness(.96)}
.shotcard:hover .thumb{filter:brightness(1.05)}
.shotcard .thumb.empty{display:flex;align-items:center;justify-content:center;filter:none}
.shotcard .thumb.empty span{font-size:11px;letter-spacing:.14em;color:var(--faint);text-transform:uppercase}
.shotcard .meta{padding:14px 16px}
.shotcard .meta .k{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.shotcard .meta h3{font-size:16px;font-weight:600;margin:6px 0 0;letter-spacing:-.01em}
.shotcard .meta p{font-size:12.5px;color:var(--dim);margin-top:7px;line-height:1.55}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.chip{border:1px solid var(--line-2);padding:9px 14px;font-size:12.5px;color:var(--dim);transition:background .15s,color .15s}
.chip:hover{background:var(--pearl);color:#000}
@media(max-width:760px){.shotgrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.shotgrid{grid-template-columns:1fr}}

/* ---------- CHECKOUT (enterprise payment interface) ---------- */
.co{display:grid;grid-template-columns:300px 1fr;border:1px solid var(--line);background:#000}
.co-list{border-right:1px solid var(--line);display:flex;flex-direction:column}
.co-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 18px;background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--dim);font-family:var(--mono);cursor:pointer;text-align:left;transition:background .15s,color .15s}
.co-item:hover{color:var(--ink)}
.co-item.on{background:var(--pearl);color:#000}
.co-nm{font-size:14px;font-weight:600}
.co-pr{font-size:13px;white-space:nowrap}
.co-detail{padding:26px 24px}
.co-line{font-size:18px;font-weight:600;letter-spacing:-.01em}
.co-blurb{color:var(--dim);font-size:14px;margin-top:10px;line-height:1.65;max-width:560px}
.co-inc{list-style:none;margin:16px 0 0;display:flex;flex-direction:column;gap:7px}
.co-inc li{font-size:13px;color:var(--dim);padding-left:16px;position:relative}
.co-inc li::before{content:"›";position:absolute;left:0;color:var(--ink)}
.co-calc{margin-top:22px;border:1px solid var(--line-2);padding:18px}
.co-amt{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.co-amt .co-k{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.co-tok{font-size:24px;font-weight:600;font-variant-numeric:tabular-nums}
.co-tok b{font-weight:600}
.co-eq{font-size:11.5px;color:var(--faint);margin-top:8px;letter-spacing:.02em}
.co-pay{margin-top:18px;width:100%}
.co-flow{margin-top:14px;font-size:12px;color:var(--dim);line-height:1.6}
@media(max-width:760px){.co{grid-template-columns:1fr}.co-list{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line)}.co-item{flex:0 0 auto;border-bottom:0;border-right:1px solid var(--line);flex-direction:column;align-items:flex-start;gap:6px;min-width:150px}}

/* ---------- HERO ---------- */
.hero{position:relative;padding:70px 0 56px;border-bottom:1px solid var(--line);overflow:hidden}
.hero .bh{width:min(560px,84vw);margin:0 auto 6px;display:block;filter:contrast(1.05)}
.hero .wrap{text-align:center;position:relative;z-index:2}
.hero .ey{font-size:12px;letter-spacing:.22em;color:var(--dim);text-transform:uppercase}
.hero h1{font-size:clamp(34px,7vw,68px);font-weight:700;letter-spacing:-.03em;line-height:1.0;margin:14px 0 0}
.hero .lede{max-width:600px;margin:20px auto 0;color:var(--dim);font-size:15px;line-height:1.7}
.hero .lede b{color:var(--ink);font-weight:600}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px}
.ghproof{display:inline-flex;align-items:center;gap:10px;margin-top:24px;border:1px solid var(--line-2);padding:10px 16px;color:var(--dim);font-size:13px;letter-spacing:.02em;transition:background .15s,color .15s}
.ghproof:hover{background:var(--pearl);color:#000}
.ghproof svg{width:18px;height:18px;fill:#f3effb;transition:fill .15s}
.ghproof:hover svg{fill:#000}
.ghproof b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.ghproof:hover b{color:#000}

/* ---------- SECTION primitives ---------- */
section{padding:64px 0;border-bottom:1px solid var(--line)}
.sec-label{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--void);margin-bottom:14px}
.sec-label::before{content:"// "}
h2.sec-title{font-size:clamp(26px,5vw,40px);font-weight:700;letter-spacing:-.02em;line-height:1.08}
.sec-intro{max-width:640px;color:var(--dim);font-size:15px;margin-top:14px;line-height:1.7}

/* index node grid (the four doors as terminal rows) */
.nodes{margin-top:36px;border-top:1px solid var(--line)}
.node{
  display:grid;grid-template-columns:64px 1fr auto;gap:22px;align-items:center;
  padding:26px 4px;border-bottom:1px solid var(--line);transition:background .15s;
}
.node:hover{background:var(--panel)}
.node .idx{font-size:13px;color:var(--faint);align-self:start;padding-top:4px}
.node .body h3{font-size:21px;font-weight:600;letter-spacing:-.01em}
.node .body .tag{font-size:10px;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line-2);padding:2px 7px;color:var(--dim);margin-left:10px;vertical-align:middle}
.node .body p{color:var(--dim);font-size:14px;margin-top:8px;max-width:620px;line-height:1.65}
.node .go{font-size:12.5px;color:var(--ink);border:1px solid var(--line-2);padding:9px 14px;white-space:nowrap;transition:background .15s,color .15s}
.node:hover .go{background:var(--pearl);color:#000;border-color:#f3effb}
@media(max-width:680px){.node{grid-template-columns:1fr;gap:12px}.node .go{justify-self:start}}

/* generic card grid (sub-pages) */
.grid{display:grid;gap:16px;margin-top:34px}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.card{border:1px solid var(--line);background:var(--panel);padding:24px;transition:border-color .15s,background .15s}
.card:hover{border-color:var(--line-2);background:var(--panel-2)}
.card .k{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.card h3{font-size:19px;font-weight:600;margin:10px 0 0;letter-spacing:-.01em}
.card p{color:var(--dim);font-size:14px;margin-top:10px;line-height:1.65}
.card ul{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:7px}
.card li{font-size:13px;color:var(--dim);padding-left:16px;position:relative}
.card li::before{content:"›";position:absolute;left:0;color:var(--ink)}
.price{font-size:14px;color:var(--ink);margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.price b{font-weight:600}
@media(max-width:760px){.grid.c2,.grid.c3{grid-template-columns:1fr}}

/* terminal panel (tool feel) */
.term{border:1px solid var(--line);background:#000;margin-top:30px}
.term .bar{display:flex;align-items:center;gap:8px;padding:9px 14px;border-bottom:1px solid var(--line);font-size:11px;color:var(--dim);letter-spacing:.08em}
.term .bar .o{width:9px;height:9px;border:1px solid var(--line-2);border-radius:50%}
.term .body{padding:20px 16px;font-size:13.5px;line-height:1.9;color:var(--dim);overflow-x:auto}
.term .body .l{white-space:pre-wrap}
.term .body .p{color:var(--ink)} /* prompt */
.term .body .ok{color:#f3effb}

/* steps */
.steps{counter-reset:s;margin-top:34px;border-top:1px solid var(--line)}
.steprow{display:grid;grid-template-columns:90px 1fr;gap:20px;padding:24px 4px;border-bottom:1px solid var(--line)}
.steprow .n{font-size:13px;color:var(--faint)}
.steprow h3{font-size:18px;font-weight:600}
.steprow p{color:var(--dim);font-size:14px;margin-top:8px;line-height:1.65}
@media(max-width:680px){.steprow{grid-template-columns:1fr;gap:8px}}

/* roles table (operation center) */
.roles{margin-top:30px;border:1px solid var(--line)}
.role{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;padding:18px 18px;border-bottom:1px solid var(--line);transition:background .15s}
.role:last-child{border-bottom:0}
.role:hover{background:var(--panel)}
.role .t h3{font-size:17px;font-weight:600}
.role .t p{font-size:13px;color:var(--dim);margin-top:5px;max-width:560px;line-height:1.6}
.role .pay{font-size:14px;text-align:right;white-space:nowrap}
.role .pay .amt{font-weight:600}
.role .pay small{display:block;color:var(--faint);font-size:10px;letter-spacing:.1em;text-transform:uppercase;margin-top:3px}
@media(max-width:560px){.role{grid-template-columns:1fr}.role .pay{text-align:left}}

/* footer */
footer{padding:46px 0 40px;padding-bottom:max(40px,env(safe-area-inset-bottom));color:var(--faint)}
.foot{display:flex;flex-wrap:wrap;gap:38px;justify-content:space-between}
.foot .col h4{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:11px}
.foot .col a{display:block;font-size:13px;color:var(--faint);margin:6px 0;transition:color .15s}
.foot .col a:hover{color:var(--ink)}
.disc{margin-top:34px;padding-top:20px;border-top:1px solid var(--line);font-size:11px;line-height:1.7;color:var(--faint);max-width:900px}

/* responsive nav */
@media(max-width:860px){
  .navlinks{
    position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:#000;border-bottom:1px solid var(--line);
    transform:translateY(-150%);transition:transform .25s,visibility .25s;visibility:hidden;
  }
  .navlinks.open{transform:translateY(0);visibility:visible}
  .navlinks a{padding:15px 24px;border-bottom:1px solid var(--line);font-size:15px}
  .navlinks .btn{margin:12px 24px;text-align:center}
  .burger{display:block}
  nav.main .desktop-cta{display:none}
  /* a11y fix: the burger carries .desktop-cta, so `nav.main .desktop-cta{display:none}` (0,2,1)
     was overriding `.burger{display:block}` (0,1,0) and hiding the ONLY control that opens the
     mobile nav — the menu was unreachable ≤860px. This equal-specificity, later rule restores it. */
  nav.main .burger{display:block}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}

/* ============================================================
   3D / IMMACULATE UPGRADE (Zach 2026-06-29) — monochrome depth
   ============================================================ */
/* landing leads with the treasury panel — hide the duplicate top strip there */
body.home .treasury-strip{display:none}

/* — treasury panel: raised 3D card — */
.tchart{padding:32px 0}
.tchart .panel.tpanel3d{
  background:linear-gradient(180deg,#131313 0%,#0a0a0a 55%,#060606 100%);
  border:1px solid rgba(255,255,255,.13);border-radius:9px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 0 0 1px rgba(255,255,255,.02),
    0 2px 2px rgba(0,0,0,.5),
    0 34px 80px -26px rgba(0,0,0,.95);
}
.tchart .tpanel3d .bar{border-bottom:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.tc-right{display:flex;align-items:center;gap:14px}
.tc-proj{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
  border:1px solid rgba(255,255,255,.16);border-radius:5px;padding:4px 9px;
  background:linear-gradient(180deg,#161616,#0b0b0b);box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}

/* chart well — inset depth */
.tc-chartwrap{position:relative;margin:18px 16px 10px;padding:8px 6px 2px;border-radius:7px;
  background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,.12));
  box-shadow:inset 0 2px 18px rgba(0,0,0,.78),inset 0 0 0 1px rgba(255,255,255,.03);overflow:hidden}
.tchart canvas{height:240px}
.tc-chartwrap .legend{border-top:0;padding:4px 6px 2px}

/* bottom KPI panel — holds the full treasury readout */
.tc-kpis{display:flex;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg,#0e0e0e,#060606);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);border-radius:0 0 9px 9px}
.tc-kpis .s{flex:1 1 auto;min-width:118px;padding:15px 18px;border-right:1px solid rgba(255,255,255,.06);
  display:flex;flex-direction:column;gap:3px}
.tc-kpis .s:last-child{border-right:0}
.tc-kpis .s .k{font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.tc-kpis .s .v{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums;color:#f3effb;text-shadow:0 1px 0 rgba(0,0,0,.6)}
@media(max-width:680px){.tc-kpis .s{min-width:50%}}

/* — all buttons: 3D, immaculate — */
.btn{
  background:linear-gradient(180deg,#202020,#0c0c0c);
  border:1px solid rgba(255,255,255,.16);border-radius:6px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(0,0,0,.7),0 4px 11px -3px rgba(0,0,0,.65);
  transition:transform .12s ease,box-shadow .15s,background .15s,color .15s,border-color .15s;
}
.btn:hover{background:linear-gradient(180deg,#2c2c2c,#161616);color:#f3effb;border-color:rgba(255,255,255,.3);
  transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 2px 4px rgba(0,0,0,.7),0 12px 24px -6px rgba(0,0,0,.78)}
.btn:active{transform:translateY(0);box-shadow:inset 0 2px 8px rgba(0,0,0,.88)}
.btn.solid{background:var(--pearl-grad);color:#0a0512;border-color:rgba(255,255,255,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 1px 2px rgba(0,0,0,.7),0 4px 13px -3px rgba(0,0,0,.6)}
.btn.solid:hover{background:linear-gradient(165deg,#f3effb,#f3eefc 50%,#e4ddf3);color:#0a0512;border-color:#f3effb;transform:translateY(-1px);
  box-shadow:inset 0 1px 0 #f3effb,0 2px 5px rgba(0,0,0,.7),0 13px 28px -6px rgba(0,0,0,.72)}

/* range selector — inset track, raised active pill */
.tc-ranges{border:1px solid rgba(255,255,255,.12);border-radius:7px;
  background:linear-gradient(180deg,#0a0a0a,#040404);box-shadow:inset 0 2px 7px rgba(0,0,0,.72);padding:2px;gap:2px}
.tc-ranges button{border:0;border-radius:5px;background:transparent}
.tc-ranges button:hover{color:#f3effb;background:rgba(255,255,255,.06)}
.tc-ranges button.on{background:linear-gradient(180deg,#f3effb,#dbdbdb);color:#000;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(0,0,0,.6)}

/* checkout selector + burger pick up depth too */
.co-item.on{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 3px rgba(0,0,0,.5)}
.burger{background:linear-gradient(180deg,#202020,#0c0c0c);border-radius:6px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 2px 6px rgba(0,0,0,.6)}

/* ---- centered treasury value headline (top of panel) ---- */
.tc-hero{display:flex;flex-direction:column;align-items:center;gap:5px;padding:20px 16px 6px;text-align:center}
.tc-hero .k{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.tc-hero .big{font-size:clamp(32px,5vw,46px);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.015em;line-height:1;color:#f3effb;text-shadow:0 2px 8px rgba(0,0,0,.75)}
.tc-hero .chg{font-size:13px;color:var(--dim);font-variant-numeric:tabular-nums}

/* ---- 3D depth on every surface — professional, raised ---- */
.card,.shotcard{
  background:linear-gradient(180deg,#111111,#080808);
  border:1px solid rgba(255,255,255,.10);border-radius:8px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 2px 3px rgba(0,0,0,.45),0 16px 34px -18px rgba(0,0,0,.85);
  transition:transform .18s ease,box-shadow .2s,border-color .2s,background .2s;
}
.card:hover,.shotcard:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 5px 8px rgba(0,0,0,.5),0 26px 50px -20px rgba(0,0,0,.92)}
.term{background:linear-gradient(180deg,#0c0c0c,#060606);border:1px solid rgba(255,255,255,.12);border-radius:8px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 20px 44px -22px rgba(0,0,0,.85)}
.term .body{box-shadow:inset 0 2px 16px rgba(0,0,0,.6)}
.co{border-radius:8px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 22px 48px -24px rgba(0,0,0,.85)}
.careers-row{background:linear-gradient(180deg,#111111,#080808);border-radius:8px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 16px 34px -18px rgba(0,0,0,.85)}
.node{border-radius:6px;transition:transform .15s ease,background .15s}
.node:hover{transform:translateY(-2px)}
.roles{border-radius:8px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 16px 36px -20px rgba(0,0,0,.8)}

/* ---- treasury black-hole watermark: glow + levitation ---- */
.tc-mark{
  width:266px;max-width:50%;opacity:.14;
  filter:drop-shadow(0 0 22px rgba(255,255,255,.32)) drop-shadow(0 0 64px rgba(255,255,255,.14));
  animation:tcFloat 7s ease-in-out infinite, tcGlow 5.5s ease-in-out infinite;
  will-change:transform,opacity,filter;
}
@keyframes tcFloat{
  0%,100%{transform:translate(-50%,calc(-50% - 8px))}
  50%{transform:translate(-50%,calc(-50% + 8px))}
}
@keyframes tcGlow{
  0%,100%{opacity:.11;filter:drop-shadow(0 0 16px rgba(255,255,255,.22)) drop-shadow(0 0 46px rgba(255,255,255,.10))}
  50%{opacity:.19;filter:drop-shadow(0 0 34px rgba(255,255,255,.44)) drop-shadow(0 0 90px rgba(255,255,255,.22))}
}
@media(prefers-reduced-motion:reduce){.tc-mark{animation:none;opacity:.12}}

/* ---- watermark: centered, gentler float (no bottom clipping) ---- */
.tc-mark{top:48%;width:218px;max-width:40%}
@keyframes tcFloat{0%,100%{transform:translate(-50%,calc(-50% - 4px))}50%{transform:translate(-50%,calc(-50% + 4px))}}

/* ---- checkout treasury destination ---- */
.co-dest{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.co-dest .co-k{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.co-dest code{font-family:var(--mono);font-size:12px;color:var(--ink);word-break:break-all;flex:1 1 auto}
.co-copy{font-family:var(--mono);font-size:10px;letter-spacing:.08em;padding:5px 10px;background:linear-gradient(180deg,#1f1f1f,#0c0c0c);color:#f3effb;border:1px solid rgba(255,255,255,.16);border-radius:5px;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.co-copy:hover{background:var(--pearl);color:#000}

/* ============================================================
   LIVE ORDER FLOW + REACTIVE TREASURY + GLOW (2026-06-29)
   ============================================================ */
.tc-main{display:flex;align-items:stretch}
.tc-main .tc-chartwrap{flex:1 1 auto;margin:18px 0 8px 16px}
.tc-book{flex:0 0 300px;border-left:1px solid var(--line);display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.12))}
.tc-book-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.tc-book-px{font-size:12.5px;color:#f3effb;font-variant-numeric:tabular-nums;text-shadow:0 0 14px rgba(255,255,255,.25)}
.tc-book-cols{display:grid;grid-template-columns:1fr 1fr 1fr .8fr;gap:8px;padding:8px 14px;border-bottom:1px solid var(--line);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.tc-book-cols .r{text-align:right}
.tc-book-rows{flex:1 1 auto;overflow:hidden;display:flex;flex-direction:column;max-height:232px}
.tc-row{display:grid;grid-template-columns:1fr 1fr 1fr .8fr;gap:8px;padding:6px 14px;font-size:11px;font-variant-numeric:tabular-nums;border-bottom:1px solid rgba(255,255,255,.04)}
.tc-row .r{text-align:right;color:var(--dim)}
.tc-row .tdim{color:var(--faint);font-size:10px}
.tc-row .side{font-weight:600;letter-spacing:.06em}
.tc-row.buy .side{color:#8b5cf6;text-shadow:0 0 12px rgba(139,92,246,.4)}
.tc-row.sell .side{color:#ff5a6a;text-shadow:0 0 12px rgba(255,90,106,.4)}
.tc-row.buy{animation:rowInBuy .55s ease}
.tc-row.sell{animation:rowInSell .55s ease}
@keyframes rowInBuy{0%{opacity:0;transform:translateY(-4px);background:rgba(139,92,246,.18)}100%{opacity:1;transform:none;background:transparent}}
@keyframes rowInSell{0%{opacity:0;transform:translateY(-4px);background:rgba(255,90,106,.18)}100%{opacity:1;transform:none;background:transparent}}
.tc-hero .big{transition:color .12s ease,text-shadow .35s ease}
.tc-hero .big.flash-up{color:#8b5cf6;text-shadow:0 0 26px rgba(139,92,246,.55)}
.tc-hero .big.flash-down{color:#ff5a6a;text-shadow:0 0 26px rgba(255,90,106,.55)}
@media(max-width:760px){.tc-main{flex-direction:column}.tc-main .tc-chartwrap{margin:18px 16px 8px}.tc-book{flex:auto;border-left:0;border-top:1px solid var(--line)}.tc-book-rows{max-height:200px}}

/* top treasury strip lives in the panel now — remove it everywhere */
.treasury-strip{display:none}

/* glow / higher-quality polish */
.tc-hero .big{text-shadow:0 0 30px rgba(255,255,255,.16),0 2px 8px rgba(0,0,0,.75)}
.hero h1{text-shadow:0 0 48px rgba(255,255,255,.10)}
h2.sec-title{text-shadow:0 0 30px rgba(255,255,255,.06)}
.btn.solid{box-shadow:inset 0 1.5px 0 rgba(255,255,255,1),inset 0 -12px 20px -10px rgba(139,92,246,.42),0 0 34px rgba(176,156,228,.34),0 4px 14px -3px rgba(0,0,0,.6)}
.btn.solid:hover{box-shadow:inset 0 1px 0 #f3effb,inset 0 -9px 16px -9px rgba(139,92,246,.36),0 0 40px rgba(176,156,228,.30),0 13px 28px -6px rgba(0,0,0,.72)}
.tpanel3d{box-shadow:inset 0 1px 0 rgba(255,255,255,.13),inset 0 0 0 1px rgba(255,255,255,.02),0 0 56px rgba(255,255,255,.035),0 34px 80px -26px rgba(0,0,0,.95)}
.card:hover,.shotcard:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 0 30px rgba(255,255,255,.06),0 26px 50px -20px rgba(0,0,0,.92)}

/* ---- order-book template: pressure meter + depth bars + directional price ---- */
.tc-book-head .lbl{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.tc-book-px{transition:color .2s}
.tc-book-px.up{color:#8b5cf6;text-shadow:0 0 14px rgba(139,92,246,.45)}
.tc-book-px.down{color:#ff5a6a;text-shadow:0 0 14px rgba(255,90,106,.45)}
.tc-pressure{display:flex;height:5px;background:#0a0a0a;border-bottom:1px solid var(--line);overflow:hidden}
.tc-pressure .pbuy{background:linear-gradient(90deg,rgba(139,92,246,.45),#8b5cf6);transition:width .5s ease;box-shadow:0 0 10px rgba(139,92,246,.4)}
.tc-pressure .psell{background:linear-gradient(90deg,#ff5a6a,rgba(255,90,106,.45));transition:width .5s ease;box-shadow:0 0 10px rgba(255,90,106,.4)}
.tc-pressure-lbl{display:flex;justify-content:space-between;padding:6px 14px;font-size:9px;letter-spacing:.1em;border-bottom:1px solid var(--line)}
.tc-pressure-lbl span:first-child{color:rgba(139,92,246,.85)}
.tc-pressure-lbl span:last-child{color:rgba(255,90,106,.85)}
.tc-row{position:relative;overflow:hidden}
.tc-row .bar{position:absolute;top:0;bottom:0;right:0;z-index:0;opacity:.13;pointer-events:none}
.tc-row.buy .bar{background:linear-gradient(90deg,transparent,#8b5cf6)}
.tc-row.sell .bar{background:linear-gradient(90deg,transparent,#ff5a6a)}
.tc-row>span:not(.bar){position:relative;z-index:1}

/* ---- simple treasury bar (3D depth) + connect-as-login ---- */
.treasury-bar{background:linear-gradient(180deg,#101010,#070707);border-bottom:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 26px -12px rgba(0,0,0,.85)}
.treasury-bar .inner{max-width:1160px;margin:0 auto;display:flex;align-items:stretch}
.treasury-bar .tcell{flex:1 1 auto;padding:11px 22px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:2px;white-space:nowrap}
.treasury-bar .tcell:last-child{border-right:0}
.treasury-bar .k{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.treasury-bar .v{font-size:17px;font-weight:600;color:#f3effb;font-variant-numeric:tabular-nums;text-shadow:0 0 18px rgba(255,255,255,.12);transition:color .15s}
.treasury-bar .v.up{color:#8b5cf6}
.treasury-bar .v.down{color:#ff5a6a}
.treasury-bar .flag{flex:0 0 auto;justify-content:center;padding-right:24px}
.treasury-bar .flag .tag{font-size:9px;letter-spacing:.12em;border:1px solid var(--line-2);padding:3px 8px;color:var(--dim);text-transform:uppercase}
.t_apy_dir{display:inline-block;width:0;height:0;margin-left:5px;vertical-align:middle}
.t_apy_dir.up{border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:6px solid #8b5cf6}
.t_apy_dir.down{border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid #ff5a6a}
@media(max-width:680px){.treasury-bar .inner{overflow-x:auto;scrollbar-width:none}.treasury-bar .tcell{min-width:138px}}
.btn.solid.connected{background:linear-gradient(180deg,#1c1c1c,#0b0b0b);color:#8b5cf6;border-color:rgba(139,92,246,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 18px rgba(139,92,246,.18)}
.btn.solid.connected::before,.btn.solid.connected::after{content:""}

/* ---- animated digital background ---- */
html{background:#000}
body{background:transparent}
#bgfx{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.55}

/* ============================================================
   AI ACADEMY — catalog + course player
   ============================================================ */
.backlink{display:inline-block;margin:26px 0 6px;color:var(--dim);font-size:12px;letter-spacing:.04em}
.backlink:hover{color:#f3effb}
.chead{padding:8px 0 22px;border-bottom:1px solid var(--line);margin-bottom:26px}
.ctag{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#8b5cf6;margin-bottom:12px}
.chead h1{font-size:clamp(28px,4.6vw,42px);font-weight:700;letter-spacing:-.02em;line-height:1.08}
.csub{color:var(--dim);font-size:15px;margin-top:12px;max-width:680px;line-height:1.6}
.cprog{display:flex;align-items:center;gap:12px;margin-top:18px}
.cprog-bar{flex:0 1 240px;height:5px;background:#111;border:1px solid var(--line);overflow:hidden}
.cprog-bar span{display:block;height:100%;background:linear-gradient(90deg,rgba(139,92,246,.5),#8b5cf6);transition:width .4s ease;box-shadow:0 0 10px rgba(139,92,246,.4)}
.cprog-n{font-size:11px;color:var(--faint);letter-spacing:.04em}

.course-wrap{display:grid;grid-template-columns:280px 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:70px}
.lrail{background:var(--panel)}
.lessons{list-style:none;margin:0;padding:0}
.lessons li{display:flex;align-items:flex-start;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .15s}
.lessons li:hover{background:var(--panel-2)}
.lessons li.on{background:#0e0e0e;box-shadow:inset 3px 0 0 #8b5cf6}
.lessons li .ln{font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums;padding-top:1px}
.lessons li.on .ln{color:#8b5cf6}
.lessons li .lt{font-size:12.5px;color:var(--dim);line-height:1.4;flex:1}
.lessons li.on .lt{color:#f3effb}
.lessons li.done .lt{color:var(--dim)}
.lessons li .ck{color:#8b5cf6;font-size:12px}
.lcontent{background:var(--panel);padding:26px 30px 34px}
.laudio{display:inline-flex;align-items:center;gap:9px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);border:1px solid var(--line);padding:7px 12px;margin-bottom:20px}
.laudio .dot{width:6px;height:6px;border-radius:50%;background:#8b5cf6;box-shadow:0 0 8px #8b5cf6;animation:pulse 1.8s ease infinite}
@keyframes pulse{50%{opacity:.3}}
.lcontent h2{font-size:24px;font-weight:700;letter-spacing:-.01em;margin-bottom:16px;line-height:1.15}
.lbody{font-size:15.5px;line-height:1.72;color:#d7d7de}
.lbody p{margin-bottom:15px}
.lbody b{color:#f3effb}
.lbody i{color:#c7c7cf}
.lbody ul{margin:0 0 15px 0;padding-left:20px}
.lbody li{margin-bottom:8px;color:#cfcfd6}
.builderbox{margin:24px 0 6px;border:1px solid var(--line-2);background:#040404}
.bb-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.builderbox .copy{background:#8b5cf6;border:1px solid #8b5cf6;color:#000;font-family:var(--mono);font-weight:600;font-size:11px;padding:6px 13px;cursor:pointer;letter-spacing:.04em;text-transform:uppercase;transition:background .15s,color .15s}
.builderbox .copy:hover{background:transparent;color:#8b5cf6}
.builderbox pre{margin:0;padding:16px;overflow:auto;max-height:340px;font-family:var(--mono);font-size:12.5px;line-height:1.7;color:#cfe9dd;white-space:pre-wrap;background:#040404;border:0}
.bb-foot{padding:10px 16px;border-top:1px solid var(--line);font-size:11px;color:var(--faint)}
.lnav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.lockwrap{padding:54px 0 70px;max-width:640px}
.locktag{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#8b5cf6;margin-bottom:14px}
.lockwrap h1{font-size:clamp(28px,5vw,44px);font-weight:700;letter-spacing:-.02em}

/* catalog */
.cat-track{margin:48px 0}
.cat-thead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:22px}
.cat-thead h2{font-size:22px;font-weight:700;letter-spacing:-.01em}
.cat-thead .tt{font-size:13px;color:var(--dim)}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.ccard{display:flex;flex-direction:column;border:1px solid var(--line);background:var(--panel);padding:18px 18px 16px;transition:border-color .15s,transform .15s,box-shadow .15s;cursor:pointer}
.ccard:hover{border-color:var(--line-2);transform:translateY(-2px);box-shadow:0 0 30px rgba(255,255,255,.05),0 20px 40px -18px rgba(0,0,0,.9)}
.ccard .clev{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:9px}
.ccard.free .clev{color:#8b5cf6}
.ccard h3{font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.2;margin-bottom:8px}
.ccard p{font-size:12.5px;color:var(--dim);line-height:1.55;flex:1}
.ccard .cmeta{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:10.5px;color:var(--faint);letter-spacing:.04em}
.ccard .go2{color:#f3effb}
.ccard.free .go2{color:#8b5cf6}
.cat-hero{display:flex;flex-direction:column;gap:6px;border:1px solid rgba(139,92,246,.3);background:linear-gradient(180deg,rgba(139,92,246,.04),transparent);padding:26px;margin:30px 0;box-shadow:0 0 40px rgba(139,92,246,.05)}
.cat-hero .fl{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#8b5cf6}
.cat-hero h2{font-size:clamp(22px,3.4vw,30px);font-weight:700;letter-spacing:-.01em}
.cat-hero p{color:var(--dim);font-size:14px;max-width:640px;line-height:1.6}
@media(max-width:760px){.course-wrap{grid-template-columns:1fr}.lrail{border-bottom:1px solid var(--line)}.lessons{display:flex;overflow-x:auto}.lessons li{flex:0 0 auto;min-width:200px;border-bottom:0;border-right:1px solid var(--line)}.lcontent{padding:22px 18px}}

/* lesson code blocks + subheads */
.lbody h3{font-size:17px;font-weight:600;margin:22px 0 10px;color:#f3effb;letter-spacing:-.01em}
.lbody pre{background:#040404;border:1px solid var(--line);padding:14px;overflow:auto;margin:0 0 16px;font-size:12.5px;line-height:1.6;color:#cfe9dd;white-space:pre-wrap}
.lbody code{background:#111;border:1px solid var(--line);padding:1px 5px;font-size:13px;color:#cfe9dd}
.lbody pre code{background:none;border:0;padding:0}
.lbody blockquote{border-left:2px solid rgba(139,92,246,.5);padding-left:14px;margin:0 0 15px;color:#c7c7cf;font-style:italic}

/* ---- content protection (proprietary curriculum) ---- */
.no-select, .no-select *{ -webkit-user-select:none !important; -moz-user-select:none !important; user-select:none !important; -webkit-touch-callout:none !important; }
.protect-blur{ filter:blur(16px) !important; transition:filter .12s ease; pointer-events:none; }
#protect-veil{ position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.94); color:#f3effb; font-family:var(--mono); text-align:center; padding:30px }
#protect-veil.on{ display:flex }
@media print{ html, body{ display:none !important } }

/* ============================================================
   $TRINITY TOKEN LANDING (2026-06-30)
   ============================================================ */
body.token{padding-top:0}
.tk-top{position:sticky;top:0;z-index:130;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 24px;background:rgba(0,0,0,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);padding-top:max(14px,env(safe-area-inset-top))}
.tk-topright{display:flex;align-items:center;gap:12px}
.tk-top .tg{display:inline-flex;align-items:center;color:var(--dim);transition:color .15s}
.tk-top .tg:hover{color:#f3effb}

/* hero */
.tk-hero{position:relative;text-align:center;padding:70px 0 50px;overflow:hidden}
.tk-mark{position:absolute;top:-30px;left:50%;width:480px;max-width:110%;translate:-50% 0;opacity:.14;pointer-events:none;filter:drop-shadow(0 0 16px rgba(255,255,255,.1));animation:tkFloat 7s ease-in-out infinite;z-index:0}
@keyframes tkFloat{0%,100%{translate:-50% 0}50%{translate:-50% 14px}}
.tk-hero .wrap{position:relative;z-index:1}
.tk-eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);margin-bottom:18px}
.tk-h1{font-size:clamp(58px,13vw,148px);font-weight:700;letter-spacing:-.04em;line-height:.92;background:linear-gradient(135deg,#ffffff 0%,#f0e7ff 28%,#c9b4f0 52%,#f4ecff 76%,#ffffff 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;filter:drop-shadow(0 0 42px rgba(139,92,246,.32))}
.tk-tag{font-size:clamp(16px,2.4vw,22px);color:var(--dim);margin-top:14px;letter-spacing:.01em}
.tk-treasurybox{display:inline-flex;flex-direction:column;align-items:center;gap:4px;padding:22px 48px;margin:34px auto 8px}
.tk-treasurybox .k{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.tk-big{font-size:clamp(34px,6vw,56px);font-weight:700;font-variant-numeric:tabular-nums;color:#f3effb;text-shadow:0 0 34px rgba(255,255,255,.2);letter-spacing:-.01em}
.tk-proj{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);border:1px solid var(--line);padding:3px 9px;margin-top:6px}
.tk-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.tk-sub{color:var(--dim);font-size:14px;max-width:560px;margin:20px auto 0;line-height:1.6}

/* live stats */
.tk-stats-sec{padding:0 0 8px}
.tk-stats{display:grid;grid-template-columns:repeat(6,1fr);border:1px solid var(--line);background:var(--line);gap:1px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 24px 50px -24px rgba(0,0,0,.9)}
.tk-stat{background:linear-gradient(180deg,#0d0d0d,#070707);padding:18px 16px;display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.tk-stat .l{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.tk-stat .v{font-size:19px;font-weight:600;color:#f3effb;font-variant-numeric:tabular-nums}
.tk-stat .v.pos{color:#8b5cf6;text-shadow:0 0 16px rgba(139,92,246,.35)}
@media(max-width:820px){.tk-stats{grid-template-columns:repeat(3,1fr)}}
@media(max-width:460px){.tk-stats{grid-template-columns:repeat(2,1fr)}}

/* buy steps */
.tk-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
.tk-step{border:1px solid var(--line);background:var(--panel);padding:22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.tk-step .n{font-size:13px;color:#8b5cf6;font-weight:600;letter-spacing:.1em;margin-bottom:12px}
.tk-step h3{font-size:17px;font-weight:600;margin-bottom:8px}
.tk-step p{font-size:13px;color:var(--dim);line-height:1.55}
@media(max-width:760px){.tk-steps{grid-template-columns:1fr}}
.tk-ca{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:18px;padding:16px 20px}
.tk-ca .k{display:block;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:4px}
.tk-ca .ca{font-family:var(--mono);font-size:13px;color:var(--ink)}
.tk-buycta{text-align:center;margin-top:24px}

/* APY calculator */
.tk-calc{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:10px;overflow:hidden}
.tk-calc-in{padding:26px 28px;border-right:1px solid var(--line)}
.tk-calc-in label{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:10px}
.tk-calc-in input{width:100%;padding:14px 16px;background:#040404;border:1px solid var(--line-2);color:#f3effb;font-family:var(--mono);font-size:20px;font-variant-numeric:tabular-nums;outline:none}
.tk-calc-in input:focus{border-color:rgba(139,92,246,.5)}
.tk-calc-meta{display:flex;justify-content:space-between;font-size:12px;color:var(--dim);margin-top:14px}
.tk-calc-meta .pos{color:#8b5cf6}
.tk-calc-out{padding:26px 28px;display:flex;flex-direction:column;justify-content:center;gap:6px;background:linear-gradient(180deg,rgba(139,92,246,.05),transparent)}
.tk-calc-out .k{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.tk-calc-big{font-size:clamp(30px,5vw,44px);font-weight:700;font-variant-numeric:tabular-nums;color:#8b5cf6;text-shadow:0 0 30px rgba(139,92,246,.4)}
.tk-calc-tok{font-size:13px;color:var(--dim);font-variant-numeric:tabular-nums}
@media(max-width:680px){.tk-calc{grid-template-columns:1fr}.tk-calc-in{border-right:0;border-bottom:1px solid var(--line)}}

/* logos */
.tk-logos{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.tk-logo{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--ink);border:1px solid var(--line-2);background:linear-gradient(180deg,#0e0e0e,#080808);padding:11px 18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06);transition:border-color .15s,transform .15s}
.tk-logo:hover{border-color:rgba(255,255,255,.3);transform:translateY(-1px)}
.tk-logos.soon .tk-logo{color:var(--dim);background:transparent;border-style:dashed}

/* github proof */
.tk-ghproof{display:inline-flex;align-items:center;gap:11px;border:1px solid var(--line);padding:14px 22px;color:var(--dim);font-size:14px;transition:border-color .15s,color .15s}
.tk-ghproof:hover{border-color:var(--line-2);color:#f3effb}
.tk-ghproof svg{width:20px;height:20px;fill:currentColor;flex:0 0 auto}
.tk-ghproof b{color:#f3effb;font-weight:700}

/* unlocks */
.tk-unlocks{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:8px}
.tk-unlock{border:1px solid var(--line);background:var(--panel);padding:20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.tk-unlock h3{font-size:15px;font-weight:600;margin-bottom:8px}
.tk-unlock p{font-size:12.5px;color:var(--dim);line-height:1.55}
@media(max-width:880px){.tk-unlocks{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.tk-unlocks{grid-template-columns:1fr}}

/* ecosystem / governance */
.tk-eco{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:8px}
.eco-card{border:1px solid var(--line);background:var(--panel);padding:22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05);display:flex;flex-direction:column}
.eco-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.eco-top h3{font-size:16px;font-weight:600}
.eco-live,.eco-soon{font-size:9px;letter-spacing:.14em;padding:3px 8px;border:1px solid var(--line);color:var(--faint);text-transform:uppercase;white-space:nowrap}
.eco-live{color:var(--ink);border-color:var(--line-2)}
.eco-card p{font-size:13px;color:var(--dim);line-height:1.6}
.eco-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.eco-tag{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);border:1px solid var(--line);padding:4px 9px}
.eco-link{margin-top:16px;font-size:12px;color:var(--ink);border-bottom:1px solid var(--line);align-self:flex-start;padding-bottom:2px}
.eco-link:hover{border-color:var(--line-2)}
.eco-more{background:radial-gradient(ellipse at top left,rgba(255,255,255,.04),var(--panel))}
.eco-gov{margin-top:16px;border:1px solid var(--line);border-left:2px solid var(--line-2);background:var(--panel-2);padding:22px 24px;display:flex;gap:20px;align-items:center}
.eco-gov-k{font-size:11px;letter-spacing:.18em;color:var(--faint);text-transform:uppercase;white-space:nowrap;align-self:flex-start;padding-top:3px}
.eco-gov p{font-size:14px;color:var(--dim);line-height:1.65;margin:0}
@media(max-width:760px){.tk-eco{grid-template-columns:1fr}.eco-gov{flex-direction:column;gap:10px;align-items:flex-start}}

/* enter network */
.tk-enter{text-align:center;border-top:1px solid var(--line);margin-top:20px;background:radial-gradient(ellipse at center,rgba(255,255,255,.03),transparent 70%)}

/* built-on logo marks + spacing */
.tk-logo{display:inline-flex;align-items:center}
.tk-logo .lg{display:inline-flex;width:18px;height:18px;margin-right:9px;vertical-align:-3px;color:#f3effb}
.tk-logo .lg svg{width:100%;height:100%;display:block}
.tk-logos{margin-top:18px;gap:12px}

/* ---- $TRINITY ARCADE — tap game ---- */
.tk-game{display:grid;grid-template-columns:1fr 320px;gap:14px;margin-top:10px}
.tk-game-main{border:1px solid var(--line);background:radial-gradient(ellipse at center,rgba(255,255,255,.035),var(--panel));padding:34px 28px;display:flex;flex-direction:column;align-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.tap-target{position:relative;background:none;border:0;cursor:pointer;width:230px;height:230px;display:grid;place-items:center;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:transform .06s}
.tap-target img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 38px rgba(255,255,255,.28));pointer-events:none}
.tap-target:active{transform:scale(.95)}
.tap-target.pop{animation:tapPop .18s ease}
@keyframes tapPop{0%{transform:scale(.93)}55%{transform:scale(1.05)}100%{transform:scale(1)}}
.tap-target.milestone img{filter:drop-shadow(0 0 72px rgba(139,92,246,.85))}
.tap-float{position:absolute;font-family:var(--mono);font-size:18px;font-weight:700;color:#8b5cf6;pointer-events:none;transform:translate(-50%,-50%);animation:tapFloat .7s ease forwards;text-shadow:0 0 12px rgba(139,92,246,.6)}
@keyframes tapFloat{0%{opacity:1;transform:translate(-50%,-50%)}100%{opacity:0;transform:translate(-50%,-150%)}}
.tap-count{font-size:clamp(38px,7vw,62px);font-weight:700;font-variant-numeric:tabular-nums;color:#f3effb;margin-top:20px;text-shadow:0 0 30px rgba(255,255,255,.2);line-height:1}
.tap-count-l{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-top:5px}
.tap-prog{width:100%;max-width:440px;height:7px;background:#111;border:1px solid var(--line);margin-top:22px;overflow:hidden}
.tap-prog span{display:block;height:100%;width:0;background:linear-gradient(90deg,rgba(139,92,246,.5),#8b5cf6);box-shadow:0 0 12px rgba(139,92,246,.5);transition:width .15s}
.tap-meta{display:flex;justify-content:space-between;width:100%;max-width:440px;margin-top:10px;font-size:12px;color:var(--dim)}
.tap-entries b{color:#8b5cf6}
.tk-leaderboard{border:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column}
.lb-head{padding:14px 16px;border-bottom:1px solid var(--line);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.lb-row{display:flex;align-items:center;gap:10px;padding:9px 16px;border-bottom:1px solid rgba(255,255,255,.04);font-size:12.5px;font-variant-numeric:tabular-nums}
.lb-row .lb-rank{color:var(--faint);width:18px}
.lb-row .lb-name{flex:1;color:var(--dim);font-family:var(--mono)}
.lb-row .lb-taps{color:#f3effb}
.lb-row.me{background:rgba(139,92,246,.08);box-shadow:inset 2px 0 0 #8b5cf6}
.lb-row.me .lb-name,.lb-row.me .lb-taps{color:#8b5cf6}
.lb-foot{padding:11px 16px;font-size:10.5px;color:var(--faint);margin-top:auto;border-top:1px solid var(--line)}
@media(max-width:760px){.tk-game{grid-template-columns:1fr}}

/* ============================================================
   SINGULARITY — skill arcade
   ============================================================ */
.sg-wrap{display:grid;grid-template-columns:1fr 320px;gap:14px;margin-top:10px}
.sg-stage{position:relative;border:1px solid var(--line);background:#000;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 24px 50px -24px rgba(0,0,0,.9)}
#sgCanvas{display:block;width:100%;touch-action:none;cursor:pointer}
.sg-hud{position:absolute;top:14px;left:0;right:0;display:none;flex-direction:column;align-items:center;pointer-events:none;text-align:center}
.sg-hud.on{display:flex}
.sg-hud #sgScore{font-size:34px;font-weight:700;font-variant-numeric:tabular-nums;color:#f3effb;text-shadow:0 0 18px rgba(255,255,255,.45)}
.sg-hud #sgCombo{font-size:12px;color:#8b5cf6;margin-top:2px;font-variant-numeric:tabular-nums}
.sg-overlay{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.72);backdrop-filter:blur(3px);padding:20px;overflow:auto}
.sg-overlay.hide{display:none}
.sg-card{text-align:center;max-width:440px;width:100%}
.sg-card h3{font-size:clamp(26px,5vw,38px);font-weight:700;letter-spacing:-.02em}
.sg-mode{display:inline-block;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#8b5cf6;border:1px solid rgba(139,92,246,.4);padding:4px 10px;margin-bottom:14px}
.sg-tagline{color:var(--dim);font-size:13px;margin:8px 0 16px}
.sg-disclose{text-align:left;border:1px solid var(--line);background:var(--panel);margin:0 auto 18px;max-width:410px}
.sg-disclose>div{display:flex;justify-content:space-between;gap:14px;padding:8px 14px;border-bottom:1px solid rgba(255,255,255,.05);font-size:11.5px}
.sg-disclose>div:last-child{border-bottom:0}
.sg-disclose span{color:var(--faint);white-space:nowrap}
.sg-disclose b{color:var(--ink);text-align:right;font-weight:500}
.sg-disclose b.warn{color:#ffce5a}
.sg-controls{font-size:11px;color:var(--faint);margin-top:12px;letter-spacing:.02em}
.sg-final{font-size:clamp(38px,8vw,60px);font-weight:700;color:#8b5cf6;font-variant-numeric:tabular-nums;text-shadow:0 0 30px rgba(139,92,246,.4);line-height:1;margin:8px 0}
.sg-final span{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);text-shadow:none;font-weight:500;margin-top:5px}
.sg-break{text-align:left;border:1px solid var(--line);margin:16px auto;max-width:360px}
.sg-break>div{display:flex;justify-content:space-between;padding:7px 14px;border-bottom:1px solid rgba(255,255,255,.05);font-size:12px}
.sg-break>div:last-child{border-bottom:0}
.sg-break span{color:var(--dim)} .sg-break b{color:#f3effb}
.sg-break .mlt b{color:#8b5cf6}
.sg-pf{font-size:10.5px;color:var(--faint);margin-bottom:14px}
.sg-pf code,.sg-fair code{color:var(--dim);background:#0a0a0a;border:1px solid var(--line);padding:1px 5px;font-size:10.5px}
.sg-side{border:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column}
.sg-fair{padding:11px 16px;border-top:1px solid var(--line);font-size:10.5px;color:var(--faint);margin-top:auto}
.lb-row .lb-tier{font-size:10px;color:#8b5cf6;width:48px;text-align:right}
@media(max-width:760px){.sg-wrap{grid-template-columns:1fr}}

/* ---- treasury readout: no box ---- */
.tk-treasurybox{padding:14px 0 6px !important;background:none !important;border:0 !important;box-shadow:none !important}

/* ---- the enterprise section ---- */
.ent-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:10px}
.ent-card{border:1px solid var(--line);background:var(--panel);padding:22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.ent-n{font-size:13px;color:#8b5cf6;font-weight:600;letter-spacing:.1em;margin-bottom:12px}
.ent-card h3{font-size:15px;font-weight:600;margin-bottom:8px;line-height:1.25}
.ent-card p{font-size:12.5px;color:var(--dim);line-height:1.55}
.ent-line{text-align:center;margin-top:28px;font-size:clamp(15px,2.2vw,19px);color:var(--dim)}
.ent-line b{color:#f3effb}
@media(max-width:880px){.ent-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.ent-grid{grid-template-columns:1fr}}

/* ============================================================
   MOBILE / TABLET — token landing
   ============================================================ */
html,body{overflow-x:hidden;max-width:100%}
@media(max-width:760px){
  .tk-top{padding:11px 16px;padding-top:max(11px,env(safe-area-inset-top))}
  .tk-top .brand .nm small{display:none}
  .tk-top .brand img{width:28px;height:28px}
  .tk-top #connectBtn{font-size:10px;padding:9px 11px;letter-spacing:.02em}
  .tk-topright{gap:9px}
  .tk-hero{padding:44px 0 32px}
  .tk-mark{width:320px;max-width:80vw;top:-4px}
  .tk-h1{font-size:clamp(42px,14vw,78px)}
  .tk-tag{font-size:15px}
  .tk-eyebrow{font-size:11px;margin-bottom:14px}
  .tk-cta{flex-direction:column;align-items:stretch;max-width:340px;margin:26px auto 0}
  .tk-cta .btn{width:100%;text-align:center}
  .tk-big{font-size:clamp(30px,9vw,42px)}
  .tk-sub{font-size:13px;padding:0 4px}
}
@media(max-width:480px){
  .wrap{padding:0 18px}
  .tk-h1{font-size:clamp(38px,13vw,62px)}
  .sec-title{font-size:clamp(22px,6.4vw,30px)}
  .tk-steps,.tk-calc{gap:10px}
}


/* defensive: never allow horizontal scroll; grids never blow out */
.tk-stats-sec,.tk-hero,.tk-ent,.tk-game-sec{overflow-x:clip}
.tk-stat{min-width:0}
.tk-stat .v{overflow:hidden;text-overflow:ellipsis;max-width:100%}
@media(max-width:760px){ .tk-eyebrow{letter-spacing:.1em;font-size:10px} .tk-sub{font-size:12.5px} }

/* left-align the token landing (per request) */
.tk-hero{text-align:left}
.tk-treasurybox{align-items:flex-start;margin-left:0;margin-right:auto}
.tk-cta{justify-content:flex-start}
.tk-sub{margin-left:0;margin-right:0;text-align:left}
.tk-enter{text-align:left;background:none}
.tk-enter .tk-cta{justify-content:flex-start}
.ent-line{text-align:left}
.tk-buycta{text-align:left}
.tk-mark{left:38%}
@media(max-width:760px){ .tk-mark{left:46%} .tk-cta{align-items:flex-start} }

/* ---- staking panel ---- */
.stakebox{padding:0;overflow:hidden}
.stk-connect{padding:44px 30px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px}
.stk-connect p{color:var(--dim);font-size:15px;max-width:400px;line-height:1.55}
.stk-top{display:flex;justify-content:space-between;align-items:flex-start;padding:24px 28px;border-bottom:1px solid var(--line)}
.stk-avail{display:flex;flex-direction:column;gap:6px}
.stk-avail .k{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.stk-bal{font-size:clamp(24px,4vw,34px);font-weight:700;font-variant-numeric:tabular-nums;color:#f3effb}
.stk-bal b{color:#8b5cf6;text-shadow:0 0 18px rgba(139,92,246,.35)}
.stk-wal{font-family:var(--mono);font-size:12px;color:var(--dim);border:1px solid var(--line);padding:7px 11px}
.stk-form{padding:24px 28px;display:flex;flex-direction:column;gap:14px}
.stk-inwrap{display:flex;border:1px solid var(--line-2);background:#040404}
.stk-inwrap input{flex:1;background:none;border:0;color:#f3effb;font-family:var(--mono);font-size:22px;padding:16px 18px;outline:none;font-variant-numeric:tabular-nums;min-width:0}
.stk-max{background:#0e0e0e;border:0;border-left:1px solid var(--line);color:#8b5cf6;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.08em;padding:0 18px;cursor:pointer}
.stk-max:hover{background:#8b5cf6;color:#000}
.stk-rw{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--dim)}
.stk-rw i{color:#8b5cf6;font-style:normal}
.stk-rw b{color:#f3effb;font-variant-numeric:tabular-nums}
.stk-stats{display:flex;border-top:1px solid var(--line)}
.stk-stats>div{flex:1;padding:16px 28px;display:flex;flex-direction:column;gap:4px}
.stk-stats>div+div{border-left:1px solid var(--line)}
.stk-stats .k{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.stk-stats .v{font-size:16px;font-weight:600;color:#f3effb;font-variant-numeric:tabular-nums}
.stk-stats .v.pos{color:#8b5cf6}
.stk-note{padding:13px 28px;border-top:1px solid var(--line);font-size:11.5px;color:var(--faint);line-height:1.5}
@media(max-width:560px){.stk-top{flex-direction:column;gap:12px}.stk-stats{flex-direction:column}.stk-stats>div+div{border-left:0;border-top:1px solid var(--line)}}

/* ---- enterprise build packages (premium offers) ---- */
.pkgs{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:8px}
.pkg{position:relative;border:1px solid var(--line);background:var(--panel);padding:28px;display:flex;flex-direction:column;box-shadow:inset 0 1px 0 rgba(255,255,255,.05);transition:border-color .15s,transform .15s,box-shadow .15s}
.pkg:hover{border-color:var(--line-2);transform:translateY(-2px);box-shadow:0 0 40px rgba(255,255,255,.04),0 26px 50px -22px rgba(0,0,0,.9)}
.pkg.feat{border-color:rgba(139,92,246,.45);box-shadow:0 0 40px rgba(139,92,246,.07),inset 0 1px 0 rgba(255,255,255,.06)}
.pkg-badge{position:absolute;top:0;right:20px;background:#8b5cf6;color:#000;font-size:9px;font-weight:700;letter-spacing:.14em;padding:5px 11px}
.pkg-tier{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:10px}
.pkg.feat .pkg-tier{color:#8b5cf6}
.pkg h3{font-size:20px;font-weight:700;margin-bottom:10px;letter-spacing:-.01em}
.pkg>p{color:var(--dim);font-size:13.5px;line-height:1.55;margin-bottom:16px}
.pkg-feat{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:9px}
.pkg-feat li{position:relative;padding-left:22px;font-size:13px;color:#cfcfd6;line-height:1.4}
.pkg-feat li::before{content:'✓';position:absolute;left:0;color:#8b5cf6;font-weight:700}
.pkg-price{display:flex;gap:10px;margin:auto 0 18px;border-top:1px solid var(--line);padding-top:18px}
.pp-card,.pp-tok{flex:1;display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px solid var(--line)}
.pp-tok{border-color:rgba(139,92,246,.4);background:linear-gradient(180deg,rgba(139,92,246,.06),transparent)}
.pp-card span,.pp-tok span{font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.pp-tok span{color:#8b5cf6}
.pp-card b{font-size:22px;font-weight:700;color:#f3effb;font-variant-numeric:tabular-nums}
.pp-tok b{font-size:22px;font-weight:700;color:#8b5cf6;font-variant-numeric:tabular-nums;text-shadow:0 0 16px rgba(139,92,246,.3)}
.pkg-btns{display:flex;gap:10px}
.pkg-btns .btn{flex:1;justify-content:center;text-align:center;font-size:12px;padding:12px 10px}
@media(max-width:760px){.pkgs{grid-template-columns:1fr}.pkg-btns{flex-direction:column}}
/* two ways to pay */
.pay2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px}
.pay2-card{border:1px solid var(--line);background:var(--panel);padding:24px}
.pay2-card.acc{border-color:rgba(139,92,246,.4);background:linear-gradient(180deg,rgba(139,92,246,.05),transparent)}
.pay2-card .k{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.pay2-card.acc .k{color:#8b5cf6}
.pay2-card h3{font-size:18px;margin:8px 0}
.pay2-card p{color:var(--dim);font-size:13px;line-height:1.55}
@media(max-width:600px){.pay2{grid-template-columns:1fr}}