:root {
  --void: #030508;
  --deep: #070d14;
  --surface: #0c1520;
  --lift: #111e2e;
  --edge: #1a2d42;
  --wire: rgba(255,255,255,0.06);
  --wire2: rgba(255,255,255,0.12);
  --fire: #e83a1e;
  --ember: #f06030;
  --gold: #c8952a;
  --ice: #4ab8d4;
  --pale: #a0bcd0;
  --ghost: rgba(160,188,208,0.4);
  --text: #d8e8f0;
  --dim: #607080;
  --mono: 'Share Tech Mono', monospace;
  --display: 'Rajdhani', sans-serif;
  --serif: 'Libre Baskerville', serif;
  --accent: #00d4ff;
  --accent2: #00ff88;
  --bg: #050b14;
  --surface: #080f1c;
  --surface2: #0c1628;
  --accent: #00d4ff;
  --accent2: #00ff88;
  --gold: #C9A84C;
  --gold-light: #F0CC7A;
  --red: #FF3B5C;
  --text: #d8eaf8;
  --muted: #5a7490;
  --border: rgba(0,212,255,0.12);
  --border-gold: rgba(201,168,76,0.2);
  --glow: 0 0 40px rgba(0,212,255,0.18);
  --glow-gold: 0 0 40px rgba(201,168,76,0.2);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--void); color: var(--text); font-family: var(--display); overflow-x: hidden; cursor: crosshair; }

body::after {
  content: ''; position: fixed; inset: 0; z-index: 999; 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);
}
.bg-grid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(74,184,212,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(74,184,212,0.03) 1px, transparent 1px);
  background-size: 60px 60px; animation: gridPulse 8s ease-in-out infinite;
}
@keyframes gridPulse { 0%,100%{opacity:0.5} 50%{opacity:1} }
.vignette {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 80% at 50% 50%, transparent 40%, rgba(3,5,8,0.85) 100%);
}
.prog { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 500; }
.prog-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--fire), var(--gold)); transition: width 0.08s; }

