:root {
  --brand: #6670FF; --brand-600: #4F57E6; --brand-400: #8A92FF;
  --aurora-mid: #A78BFA; --aurora-end: #5EE7DF;
  --bg: #F7F7FB; --surface: #FFFFFF;
  --text: #0B0B2A; --text-2: rgba(11, 11, 42, .68); --text-3: rgba(11, 11, 42, .62);
  --stroke: rgba(11, 11, 42, .08); --link: #4F57E6;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
  --rounded: ui-rounded, "SF Pro Rounded", var(--font);
}
* { box-sizing: border-box; margin: 0; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--text); font: 400 17px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
.nav { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; max-width: 1040px; margin: 0 auto; padding: 20px 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 17px; }
.brand .symbol { width: 28px; height: 28px; }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 28px; border-radius: 999px; background: linear-gradient(180deg, var(--brand), var(--brand-600)); color: #fff; font-weight: 600; font-size: 17px; }
.btn:hover { text-decoration: none; opacity: .92; }
.btn.small { height: 36px; padding: 0 16px; font-size: 14px; }
.hero { position: relative; height: 100svh; min-height: 700px; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(96px, 15svh, 150px) 24px 0; }
.orb { position: absolute; left: 50%; top: 22%; width: 720px; height: 420px; max-width: 140vw; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(102,112,255,.16), rgba(167,139,250,.08) 50%, rgba(94,231,223,0) 100%); animation: breathe 10s ease-in-out infinite; }
.symbol { position: relative; width: 56px; height: 56px; -webkit-mask: url(/symbol.svg) center / contain no-repeat; mask: url(/symbol.svg) center / contain no-repeat;
  background: linear-gradient(135deg, var(--aurora-mid), var(--brand) 45%, var(--aurora-end)); }
@keyframes breathe { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .8; } 50% { transform: translate(-50%, -50%) scale(1.12); opacity: 1; } }
h1 { position: relative; font-size: clamp(64px, 12vw, 112px); line-height: 1; font-weight: 700; letter-spacing: -.03em;
  background: linear-gradient(90deg, var(--brand), var(--aurora-mid)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .08em; }
.sub { position: relative; margin-top: 16px; font-size: clamp(18px, 2.6vw, 24px); font-weight: 600; letter-spacing: -.01em; }
.sub2 { position: relative; margin-top: 6px; font-size: 17px; color: var(--text-2); }
.cta { position: relative; margin-top: 28px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cta small { font-size: 13px; color: var(--text-3); }
.phone { position: relative; margin-top: 48px; flex: none; width: min(340px, 78vw); height: auto; display: block; }
.how { padding: clamp(72px, 14svh, 140px) 24px; max-width: 1040px; margin: 0 auto; }
.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.steps li { font-size: 21px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; }
.steps b { display: block; font: 700 40px/1 var(--rounded); color: var(--brand); margin-bottom: 14px; }
footer { padding: 32px 24px 40px; text-align: center; font-size: 13px; color: var(--text-3); display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; align-items: center; }
footer a:hover { color: var(--text-2); }
.social { display: inline-flex; gap: 14px; align-items: center; }
.social svg { width: 16px; height: 16px; fill: currentColor; display: block; }
.lang a[aria-current] { color: var(--text-2); font-weight: 600; }
.doc { max-width: 680px; margin: 0 auto; padding: 72px 24px; }
.doc h1 { font-size: 40px; margin-bottom: 24px; }
.doc h2 { font-size: 22px; margin: 32px 0 8px; letter-spacing: -.01em; }
.doc p, .doc li { color: var(--text-2); margin-bottom: 10px; }
.doc ul { padding-left: 22px; }
.doc a { color: var(--link); }
.back { display: inline-block; margin-bottom: 32px; color: var(--text-3); font-size: 14px; }
@media (max-width: 720px) { .steps { grid-template-columns: 1fr; gap: 28px; } }
@media (prefers-reduced-motion: reduce) { .orb { animation: none; } }