/* 공통 색상, 헤더·푸터, 메인 페이지, 반응형 스타일 */

/* 외부 접속 없이 한글·영문·숫자에 동일한 웹폰트를 적용합니다. */
@font-face {
  font-family: "Noto Sans KR";
  src: url("../assets/fonts/NotoSansKR-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --brand-blue: #1b60e1;
  --brand-green: #00b050;
  --brand-night: #0d1320;
  --brand-navy: #062053;
  --brand-steel: #294c8c;
  --brand-ice: #c6d9fa;
  --background: #050607;
  --surface: #101317;
  --foreground: #f7f8fb;
  --muted: #a4aab4;
  --line: #ffffff20;
  --gradient: linear-gradient(105deg, var(--brand-green), #07999e 48%, var(--brand-blue));
  /* 공통 hover 주변광: 가까운 녹색 빛과 넓은 청록·파란색 블러를 겹칩니다. */
  --hover-glow: 0 0 24px #00b88c66, 0 18px 50px #008fa699, 0 0 64px #1b60e14d;
  --hover-duration: 500ms;
  --review-space: 0.5svw;
  --solution-gap: calc(24px + var(--review-space));
  --font: "Noto Sans KR", sans-serif;
  --font-en: var(--font);
  --header-height: 92px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-padding-top: calc(var(--header-height) + 24px);
  scroll-behavior: smooth;
}

html.custom-smooth-scroll{scroll-behavior:auto}

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  overflow-wrap: break-word;
}

button, input, select, textarea {
  font-family: var(--font);
}

::selection {
  color: white;
  background: #1b60e1;
}

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

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

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

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

h1, h2, h3 {
  line-height: 1.35;
  letter-spacing: -.055em;
}

ul, ol {
  padding: 0;
  margin: 0;
}

:focus-visible {
  outline: 3px solid var(--brand-ice);
  outline-offset: 7px;
}

.container {
  width: calc(100% - 112px);
  max-width: 1248px;
  margin-inline: auto;
}

.section {
  padding-block: 116px;
}

.gradient-text {
  color: #42b5d4;
  background: linear-gradient(105deg, #00c574, #2782ed);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-muted {
  color: #7b8390;
}

.eyebrow {
  font: 500 14px/1.4 var(--font-en);
  letter-spacing: .09em;
  color: #20c489;
}

.small-label {
  display: block;
  font: 500 12px/1.5 var(--font-en);
  letter-spacing: .085em;
  color: var(--muted);
}

.section-meta {
  margin-bottom: 30px;
}

h2 {
  font-size: clamp(36px, 3.5vw, 50px);
  font-weight: 700;
}

.section-heading-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 54px;
}

.section-heading-row > p {
  padding-bottom: 7px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.9;
}

.skip-link {
  position: fixed;
  top: -100px;
  left: 20px;
  padding: 10px 20px;
  background: var(--brand-blue);
  z-index: 40;
}

.skip-link:focus {
  top: 15px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 92px;
  background: rgba(0, 0, 0, .64);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  border-bottom: 1px solid #ffffff12;
}

.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 44px;
}

.brand {
  display: inline-block;
  flex-shrink: 0;
}

.brand img {
  width: 174px;
  height: auto;
}

.main-nav {
  display: flex;
  gap: 42px;
  align-items: center;
  font: 500 14px/1.5 var(--font-en);
  letter-spacing: .035em;
}

.main-nav a {
  padding-block: 10px;
  color: #bdc5d1;
  transition: color 500ms ease, background-color 500ms ease, border-color 500ms ease;
}

.main-nav a:hover {
  color: #fff;
}

.main-nav .nav-contact {
  color: white;
}

