.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 64px;
  min-height: 64px;
  max-height: 64px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.92);
  /* border는 레이아웃 높이에 영향 없도록 inset shadow */
  border-bottom: none;
  box-shadow: inset 0 -1px 0 var(--color-border);
  /* backdrop-filter 제거: FHD에서 GNB 한글 ClearType 깨짐 유발 */
}

/*
  GNB는 g-grid(vw clamp 패딩)와 분리.
  텍스트는 flex 세로중앙 대신 line-height:64px로 정수 스냅
  (align-items:center → 서브픽셀 Y → FHD에서 64.02 / 한글 깨짐).
*/
.site-header__inner {
  position: relative;
  display: grid;
  grid-template-columns: var(--grid-template);
  column-gap: 16px;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  height: 64px;
  min-height: 64px;
  max-height: 64px;
  align-items: stretch;
  padding-inline: 24px;
  box-sizing: border-box;
  row-gap: 0;
}

@media (min-width: 1440px) {
  .site-header__inner {
    padding-inline: 40px;
  }
}

@media (min-width: 1920px) {
  .site-header__inner {
    padding-inline: 72px;
  }
}

@media (min-width: 2560px) {
  .site-header__inner {
    padding-inline: 96px;
  }
}

.site-header__logo,
.site-header__link {
  display: block;
  height: 64px;
  margin: 0;
  line-height: 64px;
  transform: none;
  filter: none;
  -webkit-font-smoothing: auto;
  text-rendering: auto;
}

.site-header__logo {
  grid-column: 1;
  padding-inline: 8px;
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text-inverse);
  text-decoration: none;
  z-index: 2;
}

/* —— Site-wide GRID system —— */
/* Content tracks share margin / gutter (no visual guide overlay) */
.g-grid,
.site-footer__inner,
.hero--immersive,
.stats__inner,
.stats__row,
.portfolio-rise__panel,
.portfolio-rise__grid,
.why-dark__inner,
.why-dark__row,
.services-rise__panel,
.services-rise__offer,
.services-rise__step,
.container,
.container--narrow {
  display: grid;
  grid-template-columns: var(--grid-template);
  column-gap: var(--grid-gutter);
  width: 100%;
  max-width: none;
  margin: 0;
  padding-inline: var(--grid-margin);
  box-sizing: border-box;
  row-gap: 0;
}

/* GNB + 하단 콘텐츠 에어리어 (히어로 제외) */
.site-footer__inner,
.stats__inner,
.portfolio-rise__panel,
.why-dark__inner,
.services-rise__panel,
.container,
.container--narrow {
  max-width: var(--container-max);
  margin-inline: auto;
}

/* Nested grids: no second outer margin (stay inside parent tracks) */
.g-grid .g-grid,
.stats__inner .stats__row,
.portfolio-rise__panel .portfolio-rise__grid,
.why-dark__inner .why-dark__row,
.services-rise__panel .services-rise__offer,
.services-rise__panel .services-rise__step,
.services-rise__process .services-rise__step {
  padding-inline: 0;
  width: 100%;
}

.g-pad {
  padding-inline: var(--grid-cell-pad);
}

.g-full { grid-column: 1 / -1; }
.g-col-1 { grid-column: 1 / 2; }
.g-col-2 { grid-column: 2 / 3; }
.g-col-3 { grid-column: 3 / 4; }
.g-col-4 { grid-column: 4 / 5; }
.g-col-5 { grid-column: 5 / 6; }
.g-span-2 { grid-column: span 2; }
.g-span-3 { grid-column: span 3; }
.g-span-4 { grid-column: span 4; }
.g-from-1-to-3 { grid-column: 1 / 3; }
.g-from-1-to-4 { grid-column: 1 / 4; }
.g-from-2-to-5 { grid-column: 2 / 5; }
.g-from-2-to-6 { grid-column: 2 / 6; }
.g-from-3-to-6 { grid-column: 3 / 6; }
.g-from-3-to-5 { grid-column: 3 / 5; }
.g-from-4-to-6 { grid-column: 4 / 6; }

@media (max-width: 768px) {
  :root {
    --grid-margin: clamp(1rem, 4vw, 1.5rem);
    --grid-gutter: clamp(0.65rem, 2vw, 1rem);
  }

  .site-header__inner {
    padding-inline: 16px;
  }
}

.site-header__toggle {
  display: none;
  position: relative;
  z-index: 2;
  grid-column: -2 / -1;
  justify-self: end;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
}

.site-header__toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform var(--duration-normal) var(--ease-default), opacity var(--duration-fast) var(--ease-default);
}

.site-header.is-nav-open .site-header__toggle-bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.site-header.is-nav-open .site-header__toggle-bar:nth-child(2) {
  opacity: 0;
}

.site-header.is-nav-open .site-header__toggle-bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.site-header__nav {
  display: flex;
  grid-column: 2 / -1;
  justify-content: flex-end;
  gap: 24px;
  align-items: stretch;
  padding-inline: 8px 0;
  height: 64px;
}

.site-header__link {
  font-size: 14px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.82);
}

.site-header__link--active {
  font-weight: 600;
  color: var(--color-accent-500);
}

/* CTA: 헤더 높이 안에서 정수 마진으로 수직 배치 (flex center 금지) */
.site-header__cta {
  display: inline-block;
  box-sizing: border-box;
  height: 36px;
  margin: 14px 0;
  padding: 0 16px;
  line-height: 34px;
  border: 1px solid transparent;
  background: var(--color-accent-500);
  color: white;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transform: none;
  filter: none;
  -webkit-font-smoothing: auto;
  text-rendering: auto;
}

