:root{
  --bg:#070a07;
  --bg-2:#0a0f0a;
  --panel:#0c110c;
  --green:#8ede3a;
  --green-dim:#6ba82b;
  --green-soft:#a7e86a;
  --white:#eef2e8;
  --muted:#9aa598;
  --line:#1c261a;
  --red:#e5533d;
  --amber:#e0b93a;
  --mono:'Share Tech Mono', ui-monospace, monospace;
  --disp:'Oswald', system-ui, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--white);
  font-family:var(--mono);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ---------- shared shell ---------- */
.nav-inner,.foot-inner{max-width:1180px;margin:0 auto;padding:0 26px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;font-size:13px;cursor:pointer;
  transition:.18s ease;white-space:nowrap;
}
.btn-outline{
  border:1px solid var(--green);color:var(--green);
  padding:11px 20px;border-radius:3px;background:transparent;
}
.btn-outline:hover{background:var(--green);color:#08120a;box-shadow:0 0 18px rgba(142,222,58,.4)}
.btn-solid{
  background:var(--green);color:#08120a;
  padding:13px 22px;border-radius:3px;font-weight:700;
  box-shadow:0 0 22px rgba(142,222,58,.28);
}
.btn-solid:hover{background:var(--green-soft);box-shadow:0 0 30px rgba(142,222,58,.5)}
.btn-solid.full{width:100%;margin-top:16px}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(7,10,7,.82);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(28,38,26,.6);
}
.nav-inner{height:70px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:12px}
.brand-owl svg{display:block;filter:drop-shadow(0 0 6px rgba(142,222,58,.35))}
.brand-text{display:flex;flex-direction:column;line-height:1.05}
.brand-name{font-family:var(--disp);font-weight:700;letter-spacing:.12em;font-size:17px;color:var(--white)}
.brand-ticker{color:var(--green);font-size:12px;letter-spacing:.1em}
.main-nav{display:flex;gap:34px}
.main-nav a{
  font-family:var(--disp);font-weight:500;letter-spacing:.1em;
  font-size:14px;color:var(--white);padding-bottom:4px;position:relative;
  transition:.15s;
}
.main-nav a:hover{color:var(--green)}
.main-nav a.active{color:var(--green)}
.main-nav a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--green);
}

