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

:root{
  --bg:#0a0d12;
  --bg-soft:#11161f;
  --panel:#141b26;
  --panel-hover:#1a2230;
  --border:#222c3a;
  --border-soft:#1a2230;
  --text:#e7ecf2;
  --muted:#8a97a8;
  --faint:#5a6675;
  --accent:#3ad6c5;
  --accent-soft:rgba(58,214,197,.12);
  --chrome-1:#ffffff;
  --chrome-2:#c4ccd6;
  --chrome-3:#7d8896;
  --radius:16px;
  --radius-sm:11px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(1100px 700px at 50% -10%, rgba(58,214,197,.08), transparent 60%),
    radial-gradient(900px 600px at 90% 110%, rgba(99,102,241,.07), transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:"Space Grotesk",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  line-height:1.6;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  display:flex;
  flex-direction:column;
}
a{color:inherit;text-decoration:none}

/* ---- top bar ---- */
header.bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px clamp(20px,5vw,56px);
  position:sticky;top:0;z-index:20;
  backdrop-filter:blur(10px);
  background:linear-gradient(to bottom, rgba(10,13,18,.86), rgba(10,13,18,.55));
  border-bottom:1px solid var(--border-soft);
}
.mark-sm{font-weight:700;font-size:20px;letter-spacing:.5px;
  background:linear-gradient(180deg,var(--chrome-1),var(--chrome-2) 55%,var(--chrome-3));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.mark-sm .a{color:var(--accent);-webkit-text-fill-color:var(--accent)}
nav.top{display:flex;gap:8px;align-items:center}
nav.top a{
  font-size:14px;color:var(--muted);padding:8px 14px;border-radius:9px;
  border:1px solid transparent;transition:.18s ease}
nav.top a:hover{color:var(--text);background:var(--panel);border-color:var(--border)}
nav.top a.here{color:var(--text);background:var(--panel);border-color:var(--border)}

/* ---- main / hero ---- */
main{flex:1;display:flex;flex-direction:column;align-items:center;
  padding:clamp(48px,9vw,96px) 20px 40px;text-align:center}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.5px;
  color:var(--accent);background:var(--accent-soft);
  border:1px solid rgba(58,214,197,.25);border-radius:100px;
  padding:6px 14px;margin-bottom:30px}
.badge .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 10px var(--accent)}
.wordmark{
  font-weight:700;line-height:.95;letter-spacing:-1px;
  font-size:clamp(56px,15vw,140px);
  background:linear-gradient(180deg,#ffffff 0%,#dfe5ec 38%,#9aa6b4 70%,#6c7787 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  cursor:pointer;user-select:none;transition:filter .3s ease,transform .3s ease;
  filter:drop-shadow(0 2px 30px rgba(58,214,197,.18))}
.wordmark:hover{filter:drop-shadow(0 2px 40px rgba(58,214,197,.4));transform:translateY(-2px)}
.tagline{color:var(--muted);font-size:clamp(15px,2.4vw,20px);
  max-width:560px;margin:24px auto 0}

/* ---- cards ---- */
.cards{
  display:grid;gap:18px;width:100%;max-width:980px;margin:64px auto 0;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));text-align:left}
.card{
  background:linear-gradient(180deg,var(--panel),var(--bg-soft));
  border:1px solid var(--border);border-radius:var(--radius);
  padding:26px;display:flex;flex-direction:column;gap:14px;
  transition:.22s ease;position:relative;overflow:hidden}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(420px 160px at 50% -40%,rgba(58,214,197,.14),transparent);
  opacity:0;transition:.22s ease}
.card:hover{transform:translateY(-4px);border-color:#33485c;
  box-shadow:0 18px 40px -20px rgba(0,0,0,.7)}
.card:hover::before{opacity:1}
.icon{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  background:var(--accent-soft);border:1px solid rgba(58,214,197,.22);
  color:var(--accent);flex:none}
