/* ==========================================================================
   STRIIV — editorial build
   Bone canvas, near-black ink, purple accent, monospace furniture.
   ========================================================================== */

:root {
  /* — Canvas ------------------------------------------------------------ */
  --bone:     #DBDBDA;
  --bone-2:   #D2D2D0;
  --bone-3:   #C8C8C5;
  --paper:    #E8E8E7;
  --ink:      #050505;
  --ink-2:    #202020;
  --ink-3:    #4A4A4A;
  --ink-mute: #6E6E6C;

  /* — Accent -------------------------------------------------------------
     Replaces the reference orange. Two tokens because one can't do both:
       --purple      fills and large display (white on it = 5.80:1)
       --purple-ink  purple AS text on bone   (5.13:1; --purple is only 4.18)
     ---------------------------------------------------------------------- */
  --purple:     #7C3FDE;
  --purple-ink: #6D28D9;
  --purple-dk:  #4C1D95;
  --purple-lt:  #B794F6;

  /* Secondary, decorative only — 2.23:1 on bone, never used for text */
  --blue: #009BE3;

  /* — Type -------------------------------------------------------------- */
  --display: 'Archivo', 'Arial Black', system-ui, sans-serif;
  --sans:    'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;

  /* — Space ------------------------------------------------------------- */
  --s-2xs: 4px;  --s-xs: 8px;  --s-sm: 16px; --s-md: 24px;
  --s-lg: 40px;  --s-xl: 64px; --s-2xl: 96px; --s-3xl: 140px;

  --edge: clamp(20px, 4vw, 56px);
  --maxw: 1440px;
  --nav-h: 68px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-spring: cubic-bezier(.34,1.3,.64,1);
  /* expo-out — near-instant start, very long settle. Reads as "smooth". */
  --ease-soft: cubic-bezier(.16,1,.3,1);

  --z-base: 0; --z-raised: 10; --z-nav: 60; --z-loader: 9000;
}

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
  /* `clip` only landed in Safari 16. Older iOS drops the declaration and
     would scroll sideways on the decorative layers, so `hidden` goes first
     as the fallback. Safe here because the nav is fixed, not sticky. */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  font-variation-settings: 'wdth' 100;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;
}

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

::selection { background: var(--purple); color: #fff; }

:focus-visible {
  outline: 3px solid var(--purple-ink);
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute; left: var(--s-sm); top: -120px;
  z-index: 9999;
  background: var(--ink); color: var(--bone);
  padding: 14px 22px;
  font-family: var(--mono); font-size: .8125rem;
  text-transform: uppercase; letter-spacing: .1em;
  transition: top 160ms var(--ease);
}
.skip-link:focus { top: var(--s-sm); }

.vh {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Type scale
   ========================================================================== */

/* The signature: enormous, uppercase, weight 900, expanded width,
   negative tracking, sub-1 line-height. */
.display {
  font-family: var(--display);
  font-variation-settings: 'wdth' 125;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.055em;
  line-height: .82;
  margin: 0;
  text-wrap: balance;
}

/* 12vw / 11rem cap is derived, not guessed: at wdth 125 the longest word
   ("WELLBEING") measures ~7.37em, and 13vw overflowed by 49px just above the
   900px breakpoint. 12vw clears the content box at 901, 1024, 1440 and 1920. */
.d-hero  { font-size: clamp(3.6rem, 12vw, 11rem); line-height: .78; }
.d-xl    { font-size: clamp(2.6rem, 7.5vw, 6.5rem); }
.d-lg    { font-size: clamp(2rem, 5vw, 4rem); }
.d-md    { font-size: clamp(1.5rem, 3vw, 2.4rem); letter-spacing: -.04em; }

h1, h2, h3, h4 { margin: 0; font-weight: 700; }

/* Mono furniture — labels, numbers, nav, meta */
.mono {
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.tag {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono);
  font-size: .75rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--purple-ink);
}
.tag::before {
  content: ""; width: 7px; height: 7px; flex: none;
  background: var(--purple); border-radius: 50%;
}
.tag--plain { color: var(--ink-3); }
.tag--plain::before { background: var(--ink); }
.tag--light { color: rgba(255,255,255,.75); }
.tag--light::before { background: var(--purple-lt); }

.body-copy {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink-2);
  max-width: 60ch;
}
.body-copy + .body-copy { margin-top: var(--s-sm); }
.body-copy--lg { font-size: clamp(1.125rem, 1.7vw, 1.375rem); line-height: 1.6; }