/* ---------- hero ---------- */
.hero{position:relative;min-height:660px;display:flex;align-items:center;overflow:hidden}
.hero-media{
  position:absolute;inset:0;background-size:cover;background-position:center right;
}
.hero-overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(7,10,7,.92) 30%, rgba(7,10,7,.35) 60%, rgba(7,10,7,.15) 100%),
    linear-gradient(0deg, var(--bg) 2%, transparent 30%);
}
.hero-inner{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:60px 26px;width:100%}
.hero-copy{max-width:560px}
.hero-title{font-family:var(--disp);font-weight:700;line-height:1.02;letter-spacing:.01em;margin-bottom:26px}
.hero-title span{display:block;font-size:clamp(30px,5vw,58px);text-transform:uppercase}
.line-white{color:var(--white)}
.line-green{color:var(--green);text-shadow:0 0 22px rgba(142,222,58,.35)}
.hero-lede{color:#c7cdbe;font-size:14px;line-height:1.7;margin-bottom:26px}
.hero-status{margin-top:20px;color:var(--green);letter-spacing:.16em;font-size:12px;display:flex;align-items:center;gap:9px}
.hero-status .dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- story / chapters ---------- */
.story{max-width:1180px;margin:0 auto;padding:0 26px}
.chapter{
  display:grid;
  grid-template-columns:96px 260px 1fr 250px;
  gap:26px;align-items:stretch;
  padding:34px 0;
  border-bottom:1px solid var(--line);
  position:relative;
}
/* chapter number column */
.ch-num{position:relative;padding-left:2px}
.ch-num::after{
  content:"";position:absolute;left:15px;top:8px;bottom:-34px;width:1px;background:var(--line);
}
.ch-label{display:block;color:var(--muted);font-size:10px;letter-spacing:.22em;margin-bottom:4px}
.ch-roman{
  display:block;font-family:var(--disp);font-weight:700;color:var(--green);
  font-size:46px;line-height:1;text-shadow:0 0 16px rgba(142,222,58,.3);
}
/* body text */
.ch-title{font-family:var(--disp);font-weight:600;letter-spacing:.05em;font-size:22px;text-transform:uppercase;color:var(--white);margin-bottom:12px}
.ch-text{color:var(--muted);font-size:12.5px;line-height:1.7}
/* visual */
.ch-visual{min-width:0}
.ch-img{
  position:relative;width:100%;height:100%;min-height:170px;border-radius:5px;
  background-size:cover;background-position:center;border:1px solid var(--line);
  overflow:hidden;
}
.ch-img.coin{background-size:contain;background-repeat:no-repeat;background-color:#060a06;border-color:transparent}

/* quote */
.ch-quote{
  border:1px solid var(--line);border-radius:5px;background:var(--panel);
  padding:18px 18px 16px;position:relative;display:flex;flex-direction:column;justify-content:center;
}
.q-mark{color:var(--green);font-family:var(--disp);font-size:34px;line-height:.5;margin-bottom:8px;display:block}
.ch-quote p{color:#cfd6c6;font-size:12.5px;line-height:1.6;margin-bottom:12px}
.ch-quote p strong{color:var(--white);font-weight:400}
.ch-quote cite{color:var(--green);font-style:normal;letter-spacing:.14em;font-size:11px}

/* ---------- chapter II robinhood badge ---------- */
.rh-badge{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  gap:10px;font-size:clamp(18px,2.6vw,30px);color:#e9f4dd;font-family:var(--disp);font-weight:500;
  text-shadow:0 0 20px rgba(0,0,0,.7);
}
.rh-leaf{color:var(--green);filter:drop-shadow(0 0 8px rgba(142,222,58,.6))}

/* ---------- chapter III cards ---------- */
.ch-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;height:100%;min-height:170px}
.hc-card{
  border:1px solid #243020;border-radius:4px;background:#0b0f0b;
  padding:12px 10px;display:flex;flex-direction:column;justify-content:space-between;
  position:relative;overflow:hidden;
}
.hc-head{font-family:var(--disp);font-weight:600;letter-spacing:.04em;font-size:15px;line-height:1.1}
.hc-head.red{color:var(--red)}
.hc-head.green{color:var(--green)}
.hc-foot{font-size:9px;letter-spacing:.1em;margin-top:6px}
.hc-foot.red{color:var(--red)}
.hc-chart{flex:1;display:flex;align-items:center;margin:6px 0}
.hc-chart svg{width:100%;height:40px}
.hc-icon{font-size:22px;align-self:flex-end;margin-top:auto}
.hc-icon.warn{color:var(--amber)}
.hc-icon.err{color:var(--red)}

/* ---------- chapter IV chat overlay ---------- */
.chat-col{position:absolute;top:14px;display:flex;flex-direction:column;gap:8px}
.chat-col.left{left:14px;align-items:flex-start}
.chat-col.right{right:14px;align-items:flex-end}
.chat-bubble{
  background:rgba(10,14,10,.72);border:1px solid #2a352450;border-radius:14px;
  padding:5px 11px;font-size:11px;color:#d6dccb;display:inline-flex;align-items:center;gap:7px;
  backdrop-filter:blur(2px);white-space:nowrap;
}
.chat-bubble .cdot{width:6px;height:6px;border-radius:50%;background:var(--red);display:inline-block}

/* ---------- chapter VI terminal caption ---------- */
.term-caption{position:absolute;right:20px;bottom:18px;text-align:left;text-shadow:0 0 14px rgba(0,0,0,.8)}
.term-title{display:block;font-family:var(--disp);font-weight:700;color:var(--green);font-size:clamp(18px,2.4vw,26px);letter-spacing:.04em}
.term-sub{display:block;color:#dfe6d5;font-size:11px;letter-spacing:.06em;margin-top:4px;line-height:1.5}

/* ---------- chapter VII steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;height:100%;min-height:170px;align-items:center}
.step{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:10px 4px}
.step-num{font-family:var(--disp);font-weight:700;color:var(--green);font-size:20px}
.step-ico{font-size:26px;filter:drop-shadow(0 0 8px rgba(142,222,58,.4));line-height:1}
.step-txt{color:var(--muted);font-size:11px;line-height:1.5}

/* ---------- chapter VIII token box ---------- */
.token-box{padding:0;border:none;background:transparent;justify-content:stretch}
.tk-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:5px;overflow:hidden;height:100%}
.tk-cell{background:var(--panel);padding:12px 13px;display:flex;flex-direction:column;gap:5px;justify-content:center}
.tk-k{color:var(--muted);font-size:9.5px;letter-spacing:.14em}
.tk-v{color:var(--white);font-size:13px}
.tk-v.green{color:var(--green)}

/* ---------- chapter IX join box ---------- */
.join-box{align-items:center;text-align:center;gap:2px}
.join-title{font-family:var(--disp);font-weight:700;letter-spacing:.05em;font-size:16px;color:var(--white);margin-bottom:4px}
.join-sub{color:var(--muted);font-size:11.5px;margin-bottom:14px}
.socials{display:flex;gap:12px;justify-content:center;margin-bottom:6px}
.soc{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--white);
  transition:.15s;background:#0a0f0a;
}
.soc:hover{border-color:var(--green);color:var(--green);box-shadow:0 0 12px rgba(142,222,58,.35)}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);background:var(--bg-2);margin-top:10px}
.foot-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding-top:34px;padding-bottom:34px}
.foot-brand{display:flex;align-items:center;gap:11px}
.foot-brand-text{display:flex;flex-direction:column;line-height:1.1}
.foot-tag{color:var(--green);font-size:10px;letter-spacing:.14em}
.foot-center{text-align:center;font-family:var(--disp);font-weight:700;line-height:1.05}
.foot-line1{display:block;color:#e7ecdd;font-size:19px;letter-spacing:.03em}
.foot-line2{display:block;color:var(--green);font-size:26px;text-shadow:0 0 18px rgba(142,222,58,.3)}
.foot-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.foot-links{display:flex;gap:20px}
.foot-links a{color:var(--muted);font-size:11px;letter-spacing:.12em}
.foot-links a:hover{color:var(--green)}
.foot-copy{color:#5f6a58;font-size:10.5px}

/* ============ RESPONSIVE ============ */
@media (max-width:1000px){
  .main-nav{display:none}
  .chapter{grid-template-columns:70px 1fr;gap:16px 18px}
  .ch-num::after{display:none}
  .ch-visual{grid-column:1 / -1;order:3}
  .ch-quote,.token-box,.join-box{grid-column:1 / -1;order:4}
  .ch-body{grid-column:2}
}
@media (max-width:560px){
  .nav-inner{padding:0 16px}
  .btn-outline{padding:8px 13px;font-size:11px}
  .hero-inner{padding:40px 16px}
  .story{padding:0 16px}
  .chapter{grid-template-columns:56px 1fr;padding:26px 0}
  .ch-roman{font-size:34px}
  .ch-cards{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .tk-grid{grid-template-columns:1fr}
  .foot-inner{grid-template-columns:1fr;justify-items:center;text-align:center}
  .foot-right{align-items:center}
  .chat-bubble{font-size:9px;padding:3px 7px}
}


/* ===== VISUAL EFFECTS ===== */

/* Scanline overlay on hero */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.03) 2px,
    rgba(0, 0, 0, 0.03) 4px
  );
  animation: scanlines 8s linear infinite;
}
@keyframes scanlines {
  0% { background-position: 0 0; }
  100% { background-position: 0 100vh; }
}

