/* ==========================================================================
   VEGA by POI · Free social media audit
   --------------------------------------------------------------------------
   DESIGN DIRECTION

   Concept   "VEGA, a star to navigate by." The visitor's social presence is a
             constellation; the audit is the instrument that maps it. Night sky
             (ink into indigo) holds the offer and the form; a curved planet
             horizon opens onto the day side (light-blue tint) where the report
             is explained; night returns in the footer. Teal is the only light
             source: the guide star, orbit lines, focus, the primary action.
             Geometry is borrowed from the astrolabe: hairline rings, graduated
             ticks, star pointers. Restraint over spectacle.

   Type      Tajawal for Arabic and for headings in both languages, Inter for
             English body. Modular scale 1.25 on a 16px base, fluid with clamp():
             -1 13-14 · 0 16-17 · 1 19-21 · 2 23-27 · 3 29-38 · 4 36-52 · 5 40-68.
             Headings leading 1.04-1.2 (Arabic 1.3); body 1.65 (Arabic 1.8).
             Arabic is set ~6% larger because Tajawal reads small, and never
             receives letter-spacing or case transforms.

   Space     8px system: 8 16 24 32 40 48 64 80 96 128. More space above a
             heading than below it. Content width 1120px, gutter 16-32px.
             Radii: panels 24, cards 16, inputs 12, pills for buttons and chips.

   Motion    Motion explains, it never decorates. One authored moment per
             surface: the sky drifts, the constellation builds as platforms are
             chosen, the orbit path draws as you read the steps, the stars settle
             into a check on success. Only transform and opacity animate (SVG
             stroke-dashoffset for line drawing). Strong ease-out for entrances
             (cubic-bezier(.23,1,.32,1)), ease-in-out for on-screen travel,
             press feedback 140ms, UI 200ms, reveals 560ms over 16px. Everything
             mirrors in RTL. Reduced motion shows final states with fades of
             150ms or less. Nothing ever waits on motion to accept input.
   ========================================================================== */

/* ---------- Metric-matched fallbacks: no reflow when web fonts swap in ---------- */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("ArialMT");
  size-adjust: 106.7%;
  ascent-override: 90.8%;
  descent-override: 22.6%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Tajawal Fallback";
  src: local("Arial"), local("ArialMT");
  font-weight: 100 600;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  size-adjust: 93.5%;
  ascent-override: 68.8%;
  descent-override: 38.2%;
  line-gap-override: 21.4%;
}
@font-face {
  font-family: "Tajawal Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 700 900;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  size-adjust: 91%;
  ascent-override: 70.7%;
  descent-override: 39.2%;
  line-gap-override: 22%;
}

/* Arabic glyphs: widths measured against Tajawal so lines wrap the same before and after the swap. */
@font-face {
  font-family: "Tajawal Arabic Fallback";
  src: local("Segoe UI"), local("SegoeUI");
  font-weight: 100 600;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF;
  size-adjust: 100.5%;
}
@font-face {
  font-family: "Tajawal Arabic Fallback";
  src: local("Segoe UI Bold"), local("SegoeUI-Bold");
  font-weight: 700 900;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF;
  size-adjust: 107.5%;
}
@font-face {
  font-family: "Tajawal Arabic Fallback 2";
  src: local("Arial"), local("ArialMT");
  font-weight: 100 600;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF;
  size-adjust: 120%;
}
@font-face {
  font-family: "Tajawal Arabic Fallback 2";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 700 900;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF;
  size-adjust: 134%;
}

/* ---------- Tokens ---------- */
:root {
  /* Brand */
  --ink: #0A0711;
  --indigo: #2A2A78;
  --teal: #30D0D0;
  --teal-deep: #0E6E72;
  --tint: #E6F0FD;
  --white: #FFFFFF;

  /* Derived (all text pairs checked for WCAG AA) */
  --night-2: #110D2A;
  --night-3: #1D1A58;
  --teal-deep-hover: #0B7F84;
  --on-dark-1: #F3F4FB;
  --on-dark-2: #C2C5DE;
  --on-dark-3: #A3A7C6;
  --on-light-1: #0A0711;
  --on-light-2: #43466B;
  --hairline-dark: rgba(214, 218, 255, 0.15);
  --error: #FF9C9C;
  --test: #FFD58A;

  /* Type */
  --font-head: "Tajawal", "Tajawal Fallback", "Tajawal Arabic Fallback", "Tajawal Arabic Fallback 2", system-ui, sans-serif;
  --font-body: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ar: "Tajawal", "Tajawal Fallback", "Tajawal Arabic Fallback", "Tajawal Arabic Fallback 2", "Geeza Pro", "Noto Sans Arabic", sans-serif;
  --step--1: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --step-1: clamp(1.1875rem, 1.12rem + 0.3vw, 1.3125rem);
  --step-2: clamp(1.4375rem, 1.3rem + 0.6vw, 1.6875rem);
  --step-3: clamp(1.8125rem, 1.55rem + 1.1vw, 2.375rem);
  --step-4: clamp(2.25rem, 1.8rem + 1.9vw, 3.25rem);
  --step-5: clamp(2.5rem, 1.75rem + 3.2vw, 4.25rem);

  /* Space (8px system) */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 2.5rem;
  --s-6: 3rem;
  --s-8: 4rem;
  --s-10: 5rem;
  --s-12: 6rem;
  --gutter: clamp(1rem, 4vw, 2rem);
  --container: 70rem;

  /* Shape */
  --r-panel: 1.5rem;
  --r-card: 1rem;
  --r-input: 0.75rem;
  --r-pill: 999px;

  /* Layout */
  --bar-h: 4rem;
  --overlap: 7.5rem;
  --hz: clamp(3.5rem, 8vw, 7.5rem);
  --card-w: clamp(23rem, 36vw, 28.5rem);
  --hero-gap: clamp(3rem, 6vw, 5.5rem);

  /* Motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-press: 140ms;
  --dur-ui: 200ms;
  --dur-reveal: 560ms;

  /* Z-index scale: sky 0 · horizon 1 · hero content 2 · card 3 · success 4 · topbar 50 · skip link 100 */
}