@media (max-width: 768px) {
  .site-header__toggle {
    display: inline-flex;
    color: var(--color-text-inverse);
  }

  .site-header__nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: var(--space-2);
    padding: calc(var(--header-height) + var(--space-8)) var(--space-8) var(--space-8);
    background: var(--color-surface);
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    transition:
      transform var(--duration-normal) var(--ease-out-soft),
      opacity var(--duration-normal) var(--ease-default),
      visibility var(--duration-normal);
  }

  .site-header.is-nav-open .site-header__nav {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
  }

  .site-header__link {
    height: auto;
    line-height: 1.4;
    font-size: var(--font-size-xl);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-border);
  }

  .site-header__cta {
    height: auto;
    margin: var(--space-6) 0 0;
    line-height: 1.4;
    text-align: center;
    padding: var(--space-4) var(--space-6);
    font-size: var(--font-size-base);
  }

  body.nav-open {
    overflow: hidden;
  }
}

.site-footer {
  background: var(--color-primary-500);
  color: var(--color-text-inverse);
  padding: var(--space-12) 0;
  margin-top: 0;
}

.site-footer__inner > * {
  padding-inline: var(--grid-cell-pad);
}

.site-footer__inner > *:nth-child(1) { grid-column: 1 / 3; }
.site-footer__inner > *:nth-child(2) { grid-column: 3 / 4; }
.site-footer__inner > *:nth-child(3) { grid-column: 4 / 6; }

.site-footer__link {
  color: inherit;
  opacity: 0.8;
  font-size: var(--font-size-sm);
  text-decoration: none;
  display: block;
  margin-bottom: var(--space-2);
}

.site-footer__bottom {
  width: 100%;
  max-width: var(--container-max);
  margin: var(--space-8) auto 0;
  padding: var(--space-6) var(--grid-margin) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--font-size-sm);
  opacity: 0.6;
  text-align: center;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .site-footer__inner > *:nth-child(1),
  .site-footer__inner > *:nth-child(2),
  .site-footer__inner > *:nth-child(3) {
    grid-column: 1 / -1;
  }
}

.hero {
  background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-700) 100%);
  color: var(--color-text-inverse);
  padding: var(--space-16) var(--space-6);
  text-align: center;
}

.hero__inner {
  max-width: 800px;
  margin: 0 auto;
}

.hero:not(.hero--immersive):not(.hero--board) h1 {
  font-size: var(--font-size-4xl);
  font-weight: 700;
  margin-bottom: var(--space-6);
  line-height: 1.2;
}

.hero:not(.hero--immersive):not(.hero--board) p {
  font-size: var(--font-size-lg);
  opacity: 0.9;
  margin-bottom: var(--space-8);
}

/* —— Shared stage (hero + stats) —— */
.stage-dark {
  --hero-bg: #000000;
  --hero-text: #ffffff;
  --hero-muted: rgba(255, 255, 255, 0.55);
  position: relative;
  isolation: isolate;
  overflow: visible;
  background: var(--hero-bg);
  color: var(--hero-text);
}

.stage-dark__pin {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: var(--hero-bg);
}

.page-home .stage-dark__pin {
  --hero-bg: #f3f4f6;
  --hero-text: #1a1f36;
  --hero-muted: rgba(26, 31, 54, 0.55);
  background: var(--hero-bg);
  color: var(--hero-text);
}

.stage-dark .hero__atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero__atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero__blob {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(100px);
  will-change: transform, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.hero__blob--a {
  width: min(120vw, 1400px);
  height: min(72vw, 820px);
  top: 12%;
  left: -18%;
  background: radial-gradient(
    ellipse 70% 60% at 30% 40%,
    rgba(0, 102, 255, 0.55) 0%,
    rgba(47, 120, 255, 0.28) 35%,
    rgba(90, 148, 255, 0.1) 58%,
    transparent 78%
  );
  animation: hero-drift-a 12s ease-in-out infinite alternate;
}

.hero__blob--b {
  width: min(115vw, 1280px);
  height: min(68vw, 760px);
  top: 52%;
  right: -20%;
  background: radial-gradient(
    ellipse 70% 60% at 60% 50%,
    rgba(0, 82, 214, 0.45) 0%,
    rgba(0, 102, 255, 0.22) 38%,
    rgba(120, 180, 255, 0.1) 60%,
    transparent 80%
  );
  animation: hero-drift-b 15s ease-in-out infinite alternate;
}

.hero__blob--c {
  width: min(70vw, 720px);
  height: min(70vw, 720px);
  top: 36%;
  left: 32%;
  opacity: 0.75;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(0, 102, 255, 0.18) 42%,
    transparent 72%
  );
  animation: hero-drift-c 9s ease-in-out infinite alternate;
}

.hero__grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.18;
  pointer-events: none;
  mix-blend-mode: normal;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  background-repeat: repeat;
  transform: translateZ(0);
  image-rendering: auto;
}

/* —— Immersive home hero —— */
.hero--immersive {
  position: relative;
  z-index: 1;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding-block: calc(var(--header-height) + var(--space-12)) var(--space-12);
  overflow: visible;
  background: transparent;
  color: var(--hero-text);
  text-align: center;
}

/* —— Miro / collab board hero —— */
.hero--board {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: calc(var(--header-height) + var(--space-8)) var(--grid-margin) var(--space-12);
  overflow: hidden;
  background: transparent;
  color: var(--hero-text);
  text-align: center;
}

.hero-board__grid {
  position: absolute;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(26, 31, 54, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26, 31, 54, 0.07) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: center center;
  animation: board-grid-drift 28s linear infinite;
  will-change: transform;
}

.hero-board__stage {
  position: relative;
  z-index: 1;
  /* FHD 기준 72rem, 해상도 구간별 정수 rem */
  width: min(100%, 56rem);
  margin: 0 auto;
  padding: 3.5rem 0 2.5rem;
}

@media (min-width: 1440px) {
  .hero-board__stage {
    width: min(100%, 64rem);
    padding: 4.5rem 0 2.75rem;
  }
}

@media (min-width: 1920px) {
  .hero-board__stage {
    width: min(100%, 72rem);
    padding: 5.5rem 0 3rem;
  }
}

@media (min-width: 2560px) {
  .hero-board__stage {
    width: min(100%, 96rem);
    padding: 7.25rem 0 4rem;
  }
}

