:root {
  --navy: #0b1424;
  --navy-2: #101d30;
  --surface: #17263a;
  --line: #30445b;
  --text: #f1f6fb;
  --muted: #a9b9ca;
  --accent: #2dd4bf;
  --accent-dark: #12363f;
  --lavender: #b5a2ff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--text); background: #f6f8fb; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; text-decoration: none; }
.site-header { display: flex; align-items: center; justify-content: space-between; padding: 22px clamp(22px, 4vw, 60px); background: var(--navy); border-bottom: 1px solid #1f3045; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 760; letter-spacing: -.02em; }
.brand-mark { display: block; width: 42px; height: 42px; }
.header-support { color: var(--text); font-size: 16px; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 7px; }
.hero { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 36px; align-items: start; padding: 36px clamp(22px, 4vw, 60px) 26px; background: radial-gradient(circle at 85% 35%, #263a59 0, transparent 35%), var(--navy); overflow: hidden; }
.hero-copy { max-width: 650px; padding-top: 26px; }
.eyebrow { margin: 0 0 18px; color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .2em; }
h1 { max-width: 720px; margin: 0; font-size: clamp(48px, 4.3vw, 66px); line-height: 1.02; letter-spacing: -.06em; }
.lead { max-width: 560px; margin: 18px 0 15px; color: var(--text); font-size: clamp(21px, 1.8vw, 29px); line-height: 1.34; }
.release-line { margin: 0 0 18px; color: var(--accent); font-size: clamp(20px, 1.8vw, 25px); font-weight: 600; }
.license-note { display: flex; align-items: center; gap: 12px; margin: 34px 0 0; color: #c7d4e1; font-size: 15px; }
.license-note span { position: relative; display: inline-block; width: 14px; height: 12px; border: 2px solid var(--accent); border-radius: 3px; }
.license-note span::before { content: ""; position: absolute; left: 2px; top: -9px; width: 6px; height: 9px; border: 2px solid var(--accent); border-bottom: 0; border-radius: 7px 7px 0 0; }
.downloads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 28px; max-width: 570px; }
.download-card { display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto auto; align-items: center; min-height: 132px; column-gap: 14px; padding: 17px 18px; border: 1px solid var(--accent); border-radius: 15px; background: rgba(15, 29, 47, .9); transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.download-card:hover, .download-card:focus-visible { transform: translateY(-2px); border-color: var(--accent); background: #20334b; outline: none; }
.download-card strong { display: block; font-size: 17px; line-height: 1.2; }
.download-card small { display: block; grid-column: 2; margin-top: 6px; color: var(--muted); }
.platform-icon { display: grid; grid-row: 1 / span 2; place-items: center; width: 48px; height: 48px; border-radius: 12px; color: var(--navy); background: var(--accent); font-size: 31px; font-weight: 900; }
.platform-icon.apple { color: white; background: #7085a0; }
.platform-logo { display: block; width: 31px; height: 31px; fill: currentColor; }
.platform-icon.apple .platform-logo { width: 30px; height: 30px; }
.arrow { display: none; }
.hero-art { position: relative; min-width: 0; width: min(100%, 715px); justify-self: start; }
.hero-art::before, .hero-art::after { content: ""; position: absolute; z-index: 0; top: 46px; right: -28px; width: 92%; height: 78%; border: 1px solid #29415b; border-radius: 17px; background: #142339; opacity: .78; transform: rotate(2deg); }
.hero-art::after { top: 70px; right: -48px; width: 84%; height: 70%; opacity: .55; transform: rotate(4deg); }
.app-window { position: relative; z-index: 1; width: 100%; overflow: hidden; padding: 9px; border: 1px solid #3a526b; border-radius: 20px; background: rgba(7, 17, 31, .84); box-shadow: 0 30px 100px rgba(0,0,0,.35); transform: rotate(.35deg); }
.app-window img { display: block; width: 100%; height: auto; border-radius: 8px; }
.window-bar { display: flex; align-items: center; gap: 7px; padding: 9px 12px 13px; color: var(--muted); font-size: 12px; }
.window-bar span { width: 8px; height: 8px; border-radius: 50%; background: #52657c; }.window-bar span:first-child { background: #f87171; }.window-bar span:nth-child(2) { background: #fbbf24; }.window-bar span:nth-child(3) { background: var(--accent); }.window-bar b { margin-left: 8px; font-weight: 600; }
.window-content { padding: clamp(14px, 2vw, 26px); border: 1px solid #273b54; border-radius: 14px; background: #101b2b; }
.window-account { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding: 10px 12px; border: 1px solid #30445b; border-radius: 10px; color: #e5eef7; font-size: 11px; }.window-account small { color: #92a2b3; margin-right: auto; }.window-account b { color: #e5eef7; font-size: 10px; font-weight: 600; }.window-lead { margin: -12px 0 17px; color: #92a2b3; font-size: 11px; }
.window-title { margin-bottom: 18px; font-size: clamp(18px, 2vw, 25px); font-weight: 750; }
.mode-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mode-preview { min-width: 0; padding: 9px; border: 1px solid #30445b; border-radius: 12px; background: var(--surface); }.mode-preview img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 8px; }.mode-preview h2 { margin: 10px 0 5px; font-size: 13px; line-height: 1.2; }.mode-preview p { min-height: 34px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.35; }.mode-preview button { width: 100%; margin-top: 12px; padding: 9px 8px; border: 0; border-radius: 7px; color: #063536; background: var(--accent); font: inherit; font-size: 11px; font-weight: 800; }.window-draft { margin-top: 11px; padding: 10px 12px; border: 1px solid #30445b; border-radius: 8px; color: #92a2b3; font-size: 10px; }.window-draft span { float: right; color: #e5eef7; }
.benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 28px clamp(22px, 4vw, 60px); color: #172437; background: #f6f8fb; }.benefits article { display: grid; grid-template-columns: 112px 1fr; align-items: center; min-height: 142px; padding: 15px 18px; border: 1px solid #e0e7ef; border-radius: 18px; background: white; box-shadow: 0 12px 30px rgba(25, 47, 72, .06); }.benefit-icon { display: grid; grid-row: 1 / span 2; place-items: center; width: 96px; height: 96px; margin-right: 14px; color: #0b6f69; border-radius: 50%; background: #edf5f5; font-size: 38px; }.benefits h2 { margin: 0 0 7px; font-size: 19px; }.benefits p { margin: 0; color: #66758a; font-size: 15px; line-height: 1.4; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 54px clamp(22px, 6vw, 84px) 72px; color: var(--text); background: var(--navy-2); }.steps .eyebrow { grid-column: 1 / -1; margin-bottom: -4px; }.step-row { display: grid; grid-template-columns: 46px 1fr; column-gap: 14px; align-items: start; }.step-row > span { grid-row: span 2; display: grid; place-items: center; width: 42px; height: 42px; color: var(--navy); border-radius: 50%; background: var(--accent); font-weight: 800; }.step-row strong { font-size: 17px; }.step-row p { margin: 7px 0 0; color: var(--muted); line-height: 1.45; }
.help-soon { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 18px; padding: 20px 22px; border: 1px solid #30445b; border-radius: 16px; background: rgba(11, 20, 36, .58); }.help-soon strong { font-size: 17px; }.help-soon p { margin: 6px 0 0; color: var(--muted); line-height: 1.45; }.help-soon button { flex: 0 0 auto; padding: 12px 17px; border: 1px solid #3c536c; border-radius: 10px; color: #93a5b8; background: #16253a; font: inherit; font-weight: 700; cursor: not-allowed; }
footer { padding: 24px; color: #8494a7; background: var(--navy); text-align: center; font-size: 13px; }
@media (max-width: 1100px) { .hero { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 28px; padding-inline: 40px; }.hero-art { width: 100%; } }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; }.hero-art { max-width: 720px; width: 100%; justify-self: start; }.benefits, .steps { grid-template-columns: 1fr; }.steps .eyebrow { grid-column: auto; }.help-soon { grid-column: auto; }.header-support { display: none; } }
@media (max-width: 560px) { .site-header { padding: 18px 20px; }.hero { padding: 52px 20px 64px; }.mode-grid { grid-template-columns: 1fr; }.mode-preview { display: grid; grid-template-columns: 100px 1fr; gap: 10px; align-items: center; }.mode-preview img { grid-row: span 3; width: 100px; height: 100px; object-fit: cover; }.mode-preview h2 { margin: 0; }.mode-preview button { grid-column: 2; margin-top: 0; }.benefits, .steps { padding-inline: 20px; }.downloads { grid-template-columns: 1fr; }.download-card { grid-template-columns: 42px 1fr; padding-inline: 14px; }.platform-icon { width: 40px; height: 40px; }.platform-logo { width: 26px; height: 26px; }.help-soon { align-items: stretch; flex-direction: column; }.help-soon button { width: 100%; }.window-account b { display: none; }.window-draft span { display: none; } }