@font-face {
  font-family: "IRANSansX";
  src: url("./fonts/IRANSansX-Regular.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IRANSansX";
  src: url("./fonts/IRANSansX-Bold.woff") format("woff");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "IRANYekanX";
  src: url("./fonts/IRANYekanX-Regular.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IRANYekanX";
  src: url("./fonts/IRANYekanX-Bold.woff") format("woff");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --ink: #020813;
  --ink-blue: #020b1a;
  --navy-950: #031025;
  --navy-900: #06162f;
  --navy-850: #081d3b;
  --navy-800: #0a2548;
  --navy-700: #0d3767;
  --blue-700: #075bc7;
  --blue-600: #087cf0;
  --blue-500: #1b9cff;
  --blue-400: #46bbff;
  --blue-300: #79d4ff;
  --ice: #dff5ff;
  --text: #f4fbff;
  --text-soft: #c5d9ea;
  --text-muted: #8da9c2;
  --line: rgb(105 190 255 / 0.19);
  --line-strong: rgb(108 204 255 / 0.42);
  --glass: rgb(7 29 57 / 0.68);
  --glass-strong: rgb(7 31 62 / 0.88);
  --accent: var(--blue-500);
  --accent-bright: var(--blue-300);
  --accent-deep: var(--blue-700);
  --shadow: 0 30px 90px rgb(0 7 25 / 0.42);
  --shadow-blue: 0 28px 80px rgb(0 85 192 / 0.22);
  --radius-panel: 1.5rem;
  --radius-control: 0.9rem;
  --radius-button: 999px;
  --header-height: 4.5rem;
  --container: min(88rem, calc(100vw - 3rem));
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --z-base: 0;
  --z-content: 2;
  --z-header: 30;
  --z-menu: 25;
  --z-skip: 50;
}

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

html {
  scroll-behavior: smooth;
  background: var(--ink);
}

body {
  margin: 0;
  min-width: 20rem;
  overflow-x: clip;
  background:
    radial-gradient(circle at 80% 8%, rgb(8 113 224 / 0.19), transparent 26rem),
    radial-gradient(circle at 10% 42%, rgb(32 154 255 / 0.1), transparent 34rem),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-blue) 100%);
  color: var(--text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
}

html[lang="fa"] body {
  font-family: "IRANSansX", Tahoma, "Segoe UI", Arial, sans-serif;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: 40;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent calc(8.333vw - 1px),
      rgb(124 211 255 / 0.025) calc(8.333vw - 1px),
      rgb(124 211 255 / 0.025) 8.333vw
    );
  content: "";
  pointer-events: none;
}

body::after {
  position: fixed;
  inset: 0;
  z-index: 41;
  background-image:
    radial-gradient(circle at 20% 20%, rgb(255 255 255 / 0.13) 0 0.55px, transparent 0.8px),
    radial-gradient(circle at 80% 60%, rgb(89 185 255 / 0.1) 0 0.6px, transparent 0.9px);
  background-position: 0 0, 0.7rem 0.9rem;
  background-size: 1rem 1rem, 1.35rem 1.35rem;
  content: "";
  opacity: 0.12;
  pointer-events: none;
}

body.menu-open {
  overflow: hidden;
}

::selection {
  background: var(--blue-500);
  color: var(--ink);
}

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

img {
  height: auto;
}

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

button,
a {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

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

button {
  border: 0;
}

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

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

h1,
h2,
h3 {
  font-family: "Arial Narrow", "Segoe UI", sans-serif;
  line-height: 1.06;
}

html[lang="fa"] h1,
html[lang="fa"] h2,
html[lang="fa"] h3 {
  font-family: "IRANYekanX", Tahoma, "Segoe UI", Arial, sans-serif;
  font-weight: 400;
}

:focus-visible {
  outline: 3px solid var(--blue-300);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  inset-block-start: 0.75rem;
  inset-inline-start: 0.75rem;
  z-index: var(--z-skip);
  padding: 0.65rem 1rem;
  border-radius: var(--radius-control);
  background: var(--ice);
  color: var(--ink);
  font-weight: 700;
  transform: translateY(-160%);
  transition: transform 180ms var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0);
}

.container {
  width: var(--container);
  margin-inline: auto;
}

.section {
  position: relative;
  padding-block: clamp(6.5rem, 10vw, 10rem);
}

section[id] {
  scroll-margin-block-start: calc(var(--header-height) + 1rem);
}

.header-sentinel {
  position: absolute;
  inset: 0 auto auto 0;
  width: 1px;
  height: 1px;
}

/* Header */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  height: var(--header-height);
  padding-right: env(safe-area-inset-right);
  padding-left: env(safe-area-inset-left);
  border-bottom: 1px solid transparent;
  background: linear-gradient(180deg, rgb(2 8 19 / 0.74), transparent);
  transition:
    background-color 220ms var(--ease-out),
    border-color 220ms var(--ease-out),
    box-shadow 220ms var(--ease-out);
}

.site-header.is-scrolled {
  border-color: var(--line);
  background: rgb(3 14 31 / 0.88);
  box-shadow: 0 12px 45px rgb(0 8 24 / 0.28);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

.route-progress {
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  overflow: hidden;
  background: rgb(87 176 244 / 0.08);
}

.route-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--blue-700), var(--blue-300));
  box-shadow: 0 0 20px rgb(52 178 255 / 0.7);
  transform: scaleX(0);
  transform-origin: left center;
}

[dir="rtl"] .route-progress span {
  transform-origin: right center;
}

.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 100%;
  gap: 1.5rem;
}

.header-actions {
  display: flex;
  align-items: center;
  justify-self: start;
  gap: 0.65rem;
}

[dir="rtl"] .header-actions {
  justify-self: end;
}

.site-nav {
  grid-column: 2;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2.2rem);
}

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--text-soft);
  font-size: 0.84rem;
  white-space: nowrap;
  transition:
    color 180ms var(--ease-out),
    transform 180ms var(--ease-out);
}

.nav-link::after {
  position: absolute;
  inset: auto 0 0.2rem;
  height: 2px;
  background: linear-gradient(90deg, var(--blue-600), var(--blue-300));
  content: "";
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 220ms var(--ease-out);
}

.nav-link.is-active {
  color: var(--blue-300);
}

.nav-link.is-active::after {
  transform: scaleX(1);
}

.brand {
  grid-column: 3;
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 0.75rem;
  min-width: max-content;
}

[dir="rtl"] .brand {
  grid-column: 1;
  justify-self: start;
}

.brand-mark {
  position: relative;
  display: grid;
  width: 2.65rem;
  height: 2.65rem;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 0.75rem;
  background:
    linear-gradient(145deg, rgb(68 183 255 / 0.24), transparent 54%),
    rgb(7 35 70 / 0.85);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.15),
    0 10px 32px rgb(0 101 226 / 0.18);
  color: var(--ice);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.09em;
}

.brand-mark::after {
  position: absolute;
  inset: -80% 35% -80% auto;
  width: 28%;
  background: rgb(255 255 255 / 0.18);
  content: "";
  transform: rotate(24deg) translateX(-220%);
}

.brand-name {
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
}

.language-link,
.menu-button {
  display: inline-grid;
  min-height: 2.65rem;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-button);
  background: rgb(5 24 49 / 0.66);
  color: var(--text-soft);
  cursor: pointer;
  transition:
    color 180ms var(--ease-out),
    border-color 180ms var(--ease-out),
    background-color 180ms var(--ease-out),
    transform 140ms var(--ease-out);
}

