:root{
  --bg:#06101F; --bg-2:#0b1524; --panel:rgba(255,255,255,.04); --panel-brd:rgba(255,255,255,.09);
  --coral:#F9425F; --coral-2:#FB7389; --gold:#EFB873; --amber:#F1BA41; --blue:#47A1F9; --cream:#FDFFDA;
  --ink:#FFFFFF; --muted:#9DB0CC; --muted-2:#6F84A3;
  --maxw:1140px; --r:22px;
  --safe-b:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--muted);
  font-family:"Heebo",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
h1,h2,h3{font-family:"Space Grotesk","Heebo",sans-serif; color:var(--ink); line-height:1.08; margin:0; letter-spacing:-.02em}
a{color:var(--coral-2); text-decoration:none}
img,svg{display:block; max-width:100%}
.container{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 22px}

/* ---------- animated aurora background ---------- */
.aurora{position:fixed; inset:0; z-index:-2; overflow:hidden; background:
  radial-gradient(1200px 700px at 80% -10%, rgba(249,66,95,.20), transparent 60%),
  radial-gradient(1000px 650px at 0% 10%, rgba(71,161,249,.18), transparent 55%),
  radial-gradient(900px 600px at 60% 110%, rgba(241,186,65,.14), transparent 60%),
  var(--bg);}
.aurora::before,.aurora::after{content:""; position:absolute; width:60vmax; height:60vmax; border-radius:50%; filter:blur(70px); opacity:.5; mix-blend-mode:screen;}
.aurora::before{background:radial-gradient(circle,var(--coral),transparent 60%); top:-20vmax; left:-10vmax; animation:drift1 22s ease-in-out infinite alternate;}
.aurora::after{background:radial-gradient(circle,var(--blue),transparent 60%); bottom:-25vmax; right:-15vmax; animation:drift2 26s ease-in-out infinite alternate;}
@keyframes drift1{to{transform:translate(18vw,14vh) scale(1.2)}}
@keyframes drift2{to{transform:translate(-16vw,-12vh) scale(1.15)}}
.grain{position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.03) 1px,transparent 1px); background-size:3px 3px;}

/* ---------- header ---------- */
.site-header{position:sticky; top:0; z-index:50; padding:14px 0;
  backdrop-filter:saturate(140%) blur(14px); -webkit-backdrop-filter:saturate(140%) blur(14px);
  background:linear-gradient(to bottom,rgba(6,16,31,.85),rgba(6,16,31,.35)); border-bottom:1px solid rgba(255,255,255,.06);}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:16px}