/* Glitch effect on brand name hover */
.brand-name {
  position: relative;
  transition: 0.2s;
}
.brand-name:hover {
  animation: glitch 0.3s ease;
  text-shadow: 2px 0 #ff0040, -2px 0 #0ff;
}
@keyframes glitch {
  0% { text-shadow: 2px 0 #ff0040, -2px 0 #0ff; transform: translate(0); }
  20% { text-shadow: -2px 0 #ff0040, 2px 0 #0ff; transform: translate(-2px, 1px); }
  40% { text-shadow: 2px 0 #0ff, -2px 0 #ff0040; transform: translate(2px, -1px); }
  60% { text-shadow: -1px 0 #ff0040, 1px 0 #0ff; transform: translate(-1px, 2px); }
  80% { text-shadow: 1px 0 #0ff, -1px 0 #ff0040; transform: translate(1px, -2px); }
  100% { text-shadow: none; transform: translate(0); }
}

/* Neon flicker on $OIH ticker */
.brand-ticker {
  animation: neonFlicker 3s ease-in-out infinite;
}
@keyframes neonFlicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    text-shadow: 0 0 7px rgba(142,222,58,0.6), 0 0 20px rgba(142,222,58,0.3);
    opacity: 1;
  }
  20%, 24%, 55% {
    text-shadow: none;
    opacity: 0.7;
  }
}

/* Chapter scroll highlight — subtle glow, no hiding */
.chapter {
  transition: box-shadow 0.6s ease;
}
.chapter.visible {
  box-shadow: 0 0 20px rgba(142,222,58,0.06);
}

/* Chapter image glow on scroll */
.ch-img {
  transition: box-shadow 0.6s ease, transform 0.6s ease;
}
.chapter.visible .ch-img {
  box-shadow: 0 0 30px rgba(142,222,58,0.12);
}

/* Hero parallax subtle */
.hero-media {
  will-change: transform;
}

/* Social icon hover glow */
.soc:hover {
  animation: socPulse 0.4s ease;
}
@keyframes socPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}