/* ==========================================================================
   حرّكها - landing
   Night asphalt + emerald move-signal. Arabic-first RTL.
   ========================================================================== */

:root{
  /* Ground - never pure black */
  --ink-900:#070B12;
  --ink-800:#0B1220;
  --ink-700:#111827;
  --ink-600:#0E1521;

  /* Foreground - slate tinted toward the ground hue, never raw gray */
  --fg:#F8FAFC;
  --fg-2:#AEBDD1;
  --fg-3:#8496AC;

  --line:rgba(148,163,184,.13);
  --line-2:rgba(148,163,184,.24);

  /* Signal */
  --em-300:#6EE7B7;
  --em-400:#34D399;
  --em-500:#10B981;
  --em-700:#047857;
  --em-ink:#03130C;
  --cyan:#22D3EE;
  --sky:#0EA5E9; /* app primaryGradient end */

  /* Plate face */
  --plate-1:#F6F7F1;
  --plate-2:#E4E7DE;
  --plate-ink:#12161C;
  --plate-mute:#5A6470;

  /* 8pt rhythm */
  --s1:8px;  --s2:16px; --s3:24px; --s4:32px;
  --s5:48px; --s6:64px; --s7:96px; --s8:128px;

  --r-sm:8px; --r:14px; --r-lg:20px;
  --wrap:1120px;
  --ease:cubic-bezier(.16,.84,.28,1);

  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

/* author display rules must not defeat the hidden attribute */
[hidden]{ display:none !important; }

html{
  overflow-x:hidden;
  overflow-x:clip;
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  overflow-x:hidden;
  overflow-x:clip;
  background:var(--ink-900);
  color:var(--fg);
  font-family:"IBM Plex Sans Arabic","Segoe UI",sans-serif;
  font-size:1rem;
  font-weight:400;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

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

h1,h2,h3{ margin:0; font-weight:900; line-height:1.35; }
p{ margin:0; }

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

::selection{ background:rgba(52,211,153,.28); color:#fff; }

:focus-visible{
  outline:2px solid var(--em-400);
  outline-offset:3px;
  border-radius:var(--r-sm);
}

.skip{
  position:fixed;
  inset-block-start:-100px;
  inset-inline-start:var(--s2);
  z-index:100;
  padding:12px 20px;
  border-radius:var(--r-sm);
  background:var(--em-400);
  color:var(--em-ink);
  font-weight:700;
  transition:inset-block-start .18s var(--ease);
}
.skip:focus{ inset-block-start:var(--s2); }

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:max(clamp(16px,4.5vw,40px), env(safe-area-inset-left,0px))
                 max(clamp(16px,4.5vw,40px), env(safe-area-inset-right,0px));
}
.wrap--narrow{ max-width:760px; }

/* ── Type roles ─────────────────────────────────────────────────────────── */

.h2{
  font-size:clamp(1.75rem,4.2vw,2.75rem);
  letter-spacing:0;
  margin-block-end:var(--s3);
  text-wrap:balance;
}
.h2--display{ font-size:clamp(2.25rem,7vw,3.5rem); }

.lede{
  font-size:clamp(1.0625rem,1.5vw,1.1875rem);
  color:var(--fg-2);
  max-width:56ch;
}

.kicker{
  margin:0 0 var(--s2);
  color:var(--fg-3);
  font-size:.8125rem;
  font-weight:600;
  line-height:1.6;
  letter-spacing:0;
}

.section{ padding-block:clamp(80px,11vw,160px); position:relative; }

section[id],.legal__stub{ scroll-margin-block-start:32px; }

/* ── Buttons ────────────────────────────────────────────────────────────── */

.btn{
  --btn-h:56px;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-block-size:var(--btn-h);
  padding-inline:var(--s4);
  border:1px solid transparent;
  border-radius:var(--r);
  font-family:inherit;
  font-size:1.0625rem;
  font-weight:700;
  line-height:1.2;
  cursor:pointer;
  white-space:nowrap;
  overflow:hidden;
  transition:transform .22s var(--ease), background-color .22s var(--ease),
             box-shadow .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
}
.btn--sm{ --btn-h:48px; padding-inline:var(--s3); font-size:1rem; }
.btn--block{ display:flex; inline-size:100%; }

.btn--primary{
  background:linear-gradient(135deg,var(--em-500),var(--sky));
  color:#041018;
  box-shadow:
    0 1px 0 rgba(255,255,255,.28) inset,
    0 12px 28px -14px rgba(16,185,129,.4),
    0 16px 32px -18px rgba(14,165,233,.32),
    0 24px 44px -28px rgba(0,0,0,.8);
  transform:translateZ(0);
}
.btn--primary::after{
  content:"";
  position:absolute;
  inset:-40% -20%;
  background:linear-gradient(105deg,
    transparent 40%,
    rgba(255,255,255,.28) 50%,
    transparent 60%);
  transform:translateX(-120%) skewX(-12deg);
  pointer-events:none;
}
.btn--primary:hover{
  background:linear-gradient(135deg,var(--em-400),#38BDF8);
  transform:translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.38) inset,
    0 18px 36px -12px rgba(16,185,129,.5),
    0 22px 40px -16px rgba(14,165,233,.42),
    0 32px 52px -28px rgba(0,0,0,.85);
}
.btn--primary:hover::after{
  animation:btnShine .7s var(--ease) both;
}
.btn--primary:active{ transform:translateY(0); }
@keyframes btnShine{
  to{ transform:translateX(120%) skewX(-12deg); }
}

.btn--ghost{
  background:rgba(148,163,184,.06);
  border-color:var(--line-2);
  color:var(--fg);
  box-shadow:0 8px 24px -18px rgba(0,0,0,.9);
}
.btn--ghost:hover{
  background:rgba(52,211,153,.09);
  border-color:rgba(52,211,153,.42);
  color:var(--em-300);
  transform:translateY(-2px);
}

.btn--quiet{
  background:none;
  border-color:transparent;
  color:var(--fg-2);
  padding-inline:var(--s2);
  font-weight:600;
}
.btn--quiet:hover{ color:var(--fg); }

.btn__tag{
  padding:2px 8px;
  border-radius:999px;
  background:rgba(3,19,12,.18);
  font-size:.75rem;
  font-weight:700;
}

.cta-group{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s2);
  margin-block-start:var(--s5);
}
.cta-group--center{ justify-content:center; }
.cta-group--pair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  width:min(100%, 22rem);
}
.cta-group--pair .btn{
  flex:unset;
  width:100%;
  justify-content:center;
  text-align:center;
  padding-inline:12px;
}

/* ── Top bar ────────────────────────────────────────────────────────────── */

.topbar{
  position:fixed;
  inset-block-start:0;
  inset-inline:0;
  z-index:40;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s2);
  width:100%;
  max-width:none;
  margin-inline:0;
  padding:
    calc(var(--s3) + env(safe-area-inset-top,0px))
    max(clamp(16px,4vw,40px), env(safe-area-inset-right,0px))
    var(--s3)
    max(clamp(16px,4vw,40px), env(safe-area-inset-left,0px));
  background:transparent;
  border-block-end:1px solid transparent;
  transition:
    background-color .35s var(--ease),
    border-color .35s var(--ease),
    backdrop-filter .35s var(--ease),
    -webkit-backdrop-filter .35s var(--ease),
    padding-block .35s var(--ease);
}
.topbar.is-solid{
  background:rgba(7,11,18,.82);
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  border-block-end-color:var(--line);
  padding-block:
    calc(12px + env(safe-area-inset-top,0px))
    12px;
}
.topbar > .brandmark,
.topbar > .topbar__nav{
  max-width:var(--wrap);
}