/* SOLUTION: shared disclosure navigation, including static/no-JS fallbacks. */
.nav-solution { position: relative; display: flex; align-items: center; }
.main-nav .nav-solution-link { color: #bdc5d1; }
.main-nav .nav-solution-link:is(:hover,[aria-current]), .nav-solution.is-open .nav-solution-link { color: #00c9ac; }
.nav-solution-toggle {
  display: flex; align-items: center; justify-content: center; padding: 10px 5px 10px 7px; min-width: 24px; min-height: 38px;
  border: 0; background: none; color: #bdc5d1; font: inherit;
  letter-spacing: inherit; cursor: pointer;
  transition: color 500ms ease;
}
.nav-solution:is(:hover,:focus-within,.is-open) > .nav-solution-link,
.nav-solution:is(:hover,:focus-within,.is-open) > .nav-solution-toggle,
.nav-solution-link[aria-current] + .nav-solution-toggle,
.nav-solution-toggle[aria-current], .nav-solution-toggle[aria-expanded="true"] { color: #00c9ac; }
.nav-chevron { width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 500ms ease; }
.nav-solution.is-open .nav-chevron { transform: translateY(1px) rotate(225deg); }
.solution-menu {
  position: absolute; top: 100%; left: -10px; width: 146px;
  padding: 4px; background: #0b1721; border: 1px solid #35505e;
  border-radius: 8px; box-shadow: 0 14px 32px #0006;
  opacity: 0; visibility: hidden; transform: translateY(-8px); pointer-events: none;
  transition: opacity 500ms ease, transform 500ms cubic-bezier(.22,.68,.2,1), visibility 0s 500ms;
}
.nav-solution.is-open .solution-menu,
.nav-solution:not(.nav-enhanced):is(:hover,:focus-within) .solution-menu {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; transition-delay: 0s;
}
.main-nav .solution-menu a { display: block; padding: 7px 8px; border-radius: 4px; font-size: 12px; line-height: 18px; color: #f7f8fb; letter-spacing: 0; transition: background-color 500ms ease, color 500ms ease; }
.main-nav .solution-menu a span { display: block; margin-top: 2px; font-size: 10px; line-height: 15px; font-weight: 400; letter-spacing: -.025em; color: #95aebf; white-space: nowrap; }
.main-nav .solution-menu a:focus-visible { outline: 1px solid #91c9dc; outline-offset: -2px; }
.main-nav .solution-menu a:is(:hover,:focus-visible,[aria-current]) { background: #123340; color: #4fe0c9; }
@media (max-width: 600px) {
  .main-nav { column-gap: 15px; row-gap: 0; }
.nav-solution-toggle { gap: 5px; }
  .solution-menu { left: -16px; }
}
@media (prefers-reduced-motion: reduce) {
  .solution-menu, .nav-chevron, .nav-solution-toggle, .main-nav a, .main-nav .solution-menu a { transition: none; }
}
@media (max-width: 380px) {
  .site-header .header-inner { width: calc(100% - 24px); }
  .header-inner .main-nav { font-size: 10.5px; gap: 5px; flex-wrap: nowrap; letter-spacing: 0; }
  .header-inner .main-nav > a, .header-inner .nav-solution-link { font-size: 10.5px; }
}

.hero {
  position: relative;
  background: #000;
  isolation: isolate;
  overflow: hidden;
}

.hero-wave {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 48%;
  opacity: 1;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, #0007, transparent 65%), linear-gradient(0deg, #000 0%, transparent 28%);
}

/* 히어로 애니메이션 배경(js/hero-wave.js): 이미지와 같은 층에 놓고, 첫 프레임이 그려지는 즉시(첫 화면부터) 캔버스만 보이고 이미지는 숨깁니다.
   이미지는 WebGL을 쓸 수 없거나 동작 줄이기 설정일 때의 대체 화면입니다. */
.hero-canvas {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  opacity: 0;
}

.hero.hero-wave-live .hero-canvas {
  opacity: 1;
}

.hero.hero-wave-live .hero-wave {
  opacity: 0;
}

/* '세 가지 솔루션' 구역 배경(js/dark-wave.js + js/hero-wave2.js): 라이브러리가 .wave-section 을 붙이며 자체 CSS를 주입합니다.
   구역의 넘침은 원래대로 두어 카드 hover 그림자가 잘리지 않게 합니다 (배경 층은 스스로 잘라 그립니다). */
.solutions-group.wave-section {
  overflow: visible;
}

.hero-inner {
  min-height: 656px;
  padding-top: 104px;
  padding-bottom: 90px;
  text-align: center;
}

.hero-eyebrow {
  color: #9eabb9;
  letter-spacing: .19em;
  font-size: 12px;
  margin-bottom: 25px;
}

.hero h1 {
  font-size: clamp(54px, 5.3vw, 76px);
  line-height: 1.28;
  letter-spacing: -.065em;
  font-weight: 700;
}

.hero-description {
  margin-top: 26px;
  color: #a7aeb8;
  font-size: 17px;
  line-height: 1.85;
  letter-spacing: -.02em;
}

.hero-description strong {
  font-weight: 500;
  color: #e1e5ed;
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 22px;
  align-items: center;
  margin-top: 36px;
}

.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 36px;
  padding: 16px 25px;
  font-size: 15px;
  font-weight: 700;
}

.button-primary {
  --hover-background: linear-gradient(105deg, #008f45, #164fbe);
  border-radius: 5px;
  background: var(--gradient);
  color: #fff;
  box-shadow: inset 0 1px #ffffff35;
  transition: transform var(--hover-duration) ease, box-shadow var(--hover-duration) ease;
}

/* 그라데이션은 직접 보간되지 않으므로 별도 배경 레이어의 투명도로 전환합니다. */
.button-primary, .solution-button, .contact-project {
  position: relative;
  isolation: isolate;
}

.button-primary::before, .solution-button::before, .contact-project::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--hover-background);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--hover-duration) ease;
}

.solution-button::before, .contact-project::before {
  inset: -1px;
  border: 1px solid transparent;
}

.button-primary:hover::before, .button-primary:focus-visible::before,
.solution-card:hover .solution-button::before, .solution-card:focus-within .solution-button::before,
.contact-project:hover::before, .contact-project:focus-visible::before {
  opacity: 1;
}

.button-primary:hover, .button-primary:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--hover-glow), inset 0 1px #ffffff35;
}

.hero-bottom {
  margin-top: 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center;
  gap: 24px;
  /* 상단 경계선 안쪽부터 마우스 아이콘까지의 간격입니다. */
  padding-block: 5svw 22px;
}

.hero-bottom > p {
  font-size: 13px;
  color: #858e9a;
}

.hero-bottom strong {
  color: #c1c8d3;
  font-weight: 400;
}

.hero-domains {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  display: flex;
  gap: 14px;
  align-items: center;
  color: #aeb9c8;
  font: 500 12px var(--font-en);
  letter-spacing: .09em;
}

.hero-domains i {
  height: 1px;
  width: 22px;
  background: #315670;
}

.scroll-cue {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-self: center;
  gap: 10px;
  padding: 0 20px 4px;
  font: 600 13px var(--font-en);
  color: #76dec4;
  letter-spacing: .1em;
  transition: color 500ms ease, transform 500ms ease;
}

.scroll-indicator {
  display: block;
  width: 25px;
  height: 36px;
  border: 1.5px solid #76dec4;
  border-radius: 14px;
  box-shadow: 0 0 24px #00b08030;
  position: relative;
  transition: border-color 500ms ease, box-shadow 500ms ease;
}

.scroll-indicator::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 10px;
  width: 3px;
  height: 8px;
  border-radius: 3px;
  background: #a5f3de;
  transition: transform 500ms ease, background-color 500ms ease;
}

.scroll-cue:is(:hover,:focus-visible) {
  color: #fff;
  transform: translateY(3px);
}

.scroll-cue:is(:hover,:focus-visible) .scroll-indicator {
  border-color: #fff;
  box-shadow: 0 0 25px #24d2a652;
}
.scroll-cue:is(:hover,:focus-visible) .scroll-indicator::after { transform: translateY(4px); background: #fff; }
@media (prefers-reduced-motion: reduce) {
  .scroll-cue, .scroll-indicator, .scroll-indicator::after { transition: none; }
  .scroll-cue:is(:hover,:focus-visible), .scroll-cue:is(:hover,:focus-visible) .scroll-indicator::after { transform: none; }
}

.capture-process {
  padding-block: calc(24px + var(--review-space)) calc(54px + var(--review-space));
}

.process-flow {
  --process-gap: calc(24px + var(--review-space));
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: var(--process-gap);
  max-width: 1040px;
  margin-inline: auto;
}

.process-flow li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.process-flow li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 31px;
  left: calc(50% + 54px);
  width: calc(100% + var(--process-gap) - 108px);
  height: 1px;
  background: linear-gradient(90deg,#25747790,#294c8c60);
}

.process-flow img {
  width: 64px;
  height: 64px;
  margin-bottom: 19px;
}

.process-flow strong {
  font-size: 17px;
  font-weight: 500;
  color: #d9e7ef;
  letter-spacing: -.025em;
}

.process-flow li > span {
  margin-top: 8px;
  font: 500 11px/1.5 var(--font-en);
  color: #738ea6;
  letter-spacing: .055em;
}

.process-flow li:last-child > strong {
  color: #71dbbb;
}

.mission {
  background: #080a0d;
}

.mission-layout {
  display: grid;
  grid-template-columns: .85fr 1.35fr;
  gap: 80px;
}

.mission-heading > p {
  margin-top: 25px;
  color: var(--muted);
  font-size: 17px;
}

.mission-note {
  margin-top: 62px;
  padding-left: 20px;
  border-left: 2px solid #11b77b;
}

.mission-note .small-label {
  font-size: 11px;
  color: #24bc8c;
}

.mission-note p {
  margin-top: 9px;
  font-size: 20px;
  line-height: 1.7;
  letter-spacing: -.035em;
}

.cost-divider {
  width: 100%;
  height: 1px;
  background: var(--line);
}

.cost-item {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 18px;
  padding: 27px 0 32px;
}

.item-number {
  color: #547ca0;
  font: 400 14px/1.5 var(--font-en);
  padding-top: 1px;
}

.cost-item .small-label {
  color: #778aa0;
  font-size: 11px;
  margin-bottom: 11px;
}

.cost-item h3 {
  font-size: 21px;
  letter-spacing: -.05em;
}

.cost-item p {
  color: var(--muted);
  font-size: 16px;
  margin-top: 14px;
  line-height: 1.85;
}

.technology {
  background: #050607;
}

.technology, .solutions {
  padding-block: calc(116px + var(--review-space));
}

.technology .section-heading-row, .solutions .section-heading-row {
  margin-bottom: calc(54px + var(--review-space));
}

.technology-showcase {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: calc(24px + var(--review-space));
}

.city-figure {
  position: relative;
  min-height: 422px;
  overflow: hidden;
  border: 1px solid #ffffff22;
  border-radius: 8px;
  background: #12202c;
}

.city-video {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: cover;
}

.city-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,#02060c66,transparent 35%,#02060c08 60%,#02060ce6);
}

.image-label {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  top: 22px;
  left: 24px;
  right: 24px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font: 500 11px var(--font-en);
  letter-spacing: .08em;
  text-shadow: 0 1px 8px #000;
}

.city-figure figcaption {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  bottom: 26px;
  left: 26px;
  right: 26px;
  font-size: 23px;
  font-weight: 500;
  letter-spacing: -.035em;
}

.city-video[controls] ~ figcaption {
  bottom: 64px;
}

.engine-feature {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  padding: 31px 34px;
  background: linear-gradient(140deg, #112136, #0c121b 65%);
  border: 1px solid #496d993b;
}

.reveal-pending {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 650ms cubic-bezier(.2,.7,.2,1), transform 650ms cubic-bezier(.2,.7,.2,1);
}

.reveal-pending.is-revealed {
  opacity: 1;
  transform: none;
}

.engine-feature > .small-label {
  color: #79a6df;
}

.engine-gaussians {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 180px;
  height: 120px;
  opacity: .14;
  pointer-events: none;
}

.engine-feature h3 {
  position: relative;
  margin-top: 43px;
  font-size: 31px;
}

.engine-feature > p {
  color: #adb9ca;
  font-size: 16px;
  margin-top: 16px;
}

.patent-stats {
  display: flex;
  gap: 46px;
  margin-top: 32px;
  padding-top: 22px;
  border-top: 1px solid #ffffff19;
}

.patent-stats > div {
  display: flex;
  align-items: center;
  gap: 16px;
}

.patent-stats strong {
  font: 400 43px/1 var(--font-en);
  color: #e6edf9;
}

.patent-stats strong > span {
  font: 400 14px var(--font);
  padding-left: 4px;
}

.patent-stats div > span {
  font-size: 13px;
  color: #8f9bad;
}

.technology-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  margin-top: calc(42px + var(--review-space));
}

.technology-item {
  position: relative;
  padding: 8px 35px 5px;
  border-left: 1px solid var(--line);
}

.technology-item:first-child {
  padding-left: 0;
  border-left: 0;
}

.technology-item:last-child {
  padding-right: 0;
}

.technology-item .small-label {
  color: #7188a4;
  font-size: 11px;
}

.feature-icon {
  display: block;
  width: 64px;
  height: 64px;
  margin-bottom: 22px;
}

.technology-item h3 {
  margin-top: 18px;
  font-size: 26px;
}

.technology-item p {
  margin-top: 20px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.9;
}

.feature-tag {
  display: inline-block;
  font-size: 12px;
  color: #a9bfd7;
  background: #121c27;
  border: 1px solid #38557650;
  border-radius: 3px;
  padding: 4px 9px;
  margin-top: 24px;
}

.solutions-group {
  --solution-link-space: 5svw;
  --solution-hover-lift: 4px;
  position: relative;
  isolation: isolate;
  /* 투명 WebP를 검은 바탕 위에 두 섹션에 걸쳐 표시합니다. */
  background: #000 url("../assets/dark-wave_nobg.webp") no-repeat center / cover;
}

.solutions {
  padding-bottom: 0;
  background: transparent;
}

.solution-grid {
  --solution-logo-height: clamp(128px, 14svw, 170px);
}

.solution-grid, .solution-details-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: var(--solution-gap);
  align-items: stretch;
}