.hero-board__comment {
  position: absolute;
  top: 0.5rem;
  left: 8%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: min(90%, 20rem);
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(26, 31, 54, 0.08);
  box-shadow: 0 8px 24px rgba(26, 31, 54, 0.1);
  font-size: 0.875rem;
  font-weight: 500;
  color: #1a1f36;
  white-space: nowrap;
  opacity: 0;
}

.hero--board.is-live .hero-board__comment {
  animation:
    board-comment-in 700ms var(--ease-emphatic) 180ms forwards,
    board-float-a 6s ease-in-out 900ms infinite;
}

.hero-board__caret {
  display: inline-block;
  width: 1.5px;
  height: 1em;
  margin-inline: 1px 2px;
  background: #3b82f6;
  border-radius: 1px;
  opacity: 0;
  vertical-align: -0.12em;
}

.hero--board.is-live .hero-board__caret {
  animation: board-caret 1s steps(1) 900ms infinite;
}

.hero-board__comment-emoji {
  flex-shrink: 0;
  opacity: 0;
  transform: scale(0.6);
}

.hero--board.is-live .hero-board__comment-emoji {
  animation: board-emoji-in 500ms var(--ease-emphatic) 1100ms forwards;
}

.hero-board__select {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  padding: 1.5rem 2rem;
  border: 1.5px solid #1a1f36;
  background: transparent;
  opacity: 0;
  /* transform 금지: 자식 한글이 GPU 레이어에서 서브픽셀 깨짐 (FHD 1x) */
}

@media (min-width: 1920px) {
  .hero-board__select {
    padding: 2rem 2.5rem;
  }
}

@media (min-width: 2560px) {
  .hero-board__select {
    padding: 2.75rem 3.25rem;
  }
}

.hero--board.is-live .hero-board__select {
  animation:
    board-fade-in 900ms var(--ease-emphatic) 320ms forwards,
    board-select-breathe 5.5s ease-in-out 1400ms infinite;
}

.hero-board__pin {
  display: none;
}

.hero-board__handle {
  position: absolute;
  width: 9px;
  height: 9px;
  background: #f04438;
  border: 1.5px solid #fff;
  box-shadow: 0 0 0 1px #f04438;
  z-index: 2;
  opacity: 0;
  transform: scale(0.4);
}

.hero--board.is-live .hero-board__handle {
  animation: board-handle-in 420ms var(--ease-emphatic) forwards;
}

.hero--board.is-live .hero-board__handle--tl { animation-delay: 720ms; }
.hero--board.is-live .hero-board__handle--tm { animation-delay: 760ms; }
.hero--board.is-live .hero-board__handle--tr { animation-delay: 800ms; }
.hero--board.is-live .hero-board__handle--mr { animation-delay: 840ms; }
.hero--board.is-live .hero-board__handle--br { animation-delay: 880ms; }
.hero--board.is-live .hero-board__handle--bm { animation-delay: 920ms; }
.hero--board.is-live .hero-board__handle--bl { animation-delay: 960ms; }
.hero--board.is-live .hero-board__handle--ml { animation-delay: 1000ms; }

.hero-board__handle--tl { top: -5px; left: -5px; }
.hero-board__handle--tr { top: -5px; right: -5px; }
.hero-board__handle--bl { bottom: -5px; left: -5px; }
.hero-board__handle--br { bottom: -5px; right: -5px; }
.hero-board__handle--tm { top: -5px; left: 50%; margin-left: -5px; }
.hero-board__handle--bm { bottom: -5px; left: 50%; margin-left: -5px; }
.hero-board__handle--ml { top: 50%; left: -5px; margin-top: -5px; }
.hero-board__handle--mr { top: 50%; right: -5px; margin-top: -5px; }

.hero--board .hero-board__title {
  margin: 0;
  /* vw/ scale/ translate 금지 — FHD ClearType 깨짐 방지 */
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
  color: #1a1f36;
  word-break: keep-all;
  overflow-wrap: normal;
  text-wrap: balance;
  opacity: 0;
}

@media (min-width: 1440px) {
  .hero--board .hero-board__title {
    font-size: 4.25rem;
  }
}

@media (min-width: 1920px) {
  .hero--board .hero-board__title {
    font-size: 4.75rem; /* FHD 기준 */
  }
}

@media (min-width: 2560px) {
  .hero--board .hero-board__title {
    font-size: 6.25rem; /* 4K급 */
  }
}

.hero--board.is-live .hero-board__title {
  animation: board-fade-in 800ms var(--ease-emphatic) 480ms forwards;
}

.hero-board__mark {
  --mark-fill: rgba(0, 102, 255, 0.88);
  --mark-bar: var(--color-accent-500);
  position: relative;
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  padding: 0.06em 0.22em;
  background: rgba(0, 102, 255, 0);
  color: #1a1f36;
  vertical-align: baseline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: none;
  white-space: nowrap;
}

.hero-board__mark-text {
  display: inline;
}

/* 캐럿은 레이아웃 폭에 미포함 → 강조 박스가 텍스트에만 핏 */
.hero-board__mark-caret {
  position: absolute;
  top: 50%;
  right: 0.12em;
  width: 2px;
  height: 0.85em;
  margin-top: -0.425em;
  background: #fff;
  border-radius: 1px;
  opacity: 0;
  pointer-events: none;
  /* transform 금지: 한글 ClearType 보호 */
}

.hero-board__mark.is-typing .hero-board__mark-caret {
  animation: board-mark-caret 0.9s steps(1) infinite;
}

.hero-board__mark::before,
.hero-board__mark::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10px;
  opacity: 0;
  pointer-events: none;
}

.hero-board__mark::before {
  left: 0;
  background:
    radial-gradient(circle closest-side, var(--mark-bar) 100%, transparent 100%) no-repeat left top / 10px 10px,
    linear-gradient(var(--mark-bar), var(--mark-bar)) no-repeat left center / 4px 100%;
}

.hero-board__mark::after {
  right: 0;
  background:
    radial-gradient(circle closest-side, var(--mark-bar) 100%, transparent 100%) no-repeat right bottom / 10px 10px,
    linear-gradient(var(--mark-bar), var(--mark-bar)) no-repeat right center / 4px 100%;
}