.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  /* viewport-fit=cover lets the bone background run edge to edge (no white
     letterbox beside the notch in landscape); these keep content clear of it. */
  padding-left: max(var(--edge), env(safe-area-inset-left));
  padding-right: max(var(--edge), env(safe-area-inset-right));
}

.sec { padding-block: clamp(72px, 10vw, 150px); position: relative; overflow-x: clip; }
.sec--tight { padding-block: clamp(48px, 6vw, 88px); }
.sec--ink { background: var(--ink); color: var(--bone); }
.sec--paper { background: var(--paper); }
.sec--purple { background: var(--purple); color: #fff; }

/* Hairline rules are a load-bearing part of the look */
.rule { height: 1px; background: rgba(5,5,5,.16); border: 0; margin: 0; }
.sec--ink .rule { background: rgba(255,255,255,.18); }

.sec-head { display: grid; gap: var(--s-md); margin-bottom: var(--s-xl); }
.sec-head__row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-md); flex-wrap: wrap;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 54px;
  padding: 15px 30px;
  background: var(--ink); color: var(--bone);
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: .75rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer;
  transition: background 180ms var(--ease), color 180ms var(--ease),
              border-color 180ms var(--ease), transform 160ms var(--ease);
}
.btn:hover { background: var(--purple); border-color: var(--purple); color: #fff; transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.985); }

.btn--purple { background: var(--purple); border-color: var(--purple); color: #fff; }
.btn--purple:hover { background: var(--purple-dk); border-color: var(--purple-dk); }

.btn--ghost { background: transparent; color: var(--ink); border-color: rgba(5,5,5,.28); }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--bone); }

.btn--light { background: var(--bone); border-color: var(--bone); color: var(--ink); }
.btn--light:hover { background: #fff; border-color: #fff; color: var(--purple-dk); }

.btn--lg { min-height: 62px; padding: 19px 40px; font-size: .8125rem; }

.btn__arrow { width: 15px; height: 15px; flex: none; transition: transform 220ms var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ==========================================================================
   Loader
   ========================================================================== */

.loader {
  position: fixed; inset: 0;
  z-index: var(--z-loader);
  background: var(--bone);
  display: grid; place-items: center;
  transition: transform 760ms var(--ease), opacity 400ms linear;
}
.loader.is-done { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.loader[hidden] { display: none; }

.loader__inner { display: grid; justify-items: center; gap: var(--s-md); width: min(560px, 82vw); }
.loader__count {
  font-family: var(--display);
  font-variation-settings: 'wdth' 125;
  font-weight: 900; font-size: clamp(4rem, 17vw, 11rem);
  line-height: .8; letter-spacing: -.06em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.loader__bar { width: 100%; height: 2px; background: rgba(5,5,5,.16); overflow: hidden; }
.loader__fill {
  height: 100%; width: 100%;
  background: var(--purple);
  transform: scaleX(0); transform-origin: left;
}
.loader__word {
  font-family: var(--mono); font-size: .75rem;
  letter-spacing: .3em; text-transform: uppercase; color: var(--ink-3);
}

/* ==========================================================================
   Nav
   ========================================================================== */

.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex; align-items: center;
  background: rgba(219,219,218,.82);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color 240ms var(--ease), background 240ms var(--ease);
}
.nav.is-stuck { border-bottom-color: rgba(5,5,5,.14); }
.nav__in { display: flex; align-items: center; justify-content: space-between; gap: var(--s-md); }

.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo__mark {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  background: var(--ink); color: var(--bone);
  font-family: var(--display); font-weight: 900; font-size: 1rem;
  font-style: italic; letter-spacing: -.08em;
  transition: background 200ms var(--ease), transform 300ms var(--ease-spring);
}
.logo:hover .logo__mark { background: var(--purple); color: #fff; transform: rotate(-8deg); }
.logo__word {
  font-family: var(--display);
  font-variation-settings: 'wdth' 125;
  font-weight: 900; font-size: 1.15rem;
  text-transform: uppercase; letter-spacing: -.03em;
}

.nav__links { display: flex; align-items: center; gap: var(--s-lg); }
.nav__link {
  position: relative;
  font-family: var(--mono); font-size: .6875rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-2);
  padding: 10px 0;
  transition: color 160ms var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 4px;
  width: 100%; height: 1px; background: var(--purple);
  transform: scaleX(0); transform-origin: left;
  transition: transform 260ms var(--ease);
}
.nav__link:hover { color: var(--purple-ink); }
.nav__link:hover::after { transform: scaleX(1); }

.nav__right { display: flex; align-items: center; gap: var(--s-sm); }
.nav__right .btn { min-height: 42px; padding: 11px 22px; font-size: .6875rem; }

.nav__burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid rgba(5,5,5,.24);
  border-radius: 999px; cursor: pointer;
}
.nav__burger span {
  position: relative; width: 16px; height: 1.5px; background: var(--ink);
  transition: transform 240ms var(--ease), background 240ms var(--ease);
}
.nav__burger span::before, .nav__burger span::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 100%;
  background: var(--ink);
  transition: transform 240ms var(--ease), opacity 140ms linear;
}
.nav__burger span::before { top: -5px; }
.nav__burger span::after  { top: 5px; }
.nav__burger[aria-expanded="true"] span { background: transparent; }
.nav__burger[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span::after  { transform: translateY(-5px) rotate(-45deg); }

.drawer { display: none; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(28px, 5vw, 64px));
  padding-bottom: clamp(48px, 7vw, 100px);
  overflow: clip;
}

.hero__top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-md); flex-wrap: wrap;
  margin-bottom: var(--s-lg);
}
.hero__meta { display: grid; gap: 6px; text-align: right; }
.hero__meta span { font-family: var(--mono); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }

