/* ============================================
   Fonts — SF Pro Text (copied 1:1 from frontend web/src/shared/assets/fonts)
   Same family name/weights as the React app so styles stay portable.
   ============================================ */
@font-face {
  font-family: 'SF Pro Text';
  src: url('../assets/fonts/sf-pro-text-light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SF Pro Text';
  src: url('../assets/fonts/sf-pro-text-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SF Pro Text';
  src: url('../assets/fonts/sf-pro-text-medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SF Pro Text';
  src: url('../assets/fonts/sf-pro-text-semibold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SF Pro Text';
  src: url('../assets/fonts/sf-pro-text-bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SF Pro Text';
  src: url('../assets/fonts/sf-pro-text-heavy.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ============================================
   Design tokens
   ============================================ */
:root {
  --color-bg: #0d0d0d;
  --color-nav-bg: rgba(13, 13, 13, 0.84);
  --color-surface: #212121;
  --color-text-primary: #fdfdfd;
  --color-text-secondary: #848484;
  --color-accent: #017bff;
  --color-accent-glow: rgba(1, 123, 255, 0.1);
  --color-border-subtle: rgba(255, 255, 255, 0.06);
  --color-border: rgba(255, 255, 255, 0.07);
  --color-border-strong: #444444;

  --radius-pill: 100px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --font-sans: 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --nav-height: 62px;
  --container-width: 1064px;
  --container-wide: 1440px;
  --page-padding-inline: 48px;
}

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.4;
  -webkit-text-size-adjust: 100%;
  /* landing copy isn't selectable and doesn't show the text (I-beam) cursor —
     only the form fields and the footer email opt back in (see below) */
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}

/* opt back into selection + text cursor: form fields (editable) and the
   footer email (so it can be copied) */
.field input,
.field textarea,
.field select,
.footer__links a[href^="mailto:"] {
  -webkit-user-select: text;
  user-select: text;
}

.field input,
.field textarea,
.footer__links a[href^="mailto:"] {
  cursor: text;
}

h1, h2, h3, h4, p, figure {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

input,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* ============================================
   Layout helpers
   ============================================ */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
}

.section {
  position: relative;
}

/* ============================================
   Cursor spotlight — an invisible blue grid over the whole page that only
   lights up in a soft circle around the cursor, plus a faint blue glow blob
   under it. JS updates --cursor-x / --cursor-y on mousemove (see
   initCursorGlow in main.js). Both layers are fixed and sit behind all
   content (transparent sections let them show through).
   ============================================ */
.cursor-glow,
.cursor-grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

body.cursor-active .cursor-glow,
body.cursor-active .cursor-grid {
  opacity: 1;
}

/* forced off (even while the pointer moves) during the "dark focus" moments —
   the hero dissolve through the pain cards, and the Platform intro — so those
   screens stay pure dark. Placed after the rule above so it wins by source
   order. Toggled from initSpotlightZones in main.js. */
body.spotlight-off .cursor-glow,
body.spotlight-off .cursor-grid {
  opacity: 0;
}

/* soft light blob following the cursor */
.cursor-glow {
  background: radial-gradient(
    circle 640px at var(--cursor-x, 50%) var(--cursor-y, 50%),
    rgba(1, 123, 255, 0.045),
    transparent 90%
  );
}

/* the grid — thin accent-blue lines, revealed only where the cursor mask is.
   The mask is wide with a low peak and a long, gradual fade to transparent, so
   the reveal reads as a big soft blur rather than a hard-edged blue circle. */
.cursor-grid {
  background-image:
    linear-gradient(to right, rgba(1, 123, 255, 0.28) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(1, 123, 255, 0.28) 1px, transparent 1px);
  background-size: 21px 21px;
  -webkit-mask-image: radial-gradient(
    circle 620px at var(--cursor-x, 50%) var(--cursor-y, 50%),
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.28) 40%,
    rgba(0, 0, 0, 0.08) 70%,
    transparent 100%
  );
  mask-image: radial-gradient(
    circle 620px at var(--cursor-x, 50%) var(--cursor-y, 50%),
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.28) 40%,
    rgba(0, 0, 0, 0.08) 70%,
    transparent 100%
  );
}

/* ============================================
   Buttons
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.btn--primary {
  background: var(--color-accent);
  color: var(--color-text-primary);
  font-weight: 700;
}

.btn--primary:hover {
  opacity: 0.88;
}

.btn--secondary {
  background: transparent;
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-secondary);
  font-weight: 500;
}

.btn--secondary:hover {
  border-color: var(--color-text-secondary);
  color: var(--color-text-primary);
}

/* ============================================
   Nav
   ============================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 44px;
  background: var(--color-nav-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border-subtle);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* hidden during the hero-zoom black-out and the pain-cards phase; slides back
   down when the Specification section arrives (see initHeroZoom in main.js) */
.nav--hidden {
  transform: translateY(-100%);
}

.nav__logo {
  display: flex;
  align-items: center;
  /* shift the whole logo ~22px toward the edge — done on the anchor (not the
     img) so flex doesn't squeeze the image. (-2px offsets the PNG's own
     transparent left padding.) */
  margin-left: -24px;
}

.nav__logo img {
  height: 48px;
  width: auto;
  /* keep the natural aspect — never let the flex parent compress it */
  flex-shrink: 0;
}

.nav__toggle {
  /* centred on the page regardless of the logo / CTA widths on either side */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--color-surface);
  border-radius: var(--radius-pill);
  padding: 3px;
}

.nav__toggle-btn {
  padding: 7px 20px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
}

.nav__toggle-btn.is-active {
  background: var(--color-accent);
  color: var(--color-text-primary);
}

.nav__cta {
  padding: 9px 22px;
  font-size: 13px;
  font-weight: 700;
  line-height: 20.8px;
}

/* ============================================
   Hero
   ============================================ */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 48px;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 900px 780px at 50% 18%, var(--color-accent-glow), rgba(1, 123, 255, 0) 70%);
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 860px;
  width: 100%;
}

/* The first screenful: heading + subtext + buttons, vertically centred in the
   viewport area below the fixed nav. As you scroll, this rises and the
   screenshot below flows up into view. */
.hero__lead {
  /* starts full-height (heading centred); JS shrinks it to content height on
     load, which drifts the text up toward the nav. See initHeroReveal in
     main.js. The extra 40px keeps the settled heading off the nav. */
  height: 100vh;
  box-sizing: border-box;
  padding-top: calc(var(--nav-height) + 40px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 17px;
  width: 100%;
  transition: height 1.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero__heading {
  font-size: 62px;
  font-weight: 700;
  line-height: 66.96px;
  letter-spacing: -1.86px;
  text-align: center;
  color: var(--color-text-primary);
}

.hero__heading .accent {
  color: var(--color-accent);
}

.hero__subtext {
  max-width: 480px;
  font-size: 17px;
  line-height: 28px;
  text-align: center;
  color: var(--color-text-secondary);
}

.hero__actions {
  display: flex;
  gap: 12px;
  padding-top: 19px;
}

.hero__actions .btn--primary {
  padding: 13px 28px;
  font-size: 15px;
  line-height: 24px;
}

.hero__actions .btn--secondary {
  padding: 14px 29px;
  font-size: 15px;
  line-height: 24px;
}

.hero__screenshot {
  width: 100%;
  height: 558px;
  border-radius: 14px;
  overflow: hidden;
  margin-top: 56px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 60px 0 rgba(0, 0, 0, 0.5);
  /* hidden below the fold at first; rises + fades in with the hero reveal */
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 1s ease 0.15s,
    transform 1.15s cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
}

/* screenshot now lives in #hero-zoom (outside .hero), so the reveal is keyed
   off a class JS puts on <html> instead of on .hero */
html.hero-revealed .hero__screenshot {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero__lead {
    transition: none;
  }
  .hero__screenshot {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================
   Hero dissolve — after the entrance, the screenshot scrolls up to centre,
   holds (pinned, nothing moves), then grows just a touch and fades out. The
   section is taller than the viewport; JS reads how far you've scrolled through
   that extra height and drives the slight scale + fade from it. Once the photo
   is gone the nav is hidden and it's a plain scroll on to the pain cards.
   ============================================ */
.hero-zoom {
  position: relative;
  /* height set from JS (100vh + hold + dissolve room); safe fallback here */
  height: 205vh;
}

.hero-zoom__sticky {
  position: sticky;
  /* stick just under the nav (not at 0) and top-align the photo, so at rest it
     sits a small fixed gap below the buttons, and when pinned it clears the nav
     instead of centring far below with a big gap */
  top: var(--nav-height);
  height: calc(100vh - var(--nav-height));
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 36px;
  padding-inline: 48px;
  /* purely visual — never intercept clicks meant for the nav/content */
  pointer-events: none;
}

.hero-zoom__frame {
  width: 100%;
  max-width: 860px;
  transform-origin: center center;
  will-change: transform, opacity;
}

.hero-zoom__frame .hero__screenshot {
  margin-top: 0;
}

.hero__screenshot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================
   Content section (Specification / AI Assistant / Marketplace)
   Shared two-column pattern: text column + screenshot column
   ============================================ */
.content-section {
  padding: 0 48px 100px;
}

.content-section__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 600px;
  background: radial-gradient(ellipse closest-side, rgba(1, 123, 255, 0.05), rgba(1, 123, 255, 0) 65%);
  pointer-events: none;
}

.content-section__inner {
  max-width: var(--container-width);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 72px;
  position: relative;
}

.content-section__text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
}

.content-section__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--color-accent);
}

.content-section__heading {
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -1.1px;
  line-height: 49.28px;
  color: var(--color-text-primary);
}

.content-section__body {
  font-size: 16px;
  line-height: 27.2px;
  color: var(--color-text-secondary);
  max-width: 480px;
}

.content-section__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 6px;
  width: 100%;
}

