:root {
  --brand-charcoal: #4d4e54;
  --brand-charcoal-deep: #292a31;
  --brand-indigo: #5356a3;
  --brand-indigo-deep: #3d3f78;
  --brand-indigo-light: #777ac5;
  --ink: #292a31;
  --ink-soft: #606168;
  --paper: #fbfbfc;
  --paper-deep: #f2f3f6;
  --line: rgba(70, 71, 78, 0.14);
  --purple: var(--brand-indigo);
  --purple-deep: var(--brand-indigo-deep);
  --purple-light: #dedfe9;
  --purple-wash: #f1f1f5;
  --white: #ffffff;
  --dark: var(--brand-charcoal-deep);
  --dark-soft: #34353d;
  --lime: var(--brand-indigo-light);
  --container: 1400px;
  --header-height: 84px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 74px;
  background: var(--paper);
  overflow-x: hidden;
}

body {
  --chapter-tone: 83, 86, 163;
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Pretendard Variable", Pretendard, SUIT, -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Noto Sans KR", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.menu-open {
  overflow: hidden;
}

body[data-chapter="hero"] { --chapter-tone: 83, 86, 163; }
body[data-chapter="expertise"] { --chapter-tone: 97, 100, 176; }
body[data-chapter="intelligence"] { --chapter-tone: 126, 130, 213; }
body[data-chapter="process"] { --chapter-tone: 72, 76, 141; }
body[data-chapter="standard"] { --chapter-tone: 154, 157, 218; }
body[data-chapter="insight"] { --chapter-tone: 86, 90, 169; }
body[data-chapter="centers"] { --chapter-tone: 120, 124, 202; }
body[data-chapter="contact"] { --chapter-tone: 156, 159, 225; }

button,
input,
textarea {
  font: inherit;
}

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

button {
  color: inherit;
}

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

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

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  padding-bottom: 0.09em;
  overflow: visible;
  word-break: keep-all;
}

::selection {
  color: var(--white);
  background: var(--purple);
}

.container {
  position: relative;
  width: min(calc(100% - 96px), var(--container));
  margin-inline: auto;
}

.section {
  padding: 160px 0;
}

.skip-link {
  position: fixed;
  z-index: 9999;
  top: 12px;
  left: 12px;
  padding: 10px 16px;
  color: var(--white);
  background: var(--purple);
  transform: translateY(-150%);
  transition: transform 0.2s;
}

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

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

.scroll-atmosphere {
  --atmosphere-x: 0px;
  --atmosphere-y: 0px;
  --atmosphere-rotate: -8deg;
  --scroll-energy: 0;
  position: fixed;
  z-index: 4;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.scroll-atmosphere::before {
  position: absolute;
  inset: -18%;
  content: "";
  opacity: calc(0.08 + var(--scroll-energy) * 0.13);
  background-image:
    linear-gradient(rgba(83, 86, 163, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(83, 86, 163, 0.14) 1px, transparent 1px);
  background-position: 0 0;
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse at 50% 46%, black 0, transparent 68%);
  mix-blend-mode: soft-light;
  transform: perspective(850px) rotateX(62deg) translate3d(0, var(--grid-y, 0px), 0);
  transition: opacity 0.42s var(--ease-out), transform 0.48s var(--ease-out);
  will-change: transform, opacity;
}

.scroll-atmosphere::after {
  position: absolute;
  inset: -38%;
  content: "";
  opacity: calc(0.1 + var(--scroll-energy) * 0.16);
  background:
    radial-gradient(circle at 34% 28%, rgba(var(--chapter-tone), 0.22), transparent 24%),
    radial-gradient(circle at 72% 64%, rgba(var(--chapter-tone), 0.17), transparent 26%);
  filter: blur(34px);
  mix-blend-mode: multiply;
  transform: translate3d(var(--atmosphere-x), var(--atmosphere-y), 0) rotate(var(--atmosphere-rotate));
  transition: transform 0.85s var(--ease-out), opacity 0.45s ease;
  will-change: transform, opacity;
}

.scroll-chapter-wipe {
  position: absolute;
  z-index: 5;
  inset: -12% 0;
  display: block;
  opacity: 0;
  background: linear-gradient(104deg, transparent 18%, rgba(var(--chapter-tone), .04) 39%, rgba(var(--chapter-tone), .23) 50%, rgba(255,255,255,.34) 52%, transparent 67%);
  transform: translate3d(-76%, 0, 0) skewX(-10deg);
  will-change: transform, opacity;
}

.scroll-atmosphere.is-chapter-shifting .scroll-chapter-wipe {
  animation: chapter-wipe 1.05s cubic-bezier(.2,.72,.18,1) both;
}

@keyframes chapter-wipe {
  0% { opacity: 0; transform: translate3d(-76%, 0, 0) skewX(-10deg); }
  24% { opacity: .82; }
  72% { opacity: .24; }
  100% { opacity: 0; transform: translate3d(76%, 0, 0) skewX(-10deg); }
}

.chapter-indicator {
  position: fixed;
  z-index: 920;
  right: 30px;
  bottom: 28px;
  display: flex;
  align-items: center;
  gap: 11px;
  color: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
  transition: opacity .35s ease;
}

.chapter-indicator b,
.chapter-indicator span {
  font-family: Arial, sans-serif;
  font-size: 9px;
  line-height: 1;
  letter-spacing: .15em;
}

.chapter-indicator b { font-size: 11px; }
.chapter-indicator i { width: 36px; height: 1px; background: currentColor; opacity: .45; }
.chapter-indicator.is-changing span { animation: chapter-label-in .5s var(--ease-out); }

@keyframes chapter-label-in {
  from { opacity: 0; transform: translateX(10px); }
}

.scroll-aura,
.scroll-beam {
  position: absolute;
  display: block;
  will-change: transform, opacity;
}

.scroll-aura {
  width: 38vw;
  height: 38vw;
  min-width: 420px;
  min-height: 420px;
  border: 1px solid rgba(119, 122, 197, 0.15);
  border-radius: 50%;
  opacity: calc(0.07 + var(--scroll-energy) * 0.2);
  box-shadow: inset 0 0 0 70px rgba(83, 86, 163, 0.018),
    0 0 0 70px rgba(83, 86, 163, 0.012);
  transition: transform 0.95s var(--ease-out), opacity 0.45s ease;
}

.scroll-aura-one {
  top: -22vw;
  right: -10vw;
  transform: translate3d(var(--aura-one-x, 0px), var(--aura-one-y, 0px), 0)
    scale(var(--aura-one-scale, 0.96));
}

.scroll-aura-two {
  bottom: -27vw;
  left: -12vw;
  transform: translate3d(var(--aura-two-x, 0px), var(--aura-two-y, 0px), 0)
    scale(var(--aura-two-scale, 1.02));
}

.scroll-beam {
  top: -50vh;
  width: 15vw;
  min-width: 160px;
  height: 210vh;
  opacity: calc(0.02 + var(--scroll-energy) * 0.14);
  background: linear-gradient(90deg, transparent, rgba(119, 122, 197, 0.5), transparent);
  filter: blur(22px);
  mix-blend-mode: multiply;
  transition: transform 0.72s var(--ease-out), opacity 0.32s ease;
}

.scroll-beam-one {
  left: 14%;
  transform: translate3d(var(--beam-one-x, -18vw), var(--beam-one-y, 0), 0) rotate(18deg);
}

.scroll-beam-two {
  right: 11%;
  background: linear-gradient(90deg, transparent, rgba(119, 122, 197, 0.34), transparent);
  mix-blend-mode: screen;
  transform: translate3d(var(--beam-two-x, 16vw), var(--beam-two-y, 0), 0) rotate(-22deg);
}

.cursor-orbit {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(83, 86, 163, 0.45);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-100px, -100px, 0);
  transition: width 0.3s var(--ease), height 0.3s var(--ease), opacity 0.3s,
    background-color 0.3s;
}

.cursor-orbit::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  content: "";
  background: var(--purple);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.cursor-orbit.visible {
  opacity: 1;
}

.cursor-orbit.hovering {
  width: 52px;
  height: 52px;
  background: rgba(83, 86, 163, 0.08);
}

.scroll-progress {
  position: fixed;
  z-index: 1200;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  overflow: hidden;
  pointer-events: none;
}

.scroll-progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #777ac5, #b4b6dc 62%, #5356a3);
  box-shadow: 0 0 14px rgba(119, 122, 197, 0.75);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

/* Header */
.site-header {
  position: fixed;
  z-index: 1500;
  top: 0;
  right: 0;
  left: 0;
  height: var(--header-height);
  border-bottom: 1px solid transparent;
  transform: translateY(0);
  transition: height 0.35s var(--ease), background-color 0.35s, border-color 0.35s,
    box-shadow 0.35s;
}

.site-header.scroll-down,
.site-header.scroll-up,
body.menu-open .site-header {
  transform: translateY(0);
}

.site-header.scrolled {
  height: 72px;
  border-color: rgba(43, 44, 50, 0.07);
  background: rgba(251, 251, 252, 0.82);
  box-shadow: 0 14px 40px rgba(43, 44, 50, 0.035);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.brand {
  display: inline-flex;
  width: 150px;
  height: 54px;
  align-items: center;
  overflow: hidden;
}

.brand img {
  width: 150px;
  max-width: none;
  height: auto;
  transform: translateY(-7px);
}

.desktop-nav {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.35vw, 38px);
  transform: translate(-50%, -50%);
}

.desktop-nav a {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 1px;
  color: #44454d;
  font-weight: 650;
  letter-spacing: 0.035em;
  line-height: 1.25;
  white-space: nowrap;
}

.desktop-nav a span { font-size: 12.5px; }
.desktop-nav a small { color: rgba(68,69,77,.54); font-size: 9.5px; font-weight: 560; letter-spacing: -.01em; }

.desktop-nav a::after {
  position: absolute;
  right: 0;
  bottom: -7px;
  left: 0;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, rgba(83, 86, 163, .18), var(--purple) 45%, rgba(126, 130, 213, .28));
  box-shadow: 0 2px 9px rgba(83, 86, 163, .45);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease);
}

.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after,
.desktop-nav a.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.desktop-nav a.is-active {
  color: #292a31;
}

.desktop-nav a.is-active span {
  text-shadow: 0 0 16px rgba(83, 86, 163, .18);
}

.nav-contact {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  padding: 0 19px 0 22px;
  color: var(--white);
  background: var(--ink);
  border: 0;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

.nav-contact svg {
  width: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.menu-button,
.mobile-menu {
  display: none;
}

/* Hero */
.hero {
  position: relative;
  display: flex;
  min-height: max(840px, 100svh);
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}

.hero::before {
  position: absolute;
  z-index: -2;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg, rgba(251, 251, 252, 1) 0%, rgba(251, 251, 252, 0.98) 31%, rgba(251, 251, 252, 0.46) 52%, rgba(251, 251, 252, 0) 68%),
    radial-gradient(circle at 78% 40%, rgba(119, 122, 197, 0.2), transparent 36%);
}

.hero-ambient {
  position: absolute;
  z-index: -2;
  width: 540px;
  height: 540px;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.35;
}

.hero-ambient-one {
  top: -180px;
  right: -100px;
  background: rgba(83, 86, 163, 0.32);
  animation: hero-ambient-drift-one 13s ease-in-out infinite alternate;
}

.hero-ambient-two {
  bottom: -300px;
  left: 18%;
  background: rgba(119, 122, 197, 0.3);
  animation: hero-ambient-drift-two 16s ease-in-out infinite alternate;
}

@keyframes hero-ambient-drift-one {
  to { transform: translate3d(-8vw, 6vh, 0) scale(1.14); }
}

@keyframes hero-ambient-drift-two {
  to { transform: translate3d(10vw, -5vh, 0) scale(0.9); }
}

.hero-content {
  z-index: 5;
  display: flex;
  min-height: max(840px, 100svh);
  align-items: center;
  pointer-events: none;
}

.hero-copy {
  width: min(620px, 47vw);
  padding-top: 40px;
  pointer-events: auto;
}

.eyebrow,
.section-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  color: var(--purple);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.17em;
  line-height: 1.3;
}

.eyebrow > span {
  position: relative;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(83, 86, 163, 0.32);
  border-radius: 50%;
}

.eyebrow > span::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  content: "";
  background: var(--purple);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 5px rgba(83, 86, 163, 0.08);
}

.hero h1 {
  margin-bottom: 28px;
  font-size: clamp(52px, 5.05vw, 78px);
  font-weight: 730;
  line-height: 1.16;
  letter-spacing: -0.057em;
}

.hero h1 em,
.section-heading h2 em,
.intelligence h2 em,
.difference h2 em,
.insight h2 em,
.centers h2 em,
.contact h2 em {
  position: relative;
  color: var(--purple);
  font-style: normal;
}

.hero h1 em::after {
  position: absolute;
  right: 0;
  bottom: 3px;
  left: 0;
  height: 8px;
  content: "";
  background: linear-gradient(90deg, rgba(83, 86, 163, 0.22), rgba(83, 86, 163, 0.03));
  clip-path: polygon(0 48%, 100% 0, 98% 100%, 1% 82%);
}

.hero-description {
  max-width: 520px;
  margin-bottom: 40px;
  color: var(--ink-soft);
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.78;
  letter-spacing: -0.02em;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 30px;
}

.primary-button,
.contact-button {
  position: relative;
  display: inline-flex;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 0 26px 0 30px;
  overflow: hidden;
  color: var(--white);
  background: var(--purple);
  border: 0;
  border-radius: 2px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  isolation: isolate;
}

.primary-button::before,
.contact-button::before {
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: -15%;
  width: 0;
  content: "";
  background: var(--purple-deep);
  transform: skewX(-18deg);
  transition: width 0.55s var(--ease-out);
}

.primary-button:hover::before,
.primary-button:focus-visible::before,
.contact-button:hover::before,
.contact-button:focus-visible::before {
  width: 130%;
}

.primary-button svg,
.contact-button svg {
  width: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.text-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  font-size: 13px;
  font-weight: 730;
}

.text-button i {
  position: relative;
  width: 30px;
  height: 1px;
  overflow: visible;
  background: currentColor;
  transition: width 0.35s var(--ease);
}

.text-button i::after {
  position: absolute;
  top: -3px;
  right: 0;
  width: 7px;
  height: 7px;
  content: "";
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

.text-button:hover i {
  width: 42px;
}

.hero-visual {
  position: absolute;
  z-index: 1;
  top: 51%;
  left: max(350px, 29vw);
  width: min(1280px, 84vw);
  perspective: 1500px;
  transform: translateY(calc(-50% - var(--scroll-lift, 0px)));
  transform-style: preserve-3d;
}

.hero-image-wrap {
  position: relative;
  aspect-ratio: 3 / 2;
  isolation: isolate;
  transform-origin: 60% 52%;
  transform: translateZ(0);
}

.hero-slide-stack {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
}

.hero-slide-stack::after {
  position: absolute;
  z-index: 4;
  inset: 0;
  content: "";
  background: linear-gradient(105deg, transparent 28%, rgba(196, 181, 253, .2) 47%, rgba(255,255,255,.14) 50%, transparent 70%);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-38%);
}

.hero-image-wrap.is-transitioning .hero-slide-stack::after {
  animation: hero-transition-sheen 1.55s cubic-bezier(.2,.7,.2,1) both;
}

.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: contrast(1.035) saturate(0.82) brightness(1.015);
  transform: scale(1.045) translate3d(8px, 4px, 0);
  transform-origin: 66% 58%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 11%, #000 96%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 11%, #000 96%, transparent 100%);
  will-change: opacity, transform, clip-path;
  transition: opacity 1.8s cubic-bezier(.4, 0, .2, 1), transform var(--hero-scene-duration, 6200ms) cubic-bezier(.18, .72, .2, 1), clip-path 1.65s cubic-bezier(.65, 0, .18, 1);
}

.hero-image.is-active {
  z-index: 2;
  opacity: 1;
  transform: scale(1.012) translate3d(0, 0, 0);
}

.hero-image.is-leaving {
  z-index: 3;
  opacity: 0;
  transform: scale(1.025) translate3d(-4px, -2px, 0);
}

.hero-image-wrap[data-transition="cinematic"] .hero-image.is-entering {
  animation: hero-scene-enter 1.65s cubic-bezier(.22,.72,.2,1) both;
}

.hero-image-wrap[data-transition="cinematic"] .hero-image.is-leaving {
  animation: hero-scene-exit 1.65s cubic-bezier(.4,0,.2,1) both;
}

@keyframes hero-scene-enter {
  0% { opacity: 0; filter: blur(7px) contrast(1.08) saturate(.72) brightness(1.12); transform: scale(1.065) translate3d(15px, 7px, 0); }
  42% { opacity: .58; filter: blur(2px) contrast(1.06) saturate(.82) brightness(1.07); }
  100% { opacity: 1; filter: blur(0) contrast(1.045) saturate(.86) brightness(1.02); transform: scale(1.012) translate3d(0, 0, 0); }
}

@keyframes hero-scene-exit {
  0% { opacity: 1; filter: blur(0) contrast(1.045) saturate(.86) brightness(1.02); transform: scale(1.012) translate3d(0, 0, 0); }
  55% { opacity: .48; filter: blur(2px) contrast(1.02) saturate(.76) brightness(.94); }
  100% { opacity: 0; filter: blur(6px) contrast(1) saturate(.68) brightness(.86); transform: scale(1.038) translate3d(-13px, -5px, 0); }
}

@keyframes hero-transition-sheen {
  0% { opacity: 0; transform: translateX(-42%); }
  25% { opacity: .72; }
  70% { opacity: .28; }
  100% { opacity: 0; transform: translateX(42%); }
}

.hero-image-wrap[data-transition="cinematic"] .hero-image.is-active {
  filter: contrast(1.045) saturate(.86) brightness(1.02);
}

.hero-image-wrap[data-transition="fade"] .hero-image {
  transform: scale(1.01);
}

.hero-image-wrap[data-transition="wipe"] .hero-image {
  opacity: 1;
  clip-path: inset(0 100% 0 0);
}

.hero-image-wrap[data-transition="wipe"] .hero-image.is-active {
  clip-path: inset(0 0 0 0);
}

.hero-image-wrap[data-transition="wipe"] .hero-image.is-leaving {
  clip-path: inset(0 0 0 100%);
}

.hero-image-wrap::before {
  position: absolute;
  z-index: -1;
  inset: 6% 2% 2% 19%;
  content: "";
  background:
    radial-gradient(circle at 64% 42%, rgba(83, 86, 163, 0.25), transparent 49%),
    radial-gradient(circle at 82% 74%, rgba(119, 122, 197, 0.18), transparent 38%);
  filter: blur(34px);
  animation: hero-core-pulse 7.4s ease-in-out infinite;
}

.hero-image-wrap::after {
  position: absolute;
  z-index: 5;
  top: 7%;
  bottom: 8%;
  left: -18%;
  width: 11%;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.76), rgba(119, 122, 197, 0.2), transparent);
  filter: blur(9px);
  opacity: 0;
  pointer-events: none;
  transform: skewX(-14deg);
  animation: hero-light-pass 9.2s ease-in-out infinite;
}

@keyframes plant-breathe {
  0% { transform: scale(1.012) translate3d(0, 0, 0); }
  50% { transform: scale(1.028) translate3d(-4px, -3px, 0); }
  100% { transform: scale(1.018) translate3d(3px, 2px, 0); }
}

@keyframes plant-breathe-alt {
  0% { transform: scale(1.015) translate3d(3px, 2px, 0); }
  52% { transform: scale(1.03) translate3d(-3px, -2px, 0); }
  100% { transform: scale(1.02) translate3d(2px, -2px, 0); }
}

.hero-color-grade {
  position: absolute;
  z-index: 1;
  inset: 4% 2% 4% 10%;
  pointer-events: none;
  background:
    radial-gradient(circle at 68% 42%, rgba(83, 86, 163, 0.38), transparent 31%),
    radial-gradient(circle at 79% 76%, rgba(119, 122, 197, 0.27), transparent 26%),
    linear-gradient(135deg, rgba(77, 78, 84, 0.13), transparent 45%, rgba(119, 122, 197, 0.24));
  mix-blend-mode: color;
  opacity: 0.14;
  animation: hero-color-shift 9s ease-in-out infinite alternate;
  mask-image: linear-gradient(90deg, transparent 1%, black 17%, black 95%, transparent);
}

@keyframes hero-color-shift {
  0% { opacity: 0.1; transform: translate3d(-1.5%, 0, 0) scale(0.98); }
  50% { opacity: 0.24; }
  100% { opacity: 0.16; transform: translate3d(1.5%, -1%, 0) scale(1.025); }
}

@keyframes hero-core-pulse {
  0%, 100% { opacity: 0.32; transform: scale(0.92); }
  50% { opacity: 0.86; transform: scale(1.08); }
}

@keyframes hero-light-pass {
  0%, 16% { left: -24%; opacity: 0; }
  24% { opacity: 0.9; }
  58% { left: 108%; opacity: 0; }
  100% { left: 108%; opacity: 0; }
}

.hero-scan {
  position: absolute;
  z-index: 3;
  top: 7%;
  bottom: 8%;
  left: 26%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(83, 86, 163, 0.76) 40%, rgba(255, 255, 255, 0.96) 50%, rgba(83, 86, 163, 0.56) 60%, transparent);
  box-shadow: 0 0 24px rgba(83, 86, 163, 0.38);
  animation: hero-scan 8.4s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}

.hero-grid {
  position: absolute;
  z-index: 1;
  right: 3%;
  bottom: 4%;
  width: 45%;
  height: 34%;
  opacity: 0.14;
  background-image: linear-gradient(rgba(83, 86, 163, 0.48) 1px, transparent 1px),
    linear-gradient(90deg, rgba(83, 86, 163, 0.48) 1px, transparent 1px);
  background-size: 18px 18px;
  mask-image: linear-gradient(135deg, transparent 4%, black 72%);
  animation: hero-grid-drift 14s linear infinite alternate;
}

@keyframes hero-grid-drift {
  to { background-position: 18px -18px; transform: translate3d(-8px, 5px, 0); }
}

.fluid-network {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  transition: opacity 1.35s ease-in-out;
}

.hero-image-wrap.scene-secondary .fluid-network {
  opacity: 0.56;
}

