/* =========================================================
   TECHNIK — Design System
   Palette: deep space navy, electric blue, cyan, violet, magenta
   Type: Space Grotesk (display) / Inter (body) / JetBrains Mono (HUD/data)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --bg-void:      #060812;
  --bg-deep:      #0b0f1f;
  --bg-panel:     #11172c;
  --bg-panel-2:   #161d38;
  --line:         rgba(140,160,255,0.14);
  --line-bright:  rgba(140,160,255,0.32);

  --blue:    #4c7eff;
  --cyan:    #37e6e6;
  --violet:  #8b5cf6;
  --magenta: #e64cc4;
  --pink:    #ff8fd6;
  --amber:   #ffb454;

  --text-hi:   #eaf0ff;
  --text-mid:  #aab4d6;
  --text-low:  #6b74a0;

  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 9px;

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --ease: cubic-bezier(.16,.84,.44,1);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg-void);
  color:var(--text-hi);
  font-family:var(--font-body);
  overflow-x:hidden;
  min-height:100vh;
}

::selection{ background:var(--violet); color:#fff; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
img{max-width:100%; display:block;}

h1,h2,h3,h4{font-family:var(--font-display); line-height:1.08; letter-spacing:-0.01em;}

.container{ max-width:1240px; margin:0 auto; padding:0 28px; }

/* ---------- Starfield background ---------- */
#starfield{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(76,126,255,0.16), transparent 60%),
    radial-gradient(ellipse 60% 40% at 85% 15%, rgba(230,76,196,0.10), transparent 60%),
    var(--bg-void);
}
#starfield canvas{ position:absolute; inset:0; width:100%; height:100%; }

/* ---------- Nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 28px;
  background:rgba(6,8,18,0.55);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
  transition:padding .3s var(--ease), background .3s var(--ease);
}
.nav.scrolled{ padding:10px 28px; background:rgba(6,8,18,0.85); }
.nav-brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:700; font-size:1.15rem; letter-spacing:.02em;
}
.nav-brand .dot{
  width:10px; height:10px; border-radius:50%;
  background:conic-gradient(from 0deg, var(--cyan), var(--violet), var(--magenta), var(--cyan));
  box-shadow:0 0 16px var(--cyan);
  animation:spin 6s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.nav-links{ display:flex; gap:26px; }
.nav-links a{
  font-size:0.86rem; color:var(--text-mid); font-weight:500;
  position:relative; padding:6px 0; transition:color .2s;
}
.nav-links a:hover, .nav-links a:focus-visible{ color:var(--text-hi); }
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:linear-gradient(90deg, var(--cyan), var(--violet));
  transition:width .25s var(--ease);
}
.nav-links a:hover::after{ width:100%; }

.nav-right{ display:flex; align-items:center; gap:14px; }
.nav-icon-btn{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--line);
  background:rgba(255,255,255,0.02); color:var(--text-mid);
  display:flex; align-items:center; justify-content:center;
  transition:all .2s;
}
.nav-icon-btn:hover{ border-color:var(--cyan); color:var(--cyan); }

.nav-toggle{ display:none; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 26px; border-radius:100px; font-weight:600; font-size:0.92rem;
  border:1px solid transparent; transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s;
}
.btn:active{ transform:scale(0.97); }
.btn-primary{
  background:linear-gradient(120deg, var(--blue), var(--violet) 60%, var(--magenta));
  color:#fff; box-shadow:0 8px 30px -8px rgba(139,92,246,0.6);
}
.btn-primary:hover{ box-shadow:0 10px 38px -6px rgba(139,92,246,0.85); transform:translateY(-1px); }
.btn-ghost{
  background:rgba(255,255,255,0.03); color:var(--text-hi); border-color:var(--line-bright);
}
.btn-ghost:hover{ border-color:var(--cyan); background:rgba(55,230,230,0.06); }
.btn-sm{ padding:9px 18px; font-size:0.82rem; }

/* ---------- Hero ---------- */
.hero{
  position:relative; z-index:1; min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:140px 24px 80px;
}
.hero-eyebrow{
  font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.32em;
  color:var(--cyan); margin-bottom:26px; display:flex; gap:10px; align-items:center;
}
.hero-eyebrow span{ opacity:0.35; }
.hero-eyebrow span.active{ opacity:1; text-shadow:0 0 12px var(--cyan); }

