/* ══════════════════════════════════════════════════════════════════
   HIGHZAK ACADEMY — design system
   Built with the same rules we teach: native scroll, logical
   properties (so HE-RTL and EN-LTR share one stylesheet), tokens,
   no wheel-hijacking library.
   ══════════════════════════════════════════════════════════════════ */

:root{
  /* ink family (analogous) + ONE saturated guest accent = house law #3 */
  --ink:        #06070c;
  --ink-2:      #0a0c15;
  --panel:      #0e1120;
  --panel-2:    #141834;
  --line:       #232845;
  --line-soft:  #1a1e33;

  --neon:       #4da8ff;
  --neon-2:     #2e7bff;
  --neon-dim:   rgba(77,168,255,.16);
  --glow:       0 0 42px rgba(77,168,255,.35);

  --gold:       #ffcb5c;
  --green:      #35d07f;
  --red:        #ff5f6d;

  --paper:      #f8f5ec;
  --paper-ink:  #1b1c22;
  --paper-rule: #d9d2c0;

  --txt:        #eef1f8;
  --txt-2:      #b7bed3;
  --txt-3:      #7d859e;

  --r-s: 10px; --r-m: 16px; --r-l: 26px; --r-xl: 38px;
  --shell: 1180px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --f-display: "Space Grotesk", "Heebo", system-ui, sans-serif;
  --f-body:    "Heebo", "Inter", system-ui, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;
}
html[lang="he"]{ --f-display: "Heebo", "Space Grotesk", system-ui, sans-serif; }

