:root{
  --bg:#08111f;
  --surface:#0e1a2b;
  --surface-2:#13233a;
  --text:#e8eef8;
  --muted:#aab7ca;
  --line:rgba(255,255,255,.08);
  --brand:#4f8cff;
  --brand-2:#64d6ff;
  --success:#18c37e;
  --max:1180px;
  --shadow:0 20px 60px rgba(0,0,0,.28);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
   radial-gradient(circle at top right, rgba(79,140,255,.16), transparent 32%),
   radial-gradient(circle at left 20%, rgba(100,214,255,.10), transparent 25%),
   linear-gradient(180deg,#07101c 0%, #091423 100%);
  color:var(--text);
  line-height:1.6;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(100% - 2rem, var(--max)); margin-inline:auto}
.topbar{
  position:sticky; top:0; z-index:20;
  backdrop-filter: blur(14px);
  background:rgba(8,17,31,.72);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; min-height:78px;
}
.brand{display:flex; align-items:center; gap:.85rem; font-weight:800; letter-spacing:.02em}
.brand-mark{
  width:42px; height:42px; border-radius:14px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow:0 10px 25px rgba(79,140,255,.35);
  display:grid; place-items:center; color:white; font-weight:900;
}
.nav-links{display:flex; gap:1rem; align-items:center; flex-wrap:wrap}
.nav-links a{
  padding:.7rem .85rem; color:var(--muted); border-radius:999px; transition:.2s ease;
}
.nav-links a:hover, .nav-links a.active{background:rgba(255,255,255,.06); color:var(--text)}
.login-btn,.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.85rem 1.2rem; border-radius:14px; font-weight:700; border:1px solid transparent;
  transition:.2s ease; cursor:pointer;
}
.login-btn,.btn-primary{
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#05101e;
  box-shadow:0 12px 30px rgba(79,140,255,.28);
}
.btn-secondary{border-color:var(--line); background:rgba(255,255,255,.03); color:var(--text)}
.login-btn:hover,.btn:hover{transform:translateY(-1px)}
.mobile-toggle{display:none}

.hero{padding:78px 0 42px}
.hero-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:2rem; align-items:center}
.kicker{
  display:inline-flex; align-items:center; gap:.55rem; padding:.42rem .8rem; border-radius:999px;
  background:rgba(100,214,255,.09); color:#b7ecff; border:1px solid rgba(100,214,255,.15); font-size:.92rem;
}
h1,h2,h3{line-height:1.1; margin:0 0 .8rem}
h1{font-size:clamp(2.2rem,5vw,4.6rem); letter-spacing:-.03em}
h2{font-size:clamp(1.8rem,3vw,3rem); letter-spacing:-.02em}
h3{font-size:1.15rem}
.lead{font-size:1.08rem; color:var(--muted); max-width:62ch}
.hero-card,.card{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  border-radius:28px;
}
.hero-card{padding:1.2rem}
.stats{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem}
.stat{
  padding:1.1rem; border-radius:22px; background:rgba(255,255,255,.03); border:1px solid var(--line)
}
.stat strong{font-size:1.5rem; display:block}
.section{padding:42px 0}
.section-tight{padding-top:18px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem}
.card{padding:1.35rem}
.card p, .muted{color:var(--muted)}
.icon{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  background:rgba(79,140,255,.14); color:#d8ebff; margin-bottom:.9rem; border:1px solid rgba(79,140,255,.18)
}
.page-hero{padding:54px 0 24px}
.page-hero p{max-width:75ch;color:var(--muted)}
.band{
  margin-top:1rem; padding:1rem; border:1px solid var(--line); border-radius:22px;
  background:linear-gradient(180deg, rgba(79,140,255,.07), rgba(255,255,255,.02));
}
.list{padding-left:1.1rem; color:var(--muted)}
.list li{margin:.4rem 0}
.footer{
  padding:36px 0 56px; border-top:1px solid var(--line); margin-top:40px;
  background:rgba(255,255,255,.02)
}
.footer-grid{display:grid; grid-template-columns:1.1fr .7fr .7fr; gap:1rem}
.footnote{
  margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line); color:var(--muted); font-size:.95rem
}
.contact-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:1.2rem}
.contact-item{padding:1rem 0; border-bottom:1px solid var(--line)}
.form-row{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem}
label{display:block; font-weight:600; margin-bottom:.45rem}
input,textarea{
  width:100%; padding:1rem 1rem; border-radius:16px; border:1px solid var(--line);
  background:#091322; color:var(--text); outline:none
}
textarea{min-height:170px; resize:vertical}
input:focus,textarea:focus{border-color:rgba(100,214,255,.35); box-shadow:0 0 0 4px rgba(100,214,255,.08)}
.notice{
  padding:1rem 1.1rem; border-radius:16px; border:1px solid rgba(24,195,126,.25);
  background:rgba(24,195,126,.1); color:#ceffe9; margin-bottom:1rem
}
.warning{
  padding:1rem 1.1rem; border-radius:16px; border:1px solid rgba(255,174,0,.25);
  background:rgba(255,174,0,.08); color:#ffe8b0; margin-bottom:1rem
}
small.help{display:block;color:var(--muted);margin-top:.5rem}
.cta{
  display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.25rem
}
.badge{
  display:inline-flex; padding:.5rem .75rem; border-radius:999px; border:1px solid var(--line); color:var(--muted)
}
.table-like{display:grid; gap:.8rem}
.table-like .row{
  display:grid; grid-template-columns:1fr auto; gap:1rem;
  padding:1rem; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.03)
}
@media (max-width: 960px){
  .hero-grid,.grid-3,.grid-2,.contact-grid,.footer-grid,.form-row{grid-template-columns:1fr}
  .nav{align-items:flex-start; padding:1rem 0}
  .mobile-toggle{display:block}
}