.brandmark{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  font-size:1.125rem;
  line-height:1.6;
  min-block-size:44px;
}
.brandmark img{
  inline-size:36px;
  block-size:36px;
  border-radius:10px;
  background:rgba(16,185,129,.08);
  box-shadow:0 0 0 1px rgba(52,211,153,.24), 0 8px 20px -10px rgba(0,0,0,.95);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.brandmark:hover img{
  transform:scale(1.06) rotate(-3deg);
  box-shadow:0 0 0 1px rgba(52,211,153,.4), 0 10px 24px -10px rgba(16,185,129,.45);
}
.brandmark--lg{ font-size:1.375rem; }
.brandmark--lg img{ inline-size:40px; block-size:40px; }

.topbar__nav{ display:flex; align-items:center; gap:var(--s1); }
.topbar__nav a{
  display:inline-flex;
  align-items:center;
  min-block-size:44px;
  padding-inline:14px;
  border-radius:10px;
  color:var(--fg-2);
  font-size:.9375rem;
  font-weight:600;
  position:relative;
  transition:color .18s var(--ease), background-color .18s var(--ease);
}
.topbar__nav a:hover{ color:var(--fg); background:rgba(148,163,184,.08); }
.topbar__nav a:not(.topbar__cta)::after{
  content:"";
  position:absolute;
  inset-inline:14px;
  inset-block-end:8px;
  block-size:2px;
  border-radius:999px;
  background:var(--em-400);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .28s var(--ease);
  opacity:.85;
}
.topbar__nav a.is-active:not(.topbar__cta){
  color:var(--fg);
}
.topbar__nav a.is-active:not(.topbar__cta)::after{
  transform:scaleX(1);
}
.topbar__cta{
  border:1px solid rgba(52,211,153,.4);
  background:rgba(7,11,18,.78);
  color:var(--fg) !important;
  backdrop-filter:blur(10px) saturate(1.15);
  -webkit-backdrop-filter:blur(10px) saturate(1.15);
  box-shadow:0 8px 20px -12px rgba(0,0,0,.75);
}
.topbar__cta:hover{
  border-color:rgba(52,211,153,.65);
  color:var(--em-300) !important;
  background:rgba(7,11,18,.9);
}
.topbar__cta[aria-current="page"]{
  border-color:rgba(52,211,153,.7);
  color:var(--em-300) !important;
}
.topbar__actions{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

@media (max-width:719px){
  /* Only the paired CTA buttons stay visible on phones */
  .topbar__nav > a:not(.topbar__cta){ display:none !important; }
  .topbar__actions{ display:inline-flex !important; gap:6px; }
  .topbar__nav a.topbar__cta{
    display:inline-flex !important;
    padding-inline:10px;
    font-size:.8125rem;
    white-space:nowrap;
  }
}

/* ── Hero: cinematic night composition ──────────────────────────────────── */

.hero{
  position:relative;
  isolation:isolate;
  overflow:clip;
  min-height:100vh;
  min-block-size:100svh;
  display:grid;
  align-items:center;
  padding-block:
    calc(clamp(96px,12vh,140px) + env(safe-area-inset-top,0px))
    clamp(88px,18vh,160px);
}

.plane{
  position:absolute;
  inset:0;
  z-index:-1;
  overflow:clip;
  background:
    radial-gradient(90% 70% at 18% 42%, rgba(16,185,129,.14), transparent 58%),
    radial-gradient(70% 55% at 88% 18%, rgba(34,211,238,.08), transparent 60%),
    linear-gradient(180deg,#050912 0%, #070B12 38%, #0A1220 72%, #070B12 100%);
}

.plane__story{
  position:absolute;
  inset:0;
  z-index:0;
}

.plane__photo{
  position:absolute;
  inset-block:0;
  left:0;
  right:auto;
  width:min(64%, 980px);
  height:100%;
  object-fit:cover;
  object-position:22% center;
  opacity:0;
  transform:scale(1.08) translate3d(-2%,0,0);
  filter:saturate(1.1) contrast(1.05) brightness(.98);
  -webkit-mask-image:linear-gradient(90deg,
    #000 0%,
    #000 42%,
    rgba(0,0,0,.85) 58%,
    rgba(0,0,0,.35) 74%,
    transparent 100%);
          mask-image:linear-gradient(90deg,
    #000 0%,
    #000 42%,
    rgba(0,0,0,.85) 58%,
    rgba(0,0,0,.35) 74%,
    transparent 100%);
  transition:
    opacity 1.35s cubic-bezier(.22,.7,.28,1),
    transform 7.5s cubic-bezier(.16,.84,.28,1),
    filter 1.35s ease;
  will-change:opacity, transform;
  pointer-events:none;
}

/* First paint before JS marks ready: show first frame quietly */
html:not(.js) .plane__photo:first-child,
html.js .hero.is-ready .plane__photo.is-active{
  opacity:.96;
  transform:scale(1.02) translate3d(0,0,0);
  z-index:2;
}

html.js .hero.is-ready .plane__photo.is-leaving{
  opacity:0;
  transform:scale(1.06) translate3d(1.5%,0,0);
  z-index:1;
  transition:
    opacity 1.1s cubic-bezier(.4,0,.2,1),
    transform 1.1s cubic-bezier(.4,0,.2,1);
}

html.js .hero.is-ready .plane__photo.is-active.is-drift{
  transform:scale(1.07) translate3d(1.2%, -0.6%, 0);
}

.plane__glow{
  position:absolute;
  inset-block:12% 18%;
  inset-inline-end:auto;
  left:0;
  width:min(55%, 720px);
  background:radial-gradient(55% 60% at 30% 50%,
    rgba(52,211,153,.18),
    rgba(16,185,129,.06) 42%,
    transparent 72%);
  filter:blur(8px);
  pointer-events:none;
}

.plane::before{
  content:"";
  position:absolute;
  inset-block-start:-28%;
  left:clamp(8%, 12vw, 18%);
  inline-size:1.5px;
  block-size:145%;
  background:linear-gradient(180deg,
    rgba(209,250,229,.85) 0%,
    rgba(52,211,153,.35) 32%,
    rgba(52,211,153,.06) 58%,
    transparent 78%);
  filter:blur(1px);
  transform:rotate(24deg);
  transform-origin:top center;
  opacity:.55;
  pointer-events:none;
}

.plane__lanes{
  position:absolute;
  inset-inline:-8%;
  inset-block-end:0;
  block-size:28%;
  background:
    repeating-conic-gradient(from 90deg at 34% 0%,
      rgba(203,213,225,.22) 0deg .45deg,
      rgba(203,213,225,0)  .45deg 11deg),
    linear-gradient(180deg, rgba(15,25,40,.7), rgba(9,14,22,.28) 62%, transparent);
  -webkit-mask-image:linear-gradient(to top, transparent 0%, rgba(0,0,0,.8) 20%, rgba(0,0,0,.35) 55%, transparent 94%);
          mask-image:linear-gradient(to top, transparent 0%, rgba(0,0,0,.8) 20%, rgba(0,0,0,.35) 55%, transparent 94%);
  pointer-events:none;
}

.plane__horizon{
  position:absolute;
  inset-inline:-6%;
  inset-block-end:28%;
  block-size:22vh;
  background:radial-gradient(42% 100% at 30% 100%,
    rgba(16,185,129,.22),
    rgba(34,211,238,.05) 48%,
    transparent 72%);
  pointer-events:none;
}
.plane__horizon::after{
  content:"";
  position:absolute;
  inset-inline:12%;
  inset-block-end:0;
  block-size:1px;
  background:linear-gradient(90deg,
    transparent,
    rgba(110,231,183,.28) 28%,
    rgba(34,211,238,.1) 58%,
    transparent);
}

.plane__beam{
  position:absolute;
  inset-block-start:-38%;
  left:clamp(2%, 6vw, 10%);
  inline-size:clamp(80px,12vw,170px);
  block-size:170%;
  background:linear-gradient(180deg,
    rgba(167,243,208,.55) 0%,
    rgba(52,211,153,.22) 28%,
    rgba(16,185,129,.1) 52%,
    rgba(34,211,238,.04) 74%,
    transparent 100%);
  filter:blur(26px);
  transform:rotate(24deg);
  transform-origin:top center;
  opacity:.7;
  animation:beam 18s var(--ease) infinite alternate;
  pointer-events:none;
}
@keyframes beam{
  from{ opacity:.45; transform:rotate(23deg) translate3d(0,0,0); }
  to  { opacity:.8;  transform:rotate(25.5deg) translate3d(0,1.2%,0); }
}

.plane__bloom{
  position:absolute;
  inset-block-end:0;
  left:0;
  inline-size:min(68vw,620px);
  aspect-ratio:5/2;
  background:radial-gradient(50% 50% at 40% 70%,
    rgba(52,211,153,.22),
    rgba(16,185,129,.06) 44%,
    transparent 70%);
  filter:blur(16px);
  pointer-events:none;
}

.plane__grain{
  position:absolute;
  inset:0;
  background-image:var(--grain);
  background-size:200px 200px;
  opacity:.07;
  mix-blend-mode:overlay;
  pointer-events:none;
}

.plane__vignette{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,
      rgba(5,9,18,.02) 0%,
      rgba(5,9,18,.08) 34%,
      rgba(5,9,18,.42) 56%,
      rgba(5,9,18,.82) 74%,
      rgba(5,9,18,.94) 100%),
    linear-gradient(180deg,
      rgba(5,9,18,.55) 0%,
      rgba(5,9,18,.12) 24%,
      transparent 50%,
      rgba(5,9,18,.48) 100%),
    radial-gradient(95% 70% at 72% 42%, transparent 22%, rgba(4,7,12,.28) 100%);
  pointer-events:none;
}

.hero__shell{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:max(clamp(20px,5vw,40px), env(safe-area-inset-left,0px))
                 max(clamp(20px,5vw,40px), env(safe-area-inset-right,0px));
  position:relative;
  z-index:1;
}

.hero__inner{
  position:relative;
  max-width:34rem;
}

@media (min-width:900px){
  .hero__shell{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    align-items:center;
    min-block-size:min(72vh, 720px);
  }
  .hero__inner{
    grid-column:1;
    justify-self:start;
    max-width:min(520px, 100%);
    text-align:start;
  }
}

.wordmark{
  font-size:clamp(3.75rem,14vw,6.5rem);
  font-weight:900;
  line-height:1.12;
  margin:0 0 var(--s3);
  color:#fff;
  letter-spacing:-0.02em;
  text-shadow:
    0 1px 0 rgba(255,255,255,.06),
    0 18px 40px rgba(0,0,0,.45),
    0 0 80px rgba(16,185,129,.12);
  position:relative;
}
.wordmark::after{
  content:"";
  display:block;
  margin-block-start:clamp(14px,2.2vh,22px);
  inline-size:clamp(52px,9vw,80px);
  block-size:3px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--em-400), var(--sky));
  box-shadow:0 0 22px rgba(52,211,153,.45);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .9s var(--ease) .35s;
}
.hero.is-ready .wordmark::after,
html:not(.js) .wordmark::after{
  transform:scaleX(1);
}