.hero--board.is-live .hero-board__mark {
  animation: board-mark-fill 700ms var(--ease-out-soft) 900ms forwards;
}

.hero--board.is-live .hero-board__mark::before,
.hero--board.is-live .hero-board__mark::after {
  animation: board-mark-bars 500ms var(--ease-out-soft) 1050ms forwards;
}

.hero-board__actions {
  position: relative;
  z-index: 2;
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  opacity: 0;
}

.hero--board.is-live .hero-board__actions {
  animation: board-fade-in 750ms var(--ease-emphatic) 980ms forwards;
}

.hero-board__lead {
  margin: 0 0 var(--space-4);
  font-size: 1.0625rem;
  color: var(--hero-muted);
}

@media (min-width: 1920px) {
  .hero-board__lead {
    font-size: 1.125rem;
  }
}

@media (min-width: 2560px) {
  .hero-board__lead {
    font-size: 1.5rem;
  }
}

/* —— CTA forge (draw → roundness → type) —— */
.cta-forge {
  /* 구간별 정수 rem — vw 유체형 텍스트 크기 사용 안 함 */
  --cta-w: 11.5rem;
  --cta-h: 2.75rem;
  --cta-r: 8px;
  --cta-font: 1rem;
  --cta-pad-y: 0.75rem;
  --cta-pad-x: 1.5rem;
  --forge-w: 0px;
  --forge-h: 0px;
  --forge-r: 0px;
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  min-height: calc(var(--cta-h) + 3.25rem);
  overflow: visible;
}

@media (min-width: 2560px) {
  .cta-forge {
    --cta-w: 15.25rem;
    --cta-h: 3.625rem;
    --cta-r: 11px;
    --cta-font: 1.3125rem;
    --cta-pad-y: 1rem;
    --cta-pad-x: 2rem;
    gap: 1rem;
    min-height: calc(var(--cta-h) + 4.25rem);
  }
}

.cta-forge__hud {
  /* 비교용: ROUNDNESS 창 일시 숨김 — 복구 시 display/아래 속성 원복 */
  display: none;
  position: absolute;
  top: 0;
  left: calc(50% + (var(--cta-w) / 2) + 0.75rem);
  z-index: 3;
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  pointer-events: none;
}

.cta-forge__roundness {
  display: grid;
  gap: 0.4rem;
  min-width: 9.5rem;
  padding: 0.65rem 0.75rem;
  border-radius: 0.65rem;
  background: #fff;
  border: 1px solid rgba(26, 31, 54, 0.1);
  box-shadow: 0 10px 28px rgba(26, 31, 54, 0.12);
  text-align: left;
}

.cta-forge__hud-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(26, 31, 54, 0.55);
}

.cta-forge__slider {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.55rem;
}

.cta-forge__track {
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: rgba(26, 31, 54, 0.12);
}

.cta-forge__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: inherit;
  background: #3b82f6;
}

.cta-forge__thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #3b82f6;
  box-shadow: 0 1px 4px rgba(26, 31, 54, 0.2);
  transform: translate(-50%, -50%);
}

.cta-forge__value {
  min-width: 1.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #1a1f36;
  font-variant-numeric: tabular-nums;
}

.cta-forge__stage {
  position: relative;
  width: var(--cta-w);
  height: var(--cta-h);
  margin-top: 2.5rem;
  overflow: visible;
}

.cta-forge__cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  color: #1a1f36;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 4px 10px rgba(26, 31, 54, 0.12));
  transform: translate3d(-2px, -2px, 0);
  will-change: transform, opacity;
}

.cta-forge__pointer {
  width: 14px;
  height: 18px;
  display: block;
}

.cta-forge__cursor-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: 0.5rem;
  padding: 0.25rem 0.5rem 0.25rem 0.25rem;
  border-radius: 999px;
  background: #1a1f36;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.cta-forge__cursor-tag em {
  font-style: normal;
  font-weight: 500;
  opacity: 0.85;
}

.cta-forge__avatar {
  display: grid;
  place-items: center;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  font-size: 0.625rem;
}

.cta-forge__btn {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: var(--forge-w);
  height: var(--forge-h);
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1.5px solid #1a1f36;
  border-radius: var(--forge-r);
  background: transparent;
  color: #1a1f36;
  font-family: inherit;
  font-size: var(--cta-font);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  pointer-events: none;
  box-sizing: border-box;
  transition: background var(--duration-normal) var(--ease-default),
    color var(--duration-normal) var(--ease-default),
    border-color var(--duration-normal) var(--ease-default),
    box-shadow var(--duration-normal) var(--ease-default);
}

.cta-forge__text {
  display: inline-block;
  min-height: 1em;
}

.cta-forge__type-caret {
  display: none;
  width: 1.5px;
  height: 1em;
  margin-left: 1px;
  background: #3b82f6;
  border-radius: 1px;
  vertical-align: -0.1em;
}

.cta-forge.is-typing .cta-forge__type-caret {
  display: inline-block;
  animation: board-caret 1s steps(1) infinite;
}

.cta-forge.is-drawing .cta-forge__cursor,
.cta-forge.is-rounding .cta-forge__cursor,
.cta-forge.is-typing .cta-forge__cursor {
  opacity: 1;
}

.cta-forge.is-rounding .cta-forge__hud,
.cta-forge.is-typing .cta-forge__hud {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 320ms var(--ease-out-soft), transform 320ms var(--ease-out-soft);
}

.cta-forge.is-filled .cta-forge__btn {
  background: var(--color-accent-500);
  border-color: var(--color-accent-500);
  color: var(--color-text-inverse);
}

.cta-forge.is-ready .cta-forge__btn {
  pointer-events: auto;
  cursor: pointer;
  width: auto;
  height: auto;
  min-width: var(--cta-w);
  min-height: var(--cta-h);
  padding: var(--cta-pad-y) var(--cta-pad-x);
  border-radius: var(--cta-r);
}

