:root {
  color-scheme: dark;
  --background: #020e1c;
  --surface: #03101e;
  --surface-dark: #020a13;
  --border: #102d4c;
  --text: #d4e8fb;
  --muted: #7b9ebf;
  --blue: #419eff;
  --blue-deep: #1671e5;
  --green: #04d390;
  --radius: 17px;
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body { margin: 0; color: var(--text); background: var(--background); font-size: 16px; line-height: 1.6; isolation: isolate; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(ellipse at 3% 15%, #02204766, transparent 41%), radial-gradient(ellipse at 94% 83%, #092c786b, transparent 42%), radial-gradient(ellipse at 52% 46%, #0134501b, transparent 38%), #020e1c;
}
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(#267fc21a .65px, transparent .65px); background-size: 34px 34px; background-position: 14px 14px; }
button, input, a { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { font: inherit; cursor: pointer; color: inherit; }
a { color: inherit; text-decoration: none; }
button, figure, h1, h2, h3, p { margin: 0; }
button { border: 0; background: transparent; }
button:disabled { cursor: wait; }
img { display: block; max-width: 100%; }
button, a, summary { outline-offset: 5px; }
:focus-visible { outline: 2px solid #75bcff; }
[hidden] { display: none !important; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.skip-link { position: fixed; left: 16px; top: -70px; z-index: 20; padding: 9px 18px; border-radius: 8px; background: #146cba; }
.skip-link:focus { top: 10px; }
.section-container { width: min(1120px, calc(100% - 64px)); margin-inline: auto; }
.section-block { scroll-margin-top: 90px; }
.blue-text { color: var(--blue); }
.nav-shell { position: fixed; top: 30px; left: 0; right: 0; z-index: 10; display: flex; justify-content: center; pointer-events: none; transition: top .25s ease; }
.nav-shell.is-scrolled { top: 10px; }
.navigation { pointer-events: auto; display: flex; align-items: center; gap: 21px; min-height: 46px; padding: 5px 14px 5px 16px; background: #020d1aee; border: 1px solid #103254; border-radius: 16px; box-shadow: 0 4px 22px #0004, inset 0 0 0 1px #0874d209; backdrop-filter: blur(18px); }
.brand { display: inline-flex; gap: 7px; align-items: center; color: #45a4ff; font-size: 17px; font-weight: 750; letter-spacing: .21em; line-height: 1; }
.brand img { object-fit: contain; width: 37px; height: 31px; }
.nav-links { display: flex; gap: 32px; align-items: center; }
.nav-links a, .nav-install { color: #a0b6cd; font-size: 14px; font-weight: 650; line-height: 1.5; padding: 5px 0; transition: color .2s; }
.nav-links a:hover, .nav-links a.is-active, .nav-install:hover { color: #d5ebff; }
.nav-cta { padding: 6px 21px; border-radius: 999px; color: #fff; background: linear-gradient(120deg, #0087d3, #009deb); font-size: 14px; font-weight: 750; line-height: 1.5; box-shadow: 0 0 20px #007bcc47; white-space: nowrap; transition: filter .2s, box-shadow .2s; }
.nav-cta:hover { filter: brightness(1.12); box-shadow: 0 0 25px #007bcc80; }
.menu-toggle { display: none; padding: 7px; }
.hero { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; padding-top: 172px; padding-bottom: 58px; align-items: center; border-bottom: 1px solid var(--border); }
.hero-badge { display: inline-flex; gap: 10px; align-items: center; padding: 4px 17px; border: 1px solid #1175d5; border-radius: 999px; box-shadow: inset 0 0 0 1px #0453a324; background: #0521456b; color: #55aaff; font-size: 12px; line-height: 1.8; font-weight: 700; letter-spacing: .13em; }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 11px #04d390b3; flex-shrink: 0; }
h1 { font-size: clamp(2.5rem, 3vw, 3rem); font-weight: 700; line-height: 1.15; letter-spacing: -.024em; margin-top: 26px; }
.type-line { display: inline-block; min-height: 1.15em; color: #f6f9ff; }
.typing-cursor { display: inline-block; width: 2px; height: .86em; margin-left: 3px; background: #f2f8ff; vertical-align: -.02em; animation: cursor-blink 1s step-end infinite; }
@keyframes cursor-blink { 50% { opacity: 0; } }
.hero-actions { display: flex; gap: 16px; margin-top: 36px; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 55px; padding: 12px 30px; border-radius: 12px; font-size: 16px; font-weight: 700; line-height: 1.4; border: 1px solid transparent; transition: transform .2s, background .2s, border-color .2s, box-shadow .2s; text-align: center; }
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0); }
.button-primary { color: #fff; background: linear-gradient(115deg, #166fe2, #44a5ff); box-shadow: 0 6px 34px #006bdd2b; }
.button-primary:hover { box-shadow: 0 6px 38px #1481e549; }
.hero-actions .button-primary { min-width: 155px; }
.button-secondary { border-color: var(--border); background: #0315272e; }
.button-secondary:hover { border-color: #2868a7; background: #08243b80; }
.hero-actions .button-secondary { min-width: 201px; }
.play-solid { font-size: 15px; line-height: 1; }
.stats { display: grid; grid-template-columns: repeat(4, max-content); gap: 31px; margin-top: 44px; }
.stat-value { display: block; font-size: 26px; font-weight: 750; line-height: 1.3; white-space: nowrap; color: #70a6ff; background: linear-gradient(110deg, #41b4ff, #938fff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 23px #438bff35; }
.stat-label { display: block; margin-top: 4px; color: #508cbd; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; line-height: 1.5; }
.app-preview { margin-top: -50px; position: relative; border: 1px solid #163a5c; border-radius: var(--radius); overflow: hidden; background: #050708; box-shadow: 0 20px 70px #0003, 0 0 70px #1b74bf0e; }
.app-preview img { width: 100%; height: auto; }
.features { padding: 80px 32px 78px; }
.eyebrow { color: #55aaff; font-size: 13px; font-weight: 750; letter-spacing: .13em; line-height: 1.7; margin-bottom: 13px; }
h2 { font-size: clamp(1.9rem, 2.3vw, 2.6rem); font-weight: 650; line-height: 1.2; letter-spacing: -.03em; }
.section-description { color: var(--muted); margin-top: 21px; line-height: 1.75; }
.feature-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
.feature-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 18px 24px; background: #03101eda; transition: transform .25s, border-color .25s, box-shadow .25s; }
.feature-card:hover { transform: translateY(-7px); border-color: #1a5d9e; box-shadow: 0 8px 28px #057ad418; }
.icon-box { display: inline-flex; width: 48px; height: 48px; border: 1px solid #1a75d0; border-radius: 12px; color: #55aaff; background: #061d3773; justify-content: center; align-items: center; flex-shrink: 0; }
.icon-box .icon { width: 25px; height: 25px; }
.feature-card h3 { font-size: 15px; font-weight: 750; line-height: 1.5; margin-top: 18px; letter-spacing: -.02em; }
.feature-card p { color: var(--muted); font-size: 14px; line-height: 1.75; margin-top: 7px; }
.feedback { padding: 30px 0 85px; overflow: hidden; }
.feedback-heading { text-align: center; margin: 0 24px 40px; }
.review-rows { display: grid; gap: 30px; position: relative; }
.review-rows::before, .review-rows::after { content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 1; pointer-events: none; }
.review-rows::before { left: 0; background: linear-gradient(90deg, #020e1cdd, transparent); }
.review-rows::after { right: 0; background: linear-gradient(-90deg, #020e1cdd, transparent); }
.review-row { overflow: hidden; }
.review-track { display: flex; width: max-content; animation: reviews-forward 74s linear infinite; }
.review-row:nth-child(2) .review-track { animation-name: reviews-backward; animation-duration: 82s; }
.review-row:hover .review-track, .review-row:focus-within .review-track { animation-play-state: paused; }
.review-group { display: flex; gap: 16px; padding-right: 16px; }
.review-card { width: 264px; display: flex; flex-direction: column; gap: 12px; padding: 15px 18px 18px; border: 1px solid #102d4cbb; border-radius: 15px; background: #03101e88; min-height: 185px; transition: border-color .2s, background .2s; }
.review-card:hover { border-color: #1d6eb8; background: #03172bcc; }
.review-stars { color: #ffcf48; font-size: 21px; letter-spacing: 1px; line-height: 1.3; }
.review-card > p { font-size: 14px; line-height: 1.65; color: #85a8c9; flex: 1; }
.review-author { display: flex; align-items: center; gap: 10px; }
.avatar { display: flex; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(130deg, #1a75e2, #4eaeff); color: #fff; font-weight: 750; font-size: 13px; align-items: center; justify-content: center; flex-shrink: 0; }
.review-author strong { display: block; font-size: 14px; line-height: 1.5; }
.review-author small { display: block; color: #6f95b9; font-size: 12px; line-height: 1.4; }
@keyframes reviews-forward { to { transform: translateX(-50%); } }
@keyframes reviews-backward { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.changelog { padding: 78px 32px 82px; border-top: 1px solid var(--border); }
.updates-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 62px; margin-top: 46px; align-items: start; }
.timeline { padding: 0; margin: 0; list-style: none; }
.timeline-item { position: relative; padding-left: 29px; padding-bottom: 31px; border-left: 2px solid #102e4d; }
.timeline-item:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline-item::before { content: ""; position: absolute; left: -6px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: #10385c; border: 1px solid #020e1c; box-shadow: 0 0 0 2px #020e1c; }
.timeline-item.is-latest::before { background: var(--green); box-shadow: 0 0 0 2px #020e1c, 0 0 14px #04d390a6; }
.version-title { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 15px; font-weight: 700; line-height: 1.6; }
.latest-tag { border: 1px solid #02ce88; color: #02ce88; border-radius: 99px; padding: 1px 8px; text-transform: uppercase; font-size: 10px; font-weight: 600; line-height: 1.5; letter-spacing: .05em; }
.version-notes { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.version-notes li { color: #7a9ebe; font-size: 14px; line-height: 1.6; display: flex; gap: 9px; }
.version-notes li::before { content: "›"; color: #4caaff; font-size: 17px; line-height: 1.3; }
.is-latest .version-notes li:nth-child(-n+2) { color: #cfe4f6; }
.is-latest .version-notes li:nth-child(-n+2)::before { content: "★"; color: var(--green); font-size: 13px; line-height: 1.65; }
.faq { display: grid; gap: 12px; }
.faq-item { border: 1px solid var(--border); border-radius: 13px; background: #03101ee0; transition: border-color .2s; }
.faq-item:hover { border-color: #21517e; }
.faq-item summary { cursor: pointer; list-style: none; padding: 17px 23px; font-size: 15px; line-height: 1.45; font-weight: 700; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid #7599bc; flex-shrink: 0; transition: transform .2s; }
.faq-item[open] summary { color: #55aaff; }
.faq-item[open] summary::after { transform: rotate(-90deg); }
.faq-item p { color: var(--muted); font-size: 14px; line-height: 1.8; padding: 0 23px 18px; }
.install { border-top: 1px solid var(--border); padding: 78px 0 80px; text-align: center; }
.install-content .section-description { max-width: 475px; margin: 29px auto; }
.button-pill { border-radius: 999px; min-width: 226px; min-height: 58px; }
.install-badges { display: flex; justify-content: center; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.install-badges span { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 999px; background: #051c3699; padding: 6px 16px; font-size: 13px; font-weight: 650; line-height: 1.5; }
.footer { border-top: 1px solid var(--border); text-align: center; padding: 30px 20px; color: #7398b9; font-size: 13px; }
.download-dialog { width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 36px); padding: 0; border: 1px solid #13304d; border-radius: 24px; background: #020a13; color: var(--text); overflow: auto; box-shadow: 0 0 70px #0860ba24, 0 25px 90px #0008; }
.download-dialog::backdrop { background: #010711ba; backdrop-filter: blur(9px); }
.dialog-header { position: relative; border-bottom: 1px solid #102339; padding: 22px 28px 18px; }
.dialog-label { display: flex; gap: 8px; align-items: center; margin-bottom: 13px; color: #bbeedc; font-size: 10px; font-weight: 800; line-height: 1.5; letter-spacing: .08em; }
.dialog-label .status-dot { width: 7px; height: 7px; background: #36b071; box-shadow: 0 0 10px #36b0714d; }
.dialog-label > span:last-child { background: #17643e80; border-radius: 4px; padding: 2px 9px; }
.dialog-label.is-error .status-dot { background: #eeb465; box-shadow: none; }
.dialog-label.is-error > span:last-child { background: #553b20; color: #ffdbac; }
.dialog-close { position: absolute; right: 16px; top: 15px; color: #6389ac; padding: 9px; border-radius: 8px; }
.dialog-close:hover { background: #071f36; color: #eef8ff; }
.dialog-close .icon { width: 17px; height: 17px; }
.dialog-heading { display: flex; gap: 14px; align-items: center; }
.dialog-heading .icon-box { width: 42px; height: 42px; border-color: #123b65; border-radius: 11px; }
.dialog-heading .icon { width: 22px; height: 22px; }
.dialog-heading h2 { font-size: 18px; line-height: 1.4; font-weight: 750; letter-spacing: -.02em; }
.dialog-heading p { color: var(--muted); font-size: 12px; line-height: 1.65; }
.dialog-main { padding: 20px 28px 20px; }
.install-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.install-step { display: flex; gap: 10px; padding: 12px; border: 1px solid #103051; border-radius: 11px; background: #031324; }
.mini-icon { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid #103d68; border-radius: 8px; color: #63aff5; background: #021124; flex-shrink: 0; }
.mini-icon .icon { width: 15px; height: 15px; }
.install-step h3 { font-size: 12px; font-weight: 750; line-height: 1.4; letter-spacing: -.01em; }
.install-step p { color: var(--muted); font-size: 12px; line-height: 1.6; margin-top: 2px; }
code { background: #051e36; border: 1px solid #113a62; padding: 0 5px; border-radius: 4px; color: #66baff; font-size: .88em; white-space: nowrap; }
.download-check { margin-top: 16px; border: 1px solid #103051; border-radius: 11px; background: #031324; padding: 14px; }
.check-heading { display: flex; gap: 9px; align-items: center; }
.check-heading .mini-icon { width: 35px; height: 35px; }
.check-heading h3 { font-size: 13px; font-weight: 750; line-height: 1.5; }
.check-heading p { color: var(--muted); font-size: 12px; line-height: 1.6; }
#check-percent { margin-left: auto; color: #42bf88; font-size: 12px; font-weight: 700; align-self: center; }
.progress-track { height: 6px; margin: 10px 0; overflow: hidden; border-radius: 99px; border: 1px solid #0e2c4f; background: #03101e; }
.progress-fill { width: 0; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #1476eb, #48afff); transition: width .35s ease; }
.download-check.is-ready .progress-fill { background: linear-gradient(90deg, #0aaa77, #41db99); }
.download-check.is-error .progress-fill { background: #d9994f; }
.check-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.check-chips span { display: flex; align-items: center; justify-content: center; gap: 3px; min-height: 25px; border: 1px solid #113358; border-radius: 6px; color: #557895; font-size: 11px; font-weight: 650; line-height: 1.5; }
.check-chips span.is-checked { color: #83d7bb; border-color: #195647; background: #063b2b22; }
.check-chips span.is-checked::before { content: "✓"; }
.check-note { color: #688cab; margin-top: 9px; font-size: 11px; line-height: 1.5; }
.download-now { display: flex; width: 100%; min-height: 49px; margin-top: 16px; border-radius: 12px; font-size: 14px; }
.download-now .icon { width: 17px; height: 17px; }
.download-now.is-disabled { opacity: .4; cursor: default; box-shadow: none; transform: none; }
.dialog-footnote { margin-top: 21px; color: #5db4e5; font-size: 12px; text-align: center; line-height: 1.5; }
.retry-button { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 10px auto 0; padding: 6px 10px; border-radius: 6px; font-size: 13px; color: #88c5ff; }
.retry-button .icon { width: 14px; height: 14px; }
.retry-button:hover { background: #0a2138; }
.download-success { min-height: 360px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 28px; }
.success-icon { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border: 2px solid #104d32; color: #2ace81; border-radius: 50%; margin-bottom: 25px; }
.success-icon .icon { width: 36px; height: 36px; stroke-width: 2.5; }
.download-success h3 { font-size: 24px; font-weight: 750; line-height: 1.4; }
.download-success p { color: var(--muted); font-size: 14px; margin-top: 9px; }
.download-success .success-filename { color: #4ca7e7; font-size: 12px; overflow-wrap: anywhere; }
.download-success .button { margin-top: 25px; min-height: 40px; font-size: 13px; padding: 8px 20px; }
.download-toast { position: fixed; left: 24px; bottom: 24px; z-index: 11; border: 1px solid #2774cc; border-radius: 13px; background: #031122f5; box-shadow: 0 0 25px #1485ef1f; display: flex; gap: 11px; align-items: center; padding: 12px 16px; pointer-events: none; animation: toast-in .25s ease-out; }
.toast-avatar { display: flex; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(120deg, #1973e5, #4babff); align-items: center; justify-content: center; color: white; }
.toast-avatar .icon { width: 18px; height: 18px; }
.download-toast strong { font-size: 14px; display: block; line-height: 1.5; }
.download-toast div > span { display: block; font-size: 12px; color: var(--muted); line-height: 1.5; }
.noscript-note { text-align: center; padding: 20px; border-top: 1px solid var(--border); }
.noscript-note a { color: var(--blue); text-decoration: underline; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 1600px) { .hero { grid-template-columns: 540px 1fr; gap: 54px; } }
@media (max-width: 1100px) {
  .hero { gap: 32px; padding-top: 153px; }
  .stats { gap: 20px; }
  .stat-value { font-size: 22px; }
  h1 { font-size: 2.6rem; }
  .hero-actions .button { min-width: 0; padding-inline: 25px; }
  .features, .changelog { padding-inline: 0; }
  .feature-grid { gap: 12px; }
  .feature-card { padding: 20px 14px; }
  .feature-card h3 { font-size: 14px; }
  .updates-grid { gap: 32px; }
}
@media (max-width: 850px) {
  .hero { grid-template-columns: 1fr; gap: 40px; padding-top: 139px; }
  .hero-content { max-width: 590px; }
  .app-preview { width: 100%; max-width: 680px; margin: 0; }
  h1 { font-size: 3rem; }
  .stats { gap: 30px; }
  .stat-value { font-size: 25px; }
  .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .feature-card { padding: 22px 18px; }
  .feature-card h3 { font-size: 15px; }
  .features { padding-top: 58px; }
  .updates-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 650px) {
  .section-container { width: calc(100% - 40px); }
  .nav-shell, .nav-shell.is-scrolled { top: 13px; }
  .navigation { width: calc(100% - 32px); max-width: 500px; gap: 12px; padding: 5px 10px; }
  .brand { margin-right: auto; font-size: 15px; gap: 4px; }
  .brand img { width: 31px; height: 31px; }
  .nav-cta { padding: 7px 15px; font-size: 13px; }
  .menu-toggle { display: block; }
  .nav-links { display: none; position: absolute; left: 16px; right: 16px; top: 57px; padding: 14px 20px; border: 1px solid var(--border); border-radius: 14px; background: #031222f5; box-shadow: 0 12px 35px #0008; flex-direction: column; align-items: stretch; gap: 6px; }
  .navigation.is-expanded .nav-links { display: flex; }
  .nav-links a, .nav-install { padding: 8px 0; text-align: left; font-size: 15px; }
  .hero { padding-top: 115px; padding-bottom: 44px; gap: 33px; }
  .hero-badge { font-size: 10px; padding-inline: 12px; letter-spacing: .09em; }
  h1 { font-size: clamp(2rem, 8.1vw, 3rem); margin-top: 22px; line-height: 1.2; }
  .hero-actions { gap: 10px; margin-top: 27px; }
  .hero-actions .button { padding: 12px 19px; font-size: 14px; min-height: 49px; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 20px 24px; margin-top: 31px; }
  .stat-value { font-size: 25px; }
  .stat-label { font-size: 11px; }
  .app-preview { border-radius: 12px; }
  h2 { font-size: 1.9rem; line-height: 1.22; }
  .eyebrow { font-size: 12px; margin-bottom: 12px; }
  .section-description { font-size: 15px; margin-top: 17px; }
  .features { padding-top: 48px; padding-bottom: 48px; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 30px; }
  .feature-card { padding: 19px 15px; }
  .feature-card:last-child { grid-column: 1 / -1; }
  .icon-box { width: 43px; height: 43px; }
  .feature-card p { font-size: 14px; }
  .feedback { padding-top: 20px; padding-bottom: 50px; }
  .feedback-heading { margin-bottom: 29px; }
  .review-rows { gap: 16px; }
  .review-rows::before, .review-rows::after { width: 28px; }
  .review-card { width: 245px; }
  .changelog { padding-top: 49px; padding-bottom: 49px; }
  .updates-grid { margin-top: 34px; }
  .faq-item summary { padding: 16px 18px; font-size: 14px; }
  .faq-item p { padding-inline: 18px; }
  .install { padding-top: 49px; padding-bottom: 53px; }
  .install-content .section-description { margin: 23px auto; }
  .install-badges { gap: 8px; }
  .install-badges span { padding: 5px 12px; font-size: 12px; }
  .dialog-header { padding: 18px 20px 16px; }
  .dialog-main { padding: 17px 18px; }
  .dialog-heading h2 { font-size: 17px; }
  .install-step { padding: 10px 9px; gap: 7px; }
  .install-step .mini-icon { width: 24px; height: 24px; }
  .install-step p { font-size: 12px; }
  .install-step h3 { font-size: 12px; }
  .download-toast { left: 16px; bottom: 16px; max-width: calc(100% - 32px); }
}
@media (max-width: 360px) {
  .hero-actions .button { padding-inline: 14px; }
  .install-steps { grid-template-columns: 1fr; }
  .hero-badge { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .review-track { transform: none; }
  .review-row { overflow-x: auto; scrollbar-width: thin; }
  .review-group[aria-hidden] { display: none; }
  .typing-cursor { display: none; }
}

/* Motion and finishing details: the same dark blue palette, softer and quieter. */
body::before { background: radial-gradient(ellipse at 6% 10%, #0929514b, transparent 43%), radial-gradient(ellipse at 96% 81%, #12367945, transparent 45%), radial-gradient(ellipse at 54% 40%, #06445d16, transparent 40%), #020d19; }
.scroll-progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 12; pointer-events: none; }
.scroll-progress span { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, #2285f5, #71d3ff); box-shadow: 0 0 12px #389ffc66; }
.navigation { box-shadow: 0 6px 30px #0005, 0 0 40px #278ced0a, inset 0 1px 0 #9dd9ff08; }
.brand img { transform-origin: 50% 56%; animation: ufo-float 4.8s ease-in-out infinite; filter: drop-shadow(0 0 8px #8bd1ff24); will-change: transform; }
.brand:hover img { filter: drop-shadow(0 0 11px #8bd1ff66); }
@keyframes ufo-float { 0%, 100% { transform: translateY(1px) rotate(-7deg); } 45% { transform: translateY(-3px) rotate(5deg); } 70% { transform: translateY(-1px) rotate(1deg); } }
.nav-links a { position: relative; }
.nav-links a::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; transform: scaleX(0); transform-origin: center; background: #63b8ff; transition: transform .3s ease; }
.nav-links a:hover::after, .nav-links a.is-active::after { transform: scaleX(.55); }
.hero-badge { animation: hero-arrive .8s .06s both; }
h1 { animation: hero-arrive .85s .15s both; }
.hero-actions { animation: hero-arrive .85s .26s both; }
.stats { animation: hero-arrive .9s .35s both; }
@keyframes hero-arrive { from { opacity: 0; transform: translateY(16px); filter: blur(3px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
.hero h1 .blue-text { background: linear-gradient(100deg, #3292ff 15%, #6cc7ff 47%, #4da2ff 75%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; background-size: 180% 100%; animation: title-light 9s ease-in-out infinite; }
@keyframes title-light { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.app-preview { border: 0; overflow: visible; background: transparent; box-shadow: none; perspective: 1100px; animation: preview-float 7.5s ease-in-out infinite; }
.app-preview::before { content: ""; position: absolute; inset: 13% 8%; border-radius: 30%; background: #228fff18; filter: blur(55px); pointer-events: none; animation: preview-aura 7.5s ease-in-out infinite; }
.preview-frame { position: relative; border: 1px solid #1a3c5e; border-radius: 17px; overflow: hidden; background: #050708; box-shadow: 0 24px 65px #0006, 0 0 0 1px #72bfff05; transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform .35s ease-out, border-color .3s, box-shadow .3s; }
.app-preview:hover .preview-frame { border-color: #30699b; box-shadow: 0 28px 75px #0008, 0 0 50px #1485ef16; }
@keyframes preview-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes preview-aura { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.button, .nav-cta { position: relative; overflow: hidden; isolation: isolate; }
.button-primary::after, .nav-cta::after { content: ""; position: absolute; inset: -50% -25%; background: linear-gradient(100deg, transparent 38%, #ffffff26 49%, transparent 60%); transform: translateX(-130%) skewX(-18deg); pointer-events: none; transition: transform .7s ease; }
.button-primary:hover::after, .nav-cta:hover::after { transform: translateX(130%) skewX(-18deg); }
.button-primary:hover { transform: translateY(-3px); }
.button-secondary { box-shadow: inset 0 1px 0 #76bcff06; }
.feature-card { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(160deg, #071b2b9c, #03101eea); box-shadow: inset 0 1px 0 #8dcaff07; }
.feature-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(180px circle at var(--pointer-x, 50%) var(--pointer-y, 25%), #2d8ae724, transparent 75%); opacity: 0; transition: opacity .35s; pointer-events: none; }
.feature-card:hover::before { opacity: 1; }
.feature-card:hover .icon-box { transform: translateY(-3px) rotate(-4deg); border-color: #4aa6ff; background: #0b2a48; box-shadow: 0 0 24px #278ced1f; }
.feature-card .icon-box { transition: transform .35s, background .35s, box-shadow .35s, border-color .35s; }
.motion-ready .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--reveal-delay, 0ms), transform .7s var(--reveal-delay, 0ms); }
.motion-ready .reveal.is-visible { opacity: 1; transform: translateY(0); }
.motion-ready .feature-card.reveal.is-visible:hover { transform: translateY(-7px); }
.faq-item[open] p { animation: faq-arrive .3s ease-out; }
@keyframes faq-arrive { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
.download-dialog[open] { animation: dialog-arrive .35s cubic-bezier(.2,.7,.25,1) both; }
.download-dialog[open]::backdrop { animation: backdrop-arrive .3s ease-out both; }
@keyframes dialog-arrive { from { opacity: 0; transform: translateY(15px) scale(.975); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes backdrop-arrive { from { background: #01071100; } to { background: #010711ba; } }
.progress-fill { box-shadow: 0 0 14px #319cfe55; }
.download-check.is-ready .progress-fill { box-shadow: 0 0 14px #38d49440; }
.success-icon { animation: success-arrive .5s cubic-bezier(.16,1,.3,1) both; }
@keyframes success-arrive { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
.download-toast { pointer-events: auto; padding: 15px 38px 15px 15px; min-width: 275px; max-width: 340px; border-color: #245f94; background: #031221f5; box-shadow: 0 12px 40px #0005, 0 0 25px #1485ef0f; overflow: hidden; backdrop-filter: blur(18px); animation: notification-arrive .45s cubic-bezier(.16,1,.3,1) both; }
.download-toast.is-leaving { animation: notification-leave .25s ease-in both; }
.download-toast .toast-kicker { color: #5baddf; font-size: 9px; letter-spacing: .09em; font-weight: 750; line-height: 1.6; margin-bottom: 2px; }
.download-toast.is-preview .toast-kicker { color: #e2b877; }
.toast-close { position: absolute; top: 9px; right: 8px; padding: 5px; border-radius: 5px; color: #567c9a; }
.toast-close .icon { width: 13px; height: 13px; }
.toast-close:hover { color: #d3eaff; background: #12304c; }
.toast-lifetime { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: linear-gradient(90deg, #288ff7, #6dc5ff); transform-origin: left; animation: toast-lifetime 6s linear forwards; }
@keyframes toast-lifetime { to { transform: scaleX(0); } }
@keyframes notification-arrive { from { opacity: 0; transform: translateX(-26px) translateY(6px); } to { opacity: 1; transform: translateX(0) translateY(0); } }
@keyframes notification-leave { to { opacity: 0; transform: translateX(-18px); } }
@media (max-width: 650px) { .preview-frame { border-radius: 12px; } .download-toast { min-width: 260px; max-width: calc(100vw - 32px); } }
@media (prefers-reduced-motion: reduce) { .motion-ready .reveal { opacity: 1; transform: none; } .preview-frame { transform: none !important; } .brand img { will-change: auto; } }