:root {
  --bg: #0b0a08;
  --card: #1a1815;
  --line: rgba(255, 255, 255, 0.08);
  --text: #f5f5f7;
  --muted: #a1a1a6;
  --gold: #d4ae6a;
  --gold-soft: #f3dfb4;
  --gold-deep: #a8823f;
  --light-bg: #f5f5f7;
  --light-text: #1d1d1f;
  --light-muted: #6e6e73;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "PingFang SC", "Hiragino Sans GB", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  background: var(--bg); color: var(--text);
  line-height: 1.5; letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
section { scroll-margin-top: 48px; }

h1, h2, h3 { text-wrap: balance; }
p, li, summary { text-wrap: pretty; }

h2 {
  font-size: clamp(32px, 5.4vw, 56px);
  font-weight: 700; letter-spacing: -0.035em; line-height: 1.1;
}
.section-eyebrow {
  font-size: 17px; font-weight: 600; color: var(--gold); margin-bottom: 12px;
  letter-spacing: 0;
}
.section-eyebrow.dark { color: var(--gold-deep); }

/* ---------- nav ---------- */
/* The glass layer lives on ::before so it can be faded in with opacity only. */
.nav { position: sticky; top: 0; z-index: 10; }
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(11, 10, 8, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: 1024px; margin: 0 auto; height: 48px; padding: 0 22px;
  display: flex; align-items: center; justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.brand img { border-radius: 5px; }
.nav nav { display: flex; align-items: center; gap: 26px; font-size: 13px; color: var(--muted); }
.nav nav a:hover { color: var(--text); }
.nav .nav-cta {
  color: #1d1d1f; background: var(--gold-soft);
  padding: 4px 12px; border-radius: 980px; font-weight: 500;
}
.nav .nav-cta:hover { color: #1d1d1f; background: #fff; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; font-size: 17px; border-radius: 980px;
  padding: 12px 24px; transition: background .2s, color .2s, opacity .2s;
}
.btn-gold { background: var(--gold); color: #1a1408; font-weight: 500; }
.btn-gold:hover { background: var(--gold-soft); }
.btn-link { color: var(--gold-soft); padding-left: 8px; padding-right: 8px; }
.btn-link:hover { text-decoration: underline; }

/* ---------- hero ---------- */
.hero {
  text-align: center; padding: 110px 22px 130px;
  background:
    radial-gradient(ellipse 60% 45% at 50% 28%, rgba(212, 174, 106, 0.16), transparent 70%),
    var(--bg);
}
.hero > * { animation: rise 1s cubic-bezier(.2, .8, .2, 1) both; }
.hero > :nth-child(2) { animation-delay: .06s; }
.hero > :nth-child(3) { animation-delay: .12s; }
.hero > :nth-child(4) { animation-delay: .18s; }
.hero > :nth-child(5) { animation-delay: .24s; }
.hero > :nth-child(6) { animation-delay: .30s; }
.hero-icon {
  border-radius: 30px; margin-bottom: 34px;
  box-shadow: 0 30px 80px rgba(212, 174, 106, 0.18), 0 10px 30px rgba(0, 0, 0, 0.6);
}
.eyebrow { font-size: 17px; color: var(--gold); font-weight: 600; margin-bottom: 14px; }
.hero h1 {
  font-size: clamp(44px, 8.4vw, 84px);
  font-weight: 700; letter-spacing: -0.04em; line-height: 1.08;
  padding-bottom: 0.04em; /* keep descenders inside the clipped gradient */
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .hero h1 {
    background: linear-gradient(176deg, #fbf8f2 0%, #f3dfb4 46%, #d9b574 72%, #b48b47 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
  }
}
.hero-sub {
  margin: 24px auto 0; max-width: 600px;
  font-size: clamp(17px, 2.2vw, 21px); color: var(--muted);
  text-wrap: balance;
}
.actions { margin-top: 38px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.platforms { margin-top: 18px; font-size: 13px; color: #6e6e73; letter-spacing: 0.02em; }

@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- statement ---------- */
.statement {
  position: relative; z-index: 1; /* slides over the hero as it parallaxes away */
  background: var(--light-bg); color: var(--light-text); padding: 140px 22px; text-align: center;
}
.statement p {
  max-width: 820px; margin: 0 auto;
  font-size: clamp(28px, 4.8vw, 48px);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1.18;
}
.statement .gold { color: var(--gold-deep); }

/* ---------- features ---------- */
.features { padding: 140px 22px; max-width: 1024px; margin: 0 auto; text-align: center; }
.features h2 { margin-bottom: 64px; }
.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); text-align: left; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 24px;
  padding: 34px 28px 38px;
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), border-color .4s;
}
.card:hover { transform: translateY(-4px); border-color: rgba(212, 174, 106, 0.35); }
.card svg {
  width: 34px; height: 34px; margin-bottom: 22px;
  fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.card h3 { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 8px; }
.card p { font-size: 15px; color: var(--muted); }

/* ---------- remote ---------- */
.remote {
  /* clip (not hidden): overflow:hidden would make this a scroll container and
     hijack the view() timelines of everything inside it */
  padding: 140px 22px 120px; text-align: center; overflow: hidden; overflow: clip;
  background:
    radial-gradient(ellipse 55% 40% at 50% 62%, rgba(212, 174, 106, 0.10), transparent 70%),
    linear-gradient(180deg, #0b0a08 0%, #16130e 100%);
  border-top: 1px solid var(--line);
}
.remote-head { max-width: 680px; margin: 0 auto; }
.remote .lead {
  margin: 22px auto 0; font-size: 19px; color: var(--muted); max-width: 520px;
  text-wrap: balance;
}

/* iPhone Duo — opened, landscape (proportions measured from reference mockup).
   Layers: titanium rim -> matte graphite band -> black glass edge -> display.
   Sizes are in container-width units so the frame scales with the device. */
.duo { margin: 80px auto 0; max-width: 880px; container-type: inline-size; }
.duo-body {
  --rim: 2.5px; --band: 11px; --glass: 3px; --r: 66px; --btn: 3px;
  position: relative; padding: var(--rim);
  border-radius: var(--r);
  background:
    linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 18%, rgba(0,0,0,0) 80%, rgba(0,0,0,.28) 100%),
    linear-gradient(90deg, #8f8c86 0%, #e9e7e3 4%, #c4c1bb 20%, #efede9 48%, #c9c6c0 52%, #efede9 80%, #c4c1bb 92%, #e9e7e3 96%, #8f8c86 100%);
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.8),
    0 2px 4px rgba(0, 0, 0, 0.35),
    0 40px 90px -24px rgba(0, 0, 0, 0.75);
  transform-origin: 50% 100%;
}
@supports (width: 1cqw) {
  .duo-body {
    --rim: max(1.5px, 0.3cqw);
    --band: max(5px, 1.22cqw);
    --glass: max(1.5px, 0.34cqw);
    --r: max(26px, 7.6cqw);
    --btn: max(1.5px, 0.34cqw);
  }
}
/* hinge seams: the rim splits at the fold (top + bottom centre) */
.duo-body::before, .duo-body::after {
  content: ""; position: absolute; left: 50%; width: max(2px, 0.32cqw); height: calc(var(--rim) + 1px);
  transform: translateX(-50%); background: #1a1a1b; border-radius: 0 0 2px 2px; z-index: 1;
}
.duo-body::before { top: 0; }
.duo-body::after { bottom: 0; border-radius: 2px 2px 0 0; }
/* buttons: two on the bottom-left edge, one on the left side */
.duo-btn {
  position: absolute; height: var(--btn); bottom: calc(-1 * var(--btn));
  border-radius: 0 0 var(--btn) var(--btn);
  background: linear-gradient(90deg, #8f8c86, #ecebe7 12%, #c9c6c0 50%, #ecebe7 88%, #8f8c86);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.55);
}
.duo-btn.b1 { left: 12.8%; width: 6.6%; }
.duo-btn.b2 { left: 21%; width: 6.6%; }
.duo-btn.b3 {
  bottom: auto; left: calc(-1 * var(--btn)); top: 55%; width: var(--btn); height: 15%;
  border-radius: var(--btn) 0 0 var(--btn);
  background: linear-gradient(180deg, #8f8c86, #ecebe7 10%, #c9c6c0 50%, #ecebe7 90%, #8f8c86);
}
/* graphite band */
.duo-screen {
  position: relative;
  padding: calc(var(--band) + var(--glass));
  border-radius: calc(var(--r) - var(--rim));
  background:
    linear-gradient(180deg, #3a3b3e 0%, #2b2c2f 6%, #27282a 94%, #1e1f21 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(0, 0, 0, 0.55);
}
/* black glass edge hugging the display */
.duo-screen img {
  display: block; width: 100%; height: auto;
  border-radius: calc(var(--r) - var(--rim) - var(--band) - var(--glass));
  box-shadow: 0 0 0 var(--glass) #050505;
}
/* raised hinge blocks inside the band, top and bottom centre */
.duo-screen::before, .duo-screen::after {
  content: ""; position: absolute; left: 50%; width: 13.5%; height: calc(var(--band) * 0.62);
  transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(180deg, #36373a, #2c2d30);
  border: 0.5px solid rgba(0, 0, 0, 0.7);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.12);
}
.duo-screen::before { top: 0; border-top: 0; border-radius: 0 0 3px 3px; }
.duo-screen::after { bottom: 0; border-bottom: 0; border-radius: 3px 3px 0 0; }
.duo figcaption {
  position: relative; margin-top: 30px;
  font-size: 13px; color: #6e6e73; letter-spacing: 0.02em;
}
/* soft floor shadow just under the device */
.duo figcaption::before {
  content: ""; position: absolute; left: 6%; right: 6%; top: -30px; height: 48px;
  pointer-events: none;
  background: radial-gradient(50% 50% at 50% 0%, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.3) 45%, transparent 100%);
}

.checks {
  list-style: none; max-width: 980px; margin: 64px auto 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: left;
}
.checks li { position: relative; padding-left: 30px; font-size: 17px; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(212, 174, 106, 0.15);
  box-shadow: inset 0 0 0 1.5px var(--gold);
}
.checks li::after {
  content: ""; position: absolute; left: 6px; top: 8px; width: 6px; height: 9px;
  border: solid var(--gold); border-width: 0 1.8px 1.8px 0; transform: rotate(45deg);
}
.note { margin-top: 40px; font-size: 13px; color: #6e6e73; text-wrap: balance; }

/* ---------- privacy ---------- */
.privacy { background: var(--light-bg); color: var(--light-text); padding: 140px 22px; text-align: center; }
.privacy h2 { margin-bottom: 64px; }
.privacy ul { list-style: none; max-width: 780px; margin: 0 auto; text-align: left; }
.privacy li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
  padding: 26px 4px; border-top: 1px solid #d2d2d7;
}
.privacy li:last-child { border-bottom: 1px solid #d2d2d7; }
.privacy strong { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; }
.privacy span { font-size: 17px; color: var(--light-muted); text-align: right; }

/* ---------- steps ---------- */
.steps { padding: 140px 22px; max-width: 1024px; margin: 0 auto; text-align: center; }
.steps h2 { margin-bottom: 64px; }
.steps ol { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.steps .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; margin-bottom: 20px;
  font-size: 19px; font-weight: 600; color: var(--gold);
  box-shadow: inset 0 0 0 1.5px rgba(212,174,106,0.6);
}
.steps h3 { font-size: 21px; font-weight: 600; margin-bottom: 8px; }
.steps p { color: var(--muted); font-size: 15px; max-width: 260px; margin: 0 auto; }

/* ---------- faq ---------- */
.faq { background: var(--light-bg); color: var(--light-text); padding: 120px 22px; }
.faq h2 { text-align: center; margin-bottom: 56px; }
.faq details { max-width: 780px; margin: 0 auto; border-top: 1px solid #d2d2d7; }
.faq details:last-of-type { border-bottom: 1px solid #d2d2d7; }
.faq summary {
  list-style: none; cursor: pointer; padding: 24px 40px 24px 4px; position: relative;
  font-size: 19px; font-weight: 600; letter-spacing: -0.015em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 26px; font-weight: 300; color: var(--light-muted); transition: transform .3s;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 40px 26px 4px; font-size: 17px; color: var(--light-muted); }

/* ---------- cta ---------- */
.cta {
  text-align: center; padding: 140px 22px;
  background: radial-gradient(ellipse 55% 50% at 50% 40%, rgba(212,174,106,0.12), transparent 70%), var(--bg);
}
.cta img { border-radius: 20px; margin-bottom: 30px; box-shadow: 0 20px 60px rgba(212,174,106,0.15); }
.cta h2 { margin-bottom: 36px; }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line); padding: 28px 22px 40px; font-size: 12px; color: #6e6e73; }
.footer-inner { max-width: 1024px; margin: 0 auto; display: flex; justify-content: space-between; }
.footer a:hover { color: var(--text); }

/* ---------- responsive ---------- */
@media (max-width: 820px) {
  .checks { grid-template-columns: repeat(2, minmax(0, 240px)); justify-content: center; }
  .steps ol { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 640px) {
  .nav nav a:not(.nav-cta):not([href="#remote"]) { display: none; }
  .nav nav { gap: 16px; }
  .hero { padding: 80px 20px 100px; }
  .hero-icon { width: 108px; height: 108px; border-radius: 24px; }
  .statement, .features, .remote, .privacy, .steps, .faq, .cta { padding-top: 96px; padding-bottom: 96px; }
  .privacy li { flex-direction: column; gap: 4px; }
  .privacy span { text-align: left; }
  .duo { margin-top: 48px; }
  .checks { grid-template-columns: minmax(0, 260px); gap: 16px; margin-top: 44px; }
}
/* ---------- scroll-driven motion ----------
   Progressive enhancement only: every rule below is gated, and keyframes only
   define the *starting* state, so without support (or with reduced motion)
   everything renders in its normal, fully visible state. Only opacity and
   transform-family properties are animated. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* nav glass appears once the page starts scrolling */
    .nav::before {
      animation-name: fade-in; animation-fill-mode: both; animation-timing-function: linear;
      animation-timeline: scroll(root); animation-range: 0 64px;
    }

    /* hero recedes: slight parallax, scale and fade as you scroll away */
    .hero {
      transform-origin: 50% 0;
      animation-name: hero-out; animation-fill-mode: both; animation-timing-function: linear;
      animation-timeline: scroll(root); animation-range: 0 90vh;
    }

    /* headlines, copy and cards rise in as they enter.
       Ranges end a fixed distance after the element is fully in view, so
       even content near the page bottom always completes. */
    :is(.statement p, section:not(.hero) > .section-eyebrow, section:not(.hero) > h2,
        .remote-head > *, .card, .checks li, .note, .privacy li, .steps li,
        .faq details, .cta > *) {
      animation-name: reveal; animation-fill-mode: both;
      animation-timing-function: cubic-bezier(.25, .6, .3, 1);
      animation-timeline: view();
      animation-range: entry 0% entry calc(100% + var(--reveal-end, 110px));
    }
    :is(.card, .checks li, .steps li):nth-child(2) { --reveal-end: 150px; }
    :is(.card, .checks li, .steps li):nth-child(3) { --reveal-end: 190px; }
    :is(.card, .checks li, .steps li):nth-child(4) { --reveal-end: 230px; }

    /* iPhone Duo settles from a gentle 3D tilt to flat, then stays crisp */
    .duo { view-timeline: --duo block; }
    .duo-body {
      animation-name: duo-settle; animation-fill-mode: both;
      animation-timing-function: cubic-bezier(.2, .6, .25, 1);
      animation-timeline: --duo; animation-range: entry 0% cover 40%;
    }
    .duo figcaption::before {
      animation-name: shadow-in; animation-fill-mode: both;
      animation-timing-function: cubic-bezier(.2, .6, .25, 1);
      animation-timeline: --duo; animation-range: entry 0% cover 40%;
    }
  }
}
@keyframes fade-in { from { opacity: 0; } }
@keyframes hero-out { to { opacity: 0.15; transform: translateY(16vh) scale(0.94); } }
@keyframes reveal { from { opacity: 0; translate: 0 40px; } }
@keyframes duo-settle {
  from { opacity: 0.4; transform: perspective(1800px) translateY(48px) rotateX(24deg) scale(0.9); }
  to   { opacity: 1; transform: none; }
}
@keyframes shadow-in { from { opacity: 0; transform: scaleX(0.7); } }

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}