:root{
  --ink0:#02070d; --ink1:#061a30;
  --sky:#4c9bef; --sky-deep:#2e7bd0;
  --hull:#eaf2fb; --muted:rgba(214,230,247,.64);
  --coral:#ff5a4d;
  --disp:ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",sans-serif;
  --edge:clamp(22px,6vw,110px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:#08243f; color:var(--hull); font-family:var(--body);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}

/* ---- ocean canvas (fixed, behind everything; waves + boats live here) ---- */
/* translateZ(0): give the fixed canvas its own GPU layer so it isn't
   re-composited with the scrolling page each frame (steadier on mobile). */
#ocean{position:fixed; inset:0; width:100%; height:100%; z-index:-1; display:block;
  transform:translateZ(0); backface-visibility:hidden}

/* ---- nav ---- */
#nav{position:fixed; top:0; left:0; right:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px var(--edge); transition:background .4s ease, backdrop-filter .4s ease, border-color .4s;
  border-bottom:1px solid transparent}
#nav.stuck{background:rgba(4,14,26,.6); backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3); border-bottom-color:rgba(120,160,210,.14)}
.brand{display:flex; align-items:center; gap:9px;
  font-family:var(--disp); font-weight:800; font-size:1.3rem; letter-spacing:-.02em}
.brand svg{flex:none}
.nav-cta{display:flex; gap:9px}

/* ---- buttons ---- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--body); font-weight:600; font-size:1rem; line-height:1;
  padding:13px 22px; border-radius:999px; cursor:pointer;
  transition:transform .16s cubic-bezier(.22,1,.36,1), box-shadow .16s ease, background .16s}
.btn:active{transform:translateY(1px) scale(.985)}
.btn svg{flex:none}
.btn-ios{color:#04121f; background:var(--hull);
  box-shadow:0 10px 30px -10px rgba(120,180,240,.6)}
.btn-ios:hover{background:#fff; box-shadow:0 14px 38px -10px rgba(120,180,240,.75)}
.btn-mac{color:var(--hull); background:rgba(76,155,239,.14);
  border:1px solid rgba(120,175,235,.34); box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.btn-mac:hover{background:rgba(76,155,239,.24); border-color:rgba(120,175,235,.5)}
.btn-sm{font-size:.9rem; padding:9px 16px}

/* ---- hero ---- */
.hero{min-height:100svh; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; gap:26px; padding:14vh var(--edge) 12vh}
.medallion{width:min(28vh,270px); aspect-ratio:1; position:relative;
  animation:float 7s ease-in-out infinite}
.medallion svg{filter:drop-shadow(0 22px 44px rgba(0,0,0,.5))}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.wordmark{font-family:var(--disp); font-weight:800; font-size:clamp(3.6rem,12vw,8.5rem);
  letter-spacing:-.03em; line-height:.9}
.tag{font-size:clamp(1.1rem,2.3vw,1.6rem); font-weight:500; color:var(--muted);
  text-wrap:balance; max-width:24ch}
.cta{display:flex; gap:13px; flex-wrap:wrap; justify-content:center; margin-top:6px}

/* ---- feature sections ---- */
.feature{display:grid; grid-template-columns:1fr auto; align-items:center;
  gap:clamp(30px,6vw,110px); max-width:1240px; margin:0 auto;
  padding:clamp(60px,12vh,150px) var(--edge)}
.feature.rev{grid-template-columns:auto 1fr}
.feature.rev .f-copy{order:2}
.feature.rev .f-media{order:1}
.f-copy{display:flex; flex-direction:column; gap:22px; max-width:34ch}
h1,h2{font-family:var(--disp); line-height:1.02; letter-spacing:-.02em; text-wrap:balance}
h2{font-size:clamp(2.2rem,5.2vw,4rem); font-weight:800}
.sky{color:var(--sky)}
.lead{font-size:clamp(1.05rem,1.7vw,1.35rem); font-weight:450; color:var(--muted);
  line-height:1.45; max-width:26ch}
