:root {
  --bg: #020202;
  --bg-soft: #070707;
  --panel: rgba(9, 9, 9, 0.84);
  --panel-strong: rgba(4, 4, 4, 0.94);
  --text: #edf4ff;
  --muted: #9aa1ac;
  --muted-strong: #d2deef;
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.16);
  --accent: #79e7ff;
  --accent-2: #7d85ff;
  --accent-3: #58deab;
  --accent-soft: rgba(121, 231, 255, 0.12);
  --shadow: 0 26px 80px rgba(0, 0, 0, 0.5);
  --radius: 28px;
  --radius-lg: 38px;
  --container: min(1280px, calc(100vw - 44px));
  --header-h: 86px;
  --bottom-offset: 118px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --logo-center-x-offset: -1px;
  --logo-center-y-offset: 0.5px;
  --logo-main-left-shift: -10px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Manrope", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 10% 15%, rgba(125, 133, 255, 0.05), transparent 22%),
    radial-gradient(circle at 85% 18%, rgba(88, 222, 171, 0.04), transparent 20%),
    linear-gradient(180deg, #010101 0%, #050505 45%, #010101 100%);
  overflow-x: hidden;
  padding-bottom: var(--bottom-offset);
}

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

button,
input,
textarea {
  font: inherit;
}

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

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
}

.page-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  z-index: -3;
}

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at center, color-mix(in srgb, var(--accent-2) 8%, transparent), transparent 22%),
    linear-gradient(180deg, #000000 0%, #050505 100%);
  transition: opacity 700ms var(--ease), visibility 700ms var(--ease);
}

.screensaver-active {
  overflow: hidden;
  cursor: none;
}

.screensaver {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 260ms ease, visibility 260ms ease;
}

.screensaver.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.screensaver__watch {
  position: relative;
  width: min(60vw, 60vh, 620px);
  aspect-ratio: 1 / 1;
}

.screensaver__clock {
  position: absolute;
  inset: 0;
}

.screensaver__clock-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.screensaver__tick {
  stroke: rgba(255, 255, 255, 0.5);
  stroke-width: 2;
  stroke-linecap: round;
}

.screensaver__tick--hour {
  stroke: rgba(255, 255, 255, 0.94);
  stroke-width: 4.5;
}

.screensaver__numeral {
  font-family: "Sora", "Manrope", Arial, sans-serif;
  font-weight: 500;
  font-size: 27px;
  fill: rgba(255, 255, 255, 0.92);
}

.screensaver__hand {
  fill: #f5f5f7;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
  will-change: transform;
}

.screensaver__hand--second {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  filter:
    drop-shadow(0 0 8px rgba(121, 231, 255, 0.25))
    drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
  will-change: transform;
}

.screensaver__pivot {
  fill: var(--accent);
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 1.5;
}

.screensaver__logo {
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55));
}

.screensaver__meta {
  position: absolute;
  left: 32px;
  bottom: 30px;
  z-index: 1;
  display: grid;
  gap: 4px;
  color: rgba(244, 244, 244, 0.94);
  text-align: left;
}

.screensaver__digital {
  font-family: "Sora", sans-serif;
  font-size: clamp(1.4rem, 2vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.screensaver__date,
.screensaver__location {
  color: rgba(216, 222, 231, 0.82);
  font-size: clamp(0.84rem, 1vw, 1rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .screensaver__watch {
    width: min(82vw, 560px);
  }
}

@media (max-width: 640px) {
  .screensaver {
    padding: 16px;
  }

  .screensaver__watch {
    width: min(92vw, 420px);
  }

  .screensaver__meta {
    left: 16px;
    right: 16px;
    bottom: 18px;
    gap: 3px;
  }

  .screensaver__digital {
    font-size: 1.05rem;
    letter-spacing: 0.08em;
  }

  .screensaver__date,
  .screensaver__location {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
  }

  .screensaver-launch {
    top: 10px;
    min-width: 92px;
    height: 30px;
    padding: 0 12px;
    font-size: 0.66rem;
  }
}

.page-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-mark-wrap {
  position: relative;
  width: 148px;
  height: 148px;
  display: grid;
  place-items: center;
}

.loader-mark-wrap::after,
.core-chip-inner::after {
  content: none;
}

.loader-mark {
  width: 108px;
  height: 108px;
  object-fit: contain;
  position: relative;
  z-index: 1;
  transform: translate(var(--logo-center-x-offset), var(--logo-center-y-offset));
  will-change: transform, filter, opacity;
  animation: loader-pulse 1600ms var(--ease) infinite;
}

/* The 900ms entrance pulse plays, then holds at rest for 700ms before
   looping back to replay from the start — a full cycle (1.6s) that comfortably
   finishes and visibly restarts within the loader's guaranteed ~1.7s+ hold
   (see the "load" handler in app.js) before it fades, instead of a longer
   cycle nobody ever actually sees loop because the loader is gone first. */
@keyframes loader-pulse {
  0% {
    opacity: 0;
    transform: translate(var(--logo-center-x-offset), var(--logo-center-y-offset)) scale(0.78) rotate(-6deg);
    filter: drop-shadow(0 0 0 rgba(0,0,0,0));
  }
  28.1% {
    opacity: 1;
    transform: translate(var(--logo-center-x-offset), var(--logo-center-y-offset)) scale(1.06) rotate(3deg);
    filter: drop-shadow(0 12px 30px rgba(0,0,0,0.45));
  }
  56.3%,
  100% {
    opacity: 1;
    transform: translate(var(--logo-center-x-offset), var(--logo-center-y-offset)) scale(1) rotate(0deg);
    filter: drop-shadow(0 8px 24px rgba(0,0,0,0.45));
  }
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 120px 120px;
  mask-image: radial-gradient(circle at center, black 35%, transparent 88%);
  opacity: 0.25;
  z-index: -2;
}

.console-language-switcher {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.lang-btn {
  min-width: 42px;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted-strong);
  font-size: 0.75rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease, transform 220ms var(--ease);
}

.lang-code {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.lang-btn:hover {
  transform: translateY(-2px);
  color: var(--text);
}

.lang-btn.is-active {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--accent-2) 18%, transparent));
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 24px color-mix(in srgb, var(--accent) 16%, transparent);
}

.btn,
.bottom-nav a {
  transition:
    transform 220ms var(--ease),
    background 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    color 220ms ease;
}

.section {
  position: relative;
  padding: 118px 0;
  /* Anchor-scroll (nav clicks / URL hashes) lands on this element's own
     border-box top by default, which puts the full 118px of top padding
     between the viewport top and the first visible content (eyebrow +
     heading) — reads as "too much empty space, content pushed down".
     A negative scroll-margin-top pulls the landing point further down the
     page, past most of that padding, without touching the padding itself
     or how the section looks in normal scrolling. */
  scroll-margin-top: -90px;
}

.hero {
  min-height: calc(100vh - var(--header-h));
  /* 100dvh tracks the *current* visible viewport instead of the largest
     possible one. On mobile, 100vh is sized against the viewport with the
     browser's address bar hidden; as soon as it's visible (e.g. right after
     load), the hero renders taller than what's actually on screen, which
     shifts the scroll offset every section below it lands at. Browsers that
     don't support dvh keep the vh value above. */
  min-height: calc(100dvh - var(--header-h));
  display: flex;
  align-items: center;
  padding-top: 48px;
  /* Hero is the first section and its content is already vertically
     centered, not pushed down by top padding like the others — cancel out
     .section's negative offset so "Home" still lands at the very top. */
  scroll-margin-top: 0;
}

.hero-backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-gridlines {
  position: absolute;
  inset: 10% 6%;
  border-radius: 42px;
  border: 1px solid var(--line);
  opacity: 0.45;
}

.hero-gridlines::before,
.hero-gridlines::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(180deg, transparent, black 12%, black 88%, transparent);
}