/* Split display words, mirroring the reference's stacked role words */
.hero__words { display: grid; gap: clamp(2px, .4vw, 8px); }
.hero__word { display: block; }
.hero__word--alt {
  color: transparent;
  -webkit-text-stroke: 2px var(--ink);
  text-stroke: 2px var(--ink);
}
.hero__word em { font-style: normal; color: var(--purple); }

.hero__lower {
  display: grid; grid-template-columns: 1fr auto;
  gap: var(--s-lg); align-items: end;
  margin-top: var(--s-lg);
}
.hero__blurb { max-width: 46ch; }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: var(--s-md); }

/* — Hero centrepiece: Studio desktop with the app dashboard overlapping — */
.stage {
  position: relative;
  margin-top: clamp(40px, 6vw, 84px);
}
.stage__glow {
  position: absolute; inset: -8% -6% -14%;
  background: radial-gradient(ellipse at 50% 45%, rgba(124,63,222,.34), transparent 68%);
  filter: blur(60px);
  z-index: var(--z-base);
  pointer-events: none;
}
/* — Desktop panel ------------------------------------------------------
   A single slab: black rim on all four sides, no chin, no stand — the same
   chassis language as the handsets, just far larger. Rim is 1.6% of body
   width (2.35% vertically, since the body is 1.47x wider than tall), and
   the screen is inset absolutely so those percentages resolve against this
   element rather than its parent.
   --------------------------------------------------------------------- */
.imac {
  --par-y: 0px;
  position: relative; z-index: var(--z-raised);
  width: min(100%, 1060px);
  margin-inline: auto;
  aspect-ratio: 1000 / 682;
  transform:
    translate3d(0, var(--par-y), 0)
    perspective(2600px)
    rotateY(-3deg)
    rotateX(1.6deg);
  transform-style: preserve-3d;
}

/* Contact shadow so the slab does not read as pasted on */
.imac::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -3%;
  margin-inline: auto;
  width: 62%; height: 4%;
  background: radial-gradient(ellipse at 50% 50%, rgba(5,5,5,.3), transparent 72%);
  filter: blur(16px);
  z-index: -1;
  pointer-events: none;
}

.imac__body {
  position: absolute; inset: 0;
  border-radius: 2.6% / 3.8%;
  background: linear-gradient(152deg,
    #34343B 0%, #131317 12%, #0A0A0C 44%,
    #0A0A0C 64%, #17171D 86%, #3A3A43 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.09),
    inset 0 1px 0 rgba(255,255,255,.13),
    26px 46px 74px -30px rgba(5,5,5,.4),
    0 40px 84px -36px rgba(5,5,5,.32);
}

.imac__screen {
  position: absolute;
  top: 2.35%; bottom: 2.35%; left: 1.6%; right: 1.6%;
  isolation: isolate;
  overflow: hidden;
  border-radius: 1.4% / 2%;
  background: #fff;
}
.imac__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }

.stage__phone {
  --par-y: 0px;
  --tilt-y: -9deg;
  --tilt-x: 4deg;
  position: absolute; z-index: 20;
  right: clamp(-8px, 1vw, 40px);
  /* Overlaps the lower edge of the display (no stand to clear any more) */
  bottom: clamp(-44px, -3.2vw, -14px);
  width: clamp(140px, 17vw, 236px);
  /* Same self-relative rim as .device — percentage padding here resolved
     against .stage (~870px), giving this 236px phone a ~9% slab of a bezel. */
  aspect-ratio: 1000 / 2102;
  border-radius: 13% / 6%;
  background: linear-gradient(148deg,
    #45454E 0%, #17171C 14%, #0B0B0D 40%,
    #0B0B0D 62%, #1D1D24 84%, #4A4A54 100%);
  transform-style: preserve-3d;
  transform:
    translate3d(0, var(--par-y), 0)
    perspective(1400px)
    rotateY(var(--tilt-y))
    rotateX(var(--tilt-x));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.1),
    4px 4px 0 -1px rgba(9,9,11,.9),
    9px 9px 0 -4px rgba(6,6,8,.6),
    20px 34px 56px -16px rgba(5,5,5,.5),
    0 40px 74px -24px rgba(5,5,5,.45);
}
.stage__phone-screen {
  position: relative;
  isolation: isolate;
  border-radius: 11% / 5%; overflow: hidden; background: #fff;
  position: absolute;
  top: 1.24%; bottom: 1.24%; left: 2.6%; right: 2.6%;
}
.stage__phone-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.stage__phone-screen::before {
  content: ""; position: absolute;
  top: 1.5%; left: 0; right: 0;
  margin-inline: auto;
  width: 32%; height: 4.3%;
  background: #08080A; border-radius: 999px; z-index: 3;
}
.stage__phone-screen::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(114deg,
    rgba(255,255,255,.07) 0%, rgba(255,255,255,.025) 14%,
    rgba(255,255,255,0) 32%, rgba(255,255,255,0) 80%,
    rgba(255,255,255,.02) 100%);
}

/* ==========================================================================
   Marquee
   ========================================================================== */

.marquee {
  position: relative;
  overflow: hidden;
  border-block: 1px solid rgba(5,5,5,.16);
  background: var(--purple);
  color: #fff;
  padding-block: 16px;
}
.marquee__track { display: flex; width: max-content; animation: run 34s linear infinite; }
.marquee.is-paused .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; flex: none; }
.marquee__item {
  display: inline-flex; align-items: center; gap: var(--s-md);
  padding-inline: var(--s-md);
  font-family: var(--display);
  font-variation-settings: 'wdth' 125;
  font-weight: 900; font-size: clamp(1rem, 2vw, 1.7rem);
  text-transform: uppercase; letter-spacing: -.03em;
  white-space: nowrap;
}
.marquee__item::after {
  content: ""; width: 9px; height: 9px; flex: none;
  background: #fff; border-radius: 50%;
}
@keyframes run { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.marquee--ink { background: var(--ink); color: var(--bone); }
.marquee--ink .marquee__item::after { background: var(--purple-lt); }

/* ==========================================================================
   Statement
   ========================================================================== */

.statement__lines { display: grid; gap: clamp(10px, 1.6vw, 22px); }
.statement__line { display: block; }
.statement__line--mute { color: var(--ink-mute); }
.statement__line--accent { color: var(--purple-ink); }
.statement__foot {
  display: flex; justify-content: space-between; gap: var(--s-md);
  flex-wrap: wrap; margin-top: var(--s-xl);
}

/* ==========================================================================
   Numbered list (pillars)
   ========================================================================== */

.list { border-top: 1px solid rgba(5,5,5,.16); }
.item {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--s-md);
  align-items: start;
  padding-block: clamp(24px, 3vw, 40px);
  border-bottom: 1px solid rgba(5,5,5,.16);
  transition: background 260ms var(--ease), padding-inline 260ms var(--ease);
}
.item:hover { background: rgba(124,63,222,.06); padding-inline: 12px; }
.item__no {
  font-family: var(--mono); font-size: .8125rem; font-weight: 700;
  letter-spacing: .1em; color: var(--purple-ink);
  padding-top: 8px;
}
.item__title { transition: color 200ms var(--ease); }
.item:hover .item__title { color: var(--purple-ink); }
.item__body { display: grid; gap: var(--s-sm); }
.item__desc { color: var(--ink-2); font-size: 1rem; line-height: 1.65; }
.item__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.item__tags span {
  font-family: var(--mono); font-size: .6875rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid rgba(5,5,5,.22);
  border-radius: 999px;
  color: var(--ink-2);
}