.solution-card, .solution-detail {
  --card-accent: #20c28e;
  position: relative;
  min-width: 0;
}

.solution-card {
  z-index: 1;
  display: flex;
  flex-direction: column;
  transition: transform var(--hover-duration) ease;
}

.solution-button {
  --hover-background: linear-gradient(130deg,#104137,#183568) padding-box, var(--gradient) border-box;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px 26px 0;
  color: inherit;
  border: 1px solid transparent;
  border-radius: 12px;
  background: linear-gradient(130deg,#0c191b,#0c1215) padding-box, linear-gradient(130deg,#257b685e,#376a9b60) border-box;
  overflow: hidden;
  box-shadow: 0 14px 45px #0004;
  transition: box-shadow var(--hover-duration) ease;
}

.solution-card:hover, .solution-card:focus-within {
  transform: translateY(calc(-1 * var(--solution-hover-lift)));
}

.solution-card:hover .solution-button, .solution-card:focus-within .solution-button {
  box-shadow: var(--hover-glow);
}

.solution-button:focus-visible {
  outline-offset: -5px;
  border-radius: 11px;
}

.solution-topline {
  display: block;
  font: 500 12px/1.5 var(--font-en);
  color: var(--card-accent);
  letter-spacing: .06em;
}

.solution-art {
  height: 227px;
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 18px -26px 0;
  overflow: hidden;
  background-color: transparent;
  transition: background-color var(--hover-duration) ease;
}

.solution-button:hover .solution-art, .solution-button:focus-visible .solution-art {
  background-color: rgba(255,255,255,.86);
}

.solution-logo {
  display: block;
  width: auto;
  height: var(--solution-logo-height);
  max-width: calc(100% - 48px);
  object-fit: contain;
  flex: 0 0 auto;
}

.solution-space, #solution-spacetwin-detail {
  --card-accent: #6ca1ff;
}

.solution-body, #solution-noonbody-detail {
  --card-accent: #a3c6f5;
}

