/* ============================================================
   Design tokens — Design Bible ch.02
   Every visual value in this sheet comes from here. Never hardcode
   a colour, radius or spacing value in a component rule.
   ============================================================ */
:root {
  /* ---- brand ---- */
  --brand: #2563ff;
  --brand-hover: #3b82f6;
  --brand-active: #1d4ed8;
  --brand-soft: #6f9dff;
  --cyan: #00d4ff;
  --violet: #7c3aed;
  --grad-brand: linear-gradient(120deg, var(--cyan) 0%, var(--brand) 52%, var(--violet) 100%);

  /* ---- status ---- */
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;

  /* ---- backgrounds ---- */
  --bg: #0b1220;
  --bg-2: #111827;
  --surface: #162338;
  --surface-hover: #1c2e47;
  --surface-active: #223756;

  /* ---- text ---- */
  --text: #ffffff;
  --text-2: #cbd5e1;
  --text-muted: #ffffff;
  --text-disabled: #64748b;

  /* ---- borders ---- */
  --border: rgba(255, 255, 255, 0.1);
  --border-hover: rgba(37, 99, 255, 0.3);
  --border-focus: rgba(0, 212, 255, 0.45);

  /* ---- glass ---- */
  --glass: rgba(255, 255, 255, 0.06);
  --glass-strong: rgba(255, 255, 255, 0.08);
  --glass-blur: 14px;

  /* ---- radius ---- */
  --r-button: 16px;
  --r-input: 18px;
  --r-card: 24px;
  --r-hero: 32px;
  --r-dialog: 28px;
  --r-panel: 30px;
  --r-pill: 999px;

  /* ---- spacing scale (never use values outside this) ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;
  --s-40: 160px;

  /* ---- grid ---- */
  --container: 1280px;
  --container-wide: 1380px;
  --side-pad: 64px;
  --section-gap: 160px;
  --card-gap: 24px;

  /* ---- shadows ---- */
  --shadow-soft: 0 20px 60px rgba(0, 0, 0, 0.3);
  --shadow-hover: 0 35px 80px rgba(37, 99, 255, 0.18);
  --shadow-float: 0 50px 120px rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 0 60px rgba(37, 99, 255, 0.35);
  --glass-shadow: var(--shadow-soft), inset 1px 1px 0 rgba(255, 255, 255, 0.07);

  /* ---- typography scale ---- */
  --font-display: "Vazirmatn", "Space Grotesk", "Segoe UI", sans-serif;
  --font-body: "Vazirmatn", "Inter", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;

  /* Max lowered from 4.5rem (72px): at that size, in the hero's ~600px
     text column, the second line ("برای کسب‌وکارهای بزرگ") wrapped onto a
     third line — splitting the gradient-coloured phrase awkwardly across
     two lines with different colours mid-word. Verified in-browser:
     72px -> 2 lines just for that phrase (3 total); 3.6rem/58px -> fits
     on one line as intended (2 total). */
  --t-hero: clamp(2.6rem, 4.4vw, 3.6rem);   /* 58px */
  --t-h1: clamp(2.3rem, 4.4vw, 3.75rem);    /* 60px */
  --t-h2: clamp(1.9rem, 3.4vw, 3rem);       /* 48px */
  --t-h3: clamp(1.55rem, 2.4vw, 2.25rem);   /* 36px */
  --t-h4: clamp(1.35rem, 1.8vw, 1.75rem);   /* 28px */
  --t-h5: 1.375rem;                          /* 22px */
  --t-body: 1.125rem;                        /* 18px */
  --t-small: 1rem;                           /* 16px */
  --t-caption: 0.875rem;                     /* 14px — hard floor */

  /* ---- motion ---- */
  --d-fast: 150ms;
  --d-base: 250ms;
  --d-slow: 400ms;
  --d-slower: 600ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* ---- legacy aliases: keep older rules valid ---- */
  --night: var(--bg);
  --night-2: var(--surface);
  --night-3: var(--surface-hover);
  --brand-deep: var(--brand-active);
  --cream: var(--text);
  --cream-dim: var(--text-muted);
  --ink: #0a0f1e;
  --ink-soft: #4a5470;
  --line: var(--border);
  --line-soft: rgba(10, 15, 30, 0.1);
  --glass-border: var(--border);
  --glass-border-lit: var(--border-hover);
  --radius-s: 10px;
  --radius-m: var(--r-button);
  --radius-l: var(--r-card);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-2: var(--shadow-soft);
}

/* header surface tokens (themeable) */
:root {
  --header-glass: rgba(11, 18, 32, 0.72);
  --header-border: rgba(255, 255, 255, 0.1);
}

/* ---------------- light theme ----------------
   Everything in the sheet is token-driven, so flipping these
   variables re-themes the whole site. */
:root[data-theme="light"] {
  --bg: #eef2fb;
  --bg-2: #ffffff;
  --surface: #ffffff;
  --surface-hover: #f4f7fe;
  --surface-active: #e9effb;

  --text: #0b1226;
  --text-2: #33405c;
  --text-muted: #5a6784;
  --text-disabled: #ffffff;

  --border: rgba(16, 33, 74, 0.12);
  --border-hover: rgba(37, 99, 255, 0.32);

  --glass: rgba(255, 255, 255, 0.72);
  --glass-strong: rgba(255, 255, 255, 0.92);

  --shadow-soft: 0 20px 60px rgba(20, 40, 90, 0.1);
  --shadow-hover: 0 35px 80px rgba(37, 99, 255, 0.14);
  --shadow-float: 0 50px 120px rgba(20, 40, 90, 0.16);
  --glass-shadow: var(--shadow-soft), inset 1px 1px 0 rgba(255, 255, 255, 0.9);

  --header-glass: rgba(255, 255, 255, 0.82);
  --header-border: rgba(16, 33, 74, 0.12);
}

:root[data-theme="light"] .site-footer {
  background: rgba(255, 255, 255, 0.9);
}

:root[data-theme="light"] .mega-panel,
:root[data-theme="light"] .mobile-nav {
  background: rgba(255, 255, 255, 0.92);
}

:root[data-theme="light"] .sb-item {
  background: rgba(255, 255, 255, 0.8);
}

:root[data-theme="light"] .btn-primary {
  color: #fff;
}

:root[data-theme="light"] .hero-floor {
  opacity: 0.28;
}

:root[data-theme="light"] .particle {
  background: #2f7dfa;
  opacity: 0.5;
}

:root[data-theme="light"] .world-dots {
  stroke: rgba(47, 125, 250, 0.4);
}

/* the toggle swaps which icon is visible */
.icon-btn .ic-sun { display: none; }
:root[data-theme="light"] .icon-btn .ic-moon { display: none; }
:root[data-theme="light"] .icon-btn .ic-sun { display: block; }

/* gradient text helper */
.grad-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* reusable frosted-glass surface */
.glass {
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

* {
  box-sizing: border-box;
}

/* ---- SVG sizing baseline ----
   125 of the 213 inline <svg> tags in this project carry no width/height
   attribute and rely entirely on CSS for their size. Chrome falls back to
   a small default (300x150 replaced-element box, then shrinks to the flex
   line); Firefox instead lets an unsized SVG expand to fill its container,
   which is why a single chevron rendered as a full-height arrow there.

   This gives every SVG a sane default that any component rule can still
   override — it only fires where nothing more specific has set a size. */
svg {
  max-width: 100%;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Icon-context SVGs with no explicit size fall back to the current text
   size rather than expanding. Anything that genuinely needs to scale
   (illustrations, charts, maps) sets its own width/height and wins on
   specificity. */
button svg,
a svg,
li svg,
summary svg,
label svg {
  width: 1em;
  height: 1em;
}

html {
  scroll-behavior: smooth;
  /* base colour lives here so the fixed backdrop (z-index:-1) is not
     painted over by an opaque background on <body> */
  background: var(--bg);
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--t-body);
  background: transparent;
  color: var(--text);
  direction: rtl;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  position: relative;
  min-height: 100vh;
}

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

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ============================================================
   Scrollbar
   ============================================================ */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--brand) transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--brand);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: var(--r-pill);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--brand-hover);
  background-clip: content-box;
}

::selection {
  background: rgba(37, 99, 255, 0.35);
  color: #fff;
}

/* ============================================================
   Icon micro-interaction (spec: rotate slightly, move 2px)
   ============================================================ */
.pillar-icon,
.mp-item-icon svg,
.mega-item-icon svg,
.fb-item svg,
.m-shortcut svg {
  transition: transform var(--d-base) var(--ease);
}

.pillar:hover .pillar-icon,
.mp-item:hover .mp-item-icon svg,
.mega-item:hover .mega-item-icon svg,
.fb-item:hover svg,
.m-shortcut:hover svg {
  transform: translateY(-2px) rotate(-4deg);
}

@media (prefers-reduced-motion: reduce) {
  .pillar-icon,
  .mp-item-icon svg,
  .mega-item-icon svg,
  .fb-item svg,
  .m-shortcut svg {
    transition: none;
  }
  .pillar:hover,
  .dc-card:hover,
  .plan-card:hover,
  .btn:hover {
    transform: none;
  }
}

/* ============================================================
   Badges
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px var(--s-3);
  border-radius: var(--r-pill);
  font-size: var(--t-caption);
  font-weight: 600;
  line-height: 1;
  color: var(--brand-soft);
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border-hover);
  box-shadow: 0 0 20px rgba(37, 99, 255, 0.18);
}

.badge-success {
  color: var(--success);
  border-color: rgba(34, 197, 94, 0.32);
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.16);
}

.badge-warning {
  color: var(--warning);
  border-color: rgba(245, 158, 11, 0.32);
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.16);
}

/* ============================================================
   Inline links — animated underline
   ============================================================ */
.prose a,
.legal-list a,
.link {
  position: relative;
  color: var(--text);
  text-decoration: none;
  background-image: linear-gradient(var(--brand), var(--brand));
  background-repeat: no-repeat;
  background-position: 100% 100%;
  background-size: 0 1.5px;
  transition: color var(--d-base) var(--ease), background-size var(--d-base) var(--ease);
}

.prose a:hover,
.legal-list a:hover,
.link:hover {
  color: var(--brand-soft);
  background-size: 100% 1.5px;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--side-pad);
}

@media (max-width: 900px) {
  :root {
    --side-pad: 24px;
    --section-gap: 96px;
  }
}

.numerals {
  font-family: var(--font-mono);
  direction: ltr;
  unicode-bidi: isolate;
}


/* ============================================================
   Cloud OS background system — Design Bible ch.03
   Fixed, non-interactive, sits behind everything.
   All layers are compositor-friendly (transform/opacity only).
   ============================================================ */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

/* ---- 01 deep space ---- */
.bd-space {
  position: absolute;
  inset: 0;
  background: linear-gradient(178deg, #08111f 0%, #111827 46%, var(--surface) 100%);
}

:root[data-theme="light"] .bd-space {
  background: linear-gradient(178deg, #f8faff 0%, #eef2fb 55%, #e6ecf9 100%);
}

/* ---- 02 aurora engine ---- */
.bd-aurora {
  position: absolute;
  inset: -20% -10%;
  opacity: 0.18;
  filter: blur(120px);
}

:root[data-theme="light"] .bd-aurora {
  opacity: 0.3;
  filter: blur(110px);
}

.au {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}

.au-1 {
  top: 2%;
  right: 6%;
  width: 46vw;
  height: 46vw;
  background: radial-gradient(circle, var(--brand) 0%, transparent 68%);
  animation: auroraA 120s ease-in-out infinite alternate;
}

.au-2 {
  top: 22%;
  left: 2%;
  width: 40vw;
  height: 40vw;
  background: radial-gradient(circle, var(--cyan) 0%, transparent 68%);
  animation: auroraB 140s ease-in-out infinite alternate;
}

.au-3 {
  bottom: -6%;
  left: 34%;
  width: 44vw;
  height: 44vw;
  background: radial-gradient(circle, var(--violet) 0%, transparent 68%);
  animation: auroraC 160s ease-in-out infinite alternate;
}

@keyframes auroraA {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-14vw, 6vh, 0) scale(1.18); }
}

@keyframes auroraB {
  from { transform: translate3d(0, 0, 0) scale(1.1); }
  to   { transform: translate3d(12vw, -5vh, 0) scale(0.92); }
}

@keyframes auroraC {
  from { transform: translate3d(0, 0, 0) scale(0.95); }
  to   { transform: translate3d(-9vw, -8vh, 0) scale(1.2); }
}

/* ---- 10 light rays ---- */
.bd-rays {
  position: absolute;
  inset: -30% -10% 0;
  opacity: 0.05;
  background:
    conic-gradient(from 205deg at 22% 0%,
      transparent 0deg, #fff 8deg, transparent 20deg,
      transparent 34deg, #cfe0ff 42deg, transparent 54deg),
    conic-gradient(from 150deg at 82% 0%,
      transparent 0deg, #fff 7deg, transparent 18deg);
  filter: blur(8px);
  animation: rayDrift 90s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes rayDrift {
  from { transform: rotate(-3deg) translateY(0); }
  to   { transform: rotate(4deg) translateY(3vh); }
}

/* ---- 03 digital grid, vanishing into the horizon ---- */
.bd-grid {
  position: absolute;
  right: -20%;
  bottom: -8%;
  left: -20%;
  height: 62%;
  background-image:
    linear-gradient(rgba(120, 165, 245, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 165, 245, 0.04) 1px, transparent 1px);
  background-size: 74px 54px;
  transform: perspective(360px) rotateX(66deg) translateY(var(--grid-shift, 0px));
  transform-origin: bottom center;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 44%, transparent 96%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 44%, transparent 96%);
  will-change: transform;
}

:root[data-theme="light"] .bd-grid {
  background-image:
    linear-gradient(rgba(16, 33, 74, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 33, 74, 0.05) 1px, transparent 1px);
}

/* ---- 04/05/06 fiber + packets + constellation ---- */
.bd-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.62;
}

/* ---- 08 atmospheric fog ---- */
.bd-fog {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(58% 44% at 72% 26%, rgba(37, 99, 255, 0.16) 0%, transparent 66%),
    radial-gradient(50% 40% at 18% 64%, rgba(0, 212, 255, 0.09) 0%, transparent 66%);
  filter: blur(46px);
  opacity: var(--fog-density, 0.85);
  transform: translate3d(var(--fog-x, 0), calc(var(--fog-y, 0px) + var(--fog-scroll, 0px)), 0);
  transition: opacity 1.2s var(--ease);
  will-change: transform, opacity;
}

/* ---- 09 glass reflection sweep ---- */
.bd-reflect {
  position: absolute;
  inset: -40%;
  background: linear-gradient(105deg,
    transparent 42%,
    rgba(255, 255, 255, 0.045) 50%,
    transparent 58%);
  animation: reflectSweep 26s linear infinite;
  will-change: transform;
}

@keyframes reflectSweep {
  from { transform: translate3d(-18%, 0, 0) rotate(0deg); }
  to   { transform: translate3d(18%, 0, 0) rotate(6deg); }
}

/* ---- mouse spotlight ---- */
.bd-spot {
  position: absolute;
  top: 0;
  left: 0;
  width: 560px;
  height: 560px;
  margin: -280px 0 0 -280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 99, 255, 0.15) 0%, transparent 66%);
  opacity: 0;
  transition: opacity 0.6s var(--ease);
  will-change: transform;
}

.bd-spot.on {
  opacity: 1;
}

/* ---- 11 film grain ---- */
.bd-noise {
  position: absolute;
  inset: -100%;
  opacity: 0.02;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 1.1s steps(4) infinite;
  will-change: transform;
}

@keyframes grainShift {
  0%   { transform: translate3d(0, 0, 0); }
  25%  { transform: translate3d(-2%, 1%, 0); }
  50%  { transform: translate3d(1%, -2%, 0); }
  75%  { transform: translate3d(-1%, -1%, 0); }
  100% { transform: translate3d(2%, 1%, 0); }
}

/* ---- background breathing: ±2% brightness, ±1% opacity ---- */
.backdrop {
  animation: bdBreathe 5s ease-in-out infinite alternate;
}

@keyframes bdBreathe {
  from { filter: brightness(0.99); opacity: 0.995; }
  to   { filter: brightness(1.01); opacity: 1; }
}

/* ============================================================
   Performance & accessibility guards
   The chapter demands 60 FPS and reduced-motion support, so the
   expensive layers are dropped rather than merely slowed.
   ============================================================ */
@media (max-width: 900px) {
  .bd-canvas,
  .bd-reflect,
  .bd-noise,
  .bd-rays {
    display: none;
  }
  .bd-aurora {
    filter: blur(120px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .backdrop,
  .au,
  .bd-rays,
  .bd-reflect,
  .bd-noise {
    animation: none !important;
  }
  .bd-canvas,
  .bd-noise {
    display: none;
  }
  .bd-spot {
    display: none;
  }
}


/* ============================================================
   Section environments — ch.03 "every section has its own identity"
   Each is a single cheap overlay on the section, not a new layer stack.
   Only the sections that exist on this site are themed.
   ============================================================ */
.env {
  position: relative;
  isolation: isolate;
}

.env::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.55;
}

/* --- VPS / plans: printed circuit board --- */
.env-pcb::before {
  background-image:
    linear-gradient(90deg, rgba(0, 212, 255, 0.07) 1px, transparent 1px),
    linear-gradient(rgba(0, 212, 255, 0.07) 1px, transparent 1px),
    radial-gradient(circle at 20% 30%, rgba(37, 99, 255, 0.12) 0%, transparent 42%);
  background-size: 46px 46px, 46px 46px, 100% 100%;
  mask-image: radial-gradient(75% 65% at 50% 50%, #000 0%, transparent 82%);
  -webkit-mask-image: radial-gradient(75% 65% at 50% 50%, #000 0%, transparent 82%);
}

/* solder pads on the traces */
.env-pcb::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(0, 212, 255, 0.5) 0 1.5px, transparent 2px);
  background-size: 138px 138px;
  opacity: 0.28;
  animation: pcbPulse 6s ease-in-out infinite;
}

@keyframes pcbPulse {
  0%, 100% { opacity: 0.16; }
  50%      { opacity: 0.36; }
}

/* --- dedicated / infrastructure: datacenter aisle --- */
.env-dc::before {
  background:
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.035) 0 2px,
      transparent 2px 58px),
    linear-gradient(180deg, transparent 0%, rgba(37, 99, 255, 0.09) 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 70%, transparent 100%);
}

/* --- network map: orbital glow --- */
.env-orbit::before {
  background:
    radial-gradient(46% 60% at 50% 46%, rgba(0, 212, 255, 0.1) 0%, transparent 66%),
    radial-gradient(70% 90% at 50% 50%, transparent 52%, rgba(37, 99, 255, 0.08) 66%, transparent 74%);
}

/* --- statistics: control room holograms --- */
.env-control::before {
  background:
    repeating-linear-gradient(0deg,
      rgba(120, 175, 255, 0.045) 0 1px,
      transparent 1px 6px),
    radial-gradient(60% 70% at 50% 40%, rgba(37, 99, 255, 0.1) 0%, transparent 70%);
  mask-image: radial-gradient(80% 70% at 50% 50%, #000 0%, transparent 88%);
  -webkit-mask-image: radial-gradient(80% 70% at 50% 50%, #000 0%, transparent 88%);
}

/* --- security / trust: hexagonal cyber mesh --- */
.env-mesh::before {
  background-image:
    linear-gradient(120deg, rgba(37, 99, 255, 0.07) 1px, transparent 1px),
    linear-gradient(60deg, rgba(37, 99, 255, 0.07) 1px, transparent 1px),
    linear-gradient(rgba(0, 212, 255, 0.05) 1px, transparent 1px);
  background-size: 54px 94px;
  mask-image: radial-gradient(70% 70% at 50% 50%, #000 0%, transparent 84%);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000 0%, transparent 84%);
}

/* --- testimonials: warm ambient pocket --- */
.env-warm::before {
  background:
    radial-gradient(52% 62% at 26% 40%, rgba(124, 58, 237, 0.12) 0%, transparent 68%),
    radial-gradient(46% 56% at 78% 60%, rgba(0, 212, 255, 0.08) 0%, transparent 68%);
  filter: blur(10px);
}

/* --- footer: digital horizon --- */
.site-footer {
  position: relative;
  isolation: isolate;
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 100% at 50% 100%, rgba(37, 99, 255, 0.14) 0%, transparent 70%),
    linear-gradient(180deg, transparent 0%, rgba(0, 212, 255, 0.05) 100%);
}

/* horizon line */
.site-footer::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  opacity: 0.5;
}

@media (max-width: 900px) {
  .env::before,
  .env::after {
    opacity: 0.3;
  }
  .env-pcb::after {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .env-pcb::after {
    animation: none;
  }
}

/* ============================================================
   Header
   ============================================================ */

/* ---- floating glass header (ch.04) ---- */
.header-shell {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 9999;
  padding: 16px 20px 0;
  transition: transform 450ms var(--ease), padding 450ms var(--ease);
}

/* smart header: retracts on scroll down, returns on scroll up */
.header-shell.hidden-up {
  transform: translateY(calc(-100% - 20px));
}

.site-header {
  position: relative;
  max-width: var(--container-wide);
  margin: 0 auto;
}

.header-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  height: 82px;
  padding: 0 var(--s-10);
  border-radius: 22px;
  border: 1px solid transparent;
  background: transparent;
  transition: height 450ms var(--ease),
    padding 450ms var(--ease),
    background 450ms var(--ease),
    border-color 450ms var(--ease),
    box-shadow 450ms var(--ease);
}

/* The blur/background live on a ::before layer rather than on .header-bar
   itself. Reason: `backdrop-filter` on an element makes it a containing
   block for descendant `position: fixed` elements (per the CSS Filter
   Effects spec). The mega panels are `position: fixed` and nested inside
   this bar, so once .stuck was applied on scroll they started resolving
   against the 70px-tall bar instead of the viewport — which is why the
   panel rendered oversized and ran off-screen after scrolling.
   A pseudo-element carries the same visual effect without affecting the
   containing block of real descendants. */
.stuck .header-bar {
  height: 70px;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.stuck .header-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: rgba(10, 18, 32, 0.65);
  backdrop-filter: blur(28px) saturate(170%);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
}

:root[data-theme="light"] .stuck .header-bar {
  border-color: rgba(16, 33, 74, 0.1);
}

:root[data-theme="light"] .stuck .header-bar::before {
  background: rgba(255, 255, 255, 0.74);
}

/* glass reflection that follows the cursor across the bar */
.header-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(220px circle at var(--hx, 50%) var(--hy, 50%),
    rgba(255, 255, 255, 0.07) 0%, transparent 70%);
  transition: opacity var(--d-slow) var(--ease);
}

.stuck .header-bar:hover::after {
  opacity: 1;
}

/* content clears the fixed header */
body {
  padding-top: 98px;
}

@media (max-width: 900px) {
  .header-shell {
    padding: 12px 12px 0;
  }
  .header-bar {
    padding: 0 var(--s-5);
  }
  body {
    padding-top: 86px;
  }
}

/* ---- brand lockup ---- */
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.stuck .brand {
  transform: scale(0.94);
}

/* logo enters with a small upward fade; the cloud glows every 6s.
   It never rotates or bounces. */
