@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&family=Inter:wght@300;400;500;600&display=swap');
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --black: #060401; --black2: rgba(6,4,1,0.85); --black3: rgba(6,4,1,0.7);
  --green: #39ff14; --green-dim: #1a7a08; --green-muted: rgba(57,255,20,0.1); --green-border: rgba(57,255,20,0.3);
  --white: #f0ede6; --white-dim: rgba(240,237,230,0.55); --white-faint: rgba(240,237,230,0.2);
  --amber: #ffaa44; --red: #ff5555; --blue: #6cb6ff;
  --mono: 'JetBrains Mono', monospace; --sans: 'Inter', sans-serif;
}
html, body { width:100%; height:100%; background:#060401; color:var(--white); font-family:var(--sans); }
body.deck-body { overflow:hidden; user-select:none; opacity:0; transition:opacity .35s ease; }
body.deck-body.ready { opacity:1; }

#matrixCanvas { position:fixed; inset:0; width:100%; height:100%; z-index:0; }

/* ---- deck ---- */
.deck { width:100vw; height:100vh; position:relative; z-index:1; overflow:hidden; }
.slide { position:absolute; inset:0; display:flex; flex-direction:column; padding:44px 60px; opacity:0; pointer-events:none; transition:opacity 0.4s ease; overflow:hidden; }
.slide.active { opacity:1; pointer-events:all; }
.slide::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse at center, rgba(6,4,1,0.82) 40%, rgba(6,4,1,0.65) 100%); z-index:0; pointer-events:none; }
.slide > * { position:relative; z-index:1; }