.hero__line{
  font-size:clamp(1.125rem,2.2vw,1.4375rem);
  font-weight:500;
  line-height:1.85;
  color:#C5D0E0;
  max-width:28ch;
  text-wrap:pretty;
}
@media (min-width:640px){
  .hero__line{ max-width:32ch; }
}

.hero .cta-group{
  margin-block-start:clamp(28px,5vh,48px);
  gap:14px;
}

.hero__note{
  margin-block-start:var(--s3);
  color:var(--fg-3);
  font-size:.9375rem;
  font-weight:500;
}

.hero__scroll{
  position:absolute;
  inset-inline-start:50%;
  inset-block-end:clamp(18px,4vh,36px);
  transform:translateX(-50%);
  z-index:2;
  display:grid;
  place-items:center;
  inline-size:44px;
  block-size:44px;
  color:var(--fg-3);
  transition:color .25s var(--ease);
}
.hero__scroll:hover{ color:var(--em-300); }
.hero__scroll-line{
  display:block;
  inline-size:1px;
  block-size:28px;
  background:linear-gradient(180deg, rgba(52,211,153,.7), transparent);
  animation:scrollPulse 2.2s var(--ease) infinite;
}
@keyframes scrollPulse{
  0%,100%{ opacity:.35; transform:scaleY(.7); transform-origin:top; }
  50%{ opacity:1; transform:scaleY(1); transform-origin:top; }
}

/* ── Photographic shots ────────────────────────────────────────────────── */

.shot{
  margin:0;
  position:relative;
  overflow:clip;
  transform-style:preserve-3d;
}

.shot img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.shot--bleed{
  block-size:clamp(260px,46vw,560px);
  border-block:1px solid var(--line);
  perspective:1400px;
}

.shot--bleed img{
  filter:saturate(1.05) contrast(1.08) brightness(.92);
  transform:scale(1.04);
  transition:transform 1.2s var(--ease);
}

.shot--bleed:hover img{
  transform:scale(1.08);
}

.shot--bleed::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(7,11,18,.6), transparent 26%, transparent 74%, rgba(7,11,18,.6)),
    linear-gradient(180deg, rgba(7,11,18,.3), transparent 34%, rgba(7,11,18,.62)),
    radial-gradient(60% 80% at 70% 40%, rgba(16,185,129,.12), transparent 60%);
  pointer-events:none;
}

.shot--panel{
  border-radius:var(--r-lg);
  border:1px solid var(--line-2);
  background:var(--ink-700);
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 24px 48px -28px rgba(0,0,0,.9);
  overflow:clip;
  transition:transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease);
}
.shot--panel:hover{
  transform:translateY(-4px);
  border-color:rgba(52,211,153,.28);
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 32px 56px -24px rgba(0,0,0,.92),
    0 18px 40px -28px rgba(16,185,129,.28);
}
.shot--panel img{
  aspect-ratio:4/3;
  filter:saturate(1.04) contrast(1.04);
  transition:transform 1.1s var(--ease), filter .5s var(--ease);
}
.shot--panel:hover img{
  transform:scale(1.035);
}

.owners__shot{
  width:100%;
  max-width:520px;
  margin-inline:auto;
}

.owners__shot:hover{
  transform:translateY(-4px);
}

@media (max-width:759px){
  .shot--panel,
  .shot--panel:hover,
  .owners__shot,
  .owners__shot:hover,
  .plate,
  .plate:hover,
  .plate:focus-within,
  .rail__num{
    transform:none;
  }
  .signal__core,
  .signal[data-state="connected"] .signal__core{
    transform:none;
  }
}

/* ── How it works: sequential rail ─────────────────────────────────────── */

.how{ border-block-start:1px solid var(--line); }

.rail{
  list-style:none;
  margin:var(--s6) 0 0;
  padding:0;
  display:grid;
  gap:var(--s5);
}

.rail__step{
  position:relative;
  padding-inline-start:68px;
}

.rail__num{
  position:absolute;
  inset-block-start:0;
  inset-inline-start:0;
  inline-size:44px;
  block-size:44px;
  display:grid;
  place-items:center;
  border:1px solid var(--line-2);
  border-radius:12px;
  background:rgba(17,24,39,.9);
  color:var(--em-300);
  font-size:1.0625rem;
  font-weight:700;
  line-height:1;
  box-shadow:0 10px 24px -16px rgba(0,0,0,.9);
  transition:
    border-color .35s var(--ease),
    background-color .35s var(--ease),
    color .35s var(--ease),
    box-shadow .35s var(--ease),
    transform .45s var(--ease);
}

.rail__step.is-in .rail__num{
  border-color:rgba(52,211,153,.45);
  background:rgba(16,185,129,.12);
  box-shadow:0 12px 28px -14px rgba(16,185,129,.45);
}

.rail__step:not(:last-child)::after{
  content:"";
  position:absolute;
  inset-inline-start:22px;
  inset-block-start:52px;
  inset-block-end:calc(-1 * var(--s5));
  inline-size:1px;
  background:linear-gradient(180deg, rgba(52,211,153,.4), rgba(148,163,184,.06));
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .7s var(--ease);
}
.rail__step.is-in:not(:last-child)::after{
  transform:scaleY(1);
}

.rail__title{
  font-size:1.25rem;
  font-weight:700;
  margin-block-end:var(--s1);
  padding-block-start:6px;
}
.rail__text{ color:var(--fg-2); max-width:38ch; }

@media (min-width:880px){
  .rail{ grid-template-columns:repeat(3,1fr); gap:var(--s5); }
  .rail__step{ padding-inline-start:0; padding-block-start:68px; }
  .rail__step:not(:last-child)::after{
    inset-block-start:22px;
    inset-block-end:auto;
    inset-inline-start:56px;
    inset-inline-end:calc(-1 * var(--s5));
    inline-size:auto;
    block-size:1px;
    background:linear-gradient(to left, rgba(52,211,153,.4), rgba(148,163,184,.06));
    transform:scaleX(0);
    transform-origin:right;
  }
  .rail__step.is-in:not(:last-child)::after{
    transform:scaleX(1);
  }
  .rail__title{ padding-block-start:0; }
}

