/* ==========================================================================
   Base — sections
   ========================================================================== */

/* ------------------------------------------------------------------ nav -- */

.nav {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--nav-h); z-index: 100;
  display: flex; align-items: center;
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(250,250,250,.82);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom-color: var(--line);
}
.nav__in { display: flex; align-items: center; width: 100%; gap: 16px; }

.brand {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 17px; letter-spacing: -0.04em;
}
.brand img { width: 24px; height: 24px; border-radius: 6px; }

.nav__links { display: flex; gap: 18px; margin-left: auto; margin-right: 18px; }
.nav__links a {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
  transition: color .2s ease;
}
.nav__links a:hover { color: var(--ink); }
@media (max-width: 880px) { .nav__links { display: none; } .brand { margin-right: auto; } }

/* ----------------------------------------------------------------- hero -- */

.hero { padding-top: calc(var(--nav-h) + clamp(30px, 5vw, 60px)); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}
.hero h1 { margin: 22px 0 20px; }
.hero .lede { max-width: 40ch; }
.hero__cta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px; }
.hero__fine { margin-top: 18px; }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero .lede { max-width: 46ch; }
}

/* --------------------------------------------------------------- stats --- */

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 3vw, 40px); }
.stat__n {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(34px, 3.6vw, 46px);
  letter-spacing: -0.04em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat__l { margin-top: 10px; }
@media (max-width: 700px) { .stats { grid-template-columns: 1fr 1fr; gap: 26px 18px; } }

/* --------------------------------------------------------- section head -- */

.head { margin-bottom: clamp(28px, 3.4vw, 48px); }
.head .tag { display: block; margin-bottom: 16px; }
.head .lede { margin-top: 16px; max-width: 52ch; }

/* --------------------------------------------------------- numbered list -- */

/* The reference's "01 Full-stack engineer" rows: mono index, display label,
   hairline between, everything else stripped out. */
.rows { border-top: 1px solid var(--line); }
.rowitem {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(12px, 2vw, 28px);
  align-items: baseline;
  padding: clamp(18px, 2vw, 26px) 0;
  border-bottom: 1px solid var(--line);
  transition: background .25s ease;
}
.rowitem:hover { background: rgba(9,9,11,.018); }
.rowitem__n { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); letter-spacing: .1em; }
.rowitem__t { font-family: var(--font-display); font-weight: 600; font-size: clamp(17px, 1.7vw, 21px); letter-spacing: -0.028em; }
.rowitem__d { font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }
@media (max-width: 760px) {
  .rowitem { grid-template-columns: 34px minmax(0, 1fr); }
  .rowitem__d { grid-column: 2; }
}

/* -------------------------------------------------------------- privacy -- */