.fluid-pipe,
.fluid-stream {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.fluid-pipe {
  stroke: rgba(83, 86, 163, 0.13);
  stroke-width: 4.5;
}

.fluid-stream {
  stroke: url(#fluid-gradient);
  stroke-width: 2.7;
  stroke-linecap: round;
  stroke-dasharray: 2 18;
  filter: drop-shadow(0 0 5px rgba(83, 86, 163, 0.74));
  animation: fluid-flow 2.1s linear infinite;
  opacity: 0.36;
  transition: opacity 0.65s ease, stroke-width 0.65s var(--ease-out), filter 0.65s ease;
}

.hero-image-wrap[data-scene-state="0"] .stream-one,
.hero-image-wrap[data-scene-state="1"] .stream-three,
.hero-image-wrap[data-scene-state="2"] .stream-two {
  stroke-width: 3.4;
  opacity: 1;
  filter: drop-shadow(0 0 8px rgba(83, 86, 163, 0.92));
}

.stream-two {
  animation-duration: 2.65s;
  animation-direction: reverse;
}

.stream-three {
  animation-duration: 1.55s;
  animation-delay: -0.9s;
}

@keyframes fluid-flow {
  to { stroke-dashoffset: -200; }
}

.fluid-particle {
  fill: #f8f8ff;
  opacity: 0.92;
  filter: drop-shadow(0 0 7px #5356a3) drop-shadow(0 0 2px #ffffff);
}

.particle-two,
.particle-four,
.particle-six {
  fill: #777ac5;
  opacity: 0.76;
}

.hero-route-node circle {
  vector-effect: non-scaling-stroke;
}

.hero-route-node {
  opacity: 0.38;
  transition: opacity 0.55s ease, filter 0.55s ease;
}

.hero-image-wrap[data-scene-state="0"] .route-node-one,
.hero-image-wrap[data-scene-state="1"] .route-node-two,
.hero-image-wrap[data-scene-state="2"] .route-node-three {
  opacity: 1;
  filter: drop-shadow(0 0 8px rgba(83, 86, 163, 0.72));
}

.route-node-wave {
  fill: none;
  stroke: rgba(119, 122, 197, 0.45);
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
  animation: hero-route-wave 2.7s var(--ease-out) infinite;
}

.route-node-ring {
  fill: rgba(255, 255, 255, 0.72);
  stroke: rgba(83, 86, 163, 0.62);
  stroke-width: 1;
  filter: url(#hero-route-glow);
}

.route-node-core {
  fill: #5356a3;
  filter: url(#hero-route-glow);
}

.route-node-two .route-node-wave { animation-delay: -0.9s; }
.route-node-three .route-node-wave { animation-delay: -1.8s; }

@keyframes hero-route-wave {
  0% { opacity: 0.75; transform: scale(0.28); }
  100% { opacity: 0; transform: scale(1.26); }
}

@keyframes hero-scan {
  0%,
  100% {
    left: 26%;
    opacity: 0;
  }
  12%,
  82% {
    opacity: 0.7;
  }
  88% {
    left: 94%;
  }
}

.hero-system-rail {
  position: absolute;
  z-index: 4;
  top: 14%;
  right: 18%;
  display: grid;
  min-width: 205px;
  align-items: center;
  grid-template-columns: auto 36px auto;
  gap: 10px;
  color: rgba(77, 78, 84, 0.5);
  font-size: 6px;
  font-weight: 780;
  letter-spacing: 0.15em;
}

.hero-system-rail i {
  position: relative;
  height: 1px;
  overflow: hidden;
  background: rgba(83, 86, 163, 0.18);
}

.hero-system-rail i::after {
  position: absolute;
  inset: 0;
  content: "";
  background: #5356a3;
  animation: system-rail-flow 2.4s ease-in-out infinite;
  transform: translateX(-100%);
}

.hero-system-rail b {
  color: rgba(83, 86, 163, 0.72);
  font-weight: 800;
}

@keyframes system-rail-flow {
  48%, 100% { transform: translateX(100%); }
}

.signal-node {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px 7px 8px;
  color: var(--purple-deep);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(83, 86, 163, 0.58);
  border-radius: 100px;
  box-shadow: 0 10px 30px rgba(61, 63, 120, 0.22), 0 0 0 4px rgba(142, 229, 111, 0.12), 0 0 22px rgba(83, 86, 163, .18);
  font-size: 9px;
  font-family: inherit;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-align: left;
  backdrop-filter: blur(9px);
  cursor: pointer;
  animation: node-label-pulse 2.15s ease-in-out infinite;
  transition: color 0.35s ease, background-color 0.35s ease, border-color 0.35s ease,
    box-shadow 0.35s ease, transform .38s var(--ease-out), filter .35s ease;
}

.signal-node:is(:hover, :focus-visible, .is-preview-open) {
  z-index: 20;
  opacity: 1;
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(83, 86, 163, 0.58);
  box-shadow: 0 14px 42px rgba(61, 63, 120, 0.25), 0 0 22px rgba(119, 122, 197, 0.28);
  outline: none;
  animation-play-state: paused;
}

.signal-node small {
  position: relative;
  z-index: 3;
  color: rgba(77, 78, 84, 0.38);
  font-size: 5px;
  letter-spacing: 0.08em;
}

.signal-node::before {
  position: absolute;
  inset: -11px;
  content: "";
  border: 1px solid rgba(146, 235, 113, 0.68);
  border-radius: 100px;
  opacity: 0;
  box-shadow: 0 0 18px rgba(132, 222, 99, .22);
  animation: signal-shell-pulse 2.15s var(--ease-out) infinite;
  transform: scale(0.84);
}

.signal-node::after {
  position: absolute;
  inset: -5px;
  content: "";
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 100px;
  opacity: 0;
  pointer-events: none;
  animation: signal-blink 2.15s ease-in-out infinite;
}

.signal-node.is-active {
  color: #303268;
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(83, 86, 163, 0.52);
  box-shadow: 0 12px 38px rgba(61, 63, 120, 0.22), 0 0 22px rgba(119, 122, 197, 0.3);
  transform: translateY(-3px) scale(1.035);
  animation-duration: 1.35s;
}

.signal-node.is-active::before {
  animation: node-focus-ring 1.55s var(--ease-out) forwards;
}

@keyframes node-focus-ring {
  0% { opacity: 0; transform: scale(0.76); }
  34% { opacity: 0.88; }
  100% { opacity: 0; transform: scale(1.28); }
}

.signal-node i {
  position: relative;
  z-index: 4;
  width: 10px;
  height: 10px;
  background: #95e978;
  border: 2px solid white;
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(83, 86, 163, 0.2), 0 0 16px rgba(130, 226, 95, 0.95), 0 0 28px rgba(83, 86, 163, .55);
  isolation: isolate;
}

.signal-label {
  position: relative;
  z-index: 3;
}

.signal-radiance {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 28px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.signal-radiance::before {
  position: absolute;
  inset: -23px;
  content: "";
  background: radial-gradient(circle, rgba(169, 255, 137, .52) 0 7%, rgba(137, 237, 101, .18) 22%, rgba(119, 122, 197, .12) 42%, transparent 67%);
  border-radius: 50%;
  filter: blur(4px);
  opacity: .72;
  animation: signal-radiance-core 1.8s ease-in-out infinite;
}

.signal-radiance b {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 38px;
  height: 38px;
  border: 1.5px solid rgba(167, 255, 133, .94);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(153, 245, 118, .76), inset 0 0 9px rgba(153, 245, 118, .26);
  opacity: 0;
  animation: signal-light-wave 2.25s cubic-bezier(.16, .58, .25, 1) infinite;
  transform: translate(-50%, -50%) scale(.24);
}

.signal-radiance b:nth-child(2) { animation-delay: .72s; }
.signal-radiance b:nth-child(3) { animation-delay: 1.44s; }
.node-two .signal-radiance b { animation-delay: .18s; }
.node-two .signal-radiance b:nth-child(2) { animation-delay: .9s; }
.node-two .signal-radiance b:nth-child(3) { animation-delay: 1.62s; }
.node-three .signal-radiance b { animation-delay: .36s; }
.node-three .signal-radiance b:nth-child(2) { animation-delay: 1.08s; }
.node-three .signal-radiance b:nth-child(3) { animation-delay: 1.8s; }

.signal-node:is(:hover, :focus-visible, .is-preview-open) .signal-radiance b {
  border-color: rgba(190, 255, 166, 1);
  box-shadow: 0 0 14px rgba(167, 255, 133, .98), inset 0 0 13px rgba(167, 255, 133, .36);
}

@keyframes signal-light-wave {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.22); }
  13% { opacity: .98; }
  62% { opacity: .32; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.85); }
}

@keyframes signal-radiance-core {
  0%, 100% { opacity: .44; transform: scale(.82); }
  50% { opacity: .9; transform: scale(1.14); }
}

.signal-node i::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 54px;
  height: 54px;
  content: "";
  border: 1.5px solid rgba(142, 232, 108, 0.78);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(139, 229, 105, .35);
  animation: ping 1.75s ease-out infinite;
  transform: translate(-50%, -50%);
}

.signal-node i::before {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 68px;
  height: 68px;
  content: "";
  background: conic-gradient(from 0deg, transparent 0 68%, rgba(145, 235, 111, 0.94) 80%, rgba(83, 86, 163, .7) 88%, transparent 97%);
  border: 1px solid rgba(119, 122, 197, 0.36);
  border-radius: 50%;
  opacity: 0.94;
  -webkit-mask: radial-gradient(circle, transparent 0 31%, #000 33% 36%, transparent 38% 49%, #000 51% 53%, transparent 55%);
  mask: radial-gradient(circle, transparent 0 31%, #000 33% 36%, transparent 38% 49%, #000 51% 53%, transparent 55%);
  animation: signal-radar-sweep 2.2s linear infinite;
  transform: translate(-50%, -50%);
}

@keyframes signal-radar-sweep {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes signal-shell-pulse {
  0% { opacity: 0; transform: scale(0.84); }
  32% { opacity: 0.56; }
  100% { opacity: 0; transform: scale(1.24); }
}

@keyframes signal-blink {
  0%, 36%, 100% { opacity: 0; box-shadow: 0 0 0 rgba(145,235,111,0); }
  42%, 55% { opacity: .92; box-shadow: 0 0 26px rgba(145,235,111,.5); }
  62% { opacity: .12; }
}

.signal-preview {
  position: absolute;
  z-index: 25;
  bottom: calc(100% + 16px);
  left: 50%;
  display: block;
  width: 232px;
  min-height: 154px;
  padding: 13px 14px 12px;
  overflow: visible;
  color: #ffffff;
  background:
    linear-gradient(135deg, rgba(83, 86, 163, 0.24), transparent 52%),
    rgba(35, 36, 44, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 3px;
  box-shadow: 0 28px 64px rgba(43, 44, 50, 0.34), inset 0 1px rgba(255, 255, 255, 0.07);
  opacity: 0;
  visibility: hidden;
  filter: blur(10px) saturate(.82);
  pointer-events: none;
  clip-path: inset(18% 5% 0 5% round 7px);
  transform: translate(-50%, 22px) perspective(700px) rotateX(-7deg) scale(.94);
  transform-origin: 50% 100%;
  transition: opacity .34s ease, filter .48s var(--ease-out), transform .56s var(--ease-out),
    clip-path .52s var(--ease-out), visibility 0s linear .56s;
  backdrop-filter: blur(18px) saturate(1.1);
}

.signal-preview::before {
  position: absolute;
  z-index: -1;
  inset: 5px -5px -5px 5px;
  content: "";
  border: 1px solid rgba(119, 122, 197, 0.16);
  background: rgba(42, 43, 52, 0.48);
  transform: translate(5px, 5px);
}

.signal-preview::after {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 1px;
  height: 17px;
  content: "";
  background: linear-gradient(#9598d4, transparent);
}

.signal-node:hover .signal-preview,
.signal-node:focus-visible .signal-preview,
.signal-node.is-preview-open .signal-preview {
  opacity: 1;
  visibility: visible;
  filter: blur(0) saturate(1.08);
  clip-path: inset(0 0 0 0 round 3px);
  transform: translate(-50%, 0) perspective(700px) rotateX(0) scale(1);
  transition-delay: 0s;
}

.signal-preview > * {
  opacity: 0;
  transform: translateY(9px);
  transition: opacity .28s ease, transform .46s var(--ease-out);
}

.signal-node:is(:hover, :focus-visible, .is-preview-open) .signal-preview > * {
  opacity: 1;
  transform: translateY(0);
}

.signal-node:is(:hover, :focus-visible, .is-preview-open) .signal-preview > :nth-child(2) { transition-delay: .07s; }
.signal-node:is(:hover, :focus-visible, .is-preview-open) .signal-preview > :nth-child(3) { transition-delay: .13s; }

.preview-heading,
.preview-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.preview-heading {
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.signal-node .preview-heading small,
.signal-node .preview-footer small {
  color: rgba(255, 255, 255, 0.42);
  font-size: 5px;
  letter-spacing: 0.1em;
}

.preview-heading b,
.preview-footer b {
  color: #d9dafb;
  font-size: 6px;
  font-weight: 760;
  letter-spacing: 0.08em;
}

.preview-footer {
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.pid-miniature {
  width: 100%;
  height: 188px;
  margin: 9px 0 8px;
  overflow: hidden;
  fill: none;
  background: #151722;
  border: 1px solid rgba(185, 188, 235, 0.2);
  stroke: rgba(230, 231, 249, 0.76);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 0.85;
}

.preview-pid {
  width: 360px;
  min-height: 258px;
  padding: 14px 14px 12px;
  background:
    linear-gradient(135deg, rgba(83, 86, 163, 0.2), transparent 46%),
    rgba(27, 28, 36, 0.96);
}

.pid-miniature .pid-sheet { fill: #141620; }
.pid-miniature .pid-grid-field { fill: url(#pid-cad-grid); }
.pid-miniature .pid-grid-line {
  fill: none;
  stroke: rgba(149, 152, 212, 0.065);
  stroke-width: 0.45;
}
.pid-miniature text {
  fill: rgba(235, 236, 248, 0.7);
  stroke: none;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 5.6px;
  font-weight: 600;
  letter-spacing: 0.025em;
}
.pid-miniature .pid-equipment { stroke: rgba(236, 237, 248, 0.86); }
.pid-miniature .pid-process {
  stroke: #a7a9e2;
  stroke-width: 1.55;
}
.pid-miniature .pid-main-line {
  stroke-dasharray: 8 3;
  filter: url(#pid-cad-glow);
  animation: pid-preview-flow 3.2s linear infinite;
}
.pid-miniature .pid-utility {
  stroke: rgba(128, 193, 220, 0.72);
  stroke-width: 1.1;
  stroke-dasharray: 5 2 1 2;
}
.pid-miniature .pid-valves { stroke: #d8d9f5; stroke-width: 1.05; }
.pid-miniature .pid-instruments circle {
  fill: #1d2030;
  stroke: #bfc1ef;
  stroke-width: 1.05;
  filter: drop-shadow(0 0 3px rgba(119, 122, 197, 0.55));
}
.pid-miniature .pid-instruments text { fill: #f2f2ff; font-size: 5.2px; }
.pid-miniature .pid-signal-line {
  stroke: rgba(213, 214, 243, 0.58);
  stroke-dasharray: 2 3;
  animation: pid-signal-flow 2.4s linear infinite;
}
.pid-miniature .pid-notes path { stroke: rgba(255,255,255,.2); }
.pid-miniature .pid-notes text { font-size: 4.8px; fill: rgba(255,255,255,.48); }
.pid-miniature .pid-title-block { stroke: rgba(218, 219, 243, 0.3); stroke-width: 0.6; }
.pid-miniature .pid-title-block text { font-size: 4.6px; fill: rgba(239,240,252,.6); }
.pid-miniature .pid-scan-line {
  fill: rgba(185, 188, 235, 0.8);
  stroke: none;
  filter: blur(0.35px) drop-shadow(0 0 5px rgba(149, 152, 212, 0.95));
  opacity: 0;
  animation: pid-cad-scan 4.8s ease-in-out infinite;
}

@keyframes pid-preview-flow { to { stroke-dashoffset: -88; } }
@keyframes pid-signal-flow { to { stroke-dashoffset: -30; } }
@keyframes pid-cad-scan {
  0%, 12% { opacity: 0; transform: translateX(0); }
  22% { opacity: 0.7; }
  68% { opacity: 0.35; transform: translateX(336px); }
  72%, 100% { opacity: 0; transform: translateX(336px); }
}

.legal-document-stack {
  display: flex;
  min-height: 92px;
  padding: 9px 0;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}

.legal-document-stack > span {
  display: grid;
  min-height: 22px;
  align-items: center;
  padding: 0 7px;
  color: rgba(255, 255, 255, 0.56);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.025);
  opacity: 0;
  grid-template-columns: 19px 1fr auto;
  gap: 6px;
  transform: translateY(13px);
  transition: opacity 0.32s ease, transform 0.5s var(--ease-out);
}

.signal-node:hover .legal-document-stack > span,
.signal-node:focus-visible .legal-document-stack > span,
.signal-node.is-preview-open .legal-document-stack > span {
  opacity: 1;
  transform: translateY(0);
}

.signal-node:hover .legal-document-stack > span:nth-child(2),
.signal-node:focus-visible .legal-document-stack > span:nth-child(2),
.signal-node.is-preview-open .legal-document-stack > span:nth-child(2) { transition-delay: 0.08s; }
.signal-node:hover .legal-document-stack > span:nth-child(3),
.signal-node:focus-visible .legal-document-stack > span:nth-child(3),
.signal-node.is-preview-open .legal-document-stack > span:nth-child(3) { transition-delay: 0.16s; }

.legal-document-stack b { color: #9598d4; font-size: 5px; }
.signal-node .legal-document-stack small { color: rgba(255,255,255,.55); font-size: 5.5px; }
.legal-document-stack em { color: #b8bae7; font-size: 4.5px; font-style: normal; }

.field-preview-image {
  position: relative;
  display: flex;
  height: 88px;
  margin: 9px 0;
  padding: 9px;
  overflow: hidden;
  align-items: flex-end;
  justify-content: flex-end;
  flex-direction: column;
  background:
    linear-gradient(180deg, rgba(33, 34, 42, 0.06), rgba(33, 34, 42, 0.62)),
    url("/assets/wayfix-digital-plant-v3.webp") 67% 65% / 190% auto;
  border: 1px solid rgba(255, 255, 255, 0.11);
}

.field-preview-image > span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 5%;
  width: 1px;
  background: linear-gradient(transparent, #d9dafb, transparent);
  box-shadow: 0 0 14px rgba(119, 122, 197, 0.8);
  animation: field-preview-scan 3.8s ease-in-out infinite;
}

.field-preview-image b { z-index: 2; font-size: 10px; }
.signal-node .field-preview-image small { z-index: 2; color: rgba(255,255,255,.55); font-size: 5px; }

@keyframes field-preview-scan {
  0%, 10% { left: 4%; opacity: 0; }
  24% { opacity: 1; }
  80% { left: 94%; opacity: 0.8; }
  100% { left: 94%; opacity: 0; }
}

.node-one {
  top: 59%;
  left: 39%;
}

.node-two {
  top: 35%;
  right: 28%;
  animation-delay: -0.95s;
}

.node-two::before, .node-two::after, .node-two i::after { animation-delay: -.72s; }

.node-three {
  right: 20%;
  bottom: 26%;
  animation-delay: -1.8s;
}

.node-three::before, .node-three::after, .node-three i::after { animation-delay: -1.44s; }

/* Unified purple beacon system: light at rest, deep purple only on hover */
.signal-node,
.signal-node.is-active {
  color: #4c1d95;
  background: linear-gradient(135deg, rgba(255, 255, 255, .97), rgba(237, 233, 254, .95));
  border-color: rgba(139, 92, 246, .72);
  box-shadow: 0 12px 34px rgba(51, 31, 91, .24), 0 0 14px rgba(167, 139, 250, .6), 0 0 0 4px rgba(124, 58, 237, .13);
  animation: signal-button-float 3.1s ease-in-out infinite;
}

.signal-node.node-two { animation-delay: -1.03s; }
.signal-node.node-three { animation-delay: -2.06s; }

.signal-node small { color: rgba(76, 29, 149, .48); }

.signal-node::before {
  border-color: rgba(167, 139, 250, .9);
  box-shadow: 0 0 20px rgba(139, 92, 246, .5), 0 0 42px rgba(91, 33, 182, .34);
}

.signal-node::after { border-color: rgba(221, 214, 254, .82); }

.signal-node i {
  background: #c4b5fd;
  border-color: #faf7ff;
  box-shadow: 0 0 0 5px rgba(124, 58, 237, .24), 0 0 18px rgba(167, 139, 250, 1), 0 0 36px rgba(91, 33, 182, .9);
}

.signal-node .signal-radiance::before {
  background: radial-gradient(circle, rgba(245, 243, 255, .9) 0 7%, rgba(167, 139, 250, .48) 22%, rgba(91, 33, 182, .28) 46%, transparent 70%);
  opacity: .9;
}

.signal-node .signal-radiance b {
  border-color: rgba(196, 181, 253, .98);
  box-shadow: 0 0 14px rgba(167, 139, 250, .98), inset 0 0 11px rgba(124, 58, 237, .42);
}

.signal-node i::after {
  border-color: rgba(167, 139, 250, .96);
  box-shadow: 0 0 17px rgba(139, 92, 246, .82), 0 0 30px rgba(91, 33, 182, .48);
}

.signal-node i::before {
  background: conic-gradient(from 0deg, transparent 0 65%, rgba(221, 214, 254, .98) 77%, rgba(139, 92, 246, 1) 88%, rgba(76, 29, 149, .88) 94%, transparent 99%);
  border-color: rgba(167, 139, 250, .62);
  filter: drop-shadow(0 0 8px rgba(139, 92, 246, .92));
}

.signal-node:is(:hover, :focus-visible, .is-preview-open) {
  color: #fff;
  background: linear-gradient(135deg, rgba(91, 33, 182, .98), rgba(49, 24, 87, .99));
  border-color: #ddd6fe;
  box-shadow: 0 18px 52px rgba(40, 14, 80, .48), 0 0 28px rgba(167, 139, 250, .86), 0 0 62px rgba(109, 40, 217, .55);
  filter: saturate(1.18) brightness(1.08);
  transform: translateY(-6px) scale(1.1);
  animation: none;
}

.signal-node:is(:hover, :focus-visible, .is-preview-open) .signal-radiance b {
  border-color: #ede9fe;
  box-shadow: 0 0 21px rgba(196, 181, 253, 1), 0 0 40px rgba(124, 58, 237, .75), inset 0 0 15px rgba(167, 139, 250, .52);
  animation-duration: 1.5s;
}

@keyframes signal-button-float {
  0%, 100% {
    box-shadow: 0 10px 30px rgba(51, 31, 91, .22), 0 0 12px rgba(139, 92, 246, .48), 0 0 0 3px rgba(124, 58, 237, .1);
    transform: translateY(0) scale(1);
  }
  50% {
    box-shadow: 0 15px 40px rgba(51, 31, 91, .3), 0 0 28px rgba(167, 139, 250, .88), 0 0 50px rgba(91, 33, 182, .38), 0 0 0 7px rgba(124, 58, 237, .16);
    transform: translateY(-4px) scale(1.05);
  }
}

@keyframes node-label-pulse {
  0%, 100% {
    opacity: 0.86;
    box-shadow: 0 8px 24px rgba(61, 63, 120, 0.12), 0 0 0 3px rgba(142,229,111,.08);
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    box-shadow: 0 12px 34px rgba(83, 86, 163, 0.3), 0 0 24px rgba(143, 232, 109, 0.46), 0 0 0 6px rgba(142,229,111,.12);
    transform: translateY(-3px) scale(1.035);
  }
}

@keyframes ping {
  from {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(0.35);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.35);
  }
}

.glass-panel {
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.17);
  background:
    linear-gradient(135deg, rgba(83, 86, 163, 0.22), transparent 48%),
    rgba(38, 39, 47, 0.82);
  box-shadow: 0 26px 70px rgba(43, 44, 50, 0.24), inset 0 1px rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(17px) saturate(1.14);
  -webkit-backdrop-filter: blur(17px) saturate(1.14);
}

.visual-status {
  position: absolute;
  z-index: 5;
  right: 16%;
  bottom: 8%;
  width: 252px;
  padding: 16px 18px 15px;
  overflow: hidden;
  animation: status-float 5.8s ease-in-out infinite;
}

.visual-status::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  content: "";
  background: linear-gradient(180deg, #777ac5, #5356a3 62%, transparent);
  box-shadow: 0 0 18px rgba(119, 122, 197, 0.8);
}

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

.status-topline,
.status-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.status-topline {
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.46);
  font-size: 7px;
  font-weight: 750;
  letter-spacing: 0.12em;
}

.status-topline b {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #c9caee;
  font-size: 6px;
  font-weight: 780;
  letter-spacing: 0.13em;
}

.status-topline b::before {
  width: 5px;
  height: 5px;
  content: "";
  background: #a7a9e3;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(119, 122, 197, 0.13), 0 0 10px rgba(149, 152, 212, 0.7);
}

.status-pipeline {
  display: grid;
  align-items: center;
  padding-top: 12px;
  grid-template-columns: auto 1fr auto 1fr auto;
  gap: 7px;
}

.status-pipeline span {
  color: rgba(255, 255, 255, 0.28);
  font-size: 6px;
  font-weight: 780;
  letter-spacing: 0.12em;
  transition: color 0.35s ease, text-shadow 0.35s ease;
}

.status-pipeline span.is-active {
  color: #d9dafb;
  text-shadow: 0 0 12px rgba(149, 152, 212, 0.72);
}

.status-pipeline i {
  position: relative;
  height: 1px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.09);
}

.status-pipeline i::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, transparent, #9598d4, transparent);
  animation: status-pipeline-flow 2.3s linear infinite;
  transform: translateX(-100%);
}

@keyframes status-pipeline-flow {
  to { transform: translateX(100%); }
}

.status-main {
  align-items: flex-start;
  padding: 12px 0 10px;
}

.status-main strong {
  font-size: 16px;
  line-height: 1;
  letter-spacing: -0.03em;
  transition: opacity 0.25s, transform 0.25s;
}

.status-main span {
  max-width: 112px;
  color: rgba(255, 255, 255, 0.44);
  font-size: 7px;
  line-height: 1.45;
  text-align: right;
  transition: opacity 0.25s, transform 0.25s;
}

.status-main.is-changing strong,
.status-main.is-changing span {
  opacity: 0;
  transform: translateY(5px);
}

.status-bars {
  display: flex;
  height: 18px;
  align-items: flex-end;
  gap: 4px;
}

.status-bars i {
  width: 100%;
  background: linear-gradient(180deg, #a7a9e3, #5356a3);
  border-radius: 2px 2px 0 0;
  animation: bar 2.5s ease-in-out infinite alternate;
}

.status-bars i:nth-child(1) { height: 35%; }
.status-bars i:nth-child(2) { height: 68%; animation-delay: -0.5s; }
.status-bars i:nth-child(3) { height: 48%; animation-delay: -1s; }
.status-bars i:nth-child(4) { height: 84%; animation-delay: -1.5s; }
.status-bars i:nth-child(5) { height: 58%; animation-delay: -2s; }

.hero-scene-nav {
  position: absolute;
  z-index: 12;
  right: 17%;
  bottom: 6.5%;
  display: flex;
  min-height: 28px;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid rgba(83, 86, 163, 0.16);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 12px 30px rgba(47, 49, 87, 0.14);
  backdrop-filter: blur(12px);
}

.hero-scene-nav button {
  width: 22px;
  height: 3px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  background: rgba(83, 86, 163, 0.25);
  cursor: pointer;
  transition: width .45s var(--ease-out), background-color .35s, box-shadow .35s;
}

.hero-scene-nav button::after {
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  background: linear-gradient(90deg, #5356a3, #9aa0ff, #8ddc73);
  transform: translateX(-105%);
}

.hero-scene-nav button.is-active {
  width: 48px;
  background: rgba(83, 86, 163, 0.12);
  box-shadow: 0 0 12px rgba(83, 86, 163, .25);
}

.hero-scene-nav button.is-active::after {
  animation: hero-scene-progress var(--hero-scene-duration, 6200ms) linear forwards;
}

.hero-scene-nav button:focus-visible { outline: 2px solid #5356a3; outline-offset: 5px; }

@keyframes hero-scene-progress { to { transform: translateX(0); } }

@keyframes bar {
  to { transform: scaleY(0.55); transform-origin: bottom; }
}

/* Sector rail */
.sector-rail {
  position: relative;
  z-index: 3;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.4);
}

.sector-inner {
  display: grid;
  min-height: 126px;
  align-items: center;
  grid-template-columns: 220px 1fr;
  padding: 20px 0;
}

.sector-inner > p {
  margin: 0;
  color: var(--purple);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.sector-list {
  display: grid;
  align-items: center;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 17px clamp(18px, 1.7vw, 30px);
  color: #575963;
  font-size: clamp(9px, 0.84vw, 12px);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.sector-list span {
  position: relative;
  display: flex;
  min-height: 18px;
  align-items: center;
  line-height: 1.35;
  white-space: nowrap;
}

.sector-list span:not(:nth-child(5n))::after {
  position: absolute;
  top: 50%;
  right: clamp(-16px, -0.85vw, -10px);
  width: 3px;
  height: 3px;
  content: "";
  background: rgba(83, 86, 163, 0.45);
  border-radius: 50%;
  transform: translateY(-50%);
}

/* Shared headings */
.section-heading {
  display: grid;
  align-items: end;
  margin-bottom: 80px;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 90px;
}

.section-kicker {
  margin-bottom: 24px;
}

.section-kicker span {
  min-width: 26px;
  padding-right: 11px;
  border-right: 1px solid currentColor;
  opacity: 0.75;
}

.section-kicker.light {
  color: #b8bae7;
}

.section-heading h2,
.intelligence h2,
.difference h2,
.insight h2,
.centers h2,
.contact h2 {
  margin-bottom: 0;
  font-size: clamp(42px, 4.1vw, 64px);
  font-weight: 710;
  line-height: 1.24;
  letter-spacing: -0.052em;
}

.section-intro {
  max-width: 510px;
  margin: 0 0 7px auto;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: -0.015em;
}

/* Expertise */
.expertise {
  position: relative;
}

.expertise::before {
  position: absolute;
  top: 0;
  right: -200px;
  width: 650px;
  height: 650px;
  content: "";
  background: radial-gradient(circle, rgba(217, 218, 238, 0.22), transparent 68%);
  pointer-events: none;
}

.expertise-grid {
  display: grid;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  grid-template-columns: repeat(3, 1fr);
}

.expertise-card {
  position: relative;
  min-height: 410px;
  padding: 34px 34px 30px;
  overflow: hidden;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(251, 251, 252, 0.42);
  transition: background-color 0.45s var(--ease), transform 0.45s var(--ease),
    box-shadow 0.45s var(--ease);
  isolation: isolate;
}

.expertise-card::before {
  position: absolute;
  z-index: -1;
  right: -80px;
  bottom: -80px;
  width: 210px;
  height: 210px;
  content: "";
  background: radial-gradient(circle, rgba(83, 86, 163, 0.12), transparent 68%);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.45s, transform 0.55s var(--ease-out);
}

.expertise-card:hover {
  z-index: 2;
  background: var(--white);
  box-shadow: 0 28px 70px rgba(61, 63, 120, 0.09);
  transform: translateY(-7px);
}

.expertise-card:hover::before {
  opacity: 1;
  transform: scale(1);
}

.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 62px;
}

.card-head > span {
  color: #8c8e98;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.08em;
}

.card-head svg {
  width: 42px;
  height: 42px;
  fill: none;
  stroke: var(--purple);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.2;
  transition: transform 0.5s var(--ease-out);
}

.expertise-card:hover .card-head svg {
  transform: translateY(-4px) rotate(3deg);
}

.expertise-card h3 {
  margin-bottom: 18px;
  font-size: 25px;
  font-weight: 720;
  letter-spacing: -0.035em;
}

.expertise-card > p {
  max-width: 340px;
  margin-bottom: 28px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.82;
}

.expertise-card ul {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.expertise-card li {
  padding: 5px 9px;
  color: #71737d;
  background: #f4f1f3;
  border-radius: 2px;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.02em;
}

.card-line {
  position: absolute;
  right: 34px;
  bottom: 26px;
  left: 34px;
  height: 2px;
  overflow: hidden;
  background: rgba(83, 86, 163, 0.08);
}

.card-line::after {
  position: absolute;
  inset: 0;
  content: "";
  background: var(--purple);
  transform: translateX(-101%);
  transition: transform 0.6s var(--ease-out);
}

.expertise-card:hover .card-line::after {
  transform: translateX(0);
}

.expertise-card-accent {
  color: var(--white);
  background: var(--purple);
}

.expertise-card-accent:hover {
  background: #5356a3;
}

.expertise-card-accent .card-head > span,
.expertise-card-accent > p {
  color: rgba(255, 255, 255, 0.75);
}

.expertise-card-accent .card-head svg {
  stroke: var(--white);
}

.expertise-card-accent li {
  color: rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.12);
}

.expertise-card-accent .card-line {
  background: rgba(255, 255, 255, 0.14);
}

.expertise-card-accent .card-line::after {
  background: var(--white);
}

.card-orbit {
  position: absolute;
  z-index: -1;
  top: -80px;
  right: -80px;
  width: 250px;
  height: 250px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
}

.card-orbit::before,
.card-orbit::after {
  position: absolute;
  inset: 28px;
  content: "";
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.card-orbit::after { inset: 62px; }

.card-orbit i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  background: var(--white);
  border-radius: 50%;
  animation: orbit 6s linear infinite;
}

.card-orbit i:nth-child(2) { animation-duration: 9s; animation-delay: -3s; }
.card-orbit i:nth-child(3) { animation-duration: 12s; animation-delay: -7s; }

@keyframes orbit {
  from { transform: rotate(0deg) translateX(91px) rotate(0deg); }
  to { transform: rotate(360deg) translateX(91px) rotate(-360deg); }
}

/* Intelligence */
.intelligence {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background: var(--dark);
}

.intelligence::before {
  position: absolute;
  inset: 0;
  content: "";
  opacity: 0.23;
  background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at 70% 50%, black, transparent 68%);
}

.intelligence-glow {
  position: absolute;
  top: 15%;
  right: 5%;
  width: 650px;
  height: 650px;
  background: rgba(83, 86, 163, 0.25);
  border-radius: 50%;
  filter: blur(150px);
}

.intelligence-layout {
  display: grid;
  align-items: center;
  grid-template-columns: 0.78fr 1.22fr;
  gap: clamp(70px, 8vw, 140px);
}

.intelligence h2 {
  margin-bottom: 34px;
}

.intelligence h2 em {
  color: #686bb4;
}

.intelligence-copy > p:not(.section-kicker) {
  max-width: 500px;
  margin-bottom: 44px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 15px;
  line-height: 1.92;
}

.tool-tabs {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
}

.tool-tabs button {
  --tab-rgb: 158, 161, 238;
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 58px;
  padding: 0;
  color: rgba(255, 255, 255, 0.38);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-align: left;
  cursor: pointer;
  isolation: isolate;
  transition: color 0.3s, padding-left 0.35s var(--ease), text-shadow .35s ease;
}

.tool-tabs button[data-tool="kora"] { --tab-rgb: 158, 161, 238; }
.tool-tabs button[data-tool="risk"] { --tab-rgb: 255, 118, 145; }
.tool-tabs button[data-tool="strength"] { --tab-rgb: 91, 211, 244; }
.tool-tabs button[data-tool="field"] { --tab-rgb: 91, 226, 166; }
.tool-tabs button[data-tool="automation"] { --tab-rgb: 211, 119, 255; }

.tool-tabs button span {
  font-size: 10px;
  opacity: 0.65;
}

.tool-tabs button.active {
  padding-left: 12px;
  color: var(--white);
  background: linear-gradient(90deg, rgba(var(--tab-rgb), .2), rgba(var(--tab-rgb), .045) 52%, transparent 78%);
  background-size: 180% 100%;
  animation: tool-row-energy 3s ease-in-out infinite;
}

.tool-tabs button::before {
  position: absolute;
  z-index: -1;
  top: calc(50% - 11.5px);
  right: -7px;
  width: 23px;
  height: 23px;
  content: "";
  border: 1px solid rgba(var(--tab-rgb), .18);
  border-radius: 50%;
  opacity: .32;
  transform: scale(.62);
  animation: tool-signal-ring 3.2s ease-out infinite;
}

.tool-tabs button::after {
  width: 9px;
  height: 9px;
  margin-left: auto;
  content: "";
  background: rgba(var(--tab-rgb), .42);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(var(--tab-rgb), .18);
  animation: tool-signal-idle 3.2s ease-in-out infinite;
}

.tool-tabs button:nth-child(2)::before,
.tool-tabs button:nth-child(2)::after { animation-delay: -.55s; }
.tool-tabs button:nth-child(3)::before,
.tool-tabs button:nth-child(3)::after { animation-delay: -1.1s; }
.tool-tabs button:nth-child(4)::before,
.tool-tabs button:nth-child(4)::after { animation-delay: -1.65s; }
.tool-tabs button:nth-child(5)::before,
.tool-tabs button:nth-child(5)::after { animation-delay: -2.2s; }

.tool-tabs button.active {
  text-shadow: 0 0 18px rgba(183, 185, 235, .16);
}

.tool-tabs button.active::before {
  border-color: rgba(var(--tab-rgb), .8);
  opacity: 1;
  animation: tool-signal-ring-active 1.9s ease-out infinite;
}

.tool-tabs button.active::after {
  background: rgb(var(--tab-rgb));
  box-shadow: 0 0 0 5px rgba(var(--tab-rgb), .14), 0 0 20px rgba(var(--tab-rgb), .95);
  animation: tool-signal-active 1.9s ease-in-out infinite;
}

.tool-tabs button[data-tool="risk"].active::after {
  border-radius: 2px;
  animation-name: risk-tab-signal;
}

.tool-tabs button[data-tool="strength"].active::after {
  width: 15px;
  height: 3px;
  border-radius: 4px;
  animation-name: strength-tab-signal;
}

.tool-tabs button[data-tool="field"].active::before { border-style: dashed; }
.tool-tabs button[data-tool="field"].active::after { animation-name: field-tab-signal; }
.tool-tabs button[data-tool="automation"].active::after { animation-name: automation-tab-signal; }

@keyframes tool-signal-idle {
  0%, 100% { opacity: .28; transform: scale(.72); }
  50% { opacity: .62; transform: scale(1); }
}

@keyframes tool-signal-ring {
  0% { opacity: .34; transform: scale(.56); }
  72%, 100% { opacity: 0; transform: scale(1.12); }
}

@keyframes tool-signal-active {
  0%, 100% { filter: brightness(.9); transform: scale(.82); }
  48% { filter: brightness(1.45); transform: scale(1.18); }
  56% { filter: brightness(1.8); transform: scale(1.34); }
}

@keyframes tool-signal-ring-active {
  0% { opacity: .9; transform: scale(.58); }
  75%, 100% { opacity: 0; transform: scale(1.48); }
}

@keyframes risk-tab-signal {
  0%, 100% { filter: brightness(.9); transform: rotate(45deg) scale(.8); }
  52% { filter: brightness(1.8); transform: rotate(225deg) scale(1.26); }
}

@keyframes strength-tab-signal {
  0%, 100% { opacity: .55; transform: scaleX(.55); }
  50% { opacity: 1; transform: scaleX(1.25); }
}

@keyframes field-tab-signal {
  0%, 100% { filter: brightness(.9); transform: scale(.72); }
  45% { filter: brightness(1.8); transform: scale(1.3); }
  62% { filter: brightness(1.2); transform: scale(.92); }
}

@keyframes automation-tab-signal {
  0%, 100% { opacity: .55; transform: translateX(-3px) scale(.72); }
  50% { opacity: 1; transform: translateX(3px) scale(1.24); }
}

@keyframes tool-row-energy {
  0%, 100% { background-position: 100% 0; }
  50% { background-position: 0 0; }
}

.product-stage {
  --tool-rgb: 158, 161, 238;
  position: relative;
  min-height: 560px;
  overflow: hidden;
  border: 1px solid rgba(var(--tool-rgb), .24);
  background: rgba(37, 38, 46, 0.72);
  box-shadow: 0 50px 110px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(14px);
  transition: border-color .5s ease, box-shadow .5s ease;
}

.product-stage[data-active-tool="kora"] { --tool-rgb: 158, 161, 238; }
.product-stage[data-active-tool="risk"] { --tool-rgb: 255, 118, 145; }
.product-stage[data-active-tool="strength"] { --tool-rgb: 91, 211, 244; }
.product-stage[data-active-tool="field"] { --tool-rgb: 91, 226, 166; }
.product-stage[data-active-tool="automation"] { --tool-rgb: 211, 119, 255; }

.product-stage.is-visible {
  animation: stage-breathe 7s ease-in-out infinite;
}

@keyframes stage-breathe {
  0%, 100% { box-shadow: 0 50px 110px rgba(0, 0, 0, 0.34); }
  50% { box-shadow: 0 58px 130px rgba(0, 0, 0, 0.4), 0 0 55px rgba(83, 86, 163, 0.1); }
}

.product-stage::after {
  position: absolute;
  z-index: 3;
  right: -80px;
  bottom: -110px;
  width: 310px;
  height: 310px;
  content: "";
  border: 1px solid rgba(119, 122, 197, 0.16);
  border-radius: 50%;
  box-shadow: 0 0 0 42px rgba(119, 122, 197, 0.03), 0 0 0 84px rgba(119, 122, 197, 0.02);
  pointer-events: none;
}

.stage-topbar {
  display: flex;
  height: 48px;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.42);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
}

.window-dots {
  display: flex;
  gap: 5px;
  margin-right: 18px;
}

.window-dots i {
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 50%;
}

.stage-live {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  color: rgba(255, 255, 255, 0.65);
}

.stage-runtime {
  display: grid;
  width: min(190px, 30%);
  align-items: center;
  margin-left: auto;
  grid-template-columns: auto 1fr 30px;
  gap: 8px;
  color: rgba(255,255,255,.32);
  font-size: 6px;
  letter-spacing: .1em;
}

.stage-runtime > i {
  position: relative;
  height: 2px;
  overflow: hidden;
  background: rgba(255,255,255,.08);
}

.stage-runtime > i b {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(var(--tool-rgb), .45), rgb(var(--tool-rgb)), #f1f1ff);
  box-shadow: 0 0 12px rgba(var(--tool-rgb), .9);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s linear;
}

.stage-runtime em {
  color: rgb(var(--tool-rgb));
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 7px;
  font-style: normal;
  text-align: right;
}

.stage-runtime + .stage-live { margin-left: 20px; }

.stage-live i {
  width: 5px;
  height: 5px;
  background: rgb(var(--tool-rgb));
  border-radius: 50%;
  box-shadow: 0 0 9px rgba(149, 152, 212, 0.65);
  animation: system-live-beacon 1.55s ease-in-out infinite;
}

@keyframes system-live-beacon {
  0%, 100% { box-shadow: 0 0 5px rgba(149, 152, 212, .42); opacity: .62; transform: scale(.72); }
  48% { box-shadow: 0 0 16px rgba(183, 185, 235, .98), 0 0 0 5px rgba(119, 122, 197, .1); opacity: 1; transform: scale(1.22); }
}

.product-screen {
  position: relative;
  display: grid;
  min-height: 510px;
  grid-template-columns: 58px 1fr;
  animation: screen-in 0.55s var(--ease-out) both;
}

.product-screen::before {
  position: absolute;
  z-index: 8;
  top: -16%;
  right: 0;
  left: 58px;
  height: 15%;
  content: "";
  background: linear-gradient(180deg, transparent, rgba(var(--tool-rgb), .18), rgba(255, 255, 255, .09), transparent);
  filter: blur(1px);
  opacity: 0;
  pointer-events: none;
}

.product-screen::after {
  position: absolute;
  z-index: 7;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, transparent 34%, rgba(var(--tool-rgb), .025) 43%, rgba(var(--tool-rgb), .18) 50%, rgba(var(--tool-rgb), .025) 57%, transparent 66%);
  background-size: 220% 100%;
  opacity: 0;
  pointer-events: none;
}

.product-screen.is-running::after {
  animation: intelligence-data-wave 3.8s linear infinite;
}

.product-screen[data-screen="risk"]::after {
  background: radial-gradient(circle at 68% 55%, rgba(255,118,145,.2), transparent 17%), repeating-linear-gradient(135deg, transparent 0 34px, rgba(255,118,145,.055) 35px, transparent 36px 70px);
}

.product-screen.is-running[data-screen="risk"]::after { animation: risk-heat-wave 2.8s ease-in-out infinite; }

.product-screen[data-screen="strength"]::after {
  background: repeating-linear-gradient(90deg, transparent 0 54px, rgba(91,211,244,.055) 55px, transparent 56px 110px), linear-gradient(110deg, transparent 38%, rgba(91,211,244,.18) 50%, transparent 62%);
  background-size: auto, 220% 100%;
}

.product-screen.is-running[data-screen="strength"]::after { animation: strength-blueprint-wave 3.4s linear infinite; }

.product-screen[data-screen="field"]::after {
  background: radial-gradient(circle at 68% 54%, transparent 0 12%, rgba(91,226,166,.2) 12.4%, transparent 13%, transparent 23%, rgba(91,226,166,.12) 23.4%, transparent 24%), conic-gradient(from 250deg at 68% 54%, transparent 0 78%, rgba(91,226,166,.22) 88%, transparent 96%);
}

.product-screen.is-running[data-screen="field"]::after { animation: field-radar-wave 3.6s linear infinite; transform-origin: 68% 54%; }

.product-screen[data-screen="automation"]::after {
  background: radial-gradient(circle at 22% 34%, rgba(211,119,255,.22) 0 2px, transparent 3px), radial-gradient(circle at 64% 62%, rgba(211,119,255,.2) 0 2px, transparent 3px), linear-gradient(90deg, transparent 30%, rgba(211,119,255,.18) 50%, transparent 70%);
  background-size: 90px 70px, 120px 96px, 220% 100%;
}

.product-screen.is-running[data-screen="automation"]::after { animation: automation-packet-wave 2.6s linear infinite; }

.product-screen.is-running::before {
  animation: intelligence-system-scan 4.6s cubic-bezier(.38,.02,.3,1) infinite;
}

@keyframes intelligence-system-scan {
  0%, 9% { top: -16%; opacity: 0; }
  20% { opacity: .9; }
  76% { top: 102%; opacity: .55; }
  100% { top: 102%; opacity: 0; }
}

@keyframes intelligence-data-wave {
  0% { background-position: 115% 0; opacity: 0; }
  12% { opacity: .75; }
  82% { opacity: .55; }
  100% { background-position: -115% 0; opacity: 0; }
}

@keyframes risk-heat-wave {
  0%, 100% { opacity: .25; filter: saturate(.8) brightness(.8); }
  50% { opacity: .9; filter: saturate(1.5) brightness(1.25); }
}

@keyframes strength-blueprint-wave {
  from { background-position: 0 0, 120% 0; opacity: .25; }
  40% { opacity: .8; }
  to { background-position: 56px 0, -120% 0; opacity: .3; }
}

@keyframes field-radar-wave {
  0% { opacity: .2; transform: rotate(0deg); }
  45% { opacity: .75; }
  100% { opacity: .2; transform: rotate(360deg); }
}

@keyframes automation-packet-wave {
  from { background-position: 0 0, 0 0, 120% 0; opacity: .35; }
  50% { opacity: .9; }
  to { background-position: 90px 70px, -120px 96px, -120% 0; opacity: .35; }
}

.product-screen[hidden] {
  display: none;
}

@keyframes screen-in {
  from { opacity: 0; transform: translateY(14px) scale(0.99); }
}

.screen-sidebar {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 28px;
  padding-top: 24px;
  border-right: 1px solid rgba(255, 255, 255, 0.09);
}

.screen-sidebar b {
  margin-bottom: 22px;
  color: #777ac5;
  font-size: 13px;
}

.screen-sidebar i {
  width: 13px;
  height: 2px;
  background: rgba(255, 255, 255, 0.14);
}

.screen-sidebar i.active {
  background: rgb(var(--tool-rgb));
  box-shadow: 0 0 9px rgba(var(--tool-rgb), .62);
}

.product-screen.is-running .screen-sidebar i.active {
  animation: sidebar-channel-live 1.8s ease-in-out infinite;
}

@keyframes sidebar-channel-live {
  50% { width: 20px; background: rgb(var(--tool-rgb)); box-shadow: 0 0 18px rgba(var(--tool-rgb), .95); }
}

.screen-content {
  padding: 42px clamp(24px, 3.3vw, 48px);
}

.screen-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 54px;
}

.screen-title span,
.flow-label {
  display: block;
  margin-bottom: 7px;
  color: rgba(255, 255, 255, 0.34);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.screen-title h3 {
  margin: 0;
  font-size: clamp(25px, 2.4vw, 36px);
  line-height: 1.18;
  letter-spacing: -0.045em;
}

.screen-title > strong {
  padding: 7px 10px;
  color: rgb(var(--tool-rgb));
  border: 1px solid rgba(var(--tool-rgb), .34);
  border-radius: 100px;
  font-size: 9px;
  letter-spacing: 0.12em;
  transition: color 0.25s, opacity 0.25s, transform 0.25s;
}

.product-screen.is-running .screen-title > strong:not(.is-changing) {
  animation: runtime-status-live 2.2s ease-in-out infinite;
}

@keyframes runtime-status-live {
  0%, 100% { border-color: rgba(var(--tool-rgb), .24); box-shadow: 0 0 0 rgba(var(--tool-rgb), 0); }
  50% { color: #fff; border-color: rgba(var(--tool-rgb), .68); box-shadow: 0 0 20px rgba(var(--tool-rgb), .28), inset 0 0 14px rgba(var(--tool-rgb), .09); }
}

.screen-title > strong.is-changing {
  opacity: 0;
  transform: translateY(5px);
}

.screen-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  gap: 30px;
}

.flow-track {
  display: grid;
  align-items: center;
  margin: 34px 0 38px;
  grid-template-columns: 1fr 32px 1fr 32px 1fr;
}

.flow-track > div {
  position: relative;
  display: flex;
  min-height: 112px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.025);
  transition: border-color 0.3s, background-color 0.3s, box-shadow 0.35s,
    transform 0.35s var(--ease-out);
}

.flow-track > div::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  content: "";
  background: linear-gradient(90deg, transparent, #686bb4, transparent);
  opacity: 0;
  transform: translateX(-100%);
}

[data-screen="kora"][data-pipeline-step="0"] .flow-track > div:nth-child(1),
[data-screen="kora"][data-pipeline-step="1"] .flow-track > div:nth-child(3),
[data-screen="kora"][data-pipeline-step="2"] .flow-track > div:nth-child(5) {
  border-color: rgba(149, 152, 212, 0.5);
  background: rgba(119, 122, 197, 0.12);
  box-shadow: inset 0 0 24px rgba(119, 122, 197, 0.08);
  transform: translateY(-4px);
}

[data-screen="kora"][data-pipeline-step="0"] .flow-track > div:nth-child(1)::after,
[data-screen="kora"][data-pipeline-step="1"] .flow-track > div:nth-child(3)::after,
[data-screen="kora"][data-pipeline-step="2"] .flow-track > div:nth-child(5)::after {
  opacity: 1;
  animation: pipeline-sweep 1.7s ease-in-out infinite;
}

@keyframes pipeline-sweep {
  to { transform: translateX(100%); }
}

.flow-track > div:hover {
  border-color: rgba(119, 122, 197, 0.48);
  background: rgba(119, 122, 197, 0.06);
}

.flow-track > div i {
  display: grid;
  width: 23px;
  height: 23px;
  margin-bottom: 10px;
  place-items: center;
  color: #b8bae7;
  background: rgba(119, 122, 197, 0.12);
  border-radius: 50%;
  font-size: 7px;
  font-style: normal;
}

.flow-track > div b {
  font-size: 11px;
  font-weight: 650;
}

.flow-track > div small {
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.28);
  font-size: 8px;
  letter-spacing: 0.12em;
}

.flow-track > span {
  position: relative;
  height: 1px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.14);
}

.flow-track > span::after {
  position: absolute;
  inset: 0;
  content: "";
  background: #686bb4;
  animation: data-flow 2s linear infinite;
  transform: translateX(-100%);
}

@keyframes data-flow { to { transform: translateX(100%); } }

.flow-log {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.flow-log span {
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(255, 255, 255, 0.43);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9px;
}

.product-screen.is-running .flow-log span {
  animation: runtime-log-live 2.7s ease-in-out infinite;
}

.product-screen.is-running .flow-log span:nth-child(2) { animation-delay: -.9s; }
.product-screen.is-running .flow-log span:nth-child(3) { animation-delay: -1.8s; }

@keyframes runtime-log-live {
  0%, 100% { color: rgba(255,255,255,.34); transform: translateX(0); }
  45%, 58% { color: rgba(217,218,251,.82); transform: translateX(4px); }
}

.flow-log i {
  width: 5px;
  height: 5px;
  background: var(--lime);
  border-radius: 50%;
}

.kora-engine {
  position: relative;
  display: flex;
  min-height: 250px;
  padding: 16px 14px 13px;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid rgba(149, 152, 212, 0.18);
  background:
    radial-gradient(circle at 50% 45%, rgba(119, 122, 197, 0.2), transparent 43%),
    linear-gradient(155deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015));
  box-shadow: inset 0 0 45px rgba(119, 122, 197, 0.04);
}

.kora-engine::before {
  position: absolute;
  inset: 0;
  content: "";
  opacity: 0.22;
  background-image: linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 18px 18px;
  mask-image: linear-gradient(180deg, transparent, black 30%, black 72%, transparent);
}

.kora-engine::after {
  position: absolute;
  z-index: 6;
  top: -18%;
  right: -18%;
  left: -18%;
  height: 18%;
  content: "";
  background: linear-gradient(180deg, transparent, rgba(149, 152, 212, 0.2), transparent);
  filter: blur(2px);
  pointer-events: none;
  animation: engine-scan 4.8s ease-in-out infinite;
}

@keyframes engine-scan {
  0%, 12% { top: -18%; opacity: 0; }
  25% { opacity: 1; }
  72% { top: 102%; opacity: 0.65; }
  100% { top: 102%; opacity: 0; }
}

.engine-label {
  z-index: 2;
  color: rgba(255, 255, 255, 0.38);
  font-size: 8.5px;
  font-weight: 760;
  letter-spacing: 0.14em;
}

.engine-core {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 170px;
  flex: 1;
  place-items: center;
  perspective: 720px;
  transform-style: preserve-3d;
}

.engine-orbit {
  position: absolute;
  width: 132px;
  height: 132px;
  border: 1px solid rgba(149, 152, 212, 0.34);
  border-radius: 50%;
  box-shadow: 0 0 28px rgba(119, 122, 197, 0.08);
}

.engine-orbit::after {
  position: absolute;
  top: -3px;
  left: 50%;
  width: 6px;
  height: 6px;
  content: "";
  background: #9598d4;
  border-radius: 50%;
  box-shadow: 0 0 13px rgba(149, 152, 212, 0.85);
  transform: translateX(-50%);
}

.engine-orbit.orbit-a {
  animation: engine-spin 7s linear infinite;
  transform: rotateX(68deg) rotateZ(0deg);
}

.engine-orbit.orbit-b {
  width: 104px;
  height: 104px;
  animation: engine-spin-reverse 5.4s linear infinite;
  transform: rotateY(67deg) rotateZ(34deg);
}

.engine-orbit.orbit-c {
  width: 154px;
  height: 154px;
  border-color: rgba(149, 152, 212, 0.13);
  animation: engine-spin-wide 10s linear infinite;
  transform: rotateX(56deg) rotateY(18deg) rotateZ(74deg);
}

.kora-file {
  position: relative;
  z-index: 4;
  display: flex;
  width: 88px;
  height: 108px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.16), rgba(83, 86, 163, 0.22));
  box-shadow: 0 22px 45px rgba(0, 0, 0, 0.28), inset 0 0 22px rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  animation: kora-float 3.4s ease-in-out infinite;
  transform: rotateY(-12deg) rotateX(8deg);
}

.kora-file::before {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 23px;
  height: 23px;
  content: "";
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  border-left: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.kora-file small {
  margin-bottom: 7px;
  color: rgba(255, 255, 255, 0.42);
  font-size: 5px;
  letter-spacing: 0.14em;
  transition: opacity 0.2s, transform 0.2s;
}

.kora-file small.is-changing {
  opacity: 0;
  transform: translateY(4px);
}

.kora-file strong {
  color: var(--white);
  font-size: 16px;
  line-height: 1;
  letter-spacing: -0.03em;
}

.kora-file span {
  margin-top: 5px;
  color: #b4b6dc;
  font-size: 7px;
  font-weight: 750;
}

.engine-particle {
  position: absolute;
  z-index: 5;
  width: 5px;
  height: 5px;
  background: #9598d4;
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(149, 152, 212, 0.9);
  animation: engine-particle 2.5s ease-in-out infinite;
}

.particle-a { top: 23%; left: 18%; }
.particle-b { top: 34%; right: 12%; animation-delay: -0.8s; }
.particle-c { right: 28%; bottom: 14%; animation-delay: -1.6s; }

.engine-meta {
  z-index: 2;
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.engine-meta span {
  display: flex;
  flex-direction: column;
  color: rgba(255, 255, 255, 0.28);
  font-size: 5px;
  letter-spacing: 0.09em;
}

.engine-meta b {
  margin-top: 2px;
  color: #9598d4;
  font-size: 6px;
}

@keyframes engine-spin {
  to { transform: rotateX(68deg) rotateZ(360deg); }
}

@keyframes engine-spin-reverse {
  to { transform: rotateY(67deg) rotateZ(-326deg); }
}

@keyframes engine-spin-wide {
  to { transform: rotateX(56deg) rotateY(18deg) rotateZ(434deg); }
}

@keyframes kora-float {
  0%, 100% { transform: rotateY(-12deg) rotateX(8deg) translateY(4px); }
  50% { transform: rotateY(8deg) rotateX(-3deg) translateY(-7px); }
}

@keyframes engine-particle {
  0%, 100% { opacity: 0.25; transform: scale(0.65); }
  50% { opacity: 1; transform: scale(1.35); }
}

.chem-search {
  display: flex;
  height: 52px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
  padding: 0 18px;
  color: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.025);
  font-size: 10px;
}

.chem-search i {
  position: relative;
  width: 15px;
  height: 15px;
  border: 1px solid #686bb4;
  border-radius: 50%;
}

.chem-search i::after {
  position: absolute;
  right: -4px;
  bottom: -3px;
  width: 6px;
  height: 1px;
  content: "";
  background: #686bb4;
  transform: rotate(45deg);
}

.chem-table {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.table-row {
  display: grid;
  min-height: 66px;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.62);
  font-size: 10px;
  grid-template-columns: 1.3fr 1fr 0.8fr;
}

.table-row span:first-child {
  display: flex;
  align-items: center;
  gap: 9px;
}

.table-row span i {
  width: 5px;
  height: 5px;
  background: #686bb4;
  border-radius: 50%;
}

.table-head {
  min-height: 34px;
  color: rgba(255, 255, 255, 0.27);
  font-size: 8.5px;
  letter-spacing: 0.12em;
}

.module-heading {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.34);
  font-size: 8px;
  font-weight: 760;
  letter-spacing: 0.12em;
}

.module-heading b {
  color: #9598d4;
  font-size: 6px;
  font-weight: 760;
}

.risk-dashboard,
.strength-dashboard {
  display: grid;
  min-height: 310px;
  grid-template-columns: minmax(0, 1.12fr) minmax(190px, 0.88fr);
  gap: 20px;
}

.risk-matrix-panel,
.risk-scenario,
.vessel-viewport,
.strength-readout {
  position: relative;
  overflow: hidden;
  padding: 17px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
}

.risk-matrix-panel::before,
.vessel-viewport::before {
  position: absolute;
  inset: 0;
  content: "";
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 20px 20px;
  mask-image: linear-gradient(155deg, transparent, #000 38%, #000 78%, transparent);
}

.risk-matrix-panel::after {
  position: absolute;
  z-index: 2;
  top: 38px;
  bottom: 31px;
  left: 16px;
  width: 22%;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(149, 152, 212, 0.16), transparent);
  filter: blur(2px);
  animation: risk-scan 4.8s ease-in-out infinite;
  pointer-events: none;
}

.risk-matrix {
  position: relative;
  z-index: 1;
  display: grid;
  max-width: 320px;
  margin: 28px auto 18px;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
}

.risk-matrix i {
  position: relative;
  aspect-ratio: 1.42;
  overflow: hidden;
  background: rgba(119, 122, 197, 0.08);
  border: 1px solid rgba(149, 152, 212, 0.13);
}

.risk-matrix i:nth-child(n + 6):nth-child(-n + 10),
.risk-matrix i:nth-child(n + 12):nth-child(-n + 15) { background: rgba(119, 122, 197, 0.13); }
.risk-matrix i:nth-child(n + 16):nth-child(-n + 20) { background: rgba(83, 86, 163, 0.2); }
.risk-matrix i:nth-child(n + 21) { background: rgba(83, 86, 163, 0.3); }

.risk-matrix i:nth-child(9),
.risk-matrix i:nth-child(14),
.risk-matrix i:nth-child(18),
.risk-matrix i:nth-child(22) {
  border-color: rgba(183, 185, 235, 0.68);
  box-shadow: inset 0 0 18px rgba(149, 152, 212, 0.24), 0 0 13px rgba(119, 122, 197, 0.12);
  animation: risk-cell-pulse 3.2s ease-in-out infinite;
}

.risk-matrix i:nth-child(14) { animation-delay: -0.8s; }
.risk-matrix i:nth-child(18) { animation-delay: -1.6s; }
.risk-matrix i:nth-child(22) { animation-delay: -2.4s; }

.risk-axis {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.25);
  font-size: 5.5px;
  letter-spacing: 0.11em;
}

.risk-scenario {
  display: flex;
  flex-direction: column;
}

.risk-orbit {
  position: relative;
  display: grid;
  min-height: 165px;
  flex: 1;
  place-items: center;
}

.risk-orbit > i {
  position: absolute;
  width: 128px;
  height: 128px;
  border: 1px solid rgba(149, 152, 212, 0.23);
  border-radius: 50%;
  animation: risk-orbit-spin 8s linear infinite;
}

.risk-orbit > i:nth-child(2) {
  width: 100px;
  height: 100px;
  border-style: dashed;
  animation-direction: reverse;
  animation-duration: 6s;
}

.risk-orbit > i:nth-child(3) {
  width: 148px;
  height: 62px;
  animation-duration: 10s;
  transform: rotate(26deg);
}

.risk-orbit > i::after {
  position: absolute;
  top: -3px;
  left: 50%;
  width: 6px;
  height: 6px;
  content: "";
  background: #a7a9e3;
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(149, 152, 212, 0.9);
}

.risk-orbit > div {
  position: relative;
  z-index: 2;
  display: flex;
  width: 86px;
  height: 86px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: radial-gradient(circle, rgba(83, 86, 163, 0.38), rgba(38, 39, 47, 0.82));
  border: 1px solid rgba(183, 185, 235, 0.3);
  border-radius: 50%;
  box-shadow: 0 0 34px rgba(83, 86, 163, 0.23);
  animation: risk-core-breathe 3.4s ease-in-out infinite;
}

.risk-orbit small,
.risk-orbit span {
  color: rgba(255, 255, 255, 0.35);
  font-size: 5px;
  letter-spacing: 0.11em;
}

.risk-orbit strong { margin: 3px 0; font-size: 22px; line-height: 1; }
.risk-orbit span { color: #b8bae7; }

.risk-readout {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.risk-readout > span {
  display: grid;
  align-items: center;
  grid-template-columns: 66px 1fr 38px;
  gap: 8px;
}

.risk-readout b,
.risk-readout small {
  color: rgba(255, 255, 255, 0.35);
  font-size: 5.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.risk-readout small { color: #a7a9e3; text-align: right; }

.risk-readout i {
  position: relative;
  height: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}

.risk-readout i::after {
  position: absolute;
  inset: 0;
  width: var(--risk-level);
  content: "";
  background: linear-gradient(90deg, #5356a3, #a7a9e3);
  box-shadow: 0 0 8px rgba(119, 122, 197, 0.65);
  animation: metric-load 2.2s var(--ease-out) both;
  transform-origin: left;
}

.risk-readout span:nth-child(1) i { --risk-level: 42%; }
.risk-readout span:nth-child(2) i { --risk-level: 68%; }
.risk-readout span:nth-child(3) i { --risk-level: 86%; }

@keyframes risk-scan {
  0%, 8% { left: 2%; opacity: 0; }
  20% { opacity: 1; }
  78% { left: 78%; opacity: 0.8; }
  100% { left: 78%; opacity: 0; }
}

@keyframes risk-cell-pulse {
  50% { background: rgba(119, 122, 197, 0.34); transform: scale(0.92); }
}

@keyframes risk-orbit-spin { to { transform: rotate(360deg); } }
@keyframes risk-core-breathe { 50% { box-shadow: 0 0 52px rgba(83, 86, 163, 0.38); transform: scale(1.04); } }

.strength-dashboard {
  grid-template-columns: minmax(0, 1.18fr) minmax(190px, 0.82fr);
}

.vessel-viewport {
  min-height: 310px;
}

.vessel-model {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 252px;
  margin-top: 2px;
  overflow: visible;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vessel-shell {
  fill: rgba(119, 122, 197, 0.06);
  stroke: rgba(255, 255, 255, 0.42);
  stroke-width: 1.4;
}

.vessel-axis,
.vessel-ring,
.vessel-nozzle {
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 1;
  stroke-dasharray: 4 6;
}

.stress-path {
  stroke: url(#stress-gradient);
  stroke-width: 2.4;
  stroke-dasharray: 8 10;
  filter: drop-shadow(0 0 5px rgba(119, 122, 197, 0.72));
  animation: stress-flow 2.8s linear infinite;
}

.stress-b { animation-duration: 2.1s; animation-direction: reverse; }
.stress-c { animation-duration: 3.4s; }

.stress-node circle:first-child {
  fill: none;
  stroke: rgba(149, 152, 212, 0.38);
  animation: stress-node-wave 2.2s ease-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.stress-node circle:last-child { fill: #d9dafb; stroke: none; filter: drop-shadow(0 0 5px #777ac5); }
.node-b circle:first-child { animation-delay: -1.1s; }

.vessel-scan {
  position: absolute;
  z-index: 4;
  top: 44px;
  right: 14%;
  left: 14%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #d9dafb, transparent);
  box-shadow: 0 0 18px rgba(119, 122, 197, 0.75);
  animation: vessel-scan 4.2s ease-in-out infinite;
}

.strength-readout {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.formula-card {
  display: flex;
  min-height: 86px;
  padding: 13px;
  justify-content: center;
  flex-direction: column;
  border: 1px solid rgba(149, 152, 212, 0.18);
  background: rgba(119, 122, 197, 0.06);
}

.formula-card span,
.formula-card small,
.strength-metric > span {
  color: rgba(255, 255, 255, 0.34);
  font-size: 5.5px;
  letter-spacing: 0.11em;
}

.formula-card strong {
  margin: 7px 0 4px;
  color: #d9dafb;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 16px;
  font-weight: 600;
}

.strength-metric {
  display: grid;
  align-items: end;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
}

.strength-metric strong { font-size: 17px; font-weight: 620; }
.strength-metric strong small { color: rgba(255, 255, 255, 0.35); font-size: 7px; }

.strength-metric > i {
  position: relative;
  height: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  grid-column: 1 / -1;
}

.strength-metric > i b {
  display: block;
  width: var(--metric);
  height: 100%;
  background: linear-gradient(90deg, #5356a3, #a7a9e3);
  animation: metric-load 2.4s var(--ease-out) both;
  transform-origin: left;
}

.strength-metric:nth-child(2) > i b { --metric: 64%; }
.strength-metric:nth-child(3) > i b { --metric: 78%; }
.strength-metric:nth-child(4) > i b { --metric: 86%; }

@keyframes stress-flow { to { stroke-dashoffset: -180; } }
@keyframes stress-node-wave { to { opacity: 0; transform: scale(1.8); } }
@keyframes vessel-scan {
  0%, 10% { top: 44px; opacity: 0; }
  22% { opacity: 1; }
  80% { top: calc(100% - 26px); opacity: 0.8; }
  100% { top: calc(100% - 26px); opacity: 0; }
}
@keyframes metric-load { from { transform: scaleX(0); } }

.field-map {
  position: relative;
  min-height: 330px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: radial-gradient(circle at 50% 40%, rgba(83, 86, 163, 0.16), transparent 52%);
}

.map-grid {
  position: absolute;
  inset: 0;
  opacity: 0.38;
  background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  animation: field-grid-drift 12s linear infinite;
}

.map-line {
  position: absolute;
  height: 1px;
  overflow: hidden;
  background: linear-gradient(90deg, transparent, #686bb4, transparent);
  transform-origin: left;
}

.map-line::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, transparent, #d9dafb, transparent);
  animation: field-data-flow 2.4s linear infinite;
  transform: translateX(-100%);
}

.line-b::after { animation-delay: -1.2s; }

.line-a { top: 38%; left: 12%; width: 60%; transform: rotate(14deg); }
.line-b { top: 72%; left: 27%; width: 58%; transform: rotate(-31deg); }

.map-point {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 7px;
  letter-spacing: 0.08em;
}

.map-point i {
  position: relative;
  width: 10px;
  height: 10px;
  background: #686bb4;
  border: 2px solid #30313b;
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(119, 122, 197, 0.14);
}

.map-point i::after {
  position: absolute;
  inset: -7px;
  content: "";
  border: 1px solid rgba(149, 152, 212, 0.38);
  border-radius: 50%;
  animation: field-point-pulse 2.6s ease-out infinite;
}

.point-b i::after { animation-delay: -0.85s; }
.point-c i::after { animation-delay: -1.7s; }

.point-a { top: 29%; left: 18%; }
.point-b { top: 47%; right: 25%; }
.point-c { bottom: 23%; left: 41%; }

.field-scan {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 8%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(217, 218, 251, 0.95), transparent);
  box-shadow: 0 0 24px rgba(119, 122, 197, 0.5);
  animation: field-scan 6s ease-in-out infinite;
}

.map-result {
  position: absolute;
  right: 20px;
  bottom: 18px;
  display: flex;
  min-width: 180px;
  padding: 14px;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(32, 33, 40, 0.72);
  backdrop-filter: blur(8px);
}

.map-result span,
.map-result small {
  color: rgba(255, 255, 255, 0.32);
  font-size: 6px;
  letter-spacing: 0.12em;
}

.map-result b {
  margin: 7px 0;
  font-size: 11px;
}

@keyframes field-grid-drift { to { background-position: 28px -28px; } }
@keyframes field-data-flow { to { transform: translateX(100%); } }
@keyframes field-point-pulse { to { opacity: 0; transform: scale(1.8); } }
@keyframes field-scan {
  0%, 10% { left: 6%; opacity: 0; }
  22% { opacity: 0.9; }
  82% { left: 94%; opacity: 0.7; }
  100% { left: 94%; opacity: 0; }
}

.automation-dashboard {
  position: relative;
  min-height: 310px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(circle at 50% 72%, rgba(83, 86, 163, 0.2), transparent 35%),
    rgba(255, 255, 255, 0.012);
}

.automation-dashboard::before {
  position: absolute;
  inset: 0;
  content: "";
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(circle at 50% 55%, #000, transparent 74%);
}

.automation-pipeline {
  position: relative;
  z-index: 2;
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 26px 1fr 26px 1fr;
  gap: 8px;
}

.automation-module {
  position: relative;
  display: flex;
  min-height: 132px;
  padding: 14px 12px 12px;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: rgba(255, 255, 255, 0.025);
  animation: automation-module-focus 7.2s var(--ease-out) infinite;
}

.automation-module::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  content: "";
  background: linear-gradient(90deg, transparent, #9598d4, transparent);
  animation: automation-module-line 2.1s linear infinite;
  transform: translateX(-100%);
}

.module-msds { animation-delay: -4.8s; }
.module-hazard { animation-delay: -2.4s; }
.module-msds::after { animation-delay: -0.7s; }
.module-hazard::after { animation-delay: -1.4s; }

.automation-module > span {
  position: absolute;
  top: 9px;
  left: 10px;
  color: rgba(255, 255, 255, 0.27);
  font-size: 6px;
}

.automation-module svg {
  width: 34px;
  height: 34px;
  margin-bottom: 10px;
  fill: none;
  stroke: #9598d4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.2;
  filter: drop-shadow(0 0 7px rgba(119, 122, 197, 0.34));
}

.automation-module b {
  font-size: 8px;
  font-weight: 720;
  letter-spacing: 0.04em;
  text-align: center;
}

.automation-module small {
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.3);
  font-size: 5.5px;
  letter-spacing: 0.1em;
}

.automation-link {
  position: relative;
  height: 1px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
}

.automation-link::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, transparent, #d9dafb, transparent);
  animation: automation-link-flow 1.8s linear infinite;
  transform: translateX(-100%);
}

.automation-console-grid {
  position: relative;
  z-index: 2;
  display: grid;
  align-items: center;
  margin-top: 18px;
  grid-template-columns: 112px 1fr;
  gap: 22px;
}

.automation-core {
  position: relative;
  display: grid;
  width: 94px;
  height: 94px;
  margin-inline: auto;
  place-items: center;
}

.automation-core i {
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(149, 152, 212, 0.3);
  border-radius: 50%;
  animation: automation-core-spin 7s linear infinite;
}

.automation-core i:nth-child(2) { inset: 0; border-style: dashed; animation-direction: reverse; animation-duration: 9s; }
.automation-core i:nth-child(3) { inset: 20px; animation-duration: 4.5s; }

.automation-core i::after {
  position: absolute;
  top: -3px;
  left: 50%;
  width: 6px;
  height: 6px;
  content: "";
  background: #a7a9e3;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(149, 152, 212, 0.9);
}

.automation-core strong { z-index: 2; color: #d9dafb; font-size: 17px; }
.automation-core span { position: absolute; bottom: -4px; color: rgba(255,255,255,.3); font-size: 5px; letter-spacing: .1em; }

.automation-log {
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.automation-log > span {
  display: grid;
  min-height: 30px;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.46);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 6.5px;
  grid-template-columns: 24px 1fr auto;
  gap: 7px;
}

.automation-log b { color: #9598d4; font-size: 6px; }
.automation-log small { color: rgba(217, 218, 251, 0.72); font-size: 5.5px; }

@keyframes automation-module-focus {
  0%, 25%, 100% { border-color: rgba(255, 255, 255, 0.11); background: rgba(255, 255, 255, 0.025); transform: translateY(0); }
  8%, 17% { border-color: rgba(149, 152, 212, 0.5); background: rgba(119, 122, 197, 0.11); box-shadow: 0 12px 30px rgba(0,0,0,.14); transform: translateY(-5px); }
}
@keyframes automation-module-line { to { transform: translateX(100%); } }
@keyframes automation-link-flow { to { transform: translateX(100%); } }
@keyframes automation-core-spin { to { transform: rotate(360deg); } }

/* Process */
.process {
  background: var(--paper-deep);
}

.process-track {
  position: relative;
  border-top: 1px solid var(--line);
}

.process-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  overflow: hidden;
}

.process-progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--purple);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

.process-step {
  display: grid;
  min-height: 310px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  grid-template-columns: 100px minmax(250px, 0.7fr) 1fr;
  gap: 60px;
}

.step-number {
  align-self: start;
  padding-top: 38px;
  color: var(--purple);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.step-copy {
  max-width: 580px;
}

.step-copy > span {
  display: block;
  margin-bottom: 13px;
  color: var(--purple);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.step-copy h3 {
  margin-bottom: 18px;
  font-size: clamp(26px, 2.4vw, 36px);
  font-weight: 690;
  line-height: 1.3;
  letter-spacing: -0.04em;
}

.step-copy p {
  max-width: 520px;
  margin-bottom: 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.85;
}

.step-visual {
  position: relative;
  width: 230px;
  height: 150px;
  margin-inline: auto;
}

.visual-understand {
  display: flex;
  align-items: center;
  justify-content: center;
}

.visual-understand span {
  position: absolute;
  width: 122px;
  height: 122px;
  border: 1px solid rgba(83, 86, 163, 0.18);
  border-radius: 50%;
}

.visual-understand span:nth-child(2) { width: 82px; height: 82px; }
.visual-understand span:nth-child(3) { width: 42px; height: 42px; background: rgba(83, 86, 163, 0.08); }
.visual-understand i { width: 7px; height: 7px; background: var(--purple); border-radius: 50%; box-shadow: 0 0 0 7px rgba(83, 86, 163, 0.1); }

.visual-map span {
  position: absolute;
  width: 72px;
  height: 54px;
  border: 1px solid rgba(83, 86, 163, 0.25);
  background: rgba(255, 255, 255, 0.45);
}

.visual-map span:nth-child(1) { top: 15px; left: 10px; }
.visual-map span:nth-child(2) { top: 46px; left: 79px; border-color: var(--purple); }
.visual-map span:nth-child(3) { right: 10px; bottom: 12px; }
.visual-map i { position: absolute; width: 48px; height: 1px; background: var(--purple); transform: rotate(32deg); }
.visual-map i:nth-of-type(1) { top: 56px; left: 55px; }
.visual-map i:nth-of-type(2) { right: 54px; bottom: 51px; }

.visual-verify svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: rgba(83, 86, 163, 0.25);
  stroke-width: 1.4;
}

.visual-verify svg path { stroke: var(--purple); stroke-dasharray: 3 4; }
.visual-verify svg circle { fill: var(--paper-deep); stroke: var(--purple); }

.visual-operate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.visual-operate > div {
  display: flex;
  width: 54px;
  height: 90px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 8px;
  flex-direction: column;
  border: 1px solid rgba(83, 86, 163, 0.2);
  background: rgba(255, 255, 255, 0.5);
}

.visual-operate > div:nth-child(2) { height: 120px; border-color: var(--purple); }
.visual-operate span { width: 18px; height: 2px; background: rgba(83, 86, 163, 0.28); }
.visual-operate i { width: 9px; height: 9px; background: var(--purple); border-radius: 50%; }

/* Difference */
.difference {
  position: relative;
  min-height: 860px;
  padding: 170px 0 150px;
  overflow: hidden;
  color: var(--white);
  background: #292a32;
}

.difference-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(83, 86, 163, 0.52), transparent 35%),
    radial-gradient(circle at 10% 100%, rgba(61, 64, 126, 0.32), transparent 37%),
    linear-gradient(145deg, #22232a, #333540);
}

.difference-bg::before,
.difference-bg::after {
  position: absolute;
  top: -25%;
  right: -10%;
  width: 800px;
  height: 800px;
  content: "";
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 50%;
  box-shadow: 0 0 0 80px rgba(255, 255, 255, 0.015), 0 0 0 160px rgba(255, 255, 255, 0.01);
}

.difference-bg::after {
  top: auto;
  right: auto;
  bottom: -55%;
  left: -20%;
  width: 650px;
  height: 650px;
}

.difference-inner {
  z-index: 2;
}

.difference h2 {
  max-width: 1380px;
  margin-bottom: 100px;
  font-size: clamp(44px, 4.7vw, 72px);
  line-height: 1.12;
}

.difference h2 em {
  color: #c9caee;
}

.difference-title-line {
  display: block;
  width: max-content;
  max-width: 100%;
}

.difference-title-line b {
  font: inherit;
  white-space: nowrap;
}

.difference-title-line:nth-child(2) {
  margin-top: 0.13em;
  margin-left: clamp(22px, 4.5vw, 72px);
  font-size: 0.9em;
  white-space: nowrap;
}

.difference-grid {
  display: grid;
  border-top: 1px solid rgba(255, 255, 255, 0.17);
  grid-template-columns: repeat(3, 1fr);
}

.difference-grid article {
  min-height: 260px;
  padding: 34px 36px 20px 0;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.difference-grid article + article {
  padding-left: 36px;
}

.difference-grid article:last-child {
  border-right: 0;
}

.difference-grid article > span {
  display: block;
  margin-bottom: 46px;
  color: rgba(255, 255, 255, 0.38);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.difference-grid h3 {
  margin-bottom: 19px;
  font-size: 26px;
  font-weight: 630;
  line-height: 1.42;
  letter-spacing: -0.035em;
}

.difference-grid p {
  max-width: 320px;
  margin: 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  line-height: 1.8;
}

/* Insights */
.insight-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 80px;
}

.insight-list {
  border-top: 1px solid var(--ink);
}

.insight-item {
  position: relative;
  display: grid;
  min-height: 190px;
  align-items: center;
  padding: 30px 80px 30px 0;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  grid-template-columns: 180px 1.3fr 0.85fr;
  gap: 45px;
  transition: padding-left 0.45s var(--ease), background-color 0.35s;
}

.insight-item::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background: var(--purple-wash);
  transform: translateX(-101%);
  transition: transform 0.55s var(--ease-out);
}

.insight-item:hover {
  padding-left: 24px;
}

.insight-item:hover::before {
  transform: translateX(0);
}

.insight-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.insight-meta span {
  color: var(--purple);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.insight-meta time {
  color: #8e909a;
  font-size: 10px;
}

.insight-item h3 {
  margin: 0;
  font-size: clamp(20px, 1.7vw, 27px);
  font-weight: 670;
  line-height: 1.45;
  letter-spacing: -0.035em;
}

.insight-item > p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.8;
}

.insight-arrow {
  position: absolute;
  top: 50%;
  right: 4px;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 17px;
  transform: translateY(-50%);
  transition: color 0.3s, background-color 0.3s, transform 0.35s var(--ease);
}

.insight-item:hover .insight-arrow {
  color: var(--white);
  background: var(--purple);
  border-color: var(--purple);
  transform: translateY(-50%) rotate(45deg);
}

/* Response centers */
.centers {
  position: relative;
  overflow: hidden;
  background: var(--paper-deep);
}

.centers::before {
  position: absolute;
  top: -260px;
  right: -190px;
  width: 760px;
  height: 760px;
  content: "";
  background: radial-gradient(circle, rgba(83, 86, 163, 0.13), transparent 68%);
  pointer-events: none;
}

.centers-heading {
  display: grid;
  align-items: end;
  margin-bottom: 78px;
  grid-template-columns: 1.05fr 0.72fr;
  gap: clamp(70px, 10vw, 160px);
}

.centers-copy h2 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(44px, 4.45vw, 68px);
  font-weight: 710;
  line-height: 1.24;
  letter-spacing: -0.052em;
}

.centers-summary {
  padding-top: 24px;
  border-top: 1px solid rgba(70, 71, 78, 0.28);
}

.centers-summary > span {
  display: block;
  margin-bottom: 18px;
  color: var(--purple);
  font-size: 10px;
  font-weight: 790;
  letter-spacing: 0.16em;
}

.centers-summary strong {
  display: block;
  margin-bottom: 13px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 680;
  letter-spacing: -0.025em;
}

.centers-summary p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.85;
}

.centers-atlas {
  position: relative;
  min-height: 800px;
  overflow: hidden;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.09);
  background:
    radial-gradient(circle at 50% 48%, rgba(83, 86, 163, 0.3), transparent 34%),
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(145deg, #24252d, #1d1e25 62%, #292b36);
  background-size: auto, 36px 36px, 36px 36px, auto;
  box-shadow: 0 48px 110px rgba(43, 44, 50, 0.18);
  isolation: isolate;
}

.centers-atlas::before,
.centers-atlas::after {
  position: absolute;
  z-index: -1;
  content: "";
  border: 1px solid rgba(149, 152, 212, 0.08);
  border-radius: 50%;
}

.centers-atlas::before {
  top: -38%;
  left: 50%;
  width: 720px;
  height: 720px;
  box-shadow: 0 0 0 76px rgba(149, 152, 212, 0.025),
    0 0 0 152px rgba(149, 152, 212, 0.015);
  transform: translateX(-50%);
}

.centers-atlas::after {
  right: -210px;
  bottom: -300px;
  width: 560px;
  height: 560px;
}

.atlas-topline {
  position: absolute;
  z-index: 7;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  height: 60px;
  align-items: center;
  justify-content: space-between;
  padding: 0 26px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.38);
  font-size: 8.5px;
  font-weight: 760;
  letter-spacing: 0.15em;
}

.atlas-topline i {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.55);
  font-style: normal;
}

.atlas-view-toggles {
  display: flex;
  align-items: center;
  gap: 7px;
}

.atlas-layer-toggle {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  color: rgba(232, 233, 246, .54);
  background: rgba(95, 98, 122, .08);
  border: 1px solid rgba(178, 181, 211, .22);
  border-radius: 100px;
  font-family: inherit;
  font-size: 8.5px;
  font-weight: 820;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: color 0.3s, background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.atlas-layer-toggle i {
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  background: #85889e;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(149, 152, 180, .08);
}

.atlas-layer-toggle:is(:hover, :focus-visible) {
  color: #ffffff;
  background: rgba(115, 118, 154, .18);
  border-color: rgba(195, 198, 231, .58);
  outline: none;
}

.portfolio-toggle[aria-pressed="true"] {
  color: #ffffff;
  background: rgba(92, 173, 68, .2);
  border-color: rgba(184, 245, 160, .86);
  box-shadow: 0 0 28px rgba(142, 225, 112, .32), inset 0 0 14px rgba(142,225,112,.08);
}

.portfolio-all-toggle[aria-pressed="true"] {
  color: #ffffff;
  background: linear-gradient(120deg, rgba(129, 92, 246, .24), rgba(205, 87, 255, .18));
  border-color: rgba(206, 163, 255, .72);
  box-shadow: 0 0 18px rgba(183, 92, 255, .28), inset 0 0 10px rgba(220, 190, 255, .08);
}

.portfolio-all-toggle[aria-pressed="true"] i {
  background: #dfb2ff;
  box-shadow: 0 0 0 4px rgba(203, 129, 255, .12), 0 0 12px rgba(211, 145, 255, .9);
  animation: portfolio-all-pulse 1.8s ease-in-out infinite;
}

@keyframes portfolio-all-pulse {
  0%, 100% { opacity: .68; transform: scale(.82); }
  50% { opacity: 1; transform: scale(1.22); }
}

.portfolio-toggle[aria-pressed="true"] i {
  background: #a8ef8e;
  box-shadow: 0 0 0 4px rgba(168,239,142,.1), 0 0 14px rgba(168,239,142,.88);
  animation: portfolio-beacon 1.7s ease-in-out infinite;
}

.center-toggle[aria-pressed="true"] {
  color: #ffffff;
  background: rgba(99, 102, 190, .2);
  border-color: rgba(183, 185, 248, .82);
  box-shadow: 0 0 28px rgba(119, 122, 217, .3), inset 0 0 14px rgba(149,152,212,.1);
}

.center-toggle[aria-pressed="true"] i {
  background: #b8baf6;
  box-shadow: 0 0 0 4px rgba(149,152,212,.12), 0 0 14px rgba(183,185,248,.92);
  animation: portfolio-beacon 1.9s ease-in-out infinite;
}

@keyframes portfolio-beacon {
  0%, 100% { opacity: .72; transform: scale(.78); }
  50% { opacity: 1; transform: scale(1.18); }
}

.expertise-law-tabs {
  display: grid;
  margin-bottom: 18px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  grid-template-columns: repeat(3, 1fr);
}

.expertise-law-tabs button {
  position: relative;
  display: grid;
  min-height: 92px;
  padding: 19px 25px 17px;
  color: #858690;
  background: rgba(251, 251, 252, .52);
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: color .3s, background-color .35s, box-shadow .35s;
}

.expertise-law-tabs button::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  content: "";
  background: var(--purple);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease-out);
}

.expertise-law-tabs button span {
  position: absolute;
  top: 19px;
  right: 22px;
  color: #a4a5ad;
  font-size: 9px;
  font-weight: 750;
}

.expertise-law-tabs button b {
  color: currentColor;
  font-size: 21px;
  font-weight: 730;
  letter-spacing: -.035em;
}

.expertise-law-tabs button small {
  margin-top: 7px;
  font-size: 8px;
  font-weight: 750;
  letter-spacing: .12em;
  opacity: .55;
}

.expertise-law-tabs button:is(:hover, :focus-visible) {
  color: var(--ink);
  background: #fff;
  outline: none;
}

.expertise-law-tabs button.is-active {
  color: #fff;
  background: var(--purple);
  box-shadow: 0 18px 42px rgba(83, 86, 163, .16);
}

.expertise-law-tabs button.is-active::after { transform: scaleX(1); }
.expertise-law-tabs button.is-active span { color: rgba(255,255,255,.58); }

.expertise-grid.is-changing {
  opacity: 0;
  transform: translateY(12px);
}

.expertise-grid {
  transition: opacity .28s ease, transform .38s var(--ease-out);
}

.atlas-topline b {
  width: 6px;
  height: 6px;
  background: #9598d4;
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(149, 152, 212, 0.08), 0 0 14px rgba(149, 152, 212, 0.65);
  animation: live-status 2s ease-in-out infinite;
}

@keyframes live-status {
  50% { opacity: 0.38; transform: scale(0.72); }
}

.atlas-map {
  position: absolute;
  z-index: 2;
  top: 62px;
  bottom: 54px;
  left: 41%;
  width: min(calc(100% - 32px), 1160px);
  transform: translateX(-50%);
}

.korea-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  overflow: visible;
}

.korea-boundary-layer {
  pointer-events: none;
  filter: drop-shadow(0 18px 38px rgba(0, 0, 0, 0.28));
  transform-box: fill-box;
  transform-origin: center;
}

.facility-density-layer {
  display: none;
  pointer-events: none;
}

.response-base-layer,
.response-region-layer { pointer-events: none; }

.portfolio-density-layer {
  pointer-events: none;
  opacity: 0;
  transition: opacity .45s ease;
}

.centers-atlas.portfolio-all-view .portfolio-density-layer { opacity: 1; }

.portfolio-density-region {
  opacity: var(--density-level, .55);
  mix-blend-mode: screen;
}

.portfolio-density-point {
  fill: #ff526c;
  opacity: .52;
  transform-box: fill-box;
  transform-origin: center;
}

.portfolio-density-point.is-signal {
  fill: #ff9aa8;
  opacity: .92;
  filter: drop-shadow(0 0 2px rgba(255, 48, 83, .9));
  animation: portfolio-density-pulse 2.8s ease-in-out var(--density-delay, 0s) infinite;
}

@keyframes portfolio-density-pulse {
  0%, 100% { opacity: .48; transform: scale(.78); }
  50% { opacity: 1; transform: scale(1.4); }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-density-point.is-signal { animation: none; }
}

.response-base-layer {
  opacity: 0;
  transition: opacity .4s ease;
}

.centers-atlas.portfolio-mode .response-base-layer { opacity: 1; }

.response-base-region {
  fill: rgba(185, 188, 207, .035) !important;
  stroke: rgba(213, 216, 232, .42) !important;
  stroke-width: 1.05 !important;
  vector-effect: non-scaling-stroke;
}

.base-center-region {
  fill: rgba(185, 188, 207, .05) !important;
  stroke: rgba(220, 222, 239, .56) !important;
  stroke-width: 1.35 !important;
  stroke-dasharray: 5 3;
}

.response-region {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity .35s ease, filter .45s ease;
}

.response-region use,
.response-region path {
  fill: rgba(191, 194, 211, .07) !important;
  stroke: rgba(211, 214, 231, .68) !important;
  stroke-width: 1.35 !important;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 3px rgba(190, 193, 215, .18));
}

.center-response-region use {
  fill: rgba(191, 194, 211, .09) !important;
  stroke: rgba(211, 214, 231, .72) !important;
  stroke-width: 1.7 !important;
  stroke-dasharray: 6 2;
  filter: drop-shadow(0 0 3px rgba(190, 193, 215, .2));
}

.centers-atlas.portfolio-mode .response-region.is-active {
  opacity: 1;
  animation: response-region-breathe 1.8s ease-in-out infinite;
}

.centers-atlas.portfolio-mode .response-region:not(.is-active) { opacity: 0; }

.centers-atlas.portfolio-mode .office-response-region.is-active use {
  fill: rgba(154, 245, 120, .16) !important;
  stroke: #b0ff92 !important;
  stroke-width: 2.2 !important;
  filter: url(#response-region-glow);
}

.centers-atlas.portfolio-mode .center-response-region.is-active use {
  fill: rgba(217, 70, 239, .25) !important;
  stroke: #f0abfc !important;
  stroke-width: 3 !important;
  filter: drop-shadow(0 0 5px rgba(217,70,239,.9)) drop-shadow(0 0 12px rgba(126,34,206,.65));
}

.centers-atlas.portfolio-mode .center-response-region.is-active {
  animation: center-region-breathe 1.45s ease-in-out infinite;
}

@keyframes response-region-breathe {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(167,244,137,.65)); }
  50% { filter: drop-shadow(0 0 12px rgba(167,244,137,1)); }
}

.centers-atlas.is-visible .facility-density-layer { animation: none; }

.facility-point {
  fill: #b4b6dc;
  opacity: 0.58;
  filter: url(#facility-glow);
  transform-box: fill-box;
  transform-origin: center;
  animation: facility-point-pulse 4.2s ease-in-out infinite;
}

.facility-point.major {
  fill: #f0f0ff;
  opacity: 0.84;
}

.facility-point:nth-child(3n) { animation-delay: -1.2s; }
.facility-point:nth-child(4n) { animation-delay: -2.4s; }
.facility-point:nth-child(5n) { animation-delay: -3.1s; }

.facility-halo {
  fill: rgba(119, 122, 197, 0.05);
  stroke: rgba(149, 152, 212, 0.16);
  stroke-width: 0.8;
  transform-box: fill-box;
  transform-origin: center;
  animation: facility-cluster-breathe 5.6s ease-in-out infinite;
}

.facility-halo.strong {
  fill: rgba(119, 122, 197, 0.055);
  stroke: rgba(183, 185, 235, 0.17);
}

@keyframes facility-layer-in { to { opacity: 1; } }
@keyframes facility-point-pulse {
  0%, 100% { opacity: 0.34; transform: scale(0.78); }
  48% { opacity: 0.88; transform: scale(1.22); }
}
@keyframes facility-cluster-breathe {
  0%, 100% { opacity: 0.4; transform: scale(0.88); }
  50% { opacity: 1; transform: scale(1.08); }
}

.region-hotspots {
  position: absolute;
  z-index: 8;
  inset: 0;
  pointer-events: none;
}

.region-hotspot {
  position: absolute;
  top: var(--region-y);
  left: calc(50% - 515px);
  display: inline-flex;
  width: 196px;
  min-height: 36px;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding: 6px 10px;
  color: rgba(255, 255, 255, 0.74);
  background: rgba(29, 30, 39, 0.86);
  border: 1px solid rgba(149, 152, 212, 0.26);
  border-radius: 100px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
  opacity: 0;
  font-family: inherit;
  font-size: 8px;
  font-weight: 680;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: none;
  transform: translateY(-50%) scale(0.72);
  transform-origin: left center;
  transition: opacity 0.35s ease, transform 0.45s var(--ease-out), border-color 0.3s,
    background-color 0.3s, box-shadow 0.3s;
  backdrop-filter: blur(10px);
}

.region-hangang { --region-y: 7.5%; }
.region-siheung { --region-y: 12.8%; }
.region-wonju { --region-y: 21%; }
.region-chungju { --region-y: 26.3%; }
.region-geumgang { --region-y: 34.5%; }
.region-seosan { --region-y: 39.8%; }
.region-jeonbuk { --region-y: 48%; }
.region-iksan { --region-y: 53.3%; }
.region-daegu { --region-y: 61.5%; }
.region-gumi { --region-y: 66.8%; }
.region-nakdong { --region-y: 75%; }
.region-center-ulsan { --region-y: 80.3%; }
.region-yeongsan { --region-y: 88.5%; }
.region-yeosu { --region-y: 93.8%; }

.region-hotspot > span { display: grid; min-width: 0; gap: 2px; text-align: left; }
.region-hotspot > span b { font-size: 11px; line-height: 1.12; letter-spacing: -.015em; }
.region-hotspot > span small {
  overflow: hidden;
  color: rgba(255,255,255,.46);
  font-size: 7.7px;
  line-height: 1.1;
  letter-spacing: .025em;
  text-overflow: ellipsis;
}

.region-hotspot i {
  position: relative;
  width: 7px;
  height: 7px;
  background: #b8bae7;
  border: 2px solid rgba(255,255,255,.95);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(119, 122, 197, 0.15), 0 0 12px rgba(149, 152, 212, 0.65);
}

.region-hotspot i::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 27px;
  height: 27px;
  content: "";
  border: 1px solid rgba(149, 152, 212, 0.42);
  border-radius: 50%;
  animation: map-pin-wave 2.6s ease-out infinite;
  transform: translate(-50%, -50%);
}

.centers-atlas.portfolio-mode .region-hotspot[data-region-scope="office"],
.centers-atlas.portfolio-mode .region-hotspot[data-region-scope="center"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
}

@keyframes center-region-breathe {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(217,70,239,.78)); }
  50% { filter: drop-shadow(0 0 16px rgba(240,171,252,1)); }
}

.centers-atlas.portfolio-mode .region-hotspot[data-region-scope="center"] {
  color: rgba(255, 255, 255, .74);
  background: rgba(29, 30, 39, .86);
  border-color: rgba(149, 152, 212, .26);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .24);
}

.centers-atlas.portfolio-mode .region-hotspot[data-region-scope="center"] i {
  background: #b8bae7;
  box-shadow: 0 0 0 5px rgba(119, 122, 197, .15), 0 0 12px rgba(149, 152, 212, .65);
}

.centers-atlas.portfolio-mode .region-hotspot[data-region-scope="center"] i::after {
  border-color: rgba(149, 152, 212, .42);
}

.centers-atlas.portfolio-mode .region-hotspot:nth-child(2) { transition-delay: 0.04s; }
.centers-atlas.portfolio-mode .region-hotspot:nth-child(3) { transition-delay: 0.08s; }
.centers-atlas.portfolio-mode .region-hotspot:nth-child(4) { transition-delay: 0.12s; }
.centers-atlas.portfolio-mode .region-hotspot:nth-child(5) { transition-delay: 0.16s; }
.centers-atlas.portfolio-mode .region-hotspot:nth-child(6) { transition-delay: 0.2s; }
.centers-atlas.portfolio-mode .region-hotspot:nth-child(7) { transition-delay: 0.24s; }

.region-hotspot:is(:hover, :focus-visible, .is-active) {
  z-index: 3;
  color: #fff;
  background: rgba(43, 63, 43, 0.94);
  border-color: rgba(184, 255, 157, 0.9);
  box-shadow: 0 14px 34px rgba(0,0,0,.34), 0 0 28px rgba(153, 237, 121, 0.62);
  outline: none;
  transform: translateY(-50%) scale(1.045);
}

.region-hotspot:is(:hover, :focus-visible, .is-active) > span small { color: rgba(218,255,204,.72); }

.centers-atlas.portfolio-mode .region-hotspot[data-region-scope="office"]:is(:hover, :focus-visible, .is-active) i {
  background: #b8ff9d;
  box-shadow: 0 0 0 5px rgba(153, 237, 121, .2), 0 0 17px rgba(184, 255, 157, .95);
}

.centers-atlas.portfolio-mode .region-hotspot[data-region-scope="office"]:is(:hover, :focus-visible, .is-active) i::after {
  border-color: rgba(184, 255, 157, .72);
}

.centers-atlas.portfolio-mode .region-hotspot[data-region-scope="center"]:is(:hover, :focus-visible, .is-active) {
  color: #fff;
  background: rgba(112, 26, 145, .98);
  border-color: #f5d0fe;
  box-shadow: 0 14px 36px rgba(0,0,0,.38), 0 0 30px rgba(232,121,249,.82), 0 0 54px rgba(126,34,206,.45);
}

.centers-atlas.portfolio-mode .region-hotspot[data-region-scope="center"]:is(:hover, :focus-visible, .is-active) i {
  background: #f0abfc;
  box-shadow: 0 0 0 5px rgba(217,70,239,.2), 0 0 17px rgba(240,171,252,.98);
}

.centers-atlas.portfolio-mode .region-hotspot[data-region-scope="center"]:is(:hover, :focus-visible, .is-active) i::after {
  border-color: rgba(240,171,252,.78);
}

.centers-atlas.portfolio-mode .region-hotspot[data-region-scope="center"]:is(:hover, :focus-visible, .is-active) > span small {
  color: rgba(250,232,255,.82);
}

.portfolio-panel {
  position: absolute;
  z-index: 9;
  top: 96px;
  right: 2.5%;
  bottom: auto;
  left: auto;
  width: min(32%, 420px);
  max-height: calc(100% - 135px);
  min-height: 230px;
  padding: 18px 18px 16px;
  overflow: hidden;
  color: #ffffff;
  background:
    linear-gradient(135deg, rgba(83, 86, 163, 0.21), transparent 48%),
    rgba(28, 29, 37, 0.94);
  border: 1px solid rgba(149, 152, 212, 0.28);
  box-shadow: 0 34px 80px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.07);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(20px, 0, 0) scale(0.97);
  transition: opacity 0.35s ease, visibility 0.35s, transform 0.5s var(--ease-out);
  backdrop-filter: blur(18px) saturate(1.1);
}

.centers-atlas.portfolio-mode.has-active-region .portfolio-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
}

.portfolio-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.portfolio-panel-head span {
  color: #b8bae7;
  font-size: 8px;
  font-weight: 760;
  letter-spacing: 0.14em;
}

.portfolio-panel-head button {
  width: 26px;
  height: 26px;
  color: rgba(255,255,255,.55);
  background: transparent;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 50%;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.portfolio-panel > strong {
  display: block;
  margin-bottom: 5px;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.035em;
}

.portfolio-panel > p {
  margin: 0 0 12px;
  color: rgba(255,255,255,.45);
  font-size: 10px;
  line-height: 1.65;
}

.portfolio-logo-viewport {
  max-height: 244px;
  padding-right: 4px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: rgba(158,162,221,.48) rgba(255,255,255,.06);
  scrollbar-width: thin;
  touch-action: pan-y;
}

.portfolio-logo-viewport::-webkit-scrollbar { width: 5px; }
.portfolio-logo-viewport::-webkit-scrollbar-track { background: rgba(255,255,255,.05); }
.portfolio-logo-viewport::-webkit-scrollbar-thumb { background: rgba(158,162,221,.48); border-radius: 10px; }

.centers-atlas.portfolio-all-view .portfolio-logo-viewport { max-height: 276px; }

.centers-atlas.portfolio-all-view .portfolio-panel {
  border-color: rgba(202, 151, 255, .4);
  box-shadow: 0 18px 60px rgba(3, 4, 13, .52), 0 0 34px rgba(171, 91, 255, .13);
}

.portfolio-logo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  align-content: start;
  opacity: 1;
}

.portfolio-logo-card {
  display: grid;
  min-width: 0;
  height: 64px;
  padding: 6px 7px;
  place-items: center;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 2px;
}

.portfolio-logo-card img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  transform: none;
}