@media (min-width: 64em) {
  :root {
    --bar-h: 4.5rem;
    --overlap: 12.5rem;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--bar-h) + 1.5rem);
  background: var(--ink);
  scrollbar-color: #3B3A7C var(--ink);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  min-width: 20rem;
  background: var(--ink);
  color: var(--on-light-1);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

html[lang="ar"] body {
  font-family: var(--font-ar);
  font-size: calc(var(--step-0) * 1.0625);
  line-height: 1.8;
}

/* Arabic visitors: hold the first paint until the copy is Arabic (boot.js sets this,
   app.js clears it). If scripts never run, the page shows itself after 1.5s anyway. */
html.i18n-pending body {
  visibility: hidden;
  animation: i18n-failsafe 0s linear 1.5s forwards;
}

@keyframes i18n-failsafe {
  to {
    visibility: visible;
  }
}

/* Arabic letters join; spacing or case transforms break them. */
:lang(ar) {
  letter-spacing: 0 !important;
  text-transform: none !important;
}

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

a {
  color: inherit;
}

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

::selection {
  background: rgba(48, 208, 208, 0.32);
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

.audit :focus-visible,
.steps :focus-visible {
  outline-color: var(--teal-deep);
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.visually-hidden,
.hp {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: fixed;
  inset-block-start: 0.75rem;
  inset-inline-start: 0.75rem;
  z-index: 100;
  padding: 0.75rem 1.125rem;
  border-radius: var(--r-input);
  background: var(--white);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-180%);
  transition: transform var(--dur-ui) var(--ease-out);
}

.skip-link:focus {
  transform: none;
}

/* ---------- Top bar ---------- */
.topbar {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  height: var(--bar-h);
  margin-block-end: calc(-1 * var(--bar-h));
  color: var(--white);
}

.topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(11, 8, 28, 0.9);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 1px 0 rgba(214, 218, 255, 0.08);
  opacity: 0;
  transition: opacity 320ms var(--ease-out);
}

.topbar.is-scrolled::before {
  opacity: 1;
}

.topbar__inner {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}

.scroll-sentinel {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 1px;
  height: 1.5rem;
  pointer-events: none;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  min-height: 2.75rem;
  padding-inline-end: 0.25rem;
  border-radius: var(--r-input);
  color: var(--white);
  text-decoration: none;
}

.brand__word {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.1875rem;
  line-height: 1;
  letter-spacing: 0.16em;
  padding-block-start: 0.12em;
}

.brand__by {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--on-dark-3);
  letter-spacing: 0.01em;
  margin-inline-start: -0.375rem;
}

/* ---------- Orbit mark (logo + orbiting satellite) ---------- */
.orbit-mark {
  --om: 2.375rem;
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: var(--om);
  height: var(--om);
  margin-inline: 0.25rem;
}

.orbit-mark--lg {
  --om: clamp(5rem, 11vw, 8rem);
  margin-inline: 0.75rem;
}

.mark {
  position: relative;
  z-index: 1;
  display: block;
  width: calc(var(--om) * 0.84);
  aspect-ratio: 275 / 288;
}

.mark__fallback,
.mark__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.mark__fallback {
  transition: opacity 240ms var(--ease-out);
}

.mark__img {
  opacity: 0;
  transition: opacity 240ms var(--ease-out);
}

.mark.has-img .mark__img {
  opacity: 1;
}

.mark.has-img .mark__fallback {
  opacity: 0;
}

.orbit-mark__ring,
.orbit-mark__track {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 156%;
  height: 156%;
  translate: -50% -50%;
  pointer-events: none;
}

.orbit-mark__ring {
  overflow: visible;
}

.orbit-mark__ring path {
  fill: none;
  stroke: var(--teal);
  stroke-width: 1.2px;
  vector-effect: non-scaling-stroke;
}

.orbit-mark__ring--back {
  z-index: 0;
  opacity: 0.4;
}

.orbit-mark__ring--front {
  z-index: 2;
  opacity: 0.75;
}

.orbit-mark__track {
  z-index: 3;
  transform: rotate(-24deg) scaleY(0.3404);
}

.orbit-mark__arm {
  position: absolute;
  inset: 0;
  animation: orbit-spin 18s linear infinite;
}

.orbit-mark__sat {
  position: absolute;
  top: 50%;
  left: 97%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: #DFFFFF;
  box-shadow: 0 0 6px 1px rgba(48, 208, 208, 0.9);
  transform: scaleY(2.938);
  animation:
    orbit-counter 18s linear infinite,
    orbit-depth 18s linear infinite;
}

.orbit-mark--lg .orbit-mark__sat {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
}

/* Orbits turn the other way in RTL, even inside the LTR brand lockups. */
[dir="rtl"] .orbit-mark__arm,
[dir="rtl"] .orbit-mark__sat {
  animation-direction: reverse;
}

@keyframes orbit-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes orbit-counter {
  from {
    transform: rotate(0deg) scaleY(2.938);
  }
  to {
    transform: rotate(-360deg) scaleY(2.938);
  }
}

@keyframes orbit-depth {
  0%,
  44% {
    opacity: 1;
  }
  56%,
  94% {
    opacity: 0.18;
  }
  100% {
    opacity: 1;
  }
}

/* ---------- Language toggle ---------- */
.lang-toggle {
  position: relative;
  display: inline-flex;
  padding: 4px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px var(--hairline-dark);
}

.lang-toggle__thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 3rem;
  height: 2.5rem;
  border-radius: var(--r-pill);
  background: var(--teal);
  box-shadow: 0 6px 16px -6px rgba(48, 208, 208, 0.7);
  transition: transform 260ms var(--ease-drawer);
}

.lang-toggle[data-active="ar"] .lang-toggle__thumb {
  transform: translateX(3rem);
}

.lang-toggle__btn {
  position: relative;
  z-index: 1;
  width: 3rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: var(--on-dark-2);
  font: 600 0.875rem/1 var(--font-body);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color var(--dur-ui) var(--ease-out);
}

.lang-toggle__btn[lang="ar"] {
  font-family: var(--font-ar);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1;
  padding-block-end: 0.3em;
}