.hero-gridlines::after {
  animation: driftGrid 14s linear infinite;
}

.hero-halo,
.hero-beam {
  position: absolute;
  border-radius: 999px;
}

.hero-halo {
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  animation: spin 24s linear infinite;
}

.hero-halo-a {
  width: 720px;
  height: 720px;
  top: -120px;
  right: -180px;
}

.hero-halo-b {
  width: 460px;
  height: 460px;
  bottom: 40px;
  right: 80px;
  animation-direction: reverse;
}

.hero-beam {
  height: 1px;
  width: 280px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: beamFlow 7s linear infinite;
}

.hero-beam-a {
  top: 22%;
  right: 17%;
}

.hero-beam-b {
  bottom: 28%;
  right: 24%;
  animation-delay: -3.1s;
}

.hero-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(440px, 1.05fr);
  gap: 36px;
  align-items: center;
}

.hero-copy {
  transform: translateY(-36px);
}

.eyebrow,
.map-box span,
.contact-stack span,
.project-topline span {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.eyebrow,
.map-box span,
.contact-stack span {
  color: var(--accent);
}

.hero-copy h1,
.section-heading h2,
.lane-content h3,
.advantage-panel h3,
.project-panel h3,
.contact-copy h2,
.distributor-heading h2,
.pq-offerings-heading h3,
.contact-careers-copy h3,
.focus-copy h3,
.story-title,
.story-case-panel h4,
.story-aside strong,
.detail-hero-copy h1,
.detail-section h2,
.detail-section h3 {
  font-family: "Sora", sans-serif;
  hyphens: none;
  word-break: normal;
  overflow-wrap: normal;
  text-wrap: pretty;
}

.hero-copy h1 {
  margin: 0;
  font-size: clamp(3.1rem, 5.5vw, 6.4rem);
  line-height: 0.95;
  letter-spacing: -0.06em;
  max-width: 10ch;
}

/* Russian and Azerbaijani headline words run longer than the English copy
   this 9ch box was tuned for (e.g. "интеллектуальной" / "distribyutorlar").
   Give those languages a smaller, wider box instead of letting a single
   unbreakable word overflow the column — never rely on word-break/hyphens
   to paper over it, per explicit design direction: no mid-word breaks. */
html:lang(ru) .hero-copy h1,
html:lang(az) .hero-copy h1 {
  font-size: clamp(2.3rem, 4.2vw, 4.7rem);
  max-width: 14ch;
}

/* Azerbaijani "ç"/"ş" carry a cedilla that hangs below the baseline —
   at the base 0.95 line-height (tuned for accent-free English copy) it
   drops straight into the line below (e.g. "üçün" over "nüvəsi"). A touch
   of extra line-height gives the cedilla clearance without visibly
   loosening the tight display-heading feel. */
html:lang(az) .hero-copy h1 {
  line-height: 1.08;
}

.hero-copy h1 span {
  display: block;
  color: transparent;
  background: linear-gradient(90deg, var(--text) 0%, var(--accent) 45%, var(--accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Nudge "nüvəsi" down a bit more — even with the extra line-height above,
   its "ü" umlaut dots sit close enough to "üçün"'s cedilla on the line
   above to read as touching. */
html:lang(az) .hero-copy h1 span {
  margin-top: 10px;
}

.hero-text,
.lane-content p,
.solutions-copy p,
.solution-points li,
.advantage-panel p,
.contact-copy p,
.project-panel h3,
.careers-brief-copy p,
.footer-brand p {
  color: var(--muted);
  line-height: 1.8;
}

.hero-text {
  font-size: 1.08rem;
  max-width: 620px;
  margin: 24px 0 0;
}

.hero-actions {
  margin-top: 14px;
}

.hero-actions-main {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.btn-careers {
  margin-top: 14px;
}

.btn-post-quantum {
  border-color: color-mix(in srgb, var(--accent-2) 60%, var(--line));
}

.btn {
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid var(--line);
}

.btn-primary {
  color: #03101a;
  background: linear-gradient(135deg, var(--accent), #d0f7ff);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--accent) 32%, transparent);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}

.btn:hover,
.menu-toggle:hover,
.bottom-nav a:hover {
  transform: translateY(-2px);
}

.hero-ribbon {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.hero-ribbon span,
.lane-tags span,
.project-footer span,
.partner-line span {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
}

.hero-ribbon span {
  padding: 10px 14px;
  color: var(--muted-strong);
}

.hero-stage {
  perspective: 1400px;
}

.hero-console,
.map-board,
.advantage-panel,
.project-panel,
.careers-brief,
.contact-form {
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel-strong) 92%, transparent), var(--panel));
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.hero-console {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 22px;
  overflow: hidden;
  transform-style: preserve-3d;
}

.screensaver-launch {
  position: absolute;
  top: 12px;
  left: 50%;
  z-index: 3;
  transform: translateX(-50%);
  min-width: 104px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(121, 231, 255, 0.22);
  border-radius: 999px;
  background: rgba(6, 10, 18, 0.72);
  color: var(--muted-strong);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    transform 220ms var(--ease),
    border-color 220ms ease,
    background 220ms ease,
    color 220ms ease,
    box-shadow 220ms ease;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 24px rgba(0, 0, 0, 0.24);
}

.screensaver-launch:hover {
  transform: translateX(-50%) translateY(-1px);
  color: var(--text);
  border-color: rgba(121, 231, 255, 0.42);
  background: rgba(10, 15, 26, 0.92);
}

.screensaver-launch:focus-visible {
  outline: 2px solid rgba(121, 231, 255, 0.55);
  outline-offset: 2px;
}

.hero-console::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
  transform: translateX(-120%);
  animation: scanConsole 7s linear infinite;
}

.console-bar,
.console-footer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: var(--muted-strong);
  font-size: 0.92rem;
}

.console-footer-stats-only {
  justify-content: flex-end;
}

.console-bar {
  align-items: center;
}

.mesh-scene {
  position: relative;
  min-height: 580px;
  margin: 18px 0;
  border-radius: 30px;
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at center, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
}

#network-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.core-chip {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  transform: translate(-50%, -50%);
  border-radius: 38px;
  padding: 16px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent-2) 18%, transparent));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent),
    0 0 54px color-mix(in srgb, var(--accent) 18%, transparent);
}

.core-chip::before,
.core-chip::after {
  content: "";
  position: absolute;
  inset: -18px;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  border-radius: 46px;
}

.core-chip::after {
  inset: -34px;
}

.core-chip-inner {
  width: 100%;
  height: 100%;
  border-radius: 28px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  display: grid;
  place-items: center;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.core-chip-logo {
  width: 108px;
  height: 108px;
  object-fit: contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(calc(-50% + var(--logo-center-x-offset)), calc(-50% + var(--logo-center-y-offset)));
  z-index: 1;
}

/* Mobile-only wordmark under the hero mark — see the max-width:640px block. */
.hero-wordmark {
  display: none;
}

.mesh-node {
  position: absolute;
  width: min(190px, 34%);
  padding: 16px 16px 15px;
  border-radius: 24px;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}

.mesh-node-link {
  display: inline-block;
  margin-bottom: 6px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
  transition: color 180ms ease, transform 180ms var(--ease);
}

.mesh-node-link:hover {
  color: var(--accent);
  transform: translateX(2px);
}

.mesh-node span {
  color: var(--muted);
  line-height: 1.6;
  font-size: 0.92rem;
}

.mesh-node-e {
  top: 4%;
  left: 50%;
  width: min(214px, 38%);
  transform: translateX(-50%);
  text-align: center;
}

.mesh-node-a { top: 24%; left: 4%; }
.mesh-node-b { top: 24%; right: 4%; }
.mesh-node-c { bottom: 12%; left: 6%; }
.mesh-node-d { bottom: 12%; right: 6%; }

.trace {
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.82;
}

.trace::after {
  content: "";
  position: absolute;
  top: -4px;
  right: 22%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 72%, transparent);
  animation: travelPulse 4.8s linear infinite;
}