.cta-forge.is-ready .cta-forge__btn:hover {
  /* scale 금지 — 텍스트 서브픽셀 깨짐 */
  box-shadow: 0 14px 32px rgba(0, 102, 255, 0.35);
}

.cta-forge.is-ready .cta-forge__hud,
.cta-forge.is-ready .cta-forge__type-caret {
  opacity: 0;
  visibility: hidden;
  transition: opacity 280ms var(--ease-default);
}

/* 보드에 마운트된 제작 커서 (전 구간 left/top 보간) */
.hero-board__stage > .cta-forge__cursor.is-live-cursor {
  position: absolute;
  z-index: 5;
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  will-change: left, top;
}

/* 제작 포인터 → 보드 우하단 idle */
.cta-forge__cursor.is-parked {
  z-index: 4;
  opacity: 1;
  visibility: visible;
  color: #1a1f36;
  animation: board-cursor-b 8s ease-in-out infinite;
}

.cta-forge.is-static {
  min-height: 0;
}

.cta-forge.is-static .cta-forge__stage {
  margin-top: 0;
}

.cta-forge.is-static .cta-forge__btn {
  position: relative;
  width: auto;
  height: auto;
  min-width: var(--cta-w);
  min-height: var(--cta-h);
  padding: var(--cta-pad-y) var(--cta-pad-x);
  border-radius: var(--cta-r);
  font-size: var(--cta-font);
  background: var(--color-accent-500);
  border-color: var(--color-accent-500);
  color: var(--color-text-inverse);
  pointer-events: auto;
}

.cta-forge.is-static .cta-forge__hud,
.cta-forge.is-static .cta-forge__type-caret {
  display: none;
}

@media (max-width: 720px) {
  .cta-forge__hud {
    left: 50%;
    top: -0.25rem;
    transform: translate(-50%, 8px) scale(0.96);
  }

  .cta-forge.is-rounding .cta-forge__hud,
  .cta-forge.is-typing .cta-forge__hud {
    transform: translate(-50%, 0) scale(1);
  }

  .cta-forge__stage {
    margin-top: 3.25rem;
  }

  .cta-forge {
    --cta-w: 10.5rem;
    --cta-h: 2.75rem;
    --cta-r: 8px;
    --cta-font: 1rem;
    --cta-pad-y: 0.75rem;
    --cta-pad-x: 1.5rem;
  }
}

.hero-board__cursor {
  position: absolute;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  pointer-events: none;
  filter: drop-shadow(0 4px 10px rgba(26, 31, 54, 0.12));
  opacity: 0;
  will-change: transform;
}

.hero-board__pointer {
  width: 14px;
  height: 18px;
  display: block;
}

.hero-board__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: 0.55rem;
  padding: 0.25rem 0.5rem 0.25rem 0.25rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  white-space: nowrap;
}

.hero-board__tag em {
  font-style: normal;
  font-weight: 500;
  opacity: 0.85;
}

.hero-board__avatar {
  display: grid;
  place-items: center;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  font-size: 0.625rem;
  font-weight: 700;
}

.hero-board__cursor--a {
  top: 12%;
  right: -2%;
  color: #eab308;
}
.hero-board__cursor--a .hero-board__tag { background: #eab308; color: #1a1f36; }
.hero-board__cursor--a .hero-board__avatar { background: rgba(26, 31, 54, 0.12); }

.hero-board__cursor--d {
  bottom: 22%;
  left: -4%;
  color: #f04438;
}
.hero-board__cursor--d .hero-board__tag { background: #f04438; }

.hero-board__cursor--e {
  top: 6%;
  left: -6%;
  color: #fb7185;
}
.hero-board__cursor--e .hero-board__tag { background: #fb7185; }

.hero--board.is-live .hero-board__cursor--a {
  animation:
    board-cursor-fade 650ms var(--ease-emphatic) 560ms forwards,
    board-cursor-a 7s ease-in-out 1300ms infinite;
}
.hero--board.is-live .hero-board__cursor--d {
  animation:
    board-cursor-fade 650ms var(--ease-emphatic) 880ms forwards,
    board-cursor-d 7.5s ease-in-out 1550ms infinite;
}
.hero--board.is-live .hero-board__cursor--e {
  animation:
    board-cursor-fade 650ms var(--ease-emphatic) 1040ms forwards,
    board-cursor-e 9s ease-in-out 1700ms infinite;
}

.hero--board .hero__scroll {
  position: absolute;
  left: 50%;
  bottom: var(--space-6);
  z-index: 2;
  margin-left: -22px;
  transform: none;
  color: rgba(26, 31, 54, 0.45);
  opacity: 0;
}

.hero--board.is-live .hero__scroll {
  animation: board-fade-in 700ms var(--ease-emphatic) 1200ms forwards;
}

@keyframes board-grid-drift {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-28px, -28px, 0); }
}

@keyframes board-comment-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes board-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes board-enter-pop {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes board-enter-select {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes board-select-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240, 68, 56, 0); }
  50% { box-shadow: 0 0 0 4px rgba(240, 68, 56, 0.08); }
}

@keyframes board-pin-pop {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.4) translateY(6px);
  }
  70% {
    opacity: 1;
    transform: translateX(-50%) scale(1.12) translateY(0);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) scale(1) translateY(0);
  }
}

@keyframes board-handle-in {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes board-title-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes board-mark-fill {
  from {
    background: rgba(0, 102, 255, 0);
    color: #1a1f36;
  }
  to {
    background: var(--mark-fill, rgba(0, 102, 255, 0.88));
    color: #ffffff;
  }
}

@keyframes board-mark-bars {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes board-mark-caret {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes board-emoji-in {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes board-caret {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes board-cursor-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes board-float-a {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -8px, 0); }
}

@keyframes board-cursor-a {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(-14px, 16px, 0) rotate(-4deg); }
}

@keyframes board-cursor-b {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(-18px, -10px, 0) rotate(3deg); }
}

@keyframes board-cursor-d {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(12px, 10px, 0) rotate(5deg); }
}

@keyframes board-cursor-e {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(10px, 18px, 0) rotate(-3deg); }
}