.brand {
  animation: brandIn var(--d-slower) var(--ease) both;
}

@keyframes brandIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .brand {
    animation: none;
  }
}

.brand-logo {
  height: 34px;
  width: auto;
  display: block;
}

.mega {
  position: relative;
}

.mega-trigger {
  font: inherit;
  font-weight: inherit;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.mega-trigger svg {
  width: 10px;
  height: 10px;
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.mega:hover .mega-trigger svg,
.mega:focus-within .mega-trigger svg {
  transform: rotate(180deg);
}

.mega-panel {
  /* Anchored to .mega (position: relative) rather than the viewport.
     `absolute` keeps the panel tied to its trigger, so it can never drift
     when the header resizes on scroll. Verified first that no ancestor
     (.header-shell / .site-header / .header-bar / .main-nav / .mega) sets
     overflow:hidden, which would otherwise clip it. */
  /* MUST be `fixed`, not `absolute`.
     A 1180px-wide panel has to centre on the VIEWPORT. With `absolute` it
     centres on its trigger instead — and the triggers sit near the right
     edge in this RTL header, which pushed the panel 300px off-screen
     (measured in a real browser at 1440px: panel spanned 560→1740).
     `fixed` resolves against the viewport, so the centring is correct.

     The earlier concern that `fixed` breaks here was a different bug:
     .header-bar's backdrop-filter was creating a containing block. That
     is already fixed by moving the blur to a ::before layer, so `fixed`
     is safe again. */
  position: fixed;
  top: var(--header-bottom, 118px);
  left: 50%;
  width: min(1180px, calc(100vw - 32px));
  max-height: min(620px, calc(100vh - var(--header-bottom, 118px) - 24px));
  /* Raised from 0.82 to 0.95: at 82% the page behind (aurora, hero art,
     bright gradients) bled through and washed out the panel text. The
     blur is reduced to match — heavy blur over a near-opaque surface adds
     cost without adding any visible effect. */
  background: rgba(12, 20, 35, 0.95);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(37, 99, 255, 0.08),
    inset 1px 1px 0 rgba(255, 255, 255, 0.07);
  overflow: hidden;
  box-sizing: border-box;
  /* keeps the ambient layers' blend modes from bleeding onto the page */
  isolation: isolate;
  z-index: 9999;
  /* animated open/close instead of display:none, so the transition can
     actually run; visibility+pointer-events keep it inert when closed */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(-8px) scale(0.98);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

/* ambient light inside the panel */
.mega-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(46% 62% at 88% 0%, rgba(47, 125, 250, 0.14) 0%, transparent 64%),
    radial-gradient(40% 55% at 6% 4%, rgba(53, 215, 232, 0.09) 0%, transparent 62%);
}

.mega-panel::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  opacity: 0.7;
  z-index: 2;
}

/* `.is-open` is kept for any JS that toggles it; hover/focus-within
   drive it on desktop. The transform is set directly here (rather than
   via a keyframe) so it always matches the closed state's transform —
   a mismatch between the two makes the panel slide sideways as it opens. */
.mega.is-open .mega-panel,
.mega:hover .mega-panel,
.mega:focus-within .mega-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* ============================================================
   Split mega menu: static list (right/RTL) + dynamic preview
   ============================================================ */
.mega-panel.mega-split {
  width: min(1180px, calc(100vw - 32px));
}

.mega-split-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  display: grid;
  /* Explicit grid areas rather than relying on `direction: rtl` to place
     the columns. In an RTL grid the FIRST column resolves to the right,
     so "list stage" puts the product list on the right and the preview
     on the left — which is the intended reading order here. */
  /* list column widened from 0.72fr: it now holds TWO columns of items
     (8 products = 4 rows) instead of one long scrolling column */
  /* Balanced split: the list needs ~470px for two item columns, but the
     preview still needs room for its heading, features and artwork —
     giving the list too much made the preview clip its own content. */
  /* 470px floor (up from 440): measured in-browser, the longest product
     name "شبکه توزیع محتوا (CDN)" was exactly 13px short of fitting in a
     two-column list at 440px. */
  grid-template-columns: minmax(470px, 1.05fr) minmax(0, 1.2fr);
  grid-template-areas: "list stage";
  /* Row sizing: a floor so the preview column always has room for its
     heading, features, CTA and artwork (measured: it needs ~490px), and a
     ceiling so a long product list scrolls instead of stretching the
     panel. Without the floor, the two-column list made the row short and
     the preview clipped its own CTA button. */
  grid-template-rows: minmax(490px, auto);
  /* No min-height: a floor beats max-height in CSS and was what made the
     panel overflow on short screens. The panel sizes to its content and
     the list scrolls when it runs out of room. */
  max-height: min(620px, calc(100vh - 140px));
  padding: var(--s-5);
  gap: var(--s-5);
  overflow: hidden;
  box-sizing: border-box;
}

/* ---- left: never changes ---- */
/* Column wrapper. It does NOT scroll — it splits into a scrollable item
   area plus a pinned "view all" button. Previously the button lived
   inside the scrolling area, so with 8 products it sat below the fold and
   was invisible until the user scrolled (measured: button at 710-765px in
   a container whose visible area ended at 717px). */
.mp-list {
  grid-area: list;
  min-width: 0;
  min-height: 0;
  /* Was stretching to fill the grid row's full height, which is set by
     the PREVIEW column's needs (it needs ~490px for its heading, features
     and CTA). In two-column mode the item grid only needs ~300px, so
     `.mp-scroll` (flex:1) was growing into that unused ~85px and leaving
     a visible gap above the pinned "view all" button. `align-self: start`
     lets this column size to its own content instead of the taller row. */
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
  max-height: 100%;
}

/* the part that actually scrolls — only grows as far as its own content;
   `1 1 auto` (which actively stretched to fill leftover flex space) is
   replaced with `0 1 auto` so it sizes to content and only the overflow
   case (many items in single-column mode) triggers scrolling. */
.mp-scroll {
  flex: 0 1 auto;
  min-height: 0;
  /* two columns: with 7-8 products a single column needed scrolling and
     pushed the panel tall. Two columns fit everything without scrolling
     on normal screens. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  gap: var(--s-2);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}

.mp-scroll::-webkit-scrollbar {
  width: 6px;
}

.mp-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 99px;
}

.mp-scroll::-webkit-scrollbar-track {
  background: transparent;
}

/* ---- per-menu "view all" link at the foot of the product list ---- */
.mp-viewall {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin-top: var(--s-2);
  padding: 10px 13px;
  border-radius: 12px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--brand-soft);
  text-decoration: none;
  background: rgba(37, 99, 255, 0.07);
  border: 1px solid rgba(37, 99, 255, 0.16);
  transition: background var(--d-base) var(--ease), border-color var(--d-base) var(--ease);
}

.mp-viewall:hover {
  background: rgba(37, 99, 255, 0.13);
  border-color: rgba(37, 99, 255, 0.3);
}

.mp-viewall svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  transition: transform var(--d-base) var(--ease);
}

.mp-viewall:hover svg {
  transform: translateX(-3px);
}

.mp-item {
  display: grid;
  /* the arrow column is dropped in the 2-column layout — at this width it
     competed with the text for space and pushed titles into ellipsis */
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 14px;
  min-width: 0;
  text-decoration: none;
  color: var(--cream);
  border: 1px solid transparent;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.mp-item:hover,
.mp-item.active,
.mp-item:focus-visible {
  background: rgba(37, 99, 255, 0.14);
  border-color: var(--border-hover);
  box-shadow: 0 0 30px rgba(37, 99, 255, 0.18);
  /* `scale(1.015)` was removed: scaling an item inside a fixed-width
     list makes it wider than its container, so its border and the
     underline beneath the subtitle spilled past the card edge. The
     horizontal nudge alone reads as "selected" without resizing. */
  transform: translateX(-4px);
}

.mp-item:hover .mp-item-text b,
.mp-item.active .mp-item-text b {
  color: #fff;
}

.mp-item.active .mp-item-icon,
.mp-item:hover .mp-item-icon {
  transform: translateY(-2px);
}

.mp-item-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: rgba(37, 99, 255, 0.14);
  border: 1px solid rgba(37, 99, 255, 0.24);
  transition: background var(--d-base) var(--ease),
    border-color var(--d-base) var(--ease),
    transform var(--d-base) var(--ease);
}

.mp-item.active .mp-item-icon,
.mp-item:hover .mp-item-icon {
  background: rgba(47, 125, 250, 0.26);
  border-color: var(--glass-border-lit);
}

.mp-item-icon svg {
  width: 18px;
  height: 18px;
  color: var(--brand-soft);
}

.mp-item-text {
  min-width: 0;
}

.mp-item-text b {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.45;
  /* Product names wrap rather than truncate. These are the labels people
     navigate by, so hiding the end of one costs more than the slight row
     height variation wrapping introduces.
     `white-space: normal` is explicit because the sibling rule
     `.mp-item-text span` sets nowrap, and <b> inherits it from the shared
     .mp-item-text parent — without this the title stayed on one line and
     kept getting clipped. */
  white-space: normal;
  overflow-wrap: break-word;
}

.mp-item-text span {
  display: block;
  font-size: 0.85rem;
  /* was --cream-dim, an alias of --text-muted (#94a3b8); --text-2
     (#cbd5e1) is a real contrast increase. Size raised from 0.79rem —
     at ~12.6px this read as faint regardless of colour. */
  color: var(--text-2);
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* the active row gets full-strength text so the selection is obvious */
.mp-item.active .mp-item-text b {
  color: var(--text);
}

.mp-item.active .mp-item-text span {
  color: var(--brand-soft);
}

/* Hidden in the two-column list: the grid now has only an icon and a
   text column, so a third element would wrap onto its own line. The
   hover/active background and colour shift already signal selection. */
.mp-item-arrow {
  display: none;
}

/* ---- right: swaps on hover ---- */
.mp-stage {
  grid-area: stage;
  position: relative;
  padding: var(--s-8) var(--s-8);
  overflow: hidden;
  min-width: 0;
  border-radius: 20px;
  /* grid children default to min-height:auto, which would push the panel
     past its cap; this lets the stage stay inside it */
  min-height: 0;
}

.mp-panel {
  position: absolute;
  inset: var(--s-8);
  display: grid;
  grid-template-columns: 1fr 42%;
  gap: var(--s-8);
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.985);
  filter: blur(6px);
  transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.35s;
}

.mp-panel.active {
  opacity: 1;
  visibility: visible;
  transform: none;
  filter: blur(0);
  transition-delay: 0s;
}

.mp-panel-copy h5 {
  font-family: var(--font-display);
  font-size: var(--t-h4);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-3);
  line-height: 1.45;
  /* longest headline is 40 chars; capping the measure keeps it to two
     tidy lines instead of one line that stretches the copy column */
  max-width: 22ch;
  overflow-wrap: break-word;
}

.mp-panel-copy p {
  margin: 0 0 var(--s-5);
  font-size: var(--t-small);
  line-height: 1.9;
  color: var(--text-muted);
  max-width: 44ch;
}

/* three features */
.mp-features {
  list-style: none;
  margin: 0 0 var(--s-6);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.mp-features li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-caption);
  color: var(--text-2);
}

.mp-features svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  padding: 3px;
  border-radius: 50%;
  color: var(--cyan);
  background: rgba(0, 212, 255, 0.12);
  border: 1px solid rgba(0, 212, 255, 0.24);
}

/* actions: primary + secondary */
.mp-actions {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  flex-wrap: wrap;
}

.mp-cta .cta-arrow {
  width: 15px;
  height: 15px;
  transition: transform var(--d-base) var(--ease);
}

.mp-cta:hover .cta-arrow {
  transform: translateX(-4px);
}

.mp-cta2 {
  font-size: var(--t-caption);
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--d-base) var(--ease);
}

.mp-cta2:hover {
  color: var(--brand-soft);
}

/* ---- right side: art + small live dashboard ---- */
.mp-panel-side {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-width: 0;
}

.mp-dash {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
}

.mp-dash-cell {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(37, 99, 255, 0.22);
  border-radius: 18px;
  padding: var(--s-3);
  text-align: center;
  box-shadow: 0 0 22px rgba(37, 99, 255, 0.1);
  min-width: 0;
  overflow: hidden;
}

.mp-dash-cell span {
  display: block;
  font-size: 0.78rem;
  color: var(--text-2);
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp-dash-cell b {
  display: block;
  font-family: var(--font-mono);
  direction: ltr;
  /* values reach 11 chars ("1.29M تومان") inside a 1/3-width cell —
     shrink slightly and let the unit sit on its own line so nothing
     pushes past the cell border */
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
}

.mp-dash-cell b i {
  display: block;
  font-style: normal;
  font-size: 0.7rem;
  color: var(--text-2);
  margin-top: 2px;
}

.mp-dash-chart {
  grid-column: 1 / -1;
  height: 44px;
  border-radius: 18px;
  padding: var(--s-2) var(--s-3);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(37, 99, 255, 0.18);
}

.mp-dash-chart svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.mp-dash-chart polyline {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(0, 212, 255, 0.6));
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
}

.mp-panel.active .mp-dash-chart polyline {
  animation: sparkDraw 800ms var(--ease) forwards;
}

.mp-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}

.mp-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line);
}

.mp-stat i {
  font-style: normal;
  font-size: 0.78rem;
  color: var(--cream-dim);
}

.mp-stat b {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--cream);
}

.mp-panel-art svg {
  width: 100%;
  height: auto;
  overflow: visible;
  animation: mpArtFloat 7s ease-in-out infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .mp-panel,
  .mp-panel-art svg {
    transition: opacity 0.01ms;
    animation: none;
  }
}

/* Below ~1200px the panel is too narrow for two item columns without
   truncating the longer product names, so it falls back to one column.
   Verified in-browser: at 1100px, all 8 titles were being clipped. */
@media (max-width: 1199px) {
  .mp-scroll {
    grid-template-columns: 1fr;
  }
  /* Reclaim horizontal space for the text at narrow widths — measured
     in-browser, the longest title ("شبکه توزیع محتوا (CDN)") was 27px
     short of fitting. Trimming the column padding covers most of it. */
  .mega-split-inner {
    grid-template-columns: minmax(300px, 1fr) minmax(0, 1.1fr);
  }
  .mp-list {
    padding: var(--s-3);
  }
  .mp-item {
    padding: 11px 9px;
    gap: 8px;
  }
}

/* tablet: narrower panel, artwork drops, dashboard stays */
@media (max-width: 1199px) and (min-width: 721px) {
  .mega-panel.mega-split {
    width: min(960px, calc(100vw - 24px));
  }
  .mega-split-inner {
    grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.5fr);
    /* the old `min-height: 440px` here was a second copy of the bug that
       made the panel overflow on short screens — removed, not reduced */
    gap: var(--s-4);
    padding: var(--s-4);
  }
  .mp-panel {
    grid-template-columns: 1fr;
    align-content: center;
    padding: 18px;
    gap: 12px;
  }
  .mp-panel-art {
    display: none;
  }
  .mp-dash {
    max-width: 420px;
  }
  .mp-list {
    padding: var(--s-4);
  }
}

/* mobile: the desktop mega panel is never shown — the existing mobile
   drawer (.mobile-nav) handles navigation below this width.

   NOTE: this uses 720px, not the 991px the brief suggested, because that
   is where THIS project actually hides `.main-nav` (which contains the
   mega triggers). Using 991px would have created a dead zone between
   720–991px where the triggers were still visible but their panels were
   forcibly hidden — a menu that looks clickable and does nothing. */
@media (max-width: 720px) {
  .mega-panel {
    display: none !important;
  }
}

/* ---- in-menu ambient environment (ch.05 background) ---- */
.mm-env {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.mm-aurora {
  position: absolute;
  inset: -30%;
  /* toned down from 0.5 — these ambient layers sit directly behind the
     menu text and were the main source of the washed-out look */
  opacity: 0.28;
  filter: blur(90px);
  background:
    radial-gradient(32% 46% at 78% 18%, rgba(37, 99, 255, 0.5) 0%, transparent 68%),
    radial-gradient(28% 40% at 18% 78%, rgba(0, 212, 255, 0.32) 0%, transparent 68%),
    radial-gradient(26% 38% at 52% 4%, rgba(124, 58, 237, 0.3) 0%, transparent 70%);
  animation: mmAurora 40s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes mmAurora {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-4%, 3%, 0) scale(1.12); }
}

/* tiny stars */
.mm-stars {
  position: absolute;
  inset: 0;
  opacity: 0.25;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.7) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(180, 215, 255, 0.5) 0 1px, transparent 1.4px);
  background-size: 130px 110px, 190px 160px;
  background-position: 0 0, 60px 40px;
  animation: mmTwinkle 6s ease-in-out infinite alternate;
}

@keyframes mmTwinkle {
  from { opacity: 0.16; }
  to   { opacity: 0.3; }
}

/* perspective grid at the base */
.mm-grid {
  position: absolute;
  right: -10%;
  bottom: -14%;
  left: -10%;
  height: 46%;
  background-image:
    linear-gradient(rgba(140, 185, 255, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 185, 255, 0.09) 1px, transparent 1px);
  background-size: 56px 40px;
  transform: perspective(300px) rotateX(64deg);
  transform-origin: bottom center;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 50%, transparent 96%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 50%, transparent 96%);
}

/* cursor spotlight inside the menu */
.mm-spot {
  position: absolute;
  top: 0;
  left: 0;
  width: 420px;
  height: 420px;
  margin: -210px 0 0 -210px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 99, 255, 0.16) 0%, transparent 66%);
  opacity: 0;
  transition: opacity var(--d-slow) var(--ease);
  will-change: transform;
}

.mega-panel:hover .mm-spot {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .mm-aurora,
  .mm-stars {
    animation: none;
  }
  .mm-spot {
    display: none;
  }
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  justify-content: center;
}

.main-nav a,
.mega-trigger {
  position: relative;
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--t-body);
  font-weight: 600;
  padding: 10px var(--s-5);
  border-radius: var(--r-pill);
  transition: color var(--d-base) var(--ease),
    background var(--d-base) var(--ease),
    text-shadow var(--d-base) var(--ease);
  white-space: nowrap;
}

/* underline grows outwards from the centre */
.main-nav a::after,
.mega-trigger::after {
  content: "";
  position: absolute;
  right: var(--s-5);
  left: var(--s-5);
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand);
  box-shadow: 0 0 12px var(--brand);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--d-slow) var(--ease);
}

.main-nav a:hover,
.mega-trigger:hover,
.mega:hover .mega-trigger {
  color: #fff;
  text-shadow: 0 0 18px rgba(37, 99, 255, 0.55);
}

.main-nav a:hover::after,
.mega-trigger:hover::after,
.mega:hover .mega-trigger::after,
.main-nav a.active::after,
.mega-trigger.active::after {
  transform: scaleX(1);
}

/* active page: glass pill + short blue indicator */
.main-nav a.active,
.mega-trigger.active {
  color: #fff;
  background: rgba(37, 99, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(37, 99, 255, 0.3),
    0 0 24px rgba(37, 99, 255, 0.16);
}

.main-nav a.active::after,
.mega-trigger.active::after {
  transform: scaleX(0.42);
  bottom: 6px;
}

@media (max-width: 1240px) {
  .main-nav a,
  .mega-trigger {
    padding: 10px var(--s-3);
    font-size: var(--t-small);
  }
}

.main-nav a.active {
  color: var(--brand);
}

.nav-cta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

/* ---- icon buttons ---- */
.icon-btn {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: transparent;
  border: 1px solid var(--glass-border);
  color: var(--cream-dim);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.icon-btn svg {
  width: 17px;
  height: 17px;
}

.icon-btn:hover {
  color: var(--brand-soft);
  border-color: var(--glass-border-lit);
  background: rgba(47, 125, 250, 0.1);
}

.burger {
  display: grid;
  gap: 4px;
  width: 18px;
}

.burger i {
  display: block;
  height: 1.8px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}

.nav-toggle-btn[aria-expanded="true"] .burger i:nth-child(1) {
  transform: translateY(5.8px) rotate(45deg);
}

.nav-toggle-btn[aria-expanded="true"] .burger i:nth-child(2) {
  opacity: 0;
}

.nav-toggle-btn[aria-expanded="true"] .burger i:nth-child(3) {
  transform: translateY(-5.8px) rotate(-45deg);
}

.nav-toggle-btn {
  display: none;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--cream);
  width: 40px;
  height: 40px;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* full-height drawer sliding in from the right (ch.04) */
.mobile-nav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100%);
  z-index: 10001;
  display: flex;
  flex-direction: column;
  background: rgba(10, 18, 32, 0.96);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border-left: 1px solid var(--border);
  box-shadow: -30px 0 90px rgba(0, 0, 0, 0.5);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--d-slow) var(--ease),
    visibility 0s linear var(--d-slow);
}

.mobile-nav.open {
  transform: none;
  visibility: visible;
  transition-delay: 0s;
}

.mn-scroll {
  flex: 1;
  overflow-y: auto;
  padding: calc(var(--s-16) + 14px) var(--s-5) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.mn-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--border);
}

.mn-top .lang-pill {
  display: inline-flex;
}

/* CTA pinned to the bottom of the drawer */
.mn-foot {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5) calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  background: rgba(10, 18, 32, 0.92);
}

.mn-foot .btn {
  min-height: 48px;
  padding: 0 var(--s-4);
  font-size: var(--t-caption);
}

/* veil behind the drawer */
.mn-veil {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(5, 9, 20, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--d-slow) var(--ease),
    visibility 0s linear var(--d-slow);
}

.mn-veil.open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

body.nav-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav,
  .mn-veil {
    transition: none;
  }
}

/* accordion sections */
.m-acc {
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  overflow: hidden;
}

.m-acc summary {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 56px;
  padding: var(--s-4);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--cream);
}

.m-acc summary::-webkit-details-marker {
  display: none;
}

.m-acc-icon {
  width: 18px;
  height: 18px;
  color: var(--brand-soft);
  flex-shrink: 0;
}

.m-acc-chev {
  width: 15px;
  height: 15px;
  margin-right: auto;
  color: var(--cream-dim);
  transition: transform 0.2s ease;
}

.m-acc[open] .m-acc-chev {
  transform: rotate(180deg);
}

.m-acc-body {
  display: flex;
  flex-direction: column;
  padding: 0 16px 10px;
}

.m-acc-body a {
  display: flex;
  align-items: center;
  min-height: 48px;
  color: var(--text-muted);
  text-decoration: none;
  padding: var(--s-3) 0 var(--s-3) var(--s-2);
  border-top: 1px solid var(--border);
  font-size: var(--t-small);
}

.m-acc-body a:hover {
  color: var(--brand-soft);
}

/* unavailable services: visibly de-emphasised, never priced */
.m-acc-body a.is-off {
  color: var(--text-disabled);
}

.m-acc-viewall {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  color: var(--brand-soft) !important;
  font-weight: 600;
}

.m-acc-viewall svg {
  width: 16px;
  height: 16px;
  transition: transform var(--d-base) var(--ease);
}

.m-acc-viewall:hover svg {
  transform: translateX(-3px);
}

.off-tag {
  font-style: normal;
  margin-inline-start: var(--s-2);
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: 0.66rem;
  color: var(--warning);
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.28);
}