*,*::before,*::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth; -webkit-text-size-adjust:100%;
  /* reserve the scrollbar always — otherwise 100vw and 100% disagree the
     moment the bar appears, and every full-bleed element jumps sideways */
  scrollbar-gutter:stable;
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
html,body{ overflow-x:clip; }        /* clip — NOT hidden. hidden kills page scroll. */
body{
  margin:0; background:var(--ink); color:var(--txt);
  font-family:var(--f-body); font-size:17px; line-height:1.75; font-weight:400;
  -webkit-font-smoothing:antialiased;
  min-height:100svh;
}
body::before{ /* world light */
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(900px 620px at 78% -8%, rgba(46,123,255,.20), transparent 62%),
    radial-gradient(720px 520px at 6% 102%, rgba(77,168,255,.12), transparent 60%),
    linear-gradient(180deg,#06070c 0%,#080a12 48%,#06070c 100%);
}
body::after{ /* grain — deliberate imperfection */
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
#app{ position:relative; z-index:2; }

a{ color:inherit; }
img{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; }
::selection{ background:var(--neon); color:#04060d; }

/* ── accessibility: focus + skip link ─────────────────────────── */
:focus-visible{
  outline:3px solid var(--neon); outline-offset:3px; border-radius:8px;
}
.skip{
  position:absolute; inset-block-start:-80px; inset-inline-start:14px; z-index:999;
  background:#fff; color:#06070c; font-weight:700; padding:12px 20px; border-radius:10px;
  text-decoration:none; transition:inset-block-start .2s var(--ease);
}
.skip:focus{ inset-block-start:14px; }

/* ── accessibility preferences (set by the a11y menu) ─────────── */
html.a11y-text-1 body{ font-size:19px; }
html.a11y-text-2 body{ font-size:21px; }
html.a11y-contrast{
  --txt:#ffffff; --txt-2:#e8ecf7; --txt-3:#c3cbe0;
  --ink:#000000; --ink-2:#000000; --panel:#000; --panel-2:#0a0a0a;
  --line:#7d879f; --line-soft:#5d6784; --neon:#7dc4ff; --gold:#ffd77a;
}
html.a11y-contrast body::before,
html.a11y-contrast body::after{ display:none; }
html.a11y-contrast .wcard,
html.a11y-contrast .lrow,
html.a11y-contrast .quiz,
html.a11y-contrast .note,
html.a11y-contrast .warn,
html.a11y-contrast .why,
html.a11y-contrast .code,
html.a11y-contrast .prompt{ background:#000; }
html.a11y-still *,
html.a11y-still *::before,
html.a11y-still *::after{
  animation-play-state:paused !important; animation:none !important; transition:none !important;
}

h1,h2,h3,h4{ font-family:var(--f-display); font-weight:700; line-height:1.12; margin:0 0 .5em; letter-spacing:-.015em; }
h1{ font-size:clamp(2rem,5.2vw,3.6rem); }
h2{ font-size:clamp(1.5rem,3.4vw,2.3rem); }
h3{ font-size:clamp(1.15rem,2.2vw,1.5rem); }
p{ margin:0 0 1.05em; color:var(--txt-2); }
strong{ color:var(--txt); font-weight:700; }
code:not(pre code){
  font-family:var(--f-mono); font-size:.86em; background:#151a30;
  border:1px solid var(--line); border-radius:6px; padding:.12em .42em; color:#9fd0ff;
  direction:ltr; unicode-bidi:embed; display:inline-block;
}

.shell{ width:min(var(--shell), calc(100% - 40px)); margin-inline:auto; }
.mono{ font-family:var(--f-mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--txt-3); }
.ltr{ direction:ltr; unicode-bidi:isolate; }

/* ── reveal on scroll (IntersectionObserver adds .in) ───────────── */
.rv{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .rv{ opacity:1; transform:none; transition:none; } }

/* ══ HEADER ═══════════════════════════════════════════════════════ */
.hdr{
  position:sticky; top:0; z-index:60; backdrop-filter:blur(16px);
  background:linear-gradient(180deg, rgba(6,7,12,.92), rgba(6,7,12,.72));
  border-block-end:1px solid var(--line-soft);
}
.hdr-in{ display:flex; align-items:center; gap:18px; height:66px; }
.logo{ display:flex; align-items:center; gap:10px; text-decoration:none; flex:0 0 auto; cursor:pointer;
  background:none; border:none; padding:0; color:inherit; }
.logo-mark{
  width:32px; height:32px; border-radius:9px; display:grid; place-items:center;
  background:linear-gradient(150deg,var(--neon-2),#0b1024); border:1px solid rgba(77,168,255,.5);
  box-shadow:var(--glow); font-family:var(--f-mono); font-size:13px; font-weight:700; color:#eaf4ff;
}
/* the real HIGHZAK emblem — screen blend drops its dark plate onto our dark page */
.logo-mark-img{
  width:42px; height:42px; flex:0 0 auto; object-fit:cover; border-radius:50%;
  mix-blend-mode:screen; filter:saturate(1.1) contrast(1.05);
}
.logo-mark-img.lg{ width:96px; height:96px; }
.logo-mark-img.xl{ width:150px; height:150px; }
html.a11y-contrast .logo-mark-img{ mix-blend-mode:normal; }
.logo-txt{ font-family:var(--f-display); font-weight:700; letter-spacing:.08em; font-size:.95rem; }
.logo-txt span{ color:var(--neon); }
.hdr-sp{ flex:1; }
.xpwrap{ display:flex; align-items:center; gap:10px; min-width:190px; }
.xpbar{ flex:1; height:7px; border-radius:99px; background:#161a2e; overflow:hidden; border:1px solid var(--line); }
.xpbar i{ display:block; height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,var(--neon-2),var(--neon)); box-shadow:0 0 14px rgba(77,168,255,.7); transition:width .9s var(--ease); }
.lvl{ font-family:var(--f-mono); font-size:.72rem; color:var(--neon); white-space:nowrap; }
.hbtn{
  display:inline-flex; align-items:center; justify-content:center;
  min-block-size:44px; text-decoration:none;
  border:1px solid var(--line); background:#10142a; border-radius:99px; padding:8px 15px;
  font-size:.82rem; cursor:pointer; transition:.25s var(--ease); white-space:nowrap;
}
.hbtn:hover{ border-color:var(--neon); color:#fff; box-shadow:0 0 0 4px var(--neon-dim); }
@media(max-width:760px){ .xpwrap{ display:none; } .hdr-in{ height:58px; gap:10px; } }

/* ══ BUTTONS ══════════════════════════════════════════════════════ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 30px; border-radius:99px; border:1px solid transparent; cursor:pointer;
  font-weight:700; font-size:1rem; text-decoration:none; transition:.3s var(--ease);
  background:linear-gradient(135deg,var(--neon-2),var(--neon)); color:#04060d;
  box-shadow:0 14px 40px -14px rgba(46,123,255,.95);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 20px 52px -14px rgba(46,123,255,1); }
.btn.ghost{ background:transparent; border-color:var(--line); color:var(--txt); box-shadow:none; }
.btn.ghost:hover{ border-color:var(--neon); color:#fff; }
.btn:disabled{ opacity:.4; cursor:not-allowed; transform:none; }
.btn.sm{ padding:11px 20px; font-size:.9rem; }

/* ══ GATE ═════════════════════════════════════════════════════════ */
.gate{ min-height:100svh; display:grid; place-items:center; padding:56px 20px; }
.gate-card{
  width:min(560px,100%); background:linear-gradient(165deg,#0d1122,#080a14);
  border:1px solid var(--line); border-radius:var(--r-xl); padding:clamp(26px,5vw,46px);
  box-shadow:0 50px 130px -50px #000, inset 0 1px 0 rgba(255,255,255,.06);
}
.gate-card h1{ font-size:clamp(1.6rem,4.4vw,2.3rem); margin-block-end:.35em; }
.field{ margin-block-end:14px; }
.field label{ display:block; font-size:.8rem; color:var(--txt-3); margin-block-end:6px; }
.field input{
  width:100%; padding:14px 16px; border-radius:14px; background:#0a0d1a;
  border:1px solid var(--line); color:var(--txt); font:inherit; font-size:.98rem;
}
.field input:focus{ outline:none; border-color:var(--neon); box-shadow:0 0 0 4px var(--neon-dim); }
.gate-msg{ min-height:22px; font-size:.86rem; margin-block-start:10px; }
.gate-msg.bad{ color:var(--red); } .gate-msg.good{ color:var(--green); }
.price-row{ display:flex; align-items:baseline; gap:12px; margin-block:18px 6px; }
.price-now{ font-family:var(--f-display); font-size:2.1rem; font-weight:700; color:#fff; }
.price-was{ color:var(--txt-3); text-decoration:line-through; }
.gate-tabs{ display:flex; gap:8px; margin-block-end:22px; }
.gate-tabs button{ flex:1; padding:10px; border-radius:12px; border:1px solid var(--line); background:#0a0d1a; cursor:pointer; font-size:.88rem; transition:.25s var(--ease); }
.gate-tabs button.on{ border-color:var(--neon); background:var(--neon-dim); color:#fff; }

/* ══ HERO / MAP ═══════════════════════════════════════════════════ */
.hero{ padding-block:clamp(60px,10vw,110px) clamp(30px,5vw,60px); text-align:center; }
.hero .kick{ margin-block-end:16px; }
.hero h1{ margin-inline:auto; max-width:16ch; }
.hero p{ max-width:60ch; margin-inline:auto; font-size:1.06rem; }
.hero-stats{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-block-start:26px; }
.stat{ border:1px solid var(--line); border-radius:99px; padding:9px 18px; background:#0b0f1e; font-size:.84rem; color:var(--txt-2); }
.stat b{ color:var(--neon); }

.worlds{ display:grid; gap:20px; padding-block-end:90px; }
@media(min-width:900px){ .worlds{ grid-template-columns:repeat(2,1fr); } }

.wcard{
  position:relative; border:1px solid var(--line); border-radius:var(--r-l);
  background:linear-gradient(160deg,#0d1122,#090b15); overflow:hidden;
  padding:26px 26px 22px; cursor:pointer; transition:.4s var(--ease);
  text-align:start;
}
.wcard::after{ /* the accent hairline riding the corner — flow-seam DNA */
  content:""; position:absolute; inset-inline-start:0; inset-block-start:0;
  width:100%; height:2px; background:linear-gradient(90deg,transparent,var(--neon),transparent);
  opacity:0; transition:opacity .45s var(--ease);
}
.wcard:hover{ transform:translateY(-4px); border-color:rgba(77,168,255,.55); box-shadow:0 30px 70px -34px rgba(46,123,255,.7); }
.wcard:hover::after{ opacity:1; }
.wcard.locked{ opacity:.5; cursor:not-allowed; }
.wcard.locked:hover{ transform:none; box-shadow:none; border-color:var(--line); }
.wcard.done{ border-color:rgba(53,208,127,.45); }
.wtop{ display:flex; align-items:flex-start; gap:16px; margin-block-end:14px; }
.wnum{
  flex:0 0 auto; width:52px; height:52px; border-radius:16px; display:grid; place-items:center;
  font-family:var(--f-mono); font-size:1.05rem; font-weight:700;
  background:var(--panel-2); border:1px solid var(--line); color:var(--neon);
}
.wcard.done .wnum{ color:var(--green); border-color:rgba(53,208,127,.5); }
.wtitle{ flex:1; }
.wtitle h3{ margin:0 0 3px; }
.wtitle .mono{ font-size:.68rem; }
.wdesc{ color:var(--txt-2); font-size:.95rem; margin-block-end:16px; }
.wbar{ height:6px; border-radius:99px; background:#141830; overflow:hidden; border:1px solid var(--line-soft); }
.wbar i{ display:block; height:100%; background:linear-gradient(90deg,var(--neon-2),var(--neon)); transition:width .8s var(--ease); }
.wcard.done .wbar i{ background:linear-gradient(90deg,#22a45f,var(--green)); }
.wmeta{ display:flex; justify-content:space-between; margin-block-start:9px; font-size:.78rem; color:var(--txt-3); font-family:var(--f-mono); }

/* ══ WORLD PAGE ═══════════════════════════════════════════════════ */
.crumb{ display:flex; align-items:center; gap:10px; padding-block:26px 8px; font-size:.84rem; color:var(--txt-3); }
.crumb button{ background:none; border:none; cursor:pointer; color:var(--neon); padding:0; }
.wintro{ padding-block-end:26px; border-block-end:1px solid var(--line-soft); margin-block-end:26px; }

.llist{ display:grid; gap:12px; padding-block-end:80px; }
.lrow{
  display:flex; align-items:center; gap:16px; padding:16px 20px;
  border:1px solid var(--line); border-radius:var(--r-m); background:#0b0e1c;
  cursor:pointer; transition:.3s var(--ease);
}
.lrow:hover{ border-color:rgba(77,168,255,.55); transform:translateX(0) translateY(-2px); background:#0d1122; }
.lrow.locked{ opacity:.42; cursor:not-allowed; }
.lrow.locked:hover{ transform:none; border-color:var(--line); background:#0b0e1c; }
.lrow.done{ border-color:rgba(53,208,127,.4); }
.ldot{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line); background:#11152a; font-family:var(--f-mono); font-size:.76rem; color:var(--txt-3);
}
.lrow.done .ldot{ background:rgba(53,208,127,.14); border-color:var(--green); color:var(--green); }
.lrow.cur .ldot{ border-color:var(--neon); color:var(--neon); box-shadow:0 0 0 4px var(--neon-dim); }
.lrow-t{ flex:1; min-width:0; }
.lrow-t b{ display:block; font-weight:600; font-size:1rem; }
.lrow-t span{ font-size:.82rem; color:var(--txt-3); }
.lxp{ font-family:var(--f-mono); font-size:.74rem; color:var(--gold); white-space:nowrap; }
.lrow.boss{ background:linear-gradient(120deg,#170f22,#0c0e1c); border-color:rgba(255,203,92,.35); }
.lrow.boss .ldot{ color:var(--gold); border-color:rgba(255,203,92,.6); }

/* ══ LESSON ═══════════════════════════════════════════════════════ */
.lesson{ max-width:820px; margin-inline:auto; padding-block-end:110px; }
.lesson-head{ padding-block:20px 30px; }
.lesson-head .mono{ margin-block-end:10px; }
.lesson-head p.lead{ font-size:1.1rem; color:var(--txt-2); }

.blk{ margin-block-end:26px; }
.blk h3{ margin-block-start:38px; display:flex; align-items:center; gap:10px; }
.blk h3::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--neon); box-shadow:0 0 12px var(--neon); flex:0 0 auto; }

.note, .warn, .why{
  border-radius:var(--r-m); padding:16px 20px; margin-block-end:26px;
  border:1px solid var(--line); background:#0c1020; font-size:.97rem;
}
.note{ border-inline-start:3px solid var(--neon); }
.warn{ border-inline-start:3px solid var(--red); background:#170d13; }
.why{ border-inline-start:3px solid var(--gold); background:#161206; }
.note p:last-child,.warn p:last-child,.why p:last-child{ margin:0; }
.note b,.warn b,.why b{ display:block; margin-block-end:5px; font-family:var(--f-display); }

ul.bul{ margin:0 0 26px; padding-inline-start:22px; color:var(--txt-2); }
ul.bul li{ margin-block-end:9px; }
ul.bul li::marker{ color:var(--neon); }

/* code */
.code{ margin-block-end:26px; border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden; background:#070912; }
.code-top{
  display:flex; align-items:center; gap:10px; padding:9px 14px; background:#0d1122;
  border-block-end:1px solid var(--line); font-family:var(--f-mono); font-size:.72rem; color:var(--txt-3);
}
.code-top .dot{ width:9px; height:9px; border-radius:50%; background:#2a3357; }
.code-top .nm{ flex:1; color:var(--neon); direction:ltr; }
.copy{ border:1px solid var(--line); background:#141935; border-radius:8px; padding:4px 11px; font-size:.7rem; cursor:pointer; font-family:var(--f-mono); transition:.25s; }
.copy:hover{ border-color:var(--neon); color:#fff; }
.copy.ok{ border-color:var(--green); color:var(--green); }
.code pre{ margin:0; padding:16px 18px; overflow-x:auto; direction:ltr; text-align:left; }
.code code{ font-family:var(--f-mono); font-size:.83rem; line-height:1.66; color:#cfe3ff; white-space:pre; }
.code-cap{ padding:11px 18px; border-block-start:1px solid var(--line-soft); font-size:.87rem; color:var(--txt-2); background:#0a0d1a; }
.tok-c{ color:#6b7a9e; font-style:italic; }
.tok-s{ color:#ffcb8b; }
.tok-k{ color:#7fb6ff; }
.tok-t{ color:#7de3b0; }
.tok-n{ color:#e5a8ff; }

/* prompt-to-Claude */
.prompt{ margin-block-end:26px; border:1px solid rgba(77,168,255,.45); border-radius:var(--r-m); background:linear-gradient(160deg,#0c1730,#080c1a); overflow:hidden; box-shadow:0 0 0 1px rgba(77,168,255,.08), 0 24px 60px -40px rgba(46,123,255,.8); }
.prompt-top{ display:flex; align-items:center; gap:9px; padding:10px 16px; border-block-end:1px solid rgba(77,168,255,.25); font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--neon); }
.prompt-top .sp{ flex:1; }
.prompt pre{ margin:0; padding:16px 18px; white-space:pre-wrap; font-family:var(--f-mono); font-size:.84rem; line-height:1.7; color:#dbe9ff; }
html[dir="rtl"] .prompt pre{ direction:rtl; text-align:start; }

/* screenshot / clip */
.shot{ margin-block-end:26px; border-radius:var(--r-m); overflow:hidden; border:1px solid var(--line); background:#080a14; }
.shot img,.shot video{ width:100%; display:block; }
.lvid iframe,.sysframe iframe{ width:100%; aspect-ratio:16/9; border:0; display:block; background:#000; }
.sysframe iframe{ aspect-ratio:auto; height:min(560px,78vh); }
.shot figcaption{ padding:12px 16px; font-size:.87rem; color:var(--txt-2); border-block-start:1px solid var(--line-soft); }
.shot figcaption b{ color:var(--neon); }

/* live demo */
.demo{ margin-block-end:26px; border:1px solid rgba(77,168,255,.35); border-radius:var(--r-m); overflow:hidden; background:#080b17; }
.demo-top{ display:flex; align-items:center; gap:8px; padding:9px 15px; border-block-end:1px solid var(--line); font-family:var(--f-mono); font-size:.71rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); }
.demo-stage{ position:relative; min-height:230px; }
.demo-cap{ padding:12px 16px; font-size:.87rem; color:var(--txt-2); border-block-start:1px solid var(--line-soft); }

/* notebook — tasks */
.book{
  background:var(--paper); color:var(--paper-ink); border-radius:var(--r-l);
  padding:26px 28px; margin-block:34px 26px; position:relative;
  box-shadow:0 30px 70px -40px #000;
  background-image:repeating-linear-gradient(180deg,transparent,transparent 33px,var(--paper-rule) 33px,var(--paper-rule) 34px);
  background-position:0 46px;
}
.book h4{ font-family:var(--f-display); font-size:1.15rem; margin:0 0 16px; color:#111; }
.book .task{
  display:flex; align-items:flex-start; gap:12px; padding:6px 4px; cursor:pointer; user-select:none;
  line-height:34px; inline-size:100%; text-align:start; background:none; border:none;
  font:inherit; color:inherit; border-radius:8px;
}
.book .task:hover{ background:rgba(0,0,0,.04); }
.book .task:focus-visible{ outline:3px solid #1c5cff; outline-offset:2px; }
.book .box{
  flex:0 0 auto; width:24px; height:24px; margin-block-start:5px; border-radius:7px;
  border:2px solid #b9b099; background:#fff; display:grid; place-items:center; transition:.25s var(--ease);
}
.book .task.on .box{ background:var(--green); border-color:#1f9a5c; }
.book .task .box svg{ opacity:0; transform:scale(.4); transition:.25s var(--ease); }
.book .task.on .box svg{ opacity:1; transform:none; }
.book .task span{ font-size:.98rem; color:#2a2c33; }
.book .task.on span{ color:#6d7280; text-decoration:line-through; }

/* quiz */
.quiz{ border:1px solid var(--line); border-radius:var(--r-l); background:linear-gradient(165deg,#0e1224,#080a14); padding:26px 26px 22px; margin-block-start:34px; }
.quiz-h{ display:flex; align-items:center; gap:10px; margin-block-end:6px; }
.quiz-h .mono{ color:var(--gold); }
.q{ margin-block-start:24px; padding-block-start:20px; border-block-start:1px solid var(--line-soft); }
.q:first-of-type{ border:none; padding-block-start:6px; }
.q b{ display:block; margin-block-end:12px; font-weight:600; font-size:1.02rem; color:var(--txt); }
.opt{
  display:flex; align-items:center; gap:12px; width:100%; text-align:start;
  padding:13px 16px; margin-block-end:9px; border-radius:12px; cursor:pointer;
  border:1px solid var(--line); background:#0a0d1a; transition:.25s var(--ease); font-size:.95rem;
}
.opt:hover{ border-color:rgba(77,168,255,.6); }
.opt .k{ font-family:var(--f-mono); font-size:.72rem; color:var(--txt-3); border:1px solid var(--line); border-radius:6px; padding:2px 7px; flex:0 0 auto; }
.opt.right{ border-color:var(--green); background:rgba(53,208,127,.1); }
.opt.right .k{ color:var(--green); border-color:var(--green); }
.opt.wrong{ border-color:var(--red); background:rgba(255,95,109,.09); animation:shake .4s; }
@keyframes shake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
.q-why{ margin-block-start:6px; font-size:.9rem; color:var(--gold); display:none; }
.q.answered .q-why{ display:block; }
.q.answered .opt{ pointer-events:none; opacity:.75; }
.q.answered .opt.right{ opacity:1; }

.finish{ margin-block-start:28px; padding-block-start:22px; border-block-start:1px solid var(--line-soft); display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.finish .msg{ flex:1; min-width:200px; font-size:.9rem; color:var(--txt-3); }
.finish .msg.ok{ color:var(--green); }

/* toast */
.toast{
  position:fixed; inset-block-end:26px; inset-inline-start:50%; transform:translate(-50%,140%);
  background:linear-gradient(135deg,var(--neon-2),var(--neon)); color:#04060d; font-weight:700;
  padding:14px 26px; border-radius:99px; z-index:200; box-shadow:0 20px 50px -18px rgba(46,123,255,1);
  transition:transform .55s var(--ease); white-space:nowrap; font-size:.95rem;
}
html[dir="rtl"] .toast{ transform:translate(50%,140%); }
.toast.show{ transform:translate(-50%,0); }
html[dir="rtl"] .toast.show{ transform:translate(50%,0); }

/* certificate */
.cert{
  border:1px solid rgba(255,203,92,.4); border-radius:var(--r-l); padding:44px 34px; text-align:center;
  background:linear-gradient(165deg,#1a1406,#0a0b12); margin-block:30px 60px;
}
.cert h2{ color:var(--gold); }
.cert .seal{ width:88px; height:88px; margin:0 auto 18px; border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(circle at 35% 30%,#ffe6a8,#c9942c); color:#2a1c00; font-family:var(--f-display); font-weight:700; font-size:1.5rem; box-shadow:0 0 40px rgba(255,203,92,.45); }

.footer{ border-block-start:1px solid var(--line-soft); padding-block:30px 60px; text-align:center; color:var(--txt-3); font-size:.83rem; }
.footer a{ color:var(--txt-2); text-decoration:underline; text-underline-offset:3px; }
.footer a:hover{ color:var(--neon); }
.footer-links{ display:flex; gap:8px 18px; justify-content:center; flex-wrap:wrap; margin-block-end:12px; }
.footer-links a{ min-block-size:44px; display:inline-flex; align-items:center; }

/* ── accessibility menu ───────────────────────────────────────── */
.a11y-btn{
  position:fixed; inset-block-end:18px; inset-inline-end:18px; z-index:120;
  width:52px; height:52px; border-radius:50%; cursor:pointer;
  background:var(--panel-2); border:1px solid var(--line); color:var(--txt);
  display:grid; place-items:center; font-size:1.35rem; box-shadow:0 12px 34px -12px #000;
  transition:.25s var(--ease);
}
.a11y-btn:hover{ border-color:var(--neon); box-shadow:0 0 0 4px var(--neon-dim), 0 12px 34px -12px #000; }
.a11y-panel{
  position:fixed; inset-block-end:82px; inset-inline-end:18px; z-index:121; width:min(300px, calc(100vw - 36px));
  background:#0c1020; border:1px solid var(--line); border-radius:var(--r-l); padding:18px;
  box-shadow:0 30px 70px -26px #000; display:none;
}
.a11y-panel[open]{ display:block; }
.a11y-panel h4{ font-family:var(--f-display); font-size:.98rem; margin:0 0 4px; }
.a11y-panel p.sub{ font-size:.8rem; color:var(--txt-3); margin:0 0 14px; }
.a11y-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding-block:9px; border-block-start:1px solid var(--line-soft); }
.a11y-row:first-of-type{ border-block-start:none; }
.a11y-row span{ font-size:.9rem; }
.a11y-row button{
  min-block-size:38px; padding:6px 14px; border-radius:99px; cursor:pointer; font-size:.82rem;
  border:1px solid var(--line); background:#11152a; transition:.2s var(--ease);
}
.a11y-row button[aria-pressed="true"]{ border-color:var(--green); background:rgba(53,208,127,.14); color:#fff; }
.a11y-panel .a11y-link{ display:block; margin-block-start:14px; font-size:.84rem; color:var(--neon); text-decoration:underline; text-underline-offset:3px; }

/* ── video play/pause control ─────────────────────────────────── */
.shot{ position:relative; }
.vidbtn{
  position:absolute; inset-block-end:64px; inset-inline-end:12px; z-index:3;
  min-inline-size:44px; min-block-size:44px; padding:0 14px; border-radius:99px; cursor:pointer;
  background:rgba(6,7,12,.72); border:1px solid rgba(255,255,255,.32); color:#fff;
  backdrop-filter:blur(8px); font-size:.82rem; display:inline-flex; align-items:center; gap:7px;
}
.vidbtn:hover{ border-color:var(--neon); }

/* ══ THE POP-UP — HIGHZAK appears, floating, then vanishes ══════ */
/* NO window, NO scrim. A transparent layer that lets you keep reading
   and scrolling while he talks — he simply appears ON the page. */
.pop{
  position:fixed; inset:0; z-index:300;
  pointer-events:none;                 /* the page underneath stays fully usable */
  opacity:0; transition:opacity .5s var(--ease);
}
.pop.in{ opacity:1; }
.pop.out{ opacity:0; transition:opacity .9s var(--ease); }

/* where he stands: in the empty margin beside the reading column */
.pop-stage{
  position:absolute;
  inset-block-start:46%; inset-inline-end:clamp(4px, 1.5vw, 40px);
  inline-size:min(27vw, 400px);
  transform:translateY(-50%) scale(.5); transform-origin:50% 60%;
  opacity:0; filter:blur(8px);
  transition:transform .5s cubic-bezier(.34,1.42,.5,1), opacity .34s var(--ease), filter .4s var(--ease);
}
/* the pop — fast, with a touch of overshoot. it should startle. */
.pop.in .pop-stage{ transform:translateY(-50%) scale(1); opacity:1; filter:none; }
/* the vanish — slow and soft, drifting up */
.pop.out .pop-stage{
  transform:translateY(calc(-50% - 26px)) scale(1.04); opacity:0; filter:blur(7px);
  transition:transform .9s var(--ease), opacity .9s var(--ease), filter .9s var(--ease);
}

/* narrow screens: no side margin to stand in — he leans in from the bottom */
@media (max-width:1240px){
  .pop-stage{
    /* centred by margin, not by transform — so RTL and LTR land identically */
    inset-block-start:auto; inset-block-end:0;
    inset-inline-start:0; inset-inline-end:0; margin-inline:auto;
    inline-size:min(70vw, 340px);
    transform:translateY(26%) scale(.55); transform-origin:50% 100%;
  }
  .pop.in .pop-stage{ transform:translateY(5%) scale(1); }
  .pop.out .pop-stage{ transform:translateY(-3%) scale(1.04); }
}

/* An opaque dark plate UNDER him, fading to nothing at the edges.
   Screen-blending only reads correctly over a uniform dark backdrop —
   without this, the page behind shows through his hair and shirt. */
/* No plate, no glow, no frame. The webm carries a real alpha channel,
   so what lands on the page is the cutout and nothing else. */
.pop-vid{
  position:relative; z-index:1;
  inline-size:100%; block-size:auto; max-block-size:78svh; object-fit:contain;
  /* a whisper of ground shadow so he sits on the page instead of hovering flat */
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.55));
}
/* Safari can't take alpha from our encoder, so it gets the black-plate file.
   On this dark page, screen-blending that plate is visually identical. */
/* The last-resort plate. Screen-blending it can only ever reach the page if
   NOTHING between the video and the root isolates it — and this layer has to
   sit above the page, which means a z-index, which means a stacking context.
   The two cannot both be true, so the plate is not the answer for Safari: the
   .mov below carries a real alpha channel instead. This stays only for a
   browser that can play neither. */
.pop-vid.plate{ mix-blend-mode:screen; filter:none; }
html.a11y-contrast .pop-vid.plate{ mix-blend-mode:normal; }

/* one small, quiet control — not a player bar. it only exists so nobody is
   trapped with 16 seconds of talking they can't stop (and so we pass WCAG). */
.pop-bar{
  position:absolute; inset-block-end:2%; inset-inline:0; z-index:2;
  display:flex; gap:8px; justify-content:center;
  opacity:0; transition:opacity .3s var(--ease);
}
.pop-stage:hover .pop-bar, .pop-bar:focus-within{ opacity:1; }
@media (hover:none){ .pop-bar{ opacity:1; } }
.pop-btn{
  pointer-events:auto;                 /* the only clickable thing in the layer */
  min-inline-size:44px; min-block-size:44px; padding:0 14px; border-radius:99px; cursor:pointer;
  font-size:.9rem; border:1px solid rgba(255,255,255,.24); background:rgba(6,8,14,.66); color:#fff;
  backdrop-filter:blur(10px); display:inline-flex; align-items:center; justify-content:center; gap:7px;
  transition:.22s var(--ease);
}
.pop-btn:hover{ border-color:var(--neon); box-shadow:0 0 0 4px var(--neon-dim); }

/* the little "watch it again" chip that lives in the lesson afterwards */
.replay{
  display:inline-flex; align-items:center; gap:9px; min-block-size:44px; padding:8px 18px;
  border-radius:99px; cursor:pointer; font-size:.88rem; margin-block-end:26px;
  border:1px solid rgba(77,168,255,.45); background:linear-gradient(135deg,#0c1730,#0a0e1e); color:var(--txt);
  transition:.25s var(--ease);
}
.replay:hover{ border-color:var(--neon); box-shadow:0 0 0 4px var(--neon-dim); }
.replay .dot{ width:8px; height:8px; border-radius:50%; background:var(--neon); box-shadow:0 0 10px var(--neon); }

@media (prefers-reduced-motion: reduce){
  .pop, .pop-stage{ transition:opacity .2s linear; }
  .pop-stage{ transform:none; filter:none; }
}

/* ── owner (preview-everything) mode ──────────────────────────── */
.ownerchip{
  display:inline-flex; align-items:center; gap:7px; min-block-size:44px; padding:6px 14px;
  border-radius:99px; border:1px solid var(--gold); background:rgba(255,203,92,.12);
  color:var(--gold); font-size:.78rem; font-family:var(--f-mono); white-space:nowrap;
}
@media(max-width:760px){ .ownerchip{ display:none; } }

/* the world list, folded away under the trail */
.wlist{ margin-block:4px 26px; text-align:center; }
.wlist > summary{
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:9px;
  min-block-size:44px; padding:8px 18px; border-radius:99px;
  border:1px solid var(--line); background:#0b0f1e; font-size:.88rem; color:var(--txt-2);
}
.wlist > summary::-webkit-details-marker{ display:none; }
.wlist > summary::before{ content:"▸"; color:var(--neon); transition:transform .25s var(--ease); }
.wlist[open] > summary::before{ transform:rotate(90deg); }
.wlist > summary:hover{ border-color:var(--neon); color:#fff; }
.wlist .worlds{ margin-block-start:18px; text-align:start; }

/* view cross-fade — the map and the missions hand over softly */
#app{ transition:opacity .26s var(--ease); }
#app.view-out{ opacity:0; }
@media (prefers-reduced-motion: reduce){ #app{ transition:none; } #app.view-out{ opacity:1; } }

/* ══ THE UNLOCK — the page that sells the rest ═══════════════════ */
.unlock{ max-width:900px; margin-inline:auto; padding-block-end:90px; }
.ul-hero{ text-align:center; padding-block:26px 40px; }
.ul-hero h1{ font-size:clamp(2.2rem,6vw,3.8rem); margin-block:10px 18px; }
.ul-lead{ max-width:62ch; margin-inline:auto; font-size:1.08rem; color:var(--txt-2); }

.ul-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line-soft);
  border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden; margin-block-end:56px; }
@media(min-width:720px){ .ul-stats{ grid-template-columns:repeat(4,1fr); } }
.ul-stats div{ background:#0b0f1e; padding:20px 14px; text-align:center; }
.ul-stats b{ display:block; font-family:var(--f-display); font-size:1.6rem; color:var(--neon); }
.ul-stats span{ font-size:.78rem; color:var(--txt-3); }

.ul-worlds{ display:grid; gap:14px; margin-block:18px 56px; }
.ul-w{ display:flex; gap:16px; padding:20px 22px; border:1px solid var(--line);
  border-radius:var(--r-m); background:linear-gradient(160deg,#0c1020,#090b15); }
.ul-w b{ display:block; font-family:var(--f-display); font-size:1.05rem; margin-block-end:5px; }
.ul-w p{ margin:0; font-size:.95rem; }
.ul-n{ flex:0 0 auto; inline-size:38px; block-size:38px; border-radius:12px; display:grid;
  place-items:center; font-family:var(--f-mono); font-weight:700;
  background:var(--panel-2); border:1px solid var(--line); color:var(--neon); }
.ul-w.w3 .ul-n{ color:var(--gold); border-color:rgba(255,203,92,.4); }
.ul-w.w4 .ul-n{ color:#ff8a3d; border-color:rgba(255,138,61,.4); }

.ul-big{ border:1px solid var(--line); border-inline-start:3px solid var(--neon);
  border-radius:var(--r-l); background:#0c1020; padding:28px 30px; margin-block-end:22px; }
.ul-big h3{ margin-block-end:12px; }
.ul-big h3::before{ content:none; }
.ul-big p{ margin:0; font-size:1rem; }
.ul-ai{ border-inline-start-color:#ff8a3d; background:linear-gradient(160deg,#160f0a,#0b0a10); }
.ul-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-block-start:20px; }
.ul-strip video{ inline-size:100%; block-size:120px; object-fit:cover; border-radius:12px;
  border:1px solid var(--line); }
@media(max-width:600px){ .ul-strip{ grid-template-columns:1fr 1fr; } .ul-strip video:last-child{ display:none; } }

.ul-buy{ text-align:center; border:1px solid rgba(77,168,255,.4); border-radius:var(--r-xl);
  background:radial-gradient(120% 100% at 50% 0, rgba(46,123,255,.14), transparent 60%), #0a0e1c;
  padding:38px 26px; margin-block:40px 20px; box-shadow:0 40px 90px -50px rgba(46,123,255,.9); }
.ul-price{ margin-block-end:22px; }
.ul-num{ font-family:var(--f-display); font-size:clamp(2.6rem,9vw,4.2rem); font-weight:700;
  color:#fff; line-height:1.1; margin-block:6px; }
.ul-num s{ font-size:.4em; color:var(--txt-3); margin-inline-start:12px; }
.ul-price p{ margin:0; font-size:.9rem; color:var(--txt-3); }
.ul-buy .btn{ min-inline-size:min(320px,90%); }
.ul-buy .hbtn{ margin-inline-start:10px; }
.ul-refund{ font-size:.86rem; color:var(--txt-3); max-width:52ch; margin:20px auto 0; }
.ul-code{ margin-block-start:26px; padding-block-start:22px; border-block-start:1px solid var(--line-soft); }
.ul-code label{ display:block; font-size:.82rem; color:var(--txt-3); margin-block-end:8px; }
.ul-code-row{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.ul-code-row input{ inline-size:min(240px,60%); padding:12px 14px; border-radius:12px;
  background:#0a0d1a; border:1px solid var(--line); color:var(--txt); font:inherit; }
.ul-code-row input:focus{ outline:none; border-color:var(--neon); box-shadow:0 0 0 4px var(--neon-dim); }
.ul-keep{ text-align:center; font-size:.88rem; color:var(--txt-3); margin-block-end:26px; }

/* the ladder demo — one site, three tiers */
.ldr{ padding:22px; }
.ldr-stage{ position:relative; height:250px; border-radius:16px; overflow:hidden;
  background:#0d1020; transition:background .7s var(--ease); isolation:isolate; }
.ldr-sky{ position:absolute; inset:0; transition:opacity .7s var(--ease), background .7s var(--ease); }
.ldr-floor{ position:absolute; inset:64% -40% -20% -40%; opacity:0; transition:.7s var(--ease);
  background-image:linear-gradient(rgba(77,168,255,.35) 1px,transparent 1px),
    linear-gradient(90deg,rgba(77,168,255,.35) 1px,transparent 1px);
  background-size:44px 44px; transform:rotateX(70deg); }
.ldr-obj{ position:absolute; inset-block-start:50%; inset-inline-end:14%; inline-size:96px; aspect-ratio:1;
  transform:translateY(-50%); border-radius:14px; overflow:hidden;
  background:linear-gradient(150deg,#5a6480,#2a3048); transition:.7s var(--ease); }
.ldr-shine{ position:absolute; inset:0; opacity:0; transition:.7s var(--ease);
  background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.85), transparent 46%); }
.ldr-copy{ position:absolute; inset-block-start:50%; inset-inline-start:8%; transform:translateY(-50%);
  max-inline-size:52%; }
.ldr-kick{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.24em; color:var(--txt-3); display:block; }
.ldr-copy b{ display:block; font-family:var(--f-display); font-size:1.15rem; margin-block:6px 4px;
  transition:.7s var(--ease); }
.ldr-copy i{ font-style:normal; font-size:.78rem; color:var(--txt-3); }
.ldr-glass{ position:absolute; inset-block-end:14px; inset-inline-start:8%; inline-size:130px; block-size:34px;
  border-radius:99px; opacity:0; transition:.7s var(--ease);
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(10px); box-shadow:inset 0 0 12px rgba(255,255,255,.25); }
/* simple */
[data-tier="simple"] .ldr-sky{ background:linear-gradient(180deg,#14151a,#101116); }
[data-tier="simple"] .ldr-copy b{ letter-spacing:0; }
/* medium */
[data-tier="medium"] .ldr-sky{ background:
  radial-gradient(60% 60% at 22% 20%, rgba(124,58,237,.5), transparent 70%),
  radial-gradient(55% 55% at 80% 70%, rgba(46,123,255,.45), transparent 70%), #0a0a14; }
[data-tier="medium"] .ldr-obj{ background:linear-gradient(150deg,#8fa6ff,#2b2f6b); }
[data-tier="medium"] .ldr-glass{ opacity:1; }
[data-tier="medium"] .ldr-copy b{ letter-spacing:-.02em; font-size:1.32rem; }
/* master */
[data-tier="master"] .ldr-sky{ background:radial-gradient(70% 60% at 50% 30%, rgba(46,123,255,.30), transparent 70%), #04060e; }
[data-tier="master"] .ldr-floor{ opacity:1; }
[data-tier="master"] .ldr-obj{ inline-size:128px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #eaf3ff, #4da8ff 42%, #123a7a 78%);
  box-shadow:0 24px 50px -18px rgba(46,123,255,.9); animation:ldrSpin 9s linear infinite; }
[data-tier="master"] .ldr-shine{ opacity:1; }
[data-tier="master"] .ldr-glass{ opacity:1; }
[data-tier="master"] .ldr-copy b{ letter-spacing:-.03em; font-size:1.45rem; }
@keyframes ldrSpin{ 0%{ transform:translateY(-50%) rotate(0) } 100%{ transform:translateY(-50%) rotate(360deg) } }
.ldr input[type=range]{ width:100%; margin-block-start:18px; accent-color:var(--neon); }
.ldr-marks{ display:flex; justify-content:space-between; margin-block-start:6px; }
.ldr-marks span{ font-size:.8rem; color:var(--txt-3); cursor:pointer; padding:6px 10px; border-radius:8px; }
.ldr-marks span.on{ color:var(--neon); font-weight:700; }
@media (prefers-reduced-motion: reduce){ [data-tier="master"] .ldr-obj{ animation:none; } }

/* ══ THE HERO PORTRAIT — the suit, and a hologram peek beneath ════ */
@property --r { syntax:"<length>"; inherits:true; initial-value:0px; }

.reveal{
  position:relative; inline-size:min(420px, 76vw); aspect-ratio:1;
  margin:0 auto 22px; --mx:50%; --my:40%; --r:0px;
  /* the portrait floats — no frame, edges dissolve into the page */
  -webkit-mask-image:radial-gradient(closest-side, #000 62%, transparent 97%);
          mask-image:radial-gradient(closest-side, #000 62%, transparent 97%);
  cursor:crosshair; touch-action:pan-y;
  -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent;
}
.rv-face, .rv-helm{
  position:absolute; inset:0; inline-size:100%; block-size:100%;
  object-fit:cover; user-select:none; -webkit-user-drag:none;
  /* without this, a press-and-hold on iOS opens "Save Image / Copy" and the
     reveal never happens — holding is the FIRST thing a thumb does */
  -webkit-touch-callout:none; pointer-events:none;
}
/* The HELMET is the permanent state. It carries NO mask at all, so nothing —
   an unsupported mask, a degenerate zero-radius gradient (WebKit renders those
   fully transparent), a slow paint — can ever rub it out.
   The FACE is the one that is revealed: hidden outright until you touch, then
   faded in and masked down to the circle under your finger. Both the opacity
   and the mask have to agree before a single pixel of the face is on screen. */
.rv-helm{ z-index:0; }
.rv-face{
  z-index:1; opacity:0;
  -webkit-mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my),
    #000 0 52%, rgba(0,0,0,.55) 74%, transparent 100%);
          mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my),
    #000 0 52%, rgba(0,0,0,.55) 74%, transparent 100%);
  transition:--r .45s var(--ease), opacity .28s var(--ease);
}
.reveal.peeking .rv-face{ opacity:1; }
/* what makes the peek read as a hologram and not a hole */
.rv-holo{
  position:absolute; inset:0; z-index:2; pointer-events:none; mix-blend-mode:screen;
  opacity:0; transition:--r .45s var(--ease), opacity .28s var(--ease);
  background:
    repeating-linear-gradient(180deg, rgba(120,220,255,.16) 0 1px, transparent 1px 4px),
    radial-gradient(circle at var(--mx) var(--my), rgba(90,190,255,.30), transparent 62%);
  -webkit-mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my), #000 0 58%, transparent 92%);
          mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my), #000 0 58%, transparent 92%);
  animation:rvScan 3.2s linear infinite;
}
.reveal.peeking .rv-holo{ opacity:1; }
@keyframes rvScan{ 0%{ background-position:0 0, 0 0 } 100%{ background-position:0 8px, 0 0 } }
.rv-hint{
  position:absolute; inset-block-end:6%; inset-inline:0; text-align:center; z-index:3;
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--txt-3); pointer-events:none; transition:opacity .3s var(--ease);
}
.reveal.peeking .rv-hint{ opacity:0; }
html.a11y-contrast .rv-holo{ display:none; }
@media (prefers-reduced-motion: reduce){
  .rv-helm, .rv-holo{ transition:none; animation:none; }
}
.ul-refund a{ color:var(--txt-2); text-decoration:underline; text-underline-offset:3px; }
.ul-refund a:hover{ color:var(--neon); }