.chips{display:flex; gap:9px; flex-wrap:wrap}
.chip{font-size:clamp(.8rem,1.1vw,.95rem); font-weight:600; color:var(--hull);
  padding:8px 15px; border-radius:999px;
  background:rgba(76,155,239,.13); border:1px solid rgba(76,155,239,.28)}

.phone{position:relative; flex:none}
.phone img{height:min(74vh,760px); width:auto;
  filter:drop-shadow(0 44px 90px rgba(0,0,0,.55))}

/* mirror: flat framed screen, no gradient/glow */
.tablet{flex:none}
.tablet img{height:min(74vh,760px); width:auto; border-radius:32px;
  border:1px solid rgba(120,160,210,.28);
  box-shadow:0 40px 84px -24px rgba(0,0,0,.62)}

/* ---- so much more ---- */
.more{max-width:1120px; margin:0 auto; padding:clamp(50px,9vh,120px) var(--edge);
  display:flex; flex-direction:column; align-items:center; gap:clamp(26px,4vh,46px);
  text-align:center}
.more h2{text-align:center}
.fgrid{display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(13px,1.5vw,20px); width:100%}
.fcard{position:relative; isolation:isolate; border:none; border-radius:22px;
  padding:clamp(22px,2.6vw,34px) clamp(14px,1.7vw,22px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:14px; min-height:clamp(120px,15vh,156px);
  background:#16283d;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.14),
    inset 0 0 0 1px rgba(120,160,210,.12),
    0 5px 0 #0a1420,
    0 15px 24px -8px rgba(4,14,28,.8);
  transition:transform .16s cubic-bezier(.22,1,.36,1), box-shadow .16s ease}
.fcard:hover{transform:translateY(3px);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.12),
    inset 0 0 0 1px rgba(120,160,210,.12),
    0 2px 0 #0a1420,
    0 8px 16px -8px rgba(4,14,28,.8)}
.fcard svg{width:clamp(30px,2.8vw,40px); height:clamp(30px,2.8vw,40px);
  color:#63a8f4; stroke:#63a8f4}
.fcard .ft{font-family:var(--disp); font-weight:700; font-size:clamp(1.02rem,1.5vw,1.3rem);
  color:var(--hull); text-shadow:0 1px 0 rgba(0,0,0,.5)}

/* ---- footer ---- */
.footer{display:flex; flex-direction:column; align-items:center; gap:20px;
  text-align:center; padding:clamp(70px,14vh,170px) var(--edge) clamp(60px,10vh,110px)}
.wordmark-img{height:clamp(56px,7vw,84px); width:auto}
.footer .tag{margin-top:-4px}
.fine{font-size:.82rem; color:rgba(214,230,247,.4); letter-spacing:.04em; margin-top:12px}

/* ---- reveal on scroll ---- */
.reveal{opacity:0; transform:translateY(34px); transition:opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1; transform:none}

/* ---- responsive ---- */
@media (max-width:820px){
  .feature,.feature.rev{grid-template-columns:1fr; justify-items:center; text-align:center; gap:34px}
  .feature.rev .f-copy{order:2}
  .feature.rev .f-media{order:1}
  .feature .f-copy{order:2}
  .feature .f-media{order:1}
  .f-copy{align-items:center; max-width:32ch}
  .chips{justify-content:center}
  .phone img{height:min(58vh,560px)}
  .tablet img{height:min(58vh,560px)}
  .fgrid{grid-template-columns:repeat(2,1fr)}
  .nav-cta .btn-mac{display:none}
}
@media (max-width:420px){
  .fgrid{grid-template-columns:repeat(2,1fr)}
  .cta{width:100%}
  .cta .btn{flex:1; min-width:0}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important}
  .reveal{opacity:1; transform:none; transition:none}
}