.language-link {
  min-width: 2.65rem;
  padding-inline: 0.8rem;
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.menu-button {
  display: none;
  padding-inline: 1.1rem;
  font-size: 0.78rem;
  font-weight: 700;
}

/* Hero */

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 100dvh;
  overflow: clip;
  align-items: center;
  background: var(--ink);
}

.hero-media,
.hero-media::after,
.hero-shade {
  position: absolute;
  inset: 0;
}

.hero-media {
  z-index: -4;
  overflow: hidden;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.18) contrast(1.06);
  transform-origin: center;
}

.hero-media::after {
  background:
    linear-gradient(90deg, rgb(1 8 19 / 0.18), rgb(0 22 58 / 0.04) 46%, rgb(0 9 24 / 0.48)),
    linear-gradient(180deg, rgb(1 8 18 / 0.22), transparent 42%, var(--ink) 100%);
  content: "";
}

[dir="rtl"] .hero-media::after {
  background:
    linear-gradient(270deg, rgb(1 8 19 / 0.18), rgb(0 22 58 / 0.04) 46%, rgb(0 9 24 / 0.48)),
    linear-gradient(180deg, rgb(1 8 18 / 0.22), transparent 42%, var(--ink) 100%);
}

.hero-shade {
  z-index: -3;
  background:
    radial-gradient(circle at 20% 47%, rgb(15 144 255 / 0.22), transparent 28rem),
    linear-gradient(90deg, rgb(1 8 19 / 0.94) 0%, rgb(2 14 32 / 0.7) 38%, transparent 70%);
}

[dir="rtl"] .hero-shade {
  background:
    radial-gradient(circle at 80% 47%, rgb(15 144 255 / 0.22), transparent 28rem),
    linear-gradient(270deg, rgb(1 8 19 / 0.94) 0%, rgb(2 14 32 / 0.7) 38%, transparent 70%);
}

.hero::before {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgb(70 176 255 / 0.05) 1px, transparent 1px),
    linear-gradient(rgb(70 176 255 / 0.05) 1px, transparent 1px);
  background-size: 6rem 6rem;
  content: "";
  -webkit-mask-image: linear-gradient(90deg, black, transparent 68%);
  mask-image: linear-gradient(90deg, black, transparent 68%);
}

[dir="rtl"] .hero::before {
  -webkit-mask-image: linear-gradient(270deg, black, transparent 68%);
  mask-image: linear-gradient(270deg, black, transparent 68%);
}

.hero::after {
  position: absolute;
  inset: -30% auto -30% 42%;
  z-index: -1;
  width: 13rem;
  background: linear-gradient(90deg, transparent, rgb(92 202 255 / 0.09), transparent);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: rotate(15deg) translateX(-60vw);
}

.hero-stage {
  position: relative;
  z-index: var(--z-content);
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(19rem, 5fr);
  align-items: center;
  min-height: 100dvh;
  gap: clamp(2rem, 5vw, 6rem);
  padding-block: calc(var(--header-height) + 1rem) 5rem;
}

[dir="rtl"] .hero-stage {
  grid-template-columns: minmax(19rem, 5fr) minmax(0, 7fr);
}

.hero-copy {
  position: relative;
  max-width: 46rem;
  padding-inline-start: 1.75rem;
}

.hero-copy::before {
  position: absolute;
  inset-block: 0.4rem;
  inset-inline-start: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--blue-300), rgb(27 156 255 / 0.08));
  box-shadow: 0 0 22px rgb(62 184 255 / 0.75);
  content: "";
  transform-origin: top;
}

.kicker,
.panel-label {
  color: var(--blue-300);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

html[lang="fa"] .kicker,
html[lang="fa"] .panel-label {
  letter-spacing: 0;
  text-transform: none;
}

.hero h1 {
  max-width: 14ch;
  margin-top: 1.15rem;
  color: var(--text);
  font-size: clamp(3.1rem, 5.45vw, 5.5rem);
  font-weight: 650;
  letter-spacing: -0.065em;
  line-height: 0.98;
  text-wrap: balance;
  text-shadow: 0 14px 40px rgb(0 7 24 / 0.35);
}

html[lang="fa"] .hero h1 {
  max-width: 13.5ch;
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 1.12;
}

.hero-lead {
  max-width: 34rem;
  margin-top: 1.5rem;
  color: var(--text-soft);
  font-size: clamp(1rem, 1.45vw, 1.22rem);
  line-height: 1.85;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2rem;
}

.button {
  position: relative;
  display: inline-flex;
  min-height: 3.35rem;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0.85rem 1.55rem;
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  touch-action: manipulation;
  transition:
    transform 140ms var(--ease-out),
    color 180ms var(--ease-out),
    border-color 180ms var(--ease-out),
    background-color 180ms var(--ease-out),
    box-shadow 180ms var(--ease-out);
}

.button::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 18%, rgb(255 255 255 / 0.24), transparent 72%);
  content: "";
  transform: translateX(-130%);
  transition: transform 480ms var(--ease-out);
}

[dir="rtl"] .button::before {
  transform: translateX(130%);
}

.button-primary {
  background: linear-gradient(135deg, var(--blue-600), var(--blue-400));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.26),
    0 12px 35px rgb(0 118 244 / 0.32);
  color: #001226;
}

.button-quiet {
  border-color: var(--line-strong);
  background: rgb(4 24 50 / 0.58);
  color: var(--text);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.button:active,
.language-link:active,
.menu-button:active,
.route-option:active {
  transform: scale(0.97);
}

.button:disabled {
  cursor: not-allowed;
  filter: saturate(0.62);
  opacity: 0.64;
}

.switch-signature {
  position: relative;
  align-self: center;
  width: min(39vw, 33rem);
  justify-self: end;
  padding: 1.15rem;
  border: 1px solid rgb(117 211 255 / 0.21);
  border-radius: 50%;
  background:
    radial-gradient(circle at 46% 48%, rgb(17 123 236 / 0.18), transparent 44%),
    rgb(3 20 43 / 0.18);
  box-shadow:
    inset 0 0 70px rgb(32 154 255 / 0.08),
    0 30px 100px rgb(0 17 48 / 0.38);
  aspect-ratio: 1;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

[dir="rtl"] .switch-signature {
  justify-self: start;
}

.switch-signature::before,
.switch-signature::after {
  position: absolute;
  border: 1px solid rgb(82 190 255 / 0.16);
  border-radius: inherit;
  content: "";
  pointer-events: none;
}

.switch-signature::before {
  inset: 8%;
}

.switch-signature::after {
  inset: 18%;
  border-style: dashed;
}

.switch-signature svg {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.switch-rail {
  fill: none;
  stroke: rgb(143 202 237 / 0.28);
  stroke-linecap: round;
  stroke-width: 4;
}

.switch-rail-live {
  stroke: var(--blue-300);
  stroke-width: 6;
  filter: drop-shadow(0 0 7px rgb(64 188 255 / 0.75));
}

.switch-tie {
  fill: none;
  stroke: rgb(189 229 255 / 0.54);
  stroke-width: 3;
}

.switch-node {
  fill: var(--navy-900);
  stroke: rgb(158 220 255 / 0.7);
  stroke-width: 3;
  transform-box: fill-box;
  transform-origin: center;
}

.switch-node-live {
  fill: var(--blue-300);
  stroke: var(--ice);
  filter: drop-shadow(0 0 10px rgb(67 191 255 / 0.8));
}

.hero-baseline {
  position: absolute;
  inset: auto 0 0;
  z-index: 3;
  height: 4px;
  overflow: hidden;
  background: rgb(96 185 255 / 0.08);
}

.hero-baseline-active {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--blue-500), var(--blue-300));
  box-shadow: 0 0 30px var(--blue-500);
  transform: scaleX(0.18);
  transform-origin: left center;
}

[dir="rtl"] .hero-baseline-active {
  transform-origin: right center;
}

/* Launch dock */

.launch-dock {
  position: relative;
  z-index: 6;
  margin-top: -3.8rem;
}

.launch-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(15rem, 0.85fr) minmax(0, 1.15fr);
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-panel);
  background:
    linear-gradient(120deg, rgb(11 53 98 / 0.94), rgb(4 24 51 / 0.92) 58%),
    var(--glass-strong);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.14),
    var(--shadow-blue);
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
}