.portfolio-logo-empty {
  grid-column: 1 / -1;
  padding: 20px 10px;
  color: rgba(255,255,255,.38);
  border: 1px dashed rgba(255,255,255,.13);
  font-size: 9px;
  line-height: 1.7;
  text-align: center;
}

.centers-atlas.centers-hidden .atlas-location {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.97);
}

.centers-atlas.centers-hidden .atlas-route-base,
.centers-atlas.centers-hidden .atlas-route-flow,
.centers-atlas.centers-hidden .route-signal,
.centers-atlas.centers-hidden .atlas-pin {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
}

.centers-atlas.is-visible .korea-boundary-layer {
  animation: korea-breathe 6s ease-in-out 1.8s infinite;
}

@keyframes korea-breathe {
  0%, 100% { filter: drop-shadow(0 18px 38px rgba(0, 0, 0, 0.28)); }
  50% { filter: drop-shadow(0 13px 48px rgba(119, 122, 197, 0.34)); }
}

.atlas-route-base,
.atlas-route-flow {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.atlas-route-base {
  stroke: rgba(149, 152, 212, 0.17);
  stroke-width: 7;
}

.atlas-route-flow {
  stroke: #9598d4;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 0.018 0.035;
  filter: drop-shadow(0 0 6px rgba(149, 152, 212, 0.7));
  animation: atlas-flow 2.4s linear infinite;
  transition: stroke-width 0.45s var(--ease-out), filter 0.45s var(--ease-out);
}

.centers-atlas.has-active-center .atlas-route-flow {
  stroke-width: 3;
  filter: drop-shadow(0 0 10px rgba(149, 152, 212, 0.92));
}

@keyframes atlas-flow {
  to { stroke-dashoffset: -0.53; }
}

.route-signal {
  fill: #ffffff;
  opacity: 0;
}

.centers-atlas.is-visible .route-signal {
  animation: route-signal-in 0.5s ease 2.1s forwards;
}

.route-signal-return { fill: #686bb4; }

@keyframes route-signal-in {
  to { opacity: 1; }
}

.atlas-pin {
  --hub-color: #67e8f9;
  --hub-rgb: 103, 232, 249;
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.4s ease, filter 0.4s ease;
}

.seoul-pin {
  --hub-color: #5ee7ff;
  --hub-rgb: 94, 231, 255;
}

.ulsan-pin {
  --hub-color: #d49cff;
  --hub-rgb: 212, 156, 255;
}

.centers-atlas.is-visible .atlas-pin {
  animation: pin-in 0.7s var(--ease-out) 1.95s forwards;
}

.centers-atlas.is-visible .ulsan-pin { animation-delay: 2.15s; }

@keyframes pin-in {
  from { opacity: 0; filter: blur(5px); }
  to { opacity: 1; filter: blur(0); }
}

.atlas-pin circle,
.atlas-pin path {
  vector-effect: non-scaling-stroke;
}

.pin-hit-area {
  fill: rgba(255, 255, 255, 0.001);
  stroke: none;
  pointer-events: all;
}

.atlas-pin path {
  fill: none;
  stroke: rgba(var(--hub-rgb), 0.74);
  stroke-width: 1.25;
}

.pin-wave {
  fill: none;
  stroke: rgba(var(--hub-rgb), 0.66);
  stroke-width: 1.45;
  transform-box: fill-box;
  transform-origin: center;
  animation: map-pin-wave 2.8s ease-out infinite;
}

.ulsan-pin .pin-wave { animation-delay: -1.35s; }

@keyframes map-pin-wave {
  0% { opacity: 0.75; transform: scale(0.35); }
  100% { opacity: 0; transform: scale(1.35); }
}

.pin-ring {
  fill: rgba(10, 15, 25, 0.96);
  stroke: var(--hub-color);
  stroke-width: 1.8;
  filter: drop-shadow(0 0 7px rgba(var(--hub-rgb), .72));
}

.pin-core {
  fill: var(--hub-color);
  filter: url(#map-glow);
}

.atlas-pin.is-active {
  filter: drop-shadow(0 0 16px rgba(var(--hub-rgb), .82)) !important;
}

.atlas-pin.is-active .pin-wave {
  stroke: rgba(var(--hub-rgb), 0.94);
  animation-duration: 1.25s;
}

.atlas-pin.is-active .pin-ring {
  fill: rgba(var(--hub-rgb), .2);
  stroke: #ffffff;
  stroke-width: 2;
}

.atlas-pin.is-active .pin-core {
  fill: #ffffff;
}

.atlas-pin.is-active path {
  stroke: rgba(var(--hub-rgb), 1);
}

.atlas-pin.is-active text {
  fill: #ffffff;
}

.centers-atlas.has-active-center .atlas-pin:not(.is-active) {
  opacity: 0.55 !important;
  filter: saturate(0.55) !important;
}

.atlas-pin text {
  fill: #f7fbff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 760;
  letter-spacing: 0.11em;
}

.atlas-pin .pin-sub {
  fill: rgba(var(--hub-rgb), .72);
  font-size: 7px;
  letter-spacing: 0.1em;
}

.atlas-pin > text {
  animation: center-label-beacon 2.4s ease-in-out infinite;
  paint-order: stroke fill;
  stroke: rgba(8, 11, 19, .88);
  stroke-width: 1.8px;
  stroke-linejoin: round;
}

.atlas-pin.ulsan-pin > text { animation-delay: -1.2s; }

@keyframes center-label-beacon {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(var(--hub-rgb), .38)); opacity: .86; }
  46% { filter: drop-shadow(0 0 5px rgba(var(--hub-rgb), .72)); opacity: 1; }
  52% { filter: drop-shadow(0 0 14px rgba(var(--hub-rgb), 1)); opacity: 1; }
  60% { filter: drop-shadow(0 0 4px rgba(var(--hub-rgb), .58)); opacity: .92; }
}

.center-detail {
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity .32s ease, transform .45s var(--ease-out);
}

.atlas-pin:is(:hover, :focus-visible, .is-active) .center-detail {
  opacity: 1;
  transform: translateY(0);
}

.atlas-pin.is-active .center-detail {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.atlas-pin .center-detail-title {
  fill: #ffffff;
  font-size: 17px;
  font-weight: 780;
  letter-spacing: -.015em;
  paint-order: stroke fill;
  stroke: rgba(7, 10, 18, .96);
  stroke-width: 3.5px;
  stroke-linejoin: round;
}

.atlas-pin .center-detail-address {
  fill: rgba(255, 255, 255, .96);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: -.015em;
  paint-order: stroke fill;
  stroke: rgba(7, 10, 18, .98);
  stroke-width: 2.4px;
  stroke-linejoin: round;
}

.atlas-pin .center-detail-label {
  fill: rgba(var(--hub-rgb), 1);
  font-size: 7px;
  font-weight: 760;
  letter-spacing: .15em;
  paint-order: stroke fill;
  stroke: rgba(7, 10, 18, .96);
  stroke-width: 2px;
  stroke-linejoin: round;
}

.atlas-pin.is-active .center-detail {
  animation: center-detail-beacon 2.2s ease-in-out infinite;
}

@keyframes center-detail-beacon {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(var(--hub-rgb), .42)); }
  48% { filter: drop-shadow(0 0 9px rgba(var(--hub-rgb), .72)); }
  54% { filter: drop-shadow(0 0 20px rgba(var(--hub-rgb), 1)); }
  62% { filter: drop-shadow(0 0 7px rgba(var(--hub-rgb), .58)); }
}

