/* Cinematic presentation. Existing feature content and store destinations remain in index.html. */
:root {
  --bg: #030813;
  --bg-elevated: #0b1423;
  --bg-card: #0a111e;
  --bg-card-hover: #101e33;
  --blue: #77b8ff;
  --white-50: #a4afc0;
  --white-30: #939fb2;
  --page-gutter: clamp(24px, 5vw, 96px);
}
html { overflow-x: clip; scroll-padding-top: 110px; }
body { overflow-x: clip; }
button { font: inherit; }
a, button { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 2px solid #a6d8ff; outline-offset: 6px; }
.skip-link { position: fixed; top: 12px; left: 20px; padding: 16px; background: white; color: #030813; z-index: 2000; transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.scroll-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background: #77b8ff; transform: scaleX(0); transform-origin: left; z-index: 1100; pointer-events: none; }
.navbar {
  top: 24px;
  width: calc(100% - var(--page-gutter) * 2);
  padding: 10px 14px 10px 22px;
  background: rgba(7, 14, 27, .94);
  border-color: rgba(255,255,255,.2);
  box-shadow: 0 16px 48px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.16);
  transition: background .25s, border-color .25s, box-shadow .25s;
}
.navbar.nav-sequence {
  opacity: 0;
  transform: translateX(-50%) translateY(-14px);
  pointer-events: none;
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.16,1,.3,1), background .25s, border-color .25s, box-shadow .25s;
}
.navbar.nav-sequence.nav-revealed {
  opacity: 1;
  transform: translateX(-50%);
  pointer-events: auto;
}
.navbar.scrolled { background: rgba(5, 12, 24, .97); }
.nav-brand { min-height: 48px; }
.nav-links a { min-height: 48px; display: inline-flex; align-items: center; color: #d2d9e6; }
.nav-hamburger { min-width: 48px; min-height: 48px; align-items: center; justify-content: center; }
.nav-links.open {
  background: rgba(7, 14, 27, .98);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 48px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.12);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .navbar {
    background: linear-gradient(125deg, rgba(43, 62, 86, .66), rgba(9, 17, 31, .57) 54%, rgba(22, 37, 58, .6));
    -webkit-backdrop-filter: blur(24px) saturate(170%);
    backdrop-filter: blur(24px) saturate(170%);
  }
  .navbar.scrolled {
    background: linear-gradient(125deg, rgba(34, 52, 75, .82), rgba(6, 13, 25, .78) 54%, rgba(16, 29, 49, .8));
    border-color: rgba(255,255,255,.25);
  }
  .navbar .nav-links.open {
    background: linear-gradient(145deg, rgba(24, 38, 58, .82), rgba(5, 12, 24, .78));
    -webkit-backdrop-filter: blur(24px) saturate(170%);
    backdrop-filter: blur(24px) saturate(170%);
  }
}
@media (prefers-reduced-transparency: reduce) {
  .navbar, .navbar.scrolled, .navbar .nav-links.open {
    background: rgba(5, 12, 24, .98);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
.hero { isolation: isolate; max-width: none; width: 100%; min-height: 100vh; min-height: 100svh; padding: 160px var(--page-gutter) 108px; margin: 0; text-align: left; align-items: flex-start; justify-content: flex-end; background: #000; }
.hero-picture, .hero-shade { position: absolute; inset: 0; z-index: -2; }
.hero-sequence .hero-picture { opacity: 0; transform: scale(1.075); transition: opacity 2s cubic-bezier(.2,.7,.2,1), transform 2s cubic-bezier(.2,.7,.2,1); }
.hero-sequence.hero-background-revealed .hero-picture { opacity: 1; }
.hero-sequence.hero-revealed .hero-picture { transform: scale(1); }
.hero-picture img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; transform: scale(var(--hero-scale, 1)); }
.hero-shade { z-index: -1; background: linear-gradient(0deg, #030813 0%, rgba(3,8,19,.84) 12%, rgba(3,8,19,.12) 63%, rgba(3,8,19,.13) 100%), linear-gradient(90deg,rgba(0,6,20,.25), transparent 70%); }
.hero-content { width: 100%; position: relative; }
.hero-sequence .hero-content, .hero-sequence .hero-bottom {
  opacity: 0;
  transform: translateY(24px);
  pointer-events: none;
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.16,1,.3,1);
}
.hero-sequence.hero-revealed .hero-content, .hero-sequence.hero-revealed .hero-bottom {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.hero-sequence .hero-bottom { transition-delay: 140ms; }
.hero-label, .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .17em; line-height: 1.5; color: #95caff; text-transform: uppercase; margin: 0 0 24px; }
.hero-label { color: #d9e9ff; margin-bottom: 18px; }
.hero h1 { font-size: clamp(68px, 7.8vw, 156px); font-weight: 600; line-height: .95; letter-spacing: -.065em; margin: 0 0 25px; }
.hero h1 em { font-weight: 500; color: #b2d7ff; }
.hero-title-copy, .hero-title-line { display: block; }
.kinetic-word {
  display: inline-block;
  opacity: 1;
  transform: none;
  filter: none;
}
.hero-sequence .kinetic-word {
  opacity: 0;
  transform: translateY(.5em) rotateX(-18deg) scale(.98);
  transform-origin: left bottom;
  filter: blur(10px);
}
.hero-sequence.hero-revealed .hero-title.headline-in-view .kinetic-word {
  opacity: 1;
  transform: none;
  filter: blur(0);
  animation: hero-word-enter .9s cubic-bezier(.16,1,.3,1) both;
  animation-delay: var(--word-delay, 0ms);
}
@keyframes hero-word-enter {
  from { opacity: 0; transform: translateY(.5em) rotateX(-18deg) scale(.98); filter: blur(10px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
.hero-desc { font-size: 16px; line-height: 1.65; color: #d1dbea; margin-bottom: 26px; max-width: 560px; }
.hero-buttons { justify-content: flex-start; gap: 12px; }
.btn-primary { min-height: 52px; font-size: 13px; padding: 14px 22px; }
.hero-bottom { position: absolute; bottom: 22px; left: var(--page-gutter); right: var(--page-gutter); display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #bdc9dc; font-size: 10px; letter-spacing: .14em; }
.hero-bottom a { min-height: 48px; display: flex; gap: 28px; align-items: center; letter-spacing: .02em; font-size: 12px; }
.hero-bottom a span { font-size: 24px; }
.about-section, .features-section, .journey-section, .support { padding: clamp(96px, 12vw, 190px) var(--page-gutter); }
.intro, .section-heading { max-width: 1248px; margin: 0 auto; padding: 0; }
.intro { text-align: center; }
.intro h2, .section-heading h2, .support h2, .cta h2 { font-size: clamp(52px, 7.6vw, 128px); font-weight: 500; line-height: 1.01; letter-spacing: -.065em; margin-bottom: 30px; }
.intro h2 span, .section-heading h2 span, .highlight-item h3 span, .support h2 span { color: #8db9ee; }
.section-description { color: var(--white-50); font-size: clamp(16px, 1.4vw, 19px); line-height: 1.8; max-width: 600px; margin: 0 0 52px; }
.intro .section-description { margin: 30px auto 60px; }
.app-showcase { position: relative; display: flex; align-items: center; justify-content: center; gap: clamp(16px,4vw,64px); max-width: 1250px; margin: auto; padding: 50px 0; isolation: isolate; }
.app-showcase::before { content: ''; position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse, rgba(22,88,180,.22),transparent 67%); }
.showcase-word { position: absolute; z-index: -1; top: 37%; left: 50%; transform: translateX(-50%); font-size: clamp(65px,15vw,235px); white-space: nowrap; color: #102544; font-weight: 800; letter-spacing: -.075em; }
.app-showcase img { display: block; height: auto; object-fit: contain; filter: drop-shadow(0 28px 24px rgba(0,0,0,.35)); }
.showcase-main { width: 29%; max-width: 335px; transform: translateY(calc(var(--showcase-lift, 0px) * -1)); }
.showcase-side { width: 24%; max-width: 270px; }
.showcase-side.left { transform: translateY(var(--showcase-lift, 0px)) rotate(-7deg); }
.showcase-side.right { transform: translateY(var(--showcase-lift, 0px)) rotate(7deg); }
.visual-caption, .journey-caption { color: #a4afc0; font-size: 11px; line-height: 1.6; text-align: center; letter-spacing: .07em; }
.features-section { border-top: 1px solid #1b273c; background: linear-gradient(180deg, #071020, #030813); }
.features-grid { max-width: 1248px; padding: 0; gap: 0; border-top: 1px solid #243149; border-left: 1px solid #243149; }
.feature-card { border: 0; border-right: 1px solid #243149; border-bottom: 1px solid #243149; border-radius: 0; padding: 40px 32px; background: transparent; }
.feature-icon { background: #0c1e36; border: none; border-radius: 50%; height: 48px; width: 48px; margin-bottom: 35px; }
.feature-card h3 { font-weight: 500; font-size: 25px; }
.feature-card p { color: #aab5c7; font-size: 15px; }
.journey-section { padding-bottom: 0; }
.journey-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 7vw; max-width: 1248px; margin: 75px auto 0; align-items: start; }
.journey-visual { position: sticky; top: 116px; height: min(72vh, 760px); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.journey-orbit { position: absolute; width: 105%; aspect-ratio: 1; border: 1px solid #173250; border-radius: 50%; background: radial-gradient(ellipse, #0c2c58 0%,transparent 66%); z-index: -1; }
.journey-orbit::after { content: ''; position: absolute; inset: 12%; border: 1px solid #183254; border-radius: 50%; }
.journey-screens { height: calc(100% - 38px); aspect-ratio: 1530 / 3036; position: relative; max-width: 100%; }
.journey-screens img { position: absolute; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: translateY(20px); transition: opacity .45s, transform .65s cubic-bezier(.2,.7,.2,1); }
.journey-screens img.active { opacity: 1; transform: none; }
.journey-caption { margin-top: 22px; }
.highlights { gap: 0; padding: 0; margin: 0; max-width: none; }
.highlight-item { min-height: 85vh; display: block; padding: 100px 0; border-top: 1px solid #263146; }
.highlight-number { font-size: 14px; font-weight: 500; color: #91b7e8; margin-bottom: 26px; }
.highlight-item .eyebrow { font-size: 11px; margin-bottom: 24px; color: #b9cae0; }
.highlight-item h3 { font-size: clamp(42px, 4.9vw, 84px); font-weight: 500; line-height: 1.04; letter-spacing: -.065em; margin-bottom: 28px; }
.highlight-item p { max-width: 510px; font-size: 16px; line-height: 1.8; }
.highlight-item .feature-note { font-size: 13px; margin-top: 16px; }
.text-link { min-height: 48px; display: inline-flex; align-items: center; gap: 34px; font-size: 14px; margin-top: 30px; border-bottom: 1px solid #5a81ad; }
.text-link span { font-size: 21px; }
.cta { max-width: none; min-height: 90vh; min-height: 90svh; padding: 150px var(--page-gutter); display: grid; place-items: center; isolation: isolate; background: radial-gradient(ellipse at 70% 50%, #074b86 0%, #062148 38%, #030813 75%); }
.cta::before { display: none; }
#atmosphere { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; opacity: .7; pointer-events: none; }
.cta::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(#030813,rgba(3,8,19,.05) 25%,rgba(3,8,19,.2) 75%,#030813); }
.cta-content { max-width: 1248px; width: 100%; }
.cta h2 { font-size: clamp(62px, 10.6vw, 174px); margin-bottom: 38px; }
.cta h2 span { color: #b9deff; }
.cta p { max-width: 510px; margin-left: auto; margin-right: auto; color: #d6dfed; }
.cta .eyebrow { margin-bottom: 32px; font-size: 12px; color: #b4d9ff; }
.download-buttons { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.cta .download-note { font-size: 12px; margin: 22px auto 0; color: #b5c8e1; }
.motion-toggle { position: absolute; bottom: 22px; right: var(--page-gutter); min-height: 48px; padding: 10px 16px; background: rgba(3,8,19,.75); border: 1px solid #6680a0; border-radius: 24px; color: #d1deef; font-size: 12px; cursor: pointer; }
.support { max-width: 1440px; text-align: left; }
.support h2 { font-size: clamp(50px, 7vw, 110px); }
.support .eyebrow { color: #95caff; margin-bottom: 24px; font-size: 12px; }
.support-cards { max-width: 820px; gap: 24px; margin-top: 50px; }
.support-card { border-radius: 0; background: transparent; border: 0; border-top: 1px solid #334158; padding: 28px 0; }
.support-card h4 { font-size: 20px; }
.support-card p { font-size: 15px; }
.support a.email { display: inline-flex; align-items: center; min-height: 48px; }
.section-gap-sm { height: 0; }
.footer { padding: 32px var(--page-gutter); }
.footer-links a { display: inline-flex; min-height: 48px; align-items: center; }
.footer-brand { min-height: 48px; }
/* Content stays visible if JavaScript fails or is disabled. */
.fade-in { opacity: 1; transform: none; }
.motion-ready .fade-in:not(.visible) { opacity: 0; transform: translateY(24px); }
.reveal-heading { transition: opacity .7s, transform .8s cubic-bezier(.16,1,.3,1); }
.motion-ready .reveal-heading:not(.visible) { opacity: 0; transform: translateY(32px); }
.reveal-heading.visible { opacity: 1; transform: none; }
.store-short { display: none; }
@media (min-width: 701px) and (max-height: 700px) {
  .hero { padding-top: 155px; }
  .hero h1 { font-size: clamp(64px, 7vw, 98px); }
  .journey-visual { top: 105px; height: 68vh; }
}
@media (max-width: 1000px) {
  .journey-layout { gap: 40px; grid-template-columns: .8fr 1.2fr; }
  .highlight-item h3 { font-size: clamp(38px,5.2vw,60px); }
  .feature-card { padding: 32px 24px; }
}
@media (max-width: 700px) {
  .navbar { top: 12px; width: calc(100% - 32px); padding: 5px 10px 5px 16px; border-radius: 40px; }
  .nav-links.open { background: #0b1423; }
  .nav-links.open a { width: 100%; }
  .hero { min-height: 100svh; padding: max(42svh, 290px) 24px 76px; }
  .hero-sequence .hero-picture { transform: scale(1.045); }
  .hero-sequence.hero-revealed .hero-picture { transform: scale(1); }
  .hero-picture img { object-position: center top; }
  .hero-shade { background: linear-gradient(0deg, #030813 0%, rgba(3,8,19,.88) 15%,rgba(3,8,19,.35) 42%,transparent 65%); }
  .hero-label { font-size: 10px; letter-spacing: .14em; margin-bottom: 16px; }
  .hero h1 { font-size: clamp(36px, 10.8vw, 68px); line-height: 1.02; letter-spacing: -.065em; margin-bottom: 18px; }
  .hero-desc { font-size: 14px; margin-bottom: 20px; }
  .hero-buttons { flex-direction: row; gap: 10px; }
  .hero-buttons .btn-primary { width: auto; flex: 1 1 120px; padding: 12px 10px; font-size: 11px; gap: 8px; min-height: 48px; }
  .hero-buttons .btn-primary svg { width: 16px; height: 16px; flex-shrink: 0; }
  .hero-buttons .store-full { display: none; }
  .hero-buttons .store-short { display: inline; }
  .hero-bottom { left: 24px; right: 24px; bottom: 12px; }
  .hero-bottom > span { display: none; }
  .hero-bottom a { width: 100%; justify-content: space-between; }
  .about-section, .features-section, .journey-section, .support { padding: 88px 24px; }
  .intro h2, .section-heading h2, .support h2 { font-size: clamp(43px, 10vw, 68px); }
  .eyebrow { font-size: 10px; letter-spacing: .13em; }
  .section-description { font-size: 16px; margin-bottom: 38px; }
  .intro .section-description { margin-bottom: 22px; }
  .app-showcase { padding: 28px 0; gap: 12px; }
  .showcase-main { width: 39%; }
  .showcase-side { width: 27%; }
  .showcase-word { display: none; }
  .visual-caption { font-size: 10px; margin-top: 18px; }
  .features-grid { grid-template-columns: 1fr; }
  .feature-card { padding: 28px; }
  .feature-icon { margin-bottom: 22px; }
  .journey-layout { display: block; margin-top: 38px; }
  .journey-visual { display: none; }
  .highlight-item { min-height: auto; padding: 54px 0; }
  .highlight-item h3 { font-size: clamp(44px,10vw,66px); }
  .highlight-item p { font-size: 16px; }
  .highlight-number { margin-bottom: 16px; font-size: 13px; }
  .highlight-item .eyebrow { margin-bottom: 20px; }
  .text-link { margin-top: 18px; }
  .journey-section { padding-bottom: 15px; }
  .cta { padding: 110px 24px; min-height: 80svh; }
  .cta h2 { font-size: clamp(54px,12.5vw,86px); }
  .cta p { font-size: 16px; }
  .download-buttons { max-width: 360px; margin: auto; }
  .download-buttons .btn-primary { width: 100%; }
  .motion-toggle { right: 24px; }
  .support-cards { grid-template-columns: 1fr; gap: 0; margin-top: 34px; }
  .footer-inner { gap: 6px; }
}
@media (max-width: 700px) and (max-height: 700px) {
  .hero { padding-top: max(35svh, 190px); padding-bottom: 68px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .navbar.nav-sequence { opacity: 1 !important; transform: translateX(-50%) !important; pointer-events: auto !important; }
  .motion-ready .fade-in, .motion-ready .reveal-heading { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .hero-picture img, .showcase-main { transform: none; }
  .hero-sequence .hero-picture, .hero-sequence .hero-content, .hero-sequence .hero-bottom { transform: none !important; opacity: 1 !important; filter: none !important; transition: none !important; }
  .hero-sequence .kinetic-word { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
}