/* HERO */
.hero { position: relative; z-index: 1; min-height:85vh; display: flex; flex-direction: column; justify-content: flex-end; padding: calc(var(--website-nav-height) + 24px) 52px 72px; overflow: hidden; }
.hero-bg-text { position: absolute; inset: 0; z-index: 0; pointer-events: none; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hero-bg-text span { font-family: var(--display); font-size: clamp(8rem,22vw,22rem); font-weight: 700; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.04); text-transform: uppercase; white-space: nowrap; animation: bgDrift 20s ease-in-out infinite alternate; user-select: none; }
@keyframes bgDrift { from{transform:translateX(-3%)} to{transform:translateX(3%)} }
.hero-eyebrow { font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fire); display: flex; align-items: center; gap: 12px; margin-bottom: 20px; position: relative; z-index: 1; animation: fadeUp 0.8s 0.2s both; }
.hero-eyebrow::before { content: ''; width: 32px; height: 1px; background: var(--fire); }
.hero h1 { position: relative; z-index: 1; font-family: var(--display); font-weight: 700; font-size: clamp(3.2rem,8vw,7.5rem); line-height: 0.92; letter-spacing: -0.02em; text-transform: uppercase; margin-bottom: 28px; animation: fadeUp 0.8s 0.35s both; }
.hero h1 .line-dim { color: rgba(160,188,208,0.3); }
.hero h1 .line-fire { color: var(--fire); }
.hero-subtext { position: relative; z-index: 1; max-width: 560px; font-family: var(--serif); font-style: italic; font-size: 1.05rem; line-height: 1.7; color: var(--ghost); margin-bottom: 40px; animation: fadeUp 0.8s 0.5s both; }
.hero-stats { position: relative; z-index: 1; display: flex; border: 1px solid var(--wire); width: fit-content; animation: fadeUp 0.8s 0.65s both; }
.hs { padding: 18px 28px; border-right: 1px solid var(--wire); }
.hs:last-child { border-right: none; }
.hs-val { font-family: var(--display); font-weight: 700; font-size: 2rem; line-height: 1; color: var(--fire); }
.hs-label { font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); margin-top: 4px; }
.scroll-hint { position: absolute; bottom: 28px; right: 52px; z-index: 1; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); display: flex; align-items: center; gap: 8px; animation: fadeIn 1.5s 1.2s both; }
.scroll-hint::after { content: ''; width: 1px; height: 40px; background: linear-gradient(var(--dim), transparent); }
@keyframes fadeUp { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

/* TICKER */
.ticker-wrap { position: relative; z-index: 1; background: rgba(0,0,0,0.6); border-top: 1px solid var(--wire); border-bottom: 1px solid var(--wire); overflow: hidden; height: 36px; display: flex; align-items: center; }
.ticker-track { display: flex; gap: 60px; animation: ticker 28s linear infinite; white-space: nowrap; }
@keyframes ticker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.ti { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; }
.ti-pair { color: var(--dim); }
.ti-fire { color: var(--fire); }
.ti-ice { color: var(--ice); }
.ti-val { color: var(--pale); }

/* LAYOUT */
.wire-hr { border: none; border-top: 1px solid var(--wire); margin: 0; }
.sec { position: relative; z-index: 1; padding: 80px 52px;  margin: 0 auto; }
.sec-sm { position: relative; z-index: 1; padding: 52px;  margin: 0 auto; }
.sec-label { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fire); display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sec-label::after { content: ''; flex: 1; height: 1px; max-width: 80px; background: var(--wire2); }
.sec-title { font-family: var(--display); font-weight: 700; font-size: clamp(2rem,4vw,3.5rem); letter-spacing: -0.01em; text-transform: uppercase; line-height: 1; margin-bottom: 10px; }
.sec-title em { font-style: normal; color: var(--fire); }
.sec-sub { font-family: var(--serif); font-style: italic; font-size: 0.9rem; color: var(--dim); line-height: 1.7; max-width: 500px; margin-bottom: 44px; }

/* STAT ROW */
.stat-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; border: 1px solid var(--wire); }
.stat-cell { padding: 32px 28px; border-right: 1px solid var(--wire); text-align: center; position: relative; overflow: hidden; }
.stat-cell:last-child { border-right: none; }
.stat-cell::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--fire); transform: scaleX(0); transform-origin: left; transition: transform 0.5s; }
.stat-cell:hover::before { transform: scaleX(1); }
.sv { font-family: var(--display); font-weight: 700; font-size: 2.5rem; line-height: 1; color: var(--fire); }
.sl { font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); margin-top: 6px; }
.sn { font-family: var(--serif); font-style: italic; font-size: 0.72rem; color: rgba(160,188,208,0.3); margin-top: 6px; }

/* TWO COL / THREE COL */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 28px; }

/* BODY TEXT */
.body-text p { font-size: 0.9rem; line-height: 1.78; color: rgba(160,188,208,0.7); margin-bottom: 16px; }
.body-text p strong { color: var(--text); }
.body-text p:first-of-type::first-letter { font-family: var(--display); font-size: 3.5rem; font-weight: 700; float: left; line-height: 0.8; margin-right: 8px; margin-top: 8px; color: var(--fire); }
.pull-quote { margin: 22px 0; padding: 18px 20px; border-left: 3px solid var(--fire); background: rgba(232,58,30,0.06); font-family: var(--serif); font-style: italic; font-size: 0.95rem; line-height: 1.6; color: var(--pale); }
.pull-quote cite { display: block; margin-top: 8px; font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); font-style: normal; }

/* CARDS */
.card-dark { background: var(--deep); border: 1px solid var(--wire); padding: 26px; margin-bottom: 16px; }
.card-fire { background: rgba(232,58,30,0.08); border: 1px solid rgba(232,58,30,0.2); padding: 26px; margin-bottom: 16px; }
.card-gold { background: rgba(200,149,42,0.08); border: 1px solid rgba(200,149,42,0.2); padding: 26px; margin-bottom: 16px; }
.card-title { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); margin-bottom: 12px; display: block; }
.card-quote { font-family: var(--serif); font-style: italic; font-size: 0.95rem; line-height: 1.65; color: var(--pale); }
.card-source { font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); margin-top: 12px; display: block; }