.island-marker {
  opacity: 0;
}

.centers-atlas.is-visible .island-marker {
  animation: island-marker-in 0.72s var(--ease-out) forwards;
}

.centers-atlas.is-visible .geoje-marker { animation-delay: 2.35s; }
.centers-atlas.is-visible .jeju-marker { animation-delay: 2.5s; }
.centers-atlas.is-visible .ulleung-marker { animation-delay: 2.65s; }
.centers-atlas.is-visible .dokdo-marker { animation-delay: 2.8s; }

@keyframes island-marker-in {
  from { opacity: 0; filter: blur(4px); }
  to { opacity: 1; filter: blur(0); }
}

.island-marker circle,
.island-marker path {
  vector-effect: non-scaling-stroke;
}

.island-marker path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.28);
  stroke-width: 0.85;
}

.island-marker .marker-wave {
  fill: none;
  stroke: rgba(149, 152, 212, 0.34);
  stroke-width: 0.9;
  transform-box: fill-box;
  transform-origin: center;
  animation: island-marker-wave 3s ease-out infinite;
}

.jeju-marker .marker-wave,
.dokdo-marker .marker-wave { animation-delay: -1.5s; }

@keyframes island-marker-wave {
  0% { opacity: 0.76; transform: scale(0.42); }
  100% { opacity: 0; transform: scale(1.55); }
}