.lang-toggle__btn[aria-pressed="true"] {
  color: var(--ink);
}

@media (hover: hover) and (pointer: fine) {
  .lang-toggle__btn[aria-pressed="false"]:hover {
    color: var(--white);
  }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  z-index: 2;
  isolation: isolate;
  color: var(--on-dark-1);
  background:
    radial-gradient(110% 70% at 78% -5%, rgba(42, 42, 120, 0.85) 0%, rgba(42, 42, 120, 0) 62%),
    linear-gradient(180deg, var(--ink) 0%, var(--night-2) 46%, var(--night-3) 100%);
  padding-block-start: calc(var(--bar-h) + 6.5rem);
}

.hero__sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero__nebula {
  --neb-x: 28%;
  position: absolute;
  inset: 0;
  background:
    radial-gradient(38% 26% at var(--neb-x) 16%, rgba(48, 208, 208, 0.13), transparent 72%),
    radial-gradient(46% 36% at calc(100% - var(--neb-x)) 74%, rgba(91, 91, 170, 0.3), transparent 72%);
}

.hero__nebula:dir(rtl) {
  --neb-x: 72%;
}

.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  row-gap: var(--s-5);
  padding-block-end: var(--hz);
}

.hero__copy {
  position: relative;
  max-width: 36rem;
}

/* Guide star: Vega, with the rest of Lyra drawn in hairline */
.guide {
  position: absolute;
  inset-block-start: -4.75rem;
  inset-inline-start: clamp(5.5rem, 34%, 13rem);
  width: 172px;
  height: 68px;
  pointer-events: none;
}

.guide__lyra {
  width: 172px;
  height: 68px;
  overflow: visible;
}

.guide__lyra:dir(rtl) {
  scale: -1 1;
}

.lyra__lines path {
  fill: none;
  stroke: rgba(196, 244, 244, 0.42);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw-line 1.4s var(--ease-out) forwards;
  animation-delay: calc(500ms + var(--i, 0) * 110ms);
}

.lyra__lines path:nth-child(2) { --i: 1; }
.lyra__lines path:nth-child(3) { --i: 2; }
.lyra__lines path:nth-child(4) { --i: 3; }
.lyra__lines path:nth-child(5) { --i: 4; }
.lyra__lines path:nth-child(6) { --i: 5; }
.lyra__lines path:nth-child(7) { --i: 6; }

.lyra__stars circle {
  fill: #E8FDFD;
  opacity: 0;
  animation: fade-in 700ms var(--ease-out) forwards;
  animation-delay: calc(350ms + var(--i, 0) * 120ms);
}

.lyra__stars circle:nth-child(2) { --i: 1; }
.lyra__stars circle:nth-child(3) { --i: 2; }
.lyra__stars circle:nth-child(4) { --i: 3; }
.lyra__stars circle:nth-child(5) { --i: 4; }

.guide__star {
  position: absolute;
  inset-block-start: 20px;
  inset-inline-start: -6px;
  width: 40px;
  height: 40px;
}

.guide__star svg {
  position: relative;
  width: 40px;
  height: 40px;
  fill: #F2FFFF;
  filter: drop-shadow(0 0 4px rgba(48, 208, 208, 0.9));
}

.guide__glow {
  position: absolute;
  inset: -26px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(48, 208, 208, 0.5) 0%, rgba(48, 208, 208, 0.16) 34%, rgba(48, 208, 208, 0) 68%);
  animation: guide-pulse 5.2s var(--ease-in-out) infinite;
}

@keyframes guide-pulse {
  0%,
  100% {
    opacity: 0.75;
    transform: scale(0.92);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes draw-line {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fade-in {
  to {
    opacity: 1;
  }
}

.hero__title {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: var(--step-5);
  line-height: 1.04;
  color: var(--white);
  text-wrap: balance;
}

html[lang="en"] .hero__title {
  letter-spacing: -0.022em;
}

html[lang="ar"] .hero__title {
  font-size: calc(var(--step-5) * 0.94);
  line-height: 1.3;
}

@media (min-width: 64em) {
  html[lang="ar"] .hero__title {
    font-size: calc(var(--step-5) * 0.8);
  }
}

.hero__sub {
  margin: var(--s-3) 0 0;
  max-width: 34rem;
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--on-dark-2);
}

html[lang="ar"] .hero__sub {
  line-height: 1.85;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: var(--s-4) 0 0;
  padding: 0;
  list-style: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  padding-block: 0.5rem;
  padding-inline: 0.75rem 1rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px var(--hairline-dark);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  color: #E7E9F6;
}

html[lang="ar"] .chip {
  font-size: 1rem;
  font-weight: 500;
}

.chip__icon {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  fill: none;
  stroke: var(--teal);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Form card ---------- */
.card {
  position: relative;
  z-index: 3;
  margin-block-end: calc(-1 * var(--overlap));
  color: var(--on-dark-1);
  color-scheme: dark;
}

.card__glass {
  position: absolute;
  inset: 0;
  border-radius: var(--r-panel);
  background: linear-gradient(180deg, rgba(29, 24, 70, 0.74) 0%, rgba(19, 15, 44, 0.88) 52%, rgba(14, 11, 33, 0.95) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  box-shadow:
    0 0 0 1px rgba(214, 218, 255, 0.13),
    0 0 0 7px rgba(214, 218, 255, 0.035),
    0 0 0 8px rgba(214, 218, 255, 0.07),
    0 44px 90px -30px rgba(4, 2, 16, 0.85),
    0 18px 40px -22px rgba(42, 42, 120, 0.7);
  transform-origin: 50% 0;
}

.card__glass::before {
  content: "";
  position: absolute;
  inset-inline: 14%;
  inset-block-start: -1px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(48, 208, 208, 0), var(--teal) 50%, rgba(48, 208, 208, 0));
  box-shadow: 0 0 22px 3px rgba(48, 208, 208, 0.42);
}

.card__glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
  pointer-events: none;
}

.card__body {
  position: relative;
  padding: clamp(1.5rem, 4.5vw, 2.5rem);
}

.card__head {
  margin-block-end: var(--s-4);
  transition: opacity 240ms var(--ease-out);
}

.card__title {
  margin: 0;
  font: 700 var(--step-2) / 1.2 var(--font-head);
  color: var(--white);
}

.card__title:focus {
  outline: none;
}

.card__title:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 6px;
  border-radius: 4px;
}

.card__hint {
  margin: 0.375rem 0 0;
  font-size: var(--step--1);
  color: var(--on-dark-3);
}

.test-badge {
  display: inline-flex;
  margin: 0.75rem 0 0;
  padding: 0.25rem 0.75rem;
  border-radius: var(--r-pill);
  background: rgba(255, 213, 138, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 213, 138, 0.35);
  color: var(--test);
  font-size: 0.75rem;
  font-weight: 600;
}

.test-badge[hidden] {
  display: none;
}

/* ---------- Form ---------- */
.form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-3);
  transition: opacity 240ms var(--ease-out);
}