.trace-a {
  width: 126px;
  top: 34%;
  left: 30%;
  transform: rotate(18deg);
}

.trace-e {
  width: 118px;
  top: 22%;
  left: 50%;
  transform: translateX(-50%) rotate(90deg);
}

.trace-b {
  width: 126px;
  top: 34%;
  right: 30%;
  transform: rotate(162deg);
}

.trace-c {
  width: 144px;
  bottom: 28%;
  left: 28%;
  transform: rotate(-18deg);
}

.trace-d {
  width: 144px;
  bottom: 28%;
  right: 28%;
  transform: rotate(198deg);
}

.signal-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--muted-strong);
}

.signal-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent-3);
  box-shadow: 0 0 0 0 rgba(88, 222, 171, 0.68);
  animation: pulseRing 2.2s infinite;
}

.console-stats {
  display: flex;
  gap: 18px;
  flex-wrap: nowrap;
  align-items: flex-start;
}

.console-stats div {
  min-width: 120px;
  display: grid;
  gap: 8px;
}

.console-stats strong {
  display: block;
  font-family: "Sora", sans-serif;
  font-size: 1.8rem;
  line-height: 1;
}

.console-stats strong::after {
  content: "+";
  color: var(--accent);
  margin-left: 2px;
}

.console-stats span {
  color: var(--muted);
  font-size: 0.88rem;
}

.section-heading {
  display: grid;
  gap: 14px;
  margin-bottom: 44px;
}

.section-heading-wide {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
  align-items: end;
  gap: 28px;
}

/* The stat strip should line up with the eyebrow/caption at the top of the
   heading row, not bottom-align against the (much taller) multi-line h2
   like .section-heading-wide's shared default does. */
.services-heading {
  align-items: start;
}

.section-heading h2,
.contact-copy h2 {
  margin: 0;
  font-size: clamp(1.95rem, 3.7vw, 3.7rem);
  line-height: 1.04;
  letter-spacing: -0.05em;
  max-width: 15ch;
}

.focus-sections {
  padding-top: 72px;
}

.partners {
  overflow: hidden;
}

.distributor-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 48px;
  align-items: end;
  margin-bottom: 34px;
}

.distributor-heading h2 {
  margin: 0;
  font-size: clamp(2.05rem, 3.85vw, 4.05rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

/* Azerbaijani and Russian render this title as one long unbroken word
   ("distribyutorlar", "дистрибьюторы") — give those languages a smaller
   size instead of ever letting the word break mid-way. */
html:lang(az) .distributor-heading h2,
html:lang(ru) .distributor-heading h2 {
  font-size: clamp(1.65rem, 2.95vw, 3.1rem);
}

.distributor-heading p:last-child {
  max-width: 540px;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.7;
}

.distributor-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 50% 0, color-mix(in srgb, var(--accent) 9%, transparent), transparent 52%),
    color-mix(in srgb, var(--panel) 74%, transparent);
}

.distributor-card {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(190px, 1fr) auto;
  gap: 18px;
  padding: 20px;
  border: 1px solid transparent;
  border-radius: 24px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.025);
  transition: transform 240ms var(--ease), border-color 240ms var(--ease), background 240ms var(--ease);
}

.distributor-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--accent) 46%, var(--line));
  background: rgba(255, 255, 255, 0.055);
}

.distributor-status {
  min-height: 1.2em;
  color: var(--accent);
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  line-height: 1.35;
  text-transform: uppercase;
}

.distributor-logo-wrap {
  display: grid;
  place-items: center;
  min-height: 208px;
  padding: 28px;
  border-radius: 21px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.035);
  overflow: hidden;
}

.distributor-logo-wrap img {
  display: block;
  width: 100%;
  max-width: 240px;
  max-height: 122px;
  object-fit: contain;
}

.distributor-card-footer {
  display: grid;
  gap: 7px;
}

.distributor-card-footer strong {
  font-family: "Sora", sans-serif;
  font-size: 1.02rem;
  letter-spacing: -0.025em;
}

.distributor-card-footer span {
  color: var(--muted);
  font-size: 0.88rem;
}

.post-quantum {
  position: relative;
  isolation: isolate;
  padding-top: 72px;
  /* Same reasoning as .section, tuned for this section's own (smaller)
     top padding so the landing gap before content matches the rest. */
  scroll-margin-top: -44px;
}

.post-quantum::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 8%;
  right: 8%;
  height: 58%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--accent-2) 11%, transparent), transparent 68%);
  filter: blur(18px);
  pointer-events: none;
}

.pq-heading-copy,
.pq-context,
.pq-card p,
.pq-standard-grid span {
  color: var(--muted);
  line-height: 1.8;
}

.pq-heading-copy .focus-link {
  margin-top: 20px;
}

.pq-brief {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
  gap: 48px;
  padding: 42px 46px 42px 176px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--panel-strong) 94%, transparent), var(--panel)),
    radial-gradient(circle at 82% 15%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 34%);
  box-shadow: var(--shadow);
}

.pq-brief::before {
  content: "PQ";
  position: absolute;
  top: 34px;
  left: 36px;
  color: color-mix(in srgb, var(--accent) 74%, transparent);
  font-family: "Sora", sans-serif;
  font-size: clamp(3.4rem, 7vw, 6.5rem);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.12em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.pq-brief::after {
  content: "";
  position: absolute;
  top: 36px;
  bottom: 36px;
  left: 132px;
  width: 1px;
  background: linear-gradient(var(--accent), transparent);
}

.pq-brief p,
.pq-context p,
.pq-card p {
  margin: 0;
}

.pq-brief strong {
  align-self: center;
  padding-left: 24px;
  border-left: 2px solid var(--accent);
  font-family: "Sora", sans-serif;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  line-height: 1.35;
  color: var(--text);
}

.pq-context {
  counter-reset: pq-context;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin: 42px 0 0;
  max-width: none;
}

.pq-context p {
  position: relative;
  padding-top: 48px;
  border-top: 1px solid var(--line);
}

.pq-context p::before {
  counter-increment: pq-context;
  content: "0" counter(pq-context);
  position: absolute;
  top: 16px;
  left: 0;
  color: var(--accent);
  font-family: "Sora", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.pq-offerings {
  margin-top: 68px;
  scroll-margin-top: 24px;
}

.pq-offerings-heading {
  display: grid;
  grid-template-columns: minmax(160px, 0.4fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  max-width: none;
  margin-bottom: 24px;
}

.pq-offerings-heading h3 {
  margin: 0;
  font-size: clamp(1.65rem, 3.15vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.045em;
}

/* Extra clearance between the "Kibertəhlükəsizlik Həlləri" / "Cybersecurity
   Solutions" / "Решения по кибербезопасности" eyebrow and the heading next
   to (desktop) or below (stacked) it — applies to all three languages,
   unlike the hero fix which was AZ-only. */
#cyber-solutions .pq-offerings-heading h3 {
  margin-top: 14px;
  /* Match .section-heading h2's weight (the Post-Quantum section's own
     top-level caption) so this reads with the same prominence instead of
     the smaller size it shares with "What MicroTech Offers" by default. */
  font-size: clamp(1.95rem, 3.7vw, 3.7rem);
  line-height: 1.04;
  letter-spacing: -0.05em;
}

.pq-offerings-toggle {
  margin-bottom: 32px;
}

.pq-card-grid {
  counter-reset: pq-offering;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

/* .pq-card-grid sets its own display, which would otherwise win over the
   UA [hidden] default (author rules always beat UA-stylesheet ones) — spell
   it out so the collapsed panel actually disappears. */
.pq-card-grid[hidden] {
  display: none;
}

.pq-card {
  position: relative;
  overflow: hidden;
  min-height: 250px;
  padding: 32px 32px 32px 94px;
  border: 1px solid color-mix(in srgb, var(--line) 92%, var(--accent));
  border-radius: 22px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--panel-strong) 90%, transparent), var(--panel)),
    radial-gradient(circle at top left, color-mix(in srgb, var(--accent) 10%, transparent), transparent 36%);
}

.pq-card::before {
  counter-increment: pq-offering;
  content: "0" counter(pq-offering);
  position: absolute;
  top: 30px;
  left: 28px;
  color: var(--accent);
  font-family: "Sora", sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.pq-card:nth-child(2n) {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--panel-strong) 90%, transparent), var(--panel)),
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent-2) 11%, transparent), transparent 36%);
}

