:root {
  --bg: #06100e;
  --bg-soft: #0a1714;
  --panel: #0d1b18;
  --panel-2: #101f1b;
  --line: rgba(255, 255, 255, 0.1);
  --text: #f7fbf9;
  --muted: #a9b8b3;
  --green: #79ff3b;
  --green-2: #b4ff8d;
  --blue: #63c7ff;
  --purple: #8a63ff;
  --max: 1180px;
  --radius: 28px;
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { color: inherit; }
img { max-width: 100%; display: block; }

.container { width: min(calc(100% - 32px), var(--max)); margin-inline: auto; }
.section-pad { padding: 104px 0; }
.section-grid {
  position: relative;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 52px 52px;
}
.section-grid::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(var(--bg), transparent 18%, transparent 82%, var(--bg));
}
.section-grid > * { position: relative; z-index: 1; }

.skip-link { position: fixed; left: 12px; top: -80px; z-index: 999; background: white; color: black; padding: 10px 14px; }
.skip-link:focus { top: 12px; }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  background: rgba(6,16,14,.72);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.header-inner { min-height: 76px; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: "Space Grotesk", sans-serif; font-weight: 700; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(121,255,59,.45); border-radius: 10px; color: var(--green); box-shadow: inset 0 0 18px rgba(121,255,59,.12); }
.brand-name { font-size: 1.05rem; }
.main-nav { display: flex; gap: 22px; margin-left: auto; }
.main-nav a { color: #c6d2ce; font-size: .9rem; transition: .2s; }
.main-nav a:hover { color: var(--green); }
.menu-toggle { display: none; margin-left: auto; background: none; border: 0; padding: 8px; }
.menu-toggle span { display: block; width: 24px; height: 2px; margin: 5px 0; background: white; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 22px;
  border: 1px solid var(--green);
  border-radius: 14px;
  background: var(--green);
  color: #07110f;
  font-weight: 800;
  box-shadow: 0 12px 32px rgba(121,255,59,.18);
  transition: transform .2s, box-shadow .2s;
}
.button:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(121,255,59,.24); }
.button-sm { min-height: 42px; padding: 0 17px; border-radius: 12px; font-size: .86rem; }
.button-ghost { background: rgba(255,255,255,.03); color: white; border-color: var(--line); box-shadow: none; }