.launch-panel::before {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 10%, rgb(51 177 255 / 0.2), transparent 24rem),
    linear-gradient(90deg, transparent 49.8%, rgb(99 193 255 / 0.12) 50%, transparent 50.2%);
  content: "";
  pointer-events: none;
}

.launch-panel::after {
  position: absolute;
  inset: 0 auto 0 -12rem;
  width: 11rem;
  background: linear-gradient(90deg, transparent, rgb(113 210 255 / 0.1), transparent);
  content: "";
  pointer-events: none;
  transform: skewX(-14deg);
}

.launch-copy {
  position: relative;
  z-index: 1;
  padding: clamp(1.8rem, 3vw, 3rem);
}

.launch-copy h2 {
  margin-top: 0.6rem;
  font-size: clamp(1.7rem, 2.5vw, 2.7rem);
}

.launch-status {
  max-width: 34rem;
  margin-top: 0.9rem;
  color: var(--text-soft);
  font-size: 0.9rem;
}

.launch-timezone {
  margin-top: 1rem;
  color: var(--text-muted);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 0.72rem;
  direction: ltr;
  letter-spacing: 0.06em;
}

.countdown-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-inline-start: 1px solid var(--line);
}

.countdown-cell {
  position: relative;
  display: grid;
  min-height: 11.5rem;
  align-content: center;
  justify-items: center;
  border-inline-end: 1px solid var(--line);
}

.countdown-cell:last-child {
  border-inline-end: 0;
}

.countdown-cell::after {
  position: absolute;
  inset: auto 20% 0;
  height: 2px;
  background: var(--blue-400);
  box-shadow: 0 0 18px var(--blue-400);
  content: "";
  opacity: 0.35;
  transform: scaleX(0.35);
}

.countdown-value {
  color: var(--text);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: clamp(2rem, 4vw, 4.2rem);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.07em;
  line-height: 1;
}

.countdown-label {
  margin-top: 0.7rem;
  color: var(--text-muted);
  font-size: 0.72rem;
}

/* Shared headings */

.section-heading {
  max-width: 50rem;
}

.section-title {
  max-width: 15ch;
  margin-top: 0.9rem;
  font-size: clamp(2.55rem, 5.2vw, 5.8rem);
  font-weight: 620;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

html[lang="fa"] .section-title {
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1.22;
}

.section-lead {
  max-width: 42rem;
  margin-top: 1.35rem;
  color: var(--text-soft);
  font-size: clamp(0.98rem, 1.25vw, 1.08rem);
}

.briefing-intro > .section-title:first-child,
.khorasan-copy > .section-title:first-child,
.sulfur-copy > .section-title:first-child,
.control-section .section-heading > .section-title:first-child,
.inquiry-copy > .section-title:first-child {
  margin-top: 0;
}

/* Services */

.service-section {
  overflow: clip;
  padding-top: clamp(9rem, 13vw, 14rem);
}

.service-section::before {
  position: absolute;
  inset: 9rem -20vw auto;
  height: 45rem;
  background: radial-gradient(ellipse at center, rgb(0 112 234 / 0.19), transparent 66%);
  content: "";
  pointer-events: none;
}

.service-section .section-heading {
  position: relative;
  z-index: 2;
}

.service-ledger {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(13rem, auto);
  gap: 1rem;
  margin-top: clamp(3rem, 6vw, 6rem);
  perspective: 1100px;
}

.ledger-item {
  position: relative;
  display: grid;
  grid-column: span 4;
  min-height: 17rem;
  align-content: space-between;
  overflow: hidden;
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background:
    linear-gradient(145deg, rgb(20 82 146 / 0.34), transparent 52%),
    rgb(5 25 53 / 0.76);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.08),
    0 22px 60px rgb(0 8 25 / 0.22);
  transform-style: preserve-3d;
}

.ledger-item:nth-child(1) {
  grid-column: span 7;
  min-height: 20rem;
  background:
    radial-gradient(circle at 90% 10%, rgb(65 186 255 / 0.24), transparent 18rem),
    linear-gradient(145deg, rgb(8 81 166 / 0.68), rgb(4 27 59 / 0.9));
}

.ledger-item:nth-child(2) {
  grid-column: span 5;
  min-height: 20rem;
  background:
    linear-gradient(165deg, rgb(23 114 205 / 0.48), transparent 52%),
    rgb(5 26 55 / 0.82);
}

.ledger-item:nth-child(3) {
  grid-column: span 5;
}

.ledger-item:nth-child(4) {
  grid-column: span 7;
  background:
    radial-gradient(circle at 15% 100%, rgb(26 157 255 / 0.2), transparent 22rem),
    rgb(6 28 58 / 0.78);
}

.ledger-item:nth-child(5) {
  grid-column: span 8;
  background:
    linear-gradient(120deg, rgb(8 74 155 / 0.66), rgb(5 26 53 / 0.82) 62%);
}

.ledger-item:nth-child(6) {
  grid-column: span 4;
}

.ledger-item::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(120deg, rgb(255 255 255 / 0.06), transparent 32%),
    linear-gradient(90deg, transparent 49.8%, rgb(111 198 255 / 0.08) 50%, transparent 50.2%);
  content: "";
  pointer-events: none;
}

.ledger-item::after {
  position: absolute;
  inset: auto -12% -42% auto;
  width: 12rem;
  border: 1px solid rgb(92 196 255 / 0.22);
  border-radius: 50%;
  content: "";
  aspect-ratio: 1;
  pointer-events: none;
}

.ledger-number {
  position: relative;
  z-index: 2;
  justify-self: end;
  color: rgb(132 211 255 / 0.42);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: clamp(2.5rem, 5vw, 5.5rem);
  font-weight: 700;
  letter-spacing: -0.08em;
  line-height: 0.78;
}

[dir="rtl"] .ledger-number {
  justify-self: start;
}

.ledger-item > div {
  position: relative;
  z-index: 2;
  max-width: 34rem;
}

.ledger-item h3 {
  font-size: clamp(1.35rem, 2.1vw, 2.15rem);
}

.ledger-item p {
  margin-top: 0.8rem;
  color: var(--text-soft);
  font-size: 0.9rem;
}

.motion-spotlight {
  position: absolute;
  inset: 0 auto auto 0;
  z-index: 1;
  width: 16rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(64 183 255 / 0.24), transparent 66%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, -50%, 0);
  aspect-ratio: 1;
}

/* Operation statement */

.operation-band {
  isolation: isolate;
  min-height: 90dvh;
  overflow: clip;
  background:
    radial-gradient(circle at 82% 28%, rgb(97 205 255 / 0.2), transparent 28rem),
    linear-gradient(125deg, #06449d 0%, #063375 36%, #051b3c 76%, #031329 100%);
}

.operation-band::before {
  position: absolute;
  inset: -20% auto -20% 51%;
  z-index: -1;
  width: 4px;
  background: rgb(124 217 255 / 0.3);
  box-shadow:
    3rem 0 0 rgb(124 217 255 / 0.08),
    6rem 0 0 rgb(124 217 255 / 0.05);
  content: "";
  transform: rotate(17deg);
}

.operation-band::after {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 5.9rem,
      rgb(123 209 255 / 0.06) 6rem
    );
  content: "";
}

