:root {
  --void: #0a0616;
  --panel: #100a1e;
  --panel-2: #150c26;
  --cyan: #b455ff;
  --pink: #ff2bd6;
  --acid: #ffb000;
  --white: #f4eaff;
  --muted: #8b82a6;
  --line: rgba(180, 85, 255, .18);
  --mono: "DM Mono", monospace;
  --sans: "Manrope", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--void); }
body {
  margin: 0;
  background:
    radial-gradient(circle at 78% 12%, rgba(255, 43, 214, .09), transparent 30%),
    radial-gradient(circle at 15% 30%, rgba(180, 85, 255, .07), transparent 27%),
    var(--void);
  color: var(--white);
  font-family: var(--sans);
  line-height: 1.6;
  overflow-x: hidden;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 99;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.018) 3px 4px);
  mix-blend-mode: screen;
}
a { color: inherit; text-decoration: none; }
.skip-link { position: absolute; left: -999px; top: 1rem; background: var(--acid); color: #000; padding: .7rem 1rem; z-index: 100; }
.skip-link:focus { left: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.site-header {
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(1.25rem, 5vw, 5rem);
  border-bottom: 1px solid var(--line);
  background: rgba(10, 6, 22, .72);
  backdrop-filter: blur(16px);
  position: absolute;
  width: 100%;
  z-index: 3;
}
.site-header::after { content: ""; position: absolute; bottom: -1px; left: 8%; width: 18%; height: 1px; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.brand { display: flex; gap: .7rem; align-items: center; font: 700 1rem var(--mono); letter-spacing: .05em; }
.brand > span:last-child > span { color: var(--cyan); text-shadow: 0 0 12px rgba(180,85,255,.7); }
.brand-mark {
  width: 31px; height: 31px; display: grid; place-items: center;
  background: var(--cyan); color: var(--void);
  clip-path: polygon(20% 0, 100% 0, 100% 72%, 72% 100%, 0 100%, 0 20%);
  box-shadow: 0 0 18px rgba(180,85,255,.45);
}
nav { display: flex; gap: 2rem; font: 500 .72rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
nav a::before { content: "// "; color: var(--pink); }
nav a:hover { color: var(--cyan); text-shadow: 0 0 10px var(--cyan); }
.header-cta, .button { transition: transform .2s, box-shadow .2s, color .2s; }
.header-cta { background: var(--acid); color: #0a0616; padding: .65rem 1rem; font: 700 .7rem var(--mono); clip-path: polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); }
.header-cta:hover { box-shadow: 0 0 25px rgba(255,176,0,.4); }
.header-cta span { color: #0a0616; }

.hero {
  min-height: 760px;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  padding: 125px clamp(1.25rem, 7vw, 7rem) 75px;
  position: relative;
  overflow: hidden;
}
.hero::before { content: "SYSTEM://REVERSEENGINE_V2.077"; position: absolute; left: 1rem; top: 48%; writing-mode: vertical-rl; font: 400 .55rem var(--mono); color: #3d2f52; letter-spacing: .2em; }
.hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(180,85,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(180,85,255,.08) 1px,transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to bottom,black,transparent 95%); transform: perspective(900px) rotateX(3deg); }
.hero-copy, .hero-visual { position: relative; z-index: 1; }
.eyebrow { font: 500 .68rem var(--mono); letter-spacing: .16em; text-transform: uppercase; display: flex; align-items: center; gap: .65rem; color: var(--cyan); }
.eyebrow span { width: 32px; height: 2px; background: var(--cyan); box-shadow: 0 0 9px var(--cyan); }
.hero h1 { font-size: clamp(3.3rem,7.2vw,7.5rem); line-height: .88; letter-spacing: -.075em; margin: 1.5rem 0 2rem; max-width: 950px; text-transform: uppercase; }
.hero h1::before { content: "RE_"; display: block; font: 500 .6rem var(--mono); color: var(--pink); letter-spacing: .5em; margin-bottom: 1rem; }
.hero h1 em, .safety h2 em { font-style: normal; color: transparent; -webkit-text-stroke: 1px var(--cyan); text-shadow: 4px 4px 0 rgba(255,43,214,.35), 0 0 30px rgba(180,85,255,.15); }
.hero-lede { font-size: clamp(.95rem,1.3vw,1.12rem); max-width: 620px; color: #aba1c6; border-left: 2px solid var(--pink); padding-left: 1rem; }
.hero-actions { display: flex; gap: .8rem; margin: 2.2rem 0 3.3rem; }
.button { padding: .9rem 1.15rem; font: 700 .72rem var(--mono); text-transform: uppercase; letter-spacing: .04em; clip-path: polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); }
.button-primary { background: var(--cyan); color: #0a0616; box-shadow: 0 0 20px rgba(180,85,255,.18); }
.button-ghost { border: 1px solid var(--line); background: rgba(16,10,30,.75); }
.button:hover { transform: translateY(-3px); box-shadow: 0 0 30px rgba(180,85,255,.28); }
.trust-row { display: flex; gap: clamp(2rem,5vw,5rem); }
.trust-row div { display: flex; flex-direction: column; border-top: 1px solid var(--line); padding-top: .7rem; min-width: 90px; }
.trust-row strong { font: 500 1.65rem var(--mono); color: var(--acid); text-shadow: 0 0 13px rgba(255,176,0,.35); }
.trust-row span { font: 400 .58rem var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }

.hero-visual { min-height: 530px; display: grid; place-items: center; }
.radar { width: min(35vw,450px); aspect-ratio: 1; border: 1px solid var(--line); position: relative; display: grid; place-items: center; transform: rotate(45deg); background: radial-gradient(circle,rgba(180,85,255,.12),transparent 56%); box-shadow: inset 0 0 60px rgba(180,85,255,.05), 0 0 40px rgba(180,85,255,.06); }
.radar::before, .radar::after, .orbit { content: ""; position: absolute; border: 1px solid var(--line); border-radius: 50%; }
.radar::before { inset: 18%; }.radar::after { inset: 36%; }
.orbit-a { width: 130%; height: 55%; transform: rotate(28deg); }.orbit-b { width: 60%; height: 125%; transform: rotate(-32deg); }
.shield { color: var(--cyan); width: 26%; transform: rotate(-45deg); filter: drop-shadow(0 0 18px rgba(180,85,255,.8)); }
.radar-dot { position: absolute; width: 7px; height: 7px; background: var(--pink); border-radius: 50%; box-shadow: 0 0 0 6px rgba(255,43,214,.16),0 0 14px var(--pink); }
.dot-a { top: 17%; right: 18%; }.dot-b { bottom: 23%; left: 12%; }.dot-c { right: 8%; bottom: 32%; }
.terminal-card { position: absolute; bottom: 3%; left: -4%; width: 320px; background: rgba(10,6,22,.94); border: 1px solid rgba(180,85,255,.4); box-shadow: 12px 12px 0 rgba(255,43,214,.12),0 25px 60px rgba(0,0,0,.45); clip-path: polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px); }
.terminal-top { padding: .65rem .8rem; border-bottom: 1px solid var(--line); display: flex; gap: .35rem; align-items: center; }
.terminal-top i { width: 7px; height: 7px; background: #3a2b4f; }.terminal-top i:first-child { background: var(--pink); box-shadow: 0 0 7px var(--pink); }
.terminal-top span { font: 400 .56rem var(--mono); color: #6a5e83; margin-left: auto; }
.terminal-card code { display: block; padding: 1.2rem; font: 400 .68rem/1.9 var(--mono); }.muted { color: #6c6085; }.green { color: var(--acid); }.terminal-card b,.cursor { color: var(--cyan); }.cursor { animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: 0; } }

.marquee { background: var(--pink); color: #140616; white-space: nowrap; overflow: hidden; padding: .8rem 0; font: 700 .65rem var(--mono); letter-spacing: .12em; box-shadow: 0 0 28px rgba(255,43,214,.2); }
.marquee div { word-spacing: 2.3rem; text-align: center; }.marquee b { color: white; }
.section { padding: clamp(4.5rem,8vw,8rem) clamp(1.25rem,7vw,7rem); position: relative; }
.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 2.5rem; }
.section-heading h2,.method h2,.safety h2 { font-size: clamp(2.4rem,4vw,4.5rem); line-height: 1; letter-spacing: -.055em; margin: .7rem 0; text-transform: uppercase; }
.section-heading > p { max-width: 470px; color: var(--muted); }
.course-tools { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.search { display: flex; align-items: center; gap: .6rem; background: var(--panel); border: 1px solid var(--line); padding: .7rem 1rem; width: min(100%,390px); color: var(--cyan); }
.search:focus-within { border-color: var(--cyan); box-shadow: 0 0 15px rgba(180,85,255,.12); }
.search input { border: 0; outline: 0; color: var(--white); background: transparent; width: 100%; font: 500 .75rem var(--mono); }.search input::placeholder { color: #5a4d72; }
.filters { display: flex; gap: .35rem; }.filters button { border: 1px solid var(--line); color: var(--muted); background: transparent; padding: .65rem .9rem; font: 700 .65rem var(--mono); cursor: pointer; text-transform: uppercase; }
.filters button:hover,.filters button.active { background: var(--cyan); border-color: var(--cyan); color: #0a0616; box-shadow: 0 0 18px rgba(180,85,255,.2); }
.course-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 12px; }
.course-card { grid-column: span 2; background: linear-gradient(145deg,rgba(21,12,38,.96),rgba(10,6,22,.96)); border: 1px solid var(--line); padding: 1.7rem; min-height: 500px; display: flex; flex-direction: column; transition: .22s; position: relative; clip-path: polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px); }
.course-card::after { content: ""; position: absolute; top: 0; left: 16px; width: 55px; height: 2px; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.course-card.featured { border-color: rgba(255,176,0,.55); background: linear-gradient(145deg,rgba(34,20,50,.96),rgba(10,6,22,.98)); }
.course-card.featured::after { background: var(--acid); box-shadow: 0 0 10px var(--acid); }
.course-card:nth-child(4),.course-card:nth-child(5) { grid-column: span 3; }
.course-card:hover { transform: translateY(-6px); border-color: var(--cyan); box-shadow: 0 0 28px rgba(180,85,255,.12),8px 8px 0 rgba(255,43,214,.08); z-index: 1; }
.card-top { display: flex; justify-content: space-between; }.course-index { font: 500 .7rem var(--mono); color: var(--cyan); }
.badge { font: 700 .56rem var(--mono); text-transform: uppercase; background: var(--acid); color: #0a0616; padding: .35rem .5rem; clip-path: polygon(6px 0,100% 0,100% 100%,0 100%,0 6px); }.badge-dark { background: #1d1230; color: var(--cyan); }
.course-icon { font: 400 2rem var(--mono); color: var(--pink); margin: 2.5rem 0 1.7rem; text-shadow: 0 0 13px rgba(255,43,214,.5); }
.course-meta { font: 500 .6rem var(--mono)!important; text-transform: uppercase; letter-spacing: .1em; color: var(--cyan)!important; }
.course-card h3 { font-size: 1.45rem; letter-spacing: -.035em; margin: .25rem 0 .6rem; text-transform: uppercase; }.course-card p { font-size: .8rem; color: #a098bd; margin: 0; }
.tags { display: flex; gap: .35rem; margin: 1.2rem 0; }.tags span { font: 500 .56rem var(--mono); border: 1px solid rgba(180,85,255,.18); color: #9e95b9; padding: .25rem .4rem; }
.learning-links { display: grid; grid-template-columns: repeat(2,1fr); gap: 5px; margin: auto 0 1rem; padding-top: 1rem; }
.learning-links a { min-width: 0; display: flex; align-items: center; gap: .5rem; padding: .58rem .62rem; border: 1px solid rgba(180,85,255,.16); background: rgba(180,85,255,.025); font: 500 .61rem var(--mono); text-transform: uppercase; transition: .18s; }
.learning-links a b { color: var(--pink); font-weight: 500; font-size: .5rem; }
.learning-links a span { overflow: hidden; text-overflow: ellipsis; }
.learning-links a::after { content: "↗"; margin-left: auto; color: #574b6e; }
.learning-links a:hover { color: #0a0616; background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 14px rgba(180,85,255,.2); }
.learning-links a:hover b,.learning-links a:hover::after { color: #0a0616; }
.course-card > .roadmap-link { font: 700 .65rem var(--mono); color: var(--acid); padding-top: .85rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; text-transform: uppercase; }.course-card > .roadmap-link:hover { text-shadow: 0 0 10px var(--acid); }
.empty-state { text-align: center; padding: 3rem; color: var(--muted); }

.method { background: linear-gradient(110deg,#100a1e,#150c26); display: grid; grid-template-columns: .8fr 1.2fr; gap: 8vw; border-block: 1px solid var(--line); }
.method::before { content: "PROTOCOL_03"; position: absolute; right: 7vw; top: 2rem; color: rgba(180,85,255,.16); font: 500 1.5rem var(--mono); }
.method-intro > p:last-child { color: var(--muted); max-width: 420px; }.steps { list-style: none; margin: 0; padding: 0; }
.steps li { display: grid; grid-template-columns: 70px 1fr; border-top: 1px solid var(--line); padding: 1.8rem 0; }.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps > li > span { font: 500 .65rem var(--mono); color: var(--pink); }.steps h3 { font-size: 1.2rem; margin: 0 0 .3rem; text-transform: uppercase; }.steps p { margin: 0; color: var(--muted); font-size: .8rem; }
.safety { background: linear-gradient(115deg,#140817,#0d0816 68%); color: white; display: grid; grid-template-columns: auto 1fr 1fr; gap: 4vw; align-items: center; border-bottom: 1px solid rgba(255,43,214,.3); }
.safety-mark { width: 90px; height: 105px; border: 2px solid var(--pink); clip-path: polygon(50% 0,100% 18%,91% 75%,50% 100%,9% 75%,0 18%); display: grid; place-items: center; font-size: 2rem; color: var(--pink); filter: drop-shadow(0 0 11px rgba(255,43,214,.5)); }
.eyebrow.light { color: var(--pink); }.safety h2 em { color: transparent; -webkit-text-stroke-color: var(--pink); }.safety > p { color: #b8a6c8; font-size: .82rem; max-width: 430px; }.safety > a { grid-column: 3; font: 700 .68rem var(--mono); color: var(--cyan); text-transform: uppercase; }
footer { padding: 2.5rem clamp(1.25rem,7vw,7rem); display: grid; grid-template-columns: 1fr 1fr auto; gap: 2rem; align-items: center; background: #05030c; border-top: 1px solid var(--line); }footer p { font: 400 .62rem var(--mono); color: #685c81; margin: 0; }.copyright { color: var(--cyan)!important; }

@media (max-width: 900px) {
  .site-header nav { display: none; }.hero { grid-template-columns: 1fr; padding-top: 130px; }.hero::before { display:none; }.hero-visual { min-height: 440px; }.radar { width: 330px; }.terminal-card { left: 8%; }
  .course-grid { grid-template-columns: repeat(2,1fr); }.course-card,.course-card:nth-child(4),.course-card:nth-child(5) { grid-column: span 1; }.method { grid-template-columns: 1fr; }.safety { grid-template-columns: auto 1fr; }.safety > p,.safety > a { grid-column: 2; }footer { grid-template-columns: 1fr auto; }footer > p:nth-child(2) { display:none; }
}
@media (max-width: 620px) {
  .header-cta { display: none; }.hero { padding-top: 115px; }.hero h1 { font-size: 3.15rem; }.hero-actions,.course-tools,.section-heading { align-items: stretch; flex-direction: column; }.button { text-align: center; }.trust-row { justify-content: space-between; gap: .7rem; }.trust-row div { min-width: 0; }.hero-visual { min-height: 360px; }.radar { width: 250px; }.terminal-card { width: 265px; left: 0; }.course-grid { grid-template-columns: 1fr; }.course-card { min-height: 350px; }.filters { overflow-x: auto; }.filters button { white-space: nowrap; }.safety { grid-template-columns: 1fr; }.safety > p,.safety > a { grid-column: 1; }.safety-mark { width: 65px; height: 75px; }footer { grid-template-columns: 1fr; }.copyright { display: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.cursor { animation: none; }.course-card,.button { transition: none; } }