/* ── Plate demo: the focal instrument ──────────────────────────────────── */

.demo{
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(16,185,129,.07), transparent 60%),
    linear-gradient(180deg,#0B1220,#080D16);
  border-block:1px solid var(--line);
  overflow:clip;
}

/* ── 3D QR process simulation ─────────────────────────────────────────── */

.sim{
  margin-block-start:var(--s6);
  display:grid;
  gap:var(--s4);
  justify-items:center;
}

.sim-video{
  margin-block-start:var(--s5);
  width:min(100%, 920px);
  margin-inline:auto;
  display:grid;
  gap:var(--s3);
  justify-items:center;
}

.sim-video__player{
  width:100%;
  border-radius:clamp(18px,3vw,28px);
  border:1px solid rgba(52,211,153,.22);
  background:#070B12;
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 30px 70px -36px rgba(0,0,0,.95),
    0 0 70px -40px rgba(16,185,129,.45);
  aspect-ratio:16/9;
  object-fit:cover;
}

.sim-video__hint{
  margin:0;
  color:var(--fg-2);
  text-align:center;
  font-size:.9375rem;
}

.sim__viewport{
  width:min(100%, 920px);
  perspective:1600px;
}

.sim__stage{
  position:relative;
  width:100%;
  aspect-ratio:16/10;
  border-radius:clamp(18px,3vw,28px);
  border:1px solid rgba(52,211,153,.2);
  background:
    radial-gradient(80% 70% at 50% 20%, rgba(16,185,129,.12), transparent 55%),
    linear-gradient(160deg, #0E1624, #070B12 70%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 30px 0 -16px rgba(15,23,42,.55),
    0 48px 90px -36px rgba(0,0,0,.95),
    0 0 80px -40px rgba(16,185,129,.55);
  overflow:hidden;
  transform:rotateX(8deg) rotateY(-4deg);
  transform-style:preserve-3d;
  transition:transform .6s var(--ease), box-shadow .6s var(--ease);
}

.sim:hover .sim__stage,
.sim.is-scanning .sim__stage,
.sim.is-connected .sim__stage{
  transform:rotateX(2deg) rotateY(0deg) translateY(-4px);
}

.sim__layer{
  position:absolute;
  inset:0;
  margin:0;
  opacity:0;
  transform:translateZ(-40px) scale(.94) rotateY(8deg);
  transition:opacity .55s var(--ease), transform .7s var(--ease);
  pointer-events:none;
}

.sim__layer img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 55%;
  display:block;
  filter:saturate(1.06) contrast(1.05);
}

.sim__layer.is-active{
  opacity:1;
  transform:translateZ(0) scale(1) rotateY(0);
  z-index:2;
}

.sim__layer.is-exit{
  opacity:0;
  transform:translateZ(30px) scale(1.04) rotateY(-6deg);
}

.sim__beam{
  position:absolute;
  inset-inline:18%;
  inset-block-start:18%;
  block-size:3px;
  border-radius:999px;
  background:linear-gradient(90deg, transparent, #6EE7B7, #34D399, transparent);
  box-shadow:0 0 18px 4px rgba(52,211,153,.65);
  opacity:0;
  z-index:3;
}

.sim.is-scanning .sim__beam{
  opacity:1;
  animation:scanBeam 1.35s linear infinite;
}

.sim__reticle{
  position:absolute;
  inset:22%;
  border:2px solid rgba(110,231,183,.55);
  border-radius:18px;
  box-shadow:0 0 0 1px rgba(16,185,129,.2), inset 0 0 40px rgba(16,185,129,.12);
  opacity:0;
  z-index:3;
}

.sim.is-scanning .sim__reticle{
  opacity:1;
  animation:reticlePulse 1.2s var(--ease) infinite;
}

.sim__pulse{
  position:absolute;
  inset-inline-end:12%;
  inset-block-start:14%;
  inline-size:72px;
  block-size:72px;
  border-radius:50%;
  border:2px solid rgba(52,211,153,.7);
  opacity:0;
  z-index:3;
}

.sim.is-connected .sim__pulse{
  opacity:1;
  animation:callPulse 1.8s var(--ease) infinite;
}

.sim__layer[data-layer="3"].is-active .sim__drive-img{
  animation:driveReveal 1.1s var(--ease) both;
}

.sim__speedlines{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  opacity:0;
  background:
    repeating-linear-gradient(
      100deg,
      transparent 0 14px,
      rgba(255,255,255,.07) 14px 16px,
      transparent 16px 34px
    );
  -webkit-mask-image:linear-gradient(90deg, transparent 20%, #000 45%, #000 75%, transparent 95%);
          mask-image:linear-gradient(90deg, transparent 20%, #000 45%, #000 75%, transparent 95%);
}

.sim.is-driving .sim__speedlines{
  opacity:1;
  animation:speedRush .85s var(--ease) both;
}

.sim__dust{
  position:absolute;
  inset-block-end:12%;
  inset-inline-end:8%;
  inline-size:42%;
  block-size:28%;
  z-index:3;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(closest-side, rgba(226,232,240,.35), transparent 70%),
    radial-gradient(closest-side at 30% 60%, rgba(148,163,184,.3), transparent 65%);
  filter:blur(2px);
}

.sim.is-driving .sim__dust{
  opacity:1;
  animation:dustTrail 1.2s var(--ease) both;
}

.sim__sparkle{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(circle at 72% 38%, rgba(110,231,183,.45), transparent 12%),
    radial-gradient(circle at 30% 55%, rgba(52,211,153,.28), transparent 14%);
  z-index:3;
}

.sim.is-resolved .sim__sparkle{
  opacity:1;
  animation:sparklePop 1.4s var(--ease) both;
}

@keyframes scanBeam{
  0%   { transform:translateY(0); opacity:.2; }
  15%  { opacity:1; }
  100% { transform:translateY(260px); opacity:.15; }
}

@keyframes reticlePulse{
  0%,100%{ transform:scale(1); opacity:.85; }
  50%    { transform:scale(1.03); opacity:1; }
}

@keyframes callPulse{
  0%   { transform:scale(.7); opacity:.7; }
  70%  { opacity:.15; }
  100% { transform:scale(2.4); opacity:0; }
}

@keyframes driveReveal{
  0%  { transform:translateX(-6%) scale(1.04); filter:blur(3px) saturate(1.05); }
  55% { transform:translateX(1%) scale(1.01); filter:blur(.5px) saturate(1.08); }
  100%{ transform:translateX(0) scale(1); filter:blur(0) saturate(1.06); }
}

@keyframes speedRush{
  0%  { opacity:0; transform:translateX(-12%); }
  30% { opacity:.85; }
  100%{ opacity:0; transform:translateX(18%); }
}

@keyframes dustTrail{
  0%  { opacity:0; transform:translateX(-20%) scale(.8); }
  40% { opacity:.9; }
  100%{ opacity:0; transform:translateX(30%) scale(1.2); }
}

@keyframes arriveHappy{
  from{ transform:scale(1.06) translateX(-3%); filter:blur(2px) saturate(1.06); }
  to  { transform:scale(1) translateX(0); filter:blur(0) saturate(1.06); }
}

@keyframes sparklePop{
  0%  { opacity:0; }
  35% { opacity:1; }
  100%{ opacity:.55; }
}

.sim__rail{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  width:100%;
  max-width:720px;
}

.sim__rail-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(17,24,39,.7);
  color:var(--fg-3);
  font-size:.875rem;
  font-weight:700;
  cursor:pointer;
  transition:border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease),
             box-shadow .25s var(--ease), transform .3s var(--ease);
}

.sim__rail-item span{
  display:grid;
  place-items:center;
  inline-size:22px;
  block-size:22px;
  border-radius:50%;
  background:rgba(148,163,184,.12);
  font-size:.75rem;
}

.sim__rail-item.is-current{
  color:#041018;
  border-color:transparent;
  background:linear-gradient(135deg,var(--em-500),var(--sky));
  box-shadow:
    0 12px 28px -14px rgba(16,185,129,.5),
    0 14px 30px -16px rgba(14,165,233,.4);
  transform:translateY(-2px);
}

.sim__rail-item.is-done{
  color:var(--em-300);
  border-color:rgba(52,211,153,.35);
}

.sim__caption{
  margin:0;
  text-align:center;
  font-size:clamp(1.125rem,2.4vw,1.375rem);
  font-weight:800;
  color:var(--fg);
  max-width:36ch;
  transition:opacity .35s var(--ease), transform .4s var(--ease);
}
.sim__caption.is-swap{
  opacity:0;
  transform:translateY(8px);
}

.sim__sub{
  margin:0;
  text-align:center;
  color:var(--fg-2);
  max-width:42ch;
  transition:opacity .35s var(--ease), transform .4s var(--ease);
}
.sim__sub.is-swap{
  opacity:0;
  transform:translateY(6px);
}

.sim__actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s2);
  justify-content:center;
  margin-block-start:var(--s2);
}

