/* ─────────────────────────────────────────────────────────────
   &gentic v2 — Node Brand System (locked direction)
   Layers on top of v1.5. Node direction is now canonical.
   ───────────────────────────────────────────────────────────── */

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

:root {
  --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-amber:  #E8B84B;
  --ag-blue:   #0EA5E9;
  --node-glow: rgba(13,212,160,.22);
  --node-faint: rgba(13,212,160,.07);
  --font-sans: 'Sora','IQOS Hangul','Apple SD Gothic Neo','Noto Sans KR',system-ui,sans-serif;
  --font-mono: 'JetBrains Mono',ui-monospace,'SF Mono',monospace;
}

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

/* ── Typography refinements ── */
.h1 { font-weight: 700 !important; letter-spacing: -.028em !important; line-height: .98 !important; }
.h2 { font-weight: 600 !important; letter-spacing: -.018em !important; }
.h3 { font-weight: 600 !important; }
.ey { font-weight: 600 !important; letter-spacing: .14em !important; font-size: 11px !important; color: var(--ag-teal) !important; }

/* ── Kill v1.5 throttled-iframe animation traps ── */
.fi, .fi.vis { transition: none !important; opacity: 1 !important; transform: none !important; animation: none !important; }
.view.on { animation: none !important; }

/* ─────────────────────────────────────────────────────────────
   NODE HERO — each view gets its own variant
   All share the dot-grid bg + radial teal glow
   ───────────────────────────────────────────────────────────── */
.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 — consistent across all views
   ───────────────────────────────────────────────────────────── */
.card, .svc-card, .pf-card, .intel-card, .res-card, .leader {
  border-radius: 10px !important;
}
.card-lt, .com-card, .fork-card {
  border-radius: 10px !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;
}

/* ─────────────────────────────────────────────────────────────
   BRAND GRAPHIC — positioned 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); }
}
/* Text always above graphic */
.vhero .wrap { z-index: 2 !important; position: relative !important; }
/* Tablet: reduce opacity, pull in */
@media (min-width: 769px) and (max-width: 1100px) {
  .brand-hero-graphic { opacity: .3 !important; width: min(280px, 32vw) !important; right: 1% !important; }
}
/* Mobile: hide entirely, text goes full-width */
@media (max-width: 768px) { .brand-hero-graphic { display: none !important; } }

/* Platform view — match global system, slightly larger */
#v-pl .brand-hero-graphic {
  width: min(440px, 42vw) !important;
  opacity: .7 !important;
  right: 3% !important;
  top: 58% !important;
}
/* Constrain Platform hero text to ~54% so it sits closer to the graphic */
#v-pl .vhero .wrap > div:first-child,
#v-pl .vhero .wrap > [style]:first-child { max-width: 54% !important; }
@media (max-width: 1100px) {
  #v-pl .brand-hero-graphic { opacity: .15 !important; }
  #v-pl .vhero .wrap > div:first-child,
  #v-pl .vhero .wrap > [style]:first-child { max-width: 100% !important; }
}
@media (max-width: 768px) {
  #v-pl .brand-hero-graphic { display: none !important; }
  #v-pl .vhero .wrap > div:first-child,
  #v-pl .vhero .wrap > [style]:first-child { max-width: 100% !important; }
}

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

/* ─────────────────────────────────────────────────────────────
   SERVICE ICON TILES
   ───────────────────────────────────────────────────────────── */
.svc-tile {
  width: 44px; height: 44px;
  border-radius: 8px;
  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;
}
/* Hide old .intel-amp text (handled by JS, but CSS as safety net) */
.intel-amp { display: none !important; }
/* Keep category chip above the mark */
.intel-cat { position: relative !important; z-index: 2 !important; }

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

/* ─────────────────────────────────────────────────────────────
   PROOF / STATS — refined number treatment
   ───────────────────────────────────────────────────────────── */
