:root { --bg:#09090b; --panel:#111114; --line:#27272a; --text:#fafafa; --muted:#a1a1aa; --accent:#b6ff5c; }

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--bg); }

body { min-height: 100vh; margin: 0; color: var(--text); background: radial-gradient(circle at 72% 30%, rgba(182, 255, 92, 0.07), transparent 30%), var(--bg); font-family: Inter,system-ui,sans-serif; }

body:before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .18; background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, black, transparent 80%); }

a { color: inherit; }

.shell { position: relative; min-height: 100vh; max-width: 1240px; margin: auto; padding: 0 40px; display: grid; grid-template-columns: 1.15fr .85fr; grid-template-rows: auto 1fr auto; column-gap: 80px; }

.nav { grid-column: 1/-1; height: 100px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }

.brand { display: flex; gap: 11px; align-items: center; text-decoration: none; font-weight: 650; letter-spacing: -.03em; font-size: 19px; }

.brand-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; color: #09090b; background: var(--accent); font: 500 17px/1 "DM Mono",monospace; transform: rotate(-4deg); }

.nav-note { color: #71717a; font: 500 11px "DM Mono",monospace; text-transform: uppercase; letter-spacing: .1em; }

.hero { align-self: center; padding: 70px 0; }

.status { width: max-content; padding: 7px 11px; border: 1px solid #30411f; border-radius: 99px; color: #caff89; background: #12190d; font: 500 11px/1 "DM Mono",monospace; text-transform: uppercase; letter-spacing: .1em; }

.status-dot { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }

h1 { margin: 28px 0 24px; font-size: clamp(48px, 6.2vw, 82px); line-height: .99; letter-spacing: -.065em; }

h1 span { color: #71717a; }

.lede { max-width: 590px; margin: 0; color: var(--muted); font-size: 18px; line-height: 1.65; }

.signup-form { max-width: 590px; margin-top: 34px; }

.signup-row { display: flex; gap: 10px; }

.signup-row input { min-width: 0; flex: 1; padding: 14px 16px; border: 1px solid #3f3f46; border-radius: 7px; outline: none; color: var(--text); background: #111114; font: 400 14px "DM Mono",monospace; transition: border-color .2s,box-shadow .2s; }

.signup-row input::placeholder { color: #52525b; }

.signup-row input:focus { border-color: #86bb45; box-shadow: 0 0 0 3px rgba(182, 255, 92, 0.1); }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; padding: 14px 18px; border: 0; border-radius: 7px; text-decoration: none; font: 600 14px Inter,system-ui,sans-serif; white-space: nowrap; cursor: pointer; transition: transform .2s,box-shadow .2s,opacity .2s; }

.button-primary { background: var(--accent); color: #10140a; }

.button-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(182, 255, 92, 0.14); }

.button:disabled { cursor: wait; opacity: .65; transform: none; }

.form-status { min-height: 18px; margin: 10px 2px 0; color: #71717a; font: 400 11px "DM Mono",monospace; }

.form-status[data-state=success] { color: #b6ff5c; }

.form-status[data-state=error] { color: #fca5a5; }

.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; }

.terminal { align-self: center; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: rgba(17, 17, 20, 0.88); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35); transform: rotate(1deg); }

.terminal-bar { height: 43px; display: flex; align-items: center; gap: 7px; padding: 0 14px; border-bottom: 1px solid var(--line); background: #151518; }

.terminal-bar span { width: 8px; height: 8px; border-radius: 50%; background: #3f3f46; }

.terminal-bar b { margin: auto; transform: translateX(-22px); color: #71717a; font: 400 10px "DM Mono",monospace; }

.terminal-body { min-height: 270px; padding: 32px; color: #a1a1aa; font: 400 13px/2 "DM Mono",monospace; }

.terminal-body p { margin: 3px 0; }

.terminal-body i { color: var(--accent); font-style: normal; }

.terminal-body em { color: #fbbf24; font-style: normal; }

.terminal-body span { color: var(--accent); letter-spacing: -2px; }

.terminal-body small { color: #52525b; letter-spacing: 0; }

.cursor { display: inline-block; width: 8px; height: 14px; vertical-align: middle; background: #71717a; animation: blink 1s step-end infinite; }

@keyframes blink { 50% { opacity: 0; } }
footer { grid-column: 1/-1; min-height: 76px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; color: #52525b; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }

@media (max-width: 850px) { .shell { grid-template-columns: 1fr; padding: 0 24px; }
  .hero { padding: 70px 0 45px; }
  .terminal { margin-bottom: 70px; transform: none; } }
@media (max-width: 520px) { .nav { height: 78px; }
  h1 { font-size: 47px; }
  .lede { font-size: 16px; }
  .signup-row { flex-direction: column; }
  .signup-row .button { width: 100%; }
  .terminal-body { min-height: 220px; padding: 22px; font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }