:root{
  --teal:#2CD4C0; --cyan:#34BDF0; --gold:#E8BE72;
  --bg:#070B10; --bg2:#0D141C; --card:#111B25;
  --line:#1E2C39; --txt:#E8EEF4; --mut:#9DB0C0; --mut2:#6F8295;
  --grad:linear-gradient(120deg,var(--teal),var(--cyan));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.65; -webkit-font-smoothing:antialiased;
}
a{color:var(--cyan); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:880px; margin:0 auto; padding:0 24px}

/* Header */
header.nav{position:sticky; top:0; z-index:10; backdrop-filter:blur(12px);
  background:rgba(7,11,16,.72); border-bottom:1px solid var(--line)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; align-items:center; gap:11px; font-weight:700; font-size:19px; letter-spacing:-.02em}
.brand svg{width:30px; height:30px}
.brand b{font-weight:800; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.nav nav{display:flex; gap:22px; font-size:14.5px}
.nav nav a{color:var(--mut)}
@media(max-width:560px){.nav nav{display:none}}

/* Hero */
.hero{text-align:center; padding:86px 0 58px; position:relative; overflow:hidden}
.hero::before{content:""; position:absolute; inset:-40% 0 auto 0; height:520px;
  background:radial-gradient(60% 60% at 50% 0,rgba(52,189,240,.16),transparent 70%); pointer-events:none}
.hero .sym{width:88px; height:88px; margin-bottom:22px; filter:drop-shadow(0 8px 26px rgba(44,212,192,.28))}
.hero h1{font-size:clamp(33px,6vw,52px); line-height:1.08; letter-spacing:-.03em; margin:0 0 16px; font-weight:800}
.hero h1 .g{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero p.sub{font-size:clamp(16px,2.4vw,20px); color:var(--mut); max-width:620px; margin:0 auto 30px}
.badges{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.badge{display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:13px;
  border:1px solid var(--line); background:var(--card); color:var(--mut); font-size:14px; font-weight:600}
.badge small{color:var(--mut2); font-weight:500}

/* Sections */
section.block{padding:48px 0; border-top:1px solid var(--line)}
section.block h2{font-size:25px; letter-spacing:-.02em; margin:0 0 10px}
.lead{color:var(--mut); margin:0 0 28px; max-width:680px}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media(max-width:720px){.grid{grid-template-columns:1fr}}
.feat{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px}
.feat .ic{width:38px; height:38px; border-radius:10px; background:rgba(44,212,192,.12);
  display:flex; align-items:center; justify-content:center; margin-bottom:14px; font-size:20px}
.feat h3{margin:0 0 6px; font-size:16.5px}
.feat p{margin:0; color:var(--mut); font-size:14.5px}

.note{background:linear-gradient(180deg,rgba(232,190,114,.07),transparent);
  border:1px solid #3A3220; border-left:3px solid var(--gold); border-radius:12px;
  padding:18px 20px; color:var(--mut); font-size:14.5px}
.note b{color:var(--gold)}

/* Footer */
footer{border-top:1px solid var(--line); padding:40px 0 56px; color:var(--mut2); font-size:14px}
footer .wrap{display:flex; flex-wrap:wrap; gap:18px 36px; align-items:center; justify-content:space-between}
footer nav{display:flex; gap:22px; flex-wrap:wrap}
footer nav a{color:var(--mut)}

/* Legal pages */
.legal{padding:54px 0 70px}
.legal h1{font-size:34px; letter-spacing:-.02em; margin:0 0 6px}
.legal .upd{color:var(--mut2); font-size:14px; margin:0 0 34px}
.legal h2{font-size:20px; margin:36px 0 10px; letter-spacing:-.01em}
.legal h3{font-size:16px; margin:24px 0 6px; color:var(--teal)}
.legal p,.legal li{color:var(--mut); font-size:15.5px}
.legal ul{padding-left:22px}
.legal a{color:var(--cyan)}
.fill{background:rgba(232,190,114,.16); border-bottom:1px dashed var(--gold);
  color:var(--gold); padding:0 5px; border-radius:4px; font-size:.92em}
.back{display:inline-block; margin-bottom:26px; color:var(--mut); font-size:14px}
hr{border:none; border-top:1px solid var(--line); margin:36px 0}