/* ENEMIES */
.enemies-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--wire); border: 1px solid var(--wire); }
.enemy { background: var(--void); padding: 32px 26px; position: relative; overflow: hidden; transition: background 0.4s; cursor: default; }
.enemy::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--fire); transform: scaleX(0); transform-origin: left; transition: transform 0.4s; }
.enemy:hover { background: var(--deep); }
.enemy:hover::before { transform: scaleX(1); }
.enemy-idx { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.12em; color: var(--dim); margin-bottom: 20px; display: block; }
.enemy-icon { font-size: 1.8rem; margin-bottom: 14px; display: block; }
.enemy-name { font-family: var(--display); font-weight: 700; font-size: 1.4rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text); margin-bottom: 4px; }
.enemy-tag { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fire); margin-bottom: 14px; display: block; }
.enemy-desc { font-size: 0.84rem; color: var(--dim); line-height: 1.65; margin-bottom: 16px; }
.enemy-tells { padding-top: 14px; border-top: 1px solid var(--wire); }
.enemy-tells-label { font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; display: block; }
.tell { display: flex; gap: 8px; align-items: flex-start; font-size: 0.77rem; color: rgba(160,188,208,0.55); line-height: 1.5; margin-bottom: 5px; }
.tell::before { content: '▸'; color: var(--fire); font-size: 0.6rem; margin-top: 2px; flex-shrink: 0; }

/* CYCLE */
.cycle-track { display: grid; grid-template-columns: repeat(5,1fr); gap: 0; border: 1px solid var(--wire); margin-bottom: 16px; }
.cycle-node { padding: 26px 18px; border-right: 1px solid var(--wire); position: relative; text-align: center; }
.cycle-node:last-child { border-right: none; }
.cycle-node.danger { background: rgba(232,58,30,0.04); }
.cycle-node.peak { background: rgba(200,149,42,0.06); }
.cycle-node.turn { background: rgba(74,184,212,0.04); }
.cn-phase { font-family: var(--mono); font-size: 0.52rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); margin-bottom: 10px; }
.cn-icon { font-size: 1.5rem; margin-bottom: 10px; display: block; }
.cn-name { font-family: var(--display); font-weight: 700; font-size: 1rem; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 8px; }
.cycle-node.danger .cn-name { color: var(--fire); }
.cycle-node.peak .cn-name { color: var(--gold); }
.cycle-node.turn .cn-name { color: var(--ice); }
.cn-desc { font-size: 0.72rem; color: var(--dim); line-height: 1.55; }
.cycle-node::after { content: '›'; position: absolute; right: -8px; top: 50%; transform: translateY(-50%); font-size: 1rem; color: var(--wire2); z-index: 2; }
.cycle-node:last-child::after { display: none; }
.cycle-warning { background: rgba(232,58,30,0.07); border: 1px solid rgba(232,58,30,0.15); padding: 16px 20px; font-family: var(--mono); font-size: 0.72rem; color: rgba(232,58,30,0.7); line-height: 1.6; }
.cycle-warning strong { color: var(--fire); }

/* FRAMEWORK STEPS */
.framework-steps { display: flex; flex-direction: column; gap: 0; }
.fw-step { display: flex; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--wire); transition: padding-left 0.25s; }
.fw-step:hover { padding-left: 8px; }
.fw-step:last-child { border-bottom: none; }
.fw-n { font-family: var(--display); font-weight: 700; font-size: 2.5rem; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.12); flex-shrink: 0; width: 50px; }
.fw-body h4 { font-family: var(--display); font-weight: 600; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text); margin-bottom: 6px; }
.fw-body p { font-size: 0.82rem; color: var(--dim); line-height: 1.6; }
.fw-body p strong { color: var(--pale); }

