:root {
  --bg-0: #101318;
  --bg-1: #151d28;
  --bg-2: #1d2836;
  --panel: rgba(18, 27, 38, 0.78);
  --text: #eaf4ff;
  --muted: #a4bfdc;
  --accent: #49c2ff;
  --accent-2: #1c88d9;
  --border: rgba(73, 194, 255, 0.48);
  --glow: 0 0 14px rgba(73, 194, 255, 0.48), 0 0 28px rgba(73, 194, 255, 0.22);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body {
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  color: var(--text);
  line-height: 1.5;
  background:
    radial-gradient(circle at 15% 15%, rgba(73, 194, 255, 0.12), transparent 40%),
    radial-gradient(circle at 82% 10%, rgba(28, 136, 217, 0.16), transparent 36%),
    radial-gradient(circle at 48% 94%, rgba(73, 194, 255, 0.09), transparent 38%),
    linear-gradient(160deg, var(--bg-0) 0%, var(--bg-1) 48%, var(--bg-2) 100%);
}
.page-wrap {
  min-height: 100vh;
  width: min(1050px, 93vw);
  margin: 0 auto;
  padding: 2.2rem 0 2.9rem;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 1.35rem;
}
.brand { display: flex; align-items: center; gap: 0.95rem; animation: rise-in 620ms ease-out both; }
.brand img { width: 54px; height: 54px; border-radius: 11px; border: 1px solid var(--border); box-shadow: var(--glow); object-fit: cover; }
.brand h1 { margin: 0; letter-spacing: 0.02em; font-size: clamp(1.35rem, 2.7vw, 2rem); font-family: "Sora", "Segoe UI", sans-serif; font-weight: 700; }
.brand p { margin: 0; color: var(--muted); font-size: 0.93rem; }
.tabs { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.42rem; border: 1px solid rgba(73, 194, 255, 0.24); border-radius: 999px; background: rgba(16, 22, 29, 0.68); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03); animation: rise-in 700ms ease-out both; }
.tab { text-decoration: none; color: var(--text); padding: 0.56rem 1rem; border-radius: 999px; border: 1px solid transparent; font-weight: 700; transition: transform 180ms ease, box-shadow 200ms ease, border-color 200ms ease, background 200ms ease; }
.tab:hover, .tab:focus-visible { border-color: var(--border); box-shadow: var(--glow); transform: translateY(-1px); outline: none; }
.tab.active { background: linear-gradient(180deg, rgba(73, 194, 255, 0.2), rgba(73, 194, 255, 0.08)); border-color: var(--border); box-shadow: var(--glow); }
.card { background: var(--panel); border: 1px solid rgba(73, 194, 255, 0.2); border-radius: 22px; padding: clamp(1.2rem, 2.3vw, 2rem); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3); animation: rise-in 840ms ease-out both; }
.hero-title { margin: 0 0 0.52rem; font-size: clamp(1.7rem, 4vw, 3rem); font-family: "Sora", "Segoe UI", sans-serif; font-weight: 700; line-height: 1.1; }
.hero-sub { margin: 0; color: var(--muted); max-width: 66ch; }
.feature-bullets { margin: 0.85rem 0 0; padding-left: 1.2rem; color: var(--text); }
.feature-bullets li { margin: 0.3rem 0; }
.feature-bullets strong { color: #d9f0ff; }
.stack { margin-top: 1rem; display: grid; gap: 0.9rem; }
.group { border: 1px solid rgba(73, 194, 255, 0.24); border-radius: 14px; background: rgba(12, 18, 24, 0.48); padding: 0.8rem 0.92rem; }
.group h3 { margin: 0; font-family: "Sora", "Segoe UI", sans-serif; font-size: 1rem; }
.group p { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.94rem; }
form { margin-top: 1rem; display: grid; gap: 0.84rem; max-width: 700px; }
label { display: grid; gap: 0.35rem; font-weight: 600; }
input, textarea { width: 100%; border: 1px solid rgba(73, 194, 255, 0.3); border-radius: 12px; background: rgba(12, 18, 26, 0.74); color: var(--text); font: inherit; padding: 0.68rem 0.8rem; transition: border-color 180ms ease, box-shadow 180ms ease; }
textarea { min-height: 130px; resize: vertical; }
input:focus, textarea:focus { border-color: var(--accent); box-shadow: var(--glow); outline: none; }
button { width: fit-content; border: 1px solid var(--border); border-radius: 999px; background: linear-gradient(180deg, rgba(73, 194, 255, 0.24), rgba(73, 194, 255, 0.1)); color: var(--text); font: inherit; font-weight: 700; padding: 0.56rem 1rem; cursor: pointer; transition: transform 180ms ease, box-shadow 180ms ease; }
button:hover, button:focus-visible { transform: translateY(-1px); box-shadow: var(--glow); outline: none; }
footer { color: var(--muted); font-size: 0.87rem; text-align: center; padding-top: 0.5rem; }
.policy-copy { max-width: 780px; }
.policy-copy h3 { margin: 1.2rem 0 0.35rem; font-family: "Sora", "Segoe UI", sans-serif; font-size: 1.08rem; }
.policy-copy p { margin: 0.5rem 0; color: var(--text); }
.policy-copy ul { margin: 0.45rem 0 0.85rem 1.1rem; padding: 0; }
.policy-copy li { margin: 0.22rem 0; color: var(--text); }
@keyframes rise-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 680px) { .tabs { border-radius: 16px; } .tab { flex: 1 1 auto; text-align: center; } }