/* ==========================================================================
   한벳AI (HanVet AI) — Design System
   ========================================================================== */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;700&display=swap");

:root {
  /* Brand colors — derived from HanVet AI / GLOVET / 양돈농가방역평가원 logos */
  --color-ink: #12141a;          /* HanVet AI wordmark black */
  --color-ink-deep: #090c14;      /* near-black for full-bleed dark bands */
  --color-navy: #132b6b;         /* GLOVET brand navy */
  --color-navy-dark: #0b1c4a;
  --color-green: #008444;        /* 양돈농가방역평가원 brand green */
  --color-green-dark: #046536;
  --color-blue: #0056b3;         /* accent / links */
  --color-signal: #3ddc84;        /* bright monitoring-green accent for dark surfaces */

  --color-text: #1a1f2c;
  --color-text-muted: #5b6472;
  --color-bg: #ffffff;
  --color-bg-alt: #f5f7fa;
  --color-bg-dark: #0e1830;
  --color-border: #e4e8ef;

  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Display numerals. JetBrains Mono has no Hangul, so "2관왕" rendered half
     in mono and half in the fallback; this keeps digits and Hangul in one
     voice and reads far tighter at large sizes. */
  --font-display: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic",
    "Apple SD Gothic Neo", sans-serif;

  --radius-s: 8px;
  --radius-m: 16px;
  --radius-l: 24px;

  --shadow-s: 0 2px 10px rgba(18, 20, 26, 0.06);
  --shadow-m: 0 12px 32px rgba(18, 20, 26, 0.10);

  --container-w: 1160px;

  /* Liquid glass surface tokens — one recipe reused by every glass element */
  --glass-blur: 20px;
  --glass-sat: 175%;
  --glass-fill: rgba(255, 255, 255, 0.60);
  --glass-edge: rgba(255, 255, 255, 0.75);
  --glass-spec: rgba(255, 255, 255, 0.95);
  --glass-shadow: 0 18px 44px -20px rgba(9, 12, 20, 0.40);

  /* Dark-surface counterparts */
  --glass-fill-dark: rgba(255, 255, 255, 0.055);
  --glass-edge-dark: rgba(255, 255, 255, 0.16);
  --glass-spec-dark: rgba(255, 255, 255, 0.34);
  --glass-shadow-dark: 0 26px 60px -24px rgba(0, 0, 0, 0.65);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

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

/* Scroll-reveal utility (toggled by js/main.js via IntersectionObserver) */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.9, 0.32, 1), transform 0.7s cubic-bezier(0.22, 0.9, 0.32, 1);
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered cascade: children of .stagger fade in with an incremental delay */
.stagger > .reveal:nth-child(1) { transition-delay: 0s; }
.stagger > .reveal:nth-child(2) { transition-delay: 0.09s; }
.stagger > .reveal:nth-child(3) { transition-delay: 0.18s; }
.stagger > .reveal:nth-child(4) { transition-delay: 0.27s; }
.stagger > .reveal:nth-child(5) { transition-delay: 0.36s; }
.stagger > .reveal:nth-child(6) { transition-delay: 0.45s; }
.stagger > .reveal:nth-child(7) { transition-delay: 0.54s; }
.stagger > .reveal:nth-child(8) { transition-delay: 0.63s; }

body {
  margin: 0;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic",
    "Apple SD Gothic Neo", sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
}

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

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

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.container {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--color-green);
  text-transform: uppercase;
  margin-bottom: 16px;
}

.eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}

.section-header.center .eyebrow {
  justify-content: center;
}

.eyebrow.navy { color: var(--color-navy); }

/* Brand navy/green have almost no contrast against the near-black dark surfaces —
   fall back to the bright signal green there. */
.page-hero .eyebrow,
.page-hero .eyebrow.navy,
.section-dark .eyebrow,
.section-dark .eyebrow.navy {
  color: var(--color-signal);
}

h1 {
  font-size: clamp(32px, 4.4vw, 48px);
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

h3 {
  font-size: 20px;
  font-weight: 700;
}

.section {
  padding: 96px 0;
  position: relative;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(18, 20, 26, 0.05) 1px, transparent 0),
    radial-gradient(760px 340px at 92% -8%, rgba(19, 43, 107, 0.07), transparent 60%),
    radial-gradient(640px 300px at 4% 108%, rgba(0, 132, 68, 0.07), transparent 60%);
  background-size: 24px 24px, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat;
  animation: drift-glow 22s ease-in-out infinite;
}

@keyframes drift-glow {
  0%, 100% { background-position: 0 0, 0 0, 0 0; }
  50%      { background-position: 0 0, 24px 34px, -24px -24px; }
}

/* Tinted variant — keeps the dot-grid texture, adds a tone shift and edge hairlines */
.section-alt {
  background-color: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

/* Full-bleed dark variant — same surface language as the hero / stat band / footer */
.section-dark {
  color: #fff;
  overflow: hidden;
  background-color: var(--color-ink-deep);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.06) 1px, transparent 0),
    radial-gradient(820px 380px at 88% -10%, rgba(19, 43, 107, 0.55), transparent 62%),
    radial-gradient(680px 340px at 6% 108%, rgba(61, 220, 132, 0.12), transparent 62%);
}

.section-dark h2,
.section-dark h3 {
  color: #fff;
}

.section-dark .section-header p,
.section-dark p {
  color: rgba(255, 255, 255, 0.6);
}

.section-header {
  max-width: 640px;
  margin-bottom: 48px;
}

.section-header h2 {
  position: relative;
}