.content-section__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 22.4px;
  color: var(--color-text-secondary);
}

.check-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: 9px;
  background-color: rgba(0, 213, 67, 0.12);
  border: 1px solid rgba(0, 213, 67, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.check-icon::before {
  content: '';
  width: 9px;
  height: 9px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M7.3125 2.25L3.65625 6.1875L1.6875 4.21875L1.125 4.78125L3.65625 7.3125L7.875 2.8125L7.3125 2.25Z' fill='%2300D543'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.content-section__shot {
  flex: 1 1 0;
  min-width: 0;
}

.content-section__shot img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 72vh;
  margin-inline: auto;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 60px 0 rgba(0, 0, 0, 0.5);
}

/* ============================================
   Pin stage — Specification / AI Assistant crossfade
   (prototype, à la Apple product pages: the section pins in
   place via position:sticky while its own height provides extra
   scroll room; main.js reads how far you've scrolled through that
   room and uses it to cross-fade the text/image layers. No wheel
   interception, no thresholds — the browser's own scroll drives
   everything, so it can't desync, skip steps or feel "grabby".)
   ============================================ */
.pin-stage {
  position: relative;
  /* height is set from JS (100vh + however much scroll room the
     cross-fade steps need), this is just a safe fallback */
  height: 240vh;
}

