:root {
  --bg:     #07070f;
  --bg2:    #0d0d1c;
  --bg3:    #13132a;
  --cyan:   #00f0ff;
  --red:    #ff2d55;
  --green:  #39ff14;
  --yellow: #ffcc00;
  --orange: #ff8800;
  --purple: #b060ff;
  --text:   #dde0f5;
  --dim:    #6668a0;
  --border: rgba(0,240,255,0.12);
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  overflow-x: hidden;
}

/* ── NAV ── */
nav {
  position: fixed; top: 0; width: 100%; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 2rem;
  background: rgba(7,7,15,.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.nav-logo {
  font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 1.15rem;
  color: var(--cyan); text-decoration: none; letter-spacing: .05em;
}
.nav-logo span { color: var(--red); }
.nav-links { display:flex; gap:2rem; list-style:none; }
.nav-links a {
  color: var(--dim); text-decoration:none; font-size:.75rem;
  letter-spacing:.1em; text-transform:uppercase; transition:color .2s;
}
.nav-links a:hover { color: var(--cyan); }
.lang-toggle {
  display:flex; background:var(--bg3); border-radius:3px; overflow:hidden;
  border:1px solid var(--border);
}
.lang-btn {
  padding:.35rem .8rem; background:none; border:none; color:var(--dim);
  cursor:pointer; font-family:'JetBrains Mono',monospace; font-size:.72rem;
  transition:all .2s;
}
.lang-btn.active { background:var(--cyan); color:var(--bg); font-weight:700; }

/* ── HERO ── */
#hero {
  min-height:100vh; display:flex; align-items:center;
  position:relative; overflow:hidden; padding-top:4rem;
}
.hero-bg {
  position:absolute; inset:0; z-index:0; pointer-events:none;
}
.hero-bg::before {
  content:''; position:absolute; top:-40%; left:-15%;
  width:55%; height:120%;
  background:radial-gradient(ellipse, rgba(0,100,130,.18) 0%, transparent 70%);
}
.hero-bg::after {
  content:''; position:absolute; top:20%; right:-5%;
  width:45%; height:80%;
  background:radial-gradient(ellipse, rgba(176,96,255,.1) 0%, transparent 70%);
}
.scanlines {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 3px,
    rgba(0,0,0,.07) 3px, rgba(0,0,0,.07) 4px
  );
}
.hero-content {
  position:relative; z-index:2; width:100%;
  display:grid; grid-template-columns:1fr 370px; gap:2.5rem;
  max-width:1200px; margin:0 auto; padding:2rem;
}
.hero-left { display:flex; flex-direction:column; justify-content:center; gap:1.5rem; }
.hero-live {
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--red); color:#fff; padding:.28rem .65rem; border-radius:3px;
  font-size:.72rem; font-weight:700; letter-spacing:.18em; width:fit-content;
}
.hero-live::before {
  content:''; width:7px; height:7px; border-radius:50%; background:#fff;
  animation: blink 1s infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }
.hero-title {
  font-family:'Chakra Petch',sans-serif;
  font-size: clamp(2.8rem, 7.5vw, 5.5rem);
  font-weight:700; line-height:.95; letter-spacing:-.02em;
}
.hero-title .accent {
  color:var(--cyan); display:block;
  text-shadow: 0 0 50px rgba(0,240,255,.35);
}
.hero-sub { font-size:.9rem; color:var(--dim); max-width:480px; line-height:1.7; }
.hero-cta {
  display:inline-flex; align-items:center; width:fit-content;
  padding:.8rem 1.6rem;
  background:var(--cyan); color:var(--bg);
  font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:.88rem;
  letter-spacing:.1em; text-decoration:none; border:none; cursor:pointer;
  transition:all .2s;
  clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.hero-cta:hover { background:#fff; transform:translateY(-2px); box-shadow:0 8px 30px rgba(0,240,255,.3); }

/* ── STREAM WIDGET ── */
.stream-widget {
  background:var(--bg2); border:1px solid var(--border); border-radius:4px;
  overflow:hidden; height:430px; display:flex; flex-direction:column;
}
.stream-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:.55rem 1rem; background:var(--bg3);
  border-bottom:1px solid var(--border);
}
.stream-title { font-size:.72rem; color:var(--dim); letter-spacing:.05em; }
.stream-viewers { font-size:.68rem; color:var(--red); display:flex; align-items:center; gap:.3rem; }
.chat-feed {
  flex:1; overflow:hidden; padding:.7rem;
  display:flex; flex-direction:column; gap:.35rem;
}
.chat-msg {
  font-size:.76rem; line-height:1.4;
  padding:.3rem .5rem; border-radius:3px;
  animation: msg-in .3s ease;
}
.chat-msg.bs { background:rgba(255,45,85,.1); border-left:2px solid var(--red); }
.chat-msg .u { font-weight:700; margin-right:.3rem; }
.chat-msg.bs .u { color:var(--red); }
.chat-msg:not(.bs) .u { color:var(--cyan); }
.bs-badge {
  font-size:.58rem; background:var(--red); color:#fff;
  padding:.08rem .3rem; border-radius:2px; margin-left:.3rem;
  font-weight:700; letter-spacing:.1em; vertical-align:middle;
}
@keyframes msg-in { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

/* ── SECTIONS ── */
.section {
  max-width:1200px; margin:0 auto; padding:5.5rem 2rem;
}
.s-label {
  font-size:.67rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--cyan); margin-bottom:1rem;
  display:flex; align-items:center; gap:.5rem;
}
.s-label::before { content:'//'; color:var(--dim); }
.s-title {
  font-family:'Chakra Petch',sans-serif;
  font-size:clamp(1.7rem,4vw,2.8rem); font-weight:700;
  line-height:1.1; margin-bottom:1.5rem;
}
.sep {
  height:1px; max-width:1200px; margin:0 auto;
  background:linear-gradient(90deg,transparent,var(--border),transparent);
}

/* ── DEFINITION ── */
.def-box {
  background:var(--bg2); border:1px solid var(--border);
  border-left:4px solid var(--cyan); padding:2rem;
  border-radius:0 4px 4px 0; position:relative; overflow:hidden;
}
.def-box::after {
  content:'"'; position:absolute; right:1.5rem; top:-1.5rem;
  font-size:9rem; color:rgba(0,240,255,.05); font-family:Georgia,serif;
}
.def-text { font-size:1.1rem; line-height:1.75; max-width:720px; }
.hl  { color:var(--cyan); font-weight:700; }
.hlb { color:var(--red);  font-weight:700; }
.def-ctx {
  margin-top:1.5rem; color:var(--dim); font-size:.84rem; line-height:1.8;
  max-width:680px;
}

/* ── EXAMPLES ── */
.ex-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin-top:2.5rem; }
.ex-card { background:var(--bg2); border:1px solid var(--border); border-radius:4px; overflow:hidden; }
.ex-head {
  padding:.65rem 1rem; font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; font-weight:700;
  display:flex; align-items:center; gap:.4rem;
}
.ex-card.bad .ex-head { background:rgba(255,45,85,.08); color:var(--red); border-bottom:1px solid rgba(255,45,85,.18); }
.ex-card.ok  .ex-head { background:rgba(57,255,20,.07);  color:var(--green); border-bottom:1px solid rgba(57,255,20,.18); }
.ex-msgs { padding:1rem; display:flex; flex-direction:column; gap:.55rem; }
.ex-msg {
  font-size:.8rem; line-height:1.5; padding:.45rem .7rem;
  background:var(--bg3); border-radius:3px;
}
.ex-msg .u { font-weight:700; margin-right:.3rem; }
.ex-card.bad .ex-msg .u { color:var(--red); }
.ex-card.ok  .ex-msg .u { color:var(--cyan); }

/* ── LEVELS ── */
.lv-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2.5rem; }
.lv-card {
  background:var(--bg2); border:1px solid var(--border); border-radius:4px;
  padding:1.6rem; position:relative; overflow:hidden;
  transition:transform .2s, box-shadow .2s; cursor:default;
}
.lv-card:hover { transform:translateY(-5px); box-shadow:0 12px 40px rgba(0,0,0,.35); }
.lv-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
}
.lv-card.l1::before { background:var(--yellow); }
.lv-card.l2::before { background:var(--orange); }
.lv-card.l3::before { background:var(--red); }
.lv-num {
  font-family:'Chakra Petch',sans-serif; font-size:3.5rem; font-weight:700;
  opacity:.08; position:absolute; right:.8rem; top:.3rem; line-height:1;
}
.lv-badge {
  font-size:.63rem; letter-spacing:.2em; text-transform:uppercase;
  font-weight:700; margin-bottom:.5rem;
}
.lv-card.l1 .lv-badge { color:var(--yellow); }
.lv-card.l2 .lv-badge { color:var(--orange); }
.lv-card.l3 .lv-badge { color:var(--red); }
.lv-name {
  font-family:'Chakra Petch',sans-serif; font-size:1.15rem;
  font-weight:600; margin-bottom:.7rem;
}
.lv-desc { font-size:.79rem; color:var(--dim); line-height:1.65; margin-bottom:1rem; }
.lv-ex {
  font-size:.77rem; padding:.6rem .8rem; background:var(--bg3);
  border-radius:3px; border-left:2px solid; font-style:italic;
}
.lv-card.l1 .lv-ex { border-color:var(--yellow); color:var(--yellow); }
.lv-card.l2 .lv-ex { border-color:var(--orange); color:var(--orange); }
.lv-card.l3 .lv-ex { border-color:var(--red);    color:var(--red); }

