/* Upskill360 landing. Concept: mission control for your career.
   A deliberately dark, single-theme page: midnight ground, cobalt signal,
   teal for "ready", amber for the Polish stage, bright phone screens that pop. */
.dark-world {
  --bg: #060a16;
  --bg-2: #0a1022;
  --surface: rgba(140, 160, 255, 0.05);
  --surface-solid: #0e1630;
  --surface-2: #16203f;
  --ink: #eef2ff;
  --muted: #95a2c6;
  --line: rgba(150, 168, 220, 0.16);
  --cobalt: #5b7cff;
  --cobalt-ink: #ffffff;
  --cobalt-soft: rgba(91, 124, 255, 0.16);
  --teal: #3fe0b5;
  --amber: #ffb547;
  --amber-soft: rgba(255, 181, 71, 0.14);
  --shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8);
  --font-display: "Archivo", "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
  background: var(--bg);
  color: var(--ink);
  overflow-x: clip;
}
.dark-world h1, .dark-world h2, .dark-world h3 { font-family: var(--font-display); font-stretch: 112%; font-weight: 800; letter-spacing: -0.025em; }

/* ---------- Header ---------- */
.dark-world .site-header { background: transparent; border-bottom-color: transparent; transition: background 0.3s, border-color 0.3s; }
.dark-world .site-header.solid { background: rgba(6, 10, 22, 0.78); border-bottom-color: var(--line); }
.dark-world .logo { color: var(--ink); }
.btn-glow { position: relative; background: var(--cobalt); color: #fff; box-shadow: 0 0 0 0 rgba(91, 124, 255, 0.5), 0 10px 30px -8px rgba(91, 124, 255, 0.9); }
.btn-glow:hover { transform: translateY(-2px); box-shadow: 0 0 0 6px rgba(91, 124, 255, 0.15), 0 16px 40px -10px rgba(91, 124, 255, 1); }
.dark-world .btn-ghost { background: rgba(255, 255, 255, 0.04); color: var(--ink); border-color: var(--line); }

/* ---------- Hero ---------- */
.hero-w { position: relative; overflow: hidden; padding-block: 40px 90px; isolation: isolate; }
.hero-w canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.aurora { position: absolute; z-index: -2; border-radius: 50%; filter: blur(80px); opacity: 0.55; animation: drift 18s ease-in-out infinite alternate; pointer-events: none; }
.aurora.a1 { width: 620px; height: 620px; background: #2443ff; left: -180px; top: -200px; }
.aurora.a2 { width: 520px; height: 520px; background: #0fb3a0; right: -160px; top: 120px; opacity: 0.35; animation-delay: -6s; }
.aurora.a3 { width: 420px; height: 420px; background: #ff9d1c; right: 20%; bottom: -300px; opacity: 0.22; animation-delay: -12s; }
@keyframes drift { to { transform: translate(80px, 60px) scale(1.15); } }
.floor {
  position: absolute; z-index: -1; left: -50%; right: -50%; bottom: -10%; height: 55%;
  background-image: linear-gradient(rgba(120, 145, 255, 0.18) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 145, 255, 0.18) 1px, transparent 1px);
  background-size: 64px 64px; transform: perspective(600px) rotateX(62deg); transform-origin: bottom;
  mask-image: linear-gradient(to top, black 10%, transparent 85%); -webkit-mask-image: linear-gradient(to top, black 10%, transparent 85%);
  animation: floor 6s linear infinite;
}
@keyframes floor { to { background-position: 0 64px; } }
.hero-w .wrap > div:first-child { position: relative; z-index: 2; }
.hero-w .wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 32px; align-items: center; min-height: min(760px, 88vh); }
@media (max-width: 960px) { .hero-w .wrap { grid-template-columns: minmax(0, 1fr); min-height: 0; } }
.pill {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 8px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); font: 500 0.82rem var(--font-mono); color: var(--muted); margin-bottom: 26px;
}
.pill b { background: var(--teal); color: #04221a; border-radius: 999px; padding: 2px 9px; font-weight: 700; font-size: 0.72rem; }
.hero-w h1 { font-size: clamp(2.6rem, 6.4vw, 5.4rem); line-height: 0.98; margin: 0 0 24px; }
.rotator { display: block; height: 1.08em; overflow: hidden; position: relative; }
.rotator-list { display: block; transition: transform 0.7s cubic-bezier(0.7, 0, 0.2, 1); }
.rotator-list span {
  display: block; height: 1.08em; white-space: nowrap;
  background: linear-gradient(90deg, #7f9bff, #3fe0b5 55%, #ffb547); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-w .lead { font-size: 1.2rem; color: var(--muted); max-width: 34em; margin: 0 0 32px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 36px; }
.hero-meta div { font: 500 0.8rem var(--font-mono); color: var(--muted); }
.hero-meta b { display: block; font: 800 1.9rem var(--font-display); font-stretch: 112%; color: var(--ink); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* hero stage: 3D phone + orbit */
.stage-w { position: relative; display: grid; place-items: center; height: 680px; perspective: 1400px; }
.orbit { position: absolute; width: 480px; height: 480px; border-radius: 50%; border: 1px dashed rgba(140, 160, 255, 0.28); animation: spin 60s linear infinite; }
.orbit.o2 { width: 350px; height: 350px; border-style: solid; border-color: rgba(63, 224, 181, 0.16); animation-duration: 40s; animation-direction: reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.orbit .sat { position: absolute; left: 50%; top: 50%; transform: rotate(var(--a)) translateX(240px) rotate(calc(-1 * var(--a))); }
.orbit.o2 .sat { transform: rotate(var(--a)) translateX(175px) rotate(calc(-1 * var(--a))); }
.sat span {
  display: inline-block; transform: translate(-50%, -50%); animation: unspin 60s linear infinite; white-space: nowrap;
  font: 600 0.75rem var(--font-mono); padding: 6px 11px; border-radius: 999px; background: rgba(14, 22, 48, 0.9); border: 1px solid var(--line); color: var(--ink);
}
.orbit.o2 .sat span { animation-duration: 40s; animation-direction: reverse; color: var(--teal); }
@keyframes unspin { to { transform: translate(-50%, -50%) rotate(-360deg); } }
.glow-under { position: absolute; width: 360px; height: 120px; bottom: 30px; border-radius: 50%; background: radial-gradient(closest-side, rgba(91, 124, 255, 0.55), transparent); filter: blur(12px); }
.tilt { transform-style: preserve-3d; transform: rotateY(-16deg) rotateX(8deg) rotateZ(1deg); transition: transform 0.25s ease-out; }
@media (max-width: 960px) { .stage-w { height: 640px; } }
@media (max-width: 600px) {
  .stage-w { height: 600px; }
  .orbit { width: 380px; height: 380px; } .orbit .sat { transform: rotate(var(--a)) translateX(190px) rotate(calc(-1 * var(--a))); }
  .orbit.o2 { display: none; }
  .tilt { transform: rotateY(-8deg) rotateX(5deg); }
}

/* ---------- Phone (fixed size; never relies on aspect-ratio) ---------- */
.phone {
  --pw: 300px; position: relative; width: var(--pw); height: calc(var(--pw) * 2.06); flex: none;
  border-radius: 48px; padding: 11px; background: linear-gradient(150deg, #2a3557, #0b1020 40%, #1a2240);
  box-shadow: 0 50px 100px -30px rgba(0, 0, 0, 0.9), 0 0 0 1.5px rgba(255, 255, 255, 0.1), inset 0 0 0 2px rgba(0, 0, 0, 0.6);
}
.phone::before { content: ""; position: absolute; top: 21px; left: 50%; width: 96px; height: 27px; transform: translateX(-50%); border-radius: 20px; background: #03050b; z-index: 6; }
.phone::after { content: ""; position: absolute; inset: 11px; border-radius: 38px; pointer-events: none; z-index: 5; background: linear-gradient(115deg, rgba(255, 255, 255, 0.16), transparent 28%, transparent 70%, rgba(255, 255, 255, 0.05)); }
@media (max-width: 400px) { .phone { --pw: 280px; } }
.screen {
  --s-bg: #f5f7fc; --s-card: #ffffff; --s-ink: #0f1a2e; --s-muted: #5b6785; --s-line: #e1e6f2;
  --s-cobalt: #2f55f5; --s-soft: #e3e9ff; --s-amber: #c27a00; --s-amber-soft: #fff2d9; --s-teal: #0c9a74;
  position: relative; width: 100%; height: 100%; border-radius: 38px; overflow: hidden; background: var(--s-bg); color: var(--s-ink);
  font: 12px/1.45 var(--font-body); display: flex; flex-direction: column; color-scheme: light;
}
.sb { display: flex; justify-content: space-between; padding: 17px 26px 4px; font-weight: 600; font-size: 11.5px; }
.abar { display: flex; justify-content: space-between; align-items: center; padding: 16px 16px 6px; }
.abar strong { font: 800 18px var(--font-display); font-stretch: 105%; letter-spacing: -0.02em; }
.abar .streak { font: 700 11px var(--font-mono); color: var(--s-amber); }
.sbody { flex: 1; padding: 6px 12px 12px; display: flex; flex-direction: column; gap: 9px; min-height: 0; }
.tabs-b { display: flex; justify-content: space-around; padding: 9px 10px 20px; border-top: 1px solid var(--s-line); background: var(--s-card); font: 600 9.5px var(--font-body); color: var(--s-muted); }
.tabs-b span { display: grid; justify-items: center; gap: 3px; }
.tabs-b span.on { color: var(--s-cobalt); }
.tabs-b i { width: 18px; height: 4px; border-radius: 4px; background: currentColor; opacity: 0.6; }
.over { font: 700 9.5px var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--s-muted); padding-inline: 3px; }
.scard { background: var(--s-card); border: 1px solid var(--s-line); border-radius: 16px; padding: 12px; }
.schip { display: inline-flex; width: fit-content; font: 700 9.5px var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 9px; border-radius: 999px; background: var(--s-soft); color: var(--s-cobalt); }
.schip.amber { background: var(--s-amber-soft); color: var(--s-amber); }
.sq { font: 700 14.5px/1.32 var(--font-display); font-stretch: 102%; letter-spacing: -0.01em; margin: 8px 0 6px; }
.swhy { color: var(--s-muted); font-size: 11px; margin: 0; }
.sans { border: 1.5px dashed var(--s-line); border-radius: 12px; padding: 9px 10px; min-height: 72px; font-size: 11.5px; }
.caret { display: inline-block; width: 1.5px; height: 12px; background: var(--s-cobalt); vertical-align: -2px; margin-left: 1px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.sfb { background: var(--s-soft); border-radius: 12px; padding: 10px; transition: opacity 0.4s, transform 0.4s; }
.sfb-h { display: flex; justify-content: space-between; font: 700 9.5px var(--font-mono); letter-spacing: 0.06em; color: var(--s-cobalt); margin-bottom: 4px; }
.sstars { color: #e29400; letter-spacing: 1px; }
.sfb p { margin: 0; font-size: 11.5px; }
.hidden-s { opacity: 0; transform: translateY(10px); }
.notif {
  position: absolute; left: 10px; right: 10px; top: 54px; z-index: 4; border-radius: 18px; padding: 10px 12px;
  background: rgba(255, 255, 255, 0.92); box-shadow: 0 14px 30px -10px rgba(10, 16, 30, 0.45);
  display: grid; grid-template-columns: 30px 1fr; gap: 9px; font-size: 11px; color: var(--s-ink); transform: translateY(-160%); opacity: 0;
}
.notif .ic { width: 30px; height: 30px; border-radius: 9px; background: var(--s-cobalt); display: grid; place-items: center; }
.notif b { display: flex; justify-content: space-between; }
.notif b span { font-weight: 500; color: var(--s-muted); }
.phone.drop .notif { animation: drop 3.2s cubic-bezier(0.2, 0.9, 0.3, 1.15) forwards; }
@keyframes drop { 0% { transform: translateY(-160%); opacity: 0; } 14%, 78% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-160%); opacity: 0; } }

/* Story screens */
.screens { position: relative; flex: 1; min-height: 0; }
.scr { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; transform: translateY(8px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
.scr.on { opacity: 1; transform: none; }
.doc-s { display: grid; grid-template-columns: 54px 1fr; gap: 12px; align-items: center; }
.doc-ico { position: relative; width: 54px; height: 66px; border-radius: 8px; border: 1px solid var(--s-line); background: var(--s-bg); overflow: hidden; padding: 9px 8px; display: grid; gap: 5px; align-content: start; }
.doc-ico i { display: block; height: 4px; border-radius: 2px; background: var(--s-line); }
.doc-ico i:first-child { width: 70%; background: var(--s-ink); opacity: 0.6; }
.doc-ico::after { content: ""; position: absolute; left: 0; right: 0; height: 16px; background: linear-gradient(transparent, rgba(47, 85, 245, 0.35)); border-bottom: 2px solid var(--s-cobalt); animation: scan 2.2s ease-in-out infinite; }
@keyframes scan { from { top: -18px; } to { top: 68px; } }
.bar-s { height: 5px; border-radius: 4px; background: var(--s-line); overflow: hidden; margin-top: 6px; }
.bar-s span { display: block; height: 100%; width: 0; background: var(--s-cobalt); transition: width 2.4s ease; }
.scr.on .bar-s span { width: 100%; }
.chips-s { display: flex; flex-wrap: wrap; gap: 5px; }
.chips-s span { font: 600 10px var(--font-body); padding: 4px 9px; border-radius: 999px; background: var(--s-soft); color: var(--s-cobalt); opacity: 0; transform: scale(0.7); transition: opacity 0.35s, transform 0.35s; }
.scr.on .chips-s span { opacity: 1; transform: none; }
.scr.on .chips-s span:nth-child(2) { transition-delay: 0.25s; } .scr.on .chips-s span:nth-child(3) { transition-delay: 0.5s; }
.scr.on .chips-s span:nth-child(4) { transition-delay: 0.75s; } .scr.on .chips-s span:nth-child(5) { transition-delay: 1s; } .scr.on .chips-s span:nth-child(6) { transition-delay: 1.25s; }
.exp-s { display: grid; gap: 8px; }
.exp-s div { display: grid; gap: 1px; padding-bottom: 8px; border-bottom: 1px solid var(--s-line); }
.exp-s div:last-child { border: 0; padding: 0; }
.exp-s b { font-size: 12px; } .exp-s span { color: var(--s-muted); font-size: 10.5px; }
.role-s { display: grid; gap: 6px; }
.role-s div { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--s-line); background: var(--s-card); font-weight: 600; color: var(--s-muted); }
.role-s div.sel { border: 2px solid var(--s-cobalt); color: var(--s-ink); background: var(--s-soft); }
.role-s div.sel::after { content: "✓"; color: var(--s-cobalt); font-weight: 800; }
.goal-s { grid-template-columns: 1fr 1fr; }
.goal-s div { justify-content: center; text-align: center; padding: 9px 6px; font-size: 0.92em; }
.goal-s div.sel::after { content: none; }
.time-s { display: flex; justify-content: space-between; align-items: center; }
.time-s b { font: 800 22px var(--font-display); letter-spacing: -0.02em; }
.ladder-s { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.ladder-s div { border-radius: 10px; padding: 9px 1px; text-align: center; background: var(--s-bg); border: 1px solid var(--s-line); font-weight: 700; font-size: 10.5px; }
.ladder-s small { display: block; font: 700 8px var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--s-cobalt); min-height: 10px; }
.ladder-s .now { background: var(--s-cobalt); border-color: var(--s-cobalt); color: #fff; } .ladder-s .now small { color: #fff; }
.ladder-s .tgt { border: 2px solid var(--s-cobalt); }
.ring-s { display: grid; grid-template-columns: 74px 1fr; gap: 12px; align-items: center; }
.ring-s svg { width: 74px; height: 74px; }
.ring-s circle { fill: none; stroke-width: 9; }
.ring-s .tr { stroke: var(--s-line); }
.ring-s .vl { stroke: var(--s-teal); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; stroke-dasharray: 238.8; stroke-dashoffset: 238.8; transition: stroke-dashoffset 1.6s cubic-bezier(0.3, 0.8, 0.2, 1) 0.2s; }
.scr.on .ring-s .vl { stroke-dashoffset: 86; }
.ring-s text { font: 800 19px var(--font-display); fill: var(--s-ink); }
.plan-s { display: grid; gap: 7px; }
.plan-s div { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: center; font-weight: 600; font-size: 11.5px; }
.plan-s i { width: 22px; height: 22px; border-radius: 50%; background: var(--s-soft); color: var(--s-cobalt); display: grid; place-items: center; font: 700 10px var(--font-mono); font-style: normal; }
.pro-s { background: var(--s-amber-soft); border-radius: 14px; padding: 12px; }
.pro-s p { margin: 6px 0 0; font-size: 11.5px; }
.ph-s { background: rgba(226, 148, 0, 0.22); border-radius: 3px; padding: 0 3px; font-family: var(--font-mono); font-size: 10px; }
.bul-s { border: 1px dashed rgba(194, 122, 0, 0.45); border-radius: 12px; padding: 10px; font-size: 11px; display: grid; gap: 4px; }
.bul-s b { font: 700 9px var(--font-mono); letter-spacing: 0.06em; color: var(--s-amber); display: flex; justify-content: space-between; }
.done-s { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--s-teal); font-size: 11.5px; }

/* ---------- Ribbon ---------- */
.ribbon-w { border-block: 1px solid var(--line); padding-block: 18px; overflow: hidden; background: var(--bg-2); }
.ribbon-w .track { display: flex; gap: 36px; width: max-content; animation: slide 45s linear infinite; font: 600 1rem var(--font-mono); color: var(--muted); white-space: nowrap; }
.ribbon-w .track span::before { content: "▲"; color: var(--cobalt); font-size: 0.7em; margin-right: 12px; vertical-align: 2px; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- Statement ---------- */
.statement { padding-block: 96px; }
.statement p { font: 800 clamp(1.8rem, 4.4vw, 3.6rem)/1.12 var(--font-display); font-stretch: 112%; letter-spacing: -0.025em; margin: 0; max-width: 22em; text-wrap: balance; }
.statement .w { transition: color 0.2s; }
.js .statement .w { color: rgba(238, 242, 255, 0.16); }
.js .statement .w.lit { color: var(--ink); }
.js .statement .w.accent.lit { color: var(--teal); }
.js .statement .w.accent2.lit { color: var(--amber); }

/* ---------- Story ---------- */
.story { padding-block: 40px 88px; }
.story-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
.story-steps { display: grid; }
.sstep { min-height: 54vh; display: flex; flex-direction: column; justify-content: center; gap: 14px; opacity: 0.45; transition: opacity 0.7s ease; }
.sstep.on { opacity: 1; }
.sstep .k { font: 600 0.8rem var(--font-mono); color: var(--cobalt); letter-spacing: 0.14em; }
.sstep h3 { font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.02; max-width: 12em; }
.sstep p { color: var(--muted); font-size: 1.1rem; max-width: 28em; margin: 0; }
.sstep .bul { display: flex; flex-wrap: wrap; gap: 8px; }
.sstep .bul span { font: 500 0.8rem var(--font-mono); padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); }
.story-phone { position: sticky; top: max(96px, calc(50vh - 330px)); height: fit-content; display: grid; justify-items: center; gap: 22px; }
.rail { display: flex; gap: 8px; }
.rail i { width: 28px; height: 4px; border-radius: 4px; background: var(--surface-2); transition: background 0.4s, width 0.4s; }
.rail i.on { background: var(--cobalt); width: 48px; }
.shot { display: none; }
/* Phones, tablets and any touch screen get the stacked layout; the pinned phone is for desktop scrolling. */
@media (max-width: 1100px), (hover: none) and (pointer: coarse) {
  .story-grid { grid-template-columns: minmax(0, 1fr); }
  .story-phone { display: none; }
  .sstep { min-height: 0; opacity: 1; padding-block: 36px; }
  .shot { display: grid; justify-items: center; margin-top: 10px; }
  .shot .phone { --pw: 280px; }
}

/* ---------- Trajectory ---------- */
.traj { padding-block: 92px; background: radial-gradient(80% 60% at 50% 100%, rgba(91, 124, 255, 0.16), transparent), var(--bg-2); border-block: 1px solid var(--line); }
.traj-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 40px; }
.traj h2, .sec-h { font-size: clamp(2rem, 4.4vw, 3.6rem); line-height: 1; margin: 0; max-width: 14em; }
.eyebrow-w { font: 600 0.8rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.16em; color: var(--teal); margin: 0 0 18px; }
.chart-box { overflow-x: auto; }
.chart { width: 100%; min-width: 640px; height: auto; display: block; }
.chart .grid-l { stroke: rgba(150, 168, 220, 0.14); }
.chart .lvl { fill: var(--muted); font: 600 13px var(--font-mono); }
.chart .xl { fill: var(--muted); font: 500 12px var(--font-mono); }
.chart .path-bg { stroke: rgba(150, 168, 220, 0.18); stroke-width: 3; fill: none; }
.chart .path-fg { stroke: url(#tg); stroke-width: 5; fill: none; stroke-linecap: round; filter: drop-shadow(0 0 10px rgba(91, 124, 255, 0.7)); }
.chart .area { fill: url(#ta); }
.chart .ms circle { fill: var(--bg); stroke-width: 3; }
.chart .ms text { fill: var(--ink); font: 700 14px var(--font-body); }
.chart .ms .sub { fill: var(--muted); font: 500 11.5px var(--font-mono); }
.chart .ms { transition: opacity 0.5s, transform 0.5s; }
.js .chart .ms.pre { opacity: 0.15; }
.ms-list { display: none; }
/* Phones: fit the whole chart on screen and list the milestones below it. */
@media (max-width: 640px) {
  .chart { min-width: 0; }
  .chart .ms text { display: none; }
  .chart .lvl { font-size: 23px; }
  .chart .xl { font-size: 24px; }
  .chart .ms circle { r: 15px; stroke-width: 6; }
  .chart .ms:last-of-type circle { r: 18px; }
  .ms-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 16px; list-style: none; margin: 22px 0 0; padding: 0; }
  .ms-list li { display: grid; grid-template-columns: 12px minmax(0, 1fr); column-gap: 10px; align-content: start; }
  .ms-list li::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 3px solid var(--c); box-sizing: border-box; grid-row: span 2; align-self: start; margin-top: 4px; }
  .ms-list b { font: 700 0.95rem var(--font-body); color: var(--ink); }
  .ms-list span { font: 500 0.78rem var(--font-mono); color: var(--muted); }
}

/* ---------- Polish ---------- */
.polish-w { padding-block: 96px; }
.pgrid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 24px; margin-top: 48px; align-items: stretch; }
@media (max-width: 900px) { .pgrid { grid-template-columns: minmax(0, 1fr); } }
.glass { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 28px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); min-width: 0; }
.tagm { font: 700 0.72rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.rawq { font-size: 1.15rem; color: var(--muted); margin: 14px 0 0; font-style: italic; }
.proq { position: relative; background: linear-gradient(160deg, rgba(255, 181, 71, 0.14), rgba(255, 181, 71, 0.03)); border-color: rgba(255, 181, 71, 0.35); overflow: hidden; }
.proq .tagm { color: var(--amber); }
.proq .txt { font-size: 1.22rem; line-height: 1.55; margin: 14px 0 18px; min-height: 7.8em; color: var(--ink); }
.proq .ph { color: var(--amber); font-family: var(--font-mono); font-size: 0.85em; background: rgba(255, 181, 71, 0.14); border-radius: 4px; padding: 0 4px; }
.proq .bl { border-top: 1px dashed rgba(255, 181, 71, 0.4); padding-top: 14px; color: var(--ink); }
.proq .bl b { display: block; font: 700 0.72rem var(--font-mono); letter-spacing: 0.12em; color: var(--amber); margin-bottom: 4px; }
.shine { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 220, 160, 0.22) 50%, transparent 70%); transform: translateX(-120%); pointer-events: none; }
.proq.run .shine { animation: shine 1.4s ease forwards; }
@keyframes shine { to { transform: translateX(120%); } }
.polish-btn { margin-top: 18px; font: 600 0.9rem var(--font-body); background: var(--amber); color: #1d1300; border: 0; border-radius: 999px; padding: 10px 18px; cursor: pointer; }

/* ---------- Bento ---------- */
.bento-w { padding-block: 40px 120px; }
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(200px, auto); gap: 16px; margin-top: 48px; }
.tile { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 24px; display: flex; flex-direction: column; gap: 10px; min-width: 0; transition: border-color 0.3s, transform 0.3s; }
.tile:hover { border-color: rgba(91, 124, 255, 0.5); transform: translateY(-3px); }
.tile h3 { font-size: 1.3rem; margin: 0; }
.tile p { color: var(--muted); margin: 0; font-size: 0.97rem; }
.t-a { grid-column: span 4; grid-row: span 2; } .t-b { grid-column: span 2; } .t-c { grid-column: span 2; }
.t-d { grid-column: span 2; } .t-e { grid-column: span 2; } .t-f { grid-column: span 2; }
@media (max-width: 900px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .t-a { grid-column: span 2; grid-row: auto; } .t-b, .t-c, .t-d, .t-e, .t-f { grid-column: span 1; } }
@media (max-width: 560px) { .bento { grid-template-columns: minmax(0, 1fr); } .t-a, .t-b, .t-c, .t-d, .t-e, .t-f { grid-column: auto; } }
.chat { display: grid; gap: 10px; margin-top: auto; }
.bub { max-width: 82%; padding: 12px 14px; border-radius: 16px; font-size: 0.95rem; line-height: 1.45; }
.bub.me { justify-self: end; background: var(--cobalt); color: #fff; border-bottom-right-radius: 4px; }
.bub.ai { background: var(--surface-2); color: var(--ink); border-bottom-left-radius: 4px; }
.bub.ai b { display: block; font: 700 0.7rem var(--font-mono); letter-spacing: 0.1em; color: var(--teal); margin-bottom: 4px; }
.js .bub { opacity: 0; transform: translateY(12px); transition: opacity 0.5s, transform 0.5s; }
.js .tile.in .bub { opacity: 1; transform: none; }
.js .tile.in .bub:nth-child(2) { transition-delay: 0.7s; } .js .tile.in .bub:nth-child(3) { transition-delay: 1.5s; }
.big-num { font: 800 3.4rem var(--font-display); font-stretch: 112%; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.big-num small { font-size: 1rem; color: var(--muted); font-weight: 500; letter-spacing: 0; }
.flame { color: var(--amber); }
.clock { font: 800 2.8rem var(--font-mono); letter-spacing: -0.04em; color: var(--ink); }
.clock i { font-style: normal; animation: blink 1s steps(1) infinite; color: var(--cobalt); }
.bars { display: flex; align-items: flex-end; gap: 8px; height: 90px; margin-top: auto; }
.bars i { flex: 1; border-radius: 6px 6px 2px 2px; background: linear-gradient(to top, var(--cobalt), #8aa2ff); height: 8%; transition: height 1s cubic-bezier(0.2, 0.8, 0.2, 1); }
.tile.in .bars i { height: var(--h); }
.tile.in .bars i:nth-child(2) { transition-delay: 0.1s; } .tile.in .bars i:nth-child(3) { transition-delay: 0.2s; } .tile.in .bars i:nth-child(4) { transition-delay: 0.3s; } .tile.in .bars i:nth-child(5) { transition-delay: 0.4s; } .tile.in .bars i:nth-child(6) { transition-delay: 0.5s; }
.cloud { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.cloud span { font: 600 0.75rem var(--font-mono); padding: 5px 10px; border-radius: 999px; background: var(--cobalt-soft); color: #b9c7ff; }
.shield { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: rgba(63, 224, 181, 0.12); color: var(--teal); }

/* ---------- Training ---------- */
.train-w { padding-block: 40px 120px; }
.train { position: relative; overflow: hidden; border-radius: 28px; padding: clamp(28px, 5vw, 64px); border: 1px solid var(--line);
  background: radial-gradient(60% 80% at 100% 0%, rgba(255, 181, 71, 0.18), transparent), radial-gradient(60% 80% at 0% 100%, rgba(91, 124, 255, 0.22), transparent), var(--bg-2);
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 36px; align-items: center; }
@media (max-width: 900px) { .train { grid-template-columns: minmax(0, 1fr); } }
.train .eyebrow-w { color: var(--amber); }
.train p { color: var(--muted); font-size: 1.1rem; margin: 14px 0 26px; max-width: 30em; }
.btn-amber { background: var(--amber); color: #1d1300; }
.btn-amber:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(255, 181, 71, 0.8); }
.topics { display: grid; gap: 12px; }
.topic { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: center; padding: 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); }
.topic .ti { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 181, 71, 0.12); color: var(--amber); }
.topic b { display: block; font-size: 1.02rem; }
.topic span { color: var(--muted); font-size: 0.9rem; }

/* ---------- Pricing ---------- */
.price-w { padding-block: 40px 120px; }
.prices-w { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 900px; margin-top: 48px; }
@media (max-width: 720px) { .prices-w { grid-template-columns: minmax(0, 1fr); } }
.pcard { position: relative; border-radius: 24px; padding: 32px; background: var(--surface-solid); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.pcard.feat { border: 0; background: linear-gradient(var(--surface-solid), var(--surface-solid)) padding-box, conic-gradient(from var(--ang), #5b7cff, #3fe0b5, #ffb547, #5b7cff) border-box; border: 2px solid transparent; animation: ang 6s linear infinite; box-shadow: 0 30px 80px -30px rgba(91, 124, 255, 0.6); }
@keyframes ang { to { --ang: 360deg; } }
.pcard h3 { font-size: 1.3rem; margin: 0; }
.pcard .amt { color: var(--ink); font: 800 3rem var(--font-display); font-stretch: 112%; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pcard .amt span { font: 500 1rem var(--font-body); color: var(--muted); letter-spacing: 0; }
.pcard p { margin: 0; color: var(--muted); }
.badge-w { width: fit-content; font: 700 0.72rem var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; background: var(--teal); color: #04221a; }
.ticks { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.ticks li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; }
.ticks li::before { content: "✓"; color: var(--teal); font-weight: 800; }

/* ---------- FAQ / final ---------- */
.faq-w { padding-block: 40px 100px; }
.faq-w .list { max-width: 860px; margin-top: 36px; }
.dark-world details { border-bottom-color: var(--line); }
.dark-world summary::after { color: var(--teal); }
.final-w { padding-block: 100px; text-align: center; position: relative; overflow: hidden; isolation: isolate; }
.final-w::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 900px; height: 500px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(91, 124, 255, 0.35), transparent); filter: blur(20px); }
.final-w h2 { font-size: clamp(2.2rem, 5.6vw, 4.6rem); line-height: 1; max-width: 13em; margin: 0 auto 20px; }
.final-w p.sub { color: var(--muted); font-size: 1.15rem; margin: 0 auto 34px; max-width: 32em; }
.early-w { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 560px; margin: 0 auto; }
.early-w input[type="email"] { flex: 1 1 240px; min-width: 0; font: inherit; padding: 15px 20px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.05); color: var(--ink); }
.early-w .check { flex-basis: 100%; display: flex; gap: 8px; justify-content: center; font-size: 0.85rem; color: var(--muted); text-align: left; }
.early-w .check input { margin-top: 4px; }
.early-w .form-status { flex-basis: 100%; margin: 0; }
.dark-world .site-footer { border-top-color: var(--line); }

/* ---------- Reveal ---------- */
.rv { transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.7s ease; }
.js .rv.pre { transform: translateY(14px); opacity: 0.35; }

/* ================= Mentor Deep Dives ================= */
.mentor-w { padding-block: 40px 120px; }
.mentor-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
@media (max-width: 960px) { .mentor-grid { grid-template-columns: minmax(0, 1fr); } }
.mentor-points { display: grid; gap: 16px; margin: 28px 0 32px; }
.mentor-points > div { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; }
.mentor-points .mi { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--amber-soft); color: var(--amber); }
.mentor-points b { display: block; font-size: 1.05rem; }
.mentor-points span { color: var(--muted); font-size: 0.97rem; }
.sep-note { display: inline-flex; gap: 8px; align-items: center; font: 500 0.82rem var(--font-mono); color: var(--muted); border: 1px dashed var(--line); border-radius: 10px; padding: 8px 12px; margin-bottom: 26px; }

/* Ticket: main body + tear-off stub with notches cut at the perforation. */
.ticket {
  --stub: 190px; --notch: 14px;
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--stub);
  border-radius: 24px; color: var(--ink);
  background:
    radial-gradient(90% 120% at 0% 0%, rgba(91, 124, 255, 0.28), transparent 60%),
    radial-gradient(80% 120% at 100% 100%, rgba(255, 181, 71, 0.2), transparent 60%),
    #0f1733;
  -webkit-mask:
    radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0, transparent 98%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
  mask:
    radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0, transparent 98%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.55));
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ticket.float-t { transform: rotate(-2deg); }
.ticket.float-t:hover { transform: rotate(0deg) translateY(-4px); }
.t-main { padding: 28px; display: grid; gap: 16px; min-width: 0; border: 1px solid var(--line); border-right: 0; border-radius: 24px 0 0 24px; }
.t-stub { padding: 28px 22px; display: flex; flex-direction: column; gap: 12px; justify-content: space-between; border: 1px solid var(--line); border-left: 2px dashed rgba(150, 168, 220, 0.35); border-radius: 0 24px 24px 0; text-align: center; }
.t-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.t-kicker { font: 700 0.72rem var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); }
.t-track { font: 700 0.7rem var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: var(--cobalt-soft); color: #b9c7ff; }
.ticket h3 { font-size: clamp(1.35rem, 2.4vw, 1.9rem); line-height: 1.05; margin: 0; }
.mentor-row { display: flex; gap: 12px; align-items: center; }
.avatar { width: 48px; height: 48px; border-radius: 50%; flex: none; display: grid; place-items: center; font: 800 0.95rem var(--font-display); color: var(--ink);
  border: 2.5px solid transparent; background: linear-gradient(#141f45, #141f45) padding-box, conic-gradient(from 200deg, #5b7cff, #3fe0b5, #ffb547, #5b7cff) border-box; }
.mentor-row b { display: block; font-size: 1rem; }
.mentor-row span { color: var(--muted); font-size: 0.88rem; }
.weeks { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.weeks li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--line); }
.weeks li:first-child { border-top: 0; }
.weeks .wk { font: 700 0.72rem var(--font-mono); color: var(--teal); letter-spacing: 0.04em; text-transform: uppercase; }
.weeks .wk small { display: block; color: var(--muted); font-weight: 500; letter-spacing: 0; text-transform: none; }
.weeks .wt { font-size: 0.95rem; }
.t-format { font: 500 0.8rem var(--font-mono); color: var(--muted); }
.admit { font: 800 0.72rem var(--font-mono); letter-spacing: 0.2em; color: var(--muted); }
.t-price { font: 800 2.6rem var(--font-display); font-stretch: 112%; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.t-price small { display: block; font: 500 0.78rem var(--font-mono); letter-spacing: 0; color: var(--muted); margin-top: 6px; }
.seat-meter { display: grid; gap: 6px; font: 600 0.75rem var(--font-mono); color: var(--muted); }
.seat-meter .bar { height: 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.seat-meter .bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--amber), #ff7a45); border-radius: 4px; width: var(--fill, 40%); transition: width 1.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
.t-stub .btn { width: 100%; padding-inline: 12px; }
.example-badge { position: absolute; top: -12px; left: 24px; font: 700 0.68rem var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; background: var(--bg); border: 1px dashed var(--line); color: var(--muted); padding: 4px 10px; border-radius: 6px; z-index: 2; }
@media (max-width: 640px) {
  .ticket { --cut: 230px; grid-template-columns: minmax(0, 1fr);
    -webkit-mask:
      radial-gradient(circle var(--notch) at 0 calc(100% - var(--cut)), transparent 98%, #000) left / 51% 100% no-repeat,
      radial-gradient(circle var(--notch) at 100% calc(100% - var(--cut)), transparent 98%, #000) right / 51% 100% no-repeat;
    mask:
      radial-gradient(circle var(--notch) at 0 calc(100% - var(--cut)), transparent 98%, #000) left / 51% 100% no-repeat,
      radial-gradient(circle var(--notch) at 100% calc(100% - var(--cut)), transparent 98%, #000) right / 51% 100% no-repeat; }
  .t-main { border-right: 1px solid var(--line); border-bottom: 0; border-radius: 24px 24px 0 0; padding: 22px; }
  .t-stub { height: var(--cut); border-left: 1px solid var(--line); border-top: 2px dashed rgba(150, 168, 220, 0.35); border-radius: 0 0 24px 24px; }
  .ticket.float-t { transform: none; }
}

/* Pricing: mentor note under the plans */
.mentor-note { margin-top: 20px; max-width: 900px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 22px 26px; border-radius: 20px; border: 1px solid rgba(255, 181, 71, 0.35); background: linear-gradient(120deg, rgba(255, 181, 71, 0.12), rgba(255, 181, 71, 0.02)); }
.mentor-note .mi { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--amber-soft); color: var(--amber); }
.mentor-note b { display: block; font-size: 1.08rem; }
.mentor-note span { color: var(--muted); }
@media (max-width: 720px) { .mentor-note { grid-template-columns: minmax(0, 1fr); } }

/* ================= Mentors page ================= */
.mhero { position: relative; overflow: hidden; isolation: isolate; padding-block: 80px 70px; }
.mhero h1 { font-size: clamp(2.6rem, 6.6vw, 5.6rem); line-height: 0.98; margin: 0 0 24px; max-width: 12em; }
.mhero h1 em { font-style: normal; background: linear-gradient(90deg, #ffb547, #ff7a45); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mhero .lead { font-size: 1.2rem; color: var(--muted); max-width: 36em; margin: 0 0 30px; }
.facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.facts span { display: inline-flex; gap: 8px; align-items: center; font: 600 0.82rem var(--font-mono); padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); }
.facts span i { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.how4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 44px; position: relative; }
@media (max-width: 900px) { .how4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .how4 { grid-template-columns: minmax(0, 1fr); } }
.how4 article { padding: 22px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); display: grid; gap: 10px; align-content: start; }
.how4 .n { font: 800 2.2rem var(--font-display); font-stretch: 112%; background: linear-gradient(90deg, #5b7cff, #3fe0b5); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; }
.how4 h3 { font-size: 1.15rem; margin: 0; }
.how4 p { margin: 0; color: var(--muted); font-size: 0.95rem; }
.series-list { display: grid; gap: 34px; margin-top: 44px; }
.empty-series { padding: 34px; border-radius: 24px; border: 1px dashed var(--line); background: var(--surface); display: grid; gap: 10px; max-width: 760px; }
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 40px; }
@media (max-width: 760px) { .compare { grid-template-columns: minmax(0, 1fr); } }
.compare article { padding: 28px; border-radius: 22px; border: 1px solid var(--line); background: var(--surface); display: grid; gap: 10px; align-content: start; }
.compare article.amber { border-color: rgba(255, 181, 71, 0.35); background: linear-gradient(160deg, rgba(255, 181, 71, 0.1), transparent); }
.compare h3 { font-size: 1.3rem; margin: 0; }
.compare .how-paid { font: 600 0.78rem var(--font-mono); color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
.become { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: clamp(26px, 4vw, 48px); border-radius: 26px; border: 1px solid var(--line); background: radial-gradient(70% 100% at 100% 0%, rgba(63, 224, 181, 0.16), transparent), var(--bg-2); }
@media (max-width: 760px) { .become { grid-template-columns: minmax(0, 1fr); } }
.become .mail { font: 600 1rem var(--font-mono); padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); user-select: all; }
.banner { display: flex; gap: 12px; align-items: center; padding: 16px 20px; border-radius: 16px; margin-bottom: 26px; font-weight: 600; }
.banner.ok { background: rgba(63, 224, 181, 0.12); border: 1px solid rgba(63, 224, 181, 0.4); color: var(--teal); }
.banner.info { background: var(--surface); border: 1px solid var(--line); color: var(--muted); }

/* Reserve sheet */
.sheet-back { position: fixed; inset: 0; z-index: 60; background: rgba(3, 6, 14, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: grid; place-items: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.sheet { width: min(100%, 480px); max-height: 100%; overflow: auto; border-radius: 24px; background: #0f1733; border: 1px solid var(--line); padding: 28px; display: grid; gap: 14px; box-shadow: var(--shadow); }
.sheet h3 { font-size: 1.4rem; margin: 0; }
.sheet .sum { display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); font-weight: 600; }
.sheet label { display: grid; gap: 6px; font-weight: 500; font-size: 0.95rem; }
.sheet input[type="text"], .sheet input[type="email"] { font: inherit; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.05); color: var(--ink); min-width: 0; }
.sheet .check { display: flex; gap: 10px; align-items: flex-start; font-size: 0.88rem; color: var(--muted); font-weight: 400; }
.sheet .check input { margin-top: 4px; }
.sheet .row { display: flex; gap: 10px; flex-wrap: wrap; }
.sheet .row .btn { flex: 1 1 160px; }
.sheet .secure { font: 500 0.78rem var(--font-mono); color: var(--muted); text-align: center; }

/* ================= Finishing ================= */
html:has(body.dark-world), .dark-world { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has(body.dark-world), .dark-world { scroll-behavior: auto; } }
.dark-world section[id] { scroll-margin-top: 72px; }
.js .ticket:not(.in) .seat-meter .bar span { width: 0; }
@media (max-width: 420px) { .dark-world .site-header .btn { padding: 10px 14px; font-size: 0.88rem; } .dark-world .logo { font-size: 1.05rem; } }

.foot { border-top: 1px solid var(--line); padding-block: 56px 32px; color: var(--muted); font-size: 0.93rem; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 880px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-grid > :first-child { grid-column: 1 / -1; } }
.foot h4 { margin: 0 0 12px; font: 700 0.72rem var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--ink); }
.foot .tagline { margin: 12px 0 0; max-width: 26em; }
.foot .mono { user-select: all; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 0.85rem; }

/* ================= Header: separate tab for live mentor sessions ================= */
.nav-live {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; white-space: nowrap;
  font: 600 0.9rem var(--font-body); text-decoration: none; color: var(--amber);
  border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent); background: var(--amber-soft);
}
.nav-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); animation: livepulse 1.8s infinite; }
@keyframes livepulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--amber) 60%, transparent); } 100% { box-shadow: 0 0 0 8px transparent; } }
.nav-live[aria-current="page"] { background: var(--amber); color: #1d1300; }
.nav-live[aria-current="page"] i { background: #1d1300; }
.hdr-right { display: flex; align-items: center; gap: 10px; }
.cta-short { display: none; }
.btn-signin { padding: 10px 18px; white-space: nowrap; }
@media (max-width: 520px) {
  .dark-world .logo-text { display: none; }
  .cta-long { display: none; } .cta-short { display: inline; }
  .btn-signin { padding: 8px 14px; font-size: 0.9rem; }
  /* The hero has the same button just below. */
  .hdr-right .btn-glow { display: none; }
  .nav-live { padding: 8px 12px; font-size: 0.85rem; }
}

/* ================= Light edition of the same design ================= */
.dark-world.theme-light {
  --bg: #f6f7fb;
  --bg-2: #eef1f8;
  --surface: rgba(47, 85, 245, 0.04);
  --surface-solid: #ffffff;
  --surface-2: #e4e9f6;
  --ink: #0d1530;
  --muted: #55607d;
  --line: rgba(20, 32, 80, 0.12);
  --cobalt: #2f55f5;
  --cobalt-soft: rgba(47, 85, 245, 0.1);
  --teal: #08936f;
  --amber: #b86e00;
  --amber-soft: rgba(232, 148, 12, 0.13);
  --shadow: 0 30px 60px -30px rgba(15, 26, 60, 0.35);
  color-scheme: light;
}
.theme-light .site-header.solid { background: rgba(246, 247, 251, 0.86); }
.theme-light .btn-ghost { background: #fff; }
.theme-light .aurora.a1 { background: #8ea2ff; opacity: 0.45; }
.theme-light .aurora.a2 { background: #6fe3c8; opacity: 0.35; }
.theme-light .aurora.a3 { background: #ffc978; opacity: 0.35; }
.theme-light .floor { background-image: linear-gradient(rgba(47, 85, 245, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(47, 85, 245, 0.12) 1px, transparent 1px); }
.theme-light .pill, .theme-light .facts span { background: #fff; }
.theme-light .rotator-list span { background: linear-gradient(90deg, #2f55f5, #08936f 55%, #d98400); -webkit-background-clip: text; background-clip: text; }
.theme-light .sat span { background: rgba(255, 255, 255, 0.95); color: var(--ink); box-shadow: 0 6px 16px -8px rgba(15, 26, 60, 0.3); }
.theme-light .orbit { border-color: rgba(47, 85, 245, 0.25); }
.theme-light .glow-under { background: radial-gradient(closest-side, rgba(47, 85, 245, 0.35), transparent); }
.theme-light .ribbon-w { background: #fff; }
.js .theme-light .statement .w { color: rgba(13, 21, 48, 0.14); }
.js .theme-light .statement .w.lit { color: var(--ink); }
.js .theme-light .statement .w.accent.lit { color: var(--teal); }
.js .theme-light .statement .w.accent2.lit { color: var(--amber); }
.theme-light .traj { background: radial-gradient(80% 60% at 50% 100%, rgba(47, 85, 245, 0.1), transparent), var(--bg-2); }
.theme-light .chart .path-bg { stroke: rgba(20, 32, 80, 0.12); }
.theme-light .chart .grid-l { stroke: rgba(20, 32, 80, 0.1); }
.theme-light .chart .path-fg { filter: drop-shadow(0 0 6px rgba(47, 85, 245, 0.35)); }
.theme-light .glass, .theme-light .tile, .theme-light .how4 article, .theme-light .compare article, .theme-light .topic { background: #fff; box-shadow: 0 10px 30px -20px rgba(15, 26, 60, 0.25); }
.theme-light .proq { background: linear-gradient(160deg, rgba(255, 181, 71, 0.22), rgba(255, 181, 71, 0.06)); }
.theme-light .cloud span { color: var(--cobalt); }
.theme-light .train { background: radial-gradient(60% 80% at 100% 0%, rgba(255, 181, 71, 0.22), transparent), radial-gradient(60% 80% at 0% 100%, rgba(47, 85, 245, 0.14), transparent), #fff; }
.theme-light .pcard { background: #fff; }
.theme-light .pcard.feat { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from var(--ang), #2f55f5, #08936f, #f0a020, #2f55f5) border-box; box-shadow: 0 30px 60px -30px rgba(47, 85, 245, 0.45); }
.theme-light .final-w::before { background: radial-gradient(closest-side, rgba(47, 85, 245, 0.18), transparent); }
.theme-light .early-w input[type="email"] { background: #fff; }
.theme-light .become { background: radial-gradient(70% 100% at 100% 0%, rgba(8, 147, 111, 0.12), transparent), #fff; }
.theme-light .become .mail { background: var(--bg); }
.theme-light .mentor-note { background: linear-gradient(120deg, rgba(255, 181, 71, 0.2), rgba(255, 181, 71, 0.05)); }
.theme-light .empty-series { background: #fff; }
/* Tickets stay dark in the light edition, like a printed pass. */
.theme-light .ticket { --ink: #eef2ff; --muted: #a3afd0; --line: rgba(150, 168, 220, 0.18); --teal: #3fe0b5; --amber: #ffb547; --amber-soft: rgba(255, 181, 71, 0.14); --cobalt-soft: rgba(91, 124, 255, 0.16); filter: drop-shadow(0 26px 40px rgba(15, 26, 60, 0.35)); }
.theme-light .sheet { background: #fff; }
.theme-light .sheet .sum, .theme-light .sheet input[type="text"], .theme-light .sheet input[type="email"] { background: var(--bg); }
.theme-light .sheet-back { background: rgba(13, 21, 48, 0.45); }
.theme-light .banner.info { background: #fff; }

/* ================= Theme toggle ================= */
.theme-btn {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
}
.theme-btn:hover { border-color: var(--cobalt); }
.theme-btn svg { width: 18px; height: 18px; }
.theme-btn .sun { display: none; }
.theme-light .theme-btn .sun { display: block; }
.theme-light .theme-btn .moon { display: none; }
.theme-light .theme-btn { background: #fff; }
.dark-world.theme-switching, .dark-world.theme-switching * { transition: background-color 0.35s, border-color 0.35s, color 0.35s !important; }

/* In-app mode (?app=1): the Flutter app shows these pages inside its own frame. */
.in-app .site-header, .in-app .foot, .in-app #notify, .in-app .final-w { display: none !important; }
.in-app .mhero { padding-block: 32px 40px; }
.app-note { font: 500 0.8rem var(--font-mono); color: var(--muted); line-height: 1.5; }
@media (max-width: 380px) { .theme-btn { width: 36px; height: 36px; } }

/* ================= Header: App | Live Mentors tabs ================= */
.site-tabs { display: inline-flex; padding: 4px; gap: 2px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.site-tabs a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; font: 600 0.88rem var(--font-body); color: var(--muted); text-decoration: none; white-space: nowrap; transition: background 0.2s, color 0.2s; }
.site-tabs a:hover { color: var(--ink); }
.site-tabs a[aria-current="page"] { background: var(--cobalt); color: #fff; }
.site-tabs a.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); animation: livepulse 1.8s infinite; }
.site-tabs a.live[aria-current="page"] { background: var(--amber); color: #1d1300; }
.site-tabs a.live[aria-current="page"] i { background: #1d1300; }
.theme-light .site-tabs { background: #fff; }
/* Tablets: the section links crowd the header, so keep just the tabs and button (as on phones). */
@media (max-width: 1100px) { .site-header .nav { display: none; } }
@media (max-width: 600px) {
  .hdr-right > .btn-glow { display: none; }
  .site-tabs a { padding: 7px 11px; font-size: 0.84rem; }
}

/* ================= Series browser (home) and track filter (/mentors) ================= */
.series-browser { display: grid; gap: 16px; min-width: 0; }
.sb-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.sb-tab {
  position: relative; overflow: hidden; cursor: pointer; font: 600 0.88rem var(--font-body);
  padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.theme-light .sb-tab { background: #fff; }
.sb-tab:hover { color: var(--ink); border-color: color-mix(in srgb, var(--amber) 50%, transparent); }
.sb-tab[aria-selected="true"] { background: var(--amber); border-color: transparent; color: #1d1300; }
.sb-tabs.auto .sb-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; background: rgba(29, 19, 0, 0.4); animation: sbprog 6s linear forwards; }
@keyframes sbprog { from { width: 0; } to { width: 100%; } }
.sb-stage { display: grid; padding-top: 14px; }
.sb-stage > * { grid-area: 1 / 1; min-width: 0; }
.sb-slide { position: relative; transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.sb-slide.entering { opacity: 0; transform: translateX(48px) rotate(2deg); }
.sb-slide.leaving { opacity: 0; transform: translateX(-48px) rotate(-3deg); pointer-events: none; }
.sb-hint { margin: 0; }
.ticket-wrap { position: relative; }
#series-filter { margin-top: 26px; }

/* Mentors page: plain-language pricing note */
.price-explainer { margin-top: 18px; display: grid; gap: 4px; max-width: 46em; padding: 16px 20px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent); background: var(--amber-soft); }
.price-explainer b { font: 700 0.75rem var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); }
.price-explainer strong { color: var(--ink); }

/* Many tracks: the home tab row scrolls sideways on phones instead of stacking. */
@media (max-width: 760px) {
  #sb-tabs, #series-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin-inline: -4px; padding-inline: 4px;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  #sb-tabs::-webkit-scrollbar, #series-filter::-webkit-scrollbar { display: none; }
  #sb-tabs .sb-tab, #series-filter .sb-tab { flex: none; }
}

/* Turnstile security check: takes no space unless it needs the visitor */
.ts-slot { flex-basis: 100%; }
.ts-slot:empty { display: none; }

/* Hero call-to-action buttons: side by side, wrapping on narrow screens. */
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Promo video pop-up. */
.promo-dialog { padding: 0; border: 0; background: transparent; overflow: visible; max-width: none; max-height: none; }
.promo-dialog::backdrop { background: rgba(4, 7, 20, 0.82); backdrop-filter: blur(6px); }
.promo-video { display: block; height: min(86vh, calc((100vw - 32px) * 16 / 9)); aspect-ratio: 9 / 16; border-radius: 22px; background: #000; box-shadow: 0 30px 90px rgba(40, 60, 255, 0.4); }
.promo-close { position: absolute; top: -14px; right: -14px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); background: #121a3a; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; z-index: 1; }
@media (max-width: 520px) { .promo-close { top: 8px; right: 8px; } }

/* "See it in 30 seconds" video. */
.watch-w { padding-block: 24px 72px; }
.watch-frame { max-width: 980px; margin-top: 28px; border-radius: 24px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 30px 90px rgba(40, 60, 255, 0.28); background: #060a1c; }
.watch-frame video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #060a1c; }