.section-header.center {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-header p {
  margin-top: 16px;
  font-size: 17px;
  color: var(--color-text-muted);
}

/* ---------------------------------- Buttons ---------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  border: 1px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
  cursor: pointer;
  white-space: nowrap;
}

.btn-primary {
  background: var(--color-navy);
  color: #fff;
}
.btn-primary:hover {
  background: var(--color-navy-dark);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(19, 43, 107, 0.35);
}

.btn-green {
  background: var(--color-green);
  color: #fff;
}
.btn-green:hover {
  background: var(--color-green-dark);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0, 132, 68, 0.35);
}

.btn-outline {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-border);
}
.btn-outline:hover {
  border-color: var(--color-ink);
  transform: translateY(-1px);
}

.btn-ghost-light {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}
.btn-ghost-light:hover {
  background: rgba(255, 255, 255, 0.18);
}

.btn-sm {
  padding: 10px 20px;
  font-size: 14px;
}

/* ---------------------------------- Header ---------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.66));
  -webkit-backdrop-filter: saturate(var(--glass-sat)) blur(var(--glass-blur));
  backdrop-filter: saturate(var(--glass-sat)) blur(var(--glass-blur));
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 1px 0 var(--glass-spec), 0 1px 0 rgba(18, 20, 26, 0.05);
  transition: box-shadow 0.25s ease, background 0.25s ease, transform 0.45s cubic-bezier(0.22, 0.9, 0.32, 1);
}

.site-header.scrolled {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.74));
  box-shadow: inset 0 1px 0 var(--glass-spec), 0 10px 30px -12px rgba(18, 20, 26, 0.22);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  transition: height 0.25s ease;
}

.site-header.scrolled .container {
  height: 64px;
}

#about, #awards {
  scroll-margin-top: 96px;
}

.site-header.scrolled .brand img {
  height: 26px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 18px;
  color: var(--color-ink);
}

.brand img {
  height: 32px;
  width: auto;
  transition: height 0.25s ease;
}

.brand .brand-en {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.03em;
}

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

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-links > li {
  position: relative;
}

.nav-links a.nav-link {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  color: var(--color-text);
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-links a.nav-link:hover,
.nav-links a.nav-link.active {
  background: var(--color-bg-alt);
  color: var(--color-navy);
}

.has-dropdown .dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 260px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-m);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}

.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border-radius: var(--radius-s);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
}

.dropdown a span {
  font-weight: 500;
  font-size: 12.5px;
  color: var(--color-text-muted);
}

.dropdown a:hover {
  background: var(--color-bg-alt);
}

.header-cta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-s);
  background: #fff;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--color-ink);
}

/* ---------------------------------- Hero v2 ---------------------------------- */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(100svh - 80px);
  padding: 72px 0 120px;
  overflow: hidden;
}

.hero > .container {
  position: relative;
  z-index: 1;
  width: 100%;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 56px;
  align-items: center;
}

/* Scroll cue pinned to the bottom of the first screen */
.hero-cue {
  position: absolute;
  left: 50%;
  bottom: 34px;
  z-index: 2;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.hero-cue i {
  display: block;
  width: 1px;
  height: 42px;
  background: linear-gradient(var(--color-green), transparent);
  animation: cue-drop 2.2s ease-in-out infinite;
  transform-origin: top;
}

@keyframes cue-drop {
  0%, 100% { transform: scaleY(0.35); opacity: 0.35; }
  50%      { transform: scaleY(1); opacity: 1; }
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px 7px 10px;
  border-radius: 999px;
  background: var(--color-ink-deep);
  color: rgba(255, 255, 255, 0.88);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.03em;
  margin-bottom: 24px;
}

.hero-badge .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-signal);
  box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.6);
  animation: pulse-dot 2s ease-out infinite;
}

@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(61, 220, 132, 0); }
  100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); }
}

.hero h1 {
  margin-bottom: 26px;
  font-size: clamp(38px, 6.4vw, 86px);
  line-height: 1.12;
  letter-spacing: -0.042em;
}

.hero h1 .accent {
  position: relative;
  white-space: nowrap;
}

.hero h1 .accent::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: 0.06em;
  height: 0.28em;
  background: rgba(0, 132, 68, 0.16);
  z-index: -1;
  border-radius: 3px;
}

.hero-lead {
  font-size: 18px;
  color: var(--color-text-muted);
  max-width: 560px;
  margin-bottom: 34px;
}

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

.hero-art {
  position: relative;
  border-radius: var(--radius-l);
  background: radial-gradient(ellipse 80% 60% at 25% 10%, rgba(61, 220, 132, 0.16), transparent 60%),
    radial-gradient(ellipse 90% 70% at 90% 95%, rgba(19, 43, 107, 0.55), transparent 60%),
    var(--color-ink-deep);
  min-height: 420px;
  padding: 28px 24px 20px;
  color: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--glass-edge-dark);
  box-shadow: 0 0 90px -18px rgba(61, 220, 132, 0.35), 0 0 140px -40px rgba(19, 43, 107, 0.6),
    var(--shadow-m), inset 0 1px 0 var(--glass-spec-dark);
}

.hero-art > *:not(.aurora) {
  position: relative;
  z-index: 2;
}

.hero-art::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  background-image: radial-gradient(circle at 20% 15%, rgba(61, 220, 132, 0.10), transparent 45%),
    radial-gradient(circle at 90% 85%, rgba(19, 43, 107, 0.35), transparent 50%);
  pointer-events: none;
}

.hero-art .art-tag {
  position: relative;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
}

.lineage-svg {
  position: relative;
  width: 100%;
  flex: 1;
  margin: 8px 0;
}

.lineage-svg .l-line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 360;
  stroke-dashoffset: 360;
  animation: draw-line 1s ease-out forwards;
}

@keyframes draw-line {
  to { stroke-dashoffset: 0; }
}

.lineage-svg .l-node {
  opacity: 0;
  transform-origin: center;
  animation: pop-node 0.5s ease-out forwards;
}

@keyframes pop-node {
  from { opacity: 0; transform: scale(0.2); }
  to   { opacity: 1; transform: scale(1); }
}

.lineage-svg .l-node.live {
  animation: pop-node 0.5s ease-out forwards, glow-node 2.4s ease-in-out 1.6s infinite;
}

@keyframes glow-node {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(61, 220, 132, 0)); }
  50%      { filter: drop-shadow(0 0 5px rgba(61, 220, 132, 0.9)); }
}

.lineage-svg .l-bg-dot {
  animation: twinkle 3.4s ease-in-out infinite;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.12; }
  50%      { opacity: 0.55; }
}

.lineage-svg .l-tip {
  cursor: pointer;
}

.lineage-svg .l-tip .l-node {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.35s ease;
}

.lineage-svg .l-tip:hover .l-node {
  transform: scale(1.8);
  filter: drop-shadow(0 0 8px rgba(61, 220, 132, 0.95));
}