.hero h1{
  font-size:clamp(2.6rem, 7vw, 5.4rem);
  background:linear-gradient(120deg, #fff 20%, var(--cyan) 50%, var(--violet) 75%, var(--magenta));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  max-width:16ch;
}
.hero p.sub{
  margin-top:22px; font-size:1.15rem; color:var(--text-mid); max-width:38ch;
}
.hero-actions{ display:flex; gap:16px; margin-top:44px; flex-wrap:wrap; justify-content:center; }

.hero-orbit{
  position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
}
.orbit-ring{
  position:absolute; top:50%; left:50%; border:1px solid var(--line);
  border-radius:50%; transform:translate(-50%,-50%);
}
.orbit-ring.r1{ width:600px; height:600px; animation:orbitspin 60s linear infinite; }
.orbit-ring.r2{ width:900px; height:900px; animation:orbitspin 90s linear infinite reverse; border-style:dashed; }
.orbit-ring.r3{ width:1250px; height:1250px; animation:orbitspin 140s linear infinite; }
@keyframes orbitspin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }

/* ---------- Section shell ---------- */
.section{ position:relative; z-index:1; padding:120px 0; }
.section-head{ max-width:640px; margin-bottom:56px; }
.section-eyebrow{
  font-family:var(--font-mono); font-size:0.76rem; letter-spacing:0.24em;
  color:var(--violet); margin-bottom:14px;
}
.section-head h2{ font-size:clamp(1.9rem, 4vw, 2.9rem); }
.section-head p{ margin-top:14px; color:var(--text-mid); font-size:1.03rem; }

/* ---------- Path cards ---------- */
.path-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:18px;
}
.path-card{
  position:relative; overflow:hidden;
  background:linear-gradient(160deg, var(--bg-panel), var(--bg-deep));
  border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:30px 26px; min-height:210px;
  display:flex; flex-direction:column; justify-content:flex-end;
  transition:transform .35s var(--ease), border-color .35s;
}
.path-card:hover{ transform:translateY(-6px); border-color:var(--line-bright); }
.path-card .glow{
  position:absolute; top:-40%; right:-30%; width:220px; height:220px; border-radius:50%;
  filter:blur(50px); opacity:0.35; transition:opacity .35s;
}
.path-card:hover .glow{ opacity:0.6; }
.path-card .icon{ font-size:2.1rem; margin-bottom:14px; }
.path-card h3{ font-size:1.18rem; margin-bottom:6px; }
.path-card p{ color:var(--text-mid); font-size:0.9rem; }
.path-card .arrow{ position:absolute; top:26px; right:26px; opacity:0; transform:translate(-6px,6px); transition:all .3s; color:var(--cyan); }
.path-card:hover .arrow{ opacity:1; transform:translate(0,0); }

