:root {
  color-scheme: light;
  --ink: #141414;
  --soft-ink: #4c5b62;
  --white: #ffffff;
  --paper: #f2fafd;
  --green: #009de0;
  --green-dark: #0077a8;
  --yellow: #fef3c7;
  --blue: #e6f7fc;
  --pink: #d32f2f;
  --line: #eef1f3;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button { font: inherit; }

.skip-link { position: fixed; top: -80px; left: 16px; z-index: 100; padding: 10px 14px; color: white; background: var(--ink); border-radius: 4px; }
.skip-link:focus { top: 12px; }
.site-header { position: fixed; z-index: 50; top: 16px; left: 50%; width: min(1160px, calc(100% - 32px)); min-height: 64px; padding: 10px 14px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; transform: translateX(-50%); color: white; background: rgba(16, 25, 20, 0.82); border: 1px solid rgba(255,255,255,0.13); border-radius: 8px; backdrop-filter: blur(18px); transition: top 180ms ease, background 180ms ease; }
.site-header.is-scrolled { top: 8px; background: rgba(16, 25, 20, 0.94); }
.brand { width: max-content; display: inline-flex; align-items: center; gap: 10px; font-weight: 850; text-decoration: none; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; color: var(--ink); background: var(--green); border-radius: 7px; }
.site-header nav { display: flex; gap: 30px; }
.site-header nav a, .header-link, .site-footer a { font-size: 14px; font-weight: 680; text-decoration: none; }
.site-header nav a { color: rgba(255,255,255,0.72); }
.site-header nav a:hover, .header-link:hover { color: var(--green); }
.header-link { justify-self: end; }
.site-header a:focus-visible, .store-button:focus-visible, button:focus-visible, summary:focus-visible, .site-footer a:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }

.hero { position: relative; min-height: 900px; padding: 160px max(24px, calc((100% - 1160px) / 2)) 90px; display: grid; grid-template-columns: 0.92fr 1.08fr; align-items: center; gap: 60px; overflow: hidden; color: white; background: var(--ink); }
.hero::before { content: ""; position: absolute; inset: 0; opacity: 0.22; background-image: linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px); background-size: 46px 46px; mask-image: linear-gradient(to right, black, transparent 75%); }
.hero-wash { position: absolute; width: 520px; height: 520px; right: 5%; top: 18%; border-radius: 50%; background: var(--green); filter: blur(100px); opacity: 0.16; }
.hero-copy { position: relative; z-index: 2; max-width: 610px; }
.availability { width: max-content; margin-bottom: 28px; padding: 8px 12px; display: flex; align-items: center; gap: 9px; color: rgba(255,255,255,0.84); border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; font-size: 12px; font-weight: 720; }
.availability span { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(31,193,132,0.15); }
h1, h2, h3, p { letter-spacing: 0; }
h1 { margin: 0; font-size: 72px; line-height: 0.96; font-weight: 850; }
.hero-copy > p:not(.launch-note) { max-width: 560px; margin: 28px 0 0; color: rgba(255,255,255,0.7); font-size: 19px; }
.store-actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 10px; }
.store-button { min-width: 184px; min-height: 60px; padding: 8px 15px; display: inline-flex; align-items: center; gap: 12px; color: white; background: var(--green-dark); border: 1px solid rgba(255,255,255,0.16); border-radius: 7px; text-decoration: none; transition: transform 160ms ease, background 160ms ease; }
.store-button:hover { transform: translateY(-2px); background: #00648e; }
.store-button-light { color: var(--ink); background: var(--white); }
.store-button-light:hover { background: var(--blue); }
.store-button span:last-child { display: flex; flex-direction: column; }
.store-button small { font-size: 10px; line-height: 1.1; opacity: 0.7; }
.store-button strong { font-size: 17px; line-height: 1.2; }
.store-icon { width: 28px; text-align: center; font-size: 22px; }
.store-icon.play { font-size: 19px; }
.launch-note { max-width: 470px; margin: 14px 0 0; color: rgba(255,255,255,0.5); font-size: 11px; }

.device-scene { position: relative; z-index: 1; min-height: 660px; display: flex; align-items: center; justify-content: center; }
.orbit { position: absolute; border: 1px solid rgba(255,255,255,0.12); border-radius: 50%; }
.orbit-one { width: 610px; height: 610px; }
.orbit-two { width: 470px; height: 470px; border-color: rgba(31,193,132,0.32); }
.phone { position: absolute; width: 286px; height: 590px; border: 8px solid #050806; border-radius: 42px; box-shadow: 0 38px 90px rgba(0,0,0,0.45); }
.phone-back { transform: translate(-104px, 18px) rotate(-10deg); background: var(--green); }
.camera-cluster { width: 92px; height: 92px; margin: 20px; padding: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: rgba(255,255,255,0.3); border-radius: 24px; }
.camera-cluster i { display: block; border: 4px solid rgba(255,255,255,0.55); border-radius: 50%; background: var(--ink); }
.camera-cluster i:last-child { width: 15px; height: 15px; border-width: 2px; align-self: center; justify-self: center; }
.back-mark { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; display: grid; place-items: center; transform: translate(-50%, -50%); color: var(--white); background: rgba(20,20,20,0.78); border-radius: 14px; font-size: 28px; font-weight: 900; }
.phone-front { z-index: 2; transform: translate(92px, -8px) rotate(7deg); padding: 12px 15px; color: var(--ink); background: var(--white); transition: border-radius 240ms ease, transform 240ms ease; }
.phone-front.is-android { border-radius: 28px; transform: translate(92px, -8px) rotate(4deg); }
.device-top { min-height: 30px; display: grid; grid-template-columns: 1fr 84px 1fr; align-items: center; font-size: 8px; font-weight: 800; }
.device-top > span:last-child { text-align: right; }
.device-top b { width: 84px; height: 24px; display: block; background: var(--ink); border-radius: 14px; }
.device-top .android-cutout { width: 11px; height: 11px; justify-self: center; border-radius: 50%; }
.screen-head { min-height: 42px; display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 850; }
.screen-head button { width: 31px; height: 31px; border: 0; border-radius: 50%; background: #ebefec; color: var(--ink); }
.app-score { padding: 22px 0 18px; text-align: center; }
.app-score > span { display: block; color: var(--green-dark); font-size: 9px; font-weight: 900; letter-spacing: 0.15em; }
.app-score strong { font-size: 52px; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.app-score small { margin-left: 3px; color: var(--soft-ink); font-size: 8px; font-weight: 850; }
.item-stack { min-height: 254px; display: flex; flex-direction: column; gap: 8px; }
.item-stack > div { min-height: 39px; padding: 9px 11px; display: flex; align-items: center; justify-content: space-between; background: #e9efeb; border-radius: 7px; font-size: 11px; }
.item-stack b { font-variant-numeric: tabular-nums; }
.item-stack .item-bright { background: #fff0b7; }
.hold-button { min-height: 65px; padding: 9px; display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 9px; color: white; background: var(--green-dark); border-radius: 8px; }
.hold-button i { width: 40px; height: 40px; display: block; background: var(--green); border: 8px solid rgba(255,255,255,0.2); border-radius: 50%; animation: breathe 2s infinite; }
.hold-button span { display: flex; flex-direction: column; }
.hold-button b { font-size: 12px; }
.hold-button small { color: rgba(255,255,255,0.63); font-size: 8px; }
.home-indicator { width: 82px; height: 4px; margin: 12px auto 0; background: var(--ink); border-radius: 999px; }

.platform-strip { min-height: 270px; padding: 64px max(24px, calc((100% - 1160px) / 2)); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 50px; background: var(--green); }
.platform-strip > div:first-child { max-width: 770px; }
.kicker { margin: 0 0 15px; color: var(--green-dark); font-size: 12px; font-weight: 900; letter-spacing: 0.11em; text-transform: uppercase; }
h2 { margin: 0; font-size: 48px; line-height: 1.06; font-weight: 840; }
.platform-switch { padding: 4px; display: flex; background: rgba(255,255,255,0.38); border-radius: 8px; }
.platform-switch button { min-width: 94px; height: 44px; border: 0; border-radius: 6px; color: var(--green-dark); background: transparent; font-weight: 800; cursor: pointer; }
.platform-switch button.is-active { color: white; background: var(--ink); }

.feature-intro { padding: 115px max(24px, calc((100% - 1160px) / 2)) 70px; }
.feature-intro h2 { max-width: 700px; }
.feature-intro > p:last-child { max-width: 620px; margin: 24px 0 0; color: var(--soft-ink); font-size: 18px; }
.feature-bands { padding: 0 max(24px, calc((100% - 1160px) / 2)) 110px; display: grid; gap: 16px; }
.feature-band { min-height: 390px; display: grid; grid-template-columns: 0.9fr 1.1fr; align-items: stretch; overflow: hidden; border-radius: 8px; }
.feature-green { background: var(--blue); }
.feature-yellow { background: var(--yellow); }
.feature-blue { background: var(--blue); }
.feature-copy { padding: 54px; display: flex; flex-direction: column; justify-content: center; }
.feature-copy > span { margin-bottom: 64px; font-size: 12px; font-weight: 900; }
.feature-copy h3 { max-width: 470px; margin: 0; font-size: 38px; line-height: 1.07; }
.feature-copy p { max-width: 500px; margin: 20px 0 0; color: var(--soft-ink); }
.voice-visual, .score-visual, .persist-visual { min-height: 390px; display: flex; align-items: center; justify-content: center; }
.voice-visual { gap: 8px; color: white; background: var(--green-dark); }
.voice-visual i { width: 12px; height: 78px; display: block; border-radius: 8px; background: var(--green); animation: wave 1.4s ease-in-out infinite alternate; }
.voice-visual i:nth-child(2), .voice-visual i:nth-child(5) { height: 120px; animation-delay: -0.3s; }
.voice-visual i:nth-child(3), .voice-visual i:nth-child(4) { height: 170px; animation-delay: -0.6s; }
.voice-visual span { position: absolute; margin-top: 250px; color: rgba(255,255,255,0.6); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.score-visual { background: var(--white); flex-wrap: wrap; align-content: center; }
.score-visual small { width: 100%; color: var(--green-dark); text-align: center; font-weight: 900; letter-spacing: 0.16em; }
.score-visual strong { font-size: 112px; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.score-visual span { align-self: flex-end; margin: 0 0 18px 8px; color: var(--soft-ink); font-size: 12px; font-weight: 900; }
.persist-visual { padding: 50px; flex-direction: column; gap: 14px; background: var(--ink); }
.persist-visual div { width: min(420px, 100%); min-height: 82px; padding: 18px 20px; display: flex; flex-direction: column; color: white; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18); border-radius: 8px; }
.persist-visual span { color: rgba(255,255,255,0.6); font-size: 11px; }
.persist-visual b { margin-top: 5px; font-size: 22px; }

.native-section { padding: 110px max(24px, calc((100% - 1160px) / 2)); display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 100px; background: var(--white); }
.native-copy > p:last-child { margin: 24px 0 0; color: var(--soft-ink); font-size: 17px; }
.native-grid { display: grid; gap: 16px; }
.native-grid article { min-height: 150px; padding: 28px; display: grid; grid-template-columns: 55px 1fr; gap: 20px; align-items: center; border: 1px solid var(--line); border-radius: 8px; }
.native-grid h3 { margin: 0; font-size: 22px; }
.native-grid p { margin: 8px 0 0; color: var(--soft-ink); }
.platform-glyph { width: 52px; height: 52px; display: grid; place-items: center; color: white; background: var(--ink); border-radius: 13px; font-size: 26px; }
.platform-glyph.triangle { color: var(--green); }
.trust-strip { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--white); }
.trust-strip div { min-height: 170px; padding: 38px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--line); }
.trust-strip div:last-child { border-right: 0; }
.trust-strip strong { font-size: 19px; }
.trust-strip span { margin-top: 8px; color: var(--soft-ink); }

.faq-section { padding: 110px max(24px, calc((100% - 1160px) / 2)); display: grid; grid-template-columns: 0.75fr 1.25fr; gap: 90px; }
.faq-list { border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); }
summary { position: relative; padding: 24px 42px 24px 0; cursor: pointer; font-size: 18px; font-weight: 780; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; top: 20px; right: 4px; font-size: 24px; font-weight: 400; }
details[open] summary::after { content: "−"; }
details p { margin: -8px 40px 24px 0; color: var(--soft-ink); }

.download-section { padding: 110px 24px; color: white; text-align: center; background: var(--ink); }
.download-mark { width: 78px; height: 78px; margin: 0 auto 30px; display: grid; place-items: center; color: var(--ink); background: var(--green); border-radius: 18px; font-size: 38px; font-weight: 900; transform: rotate(-5deg); }
.download-section .kicker { color: var(--green); }
.download-section h2 { font-size: 56px; }
.download-section > p:not(.kicker) { color: rgba(255,255,255,0.66); }
.download-section .store-actions { justify-content: center; }
.site-footer { min-height: 190px; padding: 42px max(24px, calc((100% - 1160px) / 2)); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; background: var(--paper); }
.site-footer > div { display: flex; gap: 24px; }
.site-footer small { grid-column: 1 / -1; color: var(--soft-ink); font-size: 12px; }

@keyframes breathe { 50% { transform: scale(0.86); } }
@keyframes wave { to { transform: scaleY(0.45); opacity: 0.65; } }

@media (max-width: 960px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-header nav { display: none; }
  .hero { min-height: 1180px; padding-top: 140px; grid-template-columns: 1fr; gap: 30px; text-align: center; }
  .hero-copy { margin: 0 auto; }
  .availability, .hero .store-actions { margin-left: auto; margin-right: auto; justify-content: center; }
  .hero-copy > p:not(.launch-note), .launch-note { margin-left: auto; margin-right: auto; }
  .device-scene { min-height: 650px; }
  .platform-strip { grid-template-columns: 1fr; }
  .platform-switch { width: max-content; }
  .feature-band { grid-template-columns: 1fr; }
  .native-section, .faq-section { grid-template-columns: 1fr; gap: 60px; }
  .trust-strip { grid-template-columns: 1fr; }
  .trust-strip div { min-height: 130px; border-right: 0; border-bottom: 1px solid var(--line); }
  .trust-strip div:last-child { border-bottom: 0; }
}

@media (max-width: 620px) {
  .site-header { top: 8px; width: calc(100% - 16px); min-height: 58px; }
  .brand { font-size: 14px; }
  .brand-mark { width: 30px; height: 30px; }
  .header-link { font-size: 12px; }
  .hero { min-height: 1050px; padding: 120px 18px 60px; }
  h1 { font-size: 47px; }
  h2, .download-section h2 { font-size: 36px; }
  .hero-copy > p:not(.launch-note) { font-size: 17px; }
  .store-actions { flex-direction: column; }
  .store-button { width: 100%; }
  .device-scene { min-height: 555px; transform: scale(0.82); margin: -40px -70px -55px; }
  .phone-back { transform: translate(-72px, 18px) rotate(-8deg); }
  .phone-front { transform: translate(72px, -8px) rotate(6deg); }
  .phone-front.is-android { transform: translate(72px, -8px) rotate(3deg); }
  .platform-strip, .feature-intro, .native-section, .faq-section { padding: 76px 20px; }
  .platform-switch { width: 100%; }
  .platform-switch button { flex: 1; }
  .feature-bands { padding: 0 12px 76px; }
  .feature-band { min-height: auto; }
  .feature-copy { padding: 34px 24px 42px; }
  .feature-copy > span { margin-bottom: 42px; }
  .feature-copy h3 { font-size: 31px; }
  .voice-visual, .score-visual, .persist-visual { min-height: 310px; }
  .score-visual strong { font-size: 76px; }
  .native-grid article { padding: 22px; grid-template-columns: 48px 1fr; }
  .platform-glyph { width: 46px; height: 46px; }
  .trust-strip div { padding: 28px 20px; }
  .site-footer { grid-template-columns: 1fr; }
  .site-footer > div { flex-direction: column; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}