.lineage-svg .l-tip-label {
  font-family: var(--font-mono);
  font-size: 10px;
  fill: rgba(255, 255, 255, 0.9);
  opacity: 0;
  transform: translateX(-4px);
  transform-box: fill-box;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.lineage-svg .l-tip:hover .l-tip-label {
  opacity: 1;
  transform: translateX(0);
}

.lineage-svg .l-pulse {
  filter: drop-shadow(0 0 4px rgba(61, 220, 132, 0.9));
}

.hero-art .art-title {
  position: relative;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.4;
  margin-top: 6px;
}

.hero-art .art-caption {
  position: relative;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 6px;
}

/* ---------------------------------- Stat band ---------------------------------- */

.stat-band {
  position: relative;
  overflow: hidden;
  background: var(--color-ink-deep);
  color: #fff;
  padding: 52px 0;
}

.stat-band > .container {
  position: relative;
  z-index: 1;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.stat-item {
  padding: 0 28px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

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

.stat-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 4.4vw, 56px);
  color: var(--color-signal);
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stat-label {
  margin-top: 10px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
}

/* ---------------------------------- Numbered editorial rows ---------------------------------- */

.value-row {
  display: flex;
  flex-direction: column;
}

.value-item {
  position: relative;
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 28px;
  padding: 36px 0 36px 24px;
  border-top: 1px solid var(--color-border);
  overflow: hidden;
  transition: padding-left 0.35s cubic-bezier(0.22, 0.9, 0.32, 1), background 0.35s ease;
}

.value-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  bottom: -1px;
  width: 3px;
  background: linear-gradient(var(--color-green), var(--color-navy));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.4s cubic-bezier(0.22, 0.9, 0.32, 1);
}

.value-item:hover {
  padding-left: 36px;
  background: linear-gradient(90deg, rgba(0, 132, 68, 0.035), transparent 60%);
}

.value-item:hover::before {
  transform: scaleY(1);
}

.value-row.compact .value-item {
  grid-template-columns: 64px 1fr;
  padding: 26px 0 26px 24px;
}

.value-item:last-child {
  border-bottom: 1px solid var(--color-border);
}

.value-num {
  position: relative;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: rgba(19, 43, 107, 0.10);
  transition: color 0.35s ease, transform 0.35s cubic-bezier(0.22, 0.9, 0.32, 1);
}

.value-item:hover .value-num {
  color: rgba(0, 132, 68, 0.55);
  transform: scale(1.08);
}

.value-row.compact .value-num {
  font-size: 44px;
}

.value-item h3 {
  margin-bottom: 8px;
  position: relative;
}

.value-item p {
  color: var(--color-text-muted);
  font-size: 15.5px;
  max-width: 640px;
  position: relative;
}

/* ---------------------------------- Award strip (homepage preview) ---------------------------------- */

.award-strip {
  display: flex;
  flex-direction: column;
}

.award-strip-item {
  position: relative;
  display: grid;
  grid-template-columns: 100px 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 24px 0 24px 20px;
  border-top: 1px solid var(--color-border);
  transition: padding-left 0.3s cubic-bezier(0.22, 0.9, 0.32, 1), background 0.3s ease;
}

.award-strip-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  bottom: -1px;
  width: 3px;
  background: var(--color-green);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.35s cubic-bezier(0.22, 0.9, 0.32, 1);
}

.award-strip-item:hover {
  padding-left: 32px;
  background: linear-gradient(90deg, rgba(0, 132, 68, 0.035), transparent 60%);
}

.award-strip-item:hover::before {
  transform: scaleY(1);
}

.award-strip-item:last-child {
  border-bottom: 1px solid var(--color-border);
}

.award-strip-year {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--color-navy);
  transition: color 0.3s ease;
}

.award-strip-item:hover .award-strip-year {
  color: var(--color-green-dark);
}

.award-strip-item h3 {
  font-size: 16.5px;
  margin-bottom: 4px;
}

.award-strip-item p {
  color: var(--color-text-muted);
  font-size: 14px;
}

.award-strip-tag {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(0, 132, 68, 0.10);
  color: var(--color-green-dark);
  white-space: nowrap;
}

.page-hero {
  position: relative;
  padding: 118px 0 100px;
  color: #fff;
  overflow: hidden;
  background-color: var(--color-ink-deep);
  background-image:
    radial-gradient(820px 380px at 88% -10%, rgba(19, 43, 107, 0.6), transparent 62%),
    radial-gradient(680px 340px at 4% 110%, rgba(61, 220, 132, 0.14), transparent 62%);
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.07) 1px, transparent 0);
  background-size: 24px 24px;
  pointer-events: none;
}

.page-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-signal), var(--color-navy) 60%, transparent);
}

.page-hero .container {
  position: relative;
}

.page-hero h1 {
  color: #fff;
  font-size: clamp(34px, 5.4vw, 70px);
  line-height: 1.14;
  letter-spacing: -0.038em;
}

.page-hero .eyebrow {
  margin-bottom: 14px;
}

.page-hero p {
  margin-top: 20px;
  font-size: 17px;
  color: rgba(255, 255, 255, 0.65);
  max-width: 680px;
}

.page-hero p strong {
  color: #fff;
}

.page-hero .breadcrumb,
.page-hero .breadcrumb a {
  color: rgba(255, 255, 255, 0.5);
}

.page-hero .breadcrumb a:hover {
  color: var(--color-signal);
}

.breadcrumb {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--color-text-muted);
  margin-bottom: 20px;
}

.breadcrumb a:hover {
  color: var(--color-navy);
}

/* ---------------------------------- Value / Grid cards ---------------------------------- */

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

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.card {
  position: relative;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  padding: 34px;
  box-shadow: var(--shadow-s);
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.22, 0.9, 0.32, 1), box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-green), var(--color-navy));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.22, 0.9, 0.32, 1);
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-m);
  border-color: rgba(0, 132, 68, 0.28);
}

.card:hover::before {
  transform: scaleX(1);
}

.card h3 {
  margin-bottom: 12px;
}

.card p {
  color: var(--color-text-muted);
  font-size: 15px;
}

/* Dark-surface card */
.section-dark .card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

.section-dark .card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(61, 220, 132, 0.35);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.section-dark .card p {
  color: rgba(255, 255, 255, 0.6);
}

/* ---------------------------------- Manifesto statement ---------------------------------- */

.manifesto {
  position: relative;
  max-width: 900px;
  padding: 8px 0 8px 34px;
  margin-bottom: 20px;
}

.manifesto::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(var(--color-green), var(--color-navy));
}

.manifesto p {
  font-size: clamp(20px, 2.5vw, 27px);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: -0.015em;
  color: var(--color-text);
}

.manifesto .mf-mark {
  color: var(--color-green);
}