@media (max-width:759px){
  .sim__stage,
  .sim:hover .sim__stage,
  .sim.is-scanning .sim__stage,
  .sim.is-connected .sim__stage{
    transform:none;
  }
}

.plate-form{
  margin-block-start:var(--s6);
  perspective:1200px;
}

.plate{
  position:relative;
  max-width:560px;
  margin-inline:auto;
  padding:var(--s2) clamp(16px,4vw,26px) 14px;
  border:1px solid rgba(0,0,0,.35);
  border-radius:var(--r);
  background:
    linear-gradient(145deg, rgba(255,255,255,.55), transparent 40%),
    linear-gradient(178deg,var(--plate-1) 0%, var(--plate-2) 100%);
  box-shadow:
    0 2px 0 rgba(255,255,255,.9) inset,
    0 -3px 8px rgba(0,0,0,.12) inset,
    0 18px 0 -6px rgba(15,23,42,.35),
    0 34px 60px -20px rgba(0,0,0,.95),
    0 50px 90px -40px rgba(16,185,129,.35);
  transform:rotateX(14deg) rotateY(-6deg) translateZ(0);
  transform-style:preserve-3d;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.plate:hover,
.plate:focus-within{
  transform:rotateX(8deg) rotateY(-2deg) translateZ(18px);
  box-shadow:
    0 2px 0 rgba(255,255,255,.95) inset,
    0 -3px 8px rgba(0,0,0,.1) inset,
    0 22px 0 -6px rgba(15,23,42,.28),
    0 42px 70px -18px rgba(0,0,0,.95),
    0 60px 100px -36px rgba(16,185,129,.45);
}
.plate::before{
  content:"";
  position:absolute;
  inset:5px;
  border:1px solid rgba(18,22,28,.16);
  border-radius:9px;
  pointer-events:none;
}
.plate::after{
  content:"";
  position:absolute;
  inset:-18% -8% auto;
  block-size:42%;
  border-radius:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,.35), transparent);
  opacity:.35;
  pointer-events:none;
  transform:translateZ(1px);
}

.plate__country{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:var(--plate-mute);
  font-size:.75rem;
  font-weight:700;
  line-height:1.6;
}
.plate__country-lat{ opacity:.6; font-weight:600; }

.plate__slots{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:clamp(8px,2.5vw,18px);
  padding-block:6px 2px;
}

.slot{
  display:grid;
  justify-items:center;
  gap:2px;
  cursor:text;
}
.slot--letter{ cursor:pointer; }

.slot__label{
  color:var(--plate-mute);
  font-size:.6875rem;
  font-weight:700;
  line-height:1.4;
}

.slot input,
.slot select{
  inline-size:100%;
  padding:2px 6px 4px;
  border:0;
  border-block-end:2px dotted rgba(18,22,28,.26);
  border-radius:6px 6px 0 0;
  background:transparent;
  color:var(--plate-ink);
  font-family:inherit;
  font-size:clamp(1.75rem,8vw,3rem);
  font-weight:700;
  line-height:1.25;
  text-align:center;
  min-block-size:52px;
  appearance:none;
  -webkit-appearance:none;
  transition:border-color .18s var(--ease), background-color .18s var(--ease);
}
.slot input::placeholder{ color:rgba(18,22,28,.28); }
.slot input:focus,
.slot select:focus{
  outline:none;
  background:rgba(16,185,129,.12);
  border-block-end-color:var(--em-500);
}
.slot input:focus-visible,
.slot select:focus-visible{
  outline:2px solid var(--em-700);
  outline-offset:2px;
}
.slot select{ cursor:pointer; text-align-last:center; }

.slot--gov input{ inline-size:2.6ch; }
.slot--letter select{ inline-size:2.4ch; }
.slot--serial input{ inline-size:5.6ch; }

.plate__hint{
  display:block;
  text-align:center;
  color:var(--plate-mute);
  font-size:.75rem;
  font-weight:600;
  line-height:1.6;
  min-block-size:1.6em;
}
.plate__hint[data-known]{ color:var(--em-700); }

.plate-form__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s2);
  margin-block-start:var(--s3);
}

.plate-form__error{
  margin-block-start:var(--s2);
  color:#FCA5A5;
  font-size:.9375rem;
  font-weight:600;
}

.shot__caption{
  position:absolute;
  inset-inline:0;
  inset-block-end:0;
  z-index:1;
  margin:0;
  max-width:none;
  padding:14px 18px;
  border-radius:0;
  background:linear-gradient(180deg, transparent, rgba(7,11,18,.88));
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border:0;
  border-block-start:1px solid rgba(148,163,184,.1);
  color:var(--fg);
  font-size:.875rem;
  font-weight:600;
  line-height:1.55;
  box-shadow:none;
}

.shot__caption--on{
  inset-inline:0;
  inset-block-end:0;
}

.privacy__head{
  display:grid;
  gap:var(--s4);
  align-content:start;
}

.privacy__head .shot--panel{
  margin-block-start:var(--s2);
}

/* signal */
.signal{
  position:relative;
  max-width:560px;
  margin-block-start:var(--s7);
  margin-inline:auto;
  text-align:center;
  perspective:900px;
}

.signal__core{
  position:relative;
  z-index:2;
  margin-inline:auto;
  inline-size:84px;
  block-size:84px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid var(--line-2);
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.16), transparent 42%),
    radial-gradient(120% 120% at 50% 0%, rgba(148,163,184,.14), rgba(14,21,33,.95));
  color:var(--fg-3);
  box-shadow:
    0 1px 0 rgba(255,255,255,.12) inset,
    0 18px 36px -16px rgba(0,0,0,.9);
  transform:rotateX(18deg) translateZ(24px);
  transition:color .35s var(--ease), background .35s var(--ease),
             border-color .35s var(--ease), box-shadow .35s var(--ease),
             transform .35s var(--ease);
}

.signal__ring{
  position:absolute;
  inset-block-start:0;
  left:50%;
  margin-left:-42px;
  inline-size:84px;
  block-size:84px;
  border:1px solid rgba(52,211,153,.5);
  border-radius:50%;
  opacity:0;
  z-index:1;
  pointer-events:none;
  transform-style:preserve-3d;
}

.signal[data-state="connected"] .signal__core{
  background:
    radial-gradient(120% 120% at 30% 18%, rgba(255,255,255,.45), transparent 40%),
    radial-gradient(120% 120% at 50% 0%, var(--em-300), var(--em-500));
  border-color:rgba(110,231,183,.7);
  color:var(--em-ink);
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 22px 50px -16px rgba(16,185,129,.85),
    0 0 60px -10px rgba(52,211,153,.55);
  transform:rotateX(10deg) translateZ(40px) scale(1.05);
}

.signal__status{
  margin-block-start:var(--s3);
  font-size:1.125rem;
  font-weight:700;
  color:var(--fg-2);
  transition:color .3s var(--ease);
}
.signal__sub{
  margin-block-start:6px;
  color:var(--fg-3);
  font-size:.9375rem;
}

.signal[data-state="searching"] .signal__core{
  color:var(--em-300);
  border-color:rgba(52,211,153,.45);
  animation:breathe 1.1s ease-in-out infinite;
}
.signal[data-state="searching"] .signal__status{ color:var(--fg); }