.proof-num { font-family: var(--font-sans) !important; }
.trust-n   { font-family: var(--font-sans) !important; font-weight: 700 !important; color: var(--ag-teal) !important; }
.trust-bar { background: #0A1322 !important; }
.chip-n    { color: var(--ag-teal) !important; }

/* ─────────────────────────────────────────────────────────────
   ICON-HORIZONTAL CARDS — icon aligned left of title
   Applied via .icon-h-card class (stamped by brand-v2.js)
   ───────────────────────────────────────────────────────────── */
.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;
  flex-shrink: 0 !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: 10px !important;
  color: #0DD4A0 !important;
}
.icon-h-card > .icon-h-icon svg,
.icon-h-card > .icon-h-icon .glyph {
  width: 26px !important;
  height: 26px !important;
}
.icon-h-card > .icon-h-title {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center !important;
  margin-bottom: 0 !important;
  line-height: 1.25 !important;
}
.icon-h-card > .icon-h-body {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  margin-top: 0 !important;
}

/* ─────────────────────────────────────────────────────────────
   SERVICE CARDS — icon tile aligned left of service code
   ───────────────────────────────────────────────────────────── */
.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;
}
/* Icon tile — slightly smaller to sit in proportion with code label */
.svc-tile {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 40px !important;
  height: 40px !important;
  align-self: center !important;
  margin-bottom: 0 !important;
  border-radius: 8px !important;
  flex-shrink: 0 !important;
}
/* Service code label (NAERA etc) — sized to read next to the 40px icon */
.svc-code {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center !important;
  margin-bottom: 0 !important;
  font-size: 12px !important;
  letter-spacing: .13em !important;
  line-height: 1.3 !important;
}
/* Title — full width, anchored with consistent top gap */
.svc-title {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
  margin-top: 14px !important;
  margin-bottom: 0 !important;
}
/* Sub-name (Track B cards only) */
.svc-name {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  font-size: 10px !important;
  margin-top: 5px !important;
  margin-bottom: 0 !important;
}
/* Body text */
.svc-body {
  grid-column: 1 / -1 !important;
  grid-row: 4 !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  margin-top: 8px !important;
}
/* Hover arrow */
.svc-arr {
  grid-column: 1 / -1 !important;
  grid-row: 5 !important;
  margin-top: 14px !important;
}

/* ─────────────────────────────────────────────────────────────
   PLATFORM FEATURE CARDS — icon aligned next to title
   ───────────────────────────────────────────────────────────── */
.pf-card {
  display: grid !important;
  grid-template-columns: 38px 1fr !important;
  grid-template-rows: auto auto !important;
  column-gap: 14px !important;
  row-gap: 8px !important;
  align-items: start !important;
}
.pf-ico {
  grid-column: 1 !important;
  grid-row: 1 !important;
  margin-bottom: 0 !important;
  align-self: center !important;
}
.pf-title {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center !important;
  margin-bottom: 0 !important;
}
.pf-body {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
}

/* ─────────────────────────────────────────────────────────────
   ABOUT US PAGE — font, layout, and visual consistency fixes
   ───────────────────────────────────────────────────────────── */

/* 1. Hero h1 — use global size (removed custom override) */
#v-ab .h1 {
  line-height: .93 !important;
  letter-spacing: -.038em !important;
  margin-bottom: 28px !important;
}

/* WHY/HOW/WHAT blocks — restore original constrained width */
#v-ab .gc-block { max-width: 640px !important; }
.gc-lbl {
  font-family: var(--font-mono) !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;
}

/* 3. About hero wrap — single column now that commitments moved to own section */
#v-ab .vhero .wrap {
  display: block !important;
  grid-template-columns: unset !important;
}
/* Left text column: full width — commitments now in separate section */
#v-ab .vhero .wrap > div:first-child {
  flex: unset !important;
  max-width: 100% !important;
  width: 100% !important;
}
/* Commitments col hidden from hero (JS moves it below) */
#v-ab .vhero .wrap > div.ab-commits-moved {
  display: none !important;
}