.pq-card h4 {
  margin: 0 0 16px;
  font-family: "Sora", sans-serif;
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
  line-height: 1.4;
  letter-spacing: -0.02em;
}

.pq-card-wide {
  min-height: 0;
  grid-column: 1 / -1;
  padding-left: 94px;
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--panel-strong) 93%, transparent), var(--panel)),
    radial-gradient(circle at 80% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 38%);
}

.pq-standard-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}

.pq-standard-grid div {
  display: grid;
  gap: 9px;
  padding: 18px;
  border-top: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  background: rgba(255, 255, 255, 0.018);
}

.pq-standard-grid strong {
  color: var(--accent);
  font-size: 0.94rem;
  line-height: 1.4;
}

.pq-standard-grid span {
  font-size: 0.92rem;
}

.pq-card ul {
  margin: 16px 0 0;
  padding-left: 20px;
  color: var(--muted-strong);
  line-height: 1.6;
  font-size: 0.92rem;
}

.pq-card li + li {
  margin-top: 6px;
}

.pq-card p + ul,
.pq-card ul + p {
  margin-top: 16px;
}

.cyber-solutions {
  margin-top: 68px;
}

.cyber-intro {
  max-width: 760px;
  margin: 22px 0 0;
  color: var(--muted);
  line-height: 1.8;
}

.cyber-intro p + p {
  margin-top: 14px;
}

.cyber-card-grid {
  margin-top: 32px;
}

.cyber-resilience {
  margin-top: 24px;
  padding: 42px 46px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--panel-strong) 94%, transparent), var(--panel)),
    radial-gradient(circle at 85% 0%, color-mix(in srgb, var(--accent-2) 13%, transparent), transparent 38%);
  box-shadow: var(--shadow);
}

.cyber-resilience h4 {
  margin: 0 0 16px;
  font-family: "Sora", sans-serif;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  letter-spacing: -0.03em;
}

.cyber-resilience p {
  margin: 0;
  color: var(--muted-strong);
  line-height: 1.82;
}

.cyber-resilience p + p {
  margin-top: 16px;
}

.cyber-resilience .detail-pipeline,
.cyber-resilience .detail-tagline {
  margin-top: 20px;
}

.careers-heading-copy {
  color: var(--muted);
  line-height: 1.8;
}

.careers-heading-copy .focus-link {
  margin-top: 20px;
}

.careers-brief {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
  gap: 48px;
  padding: 42px 46px 42px 176px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--panel-strong) 94%, transparent), var(--panel)),
    radial-gradient(circle at 82% 15%, color-mix(in srgb, var(--accent-2) 15%, transparent), transparent 34%);
  box-shadow: var(--shadow);
}

.careers-brief::before {
  content: "CV";
  position: absolute;
  top: 34px;
  left: 36px;
  color: color-mix(in srgb, var(--accent-2) 74%, transparent);
  font-family: "Sora", sans-serif;
  font-size: clamp(3.4rem, 7vw, 6.5rem);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.12em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.careers-brief::after {
  content: "";
  position: absolute;
  top: 36px;
  bottom: 36px;
  left: 132px;
  width: 1px;
  background: linear-gradient(var(--accent-2), transparent);
}

.careers-brief-copy p {
  margin: 0 0 16px;
}

.careers-brief-copy p:last-child {
  margin-bottom: 0;
}

.careers-brief-highlight {
  display: grid;
  align-content: center;
  align-self: center;
  gap: 20px;
  padding-left: 24px;
  border-left: 2px solid var(--accent-2);
}

.careers-brief-highlight strong {
  font-family: "Sora", sans-serif;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  line-height: 1.35;
  color: var(--text);
}

.careers-brief-highlight .btn {
  justify-self: start;
}

.contact-careers {
  grid-column: 1 / -1;
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 34px 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--panel-strong) 94%, transparent), var(--panel)),
    radial-gradient(circle at 85% 20%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 40%);
  box-shadow: var(--shadow);
}

.contact-careers-copy {
  max-width: 640px;
}

.contact-careers-copy h3 {
  margin: 10px 0 12px;
  font-size: clamp(1.3rem, 2.15vw, 1.8rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.contact-careers-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
}

.contact-careers .btn {
  flex-shrink: 0;
}

.focus-grid {
  display: grid;
  gap: 18px;
}

.focus-panel {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  padding: 30px;
  border-radius: 30px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel-strong) 92%, transparent), var(--panel)),
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 10%, transparent), transparent 32%);
  box-shadow: var(--shadow);
  scroll-margin-top: 24px;
}

.focus-index {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.03);
  font-family: "Sora", sans-serif;
}

.focus-copy {
  display: grid;
  gap: 10px;
}

.focus-kicker {
  margin: 0;
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.focus-copy h3 {
  margin: 0;
  font-size: clamp(1.14rem, 1.8vw, 1.58rem);
  line-height: 1.4;
  letter-spacing: -0.03em;
}

.focus-copy p:last-child {
  margin: 0;
  color: var(--muted);
  line-height: 1.8;
  max-width: 64ch;
}

.focus-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin-top: 6px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 700;
  transition: transform 220ms var(--ease), border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.focus-link:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--accent) 18%, transparent);
}

.stat-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.stat-strip div {
  padding: 18px 16px;
  margin-top: 98px;
  border-radius: 24px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.08);
}

.stat-strip strong {
  display: block;
  font-family: "Sora", sans-serif;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--text);
}

.stat-strip span {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  line-height: 1.55;
  font-size: 0.84rem;
  overflow-wrap: break-word;
}

.lane-content h3,
.advantage-panel h3 {
  font-size: 1.14rem;
  letter-spacing: -0.03em;
}

.service-lanes {
  display: grid;
  gap: 18px;
}

.success-intro {
  max-width: 760px;
  margin: 20px auto 0 0;
  color: var(--muted);
  line-height: 1.85;
  font-size: 1.02rem;
}

.story-stack {
  display: grid;
  gap: 22px;
  margin-top: 38px;
}

.story-card {
  position: relative;
  border-radius: 30px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel-strong) 94%, transparent), rgba(10, 12, 16, 0.9)),
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 10%, transparent), transparent 34%);
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
  overflow: hidden;
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms var(--ease);
}

.story-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 50%, transparent), transparent);
  opacity: 0.45;
}

.story-card:hover,
.story-card.is-open {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--line));
  box-shadow: 0 28px 68px rgba(0, 0, 0, 0.42);
}

.services .story-card {
  background:
    linear-gradient(180deg, rgba(8, 12, 17, 0.96), rgba(8, 10, 13, 0.94)),
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 9%, transparent), transparent 36%);
}