/* ---- nav / progress / status ---- */
.nav { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:16px; z-index:100; background:rgba(6,4,1,0.9); border:0.5px solid var(--green-border); padding:10px 20px; border-radius:40px; backdrop-filter:blur(12px); box-shadow:0 0 20px rgba(57,255,20,0.08); }
.nav-btn { background:none; border:none; color:var(--green); font-family:var(--mono); font-size:13px; cursor:pointer; padding:2px 8px; opacity:0.7; transition:opacity 0.2s; }
.nav-btn:hover { opacity:1; } .nav-btn:disabled { opacity:0.2; cursor:default; }
.slide-counter { font-family:var(--mono); font-size:11px; color:var(--white-dim); letter-spacing:0.1em; min-width:60px; text-align:center; }
.progress { position:fixed; top:0; left:0; height:2px; background:var(--green); transition:width 0.35s ease; z-index:200; box-shadow:0 0 10px var(--green),0 0 20px rgba(57,255,20,0.4); }
.status-bar { position:fixed; top:0; left:0; right:0; height:28px; background:rgba(6,4,1,0.95); border-bottom:0.5px solid var(--green-border); display:flex; align-items:center; justify-content:center; gap:24px; z-index:150; font-family:var(--mono); font-size:9px; letter-spacing:0.16em; color:rgba(57,255,20,0.6); text-transform:uppercase; overflow:hidden; }
.status-dot { width:5px; height:5px; border-radius:50%; background:var(--green); box-shadow:0 0 6px var(--green); animation:blink 2s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* back-to-hub chip (injected by deck.js) */
.hub-back { position:fixed; top:38px; right:22px; z-index:160; font-family:var(--mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--green); text-decoration:none; border:0.5px solid var(--green-border); background:rgba(6,4,1,0.85); padding:7px 13px; border-radius:30px; opacity:0.75; transition:opacity .2s, box-shadow .2s; }
.hub-back:hover { opacity:1; box-shadow:0 0 14px rgba(57,255,20,0.15); }

/* ---- typography ---- */
.logo { font-family:var(--mono); font-size:11px; letter-spacing:0.2em; text-transform:uppercase; display:flex; align-items:center; gap:10px; margin-bottom:auto; margin-top:8px; }
.logo-mark { color:var(--green); font-weight:700; text-shadow:0 0 10px var(--green); }
.logo-text { color:var(--white-dim); }
.slide-label { font-family:var(--mono); font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:var(--green); margin-bottom:12px; text-shadow:0 0 8px rgba(57,255,20,0.4); }
.rule { width:28px; height:1.5px; background:var(--green); margin-bottom:16px; box-shadow:0 0 8px var(--green); }
.display { font-family:var(--mono); font-size:clamp(36px,5vw,64px); font-weight:700; line-height:0.93; letter-spacing:-0.03em; text-transform:uppercase; color:var(--white); }
.display .g { color:var(--green); text-shadow:0 0 20px rgba(57,255,20,0.5); }
.display .dim { -webkit-text-stroke:1.5px rgba(57,255,20,0.35); color:transparent; }
.headline { font-family:var(--mono); font-size:clamp(20px,3vw,34px); font-weight:700; text-transform:uppercase; letter-spacing:-0.02em; color:var(--white); line-height:1.1; margin-bottom:8px; }
.headline .g { color:var(--green); text-shadow:0 0 15px rgba(57,255,20,0.4); }
.body-text { font-family:var(--sans); font-size:14px; color:var(--white-dim); line-height:1.8; max-width:640px; }
.body-text strong { color:var(--white); font-weight:500; }

/* ---- components ---- */
.card { background:rgba(6,4,1,0.8); border:0.5px solid var(--green-border); border-radius:4px; padding:18px 22px; backdrop-filter:blur(4px); }
.card-dark { background:rgba(6,4,1,0.75); border:0.5px solid rgba(240,237,230,0.08); border-radius:4px; padding:16px 20px; backdrop-filter:blur(4px); }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.slide-split { display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start; margin-top:24px; flex:1; }

.stages { display:flex; gap:0; align-items:stretch; margin-top:22px; flex-wrap:wrap; }
.stage { flex:1; min-width:98px; background:rgba(6,4,1,0.8); border:0.5px solid rgba(240,237,230,0.07); padding:12px 10px; position:relative; }
.stage.active-stage { background:rgba(57,255,20,0.08); border-color:var(--green-border); }
.stage.gb { background:rgba(255,170,68,0.07); border-color:rgba(255,170,68,0.25); }
.stage-name { font-family:var(--mono); font-size:9px; letter-spacing:0.12em; text-transform:uppercase; color:var(--green); margin-bottom:5px; }
.stage.gb .stage-name { color:var(--amber); }
.stage-desc { font-size:10px; color:var(--white-faint); line-height:1.5; }
.arrow { position:absolute; right:-7px; top:50%; transform:translateY(-50%); color:var(--green); font-size:11px; z-index:2; }

.list { list-style:none; display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.list li { display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--white-dim); line-height:1.6; }
.list li::before { content:'//'; font-family:var(--mono); font-size:9px; color:var(--green); margin-top:3px; flex-shrink:0; letter-spacing:-0.05em; text-shadow:0 0 6px var(--green); }
.list li strong { color:var(--white); }

.steps { display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.step { display:flex; gap:14px; align-items:flex-start; padding:11px 16px; background:rgba(6,4,1,0.8); border:0.5px solid rgba(240,237,230,0.07); border-radius:3px; transition:border-color 0.2s; }
.step:hover { border-color:var(--green-border); }
.step-num { font-family:var(--mono); font-size:10px; font-weight:700; color:var(--green); width:22px; flex-shrink:0; margin-top:1px; text-shadow:0 0 6px var(--green); }
.step-title { font-family:var(--mono); font-size:10px; font-weight:500; text-transform:uppercase; letter-spacing:0.1em; color:var(--white); margin-bottom:2px; }
.step-desc { font-size:12px; color:var(--white-dim); line-height:1.5; }

.portal-menu { background:rgba(6,4,1,0.85); border:0.5px solid var(--green-border); border-radius:4px; overflow:hidden; box-shadow:0 0 20px rgba(57,255,20,0.06); }
.portal-menu-header { padding:9px 14px; background:rgba(57,255,20,0.08); border-bottom:0.5px solid var(--green-border); font-family:var(--mono); font-size:9px; letter-spacing:0.16em; text-transform:uppercase; color:var(--green); }
.portal-group { padding:7px 14px 3px; font-family:var(--mono); font-size:8.5px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(57,255,20,0.4); }
.portal-menu-item { padding:6px 14px; border-bottom:0.5px solid rgba(240,237,230,0.04); font-size:12px; color:var(--white-dim); display:flex; align-items:center; gap:8px; }
.portal-menu-item:last-child { border-bottom:none; }
.portal-menu-item .tagx { margin-left:auto; font-family:var(--mono); font-size:8px; letter-spacing:0.1em; color:rgba(240,237,230,0.3); text-transform:uppercase; }
.portal-dot { width:5px; height:5px; border-radius:50%; background:var(--green); flex-shrink:0; box-shadow:0 0 4px var(--green); }
.portal-dot.dim { background:var(--white-faint); box-shadow:none; }

.dont-list { list-style:none; display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.dont-list li { display:flex; gap:12px; align-items:flex-start; font-size:13px; color:var(--white-dim); line-height:1.6; padding:10px 14px; background:rgba(255,40,40,0.04); border:0.5px solid rgba(255,80,80,0.15); border-radius:3px; }
.dont-list li::before { content:'✕'; font-family:var(--mono); font-size:10px; color:#ff4444; margin-top:2px; flex-shrink:0; }

.reward-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:20px; }
.reward-card { background:rgba(57,255,20,0.07); border:0.5px solid var(--green-border); border-radius:4px; padding:18px 14px; text-align:center; }
.reward-pct { font-family:var(--mono); font-size:34px; font-weight:700; color:var(--green); line-height:1; margin-bottom:8px; text-shadow:0 0 20px rgba(57,255,20,0.5); }
.reward-label { font-family:var(--mono); font-size:9px; letter-spacing:0.1em; text-transform:uppercase; color:var(--white-dim); line-height:1.5; }

.kpi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:20px; }
.kpi { background:rgba(6,4,1,0.8); border:0.5px solid rgba(240,237,230,0.08); border-radius:4px; padding:14px 16px; }
.kpi-label { font-family:var(--mono); font-size:9px; letter-spacing:0.14em; text-transform:uppercase; color:var(--green); margin-bottom:6px; }
.kpi-desc { font-size:11.5px; color:var(--white-dim); line-height:1.5; }

.banner-alert { display:flex; align-items:center; gap:12px; padding:11px 16px; background:rgba(255,40,40,0.06); border:0.5px solid rgba(255,80,80,0.22); border-radius:4px; margin-top:12px; }
.banner-alert .bdot { width:9px; height:9px; border-radius:50%; background:#ff4444; box-shadow:0 0 10px #ff4444; flex-shrink:0; animation:blink 1.5s ease-in-out infinite; }
.banner-alert .btxt { font-size:12.5px; color:var(--white-dim); }
.banner-alert .btxt strong { color:#ff9999; font-family:var(--mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; }

.plan-table { border:0.5px solid var(--green-border); border-radius:4px; overflow:hidden; margin-top:4px; }
.plan-row { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:10px; padding:9px 16px; border-bottom:0.5px solid rgba(240,237,230,0.06); font-size:12px; align-items:center; }
.plan-row:last-child { border-bottom:none; }
.plan-row.h { background:rgba(57,255,20,0.08); font-family:var(--mono); font-size:9px; letter-spacing:0.12em; text-transform:uppercase; color:var(--green); }
.plan-row .pname { color:var(--white); font-weight:500; }
.plan-row .pfig { font-family:var(--mono); color:var(--green); font-size:12px; }

.track { height:9px; border-radius:6px; background:rgba(255,255,255,0.06); border:0.5px solid rgba(240,237,230,0.12); overflow:hidden; margin:6px 0; }
.track > div { height:100%; border-radius:6px; background:linear-gradient(90deg,var(--green-dim),var(--green)); box-shadow:0 0 12px rgba(57,255,20,0.4); }

.slide-number-bg { position:absolute; right:40px; bottom:70px; font-family:var(--mono); font-size:110px; font-weight:700; color:rgba(57,255,20,0.04); line-height:1; pointer-events:none; user-select:none; z-index:0; }
.cover-content { position:relative; z-index:2; display:flex; flex-direction:column; height:100%; }
.cover-tagline { font-family:var(--mono); font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--green); margin-bottom:6px; text-shadow:0 0 10px var(--green); }
.cover-sub { font-family:var(--sans); font-size:12px; color:var(--white-faint); letter-spacing:0.06em; }
.glow-line { height:0.5px; background:linear-gradient(90deg,transparent,var(--green),transparent); margin:16px 0; box-shadow:0 0 8px var(--green); opacity:0.4; }
.pill-row { margin-top:26px; display:flex; gap:12px; flex-wrap:wrap; }
.pill-tag { font-family:var(--mono); font-size:9px; letter-spacing:0.16em; text-transform:uppercase; color:rgba(57,255,20,0.5); border:0.5px solid rgba(57,255,20,0.2); padding:6px 14px; border-radius:2px; }

/* ============ HUB ============ */
.hub { position:relative; z-index:1; min-height:100vh; display:flex; flex-direction:column; padding:60px max(24px,6vw) 80px; }
.hub-top { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:auto; }
.hub-user { font-family:var(--mono); font-size:11px; letter-spacing:0.14em; color:var(--white-dim); text-align:right; text-transform:uppercase; }
.hub-user .u-name { color:var(--green); text-shadow:0 0 8px rgba(57,255,20,0.4); }
.btn-signout { margin-top:8px; font-family:var(--mono); font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--white-dim); background:none; border:0.5px solid rgba(240,237,230,0.15); border-radius:20px; padding:6px 14px; cursor:pointer; transition:.2s; }
.btn-signout:hover { color:var(--white); border-color:var(--green-border); }
.hub-head { margin:40px 0 6px; }
.hub-title { font-family:var(--mono); font-weight:700; text-transform:uppercase; font-size:clamp(34px,6vw,68px); line-height:0.9; letter-spacing:-0.03em; color:var(--white); }
.hub-title .g { color:var(--green); text-shadow:0 0 24px rgba(57,255,20,0.5); }
.hub-sub { font-family:var(--sans); font-size:15px; color:var(--white-dim); max-width:560px; margin-top:16px; line-height:1.7; }
.tgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; margin-top:40px; }
.tcard { display:flex; flex-direction:column; text-decoration:none; background:rgba(6,4,1,0.78); border:0.5px solid rgba(240,237,230,0.1); border-radius:8px; padding:24px 24px 20px; position:relative; overflow:hidden; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; min-height:190px; }
.tcard::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--green); opacity:0; transition:opacity .25s; }
.tcard:hover { transform:translateY(-5px); border-color:var(--green-border); box-shadow:0 12px 34px rgba(0,0,0,0.5),0 0 20px rgba(57,255,20,0.08); }
.tcard:hover::before { opacity:1; }
.tcard-num { font-family:var(--mono); font-size:11px; letter-spacing:0.2em; color:var(--green); text-shadow:0 0 8px rgba(57,255,20,0.4); }
.tcard-title { font-family:var(--mono); font-weight:700; text-transform:uppercase; font-size:20px; line-height:1.05; color:var(--white); margin:14px 0 10px; }
.tcard-blurb { font-family:var(--sans); font-size:13px; color:var(--white-dim); line-height:1.6; flex:1; }
.tcard-foot { display:flex; justify-content:space-between; align-items:center; margin-top:18px; padding-top:14px; border-top:0.5px solid rgba(240,237,230,0.08); }
.tcard-meta { font-family:var(--mono); font-size:9.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--white-faint); }
.tcard-go { font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--green); }
.tcard.soon { opacity:0.55; pointer-events:none; }
.tcard.soon .tcard-go { color:var(--amber); }

