/* ─────────────────────────────────────────────────────────────
   &gentic v2.1 — Design System Brand Layer
   Drop-in replacement for brand-v2.css
   Changes:
   · Adds Schibsted Grotesk as display typeface (h1/h2/h3)
   · Adds JetBrains Mono for score / delta display
   · Adds full --ag-* token set (design system parity)
   · Updates component styles to match new design system
   · Preserves all v2 SPA fixes and view routing
   ───────────────────────────────────────────────────────────── */

/* ── Font imports ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@500;600;700;800&family=Sora:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ── Design system token aliases ──────────────────────────── */
:root {
  /* Primary palette — canonical values */
  --ag-navy:        #0D1A2B;
  --ag-navy-800:    #142339;
  --ag-navy-700:    #1B2D47;
  --ag-navy-600:    #243A57;
  --ag-navy-500:    #334B66;
  --ag-navy-400:    #5C7290;
  --ag-navy-300:    #92A4BC;
  --ag-navy-200:    #C7D2E1;
  --ag-navy-100:    #E3E9F1;

  --ag-teal:        #0DD4A0;
  --ag-teal-700:    #0AB082;
  --ag-teal-300:    #6EE6C4;
  --ag-teal-100:    #E0FAF1;

  --ag-amber:       #E8B84B;
  --ag-amber-700:   #C99A2C;
  --ag-amber-100:   #FBF1D9;

  --ag-blue:        #0EA5E9;
  --ag-blue-700:    #0284C7;
  --ag-blue-100:    #DBF1FC;

  --ag-red:         #DC4C4C;
  --ag-red-100:     #FBE1E1;

  --ag-gray-50:     #F8FAFC;
  --ag-gray-100:    #F2F6FA;
  --ag-gray-200:    #E7EDF4;
  --ag-gray-300:    #CFD8E4;

  /* Typography — update display face to Schibsted Grotesk */
  --fd: 'Schibsted Grotesk', 'Sora', -apple-system, BlinkMacSystemFont, sans-serif;
  --fb: 'Sora', 'IQOS Hangul', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Noto Sans TC', system-ui, sans-serif;
  --fm: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace;

  /* Spacing tokens (4px base) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;
  --sp-9: 48px; --sp-10: 64px; --sp-11: 80px; --sp-12: 96px;

  /* Radii */
  --r-xs: 2px; --r-sm: 4px; --r-md: 6px;
  --r-lg: 10px; --r-xl: 14px; --r-2xl: 20px; --r-pill: 999px;

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 320ms;

  /* Shadows */
  --shadow-popover: 0 1px 2px rgba(13,26,43,0.04), 0 8px 24px rgba(13,26,43,0.08);
  --shadow-modal:   0 12px 48px rgba(13,26,43,0.18);
  --shadow-focus:   0 0 0 3px rgba(13,212,160,0.32);
}

/* ── Force design-system fonts ────────────────────────────── */
body, html { font-family: var(--fb) !important; }
body input, body textarea, body select, body button { font-family: var(--fb) !important; }

/* ── Typography — Schibsted Grotesk for display roles ─────── */
.h1 {
  font-family: var(--fd) !important;
  font-weight: 800 !important;
  letter-spacing: -0.032em !important;
  line-height: 0.96 !important;
}
.h2 {
  font-family: var(--fd) !important;
  font-weight: 700 !important;
  letter-spacing: -0.022em !important;
  line-height: 1.04 !important;
}
.h3 {
  font-family: var(--fd) !important;
  font-weight: 600 !important;
  letter-spacing: -0.014em !important;
}
.ey {
  font-family: var(--fm) !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  font-size: 11px !important;
  color: var(--ag-teal) !important;
}

/* ── Score / delta display (JetBrains Mono) ───────────────── */
.score-display {
  font-family: var(--fm) !important;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ag-teal);
}
.delta-pos {
  font-family: var(--fm) !important;
  color: var(--ag-teal-700) !important;
}
.delta-neg {
  font-family: var(--fm) !important;
  color: var(--ag-red) !important;
}
/* Force mono on all NEXARC score numbers */
.kpi-v, .chip-n, .trust-n, .proof-num {
  font-family: var(--fm) !important;
}