.manifesto-note {
  max-width: 760px;
  margin: 0 0 52px 34px;
  color: var(--color-text-muted);
  font-size: 15.5px;
}

/* ---------------------------------- Service preview cards ---------------------------------- */

.service-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-l);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-s);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-m);
}

.service-card-top {
  padding: 40px 32px 28px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.service-card-top.navy { background: linear-gradient(135deg, #132b6b, #0b1c4a); }
.service-card-top.green { background: linear-gradient(135deg, #008444, #046536); }

.service-card-top img {
  height: 40px;
  width: auto;
  background: #fff;
  padding: 6px 10px;
  border-radius: 10px;
}

.service-card-top .service-name {
  color: #fff;
}

.service-card-top .service-name .kr {
  font-size: 19px;
  font-weight: 800;
}

.service-card-top .service-name .en {
  font-size: 12.5px;
  color: rgba(255,255,255,0.7);
  font-weight: 600;
  letter-spacing: 0.03em;
}

.service-card-body {
  padding: 28px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1;
}

.service-card-body p {
  color: var(--color-text-muted);
  font-size: 15px;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  font-size: 12.5px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

/* ---------------------------------- Featured / sub service (homepage) ---------------------------------- */

/* Dark-surface variants, used when the flagship section runs on .section-dark */
.section-dark .service-feature {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: none;
}

.section-dark .service-feature:hover {
  border-color: rgba(61, 220, 132, 0.4);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.45);
}

.section-dark .service-feature-body p {
  color: rgba(255, 255, 255, 0.62);
}

.section-dark .tag {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.7);
}

.section-dark .service-sub {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.12);
}

.section-dark .service-sub:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(61, 220, 132, 0.35);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35);
}

.section-dark .service-sub img {
  background: #fff;
  padding: 5px 8px;
  border-radius: 8px;
}

.section-dark .service-sub-text .ss-name {
  color: #fff;
}

.section-dark .service-sub-text .ss-desc {
  color: rgba(255, 255, 255, 0.55);
}

.section-dark .service-sub-label {
  color: rgba(255, 255, 255, 0.5);
}

.section-dark .service-sub-label::before {
  background: var(--color-signal);
}

.section-dark .service-sub .arrow {
  color: rgba(255, 255, 255, 0.5);
}

.service-feature {
  display: grid;
  grid-template-columns: 320px 1fr;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-l);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-s);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.service-feature:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-m);
}

.service-feature-visual {
  position: relative;
  background:
    radial-gradient(320px 220px at 15% 10%, rgba(61, 220, 132, 0.22), transparent 60%),
    linear-gradient(160deg, #008444 0%, #046536 55%, var(--color-ink-deep) 130%);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  color: #fff;
  overflow: hidden;
}

.service-feature-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.08) 1px, transparent 0);
  background-size: 22px 22px;
  pointer-events: none;
}

.service-feature-visual img {
  position: relative;
  align-self: flex-start;
  height: 40px;
  width: auto;
  background: #fff;
  padding: 8px 12px;
  border-radius: 10px;
}

.service-feature-visual .sf-tag {
  position: relative;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.65);
  text-transform: uppercase;
}

.service-feature-visual .sf-tag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-signal);
  box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.6);
  animation: pulse-dot 2s ease-out infinite;
}

.service-feature-visual .sf-name {
  position: relative;
  font-size: 22px;
  font-weight: 800;
  margin-top: 6px;
}

.service-feature-body {
  padding: 40px 40px 40px 36px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.service-feature-body p {
  color: var(--color-text-muted);
  font-size: 16px;
  max-width: 600px;
}

.service-sub-wrap {
  margin-top: 20px;
}

.service-sub-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  text-transform: uppercase;
  margin-bottom: 14px;
}

.service-sub-label::before {
  content: "";
  width: 16px;
  height: 1px;
  background: var(--color-border);
}

.service-sub {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 26px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  background: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.service-sub:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-s);
}

.service-sub img {
  height: 28px;
  width: auto;
  flex-shrink: 0;
}

.service-sub-text {
  flex: 1;
}

.service-sub-text .ss-name {
  font-weight: 800;
  font-size: 15.5px;
}

.service-sub-text .ss-desc {
  color: var(--color-text-muted);
  font-size: 13.5px;
  margin-top: 2px;
}

.service-sub .arrow {
  color: var(--color-text-muted);
  font-size: 18px;
  flex-shrink: 0;
}

@media (max-width: 860px) {
  .service-feature {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .service-sub {
    flex-wrap: wrap;
  }
}

/* ---------------------------------- Service detail page ---------------------------------- */

.service-hero {
  position: relative;
  padding: 112px 0 96px;
  color: #fff;
  overflow: hidden;
}

.service-hero h1 {
  font-size: clamp(36px, 5.6vw, 74px);
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.service-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.07) 1px, transparent 0);
  background-size: 24px 24px;
  pointer-events: none;
}

.service-hero.navy { background: linear-gradient(145deg, #132b6b 0%, #0b1c4a 55%, var(--color-ink-deep) 130%); }
.service-hero.green { background: linear-gradient(145deg, #008444 0%, #046536 55%, var(--color-ink-deep) 130%); }

.service-hero .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.service-hero-text {
  position: relative;
  max-width: 620px;
}

.service-hero .breadcrumb a {
  color: rgba(255,255,255,0.65);
}
.service-hero .breadcrumb {
  color: rgba(255,255,255,0.55);
}

.service-hero .eyebrow {
  color: rgba(255,255,255,0.75);
}

.service-hero h1 {
  color: #fff;
}

.service-hero p.lead {
  margin-top: 18px;
  font-size: 17px;
  color: rgba(255,255,255,0.85);
}

.service-hero-logo {
  position: relative;
  background: #fff;
  border-radius: var(--radius-m);
  padding: 24px 32px;
  box-shadow: var(--shadow-m);
}

.service-hero-logo img {
  height: 64px;
  width: auto;
}

.feature-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.feature-block {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  padding: 38px 34px 34px;
  background: #fff;
  box-shadow: var(--shadow-s);
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.22, 0.9, 0.32, 1), box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.feature-block::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--color-navy);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.22, 0.9, 0.32, 1);
}

.feature-block.green::before {
  background: linear-gradient(90deg, var(--color-green), var(--color-navy));
}

.feature-block:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-m);
  border-color: rgba(0, 132, 68, 0.28);
}