.island-marker .marker-core {
  fill: #c7c9f4;
  filter: url(#map-glow);
}

.island-marker text {
  fill: rgba(255, 255, 255, 0.76);
  font-family: inherit;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.island-marker .marker-sub {
  fill: rgba(255, 255, 255, 0.3);
  font-size: 4.8px;
  font-weight: 700;
  letter-spacing: 0.11em;
}

.atlas-location {
  --card-x: 50%;
  --card-y: 50%;
  position: absolute;
  z-index: 5;
  width: min(25%, 310px);
  padding: 25px 27px 24px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(31, 32, 40, 0.72);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(17px);
  cursor: default;
  isolation: isolate;
  outline: none;
  transition: border-color 0.45s, background 0.45s, box-shadow 0.45s var(--ease-out),
    opacity 0.4s ease, filter 0.4s ease, transform 0.5s var(--ease-out);
}

.atlas-location::before,
.atlas-location::after {
  position: absolute;
  content: "";
  pointer-events: none;
  transition: opacity 0.45s var(--ease-out), transform 0.6s var(--ease-out);
}

.atlas-location::before {
  z-index: 0;
  inset: -1px;
  padding: 1px;
  background: linear-gradient(135deg, transparent 8%, rgba(149, 152, 212, 0.9) 34%, rgba(255, 255, 255, 0.5) 51%, rgba(83, 86, 163, 0.72) 68%, transparent 91%);
  opacity: 0;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  transform: translateX(-20%);
}

.atlas-location::after {
  z-index: 1;
  inset: 0;
  background: radial-gradient(circle 190px at var(--card-x) var(--card-y), rgba(119, 122, 197, 0.25), transparent 66%);
  opacity: 0;
}

.atlas-location > * {
  position: relative;
  z-index: 2;
}

.atlas-location:is(:hover, :focus-visible, .is-active) {
  border-color: rgba(149, 152, 212, 0.5);
  background:
    linear-gradient(135deg, rgba(83, 86, 163, 0.2), transparent 52%),
    rgba(39, 40, 50, 0.92);
  box-shadow: 0 36px 88px rgba(0, 0, 0, 0.36), 0 0 0 1px rgba(119, 122, 197, 0.12),
    inset 0 1px rgba(255, 255, 255, 0.08);
  transform: translateY(-9px) scale(1.018);
}

.atlas-location:is(:hover, :focus-visible, .is-active)::before,
.atlas-location:is(:hover, :focus-visible, .is-active)::after {
  opacity: 1;
}

.atlas-location:is(:hover, :focus-visible, .is-active)::before {
  transform: translateX(0);
}

.centers-atlas.has-active-center .atlas-location:not(.is-active) {
  opacity: 0.5;
  filter: saturate(0.58);
  transform: scale(0.985);
}

.atlas-seoul { top: auto; bottom: 45px; left: 4.5%; }
.atlas-ulsan { right: 4.5%; bottom: 45px; }

.atlas-location > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 35px;
}

.atlas-location > div span {
  color: #b4b6dc;
  font-size: 8.5px;
  font-weight: 780;
  letter-spacing: 0.13em;
}

.atlas-location > div b {
  color: rgba(255, 255, 255, 0.26);
  font-size: 7.5px;
  font-weight: 680;
  letter-spacing: 0.08em;
}

.atlas-location h3 {
  position: relative;
  margin-bottom: 12px;
  color: var(--white);
  font-size: 23px;
  font-weight: 650;
  letter-spacing: -0.035em;
  transition: letter-spacing 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}

.atlas-location h3::after {
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 52px;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, #9598d4, transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--ease-out);
}

.atlas-location:is(:hover, :focus-visible, .is-active) h3 {
  letter-spacing: -0.02em;
  transform: translateX(2px);
}

.atlas-location:is(:hover, :focus-visible, .is-active) h3::after {
  transform: scaleX(1);
}

.atlas-location address {
  margin: 0;
  color: rgba(255, 255, 255, 0.54);
  font-size: 11px;
  font-style: normal;
  line-height: 1.72;
  transition: color 0.4s ease, transform 0.45s var(--ease-out);
}

.atlas-location:is(:hover, :focus-visible, .is-active) address {
  color: rgba(255, 255, 255, 0.76);
  transform: translateX(2px);
}

.atlas-legend {
  position: absolute;
  z-index: 5;
  bottom: 25px;
  left: 26px;
  display: flex;
  gap: 24px;
  color: rgba(255, 255, 255, 0.28);
  font-size: 7.5px;
  font-weight: 680;
  letter-spacing: 0.1em;
}

.atlas-legend span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.atlas-legend i {
  width: 4px;
  height: 4px;
  background: #686bb4;
  border-radius: 50%;
}

.atlas-source {
  position: absolute;
  z-index: 6;
  right: 26px;
  bottom: 22px;
  color: rgba(255, 255, 255, 0.2);
  font-size: 7px;
  font-weight: 650;
  letter-spacing: 0.09em;
  transition: color 0.25s ease;
}

.atlas-source:hover,
.atlas-source:focus-visible {
  color: rgba(255, 255, 255, 0.52);
}

/* Consultation */
.contact {
  position: relative;
  display: flex;
  min-height: max(780px, calc(100svh - 72px));
  align-items: center;
  padding: 140px 0;
  overflow: hidden;
  color: var(--white);
  background:
    radial-gradient(circle at 80% 28%, rgba(83, 86, 163, 0.28), transparent 31%),
    linear-gradient(145deg, #24252c, #1d1e24 54%, #292b35);
}

.contact::before {
  position: absolute;
  inset: 0;
  content: "";
  opacity: 0.2;
  background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 72% 45%, black, transparent 64%);
}

.contact-ambient {
  position: absolute;
  top: 50%;
  right: -9%;
  width: min(56vw, 840px);
  height: min(56vw, 840px);
  border: 1px solid rgba(149, 152, 212, 0.1);
  border-radius: 50%;
  transform: translateY(-50%);
  animation: consultation-orbit 28s linear infinite;
}

.contact-ambient::before,
.contact-ambient::after {
  position: absolute;
  content: "";
  border: 1px solid rgba(149, 152, 212, 0.075);
  border-radius: 50%;
}

.contact-ambient::before { inset: 15%; }
.contact-ambient::after { inset: 31%; }

.contact-ambient i {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #9598d4;
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(149, 152, 212, 0.75);
}

.contact-ambient i:nth-child(1) { top: 6%; left: 48%; }
.contact-ambient i:nth-child(2) { top: 54%; left: 14%; }
.contact-ambient i:nth-child(3) { right: 11%; bottom: 24%; }

@keyframes consultation-orbit {
  to { transform: translateY(-50%) rotate(360deg); }
}

.contact-layout {
  z-index: 2;
  display: grid;
  align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.74fr);
  gap: clamp(70px, 9vw, 150px);
}