/* support shortcuts */
.m-shortcuts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 4px;
}

.m-shortcut {
  display: grid;
  grid-template-columns: 30px 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  padding: 13px 14px;
  border-radius: 14px;
  background: rgba(47, 125, 250, 0.1);
  border: 1px solid rgba(47, 125, 250, 0.24);
  text-decoration: none;
  color: var(--cream);
}

.m-shortcut svg {
  grid-row: 1 / 3;
  width: 26px;
  height: 26px;
  align-self: center;
  color: var(--brand-soft);
}

.m-shortcut b {
  font-size: 0.85rem;
  font-weight: 600;
}

.m-shortcut span {
  font-size: 0.8rem;
  color: var(--cream-dim);
}

@media (max-width: 420px) {
  .m-shortcuts {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Header right-side actions (ch.04)
   ============================================================ */
.status-pod {
  position: relative;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 8px var(--s-4);
  border-radius: var(--r-pill);
  text-decoration: none;
  font-size: var(--t-caption);
  font-weight: 600;
  color: var(--text-2);
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.26);
  white-space: nowrap;
  transition: background var(--d-base) var(--ease), border-color var(--d-base) var(--ease);
}

.status-pill:hover {
  background: rgba(34, 197, 94, 0.18);
  border-color: rgba(34, 197, 94, 0.44);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  flex-shrink: 0;
  animation: statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
  70%      { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
}

.status-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 280px;
  padding: var(--s-4);
  border-radius: 20px;
  background: rgba(12, 20, 35, 0.92);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--d-base) var(--ease),
    transform var(--d-base) var(--ease),
    visibility 0s linear var(--d-base);
}

.status-pod:hover .status-panel,
.status-pod:focus-within .status-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.sp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-3);
  font-size: var(--t-caption);
}

.status-panel ul {
  list-style: none;
  margin: 0 0 var(--s-3);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.status-panel li {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: 0.8rem;
  color: var(--text-muted);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--border);
}

.status-panel li i {
  font-style: normal;
  color: var(--success);
}

.sp-link {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--brand-soft);
  text-decoration: none;
}

.sp-link:hover {
  text-decoration: underline;
}

.lang-pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--glass);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  direction: ltr;
}

.lang-pill span {
  padding: 4px 9px;
  border-radius: var(--r-pill);
  line-height: 1;
}

.lang-on {
  background: var(--brand);
  color: #fff;
  font-weight: 700;
}

/* English is not published yet, so this shows as unavailable rather
   than linking somewhere that does not exist */
.lang-off {
  color: var(--text-disabled);
  cursor: not-allowed;
}

.btn-login {
  background: transparent;
}

.btn-deploy {
  animation: deployBreathe 5s ease-in-out infinite;
}

.btn-deploy .cta-arrow {
  width: 15px;
  height: 15px;
  transition: transform var(--d-base) var(--ease);
}

.btn-deploy:hover .cta-arrow {
  transform: translateX(-4px);
}

@keyframes deployBreathe {
  0%, 100% { box-shadow: 0 10px 30px rgba(37, 99, 255, 0.26); }
  50%      { box-shadow: 0 10px 34px rgba(37, 99, 255, 0.46), var(--shadow-glow); }
}

@media (prefers-reduced-motion: reduce) {
  .status-dot,
  .btn-deploy {
    animation: none;
  }
}

@media (max-width: 1240px) {
  .status-pill .status-label,
  .lang-pill {
    display: none;
  }
  .status-pill {
    padding: 8px 10px;
  }
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 54px;
  padding: 0 var(--s-8);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-small);
  letter-spacing: 0.01em;
  border-radius: var(--r-button);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--d-base) var(--ease),
    border-color var(--d-base) var(--ease),
    color var(--d-base) var(--ease),
    transform var(--d-base) var(--ease),
    box-shadow var(--d-base) var(--ease);
}

.btn:hover {
  transform: translateY(-4px) scale(1.03);
}

.btn:active {
  transform: translateY(-1px) scale(1.01);
}

.btn-primary {
  background: var(--grad-brand);
  color: #fff;
  box-shadow: 0 10px 30px rgba(37, 99, 255, 0.28);
}

.btn-primary:hover {
  box-shadow: var(--shadow-glow), 0 16px 40px rgba(37, 99, 255, 0.3);
}

.btn-ghost {
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  color: var(--text);
  border-color: var(--border);
}

.btn-ghost:hover {
  border-color: var(--border-hover);
  color: var(--brand-soft);
  box-shadow: var(--shadow-hover);
}

.btn-dark {
  background: var(--night);
  color: var(--cream);
  border-color: var(--line);
}

.btn-dark:hover {
  border-color: var(--brand);
}

.btn-accent {
  background: transparent;
  color: var(--dc-color, var(--brand));
  border-color: var(--dc-color, var(--brand));
}

.btn-accent:hover {
  background: var(--dc-color, var(--brand));
  color: var(--night);
}

.btn-quiet {
  background: transparent;
  color: var(--text-muted);
  border-color: transparent;
  min-height: 44px;
  padding: 0 var(--s-4);
}

.btn-quiet:hover {
  color: var(--text);
  transform: none;
}

.btn-pill {
  border-radius: var(--r-pill);
}

.btn-pill.btn-primary {
  position: relative;
  overflow: hidden;
}

/* sheen sweep on hover */
.btn-pill.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.4) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-pill.btn-primary:hover::after {
  transform: translateX(120%);
}

/* Visually hidden but announced to screen readers — standard pattern,
   not display:none (which assistive tech also skips). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.btn-block {
  width: 100%;
}

/* Out-of-stock plan state: occupies the same slot as the order button so
   card heights stay aligned, but reads clearly as unavailable rather than
   as a clickable CTA. */
.plan-unavailable {
  background: transparent;
  border: 1px dashed var(--border-hover);
  color: var(--text-muted);
  cursor: not-allowed;
  justify-content: center;
}

.plan-unavailable:hover {
  background: transparent;
  color: var(--text-muted);
  box-shadow: none;
  transform: none;
}

/* compact variant for dense areas (header, menus) where the
   54px enterprise button would overflow the container */
.btn-sm {
  min-height: 42px;
  padding: 0 var(--s-5);
  font-size: var(--t-caption);
  border-radius: 12px;
}

.nav-cta .btn {
  min-height: 42px;
  padding: 0 var(--s-5);
  font-size: var(--t-caption);
}

.nav-cta .btn:hover {
  transform: translateY(-2px) scale(1.02);
}

.mp-cta {
  min-height: 46px;
  padding: 0 var(--s-6);
  font-size: var(--t-caption);
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  background: transparent;
  color: var(--text);
  /* Was `min-height: 100vh` + 140px top padding, which forced the section
     to be at least a full screen tall regardless of content, then
     vertically centred it. On any viewport where the actual hero content
     is shorter than 100vh (most), that combination produced a large dead
     gap above the eyebrow/title — measured at 149px between the header
     and the eyebrow text before this fix, 73px after. */
  display: flex;
  align-items: center;
  padding: 64px 0 96px;
}

.hero > .container {
  max-width: 1320px;
}

/* soft bloom behind the hero copy */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(48% 62% at 74% 34%, rgba(47, 125, 250, 0.2) 0%, transparent 68%);
}

.hero-grid {
  display: grid;
  /* was 1.05fr 0.95fr — widened the text column so the hero title has
     room to read as two clean lines instead of wrapping into three */
  grid-template-columns: 1.2fr 0.8fr;
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--brand);
  font-weight: 600;
  letter-spacing: 0.12em;
  margin-bottom: 18px;
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--brand);
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-hero);
  line-height: 1.28;
  margin: 0 0 var(--s-6);
  letter-spacing: -0.025em;
}

.hero p.lead {
  font-size: 1.08rem;
  color: var(--cream-dim);
  max-width: 46ch;
  margin: 0 0 34px;
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 8px;
  padding: 18px 4px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.hero-stats .stat {
  padding: 0 26px;
  border-left: 1px solid var(--line);
}

.hero-stats .stat:first-child {
  padding-right: 0;
}

.hero-stats .stat:last-child {
  border-left: none;
}

.hero-stats .stat b {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--cream);
  direction: ltr;
  text-align: right;
  line-height: 1.3;
}

.hero-stats .stat span {
  font-size: 0.78rem;
  color: var(--cream-dim);
}

@media (max-width: 560px) {
  .hero-stats .stat {
    padding: 8px 16px;
  }
  .hero-stats .stat:first-child {
    padding-right: 0;
  }
}

/* ============================================================
   Hero — Cloud Command Center
   ============================================================ */
.hero-copy {
  position: relative;
  z-index: 3;
}

/* ---- ambient environment ---- */
.hero-env {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.hero-rays {
  position: absolute;
  top: -28%;
  left: 8%;
  width: 62%;
  height: 130%;
  background:
    conic-gradient(from 200deg at 50% 0%,
      transparent 0deg,
      rgba(47, 125, 250, 0.13) 12deg,
      transparent 26deg,
      rgba(123, 107, 245, 0.1) 42deg,
      transparent 58deg,
      rgba(53, 215, 232, 0.09) 74deg,
      transparent 92deg);
  filter: blur(6px);
  animation: raySweep 22s ease-in-out infinite alternate;
}

@keyframes raySweep {
  from { transform: rotate(-5deg) scale(1); opacity: 0.75; }
  to   { transform: rotate(6deg) scale(1.08); opacity: 1; }
}

/* futuristic grid floor */
.hero-floor {
  position: absolute;
  right: 0;
  bottom: -10px;
  left: 0;
  height: 46%;
  background-image:
    linear-gradient(rgba(90, 160, 255, 0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90, 160, 255, 0.22) 1px, transparent 1px);
  background-size: 60px 44px;
  transform: perspective(340px) rotateX(62deg);
  transform-origin: bottom center;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 42%, transparent 92%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 42%, transparent 92%);
  opacity: 0.5;
}

/* drifting particles */
.hero-particles {
  position: absolute;
  inset: 0;
}

.particle {
  position: absolute;
  bottom: -12px;
  border-radius: 50%;
  background: var(--brand-soft);
  opacity: 0;
  box-shadow: 0 0 7px rgba(120, 190, 255, 0.85);
  animation-name: particleRise;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes particleRise {
  0%   { transform: translate(0, 0); opacity: 0; }
  12%  { opacity: 0.75; }
  85%  { opacity: 0.5; }
  100% { transform: translate(var(--drift, 0), -102vh); opacity: 0; }
}

/* soft glow that follows the cursor */
.hero-cursor-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 460px;
  height: 460px;
  margin: -230px 0 0 -230px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 125, 250, 0.16) 0%, transparent 62%);
  opacity: 0;
  transition: opacity 0.5s ease;
  will-change: transform;
}

.hero:hover .hero-cursor-glow {
  opacity: 1;
}

/* ---- trust row under the CTAs ---- */
/* ---- trust badges: rounded glass pills ---- */
.trust-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-8);
}

.trust-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 8px var(--s-4);
  border-radius: var(--r-pill);
  font-size: var(--t-caption);
  font-weight: 600;
  color: var(--text-2);
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
  transition: border-color var(--d-base) var(--ease), color var(--d-base) var(--ease);
}

.trust-pill:hover {
  border-color: var(--border-hover);
  color: #fff;
}

.trust-pill i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
}

/* ---- live statistics ---- */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-8);
  padding-top: var(--s-8);
  border-top: 1px solid var(--border);
}

.hstat b {
  display: block;
  font-family: var(--font-mono);
  direction: ltr;
  text-align: right;
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1.2;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hstat span {
  display: block;
  margin-top: 4px;
  font-size: var(--t-caption);
  color: var(--text-muted);
}

@media (max-width: 620px) {
  .hero-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-5) var(--s-3);
  }
}

/* ---- hero CTAs: 58px per spec ---- */
.btn-hero {
  min-height: 58px;
  padding: 0 var(--s-8);
  font-size: var(--t-small);
}

.btn-hero .cta-arrow {
  width: 16px;
  height: 16px;
  transition: transform var(--d-base) var(--ease);
}

.btn-hero:hover .cta-arrow {
  transform: translateX(-5px);
}

/* ---- scroll response: hero eases back as the page moves ---- */
.hero-stage {
  transform: scale(var(--hero-zoom, 1)) translateY(var(--hero-rise, 0px));
  transition: transform 120ms linear;
}

.hero-copy {
  opacity: var(--hero-fade, 1);
}

@media (prefers-reduced-motion: reduce) {
  .hero-stage {
    transform: none;
  }
  .hero-copy {
    opacity: 1;
  }
}

/* ---- world globe: far background layer ---- */
.stage-globe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 128%;
  transform: translate(-50%, -50%);
  z-index: 0;
  opacity: 0.5;
  pointer-events: none;
}

.stage-globe svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.globe-limb {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 1;
  opacity: 0.35;
}

.globe-spin {
  transform-box: fill-box;
  transform-origin: center;
  animation: globeSpin 120s linear infinite;
}

@keyframes globeSpin {
  to { transform: rotate(360deg); }
}

.globe-lines ellipse {
  fill: none;
  stroke: var(--brand);
  stroke-width: 0.8;
  opacity: 0.22;
}

.globe-nodes circle {
  fill: var(--cyan);
  opacity: 0.85;
  filter: drop-shadow(0 0 4px var(--cyan));
}

.globe-routes path {
  fill: none;
  stroke: var(--brand-soft);
  stroke-width: 1;
  stroke-dasharray: 3 6;
  opacity: 0.5;
}

.globe-packets circle {
  fill: #fff;
  filter: drop-shadow(0 0 5px var(--cyan));
}

@media (prefers-reduced-motion: reduce) {
  .globe-spin {
    animation: none;
  }
  .globe-packets {
    display: none;
  }
}

/* ---- the command-center stage ---- */
.hero-stage {
  position: relative;
  z-index: 2;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1100px;
}

.stage-inner {
  position: relative;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 1 / 1.06;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* cloud */
.stage-cloud {
  position: absolute;
  top: 2%;
  left: 50%;
  width: 54%;
  transform: translateX(-50%);
  animation: cloudDrift 11s ease-in-out infinite;
}

.stage-cloud svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

@keyframes cloudDrift {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, -12px); }
}

/* energy lines cloud -> rack */
.stage-energy {
  position: absolute;
  top: 16%;
  left: 50%;
  width: 62%;
  height: 26%;
  transform: translateX(-50%);
  overflow: visible;
}

.energy-line {
  fill: none;
  stroke: var(--brand-soft);
  stroke-width: 1.6;
  stroke-dasharray: 10 90;
  opacity: 0.85;
  filter: drop-shadow(0 0 4px rgba(77, 155, 255, 0.9));
  animation: energyFlow 2.6s linear infinite;
}

.energy-line.d1 { animation-delay: -0.85s; }
.energy-line.d2 { animation-delay: -1.7s; }

@keyframes energyFlow {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}

/* rack */
.stage-rack {
  position: absolute;
  top: 17%;
  left: 50%;
  width: 84%;
  transform: translateX(-50%);
  z-index: 2;
}

/* ---- holographic rings orbiting the platform ---- */
.stage-rings {
  position: absolute;
  bottom: 6%;
  left: 50%;
  width: 96%;
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
}

.stage-rings svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.holo-ring {
  fill: none;
  stroke: var(--brand);
  stroke-width: 1;
  opacity: 0.4;
  transform-box: fill-box;
  transform-origin: center;
  animation: holoSpin 16s linear infinite;
}

.holo-ring.r2 {
  stroke: var(--cyan);
  opacity: 0.3;
  animation-duration: 24s;
  animation-direction: reverse;
}

.holo-ring.r3 {
  stroke: var(--violet);
  opacity: 0.22;
  animation-duration: 32s;
}

@keyframes holoSpin {
  to { transform: rotate(360deg); }
}

.holo-dot {
  fill: var(--cyan);
  animation: holoOrbit 9s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes holoOrbit {
  to { transform: rotate(360deg); }
}

/* ---- volumetric fog hugging the platform ---- */
.stage-fog {
  position: absolute;
  bottom: 2%;
  left: 50%;
  width: 120%;
  height: 26%;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(47, 125, 250, 0.3) 0%, rgba(47, 125, 250, 0.08) 45%, transparent 78%);
  filter: blur(20px);
  animation: fogBreathe 8s ease-in-out infinite;
}

@keyframes fogBreathe {
  0%, 100% { opacity: 0.65; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1; transform: translateX(-50%) scale(1.08); }
}

/* ---- reflective floor beneath the rack ---- */
.stage-reflection {
  position: absolute;
  top: 78%;
  left: 50%;
  width: 84%;
  transform: translateX(-50%) scaleY(-1);
  opacity: 0.16;
  filter: blur(2.5px);
  pointer-events: none;
  mask-image: linear-gradient(to top, transparent 10%, #000 92%);
  -webkit-mask-image: linear-gradient(to top, transparent 10%, #000 92%);
}

.stage-reflection svg {
  width: 100%;
  height: auto;
}

/* volumetric light cone from above */
.stage-beam {
  position: absolute;
  top: 8%;
  left: 50%;
  width: 62%;
  height: 76%;
  transform: translateX(-50%);
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(47, 125, 250, 0.16) 0%,
    rgba(47, 125, 250, 0.06) 45%,
    transparent 82%);
  clip-path: polygon(34% 0, 66% 0, 100% 100%, 0 100%);
  filter: blur(10px);
  animation: beamPulse 7s ease-in-out infinite;
}

@keyframes beamPulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.95; }
}

.stage-rack svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.led {
  animation: ledPulse 2.4s ease-in-out infinite;
  animation-delay: var(--d, 0s);
  filter: drop-shadow(0 0 4px currentColor);
}

.led.alt { animation-duration: 3.1s; }

@keyframes ledPulse {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 1; }
}

.fan {
  animation: fanSpin 2.2s linear infinite;
}

.fan.rev {
  animation-duration: 3s;
  animation-direction: reverse;
}

@keyframes fanSpin {
  to { transform: rotate(360deg); }
}

.platform {
  animation: platformPulse 4.5s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes platformPulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 0.75; transform: scale(1.03); }
}

/* ---- floating glass widgets ---- */
.widget {
  position: absolute;
  border-radius: 13px;
  padding: 11px 13px;
  min-width: 124px;
  font-size: 0.81rem;
  color: var(--cream);
  animation: widgetFloat 7s ease-in-out infinite;
  will-change: transform;
}

.widget:nth-of-type(even) { animation-duration: 8.5s; animation-delay: -2s; }

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

.w-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.w-head span {
  color: var(--cream-dim);
  font-size: 0.79rem;
  letter-spacing: 0.03em;
}

.w-head b {
  font-family: var(--font-mono);
  direction: ltr;
  font-size: 0.84rem;
  font-weight: 700;
}

.w-spark {
  width: 100%;
  height: 24px;
  margin-top: 7px;
  overflow: visible;
}

.w-spark path {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: sparkDraw 3.4s ease-out forwards;
  filter: drop-shadow(0 0 3px currentColor);
}

@keyframes sparkDraw {
  to { stroke-dashoffset: 0; }
}

.w-bar {
  height: 5px;
  margin-top: 9px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.w-bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: var(--c, var(--brand));
  box-shadow: 0 0 8px var(--c, var(--brand));
  animation: barFill 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.5s;
}

@keyframes barFill {
  to { width: var(--v, 60%); }
}

.w-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 3px 9px;
  border-radius: 99px;
  font-size: 0.78rem;
  background: rgba(34, 197, 94, 0.14);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: var(--success);
}

.w-pill i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
  animation: ledPulse 2s ease-in-out infinite;
}

/* widget placement around the rack */
.widget { z-index: 3; }
.w-cpu    { top: 12%;  right: -12%; }
.w-ram    { top: 37%;  right: -17%; }
.w-nvme   { top: 62%;  right: -10%; }
.w-net    { top: 26%;  left: -15%; }
.w-uptime { top: 52%;  left: -12%; }
.w-ddos   { top: 76%;  left: -4%; }

@media (prefers-reduced-motion: reduce) {
  .hero-rays,
  .holo-ring,
  .holo-dot,
  .stage-fog,
  .stage-beam,
  .particle,
  .stage-cloud,
  .energy-line,
  .led,
  .fan,
  .platform,
  .widget,
  .w-spark path,
  .w-bar i,
  .w-pill i {
    animation: none;
  }
  .w-bar i { width: var(--v, 60%); }
  .w-spark path { stroke-dashoffset: 0; }
  .particle { opacity: 0.4; }
}

@media (max-width: 980px) {
  /* max-width drives .stage-inner's actual height too, since it has a
     fixed aspect-ratio — this is the real height control, not
     .hero-stage's min-height above (which is a floor only; aspect-ratio
     content taller than the floor ignores it). Tested several widths
     in-browser: 320px -> 461px gap to the title, 220px -> 361px, with no
     further gain below 220px (a fixed-size decorative element becomes
     the limiting factor at that point). */
  .stage-inner {
    max-width: 240px;
  }
  /* Each floating stat card (CPU/RAM/NVMe/Network/Uptime/DDoS) has
     min-width:124px and is absolutely positioned with offsets tuned for
     the desktop-sized stage — in a 240px-wide mobile illustration, six
     124px+ cards physically cannot avoid overlapping (confirmed
     in-browser: they piled on top of each other). Hidden here rather
     than repositioned, since the same figures are already shown as text
     in .trust-pills and .hero-stats right below, in the same viewport. */
  .widget {
    display: none;
  }
  .hero-trust {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .w-nvme,
  .w-ddos {
    display: none;
  }
  .w-cpu  { right: -2%; }
  .w-ram  { right: -4%; }
  .w-net  { left: -2%; }
  .w-uptime { left: 0; }
}

/* ============================================================
   Stats band
   ============================================================ */
.stats-band-section {
  padding: 56px 0;
}

.stats-band {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-l);
  overflow: hidden;
}

.sb-item {
  background: rgba(10, 16, 34, 0.72);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  padding: 28px 18px;
  text-align: center;
  transition: background 0.25s ease;
}

.sb-item:hover {
  background: rgba(47, 125, 250, 0.1);
}

.sb-item b {
  display: block;
  font-family: var(--font-mono);
  direction: ltr;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.25;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sb-item span {
  display: block;
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--cream-dim);
}

@media (max-width: 980px) {
  .stats-band {
    grid-template-columns: repeat(2, 1fr);
  }
  .sb-item:last-child {
    grid-column: 1 / -1;
  }
}

/* ============================================================
   Scroll reveal (progressive enhancement)
   ============================================================ */
/* Content is hidden ONLY once JS has confirmed it is running (html.js),
   so a failed/blocked script can never leave the page blank. */
.js [data-reveal] > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.js [data-reveal].revealed > * {
  opacity: 1;
  transform: none;
}