.feature-block:hover::before {
  transform: scaleX(1);
}

/* Oversized ghost index in the corner */
.feature-block .num {
  position: absolute;
  top: 18px;
  right: 26px;
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 800;
  line-height: 1;
  color: rgba(19, 43, 107, 0.07);
  letter-spacing: -0.03em;
  transition: color 0.35s ease;
  pointer-events: none;
}

.feature-block.green .num { color: rgba(0, 132, 68, 0.09); }

.feature-block:hover .num { color: rgba(0, 132, 68, 0.2); }

.feature-block h3,
.feature-block > p {
  position: relative;
  max-width: 88%;
}

.feature-block h3 {
  margin-bottom: 10px;
}

.feature-block > p {
  color: var(--color-text-muted);
  font-size: 15px;
}

.feature-block ul {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.feature-block ul li {
  display: flex;
  gap: 12px;
  font-size: 14.5px;
  color: var(--color-text-muted);
}

.feature-block ul li::before {
  content: "";
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 5px;
  border-radius: 4px;
  background: rgba(19, 43, 107, 0.10);
  background-image: linear-gradient(45deg, transparent 44%, var(--color-navy) 44%, var(--color-navy) 56%, transparent 56%);
  background-size: 8px 8px;
  background-position: center;
  background-repeat: no-repeat;
}

.feature-block.green ul li::before {
  background-color: rgba(0, 132, 68, 0.10);
  background-image: linear-gradient(45deg, transparent 44%, var(--color-green) 44%, var(--color-green) 56%, transparent 56%);
}

.report-card {
  display: block;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-s);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.report-card img {
  width: 100%;
  display: block;
  border-bottom: 1px solid var(--color-border);
}

.report-card .caption {
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-align: center;
}

/* Mobile-first: plain stacked list */
.report-fan {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.report-fan .report-card {
  width: 100%;
  max-width: 340px;
}

.report-fan .report-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-m);
}

/* From tablet width up: overlapping fan / card-deck layout */
@media (min-width: 860px) {
  .report-fan {
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    padding: 56px 20px 110px;
  }

  .report-fan .report-card {
    width: 190px;
    max-width: none;
    margin-left: -142px;
    transform-origin: bottom center;
    transition: transform 0.35s cubic-bezier(0.22, 0.9, 0.32, 1), box-shadow 0.35s ease;
  }

  .report-fan .report-card:first-child {
    margin-left: 0;
  }

  .report-fan .report-card:nth-child(1) { transform: rotate(-16deg); z-index: 6; }
  .report-fan .report-card:nth-child(2) { transform: rotate(-10deg); z-index: 5; }
  .report-fan .report-card:nth-child(3) { transform: rotate(-4deg);  z-index: 4; }
  .report-fan .report-card:nth-child(4) { transform: rotate(4deg);   z-index: 3; }
  .report-fan .report-card:nth-child(5) { transform: rotate(10deg);  z-index: 2; }
  .report-fan .report-card:nth-child(6) { transform: rotate(16deg);  z-index: 1; }

  .report-fan .report-card:hover {
    transform: translateY(-56px) rotate(0deg) scale(1.08);
    box-shadow: 0 28px 48px rgba(18, 20, 26, 0.28);
    z-index: 20;
  }

  .report-fan:has(.report-card:hover) .report-card:not(:hover) {
    filter: saturate(0.85) brightness(0.94);
  }
}

.lang-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.lang-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 22px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-s);
  font-weight: 700;
  font-size: 14.5px;
  transition: transform 0.25s cubic-bezier(0.22, 0.9, 0.32, 1), border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.lang-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-navy);
  opacity: 0.55;
  transition: opacity 0.25s ease, background 0.25s ease;
}

.lang-pill:hover {
  transform: translateY(-3px);
  border-color: rgba(19, 43, 107, 0.35);
  box-shadow: var(--shadow-m);
}

.lang-pill:hover::before {
  background: var(--color-green);
  opacity: 1;
}

/* ---------------------------------- Demo showcase ---------------------------------- */

.demo-showcase {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 56px;
  align-items: center;
}

.demo-showcase-media {
  position: relative;
  padding: 14px;
  border-radius: var(--radius-l);
  background: linear-gradient(160deg, rgba(19, 43, 107, 0.10), rgba(0, 132, 68, 0.10));
  border: 1px solid var(--color-border);
}

.demo-showcase img {
  width: 100%;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-m);
  display: block;
}

.demo-showcase-media .live-tag {
  position: absolute;
  top: 26px;
  left: 26px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  background: rgba(9, 12, 20, 0.82);
  backdrop-filter: blur(6px);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.demo-showcase-media .live-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-signal);
  box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.6);
  animation: pulse-dot 2s ease-out infinite;
}

.demo-showcase-text h3 {
  margin-bottom: 16px;
}

.demo-showcase-text p {
  color: var(--color-text-muted);
  font-size: 15.5px;
  max-width: 560px;
}

@media (max-width: 860px) {
  .demo-showcase {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .demo-showcase-media {
    max-width: 340px;
    margin: 0 auto;
  }
}

/* ---------------------------------- Awards ---------------------------------- */

.award-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.award-item {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  padding: 26px 28px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  background: #fff;
}

.award-item .award-year {
  flex-shrink: 0;
  width: 92px;
  height: 92px;
  border-radius: var(--radius-s);
  background: var(--color-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 22px;
  color: var(--color-navy);
}

.award-item.highlight .award-year {
  background: rgba(0, 132, 68, 0.10);
  color: var(--color-green);
}

.award-item .award-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 132, 68, 0.12);
  color: var(--color-green-dark);
  margin-bottom: 8px;
}

.award-item h3 {
  font-size: 17px;
  margin-bottom: 6px;
}

.award-item p {
  color: var(--color-text-muted);
  font-size: 14.5px;
}

/* ---------------------------------- Team ---------------------------------- */

.team-card {
  text-align: center;
  padding: 40px 28px;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.22, 0.9, 0.32, 1), box-shadow 0.3s ease;
}

.team-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-green), var(--color-navy));
  transform: scaleX(0);
  transition: transform 0.35s cubic-bezier(0.22, 0.9, 0.32, 1);
}

.team-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-m);
}

.team-card:hover::before {
  transform: scaleX(1);
}

.avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: #fff;
  background: linear-gradient(135deg, var(--color-navy), var(--color-green));
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.team-card:hover .avatar {
  transform: scale(1.08) rotate(-4deg);
}