.hero { min-height: 860px; display: flex; align-items: center; padding: 140px 0 90px; overflow: hidden; }
.hero-layout { display: grid; grid-template-columns: 1.02fr .98fr; gap: 72px; align-items: center; }
.eyebrow { display: inline-block; margin-bottom: 18px; color: var(--green); font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
h1,h2,h3 { font-family: "Space Grotesk", sans-serif; line-height: 1.05; margin: 0; }
h1 { max-width: 760px; font-size: clamp(3.2rem, 7vw, 6.4rem); letter-spacing: -.06em; }
h1 span { color: var(--green); }
h2 { font-size: clamp(2.2rem, 4.7vw, 4.4rem); letter-spacing: -.045em; }
h3 { font-size: 1.35rem; }
.hero-copy > p { max-width: 650px; margin: 28px 0 30px; color: var(--muted); font-size: 1.08rem; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 50px; }
.hero-proof div { padding-left: 14px; border-left: 2px solid rgba(121,255,59,.3); }
.hero-proof strong, .hero-proof span { display: block; }
.hero-proof strong { font-size: .9rem; }
.hero-proof span { color: var(--muted); font-size: .76rem; }
.hero-orb { position: absolute; width: 520px; height: 520px; border-radius: 50%; filter: blur(90px); opacity: .18; }
.hero-orb-one { background: var(--green); right: -180px; top: 120px; }
.hero-orb-two { background: var(--purple); left: -260px; bottom: -220px; }

.hero-visual { position: relative; }
.window-card { overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 26px; background: linear-gradient(145deg, rgba(20,39,34,.96), rgba(7,19,16,.98)); box-shadow: var(--shadow); transform: perspective(1200px) rotateY(-7deg) rotateX(3deg); }
.window-topbar { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid var(--line); color: #8fa099; font-size: .72rem; }
.window-dots { display: flex; gap: 6px; }
.window-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.18); }
.window-body { display: grid; grid-template-columns: 50px 1fr; grid-template-rows: 380px 140px; }
.tool-rail { grid-row: 1/3; display: flex; flex-direction: column; align-items: center; gap: 22px; padding-top: 22px; border-right: 1px solid var(--line); color: #71817c; }
.scene-area { position: relative; overflow: hidden; background: radial-gradient(circle at 50% 55%, rgba(121,255,59,.14), transparent 38%), linear-gradient(180deg, #13241f, #09130f); }
.scene-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(121,255,59,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(121,255,59,.07) 1px, transparent 1px); background-size: 32px 32px; transform: perspective(400px) rotateX(55deg) translateY(150px) scale(1.6); }
.planet { position: absolute; width: 160px; height: 160px; border-radius: 50%; left: 50%; top: 38%; transform: translate(-50%,-50%); background: radial-gradient(circle at 35% 30%, #b5ff91, #49a42d 34%, #132d1c 69%); box-shadow: 0 0 80px rgba(121,255,59,.24); }
.character { position: absolute; left: 50%; bottom: 48px; width: 48px; height: 85px; transform: translateX(-50%); border-radius: 18px 18px 10px 10px; background: linear-gradient(#d8e4df 0 28%, #121d19 29% 100%); box-shadow: 0 0 30px rgba(99,199,255,.22); }
.character::before,.character::after { content:""; position:absolute; bottom:-24px; width:14px; height:30px; background:#0b1110; }
.character::before { left:6px; }.character::after { right:6px; }
.floating-card { position: absolute; padding: 12px 14px; border: 1px solid rgba(255,255,255,.13); border-radius: 12px; background: rgba(7,18,15,.82); backdrop-filter: blur(10px); box-shadow: 0 12px 35px rgba(0,0,0,.25); }
.floating-card span,.floating-card strong { display:block; }
.floating-card span { color:#8ca098; font-size:.58rem; letter-spacing:.12em; }
.floating-card strong { color:var(--green); font-size:1rem; }
.card-code { left: 24px; top: 28px; }.card-level { right:24px; bottom:28px; }
.code-panel { grid-column: 2; padding: 20px 24px; background: #07110f; color: #b4c4be; font-family: monospace; font-size: .82rem; line-height: 1.8; border-top:1px solid var(--line); }
.code-green { color: var(--green); }.code-blue { color: var(--blue); }
.hero-badge { position: absolute; right: -20px; bottom: 36px; padding: 12px 15px; border-radius: 12px; border:1px solid rgba(121,255,59,.28); background:#0c1916; font-size:.72rem; box-shadow:var(--shadow); }
.hero-badge span { color:var(--green); }

.split-heading { display:grid; grid-template-columns:1.1fr .9fr; gap:80px; align-items:end; }
.split-heading p,.section-heading p,.method-copy > p,.faq-layout > div > p,.publisher-copy p,.contact-card p { color:var(--muted); }
.video-shell { margin-top:48px; }
.video-placeholder { min-height:520px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:18px; border:1px solid var(--line); border-radius:var(--radius); background: radial-gradient(circle at center, rgba(121,255,59,.15), transparent 22%), linear-gradient(135deg, rgba(138,99,255,.13), rgba(7,19,16,.92)), repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 2px, transparent 2px 14px); box-shadow: var(--shadow); }
.play-button { width:76px; height:76px; border-radius:50%; border:1px solid rgba(121,255,59,.5); background:rgba(121,255,59,.12); color:var(--green); font-size:1.5rem; cursor:pointer; }
.video-copy strong,.video-copy span { display:block; }.video-copy span { color:var(--muted); font-size:.86rem; }

.section-heading { max-width:760px; }
.section-heading p { max-width:680px; }
.course-tabs { display:flex; gap:10px; margin:40px auto 26px; }
.tab-button { padding:12px 18px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.025); color:#c7d3cf; cursor:pointer; }
.tab-button.active { border-color:var(--green); color:#08120f; background:var(--green); font-weight:800; }
.tab-panel { display:none; }.tab-panel.active { display:grid; }
.course-grid { grid-template-columns:repeat(3,1fr); gap:16px; }
.course-card { position:relative; min-height:290px; padding:28px; border:1px solid var(--line); border-radius:22px; background:linear-gradient(145deg, rgba(15,31,27,.95), rgba(8,18,16,.95)); overflow:hidden; transition:.25s; }
.course-card::after { content:""; position:absolute; width:150px; height:150px; border-radius:50%; right:-80px; bottom:-80px; background:var(--green); filter:blur(55px); opacity:.08; }
.course-card:hover { transform:translateY(-5px); border-color:rgba(121,255,59,.35); }
.course-card.featured { background:linear-gradient(145deg, rgba(54,99,38,.35), rgba(8,18,16,.96)); }
.course-number { position:absolute; right:22px; top:20px; color:#597068; font-family:monospace; font-size:.75rem; }
.course-icon { width:46px; height:46px; display:grid; place-items:center; margin-bottom:36px; border:1px solid rgba(121,255,59,.28); border-radius:12px; color:var(--green); }
.course-card p { color:var(--muted); font-size:.9rem; }
.course-card a { position:absolute; left:28px; bottom:26px; color:var(--green); font-size:.84rem; font-weight:700; }
.course-card.compact { min-height:180px; }.course-card.compact p { margin-bottom:0; }

.method { background:linear-gradient(180deg,#07110f,#0a1714); }
.method-layout { display:grid; grid-template-columns:.9fr 1.1fr; gap:90px; align-items:center; }
.method-visual { min-height:560px; display:grid; place-items:center; border-radius:var(--radius); border:1px solid var(--line); background:radial-gradient(circle at center, rgba(138,99,255,.18), transparent 40%), linear-gradient(145deg,#10211c,#07120f); }
.level-card { width:min(330px,80%); padding:30px; border:1px solid rgba(121,255,59,.25); border-radius:22px; background:rgba(6,16,14,.82); box-shadow:var(--shadow); }
.level-card .label { color:var(--green); font-size:.66rem; letter-spacing:.14em; }.level-card strong { display:block; margin:14px 0; font-family:"Space Grotesk"; font-size:2.5rem; }
.progress { height:8px; background:#16251f; border-radius:99px; overflow:hidden; }.progress span { display:block; width:72%; height:100%; background:linear-gradient(90deg,var(--green),var(--blue)); }
.level-card ul { list-style:none; padding:0; margin:24px 0 0; }.level-card li { display:flex; gap:10px; margin:12px 0; color:#c4d1cc; }.level-card li span { color:var(--green); }
.method-copy > p { max-width:620px; }
.method-list { margin:32px 0; }
.method-list div { display:grid; grid-template-columns:48px 1fr; gap:16px; padding:20px 0; border-top:1px solid var(--line); }
.method-list strong { color:var(--green); font-family:monospace; }.method-list b,.method-list span { display:block; }.method-list span { color:var(--muted); }.method-list b { color:white; margin-bottom:4px; }
.text-link { color:var(--green); font-weight:700; }

.project-grid { display:grid; grid-template-columns:1.3fr .85fr .85fr; gap:16px; margin-top:48px; }
.project-card { min-height:430px; display:flex; align-items:flex-end; padding:26px; border-radius:24px; border:1px solid var(--line); overflow:hidden; background-size:cover; background-position:center; box-shadow:var(--shadow); }
.project-one { background:linear-gradient(180deg,transparent,rgba(5,13,11,.92)), radial-gradient(circle at 35% 30%,rgba(121,255,59,.45),transparent 22%), linear-gradient(135deg,#172821,#08130f); }
.project-two { background:linear-gradient(180deg,transparent,rgba(5,13,11,.92)), radial-gradient(circle at 60% 35%,rgba(138,99,255,.5),transparent 24%), linear-gradient(135deg,#1a1730,#09120f); }
.project-three { background:linear-gradient(180deg,transparent,rgba(5,13,11,.92)), radial-gradient(circle at 45% 28%,rgba(99,199,255,.45),transparent 24%), linear-gradient(135deg,#132831,#07120f); }
.project-card span { color:var(--green); font-size:.66rem; font-weight:800; letter-spacing:.12em; }
.project-card h3 { margin-top:6px; font-size:1.8rem; }

.publisher-card { min-height:430px; display:grid; grid-template-columns:1fr .7fr; align-items:center; padding:60px; border-radius:32px; border:1px solid rgba(121,255,59,.24); background:radial-gradient(circle at 85% 30%,rgba(121,255,59,.16),transparent 32%), linear-gradient(135deg,#10231d,#07120f); overflow:hidden; }
.publisher-copy { max-width:650px; }.publisher-copy p { max-width:590px; margin-bottom:28px; }
.publisher-mark { justify-self:center; font-family:"Space Grotesk"; font-weight:700; font-size:12rem; line-height:1; color:rgba(255,255,255,.055); }.publisher-mark span { color:rgba(121,255,59,.14); }

.partners { background:#091511; }
.partners-layout { display:grid; grid-template-columns:.9fr 1.1fr; gap:90px; }
.partner-options > div { display:grid; grid-template-columns:50px 1fr; column-gap:18px; padding:24px 0; border-top:1px solid var(--line); }
.partner-options span { color:var(--green); font-family:monospace; }.partner-options h3 { font-size:1.25rem; }.partner-options p { grid-column:2; margin:7px 0 0; color:var(--muted); }

.faq-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:90px; }
details { border-top:1px solid var(--line); padding:20px 0; }
summary { cursor:pointer; list-style:none; font-weight:700; }
summary::-webkit-details-marker { display:none; }
summary::after { content:"+"; float:right; color:var(--green); }
details[open] summary::after { content:"−"; }
details p { color:var(--muted); max-width:680px; }

.contact-card { display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; padding:54px; border-radius:32px; border:1px solid rgba(121,255,59,.24); background:linear-gradient(145deg,rgba(18,39,32,.96),rgba(6,16,14,.97)); }
.contact-form { display:grid; gap:14px; }
.contact-form label span { display:block; margin-bottom:7px; color:#b8c6c1; font-size:.78rem; }
.contact-form input,.contact-form select { width:100%; height:50px; padding:0 14px; border-radius:12px; border:1px solid var(--line); background:#091510; color:white; outline:none; }
.contact-form input:focus,.contact-form select:focus { border-color:var(--green); }

.site-footer { padding:70px 0 28px; border-top:1px solid var(--line); background:#050d0b; }
.footer-grid { display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:50px; }
.footer-grid p { max-width:300px; color:var(--muted); }
.footer-grid > div:not(:first-child) { display:flex; flex-direction:column; gap:10px; }
.footer-grid strong { margin-bottom:8px; }.footer-grid a { color:#aab8b3; font-size:.88rem; }
.footer-grid a:hover { color:var(--green); }
.footer-bottom { display:flex; justify-content:space-between; gap:20px; padding-top:28px; margin-top:42px; border-top:1px solid var(--line); color:#71817c; font-size:.78rem; }

.reveal { opacity:0; transform:translateY(24px); transition:opacity .65s ease,transform .65s ease; }
.reveal.visible { opacity:1; transform:none; }

@media (max-width: 980px) {
  .main-nav,.header-cta { display:none; }
  .menu-toggle { display:block; }
  .main-nav.open { position:absolute; left:16px; right:16px; top:76px; display:flex; flex-direction:column; gap:0; padding:14px; border:1px solid var(--line); border-radius:16px; background:#08130f; }
  .main-nav.open a { padding:12px; }
  .hero { min-height:auto; }
  .hero-layout,.split-heading,.method-layout,.partners-layout,.faq-layout,.contact-card,.publisher-card { grid-template-columns:1fr; }
  .hero-visual { max-width:680px; margin:auto; }
  .course-grid { grid-template-columns:repeat(2,1fr); }
  .project-grid { grid-template-columns:1fr 1fr; }.project-one { grid-column:1/3; }
  .publisher-mark { display:none; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width: 640px) {
  .section-pad { padding:76px 0; }
  .hero { padding-top:120px; }
  h1 { font-size:clamp(3rem,15vw,4.8rem); }
  .hero-proof { grid-template-columns:1fr; }
  .window-card { transform:none; }
  .window-body { grid-template-columns:40px 1fr; grid-template-rows:300px 130px; }
  .hero-badge { right:8px; bottom:-18px; }
  .video-placeholder { min-height:360px; }
  .course-grid,.project-grid,.footer-grid { grid-template-columns:1fr; }
  .project-one { grid-column:auto; }
  .project-card { min-height:320px; }
  .publisher-card,.contact-card { padding:30px; }
  .method-visual { min-height:430px; }
  .footer-bottom { flex-direction:column; }
}