.operation-layout {
  display: grid;
  grid-template-columns: minmax(16rem, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  min-height: 72dvh;
  gap: clamp(3rem, 8vw, 9rem);
}

.operation-year {
  position: relative;
  display: grid;
  align-content: center;
}

.operation-year span {
  color: var(--blue-300);
  font-size: 0.75rem;
  font-weight: 700;
}

.operation-year strong {
  color: var(--text);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: clamp(6rem, 15vw, 13.5rem);
  font-weight: 700;
  letter-spacing: -0.12em;
  line-height: 0.8;
  text-shadow: 0 30px 80px rgb(0 15 48 / 0.42);
}

.operation-statement {
  position: relative;
  z-index: 2;
  max-width: 46rem;
}

.operation-statement h2 {
  font-size: clamp(2.5rem, 5.2vw, 5.8rem);
  font-weight: 580;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

html[lang="fa"] .operation-statement h2 {
  font-weight: 400;
  line-height: 1.22;
}

.operation-statement p {
  max-width: 36rem;
  margin-top: 1.4rem;
  color: var(--text-soft);
}

.operation-switch {
  position: absolute;
  inset: auto 0 8%;
  display: grid;
  gap: 0.65rem;
  opacity: 0.5;
}

.operation-switch span {
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--blue-300), transparent);
  transform: scaleX(0.28);
}

.operation-switch span:nth-child(2) {
  transform: scaleX(0.48);
}

.operation-switch span:nth-child(3) {
  transform: scaleX(0.7);
}

/* Briefing */

.briefing-section {
  overflow: visible;
  background:
    radial-gradient(circle at 15% 26%, rgb(0 119 243 / 0.14), transparent 30rem),
    var(--ink-blue);
}

.briefing-layout {
  display: grid;
  grid-template-columns: minmax(17rem, 0.72fr) minmax(0, 1.28fr);
  align-items: start;
  gap: clamp(3rem, 8vw, 9rem);
}

.briefing-intro {
  position: sticky;
  top: calc(var(--header-height) + 2.5rem);
}

.briefing-intro .section-title {
  font-size: clamp(2.6rem, 4.8vw, 5.2rem);
}

.briefing-groups {
  display: grid;
  gap: 14vh;
  padding-bottom: 12vh;
}

.briefing-group {
  position: sticky;
  top: calc(var(--header-height) + 2.5rem);
  min-height: 25rem;
  overflow: hidden;
  padding: clamp(1.7rem, 3vw, 3rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-panel);
  background:
    radial-gradient(circle at 86% 12%, rgb(57 179 255 / 0.18), transparent 20rem),
    linear-gradient(145deg, rgb(10 53 101 / 0.96), rgb(4 25 54 / 0.96));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.12),
    0 36px 100px rgb(0 8 29 / 0.38);
}

.briefing-group:nth-child(2) {
  top: calc(var(--header-height) + 4rem);
  background:
    radial-gradient(circle at 12% 86%, rgb(34 157 255 / 0.18), transparent 22rem),
    linear-gradient(145deg, rgb(8 44 88 / 0.98), rgb(4 23 50 / 0.98));
}

.briefing-group:nth-child(3) {
  top: calc(var(--header-height) + 5.5rem);
  background:
    radial-gradient(circle at 78% 8%, rgb(70 194 255 / 0.2), transparent 19rem),
    linear-gradient(145deg, rgb(8 51 101 / 0.98), rgb(4 23 50 / 0.98));
}

.briefing-group::after {
  position: absolute;
  inset: auto -10% -34% auto;
  width: 19rem;
  border: 1px solid rgb(90 197 255 / 0.18);
  border-radius: 50%;
  content: "";
  aspect-ratio: 1;
}

.briefing-group h3 {
  position: relative;
  z-index: 1;
  max-width: 12ch;
  color: var(--blue-300);
  font-size: clamp(2rem, 4.2vw, 4.4rem);
}

.briefing-pair {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
  margin-top: clamp(4rem, 8vw, 7rem);
}

.briefing-pair > div {
  padding-top: 1.15rem;
  border-top: 1px solid var(--line);
}

.briefing-pair span {
  color: var(--text);
  font-weight: 700;
}

.briefing-pair p {
  margin-top: 0.7rem;
  color: var(--text-muted);
  font-size: 0.88rem;
}

/* Khorasan media story */

.khorasan-section {
  overflow: clip;
  padding-block: clamp(8rem, 13vw, 13rem);
  background:
    radial-gradient(circle at 92% 40%, rgb(10 128 240 / 0.16), transparent 35rem),
    var(--ink);
}

.khorasan-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
  min-height: 48rem;
}

.khorasan-media {
  position: relative;
  grid-column: 1 / span 8;
  grid-row: 1;
  min-height: 46rem;
  overflow: hidden;
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow);
}

[dir="rtl"] .khorasan-media {
  grid-column: 5 / -1;
}

.khorasan-media::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 52%, rgb(2 11 26 / 0.72)),
    linear-gradient(180deg, transparent 52%, rgb(2 10 22 / 0.5));
  content: "";
}

[dir="rtl"] .khorasan-media::after {
  background:
    linear-gradient(270deg, transparent 52%, rgb(2 11 26 / 0.72)),
    linear-gradient(180deg, transparent 52%, rgb(2 10 22 / 0.5));
}

.khorasan-media picture,
.khorasan-media img {
  width: 100%;
  height: 100%;
}

.khorasan-media img {
  position: absolute;
  inset: 0;
  object-fit: cover;
}

.khorasan-copy {
  position: relative;
  z-index: 3;
  grid-column: 7 / -1;
  grid-row: 1;
  padding: clamp(2rem, 4vw, 4rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-panel);
  background:
    linear-gradient(145deg, rgb(15 67 123 / 0.72), rgb(4 22 47 / 0.9)),
    var(--glass-strong);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.14),
    var(--shadow-blue);
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
}

[dir="rtl"] .khorasan-copy {
  grid-column: 1 / span 6;
}

.handoff-list {
  display: grid;
  gap: 1.15rem;
  margin-top: 2rem;
}