.pin-stage__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  padding-top: var(--nav-height);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.pin-stage .content-section__inner {
  max-width: var(--container-wide);
  width: 100%;
}

.pin-stage__text-col {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  min-height: 440px;
}

.pin-stage__text-layer {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 11px;
}

/* Each heading/body/bullet fades independently, driven per-frame from
   main.js. These defaults only matter for the instant before JS's first
   frame runs, so there's no flash of the wrong step. */
.reveal-unit {
  will-change: opacity;
}

.pin-stage__text-layer[data-step='0'] .reveal-unit {
  opacity: 1;
}

.pin-stage__text-layer:not([data-step='0']) .reveal-unit {
  opacity: 0;
}

.pin-stage__shot {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  min-height: 440px;
}

.pin-stage__img {
  position: absolute;
  inset: 0;
  margin: auto;
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 72vh;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 60px 0 rgba(0, 0, 0, 0.5);
  will-change: opacity;
}

.pin-stage__img[data-step='0'] {
  opacity: 1;
}

.pin-stage__img:not([data-step='0']) {
  opacity: 0;
}

/* ============================================
   Client Pain (3 cards) — pins in place; cards stair-step in from
   below one at a time, hold, then fade out one at a time. The last
   card is still fading as the pin releases into the normal scroll
   down toward Specification, so nothing pauses on an empty screen.
   ============================================ */