/* RULES TABLE */
.rules-table { width: 100%; border-collapse: collapse; }
.rules-table thead tr { border-bottom: 1px solid var(--wire2); }
.rules-table th { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); padding: 12px 16px; text-align: left; }
.rules-table tbody tr { border-bottom: 1px solid var(--wire); transition: background 0.2s; }
.rules-table tbody tr:hover { background: var(--deep); }
.rules-table td { padding: 16px 16px; vertical-align: top; font-size: 0.82rem; line-height: 1.55; }
.rules-table td:first-child { font-family: var(--mono); font-size: 0.65rem; color: var(--fire); letter-spacing: 0.06em; white-space: nowrap; }
.rules-table td:nth-child(2) { color: var(--text); font-weight: 500; }
.rules-table td:nth-child(3) { color: var(--dim); }
.rules-table td:last-child { font-family: var(--serif); font-style: italic; font-size: 0.78rem; color: rgba(160,188,208,0.4); }

/* PROTOCOL CHECKLIST */
.proto-heading { font-family: var(--display); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); padding-bottom: 10px; border-bottom: 1px solid var(--wire); margin-bottom: 14px; }
.check-item { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--wire); align-items: flex-start; font-size: 0.8rem; color: var(--dim); line-height: 1.55; }
.check-item:last-child { border-bottom: none; }
.check-box { width: 16px; height: 16px; border: 1px solid var(--wire2); flex-shrink: 0; margin-top: 1px; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 0.55rem; color: var(--fire); }
.check-item strong { color: var(--pale); font-weight: 600; }

/* REFRAME */
.reframe { background: var(--surface); border: 1px solid var(--wire); padding: 24px; margin-bottom: 14px; }
.rf-label { font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 8px; display: block; }
.rf-text { font-size: 0.82rem; line-height: 1.6; }

/* MANTRAS */
.mantras-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--wire); border: 1px solid var(--wire); }
.mantra { background: var(--void); padding: 28px 22px; transition: background 0.3s; cursor: default; }
.mantra:hover { background: var(--deep); }
.mantra-n { font-family: var(--display); font-weight: 700; font-size: 3rem; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--wire2); margin-bottom: 14px; }
.mantra-text { font-family: var(--serif); font-style: italic; font-size: 0.9rem; line-height: 1.6; color: var(--pale); margin-bottom: 8px; }
.mantra-sub { font-size: 0.75rem; color: var(--dim); line-height: 1.5; }

/* OC */
.oc-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 44px; align-items: start; }
.danger-banner { background: rgba(232,58,30,0.1); border-top: 2px solid var(--fire); padding: 24px 28px; margin-bottom: 28px; display: flex; align-items: flex-start; gap: 16px; }
.db-icon { font-size: 1.8rem; flex-shrink: 0; }
.db-title { font-family: var(--display); font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fire); margin-bottom: 6px; }
.db-text { font-size: 0.83rem; color: rgba(232,58,30,0.7); line-height: 1.6; }
.oc-rules { display: flex; flex-direction: column; gap: 12px; }
.oc-rule { background: var(--surface); border: 1px solid var(--wire); padding: 18px 20px; display: flex; gap: 14px; align-items: flex-start; transition: border-color 0.25s; }
.oc-rule:hover { border-color: var(--wire2); }
.oc-r-n { font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.08em; color: var(--fire); flex-shrink: 0; padding-top: 2px; }
.oc-r-title { font-family: var(--display); font-weight: 600; font-size: 0.88rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text); margin-bottom: 4px; }
.oc-r-desc { font-size: 0.78rem; color: var(--dim); line-height: 1.55; }

/* JOURNAL */
.journal-wrap { position: relative; z-index: 1; background: var(--deep); border-top: 1px solid var(--wire); border-bottom: 1px solid var(--wire); padding: 80px 52px; }
.journal-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 44px; padding-bottom: 28px; border-bottom: 1px solid var(--wire); }
.journal-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.jq { border: 1px solid var(--wire); padding: 22px; transition: border-color 0.25s, background 0.25s; }
.jq:hover { border-color: rgba(232,58,30,0.3); background: rgba(232,58,30,0.04); }
.jq-text { font-family: var(--serif); font-style: italic; font-size: 0.88rem; line-height: 1.65; color: var(--pale); margin-bottom: 12px; }
.jq-cat { font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fire); }