.solution-image-box {
  border-block: 1px solid #ffffff14;
}

.solution-description {
  display: block;
  flex: 1;
  padding-top: 23px;
}

.solution-name {
  display: block;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -.025em;
  color: var(--card-accent);
  font-weight: 500;
}

.solution-tagline {
  display: block;
  margin-top: 12px;
  font-size: 25px;
  line-height: 1.55;
  font-weight: 600;
  letter-spacing: -.055em;
}

.solution-cta {
  transition: color var(--hover-duration) ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #ffffff22;
  margin-top: 31px;
  padding-block: 21px;
  color: #cbd5df;
  font-size: 14px;
}

.solution-plus {
  font: 300 24px/1 var(--font-en);
}

.solution-card:hover .solution-cta, .solution-card:focus-within .solution-cta {
  color: var(--card-accent);
}

.solution-details-section {
  padding-block: var(--solution-link-space);
  background: transparent;
}

.solution-detail {
  padding: 26px 26px 27px;
  border: 1px solid #5d87a75c;
  border-top-color: var(--card-accent);
  border-radius: 12px;
  background: #0b1520;
  scroll-margin-top: 24px;
}

.solution-detail::before {
  content: "";
  position: absolute;
  width: 1px;
  /* hover 이동 거리만큼 카드 뒤까지 겹쳐, 움직이는 중에도 선이 이어집니다. */
  height: calc(var(--solution-link-space) + var(--solution-hover-lift) + 2px);
  z-index: 0;
  left: 50%;
  bottom: 100%;
  background: linear-gradient(to bottom, #5d87a75c, var(--card-accent));
  pointer-events: none;
}

.solution-detail::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  top: -4px;
  left: calc(50% - 3px);
  border-radius: 50%;
  background: var(--card-accent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--card-accent) 35%, transparent);
  pointer-events: none;
}

