@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&display=swap');

:root {
  --bg: #050D1B;
  --surface: #0f172a;
  --surface-2: #141f36;
  --line: rgba(173, 190, 220, .16);
  --text: #f4f7ff;
  --muted: #a7b3ca;
  --green: #b7f34a;
  --green-dark: #7aa82a;
  --cyan: #55d6d0;
  --violet: #9a8cff;
  --radius: 22px;
  --max: 1160px;
  --font-heading: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; color: var(--text);
  background:
    radial-gradient(ellipse at 78% 7%, rgba(85,214,208,.10), transparent 30%),
    radial-gradient(ellipse at 8% 18%, rgba(154,140,255,.08), transparent 30%), var(--bg);
  font-family: var(--font-body);
  line-height: 1.6; -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
.wrap { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }

/* Nav */
.nav { display:flex; align-items:center; justify-content:space-between; padding:24px 0; gap:24px; }
.brand { display:flex; align-items:center; gap:11px; font-family:var(--font-heading); font-weight:700; letter-spacing:-.02em; font-size:1.15rem; }
.brand-logo { height:198px; width:auto; display:block; }
.footer-logo { height:54px; }
.brand-mark { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:var(--green); color:#10180a; box-shadow:0 0 34px rgba(183,243,74,.16); }
.brand-mark img { width:23px; height:23px; display:block; }
.brand small { display:block; color:var(--muted); font-family:var(--font-body); font-weight:500; letter-spacing:.25em; font-size:.55rem; text-transform:uppercase; margin-top:-3px; }
.navlinks { display:flex; gap:28px; align-items:center; color:#c1cbe0; font-size:.91rem; font-weight:500; }
.navlinks a:hover { color:var(--green); }

/* Buttons */
.button { display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:12px 18px; border-radius:12px; font-family:var(--font-heading); font-weight:600; font-size:.92rem; border:1px solid transparent; transition:transform .2s, background .2s, border-color .2s; cursor:pointer; }
.button:hover { transform:translateY(-2px); }
.button-primary { color:#10180a; background:var(--green); box-shadow:0 10px 35px rgba(183,243,74,.12); }
.button-primary:hover { background:#c9ff6a; }
.button-secondary { border-color:var(--line); background:rgba(255,255,255,.025); color:var(--text); }
.button-secondary:hover { border-color:rgba(183,243,74,.55); }

/* Hero */
.hero { display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:55px; padding:78px 0 92px; }
.eyebrow { display:inline-flex; align-items:center; gap:9px; padding:7px 11px; border:1px solid rgba(183,243,74,.23); border-radius:999px; background:rgba(183,243,74,.06); color:#d8f8a0; text-transform:uppercase; letter-spacing:.25em; font-size:.68rem; font-family:var(--font-body); font-weight:500; }
.pulse { width:7px; height:7px; background:var(--green); border-radius:50%; box-shadow:0 0 12px var(--green); animation:pulse-glow 2s infinite; }
@keyframes pulse-glow { 0%,100%{box-shadow:0 0 12px var(--green)} 50%{box-shadow:0 0 22px var(--green)} }
h1 { font-family:var(--font-heading); font-size:clamp(3rem, 5.7vw, 5.3rem); line-height:.99; letter-spacing:-.02em; font-weight:700; margin:24px 0; max-width:700px; }
.accent { color:var(--green); }
.hero p { color:var(--muted); font-size:1.12rem; max-width:600px; margin:0 0 29px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.micro-proof { display:flex; align-items:center; flex-wrap:wrap; gap:18px; margin-top:28px; color:#aab6cd; font-size:.82rem; }
.micro-proof span { display:flex; align-items:center; gap:7px; }
.check { color:var(--green); font-weight:900; }

/* Terminal visual */
.visual { position:relative; min-width:0; }
.glow { position:absolute; inset:10% 4%; filter:blur(55px); background:linear-gradient(135deg,rgba(183,243,74,.14),rgba(85,214,208,.13),rgba(154,140,255,.16)); border-radius:50%; }
.terminal { position:relative; border:1px solid rgba(180,197,225,.22); background:linear-gradient(145deg,rgba(21,32,55,.97),rgba(10,16,31,.98)); border-radius:22px; overflow:hidden; box-shadow:0 35px 100px rgba(0,0,0,.42); transform:perspective(1000px) rotateY(-3deg) rotateX(1deg); }
.terminal-top { display:flex; align-items:center; gap:7px; padding:15px 17px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.025); }
.dot { width:8px; height:8px; border-radius:50%; background:#59647a; }
.terminal-title { margin-left:8px; color:#94a3bc; font-family:var(--font-mono); font-size:.75rem; }
.terminal-body { padding:25px 22px 22px; font-family:var(--font-mono); font-size:.82rem; line-height:1.9; color:#d5deee; }
.line { display:flex; gap:15px; white-space:pre-wrap; overflow-wrap:anywhere; }
.ln { color:#52617a; user-select:none; }
.green { color:var(--green); }
.cyan { color:var(--cyan); }
.purple { color:#b6aaff; }
.dim { color:#7e8ca7; }
.code-divider { height:1px; background:var(--line); margin:18px 0; }
.status { display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid rgba(183,243,74,.19); background:rgba(183,243,74,.055); border-radius:12px; padding:12px 14px; margin-top:18px; font-family:var(--font-mono); font-size:.76rem; }
.status strong { color:var(--green); font-weight:700; }
.floating-chip { position:absolute; right:-18px; bottom:26px; display:flex; align-items:center; gap:11px; padding:13px 16px; border-radius:15px; border:1px solid rgba(183,243,74,.27); background:#111b2c; box-shadow:0 15px 40px rgba(0,0,0,.3); }
.floating-chip .shield { width:35px; height:35px; display:grid; place-items:center; border-radius:11px; color:var(--green); background:rgba(183,243,74,.1); }
.floating-chip b { display:block; font-family:var(--font-heading); font-size:.81rem; }
.floating-chip small { color:var(--muted); font-size:.7rem; }

/* Trust bar */
.trustbar { border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(255,255,255,.018); }
.trust-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 0; color:#a6b3ca; font-size:.85rem; }
.trust-label { text-transform:uppercase; letter-spacing:.25em; font-size:.65rem; color:#71809a; font-family:var(--font-body); font-weight:600; }
.trust-item { display:flex; align-items:center; gap:9px; font-weight:600; }
.trust-item svg { width:18px; color:var(--green); }

/* Sections */
section { padding:94px 0; }
.section-head { max-width:690px; margin:0 auto 44px; text-align:center; }
.kicker { color:var(--green); text-transform:uppercase; font-size:.7rem; font-family:var(--font-body); font-weight:600; letter-spacing:.25em; }
h2 { font-family:var(--font-heading); font-size:clamp(2.1rem,4vw,3.35rem); line-height:1.08; letter-spacing:-.02em; font-weight:700; margin:13px 0 15px; }
.section-head p { color:var(--muted); margin:0; font-size:1.02rem; }

/* Feature grid */
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:17px; }
.feature { border:1px solid var(--line); background:linear-gradient(145deg,rgba(20,31,54,.82),rgba(12,19,35,.9)); padding:25px; border-radius:var(--radius); min-height:235px; transition:transform .2s,border-color .2s; }
.feature:hover { transform:translateY(-4px); border-color:rgba(183,243,74,.32); }
.feature-icon { width:47px; height:47px; display:grid; place-items:center; border:1px solid rgba(183,243,74,.2); border-radius:14px; background:rgba(183,243,74,.07); color:var(--green); margin-bottom:23px; }
.feature-icon svg { width:23px; height:23px; }
h3 { font-family:var(--font-heading); margin:0 0 9px; font-size:1.08rem; letter-spacing:-.02em; font-weight:600; }
.feature p { color:var(--muted); font-size:.91rem; margin:0; }

/* How it works */
.workflow { display:grid; grid-template-columns:.85fr 1.15fr; align-items:center; gap:60px; }
.workflow-copy p { color:var(--muted); }
.steps { margin-top:27px; display:grid; gap:19px; }
.step { display:grid; grid-template-columns:37px 1fr; gap:13px; align-items:start; }
.step-num { width:35px; height:35px; display:grid; place-items:center; border-radius:11px; color:var(--green); background:rgba(183,243,74,.09); border:1px solid rgba(183,243,74,.19); font-family:var(--font-heading); font-weight:700; font-size:.8rem; }
.step b { display:block; margin:1px 0 3px; font-family:var(--font-heading); font-weight:600; }
.step p { margin:0; font-size:.88rem; color:var(--muted); }
.diagram { border:1px solid var(--line); background:rgba(14,22,40,.8); border-radius:24px; padding:25px; }
.diagram-node { display:flex; align-items:center; gap:14px; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.025); padding:15px 17px; }
.diagram-node.highlight { border-color:rgba(183,243,74,.35); background:rgba(183,243,74,.055); }
.node-icon { flex:0 0 38px; height:38px; display:grid; place-items:center; border-radius:12px; color:var(--green); background:rgba(183,243,74,.09); }
.node-icon svg { width:20px; height:20px; }
.diagram-node b { display:block; font-family:var(--font-heading); font-size:.9rem; font-weight:600; }
.diagram-node small { color:var(--muted); font-size:.77rem; }
.connector { height:26px; width:1px; background:linear-gradient(var(--green-dark),rgba(183,243,74,.08)); margin-left:34px; position:relative; }
.connector:after { content:""; position:absolute; bottom:0; left:-4px; width:7px; height:7px; border-right:1px solid var(--green); border-bottom:1px solid var(--green); transform:rotate(45deg); }

/* Opcode showcase */
.opcode-showcase { display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-top:40px; align-items:start; }
.opcode-left { display:grid; gap:0; }
.opcode-step { display:flex; align-items:center; gap:16px; padding:18px 20px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(145deg,rgba(20,31,54,.82),rgba(12,19,35,.9)); }
.opcode-step.highlight { border-color:rgba(183,243,74,.4); background:linear-gradient(145deg,rgba(25,40,60,.9),rgba(14,24,40,.95)); }
.opcode-num { flex:0 0 38px; height:38px; display:grid; place-items:center; border-radius:11px; color:var(--green); background:rgba(183,243,74,.09); border:1px solid rgba(183,243,74,.19); font-family:var(--font-heading); font-weight:700; font-size:.9rem; }
.opcode-step b { display:block; font-family:var(--font-heading); font-weight:600; font-size:1rem; margin-bottom:2px; }
.opcode-step p { margin:0; font-size:.85rem; color:var(--muted); }
.opcode-arrow { height:22px; width:2px; background:linear-gradient(var(--green-dark),rgba(183,243,74,.1)); margin-left:38px; }
.opcode-card { border:1px solid rgba(183,243,74,.3); border-radius:var(--radius); background:linear-gradient(145deg,rgba(20,31,54,.85),rgba(10,17,32,.95)); padding:28px; }
.opcode-card-head { font-family:var(--font-heading); font-weight:700; font-size:1.05rem; margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.opcode-row { display:flex; align-items:center; gap:10px; padding:8px 0; font-size:.9rem; }
.opcode-row svg { width:18px; flex-shrink:0; }
.opcode-row.bad { color:#f87171; }
.opcode-row.bad svg { color:#f87171; }
.opcode-row.good { color:#d5deee; }
.opcode-row.good svg { color:var(--green); }

/* License section */
.license { border:1px solid rgba(154,140,255,.25); border-radius:26px; padding:36px; background:radial-gradient(ellipse at 100% 0,rgba(154,140,255,.12),transparent 45%),linear-gradient(140deg,#121b31,#0c1324); display:grid; grid-template-columns:1fr .8fr; gap:40px; align-items:center; }
.license h2 { font-size:clamp(2rem,3.5vw,2.8rem); }
.license p { color:var(--muted); }
.license-list { display:grid; gap:13px; }
.license-row { display:flex; gap:10px; align-items:center; font-size:.91rem; color:#dbe4f4; }
.license-row svg { color:var(--green); width:18px; flex-shrink:0; }
.callout { margin-top:20px; padding:13px 15px; border-left:3px solid var(--violet); background:rgba(154,140,255,.07); color:#c5c6df; font-size:.82rem; border-radius:0 10px 10px 0; }

/* CTA */
.cta { text-align:center; padding:76px 25px; border:1px solid rgba(183,243,74,.2); border-radius:28px; background:radial-gradient(ellipse at 50% 100%,rgba(183,243,74,.09),transparent 55%),rgba(17,26,45,.7); }
.cta p { max-width:600px; margin:0 auto 25px; color:var(--muted); }
.cta-actions { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }

/* Footer */
.footer { border-top:1px solid var(--line); padding:27px 0; color:#8492ab; font-size:.8rem; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.footer-links { display:flex; gap:18px; }
.footer a:hover { color:var(--green); }

/* Responsive */
@media (max-width: 900px) {
  .hero { grid-template-columns:1fr; gap:42px; padding-top:55px; }
  .hero-copy { max-width:760px; }
  .visual { max-width:680px; width:100%; margin:0 auto; }
  .trust-inner { flex-wrap:wrap; justify-content:center; }
  .trust-label { width:100%; text-align:center; }
  .workflow { grid-template-columns:1fr; gap:35px; }
  .license { grid-template-columns:1fr; gap:25px; }
  .floating-chip { right:10px; }
  .opcode-showcase { grid-template-columns:1fr; }
}
@media (max-width: 680px) {
  .wrap { width:min(var(--max), calc(100% - 28px)); }
  .nav { padding:17px 0; }
  .navlinks { display:none; }
  .nav .button { padding:10px 12px; font-size:.82rem; }
  h1 { font-size:clamp(2.8rem,14vw,4.5rem); }
  .hero { padding:54px 0 64px; }
  .hero p { font-size:1rem; }
  .terminal-body { padding:18px 13px; font-size:.72rem; }
  .floating-chip { position:relative; bottom:auto; right:auto; margin:14px 0 0 auto; width:max-content; max-width:100%; }
  .trust-inner { gap:15px 20px; }
  .trust-item { font-size:.77rem; }
  section { padding:70px 0; }
  .grid { grid-template-columns:1fr; }
  .feature { min-height:unset; }
  .diagram { padding:15px; }
  .license { padding:25px 20px; }
  .cta { padding:53px 19px; }
  .footer-inner { align-items:flex-start; flex-direction:column; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *, *::before, *::after { transition:none !important; } }