.team-card .role {
  display: inline-block;
  margin-top: 6px;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-navy);
  background: rgba(19, 43, 107, 0.08);
  padding: 4px 12px;
  border-radius: 999px;
}

.team-card .name {
  font-size: 19px;
  font-weight: 800;
}

.team-card p.desc {
  margin-top: 8px;
  font-size: 14px;
  color: var(--color-text-muted);
}

/* ---------------------------------- CTA banner ---------------------------------- */

.cta-banner {
  position: relative;
  background:
    radial-gradient(700px 320px at 15% 10%, rgba(61, 220, 132, 0.16), transparent 60%),
    radial-gradient(600px 300px at 95% 100%, rgba(19, 43, 107, 0.55), transparent 60%),
    var(--color-ink-deep);
  border-radius: var(--radius-l);
  padding: 56px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  overflow: hidden;
  box-shadow: 0 0 90px -24px rgba(61, 220, 132, 0.3), var(--shadow-m);
}

.cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.06) 1px, transparent 0);
  background-size: 24px 24px;
  pointer-events: none;
}

.cta-banner > * {
  position: relative;
}

.cta-banner h2 {
  color: #fff;
  font-size: 28px;
}

.cta-banner p {
  color: rgba(255,255,255,0.65);
  margin-top: 10px;
}

/* ---------------------------------- Footer ---------------------------------- */

.site-footer {
  position: relative;
  background:
    radial-gradient(900px 400px at 12% 0%, rgba(61, 220, 132, 0.08), transparent 60%),
    radial-gradient(700px 360px at 92% 100%, rgba(19, 43, 107, 0.5), transparent 60%),
    var(--color-ink-deep);
  color: rgba(255,255,255,0.65);
  padding: 64px 0 32px;
  overflow: hidden;
}

.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-signal), var(--color-navy) 60%, transparent);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.footer-brand img {
  height: 26px;
}

.footer-brand span {
  font-weight: 800;
  color: #fff;
  font-size: 16px;
}

.footer-col h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.footer-col h4::before {
  content: "";
  width: 14px;
  height: 1px;
  background: var(--color-signal);
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14px;
}

.footer-col ul li a {
  transition: color 0.2s ease, padding-left 0.2s ease;
}

.footer-col ul li a:hover {
  color: var(--color-signal);
  padding-left: 4px;
}

.footer-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13.5px;
  font-family: var(--font-mono);
  color: rgba(255, 255, 255, 0.55);
  padding-top: 28px;
}

.footer-meta a {
  transition: color 0.2s ease;
}

.footer-meta a:hover {
  color: var(--color-signal);
}

.footer-meta .copyright {
  margin-top: 14px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.45);
}

/* ---------------------------------- Responsive ---------------------------------- */

@media (max-width: 980px) {
  .nav-links,
  .header-cta .btn {
    display: none;
  }
  .nav-toggle {
    display: flex;
  }
  .hero {
    min-height: 0;
    padding: 56px 0 88px;
  }
  .hero-cue {
    display: none;
  }
  .hero-inner {
    grid-template-columns: 1fr;
  }
  .grid-3, .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .feature-row {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 28px;
  }
  .stat-item:nth-child(3) {
    border-left: none;
  }
}

@media (max-width: 640px) {
  .section {
    padding: 64px 0;
  }
  .grid-3, .grid-2, .grid-4 {
    grid-template-columns: 1fr;
  }
  .cta-banner {
    padding: 36px 24px;
    flex-direction: column;
    align-items: flex-start;
  }
  .award-item {
    flex-direction: column;
  }
  .award-item .award-year {
    width: 72px;
    height: 72px;
    font-size: 16px;
  }
  .service-hero .container {
    flex-direction: column;
    align-items: flex-start;
  }
  .hero-art {
    min-height: 320px;
  }
  .stat-grid {
    grid-template-columns: 1fr;
    row-gap: 24px;
  }
  .stat-item {
    border-left: none;
    padding-left: 0;
  }
  .value-item,
  .award-strip-item {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .award-strip-item {
    padding: 20px 0;
  }
  .award-strip-tag {
    justify-self: flex-start;
  }
}

/* Mobile nav panel */
.mobile-nav {
  display: none;
  position: fixed;
  inset: 80px 0 0 0;
  background: #fff;
  z-index: 99;
  padding: 24px;
  overflow-y: auto;
}

.mobile-nav.open {
  display: block;
}

.mobile-nav a {
  display: block;
  padding: 16px 4px;
  font-size: 18px;
  font-weight: 700;
  border-bottom: 1px solid var(--color-border);
}

.mobile-nav .sub-links {
  padding-left: 16px;
}

.mobile-nav .sub-links a {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-muted);
  border-bottom: none;
  padding: 10px 4px;
}

/* ==========================================================================
   Liquid glass surfaces
   Every glass element is the same three layers: a translucent tint over a
   blurred+saturated backdrop, a specular rim (inset highlights), and a
   pointer-tracked sheen driven by the --gx / --gy custom properties.
   ========================================================================== */

/* ---- Ambient aurora (injected by js/motion.js into dark surfaces) ---- */

.aurora {
  position: absolute;
  inset: -25% -12%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
  contain: paint;
}

.aurora span {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(70px);
  will-change: transform;
  animation: aurora-drift 26s ease-in-out infinite alternate;
}

.aurora span:nth-child(1) {
  width: 46%;
  padding-bottom: 46%;
  left: 4%;
  top: 6%;
  background: radial-gradient(circle, rgba(61, 220, 132, 0.55), transparent 68%);
  animation-duration: 24s;
}

.aurora span:nth-child(2) {
  width: 54%;
  padding-bottom: 54%;
  right: 2%;
  top: 18%;
  background: radial-gradient(circle, rgba(19, 43, 107, 0.85), transparent 68%);
  animation-duration: 31s;
  animation-delay: -8s;
}

.aurora span:nth-child(3) {
  width: 38%;
  padding-bottom: 38%;
  left: 34%;
  bottom: -6%;
  background: radial-gradient(circle, rgba(110, 168, 255, 0.42), transparent 68%);
  animation-duration: 28s;
  animation-delay: -15s;
}

@keyframes aurora-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  33%  { transform: translate3d(6%, -8%, 0) scale(1.14); }
  66%  { transform: translate3d(-7%, 5%, 0) scale(0.92); }
  100% { transform: translate3d(4%, 9%, 0) scale(1.08); }
}

