:root {
  --bg: #0b1220;
  --bg-deep: #07101d;
  --surface: rgba(20, 32, 50, 0.76);
  --surface-strong: #142338;
  --surface-soft: rgba(255, 255, 255, 0.055);
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.2);
  --text: #f5f8ff;
  --muted: #aebbd0;
  --muted-2: #7f8ea7;
  --cyan: #61d1ff;
  --cyan-bright: #26c8ff;
  --cyan-dark: #0e92c1;
  --green: #9cdc8b;
  --violet: #8175ff;
  --danger: #ff8c9c;
  --radius-xl: 40px;
  --radius-lg: 28px;
  --radius-md: 20px;
  --shadow: 0 32px 90px rgba(0, 0, 0, 0.38);
  --max: 1180px;
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: 110px; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 48% 1%, rgba(44, 107, 151, 0.18), transparent 28rem),
    linear-gradient(160deg, #0a101d 0%, #101a2a 40%, #101526 72%, #0a1220 100%);
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -3;
  background-image: linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, black, transparent 55%);
}

button, a { -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1000;
  padding: 12px 18px;
  border-radius: 14px;
  background: #fff;
  color: #06111f;
  transform: translateY(-150%);
  transition: transform 180ms ease;
}
.skip-link:focus { transform: translateY(0); }

.ambient { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: -2; }
.ambient__wash { position: absolute; border-radius: 50%; filter: blur(12px); opacity: 0.3; }
.ambient__wash--cyan { width: 52vw; height: 28vw; right: -18vw; top: 8vh; background: radial-gradient(circle, rgba(34, 178, 239, 0.32), transparent 68%); }
.ambient__wash--violet { width: 40vw; height: 40vw; left: -22vw; top: 54vh; background: radial-gradient(circle, rgba(102, 84, 210, 0.25), transparent 70%); }
.ambient__grain { position: absolute; inset: 0; opacity: 0.025; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }

.section-shell { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
.section-space { padding-top: 132px; }

.site-header {
  position: fixed;
  top: 20px;
  left: 0;
  right: 0;
  z-index: 100;
  transition: top 240ms ease;
}
.site-header.is-scrolled { top: 10px; }

.glass-nav {
  width: min(calc(100% - 32px), 1120px);
  min-height: 68px;
  margin: auto;
  padding: 9px 10px 9px 14px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-top-color: rgba(255, 255, 255, 0.24);
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  background: linear-gradient(135deg, rgba(31, 50, 75, 0.72), rgba(16, 26, 46, 0.64));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28), inset 0 1px rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  transition: min-height 240ms ease, background 240ms ease, box-shadow 240ms ease;
}
.site-header.is-scrolled .glass-nav { min-height: 58px; background: rgba(12, 22, 38, 0.86); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.34); }