.icon svg{width:22px;height:22px}
.card h3{font-size:19px;font-weight:600;letter-spacing:.2px}
.card p{color:var(--muted);font-size:14.5px;flex:1}
.card .go{display:inline-flex;align-items:center;gap:7px;font-size:14px;
  font-weight:500;color:var(--accent);font-family:"JetBrains Mono",monospace}
.card .go svg{width:15px;height:15px;transition:transform .2s ease}
.card:hover .go svg{transform:translate(3px,-3px)}

/* ---- content pages ---- */
.content{max-width:760px;width:100%;margin:0 auto;text-align:left}
.eyebrow{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:1px;
  text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.page-title{font-weight:700;font-size:clamp(30px,5vw,46px);letter-spacing:-.5px;
  line-height:1.1;margin-bottom:8px;
  background:linear-gradient(180deg,#ffffff,#aeb8c4);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.content p{color:var(--muted);font-size:16px;margin:0 0 16px}
.content p.lead{color:var(--faint);font-style:italic;font-size:15px;
  border-left:2px solid var(--border);padding-left:16px;margin:0 0 26px}
.content strong{color:var(--text);font-weight:500}
.content h2{font-weight:600;font-size:22px;color:var(--text);margin:30px 0 14px}

/* monospace proof / code block */
.proof{font-family:"JetBrains Mono",monospace;font-size:13.5px;line-height:1.95;
  background:#0c1118;border:1px solid var(--border-soft);border-radius:var(--radius-sm);
  padding:20px 22px;color:#c7d0db;overflow-x:auto;margin:8px 0 22px}
.proof .k{color:var(--accent)}
.proof .step{color:var(--faint)}
.conclusion{font-size:18px;color:var(--text);font-weight:500;margin-top:6px}
.conclusion span{color:var(--accent)}

/* framed media (screenshots, the frog) */
.framed{display:block;max-width:100%;height:auto;margin:0 auto 24px;
  border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--panel);padding:10px}
.media-center{text-align:center}

/* download / action buttons */
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin:10px 0 4px}
.btn{display:inline-flex;align-items:center;gap:9px;
  font-size:14px;font-weight:500;color:var(--text);
  background:linear-gradient(180deg,var(--panel),var(--bg-soft));
  border:1px solid var(--border);border-radius:11px;
  padding:12px 18px;transition:.18s ease}
.btn:hover{border-color:#33485c;transform:translateY(-2px);color:#fff}
.btn .ic{color:var(--accent);display:grid;place-items:center}
.btn .ic svg{width:17px;height:17px}
.btn.primary{background:linear-gradient(180deg,#1f6f66,#155a52);border-color:#2a8a7e}
.btn.primary .ic{color:#bff4ec}
.subhead{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:1px;
  text-transform:uppercase;color:var(--faint);margin:28px 0 12px}

/* back link */
.back{display:inline-flex;align-items:center;gap:8px;margin-top:40px;
  font-family:"JetBrains Mono",monospace;font-size:13px;color:var(--muted);
  transition:.18s ease}
.back:hover{color:var(--accent)}
.back svg{width:15px;height:15px}

/* 404 */
.big404{font-weight:700;font-size:clamp(80px,22vw,200px);line-height:1;
  letter-spacing:-2px;
  background:linear-gradient(180deg,#ffffff 0%,#9aa6b4 70%,#6c7787 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 30px rgba(58,214,197,.15))}

/* ---- footer ---- */
footer{
  margin-top:auto;padding:40px clamp(20px,5vw,56px);
  border-top:1px solid var(--border-soft);
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
  color:var(--faint);font-family:"JetBrains Mono",monospace;font-size:12.5px}
footer .rev{display:flex;align-items:center;gap:10px}
footer .picante{color:var(--bg);transition:.3s ease;cursor:pointer}
footer .picante:hover{color:var(--accent)}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto}
  .wordmark:hover,.btn:hover{transform:none}
}