/* ── Wordmark nav shimmer ─────────────────────────────────── */
.v2n-wm {
  font-family: var(--fd) !important;
  font-weight: 800 !important;
  letter-spacing: -0.022em !important;
}

/* ── NODE HERO ────────────────────────────────────────────── */
.vhero.sec-dk {
  background:
    radial-gradient(ellipse 55% 50% at 18% 35%, rgba(13,212,160,.065) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 82% 70%, rgba(14,165,233,.04) 0%, transparent 55%),
    #080C12;
}
.grid-bg {
  background-image: radial-gradient(circle, rgba(13,212,160,0.14) 1.2px, transparent 1.2px) !important;
  background-size: 52px 52px !important;
}

/* ── NODE CARDS ───────────────────────────────────────────── */
.card, .svc-card, .pf-card, .intel-card, .res-card, .leader {
  border-radius: var(--r-lg) !important;
}
.card-lt, .com-card, .fork-card {
  border-radius: var(--r-lg) !important;
}
.svc-card {
  background: linear-gradient(180deg, #111F33 0%, #0E1A2E 100%) !important;
}
.svc-card:hover {
  box-shadow: 0 0 0 1px rgba(13,212,160,.35), 0 14px 40px rgba(0,0,0,.4) !important;
  transform: translateY(-3px) !important;
}

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn {
  font-family: var(--fb) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  border-radius: var(--r-md) !important;
  transition: all var(--dur-base) var(--ease-standard) !important;
}
.btn-t {
  background: var(--ag-teal) !important;
  color: var(--ag-navy) !important;
  border-radius: var(--r-md) !important;
}
.btn-t:hover {
  background: #0BC290 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(13,212,160,.3) !important;
}
.btn-g {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: var(--r-md) !important;
}
.btn-g:hover {
  border-color: var(--ag-teal) !important;
  color: var(--ag-teal) !important;
}
.btn-a {
  background: var(--ag-amber) !important;
  color: var(--ag-navy) !important;
  border-radius: var(--r-md) !important;
}
.btn-a:hover {
  background: #FFCF67 !important;
  transform: translateY(-1px) !important;
}

/* ── TOP NAV ──────────────────────────────────────────────── */
#v2-nav {
  background: rgba(8,12,18,.92) !important;
  backdrop-filter: blur(22px) !important;
  -webkit-backdrop-filter: blur(22px) !important;
  border-bottom: 1px solid rgba(255,255,255,.055) !important;
}
#v2-nav.v2n-scrolled {
  background: rgba(8,12,18,.08) !important;
  border-bottom-color: rgba(255,255,255,0) !important;
}
.v2n-cta {
  border: 1px solid rgba(13,212,160,.45) !important;
  border-radius: var(--r-sm) !important;
  color: var(--ag-teal) !important;
  font-family: var(--fm) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
}
.v2n-cta:hover {
  background: var(--ag-teal) !important;
  color: var(--ag-navy) !important;
  border-color: var(--ag-teal) !important;
}

/* ── BOTTOM PILL NAV ──────────────────────────────────────── */
.pill {
  background: rgba(8,12,18,.94) !important;
  border: 1px solid var(--ag-navy-700) !important;
  border-radius: var(--r-pill) !important;
  backdrop-filter: blur(14px) !important;
}
.pb {
  font-family: var(--fm) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  border-radius: var(--r-pill) !important;
}
.pb.on {
  background: var(--ag-teal) !important;
  color: var(--ag-navy) !important;
}
.pb:hover:not(.on) {
  color: #fff !important;
}