.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 740; letter-spacing: -0.02em; font-size: 19px; white-space: nowrap; }
.brand img { width: 42px; height: 42px; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 8px 16px rgba(0,0,0,.25); }
.nav-links { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nav-links a { padding: 11px 13px; color: #c8d2e2; font-size: 14px; border-radius: 14px; transition: color 180ms ease, background 180ms ease; }
.nav-links a:hover, .nav-links a:focus-visible { color: white; background: rgba(255,255,255,.075); outline: none; }
.nav-actions { display: flex; align-items: center; gap: 9px; }

.language-switch { height: 42px; padding: 0 10px; border: 1px solid var(--line); border-radius: 15px; display: flex; align-items: center; gap: 3px; background: rgba(255,255,255,.04); color: var(--muted-2); }
.language-switch button, .language-switch a { appearance: none; border: 0; padding: 5px 3px; color: inherit; background: none; cursor: pointer; font-size: 12px; }
.language-switch [aria-current="page"] { color: white; }
.language-switch button:focus-visible, .language-switch a:focus-visible { outline: 2px solid var(--cyan); border-radius: 6px; }
.menu-button { display: none; width: 44px; height: 42px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.055); padding: 0; place-items: center; cursor: pointer; }
.menu-button span { grid-area: 1/1; display: block; width: 17px; height: 1.5px; background: white; transition: transform 180ms ease; }
.menu-button span:first-child { transform: translateY(-4px); }
.menu-button span:last-child { transform: translateY(4px); }
.menu-button[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.menu-button[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 54px;
  padding: 0 22px;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  font-weight: 650;
  font-size: 15px;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.button:hover { transform: translateY(-2px); }
.button:focus-visible, .app-store-button:focus-visible { outline: 3px solid rgba(97, 209, 255, .55); outline-offset: 3px; }
.button--primary { border-color: rgba(157, 235, 255, 0.5); background: linear-gradient(180deg, #66dcff, #20afe2); color: #03131c; box-shadow: inset 0 1px rgba(255,255,255,.65), 0 10px 28px rgba(22, 184, 237, 0.25); }
.button--primary:hover { box-shadow: inset 0 1px rgba(255,255,255,.7), 0 14px 34px rgba(22, 184, 237, 0.35); }
.button--glass { background: linear-gradient(135deg, rgba(255,255,255,.105), rgba(255,255,255,.045)); box-shadow: inset 0 1px rgba(255,255,255,.1); }
.button--glass:hover { border-color: rgba(255,255,255,.34); background: rgba(255,255,255,.1); }
.button--compact { min-height: 44px; padding: 0 17px; border-radius: 15px; font-size: 13px; }

.app-store-button {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: 191px;
  padding: 10px 17px 9px;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 17px;
  background: linear-gradient(180deg, rgba(17, 17, 18, .96), rgba(3, 4, 6, .98));
  box-shadow: inset 0 1px rgba(255,255,255,.13), 0 12px 28px rgba(0,0,0,.26);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.app-store-button:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.6); box-shadow: inset 0 1px rgba(255,255,255,.15), 0 16px 32px rgba(0,0,0,.33); }
.app-store-button svg { width: 28px; height: 28px; flex: none; }
.app-store-button span { display: grid; line-height: 1; gap: 3px; text-align: left; }
.app-store-button small { font-size: 10px; font-weight: 500; }
.app-store-button strong { font-size: 20px; letter-spacing: -0.03em; }

.hero {
  min-height: 820px;
  padding-top: 172px;
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(460px, 1.12fr);
  align-items: center;
  gap: 36px;
  position: relative;
}
.hero::before {
  content: "";
  position: absolute;
  width: 740px;
  height: 560px;
  top: 130px;
  right: -150px;
  z-index: -1;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 45%), rgba(33, 186, 241, .17), transparent 45%), radial-gradient(circle at 65% 52%, rgba(99, 77, 202, .18), transparent 60%);
  filter: blur(8px);
}
.hero__copy { position: relative; z-index: 2; }
.hero h1 { max-width: 600px; margin-bottom: 26px; font-size: clamp(54px, 6vw, 82px); line-height: .99; letter-spacing: -0.066em; font-weight: 720; text-wrap: balance; }
.hero__lead { max-width: 550px; margin-bottom: 34px; color: #c0ccdc; font-size: clamp(18px, 2vw, 22px); line-height: 1.55; letter-spacing: -0.018em; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.trust-line { margin: 26px 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; color: var(--muted-2); font-size: 12px; }
.trust-line i { width: 3px; height: 3px; border-radius: 50%; background: var(--muted-2); }

.hero__visual { position: relative; height: 610px; perspective: 1300px; }
.orbital-line { position: absolute; left: -80px; right: -180px; bottom: 48px; height: 160px; border-radius: 50%; border-top: 1px solid rgba(61, 199, 255, .45); transform: rotate(-4deg); filter: drop-shadow(0 0 10px rgba(20, 191, 255, .4)); }
.orbital-line::before, .orbital-line::after { content: ""; position: absolute; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 15px var(--cyan); }
.orbital-line::before { width: 5px; height: 5px; top: -4px; left: 29%; }
.orbital-line::after { width: 3px; height: 3px; top: 24px; right: 24%; }
.sync-orb { position: absolute; z-index: 5; top: 250px; right: 170px; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.38); background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.32), rgba(34,160,221,.3) 42%, rgba(12,35,63,.78)); box-shadow: inset 0 0 15px rgba(255,255,255,.14), 0 0 28px rgba(47,197,255,.3); backdrop-filter: blur(14px); }
.sync-orb svg { width: 28px; fill: none; stroke: white; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; animation: sync-rotate 8s linear infinite; }