.handoff-list > div {
  display: grid;
  grid-template-columns: minmax(5rem, 0.35fr) 1fr;
  gap: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.handoff-list dt {
  color: var(--blue-300);
  font-weight: 700;
}

.handoff-list dd {
  color: var(--text-muted);
  font-size: 0.86rem;
}

/* Sulfur */

.sulfur-section {
  min-height: 58rem;
  overflow: clip;
  background:
    radial-gradient(circle at 70% 20%, rgb(14 129 235 / 0.2), transparent 32rem),
    linear-gradient(180deg, #051733, #020b1a);
}

.sulfur-section::before {
  position: absolute;
  inset: 12% -20% auto;
  height: 35rem;
  border: 1px solid rgb(65 181 255 / 0.1);
  border-radius: 50%;
  content: "";
  transform: rotate(-8deg);
}

.sulfur-mark {
  position: absolute;
  inset-block-start: 2%;
  inset-inline-start: -0.04em;
  color: transparent;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: min(42vw, 42rem);
  font-weight: 900;
  line-height: 1;
  opacity: 0.12;
  -webkit-text-stroke: 2px var(--blue-400);
  pointer-events: none;
}

.sulfur-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(18rem, 0.74fr) minmax(0, 1.26fr);
  align-items: center;
  min-height: 54rem;
  gap: clamp(2rem, 6vw, 7rem);
}

.sulfur-copy {
  position: relative;
  z-index: 3;
}

.sulfur-copy .section-title {
  font-size: clamp(2.7rem, 5.1vw, 5.5rem);
}

.material-flow {
  position: relative;
  display: grid;
  gap: 1rem;
  margin-top: 2.25rem;
  padding-inline-start: 1.5rem;
}

.material-flow::before {
  position: absolute;
  inset-block: 0.65rem;
  inset-inline-start: 0.28rem;
  width: 2px;
  background: linear-gradient(180deg, var(--blue-300), rgb(27 156 255 / 0.1));
  content: "";
  transform-origin: top;
}

.material-flow li {
  position: relative;
  color: var(--text);
  font-weight: 700;
}

.material-flow li::before {
  position: absolute;
  inset-block-start: 0.55em;
  inset-inline-start: -1.48rem;
  width: 0.62rem;
  border: 2px solid var(--blue-300);
  border-radius: 50%;
  background: var(--navy-900);
  box-shadow: 0 0 14px rgb(54 184 255 / 0.55);
  content: "";
  aspect-ratio: 1;
}

.material-note {
  margin-top: 2rem;
  padding-inline-start: 1rem;
  border-inline-start: 1px solid var(--line-strong);
  color: var(--text-muted);
  font-size: 0.8rem;
}

.sulfur-media {
  position: relative;
  min-height: 40rem;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow);
}

.sulfur-media::before {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, rgb(2 12 26 / 0.08), rgb(1 8 19 / 0.52)),
    linear-gradient(90deg, rgb(1 12 29 / 0.58), transparent 42%);
  content: "";
  pointer-events: none;
}

[dir="rtl"] .sulfur-media::before {
  background:
    linear-gradient(180deg, rgb(2 12 26 / 0.08), rgb(1 8 19 / 0.52)),
    linear-gradient(270deg, rgb(1 12 29 / 0.58), transparent 42%);
}

.sulfur-media::after {
  position: absolute;
  inset: 1rem;
  z-index: 3;
  border: 1px solid rgb(175 225 255 / 0.2);
  border-radius: calc(var(--radius-panel) - 0.55rem);
  content: "";
  pointer-events: none;
}

.sulfur-media picture,
.sulfur-media img {
  width: 100%;
  height: 100%;
}

.sulfur-media img {
  position: absolute;
  inset: 0;
  object-fit: cover;
}

/* Corridor console */

.corridor-section {
  isolation: isolate;
  overflow: clip;
  background:
    radial-gradient(circle at 50% 40%, rgb(7 112 229 / 0.25), transparent 34rem),
    linear-gradient(180deg, #020b1a, #04152e 55%, #020b1a);
}

.corridor-section::before {
  position: absolute;
  inset: 18% 0 auto;
  z-index: -1;
  height: 38rem;
  background:
    linear-gradient(90deg, transparent 49.9%, rgb(83 185 255 / 0.09) 50%, transparent 50.1%),
    linear-gradient(transparent 49.9%, rgb(83 185 255 / 0.09) 50%, transparent 50.1%);
  background-size: 7rem 7rem;
  content: "";
  transform: perspective(500px) rotateX(62deg) scale(1.45);
}

.corridor-heading {
  margin-inline: auto;
  text-align: center;
}

.corridor-heading .section-title,
.corridor-heading .section-lead {
  margin-inline: auto;
}

.corridor-console {
  position: relative;
  display: grid;
  grid-template-columns: minmax(17rem, 0.42fr) minmax(0, 1fr);
  min-height: 44rem;
  margin-top: clamp(3rem, 6vw, 6rem);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-panel);
  background:
    radial-gradient(circle at 82% 18%, rgb(48 178 255 / 0.15), transparent 30rem),
    rgb(3 21 45 / 0.88);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.12),
    var(--shadow-blue);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.route-selector {
  position: relative;
  z-index: 3;
  display: grid;
  align-content: center;
  gap: 0.65rem;
  padding: clamp(1.2rem, 3vw, 2.4rem);
  border-inline-end: 1px solid var(--line);
  background: rgb(3 18 39 / 0.5);
}

.route-option {
  position: relative;
  display: grid;
  gap: 0.35rem;
  width: 100%;
  overflow: hidden;
  padding: 1.2rem 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  text-align: start;
  touch-action: manipulation;
  transition:
    transform 140ms var(--ease-out),
    color 180ms var(--ease-out),
    border-color 180ms var(--ease-out),
    background-color 180ms var(--ease-out);
}

.route-option::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--blue-300), var(--blue-600));
  content: "";
  opacity: 0;
  transform: scaleY(0.4);
  transition:
    opacity 180ms var(--ease-out),
    transform 220ms var(--ease-out);
}

[dir="rtl"] .route-option::before {
  inset: 0 0 0 auto;
}

.route-option.is-active {
  border-color: var(--line-strong);
  background: linear-gradient(90deg, rgb(24 128 230 / 0.2), rgb(7 36 70 / 0.46));
  color: var(--text);
}

[dir="rtl"] .route-option.is-active {
  background: linear-gradient(270deg, rgb(24 128 230 / 0.2), rgb(7 36 70 / 0.46));
}

.route-option.is-active::before {
  opacity: 1;
  transform: scaleY(1);
}

.route-option span {
  position: relative;
  z-index: 1;
  font-size: 0.88rem;
  font-weight: 750;
}

.route-option small {
  position: relative;
  z-index: 1;
  color: var(--text-muted);
  font-size: 0.75rem;
}

.route-map {
  position: relative;
  display: grid;
  min-width: 0;
  place-items: center;
  overflow: hidden;
  padding: clamp(1rem, 4vw, 3.5rem);
}

.route-map::before {
  position: absolute;
  width: min(70%, 30rem);
  border: 1px solid rgb(64 184 255 / 0.14);
  border-radius: 50%;
  background: radial-gradient(circle, rgb(15 122 233 / 0.13), transparent 66%);
  content: "";
  aspect-ratio: 1;
  pointer-events: none;
}

.route-map svg {
  position: relative;
  z-index: 2;
  width: 100%;
  max-height: 34rem;
  overflow: visible;
}

.route-map figcaption {
  position: absolute;
  inset: auto 2rem 1.4rem;
  z-index: 3;
  color: var(--text-muted);
  font-size: 0.72rem;
  text-align: center;
}

.map-rail,
.map-route {
  fill: none;
  stroke-linecap: round;
}

.map-rail {
  stroke: rgb(115 185 229 / 0.2);
  stroke-width: 4;
}

.map-route {
  stroke: var(--blue-300);
  stroke-width: 6;
  opacity: 0;
  filter: drop-shadow(0 0 8px rgb(55 182 255 / 0.65));
  transition: opacity 180ms var(--ease-out);
}

.corridor-console[data-route="afghanistan"] .map-route-afghanistan,
.corridor-console[data-route="central-asia"] .map-route-central,
.corridor-console[data-route="handoff"] .map-route-handoff {
  opacity: 1;
}

.corridor-console[data-route="handoff"] .map-route-handoff {
  stroke-dasharray: 14 12;
}

.map-node circle {
  fill: var(--navy-900);
  stroke: rgb(140 216 255 / 0.72);
  stroke-width: 4;
}