.hero__content {
  position: relative;
  z-index: 1;
  grid-column: 2 / 5;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.hero--immersive .hero__title {
  margin: 0 auto var(--space-6);
  max-width: 100%;
  /* 4K(3840px)에서 16rem 비율 유지 → 16rem / 3840px = 6.6667vw */
  font-size: 6.6667vw;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  word-break: keep-all;
  overflow-wrap: break-word;
  text-wrap: balance;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  opacity: 0;
  animation: hero-enter 1200ms var(--ease-emphatic) 140ms forwards;
}

.hero--immersive .hero__title-accent {
  color: var(--color-accent-500);
  background: none;
  background-image: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: var(--color-accent-500);
  animation: none;
}

.hero--immersive .hero__lead {
  margin: 0 auto var(--space-8);
  max-width: 40rem;
  font-size: clamp(1.125rem, 2.1vw, 1.5rem);
  line-height: 1.5;
  color: var(--hero-muted);
  opacity: 0;
  animation: hero-enter 1100ms var(--ease-emphatic) 280ms forwards;
}

.hero__cta {
  opacity: 0;
  animation: hero-enter 1100ms var(--ease-emphatic) 420ms forwards;
  transition: transform var(--duration-normal) var(--ease-out-soft), box-shadow var(--duration-normal) var(--ease-default);
}

@media (min-width: 641px) {
  .hero__cta {
    padding: var(--space-3) var(--space-6);
    min-width: 0;
    font-size: var(--font-size-base);
    border-radius: var(--radius-md);
  }
}

.hero__cta:hover {
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 16px 40px rgba(0, 102, 255, 0.4);
}

.hero__scroll {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  transform: translateX(-50%);
  color: var(--hero-muted);
  text-decoration: none;
  opacity: 0;
  animation: hero-enter 1100ms var(--ease-emphatic) 680ms forwards;
}

.hero__scroll-icon {
  width: 16px;
  height: 16px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  animation: hero-scroll-bounce 1.2s var(--ease-default) infinite;
}

@keyframes hero-drift-a {
  0% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  50% { transform: translate3d(22%, -14%, 0) scale(1.22) rotate(6deg); }
  100% { transform: translate3d(34%, 10%, 0) scale(1.08) rotate(-4deg); }
}

@keyframes hero-drift-b {
  0% { transform: translate3d(0, 0, 0) scale(1.1) rotate(0deg); }
  50% { transform: translate3d(-26%, 16%, 0) scale(0.95) rotate(-8deg); }
  100% { transform: translate3d(-12%, -18%, 0) scale(1.28) rotate(5deg); }
}

@keyframes hero-drift-c {
  0% { transform: translate3d(0, 0, 0) scale(0.85); opacity: 0.35; }
  50% { transform: translate3d(16%, 18%, 0) scale(1.35); opacity: 0.95; }
  100% { transform: translate3d(-10%, 8%, 0) scale(1.05); opacity: 0.55; }
}

@keyframes hero-enter {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-scroll-bounce {
  0%, 100% { transform: rotate(45deg) translateY(0); opacity: 0.35; }
  50% { transform: rotate(45deg) translateY(12px); opacity: 1; }
}

.reveal {
  --reveal-delay: 0ms;
  opacity: 0;
  transform: translateY(56px) scale(0.96);
  filter: blur(4px);
  transition:
    opacity var(--duration-reveal) var(--ease-emphatic) var(--reveal-delay),
    transform var(--duration-reveal) var(--ease-emphatic) var(--reveal-delay),
    filter var(--duration-reveal) var(--ease-emphatic) var(--reveal-delay);
}

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

@media (max-width: 640px) {
  .hero--immersive {
    grid-template-columns: var(--grid-template);
    min-height: auto;
    padding-top: calc(var(--header-height) + var(--space-8));
  }

  .hero--immersive .hero__title {
    font-size: clamp(2rem, 9vw, 3rem);
  }

  .hero__content {
    grid-column: 1 / -1;
  }

  .hero--board {
    min-height: auto;
    padding-top: calc(var(--header-height) + var(--space-6));
    padding-bottom: var(--space-16);
  }

  .hero-board__stage {
    width: 100%;
    padding-top: 4.5rem;
    padding-bottom: 2rem;
  }

  .hero-board__select {
    padding: 1.1rem 1.25rem;
  }

  .hero-board__comment {
    font-size: var(--font-size-sm);
    max-width: calc(100% - 1rem);
  }

  .hero-board__comment {
    left: 0;
    right: 0;
    margin-inline: auto;
    width: fit-content;
    max-width: calc(100% - 1rem);
    white-space: normal;
  }

  .hero--board .hero-board__title {
    font-size: 1.75rem;
    letter-spacing: 0;
  }

  @media (min-width: 400px) {
    .hero--board .hero-board__title {
      font-size: 2rem;
    }
  }

  .hero-board__cursor--a { top: 8%; right: 0; }
  .hero-board__cursor--d { bottom: 20%; left: 0; }
  .hero-board__cursor--e { top: 2%; left: 0; }

  .hero-board__cursor--e .hero-board__tag em {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__blob--a,
  .hero__blob--b,
  .hero__blob--c,
  .hero__scroll-icon,
  .hero-board__grid,
  .hero-board__comment,
  .hero-board__comment-emoji,
  .hero-board__caret,
  .hero-board__select,
  .hero-board__pin,
  .hero-board__handle,
  .hero-board__title,
  .hero-board__mark,
  .hero-board__actions,
  .hero-board__cursor,
  .hero--board .hero__scroll,
  .cta-forge__cursor,
  .cta-forge__hud,
  .cta-forge__type-caret {
    animation: none !important;
  }

  .hero-board__mark::before,
  .hero-board__mark::after {
    animation: none !important;
  }

  .hero-board__comment,
  .hero-board__comment-emoji,
  .hero-board__select,
  .hero-board__pin,
  .hero-board__handle,
  .hero-board__title,
  .hero-board__actions,
  .hero-board__cursor,
  .hero--board .hero__scroll {
    opacity: 1;
    transform: none;
  }

  .hero-board__mark {
    background: rgba(0, 102, 255, 0.88);
    color: #ffffff;
  }

  .hero-board__mark::before,
  .hero-board__mark::after {
    opacity: 1;
    animation: none !important;
  }

  .hero-board__caret {
    opacity: 0;
  }

  .cta-forge {
    min-height: 0;
  }

  .cta-forge__stage {
    margin-top: 0;
  }

  .cta-forge__btn {
    position: relative;
    width: auto;
    height: auto;
    min-width: var(--cta-w);
    min-height: var(--cta-h);
    padding: var(--cta-pad-y) var(--cta-pad-x);
    border-radius: var(--cta-r);
    font-size: var(--cta-font);
    background: var(--color-accent-500);
    border-color: var(--color-accent-500);
    color: var(--color-text-inverse);
    pointer-events: auto;
  }

  .cta-forge__cursor:not(.is-parked),
  .cta-forge__hud,
  .cta-forge__type-caret {
    display: none;
  }

  .cta-forge__cursor.is-parked {
    display: flex;
    animation: none;
  }

  .hero__title,
  .hero__lead,
  .hero__cta,
  .hero__scroll {
    opacity: 1;
    animation: none;
  }

  .hero__cta:hover {
    transform: none;
    box-shadow: none;
  }

  .reveal,
  .reveal.is-visible {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* Transparent header over immersive stage */
.page-home .site-header,
.page-immersive .site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom: none;
}

.page-home .site-header__logo,
.page-home .site-header__link,
.page-home .site-header__toggle {
  color: #1a1f36;
}

.page-immersive .site-header__logo,
.page-immersive .site-header__link,
.page-immersive .site-header__toggle {
  color: var(--color-text-inverse);
}

.page-home .site-header__link--active {
  color: var(--color-accent-500);
}

.page-immersive .site-header__link--active {
  color: var(--color-accent-300);
}

.page-home .site-header__cta {
  background: transparent;
  color: #1a1f36;
  border-color: rgba(26, 31, 54, 0.35);
}

.page-immersive .site-header__cta {
  background: transparent;
  color: var(--color-text-inverse);
  border-color: rgba(255, 255, 255, 0.45);
}

.page-home .site-header__cta:hover {
  background: rgba(26, 31, 54, 0.06);
}

.page-immersive .site-header__cta:hover {
  background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 768px) {
  .page-home .site-header.is-nav-open {
    background: #f3f4f6;
  }

  .page-immersive .site-header.is-nav-open {
    background: var(--hero-bg, #000000);
  }

  .page-home .site-header__nav {
    background: #f3f4f6;
  }

  .page-immersive .site-header__nav {
    background: var(--hero-bg, #000000);
  }

  .page-home .site-header__link {
    border-bottom-color: rgba(26, 31, 54, 0.12);
  }

  .page-immersive .site-header__link {
    border-bottom-color: rgba(255, 255, 255, 0.12);
  }

  .page-home .site-header__cta,
  .page-immersive .site-header__cta {
    background: var(--color-accent-500);
    border-color: transparent;
    color: var(--color-text-inverse);
  }
}

.section-muted {
  background: var(--color-surface-secondary);
  padding: var(--space-16) var(--space-6);
}

/* —— Experience / stats band —— */
.stats {
  --stats-line: rgba(255, 255, 255, 0.12);
  --stats-label: var(--color-accent-500);
  position: relative;
  z-index: 1;
  background: transparent;
  color: var(--hero-text);
  padding: var(--space-16) 0 calc(var(--space-16) + var(--space-4));
}

.stats__intro {
  grid-column: 1 / 4;
  max-width: none;
  margin: 0 0 var(--space-12);
}

.stats__row {
  align-items: center;
  padding: clamp(1.5rem, 3vw, 2.75rem) 0;
  border-bottom: 1px solid var(--stats-line);
}

.stats__label {
  grid-column: 1 / 3;
  font-size: clamp(0.7rem, 1.2vw, 0.875rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--stats-label);
}

.stats__value {
  grid-column: 3 / 6;
  font-size: clamp(3rem, 8vw, 6.5rem);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-align: right;
}

.stats__eyebrow {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--stats-label);
}

.stats__title {
  margin: 0 0 var(--space-4);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.02em;
  word-break: keep-all;
}

.stats__desc {
  margin: 0;
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--hero-muted);
  word-break: keep-all;
}

.stats__list {
  grid-column: 1 / -1;
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--stats-line);
}

@media (max-width: 640px) {
  .stats__intro {
    grid-column: 1 / -1;
  }

  .stats__row {
    grid-template-columns: var(--grid-template);
  }

  .stats__label,
  .stats__value {
    grid-column: 1 / -1;
    text-align: left;
  }
}

/* —— Portfolio (grid-aligned) —— */
.portfolio-rise {
  position: relative;
  z-index: 2;
  display: block;
  padding: clamp(2rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem);
  margin: 0;
  background: transparent;
}

.page-home .portfolio-rise {
  z-index: 3;
}

.portfolio-rise__panel,
.page-home .portfolio-rise__panel {
  background: transparent;
  color: var(--color-text);
  border-radius: 0;
  box-shadow: none;
  padding-block: 0;
}

.portfolio-rise__intro {
  grid-column: 1 / 4;
  max-width: none;
  margin: 0 0 var(--space-12);
  text-align: left;
}

.portfolio-rise__eyebrow {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-accent-500);
}

.portfolio-rise__title {
  margin: 0 0 var(--space-5);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.03em;
  word-break: keep-all;
}

.portfolio-rise__desc {
  margin: 0 0 var(--space-8);
  max-width: none;
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.7;
  color: var(--color-text-secondary);
  word-break: keep-all;
}

.portfolio-rise__cta {
  border-radius: var(--radius-md);
  padding-inline: calc(var(--space-6) + var(--space-2));
}

.portfolio-rise__grid {
  grid-column: 1 / -1;
  max-width: none;
  margin: 0;
  border-top: 1px solid var(--color-border);
}

.portfolio-rise__item {
  display: block;
  overflow: hidden;
  border-radius: 0;
  background: var(--color-neutral-100);
  box-shadow: none;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--color-border);
  transition: opacity var(--duration-normal) var(--ease-default);
}

.portfolio-rise__item:hover {
  transform: none;
  opacity: 0.88;
  box-shadow: none;
}

.portfolio-rise__thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portfolio-rise__footer {
  grid-column: 1 / -1;
  margin-top: var(--space-8);
  padding-inline: var(--grid-cell-pad);
  text-align: left;
}

.portfolio-rise__more {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-text-inverse);
  text-decoration: none;
}

