:root{
  --bg:#f7f8fb;
  --surface:#ffffff;
  --text:#172033;
  --muted:#647084;
  --line:#e6eaf0;
  --primary:#5368f5;
  --primary-dark:#3141cf;
  --teal:#12a594;
  --amber:#ffb020;
  --radius:22px;
  --shadow:0 18px 50px rgba(23,32,51,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background:
    radial-gradient(circle at 15% 5%, rgba(83,104,245,.10), transparent 30%),
    radial-gradient(circle at 95% 10%, rgba(18,165,148,.12), transparent 28%),
    var(--bg);
  color:var(--text);
  line-height:1.62;
}
a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1080px; margin:0 auto; padding:0 22px}
.nav{
  position:sticky; top:0; z-index:10;
  background:rgba(247,248,251,.86);
  backdrop-filter: blur(16px);
  border-bottom:1px solid rgba(230,234,240,.8);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:72px}
.logo{display:flex; align-items:center; gap:12px; font-weight:800; font-size:21px; letter-spacing:-.4px}
.logo-mark{
  width:40px; height:40px; border-radius:14px;
  background:linear-gradient(135deg,var(--primary),var(--teal));
  display:grid; place-items:center; color:white; font-weight:900;
  box-shadow:0 10px 30px rgba(83,104,245,.25);
}
.nav-links{display:flex; gap:18px; align-items:center; font-size:14px}
.nav-links a{color:var(--muted); font-weight:650}
.hero{padding:80px 0 58px}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:34px; align-items:center}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px; background:#eef1ff; color:var(--primary-dark);
  font-weight:750; font-size:13px; margin-bottom:18px
}
h1{font-size:56px; line-height:1.04; letter-spacing:-2.4px; margin:0 0 18px}
.lead{font-size:19px; color:var(--muted); max-width:650px; margin:0 0 28px}
.actions{display:flex; gap:12px; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 18px; border-radius:15px; font-weight:800;
  border:1px solid var(--line);
}
.btn.primary{background:var(--primary); color:white; border-color:var(--primary); box-shadow:0 16px 35px rgba(83,104,245,.25)}
.btn.secondary{background:white; color:var(--text)}
.phone-card{
  background:var(--surface); border:1px solid var(--line); border-radius:34px; padding:22px;
  box-shadow:var(--shadow); max-width:390px; margin-left:auto
}
.app-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px}
.avatar{width:44px;height:44px;border-radius:16px;background:#eef1ff;display:grid;place-items:center;color:var(--primary);font-weight:900}
.progress{
  height:12px; background:#edf1f6; border-radius:999px; overflow:hidden; margin:10px 0 14px;
}
.progress span{display:block;height:100%;width:68%;background:linear-gradient(90deg,var(--primary),var(--teal));border-radius:999px}
.goal-card{
  display:flex; gap:14px; align-items:flex-start; background:#fbfcff; border:1px solid #edf1f6;
  border-radius:20px; padding:15px; margin:12px 0
}
.icon{
  width:44px;height:44px;border-radius:15px; display:grid;place-items:center;font-size:22px; flex:0 0 auto
}
.icon.health{background:#e8fbf6}
.icon.learn{background:#eef1ff}
.icon.finance{background:#fff6df}
.goal-card h3{margin:0;font-size:15px}
.goal-card p{margin:4px 0 0;font-size:13px;color:var(--muted);line-height:1.45}
.section{padding:34px 0}
.section h2{font-size:34px; letter-spacing:-1px; margin:0 0 12px}
.section .sub{color:var(--muted); margin:0 0 24px}
.cards{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px;
  box-shadow:0 10px 35px rgba(23,32,51,.05)
}
.card h3{margin:12px 0 8px;font-size:19px}
.card p{margin:0;color:var(--muted)}
.legal{
  background:var(--surface); border:1px solid var(--line); border-radius:28px;
  padding:34px; box-shadow:var(--shadow); margin:38px 0
}
.legal h1{font-size:42px}
.legal h2{font-size:24px; margin-top:32px}
.legal h3{font-size:18px; margin-top:24px}
.legal p,.legal li{color:#3f4b5f}
.legal .note{
  background:#f4f6fb; border:1px solid var(--line); border-radius:18px; padding:16px; color:var(--muted)
}
.footer{padding:38px 0; color:var(--muted); font-size:14px}
.footer-inner{border-top:1px solid var(--line); padding-top:24px; display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap}
.footer a{color:var(--muted)}
.list-clean{padding-left:20px}
.kv{display:grid;grid-template-columns:180px 1fr;gap:12px;border-top:1px solid var(--line);padding:14px 0}
.form-card{max-width:760px}
.input, textarea{
  width:100%; border:1px solid var(--line); border-radius:14px; padding:13px 14px;
  font:inherit; background:#fff; color:var(--text)
}
textarea{min-height:120px; resize:vertical}
label{font-weight:750; display:block; margin:16px 0 7px}
.small{font-size:13px;color:var(--muted)}
@media(max-width:860px){
  .hero-grid,.cards{grid-template-columns:1fr}
  .phone-card{margin-left:0}
  h1{font-size:42px}
  .nav-inner{height:auto; padding:14px 0; align-items:flex-start; gap:12px; flex-direction:column}
  .nav-links{flex-wrap:wrap; gap:12px}
  .legal{padding:24px}
  .kv{grid-template-columns:1fr}
}