.projects .story-card {
  background:
    linear-gradient(180deg, rgba(12, 11, 16, 0.96), rgba(8, 8, 12, 0.94)),
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 34%);
}

.story-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: start;
  padding: 28px 30px;
}

.story-toggle {
  width: 100%;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.story-header-actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding-top: 2px;
}

.story-index {
  font-family: "Sora", sans-serif;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-size: 1rem;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.03);
}

.story-main {
  display: grid;
  gap: 16px;
}

.story-heading {
  display: grid;
  gap: 12px;
}

.story-kicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.story-title {
  font-size: clamp(1.14rem, 1.65vw, 1.52rem);
  line-height: 1.42;
  letter-spacing: -0.03em;
  max-width: 42ch;
}

.story-summary {
  color: var(--muted);
  line-height: 1.72;
  max-width: 62ch;
  font-size: 0.98rem;
}

.story-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.story-pill {
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.035);
  color: var(--muted-strong);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.story-pill-row-detail {
  margin-top: 8px;
}

.story-toggle-side {
  display: block;
  align-self: center;
}

.story-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted-strong);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.story-panel {
  padding: 0 30px 30px;
}

.story-body {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 24px;
  display: grid;
  gap: 20px;
}

.story-body-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.75fr);
  gap: 22px;
  align-items: start;
}

.story-copy {
  display: grid;
  gap: 14px;
}

.story-lead {
  color: var(--muted-strong);
  font-size: 1.02rem;
}

.story-aside {
  border-radius: 22px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  padding: 20px;
  display: grid;
  gap: 12px;
  position: sticky;
  top: 110px;
}

.story-aside-label {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}

.story-aside strong {
  font-size: 1rem;
  line-height: 1.55;
  letter-spacing: -0.02em;
}

.story-aside p {
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
  font-size: 0.95rem;
}

.story-copy p,
.story-case-panel p,
.project-footer span {
  margin: 0;
  color: var(--muted);
  line-height: 1.85;
}

.story-case-button {
  min-width: 210px;
  position: relative;
  z-index: 1;
  white-space: nowrap;
}

.story-case-panel {
  border-radius: 24px;
  padding: 22px 22px 20px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.02));
  display: grid;
  gap: 12px;
}

.story-case-panel h4 {
  margin: 0;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
}

.project-story-stack .story-card-head {
  padding-bottom: 26px;
}

.project-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.project-footer span {
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.035);
  color: var(--muted-strong);
}

.service-lane {
  position: relative;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) 280px;
  gap: 20px;
  align-items: center;
  padding: 28px 30px;
  border-radius: 30px;
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 0.03), color-mix(in srgb, var(--accent-2) 10%, transparent), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--line);
  overflow: hidden;
}

.service-lane::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.09), transparent);
  transform: translateX(-120%);
  transition: transform 500ms var(--ease);
}

.service-lane:hover::before {
  transform: translateX(120%);
}

.service-lane.alt {
  transform: translateX(64px);
}

.lane-index {
  font-family: "Sora", sans-serif;
  font-size: 1.18rem;
  color: var(--accent);
}

.lane-content h3 {
  margin: 0 0 10px;
}

.lane-content p {
  margin: 0;
}

.lane-tags {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.lane-tags span,
.project-footer span,
.partner-line span {
  padding: 10px 14px;
  color: var(--muted-strong);
}

.solutions-layout,
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: 28px;
  align-items: center;
}

/* These two sections vertically center their copy column against the
   taller diagram/form column next to it (align-items: center above), on
   top of .section's own top padding — so they need their own
   scroll-margin-top compensation instead of the shared -90px.
   #contact lands at the same tight gap as the rest of the page (its offset
   is stable across widths). #solutions is intentionally given a larger,
   more generous landing gap on top of that compensation — its map-board
   diagram reads as cramped/asymmetric when it lands flush against the
   viewport top, so it's tuned to land noticeably lower instead. It also
   isn't stable across widths, because .map-board carries a fixed 530px
   min-height that centers its shorter copy column against — see the
   ≤1120px override below, where that grid collapses to a single column
   and the offset shrinks. All tuned/verified by measuring actual rendered
   position, not derived from the padding/min-height numbers alone. */
#solutions {
  scroll-margin-top: -44px;
}

#contact {
  scroll-margin-top: -122px;
}


.solution-points {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: grid;
  gap: 18px;
}

.solution-points li {
  position: relative;
  padding-left: 28px;
}

.solution-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 34%, transparent);
}

.map-board {
  position: relative;
  min-height: 530px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 28px;
}

.map-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 52px 52px;
  opacity: 0.45;
}

.map-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90px;
  height: 90px;
  transform: translate(-50%, -50%);
  z-index: 1;
  border-radius: 22px;
  display: grid;
  place-items: center;
  
}

.map-core img {
  width: 100px;
  height: 100px;
  object-fit: contain;
}

.map-box {
  position: absolute;
  width: min(250px, 42%);
  padding: 22px;
  border-radius: 24px;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  border: 1px solid var(--line);
  z-index: 1;
}

.map-box strong {
  display: block;
  margin-top: 10px;
  font-size: 1.12rem;
  line-height: 1.45;
}

.map-box-a { top: 42px; left: 40px; }
.map-box-b { top: 82px; right: 46px; }
.map-box-c { bottom: 48px; left: 72px; }
.map-box-d { bottom: 72px; right: 36px; }

.pulse-path {
  position: absolute;
  border: 1px dashed color-mix(in srgb, var(--accent) 26%, transparent);
  border-radius: 999px;
  animation: spin 18s linear infinite;
}

.pulse-path::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 60%, transparent);
}

.pulse-path-a {
  inset: 18% 18%;
}

.pulse-path-a::after {
  top: 0;
  left: 50%;
}

.pulse-path-b {
  inset: 28% 12%;
  animation-direction: reverse;
}

.pulse-path-b::after {
  bottom: 0;
  right: 30%;
}

.pulse-path-c {
  inset: 36% 26%;
  animation-duration: 24s;
}

.pulse-path-c::after {
  left: 12%;
  top: 50%;
}

.advantage-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.advantage-panel {
  border-radius: var(--radius);
  padding: 30px;
  position: relative;
  overflow: hidden;
}

.advantage-panel::before {
  content: "";
  position: absolute;
  inset: -30% 30% auto -10%;
  height: 160px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, transparent), transparent);
  transform: rotate(-10deg);
}

.advantage-panel.highlight {
  transform: translateY(-18px);
}

.advantage-panel > span {
  position: relative;
  z-index: 1;
  font-family: "Sora", sans-serif;
  color: var(--accent);
}

.advantage-panel h3 {
  position: relative;
  z-index: 1;
  margin: 18px 0 12px;
}

.advantage-panel p {
  position: relative;
  z-index: 1;
  margin: 0;
}

.project-track {
  display: grid;
  gap: 18px;
}

.project-panel {
  border-radius: 30px;
  padding: 28px 30px;
  position: relative;
  overflow: hidden;
}

.project-panel::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}

.project-topline {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  color: var(--muted-strong);
}

.project-topline strong {
  color: var(--accent);
  font-size: 0.95rem;
}

.project-panel h3 {
  margin: 22px 0;
  font-size: clamp(1.08rem, 2vw, 1.65rem);
  line-height: 1.5;
  letter-spacing: -0.03em;
  max-width: 60ch;
}

.project-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.partner-field {
  display: grid;
  gap: 16px;
}