.portfolio-rise__more:hover {
  color: var(--color-accent-500);
}

/* —— Why GRIDCL —— */
.why-dark {
  position: relative;
  z-index: 2;
  padding: clamp(4rem, 8vw, 7rem) 0;
  background: #000000;
  color: var(--color-text-inverse);
}

.why-dark__intro {
  grid-column: 1 / 4;
  max-width: none;
  margin: 0 0 var(--space-12);
}

.why-dark__eyebrow {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-accent-500);
}

.why-dark__title {
  margin: 0 0 var(--space-4);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.02em;
  word-break: keep-all;
}

.why-dark__desc {
  margin: 0;
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-text-secondary);
  word-break: keep-all;
}

.why-dark__list {
  grid-column: 1 / -1;
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
}

.why-dark__row {
  align-items: center;
  padding: clamp(1.5rem, 3vw, 2.75rem) 0;
  border-bottom: 1px solid var(--color-border);
}

.why-dark__label {
  grid-column: 1 / 2;
  font-size: clamp(0.7rem, 1.2vw, 0.875rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-accent-500);
}

.why-dark__body {
  grid-column: 2 / 6;
}

.why-dark__name {
  margin: 0 0 var(--space-2);
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.why-dark__text {
  margin: 0;
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-text-secondary);
  word-break: keep-all;
}

