:root {
  --bg: #050810;
  --bg-soft: #0a1020;
  --panel: rgba(13, 22, 40, 0.78);
  --panel-strong: #0e1728;
  --line: rgba(128, 203, 255, 0.18);
  --text: #f3f7ff;
  --muted: #a9b6ca;
  --cyan: #59d8ff;
  --cyan-soft: #9be9ff;
  --blue: #408cff;
  --danger: #ff667f;
  --max: 1180px;
  --radius: 24px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 15% 10%, rgba(39, 106, 190, .14), transparent 26rem),
    radial-gradient(circle at 85% 35%, rgba(41, 201, 239, .08), transparent 30rem),
    var(--bg);
  font-family: Inter, system-ui, sans-serif;
  line-height: 1.65;
  overflow-x: hidden;
}
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.cursor-glow {
  position: fixed; width: 28rem; height: 28rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(65, 181, 255, .08), transparent 65%);
  pointer-events: none; z-index: -1; transform: translate(-50%, -50%);
}
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: 72px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 max(24px, calc((100vw - var(--max)) / 2));
  background: linear-gradient(to bottom, rgba(4, 7, 14, .9), rgba(4, 7, 14, .45));
  backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,255,255,.06);
}
.brand { display: inline-flex; gap: 10px; align-items: center; text-decoration: none; font-weight: 700; }
.brand-mark { width: 11px; height: 11px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 22px var(--cyan); }
.site-nav { display: flex; gap: 28px; }
.site-nav a { text-decoration: none; color: var(--muted); font-size: .9rem; font-weight: 600; }
.site-nav a:hover { color: var(--text); }
.menu-button { display: none; color: var(--text); background: none; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.hero { min-height: 100vh; display: grid; place-items: center; position: relative; overflow: hidden; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .58; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,7,14,.96) 0%, rgba(4,7,14,.72) 48%, rgba(4,7,14,.35) 100%), linear-gradient(to top, var(--bg), transparent 45%); }
.hero-grid { position:absolute; inset:0; background-image: linear-gradient(rgba(93,211,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(93,211,255,.06) 1px, transparent 1px); background-size: 70px 70px; mask-image: linear-gradient(to bottom, transparent, black 25%, transparent); }
.hero-content { position: relative; width: min(var(--max), calc(100% - 48px)); padding-top: 72px; }
.eyebrow { color: var(--cyan); letter-spacing: .18em; font-size: .76rem; font-weight: 800; margin: 0 0 18px; }
h1, h2, h3 { font-family: "Space Grotesk", Inter, sans-serif; line-height: 1.08; }
h1 { max-width: 850px; margin: 0; font-size: clamp(3.1rem, 7vw, 6.8rem); letter-spacing: -.055em; }
.hero-summary { max-width: 720px; color: #d3deed; font-size: clamp(1.05rem, 1.5vw, 1.3rem); margin: 28px 0; }
.hero-actions { display:flex; flex-wrap:wrap; gap: 14px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height: 50px; padding: 0 22px; border-radius: 999px; text-decoration:none; font-weight: 800; transition: .2s ease; }
.button.primary { color: #03101a; background: linear-gradient(135deg, var(--cyan-soft), var(--cyan)); box-shadow: 0 12px 38px rgba(72, 201, 255, .22); }
.button.primary:hover { transform: translateY(-2px); }
.button.secondary { border: 1px solid rgba(255,255,255,.2); background: rgba(6,13,24,.45); backdrop-filter: blur(10px); }
.hero-facts { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 850px; gap: 1px; margin-top: 56px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.08); }
.hero-facts div { padding: 18px; background: rgba(5,10,19,.74); backdrop-filter: blur(12px); }
.hero-facts strong, .hero-facts span { display:block; }
.hero-facts strong { font-family: "Space Grotesk"; }
.hero-facts span { color: var(--muted); font-size: .78rem; margin-top: 3px; }
.scroll-cue { position:absolute; bottom: 24px; left:50%; transform:translateX(-50%); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; text-decoration:none; color:var(--muted); }
.section { width: min(var(--max), calc(100% - 48px)); margin: 0 auto; padding: 120px 0; }
.section-heading { max-width: 850px; margin-bottom: 48px; }
.section-heading h2 { font-size: clamp(2.35rem, 5vw, 4.6rem); letter-spacing: -.045em; margin: 0; }
.split-heading { max-width:none; display:flex; align-items:end; justify-content:space-between; gap:40px; }
.split-heading > p { max-width: 420px; color:var(--muted); }
.overview-layout { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.feature-card, .lesson-grid article { border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(145deg, rgba(15,27,48,.88), rgba(7,13,24,.72)); padding:30px; }
.card-number, .lesson-grid article > span { color:var(--cyan); font-family:"Space Grotesk"; font-weight:700; }
.feature-card h3, .lesson-grid h3 { font-size:1.45rem; margin: 52px 0 10px; }
.feature-card p, .lesson-grid p { color:var(--muted); margin:0; }
.accuracy-note { margin-top:20px; border-left:3px solid var(--cyan); background:rgba(67,161,222,.08); padding:22px 24px; }
.accuracy-note span { font-weight:800; color:var(--cyan-soft); }
.accuracy-note p { margin:5px 0 0; color:#c7d2e2; }
.visual-study { width:min(1380px, calc(100% - 48px)); }
.player-shell { display:grid; grid-template-columns:minmax(0, 1fr) 380px; gap:18px; }
.player-frame { position:relative; overflow:hidden; border-radius:var(--radius); border:1px solid var(--line); background:#000; min-height:520px; }
.player-frame video { width:100%; height:100%; min-height:520px; object-fit:cover; display:block; }
.player-label { position:absolute; inset:auto 20px 20px; display:flex; justify-content:space-between; align-items:end; gap:20px; padding:15px 18px; border:1px solid rgba(255,255,255,.15); background:rgba(4,9,17,.7); backdrop-filter:blur(12px); border-radius:14px; pointer-events:none; }
.player-label span { font-size:.68rem; letter-spacing:.15em; color:var(--cyan); font-weight:800; }
.chapter-list { display:flex; flex-direction:column; gap:8px; max-height:620px; overflow:auto; padding-right:4px; }
.chapter { width:100%; display:grid; grid-template-columns:38px 1fr; grid-template-areas:"num title" "num note"; text-align:left; color:var(--text); border:1px solid rgba(255,255,255,.08); background:rgba(11,18,31,.72); border-radius:14px; padding:14px; cursor:pointer; }
.chapter > span { grid-area:num; color:var(--muted); font-family:"Space Grotesk"; }
.chapter strong { grid-area:title; }
.chapter small { grid-area:note; color:var(--muted); margin-top:3px; }
.chapter:hover, .chapter.active { border-color:rgba(89,216,255,.55); background:rgba(23,54,78,.55); }
.chapter.active > span { color:var(--cyan); }
.attack-path { display:grid; gap:0; max-width:900px; margin:0 auto; }
.path-step { position:relative; display:grid; grid-template-columns:86px 1fr; gap:24px; padding:0 0 58px; }
.path-step:not(:last-child)::after { content:""; position:absolute; left:34px; top:60px; bottom:8px; width:1px; background:linear-gradient(var(--cyan), rgba(89,216,255,.08)); }
.path-step > span { width:68px; height:68px; display:grid; place-items:center; border-radius:50%; border:1px solid rgba(89,216,255,.5); background:#07101e; color:var(--cyan); font-family:"Space Grotesk"; box-shadow:0 0 32px rgba(89,216,255,.08); }
.path-step h3 { font-size:1.65rem; margin:3px 0 7px; }
.path-step p { margin:0; color:var(--muted); }
.responsibility-grid { display:grid; grid-template-columns:1fr 190px 1fr; gap:18px; align-items:stretch; }
.responsibility-card { border:1px solid var(--line); border-radius:var(--radius); padding:34px; background:var(--panel); }
.responsibility-label { display:inline-flex; border:1px solid rgba(89,216,255,.25); border-radius:999px; padding:6px 10px; color:var(--cyan); font-size:.7rem; letter-spacing:.12em; font-weight:800; }
.responsibility-card h3 { font-size:2rem; margin:40px 0 24px; }
.responsibility-card em { color:var(--cyan-soft); font-style:normal; }
.responsibility-card ul { list-style:none; padding:0; margin:0; }
.responsibility-card li { padding:13px 0; border-top:1px solid rgba(255,255,255,.08); color:#c8d3e3; }
.shared-core { display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; border:1px solid rgba(89,216,255,.2); border-radius:var(--radius); background:radial-gradient(circle, rgba(89,216,255,.16), rgba(7,13,24,.65)); padding:22px; }
.shared-core span { color:var(--cyan); letter-spacing:.16em; font-size:.7rem; font-weight:800; }
.shared-core strong { margin-top:10px; }
.lesson-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.lesson-grid article { min-height:255px; }
.conclusion { width:min(1380px, calc(100% - 48px)); display:grid; grid-template-columns:1.15fr .85fr; gap:46px; align-items:center; }
.conclusion-video { height:560px; overflow:hidden; border-radius:var(--radius); border:1px solid var(--line); }
.conclusion-video video { width:100%; height:100%; object-fit:cover; }
.conclusion-copy h2 { font-size:clamp(2.4rem, 4.5vw, 4.7rem); letter-spacing:-.045em; margin:0 0 24px; }
.conclusion-copy > p:not(.eyebrow) { color:var(--muted); margin-bottom:30px; }
.references { border-top:1px solid rgba(255,255,255,.08); }
.reference-list { display:grid; gap:12px; color:var(--muted); }
.reference-list p { margin:0; padding:18px 0; border-bottom:1px solid rgba(255,255,255,.07); }
footer { width:min(var(--max), calc(100% - 48px)); margin:0 auto; padding:34px 0 50px; border-top:1px solid rgba(255,255,255,.08); display:flex; justify-content:space-between; gap:20px; color:var(--muted); font-size:.85rem; }
@media (max-width: 960px) {
  .site-nav { display:none; position:absolute; top:72px; left:20px; right:20px; padding:18px; flex-direction:column; background:#09111f; border:1px solid var(--line); border-radius:16px; }
  .site-nav.open { display:flex; }
  .menu-button { display:block; }
  .hero-facts { grid-template-columns:repeat(2,1fr); }
  .overview-layout, .lesson-grid { grid-template-columns:1fr 1fr; }
  .player-shell { grid-template-columns:1fr; }
  .chapter-list { display:grid; grid-template-columns:1fr 1fr; max-height:none; }
  .responsibility-grid { grid-template-columns:1fr; }
  .shared-core { min-height:160px; }
  .conclusion { grid-template-columns:1fr; }
  .split-heading { align-items:start; flex-direction:column; }
}
@media (max-width: 640px) {
  .site-header { padding:0 18px; }
  .brand { font-size:.88rem; }
  .section, .visual-study, .conclusion { width:min(100% - 30px, var(--max)); padding:84px 0; }
  .hero-content { width:calc(100% - 30px); }
  h1 { font-size:3rem; }
  .hero-facts, .overview-layout, .lesson-grid, .chapter-list { grid-template-columns:1fr; }
  .player-frame, .player-frame video { min-height:280px; }
  .player-label { align-items:start; flex-direction:column; gap:4px; }
  .feature-card h3, .lesson-grid h3 { margin-top:30px; }
  .conclusion-video { height:360px; }
  footer { flex-direction:column; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
}


/* Interactive presentation */
.slideshow-shell { max-width: 1120px; margin: 0 auto; }
.slide-stage { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #02050a; aspect-ratio: 16 / 9; }
.slide-stage img { width: 100%; height: 100%; object-fit: contain; display: block; }
.slide-progress { position: absolute; inset: auto 0 0; height: 4px; background: rgba(255,255,255,.08); }
.slide-progress span { display: block; height: 100%; width: 14.285%; background: var(--cyan); transition: width .25s ease; }
.slide-toolbar { display: grid; grid-template-columns: 150px 1fr 150px; align-items: center; gap: 18px; margin-top: 18px; }
.slide-control { min-height: 48px; color: var(--text); border: 1px solid var(--line); border-radius: 999px; background: rgba(10,18,32,.9); font: inherit; font-weight: 800; cursor: pointer; }
.slide-control:hover { border-color: rgba(89,216,255,.65); }
.slide-control:disabled { opacity: .38; cursor: not-allowed; }
.primary-control { color: #03101a; border-color: transparent; background: linear-gradient(135deg, var(--cyan-soft), var(--cyan)); }
.slide-position { text-align: center; }
.slide-position span, .notes-heading > span { display: block; color: var(--cyan); letter-spacing: .15em; font-size: .7rem; font-weight: 800; }
.slide-position strong { display: block; margin-top: 4px; font-family: "Space Grotesk"; font-size: 1.15rem; }
.slide-dots { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 20px 0; }
.slide-dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.24); cursor: pointer; }
.slide-dot.active { width: 28px; border-radius: 99px; background: var(--cyan); }
.speaker-notes { border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, rgba(15,27,48,.88), rgba(7,13,24,.72)); padding: 24px; }
.notes-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.notes-heading button { color: var(--muted); background: none; border: 0; font: inherit; font-size: .85rem; cursor: pointer; }
.speaker-notes p { margin: 14px 0 0; color: #d2dceb; }
.speaker-notes.collapsed p { display: none; }
.presentation-actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 18px; }
.presentation-actions span { color: var(--muted); font-size: .85rem; }
@media (max-width: 640px) {
  .slide-toolbar { grid-template-columns: 1fr 1fr; }
  .slide-position { grid-column: 1 / -1; grid-row: 1; }
  .slide-control { grid-row: 2; }
  .presentation-actions { align-items: flex-start; flex-direction: column; }
}


.questions-section { border-top: 1px solid rgba(255,255,255,.08); }
.qa-tools { display: flex; flex-wrap: wrap; gap: 10px; margin: -20px 0 24px; }
.qa-action { min-height: 42px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; color: var(--text); background: rgba(10,18,32,.88); font: inherit; font-size: .86rem; font-weight: 700; cursor: pointer; }
.qa-action:hover { border-color: rgba(89,216,255,.65); }
.qa-list { display: grid; gap: 12px; }
.qa-item { border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg, rgba(15,27,48,.82), rgba(7,13,24,.68)); overflow: hidden; }
.qa-item summary { display: grid; grid-template-columns: 46px 1fr 24px; align-items: center; gap: 10px; min-height: 68px; padding: 14px 20px; cursor: pointer; list-style: none; font-family: "Space Grotesk"; font-weight: 700; }
.qa-item summary::-webkit-details-marker { display: none; }
.qa-item summary > span { color: var(--cyan); font-size: .78rem; letter-spacing: .08em; }
.qa-item summary::after { content: "+"; justify-self: end; color: var(--cyan); font-family: Inter, sans-serif; font-size: 1.35rem; font-weight: 400; }
.qa-item[open] summary::after { content: "−"; }
.qa-item[open] summary { border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(39,113,153,.12); }
.qa-answer { padding: 18px 24px 22px 76px; }
.qa-answer p { margin: 0; color: #ccd7e6; }
@media (max-width: 640px) {
  .qa-item summary { grid-template-columns: 34px 1fr 20px; padding: 14px; }
  .qa-answer { padding: 16px 16px 20px; }
}


/* Interactive slide hotspots */
.slide-stage { position: relative; }
.slide-hotspots {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.slide-hotspot {
  position: absolute;
  pointer-events: auto;
  cursor: pointer;
  border: 2px solid rgba(89,216,255,.86);
  border-radius: 7px;
  background: rgba(89,216,255,.08);
  color: transparent;
  padding: 0;
  box-shadow: inset 0 0 0 1px rgba(5,8,16,.22);
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.slide-hotspot:hover,
.slide-hotspot:focus-visible {
  border-color: #9be9ff;
  background: rgba(89,216,255,.18);
  box-shadow: inset 0 0 0 2px rgba(5,8,16,.2), 0 0 0 3px rgba(89,216,255,.18);
  outline: none;
}
.slide-info {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
  border: 1px solid rgba(89,216,255,.32);
  border-left: 4px solid var(--cyan);
  border-radius: 16px;
  background: rgba(14,29,48,.88);
  padding: 22px 24px;
}
.slide-info[hidden] { display: none; }
.slide-info span { color: var(--cyan); font-size: .68rem; letter-spacing: .15em; font-weight: 800; }
.slide-info h3 { margin: 5px 0 8px; font-size: 1.35rem; }
.slide-info p { margin: 0; color: #c9d6e6; }
.slide-info button {
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.18);
  background: transparent;
  color: var(--text);
  border-radius: 999px;
  padding: 8px 13px;
  cursor: pointer;
}
@media (max-width: 640px) {
  .slide-info { flex-direction: column; gap: 14px; }
}