/* ---------- Panels (games/tools shells) ---------- */
.panel{
  background:linear-gradient(160deg, var(--bg-panel), var(--bg-deep));
  border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:22px; position:relative; overflow:hidden;
}
.panel-toolbar{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
  margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid var(--line);
}
.chip{
  font-family:var(--font-mono); font-size:0.72rem; padding:5px 11px; border-radius:100px;
  border:1px solid var(--line-bright); color:var(--text-mid); background:rgba(255,255,255,0.02);
}
.chip.on{ color:var(--cyan); border-color:var(--cyan); box-shadow:0 0 14px -4px var(--cyan); }
.chip.danger{ color:var(--magenta); border-color:var(--magenta); }
.chip.good{ color:#5dffb0; border-color:#5dffb0; }

/* ---------- Two-col layout ---------- */
.two-col{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:22px; align-items:start; }

/* ---------- AI Chat ---------- */
.chat-window{
  height:420px; overflow-y:auto; display:flex; flex-direction:column; gap:12px;
  padding:6px 4px 6px 2px;
}
.msg{ max-width:80%; padding:12px 16px; border-radius:16px; font-size:0.92rem; line-height:1.5; }
.msg.ai{ align-self:flex-start; background:var(--bg-panel-2); border:1px solid var(--line); border-bottom-left-radius:4px; }
.msg.user{ align-self:flex-end; background:linear-gradient(120deg, var(--blue), var(--violet)); color:#fff; border-bottom-right-radius:4px; }
.msg.typing{ display:flex; gap:5px; align-items:center; }
.msg.typing span{ width:6px; height:6px; border-radius:50%; background:var(--cyan); animation:bounce 1s infinite; }
.msg.typing span:nth-child(2){ animation-delay:.15s; }
.msg.typing span:nth-child(3){ animation-delay:.3s; }
@keyframes bounce{ 0%,60%,100%{ transform:translateY(0); opacity:.5;} 30%{ transform:translateY(-5px); opacity:1;} }

.chat-input-row{ display:flex; gap:10px; margin-top:14px; }
.chat-input-row input{
  flex:1; background:var(--bg-deep); border:1px solid var(--line); color:var(--text-hi);
  padding:13px 16px; border-radius:100px; font-size:0.92rem; outline:none; transition:border-color .2s;
}
.chat-input-row input:focus{ border-color:var(--cyan); }
.chat-input-row button{
  width:46px; height:46px; border-radius:50%; border:none;
  background:linear-gradient(120deg, var(--cyan), var(--violet)); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
}
.suggested{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.suggested button{
  background:rgba(255,255,255,0.03); border:1px solid var(--line); color:var(--text-mid);
  padding:8px 14px; border-radius:100px; font-size:0.8rem; transition:all .2s;
}
.suggested button:hover{ color:var(--cyan); border-color:var(--cyan); }

/* ---------- Creative Studio ---------- */
.studio-canvas-wrap{ position:relative; border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--line); }
#studioCanvas{ display:block; width:100%; height:440px; background:#080b16; touch-action:none; cursor:crosshair; }
.tool-row{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.tool-btn{
  width:38px; height:38px; border-radius:10px; border:1px solid var(--line);
  background:rgba(255,255,255,0.03); color:var(--text-mid); display:flex; align-items:center; justify-content:center;
  font-size:0.95rem; transition:all .2s;
}
.tool-btn.active, .tool-btn:hover{ border-color:var(--cyan); color:var(--cyan); }
.swatch-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.swatch{ width:26px; height:26px; border-radius:50%; border:2px solid transparent; }
.swatch.active{ border-color:#fff; transform:scale(1.1); }
input[type=range]{ width:100%; accent-color:var(--cyan); }

/* ---------- Universe Explorer ---------- */
.universe-stage{
  position:relative; height:520px; border-radius:var(--radius-lg); border:1px solid var(--line);
  background:radial-gradient(ellipse at 50% 40%, #0d1330, #05070f 70%);
  overflow:hidden;
}
.planet-orbit{
  position:absolute; top:50%; left:50%; border:1px dashed var(--line);
  border-radius:50%; transform:translate(-50%,-50%);
  pointer-events:none; /* rings are just guide lines — never intercept clicks */
  z-index:1;
}
.planet{
  position:absolute; border-radius:50%; cursor:pointer;
  box-shadow:0 0 24px -4px currentColor;
  transition:transform .25s var(--ease), box-shadow .25s;
  z-index:5; /* always sit above orbit rings, regardless of DOM order */
  padding:0; border:none; background-clip:padding-box;
}
.planet::before{
  /* invisible larger hit-area so small inner planets are still easy to tap */
  content:''; position:absolute; top:50%; left:50%;
  width:max(28px, 100%); height:max(28px, 100%);
  transform:translate(-50%,-50%); border-radius:50%;
}
.planet:hover, .planet:focus-visible{ transform:scale(1.3); box-shadow:0 0 40px 0 currentColor; }
.planet:focus-visible{ outline:2px solid #fff; outline-offset:4px; }
.sun{
  position:absolute; top:50%; left:50%; width:46px; height:46px; border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, #fff, var(--amber) 60%, transparent 75%);
  box-shadow:0 0 60px 12px rgba(255,180,84,0.55);
  cursor:pointer; z-index:6; border:none; padding:0;
  transition:transform .25s var(--ease), box-shadow .25s;
}
.sun:hover, .sun:focus-visible{ transform:translate(-50%,-50%) scale(1.15); box-shadow:0 0 80px 18px rgba(255,180,84,0.75); }
.planet-tooltip{
  position:absolute; padding:5px 10px; border-radius:100px;
  background:rgba(6,8,18,0.9); border:1px solid var(--line-bright);
  font-family:var(--font-mono); font-size:0.72rem; color:var(--text-hi);
  pointer-events:none; transform:translate(-50%,-130%); white-space:nowrap;
  opacity:0; transition:opacity .15s; z-index:7;
}
.planet-tooltip.show{ opacity:1; }
.planet-info{
  position:absolute; bottom:14px; left:14px; right:14px;
  background:rgba(6,8,18,0.82); backdrop-filter:blur(10px);
  border:1px solid var(--line-bright); border-radius:var(--radius-md);
  padding:16px 18px; display:none;
}
.planet-info.show{ display:block; }
.planet-info h4{ font-size:1.05rem; margin-bottom:6px; }
.planet-info .facts{ display:flex; flex-wrap:wrap; gap:14px; margin-top:10px; font-family:var(--font-mono); font-size:0.76rem; color:var(--text-mid); }

/* ---------- Neon Racer ---------- */
#racerCanvas{ display:block; width:100%; height:460px; border-radius:var(--radius-md); background:#05060d; }
.racer-hud{ display:flex; gap:18px; font-family:var(--font-mono); font-size:0.85rem; color:var(--cyan); }
.racer-overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:rgba(5,6,13,0.78); text-align:center; gap:16px; border-radius:var(--radius-md);
}

/* ---------- Network Lab ---------- */
.netlab-stage{
  position:relative; height:460px; border-radius:var(--radius-md); border:1px solid var(--line);
  background:
    linear-gradient(rgba(140,160,255,0.06) 1px, transparent 1px) 0 0/28px 28px,
    linear-gradient(90deg, rgba(140,160,255,0.06) 1px, transparent 1px) 0 0/28px 28px,
    #080b16;
  overflow:hidden;
}
.net-node{
  position:absolute; width:82px; padding:10px 8px; border-radius:12px;
  background:var(--bg-panel-2); border:1px solid var(--line-bright); text-align:center;
  font-size:0.72rem; cursor:grab; user-select:none; touch-action:none;
}
.net-node .icon{ font-size:1.3rem; }
.net-node.placed{ cursor:default; }
.net-tray{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.net-tray .net-node{ position:static; cursor:grab; }
svg.net-lines{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.net-lines line{ stroke:var(--line-bright); stroke-width:2; }
.net-lines line.live{ stroke:var(--cyan); filter:drop-shadow(0 0 6px var(--cyan)); }

/* ---------- Cyber Defense ---------- */
.alert-card{
  background:linear-gradient(160deg, rgba(230,76,196,0.09), var(--bg-deep));
  border:1px solid rgba(230,76,196,0.4); border-radius:var(--radius-md); padding:22px;
}
.alert-card h4{ color:var(--magenta); font-family:var(--font-mono); font-size:0.85rem; letter-spacing:.08em; margin-bottom:10px; }
.alert-card p.scenario{ font-size:1.08rem; margin-bottom:18px; }
.choice-btn{
  display:block; width:100%; text-align:left; padding:14px 16px; margin-bottom:10px;
  border-radius:var(--radius-sm); border:1px solid var(--line); background:rgba(255,255,255,0.02);
  color:var(--text-hi); font-size:0.92rem; transition:all .2s;
}
.choice-btn:hover{ border-color:var(--cyan); background:rgba(55,230,230,0.05); }
.choice-btn.correct{ border-color:#5dffb0; background:rgba(93,255,176,0.1); }
.choice-btn.wrong{ border-color:var(--magenta); background:rgba(230,76,196,0.1); }
.feedback{ margin-top:14px; font-size:0.9rem; color:var(--text-mid); }

/* ---------- Pixel Playground ---------- */
.playground-stage{
  position:relative; height:560px; border-radius:var(--radius-lg); border:1px solid var(--line);
  background:#04050c; overflow:hidden; cursor:crosshair;
}
#pgCanvas{ position:absolute; inset:0; width:100%; height:100%; }
.playground-hint{
  position:absolute; top:20px; left:50%; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:0.8rem; color:var(--text-mid);
  background:rgba(6,8,18,0.6); padding:8px 16px; border-radius:100px; border:1px solid var(--line);
  pointer-events:none; transition:opacity .5s;
}
.discovery-toast{
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:rgba(6,8,18,0.9); border:1px solid var(--cyan); border-radius:var(--radius-md);
  padding:12px 20px; font-family:var(--font-mono); font-size:0.85rem; color:var(--cyan);
  opacity:0; transition:all .4s var(--ease); pointer-events:none; white-space:nowrap;
}
.discovery-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

.discovery-grid{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.discovery-chip{
  width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; background:var(--bg-panel-2); border:1px solid var(--line); filter:grayscale(1) opacity(0.35);
  transition:all .3s;
}
.discovery-chip.found{ filter:none; border-color:var(--cyan); box-shadow:0 0 16px -4px var(--cyan); }

/* ---------- HUD (signature element) ---------- */
.hud{
  position:fixed; bottom:18px; left:18px; z-index:90;
  display:flex; align-items:center; gap:12px;
  background:rgba(6,8,18,0.72); backdrop-filter:blur(14px);
  border:1px solid var(--line-bright); border-radius:100px;
  padding:8px 18px 8px 8px; font-family:var(--font-mono);
  transition:transform .3s var(--ease);
}
.hud:hover{ transform:translateY(-2px); }
.hud-ring{
  width:40px; height:40px; border-radius:50%; position:relative; flex-shrink:0;
  background:conic-gradient(var(--cyan) calc(var(--pct,0)*1%), rgba(255,255,255,0.08) 0);
  display:flex; align-items:center; justify-content:center;
}
.hud-ring::before{
  content:''; position:absolute; inset:3px; border-radius:50%; background:var(--bg-void);
}
.hud-ring span{ position:relative; font-size:0.66rem; color:var(--cyan); }
.hud-text{ display:flex; flex-direction:column; line-height:1.3; }
.hud-text .lvl{ font-size:0.78rem; color:var(--text-hi); font-weight:600; }
.hud-text .xp{ font-size:0.68rem; color:var(--text-low); }
.hud-badges{ display:flex; gap:4px; margin-left:4px; }
.hud-badges span{ font-size:0.95rem; opacity:0.9; }

/* ---------- Toast (global) ---------- */
.toast-stack{ position:fixed; top:90px; right:18px; z-index:200; display:flex; flex-direction:column; gap:10px; }
.toast{
  background:rgba(6,8,18,0.92); border:1px solid var(--cyan); border-radius:var(--radius-md);
  padding:14px 18px; font-size:0.86rem; max-width:280px;
  box-shadow:0 12px 40px -10px rgba(55,230,230,0.35);
  animation:toastin .35s var(--ease);
}
@keyframes toastin{ from{ opacity:0; transform:translateX(20px);} to{ opacity:1; transform:translateX(0);} }

/* ---------- Footer / final CTA ---------- */
.final-cta{
  text-align:center; padding:150px 24px; position:relative; z-index:1;
}
.final-cta h2{ font-size:clamp(2rem, 5vw, 3.4rem); max-width:16ch; margin:0 auto 16px; }
footer{
  border-top:1px solid var(--line); padding:32px 28px; text-align:center;
  color:var(--text-low); font-size:0.82rem; position:relative; z-index:1;
}

/* ---------- Utility ---------- */
.grad-1{ background:var(--blue); }
.grad-2{ background:var(--cyan); }
.grad-3{ background:var(--violet); }
.grad-4{ background:var(--magenta); }
.grad-5{ background:var(--amber); }
.grad-6{ background:#5dffb0; }
.mt-14{ margin-top:14px; }
.text-mid{ color:var(--text-mid); }
.hidden{ display:none !important; }

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .path-grid{ grid-template-columns:1fr 1fr; }
  .two-col{ grid-template-columns:1fr; }
}
@media (max-width: 640px){
  .nav-links{
    position:fixed; top:0; right:0; height:100vh; width:78%; max-width:320px;
    background:rgba(6,8,18,0.98); backdrop-filter:blur(20px);
    flex-direction:column; padding:100px 30px; gap:24px;
    border-left:1px solid var(--line); transform:translateX(100%); transition:transform .35s var(--ease);
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-toggle{ display:flex; width:38px; height:38px; border-radius:10px; border:1px solid var(--line); background:none; color:var(--text-hi); align-items:center; justify-content:center; font-size:1.1rem; }
  .path-grid{ grid-template-columns:1fr; }
  .hud{ left:10px; bottom:10px; padding:6px 14px 6px 6px; }
  .section{ padding:80px 0; }
}