.solution-detail:target {
  border-color: var(--card-accent);
  box-shadow: 0 0 30px color-mix(in srgb, var(--card-accent) 12%, transparent);
}

.solution-detail-title {
  margin-bottom: 17px;
  color: var(--card-accent);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -.025em;
}

.solution-detail:focus-visible {
  outline-offset: -5px;
}

.solution-detail p {
  font-size: 16px;
  color: #bdc7d2;
  line-height: 1.85;
}

.solution-detail ul {
  list-style: none;
  margin-top: 16px;
}

.solution-detail li {
  margin-top: 9px;
  padding-left: 12px;
  position: relative;
  font-size: 14px;
  color: #98a8ba;
}

.solution-detail li::before {
  content: "";
  width: 3px;
  height: 3px;
  background: var(--card-accent);
  position: absolute;
  top: 11px;
  left: 0;
}

.platform-heading h2 {
  font-size: clamp(36px,3.6vw,52px);
  line-height: 1.5;
}

.platform-heading p {
  color: var(--muted);
  font-size: 17px;
  margin-top: 25px;
}

.growth-flow {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  list-style: none;
  margin-top: 65px;
  gap: 29px;
}

.growth-step {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 19px;
  border-bottom: 1px solid #375063;
  margin-bottom: 26px;
}