@media (max-width: 900px) {
  .portfolio-rise__grid {
    /* Stay on the site grid: 5 tracks → wrap items naturally */
    grid-template-columns: var(--grid-template);
  }

  .portfolio-rise__item {
    grid-column: span 1;
  }
}

@media (max-width: 640px) {
  .portfolio-rise__intro,
  .why-dark__intro,
  .g-from-1-to-3,
  .g-from-1-to-4,
  .g-from-2-to-6,
  .g-from-3-to-6,
  .g-col-1,
  .g-col-5 {
    grid-column: 1 / -1;
  }

  .portfolio-rise__grid {
    grid-template-columns: 1fr;
  }

  .portfolio-rise__item:hover {
    opacity: 1;
  }

  .why-dark__row {
    grid-template-columns: var(--grid-template);
  }

  .why-dark__label,
  .why-dark__body {
    grid-column: 1 / -1;
  }
}

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

/* —— Services detail (grid-aligned) —— */
.services-rise {
  position: relative;
  z-index: 2;
  display: block;
  padding: clamp(2rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem);
  background: transparent;
}

.services-rise__panel {
  background: transparent;
  color: var(--color-text);
  border-radius: 0;
  padding-block: 0;
  box-shadow: none;
}

.services-rise__intro {
  grid-column: 1 / 4;
  max-width: none;
  margin: 0 0 var(--space-12);
  text-align: left;
}

.services-rise__intro--compact {
  margin-bottom: var(--space-8);
}

.services-rise__eyebrow {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-accent-500);
}

.services-rise__title {
  margin: 0 0 var(--space-4);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.03em;
  word-break: keep-all;
}

.services-rise__title--sm {
  font-size: clamp(1.35rem, 2.5vw, 1.85rem);
  margin-bottom: 0;
}

.services-rise__desc {
  margin: 0;
  max-width: none;
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.7;
  color: var(--color-text-secondary);
  word-break: keep-all;
}

.services-rise__offers {
  grid-column: 1 / -1;
  list-style: none;
  margin: 0 0 clamp(3rem, 6vw, 5rem);
  padding: 0;
  border-top: 1px solid var(--color-border);
}

.services-rise__offer {
  align-items: start;
  padding: clamp(1.5rem, 3vw, 2.5rem) 0;
  border-bottom: 1px solid var(--color-border);
}

.services-rise__label {
  grid-column: 1 / 2;
  font-size: clamp(0.7rem, 1.1vw, 0.8rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-accent-500);
  padding-top: 0.35rem;
}

.services-rise__offer-body {
  grid-column: 2 / 6;
}

.services-rise__offer-name {
  margin: 0 0 var(--space-3);
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.services-rise__offer-text {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-base);
  line-height: 1.65;
  color: var(--color-text-secondary);
  word-break: keep-all;
}

.services-rise__points {
  margin: 0 0 var(--space-4);
  padding-left: 1.1rem;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.7;
}

.services-rise__price {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-accent-500);
}

.services-rise__process {
  grid-column: 1 / -1;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.services-rise__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
}

.services-rise__step {
  align-items: center;
  padding: clamp(1.15rem, 2.2vw, 1.75rem) 0;
  border-bottom: 1px solid var(--color-border);
}

.services-rise__step-num {
  grid-column: 1 / 2;
  font-size: clamp(0.7rem, 1.1vw, 0.8rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-accent-500);
}

.services-rise__step-name {
  grid-column: 2 / 6;
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.services-rise__cta-wrap {
  grid-column: 1 / -1;
  text-align: left;
}

.services-rise__cta {
  border-radius: var(--radius-md);
  padding-inline: calc(var(--space-6) + var(--space-2));
}

@media (max-width: 640px) {
  .services-rise__intro {
    grid-column: 1 / -1;
  }

  .services-rise__offer,
  .services-rise__step {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .services-rise__label,
  .services-rise__offer-body,
  .services-rise__step-num,
  .services-rise__step-name {
    grid-column: 1 / -1;
  }
}

.portfolio-thumb {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.portfolio-thumb--lg {
  height: 400px;
  border-radius: var(--radius-lg);
}