/* ==========================================================================
   Feature blocks (MVP, creator)
   ========================================================================== */

.feature { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.feature--flip .feature__media { order: -1; }
.feature__body { display: grid; gap: var(--s-md); }

/* — 3D device ----------------------------------------------------------
   A CSS-rendered handset: perspective rotation, a machined rim gradient,
   stacked shadows standing in for chassis thickness, and a glass glare
   pass over the screen. --par-y is written by the scroll drift; --tilt-*
   by the pointer, so both compose into one transform.
   --------------------------------------------------------------------- */
.device {
  --par-y: 0px;
  /* Fixed pose. Tune these two to change the angle of every handset. */
  --tilt-y: -9deg;
  --tilt-x: 4deg;

  position: relative;
  width: min(100%, 400px);
  margin-inline: auto;
  /* Proportional rim at every size. A fixed 10px/42px was an over-rounded,
     thick-rimmed phone once the paired devices dropped to ~150px wide.

     The rim is NOT padding: percentage padding resolves against the PARENT's
     width, so 2.6% measured 5.5% on the paired devices and ~9% on the hero
     phone. The screen is inset absolutely instead, which resolves against
     this element. Aspect below = screen (0.4625) plus a 2.6% rim each side.

     Corners: 13% of width horizontally, 6% vertically — this box is 2.1x
     taller than wide, so the pair describes a circular corner. */
  aspect-ratio: 1000 / 2102;
  border-radius: 13% / 6%;

  /* Machined aluminium rim: bright where light catches, dark on the turn */
  background: linear-gradient(148deg,
    #45454E 0%, #17171C 14%, #0B0B0D 40%,
    #0B0B0D 62%, #1D1D24 84%, #4A4A54 100%);

  transform-style: preserve-3d;
  transform:
    translate3d(0, var(--par-y), 0)
    perspective(1600px)
    rotateY(var(--tilt-y))
    rotateX(var(--tilt-x));
  /* No transform transition: the scroll drift writes --par-y every frame,
     and easing it would smear the parallax by half a second. */

  box-shadow:
    0 0 0 1px rgba(255,255,255,.10),          /* rim highlight        */
    5px 5px 0 -2px rgba(9,9,11,.92),          /* chassis side         */
    11px 11px 0 -5px rgba(6,6,8,.62),         /* deeper side          */
    24px 42px 64px -18px rgba(5,5,5,.5),      /* cast shadow          */
    0 46px 88px -28px rgba(5,5,5,.45);        /* ground contact       */
}

.device__screen {
  position: relative;
  /* Contain the notch and glare pseudo-elements in their own stacking
     context, so the glare can't paint over the play button above it. */
  isolation: isolate;
  border-radius: 11% / 5%;
  overflow: hidden;
  background: #fff;
  /* 2.6% of the device width on every edge (1.24% vertically, since the
     device is 2.1x taller than wide) */
  position: absolute;
  top: 1.24%; bottom: 1.24%; left: 2.6%; right: 2.6%;
}
.device__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* Dynamic Island — a floating pill inset from the top edge, not a notch
   bonded to it. Sized off the screen box so it scales with the handset. */
.device__screen::before {
  content: ""; position: absolute;
  top: 1.5%; left: 0; right: 0;
  margin-inline: auto;
  width: 32%; height: 4.3%;
  background: #08080A;
  border-radius: 999px;
  z-index: 3;
}

/* Glass: a raking highlight across the display */
.device__screen::after {
  content: ""; position: absolute; inset: 0; z-index: 4;
  pointer-events: none;
  background: linear-gradient(114deg,
    rgba(255,255,255,.07) 0%,
    rgba(255,255,255,.025) 14%,
    rgba(255,255,255,0)  32%,
    rgba(255,255,255,0)  80%,
    rgba(255,255,255,.02) 100%);
}

.media-glow {
  position: relative;
  display: grid; place-items: center;
}
.media-glow::before {
  content: ""; position: absolute; inset: -6% -12%;
  background: radial-gradient(circle at 50% 45%, rgba(124,63,222,.36), transparent 66%);
  filter: blur(52px);
  z-index: var(--z-base);
}
.media-glow > * { position: relative; z-index: var(--z-raised); }

/* align-items must not be `stretch`: the staggered margin-top on the second
   device made the flex line taller, stretching the first device's chassis
   while its screen kept a fixed aspect-ratio — 38px of dead black bezel. */
/* Explicit width required: .media-glow centres with place-items, so this
   would otherwise size to its content — and the devices now have none in
   flow (their screens are absolutely inset), collapsing the row to its gap. */
.duo { display: flex; width: 100%; justify-content: center; align-items: flex-start; gap: clamp(12px, 2vw, 26px); }
.duo .device { width: min(48%, 310px); margin: 0; }
.duo .device:nth-child(2) { margin-top: clamp(24px, 4vw, 56px); }


/* Spec rows */
.specs { display: grid; gap: 0; margin-top: var(--s-sm); }
.spec {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-sm);
  padding-block: 13px;
  border-top: 1px solid rgba(5,5,5,.16);
  font-family: var(--mono); font-size: .75rem;
  letter-spacing: .1em; text-transform: uppercase;
}
.spec:last-child { border-bottom: 1px solid rgba(5,5,5,.16); }
.spec b { color: var(--purple-ink); font-weight: 700; }
.sec--ink .spec { border-color: rgba(255,255,255,.18); }
.sec--ink .spec b { color: var(--purple-lt); }

/* ==========================================================================
   Video
   ========================================================================== */

/* The demo is a portrait 1080x2336 screen recording. Full-bleed it rendered
   ~2800px tall, so it lives in the same phone frame as the other screens. */
.device--video { width: min(100%, 360px); }
/* Fallback text inside <video> (unsupported browsers) sits on black */
.device--video .device__screen { background: #000; color: #fff; }
.device--video video {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top;
}

.play__btn {
  position: absolute; right: 10px; bottom: 16px; z-index: 3;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: rgba(5,5,5,.6);
  backdrop-filter: blur(8px);
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  cursor: pointer;
  transition: background 160ms var(--ease), transform 160ms var(--ease);
}
.play__btn:hover { background: var(--purple); transform: scale(1.06); }
.play__btn svg { width: 17px; height: 17px; }

/* ==========================================================================
   Stats
   ========================================================================== */

.stats { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat {
  padding: var(--s-md);
  border-left: 1px solid rgba(255,255,255,.18);
  display: grid; gap: 10px; align-content: start;
}
.stat:first-child { border-left: 0; padding-left: 0; }
.stat__n {
  font-family: var(--display);
  font-variation-settings: 'wdth' 125;
  font-weight: 900; font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  line-height: .9; letter-spacing: -.04em;
  color: var(--purple-lt);
  font-variant-numeric: tabular-nums;
}
.stat p { font-size: .9375rem; line-height: 1.6; color: rgba(255,255,255,.76); }

/* ==========================================================================
   Mission
   ========================================================================== */

.mission { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-md); }
.mcard {
  display: grid; gap: var(--s-sm); align-content: start;
  padding: clamp(24px, 3vw, 40px);
  background: var(--paper);
  /* Light card inside the dark .sec--ink: reset the inherited bone text, or
     the card headings render bone-on-paper at 1.13:1 — near invisible. */
  color: var(--ink);
  border: 1px solid rgba(5,5,5,.14);
}
.mcard__no {
  font-family: var(--mono); font-size: .75rem; font-weight: 700;
  letter-spacing: .14em; color: var(--purple-ink);
}
.mcard p { color: var(--ink-2); font-size: .9375rem; line-height: 1.7; }
.mcard__target {
  margin-top: auto; padding-top: var(--s-sm);
  border-top: 1px solid rgba(5,5,5,.16);
  font-family: var(--mono); font-size: .6875rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--purple-ink);
}

.chain { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: var(--s-md); }
.chain span {
  font-family: var(--mono); font-size: .6875rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 9px 16px;
  /* .30 measured 2.53:1 — under the 3:1 non-text minimum (WCAG 1.4.11) */
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 999px;
}
.chain svg { width: 13px; height: 13px; opacity: .7; flex: none; }

/* ==========================================================================
   CTA + form
   ========================================================================== */

.cta { text-align: center; display: grid; justify-items: center; gap: var(--s-md); }
.cta .display { color: #fff; }

.form { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; align-items: flex-start; width: min(100%, 620px); }
.form__field { flex: 1 1 280px; text-align: left; }
.form label {
  display: block; margin-bottom: 8px;
  font-family: var(--mono); font-size: .6875rem;
  letter-spacing: .14em; text-transform: uppercase; color: #fff;
}
.form input {
  width: 100%; min-height: 58px;
  padding: 16px 22px;
  background: rgba(255,255,255,.97);
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--mono);
  /* Must not drop below 16px: iOS Safari zooms the page on focus for any
     smaller input, and never zooms back out. */
  font-size: 16px;
  color: var(--ink);
}
.form input::placeholder { color: var(--ink-mute); }
.form input:focus-visible { outline: none; border-color: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.32); }
.form input[aria-invalid="true"] { border-color: #FFB4B4; }
.form .btn { margin-top: 27px; min-height: 58px; }
.form__err {
  display: block; margin-top: 8px; min-height: 18px;
  font-family: var(--mono); font-size: .6875rem;
  letter-spacing: .06em; color: #FFE3E3;
}
.form__ok {
  display: none; align-items: center; gap: 10px;
  padding: 16px 26px;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 999px;
  font-family: var(--mono); font-size: .75rem;
  letter-spacing: .12em; text-transform: uppercase;
}
.form__ok.is-on { display: inline-flex; }
.form__ok svg { width: 16px; height: 16px; }
/* .80 measured 4.31:1 on --purple, under AA. .92 gives 5.18:1. */
.cta__fine { font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.92); }