/* login */
.login-wrap { position:relative; z-index:1; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.login-card { width:100%; max-width:420px; background:rgba(6,4,1,0.9); border:0.5px solid var(--green-border); border-radius:12px; padding:44px 40px; box-shadow:0 0 50px rgba(0,0,0,0.6),0 0 24px rgba(57,255,20,0.06); backdrop-filter:blur(6px); }
.login-card .logo { margin:0 0 26px; }
.login-card h1 { font-family:var(--mono); font-weight:700; text-transform:uppercase; font-size:26px; letter-spacing:-0.02em; color:var(--white); line-height:1; }
.login-card h1 .g { color:var(--green); text-shadow:0 0 16px rgba(57,255,20,0.5); }
.login-card .sub { font-family:var(--sans); font-size:13px; color:var(--white-dim); margin:10px 0 26px; line-height:1.6; }
.field { margin-bottom:14px; }
.field label { display:block; font-family:var(--mono); font-size:9px; letter-spacing:0.16em; text-transform:uppercase; color:var(--white-dim); margin-bottom:6px; }
.field input { width:100%; background:rgba(6,4,1,0.9); border:0.5px solid rgba(240,237,230,0.16); border-radius:6px; padding:12px 14px; color:var(--white); font-family:var(--sans); font-size:14px; outline:none; transition:border-color .2s, box-shadow .2s; }
.field input:focus { border-color:var(--green); box-shadow:0 0 0 2px rgba(57,255,20,0.12); }
.btn-login { width:100%; margin-top:8px; font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:#060401; background:var(--green); border:none; border-radius:6px; padding:14px; cursor:pointer; transition:box-shadow .2s, transform .1s; box-shadow:0 0 20px rgba(57,255,20,0.25); }
.btn-login:hover { box-shadow:0 0 28px rgba(57,255,20,0.45); }
.btn-login:active { transform:translateY(1px); }
.btn-login:disabled { opacity:0.5; cursor:default; box-shadow:none; }
.login-msg { margin-top:16px; font-family:var(--mono); font-size:11px; letter-spacing:0.06em; line-height:1.5; min-height:16px; }
.login-msg.err { color:#ff7777; }
.login-msg.ok { color:var(--green); }
.login-foot { margin-top:24px; padding-top:18px; border-top:0.5px solid rgba(240,237,230,0.08); font-family:var(--mono); font-size:9px; letter-spacing:0.14em; text-transform:uppercase; color:var(--white-faint); text-align:center; }
.hidden { display:none !important; }

@media (max-width:560px){
  .hub { padding:52px 20px 70px; }
  .tgrid { grid-template-columns:1fr; }
}
@media print { .nav,.progress,.status-bar,.hub-back { display:none; } .slide { position:relative; opacity:1; pointer-events:all; page-break-after:always; width:1280px; height:720px; } body.deck-body { overflow:visible; opacity:1; } #matrixCanvas { display:none; } @page { size:1280px 720px; margin:0; } }