:root{
  --bg:#030711;
  --card:#0d1220;
  --text:#e8efff;
  --muted:#9fb3d4;
  --accent:#71f3c7;
  --accent-2:#6ab1ff;
  --ring:#ffffff33;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background: radial-gradient(1200px 800px at 70% 10%, #183a5a 0%, transparent 60%),
              radial-gradient(900px 600px at 30% 30%, #123a2a 0%, transparent 60%),
              linear-gradient(160deg, #02050b 0%, #030711 60%, #030711 100%);
  color:var(--text);
}

/* Header & footer */
.site-header, .site-footer{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; max-width:1080px; margin:0 auto;
}

.logo{display:flex; align-items:center; gap:10px; font-weight:700}
.logo-mark{
  display:inline-grid; place-items:center;
  width:34px; height:34px; border-radius:8px;
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
  color:#04111a; font-weight:800;
}
.logo-text{letter-spacing:0.2px}
.logo-region{opacity:.8; font-weight:600; margin-left:6px}

/* Lang switch */
.lang-switch{display:flex; gap:6px}
.lang-btn{
  background:#0b1527; color:var(--text); border:1px solid #203252; border-radius:8px;
  padding:8px 10px; font-weight:600; cursor:pointer;
}
.lang-btn.active{outline:2px solid var(--ring)}

/* Hero */
.hero{
  display:grid; place-items:center;
  min-height:calc(100dvh - 140px); padding:24px;
}
.hero-card{
  width:100%; max-width:720px; background:color-mix(in oklab, var(--card), transparent 15%);
  border:1px solid #1b2742; border-radius:20px; padding:28px 24px; backdrop-filter: blur(6px);
  box-shadow: 0 8px 40px #00000055, inset 0 1px 0 #ffffff07;
}
.wip{
  display:inline-block; font-weight:800; letter-spacing:.2px;
  background:#1b2a45; border:1px solid #2a3c63; color:#cfe3ff;
  padding:6px 10px; border-radius:999px; margin-bottom:8px;
}

h1{margin:6px 0 8px; font-size: clamp(26px, 3.6vw, 40px);}
.subtitle{margin:0 0 18px; color:var(--muted)}

/* Buttons */
.cta-row{display:flex; gap:10px; flex-wrap:wrap; margin:8px 0 8px}
.btn{
  appearance:none; border:1px solid #28426b; background:#0b1527; color:var(--text);
  padding:12px 16px; border-radius:10px; font-weight:800; text-decoration:none; display:inline-block;
}
.btn.primary{
  background:linear-gradient(140deg, var(--accent), var(--accent-2));
  color:#04111a; border:none;
}
.btn.ghost:hover{border-color:#3a5f98}

/* Bullets */
.bullets{margin:16px 0 0; padding-left:18px; line-height:1.7}

/* Signup section */
.section{padding:30px 16px}
.section-inner{
  max-width:720px; margin:0 auto;
  background:color-mix(in oklab, var(--card), transparent 10%);
  border:1px solid #1b2742; border-radius:18px; padding:24px
}
.signup{display:flex; flex-wrap:wrap; gap:10px; margin:12px 0 8px}
.signup label{width:100%; font-size:14px; color:#cbd8f2}
.signup input{
  flex:1 1 260px; min-width:0; background:#0b1527; color:var(--text);
  border:1px solid #2b3b60; border-radius:10px; padding:12px 14px; outline:none;
}
.signup input:focus{border-color:#4a6dd1; box-shadow:0 0 0 3px #4a6dd12a}
.small{font-size:12.5px; color:#c2cfe9; margin:8px 0 0}

/* Footer */
.site-footer .fineprint{font-size:13px; color:#c2cfe9; display:flex; gap:8px; align-items:center}
.site-footer a{color:#d7e7ff; text-decoration:underline}

@media (max-width:520px){
  .site-header, .site-footer{padding:14px 14px}
}

.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px}

.toast{
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  background: #0f1a2e;
  color: #e8efff;
  border: 1px solid #1b2742;
  border-radius: 10px;
  padding: 12px 16px;
  box-shadow: 0 10px 30px #0008, inset 0 1px 0 #ffffff14;
  font-weight: 700;
  z-index: 9999;
}
.toast.show{ animation: toastIn 150ms ease-out, toastOut 200ms ease-in 4.2s forwards }
@keyframes toastIn{ from{opacity:0; transform:translateX(-50%) translateY(8px)} to{opacity:1; transform:translateX(-50%) translateY(0)} }
@keyframes toastOut{ to{opacity:0; transform:translateX(-50%) translateY(8px)} }