.growth-step > span:first-child {
  font: 400 36px var(--font-en);
  color: #5f94a9;
}

.growth-flow .small-label {
  color: #51858e;
  font-size: 11px;
}

.growth-flow h3 {
  font-size: 22px;
  margin-top: 9px;
}

.growth-flow p {
  font-size: 16px;
  color: #8e9cab;
  line-height: 1.85;
  margin-top: 18px;
}

.asset-statement {
  text-align: center;
  margin-top: 90px;
  padding-block: 55px;
  background: radial-gradient(ellipse at center,#0e393b45,transparent 70%);
}

.asset-statement > p {
  font-size: 16px;
  color: #8995a2;
}

.asset-statement strong {
  display: block;
  font-size: clamp(36px,4vw,58px);
  line-height: 1.45;
  letter-spacing: -.06em;
  margin-top: 12px;
}

.asset-caption {
  display: block;
  margin-top: 19px;
  font-size: 14px;
  color: #657889;
}

.contact {
  background: #0a1320;
  border-top: 1px solid #29415f60;
  padding-block: 88px 48px;
}

.contact-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
  padding-bottom: 65px;
}

.contact .eyebrow {
  color: #7fa6da;
  font-size: 12px;
}

.contact h2 {
  font-size: clamp(40px,4.1vw,60px);
  margin-top: 25px;
}

.contact-inner p:not(.eyebrow) {
  margin-top: 25px;
  font-size: 17px;
  color: #8e9cae;
}

.contact-project {
  --hover-background: var(--gradient) padding-box, var(--gradient) border-box;
  width: 322px;
  max-width: 100%;
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 11px;
  padding: 30px;
  border: 1px solid transparent;
  border-radius: 22px;
  background: linear-gradient(130deg,#0b302e,#12264c) padding-box, var(--gradient) border-box;
  box-shadow: 0 14px 45px #0004;
  transition: transform var(--hover-duration) ease, box-shadow var(--hover-duration) ease;
}

.contact-button-kicker {
  transition: color var(--hover-duration) ease;
  color: #68e1b4;
  font: 500 12px var(--font-en);
  letter-spacing: .13em;
}

.contact-button-label {
  font-size: 27px;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: -.05em;
}

.contact-button-note {
  transition: color var(--hover-duration) ease;
  font-size: 13px;
  color: #9cbccf;
}

.contact-project:hover, .contact-project:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--hover-glow);
}

.contact-project:hover .contact-button-kicker,
.contact-project:hover .contact-button-note,
.contact-project:focus-visible .contact-button-kicker,
.contact-project:focus-visible .contact-button-note {
  color: #fff;
}