.signal[data-state="connected"] .signal__status{ color:var(--em-300); }
.signal[data-state="connected"] .signal__ring{
  animation:ring 2.8s var(--ease) infinite;
}
.signal[data-state="connected"] .signal__ring:nth-of-type(2){ animation-delay:.9s; }
.signal[data-state="connected"] .signal__ring:nth-of-type(3){ animation-delay:1.8s; }

@keyframes ring{
  0%   { transform:scale(.92); opacity:.6; }
  70%  { opacity:.14; }
  100% { transform:scale(3.6); opacity:0; }
}
@keyframes breathe{
  0%,100%{ box-shadow:0 0 0 0 rgba(52,211,153,.28); }
  50%    { box-shadow:0 0 0 10px rgba(52,211,153,0); }
}

/* ── Privacy ───────────────────────────────────────────────────────────── */

.privacy__grid{ display:grid; gap:var(--s5); }
@media (min-width:900px){
  .privacy__grid{ grid-template-columns:5fr 7fr; gap:clamp(48px,7vw,96px); }
}

.lines{ margin:var(--s4) 0 0; }
.lines__row{
  display:grid;
  gap:2px;
  padding-block:var(--s3);
  border-block-start:1px solid var(--line);
  transition:background-color .3s var(--ease), padding-inline-start .35s var(--ease);
}
.lines__row:last-child{ border-block-end:1px solid var(--line); }
.lines__row:hover{
  background:rgba(52,211,153,.04);
  padding-inline-start:8px;
}
.lines dt{ font-weight:700; color:var(--fg); }
.lines dd{ margin:0; color:var(--fg-2); }

@media (min-width:640px){
  .lines__row{ grid-template-columns:minmax(160px,1fr) 1.5fr; gap:var(--s3); align-items:baseline; }
}

/* ── Owners ────────────────────────────────────────────────────────────── */

.owners{
  border-block-start:1px solid var(--line);
  overflow:clip;
}
.owners__grid{ display:grid; gap:clamp(56px,8vw,88px); align-items:center; }
@media (min-width:900px){
  .owners__grid{ grid-template-columns:7fr 5fr; }
}

.tags{
  display:grid;
  gap:var(--s3);
  inline-size:100%;
  max-width:400px;
  margin-inline:auto;
}

.tag{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:var(--s3);
  padding:var(--s2);
  border:1px solid var(--line-2);
  border-radius:var(--r-lg);
  background:linear-gradient(160deg, rgba(17,24,39,.92), rgba(11,18,32,.92));
  box-shadow:0 26px 54px -30px rgba(0,0,0,1);
  transform:rotate(-1.6deg);
}
.tag--b{ transform:rotate(1.4deg) translateX(-3%); }

.tag__plate{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:6px 12px;
  border-radius:8px;
  background:linear-gradient(178deg,var(--plate-1),var(--plate-2));
  color:var(--plate-ink);
  font-size:1.0625rem;
  font-weight:700;
  line-height:1.7;
  box-shadow:inset 0 0 0 1px rgba(18,22,28,.2);
}
.tag__plate i{ font-style:normal; opacity:.75; }

.tag__qr{
  inline-size:68px;
  block-size:68px;
  border:5px solid #fff;
  border-radius:7px;
  background-color:#fff;
  background-image:
    repeating-linear-gradient(90deg, rgba(18,22,28,.9) 0 3px, transparent 3px 6px),
    repeating-linear-gradient(0deg,  rgba(18,22,28,.9) 0 3px, transparent 3px 6px);
  box-shadow:0 8px 18px -10px rgba(0,0,0,.9);
}

.tag__foot{
  grid-column:1 / -1;
  color:var(--fg-3);
  font-size:.8125rem;
  font-weight:600;
}

/* ── Final CTA ─────────────────────────────────────────────────────────── */