.field {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.field[hidden] {
  display: none;
}

.field__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-block-end: 0.5rem;
  padding: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
  color: #ECEEF8;
}

legend.field__label {
  display: block;
}

html[lang="ar"] .field__label {
  font-size: 1.0625rem;
}

.field__label-icon {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  fill: none;
  stroke: var(--teal);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.input {
  display: block;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.8125rem 1rem;
  border: 1px solid rgba(214, 218, 255, 0.18);
  border-radius: var(--r-input);
  background: rgba(255, 255, 255, 0.045);
  color: var(--on-dark-1);
  font-size: 1rem;
  line-height: 1.5;
  caret-color: var(--teal);
  -webkit-appearance: none;
  appearance: none;
  transition:
    border-color var(--dur-ui) var(--ease-out),
    box-shadow var(--dur-ui) var(--ease-out),
    background-color var(--dur-ui) var(--ease-out);
}

.input::placeholder {
  color: #8F94B8;
  opacity: 1;
}

.input--area {
  min-height: 6.5rem;
  resize: vertical;
}

.input--latin {
  font-family: var(--font-body);
  direction: ltr;
  text-align: left;
}

@media (hover: hover) and (pointer: fine) {
  .input:hover {
    border-color: rgba(214, 218, 255, 0.32);
  }
}

.input:focus {
  outline: none;
  border-color: var(--teal);
  background: rgba(255, 255, 255, 0.07);
  box-shadow:
    0 0 0 4px rgba(48, 208, 208, 0.16),
    0 0 26px -6px rgba(48, 208, 208, 0.45);
}

.input[aria-invalid="true"] {
  border-color: var(--error);
}

.input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 4px rgba(255, 156, 156, 0.16);
}

.input:-webkit-autofill,
.input:-webkit-autofill:hover,
.input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--on-dark-1);
  caret-color: var(--teal);
  box-shadow: 0 0 0 1000px #1C1842 inset;
  transition: background-color 9999s ease 0s;
}

.field__help,
.field__error {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
}

html[lang="ar"] .field__help,
html[lang="ar"] .field__error {
  font-size: 0.9375rem;
  line-height: 1.7;
}

.field__help {
  color: var(--on-dark-3);
}

.field__error {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  color: var(--error);
  font-weight: 500;
}

.field__error[hidden] {
  display: none;
}

.field__error svg,
.form-status svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  margin-block-start: 0.12em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* Platform cards */
.platforms__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.625rem;
}