.js [data-reveal].revealed > *:nth-child(1) { transition-delay: 0.02s; }
.js [data-reveal].revealed > *:nth-child(2) { transition-delay: 0.1s; }
.js [data-reveal].revealed > *:nth-child(3) { transition-delay: 0.18s; }
.js [data-reveal].revealed > *:nth-child(4) { transition-delay: 0.26s; }
.js [data-reveal].revealed > *:nth-child(5) { transition-delay: 0.34s; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   Section scaffolding
   ============================================================ */
section {
  padding: var(--section-gap) 0;
}

/* Lighter padding for sections with minimal content (just a heading and
   a short paragraph or two, no illustration/grid/table) — the standard
   --section-gap (160px, 96px on mobile) is generous for fuller sections
   but reads as a lot of empty space around light content. Scoped via an
   explicit class on the two vps-shiraz.ejs sections this applies to. */
.section-tight {
  padding: 64px 0;
}

/* Scoped to the intro section only — sits directly under the hero, so it
   needs less top breathing room than .section-tight's default; bottom
   padding stays the same to keep spacing before the TOC below it. */
.cs-intro-section {
  padding-top: 8px;
}

@media (max-width: 900px) {
  .section-tight {
    padding: 48px 0;
  }
  .cs-intro-section {
    padding-top: 6px;
  }
}

/* alternating dark sections get a hairline seam plus a subtle tonal shift */
/* alternating sections get a faint tonal veil rather than an opaque slab */
.on-dark + .on-dark {
  background: rgba(255, 255, 255, 0.018);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section-head {
  max-width: 660px;
  margin-bottom: 68px;
}

.section-head .eyebrow {
  color: var(--brand);
}

.section-head h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h2);
  line-height: 1.36;
  margin: 0 0 var(--s-4);
  letter-spacing: -0.022em;
}

.section-head p {
  color: var(--ink-soft);
  font-size: 1.02rem;
  margin: 0;
}

.section-head.on-dark h2 {
  color: var(--cream);
}

.section-head.on-dark p {
  color: var(--cream-dim);
}

.on-dark {
  background: transparent;
  color: var(--cream);
}

/* ============================================================
   Service pillars
   ============================================================ */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

/* Scoped to the international-vps.ejs "why this location" section only
   (4 reason cards) — fits them in a single row on desktop instead of the
   shared 3-column grid's 3+1 wrap. Falls back responsively like every
   other grid on the site. */
.pillars-row {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1080px) {
  .pillars-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .pillars-row {
    grid-template-columns: 1fr;
  }
}

.pillar {
  position: relative;
  color: var(--text);
  /* was the generic .glass background — matched to the reference card's
     gradient + shadow treatment instead */
  background: linear-gradient(145deg, rgba(28, 58, 93, 0.85), rgba(12, 35, 60, 0.9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 24px rgba(0, 0, 0, 0.14);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  padding: var(--s-8) var(--s-8);
  overflow: hidden;
  transition: border-color var(--d-base) var(--ease),
    transform var(--d-slow) var(--ease),
    box-shadow var(--d-slow) var(--ease);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* glowing accent line along the bottom edge, tinted per card — replaces
   the old top-edge line to match the reference card exactly */
.pillar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--dc-color, var(--brand));
  box-shadow: 0 0 10px var(--dc-color, var(--brand));
  opacity: 0.55;
  transition: opacity var(--d-base) var(--ease);
}

.pillar:hover {
  border-color: color-mix(in srgb, var(--dc-color, var(--brand)) 55%, transparent);
  transform: translateY(-6px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 20px 46px rgba(0, 0, 0, 0.28),
    0 0 0 1px color-mix(in srgb, var(--dc-color, var(--brand)) 20%, transparent),
    0 0 32px -4px color-mix(in srgb, var(--dc-color, var(--brand)) 45%, transparent);
}

.pillar:hover::after {
  opacity: 1;
}

/* circular icon badge with a colour-tinted ring — was a bare 40px icon
   with no container, unlike the boxed/ringed treatment in the reference */
.pillar-icon {
  width: 43px;
  height: 43px;
  padding: 11px;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--dc-color, var(--brand));
  background: color-mix(in srgb, var(--dc-color, var(--brand)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--dc-color, var(--brand)) 25%, transparent);
  transition: background var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease);
}

.pillar:hover .pillar-icon {
  background: color-mix(in srgb, var(--dc-color, var(--brand)) 22%, transparent);
  box-shadow: 0 0 18px -3px color-mix(in srgb, var(--dc-color, var(--brand)) 60%, transparent);
}

.pillar h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  margin: 0;
}

.pillar p {
  color: var(--cream-dim);
  margin: 0;
  font-size: 0.95rem;
}

.pillar-link {
  margin-top: auto;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--dc-color, var(--brand));
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ============================================================
   Datacenter cards
   ============================================================ */
.dc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.dc-card {
  position: relative;
  border-radius: var(--r-card);
  padding: var(--s-8) var(--s-6);
  color: var(--cream);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
}

.dc-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--dc-color, var(--brand)), transparent);
  opacity: 0.75;
}

.dc-card:hover {
  background: var(--glass-strong);
  border-color: var(--dc-color, var(--border-hover));
  transform: translateY(-6px) rotate(-0.4deg);
  box-shadow: var(--shadow-hover);
}

.dc-code {
  font-family: var(--font-mono);
  direction: ltr;
  font-size: 0.8rem;
  color: var(--dc-color, var(--brand));
  letter-spacing: 0.03em;
}

.dc-card h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.dc-card h3 small {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--cream-dim);
}

.dc-card p {
  color: var(--cream-dim);
  font-size: 0.92rem;
  margin: 0;
}

.dc-card .dc-more {
  margin-top: auto;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--cream);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ============================================================
   Location hero (per-DC page)
   ============================================================ */
.loc-hero {
  position: relative;
  background: transparent;
  color: var(--cream);
  padding: 84px 0 92px;
  overflow: hidden;
}

.loc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(52% 70% at 76% 26%, var(--dc-color, var(--brand)) 0%, transparent 70%);
  opacity: 0.16;
}

.loc-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: center;
}

/* Scoped to this page only (added via an extra class in vps-shiraz.ejs's
   markup, not by editing the shared rule above, since .loc-hero-grid is
   reused by 11 other location-style hero pages). Brings the column ratio
   to ~55/45 and widens the gap, per the brief. */
.loc-hero-grid-roomy {
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
}

.loc-hero-art {
  width: 100%;
  height: auto;
}

.loc-hero-art svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

@media (max-width: 980px) {
  .loc-hero-grid {
    grid-template-columns: 1fr;
  }
  .loc-hero-art {
    max-width: 320px;
    margin: 0 auto 8px;
  }
}

/* ---- hero art: enlarged, with ambient glow/grid + floating cards ---- */
.loc-hero-art-wrap {
  position: relative;
  /* Without this, the grid track collapsed to ~212px instead of its
     intended ~45% share (measured in-browser). .loc-hero-art-wrap is the
     actual grid item, but its only in-flow child (.loc-hero-art) sizes
     itself via width:100% — 100% of a track the grid hasn't determined
     yet — so the auto-sizing algorithm fell back to a much smaller
     intrinsic size instead. An explicit width here breaks that circular
     reference and lets the track size to its intended fr share. */
  width: 100%;
}

/* subtle grid, contained to this wrapper only — not the whole Hero */
.loc-hero-art-wrap::before {
  content: "";
  position: absolute;
  inset: -6%;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(60% 60% at 50% 45%, #000 40%, transparent 78%);
  -webkit-mask-image: radial-gradient(60% 60% at 50% 45%, #000 40%, transparent 78%);
  pointer-events: none;
  z-index: 0;
}

/* violet glow behind the illustration + a small secondary cyan glow,
   both intentionally soft per the brief ("Aurora بسیار شدید" avoided) */
.loc-hero-art-wrap::after {
  content: "";
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(46% 46% at 52% 42%, var(--violet) 0%, transparent 72%),
    radial-gradient(30% 30% at 14% 82%, var(--cyan) 0%, transparent 75%);
  opacity: 0.16;
  filter: blur(50px);
  pointer-events: none;
  z-index: 0;
}

.loc-hero-art-wrap .loc-hero-art {
  position: relative;
  z-index: 1;
  max-width: 420px;
  margin: 0 auto;
  animation: locArtFloat 6s ease-in-out infinite;
}

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

.loc-float-card {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  animation: locCardFloat 7s ease-in-out infinite;
}

.loc-float-card svg {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--dc-color, var(--violet));
}

.loc-float-card b {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--cream);
  white-space: nowrap;
}

.loc-float-card span {
  display: block;
  margin-top: 1px;
  font-size: 0.72rem;
  color: var(--cream-dim);
  white-space: nowrap;
  direction: ltr;
  text-align: right;
}

.loc-float-card-dc {
  top: 6%;
  right: -6%;
}

.loc-float-card-vps {
  bottom: 8%;
  left: -6%;
  animation-duration: 8s;
  animation-delay: -2.5s;
}

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

@media (max-width: 980px) {
  .loc-float-card-dc { right: 2%; }
  .loc-float-card-vps { left: 2%; }
}

@media (max-width: 560px) {
  .loc-float-card b, .loc-float-card span { font-size: 0.68rem; }
  .loc-float-card { padding: 7px 10px; gap: 7px; }
  .loc-float-card svg { width: 17px; height: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .loc-hero-art-wrap .loc-hero-art,
  .loc-float-card {
    animation: none;
  }
}

.loc-crest {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 18px 8px 10px;
  border-radius: 999px;
  background: var(--glass);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid var(--glass-border);
  margin-bottom: 24px;
}

.loc-crest .crest-icon {
  width: 30px;
  height: 30px;
  color: var(--dc-color, var(--brand));
}

.loc-crest span {
  font-family: var(--font-mono);
  direction: ltr;
  font-size: 0.82rem;
  color: var(--cream-dim);
}

/* the active-status dot reuses .status-dot's pulse animation as-is; only
   its size is trimmed slightly to sit comfortably inside this small pill */
.loc-crest .status-dot {
  width: 6px;
  height: 6px;
}

.loc-kicker {
  display: block;
  margin: 0 0 14px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--cream-dim);
}

.loc-hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h1);
  line-height: 1.32;
  letter-spacing: -0.022em;
  margin: 0 0 12px;
}

/* Scoped page-specific H1 sizing — .loc-hero h1 above is shared by 20
   pages, so instead of touching it (or the shared --t-h1 token), these
   rules only fire when the hero also carries .loc-hero-enterprise, a
   modifier class added solely in vps-shiraz.ejs. Matches the brief's
   specific ranges: 48–56px desktop / 38–44 tablet / 28–34 mobile. */
.loc-hero-enterprise h1 {
  font-size: clamp(2.5rem, 3.8vw, 3.5rem);
  line-height: 1.4;
  margin: 0 0 18px;
}

@media (max-width: 980px) {
  .loc-hero-enterprise h1 {
    font-size: clamp(2.375rem, 5vw, 2.75rem);
  }
}

@media (max-width: 560px) {
  .loc-hero-enterprise h1 {
    font-size: clamp(1.75rem, 7vw, 2.125rem);
  }
}

.loc-h1-accent {
  color: var(--violet);
}

.loc-hero .loc-tagline {
  color: var(--dc-color, var(--brand));
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0 0 22px;
}

.loc-hero .loc-desc {
  max-width: 62ch;
  color: var(--cream-dim);
  font-size: 1.02rem;
  margin: 0 0 34px;
}

/* lead: the primary sub-headline, kept short and prominent */
.loc-hero .loc-lead {
  max-width: 620px;
  color: var(--cream);
  font-size: 1.08rem;
  line-height: 1.7;
  font-weight: 500;
  margin: 0 0 14px;
}

/* secondary: the original longer paragraph — kept verbatim, but visually
   stepped back so it reads as supporting detail rather than competing
   with the lead line above it */
.loc-hero .loc-desc-secondary {
  max-width: 58ch;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.85;
  margin: 0 0 30px;
}

/* ---- quick specs: three compact mini data-cards ---- */
.loc-quick-specs {
  display: flex;
  gap: 14px;
  margin: 0 0 30px;
}

.loc-spec-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  flex: 1 1 0;
  /* Flex items default to min-width:auto (their content's natural,
     unwrapped width). Combined with white-space:nowrap below, the three
     items together demanded 902px minimum — wider than the whole content
     column wanted — which inflated the grid's first track and squeezed
     the illustration column down to ~212px (measured in-browser). This
     lets each card actually shrink to the flex space it's given. */
  min-width: 0;
}

.loc-spec-item svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--dc-color, var(--violet));
}

/* the label/value wrapper is itself a flex item inside .loc-spec-item —
   same min-width:auto default, same fix needed, so the ellipsis on the
   label below can actually engage instead of forcing this wider */
.loc-spec-item > div {
  min-width: 0;
}

.loc-spec-item b {
  /* Was white-space:nowrap + ellipsis, but Persian text truncated
     mid-word looks poor, and forcing a single line was the actual root
     cause of the grid-squeeze bug: nowrap text has a min-content width
     equal to the WHOLE phrase, which forced this whole row (and with it
     the entire content column) far wider than intended, squeezing the
     illustration column down to ~212px (measured in-browser: fixed by
     this change alone, no other override needed). Wrapping text has a
     min-content width of only its longest single word instead. */
  display: block;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--cream);
  line-height: 1.35;
}

.loc-spec-item span {
  display: block;
  margin-top: 2px;
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.4;
}

@media (max-width: 560px) {
  .loc-quick-specs {
    flex-wrap: wrap;
  }
  .loc-spec-item {
    flex: 1 1 calc(50% - 7px);
  }
}

/* ---- trust note ---- */
.loc-trust-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.loc-trust-dot {
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
}

/* ============================================================
   Pricing tables
   ============================================================ */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  align-items: stretch;
}

@media (max-width: 1180px) {
  .plan-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

.plan-grid.cols-3 {
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.plan-grid.cols-5 {
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

@media (max-width: 1300px) {
  .plan-grid.cols-5 {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

/* ---- breadcrumb bar ---- */
.crumb-bar {
  position: relative;
  z-index: 1;
  padding: var(--s-5) 0 0;
}

.crumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.crumb-list li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.crumb-list a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--d-base) var(--ease);
}

.crumb-list a:hover {
  color: var(--brand-soft);
}

.crumb-sep {
  color: var(--text-disabled);
}

.crumb-list [aria-current="page"] {
  color: var(--text-2);
}

/* ---- server hub: quick-selector card CTA ---- */
.sh-quick-cta {
  display: inline-block;
  margin-top: var(--s-3);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--brand-soft);
}

/* ---- server hub: full service catalog ---- */
.sh-catalog {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-5);
}

.sh-cat-card {
  display: flex;
  flex-direction: column;
  padding: var(--s-5);
  border-radius: var(--r-card);
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  transition: border-color var(--d-base) var(--ease), transform var(--d-slow) var(--ease);
}

.sh-cat-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-4px);
}

.sh-cat-loc {
  align-self: flex-start;
  padding: 3px var(--s-3);
  margin-bottom: var(--s-3);
  border-radius: var(--r-pill);
  background: rgba(37, 99, 255, 0.1);
  border: 1px solid rgba(37, 99, 255, 0.22);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--brand-soft);
}

.sh-cat-card h3 {
  margin: 0 0 var(--s-2);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
}

.sh-cat-card > p {
  margin: 0 0 var(--s-4);
  font-size: 0.84rem;
  line-height: 1.8;
  color: var(--text-muted);
}

.sh-cat-meta {
  display: grid;
  gap: 6px;
  margin: 0 0 var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
  font-size: 0.78rem;
  line-height: 1.8;
  color: var(--text-2);
}

.sh-cat-meta b {
  color: var(--text-muted);
  font-weight: 600;
}

@media (max-width: 560px) {
  .sh-catalog {
    grid-template-columns: 1fr;
  }
}

/* ---- hosting hub: status tags for not-yet-built services ---- */
.sh-soon-tag {
  display: inline-block;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--text-muted);
  vertical-align: middle;
}

/* reuses .sh-cat-loc's badge shape from the server hub catalog, with
   status-specific colour: neutral for "coming soon", amber for
   "at capacity" — a genuinely different state, not just unbuilt */
.sh-cat-status-soon {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--border);
  color: var(--text-muted);
}

.sh-cat-status-full {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.32);
  color: #f5b93a;
}

/* ---- dedicated server (Iran) plan cards ---- */
.di-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}

.di-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s-5);
  border-radius: var(--r-card);
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
  transition: border-color var(--d-base) var(--ease), transform var(--d-slow) var(--ease);
}

.di-plan:hover {
  border-color: var(--border-hover);
  transform: translateY(-4px);
}

.di-plan.featured {
  border-color: rgba(37, 99, 255, 0.5);
  box-shadow: 0 0 40px rgba(37, 99, 255, 0.14);
}

.di-plan-code {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--brand-soft);
  direction: ltr;
  display: block;
}

.di-plan-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: var(--s-3) 0 var(--s-4);
  margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--border);
}

.di-plan-price b {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  direction: ltr;
}

.di-plan-price span {
  font-size: 0.76rem;
  color: var(--text-muted);
}

.di-plan-specs {
  list-style: none;
  margin: 0 0 var(--s-5);
  padding: 0;
  display: grid;
  gap: 8px;
  flex: 1;
}

.di-plan-specs li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: 0.77rem;
}

.di-plan-specs span {
  flex-shrink: 0;
  color: var(--text-muted);
}

.di-plan-specs b {
  font-weight: 600;
  color: var(--text-2);
  text-align: left;
}

@media (max-width: 1080px) {
  .di-plans {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .di-plans {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .di-plan:hover {
    transform: none;
  }
}

/* ---- exchange (bourse) VPS page ---- */
.ex-factor-list {
  list-style: none;
  margin: 0 0 var(--s-5);
  padding: 0;
  display: grid;
  gap: 9px;
}

.ex-factor-list li {
  position: relative;
  padding-inline-start: var(--s-5);
  font-size: var(--t-small);
  line-height: 1.9;
  color: var(--text-muted);
}

.ex-factor-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  opacity: 0.75;
}

.ex-factor-list b {
  color: var(--text-2);
}

/* plan-selection guide rows */
.ex-guide {
  display: grid;
  gap: var(--s-3);
}

.ex-guide-row {
  display: grid;
  grid-template-columns: 110px 220px 1fr;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-card);
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
}

.ex-guide-row > b {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--brand-soft);
  direction: ltr;
}

.ex-guide-spec {
  font-size: 0.82rem;
  color: var(--text-2);
}

.ex-guide-note {
  font-size: 0.8rem;
  line-height: 1.8;
  color: var(--text-muted);
}

@media (max-width: 860px) {
  .ex-guide-row {
    grid-template-columns: 1fr;
    gap: var(--s-2);
  }
}

/* ---- shiraz VPS page: OS groups + panel actions ---- */
.sh-os-groups {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}

.sh-os-group {
  padding: var(--s-5);
  border-radius: var(--r-card);
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
}

.sh-os-group > b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-caption);
  font-weight: 700;
  margin-bottom: var(--s-2);
}

.sh-os-group > p {
  margin: 0 0 var(--s-4);
  font-size: 0.78rem;
  line-height: 1.85;
  color: var(--text-muted);
}

/* the OS chip row inside a group is left-aligned, unlike the centred
   cloud-server version */
.sh-os-group .cs-os {
  justify-content: flex-start;
  gap: var(--s-2);
}

.sh-os-group .cs-os-chip {
  padding: 6px var(--s-3);
  font-size: 0.74rem;
}

.sh-panel-actions {
  margin-top: var(--s-6);
  padding: var(--s-5);
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
}

.sh-panel-actions > b {
  display: block;
  margin-bottom: var(--s-4);
  font-size: 0.88rem;
  font-weight: 700;
}

.sh-panel-actions ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
}

.sh-panel-actions li {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 0.8rem;
  color: var(--text-2);
}

.sh-panel-actions svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--success);
}

@media (max-width: 900px) {
  .sh-os-groups,
  .sh-panel-actions ul {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .sh-os-groups,
  .sh-panel-actions ul {
    grid-template-columns: 1fr;
  }
}

/* ---- cloud server page ---- */
.cs-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
}

/* ---- quick intro card (directly after hero) ---- */
.cs-intro-card {
  position: relative;
  margin-bottom: var(--s-6);
  padding: var(--s-5) var(--s-6);
  padding-inline-start: calc(var(--s-6) + 6px);
  border-radius: var(--r-card);
  background: rgba(37, 99, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.cs-intro-card::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--brand), var(--cyan));
}

.cs-intro-label {
  display: block;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--brand-soft);
  margin-bottom: var(--s-3);
}

.cs-intro-card p {
  margin: 0 0 var(--s-3);
  color: var(--cream-dim);
  font-size: 0.98rem;
  line-height: 1.95;
  text-align: start;
}

.cs-intro-card p:last-child {
  margin-bottom: 0;
}

/* Two-column variant: text beside a supporting illustration, filling the
   space the shorter (three-paragraph) text leaves behind. */
.cs-intro-card-split {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  align-items: center;
  gap: var(--s-7);
}

.cs-intro-visual {
  display: flex;
  justify-content: center;
}

.cs-intro-visual svg {
  width: 100%;
  max-width: 220px;
  height: auto;
}

@media (max-width: 1080px) {
  .cs-intro-card-split {
    grid-template-columns: 1fr;
  }
  .cs-intro-visual {
    order: -1;
    max-width: 200px;
    margin: 0 auto;
  }
}

/* ---- table of contents ---- */
.cs-toc {
  display: block;
  padding: var(--s-5) var(--s-6);
  border-radius: var(--r-card);
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
}

.cs-toc-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: var(--s-4);
}

.cs-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 20px;
  counter-reset: toc;
}

.cs-toc li {
  counter-increment: toc;
}

.cs-toc a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 0;
  color: var(--cream-dim);
  font-size: 0.86rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.cs-toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--brand-soft);
  flex-shrink: 0;
}

.cs-toc a:hover {
  color: var(--cream);
  border-bottom-color: var(--border-hover);
}

@media (max-width: 900px) {
  .cs-toc ol {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .cs-toc ol {
    grid-template-columns: 1fr;
  }
}

.cs-strip-item {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-5);
  border-radius: var(--r-card);
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
}

.cs-strip-item svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--cyan);
  margin-top: 2px;
}

.cs-strip-item b {
  display: block;
  font-size: 0.86rem;
  font-weight: 700;
}

.cs-strip-item span {
  display: block;
  margin-top: 3px;
  font-size: 0.74rem;
  line-height: 1.7;
  color: var(--text-muted);
}

/* billing toggle */
.cs-toggle {
  display: flex;
  width: fit-content;
  gap: 4px;
  padding: 4px;
  margin: 0 auto var(--s-6);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
}

.cs-toggle-btn {
  padding: 8px var(--s-5);
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--d-base) var(--ease), color var(--d-base) var(--ease);
}

.cs-toggle-btn.active {
  background: var(--grad-brand);
  color: #fff;
}

/* plan grid — 8 plans, so denser than the 3-plan VPS grids */
.cs-plans {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
}

.cs-plan {
  display: flex;
  flex-direction: column;
  padding: var(--s-5);
  border-radius: var(--r-card);
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
  transition: border-color var(--d-base) var(--ease), transform var(--d-slow) var(--ease);
}

.cs-plan:hover {
  border-color: var(--border-hover);
  transform: translateY(-4px);
}

/* Sold-out state: every spec stays fully readable — only saturation is
   reduced and hover-lift is dropped, per the brief's explicit rule
   against opacity/blur/display:none for this state. */
.cs-plan-soldout {
  filter: saturate(0.7);
}

.cs-plan-soldout:hover {
  transform: none;
  border-color: var(--border);
}