.final{
  border-block-start:1px solid var(--line);
  background:
    radial-gradient(80% 90% at 50% 118%, rgba(16,185,129,.18), transparent 62%),
    linear-gradient(180deg,#080D16,#0B1220);
  text-align:center;
  overflow:clip;
}
.final::before{
  content:"";
  position:absolute;
  inset-inline:20%;
  inset-block-end:-20%;
  block-size:55%;
  background:radial-gradient(ellipse at center, rgba(14,165,233,.12), transparent 70%);
  animation:finalGlow 6s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes finalGlow{
  from{ opacity:.45; transform:scale(1); }
  to{ opacity:.9; transform:scale(1.12); }
}
.final__inner{ display:grid; justify-items:center; position:relative; z-index:1; }
.final .lede{ margin-inline:auto; }

/* ── Brand mark (logo) ──────────────────────────────────────────────────── */

.brand-mark{
  display:block;
  width:min(160px, 42vw);
  height:auto;
  border-radius:28%;
  filter:drop-shadow(0 18px 36px rgba(0,0,0,.5)) drop-shadow(0 0 24px rgba(16,185,129,.2));
}
.brand-mark--final{
  margin-block-end:var(--s3);
}
.owners__mark{
  background:
    radial-gradient(70% 60% at 50% 35%, rgba(16,185,129,.16), transparent 60%),
    linear-gradient(165deg, #111827, #070B12 70%);
}
.owners__mark img{
  object-fit:contain;
  padding:clamp(28px, 6vw, 56px);
  max-block-size:min(320px, 58vw);
  margin-inline:auto;
  border-radius:28%;
}

/* ── Footer ────────────────────────────────────────────────────────────── */

.footer{
  padding-block:var(--s6) var(--s5);
  border-block-start:1px solid var(--line);
  background:var(--ink-900);
}

.footer__grid{
  display:grid;
  gap:var(--s4);
  align-items:start;
}
@media (min-width:760px){
  .footer__grid{ grid-template-columns:1fr auto; align-items:center; }
}
.footer__brand p{ margin-block-start:var(--s1); color:var(--fg-3); font-size:.9375rem; }

.footer__links{ display:flex; flex-wrap:wrap; gap:var(--s1) var(--s2); }
.footer__links a{
  display:inline-flex;
  align-items:center;
  min-block-size:44px;
  color:var(--fg-2);
  font-size:.9375rem;
  font-weight:600;
}
.footer__links a:hover{ color:var(--em-300); }

.legal{
  display:grid;
  gap:var(--s3);
  margin-block-start:var(--s5);
  padding-block-start:var(--s4);
  border-block-start:1px solid var(--line);
}
@media (min-width:760px){
  .legal{ grid-template-columns:1fr 1fr; gap:var(--s5); }
}
.legal__stub h2{
  font-size:.9375rem;
  font-weight:700;
  margin-block-end:6px;
  color:var(--fg);
}
.legal__stub p{
  color:var(--fg-3);
  font-size:.875rem;
  line-height:1.8;
  max-width:60ch;
}
.legal__stub:target h2{ color:var(--em-300); }

.footer__copy{
  max-width:var(--wrap);
  margin:var(--s5) auto 0;
  padding-inline:clamp(20px,5vw,40px);
  color:var(--fg-3);
  font-size:.875rem;
}

/* ── Sticky mobile CTA ─────────────────────────────────────────────────── */

.dock{
  position:fixed;
  inset-inline:0;
  inset-block-end:0;
  z-index:30;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
  background:rgba(7,11,18,.86);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-block-start:1px solid var(--line-2);
  transform:translateY(120%);
  transition:transform .32s var(--ease);
}
.dock.is-visible{ transform:translateY(0); }
.dock__row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.dock__row .btn{
  width:100%;
  justify-content:center;
  text-align:center;
  padding-inline:12px;
}

@media (min-width:821px){
  .dock{ display:none !important; }
}
body.has-dock{ padding-block-end:96px; }
@media (min-width:821px){
  body.has-dock{ padding-block-end:0; }
}

/* ── Responsive: phone → tablet → desktop → short/landscape ───────────── */

/* Large / ultrawide */
@media (min-width:1280px){
  .hero__inner{ max-width:min(560px, 38vw); }
  .plane__photo{ width:min(62%, 1040px); }
}

/* Tablet / small laptop */
@media (max-width:899px){
  .hero{
    align-items:end;
    padding-block:
      calc(clamp(88px,12vh,120px) + env(safe-area-inset-top,0px))
      clamp(64px,12vh,120px);
  }
  .hero__shell{
    display:block;
    min-block-size:auto;
  }
  .hero__inner{
    max-width:min(36rem, 100%);
  }
  .plane__photo{
    width:min(88%, 780px);
    object-position:28% center;
    -webkit-mask-image:
      linear-gradient(90deg, #000 36%, transparent 96%),
      linear-gradient(180deg, #000 38%, transparent 100%);
            mask-image:
      linear-gradient(90deg, #000 36%, transparent 96%),
      linear-gradient(180deg, #000 38%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
  }
  html.js .hero.is-ready .plane__photo.is-active{ opacity:.78; }
  .hero__scroll{ display:none; }
  .section{ padding-block:clamp(56px,9vw,96px); }
  .rail__step{ padding-inline-start:56px; }
}

/* Phones + small tablets - stacked cinematic hero (image above, copy in lower band) */
@media (max-width:759px){
  .btn{
    white-space:normal;
    text-align:center;
    padding-inline:var(--s3);
    font-size:1rem;
  }
  .cta-group{
    margin-block-start:var(--s4);
    gap:12px;
  }
  .cta-group .btn{
    flex:1 1 12rem;
    min-inline-size:min(100%, 10.5rem);
  }
  .hero{
    /* Fill real mobile viewport; avoid 100vh jump on iOS */
    min-block-size:100svh;
    min-block-size:100dvh;
    max-block-size:none;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    align-items:stretch;
    padding-block:0;
    padding-inline:0;
  }
  .plane__photo{
    width:100%;
    left:0;
    right:0;
    height:100%;
    object-fit:cover;
    /* Landscape story art on tall phones: character stands left - bias crop left */
    object-position:28% 46%;
    transform:scale(1.04);
    -webkit-mask-image:linear-gradient(
      180deg,
      #000 0%,
      #000 42%,
      rgba(0,0,0,.78) 56%,
      rgba(0,0,0,.32) 72%,
      transparent 94%
    );
            mask-image:linear-gradient(
      180deg,
      #000 0%,
      #000 42%,
      rgba(0,0,0,.78) 56%,
      rgba(0,0,0,.32) 72%,
      transparent 94%
    );
  }
  html.js .hero.is-ready .plane__photo.is-active,
  html:not(.js) .plane__photo:first-child{
    opacity:.88;
  }
  html.js .hero.is-ready .plane__photo.is-active.is-drift{
    transform:scale(1.07) translate3d(0, -0.8%, 0);
  }
  .plane__glow{
    width:100%;
    inset-block:8% 42%;
    background:radial-gradient(70% 55% at 50% 28%,
      rgba(52,211,153,.16),
      transparent 70%);
  }
  .plane__vignette{
    background:
      linear-gradient(180deg,
        rgba(5,9,18,.35) 0%,
        transparent 22%,
        transparent 48%,
        rgba(5,9,18,.78) 72%,
        rgba(5,9,18,.96) 100%),
      radial-gradient(120% 80% at 50% 20%, transparent 40%, rgba(4,7,12,.35) 100%);
  }
  .hero__shell{
    width:100%;
    max-width:none;
    margin-inline:0;
    padding-block-start:clamp(4.5rem, 22svh, 9rem);
    padding-block-end:calc(clamp(1.25rem, 3.5svh, 2rem) + env(safe-area-inset-bottom,0px));
    padding-inline:
      max(1.15rem, env(safe-area-inset-left,0px))
      max(1.15rem, env(safe-area-inset-right,0px));
    background:linear-gradient(
      180deg,
      transparent 0%,
      rgba(7,11,18,.55) 28%,
      rgba(7,11,18,.92) 62%,
      #070B12 100%
    );
  }
  .hero__inner{
    max-width:min(26rem, 100%);
    margin-inline:auto;
    text-align:center;
  }
  .wordmark{
    font-size:clamp(2.75rem, 12.5vw, 4rem);
    margin-block-end:clamp(.5rem, 1.5svh, .85rem);
    text-shadow:
      0 1px 0 rgba(255,255,255,.06),
      0 12px 28px rgba(0,0,0,.55);
  }
  .wordmark::after{
    margin-block-start:clamp(10px, 1.8svh, 16px);
    margin-inline:auto;
    inline-size:clamp(40px, 12vw, 56px);
    transform-origin:center;
  }
  .hero__line{
    font-size:clamp(1rem, 3.8vw, 1.125rem);
    line-height:1.65;
    max-width:32ch;
    margin-inline:auto;
    text-wrap:balance;
  }
  .hero .cta-group{
    margin-block-start:clamp(1rem, 3svh, 1.5rem);
    justify-content:center;
  }
  .hero__note{
    font-size:.8125rem;
    margin-block-start:clamp(.65rem, 2svh, 1rem);
  }

  .h2{ font-size:clamp(1.5rem,6.5vw,2.25rem); }
  .h2--display{ font-size:clamp(1.875rem,8vw,2.75rem); }
  .lede{ font-size:1.0625rem; max-width:40ch; }

  .rail{ gap:var(--s4); margin-block-start:var(--s5); }
  .rail__step{ padding-inline-start:56px; }
  .rail__num{ inline-size:40px; block-size:40px; font-size:1rem; }
  .rail__title{ font-size:1.125rem; }
  .rail__text{ font-size:.9375rem; }

  .sim{ gap:var(--s3); margin-block-start:var(--s5); }
  .sim__viewport{ width:100%; perspective:900px; }
  .sim__stage{
    aspect-ratio:16/9;
    border-radius:16px;
    transform:none;
  }
  .sim__layer img{
    object-fit:contain;
    object-position:center center;
  }
  .sim__caption{
    font-size:clamp(1rem,4.5vw,1.25rem);
    max-width:28ch;
    padding-inline:4px;
  }
  .sim__sub{
    font-size:.9375rem;
    max-width:34ch;
    padding-inline:4px;
  }
  .sim__rail{
    flex-wrap:nowrap;
    justify-content:flex-start;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    max-width:100%;
    padding-block-end:4px;
    gap:8px;
    /* hide scrollbar but keep scroll */
    scrollbar-width:none;
  }
  .sim__rail::-webkit-scrollbar{ display:none; }
  .sim__rail-item{
    flex:none;
    scroll-snap-align:start;
    min-block-size:44px;
    padding:10px 12px;
    font-size:.8125rem;
  }
  .sim__actions{
    width:100%;
  }
  .sim__actions .btn{
    flex:1 1 100%;
  }

  .plate{
    transform:none;
    border-radius:12px;
    padding:14px 12px 12px;
  }
  .plate:hover,
  .plate:focus-within{
    transform:none;
  }
  .plate__slots{
    gap:6px;
    flex-wrap:wrap;
  }
  .slot input,
  .slot select{
    font-size:clamp(1.375rem,7.5vw,2.25rem);
    min-block-size:48px;
  }
  .slot--gov input{ inline-size:2.4ch; }
  .slot--letter select{ inline-size:2.2ch; }
  .slot--serial input{ inline-size:5.2ch; }

  .privacy__grid,
  .owners__grid{ gap:var(--s5); }
  .owners__shot,
  .shot--panel{
    transform:none;
  }
  .owners__shot:hover,
  .shot--panel:hover{
    transform:none;
  }
  .shot__caption{
    max-width:none;
    font-size:.8125rem;
    padding:12px 14px;
    border-radius:0;
  }
  .plate-form__actions{
    width:100%;
  }
  .plate-form__actions .btn{
    flex:1 1 100%;
  }

  .footer{ padding-block:var(--s5) var(--s4); }
  .footer__grid{ gap:var(--s3); }
  .footer__copy{
    padding-inline:max(clamp(16px,4.5vw,40px), env(safe-area-inset-left,0px))
                   max(clamp(16px,4.5vw,40px), env(safe-area-inset-right,0px));
  }
  .legal{ gap:var(--s3); margin-block-start:var(--s4); }

  .dock{
    padding-inline:max(16px, env(safe-area-inset-left,0px))
                   max(16px, env(safe-area-inset-right,0px));
  }
}

/* Narrow phones */
@media (max-width:399px){
  .topbar__nav a.topbar__cta{
    padding-inline:10px;
    font-size:.875rem;
  }
  .brandmark span{ font-size:1rem; }
  .brandmark img{ inline-size:32px; block-size:32px; }
  .hero__shell{
    padding-block-start:clamp(3.75rem, 20svh, 7rem);
    padding-inline:max(1rem, env(safe-area-inset-left,0px))
                   max(1rem, env(safe-area-inset-right,0px));
  }
  .wordmark{ font-size:clamp(2.4rem, 14vw, 3.15rem); }
  .hero__line{
    font-size:1rem;
    max-width:24ch;
  }
  .cta-group .btn{ flex-basis:100%; }
  .plane__photo{ object-position:26% 44%; }
  .sim__stage{ aspect-ratio:16/9; border-radius:14px; }
  .plate__country{ font-size:.6875rem; gap:4px; }
  .slot__label{ font-size:.625rem; }
}

/* Short viewports (landscape phones, small laptops) */
@media (max-height:560px) and (orientation:landscape){
  .hero{
    min-block-size:100svh;
    min-block-size:100dvh;
    justify-content:center;
    padding-block:0;
  }
  .plane__photo{
    width:100%;
    height:100%;
    left:0;
    right:0;
    object-position:22% 42%;
    -webkit-mask-image:linear-gradient(90deg, #000 0%, #000 34%, rgba(0,0,0,.45) 58%, transparent 82%);
            mask-image:linear-gradient(90deg, #000 0%, #000 34%, rgba(0,0,0,.45) 58%, transparent 82%);
  }
  html.js .hero.is-ready .plane__photo.is-active,
  html:not(.js) .plane__photo:first-child{
    opacity:.7;
  }
  .hero__shell{
    display:block;
    min-block-size:auto;
    padding-block:
      calc(4.25rem + env(safe-area-inset-top,0px))
      calc(1rem + env(safe-area-inset-bottom,0px));
    padding-inline:
      max(1.25rem, env(safe-area-inset-left,0px))
      max(1.25rem, env(safe-area-inset-right,0px));
    background:none;
  }
  .hero__inner{
    max-width:min(28rem, 52vw);
    margin-inline:0;
    margin-inline-start:auto;
    text-align:start;
  }
  .wordmark{
    font-size:clamp(2rem, 8vh, 3.25rem);
    margin-block-end:8px;
  }
  .wordmark::after{
    margin-block-start:8px;
    margin-inline:0;
    transform-origin:right;
  }
  .hero__line{ font-size:1rem; max-width:36ch; margin-inline:0; }
  .hero .cta-group{
    margin-block-start:var(--s2);
    justify-content:flex-start;
  }
  .hero__note,
  .hero__scroll{ display:none; }
  .section{ padding-block:clamp(40px,8vw,72px); }
  .sim__stage{ aspect-ratio:16/9; }
}

/* Touch: don’t rely on hover lift for primary actions */
@media (hover:none){
  .btn--primary:hover{
    transform:none;
  }
  .sim:hover .sim__stage{
    transform:none;
  }
  @media (min-width:760px){
    .sim.is-scanning .sim__stage,
    .sim.is-connected .sim__stage{
      transform:rotateX(2deg) rotateY(0deg) translateY(-4px);
    }
  }
}

/* ── Hero entrance (one authored moment) ──────────────────────────────── */

.js .reveal > *{
  opacity:0;
  transform:translateY(18px);
  filter:blur(6px);
}
.js .reveal.is-in > *{
  opacity:1;
  transform:none;
  filter:blur(0);
  transition:
    opacity .75s var(--ease),
    transform .85s var(--ease),
    filter .85s var(--ease);
}
.js .reveal.is-in > *:nth-child(1){ transition-delay:.12s; }
.js .reveal.is-in > *:nth-child(2){ transition-delay:.22s; }
.js .reveal.is-in > *:nth-child(3){ transition-delay:.34s; }
.js .reveal.is-in > *:nth-child(4){ transition-delay:.44s; }

/* ── Scroll motion system ─────────────────────────────────────────────── */

.js [data-rise] > .wrap > :is(h2, .lede, .sim, .rail, .privacy__grid, .owners__grid, .final__inner){
  opacity:0;
  transform:translateY(28px);
  filter:blur(4px);
  transition:
    opacity .7s var(--ease),
    transform .85s var(--ease),
    filter .85s var(--ease);
}
.js [data-rise].is-in > .wrap > :is(h2, .lede, .sim, .rail, .privacy__grid, .owners__grid, .final__inner){
  opacity:1;
  transform:none;
  filter:blur(0);
}
.js [data-rise].is-in > .wrap > h2{ transition-delay:.04s; }
.js [data-rise].is-in > .wrap > .lede{ transition-delay:.12s; }
.js [data-rise].is-in > .wrap > .rail{ transition-delay:.16s; }
.js [data-rise].is-in > .wrap > .sim{ transition-delay:.2s; }
.js [data-rise].is-in > .wrap > .privacy__grid,
.js [data-rise].is-in > .wrap > .owners__grid{ transition-delay:.12s; }
.js [data-rise].is-in > .wrap > .final__inner{ transition-delay:.08s; }

.js [data-stagger] > *{
  opacity:0;
  transform:translateY(22px);
  transition:
    opacity .55s var(--ease),
    transform .7s var(--ease);
}
.js [data-stagger].is-in > *:nth-child(1){ opacity:1; transform:none; transition-delay:.08s; }
.js [data-stagger].is-in > *:nth-child(2){ opacity:1; transform:none; transition-delay:.2s; }
.js [data-stagger].is-in > *:nth-child(3){ opacity:1; transform:none; transition-delay:.32s; }
.js [data-stagger].is-in > *:nth-child(4){ opacity:1; transform:none; transition-delay:.42s; }

.js .rail > .rail__step{
  opacity:0;
  transform:translateY(20px);
  transition:
    opacity .6s var(--ease),
    transform .75s var(--ease);
}
.js .rail.is-in > .rail__step:nth-child(1){ opacity:1; transform:none; transition-delay:.1s; }
.js .rail.is-in > .rail__step:nth-child(2){ opacity:1; transform:none; transition-delay:.28s; }
.js .rail.is-in > .rail__step:nth-child(3){ opacity:1; transform:none; transition-delay:.46s; }

.footer__links a{
  position:relative;
  transition:color .2s var(--ease);
}
.footer__links a::after{
  content:"";
  position:absolute;
  inset-inline:0;
  inset-block-end:10px;
  block-size:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .28s var(--ease);
  opacity:.55;
}
.footer__links a:hover::after{ transform:scaleX(1); }

.dock{
  transition:transform .42s cubic-bezier(.16,.84,.28,1), opacity .35s var(--ease);
  opacity:0;
}
.dock.is-visible{ opacity:1; }

/* ── 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;
  }
  .plane__beam,
  .hero__scroll-line,
  .final::before{ animation:none; opacity:.75; }
  .js .reveal > *,
  .js [data-rise] > .wrap > :is(h2, .lede, .sim, .rail, .privacy__grid, .owners__grid, .final__inner),
  .js [data-stagger] > *,
  .js .rail > .rail__step{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
  }
  .wordmark::after{ transform:scaleX(1); }
  html.js .hero.is-ready .plane__photo.is-active,
  html:not(.js) .plane__photo:first-child{
    opacity:.96;
    transform:none;
  }
  html.js .hero.is-ready .plane__photo.is-active.is-drift{
    transform:none;
  }
  .plate,
  .plate:hover,
  .plate:focus-within,
  .shot--panel,
  .shot--panel:hover,
  .owners__shot,
  .owners__shot:hover,
  .rail__num,
  .signal__core,
  .signal[data-state="connected"] .signal__core,
  .sim__stage,
  .btn--primary:hover,
  .btn--ghost:hover{
    transform:none !important;
  }
  .shot--bleed img,
  .shot--bleed:hover img{ transform:none; }
  .signal[data-state="connected"] .signal__ring{
    animation:none;
    opacity:.3;
    transform:scale(1.9);
  }
  .signal[data-state="connected"] .signal__ring:nth-of-type(2){ opacity:.18; transform:scale(2.6); }
  .signal[data-state="connected"] .signal__ring:nth-of-type(3){ opacity:.1;  transform:scale(3.3); }
  .btn--primary::after{ display:none; }
  .dock{ opacity:1; transition:none; }
}