.constellation {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.constellation .c-glow,
.constellation .c-line {
  fill: none;
  stroke: var(--teal);
  stroke-linecap: round;
}

.constellation .c-glow {
  stroke-width: 5;
  opacity: 0.16;
}

.constellation .c-line {
  stroke-width: 1.3;
}

.platform {
  position: relative;
  display: block;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.platform__input,
.check__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.platform__face {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 6rem;
  padding: 0.875rem 0.5rem;
  border-radius: 0.875rem;
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 0 0 1px rgba(214, 218, 255, 0.16);
  overflow: hidden;
  transition:
    background-color var(--dur-ui) var(--ease-out),
    box-shadow var(--dur-ui) var(--ease-out),
    transform var(--dur-press) var(--ease-out);
}

.platform:active .platform__face {
  transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
  .platform:hover .platform__face {
    background: rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 0 0 1px rgba(214, 218, 255, 0.3);
  }
}

.platform__icon {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  transition: background-color var(--dur-ui) var(--ease-out);
}

.platform__icon > svg {
  width: 1.625rem;
  height: 1.625rem;
  fill: none;
  stroke: #C9CCE6;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition:
    stroke var(--dur-ui) var(--ease-out),
    opacity var(--dur-ui) var(--ease-out);
}

.platform__name {
  position: relative;
  z-index: 3;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  color: #ECEEF8;
}

html[lang="ar"] .platform__name {
  font-size: 0.9688rem;
}

.platform__tick {
  position: absolute;
  inset-block-end: -0.125rem;
  inset-inline-end: -0.375rem;
  display: grid;
  place-items: center;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 2px #17133A;
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity 180ms var(--ease-out),
    transform 260ms var(--ease-out);
}

.platform__tick svg {
  width: 0.75rem;
  height: 0.75rem;
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.platform__input:checked + .platform__face {
  background: linear-gradient(180deg, rgba(48, 208, 208, 0.17), rgba(48, 208, 208, 0.05));
  box-shadow:
    inset 0 0 0 1px rgba(48, 208, 208, 0.78),
    0 12px 28px -16px rgba(48, 208, 208, 0.7);
}

.platform__input:checked + .platform__face .platform__icon {
  background: radial-gradient(circle, rgba(48, 208, 208, 0.26), rgba(48, 208, 208, 0) 70%);
}

.platform__input:checked + .platform__face .platform__icon > svg {
  stroke: var(--teal);
}

.platform__input:checked + .platform__face .platform__tick {
  opacity: 1;
  transform: none;
}

.platform__input:focus-visible + .platform__face {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

/* Selecting isolates the chosen; the rest recede (but stay fully readable). */
.platforms.has-selection .platform__input:not(:checked) + .platform__face .platform__icon > svg {
  opacity: 0.55;
}

.platforms.is-invalid .platform__face {
  box-shadow: inset 0 0 0 1px rgba(255, 156, 156, 0.62);
}

.ripple {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(48, 208, 208, 0.34) 0%, rgba(48, 208, 208, 0.12) 45%, rgba(48, 208, 208, 0) 70%);
  pointer-events: none;
}

.burst {
  position: absolute;
  z-index: 4;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: #DFFFFF;
  box-shadow: 0 0 6px 1px rgba(48, 208, 208, 0.9);
  pointer-events: none;
}

/* Conditional handle fields */
.handles {
  display: grid;
  gap: var(--s-3);
}

.handles:not(.has-handles) {
  display: none;
}

/* Consent */
.consent__title {
  display: block;
  margin-block-end: 0.625rem;
  padding: 0;
  font: 700 1rem/1.3 var(--font-head);
  color: var(--white);
}

html[lang="ar"] .consent__title {
  font-size: 1.0625rem;
}

.check {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.875rem;
  padding: 0.875rem 1rem;
  border-radius: var(--r-input);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px rgba(214, 218, 255, 0.13);
  cursor: pointer;
  transition: box-shadow var(--dur-ui) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .check:hover {
    box-shadow: inset 0 0 0 1px rgba(214, 218, 255, 0.26);
  }
}

.check__box {
  display: grid;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  margin-block-start: 0.125rem;
  border-radius: 0.4rem;
  box-shadow: inset 0 0 0 1.5px rgba(214, 218, 255, 0.5);
  transition:
    background-color 180ms var(--ease-out),
    box-shadow 180ms var(--ease-out);
}

.check__box svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 260ms var(--ease-out);
}

.check__input:checked + .check__box {
  background: var(--teal);
  box-shadow: none;
}

.check__input:checked + .check__box svg {
  stroke-dashoffset: 0;
}

.check__input:focus-visible + .check__box {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

.check__text {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--on-dark-2);
}

html[lang="ar"] .check__text {
  font-size: 0.9688rem;
  line-height: 1.85;
}

.consent.is-invalid .check {
  box-shadow: inset 0 0 0 1px rgba(255, 156, 156, 0.62);
}

/* Submit. The Cloudflare human check sits above the button, always visible;
   its 65px height is reserved so it never shifts the layout when it loads. */
.actions {
  display: grid;
}

.turnstile {
  min-height: 65px;
  margin-block-end: 1rem;
}

.btn-primary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: 3.5rem;
  padding-block: 0.375rem;
  padding-inline: 1.5rem 0.375rem;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--teal-deep);
  color: var(--white);
  font: 600 1.0313rem/1 var(--font-body);
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 0 0 1px rgba(48, 208, 208, 0.7),
    0 16px 32px -14px rgba(14, 110, 114, 0.95);
  transition:
    background-color var(--dur-ui) var(--ease-out),
    box-shadow var(--dur-ui) var(--ease-out),
    transform var(--dur-press) var(--ease-out);
}

html[lang="ar"] .btn-primary {
  font-family: var(--font-ar);
  font-size: 1.125rem;
  font-weight: 700;
}

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover {
    background: var(--teal-deep-hover);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.24),
      0 0 0 1px rgba(48, 208, 208, 0.75),
      0 18px 40px -14px rgba(48, 208, 208, 0.55);
  }

  .btn-primary:hover .btn-primary__arrow {
    transform: translateX(2px);
  }
}

.btn-primary:active {
  transform: scale(0.98);
}

.btn-primary:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 4px;
}

.btn-primary[aria-disabled="true"] {
  cursor: progress;
}

.btn-primary__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.btn-primary__arrow {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition:
    opacity 160ms var(--ease-out),
    transform 260ms var(--ease-out);
}

.flip-rtl:dir(rtl) {
  scale: -1 1;
}

.btn-primary__spinner {
  position: absolute;
  inset: 0.625rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.28);
  opacity: 0;
  transition: opacity 160ms var(--ease-out);
}

.btn-primary__spinner span {
  position: absolute;
  inset: 0;
  animation: orbit-spin 0.9s linear infinite;
}

.btn-primary__spinner span:dir(rtl) {
  animation-direction: reverse;
}

.btn-primary__spinner span::before {
  content: "";
  position: absolute;
  top: -2.5px;
  left: 50%;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
}

.btn-primary.is-loading .btn-primary__spinner {
  opacity: 1;
}

.btn-primary:not(.is-loading) .btn-primary__spinner span {
  animation-play-state: paused;
}

.btn-primary.is-loading .btn-primary__arrow {
  opacity: 0;
}

.form-status {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  font-weight: 500;
  color: var(--error);
}

html[lang="ar"] .form-status {
  font-size: 0.9688rem;
  line-height: 1.75;
}

.form-status:empty {
  display: none;
}

.form-status:not(:empty) {
  margin-block-start: 0.875rem;
}

.privacy {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--on-dark-3);
}

html[lang="ar"] .privacy {
  font-size: 0.9063rem;
  line-height: 1.75;
}

.privacy__icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  margin-block-start: 0.05rem;
  fill: none;
  stroke: var(--teal);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Test mode panel (localhost only) */
.test-panel {
  min-width: 0;
  padding: 1rem;
  border-radius: var(--r-input);
  background: rgba(0, 0, 0, 0.32);
  box-shadow: inset 0 0 0 1px rgba(255, 213, 138, 0.35);
}

.test-panel[hidden] {
  display: none;
}

.test-panel__title {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  color: var(--test);
}

.test-panel__code {
  max-height: 22rem;
  margin: 0 0 0.875rem;
  overflow: auto;
  font: 0.75rem/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #E6E8F5;
  text-align: left;
  white-space: pre;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding-inline: 1rem;
  border: 0;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.09);
  color: var(--white);
  font: 500 0.875rem/1 var(--font-body);
  cursor: pointer;
}

.btn-ghost svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

/* Success: the form becomes a constellation that settles into a check */
.card.is-success .form,
.card.is-success .card__head {
  opacity: 0;
  pointer-events: none;
}

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

.success[hidden] {
  display: none;
}