.map-node text {
  fill: var(--text-muted);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.map-cargo {
  fill: var(--ice);
  stroke: var(--blue-400);
  stroke-width: 4;
  filter: drop-shadow(0 0 10px var(--blue-300));
  pointer-events: none;
}

/* Control field and process */

.control-section {
  overflow: clip;
  background:
    radial-gradient(circle at 18% 50%, rgb(11 123 239 / 0.15), transparent 32rem),
    var(--ink);
}

.control-field {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(11rem, auto);
  gap: 1rem;
  margin-top: clamp(3rem, 6vw, 6rem);
}

.control-feature,
.control-note {
  position: relative;
  overflow: hidden;
  padding: clamp(1.5rem, 2.8vw, 2.6rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: rgb(5 28 58 / 0.72);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07);
}

.control-feature {
  display: grid;
  grid-column: span 7;
  grid-row: span 2;
  align-content: end;
  min-height: 31rem;
  background:
    radial-gradient(circle at 75% 24%, rgb(71 194 255 / 0.3), transparent 18rem),
    linear-gradient(145deg, #0750a8, #06306a 56%, #061b3a);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.16),
    var(--shadow-blue);
}

.control-feature::before {
  position: absolute;
  inset: 10% auto auto 10%;
  width: 54%;
  border: 1px solid rgb(135 219 255 / 0.28);
  border-radius: 50%;
  content: "";
  aspect-ratio: 1;
}

.control-feature::after {
  position: absolute;
  inset: 16% auto auto 18%;
  width: 42%;
  border: 1px dashed rgb(135 219 255 / 0.18);
  border-radius: 50%;
  content: "";
  aspect-ratio: 1;
}

.control-note {
  grid-column: span 5;
  min-height: 15rem;
  background:
    linear-gradient(145deg, rgb(9 58 113 / 0.82), rgb(4 25 54 / 0.86));
}

.control-note:nth-child(3) {
  background:
    radial-gradient(circle at 90% 10%, rgb(45 176 255 / 0.18), transparent 13rem),
    rgb(5 27 57 / 0.84);
}

.control-note:nth-child(4),
.control-note:nth-child(5) {
  grid-column: span 6;
}

.control-feature h3,
.control-note h3,
.control-feature p,
.control-note p {
  position: relative;
  z-index: 2;
}

.control-feature h3 {
  max-width: 11ch;
  font-size: clamp(2.3rem, 4.5vw, 4.9rem);
}

.control-note h3 {
  font-size: clamp(1.35rem, 2vw, 2rem);
}

.control-feature p,
.control-note p {
  max-width: 35rem;
  margin-top: 0.8rem;
  color: var(--text-soft);
}

.process-spine {
  position: relative;
  margin-top: clamp(7rem, 12vw, 12rem);
  padding: clamp(2rem, 4vw, 4rem);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-panel);
  background:
    linear-gradient(125deg, rgb(8 55 109 / 0.84), rgb(4 24 52 / 0.88)),
    var(--glass);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.1),
    var(--shadow-blue);
}

.process-spine > h2 {
  max-width: 18ch;
  font-size: clamp(2rem, 4vw, 4.2rem);
}

.process-spine ol {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
  margin-top: clamp(3rem, 6vw, 5rem);
}

.process-spine ol::before {
  position: absolute;
  inset: 1.1rem 0 auto;
  height: 2px;
  background: rgb(84 182 246 / 0.18);
  content: "";
}

.process-rail-fill {
  position: absolute;
  inset: 1.1rem 0 auto;
  z-index: 2;
  height: 2px;
  background: linear-gradient(90deg, var(--blue-600), var(--blue-300));
  box-shadow: 0 0 15px rgb(43 170 255 / 0.65);
  transform: scaleX(0);
  transform-origin: left center;
}

[dir="rtl"] .process-rail-fill {
  transform-origin: right center;
}

.process-marker {
  position: absolute;
  inset-block-start: calc(1.1rem - 0.38rem);
  inset-inline-start: 0;
  z-index: 3;
  width: 0.85rem;
  border: 2px solid var(--ice);
  border-radius: 50%;
  background: var(--blue-400);
  box-shadow: 0 0 18px var(--blue-300);
  aspect-ratio: 1;
}

.process-spine li {
  position: relative;
  z-index: 3;
  padding-top: 3rem;
}

.process-spine li::before {
  position: absolute;
  inset-block-start: 0.62rem;
  inset-inline-start: 0;
  width: 1rem;
  border: 3px solid var(--navy-800);
  border-radius: 50%;
  background: var(--blue-300);
  box-shadow: 0 0 0 1px var(--blue-300);
  content: "";
  aspect-ratio: 1;
}

.process-spine strong,
.process-spine span {
  display: block;
}

.process-spine strong {
  color: var(--text);
}

.process-spine span {
  margin-top: 0.5rem;
  color: var(--text-muted);
  font-size: 0.8rem;
}

/* Inquiry */

.inquiry-section {
  overflow: clip;
  padding-bottom: clamp(8rem, 12vw, 12rem);
  background:
    radial-gradient(circle at 78% 30%, rgb(37 164 255 / 0.2), transparent 32rem),
    linear-gradient(180deg, var(--ink), #041631);
}

.inquiry-section::before {
  position: absolute;
  inset: auto -12% -30%;
  height: 45rem;
  border: 1px solid rgb(74 187 255 / 0.13);
  border-radius: 50%;
  content: "";
  transform: rotate(6deg);
}

.inquiry-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(18rem, 0.68fr) minmax(0, 1.32fr);
  align-items: start;
  gap: clamp(3rem, 7vw, 8rem);
}

.inquiry-copy {
  position: sticky;
  top: calc(var(--header-height) + 2.5rem);
}

.inquiry-copy .section-title {
  font-size: clamp(2.7rem, 5vw, 5.4rem);
}

.availability-note {
  margin-top: 1.6rem;
  padding: 1rem 1.1rem;
  border-inline-start: 2px solid var(--blue-400);
  background: rgb(15 73 132 / 0.2);
  color: var(--text-muted);
  font-size: 0.8rem;
}

.inquiry-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem;
  padding: clamp(1.5rem, 3.5vw, 3.5rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-panel);
  background:
    radial-gradient(circle at 92% 4%, rgb(40 170 255 / 0.14), transparent 20rem),
    rgb(5 27 57 / 0.78);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.12),
    var(--shadow-blue);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.field {
  display: grid;
  gap: 0.55rem;
}

.field-full,
.form-actions {
  grid-column: 1 / -1;
}

.field label {
  color: var(--text-soft);
  font-size: 0.78rem;
  font-weight: 700;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 3.55rem;
  border: 1px solid rgb(117 196 244 / 0.24);
  border-radius: var(--radius-control);
  outline: none;
  background: rgb(1 14 32 / 0.62);
  color: var(--text);
  transition:
    border-color 180ms var(--ease-out),
    background-color 180ms var(--ease-out),
    box-shadow 180ms var(--ease-out),
    transform 180ms var(--ease-out);
}

.field input,
.field textarea {
  padding: 0.85rem 1rem;
}

.field select {
  padding: 0.75rem 1rem;
}

.field textarea {
  min-height: 9rem;
  resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
  color: #82a3bd;
  opacity: 1;
  text-overflow: ellipsis;
}

.field select option {
  background: var(--navy-900);
  color: var(--text);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--blue-300);
  background: rgb(3 23 51 / 0.88);
  box-shadow:
    0 0 0 3px rgb(45 169 255 / 0.15),
    0 12px 35px rgb(0 91 205 / 0.14);
  transform: translateY(-1px);
}

.field-help {
  color: var(--text-muted);
  font-size: 0.72rem;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
}