/* ==========================================================================
   Footer
   ========================================================================== */

.foot {
  background: var(--ink); color: rgba(255,255,255,.72);
  padding-top: var(--s-xl);
  /* Clear the home indicator / gesture bar */
  padding-bottom: calc(var(--s-lg) + env(safe-area-inset-bottom));
}
.foot__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s-lg); }
.foot .logo__mark { background: var(--bone); color: var(--ink); }
.foot .logo__word { color: #fff; }
.foot__blurb { margin-top: var(--s-sm); font-size: .9375rem; max-width: 32ch; line-height: 1.65; }
.foot h3 {
  color: #fff; margin-bottom: var(--s-sm);
  font-family: var(--mono); font-size: .6875rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
}
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.foot ul a {
  display: inline-flex; align-items: center; min-height: 34px;
  font-family: var(--mono); font-size: .75rem; letter-spacing: .08em;
  transition: color 160ms var(--ease);
}
.foot ul a:hover { color: var(--purple-lt); }
.foot__base {
  display: flex; flex-wrap: wrap; gap: var(--s-sm);
  justify-content: space-between; align-items: center;
  margin-top: var(--s-xl); padding-top: var(--s-md);
  border-top: 1px solid rgba(255,255,255,.16);
  font-family: var(--mono); font-size: .6875rem;
  letter-spacing: .1em; text-transform: uppercase;
}
.foot__social { display: flex; gap: 10px; }
.foot__social a {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.2); border-radius: 999px;
  transition: background 160ms var(--ease), border-color 160ms var(--ease);
}
.foot__social a:hover { background: var(--purple); border-color: var(--purple); }
.foot__social svg { width: 17px; height: 17px; }