.cs-plan-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}

.cs-plan-badge {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-hover);
  color: var(--text-muted);
  white-space: nowrap;
}

.cs-plan-code {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--brand-soft);
}

.cs-plan-price {
  padding: var(--s-4) 0;
  margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--border);
}

.cs-price b {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  direction: ltr;
  display: inline-block;
}

.cs-price i {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.cs-plan-specs {
  list-style: none;
  margin: 0 0 var(--s-5);
  padding: 0;
  display: grid;
  gap: 8px;
  flex: 1;
}

.cs-plan-specs li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  font-size: 0.78rem;
}

.cs-plan-specs span {
  color: var(--text-muted);
}

.cs-plan-specs b {
  font-weight: 600;
  color: var(--text-2);
  direction: ltr;
}

/* OS chips */
.cs-os {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  justify-content: center;
}

.cs-os-chip {
  padding: 9px var(--s-5);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-2);
  direction: ltr;
}

@media (max-width: 1080px) {
  .cs-strip,
  .cs-plans {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .cs-strip,
  .cs-plans {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cs-plan:hover {
    transform: none;
  }
}

/* ---- dedicated service page (vps-hodhod) ---- */
.plan-badge {
  position: absolute;
  /* was top:-12px, straddling the card's top edge — since .plan-card has
     overflow:hidden, ~11px of the badge was being clipped off (measured
     in-browser). Moved fully inside the card instead. */
  top: 18px;
  inset-inline-end: var(--s-5);
  padding: 4px var(--s-3);
  border-radius: var(--r-pill);
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  background: var(--grad-brand);
  white-space: nowrap;
  z-index: 2;
}

.plan-note {
  margin: var(--s-4) 0 var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
  font-size: 0.78rem;
  line-height: 1.85;
  color: var(--text-muted);
}

/* quarterly/semi-annual/annual price summary on WP plan cards */
.plan-billing-cycles {
  display: grid;
  gap: 6px;
  margin: 0 0 var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-button);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
}

.plan-billing-cycles span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: 0.74rem;
  color: var(--text-muted);
}

.plan-billing-cycles b {
  font-weight: 600;
  color: var(--text-2);
  direction: ltr;
}

/* readable prose column for the explanatory sections */
.narrow-prose {
  max-width: 68ch;
}

.narrow-prose h2 {
  margin: 0 0 var(--s-4);
}

.narrow-prose p {
  margin: 0 0 var(--s-4);
  font-size: var(--t-small);
  line-height: 2.05;
  color: var(--text-muted);
}

.narrow-prose p:last-child {
  margin-bottom: 0;
}

/* resource summary grid */
.hodhod-res {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--s-4);
}

.hres-cell {
  padding: var(--s-5) var(--s-3);
  text-align: center;
  border-radius: var(--r-card);
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
  min-width: 0;
  overflow: hidden;
}

.hres-cell span {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.hres-cell b {
  display: block;
  margin: var(--s-2) 0 2px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  direction: ltr;
}

.hres-cell i {
  display: block;
  font-style: normal;
  font-size: 0.76rem;
  color: var(--text-disabled);
}

@media (max-width: 900px) {
  .hodhod-res {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 520px) {
  .hodhod-res {
    grid-template-columns: 1fr 1fr;
  }
}

.plan-card {
  position: relative;
  color: var(--cream);
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--r-card);
  padding: var(--s-8) var(--s-6) var(--s-6);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
}

.plan-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--dc-color, var(--brand)), transparent);
  opacity: 0.7;
}

.plan-card:hover {
  background: var(--glass-strong);
  border-color: var(--dc-color, var(--border-hover));
  transform: translateY(-6px) rotate(-0.4deg);
  box-shadow: var(--shadow-hover);
}

/* featured plan is lifted and lit rather than just outlined */
.plan-card.featured {
  /* extra clearance below the badge so it never overlaps the plan title —
     measured in-browser: without this, the badge and h4 overlapped by 15px */
  padding-top: calc(var(--s-8) + 20px);
  background: var(--glass-strong);
  border-color: var(--glass-border-lit);
  box-shadow: var(--glass-shadow), 0 0 0 1px rgba(47, 125, 250, 0.3),
    0 26px 60px rgba(2, 5, 16, 0.55);
}

.plan-card.featured::before {
  content: "پیشنهاد ما";
  position: absolute;
  top: 18px;
  left: 18px;
  background: var(--dc-color, var(--brand));
  color: var(--night);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 4px 11px;
  border-radius: 999px;
  z-index: 2;
}

/* Some pages (vps-shiraz, vps-hodhod, wp-host) already render their own
   explicit, page-specific badge text via <span class="plan-badge"> —
   e.g. "محبوب‌ترین انتخاب" instead of the generic "پیشنهاد ما". Without
   this, both badges stacked on top of each other at the same corner
   (measured in-browser: two overlapping pills, second one colliding with
   the plan name below it). Suppressing the generic ::before here keeps
   each page's own wording as the single badge, while ir-cloud.ejs and
   location.ejs — which have no explicit badge — keep the generic one. */
.plan-card.featured.has-own-badge::before {
  content: none;
}

/* ---- plan header ---- */
.plan-card h4 {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--cream-dim);
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.plan-card h4 .numerals {
  color: var(--dc-color, var(--brand));
  font-size: 0.81rem;
  font-weight: 400;
  letter-spacing: 0.08em;
}

/* ---- price block ---- */
.plan-price {
  font-family: var(--font-mono);
  direction: ltr;
  text-align: right;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--cream);
  padding-bottom: 22px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

.plan-price sup {
  display: block;
  font-size: 0.8rem;
  font-family: var(--font-body);
  color: var(--cream-dim);
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-top: 6px;
  direction: rtl;
}

/* ---- spec rows ---- */
.plan-specs {
  list-style: none;
  margin: 0;
  padding: 18px 0 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
  font-size: 0.88rem;
  color: var(--cream-dim);
  flex-grow: 1;
}

.plan-specs li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.plan-specs li:last-child {
  border-bottom: none;
}

.plan-specs li b {
  color: var(--cream);
  font-weight: 600;
  font-family: var(--font-mono);
  direction: ltr;
  font-size: 0.9rem;
}

/* Labeled variant: short latin spec labels (CPU/RAM/Storage…) instead of
   a long Persian phrase, so the eye can scan down the label column and
   compare cards side by side. The base .plan-specs li above already
   provides the two-column flex layout. */
.plan-specs-labeled li span {
  font-size: 0.8rem;
  font-family: var(--font-mono);
  direction: ltr;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* ---- quick comparison strip (below the pricing cards) ---- */
.quick-compare {
  margin-top: 34px;
  padding: 22px;
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border);
}

.qc-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 16px;
}

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

.qc-col {
  min-width: 0;
  padding: 16px 10px;
  text-align: center;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid transparent;
}

/* the featured plan gets a restrained accent — a tinted border only, no
   heavy fill or glow, per the brief's "not too much colour" direction */
.qc-col-featured {
  border-color: rgba(37, 99, 255, 0.28);
  background: rgba(37, 99, 255, 0.06);
}

.qc-plan {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--cream);
  margin-bottom: 12px;
}

.qc-metric {
  margin-top: 10px;
}

.qc-metric b {
  display: block;
  font-family: var(--font-mono);
  direction: ltr;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--brand-soft);
  line-height: 1.2;
}

.qc-metric span {
  display: block;
  margin-top: 2px;
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* ============================================================
   Feature list w/ crest marks
   ============================================================ */
.crest-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 28px;
}

.crest-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.96rem;
  color: var(--ink-soft);
}

.crest-list .crest-icon-sm {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--brand);
}

.crest-list.on-dark li {
  color: var(--cream-dim);
}

.crest-list.on-dark .crest-icon-sm {
  color: var(--brand);
}

/* ============================================================
   CTA band
   ============================================================ */
.cta-band {
  position: relative;
  color: var(--cream);
  background:
    radial-gradient(70% 140% at 88% 0%, rgba(47, 125, 250, 0.22) 0%, transparent 62%),
    var(--glass-strong);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius-l);
  overflow: hidden;
  padding: 54px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.cta-band h2 {
  font-family: var(--font-display);
  font-size: 1.7rem;
  margin: 0 0 8px;
}

.cta-band p {
  margin: 0;
  color: var(--cream-dim);
  max-width: 44ch;
}

/* ============================================================
   Article / long-form SEO content
   ============================================================ */
.prose {
  max-width: 760px;
}

.prose h2 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 44px 0 12px;
  color: var(--cream);
}

.prose h2:first-child {
  margin-top: 0;
}

.prose h3 {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 700;
  margin: 26px 0 8px;
  color: var(--cream);
}

.prose p {
  color: var(--cream-dim);
  font-size: 0.98rem;
  margin: 0 0 4px;
}

/* ============================================================
   Editorial article layout (location.ejs long-form SEO content)
   Two-column: main content + sticky section navigator. Everything
   below is scoped to .article-* / .art-* classes only — .prose above
   is untouched and still serves about.ejs / ceo-speech.ejs as before.
   ============================================================ */
.article-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 48px;
  align-items: start;
}

.article-main {
  max-width: 760px;
  min-width: 0;
}

/* ---- sticky sidebar navigator ---- */
.article-nav {
  position: sticky;
  top: 96px;
  align-self: start;
}

.article-nav-inner {
  padding: var(--s-5);
  border-radius: var(--r-card);
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
  max-height: calc(100vh - 130px);
  overflow-y: auto;
}

.article-nav-current {
  margin-bottom: var(--s-4);
}

.article-nav-current span {
  display: block;
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.article-nav-current b {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--cream);
  line-height: 1.5;
}

.article-nav-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--border);
}

.article-nav-progress-track {
  flex: 1;
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.article-nav-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--brand), var(--cyan));
  transition: width 0.15s linear;
}

#articleNavPct {
  flex: 0 0 auto;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.article-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.article-nav-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-muted);
  text-decoration: none;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.article-nav-list a:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--cream-dim);
}

.article-nav-list a.active {
  background: rgba(37, 99, 255, 0.1);
  color: var(--cream);
  font-weight: 600;
}

.article-nav-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  opacity: 0.8;
}

.article-nav-icon svg {
  width: 100%;
  height: 100%;
}

@media (max-width: 1080px) {
  .article-grid {
    grid-template-columns: 1fr;
  }

  .article-nav {
    position: static;
    order: -1;
    margin-bottom: 28px;
  }

  .article-nav-inner {
    max-height: none;
  }

  .article-nav-list {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
  }

  .article-nav-list a {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* ---- section ---- */
.art-section {
  padding-top: 40px;
  margin-top: 40px;
  border-top: 1px solid var(--border);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

/* Standalone variant: same two-column illustrated body, but sitting alone
   inside its own <section> rather than stacked in an article flow — so
   the divider line and stacking offset above don't apply. Used on
   vps-hodhod.ejs sections 02/04/07. */
.art-section-solo {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}

.art-section.revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .art-section {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.art-section:first-child {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}

.art-section-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  scroll-margin-top: 100px;
}

.art-section-num {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-disabled);
  direction: ltr;
}

/* circular tinted-ring icon badge — same treatment as .pillar-icon,
   reused here at a slightly smaller size to sit inline with a heading */
.art-section-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 8px;
  box-sizing: border-box;
  border-radius: 50%;
  color: var(--brand-soft);
  background: rgba(37, 99, 255, 0.12);
  border: 1px solid rgba(37, 99, 255, 0.24);
}

.art-section-icon svg {
  width: 100%;
  height: 100%;
}

.art-section-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--cream);
}

.art-section p {
  color: var(--cream-dim);
  font-size: 0.98rem;
  line-height: 1.95;
  margin: 0;
}

/* Intro paragraph under a converted section header (pricing, resources,
   features, OS, access, comparison, plan-guide sections) — matches
   .art-section p exactly, for the same reading rhythm as the fully
   prose sections (سرور مجازی شیراز چیست؟ etc.) */
.sh-section-intro {
  color: var(--cream-dim);
  font-size: 0.98rem;
  line-height: 1.95;
  margin: 0 0 8px;
  text-align: start;
}

/* optical "lead" emphasis on the opening of each paragraph — CSS-only,
   no text was rewritten or duplicated to create this effect */
.art-section p::first-line {
  color: var(--cream);
  font-weight: 600;
}

/* ---- illustrated sections: text | visual, alternating ---- */
.art-section-body {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 36px;
  align-items: center;
}

.art-section-rev .art-section-body {
  grid-template-columns: 1fr 1.3fr;
}

.art-section-rev .art-section-text {
  order: 2;
}

.art-section-visual {
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border);
  padding: 18px;
  transition: transform 0.3s var(--ease);
}

.art-section-visual svg {
  display: block;
  width: 100%;
  height: auto;
}

/* very subtle parallax-lite: a small vertical drift driven by a custom
   property the reveal script updates from scroll position — GPU-only
   (transform), no layout properties touched, so it cannot cause CLS */
.art-section-visual {
  transform: translateY(var(--art-parallax, 0px));
}

@media (prefers-reduced-motion: reduce) {
  .art-section-visual {
    transform: none !important;
  }
}

/* compact sections (no illustration assigned) keep a plain, denser
   paragraph — this is most of the 16 sections, by design */
.art-section-compact p {
  max-width: 100%;
}

/* Compact sections (icon + heading + a single short paragraph, no
   illustration) were using the same 40px+40px top spacing as fully
   illustrated sections — proportionally far too much space around much
   less content. Measured in-browser: eight of these in a row read as a
   long stretch of mostly-empty page. Tightened to match their lighter
   content. */
.art-section.art-section-compact {
  padding-top: 26px;
  margin-top: 26px;
}

/* ---- inline callout ---- */
.art-callout {
  display: flex;
  gap: 14px;
  margin-top: 20px;
  padding: 18px 20px;
  border-radius: var(--r-card);
  background: rgba(0, 212, 255, 0.05);
  border: 1px solid rgba(0, 212, 255, 0.18);
}

.art-callout-icon {
  flex: 0 0 auto;
  font-size: 1.1rem;
  color: var(--cyan);
  line-height: 1;
}

.art-callout b {
  display: block;
  margin-bottom: 4px;
  font-size: 0.88rem;
  color: var(--cyan);
}

.art-callout p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-2);
}

/* ---- related-services note: boxed card, not a bare paragraph ----
   A distinct class from the shared .trust-note (used on 9 other pages) —
   this only affects the specific "related services" callouts on this
   page. Text and links are unchanged; only the container and link
   styling are new. */
.related-note {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 20px;
  padding: 18px 22px;
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border);
  text-align: start;
  max-width: 74ch;
  margin-inline: auto;
}

.related-note-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--text-muted);
}

.related-note p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.9;
  color: var(--text-muted);
}

.related-note p a {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  background: rgba(37, 99, 255, 0.1);
  border: 1px solid rgba(37, 99, 255, 0.22);
  color: var(--brand-soft);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.84rem;
  transition: background var(--d-base) var(--ease), border-color var(--d-base) var(--ease);
}

.related-note p a:hover {
  background: rgba(37, 99, 255, 0.18);
  border-color: rgba(37, 99, 255, 0.4);
}

.art-callout p::first-line {
  color: var(--text-2);
  font-weight: 400;
}

/* ---- inline mini stat cards ---- */
.art-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 24px;
}

.art-stat-card {
  padding: 16px 10px;
  text-align: center;
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
}

.art-stat-card b {
  display: block;
  font-family: var(--font-mono);
  direction: ltr;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--brand-soft);
}

.art-stat-card span {
  display: block;
  margin-top: 4px;
  font-size: 0.72rem;
  color: var(--text-muted);
}


@media (max-width: 1080px) {
  .art-section-body,
  .art-section-rev .art-section-body {
    grid-template-columns: 1fr;
  }

  .art-section-rev .art-section-text {
    order: 0;
  }

  .art-section-visual {
    max-width: 320px;
    margin: 0 auto;
  }
}

@media (max-width: 640px) {
  .art-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   FAQ accordion
   ============================================================ */
.faq-list {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-item {
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius-m);
  padding: 4px 22px;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.faq-item:hover {
  border-color: var(--glass-border-lit);
}

.faq-item[open] {
  background: var(--glass-strong);
  border-color: var(--glass-border-lit);
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 0;
  font-weight: 700;
  font-family: var(--font-display);
  font-size: 0.98rem;
  color: var(--cream);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  font-size: 1.3rem;
  color: var(--dc-color, var(--brand));
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item p {
  color: var(--cream-dim);
  font-size: 0.94rem;
  margin: 0 0 18px;
}

/* ============================================================
   Legal list (terms of service)
   ============================================================ */
.legal-list {
  max-width: 780px;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: legal;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.legal-list li {
  counter-increment: legal;
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  color: var(--cream-dim);
  font-size: 0.95rem;
  line-height: 1.8;
}

.legal-list li::before {
  content: counter(legal);
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--night);
  font-weight: 700;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   Stats grid (about page)
   ============================================================ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.stat-card {
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius-l);
  padding: 30px;
  text-align: center;
}

.stat-card b {
  display: block;
  font-family: var(--font-mono);
  direction: ltr;
  font-size: 2rem;
  color: var(--brand);
  margin-bottom: 6px;
}

.stat-card span {
  color: var(--cream-dim);
  font-size: 0.92rem;
}

/* ============================================================
   Team / board cards
   ============================================================ */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.team-card {
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius-l);
  padding: 26px;
  text-align: center;
}

.team-card .avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(243, 239, 227, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  color: var(--brand);
}

.team-card h4 {
  font-family: var(--font-display);
  margin: 0 0 4px;
  font-size: 1.02rem;
  color: var(--cream);
}

.team-card span {
  color: var(--cream-dim);
  font-size: 0.86rem;
}

/* ============================================================
   Contact department cards
   ============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.contact-card {
  position: relative;
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius-l);
  padding: 26px;
  overflow: hidden;
}

.contact-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  opacity: 0.7;
}

.contact-card h4 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin: 0 0 8px;
  color: var(--cream);
}

.contact-card .hours {
  color: var(--cream-dim);
  font-size: 0.85rem;
  margin: 0 0 14px;
}

.contact-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.9rem;
}

.contact-card ul a {
  color: var(--cream-dim);
  text-decoration: none;
}

.contact-card ul a:hover {
  color: var(--brand);
}

.contact-card .numerals {
  direction: ltr;
  display: inline-block;
}

/* ============================================================
   Simple contact form
   ============================================================ */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 560px;
}

.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--cream-dim);
}

.contact-form input,
.contact-form textarea {
  background: rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  padding: 14px 16px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--t-small);
  transition: border-color 0.18s ease, background 0.18s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  background: var(--glass-strong);
  border-color: var(--border-focus);
  box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.14);
}

.contact-form textarea {
  min-height: 120px;
  resize: vertical;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--cream-dim);
}

/* ============================================================
   Network map (datacenter locations)
   ============================================================ */
/* dot-matrix world: one path, dots drawn as round stroke caps */
.world-dots {
  fill: none;
  stroke: rgba(120, 165, 245, 0.34);
  stroke-width: 2.9;
  stroke-linecap: round;
}

.map-link {
  fill: none;
  stroke: var(--brand);
  stroke-width: 1.2;
  stroke-dasharray: 4 7;
  opacity: 0.55;
  animation: mapDash 22s linear infinite;
}

@keyframes mapDash {
  to {
    stroke-dashoffset: -300;
  }
}

.map-node-core {
  fill: var(--cream);
  stroke: var(--node-color, var(--brand));
  stroke-width: 1.4;
}

.map-node-ring {
  fill: none;
  stroke: var(--node-color, var(--brand));
  stroke-width: 1.6;
  opacity: 0.9;
  filter: drop-shadow(0 0 4px var(--node-color, var(--brand)));
}

.map-node-pulse {
  fill: var(--node-color, var(--brand));
  opacity: 0.4;
  transform-box: fill-box;
  transform-origin: center;
  animation: mapPulse 3s ease-out infinite;
  filter: drop-shadow(0 0 6px var(--node-color, var(--brand)));
}

@keyframes mapPulse {
  0% {
    transform: scale(0.5);
    opacity: 0.5;
  }
  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}

.map-label {
  font-family: var(--font-body);
  font-size: 13px;
  fill: var(--cream);
  font-weight: 700;
  direction: rtl;
}

.map-label-sub {
  font-family: var(--font-body);
  font-size: 10.5px;
  fill: var(--cream-dim);
  direction: rtl;
}

/* soft halo over the region we highlight (Iran) */
.world-focus {
  fill: rgba(37, 99, 255, 0.14);
  stroke: rgba(37, 99, 255, 0.4);
  stroke-width: 1;
  stroke-dasharray: 3 5;
  animation: focusBreathe 6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes focusBreathe {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .map-link,
  .map-node-pulse,
  .world-focus {
    animation: none;
  }
  .map-node-pulse {
    opacity: 0;
  }
}

/* location list beside the map */
.netmap-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---- homepage locations section: a shorter map (only 2 real points, no
   need for the CDN page's taller 4-point scene) and a 3-column card grid
   now that the list sits full-width below the map instead of in a narrow
   sidebar ---- */
.nm-bigmap {
  height: 420px;
  margin-bottom: var(--s-6);
}

.nm-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}

@media (max-width: 900px) {
  .nm-bigmap {
    height: 340px;
  }
  .nm-list {
    grid-template-columns: 1fr;
  }
}

.netmap-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  border-radius: var(--radius-m);
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-border);
  text-decoration: none;
  color: var(--cream);
  overflow: hidden;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.netmap-item::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 2px;
  background: var(--node-color, var(--brand));
}

.netmap-item:hover {
  background: var(--glass-strong);
  border-color: var(--glass-border-lit);
  transform: translateX(-3px);
}

.netmap-item .nm-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.netmap-item b {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
}

.netmap-item .nm-code {
  font-family: var(--font-mono);
  direction: ltr;
  font-size: 0.79rem;
  color: var(--node-color, var(--brand));
  letter-spacing: 0.06em;
}

.netmap-item span {
  font-size: 0.8rem;
  color: var(--cream-dim);
}

.netmap-item .nm-meta {
  display: flex;
  gap: 14px;
  font-family: var(--font-mono);
  direction: ltr;
  font-size: 0.8rem;
  color: var(--cream-dim);
  margin-top: 2px;
}

/* ============================================================
   Thin feature bar
   ============================================================ */
.feature-bar-section {
  padding: 0 0 20px;
}

.feature-bar {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-l);
  overflow: hidden;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.fb-item {
  background: rgba(255, 255, 255, 0.035);
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  text-align: center;
  transition: background 0.22s ease;
}

.fb-item:hover {
  background: rgba(47, 125, 250, 0.1);
}

.fb-item svg {
  width: 22px;
  height: 22px;
  color: var(--brand-soft);
}

.fb-item b {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--cream);
}