.priv {
  border-radius: var(--r-2xl);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: clamp(28px, 3.6vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 56px);
  align-items: center;
}
.priv__list { display: grid; gap: 0; }
.priv__row { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--line); }
.priv__row:first-child { border-top: 0; padding-top: 0; }
.priv__row b { display: block; font-weight: 500; font-size: 15px; margin-bottom: 3px; }
.priv__row span { font-size: 14px; color: var(--ink-2); line-height: 1.55; }
.priv__row i { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; background: var(--surface-2); }
@media (max-width: 860px) { .priv { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ cta -- */

.cta {
  border-radius: var(--r-2xl);
  background: var(--ink);
  color: #fff;
  padding: clamp(36px, 5vw, 72px) clamp(24px, 4vw, 56px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta .lede { color: rgba(255,255,255,.66); margin-inline: auto; max-width: 46ch; }
.cta .pill { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: rgba(255,255,255,.72); }
.cta__form { display: flex; gap: 8px; max-width: 440px; margin: 30px auto 0; }
.cta__form input {
  flex: 1; min-width: 0; height: 52px; padding: 0 20px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: #fff; font: inherit; font-size: 15px;
}
.cta__form input::placeholder { color: rgba(255,255,255,.38); }
.cta__form input:focus { outline: none; border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.1); }
.cta__form .btn--dark { background: #fff; color: var(--ink); }
.cta__form .btn--dark:hover { background: rgba(255,255,255,.88); }
.cta__note { margin-top: 16px; font-size: 12.5px; color: rgba(255,255,255,.4); }
.cta__ok { margin: 0; font-size: 15px; color: #6EE7A0; }
@media (max-width: 540px) { .cta__form { flex-direction: column; } .cta__form .btn { width: 100%; } }

/* --------------------------------------------------------------- footer -- */

.foot { border-top: 1px solid var(--line); padding-block: 36px 40px; }
.foot__in { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.foot__links { display: flex; gap: 20px; flex-wrap: wrap; margin-left: auto; }
.foot__links a { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.foot__links a:hover { color: var(--ink); }
.foot__c { margin-top: 22px; font-size: 12.5px; color: var(--ink-3); line-height: 1.7; }


/* ------------------------------------------------------------- devices --- */

/*
 * Devices are turned in 3D rather than sat flat in a box. The rotation lives on
 * .iphone; .iphone__stage already owns a scale() with a top-left origin, and
 * stacking a second transform there would fight it.
 *
 * Angles stay under ~20deg: past that the far edge of the screen goes soft and
 * the app UI — which is the entire point of showing a device — stops being
 * readable.
 */
.dev {
  perspective: 2200px;
  display: flex;
  justify-content: center;
}
.dev__mount { transform-style: preserve-3d; }
.dev .iphone {
  transform: rotateY(var(--ry, -17deg)) rotateX(var(--rx, 5deg)) rotate(var(--rz, -1.5deg));
  transition: transform 1s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}
/* Only the hero device is turned. The ones below are showing different screens
   and a tilt there fights the thing they exist to show. */
.dev--hero .iphone  { --ry: -17deg; --rz: -1.5deg; }
.dev--right .iphone,
.dev--left  .iphone { --ry: 0deg; --rx: 0deg; --rz: 0deg; }

/* The frame's own shadow is drawn for a flat device; turned, it needs a longer
   cast on the side the phone is leaning away from. */
.dev .iphone__body {
  box-shadow:
    0 0 0 .5px rgba(255,255,255,.5) inset,
    0 1px 1px rgba(255,255,255,.6) inset,
    0 -1px 1px rgba(0,0,0,.35) inset,
    0 2px 4px rgba(12,12,20,.14),
    0 30px 60px -18px rgba(12,12,20,.34),
    0 90px 140px -60px rgba(12,12,20,.5);
}
.dev .iphone__cast { display: none; }

@media (prefers-reduced-motion: reduce) { .dev .iphone { transition: none; } }

/* ------------------------------------------------------------- feature --- */

/* No panel, no border, no tint — copy on one side, device on the other, with
   room to breathe and a hairline between sections. */
.feature { border-top: 1px solid var(--line); }
.feature__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 84px);
  align-items: center;
  padding-block: clamp(52px, 7vw, 100px);
}
.feature--flip .feature__copy { order: 2; }
.feature--flip .dev { order: 1; }

.feature__copy h3 { margin: 16px 0 14px; }
.feature__copy p { margin: 0; font-size: 15.5px; line-height: 1.62; color: var(--ink-2); max-width: 44ch; }

.flist { list-style: none; margin: 24px 0 0; padding: 0; }
.flist li {
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-size: 14.5px; color: var(--ink-2);
}
.flist li:last-child { border-bottom: 1px solid var(--line); }
.flist b { font-weight: 500; color: var(--ink); }

@media (max-width: 940px) {
  .feature__grid { grid-template-columns: 1fr; gap: clamp(30px, 7vw, 52px); }
  .feature--flip .feature__copy { order: 1; }
  .feature--flip .dev { order: 2; }
  .feature__copy p { max-width: none; }
  /* Turned devices need horizontal room the phone viewport does not have. */
  .dev .iphone { --ry: 0deg; --rx: 0deg; --rz: 0deg; }
}

/* ---------------------------------------------------------------- reel --- */

/*
 * The montage sits on the same panel geometry as every other block on the page
 * — 2xl radius, one hairline border, its own overflow — so it reads as another
 * card rather than a video bolted on.
 *
 * aspect-ratio is declared rather than left to the file so the panel reserves
 * its height before the first byte of video arrives; without it the sections
 * below jump when metadata lands.
 */
.reel {
  position: relative;
  margin: 0;
  border-radius: var(--r-2xl);
  border: 1px solid var(--line);
  background: var(--ink);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  isolation: isolate;
}
.reel__v {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Footage is graded warm and bright; the HUD is white. The scrim is what keeps
   the labels legible over a sunlit track or a pale pool deck without dimming
   the middle of the frame. */
.reel__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(9,9,11,.58) 0%, rgba(9,9,11,.16) 26%, transparent 52%);
}

.reel__hud {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex; align-items: flex-end; gap: 16px;
  padding: clamp(16px, 2.2vw, 28px);
  padding-bottom: calc(clamp(16px, 2.2vw, 28px) + 4px);
}

.reel__chapters {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: clamp(10px, 1.6vw, 26px);
}
/* The scrim alone cannot carry these: the montage cuts between a sunlit pool
   and a white-blown sky, so the frame under the labels changes brightness every
   couple of seconds. The shadow is what keeps the inactive labels legible on the
   bright cuts without darkening the whole panel to suit the worst one. */
.reel__chapters li {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.62);
  text-shadow: 0 1px 3px rgba(9,9,11,.6);
  transition: color .35s ease;
}
.reel__chapters li.is-on { color: #fff; }
.reel__i { font-size: 10px; color: rgba(255,255,255,.45); transition: color .35s ease; }
.reel__chapters li.is-on .reel__i { color: var(--orange); }

/* WCAG 2.2.2: anything that plays for more than five seconds on its own needs
   a control. It is a real <button>, not an overlay that swallows the click. */
.reel__btn {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 14px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  transition: background .2s ease, border-color .2s ease;
}
.reel__btn:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.34); }
.reel__btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.reel__ico { width: 13px; height: 13px; flex: none; }

/* Hairline playhead along the panel's bottom edge. Width is set from
   timeupdate, so it is the montage's real position, not a CSS animation that
   would drift out of sync the moment the video stalls or is paused. */
.reel__bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: rgba(255,255,255,.16);
}
.reel__bar i {
  display: block; height: 100%; width: 0;
  background: var(--orange);
  transition: width .18s linear;
}

/* Narrow: 4/3 gives the footage more height on a phone. The HUD stays one row —
   stacking it costs about 40px of picture, and at these sizes the three labels
   and the button measure ~265px inside a ~318px content box, so they fit. */
@media (max-width: 620px) {
  .reel { aspect-ratio: 4 / 3; }
  .reel__hud { gap: 10px; padding: 14px; }
  .reel__chapters { gap: 12px; }
  .reel__chapters li { font-size: 10px; gap: 6px; }
  .reel__btn { height: 30px; padding: 0 11px; }
}

/* Below this the numerals are the first thing that can go: they are decoration,
   the words are the information. */
@media (max-width: 390px) {
  .reel__i { display: none; }
}

/* Reduced motion: main.js pauses the montage and it holds on its poster frame,
   so the playhead would sit at a misleading zero. Hide it instead. */
@media (prefers-reduced-motion: reduce) {
  .reel__bar { display: none; }
}