/* ── WHY ── */
.why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:2.5rem; }
.why-card {
  padding:2rem; background:var(--bg2); border:1px solid var(--border); border-radius:4px;
}
.why-icon { font-size:2rem; margin-bottom:1rem; }
.why-title { font-family:'Chakra Petch',sans-serif; font-size:1rem; font-weight:600; margin-bottom:.6rem; }
.why-text { font-size:.8rem; color:var(--dim); line-height:1.75; }

/* ── QUIZ ── */
#quiz-wrap {
  max-width:1200px; margin:0 auto 5rem;
  background:var(--bg2); border:1px solid var(--border); border-radius:4px;
  padding:3rem;
}
.quiz-hdr { text-align:center; margin-bottom:2.5rem; }
.quiz-progress {
  height:3px; background:var(--bg3); border-radius:2px; margin-bottom:2.5rem;
}
.quiz-progress-fill { height:100%; background:var(--cyan); transition:width .4s ease; border-radius:2px; }
.q-block { display:none; }
.q-block.active { display:block; animation:fade-up .3s ease; }
@keyframes fade-up { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
.q-type {
  font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cyan); margin-bottom:1rem;
}
.q-text {
  font-family:'Chakra Petch',sans-serif; font-size:1.2rem;
  font-weight:600; margin-bottom:1.2rem; line-height:1.3;
}
.q-scenario {
  background:var(--bg3); border-left:3px solid var(--purple);
  padding:.9rem 1.1rem; margin-bottom:1.5rem; border-radius:0 3px 3px 0;
}
.q-from {
  font-size:.86rem; color:var(--purple); letter-spacing:.12em;
  text-transform:uppercase; margin-bottom:.4rem;
}
.q-scenario-text { font-size:.88rem; line-height:1.6; }
.q-opts { display:flex; flex-wrap:wrap; gap:1rem; }
.q-opt {
  flex:1; min-width:140px; padding:.9rem 1.3rem;
  background:var(--bg3); border:1px solid var(--border); border-radius:4px;
  color:var(--text); font-family:'JetBrains Mono',monospace; font-size:.85rem;
  cursor:pointer; transition:all .15s; text-align:center;
}
.q-opt:hover { border-color:var(--cyan); color:var(--cyan); background:rgba(0,240,255,.05); }
.q-opt.correct { background:rgba(57,255,20,.1); border-color:var(--green); color:var(--green); }
.q-opt.wrong   { background:rgba(255,45,85,.1); border-color:var(--red);   color:var(--red); }
.q-opt.off     { pointer-events:none; opacity:.45; }
.q-fb {
  display:none; margin-top:1.2rem; padding:.9rem 1.1rem;
  border-radius:3px; font-size:.83rem; line-height:1.6;
}
.q-fb.show { display:block; animation:fade-up .3s ease; }
.q-fb.ok  { background:rgba(57,255,20,.07); border:1px solid rgba(57,255,20,.25); color:#8aff70; }
.q-fb.bad { background:rgba(255,45,85,.07); border:1px solid rgba(255,45,85,.25); color:#ff8099; }
.btn-next {
  display:none; margin-top:1.3rem; padding:.75rem 1.8rem;
  background:var(--cyan); color:var(--bg); border:none;
  font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:.85rem;
  letter-spacing:.1em; cursor:pointer; transition:all .2s;
  clip-path:polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.btn-next.show { display:inline-block; animation:fade-up .3s ease; }
.btn-next:hover { background:#fff; transform:translateY(-1px); }

/* Results */
#quiz-results { display:none; text-align:center; padding:2.5rem 1rem; }
#quiz-results.show { display:block; animation:fade-up .4s ease; }
.res-score {
  font-family:'Chakra Petch',sans-serif; font-size:5rem; font-weight:700;
  color:var(--cyan); text-shadow:0 0 40px rgba(0,240,255,.4);
  line-height:1; margin:1rem 0;
}
.res-msg { font-size:1rem; margin:.8rem 0 2rem; color:var(--text); }
.btn-restart {
  padding:.75rem 1.8rem; background:none; color:var(--cyan);
  border:1px solid var(--cyan);
  font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:.85rem;
  letter-spacing:.1em; cursor:pointer; transition:all .2s;
}
.btn-restart:hover { background:var(--cyan); color:var(--bg); }

/* ── FOOTER ── */
footer {
  border-top:1px solid var(--border); padding:2rem;
  text-align:center; font-size:.73rem; color:var(--dim);
  letter-spacing:.05em;
}
footer strong { color:var(--cyan); }

/* ── REVEAL ── */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .65s ease,transform .65s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ── MOBILE ── */
@media(max-width:768px){
  .hero-content { grid-template-columns:1fr; }
  .stream-widget { display:none; }
  .ex-grid,.lv-grid,.why-grid { grid-template-columns:1fr; }
  .nav-links { display:none; }
  #quiz-wrap { margin:0 1rem 4rem; padding:1.8rem; }
}