.header-right{display:flex; align-items:center; gap:10px}
.brand{display:flex; align-items:center; gap:10px}
.brand img{width:120px; height:auto}
.nav{display:none; gap:24px; font-size:15px; font-weight:500}
.nav a{color:var(--muted)}
.nav a:hover{color:#fff}

/* ---------- language switcher ---------- */
.lang-switch{position:relative}
.lang-switch>summary{list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:7px;
  padding:9px 13px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  color:#fff; font-size:13.5px; font-weight:700; letter-spacing:.02em; white-space:nowrap}
.lang-switch>summary::-webkit-details-marker{display:none}
.lang-switch>summary .flag{font-size:16px; line-height:1}
.lang-switch>summary .car{opacity:.55; font-size:10px; transition:transform .2s ease}
.lang-switch[open]>summary .car{transform:rotate(180deg)}
.lang-menu{position:absolute; right:0; top:calc(100% + 8px); z-index:80; min-width:180px;
  background:#0b1524; border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:6px;
  box-shadow:0 18px 44px rgba(0,0,0,.55)}
.lang-menu a{display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:10px;
  color:var(--muted); font-size:14.5px; font-weight:600}
.lang-menu a:hover{background:rgba(255,255,255,.07); color:#fff}
.lang-menu a.active{color:#fff; background:rgba(249,66,95,.16)}
.lang-menu a .flag{font-size:19px; line-height:1}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:700;
  font-size:15px; padding:13px 22px; border-radius:999px; cursor:pointer; border:1px solid transparent;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease; white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(135deg,var(--coral),#ff6a4d); color:#fff;
  box-shadow:0 10px 30px rgba(249,66,95,.35)}
.btn-primary:hover{box-shadow:0 14px 38px rgba(249,66,95,.5)}
.btn-ghost{background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.14)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.header-cta{padding:10px 18px; font-size:14px}

/* ---------- store badges ---------- */
.stores{display:flex; flex-wrap:wrap; gap:14px; align-items:center}
.store-badge{display:inline-flex; align-items:center; gap:12px; padding:12px 18px; border-radius:16px;
  background:#fff; color:#06101F; min-width:200px; transition:transform .15s ease, box-shadow .2s ease;
  box-shadow:0 12px 30px rgba(0,0,0,.35)}
.store-badge:hover{transform:translateY(-3px); box-shadow:0 18px 40px rgba(0,0,0,.45)}
.store-badge svg{width:30px; height:30px; flex:none}
.store-badge .sb-text{display:flex; flex-direction:column; line-height:1.1; text-align:left}
.store-badge .sb-small{font-size:11px; letter-spacing:.04em; text-transform:uppercase; opacity:.65; font-weight:500}
.store-badge .sb-big{font-size:19px; font-weight:700; font-family:"Space Grotesk",sans-serif}
.store-badge.soon{background:rgba(255,255,255,.05); color:#fff; border:1px solid rgba(255,255,255,.14); box-shadow:none; cursor:default}
.store-badge.soon .sb-small{opacity:.6}
.store-badge.soon:hover{transform:none}
.soon-tag{font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  background:var(--amber); color:#06101F; padding:2px 7px; border-radius:6px; margin-left:auto}

/* ---------- hero ---------- */
.hero{position:relative; padding:46px 0 24px; text-align:center}
.pill{display:inline-flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; color:var(--cream);
  background:rgba(241,186,65,.12); border:1px solid rgba(241,186,65,.3); padding:7px 15px; border-radius:999px}
.pill .dot{width:8px; height:8px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 0 rgba(241,186,65,.6); animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(241,186,65,.55)}70%{box-shadow:0 0 0 10px rgba(241,186,65,0)}100%{box-shadow:0 0 0 0 rgba(241,186,65,0)}}
.hero-title{font-size:clamp(40px,9vw,76px); margin:22px 0 0; font-weight:700}
.hero-title .grad{background:linear-gradient(120deg,var(--coral),var(--gold) 60%,var(--blue));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.hero-lead{font-size:clamp(17px,2.4vw,21px); max-width:560px; margin:20px auto 0; color:var(--muted)}
.hero-cta{margin-top:30px}
.hero-cta.stores{justify-content:center}
.hero-cta .store-badge{justify-content:center}
.hero-rating{display:flex; align-items:center; justify-content:center; gap:10px; margin-top:18px; font-size:14px; color:var(--muted)}
.stars{color:var(--amber); letter-spacing:2px; font-size:15px}
.hero-phone{position:relative; margin:40px auto 0; width:min(230px,59vw)}
.hero-frame{position:relative; width:100%; aspect-ratio:1125/2436; border-radius:42px; padding:10px;
  background:linear-gradient(160deg,#3a4150,#0c1220); box-shadow:0 30px 62px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.08);
  animation:float 6s ease-in-out infinite}
.hero-frame::before{content:""; position:absolute; left:50%; transform:translateX(-50%); z-index:3; background:#05080f}
html.apple .hero-frame::before{top:15px; width:83px; height:24px; border-radius:14px}      /* Dynamic Island */
html.android .hero-frame::before{top:14px; width:13px; height:13px; border-radius:50%;        /* punch-hole camera */
  background:radial-gradient(circle at 35% 35%,#27405e,#05080f 70%)}
.hero-shots{position:relative; width:100%; height:100%; border-radius:32px; overflow:hidden; background:#0c1220}
.hero-shots img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0;
  transition:opacity 1s ease; will-change:opacity}
.hero-shots img.active{opacity:1}
.hero-dots{position:absolute; bottom:-26px; left:0; right:0; display:flex; justify-content:center; gap:7px}
.hero-dots i{width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.25); transition:background .3s ease, width .3s ease}
.hero-dots i.on{background:var(--coral); width:18px; border-radius:4px}
.hero-phone::after{content:""; position:absolute; inset:auto 0 -8% 0; height:60%; z-index:-1;
  background:radial-gradient(closest-side,rgba(249,66,95,.45),transparent 70%); filter:blur(30px)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* ---------- city marquee ---------- */
.marquee{margin-top:34px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); overflow:hidden}
.marquee ul{display:flex; gap:42px; list-style:none; margin:0; padding:0; width:max-content; animation:scroll 28s linear infinite}
.marquee li{font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:18px; color:var(--muted-2); display:flex; align-items:center; gap:42px}
.marquee li::after{content:"✦"; color:var(--amber); opacity:.7}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
.section{padding:64px 0}
.section-head{max-width:680px; margin:0 auto 44px; text-align:center}
.section-kicker{color:var(--coral-2); font-weight:700; font-size:13px; letter-spacing:.14em; text-transform:uppercase}
.section-title{font-size:clamp(30px,5vw,46px); margin-top:12px}
.section-sub{margin-top:16px; font-size:18px}

/* ---------- features ---------- */
.features{display:grid; grid-template-columns:1fr; gap:16px}
.feature{position:relative; background:var(--panel); border:1px solid var(--panel-brd); border-radius:var(--r);
  padding:26px; overflow:hidden; transition:transform .2s ease, border-color .2s ease, background .2s ease}
.feature:hover{transform:translateY(-4px); border-color:rgba(249,66,95,.35); background:rgba(255,255,255,.06)}
.feature .ficon{width:56px; height:56px; margin-bottom:6px}
.feature h3{font-size:21px; margin:16px 0 8px; font-family:"Heebo",sans-serif; font-weight:700}
.feature p{margin:0; font-size:15.5px; color:var(--muted)}
.feature.highlight{background:linear-gradient(160deg,rgba(249,66,95,.16),rgba(241,186,65,.08));
  border-color:rgba(241,186,65,.4); grid-column:1/-1}
.feature.highlight::before{content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background:linear-gradient(120deg,var(--coral),var(--gold),var(--blue)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:.5; pointer-events:none}
.feature .new-tag{position:absolute; top:20px; right:20px; font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; background:var(--amber); color:#06101F; padding:4px 10px; border-radius:8px}

/* ---------- screenshots slider ---------- */
.slider{position:relative; margin-top:8px}
.slider-track{display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  justify-content:safe center; padding:24px 22px 30px; -webkit-overflow-scrolling:touch; scrollbar-width:none; cursor:grab}
.slider-track.dragging{cursor:grabbing; scroll-behavior:auto}
.slider-track::-webkit-scrollbar{display:none}
.slide{flex:0 0 auto; scroll-snap-align:center; display:flex; flex-direction:column; align-items:center; gap:14px}
.phone-frame{position:relative; width:230px; aspect-ratio:1125/2436; border-radius:36px; padding:9px;
  background:linear-gradient(160deg,#3a4150,#0c1220); box-shadow:0 24px 55px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.08);
  transition:transform .25s ease}
.slide:hover .phone-frame{transform:translateY(-6px)}
.phone-frame::before{content:""; position:absolute; left:50%; transform:translateX(-50%); z-index:2; background:#05080f}
html.apple .phone-frame::before{top:14px; width:72px; height:21px; border-radius:13px}
html.android .phone-frame::before{top:13px; width:11px; height:11px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#27405e,#05080f 70%)}
.phone-frame img{width:100%; height:100%; object-fit:cover; border-radius:28px; display:block; pointer-events:none}
.slide-label{font-size:13.5px; font-weight:600; color:var(--muted); font-family:"Space Grotesk",sans-serif}
.slider-arrow{position:absolute; top:44%; z-index:5; width:50px; height:50px; border-radius:50%; display:none;
  place-items:center; cursor:pointer; color:#fff; font-size:24px; border:1px solid rgba(255,255,255,.16);
  background:rgba(11,21,36,.7); backdrop-filter:blur(8px); transition:background .2s ease, transform .15s ease}
.slider-arrow:hover{background:var(--coral)}
.slider-arrow:active{transform:scale(.94)}
.slider-arrow.prev{left:10px}
.slider-arrow.next{right:10px}
.slider-edge{position:absolute; top:0; bottom:0; width:90px; z-index:3; pointer-events:none}
.slider-edge.l{left:0; background:linear-gradient(90deg,var(--bg),transparent)}
.slider-edge.r{right:0; background:linear-gradient(270deg,var(--bg),transparent)}

/* ---------- video ---------- */
.media-wrap{max-width:860px; margin:0 auto; border-radius:24px; overflow:hidden; border:1px solid var(--panel-brd);
  box-shadow:0 30px 70px rgba(0,0,0,.5); background:#000}
.media-wrap video{width:100%; display:block}

/* ---------- download CTA ---------- */
.cta{position:relative; margin:20px auto 0; max-width:980px; padding:54px 28px; border-radius:30px; text-align:center;
  background:linear-gradient(150deg,rgba(249,66,95,.22),rgba(71,161,249,.16)); border:1px solid var(--panel-brd); overflow:hidden}
.cta h2{font-size:clamp(28px,5vw,44px)}
.cta p{max-width:520px; margin:14px auto 26px}
.cta .stores{justify-content:center}

/* ---------- languages band ---------- */
.lang-band{display:grid; gap:24px; padding:clamp(26px,4vw,40px); border-radius:28px; position:relative; overflow:hidden;
  background:linear-gradient(150deg,rgba(71,161,249,.18),rgba(241,186,65,.08)); border:1px solid var(--panel-brd)}
.lang-band .section-kicker{color:var(--blue)}
.lang-band h2{font-size:clamp(26px,4.4vw,40px); margin-top:12px}
.lang-band p{margin:16px 0 0; font-size:17px; max-width:520px}
.lang-chips{display:flex; flex-wrap:wrap; gap:12px; align-content:center}
.lang-chip{display:inline-flex; align-items:center; gap:10px; padding:13px 18px; border-radius:14px;
  background:rgba(255,255,255,.06); border:1px solid var(--panel-brd); color:#fff; font-weight:600;
  font-family:"Space Grotesk",sans-serif; transition:transform .15s ease, border-color .2s ease}
.lang-chip:hover{transform:translateY(-3px); border-color:rgba(71,161,249,.5)}
.lang-chip b{font-size:21px; line-height:1}
@media(min-width:860px){.lang-band{grid-template-columns:1.15fr .85fr; align-items:center; gap:36px}}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid rgba(255,255,255,.07); padding:42px 0 calc(34px + var(--safe-b)); margin-top:24px; font-size:14.5px}
.footer-inner{display:flex; flex-direction:column; gap:26px}
.footer-cols{display:flex; flex-wrap:wrap; gap:30px 60px}
.footer-col h4{color:#fff; font-size:13px; letter-spacing:.1em; text-transform:uppercase; margin:0 0 12px; font-family:"Heebo",sans-serif}
.footer-col a{display:block; color:var(--muted); padding:5px 0}
.footer-col a:hover{color:#fff}
.footer-bottom{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;
  border-top:1px solid rgba(255,255,255,.07); padding-top:22px; color:var(--muted-2)}
.social{display:flex; gap:10px}
.social a{width:38px; height:38px; display:grid; place-items:center; border-radius:50%;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1)}
.social a:hover{background:var(--coral)}
.social svg{width:16px; height:16px; fill:#fff}

/* ---------- platform chooser modal ---------- */
.modal{position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:20px;
  background:rgba(4,8,15,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
.modal.open{display:flex}
.modal-card{position:relative; width:100%; max-width:420px; padding:34px 26px 30px; text-align:center;
  background:#0b1524; border:1px solid rgba(255,255,255,.12); border-radius:24px;
  box-shadow:0 30px 70px rgba(0,0,0,.6); animation:pop .2s ease}
@keyframes pop{from{transform:scale(.94); opacity:0}to{transform:scale(1); opacity:1}}
.modal-card h3{font-size:22px; margin-bottom:20px}
.modal-card .stores{flex-direction:column; align-items:center; gap:12px}
.modal-card .store-badge{width:250px; min-width:0; justify-content:center}
.modal-close{position:absolute; top:12px; right:14px; width:34px; height:34px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); color:#fff; font-size:15px;
  display:grid; place-items:center; transition:background .2s ease}
.modal-close:hover{background:rgba(255,255,255,.14)}

@media (prefers-reduced-motion:reduce){*{animation:none!important}}

/* ---------- responsive ---------- */
@media (max-width:480px){.header-cta{display:none}}
@media (max-width:640px){.hero .stars{display:none}}
/* phones: caption-only benefit cards in a tidy 2-col grid; highlight keeps full copy */
@media (max-width:640px){
  .features{grid-template-columns:1fr 1fr; gap:10px}
  .feature{padding:16px}
  .feature .ficon{width:38px; height:38px; margin-bottom:2px}
  .feature h3{font-size:15px; margin:10px 0 0; line-height:1.2}
  .feature:not(.highlight){text-align:center}
  .feature:not(.highlight) .ficon{margin-left:auto; margin-right:auto}
  .feature:not(.highlight) p{display:none}
  .feature.highlight{grid-column:1/-1; padding:20px}
  .feature.highlight .ficon{width:44px; height:44px}
  .feature.highlight h3{font-size:18px; margin:11px 0 6px}
  .feature.highlight p{display:block; font-size:14px; line-height:1.5}
  .feature .new-tag{top:14px; right:14px}
  .section-head{margin-bottom:28px}
}
@media (min-width:720px){
  .features{grid-template-columns:repeat(2,1fr)}
  .slider-arrow{display:grid}
  .phone-frame{width:250px}
}
@media (min-width:980px){
  .nav{display:flex}
  .features{grid-template-columns:repeat(3,1fr)}
  .feature.highlight{grid-column:span 3}
  .hero-inner{display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:30px}
  .hero-phone{margin:0; width:min(264px,27vw); justify-self:end; align-self:center}
  .hero{padding:70px 0 40px; text-align:left}
  .hero-title{margin-top:24px}
  .hero-lead{margin-left:0; margin-right:0}
  .hero-cta.stores{justify-content:flex-start}
  .hero-rating{justify-content:flex-start}
}