.form-state {
  color: var(--text-muted);
  font-size: 0.75rem;
}

/* Footer */

.site-footer {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  background:
    radial-gradient(circle at 50% 120%, rgb(17 127 233 / 0.24), transparent 32rem),
    #020a17;
}

.site-footer::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 49.9%, rgb(82 184 255 / 0.07) 50%, transparent 50.1%);
  background-size: 8rem 100%;
  content: "";
  pointer-events: none;
}

.footer-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 3rem;
  padding-block: clamp(4rem, 7vw, 7rem);
}

.footer-brand {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.footer-brand p {
  max-width: 18rem;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.footer-links {
  display: grid;
  gap: 0.7rem;
}

.footer-links a {
  position: relative;
  color: var(--text-soft);
  font-size: 0.84rem;
  transition:
    color 180ms var(--ease-out),
    transform 180ms var(--ease-out);
}

.footer-meta {
  justify-self: end;
  max-width: 22rem;
  color: var(--text-muted);
  font-size: 0.75rem;
  text-align: end;
}

.footer-meta p + p {
  margin-top: 0.65rem;
}

/* Motion helpers */

.motion-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.motion-word > span {
  display: inline-block;
}

.motion-mask {
  overflow: hidden;
}

/* Responsive */

@media (max-width: 75rem) {
  :root {
    --container: min(100% - 2rem, 72rem);
  }

  .brand-name {
    display: none;
  }

  .hero h1 {
    font-size: clamp(3.2rem, 6.3vw, 5.5rem);
  }

  .switch-signature {
    width: min(40vw, 28rem);
  }

  .section-title {
    font-size: clamp(2.6rem, 5.5vw, 4.8rem);
  }
}

@media (max-width: 64rem) {
  :root {
    --header-height: 4.25rem;
  }

  .header-inner {
    grid-template-columns: 1fr auto;
  }

  .header-actions {
    grid-column: 1;
    justify-self: start;
  }

  [dir="rtl"] .header-actions {
    grid-column: 2;
    justify-self: end;
  }

  .brand,
  [dir="rtl"] .brand {
    grid-column: 2;
    justify-self: end;
  }

  [dir="rtl"] .brand {
    grid-column: 1;
    justify-self: start;
  }

  .menu-button {
    display: inline-grid;
  }

  .site-nav {
    position: fixed;
    inset: var(--header-height) 0 0;
    z-index: var(--z-menu);
    display: grid;
    grid-column: auto;
    width: 100%;
    height: calc(100dvh - var(--header-height));
    align-items: center;
    overscroll-behavior: contain;
    padding: 1rem;
    border-bottom: 1px solid var(--line);
    background:
      radial-gradient(circle at 80% 10%, rgb(31 154 255 / 0.18), transparent 20rem),
      rgb(3 16 35 / 0.97);
    box-shadow: 0 30px 80px rgb(0 5 18 / 0.48);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-1rem);
    visibility: hidden;
    transition:
      opacity 200ms var(--ease-out),
      transform 220ms var(--ease-out),
      visibility 0ms linear 220ms;
  }

  .site-nav[data-open="true"] {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    visibility: visible;
    transition:
      opacity 180ms var(--ease-out),
      transform 220ms var(--ease-out),
      visibility 0ms linear 0ms;
  }

  .keyboard-menu-toggle .site-nav {
    transition: none;
  }

  .nav-list {
    display: grid;
    width: var(--container);
    margin-inline: auto;
    gap: 0;
  }

  .nav-link {
    width: 100%;
    min-height: clamp(4rem, 10vw, 6rem);
    border-bottom: 1px solid var(--line);
    font-size: clamp(1.25rem, 4vw, 2.4rem);
  }

  .hero-stage,
  [dir="rtl"] .hero-stage {
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
  }

  .hero-copy {
    max-width: 40rem;
  }

  .switch-signature {
    position: absolute;
    inset-block-start: 23%;
    inset-inline-end: -6rem;
    z-index: -1;
    width: 26rem;
    opacity: 0.6;
  }

  [dir="rtl"] .switch-signature {
    inset-inline: -6rem auto;
  }

  .launch-panel {
    grid-template-columns: 1fr;
  }

  .countdown-grid {
    border-block-start: 1px solid var(--line);
    border-inline-start: 0;
  }

  .countdown-cell {
    min-height: 8rem;
  }

  .briefing-layout,
  .sulfur-layout,
  .inquiry-layout {
    grid-template-columns: 1fr;
  }

  .briefing-intro,
  .inquiry-copy {
    position: relative;
    top: auto;
  }

  .briefing-groups {
    gap: 2rem;
    padding-bottom: 0;
  }

  .briefing-group,
  .briefing-group:nth-child(2),
  .briefing-group:nth-child(3) {
    position: relative;
    top: auto;
  }

  .khorasan-grid {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .khorasan-media,
  [dir="rtl"] .khorasan-media {
    grid-column: 1;
    grid-row: 1;
    min-height: 38rem;
  }

  .khorasan-copy,
  [dir="rtl"] .khorasan-copy {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    width: min(92%, 38rem);
    margin: 0 1rem 1rem;
  }

  [dir="rtl"] .khorasan-copy {
    justify-self: end;
  }

  .corridor-console {
    grid-template-columns: 1fr;
  }

  .route-selector {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-block-end: 1px solid var(--line);
    border-inline-end: 0;
  }

  .route-option {
    min-width: 0;
  }

  .route-map {
    min-height: 31rem;
  }

  .process-spine ol {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 2rem;
  }

  .process-spine ol::before,
  .process-rail-fill,
  .process-marker {
    display: none;
  }

  .process-spine li {
    padding-top: 2rem;
  }

  .process-spine li::before {
    inset-block-start: 0;
  }
}

@media (max-width: 47.99rem) {
  :root {
    --container: min(100% - 1.25rem, 45rem);
    --radius-panel: 1.15rem;
    --radius-control: 0.78rem;
  }

  body::before {
    display: none;
  }

  .section {
    padding-block: 5.5rem;
  }

  .header-inner {
    gap: 0.65rem;
  }

  .language-link,
  .menu-button {
    min-height: 2.45rem;
  }

  .menu-button {
    padding-inline: 0.85rem;
  }

  .brand-mark {
    width: 2.4rem;
    height: 2.4rem;
  }

  .hero {
    min-height: max(43rem, 100dvh);
  }

  .hero-stage,
  [dir="rtl"] .hero-stage {
    min-height: max(43rem, 100dvh);
    align-content: end;
    padding-block: calc(var(--header-height) + 1.75rem) 5.5rem;
  }

  .hero-media img {
    object-position: 58% center;
  }

  .hero-shade,
  [dir="rtl"] .hero-shade {
    background:
      linear-gradient(180deg, rgb(1 8 18 / 0.12), rgb(2 11 27 / 0.34) 36%, rgb(1 8 20 / 0.94) 80%),
      radial-gradient(circle at 20% 34%, rgb(19 138 255 / 0.17), transparent 22rem);
  }

  .hero::before {
    opacity: 0.45;
  }

  .hero-copy {
    align-self: end;
    max-width: none;
    padding-inline-start: 1rem;
  }

  .hero h1,
  html[lang="fa"] .hero h1 {
    max-width: 13.5ch;
    font-size: clamp(2.75rem, 13vw, 4.2rem);
  }

  .hero-lead {
    max-width: 31rem;
    font-size: 0.93rem;
    line-height: 1.75;
  }

  .hero-actions {
    gap: 0.55rem;
    margin-top: 1.45rem;
  }

  .button {
    min-height: 3.05rem;
    padding-inline: 1.15rem;
    font-size: 0.78rem;
  }

  .switch-signature {
    inset-block-start: 18%;
    inset-inline-end: -7rem;
    width: 22rem;
    opacity: 0.46;
  }

  [dir="rtl"] .switch-signature {
    inset-inline: -7rem auto;
  }

  .launch-dock {
    margin-top: -2.25rem;
  }

  .launch-copy {
    padding: 1.35rem;
  }

  .launch-copy h2 {
    font-size: 1.55rem;
  }

  .launch-status {
    font-size: 0.78rem;
  }

  .countdown-cell {
    min-height: 6.4rem;
  }

  .countdown-value {
    font-size: clamp(1.5rem, 8vw, 2.4rem);
  }

  .section-title,
  .briefing-intro .section-title,
  .sulfur-copy .section-title,
  .inquiry-copy .section-title {
    max-width: 17ch;
    font-size: clamp(2.2rem, 10vw, 3.6rem);
  }

  .service-section {
    padding-top: 7.5rem;
  }

  .service-ledger {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    margin-top: 2.5rem;
  }

  .ledger-item,
  .ledger-item:nth-child(1),
  .ledger-item:nth-child(2),
  .ledger-item:nth-child(3),
  .ledger-item:nth-child(4),
  .ledger-item:nth-child(5),
  .ledger-item:nth-child(6) {
    grid-column: 1;
    min-height: 15rem;
  }

  .ledger-item h3 {
    font-size: 1.45rem;
  }

  .operation-band {
    min-height: auto;
  }

  .operation-layout {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 3rem;
  }

  .operation-year strong {
    font-size: clamp(5.5rem, 28vw, 8rem);
  }

  .operation-statement h2 {
    font-size: clamp(2.25rem, 10vw, 3.55rem);
  }

  .briefing-pair {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 3rem;
  }

  .briefing-group {
    min-height: auto;
  }

  .khorasan-media,
  [dir="rtl"] .khorasan-media {
    min-height: 34rem;
  }

  .khorasan-copy,
  [dir="rtl"] .khorasan-copy {
    position: relative;
    grid-row: 2;
    width: 100%;
    margin: -4rem 0 0;
  }

  .handoff-list > div {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

  .sulfur-section {
    min-height: auto;
  }

  .sulfur-layout {
    min-height: auto;
  }

  .sulfur-media {
    min-height: 28rem;
  }

  .sulfur-mark {
    font-size: 82vw;
  }

  .corridor-heading {
    text-align: start;
  }

  .corridor-heading .section-title,
  .corridor-heading .section-lead {
    margin-inline: 0;
  }

  .corridor-console {
    min-height: auto;
  }

  .route-selector {
    grid-template-columns: 1fr;
    gap: 0.45rem;
    padding: 0.85rem;
  }

  .route-option {
    padding: 0.9rem;
  }

  .route-map {
    min-height: 24rem;
    padding: 1rem 0.5rem 3rem;
  }

  .route-map figcaption {
    inset-inline: 1rem;
    bottom: 0.8rem;
    font-size: 0.65rem;
  }

  .control-field {
    grid-template-columns: 1fr;
  }

  .control-feature,
  .control-note,
  .control-note:nth-child(4),
  .control-note:nth-child(5) {
    grid-column: 1;
    grid-row: auto;
    min-height: 14rem;
  }

  .control-feature {
    min-height: 24rem;
  }

  .control-feature h3 {
    font-size: 2.7rem;
  }

  .process-spine {
    margin-top: 6rem;
    padding: 1.35rem;
  }

  .process-spine ol {
    grid-template-columns: 1fr;
  }

  .inquiry-layout {
    gap: 2.5rem;
  }

  .inquiry-form {
    grid-template-columns: 1fr;
    padding: 1.15rem;
  }

  .field,
  .field-full,
  .form-actions {
    grid-column: 1;
  }

  .form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-meta {
    justify-self: start;
    text-align: start;
  }
}

@media (max-width: 24rem) {
  .hero-actions {
    display: grid;
  }

  .button {
    width: 100%;
  }

  .countdown-label {
    font-size: 0.63rem;
  }
}

@media (max-height: 45rem) and (min-width: 48rem) {
  .hero h1 {
    font-size: clamp(2.8rem, 6vw, 4.9rem);
  }

  .hero-lead {
    margin-top: 1rem;
  }

  .hero-actions {
    margin-top: 1.2rem;
  }

  .switch-signature {
    width: min(35vw, 22rem);
  }
}

@media (hover: hover) and (pointer: fine) {
  .nav-link:hover,
  .footer-links a:hover {
    color: var(--blue-300);
    transform: translateY(-1px);
  }

  .nav-link:hover::after {
    transform: scaleX(1);
  }

  .brand:hover .brand-mark::after {
    transform: rotate(24deg) translateX(520%);
    transition: transform 520ms var(--ease-out);
  }

  .language-link:hover,
  .menu-button:hover {
    border-color: var(--line-strong);
    background: rgb(12 54 101 / 0.75);
    color: var(--text);
  }

  .button:hover:not(:disabled) {
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.24),
      0 16px 45px rgb(0 118 244 / 0.35);
    transform: translateY(-2px);
  }

  .button:hover:not(:disabled)::before {
    transform: translateX(130%);
  }

  [dir="rtl"] .button:hover:not(:disabled)::before {
    transform: translateX(-130%);
  }

  .ledger-item,
  .control-feature,
  .control-note {
    transition:
      border-color 220ms var(--ease-out),
      box-shadow 220ms var(--ease-out),
      transform 260ms var(--ease-out);
  }

  .ledger-item:hover,
  .control-feature:hover,
  .control-note:hover {
    border-color: rgb(101 203 255 / 0.55);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.14),
      0 28px 75px rgb(0 83 184 / 0.2);
    transform: translateY(-6px);
  }

  .route-option:hover {
    border-color: var(--line);
    background: rgb(11 52 99 / 0.5);
    color: var(--text);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .site-header.is-scrolled,
  .button-quiet,
  .launch-panel,
  .khorasan-copy,
  .corridor-console,
  .inquiry-form {
    background-color: var(--navy-900);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero::after {
    animation: hero-signal-sweep 8s var(--ease-in-out) 1.5s infinite;
  }

  .switch-signature::after {
    animation: orbit-ring 18s linear infinite;
  }

  .switch-node-live {
    animation: signal-node 2.2s ease-in-out infinite;
  }

  .launch-panel::after {
    animation: panel-sweep 7s var(--ease-in-out) 2s infinite;
  }

  @keyframes hero-signal-sweep {
    0%,
    70% {
      opacity: 0;
      transform: rotate(15deg) translateX(-60vw);
    }
    78% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      transform: rotate(15deg) translateX(70vw);
    }
  }

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

  @keyframes signal-node {
    0%,
    100% {
      opacity: 0.72;
      transform: scale(0.92);
    }
    50% {
      opacity: 1;
      transform: scale(1.08);
    }
  }

  @keyframes panel-sweep {
    0%,
    72% {
      transform: translateX(0) skewX(-14deg);
    }
    100% {
      transform: translateX(calc(100vw + 24rem)) skewX(-14deg);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .hero-media img,
  .switch-signature,
  .ledger-item,
  .briefing-group,
  .khorasan-media,
  .sulfur-media,
  .route-map,
  .control-feature,
  .control-note,
  .inquiry-form,
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  .motion-spotlight,
  .map-cargo,
  .process-marker {
    display: none;
  }
}