.success__inner {
  position: sticky;
  inset-block-start: calc(var(--bar-h) + 8vh);
  display: grid;
  justify-items: center;
  gap: 1rem;
  padding: clamp(2.5rem, 8vh, 4.5rem) clamp(1.5rem, 4vw, 2.5rem);
  text-align: center;
}

.success__sky {
  width: min(100%, 17.5rem);
  height: auto;
  overflow: visible;
}

.success__dust circle {
  fill: rgba(222, 236, 255, 0.55);
}

.success__line,
.success__glow {
  fill: none;
  stroke: var(--teal);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.success__line {
  stroke-width: 1.6;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.success__glow {
  stroke-width: 9;
  opacity: 0.14;
}

.cs-star {
  transform-box: fill-box;
  transform-origin: center;
}

.cs-star path {
  fill: #F2FFFF;
}

.cs-star__halo {
  fill: rgba(48, 208, 208, 0.2);
}

.success__title {
  max-width: 24ch;
  margin: 0.5rem 0 0;
  font: 700 var(--step-2) / 1.3 var(--font-head);
  color: var(--white);
  text-wrap: balance;
}

html[lang="ar"] .success__title {
  line-height: 1.55;
}

.success__title:focus {
  outline: none;
}

.success__note {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--on-dark-2);
}

.success__note a {
  color: var(--teal);
  text-underline-offset: 3px;
}

/* ---------- Horizons ---------- */
.horizon {
  position: absolute;
  inset-inline: 0;
  inset-block-end: -1px;
  z-index: 1;
  width: 100%;
  height: var(--hz);
  pointer-events: none;
}

.horizon__line,
.horizon__haze {
  fill: none;
}

.horizon__line {
  stroke-width: 1.5px;
}

.horizon__haze {
  stroke-width: 12px;
  opacity: 0.16;
}

.horizon--hero .horizon__fill {
  fill: var(--tint);
}

.horizon--night .horizon__fill {
  fill: var(--ink);
}

/* ---------- Sections on the day side ---------- */
.audit,
.steps {
  position: relative;
  background: var(--tint);
  color: var(--on-light-1);
}

.audit {
  padding-block: calc(var(--overlap) + clamp(3.5rem, 8vw, 5.5rem)) clamp(4rem, 8vw, 6.5rem);
}

.section-head {
  display: grid;
  gap: 0.75rem;
  margin-block-end: clamp(2.5rem, 5vw, 3.5rem);
}

.section-title {
  margin: 0;
  font: 800 var(--step-4) / 1.08 var(--font-head);
  color: var(--ink);
  text-wrap: balance;
}

html[lang="en"] .section-title {
  letter-spacing: -0.02em;
}

html[lang="ar"] .section-title {
  line-height: 1.3;
}

.section-lead {
  max-width: 38rem;
  margin: 0;
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--on-light-2);
}

html[lang="ar"] .section-lead {
  line-height: 1.8;
}

.audit__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.audit-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.75rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, 0.84);
  box-shadow:
    0 1px 2px rgba(42, 42, 120, 0.06),
    0 20px 44px -24px rgba(42, 42, 120, 0.34);
  overflow: hidden;
}

.audit-card__icon {
  width: 3.75rem;
  height: 3.75rem;
  margin-block-end: 0.5rem;
  overflow: visible;
}

.audit-card__icon .dial {
  fill: none;
  stroke: rgba(42, 42, 120, 0.22);
  stroke-width: 1;
}

.audit-card__icon .ticks {
  fill: none;
  stroke: rgba(42, 42, 120, 0.4);
  stroke-width: 1.1;
  stroke-linecap: round;
}

.audit-card__icon .glyph {
  fill: none;
  stroke: var(--indigo);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.audit-card__icon .glyph--accent {
  stroke: var(--teal-deep);
}

.audit-card__icon .glyph--wide {
  stroke-width: 3.4;
  stroke-linecap: butt;
}

.audit-card__icon .glyph--soft {
  stroke: rgba(42, 42, 120, 0.4);
}

.audit-card__icon .glyph--dots {
  stroke-width: 2.8;
}

.audit-card__title {
  margin: 0;
  font: 700 var(--step-1) / 1.3 var(--font-head);
  color: var(--ink);
  text-wrap: balance;
}

html[lang="ar"] .audit-card__title {
  line-height: 1.5;
}

.audit-card__text {
  margin: 0;
  font-size: 0.9688rem;
  line-height: 1.6;
  color: var(--on-light-2);
}

html[lang="ar"] .audit-card__text {
  font-size: 1.0313rem;
  line-height: 1.8;
}

.audit-card--plan {
  background: linear-gradient(155deg, #2E2E82 0%, #1B1752 58%, #110D33 100%);
  box-shadow: 0 22px 48px -24px rgba(26, 22, 80, 0.85);
  color: var(--white);
}

.audit-card--plan::before {
  content: "";
  position: absolute;
  inset-block-start: -38%;
  inset-inline-end: -46%;
  width: 120%;
  height: 78%;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(48, 208, 208, 0.22);
  transform: rotate(-16deg);
  pointer-events: none;
}

.audit-card--plan::after {
  content: "";
  position: absolute;
  inset-block-start: 1.75rem;
  inset-inline-end: 2rem;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #E8FDFD;
  box-shadow:
    -48px 30px 0 -0.5px rgba(232, 253, 253, 0.6),
    -18px 64px 0 -1px rgba(232, 253, 253, 0.45),
    0 0 8px 1px rgba(48, 208, 208, 0.7);
  pointer-events: none;
}

.audit-card--plan .audit-card__title {
  color: var(--white);
}

.audit-card--plan .audit-card__text {
  color: #CBCEE8;
}

.audit-card--plan .audit-card__icon .dial {
  stroke: rgba(214, 218, 255, 0.26);
}

.audit-card--plan .audit-card__icon .ticks {
  stroke: rgba(214, 218, 255, 0.42);
}

.audit-card--plan .audit-card__icon .glyph {
  stroke: #E9EBF8;
}

.audit-card--plan .audit-card__icon .glyph--accent {
  stroke: var(--teal);
}

.audit__note {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  max-width: 44rem;
  margin: 1.75rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--on-light-2);
}

.audit__note svg {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  margin-block-start: 0.15rem;
  fill: none;
  stroke: var(--teal-deep);
  stroke-width: 1.7;
  stroke-linecap: round;
}

@media (min-width: 40em) {
  .audit__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .audit {
    padding-block-start: clamp(3.5rem, 5vw, 4.5rem);
  }

  .audit__head {
    max-width: calc(100% - var(--card-w) - var(--hero-gap));
    min-height: calc(var(--overlap) - clamp(3.5rem, 5vw, 4.5rem));
    align-content: start;
  }

  .audit__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.25rem;
  }

  .audit-card:nth-child(1) { grid-column: 1 / 5; grid-row: 1; }
  .audit-card:nth-child(2) { grid-column: 5 / 9; grid-row: 1; }
  .audit-card:nth-child(3) { grid-column: 1 / 5; grid-row: 2; }
  .audit-card:nth-child(4) { grid-column: 5 / 9; grid-row: 2; }
  .audit-card:nth-child(5) { grid-column: 9 / 13; grid-row: 1; }
  .audit-card:nth-child(6) { grid-column: 9 / 13; grid-row: 2; }
}