/* 4. Our Commitments inner card list → 2 × 2 grid */
#v-ab .vhero .wrap > div:last-child > [style*="flex-direction:column"],
#v-ab .vhero .wrap > div:last-child > [style*="flex-direction: column"] {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}
/* Smaller card padding at this size */
#v-ab .com-card {
  padding: 16px 18px !important;
}
.com-t { font-size: 13px !important; }
.com-d { font-size: 12px !important; }

/* 5. Mobile — stack everything */
@media (max-width: 768px) {
  #v-ab .vhero .wrap {
    flex-direction: column !important;
    gap: 24px !important;
  }
  #v-ab .vhero .wrap > div:first-child,
  #v-ab .vhero .wrap > div:last-child {
    flex: unset !important; max-width: 100% !important;
  }
  #v-ab .vhero .wrap > div:last-child > [style*="flex-direction:column"] {
    grid-template-columns: 1fr !important;
  }
}
   ───────────────────────────────────────────────────────────── */
.bilateral-map {
  width: 100%; max-height: 220px;
  margin-top: 32px; border-radius: 10px;
  overflow: hidden; position: relative;
  background: #0A1322;
  border: 1px solid rgba(13,212,160,.15);
}
.founder-photo {
  border-radius: 50% !important;
  border: 2px solid rgba(13,212,160,.3) !important;
  width: 180px !important;
  height: 180px !important;
  object-position: center top !important;
}

/* ─────────────────────────────────────────────────────────────
   CTA / PILL
   ───────────────────────────────────────────────────────────── */
.pb.on  { background: var(--ag-teal) !important; color: #080C12 !important; }
.pb.pb-talk { background: var(--ag-teal) !important; color: #080C12 !important; }
.btn-t  { background: var(--ag-teal) !important; color: #080C12 !important; }
.btn-t:hover { background: #0FFFC0 !important; }
.mq-wrap { background: #0A1322 !important; }

/* ─────────────────────────────────────────────────────────────
   FIXED LOGO CHIP
   ───────────────────────────────────────────────────────────── */
#logo-fixed {
  background: rgba(8,12,18,.80) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(13,212,160,.14) !important;
  padding: 7px 14px 7px 12px !important;
  border-radius: 10px !important;
  display: flex; align-items: center;
  min-height: 44px; cursor: pointer;
}
.lf-text { display: flex; flex-direction: column; gap: 3px; }
.lf-wordmark {
  font-family: var(--font-sans);
  font-size: 20px; font-weight: 800;
  letter-spacing: -.022em; line-height: 1;
  display: inline-flex; align-items: baseline; gap: 0;
}
.lf-sub {
  font-family: var(--font-mono);
  font-size: 8px; font-weight: 500;
  color: var(--ag-navy-300);
  letter-spacing: .1em; text-transform: uppercase; line-height: 1;
}
@media (max-width: 768px) {
  #logo-fixed { padding: 6px 12px 6px 10px !important; }
  .lf-wordmark { font-size: 17px; }
  .lf-sub { display: none; }
}

/* ─────────────────────────────────────────────────────────────
   TWEAKS PANEL (Node-era settings)
   ───────────────────────────────────────────────────────────── */
#tw-panel {
  position: fixed; right: 18px; bottom: 78px; z-index: 950;
  width: 296px;
  background: #0F1B2D;
  border: 1px solid rgba(13,212,160,.18);
  border-radius: 12px;
  padding: 18px;
  color: #fff;
  font-family: var(--font-sans);
  box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 24px 60px rgba(0,0,0,.6);
  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(--font-mono); 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: 6px; cursor: pointer;
  text-align: center; font-size: 11px; font-weight: 600; transition: all .18s;
}
#tw-panel .tw-opt:hover { background: rgba(255,255,255,.08); }
#tw-panel .tw-opt.on { background: var(--ag-teal); color: #080C12; border-color: var(--ag-teal); }
#tw-panel .tw-rule { height: 1px; background: rgba(255,255,255,.07); margin: 14px 0; }
#tw-panel .tw-note { font-size: 11.5px; line-height: 1.55; color: var(--ag-navy-300); }