/* ============================================================
   LuxRise — celestial nocturne · dusk → dawn
   Display: Fraunces · Body: Hanken Grotesk
   ============================================================ */

:root {
  --night-900: #050410;
  --night-800: #0a0820;
  --night-700: #0f0d2b;
  --night-600: #15123a;

  --indigo: #818cf8;
  --purple: #c084fc;
  --teal:   #2dd4bf;

  --dawn-1: #ffd479;
  --dawn-2: #fb9d6b;
  --dawn-3: #fb6f8e;

  --ink:    #ece9ff;
  --ink-dim: #a6a3c8;
  --ink-faint: #6f6c93;

  --glass: rgba(255, 255, 255, 0.045);
  --glass-strong: rgba(255, 255, 255, 0.07);
  --hair: rgba(255, 255, 255, 0.12);

  --maxw: 1180px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);

  /* Body uses real San Francisco on Apple devices (the OS font, used legally
     via the system stack), with Hanken Grotesk as the cross-platform fallback.
     Headlines stay on Fraunces for character. */
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", "Hanken Grotesk", system-ui, sans-serif;
  --font-display: "Fraunces", Georgia, serif;

  --nav-ink: rgba(255, 255, 255, 0.88); /* menu links — brighter, near-white */

  --grad-dawn: linear-gradient(105deg, var(--dawn-1), var(--dawn-2) 48%, var(--dawn-3));
  --grad-cool: linear-gradient(105deg, var(--teal), var(--indigo) 55%, var(--purple));
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* no CSS scroll-behavior — Lenis owns wheel smoothing (and scrollTo for anchors);
   a CSS smooth here would double-animate and break Lenis. */
html { -webkit-text-size-adjust: 100%; }