@media (max-width: 980px) {
  .feature-bar {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 560px) {
  .feature-bar {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   Technology strip
   ============================================================ */
.tech-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 16px;
}

/* Boxed badge treatment — was bare dim text with no container. Kept
   text-only (no icon/logo mark): the project deliberately shows these as
   plain wordmarks rather than the vendors' trademarked logo artwork (see
   data/social-proof.js), so the box itself carries the visual weight
   instead of a symbol that could read as an official logo. */
.tech-item {
  display: inline-flex;
  align-items: center;
  padding: 11px 22px;
  border-radius: var(--r-pill);
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--cream-dim);
  direction: ltr;
  transition: opacity var(--d-base) var(--ease),
    color var(--d-base) var(--ease),
    border-color var(--d-base) var(--ease),
    background var(--d-base) var(--ease),
    transform var(--d-base) var(--ease);
}

.tech-item:hover {
  color: var(--cream);
  background: var(--glass-strong);
  border-color: var(--border-hover);
  transform: translateY(-2px);
}

/* ============================================================
   Testimonials
   ============================================================ */
.testi-wrap {
  max-width: 780px;
}

.testi-track {
  position: relative;
}

.testi-card {
  display: none;
  margin: 0;
  padding: 34px 36px;
  border-radius: var(--radius-l);
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

.testi-card.active {
  display: block;
  animation: testiIn 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes testiIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.testi-quote {
  width: 30px;
  height: 30px;
  color: var(--brand);
  opacity: 0.55;
  margin-bottom: 14px;
}

.testi-card blockquote {
  margin: 0 0 22px;
  font-size: 1.06rem;
  line-height: 2;
  color: var(--cream);
}

.testi-card figcaption {
  display: flex;
  align-items: center;
  gap: 13px;
}

.testi-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  color: #fff;
  background: var(--grad-brand);
}

.testi-meta b {
  display: block;
  font-size: 0.92rem;
}

.testi-meta span {
  display: block;
  font-size: 0.78rem;
  color: var(--cream-dim);
}

.testi-dots {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}

.testi-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--line);
  cursor: pointer;
  transition: background 0.2s ease, width 0.25s ease;
}

.testi-dot.active {
  width: 26px;
  border-radius: 99px;
  background: var(--brand);
}

/* ============================================================
   Newsletter
   ============================================================ */
.newsletter {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 32px;
  align-items: center;
  padding: 42px 46px;
  border-radius: var(--radius-l);
  background:
    radial-gradient(60% 130% at 92% 0%, rgba(47, 125, 250, 0.18) 0%, transparent 62%),
    var(--glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
}

.nl-copy h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

.nl-copy p {
  color: var(--cream-dim);
  margin: 0 0 22px;
  font-size: 0.95rem;
}

.nl-form {
  display: flex;
  gap: 10px;
  max-width: 460px;
}

.nl-form input {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  padding: 15px var(--s-4);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--t-small);
  transition: border-color var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease);
}

.nl-form input::placeholder {
  color: var(--cream-dim);
}

.nl-form input:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.14);
  background: var(--glass-strong);
}

.nl-art svg {
  width: 100%;
  height: auto;
}

.nl-plane {
  animation: planeFloat 6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes planeFloat {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(-6px, -10px) rotate(-3deg); }
}

@media (max-width: 860px) {
  .newsletter {
    grid-template-columns: 1fr;
    padding: 32px 26px;
  }
  .nl-art {
    max-width: 220px;
  }
  .nl-form {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nl-plane,
  .testi-card.active {
    animation: none;
  }
}

/* ---- shared control styles ----
   These three rule groups originally lived in the "Cloud VPS builder"
   section (removed — the widget itself was deleted from the homepage),
   but are genuinely reused elsewhere and were kept in place:
   .bd-out   -> dedicated.ejs (fan-speed readout label)
   .bd-chip  -> copilot.ejs (advisor intent chips)
   .bd-range -> dedicated.ejs (fan-speed slider) */
.bd-out {
  font-family: var(--font-mono);
  direction: ltr;
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--text);
}

.bd-chip {
  font: inherit;
  font-size: var(--t-caption);
  padding: 8px var(--s-4);
  border-radius: var(--r-pill);
  cursor: pointer;
  color: var(--text-muted);
  background: var(--glass);
  border: 1px solid var(--border);
  transition: color var(--d-base) var(--ease),
    border-color var(--d-base) var(--ease),
    background var(--d-base) var(--ease);
}

.bd-chip:hover {
  color: var(--text);
  border-color: var(--border-hover);
}

.bd-chip.on {
  color: #fff;
  background: rgba(37, 99, 255, 0.18);
  border-color: var(--node-color, var(--border-hover));
  box-shadow: 0 0 20px rgba(37, 99, 255, 0.2);
}

/* ---- sliders ---- */
.bd-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg,
    var(--brand) 0 var(--fill, 0%),
    rgba(255, 255, 255, 0.1) var(--fill, 0%) 100%);
  cursor: pointer;
  outline: none;
  /* The page is RTL, so without this the native thumb starts from the
     RIGHT (min at right, max at left) while the gradient above always
     fills physically left-to-right (CSS gradients ignore `direction`).
     The two disagreed — the thumb could sit inside the unfilled grey
     portion instead of on the fill boundary. Numeric controls like this
     are conventionally kept LTR even in RTL apps (progress bars, audio
     scrubbers), which also matches what was asked for here. */
  direction: ltr;
}

.bd-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--brand);
  box-shadow: 0 0 14px rgba(37, 99, 255, 0.6);
  cursor: grab;
  transition: transform var(--d-fast) var(--ease);
}

.bd-range::-webkit-slider-thumb:hover {
  transform: scale(1.14);
}

.bd-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--brand);
  box-shadow: 0 0 14px rgba(37, 99, 255, 0.6);
  cursor: grab;
}


/* .bd-sim is a shared dashed-pill button style — also used by the
   storage section's #uploadDemo button (storage.ejs / cubes.js), which
   is a separate, unrelated feature and stays. */
.bd-sim {
  font: inherit;
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-3);
  padding: 8px var(--s-3);
  border-radius: var(--r-pill);
  cursor: pointer;
  color: var(--text-muted);
  background: transparent;
  border: 1px dashed var(--border);
  transition: color var(--d-base) var(--ease), border-color var(--d-base) var(--ease);
}

.bd-sim:hover {
  color: var(--cyan);
  border-color: var(--border-focus);
}

.bd-sim svg {
  width: 13px;
  height: 13px;
}

/* ============================================================
   Dedicated server / datacenter (ch.08)
   ============================================================ */
.dc-section {
  overflow: hidden;
}

.dc-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-16);
  align-items: center;
  max-width: 1320px;
}

.dc-info h2 {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.36;
  margin: 0 0 var(--s-4);
}

.dc-info > p {
  color: var(--text-muted);
  font-size: var(--t-small);
  line-height: 1.95;
  margin: 0 0 var(--s-8);
  max-width: 46ch;
}

.dc-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
  margin-bottom: var(--s-8);
}

.dcf {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
}

.dcf svg {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  padding: 7px;
  border-radius: 10px;
  color: var(--brand-soft);
  background: rgba(37, 99, 255, 0.12);
  border: 1px solid rgba(37, 99, 255, 0.24);
  transition: transform var(--d-base) var(--ease);
}

.dcf:hover svg {
  transform: translateY(-2px) rotate(-4deg);
}

.dcf b {
  display: block;
  font-size: var(--t-caption);
  font-weight: 600;
  line-height: 1.5;
}

.dcf span {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ---- the rack ---- */
.dc-stage {
  position: relative;
  display: flex;
  justify-content: center;
}

.rack {
  position: relative;
  width: 100%;
  max-width: 340px;
  cursor: pointer;
  animation: rackFloat 8s ease-in-out infinite;
  transition: transform var(--d-slow) var(--ease), filter var(--d-slow) var(--ease);
}

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

.rack:hover,
.rack:focus-visible {
  filter: drop-shadow(0 0 34px rgba(37, 99, 255, 0.32));
}

.rack-svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.rk-floor {
  fill: none;
  stroke: var(--brand);
  stroke-width: 1.2;
  opacity: 0.4;
}

.rk-floor-glow {
  fill: var(--brand);
  opacity: 0.16;
  filter: blur(8px);
}

/* door fades and lifts to reveal the internals */
.rk-door {
  transform-box: fill-box;
  transform-origin: right center;
  transition: opacity var(--d-slow) var(--ease), transform var(--d-slow) var(--ease);
}

.rack:hover .rk-door,
.rack:focus-visible .rk-door,
.rack.open .rk-door {
  opacity: 0;
  transform: translateX(-10px) rotateY(28deg);
}

.rk-internals {
  opacity: 0.28;
  transition: opacity var(--d-slow) var(--ease);
}

.rack:hover .rk-internals,
.rack:focus-visible .rk-internals,
.rack.open .rk-internals {
  opacity: 1;
}

.rk-part {
  cursor: pointer;
  transition: filter var(--d-base) var(--ease);
}

.rk-part.lit {
  filter: drop-shadow(0 0 9px rgba(111, 157, 255, 0.9));
}

.rk-led {
  animation: ledPulse 2.4s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

.rk-ramfill {
  opacity: 0.55;
  transform-box: fill-box;
  transform-origin: bottom;
  animation: ramFill 3.4s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

@keyframes ramFill {
  0%, 100% { transform: scaleY(0.2); opacity: 0.3; }
  50%      { transform: scaleY(0.85); opacity: 0.65; }
}

.rk-fan {
  animation-name: fanSpin;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.rk-uplink path {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 1.4;
  stroke-dasharray: 5 8;
  opacity: 0.65;
  animation: fiberFlow 2.6s linear infinite;
}

.rack-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  margin-top: var(--s-3);
  font-size: 0.78rem;
  color: var(--text-muted);
  transition: opacity var(--d-base) var(--ease);
}

.rack-hint svg {
  width: 14px;
  height: 14px;
}

.rack:hover .rack-hint {
  opacity: 0;
}

/* ---- floating hardware panel ---- */
.rack-panel {
  position: absolute;
  top: 50%;
  right: -6%;
  transform: translateY(-50%);
  width: 260px;
  padding: var(--s-4);
  border-radius: var(--r-card);
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  border: 1px solid var(--border);
  box-shadow: var(--glass-shadow);
  animation: widgetFloat 9s ease-in-out infinite;
}

.rp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}

.rp-head b {
  font-size: var(--t-caption);
  font-weight: 700;
}

.rp-spec {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--text-2);
}

.rp-note {
  margin: var(--s-2) 0 0;
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--text-muted);
  min-height: 1.6em;
}

.rp-rows {
  display: grid;
  gap: 1px;
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
}

.rp-row {
  font: inherit;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  padding: 8px 6px;
  margin: 0 -6px;
  border: none;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  text-align: right;
  color: var(--text-muted);
  transition: background var(--d-base) var(--ease), color var(--d-base) var(--ease);
}

.rp-row:hover,
.rp-row.on {
  background: rgba(37, 99, 255, 0.12);
  color: var(--text);
}

.rp-row span {
  font-size: 0.8rem;
}

.rp-row i {
  font-style: normal;
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* ---- cooling engine: airflow particles ---- */
.rk-airflow .af {
  fill: var(--cyan);
  opacity: 0;
  animation-name: airRise;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes airRise {
  0%   { transform: translateY(0); opacity: 0; }
  12%  { opacity: 0.55; }
  70%  { opacity: 0.35; }
  100% { transform: translateY(-330px); opacity: 0; }
}

/* fan speed changes the airflow rate, nothing physical */
.dc-stage[data-fan="1"] .rk-airflow .af { animation-duration: 6s !important; opacity: 0.7; }
.dc-stage[data-fan="3"] .rk-airflow .af { animation-duration: 1.9s !important; }
.dc-stage[data-fan="3"] .rk-fan { animation-duration: 0.9s !important; }
.dc-stage[data-fan="1"] .rk-fan { animation-duration: 4.5s !important; }

.cool-ctl {
  width: 100%;
  max-width: 340px;
  margin-top: var(--s-5);
}

.cool-ctl label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: var(--t-caption);
  color: var(--text-muted);
  margin-bottom: var(--s-2);
}

.cool-note {
  display: block;
  margin-top: var(--s-2);
  font-size: 0.74rem;
  color: var(--text-disabled);
}

/* ---- component detail rows ---- */
.rp-detail {
  margin: var(--s-3) 0 0;
  padding: 0;
  display: none;
  grid-template-columns: auto 1fr;
  gap: 6px var(--s-3);
  font-size: 0.76rem;
}

.rp-detail.on {
  display: grid;
}

.rp-detail dt {
  color: var(--text-muted);
}

.rp-detail dd {
  margin: 0;
  text-align: left;
  direction: ltr;
  color: var(--text-2);
  font-weight: 600;
}

/* ---- power-on story ---- */
.boot-story {
  width: 100%;
  max-width: 340px;
  margin-top: var(--s-5);
  display: grid;
  gap: 6px;
}

.boot-step {
  position: relative;
  padding-right: var(--s-6);
  font-size: 0.78rem;
  color: var(--text-disabled);
  opacity: 0.45;
  transition: color var(--d-slow) var(--ease), opacity var(--d-slow) var(--ease);
}

.boot-step::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  transition: background var(--d-base) var(--ease), border-color var(--d-base) var(--ease);
}

.boot-step.on {
  color: var(--text);
  opacity: 1;
}

.boot-step.on::before {
  border-color: var(--brand);
  background: var(--brand);
  box-shadow: 0 0 10px rgba(37, 99, 255, 0.7);
}

.boot-step.done {
  color: var(--text-2);
  opacity: 1;
}

.boot-step.done::before {
  border-color: var(--success);
  background: var(--success);
}

/* components light up as the boot sequence reaches them */
.rk-part {
  opacity: 0.45;
  transition: opacity var(--d-slow) var(--ease), filter var(--d-base) var(--ease);
}

.rack.booted .rk-part,
.rack:hover .rk-part,
.rack.open .rk-part {
  opacity: 1;
}

.rk-part.powered {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .rk-airflow .af {
    animation: none;
    opacity: 0.35;
  }
  .boot-step {
    opacity: 1;
    color: var(--text-2);
  }
  .rk-part {
    opacity: 1;
  }
}

@media (max-width: 1180px) {
  .rack-panel {
    position: static;
    transform: none;
    width: 100%;
    max-width: 340px;
    margin-top: var(--s-5);
    animation: none;
  }
  .dc-stage {
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 1080px) {
  .dc-wrap {
    grid-template-columns: 1fr;
    gap: var(--s-12);
  }
}

@media (max-width: 560px) {
  .dc-features {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rack,
  .rack-panel,
  .rk-led,
  .rk-ramfill,
  .rk-fan,
  .rk-uplink path {
    animation: none;
  }
  .rk-door,
  .rk-internals {
    transition: none;
  }
}

/* ============================================================
   Global reach — rotating Earth (ch.09, adapted)
   ============================================================ */
.reach-section {
  overflow: hidden;
}

.reach-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-16);
  align-items: center;
  max-width: 1320px;
}

.reach-info h2 {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.36;
  margin: 0 0 var(--s-4);
}

.reach-info > p {
  color: var(--text-muted);
  font-size: var(--t-small);
  line-height: 1.95;
  margin: 0 0 var(--s-8);
  max-width: 46ch;
}

.reach-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4) var(--s-5);
  margin-bottom: var(--s-8);
}

.rf {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
}

.rf svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 3px;
  padding: 3px;
  border-radius: 50%;
  color: var(--cyan);
  background: rgba(0, 212, 255, 0.12);
  border: 1px solid rgba(0, 212, 255, 0.24);
}

.rf b {
  display: block;
  font-size: var(--t-caption);
  font-weight: 600;
  line-height: 1.5;
}

.rf span {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ---- the globe ---- */
.reach-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.globe3d {
  position: relative;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 1;
}

.globe3d canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.globe-fallback {
  font-size: var(--t-caption);
  color: var(--text-muted);
  text-align: center;
  line-height: 1.8;
}

.globe-tip {
  position: absolute;
  top: 0;
  left: 0;
  padding: 8px var(--s-3);
  border-radius: 12px;
  background: rgba(12, 20, 35, 0.94);
  border: 1px solid var(--border-hover);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  white-space: nowrap;
  margin: -52px 0 0 12px;
}

.globe-tip b {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
}

.globe-tip span {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* ---- dashboard ---- */
.reach-dash {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  width: 100%;
  max-width: 440px;
  margin-top: var(--s-5);
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
}

.rd-cell {
  background: rgba(10, 18, 32, 0.72);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  padding: var(--s-3);
  text-align: center;
}

.rd-cell span {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.rd-cell b {
  display: block;
  margin-top: 3px;
  font-family: var(--font-mono);
  direction: ltr;
  font-size: 1.05rem;
  font-weight: 700;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rd-cell b i {
  font-style: normal;
  font-size: 0.62rem;
  margin-inline-start: 2px;
}

/* ---- datacenter explorer tooltip ---- */
.gt-rows {
  display: none;
  grid-template-columns: auto 1fr;
  gap: 4px var(--s-3);
  margin: var(--s-2) 0 0;
  padding-top: var(--s-2);
  border-top: 1px solid var(--border);
  font-size: 0.7rem;
}

.gt-rows dt {
  color: var(--text-muted);
}

.gt-rows dd {
  margin: 0;
  direction: ltr;
  text-align: left;
  color: var(--text-2);
  font-weight: 600;
}

/* ---- request lifecycle story ---- */
.req-story {
  list-style: none;
  counter-reset: rq;
  margin: var(--s-5) 0 0;
  padding: 0;
  width: 100%;
  max-width: 440px;
  display: grid;
  gap: 5px;
}

.req-story li {
  counter-increment: rq;
  position: relative;
  padding: 7px var(--s-8) 7px var(--s-3);
  border-radius: 10px;
  font-size: 0.78rem;
  color: var(--text-disabled);
  transition: background var(--d-base) var(--ease), color var(--d-base) var(--ease);
}

.req-story li::before {
  content: counter(rq);
  position: absolute;
  top: 50%;
  right: var(--s-3);
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  border: 1px solid var(--border);
  transition: background var(--d-base) var(--ease),
    border-color var(--d-base) var(--ease), color var(--d-base) var(--ease);
}

.req-story li.on {
  background: rgba(37, 99, 255, 0.14);
  color: #fff;
}

.req-story li.on::before {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 0 12px rgba(37, 99, 255, 0.7);
}

.req-story li.done {
  color: var(--text-2);
}

.req-story li.done::before {
  background: var(--success);
  border-color: var(--success);
  color: var(--bg);
}

@media (prefers-reduced-motion: reduce) {
  .req-story li {
    transition: none;
  }
}

.reach-note {
  max-width: 440px;
  margin: var(--s-4) 0 0;
  font-size: 0.74rem;
  line-height: 1.7;
  color: var(--text-disabled);
  text-align: center;
}

@media (max-width: 1080px) {
  .reach-wrap {
    grid-template-columns: 1fr;
    gap: var(--s-12);
  }
}

@media (max-width: 560px) {
  .reach-features {
    grid-template-columns: 1fr;
  }
  .reach-dash {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   Storage & backup (ch.10, adapted)
   ============================================================ */
.store-section {
  overflow: hidden;
}

.store-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-16);
  align-items: center;
  max-width: 1320px;
}

.store-info h2 {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.36;
  margin: 0 0 var(--s-4);
}

.store-info > p {
  color: var(--text-muted);
  font-size: var(--t-small);
  line-height: 1.95;
  margin: 0 0 var(--s-8);
  max-width: 46ch;
}

.store-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4) var(--s-5);
  margin-bottom: var(--s-6);
}

.sf {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
}

.sf svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 3px;
  padding: 3px;
  border-radius: 50%;
  color: var(--cyan);
  background: rgba(0, 212, 255, 0.12);
  border: 1px solid rgba(0, 212, 255, 0.24);
}

.sf b {
  display: block;
  font-size: var(--t-caption);
  font-weight: 600;
  line-height: 1.5;
}

.sf span {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* expectation-setting notice, not fine print */
.store-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4);
  margin-bottom: var(--s-6);
  border-radius: var(--r-card);
  background: rgba(245, 158, 11, 0.07);
  border: 1px solid rgba(245, 158, 11, 0.26);
}

.store-disclaimer svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--warning);
}

.store-disclaimer p {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.85;
  color: var(--text-2);
}

/* ---- floating object field ---- */
.store-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cubefield {
  position: relative;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 1 / 0.92;
}

.cubefield canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.cube-tip {
  position: absolute;
  top: 0;
  left: 0;
  padding: 7px var(--s-3);
  border-radius: 11px;
  background: rgba(12, 20, 35, 0.94);
  border: 1px solid var(--border-hover);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  white-space: nowrap;
  margin: -46px 0 0 12px;
}

.cube-tip b {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
}

.cube-tip span {
  display: block;
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* ---- file lifecycle timeline ---- */
.life-line {
  list-style: none;
  counter-reset: lf;
  margin: var(--s-5) 0 0;
  padding: 0;
  width: 100%;
  max-width: 460px;
  display: grid;
  gap: 4px;
}

.life-line li {
  counter-increment: lf;
  position: relative;
  padding: 8px var(--s-8) 8px var(--s-3);
  border-radius: 10px;
  transition: background var(--d-base) var(--ease);
}

.life-line li::before {
  content: counter(lf);
  position: absolute;
  top: 11px;
  right: var(--s-3);
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-disabled);
  border: 1px solid var(--border);
  transition: background var(--d-base) var(--ease),
    border-color var(--d-base) var(--ease), color var(--d-base) var(--ease);
}

.life-line b {
  display: block;
  font-size: var(--t-caption);
  font-weight: 600;
  color: var(--text-muted);
  transition: color var(--d-base) var(--ease);
}

.life-line span {
  display: block;
  font-size: 0.74rem;
  color: var(--text-disabled);
}

.life-line li.on {
  background: rgba(37, 99, 255, 0.13);
}

.life-line li.on b {
  color: #fff;
}

.life-line li.on::before {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 0 12px rgba(37, 99, 255, 0.7);
}

.life-line li.done b {
  color: var(--text-2);
}

.life-line li.done::before {
  background: var(--success);
  border-color: var(--success);
  color: var(--bg);
}

@media (prefers-reduced-motion: reduce) {
  .life-line li,
  .life-line li::before,
  .life-line b {
    transition: none;
  }
}

.cube-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--s-4);
}

.cl-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  color: var(--text-muted);
}

.cl-item i {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--tint, var(--brand));
  box-shadow: 0 0 8px var(--tint, var(--brand));
}

.store-stage .reach-dash {
  margin-top: var(--s-5);
}

@media (max-width: 1080px) {
  .store-wrap {
    grid-template-columns: 1fr;
    gap: var(--s-12);
  }
}

@media (max-width: 560px) {
  .store-features {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Security — layered shield (ch.11, adapted)
   ============================================================ */
.sec-section {
  overflow: hidden;
}

.sec-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-16);
  align-items: center;
  max-width: 1320px;
}

.sec-info h2 {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.36;
  margin: 0 0 var(--s-4);
}

.sec-info > p {
  color: var(--text-muted);
  font-size: var(--t-small);
  line-height: 1.95;
  margin: 0 0 var(--s-6);
  max-width: 46ch;
}

/* ---- protection layers list ---- */
.sec-layers {
  display: grid;
  gap: var(--s-2);
  margin-bottom: var(--s-8);
}

.sl {
  font: inherit;
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-button);
  text-align: right;
  cursor: pointer;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  transition: background var(--d-base) var(--ease),
    border-color var(--d-base) var(--ease);
}