.phone { position: absolute; width: 302px; aspect-ratio: .493; filter: drop-shadow(0 38px 38px rgba(0,0,0,.42)); }
.phone--hero { z-index: 3; top: 8px; left: 85px; transform: rotateY(-7deg) rotateZ(4deg); animation: phone-float 7s ease-in-out infinite; }
.phone__rim { position: absolute; inset: 0; padding: 7px; border-radius: 53px; background: linear-gradient(115deg, #7e8790, #15181d 12%, #6e747b 32%, #121419 56%, #969ba1 83%, #1b1d22); box-shadow: inset 0 0 0 1px rgba(255,255,255,.42), inset 0 0 0 4px #11151b; }
.phone__screen { height: 100%; position: relative; overflow: hidden; padding: 34px 16px 18px; border-radius: 47px; background: radial-gradient(circle at 80% 8%, rgba(30,110,151,.19), transparent 35%), linear-gradient(160deg, #07111e, #101b2d 60%, #11172c); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); color: white; }
.dynamic-island { position: absolute; width: 92px; height: 25px; top: 12px; left: 50%; transform: translateX(-50%); border-radius: 30px; background: #010203; }
.screen-top { display: flex; justify-content: space-between; padding: 0 8px 18px; font-size: 8px; color: rgba(255,255,255,.84); }
.screen-top em { font-style: normal; font-weight: 700; }
.app-title { display: flex; align-items: center; justify-content: space-between; margin: 0 3px 17px; }
.app-title strong { font-size: 19px; letter-spacing: -0.04em; }
.app-title button { width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%; color: white; background: rgba(255,255,255,.07); }
.category-label { display: flex; align-items: center; gap: 6px; padding: 10px 5px 7px; color: #bcc8d8; font-size: 11px; }
.category-label small { margin-left: auto; color: #637188; }
.list-row { width: 100%; min-height: 51px; margin: 4px 0; padding: 0 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 15px; display: flex; align-items: center; gap: 9px; color: white; background: rgba(255,255,255,.055); font-size: 12px; }
.list-row .food-icon { font-size: 17px; }
.list-row small { margin-left: auto; color: #9facbf; font-size: 8px; }
.list-row i { width: 20px; height: 20px; margin-left: auto; border: 1px solid #708097; border-radius: 50%; display: grid; place-items: center; font-style: normal; }
.list-row.is-checked i { border-color: var(--cyan); background: var(--cyan-bright); box-shadow: 0 0 12px rgba(38,200,255,.4); }
.list-row.is-checked i::after { content: "✓"; color: #073548; font-size: 12px; font-weight: 800; }
.add-product { height: 39px; margin-top: 15px; border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 7px; color: #06202b; background: linear-gradient(180deg, #5cddff, #22b9ea); box-shadow: inset 0 1px rgba(255,255,255,.55), 0 8px 16px rgba(20,160,210,.22); font-size: 11px; font-weight: 700; }
.phone-tabs { position: absolute; left: 10px; right: 10px; bottom: 12px; padding: 10px 8px 5px; border: 1px solid rgba(255,255,255,.11); border-radius: 19px; display: grid; grid-template-columns: repeat(3,1fr); background: rgba(10,20,34,.82); backdrop-filter: blur(15px); font-size: 15px; text-align: center; }
.phone-tabs > * { display: grid; gap: 3px; color: #8a99ae; }
.phone-tabs b { color: var(--cyan); font-weight: 500; }
.phone-tabs small { font-size: 7px; font-weight: 500; }

.watch { position: absolute; z-index: 4; width: 180px; height: 430px; right: -8px; top: 122px; filter: drop-shadow(0 30px 28px rgba(0,0,0,.46)); animation: watch-float 7s ease-in-out 700ms infinite; }
.watch__strap { position: absolute; left: 39px; width: 102px; height: 154px; background: linear-gradient(90deg, #111319, #34373e 42%, #0c0e13 78%, #282b32); border: 1px solid #535761; }
.watch__strap--top { top: 0; border-radius: 42px 42px 16px 16px; }
.watch__strap--bottom { bottom: 0; border-radius: 16px 16px 42px 42px; }
.watch__case { position: absolute; z-index: 2; top: 119px; width: 180px; height: 202px; padding: 7px; border-radius: 47px; background: linear-gradient(125deg, #8b9098, #191b20 18%, #555a62 54%, #17191e 78%, #888c91); box-shadow: inset 0 0 0 2px rgba(255,255,255,.16); }
.watch__case::after { content: ""; position: absolute; right: -10px; top: 49px; width: 10px; height: 46px; border-radius: 0 10px 10px 0; background: linear-gradient(#6f737a,#202329); }
.watch__screen { height: 100%; padding: 15px 11px; border-radius: 40px; overflow: hidden; background: radial-gradient(circle at 60% 0, rgba(24,126,165,.19), transparent 50%), #070d15; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.watch__top { display: flex; justify-content: space-between; align-items: center; color: var(--cyan); font-size: 11px; }
.watch__top small { color: white; font-size: 8px; }
.watch__count { display: grid; margin: 10px 0; }
.watch__count b { font-size: 27px; line-height: 1; }
.watch__count span { color: var(--cyan); font-size: 11px; }
.watch-row { min-height: 40px; margin: 4px 0; padding: 0 6px; border-radius: 11px; display: flex; align-items: center; gap: 5px; background: rgba(255,255,255,.06); }
.watch-row small { max-width: 78px; overflow: hidden; text-overflow: ellipsis; font-size: 8px; white-space: nowrap; }
.watch-row i { width: 16px; height: 16px; margin-left: auto; border: 1px solid #637189; border-radius: 50%; display: grid; place-items: center; color: #083748; background: transparent; font-size: 10px; font-style: normal; }
.watch-row:first-of-type i { border-color: var(--cyan); background: var(--cyan); }

.section-heading h2, .feature-copy h2 { margin-bottom: 18px; font-size: clamp(36px, 4.3vw, 58px); line-height: 1.04; letter-spacing: -0.052em; text-wrap: balance; }
.section-heading p, .feature-copy p { max-width: 620px; color: var(--muted); font-size: 17px; line-height: 1.65; }
.section-heading--center { text-align: center; }
.section-heading--center p { margin-inline: auto; }

.sync-story { position: relative; padding: 66px 52px 58px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: linear-gradient(115deg, rgba(20,42,65,.85), rgba(28,29,64,.76)); box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.06); overflow: hidden; }
.sync-story::before { content: ""; position: absolute; inset: -50% 20% auto; height: 120%; background: radial-gradient(circle, rgba(59,148,216,.17), transparent 65%); pointer-events: none; }
.sync-story h2 { font-size: clamp(38px, 4vw, 54px); }
.sync-flow { position: relative; margin-top: 52px; display: flex; align-items: center; justify-content: center; gap: 15px; }
.mini-device { width: 165px; aspect-ratio: .78; padding: 18px 12px; border: 1px solid var(--line-strong); border-radius: 26px; display: grid; align-content: start; gap: 10px; background: linear-gradient(160deg,#0d192a,#0b1220); box-shadow: 0 22px 36px rgba(0,0,0,.28); transform: rotate(-3deg); }
.mini-device span { font-weight: 730; }
.mini-device b { padding: 8px; border: 1px solid rgba(255,255,255,.09); border-radius: 10px; background: rgba(255,255,255,.05); font-size: 9px; font-weight: 500; }
.mini-device--checked { transform: rotate(3deg); }
.mini-device--checked b:first-of-type { color: var(--muted-2); }
.icloud-mark { width: 82px; height: 82px; border: 1px solid rgba(255,255,255,.27); border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 25%,rgba(255,255,255,.24),rgba(45,158,214,.22) 42%,rgba(12,27,46,.8)); box-shadow: 0 0 34px rgba(39,179,235,.18); }
.icloud-mark svg { width: 42px; fill: rgba(97,209,255,.92); stroke: #eafaff; stroke-width: .5; }
.sync-path { width: 70px; position: relative; height: 24px; display: flex; align-items: center; justify-content: space-around; }
.sync-path::before { content:""; position:absolute; left:0; right:0; top:50%; border-top:1px solid rgba(97,209,255,.45); }
.sync-path i { position: relative; width: 4px; height: 4px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); animation: pulse-dot 1.8s ease-in-out infinite; }
.sync-path i:nth-child(2) { animation-delay: 200ms; }.sync-path i:nth-child(3) { animation-delay: 400ms; }
.sync-path--short { width: 42px; }
.mini-watch { width: 100px; height: 118px; border: 5px solid #454a53; border-radius: 29px; display: grid; place-content: center; text-align: center; background:#070d15; box-shadow: 0 17px 28px rgba(0,0,0,.35); }
.mini-watch b { font-size: 30px; }.mini-watch span { color:var(--cyan); font-size: 11px; }

.features { display: grid; gap: 22px; }
.feature-row { min-height: 440px; padding: 30px; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.94fr); align-items: center; gap: 70px; }
.feature-row--reverse { grid-template-columns: minmax(0,.94fr) minmax(0,1fr); }
.feature-row--reverse .feature-visual { order: 2; }.feature-row--reverse .feature-copy { order:1; }
.feature-visual { min-height: 350px; position: relative; border-radius: 34px; background: radial-gradient(circle at 55% 50%,rgba(71,139,190,.14),transparent 58%); }
.feature-copy { padding: 20px; }
.feature-number { display: block; margin-bottom: 22px; color: var(--cyan); font-size: 12px; font-weight: 750; letter-spacing: .2em; }
.try-note { display: flex; align-items: center; gap: 10px; margin-top: 25px; color: var(--cyan) !important; font-size: 13px !important; }

.category-stack { display: grid; place-content: center; gap: 12px; padding-right: 55px; }
.category-stack > div { width: min(330px, 76vw); height: 68px; padding: 0 20px; border: 1px solid var(--line-strong); border-top-color: rgba(255,255,255,.3); border-radius: 20px; display: flex; align-items:center; gap: 13px; background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.045)); box-shadow: 0 14px 24px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.08); backdrop-filter: blur(14px); }
.category-stack b { font-size: 17px; }.category-stack small { margin-left:auto; color:var(--cyan); }.category-stack .is-done { opacity:.45; transform:translateY(8px); }
.category-stack svg { position:absolute; width:36px; right:18%; top:35%; fill:none; stroke:var(--cyan); stroke-width:1.4; opacity:.65; }

.status-demo { padding: 45px 42px; border: 1px solid var(--line); background: linear-gradient(145deg,rgba(28,47,69,.74),rgba(17,25,43,.72)); box-shadow: inset 0 1px rgba(255,255,255,.06); }
.demo-status { margin-bottom: 17px; color:var(--muted); font-size:13px; }.demo-status span:first-child { color:var(--cyan); font-size:30px; font-weight:720; }
.demo-item { width:100%; min-height:60px; margin:7px 0; padding:0 14px; border:1px solid var(--line); border-radius:17px; display:flex; align-items:center; gap:12px; color:white; background:rgba(255,255,255,.055); cursor:pointer; text-align:left; transition:transform 180ms ease,background 240ms ease,opacity 240ms ease; }
.demo-item:hover { transform:translateX(3px); background:rgba(255,255,255,.085); }.demo-item:focus-visible { outline:2px solid var(--cyan); outline-offset:2px; }
.demo-item i { width:21px;height:21px;border:1px solid #71839c;border-radius:50%;display:grid;place-items:center;font-style:normal;transition:all 220ms ease; }
.demo-item small { margin-left:auto;color:var(--muted-2); }
.demo-item.is-bought { opacity:.58; }.demo-item.is-bought b { text-decoration:line-through; }.demo-item.is-bought i { border-color:var(--cyan);background:var(--cyan);box-shadow:0 0 15px rgba(38,200,255,.35); }.demo-item.is-bought i::after { content:"✓";color:#063549;font-size:12px;font-weight:900; }
.undo-demo { margin-top:13px; padding:10px 14px; border:1px solid var(--line); border-radius:14px; color:white; background:rgba(255,255,255,.07); cursor:pointer; }.undo-demo:disabled { opacity:.35; cursor:not-allowed; }

.watch-focus { min-height:420px; overflow:hidden; }
.watch--feature { left:50%;right:auto;top:-24px;transform:translateX(-50%) scale(1.12);animation:none; }
.watch-logo-screen { display:grid;align-content:center;justify-items:center;gap:3px; }
.watch-logo-screen img { width:66px;height:66px;border-radius:18px;margin-bottom:7px; }.watch-logo-screen b { font-size:34px; }.watch-logo-screen span { color:var(--cyan);font-size:12px; }
.wrist-wave { position:absolute;width:420px;height:120px;left:50%;bottom:22px;transform:translateX(-50%) rotate(-4deg);border-bottom:1px solid rgba(97,209,255,.45);border-radius:50%;box-shadow:0 16px 30px rgba(48,190,247,.08); }

.product-band { min-height:680px;padding:42px;border:1px solid var(--line);border-radius:var(--radius-xl);display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);align-items:center;gap:56px;background:linear-gradient(125deg,rgba(23,45,66,.84),rgba(17,22,43,.82));box-shadow:var(--shadow),inset 0 1px rgba(255,255,255,.07);overflow:hidden; }
.product-band__visual { height:600px;position:relative; }
.phone--demo { left:50%;top:0;transform:translateX(-50%);width:280px;filter:drop-shadow(0 34px 34px rgba(0,0,0,.46)); }
.phone--demo .phone__screen { padding-bottom:12px; }.phone--demo .list-row { min-height:59px; }.phone--demo .composer { position:absolute;left:12px;right:12px;bottom:14px;padding:12px;border:1px solid rgba(255,255,255,.14);border-radius:19px;background:rgba(19,31,49,.9);backdrop-filter:blur(18px);box-shadow:0 -16px 32px rgba(0,0,0,.2); }
.composer { display:grid;grid-template-columns:1fr auto;gap:8px; }.composer input { grid-column:1/-1;width:100%;height:28px;border:1px solid var(--line);border-radius:9px;padding:0 8px;color:white;background:rgba(0,0,0,.2);font-size:9px; }.composer div { grid-column:1/-1;display:flex;gap:4px;overflow:hidden; }.composer small { padding:5px 7px;border-radius:7px;background:rgba(255,255,255,.07);font-size:7px;white-space:nowrap; }
.annotation { position:absolute;z-index:2;padding:10px 13px;border:1px solid rgba(97,209,255,.2);border-radius:13px;color:var(--cyan);background:rgba(8,20,34,.7);font-size:11px;box-shadow:0 10px 20px rgba(0,0,0,.18); }
.annotation::after { content:"";position:absolute;width:60px;border-top:1px solid var(--cyan);opacity:.5; }.annotation--one { left:0;top:145px; }.annotation--one::after { left:100%;top:50%;transform:rotate(8deg); }.annotation--two { right:-2px;bottom:86px; }.annotation--two::after { right:100%;top:50%;transform:rotate(-8deg); }
.detail-list { margin:38px 0 0;padding:0;list-style:none;display:grid;gap:6px; }
.detail-list li { padding:18px 6px;border-top:1px solid var(--line);display:flex;gap:18px; }.detail-list i { width:28px;flex:none;color:var(--cyan);font-size:10px;font-style:normal;letter-spacing:.12em; }.detail-list div { display:grid;gap:7px; }.detail-list strong { font-size:16px; }.detail-list span { color:var(--muted);font-size:13px;line-height:1.5; }

.premium { position:relative; }.premium::before { content:"";position:absolute;z-index:-1;width:70%;height:80%;left:15%;top:18%;background:radial-gradient(circle,rgba(55,173,225,.12),transparent 65%); }
.plans { max-width:960px;margin:54px auto 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:stretch; }
.plan { position:relative;min-height:470px;padding:32px;border:1px solid var(--line);border-radius:32px;background:linear-gradient(145deg,rgba(28,42,63,.78),rgba(17,24,40,.82));box-shadow:0 24px 60px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.07);overflow:hidden; }
.plan--free { margin:12px 0;min-height:446px; }.plan--premium { border-color:rgba(97,209,255,.62);box-shadow:0 24px 70px rgba(13,149,205,.14),inset 0 1px rgba(255,255,255,.13); }
.plan__shine { position:absolute;width:260px;height:160px;right:-100px;top:-80px;background:radial-gradient(circle,rgba(97,209,255,.28),transparent 67%); }
.plan__top { position:relative;display:flex;align-items:start;justify-content:space-between;padding-bottom:28px;border-bottom:1px solid var(--line); }.plan__top div { display:grid;gap:8px; }.plan__top span { font-size:22px;font-weight:720;letter-spacing:-.035em; }.plan__top strong { color:var(--muted);font-size:13px;font-weight:500; }.plan__top i { width:28px;height:28px;border:1px solid #66758b;border-radius:50%;display:grid;place-items:center;font-style:normal; }.plan--premium .plan__top span { color:var(--cyan); }.plan--premium .plan__top i { border-color:var(--cyan);color:#05384a;background:var(--cyan);box-shadow:0 0 22px rgba(38,200,255,.35);font-weight:900; }
.plan ul { margin:25px 0 0;padding:0;list-style:none;display:grid;gap:17px; }.plan li { display:flex;gap:12px;align-items:flex-start;color:#d4ddeb;font-size:14px;line-height:1.45; }.plan li>span:first-child { width:20px;color:var(--cyan);font-weight:750; }.plan--free li:nth-last-child(-n+2) { color:#8997ab; }
.plan__button { position:absolute;left:28px;right:28px;bottom:28px; }
.plan-note { margin:28px auto 0;display:flex;align-items:center;justify-content:center;gap:13px;color:var(--muted-2);font-size:12px;text-align:center; }.plan-note>span:first-child { width:38px;height:38px;border:1px solid var(--line-strong);border-radius:50%;display:grid;place-items:center;color:var(--cyan);font-size:16px;font-weight:760;background:rgba(255,255,255,.05); }

.faq { display:grid;grid-template-columns:.66fr 1.34fr;gap:70px;align-items:start; }
.faq .section-heading { position:sticky;top:130px; }.faq-list { display:grid;gap:10px; }
.faq details { border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.04);overflow:hidden;transition:background 200ms ease,border-color 200ms ease; }.faq details[open] { border-color:rgba(97,209,255,.26);background:rgba(255,255,255,.065); }
.faq summary { min-height:70px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;font-weight:630;list-style:none; }.faq summary::-webkit-details-marker { display:none; }.faq summary i { width:18px;height:18px;position:relative;flex:none; }.faq summary i::before,.faq summary i::after { content:"";position:absolute;left:50%;top:50%;width:12px;height:1px;background:var(--cyan);transform:translate(-50%,-50%);transition:transform 180ms ease; }.faq summary i::after { transform:translate(-50%,-50%) rotate(90deg); }.faq details[open] summary i::after { transform:translate(-50%,-50%) rotate(0); }
.faq details p { margin:-4px 60px 0 22px;padding-bottom:23px;color:var(--muted);line-height:1.65;font-size:14px; }

.final-cta { position:relative;min-height:240px;margin-top:132px;padding:46px;border:1px solid var(--line-strong);border-radius:var(--radius-xl);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px;background:linear-gradient(120deg,rgba(20,53,72,.88),rgba(29,26,66,.88));box-shadow:var(--shadow),inset 0 1px rgba(255,255,255,.09);overflow:hidden; }
.final-cta__glow { position:absolute;inset:auto -10% -120px 20%;height:190px;border:1px solid rgba(97,209,255,.35);border-radius:50%;box-shadow:0 0 42px rgba(97,209,255,.12);transform:rotate(-3deg); }
.final-cta img { position:relative;width:76px;height:76px;border-radius:22px;box-shadow:0 12px 24px rgba(0,0,0,.3); }.final-cta div:not(.final-cta__glow) { position:relative; }.final-cta h2 { max-width:620px;margin:0 0 9px;font-size:clamp(28px,3.5vw,47px);line-height:1.05;letter-spacing:-.05em; }.final-cta p { margin:0;color:var(--muted); }

.site-footer { min-height:150px;padding:52px 0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:28px;color:var(--muted-2);font-size:12px; }.site-footer .brand { color:white; }.site-footer .brand img { width:38px;height:38px;border-radius:11px; }.site-footer>div { display:flex;gap:27px; }.site-footer a:hover { color:white; }.site-footer>p { margin:0;text-align:right; }

.reveal { opacity:1;transform:none; }
.js .reveal { opacity:0;transform:translateY(28px);transition:opacity 750ms cubic-bezier(.2,.7,.2,1),transform 750ms cubic-bezier(.2,.7,.2,1); }
.js .reveal--delay { transition-delay:140ms; }
.js .reveal.is-visible { opacity:1;transform:translateY(0); }

@keyframes phone-float { 0%,100%{transform:rotateY(-7deg) rotateZ(4deg) translateY(0)}50%{transform:rotateY(-7deg) rotateZ(4deg) translateY(-9px)} }
@keyframes watch-float { 0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)} }
@keyframes sync-rotate { to{transform:rotate(360deg)} }
@keyframes pulse-dot { 0%,100%{opacity:.3;transform:scale(.7)}50%{opacity:1;transform:scale(1.2)} }

@media (max-width: 1040px) {
  .nav-links { position:absolute;left:16px;right:16px;top:78px;padding:10px;border:1px solid var(--line);border-radius:22px;display:grid;gap:2px;background:rgba(10,20,35,.94);box-shadow:0 20px 40px rgba(0,0,0,.34);backdrop-filter:blur(24px);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity 180ms ease,transform 180ms ease,visibility 180ms; }
  .nav-links.is-open { opacity:1;visibility:visible;transform:translateY(0); }.nav-links a { padding:14px; }.menu-button { display:grid; }
  .hero { grid-template-columns:.9fr 1.1fr;gap:0; }.hero__visual { transform:scale(.86);transform-origin:center right; }
  .sync-flow { transform:scale(.9); }.feature-row { gap:32px; }.product-band { gap:20px;padding:32px; }.annotation--one{left:-10px}.annotation--two{right:-10px}
}

@media (max-width: 820px) {
  .section-space { padding-top:96px; }.nav-download { display:none; }.hero { min-height:auto;padding-top:145px;grid-template-columns:1fr;text-align:center; }.hero::before { top:390px;right:50%;transform:translateX(50%); }.hero__copy { display:grid;justify-items:center; }.hero__actions,.trust-line { justify-content:center; }.hero__visual { width:min(650px,100%);height:580px;margin:30px auto 0;transform:scale(.9);transform-origin:center top; }.phone--hero { left:22%; }.watch { right:2%; }
  .sync-story { padding:54px 26px; }.sync-flow { transform:none;gap:10px; }.sync-path { width:35px; }.mini-device { width:130px; }.icloud-mark { width:62px;height:62px; }.mini-watch { display:none; }.sync-path--short { display:none; }
  .feature-row,.feature-row--reverse { min-height:auto;padding:50px 0;grid-template-columns:1fr;gap:20px; }.feature-row--reverse .feature-visual { order:1; }.feature-row--reverse .feature-copy { order:2; }.feature-copy { padding:16px 8px;text-align:center; }.feature-copy p { margin-inline:auto; }.try-note { justify-content:center; }.feature-visual { width:min(590px,100%);margin:auto; }.category-stack svg { right:22%; }.product-band { grid-template-columns:1fr;padding:38px 24px; }.product-band__visual { width:min(560px,100%);margin:auto; }.product-band__copy { padding:10px; }.plans { grid-template-columns:1fr;max-width:560px; }.plan--free { margin:0; }.faq { grid-template-columns:1fr;gap:32px; }.faq .section-heading { position:static;text-align:center; }.faq .section-heading p { margin-inline:auto; }.final-cta { grid-template-columns:1fr;text-align:center;justify-items:center; }.site-footer { grid-template-columns:1fr;justify-items:center; }.site-footer>p { text-align:center; }
}

@media (max-width: 570px) {
  :root { --radius-xl:28px; }.section-shell { width:min(calc(100% - 28px),var(--max)); }.site-header { top:10px; }.glass-nav { width:calc(100% - 20px);min-height:58px;padding:7px 8px 7px 10px;border-radius:20px; }.brand img { width:38px;height:38px;border-radius:11px; }.language-switch { height:40px;padding:0 8px; }.menu-button { height:40px; }.hero { padding-top:130px; }.hero::before { width:120vw; }.hero h1 { font-size:clamp(48px,15vw,68px); }.hero__lead { font-size:17px; }.hero__actions { width:100%; }.hero__actions .app-store-button,.hero__actions .button { width:100%; }.trust-line { max-width:320px; }.hero__visual { height:465px;margin-top:35px;transform:none; }.phone--hero { width:226px;left:8%;top:12px; }.phone__rim { border-radius:41px;padding:5px; }.phone__screen { border-radius:36px;padding:27px 11px 12px; }.dynamic-island { width:70px;height:19px;top:9px; }.screen-top { padding-bottom:12px; }.app-title { margin-bottom:9px; }.app-title strong { font-size:15px; }.app-title button { width:22px;height:22px;font-size:8px; }.category-label { padding:6px 3px 4px;font-size:8px; }.list-row { min-height:39px;margin:3px 0;padding:0 7px;border-radius:11px;font-size:9px; }.list-row .food-icon { font-size:13px; }.list-row i { width:15px;height:15px; }.list-row.is-checked i::after { font-size:8px; }.add-product { height:31px;margin-top:8px;border-radius:10px;font-size:8px; }.phone-tabs { bottom:8px;padding:7px 5px 3px;border-radius:14px;font-size:11px; }.phone-tabs small { font-size:5px; }.watch { width:130px;height:325px;right:-2%;top:96px; }.watch__strap { left:29px;width:74px;height:115px; }.watch__case { top:90px;width:130px;height:148px;padding:5px;border-radius:35px; }.watch__screen { border-radius:29px;padding:11px 8px; }.watch__case::after { right:-7px;width:7px;height:34px;top:37px; }.watch__top { font-size:8px; }.watch__top small { font-size:6px; }.watch__count { margin:6px 0; }.watch__count b { font-size:20px; }.watch__count span { font-size:8px; }.watch-row { min-height:29px;margin:3px 0; }.watch-row small { font-size:6px; }.watch-row i { width:12px;height:12px;font-size:7px; }.sync-orb { width:46px;height:46px;right:29%;top:205px; }.sync-orb svg { width:21px; }.orbital-line { bottom:38px;left:-50px;right:-80px; }.sync-story { padding:44px 18px; }.sync-flow { margin-top:35px; }.mini-device { width:112px;padding:14px 8px;border-radius:20px; }.mini-device b { padding:6px;font-size:7px; }.icloud-mark { width:48px;height:48px; }.icloud-mark svg { width:29px; }.sync-path { width:19px; }.sync-path i:not(:first-child) { display:none; }.feature-row { padding:36px 0; }.feature-visual { min-height:305px; }.status-demo { padding:30px 18px; }.category-stack { padding-right:0; }.category-stack svg { display:none; }.watch-focus { min-height:390px; }.product-band { padding:32px 14px; }.product-band__visual { height:540px;transform:scale(.9);transform-origin:center top; }.annotation { font-size:9px; }.annotation--one { left:-5px; }.annotation--two { right:-2px; }.plan { padding:24px;min-height:455px; }.plan__button { left:22px;right:22px;bottom:22px; }.faq details p { margin-right:22px; }.final-cta { margin-top:96px;padding:38px 22px; }.site-footer>div { gap:18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important; }
  .js .reveal { opacity:1;transform:none; }
}

@supports not (backdrop-filter: blur(10px)) {
  .glass-nav,.language-switch,.phone-tabs,.composer { background:#142238; }
}

.legal-page { min-height:100vh; }
.legal-header { min-height:110px;display:flex;align-items:center;justify-content:space-between;gap:20px; }
.legal-card { max-width:860px;margin-top:36px;padding:clamp(28px,6vw,70px);border:1px solid var(--line);border-radius:var(--radius-xl);background:linear-gradient(145deg,rgba(25,42,63,.82),rgba(14,22,38,.88));box-shadow:var(--shadow),inset 0 1px rgba(255,255,255,.07); }
.legal-card h1 { margin-bottom:52px;font-size:clamp(48px,8vw,82px);line-height:1;letter-spacing:-.06em; }
.legal-card h2 { margin:40px 0 22px;color:var(--cyan);font-size:28px;letter-spacing:-.035em; }
.legal-card h3 { margin:28px 0 10px;font-size:18px; }
.legal-card p { color:var(--muted);font-size:15px;line-height:1.75; }
.legal-card hr { margin:52px 0;border:0;border-top:1px solid var(--line); }
.legal-updated { color:var(--cyan)!important;font-size:12px!important;letter-spacing:.08em;text-transform:uppercase; }
.legal-cta { margin-top:46px;padding-top:32px;border-top:1px solid var(--line); }
.legal-footer { min-height:120px;padding:40px 0;color:var(--muted-2);font-size:12px;text-align:center; }
.legal-footer a { color:var(--cyan); }