/* ---- craftsman details ---- */
::selection { background: rgba(251,157,107,0.3); color: #fff; }
html.day ::selection { background: rgba(99,102,241,0.22); color: #1a1340; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); background-clip: padding-box; }
:focus-visible { outline: 2px solid var(--dawn-2); outline-offset: 3px; border-radius: 4px; }
a, button { -webkit-tap-highlight-color: transparent; }
.mag { will-change: transform; }

/* Lenis smooth-scroll (official setup — overrides scroll-behavior so it doesn't double-smooth) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

body {
  font-family: var(--font-body);
  background: var(--night-900);
  color: var(--ink);
  line-height: 1.6;
  letter-spacing: 0.01em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: "Fraunces", Georgia, serif; font-weight: 400; line-height: 1.02; letter-spacing: -0.015em; }
a { color: inherit; text-decoration: none; }
em { font-style: italic; }
img { display: block; max-width: 100%; }

/* ---------- atmosphere ---------- */
.atmosphere { position: fixed; inset: 0; z-index: -1; overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% -10%, var(--night-700), transparent 60%),
    radial-gradient(100% 100% at 100% 0%, #1a1340 0%, transparent 45%),
    var(--night-900);
}
.aurora { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.5; mix-blend-mode: screen; }
.aurora--1 { width: 60vw; height: 60vw; top: -18vw; left: -10vw;
  background: radial-gradient(circle, var(--indigo), transparent 65%); animation: drift1 26s var(--ease) infinite alternate; }
.aurora--2 { width: 52vw; height: 52vw; top: 8vw; right: -14vw;
  background: radial-gradient(circle, var(--purple), transparent 65%); animation: drift2 32s var(--ease) infinite alternate; }
.aurora--3 { width: 50vw; height: 50vw; bottom: -20vw; left: 18vw;
  background: radial-gradient(circle, var(--teal), transparent 68%); opacity: 0.32; animation: drift3 30s var(--ease) infinite alternate; }
/* cool teal glow toward the bottom — keeps the night palette, no warm wash */
.dawn-glow { position: absolute; left: 50%; bottom: -34vw; transform: translateX(-50%);
  width: 110vw; height: 56vw; border-radius: 50%; filter: blur(110px); opacity: 0.22; mix-blend-mode: screen;
  background: radial-gradient(circle, var(--teal) 0%, var(--indigo) 45%, transparent 70%); }

@keyframes drift1 { to { transform: translate(8vw, 6vw) scale(1.12); } }
@keyframes drift2 { to { transform: translate(-7vw, 9vw) scale(1.08); } }
@keyframes drift3 { to { transform: translate(5vw, -6vw) scale(1.15); } }

.stars { position: absolute; inset: 0; opacity: 0.6;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff, transparent),
    radial-gradient(1px 1px at 28% 62%, #cdd0ff, transparent),
    radial-gradient(1.4px 1.4px at 47% 28%, #fff, transparent),
    radial-gradient(1px 1px at 63% 72%, #d6c8ff, transparent),
    radial-gradient(1px 1px at 78% 22%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 88% 58%, #bfe9e0, transparent),
    radial-gradient(1px 1px at 38% 88%, #fff, transparent),
    radial-gradient(1px 1px at 70% 40%, #fff, transparent);
  animation: twinkle 7s ease-in-out infinite;
}
@keyframes twinkle { 0%,100% { opacity: 0.45; } 50% { opacity: 0.8; } }

.grain { position: absolute; inset: 0; opacity: 0.05; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- shared ---------- */
section { max-width: var(--maxw); margin: 0 auto; padding: clamp(72px, 11vw, 150px) 24px; }
[id] { scroll-margin-top: 92px; } /* clear the floating nav on anchor jumps */

.eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 0.78rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); font-weight: 600; }
.eyebrow--center { justify-content: center; }
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--grad-dawn); box-shadow: 0 0 12px var(--dawn-2); }
.eyebrow .dot--cool { background: var(--grad-cool); box-shadow: 0 0 12px var(--teal); }

.grad-dawn { background: var(--grad-dawn); -webkit-background-clip: text; background-clip: text; color: transparent; }
.grad-cool { background: var(--grad-cool); -webkit-background-clip: text; background-clip: text; color: transparent; }

.section-head { max-width: 680px; margin-bottom: clamp(40px, 6vw, 72px); }
.section-head h2 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); margin-top: 18px; }
.section-head .eyebrow { margin-bottom: 4px; }
.section-head .lede { margin-top: 22px; }

.lede { font-size: clamp(1.05rem, 1.6vw, 1.28rem); color: var(--ink-dim); max-width: 54ch; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-size: 0.97rem; font-weight: 600; letter-spacing: 0.01em;
  padding: 14px 26px; border-radius: 100px; cursor: pointer; border: 1px solid transparent;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.3s; }
.btn--ghost { color: var(--ink); background: var(--glass); border-color: var(--hair); backdrop-filter: blur(12px); }
.btn--ghost:hover { transform: translateY(-2px); background: var(--glass-strong); border-color: rgba(255,255,255,0.22); }

/* App Store badge */
.appstore { display: inline-flex; align-items: center; gap: 11px; padding: 11px 22px 12px; border-radius: 14px;
  background: #fff; color: #000; border: 1px solid rgba(255,255,255,0.5);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
  box-shadow: 0 12px 34px -12px rgba(255,255,255,0.4); }
.appstore:hover { transform: translateY(-2px); box-shadow: 0 18px 44px -14px rgba(255,255,255,0.55); }
.appstore__logo { width: 26px; height: 26px; }
.appstore__text { display: flex; flex-direction: column; line-height: 1.05; text-align: left; }
.appstore__text small { font-size: 0.62rem; font-weight: 500; letter-spacing: 0.02em; }
.appstore__text strong { font-size: 1.18rem; font-weight: 600; letter-spacing: -0.01em; }
.appstore--lg { padding: 14px 30px 15px; }
.appstore--lg .appstore__logo { width: 32px; height: 32px; }
.appstore--lg .appstore__text strong { font-size: 1.4rem; }

/* ---------- liquid glass refraction (hero elements) ---------- */
/* Chrome applies the SVG displacement to the backdrop for true edge refraction;
   Safari/Firefox fall back to the plain blur+saturate below. */
.refract { backdrop-filter: blur(6px) saturate(1.5); -webkit-backdrop-filter: blur(6px) saturate(1.5); }
@supports (backdrop-filter: url(#glass-distortion)) {
  .refract { backdrop-filter: url(#glass-distortion) blur(3px) saturate(1.6); }
}
.refract { box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 0 22px rgba(255,255,255,0.05); }

/* ---------- header: floating Liquid Glass pill ---------- */
.site-header { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 60;
  display: flex; align-items: center; gap: 18px; width: auto; max-width: calc(100vw - 28px);
  padding: 11px 11px 11px 24px; border-radius: 100px;
  /* lighter, cleaner frost so the rim and refraction read like the reference */
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 26px 56px -20px rgba(0, 0, 0, 0.7),          /* big soft lift off the page */
    0 4px 12px -4px rgba(0, 0, 0, 0.35),
    inset 0 1.5px 0.5px rgba(255, 255, 255, 0.75),  /* crisp bright top rim */
    inset 0 -1.5px 1px rgba(255, 255, 255, 0.16),   /* faint bottom rim */
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(11px) saturate(1.5) brightness(1.06);
  -webkit-backdrop-filter: blur(11px) saturate(1.5) brightness(1.06);
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease), padding 0.4s var(--ease); }
/* true refraction of the content scrolling behind the pill (Chrome); blur fallback elsewhere */
@supports (backdrop-filter: url(#glass-distortion)) {
  .site-header { backdrop-filter: url(#glass-nav) blur(4px) saturate(1.5) brightness(1.06); }
}
/* glossy sheen across the top of the capsule */
.site-header::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 42%); opacity: 0.8; }
/* a soft moving highlight to sell the glass */
.site-header::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(60% 120% at 18% -10%, rgba(255, 255, 255, 0.18), transparent 60%); opacity: 0.7; }
.site-header.is-scrolled { background: rgba(12, 10, 32, 0.5);
  box-shadow: 0 16px 40px -14px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -10px 16px -10px rgba(255, 255, 255, 0.12); }

.brand { display: inline-flex; align-items: center; gap: 7px; color: #fff; }
/* wordmark — outlined LuxRise (TAN Tangkiwood), inherits theme colour via currentColor */
.brand__mark { display: block; height: 19px; width: auto; fill: currentColor; }
.site-header .brand__mark { height: 21px; }

.nav { position: relative; display: flex; gap: 32px; margin: 0 14px; font-size: 0.92rem; color: var(--nav-ink); font-weight: 500; }
.nav a { position: relative; white-space: nowrap; transition: color 0.25s, opacity 0.25s; opacity: 0.92; }
.nav a:hover { color: #fff; opacity: 1; }
.nav a::after { content: ""; position: absolute; left: 0; bottom: -5px; height: 1.5px; width: 0; background: var(--grad-dawn); transition: width 0.3s var(--ease); }
.nav a:hover::after { width: 100%; }
/* crisp white pill so the primary action reads cleanly against the glass bar */
.nav__cta { position: relative; margin-left: 2px; padding: 9px 20px; font-size: 0.9rem;
  color: #0c0a20; background: rgba(255, 255, 255, 0.94); border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav__cta:hover { background: #fff; transform: translateY(-1px); }
.brand, .nav, .nav__cta, .nav__sep { position: relative; z-index: 1; }
.nav__sep { width: 1px; height: 22px; margin-left: 6px; align-self: center;
  background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0.28), rgba(255,255,255,0)); }

/* ---------- day / night toggle ---------- */
.theme-toggle { position: relative; z-index: 1; display: inline-flex; align-items: center;
  width: 60px; height: 30px; padding: 3px; border-radius: 100px; cursor: pointer;
  border: 1px solid var(--hair); background: rgba(255, 255, 255, 0.08); flex-shrink: 0; }
.theme-toggle__icon { position: relative; z-index: 1; flex: 1; display: grid; place-items: center; color: var(--ink-faint); transition: color 0.3s; }
.theme-toggle__icon svg { width: 15px; height: 15px; }
.theme-toggle__knob { position: absolute; top: 3px; left: 3px; width: 26px; height: 22px; border-radius: 100px;
  background: rgba(255, 255, 255, 0.92); box-shadow: 0 2px 7px rgba(0, 0, 0, 0.35);
  transform: translateX(28px); transition: transform 0.38s var(--ease), background 0.3s; }
.theme-toggle .theme-toggle__moon { color: var(--ink); }
html.day .theme-toggle__knob { transform: translateX(0); }
html.day .theme-toggle__sun { color: #f59e0b; }
html.day .theme-toggle__moon { color: var(--ink-faint); }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center;
  padding-top: clamp(96px, 12vw, 132px); padding-bottom: clamp(48px, 7vw, 96px); }
.hero__copy h1 { font-size: clamp(2.9rem, 7vw, 5.4rem); font-weight: 300; margin: 22px 0 26px; }
.hero__copy .lede { margin-bottom: 34px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero__proof { list-style: none; display: flex; flex-wrap: wrap; gap: 14px 30px; margin-top: 40px;
  padding-top: 26px; border-top: 1px solid var(--hair); color: var(--ink-dim); font-size: 0.92rem; align-items: center; }
.hero__proof strong { color: var(--ink); font-weight: 600; }
.stars-rate { color: var(--dawn-1); letter-spacing: 1px; }

/* device */
.hero__device { display: flex; flex-direction: column; align-items: center; gap: 18px; perspective: 1600px; }
.device { position: relative; width: min(300px, 76vw); aspect-ratio: 300 / 620; border-radius: 54px; padding: 6px;
  /* titanium rail: bright on the edges, dark through the middle */
  background:
    linear-gradient(135deg, #9b98ad 0%, #4a4763 9%, #211e35 22%, #16131f 50%, #211e35 78%, #4a4763 91%, #9b98ad 100%);
  box-shadow:
    0 60px 100px -36px rgba(0,0,0,0.85),         /* ambient drop */
    0 18px 40px -14px rgba(0,0,0,0.6),           /* nearer, grounding shadow */
    inset 0 0 0 1px rgba(255,255,255,0.18),       /* rim light */
    inset 0 1.5px 1px rgba(255,255,255,0.55),     /* top specular */
    inset 0 -1.5px 1px rgba(255,255,255,0.22);    /* bottom specular */
  transform: rotateY(-8deg) rotateX(3deg) rotateZ(0.5deg); animation: float 8s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: rotateY(-8deg) rotateX(3deg) translateY(0); } 50% { transform: rotateY(-6deg) rotateX(2.5deg) translateY(-12px); } }
/* side buttons: volume rocker (left) + power (right) */
.device::before { content: ""; position: absolute; left: -2px; top: 23%; width: 3px; height: 62px; border-radius: 3px;
  background: linear-gradient(#3a3650, #16131f); box-shadow: -1px 0 1px rgba(255,255,255,0.18); }
.device::after { content: ""; position: absolute; right: -2px; top: 30%; width: 3px; height: 48px; border-radius: 3px;
  background: linear-gradient(#3a3650, #16131f); box-shadow: 1px 0 1px rgba(255,255,255,0.18); }
.device__glow { position: absolute; inset: -36px; z-index: -1; border-radius: 70px; filter: blur(64px); opacity: 0.4;
  background: radial-gradient(60% 55% at 50% 38%, var(--purple), transparent 70%),
    radial-gradient(55% 50% at 70% 90%, var(--teal), transparent 72%); }
/* Dynamic Island with a camera lens */
.device__notch { position: absolute; top: 15px; left: 50%; transform: translateX(-50%); width: 31%; height: 25px;
  border-radius: 16px; background: #000; z-index: 3; box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.06); }
.device__notch::after { content: ""; position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 38% 34%, #2b3a5c, #000 72%);
  box-shadow: inset 0 0 2px rgba(90,130,210,0.7); }
.device__screen { position: relative; height: 100%; border-radius: 42px; overflow: hidden;
  box-shadow: 0 0 0 3px #04030a; /* thin true-black bezel between screen and rail */
  background: radial-gradient(140% 90% at 50% 0%, #241a52 0%, transparent 55%),
    radial-gradient(120% 80% at 80% 100%, rgba(45,212,191,0.5) 0%, transparent 55%),
    linear-gradient(180deg, #14112e, #0a0820 60%, #1a1238); }
/* glass glare across the screen */
.device__screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 4; mix-blend-mode: screen;
  background: linear-gradient(125deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 26%, rgba(255,255,255,0) 72%, rgba(255,255,255,0.07) 100%); }
.device__caption { font-size: 0.82rem; color: var(--ink-faint); letter-spacing: 0.04em; }

.lock { position: relative; height: 100%; padding: 40px 22px 24px; display: flex; flex-direction: column; }
.lock__status { display: flex; justify-content: space-between; font-size: 0.72rem; color: rgba(255,255,255,0.8); font-weight: 600; }
.lock__icons { display: inline-flex; align-items: center; gap: 6px; }
.ic-signal { width: 17px; height: 11px; border-radius: 1px;
  background:
    linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0.85)) 0 100% / 3px 4px no-repeat,
    linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0.85)) 4.6px 100% / 3px 7px no-repeat,
    linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0.85)) 9.2px 100% / 3px 9px no-repeat,
    linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0.85)) 13.8px 100% / 3px 11px no-repeat; }
.ic-batt { position: relative; width: 22px; height: 11px; border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.6); }
.ic-batt::before { content: ""; position: absolute; inset: 1.5px; width: 70%; border-radius: 1.5px; background: rgba(255,255,255,0.85); }
.ic-batt::after { content: ""; position: absolute; right: -3px; top: 3px; width: 2px; height: 5px; border-radius: 0 2px 2px 0; background: rgba(255,255,255,0.6); }
.lock__moon { width: 56px; height: 56px; margin: 30px auto 6px; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #fff, var(--purple) 70%); box-shadow: inset -14px -6px 0 0 rgba(10,8,32,0.9), 0 0 34px rgba(192,132,252,0.55); }
.lock__date { text-align: center; font-size: 0.74rem; color: rgba(255,255,255,0.65); letter-spacing: 0.04em; }
.lock__time { text-align: center; font-family: "Fraunces", serif; font-weight: 300; font-size: 4.4rem; line-height: 1; margin: 2px 0 auto; letter-spacing: -0.02em; text-shadow: 0 4px 30px rgba(129,140,248,0.4); }
.lock__time .colon { opacity: 0.5; animation: blink 2s step-end infinite; }
@keyframes blink { 50% { opacity: 0.1; } }

.now { display: flex; align-items: center; gap: 11px; padding: 11px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); border-radius: 18px; margin-bottom: 12px; }
.now__art { width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0; background: conic-gradient(from 120deg, var(--teal), var(--indigo), var(--purple), var(--dawn-2), var(--teal)); box-shadow: inset 0 0 8px rgba(0,0,0,0.4); }
.now__meta { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.now__label { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(255,255,255,0.55); }
.now__title { font-size: 0.86rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now__artist { font-size: 0.72rem; color: rgba(255,255,255,0.65); }
.now__eq { margin-left: auto; display: flex; align-items: flex-end; gap: 2.5px; height: 18px; }
.now__eq i { width: 3px; background: var(--grad-cool); border-radius: 2px; animation: eq 0.9s ease-in-out infinite; }
.now__eq i:nth-child(1){ animation-delay: 0s; } .now__eq i:nth-child(2){ animation-delay: .2s; }
.now__eq i:nth-child(3){ animation-delay: .4s; } .now__eq i:nth-child(4){ animation-delay: .1s; }
@keyframes eq { 0%,100% { height: 5px; } 50% { height: 16px; } }
/* ====== interactive clock screen — 1:1 re-creation of NewMainScreenView ======
   --s scales the app's point values to fit the web phone (app base ≈ 340pt). */

.appscreen { --s: 0.73; position: relative; height: 100%; display: flex; flex-direction: column;
  padding: calc(50px * var(--s)) calc(20px * var(--s)) calc(34px * var(--s));
  /* HomeBackgroundView — matched to colours sampled from the real app:
     muted purple centre (#34324f), purple top (#231f37), bluish left (#1b2740),
     teal-navy bottom (#0a1825). Colour blobs stay barely-there, as in the app. */
  background:
    radial-gradient(58% 42% at 50% 47%, rgba(74,68,104,0.62), transparent 72%),
    radial-gradient(48% 52% at 5% 44%, rgba(24,40,68,0.55), transparent 70%),
    radial-gradient(42% 30% at 88% 30%, rgba(46,44,78,0.40), transparent 70%),
    radial-gradient(34% 22% at 30% 22%, rgba(120,70,150,0.10), transparent 72%),
    radial-gradient(40% 26% at 60% 90%, rgba(20,60,72,0.20), transparent 74%),
    linear-gradient(176deg, #231f37 0%, #21243c 40%, #14202f 72%, #091624 100%); }

.as__status { display: flex; justify-content: space-between; font-size: 0.7rem; color: rgba(255,255,255,0.85); font-weight: 600; }

/* header — LuxRise wordmark, white 0.5; settings glass circle right */
.as__top { position: relative; display: flex; align-items: center; justify-content: center; margin-top: calc(8px * var(--s)); height: calc(40px * var(--s)); }
.as__brand { display: block; height: calc(26px * var(--s)); width: auto; fill: currentColor; color: rgba(255,255,255,0.5); }

/* spacers position the clock+ring group a touch above centre (top < bottom) */
.as__spacer { flex: 0.65; min-height: 0; }

/* picker */
.as__picker { position: relative; height: calc(246px * var(--s)); overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); }
.as__pill { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: calc(328px * var(--s)); height: calc(102px * var(--s)); border-radius: calc(50px * var(--s));
  background: rgba(255,255,255,0.11); border: 0.5px solid rgba(255,255,255,0.18);
  box-shadow: 0 4px 8px rgba(0,0,0,0.3); -webkit-mask-image: none; mask-image: none; }
.as__cols { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.as__col { position: relative; height: 100%; width: calc(85px * var(--s)); }
.as__col--ampm { width: calc(60px * var(--s)); }
.as__colon { width: calc(30px * var(--s)); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-size: calc(64px * var(--s)); font-weight: 700; color: rgba(255,255,255,0.7); }
.as__slot { position: absolute; left: 0; right: 0; top: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); color: #fff; line-height: 1; will-change: transform, font-size, opacity;
  font-variant-numeric: tabular-nums; pointer-events: none; }
.as__col { cursor: grab; touch-action: none; }
.as__col:active { cursor: grabbing; }

/* countdown — system 14 heavy, tracking 0.2 */
.as__rings { text-align: center; margin-top: calc(12px * var(--s)); font-family: var(--font-body);
  font-size: calc(14px * var(--s)); font-weight: 800; letter-spacing: 0.2px; color: #fff; }
.as__grow { flex: 1; min-height: calc(16px * var(--s)); }

/* Go to Sleep — white 0.95, #1C1C1E, 17 semibold, h56 r28 */
.as__sleep { height: calc(56px * var(--s)); border-radius: calc(28px * var(--s)); background: rgba(255,255,255,0.95);
  color: #1c1c1e; font-family: var(--font-body); font-weight: 600; font-size: calc(17px * var(--s)); letter-spacing: 0.2px;
  border: none; cursor: pointer; box-shadow: 0 4px 10px rgba(255,255,255,0.15); transition: transform 0.3s var(--ease);
  margin-bottom: calc(26px * var(--s)); }
.as__sleep:hover { transform: translateY(-1px); }
.as__edit { margin-top: calc(32px * var(--s)); margin-bottom: calc(4px * var(--s)); background: none; border: none; color: #fff;
  font-family: var(--font-body); font-size: calc(14px * var(--s)); cursor: pointer; align-self: center; }

/* sleep-mode overlay */
.as__sleepmode { position: absolute; inset: 0; z-index: 5; padding: 30px 26px; border-radius: inherit;
  background: radial-gradient(120% 80% at 50% 18%, #1a1340, #0a0820 70%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center;
  opacity: 0; visibility: hidden; transition: opacity 0.55s var(--ease), visibility 0.55s; }
.appscreen.is-sleeping .as__sleepmode { opacity: 1; visibility: visible; }
.as__moon { width: 66px; height: 66px; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #fff, var(--purple) 70%);
  box-shadow: inset -16px -7px 0 0 rgba(10,8,32,0.9), 0 0 42px rgba(192,132,252,0.5); }
.as__sleeptitle { font-family: var(--font-display); font-size: 1.7rem; color: #fff; }
.as__sound { display: flex; align-items: center; gap: 10px; padding: 11px; border-radius: 16px; width: 100%;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); }
.as__soundart { width: 40px; height: 40px; border-radius: 9px; flex-shrink: 0;
  background: url("assets/sounds/rainSleep.jpg") center/cover; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1); }
.as__soundmeta { display: flex; flex-direction: column; line-height: 1.25; text-align: left; min-width: 0; }
.as__soundmeta small { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.55); }
.as__soundmeta strong { font-size: 0.82rem; font-weight: 600; color: #fff; }
.as__wake { padding: 10px 24px; border-radius: 100px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25);
  color: #fff; font-family: var(--font-body); font-weight: 600; font-size: 0.85rem; cursor: pointer; }

/* pause the float while interacting with the screen */
.device:hover { animation-play-state: paused; }

.lock__fade { font-size: 0.66rem; color: rgba(255,255,255,0.6); }
.lock__fade span { display: block; margin-bottom: 6px; letter-spacing: 0.04em; }
.bar { height: 5px; border-radius: 4px; background: rgba(255,255,255,0.14); overflow: hidden; }
.bar__fill { height: 100%; width: 30%; border-radius: 4px; background: var(--grad-dawn); animation: fadeUp 4.5s var(--ease) infinite; }
@keyframes fadeUp { 0% { width: 8%; } 70% { width: 92%; } 100% { width: 8%; } }

/* ---------- trust strip ---------- */
.trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px;
  padding-top: 0; padding-bottom: clamp(40px, 6vw, 72px); color: var(--ink-faint); font-size: 0.86rem; letter-spacing: 0.02em; }
.trust__logos { display: inline-flex; gap: 16px; }
.trust__svc { font-weight: 600; color: var(--ink-dim); }
.trust__svc--spotify { color: #6ee7a8; }
.trust__svc--apple { color: var(--ink); }
.trust__div { opacity: 0.4; }

/* ---------- bands ---------- */
.band { position: relative; }
.band--sleep { padding-top: clamp(40px, 6vw, 80px); }
.band--wake::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1;
  background: radial-gradient(80% 60% at 50% 40%, rgba(129,140,248,0.06), transparent 70%); }

/* music-service toggle for the playlist links */
.svc-toggle { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 28px; padding: 5px; border-radius: 100px;
  background: var(--glass); border: 1px solid var(--hair); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.svc-toggle__label { font-size: 0.8rem; color: var(--ink-faint); padding: 0 6px 0 12px; }
.svc-btn { padding: 8px 16px; border-radius: 100px; border: 1px solid transparent; background: transparent; cursor: pointer;
  font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; color: var(--ink-dim); transition: color 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease); }
.svc-btn:hover { color: var(--ink); }
.svc-btn.is-active { background: rgba(255,255,255,0.1); border-color: var(--hair); color: #fff; }
.svc-btn[data-svc="spotify"].is-active { color: #6ee7a8; }

/* ---------- soundscape marquee ---------- */
.marquee { position: relative; display: flex; gap: 22px;
  /* clip the scrolling tracks horizontally, but let cards lift/scale/cast shadow vertically.
     overflow-clip-margin gives the shadow room to bleed past the horizontal clip edge too. */
  overflow-x: clip; overflow-y: visible; overflow-clip-margin: 100px;
  margin: 0 calc(50% - 50vw); padding: 52px 0 100px; perspective: 1500px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-repeat: repeat-y; mask-repeat: repeat-y; }
.marquee__track { display: flex; gap: 24px; padding-left: 24px; flex-shrink: 0; animation: scroll 52s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes scroll { to { transform: translateX(-100%); } }

/* Liquid-Glass card — the frame is larger than the artwork, links to the Spotify playlist.
   No transition on `transform` so the 3D tilt tracks the cursor 1:1 (no jelly lag);
   the smooth reset is applied in JS only on pointer-leave. */
.sound { position: relative; display: block; flex-shrink: 0; width: 244px; padding: 12px; border-radius: 28px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  transform-style: preserve-3d; will-change: transform; color: #fff;
  box-shadow: 0 26px 56px -28px rgba(0,0,0,0.82), inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -1px 1px rgba(255,255,255,0.08);
  transition: box-shadow 0.55s var(--ease); }
.sound.is-hover { box-shadow: 0 44px 84px -30px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.45), 0 0 0 1px rgba(255,255,255,0.12); }

.sound__art { position: relative; display: block; border-radius: 18px; overflow: hidden; }
.sound__art img { display: block; width: 100%; height: 220px; object-fit: cover; transform: scale(1.01); transition: transform 0.8s var(--ease); }
.sound.is-hover .sound__art img { transform: scale(1.08); }
/* brand-colour wash + pointer-tracked sheen over the art */
.sound__art::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  box-shadow: inset 0 -70px 56px -44px var(--c); opacity: 0.45; }
.sound__art::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: radial-gradient(170px 170px at var(--mx, 50%) var(--my, 30%), rgba(255,255,255,0.34), transparent 60%);
  opacity: 0; mix-blend-mode: screen; transition: opacity 0.45s var(--ease); }
.sound.is-hover .sound__art::after { opacity: 1; }

.sound__meta { display: flex; align-items: center; gap: 10px; padding: 13px 6px 3px; }
.sound__txt { display: flex; flex-direction: column; min-width: 0; }
.sound__txt strong { font-family: "Fraunces", serif; font-weight: 400; font-size: 1.06rem; line-height: 1.1; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sound__txt span { font-family: var(--font-body); font-size: 0.74rem; color: rgba(255,255,255,0.65); font-weight: 500; }
/* glass play button — fills with the brand colour and reveals a Spotify glyph on hover */
.sound__play { position: relative; margin-left: auto; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); transition: background 0.35s var(--ease), transform 0.35s var(--ease); }
.sound__play::before { content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0;
  border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #fff;
  transform: translateX(1px); }
.sound:hover .sound__play { background: color-mix(in srgb, var(--c) 70%, transparent); transform: scale(1.1); }

/* ---------- ethos ---------- */
.ethos { text-align: center; max-width: 860px; }
.ethos blockquote { font-family: "Fraunces", serif; font-weight: 300; font-size: clamp(1.8rem, 4.6vw, 3.2rem); line-height: 1.18; position: relative; }
.ethos blockquote em { background: var(--grad-cool); -webkit-background-clip: text; background-clip: text; color: transparent; }
.quote-mark { position: absolute; top: -0.5em; left: 50%; transform: translateX(-50%); font-size: 3em; color: var(--dawn-2); opacity: 0.3; }
.ethos__sub { margin-top: 26px; color: var(--ink-dim); font-size: 1.1rem; max-width: 48ch; margin-inline: auto; }

/* ---------- features grid ---------- */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card { grid-column: span 1; padding: 30px; border-radius: 26px; position: relative; overflow: hidden;
  background: var(--glass); border: 1px solid var(--hair); backdrop-filter: blur(16px);
  transition: transform 0.5s var(--ease), border-color 0.5s, background 0.5s; }
.card--wide { grid-column: span 2; }
.card::after { content: ""; position: absolute; inset: 0; border-radius: 26px; pointer-events: none; background: linear-gradient(150deg, rgba(255,255,255,0.1), transparent 40%); opacity: 0.5; }
.card:hover { transform: translateY(-5px); border-color: rgba(255,255,255,0.24); background: var(--glass-strong); }
.card__icon { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; font-size: 1.4rem; margin-bottom: 20px;
  background: radial-gradient(circle at 32% 28%, var(--night-600), var(--night-800)); border: 1px solid var(--hair); box-shadow: inset 0 0 16px rgba(129,140,248,0.3); }
.card h3 { font-size: 1.45rem; margin-bottom: 12px; }
.card p { color: var(--ink-dim); font-size: 0.98rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chip { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.03em; padding: 6px 13px; border-radius: 100px; background: rgba(255,255,255,0.06); border: 1px solid var(--hair); color: var(--ink-dim); }
.chip--spotify { color: #6ee7a8; border-color: rgba(110,231,168,0.35); }
.chip--apple { color: #f9a8c7; border-color: rgba(249,168,199,0.35); }

/* ---------- reliability ---------- */
.reliability { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 56px; align-items: start; }
.reliability__copy { position: sticky; top: 110px; }
.reliability__copy h2 { font-size: clamp(2.1rem, 5vw, 3.4rem); margin: 18px 0 22px; }
.chain { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.chain li { display: flex; align-items: center; gap: 18px; padding: 18px 22px; border-radius: 18px; background: var(--glass); border: 1px solid var(--hair); backdrop-filter: blur(12px); transition: transform 0.4s var(--ease), border-color 0.4s; }
.chain li:hover { transform: translateX(6px); border-color: rgba(255,255,255,0.24); }
.chain__n { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-body); font-weight: 600; font-size: 1rem; color: var(--ink); background: rgba(129,140,248,0.12); border: 1px solid rgba(129,140,248,0.4); }
.chain li div { display: flex; flex-direction: column; }
.chain li strong { font-weight: 600; font-size: 1.02rem; }
.chain li span { color: var(--ink-dim); font-size: 0.9rem; }
.chain__keep .chain__n { background: linear-gradient(140deg, rgba(255,212,121,0.16), rgba(251,111,142,0.16)); border-color: rgba(251,157,107,0.5); color: var(--dawn-1); }
.chain__keep { border-color: rgba(251,157,107,0.3); }

/* ---------- how ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step { padding: 34px 28px; border-radius: 24px; position: relative; background: linear-gradient(165deg, var(--glass-strong), var(--glass)); border: 1px solid var(--hair); backdrop-filter: blur(14px); transition: transform 0.5s var(--ease); }
.step:hover { transform: translateY(-5px); }
.step__num { font-family: var(--font-body); font-size: 2.4rem; font-weight: 600; letter-spacing: -0.02em; background: var(--grad-cool); -webkit-background-clip: text; background-clip: text; color: transparent; }
.step h3 { font-size: 1.32rem; margin: 12px 0 10px; }
.step p { color: var(--ink-dim); font-size: 0.96rem; }

/* ---------- faq ---------- */
.faq__list { display: grid; gap: 12px; max-width: 820px; }
.qa { border: 1px solid var(--hair); border-radius: 18px; background: var(--glass); backdrop-filter: blur(12px); padding: 4px 24px; transition: border-color 0.3s, background 0.3s; }
.qa[open] { border-color: rgba(255,255,255,0.22); background: var(--glass-strong); }
.qa summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; font-family: "Fraunces", serif; font-size: 1.16rem; font-weight: 400; }
.qa summary::-webkit-details-marker { display: none; }
.qa__plus { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.qa__plus::before, .qa__plus::after { content: ""; position: absolute; inset: 0; margin: auto; background: var(--dawn-2); border-radius: 2px; }
.qa__plus::before { width: 16px; height: 2px; }
.qa__plus::after { width: 2px; height: 16px; transition: transform 0.3s var(--ease); }
.qa[open] .qa__plus::after { transform: rotate(90deg) scaleX(0); }
.qa p { color: var(--ink-dim); padding: 0 0 22px; max-width: 64ch; font-size: 0.98rem; }

/* ---------- cta ---------- */
.cta { text-align: center; }
.cta__inner { position: relative; max-width: 720px; margin: 0 auto; padding: clamp(44px, 6vw, 76px) clamp(28px, 5vw, 60px); border-radius: 40px; overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(255,255,255,0.12), transparent 55%),
    linear-gradient(165deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03) 55%, rgba(255,255,255,0.06));
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow:
    0 50px 120px -44px rgba(0,0,0,0.7),
    0 0 90px -30px rgba(251,157,107,0.4),
    inset 0 1.5px 0.5px rgba(255,255,255,0.6),
    inset 0 -1.5px 1px rgba(255,255,255,0.12); }
/* dawn glow pooling at the base of the card */
.cta__glow { position: absolute; left: 50%; bottom: -120px; transform: translateX(-50%); width: 460px; height: 320px; z-index: 0;
  background: radial-gradient(circle, rgba(251,157,107,0.45), rgba(251,111,142,0.2) 45%, transparent 70%); filter: blur(40px); opacity: 0.7; }
/* slow diagonal shine sweep */
.cta__sheen { position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; overflow: hidden; }
.cta__sheen::before { content: ""; position: absolute; top: -60%; left: -30%; width: 50%; height: 220%; transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent); animation: sheen 7s ease-in-out infinite; }
@keyframes sheen { 0%, 60% { left: -40%; } 100% { left: 130%; } }
.cta__inner > *:not(.cta__glow):not(.cta__sheen) { position: relative; z-index: 2; }
/* app icon — glass-ringed, gently floating */
.cta__icon { width: 76px; height: 76px; border-radius: 19px; margin: 0 auto 22px; display: block;
  box-shadow: 0 16px 34px -12px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.14), inset 0 1px 0 rgba(255,255,255,0.4);
  animation: iconFloat 6s ease-in-out infinite; }
@keyframes iconFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.cta .eyebrow { margin-bottom: 14px; }
.cta h2 { font-size: clamp(2rem, 5.2vw, 3.3rem); }
.cta__inner > p { color: var(--ink-dim); margin: 18px auto 30px; max-width: 44ch; font-size: 1.05rem; }
.cta__actions { display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; }
.qr { display: inline-flex; align-items: center; gap: 13px; padding: 11px 18px 11px 11px; border-radius: 18px;
  background: var(--glass); border: 1px solid var(--hair); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.qr__img { width: 64px; height: 64px; padding: 7px; border-radius: 12px; background: #fff; display: block; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06); }
.qr__label { font-size: 0.82rem; font-weight: 600; color: var(--ink-dim); line-height: 1.25; text-align: left; }
.cta__fine { color: var(--ink-faint); font-size: 0.85rem; margin-top: 20px; letter-spacing: 0.02em; }

/* ---------- footer ---------- */
.site-footer { max-width: var(--maxw); margin: 0 auto; padding: 56px 24px 40px; border-top: 1px solid var(--hair); }
.site-footer__top { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 22px; color: var(--ink-dim); font-size: 0.92rem; }
.foot-nav a:hover { color: var(--ink); }
.site-footer__bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 30px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.06); color: var(--ink-faint); font-size: 0.85rem; }
.foot-legal a:hover { color: var(--ink-dim); }
.foot-tag { font-style: italic; font-family: "Fraunces", serif; }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(32px) scale(0.985); filter: blur(10px);
  transition: opacity 0.9s var(--ease-spring), transform 1s var(--ease-spring), filter 0.9s var(--ease-spring);
  transition-delay: var(--d, 0ms); }
.reveal.is-in { opacity: 1; transform: none; filter: blur(0); }
.reveal-device { opacity: 0; transform: translateY(48px) scale(0.95); filter: blur(12px);
  transition: opacity 1.1s var(--ease-spring), transform 1.2s var(--ease-spring), filter 1s var(--ease-spring); }
.reveal-device.is-in { opacity: 1; transform: none; filter: blur(0); }

/* word-by-word headline reveal */
.split .word { display: inline-block; white-space: pre; opacity: 0; transform: translateY(0.55em) rotate(1.5deg); filter: blur(6px);
  transition: opacity 0.7s var(--ease-spring), transform 0.85s var(--ease-spring), filter 0.7s var(--ease-spring);
  transition-delay: var(--wd, 0ms); }
.split.is-in .word { opacity: 1; transform: none; filter: blur(0); }

/* soft cursor spotlight */
.cursor-glow { position: fixed; left: 0; top: 0; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%;
  pointer-events: none; z-index: 4; opacity: 0; mix-blend-mode: screen; will-change: transform, opacity;
  background: radial-gradient(circle, rgba(129,140,248,0.12), rgba(45,212,191,0.06) 40%, transparent 62%);
  transition: opacity 0.6s var(--ease); }
.cursor-glow.is-on { opacity: 1; }
html.day .cursor-glow { background: radial-gradient(circle, rgba(168,85,247,0.10), rgba(45,212,191,0.05) 40%, transparent 62%); }

/* ---------- responsive ---------- */
@media (max-width: 920px) {
  .hero { grid-template-columns: 1fr; gap: 48px; text-align: center; }
  .hero__copy h1 { margin-inline: auto; }
  .hero .lede { margin-inline: auto; }
  .hero__actions, .hero__proof { justify-content: center; }
  .hero__device { order: -1; }
  .reliability { grid-template-columns: 1fr; gap: 36px; }
  .reliability__copy { position: static; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .card--wide { grid-column: span 2; }
}
@media (max-width: 680px) {
  .nav { display: none; }
  .grid, .steps { grid-template-columns: 1fr; }
  .card--wide { grid-column: span 1; }
  .hero__proof { gap: 12px 20px; }
  .site-header.is-scrolled { padding: 8px 18px; }
  .sound { width: 200px; padding: 10px; }
  .sound__art img { height: 176px; }
  /* lead with the headline + CTA on phones; phone mockup follows */
  .hero { gap: 36px; }
  .hero__device { order: 0; }
  .hero__copy h1 { font-size: clamp(2rem, 8.5vw, 3rem); }
  .device { width: min(264px, 72vw); }
  section { padding-left: 20px; padding-right: 20px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .qr { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
  .reveal, .reveal-device { opacity: 1; transform: none; }
  .marquee__track { animation: none !important; }
}

/* ---------- scroll progress hairline ---------- */
.scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 70; transform-origin: 0 50%; transform: scaleX(0);
  background: var(--grad-dawn); box-shadow: 0 0 12px rgba(251,157,107,0.5); will-change: transform; }

/* ---------- stats strip ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center;
  padding-top: clamp(36px, 5vw, 60px); padding-bottom: clamp(36px, 5vw, 60px); }
.stat { display: flex; flex-direction: column; gap: 6px; padding: 28px 16px; border-radius: 24px;
  background: var(--glass); border: 1px solid var(--hair); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: transform 0.5s var(--ease), border-color 0.5s; }
.stat:hover { transform: translateY(-4px); border-color: rgba(255,255,255,0.22); }
.stat__num { font-family: var(--font-body); font-size: clamp(2.4rem, 5vw, 3.5rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1;
  background: var(--grad-cool); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat__label { font-size: 0.84rem; color: var(--ink-dim); font-weight: 500; }

/* ---------- reliability chain cascade line ---------- */
.chain { position: relative; }
.chain::before { content: ""; position: absolute; left: 41px; top: 28px; bottom: 28px; width: 2px; z-index: 0;
  background: linear-gradient(var(--indigo), var(--purple) 40%, var(--teal) 70%, var(--dawn-2));
  transform: scaleY(0); transform-origin: top; opacity: 0.5; transition: transform 1.3s var(--ease-spring); }
.chain.is-in::before { transform: scaleY(1); }
.chain li { position: relative; z-index: 1; }

/* ---------- floating nav entrance ---------- */
.site-header { animation: navDrop 0.9s var(--ease-spring) both; }
@keyframes navDrop { from { transform: translateX(-50%) translateY(-24px); opacity: 0; } to { transform: translateX(-50%) translateY(0); opacity: 1; } }

/* ---------- legal pages ---------- */
.legal-top { max-width: 820px; margin: 0 auto; padding: 30px 24px; display: flex; align-items: center; justify-content: space-between; }
.legal-top .brand__mark { height: 20px; }
.legal-back { font-size: 0.92rem; color: var(--ink-dim); transition: color 0.25s; }
.legal-back:hover { color: var(--ink); }
.legal { max-width: 820px; margin: 0 auto; padding: clamp(30px, 6vw, 70px) 24px clamp(60px, 9vw, 110px); }
.legal h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); margin-bottom: 10px; }
.legal .updated { color: var(--ink-faint); font-size: 0.9rem; margin-bottom: 40px; }
.legal h2 { font-family: var(--font-display); font-size: 1.5rem; margin: 40px 0 14px; }
.legal h3 { font-family: var(--font-display); font-size: 1.12rem; margin: 26px 0 10px; color: var(--ink); }
.legal__meta { font-size: 0.9rem; color: var(--ink-faint); line-height: 1.7; margin-bottom: 34px; padding-bottom: 26px; border-bottom: 1px solid var(--hair); }
.legal p, .legal li { color: var(--ink-dim); font-size: 1.02rem; line-height: 1.7; }
.legal p { margin-bottom: 14px; }
.legal ul { padding-left: 22px; margin-bottom: 14px; display: grid; gap: 8px; }
.legal a { color: var(--indigo); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--purple); }
.legal strong { color: var(--ink); }
.legal__note { margin-top: 44px; padding: 18px 22px; border-radius: 16px; background: var(--glass); border: 1px solid var(--hair);
  font-size: 0.9rem; color: var(--ink-faint); }

/* ============================================================
   DAY / DAWN THEME — toggled by .day on <html>.
   Remaps the core tokens so most components flip automatically;
   a few hardcoded surfaces are overridden explicitly below.
   ============================================================ */
html.day {
  --nav-ink: rgba(36, 26, 61, 0.82);
  --night-900: #fbf4ef;
  --night-800: #f5eefc;
  --night-700: #efe7fb;
  --night-600: #e7ddf7;
  --ink: #241a3d;
  --ink-dim: #5d5784;
  --ink-faint: #938da8;
  --glass: rgba(255, 255, 255, 0.55);
  --glass-strong: rgba(255, 255, 255, 0.72);
  --hair: rgba(40, 26, 80, 0.12);
  /* deeper accent gradients so coloured text stays legible on a light background */
  --grad-dawn: linear-gradient(105deg, #f59e0b, #f43f5e 55%, #db2777);
  --grad-cool: linear-gradient(105deg, #0d9488, #6366f1 55%, #9333ea);
}
html.day .atmosphere {
  background:
    radial-gradient(120% 80% at 50% -8%, #ffe6d2, transparent 55%),
    radial-gradient(100% 90% at 100% 0%, #ece2ff 0%, transparent 50%),
    linear-gradient(180deg, #fdf4ee, #f3ecff 55%, #eaf1ff);
}
html.day .aurora { opacity: 0.2; mix-blend-mode: normal; filter: blur(120px); }
html.day .aurora--3 { opacity: 0.16; }
html.day .stars { display: none; }
html.day .grain { opacity: 0.025; }
html.day .dawn-glow { opacity: 0.32; mix-blend-mode: normal;
  background: radial-gradient(circle, #ffd479 0%, #fb9d6b 45%, transparent 70%); }

html.day .site-header { background: rgba(255, 255, 255, 0.5); border-color: rgba(40, 26, 80, 0.1);
  box-shadow: 0 14px 36px -16px rgba(80, 60, 130, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -10px 16px -10px rgba(255, 255, 255, 0.7); }
html.day .site-header.is-scrolled { background: rgba(255, 255, 255, 0.66); }
html.day .site-header::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), transparent 42%); }
html.day .nav__cta { background: #241a3d; color: #fff; }
html.day .nav__cta:hover { background: #0c0a20; }
html.day .theme-toggle { background: rgba(40, 26, 80, 0.06); }
html.day .nav a:hover { color: var(--ink); }
html.day .brand { color: var(--ink); }

/* App Store badge → dark variant for contrast on the light page */
html.day .appstore { background: #1b1430; color: #fff; border-color: transparent;
  box-shadow: 0 14px 34px -14px rgba(40, 26, 80, 0.5); }

html.day .card::after { background: linear-gradient(150deg, rgba(255, 255, 255, 0.6), transparent 40%); }
html.day .card__icon, html.day .chain__n { box-shadow: none; }
html.day .trust__svc--apple { color: var(--ink); }
html.day .quote-mark { opacity: 0.45; }