.contact-copy h2 {
  max-width: 770px;
  margin-bottom: 30px;
  font-size: clamp(48px, 5vw, 76px);
  font-weight: 690;
  line-height: 1.23;
  letter-spacing: -0.052em;
}

.contact-title-line {
  display: block;
  margin-bottom: 0.08em;
  font-size: clamp(40px, 3.45vw, 54px);
  line-height: 1.3;
  letter-spacing: -0.055em;
  white-space: nowrap;
}

.contact-copy h2 em {
  display: block;
  color: #c9caee;
}

.contact-copy > p:not(.section-kicker) {
  margin-bottom: 38px;
  color: rgba(255, 255, 255, 0.56);
  font-size: 17px;
  line-height: 1.9;
}

.contact-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.contact-tags span {
  padding: 8px 11px;
  color: rgba(255, 255, 255, 0.43);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.025);
  font-size: 9px;
  font-weight: 720;
  letter-spacing: 0.11em;
}

.contact-console {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(26, 27, 34, 0.7);
  box-shadow: 0 38px 95px rgba(0, 0, 0, 0.32), inset 0 0 50px rgba(119, 122, 197, 0.035);
  backdrop-filter: blur(20px);
}

.contact-console::before {
  position: absolute;
  top: 0;
  left: -40%;
  width: 28%;
  height: 100%;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(149, 152, 212, 0.08), transparent);
  transform: skewX(-16deg);
  animation: console-light 7s ease-in-out infinite;
}