.pin-stage__sticky--cards {
  padding-inline: 48px;
  /* the nav is hidden through this phase, so drop the nav-height top padding
     and let the cards + "Now without it" text centre on the full viewport */
  padding-top: 0;
}

.client-pain__stack {
  position: relative;
  width: 100%;
}

/* Sits exactly behind the cards (same max-width/gap, so each slot lines
   up with the card above it) and never extends into the gaps between
   cards — so there's nothing to show through before a card clears. */
.client-pain__reveal-row {
  position: absolute;
  inset: 0;
  z-index: 0;
  max-width: var(--container-width);
  margin-inline: auto;
  display: flex;
  gap: 16px;
  pointer-events: none;
}

.client-pain__reveal-slot {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: 34px; /* overridden from JS once the longest word's actual width is known */
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--color-text-primary);
}

.reveal-word-inner {
  display: inline-block;
  flex-shrink: 0;
  white-space: nowrap;
}

.reveal-letter {
  display: inline-block;
  opacity: 0;
  will-change: opacity, transform;
}

.client-pain__row {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  display: flex;
  gap: 16px;
  align-items: stretch;
}

.reveal-card {
  opacity: 0;
  will-change: opacity, transform;
}

.pain-card {
  flex: 1 1 0;
  min-width: 0;
  min-height: 250px;
  padding: 32px 28px;
  border-radius: var(--radius-md);
  background: rgba(24, 24, 24, 0.7);
  border: 1px solid #282828;
  backdrop-filter: blur(7.5px);
  -webkit-backdrop-filter: blur(7.5px);
}

.pain-card__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 17px;
  background: rgba(223, 1, 1, 0.09);
  border: 1px solid rgba(223, 1, 1, 0.18);
  color: #df0101;
  font-size: 16px;
  font-weight: 700;
}

.pain-card__title {
  margin-top: 16px;
  font-size: 15px;
  font-weight: 700;
  line-height: 24px;
  color: var(--color-text-primary);
}

.pain-card__body {
  margin-top: 8px;
  font-size: 13px;
  line-height: 20.8px;
  color: var(--color-text-secondary);
}

/* ============================================
   Scroll gap — plain empty scroll distance between pin-stages,
   so the previous one visibly scrolls away before the next engages.
   ============================================ */
.scroll-gap {
  height: 15vh;
}

.scroll-gap--sm {
  height: 15vh;
}

/* ============================================
   Platform intro — the title ("Everything your project needs. In one
   place.") sits near the top and fades in first, on its own; only once
   it's settled does the slogan beneath it start cycling (One brief. /
   One space. / One truth.). That delay is a genuine empty first step in
   the pin-stage engine (data-step="0" with no reveal-unit) rather than a
   special case — step 0 already renders as "nothing", and the engine's
   normal enter-cascade gives "One brief." its fade-in when it becomes
   step 1.
   ============================================ */
.pin-stage__sticky--intro {
  flex-direction: column;
  align-items: center;
  padding-top: calc(var(--nav-height) + 140px);
  text-align: center;
}

.pin-stage__intro-title {
  opacity: 0;
  max-width: 640px;
}

.pin-stage__intro-title .content-section__heading {
  margin-top: 12px;
  font-size: 44px;
}

.platform-intro__slogan {
  position: relative;
  width: 100%;
  height: 120px;
  margin-top: 100px;
}

.platform-intro__slogan .pin-stage__text-layer {
  align-items: center;
  justify-content: center;
}

.platform-intro__phrase {
  font-size: 72px;
  font-weight: 700;
  letter-spacing: -1.8px;
  color: var(--color-text-primary);
}

/* ============================================
   Platform items — Files & Documents / Progress Tracking / Roles &
   Access / Milestones & Payments / Meetings. Same pin-stage engine as
   Specification / AI Assistant / Marketplace, except the text+image
   row sits nearer the top of the viewport instead of dead centre, and
   the text is top-aligned within its own column so its first line lines
   up with the top edge of the screenshot next to it (rather than being
   centred in the extra vertical space the shorter text leaves behind).
   ============================================ */