/* Line-drawn icon reveal (only when JS has enabled motion) */
html.has-motion .draw .dial,
html.has-motion .draw .glyph:not(.glyph--dots) {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
}

html.has-motion .draw .ticks,
html.has-motion .draw .glyph--dots {
  opacity: 0;
}

html.has-motion .is-in .draw .dial {
  stroke-dashoffset: 0;
  opacity: 1;
  transition:
    stroke-dashoffset 1.1s var(--ease-out) var(--d, 0ms),
    opacity 200ms linear var(--d, 0ms);
}

html.has-motion .is-in .draw .ticks {
  opacity: 1;
  transition: opacity 600ms var(--ease-out) calc(var(--d, 0ms) + 300ms);
}

html.has-motion .is-in .draw .glyph:not(.glyph--dots) {
  stroke-dashoffset: 0;
  opacity: 1;
  transition:
    stroke-dashoffset 900ms var(--ease-out) calc(var(--d, 0ms) + 260ms),
    opacity 160ms linear calc(var(--d, 0ms) + 260ms);
}

html.has-motion .is-in .draw .glyph--dots {
  opacity: 1;
  transition: opacity 400ms var(--ease-out) calc(var(--d, 0ms) + 700ms);
}

/* ---------- How it works ---------- */
.steps {
  padding-block: clamp(2rem, 5vw, 3.5rem) calc(var(--hz) + clamp(4rem, 8vw, 6rem));
}

.steps__track {
  position: relative;
}

.steps__orbit {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.steps__ghost {
  fill: none;
  stroke: rgba(42, 42, 120, 0.26);
  stroke-width: 1.25;
  stroke-dasharray: 1.5 7;
  stroke-linecap: round;
}

.steps__line {
  fill: none;
  stroke: var(--teal-deep);
  stroke-width: 2;
  stroke-linecap: round;
}

.steps__dot {
  opacity: 0;
  transition: opacity 300ms var(--ease-out);
}

.steps__dot.is-on {
  opacity: 1;
}

.steps__dot-halo {
  fill: rgba(48, 208, 208, 0.28);
}

.steps__dot-core {
  fill: var(--teal);
  stroke: var(--white);
  stroke-width: 1.5;
}

.steps__list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 1.25rem;
}

.step:nth-child(2) {
  margin-inline-start: 1.75rem;
}

.step__node {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--white);
  box-shadow:
    inset 0 0 0 1.5px rgba(42, 42, 120, 0.22),
    0 8px 20px -10px rgba(42, 42, 120, 0.4);
  font: 700 1.1875rem/1 var(--font-head);
  color: var(--indigo);
  transition:
    background-color 420ms var(--ease-out),
    color 420ms var(--ease-out),
    box-shadow 420ms var(--ease-out);
}

.step__node span {
  padding-block-start: 0.12em;
}

.step.is-lit .step__node {
  background: var(--indigo);
  color: var(--white);
  box-shadow:
    0 0 0 6px rgba(48, 208, 208, 0.2),
    0 12px 28px -10px rgba(42, 42, 120, 0.75);
}

.step__body {
  padding-block-start: 0.5rem;
}

.step__title {
  margin: 0 0 0.5rem;
  font: 700 1.375rem/1.3 var(--font-head);
  color: var(--ink);
}

html[lang="ar"] .step__title {
  font-size: 1.4375rem;
  line-height: 1.5;
}

.step__text {
  max-width: 22rem;
  margin: 0;
  color: var(--on-light-2);
}

@media (min-width: 56em) {
  .steps__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 4vw, 3.5rem);
  }

  .step {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }

  .step:nth-child(1),
  .step:nth-child(3) {
    margin-block-start: 3.5rem;
  }

  .step:nth-child(2) {
    margin-inline-start: 0;
  }

  .step__body {
    padding-block-start: 0;
  }
}

.link-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  min-height: 3.25rem;
  margin-block-start: clamp(3rem, 6vw, 4rem);
  padding-block: 0.25rem;
  padding-inline: 1.375rem 0.25rem;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--white);
  font: 600 1rem/1 var(--font-body);
  text-decoration: none;
  box-shadow: 0 14px 30px -16px rgba(10, 7, 17, 0.7);
  transition:
    background-color var(--dur-ui) var(--ease-out),
    transform var(--dur-press) var(--ease-out);
}

html[lang="ar"] .link-cta {
  font-family: var(--font-ar);
  font-weight: 700;
  font-size: 1.0625rem;
}

@media (hover: hover) and (pointer: fine) {
  .link-cta:hover {
    background: var(--indigo);
  }
}

.link-cta:active {
  transform: scale(0.98);
}

.link-cta__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}

.link-cta__icon svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: var(--teal);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Footer ---------- */
.footer {
  position: relative;
  padding-block: clamp(2.5rem, 5vw, 3.5rem) clamp(2rem, 4vw, 3rem);
  background: var(--ink);
  color: var(--on-dark-2);
}

