:root{
  --bg0:#020617;
  --bg1:#0b1220;
  --card:rgba(15,23,42,.72);
  --border:rgba(148,163,184,.28);
  --text:#e2e8f0;
  --muted:rgba(148,163,184,.9);
  --accent:#60a5fa;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(59,130,246,.22), transparent 60%),
    radial-gradient(900px 500px at 80% 10%, rgba(148,163,184,.18), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:20px}
.nav{
  position:sticky;top:0;z-index:20;
  padding:14px 0;
  backdrop-filter:blur(14px);
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 12px;border:1px solid var(--border);border-radius:999px;
  background:rgba(255,255,255,.05);
}
.brand{display:flex;align-items:center;gap:10px}
.brand img{width:28px;height:28px;border-radius:8px}
.brand span{font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:12px}
.pill{
  padding:7px 10px;border-radius:999px;border:1px solid var(--border);
  background:rgba(15,23,42,.55);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  white-space:nowrap;color:#dbeafe;
}
.nav-links{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 14px;border-radius:12px;border:1px solid var(--border);
  background:rgba(15,23,42,.65);color:var(--text);
  cursor:pointer;transition:transform .22s cubic-bezier(.22,1,.36,1), background-color .25s ease, border-color .25s ease, opacity .25s ease;
}
.btn:hover{border-color:rgba(96,165,250,.55)}
.btn:active{transform:scale(.985)}
.btn-primary{
  background:linear-gradient(180deg, rgba(96,165,250,.75), rgba(37,99,235,.55));
  border-color:rgba(96,165,250,.45);
}
.grid{display:grid;gap:14px}
.hero{padding:26px 0 8px}
.hero h1{margin:0 0 10px;font-size:40px;line-height:1.05}
.hero p{margin:0;color:var(--muted);max-width:780px;line-height:1.6}
.cards{display:grid;grid-template-columns:repeat(12,1fr);gap:12px;margin-top:16px}
.card{
  grid-column:span 6;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-radius:16px;padding:14px;
}
.card h3{margin:0 0 8px;font-size:15px}
.card p{margin:0;color:var(--muted);line-height:1.55;font-size:13px}
.section{padding:18px 0}
.two{display:grid;grid-template-columns:1.1fr .9fr;gap:12px}
.panel{
  border:1px solid var(--border);
  background:rgba(15,23,42,.6);
  border-radius:16px;padding:14px;
}
.panel h2{margin:0 0 10px;font-size:18px}
.field{display:grid;gap:8px;margin-top:10px}
.input{
  width:100%;
  padding:11px 12px;border-radius:12px;border:1px solid rgba(148,163,184,.32);
  background:#0b1220;color:var(--text);
}
.hint{font-size:12px;color:rgba(148,163,184,.95);line-height:1.45}
.footer{padding:20px 0;color:rgba(148,163,184,.8);font-size:12px}
.tg-fab{
  position:fixed;right:16px;bottom:16px;z-index:50;
  width:46px;height:46px;border-radius:999px;
  background:rgba(15,23,42,.85);
  border:1px solid rgba(96,165,250,.55);
  box-shadow:0 14px 38px rgba(0,0,0,.35);
  display:flex;align-items:center;justify-content:center;
}
.tg-fab span{
  width:30px;height:30px;border-radius:999px;background:#60a5fa;
  display:flex;align-items:center;justify-content:center;
  color:#0b1220;font-weight:800;font-size:14px;
}
@media (max-width: 880px){
  .two{grid-template-columns:1fr}
  .card{grid-column:span 12}
  .hero h1{font-size:32px}
  .nav-inner{border-radius:18px}
}