/* ── METRIC CHIPS ─────────────────────────────────────────── */
.chips {
  border: 1px solid var(--ag-navy-700) !important;
  border-radius: var(--r-lg) !important;
}
.chip:hover {
  background: rgba(13,212,160,.07) !important;
}
.chip-n {
  font-family: var(--fm) !important;
  font-weight: 700 !important;
  color: var(--ag-teal) !important;
}

/* ── TRUST BAR ────────────────────────────────────────────── */
.trust-bar { background: #0A1322 !important; }
.trust-n {
  font-family: var(--fm) !important;
  font-weight: 700 !important;
  color: var(--ag-teal) !important;
}

/* ── SERVICE CARDS ────────────────────────────────────────── */
.svc-code {
  font-family: var(--fm) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.13em !important;
  color: var(--ag-teal) !important;
}
.svc-code.amb { color: var(--ag-amber) !important; }
.svc-title {
  font-family: var(--fd) !important;
  font-weight: 700 !important;
}
.svc-arr { color: var(--ag-teal) !important; }
.svc-arr.amb { color: var(--ag-amber) !important; }

/* ── PROOF / STATS ────────────────────────────────────────── */
.proof-num {
  font-family: var(--fm) !important;
  font-weight: 700 !important;
}
.proof-num .ac { color: var(--ag-teal) !important; }
.proof-tag {
  background: rgba(13,212,160,.18) !important;
  color: var(--ag-navy) !important;
  border-radius: var(--r-pill) !important;
  font-family: var(--fm) !important;
}

/* ── INTEL CARDS ──────────────────────────────────────────── */
.intel-card:hover {
  border-color: rgba(13,212,160,.35) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.4) !important;
}
.intel-thumb { background: var(--ag-navy) !important; }
.intel-amp { display: none !important; }
.intel-cat { position: relative !important; z-index: 2 !important; }
.cat-ai { color: var(--ag-teal) !important; background: var(--ag-teal-100) !important; border: 1px solid rgba(13,212,160,.3) !important; }
.cat-ag { color: var(--ag-blue) !important; background: var(--ag-blue-100) !important; border: 1px solid rgba(14,165,233,.3) !important; }
.cat-ec { color: var(--ag-amber-700) !important; background: var(--ag-amber-100) !important; border: 1px solid rgba(232,184,75,.3) !important; }