.sl:hover,
.sl.on {
  background: rgba(0, 212, 255, 0.09);
  border-color: rgba(0, 212, 255, 0.28);
}

.sl-n {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--cyan);
  background: rgba(0, 212, 255, 0.12);
  border: 1px solid rgba(0, 212, 255, 0.26);
}

.sl-t b {
  display: block;
  font-size: var(--t-caption);
  font-weight: 600;
  line-height: 1.5;
}

.sl-t span {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ---- zero trust checkpoint path ---- */
.zt-block {
  margin-bottom: var(--s-8);
  padding: var(--s-4);
  border-radius: var(--r-card);
  background: var(--glass);
  border: 1px solid var(--border);
}

.zt-head {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: var(--s-3);
}

.zt-line {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.zt-line li {
  position: relative;
  padding: 6px var(--s-3);
  border-radius: var(--r-pill);
  font-size: 0.74rem;
  color: var(--text-disabled);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  transition: background var(--d-base) var(--ease),
    color var(--d-base) var(--ease),
    border-color var(--d-base) var(--ease);
}

.zt-line li:not(:last-child)::after {
  content: "←";
  margin-inline-start: 6px;
  color: var(--text-disabled);
  opacity: 0.5;
}

.zt-line li.on {
  color: #fff;
  background: rgba(0, 212, 255, 0.18);
  border-color: rgba(0, 212, 255, 0.45);
  box-shadow: 0 0 16px rgba(0, 212, 255, 0.28);
}

.zt-line li.done {
  color: var(--text-2);
  border-color: rgba(34, 197, 94, 0.3);
  background: rgba(34, 197, 94, 0.1);
}

/* ---- confirmed protections ---- */
.sec-protections {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2);
  max-width: 440px;
  margin-top: var(--s-4);
}

.sp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px var(--s-3);
  border-radius: var(--r-pill);
  font-size: 0.74rem;
  color: var(--text-muted);
  background: var(--glass);
  border: 1px solid var(--border);
}

.sp-chip i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 7px var(--success);
}

.sp-chip b {
  color: var(--text-2);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .zt-line li {
    transition: none;
  }
}

/* ---- shield visual ---- */
.sec-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.shieldwrap {
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1;
}

.shieldwrap canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.shield-tip {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  padding: 6px var(--s-3);
  border-radius: var(--r-pill);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--cyan);
  background: rgba(12, 20, 35, 0.9);
  border: 1px solid rgba(0, 212, 255, 0.35);
  pointer-events: none;
}

.sec-legend {
  display: flex;
  gap: var(--s-5);
  margin-top: var(--s-3);
}

.sl-key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  color: var(--text-muted);
}

.sl-key i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.k-safe {
  background: #8cc8ff;
  box-shadow: 0 0 8px #8cc8ff;
}

.k-block {
  background: var(--danger);
  box-shadow: 0 0 8px var(--danger);
}

.sec-stage .reach-dash {
  margin-top: var(--s-5);
}

.sec-note {
  max-width: 440px;
  margin-top: var(--s-4);
  margin-bottom: 0;
}

/* ---- customer-side steps ---- */
.sec-steps {
  width: 100%;
  max-width: 440px;
  margin-top: var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--glass);
  overflow: hidden;
}

.sec-steps summary {
  padding: var(--s-3) var(--s-4);
  cursor: pointer;
  list-style: none;
  font-size: var(--t-caption);
  font-weight: 600;
  color: var(--text-2);
}

.sec-steps summary::-webkit-details-marker {
  display: none;
}

.sec-steps ul {
  margin: 0;
  padding: 0 var(--s-8) var(--s-4);
  display: grid;
  gap: var(--s-2);
}

.sec-steps li {
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--text-muted);
}

@media (max-width: 1080px) {
  .sec-wrap {
    grid-template-columns: 1fr;
    gap: var(--s-12);
  }
}

/* ============================================================
   Service advisor (ch.12, adapted)
   ============================================================ */
.cop-section {
  overflow: hidden;
}

.cop-wrap {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: var(--s-16);
  align-items: center;
  max-width: 1320px;
}

/* ---- conversation panel ---- */
.cop-panel {
  padding: var(--s-6);
  border-radius: var(--r-hero);
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-float);
}

.cop-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--s-4);
}

.cop-head b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-h5);
  font-weight: 700;
}

.cop-head span {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 3px;
}

.cop-thread {
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding-inline-end: var(--s-2);
}

.cop-msg {
  max-width: 90%;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-card);
  font-size: var(--t-caption);
  line-height: 1.85;
  animation: copIn var(--d-base) var(--ease);
}

@keyframes copIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.cop-msg p {
  margin: 0 0 6px;
}

.cop-msg p:last-child {
  margin-bottom: 0;
}

.cop-bot {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  color: var(--text-2);
}

.cop-user {
  align-self: flex-end;
  background: rgba(37, 99, 255, 0.16);
  border: 1px solid rgba(37, 99, 255, 0.3);
  color: #fff;
}

/* typing indicator */
.cop-typing {
  display: flex;
  gap: 5px;
  align-items: center;
}

.cop-typing .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-soft);
  animation: copDot 1.1s ease-in-out infinite;
}

.cop-typing .dot:nth-child(2) { animation-delay: 0.15s; }
.cop-typing .dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes copDot {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  50%      { opacity: 1; transform: translateY(-3px); }
}

/* answer detail */
.cop-spec {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: var(--s-3) 0;
}

.cop-spec span {
  padding: 4px var(--s-3);
  border-radius: var(--r-pill);
  font-size: 0.72rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
}

.cop-price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  margin: var(--s-2) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.cop-price span {
  font-size: 0.74rem;
  color: var(--text-muted);
}

.cop-price b {
  font-family: var(--font-mono);
  direction: ltr;
  font-size: 1.05rem;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cop-notes {
  list-style: none;
  margin: var(--s-2) 0 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.cop-notes li {
  position: relative;
  padding-right: var(--s-4);
  font-size: 0.74rem;
  color: var(--text-muted);
}

.cop-notes li::before {
  content: "";
  position: absolute;
  top: 8px;
  right: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cyan);
}

.cop-cta {
  display: inline-block;
  margin-top: var(--s-3);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--brand-soft);
  text-decoration: none;
}

.cop-cta:hover {
  text-decoration: underline;
}

.cop-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
}

.cop-note {
  margin: var(--s-3) 0 0;
  font-size: 0.74rem;
  line-height: 1.7;
  color: var(--text-disabled);
}

/* ---- core visual ---- */
.cop-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.core {
  position: relative;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1;
  /* lets descendants size themselves relative to THIS box via cqw/cqh,
     instead of the viewport or their own (text-dependent) box — see .orb */
  container-type: inline-size;
}

.core canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.core-orbit {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.orb {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 5px var(--s-3);
  border-radius: var(--r-pill);
  font-size: 0.72rem;
  text-decoration: none;
  white-space: nowrap;
  pointer-events: auto;
  color: var(--text-muted);
  background: rgba(12, 20, 35, 0.8);
  border: 1px solid var(--border);
  /* BUG FIXED: this used to be translateX(46%), but a percentage in
     `transform` resolves against the ELEMENT'S OWN width — and every orb
     has a different width because the labels are different lengths
     ("زیرساخت" vs "پشتیبان‌گیری"). That put each label at a different
     distance from the centre instead of on a shared circle, so the ring
     looked scattered/broken rather than orbiting the core.
     Fix: `cqw` resolves against the .core container's width (set via
     container-type above) regardless of the label's own size, so every
     orb sits at the same radius. */
  transform:
    rotate(calc(360deg / var(--n) * var(--i)))
    translateX(40cqw)
    rotate(calc(-360deg / var(--n) * var(--i)))
    translate(-50%, -50%);
  transition: color var(--d-base) var(--ease), border-color var(--d-base) var(--ease);
}

.orb:hover {
  color: #fff;
  border-color: var(--border-hover);
}

.cop-legend {
  margin-top: var(--s-4);
  font-size: 0.74rem;
  color: var(--text-disabled);
  text-align: center;
  max-width: 320px;
}

@media (max-width: 1080px) {
  .cop-wrap {
    grid-template-columns: 1fr;
    gap: var(--s-12);
  }
  .cop-stage {
    order: -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cop-msg,
  .cop-typing .dot {
    animation: none;
  }
}

/* ---- sizing questionnaire ---- */
.cop-sizing {
  margin-top: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
}

.cop-sizing summary {
  padding: var(--s-3) var(--s-4);
  cursor: pointer;
  list-style: none;
  font-size: var(--t-caption);
  font-weight: 600;
  color: var(--text-2);
}

.cop-sizing summary::-webkit-details-marker {
  display: none;
}

.cs-body {
  padding: 0 var(--s-4) var(--s-4);
  display: grid;
  gap: var(--s-4);
}

.cs-q label {
  display: block;
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-bottom: var(--s-2);
}

.cs-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cs-go {
  justify-self: start;
}

/* ---- architecture blueprint ---- */
.blueprint {
  width: 100%;
  max-width: 360px;
  margin-top: var(--s-5);
  padding: var(--s-4);
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
}

.bp-title {
  font-size: var(--t-caption);
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: var(--s-3);
}

.bp-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.bp-link {
  fill: none;
  stroke: rgba(120, 180, 255, 0.4);
  stroke-width: 1.2;
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  animation: bpDraw 0.7s var(--ease) forwards;
}

@keyframes bpDraw {
  to { stroke-dashoffset: 0; }
}

.bp-node {
  opacity: 0;
  animation: bpPop 0.45s var(--ease) forwards;
}

@keyframes bpPop {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.bp-node rect {
  fill: rgba(37, 99, 255, 0.14);
  stroke: rgba(37, 99, 255, 0.36);
  stroke-width: 1;
}

.bp-node text {
  font-family: var(--font-body);
  font-size: 9.5px;
  fill: var(--text);
}

.bp-node.bp-sec rect {
  fill: rgba(0, 212, 255, 0.13);
  stroke: rgba(0, 212, 255, 0.34);
}

.bp-node.bp-backup rect {
  fill: rgba(34, 197, 94, 0.12);
  stroke: rgba(34, 197, 94, 0.32);
}

.bp-node.bp-edge rect {
  fill: rgba(255, 255, 255, 0.06);
  stroke: var(--border);
}

/* ============================================================
   Floating quick-action orb
   ============================================================ */
.orb-dock {
  position: fixed;
  bottom: var(--s-5);
  left: var(--s-5);
  z-index: 9998;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
  transition: opacity var(--d-slow) var(--ease);
}

.orb-dock.quiet:not(.open) {
  opacity: 0.45;
}

.orb-btn {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--grad-brand);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 14px 36px rgba(37, 99, 255, 0.4);
  transition: transform var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease);
}

.orb-btn:hover {
  transform: scale(1.06);
  box-shadow: 0 18px 44px rgba(37, 99, 255, 0.55);
}

/* breathing halo */
.orb-core {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(0, 212, 255, 0.5);
  animation: orbBreathe 3.2s ease-out infinite;
  pointer-events: none;
}

@keyframes orbBreathe {
  0%   { transform: scale(0.9); opacity: 0.7; }
  100% { transform: scale(1.5); opacity: 0; }
}

.orb-icon {
  width: 22px;
  height: 22px;
}

.orb-close {
  display: none;
}

.orb-dock.open .orb-open {
  display: none;
}

.orb-dock.open .orb-close {
  display: block;
}

.orb-menu {
  width: 244px;
  padding: var(--s-3);
  border-radius: var(--r-card);
  background: rgba(12, 20, 35, 0.94);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--border);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5);
  animation: orbIn var(--d-base) var(--ease);
}

@keyframes orbIn {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.om-head {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: var(--s-2) var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--s-2);
}

.om-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: 10px var(--s-2);
  border-radius: 10px;
  text-decoration: none;
  font-size: var(--t-caption);
  color: var(--text-2);
  transition: background var(--d-base) var(--ease), color var(--d-base) var(--ease);
}

.om-item:hover {
  background: rgba(37, 99, 255, 0.12);
  color: #fff;
}

.om-item svg {
  width: 14px;
  height: 14px;
  opacity: 0.6;
}

.om-call {
  display: block;
  margin-top: var(--s-2);
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--brand-soft);
  text-decoration: none;
}

@media (max-width: 560px) {
  .orb-dock {
    bottom: var(--s-4);
    left: var(--s-4);
  }
  .orb-menu {
    width: min(244px, calc(100vw - 48px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .orb-core,
  .orb-menu,
  .bp-link,
  .bp-node {
    animation: none;
  }
  .bp-link {
    stroke-dashoffset: 0;
  }
  .bp-node {
    opacity: 1;
  }
}

/* ============================================================
   Trust centre (ch.13)
   ============================================================ */
.trust-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: var(--s-5);
  align-items: stretch;
}

.tc-card {
  display: flex;
  flex-direction: column;
  padding: var(--s-6);
  border-radius: var(--r-card);
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  border: 1px solid var(--border);
  box-shadow: var(--glass-shadow);
  transition: border-color var(--d-base) var(--ease), transform var(--d-slow) var(--ease);
}

.tc-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-4px);
}

.tc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}

.tc-head b {
  font-family: var(--font-display);
  font-size: var(--t-h5);
  font-weight: 700;
}

.tc-sub {
  margin: 0 0 var(--s-4);
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ---- component list ---- */
.tc-list {
  list-style: none;
  margin: 0 0 var(--s-4);
  padding: 0;
  display: grid;
  gap: var(--s-3);
  flex: 1;
}

.tc-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--border);
}

.tc-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.tc-dot {
  width: 8px;
  height: 8px;
  margin-top: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.16);
  animation: statusPulse 2.4s ease-in-out infinite;
}

.tc-list li:nth-child(2) .tc-dot { animation-delay: 0.3s; }
.tc-list li:nth-child(3) .tc-dot { animation-delay: 0.6s; }
.tc-list li:nth-child(4) .tc-dot { animation-delay: 0.9s; }
.tc-list li:nth-child(5) .tc-dot { animation-delay: 1.2s; }
.tc-list li:nth-child(6) .tc-dot { animation-delay: 1.5s; }

.tc-name b {
  display: block;
  font-size: var(--t-caption);
  font-weight: 600;
}

.tc-name i {
  display: block;
  font-style: normal;
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.tc-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--brand-soft);
  text-decoration: none;
  margin-top: auto;
}

/* ---- choose-plan section closing note ---- */
.cs-choose-note {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  max-width: 70ch;
  margin: var(--s-6) auto 0;
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
  text-align: start;
  font-size: 0.92rem;
  line-height: 1.8;
  color: var(--cream-dim);
}

/* ---- related-services closing note (before final CTA) ---- */
.cs-related-note {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  max-width: 72ch;
  margin: 0 auto var(--s-8);
  padding: 18px 22px;
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border);
}

.cs-related-note-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--text-muted);
}

.cs-related-note p {
  margin: 0;
  text-align: start;
  font-size: 0.92rem;
  line-height: 1.9;
  color: var(--cream-dim);
}

/* ---- single-line centered panel note ---- */
.cs-panel-note {
  max-width: 900px;
  margin: var(--s-6) auto 0;
  text-align: center;
  font-size: 0.92rem;
  line-height: 1.8;
  color: #ffffff;
}

/* ---- single-line centered note (wp-host "not just WordPress" note) ---- */
.wp-cloud-note {
  max-width: 900px;
  margin: var(--s-5) auto 0;
  text-align: center;
  font-size: 0.92rem;
  line-height: 1.8;
  color: var(--cream-dim);
}

.tc-link svg {
  width: 14px;
  height: 14px;
  transition: transform var(--d-base) var(--ease);
}

.tc-link:hover svg {
  transform: translateX(-3px);
}

/* ---- uptime ring ---- */
.tc-mid {
  align-items: center;
  text-align: center;
}

.uptime-ring {
  position: relative;
  width: 172px;
  margin-bottom: var(--s-5);
}

.uptime-ring svg {
  width: 100%;
  height: auto;
  transform: rotate(-90deg);
}

.ur-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.07);
  stroke-width: 8;
}

.ur-prog {
  fill: none;
  stroke: var(--brand);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 327;
  stroke-dashoffset: 327;
  filter: drop-shadow(0 0 8px rgba(37, 99, 255, 0.65));
  animation: urFill 1.8s var(--ease) forwards;
  animation-delay: 0.2s;
}

@keyframes urFill {
  /* 99.99% of the circumference */
  to { stroke-dashoffset: 0.03; }
}

.ur-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 2px;
}

.ur-label b {
  font-family: var(--font-mono);
  direction: ltr;
  font-size: 1.5rem;
  font-weight: 700;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ur-label span {
  font-size: 0.74rem;
  color: var(--text-muted);
}

.tc-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4) var(--s-3);
  width: 100%;
}

.tcm b {
  display: block;
  font-family: var(--font-mono);
  direction: ltr;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
}

.tcm span {
  display: block;
  margin-top: 2px;
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* ---- technology stack ---- */
.tc-stack {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-content: flex-start;
  flex: 1;
}

.tcs {
  padding: 7px var(--s-3);
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  direction: ltr;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  transition: color var(--d-base) var(--ease),
    border-color var(--d-base) var(--ease),
    background var(--d-base) var(--ease);
}

.tcs:hover {
  color: var(--brand-soft);
  border-color: var(--border-hover);
  background: rgba(37, 99, 255, 0.1);
}

/* ---- per-datacenter status cards ---- */
.dc-status {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-5);
}

.dcs-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s-5);
  border-radius: var(--r-card);
  text-decoration: none;
  color: var(--text);
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  border: 1px solid var(--border);
  border-top: 2px solid var(--node-color, var(--brand));
  box-shadow: var(--glass-shadow);
  transition: border-color var(--d-base) var(--ease), transform var(--d-slow) var(--ease);
}

.dcs-card:hover {
  border-color: var(--node-color, var(--border-hover));
  transform: translateY(-4px);
}

.dcs-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--s-3);
}

.dcs-name b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-caption);
  font-weight: 700;
}

.dcs-name i {
  display: block;
  font-style: normal;
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.dcs-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px var(--s-3);
  border-radius: var(--r-pill);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--success);
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.26);
  white-space: nowrap;
}

.dcs-rows {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px var(--s-3);
  margin: 0 0 var(--s-4);
  font-size: 0.76rem;
}

.dcs-rows dt {
  color: var(--text-muted);
}

.dcs-rows dd {
  margin: 0;
  text-align: left;
  direction: ltr;
  font-weight: 600;
  color: var(--text-2);
}

.dcs-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--node-color, var(--brand-soft));
}

.dcs-more svg {
  width: 13px;
  height: 13px;
  transition: transform var(--d-base) var(--ease);
}

.dcs-card:hover .dcs-more svg {
  transform: translateX(-3px);
}

/* ---- unavailable locations: visibly inactive, never priced ---- */
.dcs-card.is-off {
  cursor: default;
  opacity: 0.72;
  border-top-color: var(--border);
  background: rgba(255, 255, 255, 0.02);
  box-shadow: none;
}

.dcs-card.is-off:hover {
  transform: none;
  border-color: var(--border);
}

.dcs-state.off {
  color: var(--text-disabled);
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border);
}

.off-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-disabled);
  flex-shrink: 0;
}

.dcs-card.is-off .dcs-rows dd {
  color: var(--text-disabled);
}

.dcs-note {
  margin-top: auto;
  font-size: 0.74rem;
  line-height: 1.6;
  color: var(--text-disabled);
}

@media (max-width: 900px) {
  .dc-status {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dcs-card:hover {
    transform: none;
  }
}

/* ---- locations at capacity: present, but not orderable ---- */
.dcs-card.is-full {
  border-top-color: var(--warning);
  opacity: 0.82;
  cursor: default;
}

.dcs-card.is-full:hover {
  transform: none;
  border-color: rgba(245, 158, 11, 0.4);
}

.dcs-state.full {
  color: var(--warning);
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.3);
}

.full-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--warning);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}

.dcs-note {
  margin: 0 0 var(--s-4);
  font-size: 0.78rem;
  line-height: 1.8;
  color: var(--text-muted);
  flex: 1;
}

.dcs-more.muted {
  color: var(--text-disabled);
  font-weight: 500;
}

/* the grid now holds five cards */
.dc-status {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

/* ---- unavailable locations ---- */
.dcs-card.is-off {
  border-top-color: var(--border);
  opacity: 0.72;
}

.dcs-card.is-off:hover {
  opacity: 1;
  border-color: rgba(245, 158, 11, 0.34);
  transform: none;
}

.dcs-state.off {
  color: var(--warning);
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.28);
}

.off-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warning);
  flex-shrink: 0;
}

.dcs-off-note {
  margin: 0 0 var(--s-4);
  font-size: 0.76rem;
  line-height: 1.7;
  color: var(--text-muted);
}

.dcs-more.muted {
  color: var(--text-muted);
}

/* ---- port capacity bars ---- */
.cap-panel,
.sched-panel {
  margin-top: var(--s-5);
  padding: var(--s-5);
  border-radius: var(--r-card);
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
}

.cap-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-bottom: var(--s-4);
}

.cap-head b {
  font-size: var(--t-caption);
  font-weight: 700;
}

.cap-head span {
  font-size: 0.74rem;
  color: var(--text-disabled);
}

.cap-row {
  display: grid;
  grid-template-columns: 76px 1fr 62px;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}

.cap-row:last-child {
  margin-bottom: 0;
}

.cap-name {
  font-size: 0.8rem;
  color: var(--text-2);
}

.cap-track {
  height: 8px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.cap-track i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--r-pill);
  background: var(--node-color, var(--brand));
  box-shadow: 0 0 10px var(--node-color, var(--brand));
  animation: capGrow 1.3s var(--ease) forwards;
}

@keyframes capGrow {
  to { width: var(--w, 50%); }
}

.cap-val {
  font-family: var(--font-mono);
  direction: ltr;
  text-align: left;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
}

/* ---- automatic schedule ---- */
.sched-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-2);
}

.sched-list li {
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-button);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-right: 2px solid var(--brand);
}

.sched-list li.sc-backup { border-right-color: var(--success); }
.sched-list li.sc-sec { border-right-color: var(--cyan); }
.sched-list li.sc-monitor { border-right-color: var(--brand-soft); }

.sc-when {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-muted);
}

.sc-what {
  font-size: 0.8rem;
  color: var(--text-2);
}

@media (max-width: 560px) {
  .cap-row {
    grid-template-columns: 64px 1fr 54px;
  }
  .sched-list li {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cap-track i {
    animation: none;
    width: var(--w, 50%);
  }
}

/* ---- status bar ---- */
.trust-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: var(--s-5);
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
}

.tb-cell {
  background: rgba(10, 18, 32, 0.72);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  padding: var(--s-4);
  text-align: center;
}

.tb-cell span {
  display: block;
  font-size: 0.74rem;
  color: var(--text-muted);
}

.tb-cell b {
  display: block;
  margin-top: 4px;
  font-size: var(--t-caption);
  font-weight: 700;
  color: var(--text);
}

.trust-note {
  margin: var(--s-4) 0 0;
  font-size: 0.74rem;
  line-height: 1.7;
  color: var(--text-disabled);
  text-align: center;
}

@media (max-width: 1080px) {
  .trust-grid {
    grid-template-columns: 1fr 1fr;
  }
  .tc-mid {
    grid-column: 1 / -1;
    order: -1;
  }
}

