:root {
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --blue: #0071e3;
  --blue-hover: #0077ed;
  --surface: #f5f5f7;
  --white: #fff;
  --nav-height: 48px;
  --ease: cubic-bezier(.2,.75,.25,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: 20px; background: #fff; box-shadow: 0 5px 20px #0003; }
.skip-link:focus { top: 10px; }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--nav-height);
  background: rgba(250,250,252,.78);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
.site-header.scrolled { border-color: rgba(0,0,0,.08); background: rgba(250,250,252,.92); }
.nav { max-width: 1040px; height: 100%; margin: auto; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; }
.brand { width: 30px; height: 30px; display: grid; place-items: center; }
.brand-mark { width: 19px; height: 19px; border: 2px solid #111; border-radius: 50%; position: relative; }
.brand-mark::before, .brand-mark::after { content: ""; position: absolute; width: 4px; height: 4px; top: 5px; border-radius: 50%; background: #111; }
.brand-mark::before { left: 3px; }.brand-mark::after { right: 3px; }
.nav-links { display: flex; align-items: center; gap: clamp(24px, 4vw, 44px); font-size: 12px; }
.nav-links a, .footer-bottom a { transition: opacity .2s; }
.nav-links a:hover, .footer-bottom a:hover { opacity: .55; }
.nav-actions { display: flex; align-items: center; gap: 14px; }
.nav-search { width: 28px; height: 30px; display: grid; place-items: center; }
.nav-search span { width: 13px; height: 13px; border: 1.5px solid #111; border-radius: 50%; position: relative; }
.nav-search span::after { content: ""; position: absolute; width: 6px; height: 1.5px; background: #111; right: -5px; bottom: -2px; rotate: 45deg; border-radius: 2px; }
.menu-toggle { display: none; width: 28px; height: 30px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.menu-toggle span { display: block; width: 16px; height: 1px; margin: 5px auto; background: #111; transition: transform .25s; }

main { padding-top: var(--nav-height); }
.hero, .product-panel { position: relative; overflow: hidden; text-align: center; }
.hero { min-height: 760px; background: linear-gradient(180deg, #fff 0%, #f5f9ff 100%); padding-top: clamp(52px, 7vw, 90px); display: flex; flex-direction: column; align-items: center; }
.hero-copy { position: relative; z-index: 2; }
.eyebrow { margin: 0 0 8px; font-size: 17px; font-weight: 600; letter-spacing: .01em; }
.eyebrow.blue { color: var(--blue); }.eyebrow.mint { color: #7af5bc; }
.hero h1 { margin: 0; font-size: clamp(54px, 7.2vw, 96px); line-height: .92; letter-spacing: -.062em; font-weight: 700; }
.hero h1 span { color: #6e6e73; }
.hero-subtitle { margin: 24px 0 20px; font-size: clamp(19px, 2.2vw, 26px); line-height: 1.35; letter-spacing: -.02em; }
.actions { display: flex; gap: 22px; align-items: center; justify-content: center; }
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 0 22px; border-radius: 999px; font-size: 16px; transition: background .2s, transform .2s; }
.button:hover { transform: scale(1.025); }
.button-primary { color: #fff; background: var(--blue); }.button-primary:hover { background: var(--blue-hover); }
.text-link { color: var(--blue); font-size: 18px; }.text-link:hover { text-decoration: underline; }
.text-link span { font-size: 25px; line-height: 0; vertical-align: -1px; }
.hero-media { width: min(1060px, 96vw); margin-top: -8px; }
.hero-media img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }

.product-panel { min-height: 740px; padding: 76px 20px 0; }
.panel-copy { position: relative; z-index: 2; }
.panel-copy h2 { margin: 0; font-size: clamp(44px, 5vw, 68px); line-height: 1; letter-spacing: -.055em; }
.panel-copy > p:last-of-type { margin: 14px 0 20px; font-size: clamp(21px, 2.3vw, 28px); letter-spacing: -.025em; }
.light-link { color: #2997ff; }
.dark-panel { color: #f5f5f7; background: radial-gradient(circle at 50% 74%, #273166 0, #090916 34%, #000 68%); }
.phone-stage { height: 475px; max-width: 760px; margin: 35px auto 0; position: relative; }
.phone { position: absolute; width: 222px; height: 445px; border-radius: 38px; box-shadow: 0 38px 70px rgba(0,0,0,.55); }
.phone-back { left: calc(50% - 190px); top: 20px; rotate: -10deg; background: linear-gradient(145deg, #586192, #1d2241 55%, #090b18); border: 3px solid #888fb4; }
.camera { position: absolute; left: 18px; top: 18px; width: 76px; height: 76px; border-radius: 22px; background: #202641; box-shadow: inset 0 0 0 1px #ffffff26; }
.camera i { position: absolute; width: 28px; height: 28px; border: 4px solid #40486e; border-radius: 50%; background: radial-gradient(circle, #10295c 0 15%, #070812 18% 65%, #888 69%, #151527 74%); }
.camera i:first-child { left: 9px; top: 9px; }.camera i:last-child { right: 9px; bottom: 9px; }
.mini-mark { position: absolute; width: 28px; height: 28px; border: 2px solid #b9bfde; border-radius: 50%; left: calc(50% - 14px); top: 48%; opacity: .7; }
.phone-front { left: calc(50% + 5px); border: 4px solid #4c536e; rotate: 9deg; background: #080910; overflow: hidden; }
.screen-glow { position: absolute; inset: 8px; border-radius: 30px; background: radial-gradient(circle at 70% 72%, #ed83ff 0 4%, #663dff 18%, transparent 39%), radial-gradient(circle at 20% 25%, #167acb, #081127 50%); }
.screen-glow::after { content: ""; position: absolute; width: 180px; height: 320px; left: -80px; top: 30px; border: 16px solid rgba(157,214,255,.55); border-radius: 50%; filter: blur(8px); rotate: 30deg; }
.island { position: absolute; width: 68px; height: 18px; border-radius: 20px; background: #050507; left: 50%; top: 15px; translate: -50%; }

.air-panel { color: #0f2038; background: linear-gradient(#eaf6ff, #fff 68%); }
.laptop-wrap { width: min(790px, 90vw); margin: 65px auto 0; perspective: 1200px; }
.laptop-screen { position: relative; width: 76%; aspect-ratio: 1.55; margin: auto; padding: 10px; border-radius: 16px 16px 8px 8px; background: linear-gradient(145deg,#b5c1ce,#e7edf3 40%,#8e9aa6); box-shadow: 0 35px 55px #7da0bc38; }
.laptop-wallpaper { width: 100%; height: 100%; border-radius: 9px; overflow: hidden; background: radial-gradient(circle at 30% 80%, #fff 0 5%, transparent 26%), linear-gradient(145deg, #effaff, #70c8f0 45%, #4b63dd 72%, #1b1b5d); position: relative; }
.laptop-wallpaper::before, .laptop-wallpaper::after, .laptop-wallpaper span { content: ""; position: absolute; width: 80%; height: 110%; border-radius: 50%; border: 32px solid rgba(255,255,255,.25); rotate: -24deg; }
.laptop-wallpaper::before { left: -35%; top: 0; }.laptop-wallpaper::after { right: -40%; top: -50%; border-color: rgba(125,239,255,.34); }
.laptop-base { width: 94%; height: 20px; margin: -1px auto; background: linear-gradient(#bac6d1, #eaf0f4 45%, #9ba8b4); clip-path: polygon(5% 0,95% 0,100% 68%,98% 100%,2% 100%,0 68%); border-radius: 0 0 30px 30px; }

.tile-grid { padding: 12px; background: #fff; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.tile { min-height: 610px; position: relative; overflow: hidden; text-align: center; padding: 52px 28px; background: var(--surface); }
.tile-copy { position: relative; z-index: 3; }
.tile-copy h2 { margin: 0; font-size: clamp(34px, 3.6vw, 48px); line-height: 1.05; letter-spacing: -.045em; }
.tile-copy p:not(.eyebrow) { margin: 12px 0 15px; font-size: 20px; line-height: 1.3; }
.light-copy { color: #fff; }
.sound-tile { background: linear-gradient(160deg,#f9fbff,#e7edf6); }
.buds-art { position: absolute; inset: auto 0 15px; height: 320px; }
.buds-art span { position: absolute; width: 88px; height: 182px; top: 35px; border-radius: 48px 48px 32px 32px; background: linear-gradient(100deg,#d9e2ec,#fff 48%,#b8c2cf); box-shadow: 0 32px 45px #7d879344; }
.buds-art span::before { content:""; position: absolute; width: 86px; height: 102px; border-radius: 50%; background: radial-gradient(circle,#161c22 0 28%,#535c63 30%,#eef1f5 33% 65%,#fff 68%); top: -46px; left: -26px; rotate: -15deg; }
.buds-art span:first-child { left: calc(50% - 128px); rotate: -12deg; }.buds-art span:last-child { right: calc(50% - 128px); rotate: 14deg; transform: scaleX(-1); }
.watch-tile { background: radial-gradient(circle at 50% 80%, #412460 0,#171026 38%,#050507 75%); }
.watch-art { position: absolute; inset: auto 0 -90px; height: 390px; display: grid; place-items: center; }
.watch-face { width: 240px; height: 280px; color: #fff; border: 8px solid #c5a9df; border-radius: 64px; background: radial-gradient(circle at 20% 10%,#3d2366,#090711 65%); box-shadow: 0 30px 80px #b56bff33, inset 0 0 0 3px #000; position: relative; display: flex; align-items: baseline; justify-content: center; padding-top: 72px; }
.watch-face::before, .watch-face::after { content:""; position:absolute; width: 118px; height: 120px; left: 53px; background: linear-gradient(90deg,#7c5a9a,#d4b9e6,#765397); z-index:-1; }
.watch-face::before { top:-110px; border-radius: 24px 24px 0 0; }.watch-face::after { bottom:-110px; border-radius: 0 0 24px 24px; }
.watch-face b { font-size: 76px; letter-spacing: -.09em; }.watch-face small { font-size: 33px; color: #b984ff; }.watch-face i { position:absolute; width:9px;height:55px;border-radius:8px;background:#e7d5f7;right:-17px;top:90px; }
.privacy-tile { background: linear-gradient(145deg,#fff 15%,#e9f4ff 100%); }
.privacy-orb { position: absolute; width: 310px; height: 310px; left: 50%; bottom: 35px; translate: -50%; border-radius: 50%; background: radial-gradient(circle at 32% 22%,#fff 0 4%,#83dbff 16%,#0963ff 55%,#081965 100%); box-shadow: 0 50px 70px #0a62ff38, inset -28px -32px 70px #02073566; display: grid; place-items: center; }
.lock-body { width: 86px; height: 74px; margin-top: 38px; border-radius: 18px; background: #ffffffd9; box-shadow: 0 8px 20px #00187b44; }
.lock-body::before { content:""; display:block; width:50px;height:54px;border:11px solid #ffffffd9;border-bottom:0;border-radius:30px 30px 0 0;translate:7px -45px; }
.earth-tile { background: radial-gradient(circle at 50% 100%,#18392f,#07110e 48%,#020504 80%); }
.mint-link { color: #7af5bc; }
.earth-rings { position:absolute; width:360px;height:360px; left:50%;bottom:-40px;translate:-50%; }
.earth-rings i { position:absolute; inset:0; border:2px solid #59e9a599;border-radius:50%; box-shadow:0 0 22px #55efa355; }
.earth-rings i:nth-child(2){ inset:45px; border-color:#c4ffdfaa; }.earth-rings i:nth-child(3){ inset:105px; background:radial-gradient(circle at 35% 30%,#9fffc8,#1c8b5d 48%,#09291f); border:0;box-shadow:0 25px 70px #4bed9c55; }

.discover { padding: 105px 0 72px; overflow: hidden; background: #fff; }
.section-heading { padding: 0 max(24px,calc((100vw - 1180px)/2)); margin-bottom: 38px; }
.section-heading h2 { margin: 0; font-size: clamp(42px, 5.8vw, 72px); line-height: 1; letter-spacing: -.055em; }
.story-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 max(24px,calc((100vw - 1180px)/2)); }
.story-track::-webkit-scrollbar { display:none; }
.story { flex: 0 0 min(72vw,760px); height: 460px; border-radius: 30px; padding: 46px; color:#fff; scroll-snap-align:center; position:relative;overflow:hidden; }
.story::after { content:""; position:absolute; width:330px;height:330px;border:60px solid #ffffff26;border-radius:50%; right:-120px;bottom:-150px; }
.story > * { position:relative;z-index:1; }.story span { font-size:15px;font-weight:600; }.story h3 { font-size:clamp(38px,4.5vw,62px);line-height:1.03;letter-spacing:-.05em;margin:52px 0 14px; }.story p { font-size:20px;margin:0; }
.story-blue { background:linear-gradient(145deg,#064fd8,#0eb9f5); }.story-coral { background:linear-gradient(145deg,#ef3a67,#ff8f64); }.story-black { background:linear-gradient(145deg,#232323,#020202); }
.track-controls { max-width:1180px;margin:22px auto 0;padding:0 22px;display:flex;justify-content:flex-end;gap:10px; }
.track-controls button { width:42px;height:42px;border:0;border-radius:50%;background:#e8e8ed;color:#3a3a3c;cursor:pointer;font-size:18px;transition:background .2s; }.track-controls button:hover { background:#d8d8dd; }

.site-footer { background:var(--surface);color:#6e6e73;font-size:12px;line-height:1.5; }
.footer-inner { max-width:1024px;margin:auto;padding:22px; }.footer-note { margin:0; }.footer-rule { height:1px;background:#d2d2d7;margin:18px 0; }.footer-bottom { display:flex;align-items:center;justify-content:space-between;gap:20px; }.footer-bottom p{margin:0}.footer-bottom div{display:flex;gap:24px;color:#424245; }

.reveal { opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease),transform .8s var(--ease); }
.reveal.is-visible { opacity:1;transform:none; }
@media (prefers-reduced-motion: reduce) { html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.button{transition:none} }

@media (max-width: 767px) {
  :root { --nav-height: 46px; }
  .nav { padding:0 15px; }
  .menu-toggle { display:block;position:relative;z-index:3; }
  .nav-links { display:flex;position:fixed;inset:0;background:rgba(250,250,252,.98);padding:84px 42px 40px;flex-direction:column;align-items:flex-start;gap:22px;transform:translateY(-100%);opacity:0;pointer-events:none;transition:transform .4s var(--ease),opacity .3s; }
  .nav-links a { font-size:30px;font-weight:600;letter-spacing:-.03em; }
  body.menu-open { overflow:hidden; }.menu-open .nav-links { transform:none;opacity:1;pointer-events:auto; }.menu-open .menu-toggle span:first-child { transform:translateY(3px) rotate(45deg); }.menu-open .menu-toggle span:last-child { transform:translateY(-3px) rotate(-45deg); }
  .hero { min-height:690px;padding-top:58px; }.hero h1{font-size:54px}.hero-subtitle{font-size:20px}.hero-media{width:150vw;margin-top:35px}.actions{gap:16px}.button{padding:0 18px}.text-link{font-size:17px}
  .product-panel{min-height:660px;padding-top:64px}.phone-stage{scale:.82;margin-top:15px}.phone-back{left:calc(50% - 180px)}.phone-front{left:calc(50% - 4px)}
  .air-panel{min-height:610px}.laptop-wrap{width:135vw;margin-left:-23vw;margin-top:75px}
  .tile-grid{grid-template-columns:1fr;padding:8px;gap:8px}.tile{min-height:570px;padding:45px 18px}.tile-copy p:not(.eyebrow){font-size:18px}
  .discover{padding-top:80px}.story{flex-basis:84vw;height:430px;padding:34px}.story h3{margin-top:58px}.story-track{gap:12px}.track-controls{padding:0 18px}
  .footer-bottom{align-items:flex-start;flex-direction:column}.footer-bottom div{width:100%;justify-content:space-between}
}

@media (max-width: 380px) { .hero h1{font-size:47px}.actions{flex-direction:column;gap:11px}.phone-stage{scale:.72}.panel-copy h2{font-size:40px} }