/* ── RESOURCE CARDS ───────────────────────────────────────── */
.res-card:hover {
  border-color: rgba(13,212,160,.35) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.4) !important;
}
.res-thumb { background: #0A1322 !important; }

/* ── LEADER / FOUNDER CARDS ───────────────────────────────── */
.leader:hover {
  box-shadow: 0 0 0 1px rgba(13,212,160,.18), 0 24px 60px rgba(0,0,0,.4) !important;
}
.leader.jk::before { background: var(--ag-teal) !important; }
.leader.hl::before { background: var(--ag-blue) !important; }
.leader.sc::before { background: var(--ag-amber) !important; }
.lav.jk { background: rgba(13,212,160,.1) !important; border-color: rgba(13,212,160,.25) !important; color: var(--ag-teal) !important; }
.lav.hl { background: rgba(14,165,233,.1) !important; border-color: rgba(14,165,233,.25) !important; color: var(--ag-blue) !important; }
.lav.sc { background: rgba(232,184,75,.1) !important; border-color: rgba(232,184,75,.25) !important; color: var(--ag-amber) !important; }

/* ── PLATFORM FEATURE CARDS ───────────────────────────────── */
.pf-card:hover {
  border-color: rgba(13,212,160,.35) !important;
  transform: translateY(-3px) !important;
}
.pf-ico {
  background: rgba(13,212,160,.1) !important;
  border: 1px solid rgba(13,212,160,.2) !important;
  border-radius: var(--r-md) !important;
  color: var(--ag-teal) !important;
}
.pf-title { font-family: var(--fd) !important; font-weight: 700 !important; }

/* ── DASHBOARD MOCK ───────────────────────────────────────── */
.dash { background: var(--ag-navy) !important; border-radius: var(--r-xl) !important; }
.dash-bar { background: var(--ag-navy-800) !important; }
.kpi { border-radius: var(--r-md) !important; }
.kpi-l { font-family: var(--fm) !important; }
.kpi-v { font-family: var(--fm) !important; font-weight: 700 !important; }
.alert { border-radius: var(--r-md) !important; }
.alert-btn {
  border-radius: var(--r-sm) !important;
  color: var(--ag-teal) !important;
  border-color: rgba(13,212,160,.3) !important;
  background: rgba(13,212,160,.07) !important;
  font-family: var(--fm) !important;
}

/* ── MARQUEE ──────────────────────────────────────────────── */
.mq-wrap { background: var(--ag-navy) !important; }
.mq-dot { color: var(--ag-teal) !important; }

/* ── PROBLEM CARDS ────────────────────────────────────────── */
.prob-card { border-radius: 0 var(--r-md) var(--r-md) 0 !important; }
.prob-num { font-family: var(--fm) !important; color: var(--ag-teal) !important; }
.prob-title { font-family: var(--fd) !important; }

/* ── COMMITMENT CARDS ─────────────────────────────────────── */
.com-card { border-radius: var(--r-lg) !important; border-left: 3px solid var(--ag-teal) !important; }
.com-t { font-family: var(--fd) !important; font-weight: 700 !important; }

/* ── CTA SECTION ──────────────────────────────────────────── */
.pb.pb-talk { background: var(--ag-teal) !important; color: var(--ag-navy) !important; }
.btn-t { background: var(--ag-teal) !important; color: var(--ag-navy) !important; }
.btn-t:hover { background: #0BC290 !important; }

/* ── NEWSLETTER ───────────────────────────────────────────── */
.nl-input-row { border-radius: var(--r-pill) !important; border-color: var(--ag-navy-600) !important; }
.nl-submit { background: var(--ag-teal) !important; color: var(--ag-navy) !important; font-family: var(--fb) !important; }
.nl-submit:hover { background: #0BC290 !important; }

/* ── CONTACT FORM ─────────────────────────────────────────── */
.fl-in:focus, .fl-ta:focus, .fl-sel:focus {
  border-color: var(--ag-teal) !important;
  box-shadow: var(--shadow-focus) !important;
}

/* ── FOOTER ───────────────────────────────────────────────── */
.footer { background: var(--ag-navy) !important; }
.foot-col h4 { font-family: var(--fm) !important; color: var(--ag-teal) !important; }
.foot-tagline { font-family: var(--fd) !important; }

/* ── FAQ ──────────────────────────────────────────────────── */
.faq-q:hover { color: var(--ag-teal) !important; }
.faq-item.open .faq-q { color: var(--ag-teal) !important; }
.faq-icon { color: var(--ag-teal) !important; }

/* ── SELECTION ────────────────────────────────────────────── */
::selection { background: var(--ag-teal) !important; color: var(--ag-navy) !important; }

/* ─────────────────────────────────────────────────────────────
   BRAND GRAPHIC — hero element (injected per view)
   ───────────────────────────────────────────────────────────── */
.brand-hero-graphic {
  position: absolute; top: 58%; right: 3%;
  transform: translateY(-50%);
  width: min(400px, 38vw); aspect-ratio: 1;
  pointer-events: none; z-index: 1; opacity: .92;
  filter: drop-shadow(0 0 28px rgba(13,212,160,.38)) drop-shadow(0 0 60px rgba(13,212,160,.18));
  animation: hero-gfx-float 8s ease-in-out infinite;
}
@keyframes hero-gfx-float {
  0%,100%{ transform: translateY(-50%) translateY(0px); }
  50%    { transform: translateY(-50%) translateY(-12px); }
}
.vhero .wrap { z-index: 2 !important; position: relative !important; }
@media (min-width: 769px) and (max-width: 1100px) {
  .brand-hero-graphic { opacity: .3 !important; width: min(280px, 32vw) !important; right: 1% !important; }
}
@media (max-width: 768px) { .brand-hero-graphic { display: none !important; } }

#v-pl .brand-hero-graphic { width: min(440px, 42vw) !important; opacity: .7 !important; }
@media (max-width: 1100px) { #v-pl .brand-hero-graphic { opacity: .15 !important; } }

/* ─────────────────────────────────────────────────────────────
   NODE MARK TEXTURE — dark section background
   ───────────────────────────────────────────────────────────── */
.node-texture-bg::after {
  content: '';
  position: absolute; top: 50%; right: 10%;
  transform: translateY(-50%);
  width: 280px; height: 280px;
  background: url('assets/brand/logo.svg') center/contain no-repeat;
  opacity: .03;
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────
   SERVICE ICON TILES
   ───────────────────────────────────────────────────────────── */
.svc-tile {
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}

/* ─────────────────────────────────────────────────────────────
   INTEL CARD THUMBNAILS — animated node mark
   ───────────────────────────────────────────────────────────── */
.intel-thumb { position: relative !important; overflow: hidden !important; background: #08111e !important; }
.intel-node-mark { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; pointer-events: none !important; }
.intel-cat { position: relative !important; z-index: 2 !important; }

/* ─────────────────────────────────────────────────────────────
   RESOURCE CARD THUMBNAILS
   ───────────────────────────────────────────────────────────── */
.res-thumb { background: #0A1322 !important; position: relative; overflow: hidden; }
.res-thumb-inner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }

/* ─────────────────────────────────────────────────────────────
   ICON-HORIZONTAL CARDS
   ───────────────────────────────────────────────────────────── */
.icon-h-card {
  display: grid !important;
  grid-template-columns: 48px 1fr !important;
  grid-template-rows: auto auto !important;
  column-gap: 16px !important;
  row-gap: 10px !important;
  align-items: start !important;
}
.icon-h-card > .icon-h-icon {
  grid-column: 1 !important; grid-row: 1 !important;
  align-self: center !important;
  width: 48px !important; height: 48px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  background: rgba(13,212,160,.08) !important;
  border: 1px solid rgba(13,212,160,.18) !important;
  border-radius: var(--r-lg) !important;
  color: var(--ag-teal) !important;
}
.icon-h-card > .icon-h-title { grid-column: 2 !important; grid-row: 1 !important; align-self: center !important; }
.icon-h-card > .icon-h-body  { grid-column: 1 / -1 !important; grid-row: 2 !important; }

/* ─────────────────────────────────────────────────────────────
   SERVICE CARDS — icon + code grid
   ───────────────────────────────────────────────────────────── */
.svc-card {
  display: grid !important;
  grid-template-columns: 40px 1fr !important;
  grid-template-rows: auto auto auto auto !important;
  column-gap: 14px !important; row-gap: 0 !important;
  align-items: start !important;
  padding: 26px 24px !important;
}
.svc-tile { grid-column: 1 !important; grid-row: 1 !important; align-self: center !important; margin-bottom: 0 !important; }
.svc-code { grid-column: 2 !important; grid-row: 1 !important; align-self: center !important; margin-bottom: 0 !important; }
.svc-title { grid-column: 1 / -1 !important; grid-row: 2 !important; font-size: 16px !important; margin-top: 14px !important; }
.svc-name  { grid-column: 1 / -1 !important; grid-row: 3 !important; margin-top: 5px !important; }
.svc-body  { grid-column: 1 / -1 !important; grid-row: 4 !important; font-size: 13px !important; }
.svc-arr   { grid-column: 1 / -1 !important; grid-row: 5 !important; margin-top: 14px !important; }

/* ─────────────────────────────────────────────────────────────
   PLATFORM FEATURE CARDS
   ───────────────────────────────────────────────────────────── */
.pf-card { display: grid !important; grid-template-columns: 38px 1fr !important; column-gap: 14px !important; row-gap: 8px !important; align-items: start !important; }
.pf-ico   { grid-column: 1 !important; grid-row: 1 !important; align-self: center !important; }
.pf-title { grid-column: 2 !important; grid-row: 1 !important; align-self: center !important; }
.pf-body  { grid-column: 1 / -1 !important; grid-row: 2 !important; }

/* ─────────────────────────────────────────────────────────────
   ABOUT US PAGE
   ───────────────────────────────────────────────────────────── */
#v-ab .h1 { line-height: .93 !important; letter-spacing: -.038em !important; margin-bottom: 28px !important; }
#v-ab .vhero .gc-block { max-width: 640px !important; }
.gc-lbl { font-family: var(--fm) !important; font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: .16em !important; color: var(--ag-teal) !important; margin-bottom: 8px !important; }
.gc-text { font-size: 15px !important; line-height: 1.72 !important; color: rgba(255,255,255,.78) !important; }
.gc-block { border-left-width: 2px !important; padding-left: 1.4rem !important; margin-bottom: 2rem !important; }
#v-ab .vhero .wrap { display: block !important; grid-template-columns: unset !important; }
#v-ab .vhero .wrap > div:first-child { flex: unset !important; max-width: 100% !important; width: 100% !important; }
#v-ab .vhero .wrap > div.ab-commits-moved { display: none !important; }
.founder-photo {
  border-radius: 50% !important;
  border: 2px solid rgba(13,212,160,.3) !important;
  width: 180px !important; height: 180px !important;
  object-fit: cover !important;
  object-position: center 15% !important;
}

/* ─────────────────────────────────────────────────────────────
   FIXED LOGO CHIP (legacy — now hidden in favour of #v2-nav)
   ───────────────────────────────────────────────────────────── */
#logo-fixed { display: none !important; }

/* ─────────────────────────────────────────────────────────────
   COMMITMENT CARDS — About Us full-width layout
   ───────────────────────────────────────────────────────────── */
#v-ab .svc-card > div[style*="margin-bottom:16px"] {
  grid-column: 1 / -1 !important;
  display: flex !important; align-items: flex-start !important; gap: 12px !important;
}
#v-ab .svc-card > div[style*="margin-bottom:16px"] > div[style*="width:44px"] {
  flex-shrink: 0 !important; margin-bottom: 0 !important; align-self: center !important;
}
#v-ab .svc-card .svc-title { flex: 1 !important; min-width: 0 !important; }
@media (max-width: 768px) {
  #v-ab .svc-card { display: block !important; padding: 24px 18px !important; }
  #v-ab .svc-tile { margin-bottom: 12px !important; }
}

/* ─────────────────────────────────────────────────────────────
   KILL v1.5 animation traps (preserved from v2)
   ───────────────────────────────────────────────────────────── */
.fi, .fi.vis { transition: none !important; opacity: 1 !important; transform: none !important; animation: none !important; }
.view.on { animation: none !important; }

/* ─────────────────────────────────────────────────────────────
   TWEAKS PANEL
   ───────────────────────────────────────────────────────────── */
#tw-panel {
  position: fixed; right: 18px; bottom: 78px; z-index: 950;
  width: 296px;
  background: var(--ag-navy-800);
  border: 1px solid rgba(13,212,160,.18);
  border-radius: var(--r-xl);
  padding: 18px;
  color: #fff;
  font-family: var(--fb);
  box-shadow: 0 0 0 1px rgba(0,0,0,.5), var(--shadow-modal);
  display: none;
}
#tw-panel.open { display: block; }
#tw-panel h4 { font-size: 11px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--ag-teal); margin: 0 0 16px; display: flex; align-items: center; justify-content: space-between; }
#tw-panel h4 button { background: none; border: none; color: var(--ag-navy-300); cursor: pointer; font-size: 18px; line-height: 1; padding: 0; }
#tw-panel .tw-label { font-family: var(--fm); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ag-navy-300); margin: 14px 0 8px; display: block; }
#tw-panel .tw-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
#tw-panel .tw-row.tw-2col { grid-template-columns: 1fr 1fr; }
#tw-panel .tw-opt {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  color: #fff; padding: 10px 6px; border-radius: var(--r-md); cursor: pointer;
  text-align: center; font-size: 11px; font-weight: 600; transition: all var(--dur-base);
}
#tw-panel .tw-opt:hover { background: rgba(255,255,255,.08); }
#tw-panel .tw-opt.on { background: var(--ag-teal); color: var(--ag-navy); border-color: var(--ag-teal); }

/* ─────────────────────────────────────────────────────────────
   PILL NAV — single-line enforced, all screen sizes
   ───────────────────────────────────────────────────────────── */
.pill {
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  max-width: calc(100vw - 24px) !important;
  scrollbar-width: none !important;
  padding: 3px 8px !important;
}
.pill::-webkit-scrollbar { display: none !important; }
.pb {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.pb.pb-talk {
  display: flex !important;
  align-items: center !important;
  background: var(--ag-teal) !important;
  color: var(--ag-navy) !important;
  font-weight: 700 !important;
  margin-left: 4px !important;
  flex-shrink: 0 !important;
}
.pb.pb-talk:hover { background: #0FFFC0 !important; color: var(--ag-navy) !important; }

@media (max-width: 768px) {
  .pill {
    padding: 3px 6px !important;
    left: 12px !important;
    transform: none !important;
    width: calc(100% - 24px) !important;
    bottom: 12px !important;
  }
  .pill::after {
    content: '' !important;
    position: absolute !important;
    right: 0 !important; top: 0 !important; bottom: 0 !important;
    width: 48px !important;
    background: linear-gradient(to right, transparent, rgba(8,12,18,0.92)) !important;
    border-radius: 0 999px 999px 0 !important;
    pointer-events: none !important;
    z-index: 2 !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   KOREAN & CHINESE TEXT — word separation + line-break fixes
   Applied site-wide across all 5 views
   ───────────────────────────────────────────────────────────── */

/* Korean: keep-all prevents mid-word breaks on CJK */
:lang(ko),
[data-lang="KR"] .h1, [data-lang="KR"] .h2, [data-lang="KR"] .h3,
[data-lang="KR"] .bd, [data-lang="KR"] .l-bio, [data-lang="KR"] .svc-title,
[data-lang="KR"] .svc-body, [data-lang="KR"] .svc-code, [data-lang="KR"] .pf-title,
[data-lang="KR"] .pf-body, [data-lang="KR"] .ey, [data-lang="KR"] .l-name,
[data-lang="KR"] .prob-title, [data-lang="KR"] .prob-body, [data-lang="KR"] .faq-q span,
[data-lang="KR"] .faq-a, [data-lang="KR"] p, [data-lang="KR"] li,
[data-lang="KR"] .l-why-txt, [data-lang="KR"] .gc-text, [data-lang="KR"] .foot-desc {
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
  line-break: strict !important;
}

/* Chinese: normal word-break + strict line-break for proper punctuation handling */
[data-lang="ZH"] .h1, [data-lang="ZH"] .h2, [data-lang="ZH"] .h3,
[data-lang="ZH"] .bd, [data-lang="ZH"] .l-bio, [data-lang="ZH"] .svc-title,
[data-lang="ZH"] .svc-body, [data-lang="ZH"] .svc-code, [data-lang="ZH"] .pf-title,
[data-lang="ZH"] .pf-body, [data-lang="ZH"] .ey, [data-lang="ZH"] .l-name,
[data-lang="ZH"] .prob-title, [data-lang="ZH"] .prob-body, [data-lang="ZH"] .faq-q span,
[data-lang="ZH"] .faq-a, [data-lang="ZH"] p, [data-lang="ZH"] li,
[data-lang="ZH"] .l-why-txt, [data-lang="ZH"] .gc-text, [data-lang="ZH"] .foot-desc {
  word-break: normal !important;
  overflow-wrap: break-word !important;
  line-break: strict !important;
}

/* Hero H1 — tighten line-height for KR/ZH which need more space */
[data-lang="KR"] .h1, [data-lang="ZH"] .h1 {
  line-height: 1.15 !important;
  letter-spacing: -.01em !important;
}

/* Svc card titles — CJK safe */
.svc-title, .pf-title, .prob-title, .com-t {
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
}

/* ─────────────────────────────────────────────────────────────
   TEXT WRAP — fluid, natural line breaks across EN / KR / ZH
   text-wrap:balance   = equal line lengths for headings
   text-wrap:pretty    = no orphans, natural phrase breaks for body
   Degrades gracefully in older browsers (ignored, no harm)
   ───────────────────────────────────────────────────────────── */

/* Headings — balanced line lengths, no single-word orphan last line */
.h1, .h2, .h3,
.svc-title, .pf-title, .prob-title, .com-t,
.l-name, .intel-title, .res-title,
.lf-wordmark, .v2n-tagline,
[data-i18n$=".t"], [data-i18n$=".h"],
[data-i18n="team.h"], [data-i18n="ab.h"] {
  text-wrap: balance !important;
  -webkit-text-wrap: balance !important;
}

/* Eyebrows / labels — always single line, no wrap */
.ey, .svc-code, .l-title, .l-why-lbl,
.cat-ai, .cat-ag, .cat-ec,
.proof-tag, .l-tag {
  white-space: nowrap !important;
  text-wrap: nowrap !important;
}

/* Body text — pretty breaks, avoid orphaned words */
.bd, .l-bio, .l-why-txt, .gc-text,
.svc-body, .pf-body, .prob-body,
.faq-a p, .foot-desc, .nl-desc,
.v2o-foot, .trust-item p,
[data-i18n$=".b"], [data-i18n$=".d"],
[data-i18n$=".bio"], [data-i18n$=".why"],
[data-i18n$=".sub"], [data-i18n="ab.how"],
[data-i18n="ab.what"] {
  text-wrap: pretty !important;
  -webkit-text-wrap: pretty !important;
  overflow-wrap: break-word !important;
}

/* Korean — balance is especially important for CJK phrase rhythm */
[data-lang="KR"] .h1,
[data-lang="KR"] .h2,
[data-lang="KR"] .h3,
[data-lang="KR"] .svc-title,
[data-lang="KR"] .pf-title {
  text-wrap: balance !important;
  word-break: keep-all !important;
  line-break: strict !important;
}

[data-lang="KR"] .bd,
[data-lang="KR"] .l-bio,
[data-lang="KR"] .svc-body,
[data-lang="KR"] .pf-body,
[data-lang="KR"] .gc-text,
[data-lang="KR"] .l-why-txt,
[data-lang="KR"] p {
  text-wrap: pretty !important;
  word-break: keep-all !important;
  line-break: strict !important;
  overflow-wrap: break-word !important;
}

/* Chinese — no spaces between words, line-break:strict at punctuation */
[data-lang="ZH"] .h1,
[data-lang="ZH"] .h2,
[data-lang="ZH"] .h3,
[data-lang="ZH"] .svc-title,
[data-lang="ZH"] .pf-title {
  text-wrap: balance !important;
  line-break: strict !important;
}

[data-lang="ZH"] .bd,
[data-lang="ZH"] .l-bio,
[data-lang="ZH"] .svc-body,
[data-lang="ZH"] .pf-body,
[data-lang="ZH"] .gc-text,
[data-lang="ZH"] .l-why-txt,
[data-lang="ZH"] p {
  text-wrap: pretty !important;
  line-break: strict !important;
  overflow-wrap: break-word !important;
}

/* Platform hero — KR collapses two-line "결정. / 보고서가 아닌." into one line */
[data-lang="KR"] [data-i18n="pl.h1"] + br,
[data-lang="KR"] [data-i18n="pl.h2"] {
  display: none !important;
}