.contact-methods {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 24px;
  border-top: 1px solid #ffffff24;
  padding-top: 28px;
}

.contact-methods > a {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 26px 30px;
  border: 1px solid #ffffff18;
  border-radius: 12px;
  background: #ffffff03;
}

.contact-methods > a > span {
  font: 500 12px var(--font-en);
  color: #7b9ec9;
  letter-spacing: .09em;
}

.contact-methods strong {
  font: 400 clamp(23px,2.4vw,32px)/1.4 var(--font-en);
  color: #d4e1f1;
  overflow-wrap: anywhere;
}

.contact-methods > a:hover {
  background: #ffffff07;
  border-color: #5d8aaf70;
}

.contact-methods > a:hover strong {
  color: #8acde8;
}

.site-footer {
  padding-block: 51px 26px;
  background: #05080d;
}

.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 36px;
}

.site-footer .brand img {
  width: 151px;
}

.back-top {
  white-space: nowrap;
  display: flex;
  gap: 23px;
  align-items: center;
  font: 500 11px var(--font-en);
  color: #7c8b9f;
  letter-spacing: .055em;
}

.back-top span {
  font-size: 24px;
}

.company-info {
  color: #8692a2;
  font-size: 13px;
  line-height: 1.9;
}

.company-info p:first-child {
  margin-bottom: 12px;
}

.company-info strong {
  color: #c7ced8;
  font-weight: 500;
}

.company-info address {
  font-style: normal;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font: 400 11px var(--font-en);
  letter-spacing: .035em;
  color: #6e7c8e;
  border-top: 1px solid var(--line);
  padding-top: 24px;
  margin-top: 34px;
}

@media (max-width: 900px) {
  .container {
    width: calc(100% - 40px);
  }

  .section {
    padding-block: 65px;
  }

  .technology, .solutions {
    padding-block: calc(65px + var(--review-space));
  }

  .solutions {
    padding-bottom: 0;
  }

  .site-header {
    height: auto;
  }

  .header-inner {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding-block: 20px 12px;
  }

  .main-nav {
    gap: 22px;
    font-size: 12px;
    justify-content: center;
    flex-wrap: wrap;
  }

  .hero-inner {
    min-height: auto;
    padding-block: 75px 62px;
  }

  .hero h1 {
    font-size: clamp(34px,7.2vw,60px);
  }

  .hero-eyebrow {
    font-size: 10px;
    letter-spacing: .08em;
  }

  .hero-description {
    font-size: 15px;
  }

  .hero-description br {
    display: none;
  }

  .hero-description strong {
    display: block;
  }

  .hero-actions {
    gap: 10px;
    flex-wrap: wrap;
  }

  .button {
    font-size: 14px;
    gap: 19px;
    padding: 14px 17px;
  }

  .hero-bottom {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 24px;
    padding-block: 48px 32px;
  }

  .hero-bottom > p {
    grid-column: 1;
    grid-row: 2;
    text-align: center;
  }

  .hero-domains {
    grid-column: 1;
    grid-row: 3;
    justify-self: center;
  }

  .scroll-cue {
    grid-column: 1;
    grid-row: 1;
    display: flex;
  }

  .capture-process {
    padding-block: 56px calc(42px + var(--review-space));
  }

  .process-flow {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: calc(32px + var(--review-space)) calc(20px + var(--review-space));
  }

  .process-flow li::after {
    display: none;
  }

  .process-flow img {
    width: 56px;
    height: 56px;
    margin-bottom: 13px;
  }

  .process-flow strong {
    font-size: 16px;
  }

  .process-flow li > span {
    font-size: 10px;
    letter-spacing: .02em;
  }

  .section-meta {
    margin-bottom: 26px;
  }

  .eyebrow {
    font-size: 12px;
  }

  h2 {
    font-size: clamp(31px,5.6vw,44px);
  }

  .mission-layout, .technology-showcase, .solution-grid, .solution-details-grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .technology-showcase, .solution-grid, .solution-details-grid {
    gap: calc(26px + var(--review-space));
  }

  .mission-layout {
    gap: 72px;
  }

  .mission-note {
    margin-top: 28px;
  }

  .cost-item {
    grid-template-columns: 24px 1fr;
    gap: 12px;
  }

  .cost-item h3 {
    font-size: 20px;
  }

  .section-heading-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    margin-bottom: 33px;
  }

  .technology .section-heading-row, .solutions .section-heading-row {
    margin-bottom: calc(33px + var(--review-space));
  }

  .section-heading-row > p {
    font-size: 15px;
  }

  .city-figure {
    min-height: 300px;
  }

  .city-figure figcaption {
    font-size: 19px;
    left: 20px;
    right: 20px;
  }

  .image-label {
    left: 20px;
    right: 20px;
  }

  .image-label > span:last-child {
    display: none;
  }

  .engine-feature {
    padding: 27px;
  }

  .technology-grid {
    grid-template-columns: 1fr;
    margin-top: 64px;
    gap: calc(29px + var(--review-space));
  }

  .technology-item, .technology-item:first-child, .technology-item:last-child {
    border-left: 0;
    border-bottom: 1px solid var(--line);
    padding: 0 0 28px;
  }

  .technology-item h3 {
    font-size: 24px;
  }

  .technology-item h3 br {
    display: none;
  }

  .solution-art {
    height: 180px;
  }

  .solution-grid {
    --solution-logo-height: 130px;
  }

  .solution-detail::before, .solution-detail::after {
    display: none;
  }

  .solution-description { padding-top: 18px; }
  .solution-tagline { font-size: 23px; line-height: 1.45; }
  .solution-cta { margin-top: 24px; padding-block: 16px; }
  .solution-details-section { padding-block: 64px; }

  .growth-flow {
    grid-template-columns: 1fr 1fr;
    gap: 33px 24px;
    margin-top: 36px;
  }

  .growth-flow h3 {
    font-size: 21px;
  }

  .growth-flow p {
    font-size: 14px;
  }

  .growth-flow p br {
    display: none;
  }

  .platform-heading h2 {
    font-size: clamp(31px,5.6vw,44px);
  }

  .platform-heading p {
    font-size: 15px;
  }

  .asset-statement {
    margin-top: 64px;
    padding-block: 64px;
  }

  .asset-statement strong {
    font-size: clamp(31px,5.6vw,44px);
  }

  .footer-top { flex-wrap: wrap; gap: 28px; }
  .footer-top .back-top { margin-left: auto; }

  .contact {
    padding-top: 55px;
  }

  .contact-inner {
    align-items: flex-start;
    gap: 30px;
    flex-direction: column;
    padding-bottom: 40px;
  }

  .contact h2 {
    font-size: clamp(34px,6vw,48px);
  }

  .contact-project {
    width: 100%;
    padding: 24px;
    border-radius: 18px;
  }

  .contact-button-label {
    font-size: 25px;
  }

  .contact-methods {
    grid-template-columns: 1fr;
  }

  .contact-methods > a {
    padding: 22px 24px;
  }

  .contact-methods strong {
    font-size: clamp(20px,4.8vw,28px);
  }

  .footer-bottom > span {
    display: none;
  }
}

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

  .reveal-pending, .reveal-pending.is-revealed, .contact-project, .contact-project:hover, .contact-project:focus-visible, .button-primary, .button-primary:hover, .button-primary:focus-visible, .solution-card, .solution-card:hover, .solution-card:focus-within {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .solution-button, .solution-art {
    transition: none;
  }

  .button-primary::before, .solution-button::before, .contact-project::before,
  .solution-cta, .contact-button-kicker, .contact-button-note {
    transition: none;
  }
}

@media print {
  .site-header {
    position: static;
    backdrop-filter: none;
  }

  .reveal-pending {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (forced-colors: active) {
  .gradient-text {
    background: none;
    -webkit-text-fill-color: CanvasText;
    color: CanvasText;
  }

  .solution-button, .solution-detail, .button, .contact-project {
    border: 1px solid ButtonText;
  }
}

/* Homepage contact cards use the requested half-second motion. */
.contact-methods.reveal-pending{transition-duration:.5s}
.contact-methods>a{transition:background-color .5s ease,border-color .5s ease}
.contact-methods strong{transition:color .5s ease}
.contact-methods>a:focus-visible{background:#102936;border-color:#59bdd5}
.contact-methods>a:focus-visible strong{color:#8acde8}
@media(prefers-reduced-motion:reduce){.contact-methods.reveal-pending,.contact-methods>a,.contact-methods strong{transition:none}}