.partner-line {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.partner-line.alt {
  justify-content: flex-end;
}

.contact-stack {
  display: grid;
  gap: 22px;
  margin-top: 32px;
}

.contact-stack a,
.contact-stack p {
  display: block;
  margin: 8px 0 0;
  color: var(--muted-strong);
}

.contact-form {
  border-radius: var(--radius-lg);
  padding: 30px;
  display: grid;
  gap: 18px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.contact-form label {
  display: grid;
  gap: 10px;
}

.contact-form label span {
  color: var(--muted-strong);
  font-size: 0.92rem;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  padding: 16px 18px;
  outline: none;
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent);
}

.site-footer {
  padding: 30px 0 34px;
  border-top: 1px solid var(--line);
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: end;
}

.footer-brand img {
  width: 170px;
  margin-bottom: 12px;
}

.footer-brand p,
.footer-meta span {
  color: var(--muted);
}

.footer-meta {
  display: grid;
  gap: 8px;
  justify-items: end;
}

.footer-location {
  white-space: nowrap;
}

.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--panel-strong) 86%, transparent);
  backdrop-filter: blur(20px);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18);
}

.bottom-nav a {
  position: relative;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-strong);
  font-size: 0.94rem;
  white-space: nowrap;
}

.bottom-nav a.is-active {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent-2) 18%, transparent));
  color: var(--text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* Bottom-nav extras (Services launcher, language menu) and the slide-up
   sheets: mobile only. All are revealed inside the max-width: 860px block;
   here they stay out of the desktop layout. */
.bottom-nav-svc {
  display: none;
  position: relative;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted-strong);
  font-family: inherit;
  font-size: 0.94rem;
  white-space: nowrap;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: transform 220ms var(--ease), background 220ms ease, box-shadow 220ms ease;
}

.bottom-nav-svc.is-active {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent-2) 18%, transparent));
  color: var(--text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}

.mobile-svc-sheet {
  display: none;
}

.detail-page {
  padding-bottom: 0;
}

.detail-shell {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100dvh;
}

.detail-shell::before,
.detail-shell::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(22px);
  opacity: 0.75;
}

.detail-shell::before {
  width: 520px;
  height: 520px;
  top: -160px;
  right: -120px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent-2) 24%, transparent) 0%, transparent 68%);
}

.detail-shell::after {
  width: 460px;
  height: 460px;
  left: -160px;
  bottom: 10%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent-3) 18%, transparent) 0%, transparent 70%);
}

.detail-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(18px);
  background: rgba(2, 2, 2, 0.72);
  border-bottom: 1px solid var(--line);
}

.detail-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 0;
}

.detail-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.detail-brand-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  object-fit: contain;
}

.detail-brand-wordmark {
  display: block;
  width: clamp(100px, 13vw, 120px);
  min-width: 170px;
  max-width: 100%;
  height: auto;
  flex-shrink: 0;
  margin-top: 10px;
  object-fit: contain;
}

.detail-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.detail-nav a {
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted-strong);
  font-size: 0.9rem;
  transition: transform 220ms var(--ease), border-color 220ms ease, color 220ms ease, background 220ms ease;
}

.detail-nav a:hover {
  transform: translateY(-2px);
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.detail-topbar-lead {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Compact arrow-style "back to home" — phone only (see the PHONE ONLY
   block further down). Desktop/tablet keep the "Back to Home" text pill in
   .detail-nav, which this duplicates so nothing here needs to touch
   distributor-i18n.js. */
.detail-back {
  display: none;
}

.detail-hero {
  padding: 92px 0 48px;
}

.detail-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 28px;
  align-items: stretch;
}

.detail-hero-copy,
.detail-hero-panel,
.detail-card,
.detail-section {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
    rgba(5, 5, 5, 0.84);
  box-shadow: var(--shadow);
}

.detail-hero-copy {
  padding: 42px;
}

.detail-eyebrow {
  margin: 0 0 16px;
  color: var(--accent);
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.detail-hero-copy h1 {
  margin: 0;
  font-size: clamp(2.2rem, 3.7vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.05em;
  max-width: 14ch;
}

.detail-hero-copy p {
  margin: 22px 0 0;
  max-width: 62ch;
  color: var(--muted-strong);
  font-size: 1.02rem;
  line-height: 1.8;
}

.detail-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.detail-pill {
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--muted-strong);
  font-size: 0.84rem;
}

.detail-hero-panel {
  padding: 28px;
  display: grid;
  align-content: space-between;
  gap: 20px;
}

.distributor-detail-logo {
  align-self: center;
  display: grid;
  place-items: center;
  width: 100%;
  height: clamp(300px, 29vw, 430px);
  min-height: 0;
  padding: 42px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 0, color-mix(in srgb, var(--accent) 14%, transparent), transparent 56%), rgba(255, 255, 255, 0.035);
}

.distributor-detail-logo img {
  display: block;
  width: min(78%, 500px);
  max-height: 100%;
  object-fit: contain;
}

.detail-diagram {
  position: relative;
  min-height: 270px;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  background:
    radial-gradient(circle at 50% 50%, rgba(121, 231, 255, 0.08), transparent 30%),
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px),
    linear-gradient(180deg, rgba(125, 133, 255, 0.12), rgba(255, 255, 255, 0.01));
  background-size: auto, 42px 42px, 42px 42px, auto;
}

.detail-orbit,
.detail-core,
.detail-node {
  position: absolute;
}

.detail-orbit {
  inset: 16% 18%;
  border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--accent) 22%, transparent);
  animation: spin 22s linear infinite;
}

.detail-orbit::after {
  content: "";
  position: absolute;
  top: 4%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 60%, transparent);
}

.detail-core {
  inset: 50% auto auto 50%;
  width: 108px;
  height: 108px;
  transform: translate(-50%, -50%);
  border-radius: 30px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  background:
    radial-gradient(circle at 35% 35%, rgba(125, 133, 255, 0.3), transparent 55%),
    rgba(6, 6, 6, 0.92);
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03), 0 18px 44px rgba(0, 0, 0, 0.36);
}

.detail-core img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.detail-node {
  width: 138px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(10, 10, 10, 0.88);
  color: var(--muted-strong);
  font-size: 0.82rem;
  line-height: 1.45;
}

.detail-node strong {
  display: block;
  margin-bottom: 6px;
  color: var(--text);
  font-size: 0.92rem;
}

.detail-node-a { top: 16px; left: 18px; }
.detail-node-b { top: 26px; right: 18px; }
.detail-node-c { bottom: 20px; left: 28px; }
.detail-node-d { bottom: 28px; right: 20px; }

.detail-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.detail-stat {
  padding: 18px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
}

.detail-stat strong {
  display: block;
  margin-bottom: 8px;
  font-family: "Sora", sans-serif;
  font-size: 1.18rem;
  overflow-wrap: break-word;
}

.detail-grid {
  display: grid;
  gap: 24px;
  padding-bottom: 96px;
}

.detail-section {
  padding: 36px;
}

.detail-section h2 {
  margin: 0 0 16px;
  font-size: clamp(1.5rem, 2vw, 2.2rem);
  line-height: 1.12;
}

.detail-section h3 {
  margin: 0 0 14px;
  font-size: 1.14rem;
  line-height: 1.22;
}

.detail-section p {
  margin: 0;
  color: var(--muted-strong);
  line-height: 1.82;
}

.detail-section p + p {
  margin-top: 16px;
}

.detail-pipeline {
  margin: 20px 0 0 !important;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--text) !important;
  font-family: "Sora", sans-serif;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
  line-height: 1.7 !important;
}