/* Light surfaces get a much quieter aurora so text contrast is untouched. */
.aurora.aurora-light span {
  opacity: 0.22;
  filter: blur(90px);
}

/* ---- Pointer-tracked sheen ---- */

/* The highlight is a pseudo-element with `border-radius: inherit`, so it
   follows the host's corners without needing `overflow: hidden`. */
.sheen {
  position: relative;
}

.sheen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
    280px 220px at var(--gx, 50%) var(--gy, 0%),
    rgba(255, 255, 255, 0.55),
    rgba(255, 255, 255, 0) 68%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  mix-blend-mode: soft-light;
}

.sheen:hover::after,
.sheen:focus-visible::after {
  opacity: 1;
}

.section-dark .sheen::after,
.hero-art.sheen::after {
  background: radial-gradient(
    300px 240px at var(--gx, 50%) var(--gy, 0%),
    rgba(255, 255, 255, 0.28),
    rgba(255, 255, 255, 0) 66%
  );
  mix-blend-mode: screen;
}

/* ---- Glass pills: badges, tags, language chips ---- */

.hero-badge {
  background: linear-gradient(140deg, rgba(20, 26, 40, 0.92), rgba(9, 12, 20, 0.86));
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 26px -14px rgba(9, 12, 20, 0.9);
}

.tag,
.lang-pill,
.award-strip-tag {
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), var(--shadow-s);
}

.lang-pill {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.55));
  border-color: rgba(255, 255, 255, 0.8);
}

.section-dark .tag {
  box-shadow: inset 0 1px 0 var(--glass-spec-dark);
}

/* ---- Glass panels ---- */

/* .report-card is left out on purpose: six rotated, overlapping cards each
   sampling a backdrop is expensive and invisible behind an opaque screenshot. */
.card,
.feature-block,
.service-feature,
.service-sub,
.award-item {
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}

.card,
.feature-block {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.72));
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow: var(--shadow-s), inset 0 1px 0 var(--glass-spec);
}

.card:hover,
.feature-block:hover {
  box-shadow: var(--shadow-m), inset 0 1px 0 var(--glass-spec);
}

.section-alt .card,
.section-alt .feature-block {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.78));
}

.section-dark .card,
.section-dark .service-feature,
.section-dark .service-sub {
  background: linear-gradient(155deg, var(--glass-fill-dark), rgba(255, 255, 255, 0.02));
  border-color: var(--glass-edge-dark);
  box-shadow: var(--glass-shadow-dark), inset 0 1px 0 var(--glass-spec-dark);
}

.section-dark .card:hover,
.section-dark .service-feature:hover,
.section-dark .service-sub:hover {
  border-color: rgba(61, 220, 132, 0.42);
  box-shadow: 0 30px 70px -26px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* The flagship panel needs its own stacking context so the sheen sits above
   the two-column grid content. */
.service-feature {
  position: relative;
  isolation: isolate;
}

/* ---- Buttons: travelling specular sweep ---- */

.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  background: linear-gradient(
    112deg,
    transparent 18%,
    rgba(255, 255, 255, 0.5) 44%,
    transparent 68%
  );
  transform: translateX(-130%);
  transition: transform 0.75s cubic-bezier(0.22, 0.9, 0.32, 1);
}

.btn:hover::before,
.btn:focus-visible::before {
  transform: translateX(130%);
}

.btn-outline {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.45));
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 var(--glass-spec);
}

.btn-ghost-light {
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  box-shadow: inset 0 1px 0 var(--glass-spec-dark);
}

/* ---- Surfaces that host an aurora need their content lifted above it ---- */

.page-hero .container,
.service-hero .container,
.section-dark .container,
.site-footer .container,
.cta-banner > *:not(.aurora) {
  position: relative;
  z-index: 1;
}

.cta-banner {
  border: 1px solid var(--glass-edge-dark);
  box-shadow: 0 0 90px -24px rgba(61, 220, 132, 0.3), var(--shadow-m),
    inset 0 1px 0 var(--glass-spec-dark);
}

/* ==========================================================================
   Marquee ticker
   The track holds the item list twice, so a -50% translation loops seamlessly
   with no JavaScript. motion.js only adds a scroll-velocity skew on top.
   ========================================================================== */

.marquee {
  position: relative;
  overflow: hidden;
  padding: 18px 0;
  background: var(--color-ink-deep);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-run 38s linear infinite;
  will-change: transform;
}

.marquee-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  padding-right: 22px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  white-space: nowrap;
}

.marquee-item::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-signal);
  opacity: 0.7;
}

.marquee-item.accent {
  color: var(--color-signal);
}

@keyframes marquee-run {
  to { transform: translate3d(-50%, 0, 0); }
}

/* ==========================================================================
   Horizontal stage
   Default (and no-JS / mobile) behaviour is a snap-scrolling row the visitor
   swipes. With GSAP the section pins and the row is driven by scroll instead.
   ========================================================================== */

.hstage {
  position: relative;
  overflow: hidden;
  padding: 96px 0;
  color: #fff;
  background-color: var(--color-ink-deep);
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.06) 1px, transparent 0);
  background-size: 24px 24px;
}

.hstage-head {
  position: relative;
  z-index: 1;
  max-width: var(--container-w);
  margin: 0 auto 44px;
  padding: 0 24px;
}

.hstage-head h2 {
  color: #fff;
}

.hstage-head p {
  margin-top: 14px;
  max-width: 560px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.6);
}

