@import url("assets/colors_and_type.css");

/* ─── Reset / shell ─────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #fff; color: var(--semantic-label-normal); }
body { font-family: var(--font-sans); font-size: 17px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }
:root {
  --container: 1280px;
  --gutter: 28px;
  --accent: #000;
  --accent-hover: #1B1C1E;
  /* Brand & surface tokens (2026-05-24 consistency pass) */
  --brand-blue: #0066FF;
  --surface-dark: #0F0F10;       /* standard dark section background */
  --surface-deep: #0a0a0b;       /* deeper black: hero/hole-band/factory-band */
  --section-y: 120px;            /* sub-page section vertical padding */
  --section-y-lg: 140px;         /* landing-page section vertical padding */
  --hover-accent: var(--brand-blue);
  --hover-lift-shadow: 0 14px 36px rgba(15, 18, 28, 0.08), 0 2px 6px rgba(15, 18, 28, 0.04);
}

/* Hover indicator bar — applied to all card surfaces */
.principle, .process__step, .cert, .infra-v2__card, .product, .flow-u__step, .eq-card { position: relative; }
.principle::before, .process__step::before, .cert::before, .infra-v2__card::before, .product::before, .flow-u__step::before, .eq-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 82%;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--hover-accent) 50%, transparent 100%);
  opacity: 0;
  transform: translateX(-50%) scaleX(0.25);
  transform-origin: center;
  transition: opacity .25s ease, transform .45s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
  z-index: 3;
}
.principle:hover::before, .process__step:hover::before, .cert:hover::before, .infra-v2__card:hover::before, .product:hover::before, .flow-u__step:hover::before, .eq-card:hover::before {
  opacity: 1;
  transform: translateX(-50%) scaleX(1);
}

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section-y-lg) 0; position: relative; }
.section--tight { padding: 100px 0; }
.section--dark { background: var(--surface-dark); color: #fff; }

.eyebrow { font: 600 14px/1 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-blue); }
.section--dark .eyebrow { color: rgba(255,255,255,0.55); }
.selection .eyebrow { font-size: 15px; }
.section-title { font: 700 56px/1.18 var(--font-sans); letter-spacing: -0.026em; color: var(--semantic-label-strong); margin: 18px 0 0; text-wrap: balance; }
.section--dark .section-title { color: #fff; }
.section-subtitle { font: 500 20px/1.65 var(--font-sans); color: var(--semantic-label-alternative); letter-spacing: 0; margin: 24px 0 0; max-width: 720px; }
.section--dark .section-subtitle { color: rgba(255,255,255,0.7); }

/* ─── Top nav ──────────────────────────────────────────────── */
.topnav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: rgba(15,15,16,0.88); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid rgba(255,255,255,0.06); color: #fff; }
.topnav--on-hero { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; color: #fff; }
.topnav__inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter) 14px; height: 88px; display: flex; align-items: flex-end; gap: 40px; }
.topnav__brand { display: flex; align-items: flex-end; gap: 12px; text-decoration: none; }
.topnav__brand img { display: none; }
.topnav__brand .symbol { display: inline-block; width: 38px; height: 33px; background: #fff; -webkit-mask: url(assets/logos/themyong-symbol.webp) center / contain no-repeat; mask: url(assets/logos/themyong-symbol.webp) center / contain no-repeat; flex: none; }
.topnav__brand .word { font: 500 28px/1 var(--font-sans); letter-spacing: -0.018em; color: #fff; white-space: nowrap; }
.topnav__burger { display: none; }
.topnav__menu { display: flex; gap: 36px; flex: 1; margin-left: 24px; align-items: flex-end; }
.topnav__menu a { font: 500 22px/1 var(--font-sans); color: rgba(255,255,255,0.72); text-decoration: none; padding: 0; letter-spacing: -0.012em; position: relative; transition: color .15s; white-space: nowrap; }
.topnav__menu a:hover { color: #fff; }
.topnav__menu a.active { color: #fff; }
.topnav__menu a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: currentColor; }
.topnav__lang { display: flex; gap: 4px; padding: 4px; background: rgba(255,255,255,0.10); border-radius: 999px; }
.topnav__lang button { background: transparent; border: 0; padding: 7px 12px; border-radius: 999px; font: 600 13px/1 var(--font-sans); letter-spacing: 0.04em; color: rgba(255,255,255,0.6); }
.topnav__lang button.active { background: #fff; color: var(--surface-dark); box-shadow: var(--shadow-1); }
.topnav .btn--primary { background: #fff; color: var(--surface-dark); }
.topnav .btn--primary:hover { background: var(--color-cool-95); }

/* ─── Buttons ──────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 10px; border: 0; font: 600 16px/1 var(--font-sans); letter-spacing: -0.005em; padding: 16px 24px; cursor: pointer; transition: background-color .15s ease, color .15s ease, transform .12s ease; text-decoration: none; white-space: nowrap; }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-hover); }
.btn--outline { background: #fff; color: var(--semantic-label-strong); border: 1px solid var(--semantic-line-normal); }
.btn--outline:hover { background: var(--color-cool-99); border-color: var(--semantic-line-strong); }
.btn--ghost { background: transparent; color: var(--semantic-label-strong); padding: 16px 6px; }
.btn--ghost:hover { color: var(--semantic-primary-normal); }
.btn--on-dark { background: #fff; color: var(--surface-dark); }
.btn--on-dark:hover { background: var(--color-cool-95); }
.btn--on-dark-outline { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.3); }
.btn--on-dark-outline:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.5); }
.btn--sm { padding: 12px 18px; font-size: 14.5px; border-radius: 8px; }
.btn--lg { padding: 20px 30px; font-size: 17px; border-radius: 12px; }
.btn .ic { width: 18px; height: 18px; background: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }

/* ─── Hero (full-viewport, sticky) ─────────────────────────── */
.hero { position: relative; height: 100vh; min-height: 720px; background: var(--surface-deep); color: #fff; overflow: hidden; display: flex; align-items: center; }
.hero--sticky { position: sticky; top: 0; z-index: 1; }
.hero__inner { position: relative; z-index: 2; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); width: 100%; display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: center; }
.hero--video { background: #000; }
.hero--video .hero__inner { grid-template-columns: 1fr; gap: 0; }
.hero__video-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; display: block; }
.hero__video-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 35%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0.85) 100%); pointer-events: none; }
.hero__copy { max-width: 100%; }
.hero h1 { font: 800 76px/1.1 var(--font-sans); letter-spacing: -0.032em; margin: 0; color: #fff; text-shadow: 0 2px 32px rgba(0,0,0,0.55); }
.hero h1 em { font-style: normal; color: #9EC5FF; }
.hero__sub { font: 500 21px/1.6 var(--font-sans); letter-spacing: 0; color: rgba(255,255,255,0.92); margin: 32px 0 0; max-width: 640px; text-shadow: 0 1px 16px rgba(0,0,0,0.5); }
.hero__cta { display: flex; gap: 14px; margin-top: 44px; flex-wrap: wrap; }
.hero__scrollcue { position: absolute; left: 50%; transform: translateX(-50%); bottom: 36px; display: flex; flex-direction: column; align-items: center; gap: 14px; color: rgba(255,255,255,0.55); font: 600 14px/1 var(--font-sans); letter-spacing: 0.2em; text-transform: uppercase; z-index: 3; }
.hero__scrollcue .arrow { width: 1px; height: 56px; background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0)); position: relative; }
.hero__scrollcue .arrow::after { content: ""; position: absolute; bottom: 0; left: 50%; width: 10px; height: 10px; border-right: 1px solid rgba(255,255,255,0.5); border-bottom: 1px solid rgba(255,255,255,0.5); transform: translateX(-50%) rotate(45deg); }
@keyframes scrollDot { 0% { transform: translateY(-12px); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateY(12px); opacity: 0; } }
.hero__scrollcue .arrow::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 18px; background: rgba(255,255,255,0.85); transform: translateX(-50%); animation: scrollDot 1.8s ease-in-out infinite; }

/* hole cross-section full-bleed band */
.hole-band { position: relative; width: 100%; background: var(--surface-deep); overflow: hidden; padding: 80px 0 96px; }
.hole-band__media { width: 100%; max-width: 820px; margin: 0 auto; aspect-ratio: 820 / 177; overflow: hidden; border-radius: 4px; }
.hole-band__media img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(1.05) contrast(1.08); image-rendering: -webkit-optimize-contrast; }
.hole-band__caption { margin-top: 36px; text-align: center; color: #fff; }
.hole-band__caption .eyebrow { color: #fff; }
.hole-band__caption h3 { font: 700 32px/1.3 var(--font-sans); letter-spacing: -0.014em; color: #fff; margin: 12px 0 0; }

/* factory full-bleed band */
.factory-band { position: relative; width: 100%; background: var(--surface-deep); overflow: hidden; }
.factory-band__media { position: relative; width: 100%; aspect-ratio: 21/9; }
.factory-band__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.factory-band__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.55) 75%, rgba(0,0,0,0.8) 100%); pointer-events: none; }
.factory-band__caption { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); color: #fff; pointer-events: none; z-index: 2; text-align: center; white-space: nowrap; }
.factory-band__caption .eyebrow { color: rgba(255,255,255,0.82); }
.factory-band__caption h3 { font: 700 32px/1.3 var(--font-sans); letter-spacing: -0.014em; margin: 12px 0 0; color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,0.9); }

