:root{
  --bg:#0b0f14; --panel:#0f141d; --card:#101825; --border:#182234;
  --text:#e8eef5; --muted:#9fb0c0; --brand:#4fb3ff; --brand2:#a78bfa;
  --ok:#35d48c; --shadow:0 20px 60px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.6 ui-sans-serif,system-ui,Segoe UI,Roboto,Arial}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
a{color:var(--text);text-decoration:none}
.btn{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#04121a;padding:10px 16px;border-radius:12px;font-weight:800;display:inline-block}
.btn:hover{filter:brightness(1.1)}
.btn.ghost{background:transparent;border:1px solid var(--border);color:var(--text)}

.site-header{position:sticky;top:0;z-index:10;background:rgba(11,15,20,.7);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;gap:18px;padding:14px 0}
.logo{font-weight:900;letter-spacing:.3px}

#bgCanvas{position:fixed;inset:0;z-index:-2}
.bg-lines{
  position:fixed;left:0;top:0;bottom:0;width:74px;z-index:-1;pointer-events:none;
  background:
    linear-gradient(transparent,transparent),
    repeating-linear-gradient(180deg, rgba(159,176,192,.14) 0 18px, transparent 18px 36px);
  opacity:.35;border-right:1px solid rgba(159,176,192,.12);
}

.hero{padding:64px 0 24px}
.hero-topline{color:var(--brand);opacity:.8;margin-bottom:8px;font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace}
.snippet{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px;box-shadow:var(--shadow);overflow:auto}
.snippet code{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;color:#d7eaff}
.status-chip{display:inline-block;margin-top:10px;background:#0e1b12;border:1px solid #1e3a2a;border-radius:10px;padding:6px 10px;color:#9ae6b4}
.status-chip .ok{color:var(--ok);font-weight:700}

.gradient-title{
  margin:22px 0 6px;
  font-size: clamp(32px, 7vw, 68px);
  font-weight: 900;
  letter-spacing: .3px;
  background: linear-gradient(90deg, #2dd4bf 0%, #60a5fa 35%, #a78bfa 70%, #60a5fa 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.subtitle{color:var(--muted);margin:4px 0 18px}

.terminal{background:var(--panel);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow)}
.terminal-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--border)}
.dot{width:10px;height:10px;border-radius:50%}
.red{background:#ff5f56}.yellow{background:#ffbd2e}.green{background:#27c93f}
.term-title{margin-left:auto;color:var(--muted);font-size:.9rem}
.terminal-body{padding:18px}
.prompt{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace}
.caret{display:inline-block;width:10px;height:1.1em;background:#7cc6ff;margin-left:2px;vertical-align:-3px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:.2}}
.term-tabs{display:flex;gap:8px;border-top:1px solid var(--border);padding:10px 12px;flex-wrap:wrap}
.chip{background:#0b1320;color:var(--muted);border:1px solid var(--border);padding:6px 10px;border-radius:999px;cursor:pointer}
.chip.active,.chip:hover{color:#d5e8ff;border-color:var(--brand)}

.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 0}

.section-title{margin-top:56px;margin-bottom:8px;font-size:clamp(24px,4vw,36px)}
.block{margin:18px 0 34px}
.block h3{margin:0 0 10px;font-size:clamp(18px,3vw,22px);color:#d7eaff}

.grid{display:grid;gap:14px}
.vids-1{grid-template-columns:1fr}
.vids-3{grid-template-columns:repeat(3,1fr)}
video{width:100%;height:auto;border-radius:14px;border:1px solid var(--border);background:#060b12}

.contact{padding:24px 0 64px}
.contact-card{display:inline-flex;gap:10px;align-items:center;background:var(--panel);border:1px solid var(--border);padding:10px 14px;border-radius:12px}
.contact-card code{color:#aee3ff}

.site-footer{border-top:1px solid var(--border);background:#0a1018;color:var(--muted);padding:16px 0;text-align:center}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(10px);transition:opacity .5s ease, transform .5s ease}
.reveal.visible{opacity:1;transform:none}

/* responsive */
@media (max-width:980px){ .vids-3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){
  nav{display:none}
  .vids-3{grid-template-columns:1fr}
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .caret{animation:none}
}