:root{
  --bg:#0a0a0a; --panel:#0f0f10; --text:#d0d0d0; --muted:#8a8a8a;
  --teal:#38d0c0; --amber:#f0b040; --ok:#59d37d; --warn:#f5d36a; --fail:#ff6b6b;
}
html,body{height:100%}
body{margin:0; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; background:var(--bg); color:var(--text);}
a{color:inherit; text-decoration:none}
.container{max-width:1120px; margin:0 auto; padding:24px}

/* Terminal overlay */
.terminal-wrap{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:auto; z-index:40;}
.glow-a, .glow-b{position:absolute; border-radius:9999px; filter:blur(60px); opacity:.22}
.glow-a{width:420px; height:420px; left:-120px; top:-120px; background:radial-gradient(closest-side, rgba(56,208,192,.7), transparent)}
.glow-b{width:420px; height:420px; right:-120px; bottom:-120px; background:radial-gradient(closest-side, rgba(240,176,64,.7), transparent)}

/* Use .boot-terminal to avoid conflicts with jQuery Terminal styles */
.boot-terminal{width:min(100%, 980px); background:#000000; border:1px solid #000000; border-radius:16px; box-shadow:0 20px 80px rgba(0,0,0,.5); overflow:hidden}
.term-bar{display:flex; gap:8px; align-items:center; padding:10px 14px; border-bottom:1px solid #1a1a1c; background:#0d0d0f}
.dot{width:12px; height:12px; border-radius:999px}
.dot.red{background:#ef4444} .dot.amber{background:#f59e0b} .dot.green{background:#22c55e}
.title{font-size:12px; color:#9e9ea0; margin-left:8px}

.screen{height:62vh; overflow:auto; padding:18px 18px 22px; line-height:1.65}
.prompt{color:var(--teal)}
.caret{display:inline-block; width:10px; height:16px; background:#e6e6e6; vertical-align:-2px; animation:blink 1s steps(1,end) infinite}
@keyframes blink{50%{opacity:0}}
.status-ok{color:var(--ok)} .status-warn{color:var(--warn)} .status-fail{color:var(--fail)}

.term-footer{display:flex; justify-content:space-between; align-items:center; padding:10px 14px; border-top:1px solid #1a1a1c; color:#8e8e92; font-size:12px}

/* Loading overlay (after boot) */
.loading-wrap{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:#000000; z-index:35; opacity:0; pointer-events:none; transition:opacity .3s ease}
.loading-wrap .loading-inner{display:flex; flex-direction:column; align-items:center; gap:14px}
.loading-wrap .spinner{width:48px; height:48px; border-radius:999px; border:3px solid rgba(255,255,255,.12); border-top-color:#38d0c0; animation:spin 1s linear infinite}
.loading-wrap .loading-text{font-size:12px; letter-spacing:2px; text-transform:uppercase; color:#9e9ea0}
@keyframes spin{to{transform:rotate(360deg)}}

body.is-loading .loading-wrap{opacity:1; pointer-events:auto}

/* Main content (SEO-visible from the start, visually revealed later) */
main{opacity:0; transform:translateY(8px); transition:opacity .6s ease, transform .6s ease}
.revealed main{opacity:1; transform:none}
header.site{position:relative; z-index:10;}
.hero{display:grid; gap:12px}
.h1{font-size:clamp(28px, 6vw, 46px); font-weight:700}
.tag{color:#a4a4a8}
.cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.cta a{padding:10px 14px; border-radius:12px; border:1px solid #2a2a2e; background:#111113}
.cta a:hover{border-color:#2bd5c4; color:#bdf7ef}
.cta a i{margin-right:8px}
.cta-header{display:flex; justify-content:space-between; align-items:center}
.mobile-brand{display:none}
.menu-toggle{display:none; align-items:center; justify-content:center; width:44px; height:44px; border-radius:10px; border:1px solid #2a2a2e; background:#111113; color:var(--text); cursor:pointer}
.menu-toggle:hover{border-color:#2bd5c4; color:#bdf7ef}
.hamburger, .hamburger::before, .hamburger::after{content:""; display:block; width:18px; height:2px; background:currentColor; border-radius:999px; transition:transform .2s ease, opacity .2s ease}
.hamburger::before{transform:translateY(-6px)}
.hamburger::after{transform:translateY(4px)}

/* Background grain */
.grain{pointer-events:none; position:fixed; inset:0; background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140" viewBox="0 0 140 140"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.7" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.05"/></svg>'); opacity:.25; mix-blend-mode:soft-light}

/* Accessibility helpers */
.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}

@media (prefers-reduced-motion: reduce) {
  .terminal-wrap{display:none}
  .loading-wrap{display:none}
  .revealed main{transition:none}
  main{opacity:1; transform:none}
}

@media (max-width: 720px) {
  .menu-toggle{display:inline-flex}
  .cta-header{position:relative; z-index:30; background:rgba(10,10,10,.88); backdrop-filter:blur(10px); padding:10px 12px; border-radius:12px; border:1px solid #1a1a1c}
  .mobile-brand{display:flex; flex-direction:column; gap:2px}
  .brand-title{font-size:14px; font-weight:600; letter-spacing:.4px}
  .brand-subtitle{font-size:10px; color:var(--muted)}
  .menu-toggle{background:#f0b040; border-color:#f0b040; color:#0a0a0a}
  .cta{position:fixed; inset:0; z-index:25; display:flex; flex-direction:column; gap:0; padding:120px 24px 24px; background:#0a0a0a; opacity:0; pointer-events:none; transform:translateY(-6px); transition:opacity .25s ease, transform .25s ease}
  .cta.is-open{opacity:1; pointer-events:auto; transform:none}
  .cta a{padding:18px 6px; border:none; border-top:1px solid #1a1a1c; border-radius:0; background:transparent; letter-spacing:4px; text-transform:uppercase; font-size:14px}
  .cta a:last-child{border-bottom:1px solid #1a1a1c}
  .cta a:hover{border-color:#1a1a1c; color:#f0b040}
  .cta a.cta-workspace{background:#ef4444; color:#0a0a0a; border-color:#ef4444}
  .cta a.cta-workspace:hover,
  .cta a.cta-workspace:focus-visible{background:#f0b040; color:#0a0a0a; border-color:#ffffff}
  .menu-toggle[aria-expanded="true"] .hamburger{transform:rotate(45deg)}
  .menu-toggle[aria-expanded="true"] .hamburger::before{transform:rotate(-90deg) translateX(-6px)}
  .menu-toggle[aria-expanded="true"] .hamburger::after{opacity:0}
  .menu-open, .menu-open body{overflow:hidden}
  .menu-open .cta-header{position:fixed; top:16px; left:24px; right:24px}
}

@media (min-width: 721px) {
  .cta a:hover{background:#f0b040; color:#0a0a0a; border-color:#ffffff}
  .cta a:focus-visible{background:#f0b040; color:#0a0a0a; border-color:#ffffff; outline:none}
  .cta a.cta-workspace{background:#ef4444; color:#0a0a0a; border-color:#ef4444}
  .cta a.cta-workspace:hover,
  .cta a.cta-workspace:focus-visible{background:#f0b040; color:#0a0a0a; border-color:#ffffff}
}

/* Footer */
.footer {
  text-align:center;
  color:#7a7a7a;
  font-size:12px;
  padding:24px 0;
}
.footer strong {color:#38d0c0;}

/* boot font size */
.screen{font-size:11px;}