@media (max-width: 700px) {
  .trust-grid {
    grid-template-columns: 1fr;
  }
  .trust-bar {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tc-dot,
  .ur-prog {
    animation: none;
  }
  .ur-prog {
    stroke-dashoffset: 0.03;
  }
  .tc-card:hover {
    transform: none;
  }
}

/* ============================================================
   CDN page
   ============================================================ */
.cdn-hero {
  min-height: auto;
  padding: 150px 0 var(--s-24);
}

/* ---- status panel beside the globe ---- */
/* (merged with the second .cdn-globe-stage rule that used to live further
   down this file — same selector declared twice is a real bug: it works by
   accident because the two blocks don't set conflicting properties, but the
   next person to edit one copy has no way to know the other exists) */
.cdn-globe-stage {
  position: relative;
  flex-direction: column;
  gap: var(--s-5);
  min-height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.launch-badge {
  margin-bottom: var(--s-4);
}

/* ---- hero stat band (reference design) ---- */
.cdn-statband {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
  margin-top: var(--s-5);
  padding: var(--s-5) var(--s-4);
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
}

.cdn-sb-item {
  text-align: center;
  min-width: 0;
}

.cdn-sb-item b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 700;
  direction: ltr;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cdn-sb-item span {
  display: block;
  margin-top: 3px;
  font-size: 0.78rem;
  color: var(--text-2);
}

@media (max-width: 640px) {
  .cdn-statband {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-4);
  }
}

/* ---- hero feature cards ---- */
.cdn-hcards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
  margin-top: var(--s-8);
}

.cdn-hcard {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--r-card);
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
  transition: border-color var(--d-base) var(--ease), transform var(--d-slow) var(--ease);
}

.cdn-hcard:hover {
  border-color: var(--border-hover);
  transform: translateY(-3px);
}

.cdn-hcard svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--cyan);
}

.cdn-hcard b {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
}

.cdn-hcard i {
  display: block;
  font-style: normal;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .cdn-plan:hover,
  .netmap-item:hover {
    transform: none;
  }
}

/* ---- stat pills above the map ---- */
.cdn-map-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-bottom: 28px;
}

.cdn-map-stat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
}

.cdn-map-stat svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--cyan);
}

.cdn-map-stat b {
  font-size: 1rem;
  font-weight: 700;
  color: var(--cream);
}

.cdn-map-stat span {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* ---- network status bar ---- */
/* ---- eyebrow with small neon bar (design brief) ---- */
/* ---- large zoomed map: the visual centerpiece, 70-75% of the section ---- */
.cdn-bigmap {
  position: relative;
  width: 100%;
  height: 560px;
  border-radius: 30px;
  overflow: hidden;
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--border);
  box-shadow: var(--glass-shadow);
}

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

/* fewer, fainter dots than the site's other maps — this one is meant to
   read as geography first, decoration second */
.cdn-bigmap-dots {
  opacity: 0.65;
}

.cdn-bigmap-link-primary {
  stroke-width: 2;
  opacity: 0.8;
  stroke-dasharray: none;
  filter: drop-shadow(0 0 3px rgba(0, 212, 255, 0.6));
}

.cdn-bigmap-link-secondary {
  stroke-width: 1.6;
  opacity: 0.6;
  stroke-dasharray: 3 4;
  filter: drop-shadow(0 0 2px rgba(0, 212, 255, 0.4));
}

.cdn-bigmap-link-tertiary {
  stroke-width: 1.2;
  opacity: 0.4;
  stroke-dasharray: 2 5;
}

/* ---- numbered map badges — replace the old floating info-cards.
   Fixed 28px circles never need the 90-180px of clear space a full
   card needed, so nearby real-world points (Frankfurt/Amsterdam,
   Tehran/Shiraz) can't make them collide the way the cards did. ---- */
.cdn-map-badge {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  z-index: 6;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(10, 18, 32, 0.9);
  border: 1.5px solid var(--brand-soft);
  box-shadow: 0 0 10px rgba(37, 99, 255, 0.5);
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  cursor: default;
}

.cdn-map-key {
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(10, 18, 32, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  font-size: 0.76rem;
  color: var(--text-muted);
}

.cdn-map-key span {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.cdn-map-key b {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(37, 99, 255, 0.18);
  color: var(--cream);
  font-size: 0.68rem;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .cdn-map-key {
    position: static;
    margin-top: 14px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ---- floating glass label tags, positioned by percentage over the map ---- */
.cdn-map-tag {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, calc(-100% - 14px));
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: var(--r-pill);
  background: rgba(10, 18, 32, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border-hover);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
  pointer-events: none;
}

/* flips the label to sit below-and-right of its marker instead of
   directly above — used when two markers are close enough that both
   labels defaulting to "above" would overlap (see cdn.ejs) */
.cdn-map-tag.is-below {
  transform: translate(4px, 14px);
}

/* Frankfurt and Amsterdam sit only ~15km apart in this map's zoomed
   crop — far too close for two full label cards to clear each other
   if both use the default above-center placement. Mirroring the
   existing above pattern downward (same horizontal centering, just
   the opposite vertical direction) separates them cleanly: one card's
   bottom edge sits 14px above its point, the other's top edge sits
   14px below its point — a real vertical gap regardless of how close
   the two points render, and with zero left/right-edge risk since
   both stay centered on their own point exactly like every other
   label on this map. */
.cdn-map-tag.tag-cluster-de {
  transform: translate(-50%, 14px);
}

/* per-node label placement for the 5-node map — plain CSS positioning,
   not SVG text-anchor, so a horizontal offset here is direction-safe */
.nm-pos-above {
  transform: translate(-50%, calc(-100% - 14px));
}

.nm-pos-below {
  transform: translate(-50%, 14px);
}

.nm-pos-right {
  transform: translate(14px, -50%);
}

.nm-pos-left {
  transform: translate(calc(-100% - 14px), -50%);
}

/* ---- region labels (EUROPE / IRAN) ---- */
.cdn-region-label {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  opacity: 0.6;
  pointer-events: none;
  white-space: nowrap;
}

/* ---- compact legend inside the map ---- */
.cdn-map-legend {
  position: absolute;
  left: 18px;
  bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: rgba(10, 18, 32, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  font-size: 0.72rem;
  color: var(--text-muted);
}

.cdn-map-legend span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cdn-legend-ring {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--cyan);
}

.cdn-legend-line {
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--cyan);
}

.cdn-legend-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.7);
}

/* ---- traveling particle on each route ---- */
.cdn-route-particle {
  filter: drop-shadow(0 0 3px rgba(127, 243, 255, 0.9));
}

@media (prefers-reduced-motion: reduce) {
  .cdn-route-particle {
    display: none;
  }
}

@media (max-width: 780px) {
  .cdn-region-label {
    display: none;
  }

  .cdn-map-legend {
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;
    gap: 10px;
    padding: 6px 10px;
    font-size: 0.66rem;
  }
}

@media (max-width: 340px) {
  .cdn-map-legend {
    bottom: 4px;
    gap: 7px;
    padding: 4px 8px;
    font-size: 0.6rem;
  }
}

.cdn-map-tag-flag {
  font-size: 1rem;
  line-height: 1;
}

.cdn-map-tag-badge {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--node-color, var(--cyan));
  color: var(--node-color, var(--cyan));
}

.cdn-map-tag-badge svg {
  width: 13px;
  height: 13px;
}

.cdn-map-tag b {
  display: block;
  font-size: 0.84rem;
  font-weight: 700;
}

.cdn-map-tag i {
  display: flex;
  align-items: center;
  gap: 4px;
  font-style: normal;
  font-size: 0.74rem;
  color: var(--text-muted);
  margin-top: 1px;
}

.cdn-map-tag i .status-dot {
  width: 5px;
  height: 5px;
}

/* The map itself scales fluidly with its container, but a label's text
   width does not shrink the same way — confirmed in testing that labels
   for points away from center (e.g. "تهران") could extend up to ~70px
   past the viewport edge on narrow phones. Compacting the label (smaller
   type, tighter padding, status line hidden) keeps every label safely
   inside the map at the widths where this happens. */
@media (max-width: 480px) {
  .cdn-map-tag {
    padding: 5px 8px;
    gap: 5px;
    font-size: 0.82rem;
  }

  .cdn-map-tag i {
    display: none;
  }
}

@media (max-width: 340px) {
  .cdn-map-tag {
    padding: 4px 6px;
    font-size: 0.72rem;
  }

  .cdn-map-tag-flag {
    font-size: 0.82rem;
  }
}

@media (max-width: 780px) {
  .cdn-bigmap {
    height: 380px;
  }
  .cdn-map-tag {
    padding: 5px 9px;
  }
  .cdn-map-tag b {
    font-size: 0.7rem;
  }
}

/* ---- grouped location cards, spaced generously ---- */
.cdn-loc-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-8);
  margin-top: var(--s-8);
}

.cdn-loc-group h3 {
  font-family: var(--font-display);
  font-size: var(--t-caption);
  font-weight: 700;
  margin: 0 0 var(--s-4);
  color: var(--text-muted);
}

.cdn-loc-cards {
  display: grid;
  gap: var(--s-4);
}

.cdn-loc-card {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-card);
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
  transition: border-color var(--d-base) var(--ease), transform var(--d-slow) var(--ease);
}

.cdn-loc-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-3px);
}

.cdn-loc-card .cc-flag {
  font-size: 1.3rem;
  line-height: 1;
}

.cdn-loc-card > div {
  flex: 1;
  min-width: 0;
}

.cdn-loc-card b {
  display: block;
  font-size: 0.86rem;
  font-weight: 700;
}

.cdn-loc-card span {
  display: block;
  margin-top: 2px;
  font-size: 0.74rem;
  color: var(--text-muted);
}

@media (max-width: 780px) {
  .cdn-loc-groups {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cdn-loc-card:hover {
    transform: none;
  }
}

.cdn-statusbar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  margin-top: var(--s-5);
  padding: var(--s-4);
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  font-size: 0.82rem;
}

.cdn-statusbar b {
  font-weight: 700;
}

.cdn-statusbar span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-muted);
}

@media (max-width: 1080px) {
  .cdn-hcards {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .cdn-hcards {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cdn-hcard:hover,
  .cdn-city:hover {
    transform: none;
  }
}

.cdn-globe-stage .globe3d {
  max-width: 460px;
}

/* ---- pricing plans ---- */
.cdn-plans {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
  align-items: stretch;
}

.cdn-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s-6);
  border-radius: var(--r-card);
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--border);
  transition: border-color var(--d-base) var(--ease), transform var(--d-slow) var(--ease);
}

.cdn-plan:hover {
  border-color: var(--border-hover);
  transform: translateY(-4px);
}

.cdn-plan.is-featured {
  border-color: rgba(37, 99, 255, 0.5);
  box-shadow: 0 0 40px rgba(37, 99, 255, 0.18);
}

.cdn-plan-badge {
  position: absolute;
  top: -12px;
  right: var(--s-5);
  padding: 4px var(--s-3);
  border-radius: var(--r-pill);
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  background: var(--grad-brand);
}

.cp-name {
  font-family: var(--font-display);
  font-size: var(--t-h5);
  font-weight: 700;
}

.cp-desc {
  margin: var(--s-2) 0 var(--s-5);
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--text-muted);
  min-height: 2.6em;
}

.cp-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding-bottom: var(--s-5);
  margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--border);
}

.cp-price b {
  font-family: var(--font-display);
  direction: ltr;
  font-size: 1.6rem;
  font-weight: 700;
}

.cp-price span {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.cp-rows {
  list-style: none;
  margin: 0 0 var(--s-6);
  padding: 0;
  display: grid;
  gap: 9px;
  flex: 1;
}

.cp-rows li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: 0.79rem;
}

.cp-rows li span {
  color: var(--text-muted);
}

.cp-rows li b {
  font-weight: 600;
  color: var(--text-2);
}

/* ---- comparison table ---- */
.cdn-compare-wrap {
  overflow-x: auto;
  border-radius: var(--r-card);
  border: 1px solid var(--border);
}

.cdn-compare {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.cdn-compare th,
.cdn-compare td {
  padding: var(--s-3) var(--s-4);
  text-align: center;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.cdn-compare th:first-child,
.cdn-compare td:first-child {
  text-align: start;
  white-space: normal;
  color: var(--text-2);
  font-weight: 500;
}

.cdn-compare thead th {
  font-family: var(--font-display);
  font-weight: 700;
  background: rgba(255, 255, 255, 0.03);
}

.cdn-compare thead th.is-featured {
  color: var(--brand-soft);
}

.cdn-compare tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.015);
}

.cdn-compare tbody tr:last-child td {
  border-bottom: none;
}

.cdn-compare .cc-yes,
.cdn-compare .cc-no {
  padding: var(--s-2);
}

.cdn-compare .cc-yes svg,
.cdn-compare .cc-no svg {
  width: 16px;
  height: 16px;
}

.cdn-compare .cc-yes svg {
  color: var(--success);
}

.cdn-compare .cc-no svg {
  color: var(--text-disabled);
  opacity: 0.5;
}

@media (max-width: 1080px) {
  .cdn-plans {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .cdn-plans {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cdn-plan:hover {
    transform: none;
  }
}

/* ---- request flow ---- */
.cdn-flow {
  list-style: none;
  counter-reset: cf;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-3);
}

.cdn-flow li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  border-radius: var(--r-card);
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
  transition: border-color var(--d-base) var(--ease), transform var(--d-slow) var(--ease);
}

.cdn-flow li:hover {
  border-color: var(--border-hover);
  transform: translateY(-4px);
}

/* connector between steps (RTL: points leftwards) */
.cdn-flow li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--s-3) * -1);
  width: var(--s-3);
  height: 1px;
  background: linear-gradient(90deg, var(--brand), transparent);
}

.cf-n {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--cyan);
  background: rgba(0, 212, 255, 0.12);
  border: 1px solid rgba(0, 212, 255, 0.28);
}

.cf-t b {
  display: block;
  font-size: var(--t-caption);
  font-weight: 600;
  margin-bottom: 4px;
}

.cf-t span {
  display: block;
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--text-muted);
}

@media (max-width: 980px) {
  .cdn-flow {
    grid-template-columns: 1fr 1fr;
  }
  .cdn-flow li::after {
    display: none;
  }
}

@media (max-width: 560px) {
  .cdn-flow {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cdn-flow li:hover {
    transform: none;
  }
}

/* ============================================================
   Footer
   ============================================================ */

.site-footer {
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  color: var(--cream-dim);
  padding: 72px 0 28px;
}

/* ============================================================
   Footer v3 — minimal, quiet, corporate (Ultimate Footer brief)
   No glassmorphism, no stats, no dashboards. Thin borders only.
   ============================================================ */
.site-footer-v3 {
  position: relative;
  padding: var(--s-16) 0 var(--s-8);
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  overflow: hidden;
}

/* very subtle animated gradient, per spec — not an aurora, just a slow drift */
.site-footer-v3::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 70% at 15% 0%, rgba(37, 99, 255, 0.05) 0%, transparent 60%);
  animation: f3Drift 30s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes f3Drift {
  from { opacity: 0.6; }
  to   { opacity: 1; }
}

.f3-top {
  position: relative;
  display: grid;
  grid-template-columns: 0.85fr 2fr;
  gap: var(--s-16);
  padding-bottom: var(--s-10);
}

.f3-brand p {
  margin: var(--s-4) 0 var(--s-6);
  font-size: 0.86rem;
  line-height: 1.9;
  color: var(--text-muted);
  max-width: 30ch;
}

.namad-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 10px var(--s-4);
  border-radius: var(--r-button);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-2);
  text-decoration: none;
  background: transparent;
  border: 1px solid var(--border);
  transition: color var(--d-base) var(--ease),
    border-color var(--d-base) var(--ease),
    box-shadow var(--d-base) var(--ease);
}

.namad-btn svg {
  width: 15px;
  height: 15px;
  transition: transform var(--d-base) var(--ease);
}

.namad-btn:hover {
  color: #fff;
  border-color: var(--border-hover);
  box-shadow: 0 0 20px rgba(37, 99, 255, 0.22);
}

.namad-btn:hover svg {
  transform: translateX(-3px);
}

.f3-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-10);
}

.f3-nav h5 {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 600;
  margin: 0 0 var(--s-4);
  padding-bottom: var(--s-2);
  position: relative;
  display: inline-block;
}

.f3-nav h5::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 26px;
  height: 2px;
  background: var(--brand);
}

.f3-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.f3-list a {
  position: relative;
  display: inline-block;
  padding: 6px 0;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.86rem;
  transition: color var(--d-base) var(--ease);
}

.f3-list a::after {
  content: "";
  position: absolute;
  bottom: 3px;
  right: 0;
  width: 0;
  height: 1px;
  background: var(--brand);
  transition: width var(--d-base) var(--ease);
}

.f3-list a:hover {
  color: var(--text);
}

.f3-list a:hover::after {
  width: 100%;
}

/* ---- contact bar ---- */
.f3-contact {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-8);
  padding: var(--s-6) 0;
  border-top: 1px solid var(--border);
}

.f3c-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.f3c-ic {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.f3c-ic svg {
  width: 16px;
  height: 16px;
}

.f3c-item > div {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.f3c-item span:first-child {
  font-size: 0.72rem;
  color: var(--text-disabled);
}

.f3c-item a,
.f3c-item b {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-2);
  text-decoration: none;
}

.f3c-item a:hover {
  color: var(--brand-soft);
}

.f3c-addr {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-2);
  line-height: 1.6;
  max-width: 24ch;
}

.f3-social {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-inline-start: auto;
  padding-inline-start: var(--s-8);
  border-inline-start: 1px solid var(--border);
}

.f3-social-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.f3-social-icons {
  display: flex;
  gap: var(--s-2);
}

.f3soc {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--text-muted);
  border: 1px solid var(--border);
  transition: color var(--d-fast) var(--ease),
    border-color var(--d-fast) var(--ease),
    transform var(--d-fast) var(--ease),
    box-shadow var(--d-fast) var(--ease);
}

.f3soc svg {
  width: 15px;
  height: 15px;
}

.f3soc:hover {
  color: var(--cyan);
  border-color: var(--border-hover);
  transform: scale(1.08);
  box-shadow: 0 0 14px rgba(0, 212, 255, 0.28);
}

.f3soc-wa:hover {
  color: #25d366;
  border-color: rgba(37, 211, 102, 0.4);
  box-shadow: 0 0 14px rgba(37, 211, 102, 0.28);
}

/* ---- bottom bar ---- */
.f3-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-4);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
  font-size: 0.78rem;
  color: var(--text-disabled);
}

.f3-bottom-links {
  display: flex;
  gap: var(--s-5);
}

.f3-bottom-links a {
  color: var(--text-muted);
  text-decoration: none;
}

.f3-bottom-links a:hover {
  color: var(--text-2);
}

@media (max-width: 980px) {
  .f3-top {
    grid-template-columns: 1fr;
    gap: var(--s-8);
  }
  .f3-nav {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-6);
  }
  .f3-social {
    margin-inline-start: 0;
    padding-inline-start: 0;
    border-inline-start: none;
    width: 100%;
    padding-top: var(--s-4);
    border-top: 1px solid var(--border);
  }
}

@media (max-width: 640px) {
  .f3-nav {
    grid-template-columns: 1fr;
    gap: var(--s-2);
  }
  .f3-nav > div {
    border-bottom: 1px solid var(--border);
    padding-bottom: var(--s-4);
  }
  .f3-contact {
    flex-direction: column;
    align-items: flex-start;
  }
  .f3-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer-v3::before {
    animation: none;
  }
}

/* ============================================================
   /namad page
   ============================================================ */
.namad-hero {
  min-height: auto;
  padding: 150px 0 var(--s-10);
}

.namad-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-5);
  margin-bottom: var(--s-10);
}

.namad-card {
  padding: var(--s-8);
  text-align: center;
  border-radius: var(--r-card);
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
  transition: border-color var(--d-base) var(--ease), transform var(--d-slow) var(--ease);
}

.namad-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-4px);
}

.namad-badge-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: var(--s-5);
}

.namad-badge-wrap img {
  border-radius: 12px;
  background: #fff;
  padding: var(--s-2);
}

.namad-card b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-caption);
  font-weight: 700;
  margin-bottom: var(--s-2);
}

.namad-card p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.8;
  color: var(--text-muted);
}

.namad-reg {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--s-6);
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
}

.namad-reg > b {
  display: block;
  font-size: var(--t-caption);
  font-weight: 700;
  margin-bottom: var(--s-4);
}

.namad-reg dl {
  display: grid;
  gap: var(--s-3);
  margin: 0;
}

.namad-reg dl > div {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--border);
  font-size: 0.86rem;
}

.namad-reg dl > div:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.namad-reg dt {
  color: var(--text-muted);
}

.namad-reg dd {
  margin: 0;
  font-weight: 600;
  color: var(--text-2);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
  /* Was `.hero-art`, a class that doesn't exist anywhere in the actual
     markup (the real element is `.hero-stage`) — so this size cap never
     applied on mobile. The illustration rendered at full size and, being
     ordered above the text, pushed the title 501px below the header on a
     390px-wide screen (measured in-browser: a .stage-reflection child
     alone extended to 880px).

     `width: 100%` is required alongside max-width. Every child of
     .hero-stage is `position: absolute` (the illustration layers), so
     with only `margin: 0 auto` and no explicit width, the browser's
     shrink-to-fit sizing had no in-flow content to measure and collapsed
     the box to 0 width (verified in-browser) — which pushed the
     illustration's absolutely-positioned children outside any box,
     making the gap worse, not better. */
  .hero-stage {
    order: -1;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    /* Was 380px (also duplicated in a second, separate mobile rule
       elsewhere in this file — consolidated here). On a 390px-wide
       phone, 380px of illustration stacked above the title, plus the
       section's own padding, pushed the title 501px below the header —
       measured in-browser. 240px keeps the illustration recognisable
       while leaving the title visible without scrolling on most phones. */
    min-height: 240px;
    /* The illustration's decorative layers (reflection, floating stat
       badges) are positioned with percentages/offsets tuned for the
       desktop-sized stage and were never adjusted for a mobile box —
       measured overflow: reflection 339px, rack 132px, globe 35px past
       the stage's own bottom edge. Clipping here contains that overflow
       without needing to re-tune every individual coordinate. */
    overflow: hidden;
  }
  /* Pure decoration (a flipped, blurred echo of the illustration) with
     zero information value — hidden outright on mobile rather than
     clipped, since a partially-visible reflection reads as a rendering
     glitch rather than an intentional effect. */
  .stage-reflection {
    display: none;
  }
  .pillars,
  .dc-grid {
    grid-template-columns: 1fr;
  }
  .plan-grid,
  .plan-grid.cols-3,
  .plan-grid.cols-5 {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .crest-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .main-nav {
    display: none;
  }
  .nav-toggle-btn {
    display: flex;
  }
  .hide-mobile {
    display: none;
  }
  section {
    padding: 64px 0;
  }
  .plan-grid,
  .plan-grid.cols-3,
  .plan-grid.cols-5 {
    grid-template-columns: 1fr;
  }
  .cta-band {
    padding: 40px 26px;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
}