.pin-stage--top .pin-stage__sticky {
  align-items: flex-start;
  padding-top: calc(var(--nav-height) + 120px);
}

.pin-stage--top .pin-stage__text-layer {
  justify-content: flex-start;
  /* nudge the 01–06 copy in from the left edge (stays inside the column, so the
     gap to the screenshot is untouched) */
  padding-left: 56px;
}

/* same left inset for the Specification / AI Assistant / Marketplace copy */
#pin-stage .pin-stage__text-layer {
  padding-left: 56px;
}

.pin-stage--top .pin-stage__img {
  margin: 0 auto;
  /* these steps carry much less text than Specification/AI Assistant/
     Marketplace, so there's extra vertical room below the top-aligned
     heading — let the screenshot use more of it. */
  max-height: 78vh;
}

.pin-stage__img--placeholder {
  width: 100%;
  aspect-ratio: 640 / 460;
  max-height: 72vh;
  background: #141414;
  border-color: #232323;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-size: 13px;
  text-align: center;
  padding: 24px;
}

/* ============================================
   Stats ("Built in Dubai")
   ============================================ */
.stats {
  padding: 0 48px 100px;
}

.stats__card {
  max-width: var(--container-width);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 60px;
  padding: 20px 0;
}

.stats__text {
  flex: 1 1 0;
  min-width: 0;
}

.stats__text h2 {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.64px;
  line-height: 1.2;
  color: var(--color-text-primary);
}

.stats__text p {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text-secondary);
}

.stats__numbers {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.stats__item {
  text-align: right;
}

.stats__item strong {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.68px;
  color: var(--color-text-primary);
}

.stats__item strong .accent {
  color: var(--color-accent);
}

.stats__item > span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

/* ============================================
   Early Access (form)
   ============================================ */
.early-access {
  position: relative;
  padding: 119px 48px 140px;
  overflow: hidden;
}

.early-access::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 980px;
  height: 700px;
  background: radial-gradient(ellipse closest-side, rgba(1, 123, 255, 0.07), rgba(1, 123, 255, 0) 65%);
  pointer-events: none;
}

.early-access__inner {
  position: relative;
  max-width: 500px;
  margin-inline: auto;
  text-align: center;
}

.early-access__inner h2 {
  margin-top: 10px;
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -1.1px;
  line-height: 1.1;
  color: var(--color-text-primary);
}

.early-access__inner > p {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-text-secondary);
}

.early-access__form {
  margin-top: 40px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.early-access__row {
  display: flex;
  gap: 20px;
}

.field {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.field label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-text-secondary);
}

.field label .optional {
  text-transform: none;
  font-weight: 400;
  color: #444;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  /* no fill — only a border, matching the screenshot frames */
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--color-text-primary);
  font-size: 14px;
  transition: border-color 0.2s ease;
}

/* on focus the border picks up the brand colour, like the CTA buttons */
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

.field input::placeholder,
.field textarea::placeholder {
  color: #444;
}

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23848484' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  /* without an explicit size the SVG scaled to fill the whole field — pin it small */
  background-size: 11px 8px;
  padding-right: 36px;
}

/* placeholder state ("Select your role") in the same grey as the input placeholders */
.field select:invalid {
  color: #444;
}

.field textarea {
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
}

.early-access__submit {
  width: 100%;
  padding: 13px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-text-primary);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}

.early-access__submit:hover {
  opacity: 0.88;
}

.early-access__note {
  margin-top: 7px;
  font-size: 12px;
  text-align: center;
  color: #444;
}

/* ============================================
   Footer
   ============================================ */
.footer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 44px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer__logo img {
  height: 48px;
  width: auto;
  /* mirror the nav logo's optical alignment at the same 44px inset */
  margin-left: -2px;
}

/* centred on the page, exactly like the nav toggle above */
.footer__links {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 24px;
}

.footer__links a {
  font-size: 13px;
  color: var(--color-text-secondary);
}

.footer__links a:hover {
  color: var(--color-text-primary);
}

.footer__copy {
  font-size: 12px;
  color: #444;
}