.detail-tagline {
  margin: 20px 0 0 !important;
  color: var(--text) !important;
  font-family: "Sora", sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.detail-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.detail-card {
  padding: 28px;
}

.detail-card-wide {
  grid-column: 1 / -1;
}

.detail-card ul,
.detail-section ul {
  margin: 18px 0 0;
  padding-left: 20px;
  color: var(--muted-strong);
  line-height: 1.72;
}

.detail-card ul + p,
.detail-section ul + p {
  margin-top: 16px;
}

.detail-card li + li,
.detail-section li + li {
  margin-top: 8px;
}

.detail-section-anchor {
  scroll-margin-top: 110px;
}

.detail-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.detail-subnav a {
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted-strong);
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.88rem;
}

.detail-subnav a:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--text);
}

.detail-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
}

.detail-footer {
  padding: 0 0 48px;
}

.detail-footer-card {
  padding: 28px 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
}

.detail-footer-card p {
  margin: 0;
  color: var(--muted);
}

.detail-footer-card p + p {
  margin-top: 10px;
}

.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 760ms var(--ease), transform 760ms var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes spinReverse {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

@keyframes markFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes driftGrid {
  from { transform: translateY(0); }
  to { transform: translateY(44px); }
}

@keyframes beamFlow {
  0%, 100% { transform: translateX(-80px); opacity: 0; }
  20%, 80% { opacity: 1; }
  50% { transform: translateX(80px); opacity: 1; }
}

@keyframes scanConsole {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

@keyframes pulseRing {
  0% { box-shadow: 0 0 0 0 rgba(88, 222, 171, 0.66); }
  85% { box-shadow: 0 0 0 12px rgba(88, 222, 171, 0); }
  100% { box-shadow: 0 0 0 0 rgba(88, 222, 171, 0); }
}

@keyframes travelPulse {
  0% { right: 82%; opacity: 0; }
  18% { opacity: 1; }
  50% { right: 46%; opacity: 1; }
  100% { right: 8%; opacity: 0; }
}

@media (max-width: 1120px) {
  .hero-layout,
  .solutions-layout,
  .contact-layout,
  .advantage-grid,
  .section-heading-wide,
  .stat-strip,
  .careers-brief,
  .pq-brief {
    grid-template-columns: 1fr;
  }

  /* .stat-strip div's 98px margin-top only makes sense next to the heading
     it's aligned with on desktop's 2-column layout — once the cards stack
     into their own single column above, that margin just opens a huge gap
     between each one. */
  .stat-strip div {
    margin-top: 0;
  }

  /* .solutions-layout is single-column here, so the centering gap ahead of
     its heading shrinks — see the comment by the desktop value above. */
  #solutions {
    scroll-margin-top: 16px;
  }

  .pq-context,
  .pq-card-grid,
  .pq-offerings-heading {
    grid-template-columns: 1fr;
  }

  .pq-standard-grid {
    grid-template-columns: 1fr;
  }

  .distributor-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .distributor-heading {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .pq-brief {
    gap: 28px;
    padding: 36px 36px 36px 156px;
  }

  .pq-brief::after {
    left: 118px;
  }

  .careers-brief {
    gap: 28px;
    padding: 36px 36px 36px 156px;
  }

  .careers-brief::after {
    left: 118px;
  }

  .service-lane {
    grid-template-columns: 72px 1fr;
  }

  .story-toggle {
    grid-template-columns: 56px 1fr;
  }

  .story-card-head {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .story-header-actions {
    justify-content: flex-start;
    margin-left: 74px;
    padding-top: 0;
  }

  .story-body-grid {
    grid-template-columns: 1fr;
  }

  .story-aside {
    position: static;
  }

  .mesh-node-e {
    top: 3%;
    width: min(260px, 48%);
  }

  .trace-e {
    top: 20%;
  }

  .story-toggle-side {
    grid-column: 2;
    justify-items: start;
    grid-auto-flow: column;
    align-items: center;
  }

  .lane-tags {
    grid-column: 2;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .service-lane.alt,
  .advantage-panel.highlight {
    transform: none;
  }

  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-meta {
    justify-items: start;
  }

  .detail-topbar-inner,
  .detail-hero-grid,
  .detail-card-grid {
    grid-template-columns: 1fr;
  }

  .detail-topbar-inner {
    display: grid;
    justify-content: stretch;
  }

  .console-language-switcher {
    width: fit-content;
  }

  .detail-nav {
    justify-content: flex-start;
  }

  .detail-hero-copy,
  .detail-hero-panel,
  .detail-section,
  .detail-card {
    padding: 26px;
  }

  .distributor-detail-logo {
    height: clamp(260px, 54vw, 360px);
    padding: 32px;
  }

  .detail-node {
    width: 124px;
    font-size: 0.78rem;
  }
}

@media (max-width: 860px) {
  :root {
    --container: min(1280px, calc(100vw - 24px));
    --bottom-offset: 104px;
  }

  .language-switcher {
    display: none;
  }

  .distributor-rail {
    grid-auto-flow: column;
    grid-auto-columns: minmax(275px, 84%);
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .distributor-rail::-webkit-scrollbar {
    display: none;
  }

  .distributor-card {
    scroll-snap-align: start;
  }

  .pq-brief {
    padding: 98px 24px 28px;
  }

  .pq-brief::before {
    top: 24px;
    left: 26px;
    font-size: 3.5rem;
    writing-mode: horizontal-tb;
    transform: none;
  }

  .pq-brief::after {
    top: 74px;
    right: 24px;
    bottom: auto;
    left: 24px;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, var(--accent), transparent);
  }

  .pq-brief strong {
    padding: 18px 0 0;
    border-top: 2px solid var(--accent);
    border-left: 0;
  }

  .careers-brief {
    padding: 98px 24px 28px;
  }

  .careers-brief::before {
    top: 24px;
    left: 26px;
    font-size: 3.5rem;
    writing-mode: horizontal-tb;
    transform: none;
  }

  .careers-brief::after {
    top: 74px;
    right: 24px;
    bottom: auto;
    left: 24px;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, var(--accent-2), transparent);
  }

  .careers-brief-highlight {
    padding: 18px 0 0;
    border-top: 2px solid var(--accent-2);
    border-left: 0;
  }

  .pq-card,
  .pq-card-wide {
    min-height: 0;
    padding: 82px 24px 26px;
  }

  .pq-card::before {
    top: 28px;
    left: 24px;
  }

  .brand {
    gap: 10px;
  }

  .brand-mark {
    width: 40px;
    height: 40px;
  }

  .story-toggle,
  .story-panel,
  .story-card-head {
    padding-left: 22px;
    padding-right: 22px;
  }

  .story-toggle-side {
    grid-auto-flow: row;
    justify-items: start;
  }

  .story-header-actions {
    margin-left: 0;
  }

  .story-case-button {
    width: 100%;
  }

  .story-index {
    width: 48px;
    height: 48px;
  }

  .story-title {
    max-width: none;
  }

  .story-main {
    gap: 14px;
  }

  .brand-type strong {
    font-size: 0.98rem;
  }

  .brand-type small {
    font-size: 0.66rem;
  }

  .menu-toggle,
  .mobile-drawer.is-open {
    display: block;
  }

  .hero-copy h1 {
    font-size: clamp(2.55rem, 11.8vw, 4.2rem);
  }

  html:lang(ru) .hero-copy h1,
  html:lang(az) .hero-copy h1 {
    font-size: clamp(1.95rem, 8.2vw, 3.15rem);
  }

  .hero-copy {
    transform: translateY(-18px);
  }

  /* Below 860px the mesh diagram can no longer rely on absolute-positioned
     cards with hardcoded pixel offsets — translated/wrapped card text has a
     variable height, so fixed offsets overlap. Switch to a normal stacked
     flex column instead: every child flows in document order with no
     overlap regardless of how many lines its text wraps to. */
  .mesh-scene {
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 24px 18px;
  }

  .core-chip {
    position: relative;
    top: auto;
    left: auto;
    inset: auto;
    transform: none;
    width: 120px;
    height: 120px;
    flex: 0 0 auto;
    order: -1;
  }

  .core-chip-inner span {
    font-size: 2.3rem;
  }

  .core-chip-logo {
    width: 150px;
    height: 150px;
    left: 55px;
  }

  .mesh-node {
    position: relative;
    width: 100%;
  }

  .mesh-node-a,
  .mesh-node-b,
  .mesh-node-c,
  .mesh-node-d,
  .mesh-node-e {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    transform: none;
    text-align: left;
  }

  .trace {
    display: none;
  }

  .focus-panel {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 24px 22px;
  }

  .map-box {
    position: relative;
    width: auto;
    inset: auto;
  }

  .map-board {
    min-height: auto;
    display: grid;
    gap: 16px;
  }

  .pulse-path {
    display: none;
  }

  .map-core {
    display: none;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .bottom-nav {
    left: 12px;
    right: 12px;
    bottom: 12px;
    transform: none;
    width: auto;
    justify-content: flex-start;
    overflow-x: auto;
    padding: 8px;
    gap: 6px;
    /* Hints that there's more to scroll to instead of the row just
       cutting off mid-item at the edge. */
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  }

  .bottom-nav::-webkit-scrollbar {
    display: none;
  }

  .bottom-nav a {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 14px;
    font-size: 0.9rem;
  }

  .console-footer-stats-only {
    justify-content: center;
  }

  .console-stats {
    width: 100%;
    justify-content: space-between;
    gap: 12px;
  }

  .console-stats div {
    min-width: 0;
    flex: 1 1 0;
  }

  .console-stats strong {
    font-size: 1.55rem;
  }

  .console-stats span {
    font-size: 0.8rem;
  }

  .detail-hero {
    padding-top: 48px;
  }

  .detail-brand {
    align-items: flex-start;
  }

  .detail-nav {
    gap: 8px;
  }

  .focus-link {
    width: 100%;
    justify-content: center;
  }

  .detail-stat-grid {
    grid-template-columns: 1fr;
  }

  .detail-node {
    position: static;
    width: 100%;
  }

  .detail-diagram {
    display: grid;
    gap: 12px;
    align-content: start;
    padding: 16px;
  }

  .detail-orbit {
    inset: 26% 18%;
  }

  .detail-core {
    position: relative;
    inset: auto;
    transform: none;
    margin: 32px auto 18px;
  }
}

/* ==========================================================================
   PHONE ONLY (<= 640px). Everything here is dedicated mobile-phone
   treatment (homepage, then the distributor/solution detail pages further
   down) — it must NOT reach tablets or desktop. The 860px block above
   keeps its original tablet layout untouched. Kept as a single block so
   later rules always win the cascade over the 860px/1120px ones above.
   ========================================================================== */
@media (max-width: 640px) {
  /* ----- "About" story cards: smaller, tighter containers ----- */
  .story-stack {
    gap: 14px;
  }

  .story-card-head {
    padding: 18px;
  }

  .story-panel {
    padding: 0 18px 18px;
  }

  .story-index {
    width: 38px;
    height: 38px;
    font-size: 0.86rem;
    border-radius: 14px;
  }

  .story-toggle {
    grid-template-columns: 38px 1fr;
    gap: 14px;
  }

  .story-main {
    gap: 10px;
  }

  .story-heading {
    gap: 8px;
  }

  /* Phone leads with the animated logo, not the desktop headline. The
     slogan + intro stay in the DOM (SEO / screen readers) but are lifted
     out of the visible layout; the CTA row is removed entirely so nothing
     invisible stays in the tab order. */
  .hero {
    padding-top: 18px;
  }

  .hero-copy {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    transform: none;
  }

  .hero-actions {
    display: none;
  }

  .hero-layout {
    gap: 0;
  }

  /* The "Time Saver" screensaver is not offered on phones (see screensaver.js). */
  .screensaver-launch {
    display: none;
  }

  .console-bar {
    flex-wrap: wrap;
    gap: 10px 14px;
  }

  /* The date/time above the animation is dropped on phones — only the
     language switcher stays in that row. */
  .world-clock {
    display: none;
  }

  /* The mesh diagram becomes just the animated network + core logo on
     phones. The service nodes move out entirely — they're reached from the
     Services entry in the bottom nav instead. */
  .mesh-scene {
    min-height: min(58dvh, 480px);
    justify-content: center;
    padding: 28px 18px;
  }

  .core-chip {
    width: 150px;
    height: 150px;
  }

  .core-chip-logo {
    width: 184px;
    height: 184px;
    left: 50%;
  }

  .mesh-node {
    display: none;
  }

  .hero-wordmark {
    display: block;
    width: 148px;
    height: auto;
    margin-top: 20px;
    opacity: 0.92;
  }

  /* ----- Services launcher in the bottom nav ----- */
  .bottom-nav-svc {
    display: inline-flex;
    flex: 0 0 auto;
  }

  /* ----- Slide-up Services sheet ----- */
  .mobile-svc-sheet {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 80;
  }

  .mobile-svc-sheet[hidden] {
    display: none;
  }

  .mobile-svc-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 4, 8, 0.62);
    opacity: 0;
    transition: opacity 260ms var(--ease);
  }

  .mobile-svc-sheet.is-open .mobile-svc-backdrop {
    opacity: 1;
  }

  .mobile-svc-panel {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 14px calc(16px + env(safe-area-inset-bottom, 0px));
    border-radius: 26px;
    border: 1px solid var(--line-strong);
    background: color-mix(in srgb, var(--panel-strong) 97%, transparent);
    backdrop-filter: blur(24px);
    box-shadow: 0 -30px 70px rgba(0, 0, 0, 0.55);
    transform: translateY(130%);
    transition: transform 320ms var(--ease);
  }

  .mobile-svc-sheet.is-open .mobile-svc-panel {
    transform: translateY(0);
  }

  .mobile-svc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 6px 12px;
  }

  .mobile-svc-head strong {
    font-family: "Sora", sans-serif;
    font-size: 1.05rem;
    letter-spacing: 0.01em;
  }

  .mobile-svc-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.03);
    color: var(--muted-strong);
    cursor: pointer;
  }

  .mobile-svc-list {
    display: grid;
    gap: 8px;
  }

  .mobile-svc-item {
    display: grid;
    gap: 3px;
    padding: 13px 14px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.028);
  }

  .mobile-svc-item strong {
    font-family: "Sora", sans-serif;
    font-size: 0.98rem;
    color: var(--text);
  }

  .mobile-svc-item span {
    font-size: 0.82rem;
    color: var(--muted);
  }

  .mobile-svc-item:active {
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
  }

  body.services-sheet-open {
    overflow: hidden;
  }

  /* ----- Distributor / solution detail pages ----- */
  .detail-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.03);
    color: var(--muted-strong);
    transition: border-color 220ms ease, color 220ms ease, background 220ms ease;
  }

  .detail-back:hover,
  .detail-back:focus-visible {
    color: var(--text);
    border-color: color-mix(in srgb, var(--accent) 28%, transparent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
  }

  .detail-nav-home {
    display: none;
  }

  /* The distributor logo showcase panel had a 260-360px height FLOOR
     (tuned for tablet/desktop's vw-based clamp) that a narrow phone could
     never shrink below, leaving a mostly-empty card around a small logo. */
  .distributor-detail-logo {
    height: clamp(160px, 44vw, 200px);
    padding: 20px;
  }

  .detail-hero-copy,
  .detail-hero-panel,
  .detail-section,
  .detail-card {
    padding: 20px;
  }

  .detail-grid {
    gap: 16px;
  }

  .detail-card-grid {
    gap: 16px;
  }
}

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

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}