@keyframes console-light {
  0%, 22% { left: -40%; opacity: 0; }
  36% { opacity: 1; }
  68%, 100% { left: 122%; opacity: 0; }
}

.console-head {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  padding: 0 26px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.11);
  color: rgba(255, 255, 255, 0.43);
  font-size: 9.5px;
  font-weight: 760;
  letter-spacing: 0.13em;
}

.console-head i {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.55);
  font-style: normal;
}

.console-head b {
  width: 6px;
  height: 6px;
  background: #9598d4;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(149, 152, 212, 0.72);
  animation: live-status 2s ease-in-out infinite;
}

.contact-console > p {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 26px 27px 15px;
  color: rgba(255, 255, 255, 0.28);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.consulting-channels {
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.consulting-channels a {
  display: grid;
  min-height: 108px;
  align-items: center;
  padding: 20px 26px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  grid-template-columns: 36px minmax(0, 1fr) 40px;
  transition: padding-left 0.4s var(--ease-out), background-color 0.35s;
}

.consulting-channels a:hover,
.consulting-channels a:focus-visible {
  padding-left: 34px;
  background: rgba(119, 122, 197, 0.09);
}

.consulting-channels a > span {
  color: rgba(255, 255, 255, 0.25);
  font-size: 10px;
  font-weight: 700;
}

.consulting-channels a div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.consulting-channels small {
  margin-bottom: 8px;
  color: #9598d4;
  font-size: 9px;
  font-weight: 760;
  letter-spacing: 0.12em;
}

.consulting-channels strong {
  overflow: hidden;
  font-size: clamp(18px, 1.55vw, 24px);
  font-weight: 570;
  line-height: 1.35;
  letter-spacing: -0.018em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.consulting-channels a > i {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  justify-self: end;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  font-size: 12px;
  font-style: normal;
  transition: color 0.3s, background-color 0.3s, transform 0.35s var(--ease-out);
}

.consulting-channels a:hover > i,
.consulting-channels a:focus-visible > i {
  color: var(--purple-deep);
  background: var(--white);
  transform: rotate(45deg);
}

.console-note {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 84px;
  align-items: center;
  padding: 0 26px;
  grid-template-columns: 126px 1fr;
}

.console-note span {
  color: rgba(255, 255, 255, 0.27);
  font-size: 9px;
  font-weight: 760;
  letter-spacing: 0.12em;
}

.console-note p {
  margin: 0;
  color: rgba(255, 255, 255, 0.42);
  font-size: 13px;
  line-height: 1.6;
}

/* Footer */
.site-footer {
  color: var(--ink-soft);
  background: #f1f2f5;
}

.footer-main {
  display: grid;
  min-height: 160px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  grid-template-columns: 1fr 1fr 1fr;
}

.footer-brand {
  width: 172px;
  height: 70px;
}

.footer-brand img {
  width: 172px;
  transform: translateY(-8px);
}

.footer-main > p {
  margin: 0;
  color: rgba(43, 44, 50, 0.42);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-align: center;
}

.back-top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.back-top span {
  display: grid;
  width: 35px;
  height: 35px;
  place-items: center;
  border: 1px solid rgba(43, 44, 50, 0.2);
  border-radius: 50%;
  transition: color 0.3s, background-color 0.3s;
}

.back-top:hover span {
  color: var(--white);
  background: var(--purple);
}

.footer-company {
  padding: 32px 0 30px;
  border-bottom: 1px solid var(--line);
}

.footer-company-grid {
  display: grid;
  align-items: start;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(55px, 7vw, 110px);
}

.footer-company p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.95;
  letter-spacing: -0.012em;
}

.footer-company strong,
.footer-company a {
  color: var(--ink);
}

.footer-company a {
  text-decoration: underline;
  text-decoration-color: rgba(83, 86, 163, 0.35);
  text-underline-offset: 3px;
}

.footer-company span {
  padding: 0 5px;
  color: rgba(43, 44, 50, 0.34);
}

.footer-centers {
  display: grid;
  padding-left: 34px;
  border-left: 1px solid var(--line);
  gap: 12px;
}

.footer-centers p {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
}

.footer-centers strong {
  color: var(--purple);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: -0.02em;
}

.footer-centers span {
  padding: 0;
  color: var(--ink-soft);
  font-size: 11px;
}

.footer-bottom {
  display: flex;
  min-height: 74px;
  align-items: center;
  justify-content: space-between;
  color: rgba(43, 44, 50, 0.45);
  font-size: 8px;
  font-weight: 650;
  letter-spacing: 0.1em;
}

/* Reveal */
.js .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
}

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

.js .hero .reveal[data-delay="1"] { transition-delay: 0.1s; }
.js .hero .reveal[data-delay="2"] { transition-delay: 0.2s; }
.js .hero .reveal[data-delay="3"] { transition-delay: 0.3s; }
.js .hero .reveal[data-delay="4"] { transition-delay: 0.4s; }

/* Responsive */
/* Product-specific intelligence accents */
.intelligence .tool-tabs button[data-tool="kora"] { --tab-rgb: 136, 151, 197; }
.intelligence .tool-tabs button[data-tool="risk"] { --tab-rgb: 205, 103, 118; }
.intelligence .tool-tabs button[data-tool="strength"] { --tab-rgb: 83, 172, 196; }
.intelligence .tool-tabs button[data-tool="field"] { --tab-rgb: 80, 184, 143; }
.intelligence .tool-tabs button[data-tool="automation"] { --tab-rgb: 169, 112, 202; }

.intelligence .tool-tabs button.active {
  background: linear-gradient(90deg, rgba(var(--tab-rgb), .095), rgba(var(--tab-rgb), .025) 46%, transparent 76%);
  text-shadow: none;
  animation: none;
}

.intelligence .tool-tabs button.active::before {
  border-color: rgba(var(--tab-rgb), .48);
  opacity: .62;
}

.intelligence .tool-tabs button.active::after {
  box-shadow: 0 0 0 3px rgba(var(--tab-rgb), .08), 0 0 10px rgba(var(--tab-rgb), .46);
}

.intelligence .product-stage[data-active-tool="kora"] { --tool-rgb: 136, 151, 197; }
.intelligence .product-stage[data-active-tool="risk"] { --tool-rgb: 205, 103, 118; }
.intelligence .product-stage[data-active-tool="strength"] { --tool-rgb: 83, 172, 196; }
.intelligence .product-stage[data-active-tool="field"] { --tool-rgb: 80, 184, 143; }
.intelligence .product-stage[data-active-tool="automation"] { --tool-rgb: 169, 112, 202; }

.intelligence .product-stage {
  border-color: rgba(var(--tool-rgb), .2);
  background:
    radial-gradient(circle at 84% 16%, rgba(var(--tool-rgb), .045), transparent 30%),
    linear-gradient(145deg, rgba(18, 22, 30, .97), rgba(9, 12, 17, .985));
  box-shadow: 0 30px 80px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .025);
  backdrop-filter: blur(18px) saturate(.7);
}

.intelligence .product-stage.is-visible {
  animation: premium-console-breathe 8s ease-in-out infinite;
}

.intelligence .product-stage::after {
  z-index: 12;
  inset: 0;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.012) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, transparent, rgba(var(--tool-rgb), .018) 48%, transparent 52%);
  box-shadow: none;
  opacity: .48;
  mix-blend-mode: screen;
}

@keyframes premium-console-breathe {
  0%, 100% { border-color: rgba(var(--tool-rgb), .17); box-shadow: 0 30px 80px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.025); }
  50% { border-color: rgba(var(--tool-rgb), .28); box-shadow: 0 34px 92px rgba(0,0,0,.48), 0 0 28px rgba(var(--tool-rgb), .035), inset 0 1px rgba(255,255,255,.03); }
}

.intelligence .stage-topbar {
  height: 46px;
  border-bottom-color: rgba(255,255,255,.07);
  background: rgba(4, 7, 11, .3);
  color: rgba(218, 224, 235, .42);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 8px;
  letter-spacing: .13em;
}

.intelligence .window-dots i {
  width: 4px;
  height: 4px;
  background: rgba(213, 220, 232, .2);
}

.intelligence .stage-runtime {
  color: rgba(207, 216, 230, .3);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.intelligence .stage-runtime > i {
  height: 1px;
  background: rgba(255,255,255,.075);
}

.intelligence .stage-runtime > i b {
  background: linear-gradient(90deg, transparent, rgba(var(--tool-rgb), .78), rgba(225, 236, 240, .88));
  box-shadow: 0 0 7px rgba(var(--tool-rgb), .38);
}

.intelligence .stage-live {
  color: rgba(220, 227, 237, .58);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 8px;
}

.intelligence .stage-live i {
  width: 4px;
  height: 4px;
  box-shadow: 0 0 7px rgba(var(--tool-rgb), .5);
}

.intelligence .product-screen::before {
  height: 7%;
  background: linear-gradient(180deg, transparent, rgba(var(--tool-rgb), .09), rgba(235, 244, 247, .035), transparent);
  filter: none;
}

.intelligence .product-screen::after {
  background:
    linear-gradient(90deg, transparent 42%, rgba(var(--tool-rgb), .07) 49.5%, rgba(234, 242, 244, .035) 50%, rgba(var(--tool-rgb), .07) 50.5%, transparent 58%),
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(var(--tool-rgb), .018) 80px);
  background-size: 230% 100%, 80px 100%;
}

.intelligence .product-screen.is-running::after { animation: premium-data-scan 5.8s linear infinite; }

.intelligence .product-screen[data-screen="risk"]::after {
  background:
    radial-gradient(circle at 68% 55%, rgba(205,103,118,.1), transparent 18%),
    repeating-linear-gradient(135deg, transparent 0 49px, rgba(205,103,118,.025) 50px, transparent 51px 100px);
}

.intelligence .product-screen.is-running[data-screen="risk"]::after { animation: premium-risk-scan 4.8s ease-in-out infinite; }

.intelligence .product-screen[data-screen="strength"]::after {
  background:
    repeating-linear-gradient(90deg, transparent 0 63px, rgba(83,172,196,.025) 64px),
    repeating-linear-gradient(0deg, transparent 0 63px, rgba(83,172,196,.02) 64px),
    linear-gradient(108deg, transparent 42%, rgba(83,172,196,.08) 50%, transparent 58%);
  background-size: 64px 64px, 64px 64px, 230% 100%;
}

.intelligence .product-screen.is-running[data-screen="strength"]::after { animation: premium-blueprint-scan 6.4s linear infinite; }

.intelligence .product-screen[data-screen="field"]::after {
  background:
    radial-gradient(circle at 68% 54%, transparent 0 16%, rgba(80,184,143,.075) 16.2%, transparent 16.7%, transparent 29%, rgba(80,184,143,.045) 29.2%, transparent 29.7%),
    conic-gradient(from 250deg at 68% 54%, transparent 0 84%, rgba(80,184,143,.1) 92%, transparent 98%);
}

.intelligence .product-screen.is-running[data-screen="field"]::after { animation: premium-radar-scan 6.8s linear infinite; }

.intelligence .product-screen[data-screen="automation"]::after {
  background:
    linear-gradient(90deg, transparent 0 47%, rgba(169,112,202,.075) 49.6%, rgba(226,235,239,.035) 50%, rgba(169,112,202,.075) 50.4%, transparent 53%),
    repeating-linear-gradient(90deg, transparent 0 89px, rgba(169,112,202,.02) 90px),
    repeating-linear-gradient(0deg, transparent 0 59px, rgba(169,112,202,.014) 60px);
  background-size: 240% 100%, 90px 100%, 100% 60px;
}

.intelligence .product-screen.is-running[data-screen="automation"]::after { animation: premium-packet-scan 5.2s linear infinite; }

@keyframes premium-data-scan {
  0% { background-position: 120% 0, 0 0; opacity: 0; }
  14%, 82% { opacity: .28; }
  100% { background-position: -120% 0, 0 0; opacity: 0; }
}

@keyframes premium-risk-scan {
  0%, 100% { opacity: .08; filter: brightness(.85); }
  50% { opacity: .28; filter: brightness(1.08); }
}

@keyframes premium-blueprint-scan {
  from { background-position: 0 0, 0 0, 120% 0; opacity: .1; }
  42% { opacity: .3; }
  to { background-position: 64px 0, 0 64px, -120% 0; opacity: .1; }
}

@keyframes premium-radar-scan {
  0% { opacity: .08; transform: rotate(0); }
  45% { opacity: .27; }
  100% { opacity: .08; transform: rotate(360deg); }
}

@keyframes premium-packet-scan {
  0% { background-position: 125% 0, 0 0, 0 0; opacity: .08; }
  35%, 68% { opacity: .26; }
  100% { background-position: -125% 0, 90px 0, 0 60px; opacity: .08; }
}

.intelligence .screen-sidebar {
  border-right-color: rgba(255,255,255,.065);
  background: rgba(3, 6, 10, .18);
}

