:root {
  --bg: #F5F2EE; --surface: #FFFFFF; --surface2: #EDE8E1; --ink: #1D1B26; --label: #4F4A5A; --muted: #6B6773; --line: #E8E3DC;
  --lavender: #D9D4F5; --mint: #C7E6D4; --butter: #F6E3A1; --peach: #F8D3C0;
  --btn: #1D1B26; --btn-text: #FFFFFF;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15141B; --surface: #211F29; --surface2: #2B2934; --ink: #F2EFF7; --label: #CFCAD8; --muted: #A39EAD; --line: #34313E;
    --lavender: #3D3766; --mint: #23473A; --butter: #4E4320; --peach: #533A2F; --btn: #F2EFF7; --btn-text: #15141B;
  }
}
:root[data-theme="dark"] {
  --bg: #15141B; --surface: #211F29; --surface2: #2B2934; --ink: #F2EFF7; --label: #CFCAD8; --muted: #A39EAD; --line: #34313E;
  --lavender: #3D3766; --mint: #23473A; --butter: #4E4320; --peach: #533A2F; --btn: #F2EFF7; --btn-text: #15141B;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 16px; line-height: 1.6; }
a { color: inherit; }
img { max-width: 100%; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
header.top { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
header.top .wrap { display: flex; align-items: center; gap: 14px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; text-decoration: none; margin-right: auto; }
.logo { width: 38px; height: 38px; border-radius: 12px; background: #1D1B26; color: #fff; display: grid; place-items: center; font-weight: 800; flex: none; }
nav.links { display: flex; gap: 4px; flex-wrap: wrap; }
nav.links a { text-decoration: none; font-weight: 700; color: var(--label); padding: 8px 12px; border-radius: 999px; }
nav.links a:hover, nav.links a[aria-current="page"] { background: var(--surface2); color: var(--ink); }
.btn { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 24px; border-radius: 999px; background: var(--btn); color: var(--btn-text); font-weight: 800; text-decoration: none; border: 0; }
.btn.soft { background: var(--surface); color: var(--ink); border: 1.5px solid var(--line); }
h1, h2, h3 { letter-spacing: -0.6px; line-height: 1.15; margin: 0; }
h1 { font-size: clamp(36px, 6vw, 60px); font-weight: 500; }
h1 b, h2 b { font-weight: 800; }
h2 { font-size: clamp(26px, 4vw, 38px); font-weight: 500; }
h3 { font-size: 19px; font-weight: 800; letter-spacing: -0.2px; }
.lead { font-size: clamp(17px, 2.2vw, 20px); color: var(--label); font-weight: 500; max-width: 640px; margin: 18px 0 28px; }
.muted { color: var(--muted); }
.hero { padding: 64px 0 40px; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 40px; align-items: center; }
.hero .actions { display: flex; gap: 12px; flex-wrap: wrap; }
.soon { display: inline-block; margin-top: 14px; font-size: 14px; font-weight: 700; color: var(--muted); }
.phone { justify-self: center; width: min(300px, 100%); aspect-ratio: 9 / 18.5; border-radius: 42px; background: #1D1B26; padding: 12px; box-shadow: 0 30px 60px rgba(29, 27, 38, 0.18); }
.screen { height: 100%; border-radius: 32px; background: #F5F2EE; padding: 22px 16px; display: flex; flex-direction: column; gap: 10px; color: #1D1B26; overflow: hidden; }
.screen .t { font-size: 22px; font-weight: 500; letter-spacing: -0.5px; line-height: 1.15; }
.screen .t b { font-weight: 800; }
.mini { border-radius: 18px; padding: 12px 14px; font-size: 13px; font-weight: 700; line-height: 1.35; }
.mini small { display: block; font-weight: 600; opacity: 0.7; margin-top: 2px; }
.mini.lav { background: #D9D4F5; } .mini.mint { background: #C7E6D4; } .mini.butter { background: #F6E3A1; } .mini.white { background: #fff; } .mini.peach { background: #F8D3C0; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
section { padding: 48px 0; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin-top: 28px; }
.tile { border-radius: 28px; padding: 24px; background: var(--surface); }
.tile.lav { background: var(--lavender); } .tile.mint { background: var(--mint); } .tile.butter { background: var(--butter); } .tile.peach { background: var(--peach); }
.tile p { margin: 8px 0 0; color: var(--label); font-weight: 500; }
.icon { width: 44px; height: 44px; border-radius: 14px; background: var(--surface); display: grid; place-items: center; margin-bottom: 14px; }
.tile:not(.lav):not(.mint):not(.butter):not(.peach) .icon { background: var(--surface2); }
.icon svg { width: 22px; height: 22px; stroke: var(--ink); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.steps { counter-reset: s; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-top: 28px; padding: 0; list-style: none; }
.steps li { background: var(--surface); border-radius: 24px; padding: 20px; font-weight: 600; color: var(--label); }
.steps li::before { counter-increment: s; content: counter(s); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 17px; background: var(--btn); color: var(--btn-text); font-weight: 800; margin-bottom: 10px; }
.steps li b { color: var(--ink); display: block; }
.band { background: var(--surface); border-radius: 32px; padding: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.band ul { margin: 12px 0 0; padding-left: 20px; color: var(--label); font-weight: 500; }
.doc { max-width: 780px; padding: 40px 0 64px; }
.doc h1 { font-size: clamp(32px, 5vw, 46px); }
.doc h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.3px; margin: 32px 0 8px; }
.doc p, .doc li { color: var(--ink); }
.doc .card { background: var(--surface); border-radius: 24px; padding: 18px 22px; margin: 18px 0; }
.doc table { width: 100%; border-collapse: collapse; }
.doc td { padding: 10px 8px; border-top: 1px solid var(--line); vertical-align: top; }
.doc td:first-child { width: 32%; font-weight: 800; }
footer { border-top: 1px solid var(--line); padding: 32px 0 48px; color: var(--muted); font-size: 14.5px; }
footer .wrap { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; }
footer a { color: var(--label); font-weight: 700; }
footer .fl { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: flex-end; align-content: start; }
@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; padding-top: 36px; }
  .phone { width: min(260px, 80%); }
  .band { grid-template-columns: 1fr; padding: 24px; }
  footer .wrap { grid-template-columns: 1fr; }
  footer .fl { justify-content: flex-start; }
  nav.links a { padding: 8px 8px; font-size: 14.5px; }
}
@media (max-width: 520px) {
  header.top .wrap { flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
  nav.links { width: 100%; }
}