/* =========================================================
   Astra — enterprise, editorial, careful typography.
   ========================================================= */

:root {
  --bg:       #000000;
  --bg-2:     #050506;
  --bg-3:     #0a0a0c;
  --panel:    #0a0a0c;

  --ink:       #ecedef;
  --ink-2:     #c9cacd;
  --ink-dim:   #979aa1;
  --ink-muted: #6a6d75;
  --ink-faint: #3a3c42;

  --line:        rgba(255, 255, 255, 0.06);
  --line-2:      rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.16);

  /* product brand colors */
  --orbit:       #9fbbe0;
  --orbit-dim:   #6d84a5;
  --orbit-soft:  rgba(159,187,224,0.10);
  --davinci:     #e6c88a;
  --davinci-dim: #b9a06a;
  --davinci-soft: rgba(230,200,138,0.10);

  --amber: #d4a96a;
  --green: #7fd49e;
  --rose:  #d47a6a;

  /* Pretendard for Korean, Inter for Latin — both sans, unified weights */
  --sans:  "Inter", "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --serif: "Fraunces", "Times New Roman", Georgia, serif;
  --mono:  "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;

  --max: 1200px;
  --pad: clamp(20px, 3.5vw, 40px);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --nav-h: 64px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-y: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}
html { scroll-behavior: auto; }
html.astra-boot-lock,
html.astra-boot-lock body {
  overflow: hidden !important;
  overscroll-behavior: none;
}
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
  font-feature-settings: 'kern' 1, 'liga' 1;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  word-break: keep-all;       /* prevents awkward Korean word breaks */
  overflow-wrap: break-word;
}
a { color: inherit; text-decoration: none; }
a:visited { color: inherit; }
b { font-weight: 600; color: var(--ink); }

/* Emphasis is weight + color for Korean (italic on CJK is ugly). */
em {
  font-family: inherit;
  font-style: normal;
  font-weight: 500;
  color: var(--ink);
}
/* Italic serif ONLY for explicit Latin emphasis via <em lang="en"> or <i>. */
em:lang(en), i {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* Highlight — a clean brand-colored emphasis that works for Korean */
.hl {
  color: var(--ink);
  font-weight: 500;
}
.hl--orbit   { color: var(--orbit); font-weight: 500; }
.hl--davinci { color: var(--davinci); font-weight: 500; }

.mono { font-family: var(--mono); letter-spacing: 0; }
code {
  font-family: var(--mono);
  font-size: 0.88em;
  padding: 1px 6px;
  background: rgba(255,255,255,0.05);
  border-radius: 3px;
  color: var(--ink);
}

/* =========================================================
   NAV + MEGA MENU
   ========================================================= */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  transition: background .35s var(--ease), backdrop-filter .35s var(--ease), border-color .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: saturate(140%) blur(16px);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
.nav.is-open,
.nav:hover {
  background: rgba(0, 0, 0, 0.84);
  backdrop-filter: saturate(145%) blur(18px);
  -webkit-backdrop-filter: saturate(145%) blur(18px);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.nav__row {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  height: var(--nav-h);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
}
.nav__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  height: var(--nav-h);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: rgba(255,255,255,0.95);
  -webkit-text-fill-color: rgba(255,255,255,0.95);
}
.nav__brand-text {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.014em;
  color: rgba(255,255,255,0.95);
  -webkit-text-fill-color: rgba(255,255,255,0.95);
  transition: color .18s var(--ease);
  line-height: 1;
  font-feature-settings: "ss01", "kern";
}
.nav a:any-link,
.nav a:-webkit-any-link {
  -webkit-text-fill-color: currentColor;
}
.nav__brand:hover .nav__brand-text {
  color: rgba(255,255,255,0.65);
  -webkit-text-fill-color: rgba(255,255,255,0.65);
}
.nav__brand:visited .nav__brand-text,
.nav__brand:active .nav__brand-text,
.nav__brand:any-link .nav__brand-text,
.nav__brand:-webkit-any-link .nav__brand-text {
  color: rgba(255,255,255,0.95) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.95) !important;
}
.nav__mark { width: 18px; height: 18px; color: var(--ink); }
.nav__brand--product {
  gap: 12px;
  font-size: 17px;
  letter-spacing: 0;
}
.product-mark {
  position: relative;
  width: 22px;
  height: 22px;
  display: inline-block;
  flex: 0 0 auto;
}
.product-mark--orbit {
  border: 1px solid rgba(220, 232, 255, 0.68);
  border-radius: 3px;
  transform: rotate(-16deg) skewX(-8deg);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.10),
    0 0 22px rgba(159,187,224,0.16);
}
.product-mark--orbit::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 2px;
  width: 1px;
  height: 18px;
  background: linear-gradient(180deg, rgba(220,232,255,0.88), rgba(159,187,224,0.18));
  transform: rotate(14deg);
}
.product-mark--orbit::after {
  content: "";
  position: absolute;
  right: 3px;
  top: 5px;
  width: 9px;
  height: 11px;
  border: 1px solid rgba(220,232,255,0.5);
  border-radius: 2px;
  background: rgba(159,187,224,0.12);
  box-shadow: 0 0 14px rgba(159,187,224,0.22);
}
.product-mark--davinci {
  border-left: 1px solid rgba(230,200,138,0.92);
  border-right: 1px solid rgba(230,200,138,0.42);
  transform: rotate(18deg);
}
.product-mark--davinci::before,
.product-mark--davinci::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, rgba(255,244,211,0.95), rgba(230,200,138,0.16));
  transform: translateX(-50%);
}
.product-mark--davinci::before { top: 0; height: 15px; }
.product-mark--davinci::after {
  bottom: 0;
  height: 7px;
  transform: translateX(-50%) rotate(34deg);
  transform-origin: top;
}
.nav__menu-wrap {
  justify-self: center;
  align-self: stretch;
  display: flex;
  align-items: stretch;
}
.nav__links {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 26px;
}
.nav__links a {
  color: var(--ink-dim);
  font-size: 14px;
  transition: color .18s var(--ease);
}
.nav__links a:visited,
.nav__brand:visited,
.nav__link:visited,
.nav__trigger--link:visited {
  color: var(--ink-dim) !important;
  -webkit-text-fill-color: currentColor !important;
}
.nav__links a:hover,
.nav__links a[aria-current="page"] {
  color: var(--ink);
}
.nav__root {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0;
  align-items: stretch;
  height: 100%;
}
.nav__root--product { gap: 2px; }
.nav__item {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: var(--nav-h);
}
.nav__trigger {
  font-family: inherit;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.62);
  font-size: 13.5px;
  font-weight: 460;
  padding: 0 14px;
  cursor: pointer;
  transition: color .2s var(--ease);
  border-radius: 0;
  letter-spacing: -0.005em;
  position: relative;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 100%;
  min-height: var(--nav-h);
}
.nav__trigger--link {
  text-decoration: none;
  color: rgba(255,255,255,0.62);
  -webkit-text-fill-color: rgba(255,255,255,0.62);
}
.nav__trigger--link:visited,
.nav__trigger--link:active,
.nav__trigger--link:any-link,
.nav__trigger--link:-webkit-any-link {
  color: rgba(255,255,255,0.62) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.62) !important;
}
.nav__trigger:hover {
  color: rgba(255, 255, 255, 1);
  -webkit-text-fill-color: rgba(255, 255, 255, 1);
}
.nav__item[data-menu]:hover .nav__trigger,
.nav__item[data-menu]:focus-within .nav__trigger {
  color: rgba(255, 255, 255, 1);
  -webkit-text-fill-color: rgba(255, 255, 255, 1);
}
.nav__item.is-active .nav__trigger {
  color: rgba(255, 255, 255, 1);
  -webkit-text-fill-color: rgba(255, 255, 255, 1);
}
/* Active state — underline accent removed per user request */

.nav__actions { display: flex; align-items: center; gap: 24px; }
.nav__actions--product { gap: 14px; }
.nav__link {
  font-size: 14px;
  font-weight: 460;
  color: rgba(210, 220, 236, 0.74);
  -webkit-text-fill-color: rgba(210, 220, 236, 0.74);
  transition: color .22s var(--ease);
  letter-spacing: -0.008em;
}
.nav__link:visited,
.nav__link:active,
.nav__link:any-link,
.nav__link:-webkit-any-link {
  color: rgba(210, 220, 236, 0.74) !important;
  -webkit-text-fill-color: rgba(210, 220, 236, 0.74) !important;
}
.nav__link:hover {
  color: rgba(255, 255, 255, 1) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 1) !important;
}
.nav__link--mobile-guide { display: none; }
.nav__cta {
  font-size: 13px;
  color: #000000;
  -webkit-text-fill-color: #000000;
  background: rgba(248, 250, 253, 0.96);
  padding: 9px 18px;
  border-radius: 999px;
  font-weight: 500;
  transition: background .25s var(--ease), transform .25s var(--ease);
  letter-spacing: -0.005em;
}
.nav__cta:visited,
.nav__cta:active,
.nav__cta:any-link,
.nav__cta:-webkit-any-link {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}
.nav__cta:hover {
  background: #ffffff;
  transform: translateY(-1px);
}

/* =========================================================
   MEGA MENU — console minimal aesthetic
   pure black · hairline borders · lucide-style icons
   compact text · subtle bg hover (no glow/gradients)
   ========================================================= */
.mega {
  position: absolute;
  left: 0; right: 0;
  top: var(--nav-h);
  background: rgba(0, 0, 0, 0.985);
  backdrop-filter: saturate(155%) blur(44px);
  -webkit-backdrop-filter: saturate(155%) blur(44px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 28px 70px rgba(0,0,0,0.56), inset 0 1px 0 rgba(255,255,255,0.04);
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  transition: max-height .32s var(--ease), opacity .22s var(--ease);
}
.mega::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.92), rgba(0,0,0,0.985)),
    rgba(0,0,0,0.92);
  backdrop-filter: saturate(150%) blur(44px);
  -webkit-backdrop-filter: saturate(150%) blur(44px);
}
.mega.is-open,
.nav.is-open .mega {
  max-height: calc(100vh - var(--nav-h));
  opacity: 1;
  pointer-events: auto;
  overflow-y: auto;
}
.nav.is-open .mega__panel.is-active {
  display: block;
}
.nav:has(.nav__item[data-menu]:hover),
.nav:has(.nav__item[data-menu]:focus-within),
.nav:has(.mega:hover) {
  background: rgba(0, 0, 0, 0.84);
  backdrop-filter: saturate(145%) blur(18px);
  -webkit-backdrop-filter: saturate(145%) blur(18px);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.nav:has(.nav__item[data-menu]:hover) .mega,
.nav:has(.nav__item[data-menu]:focus-within) .mega,
.nav:has(.mega:hover) .mega {
  max-height: calc(100vh - var(--nav-h));
  opacity: 1;
  pointer-events: auto;
  overflow-y: auto;
}
.nav:has(.nav__item[data-menu="products"]:hover) .mega__panel[data-panel="products"],
.nav:has(.nav__item[data-menu="products"]:focus-within) .mega__panel[data-panel="products"],
.nav:has(.nav__item[data-menu="solutions"]:hover) .mega__panel[data-panel="solutions"],
.nav:has(.nav__item[data-menu="solutions"]:focus-within) .mega__panel[data-panel="solutions"],
.nav:has(.nav__item[data-menu="resources"]:hover) .mega__panel[data-panel="resources"],
.nav:has(.nav__item[data-menu="resources"]:focus-within) .mega__panel[data-panel="resources"],
.nav:has(.nav__item[data-menu="guide"]:hover) .mega__panel[data-panel="guide"],
.nav:has(.nav__item[data-menu="guide"]:focus-within) .mega__panel[data-panel="guide"] {
  display: block;
}
.mega__panel {
  position: relative;
  z-index: 1;
  display: none;
  padding: 8px var(--pad) 24px;
}
.mega__panel.is-active { display: block; }

/* ── Entity layout — luminous polygon + editorial typography ──
   Matches entity-management visual system. Amber #c9a84c for field-class. */
.mega__inner--entities {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  max-width: var(--max);
  margin: 0 auto;
}
.mega__entity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 32px 32px 28px;
  text-decoration: none;
  transition: background .22s var(--ease);
  position: relative;
}
.mega__entity:hover {
  background: rgba(255,255,255,0.012);
}
.mega__entity-viz {
  width: 100%;
  max-width: 240px;
  margin: 0 auto 22px;
  align-self: center;
  display: block;
}
.mega__entity-canvas {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  background: transparent !important;
  opacity: 0.96;
  transition: opacity .3s var(--ease), transform .35s var(--ease);
  /* Override davinci-vector-webgl defaults */
  max-width: none !important;
  min-height: 0 !important;
}
.mega__entity:hover .mega__entity-canvas {
  opacity: 1;
  transform: scale(1.02);
}
.mega__col-canvas {
  display: block !important;
  width: 100% !important;
  height: 110px !important;
  background: transparent !important;
  border-radius: 6px;
  margin: 0 0 12px;
  max-width: none !important;
  min-height: 0 !important;
}
.mega__entity-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  width: 100%;
}
.mega__entity-title-row {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.mega__entity-name {
  font-size: 24px;
  font-weight: 500;
  color: rgba(255,255,255,0.96);
  letter-spacing: -0.020em;
  margin: 0 0 6px;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
}
.mega__entity-name em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 0.65em;
  margin-left: 1px;
  color: rgba(224, 40, 40, 0.92);
}
.mega__entity-tag {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.36);
  margin: 0 0 14px;
}
.mega__entity-badge {
  font-size: 11px;
  font-weight: 500;
  border-radius: 4px;
  padding: 3px 7px 4px;
  letter-spacing: -0.005em;
  line-height: 1;
  border: 1px solid;
}
/* field-class — amber #c9a84c (Orbit) */
.mega__entity--field .mega__entity-badge {
  color: rgba(201, 168, 76, 0.95);
  background: rgba(201, 168, 76, 0.10);
  border-color: rgba(201, 168, 76, 0.22);
}
/* evidence-class — rose #d98b74 (Davinci) */
.mega__entity--evidence .mega__entity-badge {
  color: rgba(217, 139, 116, 0.95);
  background: rgba(217, 139, 116, 0.10);
  border-color: rgba(217, 139, 116, 0.22);
}
/* artifact-class — violet #a78bfa (Arte') */
.mega__entity--artifact .mega__entity-badge {
  color: rgba(167, 139, 250, 0.95);
  background: rgba(167, 139, 250, 0.10);
  border-color: rgba(167, 139, 250, 0.22);
}
/* Hover background tint per class */
.mega__entity--field:hover    { background: rgba(201, 168, 76, 0.018); }
.mega__entity--evidence:hover { background: rgba(217, 139, 116, 0.018); }
.mega__entity--artifact:hover { background: rgba(167, 139, 250, 0.022); }
/* Override the generic hover */
.mega__entity:hover { background: transparent; }
.mega__entity-en {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  color: rgba(255,255,255,0.28);
  letter-spacing: 0;
}
.mega__entity-desc {
  font-size: 13px;
  font-weight: 400;
  color: rgba(255,255,255,0.52);
  line-height: 1.65;
  margin: 0;
  letter-spacing: -0.003em;
}

/* ── 3-card layout (Products / Resources) ── */
.mega__inner--cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  max-width: var(--max);
  margin: 0 auto;
  background: transparent;
  border: none;
  overflow: visible;
}
.mega__card {
  display: flex;
  flex-direction: column;
  padding: 28px 28px 26px;
  background: transparent;
  text-decoration: none;
  transition: background .18s var(--ease);
  min-height: 220px;
  position: relative;
}
.mega__card:hover {
  background: rgba(255,255,255,0.018);
}
.mega__card-row {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 4px;
}
.mega__card-icon {
  width: 18px;
  height: 18px;
  color: rgba(255,255,255,0.72);
  flex: 0 0 18px;
  transition: color .2s var(--ease);
}
.mega__card:hover .mega__card-icon {
  color: rgba(255,255,255,0.95);
}
.mega__card-name {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255,255,255,0.95);
  letter-spacing: -0.012em;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
}
.mega__card-name em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 0.65em;
  margin-left: 1px;
  color: rgba(232,218,188,0.85);
}
.mega__card-tag {
  font-size: 12.5px;
  font-weight: 400;
  color: rgba(255,255,255,0.50);
  margin: 0 0 14px;
  letter-spacing: -0.005em;
  padding-left: 29px;
}
.mega__card-body {
  font-size: 13px;
  color: rgba(255,255,255,0.62);
  line-height: 1.62;
  margin: 0 0 24px;
  letter-spacing: -0.003em;
  padding-left: 29px;
  max-width: 32ch;
}
.mega__card-cta {
  margin-top: auto;
  padding-left: 29px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 460;
  color: rgba(255,255,255,0.55);
  letter-spacing: -0.005em;
  transition: color .2s var(--ease), gap .25s var(--ease);
}
.mega__card-cta svg {
  width: 13px;
  height: 13px;
  opacity: 0.85;
}
.mega__card:hover .mega__card-cta {
  color: rgba(255,255,255,0.95);
  gap: 10px;
}

/* ── Column layout (Solutions) ── */
.mega__inner--cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  max-width: var(--max);
  margin: 0 auto;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
}
.mega__col-block {
  background: transparent;
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
}
.mega__col-canvas {
  display: block;
  width: 100%;
  height: 110px;
  margin: 0 0 12px;
  border-radius: 6px;
}
.mega__col-head {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 10px 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mega__col-icon {
  width: 16px;
  height: 16px;
  color: rgba(255,255,255,0.62);
  flex: 0 0 16px;
}
.mega__col-name {
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255,255,255,0.80);
  letter-spacing: -0.008em;
}

/* Resource card — vertical card with 3D canvas on top */
.mega__card--resource {
  padding: 22px 24px 24px;
  min-height: 240px;
}
.mega__card-canvas {
  display: block;
  width: 100%;
  height: 110px;
  margin: 0 0 16px;
  border-radius: 6px;
}
.mega__card--resource .mega__card-name {
  font-size: 17px;
  margin: 0 0 6px;
  padding-left: 0;
}
.mega__card--resource .mega__card-tag,
.mega__card--resource .mega__card-body,
.mega__card--resource .mega__card-cta {
  padding-left: 0;
}
.mega__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 10px;
  border-radius: 6px;
  text-decoration: none;
  transition: background .18s var(--ease);
}
.mega__row:hover {
  background: rgba(255,255,255,0.03);
}
.mega__row-title {
  font-size: 13px;
  font-weight: 460;
  color: rgba(255,255,255,0.86);
  letter-spacing: -0.005em;
  line-height: 1.3;
  transition: color .2s var(--ease);
}
.mega__row:hover .mega__row-title {
  color: rgba(255,255,255,1);
}
.mega__row-sub {
  font-size: 11px;
  font-weight: 400;
  color: rgba(255,255,255,0.36);
  letter-spacing: -0.002em;
  line-height: 1.4;
}

/* Chevron — slim arrow, no rotation glow */
.nav__chev {
  width: 8px;
  height: 5px;
  opacity: 0.4;
  transition: transform .22s var(--ease), opacity .22s var(--ease);
  flex: 0 0 auto;
  margin-top: 1px;
}
.nav__trigger:hover .nav__chev { opacity: 0.75; }
.nav__item.is-active .nav__chev {
  transform: rotate(180deg);
  opacity: 0.92;
}

/* =========================================================
   FIXED CANVAS + SCROLL STAGE
   ========================================================= */
.astra-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: block;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
  transition: opacity 420ms var(--ease);
}
/* Hero (Panel 1) dome — its own canvas/context layered over the bundle canvas,
   faded out by hero-dome.js as the viewer scrolls into the Orbit panel. */
.astra-hero-dome {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: block;
  z-index: 1;
  pointer-events: none;
  opacity: 1;
}

.astra-reference-daisy {
  position: fixed;
  top: clamp(72px, 8vh, 98px);
  right: clamp(28px, 8vw, 160px);
  width: min(56vw, 86vh, 1120px);
  height: auto;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  transform: translate3d(0, 0, 0);
  filter: brightness(1.36) contrast(1.10) drop-shadow(0 0 14px rgba(215, 228, 255, 0.30)) drop-shadow(0 0 64px rgba(160, 185, 230, 0.20));
  transition: opacity 80ms linear;
}

.astra-candidate-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: #000;
  opacity: 0;
  transition: opacity 420ms var(--ease);
}

.astra-candidate-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  pointer-events: none;
  background: #000;
  opacity: 0;
  transition: opacity var(--candidate-frame-fade, 1800ms) linear;
}

body[data-candidate-overlay="1"] .astra-candidate-layer {
  opacity: 1;
}

body[data-candidate-overlay="1"] .astra-canvas,
body[data-candidate-overlay="1"] .astra-reference-daisy {
  opacity: 0 !important;
}

body[data-candidate-transition="2-3"] .astra-canvas,
body[data-candidate-transition="3-4"] .astra-canvas {
  opacity: 1 !important;
}

body[data-candidate-transition="2-3"] .astra-candidate-layer,
body[data-candidate-transition="3-4"] .astra-candidate-layer,
body[data-candidate-transition="2-3"] .astra-candidate-frame,
body[data-candidate-transition="3-4"] .astra-candidate-frame {
  opacity: 0 !important;
}

body[data-candidate-panel="3"] .astra-candidate-frame--quill {
  opacity: 1;
}

body[data-candidate-panel="4"] .astra-candidate-frame--daisy {
  opacity: 1;
}

body[data-candidate-transition="3-4"] .astra-candidate-frame--daisy {
  opacity: 1;
}

@media (max-width: 640px) {
  .astra-reference-daisy {
    top: clamp(116px, 18vh, 150px);
    left: 50%;
    right: auto;
    width: min(92vw, 68vh, 560px);
    transform: translateX(-50%);
  }
}

.scroll-stage {
  position: relative;
  z-index: 1;
}

.scroll-panel {
  position: relative;
  height: 100vh;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.scroll-panel__wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  display: none;
}
.scroll-panel__wash--left {
  background:
    radial-gradient(ellipse 60% 92% at 17% 52%, rgba(0,0,0,0.98) 0%, rgba(0,0,0,0.80) 42%, rgba(0,0,0,0.36) 60%, transparent 78%),
    linear-gradient(90deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.42) 42%, rgba(0,0,0,0.10) 58%, transparent 72%);
}
.scroll-panel__wash--right {
  background:
    radial-gradient(ellipse 60% 92% at 83% 52%, rgba(0,0,0,0.98) 0%, rgba(0,0,0,0.80) 42%, rgba(0,0,0,0.36) 60%, transparent 78%),
    linear-gradient(90deg, transparent 28%, rgba(0,0,0,0.10) 42%, rgba(0,0,0,0.42) 58%, rgba(0,0,0,0.82) 100%);
}
.scroll-panel__wash--center {
  background:
    radial-gradient(ellipse 60% 65% at 50% 50%, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.45) 38%, rgba(0,0,0,0.12) 65%, transparent 80%);
}

/* ── Panel 3D scene canvases (armillary / DAG / convergence funnel) ── */
.scroll-panel__scene {
  position: absolute;
  top: 0;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.scroll-panel__scene canvas {
  width: 100%;
  height: 100%;
  display: block;
}
/* Soft glow halo behind the scene to give the 3D structure more presence */
.scroll-panel__scene::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}
.scroll-panel__scene--right {
  right: 0;
  width: 72%;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.5) 10%, #000 22%, #000 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.5) 10%, #000 22%, #000 100%);
}
.scroll-panel__scene--right::before {
  background: radial-gradient(ellipse 60% 70% at 70% 50%,
    rgba(120, 168, 220, 0.10) 0%,
    rgba(96, 140, 200, 0.06) 30%,
    rgba(0, 0, 0, 0) 70%);
}
.scroll-panel__scene--left {
  left: 0;
  width: 72%;
  mask-image: linear-gradient(270deg, transparent 0%, rgba(0,0,0,0.5) 10%, #000 22%, #000 100%);
  -webkit-mask-image: linear-gradient(270deg, transparent 0%, rgba(0,0,0,0.5) 10%, #000 22%, #000 100%);
}
.scroll-panel__scene--left::before {
  background: radial-gradient(ellipse 60% 70% at 30% 50%,
    rgba(230, 200, 138, 0.10) 0%,
    rgba(200, 168, 110, 0.06) 30%,
    rgba(0, 0, 0, 0) 70%);
}
.scroll-panel__scene--center {
  left: 0;
  right: 0;
  width: 100%;
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 78%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 78%, transparent 100%);
}
.scroll-panel__scene--center::before {
  background: radial-gradient(circle at 50% 50%,
    rgba(150, 180, 220, 0.10) 0%,
    rgba(96, 130, 180, 0.05) 30%,
    rgba(0, 0, 0, 0) 70%);
}
.scroll-panel__inner { z-index: 3; }

.scroll-panel__inner {
  position: relative;
  z-index: 3;
  isolation: isolate;
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
  padding: 0 var(--pad);
}
.scroll-panel__inner--left::before,
.scroll-panel__inner--right::before,
.scroll-panel__inner--center::before {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}
.scroll-panel__inner--left::before {
  left: calc(var(--pad) * -0.75);
  top: 50%;
  width: min(700px, 64vw);
  height: min(760px, 92vh);
  transform: translateY(-50%);
  background: radial-gradient(ellipse 62% 50% at 32% 52%, rgba(0,0,0,0.98) 0%, rgba(0,0,0,0.82) 42%, rgba(0,0,0,0.36) 66%, transparent 82%);
}
.scroll-panel__inner--right::before {
  right: calc(var(--pad) * -0.75);
  top: 50%;
  width: min(700px, 64vw);
  height: min(760px, 92vh);
  transform: translateY(-50%);
  background: radial-gradient(ellipse 62% 50% at 68% 52%, rgba(0,0,0,0.98) 0%, rgba(0,0,0,0.82) 42%, rgba(0,0,0,0.36) 66%, transparent 82%);
}
.scroll-panel__inner--center::before {
  left: 50%;
  top: 50%;
  width: min(880px, 84vw);
  height: min(640px, 82vh);
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse 60% 58% at 50% 50%, rgba(0,0,0,0.58) 0%, rgba(0,0,0,0.34) 48%, rgba(0,0,0,0.12) 70%, transparent 86%);
}
.scroll-panel__inner--left {
  max-width: var(--max);
  padding-right: min(46vw, 660px);
}
.scroll-panel__inner--right {
  max-width: var(--max);
  padding-left: min(46vw, 660px);
}
.scroll-panel__inner--center {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding-left: var(--pad);
  padding-right: var(--pad);
}
/* Panel 4 (Convergence) — copy sits a little above center-left,
   keeping the daisy constellation visible without crowding the headline. */
.scroll-panel--convergence .scroll-panel__inner {
  padding-right: min(46vw, 660px);
  padding-left: clamp(56px, 6vw, 96px);
  padding-top: 0;
  transform: translateY(-10vh);
}
.scroll-panel--convergence .scroll-panel__h2 {
  /* "Connecting the dots." is the panel's main statement — promote it from the
     small 24px eyebrow size to a full headline like the other panels. */
  font-size: clamp(36px, 4.0vw, 48px);
  font-weight: 440;
  line-height: 1.12;
  letter-spacing: -0.022em;
  margin-bottom: 16px;
  color: rgba(248, 250, 253, 0.96);
}
.scroll-panel--convergence .scroll-panel__sub {
  margin-bottom: 0;
  letter-spacing: 0.008em;
  color: rgba(202, 210, 224, 0.58);
}
/* Panel 1 (Hero) — centered headline lifted into the upper third so it reads as
   a title above the dome horizon (matches the approved case.html composition). */
.scroll-panel--hero .scroll-panel__inner {
  transform: translateY(-20vh);
}
.scroll-panel--hero .scroll-panel__title {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(40px, 4.7vw, 60px);
  line-height: 1.16;
  letter-spacing: -0.03em;
}
.scroll-panel--hero .scroll-panel__hint {
  text-align: center;
}

.scroll-panel__title {
  font-size: 46px;
  font-weight: 420;
  line-height: 1.20;
  letter-spacing: -0.028em;
  word-spacing: -0.02em;
  margin: 0 0 32px;
  max-width: 560px;
  color: rgba(248, 250, 253, 0.96);
  text-wrap: balance;
  font-feature-settings: "ss01", "kern";
  text-shadow:
    0 1px 0 rgba(0,0,0,0.4),
    0 0 60px rgba(0,0,0,0.55);
}
/* Subtle silver gradient on the highlighted ".hl" span — gives the headline
   a metallic shimmer that echoes the Astra mark. */
.scroll-panel__title .hl,
.scroll-panel__h2 .hl {
  font-weight: 600;
  color: rgba(250, 251, 254, 0.98);
  -webkit-text-fill-color: rgba(250, 251, 254, 0.98);
}
/* Italic Fraunces accent — English word in the headline highlight. */
.hl__accent {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}
/* Orbit accent inherits the silver gradient from .hl */
.hl--orbit .hl__accent {
  background: linear-gradient(180deg,
    rgba(220,235,255,1) 0%,
    rgba(196,215,240,0.96) 60%,
    rgba(160,188,224,0.92) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
/* Davinci accent — cool silver gradient */
.hl--davinci .hl__accent {
  background: linear-gradient(180deg,
    rgba(220,235,255,1) 0%,
    rgba(196,215,240,0.96) 60%,
    rgba(160,188,224,0.92) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.scroll-panel__h2 {
  font-size: 24px;            /* English name — small refined eyebrow */
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.005em;
  word-spacing: -0.02em;
  margin: 0 0 26px;
  max-width: 560px;
  color: rgba(236, 242, 252, 0.6);
  text-wrap: balance;
  font-feature-settings: "ss01", "kern";
  text-shadow:
    0 1px 0 rgba(0,0,0,0.4),
    0 0 60px rgba(0,0,0,0.55);
}
.scroll-panel__h2 .hl {       /* Korean tagline — the big statement */
  display: inline-block;
  font-size: clamp(36px, 4.2vw, 47px);
  margin-top: 8px;
  line-height: 1.08;
  letter-spacing: -0.026em;
}
.scroll-panel__sub {
  font-size: 14.5px;
  font-weight: 400;
  color: rgba(202, 210, 224, 0.74);
  line-height: 1.70;
  margin: 0 0 38px;
  max-width: 440px;
  letter-spacing: -0.008em;
  text-wrap: pretty;
  text-shadow: 0 0 12px rgba(0,0,0,0.55);
}
.scroll-panel__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 52px; }
.scroll-panel__hint {
  color: var(--ink-faint);
  font-size: 10.5px;
  letter-spacing: 0;
  text-transform: uppercase;
  animation: hintPulse 2.8s ease-in-out infinite;
}
@keyframes hintPulse {
  0%, 100% { opacity: 0.4; transform: translateY(0); }
  50% { opacity: 0.8; transform: translateY(4px); }
}

/* ── Stats row ── */
.scroll-panel__stats {
  display: flex;
  gap: 0;
  margin-bottom: 36px;
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 28px;
  border-left: 1px solid rgba(255,255,255,0.06);
  position: relative;
}
.stat:first-child {
  padding-left: 0;
  border-left: none;
}
.stat::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 10%;
  height: 80%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(196,215,240,0.22) 35%, rgba(196,215,240,0.22) 65%, transparent);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.stat:first-child::before { display: none; }
.scroll-panel__stats:hover .stat::before { opacity: 1; }
.stat__n {
  font-family: var(--serif);
  font-size: 44px;
  font-weight: 300;
  font-style: italic;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.005em;
  font-feature-settings: 'kern' 1, 'liga' 1;
  background: linear-gradient(180deg,
    rgba(255,255,255,1) 0%,
    rgba(228,235,248,0.96) 60%,
    rgba(200,214,235,0.92) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stat__l {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.20em;
  color: var(--ink-faint);
  text-transform: uppercase;
  margin-top: 3px;
  opacity: 0.78;
}

/* ── Keywords row (replaces feature chips) ── */
.scroll-panel__keywords {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(196, 215, 240, 0.42);
  margin-bottom: 38px;
}
.scroll-panel__keywords--davinci {
  color: rgba(196, 215, 240, 0.42);
}

/* ── Feature chips (legacy) ── */
.scroll-panel__features {
  display: flex;
  flex-wrap: wrap;
  gap: 22px 28px;
  margin-bottom: 38px;
}
/* ── Refined feature chip — subtle glass-card with gradient hairline border ── */
.feature-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px 7px 11px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(232,240,255,0.045) 0%, rgba(232,240,255,0.015) 100%);
  border: 1px solid rgba(232,240,255,0.085);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(232,240,255,0.68);
  transition: color 0.36s var(--ease), border-color 0.36s var(--ease), background 0.36s var(--ease), transform 0.36s var(--ease);
  position: relative;
  cursor: default;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.045),
    0 1px 0 rgba(0,0,0,0.25),
    0 6px 18px rgba(0,0,0,0.20);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.feature-chip::before,
.feature-chip::after { content: none; }
.feature-chip:hover {
  color: rgba(255,255,255,0.96);
  border-color: rgba(196,215,240,0.32);
  background:
    linear-gradient(180deg, rgba(232,240,255,0.085) 0%, rgba(232,240,255,0.025) 100%);
  transform: translateY(-1px);
}
.feature-chip--gold {
  color: rgba(232,212,168,0.78);
  border-color: rgba(230,200,138,0.16);
  background:
    linear-gradient(180deg, rgba(252,232,196,0.05) 0%, rgba(230,200,138,0.018) 100%);
}
.feature-chip--gold:hover {
  color: rgba(255,242,210,0.98);
  border-color: rgba(252,232,196,0.42);
  background:
    linear-gradient(180deg, rgba(252,232,196,0.10) 0%, rgba(230,200,138,0.035) 100%);
}
.feature-chip__icon {
  font-size: 11px;
  opacity: 0.9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  line-height: 1;
  color: rgba(196,215,240,0.82);
  text-shadow: 0 0 8px rgba(196,215,240,0.55);
  transition: color 0.3s var(--ease), text-shadow 0.3s var(--ease);
}
.feature-chip:hover .feature-chip__icon {
  color: rgba(220,235,255,1);
  text-shadow: 0 0 12px rgba(220,235,255,0.95);
}
.feature-chip--gold .feature-chip__icon {
  color: rgba(232,212,168,0.92);
  text-shadow: 0 0 8px rgba(230,200,138,0.55);
}
.feature-chip--gold:hover .feature-chip__icon {
  color: rgba(255,242,210,1);
  text-shadow: 0 0 12px rgba(252,232,196,0.95);
}

/* ── Scroll reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.04s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.04s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
body.is-home .scroll-panel .reveal.is-visible:not(.scroll-panel__hint) {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
body[data-orbit-davinci-snap="1"] .scroll-panel--davinci .reveal {
  opacity: 0 !important;
  transform: translateY(28px) !important;
  pointer-events: none;
  transition-delay: 0s !important;
}
body[data-davinci-daisy-snap="1"] .scroll-panel--convergence .reveal {
  opacity: 0 !important;
  transform: translateY(28px) !important;
  pointer-events: none;
  transition-delay: 0s !important;
}
body[data-panel-handoff-reveal-lock="1"] .scroll-panel .reveal {
  transition: none !important;
  transition-delay: 0s !important;
}
.reveal--d1 { transition-delay: 0s; }
.reveal--d2 { transition-delay: 0s; }
.reveal--d3 { transition-delay: 0s; }
.reveal--d4 { transition-delay: 0s; }

/* Sections after scroll stage — about is semi-transparent so constellation canvas shows through */
.about {
  position: relative;
  z-index: 10;
  background: rgba(2, 3, 4, 0.52);
  backdrop-filter: blur(1px);
}

/* ============ CONVERGENCE — stars gather to form the Astra mark ============ */
.convergence {
  position: relative;
  z-index: 10;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  padding: clamp(120px, 16vw, 200px) var(--pad);
  overflow: hidden;
  background: #000;
  /* No top border — visually continuous with the davinci panel above. */
  border-top: none;
  border-bottom: 1px solid var(--line);
}
/* a soft top fade so particles appear to "spill in" from the panel above */
.convergence::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 24vh;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0) 100%);
}
.convergence__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}
.convergence__inner {
  position: relative;
  z-index: 2;
  max-width: 560px;
  width: min(48vw, 560px);
  margin: 0 auto 0 calc((100vw - min(var(--max), 100vw)) / 2 + var(--pad));
  pointer-events: none;
}
.convergence__h {
  font-size: clamp(30px, 3.8vw, 50px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.028em;
  margin: 20px 0 24px;
  color: var(--ink);
}
.convergence__sub {
  font-size: clamp(15px, 1.08vw, 17.5px);
  color: var(--ink-dim);
  line-height: 1.75;
  margin: 0;
  max-width: 520px;
}
.block, .cta-block, .foot {
  position: relative;
  z-index: 10;
  background: var(--bg);
}

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  border-radius: 0;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.04em;
  border: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.btn svg { width: 12px; height: 12px; }
.btn--primary,
.btn--primary:visited {
  color: var(--ink);
  border-bottom-color: var(--ink-dim);
}
.btn--primary:hover { border-bottom-color: var(--ink); }
.btn--ghost,
.btn--ghost:visited {
  color: var(--ink-dim);
  border-bottom-color: var(--line);
}
.btn--ghost:hover { border-bottom-color: var(--ink-muted); color: var(--ink-2); }

/* =========================================================
   ABOUT — constellation visible through semi-transparent bg
   ========================================================= */
.about {
  padding: clamp(140px, 15vw, 220px) var(--pad);
  border-top: 1px solid rgba(255,255,255,0.04);
}
.about__inner {
  max-width: var(--max);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.about__h {
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.028em;
  margin: 0 0 32px;
  max-width: 20ch;
  color: var(--ink);
  text-shadow: 0 0 50px rgba(0,0,0,0.9), 0 2px 24px rgba(0,0,0,0.7);
}
.about__p {
  font-size: clamp(15px, 1.1vw, 17.5px);
  color: var(--ink-2);
  line-height: 1.75;
  margin: 0;
  max-width: 50ch;
  text-shadow: 0 0 36px rgba(0,0,0,0.8);
}

/* =========================================================
   KICKER / DISPLAY SHARED
   ========================================================= */
.kicker {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 450;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(208, 214, 226, 0.5);   /* neutral silver — no blue accent */
  margin: 0 0 26px;
  position: relative;
  display: inline-flex;
  align-items: center;
  font-variant-numeric: tabular-nums;
}
/* decorative line + glowing dot removed — clean text only */
.kicker::before { content: none; }
.kicker::after { content: none; }
.kicker--orbit   { color: var(--orbit-dim); }
.kicker--orbit::before { background: linear-gradient(90deg, var(--orbit-dim), transparent); }
.kicker--davinci { color: rgba(180, 200, 230, 0.72); }
.kicker--davinci::before { background: linear-gradient(90deg, rgba(180, 200, 230, 0.72), transparent); }
.kicker--field { color: rgba(196, 215, 240, 0.82); }
.kicker--field::before { background: linear-gradient(90deg, rgba(196, 215, 240, 0.78), transparent); }
/* English product names in kickers use italic serif */
.kicker [lang="en"] {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
}

.display {
  font-size: clamp(26px, 3.4vw, 42px);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.026em;
  margin: 0 0 20px;
  max-width: 20ch;
  color: var(--ink);
}
.display--cta { max-width: 24ch; }

.prose {
  font-size: clamp(16px, 1.15vw, 18px);
  color: var(--ink-dim);
  line-height: 1.75;
  margin: 0 0 24px;
  max-width: 62ch;
}
.prose:last-child { margin-bottom: 0; }

/* =========================================================
   BLOCK
   ========================================================= */
.block {
  padding: clamp(110px, 13vw, 180px) var(--pad);
  border-top: 1px solid var(--line);
  background: #000;
}
.block--alt { background: #000; }
.block__inner { max-width: var(--max); margin: 0 auto; }
.block__head { max-width: 820px; margin-bottom: clamp(56px, 7vw, 88px); }
/* first content block after the immersive stage — breathing room so it doesn't feel abrupt */
#architecture { padding-top: clamp(130px, 15vw, 210px); }
/* header: text on the left, an atmospheric visual on the right (no "text under text") */
#architecture .block__head {
  max-width: var(--max);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: clamp(32px, 5vw, 80px); align-items: center;
}
.dstruct__head-text { max-width: 600px; }
.dstruct__head-viz { position: relative; aspect-ratio: 16 / 10; width: 100%; }
.dstruct__head-viz canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@media (max-width: 860px) {
  #architecture .block__head { grid-template-columns: 1fr; }
  .dstruct__head-viz { display: none; }
}

/* =========================================================
   PRODUCT SECTIONS (Orbit cool, Davinci warm)
   ========================================================= */
.product {
  position: relative;
  padding: clamp(120px, 14vw, 200px) var(--pad);
  border-top: 1px solid var(--line);
  background: var(--bg);
  overflow: hidden;
}
.product--orbit   { background: #000; }
.product--davinci { background: #000; }
.davinci-wash { display: none; }

.product__inner { position: relative; z-index: 2; max-width: var(--max); margin: 0 auto; }

/* LEDE single-column (Davinci) */
.product__lede {
  max-width: 640px;
  margin: 0 0 clamp(72px, 9vw, 120px);
}
/* LEDE split: copy + figure side-by-side (Orbit) */
.product__lede--split {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
  margin-bottom: clamp(80px, 10vw, 140px);
  max-width: none;
}
.product__lede-copy { max-width: 520px; }

.product__h {
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.025em;
  margin: 0 0 22px;
  color: var(--ink);
}
.product__sub {
  font-size: clamp(15px, 1.05vw, 17px);
  color: var(--ink-dim);
  line-height: 1.7;
  margin: 0 0 28px;
  max-width: 46ch;
}

/* Orbit figure — WebGL canvas */
.orbit-figure {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 720px;
  aspect-ratio: 720 / 560;
  margin-left: auto;
}
.orbit-figure--hero {
  justify-self: end;
  max-width: 980px;
}
.orbit-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  -webkit-mask-image: radial-gradient(ellipse 72% 58% at 55% 51%, #000 0%, #000 58%, rgba(0,0,0,0.68) 73%, transparent 92%);
  mask-image: radial-gradient(ellipse 72% 58% at 55% 51%, #000 0%, #000 58%, rgba(0,0,0,0.68) 73%, transparent 92%);
}
.orbit-product-shot::before {
  content: "";
  position: absolute;
  inset: 4% -8% -4% 4%;
  z-index: -1;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, rgba(159,187,224,0.105), rgba(238,232,220,0.045) 36%, transparent 72%);
  filter: blur(54px);
}
.orbit-shot {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  background:
    radial-gradient(ellipse 58% 72% at 64% 40%, rgba(159,187,224,0.15), transparent 64%),
    radial-gradient(ellipse 64% 82% at 40% 78%, rgba(238,232,220,0.075), transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012) 42%, rgba(255,255,255,0.026)),
    #050506;
  box-shadow:
    0 54px 150px -70px rgba(159,187,224,0.45),
    0 34px 80px -46px rgba(0,0,0,0.92),
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(255,255,255,0.05);
  transform: rotateX(4deg) rotateY(-7deg) rotateZ(0.4deg);
  transform-origin: center;
}
.orbit-shot::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,0.026) 1px, transparent 1px);
  background-size: 78px 78px;
  mask-image: radial-gradient(ellipse 72% 78% at 64% 45%, #000 0%, transparent 78%);
  opacity: 0.55;
}
.orbit-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 42%, rgba(255,255,255,0.105) 48%, transparent 56% 100%),
    radial-gradient(ellipse 90% 120% at 50% 0%, rgba(255,255,255,0.045), transparent 52%);
  mix-blend-mode: screen;
  opacity: 0.62;
}
.orbit-shot__chrome {
  position: relative;
  z-index: 3;
  height: 44px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(255,255,255,0.075);
  background: rgba(0,0,0,0.22);
  color: var(--ink-dim);
  font-size: 10.5px;
  letter-spacing: 0;
}
.orbit-shot__brand {
  color: var(--ink);
  font-weight: 500;
}
.orbit-shot__path { color: rgba(236,237,239,0.46); }
.orbit-shot__status {
  color: #0a0a0c;
  background: rgba(236,237,239,0.90);
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 9.5px;
}
.orbit-shot__body {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 172px 1fr;
  height: calc(100% - 44px);
}
.orbit-shot__side {
  padding: 22px 18px;
  border-right: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(255,255,255,0.026), rgba(255,255,255,0.006));
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.orbit-shot__label {
  margin: 12px 0 2px;
  color: rgba(236,237,239,0.36);
  font-size: 9.5px;
  letter-spacing: 0.14em;
}
.orbit-shot__label:first-child { margin-top: 0; }
.orbit-shot__side span {
  color: rgba(236,237,239,0.48);
  font-size: 12px;
  line-height: 1.4;
}
.orbit-shot__side .is-active {
  color: var(--ink);
}
.orbit-shot__main {
  position: relative;
  min-width: 0;
  overflow: hidden;
}
.orbit-map {
  position: absolute;
  inset: 0 0 106px;
  overflow: hidden;
}
.orbit-map__grid {
  position: absolute;
  inset: 9% 8% 2% 4%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 58% 45%, rgba(238,232,220,0.12), rgba(238,232,220,0.030) 16%, transparent 36%),
    repeating-radial-gradient(ellipse at 58% 45%, rgba(255,255,255,0.060) 0 1px, transparent 1px 38px);
  opacity: 0.72;
}
.orbit-map__ring {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 92%;
  height: 34%;
  border-top: 1px solid rgba(238,232,220,0.42);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-13deg);
  filter: drop-shadow(0 0 14px rgba(238,232,220,0.16));
}
.orbit-map__ring--outer {
  width: 112%;
  height: 46%;
  top: 44%;
  border-color: rgba(238,232,220,0.24);
}
.orbit-map__ring--middle {
  width: 94%;
  height: 35%;
  top: 52%;
  border-color: rgba(238,232,220,0.52);
}
.orbit-map__ring--inner {
  width: 64%;
  height: 24%;
  top: 46%;
  border-color: rgba(238,232,220,0.38);
}
.orbit-map__ring--cross {
  width: 104%;
  height: 24%;
  top: 52%;
  transform: translate(-50%, -50%) rotate(7deg);
  border-color: rgba(159,187,224,0.16);
}
.orbit-map__core {
  position: absolute;
  left: 58%;
  top: 45%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 0 18px rgba(238,232,220,0.050),
    0 0 0 40px rgba(238,232,220,0.024),
    0 0 60px 18px rgba(238,232,220,0.22);
}
.orbit-map__node {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(236,237,239,0.72);
  box-shadow: 0 0 0 7px rgba(236,237,239,0.035), 0 0 18px rgba(236,237,239,0.20);
}
.orbit-map__node--a { left: 24%; top: 62%; }
.orbit-map__node--b { left: 39%; top: 55%; }
.orbit-map__node--c { left: 56%; top: 58%; background: rgba(159,187,224,0.78); }
.orbit-map__node--d { left: 73%; top: 50%; }
.orbit-map__node--e { left: 87%; top: 38%; background: rgba(159,187,224,0.60); }
.orbit-ledger {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 106px;
  display: grid;
  grid-template-columns: 104px 1fr auto;
  align-content: center;
  gap: 0 18px;
  padding: 18px 22px;
  border-top: 1px solid rgba(255,255,255,0.075);
  background: rgba(0,0,0,0.36);
  backdrop-filter: blur(18px);
}
.orbit-ledger span,
.orbit-ledger small {
  color: rgba(236,237,239,0.38);
  font-size: 9.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  align-self: center;
}
.orbit-ledger b {
  color: rgba(236,237,239,0.88);
  font-size: 13px;
  font-weight: 500;
  align-self: center;
}

/* BODY split: copy + UI */
.product__split {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: start;
}
.product__split--reverse .product__copy { order: 2; }
.product__split--reverse .product__ui   { order: 1; }

.product__copy { max-width: 560px; }
.product__p {
  font-size: 15.5px;
  color: var(--ink-dim);
  line-height: 1.8;
  margin: 0 0 28px;
  max-width: 56ch;
}

.feat {
  margin: 0;
  border-top: 1px solid var(--line);
}
.feat > div {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.feat dt { font-size: 13.5px; color: var(--ink); font-weight: 500; margin: 0; }
.feat dd { font-size: 13.5px; color: var(--ink-dim); margin: 0; line-height: 1.6; }
.feat--orbit   dt { color: var(--orbit); }
.feat--davinci dt { color: var(--davinci); }

/* ── Minimal text-link CTA — quietly punctuates the panel with a thin
   underline and an arrow. No pill, no gloss, no bevel. */
.product__more {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(236,242,255,0.80);
  padding: 10px 4px;
  border: 0;
  border-bottom: 1px solid rgba(236,242,255,0.22);
  border-radius: 0;
  letter-spacing: 0.01em;
  position: relative;
  background: transparent;
  transition: opacity 0.04s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.04s cubic-bezier(0.16, 1, 0.3, 1),
              gap .12s var(--ease),
              color .12s var(--ease),
              border-color .12s var(--ease);
}
.product__more::before,
.product__more::after { content: none; }
.product__more svg {
  width: 14px;
  height: 14px;
  transition: transform .12s var(--ease);
  opacity: 0.85;
}
.product__more:hover {
  gap: 13px;
  color: #fff;
  border-bottom-color: rgba(236,242,255,0.72);
}
.product__more:hover svg { transform: translateX(4px); opacity: 1; }
.product--orbit .product__more:hover { border-bottom-color: rgba(196,215,240,0.72); }
.product--davinci .product__more,
.product__more--davinci {
  color: rgba(220,228,244,0.82);
  border-bottom-color: rgba(206,220,244,0.24);
}
.product--davinci .product__more:hover,
.product__more--davinci:hover {
  color: #fff;
  border-bottom-color: rgba(206,220,244,0.72);
}

/* =========================================================
   UI MOCKUP
   ========================================================= */
.product__ui { width: 100%; }
.ui {
  border: 1px solid var(--line-2);
  border-radius: 12px;
  overflow: hidden;
  background: var(--panel);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(255,255,255,0.02);
}
.ui__chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
}
.ui__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.12); }
.ui__path { color: var(--ink-muted); margin-left: 12px; font-size: 11px; }
.ui__live, .ui__theta {
  margin-left: auto;
  font-size: 10.5px;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  color: var(--orbit);
  background: var(--orbit-soft);
  border: 1px solid rgba(159,187,224,0.24);
}
.product--davinci .ui__live,
.product--davinci .ui__theta,
.product__ui--davinci .ui__live,
.product__ui--davinci .ui__theta {
  color: var(--davinci);
  background: var(--davinci-soft);
  border-color: rgba(230,200,138,0.28);
}

.ui__body { display: grid; grid-template-columns: 180px 1fr; min-height: 440px; }
.ui__side { padding: 22px 20px; border-right: 1px solid var(--line); background: rgba(255,255,255,0.01); }
.ui__side-h { font-size: 10px; color: var(--ink-muted); letter-spacing: 0.12em; margin: 0 0 10px; }
.ui__side-h:not(:first-child) { margin-top: 24px; }
.ui__side-i { font-size: 12.5px; color: var(--ink-dim); margin: 0; padding: 5px 0; display: flex; gap: 10px; align-items: center; }
.ui__side-i span { color: var(--ink-faint); font-size: 10px; }
.ui__side-i--active { color: var(--ink); }
.ui__side-i--active span { color: var(--orbit); }
.product--davinci .ui__side-i--active span { color: var(--davinci); }

.ui__main { padding: 22px 24px; }
.ui__main-h { font-size: 15px; font-weight: 500; color: var(--ink); margin: 0 0 4px; letter-spacing: -0.005em; }
.ui__main-s { font-size: 11.5px; color: var(--ink-muted); margin: 0 0 22px; }

.path { list-style: none; margin: 0 0 20px; padding: 0; border-top: 1px solid var(--line); }
.path__n {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  align-items: center;
}
.path__tag { color: var(--ink-muted); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; }
.path__name { color: var(--ink); font-weight: 450; }
.path__edge { color: var(--ink-muted); font-size: 11px; }
.path__n--active {
  background: linear-gradient(90deg, rgba(159,187,224,0.07), transparent);
  margin: 0 -12px; padding-left: 12px; padding-right: 12px; border-radius: 6px;
}
.path__n--active .path__name { color: var(--orbit); }
.path__n--ghost .path__name { color: var(--ink-dim); font-weight: 400; }
.path__n--ghost .path__tag  { color: var(--ink-faint); }
.path__n--ghost .path__edge { color: var(--ink-faint); }

.pill { font-style: normal; font-size: 10px; padding: 2px 7px; border-radius: 3px; letter-spacing: 0.04em; }
.pill--warn { color: var(--orbit); background: rgba(159,187,224,0.12); }

.ui__inspector { border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; background: rgba(255,255,255,0.015); }
.ui__inspector-h { font-size: 10px; color: var(--orbit); letter-spacing: 0.14em; margin: 0 0 10px; }
.product--davinci .ui__inspector-h { color: var(--davinci); }

.kv { margin: 0; display: grid; gap: 6px; }
.kv > div { display: grid; grid-template-columns: 96px 1fr; gap: 10px; align-items: baseline; font-size: 12px; }
.kv dt { color: var(--ink-muted); margin: 0; }
.kv dd { color: var(--ink); margin: 0; }
.ui__next-q { font-family: var(--mono); font-size: 12.5px; color: var(--ink); margin: 0 0 10px; line-height: 1.55; }

.kcs { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; }
.kc { display: grid; grid-template-columns: 170px 1fr 40px; gap: 12px; align-items: center; font-size: 12px; }
.kc__n { color: var(--ink); }
.kc__t { height: 4px; background: rgba(255,255,255,0.05); border-radius: 2px; overflow: hidden; }
.kc__t i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, rgba(230,200,138,0.95), rgba(230,200,138,0.35));
  font-style: normal;
}
.kc--low .kc__t i { background: linear-gradient(90deg, rgba(212,122,106,0.8), rgba(212,122,106,0.3)); }
.kc__v { color: var(--ink-muted); font-size: 11px; text-align: right; }

/* =========================================================
   FLOW
   ========================================================= */
.flow {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  counter-reset: flow;
}
.flow__step {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: clamp(28px, 4.4vw, 72px);
  padding: 52px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  align-items: start;
  position: relative;
  counter-increment: flow;
  transition: background 0.4s var(--ease);
}
.flow__step::before {
  content: counter(flow, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 52px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 38px;
  font-weight: 300;
  color: rgba(196,215,240,0.16);
  line-height: 1;
  letter-spacing: -0.01em;
  pointer-events: none;
  transition: color 0.5s var(--ease), transform 0.5s var(--ease);
}
.flow__step:hover {
  background: linear-gradient(90deg, rgba(196,215,240,0.018), transparent 60%);
}
.flow__step:hover::before {
  color: rgba(196,215,240,0.42);
  transform: translateX(-2px);
}
.flow__n {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-muted);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 12px 0 0 56px;
  margin: 0;
  opacity: 0.72;
}
.flow__body { max-width: 720px; padding-top: 6px; }
.flow__h {
  font-size: clamp(20px, 2.0vw, 26px);
  font-weight: 500;
  line-height: 1.24;
  letter-spacing: -0.018em;
  margin: 0 0 14px;
  color: var(--ink);
}
.flow__p {
  font-size: 14.5px;
  color: var(--ink-dim);
  line-height: 1.8;
  margin: 0;
  max-width: 60ch;
  letter-spacing: -0.002em;
  opacity: 0.78;
}

/* =========================================================
   ARCHITECTURE
   ========================================================= */
.arch { border-top: 1px solid var(--line); }
.arch__row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: clamp(24px, 4vw, 56px);
  padding: 48px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.arch__n { font-size: 12px; color: var(--ink-muted); letter-spacing: 0.14em; margin: 6px 0 0; }
.arch__h { font-size: clamp(22px, 2.4vw, 28px); font-weight: 600; line-height: 1.25; letter-spacing: -0.018em; margin: 0 0 14px; display: flex; align-items: center; gap: 14px; }
.arch__p { font-size: 15.5px; color: var(--ink-dim); line-height: 1.75; margin: 0; max-width: 72ch; }

/* Flow/Arch SVG icons — thin-line minimal icons matching the cool palette */
.flow__icon, .arch__icon {
  display: inline-block;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: rgba(196, 215, 240, 0.78);
  stroke: currentColor;
  fill: none;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
  transition: color 0.4s var(--ease), transform 0.4s var(--ease);
}
.flow__step:hover .flow__icon,
.arch__row:hover .arch__icon {
  color: rgba(220, 232, 252, 1);
  transform: translateX(2px);
}
.flow__h { display: flex; align-items: center; gap: 12px; }
.about__icons {
  display: flex;
  gap: 32px;
  margin-bottom: 28px;
  align-items: center;
}
.about__icon-pair {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(196, 215, 240, 0.86);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.about__icon-pair svg {
  width: 26px;
  height: 26px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =========================================================
   USE CASES
   ========================================================= */
.use-cases { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.use-cases > li {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: clamp(24px, 4vw, 64px);
  padding: 40px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.uc__who { font-size: 11.5px; color: var(--ink-muted); letter-spacing: 0.12em; text-transform: uppercase; margin: 6px 0 0; }
.uc__h { font-size: clamp(20px, 2.1vw, 26px); font-weight: 600; letter-spacing: -0.018em; margin: 0 0 14px; line-height: 1.3; grid-column: 2; }
.uc__b { font-size: 15px; color: var(--ink-dim); line-height: 1.75; margin: 0; max-width: 66ch; grid-column: 2; }

/* =========================================================
   CASES — editorial list, no cards
   ========================================================= */
.cases {
  display: block;
  border-top: 1px solid var(--line);
  margin: 0;
  padding: 0;
}
.case {
  display: grid;
  grid-template-columns: 240px 1fr 1.4fr;
  gap: clamp(24px, 4vw, 64px);
  padding: 40px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.case__industry {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 6px 0 0;
}
.case__h {
  font-size: clamp(20px, 2.1vw, 26px);
  font-weight: 600;
  letter-spacing: -0.018em;
  margin: 0;
  line-height: 1.3;
  color: var(--ink);
}
.case__h b { font-weight: 700; }
.case__b {
  font-size: 14.5px;
  color: var(--ink-dim);
  line-height: 1.7;
  margin: 0;
  max-width: 54ch;
}

/* =========================================================
   SECURITY
   ========================================================= */
.sec {
  margin: 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.sec > div {
  padding: 28px 28px 28px 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.sec > div:nth-child(3n) { border-right: none; padding-right: 0; }
.sec > div:nth-last-child(-n+3) { border-bottom: none; }
.sec dt { font-size: 14px; font-weight: 500; color: var(--ink); margin: 0 0 8px; letter-spacing: -0.005em; }
.sec dd { font-size: 13.5px; color: var(--ink-dim); margin: 0; }

/* =========================================================
   CTA
   ========================================================= */
.cta-block {
  padding: clamp(120px, 14vw, 180px) var(--pad);
  border-top: 1px solid var(--line);
  background: #000;
}
.cta-block__row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 32px; }

/* =========================================================
   FOOTER
   ========================================================= */
/* --- Guide CTA Final --- */
/* --- Guide CTA Final --- */
.guide-cta-final {
  position: relative;
  padding: clamp(140px, 18vw, 240px) var(--pad);
  background: #000;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.guide-cta-final__glow { display: none; }
.guide-cta-final::before { display: none; }
.guide-cta-final__inner {
  max-width: 520px;
  margin: 0 auto;
}
.guide-cta-final__eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.2);
  margin: 0 0 28px;
}
.guide-cta-final__h {
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin: 0 0 18px;
  color: #fff;
}
.guide-cta-final__p {
  font-size: 14px;
  color: rgba(255,255,255,0.28);
  line-height: 1.8;
  margin: 0 auto 44px;
  max-width: 36ch;
  letter-spacing: 0.01em;
}
.guide-cta-final__row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.btn--lg {
  padding: 13px 32px;
  font-size: 13.5px;
  border-radius: 8px;
  letter-spacing: 0.01em;
}

/* --- Footer --- */
.foot {
  padding: clamp(80px, 9vw, 130px) var(--pad) 44px;
  background: #000;
  border-top: 1px solid var(--line);
}
.foot::before { display: none; }
.foot__inner {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 2.5fr; gap: clamp(40px, 5vw, 96px);
  align-items: start;
  padding-bottom: clamp(48px, 6vw, 76px);
  border-bottom: 1px solid var(--line);
}
.foot__lead { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.foot__word {
  font-size: clamp(22px, 2.4vw, 30px); font-weight: 500; letter-spacing: -0.02em;
  line-height: 1; color: var(--ink);
}
.foot__statement {
  font-size: clamp(15px, 1.35vw, 18px); color: var(--ink-muted); margin: 0;
  line-height: 1.5; letter-spacing: -0.01em;
}
.foot__cta {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 6px;
  font-size: 14px; color: var(--ink-dim); padding-bottom: 5px;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.foot__cta svg { width: 14px; height: 14px; }
.foot__cta:hover { color: var(--ink); border-bottom-color: rgba(255,255,255,0.55); }
.foot__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.4vw, 40px); }
.foot__col { display: flex; flex-direction: column; gap: 14px; }
.foot__col h4 {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 6px; font-weight: 450;
}
.foot__col a { font-size: 13.5px; color: var(--ink-dim); transition: color .2s var(--ease); width: fit-content; }
.foot__col a:hover { color: var(--ink); }
.foot__base {
  max-width: var(--max); margin: 0 auto; padding-top: 30px;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  font-size: 11px; color: var(--ink-faint); flex-wrap: wrap; letter-spacing: 0.04em;
}
.foot__legal { display: flex; gap: 28px; }
.foot__legal a { color: var(--ink-faint); transition: color .2s var(--ease); }
.foot__legal a:hover { color: var(--ink-muted); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) {
  .nav__root { gap: 0; }
  .nav__trigger { padding: 8px 10px; font-size: 14px; }
  .mega__inner { grid-template-columns: 1fr 1fr; gap: 40px; }
  .mega__col--feature { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; border-right: none; border-bottom: 1px solid var(--line); padding-right: 0; padding-bottom: 28px; }
  .scroll-panel__title { font-size: 54px; }
  .scroll-panel__h2 { font-size: 46px; }
  .stat__n { font-size: 40px; }
}
@media (max-width: 640px) {
  .nav__menu-wrap { display: none; }
  .nav__link { display: none; }
  .nav--product .nav__link--mobile-guide {
    display: inline-flex !important;
    color: var(--ink);
    font-size: 13px;
  }
  .scroll-panel {
    align-items: flex-start;
    padding-top: calc(var(--nav-h) + 64px);
  }
  .scroll-panel__inner--left,
  .scroll-panel__inner--right {
    padding-left: var(--pad);
    padding-right: var(--pad);
  }
  .scroll-panel__inner--left::before,
  .scroll-panel__inner--right::before,
  .scroll-panel__inner--center::before {
    left: 50%;
    right: auto;
    top: 39%;
    width: 118vw;
    height: 68vh;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse 64% 58% at 50% 48%, rgba(0,0,0,0.94) 0%, rgba(0,0,0,0.76) 48%, rgba(0,0,0,0.30) 70%, transparent 88%);
  }
  .scroll-panel__wash--left,
  .scroll-panel__wash--right {
    background:
      linear-gradient(180deg, rgba(0,0,0,0.94) 0%, rgba(0,0,0,0.80) 45%, rgba(0,0,0,0.30) 66%, transparent 84%),
      radial-gradient(ellipse 100% 70% at 50% 42%, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.36) 50%, transparent 76%);
  }
  .scroll-panel__title,
  .scroll-panel__h2 {
    font-size: 34px;
    line-height: 1.15;
    max-width: 100%;
  }
  .scroll-panel__sub {
    font-size: 15px;
    line-height: 1.72;
    max-width: 36ch;
  }
  .scroll-panel__ctas { margin-bottom: 30px; }
  .scroll-panel__stats { margin-bottom: 28px; }
  .stat__n { font-size: 34px; }
  .convergence {
    justify-content: center;
    text-align: center;
  }
  .convergence__inner {
    width: 100%;
    margin: 0 auto;
    max-width: 620px;
  }
  .convergence__sub {
    margin: 0 auto;
  }
  .product__lede--split { grid-template-columns: 1fr; gap: 40px; }
  .product__split { grid-template-columns: 1fr; gap: 48px; }
  .product__split--reverse .product__copy { order: 1; }
  .product__split--reverse .product__ui   { order: 2; }
  .flow__step, .arch__row { grid-template-columns: 1fr; gap: 12px; }
  .use-cases > li { grid-template-columns: 1fr; gap: 10px; }
  .use-cases > li .uc__h, .use-cases > li .uc__b { grid-column: 1; }
  .case { grid-template-columns: 1fr; gap: 10px; padding: 32px 0; }
  .sec { grid-template-columns: 1fr 1fr; }
  .sec > div:nth-child(3n) { border-right: 1px solid var(--line); padding-right: 28px; }
  .sec > div:nth-child(2n) { border-right: none; padding-right: 0; }
  .foot__inner { grid-template-columns: 1fr; gap: 40px; }
  .foot__cols { grid-template-columns: 1fr 1fr; gap: 32px; }
  .ui__body { grid-template-columns: 1fr; }
  .ui__side { display: none; }
  .feat > div { grid-template-columns: 160px 1fr; }
  .mega__inner { grid-template-columns: 1fr; gap: 32px; }
  .mega__col--feature { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .scroll-panel__title,
  .scroll-panel__h2 {
    font-size: 30px;
    max-width: 100%;
  }
  .scroll-panel__stats {
    justify-content: space-between;
    gap: 8px;
  }
  .stat {
    padding: 0 10px;
  }
  .stat:first-child { padding-left: 0; }
  .stat__n { font-size: 31px; }
  .sec { grid-template-columns: 1fr; }
  .sec > div, .sec > div:nth-child(3n), .sec > div:nth-child(2n) { border-right: none; padding-right: 0; border-bottom: 1px solid var(--line); }
  .sec > div:last-child { border-bottom: none; }
  .feat > div { grid-template-columns: 1fr; gap: 4px; }
  .foot__cols { grid-template-columns: 1fr; }
}

/* =========================================================
   PRODUCT DETAIL PAGES
   ========================================================= */
body.is-product { background: var(--bg); }
.p-hero { padding: 180px var(--pad) clamp(90px, 12vw, 140px); background: var(--bg); border-bottom: 1px solid var(--line); }
.p-hero--orbit {
  position: relative;
  overflow: hidden;
  background: #000;
}
.p-hero__inner { max-width: var(--max); margin: 0 auto; }
.p-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 0.86fr);
  gap: clamp(48px, 7vw, 104px);
  align-items: center;
}
.p-hero--orbit .p-hero__grid {
  grid-template-columns: minmax(0, 0.80fr) minmax(540px, 1.20fr);
  gap: clamp(52px, 6.4vw, 96px);
}
.p-hero__copy { min-width: 0; }
.back { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-dim); margin: 0 0 56px; transition: color .2s var(--ease); }
.back svg { width: 14px; height: 14px; }
.back:hover { color: var(--ink); }
.p-hero__eyebrow { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 28px; }
.p-hero__title { font-size: clamp(40px, 5.8vw, 72px); font-weight: 600; line-height: 1.04; letter-spacing: -0.035em; margin: 0 0 32px; max-width: 20ch; }
.p-hero__sub { font-size: clamp(16px, 1.2vw, 19px); color: var(--ink-dim); line-height: 1.65; max-width: 640px; margin: 0; }
.orbit-hero-visual {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 1040px;
  justify-self: end;
  min-width: 0;
  perspective: 1200px;
  transform: translateX(4%);
}
.orbit-hero-visual::after {
  content: "";
  position: absolute;
  inset: 2% -8% -4% 2%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(159,187,224,0.120), rgba(238,232,220,0.050) 38%, transparent 74%);
  filter: blur(58px);
}
.orbit-shot--hero {
  aspect-ratio: 16 / 10.5;
  transform: rotateX(4deg) rotateY(-8deg) rotateZ(0.5deg);
}
.p-section { padding: clamp(80px, 11vw, 130px) 0; border-bottom: 1px solid var(--line); }
.p-section__inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.p-section__head { max-width: 640px; margin-bottom: 56px; }
.p-section__eyebrow { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 20px; }
.p-section__title { font-size: clamp(28px, 3.4vw, 40px); font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 22px; }
.p-section__lede { font-size: 16px; color: var(--ink-dim); line-height: 1.65; margin: 0; max-width: 60ch; }
.rows { display: grid; gap: 0; border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: 64px 1fr 2fr; gap: clamp(20px, 4vw, 48px); padding: 28px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.row__n { font-family: var(--mono); font-size: 11.5px; color: var(--ink-muted); letter-spacing: 0.08em; padding-top: 4px; }
.row__name { font-size: clamp(18px, 1.6vw, 22px); font-weight: 500; letter-spacing: -0.012em; margin: 0; }
.row__desc { font-size: 14.5px; color: var(--ink-dim); line-height: 1.65; margin: 0; max-width: 62ch; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); margin-top: 80px; }
.stats > div { padding: 28px 24px 28px 0; border-right: 1px solid var(--line); }
.stats > div:last-child { border-right: none; padding-right: 0; }
.stats dt { font-size: clamp(30px, 3.4vw, 44px); font-weight: 500; letter-spacing: -0.025em; line-height: 1; margin-bottom: 10px; }
.stats dd { font-size: 12px; color: var(--ink-muted); margin: 0; letter-spacing: 0.04em; text-transform: uppercase; }
.cta { padding: clamp(100px, 14vw, 180px) var(--pad); text-align: left; background: var(--bg); }
.cta__inner { max-width: 900px; margin: 0 auto; }
.cta__eyebrow { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 24px; }
.cta__h { font-size: clamp(36px, 4.8vw, 60px); font-weight: 600; line-height: 1.05; letter-spacing: -0.03em; margin: 0 0 24px; }
.cta__sub { font-size: 16px; color: var(--ink-dim); margin: 0 0 40px; line-height: 1.65; }
.cta__row { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 720px) {
  .p-hero__grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .orbit-hero-visual {
    justify-self: start;
    max-width: 620px;
    transform: none;
  }
  .orbit-figure {
    min-height: auto;
    transform: none;
  }
  .orbit-shot {
    transform: none;
  }
  .orbit-shot__body {
    grid-template-columns: 1fr;
  }
  .orbit-shot__side {
    display: none;
  }
  .row { grid-template-columns: 40px 1fr; }
  .row__desc { grid-column: 2 / -1; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stats > div:nth-child(2) { border-right: none; }
  .stats > div { padding-right: 0; border-bottom: 1px solid var(--line); }
  .stats > div:nth-last-child(-n+2) { border-bottom: none; }
}
@media (max-width: 540px) {
  .p-hero {
    padding-top: 132px;
  }
  .p-hero__grid {
    gap: 28px;
  }
}

/* =========================================================
   NO-CARD PRODUCT FIELDS
   ========================================================= */
.orbit-field {
  position: relative;
  width: 100%;
  min-height: clamp(520px, 46vw, 700px);
  margin: 0;
  isolation: isolate;
  overflow: visible;
}
.orbit-vector {
  position: absolute;
  inset: -9% -10% -10% -7%;
  width: 118%;
  height: 118%;
  display: block;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
}
.orbit-vector--hero {
  inset: -10% -13% -12% -10%;
  width: 124%;
  height: 120%;
}
.orbit-field--hero {
  justify-self: end;
  max-width: 990px;
  transform: translateX(0);
}
.orbit-field--section {
  max-width: 950px;
  margin-left: auto;
}

.decision-field {
  position: relative;
  padding-top: 12px;
}
.decision-field__eyebrow {
  color: var(--ink-muted);
  font-size: 11px;
  letter-spacing: 0.08em;
  margin: 0 0 22px;
}
.decision-field__path {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(236,237,239,0.16);
}
.decision-field__path li {
  position: relative;
  display: grid;
  grid-template-columns: 112px 1fr auto;
  gap: 24px;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid rgba(236,237,239,0.12);
}
.decision-field__path li::before {
  content: "";
  position: absolute;
  left: 96px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(159,187,224,0.9);
  box-shadow: 0 0 18px rgba(159,187,224,0.25);
}
.decision-field__path span,
.decision-field__path small {
  color: var(--ink-muted);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.decision-field__path b {
  color: var(--ink);
  font-size: 16px;
  font-weight: 500;
}
.decision-field__meta {
  margin-top: 24px;
  display: grid;
  gap: 10px;
  color: rgba(236,237,239,0.48);
  font-size: 11px;
}

.p-hero--davinci {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 80% at 74% 42%, rgba(230,200,138,0.075), transparent 68%),
    #000;
}
.codex-field {
  position: relative;
  width: 100%;
  min-height: clamp(420px, 44vw, 620px);
  margin: 0;
  isolation: isolate;
}
.codex-field--hero {
  justify-self: end;
  max-width: 760px;
  transform: translateX(2%);
}
.codex-field--section {
  max-width: 720px;
}
.codex-field__wash {
  position: absolute;
  inset: 8% -4% 0 12%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(230,200,138,0.12), rgba(230,200,138,0.035) 40%, transparent 72%);
  filter: blur(54px);
}
.codex-field__rule {
  position: absolute;
  left: 8%;
  right: 2%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(236,237,239,0.18), transparent);
}
.codex-field__rule--top { top: 17%; }
.codex-field__rule--mid { top: 48%; }
.codex-field__rule--bottom { top: 77%; }
.codex-field__folio {
  position: absolute;
  left: 8%;
  top: 20%;
  max-width: 360px;
}
.codex-field__folio p {
  margin: 0 0 18px;
  color: var(--ink-muted);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.codex-field__folio h2 {
  margin: 0 0 14px;
  color: var(--ink);
  font-size: clamp(36px, 4vw, 58px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
}
.codex-field__folio span {
  display: block;
  color: var(--ink-dim);
  font-size: 15px;
  line-height: 1.65;
  max-width: 30ch;
}
.codex-field__graph {
  position: absolute;
  inset: 14% 2% 12% 42%;
}
.codex-field__edge {
  position: absolute;
  left: 38%;
  top: 46%;
  width: 44%;
  height: 1px;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(230,200,138,0.32), transparent);
}
.codex-field__edge--a { transform: rotate(-38deg); }
.codex-field__edge--b { transform: rotate(10deg); }
.codex-field__edge--c { transform: rotate(50deg); }
.codex-field__node {
  position: absolute;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: rgba(236,237,239,0.78);
  font-family: var(--mono);
  font-size: 11px;
  background: radial-gradient(circle, rgba(230,200,138,0.16), rgba(230,200,138,0.02) 62%, transparent 64%);
  box-shadow: 0 0 36px rgba(230,200,138,0.08);
}
.codex-field__node--a { left: 12%; top: 12%; }
.codex-field__node--b { right: 12%; top: 25%; }
.codex-field__node--c { left: 34%; top: 44%; }
.codex-field__node--d { right: 24%; bottom: 12%; color: rgba(245,178,178,0.74); }
.codex-field__notes {
  position: absolute;
  left: 8%;
  right: 3%;
  bottom: 8%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  color: rgba(236,237,239,0.48);
  font-size: 11px;
  letter-spacing: 0.05em;
}

@media (max-width: 720px) {
  .p-hero--orbit .p-hero__grid,
  .p-hero--davinci .p-hero__grid {
    grid-template-columns: 1fr;
  }
  .orbit-field,
  .codex-field {
    min-height: 420px;
  }
  .orbit-field--hero,
  .orbit-field--section,
  .codex-field--hero,
  .codex-field--section {
    max-width: none;
    transform: none;
  }
  .decision-field__path li {
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .decision-field__path li::before {
    left: auto;
    right: 0;
    top: 24px;
  }
  .codex-field__graph {
    inset: 33% 0 12% 20%;
  }
  .codex-field__notes {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

@media (max-width: 540px) {
  .orbit-field,
  .codex-field {
    min-height: 360px;
  }
  .codex-field__folio {
    left: 0;
    top: 14%;
  }
  .codex-field__graph {
    inset: 38% 0 14% 10%;
  }
  .codex-field__notes {
    left: 0;
    right: 0;
    bottom: 2%;
  }
}

/* =========================================================
   ORBIT PAGE — v4 (Linear/Vercel scale, restrained)
   ========================================================= */

body.is-orbit { background: #000; color: var(--ink); }

/* 메가 메뉴: split product panels */
.mega__inner--product {
  grid-template-columns: 1.05fr 1.5fr 0.85fr;
  gap: 48px;
}
.mega__col--brand {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 32px;
  border-right: 1px solid var(--line);
}
.mega__brand-name {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.018em;
  margin: 4px 0;
  color: var(--ink);
}
.mega__brand-name--davinci { color: var(--davinci); }
.mega__brand-desc {
  font-size: 13px;
  color: var(--ink-dim);
  line-height: 1.6;
  margin: 0 0 14px;
  max-width: 30ch;
}
.mega__brand-link {
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
  margin-top: auto;
  transition: color .18s var(--ease);
}
.mega__brand-link:hover { color: var(--orbit); }
.mega__col--items { gap: 2px; }
.mega__item {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  padding: 9px 12px;
  margin: 0 -12px;
  border-radius: 4px;
  transition: background .18s var(--ease);
  text-decoration: none;
  align-items: start;
}
.mega__item:hover { background: rgba(255,255,255,0.03); }
.mega__item-sym {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-dim);
  line-height: 1.4;
  transition: color .18s var(--ease);
}
.mega__item:hover .mega__item-sym { color: var(--orbit); }
.mega__item-name {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 2px;
}
.mega__item-desc {
  display: block;
  font-size: 11.5px;
  color: var(--ink-muted);
  line-height: 1.5;
}
.mega__item-mini {
  display: block;
  font-size: 12.5px;
  color: var(--ink-dim);
  padding: 6px 0;
  transition: color .15s var(--ease);
}
.mega__item-mini:hover { color: var(--ink); }

/* SUB-NAV (sticky) */
.subnav {
  position: sticky;
  top: var(--nav-h);
  z-index: 60;
  background: rgba(0,0,0,0.85);
  backdrop-filter: saturate(120%) blur(14px);
  -webkit-backdrop-filter: saturate(120%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.subnav__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  height: 52px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.subnav__brand {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.subnav__links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.subnav__links::-webkit-scrollbar { display: none; }
.subnav__link {
  font-size: 13px;
  color: var(--ink-muted);
  padding: 6px 12px;
  border-radius: 4px;
  transition: color .15s var(--ease), background .15s var(--ease);
  white-space: nowrap;
}
.subnav__link:visited {
  color: var(--ink-muted);
}
.subnav__link:hover { color: var(--ink); background: rgba(255,255,255,0.03); }
.subnav__link.is-current { color: var(--ink); }
.subnav__cta {
  font-size: 13px;
  color: var(--ink);
  padding: 6px 0;
  margin-left: auto;
  transition: color .15s var(--ease);
}
.subnav__cta:visited {
  color: var(--ink);
}
.subnav__cta:hover { color: var(--orbit); }

/* Reveal */
.op-card,
.op-list__row,
.op-steps li,
.sub-bul li {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  will-change: opacity, transform;
}
.op-card.is-in,
.op-list__row.is-in,
.op-steps li.is-in,
.sub-bul li.is-in { opacity: 1; transform: none; }
.is-orbit .op-card,
.is-orbit .op-steps li {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .op-card, .op-list__row, .op-steps li, .sub-bul li {
    opacity: 1; transform: none; transition: none;
  }
}

/* Section primitives */
.op-sec {
  position: relative;
  scroll-margin-top: calc(var(--nav-h) + 56px);
  padding: clamp(80px, 11vw, 130px) 0;
  background: #000;
  background-image: radial-gradient(ellipse 90% 45% at 50% 0%, rgba(12,22,42,0.55) 0%, transparent 70%);
}

.orbit-field-bridge + .op-sec {
  padding-top: clamp(64px, 8vw, 110px);
}
.orbit-field-bridge + .op-sec::before {
  content: "";
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(100,155,210,0.22), rgba(160,200,245,0.35), rgba(100,155,210,0.22), transparent);
  pointer-events: none;
}
.op-sec + .op-sec {
  padding-top: clamp(64px, 8vw, 100px);
}
.op-sec + .op-sec::before {
  content: "";
  position: absolute;
  top: 0;
  left: 22%;
  right: 22%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(100,155,210,0.14), rgba(140,190,240,0.24), rgba(100,155,210,0.14), transparent);
  pointer-events: none;
}
.op-sec__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.op-sec__head {
  max-width: 640px;
  margin-bottom: clamp(48px, 6vw, 72px);
}
.op-eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(140,175,225,0.45);
  margin: 0 0 20px;
  font-weight: 400;
}
.guide-hero .op-eyebrow span {
  color: rgba(255,255,255,0.38);
}
.op-sec__h {
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.018em;
  margin: 0 0 16px;
  color: var(--ink);
  max-width: 28ch;
}
.op-sec__lede {
  font-size: 14.5px;
  color: var(--ink-dim);
  line-height: 1.7;
  margin: 0;
  max-width: 56ch;
}

/* HERO */
.op-hero {
  position: relative;
  min-height: calc(100vh - var(--nav-h));
  padding: clamp(60px, 9vw, 110px) var(--pad) clamp(72px, 9vw, 112px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background: #000;
}
.op-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.is-orbit .op-hero__bg::before {
  content: "";
  position: absolute;
  left: 45%;
  right: -22%;
  top: 47%;
  bottom: -12%;
  z-index: 3;
  pointer-events: none;
  opacity: 0.22;
  transform-origin: 50% 58%;
  transform:
    skewX(-14deg)
    skewY(-5deg)
    translate3d(0, 0, 0)
    scale(1.18, 1.08);
  clip-path: polygon(5% 0, 100% 0, 92% 100%, 0 100%);
  background:
    linear-gradient(rgba(238,241,235,0.38) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238,241,235,0.32) 1px, transparent 1px),
    linear-gradient(rgba(245,247,244,0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,247,244,0.10) 1px, transparent 1px),
    radial-gradient(ellipse at 56% 52%, rgba(245,247,244,0.12), transparent 62%);
  background-size: 64px 64px, 64px 64px, 256px 256px, 256px 256px, 100% 100%;
  animation:
    orbit-hero-floor-unfold 1320ms cubic-bezier(0.16, 0.82, 0.18, 1) both;
  will-change: transform, opacity;
}

.is-orbit .op-hero__bg::after {
  content: "";
  position: absolute;
  right: -18%;
  top: 18%;
  z-index: 2;
  width: min(118vw, 1580px);
  height: clamp(340px, 40vw, 620px);
  pointer-events: none;
  border: 1px solid rgba(238,241,235,0.18);
  border-radius: 50%;
  opacity: 0.24;
  transform: rotate(-2deg);
  background:
    radial-gradient(ellipse at 58% 52%, rgba(245,247,244,0.08), transparent 46%),
    linear-gradient(90deg, transparent 16%, rgba(238,241,235,0.12), transparent 76%);
  box-shadow:
    0 0 0 56px rgba(238,241,235,0.030),
    0 0 0 132px rgba(238,241,235,0.020),
    0 0 0 218px rgba(238,241,235,0.012),
    inset 0 0 60px rgba(245,247,244,0.045),
    0 0 92px rgba(238,241,235,0.08);
  mask-image: linear-gradient(90deg, transparent 0%, #000 20%, #000 84%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 20%, #000 84%, transparent 100%);
  mix-blend-mode: screen;
  animation: orbit-hero-ring-presence 6200ms ease-in-out infinite;
}
.op-hero__canvas {
  position: absolute;
  right: -10%;
  top: 50%;
  transform: translateY(-50%);
  width: 84%;
  height: 112%;
  display: block;
  opacity: 0.92;
  z-index: 1;
}
.op-hero__fade {
  position: absolute;
  inset: 0;
  z-index: 4;
  background:
    linear-gradient(90deg, #000 3%, rgba(0,0,0,0.94) 25%, rgba(0,0,0,0.58) 47%, rgba(0,0,0,0.16) 68%, transparent 86%),
    linear-gradient(180deg, rgba(0,0,0,0.12) 0%, transparent 56%, rgba(0,0,0,0.36) 82%, #000 100%);
}
.op-hero__inner {
  position: relative;
  z-index: 5;
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
}
.op-hero__h1 {
  font-size: clamp(36px, 4.4vw, 56px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 16px 0 22px;
  color: var(--ink);
  max-width: 20ch;
}
.op-hero__sub {
  font-size: clamp(15px, 1.1vw, 17px);
  color: var(--ink-dim);
  line-height: 1.7;
  max-width: 58ch;
  margin: 0 0 32px;
}
.op-hero__ctas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.is-orbit .op-hero__fade {
  background:
    linear-gradient(90deg, #000 0%, rgba(0,0,0,0.96) 19%, rgba(0,0,0,0.68) 32%, rgba(0,0,0,0.16) 52%, transparent 100%),
    linear-gradient(180deg, rgba(0,0,0,0.10) 0%, transparent 42%, rgba(0,0,0,0.18) 74%, rgba(0,0,0,0.42) 100%);
}

.orbit-field-hero {
  --field-scroll: 0;
  --field-tilt: 55deg;
  --field-y: -10px;
  --field-scale: 1.32;
  --field-grid-opacity: 0.74;
  --field-star-opacity: 0.98;
  --field-horizon-opacity: 0.58;
  --field-accent: 164, 196, 172;
  --field-grid-x: 0px;
  --field-grid-y: 0px;
  --field-major-x: 0px;
  --field-major-y: 0px;
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  background:
    radial-gradient(ellipse 54% 38% at 72% 52%, rgba(238,241,235,0.09), transparent 70%),
    radial-gradient(ellipse 86% 62% at 75% 74%, rgba(var(--field-accent),0.12), transparent 78%);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 16%, rgba(0,0,0,0.34) 30%, #000 44%, #000 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 16%, rgba(0,0,0,0.34) 30%, #000 44%, #000 100%);
  mix-blend-mode: screen;
}

.orbit-field-hero::before,
.orbit-field-hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.orbit-field-hero::before {
  right: -24vw;
  top: 17%;
  z-index: 0;
  width: min(124vw, 1660px);
  height: clamp(390px, 44vw, 660px);
  border: 1px solid rgba(238,241,235,0.20);
  border-radius: 50%;
  transform: rotate(-3deg) scale(1);
  opacity: 0.42;
  box-shadow:
    0 0 0 54px rgba(238,241,235,0.022),
    0 0 0 124px rgba(238,241,235,0.015),
    0 0 0 212px rgba(238,241,235,0.010),
    0 0 92px rgba(var(--field-accent),0.10);
  animation:
    orbit-field-ring-open 1450ms cubic-bezier(0.16, 0.78, 0.18, 1) both,
    orbit-field-ring-breathe 6200ms ease-in-out 1450ms infinite;
}

.orbit-field-hero::after {
  right: 17%;
  top: 44%;
  z-index: 0;
  width: clamp(180px, 24vw, 360px);
  height: clamp(72px, 10vw, 150px);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, rgba(245,247,244,0.18), rgba(var(--field-accent),0.13) 38%, transparent 72%);
  filter: blur(2px);
  opacity: 0.42;
  animation: orbit-field-core-pulse 5200ms ease-in-out 900ms infinite;
}

.orbit-field-hero__horizon,
.orbit-field-hero__grid,
.orbit-field-hero__stars,
.orbit-field-hero__veil {
  position: absolute;
  pointer-events: none;
}

.orbit-field-hero__horizon {
  left: 18%;
  right: -20%;
  top: 50%;
  height: 1px;
  z-index: 1;
  opacity: var(--field-horizon-opacity);
  background: linear-gradient(90deg, transparent, rgba(var(--field-accent),0.70), rgba(245,247,244,0.50), transparent);
  box-shadow: 0 0 54px rgba(var(--field-accent),0.24);
  animation: orbit-field-horizon-sweep 5600ms ease-in-out 1000ms infinite;
}

.orbit-field-hero__grid {
  left: 34%;
  right: -24%;
  top: 24%;
  bottom: -8%;
  z-index: 2;
  transform-origin: 52% 78%;
  transform:
    perspective(1120px)
    rotateX(var(--field-tilt))
    rotateZ(-1.4deg)
    translate3d(0, var(--field-y), 0)
    scale(var(--field-scale), 1.18);
  opacity: var(--field-grid-opacity);
  background:
    linear-gradient(rgba(238,241,235,0.46) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238,241,235,0.38) 1px, transparent 1px),
    linear-gradient(rgba(var(--field-accent),0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--field-accent),0.18) 1px, transparent 1px),
    radial-gradient(ellipse at 52% 42%, rgba(245,247,244,0.14), transparent 54%),
    linear-gradient(180deg, rgba(var(--field-accent),0.12), transparent 48%);
  background-size: 68px 68px, 68px 68px, 272px 272px, 272px 272px, 100% 100%, 100% 100%;
  background-position:
    0 var(--field-grid-y),
    var(--field-grid-x) 0,
    0 var(--field-major-y),
    var(--field-major-x) 0,
    0 0,
    0 0;
  clip-path: polygon(9% 0, 100% 0, 88% 100%, 0 100%);
  filter:
    drop-shadow(0 0 20px rgba(238,241,235,0.12))
    drop-shadow(0 0 70px rgba(238,241,235,0.04));
  animation:
    orbit-field-hero-grid-open 1180ms cubic-bezier(0.16, 0.78, 0.18, 1) both,
    orbit-field-hero-grid-drift 7600ms linear 1180ms infinite;
  will-change: transform, opacity, background-position;
}

.orbit-field-hero__grid::before,
.orbit-field-hero__grid::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.orbit-field-hero__grid::before {
  left: 8%;
  right: 8%;
  top: 27%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(245,247,244,0.30), rgba(var(--field-accent),0.62), rgba(245,247,244,0.26), transparent);
  box-shadow: 0 0 28px rgba(var(--field-accent),0.22);
  animation: orbit-field-hero-scan 3600ms cubic-bezier(0.16, 0.76, 0.20, 1) 900ms infinite;
}

.orbit-field-hero__grid::after {
  left: 22%;
  right: 14%;
  top: 19%;
  height: 30%;
  border: 1px solid rgba(var(--field-accent),0.30);
  border-radius: 50%;
  box-shadow:
    inset 0 0 34px rgba(var(--field-accent),0.10),
    0 0 42px rgba(var(--field-accent),0.18);
  animation: orbit-field-hero-ring-trace 6400ms ease-in-out 1300ms infinite;
}

.orbit-field-hero__stars {
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  opacity: var(--field-star-opacity);
  filter: saturate(0.74) brightness(1.08);
}

.orbit-field-hero__star {
  position: absolute;
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(245,247,244,0.90);
  box-shadow:
    0 0 14px rgba(245,247,244,0.52),
    0 0 38px rgba(var(--field-accent),0.34);
  transform: translate3d(0,0,0);
  animation: orbit-field-star-drift 5200ms ease-in-out infinite;
}

.orbit-field-hero__star--a { left: 57%; top: 39%; width: 7px; height: 7px; animation-delay: -300ms; }
.orbit-field-hero__star--b { left: 70%; top: 31%; width: 4px; height: 4px; animation-delay: -1300ms; }
.orbit-field-hero__star--c { left: 81%; top: 47%; width: 6px; height: 6px; animation-delay: -2200ms; }
.orbit-field-hero__star--d { left: 63%; top: 59%; width: 4px; height: 4px; animation-delay: -3100ms; }
.orbit-field-hero__star--e { left: 90%; top: 37%; width: 5px; height: 5px; opacity: 0.72; animation-delay: -1800ms; }
.orbit-field-hero__star--f { left: 75%; top: 67%; width: 4px; height: 4px; opacity: 0.66; animation-delay: -3900ms; }

.orbit-field-hero__veil {
  inset: 0;
  z-index: 3;
  background:
    radial-gradient(ellipse 32% 22% at 72% 55%, rgba(245,247,244,0.055), transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,0.06) 0%, transparent 46%, rgba(0,0,0,0.16) 100%);
}

.orbit-field-hero__veil::before {
  content: "";
  position: absolute;
  left: 30%;
  right: -28%;
  top: 39%;
  bottom: -24%;
  pointer-events: none;
  opacity: 0.10;
  transform:
    perspective(940px)
    rotateX(56deg)
    rotateZ(-1.6deg)
    translateY(28px)
    scale(1.16, 1.10);
  transform-origin: 52% 78%;
  clip-path: polygon(10% 0, 100% 0, 86% 100%, 0 100%);
  background:
    linear-gradient(rgba(210,228,248,0.34) 1px, transparent 1px),
    linear-gradient(90deg, rgba(210,228,248,0.30) 1px, transparent 1px),
    linear-gradient(rgba(245,247,244,0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,247,244,0.10) 1px, transparent 1px);
  background-size: 68px 68px, 68px 68px, 272px 272px, 272px 272px;
  background-position: center top;
  filter:
    drop-shadow(0 0 20px rgba(159,187,224,0.18))
    drop-shadow(0 0 62px rgba(159,187,224,0.08));
  animation:
    orbit-field-veil-grid-open 1220ms cubic-bezier(0.16, 0.78, 0.18, 1) both,
    orbit-field-veil-grid-drift 7800ms linear 1220ms infinite;
}

@keyframes orbit-field-veil-grid-open {
  0% {
    opacity: 0;
    clip-path: polygon(49% 0, 51% 0, 51% 0, 49% 0);
    transform:
      perspective(940px)
      rotateX(69deg)
      rotateZ(-1.6deg)
      translateY(68px)
      scale(0.72, 0.14);
    filter: blur(2px) drop-shadow(0 0 0 rgba(159,187,224,0));
  }
  45% {
    opacity: 0.34;
    clip-path: polygon(24% 0, 90% 0, 78% 58%, 15% 58%);
  }
  100% {
    opacity: 0.18;
    clip-path: polygon(10% 0, 100% 0, 86% 100%, 0 100%);
    transform:
      perspective(940px)
      rotateX(65deg)
      rotateZ(-1.6deg)
      translateY(58px)
      scale(1.04, 1.02);
    filter:
      blur(0)
      drop-shadow(0 0 20px rgba(159,187,224,0.18))
      drop-shadow(0 0 62px rgba(159,187,224,0.08));
  }
}

@keyframes orbit-field-veil-grid-drift {
  0% { background-position: center top, center top, center top, center top; }
  100% { background-position: center -68px, calc(50% + 68px) top, center -136px, calc(50% + 136px) top; }
}

@keyframes orbit-hero-floor-unfold {
  0% {
    opacity: 0;
    clip-path: polygon(49% 0, 51% 0, 51% 0, 49% 0);
    transform:
      skewX(-14deg)
      skewY(-5deg)
      translate3d(0, 70px, 0)
      scale(0.72, 0.18);
    filter: blur(1px);
  }
  42% {
    opacity: 0.36;
    clip-path: polygon(20% 0, 94% 0, 84% 68%, 9% 68%);
  }
  100% {
    opacity: 0.42;
    clip-path: polygon(5% 0, 100% 0, 92% 100%, 0 100%);
    transform:
      skewX(-14deg)
      skewY(-5deg)
      translate3d(0, 0, 0)
      scale(1.18, 1.08);
    filter: blur(0);
  }
}

@keyframes orbit-hero-ring-presence {
  0%, 100% {
    opacity: 0.32;
    transform: rotate(-2deg) scale(0.992);
  }
  48% {
    opacity: 0.44;
    transform: rotate(-2deg) scale(1.012);
  }
}

@keyframes orbit-hero-floor-drift {
  0% {
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
  }
  100% {
    background-position: 0 -72px, 72px 0, 0 -144px, 144px 0, 0 0;
  }
}

@keyframes orbit-field-hero-grid-open {
  0% {
    clip-path: polygon(49% 0, 51% 0, 51% 0, 49% 0);
    opacity: 0;
    transform:
      perspective(1080px)
      rotateX(70deg)
      rotateZ(-1.4deg)
      translate3d(0, 76px, 0)
      scale(0.66, 0.12);
    filter: blur(2px) drop-shadow(0 0 0 rgba(159,187,224,0));
  }
  38% {
    clip-path: polygon(25% 0, 88% 0, 78% 54%, 16% 54%);
    opacity: calc(var(--field-grid-opacity) + 0.10);
  }
  100% {
    clip-path: polygon(9% 0, 100% 0, 88% 100%, 0 100%);
    opacity: var(--field-grid-opacity);
    transform:
      perspective(1120px)
      rotateX(var(--field-tilt))
      rotateZ(-1.4deg)
      translate3d(0, var(--field-y), 0)
      scale(var(--field-scale), 1.18);
    filter:
      blur(0)
      drop-shadow(0 0 24px rgba(232,239,247,0.16))
      drop-shadow(0 0 82px rgba(232,239,247,0.065));
  }
}

@keyframes orbit-field-hero-grid-drift {
  0% {
    background-position:
      0 var(--field-grid-y),
      var(--field-grid-x) 0,
      0 var(--field-major-y),
      var(--field-major-x) 0,
      0 0,
      0 0;
  }
  100% {
    background-position:
      0 calc(var(--field-grid-y) - 68px),
      calc(var(--field-grid-x) + 68px) 0,
      0 calc(var(--field-major-y) - 136px),
      calc(var(--field-major-x) + 136px) 0,
      0 0,
      0 0;
  }
}

@keyframes orbit-field-hero-scan {
  0% {
    opacity: 0;
    top: 27%;
    transform: scaleX(0.22);
  }
  18% {
    opacity: 0.82;
    transform: scaleX(0.78);
  }
  54% {
    opacity: 0.22;
    top: 56%;
    transform: scaleX(1);
  }
  100% {
    opacity: 0;
    top: 62%;
    transform: scaleX(0.94);
  }
}

@keyframes orbit-field-hero-ring-trace {
  0%, 100% {
    opacity: 0.30;
    transform: scale(0.985);
  }
  42% {
    opacity: 0.58;
    transform: scale(1.012);
  }
  70% {
    opacity: 0.22;
    transform: scale(1.02);
  }
}

@keyframes orbit-field-horizon-sweep {
  0%, 100% {
    opacity: 0.46;
    transform: translateX(-3%);
  }
  48% {
    opacity: var(--field-horizon-opacity);
    transform: translateX(4%);
  }
}

@keyframes orbit-field-ring-open {
  0% {
    opacity: 0;
    transform: rotate(-3deg) scale(0.62);
    filter: blur(2px);
  }
  100% {
    opacity: 0.44;
    transform: rotate(-3deg) scale(1);
    filter: blur(0);
  }
}

@keyframes orbit-field-ring-breathe {
  0%, 100% {
    opacity: 0.34;
    transform: rotate(-3deg) scale(1);
  }
  48% {
    opacity: 0.48;
    transform: rotate(-3deg) scale(1.025);
  }
}

@keyframes orbit-field-core-pulse {
  0%, 100% {
    opacity: 0.42;
    transform: scale(0.98);
  }
  50% {
    opacity: 0.72;
    transform: scale(1.04);
  }
}

/* SUB-PAGE hero */
.sub-hero {
  padding: clamp(72px, 10vw, 120px) var(--pad) clamp(56px, 8vw, 88px);
  background: #000;
  border-bottom: 1px solid var(--line);
}
.sub-hero__inner {
  max-width: var(--max);
  margin: 0 auto;
}
.sub-hero__h1 {
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 14px 0 24px;
  color: var(--ink);
  max-width: 18ch;
}
.sub-hero__sub {
  font-size: clamp(15px, 1.1vw, 17px);
  color: var(--ink-dim);
  line-height: 1.7;
  max-width: 60ch;
  margin: 0;
}

/* Grid + Card primitives — 매우 미묘하게 */
.op-grid { display: grid; gap: 20px; }
.op-grid--3 { grid-template-columns: repeat(3, 1fr); }
.op-grid--2 { grid-template-columns: 1fr 1fr; }
.op-grid--guide-map {
  grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
  gap: 1px;
  border: 1px solid rgba(100,155,210,0.12);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(100,155,210,0.08);
}
.op-grid--guide-map .op-card {
  border: 0;
  border-radius: 0;
  min-height: 220px;
  background: rgba(6,10,20,0.92);
}
.op-grid--guide-map .op-card:hover {
  background: rgba(10,16,30,0.95);
}

.op-card {
  padding: 28px 24px;
  background: rgba(8,14,28,0.65);
  border: 1px solid rgba(100,155,210,0.10);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 200px;
  transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.op-card:hover {
  border-color: rgba(100,155,210,0.22);
  background: rgba(12,20,38,0.80);
  box-shadow: 0 0 24px rgba(100,155,210,0.06);
}
.op-card__num {
  font-family: var(--mono);
  font-size: 10.5px;
  color: rgba(120,165,220,0.62);
  letter-spacing: 0.1em;
  margin: 0 0 4px;
  font-weight: 400;
}
.op-card__h {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.012em;
  margin: 0;
  color: var(--ink);
}
.op-card__line {
  font-size: 13px;
  color: var(--ink-2);
  margin: 0 0 4px;
}
.op-card__p {
  font-size: 13px;
  color: var(--ink-dim);
  line-height: 1.65;
  margin: 0;
}
.op-card--plain {
  background: transparent;
  border: none;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 32px 0 0;
}
.op-card--plain:hover { background: transparent; }

.op-meta {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}
.op-meta li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.op-meta li:last-child { border-bottom: none; }
.op-meta b {
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
}
.op-meta span {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}

/* List — Inside Orbit overview rows */
.op-list {
  display: grid;
  border-top: 1px solid var(--line);
}
.op-list__row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
  text-decoration: none;
  transition: padding-left .25s var(--ease);
}
.op-list__row:hover { padding-left: 8px; }
.op-list__sym {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--ink-dim);
  transition: color .25s var(--ease);
}
.op-list__row:hover .op-list__sym { color: var(--orbit); }
.op-list__body { min-width: 0; }
.op-list__h {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.012em;
  margin: 0 0 4px;
  color: var(--ink);
}
.op-list__p {
  font-size: 13px;
  color: var(--ink-dim);
  line-height: 1.55;
  margin: 0;
  max-width: 64ch;
}
.op-list__more {
  font-size: 12.5px;
  color: var(--ink-muted);
  font-family: var(--mono);
  letter-spacing: 0.04em;
  transition: color .25s var(--ease);
}
.op-list__row:hover .op-list__more { color: var(--ink); }

.guide-articles {
  display: grid;
  gap: 1px;
  margin-top: clamp(56px, 7vw, 84px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.guide-article {
  display: grid;
  grid-template-columns: minmax(180px, 0.68fr) minmax(0, 1fr) minmax(150px, 0.32fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: start;
  padding: clamp(34px, 5vw, 56px) 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: calc(var(--nav-h) + 28px);
}

.guide-article:last-child { border-bottom: none; }
.guide-article .op-eyebrow { margin: 4px 0 0; }

.guide-article h3 {
  margin: 0;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.18;
  font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--ink);
  max-width: 17ch;
}

.guide-article p:not(.op-eyebrow) {
  margin: 0;
  color: var(--ink-dim);
  font-size: 15px;
  line-height: 1.72;
  max-width: 58ch;
}

.guide-article a {
  color: var(--ink);
  font-size: 13px;
  white-space: nowrap;
  justify-self: end;
  padding-top: 6px;
  transition: color .16s var(--ease);
}

.guide-article a:hover { color: var(--orbit); }

/* Steps — How it works */
.op-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(100,155,210,0.12);
}
.op-steps li {
  padding: 24px 22px 28px 0;
  border-right: 1px solid rgba(100,155,210,0.08);
  border-bottom: 1px solid rgba(100,155,210,0.08);
  min-height: 160px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.op-steps li:last-child { border-right: none; }
.op-steps li > span {
  font-family: var(--mono);
  font-size: 10.5px;
  color: rgba(120,165,220,0.62);
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}
.op-steps li > h3 {
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}
.op-steps li > p {
  font-size: 12.5px;
  color: var(--ink-dim);
  line-height: 1.6;
  margin: 0;
  max-width: 28ch;
}

/* Orbit Field demo page */
.field-demo-section {
  background-image:
    radial-gradient(ellipse 60% 40% at 52% 8%, rgba(86,120,170,0.16) 0%, transparent 72%),
    linear-gradient(180deg, #000 0%, #020406 100%);
}

.field-demo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid rgba(159,187,224,0.13);
  background: rgba(159,187,224,0.10);
  overflow: hidden;
}

.field-demo-panel {
  position: relative;
  min-height: 320px;
  padding: clamp(24px, 3vw, 34px);
  background:
    linear-gradient(180deg, rgba(8,12,19,0.96), rgba(3,6,10,0.98)),
    #000;
  overflow: hidden;
}

.field-demo-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
  background:
    linear-gradient(rgba(159,187,224,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(159,187,224,0.055) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.75), transparent 74%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.75), transparent 74%);
}

.field-demo-panel--active {
  background:
    radial-gradient(ellipse 72% 48% at 50% 52%, rgba(159,187,224,0.16), transparent 72%),
    linear-gradient(180deg, rgba(9,14,22,0.98), rgba(3,7,12,0.98)),
    #000;
}

.field-demo-panel__k {
  position: relative;
  z-index: 1;
  display: block;
  margin-bottom: 18px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(159,187,224,0.66);
}

.field-demo-panel h3 {
  position: relative;
  z-index: 1;
  margin: 0 0 12px;
  max-width: 17ch;
  color: var(--ink);
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.28;
  font-weight: 500;
  letter-spacing: 0;
}

.field-demo-panel p {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 32ch;
  color: rgba(245,247,244,0.58);
  font-size: 13.5px;
  line-height: 1.72;
}

.field-demo-list {
  position: absolute;
  z-index: 1;
  left: clamp(24px, 3vw, 34px);
  right: clamp(24px, 3vw, 34px);
  bottom: clamp(22px, 2.7vw, 30px);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.field-demo-list li {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 0;
  border-top: 1px solid rgba(159,187,224,0.11);
}

.field-demo-list b {
  color: rgba(245,247,244,0.88);
  font-size: 12.5px;
  font-weight: 500;
}

.field-demo-list span {
  color: rgba(245,247,244,0.42);
  font-size: 12px;
  text-align: right;
}

.field-demo-map {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 18%;
  height: 34%;
  transform: perspective(760px) rotateX(66deg);
  transform-origin: 50% 82%;
  border: 1px solid rgba(159,187,224,0.13);
  background:
    linear-gradient(rgba(159,187,224,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(159,187,224,0.08) 1px, transparent 1px);
  background-size: 44px 44px;
  box-shadow: 0 0 34px rgba(159,187,224,0.08);
}

.field-demo-map__line,
.field-demo-map__node {
  position: absolute;
  display: block;
  pointer-events: none;
}

.field-demo-map__line {
  left: 16%;
  right: 14%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(159,187,224,0.34), transparent);
}

.field-demo-map__line--a {
  top: 38%;
  transform: rotate(12deg);
}

.field-demo-map__line--b {
  top: 62%;
  transform: rotate(-18deg);
}

.field-demo-map__node {
  width: 7px;
  height: 7px;
  border: 1px solid rgba(245,247,244,0.62);
  background: rgba(159,187,224,0.26);
  box-shadow: 0 0 16px rgba(159,187,224,0.22);
}

.field-demo-map__node--a { left: 18%; top: 40%; }
.field-demo-map__node--b { left: 46%; top: 30%; }
.field-demo-map__node--c { right: 25%; top: 58%; }
.field-demo-map__node--d { right: 14%; bottom: 16%; }

.field-signal-strip {
  margin-top: clamp(26px, 4vw, 42px);
  padding-top: 18px;
  border-top: 1px solid rgba(159,187,224,0.12);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  color: rgba(245,247,244,0.45);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.field-signal-strip i {
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, rgba(159,187,224,0.08), rgba(159,187,224,0.38), rgba(159,187,224,0.08));
}

.field-cycle li {
  min-height: 180px;
  background:
    linear-gradient(180deg, rgba(159,187,224,0.035), transparent 60%);
}

.field-surfaces-section {
  background-image:
    radial-gradient(ellipse 70% 52% at 50% 0%, rgba(159,187,224,0.12) 0%, transparent 72%),
    linear-gradient(180deg, #000 0%, #020406 100%);
}

.field-surface-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid rgba(159,187,224,0.13);
  background: rgba(159,187,224,0.10);
}

.field-surface {
  position: relative;
  min-height: 270px;
  padding: clamp(24px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  background:
    linear-gradient(180deg, rgba(8,12,18,0.98), rgba(3,6,10,0.98)),
    #000;
  overflow: hidden;
  transition: background .24s var(--ease);
}

.field-surface::before {
  content: "";
  position: absolute;
  inset: auto 22px 22px 22px;
  height: 78px;
  pointer-events: none;
  opacity: 0.38;
  background:
    linear-gradient(rgba(159,187,224,0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(159,187,224,0.09) 1px, transparent 1px);
  background-size: 26px 26px;
  transform: perspective(500px) rotateX(64deg);
  transform-origin: 50% 100%;
  mask-image: linear-gradient(180deg, transparent, rgba(0,0,0,0.9));
  -webkit-mask-image: linear-gradient(180deg, transparent, rgba(0,0,0,0.9));
}

.field-surface:hover {
  background:
    radial-gradient(ellipse 80% 48% at 50% 88%, rgba(159,187,224,0.10), transparent 70%),
    linear-gradient(180deg, rgba(10,16,25,0.98), rgba(3,6,10,0.98)),
    #000;
}

.field-surface span {
  position: relative;
  z-index: 1;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(159,187,224,0.66);
}

.field-surface h3 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: 0;
}

.field-surface p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: rgba(245,247,244,0.54);
  font-size: 13px;
  line-height: 1.68;
}

.field-surface em {
  position: relative;
  z-index: 1;
  margin-top: auto;
  font-family: var(--mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: rgba(245,247,244,0.36);
}

/* Sub-page split (copy + mockup) */
.sub-split {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.1fr);
  gap: clamp(48px, 7vw, 96px);
  align-items: center;
}
.sub-split__copy { min-width: 0; }
.sub-bul {
  list-style: none;
  margin: 24px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line);
}
.sub-bul li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.sub-bul li:last-child { border-bottom: none; }
.sub-bul b {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
}
.sub-bul span {
  font-size: 12.5px;
  color: var(--ink-dim);
  text-align: right;
  max-width: 60%;
}
.sub-mock { margin: 0; }
.sub-cross { border-top: 1px solid var(--line); }

/* Mock — shared product UI */
.op-mock {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #0a0b0f 0%, #050608 100%);
  border-radius: 6px;
  overflow: hidden;
}
.op-mock__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,0.012);
}
.op-mock__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
}
.op-mock__path {
  margin-left: 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}
.op-mock__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.op-mock__body--list { padding: 6px 14px 14px; gap: 0; }
.op-mock-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.op-mock-row:last-child { border-bottom: none; }
.op-mock-row p {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.4;
}
.op-mock-row__t {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}

.op-pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 2px;
  font-weight: 500;
}
.op-pill--c    { background: rgba(217,139,116,0.14); color: #D98B74; }
.op-pill--a    { background: rgba(127,163,224,0.14); color: #7FA3E0; }
.op-pill--r    { background: rgba(201,166,107,0.14); color: #C9A66B; }
.op-pill--i    { background: rgba(255,255,255,0.05); color: var(--ink-dim); }
.op-pill--type { background: rgba(159,187,224,0.1); color: var(--orbit); }

.op-mock__body--cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.op-stat-card {
  border: 1px solid var(--line);
  padding: 12px;
  background: rgba(255,255,255,0.012);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 76px;
  border-radius: 4px;
}
.op-stat-card p {
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.op-stat-card b {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}
.op-stat-card--block { color: #D98B74; border-color: rgba(217,139,116,0.18); background: rgba(217,139,116,0.04); }
.op-stat-card--warn  { color: #C9A66B; border-color: rgba(201,166,107,0.18); background: rgba(201,166,107,0.04); }
.op-stat-card--over  { color: #7FA3E0; border-color: rgba(127,163,224,0.18); background: rgba(127,163,224,0.04); }
.op-stat-card--risk  { color: #9B8AE6; border-color: rgba(155,138,230,0.18); background: rgba(155,138,230,0.04); }

.op-mock__body--qa { padding: 4px; }
.op-qa__q {
  margin: 0;
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.5;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.op-qa__q b { color: var(--orbit); margin-right: 6px; font-weight: 500; }
.op-qa__a {
  margin: 12px 0;
  font-size: 12.5px;
  color: var(--ink-dim);
  line-height: 1.65;
}
.op-qa__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.op-qa__chips span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  font-size: 11px;
  color: var(--ink-2);
  background: rgba(255,255,255,0.012);
  border-radius: 3px;
}
.op-qa__chips span i {
  font-style: normal;
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--orbit);
}
.op-qa__chips span em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--ink-muted);
}
.op-qa__chips--lit {
  border-color: rgba(159,187,224,0.28) !important;
  background: rgba(159,187,224,0.05) !important;
  color: var(--ink) !important;
}

.op-mock-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.op-mock-metrics > div {
  padding: 10px 12px;
  border-right: 1px solid var(--line);
  background: rgba(255,255,255,0.01);
}
.op-mock-metrics > div:last-child { border-right: none; }
.op-mock-metrics p {
  margin: 0 0 5px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  text-transform: uppercase;
}
.op-mock-metrics b {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}

/* CTA */
.op-cta {
  position: relative;
  padding: clamp(96px, 13vw, 150px) var(--pad);
  background: #000;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.op-cta::before { display: none; }
.op-cta__inner {
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
}
.op-cta__h {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 300;
  line-height: 1.18;
  letter-spacing: -0.018em;
  margin: 0 0 16px;
  color: #fff;
}
.op-cta__p {
  font-size: 14px;
  color: rgba(255,255,255,0.28);
  line-height: 1.8;
  margin: 0 0 28px;
}
.op-cta__row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Responsive */
@media (max-width: 1024px) {
  .op-grid--3 { grid-template-columns: 1fr; }
  .op-grid--2 { grid-template-columns: 1fr; }
  .op-steps   { grid-template-columns: repeat(2, 1fr); }
  .op-steps li:nth-child(2n) { border-right: none; }
  .field-demo-grid,
  .field-surface-grid {
    grid-template-columns: 1fr 1fr;
  }
  .field-demo-panel--active {
    grid-column: 1 / -1;
    min-height: 340px;
  }
  .sub-split  { grid-template-columns: 1fr; }
  .mega__inner--product {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
  .mega__col--brand {
    grid-column: 1 / -1;
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding-right: 0;
    padding-bottom: 20px;
  }
}

@media (max-width: 720px) {
  .op-hero__canvas {
    width: 130%;
    right: -25%;
    opacity: 0.4;
  }
  .orbit-field-hero__grid {
    left: 18%;
    right: -72%;
    top: 31%;
    bottom: -30%;
    opacity: var(--field-grid-opacity);
    background-size: 58px 58px, 58px 58px, 232px 232px, 232px 232px, 100% 100%, 100% 100%;
  }
  .orbit-field-hero__horizon {
    left: 16%;
    right: -14%;
  }
  .op-steps { grid-template-columns: 1fr; }
  .op-steps li:nth-child(n) { border-right: none; }
  .field-demo-grid,
  .field-surface-grid {
    grid-template-columns: 1fr;
  }
  .field-demo-panel,
  .field-demo-panel--active {
    grid-column: auto;
    min-height: 310px;
  }
  .field-signal-strip {
    gap: 10px;
  }
  .field-signal-strip i {
    width: 20px;
  }
  .op-mock__body--cards { grid-template-columns: repeat(2, 1fr); }
  .op-mock-metrics { grid-template-columns: repeat(2, 1fr); }
  .op-mock-metrics > div:nth-child(2n) { border-right: none; }
  .subnav__inner { gap: 16px; }
  .subnav__brand { display: none; }
  .op-list__row { grid-template-columns: 24px 1fr; }
  .op-list__more { display: none; }
  .guide-article {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .guide-article a {
    justify-self: start;
  }
}

/* =========================================================
   COMPASS — logo mark + hero visual
   /\이 컴퍼스(원 그리는 도구). 회전하면서 궤도를 그림.
   ========================================================= */

/* Nav mark — subtle idle rocking */
.compass-mark {
  overflow: visible;
}
.compass-mark__arms {
  transform-origin: 12px 3.4px;
  animation: compass-rock 7s ease-in-out infinite;
}
.compass-mark__arc {
  transform-origin: 12px 13.6px;
  animation: compass-arc-draw 7s ease-in-out infinite;
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
}
@keyframes compass-rock {
  0%, 100% { transform: rotate(-9deg); }
  50%      { transform: rotate(9deg); }
}
@keyframes compass-arc-draw {
  0%, 100% { stroke-dashoffset: 22; }
  50%      { stroke-dashoffset: 0; }
}
.nav__brand:hover .compass-mark__arms {
  animation-duration: 3s;
}
@media (prefers-reduced-motion: reduce) {
  .compass-mark__arms,
  .compass-mark__arc {
    animation: none;
  }
  .compass-mark__arc {
    stroke-dashoffset: 0;
  }
}

/* =========================================================
   HERO COMPASS — cinematic compass drawing the orbit
   Sequence:
     0.0s  컴퍼스 정지 (pre-roll)
     0.5s  → 1.6s entrance: fade-in + scale 0.94→1.0
     2.1s  → 16.1s FIRST LAP: pen draws ring with ease-in-out
                 (천천히 시작 → 가속 → 천천히 끝, 시네마틱)
     16.1s+ continuous linear spin — ring 영구 유지 + 미묘한 pulse
   No opacity-reset jumps. Lead glow is fade-once + forever held.
   ========================================================= */
.hero-compass {
  position: absolute;
  right: -4%;
  top: 50%;
  transform: translateY(-50%) scale(0.94);
  width: 66%;
  max-width: 780px;
  aspect-ratio: 1 / 1;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 0 90px rgba(159,187,224,0.18));
  opacity: 0;
  animation: hero-compass-enter 1.6s 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes hero-compass-enter {
  from { opacity: 0; transform: translateY(-50%) scale(0.94); }
  to   { opacity: 1; transform: translateY(-50%) scale(1); }
}

/* COMPASS body + RING — controlled entirely by JS via requestAnimationFrame
   for SMOOTH, JUMP-FREE motion across all phases (ramp → linear → infinite).
   CSS only sets the initial state; JS drives `transform` and `stroke-dashoffset`
   in lockstep so the pen and the drawn ring are always perfectly synced. */
.hero-compass__body {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transform: rotate(0deg);
}
.hero-compass__ring,
.hero-compass__ring-glow {
  stroke-dasharray: 854.5;
  stroke-dashoffset: 854.5;
}
/* Once the ring is fully drawn, JS adds .is-drawn — start subtle breathing */
.hero-compass__ring.is-drawn {
  animation: hero-compass-pulse 7s ease-in-out infinite;
}
.hero-compass__ring-glow.is-drawn {
  animation: hero-compass-glow-pulse 7s ease-in-out infinite;
}
@keyframes hero-compass-pulse {
  0%, 100% { stroke-opacity: 1; }
  50%      { stroke-opacity: 0.74; }
}
@keyframes hero-compass-glow-pulse {
  0%, 100% { stroke-opacity: 1; }
  50%      { stroke-opacity: 0.58; }
}

/* PEN tip core + glow — gentle breathing so the "drawing" point feels alive */
.hero-compass__pen-glow {
  animation: hero-compass-pen-breathe 4.5s 2.4s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.hero-compass__pen-core {
  animation: hero-compass-pen-core-breathe 4.5s 2.4s ease-in-out infinite;
}
@keyframes hero-compass-pen-breathe {
  0%, 100% { opacity: 0.78; }
  50%      { opacity: 1; }
}
@keyframes hero-compass-pen-core-breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.85; }
}

/* LEAD glow — fades in ONCE with the compass start, held permanently.
   No more 14s reset (this was the source of the "갑자기 뚝" jump). */
.hero-compass__lead {
  opacity: 0;
  animation: hero-compass-lead-on 2.4s 2.4s ease-out forwards;
}
@keyframes hero-compass-lead-on {
  from { opacity: 0; }
  to   { opacity: 0.82; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-compass { animation: none; opacity: 1; transform: translateY(-50%); }
  .hero-compass__body, .hero-compass__ring, .hero-compass__ring-glow,
  .hero-compass__lead, .hero-compass__pen-glow, .hero-compass__pen-core {
    animation: none;
  }
  .hero-compass__ring, .hero-compass__ring-glow { stroke-dashoffset: 0; }
  .hero-compass__lead { opacity: 0.82; }
}

/* WebGL canvas — atmospheric Orbit hero, restrained and non-starry */
.is-orbit .op-hero__canvas {
  right: -44%;
  width: 136%;
  height: 138%;
  opacity: 0.10;
  filter: saturate(0.14) contrast(0.94) brightness(0.52) blur(1px);
}

.orbit-field-bridge {
  --bridge-scroll: 0;
  --bridge-tilt: 63deg;
  --bridge-y: -5%;
  --bridge-scale: 1;
  --bridge-floor-tilt: 61deg;
  --bridge-floor-y: -120px;
  --bridge-floor-scale: 1.24;
  position: relative;
  scroll-margin-top: calc(var(--nav-h) + 56px);
  min-height: calc(100vh - var(--nav-h));
  background:
    radial-gradient(ellipse 82% 58% at 60% 46%, rgba(238,241,235,0.078), transparent 68%),
    radial-gradient(ellipse 72% 44% at 58% 82%, rgba(90,98,98,0.12), transparent 72%),
    linear-gradient(180deg, #000 0%, #010204 64%, #000 100%);
  margin-top: -1px;
  padding: 0 0 clamp(48px, 5vw, 72px);
  overflow: hidden;
}

.orbit-field-bridge::before,
.orbit-field-bridge::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.orbit-field-bridge::before {
  left: -10vw;
  right: -18vw;
  top: -6%;
  bottom: -22%;
  z-index: 0;
  opacity: 0.72;
  transform:
    perspective(1120px)
    rotateX(var(--bridge-tilt))
    translateY(var(--bridge-y))
    scale(var(--bridge-scale));
  transform-origin: 50% 68%;
  background:
    linear-gradient(rgba(238,241,235,0.42) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238,241,235,0.36) 1px, transparent 1px),
    linear-gradient(rgba(245,247,244,0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,247,244,0.14) 1px, transparent 1px);
  background-size: 74px 74px, 74px 74px, 296px 296px, 296px 296px;
  mask-image: radial-gradient(ellipse 82% 68% at 52% 50%, rgba(0,0,0,0.96) 0%, rgba(0,0,0,0.72) 56%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 82% 68% at 52% 50%, rgba(0,0,0,0.96) 0%, rgba(0,0,0,0.72) 56%, transparent 100%);
  filter: drop-shadow(0 0 28px rgba(238,241,235,0.10));
  animation: orbit-field-floor-unfold 1500ms cubic-bezier(0.16, 0.82, 0.18, 1) both;
}

.orbit-field-bridge::after {
  right: -18vw;
  top: clamp(74px, 12vh, 150px);
  z-index: 0;
  width: min(112vw, 1500px);
  height: clamp(280px, 34vw, 520px);
  border: 1px solid rgba(238,241,235,0.15);
  border-radius: 50%;
  opacity: 0.44;
  transform: rotate(-2deg);
  box-shadow:
    0 0 0 62px rgba(238,241,235,0.032),
    0 0 0 146px rgba(238,241,235,0.020),
    0 0 0 248px rgba(238,241,235,0.012),
    0 0 94px rgba(238,241,235,0.075);
}

@keyframes orbit-field-floor-unfold {
  0% {
    opacity: 0;
    clip-path: inset(46% 46% 46% 46%);
    transform: perspective(1080px) rotateX(68deg) translateY(18px) scaleX(0.86);
    filter: blur(2px) drop-shadow(0 0 0 rgba(159,187,224,0));
  }
  42% {
    opacity: 0.50;
    clip-path: inset(16% 18% 18% 18%);
  }
  100% {
    opacity: 0.72;
    clip-path: inset(0 0 0 0);
    transform: perspective(1120px) rotateX(var(--bridge-tilt)) translateY(var(--bridge-y)) scale(var(--bridge-scale));
    filter: blur(0) drop-shadow(0 0 28px rgba(238,241,235,0.10));
  }
}

.orbit-field-bridge__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 0;
}

.orbit-field-bridge .orbit-scroll-field {
  margin-top: 0;
  width: 100%;
  min-height: calc(100vh - var(--nav-h));
  opacity: 1;
  transform: none;
}

.guide-entry__media.orbit-scroll-field,
.guide-entry__media--stage.orbit-scroll-field {
  border-radius: 0;
  background: transparent;
  min-height: calc(100vh - var(--nav-h));
}

.guide-entry__media.orbit-scroll-field .orbit-scroll-field__canvas,
.guide-entry__media.orbit-scroll-field .guide-stage {
  background: transparent;
  min-height: calc(100vh - var(--nav-h));
}

.orbit-field-bridge .orbit-scroll-field__canvas {
  transform: translateY(-8vh) scale(1.22);
  transform-origin: 50% 50%;
  opacity: 1;
  filter: brightness(1.08);
}

.orbit-field-bridge .orbit-scroll-field__plane {
  left: -10vw;
  right: -10vw;
  top: -18%;
  bottom: -10%;
  z-index: 4;
  background:
    linear-gradient(rgba(238,241,235,0.42) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238,241,235,0.36) 1px, transparent 1px);
  background-size: 72px 72px;
  filter:
    drop-shadow(0 0 22px rgba(238,241,235,0.12))
    drop-shadow(0 0 64px rgba(238,241,235,0.05));
}

.orbit-field-bridge .orbit-scroll-field__canvas {
  min-height: calc(100vh - var(--nav-h));
}

.orbit-scroll-field {
  --field-accent: rgba(238,241,235,0.68);
  --field-accent-soft: rgba(238,241,235,0.16);
  margin: clamp(42px, 7vw, 88px) auto 0;
  width: min(100%, 1120px);
  min-height: clamp(360px, 34vw, 560px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(ellipse 74% 58% at 61% 44%, rgba(238,241,235,0.045), transparent 78%),
    transparent;
  box-shadow: none;
  opacity: 0;
  transform: translateY(28px);
  transform-origin: 50% 50%;
  transition: none;
  will-change: opacity, transform;
}

.orbit-scroll-field.is-in-view {
  opacity: 1 !important;
  transform: none !important;
}

.guide-entry__media.orbit-scroll-field::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 80% at 54% 48%, transparent 45%, rgba(0,0,0,0.28) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.18), transparent 35%, rgba(0,0,0,0.26));
  z-index: 2;
}

.guide-entry__media.orbit-scroll-field::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 50%;
  height: 1px;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  transform: scaleX(0.08);
  transform-origin: 50% 50%;
  background: linear-gradient(90deg, transparent, rgba(159,187,224,0.10), rgba(210,225,245,0.42), rgba(159,187,224,0.10), transparent);
  filter: drop-shadow(0 0 8px rgba(159,187,224,0.14));
}

.orbit-scroll-field.is-opening::after,
.orbit-scroll-field.is-in-view::after {
  animation: orbit-field-unfold-scan 1340ms cubic-bezier(0.18, 0.86, 0.18, 1) 120ms both;
}

@keyframes orbit-field-unfold-scan {
  0% {
    opacity: 0;
    transform: scaleX(0.12) translateY(16px);
  }
  38% {
    opacity: 0.78;
    transform: scaleX(0.78) translateY(0);
  }
  76% {
    opacity: 0.34;
    transform: scaleX(1) translateY(0);
  }
  100% {
    opacity: 0;
    transform: scaleX(1) translateY(-2px);
  }
}

.orbit-scroll-field__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: clamp(360px, 34vw, 560px);
  opacity: 0.58;
  filter: brightness(0.92);
  mix-blend-mode: screen;
  transition: none;
  will-change: filter, opacity;
}

.orbit-scroll-field.is-in-view .orbit-scroll-field__canvas {
  filter: brightness(1) !important;
  opacity: 1 !important;
}

.orbit-scroll-field__floor {
  position: absolute;
  left: -14vw;
  right: -18vw;
  top: -34%;
  bottom: -18%;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transform: perspective(940px) rotateX(70deg) translate3d(0, 36px, 0) scale(0.90);
  transform-origin: 50% 72%;
  background:
    linear-gradient(rgba(238,241,235,0.38) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238,241,235,0.34) 1px, transparent 1px),
    linear-gradient(rgba(245,247,244,0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,247,244,0.16) 1px, transparent 1px);
  background-size: 72px 72px, 72px 72px, 288px 288px, 288px 288px;
  background-position: center center;
  mask-image:
    radial-gradient(ellipse 76% 62% at 53% 48%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.88) 55%, rgba(0,0,0,0.32) 78%, transparent 100%);
  -webkit-mask-image:
    radial-gradient(ellipse 76% 62% at 53% 48%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.88) 55%, rgba(0,0,0,0.32) 78%, transparent 100%);
  filter:
    drop-shadow(0 0 24px rgba(238,241,235,0.13))
    drop-shadow(0 0 78px rgba(238,241,235,0.05));
  mix-blend-mode: screen;
  will-change: opacity, transform, background-position;
}

.orbit-scroll-field.is-opening .orbit-scroll-field__floor,
.orbit-scroll-field.is-in-view .orbit-scroll-field__floor {
  animation: orbit-field-floor-breathe 5200ms ease-in-out infinite;
}

.orbit-scroll-field.is-in-view .orbit-scroll-field__floor {
  opacity: 1 !important;
  transform:
    perspective(980px)
    rotateX(var(--bridge-floor-tilt))
    translate3d(0, var(--bridge-floor-y), 0)
    scale(var(--bridge-floor-scale)) !important;
}

.orbit-field-bridge .orbit-scroll-field__floor {
  opacity: 1;
  transform:
    perspective(980px)
    rotateX(var(--bridge-floor-tilt))
    translate3d(0, var(--bridge-floor-y), 0)
    scale(var(--bridge-floor-scale));
  animation: orbit-field-floor-breathe 5200ms ease-in-out infinite;
}

.orbit-scroll-field__floor::before,
.orbit-scroll-field__floor::after,
.orbit-scroll-field__horizon,
.orbit-scroll-field__star {
  content: "";
  position: absolute;
  pointer-events: none;
}

.orbit-scroll-field__floor::before {
  left: 14%;
  right: 11%;
  top: 31%;
  height: 34%;
  border: 1px solid rgba(216,227,240,0.24);
  border-radius: 50%;
  box-shadow:
    0 0 0 34px rgba(177,203,232,0.035),
    0 0 0 84px rgba(177,203,232,0.024),
    inset 0 0 32px rgba(245,247,244,0.060),
    0 0 58px rgba(177,203,232,0.12);
}

.orbit-scroll-field__floor::after {
  left: 31%;
  right: 27%;
  top: 42%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(245,247,244,0.56), rgba(177,203,232,0.74), rgba(245,247,244,0.50), transparent);
  box-shadow:
    0 0 18px rgba(245,247,244,0.18),
    0 0 42px rgba(177,203,232,0.16);
}

.orbit-scroll-field__horizon {
  left: 8%;
  right: 8%;
  top: 26%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(177,203,232,0.30), rgba(245,247,244,0.22), transparent);
  opacity: 0.68;
}

.orbit-scroll-field__star {
  --star-x: 0px;
  --star-y: 0px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(245,247,244,0.86);
  box-shadow:
    0 0 12px rgba(245,247,244,0.54),
    0 0 30px rgba(177,203,232,0.34);
  opacity: 0.96;
  animation: orbit-field-star-drift 4800ms ease-in-out infinite;
}

.orbit-scroll-field__star--a { left: 22%; top: 35%; width: 7px; height: 7px; animation-delay: -400ms; }
.orbit-scroll-field__star--b { left: 40%; top: 45%; width: 5px; height: 5px; animation-delay: -1600ms; }
.orbit-scroll-field__star--c { left: 57%; top: 32%; width: 7px; height: 7px; animation-delay: -2400ms; }
.orbit-scroll-field__star--d { left: 72%; top: 52%; width: 5px; height: 5px; animation-delay: -900ms; }
.orbit-scroll-field__star--e { left: 34%; top: 60%; width: 4px; height: 4px; opacity: 0.72; animation-delay: -3000ms; }
.orbit-scroll-field__star--f { left: 83%; top: 41%; width: 4px; height: 4px; opacity: 0.66; animation-delay: -2100ms; }

@keyframes orbit-field-floor-breathe {
  0%, 100% { background-position: center center, center center, center center, center center; }
  50% { background-position: 0 18px, 18px 0, 0 44px, 44px 0; }
}

@keyframes orbit-field-star-drift {
  0%, 100% { transform: translate3d(var(--star-x), var(--star-y), 0) scale(1); opacity: 0.62; }
  42% { transform: translate3d(calc(var(--star-x) + 11px), calc(var(--star-y) - 10px), 0) scale(1.22); opacity: 0.96; }
  72% { transform: translate3d(calc(var(--star-x) - 5px), calc(var(--star-y) + 6px), 0) scale(0.92); opacity: 0.72; }
}

.orbit-scroll-field__details {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.orbit-scroll-field__plane {
  position: absolute;
  left: 2%;
  right: 2%;
  top: -2%;
  bottom: 12%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.46;
  transform: perspective(980px) rotateX(62deg) translateY(-44px);
  transform-origin: 50% 78%;
  background:
    linear-gradient(rgba(159,187,224,0.42) 1px, transparent 1px),
    linear-gradient(90deg, rgba(159,187,224,0.42) 1px, transparent 1px);
  background-size: 66px 66px;
  mask-image:
    radial-gradient(ellipse 78% 65% at 50% 44%, rgba(0,0,0,0.92) 0%, transparent 100%);
  -webkit-mask-image:
    radial-gradient(ellipse 78% 65% at 50% 44%, rgba(0,0,0,0.92) 0%, transparent 100%);
  filter: drop-shadow(0 0 28px rgba(100,155,210,0.28));
  will-change: opacity, transform;
}

.orbit-scroll-field__plane::before,
.orbit-scroll-field__plane::after,
.orbit-scroll-field__plane-core {
  content: "";
  position: absolute;
  pointer-events: none;
}

.orbit-scroll-field__plane::before {
  left: 8%;
  right: 8%;
  top: 42%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245,247,244,0.28), rgba(140,190,240,0.52), rgba(245,247,244,0.28), transparent);
  box-shadow: 0 0 20px rgba(140,190,240,0.18);
}

.orbit-scroll-field__plane::after {
  left: 18%;
  right: 18%;
  top: 25%;
  height: 42%;
  border: 1px solid rgba(140,190,240,0.28);
  border-radius: 50%;
  box-shadow:
    0 0 28px rgba(140,190,240,0.14),
    inset 0 0 24px rgba(140,190,240,0.08);
}

.orbit-scroll-field__plane-core {
  left: 50%;
  top: 40%;
  width: clamp(120px, 22vw, 280px);
  height: 1px;
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg, transparent, rgba(245,247,244,0.35), rgba(140,190,240,0.60), rgba(245,247,244,0.35), transparent);
  box-shadow:
    0 0 16px rgba(245,247,244,0.18),
    0 0 42px rgba(140,190,240,0.14);
}

.orbit-scroll-field__detail,
.orbit-scroll-field__node {
  position: absolute;
  display: block;
  opacity: 0;
  transition: none;
  will-change: opacity, transform;
}

.orbit-scroll-field__detail {
  width: clamp(72px, 8vw, 124px);
  height: 18px;
  border-top: 1px solid var(--field-accent-soft);
  border-bottom: 1px solid rgba(245,247,244,0.05);
  transform: translateY(12px);
  transform-origin: 50% 50%;
}

.orbit-scroll-field__detail::before,
.orbit-scroll-field__detail::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 2px;
  height: 2px;
  background: var(--field-accent-soft);
  transform: translateY(-50%);
}

.orbit-scroll-field__detail::before { left: 0; }
.orbit-scroll-field__detail::after { right: 0; }

.orbit-scroll-field__detail--a {
  left: 11%;
  top: 31%;
  transition-delay: 180ms;
}

.orbit-scroll-field__detail--b {
  right: 12%;
  top: 37%;
  width: clamp(58px, 6vw, 96px);
  transition-delay: 260ms;
}

.orbit-scroll-field__detail--c {
  left: 46%;
  bottom: 23%;
  width: clamp(86px, 9vw, 142px);
  transition-delay: 340ms;
}

.orbit-scroll-field__node {
  width: 8px;
  height: 8px;
  border: 1px solid rgba(220,232,245,0.54);
  border-radius: 50%;
  background: rgba(226,236,246,0.58);
  box-shadow:
    0 0 12px rgba(245,247,244,0.32),
    0 0 28px rgba(159,187,224,0.28);
  transform: translateY(12px);
}

.orbit-scroll-field__node::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(245,247,244,0.24), rgba(159,187,224,0.12) 34%, transparent 70%);
  pointer-events: none;
}

.orbit-scroll-field__node--a {
  right: 24%;
  top: 29%;
  transition-delay: 420ms;
}

.orbit-scroll-field__node--b {
  left: 26%;
  bottom: 32%;
  transition-delay: 500ms;
}

.orbit-scroll-field.is-in-view .orbit-scroll-field__detail {
  opacity: 0.36 !important;
  transform: none !important;
}

.orbit-scroll-field.is-in-view .orbit-scroll-field__node {
  opacity: 0.52 !important;
  transform: none !important;
}

.orbit-field-bridge__story {
  position: absolute;
  top: clamp(84px, 11vh, 142px);
  left: clamp(28px, 5vw, 70px);
  z-index: 6;
  width: min(360px, 42vw);
  height: auto;
  opacity: 0.96;
  transform: none;
  color: rgba(245,247,244,0.94);
  pointer-events: none;
  transition: none;
}

.orbit-field-bridge__story span {
  display: block;
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(159,187,224,0.62);
}

.orbit-field-bridge__story strong {
  display: block;
  font-size: clamp(22px, 2.7vw, 34px);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: 0;
}

.orbit-field-bridge__story p {
  margin: 14px 0 0;
  max-width: 34ch;
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(245,247,244,0.54);
}

.orbit-scroll-field__caption {
  position: absolute;
  left: clamp(22px, 4vw, 52px);
  bottom: clamp(20px, 3.5vw, 44px);
  z-index: 3;
  display: flex;
  align-items: baseline;
  gap: 18px;
  color: rgba(245,247,244,0.92);
  opacity: 0;
  transform: translateY(20px);
  transition: none;
}

.orbit-field-bridge .orbit-scroll-field__caption {
  opacity: 1;
  transform: none;
}

.orbit-scroll-field.is-in-view .orbit-scroll-field__caption {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.orbit-scroll-field .orbit-scroll-field__caption span {
  font-size: clamp(22px, 3.1vw, 42px);
  font-weight: 500;
  letter-spacing: 0;
}

.orbit-scroll-field .orbit-scroll-field__caption small {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: rgba(159,187,224,0.58);
}

/* Mark current product feature in mega panel */
.mega__feature--current {
  position: relative;
}
.mega__feature--current::after {
  content: "현재";
  position: absolute;
  top: 0;
  right: 0;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--orbit);
  background: rgba(159,187,224,0.1);
  padding: 2px 6px;
  border-radius: 2px;
  text-transform: uppercase;
}

/* Responsive — hide hero compass on small */
@media (max-width: 720px) {
  .hero-compass {
    width: 90%;
    right: -10%;
    opacity: 0.55;
  }
  .is-orbit .op-hero__canvas {
    right: -72%;
    width: 188%;
    height: 132%;
    opacity: 0.08;
    filter: saturate(0.24) contrast(0.94) brightness(0.58) blur(0.8px);
  }
  .is-orbit .op-hero__fade {
    background:
      linear-gradient(90deg, rgba(0,0,0,0.96) 0%, rgba(0,0,0,0.78) 62%, rgba(0,0,0,0.32) 100%),
      linear-gradient(180deg, rgba(0,0,0,0.30) 0%, transparent 42%, rgba(0,0,0,0.70) 100%);
  }

  .orbit-scroll-field {
    min-height: 330px;
    margin-top: 42px;
    transform: translateY(24px);
  }

  .orbit-field-bridge {
    min-height: calc(100vh - var(--nav-h));
    padding-top: 0;
    padding-bottom: 28px;
  }

  .orbit-field-bridge::before {
    left: -22%;
    right: -44%;
    top: 8%;
    bottom: -10%;
    background-size: 54px 54px, 54px 54px, 216px 216px, 216px 216px;
    opacity: 0.40;
  }

  .orbit-field-bridge::after {
    right: -76%;
    top: 24%;
    width: 160vw;
    height: 34vh;
    opacity: 0.36;
  }

  .orbit-field-bridge .orbit-scroll-field {
    min-height: calc(100vh - var(--nav-h));
    margin-top: 0;
  }

  .orbit-scroll-field__canvas {
    min-height: 330px;
  }

  .orbit-field-bridge .orbit-scroll-field__canvas {
    min-height: calc(100vh - var(--nav-h));
  }

  .orbit-scroll-field__floor {
    left: -62%;
    right: -74%;
    top: 4%;
    bottom: -18%;
    background-size: 52px 52px, 52px 52px, 208px 208px, 208px 208px;
  }

  .orbit-field-bridge .orbit-scroll-field__floor,
  .orbit-scroll-field.is-in-view .orbit-scroll-field__floor {
    transform: perspective(940px) rotateX(61deg) translate3d(0, -54px, 0) scale(1.06) !important;
  }

  .orbit-scroll-field__plane {
    left: 2%;
    right: 2%;
    top: 8%;
    bottom: 22%;
    background-size: 48px 48px;
  }

  .orbit-field-bridge__story {
    left: 20px;
    right: 20px;
    top: calc(var(--nav-h) + 82px);
    width: auto;
    transform: translateY(88px);
  }

  .orbit-field-bridge__story strong {
    max-width: 13ch;
  }

  .orbit-scroll-field__caption {
    left: 18px;
    bottom: 18px;
    gap: 12px;
  }

  .orbit-scroll-field__detail--a { left: 7%; top: 28%; }
  .orbit-scroll-field__detail--b { right: 7%; top: 34%; }
  .orbit-scroll-field__detail--c { left: 40%; bottom: 26%; }
}

@media (prefers-reduced-motion: reduce) {
  .orbit-scroll-field,
  .orbit-scroll-field .guide-stage,
  .orbit-scroll-field__caption,
  .orbit-scroll-field__floor,
  .orbit-scroll-field__star,
  .orbit-scroll-field__plane,
  .orbit-scroll-field__detail,
  .orbit-scroll-field__node {
    animation: none !important;
    transition: none !important;
  }

  .orbit-scroll-field {
    opacity: 1;
    transform: none;
  }

  .orbit-scroll-field__canvas {
    opacity: 1;
    filter: brightness(1);
  }

  .orbit-scroll-field__caption,
  .orbit-scroll-field__floor,
  .orbit-scroll-field__plane,
  .orbit-scroll-field__detail,
  .orbit-scroll-field__node {
    opacity: 1;
    transform: none;
  }
}

/* Orbit page refinement: Safari-friendly orbit + Field system */
.is-orbit .op-hero {
  background:
    radial-gradient(ellipse 62% 50% at 76% 48%, rgba(238,241,235,0.080), transparent 72%),
    linear-gradient(180deg, #000 0%, #010101 100%);
}

.is-orbit .orbit-field-hero {
  display: block;
}

.is-orbit .op-hero__bg::before {
  content: "";
  position: absolute;
  left: auto;
  right: 17%;
  top: 47%;
  bottom: auto;
  z-index: 4;
  width: 13px;
  height: 13px;
  pointer-events: none;
  opacity: 0.92;
  border-radius: 50%;
  clip-path: none;
  transform: translate3d(0, 0, 0);
  background: rgba(245,247,244,0.94);
  box-shadow:
    0 0 16px rgba(245,247,244,0.68),
    0 0 46px rgba(176,220,187,0.34),
    -170px 52px 0 -4px rgba(245,247,244,0.58),
    -330px -38px 0 -5px rgba(210,226,216,0.46),
    -460px 96px 0 -6px rgba(245,247,244,0.34);
  animation: orbit-node-float 6200ms ease-in-out infinite;
}

.is-orbit .op-hero__bg::after {
  right: -14%;
  top: 15%;
  z-index: 2;
  width: min(108vw, 1440px);
  height: clamp(320px, 39vw, 560px);
  opacity: 0.26;
  border-color: rgba(238,241,235,0.22);
  background:
    radial-gradient(ellipse at 58% 54%, rgba(238,241,235,0.105), transparent 45%),
    linear-gradient(90deg, transparent 12%, rgba(238,241,235,0.16), transparent 76%);
  box-shadow:
    0 0 0 54px rgba(238,241,235,0.026),
    0 0 0 132px rgba(238,241,235,0.016),
    inset 0 0 54px rgba(245,247,244,0.045);
  -webkit-mask-image: none;
  mask-image: none;
  mix-blend-mode: normal;
  animation: orbit-hero-ring-presence 7800ms ease-in-out infinite;
}

.is-orbit .op-hero__canvas {
  right: -22%;
  top: 50%;
  z-index: 2;
  width: 122%;
  height: 126%;
  opacity: 0.58;
  filter: saturate(0) contrast(1.08) brightness(1.02);
}

.orbit-hero-system {
  position: absolute;
  right: -1vw;
  top: 8vh;
  z-index: 4;
  width: min(70vw, 980px);
  height: min(62vh, 620px);
  pointer-events: none;
  transform: translate3d(0, 0, 0) rotate(-1.5deg);
  transform-origin: 62% 52%;
  opacity: 0;
  animation: orbit-system-arrive 1200ms cubic-bezier(0.16, 0.78, 0.18, 1) 180ms forwards;
}

.orbit-hero-system__ring,
.orbit-hero-system__trace,
.orbit-hero-system__node {
  position: absolute;
  display: block;
  pointer-events: none;
}

.orbit-hero-system__ring {
  left: 6%;
  right: 0;
  top: 20%;
  height: 44%;
  border: 1px solid rgba(238,241,235,0.44);
  border-radius: 50%;
  box-shadow:
    inset 0 0 46px rgba(245,247,244,0.055),
    0 0 46px rgba(238,241,235,0.095);
  transform: rotate(-3deg);
}

.orbit-hero-system__ring--outer {
  left: -5%;
  right: -10%;
  top: 9%;
  height: 64%;
  opacity: 0.46;
}

.orbit-hero-system__ring--main {
  opacity: 0.94;
  border-color: rgba(245,247,244,0.48);
}

.orbit-hero-system__ring--inner {
  left: 24%;
  right: 18%;
  top: 31%;
  height: 28%;
  opacity: 0.72;
  border-color: rgba(210,226,216,0.40);
}

.orbit-hero-system__trace {
  left: 18%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245,247,244,0.50), rgba(190,220,199,0.58), transparent);
  transform-origin: 50% 50%;
  opacity: 0.70;
}

.orbit-hero-system__trace--a {
  top: 43%;
  transform: rotate(-9deg);
}

.orbit-hero-system__trace--b {
  top: 56%;
  left: 32%;
  right: 18%;
  transform: rotate(7deg);
  opacity: 0.44;
}

.orbit-hero-system__node {
  width: 7px;
  height: 7px;
  border: 1px solid rgba(245,247,244,0.72);
  background: rgba(245,247,244,0.90);
  box-shadow:
    0 0 18px rgba(245,247,244,0.64),
    0 0 48px rgba(190,220,199,0.38);
  transform: translate3d(0, 0, 0);
  animation: orbit-node-float 5600ms ease-in-out infinite;
}

.orbit-hero-system__node--a { right: 18%; top: 43%; width: 14px; height: 14px; animation-delay: -900ms; }
.orbit-hero-system__node--b { right: 31%; top: 53%; width: 9px; height: 9px; animation-delay: -2200ms; }
.orbit-hero-system__node--c { right: 50%; top: 38%; width: 7px; height: 7px; opacity: 0.86; animation-delay: -3400ms; }
.orbit-hero-system__node--d { right: 68%; top: 58%; width: 6px; height: 6px; opacity: 0.70; animation-delay: -1700ms; }

@keyframes orbit-system-arrive {
  0% {
    opacity: 0;
    transform: translate3d(38px, 12px, 0) rotate(-1.5deg) scale(0.965);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(-1.5deg) scale(1);
  }
}

@keyframes orbit-node-float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.62; }
  46% { transform: translate3d(-10px, -7px, 0) scale(1.18); opacity: 0.96; }
  74% { transform: translate3d(6px, 5px, 0) scale(0.94); opacity: 0.74; }
}

.is-orbit .op-hero__fade {
  z-index: 3;
  background:
    linear-gradient(90deg, #000 0%, rgba(0,0,0,0.93) 19%, rgba(0,0,0,0.54) 33%, rgba(0,0,0,0.07) 58%, transparent 100%),
    linear-gradient(180deg, rgba(0,0,0,0.08) 0%, transparent 56%, rgba(0,0,0,0.34) 100%);
}

.orbit-field-bridge {
  --field-green: rgba(176,220,187,0.62);
  --field-green-soft: rgba(176,220,187,0.15);
  background:
    radial-gradient(ellipse 74% 54% at 54% 36%, rgba(238,241,235,0.060), transparent 70%),
    radial-gradient(ellipse 74% 48% at 54% 82%, rgba(176,220,187,0.070), transparent 76%),
    linear-gradient(180deg, #000 0%, #010202 54%, #000 100%);
}

.orbit-field-bridge::before {
  opacity: 0.58;
  background:
    linear-gradient(rgba(238,241,235,0.26) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238,241,235,0.24) 1px, transparent 1px),
    linear-gradient(rgba(176,220,187,0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(176,220,187,0.10) 1px, transparent 1px);
  background-size: 82px 82px, 82px 82px, 328px 328px, 328px 328px;
  filter: none;
  animation: orbit-field-floor-unfold 1500ms cubic-bezier(0.16, 0.82, 0.18, 1) both;
}

.orbit-field-bridge::after {
  opacity: 0.28;
  border-color: rgba(238,241,235,0.18);
  box-shadow:
    0 0 0 58px rgba(238,241,235,0.026),
    0 0 0 138px rgba(238,241,235,0.015),
    0 0 74px rgba(176,220,187,0.050);
}

.orbit-field-bridge .orbit-scroll-field {
  isolation: isolate;
  background:
    radial-gradient(ellipse 70% 45% at 55% 50%, rgba(238,241,235,0.036), transparent 72%),
    transparent;
}

.orbit-field-bridge .orbit-scroll-field__canvas,
.orbit-scroll-field__canvas {
  display: none;
}

.guide-entry__media.orbit-scroll-field::before {
  z-index: 2;
  background:
    radial-gradient(ellipse 78% 72% at 55% 42%, transparent 36%, rgba(0,0,0,0.38) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.18), transparent 34%, rgba(0,0,0,0.30));
}

.orbit-field-bridge .orbit-scroll-field__floor,
.orbit-scroll-field.is-in-view .orbit-scroll-field__floor {
  filter: none !important;
  mix-blend-mode: normal;
  animation: none !important;
}

.orbit-scroll-field__floor {
  background:
    linear-gradient(rgba(238,241,235,0.30) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238,241,235,0.26) 1px, transparent 1px),
    linear-gradient(rgba(176,220,187,0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(176,220,187,0.12) 1px, transparent 1px);
  background-size: 82px 82px, 82px 82px, 328px 328px, 328px 328px;
}

.orbit-scroll-field__floor::before {
  border-color: rgba(238,241,235,0.22);
  box-shadow:
    0 0 0 32px rgba(238,241,235,0.024),
    0 0 0 82px rgba(176,220,187,0.024),
    inset 0 0 28px rgba(245,247,244,0.045);
}

.orbit-scroll-field__floor::after {
  background: linear-gradient(90deg, transparent, rgba(245,247,244,0.45), rgba(176,220,187,0.58), rgba(245,247,244,0.40), transparent);
  box-shadow:
    0 0 20px rgba(245,247,244,0.12),
    0 0 42px rgba(176,220,187,0.13);
}

.orbit-scroll-field__plane {
  opacity: 0.52;
  background:
    linear-gradient(rgba(176,220,187,0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(176,220,187,0.14) 1px, transparent 1px);
  filter: none;
}

.orbit-scroll-field__plane::before,
.orbit-scroll-field__plane-core {
  background: linear-gradient(90deg, transparent, rgba(245,247,244,0.30), rgba(176,220,187,0.46), rgba(245,247,244,0.30), transparent);
  box-shadow: none;
}

.orbit-scroll-field__plane::after {
  border-color: rgba(176,220,187,0.18);
  box-shadow: inset 0 0 20px rgba(176,220,187,0.05);
}

.orbit-scroll-field__star {
  background: rgba(245,247,244,0.82);
  box-shadow:
    0 0 12px rgba(245,247,244,0.38),
    0 0 28px rgba(176,220,187,0.24);
}

.orbit-scroll-field__route {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.orbit-scroll-field__route-line {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(176,220,187,0.34), rgba(245,247,244,0.26), transparent);
  transform-origin: 50% 50%;
  opacity: 0.55;
}

.orbit-scroll-field__route-line--a {
  left: 28%;
  right: 23%;
  top: 50%;
  transform: rotate(-10deg);
}

.orbit-scroll-field__route-line--b {
  left: 37%;
  right: 14%;
  top: 61%;
  transform: rotate(8deg);
  opacity: 0.36;
}

.orbit-scroll-field__packet {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 22px;
  padding: 0 10px;
  border: 1px solid rgba(238,241,235,0.18);
  color: rgba(245,247,244,0.64);
  background: rgba(0,0,0,0.34);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  transform: translate3d(0, 0, 0);
  animation: orbit-packet-drift 6200ms ease-in-out infinite;
}

.orbit-scroll-field__packet--a { left: 25%; top: 45%; animation-delay: -600ms; }
.orbit-scroll-field__packet--b { left: 52%; top: 54%; animation-delay: -2500ms; }
.orbit-scroll-field__packet--c { right: 20%; top: 61%; animation-delay: -4100ms; }

@keyframes orbit-packet-drift {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.42; }
  44% { transform: translate3d(16px, -10px, 0); opacity: 0.80; }
  72% { transform: translate3d(26px, 4px, 0); opacity: 0.56; }
}

.orbit-field-bridge__story {
  padding-left: 18px;
  border-left: 1px solid rgba(176,220,187,0.30);
  text-shadow: 0 18px 50px rgba(0,0,0,0.74);
}

.orbit-field-bridge__story::after {
  content: "source  /  field  /  run";
  display: block;
  width: max-content;
  margin-top: 18px;
  padding: 7px 10px;
  border: 1px solid rgba(238,241,235,0.12);
  color: rgba(176,220,187,0.62);
  background: rgba(0,0,0,0.28);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
}

.orbit-field-bridge__story span,
.orbit-scroll-field .orbit-scroll-field__caption small,
.field-demo-panel__k,
.field-surface span {
  color: rgba(176,220,187,0.62);
}

.field-demo-section,
#cycle.op-sec,
.field-surfaces-section,
.detail-how {
  position: relative;
  overflow: hidden;
}

.field-demo-section {
  background-image:
    radial-gradient(ellipse 65% 42% at 52% 0%, rgba(176,220,187,0.10) 0%, transparent 72%),
    linear-gradient(180deg, #000 0%, #010202 100%);
}

.field-demo-section::before,
#cycle.op-sec::before,
.field-surfaces-section::before,
.detail-how::before {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  top: 10%;
  height: 360px;
  pointer-events: none;
  opacity: 0.28;
  transform: perspective(940px) rotateX(66deg) translateY(36px);
  transform-origin: 50% 100%;
  background:
    linear-gradient(rgba(238,241,235,0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238,241,235,0.14) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: radial-gradient(ellipse 70% 62% at 50% 50%, #000 0%, rgba(0,0,0,0.62) 58%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 70% 62% at 50% 50%, #000 0%, rgba(0,0,0,0.62) 58%, transparent 100%);
}

.field-demo-grid,
.field-surface-grid {
  position: relative;
  z-index: 1;
  border-color: rgba(238,241,235,0.12);
  background: rgba(238,241,235,0.08);
}

.field-demo-panel {
  min-height: 360px;
  background:
    radial-gradient(ellipse 70% 42% at 50% 100%, rgba(176,220,187,0.050), transparent 74%),
    linear-gradient(180deg, rgba(7,10,10,0.98), rgba(2,4,4,0.98)),
    #000;
}

.field-demo-panel::before {
  opacity: 0.62;
  background:
    linear-gradient(rgba(238,241,235,0.050) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238,241,235,0.050) 1px, transparent 1px);
}

.field-demo-panel--active {
  background:
    radial-gradient(ellipse 76% 52% at 50% 62%, rgba(176,220,187,0.115), transparent 72%),
    linear-gradient(180deg, rgba(8,12,12,0.98), rgba(2,5,5,0.98)),
    #000;
}

.field-panel-stage {
  position: absolute;
  left: clamp(24px, 3vw, 34px);
  right: clamp(24px, 3vw, 34px);
  bottom: 104px;
  height: 92px;
  z-index: 1;
  border: 1px solid rgba(238,241,235,0.09);
  background:
    linear-gradient(rgba(176,220,187,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(176,220,187,0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  transform: perspective(680px) rotateX(64deg);
  transform-origin: 50% 100%;
}

.field-panel-stage::before,
.field-panel-stage::after,
.field-panel-stage span {
  content: "";
  position: absolute;
  display: block;
}

.field-panel-stage::before {
  left: 12%;
  right: 12%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(176,220,187,0.40), rgba(245,247,244,0.22), transparent);
}

.field-panel-stage::after {
  left: 38%;
  top: 22%;
  width: 70px;
  height: 34px;
  border: 1px solid rgba(238,241,235,0.15);
  background: rgba(238,241,235,0.028);
}

.field-panel-stage span {
  width: 7px;
  height: 7px;
  border: 1px solid rgba(238,241,235,0.45);
  background: rgba(176,220,187,0.28);
}

.field-panel-stage span:nth-child(1) { left: 18%; top: 44%; }
.field-panel-stage span:nth-child(2) { left: 48%; top: 31%; }
.field-panel-stage span:nth-child(3) { right: 18%; top: 58%; }

.field-demo-map {
  border-color: rgba(238,241,235,0.12);
  background:
    linear-gradient(rgba(176,220,187,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(176,220,187,0.06) 1px, transparent 1px);
  box-shadow: none;
}

.field-demo-map__line {
  background: linear-gradient(90deg, transparent, rgba(176,220,187,0.36), rgba(245,247,244,0.20), transparent);
}

.field-demo-map__node {
  border-color: rgba(245,247,244,0.56);
  background: rgba(176,220,187,0.24);
  box-shadow: 0 0 14px rgba(176,220,187,0.18);
}

.field-signal-strip {
  position: relative;
  z-index: 1;
  border-top-color: rgba(238,241,235,0.10);
  color: rgba(245,247,244,0.50);
}

.field-signal-strip i {
  background: linear-gradient(90deg, rgba(176,220,187,0.04), rgba(176,220,187,0.34), rgba(176,220,187,0.04));
}

.field-cycle li {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 42% at 50% 100%, rgba(176,220,187,0.055), transparent 76%),
    linear-gradient(180deg, rgba(238,241,235,0.020), transparent 60%);
}

.field-cycle li::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  height: 44px;
  opacity: 0.28;
  transform: perspective(420px) rotateX(66deg);
  transform-origin: 50% 100%;
  background:
    linear-gradient(rgba(176,220,187,0.20) 1px, transparent 1px),
    linear-gradient(90deg, rgba(176,220,187,0.16) 1px, transparent 1px);
  background-size: 22px 22px;
}

.field-surfaces-section {
  background-image:
    radial-gradient(ellipse 72% 52% at 50% 0%, rgba(176,220,187,0.095) 0%, transparent 72%),
    linear-gradient(180deg, #000 0%, #010202 100%);
}

.field-surface {
  background:
    radial-gradient(ellipse 72% 45% at 50% 100%, rgba(176,220,187,0.040), transparent 76%),
    linear-gradient(180deg, rgba(7,10,10,0.98), rgba(2,4,4,0.98)),
    #000;
}

.field-surface::before {
  opacity: 0.42;
  background:
    linear-gradient(rgba(176,220,187,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(176,220,187,0.07) 1px, transparent 1px);
}

.field-surface::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 58px;
  height: 1px;
  opacity: 0.34;
  background: linear-gradient(90deg, transparent, rgba(176,220,187,0.40), transparent);
}

.field-surface:hover {
  background:
    radial-gradient(ellipse 80% 48% at 50% 88%, rgba(176,220,187,0.090), transparent 70%),
    linear-gradient(180deg, rgba(8,12,12,0.98), rgba(2,5,5,0.98)),
    #000;
}

@media (max-width: 720px) {
  .orbit-hero-system {
    right: -34vw;
    top: 22vh;
    width: 126vw;
    height: 42vh;
    opacity: 0.70;
  }

  .is-orbit .op-hero__canvas {
    right: -68%;
    width: 182%;
    opacity: 0.30;
  }

  .orbit-field-bridge__story {
    width: auto;
    border-left-color: rgba(176,220,187,0.22);
  }

  .orbit-scroll-field__packet {
    min-width: 38px;
    height: 19px;
    font-size: 8.5px;
  }

  .field-panel-stage {
    bottom: 112px;
    height: 74px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .orbit-hero-system,
  .orbit-hero-system__node,
  .orbit-scroll-field__packet {
    animation: none !important;
    opacity: 1;
  }
}

/* =========================================================
   PRODUCT NAV — Stripe Connect / AWS S3 style
   - 좌측: ASTRA (작게) + Orbit (큼) 스택
   - 5개 항목 × 5개 메가 panel
   ========================================================= */

/* Override row alignment for product nav (same grid, refined gaps) */
.nav--product .nav__row--product {
  grid-template-columns: auto 1fr auto;
  gap: 36px;
}

/* Brand stack: parent + product */
.nav__brand--product {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.nav__brand--product .nav__mark {
  width: 22px;
  height: 22px;
  color: var(--ink);
}
.nav__brand-stack {
  display: flex;
  flex-direction: column;
  line-height: 1;
  gap: 3px;
  align-items: flex-start;
}
.nav__brand-parent {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  color: var(--ink-muted);
  text-transform: uppercase;
  text-decoration: none;
  transition: color .18s var(--ease);
}
.nav__brand-parent:hover { color: var(--ink); }
.nav__brand-product {
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.012em;
  font-family: var(--sans);
}

/* Back-to-Astra link in actions */
.nav__link--back {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.nav__link--back:hover { color: var(--ink); }

/* ─── Inside Orbit panel — 4-engine grid ─── */
.mega__inner--inside {
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.mega__engine {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 20px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255,255,255,0.012);
  text-decoration: none;
  transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.mega__engine:hover {
  border-color: rgba(159,187,224,0.28);
  background: rgba(159,187,224,0.04);
  transform: translateY(-2px);
}
.mega__engine-sym {
  font-family: var(--mono);
  font-size: 18px;
  color: var(--orbit);
  margin-bottom: 4px;
  line-height: 1;
}
.mega__engine-tag {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin: 0;
  text-transform: uppercase;
}
.mega__engine-name {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.014em;
  margin: 4px 0 6px;
  line-height: 1.32;
}
.mega__engine-desc {
  font-size: 12px;
  color: var(--ink-dim);
  line-height: 1.55;
  margin: 0 0 8px;
}
.mega__engine-more {
  margin-top: auto;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
  transition: color .25s var(--ease);
}
.mega__engine:hover .mega__engine-more { color: var(--orbit); }

/* Slightly larger mega max-height for 4-engine panel */
.nav--product .mega.is-open { max-height: calc(100vh - var(--nav-h)); }

/* Active product nav item indicator (light underline-ish) */
.nav--product .nav__item.is-active .nav__trigger {
  color: var(--ink);
}
.nav--product .nav__trigger {
  font-size: 13.5px;
}

/* Compact responsive */
@media (max-width: 1100px) {
  .mega__inner--inside { grid-template-columns: repeat(2, 1fr); }
  .mega__inner--guide  { grid-template-columns: 1fr 1fr; }
  .mega__col--guide-feature { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .nav__brand-parent { display: none; }
  .nav__brand-product { font-size: 16px; }
  .nav__link--back { display: none; }
  .mega__inner--inside { grid-template-columns: 1fr; }
  .mega__inner--guide  { grid-template-columns: 1fr; }
}

/* Orbit mark: restrained monogram with a single silver orbit. */
.nav__mark--orbit {
  width: 48px;
  height: 35px;
  overflow: visible;
  filter: drop-shadow(0 5px 16px rgba(159,187,224,0.16));
  flex: 0 0 48px;
}
.orbit-logo__monogram,
.orbit-logo__orbit,
.orbit-logo__sheen {
  vector-effect: non-scaling-stroke;
}
.orbit-logo__sheen {
  stroke-dasharray: 30 142;
  stroke-dashoffset: 42;
  opacity: 0.54;
  animation: orbitLogoSheen 6.4s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .orbit-logo__sheen {
    animation: none;
  }
}
@keyframes orbitLogoSheen {
  0% { stroke-dashoffset: 42; opacity: 0; }
  16% { opacity: 0.62; }
  54% { opacity: 0.34; }
  100% { stroke-dashoffset: -142; opacity: 0; }
}

/* Standalone brand — Orbit single product look (no parent label) */
.nav__brand--solo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.nav__brand--solo .nav__mark {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}
.nav__brand-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.010em;
}
.nav__trigger--link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* =========================================================
   GUIDE mega panel — articles by category
   ========================================================= */
.mega__inner--guide {
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 36px;
}
.mega__col--guide-feature {
  border-right: 1px solid var(--line);
  padding-right: 28px;
}
.mega__guide-feature {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  padding: 4px 0;
  transition: opacity .2s var(--ease);
}
.mega__guide-feature:hover { opacity: 0.85; }
.mega__guide-feature h3 {
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.018em;
  margin: 4px 0 6px;
  line-height: 1.25;
}
.mega__guide-feature p {
  font-size: 13px;
  color: var(--ink-dim);
  line-height: 1.6;
  margin: 0 0 8px;
  max-width: 32ch;
}
.mega__guide-more {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--orbit);
  letter-spacing: 0.04em;
}

.mega__guide-link {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 7px 10px 7px 0;
  margin: 0 -10px 0 0;
  border-radius: 4px;
  text-decoration: none;
  transition: background .18s var(--ease), padding-left .18s var(--ease);
}
.mega__guide-link:hover {
  background: rgba(255,255,255,0.025);
  padding-left: 8px;
  margin-left: -8px;
}
.mega__guide-link-num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}
.mega__guide-link-title {
  font-size: 13.5px;
  color: var(--ink);
  font-weight: 450;
  letter-spacing: -0.005em;
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
}
.mega__guide-link-sub {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink-muted);
  letter-spacing: -0.003em;
  margin-top: 1px;
}
.mega__guide-link:hover .mega__guide-link-num { color: var(--orbit); }
.mega__guide-link:hover .mega__guide-link-sub { color: var(--ink-dim); }

/* Home variant — feature + 2 link columns with luminous viz on right */
.mega__inner--home {
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(36px, 4vw, 64px);
  max-width: var(--max);
  margin: 0 auto;
  padding-top: 24px;
  padding-bottom: 32px;
  padding-right: clamp(280px, 32%, 480px); /* reserve space for viz on right */
  min-height: 380px;
  position: relative;
  z-index: 2;
}
.mega__inner--home .mega__guide-feature {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: flex-start;
  max-width: 360px;
}
.mega__inner--home .mega__guide-feature .mega__kicker {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 26px;
}
.mega__inner--home .mega__guide-feature h3 {
  font-size: 30px;
  font-weight: 440;
  line-height: 1.18;
  letter-spacing: -0.024em;
  color: var(--ink);
  margin: 0 0 18px;
  font-feature-settings: "ss01", "kern";
  text-wrap: balance;
}
.mega__inner--home .mega__guide-feature p {
  font-size: 13.5px;
  color: var(--ink-dim);
  line-height: 1.66;
  margin: 0 0 28px;
  max-width: 36ch;
}
.mega__inner--home .mega__guide-more {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(232, 218, 188, 0.95);
  transition: color .22s var(--ease), letter-spacing .25s var(--ease);
  position: relative;
  padding-bottom: 4px;
}
.mega__inner--home .mega__guide-more::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(232, 218, 188, 0.45);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.mega__inner--home .mega__guide-feature:hover .mega__guide-more {
  color: rgba(255, 248, 232, 1);
  letter-spacing: 0.18em;
}
.mega__inner--home .mega__guide-feature:hover .mega__guide-more::after {
  transform: scaleX(1);
}

/* Premium hover for links — luminous glow accent */
.mega__inner--home .mega__guide-link {
  padding: 9px 12px 9px 0;
  margin: 0;
  border-radius: 6px;
  transition: padding-left .3s cubic-bezier(0.22, 0.61, 0.36, 1),
              background .3s var(--ease);
}
.mega__inner--home .mega__guide-link:hover {
  background: rgba(255, 255, 255, 0.022);
  padding-left: 10px;
  margin-left: -10px;
}
.mega__inner--home .mega__guide-link-num {
  color: var(--ink-muted);
  transition: color .25s var(--ease);
}
.mega__inner--home .mega__guide-link:hover .mega__guide-link-num {
  color: rgba(232, 218, 188, 0.95);
}
.mega__inner--home .mega__guide-link-title {
  font-size: 14.5px;
  font-weight: 460;
}
.mega__inner--home .mega__guide-link-sub {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink-muted);
  letter-spacing: -0.003em;
  margin-top: 2px;
}
.mega__inner--home .mega__guide-link:hover .mega__guide-link-sub {
  color: var(--ink-dim);
}
.mega__inner--home .mega__kicker {
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

/* Mega max height needs to fit new content */
.mega.is-open { max-height: calc(100vh - var(--nav-h)); }

/* ── Products grid — 3 cards each with its own WebGL canvas ── */
.mega__inner--products-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 36px);
  max-width: var(--max);
  margin: 0 auto;
  padding: 28px var(--pad) 36px;
  position: relative;
  z-index: 2;
}
.mega__product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.012), rgba(255,255,255,0.004));
  border: 1px solid rgba(255,255,255,0.05);
  overflow: hidden;
  text-decoration: none;
  transition: border-color .35s var(--ease), background .35s var(--ease), transform .45s cubic-bezier(0.22,0.61,0.36,1);
  isolation: isolate;
  min-height: 380px;
}
.mega__product-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 55% at 50% 30%, rgba(180,208,244,0.06), transparent 70%);
  opacity: 0;
  transition: opacity .35s var(--ease);
  pointer-events: none;
  z-index: 0;
}
.mega__product-card--davinci::before {
  background: radial-gradient(ellipse 80% 55% at 50% 30%, rgba(230,200,138,0.06), transparent 70%);
}
.mega__product-card--arte::before {
  background: radial-gradient(ellipse 80% 55% at 50% 30%, rgba(220,210,232,0.07), transparent 70%);
}
.mega__product-card:hover {
  border-color: rgba(255,255,255,0.13);
  background: linear-gradient(180deg, rgba(255,255,255,0.024), rgba(255,255,255,0.006));
  transform: translateY(-2px);
}
.mega__product-card:hover::before { opacity: 1; }
.mega__product-canvas {
  width: 100%;
  height: 200px;
  display: block;
  pointer-events: none;
  position: relative;
  z-index: 1;
}
.mega__product-meta {
  position: relative;
  z-index: 2;
  padding: 4px 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.mega__product-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 14px;
}
.mega__product-card--orbit .mega__product-eyebrow   { color: rgba(159,187,224,0.7); }
.mega__product-card--davinci .mega__product-eyebrow { color: rgba(230,200,138,0.7); }
.mega__product-card--arte .mega__product-eyebrow {
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: none;
  color: rgba(218,208,232,0.85);
}
.mega__product-h {
  font-size: 26px;
  font-weight: 480;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0 0 4px;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
}
.mega__product-card--arte .mega__product-h {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 30px;
  letter-spacing: -0.018em;
}
.mega__product-prime-mark {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 0.6em;
  margin-left: 1px;
  color: rgba(232,218,188,0.92);
  transform: translateY(-0.05em);
}
.mega__product-tag {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 13.5px;
  color: rgba(220,226,240,0.74);
  margin: 0 0 14px;
}
.mega__product-body {
  font-size: 13px;
  color: var(--ink-dim);
  line-height: 1.6;
  margin: 0 0 22px;
}
.mega__product-go {
  margin-top: auto;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  transition: color .25s var(--ease), letter-spacing .25s var(--ease);
}
.mega__product-card:hover .mega__product-go {
  color: var(--ink);
  letter-spacing: 0.16em;
}
.mega__product-card--orbit:hover .mega__product-h   { color: rgba(220,235,255,1); }
.mega__product-card--davinci:hover .mega__product-h { color: rgba(252,232,184,1); }
.mega__product-card--arte:hover .mega__product-h    { color: rgba(245,230,255,1); }

/* Slightly taller mega for the guide panel */
.nav--product .mega.is-open { max-height: calc(100vh - var(--nav-h)); }

/* =========================================================
   ARTICLE pages (orbit-guide-*.html)
   ========================================================= */
.is-article {
  background: var(--bg);
}
.article {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(72px, 10vw, 120px) var(--pad) clamp(80px, 10vw, 120px);
}
.article__head {
  margin-bottom: clamp(40px, 5vw, 64px);
  padding-bottom: clamp(28px, 3vw, 40px);
  border-bottom: 1px solid var(--line);
}
.article__crumb {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin: 0 0 24px;
  text-transform: uppercase;
}
.article__crumb a {
  color: var(--ink-muted);
  transition: color .18s var(--ease);
}
.article__crumb a:hover { color: var(--ink); }
.article__title {
  font-size: clamp(32px, 4.4vw, 48px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 18px;
  color: var(--ink);
  max-width: 22ch;
}
.article__sub {
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--ink-dim);
  line-height: 1.55;
  margin: 0 0 18px;
  max-width: 36ch;
}
.article__meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.06em;
  margin: 0;
}

.article__body {
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-2);
}
.article__body > * + * { margin-top: 1.2em; }
.article__lede {
  font-size: 17px;
  color: var(--ink);
  line-height: 1.7;
  margin: 0 0 1.6em;
}
.article__body h2 {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 2.4em 0 0.8em;
  line-height: 1.3;
}
.article__body h3 {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 2em 0 0.6em;
  line-height: 1.35;
}
.article__body p {
  margin: 0;
  color: var(--ink-2);
}
.article__body ul,
.article__body ol {
  padding-left: 24px;
  margin: 0;
}
.article__body li {
  margin: 0.5em 0;
}
.article__body strong {
  color: var(--ink);
  font-weight: 500;
}
.article__body em[lang="en"] {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink);
}
.article__body code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: rgba(255,255,255,0.06);
  padding: 1px 6px;
  border-radius: 3px;
  color: var(--ink);
}
.article__body a {
  color: var(--orbit);
  border-bottom: 1px solid rgba(159,187,224,0.25);
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.article__body a:hover {
  color: #c4d6ee;
  border-color: rgba(159,187,224,0.6);
}
.article__body blockquote {
  margin: 2em 0;
  padding: 18px 22px;
  border-left: 2px solid rgba(159,187,224,0.4);
  background: rgba(159,187,224,0.04);
  font-size: 15.5px;
  color: var(--ink);
  line-height: 1.65;
  font-style: normal;
}

.article-screen,
.article-code {
  margin: 32px 0 40px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012)),
    #050608;
  box-shadow: 0 28px 72px -42px rgba(159,187,224,0.48);
}
.article-screen__bar,
.article-code__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,0.018);
}
.article-screen__dot,
.article-code__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
}
.article-screen__path,
.article-code__path {
  margin-left: 8px;
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.article-screen__badge {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: var(--orbit);
  border: 1px solid rgba(159,187,224,0.18);
  background: rgba(159,187,224,0.08);
  border-radius: 999px;
  padding: 2px 8px;
}
.article-screen__body {
  padding: 20px;
}
.article-screen__body--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 18px;
  align-items: stretch;
}
.article-screen__title {
  margin: 0 0 6px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
}
.article-screen__sub {
  margin: 0 0 16px;
  color: var(--ink-muted);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.03em;
}
.article-screen__rows {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}
.article-screen__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.article-screen__row:last-child { border-bottom: 0; }
.article-screen__tag {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 3px;
  padding: 3px 7px;
}
.article-screen__row p {
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.45;
}
.article-screen__state {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--green);
  letter-spacing: 0.04em;
}
.article-screen__rail {
  border-left: 1px solid var(--line);
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
}
.article-screen__metric p {
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  text-transform: uppercase;
}
.article-screen__metric b {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0;
}
.article-screen__orbit {
  aspect-ratio: 1.32;
  border: 1px solid rgba(159,187,224,0.18);
  border-radius: 4px;
  position: relative;
  background:
    linear-gradient(115deg, rgba(159,187,224,0.12), transparent 42%),
    linear-gradient(0deg, rgba(255,255,255,0.035), transparent 58%);
  transform: skewX(-10deg) rotate(-3deg);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.025),
    0 0 34px rgba(159,187,224,0.08);
}
.article-screen__orbit::before,
.article-screen__orbit::after {
  content: '';
  position: absolute;
  border: 1px solid rgba(159,187,224,0.22);
  border-radius: 3px;
  transform: skewX(8deg);
}
.article-screen__orbit::before {
  inset: 18% 14% 36% 18%;
}
.article-screen__orbit::after {
  inset: 46% 22% 18% 10%;
  border-color: rgba(255,255,255,0.13);
  opacity: 0.7;
}
.article-code pre {
  margin: 0;
  padding: 20px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #d8dee9;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.72;
  background: #030407;
}
.article-code code {
  padding: 0;
  background: transparent;
  color: inherit;
  border-radius: 0;
  font-size: inherit;
}

.atlas-live-graph {
  position: relative;
  margin: 32px calc(50% - min(49vw, 1120px)) 86px;
  height: clamp(1320px, 158vh, 1700px);
  min-height: 1320px;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 46px 130px -84px rgba(0,0,0,0.95);
}
.atlas-live-frame {
  position: absolute;
  border: 0;
  background: #000;
  color-scheme: dark;
}
.atlas-live-frame--graph {
  --atlas-graph-crop-left: 0px;
  --atlas-graph-crop-top: 0px;
  left: calc(var(--atlas-graph-crop-left) * -1);
  top: calc(var(--atlas-graph-crop-top) * -1);
  width: calc(100% + var(--atlas-graph-crop-left));
  height: calc(100% + var(--atlas-graph-crop-top));
}

.atlas-product-stage {
  position: relative;
  margin: 34px calc(50% - min(48vw, 520px)) 46px;
  min-height: 680px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  overflow: hidden;
  background:
    radial-gradient(circle at 62% 22%, rgba(159,187,224,0.28), transparent 36%),
    radial-gradient(circle at 30% 72%, rgba(127,212,158,0.12), transparent 34%),
    linear-gradient(180deg, #090d14 0%, #020304 100%);
  box-shadow:
    0 42px 110px -70px rgba(159,187,224,0.7),
    inset 0 1px 0 rgba(255,255,255,0.08);
}
.atlas-product-stage__webgl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  filter: saturate(1.25) contrast(1.12);
}
.atlas-product-stage--status {
  min-height: clamp(620px, 58vw, 780px);
  background: #000;
  border-color: rgba(255,255,255,0.035);
  box-shadow: none;
}
.atlas-product-stage--status .atlas-product-stage__webgl {
  z-index: 1;
}
.atlas-console-embed {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 188px minmax(0, 1fr);
  background: #000;
  color: #eee;
  overflow: hidden;
}
.atlas-console-sidebar {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  padding: 26px 20px 24px;
  background: #000;
  border-right: 1px solid rgba(255,255,255,0.018);
}
.atlas-console-close {
  width: 42px;
  height: 42px;
  margin: 0 auto 34px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 999px;
  background: rgba(255,255,255,0.015);
  color: rgba(255,255,255,0.35);
  font-size: 24px;
  line-height: 1;
}
.atlas-console-nav {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.atlas-console-nav span {
  display: flex;
  align-items: center;
  gap: 14px;
  color: rgba(255,255,255,0.2);
  font-size: 13px;
}
.atlas-console-nav b {
  color: inherit;
  font-weight: 500;
}
.atlas-console-nav .is-active {
  color: rgba(255,255,255,0.76);
}
.atlas-console-nav em {
  margin-left: auto;
  padding: 1px 8px;
  border: 1px solid rgba(96,165,250,0.28);
  border-radius: 999px;
  color: rgba(147,197,253,0.85);
  background: rgba(96,165,250,0.18);
  font-family: var(--mono);
  font-size: 9px;
  font-style: normal;
}
.atlas-console-user {
  margin-top: auto;
  display: grid;
  grid-template-columns: 34px 1fr;
  column-gap: 12px;
  align-items: center;
  color: rgba(255,255,255,0.45);
}
.atlas-console-user i {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 50%;
  color: rgba(255,255,255,0.56);
  font-family: var(--mono);
  font-size: 11px;
  font-style: normal;
}
.atlas-console-user strong {
  color: rgba(255,255,255,0.64);
  font-size: 12px;
  font-weight: 500;
}
.atlas-console-user span {
  color: rgba(255,255,255,0.25);
  font-size: 10px;
}
.atlas-console-main {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: #000;
}
.atlas-console-head {
  position: absolute;
  left: 0;
  right: 0;
  top: 42px;
  z-index: 4;
  text-align: center;
}
.atlas-console-head h3 {
  margin: 0;
  color: #f1f1f1;
  font-family: Georgia, Cambria, "Times New Roman", serif;
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 700;
  letter-spacing: 0;
}
.atlas-console-head p {
  margin: 10px 0 24px;
  color: rgba(255,255,255,0.3);
  font-size: 14px;
}
.atlas-console-tabs {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 5px;
  border-radius: 13px;
  background: rgba(255,255,255,0.022);
}
.atlas-console-tabs span {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 11px;
  color: rgba(255,255,255,0.28);
  font-size: 13px;
}
.atlas-console-tabs .is-active {
  color: rgba(255,255,255,0.72);
  background: rgba(255,255,255,0.07);
}
.atlas-console-main .atlas-product-stage__webgl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  opacity: 0.92;
  filter: saturate(0.92) contrast(1.04);
}
.atlas-console-main .atlas-status-ribbon {
  top: 228px;
  left: 72px;
  z-index: 5;
  gap: 13px;
}
.atlas-console-main .atlas-status-ribbon span {
  color: rgba(255,255,255,0.28);
}
.atlas-console-main .atlas-status-ribbon b {
  color: rgba(255,255,255,0.38);
}
.atlas-org-label {
  position: absolute;
  z-index: 5;
  transform: translate(-50%, -50%);
  text-align: center;
  color: rgba(255,255,255,0.42);
  pointer-events: none;
  white-space: nowrap;
}
.atlas-org-label strong {
  display: block;
  color: rgba(255,255,255,0.78);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
}
.atlas-org-label span {
  display: block;
  margin-top: 4px;
  color: rgba(255,255,255,0.34);
  font-size: 12px;
}
.atlas-org-label em {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 8px;
  font-style: normal;
}
.atlas-org-label em b {
  padding: 3px 8px;
  border: 1px solid rgba(217,139,116,0.17);
  border-radius: 10px;
  color: rgba(217,139,116,0.7);
  background: rgba(217,139,116,0.1);
  font-size: 9px;
  font-weight: 500;
}
.atlas-org-label--design { left: 43%; top: 38%; }
.atlas-org-label--accounting { left: 67%; top: 38%; }
.atlas-org-label--security { left: 86%; top: 54%; }
.atlas-org-label--ux { left: 22%; top: 52%; }
.atlas-org-label--ceo { left: 54%; top: 62%; }
.atlas-org-label--cto { left: 65%; top: 73%; }
.atlas-org-label--cfo { left: 54%; top: 52%; }
.atlas-org-label--cpo { left: 40%; top: 72%; }
.atlas-org-label--vp strong {
  color: rgba(255,255,255,0.34);
  font-size: 10px;
}
.atlas-org-label--vp span {
  margin-top: 1px;
  color: rgba(255,255,255,0.2);
  font-size: 9px;
}
.atlas-org-label--vpe { left: 72%; top: 60%; }
.atlas-org-label--vpf { left: 48%; top: 48%; }
.atlas-org-label--vpp { left: 30%; top: 75%; }
.atlas-console-team-list {
  position: absolute;
  top: 200px;
  right: 54px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 130px;
  color: rgba(255,255,255,0.26);
}
.atlas-console-team-list span {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  font-size: 13px;
}
.atlas-console-team-list b {
  color: rgba(255,255,255,0.3);
  font-weight: 400;
}
.atlas-status-ui {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.atlas-status-tabs {
  position: absolute;
  top: 26px;
  left: 50%;
  display: inline-flex;
  gap: 7px;
  transform: translateX(-50%);
  padding: 7px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  background: rgba(0,0,0,0.48);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.atlas-status-tabs span {
  min-width: 58px;
  padding: 8px 10px;
  border-radius: 8px;
  color: #6d7480;
  font-size: 12px;
  text-align: center;
}
.atlas-status-tabs span.is-active {
  color: var(--ink);
  background: rgba(255,255,255,0.08);
}
.atlas-status-ribbon {
  position: absolute;
  top: 92px;
  left: 40px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.atlas-status-ribbon span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  color: #727b88;
  font-size: 11px;
}
.atlas-status-ribbon b {
  color: #9aa3af;
  font-weight: 500;
}
.atlas-status-preview {
  padding-right: 12px;
  border-right: 1px solid rgba(255,255,255,0.08);
  color: rgba(212,168,76,0.58) !important;
  font-family: var(--mono);
  font-size: 9px !important;
  letter-spacing: 0.12em;
}
.atlas-status-detail {
  padding: 4px 10px;
  border: 1px solid rgba(159,187,224,0.1);
  border-radius: 7px;
  color: #8fb7ee !important;
  background: rgba(96,165,250,0.06);
}
.atlas-status-teams {
  position: absolute;
  top: 78px;
  right: 44px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 150px;
}
.atlas-status-teams span {
  display: flex;
  justify-content: space-between;
  color: #5d6673;
  font-size: 11px;
}
.atlas-status-teams b {
  color: #7b8491;
  font-weight: 400;
}
.atlas-status-focus {
  position: absolute;
  left: 50%;
  bottom: 42px;
  width: min(380px, calc(100% - 56px));
  transform: translateX(-50%);
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: rgba(0,0,0,0.62);
  box-shadow: 0 24px 70px -44px rgba(0,0,0,0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  text-align: center;
}
.atlas-status-focus p {
  margin: 0 0 5px;
  color: #7b8491;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.atlas-status-focus strong {
  display: block;
  color: var(--ink);
  font-size: 19px;
  font-weight: 500;
}
.atlas-status-focus span {
  display: block;
  margin-top: 6px;
  color: #7c8796;
  font-size: 12px;
}
.atlas-console {
  position: relative;
  z-index: 2;
  width: min(920px, calc(100% - 40px));
  margin: 38px auto;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  background: rgba(2,3,5,0.76);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 30px 90px -46px rgba(0,0,0,0.95);
  overflow: hidden;
}
.atlas-console__head {
  padding: 24px 24px 18px;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.atlas-console__head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 28px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.025em;
}
.atlas-console__head p {
  margin: 6px 0 18px;
  color: #666;
  font-size: 14px;
}
.atlas-console__tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex-wrap: wrap;
}
.atlas-console__tabs span,
.atlas-report__tabs span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 7px 13px;
  color: #666;
  background: rgba(255,255,255,0.02);
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
}
.atlas-console__tabs span.is-active {
  color: #ddd;
  background: rgba(255,255,255,0.07);
}
.atlas-console__tabs span.is-soft {
  color: #bbb;
  background: rgba(159,187,224,0.08);
  border-color: rgba(159,187,224,0.1);
}
.atlas-report {
  min-height: 500px;
  background: #000;
}
.atlas-report__toolbar {
  min-height: 42px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  flex-wrap: wrap;
}
.atlas-select {
  color: #ddd;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 13px;
}
.atlas-report__title {
  color: #666;
  font-size: 12px;
}
.atlas-pill,
.atlas-icon,
.atlas-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  border-radius: 8px;
  font-size: 11px;
}
.atlas-pill--mock {
  color: rgba(212,169,106,0.72);
  background: rgba(212,169,106,0.08);
  padding: 2px 7px;
  font-size: 8.5px;
  letter-spacing: 0.08em;
}
.atlas-icon {
  color: #777;
  width: 24px;
}
.atlas-send {
  color: #7aa7e8;
  background: rgba(96,165,250,0.08);
  padding: 4px 10px;
}
.atlas-report__tabs {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  overflow-x: auto;
}
.atlas-report__tabs span {
  border-radius: 0;
  background: transparent;
  border-bottom: 2px solid transparent;
  min-height: 40px;
  padding: 9px 16px;
}
.atlas-report__tabs span.is-active {
  color: #ddd;
  border-bottom-color: rgba(255,255,255,0.2);
}
.atlas-report__body {
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(320px, 1fr);
  min-height: 420px;
}
.atlas-report__panel {
  padding: 26px;
  border-right: 1px solid rgba(255,255,255,0.04);
}
.atlas-kicker {
  margin: 0 0 8px;
  color: var(--ink-muted);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.atlas-report__panel h3 {
  margin: 0 0 18px;
  color: var(--ink);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.atlas-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 18px;
}
.atlas-metrics div {
  padding: 14px;
  border-right: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.atlas-metrics div:nth-child(2n) { border-right: 0; }
.atlas-metrics div:nth-child(n+3) { border-bottom: 0; }
.atlas-metrics span {
  display: block;
  color: #666;
  font-family: var(--mono);
  font-size: 10px;
}
.atlas-metrics b {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 23px;
  font-weight: 500;
}
.atlas-report__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.atlas-report__list p {
  margin: 0;
  padding: 11px 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.5;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.atlas-report__list b {
  color: var(--orbit);
  font-weight: 500;
  margin-right: 8px;
}
.atlas-graph {
  position: relative;
  overflow: hidden;
  min-height: 420px;
  background:
    radial-gradient(circle at center, rgba(159,187,224,0.08), transparent 50%),
    linear-gradient(120deg, rgba(255,255,255,0.018), transparent 38%);
}
.atlas-graph::before,
.atlas-graph::after {
  content: '';
  position: absolute;
  inset: 18%;
  border: 1px solid rgba(159,187,224,0.18);
  border-radius: 50%;
  transform: rotate(-22deg) scaleX(1.55);
}
.atlas-graph::after {
  inset: 31%;
  opacity: 0.7;
  transform: rotate(18deg) scaleX(1.8);
}
.atlas-node {
  position: absolute;
  z-index: 2;
  min-width: 90px;
  padding: 9px 11px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: rgba(0,0,0,0.72);
  color: var(--ink-2);
  font-size: 12px;
  text-align: center;
  box-shadow: 0 18px 44px -24px rgba(0,0,0,0.9);
}
.atlas-node--lead { left: 12%; top: 18%; color: #9fbbe0; }
.atlas-node--risk { right: 14%; top: 26%; color: #d47a6a; }
.atlas-node--work { left: 36%; top: 48%; color: #e6c88a; }
.atlas-node--done { right: 18%; bottom: 16%; color: #7fd49e; }
.atlas-graph__line {
  position: absolute;
  z-index: 1;
  height: 1px;
  transform-origin: left center;
  background: linear-gradient(90deg, transparent, rgba(159,187,224,0.55), transparent);
}
.atlas-graph__line--a { width: 42%; left: 22%; top: 30%; transform: rotate(16deg); }
.atlas-graph__line--b { width: 38%; left: 34%; top: 54%; transform: rotate(-24deg); }
.atlas-graph__line--c { width: 30%; left: 54%; top: 66%; transform: rotate(34deg); }
.atlas-graph--webgl {
  min-height: 420px;
  background:
    radial-gradient(circle at 52% 44%, rgba(159,187,224,0.16), transparent 42%),
    radial-gradient(circle at 24% 76%, rgba(127,212,158,0.08), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,0.025), rgba(0,0,0,0.55));
}
.atlas-graph--webgl::before,
.atlas-graph--webgl::after {
  display: none;
}
.atlas-report-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  filter: saturate(1.35) contrast(1.18);
}
.atlas-graph-label {
  position: absolute;
  z-index: 3;
  min-width: 108px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: rgba(0,0,0,0.62);
  box-shadow: 0 20px 42px -28px rgba(0,0,0,0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.atlas-graph-label b {
  display: block;
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
}
.atlas-graph-label span {
  display: block;
  margin-top: 3px;
  color: #6f7785;
  font-size: 10px;
  line-height: 1.25;
}
.atlas-graph-label--lead { left: 9%; top: 18%; }
.atlas-graph-label--risk { right: 10%; top: 20%; }
.atlas-graph-label--work { left: 30%; top: 48%; min-width: 138px; }
.atlas-graph-label--done { right: 14%; bottom: 15%; }
.atlas-graph-label--contract { left: 12%; bottom: 16%; }

@media (max-width: 900px) {
  .atlas-live-graph {
    margin-left: 0;
    margin-right: 0;
    height: clamp(1080px, 142vh, 1240px);
    min-height: 1080px;
  }
  .atlas-live-frame--graph {
    --atlas-graph-crop-left: 0px;
    --atlas-graph-crop-top: 0px;
  }
  .atlas-product-stage {
    margin-left: 0;
    margin-right: 0;
    min-height: auto;
  }
  .atlas-product-stage--status {
    min-height: clamp(620px, 135vw, 760px);
  }
  .atlas-product-stage--status .atlas-product-stage__webgl {
    min-height: 100%;
  }
  .atlas-console-embed {
    grid-template-columns: 1fr;
  }
  .atlas-console-sidebar {
    display: none;
  }
  .atlas-console-head {
    top: 26px;
  }
  .atlas-console-head h3 {
    font-size: 34px;
  }
  .atlas-console-tabs {
    gap: 4px;
  }
  .atlas-console-tabs span {
    min-height: 38px;
    padding: 0 12px;
    font-size: 12px;
  }
  .atlas-console-main .atlas-status-ribbon {
    top: 188px;
    left: 16px;
    right: 16px;
  }
  .atlas-console-team-list {
    top: 206px;
    right: 14px;
    width: 102px;
    gap: 7px;
    opacity: 0.72;
  }
  .atlas-console-team-list span {
    font-size: 11px;
  }
  .atlas-org-label strong {
    font-size: 14px;
  }
  .atlas-org-label span {
    font-size: 9px;
  }
  .atlas-org-label em {
    gap: 3px;
  }
  .atlas-org-label em b {
    padding: 2px 5px;
    font-size: 8px;
  }
  .atlas-org-label--design { left: 45%; top: 44%; }
  .atlas-org-label--accounting { left: 61%; top: 49%; }
  .atlas-org-label--security { left: 76%; top: 68%; }
  .atlas-org-label--ux { left: 18%; top: 65%; }
  .atlas-org-label--ceo { left: 53%; top: 76%; }
  .atlas-org-label--cto { left: 66%; top: 85%; }
  .atlas-org-label--cpo { left: 39%; top: 86%; }
  .atlas-org-label--cfo { left: 52%; top: 57%; }
  .atlas-org-label--vp {
    opacity: 0.74;
  }
  .atlas-org-label--vpe { left: 68%; top: 72%; }
  .atlas-org-label--vpf { left: 43%; top: 52%; }
  .atlas-org-label--vpp { left: 30%; top: 88%; }
  .atlas-status-ribbon {
    top: 84px;
    left: 18px;
    right: 18px;
    gap: 9px;
  }
  .atlas-status-teams {
    top: auto;
    right: 18px;
    bottom: 136px;
    width: 132px;
  }
  .atlas-status-focus {
    bottom: 22px;
  }
  .atlas-report__body {
    grid-template-columns: 1fr;
  }
  .atlas-report__panel {
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
  }
}

.article__next {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: clamp(56px, 7vw, 88px);
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.article__next a {
  font-size: 13.5px;
  color: var(--ink-dim);
  font-family: var(--sans);
  transition: color .18s var(--ease);
}
.article__next a:hover { color: var(--ink); }
.article__next-next {
  color: var(--ink) !important;
  font-weight: 500;
}

/* Subpage body should not have entrance animation on article pages */
.is-article .op-hero { display: none; }

/* =========================================================
   GUIDE INDEX page (orbit-guide.html)
   ========================================================= */
.is-guide-index { background: var(--bg); }

.guide-hero {
  padding: clamp(120px, 14vw, 180px) var(--pad) clamp(64px, 8vw, 96px);
  background: #000;
  border-bottom: none;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.guide-hero__orb { display: none; }
.guide-hero::after { display: none; }
.guide-hero__inner {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
}
.guide-hero .op-eyebrow {
  font-size: 11px;
  letter-spacing: 0.28em;
  color: rgba(255,255,255,0.22);
  margin-bottom: 32px;
}
.guide-hero__title {
  font-size: clamp(44px, 6vw, 76px);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin: 0 auto 44px;
  color: #fff;
  max-width: 14ch;
}
.guide-hero__sub {
  font-size: clamp(14px, 1.1vw, 16px);
  color: rgba(255,255,255,0.32);
  line-height: 1.9;
  margin: 0 auto;
  max-width: 40ch;
  letter-spacing: 0.02em;
}
.guide-hero__rule { display: none; }
.guide-hero__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 4px;
  margin: 56px auto 0;
  max-width: 640px;
}
.guide-hero__nav a {
  font-size: 12px;
  color: rgba(255,255,255,0.22);
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 999px;
  transition: color .2s var(--ease), border-color .2s var(--ease);
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.guide-hero__nav a:hover {
  color: rgba(255,255,255,0.6);
  border-color: rgba(255,255,255,0.15);
}

.guide-list {
  padding: clamp(72px, 10vw, 120px) var(--pad);
}
.guide-list__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(64px, 8vw, 96px);
}
.guide-list__cat {
  position: relative;
}
.guide-list__cat + .guide-list__cat::before {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--line), rgba(255,255,255,0.08) 50%, var(--line));
  margin-bottom: clamp(64px, 8vw, 96px);
}
.guide-list__cat-head {
  margin-bottom: 32px;
  max-width: 640px;
}
.guide-list__cat-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--orbit-dim);
  margin: 0 0 14px;
  text-transform: uppercase;
}
.guide-list__cat-h {
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  color: var(--ink);
  line-height: 1.2;
}
.guide-list__cat-p {
  font-size: 15px;
  color: var(--ink-dim);
  line-height: 1.7;
  margin: 0;
}
.guide-list__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.guide-card {
  --card-accent: var(--orbit);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px 26px 24px;
  background: rgba(255,255,255,0.018);
  border: 1px solid rgba(255,255,255,0.06);
  border-left: 2px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  text-decoration: none;
  transition: border-color .25s var(--ease), border-left-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
  min-height: 200px;
  position: relative;
}
.guide-card:hover {
  border-color: rgba(159,187,224,0.2);
  border-left-color: var(--card-accent);
  background: rgba(159,187,224,0.03);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 0 1px rgba(159,187,224,0.08);
}
/* Color-coding for different categories */
.guide-card--concept { --card-accent: #7aaddb; }
.guide-card--product { --card-accent: #d4a96a; }
.guide-card--layer   { --card-accent: #a78bfa; }
.guide-card--deploy  { --card-accent: #7fd49e; }
.guide-card--soon    { opacity: 0.6; }
.guide-card--soon:hover { opacity: 0.8; transform: none; }

.guide-card__num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.1em;
  margin: 0 0 10px;
  text-transform: uppercase;
}
.guide-card:hover .guide-card__num { color: var(--card-accent); }
.guide-card__h {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.014em;
  color: var(--ink);
  margin: 0 0 8px;
  line-height: 1.32;
}
.guide-card__p {
  font-size: 13.5px;
  color: var(--ink-dim);
  line-height: 1.65;
  margin: 0;
}
.guide-card__meta {
  margin: auto 0 0;
  padding-top: 16px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}
.guide-card__meta::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--card-accent);
  opacity: 0.5;
}

.guide-stack {
  padding: clamp(24px, 3vw, 40px) var(--pad) clamp(68px, 9vw, 116px);
}
.guide-stack__inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 6vw, 72px);
}
.guide-stack__intro {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}
.guide-stack__intro p {
  margin: 0;
  color: rgba(255,255,255,0.28);
  font-size: 13.5px;
  line-height: 1.9;
  letter-spacing: 0.01em;
}
.guide-stack__label {
  margin: 0 0 18px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.18);
}
.guide-entry {
  --entry-accent: var(--orbit);
  display: grid;
  grid-template-columns: minmax(360px, 0.95fr) minmax(0, 1fr);
  gap: clamp(38px, 5.5vw, 76px);
  align-items: center;
  padding: clamp(56px, 7.5vw, 92px) 0;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.guide-entry:first-of-type { border-top-color: rgba(255,255,255,0.07); }
.guide-entry--reverse {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.95fr);
}
.guide-entry--reverse .guide-entry__media { order: 2; }
.guide-entry__media {
  margin: 0;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 0;
  background: #000;
  box-shadow: none;
  min-height: clamp(500px, 42vw, 700px);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.guide-entry__media img,
.guide-stage {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.guide-entry__media--stage {
  background: #000;
}
.guide-stage {
  min-height: clamp(500px, 42vw, 700px);
  background: #000;
  filter: saturate(1.18) contrast(1.22) brightness(1.08);
}
.guide-webgl-icon {
  display: block;
  width: clamp(184px, 16vw, 248px);
  height: clamp(112px, 10vw, 154px);
  min-height: 0;
  aspect-ratio: auto;
  border: 0;
  border-radius: 10px;
  background: #000;
  filter: saturate(1.4) contrast(1.15) brightness(1.18);
  opacity: 0.92;
  transition: opacity 0.32s var(--ease), filter 0.32s var(--ease), transform 0.32s var(--ease);
}
.guide-entry:hover .guide-webgl-icon {
  opacity: 1;
  filter: saturate(1.5) contrast(1.18) brightness(1.24);
  transform: scale(1.03);
}
.article-webgl-stage {
  position: relative;
  margin: 0 calc(50% - min(48vw, 980px)) clamp(56px, 7vw, 88px);
  height: clamp(460px, 58vh, 720px);
  min-height: 420px;
  overflow: hidden;
  border-radius: 8px;
  background: #000;
  box-shadow: 0 36px 110px -76px rgba(0,0,0,0.92);
}
.article__body .article-webgl-stage {
  margin-top: 36px;
}
.article-webgl-stage__canvas {
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  filter: saturate(1.5) contrast(1.3) brightness(1.08);
}
.article-webgl-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.14), transparent 22%, transparent 78%, rgba(0,0,0,0.2)),
    radial-gradient(circle at 50% 52%, transparent 0, transparent 48%, rgba(0,0,0,0.4) 100%);
}
.guide-entry__media figcaption {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 24px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  pointer-events: none;
  z-index: 2;
}
.guide-entry__media figcaption span {
  color: var(--ink);
  font-size: clamp(24px, 3.3vw, 38px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
}
.guide-entry__media figcaption small {
  color: var(--ink-muted);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.guide-entry__media--stage::before {
  content: '';
  position: absolute;
  inset: 16px;
  border: 0;
  border-radius: 6px;
  pointer-events: none;
  z-index: 1;
}
.guide-entry__media::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 0;
  pointer-events: none;
}
.guide-entry__copy {
  min-width: 0;
}
.guide-entry__kicker {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--entry-accent) 65%, transparent);
}
.guide-entry__heading {
  display: grid;
  align-items: start;
  gap: clamp(14px, 1.8vw, 22px);
  margin: 0 0 18px;
  max-width: 64ch;
}
.guide-entry__title {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: clamp(25px, 3vw, 36px);
  font-weight: 500;
  letter-spacing: -0.026em;
  line-height: 1.12;
}
.guide-entry__heading .guide-entry__title {
  margin: 0;
  flex: 1;
  min-width: 0;
  padding-top: 0;
}
.guide-entry__desc {
  margin: 0;
  color: rgba(245,247,244,0.48);
  font-size: 15px;
  line-height: 1.8;
  max-width: 52ch;
  letter-spacing: 0.005em;
}
.guide-entry__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
}
.guide-entry__chips span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 999px;
  padding: 5px 12px;
  color: rgba(245,247,244,0.38);
  background: rgba(255,255,255,0.02);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
}
.guide-entry__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  color: rgba(245,247,244,0.82);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border-bottom: 1px solid color-mix(in srgb, var(--entry-accent) 35%, transparent);
  padding-bottom: 5px;
  transition: color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.guide-entry__link:hover {
  color: var(--entry-accent);
  border-color: var(--entry-accent);
  transform: translateX(2px);
}
.guide-divider {
  margin: clamp(16px, 2.5vw, 32px) 0 0;
  padding-top: clamp(48px, 6vw, 72px);
  border-top: 1px solid rgba(255,255,255,0.06);
  position: relative;
}
.guide-divider::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: clamp(48px, 6vw, 80px);
  height: 1px;
  background: rgba(159,187,224,0.28);
}
.guide-divider__eyebrow {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: rgba(159,187,224,0.38);
  text-transform: uppercase;
}
.guide-divider__title {
  margin: 0;
  color: rgba(245,247,244,0.88);
  font-size: clamp(23px, 2.6vw, 32px);
  font-weight: 450;
  letter-spacing: -0.018em;
  line-height: 1.25;
}

@media (max-width: 820px) {
  .guide-entry,
  .guide-entry--reverse {
    grid-template-columns: 1fr;
  }
  .guide-entry--reverse .guide-entry__media { order: 0; }
  .guide-entry__media,
  .guide-stage {
    min-height: clamp(360px, 72vw, 520px);
  }
  .guide-webgl-icon {
    width: clamp(164px, 44vw, 220px);
    height: clamp(100px, 27vw, 136px);
    min-height: 0;
    border-radius: 8px;
  }
  .article-screen__body--split {
    grid-template-columns: 1fr;
  }
  .article-screen__rail {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: 16px;
  }
  .article-screen__row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* "전체 가이드" link in mega panel */
.mega__link--all {
  color: var(--orbit) !important;
  font-weight: 500 !important;
  margin-top: 6px;
  border-top: 1px solid var(--line);
  padding-top: 10px !important;
}

/* =========================================================
   ORBIT — Stripe-style company product page
   ========================================================= */

/* ───── HERO ───── */
.orbit-hero {
  position: relative;
  min-height: 100vh;
  padding: clamp(96px, 14vw, 180px) var(--pad) clamp(64px, 10vw, 120px);
  overflow: hidden;
  background: #000;
  display: flex;
  align-items: center;
}
.orbit-hero__canvas {
  position: absolute;
  right: -8%;
  top: 50%;
  transform: translateY(-50%);
  width: 78%;
  height: 110%;
  z-index: 0;
  opacity: 1;
}
.orbit-hero__fade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, #000 0%, rgba(0,0,0,0.92) 22%, rgba(0,0,0,0.5) 48%, transparent 68%),
    linear-gradient(180deg, transparent 70%, #000 100%);
  pointer-events: none;
}
.orbit-hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
}
.orbit-hero__copy {
  max-width: 580px;
}
.orbit-hero__eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: var(--ink-dim);
  margin: 0 0 28px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.orbit-hero__eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--orbit);
  box-shadow: 0 0 12px rgba(159,187,224,0.7);
}
.orbit-hero__title {
  font-size: clamp(48px, 7.2vw, 96px);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.038em;
  margin: 0 0 28px;
  color: var(--ink);
  max-width: 12ch;
}
.orbit-hero__sub {
  font-size: clamp(16px, 1.3vw, 19px);
  color: var(--ink-dim);
  line-height: 1.7;
  max-width: 50ch;
  margin: 0 0 36px;
}
.orbit-hero__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}
.orbit-hero__metrics {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: clamp(28px, 4vw, 56px);
  margin: 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--line);
}
.orbit-hero__metrics > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.orbit-hero__metrics dt {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0;
  line-height: 1;
}
.orbit-hero__metrics dd {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin: 0;
  text-transform: uppercase;
}

/* ───── TRUSTED BY (logo strip) ───── */
.orbit-trusted {
  padding: clamp(56px, 7vw, 88px) var(--pad);
  background: var(--bg);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.orbit-trusted__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.orbit-trusted__label {
  font-size: 13px;
  color: var(--ink-muted);
  margin: 0;
  text-align: center;
}
.orbit-trusted__logos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 4vw, 56px);
  justify-content: center;
}
.orbit-trusted__logos li {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--ink-dim);
  opacity: 0.7;
  transition: opacity .25s var(--ease), color .25s var(--ease);
}
.orbit-trusted__logos li:hover {
  opacity: 1;
  color: var(--ink);
}

/* ───── WHY ORBIT ───── */
.orbit-why {
  padding: clamp(96px, 13vw, 160px) var(--pad);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.orbit-why__inner {
  max-width: var(--max);
  margin: 0 auto;
}
.orbit-why__head {
  max-width: 720px;
  margin: 0 0 clamp(56px, 7vw, 88px);
}
.orbit-why__h {
  font-size: clamp(32px, 4.4vw, 56px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.028em;
  margin: 18px 0 22px;
  color: var(--ink);
  max-width: 18ch;
}
.orbit-why__lede {
  font-size: clamp(15px, 1.2vw, 18px);
  color: var(--ink-dim);
  line-height: 1.7;
  margin: 0;
  max-width: 60ch;
}
.orbit-why__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.orbit-why-card {
  position: relative;
  padding: 36px 32px 32px;
  background:
    linear-gradient(180deg, rgba(159,187,224,0.04), rgba(159,187,224,0.012));
  border: 1px solid rgba(159,187,224,0.14);
  border-radius: 8px;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 260px;
  overflow: hidden;
}
.orbit-why-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(159,187,224,0.5), transparent);
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.orbit-why-card:hover {
  border-color: rgba(159,187,224,0.34);
  transform: translateY(-2px);
}
.orbit-why-card:hover::before { opacity: 1; }
.orbit-why-card__num {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--orbit);
  letter-spacing: 0.12em;
  margin: 0;
}
.orbit-why-card__h {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 4px 0 8px;
  line-height: 1.2;
}
.orbit-why-card__p {
  font-size: 14px;
  color: var(--ink-dim);
  line-height: 1.7;
  margin: 0;
  flex: 1;
}
.orbit-why-card__tag {
  margin: auto 0 0;
  padding-top: 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  text-transform: uppercase;
}

/* ───── STATS ───── */
.orbit-stats {
  padding: clamp(96px, 13vw, 160px) var(--pad);
  background:
    radial-gradient(ellipse 60% 80% at 50% 30%, rgba(159,187,224,0.05), transparent 60%),
    var(--bg);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.orbit-stats__inner {
  max-width: var(--max);
  margin: 0 auto;
}
.orbit-stats__head {
  max-width: 640px;
  margin: 0 0 clamp(48px, 6vw, 72px);
}
.orbit-stats__h {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.022em;
  margin: 18px 0 0;
  color: var(--ink);
}
.orbit-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}
.orbit-stat {
  padding: 36px 28px 32px 0;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.orbit-stat:last-child { border-right: none; }
.orbit-stat__num {
  font-size: clamp(48px, 5vw, 64px);
  font-weight: 500;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: 0;
  line-height: 1;
}
.orbit-stat__num span {
  font-size: 0.6em;
  font-weight: 400;
  color: var(--ink-dim);
  margin-left: 2px;
}
.orbit-stat__label {
  font-size: 14.5px;
  color: var(--ink);
  margin: 8px 0 4px;
  font-weight: 450;
  line-height: 1.4;
}
.orbit-stat__src {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
  margin: 0;
}

/* =========================================================
   PRODUCT DETAIL pages (orbit-conductor / sentinel / consulting / work-os)
   Stripe-style: hero with split (copy + product mockup) → 3-up features
   → 4-step how-it-works → customer quote → related → CTA
   ========================================================= */
.is-detail { background: var(--bg); }

/* ───── Hero (split copy + mockup) ───── */
.detail-hero {
  padding: clamp(96px, 13vw, 160px) var(--pad) clamp(72px, 9vw, 120px);
  background:
    radial-gradient(ellipse 50% 80% at 80% 20%, rgba(159,187,224,0.08), transparent 60%),
    var(--bg);
  border-bottom: 1px solid var(--line);
}
.detail-hero__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(56px, 7vw, 96px);
  align-items: center;
}
.detail-hero__copy { min-width: 0; }
.detail-hero__h {
  font-size: clamp(40px, 5.4vw, 68px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin: 18px 0 24px;
  color: var(--ink);
  max-width: 14ch;
}
.detail-hero__sub {
  font-size: clamp(16px, 1.25vw, 18px);
  color: var(--ink-dim);
  line-height: 1.7;
  max-width: 50ch;
  margin: 0 0 32px;
}
.detail-hero__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.detail-hero__viz {
  margin: 0;
}

/* ───── Detail mockup ───── */
.detail-mock {
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg, #0c0d11 0%, #06070a 100%);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.7), 0 0 80px -20px rgba(159,187,224,0.1);
}
.detail-mock__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,0.012);
}
.detail-mock__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
}
.detail-mock__path {
  margin-left: 12px;
  flex: 1;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}
.detail-mock__live {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  padding: 2px 7px;
  background: rgba(127,212,158,0.16);
  color: var(--green);
  border-radius: 999px;
}
.detail-mock__body {
  padding: 24px 22px;
}
.detail-mock__headline {
  font-size: 17px;
  color: var(--ink);
  margin: 0 0 4px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.detail-mock__headline em {
  font-style: normal;
  color: var(--orbit);
  font-weight: 600;
}
.detail-mock__sub {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
  margin: 0 0 18px;
}
.detail-mock__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}
.detail-mock-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.detail-mock-row:last-child { border-bottom: none; }
.detail-mock-row__t {
  font-size: 13px;
  color: var(--ink-2);
  margin: 0;
}
.detail-mock-row__time {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}

/* ───── Features 3-up ───── */
.detail-features {
  padding: clamp(96px, 13vw, 140px) var(--pad);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.detail-features__inner {
  max-width: var(--max);
  margin: 0 auto;
}
.detail-features__head {
  margin-bottom: clamp(48px, 6vw, 80px);
  max-width: 720px;
}
.detail-features__h {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.022em;
  margin: 18px 0 0;
  color: var(--ink);
  max-width: 22ch;
}
.detail-features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.detail-feature {
  padding: 32px 28px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.detail-feature:hover {
  border-color: rgba(159,187,224,0.28);
  background: rgba(159,187,224,0.04);
}
.detail-feature__icon {
  width: 32px; height: 32px;
  color: var(--orbit);
  margin-bottom: 18px;
}
.detail-feature__icon svg { width: 100%; height: 100%; }
.detail-feature__h {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.012em;
  margin: 0 0 10px;
  color: var(--ink);
  line-height: 1.32;
}
.detail-feature__p {
  font-size: 13.5px;
  color: var(--ink-dim);
  line-height: 1.7;
  margin: 0;
}

/* ───── How it works (4-step) ───── */
.detail-how {
  position: relative;
  padding: clamp(96px, 13vw, 140px) var(--pad);
  background: #000;
  background-image: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(12,22,42,0.50) 0%, transparent 70%);
  border-bottom: 1px solid rgba(100,155,210,0.08);
}
.detail-how__inner {
  max-width: var(--max);
  margin: 0 auto;
}
.detail-how__head {
  margin-bottom: clamp(48px, 6vw, 80px);
  max-width: 640px;
}
.detail-how__h {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.022em;
  margin: 18px 0 0;
  color: var(--ink);
  max-width: 22ch;
}
.detail-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(100,155,210,0.12);
}
.detail-steps li {
  padding: 32px 28px 36px 0;
  border-right: 1px solid rgba(100,155,210,0.08);
  border-bottom: 1px solid rgba(100,155,210,0.08);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.detail-steps li:last-child { border-right: none; }
.detail-steps__n {
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(120,165,220,0.62);
  letter-spacing: 0.12em;
  margin-bottom: 4px;
}
.detail-steps li h3 {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.012em;
  margin: 0;
  color: var(--ink);
  line-height: 1.32;
}
.detail-steps li p {
  font-size: 13px;
  color: var(--ink-dim);
  line-height: 1.65;
  margin: 0;
  max-width: 28ch;
}

/* ───── Customer quote ───── */
.detail-quote {
  padding: clamp(96px, 13vw, 140px) var(--pad);
  background:
    radial-gradient(ellipse 60% 80% at 50% 50%, rgba(159,187,224,0.05), transparent 60%),
    var(--bg);
  border-bottom: 1px solid var(--line);
}
.detail-quote__inner {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
.detail-quote blockquote {
  margin: 0 0 28px;
  padding: 0;
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.014em;
  color: var(--ink);
  border: none;
  background: none;
}
.detail-quote__author {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}
.detail-quote__author b {
  color: var(--ink);
  font-weight: 500;
  margin-right: 8px;
}
.detail-quote__author span {
  color: var(--ink-muted);
}

/* ───── Related engines ───── */
.detail-related {
  padding: clamp(80px, 11vw, 120px) var(--pad);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.detail-related__inner {
  max-width: var(--max);
  margin: 0 auto;
}
.detail-related__head {
  margin-bottom: clamp(40px, 5vw, 64px);
}
.detail-related__h {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 500;
  letter-spacing: -0.018em;
  margin: 14px 0 0;
  color: var(--ink);
}
.detail-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.detail-related-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 22px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
  text-decoration: none;
}
.detail-related-card:hover {
  border-color: rgba(159,187,224,0.3);
  background: rgba(159,187,224,0.04);
  transform: translateY(-2px);
}
.detail-related-card__sym {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--orbit);
}
.detail-related-card h3 {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.012em;
  margin: 0;
  color: var(--ink);
}
.detail-related-card p {
  font-size: 12.5px;
  color: var(--ink-dim);
  line-height: 1.55;
  margin: 0;
}

/* Responsive */
@media (max-width: 1024px) {
  .detail-hero__inner { grid-template-columns: 1fr; gap: 48px; }
  .detail-features__grid { grid-template-columns: 1fr; }
  .detail-steps { grid-template-columns: repeat(2, 1fr); }
  .detail-steps li:nth-child(2n) { border-right: none; }
  .detail-related__grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .detail-steps { grid-template-columns: 1fr; }
  .detail-steps li:nth-child(n) { border-right: none; }
}

/* =========================================================
   CUSTOMERS page (orbit-customers.html)
   ========================================================= */
.is-customers { background: var(--bg); }
.customers-hero {
  padding: clamp(96px, 13vw, 160px) var(--pad) clamp(56px, 7vw, 88px);
  background: radial-gradient(ellipse 60% 80% at 70% 30%, rgba(159,187,224,0.08), transparent 60%), var(--bg);
  border-bottom: 1px solid var(--line);
}
.customers-hero__inner { max-width: 880px; margin: 0 auto; }
.customers-hero__title {
  font-size: clamp(40px, 5.6vw, 72px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin: 18px 0 28px;
  color: var(--ink);
  max-width: 16ch;
}
.customers-hero__sub {
  font-size: clamp(16px, 1.3vw, 19px);
  color: var(--ink-dim);
  line-height: 1.7;
  margin: 0;
  max-width: 56ch;
}
.customers-list {
  padding: clamp(72px, 10vw, 120px) var(--pad);
}
.customers-list__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6vw, 80px);
}
.customer-card {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: clamp(40px, 5vw, 80px);
  padding: clamp(40px, 5vw, 64px);
  background: rgba(255,255,255,0.018);
  border: 1px solid var(--line);
  border-radius: 10px;
  align-items: start;
}
.customer-card--reverse { grid-template-columns: 1fr 280px; }
.customer-card--reverse .customer-card__meta { order: 2; }
.customer-card--reverse .customer-card__copy { order: 1; }
.customer-card__industry {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  margin: 0 0 28px;
  text-transform: uppercase;
}
.customer-card__metric {
  font-size: clamp(56px, 6vw, 84px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 0;
  color: var(--orbit);
}
.customer-card__metric span {
  font-size: 0.55em;
  color: var(--ink-dim);
  margin-left: 2px;
}
.customer-card__metric-label {
  font-size: 13.5px;
  color: var(--ink-dim);
  margin: 14px 0 0;
}
.customer-card__h {
  font-size: clamp(24px, 2.8vw, 32px);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.18;
  margin: 0 0 18px;
  color: var(--ink);
}
.customer-card__p {
  font-size: 15px;
  color: var(--ink-dim);
  line-height: 1.75;
  margin: 0 0 24px;
  max-width: 56ch;
}
.customer-card__bul {
  list-style: none;
  margin: 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.customer-card__bul li {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-2);
  letter-spacing: 0.04em;
}
.customer-card__bul li::before {
  content: "·  ";
  color: var(--orbit);
}
@media (max-width: 900px) {
  .customer-card,
  .customer-card--reverse {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .customer-card--reverse .customer-card__meta,
  .customer-card--reverse .customer-card__copy { order: 0; }
}

/* =========================================================
   PRICING page (orbit-pricing.html)
   ========================================================= */
.is-pricing { background: var(--bg); }
.pricing-hero {
  padding: clamp(96px, 13vw, 160px) var(--pad) clamp(56px, 7vw, 88px);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.pricing-hero__inner { max-width: 880px; margin: 0 auto; }
.pricing-hero__title {
  font-size: clamp(40px, 5.6vw, 72px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin: 18px 0 28px;
  color: var(--ink);
  max-width: 14ch;
}
.pricing-hero__sub {
  font-size: clamp(16px, 1.3vw, 19px);
  color: var(--ink-dim);
  line-height: 1.7;
  margin: 0;
  max-width: 56ch;
}
.pricing-tiers {
  padding: clamp(72px, 10vw, 120px) var(--pad);
}
.pricing-tiers__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
}
.pricing-card {
  display: flex;
  flex-direction: column;
  padding: 40px 32px 36px;
  background: rgba(255,255,255,0.018);
  border: 1px solid var(--line);
  border-radius: 10px;
  gap: 14px;
  transition: border-color .25s var(--ease), transform .25s var(--ease);
  min-height: 480px;
}
.pricing-card:hover {
  border-color: rgba(159,187,224,0.28);
  transform: translateY(-2px);
}
.pricing-card--featured {
  background: rgba(159,187,224,0.06);
  border-color: rgba(159,187,224,0.32);
}
.pricing-card__tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  margin: 0 0 6px;
  text-transform: uppercase;
}
.pricing-card--featured .pricing-card__tag { color: var(--orbit); }
.pricing-card__h {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.022em;
  margin: 0;
  color: var(--ink);
}
.pricing-card__price {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-dim);
  margin: 0 0 8px;
  letter-spacing: 0.02em;
}
.pricing-card__lede {
  font-size: 14px;
  color: var(--ink-dim);
  line-height: 1.65;
  margin: 0 0 14px;
}
.pricing-card__bul {
  list-style: none;
  margin: 0 0 24px;
  padding: 16px 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.pricing-card__bul li {
  font-size: 13.5px;
  color: var(--ink-2);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.pricing-card__bul li::before {
  content: "✓";
  color: var(--orbit);
  font-family: var(--mono);
  flex-shrink: 0;
}
.pricing-card a {
  align-self: flex-start;
  margin-top: auto;
}
@media (max-width: 1024px) {
  .pricing-tiers__inner { grid-template-columns: 1fr; }
  .pricing-card { min-height: auto; }
}

/* ───── ENGINES STRIP — single statement + link, no 4-체제 ───── */
.orbit-engines-strip {
  padding: clamp(72px, 10vw, 120px) var(--pad);
  background: var(--bg);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.orbit-engines-strip .op-sec__inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.orbit-engines-strip__statement {
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 24px;
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}
.orbit-engines-strip__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--orbit);
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: gap .2s var(--ease);
}
.orbit-engines-strip__cta:hover { gap: 12px; }

/* ───── ENGINE TILES (4-up cards on overview page) ───── */
.engine-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.engine-tile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 36px 32px 32px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  text-decoration: none;
  transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
  min-height: 240px;
}
.engine-tile:hover {
  border-color: rgba(159,187,224,0.3);
  background: rgba(159,187,224,0.04);
  transform: translateY(-2px);
}
.engine-tile__sym {
  font-family: var(--mono);
  font-size: 18px;
  color: var(--orbit);
  margin-bottom: 4px;
  line-height: 1;
}
.engine-tile__tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  margin: 0;
  text-transform: uppercase;
}
.engine-tile__h {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 6px 0 10px;
  line-height: 1.25;
}
.engine-tile__p {
  font-size: 13.5px;
  color: var(--ink-dim);
  line-height: 1.65;
  margin: 0;
}
.engine-tile__more {
  margin: auto 0 0;
  padding-top: 14px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
  transition: color .25s var(--ease);
}
.engine-tile:hover .engine-tile__more { color: var(--orbit); }

/* ───── Responsive ───── */
@media (max-width: 1024px) {
  .orbit-hero__title { font-size: clamp(40px, 8vw, 72px); }
  .orbit-hero__metrics { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .orbit-why__grid { grid-template-columns: 1fr; }
  .engine-grid { grid-template-columns: 1fr; }
  .orbit-stats__grid { grid-template-columns: repeat(2, 1fr); }
  .orbit-stat:nth-child(2) { border-right: none; }
  .orbit-stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); padding-bottom: 28px; }
  .orbit-stat:nth-child(n+3) { padding-top: 28px; }
}
@media (max-width: 720px) {
  .orbit-hero__canvas { width: 130%; right: -25%; opacity: 0.6; }
  .orbit-hero__metrics { grid-template-columns: repeat(2, 1fr); }
  .orbit-stats__grid { grid-template-columns: 1fr; }
  .orbit-stat { border-right: none !important; border-bottom: 1px solid var(--line); padding: 24px 0; }
  .orbit-stat:last-child { border-bottom: none; }
}

/* Orbit overview alignment: reuse the Guide WebGL system and the original orbit renderer. */
.is-orbit .op-hero__bg {
  isolation: isolate;
  background:
    radial-gradient(ellipse 58% 58% at 74% 45%, rgba(238,241,235,0.055), transparent 60%),
    linear-gradient(90deg, rgba(0,0,0,0.96) 0%, rgba(0,0,0,0.88) 34%, rgba(0,0,0,0.58) 64%, rgba(0,0,0,0.92) 100%),
    #000;
}
.is-orbit .orbit-hero-system {
  display: none !important;
}
.is-orbit .op-hero__orbit {
  position: absolute;
  top: 50%;
  right: clamp(-120px, -4vw, -44px);
  z-index: 1;
  width: min(78vw, 1120px);
  height: auto;
  aspect-ratio: 720 / 560;
  margin: 0;
  opacity: 1;
  filter: saturate(1.02) contrast(1.15) brightness(1.22);
  transform: translate3d(0, -50%, 0);
}
.is-orbit .op-hero__orbit .orbit-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  -webkit-mask-image:
    radial-gradient(ellipse 76% 58% at 62% 50%, #000 0%, #000 52%, rgba(0,0,0,0.58) 72%, transparent 94%);
  mask-image:
    radial-gradient(ellipse 76% 58% at 62% 50%, #000 0%, #000 52%, rgba(0,0,0,0.58) 72%, transparent 94%);
}
.is-orbit .op-hero__fade {
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.98) 0%, rgba(0,0,0,0.82) 30%, rgba(0,0,0,0.18) 57%, rgba(0,0,0,0.10) 78%, rgba(0,0,0,0.20) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.46), transparent 26%, transparent 70%, #000 100%);
}
.is-orbit .op-hero__inner {
  position: relative;
  z-index: 4;
}

.is-orbit .orbit-field-bridge {
  position: relative;
  min-height: calc(100vh - var(--nav-h));
  padding: clamp(48px, 6vw, 84px) var(--pad) clamp(72px, 8vw, 112px);
  overflow: hidden;
  border-top: 1px solid rgba(238,241,235,0.04);
  border-bottom: 1px solid rgba(238,241,235,0.04);
  background: #000;
}
.is-orbit .orbit-field-bridge::before,
.is-orbit .orbit-field-bridge::after {
  display: none;
}
.is-orbit .orbit-field-bridge__inner {
  width: min(var(--max), 100%);
  min-height: clamp(640px, 82vh, 920px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, 0.48fr) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 72px);
  align-items: center;
}
.is-orbit .orbit-field-bridge__story {
  position: relative;
  inset: auto;
  z-index: 5;
  width: auto;
  max-width: 440px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  transform: none;
}
.is-orbit .orbit-field-bridge__story::after {
  display: none;
}
.is-orbit .orbit-field-bridge__story span {
  display: block;
  margin-bottom: 18px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(159,187,224,0.86);
}
.is-orbit .orbit-field-bridge__story strong {
  display: block;
  max-width: 11ch;
  font-size: clamp(38px, 5vw, 76px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-shadow: 0 24px 80px rgba(0,0,0,0.9);
}
.is-orbit .orbit-field-bridge__story p {
  max-width: 34ch;
  margin: 22px 0 0;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.76;
  color: var(--ink-dim);
}
.is-orbit .orbit-guide-stage {
  min-height: clamp(620px, 76vh, 880px);
  border-radius: 0;
  overflow: visible;
  background: #000;
  box-shadow: none;
}
.is-orbit .orbit-guide-stage.guide-entry__media::after,
.is-orbit .orbit-guide-stage.guide-entry__media--stage::before {
  opacity: 0.32;
}
.is-orbit .orbit-guide-stage .guide-stage {
  width: 100%;
  min-height: clamp(620px, 76vh, 880px);
  aspect-ratio: 16 / 10;
  filter: saturate(1.08) contrast(1.2) brightness(1.04);
}
.is-orbit .orbit-guide-stage figcaption {
  left: clamp(22px, 3vw, 42px);
  right: clamp(22px, 3vw, 42px);
  bottom: clamp(22px, 3vw, 42px);
  z-index: 4;
}

@media (max-width: 980px) {
  .is-orbit .op-hero__orbit {
    top: 56%;
    right: -38vw;
    width: 118vw;
    opacity: 0.7;
  }
  .is-orbit .orbit-field-bridge__inner {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .is-orbit .orbit-field-bridge__story strong {
    max-width: 13ch;
  }
  .is-orbit .orbit-guide-stage,
  .is-orbit .orbit-guide-stage .guide-stage {
    min-height: clamp(520px, 72vw, 680px);
  }
}

@media (max-width: 720px) {
  .is-orbit .op-hero__orbit {
    top: 58%;
    right: -76vw;
    width: 166vw;
    opacity: 0.56;
    transform: translate3d(0, -50%, 0);
  }
  .is-orbit .orbit-field-bridge {
    padding-top: 48px;
  }
  .is-orbit .orbit-field-bridge__story strong {
    font-size: clamp(34px, 11vw, 54px);
  }
  .is-orbit .orbit-guide-stage,
  .is-orbit .orbit-guide-stage .guide-stage {
    min-height: 480px;
  }
}

/* Orbit Field system pass: larger Guide stage, scroll-unfold, shared grid language. */
.is-orbit .orbit-field-bridge {
  min-height: calc(100vh - var(--nav-h));
  padding: clamp(36px, 4vw, 64px) var(--pad) clamp(64px, 7vw, 108px);
  display: flex;
  align-items: center;
}

.is-orbit .orbit-field-bridge::before {
  content: "";
  display: block;
  position: absolute;
  left: clamp(260px, 30vw, 560px);
  right: max(-18vw, -260px);
  top: clamp(86px, 12vh, 150px);
  height: min(78vh, 760px);
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transform: perspective(1180px) rotateX(72deg) translate3d(0, 120px, 0) scale(0.56, 0.28);
  transform-origin: 50% 82%;
  background:
    linear-gradient(rgba(238,241,235,0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238,241,235,0.18) 1px, transparent 1px),
    linear-gradient(rgba(159,187,224,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(159,187,224,0.09) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 48%, rgba(159,187,224,0.12), transparent 64%);
  background-size: 72px 72px, 72px 72px, 288px 288px, 288px 288px, 100% 100%;
  -webkit-mask-image: radial-gradient(ellipse 74% 62% at 50% 50%, #000 0%, rgba(0,0,0,0.70) 58%, transparent 100%);
  mask-image: radial-gradient(ellipse 74% 62% at 50% 50%, #000 0%, rgba(0,0,0,0.70) 58%, transparent 100%);
}

.is-orbit .orbit-field-bridge.is-field-unfolded::before {
  animation: orbit-field-plane-unfold 1500ms cubic-bezier(0.13, 0.76, 0.18, 1) 80ms both;
}

.is-orbit .orbit-field-bridge__inner {
  position: relative;
  z-index: 1;
  width: min(1760px, calc(100vw - (var(--pad) * 2)));
  min-height: clamp(720px, 88vh, 1000px);
  grid-template-columns: minmax(250px, 0.34fr) minmax(760px, 1.26fr);
  gap: clamp(20px, 3.8vw, 68px);
}

.is-orbit .orbit-field-bridge__story {
  padding-top: clamp(28px, 8vh, 92px);
}

.is-orbit .orbit-field-bridge__story strong {
  max-width: 10.5ch;
  font-size: clamp(46px, 5.6vw, 92px);
}

.is-orbit .orbit-guide-stage {
  min-height: clamp(720px, 88vh, 1000px);
  margin-left: clamp(-76px, -4.5vw, -28px);
  margin-right: clamp(-180px, -8vw, -72px);
  opacity: 0.18;
  clip-path: inset(46% 22% 48% 22%);
  transform: perspective(1180px) rotateX(68deg) translate3d(0, 86px, 0) scale(0.72, 0.42);
  transform-origin: 50% 82%;
  filter: saturate(0.92) contrast(1.08) brightness(0.72);
}

.is-orbit .orbit-field-bridge.is-field-unfolded .orbit-guide-stage {
  animation: orbit-field-stage-unfold 1700ms cubic-bezier(0.14, 0.74, 0.18, 1) 160ms both;
}

.is-orbit .orbit-guide-stage .guide-stage {
  min-height: clamp(720px, 88vh, 1000px);
  aspect-ratio: 16 / 9;
}

.is-orbit .orbit-guide-stage figcaption {
  opacity: 0;
  transform: translateY(18px);
}

.is-orbit .orbit-field-bridge.is-field-unfolded .orbit-guide-stage figcaption {
  animation: orbit-field-caption-in 780ms ease 1180ms both;
}

@keyframes orbit-field-plane-unfold {
  0% {
    opacity: 0;
    transform: perspective(1180px) rotateX(72deg) translate3d(0, 120px, 0) scale(0.56, 0.28);
    filter: brightness(0.6) blur(0.4px);
  }
  44% {
    opacity: 0.26;
    transform: perspective(1180px) rotateX(66deg) translate3d(0, 42px, 0) scale(0.86, 0.68);
  }
  100% {
    opacity: 0.46;
    transform: perspective(1180px) rotateX(61deg) translate3d(0, -4px, 0) scale(1.12, 1);
    filter: brightness(1) blur(0);
  }
}

@keyframes orbit-field-stage-unfold {
  0% {
    opacity: 0.18;
    clip-path: inset(46% 22% 48% 22%);
    transform: perspective(1180px) rotateX(68deg) translate3d(0, 86px, 0) scale(0.72, 0.42);
    filter: saturate(0.86) contrast(1.04) brightness(0.62);
  }
  38% {
    opacity: 0.60;
    clip-path: inset(22% 10% 26% 10%);
    transform: perspective(1180px) rotateX(48deg) translate3d(0, 28px, 0) scale(0.94, 0.72);
  }
  72% {
    opacity: 0.92;
    clip-path: inset(4% 2% 5% 2%);
    transform: perspective(1180px) rotateX(12deg) translate3d(0, 4px, 0) scale(1.02, 0.96);
  }
  100% {
    opacity: 1;
    clip-path: inset(0);
    transform: none;
    filter: saturate(1.08) contrast(1.2) brightness(1.04);
  }
}

@keyframes orbit-field-caption-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

/* ── Hide intro header ("FIELD UNFOLD" text above wizard) ── */
.is-orbit .field-demo-section > .op-sec__inner > .op-sec__head {
  display: none !important;
}

.is-orbit .field-demo-section,
.is-orbit #cycle.op-sec,
.is-orbit .field-surfaces-section,
.is-orbit .detail-how {
  background:
    radial-gradient(ellipse 72% 38% at 50% 0%, rgba(159,187,224,0.10), transparent 72%),
    linear-gradient(180deg, #000 0%, #010202 100%);
}

.is-orbit .field-demo-section::before,
.is-orbit #cycle.op-sec::before,
.is-orbit .field-surfaces-section::before,
.is-orbit .detail-how::before {
  left: -10%;
  right: -10%;
  top: clamp(34px, 7vw, 90px);
  height: clamp(420px, 58vw, 760px);
  opacity: 0;
  transform: perspective(1080px) rotateX(72deg) translate3d(0, 110px, 0) scale(0.68, 0.32);
  transform-origin: 50% 76%;
  background:
    linear-gradient(rgba(238,241,235,0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238,241,235,0.11) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 50%, rgba(159,187,224,0.08), transparent 64%);
  background-size: 82px 82px, 82px 82px, 100% 100%;
  -webkit-mask-image: radial-gradient(ellipse 72% 58% at 50% 50%, #000 0%, rgba(0,0,0,0.58) 58%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 58% at 50% 50%, #000 0%, rgba(0,0,0,0.58) 58%, transparent 100%);
}

.is-orbit .field-demo-section.is-field-unfolded::before,
.is-orbit #cycle.op-sec.is-field-unfolded::before,
.is-orbit .field-surfaces-section.is-field-unfolded::before,
.is-orbit .detail-how.is-field-unfolded::before {
  animation: orbit-section-field-unfold 1300ms cubic-bezier(0.16, 0.72, 0.2, 1) both;
}

@keyframes orbit-section-field-unfold {
  0% {
    opacity: 0;
    transform: perspective(1080px) rotateX(72deg) translate3d(0, 110px, 0) scale(0.68, 0.32);
  }
  100% {
    opacity: 0.34;
    transform: perspective(1080px) rotateX(63deg) translate3d(0, 0, 0) scale(1.08, 1);
  }
}

.is-orbit .field-demo-grid,
.is-orbit .field-surface-grid,
.is-orbit .detail-steps,
.is-orbit .field-cycle {
  position: relative;
  z-index: 1;
}

.is-orbit .field-demo-grid,
.is-orbit .field-surface-grid {
  gap: clamp(10px, 1.2vw, 16px);
  border: 0;
  background: transparent;
  overflow: visible;
}

.is-orbit .field-demo-panel,
.is-orbit .field-surface,
.is-orbit .field-cycle li,
.is-orbit .detail-steps li {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(238,241,235,0.08);
  background:
    radial-gradient(ellipse 72% 42% at 50% 100%, rgba(159,187,224,0.045), transparent 74%),
    linear-gradient(180deg, rgba(7,10,10,0.92), rgba(0,0,0,0.98)),
    #000;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
}

.is-orbit .field-demo-panel::before,
.is-orbit .field-surface::before,
.is-orbit .field-cycle li::after,
.is-orbit .detail-steps li::after {
  content: "";
  position: absolute;
  display: block;
  pointer-events: none;
  opacity: 0.34;
  height: min(56%, 180px);
  left: 22px;
  right: 22px;
  bottom: 18px;
  top: auto;
  transform: perspective(560px) rotateX(64deg) translateY(10px);
  transform-origin: 50% 100%;
  background:
    linear-gradient(rgba(238,241,235,0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238,241,235,0.11) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.82) 28%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.82) 28%, transparent 100%);
}

.is-orbit .field-demo-panel::after,
.is-orbit .field-surface::after,
.is-orbit .field-cycle li::before,
.is-orbit .detail-steps li::before {
  content: "";
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: clamp(52px, 7vw, 86px);
  height: 1px;
  z-index: 0;
  opacity: 0.34;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(159,187,224,0.40), rgba(238,241,235,0.18), transparent);
}

.is-orbit .field-demo-panel > *,
.is-orbit .field-surface > *,
.is-orbit .field-cycle li > *,
.is-orbit .detail-steps li > * {
  position: relative;
  z-index: 1;
}

.is-orbit .field-demo-panel,
.is-orbit .field-surface {
  min-height: clamp(360px, 31vw, 480px);
}

/* Orbit Field demo: keep the real WebGL grid, remove the extra foreground plane. */
.is-orbit .orbit-field-bridge::before,
.is-orbit .orbit-field-bridge.is-field-unfolded::before {
  content: none !important;
  display: none !important;
  animation: none !important;
}

.is-orbit .field-demo-panel--active,
.is-orbit .field-surface:hover {
  background:
    radial-gradient(ellipse 84% 52% at 50% 76%, rgba(159,187,224,0.10), transparent 72%),
    linear-gradient(180deg, rgba(9,13,15,0.96), rgba(0,0,0,0.98)),
    #000;
}

.is-orbit .field-panel-stage {
  height: clamp(112px, 10vw, 168px);
  bottom: clamp(86px, 8vw, 118px);
  background-size: 42px 42px;
}

.is-orbit .field-demo-map {
  left: 7%;
  right: 7%;
  bottom: 13%;
  height: 46%;
  background-size: 54px 54px;
}

.is-orbit .field-cycle li,
.is-orbit .detail-steps li {
  min-height: clamp(230px, 22vw, 320px);
}

.is-orbit .field-surface-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1180px) {
  .is-orbit .orbit-field-bridge__inner {
    grid-template-columns: 1fr;
  }

  .is-orbit .orbit-guide-stage {
    margin: clamp(-42px, -4vw, -18px) clamp(-76px, -5vw, -28px) 0;
  }

  .is-orbit .orbit-field-bridge__story {
    max-width: 720px;
    padding-top: 0;
  }

  .is-orbit .orbit-field-bridge__story strong {
    max-width: 14ch;
  }

  .is-orbit .field-surface-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .is-orbit .orbit-field-bridge {
    padding-top: 48px;
  }

  .is-orbit .orbit-field-bridge::before {
    left: -20%;
    right: -20%;
    top: 38%;
    height: 44vh;
  }

  .is-orbit .orbit-field-bridge__inner {
    min-height: auto;
  }

  .is-orbit .orbit-guide-stage,
  .is-orbit .orbit-guide-stage .guide-stage {
    min-height: 560px;
  }

  .is-orbit .field-demo-grid,
  .is-orbit .field-surface-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .is-orbit .orbit-field-bridge::before,
  .is-orbit .orbit-guide-stage,
  .is-orbit .orbit-guide-stage figcaption,
  .is-orbit .field-demo-section::before,
  .is-orbit #cycle.op-sec::before,
  .is-orbit .field-surfaces-section::before,
  .is-orbit .detail-how::before {
    animation: none !important;
    opacity: 1;
    clip-path: inset(0);
    transform: none;
  }
}

/* Orbit Field composition correction: keep the stage large without crushing the copy. */
.is-orbit .orbit-field-bridge {
  min-height: max(880px, calc(100vh - var(--nav-h)));
  padding: clamp(64px, 7vh, 96px) var(--pad) clamp(76px, 8vh, 112px);
  display: block;
}

.is-orbit .orbit-field-bridge::before {
  left: max(-8vw, -120px);
  right: max(-10vw, -160px);
  top: clamp(120px, 17vh, 190px);
  height: clamp(560px, 72vh, 820px);
  transform: perspective(1220px) rotateX(76deg) translate3d(0, 150px, 0) scale(0.48, 0.22);
  transform-origin: 50% 84%;
}

.is-orbit .orbit-field-bridge.is-field-unfolded::before {
  animation: orbit-field-plane-unfold-wide 1800ms cubic-bezier(0.13, 0.76, 0.16, 1) 60ms both;
}

.is-orbit .orbit-field-bridge__inner {
  display: block;
  width: min(1780px, calc(100vw - (var(--pad) * 2)));
  min-height: clamp(720px, 82vh, 960px);
  margin: 0 auto;
}

.is-orbit .orbit-field-bridge__story {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 5;
  width: min(560px, 43vw);
  max-width: 560px;
  padding-top: 0;
  transform: translateY(-50%);
}

.is-orbit .orbit-field-bridge__story strong {
  max-width: 14.5ch;
  font-size: clamp(42px, 4.05vw, 68px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.is-orbit .orbit-field-bridge__story p {
  max-width: 39ch;
}

.is-orbit .orbit-guide-stage {
  position: absolute;
  z-index: 2;
  left: clamp(360px, 34vw, 590px);
  right: max(-12vw, -210px);
  top: 50%;
  height: clamp(680px, 82vh, 950px);
  min-height: 0;
  margin: 0;
  opacity: 0.12;
  clip-path: inset(48% 26% 48% 26%);
  transform: perspective(1220px) rotateX(72deg) translate3d(0, 112px, 0) scale(0.66, 0.36);
  transform-origin: 50% 84%;
}

.is-orbit .orbit-field-bridge.is-field-unfolded .orbit-guide-stage {
  animation: orbit-field-stage-unfold-wide 1850ms cubic-bezier(0.14, 0.74, 0.16, 1) 150ms both;
}

.is-orbit .orbit-guide-stage .guide-stage {
  height: 100%;
  min-height: 100%;
  filter: saturate(1.32) contrast(1.44) brightness(2.05);
}

.is-orbit .orbit-field-bridge .orbit-guide-stage figcaption {
  display: none;
}

@keyframes orbit-field-plane-unfold-wide {
  0% {
    opacity: 0;
    transform: perspective(1220px) rotateX(76deg) translate3d(0, 150px, 0) scale(0.48, 0.22);
    filter: brightness(0.54) blur(0.6px);
  }
  42% {
    opacity: 0.34;
    transform: perspective(1220px) rotateX(68deg) translate3d(0, 46px, 0) scale(0.88, 0.64);
  }
  100% {
    opacity: 0.52;
    transform: perspective(1220px) rotateX(60deg) translate3d(0, -14px, 0) scale(1.16, 1.02);
    filter: brightness(1.06) blur(0);
  }
}

@keyframes orbit-field-stage-unfold-wide {
  0% {
    opacity: 0.12;
    clip-path: inset(48% 26% 48% 26%);
    transform: perspective(1220px) rotateX(72deg) translate3d(0, 112px, 0) scale(0.66, 0.36);
    filter: saturate(0.82) contrast(1.02) brightness(0.55);
  }
  36% {
    opacity: 0.56;
    clip-path: inset(24% 10% 26% 10%);
    transform: perspective(1220px) rotateX(52deg) translate3d(0, 42px, 0) scale(0.92, 0.68);
  }
  74% {
    opacity: 0.96;
    clip-path: inset(3% 2% 4% 2%);
    transform: perspective(1220px) rotateX(10deg) translate3d(0, -2px, 0) scale(1.02, 0.98);
  }
  100% {
    opacity: 1;
    clip-path: inset(0);
    transform: translateY(-50%);
    filter: saturate(1.12) contrast(1.22) brightness(1.08);
  }
}

.is-orbit .field-demo-section,
.is-orbit #cycle.op-sec,
.is-orbit .field-surfaces-section,
.is-orbit .detail-how {
  position: relative;
  isolation: isolate;
}

.is-orbit .field-demo-section::before,
.is-orbit #cycle.op-sec::before,
.is-orbit .field-surfaces-section::before,
.is-orbit .detail-how::before {
  height: clamp(500px, 62vw, 820px);
  opacity: 0;
  background-size: 76px 76px, 76px 76px, 100% 100%;
}

.is-orbit .field-demo-section.is-field-unfolded::before,
.is-orbit #cycle.op-sec.is-field-unfolded::before,
.is-orbit .field-surfaces-section.is-field-unfolded::before,
.is-orbit .detail-how.is-field-unfolded::before {
  animation: orbit-section-field-unfold-wide 1450ms cubic-bezier(0.16, 0.72, 0.18, 1) both;
}

@keyframes orbit-section-field-unfold-wide {
  0% {
    opacity: 0;
    transform: perspective(1120px) rotateX(76deg) translate3d(0, 128px, 0) scale(0.62, 0.28);
  }
  100% {
    opacity: 0.40;
    transform: perspective(1120px) rotateX(62deg) translate3d(0, -8px, 0) scale(1.12, 1.02);
  }
}

.is-orbit .field-demo-panel,
.is-orbit .field-surface,
.is-orbit .field-cycle li,
.is-orbit .detail-steps li {
  border-color: rgba(238,241,235,0.10);
  background:
    radial-gradient(ellipse 80% 44% at 50% 100%, rgba(159,187,224,0.07), transparent 74%),
    linear-gradient(180deg, rgba(8,10,10,0.94), rgba(0,0,0,0.98)),
    #000;
}

@media (max-width: 1180px) {
  .is-orbit .orbit-field-bridge__story {
    position: relative;
    top: auto;
    width: min(720px, 100%);
    max-width: 720px;
    transform: none;
  }

  .is-orbit .orbit-guide-stage {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    height: clamp(620px, 74vw, 820px);
    margin-top: clamp(28px, 5vw, 56px);
  }
}

@media (max-width: 760px) {
  .is-orbit .orbit-field-bridge {
    min-height: auto;
  }

  .is-orbit .orbit-field-bridge__story {
    width: 100%;
  }

  .is-orbit .orbit-field-bridge__story strong {
    max-width: 12.5ch;
    font-size: clamp(34px, 10vw, 52px);
  }

  .is-orbit .orbit-guide-stage {
    height: 560px;
  }
}

/* Orbit Field continuity polish: keep lower sections in the same stage system. */
.is-orbit .field-demo-section,
.is-orbit #cycle.op-sec,
.is-orbit .field-surfaces-section,
.is-orbit .detail-how {
  background:
    radial-gradient(ellipse 64% 34% at 50% 4%, rgba(238,241,235,0.045), transparent 72%),
    radial-gradient(ellipse 88% 44% at 50% 72%, rgba(159,187,224,0.035), transparent 78%),
    linear-gradient(180deg, #000 0%, #010101 54%, #000 100%);
}

.is-orbit .field-demo-section {
  padding-top: clamp(108px, 12vw, 172px);
  padding-bottom: clamp(104px, 12vw, 168px);
  overflow: hidden;
}

.is-orbit .field-demo-section .op-sec__inner,
.is-orbit #cycle.op-sec .op-sec__inner,
.is-orbit .field-surfaces-section .op-sec__inner,
.is-orbit .detail-how__inner {
  position: relative;
  z-index: 1;
}

.is-orbit .field-demo-section .op-sec__inner::before,
.is-orbit .field-surfaces-section .op-sec__inner::before,
.is-orbit .detail-how__inner::before {
  content: "";
  position: absolute;
  left: max(-8vw, -120px);
  right: max(-8vw, -120px);
  top: clamp(220px, 27vw, 360px);
  height: clamp(360px, 42vw, 640px);
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transform: perspective(1120px) rotateX(68deg) translate3d(0, 88px, 0) scale(0.78, 0.48);
  transform-origin: 50% 100%;
  background:
    linear-gradient(rgba(238,241,235,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238,241,235,0.085) 1px, transparent 1px),
    linear-gradient(rgba(159,187,224,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(159,187,224,0.04) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 38%, rgba(238,241,235,0.08), transparent 64%);
  background-size: 74px 74px, 74px 74px, 296px 296px, 296px 296px, 100% 100%;
  -webkit-mask-image: radial-gradient(ellipse 80% 58% at 50% 46%, #000 0%, rgba(0,0,0,0.68) 56%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 58% at 50% 46%, #000 0%, rgba(0,0,0,0.68) 56%, transparent 100%);
}

.is-orbit .field-demo-section.is-field-unfolded .op-sec__inner::before,
.is-orbit .field-surfaces-section.is-field-unfolded .op-sec__inner::before,
.is-orbit .detail-how.is-field-unfolded .detail-how__inner::before {
  animation: orbit-lower-field-plane-in 1500ms cubic-bezier(0.15, 0.74, 0.18, 1) both;
}

@keyframes orbit-lower-field-plane-in {
  0% {
    opacity: 0;
    transform: perspective(1120px) rotateX(72deg) translate3d(0, 112px, 0) scale(0.62, 0.30);
    filter: brightness(0.72) blur(0.5px);
  }
  46% {
    opacity: 0.20;
    transform: perspective(1120px) rotateX(64deg) translate3d(0, 34px, 0) scale(0.92, 0.72);
  }
  100% {
    opacity: 0.30;
    transform: perspective(1120px) rotateX(58deg) translate3d(0, -8px, 0) scale(1.08, 1);
    filter: brightness(1) blur(0);
  }
}

.is-orbit .field-demo-grid {
  position: relative;
  z-index: 2;
  margin-top: clamp(52px, 6vw, 84px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 30px);
  border: 0;
  background: transparent;
  overflow: visible;
  isolation: isolate;
}

.is-orbit .field-demo-grid::before {
  content: "";
  position: absolute;
  left: 5%;
  right: 5%;
  top: 48%;
  height: 1px;
  z-index: 0;
  pointer-events: none;
  opacity: 0.48;
  background: linear-gradient(90deg, transparent, rgba(159,187,224,0.26), rgba(238,241,235,0.20), rgba(159,187,224,0.26), transparent);
}

.is-orbit .field-demo-grid::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 48%;
  width: 10px;
  height: 10px;
  z-index: 0;
  pointer-events: none;
  border: 1px solid rgba(238,241,235,0.44);
  background: rgba(238,241,235,0.18);
  box-shadow: 0 0 34px rgba(159,187,224,0.22);
  transform: translate(-50%, -50%) rotate(45deg);
}

.is-orbit .field-demo-panel {
  min-height: clamp(430px, 36vw, 560px);
  padding: clamp(34px, 3.5vw, 52px);
  border: 0;
  border-top: 1px solid rgba(238,241,235,0.13);
  border-bottom: 1px solid rgba(238,241,235,0.10);
  background:
    linear-gradient(180deg, rgba(238,241,235,0.030), transparent 16%),
    radial-gradient(ellipse 76% 34% at 50% 94%, rgba(159,187,224,0.048), transparent 72%),
    linear-gradient(180deg, rgba(5,7,7,0.38), rgba(0,0,0,0.66));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.018);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.is-orbit .field-demo-panel::before {
  left: clamp(24px, 3vw, 42px);
  right: clamp(24px, 3vw, 42px);
  bottom: clamp(114px, 9vw, 154px);
  height: clamp(110px, 13vw, 190px);
  opacity: 0.48;
  border: 0;
  transform: perspective(720px) rotateX(62deg) translateY(10px);
  background:
    linear-gradient(rgba(238,241,235,0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238,241,235,0.10) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 42%, rgba(159,187,224,0.16), transparent 68%);
  background-size: 42px 42px, 42px 42px, 100% 100%;
  -webkit-mask-image: radial-gradient(ellipse 84% 68% at 50% 48%, #000 0%, rgba(0,0,0,0.70) 54%, transparent 100%);
  mask-image: radial-gradient(ellipse 84% 68% at 50% 48%, #000 0%, rgba(0,0,0,0.70) 54%, transparent 100%);
}

.is-orbit .field-demo-panel::after {
  left: clamp(34px, 3.5vw, 52px);
  right: clamp(34px, 3.5vw, 52px);
  bottom: clamp(168px, 14vw, 232px);
  opacity: 0.54;
  background: linear-gradient(90deg, transparent, rgba(238,241,235,0.20), rgba(159,187,224,0.32), transparent);
}

.is-orbit .field-demo-panel--active {
  background:
    radial-gradient(ellipse 58% 28% at 50% 50%, rgba(238,241,235,0.042), transparent 70%),
    radial-gradient(ellipse 86% 44% at 50% 96%, rgba(159,187,224,0.072), transparent 72%),
    linear-gradient(180deg, rgba(9,11,11,0.46), rgba(0,0,0,0.72));
}

.is-orbit .field-demo-panel__k,
.is-orbit .field-surface span,
.is-orbit .detail-steps__n,
.is-orbit .field-cycle li > span {
  color: rgba(176,220,187,0.76);
  letter-spacing: 0.14em;
}

.is-orbit .field-demo-panel h3 {
  max-width: 14ch;
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.18;
  letter-spacing: 0;
}

.is-orbit .field-demo-panel p {
  max-width: 31ch;
  color: rgba(245,247,244,0.60);
}

.is-orbit .field-panel-stage {
  left: clamp(34px, 3.5vw, 52px);
  right: clamp(34px, 3.5vw, 52px);
  bottom: clamp(156px, 12vw, 208px);
  height: clamp(108px, 10vw, 160px);
  border: 0;
  box-shadow: none;
  opacity: 0.78;
  background:
    linear-gradient(rgba(238,241,235,0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238,241,235,0.10) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 86% 62% at 50% 54%, #000 0%, rgba(0,0,0,0.78) 54%, transparent 100%);
  mask-image: radial-gradient(ellipse 86% 62% at 50% 54%, #000 0%, rgba(0,0,0,0.78) 54%, transparent 100%);
}

.is-orbit .field-panel-stage::after {
  width: 92px;
  height: 38px;
  border-color: rgba(238,241,235,0.20);
  background: rgba(238,241,235,0.035);
}

.is-orbit .field-panel-stage span,
.is-orbit .field-demo-map__node {
  width: 8px;
  height: 8px;
  border-color: rgba(238,241,235,0.58);
  background: rgba(238,241,235,0.16);
  box-shadow: 0 0 18px rgba(176,220,187,0.24);
}

.is-orbit .field-demo-map {
  left: clamp(38px, 4vw, 62px);
  right: clamp(38px, 4vw, 62px);
  bottom: clamp(118px, 10vw, 168px);
  height: clamp(160px, 15vw, 230px);
  border: 0;
  opacity: 0.84;
  transform: perspective(820px) rotateX(62deg) translateY(10px);
  background:
    linear-gradient(rgba(238,241,235,0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238,241,235,0.10) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(ellipse 86% 62% at 50% 54%, #000 0%, rgba(0,0,0,0.76) 54%, transparent 100%);
  mask-image: radial-gradient(ellipse 86% 62% at 50% 54%, #000 0%, rgba(0,0,0,0.76) 54%, transparent 100%);
}

.is-orbit .field-demo-list {
  left: clamp(34px, 3.5vw, 52px);
  right: clamp(34px, 3.5vw, 52px);
  bottom: clamp(30px, 3vw, 44px);
  gap: 8px;
}

.is-orbit .field-demo-list li {
  padding: 9px 0;
  border-top-color: rgba(238,241,235,0.08);
}

.is-orbit .field-demo-list b {
  color: rgba(245,247,244,0.82);
  font-weight: 500;
}

.is-orbit .field-demo-list span {
  color: rgba(245,247,244,0.42);
}

.is-orbit .field-signal-strip {
  margin-top: clamp(40px, 5vw, 70px);
  padding-top: 24px;
  border-top-color: rgba(238,241,235,0.09);
  color: rgba(245,247,244,0.44);
}

.is-orbit .field-demo-section.is-field-unfolded .field-demo-panel {
  animation: orbit-lower-panel-in 960ms cubic-bezier(0.16, 0.74, 0.18, 1) both;
}

.is-orbit .field-demo-section.is-field-unfolded .field-demo-panel:nth-child(2) { animation-delay: 90ms; }
.is-orbit .field-demo-section.is-field-unfolded .field-demo-panel:nth-child(3) { animation-delay: 180ms; }

@keyframes orbit-lower-panel-in {
  from {
    opacity: 0;
    transform: translateY(34px);
    filter: blur(1px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

.is-orbit .field-cycle {
  border-top: 0;
  gap: clamp(12px, 1.3vw, 18px);
}

.is-orbit .field-cycle::before {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  top: 50%;
  height: 1px;
  z-index: 0;
  pointer-events: none;
  opacity: 0.30;
  background: linear-gradient(90deg, transparent, rgba(176,220,187,0.22), rgba(238,241,235,0.16), transparent);
}

.is-orbit .field-cycle li,
.is-orbit .detail-steps li {
  min-height: clamp(220px, 20vw, 300px);
  padding: clamp(28px, 3vw, 38px);
  border: 0;
  border-top: 1px solid rgba(238,241,235,0.10);
  border-bottom: 1px solid rgba(238,241,235,0.075);
  background:
    radial-gradient(ellipse 82% 42% at 50% 100%, rgba(159,187,224,0.055), transparent 74%),
    linear-gradient(180deg, rgba(5,7,7,0.70), rgba(0,0,0,0.88));
}

.is-orbit .field-cycle li::before,
.is-orbit .detail-steps li::before {
  left: 28px;
  right: auto;
  top: clamp(28px, 3vw, 38px);
  bottom: auto;
  width: 8px;
  height: 8px;
  opacity: 0.74;
  border: 1px solid rgba(238,241,235,0.48);
  background: rgba(176,220,187,0.14);
  transform: rotate(45deg);
  box-shadow: 0 0 22px rgba(176,220,187,0.16);
}

.is-orbit .field-cycle li > span,
.is-orbit .detail-steps__n {
  padding-left: 22px;
}

.is-orbit .field-surfaces-section {
  padding-top: clamp(104px, 12vw, 168px);
}

.is-orbit .field-surface-grid {
  gap: clamp(14px, 1.5vw, 22px);
  border: 0;
  background: transparent;
  overflow: visible;
}

.is-orbit .field-surface {
  min-height: clamp(300px, 25vw, 390px);
  padding: clamp(30px, 3vw, 42px);
  border: 0;
  border-top: 1px solid rgba(238,241,235,0.12);
  border-bottom: 1px solid rgba(238,241,235,0.075);
  background:
    radial-gradient(ellipse 76% 34% at 50% 100%, rgba(159,187,224,0.060), transparent 72%),
    linear-gradient(180deg, rgba(5,7,7,0.72), rgba(0,0,0,0.90));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
}

.is-orbit .field-surface::before {
  left: 24px;
  right: 24px;
  bottom: 34px;
  height: 104px;
  opacity: 0.38;
  border: 0;
  transform: perspective(620px) rotateX(62deg);
  background:
    linear-gradient(rgba(238,241,235,0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238,241,235,0.09) 1px, transparent 1px);
  background-size: 34px 34px;
}

.is-orbit .field-surface:hover {
  transform: translateY(-2px);
  background:
    radial-gradient(ellipse 82% 42% at 50% 92%, rgba(176,220,187,0.070), transparent 72%),
    linear-gradient(180deg, rgba(8,10,10,0.78), rgba(0,0,0,0.92));
}

.is-orbit .detail-how {
  border-top: 1px solid rgba(238,241,235,0.08);
  border-bottom: 1px solid rgba(238,241,235,0.08);
}

.is-orbit .detail-steps {
  border-top: 0;
  gap: clamp(12px, 1.3vw, 18px);
}

@media (max-width: 1080px) {
  .is-orbit .field-demo-grid,
  .is-orbit .field-surface-grid,
  .is-orbit .field-cycle,
  .is-orbit .detail-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .is-orbit .field-demo-section {
    padding-top: 72px;
  }

  .is-orbit .field-demo-grid,
  .is-orbit .field-surface-grid,
  .is-orbit .field-cycle,
  .is-orbit .detail-steps {
    grid-template-columns: 1fr;
  }

  .is-orbit .field-demo-panel {
    min-height: 460px;
  }

  .is-orbit .field-demo-grid::before,
  .is-orbit .field-cycle::before {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .is-orbit .field-demo-section.is-field-unfolded .op-sec__inner::before,
  .is-orbit .field-surfaces-section.is-field-unfolded .op-sec__inner::before,
  .is-orbit .detail-how.is-field-unfolded .detail-how__inner::before,
  .is-orbit .field-demo-section.is-field-unfolded .field-demo-panel {
    animation: none !important;
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* Orbit Field stage redesign: replace card UI with one continuous operating field. */
.is-orbit .field-demo-section {
  min-height: max(1120px, calc(100vh + 300px));
  padding-top: clamp(120px, 13vw, 190px);
  padding-bottom: clamp(128px, 14vw, 210px);
  background:
    radial-gradient(ellipse 58% 24% at 50% 20%, rgba(238,241,235,0.050), transparent 74%),
    radial-gradient(ellipse 86% 46% at 50% 66%, rgba(159,187,224,0.038), transparent 78%),
    linear-gradient(180deg, #000 0%, #010101 52%, #000 100%);
}

.is-orbit .field-demo-section .op-sec__head {
  position: relative;
  z-index: 4;
  max-width: 720px;
}

.is-orbit .field-demo-section .op-sec__inner::before {
  display: none;
}

.is-orbit .field-demo-grid {
  margin-top: clamp(52px, 7vw, 104px);
  min-height: clamp(650px, 62vw, 900px);
  padding: clamp(52px, 5vw, 82px) clamp(20px, 3vw, 52px) clamp(180px, 16vw, 260px);
  align-items: start;
  gap: clamp(22px, 3vw, 56px);
  border: 0;
  background: transparent;
  isolation: isolate;
}

.is-orbit .field-demo-grid::before {
  content: "";
  position: absolute;
  left: 50%;
  top: clamp(128px, 16vw, 230px);
  width: min(1500px, 124vw);
  height: clamp(560px, 54vw, 760px);
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%) perspective(1180px) rotateX(62deg) translate3d(0, 104px, 0) scale(0.62, 0.32);
  transform-origin: 50% 100%;
  background:
    linear-gradient(rgba(238,241,235,0.125) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238,241,235,0.105) 1px, transparent 1px),
    linear-gradient(rgba(159,187,224,0.050) 1px, transparent 1px),
    linear-gradient(90deg, rgba(159,187,224,0.045) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 38%, rgba(238,241,235,0.12), transparent 62%);
  background-size: 70px 70px, 70px 70px, 280px 280px, 280px 280px, 100% 100%;
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0%, #000 17%, #000 76%, transparent 100%),
    radial-gradient(ellipse 82% 58% at 50% 44%, #000 0%, rgba(0,0,0,0.68) 58%, transparent 100%);
  mask-image:
    linear-gradient(180deg, transparent 0%, #000 17%, #000 76%, transparent 100%),
    radial-gradient(ellipse 82% 58% at 50% 44%, #000 0%, rgba(0,0,0,0.68) 58%, transparent 100%);
}

.is-orbit .field-demo-section.is-field-unfolded .field-demo-grid::before {
  animation: orbit-demo-field-open 1650ms cubic-bezier(0.14, 0.78, 0.16, 1) both;
}

@keyframes orbit-demo-field-open {
  0% {
    opacity: 0;
    transform: translateX(-50%) perspective(1180px) rotateX(72deg) translate3d(0, 132px, 0) scale(0.44, 0.18);
    filter: blur(0.6px) brightness(0.58);
  }
  46% {
    opacity: 0.30;
    transform: translateX(-50%) perspective(1180px) rotateX(64deg) translate3d(0, 38px, 0) scale(0.88, 0.70);
  }
  100% {
    opacity: 0.46;
    transform: translateX(-50%) perspective(1180px) rotateX(57deg) translate3d(0, -10px, 0) scale(1.08, 1);
    filter: blur(0) brightness(1);
  }
}

.is-orbit .field-demo-grid::after {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  top: clamp(372px, 35vw, 528px);
  height: 1px;
  z-index: 1;
  pointer-events: none;
  opacity: 0.66;
  background:
    linear-gradient(90deg, transparent, rgba(176,220,187,0.22) 12%, rgba(238,241,235,0.24) 50%, rgba(159,187,224,0.22) 88%, transparent);
  box-shadow:
    0 0 28px rgba(159,187,224,0.12),
    0 0 80px rgba(238,241,235,0.055);
}

.is-orbit .field-demo-panel {
  min-height: clamp(560px, 48vw, 760px);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.is-orbit .field-demo-panel,
.is-orbit .field-demo-panel--active {
  background: transparent;
}

.is-orbit .field-demo-panel::before {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: clamp(118px, 11vw, 176px);
  height: clamp(190px, 17vw, 270px);
  z-index: 0;
  opacity: 0.54;
  transform: perspective(760px) rotateX(61deg) translateY(12px);
  transform-origin: 50% 100%;
  background:
    linear-gradient(rgba(238,241,235,0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238,241,235,0.10) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 46%, rgba(176,220,187,0.12), transparent 64%);
  background-size: 38px 38px, 38px 38px, 100% 100%;
  -webkit-mask-image: radial-gradient(ellipse 82% 62% at 50% 52%, #000 0%, rgba(0,0,0,0.62) 54%, transparent 100%);
  mask-image: radial-gradient(ellipse 82% 62% at 50% 52%, #000 0%, rgba(0,0,0,0.62) 54%, transparent 100%);
}

.is-orbit .field-demo-panel::after {
  content: "";
  position: absolute;
  left: 50%;
  top: clamp(332px, 31vw, 482px);
  width: 9px;
  height: 9px;
  z-index: 2;
  opacity: 0.82;
  border: 1px solid rgba(238,241,235,0.58);
  background: rgba(176,220,187,0.14);
  box-shadow: 0 0 30px rgba(176,220,187,0.18);
  transform: translate(-50%, -50%) rotate(45deg);
}

.is-orbit .field-demo-panel__k {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  color: rgba(176,220,187,0.72);
}

.is-orbit .field-demo-panel__k::before {
  content: "";
  width: 7px;
  height: 7px;
  border: 1px solid rgba(176,220,187,0.56);
  transform: rotate(45deg);
  box-shadow: 0 0 18px rgba(176,220,187,0.18);
}

.is-orbit .field-demo-panel h3 {
  max-width: 13ch;
  font-size: clamp(25px, 2.5vw, 38px);
  line-height: 1.08;
  margin-bottom: 18px;
}

.is-orbit .field-demo-panel p {
  max-width: 29ch;
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.72;
  color: rgba(245,247,244,0.58);
}

.is-orbit .field-panel-stage,
.is-orbit .field-demo-map {
  left: -3%;
  right: -3%;
  bottom: clamp(132px, 12vw, 194px);
  height: clamp(210px, 18vw, 292px);
  z-index: 1;
  border: 0;
  opacity: 0.76;
  transform: perspective(820px) rotateX(61deg) translateY(12px);
  background:
    linear-gradient(rgba(238,241,235,0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238,241,235,0.11) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 82% 62% at 50% 52%, #000 0%, rgba(0,0,0,0.68) 54%, transparent 100%);
  mask-image: radial-gradient(ellipse 82% 62% at 50% 52%, #000 0%, rgba(0,0,0,0.68) 54%, transparent 100%);
}

.is-orbit .field-demo-map__line {
  opacity: 0.9;
}

.is-orbit .field-panel-stage::before {
  left: 6%;
  right: 6%;
  background: linear-gradient(90deg, transparent, rgba(176,220,187,0.32), rgba(238,241,235,0.24), transparent);
}

.is-orbit .field-panel-stage::after {
  left: 42%;
  top: 28%;
  width: 104px;
  height: 40px;
  border-color: rgba(238,241,235,0.20);
  background: rgba(238,241,235,0.028);
}

.is-orbit .field-demo-list {
  left: 0;
  right: 0;
  bottom: clamp(22px, 2.5vw, 38px);
  padding-top: 18px;
  border-top: 1px solid rgba(238,241,235,0.075);
}

.is-orbit .field-demo-list li {
  border-top-color: rgba(238,241,235,0.055);
}

.is-orbit .field-signal-strip {
  position: relative;
  z-index: 2;
  max-width: 1060px;
  margin-top: clamp(32px, 4vw, 60px);
  padding: 22px 0 0;
}

.is-orbit #cycle.op-sec,
.is-orbit .field-surfaces-section,
.is-orbit .detail-how {
  padding-top: clamp(112px, 12vw, 172px);
  padding-bottom: clamp(112px, 12vw, 172px);
}

.is-orbit #cycle.op-sec .op-sec__head,
.is-orbit .field-surfaces-section .op-sec__head,
.is-orbit .detail-how__head {
  max-width: 720px;
}

.is-orbit .field-cycle,
.is-orbit .field-surface-grid,
.is-orbit .detail-steps {
  margin-top: clamp(52px, 6vw, 86px);
  gap: clamp(22px, 2.4vw, 36px);
  border: 0;
  background: transparent;
}

.is-orbit .field-cycle li,
.is-orbit .field-surface,
.is-orbit .detail-steps li {
  min-height: clamp(260px, 24vw, 370px);
  padding: clamp(30px, 3.2vw, 46px);
  border: 0;
  border-top: 1px solid rgba(238,241,235,0.105);
  border-bottom: 1px solid rgba(238,241,235,0.060);
  background:
    linear-gradient(180deg, rgba(238,241,235,0.024), transparent 18%),
    radial-gradient(ellipse 76% 34% at 50% 100%, rgba(159,187,224,0.045), transparent 72%);
  box-shadow: none;
  overflow: visible;
}

.is-orbit .field-cycle li::after,
.is-orbit .field-surface::before,
.is-orbit .detail-steps li::after {
  left: 26px;
  right: 26px;
  bottom: 28px;
  height: 116px;
  opacity: 0.34;
  border: 0;
  transform: perspective(640px) rotateX(62deg) translateY(8px);
  background:
    linear-gradient(rgba(238,241,235,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238,241,235,0.085) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(ellipse 84% 62% at 50% 54%, #000 0%, rgba(0,0,0,0.62) 56%, transparent 100%);
  mask-image: radial-gradient(ellipse 84% 62% at 50% 54%, #000 0%, rgba(0,0,0,0.62) 56%, transparent 100%);
}

.is-orbit .field-surface:hover {
  transform: translateY(-3px);
  background:
    linear-gradient(180deg, rgba(238,241,235,0.034), transparent 18%),
    radial-gradient(ellipse 82% 40% at 50% 100%, rgba(176,220,187,0.060), transparent 72%);
}

.is-orbit .field-demo-section.is-field-unfolded .field-demo-panel {
  animation: orbit-stage-copy-in 820ms cubic-bezier(0.16, 0.74, 0.18, 1) both;
}

@keyframes orbit-stage-copy-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 1080px) {
  .is-orbit .field-demo-grid {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 0;
    gap: 34px;
  }

  .is-orbit .field-demo-grid::before,
  .is-orbit .field-demo-grid::after {
    display: none;
  }

  .is-orbit .field-demo-panel {
    min-height: 520px;
    padding: 34px 0 0;
  }
}

@media (max-width: 720px) {
  .is-orbit .field-demo-section {
    min-height: auto;
  }

  .is-orbit .field-demo-panel {
    min-height: 500px;
  }
}

/* Orbit Field stage detail pass: shared floor, moving signal points, softer continuity. */
.is-orbit .field-demo-section::after {
  content: "";
  position: absolute;
  inset: 12% 0 8%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.34;
  background:
    radial-gradient(circle at 21% 62%, rgba(238,241,235,0.35) 0 1px, transparent 2px),
    radial-gradient(circle at 37% 57%, rgba(176,220,187,0.24) 0 1px, transparent 2px),
    radial-gradient(circle at 52% 64%, rgba(238,241,235,0.30) 0 1px, transparent 2px),
    radial-gradient(circle at 68% 56%, rgba(159,187,224,0.22) 0 1px, transparent 2px),
    radial-gradient(circle at 81% 66%, rgba(238,241,235,0.24) 0 1px, transparent 2px);
  filter: blur(0.1px);
  animation: orbit-field-signal-drift 11s cubic-bezier(0.42, 0, 0.18, 1) infinite alternate;
}

.is-orbit .field-demo-grid {
  z-index: 1;
}

.is-orbit .field-demo-grid::before {
  top: clamp(92px, 12vw, 172px);
  width: min(1760px, 138vw);
  height: clamp(680px, 62vw, 920px);
  background:
    linear-gradient(rgba(238,241,235,0.145) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238,241,235,0.125) 1px, transparent 1px),
    linear-gradient(rgba(176,220,187,0.048) 1px, transparent 1px),
    linear-gradient(90deg, rgba(159,187,224,0.048) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 36%, rgba(238,241,235,0.16), transparent 64%);
  background-size: 64px 64px, 64px 64px, 256px 256px, 256px 256px, 100% 100%;
}

.is-orbit .field-demo-section.is-field-unfolded .field-demo-grid::before {
  animation: orbit-demo-field-open 1680ms cubic-bezier(0.12, 0.82, 0.14, 1) both;
}

.is-orbit .field-demo-grid::after {
  top: clamp(334px, 31vw, 482px);
  opacity: 0.74;
  background:
    linear-gradient(90deg, transparent, rgba(176,220,187,0.20) 10%, rgba(238,241,235,0.32) 50%, rgba(159,187,224,0.18) 90%, transparent);
  animation: orbit-field-scanline 6.5s ease-in-out infinite alternate;
}

.is-orbit .field-demo-panel {
  z-index: 2;
}

.is-orbit .field-panel-stage,
.is-orbit .field-demo-map {
  opacity: 0.86;
  filter: drop-shadow(0 18px 44px rgba(0,0,0,0.42));
}

.is-orbit .field-panel-stage::before,
.is-orbit .field-demo-map__line {
  animation: orbit-field-line-pulse 5.8s ease-in-out infinite;
}

.is-orbit .field-panel-stage span,
.is-orbit .field-demo-map__node,
.is-orbit .field-demo-panel::after {
  animation: orbit-field-node-float 4.8s cubic-bezier(0.36, 0, 0.22, 1) infinite alternate;
}

.is-orbit .field-panel-stage span:nth-child(2),
.is-orbit .field-demo-map__node:nth-child(4),
.is-orbit .field-demo-panel:nth-child(2)::after {
  animation-delay: -1.4s;
}

.is-orbit .field-panel-stage span:nth-child(3),
.is-orbit .field-demo-map__node:nth-child(5),
.is-orbit .field-demo-panel:nth-child(3)::after {
  animation-delay: -2.6s;
}

.is-orbit .field-signal-strip {
  border-top: 1px solid rgba(238,241,235,0.10);
}

.is-orbit .field-signal-strip i {
  opacity: 0.78;
  box-shadow: 0 0 24px rgba(176,220,187,0.16);
  animation: orbit-field-line-pulse 5.2s ease-in-out infinite;
}

.is-orbit #cycle.op-sec,
.is-orbit .field-surfaces-section,
.is-orbit .detail-how {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 58% 26% at 50% 100%, rgba(238,241,235,0.038), transparent 72%),
    linear-gradient(180deg, #000 0%, #010101 52%, #000 100%);
}

.is-orbit #cycle.op-sec::before,
.is-orbit .field-surfaces-section::before,
.is-orbit .detail-how::before {
  opacity: 0.42;
}

.is-orbit .field-cycle li,
.is-orbit .field-surface,
.is-orbit .detail-steps li {
  background:
    linear-gradient(180deg, rgba(238,241,235,0.030), transparent 22%),
    radial-gradient(ellipse 80% 38% at 50% 100%, rgba(176,220,187,0.048), transparent 72%),
    linear-gradient(90deg, transparent, rgba(238,241,235,0.030), transparent);
}

.is-orbit .field-surface::after,
.is-orbit .field-cycle li::before,
.is-orbit .detail-steps li::before {
  opacity: 0.44;
  animation: orbit-field-line-pulse 6.4s ease-in-out infinite;
}

@keyframes orbit-field-signal-drift {
  from {
    transform: translate3d(-1.6%, 1.2%, 0) scale(0.98);
    opacity: 0.22;
  }
  to {
    transform: translate3d(1.8%, -1.4%, 0) scale(1.03);
    opacity: 0.38;
  }
}

@keyframes orbit-field-scanline {
  from {
    transform: translateY(18px);
    opacity: 0.38;
  }
  to {
    transform: translateY(-12px);
    opacity: 0.74;
  }
}

@keyframes orbit-field-line-pulse {
  0%, 100% {
    opacity: 0.46;
    filter: brightness(0.84);
  }
  48% {
    opacity: 0.88;
    filter: brightness(1.18);
  }
}

@keyframes orbit-field-node-float {
  from {
    translate: 0 5px;
    opacity: 0.58;
  }
  to {
    translate: 0 -8px;
    opacity: 0.92;
  }
}

@media (prefers-reduced-motion: reduce) {
  .is-orbit .field-demo-section::after,
  .is-orbit .field-demo-grid::after,
  .is-orbit .field-panel-stage::before,
  .is-orbit .field-demo-map__line,
  .is-orbit .field-panel-stage span,
  .is-orbit .field-demo-map__node,
  .is-orbit .field-demo-panel::after,
  .is-orbit .field-signal-strip i,
  .is-orbit .field-surface::after,
  .is-orbit .field-cycle li::before,
  .is-orbit .detail-steps li::before {
    animation: none !important;
  }
}

/* Orbit Guide-system rebuild: use the actual Guide stage language, not a CSS-only grid. */
.is-orbit #overview,
.is-orbit #field,
.is-orbit #demo,
.is-orbit #cycle,
.is-orbit #surfaces,
.is-orbit #pilot {
  scroll-margin-top: calc(var(--nav-h) + 88px);
}

.is-orbit .field-demo-section {
  min-height: auto;
  padding-top: clamp(54px, 6vw, 92px);
  padding-bottom: clamp(112px, 12vw, 174px);
  background:
    radial-gradient(ellipse 68% 34% at 50% 18%, rgba(159,187,224,0.052), transparent 72%),
    radial-gradient(ellipse 62% 26% at 48% 74%, rgba(176,220,187,0.034), transparent 74%),
    linear-gradient(180deg, #000 0%, #010101 52%, #000 100%);
}

.is-orbit .field-demo-section .op-sec__inner {
  width: min(1500px, calc(100vw - (var(--pad) * 2)));
}

.is-orbit .orbit-demo-stage {
  width: min(1380px, 100%);
  min-height: clamp(560px, 62vh, 780px);
  margin: 0 auto clamp(62px, 7vw, 104px);
  border-radius: 8px;
  border: 1px solid rgba(238,241,235,0.075);
  background: #000;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.045) inset,
    0 44px 140px -92px rgba(159,187,224,0.42);
}

.is-orbit .orbit-demo-stage::before {
  inset: 20px;
  border: 1px solid rgba(238,241,235,0.045);
  border-radius: 6px;
  opacity: 1;
}

.is-orbit .orbit-demo-stage::after {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.04), transparent 18%, transparent 76%, rgba(0,0,0,0.42)),
    radial-gradient(ellipse 78% 60% at 50% 52%, transparent 0%, transparent 56%, rgba(0,0,0,0.62) 100%);
}

.is-orbit .orbit-demo-stage .guide-stage {
  width: 100%;
  min-height: clamp(560px, 62vh, 780px);
  aspect-ratio: 16 / 8.6;
  filter: saturate(1.28) contrast(1.28) brightness(1.08);
}

.is-orbit .orbit-demo-stage figcaption {
  left: clamp(26px, 3vw, 42px);
  right: clamp(26px, 3vw, 42px);
  bottom: clamp(24px, 3vw, 42px);
}

.is-orbit .orbit-stage-readouts {
  position: absolute;
  z-index: 4;
  top: clamp(24px, 3vw, 40px);
  right: clamp(24px, 3vw, 44px);
  display: grid;
  gap: 9px;
  width: min(260px, 36%);
  pointer-events: none;
}

.is-orbit .orbit-stage-readouts span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 30px;
  padding: 0 12px;
  border-top: 1px solid rgba(238,241,235,0.11);
  border-bottom: 1px solid rgba(238,241,235,0.055);
  color: rgba(245,247,244,0.62);
  background: linear-gradient(90deg, rgba(238,241,235,0.035), transparent);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.is-orbit .orbit-stage-readouts span::after {
  content: "";
  width: 7px;
  height: 7px;
  border: 1px solid rgba(176,220,187,0.62);
  transform: rotate(45deg);
  box-shadow: 0 0 18px rgba(176,220,187,0.22);
}

.is-orbit .field-demo-section .op-sec__head {
  max-width: 780px;
  margin: 0 0 clamp(38px, 5vw, 72px);
}

.is-orbit .field-demo-grid {
  margin-top: 0;
  min-height: auto;
  padding: 0;
  gap: clamp(18px, 2.2vw, 30px);
  border: 0;
  background: transparent;
  overflow: visible;
  align-items: stretch;
}

.is-orbit .field-demo-grid::before,
.is-orbit .field-demo-grid::after {
  display: none !important;
}

.is-orbit .field-demo-panel {
  min-height: clamp(440px, 34vw, 560px);
  padding: clamp(26px, 3vw, 42px);
  border-top: 1px solid rgba(238,241,235,0.11);
  border-bottom: 1px solid rgba(238,241,235,0.06);
  background:
    linear-gradient(180deg, rgba(238,241,235,0.030), transparent 20%),
    radial-gradient(ellipse 84% 38% at 50% 38%, rgba(159,187,224,0.060), transparent 70%),
    #000;
}

.is-orbit .field-demo-panel::before {
  opacity: 0.18;
  background:
    linear-gradient(rgba(238,241,235,0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238,241,235,0.09) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 34%, transparent 100%);
}

.is-orbit .field-demo-panel::after {
  bottom: 24px;
}

.is-orbit .orbit-demo-step-icon.guide-stage {
  width: 100%;
  height: clamp(138px, 14vw, 190px);
  min-height: 0;
  aspect-ratio: auto;
  margin: 0 0 clamp(24px, 2.6vw, 34px);
  border-radius: 8px;
  background: #000;
  filter: saturate(1.36) contrast(1.22) brightness(1.10);
}

.is-orbit .field-panel-stage,
.is-orbit .field-demo-map {
  display: none;
}

.is-orbit .field-demo-panel__k {
  margin-bottom: 14px;
  color: rgba(176,220,187,0.76);
}

.is-orbit .field-demo-panel h3 {
  max-width: 15ch;
  font-size: clamp(23px, 2.2vw, 34px);
}

.is-orbit .field-demo-panel p {
  max-width: 30ch;
}

.is-orbit .field-demo-list {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  margin-top: clamp(26px, 3vw, 40px);
  padding-top: 8px;
}

.is-orbit .field-signal-strip {
  margin-top: clamp(44px, 5vw, 70px);
}

.is-orbit .field-cycle,
.is-orbit .field-surface-grid,
.is-orbit .detail-steps {
  align-items: stretch;
}

.is-orbit .field-cycle li,
.is-orbit .field-surface,
.is-orbit .detail-steps li {
  min-height: clamp(380px, 30vw, 500px);
  padding: clamp(28px, 3.2vw, 44px);
  border-top: 1px solid rgba(238,241,235,0.105);
  border-bottom: 1px solid rgba(238,241,235,0.065);
  background:
    linear-gradient(180deg, rgba(238,241,235,0.032), transparent 22%),
    radial-gradient(ellipse 82% 38% at 50% 36%, rgba(159,187,224,0.046), transparent 70%),
    #000;
}

.is-orbit .field-cycle__icon.guide-stage,
.is-orbit .field-surface__stage-icon.guide-stage {
  width: 100%;
  height: clamp(124px, 12vw, 176px);
  min-height: 0;
  aspect-ratio: auto;
  margin: 0 0 clamp(22px, 2.4vw, 34px);
  border-radius: 8px;
  background: #000;
  filter: saturate(1.34) contrast(1.22) brightness(1.10);
}

.is-orbit .field-surface {
  display: flex;
  flex-direction: column;
  text-decoration: none;
}

.is-orbit .field-surface em {
  margin-top: auto;
  padding-top: clamp(28px, 3vw, 42px);
}

@media (max-width: 1080px) {
  .is-orbit .orbit-demo-stage,
  .is-orbit .orbit-demo-stage .guide-stage {
    min-height: clamp(460px, 72vw, 640px);
  }

  .is-orbit .field-demo-grid,
  .is-orbit .field-surface-grid,
  .is-orbit .field-cycle,
  .is-orbit .detail-steps {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .is-orbit #overview,
  .is-orbit #field,
  .is-orbit #demo,
  .is-orbit #cycle,
  .is-orbit #surfaces,
  .is-orbit #pilot {
    scroll-margin-top: 118px;
  }

  .is-orbit .orbit-demo-stage,
  .is-orbit .orbit-demo-stage .guide-stage {
    min-height: 420px;
  }

  .is-orbit .orbit-stage-readouts {
    left: 20px;
    right: 20px;
    width: auto;
  }
}

/* Orbit demo rebuild: exact Guide entry structure with visible evidence detail. */
.is-orbit .orbit-home-guide-stack {
  margin-top: clamp(50px, 6vw, 88px);
}

.is-orbit .orbit-home-entry.guide-entry {
  grid-template-columns: minmax(420px, 0.98fr) minmax(0, 0.92fr);
  gap: clamp(34px, 5vw, 72px);
  align-items: center;
  padding: clamp(58px, 7vw, 92px) 0;
  border-top-color: rgba(238,241,235,0.10);
}

.is-orbit .orbit-home-entry.guide-entry--reverse {
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 0.98fr);
}

.is-orbit .orbit-home-entry__media.guide-entry__media {
  min-height: clamp(460px, 41vw, 640px);
  border: 1px solid rgba(238,241,235,0.075);
  border-radius: 8px;
  background: #000;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.045) inset,
    0 38px 120px -86px color-mix(in srgb, var(--entry-accent) 34%, transparent);
}

.is-orbit .orbit-home-entry__media .guide-stage {
  min-height: clamp(460px, 41vw, 640px);
  aspect-ratio: 4 / 3;
  filter: saturate(1.34) contrast(1.27) brightness(1.10);
}

.is-orbit .orbit-home-entry__media.guide-entry__media--stage::before {
  inset: 18px;
  border: 1px solid rgba(238,241,235,0.045);
  border-radius: 6px;
}

.is-orbit .orbit-home-entry__media.guide-entry__media::after {
  background:
    linear-gradient(180deg, transparent 0%, transparent 66%, rgba(0,0,0,0.52) 100%),
    radial-gradient(ellipse 86% 64% at 50% 54%, transparent 0%, transparent 52%, rgba(0,0,0,0.62) 100%);
}

.is-orbit .orbit-home-entry .guide-entry__heading {
  grid-template-columns: minmax(170px, 0.42fr) minmax(0, 1fr);
  align-items: center;
}

.is-orbit .orbit-home-entry .guide-webgl-icon {
  width: min(100%, 238px);
  height: clamp(116px, 10vw, 156px);
}

.is-orbit .orbit-home-entry .guide-entry__title {
  font-size: clamp(27px, 3vw, 42px);
  line-height: 1.08;
}

.is-orbit .orbit-home-entry .guide-entry__desc {
  color: rgba(245,247,244,0.66);
}

.is-orbit .orbit-detail-rows {
  display: grid;
  margin: clamp(24px, 3vw, 34px) 0 0;
  border-top: 1px solid rgba(238,241,235,0.095);
  border-bottom: 1px solid rgba(238,241,235,0.055);
}

.is-orbit .orbit-detail-rows div {
  display: grid;
  grid-template-columns: minmax(96px, 0.32fr) minmax(0, 1fr);
  gap: 18px;
  min-height: 42px;
  align-items: center;
  border-top: 1px solid rgba(238,241,235,0.050);
}

.is-orbit .orbit-detail-rows div:first-child {
  border-top: 0;
}

.is-orbit .orbit-detail-rows dt,
.is-orbit .orbit-detail-rows dd {
  margin: 0;
}

.is-orbit .orbit-detail-rows dt {
  color: rgba(245,247,244,0.86);
  font-size: 13px;
  font-weight: 500;
}

.is-orbit .orbit-detail-rows dd {
  color: rgba(245,247,244,0.48);
  font-size: 12.5px;
  line-height: 1.55;
}

.is-orbit .orbit-home-entry .guide-entry__chips {
  margin-top: 20px;
}

.is-orbit .field-signal-strip {
  max-width: 100%;
  margin-top: clamp(22px, 4vw, 48px);
  border-top-color: rgba(238,241,235,0.13);
}

@media (max-width: 1080px) {
  .is-orbit .orbit-home-entry.guide-entry,
  .is-orbit .orbit-home-entry.guide-entry--reverse {
    grid-template-columns: 1fr;
  }

  .is-orbit .orbit-home-entry.guide-entry--reverse .guide-entry__media {
    order: 0;
  }
}

@media (max-width: 720px) {
  .is-orbit .orbit-home-guide-stack {
    margin-top: 34px;
  }

  .is-orbit .orbit-home-entry.guide-entry {
    padding: 42px 0;
  }

  .is-orbit .orbit-home-entry__media.guide-entry__media,
  .is-orbit .orbit-home-entry__media .guide-stage {
    min-height: 360px;
  }

  .is-orbit .orbit-home-entry .guide-entry__heading {
    grid-template-columns: 1fr;
  }

  .is-orbit .orbit-home-entry .guide-webgl-icon {
    width: 100%;
    height: 118px;
  }
}

/* Orbit continuity pass: carry the Guide stage system through the full page. */
.is-orbit .field-demo-section,
.is-orbit #cycle.op-sec,
.is-orbit .field-surfaces-section,
.is-orbit .detail-how {
  position: relative;
  overflow: hidden;
  background: #000;
}

.is-orbit .orbit-field-bridge {
  overflow: hidden;
}

.is-orbit #demo,
.is-orbit #cycle,
.is-orbit #surfaces,
.is-orbit #pilot {
  scroll-margin-top: var(--nav-h);
}

.is-orbit .field-demo-section::before,
.is-orbit #cycle.op-sec::before,
.is-orbit .field-surfaces-section::before,
.is-orbit .detail-how::before {
  top: clamp(280px, 28vw, 440px);
  height: clamp(500px, 48vw, 720px);
  opacity: 0.08 !important;
  transform: perspective(1040px) rotateX(63deg) translate3d(0, 58px, 0) scale(1.08, 0.82) !important;
  background:
    linear-gradient(rgba(238,241,235,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238,241,235,0.06) 1px, transparent 1px);
  background-size: 86px 86px, 86px 86px;
  animation: none !important;
}

.is-orbit .field-demo-section {
  padding-top: clamp(34px, 4.2vw, 68px);
  overflow: visible;
}

.is-orbit .field-demo-section .op-sec__head,
.is-orbit #cycle.op-sec .op-sec__head,
.is-orbit .field-surfaces-section .op-sec__head,
.is-orbit .detail-how__head {
  max-width: 780px;
  margin-bottom: clamp(24px, 3.1vw, 46px);
}

.is-orbit .orbit-home-guide-stack {
  margin-top: clamp(24px, 3.2vw, 44px);
}

.is-orbit #cycle.op-sec,
.is-orbit .field-surfaces-section,
.is-orbit .detail-how {
  padding-top: clamp(58px, 7vw, 104px);
  padding-bottom: clamp(72px, 8vw, 124px);
}

.is-orbit .detail-how__inner {
  width: min(1500px, calc(100vw - (var(--pad) * 2)));
}

.is-orbit .orbit-home-entry.guide-entry,
.is-orbit .orbit-home-entry.guide-entry--reverse {
  border-top-color: rgba(238,241,235,0.12);
  border-bottom: 1px solid rgba(238,241,235,0.045);
}

.is-orbit .orbit-home-entry.guide-entry:first-of-type {
  padding-top: clamp(34px, 4.8vw, 72px);
}

.is-orbit .orbit-home-entry__media.guide-entry__media {
  overflow: hidden;
  isolation: isolate;
  background: #000;
}

.is-orbit .orbit-home-entry__media.guide-entry__media::before {
  z-index: 2;
  opacity: 0.72;
}

.is-orbit .orbit-home-entry__media .guide-stage:not(.guide-webgl-icon) {
  transform: scale(1.12);
  transform-origin: 50% 55%;
}

.is-orbit .orbit-home-entry:nth-child(2) .orbit-home-entry__media .guide-stage:not(.guide-webgl-icon),
.is-orbit .orbit-continuity-entry .orbit-home-entry__media .guide-stage:not(.guide-webgl-icon),
.is-orbit .orbit-surface-entry .orbit-home-entry__media .guide-stage:not(.guide-webgl-icon) {
  transform: scale(1.05);
}

.is-orbit .orbit-stage-readouts--entry {
  top: auto;
  right: clamp(18px, 2.4vw, 34px);
  bottom: clamp(62px, 6vw, 92px);
  width: min(286px, calc(100% - 42px));
  gap: 7px;
  opacity: 0.92;
}

.is-orbit .orbit-stage-readouts--entry span {
  min-height: 28px;
  padding: 0 10px;
  border-color: rgba(238,241,235,0.11);
  color: rgba(245,247,244,0.66);
  background:
    linear-gradient(90deg, rgba(238,241,235,0.045), rgba(0,0,0,0.32)),
    rgba(0,0,0,0.24);
  backdrop-filter: blur(8px);
}

.is-orbit .orbit-stage-readouts--entry span::after {
  border-color: color-mix(in srgb, var(--entry-accent) 68%, rgba(245,247,244,0.68));
  box-shadow: 0 0 18px color-mix(in srgb, var(--entry-accent) 30%, transparent);
}

.is-orbit .orbit-continuity-entry,
.is-orbit .orbit-surface-entry,
.is-orbit .orbit-pilot-entry {
  margin-top: clamp(20px, 3vw, 40px);
}

.is-orbit .orbit-detail-rows--four {
  grid-template-columns: 1fr;
}

.is-orbit .orbit-surface-rail {
  display: grid;
  gap: 0;
  margin-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid rgba(238,241,235,0.10);
  border-bottom: 1px solid rgba(238,241,235,0.06);
}

.is-orbit .orbit-surface-rail a {
  display: grid;
  grid-template-columns: minmax(112px, 0.34fr) minmax(0, 1fr) minmax(112px, 0.28fr);
  gap: 18px;
  min-height: 58px;
  align-items: center;
  border-top: 1px solid rgba(238,241,235,0.055);
  color: inherit;
  text-decoration: none;
}

.is-orbit .orbit-surface-rail a:first-child {
  border-top: 0;
}

.is-orbit .orbit-surface-rail span {
  color: rgba(245,247,244,0.86);
  font-size: 13px;
  font-weight: 600;
}

.is-orbit .orbit-surface-rail strong {
  color: rgba(245,247,244,0.56);
  font-size: 13px;
  font-weight: 400;
}

.is-orbit .orbit-surface-rail em {
  color: color-mix(in srgb, var(--entry-accent) 70%, rgba(245,247,244,0.62));
  font-family: var(--mono);
  font-size: 10px;
  font-style: normal;
  letter-spacing: 0.12em;
  text-align: right;
}

.is-orbit .orbit-surface-rail a:hover span,
.is-orbit .orbit-surface-rail a:hover strong {
  color: rgba(245,247,244,0.94);
}

.is-orbit .field-signal-strip {
  margin-top: clamp(28px, 4vw, 56px);
}

@media (max-width: 1080px) {
  .is-orbit .orbit-home-entry__media .guide-stage:not(.guide-webgl-icon),
  .is-orbit .orbit-home-entry:nth-child(2) .orbit-home-entry__media .guide-stage:not(.guide-webgl-icon),
  .is-orbit .orbit-continuity-entry .orbit-home-entry__media .guide-stage:not(.guide-webgl-icon),
  .is-orbit .orbit-surface-entry .orbit-home-entry__media .guide-stage:not(.guide-webgl-icon) {
    transform: scale(1.04);
  }
}

@media (max-width: 720px) {
  .is-orbit .orbit-stage-readouts--entry {
    left: 18px;
    right: 18px;
    bottom: 54px;
    width: auto;
  }

  .is-orbit .orbit-surface-rail a {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 13px 0;
  }

  .is-orbit .orbit-surface-rail em {
    text-align: left;
  }
}

/* Orbit Field wizard: one persistent grid, moving tracker, copy after movement. */
.is-orbit .field-demo-section .orbit-home-guide-stack,
.is-orbit .field-demo-section .field-signal-strip {
  display: none;
}

.is-orbit .orbit-field-wizard {
  --wizard-progress: 0;
  --wizard-x: 18%;
  --wizard-y: 66%;
  --wizard-local: 0;
  --entry-accent: #9fbbe0;
  --phase-rgb: 159, 187, 224;
  --star-shift: 0px;
  --grid-shift: 82px;
  --grid-alpha: 0.58;
  position: relative;
  z-index: 2;
  min-height: 900vh;
  margin-top: clamp(28px, 4vw, 52px);
}

.is-orbit .orbit-field-wizard__stage {
  position: sticky;
  top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  min-height: 680px;
  margin: 0;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(238,241,235,0.04);
  border-radius: 6px;
  background: #000;
  box-shadow: none;
}

.is-orbit .orbit-field-wizard__canvas.guide-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  object-fit: cover;
  filter: saturate(1.32) contrast(1.25) brightness(0.58);
  opacity: 0.64;
  transform: scale(1.08);
  transform-origin: 50% 55%;
}

.is-orbit .orbit-field-wizard__stars {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.96;
}

.is-orbit .orbit-field-wizard__stars::before,
.is-orbit .orbit-field-wizard__stars::after {
  content: "";
  position: absolute;
  inset: -18% -12%;
  background:
    radial-gradient(circle at 15% 26%, rgba(245,247,244,0.66) 0 1px, transparent 2px),
    radial-gradient(circle at 24% 40%, rgba(var(--phase-rgb),0.72) 0 1.4px, transparent 3px),
    radial-gradient(circle at 35% 20%, rgba(245,247,244,0.48) 0 1px, transparent 2px),
    radial-gradient(circle at 48% 32%, rgba(var(--phase-rgb),0.82) 0 1.8px, transparent 3px),
    radial-gradient(circle at 61% 18%, rgba(245,247,244,0.52) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 42%, rgba(var(--phase-rgb),0.68) 0 1.4px, transparent 3px),
    radial-gradient(circle at 86% 28%, rgba(245,247,244,0.72) 0 1.6px, transparent 3px),
    radial-gradient(ellipse 24% 16% at calc(var(--wizard-x) + 5%) calc(var(--wizard-y) - 18%), rgba(var(--phase-rgb),0.30), transparent 72%);
  transform: translate3d(var(--star-shift), calc(var(--star-shift) * -0.22), 0);
  transition: background 420ms ease;
}

.is-orbit .orbit-field-wizard__stars::after {
  opacity: 0.58;
  filter: blur(4px);
  transform: translate3d(calc(var(--star-shift) * -0.62), calc(var(--star-shift) * 0.18), 0) scale(1.08);
}

.is-orbit .orbit-field-wizard__stage::before,
.is-orbit .orbit-field-wizard__stage::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.is-orbit .orbit-field-wizard__stage::before {
  inset: clamp(18px, 2vw, 28px);
  z-index: 4;
  border: 1px solid rgba(238,241,235,0.025);
  border-radius: 4px;
}

.is-orbit .orbit-field-wizard__stage::after {
  inset: 0;
  z-index: 8;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.60) 0%, transparent 26%, transparent 76%, rgba(0,0,0,0.48) 100%),
    radial-gradient(ellipse 84% 64% at 50% 52%, transparent 0%, transparent 58%, rgba(0,0,0,0.60) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.44), transparent 22%, transparent 72%, rgba(0,0,0,0.60));
}

.is-orbit .orbit-field-wizard__floor {
  position: absolute;
  inset: 0;
  z-index: 2;
  perspective: 1080px;
  transform-style: preserve-3d;
  background:
    radial-gradient(ellipse 44% 24% at var(--wizard-x) var(--wizard-y), rgba(245,247,244,0.20), transparent 62%),
    radial-gradient(ellipse 72% 44% at 52% 66%, rgba(var(--phase-rgb),0.19), transparent 74%);
  transition: background 420ms ease;
}

.is-orbit .orbit-field-wizard__floor::before {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  top: 30%;
  height: 72%;
  transform: perspective(980px) rotateX(61deg) translate3d(0, var(--grid-shift), 0) scale(1.22, 1.02);
  transform-origin: 50% 88%;
  background:
    linear-gradient(rgba(238,241,235,0.140) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238,241,235,0.115) 1px, transparent 1px),
    linear-gradient(rgba(var(--phase-rgb),0.115) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--phase-rgb),0.095) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 54%, rgba(var(--phase-rgb),0.22), transparent 64%);
  background-size: 72px 72px, 72px 72px, 288px 288px, 288px 288px, 100% 100%;
  opacity: var(--grid-alpha);
  animation: orbitWizardFieldOpen 1500ms cubic-bezier(0.16, 0.84, 0.22, 1) 180ms both;
  -webkit-mask-image: radial-gradient(ellipse 80% 62% at 50% 56%, #000 0%, rgba(0,0,0,0.82) 58%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 62% at 50% 56%, #000 0%, rgba(0,0,0,0.82) 58%, transparent 100%);
}

.is-orbit .orbit-field-wizard__floor::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 12%;
  top: 50%;
  height: 1px;
  transform: rotate(-8deg);
  opacity: 0.48;
  background: linear-gradient(90deg, transparent, rgba(245,247,244,0.36), rgba(var(--phase-rgb),0.58), transparent);
  box-shadow:
    0 0 32px rgba(var(--phase-rgb),0.22),
    0 86px 0 rgba(238,241,235,0.045),
    0 -92px 0 rgba(238,241,235,0.035);
}

.is-orbit .orbit-field-wizard__route {
  position: absolute;
  z-index: 9;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245,247,244,0.44), rgba(var(--phase-rgb),0.82), transparent);
  transform-origin: 50% 50%;
  opacity: 0.58;
}

.is-orbit .orbit-field-wizard__route--a {
  left: 20%;
  right: 51%;
  top: 63%;
  transform: rotate(-24deg);
}

.is-orbit .orbit-field-wizard__route--b {
  left: 42%;
  right: 31%;
  top: 54%;
  transform: rotate(12deg);
}

.is-orbit .orbit-field-wizard__route--c {
  left: 64%;
  right: 15%;
  top: 50%;
  transform: rotate(-29deg);
}

.is-orbit .orbit-field-wizard__route--d {
  left: 24%;
  right: 27%;
  top: 42%;
  transform: rotate(13deg);
}

.is-orbit .orbit-field-wizard__route--e {
  left: 31%;
  right: 39%;
  top: 38%;
  transform: rotate(-18deg);
}

.is-orbit .orbit-field-wizard__checkpoint,
.is-orbit .orbit-field-wizard__tracker,
.is-orbit .orbit-field-wizard__artifact {
  position: absolute;
  z-index: 10;
  pointer-events: none;
}

.is-orbit .orbit-field-wizard__checkpoint {
  width: 12px;
  height: 12px;
  border: 1px solid rgba(238,241,235,0.48);
  background: rgba(0,0,0,0.72);
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 0 0 22px rgba(var(--phase-rgb),0.20);
  left: var(--x);
  top: var(--y);
  opacity: 0.58;
  transition:
    opacity 280ms ease,
    border-color 280ms ease,
    background 280ms ease,
    box-shadow 280ms ease;
}

.is-orbit .orbit-field-wizard__checkpoint.is-active {
  opacity: 1;
  border-color: rgba(245,247,244,0.78);
  background: rgba(var(--phase-rgb),0.18);
  box-shadow:
    0 0 18px rgba(245,247,244,0.28),
    0 0 48px rgba(var(--phase-rgb),0.32);
}

.is-orbit .orbit-field-wizard__checkpoint::after {
  content: attr(data-label);
  position: absolute;
  left: 14px;
  top: -14px;
  transform: rotate(-45deg);
  color: rgba(245,247,244,0.56);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.is-orbit .orbit-field-wizard__artifact {
  min-width: 210px;
  min-height: 32px;
  padding: 9px 12px;
  border: 1px solid rgba(238,241,235,0.085);
  color: color-mix(in srgb, var(--entry-accent) 68%, rgba(245,247,244,0.62));
  background: linear-gradient(90deg, rgba(238,241,235,0.045), rgba(0,0,0,0.22));
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  box-shadow: 0 20px 80px rgba(0,0,0,0.42);
}

.is-orbit .orbit-field-wizard__artifact--a {
  left: 12%;
  top: 75%;
}

.is-orbit .orbit-field-wizard__artifact--b {
  left: 44%;
  top: 35%;
}

.is-orbit .orbit-field-wizard__artifact--c {
  right: 9%;
  top: 51%;
}

.is-orbit .orbit-field-wizard__tracker {
  display: block;
}

.is-orbit .orbit-field-wizard.is-wizard-moving .orbit-field-wizard__tracker {
  filter:
    drop-shadow(0 0 22px rgba(245,247,244,0.38))
    drop-shadow(0 0 64px rgba(159,187,224,0.24));
}

.is-orbit .orbit-field-wizard__tracker::before,
.is-orbit .orbit-field-wizard__tracker::after,
.is-orbit .orbit-field-wizard__tracker i,
.is-orbit .orbit-field-wizard__tracker b {
  content: "";
  position: absolute;
  display: block;
  pointer-events: none;
}

.is-orbit .orbit-field-wizard__tracker::before {
  inset: 12px;
  border: 1px solid rgba(245,247,244,0.52);
  border-radius: 50%;
  transform: rotateX(62deg) rotateZ(calc(-24deg + (var(--wizard-progress) * 90deg)));
  box-shadow:
    0 0 24px rgba(245,247,244,0.16),
    inset 0 0 22px rgba(var(--phase-rgb),0.11);
}

.is-orbit .orbit-field-wizard__tracker::after {
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(245,247,244,0.94);
  box-shadow:
    0 0 18px rgba(245,247,244,0.82),
    0 0 54px rgba(var(--phase-rgb),0.46);
}

.is-orbit .orbit-field-wizard.is-wizard-moving .orbit-field-wizard__tracker::after {
  box-shadow:
    0 0 20px rgba(245,247,244,0.90),
    0 0 74px rgba(var(--phase-rgb),0.58),
    0 0 118px rgba(245,247,244,0.18);
}

.is-orbit .orbit-field-wizard__tracker i,
.is-orbit .orbit-field-wizard__tracker b {
  display: none;
}

/* ── Old wizard rail rules — neutralized, see unified-field__rail below ── */
.is-orbit .orbit-field-wizard__ux-rail {
  position: absolute;
  pointer-events: none;
}

.is-orbit .orbit-field-wizard__readouts {
  display: none;
}

/* readout span/::after rules — neutralized, see unified-field__readouts below */

.is-orbit .orbit-field-wizard__copy {
  position: absolute;
  z-index: 12;
  left: auto;
  right: clamp(36px, 5vw, 86px);
  bottom: clamp(58px, 7vw, 112px);
  width: min(480px, 38vw);
  padding: 24px 0 0;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity 540ms cubic-bezier(0.2, 0.76, 0.2, 1),
    transform 540ms cubic-bezier(0.2, 0.76, 0.2, 1);
}

.is-orbit .orbit-field-wizard.is-copy-visible .orbit-field-wizard__copy {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.is-orbit .orbit-field-wizard__copy::before {
  content: "";
  position: absolute;
  left: 0;
  right: 14%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(245,247,244,0.42), rgba(159,187,224,0.22), transparent);
}

.is-orbit .orbit-field-wizard__copy p {
  margin: 0 0 16px;
  color: color-mix(in srgb, var(--entry-accent) 78%, rgba(245,247,244,0.70));
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.is-orbit .orbit-field-wizard__copy h3 {
  max-width: 14ch;
  margin: 0;
  color: var(--ink);
  font-size: clamp(32px, 3.45vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.012em;
}

.is-orbit .orbit-field-wizard__copy span {
  display: block;
  max-width: 42ch;
  margin-top: 20px;
  color: rgba(245,247,244,0.63);
  font-size: 15px;
  line-height: 1.75;
}

@keyframes orbitWizardFieldOpen {
  0% {
    opacity: 0;
    transform: perspective(980px) rotateX(61deg) translate3d(0, 90px, 0) scale(0.72, 0.22);
    filter: blur(6px);
  }
  58% {
    opacity: 1;
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: perspective(980px) rotateX(61deg) translate3d(0, var(--grid-shift), 0) scale(1.22, 1.02);
    filter: blur(0);
  }
}

@media (max-width: 980px) {
  .is-orbit .orbit-field-wizard {
    min-height: 380vh;
  }

  .is-orbit .orbit-field-wizard__stage {
    min-height: 620px;
  }

  .is-orbit .orbit-field-wizard__copy {
    left: clamp(24px, 5vw, 42px);
    right: clamp(24px, 5vw, 42px);
    bottom: clamp(120px, 18vw, 160px);
    width: auto;
  }

  .is-orbit .orbit-field-wizard__copy h3 {
    max-width: 14ch;
    font-size: clamp(32px, 8vw, 48px);
  }

  .is-orbit .orbit-field-wizard__readouts {
    left: clamp(24px, 5vw, 42px);
    right: clamp(24px, 5vw, 42px);
    bottom: clamp(24px, 5vw, 42px);
    width: auto;
  }

  .is-orbit .orbit-field-wizard__ux-rail {
    left: clamp(24px, 5vw, 42px);
    right: clamp(24px, 5vw, 42px);
    top: clamp(24px, 5vw, 40px);
    width: auto;
  }

  .is-orbit .orbit-field-wizard__artifact {
    display: none;
  }
}

@media (max-width: 640px) {
  .is-orbit .orbit-field-wizard__stage {
    height: calc(100vh - var(--nav-h));
    min-height: 560px;
  }

  .is-orbit .orbit-field-wizard__floor::before {
    top: 34%;
    height: 68%;
    background-size: 58px 58px, 58px 58px, 232px 232px, 232px 232px, 100% 100%;
    animation-name: orbitWizardFieldOpenMobile;
  }

  .is-orbit .orbit-field-wizard__ux-rail {
    display: none;
  }

  .is-orbit .orbit-field-wizard__tracker {
    width: 72px;
    height: 72px;
  }

  .is-orbit .orbit-field-wizard__checkpoint::after {
    display: none;
  }

  .is-orbit .orbit-field-wizard__copy {
    bottom: 124px;
  }

  .is-orbit .orbit-field-wizard__copy h3 {
    font-size: 32px;
  }

  .is-orbit .orbit-field-wizard__copy span {
    font-size: 13.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .is-orbit .orbit-field-wizard__tracker,
  .is-orbit .orbit-field-wizard__copy,
  .is-orbit .orbit-field-wizard__floor::before {
    transition: none !important;
    animation: none !important;
  }
}

@keyframes orbitWizardFieldOpenMobile {
  0% {
    opacity: 0;
    transform: perspective(980px) rotateX(61deg) translate3d(0, 48px, 0) scale(0.72, 0.28);
    filter: blur(5px);
  }
  100% {
    opacity: 1;
    transform: perspective(980px) rotateX(61deg) translate3d(0, 0, 0) scale(1.22, 1.02);
    filter: blur(0);
  }
}

/* Orbit flow correction: keep the Guide stage system, add only the Tracker. */
.is-orbit .orbit-field-hero,
.is-orbit .orbit-field-wizard__stars,
.is-orbit .orbit-field-wizard__floor,
.is-orbit .orbit-field-wizard__route,
.is-orbit .orbit-field-wizard__checkpoint,
.is-orbit .orbit-field-wizard__artifact {
  display: none !important;
}

.is-orbit .orbit-field-wizard {
  --wizard-progress: 0;
  --wizard-x: 18%;
  --wizard-y: 66%;
  --wizard-local: 0;
  --entry-accent: #9fbbe0;
  --phase-rgb: 159, 187, 224;
  position: relative;
  z-index: 2;
  min-height: 900vh;
  margin-top: clamp(28px, 4vw, 52px);
}

.is-orbit .orbit-field-wizard__stage.guide-entry__media {
  position: sticky;
  top: calc(var(--nav-h) + 12px);
  height: calc(100vh - var(--nav-h) - 24px);
  min-height: 660px;
  margin: 0;
  overflow: hidden;
  isolation: isolate;
  border: 0;
  border-radius: 0;
  background: #000;
  box-shadow: none;
}

.is-orbit .orbit-field-wizard__stage.guide-entry__media::before {
  display: none;
}

.is-orbit .orbit-field-wizard__stage.guide-entry__media::after {
  z-index: 2;
  background:
    radial-gradient(ellipse 90% 72% at 50% 50%, transparent 0%, transparent 62%, rgba(0,0,0,0.28) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.06), transparent 12%, transparent 86%, rgba(0,0,0,0.18));
}

.is-orbit .orbit-field-wizard__canvas.guide-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  object-fit: cover;
  opacity: 1;
  filter: saturate(1.18) contrast(1.22) brightness(1.08);
  transform: none !important;
  transform-origin: 50% 55%;
}

.is-orbit .orbit-field-wizard__path {
  display: none;
  position: absolute;
  z-index: 5;
  left: 12%;
  right: 11%;
  top: 50%;
  height: 42%;
  pointer-events: none;
  opacity: 0.06;
  background:
    radial-gradient(circle at 18% 66%, rgba(245,247,244,0.52) 0 1px, transparent 2px),
    radial-gradient(circle at 28% 51%, rgba(245,247,244,0.42) 0 1px, transparent 2px),
    radial-gradient(circle at 38% 64%, rgba(245,247,244,0.42) 0 1px, transparent 2px),
    radial-gradient(circle at 48% 43%, rgba(245,247,244,0.42) 0 1px, transparent 2px),
    radial-gradient(circle at 56% 57%, rgba(245,247,244,0.42) 0 1px, transparent 2px),
    radial-gradient(circle at 63% 48%, rgba(245,247,244,0.42) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 62%, rgba(245,247,244,0.42) 0 1px, transparent 2px),
    radial-gradient(circle at 76% 42%, rgba(245,247,244,0.42) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 52%, rgba(245,247,244,0.42) 0 1px, transparent 2px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

.is-orbit .orbit-field-wizard__tracker {
  position: absolute;
  z-index: 7;
  left: var(--wizard-x);
  top: var(--wizard-y);
  width: 70px;
  height: 70px;
  pointer-events: none;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 18px rgba(245,247,244,0.22));
  transition:
    filter 220ms ease,
    opacity 220ms ease;
}

.is-orbit .orbit-field-wizard.is-wizard-moving .orbit-field-wizard__tracker {
  filter:
    drop-shadow(0 0 24px rgba(245,247,244,0.38))
    drop-shadow(0 0 48px rgba(var(--phase-rgb),0.24));
}

.is-orbit .orbit-field-wizard__tracker::before,
.is-orbit .orbit-field-wizard__tracker::after,
.is-orbit .orbit-field-wizard__tracker i,
.is-orbit .orbit-field-wizard__tracker b {
  content: "";
  position: absolute;
  display: block;
  pointer-events: none;
}

.is-orbit .orbit-field-wizard__tracker::before {
  inset: 12px;
  border: 1px solid rgba(245,247,244,0.54);
  border-radius: 50%;
  transform: rotateX(62deg) rotateZ(calc(-20deg + (var(--wizard-progress) * 88deg)));
  box-shadow:
    0 0 18px rgba(245,247,244,0.14),
    inset 0 0 16px rgba(var(--phase-rgb),0.12);
}

.is-orbit .orbit-field-wizard__tracker::after {
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(245,247,244,0.94);
  box-shadow:
    0 0 18px rgba(245,247,244,0.76),
    0 0 48px rgba(var(--phase-rgb),0.34);
}

.is-orbit .orbit-field-wizard__tracker i,
.is-orbit .orbit-field-wizard__tracker b {
  display: none;
}

/* ── Original rail rules — now overridden by .orbit-unified-field__rail ── */
.is-orbit .orbit-field-wizard__ux-rail {
  position: absolute;
  pointer-events: none;
}

.is-orbit .orbit-field-wizard__ux-rail span {
  /* base styles deferred to unified-field__rail */
}

.is-orbit .orbit-field-wizard__ux-rail span:first-child {
  border-top: 0;
}

.is-orbit .orbit-field-wizard__ux-rail b {
  color: inherit;
}

.is-orbit .orbit-field-wizard__ux-rail small {
  /* deferred to unified-field__rail */
}

.is-orbit .orbit-field-wizard__ux-rail span.is-active {
  /* deferred to unified-field__rail */
}

.is-orbit .orbit-field-wizard__ux-rail span.is-active small {
  /* deferred to unified-field__rail */
}

/* readout base — deferred to unified-field__readouts */

.is-orbit .orbit-field-wizard__stage.guide-entry__media figcaption {
  display: none;
}

.is-orbit .orbit-field-wizard__copy {
  position: absolute;
  z-index: 6;
  right: clamp(36px, 5vw, 86px);
  bottom: clamp(120px, 12vw, 180px);
  width: min(460px, 38vw);
  padding: 28px 0 0;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition:
    opacity 900ms cubic-bezier(0.16, 0.84, 0.2, 1),
    transform 900ms cubic-bezier(0.16, 0.84, 0.2, 1);
}

.is-orbit .orbit-field-wizard.is-copy-visible .orbit-field-wizard__copy {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.is-orbit .orbit-field-wizard__copy::before {
  content: "";
  position: absolute;
  left: 0;
  right: 14%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(245,247,244,0.42), color-mix(in srgb, var(--entry-accent) 38%, transparent), transparent);
}

.is-orbit .orbit-field-wizard__copy p {
  margin: 0 0 18px;
  color: color-mix(in srgb, var(--entry-accent) 85%, rgba(245,247,244,0.80));
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.is-orbit .orbit-field-wizard__copy h3 {
  max-width: 18ch;
  margin: 0;
  color: var(--ink);
  font-size: clamp(28px, 2.8vw, 46px);
  line-height: 1.10;
  letter-spacing: -0.018em;
}

.is-orbit .orbit-field-wizard__copy span {
  display: block;
  max-width: 42ch;
  margin-top: 18px;
  color: rgba(245,247,244,0.68);
  font-size: 14.5px;
  line-height: 1.72;
}

@media (max-width: 980px) {
  .is-orbit .orbit-field-wizard {
    min-height: 420vh;
  }

  .is-orbit .orbit-field-wizard__stage.guide-entry__media {
    min-height: 620px;
  }

  .is-orbit .orbit-field-wizard__ux-rail {
    left: clamp(22px, 5vw, 38px);
    right: clamp(22px, 5vw, 38px);
    width: auto;
  }

  .is-orbit .orbit-field-wizard__copy {
    left: clamp(24px, 5vw, 42px);
    right: clamp(24px, 5vw, 42px);
    bottom: clamp(132px, 19vw, 168px);
    width: auto;
  }

  .is-orbit .orbit-field-wizard__readouts.orbit-stage-readouts {
    left: clamp(24px, 5vw, 42px);
    right: clamp(24px, 5vw, 42px);
    bottom: clamp(24px, 5vw, 42px);
    width: auto;
  }
}

@media (max-width: 640px) {
  .is-orbit .orbit-field-wizard__stage.guide-entry__media {
    min-height: 560px;
  }

  .is-orbit .orbit-field-wizard__ux-rail {
    display: none;
  }

  .is-orbit .orbit-field-wizard__tracker {
    width: 68px;
    height: 68px;
  }

  .is-orbit .orbit-field-wizard__copy h3 {
    font-size: 32px;
  }

  .is-orbit .orbit-field-wizard__copy span {
    font-size: 13.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .is-orbit .orbit-field-wizard__tracker,
  .is-orbit .orbit-field-wizard__copy {
    transition: none !important;
    animation: none !important;
  }
}

/* Orbit correction: the Flow section reuses the Guide system exactly; only a Tracker is added. */
.is-orbit .field-demo-section {
  background: #000 !important;
}

.is-orbit .field-demo-section::before,
.is-orbit .field-demo-section::after {
  display: none !important;
}

.is-orbit .field-demo-section .orbit-guide-flow-stack {
  display: flex !important;
  flex-direction: column;
  gap: clamp(40px, 6vw, 72px);
  max-width: 1080px;
  margin: clamp(42px, 6vw, 76px) auto 0;
}

.is-orbit .orbit-guide-flow-stack .guide-entry,
.is-orbit .orbit-guide-flow-stack .guide-entry--reverse {
  border-top-color: var(--line);
}

.is-orbit .orbit-guide-flow-stack .guide-entry:first-of-type {
  border-top-color: var(--line-2);
}

.is-orbit .orbit-guide-flow-stack .guide-entry__media {
  min-height: clamp(500px, 42vw, 700px);
  border: 0;
  border-radius: 8px;
  background: #000;
  box-shadow: none;
}

.is-orbit .orbit-guide-flow-stack .guide-stage:not(.guide-webgl-icon) {
  min-height: clamp(500px, 42vw, 700px);
  aspect-ratio: 4 / 3;
  filter: saturate(1.18) contrast(1.22) brightness(1.08);
  transform: none !important;
}

.is-orbit .orbit-guide-flow-stack .guide-entry__media::after {
  background: none;
}

.is-orbit .orbit-guide-flow-stack .guide-entry__media--stage::before {
  inset: 16px;
  border: 0;
  border-radius: 6px;
  opacity: 1;
}

.is-orbit .orbit-stage-tracker {
  position: absolute;
  z-index: 3;
  left: var(--tracker-x, 50%);
  top: var(--tracker-y, 56%);
  width: 56px;
  height: 56px;
  pointer-events: none;
  opacity: 0.36;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--entry-accent) 32%, transparent));
  transition:
    opacity 360ms var(--ease),
    filter 360ms var(--ease),
    transform 360ms var(--ease);
}

.is-orbit .orbit-flow-entry.is-tracker-active .orbit-stage-tracker {
  opacity: 0.96;
  transform: translate(-50%, -50%) scale(1.04);
}

.is-orbit .orbit-stage-tracker::before,
.is-orbit .orbit-stage-tracker::after,
.is-orbit .orbit-stage-tracker i,
.is-orbit .orbit-stage-tracker b {
  content: "";
  position: absolute;
  display: block;
  pointer-events: none;
}

.is-orbit .orbit-stage-tracker::before {
  inset: 9px;
  border: 1px solid rgba(245,247,244,0.58);
  border-radius: 50%;
  transform: rotateX(62deg) rotateZ(-18deg);
  box-shadow:
    0 0 18px rgba(245,247,244,0.12),
    inset 0 0 18px color-mix(in srgb, var(--entry-accent) 18%, transparent);
}

.is-orbit .orbit-stage-tracker::after {
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(245,247,244,0.96);
  box-shadow:
    0 0 16px rgba(245,247,244,0.72),
    0 0 42px color-mix(in srgb, var(--entry-accent) 36%, transparent);
}

.is-orbit .orbit-stage-tracker i {
  left: 50%;
  top: 10px;
  width: 1px;
  height: 34px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(245,247,244,0.58), transparent);
}

.is-orbit .orbit-stage-tracker b {
  left: 50%;
  top: 50%;
  width: 112px;
  height: 1px;
  transform: translate(-50%, -50%) rotate(-12deg);
  background: linear-gradient(90deg, transparent, rgba(245,247,244,0.34), color-mix(in srgb, var(--entry-accent) 46%, transparent), transparent);
}

.is-orbit .orbit-flow-entry.is-tracker-active .orbit-stage-tracker::before {
  animation: orbit-stage-tracker-orbit 2600ms cubic-bezier(0.42, 0, 0.2, 1) infinite;
}

.is-orbit .orbit-flow-entry.is-tracker-active .orbit-stage-tracker b {
  animation: orbit-stage-tracker-line 2600ms cubic-bezier(0.42, 0, 0.2, 1) infinite;
}

@keyframes orbit-stage-tracker-orbit {
  0%, 100% {
    transform: rotateX(62deg) rotateZ(-18deg) scale(0.98);
  }
  50% {
    transform: rotateX(62deg) rotateZ(34deg) scale(1.05);
  }
}

@keyframes orbit-stage-tracker-line {
  0%, 100% {
    width: 104px;
    opacity: 0.48;
    transform: translate(-50%, -50%) rotate(-12deg);
  }
  50% {
    width: 142px;
    opacity: 0.72;
    transform: translate(-50%, -50%) rotate(16deg);
  }
}

@media (max-width: 720px) {
  .is-orbit .field-demo-section .orbit-guide-flow-stack {
    gap: clamp(34px, 7vw, 48px);
  }

  .is-orbit .orbit-stage-tracker {
    width: 48px;
    height: 48px;
  }
}

/* Orbit unified field: one persistent Guide-stage grid, scroll-driven feature UX. */
.is-orbit .field-demo-section .orbit-guide-flow-stack {
  display: none !important;
}

/* Orbit Field demo: remove the lower foreground plane; WebGL owns the picture. */
.is-orbit .field-demo-section .op-sec__inner::before,
.is-orbit .field-demo-section.is-field-unfolded .op-sec__inner::before {
  content: none !important;
  display: none !important;
  animation: none !important;
}

.is-orbit .orbit-unified-field {
  --wizard-progress: 0;
  --wizard-x: 18%;
  --wizard-y: 66%;
  --entry-accent: #9fbbe0;
  --phase-rgb: 159, 187, 224;
  --grid-x: 0px;
  --grid-y: 0px;
  --grid-scale: 1;
  --grid-rotate: 0deg;
  --visual-x: 0px;
  --visual-y: 0px;
  --visual-scale: 1;
  --copy-alpha: 1;
  --copy-lift: 0px;
  position: relative;
  z-index: 2;
  min-height: 900vh;
  margin-top: clamp(34px, 5vw, 72px);
}

.is-orbit .orbit-unified-field__stage.guide-entry__media {
  position: sticky;
  top: calc(var(--nav-h) + 12px);
  height: calc(100vh - var(--nav-h) - 24px);
  min-height: 680px;
  margin: 0;
  overflow: hidden;
  isolation: isolate;
  border: 0;
  border-radius: 0;
  background: #000;
  box-shadow: none;
}

.is-orbit .orbit-unified-field__stage.guide-entry__media--stage::before {
  display: none;
}

.is-orbit .orbit-unified-field__stage.guide-entry__media::after {
  z-index: 2;
  background:
    radial-gradient(ellipse 90% 72% at 50% 50%, transparent 0%, transparent 62%, rgba(0,0,0,0.28) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.06), transparent 12%, transparent 86%, rgba(0,0,0,0.18));
}

.is-orbit .orbit-unified-field__canvas.guide-stage {
  position: absolute;
  left: -14%;
  top: -14%;
  z-index: 0;
  width: 128%;
  height: 128%;
  min-height: 0;
  aspect-ratio: auto;
  object-fit: cover;
  opacity: 0.98;
  filter: saturate(1.16) contrast(1.18) brightness(1.08);
  mix-blend-mode: screen;
  transform: none !important;
  transform-origin: 50% 56%;
  transition: filter 800ms cubic-bezier(0.16, 0.84, 0.2, 1);
  will-change: filter;
}

.is-orbit .orbit-unified-field__visuals {
  position: absolute;
  left: -18%;
  top: -18%;
  width: 136%;
  height: 136%;
  z-index: 1;
  pointer-events: none;
  opacity: 1;
  transform: none;
  transform-origin: 50% 56%;
}

.is-orbit .orbit-unified-field__visuals::before {
  content: "";
  position: absolute;
  inset: 10% 15%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 58%,
    color-mix(in srgb, var(--entry-accent) 10%, transparent) 0%,
    color-mix(in srgb, var(--entry-accent) 4%, transparent) 42%,
    transparent 70%);
  opacity: 0.66;
  filter: blur(70px);
  pointer-events: none;
  transition: background 1400ms cubic-bezier(0.16, 0.84, 0.2, 1);
}

/* Feature stages hidden — overlay elements ARE the visual */
.is-orbit .orbit-unified-field__feature-stage.guide-stage {
  display: none !important;
}

.is-orbit .orbit-unified-field__feature-stage.is-active {
  display: none !important;
}

.is-orbit .orbit-unified-field__nodes,
.is-orbit .orbit-unified-field__spine,
.is-orbit .orbit-unified-field__path,
.is-orbit .orbit-unified-field__surface,
.is-orbit .orbit-keynote-move,
.is-orbit .orbit-unified-field__tracker,
.is-orbit .orbit-unified-field__rail,
.is-orbit .orbit-unified-field__readouts,
.is-orbit .orbit-unified-field__copy {
  position: absolute;
  pointer-events: none;
}

/* ── ALL canvas overlays HIDDEN — Magic Move is pure WebGL ── */
.is-orbit .orbit-keynote-move,
.is-orbit .orbit-magic-rings,
.is-orbit .orbit-unified-field__nodes,
.is-orbit .orbit-unified-field__spine,
.is-orbit .orbit-unified-field__path,
.is-orbit .orbit-unified-field__tracker {
  display: none !important;
}

.is-orbit .orbit-unified-field__spine path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.is-orbit .orbit-unified-field__spine-base {
  stroke: rgba(245,247,244,0.105);
  stroke-width: 0.86;
  stroke-dasharray: 1 5.2;
}

.is-orbit .orbit-unified-field__spine-progress {
  stroke: color-mix(in srgb, var(--entry-accent) 58%, rgba(245,247,244,0.74));
  stroke-width: 1.16;
  filter:
    drop-shadow(0 0 9px color-mix(in srgb, var(--entry-accent) 28%, transparent))
    drop-shadow(0 0 20px rgba(245,247,244,0.08));
  transition: stroke 360ms cubic-bezier(0.2, 0.76, 0.2, 1);
}

.is-orbit .orbit-unified-field__nodes span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: grid;
  gap: 2px;
  min-width: 116px;
  padding: 7px 10px 7px 16px;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  color: rgba(245,247,244,0.18);
  background: transparent;
  transform: translate(-50%, -50%) scale(0.92);
  opacity: 0.16;
  transition:
    opacity 360ms var(--ease),
    color 360ms var(--ease),
    border-color 360ms var(--ease),
    background 360ms var(--ease),
    transform 360ms var(--ease);
}

.is-orbit .orbit-unified-field__nodes b {
  color: inherit;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.15;
  opacity: 0;
  transform: translateX(-4px);
  transition:
    opacity 360ms var(--ease),
    transform 360ms var(--ease);
}

.is-orbit .orbit-unified-field__nodes small {
  color: rgba(245,247,244,0.34);
  font-family: var(--mono);
  font-size: 8.2px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(-4px);
  transition:
    opacity 360ms var(--ease),
    transform 360ms var(--ease);
}

.is-orbit .orbit-unified-field__nodes span::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 50%;
  width: 8px;
  height: 8px;
  border: 1px solid rgba(245,247,244,0.24);
  transform: translateY(-50%) rotate(45deg);
  background: rgba(0,0,0,0.56);
  box-shadow: 0 0 0 rgba(0,0,0,0);
}

.is-orbit .orbit-unified-field__nodes span.is-active {
  color: rgba(245,247,244,0.94);
  opacity: 1;
  border-color: color-mix(in srgb, var(--entry-accent) 42%, rgba(245,247,244,0.12));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--entry-accent) 13%, transparent), rgba(0,0,0,0.22));
  transform: translate(-50%, -50%) translateY(-2px) scale(1);
}

.is-orbit .orbit-unified-field__nodes span.is-near {
  color: rgba(245,247,244,0.62);
  opacity: 0.46;
  border-color: rgba(245,247,244,0.05);
  transform: translate(-50%, -50%) scale(0.97);
}

.is-orbit .orbit-unified-field__nodes span.is-complete::before {
  border-color: color-mix(in srgb, var(--entry-accent) 22%, rgba(245,247,244,0.22));
}

.is-orbit .orbit-unified-field__nodes span.is-near b,
.is-orbit .orbit-unified-field__nodes span.is-near small {
  opacity: 0.46;
  transform: translateX(0);
}

.is-orbit .orbit-unified-field__nodes span.is-active b,
.is-orbit .orbit-unified-field__nodes span.is-active small {
  opacity: 1;
  transform: translateX(0);
}

.is-orbit .orbit-unified-field.is-wizard-moving .orbit-unified-field__nodes span:not(.is-active):not(.is-near) {
  opacity: 0.08;
}

.is-orbit .orbit-unified-field__nodes span.is-active::before {
  border-color: color-mix(in srgb, var(--entry-accent) 68%, rgba(245,247,244,0.62));
  box-shadow: 0 0 18px color-mix(in srgb, var(--entry-accent) 34%, transparent);
}

.is-orbit .orbit-unified-field__path {
  display: block;
  z-index: 4;
  left: 12%;
  right: 10%;
  top: 33%;
  height: 42%;
  opacity: 0.12;
  background:
    linear-gradient(105deg, transparent 0 14%, rgba(245,247,244,0.34) 14.2% 14.45%, transparent 14.7% 100%),
    linear-gradient(82deg, transparent 0 28%, rgba(245,247,244,0.22) 28.2% 28.45%, transparent 28.7% 100%),
    linear-gradient(113deg, transparent 0 43%, rgba(245,247,244,0.22) 43.2% 43.45%, transparent 43.7% 100%),
    linear-gradient(73deg, transparent 0 58%, rgba(245,247,244,0.20) 58.2% 58.45%, transparent 58.7% 100%),
    linear-gradient(99deg, transparent 0 72%, rgba(245,247,244,0.18) 72.2% 72.45%, transparent 72.7% 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

.is-orbit .orbit-unified-field__surface {
  display: none;
}

.is-orbit .orbit-unified-field__surface::before {
  content: "";
  position: absolute;
  left: var(--surface-gx, 50%);
  top: var(--surface-gy, 56%);
  width: var(--surface-span, 44vw);
  height: 1px;
  transform: translate(-50%, -50%) rotate(var(--surface-tilt, -4deg));
  transform-origin: 50% 50%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--entry-accent) 52%, rgba(245,247,244,0.30)), transparent);
  opacity: 0.82;
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--entry-accent) 22%, transparent));
  transition:
    left 620ms cubic-bezier(0.2, 0.76, 0.2, 1),
    top 620ms cubic-bezier(0.2, 0.76, 0.2, 1),
    width 620ms cubic-bezier(0.2, 0.76, 0.2, 1),
    transform 620ms cubic-bezier(0.2, 0.76, 0.2, 1),
    opacity 420ms cubic-bezier(0.2, 0.76, 0.2, 1);
}

.is-orbit .orbit-unified-field__surface-line,
.is-orbit .orbit-unified-field__surface-tile,
.is-orbit .orbit-unified-field__surface-gate {
  position: absolute;
  display: block;
  transition:
    left 620ms cubic-bezier(0.2, 0.76, 0.2, 1),
    top 620ms cubic-bezier(0.2, 0.76, 0.2, 1),
    opacity 420ms cubic-bezier(0.2, 0.76, 0.2, 1),
    transform 620ms cubic-bezier(0.2, 0.76, 0.2, 1),
    border-color 420ms cubic-bezier(0.2, 0.76, 0.2, 1),
    background 420ms cubic-bezier(0.2, 0.76, 0.2, 1);
}

.is-orbit .orbit-unified-field__surface-line {
  left: var(--surface-gx, 50%);
  top: var(--surface-gy, 56%);
  width: 18vw;
  height: 1px;
  opacity: 0.36;
  transform-origin: left center;
  background: linear-gradient(90deg, color-mix(in srgb, var(--entry-accent) 46%, rgba(245,247,244,0.18)), transparent);
}

.is-orbit .orbit-unified-field__surface-line--a {
  transform: rotate(calc(var(--surface-tilt, -4deg) - 18deg));
}

.is-orbit .orbit-unified-field__surface-line--b {
  width: 14vw;
  transform: rotate(calc(var(--surface-tilt, -4deg) + 24deg));
}

.is-orbit .orbit-unified-field__surface-tile {
  width: min(248px, 18vw);
  min-height: 46px;
  padding: 10px 12px 9px 34px;
  border-top: 1px solid color-mix(in srgb, var(--entry-accent) 44%, rgba(245,247,244,0.15));
  border-bottom: 1px solid rgba(245,247,244,0.05);
  color: rgba(245,247,244,0.88);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--entry-accent) 10%, rgba(0,0,0,0.62)), rgba(0,0,0,0.18) 72%, transparent),
    linear-gradient(180deg, rgba(245,247,244,0.040), transparent);
  box-shadow:
    0 0 24px color-mix(in srgb, var(--entry-accent) 14%, transparent),
    inset 0 1px 0 rgba(245,247,244,0.045);
  opacity: 0.92;
  transform: translate(-50%, -50%) rotate(var(--surface-tilt, -4deg)) skewX(-8deg);
}

.is-orbit .orbit-unified-field__surface-tile--primary {
  left: var(--surface-ax, 34%);
  top: var(--surface-ay, 64%);
}

.is-orbit .orbit-unified-field__surface-tile--secondary {
  left: var(--surface-bx, 50%);
  top: var(--surface-by, 54%);
  width: min(220px, 16vw);
  opacity: 0.66;
  transform: translate(-50%, -50%) rotate(calc(var(--surface-tilt, -4deg) + 5deg)) skewX(-8deg) scale(0.92);
}

.is-orbit .orbit-unified-field__surface-tile--tertiary {
  left: var(--surface-cx, 66%);
  top: var(--surface-cy, 65%);
  width: min(220px, 16vw);
  opacity: 0.62;
  transform: translate(-50%, -50%) rotate(calc(var(--surface-tilt, -4deg) - 4deg)) skewX(-8deg) scale(0.9);
}

.is-orbit .orbit-unified-field__surface-tile i {
  position: absolute;
  left: 13px;
  top: 50%;
  width: 10px;
  height: 10px;
  border: 1px solid color-mix(in srgb, var(--entry-accent) 70%, rgba(245,247,244,0.48));
  transform: translateY(-50%) rotate(45deg);
  box-shadow: 0 0 18px color-mix(in srgb, var(--entry-accent) 34%, transparent);
}

.is-orbit .orbit-unified-field__surface-tile b {
  display: block;
  overflow: hidden;
  color: rgba(245,247,244,0.92);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.is-orbit .orbit-unified-field__surface-tile small {
  display: block;
  margin-top: 5px;
  color: color-mix(in srgb, var(--entry-accent) 58%, rgba(245,247,244,0.38));
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.is-orbit .orbit-unified-field__surface-gate {
  left: var(--surface-gx, 50%);
  top: var(--surface-gy, 56%);
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  opacity: 0.84;
  transform: translate(-50%, -50%) rotateX(64deg) rotateZ(var(--surface-tilt, -4deg));
  background:
    radial-gradient(circle, color-mix(in srgb, var(--entry-accent) 24%, transparent) 0 8%, transparent 44%),
    radial-gradient(circle, rgba(245,247,244,0.11), transparent 58%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--entry-accent) 48%, rgba(245,247,244,0.18));
}

.is-orbit .orbit-unified-field__surface-gate::before,
.is-orbit .orbit-unified-field__surface-gate::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid color-mix(in srgb, var(--entry-accent) 34%, rgba(245,247,244,0.12));
  border-radius: 50%;
}

.is-orbit .orbit-unified-field__surface-gate::after {
  inset: 25px;
  opacity: 0.68;
}

.is-orbit .orbit-unified-field__surface-gate i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(245,247,244,0.95);
  box-shadow:
    0 0 16px rgba(245,247,244,0.72),
    0 0 42px color-mix(in srgb, var(--entry-accent) 42%, transparent);
}

.is-orbit .orbit-unified-field__surface-gate b {
  position: absolute;
  top: calc(100% + 7px);
  color: color-mix(in srgb, var(--entry-accent) 68%, rgba(245,247,244,0.58));
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}

.is-orbit .orbit-unified-field.is-wizard-moving .orbit-unified-field__surface-tile {
  opacity: 0.72;
  transform: translate(-50%, -50%) rotate(var(--surface-tilt, -4deg)) skewX(-8deg) translateY(-2px);
}

.is-orbit .orbit-unified-field.is-wizard-moving .orbit-unified-field__surface-tile--secondary,
.is-orbit .orbit-unified-field.is-wizard-moving .orbit-unified-field__surface-tile--tertiary {
  opacity: 0.42;
}

.is-orbit .orbit-unified-field__tracker {
  display: block;
}

.is-orbit .orbit-unified-field.is-wizard-moving .orbit-unified-field__tracker {
  filter:
    drop-shadow(0 0 24px rgba(245,247,244,0.40))
    drop-shadow(0 0 54px color-mix(in srgb, var(--entry-accent) 32%, transparent));
}

.is-orbit .orbit-unified-field__tracker::before,
.is-orbit .orbit-unified-field__tracker::after,
.is-orbit .orbit-unified-field__tracker i,
.is-orbit .orbit-unified-field__tracker b {
  content: "";
  position: absolute;
  display: block;
}

.is-orbit .orbit-unified-field__tracker::before {
  inset: 10px;
  border: 1px solid rgba(245,247,244,0.58);
  border-radius: 50%;
  transform: rotateX(62deg) rotateZ(calc(-20deg + (var(--wizard-progress) * 88deg)));
  box-shadow:
    0 0 18px rgba(245,247,244,0.16),
    inset 0 0 18px color-mix(in srgb, var(--entry-accent) 18%, transparent);
}

.is-orbit .orbit-unified-field__tracker::after {
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(245,247,244,0.96);
  box-shadow:
    0 0 18px rgba(245,247,244,0.78),
    0 0 46px color-mix(in srgb, var(--entry-accent) 42%, transparent);
}

.is-orbit .orbit-unified-field__tracker i {
  left: 50%;
  top: 14px;
  width: 1px;
  height: 40px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(245,247,244,0.64), transparent);
}

.is-orbit .orbit-unified-field__tracker b {
  left: 50%;
  top: 50%;
  width: 156px;
  height: 1px;
  transform: translate(-50%, -50%) rotate(calc(-14deg + (var(--wizard-progress) * 46deg)));
  background: linear-gradient(90deg, transparent, rgba(245,247,244,0.44), color-mix(in srgb, var(--entry-accent) 54%, transparent), transparent);
}

/* ── Rail: horizontal dot progress, bottom-right below copy ── */
.is-orbit .orbit-unified-field__rail {
  z-index: 6;
  right: clamp(24px, 2.8vw, 40px);
  bottom: clamp(48px, 7vh, 80px);
  left: auto;
  top: auto;
  transform: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  width: auto;
  border: 0 !important;
  background: transparent;
  backdrop-filter: none;
  padding: 0;
  box-shadow: none;
  opacity: 0.82;
  transition: opacity 600ms var(--ease);
}

.is-orbit .orbit-unified-field__rail span {
  display: block;
  min-height: auto !important;
  width: 4px;
  height: 4px;
  padding: 0;
  border: 0 !important;
  border-radius: 50%;
  background: rgba(245,247,244,0.14);
  color: transparent;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  transition:
    width 500ms cubic-bezier(0.16, 0.84, 0.2, 1),
    height 500ms cubic-bezier(0.16, 0.84, 0.2, 1),
    background 500ms cubic-bezier(0.16, 0.84, 0.2, 1),
    box-shadow 500ms cubic-bezier(0.16, 0.84, 0.2, 1),
    opacity 500ms var(--ease);
}

/* Show ALL dots (active, near, complete, and default) */
.is-orbit .orbit-unified-field__rail span.is-active,
.is-orbit .orbit-unified-field__rail span.is-near,
.is-orbit .orbit-unified-field__rail span.is-complete {
  display: block;
}

.is-orbit .orbit-unified-field__rail span::before {
  display: none;
}

/* Hide ALL text — dots only */
.is-orbit .orbit-unified-field__rail b,
.is-orbit .orbit-unified-field__rail small {
  display: none !important;
}

.is-orbit .orbit-unified-field__rail span.is-near {
  width: 5px;
  height: 5px;
  background: rgba(245,247,244,0.24);
}

.is-orbit .orbit-unified-field__rail span.is-active {
  width: 8px;
  height: 8px;
  background: color-mix(in srgb, var(--entry-accent) 72%, rgba(245,247,244,0.6));
  box-shadow: 0 0 10px color-mix(in srgb, var(--entry-accent) 36%, transparent);
}

.is-orbit .orbit-unified-field__rail span.is-complete {
  background: rgba(245,247,244,0.22);
}

.is-orbit .orbit-unified-field.is-wizard-moving .orbit-unified-field__rail {
  opacity: 0.36;
}

/* ── Readouts: completely hidden per user request ── */
.is-orbit .orbit-unified-field__readouts.orbit-stage-readouts {
  display: none !important;
}

.is-orbit .orbit-unified-field__stage.guide-entry__media figcaption {
  display: none;
  z-index: 6;
  left: clamp(26px, 4vw, 48px);
  right: clamp(26px, 4vw, 48px);
  bottom: clamp(20px, 3vw, 38px);
  align-items: end;
  opacity: 0.42;
  transition:
    opacity 420ms cubic-bezier(0.2, 0.76, 0.2, 1),
    transform 520ms cubic-bezier(0.2, 0.76, 0.2, 1);
}

.is-orbit .orbit-unified-field.is-wizard-moving .orbit-unified-field__stage.guide-entry__media figcaption {
  opacity: 0.22;
  transform: translateY(4px);
}

.is-orbit .orbit-unified-field__stage.guide-entry__media figcaption span {
  font-size: clamp(22px, 2.2vw, 34px);
  letter-spacing: -0.01em;
}

.is-orbit .orbit-unified-field__stage.guide-entry__media figcaption small {
  color: rgba(245,247,244,0.36);
  font-size: 9px;
  letter-spacing: 0.16em;
}

.is-orbit .orbit-unified-field__copy {
  z-index: 8;
  right: clamp(24px, 2.8vw, 40px);
  top: auto;
  bottom: clamp(72px, 9vh, 104px);
  width: min(320px, 28vw);
  padding: 0;
  background: none;
  text-align: right;
  opacity: var(--copy-alpha, 0);
  transform: translate3d(0, var(--copy-lift, 12px), 0);
  transition:
    opacity 180ms cubic-bezier(0.16, 0.84, 0.2, 1),
    transform 400ms cubic-bezier(0.16, 0.84, 0.2, 1);
}

.is-orbit .orbit-unified-field.is-copy-visible .orbit-unified-field__copy {
  opacity: var(--copy-alpha, 1);
  transform: translate3d(0, var(--copy-lift, 0), 0);
}

.is-orbit .orbit-unified-field__copy::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: -10px;
  width: 32px;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--entry-accent) 40%, rgba(245,247,244,0.2)));
  opacity: 0.7;
  transition: background 500ms var(--ease);
}

.is-orbit .orbit-unified-field__copy p {
  margin: 0 0 6px;
  color: color-mix(in srgb, var(--entry-accent) 54%, rgba(245,247,244,0.28));
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding-top: 0;
}

.is-orbit .orbit-unified-field__copy h3 {
  max-width: 18ch;
  margin: 0 0 0 auto;
  color: rgba(245,247,244,0.88);
  font-size: clamp(16px, 1.6vw, 24px);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.008em;
}

.is-orbit .orbit-unified-field__copy span {
  display: block;
  max-width: 28ch;
  margin-top: 6px;
  margin-left: auto;
  color: rgba(245,247,244,0.30);
  font-size: 10.5px;
  line-height: 1.58;
  letter-spacing: 0.005em;
}

@media (max-width: 980px) {
  .is-orbit .orbit-unified-field {
    min-height: 440vh;
  }

  .is-orbit .orbit-unified-field__stage.guide-entry__media {
    min-height: 620px;
  }

  .is-orbit .orbit-unified-field__nodes span {
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .is-orbit .orbit-unified-field__nodes b,
  .is-orbit .orbit-unified-field__nodes small {
    display: none;
  }

  .is-orbit .orbit-unified-field__rail {
    right: clamp(16px, 4vw, 28px);
    bottom: clamp(28px, 4vh, 48px);
    left: auto;
    gap: 5px;
  }

  .is-orbit .orbit-unified-field__copy {
    left: auto;
    right: clamp(16px, 4vw, 28px);
    top: auto;
    bottom: clamp(48px, 6vh, 72px);
    width: min(260px, 50vw);
    text-align: right;
  }
  .is-orbit .orbit-unified-field__copy h3 { margin: 0 0 0 auto; }
  .is-orbit .orbit-unified-field__copy span { margin-left: auto; }

}

@media (max-width: 640px) {
  .is-orbit .orbit-unified-field__stage.guide-entry__media {
    min-height: 560px;
  }

  .is-orbit .orbit-unified-field__rail {
    display: none;
  }

  .is-orbit .orbit-unified-field__tracker {
    width: 64px;
    height: 64px;
  }
}

/* =========================================================
   GUIDE — Floating chapter progress bar (bottom)
   ========================================================= */
.guide-scroll-bar {
  position: fixed;
  bottom: clamp(16px, 2.4vw, 28px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 9990;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(18,18,20,0.88);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
  pointer-events: none;
}
.guide-scroll-bar.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.guide-scroll-bar__fill { display: none; }
.guide-scroll-bar__chapters {
  display: flex;
  align-items: center;
  gap: 4px;
}
.guide-scroll-bar__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
  cursor: pointer;
  flex-shrink: 0;
}
.guide-scroll-bar__dot:hover {
  background: rgba(255,255,255,0.3);
}
.guide-scroll-bar__dot.is-active {
  background: rgba(159,187,224,0.8);
  transform: scale(1.4);
}
.guide-scroll-bar__label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.5);
  margin-left: 8px;
  white-space: nowrap;
  text-transform: uppercase;
  min-width: 0;
}

/* =========================================================
   GUIDE — Immersive entry (demo-style full-bleed card)
   ========================================================= */
.guide-entry--immersive {
  display: block;
  grid-template-columns: none;
  gap: 0;
  border: 0;
  padding: 0;
  margin: 0 calc(-1 * var(--pad));
}
/* --- Immersive: stage copy overlay (absolute, simple values) --- */
.guide-entry__stage-copy {
  position: absolute;
  z-index: 5;
  right: 72px;
  bottom: 100px;
  width: 480px;
  max-width: 38vw;
  padding: 28px 0 0;
}
.guide-entry__stage-copy::before {
  content: '';
  position: absolute;
  left: 0;
  right: 14%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(245,247,244,0.42), rgba(159,187,224,0.22), transparent);
}
.guide-entry__stage-copy .guide-entry__kicker {
  margin: 0 0 18px;
  color: rgba(159,187,224,0.88);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.guide-entry__stage-copy .guide-entry__title {
  margin: 0;
  color: rgba(255,255,255,0.96);
  font-size: clamp(28px, 3vw, 48px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.014em;
}
.guide-entry__stage-copy .guide-entry__desc {
  display: block;
  max-width: 42ch;
  margin: 18px 0 0;
  color: rgba(245,247,244,0.68);
  font-size: 14.5px;
  line-height: 1.78;
}
.guide-entry__stage-copy .guide-entry__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 0;
}
.guide-entry__stage-copy .guide-entry__chips span {
  padding: 5px 12px;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: rgba(159,187,224,0.72);
  border: 1px solid rgba(159,187,224,0.18);
  border-radius: 100px;
  background: rgba(159,187,224,0.05);
}
.guide-entry__stage-copy .guide-entry__link {
  display: inline-block;
  margin: 22px 0 0;
  font-size: 13.5px;
  color: rgba(255,255,255,0.6);
  border-bottom: none;
  transition: color 0.3s var(--ease);
}
.guide-entry__stage-copy .guide-entry__link:hover {
  color: rgba(255,255,255,0.92);
}
.guide-entry--immersive .guide-webgl-icon {
  display: none;
}

.guide-entry__stage-hero {
  position: relative;
  display: block;
  width: 100%;
  min-height: max(680px, calc(100vh - 64px));
  overflow: hidden;
  border-radius: 0;
  background: #000;
}
.guide-entry__stage-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 72% at 50% 50%, transparent 0%, transparent 62%, rgba(0,0,0,0.28) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.06), transparent 12%, transparent 86%, rgba(0,0,0,0.18));
}

.guide-entry__stage-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.guide-entry__stage-grid {
  display: none;
}

.guide-entry__stage-readouts {
  position: absolute;
  top: clamp(16px, 2.5vw, 28px);
  right: clamp(16px, 2.5vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 3;
}
.guide-entry__stage-readouts span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: rgba(159,187,224,0.52);
  text-align: right;
}

.guide-entry__stage-overlay {
  position: absolute;
  right: clamp(24px, 5vw, 64px);
  bottom: clamp(48px, 7vw, 88px);
  max-width: min(460px, 52vw);
  z-index: 3;
  text-align: right;
}
.guide-entry__stage-overlay--minimal {
  right: auto;
  bottom: auto;
  left: clamp(28px, 4vw, 56px);
  bottom: clamp(28px, 4vw, 56px);
  text-align: left;
}
.guide-entry__stage-label {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245,247,244,0.5);
  margin: 0;
}
.guide-entry__stage-overlay .guide-entry__kicker {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(159,187,224,0.72);
  margin: 0 0 14px;
}
.guide-entry__stage-title {
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 16px;
}
.guide-entry__stage-desc {
  font-size: clamp(13px, 1.1vw, 15px);
  color: var(--ink-dim);
  line-height: 1.7;
  margin: 0 0 24px;
}
.guide-entry__stage-dots {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.guide-entry__stage-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
  transition: background .25s var(--ease);
}
.guide-entry__stage-dots span.is-active {
  background: var(--orbit);
  box-shadow: 0 0 8px rgba(159,187,224,0.4);
}

.guide-entry__stage-hero figcaption {
  position: absolute;
  left: clamp(16px, 2.5vw, 28px);
  bottom: clamp(16px, 2.5vw, 28px);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.guide-entry__stage-hero figcaption span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.guide-entry__stage-hero figcaption small {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

@media (max-width: 768px) {
  .guide-entry--immersive {
    margin: 0 calc(-1 * var(--pad));
  }
  .guide-entry__stage-overlay {
    right: var(--pad);
    bottom: clamp(36px, 5vw, 56px);
    max-width: 80vw;
  }
  .guide-entry__stage-title {
    font-size: clamp(24px, 6vw, 32px);
  }
}

/* =========================================================
   ARTICLE — enhanced article page styling
   ========================================================= */
.article-webgl-stage {
  position: relative;
  width: 100%;
  margin: 0 auto clamp(48px, 6vw, 72px);
  height: clamp(400px, 50vh, 560px);
  min-height: 360px;
  overflow: hidden;
  background: #000;
}
.article-webgl-stage__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  mix-blend-mode: normal;
  filter: saturate(1.6) contrast(1.35) brightness(1.3);
}
.article-webgl-stage::after {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.08), transparent 18%, transparent 82%, rgba(0,0,0,0.12)),
    radial-gradient(circle at 50% 52%, transparent 0, transparent 60%, rgba(0,0,0,0.18) 100%);
}

.article__next {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: clamp(32px, 4vw, 48px) 0;
  border-top: 1px solid var(--line);
  margin-top: clamp(32px, 4vw, 56px);
}
.article__next a {
  font-size: 13px;
  color: var(--ink-dim);
  transition: color .18s var(--ease);
}
.article__next a:hover { color: var(--ink); }
.article__next-prev {}
.article__next-next { text-align: right; }

/* =========================================================
   ARTICLE COMPONENTS — v5 clean redesign
   Readable dark article. Clear hierarchy, polished surfaces.
   ========================================================= */

/* --- Page background --- */
.is-article .op {
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(159,187,224,0.025), transparent 60%),
    linear-gradient(180deg, #000 0%, #060709 100%);
}

/* --- Layout: two-column docs (sticky TOC sidebar + wide content) --- */
.guide-article-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  column-gap: 56px;
  align-items: start;
}
.guide-ch,
.guide-article-nav { grid-column: 2; }
@media (max-width: 940px) {
  .guide-article-wrap { display: block; max-width: 760px; }
}

/* --- Article header --- */
.guide-article-header {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(24px, 3vw, 40px) var(--pad) clamp(40px, 5vw, 56px);
  position: relative;
}
.guide-article-header .op-eyebrow {
  font-size: 12px;
  letter-spacing: 0.2em;
  color: rgba(198,203,214,0.34);
  text-transform: uppercase;
  font-family: var(--sans);
  font-weight: 500;
  margin: 0 0 18px;
}
.guide-article-header__title {
  font-size: clamp(38px, 4.8vw, 56px);
  font-weight: 580;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: rgba(255,255,255,0.97);
  margin: 0 0 26px;
}
.guide-article-header__lead {
  font-size: clamp(16px, 1.2vw, 18px);
  color: rgba(255,255,255,0.5);
  line-height: 1.72;
  max-width: 56ch;
  margin: 0 0 24px;
  font-weight: 400;
}
.guide-article-header__lead strong {
  color: rgba(255,255,255,0.8);
  font-weight: 550;
}
.guide-article-header__lead em {
  color: rgba(255,255,255,0.6);
  font-style: normal;
}
.guide-article-header__meta {
  font-size: 12px;
  color: rgba(198,203,214,0.3);
  font-family: var(--sans);
  letter-spacing: 0.06em;
}

/* --- Table of Contents --- */
.guide-toc {
  grid-column: 1;
  grid-row: 1 / 9999;
  position: sticky;
  top: 84px;
  align-self: start;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
}
.guide-toc__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.34);
  margin: 0 0 22px;
  padding: 0 0 14px;
  border-bottom: 1px solid rgba(255,255,255,0.09);
}
@media (max-width: 940px) {
  .guide-toc {
    position: static;
    grid-row: auto;
    margin: 0 0 44px;
    padding: 22px 0 4px;
    border-top: 1px solid rgba(255,255,255,0.14);
  }
}
.guide-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-left: 1px solid rgba(255,255,255,0.08);
}
.guide-toc__list li a {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: baseline;
  column-gap: 12px;
  padding: 7px 0 7px 14px;
  margin-left: -1px;
  border-left: 1px solid transparent;
  text-decoration: none;
  font-size: 14px;
  font-weight: 450;
  line-height: 1.45;
  letter-spacing: -0.004em;
  color: rgba(255,255,255,0.5);
  word-break: keep-all;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.guide-toc__list li a:hover { color: rgba(255,255,255,0.78); }
.guide-toc__list li a.is-active {
  color: rgba(255,255,255,0.96);
  font-weight: 500;
  border-left-color: rgba(255,255,255,0.5);
}
.guide-toc__list li a span {
  font-family: var(--sans);
  font-style: normal;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.32);
  text-align: left;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  min-width: 0;
}
.guide-toc__list li a.is-active span { color: rgba(255,255,255,0.7); }

/* --- Chapter sections --- */
.guide-ch {
  padding: clamp(48px, 5vw, 72px) 0 clamp(32px, 4vw, 48px);
  position: relative;
}
.guide-ch:first-of-type { padding-top: 0; }
.guide-ch + .guide-ch::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255,255,255,0.06);
}
.guide-ch__num {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 560;
  letter-spacing: 0.09em;
  color: rgba(255,255,255,0.36);
  margin: 0 0 18px;
  text-transform: uppercase;
  display: block;
}
.guide-ch__h {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.014em;
  color: rgba(255,255,255,0.95);
  margin: 0 0 18px;
  word-break: keep-all;
}
/* lead / intro paragraph */
.guide-ch .guide-lead,
.guide-ch > p.guide-lead {
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
  color: rgba(255,255,255,0.82);
  letter-spacing: -0.006em;
  margin: 0 0 24px;
  max-width: 44em;
  word-break: keep-all;
}
.guide-ch .guide-lead strong { color: #fff; font-weight: 600; }
.guide-ch > p:not([class]) {
  font-size: 16px;
  color: rgba(255,255,255,0.78);
  line-height: 1.7;
  margin: 0 0 18px;
  max-width: 48em;
  font-weight: 400;
  letter-spacing: -0.003em;
  word-break: keep-all;
}
.guide-ch > p:not([class]) strong {
  color: #fff;
  font-weight: 600;
}
.guide-ch p em,
.guide-ch > p:not([class]) em {
  color: rgba(255,255,255,0.96);
  font-style: normal;
  font-weight: 500;
}
.guide-ch > ul,
.guide-ch > ol {
  padding-left: 18px;
  margin: 0 0 18px;
}
.guide-ch > ul li,
.guide-ch > ol li {
  font-size: 16px;
  color: rgba(255,255,255,0.52);
  line-height: 1.72;
  margin-bottom: 6px;
  font-weight: 400;
}
.guide-ch > ul li strong,
.guide-ch > ol li strong {
  color: rgba(255,255,255,0.82);
  font-weight: 560;
}
.guide-ch h3 {
  font-size: 18px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  margin: 40px 0 14px;
  letter-spacing: -0.012em;
  line-height: 1.4;
}
.guide-ch > a,
.guide-ch > p:not([class]) a {
  color: rgba(159,187,224,0.7);
  text-decoration: none;
  border-bottom: 1px solid rgba(159,187,224,0.18);
  transition: color .2s, border-color .2s;
}
.guide-ch > a:hover,
.guide-ch > p:not([class]) a:hover {
  color: rgba(159,187,224,0.95);
  border-color: rgba(159,187,224,0.4);
}

/* --- Callout — docs info box (subtle tint, rounded) --- */
.guide-callout {
  margin: 28px 0;
  padding: 16px 20px;
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 2px solid rgba(255,255,255,0.34);
  background: rgba(255,255,255,0.026);
  border-radius: 8px;
  position: relative;
  max-width: 34em;
}
.guide-callout::before { content: none; }
.guide-callout,
.guide-callout p {
  font-size: 14px;
  color: rgba(255,255,255,0.78);
  line-height: 1.68;
  letter-spacing: -0.003em;
  font-weight: 400;
  word-break: keep-all;
}
.guide-callout p { margin: 0; }
.guide-callout strong {
  color: rgba(255,255,255,0.95);
  font-weight: 600;
}

/* --- Feature quote — large centered pull-quote (editorial) --- */
.guide-quote {
  margin: 36px 0;
  max-width: var(--gm, 760px);
  text-align: left;
  padding: 20px 0 20px 24px;
  border: none;
  border-left: 2px solid rgba(255,255,255,0.22);
  background: none;
}
.guide-quote p {
  font-size: 20px;
  line-height: 1.5;
  font-weight: 450;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,0.9);
  margin: 0;
  word-break: keep-all;
}
.guide-quote p strong { color: #fff; font-weight: 600; }
.guide-quote cite {
  display: block;
  margin-top: 14px;
  font-size: 12px;
  font-style: normal;
  font-weight: 450;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.42);
}

/* --- Table --- */
.guide-table {
  width: 100%;
  max-width: 680px;
  margin: 40px 0;
  border-collapse: collapse;
  border: none;
  border-top: 1px solid rgba(255,255,255,0.16);
  border-radius: 0;
  font-size: 16px;
}
.guide-table thead {}
.guide-table th {
  text-align: left;
  padding: 16px 32px 16px 0;
  border-bottom: 1px solid rgba(255,255,255,0.14);
  color: rgba(150,170,210,0.5);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-family: var(--mono);
  background: none;
}
.guide-table td {
  padding: 18px 32px 18px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.62);
  line-height: 1.7;
  vertical-align: top;
  font-size: 16px;
}
.guide-table th:last-child,
.guide-table td:last-child { padding-right: 0; }
.guide-table tr:last-child td { border-bottom: none; }
.guide-table td:first-child {
  color: rgba(255,255,255,0.9);
  font-weight: 600;
}
.guide-table tbody tr { transition: none; }
.guide-table tbody tr:hover { background: none; }

/* --- Scenario / Timeline --- */
/* Scenario timeline — atmospheric editorial, no card/pill/box */
.guide-scenario {
  margin: 40px 0;
  max-width: 640px;
  border: none;
  border-radius: 0;
  overflow: visible;
  background: none;
}
.guide-scenario__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 0 0 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: none;
}
.guide-scenario__persona {
  font-size: 14px;
  font-weight: 560;
  color: rgba(255,255,255,0.86);
  letter-spacing: -0.006em;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
}
.guide-scenario__ctx {
  font-size: 12px;
  color: rgba(255,255,255,0.34);
  font-family: var(--mono);
  letter-spacing: 0.01em;
}
.guide-scenario__body {
  position: relative;
  padding: 18px 0 2px;
}
/* timeline spine sits just left of the text column */
.guide-scenario__body::before {
  content: '';
  position: absolute;
  left: 68px;
  top: 22px;
  bottom: 22px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.12) 14%, rgba(255,255,255,0.12) 86%, transparent);
}
.guide-beat {
  display: grid;
  grid-template-columns: 56px 1fr;
  column-gap: 28px;
  padding: 9px 0;
  border: none;
  background: none;
}
.guide-beat__time {
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(255,255,255,0.32);
  padding-top: 3px;
}
.guide-beat__text {
  font-size: 16px;
  color: rgba(255,255,255,0.64);
  line-height: 1.62;
  margin: 0;
  word-break: keep-all;
}

/* --- Evidence / Mock (product-UI panels) --- */
.guide-evidence,
.guide-mock {
  margin: 38px auto;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.026), rgba(255,255,255,0.006));
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 18px 50px -20px rgba(0,0,0,0.65);
}
.guide-evidence__head,
.guide-mock__head {
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,0.018);
}
.guide-evidence__dot,
.guide-mock__dot {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.13);
  flex: none;
}
.guide-evidence__path,
.guide-mock__path {
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  margin-left: 8px;
  letter-spacing: 0.02em;
  text-transform: none;
}
.guide-evidence__body {
  padding: 4px 0;
  display: grid;
  grid-template-columns: max-content auto;
  column-gap: 32px;
}
.guide-mock__body {
  padding: 4px 0;
  display: grid;
  grid-template-columns: auto max-content auto;
  column-gap: 24px;
}
/* column header row (shared) */
.guide-evidence__colhead,
.guide-mock__colhead {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  padding: 9px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.guide-evidence__colhead span,
.guide-mock__colhead span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
}
.guide-evidence__row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.045);
  transition: background 0.16s ease;
}
.guide-evidence__row:hover { background: rgba(255,255,255,0.02); }
.guide-evidence__row:last-child { border-bottom: none; }
.guide-evidence__label {
  font-size: 14px;
  color: rgba(255,255,255,0.72);
}
.guide-evidence__status,
.guide-mock__status {
  justify-self: start;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: 100px;
  white-space: nowrap;
}
.guide-evidence__status::before,
.guide-mock__status::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex: none;
}
.guide-evidence__status--ok,
.guide-mock__status--verified { color: rgba(214,224,238,0.82); background: rgba(206,216,228,0.1); }
.guide-evidence__status--ok::before,
.guide-mock__status--verified::before { background: rgba(206,220,240,0.92); }
.guide-evidence__status--miss,
.guide-mock__status--candidate { color: rgba(255,255,255,0.46); background: rgba(255,255,255,0.04); }
.guide-evidence__status--miss::before,
.guide-mock__status--candidate::before { background: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.42); }
.guide-evidence__status--partial { color: rgba(255,255,255,0.62); background: rgba(255,255,255,0.05); }
.guide-evidence__status--partial::before { background: rgba(255,255,255,0.55); }
.guide-evidence__status--info { color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.04); }
.guide-evidence__status--info::before { background: rgba(255,255,255,0.42); }

/* Evidence — atmospheric, frameless: no card chrome, no traffic-lights, no pills */
.guide-evidence {
  margin: 30px 0;
  width: auto;
  max-width: 540px;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}
.guide-evidence .guide-evidence__head {
  padding: 0 0 12px;
  background: none;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  gap: 0;
}
.guide-evidence .guide-evidence__dot { display: none; }
.guide-evidence .guide-evidence__path { margin-left: 0; color: rgba(255,255,255,0.4); }
.guide-evidence .guide-evidence__body { padding: 6px 0 0; }
.guide-evidence .guide-evidence__colhead { padding: 12px 0 6px; border-bottom: none; }
.guide-evidence .guide-evidence__row {
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.guide-evidence .guide-evidence__row:last-child { border-bottom: none; }
.guide-evidence .guide-evidence__row:hover { background: none; }
.guide-evidence .guide-evidence__label { font-size: 16px; color: rgba(255,255,255,0.72); }
.guide-evidence .guide-evidence__status {
  padding: 0;
  background: none;
  border-radius: 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  gap: 8px;
}

/* --- Mock rows --- */
.guide-mock__row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.045);
  transition: background 0.16s ease;
}
.guide-mock__row:hover { background: rgba(255,255,255,0.02); }
.guide-mock__row:last-child { border-bottom: none; }
.guide-mock__type {
  justify-self: start;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 5px;
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.5);
  font-weight: 500;
}
.guide-mock__name {
  font-size: 14px;
  color: rgba(255,255,255,0.8);
  margin: 0;
  white-space: nowrap;
}
/* mock data-table removed in editorial layout — examples live in prose */
.guide-mock { display: none; }

/* --- Flow (editorial numbered steps) --- */
.guide-flow {
  margin: 44px 0;
  max-width: 40em;
  display: block;
  border: none;
  border-radius: 0;
  overflow: visible;
  background: none;
  box-shadow: none;
}
.guide-flow__step {
  display: block;
  position: relative;
  padding: 24px 0;
  border: none;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.guide-flow__step:last-child { border-bottom: 1px solid rgba(255,255,255,0.07); }
.guide-flow__step-num {
  display: none;
}
.guide-flow__step-label {
  font-size: 16px;
  font-weight: 580;
  color: rgba(255,255,255,0.9);
  margin: 0 0 8px;
  letter-spacing: -0.006em;
  line-height: 1.5;
  word-break: keep-all;
}
.guide-flow__step-desc {
  font-size: 16px;
  color: rgba(255,255,255,0.54);
  line-height: 1.74;
  margin: 0;
  max-width: 38em;
  word-break: keep-all;
}

/* ── Unified reading measure — ONE consistent line width for every content block ──
   (fixes ragged, jumpy block widths; everything aligns to the same column edge) */
.guide-ch { --gm: 760px; }
.guide-ch__h,
.guide-ch .guide-lead,
.guide-ch > p.guide-lead,
.guide-ch > p:not([class]),
.guide-ch h3,
.guide-ch > ul,
.guide-ch > ol,
.guide-callout,
.guide-table,
.guide-flow,
.guide-scenario,
.guide-evidence {
  max-width: var(--gm);
}
.guide-ch > p:not([class]),
.guide-ch .guide-lead { text-wrap: pretty; }

/* --- Diagram (grid cards) --- */
.guide-diagram {
  margin: 36px 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.022), rgba(255,255,255,0.005));
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 18px 50px -20px rgba(0,0,0,0.6);
}
.guide-diagram--6 { grid-template-columns: repeat(6, 1fr); }
.guide-diagram__slot {
  padding: 20px 18px;
  background: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-right: 1px solid rgba(255,255,255,0.06);
}
.guide-diagram__slot:last-child { border-right: none; }
.guide-diagram__slot-label {
  font-size: 14px;
  font-weight: 550;
  color: rgba(255,255,255,0.86);
  margin: 0;
  letter-spacing: -0.01em;
}
.guide-diagram__slot-desc {
  font-size: 12px;
  color: rgba(255,255,255,0.44);
  line-height: 1.55;
  margin: 0;
}

/* --- Dictionary list (two-column editorial definition list) --- */
.guide-dict-card {
  margin: 44px 0;
  display: block;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.guide-dict-card__item {
  padding: 30px 0;
  background: none;
  display: grid;
  grid-template-columns: 212px 1fr;
  column-gap: 44px;
  row-gap: 0;
  border: none;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.guide-dict-card__item:last-child { border-bottom: 1px solid rgba(255,255,255,0.1); }
.guide-dict-card__icon {
  grid-column: 1;
  grid-row: 1;
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 0 16px;
  padding: 0;
  background: none;
  border-radius: 0;
}
.guide-dict-card__icon svg {
  width: 32px;
  height: 32px;
  display: block;
  overflow: visible;
}
.guide-dict-card__label {
  grid-column: 1;
  grid-row: 2;
  font-size: 18px;
  font-weight: 600;
  color: rgba(255,255,255,0.92);
  margin: 0;
  letter-spacing: -0.012em;
}
.guide-dict-card__q {
  grid-column: 1;
  grid-row: 3;
  font-size: 14px;
  color: rgba(150,170,210,0.6);
  letter-spacing: -0.003em;
  margin: 7px 0 0;
}
.guide-dict-card__desc {
  grid-column: 2;
  grid-row: 1 / 4;
  align-self: start;
  font-size: 16px;
  color: rgba(255,255,255,0.62);
  line-height: 1.78;
  margin: 0;
}

/* --- Dictionary set (full-width cinematic structure bands) --- */
.guide-dictset {
  /* full-bleed: break out of the article content column to the viewport edges.
     content-column left offset = wrap margin + pad + TOC(168) + gap(56) */
  --dl-left: calc(max(0px, (100vw - 1080px) / 2) + var(--pad) + 224px);
  margin: 40px 0 0;
  margin-left: calc(-1 * var(--dl-left));
  width: 100vw;
}
.guide-dictset__item {
  position: relative;
  min-height: clamp(280px, 24vw, 340px);
  display: flex;
  align-items: flex-start;
  padding: 0;
  border-top: 1px solid rgba(255,255,255,0.04);
  overflow: hidden;
}
.guide-dictset__item:first-child {
  border-top: none;
}
.guide-dictset__item:last-child {
  border-bottom: none;
}
.guide-dictset__visual {
  position: absolute;
  top: 0;
  left: calc(var(--dl-left) + 410px);
  right: 0;
  bottom: 0;
  width: auto;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: hidden;
}
.guide-dictset__visual::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.3) 8%, transparent 18%);
  pointer-events: none;
}
.guide-dictset__visual canvas,
.guide-dictset__visual svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
  object-fit: cover;
}
.guide-dictset__copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0;
  padding: 36px 0 44px;
  padding-left: var(--dl-left);
  max-width: calc(var(--dl-left) + 460px);
  box-sizing: border-box;
  text-wrap: pretty;
}
.guide-dictset__q {
  order: 2;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 450;
  line-height: 30px;
  letter-spacing: 0.04em;
  color: rgba(143,212,167,0.48);
  margin: 0 0 0 14px;
}
.guide-ch .guide-dictset__name {
  order: 1;
  font-size: 24px;
  line-height: 30px;
  font-weight: 600;
  color: rgba(255,255,255,0.94);
  letter-spacing: -0.014em;
  margin: 0;
}
.guide-dictset__desc {
  order: 3;
  flex-basis: 100%;
  display: block;
  max-width: 520px;
  font-size: 16px;
  line-height: 27px;
  color: rgba(255,255,255,0.58);
  word-break: keep-all;
  text-wrap: pretty;
  margin: 14px 0 0;
}
.guide-dictset__desc span {
  display: block;
  margin-top: 6px;
}
.guide-dictset__desc span:first-child {
  margin-top: 0;
}
.guide-dictset .guide-dictset__desc em {
  color: #99d5b4e6;
  font-weight: 600;
  font-style: normal;
}
@media (max-width: 760px) {
  .guide-dictset {
    margin-left: 0;
    width: auto;
  }
  .guide-dictset__item {
    display: block;
    min-height: 0;
  }
  .guide-dictset__visual {
    position: relative;
    width: 100%;
    height: 280px;
  }
  .guide-dictset__visual::before {
    background: linear-gradient(0deg, #000 0%, transparent 40%);
  }
  .guide-dictset__copy {
    display: block;
    max-width: none;
    padding: 20px 0 8px;
    padding-left: 0;
  }
  .guide-dictset__q {
    text-align: left;
    margin: 0 0 10px;
  }
}

/* --- Lifecycle (horizontal badges) --- */
.guide-lifecycle {
  margin: 36px 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 20px;
  width: auto;
  max-width: none;
  padding: 0;
  border: none;
  border-radius: 0;
  overflow-x: visible;
  background: none;
  box-shadow: none;
}
.guide-lifecycle__stage {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  flex: 1 1 0;
  max-width: 220px;
  padding: 0;
}
.guide-lifecycle__badge {
  display: inline-block;
  font-family: inherit;
  font-size: 18px;
  letter-spacing: -0.012em;
  text-transform: none;
  padding: 0;
  border-radius: 0;
  font-weight: 600;
  background: none;
}
.guide-lifecycle__badge::before { display: none; }
.guide-lifecycle__badge--candidate { color: rgba(255,255,255,0.66); background: none; }
.guide-lifecycle__badge--verified { color: rgba(255,255,255,0.84); background: none; }
.guide-lifecycle__badge--master { color: rgba(255,255,255,0.97); background: none; }
.guide-lifecycle__label {
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  line-height: 1.6;
  max-width: none;
}
.guide-lifecycle__arrow {
  align-self: flex-start;
  font-size: 16px;
  color: rgba(255,255,255,0.32);
  padding: 0;
  margin-top: 1px;
  flex: none;
}

/* --- Compare (2-col split) --- */
.guide-compare {
  margin: 28px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  overflow: hidden;
}
.guide-compare__col {
  padding: 24px 22px;
  background: rgba(8,10,16,0.85);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.guide-compare__head {
  font-size: 13.5px;
  font-weight: 580;
  color: rgba(255,255,255,0.78);
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.guide-compare__item {
  font-size: 13.5px;
  color: rgba(255,255,255,0.45);
  line-height: 1.6;
  margin: 0;
  padding-left: 14px;
  position: relative;
}
.guide-compare__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
}

/* --- Article navigation (prev/next) --- */
.guide-article-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: clamp(32px, 4vw, 48px) 0;
  margin-top: clamp(36px, 4.5vw, 52px);
  position: relative;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.guide-article-nav::before { display: none; }
.guide-article-nav a {
  font-size: 14px;
  color: rgba(255,255,255,0.38);
  text-decoration: none;
  transition: color .2s var(--ease);
  font-weight: 430;
}
.guide-article-nav a:hover { color: rgba(255,255,255,0.82); }

/* ═══════ Docs accent + components (per-guide --ga; Dictionary = green) ═══════ */
.guide-article-wrap { --ga: #7fd49e; }

/* green SECTION eyebrow */
.guide-ch__num { color: var(--ga); font-weight: 600; opacity: 0.94; }

/* divider rule under each section heading */
.guide-ch__h { padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.08); }

/* TOC active → accent rail + accent number */
.guide-toc__list li a.is-active { border-left-color: var(--ga); }
.guide-toc__list li a.is-active span { color: var(--ga); }

/* design-system 콜아웃 — WebGL SDF 배지(채택안 ②) + 무대(궤도/풀/단일 파동) */
/* 아이콘/무대 요소(.guide-callout__viz, canvas.guide-callout-badge, i.gc-*)는 guide-stage.js 가 런타임에 .guide-callout 안에 자동 주입 */
/* 타이포: "핵심" 라벨 + 본문보다 밝고 큰 카피 (바/카드 없음, 글씨 색상강조 없음) */
.guide-callout {
  display: grid;
  grid-template-columns: 106px minmax(0, 1fr);
  column-gap: 18px;
  align-items: center;
  margin: 38px 0;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  overflow: visible;
}
.guide-callout::before { content: none; }
.guide-callout__viz {
  position: relative;
  grid-column: 1;
  width: 106px;
  height: 122px;
  align-self: center;
  display: block;
  overflow: visible;
  isolation: isolate;
}
/* 배지 뒤 옅은 백라이트 */
.guide-callout__viz::before {
  content: "";
  position: absolute;
  left: calc(50% + 8px);
  top: 8px;
  z-index: 0;
  width: 56px;
  height: 92px;
  transform: translateX(-50%);
  border-radius: 14px 14px 26px 26px;
  background: radial-gradient(ellipse at center, rgba(201,220,251,0.05), rgba(196,216,250,0.018) 44%, transparent 72%);
  filter: blur(1px);
  pointer-events: none;
}
.guide-callout__viz::after { content: none; }
/* 배지(WebGL SDF) — 부유 + 동기 글로우. 기존 guide-stage 캔버스가 남아도 이 슬롯 크기를 우선한다. */
.guide-callout__viz canvas {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 3;
  width: 100px;
  height: 108px;
  display: block;
  background: transparent;
  transform: translateX(-50%);
  -webkit-mask-image: none;
  mask-image: none;
  max-width: none;
}
.guide-callout-badge {
  animation: gcFloat 4.6s ease-in-out infinite, gcGlow 4.6s ease-in-out infinite;
}
.guide-callout__viz i {
  position: absolute;
  left: calc(50% + 8px);
  pointer-events: none;
}
/* 궤도 링 */
.guide-callout__viz i.gc-orb {
  top: 96px;
  width: 50px;
  height: 42px;
  border-radius: 50%;
  transform: translate(-50%, -50%) perspective(190px) rotateX(66deg);
  border: 1px solid rgba(224,236,254,0.54);
  box-shadow: 0 0 5px rgba(199,219,250,0.24), 0 0 14px rgba(178,204,247,0.07), inset 0 0 4px rgba(199,219,250,0.09);
  z-index: 1;
}
/* 빛 풀 — 그림자처럼 반응 */
.guide-callout__viz i.gc-pool {
  top: 98px;
  width: 40px;
  height: 13px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  background: radial-gradient(ellipse at center, rgba(202,222,251,0.13), rgba(194,216,250,0.04) 50%, transparent 82%);
  filter: blur(6px);
  animation: gcShadow 4.6s ease-in-out infinite;
}
/* 단일 파동 — 배지가 가장 낮은 순간 퍼져나감(아이콘 움직임과 동기) */
.guide-callout__viz i.gc-ping {
  top: 96px;
  width: 24px;
  height: 19px;
  border-radius: 50%;
  z-index: 0;
  transform: translate(-50%, -50%) perspective(190px) rotateX(66deg) scale(0.42);
  border: 1px solid rgba(212,227,250,0.5);
  box-shadow: 0 0 7px rgba(190,212,248,0.18);
  opacity: 0;
  animation: gcPing 4.6s ease-out infinite;
}
@keyframes gcFloat { 0%,100% { transform: translateX(-50%) translateY(2px); } 50% { transform: translateX(-50%) translateY(-4px); } }
@keyframes gcGlow { 0%,100% { filter: drop-shadow(0 0 3px rgba(190,212,248,0)); } 50% { filter: drop-shadow(0 0 6px rgba(190,212,248,0.32)); } }
@keyframes gcShadow { 0%,100% { opacity: 0.92; transform: translate(-50%, -50%) scale(0.9); } 50% { opacity: 0.5; transform: translate(-50%, -50%) scale(1.16); } }
@keyframes gcPing {
  0% { opacity: 0; transform: translate(-50%, -50%) perspective(190px) rotateX(66deg) scale(0.42); }
  8% { opacity: 0.62; }
  52% { opacity: 0; transform: translate(-50%, -50%) perspective(190px) rotateX(66deg) scale(1.5); }
  100% { opacity: 0; transform: translate(-50%, -50%) perspective(190px) rotateX(66deg) scale(1.5); }
}
@media (prefers-reduced-motion: reduce) {
  .guide-callout-badge,
  .guide-callout__viz i.gc-pool,
  .guide-callout__viz i.gc-ping { animation: none !important; }
}
.guide-callout > p {
  grid-column: 2;
  margin: 0;
  font-size: 15.5px;
  line-height: 1.88;
  color: #e6e6e6;
  word-break: keep-all;
}
.guide-callout > p::before {
  content: "핵심";
  display: block;
  margin-bottom: 9px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #a6b6d0;
}
.guide-callout strong { color: #fff; font-weight: 700; }

/* sidebar help card */
.guide-aside-card {
  margin: 30px 0 0;
  padding: 18px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 12px;
  background: rgba(255,255,255,0.022);
}
.guide-aside-card__icon { display: block; width: 22px; height: 22px; color: var(--ga); margin: 0 0 12px; }
.guide-aside-card__title { font-size: 14px; color: rgba(255,255,255,0.76); line-height: 1.5; margin: 0 0 10px; font-weight: 450; word-break: keep-all; }
.guide-aside-card__link { font-size: 12px; color: var(--ga); text-decoration: none; font-weight: 600; letter-spacing: 0.01em; }
.guide-aside-card__link:hover { opacity: 0.78; }

/* prev / next pager boxes */
.guide-article-nav { gap: 16px; border-top: none; padding-top: clamp(28px, 4vw, 44px); }
.guide-pager {
  flex: 1 1 0; max-width: 340px;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  text-decoration: none;
  transition: border-color .18s, background .18s;
}
.guide-pager:hover { border-color: color-mix(in srgb, var(--ga) 55%, transparent); background: rgba(255,255,255,0.022); }
.guide-pager--next { flex-direction: row-reverse; text-align: right; }
.guide-pager__arrow { color: var(--ga); font-size: 16px; flex: none; line-height: 1; }
.guide-pager__meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.guide-pager--next .guide-pager__meta { align-items: flex-end; }
.guide-pager__label { font-size: 12px; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.08em; }
.guide-pager__title { font-size: 14px; color: rgba(255,255,255,0.82); font-weight: 450; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* faint accent texture, top-right of content */
.guide-article-wrap { position: relative; }
.guide-article-wrap::before {
  content: '';
  position: absolute;
  top: -10px; right: 0;
  width: 280px; height: 200px;
  background-image: radial-gradient(color-mix(in srgb, var(--ga) 26%, transparent) 1px, transparent 1.4px);
  background-size: 16px 16px;
  -webkit-mask: linear-gradient(225deg, #000, transparent 70%);
  mask: linear-gradient(225deg, #000, transparent 70%);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .guide-diagram { grid-template-columns: repeat(2, 1fr); }
  .guide-diagram__slot:last-child { grid-column: span 2; }
  .guide-dict-card { grid-template-columns: 1fr 1fr; }
  .guide-compare { grid-template-columns: 1fr; }
  .guide-lifecycle { padding: 20px 16px; }
  .guide-lifecycle__stage { min-width: 80px; }
  .guide-lifecycle__arrow { padding: 0 8px; }
  .guide-flow__step { padding: 18px 0; }
  .guide-flow__step-num { display: none; }
  .guide-article-header__title { font-weight: 600; }
  .guide-ch > p:not([class]) { font-size: 15px; }
  .guide-beat { grid-template-columns: 50px 1fr; }
}

/* =========================================================
   GUIDE INDEX — polished orbit-style design
   ========================================================= */

.is-guide-index .guide-entry {
  border-top-color: rgba(238,241,235,0.08);
}

.is-guide-index .guide-entry__media {
  border: 1px solid rgba(238,241,235,0.07);
  border-radius: 8px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset,
              0 38px 110px -80px color-mix(in srgb, var(--entry-accent) 28%, transparent);
  transition: box-shadow 0.5s var(--ease), transform 0.5s cubic-bezier(0.23,1,0.32,1);
}

.is-guide-index .guide-entry__media--stage::before {
  inset: 16px;
  border: 1px solid rgba(238,241,235,0.04);
  border-radius: 6px;
}

.is-guide-index .guide-entry__media::after {
  background:
    linear-gradient(180deg, transparent 0%, transparent 62%, rgba(0,0,0,0.48) 100%),
    radial-gradient(ellipse 86% 64% at 50% 54%, transparent 0%, transparent 48%, rgba(0,0,0,0.52) 100%);
}

.is-guide-index .guide-stage {
  filter: saturate(1.3) contrast(1.24) brightness(1.10);
}

.is-guide-index .guide-entry__heading {
  grid-template-columns: clamp(120px, 14vw, 180px) minmax(0, 1fr);
  align-items: center;
}
.is-guide-index .guide-entry__heading .guide-webgl-icon {
  width: 100%;
  max-width: 100%;
}

.is-guide-index .guide-entry__title {
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.18;
  font-weight: 450;
  letter-spacing: -0.015em;
}

.is-guide-index .guide-entry__desc {
  color: rgba(245,247,244,0.44);
  transition: color 0.35s var(--ease);
}

/* --- Tracker: force hidden on guide-index (overrides .is-orbit rule) --- */
.is-guide-index .orbit-stage-tracker {
  display: none;
}

/* --- Scroll line effects: subtle accent lines on media when card enters viewport --- */
.is-guide-index .guide-entry__media--stage::before {
  inset: 14px;
  border: 1px solid transparent;
  border-radius: 6px;
  transition: border-color 0.8s var(--ease);
}
.is-guide-index .guide-entry__media::after {
  inset: 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.8s var(--ease), box-shadow 0.8s var(--ease);
}
.is-guide-index .guide-entry.is-in-view .guide-entry__media--stage::before {
  border-color: color-mix(in srgb, var(--entry-accent) 12%, transparent);
}
.is-guide-index .guide-entry.is-in-view .guide-entry__media::after {
  border-bottom-color: color-mix(in srgb, var(--entry-accent) 18%, transparent);
  box-shadow: inset 0 -24px 48px -24px color-mix(in srgb, var(--entry-accent) 6%, transparent);
}

/* --- Hover: clean, minimal --- */
.is-guide-index .guide-entry:hover .guide-entry__media {
  transform: translateY(-3px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset,
              0 48px 120px -64px color-mix(in srgb, var(--entry-accent) 38%, transparent);
}
.is-guide-index .guide-entry:hover .guide-entry__media--stage::before {
  border-color: color-mix(in srgb, var(--entry-accent) 22%, transparent);
}
.is-guide-index .guide-entry:hover .guide-entry__media::after {
  border-bottom-color: color-mix(in srgb, var(--entry-accent) 28%, transparent);
  box-shadow: inset 0 -32px 64px -32px color-mix(in srgb, var(--entry-accent) 10%, transparent);
}
.is-guide-index .guide-entry:hover .orbit-stage-tracker::before {
  animation: guide-tracker-orbit 2800ms cubic-bezier(0.42,0,0.2,1) infinite;
}
@keyframes guide-tracker-orbit {
  0%, 100% { transform: rotateX(62deg) rotateZ(-18deg) scale(0.97); }
  50% { transform: rotateX(62deg) rotateZ(28deg) scale(1.04); }
}
.is-guide-index .guide-entry:hover .guide-entry__desc {
  color: rgba(245,247,244,0.74);
}
.is-guide-index .guide-entry:hover .guide-webgl-icon {
  opacity: 1;
  filter: saturate(1.45) contrast(1.16) brightness(1.22);
  transform: scale(1.02);
}
.is-guide-index .guide-entry:hover .guide-entry__link {
  color: var(--entry-accent);
}

/* --- Immersive Field: match demo style --- */
.guide-entry--immersive {
  border: 0;
  padding: 0;
}
.guide-entry--immersive:hover .guide-entry__media {
  transform: none;
  box-shadow: none;
}

/* --- Immersive overrides (specificity 0-3-0 to beat .is-guide-index rules) --- */
.is-guide-index .guide-entry--immersive .guide-entry__title {
  font-size: clamp(28px, 3vw, 48px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.014em;
  color: rgba(255,255,255,0.96);
}
.is-guide-index .guide-entry--immersive .guide-entry__desc {
  color: rgba(245,247,244,0.68);
  font-size: 14.5px;
  line-height: 1.78;
}
.is-guide-index .guide-entry--immersive .guide-entry__link {
  color: rgba(255,255,255,0.6);
  border-bottom: none;
}
.is-guide-index .guide-entry--immersive:hover .guide-entry__desc {
  color: rgba(245,247,244,0.82);
}
.is-guide-index .guide-entry--immersive:hover .guide-entry__link {
  color: rgba(255,255,255,0.92);
}

/* --- Field hero: stronger presence, brighter copy, no detached weak block --- */
.is-guide-index .guide-entry--field-hero {
  --field-hero-accent: 185, 214, 255;
}
.is-guide-index .guide-entry--field-hero .guide-entry__stage-hero {
  min-height: max(740px, calc(100vh - 24px));
  background:
    radial-gradient(ellipse 72% 50% at 58% 38%, rgba(var(--field-hero-accent),0.085), transparent 68%),
    radial-gradient(ellipse 92% 58% at 50% 62%, rgba(96,132,172,0.055), transparent 72%),
    linear-gradient(180deg, #000 0%, #010305 52%, #000 100%);
}
.is-guide-index .guide-entry--field-hero .guide-entry__stage-hero::after {
  background:
    radial-gradient(ellipse 78% 58% at 52% 44%, transparent 0%, transparent 60%, rgba(0,0,0,0.16) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.015), transparent 18%, rgba(0,0,0,0.10) 100%);
}
.is-guide-index .guide-entry--field-hero .guide-entry__stage-canvas {
  opacity: 1;
  filter: saturate(1.58) contrast(1.34) brightness(1.34);
}
.is-guide-index .guide-entry--field-hero .guide-entry__stage-label {
  color: rgba(var(--field-hero-accent),0.76);
  text-shadow: 0 0 22px rgba(var(--field-hero-accent),0.28);
}
.is-guide-index .guide-entry--field-hero .guide-entry__stage-overlay--minimal {
  display: none;
}
.is-guide-index .guide-entry--field-hero .guide-entry__stage-copy--field {
  left: clamp(36px, 13.5vw, 278px);
  right: auto;
  bottom: clamp(22px, 3.8vw, 58px);
  width: min(620px, 40vw);
  max-width: none;
  padding: 20px 0 0;
  text-align: left;
  isolation: isolate;
}
.is-guide-index .guide-entry--field-hero .guide-entry__stage-copy--field::before {
  right: auto;
  width: min(300px, 42vw);
  background: linear-gradient(90deg, rgba(var(--field-hero-accent),0.55), rgba(245,247,244,0.18), transparent);
  box-shadow: 0 0 18px rgba(var(--field-hero-accent),0.12);
}
.is-guide-index .guide-entry--field-hero .guide-entry__stage-copy--field::after {
  display: none;
}
.is-guide-index .guide-entry--field-hero .guide-entry__stage-copy--field .guide-entry__kicker {
  margin-bottom: 14px;
  color: rgba(var(--field-hero-accent),0.82);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-shadow: 0 0 18px rgba(var(--field-hero-accent),0.18);
}
.is-guide-index .guide-entry--field-hero .guide-entry__stage-copy--field .guide-entry__heading {
  display: block;
  max-width: 620px;
  margin-bottom: 16px;
}
.is-guide-index .guide-entry--field-hero .guide-entry__stage-copy--field .guide-entry__title {
  max-width: 620px;
  color: rgba(255,255,255,0.985);
  font-size: clamp(30px, 2.8vw, 52px);
  font-weight: 480;
  line-height: 1.1;
  letter-spacing: -0.012em;
  text-shadow:
    0 1px 22px rgba(0,0,0,0.72),
    0 0 24px rgba(var(--field-hero-accent),0.11);
}
.is-guide-index .guide-entry--field-hero .guide-entry__stage-copy--field .guide-entry__desc {
  max-width: 50ch;
  color: rgba(245,247,244,0.70);
  font-size: clamp(13px, 0.92vw, 15px);
  line-height: 1.78;
  text-shadow: 0 1px 14px rgba(0,0,0,0.62);
}
.is-guide-index .guide-entry--field-hero .guide-entry__stage-copy--field .guide-entry__chips span {
  min-height: 28px;
  padding: 5px 11px;
  color: rgba(var(--field-hero-accent),0.72);
  border-color: rgba(var(--field-hero-accent),0.18);
  background:
    linear-gradient(180deg, rgba(var(--field-hero-accent),0.052), rgba(var(--field-hero-accent),0.018));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.032), 0 0 18px rgba(var(--field-hero-accent),0.032);
}
.is-guide-index .guide-entry--field-hero .guide-entry__stage-copy--field .guide-entry__link {
  margin-top: 18px;
  color: rgba(255,255,255,0.70);
  border-bottom: 1px solid rgba(var(--field-hero-accent),0.26);
}
.is-guide-index .guide-entry--field-hero .guide-entry__stage-copy--field .guide-entry__link:hover {
  color: rgb(var(--field-hero-accent));
  border-color: rgba(var(--field-hero-accent),0.72);
}

@media (max-width: 980px) {
  .is-guide-index .guide-entry--field-hero .guide-entry__stage-copy--field {
    left: clamp(24px, 6vw, 56px);
    bottom: clamp(44px, 7vw, 76px);
    width: min(620px, 82vw);
  }
  .is-guide-index .guide-entry--field-hero .guide-entry__stage-copy--field .guide-entry__title {
    font-size: clamp(36px, 8vw, 58px);
  }
}

/* --- Immersive: flow nodes --- */
.guide-entry__stage-nodes {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.guide-entry__stage-nodes span {
  position: absolute;
  left: var(--nx);
  top: var(--ny);
  transform: translate(-50%,-50%);
  display: flex;
  align-items: center;
  gap: 6px;
}
.guide-entry__stage-nodes span::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(159,187,224,0.6);
  box-shadow: 0 0 8px rgba(159,187,224,0.3);
  flex-shrink: 0;
}
.guide-entry__stage-nodes b {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: rgba(245,247,244,0.28);
  text-transform: uppercase;
  white-space: nowrap;
}
.guide-entry__stage-nodes span:first-child::before {
  width: 7px;
  height: 7px;
  background: rgba(159,187,224,0.9);
  box-shadow: 0 0 14px rgba(159,187,224,0.5);
}
.guide-entry__stage-nodes span:first-child b {
  color: rgba(159,187,224,0.62);
}

/* --- Immersive: tracker cursor --- */
.guide-entry__stage-tracker {
  position: absolute;
  z-index: 3;
  left: 22%;
  top: 66%;
  width: 56px;
  height: 56px;
  pointer-events: none;
  transform: translate(-50%,-50%);
  filter: drop-shadow(0 0 16px rgba(159,187,224,0.28));
}
.guide-entry__stage-tracker::before,
.guide-entry__stage-tracker::after,
.guide-entry__stage-tracker i,
.guide-entry__stage-tracker b {
  content: '';
  position: absolute;
  display: block;
  pointer-events: none;
}
.guide-entry__stage-tracker::before {
  inset: 9px;
  border: 1px solid rgba(245,247,244,0.48);
  border-radius: 50%;
  transform: rotateX(62deg) rotateZ(-18deg);
  box-shadow: 0 0 14px rgba(245,247,244,0.08),
              inset 0 0 14px rgba(159,187,224,0.14);
  animation: guide-immersive-orbit 3200ms cubic-bezier(0.42,0,0.2,1) infinite;
}
.guide-entry__stage-tracker::after {
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translate(-50%,-50%);
  background: rgba(245,247,244,0.92);
  box-shadow: 0 0 14px rgba(245,247,244,0.6),
              0 0 36px rgba(159,187,224,0.3);
}
.guide-entry__stage-tracker i {
  left: 50%;
  top: 8px;
  width: 1px;
  height: 34px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(245,247,244,0.48), transparent);
}
.guide-entry__stage-tracker b {
  left: 50%;
  top: 50%;
  width: 108px;
  height: 1px;
  transform: translate(-50%,-50%) rotate(-12deg);
  background: linear-gradient(90deg, transparent, rgba(245,247,244,0.28), rgba(159,187,224,0.36), transparent);
  animation: guide-immersive-line 3200ms cubic-bezier(0.42,0,0.2,1) infinite;
}
@keyframes guide-immersive-orbit {
  0%, 100% { transform: rotateX(62deg) rotateZ(-18deg) scale(0.97); }
  50% { transform: rotateX(62deg) rotateZ(28deg) scale(1.04); }
}
@keyframes guide-immersive-line {
  0%, 100% { width: 100px; opacity: 0.44; transform: translate(-50%,-50%) rotate(-12deg); }
  50% { width: 136px; opacity: 0.68; transform: translate(-50%,-50%) rotate(14deg); }
}

.guide-entry__stage-hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 36%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(transparent, rgba(0,0,0,0.52));
}

/* --- Mobile --- */
@media (max-width: 768px) {
  .is-guide-index .guide-entry {
    grid-template-columns: 1fr;
  }
  .is-guide-index .guide-entry--reverse .guide-entry__media { order: 0; }
  .is-guide-index .guide-entry__heading {
    grid-template-columns: minmax(120px, 0.32fr) minmax(0, 1fr);
  }
}

/* ================================================================
   DAVINCI — Product page
   Uses Astra design tokens: --davinci (#e6c88a) as brand accent,
   --ink scale for text, --line scale for borders, --bg for background.
   Layout: --max (1200px), --pad. Typography: --sans body, --serif headings.
   ================================================================ */
body.is-davinci {
  background: var(--bg);
  color: var(--ink);
}

/* ── Nav overrides ── */
.is-davinci .nav__cta { background: var(--davinci); color: #000; border-color: var(--davinci); }
.is-davinci .nav__cta:hover { background: var(--davinci); filter: brightness(1.12); }
.is-davinci .subnav { display: none; }

/* ════════════════════════════════════════
   HERO
   ════════════════════════════════════════ */
.dv-hero {
  position: relative;
  min-height: 88vh;
  min-height: 88dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(150px, 22vh, 240px) var(--pad) clamp(48px, 6vh, 80px);
}
.dv-hero__bg {
  position: absolute; inset: 0;
  z-index: 0; overflow: hidden;
}
.dv-hero__bg::after {
  content: "";
  position: absolute;
  inset: 8% 5% 12% 8%;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 45% at 48% 40%, rgba(230,200,138,0.035), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.010) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.006) 0 1px, transparent 1px 96px);
  opacity: 0.28;
  mask-image: radial-gradient(ellipse 75% 55% at 48% 38%, #000 0%, #000 35%, transparent 100%);
}
.dv-hero__bg canvas {
  width: 100%; height: 100%; display: block;
}
.dv-hero__fade {
  position: absolute; inset: 0;
  z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0.18) 0%,
      rgba(0,0,0,0.04) 20%,
      transparent 38%,
      transparent 60%,
      rgba(0,0,0,0.35) 80%,
      rgba(0,0,0,0.85) 100%),
    radial-gradient(ellipse 50% 42% at 50% 48%, transparent 20%, rgba(0,0,0,0.22) 100%);
}
.dv-hero__content {
  position: relative; z-index: 2;
  max-width: 600px; width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(clamp(-88px, -8.5vh, -64px));
}
.dv-eyebrow {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.015em;
  text-transform: none;
  color: var(--davinci);
  margin: 0 0 28px;
  display: inline-block;
  opacity: 0.7;
  font-weight: 400;
}
.dv-hero__h {
  font-size: clamp(30px, 3.6vw, 48px);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0 0 28px;
  max-width: 18ch;
  text-align: center;
  font-feature-settings: 'kern' 1, 'liga' 1;
}
:lang(ko) .dv-hero__h {
  font-weight: 420;
  letter-spacing: -0.016em;
}
.dv-hero__sub {
  font-size: 13.5px;
  line-height: 1.72;
  color: var(--ink-2);
  max-width: 42ch;
  margin: 0 0 44px;
  letter-spacing: -0.002em;
  text-align: center;
  opacity: 0.62;
  font-weight: 400;
}
.dv-hero__actions {
  display: flex; gap: 20px;
  align-items: center;
}
.dv-hero__h-line {
  display: block;
}
.dv-hero__h-accent {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.008em;
  margin-top: 8px;
  color: var(--ink);
  opacity: 0.92;
}
.dv-hero__meta {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 32px 0 0;
  opacity: 0.52;
  font-weight: 400;
}

/* ════════════════════════════════════════
   CHAPTER MARKERS  (dv-ch)
   ════════════════════════════════════════ */
.dv-ch {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(96px, 12vw, 180px) var(--pad) clamp(16px, 1.6vw, 24px);
  position: relative;
  display: grid;
  grid-template-columns: minmax(72px, 9%) 1fr;
  gap: clamp(20px, 2.4vw, 36px);
  align-items: start;
}
.dv-ch__n {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 0;
  line-height: 1;
  font-family: var(--sans);
  color: var(--davinci);
  padding-right: clamp(12px, 1.6vw, 20px);
  border-right: 1px solid rgba(230,200,138,0.16);
  min-height: clamp(48px, 5vw, 64px);
  position: relative;
}
.dv-ch__n i {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(34px, 4vw, 54px);
  color: var(--davinci);
  letter-spacing: 0;
  line-height: 0.92;
  display: block;
}
.dv-ch__n small {
  font-family: var(--mono);
  font-style: normal;
  font-size: 9px;
  font-weight: 400;
  color: var(--ink-muted);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  line-height: 1;
  opacity: 0.62;
  transform: none;
}
.dv-ch__n small::before {
  content: none;
}
.dv-ch__t {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.008em;
  line-height: 1.04;
  margin: 0 0 16px;
  max-width: 22ch;
  grid-column: 2;
  grid-row: 1;
  font-feature-settings: 'kern' 1, 'liga' 1;
}
.dv-ch__t:lang(ko) {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 430;
  letter-spacing: -0.018em;
}
.dv-ch__s {
  font-size: 13.5px;
  color: var(--ink-2);
  margin: 0;
  line-height: 1.65;
  letter-spacing: -0.002em;
  max-width: 50ch;
  font-weight: 400;
  opacity: 0.78;
  grid-column: 2;
  grid-row: 2;
}
.dv-ch__n { grid-column: 1; grid-row: 1 / span 2; }

/* ── Ambient page glow ── */
.dv {
  background:
    radial-gradient(ellipse 60% 35% at 55% 5%, rgba(230,200,138,0.035), transparent),
    radial-gradient(ellipse 45% 25% at 12% 42%, rgba(230,200,138,0.02), transparent),
    radial-gradient(ellipse 50% 30% at 50% 72%, rgba(230,200,138,0.025), transparent),
    radial-gradient(ellipse 35% 18% at 85% 28%, rgba(200,180,140,0.012), transparent);
}

/* ════════════════════════════════════════
   CONTENT BLOCKS  (dv-block)
   ════════════════════════════════════════ */
.dv-block {
  padding: clamp(64px, 8vw, 120px) var(--pad) 0;
}
.dv-block + .dv-block {
  padding-top: clamp(48px, 6vw, 80px);
}
.dv-block__inner {
  max-width: var(--max);
  margin: 0 auto;
  position: relative;
}
.dv-block + .dv-block .dv-block__inner::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin-bottom: clamp(40px, 5vw, 72px);
}
.dv-block .dv-eyebrow {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--davinci);
  font-weight: 400;
  opacity: 0.72;
  display: block;
}
.dv-block .dv-eyebrow + .dv-block__h::before { display: none; }
.dv-block__h {
  font-size: clamp(18px, 1.9vw, 24px);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.018em;
  line-height: 1.30;
  margin: 0 0 18px;
  max-width: 26ch;
  position: relative;
}
.dv-block__h::before {
  content: '';
  display: block;
  width: 12px;
  height: 1px;
  background: rgba(230,200,138,0.26);
  margin-bottom: 16px;
}
:lang(ko) .dv-block__h,
.dv-block__h:lang(ko) {
  font-weight: 430;
  letter-spacing: -0.014em;
}
.dv-block__p {
  font-size: 13.5px;
  line-height: 1.78;
  color: var(--ink-2);
  margin: 0;
  max-width: 48ch;
  letter-spacing: -0.002em;
  font-weight: 400;
  opacity: 0.66;
}
.dv-block__p + .dv-block__p {
  margin-top: 12px;
}

/* ════════════════════════════════════════
   SPLIT LAYOUT  (dv-split)
   Side-by-side copy + visual column
   ════════════════════════════════════════ */
.dv-split {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(72px, 9%) minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(20px, 2.4vw, 36px);
  align-items: start;
}
.dv-split.dv-block {
  padding: clamp(28px, 3vw, 48px) var(--pad) 0;
}
.dv-block + .dv-split.dv-block,
.dv-split.dv-block + .dv-split.dv-block,
.dv-split.dv-block + .dv-block {
  padding-top: clamp(36px, 4vw, 64px);
}
.dv {
  counter-reset: folio;
}
.dv-split.dv-block {
  counter-increment: folio;
}
.dv-split::before {
  content: '— fol. ' counter(folio, decimal-leading-zero) ' —';
  display: block;
  border-right: 1px solid rgba(230,200,138,0.12);
  align-self: stretch;
  min-height: 100%;
  grid-column: 1;
  grid-row: 1;
  padding-right: clamp(12px, 1.6vw, 20px);
  padding-top: 4px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-faint);
  letter-spacing: 0.03em;
  opacity: 0.55;
  text-align: right;
  white-space: nowrap;
}
.dv-split__copy {
  grid-column: 2;
  grid-row: 1;
  text-align: left;
  padding-top: 8px;
}
.dv-split__copy .dv-block__h { max-width: 18ch; }
.dv-split__viz {
  position: relative;
  width: 100%;
  align-self: start;
  grid-column: 3;
  grid-row: 1;
}
.dv-split--reverse .dv-split__copy { grid-column: 3; }
.dv-split--reverse .dv-split__viz { grid-column: 2; }
.dv-split .dv-mock   { margin-top: 0; }
.dv-split .dv-sketch  { margin-top: 0; max-width: none; }
.dv-split .dv-codex   { margin-top: 0; }
.dv-split .dv-annotation { margin-top: 20px; }

/* Codex inside mock window */
.dv-codex--in-mock { margin: 0; border-top: none; }
.dv-codex--in-mock::before { display: none; }

/* ── Geometric sketch ── */
.dv-sketch {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 32px 0 0;
}
.dv-sketch--split {
  max-width: none;
  filter: drop-shadow(0 0 40px rgba(230,200,138,0.03));
}

/* ── Annotation ── */
.dv-annotation {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-faint);
  margin: 36px 0 0;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.5;
  text-align: left;
}
.dv-annotation__dim {
  color: var(--ink-muted);
  opacity: 0.7;
}

/* ── Full-width editorial statement ── */
.dv-statement {
  padding: clamp(48px, 6vw, 100px) var(--pad);
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.dv-statement__inner {
  max-width: 640px;
  margin: 0 auto;
}
.dv-statement__h {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(26px, 3.0vw, 42px);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.010em;
  line-height: 1.14;
  margin: 0 0 20px;
}
.dv-statement__p {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.7;
  margin: 0;
  letter-spacing: -0.005em;
  font-weight: 400;
  opacity: 0.7;
}

/* ── Agent phases (kept for backward compat) ── */
.dv-phases {
  display: flex;
  gap: clamp(48px, 7vw, 100px);
  margin: 72px 0 0;
  padding-top: 0;
}
.dv-phase { flex: 0 1 auto; }
.dv-phase__n {
  display: none;
}
.dv-phase__name {
  display: block;
  font-size: clamp(22px, 2.8vw, 34px);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 14px;
  letter-spacing: -0.020em;
}
.dv-phase__desc {
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-muted);
  max-width: 18ch;
}

/* ── Mastery bars ── */
.dv-codex {
  margin: 40px 0 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(255,255,255,0.03);
  position: relative;
}
.dv-codex::before {
  content: 'MASTERY INDEX';
  position: absolute;
  top: -20px; right: 0;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--ink-muted);
  letter-spacing: 0.14em;
}
.dv-codex__row {
  display: grid;
  grid-template-columns: 1fr 120px 44px;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  transition: border-color 0.3s var(--ease);
}
.dv-codex__row:hover {
  border-color: var(--line-strong);
}
.dv-codex__kc {
  font-size: 14px;
  color: var(--ink-2);
}
.dv-codex__bar {
  height: 2px;
  background: var(--line);
  border-radius: 1px;
  overflow: hidden;
}
.dv-codex__bar i {
  display: block;
  height: 100%;
  background: var(--davinci);
  border-radius: 1px;
}
.dv-codex__val {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-muted);
  text-align: right;
}

/* ── Role match ── */
.dv-match {
  margin: 36px 0 0;
  border-top: 1px solid var(--line);
  position: relative;
}
.dv-match::before {
  content: 'ROLE ALIGNMENT';
  position: absolute;
  top: -20px; right: 0;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--ink-muted);
  letter-spacing: 0.14em;
}
.dv-match__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  transition: border-color 0.3s var(--ease);
}
.dv-match__row:hover {
  border-color: var(--line-strong);
}
.dv-match__role {
  font-size: 14px;
  color: var(--ink-2);
}
.dv-match__score {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--davinci);
}

/* ── Canvas ── */
.dv-stage { display: block; width: 100%; }
.dv-stage--hero { position: absolute; inset: 0; }
.dv-stage--mini {
  width: 100%;
  height: 100%;
  display: block;
}

/* Mini stage wrapper — Linear-style FIG illustrations */
.dv-stage-frame {
  position: relative;
  width: 100%;
  height: clamp(380px, 42vw, 520px);
  overflow: hidden;
  background: transparent;
}
.dv-stage-frame::before,
.dv-stage-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.dv-stage-frame::before {
  display: none;
}
.dv-stage-frame::after {
  background: linear-gradient(90deg, transparent, rgba(230,200,138,0.24), transparent);
  display: none;
}
.dv-webgl-vector {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.dv-webgl-vector--hero {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.dv-webgl-vector--mini {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.dv-wings-divider {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: -2rem auto;
  aspect-ratio: 1000 / 380;
  overflow: hidden;
}
.dv-webgl-vector--wings {
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* Override default .guide-stage sizing inside Davinci's frames */
.dv-stage-frame .guide-stage.dv-guide-stage {
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  display: block;
  background: #000;
  /* Subtle Davinci-tuned visual filter */
  filter: saturate(1.10) contrast(1.16) brightness(1.04);
}
.dv-fig-label {
  position: absolute;
  top: 18px;
  left: 20px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  z-index: 2;
  pointer-events: none;
  opacity: 0.55;
}

/* ════════════════════════════════════════
   METRICS  (dv-numbers)
   ════════════════════════════════════════ */
.dv-numbers {
  text-align: center;
  padding: clamp(96px, 13vw, 200px) var(--pad);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  max-width: var(--max);
  margin: 0 auto;
}
.dv-numbers .dv-eyebrow { margin-bottom: 16px; }
.dv-numbers__h {
  font-size: clamp(22px, 2.8vw, 36px);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.35;
  margin: 0 0 clamp(48px, 7vw, 88px);
}
.dv-numbers__grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 900px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(32px, 4vw, 48px);
}
.dv-numbers__grid li {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dv-numbers__grid strong {
  display: block;
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 10px;
}
.dv-numbers__grid span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ════════════════════════════════════════
   ONBOARDING STEPS
   ════════════════════════════════════════ */
.dv-onboard {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.dv-onboard li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 20px;
  align-items: baseline;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  transition: border-color 0.3s var(--ease);
}
.dv-onboard li:hover { border-color: var(--line-strong); }
.dv-onboard em {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-style: normal;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  line-height: 1;
}
.dv-onboard span {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
  letter-spacing: -0.005em;
}

/* ════════════════════════════════════════
   CTA
   ════════════════════════════════════════ */
.dv-cta {
  position: relative;
  padding: clamp(120px, 16vw, 260px) var(--pad);
  max-width: var(--max);
  margin: 0 auto;
  text-align: center;
}
.dv-cta::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 50% 45% at 50% 50%, rgba(230,200,138,0.04), transparent 70%);
}
.dv-cta__h {
  position: relative; z-index: 1;
  font-size: clamp(30px, 4.5vw, 56px);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.18;
  letter-spacing: -0.025em;
  margin: 0 0 24px;
}
.dv-cta__p {
  position: relative; z-index: 1;
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink-dim);
  max-width: 44ch;
  margin: 0 auto 40px;
}
.dv-cta__compass {
  position: relative; z-index: 1;
  width: 40px; height: 40px;
  margin: 0 auto 28px;
  opacity: 0.5;
}
.dv-cta__actions {
  position: relative; z-index: 1;
  display: flex; justify-content: center; gap: 12px;
}

/* ════════════════════════════════════════
   CONNECTING THE DOTS (dv-dots)
   ════════════════════════════════════════ */
.dv-dots {
  position: relative;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  aspect-ratio: 1000 / 600;
  overflow: hidden;
}
.dv-webgl-vector--dots {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.dv-dots__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 40px;
  pointer-events: none;
}
.dv-dots__label {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-dim);
  opacity: 0.4;
}

/* ════════════════════════════════════════
   CODEX MOCK (dv-mock)
   Terminal-style product UI mockups
   ════════════════════════════════════════ */
.dv-mock {
  margin: 40px 0 0;
  border: 1px solid rgba(255,255,255,0.04);
  background: linear-gradient(180deg, rgba(255,255,255,0.015) 0%, transparent 100%);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 40px 100px -40px rgba(0,0,0,0.5);
}
.dv-mock__head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.dv-mock__dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
}
.dv-mock__path {
  margin-left: 12px;
  flex: 1;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}
.dv-mock__live {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  padding: 2px 8px;
  background: rgba(230,200,138,0.08);
  color: var(--davinci-dim);
  border-radius: 999px;
}
.dv-mock__body {
  padding: 24px 26px;
}
.dv-mock__note {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-muted);
  letter-spacing: 0.06em;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

/* ── Domain ontology grid ── */
.dv-mock__grid--domains {
  display: flex;
  flex-direction: column;
}
.dv-mock__domain {
  display: grid;
  grid-template-columns: 1fr 140px 100px;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.dv-mock__domain:last-child { border-bottom: none; }
.dv-mock__domain-name {
  font-size: 13px;
  color: var(--ink-2);
}
.dv-mock__domain-meta {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
  text-align: right;
}
.dv-mock__domain-bar {
  height: 2px;
  background: var(--line);
  border-radius: 1px;
  overflow: hidden;
}
.dv-mock__domain-bar i {
  display: block;
  height: 100%;
  background: var(--davinci);
  border-radius: 1px;
}

/* ── Sub-header inside mock body ── */
.dv-mock__sub-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 14px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}

/* ── Session tracking ── */
.dv-mock__session {
  display: flex;
  flex-direction: column;
}
.dv-mock__session-row {
  display: grid;
  grid-template-columns: 10px 1fr 80px 110px 52px;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.025);
  transition: background 0.2s var(--ease);
}
.dv-mock__session-row:last-child { border-bottom: none; }
.dv-mock__session-row:hover { background: rgba(255,255,255,0.01); margin: 0 -26px; padding-left: 26px; padding-right: 26px; }
.dv-mock__session-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-muted);
}
.dv-mock__session-dot--up { background: rgba(127,212,158,0.7); box-shadow: 0 0 6px rgba(127,212,158,0.3); }
.dv-mock__session-dot--down { background: rgba(217,139,116,0.7); box-shadow: 0 0 6px rgba(217,139,116,0.3); }
.dv-mock__session-dot--next { background: var(--davinci); box-shadow: 0 0 6px rgba(230,200,138,0.3); }
.dv-mock__session-kc {
  font-size: 13px;
  color: var(--ink-2);
}
.dv-mock__session-bar {
  height: 3px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
}
.dv-mock__session-bar i {
  display: block;
  height: 100%;
  background: var(--davinci);
  border-radius: 2px;
  opacity: 0.5;
}
.dv-mock__session-delta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.03em;
  text-align: right;
}
.dv-mock__session-delta--up { color: rgba(127,212,158,0.8); }
.dv-mock__session-delta--down { color: rgba(217,139,116,0.8); }
.dv-mock__session-action {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
  text-align: right;
}
.dv-mock__session-action--up { color: rgba(127,212,158,0.7); }
.dv-mock__session-action--down { color: rgba(217,139,116,0.7); }
.dv-mock__session-row--next {
  border-left: 1px solid rgba(230,200,138,0.3);
  margin-left: -26px;
  padding-left: 25px;
  background: rgba(230,200,138,0.015);
  margin-right: -26px;
  padding-right: 26px;
}
.dv-mock__session-row--next .dv-mock__session-kc { color: var(--davinci); font-weight: 500; }
.dv-mock__session-row--next .dv-mock__session-action { color: var(--davinci); }

/* ── Career pipeline ── */
.dv-mock__pipeline {
  display: flex;
  flex-direction: column;
}
.dv-mock__pipeline-row {
  display: grid;
  grid-template-columns: 32px 1fr 44px 72px;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  transition: background 0.2s var(--ease);
}
.dv-mock__pipeline-row:last-child { border-bottom: none; }
.dv-mock__pipeline-row:hover { background: rgba(255,255,255,0.015); margin: 0 -22px; padding-left: 22px; padding-right: 22px; }
.dv-mock__pipeline-init {
  width: 32px; height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-muted);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
}
.dv-mock__pipeline-init--top {
  color: var(--davinci);
  background: rgba(230,200,138,0.08);
  border-color: rgba(230,200,138,0.18);
}
.dv-mock__pipeline-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.dv-mock__pipeline-co {
  font-size: 13px;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dv-mock__pipeline-bar {
  height: 3px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
}
.dv-mock__pipeline-bar i {
  display: block;
  height: 100%;
  background: var(--davinci);
  border-radius: 2px;
  opacity: 0.45;
}
.dv-mock__pipeline-score {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-muted);
  text-align: right;
}
.dv-mock__pipeline-tag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  text-align: center;
  white-space: nowrap;
}
.dv-mock__pipeline-tag--ready {
  color: rgba(127,212,158,0.9);
  background: rgba(127,212,158,0.10);
  border: 1px solid rgba(127,212,158,0.18);
}
.dv-mock__pipeline-tag--gap {
  color: var(--ink-muted);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
}
.dv-mock__pipeline-row--top .dv-mock__pipeline-co { color: var(--ink); font-weight: 500; }
.dv-mock__pipeline-row--top .dv-mock__pipeline-score { color: var(--davinci); }
.dv-mock__pipeline-row--top .dv-mock__pipeline-bar i { opacity: 0.7; }

/* ════════════════════════════════════════
   DATA INDEX  (dv-index)
   Clean modern list — replaces dashboard cards.
   ════════════════════════════════════════ */
.dv-index { margin: 0; padding: 0; }
.dv-index__head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--ink);
  opacity: 0.9;
  font-weight: 500;
}
.dv-index__head-tag {
  color: var(--ink-muted);
  opacity: 0.7;
  margin-left: auto;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  font-size: 12.5px;
}
.dv-index__rows {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dv-index__row {
  display: grid;
  grid-template-columns: 28px 1fr auto auto;
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,0.05);
  gap: 14px;
  position: relative;
}
.dv-index__row::before {
  content: '';
  grid-column: 3;
  align-self: end;
  margin-bottom: 0.32em;
  width: clamp(40px, 5vw, 80px);
  border-bottom: 1px dotted rgba(255,255,255,0.08);
}
.dv-index__num { grid-column: 1; }
.dv-index__main { grid-column: 2; min-width: 0; }
.dv-index__val { grid-column: 4; padding-left: 0; }
.dv-index__row:first-child { border-top: none; }
.dv-index__row:hover .dv-index__name { color: var(--ink); }
.dv-index__row--em .dv-index__name { color: var(--ink); }
.dv-index__row--em .dv-index__val-n { color: var(--davinci); }
.dv-index__num {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-muted);
  opacity: 0.85;
  letter-spacing: -0.008em;
  min-width: 32px;
  flex-shrink: 0;
  font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
}
.dv-index__main {
  flex: 1;
  min-width: 0;
}
.dv-index__name {
  display: block;
  font-size: 14px;
  color: var(--ink);
  letter-spacing: -0.010em;
  line-height: 1.3;
  font-weight: 450;
  transition: color 0.2s var(--ease);
}
.dv-index__sub {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 11.5px;
  color: var(--ink-muted);
  margin-top: 2px;
  letter-spacing: 0;
  line-height: 1.35;
  opacity: 0.62;
  font-weight: 400;
  text-transform: none;
}
.dv-index__val {
  text-align: right;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  padding-left: 20px;
}
.dv-index__val-n {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 450;
  color: var(--ink);
  letter-spacing: -0.006em;
  line-height: 1;
  opacity: 1;
}
.dv-index__tag { display: none; }
.dv-index__foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 14px;
  margin-top: 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: -0.003em;
  text-transform: none;
  color: var(--ink-muted);
  opacity: 0.8;
  font-weight: 400;
}
.dv-index__foot em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-muted);
  opacity: 0.7;
  font-size: 13px;
}
.dv-index__foot em {
  font-style: normal;
  color: var(--ink-faint);
}
.dv-split .dv-index { margin: 0; max-width: none; }

/* Marginalia removed — was too theatrical. */
.dv-mg { display: none; }

/* ════════════════════════════════════════
   PRODUCT UI PANEL  (dv-ui)
   Clean modern product-screen mockup
   ════════════════════════════════════════ */
.dv-ui {
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.018);
  border-radius: 6px;
  overflow: hidden;
}
.dv-split .dv-ui { margin-top: 0; }
.dv-ui__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,0.012);
  gap: 16px;
}
.dv-ui__title {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.008em;
}
.dv-ui__meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.dv-ui__body {
  padding: 24px 20px;
  position: relative;
}
.dv-ui__body--tight { padding: 18px 20px; }
.dv-ui__chart, .dv-ui__graph {
  display: block;
  width: 100%;
  height: auto;
}
.dv-ui__foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
  gap: 16px;
}
.dv-ui__foot-em { color: var(--ink-2); }

/* Activity feed (used inside dv-ui body) */
.dv-ui__feed {
  display: flex;
  flex-direction: column;
}
.dv-ui__feed-item {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.dv-ui__feed-item:first-child { padding-top: 0; }
.dv-ui__feed-item:last-child { border-bottom: none; padding-bottom: 0; }
.dv-ui__feed-date {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}
.dv-ui__feed-name {
  display: block;
  font-size: 14px;
  color: var(--ink-2);
  letter-spacing: -0.005em;
  line-height: 1.4;
}
.dv-ui__feed-sub {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 4px;
  letter-spacing: 0.02em;
}

/* Stats grid (used inside dv-ui body) */
.dv-ui__stats {
  display: flex;
  flex-direction: column;
}
.dv-ui__stats-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.dv-ui__stats-row:first-child { padding-top: 0; }
.dv-ui__stats-row:last-child { border-bottom: none; padding-bottom: 0; }
.dv-ui__stats-label {
  font-size: 14px;
  color: var(--ink-2);
  letter-spacing: -0.005em;
}
.dv-ui__stats-val {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--ink);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* ════════════════════════════════════════
   SCROLL-REVEAL
   ════════════════════════════════════════ */
.dv-block,
.dv-ch {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.dv-block.is-in-view,
.dv-ch.is-in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════ */
@media (max-width: 820px) {
  .dv-hero__bg { opacity: 0.4; }
  .dv-hero__fade { background: rgba(0,0,0,0.5); }
  .dv-hero__content { transform: translateY(-42px); }
  .dv-hero__h { max-width: none; }
  .dv-ch {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .dv-ch__n {
    border-right: none;
    border-bottom: 1px solid rgba(230,200,138,0.18);
    padding-right: 0;
    padding-bottom: 18px;
    flex-direction: row;
    align-items: baseline;
    gap: 16px;
    min-height: 0;
  }
  .dv-ch__n i { font-size: clamp(40px, 9vw, 64px); }
  .dv-split { grid-template-columns: 1fr; gap: 32px; }
  .dv-split::before { display: none; }
  .dv-split__copy,
  .dv-split__viz,
  .dv-split--reverse .dv-split__copy,
  .dv-split--reverse .dv-split__viz {
    grid-column: 1;
    max-width: none;
  }
  .dv-split--reverse .dv-split__copy { grid-row: 1; }
  .dv-split--reverse .dv-split__viz { grid-row: 2; }
}
@media (max-width: 720px) {
  .dv-hero__bg { display: block; opacity: 0.18; }
  .dv-webgl-vector--hero {
    transform: none;
    transform-origin: center;
  }
}
@media (max-width: 480px) {
  .dv-hero__actions { flex-direction: column; }
  .dv-cta__actions { flex-direction: column; align-items: center; }
  .dv-phases { flex-direction: column; gap: 20px; }
  .dv-codex__row { grid-template-columns: 1fr 80px 36px; }
  .dv-mock__domain { grid-template-columns: 1fr; gap: 6px; }
  .dv-mock__domain-meta { text-align: left; }
  .dv-mock__session-row { grid-template-columns: 10px 1fr 52px; }
  .dv-mock__session-bar, .dv-mock__session-delta { display: none; }
  .dv-mock__pipeline-row { grid-template-columns: 32px 1fr 44px; }
  .dv-mock__pipeline-tag { display: none; }
  .dv-mock__sub-head { flex-direction: column; gap: 4px; align-items: flex-start; }
  .dv-split { gap: 24px; }
}

/* ════════════════════════════════════════
   DAVINCI DETAIL SUB-NAV  (dv-subnav)
   Sticky top bar under global nav
   ════════════════════════════════════════ */
.dv-subnav {
  position: sticky;
  top: 56px;
  z-index: 50;
  background: rgba(15, 15, 14, 0.78);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.dv-subnav__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 14px var(--pad);
  display: flex;
  align-items: baseline;
  gap: clamp(20px, 3vw, 40px);
}
.dv-subnav__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-muted);
  opacity: 0.65;
  white-space: nowrap;
}
.dv-subnav__links {
  display: flex;
  gap: clamp(20px, 2.6vw, 32px);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.dv-subnav__link {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  font-weight: 400;
  color: var(--ink-2);
  text-decoration: none;
  opacity: 0.6;
  letter-spacing: -0.005em;
  transition: opacity .2s var(--ease), color .2s var(--ease);
  position: relative;
  padding-bottom: 4px;
}
.dv-subnav__link:hover {
  color: var(--davinci);
  opacity: 1;
}
.dv-subnav__link.is-active {
  color: var(--davinci);
  opacity: 1;
}
.dv-subnav__link.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--davinci);
}
.dv-subnav__meta {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  opacity: 0.55;
  white-space: nowrap;
}
@media (max-width: 820px) {
  .dv-subnav__meta { display: none; }
  .dv-subnav__inner { gap: 12px; flex-wrap: wrap; }
  .dv-subnav__label { width: 100%; margin-bottom: 4px; }
}

/* Detail-specific intro (compact hero) */
.dv-detail-intro {
  padding: clamp(120px, 14vh, 180px) var(--pad) clamp(40px, 5vw, 64px);
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(72px, 9%) 1fr;
  gap: clamp(20px, 2.4vw, 36px);
  align-items: start;
}
.dv-detail-intro__mark {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(14px, 1.4vw, 18px);
  font-weight: 400;
  color: var(--davinci);
  padding-right: clamp(12px, 1.6vw, 20px);
  border-right: 1px solid rgba(230,200,138,0.16);
  min-height: clamp(36px, 3.6vw, 44px);
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0.85;
}
.dv-detail-intro__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dv-detail-intro__h {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(32px, 3.8vw, 50px);
  font-weight: 400;
  letter-spacing: -0.008em;
  line-height: 1.04;
  color: var(--ink);
  margin: 0;
  font-feature-settings: 'kern' 1, 'liga' 1;
}
.dv-detail-intro__s {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-2);
  letter-spacing: -0.002em;
  opacity: 0.68;
  margin: 0;
  max-width: 54ch;
  font-weight: 400;
}
@media (max-width: 820px) {
  .dv-detail-intro {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .dv-detail-intro__mark {
    border-right: none;
    border-bottom: 1px solid rgba(230,200,138,0.16);
    padding-bottom: 14px;
    padding-right: 0;
    min-height: 0;
  }
}


/* ════════════════════════════════════════
   DAVINCI MEGAMENU  (dv-mega)
   Hover-revealed top-bar menu with custom icons
   ════════════════════════════════════════ */
.nav__item--has-mega { position: relative; }
.nav__trigger--mega {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  background: transparent;
  border: none;
  color: var(--ink-dim);
  font-size: 13px;
  font-weight: 450;
  padding: 8px 12px;
  cursor: pointer;
  transition: color .18s var(--ease);
  border-radius: 6px;
  letter-spacing: -0.005em;
}
.nav__trigger--mega:hover,
.nav__item--has-mega:hover .nav__trigger--mega,
.nav__item--has-mega:focus-within .nav__trigger--mega {
  color: var(--ink);
}
.nav__caret {
  width: 9px;
  height: 6px;
  color: currentColor;
  opacity: 0.75;
  transition: transform .2s var(--ease);
}
.nav__item--has-mega:hover .nav__caret,
.nav__item--has-mega:focus-within .nav__caret {
  transform: translateY(1px);
}

.dv-mega {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translate(-50%, -8px);
  width: min(940px, calc(100vw - 48px));
  background: rgba(15, 15, 14, 0.94);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  border: 1px solid rgba(230,200,138,0.10);
  border-radius: 8px;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease);
  z-index: 200;
  box-shadow: 0 24px 80px rgba(0,0,0,0.55),
              0 2px 0 rgba(230,200,138,0.04) inset;
}
.nav__item--has-mega:hover .dv-mega,
.nav__item--has-mega:focus-within .dv-mega,
.dv-mega:hover {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.dv-mega::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0; right: 0;
  height: 12px;
}
.dv-mega__inner {
  padding: 22px 24px 18px;
}
.dv-mega__head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 0 4px 14px;
  border-bottom: 1px solid rgba(230,200,138,0.08);
  margin-bottom: 18px;
}
.dv-mega__label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--davinci);
  opacity: 0.78;
  white-space: nowrap;
}
.dv-mega__sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-2);
  opacity: 0.65;
  letter-spacing: 0;
}
.dv-mega__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.dv-mega__item { display: flex; }
.dv-mega__card {
  display: grid;
  grid-template-columns: 36px 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 4px;
  padding: 16px 14px 18px;
  text-decoration: none;
  color: var(--ink-2);
  border-radius: 6px;
  width: 100%;
  position: relative;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.dv-mega__card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 6px;
  border: 1px solid transparent;
  pointer-events: none;
  transition: border-color .2s var(--ease);
}
.dv-mega__card:hover {
  background: rgba(230,200,138,0.04);
}
.dv-mega__card:hover::before {
  border-color: rgba(230,200,138,0.16);
}
.dv-mega__icon {
  grid-row: 1 / span 2;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: var(--davinci);
  opacity: 0.85;
  border: 1px solid rgba(230,200,138,0.18);
  border-radius: 4px;
  background: rgba(230,200,138,0.03);
  transition: opacity .2s var(--ease), border-color .2s var(--ease);
}
.dv-mega__icon svg {
  width: 22px;
  height: 22px;
}
.dv-mega__card:hover .dv-mega__icon {
  opacity: 1;
  border-color: rgba(230,200,138,0.36);
}
.dv-mega__title {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.008em;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.dv-mega__title i[lang="en"] {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -0.005em;
}
.dv-mega__desc {
  font-size: 11.5px;
  color: var(--ink-muted);
  letter-spacing: -0.003em;
  line-height: 1.45;
  opacity: 0.78;
  font-family: var(--sans);
}
.dv-mega__fol {
  position: absolute;
  top: 12px;
  right: 12px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 10.5px;
  color: var(--ink-faint);
  opacity: 0.55;
  letter-spacing: 0.02em;
}
.dv-mega__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 4px 0;
  margin-top: 14px;
  border-top: 1px solid rgba(230,200,138,0.06);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.dv-mega__foot em {
  font-family: var(--serif);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 11px;
  opacity: 0.7;
}
.dv-mega__foot a {
  color: var(--ink-muted);
  text-decoration: none;
  transition: color .18s var(--ease);
}
.dv-mega__foot a:hover { color: var(--davinci); }

@media (max-width: 980px) {
  .dv-mega { width: min(640px, calc(100vw - 32px)); }
  .dv-mega__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .nav__item--has-mega { display: none; }
}

/* ════════════════════════════════════════
   DETAIL PAGE — RICH ELEMENTS
   Formulas, code blocks, diagrams, asides
   ════════════════════════════════════════ */

/* Inline formula block (math/identity) */
.dv-formula {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.4;
  color: var(--ink);
  text-align: center;
  margin: 28px 0;
  padding: 24px 0;
  border-top: 1px solid rgba(230,200,138,0.10);
  border-bottom: 1px solid rgba(230,200,138,0.10);
  position: relative;
}
.dv-formula::before {
  content: attr(data-label);
  position: absolute;
  top: 8px;
  right: 0;
  font-family: var(--mono);
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-faint);
  opacity: 0.5;
}
.dv-formula sub, .dv-formula sup {
  font-size: 0.62em;
  letter-spacing: 0;
}
.dv-formula__op {
  font-style: normal;
  margin: 0 0.32em;
  color: var(--davinci);
  opacity: 0.78;
}

/* Code block (mono, framed) */
.dv-code {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-2);
  background: rgba(255,255,255,0.018);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 3px;
  padding: 16px 18px;
  margin: 20px 0;
  overflow-x: auto;
  position: relative;
}
.dv-code::before {
  content: attr(data-lang);
  position: absolute;
  top: -8px;
  left: 14px;
  background: var(--bg, #131312);
  padding: 0 8px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  opacity: 0.65;
}
.dv-code .kw  { color: var(--davinci); opacity: 0.85; }
.dv-code .str { color: #b9d3a3; opacity: 0.85; }
.dv-code .num { color: #d3a877; opacity: 0.85; }
.dv-code .com { color: var(--ink-faint); font-style: italic; opacity: 0.6; }
.dv-code .key { color: #c8b88a; }

/* Pull quote / aside */
.dv-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-2);
  border-left: 1px solid rgba(230,200,138,0.36);
  padding: 4px 0 4px 18px;
  margin: 24px 0;
  letter-spacing: -0.002em;
  opacity: 0.82;
  max-width: 44ch;
}
.dv-quote cite {
  display: block;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 10px;
  font-style: normal;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  opacity: 0.7;
  font-weight: 400;
}

/* Small inline SVG diagram frame */
.dv-figure {
  margin: 28px 0;
  padding: 22px 18px;
  border: 1px solid rgba(230,200,138,0.08);
  border-radius: 4px;
  background: rgba(230,200,138,0.015);
  position: relative;
}
.dv-figure__caption {
  font-family: var(--serif);
  font-style: italic;
  font-size: 12.5px;
  color: var(--ink-muted);
  margin: 14px 0 0;
  text-align: center;
  opacity: 0.75;
  letter-spacing: -0.002em;
}
.dv-figure__label {
  position: absolute;
  top: 10px;
  right: 12px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  opacity: 0.55;
}
.dv-figure svg {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

/* Two-column micro-stats inside copy */
.dv-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 28px;
  margin: 24px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.dv-stat__n {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1;
}
.dv-stat__l {
  display: block;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  opacity: 0.78;
}
.dv-stat__d {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink-2);
  opacity: 0.62;
  line-height: 1.4;
}

/* Marginalia (sidenote in gutter) */
.dv-margin {
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
  color: var(--ink-faint);
  line-height: 1.5;
  opacity: 0.7;
  margin: 16px 0;
  padding-left: 14px;
  border-left: 1px dotted rgba(230,200,138,0.2);
  letter-spacing: -0.002em;
}
.dv-margin__n {
  font-family: var(--mono);
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--davinci);
  opacity: 0.7;
  display: block;
  margin-bottom: 4px;
}

/* Stage figure (3D WebGL render) — bleeds into page background like home */
.dv-figure--stage {
  padding: 0;
  background: transparent;
  border: none;
  overflow: visible;
  position: relative;
}
.dv-figure--stage .dv-figure__label {
  z-index: 4;
  background: transparent;
  padding: 0;
  border-radius: 0;
  top: 6px;
  right: 6px;
  opacity: 0.42;
}
.dv-figure--stage .dv-stage-frame {
  height: clamp(400px, 44vw, 540px);
  background: transparent;
}
.dv-figure--stage .dv-figure__caption {
  padding: 14px 0 0;
  border-top: none;
  margin: 0;
  text-align: center;
  font-size: 11.5px;
  opacity: 0.55;
}

/* ════════════════════════════════════════════════════════════════════
   ORBIT & DAVINCI PANELS — positioning context for z-stacking.
   The canvas (astra-canvas) renders the orbit/davinci visuals;
   CSS just ensures inner text reads above the fixed canvas.
   ════════════════════════════════════════════════════════════════════ */
.scroll-panel--orbit  { position: relative; }
.scroll-panel--davinci { position: relative; }

/* ════════════════════════════════════════════════════════════════════
   ORBIT HERO · restraint (v9)
   Strip everything. Pro design = restraint, not stacked effects.
   Pure typography, single thin rule, plain matte black.
   No chrome metallic, no spotlight, no halo plate, no grain, no
   stacked curves — those read as amateur "luxury template".
   ════════════════════════════════════════════════════════════════════ */

.is-orbit .op-hero,
.is-orbit .op-hero--centered {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  padding: clamp(100px, 14vh, 160px) clamp(28px, 3.5vw, 56px) clamp(80px, 10vh, 140px) clamp(48px, 6vw, 100px);
  background: #000;
  overflow: hidden;
  z-index: 1;
}
/* Right-aligned column — tight 3-element column (eyebrow / headline / actions) */
.is-orbit .op-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  max-width: 320px;
  width: min(100%, 320px);
  margin-left: auto;
  margin-right: 0;
  transform: none;
  gap: 0;
}

/* Background — flat matte black with one extremely subtle vignette */
.is-orbit .op-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 56% at 50% 50%, rgba(255, 255, 255, 0.022), transparent 78%),
    #000;
}
.is-orbit .op-hero__bg::before,
.is-orbit .op-hero__bg::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
  width: 0 !important;
  height: 0 !important;
  animation: none !important;
}

/* Hide any optional decorative layers; the HTML may keep the divs,
   but pro restraint keeps them invisible. */
.is-orbit .op-hero__spotlight,
.is-orbit .op-hero__halo,
.is-orbit .op-hero__grain {
  display: none !important;
}

/* Silver orbital symbol — Enterprise Milky Way canvas behind the headline */
.is-orbit .op-hero__symbol {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  display: block;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 0%, #000 56%, rgba(0, 0, 0, 0.55) 78%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 0%, #000 56%, rgba(0, 0, 0, 0.55) 78%, transparent 100%);
  animation: heroSymbolEnter 2000ms cubic-bezier(0.16, 0.82, 0.18, 1) 0ms both;
}

/* Enterprise milky-way canvas — fills the hero behind the text */
.is-orbit .op-hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.is-orbit .op-hero__symbol-svg {
  width: min(96vw, 1320px);
  height: auto;
  aspect-ratio: 1400 / 720;
  display: block;
  overflow: visible;
  /* Soft perspective — the orbital plane recedes a touch into the distance.
     No spinning of the ring itself; rotation would expose the ellipse and
     read as amateur. */
  transform: rotateX(12deg);
  transform-origin: center 58%;
}

/* System holds tilt; sub-plane is where the rings + satellite live */
.is-orbit .op-hero__symbol-system,
.is-orbit .op-hero__symbol-plane {
  transform-origin: 700px 360px;
  transform-box: view-box;
}

/* Galaxy is mostly static — the orbital motion is carried by the light
   streak on the rings, not by spinning the whole field. */
.is-orbit .op-hero__symbol-galaxy {
  transform-origin: 700px 360px;
  transform-box: view-box;
  /* no spin */
}

/* Nebula breathes very gently */
.is-orbit .op-hero__symbol-nebula {
  transform-origin: 700px 360px;
  transform-box: view-box;
  animation: nebulaBreath 11s ease-in-out infinite;
}

/* Ring light flow — bright streak travels along each orbit perimeter.
   pathLength=1000 + stroke-dasharray makes a short visible segment that
   moves via stroke-dashoffset. THIS is the "빛 움직임 효과". */
.is-orbit .op-hero__symbol-ring-flow {
  filter:
    drop-shadow(0 0 4px rgba(244, 250, 255, 0.95))
    drop-shadow(0 0 14px rgba(196, 215, 240, 0.6))
    drop-shadow(0 0 32px rgba(168, 196, 232, 0.3));
}
.is-orbit .op-hero__symbol-ring-flow--outer {
  stroke-dasharray: 80 920;
  stroke-dashoffset: 0;
  animation: orbitLightFlow 8s linear infinite;
}
.is-orbit .op-hero__symbol-ring-flow--inner {
  stroke-dasharray: 60 940;
  stroke-dashoffset: 0;
  animation: orbitLightFlow 11s linear infinite -2.5s;
}

/* Each star twinkles individually (delays injected inline from JS) */
@keyframes orbitStarTwinkle {
  0%, 100% { opacity: 0.18; transform: scale(0.7); }
  50%      { opacity: 1;    transform: scale(1.25); }
}

@keyframes nebulaBreath {
  0%, 100% { opacity: 0.82; }
  50%      { opacity: 1; }
}

/* Light streak travels along the normalized 1000-unit ring */
@keyframes orbitLightFlow {
  0%   { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -1000; }
}

/* Single dot drifts visibly along the outer orbit (22s procession) */
.is-orbit .op-hero__symbol-satellite-orbit {
  transform-origin: 700px 360px;
  transform-box: view-box;
  animation: satelliteDrift 22s linear infinite;
}

/* Dot — bright, clearly pulses brightness */
.is-orbit .op-hero__symbol-satellite {
  transform-origin: 1300px 360px;
  transform-box: view-box;
  filter:
    drop-shadow(0 0 5px rgba(255, 255, 255, 1))
    drop-shadow(0 0 14px rgba(220, 232, 248, 0.85))
    drop-shadow(0 0 30px rgba(180, 204, 232, 0.5));
  animation: satellitePulse 2.6s ease-in-out infinite;
}

@keyframes heroSymbolEnter {
  0%   { opacity: 0.5; }
  100% { opacity: 1; }
}
@keyframes satelliteDrift {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes satellitePulse {
  0%, 100% { opacity: 0.4; transform: scale(0.7); }
  50%      { opacity: 1; transform: scale(1.5); }
}

/* Honor reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .is-orbit .op-hero__symbol-galaxy,
  .is-orbit .op-hero__symbol-nebula,
  .is-orbit .op-hero__symbol-satellite-orbit,
  .is-orbit .op-hero__symbol-satellite,
  .is-orbit .op-hero__symbol-stardust circle,
  .is-orbit .op-hero__symbol-ring-flow,
  .is-orbit .op-hero__symbol-ring-flow--outer,
  .is-orbit .op-hero__symbol-ring-flow--inner {
    animation: none !important;
  }
  .is-orbit .op-hero__symbol-ring-flow {
    stroke-dasharray: none !important;
  }
}

/* Centered content block — sits ABOVE the silver orbital symbol */
.is-orbit .op-hero__content {
  position: relative;
  z-index: 3;
  max-width: 780px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.is-orbit .op-hero__inner::before {
  content: none;
}

/* Eyebrow — refined two-voice line: italic Latin + sans Korean */
.is-orbit .op-hero .op-eyebrow,
.is-orbit .op-hero .op-eyebrow--serif {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  position: relative;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 360;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.04em;   /* italic Latin reads more luxurious with positive tracking */
  text-transform: none;
  color: rgba(196, 215, 240, 0.48);
  margin: 0 0 18px;
  padding-left: 0;
  animation: heroEnter 1400ms cubic-bezier(0.16, 0.82, 0.18, 1) 120ms both;
}
.is-orbit .op-hero .op-eyebrow [lang="en"] {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 360;
  letter-spacing: 0.04em;
  text-transform: none;
  color: rgba(206, 222, 244, 0.52);
}
.is-orbit .op-hero .op-eyebrow::before,
.is-orbit .op-hero .op-eyebrow::after {
  content: none;
}

/* Headline — pure Korean, uniform weight, no Latin italic break in the middle.
   This is the structural change in v92: no more per-line weight variation,
   no more <span class="hl__accent"> inside Korean text. */
.is-orbit .op-hero__h {
  position: relative;
  z-index: 3;
  font-family: inherit;
  font-size: clamp(28px, 2.6vw, 36px);
  font-weight: 400;
  line-height: 1.36;
  letter-spacing: -0.028em;
  margin: 0 0 28px;
  max-width: 14ch;
  text-align: right;
  color: rgba(238, 244, 252, 0.94);
  text-wrap: balance;
  font-feature-settings: 'kern' 1, 'liga' 1, 'ss01' 1;
  background: none;
  -webkit-text-fill-color: initial;
  filter: none;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.42),
    0 14px 28px rgba(0, 0, 0, 0.52);
  animation: heroEnter 1400ms cubic-bezier(0.16, 0.82, 0.18, 1) 280ms both;
}
:lang(ko) .is-orbit .op-hero__h,
.is-orbit .op-hero__h:lang(ko) {
  font-weight: 400;
  letter-spacing: -0.028em;
}
/* Brand mark — quiet mono-style Latin line, replaces the italic eyebrow.
   "Astra · Orbit" — meta context, low contrast, uppercase tracking. */
.is-orbit .op-hero__brand {
  font-family: var(--mono, "JetBrains Mono", "SF Mono", ui-monospace, monospace);
  font-size: 11px;
  font-weight: 420;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(206, 220, 240, 0.46);
  margin: 0 0 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: none;
  -webkit-text-fill-color: initial;
  animation: heroEnter 1400ms cubic-bezier(0.16, 0.82, 0.18, 1) 140ms both;
}
.is-orbit .op-hero__brand-dot {
  font-size: 11px;
  color: rgba(206, 220, 240, 0.32);
  letter-spacing: 0;
}
/* Astra eyebrow — cohesive silver (same family as headline accent), no blue tilt */
body.is-orbit-main .op-hero .op-eyebrow,
body.is-orbit-main .op-hero .op-eyebrow--serif {
  background: linear-gradient(180deg,
    rgba(228, 236, 248, 0.62) 0%,
    rgba(208, 218, 234, 0.52) 60%,
    rgba(188, 200, 218, 0.46) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
/* English sub-line is hidden in this layout (eyebrow carries the Latin voice now) */
.is-orbit .op-hero__h-accent {
  display: none;
}

/* Sub — restrained but readable */
.is-orbit .op-hero__sub {
  font-size: 13.5px;
  line-height: 1.76;
  color: rgba(196, 210, 228, 0.62);
  max-width: 36ch;
  margin: 0 0 40px;
  letter-spacing: 0.002em;
  text-align: right;
  font-weight: 400;
  animation: heroEnter 1400ms cubic-bezier(0.16, 0.82, 0.18, 1) 620ms both;
}

/* Actions — text links only, right-aligned */
.is-orbit .op-hero__actions,
.is-orbit .op-hero__ctas {
  display: flex;
  gap: 28px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 8px;
  animation: heroEnter 1300ms cubic-bezier(0.16, 0.82, 0.18, 1) 820ms both;
}
/* Hero CTA — quiet arrow indicator instead of underlined button.
   13px italic-adjacent label + hairline arrow that nudges on hover. */
.is-orbit .op-hero__cta-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 380;
  letter-spacing: 0.02em;
  color: rgba(228, 236, 248, 0.78);
  text-decoration: none;
  transition: color 220ms ease, gap 220ms ease;
  box-shadow: none;
}
.is-orbit .op-hero__cta-link span {
  position: relative;
}
.is-orbit .op-hero__cta-link span::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(228, 236, 248, 0) 0%,
    rgba(228, 236, 248, 0.35) 30%,
    rgba(228, 236, 248, 0.55) 100%);
  transform-origin: right;
  transform: scaleX(0.55);
  transition: transform 320ms ease, opacity 320ms ease;
  opacity: 0.85;
}
.is-orbit .op-hero__cta-link svg {
  width: 14px;
  height: 14px;
  color: rgba(228, 236, 248, 0.66);
  transition: transform 220ms ease, color 220ms ease;
}
.is-orbit .op-hero__cta-link:hover,
.is-orbit .op-hero__cta-link:focus-visible {
  color: rgba(244, 248, 255, 0.95);
  gap: 14px;
}
.is-orbit .op-hero__cta-link:hover span::after,
.is-orbit .op-hero__cta-link:focus-visible span::after {
  transform: scaleX(1);
}
.is-orbit .op-hero__cta-link:hover svg,
.is-orbit .op-hero__cta-link:focus-visible svg {
  color: rgba(244, 248, 255, 0.95);
  transform: translateX(3px);
}

body.is-orbit-main .op-hero__canvas {
  opacity: 0.72;
  filter: saturate(0) contrast(1.18) brightness(1.18);
  transform: translateY(-12%);
}

body.is-orbit-main .op-hero__content {
  max-width: 340px;
  width: min(100%, 340px);
  margin-left: auto;
  margin-right: clamp(0px, 14vw, 360px);   /* pulls text inward on wide viewports */
  align-items: flex-end;
  text-align: right;
  transform: translateY(6vh);   /* gently push down so text sits at orbit's vertical center */
  gap: 0;
}
body.is-orbit-main .op-hero .op-eyebrow,
body.is-orbit-main .op-hero .op-eyebrow--serif {
  margin: 0 0 12px;
}

body.is-orbit-main .op-hero .op-eyebrow,
body.is-orbit-main .op-hero .op-eyebrow--serif,
body.is-orbit-main .op-hero__h,
body.is-orbit-main .op-hero__sub {
  margin-left: auto;
  margin-right: 0;
  text-align: right;
}

body.is-orbit-main .op-hero__actions,
body.is-orbit-main .op-hero__ctas {
  justify-content: flex-end;
}

/* Cascade entry — translateY rise + soft fade (starts at 0.45 so paused
   environments like background tabs still show content) */
@keyframes heroEnter {
  0%   { opacity: 0.45; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .is-orbit .op-hero .op-eyebrow,
  .is-orbit .op-hero__h-line,
  .is-orbit .op-hero__h-accent,
  .is-orbit .op-hero__sub,
  .is-orbit .op-hero__actions,
  .is-orbit .op-hero__ctas,
  .is-orbit .op-hero__symbol {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* Divider — one extremely thin silver rule. No swoop, no spark. */
.is-orbit .op-hero__divider {
  position: relative;
  width: 100%;
  max-width: 360px;
  margin: clamp(36px, 6vh, 64px) auto 0;
  aspect-ratio: 1200 / 120;
  pointer-events: none;
  animation: heroEnter 1400ms cubic-bezier(0.16, 0.82, 0.18, 1) 1020ms both;
}
.is-orbit .op-hero__divider-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

@media (max-width: 980px) {
  .is-orbit .op-hero,
  .is-orbit .op-hero--centered {
    padding-top: clamp(120px, 16vh, 170px);
  }
  body.is-orbit-main .op-hero,
  body.is-orbit-main .op-hero--centered {
    padding-right: clamp(28px, 7vw, 80px);
    padding-left: clamp(28px, 7vw, 80px);
  }
  body.is-orbit-main .op-hero__canvas {
    opacity: 0.18;
    transform: translateY(-22%);
  }
  body.is-orbit-main .op-hero__content {
    max-width: 460px;
    width: min(100%, 460px);
    align-items: flex-end;
    text-align: right;
    transform: translateY(3vh);
  }
  body.is-orbit-main .op-hero .op-eyebrow,
  body.is-orbit-main .op-hero .op-eyebrow--serif,
  body.is-orbit-main .op-hero__h,
  body.is-orbit-main .op-hero__sub {
    margin-left: auto;
    margin-right: 0;
    text-align: right;
  }
  body.is-orbit-main .op-hero__actions,
  body.is-orbit-main .op-hero__ctas {
    justify-content: flex-end;
  }
  .is-orbit .op-hero__h {
    font-size: clamp(28px, 5.4vw, 42px);
    max-width: 22ch;
  }
  .is-orbit .op-hero__sub {
    max-width: 40ch;
  }
}

@media (max-width: 720px) {
  body.is-orbit-main .op-hero__canvas {
    opacity: 0.08;
    transform: translateY(-34%);
  }
  body.is-orbit-main .op-hero__content {
    align-items: flex-end;
    text-align: right;
    transform: translateY(0);
  }
  body.is-orbit-main .op-hero .op-eyebrow,
  body.is-orbit-main .op-hero .op-eyebrow--serif,
  body.is-orbit-main .op-hero__h,
  body.is-orbit-main .op-hero__sub {
    margin-left: auto;
    margin-right: 0;
    text-align: right;
  }
  .is-orbit .op-hero .op-eyebrow {
    font-size: 12px;
    margin-bottom: 24px;
  }
  .is-orbit .op-hero__h {
    font-size: clamp(26px, 7.4vw, 34px);
    line-height: 1.18;
    max-width: none;
  }
  .is-orbit .op-hero__h-accent {
    margin-top: 10px;
  }
  .is-orbit .op-hero__sub {
    font-size: 13.5px;
    line-height: 1.7;
  }
  .is-orbit .op-hero__actions,
  .is-orbit .op-hero__ctas {
    flex-direction: column;
    gap: 12px;
    align-items: flex-end;
  }
  body.is-orbit-main .op-hero__actions,
  body.is-orbit-main .op-hero__ctas {
    justify-content: flex-end;
  }
}

/* =========================================================
   ARCHITECTURE · 데이터 중심 구조체 — 데이터 코어(별자리) → 세 궤도
   각 노드에 실제 제품 비주얼(canvas). 프레임 없이 atmospheric.
   ========================================================= */
.dstruct { max-width: var(--max); margin: 0 auto; }

/* ── DATA core ── */
.dstruct__core {
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  border-top: 1px solid var(--line);
  padding-top: clamp(44px, 5vw, 76px);
}
.dstruct__core-head { margin: 0 0 clamp(26px, 3vw, 40px); }
.dstruct__core-viz {               /* atmospheric — no frame */
  position: relative; aspect-ratio: 2.35 / 1; width: min(100%, 800px);
}
.dstruct__core-viz canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dstruct__k {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--ink-muted); margin: 0 0 14px;
}
.dstruct__core-h {
  font-size: clamp(30px, 3.6vw, 46px); font-weight: 600;
  letter-spacing: -0.042em; line-height: 1; margin: 0 0 14px; color: var(--ink);
  text-shadow: 0 0 50px rgba(0,0,0,0.9);
}
.dstruct__prims { font-size: clamp(13px,1vw,15px); color: var(--ink-dim); letter-spacing: 0.1em; margin: 0; }
.dstruct__prims i { color: var(--ink-faint); font-style: normal; margin: 0 6px; }
.dstruct__def {
  font-size: 14.5px; color: var(--ink-muted); line-height: 1.75;
  margin: clamp(24px, 2.8vw, 34px) auto 0; max-width: 52ch;
}

/* ── core → 세 궤도 : atmospheric spacing only (no infographic connectors) ── */
.dstruct__bus { height: clamp(54px, 6vw, 86px); }

/* ── 세 궤도 (각 제품 비주얼) — atmospheric, frameless ── */
.dstruct__orbits {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(30px, 3.6vw, 64px);
}
.dstruct__orbit { position: relative; }
.dstruct__orbit-viz {                /* atmospheric — no frame */
  position: relative; aspect-ratio: 4 / 3; width: 100%; margin: 0 0 22px;
}
.dstruct__orbit-viz canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dstruct__orbit-h { font-size: clamp(22px,2.3vw,28px); font-weight: 600; letter-spacing: -0.03em; margin: 0 0 9px; color: var(--ink); }
.dstruct__orbit-tag {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.09em;
  color: var(--ink-muted); margin: 0 0 16px;
}
.dstruct__orbit-p { font-size: 14.5px; color: var(--ink-dim); line-height: 1.68; margin: 0; max-width: 38ch; }

@media (max-width: 860px) {
  .dstruct__core { grid-template-columns: 1fr; gap: clamp(28px,6vw,40px); }
  .dstruct__orbits { grid-template-columns: 1fr; gap: clamp(40px,9vw,56px); }
  .dstruct__bus { display: none; }
  .dstruct__orbit::before { display: none; }
  .dstruct__orbit-viz { aspect-ratio: 16 / 10; }
}

/* =========================================================
   FIELD · 데이터가 궤도가 되는 장 (흩어진 -> 정렬)
   ========================================================= */
.field-sec__wrap { position: relative; }
.field-stage {                       /* tall wide band — the convergence needs vertical room */
  position: relative; width: 100%; aspect-ratio: 1.62 / 1; min-height: 740px;
  background: radial-gradient(150% 170% at 70% 44%, rgba(20,26,40,0.34), transparent 76%);
  border-top: 1px solid var(--line); overflow: hidden;
}
.field-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.field-stage::after {                /* left scrim — keeps the text column its own calm zone */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,0.86) 0%, rgba(0,0,0,0.5) 26%, rgba(0,0,0,0.1) 46%, transparent 60%);
}
.field-stage__tag {
  position: absolute; bottom: clamp(14px, 2vw, 26px); right: clamp(16px, 2.5vw, 36px);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; z-index: 2; pointer-events: none; white-space: nowrap;
  color: var(--ink-dim); text-shadow: 0 0 24px rgba(0,0,0,0.9);
}
/* text overlaid ON the stage */
.field-sec__meta {
  position: absolute; left: clamp(12px, 4vw, 76px); top: 50%; transform: translateY(-50%);
  max-width: 360px; z-index: 3;
}
.field-sec__meta .display { text-shadow: 0 0 40px rgba(0,0,0,0.95), 0 2px 24px rgba(0,0,0,0.85); }
.field-sec__meta .prose { text-shadow: 0 0 26px rgba(0,0,0,0.95); color: rgba(214,222,236,0.92); }
.field-sec__cta { margin-top: clamp(26px, 3.2vw, 38px); }
@media (max-width: 860px) {
  .field-stage { aspect-ratio: 3 / 2; min-height: 440px; }
  .field-stage::after { background: linear-gradient(180deg, transparent 38%, rgba(0,0,0,0.72)); }
  .field-sec__meta { position: relative; top: auto; left: 0; transform: none; margin-top: clamp(24px,6vw,40px); max-width: 100%; }
}