:root {
  --bg: #EAF2FF; --deep: #0B3D91; --ink: #0A1F44; --on-dark: #FFFFFF;
  --accent: #1E7DFF; --muted: #46618F; --card: #FFFFFF;
  --maxw: 1080px; --radius: 22px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: "Archivo", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
}
/* Athletic grotesk, spent only on the hero H1. Weight axis 100–900. */
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font); color: var(--ink);
  background: var(--bg); line-height: 1.5; -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.hl { color: var(--accent); }

/* Keyboard focus — dark ring on light surfaces, white on dark/accent ones. */
:where(a, button, select, summary, input, textarea, .badge):focus-visible {
  outline: 3px solid var(--deep); outline-offset: 3px; border-radius: 8px;
}
.btn:focus-visible,
.watch a:focus-visible, .final-cta a:focus-visible, .site-footer a:focus-visible,
.site-footer .lang:focus-visible { outline-color: #fff; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
h1, h2, h3 { line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 .4em; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 700; }
.kicker { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 0 0 .6em; }
.lede { font-size: 1.12rem; color: var(--muted); max-width: 46ch; }
.muted { color: var(--muted); }

/* Buttons / badge */
.btn { display: inline-block; background: var(--accent); color: #fff; padding: .7rem 1.2rem; border-radius: 999px; font-weight: 600; }
.btn:hover { text-decoration: none; filter: brightness(1.06); }
.btn-sm { padding: .45rem .9rem; font-size: .9rem; }
.badge img { display: block; height: 54px; width: auto; transition: transform .2s ease; }
.badge:hover { text-decoration: none; }
.badge:hover img { transform: translateY(-2px); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(234,242,255,.72); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid rgba(11,61,145,.08); }
/* Keep anchored sections clear of the 60px sticky header. */
#features, #watch, #faq { scroll-margin-top: 72px; }
.header-inner { display: flex; align-items: center; gap: 18px; min-height: 60px; flex-wrap: wrap; row-gap: 6px; }
.wordmark { font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--ink); }
.nav { display: flex; gap: 18px; margin-left: 8px; }
.nav a { color: var(--ink); font-weight: 500; font-size: .95rem; white-space: nowrap; }
.header-actions { margin-left: auto; min-width: 0; display: flex; align-items: center; gap: 12px; }
.lang { font-family: var(--font); font-size: .9rem; padding: .35rem 1.6rem .35rem .6rem; border-radius: 10px; border: 1px solid rgba(11,61,145,.18); background: #fff; color: var(--ink); max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Hero */
.hero {
  padding: clamp(40px, 7vw, 96px) 0; position: relative; overflow: hidden;
  background: radial-gradient(120% 90% at 74% 16%, rgba(30,125,255,.14), transparent 60%), var(--bg);
}
.hero-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.hero-copy h1 {
  margin-bottom: .3em; font-family: var(--display);
  font-weight: 800; letter-spacing: -0.035em;
}
.hero-copy .badge { margin-top: 1.6rem; }
.hero-device { display: flex; justify-content: center; position: relative; }

/* Signature: an unfinished progress ring behind the device — echoes the app's
   READINESS gauge and the Apple Watch activity ring. The 62% gap keeps it a
   progress arc, not a halo. */
.hero-device::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: 50%; translate: -50% -50%;
  width: min(560px, 92vw); aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(from 218deg, var(--accent), var(--deep) 62%, transparent 62%);
  -webkit-mask: radial-gradient(closest-side, transparent 69%, #000 71%);
          mask: radial-gradient(closest-side, transparent 69%, #000 71%);
  opacity: .28;
}
.hero-lockup { position: relative; }
.hero-lockup .phone { position: relative; z-index: 1; }
/* "phone or wrist" — shown, not just claimed. */
.hero-lockup .watch-frame {
  position: absolute; left: -7%; bottom: 5%; width: min(118px, 30vw); z-index: 2;
}

/* Feature sections (full alternating bands) */
.feature { padding: clamp(44px, 6vw, 84px) 0; overflow: clip; }
.feature:nth-child(even) { background: #fff; }
.feature-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.feature.alt .feature-copy { order: 2; }
.feature.alt .feature-device { order: 1; }
.feature-copy .lede { margin-top: 1rem; }
.feature-device { display: flex; justify-content: center; position: relative; }
/* Soft brand bloom so the device reads with depth, not floating on a flat field. */
.feature-device::before {
  content: ""; position: absolute; z-index: 0; inset: -12% -16%; pointer-events: none;
  background: radial-gradient(58% 54% at 50% 42%, rgba(30,125,255,.18), transparent 72%);
}
.feature-device .phone { position: relative; z-index: 1; }

/* Feature gallery — compact cards for the secondary shots */
.feature-gallery { padding: clamp(44px, 6vw, 84px) 0; }
/* Flex (not grid) so a short final row centers instead of leaving an empty cell. */
.feature-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 26px; }
.feature-card {
  flex: 1 1 272px; max-width: 336px;
  background: var(--card); border-radius: var(--radius); padding: 30px 24px 32px;
  box-shadow: 0 12px 32px rgba(11,61,145,.09); text-align: center;
  display: flex; flex-direction: column; align-items: center;
  transition: transform .25s ease, box-shadow .25s ease;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(11,61,145,.16); }
.feature-card .phone { width: min(208px, 60vw); margin-bottom: 20px; }
.feature-card .kicker { margin-bottom: .5em; }
.feature-card h3 { font-size: 1.18rem; margin-bottom: .35em; }
.feature-card p { color: var(--muted); margin: 0; font-size: .97rem; line-height: 1.45; }

/* Phone + watch frames */
.phone { width: min(300px, 78vw); background: #0A1F44; border-radius: 42px; padding: 10px; box-shadow: 0 30px 60px rgba(11,61,145,.25); }
.phone img { display: block; width: 100%; height: auto; border-radius: 32px; }
.watch-frame { width: min(150px, 44vw); background: #0A1F44; border-radius: 38px; padding: 8px; box-shadow: 0 18px 40px rgba(11,61,145,.25); }
.watch-frame img { display: block; width: 100%; height: auto; border-radius: 30px; }

/* Watch section */
.watch { padding: clamp(40px, 7vw, 90px) 0; background: var(--deep); color: var(--on-dark); }
.watch .kicker { color: #9Fc2ff; }
.watch h2 { color: #fff; }
.watch .lede { color: rgba(255,255,255,.78); margin-inline: auto; }
.section-head { text-align: center; max-width: 40ch; margin: 0 auto 40px; }
.watch-row { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; }

/* Props */
.props { padding: clamp(40px, 6vw, 80px) 0; }
.props-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.prop { background: var(--card); border-radius: var(--radius); padding: 26px; box-shadow: 0 10px 30px rgba(11,61,145,.08); transition: transform .25s ease, box-shadow .25s ease; }
.prop:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(11,61,145,.14); }
.prop h3 { font-size: 1.15rem; }
.prop p { color: var(--muted); margin: 0; }

/* Final CTA — dark close so the page reads light → dark → light → dark → footer */
.final-cta {
  padding: clamp(48px, 8vw, 110px) 0; text-align: center;
  background: linear-gradient(180deg, var(--deep), var(--ink)); color: var(--on-dark);
}
.final-cta h2 { color: #fff; }
.final-cta .lede { color: rgba(255,255,255,.82); }
.final-cta .badge { display: inline-block; margin-top: 1.4rem; }

/* Footer */
.site-footer { background: var(--ink); color: rgba(255,255,255,.8); padding: 40px 0; }
.site-footer .wordmark { color: #fff; }
.footer-inner { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 24px; align-items: start; }
.footer-brand p { margin: .4rem 0 0; color: rgba(255,255,255,.6); }
.footer-links { display: flex; flex-direction: column; gap: 8px; }
.footer-links a { color: rgba(255,255,255,.85); }
.footer-lang { justify-self: end; }
.copyright { grid-column: 1 / -1; margin: 16px 0 0; color: rgba(255,255,255,.5); font-size: .85rem; }

/* Doc pages (support / privacy) */
.doc { padding: clamp(40px, 6vw, 80px) 0; }
.doc .wrap { max-width: 760px; }
.doc h1 { margin-bottom: .2em; }
.doc h2 { font-size: 1.3rem; margin-top: 1.8em; }
.faq-list { margin-top: 28px; }
.faq { background: var(--card); border-radius: 14px; padding: 4px 18px; margin-bottom: 12px; box-shadow: 0 6px 18px rgba(11,61,145,.06); }
.faq summary { cursor: pointer; font-weight: 600; padding: 14px 0; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq[open] summary { color: var(--accent); }
.faq-body { padding-bottom: 12px; color: var(--ink); }
.contact { margin-top: 40px; }

/* Reveal animation */
/* Hidden-until-reveal only when JS is running (html.js set inline in <head>),
   so no-JS visitors and non-rendering crawlers see the full page. */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js [data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .feature-card, .prop, .badge img { transition: none; }
  .feature-card:hover, .prop:hover, .badge:hover img { transform: none; }
}

/* Feedback form */
.feedback { max-width: 640px; }
.feedback form { display: flex; flex-direction: column; gap: 6px; margin-top: 20px; }
.feedback label { font-weight: 600; margin-top: 12px; }
.feedback select, .feedback textarea, .feedback input[type="email"], .feedback input[type="file"] {
  font: inherit; padding: 10px 12px; border: 1px solid rgba(11,61,145,.2); border-radius: 10px; background: #fff; color: var(--ink); width: 100%;
}
.feedback textarea { min-height: 140px; resize: vertical; }
.feedback .hint { color: var(--muted); font-size: .85rem; margin: 2px 0 0; }
.feedback button[type="submit"] { margin-top: 18px; align-self: flex-start; background: var(--accent); color: #fff; border: 0; padding: .7rem 1.4rem; border-radius: 999px; font-weight: 600; font: inherit; cursor: pointer; }
.feedback button[disabled] { opacity: .6; cursor: default; }
.feedback .form-status { min-height: 1.2em; margin-top: 12px; font-weight: 600; }
.feedback .form-status.ok { color: #1a7f37; }
.feedback .form-status.err { color: #c01818; }
.feedback .privacy-note { margin-top: 16px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Responsive */
@media (max-width: 820px) {
  .hero-inner, .feature-inner { grid-template-columns: 1fr; }
  .feature.alt .feature-copy, .feature.alt .feature-device { order: initial; }
  .section-head { text-align: center; }
  .hero .lede, .section-head .lede { margin-inline: auto; }
  /* Keep the hero watch clear of the full-width phone; shrink the ring. */
  .hero-device::after { width: min(440px, 86vw); }
  .hero-lockup .watch-frame { left: auto; right: 4%; bottom: -3%; width: min(94px, 26vw); }
  .props-row { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-lang { justify-self: start; }
  .nav { display: none; }
}