.hero__meta { position: absolute; right: var(--gutter); bottom: 36px; display: flex; gap: 32px; font: 500 12px/1 var(--font-sans); letter-spacing: 0.14em; color: rgba(255,255,255,0.4); text-transform: uppercase; z-index: 3; }
.hero__meta span b { color: rgba(255,255,255,0.78); font-weight: 600; margin-left: 8px; }

/* Content overlay — slides up over sticky hero */
.content-stack { position: relative; z-index: 2; background: #fff; margin-top: -2px; }

/* Hero copy stays fixed while content stacks slide up */

/* ─── Pain (selection) ─────────────────────────────────────── */
.selection { background: var(--semantic-background-alternative); }
.selection__inner { display: grid; grid-template-columns: 1.3fr 1fr; gap: 88px; align-items: center; }
.selection__visual { aspect-ratio: 1/1; background: #fff; border-radius: 28px; box-shadow: var(--shadow-1); display: grid; place-items: center; position: relative; overflow: hidden; }
.selection__visual image-slot { width: 100%; height: 100%; }
.selection__points { margin: 44px 0 0; display: grid; gap: 24px; }
.selection__point { display: grid; grid-template-columns: 32px 1fr; gap: 18px; align-items: start; }
.selection__point-marker { width: 32px; height: 1px; background: var(--semantic-label-strong); margin-top: 14px; }
.selection__point h4 { font: 700 21px/1.4 var(--font-sans); margin: 0; color: var(--semantic-label-strong); letter-spacing: -0.008em; }
.selection__point p { font: 500 16px/1.65 var(--font-sans); color: var(--semantic-label-alternative); margin: 8px 0 0; letter-spacing: 0; }
.selection__lead { font: 700 34px/1.4 var(--font-sans); color: var(--semantic-label-strong); margin: 48px 0 0; letter-spacing: -0.02em; }
.selection__lead em { font-style: normal; color: var(--brand-blue); }
.principles .section-title em { font-style: normal; color: var(--brand-blue); }

/* ─── Principles ───────────────────────────────────────────── */
.principles__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 72px; }
.principle { padding: 40px 36px; background: #fff; border: 1px solid var(--semantic-line-alternative); border-radius: 24px; transition: border-color .2s, background-color .2s, transform .2s, box-shadow .2s; min-height: 320px; display: flex; flex-direction: column; }
.principle:hover { border-color: var(--semantic-line-normal); box-shadow: var(--hover-lift-shadow); transform: translateY(-2px); }
.principle__head { display: flex; align-items: center; justify-content: space-between; }
.principle__num { font: 700 30px/1 var(--font-sans); letter-spacing: 0.02em; color: #1B2A4E; }
.principle__icon { width: 52px; height: 52px; display: grid; place-items: center; background: var(--color-cool-99); border-radius: 14px; }
.principle__icon .ic { width: 26px; height: 26px; background: var(--semantic-label-strong); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.principle h3 { font: 700 21px/1.4 var(--font-sans); letter-spacing: -0.01em; margin: 32px 0 0; color: var(--semantic-label-strong); }
.principle p { font: 500 16px/1.6 var(--font-sans); color: var(--semantic-label-alternative); margin: 12px 0 0; flex: 1; }

/* ─── Stats ───────────────────────────────────────────────── */
.stats { background: var(--semantic-background-alternative); }
.stats__subtitle { margin: 20px 0 0; font: 500 18px/1.65 var(--font-sans); color: var(--semantic-label-alternative); letter-spacing: -0.01em; max-width: 100%; }
.stats__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0; margin-top: 56px; border-top: 1px solid var(--semantic-line-normal); }
.stat { padding: 48px 28px; border-bottom: 1px solid var(--semantic-line-normal); border-right: 1px solid var(--semantic-line-normal); }
.stats__grid > .stat:nth-child(-n+4) { grid-column: span 3; }
.stats__grid > .stat:nth-child(n+5) { grid-column: span 3; border-bottom: none; }
.stats__grid > .stat:nth-child(4) { border-right: none; }
.stats__grid > .stat:nth-child(1),
.stats__grid > .stat:nth-child(5) { padding-left: 0; }
.stat__num { font: 800 60px/1 var(--font-sans); letter-spacing: -0.04em; color: var(--semantic-label-strong); display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.stat__num .unit { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--semantic-label-neutral); }
.stat__num .prefix { font-size: 22px; font-weight: 600; color: var(--semantic-label-alternative); margin-right: 4px; }
.stat__cap { font: 500 16px/1.55 var(--font-sans); color: var(--semantic-label-alternative); margin-top: 18px; letter-spacing: 0; }
.stats__trust { margin-top: 64px; padding: 36px 44px; background: #fff; border-radius: 24px; display: flex; flex-wrap: wrap; gap: 36px 64px; box-shadow: var(--shadow-1); }
.stats__trust-row { display: flex; flex-direction: column; gap: 8px; min-width: 220px; }
.stats__trust-row .lbl { font: 600 12px/1 var(--font-sans); letter-spacing: 0.14em; color: var(--semantic-label-assistive); text-transform: uppercase; }
.stats__trust-row .val { font: 600 16px/1.5 var(--font-sans); color: var(--semantic-label-strong); }
.stats__cta { margin-top: 72px; display: flex; gap: 14px; }

/* ─── Process ─────────────────────────────────────────────── */
.process__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 72px; }
.process__step { padding: 32px 28px; background: #fff; border: 1px solid var(--semantic-line-alternative); border-radius: 18px; position: relative; min-height: 260px; display: flex; flex-direction: column; transition: border-color .2s, background-color .2s, transform .2s, box-shadow .2s; }
.process__step:hover { border-color: var(--semantic-line-normal); box-shadow: var(--hover-lift-shadow); transform: translateY(-2px); }
.process__step .num { font: 800 44px/1 var(--font-sans); letter-spacing: -0.04em; color: var(--color-cool-90); }
.process__step h4 { font: 700 18px/1.4 var(--font-sans); margin: 36px 0 0; color: var(--semantic-label-strong); letter-spacing: -0.008em; }
.process__step p { font: 500 15px/1.6 var(--font-sans); color: var(--semantic-label-alternative); margin: 10px 0 0; flex: 1; }
.process__step::after { content: ""; position: absolute; top: 50%; right: -11px; width: 10px; height: 10px; border-top: 1px solid var(--color-cool-80); border-right: 1px solid var(--color-cool-80); transform: translateY(-50%) rotate(45deg); z-index: 2; background: var(--semantic-background-normal); }
.process__step:last-child::after { display: none; }
.process__lead { margin: 20px 0 56px; max-width: 100%; font: 500 18px/1.7 var(--font-sans); color: var(--semantic-label-alternative); letter-spacing: -0.01em; }

/* ─── Final CTA ───────────────────────────────────────────── */
.finalcta { background: var(--surface-dark); color: #fff; padding: 140px 0; position: relative; z-index: 2; }
.finalcta__inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 80px; align-items: center; }
.finalcta h2 { font: 800 64px/1.15 var(--font-sans); letter-spacing: -0.028em; color: #fff; margin: 18px 0 0; text-wrap: balance; }
.finalcta p { font: 500 19px/1.65 var(--font-sans); color: rgba(255,255,255,0.7); margin: 28px 0 0; max-width: 560px; }
.finalcta__actions { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.finalcta__actions .btn { padding: 20px 26px; font-size: 16.5px; justify-content: space-between; min-width: 300px; }

/* ─── Footer (light) ──────────────────────────────────────── */
.footer { background: #fff; color: var(--semantic-label-alternative); padding: 72px 0 40px; position: relative; z-index: 2; border-top: 1px solid var(--semantic-line-alternative); }
.footer__top { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: start; padding-bottom: 40px; border-bottom: 1px solid var(--semantic-line-alternative); }
.footer__brand { display: flex; flex-direction: column; gap: 16px; }
.footer__brand .word { font: 800 28px/1 var(--font-sans); letter-spacing: -0.022em; color: var(--semantic-label-strong); }
.footer__brand .tag { font: 500 14.5px/1.5 var(--font-sans); color: var(--semantic-label-alternative); letter-spacing: 0; }
.footer__links { display: flex; gap: 40px; }
.footer__col { display: flex; flex-direction: column; gap: 10px; min-width: 140px; }
.footer__col .hd { font: 600 12px/1 var(--font-sans); letter-spacing: 0.14em; color: var(--semantic-label-assistive); text-transform: uppercase; margin-bottom: 8px; }
.footer__col a { font: 500 15px/1.5 var(--font-sans); color: var(--semantic-label-neutral); text-decoration: none; }
.footer__col a:hover { color: var(--semantic-label-strong); }
.footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 32px; font: 500 13px/1.6 var(--font-sans); color: var(--semantic-label-assistive); letter-spacing: 0; }
.footer__bottom .info span { margin-right: 18px; }

/* ─── Sticky CTA ──────────────────────────────────────────── */
.sticky-cta { position: fixed; top: 110px; right: 28px; z-index: 40; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; transform: translateX(120%); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.sticky-cta.visible { transform: translateX(0); }
.sticky-cta .btn { box-shadow: var(--shadow-2); }

/* ─── Animations ──────────────────────────────────────────── */
.fade-up { opacity: 0; transform: translateY(60px) scale(0.96); transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; }
.fade-up.in { opacity: 1; transform: translateY(0) scale(1); }
.fade-up.in.delay-1 { transition-delay: .12s; }
.fade-up.in.delay-2 { transition-delay: .24s; }
.fade-up.in.delay-3 { transition-delay: .36s; }
.fade-up.in.delay-4 { transition-delay: .48s; }
.fade-up.in.delay-5 { transition-delay: .60s; }
.fade-up.in.delay-6 { transition-delay: .72s; }

/* ─── Page Hero (subpages) ────────────────────────────────── */
.page-hero { background: var(--surface-dark); color: #fff; padding: 180px 0 100px; position: relative; overflow: hidden; }
.page-hero__bg { position: absolute; inset: 0; background: radial-gradient(80% 80% at 80% 30%, rgba(60,90,140,0.3) 0%, rgba(15,15,16,0) 50%); pointer-events: none; }
.page-hero__inner { position: relative; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: end; }
.page-hero__crumbs { display: flex; gap: 10px; align-items: center; font: 500 13px/1 var(--font-sans); letter-spacing: 0.06em; color: rgba(255,255,255,0.5); margin-bottom: 24px; }
.page-hero__crumbs a { color: inherit; text-decoration: none; }
.page-hero__crumbs a:hover { color: #fff; }
.page-hero h1 { font: 800 84px/1 var(--font-sans); letter-spacing: -0.034em; color: #fff; margin: 0; text-wrap: balance; }
.page-hero__sub { font: 500 17px/1.55 var(--font-sans); color: rgba(255,255,255,0.6); letter-spacing: 0.04em; text-transform: uppercase; margin-top: 16px; }
.page-hero__intro { font: 500 19px/1.65 var(--font-sans); color: rgba(255,255,255,0.75); letter-spacing: 0; margin: 0; max-width: 420px; padding-bottom: 8px; }

/* ─── Generic page section utilities ──────────────────────── */
.psection { padding: var(--section-y) 0; }
.psection--alt { background: var(--semantic-background-alternative); }
.psection--dark { background: var(--surface-dark); color: #fff; }
.psection__head { margin-bottom: 64px; max-width: 880px; }
.psection__head .eyebrow { font-size: 13px; }
.psection__head h2 { font: 700 48px/1.2 var(--font-sans); letter-spacing: -0.024em; color: var(--semantic-label-strong); margin: 14px 0 0; text-wrap: balance; }
.psection--dark .psection__head h2 { color: #fff; }
.psection__head p { font: 500 18px/1.65 var(--font-sans); color: var(--semantic-label-alternative); margin: 20px 0 0; max-width: 720px; }
.psection--dark .psection__head p { color: rgba(255,255,255,0.7); }

/* About — greeting */
.greeting { display: grid; grid-template-columns: 1.05fr 1.3fr; gap: 72px; align-items: center; }
.greeting__title { font: 700 32px/1.32 var(--font-sans); letter-spacing: -0.018em; color: var(--semantic-label-strong); margin: 0 0 28px; text-wrap: balance; }
.greeting__body p { font: 500 17.5px/1.8 var(--font-sans); color: var(--semantic-label-neutral); margin: 0 0 18px; letter-spacing: 0; }
.greeting__sign { font: 600 16px/1.5 var(--font-sans); color: var(--semantic-label-strong); margin-top: 32px; }
.greeting__sign .role { display: block; font-weight: 500; color: var(--semantic-label-alternative); font-size: 14px; margin-top: 4px; letter-spacing: 0.04em; }
.greeting__visual { aspect-ratio: 3/2; background: var(--semantic-background-alternative); border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-1); }
.greeting__visual image-slot { width: 100%; height: 100%; }

/* Values orbit — 2x2 diamond + central ring cycle */
.values-orbit { position: relative; width: 100%; max-width: 760px; margin: 48px auto 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 180px 180px; gap: 180px; }
.values-orbit__ring-wrap { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.values-orbit__ring { width: 100%; height: 100%; color: var(--semantic-label-strong); display: block; }
.values-orbit__ring circle { transition: stroke-dashoffset 2.4s cubic-bezier(.2,.7,.2,1); }
.values-orbit__ring.in circle { stroke-dashoffset: 0; }
.values-orbit__ring .values-orbit__arrows { opacity: 0; transition: opacity 0.6s ease 1.6s; }
.values-orbit__ring.in .values-orbit__arrows { opacity: 0.55; }
.values-orbit__center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; text-align: center; pointer-events: none; }
.values-orbit__center span { font: 800 38px/1.1 var(--font-sans); letter-spacing: -0.022em; color: var(--semantic-label-strong); }
.value-orbit { position: relative; }
.value-orbit--pos-1 { grid-row: 1; grid-column: 1; }
.value-orbit--pos-2 { grid-row: 1; grid-column: 2; }
.value-orbit--pos-3 { grid-row: 2; grid-column: 2; }
.value-orbit--pos-4 { grid-row: 2; grid-column: 1; }
.value-orbit__inner { background: #fff; border-radius: 18px; padding: 24px 28px; box-shadow: var(--shadow-2); height: 100%; display: flex; flex-direction: column; justify-content: center; }
.value-orbit__inner h4 { font: 800 22px/1.3 var(--font-sans); letter-spacing: -0.016em; color: var(--semantic-label-strong); margin: 0 0 10px; }
.value-orbit__inner p { font: 500 14.5px/1.55 var(--font-sans); color: var(--semantic-label-alternative); margin: 0; letter-spacing: 0; }
.value-orbit__badge { position: absolute; width: 58px; height: 58px; border-radius: 50%; background: var(--semantic-label-strong); color: #fff; font: 700 14px/1 var(--font-sans); letter-spacing: 0.04em; display: grid; place-items: center; z-index: 3; box-shadow: 0 0 0 8px var(--semantic-background-alternative), 0 4px 14px rgba(0,0,0,0.18); }
.value-orbit__badge--pos-1 { bottom: -29px; right: -29px; }
.value-orbit__badge--pos-2 { bottom: -29px; left: -29px; }
.value-orbit__badge--pos-3 { top: -29px; left: -29px; }
.value-orbit__badge--pos-4 { top: -29px; right: -29px; }
.value-orbit__inner.fade-up { transform-origin: center; }
@media (max-width: 900px) {
  .values-orbit { display: flex; flex-direction: column; gap: 40px; max-width: 480px; margin: 32px auto 0; grid-template-columns: unset; grid-template-rows: unset; }
  .values-orbit__ring-wrap, .values-orbit__center { display: none; }
  .value-orbit__badge { position: relative; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; margin: 0 0 -10px 16px; }
  .value-orbit__inner { padding-top: 32px; }
}

/* Vision + Core values */
.vision { background: var(--semantic-background-alternative); }
.vision__lead { font: 500 32px/1.5 var(--font-sans); color: var(--semantic-label-strong); letter-spacing: -0.018em; margin: 0 0 56px; max-width: 920px; text-wrap: balance; }
.vision__lead b { color: var(--semantic-label-strong); font-weight: 800; }
.values__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.value { background: #fff; border-radius: 20px; padding: 36px 32px; min-height: 220px; display: flex; flex-direction: column; }
.value__num { font: 700 13px/1 var(--font-sans); letter-spacing: 0.14em; color: var(--semantic-label-assistive); }
.value h4 { font: 700 23px/1.3 var(--font-sans); letter-spacing: -0.012em; color: var(--semantic-label-strong); margin: auto 0 8px; }
.value p { font: 500 14.5px/1.55 var(--font-sans); color: var(--semantic-label-alternative); margin: 0; }

/* History — scroll-filling vertical timeline (dark) */
.history-tl { background: var(--surface-dark); color: #fff; }
.history-tl .eyebrow { color: rgba(255,255,255,0.55); }
.history-tl .psection__head { margin-bottom: 32px; }
.history-tl .psection__head p { color: rgba(255,255,255,0.55); }
.history-tl__wrap { position: relative; max-width: 880px; margin: 0 auto; padding: 56px 0 96px; }
.history-tl__line { position: absolute; top: 0; bottom: 96px; left: 174px; width: 2px; background: rgba(255,255,255,0.08); pointer-events: none; }
.history-tl__fill { position: absolute; top: 0; left: 0; width: 100%; height: 0; background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, #fff 50%, rgba(255,255,255,0.85) 100%); transition: height 0.08s linear; }
.history-tl__row { display: grid; grid-template-columns: 120px 60px 1fr; gap: 24px; padding: 36px 0; align-items: start; }
.history-tl__row:first-child { padding-top: 0; }
.history-tl__year { font: 800 36px/1 var(--font-sans); letter-spacing: -0.024em; color: rgba(255,255,255,0.25); text-align: right; padding-top: 6px; transition: color 0.4s ease; }
.history-tl__row.active .history-tl__year { color: #fff; }
.history-tl__dot-col { position: relative; height: 100%; }
.history-tl__dot { position: absolute; top: 14px; left: 50%; transform: translate(-50%, -50%); width: 18px; height: 18px; border-radius: 50%; background: var(--surface-dark); border: 2.5px solid rgba(255,255,255,0.2); box-sizing: border-box; z-index: 2; transition: border-color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease; }
.history-tl__row.active .history-tl__dot { border-color: #fff; background: #fff; box-shadow: 0 0 0 5px rgba(255,255,255,0.12); }
.history-tl__events { list-style: none; margin: 0; padding: 4px 0 0; display: flex; flex-direction: column; gap: 12px; }
.history-tl__events li { font: 500 17.5px/1.5 var(--font-sans); color: rgba(255,255,255,0.3); padding-left: 18px; position: relative; transition: color 0.4s ease; letter-spacing: -0.005em; }
.history-tl__events li::before { content: "—"; position: absolute; left: 0; color: currentColor; }
.history-tl__row.active .history-tl__events li { color: rgba(255,255,255,0.92); }
.history-tl__chev { position: absolute; left: 174px; bottom: 36px; transform: translateX(-50%); color: rgba(255,255,255,0.35); display: grid; place-items: center; }
@media (max-width: 720px) {
  .history-tl__row { grid-template-columns: 72px 40px 1fr; gap: 16px; padding: 28px 0; }
  .history-tl__year { font-size: 24px; }
  .history-tl__line { left: 92px; }
  .history-tl__chev { left: 92px; }
  .history-tl__events li { font-size: 15.5px; }
}

/* Org chart v2 — dark CEO badge → connector lines → 5 team cards */
.orgchart-v2 { background: linear-gradient(180deg, #131720 0%, #1A1F2B 50%, #131720 100%); color: #fff; border-top: 1px solid rgba(158,197,255,0.08); position: relative; }
.orgchart-v2::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 30%, rgba(158,197,255,0.06) 0%, transparent 70%); pointer-events: none; }
.orgchart-v2 > .container { position: relative; z-index: 1; }
.orgchart-v2 .eyebrow { color: rgba(255,255,255,0.55); }
.orgchart-v2 .psection__head h2 { color: #fff; }
.orgchart-v2 .psection__head p { color: rgba(255,255,255,0.55); }
.orgchart-v2__wrap { display: flex; flex-direction: column; align-items: center; margin-top: 32px; }
.orgchart-v2__ceo { position: relative; width: 220px; height: 220px; display: grid; place-items: center; }
.orgchart-v2__ceo-glow { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(158,197,255,0.18) 0%, rgba(158,197,255,0.04) 60%, transparent 100%); filter: blur(2px); }
.orgchart-v2__ceo-inner { position: relative; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #2C3140 0%, #181A22 70%, var(--surface-dark) 100%); border: 1px solid rgba(255,255,255,0.18); display: grid; place-items: center; box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 0 48px rgba(158,197,255,0.18), inset 0 1px 0 rgba(255,255,255,0.08); }
.orgchart-v2__ceo-label { font: 700 19px/1.3 var(--font-sans); letter-spacing: -0.005em; color: #fff; text-align: center; }
.orgchart-v2__lines { width: 100%; max-width: 1080px; height: 64px; }
.orgchart-v2__lines svg { width: 100%; height: 100%; display: block; }
.orgchart-v2__teams { width: 100%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.orgchart-v2__team { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); border-radius: 18px; padding: 32px 26px; min-height: 220px; display: flex; flex-direction: column; transition: border-color 0.25s, background 0.25s, transform 0.25s; }
.orgchart-v2__team:hover { border-color: rgba(255,255,255,0.28); background: rgba(255,255,255,0.06); transform: translateY(-3px); }
.orgchart-v2__team-en { font: 600 13px/1 var(--font-sans); letter-spacing: 0.02em; color: #9EC5FF; }
.orgchart-v2__team-ko { font: 800 22px/1.3 var(--font-sans); letter-spacing: -0.014em; color: #fff; margin: 14px 0 0; }
.orgchart-v2__team-rnr { font: 500 14.5px/1.6 var(--font-sans); color: rgba(255,255,255,0.68); margin: auto 0 0; padding-top: 16px; letter-spacing: 0; }
@media (max-width: 1100px) {
  .orgchart-v2__teams { grid-template-columns: repeat(2, 1fr); }
  .orgchart-v2__lines { display: none; }
  .orgchart-v2__ceo { margin-bottom: 32px; }
}
@media (max-width: 720px) {
  .orgchart-v2__teams { grid-template-columns: 1fr; }
  .orgchart-v2__ceo { width: 180px; height: 180px; }
  .orgchart-v2__ceo-inner { width: 130px; height: 130px; }
  .orgchart-v2__ceo-label { font-size: 16px; }
}

/* Certs grid */
.certs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cert { background: #fff; border: 1px solid transparent; border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--shadow-1); transition: border-color .2s, background-color .2s, transform .2s, box-shadow .2s; }
.cert:hover { border-color: var(--semantic-line-normal); box-shadow: var(--hover-lift-shadow); transform: translateY(-2px); }
.cert__img { aspect-ratio: 3/4; background: var(--semantic-background-alternative); border-radius: 10px; overflow: hidden; display: grid; place-items: center; color: var(--semantic-label-assistive); font: 600 12px/1.3 var(--font-sans); letter-spacing: 0.1em; text-transform: uppercase; }
.cert__img image-slot { width: 100%; height: 100%; }
.cert__img img { width: 100%; height: 100%; object-fit: contain; padding: 8px; background: #fff; }
.cert__name { font: 700 16px/1.4 var(--font-sans); color: var(--semantic-label-strong); margin: 0; }
.cert__meta { font: 500 13px/1.4 var(--font-sans); color: var(--semantic-label-alternative); }

/* Location */
.location { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: stretch; }
.location__map { background: var(--semantic-background-alternative); border-radius: 24px; min-height: 460px; position: relative; overflow: hidden; }
.location__map image-slot { width: 100%; height: 100%; }
.location__map iframe { width: 100%; height: 100%; min-height: 460px; border: 0; display: block; }
.location__map-link { position: absolute; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; background: rgba(15, 15, 16, 0.9); color: #fff; border-radius: 999px; font: 500 13px/1 var(--font-sans); text-decoration: none; backdrop-filter: blur(8px); transition: background 0.2s ease; z-index: 2; }
.location__map-link:hover { background: rgba(15, 15, 16, 1); }
.location__info { display: flex; flex-direction: column; gap: 28px; padding: 16px 0; }
.location__row { display: grid; grid-template-columns: 100px 1fr; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--semantic-line-alternative); align-items: start; }
.location__row .lbl { font: 600 13px/1 var(--font-sans); letter-spacing: 0.14em; color: var(--semantic-label-alternative); text-transform: uppercase; padding-top: 4px; }
.location__row .val { font: 500 17px/1.6 var(--font-sans); color: var(--semantic-label-strong); letter-spacing: 0; }
.location__row .val a { color: inherit; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--semantic-line-strong); }

/* Capabilities — Hero-style dark SVG card + linked stats */
.capabilities__hl { font: 800 64px/1.05 var(--font-sans); letter-spacing: -0.03em; color: var(--semantic-label-strong); margin: 18px 0 0; text-wrap: balance; }
.capabilities__hl em { font-style: normal; color: var(--semantic-primary-normal); }
.capabilities__lead { font: 500 18px/1.7 var(--font-sans); color: var(--semantic-label-neutral); margin: 24px 0 0; max-width: 720px; }
.capabilities-v2 { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; margin-top: 64px; }

/* Dark visual card — switched to LIGHT metallic shower-head style */
.corevisual { position: relative; background: radial-gradient(120% 100% at 50% 0%, #FAFBFC 0%, #EDEFF3 60%, #DDE0E6 100%); border-radius: 28px; padding: 28px; aspect-ratio: 1; overflow: hidden; box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255,255,255,0.7); perspective: 1200px; }
.corevisual__bg { position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 30%, rgba(255,255,255,0.6) 0%, transparent 70%); pointer-events: none; }
.corevisual__svg-wrap { position: relative; width: 100%; height: 100%; transform: translate(calc(var(--mx, 0) * 12px), calc(var(--my, 0) * 12px)) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform 0.4s cubic-bezier(.2,.7,.2,1); z-index: 1; transform-style: preserve-3d; }
.corevisual__svg { width: 100%; height: 100%; display: block; }

/* Reactive groups inside SVG */
.corevisual .cv-disc { transform-origin: 250px 280px; transition: transform 0.5s cubic-bezier(.2,.7,.2,1); }
.corevisual .cv-holes { transition: opacity 0.3s, transform 0.5s cubic-bezier(.2,.7,.2,1); transform-origin: 250px 280px; transform: rotate(var(--ang, 0deg)); }
.corevisual .cv-holes__main circle { transition: fill 0.3s; }
.corevisual .cv-zoom { transition: opacity 0.3s, transform 0.4s cubic-bezier(.2,.7,.2,1); transform-origin: 380px 100px; }
.corevisual .cv-zoom__pattern { transform-origin: 380px 100px; transform: rotate(calc(var(--ang, 0deg) * 2)); transition: transform 0.5s cubic-bezier(.2,.7,.2,1); }
.corevisual .cv-spec { transition: opacity 0.3s, transform 0.3s; transform-origin: 440px 70px; }
.corevisual .cv-labels { transition: opacity 0.3s; }

.corevisual[data-highlight="volume"] .cv-holes { transform: rotate(var(--ang, 0deg)) scale(1.04); }
.corevisual[data-highlight="volume"] .cv-holes__main circle { fill: var(--brand-blue); }
.corevisual[data-highlight="volume"] .cv-zoom { opacity: 0.4; }
.corevisual[data-highlight="volume"] .cv-spec { opacity: 0.4; }

.corevisual[data-highlight="spec"] .cv-zoom { transform: scale(1.07); }
.corevisual[data-highlight="spec"] .cv-zoom__pattern { fill: var(--brand-blue); }
.corevisual[data-highlight="spec"] .cv-spec { transform: scale(1.08); }
.corevisual[data-highlight="spec"] .cv-spec__lines line, .corevisual[data-highlight="spec"] .cv-spec__lines circle { stroke: var(--brand-blue); }
.corevisual[data-highlight="spec"] .cv-holes { opacity: 0.5; }
.corevisual[data-highlight="spec"] .cv-labels { opacity: 0.4; }

/* Stat list highlight */
.cap-stat { transition: background-color 0.25s, border-left-color 0.25s, padding-left 0.25s; border-left: 3px solid transparent; padding-left: 16px; cursor: default; }
.cap-stat--hl { background: var(--semantic-background-alternative); border-left-color: var(--semantic-label-strong); }
.cap-stat--hl .lbl { color: var(--semantic-label-strong); }

@media (max-width: 1100px) {
  .capabilities-v2 { grid-template-columns: 1fr; gap: 40px; }
  .capabilities__hl { font-size: 44px; }
  .corevisual { aspect-ratio: 1; max-width: 480px; margin: 0 auto; width: 100%; }
}
@media (max-width: 720px) {
  .capabilities__hl { font-size: 34px; }
  .corevisual__corner { font-size: 9px; }
}
.cap-stats { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--semantic-line-normal); }
.cap-stat { padding: 22px 16px; display: grid; grid-template-columns: 140px 1fr; column-gap: 28px; row-gap: 6px; align-items: baseline; border-bottom: 1px solid var(--semantic-line-alternative); transition: background-color 0.25s, border-left-color 0.25s, padding-left 0.25s; border-left: 3px solid transparent; cursor: default; }
.cap-stat .lbl { font: 600 13px/1.5 var(--font-sans); letter-spacing: 0.04em; color: var(--semantic-label-alternative); padding-top: 4px; }
.cap-stat .val { font: 700 20px/1.45 var(--font-sans); letter-spacing: -0.012em; color: var(--semantic-label-strong); text-wrap: pretty; }
.cap-stat .val small { font: 500 13.5px/1.4 var(--font-sans); color: var(--semantic-label-alternative); margin-left: 8px; letter-spacing: 0; }
.cap-stat--hl { background: var(--semantic-background-alternative); border-left-color: var(--semantic-label-strong); }
.cap-stat--hl .lbl { color: var(--semantic-label-strong); }

/* Infra v2 — sticky category scroll */
.infra-v2 { display: grid; grid-template-columns: 260px 1fr; gap: 80px; margin-top: 56px; align-items: start; }
.infra-v2__nav { position: sticky; top: 120px; }
.infra-v2__nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; border-left: 1px solid var(--semantic-line-alternative); }
.infra-v2__nav-item button { all: unset; cursor: pointer; display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 14px; padding: 14px 18px; width: 100%; box-sizing: border-box; margin-left: -1px; border-left: 1px solid transparent; transition: border-color .25s, color .25s; }
.infra-v2__nav-item button:hover .infra-v2__nav-label { color: var(--semantic-label-strong); }
.infra-v2__nav-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--semantic-line-normal); transition: background .25s, transform .25s; }
.infra-v2__nav-label { font: 600 15px/1.3 var(--font-sans); color: var(--semantic-label-alternative); letter-spacing: -0.005em; transition: color .25s, font-weight .25s; }
.infra-v2__nav-count { font: 700 11px/1 var(--font-sans); letter-spacing: 0.14em; color: var(--semantic-label-assistive); }
.infra-v2__nav-item.is-active button { border-left-color: var(--semantic-label-strong); }
.infra-v2__nav-item.is-active .infra-v2__nav-dot { background: var(--semantic-label-strong); transform: scale(1.4); }
.infra-v2__nav-item.is-active .infra-v2__nav-label { color: var(--semantic-label-strong); font-weight: 700; }
.infra-v2__nav-item.is-active .infra-v2__nav-count { color: var(--semantic-label-strong); }

.infra-v2__list { display: flex; flex-direction: column; gap: 80px; }
.infra-v2__group { scroll-margin-top: 120px; }
.infra-v2__group-head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 16px; margin-bottom: 28px; border-bottom: 1px solid var(--semantic-line-alternative); }
.infra-v2__group-cat { font: 700 13px/1 var(--font-sans); letter-spacing: 0.14em; color: var(--semantic-label-strong); text-transform: uppercase; }
.infra-v2__group-idx { font: 600 12px/1 var(--font-sans); letter-spacing: 0.1em; color: var(--semantic-label-assistive); }
.infra-v2__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.infra-v2__card { background: #fff; border: 1px solid var(--semantic-line-alternative); border-radius: 18px; padding: 28px 28px 30px; transition: border-color .25s, background-color .25s, transform .25s, box-shadow .25s; transition-delay: var(--d, 0ms); }
.infra-v2__card:hover { border-color: var(--semantic-line-normal); box-shadow: var(--hover-lift-shadow); transform: translateY(-2px); }
.infra-v2__card h4 { font: 700 17px/1.35 var(--font-sans); margin: 0 0 12px; color: var(--semantic-label-strong); letter-spacing: -0.008em; }
.infra-v2__card p { font: 500 14.5px/1.65 var(--font-sans); color: var(--semantic-label-alternative); margin: 0; white-space: pre-line; }
.step-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--semantic-line-alternative); }
.step-flow__item { display: flex; align-items: center; gap: 5px; }
.step-flow__num { width: 17px; height: 17px; border-radius: 50%; background: var(--semantic-background-alternative); border: 1px solid var(--semantic-line-normal); font: 700 9.5px/1 var(--font-sans); display: flex; align-items: center; justify-content: center; color: var(--semantic-label-normal); flex-shrink: 0; }
.step-flow__label { font: 500 12.5px/1 var(--font-sans); color: var(--semantic-label-alternative); white-space: nowrap; }
.step-flow__sep { font-size: 12px; color: var(--semantic-label-assistive); user-select: none; }

@media (max-width: 1100px) {
  .infra-v2 { grid-template-columns: 1fr; gap: 40px; }
  .infra-v2__nav { position: static; }
  .infra-v2__nav ul { flex-direction: row; flex-wrap: wrap; border-left: 0; border-bottom: 1px solid var(--semantic-line-alternative); padding-bottom: 4px; }
  .infra-v2__nav-item button { margin-left: 0; border-left: 0; border-bottom: 2px solid transparent; padding: 12px 14px; }
  .infra-v2__nav-item.is-active button { border-bottom-color: var(--semantic-label-strong); }
  .infra-v2__cards { grid-template-columns: 1fr; }
  .infra-v2__list { gap: 56px; }
}

/* Process Flow — S-shape with welding group */
.flow-u { display: flex; flex-direction: column; gap: 0; margin: 56px 0 0; --accent: var(--semantic-label-strong); --accent-color: var(--semantic-primary-normal); }
.flow-u__row { display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; gap: 0; }
.flow-u__cell { display: flex; align-items: center; justify-content: center; position: relative; padding: 0 12px; }

/* Mid row — group spans full width; label in col 2, cards in cols 3-5 (aligned with cols 3/4/5 of outer 5-col grid) */
.flow-u__row--mid { padding: 0; }
.flow-u__row--mid .flow-u__group { grid-column: 2 / -1; display: grid; grid-template-columns: 1fr repeat(3, 1fr); align-items: center; background: var(--color-cool-98); border-radius: 24px; padding: 28px 0; position: relative; }
.flow-u__group-label { grid-column: 1; justify-self: center; font: 800 17px/1.2 var(--font-sans); color: var(--semantic-label-strong); letter-spacing: -0.012em; text-align: center; }
.flow-u__group-inner { grid-column: 2 / span 3; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; }

/* Bot row — 09/10/11 in cols 3/4/5 */
.flow-u__row--bot .flow-u__cell:nth-child(1) { grid-column: 3; }
.flow-u__row--bot .flow-u__cell:nth-child(2) { grid-column: 4; }
.flow-u__row--bot .flow-u__cell:nth-child(3) { grid-column: 5; }

/* Card */
.flow-u__step { background: #fff; border: 1px solid var(--semantic-line-alternative); border-radius: 14px; padding: 18px 14px; box-shadow: var(--shadow-1); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 170px; min-height: 130px; transition: transform 0.6s cubic-bezier(.2,.7,.2,1), background-color .2s, border-color .2s, box-shadow 0.2s, opacity 0.6s cubic-bezier(.2,.7,.2,1); opacity: 0; transform: translateY(20px) scale(0.92); transition-delay: calc(var(--i, 0) * 90ms); position: relative; z-index: 1; }
.flow-u.in .flow-u__step { opacity: 1; transform: translateY(0) scale(1); }
.flow-u__step:hover { transform: translateY(-3px) scale(1); border-color: var(--semantic-line-normal); box-shadow: var(--hover-lift-shadow); }
.flow-u__num { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: #fff; font: 700 13px/1 var(--font-sans); letter-spacing: 0.04em; }
.flow-u__name { font: 700 14.5px/1.35 var(--font-sans); color: var(--semantic-label-strong); letter-spacing: -0.006em; text-align: center; text-wrap: balance; }
.flow-u__step--accent .flow-u__num { background: var(--accent-color); box-shadow: 0 0 0 4px rgba(0,102,255,0.16); }
.flow-u__step--accent { border-color: var(--accent-color); }

/* Horizontal connectors */
.flow-u__h-conn { position: absolute; top: 50%; right: -28px; width: 56px; height: 2px; background: var(--accent); transform: translateY(-50%) scaleX(0); transform-origin: left center; transition: transform 0.5s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 90ms); z-index: 0; }
.flow-u__h-conn::after { content: ""; position: absolute; right: -1px; top: 50%; transform: translateY(-50%) rotate(45deg); width: 8px; height: 8px; border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); }
.flow-u__h-conn--rev { left: -28px; right: auto; transform-origin: right center; }
.flow-u__h-conn--rev::after { right: auto; left: -1px; transform: translateY(-50%) rotate(-135deg); }
.flow-u.in .flow-u__h-conn { transform: translateY(-50%) scaleX(1); }

/* Vertical drops between rows */
.flow-u__drop { display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 0; }
.flow-u__drop--right > * { grid-column: 5; }
.flow-u__drop--left > * { grid-column: 3; }
.flow-u__drop > :nth-child(2) { display: none; }
.flow-u__v-conn { width: 2px; height: 36px; background: var(--accent); justify-self: center; transform-origin: top center; transform: scaleY(0); transition: transform 0.5s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 90ms); position: relative; }
.flow-u__v-conn::after { content: ""; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%) rotate(135deg); width: 8px; height: 8px; border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); }
.flow-u.in .flow-u__v-conn { transform: scaleY(1); }
.flow-u__v-arrow { display: none; }

@media (max-width: 900px) {
  .flow-u__row { grid-template-columns: repeat(3, 1fr); }
  .flow-u__row--top .flow-u__cell:nth-child(4) { grid-column: 1; grid-row: 2; }
  .flow-u__row--top .flow-u__cell:nth-child(5) { grid-column: 2; grid-row: 2; }
  .flow-u__row--mid .flow-u__group { grid-column: 1 / span 3; padding: 24px 16px 24px 16px; }
  .flow-u__group-label { position: static; transform: none; display: block; text-align: center; margin-bottom: 14px; }
  .flow-u__group-inner { grid-template-columns: 1fr 1fr 1fr; }
  .flow-u__row--bot .flow-u__cell:nth-child(1) { grid-column: 1; }
  .flow-u__row--bot .flow-u__cell:nth-child(2) { grid-column: 2; }
  .flow-u__row--bot .flow-u__cell:nth-child(3) { grid-column: 3; }
  .flow-u__drop--left > *, .flow-u__drop--right > * { grid-column: 2; }
  .flow-u__h-conn { display: none; }
}
@media (max-width: 600px) {
  .flow-u__row { grid-template-columns: 1fr; gap: 12px; }
  .flow-u__row .flow-u__cell { grid-column: 1 !important; grid-row: auto !important; }
  .flow-u__group-inner { grid-template-columns: 1fr; gap: 12px; }
  .flow-u__step { max-width: 280px; }
}

/* Products */
.products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.product { background: #fff; border: 1px solid transparent; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-1); display: flex; flex-direction: column; transition: border-color .25s, background-color .25s, transform .25s, box-shadow .25s; position: relative; }
.product:hover { border-color: var(--semantic-line-normal); transform: translateY(-3px); box-shadow: var(--hover-lift-shadow); }
.product__img { aspect-ratio: 1/1; background: var(--semantic-background-alternative); overflow: hidden; position: relative; }
.product__img image-slot { width: 100%; height: 100%; display: block; }
.product__img-split image-slot { }
.product__img-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; width: 100%; height: 100%; background: var(--semantic-line-alternative); }
.product__img-split image-slot { width: 100%; height: 100%; background: var(--semantic-background-alternative); }
.product--wide { grid-column: span 2; }
.product--wide .product__img { aspect-ratio: 2/1; }
.product__badge { position: absolute; top: 14px; left: 14px; padding: 6px 10px; background: rgba(0,0,0,0.78); color: #fff; backdrop-filter: blur(8px); font: 700 11px/1 var(--font-sans); letter-spacing: 0.08em; border-radius: 6px; text-transform: uppercase; z-index: 2; }
.product__badge--ni { background: var(--semantic-primary-normal); }
.product__badge--eb { background: rgba(0,0,0,0.85); }

/* Product category header */
.products-cat { margin-top: 56px; }
.products-cat:first-of-type { margin-top: 56px; }
.products-cat__head { display: flex; align-items: baseline; gap: 18px; padding-bottom: 20px; border-bottom: 1px solid var(--semantic-line-normal); margin-bottom: 28px; }
.products-cat__num { font: 800 14px/1 var(--font-sans); letter-spacing: 0.16em; color: var(--semantic-label-assistive); }
.products-cat__title { font: 800 28px/1.2 var(--font-sans); letter-spacing: -0.018em; color: var(--semantic-label-strong); margin: 0; flex: 1; }
.products-cat__count { font: 600 13px/1 var(--font-sans); letter-spacing: 0.08em; color: var(--semantic-label-alternative); text-transform: uppercase; }
.product__body { padding: 26px 28px 30px; display: flex; flex-direction: column; gap: 12px; }
.product__name { font: 700 22px/1.3 var(--font-sans); letter-spacing: -0.014em; color: var(--semantic-label-strong); margin: 0; }
.product__type { font: 600 13px/1.5 var(--font-sans); letter-spacing: 0.04em; color: var(--semantic-label-alternative); }
.product__meta { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; row-gap: 8px; margin-top: 12px; }
.product__meta .lbl { font: 600 12px/1.4 var(--font-sans); letter-spacing: 0.08em; color: var(--semantic-label-assistive); text-transform: uppercase; }
.product__meta .val { font: 500 14px/1.4 var(--font-sans); color: var(--semantic-label-neutral); white-space: pre-line; }
.product__desc { font: 500 14.5px/1.6 var(--font-sans); color: var(--semantic-label-alternative); margin: 8px 0 0; }

/* Equipment cards — sectioned grid with photo */
.eq-section { margin-top: 64px; }
.eq-section:first-of-type { margin-top: 0; }
.eq-section__head { display: flex; align-items: baseline; gap: 16px; padding-bottom: 18px; margin-bottom: 28px; border-bottom: 1px solid var(--semantic-line-normal); }
.eq-section__label { font: 800 22px/1.2 var(--font-sans); letter-spacing: -0.014em; color: var(--semantic-label-strong); flex: 1; }
.eq-section__count { font: 800 22px/1 var(--font-sans); letter-spacing: -0.014em; color: var(--semantic-primary-normal); }
.eq-section__count small { font: 500 13px/1 var(--font-sans); letter-spacing: 0.04em; color: var(--semantic-label-alternative); margin-left: 4px; }

.eq-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.eq-card { background: #fff; border: 1px solid var(--semantic-line-alternative); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-1); transition: border-color 0.25s, background-color 0.25s, transform 0.25s, box-shadow 0.25s; }
.eq-card:hover { border-color: var(--semantic-line-normal); transform: translateY(-4px); box-shadow: var(--hover-lift-shadow); }

/* Scroll-reveal animation — more dynamic (3D lift + scale) */
.eq-card--reveal { opacity: 0; transform: translateY(48px) scale(0.85) rotateX(-8deg); transform-origin: center 100%; transition: opacity 0.85s cubic-bezier(.16,.84,.27,1), transform 0.85s cubic-bezier(.16,.84,.27,1); transition-delay: var(--delay, 0ms); will-change: opacity, transform; }
.eq-card--reveal.in { opacity: 1; transform: translateY(0) scale(1) rotateX(0); }

.eq-card__img { aspect-ratio: 4/3; background: var(--semantic-background-alternative); position: relative; display: grid; place-items: center; padding: 14px; overflow: hidden; }
.eq-card__img img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform 0.35s; }
.eq-card__img--okuma img { max-height: 78%; }
.eq-card:hover .eq-card__img img { transform: scale(1.06); }
.eq-card__img-empty { display: grid; place-items: center; width: 100%; height: 100%; }
.eq-card__img-empty span { font: 800 22px/1 var(--font-sans); letter-spacing: 0.04em; color: var(--semantic-label-assistive); }

/* Qty badge — high visibility, blue accent with white text */
.eq-card__qty { position: absolute; top: 12px; right: 12px; padding: 8px 14px; background: var(--semantic-primary-normal); color: #fff; border-radius: 999px; font: 800 14px/1 var(--font-sans); letter-spacing: 0.02em; box-shadow: 0 4px 14px rgba(0,102,255,0.32), 0 0 0 2px #fff; }
.eq-card__qty small { font-size: 11px; font-weight: 600; color: #fff; opacity: 1; margin-left: 3px; }

.eq-card__body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 3px; }
.eq-card__model { font: 800 16px/1.3 var(--font-sans); letter-spacing: -0.012em; color: var(--semantic-label-strong); margin: 0; }
.eq-card__maker { font: 600 12px/1.4 var(--font-sans); letter-spacing: 0.04em; color: var(--semantic-label-alternative); margin: 0; }
.eq-card__spec { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 4px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--semantic-line-alternative); }
.eq-card__spec .lbl { font: 600 11px/1.5 var(--font-sans); letter-spacing: 0.1em; color: var(--semantic-label-assistive); text-transform: uppercase; }
.eq-card__spec .val { font: 600 12.5px/1.4 var(--font-sans); color: var(--semantic-label-strong); letter-spacing: 0; }
@media (max-width: 1100px) {
  .eq-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .eq-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .eq-cards { grid-template-columns: 1fr; }
}

/* Measurement extras — secondary instruments below the main video card */
.measure-extras { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.measure-extra { background: #fff; border-radius: 24px; padding: 32px; display: grid; grid-template-columns: 180px 1fr; gap: 28px; align-items: center; box-shadow: var(--shadow-1); }
.measure-extra__img { background: var(--semantic-background-alternative); border-radius: 16px; aspect-ratio: 1/1; display: grid; place-items: center; padding: 18px; }
.measure-extra__img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.measure-extra__body { display: flex; flex-direction: column; gap: 8px; }
.measure-extra__count { font: 800 13px/1 var(--font-sans); letter-spacing: 0.14em; color: var(--semantic-primary-normal); text-transform: uppercase; }
.measure-extra h4 { font: 800 22px/1.3 var(--font-sans); letter-spacing: -0.014em; color: var(--semantic-label-strong); margin: 0; }
.measure-extra p { font: 500 14.5px/1.6 var(--font-sans); color: var(--semantic-label-alternative); margin: 4px 0 0; }
@media (max-width: 900px) {
  .measure-extras { grid-template-columns: 1fr; }
  .measure-extra { grid-template-columns: 120px 1fr; padding: 24px; gap: 20px; }
}

/* Measurement card */
.measure { display: grid; grid-template-columns: 1.7fr 1fr; gap: 56px; background: #fff; border-radius: 32px; padding: 48px; box-shadow: var(--shadow-1); align-items: center; }
.measure__img { aspect-ratio: 1/1; background: var(--semantic-background-alternative); border-radius: 20px; overflow: hidden; }
.measure__img image-slot { width: 100%; height: 100%; }
.measure__video { aspect-ratio: 16/9; background: #000; border-radius: 20px; overflow: hidden; position: relative; box-shadow: var(--shadow-1); align-self: center; }
.measure__video iframe, .measure__video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.measure__brand { font: 600 13px/1 var(--font-sans); letter-spacing: 0.16em; color: var(--semantic-label-alternative); text-transform: uppercase; }
.measure__name { font: 800 36px/1.15 var(--font-sans); letter-spacing: -0.022em; color: var(--semantic-label-strong); margin: 14px 0 0; }
.measure__spec { display: grid; grid-template-columns: auto 1fr; gap: 12px 20px; margin: 28px 0 0; padding: 28px 0 0; border-top: 1px solid var(--semantic-line-alternative); }
.measure__spec .lbl { font: 600 12px/1.5 var(--font-sans); letter-spacing: 0.12em; color: var(--semantic-label-assistive); text-transform: uppercase; }
.measure__spec .val { font: 500 15.5px/1.5 var(--font-sans); color: var(--semantic-label-strong); }

/* AI roadmap */
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--semantic-line-normal); margin-bottom: 64px; position: relative; }
.tabs__btn { padding: 22px 32px; background: transparent; border: 0; font: 700 19px/1 var(--font-sans); color: var(--semantic-label-alternative); cursor: pointer; position: relative; letter-spacing: -0.008em; display: inline-flex; align-items: baseline; gap: 12px; transition: color .15s; }
.tabs__btn:first-child { padding-left: 0; }
.tabs__btn:hover { color: var(--semantic-label-strong); }
.tabs__btn.active { color: var(--semantic-label-strong); }
.tabs__btn.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--semantic-label-strong); }
.tabs__btn:first-child.active::after { left: 0; }
.tabs__btn .count { font: 600 14px/1 var(--font-sans); color: var(--semantic-label-assistive); letter-spacing: 0.04em; }
.tabs__btn.active .count { color: var(--semantic-label-alternative); }
.tab-panel { animation: tabFade 0.35s ease both; }
@keyframes tabFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.tab-panel__head { margin-bottom: 48px; max-width: 880px; }
.tab-panel__head h3 { font: 700 36px/1.2 var(--font-sans); letter-spacing: -0.02em; color: var(--semantic-label-strong); margin: 0; text-wrap: balance; }
.tab-panel__head p { font: 500 17px/1.65 var(--font-sans); color: var(--semantic-label-alternative); margin: 18px 0 0; max-width: 720px; }

.roadmap__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.roadmap__item { background: #fff; border: 1px solid var(--semantic-line-alternative); border-radius: 20px; padding: 32px; }
.roadmap__num { font: 800 32px/1 var(--font-sans); letter-spacing: -0.02em; color: #1B2A4E; }
.roadmap__title { font: 700 21px/1.3 var(--font-sans); color: var(--semantic-label-strong); margin: 20px 0 0; letter-spacing: -0.012em; }
.roadmap__desc { font: 500 15.5px/1.6 var(--font-sans); color: var(--semantic-label-alternative); margin: 12px 0 0; }

/* ─── Responsive ──────────────────────────────────────────── */
@media (max-width: 1100px) {
  .hero h1 { font-size: 56px; }
  .hero__inner { grid-template-columns: 1fr; gap: 40px; }
  .hero__visual { max-width: 380px; }
  .selection__inner { grid-template-columns: 1fr; gap: 48px; }
  .principles__grid { grid-template-columns: repeat(2, 1fr); }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .stats__grid > .stat { padding: 36px 18px !important; }
  .stat:nth-child(2n) { border-right: 0 !important; }
  .process__grid { grid-template-columns: repeat(2, 1fr); }
  .process__step::after { display: none; }
  .finalcta__inner { grid-template-columns: 1fr; gap: 40px; }
  .finalcta h2 { font-size: 44px; }
.page-hero h1 { font-size: 64px; }
  .page-hero__inner { grid-template-columns: 1fr; }
  .greeting, .capabilities, .location, .measure { grid-template-columns: 1fr; gap: 40px; }
  .values__grid { grid-template-columns: repeat(2, 1fr); }
  .certs { grid-template-columns: repeat(2, 1fr); }
  .products { grid-template-columns: repeat(2, 1fr); }
  .roadmap__list { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .topnav__burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 40px; height: 40px; padding: 0; background: transparent; border: 0;
    cursor: pointer; margin-left: 4px;
  }
  .topnav__burger span {
    display: block; width: 22px; height: 2px; background: #fff; border-radius: 1px;
    transition: transform .2s ease, opacity .2s ease;
  }
  .topnav--menu-open .topnav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .topnav--menu-open .topnav__burger span:nth-child(2) { opacity: 0; }
  .topnav--menu-open .topnav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .topnav__menu {
    display: flex; flex-direction: column; gap: 0;
    position: fixed; top: 88px; left: 0; right: 0;
    background: rgba(15,15,16,0.96);
    backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
    padding: 8px var(--gutter) 24px; margin: 0; align-items: stretch;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    transform: translateY(-12px); opacity: 0; pointer-events: none; visibility: hidden;
    transition: transform .22s ease, opacity .18s ease, visibility 0s linear .22s;
  }
  .topnav--menu-open .topnav__menu {
    transform: translateY(0); opacity: 1; pointer-events: auto; visibility: visible;
    transition: transform .22s ease, opacity .18s ease, visibility 0s;
  }
  .topnav__menu a {
    font-size: 20px; padding: 18px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.92);
  }
  .topnav__menu a:last-child { border-bottom: 0; }
  .section, .psection { padding: 80px 0; }
  .hero h1 { font-size: 40px; }
  .section-title { font-size: 34px; }
  .principles__grid, .products, .certs { grid-template-columns: 1fr; }
  .stats__grid { grid-template-columns: 1fr; }
  .stat__num { font-size: 52px; }
  .process__grid { grid-template-columns: 1fr; }
  .page-hero h1 { font-size: 44px; }
  .footer__top { grid-template-columns: 1fr; }
  .footer__links { flex-wrap: wrap; }
  .sticky-cta { top: auto; bottom: 16px; right: 16px; left: 16px; }
  .sticky-cta .btn { width: 100%; }
}