/* ============================================================
   IRIS CINEMATIC SHELL — design tokens + all section styles
   Black-first system (Second Feedback §1b/§7): every act sits on
   the same near-black ground; the carousel is the ONLY white
   beat. Green is an accent, never a field.
   ============================================================ */

:root {
  /* ---- palette ---- */
  --paper: #fcfcfc;          /* the single white beat (carousel)      */
  --grey: #d1d1d1;           /* reference grey                        */
  --ink: #0a0e0a;            /* near-black text on light              */
  --void: #060606;           /* reference black — the shared ground   */
  --forest: #0C3F09;         /* bible forest                          */
  --green: #0A8E12;          /* bible green-hot                       */
  --neon: #79F181;           /* bible neon — one hue only             */
  --white: #ffffff;
  --dim: rgba(255,255,255,.55);

  /* the ONE dark ground formula — hero exit, nebula, folio, scatter,
     finale and the veil all share it so no scroll boundary is visible */
  --dark-ground:
    radial-gradient(52% 46% at 78% 55%, rgba(10,142,18,.30) 0%, transparent 62%),
    radial-gradient(60% 55% at 30% 108%, rgba(121,241,129,.14) 0%, transparent 46%),
    radial-gradient(130% 130% at 42% 30%, #0d1a0e 0%, #060c07 55%, #030503 100%);

  /* ---- IRIS eye greens (logo mark) ---- */
  --eye-green-hi: #8fffa5;
  --eye-green: #2fa356;
  --eye-green-deep: #0b2f18;

  /* ---- type ---- */
  --font: "Urbanist", "Inter", "Helvetica Neue", system-ui, sans-serif;

  /* ---- geometry ---- */
  --page-inset: clamp(14px, 2.2vw, 32px);
  --page-radius: clamp(18px, 2vw, 28px);
  --card-radius: 18px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: initial; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  font-family: var(--font);
  background: var(--void);
  color: var(--white);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
canvas { display: block; }

/* ============ INTRO OVERLAY ============ */
.intro {
  position: fixed; inset: 0; z-index: 90;
  background: #000;
  display: grid; place-items: center;
  overflow: hidden;
}
.intro__bloom {
  position: absolute; width: 160vmin; height: 160vmin; border-radius: 50%;
  background: radial-gradient(circle,
    #eaffef 0%, var(--eye-green-hi) 18%, var(--eye-green) 40%,
    var(--eye-green-deep) 60%, transparent 74%);
  filter: blur(8px);
  opacity: 0; transform: scale(.55);
}
.intro__mark { position: relative; }

/* ---- THE LOCKUP — single source of truth for the wordmark geometry ----
   Measured against the official master (iris-brand/logo/lockup-kit,
   iris_exact_logo_master_dark.png): dot ≈ 0.46 × x-height with a clear
   gap ≈ 0.18 × x-height between dot and stem. Every rendering (intro,
   nav chip, hero corner) inherits from here — change it in ONE place. */
:root {
  --lockup-gap: .42em;        /* letterspacing between the four glyphs   */
  --lockup-eye-size: .24em;   /* green radial dot diameter               */
  --lockup-eye-rise: -.58em;  /* dot top relative to the first-i box     */
}
.lockup {
  display: inline-flex; gap: var(--lockup-gap);
  font-weight: 300; color: #fff; letter-spacing: 0; line-height: 1;
}
.lockup i { font-style: normal; display: inline-block; }
.lockup .hasdot { position: relative; }
.lockup__eye {
  position: absolute; left: 50%; top: var(--lockup-eye-rise); translate: -50% 0;
  width: var(--lockup-eye-size); height: var(--lockup-eye-size);
}
.lockup__eye svg { width: 100%; height: 100%;
  filter: drop-shadow(0 0 .5em rgba(143,255,165,.5)); }

.intro__letters { font-size: clamp(64px, 9vw, 150px); }

/* ============ NAV PILL — a proper dock: wide, airy, decisive (§1a) ============ */
.navpill {
  position: fixed; top: 20px; left: 50%; translate: -50% 0; z-index: 80;
  display: flex; align-items: center; gap: 10px;
  min-width: min(680px, calc(100vw - 48px));
  justify-content: space-between;
  background: rgba(250,252,250,.94);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 16px; padding: 7px 8px;
  box-shadow: 0 16px 50px rgba(4,10,5,.28);
  opacity: 0; translate: -50% -12px;
  transition: translate .7s cubic-bezier(.22, 1, .36, 1);
}
.navpill__logo {
  height: 44px; border-radius: 12px; padding: 2px 20px 0;
  display: inline-flex; align-items: center;
  background: #0d120d; margin-right: auto; cursor: pointer;
}
.navpill__lockup { font-size: 16px; font-weight: 400; }
.navpill a {
  font-size: 14.5px; font-weight: 500; letter-spacing: -.01em;
  padding: 13px 22px; border-radius: 12px; color: #17171c;
  transition: background .18s; white-space: nowrap;
}
.navpill a:hover { background: rgba(0,0,0,.05); }
.navpill__cta {
  background: #101410; color: #fff !important; font-weight: 600;
}
.navpill__cta:hover { background: #1e3a20 !important; }

/* ============ HERO — full-bleed UAE map on black (§1b/§1c/§2) ============ */
.hero { height: 100vh; position: relative; z-index: 5; background: var(--void); }
.hero__stage {
  position: absolute; inset: 0;
  perspective: 1500px; perspective-origin: 50% 40%;
}
.hero-card {
  position: absolute; inset: 0;            /* NO margins — whole page (§2) */
  border-radius: 0;
  overflow: hidden;
  background: var(--void);
  transform-style: preserve-3d;
  box-shadow: 0 40px 120px rgba(0, 12, 2, .55);
}
.hero__map {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.hero__pulse { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
.hero__scrim {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6,6,6,.55) 0%, transparent 22%),
    linear-gradient(0deg, rgba(6,6,6,.78) 0%, transparent 34%),
    linear-gradient(90deg, rgba(6,6,6,.5) 0%, transparent 30%);
}
.hero__title {
  position: absolute; z-index: 4;
  left: clamp(28px, 4vw, 62px); bottom: clamp(180px, 26vh, 260px);
  font-size: clamp(44px, 6vw, 96px);
  line-height: .98; font-weight: 500; letter-spacing: -.035em;
  color: var(--white); display: grid;
}
.hero__title .l2 { color: rgba(255,255,255,.42); }
.hero__title span { display: block; overflow: hidden; }
.hero__title span i { display: block; font-style: normal; }
.hero__foot {
  position: absolute; z-index: 4;
  left: clamp(28px, 4vw, 62px); bottom: clamp(36px, 6vh, 64px);
  max-width: 420px;
}
.hero__copy { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.82); }
.hero__ctas { margin-top: 18px; display: flex; gap: 12px; }
.btn {
  font-size: 14px; font-weight: 600; padding: 13px 24px;
  border-radius: 11px; display: inline-block;
}
.btn--solid { background: #fff; color: #131813; }
.hero__note {
  position: absolute; z-index: 4;
  right: clamp(28px, 4vw, 62px); bottom: clamp(36px, 6vh, 64px);
  max-width: 300px; text-align: right;
  font-size: 12.5px; line-height: 1.55; color: rgba(255,255,255,.7);
}

/* the lockup that persists after the intro — crisp SVG wordmark */
.hero__lockup {
  position: absolute; top: clamp(20px, 3.2vh, 40px); right: clamp(26px, 3.6vw, 60px);
  z-index: 4;
}
.hero__lockup-letters { font-size: clamp(22px, 2vw, 32px); }

/* ============ ORBIT — the ONLY white beat (§1b/§3) ============ */
.orbit { position: relative; z-index: 4; background: var(--paper); }
.orbit__pin { height: 100vh; overflow: hidden; position: relative; }
.marquee {
  position: absolute; top: 50%; left: 0; right: 0; translate: 0 -50%;
  white-space: nowrap; z-index: 1; pointer-events: none;
}
.marquee__track {
  display: inline-flex; align-items: center; gap: 5vw;
  font-size: clamp(80px, 13.5vw, 220px);
  font-weight: 500; letter-spacing: -.045em; color: var(--ink);
  padding-right: 5vw;
  will-change: transform;
}
.marquee__track .sep { font-size: .32em; translate: 0 .1em; }
.marquee__track .sep--eye { display: inline-grid; place-items: center; }
.marquee__track .sep--eye svg { width: .5em; height: .5em; }

.orbit__stage {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  perspective: 1700px;
}
.orbit__ring {
  position: relative;
  width: clamp(240px, 24vw, 345px); height: clamp(400px, 40vw, 575px);
  transform-style: preserve-3d;
}
.ocard {
  position: absolute; inset: 0;
  border-radius: var(--card-radius);
  overflow: hidden;
  backface-visibility: visible;
  box-shadow: 0 30px 80px rgba(10,20,11,.35);
  padding: 20px;
  display: flex; flex-direction: column;
}

/* REAL brochure covers with REAL developer logo chips (§1c) */
.ocard--cover { padding: 0; background: #101510; }
.ocard__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.ocard--cover::after {           /* soft scrim so the chip always reads */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%;
  background: linear-gradient(0deg, rgba(4,8,5,.55) 0%, transparent 100%);
}
.ocard__chip {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  height: 40px; padding: 0 16px; border-radius: 999px;
  display: inline-flex; align-items: center;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.ocard__chip--light { background: rgba(252,253,252,.92); border: 1px solid rgba(0,0,0,.06); }
.ocard__chip--dark  { background: rgba(8,14,9,.82); border: 1px solid rgba(255,255,255,.16); }
.ocard__chip img { height: 17px; width: auto; max-width: 120px; object-fit: contain; }

.ocard__title {
  margin-top: auto;
  font-size: clamp(20px, 1.9vw, 27px); line-height: 1.15;
  font-weight: 500; letter-spacing: -.02em; color: #fff;
  white-space: pre-line;
}
.ocard__star { position: absolute; left: 50%; top: 40%; translate: -50% -50%; width: 96px; height: 96px; }
.ocard__star svg { width: 100%; height: 100%; filter: drop-shadow(0 8px 34px rgba(143,255,165,.55)); }
.ocard__prompt {
  position: absolute; left: 16px; right: 16px; top: 30%;
  background: rgba(8,16,9,.82); border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px; padding: 12px 16px;
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: rgba(255,255,255,.85);
}
.ocard__prompt .dot { width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,.15); flex: none; }
.ocard__prompt .go  { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; background: #fff; flex: none; }

.ocard--forest {
  background:
    radial-gradient(110% 80% at 50% 8%, #16341a 0%, #081c0a 55%, #030a04 100%);
  border: 1px solid rgba(121,241,129,.16);
}
.ocard--forest .ocard__title { color: #f2f6f2; }

.orbit__cta {
  position: absolute; left: 50%; bottom: 5.5vh; translate: -50% 0; z-index: 3;
  background: #121f13; color: #fff; font-size: 13.5px; font-weight: 600;
  padding: 14px 26px; border-radius: 12px;
  box-shadow: 0 18px 50px rgba(10,20,11,.35);
}

/* ============ NEBULA — pupil wipe onto the rotating iris (§4/§5) ============ */
.nebula { position: relative; z-index: 4; background: var(--paper); }
.nebula__pin { height: 100vh; position: relative; overflow: hidden; }
.nebula__dark {
  position: absolute; inset: 0; z-index: 2;
  background: var(--dark-ground);
  clip-path: url(#starClip);
}
.kword {
  position: absolute; z-index: 3;
  font-size: clamp(90px, 15.5vw, 240px);
  font-weight: 500; letter-spacing: -.04em; line-height: .9;
  will-change: transform, filter;
}
.kword--a {
  left: 2vw; top: 2vh;
  background: linear-gradient(115deg, #fff 30%, #c2f5c7 70%, #86e890 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.kword--b { right: 2vw; bottom: 12vh; color: rgba(255,255,255,.55); text-align: right; line-height: 1.02; }
.nebula__pupilring {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 3;
  width: 0; height: 0; border-radius: 50%;
  border: 2px solid var(--eye-green-hi);
  box-shadow: 0 0 34px rgba(143,255,165,.65), inset 0 0 30px rgba(143,255,165,.35);
  opacity: 0; pointer-events: none;
}
/* the rotating iris fills the frame behind the words — vignetted just
   enough that the type reads, never boxed, never letterboxed */
.nebula__map { position: absolute; inset: 0; opacity: 0; }
.nebula__map video {
  width: 100%; height: 100%; object-fit: cover;
}
.nebula__map::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(95% 85% at 50% 50%, transparent 42%, rgba(6,6,6,.72) 82%),
    linear-gradient(180deg, rgba(6,6,6,.42) 0%, transparent 26% 74%, rgba(6,6,6,.6) 100%);
}

/* ============ FOLIO (horizontal portfolio carousel) ============ */
.folio { position: relative; z-index: 4; background: var(--dark-ground); }
.folio__pin { height: 100vh; overflow: hidden; position: relative; display: flex; align-items: center; }
.folio__track {
  display: flex; gap: 3vw; padding-left: 4vw;
  will-change: transform;
}
.fcard {
  position: relative; flex: none;
  width: 62vw; height: 82vh; max-height: 640px;
  border-radius: 16px; overflow: hidden;
  background: #0a0f0a;
  border: 1px solid rgba(255,255,255,.08);
}
.fcard__meta {
  position: absolute; top: 22px; left: 26px; z-index: 2;
  font-size: 12.5px; color: rgba(255,255,255,.92);
  display: flex; gap: 10px; align-items: center;
  background: rgba(8,14,9,.6); backdrop-filter: blur(8px);
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
}
.fcard__meta i { font-style: normal; opacity: .5; }
.fcard__name {
  position: absolute; left: 26px; bottom: 18px; z-index: 2;
  font-size: clamp(40px, 4.6vw, 72px); font-weight: 500; letter-spacing: -.03em;
  color: #fff; text-shadow: 0 4px 30px rgba(0,0,0,.5);
}
.fcard__art { position: absolute; inset: 0; scale: 1.12; will-change: transform; }
.fcard__art::after {
  content: ""; position: absolute; inset: 55% 0 0 0;
  background: linear-gradient(180deg, transparent, rgba(4,7,4,.72) 85%);
}
.folio__caption {
  position: absolute; left: 50%; bottom: 3.4vh; translate: -50% 0; z-index: 3;
  white-space: nowrap;
  font-size: clamp(17px, 1.6vw, 23px); font-weight: 400;
  letter-spacing: .045em; color: rgba(255,255,255,.88);
  text-shadow: 0 2px 18px rgba(0,0,0,.6);
}
.folio__caption::before {
  content: ""; display: inline-block; width: 26px; height: 1px;
  background: rgba(121,241,129,.6); vertical-align: middle; margin-right: 12px;
}
.folio__caption::after {
  content: ""; display: inline-block; width: 26px; height: 1px;
  background: rgba(121,241,129,.6); vertical-align: middle; margin-left: 12px;
}

/* ============ SCATTER — real documents flying at the camera (§6) ============ */
.scatter { position: relative; z-index: 4; background: var(--dark-ground); }
.scatter__pin { height: 100vh; overflow: hidden; position: relative; }
.scatter__glow {
  position: absolute; right: -8vw; bottom: -16vh; width: 50vw; height: 40vh;
  background: radial-gradient(50% 50% at 60% 50%, rgba(109,245,128,.5) 0%, rgba(53,217,71,.35) 45%, transparent 72%);
  filter: blur(34px); opacity: 0; pointer-events: none; z-index: 1;
}
.scatter__stage { position: absolute; inset: 0; will-change: transform; }
.scat {
  position: absolute; border-radius: 10px; overflow: hidden;
  translate: -50% -50%;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  will-change: transform;
}
.scat__label {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: #eafcec; background: rgba(8,14,9,.78);
  padding: 5px 10px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(8px);
}
.scat--doc { width: 11vw; aspect-ratio: 3/4; background: #f4f6f4; }
.scat__doc { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scat--promptCard { width: 9.5vw; aspect-ratio: 6/7; }
.scat--payplan { width: 12vw; aspect-ratio: 6/7; background: #0c120d; border: 1px solid rgba(121,241,129,.22); }
.scat--star { width: 29vw; aspect-ratio: 10/7; }
.scat__art { position: absolute; inset: 0; }
.sart--promptCard { background: radial-gradient(70% 50% at 50% 40%, #246e36 0%, #10401b 55%, #0a2410 100%); }
/* the target card is DARK (§6: no green-on-green) — it matches the
   finale ground exactly so the dive lands on the same color world (§7) */
.sart--star { background: var(--dark-ground); }
.scat--star { border: 1px solid rgba(121,241,129,.2); }
.scat__eye {
  position: absolute; right: -8%; bottom: -14%; width: 62%; aspect-ratio: 1;
}
.scat__eye svg { width: 100%; height: 100%; filter: drop-shadow(0 0 26px rgba(143,255,165,.5)); }

/* the drawn payment-plan schedule (§6) */
.scat__pay {
  position: absolute; inset: 0; padding: 34px 14px 12px;
  display: flex; flex-direction: column; gap: 8px;
  color: #eafcec;
}
.scat__pay b { font-size: 13px; font-weight: 600; letter-spacing: -.01em; }
.scat__pay .prow {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px; color: rgba(234,252,236,.85);
  border-bottom: 1px solid rgba(121,241,129,.16);
  padding-bottom: 6px;
}
.scat__pay .prow span:last-child { font-weight: 700; color: var(--neon); }
.scat__pay i {
  margin-top: auto; font-style: normal;
  font-size: 9.5px; letter-spacing: .06em; color: rgba(234,252,236,.5);
}

/* ============ FINALE ============ */
.finale { position: relative; z-index: 5; background: var(--void); }
.finale__frame {
  position: relative; height: 100vh; overflow: hidden;
  display: flex; align-items: center;
}
.finale__bg {
  position: absolute; inset: var(--page-inset);
  border-radius: var(--page-radius); overflow: hidden;
  background: var(--dark-ground);
}
#eyeCanvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.finale__content {
  position: relative; z-index: 3;
  margin-left: clamp(36px, 7vw, 120px); max-width: 480px;
}
.finale__title {
  font-size: clamp(48px, 5.6vw, 88px);
  font-weight: 500; letter-spacing: -.035em; line-height: 1.02;
  color: rgba(255,255,255,.85); display: grid;
}
.finale__title .l2 { color: rgba(255,255,255,.42); }
.finale__title span { display: block; overflow: hidden; }
.finale__title span i { display: block; font-style: normal; }
.finale__copy { margin-top: 22px; max-width: 320px; font-size: 16px; font-weight: 500; line-height: 1.5; color: rgba(255,255,255,.92); }
.finale__cta {
  margin-top: 30px; display: inline-block;
  background: rgba(255,255,255,.86); color: #143017;
  font-size: 14px; font-weight: 600; padding: 14px 26px; border-radius: 12px;
}
.finale__trained { margin-top: 18px; font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,.5); }

/* veil that smooths the scatter → finale cut — same ground formula */
.veil {
  position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0;
  background: var(--dark-ground);
}

/* ============ misc ============ */
.selftest-badge {
  position: fixed; bottom: 12px; right: 12px; z-index: 999;
  font: 600 12px/1 var(--font); padding: 8px 12px; border-radius: 8px;
  background: #15ff00; color: #043300;
}
.selftest-badge--fail { background: #f33; color: #fff; }

/* dev-only chip lives in its own lane ABOVE the page (never over a CTA) */
.wa-dev-badge {
  position: fixed; top: 2px; left: 50%; translate: -50% 0; z-index: 200;
  background: rgba(30,24,4,.85); color: #e8c35a;
  font-size: 10px; padding: 3px 10px; border-radius: 0 0 8px 8px;
  pointer-events: none; white-space: nowrap;
}

/* ============ EARLY-ACCESS MODAL — Quarn-glass card ============
   Popup over the page: near-black glass (#060606 family) + the shared
   luminous material (forest #0C3F09 body, #79F181 bloom off one corner,
   never a flat green fill) + a faint grain. Lockup reuses the shared
   --lockup-* geometry (main.css §THE LOCKUP) — sized here only. */
.eamodal { position: fixed; inset: 0; z-index: 120; }
.eamodal__backdrop {
  position: absolute; inset: 0;
  background: rgba(2,5,3,.66); backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .28s ease;
}
.eamodal__panel {
  position: absolute; left: 50%; top: 50%;
  translate: -50% -46%;
  width: min(440px, calc(100vw - 32px));
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(120% 85% at 86% -8%, rgba(121,241,129,.4) 0%, rgba(121,241,129,0) 48%),
    linear-gradient(168deg, rgba(12,63,9,.55) 0%, rgba(6,6,6,.94) 46%, #060606 100%);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  box-shadow: 0 40px 120px rgba(0,0,0,.65), 0 0 80px rgba(121,241,129,.13),
    inset 0 1px 0 rgba(255,255,255,.06);
  padding: 34px 30px 28px;
  overflow: hidden;
  opacity: 0; transition: opacity .28s ease, translate .28s cubic-bezier(.22,1,.36,1);
}
.eamodal__panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: radial-gradient(rgba(255,255,255,.9) 1px, transparent 1px);
  background-size: 3px 3px;
}
.eamodal.is-open .eamodal__backdrop { opacity: 1; }
.eamodal.is-open .eamodal__panel { opacity: 1; translate: -50% -50%; }
.eamodal__close {
  position: absolute; top: 14px; right: 16px; z-index: 2;
  background: none; border: 0; color: rgba(255,255,255,.5);
  font-size: 24px; line-height: 1; cursor: pointer; padding: 6px;
  transition: color .15s;
}
.eamodal__close:hover { color: #fff; }
.eamodal__lockup { position: relative; z-index: 1; font-size: 22px; margin-bottom: 22px; }
.eaform, .easuccess { position: relative; z-index: 1; }
.eaform__header {
  font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: #fff;
  line-height: 1.24;
}
.eaform__sub { margin-top: 8px; font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.6); }
.eaform__field { position: relative; display: block; margin-top: 18px; }
.eaform__field input {
  width: 100%; background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.14); border-radius: 13px;
  padding: 20px 14px 8px; font: 500 15px var(--font); color: #fff;
  outline: none; transition: border-color .15s, background .15s;
}
.eaform__field input:focus { border-color: rgba(121,241,129,.6); background: rgba(255,255,255,.06); }
.eaform__field span {
  position: absolute; left: 14px; top: 14px;
  font-size: 13.5px; color: rgba(255,255,255,.45);
  pointer-events: none; transition: all .15s ease;
}
.eaform__field input:focus + span,
.eaform__field input:not(:placeholder-shown) + span {
  top: 6px; font-size: 10.5px; letter-spacing: .04em; color: var(--neon);
}
.eaform__err { display: block; min-height: 14px; margin-top: 4px;
  font-size: 11.5px; font-style: normal; color: #ffb076; }
.eaform__roles { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.eaform__role {
  flex: 1; min-width: 100px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px; padding: 11px 10px;
  font: 500 12.5px var(--font); color: rgba(255,255,255,.75);
  cursor: pointer; transition: all .15s; white-space: nowrap;
}
.eaform__role:hover { border-color: rgba(121,241,129,.4); color: #fff; }
.eaform__role.is-on {
  background: rgba(121,241,129,.16); border-color: rgba(121,241,129,.7);
  color: #d9fadd;
}
.eaform__submit {
  width: 100%; margin-top: 18px;
  background: var(--neon); color: var(--void); border: 0; border-radius: 13px;
  padding: 15px; font: 700 15px var(--font); cursor: pointer;
  box-shadow: 0 0 0 rgba(121,241,129,0);
  transition: transform .12s ease, opacity .15s, box-shadow .2s;
}
.eaform__submit:hover { transform: translateY(-1px); box-shadow: 0 0 30px rgba(121,241,129,.45); }
.eaform__submit:active { transform: translateY(0); box-shadow: 0 0 16px rgba(121,241,129,.55); }
.eaform__submit:disabled { opacity: .6; box-shadow: none; }
.eaform__note { min-height: 16px; margin-top: 10px; text-align: center;
  font-size: 12px; color: #e8c35a; }
.easuccess { text-align: center; padding: 30px 0 14px; }
.easuccess__lockup { display: inline-flex; font-size: 28px; filter: drop-shadow(0 0 20px rgba(121,241,129,.4)); }
.easuccess__msg { margin-top: 22px; font-size: 17px; line-height: 1.45; color: #eafcec; }

@media (max-width: 900px) {
  .navpill a:not(.navpill__cta) { display: none; }
  .marquee__track { font-size: 20vw; }
  .fcard { width: 86vw; }
  .scat--doc { width: 22vw; }
  .scat--star { width: 52vw; }
  .scat--payplan { width: 26vw; }
  .scat--promptCard { width: 18vw; }
  .hero__note { display: none; }
  .hero__title { bottom: clamp(150px, 24vh, 220px); }
}

/* ============ MOBILE CHOREOGRAPHY (≤700px) ============
   Deliberate restaging for the IG-arrival phone audience:
   shorter pins (set in JS), stacked layouts, legible type,
   nothing colliding, nothing washed out, no dead screens. */
@media (max-width: 700px) {
  /* dock: content-sized, centered — no giant empty middle */
  .navpill { min-width: 0; justify-content: center; gap: 8px; padding: 6px; }
  .navpill__logo { height: 40px; padding: 2px 14px 0; margin-right: 0; }
  .navpill__cta { padding: 12px 16px; }

  /* hero: title clears the copy block */
  .hero__title { font-size: clamp(40px, 12vw, 52px); }
  .hero__foot { max-width: calc(100vw - 48px); }
  /* the "UNITED ARAB EMIRATES" caption baked into the mobile map crop
     sits right in the headline's gap and reads as clutter (polish
     round 2, item 1) — dim it out with the existing scrim mechanism
     rather than re-cropping the source image */
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(6,6,6,.55) 0%, transparent 22%),
      linear-gradient(0deg, rgba(6,6,6,.78) 0%, transparent 34%),
      linear-gradient(90deg, rgba(6,6,6,.5) 0%, transparent 30%),
      linear-gradient(180deg, transparent 58%, rgba(6,6,6,.94) 66%, rgba(6,6,6,.94) 78%, transparent 88%);
  }

  /* carousel: marquee rides the TOP band; the ring sits below it —
     words never strike through the project cards. Card width 200 against
     ring chord ~219 (R252, 7 cards): covers stay SEPARATE, no mushing. */
  .marquee { top: 12%; translate: 0 0; }
  .marquee__track { font-size: 17vw; }
  .orbit__stage { padding-top: 12vh; }
  .orbit__ring { width: 200px; height: 334px; }
  .ocard { backface-visibility: hidden; }   /* no washed-out mirror cards */
  .ocard__prompt { font-size: 11px; padding: 10px 12px; }
  .ocard__title { font-size: 17px; }
  .ocard__chip { height: 34px; padding: 0 12px; }
  .ocard__chip img { height: 14px; }

  /* the nav chip carries the mark on phones — no duplicate wordmark */
  .hero__lockup { display: none; }

  /* money shot: words anchored top and lower-third, clear of the
     iris core; copy pinned above the fold's bottom edge */
  .kword { font-size: clamp(46px, 13.5vw, 64px); }
  .kword--a { left: 5vw; top: 15vh; }   /* clears the fixed dock */
  .kword--b { right: 5vw; bottom: 27vh; }
  .nebula__map::after {
    /* stronger top coverage: dims the GOV PORTALS slab baked into the
       source video so it doesn't read as prominently behind "Every
       property," (polish round 2, item 3) */
    background:
      radial-gradient(120% 90% at 50% 45%, transparent 30%, rgba(6,6,6,.8) 78%),
      linear-gradient(180deg, rgba(6,6,6,.97) 0%, rgba(6,6,6,.97) 20%, transparent 40% 64%, rgba(6,6,6,.75) 100%);
  }

  /* folio: caption wraps, no clipped line */
  .fcard { height: 64vh; }
  .fcard__name { font-size: clamp(30px, 9vw, 44px); }
  .folio__caption {
    white-space: normal; text-align: center;
    width: calc(100vw - 56px); font-size: 15px; line-height: 1.5;
  }
  .folio__caption::before, .folio__caption::after { display: none; }

  /* scatter docs stay readable */
  .scat--doc { width: 26vw; }
  .scat--payplan { width: 34vw; }
  .scat__label { font-size: 9px; padding: 4px 8px; }

  /* finale: full-width content, generous type — the conversion beat */
  .finale__content { margin: 0 7vw; max-width: none; }
  .finale__title { font-size: clamp(44px, 13vw, 60px); }
  .finale__copy { max-width: none; }

  /* form: bottom sheet — same glass material, full-width thumb-sized controls */
  .eamodal__panel {
    left: 0; right: 0; top: auto; bottom: 0;
    translate: 0 10%;
    width: 100%; border-radius: 20px 20px 0 0;
    border-width: 1px 0 0;
    padding: 28px 20px calc(24px + env(safe-area-inset-bottom));
  }
  .eamodal.is-open .eamodal__panel { translate: 0 0; }
  .eaform__role { min-width: 0; flex: 1 1 30%; padding: 13px 10px; font-size: 12.5px; }
  .eaform__submit { padding: 17px; font-size: 15.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .intro { display: none !important; }
}