/* ==========================================================================
   Reveal
   ========================================================================== */

/* Long, heavily-decelerated curve (expo-out). The slow tail is what reads as
   "smooth" while scrolling — a short ease pops, this settles. */
.rv {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity 1000ms var(--ease-soft), transform 1000ms var(--ease-soft);
}
.rv.is-in { opacity: 1; transform: translate3d(0, 0, 0); }

/* Decorative layers drift as they pass. Never applied to text or controls.
   Elements that also carry a 3D rotation compose --par-y themselves; this is
   the fallback for the flat ones. */
[data-par] { backface-visibility: hidden; }
.stage__glow { transform: translate3d(0, var(--par-y, 0px), 0); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1080px) {
  .item { grid-template-columns: 64px minmax(0, 1fr); }
  .item__body { grid-column: 2; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-left: 0; padding-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.18); padding-top: var(--s-md); }
}

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__right .btn { display: none; }
  .nav__burger { display: inline-flex; }

  .drawer {
    display: block;
    position: fixed; left: 0; right: 0; top: var(--nav-h);
    z-index: 55;
    background: var(--bone);
    border-bottom: 1px solid rgba(5,5,5,.16);
    padding: var(--s-md) var(--edge) var(--s-lg);
    transform: translateY(-14px);
    opacity: 0; visibility: hidden;
    transition: opacity 240ms var(--ease), transform 240ms var(--ease), visibility 0s linear 240ms;
  }
  .drawer.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .drawer ul { list-style: none; padding: 0; margin: 0 0 var(--s-md); display: grid; }
  .drawer a {
    display: block; padding: 16px 0;
    border-bottom: 1px solid rgba(5,5,5,.12);
    font-family: var(--display);
    font-variation-settings: 'wdth' 125;
    font-weight: 900; font-size: 1.5rem;
    text-transform: uppercase; letter-spacing: -.03em;
  }
  .drawer .btn { width: 100%; }

  .feature { grid-template-columns: 1fr; gap: var(--s-lg); }
  /* Copy before screenshot in every stacked feature: on a phone an image
     above its own heading reads as a picture with no explanation.
     Source order already puts the body first, so this only has to cancel
     the desktop flip. Desktop itself is untouched — the alternating
     two-column layout lives outside this media query. */
  .feature__media,
  .feature--flip .feature__media { order: 0; }
  .mission { grid-template-columns: 1fr; }
  .hero__lower { grid-template-columns: 1fr; }
  .stage__phone { width: clamp(120px, 22vw, 170px); bottom: -28px; right: 4px; }

  /* At wdth 125 / weight 900 the longest word ("WELLBEING", 9 chars) runs
     past the viewport and gets clipped. Narrow the width axis and ease the
     scale from tablet down — measured, not guessed. */
  .d-hero {
    font-size: clamp(2.2rem, 10.4vw, 5rem);
    font-variation-settings: 'wdth' 100;
    letter-spacing: -.045em;
  }
  .d-xl {
    font-size: clamp(1.9rem, 7.4vw, 3.4rem);
    font-variation-settings: 'wdth' 110;
  }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .item { grid-template-columns: 1fr; gap: 12px; }
  .item__no { padding-top: 0; }
  .item__body { grid-column: 1; }
  .stats { grid-template-columns: 1fr; }
  .stat { border-left: 0; padding-left: 0; }
  .stat:nth-child(n+2) { border-top: 1px solid rgba(255,255,255,.18); padding-top: var(--s-md); }
  .foot__grid { grid-template-columns: 1fr; }
  .hero__meta { text-align: left; }
  .form .btn { width: 100%; margin-top: 0; }

  .hero__word--alt { -webkit-text-stroke-width: 1.4px; }
  .foot ul a { min-height: 44px; }
  /* Logo is a home link — 30px clears the 24px minimum but is small for a
     thumb, so give it a full-height tap area on touch layouts. */
  .logo { min-height: 44px; }
}

/* Short viewports — phone landscape. A 68px fixed bar eats 17% of a 390px
   tall screen, so trim the chrome and the vertical rhythm. */
@media (max-height: 480px) and (orientation: landscape) {
  :root { --nav-h: 54px; }
  .sec { padding-block: clamp(48px, 8vh, 88px); }
  .hero { padding-top: calc(var(--nav-h) + 20px); }
  .loader__count { font-size: clamp(3rem, 12vh, 6rem); }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .rv { opacity: 1; transform: translate3d(0,0,0); }
  .marquee__track { animation: none; }
  /* The devices keep their static 3D pose — a fixed angle isn't motion. */
}

@media print {
  .nav, .loader, .play__btn, .foot__social { display: none !important; }
  .rv { opacity: 1; transform: none; }
}