/* FINAL */
.final-wrap { position: relative; z-index: 1; padding: 100px 52px; text-align: center; overflow: hidden; }
.final-bg-text { position: absolute; inset: 0; z-index: 0; pointer-events: none; display: flex; align-items: center; justify-content: center; }
.final-bg-text span { font-family: var(--display); font-weight: 700; font-size: clamp(5rem,18vw,18rem); letter-spacing: -0.04em; text-transform: uppercase; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.03); }
.final-content { position: relative; z-index: 1;  margin: 0 auto; }
.final-content h2 { font-family: var(--display); font-weight: 700; font-size: clamp(2.5rem,6vw,5rem); letter-spacing: -0.02em; text-transform: uppercase; line-height: 1; margin-bottom: 24px; }
.final-content h2 em { font-style: normal; color: var(--fire); }
.final-content p { font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--dim); line-height: 1.75; margin-bottom: 36px; }
.final-tag { font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fire); display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px; border: 1px solid rgba(232,58,30,0.3); }

/* REVEAL */
.rv { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.rv.show { opacity: 1; transform: translateY(0); }

@media (max-width: 900px) {
  .hero,
  .sec,
  .sec-sm,
  .journal-wrap,
  .final-wrap {
    padding-left: 24px;
    padding-right: 24px;
  }

  .hero {
    min-height: auto;
    padding-top: calc(var(--website-nav-height) + 24px);
    padding-bottom: 56px;
  }

  .hero h1 {
    font-size: clamp(2.8rem, 15vw, 4.8rem);
    line-height: 0.94;
  }

  .hero-subtext,
  .sec-sub {
    max-width: none;
  }

  .hero-stats {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hs {
    border-right: none;
    border-bottom: 1px solid var(--wire);
  }

  .hs:nth-child(odd) {
    border-right: 1px solid var(--wire);
  }

  .hs:nth-last-child(-n+2) {
    border-bottom: none;
  }

  .scroll-hint {
    position: static;
    margin-top: 28px;
  }

  .scroll-hint::after {
    display: none;
  }

  .stat-row,
  .two-col,
  .three-col,
  .enemies-grid,
  .cycle-track,
  .mantras-grid,
  .oc-grid,
  .journal-grid {
    grid-template-columns: 1fr;
  }

  .rules-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .rules-table th,
  .rules-table td {
    white-space: nowrap;
  }

  .wire-hr {
    margin-left: 24px !important;
    margin-right: 24px !important;
  }

  .enemy,
  .card-dark,
  .card-fire,
  .card-gold,
  .danger-banner,
  .oc-rule,
  .jq {
    padding: 20px 18px;
  }

  .fw-step {
    gap: 14px;
  }
}

@media (max-width: 560px) {
  .hero,
  .sec,
  .sec-sm,
  .journal-wrap,
  .final-wrap {
    padding-left: 16px;
    padding-right: 16px;
  }

  .hero h1 {
    font-size: clamp(2.3rem, 16vw, 3.7rem);
  }

  .hero-stats {
    grid-template-columns: 1fr;
  }

  .hs,
  .hs:nth-child(odd) {
    border-right: none;
  }

  .hs:not(:last-child) {
    border-bottom: 1px solid var(--wire);
  }

  .hero-bg-text span {
    font-size: clamp(4rem, 24vw, 7rem);
  }

  .fw-step {
    flex-direction: column;
  }

  .fw-n {
    width: auto;
  }

  .wire-hr {
    margin-left: 16px !important;
    margin-right: 16px !important;
  }
}

@media screen and (min-width: 1025px) and (max-width: 1440px) {
  .hero { margin-top:110px; }
}