.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:root{--accent:#70F1C9}

body{margin:0;background:#050607}
a{color:#F2F5F4;text-decoration:none}a:hover{color:#70F1C9}
.page{container-type:inline-size;container-name:page;background:#050607;color:#F2F5F4;font-family:'Barlow',system-ui,-apple-system,sans-serif;font-size:18px;line-height:1.5;overflow-x:clip;-webkit-font-smoothing:antialiased}
.page *{box-sizing:border-box}
.mono{font-family:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;font-variant-numeric:tabular-nums}
.display{font-family:'Barlow Condensed','Arial Narrow',sans-serif;text-transform:uppercase;letter-spacing:-0.01em;line-height:.9;overflow-wrap:break-word}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding-inline:clamp(16px,4cqi,40px)}
.kicker{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}

.accent{color:var(--accent)}

/* ── 3D devices: real mockup PNG on top, screenshot in the exact screen rect, a side edge and glare for depth ── */
.device{position:absolute;aspect-ratio:900/1840;filter:drop-shadow(0 40px 60px rgba(0,0,0,.8))}
.device-body{position:absolute;inset:0}
.device-screen{position:absolute;left:5.333%;top:2.5%;width:89.333%;height:95%;object-fit:cover;border-radius:14.9% / 6.9%;background:#000}
.device-glare,.watch-glare{display:none}
.device-frame{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.watch{position:absolute;aspect-ratio:600/940;filter:drop-shadow(0 30px 50px rgba(0,0,0,.85))}
.watch-screen{position:absolute;left:15.833%;top:23.298%;width:68.333%;height:53.404%;object-fit:cover;border-radius:26.6% / 21.7%;background:#000}
.watch-glare{position:absolute;left:15.833%;top:23.298%;width:68.333%;height:53.404%;border-radius:26.6% / 21.7%;background:linear-gradient(125deg,rgba(255,255,255,.2),rgba(255,255,255,0) 45%);pointer-events:none}

/* ── Bento ── */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px}
.span-4{grid-column:span 4}.span-5{grid-column:span 5}.span-6{grid-column:span 6}.span-7{grid-column:span 7}.span-8{grid-column:span 8}.span-12{grid-column:span 12}
.tile{position:relative;overflow:hidden;isolation:isolate;border-radius:28px;border:1px solid transparent;background:linear-gradient(#0B0E0F,#0B0E0F) padding-box,linear-gradient(165deg,rgba(255,255,255,.17),rgba(255,255,255,.04) 38%,rgba(112,241,201,.24)) border-box;display:flex;flex-direction:column}
.tile::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(110% 70% at 15% 0%,rgba(112,241,201,.09),rgba(112,241,201,0) 60%)}
.tile-copy{position:relative;z-index:2;padding:34px 36px 0;display:flex;flex-direction:column;gap:12px}
.tile-media{position:relative;flex:1}
.chip{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.08em;border:1px solid #262C30;border-radius:999px;padding:7px 13px;color:#C9D2D0;background:rgba(5,6,7,.6)}
.float-card{position:absolute;z-index:5;background:rgba(12,15,16,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.1);border-radius:16px;box-shadow:0 30px 60px -20px rgba(0,0,0,.9)}
.pro-badge{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;font-weight:700;letter-spacing:.14em;padding:4px 8px;border-radius:6px;background:var(--accent);color:#04140F}

.ba{position:absolute;inset:0;--p:50%;overflow:hidden;touch-action:pan-y}
.ba video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
#ba-after{clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.ba-line{position:absolute;top:0;bottom:0;left:var(--p);width:2px;margin-left:-1px;background:#F2F5F4;box-shadow:0 0 18px rgba(0,0,0,.6);pointer-events:none}
.ba-knob{position:absolute;top:50%;left:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:#F2F5F4;color:#050607;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 30px rgba(0,0,0,.6)}
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}
.ba-range:focus-visible~.ba-line .ba-knob{outline:3px solid var(--accent);outline-offset:3px}
/* ── Motion ── */
@keyframes bestFlashA{0%{background:#70F1C9;color:#04140F;transform:scale(1.06)}100%{background:rgba(112,241,201,.12);color:#70F1C9;transform:scale(1)}}
@keyframes bestFlashB{0%{background:#70F1C9;color:#04140F;transform:scale(1.06)}100%{background:rgba(112,241,201,.12);color:#70F1C9;transform:scale(1)}}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes reveal{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes voiceBar{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.live-dot{animation:livePulse 1.2s ease-in-out infinite}
.marquee-track{display:flex;gap:44px;width:max-content;animation:marquee 46s linear infinite}
.voice-bar{transform-origin:center;animation:voiceBar 1.1s ease-in-out infinite}
.floating{animation:floatY 6s ease-in-out infinite}
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .reveal{animation:reveal linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
  }
}
@media (prefers-reduced-motion: reduce){
  .live-dot,.marquee-track,.voice-bar,.floating{animation:none}
}

/* ── Responsive ── */
.hero-video-portrait{display:none}
.mobile-bar{display:none}
.nav-links{display:flex}
@container page (max-width: 1000px){
  .span-4,.span-5,.span-6,.span-7,.span-8{grid-column:span 12}
}
@container page (max-width: 760px){
  .hero-video-landscape{display:none}
  .hero-video-portrait{display:block}
  .nav-links{display:none}
  .mobile-bar{display:flex}
  .hero-back-device{display:none}
  .hero-stage{min-height:560px !important}
  .tile-copy{padding:26px 24px 0}
}

/* ── Footer language switch ── */
.lang{display:flex;gap:4px;font-size:13px}
.lang a{padding:10px 9px;border-radius:8px}
.lang a[aria-current]{background:#14181A;color:#F2F5F4}

/* ── Support and privacy pages ── */
.doc{max-width:760px;margin:0 auto;padding:72px clamp(16px,4cqi,40px) 96px;font-size:17px;color:#C9D2D0}
.doc h1,.doc h2{font-family:'Barlow Condensed','Arial Narrow',sans-serif;text-transform:uppercase;font-style:italic;font-weight:800;letter-spacing:-0.01em;line-height:.95;color:#F2F5F4;overflow-wrap:break-word}
.doc h1{margin:0 0 14px;font-size:clamp(52px,9cqi,88px)}
.doc h2{margin:52px 0 14px;font-size:38px}
.doc h3{margin:30px 0 6px;font-size:19px;font-weight:600;color:#F2F5F4}
.doc p{margin:0 0 12px}
.doc .muted{color:#A9B3B1}
.doc a{color:var(--accent)}
.doc a:hover{color:#F2F5F4}