.hstage-viewport {
  position: relative;
  z-index: 1;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.hstage-viewport::-webkit-scrollbar {
  display: none;
}

.hstage-track {
  display: flex;
  gap: 24px;
  width: max-content;
  padding: 8px max(24px, calc((100vw - var(--container-w)) / 2 + 24px)) 24px;
}

.hpanel {
  position: relative;
  flex: 0 0 min(84vw, 560px);
  min-height: 380px;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  padding: 38px 34px 34px;
  border-radius: var(--radius-l);
  background: linear-gradient(155deg, var(--glass-fill-dark), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--glass-edge-dark);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: var(--glass-shadow-dark), inset 0 1px 0 var(--glass-spec-dark);
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

.hpanel:hover {
  border-color: rgba(61, 220, 132, 0.4);
  box-shadow: 0 30px 70px -26px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.hpanel-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 68px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(61, 220, 132, 0.32);
  margin-bottom: 26px;
}

.hpanel h3 {
  font-size: 23px;
  line-height: 1.38;
  color: #fff;
  margin-bottom: 14px;
}

.hpanel p {
  font-size: 15.5px;
  color: rgba(255, 255, 255, 0.62);
}

.hpanel-tag {
  margin-top: auto;
  padding-top: 26px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

/* Only once motion.js has actually built the pin does the viewport stop being
   a scroll container — otherwise a row too wide to fit would be clipped by
   .hstage's overflow with no way to reach the last panel. */
.hstage.is-pinned {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
}

.hstage.is-pinned .hstage-viewport {
  overflow: visible;
  scroll-snap-type: none;
}

/* Declared after the base rules above — the shared responsive block earlier in
   this file cannot override them, since these classes are defined down here. */
@media (max-width: 980px) {
  .hstage {
    padding: 72px 0;
  }
  .hstage-head {
    margin-bottom: 32px;
  }
  .hpanel {
    padding: 32px 26px 28px;
    min-height: 320px;
  }
  .hpanel-num {
    font-size: 54px;
    margin-bottom: 20px;
  }
}

/* ==========================================================================
   Sticky editorial split
   ========================================================================== */

.split {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 64px;
  align-items: start;
}

.split-sticky {
  position: sticky;
  top: 120px;
}

.split-sticky .section-header {
  margin-bottom: 24px;
}

.split-figure {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(64px, 8vw, 116px);
  font-variant-numeric: tabular-nums;
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: rgba(19, 43, 107, 0.10);
}

/* The caption stays mono — it belongs with the eyebrow/tag label family. */
.split-figure small {
  font-family: var(--font-mono);
  display: block;
  margin-top: 12px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.split-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Award rows lose a column's worth of width inside the split, so the badge
   drops under the title instead of squeezing the headline. Kept above the
   640px breakpoint, which stacks these rows to a single column of its own. */
@media (min-width: 641px) {
  /* 86px holds "2026.07" — seven mono glyphs at 16px is roughly 67px. */
  .split .award-strip-item {
    grid-template-columns: 86px 1fr;
    row-gap: 10px;
  }

  .split .award-strip-tag {
    grid-column: 2;
    justify-self: start;
  }

  .split .award-strip-year {
    font-size: 16px;
  }
}

@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .split-sticky {
    position: static;
  }
  .split-figure {
    display: none;
  }
}

/* ==========================================================================
   News feed
   One timeline for every kind of update — awards, press mentions, insight
   posts — so a thin news stream never has to stand on its own page.
   ========================================================================== */

.feed {
  display: flex;
  flex-direction: column;
}

.feed-item {
  position: relative;
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 6px 22px;
  padding: 26px 0 26px 20px;
  border-top: 1px solid var(--color-border);
  overflow: hidden;
  transition: padding-left 0.3s cubic-bezier(0.22, 0.9, 0.32, 1), background 0.3s ease;
}

.feed-item:last-child {
  border-bottom: 1px solid var(--color-border);
}

.feed-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  bottom: -1px;
  width: 3px;
  background: linear-gradient(var(--color-green), var(--color-navy));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.35s cubic-bezier(0.22, 0.9, 0.32, 1);
}

.feed-item:hover {
  padding-left: 32px;
  background: linear-gradient(90deg, rgba(0, 132, 68, 0.035), transparent 60%);
}

.feed-item:hover::before {
  transform: scaleY(1);
}

.feed-date {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--color-navy);
  transition: color 0.3s ease;
}

.feed-item:hover .feed-date {
  color: var(--color-green-dark);
}

.feed-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.feed-kind {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.feed-kind.award {
  background: rgba(0, 132, 68, 0.10);
  color: var(--color-green-dark);
}

.feed-kind.press {
  background: rgba(19, 43, 107, 0.10);
  color: var(--color-navy);
}

.feed-kind.insight {
  background: rgba(0, 86, 179, 0.10);
  color: var(--color-blue);
}

.feed-badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-muted);
}

.feed-item h3 {
  font-size: 17px;
  line-height: 1.45;
  margin-bottom: 5px;
}

.feed-item p {
  font-size: 14.5px;
  color: var(--color-text-muted);
}

/* Source line for press entries: outlet · reporter · original link */
.feed-source {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--color-text-muted);
}

.feed-source a {
  color: var(--color-navy);
  border-bottom: 1px solid rgba(19, 43, 107, 0.3);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.feed-source a:hover {
  color: var(--color-green-dark);
  border-color: var(--color-green);
}

.feed-more {
  margin-top: 28px;
  justify-self: start;
}

/* Sits under the feed in the second column, not beside the sticky header. */
.split > .feed-more {
  grid-column: 2;
}

@media (max-width: 900px) {
  .split > .feed-more {
    grid-column: 1;
  }
}

@media (max-width: 640px) {
  .feed-item {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 22px 0;
  }
  .feed-item:hover {
    padding-left: 12px;
  }
}

/* ==========================================================================
   Scroll progress rail (injected by js/motion.js)
   ========================================================================== */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 200;
  pointer-events: none;
  background: rgba(18, 20, 26, 0.06);
}

.scroll-progress span {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--color-green), var(--color-signal) 45%, var(--color-navy));
  box-shadow: 0 0 12px rgba(61, 220, 132, 0.6);
}

/* ==========================================================================
   GSAP hand-off
   `.has-motion` is set by js/motion.js the moment GSAP is confirmed loaded.
   Until then the CSS-only reveal above stays in charge, so the page still
   animates when the CDN is unreachable or JS is disabled.
   ========================================================================== */

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

/* The looping background-position drift repaints the section on every frame,
   which every backdrop-filtered child then has to re-sample. The aurora layer
   supplies that ambient movement instead once GSAP is running. */
.has-motion .section {
  animation: none;
}

/* Headline lines are clipped so the text can slide up out of a mask. */
.line-mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

.line-mask > span {
  display: block;
}

.has-motion .hero-art,
.has-motion .card,
.has-motion .feature-block,
.has-motion .service-feature {
  will-change: transform;
}

/* GSAP owns the transform on tilt-enabled panels; the CSS hover lift would
   fight it. Panels without `.tilt` (touch devices) keep the CSS behaviour. */
.tilt {
  transform-style: preserve-3d;
}

.tilt:hover {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .aurora span {
    animation: none;
  }
  .btn::before {
    display: none;
  }
}