.intelligence .screen-sidebar b {
  color: rgba(var(--tool-rgb), .72);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.intelligence .screen-sidebar i {
  width: 12px;
  height: 1px;
  background: rgba(219, 227, 237, .16);
}

.intelligence .screen-sidebar i.active { box-shadow: 0 0 7px rgba(var(--tool-rgb), .42); }

.intelligence .screen-title span,
.intelligence .flow-label,
.intelligence .module-heading,
.intelligence .engine-label {
  color: rgba(210, 219, 231, .38);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .14em;
}

.intelligence .screen-title h3 {
  color: #edf1f4;
  font-weight: 680;
  letter-spacing: -.035em;
  text-shadow: 0 1px 18px rgba(0,0,0,.45);
}

.intelligence .screen-title > strong {
  position: relative;
  padding: 7px 11px 7px 18px;
  border-color: rgba(var(--tool-rgb), .24);
  border-radius: 2px;
  background: rgba(2, 5, 9, .38);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 7.5px;
  letter-spacing: .14em;
}

.intelligence .screen-title > strong::before {
  position: absolute;
  top: 50%;
  left: 8px;
  width: 4px;
  height: 4px;
  content: "";
  background: rgb(var(--tool-rgb));
  box-shadow: 0 0 6px rgba(var(--tool-rgb), .48);
  transform: translateY(-50%);
}

.intelligence .product-screen.is-running .screen-title > strong:not(.is-changing) { animation: premium-status-live 2.8s ease-in-out infinite; }

@keyframes premium-status-live {
  0%, 100% { color: rgba(var(--tool-rgb), .78); border-color: rgba(var(--tool-rgb), .18); box-shadow: none; }
  50% { color: rgba(235,241,244,.94); border-color: rgba(var(--tool-rgb), .36); box-shadow: inset 2px 0 rgba(var(--tool-rgb), .55); }
}

.intelligence :is(.flow-track > div, .kora-engine, .risk-matrix-panel, .risk-scenario, .vessel-viewport, .formula-card, .strength-metric, .field-map, .automation-dashboard) {
  border-color: rgba(203, 215, 229, .095);
  background-color: rgba(4, 8, 13, .42);
  box-shadow: inset 0 1px rgba(255,255,255,.018);
}

.intelligence .automation-dashboard {
  background:
    linear-gradient(145deg, rgba(16,20,28,.76), rgba(5,8,13,.88)),
    rgba(4,8,13,.62);
}

.intelligence .automation-dashboard::before {
  opacity: .12;
  background-image:
    linear-gradient(rgba(198,211,225,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(198,211,225,.055) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
}

.intelligence .automation-module {
  border-color: rgba(202,214,228,.12);
  background: linear-gradient(150deg, rgba(22,27,36,.72), rgba(7,10,15,.7));
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
  animation: premium-module-focus 8.4s ease-in-out infinite;
}

.intelligence .automation-module::after {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(205,171,224,.75), transparent);
}

.intelligence [data-screen="automation"] .automation-module svg {
  stroke: rgba(196,156,219,.78);
  filter: drop-shadow(0 0 5px rgba(169,112,202,.22));
}

.intelligence .automation-module b,
.intelligence .automation-log,
.intelligence .automation-module small,
.intelligence .automation-module > span {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.intelligence .automation-module b { color: rgba(234,238,242,.9); letter-spacing: .08em; }
.intelligence .automation-module small { color: rgba(191,202,215,.33); }
.intelligence .automation-link { background: rgba(203,214,228,.1); }
.intelligence [data-screen="automation"] .automation-link::after { background: linear-gradient(90deg, transparent, rgba(205,171,224,.8), transparent); }
.intelligence .automation-core i { border-color: rgba(169,112,202,.25); }
.intelligence .automation-core i::after { width: 4px; height: 4px; background: #c8a5d9; box-shadow: 0 0 7px rgba(169,112,202,.48); }
.intelligence .automation-core strong { color: rgba(223,207,231,.88); text-shadow: 0 0 10px rgba(169,112,202,.18); }
.intelligence .automation-log { border-top-color: rgba(203,214,228,.08); }
.intelligence .automation-log > span { border-bottom-color: rgba(203,214,228,.055); color: rgba(204,214,225,.44); }
.intelligence .automation-log b { color: rgba(184,145,207,.72); }
.intelligence .automation-log small { color: rgba(209,188,222,.58); }

@keyframes premium-module-focus {
  0%, 28%, 100% { border-color: rgba(202,214,228,.1); background-color: rgba(7,10,15,.7); box-shadow: inset 0 1px rgba(255,255,255,.015); transform: translateY(0); }
  9%, 18% { border-color: rgba(169,112,202,.32); background-color: rgba(18,14,24,.76); box-shadow: inset 2px 0 rgba(169,112,202,.38), 0 10px 28px rgba(0,0,0,.14); transform: translateY(-2px); }
}

[data-screen="risk"] .risk-matrix i:nth-child(9),
[data-screen="risk"] .risk-matrix i:nth-child(14),
[data-screen="risk"] .risk-matrix i:nth-child(18),
[data-screen="risk"] .risk-matrix i:nth-child(22) {
  border-color: rgba(255,118,145,.82);
  box-shadow: inset 0 0 20px rgba(255,118,145,.24), 0 0 14px rgba(255,118,145,.18);
}

[data-screen="risk"] .risk-orbit > div {
  background: radial-gradient(circle, rgba(255,118,145,.34), rgba(38,39,47,.84));
  border-color: rgba(255,118,145,.44);
  box-shadow: 0 0 38px rgba(255,118,145,.2);
}

[data-screen="risk"] .risk-readout i::after {
  background: linear-gradient(90deg, #8c354b, #ff7691);
  box-shadow: 0 0 10px rgba(255,118,145,.68);
}

[data-screen="strength"] .stress-path {
  filter: drop-shadow(0 0 7px rgba(91,211,244,.92));
}

[data-screen="strength"] .stress-node circle:last-child { fill: #baf2ff; filter: drop-shadow(0 0 7px #5bd3f4); }
[data-screen="strength"] .strength-metric > i b { background: linear-gradient(90deg, #25748c, #5bd3f4); box-shadow: 0 0 9px rgba(91,211,244,.7); }
[data-screen="strength"] .formula-card { border-color: rgba(91,211,244,.24); background: rgba(91,211,244,.055); }

[data-screen="field"] .map-point i {
  background: #5be2a6;
  box-shadow: 0 0 0 5px rgba(91,226,166,.14), 0 0 15px rgba(91,226,166,.55);
}

[data-screen="field"] .map-point i::after { border-color: rgba(91,226,166,.68); }
[data-screen="field"] .field-scan { background: linear-gradient(180deg, transparent, #c8ffe7, transparent); box-shadow: 0 0 28px rgba(91,226,166,.7); }
[data-screen="field"] .map-line::after { background: linear-gradient(90deg, transparent, #5be2a6, #d8ffec, transparent); }

[data-screen="automation"] .automation-module svg { stroke: #d377ff; filter: drop-shadow(0 0 9px rgba(211,119,255,.55)); }
[data-screen="automation"] .automation-module::after,
[data-screen="automation"] .automation-link::after { background: linear-gradient(90deg, transparent, #d377ff, #f3d9ff, transparent); }
[data-screen="automation"] .automation-core i { border-color: rgba(211,119,255,.4); }
[data-screen="automation"] .automation-core i::after { background: #e4adff; box-shadow: 0 0 14px rgba(211,119,255,.95); }
[data-screen="automation"] .automation-core strong { color: #f1d8ff; text-shadow: 0 0 14px rgba(211,119,255,.5); }

@media (max-width: 1180px) {
  :root { --container: 1100px; }
  .container { width: min(calc(100% - 64px), var(--container)); }
  .desktop-nav { gap: 18px; }
  .desktop-nav a span { font-size: 11.5px; }
  .desktop-nav a small { font-size: 8.5px; }
  .hero-visual { left: 39vw; width: 85vw; }
  .hero-copy { width: 51vw; }
  .hero h1 { font-size: clamp(48px, 5.6vw, 68px); }
  .visual-status { right: 9%; bottom: 5%; }
  .expertise-card { min-height: 430px; padding-inline: 27px; }
  .card-line { right: 27px; left: 27px; }
  .intelligence-layout { gap: 60px; grid-template-columns: 0.75fr 1.25fr; }
  .product-stage { min-height: 520px; }
  .product-screen { min-height: 470px; }
  .screen-content { padding-inline: 26px; }
  .screen-grid { grid-template-columns: minmax(0, 1fr) 178px; gap: 20px; }
  .kora-engine { min-height: 235px; }
  .process-step { gap: 35px; grid-template-columns: 70px 250px 1fr; }
  .insight-item { grid-template-columns: 140px 1.25fr 0.75fr; gap: 28px; }
  .centers-heading { gap: 80px; }
  .atlas-location { width: min(27%, 285px); }
  .contact-layout { grid-template-columns: minmax(0, 1fr) minmax(380px, 0.72fr); gap: 70px; }
}

@media (max-width: 900px) {
  :root { --header-height: 72px; }
  .container { width: min(calc(100% - 40px), 820px); }
  .section { padding: 112px 0; }
  .desktop-nav,
  .nav-contact { display: none; }
  .chapter-indicator { display: none; }
  .menu-button {
    position: relative;
    display: flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    background: transparent;
    border: 0;
    cursor: pointer;
  }
  .nav-wrap {
    position: relative;
    z-index: 3;
  }
  .menu-button span {
    width: 21px;
    height: 1px;
    background: var(--ink);
    transition: transform 0.3s var(--ease);
  }
  .menu-button[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-button[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .mobile-menu {
    position: fixed;
    z-index: 2;
    inset: 0;
    display: grid;
    min-height: 100dvh;
    padding: max(108px, calc(env(safe-area-inset-top) + 94px)) 20px max(34px, env(safe-area-inset-bottom));
    place-items: center;
    color: var(--white);
    background:
      radial-gradient(circle at 84% 16%, rgba(119, 122, 197, 0.22), transparent 30%),
      linear-gradient(145deg, #25262e, #1e1f26 66%, #292b35);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, -10px, 0);
    transition: opacity 0.35s, visibility 0.35s, transform 0.55s var(--ease-out);
  }
  .mobile-menu::before {
    position: absolute;
    inset: 0;
    content: "";
    opacity: 0.22;
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(135deg, transparent, #000 45%, transparent);
    pointer-events: none;
  }
  .mobile-menu.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
  }
  .mobile-menu nav { width: min(100%, 520px); }
  .mobile-menu a {
    display: flex;
    min-height: 74px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 24px;
    font-weight: 620;
  }
  .mobile-menu a span { color: rgba(255, 255, 255, 0.38); font-size: 11px; }
  .mobile-menu button {
    width: 100%;
    min-height: 58px;
    margin-top: 34px;
    color: var(--white);
    background: var(--purple);
    border: 0;
    font-size: 14px;
    font-weight: 700;
  }
  .mobile-menu .mobile-contact {
    min-height: 62px;
    margin-top: 28px;
    padding: 0 18px;
    border: 0;
    background: var(--purple);
    font-size: 15px;
  }
  .site-header:has(.mobile-menu.open) .brand {
    padding: 0;
    background: transparent;
    border-radius: 0;
  }
  .site-header:has(.mobile-menu.open) .brand img { filter: brightness(0) invert(1); }
  .site-header:has(.mobile-menu.open) .menu-button span { background: var(--white); }
  .hero { min-height: 1050px; align-items: flex-start; }
  .hero-content { min-height: auto; align-items: flex-start; padding-top: 142px; }
  .hero-copy { width: 100%; }
  .hero h1 { max-width: 650px; font-size: clamp(48px, 8.4vw, 68px); }
  .hero-description { font-size: 17px; }
  .hero-visual {
    top: 640px;
    right: -14%;
    left: auto;
    width: 114%;
    transform: translateY(calc(-2% - var(--scroll-lift, 0px)));
  }
  .hero-image {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 100%);
  }
  .hero-scene-nav { right: 39%; bottom: 3%; }
  .visual-status { right: 13%; bottom: 2%; }
  .sector-inner { min-height: 150px; grid-template-columns: 1fr; padding: 28px 0; gap: 20px; }
  .sector-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 20px; }
  .sector-list span::after { display: none; }
  .section-heading { margin-bottom: 60px; grid-template-columns: 1fr; gap: 30px; }
  .section-intro { margin: 0; }
  .expertise-grid { grid-template-columns: repeat(2, 1fr); }
  .expertise-card { min-height: 390px; }
  .intelligence-layout { grid-template-columns: 1fr; gap: 70px; }
  .intelligence-copy > p:not(.section-kicker) { max-width: 610px; }
  .product-stage { min-height: 540px; }
  .product-screen { min-height: 490px; }
  .screen-grid { grid-template-columns: minmax(0, 1fr) 210px; gap: 30px; }
  .process-step { min-height: 360px; grid-template-columns: 54px 190px 1fr; gap: 20px; }
  .step-visual { width: 180px; }
  .difference { min-height: auto; padding: 120px 0; }
  .difference h2 { margin-bottom: 70px; }
  .difference-title-line:nth-child(2) {
    margin-left: clamp(18px, 5vw, 54px);
    font-size: 0.84em;
    white-space: normal;
  }
  .difference-grid { grid-template-columns: 1fr; }
  .difference-grid article,
  .difference-grid article + article { min-height: 220px; padding: 30px 0; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
  .difference-grid article:last-child { border-bottom: 0; }
  .difference-grid article > span { margin-bottom: 26px; }
  .insight-item { grid-template-columns: 110px 1fr; }
  .insight-item > p { display: none; }
  .centers-heading { margin-bottom: 58px; grid-template-columns: 1fr; gap: 30px; }
  .centers-summary { max-width: 620px; }
  .centers-atlas { min-height: 760px; }
  .atlas-map { top: 70px; bottom: 44px; left: 50%; width: min(100%, 760px); }
  .region-hotspot { left: 6px; width: 176px; }
  .portfolio-panel {
    top: 88px;
    right: 18px;
    bottom: auto;
    left: auto;
    width: min(38%, 320px);
    transform: translate3d(18px, 0, 0) scale(0.97);
  }
  .centers-atlas.portfolio-mode.has-active-region .portfolio-panel { transform: translate3d(0, 0, 0) scale(1); }
  .atlas-location { top: auto; bottom: 66px; width: calc(50% - 40px); }
  .atlas-seoul { left: 26px; }
  .atlas-ulsan { right: 26px; }
  .atlas-legend { display: none; }
  .atlas-source { right: 50%; bottom: 22px; transform: translateX(50%); white-space: nowrap; }
  .contact { min-height: auto; padding: 112px 0; }
  .contact-layout { grid-template-columns: 1fr; gap: 62px; }
  .contact-copy h2 { max-width: 720px; }
  .contact-copy > p:not(.section-kicker) { max-width: 620px; }
  .contact-console { width: min(100%, 650px); }
  .contact-ambient { right: -36%; width: 90vw; height: 90vw; }
  .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-main > p { display: none; }
  .footer-company-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-centers { padding: 24px 0 0; border-top: 1px solid var(--line); border-left: 0; }
}

@media (max-width: 620px) {
  .container { width: calc(100% - 36px); }
  .section { padding: 90px 0; }
  .brand { width: 132px; height: 48px; }
  .brand img { width: 132px; transform: translateY(-6px); }
  .hero { min-height: 1020px; }
  .hero-content { min-height: auto; padding-top: 118px; }
  .eyebrow { margin-bottom: 22px; font-size: 9px; letter-spacing: 0.12em; }
  .eyebrow > span { width: 18px; height: 18px; }
  .hero h1 { margin-bottom: 23px; font-size: clamp(39px, 11.3vw, 55px); line-height: 1.16; }
  .hero-description { margin-bottom: 31px; font-size: 15px; line-height: 1.72; }
  .desktop-only { display: none; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 13px; }
  .primary-button { min-height: 54px; }
  .hero-visual {
    top: 665px;
    right: -27%;
    left: auto;
    width: 145%;
    transform: translateY(calc(-2% - var(--scroll-lift, 0px)));
  }
  .visual-status { right: 21%; bottom: 1%; width: 175px; }
  .hero-system-rail { display: none; }
  .node-two { right: 34%; }
  .node-three { right: 30%; }
  .signal-node > small,
  .signal-node .signal-preview { display: none; }
  .signal-node {
    gap: 6px;
    padding: 5px 8px 5px 6px;
    font-size: 8px;
  }
  .signal-radiance { left: 11px; }
  .hero-scene-nav { right: 31%; bottom: 12%; min-height: 25px; padding-inline: 8px; }
  .hero-scene-nav button { width: 16px; }
  .hero-scene-nav button.is-active { width: 34px; }
  .difference-title-line { width: auto; }
  .difference-title-line:nth-child(2) {
    margin-left: 0;
    font-size: 0.82em;
    line-height: 1.28;
    white-space: normal;
  }
  .sector-inner { min-height: 170px; }
  .sector-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 16px; }
  .section-heading h2,
  .intelligence h2,
  .difference h2,
  .insight h2 { font-size: clamp(36px, 10.5vw, 48px); }
  .section-intro { font-size: 14px; }
  .expertise-law-tabs { margin-bottom: 12px; }
  .expertise-law-tabs button { min-height: 76px; padding: 15px 12px 13px; }
  .expertise-law-tabs button span { top: 12px; right: 10px; font-size: 7px; }
  .expertise-law-tabs button b { font-size: 17px; }
  .expertise-law-tabs button small { font-size: 6px; letter-spacing: .06em; }
  .expertise-grid { border-left: 0; grid-template-columns: 1fr; }
  .expertise-card { min-height: 350px; border-left: 1px solid var(--line); }
  .card-head { margin-bottom: 42px; }
  .product-stage { min-height: 480px; margin-inline: -7px; }
  .stage-topbar > span { display: none; }
  .product-screen { min-height: 430px; grid-template-columns: 42px 1fr; }
  .screen-sidebar { gap: 24px; }
  .screen-content { padding: 30px 17px; }
  .screen-title { margin-bottom: 32px; }
  .screen-title h3 { font-size: clamp(18px, 6vw, 26px); }
  .screen-title > strong { display: block; padding: 6px 7px; font-size: 5.5px; }
  .screen-grid { grid-template-columns: 1fr; gap: 28px; }
  .kora-engine { min-height: 205px; }
  .engine-core { min-height: 140px; }
  .engine-orbit { width: 116px; height: 116px; }
  .engine-orbit.orbit-b { width: 92px; height: 92px; }
  .engine-orbit.orbit-c { width: 134px; height: 134px; }
  .kora-file { width: 76px; height: 94px; }
  .flow-track { margin: 22px 0 30px; grid-template-columns: 1fr 12px 1fr 12px 1fr; }
  .flow-track > div { min-height: 98px; }
  .flow-track > div b { font-size: 8px; }
  .flow-log span { font-size: 7px; }
  .table-row { font-size: 7px; grid-template-columns: 1.25fr 1fr 0.7fr; }
  .field-map { min-height: 280px; }
  .map-result { right: 10px; bottom: 10px; min-width: 150px; }
  .risk-dashboard,
  .strength-dashboard { grid-template-columns: 1fr; gap: 14px; }
  .risk-scenario { min-height: 255px; }
  .vessel-viewport { min-height: 285px; }
  .vessel-model { height: 225px; }
  .automation-dashboard { padding: 12px; }
  .automation-pipeline { grid-template-columns: 1fr 12px 1fr 12px 1fr; gap: 4px; }
  .automation-module { min-height: 116px; padding-inline: 6px; }
  .automation-module b { font-size: 6.5px; }
  .automation-console-grid { grid-template-columns: 84px 1fr; gap: 12px; }
  .automation-core { width: 76px; height: 76px; }
  .process-heading { margin-bottom: 55px; }
  .process-step { min-height: auto; padding: 48px 0; grid-template-columns: 34px 1fr; gap: 8px 15px; }
  .step-number { padding-top: 0; grid-row: 1 / 3; }
  .step-visual { width: 170px; height: 120px; margin: 0 0 20px; grid-column: 2; }
  .step-copy { grid-column: 2; }
  .step-copy h3 { font-size: 25px; }
  .difference { padding: 95px 0; }
  .difference h2 { margin-bottom: 60px; }
  .difference-grid h3 { font-size: 23px; }
  .insight-heading { align-items: flex-start; flex-direction: column; gap: 25px; margin-bottom: 55px; }
  .insight-item { min-height: 200px; padding: 30px 48px 30px 0; grid-template-columns: 1fr; gap: 18px; }
  .insight-item:hover { padding-left: 14px; }
  .insight-meta { flex-direction: row; justify-content: space-between; }
  .insight-arrow { right: 0; width: 34px; height: 34px; }
  .centers-copy h2 { font-size: clamp(36px, 10.5vw, 48px); }
  .centers-summary strong { font-size: 15px; }
  .centers-atlas { min-height: 620px; }
  .atlas-topline { height: 56px; padding: 0 16px; letter-spacing: 0.1em; }
  .atlas-topline > span { max-width: 116px; font-size: 7px; }
  .atlas-topline > i { gap: 0; font-size: 0; }
  .atlas-topline > span { display: none; }
  .atlas-topline { justify-content: center; }
  .atlas-topline > i { position: absolute; right: 13px; }
  .atlas-view-toggles { gap: 5px; }
  .atlas-layer-toggle { min-height: 28px; padding: 0 9px; font-size: 7.5px; }
  .atlas-map { top: 68px; bottom: auto; width: 100%; height: 500px; }
  .centers-atlas.portfolio-mode .atlas-map { top: 68px; }
  .region-hotspot { left: 4px; width: 142px; min-height: 25px; gap: 10px; padding: 4px 7px; font-size: 7px; }
  .region-hotspot i { width: 6px; height: 6px; }
  .region-hotspot > span small { display: none; }
  .region-hotspot > span b { font-size: 8.2px; }
  .atlas-pin text { font-size: 13px; }
  .atlas-pin .pin-sub { font-size: 6.5px; }
  .island-marker text { font-size: 14px; }
  .island-marker .marker-sub { font-size: 7px; }
  .atlas-location { right: auto; left: 16px; width: calc(100% - 32px); padding: 22px 23px; }
  .atlas-seoul { top: 590px; bottom: auto; }
  .atlas-ulsan { top: 760px; bottom: auto; }
  .portfolio-panel {
    top: 78px;
    right: 12px;
    bottom: auto;
    left: auto;
    width: min(62%, 260px);
    min-height: 0;
    max-height: 470px;
    padding: 16px;
    transform: translate3d(16px, 0, 0) scale(0.97);
  }
  .centers-atlas.portfolio-mode.has-active-region .portfolio-panel { transform: translate3d(0, 0, 0) scale(1); }
  .centers-atlas.centers-hidden .atlas-seoul,
  .centers-atlas.centers-hidden .atlas-ulsan { opacity: 0; }
  .atlas-location > div { margin-bottom: 24px; }
  .contact { padding: 92px 0; }
  .contact-layout { gap: 48px; }
  .contact-copy h2 { font-size: clamp(38px, 11vw, 52px); }
  .contact-title-line { font-size: clamp(23px, 6.8vw, 32px); letter-spacing: -0.06em; }
  .contact-copy > p:not(.section-kicker) { font-size: 15px; }
  .contact-tags { gap: 6px; }
  .contact-console { margin-inline: 0; }
  .console-head { min-height: 58px; padding: 0 18px; font-size: 8.5px; }
  .contact-console > p { padding: 22px 20px 13px; }
  .consulting-channels a { min-height: 104px; padding: 18px 19px; grid-template-columns: 28px minmax(0, 1fr) 36px; }
  .consulting-channels a:hover,
  .consulting-channels a:focus-visible { padding-left: 23px; }
  .consulting-channels strong { font-size: 19px; }
  .consulting-channels a:nth-child(2) strong { overflow-wrap: anywhere; white-space: normal; }
  .console-note { padding: 14px 19px; grid-template-columns: 1fr; gap: 5px; }
  .contact-ambient { right: -62%; width: 130vw; height: 130vw; opacity: 0.6; }
  .footer-main { min-height: 130px; }
  .footer-brand { width: 145px; height: 58px; }
  .footer-brand img { width: 145px; transform: translateY(-7px); }
  .footer-company { padding: 25px 0 24px; }
  .footer-company p { font-size: 11px; line-height: 1.85; }
  .footer-company span { padding: 0 2px; }
  .footer-company-grid { gap: 24px; }
  .footer-centers { padding-top: 21px; gap: 10px; }
  .footer-centers p { grid-template-columns: 56px 1fr; gap: 8px; }
  .footer-centers span { padding: 0; font-size: 10px; line-height: 1.65; }
  .footer-bottom { min-height: 90px; align-items: flex-start; justify-content: center; padding: 24px 0; flex-direction: column; gap: 5px; }
}

@media (hover: none), (pointer: coarse) {
  .cursor-orbit { display: none; }
  .hero-image-wrap { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .hero-image-wrap { transform: none !important; }

  /* These compact controls are explicitly motion-driven UI; retain gentle,
     bounded effects while suppressing the larger ambient page motion above. */
  .signal-node {
    animation-duration: 3.1s !important;
    animation-iteration-count: infinite !important;
    transition-duration: .38s !important;
  }
  .signal-node::before,
  .signal-node::after,
  .signal-node i::before,
  .signal-node i::after,
  .signal-radiance::before,
  .signal-radiance b {
    animation-duration: 2.4s !important;
    animation-iteration-count: infinite !important;
  }
  .signal-preview,
  .signal-preview > * { transition-duration: .42s !important; }
  .hero-image-wrap[data-transition="cinematic"] .hero-image.is-entering,
  .hero-image-wrap[data-transition="cinematic"] .hero-image.is-leaving,
  .hero-image-wrap.is-transitioning .hero-slide-stack::after {
    animation-duration: 1.25s !important;
    animation-iteration-count: 1 !important;
  }
  .hero-image { transition-duration: 1.25s !important; }

  /* The intelligence console is an explicitly requested live simulation.
     Keep its bounded in-panel telemetry active without restoring page motion. */
  .intelligence .tool-tabs button.active,
  .intelligence .tool-tabs button::before,
  .intelligence .tool-tabs button::after,
  .intelligence .stage-live i,
  .intelligence .product-screen::before,
  .intelligence .product-screen::after,
  .intelligence .screen-sidebar i.active,
  .intelligence .screen-title > strong,
  .intelligence .flow-track > div::after,
  .intelligence .flow-track > span::after,
  .intelligence .flow-log span,
  .intelligence .kora-engine::after,
  .intelligence .engine-orbit,
  .intelligence .kora-file,
  .intelligence .engine-particle,
  .intelligence .risk-matrix-panel::after,
  .intelligence .risk-matrix i,
  .intelligence .risk-orbit > i,
  .intelligence .risk-orbit > div,
  .intelligence .stress-path,
  .intelligence .stress-node circle,
  .intelligence .vessel-scan,
  .intelligence .map-grid,
  .intelligence .map-line::after,
  .intelligence .map-point i::after,
  .intelligence .field-scan,
  .intelligence .automation-module,
  .intelligence .automation-module::after,
  .intelligence .automation-link::after {
    animation-duration: 3.2s !important;
    animation-iteration-count: infinite !important;
  }

  .intelligence .stage-runtime > i b,
  .intelligence .screen-title > strong {
    transition-duration: .28s !important;
  }

  .intelligence [data-screen="risk"]::after { animation-duration: 2.8s !important; }
  .intelligence [data-screen="strength"]::after { animation-duration: 3.4s !important; }
  .intelligence [data-screen="field"]::after { animation-duration: 3.6s !important; }
  .intelligence [data-screen="automation"]::after { animation-duration: 2.6s !important; }
  .intelligence [data-tool="risk"].active::after { animation-duration: 1.6s !important; }
  .intelligence [data-tool="strength"].active::after { animation-duration: 2.4s !important; }
  .intelligence [data-tool="field"].active::after { animation-duration: 2s !important; }
  .intelligence [data-tool="automation"].active::after { animation-duration: 1.35s !important; }
}