.banner {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-panel);
  overflow: hidden;
  background:
    radial-gradient(60% 90% at 20% 30%, rgba(48, 208, 208, 0.12), transparent 70%),
    radial-gradient(70% 100% at 85% 80%, rgba(91, 91, 170, 0.45), transparent 72%),
    linear-gradient(135deg, var(--ink) 0%, #16124A 55%, var(--indigo) 100%);
  box-shadow: 0 0 0 1px rgba(214, 218, 255, 0.1);
}

.banner__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition: opacity 400ms var(--ease-out);
}

.banner__stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: #E8EEFF;
}

.banner__lockup {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 3vw, 1.75rem);
  padding: 1rem;
}

.banner__type {
  display: grid;
  justify-items: start;
  gap: 0.625rem;
}

.banner__wordmark {
  display: inline-grid;
  gap: 0.5rem;
}

.banner__word {
  font: 800 clamp(3rem, 10vw, 6.75rem) / 0.86 var(--font-head);
  letter-spacing: 0.035em;
  color: var(--white);
  padding-block-start: 0.1em;
}

.banner__rule {
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background: var(--teal);
  box-shadow: 0 0 18px rgba(48, 208, 208, 0.6);
}

.banner__tag {
  font-size: clamp(0.875rem, 1.8vw, 1.3125rem);
  line-height: 1.3;
  color: #AEB8DC;
}

.banner__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--ink);
  opacity: 0;
  transition: opacity 400ms var(--ease-out);
}

.banner.has-img .banner__img {
  opacity: 1;
}

.banner.has-img .banner__fallback {
  opacity: 0;
}

@media (min-width: 40em) {
  .banner {
    aspect-ratio: 3 / 1;
  }
}

.footer__grid {
  display: grid;
  gap: 2rem;
  margin-block-start: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 48em) {
  .footer__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: start;
  }
}

.footer__place {
  margin: 0;
  font: 700 var(--step-1) / 1.35 var(--font-head);
  color: var(--white);
}

html[lang="ar"] .footer__place {
  line-height: 1.6;
}

.footer__tagline {
  margin: 0.5rem 0 0;
  color: var(--on-dark-2);
}

.footer__name {
  max-width: 30rem;
  margin: 1.25rem 0 0;
  font-size: 0.875rem;
  color: var(--on-dark-3);
}

.footer__contact {
  display: grid;
  margin: 0;
}

.contact-row {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  padding-block: 0.25rem;
}

.contact-row + .contact-row {
  box-shadow: 0 -1px 0 rgba(214, 218, 255, 0.08);
}

.contact-row dt {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--on-dark-3);
}

.contact-row dt svg {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  fill: none;
  stroke: var(--teal);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-row dd {
  margin: 0;
  padding-block: 0.75rem;
  color: var(--white);
}

.contact-row dd a {
  display: inline-block;
  padding-block: 0.25rem;
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: rgba(48, 208, 208, 0);
  text-underline-offset: 4px;
  transition: text-decoration-color var(--dur-ui) var(--ease-out);
}

.contact-row dd a:hover,
.contact-row dd a:focus-visible {
  text-decoration-color: var(--teal);
}

.footer__legal {
  margin: 2.5rem 0 0;
  padding-block-start: 1.5rem;
  box-shadow: 0 -1px 0 rgba(214, 218, 255, 0.08);
  font-size: 0.8125rem;
  color: var(--on-dark-3);
}

/* ---------- Desktop hero: copy beside the card ---------- */
@media (min-width: 64em) {
  .hero {
    padding-block-start: calc(var(--bar-h) + 7rem);
  }

  .hero__grid {
    grid-template-columns: minmax(0, 1fr) var(--card-w);
    column-gap: var(--hero-gap);
    align-items: start;
  }

  .hero__copy {
    position: sticky;
    inset-block-start: calc(var(--bar-h) + 6.5rem);
    padding-block-start: 0.5rem;
  }
}

/* ---------- Section reveals ---------- */
html.has-motion .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--dur-reveal) var(--ease-out) var(--d, 0ms),
    transform var(--dur-reveal) var(--ease-out) var(--d, 0ms);
}

html.has-motion .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ---------- Accessibility preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-property: opacity, color, background-color, border-color, box-shadow, text-decoration-color !important;
    transition-duration: 150ms !important;
    transition-delay: 0ms !important;
  }

  html.i18n-pending body {
    animation-delay: 1.5s !important;
  }

  html.has-motion .reveal {
    transform: none;
  }

  html.has-motion .draw .dial,
  html.has-motion .draw .glyph:not(.glyph--dots) {
    stroke-dashoffset: 0;
  }

  .btn-primary.is-loading .btn-primary__spinner span {
    animation: spinner-breathe 1.6s ease-in-out infinite !important;
  }
}

@keyframes spinner-breathe {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .topbar::before {
    background: var(--ink);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .card__glass {
    background: #17133A;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (forced-colors: active) {
  .platform__input:checked + .platform__face,
  .check__input:checked + .check__box {
    outline: 3px solid Highlight;
  }

  .btn-primary,
  .link-cta {
    border: 2px solid ButtonText;
  }
}

/* ---------- Not found page ---------- */
.lost {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--s-6) var(--gutter);
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(42, 42, 120, 0.85), rgba(42, 42, 120, 0) 70%),
    linear-gradient(180deg, var(--ink), var(--night-3));
  color: var(--on-dark-1);
  text-align: center;
}

.lost__inner {
  display: grid;
  justify-items: center;
  gap: 1rem;
  max-width: 32rem;
}

.lost__title {
  margin: 0.5rem 0 0;
  font: 800 var(--step-3) / 1.15 var(--font-head);
  color: var(--white);
}

.lost__text {
  margin: 0;
  color: var(--on-dark-2);
}

.lost__ar {
  font-family: var(--font-ar);
  font-size: 1.0625rem;
  line-height: 1.8;
}

.lost .link-cta {
  margin-block-start: 1rem;
  background: var(--teal-deep);
}

.lost__mark {
  width: 4.5rem;
  height: auto;
}