/* =========================================================
   pages.css — page- and section-specific styles
   Order: main page sections, then subpage variants
   ========================================================= */

/* ============================================================
   MAIN — HERO
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  background: var(--bg-dark);
  color: #fff;
}
@media (max-width: 640px) { .hero { min-height: 560px; height: 85vh; } }

.hero .swiper,
.hero .swiper-wrapper,
.hero .swiper-slide { height: 100%; }

.hero-slide { position: relative; overflow: hidden; }
.hero-slide .hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.hero-slide .hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(21,19,15,.82) 0%, rgba(75,46,21,.58) 100%);
}

.hero-slide .hero-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: center;
}
.hero-slide .hero-content {
  max-width: 640px;
  padding: 120px 0 140px;
}
.hero-slide .hero-eyebrow { color: var(--color-accent-300); margin-bottom: var(--sp-4); }
.hero-slide .hero-title {
  font-family: var(--ff-sans);
  font-size: var(--fs-display);
  color: #fff;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  font-weight: var(--fw-bold);
  margin-bottom: var(--sp-3);
}
.hero-slide .hero-sub {
  font-size: var(--fs-h3);
  color: var(--color-accent-300);
  font-weight: var(--fw-medium);
  margin-bottom: var(--sp-5);
  letter-spacing: -0.01em;
}
.hero-slide .hero-desc {
  color: rgba(255,255,255,.82);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-loose);
  margin-bottom: var(--sp-7);
  max-width: 480px;
}

/* --- Hero controls --- */
.hero-controls {
  position: absolute;
  left: 0; right: 0;
  bottom: 48px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  pointer-events: none;
}
.hero-controls > * { pointer-events: auto; }
.hero-controls .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-5);
}

.hero-counter {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  font-family: var(--ff-display);
  color: rgba(255,255,255,.8);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.hero-counter .hero-curr { color: #fff; font-size: 18px; }
.hero-counter .hero-slash { opacity: .4; }
.hero-progress {
  width: 120px;
  height: 2px;
  background: rgba(255,255,255,.18);
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}
.hero-progress-bar {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
}

.hero-nav {
  display: flex;
  gap: 10px;
}
.hero-nav button {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(21,19,15,.35);
  color: #fff;
  backdrop-filter: blur(6px);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--dur-base) var(--ease-out);
}
.hero-nav button:hover {
  background: #fff;
  color: var(--brand);
  border-color: #fff;
}
.hero-nav button svg { width: 18px; height: 18px; }

.hero-scroll-hint {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--ff-display);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 3;
  pointer-events: none;
}
.hero-scroll-hint::after {
  content: "";
  width: 1px;
  height: 24px;
  background: linear-gradient(to bottom, rgba(255,255,255,.7), transparent);
}

/* Swiper pagination dots override */
.hero [data-hero-pagination] {
  display: none; /* use counter + progress instead */
}

@media (max-width: 640px) {
  .hero-slide .hero-content { padding: 100px 0 120px; }
  .hero-slide .hero-title   { font-size: var(--fs-display); }
  .hero-slide .hero-sub     { font-size: var(--fs-h4); }
  .hero-slide .hero-desc    { font-size: var(--fs-body); }
  .hero-controls { bottom: 24px; }
  .hero-progress { width: 64px; }
  .hero-nav button { width: 40px; height: 40px; }
  .hero-scroll-hint { display: none; }
}

/* ============================================================
   MAIN — STATS
   ============================================================ */
.stats {
  background: var(--color-neutral-900);
  color: #fff;
  padding: var(--sp-8) 0;
  position: relative;
  overflow: hidden;
}
.stats::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 50%, rgba(111,168,76,.08) 0%, transparent 40%),
              radial-gradient(circle at 80% 50%, rgba(107,68,35,.12) 0%, transparent 45%);
  pointer-events: none;
}
.stats-grid {
  position: relative;
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(2, 1fr);
  text-align: center;
}
@media (min-width: 1025px) {
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }
  .stats-item + .stats-item { border-left: 1px solid rgba(255,255,255,.12); }
}
.stats-item {
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.stats-num {
  font-family: var(--ff-display);
  font-size: var(--fs-count);
  font-weight: 700;
  color: var(--color-accent-300);
  line-height: 1;
  letter-spacing: -0.02em;
}
.stats-label {
  font-family: var(--ff-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
}
.stats-sub {
  font-size: var(--fs-body-sm);
  color: rgba(255,255,255,.65);
}

/* ============================================================
   MAIN — BUSINESS AREA
   ============================================================ */
.biz {
  padding: var(--section-py-mobile) 0;
  background: var(--bg-section);
}
@media (min-width: 1025px) { .biz { padding: var(--section-py-desktop) 0; } }

.biz-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}
@media (min-width: 641px)  { .biz-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1025px) { .biz-grid { grid-template-columns: repeat(3, 1fr); } }

.biz-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-height: 240px;
  padding: var(--sp-6);
  text-decoration: none;
  color: inherit;
}
.biz-card .biz-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--color-accent-50);
  color: var(--color-accent-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--dur-base) var(--ease-out);
}
.biz-card .biz-icon svg { width: 26px; height: 26px; stroke-width: 1.6; }
.biz-card h3 { color: var(--text-strong); font-size: var(--fs-h4); }
.biz-card .biz-desc {
  color: var(--text-muted);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-loose);
  flex: 1;
}
.biz-card .biz-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}
.biz-card .biz-arrow {
  position: absolute;
  bottom: var(--sp-5);
  right: var(--sp-5);
  opacity: 0;
  transition: all var(--dur-base) var(--ease-out);
  color: var(--color-primary-600);
}
.biz-card { position: relative; }
@media (hover: hover) {
  .biz-card:hover .biz-icon { background: var(--color-accent-500); color: #fff; }
  .biz-card:hover .biz-arrow { opacity: 1; transform: translateX(4px); }
}

/* ============================================================
   MAIN — PRODUCTS
   ============================================================ */
.products {
  padding: var(--section-py-mobile) 0;
}
@media (min-width: 1025px) { .products { padding: var(--section-py-desktop) 0; } }

.products-split {
  display: grid;
  gap: var(--sp-8);
  grid-template-columns: 1fr;
}
@media (min-width: 1025px) {
  .products-split {
    grid-template-columns: 1fr 1.35fr;
    gap: var(--sp-9);
    align-items: start;
  }
  .products-intro { position: sticky; top: 120px; }
}
.products-intro h2 {
  margin-top: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.products-intro .products-desc {
  color: var(--text-muted);
  line-height: var(--lh-loose);
  margin-bottom: var(--sp-6);
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}
@media (min-width: 1025px) { .products-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1441px) { .products-grid { grid-template-columns: repeat(4, 1fr); } }

@media (min-width: 641px) and (max-width: 1024px) {
  .products-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   MAIN — CUSTOMERS
   ============================================================ */
.customers {
  padding: var(--section-py-mobile) 0;
  background: var(--bg-section);
  overflow: hidden;
}
@media (min-width: 1025px) { .customers { padding: var(--section-py-desktop) 0; } }

.customers-marquees {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ============================================================
   MAIN — LOCATION
   ============================================================ */
.location {
  padding: var(--section-py-mobile) 0;
}
@media (min-width: 1025px) { .location { padding: var(--section-py-desktop) 0; } }

.location-grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
}
@media (min-width: 1025px) {
  .location-grid { grid-template-columns: 1.4fr 1fr; }
}

.map-canvas {
  position: relative;
  display: block;
  width: 100%;
  min-height: 380px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background:
    linear-gradient(135deg, var(--color-neutral-50) 0%, var(--color-neutral-100) 100%);
  border: 1px solid var(--border-soft);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
@media (min-width: 1025px) { .map-canvas { min-height: 440px; } }

.map-canvas .map-image {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.map-canvas:hover .map-image { transform: scale(1.03); }
/* When the image fails (file missing), it visually disappears so the
   gradient background + overlay still convey the location. */
.map-canvas .map-image.is-missing { display: none; }

.map-overlay {
  position: absolute;
  left: var(--sp-5);
  bottom: var(--sp-5);
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius-md);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  max-width: calc(100% - var(--sp-5) * 2);
}
.map-overlay-title {
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
  margin-bottom: 2px;
}
.map-overlay-desc {
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
  margin-bottom: var(--sp-2);
}
.map-overlay-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-primary-600);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-sm);
}
.map-canvas:hover .map-overlay-cta { text-decoration: underline; }

@media (max-width: 640px) {
  .map-overlay {
    left: var(--sp-3);
    right: var(--sp-3);
    bottom: var(--sp-3);
    max-width: none;
    padding: var(--sp-3) var(--sp-4);
  }
}

.location-info {
  background: var(--bg-section);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  border: 1px solid var(--border-soft);
}
.location-info h3 { margin-bottom: var(--sp-3); }
.location-info dl {
  display: grid;
  grid-template-columns: 80px 1fr;
  row-gap: var(--sp-3);
  column-gap: var(--sp-3);
  font-size: var(--fs-body-sm);
}
.location-info dt {
  font-family: var(--ff-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-top: 3px;
}
.location-info dd { color: var(--text-strong); line-height: var(--lh-loose); }

/* ============================================================
   MAIN — CTA STRIP (optional before footer)
   ============================================================ */
.cta-strip {
  background: var(--color-primary-700);
  color: #fff;
  padding: var(--sp-7) 0;
  position: relative;
  overflow: hidden;
}
.cta-strip::before {
  content: "";
  position: absolute;
  right: -80px; top: -40px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(111,168,76,.25) 0%, transparent 70%);
  pointer-events: none;
}
.cta-strip-inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-items: flex-start;
  position: relative;
}
@media (min-width: 1025px) {
  .cta-strip-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
.cta-strip h2 {
  color: #fff;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
}
.cta-strip .cta-strip-desc {
  color: rgba(255,255,255,.7);
  font-size: var(--fs-body);
  margin-top: 6px;
}

/* ============================================================
   SUBPAGES — shared content patterns
   ============================================================ */

/* Two-column intro (company, partner) */
.intro-split {
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: 1fr;
}
@media (min-width: 1025px) { .intro-split { grid-template-columns: 1fr 1fr; align-items: center; } }
.intro-split h2 { margin-bottom: var(--sp-4); }
.intro-split .intro-body p + p { margin-top: var(--sp-3); }

/* Card list (generic subpage) */
.card-list {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}
@media (min-width: 641px)  { .card-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1025px) { .card-list { grid-template-columns: repeat(3, 1fr); } }
.card-list.card-list--2 { grid-template-columns: 1fr; }
@media (min-width: 1025px) { .card-list.card-list--2 { grid-template-columns: repeat(2, 1fr); } }

/* 7-card layout — fix orphan (desktop 3+3+1, tablet 2+2+2+1) */
@media (min-width: 1025px) {
  .card-list.card-list--7 > :last-child { grid-column: 2; }
}
@media (min-width: 641px) and (max-width: 1024px) {
  .card-list.card-list--7 > :last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - var(--sp-5) / 2);
  }
}

/* 8-card layout — perfect 4×2 (desktop) / 2×4 (tablet) / 1×8 (mobile) */
.card-list.card-list--8 { grid-template-columns: 1fr; }
@media (min-width: 641px)  { .card-list.card-list--8 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1025px) { .card-list.card-list--8 { grid-template-columns: repeat(4, 1fr); } }

/* 5-card layout — desktop 3+2 (마지막 행 가운데), tablet 2+2+1 (마지막 가운데), mobile 1×5 */
@media (min-width: 1025px) {
  .card-list.card-list--5 { grid-template-columns: repeat(6, 1fr); }
  .card-list.card-list--5 > * { grid-column: span 2; }
  .card-list.card-list--5 > :nth-child(4) { grid-column: 2 / span 2; }
  .card-list.card-list--5 > :nth-child(5) { grid-column: 4 / span 2; }
}
@media (min-width: 641px) and (max-width: 1024px) {
  .card-list.card-list--5 > :last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - var(--sp-5) / 2);
  }
}

/* Value/mission cards (company) */
.value-card {
  background: #fff;
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  box-shadow: var(--shadow-1);
  border: 1px solid var(--border-soft);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.value-card .value-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-primary-50);
  color: var(--color-primary-700);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-4);
}
.value-card .value-icon svg { width: 22px; height: 22px; }
.value-card h4 { margin-bottom: var(--sp-2); }
.value-card p { color: var(--text-muted); font-size: var(--fs-body-sm); line-height: var(--lh-loose); }
.value-card .vendor-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: var(--sp-4);
}

/* Linked value-card — distinguishes own-solution card with subtle accent + CTA chevron */
.value-card.value-card--link {
  position: relative;
  border-color: var(--color-primary-200);
  background: linear-gradient(180deg, #fff 0%, var(--color-primary-50) 100%);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.value-card.value-card--link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: var(--color-primary-400);
}
.value-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--sp-3);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--color-primary-700);
  text-decoration: none;
}
.value-card-cta:hover { color: var(--color-primary-900); }
.value-card-cta svg { transition: transform var(--dur-base) var(--ease-out); }
.value-card.value-card--link:hover .value-card-cta svg { transform: translateX(3px); }

/* House-brand tag-pill (BITOPLUS SOC distinguishes from vendor tags) */
.tag-pill.tag-pill--house {
  background: var(--color-primary-700);
  color: #fff;
  border-color: var(--color-primary-700);
}

/* Tech-specific tag-pill colors (Cilium / Hubble / Tetragon mapping in soc.html) */
.tag-pill.tag-pill--cilium   { background: #f6f3ff; color: #5d3eff; border-color: #d9cfff; }
.tag-pill.tag-pill--hubble   { background: #eef7ff; color: #1f6feb; border-color: #c8e0ff; }
.tag-pill.tag-pill--tetragon { background: #fff1ed; color: #c2410c; border-color: #ffd6c4; }

/* SOC page (soc.html) — bespoke layout helpers */
.feature-list {
  margin-top: var(--sp-3);
  padding-left: 1.1em;
  list-style: disc;
  color: var(--text-muted);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-loose);
}
.feature-list li { margin: 0.15em 0; }

.soc-mass {
  display: grid;
  gap: var(--sp-5);
  margin-top: var(--sp-5);
}
.soc-mass-hero {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-2);
  border: 1px solid var(--border-soft);
  background: #fff;
}
.soc-mass-hero img {
  display: block;
  width: 100%;
  height: auto;
}
.soc-mass-hero figcaption,
.soc-mass-grid figcaption {
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
  text-align: center;
  background: var(--color-primary-50);
}
.soc-mass-hero figcaption {
  font-weight: var(--fw-medium);
  color: var(--text-strong);
}
.soc-mass-grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}
@media (min-width: 769px) {
  .soc-mass-grid { grid-template-columns: repeat(2, 1fr); }
}
.soc-mass-grid figure {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  border: 1px solid var(--border-soft);
  background: #fff;
}
.soc-mass-grid figure img {
  display: block;
  width: 100%;
  height: auto;
}
.soc-mass-grid figcaption .meta {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-caption);
  color: var(--color-primary-700);
}

.soc-domains { margin-top: var(--sp-7); }
.soc-domains h3 {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-h4);
}

.arch-figure {
  margin: 0 0 var(--sp-3);
  background: #fff;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  overflow: hidden;
}
.arch-figure img {
  display: block;
  width: 100%;
  height: auto;
}
.arch-figure--svg {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
}
.arch-figure--svg svg.arch-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* SOC 페이지 — 배포 아키텍처 카드 (Section D) */
.arch-stack {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
  margin-top: var(--sp-5);
}
.arch-card {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  box-shadow: var(--shadow-1);
}
.arch-card-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
  flex-wrap: wrap;
}
.arch-card-head h4 {
  margin: 0;
  font-size: var(--fs-h5);
  color: var(--text-strong);
}
.arch-card-num {
  margin-left: auto;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--color-primary-300);
}
.arch-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--color-primary-50);
  color: var(--color-primary-800);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
}
.arch-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary-700);
}
.arch-badge--small .arch-badge-dot { background: #6b4423; }
.arch-badge--large {
  background: #fff1ed;
  color: #c2410c;
}
.arch-badge--large .arch-badge-dot { background: #c2410c; }
.arch-card-desc {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
  line-height: var(--lh-loose);
}

.ops-row {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
  margin-top: var(--sp-5);
}
@media (min-width: 641px) {
  .ops-row { grid-template-columns: repeat(3, 1fr); }
}
.ops-item {
  text-align: center;
  padding: var(--sp-5);
  background: #fff;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
}
.ops-item .value-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--sp-3);
  border-radius: var(--radius-md);
  background: var(--color-primary-50);
  color: var(--color-primary-700);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ops-item .value-icon svg { width: 26px; height: 26px; }
.ops-item h5 {
  margin: 0;
  font-size: var(--fs-body);
  color: var(--text-strong);
}

/* eBPF 3축 카드 (Section B) — 슬림화 + 컬러 액센트 + chip 그룹 */
.ebpf-cards {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
  margin-top: var(--sp-5);
}
@media (min-width: 769px) {
  .ebpf-cards { grid-template-columns: repeat(3, 1fr); }
}
.ebpf-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
  padding-top: calc(var(--sp-5) + 4px);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.ebpf-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
.ebpf-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.ebpf-card--cilium::before   { background: #5d3eff; }
.ebpf-card--hubble::before   { background: #1f6feb; }
.ebpf-card--tetragon::before { background: #c2410c; }

.ebpf-card-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.ebpf-card-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ebpf-card-icon svg { width: 22px; height: 22px; }
.ebpf-card--cilium   .ebpf-card-icon { background: #f6f3ff; color: #5d3eff; }
.ebpf-card--hubble   .ebpf-card-icon { background: #eef7ff; color: #1f6feb; }
.ebpf-card--tetragon .ebpf-card-icon { background: #fff1ed; color: #c2410c; }

.ebpf-card h4 {
  margin: 0;
  font-size: var(--fs-h5);
  color: var(--text-strong);
  line-height: 1.2;
}
.ebpf-card-role {
  display: inline-block;
  margin-top: 2px;
  font-size: var(--fs-caption);
  color: var(--text-muted);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
}
.ebpf-card--cilium   .ebpf-card-role { color: #5d3eff; }
.ebpf-card--hubble   .ebpf-card-role { color: #1f6feb; }
.ebpf-card--tetragon .ebpf-card-role { color: #c2410c; }

.ebpf-card-summary {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-2) 0 var(--sp-3);
  border-bottom: 1px solid var(--border-soft);
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
  line-height: var(--lh-loose);
}
.ebpf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ebpf-chips li {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--color-primary-50);
  color: var(--color-primary-800);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: 0.01em;
}

/* Section B 출처 크레딧 — 작은 캡션 */
.source-credit {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-caption);
  color: var(--text-muted);
  text-align: right;
}
.source-credit strong {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-strong);
}

/* Section E-bis "지금 만들고 있는 것" — 단순 뱃지에서 콘텐츠 블록으로 확장 */
.roadmap-list {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
  margin-top: var(--sp-5);
}
@media (min-width: 769px) {
  .roadmap-list { grid-template-columns: repeat(3, 1fr); }
}
.roadmap-item {
  background: #fff;
  border: 1px dashed var(--color-primary-300);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
}
.roadmap-item .status-badge--dev { margin-bottom: var(--sp-3); }
.roadmap-item h4 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-body);
  color: var(--text-strong);
}
.roadmap-item p {
  margin: 0;
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
  line-height: var(--lh-loose);
}

.standalone-card {
  background: #fff;
  border: 1px dashed var(--color-primary-300);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  text-align: center;
}
.standalone-card .status-badge--dev { margin-bottom: var(--sp-3); }
.standalone-card h2 { margin-bottom: var(--sp-3); }
.standalone-card p {
  max-width: 720px;
  margin: 0 auto;
  color: var(--text-muted);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
}

/* Coming-Soon status badge (used by soc.html "단독형 런타임 보안" block) */
.status-badge--dev {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #fff7e6;
  color: #b45309;
  border: 1px solid #fbbf24;
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
}
.status-badge--dev::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.6);
  animation: status-dev-pulse 2s ease-out infinite;
}
@keyframes status-dev-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.6); }
  70%  { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

/* History timeline */
.history-wrap { position: relative; padding: var(--sp-7) 0; }

.history-wrap::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--color-accent-400), var(--color-primary-400) 50%, transparent);
}
@media (min-width: 1025px) {
  .history-wrap::before { left: 50%; transform: translateX(-1px); }
}

.history-year-block {
  position: relative;
  padding-left: 40px;
  margin-bottom: var(--sp-7);
}
@media (min-width: 1025px) {
  .history-year-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-7);
    padding-left: 0;
    align-items: start;
  }
  .history-year-block:nth-child(even) { direction: rtl; }
  .history-year-block:nth-child(even) > * { direction: ltr; }
}
.history-year-block::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 8px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--bg-page);
}
@media (min-width: 1025px) {
  .history-year-block::before {
    left: 50%; transform: translate(-50%, 0);
  }
}
.history-year {
  font-family: var(--ff-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--color-primary-700);
  margin-bottom: var(--sp-3);
}
.history-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.history-list li {
  display: flex; align-items: start; gap: var(--sp-2);
  color: var(--text-body);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-loose);
}
.history-list li::before {
  content: "";
  flex-shrink: 0;
  width: 6px; height: 6px;
  margin-top: 10px;
  border-radius: 50%;
  background: var(--color-primary-400);
}

/* Customers (subpage) — category tabs + pill grid */
.cat-tabs {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-6);
}
.cat-tab {
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-soft);
  background: #fff;
  font-size: 14px;
  font-weight: var(--fw-medium);
  color: var(--text-body);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
}
.cat-tab:hover { border-color: var(--color-primary-400); }
.cat-tab.is-active {
  background: var(--color-primary-700);
  color: #fff;
  border-color: var(--color-primary-700);
}
.pill-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Product vendor header (products01~08) */
.vendor-hero {
  display: grid;
  gap: var(--sp-5);
  align-items: center;
  padding: var(--sp-7) 0;
  border-bottom: 1px solid var(--border-soft);
}
@media (min-width: 1025px) {
  .vendor-hero { grid-template-columns: auto 1fr; gap: var(--sp-7); }
}
.vendor-hero-mark {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 120px;
  line-height: 1;
  color: var(--color-primary-700);
  letter-spacing: -0.02em;
}
.vendor-hero-name {
  font-family: var(--ff-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--color-primary-700);
  margin-bottom: var(--sp-2);
  letter-spacing: 0.01em;
}

/* Support pages — 2-col form card layout */
.support-grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}
@media (min-width: 1025px) { .support-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } }

.support-card {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  box-shadow: var(--shadow-1);
}
.support-card-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.support-card-head .head-icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  background: var(--color-accent-50);
  color: var(--color-accent-700);
  display: flex; align-items: center; justify-content: center;
}
.support-card-head h3 { margin-bottom: 2px; }
.support-card-head p { color: var(--text-muted); font-size: var(--fs-body-sm); }

.form-submit {
  margin-top: var(--sp-4);
}

.form-thanks {
  background: var(--color-accent-50);
  border-radius: var(--radius-md);
  padding: var(--sp-7);
  text-align: center;
  border: 1px solid var(--color-accent-100);
}
.form-thanks-inner svg {
  width: 56px; height: 56px;
  padding: 14px;
  margin: 0 auto var(--sp-4);
  color: #fff;
  background: var(--accent);
  border-radius: 50%;
  box-sizing: content-box;
}
.form-thanks h4 { margin-bottom: var(--sp-2); }
.form-thanks p { color: var(--text-muted); }

/* Policy pages */
.policy-split {
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: 1fr;
}
@media (min-width: 1025px) { .policy-split { grid-template-columns: 260px 1fr; } }

.policy-toc {
  position: sticky;
  top: 120px;
  align-self: start;
}
.policy-toc h6 {
  font-family: var(--ff-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-3);
}
.policy-toc ul { display: flex; flex-direction: column; gap: 8px; }
.policy-toc a {
  font-size: 14px;
  color: var(--text-body);
  padding-left: var(--sp-3);
  border-left: 2px solid var(--border-soft);
  transition: all var(--dur-base) var(--ease-out);
}
.policy-toc a:hover,
.policy-toc a.is-active { color: var(--color-primary-700); border-left-color: var(--color-primary-700); font-weight: 600; }

.policy-body {
  max-width: 760px;
  line-height: 1.8;
}
.policy-body h3 {
  position: relative;
  padding-left: var(--sp-4);
  margin: var(--sp-7) 0 var(--sp-4);
}
.policy-body h3::before {
  content: "";
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 4px;
  background: var(--accent);
  border-radius: var(--radius-pill);
}
.policy-body p { color: var(--text-body); margin-bottom: var(--sp-3); }
.policy-body ul, .policy-body ol { padding-left: var(--sp-5); margin-bottom: var(--sp-3); }
.policy-body ul li { list-style: disc; margin-bottom: 6px; }
.policy-body ol li { list-style: decimal; margin-bottom: 6px; }
.policy-body .policy-meta {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  border-top: 1px solid var(--border-soft);
  padding-top: var(--sp-4);
  margin-top: var(--sp-6);
}

/* ============================================================
   SUBPAGES — info list (definition list card) & intro visual
   ============================================================ */

/* Definition list card — 회사 정보, 제품 스펙 등 라벨/값 쌍 */
.info-list {
  display: grid;
  gap: 0;
  border-top: 2px solid var(--color-primary-700);
}
.info-list > div {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-2);
  border-bottom: 1px solid var(--border-soft);
  align-items: start;
}
.info-list dt {
  font-family: var(--ff-display);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.info-list dd {
  color: var(--text-strong);
  line-height: var(--lh-loose);
}
@media (max-width: 640px) {
  .info-list > div {
    grid-template-columns: 1fr;
    gap: var(--sp-2);
    padding: var(--sp-3) 0;
  }
  .info-list dt { font-size: 11px; }
}

/* Intro visual image (used inside .intro-split right column) */
.intro-visual img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  display: block;
}

/* Customer grid (customers.html) — logo + name cards */
.customer-cat-title {
  font-family: var(--ff-display);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: var(--sp-7) 0 var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border-soft);
}
.customer-cat-title:first-of-type { margin-top: var(--sp-3); }

.customer-grid {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 641px)  { .customer-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1025px) { .customer-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1441px) { .customer-grid { grid-template-columns: repeat(5, 1fr); } }

.customer-cell {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  text-align: center;
  min-height: 120px;
  color: inherit;
  text-decoration: none;
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
a.customer-cell { cursor: pointer; }
.customer-cell:hover {
  border-color: var(--color-primary-400);
  box-shadow: var(--shadow-1);
  transform: translateY(-2px);
}
.customer-cell img {
  display: block;
  width: 100%;
  max-width: 160px;
  height: 44px;
  object-fit: contain;
}
.customer-cell-name {
  font-size: var(--fs-caption);
  color: var(--text-strong);
  font-weight: var(--fw-medium);
}

/* Partner card (partner.html) — logo + category + name + desc */
.partner-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}
@media (min-width: 641px)  { .partner-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1025px) { .partner-grid { grid-template-columns: repeat(4, 1fr); } }

.partner-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  text-decoration: none;
  color: inherit;
  min-height: 220px;
  transition:
    transform var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
@media (hover: hover) {
  .partner-card:hover {
    border-color: var(--color-primary-400);
    box-shadow: 0 8px 24px rgba(107,68,35,.12);
    transform: translateY(-4px);
  }
}

.partner-card-logo {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: var(--sp-3);
}
.partner-card-logo img {
  max-height: 100%;
  max-width: 75%;
  object-fit: contain;
  object-position: left center;
}
.partner-card-cat {
  display: block;
  font-family: var(--ff-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.partner-card-name {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(15px, 1.4vw, 19px);
  letter-spacing: -0.02em;
  color: var(--color-primary-700);
}
.partner-card-desc {
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
  line-height: var(--lh-loose);
  margin-top: auto;
}

/* ============================================================
   PRODUCTS subpages (products01~08) — environment & lineup cards
   ============================================================ */

/* Deployment environment cards (visual-first: image + label).
   2-column on desktop so the embedded vendor diagrams keep readable text. */
.product-env-grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}
@media (min-width: 1025px) { .product-env-grid { grid-template-columns: repeat(2, 1fr); } }

.product-env-card {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  transition:
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}
@media (hover: hover) {
  .product-env-card:hover {
    border-color: var(--color-primary-400);
    box-shadow: var(--shadow-1);
    transform: translateY(-2px);
  }
}
.product-env-card-img {
  background: var(--bg-section);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
}
.product-env-card-img img {
  width: 100%;
  height: auto;
  display: block;
}
.product-env-card h4 {
  font-size: 15px;
  margin: 0;
  padding: 0 var(--sp-2) var(--sp-2);
}
.product-env-card h4 {
  font-size: 15px;
  margin: 0;
}

/* Product lineup cards (real product SKUs) */
.product-lineup-grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}
@media (min-width: 641px)  { .product-lineup-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1025px) { .product-lineup-grid { grid-template-columns: repeat(3, 1fr); } }

.product-lineup-card {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}
@media (hover: hover) {
  .product-lineup-card:hover {
    border-color: var(--color-primary-400);
    box-shadow: 0 8px 24px rgba(107,68,35,.10);
    transform: translateY(-3px);
  }
}
.product-lineup-card-img {
  background: var(--bg-section);
  aspect-ratio: 16/10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}
.product-lineup-card-img img {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
}
.product-lineup-card-body {
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex: 1;
}
.product-lineup-card-body h3 {
  font-size: 18px;
  font-weight: var(--fw-bold);
  color: var(--color-primary-700);
  margin: 0;
}
.product-lineup-card-body ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: 0;
  margin: 0;
}
.product-lineup-card-body ul li {
  font-size: var(--fs-body-sm);
  color: var(--text-body);
  line-height: var(--lh-loose);
  padding-left: 14px;
  position: relative;
}
.product-lineup-card-body ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent-500);
}

/* ============================================================
   Product line panels & placeholders
   (탭 자체는 layout.css의 .sub-nav 시스템에 흡수됨 —
    sub-nav 두 번째 row에서 [data-product-tabs]로 표시)
   ============================================================ */

/* Panels — only one visible at a time */
.product-line-panel[hidden] { display: none; }

/* Placeholder for product lines whose content is not yet authored */
.product-line-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-9) var(--sp-5);
  border: 1px dashed var(--border-soft);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  background: var(--bg-section);
}
.product-line-placeholder h3 {
  color: var(--text-strong);
  margin-bottom: var(--sp-2);
}
.product-line-placeholder p { max-width: 48ch; line-height: var(--lh-loose); }
.product-line-placeholder .placeholder-tag {
  display: inline-block;
  margin-bottom: var(--sp-3);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: rgba(107,68,35,.08);
  color: var(--color-primary-700);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
}

/* Solution diagram image (full-width hero diagram inside content-block).
   Many vendor diagrams ship with white text on a dark canvas, so we frame
   them on a dark background instead of the section's neutral one. */
.solution-diagram {
  margin-top: var(--sp-5);
  border-radius: var(--radius-md);
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(21,19,15,.96) 0%, rgba(75,46,21,.88) 100%),
    var(--bg-dark);
  display: flex;
  justify-content: center;
  padding: var(--sp-6);
}
.solution-diagram img {
  max-width: 100%;
  height: auto;
}
.solution-diagram + .solution-diagram { margin-top: var(--sp-4); }

/* ============================================================
   Contact / Support variant components (contactus, qna01, qna02)
   ------------------------------------------------------------
   Modern card-based layout with icon chips, rounded form inputs,
   side-by-side info + inquiry form.
   ============================================================ */

/* 2-column: left (info cards + map) / right (inquiry form) */
.contact-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--sp-7);
  align-items: start;
}
@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; gap: var(--sp-5); }
}

/* Eyebrow inline marker (GET IN TOUCH style) */
.eyebrow-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--ff-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary-700);
  margin-bottom: var(--sp-3);
}
.eyebrow-mark::before {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--color-accent-500);
  border-radius: 2px;
}

/* Info card stack (icon chip + label + text) */
.info-card-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}
.info-card {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
}
.info-card-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg-section);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-700);
}
.info-card-icon svg { width: 20px; height: 20px; }
.info-card-body .info-card-label {
  font-weight: 700;
  font-size: var(--fs-body);
  color: var(--text-strong);
  margin-bottom: 4px;
}
.info-card-body .info-card-text {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.55;
}
.info-card-body .info-card-text ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Map preview placeholder card (variant) */
.map-card {
  margin-top: var(--sp-5);
  background: var(--bg-section);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.map-card img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}
.map-card-label {
  margin-top: var(--sp-3);
  font-size: 13px;
  display: inline-block;
  padding: 6px 12px;
  background: #fff;
  border-radius: 999px;
  color: var(--text-strong);
  font-weight: 600;
}

/* Form card (rounded, with accent title bar) */
.form-card {
  background: var(--bg-section);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
}

/* Form success — shown after submission (DB-less, JS-driven) */
.form-success {
  background: var(--bg-section);
  border-radius: var(--radius-lg);
  padding: var(--sp-7) var(--sp-6);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}
.form-success[hidden] { display: none; }
.form-success-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--color-accent-500);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-2);
}
.form-success-icon svg { width: 40px; height: 40px; }
.form-success h3 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: var(--text-strong);
}
.form-success p {
  margin: 0;
  color: var(--text-muted);
  max-width: 480px;
}
.form-success-actions {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  flex-wrap: wrap;
  justify-content: center;
}
.form-card-title {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-strong);
  margin: 0 0 var(--sp-5) 0;
}
.form-card-title::before {
  content: "";
  width: 28px;
  height: 3px;
  background: var(--color-accent-500);
  border-radius: 2px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
}

.form-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong);
  margin-bottom: 6px;
}
.form-field label .req { color: #c0392b; margin-left: 2px; }
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field input[type="date"],
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: #fff;
  font-size: 14px;
  font-family: inherit;
  color: var(--text-strong);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  box-sizing: border-box;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-primary-700);
  box-shadow: 0 0 0 3px rgba(107, 68, 35, 0.12);
}
.form-field textarea { resize: vertical; min-height: 140px; line-height: 1.6; }
.form-field input::placeholder,
.form-field textarea::placeholder {
  color: #b5a89b;
}

.form-agree {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--sp-4);
  font-size: 13px;
  color: var(--text-muted);
}
.form-agree input[type="checkbox"] { margin: 0; }
.form-agree a { color: var(--color-primary-700); text-decoration: underline; }

.form-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: var(--sp-5);
  padding: 16px 24px;
  background: var(--color-primary-700);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.form-submit:hover { background: #5a3819; transform: translateY(-1px); }
.form-submit svg { width: 16px; height: 16px; }
.form-submit.form-submit--accent { background: var(--color-accent-500); }
.form-submit.form-submit--accent:hover { background: #5e9440; }

/* Legal text reading layout (provision / privacy) */
.legal-doc {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--sp-6) 0;
  color: var(--text-strong);
  line-height: 1.75;
  font-size: 15px;
}
.legal-doc h3 {
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-3);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary-700);
  border-left: 3px solid var(--color-accent-500);
  padding-left: var(--sp-3);
}
.legal-doc h3.sub {
  border-left: none;
  padding-left: 0;
  margin-top: var(--sp-5);
  font-size: 16px;
  color: var(--text-strong);
}
.legal-doc h3.sub a { color: inherit; text-decoration: none; cursor: default; }
.legal-doc p {
  margin: var(--sp-3) 0;
  color: var(--text-body);
}
.legal-doc ol, .legal-doc ul {
  margin: var(--sp-3) 0;
  padding-left: var(--sp-4);
  color: var(--text-body);
}
.legal-doc ol li, .legal-doc ul li {
  margin-bottom: 6px;
  line-height: 1.7;
}
.legal-doc ol { list-style: none; padding-left: 0; }
.legal-doc ol > li { padding-left: var(--sp-4); position: relative; }
.legal-doc .num {
  display: inline-block;
  min-width: 24px;
  margin-right: 6px;
  color: var(--color-primary-700);
  font-weight: 600;
}
.legal-doc .bull {
  display: inline-block;
  margin-right: 8px;
  color: var(--color-accent-500);
}
.legal-doc ul.list { list-style: none; padding-left: 0; }
.legal-doc ul.list li { padding-left: var(--sp-3); }
.legal-doc ul.list ul.list { margin-top: 4px; padding-left: var(--sp-4); }
.legal-doc table.privacy_table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sp-4) 0;
  font-size: 13px;
}
.legal-doc table.privacy_table th,
.legal-doc table.privacy_table td {
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  text-align: center;
  vertical-align: middle;
}
.legal-doc table.privacy_table thead th {
  background: var(--color-primary-700);
  color: #fff;
  font-weight: 600;
}
.legal-doc table.privacy_table tbody td:first-child {
  background: var(--bg-section);
  font-weight: 600;
}
.legal-doc .sup {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-soft);
  color: var(--text-muted);
  font-size: 13px;
}

/* =========================================================
   ISOVALENT (products09) — page-scoped components
   ========================================================= */

/* Isovalent brand tokens */
:root {
  --iso-purple:    #6c5ce7;
  --iso-cyan:      #4ec9b0;
  --iso-ink:       #1e1b4b;
  --iso-deep:      #0f0c2e;
}

/* Hero — deep indigo with Cilium purple + eBPF cyan glow */
.sub-hero.sub-hero--isovalent {
  background:
    radial-gradient(ellipse 60% 80% at 78% 35%, rgba(108,92,231,0.38) 0%, transparent 60%),
    radial-gradient(ellipse 50% 70% at 18% 80%, rgba(78,201,176,0.22) 0%, transparent 60%),
    linear-gradient(180deg, var(--iso-ink) 0%, var(--iso-deep) 100%);
}

/* Hero badge row (CNCF Graduated + A Cisco Company) */
.iso-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.iso-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
}
.iso-badge--accent { background: var(--color-accent-500); border-color: transparent; }

/* 3-fact overview grid */
.fact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}
.fact-card {
  position: relative;
  padding: var(--sp-6);
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.fact-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.fact-card__num {
  display: inline-block;
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 14px;
  color: var(--color-accent-600);
  letter-spacing: .1em;
  margin-bottom: var(--sp-3);
}
.fact-card h3 {
  font-size: 18px;
  margin: 0 0 var(--sp-3);
  color: var(--text-strong);
}
.fact-card p {
  margin: 0;
  font-size: 14px;
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}
@media (max-width: 900px) { .fact-grid { grid-template-columns: 1fr; } }

/* Customer logo strip (grayscale → color on hover) */
/* 10-logo balanced layout — 5×2 (desktop) / 5×2 (tablet) / 2×5 (mobile) */
.logo-strip.logo-strip--10 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 641px)  { .logo-strip.logo-strip--10 { grid-template-columns: repeat(5, 1fr); } }

.logo-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--sp-5);
  align-items: center;
  justify-items: center;
  margin-top: var(--sp-7);
  padding: var(--sp-6) var(--sp-5);
  background: var(--bg-section);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
}
.logo-strip__item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
}
.logo-strip__item img {
  max-height: 100%;
  max-width: 140px;
  object-fit: contain;
  filter: grayscale(1) opacity(.6);
  transition: filter var(--dur-base) var(--ease-out);
}
.logo-strip__item:hover img { filter: grayscale(0) opacity(1); }
.logo-strip__label {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--text-muted);
  margin-bottom: var(--sp-2);
}

/* 4-card Enterprise Platform grid with icons */
.platform-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}
.platform-card {
  display: flex;
  flex-direction: column;
  padding: var(--sp-6);
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.platform-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-accent-500);
  box-shadow: var(--shadow-2);
}
.platform-card__icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  background: var(--color-accent-50);
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-4);
  color: var(--color-accent-700);
}
.platform-card__icon svg { width: 32px; height: 32px; }
.platform-card h4 {
  font-size: 18px;
  margin: 0 0 var(--sp-3);
  color: var(--text-strong);
}
.platform-card p {
  margin: 0;
  font-size: 14px;
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}
@media (max-width: 1024px) { .platform-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .platform-grid { grid-template-columns: 1fr; } }

/* Horizontal pillar row (Connectivity / Security / Observability) */
.pillar-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px dashed var(--border-soft);
}
.pillar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--sp-4) var(--sp-5);
  border-left: 3px solid var(--color-accent-500);
  background: var(--bg-section);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.pillar__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--color-accent-700);
}
.pillar h5 {
  margin: 0;
  font-size: 16px;
  color: var(--text-strong);
}
.pillar p {
  margin: 0;
  font-size: 13px;
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}
@media (max-width: 900px) { .pillar-row { grid-template-columns: 1fr; } }

/* Vendor spotlight — full-bleed section for Cilium or Tetragon */
.vendor-spotlight {
  padding: var(--sp-10) 0;
}
.vendor-spotlight--dark {
  background: linear-gradient(180deg, #1b2530 0%, #0f1821 100%);
  color: var(--text-invert);
}
.vendor-spotlight--dark .section-head h2,
.vendor-spotlight--dark .vendor-spotlight__lead,
.vendor-spotlight--dark .vendor-spotlight__head h2 { color: #fff; }
.vendor-spotlight--dark .eyebrow { color: var(--color-accent-300); }
.vendor-spotlight--dark .underline-mark { background: var(--color-accent-500); }
.vendor-spotlight--dark .vendor-spotlight__sub { color: rgba(255,255,255,.78); }

/* Mint-tint variant — used to gently differentiate one light section from another */
.vendor-spotlight--tint {
  background: linear-gradient(180deg, var(--bg-page) 0%, var(--color-accent-50) 18%, var(--color-accent-50) 100%);
}

.vendor-spotlight__head {
  text-align: center;
  margin-bottom: var(--sp-6);
}
.vendor-spotlight__sub {
  margin: 0 auto;
  max-width: 72ch;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}
.vendor-spotlight__lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  margin: 0 auto var(--sp-6);
  max-width: 80ch;
  text-align: center;
}

/* Meta pill row (CNCF Graduated / sub-project / stars etc.) */
.vendor-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-4);
}
.vendor-meta__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: rgba(111,168,76,.16);
  border: 1px solid rgba(111,168,76,.4);
  color: var(--color-accent-300);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
}
.vendor-spotlight--light .vendor-meta__pill {
  background: var(--color-accent-50);
  border-color: var(--color-accent-300);
  color: var(--color-accent-700);
}

/* Use case chip groups (Cilium 9+4+3) */
.usecase-groups {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  margin: var(--sp-6) 0;
}
.usecase-group {
  padding: var(--sp-5);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-lg);
}
.vendor-spotlight--light .usecase-group {
  background: var(--bg-section);
  border-color: var(--border-soft);
}
.usecase-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.vendor-spotlight--light .usecase-group__head { border-bottom-color: var(--border-soft); }
.usecase-group__title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--color-accent-300);
  text-transform: uppercase;
}
.vendor-spotlight--light .usecase-group__title { color: var(--color-accent-700); }
.usecase-group__count {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 22px;
  color: #fff;
}
.vendor-spotlight--light .usecase-group__count { color: var(--text-strong); }
.usecase-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.usecase-chips li {
  padding: 5px 10px;
  font-size: 12.5px;
  font-weight: 500;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.92);
}
.vendor-spotlight--light .usecase-chips li {
  background: #fff;
  border-color: var(--border-soft);
  color: var(--text-body);
}
@media (max-width: 900px) { .usecase-groups { grid-template-columns: 1fr; } }

/* Feature icon grid (Tetragon 6 differentiators) */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  margin: var(--sp-6) 0;
}
.feature-card {
  padding: var(--sp-5);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-lg);
  transition: transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.feature-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-accent-500);
}
.feature-card__icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  background: rgba(111,168,76,.14);
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-4);
  color: var(--color-accent-300);
}
.feature-card__icon svg {
  width: 28px;
  height: 28px;
}
.feature-card h4 {
  font-size: 16px;
  margin: 0 0 var(--sp-2);
  color: #fff;
}
.feature-card p {
  margin: 0;
  font-size: 13.5px;
  line-height: var(--lh-relaxed);
  color: rgba(255,255,255,.78);
}
@media (max-width: 900px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .feature-grid { grid-template-columns: 1fr; } }

/* Feature card — light variant overrides */
.vendor-spotlight--light .feature-card {
  background: var(--bg-card);
  border-color: var(--border-soft);
  box-shadow: var(--shadow-1);
}
.vendor-spotlight--light .feature-card h4 { color: var(--text-strong); }
.vendor-spotlight--light .feature-card p  { color: var(--text-body); }
.vendor-spotlight--light .feature-card__icon {
  background: var(--color-accent-50);
  color: var(--color-accent-700);
}

/* Feature chip row (Tetragon 7 Features) */
.feature-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-4) 0;
}
.feature-chip-row .chip-label {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-pill);
}
.vendor-spotlight--light .feature-chip-row .chip-label {
  color: var(--text-body);
  background: #ffffff;
  border-color: var(--border-soft);
}
.feature-chip-row .chip-label::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--color-accent-500);
  transform: translateY(-1px);
}

/* Customer logo band (inside dark vendor spotlight) */
.customer-band {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,.12);
}
.vendor-spotlight--light .customer-band { border-top-color: var(--border-soft); }
.customer-band__label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--color-accent-300);
  margin-bottom: var(--sp-4);
}
.vendor-spotlight--light .customer-band__label { color: var(--color-accent-700); }
.customer-band__logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--sp-5);
  align-items: center;
  justify-items: center;
}
.customer-band__logos img {
  max-height: 36px;
  max-width: 130px;
  object-fit: contain;
  /* Default: light background — dark silhouette for consistent contrast.
     Mixed-color logos (white PNG vs gray PNG) all flatten to the same tone. */
  filter: brightness(0) opacity(.55);
  transition: filter var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.vendor-spotlight--dark .customer-band__logos img {
  /* Dark background — white silhouette */
  filter: brightness(0) invert(1) opacity(.7);
}
.customer-band__logos img:hover { filter: brightness(0) opacity(.85); }
.vendor-spotlight--dark .customer-band__logos img:hover {
  filter: brightness(0) invert(1) opacity(1);
}

/* Boxed variant — cream-bg card wrap with center-aligned label and N-column grid */
.customer-band--boxed {
  margin-top: var(--sp-8);
  padding: var(--sp-6);
  background: var(--bg-section);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
}
.customer-band--boxed .customer-band__label {
  text-align: center;
  display: block;
  margin-bottom: var(--sp-5);
  color: var(--color-primary-700);
}
.customer-band__logos--5 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 641px)  { .customer-band__logos--5 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1025px) { .customer-band__logos--5 { grid-template-columns: repeat(5, 1fr); } }

/* How-it-works split (for Tetragon diagram + text) */
.howitworks-split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--sp-7);
  align-items: center;
  margin-top: var(--sp-6);
}
.howitworks-split__visual {
  padding: var(--sp-5);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-lg);
}
.vendor-spotlight--light .howitworks-split__visual {
  background: var(--bg-section);
  border-color: var(--border-soft);
}
.howitworks-split__visual img { width: 100%; height: auto; display: block; }
.howitworks-split__copy h3 {
  font-size: 22px;
  margin: 0 0 var(--sp-3);
  color: #fff;
}
.vendor-spotlight--light .howitworks-split__copy h3 { color: var(--text-strong); }
.howitworks-split__copy p {
  font-size: 15px;
  line-height: var(--lh-relaxed);
  color: rgba(255,255,255,.82);
  margin: 0 0 var(--sp-4);
}
.vendor-spotlight--light .howitworks-split__copy p { color: var(--text-body); }
@media (max-width: 900px) { .howitworks-split { grid-template-columns: 1fr; } }

/* eBPF data-plane inline diagram (Cilium) */
.ebpf-diagram {
  margin-top: var(--sp-6);
  padding: var(--sp-6);
  background: var(--bg-section);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
}
.ebpf-diagram svg { width: 100%; height: auto; display: block; max-width: 960px; margin: 0 auto; }

/* Deployment strip (Enterprise Platform → 배포 옵션) */
.deploy-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}
.deploy-item {
  padding: var(--sp-4);
  text-align: center;
  background: var(--bg-section);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}
.deploy-item__title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: 2px;
}
.deploy-item__desc {
  display: block;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: var(--lh-snug);
}
@media (max-width: 900px) { .deploy-strip { grid-template-columns: repeat(2, 1fr); } }

/* Platform grid — 3 column modifier (for 6-item grids) */
.platform-grid--3col { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .platform-grid--3col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .platform-grid--3col { grid-template-columns: 1fr; }
}

/* =========================================================
   SPLUNK (products10) — page-scoped components
   Reuses Isovalent base (fact-grid, vendor-spotlight, platform-grid,
   customer-band, deploy-strip) with Splunk-brand overrides.
   ========================================================= */

/* Splunk brand tokens */
:root {
  --splunk-pink:    #ED0080;
  --splunk-purple:  #9733FB;
  --splunk-orange:  #FF712B;
  --splunk-ink:     #07182D;
}

/* Splunk page: platform-card hover accent — pink instead of mint */
.splunk-page .platform-card:hover {
  border-color: var(--splunk-pink);
}
.splunk-page .platform-card__icon {
  background: linear-gradient(135deg, rgba(237,0,128,.12) 0%, rgba(151,51,251,.12) 100%);
  color: var(--splunk-purple);
}
.splunk-page .fact-card__num {
  color: var(--splunk-pink);
}

/* Hero — dark navy with pink/purple glow */
.sub-hero.sub-hero--splunk {
  background: radial-gradient(ellipse 60% 80% at 78% 40%, rgba(151,51,251,.35) 0%, transparent 60%),
              radial-gradient(ellipse 50% 70% at 20% 80%, rgba(237,0,128,.28) 0%, transparent 60%),
              linear-gradient(180deg, var(--splunk-ink) 0%, #0a2540 100%);
}
.splunk-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.splunk-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
}
.splunk-badge--brand {
  background: linear-gradient(90deg, var(--splunk-pink) 0%, var(--splunk-purple) 100%);
  border-color: transparent;
}

/* Gradient text utility — Splunk brand pink→purple */
.splunk-gradient-text {
  background: linear-gradient(90deg, var(--splunk-pink) 0%, var(--splunk-purple) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* Hero stats strip — big number cards (111% / 64% / 55%) */
.splunk-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}
.splunk-stat-card {
  position: relative;
  padding: var(--sp-6);
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out);
}
.splunk-stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.splunk-stat-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--splunk-pink) 0%, var(--splunk-purple) 100%);
}
.splunk-stat-card__num {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 48px;
  line-height: 1;
  margin-bottom: var(--sp-3);
  background: linear-gradient(90deg, var(--splunk-pink) 0%, var(--splunk-purple) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.splunk-stat-card__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--color-primary-700);
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}
.splunk-stat-card p {
  margin: 0;
  font-size: 14px;
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}
@media (max-width: 900px) { .splunk-stat-grid { grid-template-columns: 1fr; } }

/* Pillar cards (SIEM / SOAR / UEBA) — larger than generic .pillar */
.splunk-pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}
.splunk-pillar {
  position: relative;
  padding: var(--sp-6);
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.splunk-pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.splunk-pillar__abbr {
  display: inline-block;
  padding: 4px 12px;
  font-family: var(--ff-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
  color: #fff;
  background: linear-gradient(135deg, var(--splunk-pink) 0%, var(--splunk-purple) 100%);
  border-radius: var(--radius-pill);
  margin-bottom: var(--sp-4);
}
.splunk-pillar h3 {
  font-size: 20px;
  margin: 0 0 var(--sp-3);
  color: var(--text-strong);
  line-height: var(--lh-snug);
}
.splunk-pillar p {
  margin: 0 0 var(--sp-4);
  font-size: 14px;
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}
.splunk-pillar ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 13.5px;
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}
.splunk-pillar ul li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 6px;
}
.splunk-pillar ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--splunk-pink);
}
@media (max-width: 1024px) { .splunk-pillar-grid { grid-template-columns: 1fr; } }

/* Portfolio trio (C안 — Enterprise Security / Observability / Platform) */
.splunk-portfolio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}
.splunk-portfolio-card {
  position: relative;
  padding: var(--sp-5);
  background: var(--bg-section);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.splunk-portfolio-card:hover {
  border-color: var(--splunk-pink);
  transform: translateY(-2px);
}
.splunk-portfolio-card.is-current {
  background: linear-gradient(135deg, rgba(237,0,128,.08) 0%, rgba(151,51,251,.08) 100%);
  border-color: var(--splunk-purple);
}
.splunk-portfolio-card__tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--splunk-pink);
  margin-bottom: var(--sp-2);
}
.splunk-portfolio-card.is-current .splunk-portfolio-card__tag { color: var(--splunk-purple); }
.splunk-portfolio-card h4 {
  font-size: 17px;
  margin: 0 0 6px;
  color: var(--text-strong);
}
.splunk-portfolio-card p {
  margin: 0 0 var(--sp-3);
  font-size: 13px;
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}
.splunk-portfolio-card__link {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--splunk-pink);
  text-decoration: none;
}
.splunk-portfolio-card__link::after {
  content: " →";
  transition: transform var(--dur-fast) var(--ease-out);
  display: inline-block;
}
.splunk-portfolio-card:hover .splunk-portfolio-card__link::after { transform: translateX(3px); }
@media (max-width: 900px) { .splunk-portfolio { grid-template-columns: 1fr; } }

/* ES Essentials vs Premier tier comparison */
.splunk-tier-table {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 0;
  margin-top: var(--sp-6);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-card);
}
.splunk-tier-table__cell {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border-soft);
  font-size: 14px;
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}
.splunk-tier-table__cell:nth-last-child(-n+3) { border-bottom: none; }
.splunk-tier-table__head {
  background: var(--bg-section);
  font-weight: 700;
  color: var(--text-strong);
  text-align: center;
  font-size: 13px;
  letter-spacing: .04em;
}
.splunk-tier-table__head:first-child { text-align: left; }
.splunk-tier-table__feat { color: var(--text-strong); font-weight: 600; }
.splunk-tier-table__check {
  text-align: center;
  color: var(--color-accent-600);
  font-size: 20px;
  font-weight: 700;
}
.splunk-tier-table__dash {
  text-align: center;
  color: var(--color-neutral-400);
  font-size: 20px;
}
.splunk-tier-table__cell--premier { background: rgba(151,51,251,.04); }
.splunk-tier-table__head--premier {
  background: linear-gradient(135deg, var(--splunk-pink) 0%, var(--splunk-purple) 100%);
  color: #fff;
}
@media (max-width: 900px) {
  .splunk-tier-table { grid-template-columns: 1fr; }
  .splunk-tier-table__head { text-align: left; }
  .splunk-tier-table__check, .splunk-tier-table__dash { text-align: left; padding-left: var(--sp-5); }
}

/* Splunk — light-context howitworks (ES #platform section has bg-section) */
.splunk-page #platform .howitworks-split__visual {
  background: #fff;
  border: 1px solid var(--border-soft);
  padding: var(--sp-4);
}

/* Splunk — howitworks-split reverse variant (visual 우측 배치, Detection Studio용) */
.splunk-page #platform .howitworks-split.howitworks-split--reverse .howitworks-split__copy {
  order: 1;
}
.splunk-page #platform .howitworks-split.howitworks-split--reverse .howitworks-split__visual {
  order: 2;
  background: #0f0a1a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
}
.splunk-page #platform .howitworks-split.howitworks-split--reverse .howitworks-split__visual img {
  width: 100%;
  height: auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  display: block;
}
.splunk-page .howitworks-split__credit {
  text-align: right;
  width: 100%;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  margin: var(--sp-2) 0 0;
  letter-spacing: 0.02em;
}
@media (max-width: 900px) {
  .splunk-page #platform .howitworks-split.howitworks-split--reverse .howitworks-split__copy,
  .splunk-page #platform .howitworks-split.howitworks-split--reverse .howitworks-split__visual {
    order: initial;
  }
}
.splunk-page #platform .howitworks-split__copy h3 { color: var(--text-strong); }
.splunk-page #platform .howitworks-split__copy p  { color: var(--text-body); }
.splunk-page #platform .feature-chip-row .chip-label {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  color: var(--text-body);
}

/* Splunk — portfolio card logo (is-current only) */
.splunk-portfolio-card__logo {
  display: block;
  height: 20px;
  width: auto;
  margin-bottom: var(--sp-2);
}

/* =========================================================
   XERXES (products11) — page-scoped components
   Dark navy theme with cyan/green neon accents.
   Reuses fact-grid, splunk-stat-*, splunk-pillar-*, howitworks-split,
   splunk-tier-table, pillar-row, cta-strip with dark overrides.
   ========================================================= */

/* Xerxes brand tokens */
:root {
  --xerxes-cyan:    #00BFFF;
  --xerxes-green:   #00E676;
  --xerxes-ink:     #0A0A0A;
  --xerxes-navy:    #0B1929;
  --xerxes-surface: rgba(255,255,255,0.04);
  --xerxes-border:  rgba(0,191,255,0.22);
}

/* Dark body scope */
body.xerxes-page {
  background: var(--xerxes-ink);
  color: #e8eef5;
}
body.xerxes-page .content-block { background: transparent; }
body.xerxes-page .section-head h2,
body.xerxes-page .section-head h3 { color: #ffffff; }
body.xerxes-page .section-head .eyebrow { color: var(--xerxes-cyan); }
body.xerxes-page .section-head .section-desc { color: rgba(232,238,245,0.78); }
body.xerxes-page .section-head .underline-mark { background: var(--xerxes-cyan); }

/* Card surfaces on dark */
body.xerxes-page .fact-card,
body.xerxes-page .splunk-stat-card,
body.xerxes-page .splunk-pillar,
body.xerxes-page .platform-card,
body.xerxes-page .splunk-portfolio-card {
  background: var(--xerxes-surface);
  border: 1px solid var(--xerxes-border);
  box-shadow: 0 8px 24px rgba(0,0,0,0.42);
  color: #e8eef5;
}
body.xerxes-page .fact-card h3,
body.xerxes-page .fact-card h4,
body.xerxes-page .splunk-stat-card h3,
body.xerxes-page .splunk-pillar h3,
body.xerxes-page .platform-card h3,
body.xerxes-page .platform-card h4 { color: #ffffff; }
body.xerxes-page .fact-card p,
body.xerxes-page .splunk-stat-card p,
body.xerxes-page .splunk-pillar p,
body.xerxes-page .splunk-pillar ul,
body.xerxes-page .platform-card p { color: rgba(232,238,245,0.78); }
body.xerxes-page .fact-card__num,
body.xerxes-page .splunk-stat-card__label { color: var(--xerxes-cyan); }
body.xerxes-page .splunk-stat-card::before {
  background: linear-gradient(90deg, var(--xerxes-cyan) 0%, var(--xerxes-green) 100%);
}
body.xerxes-page .splunk-stat-card__num {
  background: linear-gradient(90deg, var(--xerxes-cyan) 0%, var(--xerxes-green) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.xerxes-page .splunk-pillar__abbr {
  background: linear-gradient(135deg, var(--xerxes-cyan) 0%, var(--xerxes-green) 100%);
}
body.xerxes-page .splunk-pillar ul li::before { background: var(--xerxes-cyan); }
body.xerxes-page .platform-card__icon {
  background: rgba(0,191,255,0.12);
  color: var(--xerxes-cyan);
}

/* Hero */
.sub-hero--xerxes {
  position: relative;
  color: #fff;
  background-color: var(--xerxes-navy);
  background-image:
    radial-gradient(ellipse 60% 80% at 78% 40%, rgba(0,191,255,0.30) 0%, transparent 60%),
    radial-gradient(ellipse 50% 70% at 20% 80%, rgba(0,230,118,0.22) 0%, transparent 60%),
    linear-gradient(180deg, rgba(10,10,10,0.82) 0%, rgba(11,25,41,0.94) 100%),
    url("../img/contents/xerxes/hero-bg.jpg");
  background-size: cover;
  background-position: center;
}
.xerxes-hero-inner { position: relative; z-index: 2; }
.xerxes-hero-logo {
  height: 44px;
  width: auto;
  margin-bottom: var(--sp-3);
  filter: drop-shadow(0 0 18px rgba(0,191,255,0.45));
}

/* Gradient text */
.xerxes-gradient-text {
  background: linear-gradient(90deg, var(--xerxes-cyan) 0%, var(--xerxes-green) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* Xerxes badge (variant of splunk-badge) */
body.xerxes-page .splunk-badge {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
}
body.xerxes-page .splunk-badge--brand {
  background: linear-gradient(90deg, var(--xerxes-cyan) 0%, var(--xerxes-green) 100%);
  color: #0a1929;
  border-color: transparent;
}

/* EQG pillar — hero variant with top image area */
.xerxes-pillar--hero {
  position: relative;
  padding: 0;
  overflow: hidden;
}
.xerxes-pillar--hero .xerxes-pillar__visual {
  position: relative;
  height: 180px;
  overflow: hidden;
  background: #000;
}
.xerxes-pillar--hero .xerxes-pillar__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.78;
}
.xerxes-pillar--hero .xerxes-pillar__visual::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(10,10,10,0.65) 100%);
}
.xerxes-pillar--hero .xerxes-pillar__body {
  padding: var(--sp-6);
}

/* AI Infrastructure spec grid */
.xerxes-spec-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-7);
}
.xerxes-spec-card {
  padding: var(--sp-6);
  background: var(--xerxes-surface);
  border: 1px solid var(--xerxes-border);
  border-radius: var(--radius-lg);
}
.xerxes-spec-card__num {
  font-family: var(--ff-display);
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  margin-bottom: var(--sp-1);
}
.xerxes-spec-card__unit {
  font-size: 14px;
  font-weight: 600;
  color: var(--xerxes-cyan);
  margin-bottom: var(--sp-3);
}
.xerxes-spec-card__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  color: rgba(232,238,245,0.6);
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}
.xerxes-spec-card p {
  margin: 0;
  font-size: 13.5px;
  line-height: var(--lh-relaxed);
  color: rgba(232,238,245,0.75);
}
@media (max-width: 900px) { .xerxes-spec-grid { grid-template-columns: 1fr; } }

/* Subsidiaries trio */
.xerxes-subsidiaries {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-7);
}
.xerxes-subsidiary-card {
  padding: var(--sp-5);
  background: var(--xerxes-surface);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-base) var(--ease-out);
}
.xerxes-subsidiary-card:hover {
  border-color: var(--xerxes-cyan);
}
.xerxes-subsidiary-card__region {
  display: inline-block;
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--xerxes-cyan);
  background: rgba(0,191,255,0.10);
  border-radius: var(--radius-pill);
  margin-bottom: var(--sp-3);
}
.xerxes-subsidiary-card h4 {
  font-size: 17px;
  margin: 0 0 6px;
  color: #fff;
}
.xerxes-subsidiary-card p {
  margin: 0;
  font-size: 13px;
  color: rgba(232,238,245,0.75);
}
@media (max-width: 900px) { .xerxes-subsidiaries { grid-template-columns: 1fr; } }

/* Sustainability impact cards */
.xerxes-impact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}
.xerxes-impact-card {
  padding: var(--sp-6);
  text-align: center;
  background: var(--xerxes-surface);
  border: 1px solid var(--xerxes-border);
  border-radius: var(--radius-lg);
}
.xerxes-impact-card__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--sp-4);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(0,191,255,0.18), rgba(0,230,118,0.12));
  color: var(--xerxes-green);
}
.xerxes-impact-card__icon svg { width: 28px; height: 28px; }
.xerxes-impact-card__num {
  font-family: var(--ff-display);
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 6px;
  background: linear-gradient(90deg, var(--xerxes-cyan) 0%, var(--xerxes-green) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.xerxes-impact-card__label {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  margin-bottom: var(--sp-1);
}
.xerxes-impact-card p {
  margin: 0;
  font-size: 12.5px;
  color: rgba(232,238,245,0.7);
}
@media (max-width: 900px) { .xerxes-impact-grid { grid-template-columns: 1fr; } }

/* Tier table on dark */
body.xerxes-page .splunk-tier-table {
  background: var(--xerxes-surface);
  border-color: var(--xerxes-border);
}
body.xerxes-page .splunk-tier-table__cell {
  border-bottom-color: rgba(255,255,255,0.08);
  color: rgba(232,238,245,0.82);
}
body.xerxes-page .splunk-tier-table__feat { color: #fff; }
body.xerxes-page .splunk-tier-table__head {
  background: rgba(255,255,255,0.05);
  color: #fff;
}
body.xerxes-page .splunk-tier-table__head--premier {
  background: linear-gradient(135deg, var(--xerxes-cyan) 0%, var(--xerxes-green) 100%);
  color: #0a1929;
}
body.xerxes-page .splunk-tier-table__cell--premier {
  background: rgba(0,191,255,0.06);
}
body.xerxes-page .splunk-tier-table__check { color: var(--xerxes-green); }
body.xerxes-page .splunk-tier-table__dash { color: rgba(255,255,255,0.35); }

/* Xerxes — all <b>/<strong> always high-contrast white */
body.xerxes-page b,
body.xerxes-page strong {
  color: #ffffff;
  font-weight: 700;
}

/* Xerxes — EQG 4-pillar grid as 2x2 (vs default 3 columns) */
body.xerxes-page #technology .splunk-pillar-grid {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 900px) {
  body.xerxes-page #technology .splunk-pillar-grid { grid-template-columns: 1fr; }
}
/* Xerxes — Overview 4-stat grid as 2x2 (vs default 3 columns) */
body.xerxes-page #overview .splunk-stat-grid {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 640px) {
  body.xerxes-page #overview .splunk-stat-grid { grid-template-columns: 1fr; }
}
/* Premier (Xerxes) column needs brighter green on dark cyan/green tint */
body.xerxes-page .splunk-tier-table__cell--premier {
  background: rgba(0,230,118,0.09);
  color: #e8eef5;
}
body.xerxes-page .splunk-tier-table__cell--premier b {
  color: var(--xerxes-green);
}

/* EQG system diagram (below EQG pillar grid) */
.xerxes-eqg-diagram {
  max-width: 880px;
  margin: 0 auto;
  padding: var(--sp-5);
  background: var(--xerxes-surface);
  border: 1px solid var(--xerxes-border);
  border-radius: var(--radius-lg);
}
.xerxes-eqg-diagram img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}
.xerxes-eqg-diagram__caption {
  text-align: center;
  font-size: 12.5px;
  color: rgba(232,238,245,0.7);
  margin: var(--sp-3) 0 0;
}

/* Pillar-row on dark */
body.xerxes-page .pillar {
  background: var(--xerxes-surface);
  border-left-color: var(--xerxes-cyan);
}
body.xerxes-page .pillar__eyebrow { color: var(--xerxes-cyan); }
body.xerxes-page .pillar h5 { color: #fff; }
body.xerxes-page .pillar p { color: rgba(232,238,245,0.75); }
body.xerxes-page .pillar-row { border-top-color: rgba(255,255,255,0.1); }

/* howitworks on dark */
body.xerxes-page .howitworks-split__visual {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
}
body.xerxes-page .howitworks-split__copy h3 { color: #fff; }
body.xerxes-page .howitworks-split__copy p { color: rgba(232,238,245,0.78); }
body.xerxes-page .feature-chip-row .chip-label {
  background: rgba(0,191,255,0.10);
  border-color: rgba(0,191,255,0.3);
  color: #e8eef5;
}

/* ============================================================
   PTC — brand scope (products08.html)
   PTC green (#6cc04a) + slate (#323b42) — official colors
   ============================================================ */
:root {
  /* PTC 공식 그린 — 기존 #6cc04a는 BITOPLUS accent와 거의 동일해 시각 구분 어려움.
     vivid PTC corporate green으로 교체해 페이지에서 명확히 구분되게 함. */
  --ptc-green:       #00B140;
  --ptc-green-dark:  #007F2C;
  --ptc-slate:       #323b42;
  --ptc-slate-deep:  #1b2328;
}

/* Hero — dark slate with green glow */
.sub-hero.sub-hero--ptc {
  background:
    radial-gradient(ellipse 55% 75% at 80% 35%, rgba(108,192,74,0.28) 0%, transparent 60%),
    radial-gradient(ellipse 45% 65% at 18% 85%, rgba(61,171,73,0.18) 0%, transparent 60%),
    linear-gradient(180deg, var(--ptc-slate) 0%, var(--ptc-slate-deep) 100%);
}

/* Hero brand logo — restrained size (fix: logo was too large on legacy page) */
.ptc-hero-brand {
  margin-bottom: var(--sp-4);
}
.ptc-hero-logo {
  height: 40px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

/* Badge row (reuse .splunk-badge* with PTC brand override) */
.ptc-page .ptc-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.ptc-page .splunk-badge--brand {
  background: linear-gradient(90deg, var(--ptc-green) 0%, var(--ptc-green-dark) 100%);
}

/* Gradient text — PTC green */
.ptc-gradient-text {
  background: linear-gradient(90deg, var(--ptc-green) 0%, var(--ptc-green-dark) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* Override Splunk brand colors used in reused components → PTC green */
.ptc-page .splunk-stat-card::before {
  background: linear-gradient(90deg, var(--ptc-green) 0%, var(--ptc-green-dark) 100%);
}
.ptc-page .splunk-stat-card__num {
  background: linear-gradient(90deg, var(--ptc-green) 0%, var(--ptc-green-dark) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ptc-page .splunk-stat-card__label {
  color: var(--ptc-slate);
}
.ptc-page .fact-card__num {
  color: var(--ptc-green);
}
.ptc-page .platform-card__num {
  color: var(--ptc-green);
}
.ptc-page .platform-card:hover {
  border-color: var(--ptc-green);
}
.ptc-page .platform-card__icon {
  color: var(--ptc-green);
}
.ptc-page .splunk-pillar .platform-card__icon {
  color: var(--ptc-green);
}

/* 4-pillar in Windchill section — 2×2 grid (4 cards with default 3-col template) */
body.ptc-page #windchill .splunk-pillar-grid {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 900px) {
  body.ptc-page #windchill .splunk-pillar-grid { grid-template-columns: 1fr; }
}

/* Overview 4-stat grid as 2×2 */
body.ptc-page #overview .splunk-stat-grid {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 640px) {
  body.ptc-page #overview .splunk-stat-grid { grid-template-columns: 1fr; }
}

/* howitworks chip row — PTC tint */
.ptc-page .feature-chip-row .chip-label {
  background: rgba(108,192,74,0.08);
  border-color: rgba(108,192,74,0.28);
  color: var(--ptc-slate);
}

/* Tier table — premier column = PTC green */
.ptc-page .splunk-tier-table__cell--premier {
  background: rgba(108,192,74,0.06);
}
.ptc-page .splunk-tier-table__cell--premier b {
  color: var(--ptc-green-dark);
}
.ptc-page .splunk-tier-table__head--premier {
  background: linear-gradient(135deg, var(--ptc-green) 0%, var(--ptc-green-dark) 100%);
}

/* Eyebrow & section head accent */
.ptc-page .section-head .eyebrow { color: var(--ptc-green-dark); }
.ptc-page .section-head .underline-mark { background: var(--ptc-green); }

/* PTC 이미지(alm-cimdata.jpg, plm-cad.jpg) 원본이 200×200 픽셀이라 기본
   600px 컨테이너에서 3배 늘어나 흐림 발생. 좌측 영역을 좁히고 이미지를
   원본 크기 근처로 표시해 품질 유지. 우측 copy 영역은 그만큼 넓어짐. */
.ptc-page .howitworks-split {
  grid-template-columns: 360px 1fr;
}
.ptc-page .howitworks-split__visual {
  max-width: 360px;
  padding: var(--sp-6);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ptc-page .howitworks-split__visual img {
  max-width: 240px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .ptc-page .howitworks-split { grid-template-columns: 1fr; }
  .ptc-page .howitworks-split__visual { max-width: 100%; }
}
/* PTC 페이지는 light 배경이라 .howitworks-split__copy의 기본 흰색
   글자가 안 보임. .vendor-spotlight--light 클래스가 마크업에 없어 강제 분기. */
.ptc-page .howitworks-split__copy h3 { color: var(--text-strong); }
.ptc-page .howitworks-split__copy p { color: var(--text-body); }

/* ============================================================
   CISCO — brand scope (products01.html)
   Cisco cyan (#049fd9) + deep navy background
   ============================================================ */
:root {
  --cisco-blue:      #049fd9;
  --cisco-blue-dark: #00689e;
  --cisco-ink:       #0b1d2e;
}

/* Hero — navy with cyan glow + firewall image overlay */
.sub-hero.sub-hero--cisco {
  background:
    radial-gradient(ellipse 60% 80% at 78% 40%, rgba(4,159,217,0.32) 0%, transparent 60%),
    radial-gradient(ellipse 50% 70% at 20% 80%, rgba(0,104,158,0.22) 0%, transparent 60%),
    linear-gradient(180deg, var(--cisco-ink) 0%, #091522 100%);
  position: relative;
  overflow: hidden;
}
.sub-hero.sub-hero--cisco::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/contents/cisco/hero-firewall.jpg") center/cover no-repeat;
  opacity: 0.22;
  mix-blend-mode: screen;
  pointer-events: none;
}
/* kill default monogram on CISCO page */
body.cisco-page .sub-hero::after { display: none; }

/* Hero brand logo (left-top, compact 36px) */
.cisco-hero-brand {
  margin-bottom: var(--sp-4);
}
.cisco-hero-logo {
  height: 36px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

/* Badge row (reuses .splunk-badge with CISCO scope override) */
.cisco-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
body.cisco-page .splunk-badge--brand {
  background: linear-gradient(90deg, var(--cisco-blue) 0%, var(--cisco-blue-dark) 100%);
}

/* Gradient text utility */
.cisco-gradient-text {
  background: linear-gradient(90deg, var(--cisco-blue) 0%, var(--cisco-blue-dark) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* FPR deployment grid: 4→2 columns for readable captions */
body.cisco-page [data-panel="fpr"] .product-env-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
}
@media (max-width: 640px) {
  body.cisco-page [data-panel="fpr"] .product-env-grid {
    grid-template-columns: 1fr;
  }
}
.product-env-card__caption {
  padding: var(--sp-3) var(--sp-4);
  font-weight: 700;
  font-size: 15px;
  color: var(--text-strong);
  border-top: 1px solid var(--border-soft);
  background: var(--bg-card);
  text-align: center;
  letter-spacing: -0.01em;
}
.product-env-card__caption .chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--cisco-blue-dark);
  text-transform: uppercase;
  margin-right: var(--sp-2);
}

/* Section head accent on CISCO */
body.cisco-page .section-head .eyebrow { color: var(--cisco-blue-dark); }

/* =========================================================
   CISCO DUO PANEL (products01.html — Cisco Duo tab)
   Mini banner + overview split + stats row
   ========================================================= */
.duo-panel-banner {
  margin-top: var(--sp-7);
  padding: var(--sp-7) 0;
  background:
    radial-gradient(ellipse 50% 70% at 80% 30%, rgba(0,229,158,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 45% 65% at 18% 82%, rgba(98,158,255,0.14) 0%, transparent 60%),
    linear-gradient(180deg, #0a2540 0%, #062032 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  margin-left: auto;
  margin-right: auto;
}
.duo-panel-banner__inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.duo-panel-banner__logo {
  height: 40px;
  width: auto;
  display: block;
  margin: 0 auto var(--sp-3);
}
.duo-panel-banner__title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.96);
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}
.duo-panel-banner__tagline {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: #fff;
  margin-bottom: var(--sp-4);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
}
.duo-panel-banner__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
}
.duo-badge {
  display: inline-flex;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
}

/* Overview split: text + illustration */
.duo-overview-grid {
  display: grid;
  gap: var(--sp-7);
  align-items: center;
  margin-bottom: var(--sp-7);
}
@media (min-width: 1025px) {
  .duo-overview-grid { grid-template-columns: 1.2fr 1fr; }
}
.duo-overview-grid__copy p {
  margin-bottom: var(--sp-3);
  line-height: var(--lh-loose);
  color: var(--text-body);
}
.duo-overview-grid__copy .duo-lead {
  font-size: var(--fs-body-lg);
  color: var(--text-strong);
}
.duo-overview-grid__copy .duo-quote {
  margin-top: var(--sp-5);
  margin-bottom: 0;
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-3);
  border-left: 3px solid var(--color-accent-500);
  font-style: italic;
  color: var(--text-strong);
}
.duo-overview-grid__visual {
  display: flex;
  justify-content: center;
}
.duo-overview-grid__img {
  width: 100%;
  max-width: 380px;
  height: auto;
  display: block;
}

/* Visual card replaces the marketing photo — DUO branded gradient card */
.duo-visual-card {
  width: 100%;
  max-width: 420px;
  padding: var(--sp-7) var(--sp-6);
  background:
    radial-gradient(ellipse 60% 80% at 80% 20%, rgba(108,192,74,0.18) 0%, transparent 60%),
    linear-gradient(160deg, #f8fafc 0%, #eef6e8 100%);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  text-align: center;
}
.duo-visual-card__icon {
  width: 64px;
  height: 64px;
  display: block;
  margin: 0 auto var(--sp-4);
}
.duo-visual-card__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  margin-bottom: var(--sp-4);
  letter-spacing: -0.01em;
}
.duo-visual-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  text-align: left;
  font-size: 14px;
  color: var(--text-body);
  max-width: 240px;
  margin-left: auto;
  margin-right: auto;
}
.duo-visual-card__list li {
  padding: var(--sp-2) var(--sp-3);
  background: rgba(255,255,255,0.6);
  border-radius: var(--radius-md);
  border: 1px solid rgba(108,192,74,0.18);
}
.duo-visual-card__list strong {
  color: var(--cisco-blue-dark);
  font-weight: var(--fw-bold);
  margin-right: 6px;
}

/* =========================================================
   WORKLOAD pillars — numbered stepper variant of visual card
   (DUO와 다른 시각 언어 — 번호 + 키워드 + 설명)
   ========================================================= */
.workload-pillars {
  width: 100%;
  max-width: 460px;
  padding: var(--sp-6);
  background:
    radial-gradient(ellipse 70% 60% at 100% 0%, rgba(0,107,162,0.10) 0%, transparent 60%),
    linear-gradient(160deg, #f8fafc 0%, #eaf3fb 100%);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
}
.workload-pillars__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  margin-bottom: var(--sp-5);
  letter-spacing: -0.01em;
}
.workload-pillars__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.workload-pillars__list > li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}
.workload-pillars__num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--cisco-blue-dark);
  color: #fff;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0;
}
.workload-pillars__body { flex: 1; min-width: 0; }
.workload-pillars__body strong {
  display: block;
  font-size: 15px;
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  margin-bottom: 2px;
}
.workload-pillars__body p {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* =========================================================
   DEPLOY card — replaces inline-style ul with proper class
   (Workload deployment models 섹션)
   ========================================================= */
.deploy-card__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.deploy-card__tag {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--cisco-blue-dark);
  color: #fff;
  font-family: var(--ff-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  flex-shrink: 0;
}
.deploy-card__head h4 {
  margin: 0;
  font-size: var(--fs-h5);
  letter-spacing: -0.01em;
}
.deploy-card__specs,
.spec-bullets {
  list-style: none;
  padding: 0;
  margin: var(--sp-3) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  font-size: var(--fs-body-sm);
  color: var(--text-body);
}
.deploy-card__specs li,
.spec-bullets li {
  position: relative;
  padding-left: var(--sp-3);
  line-height: 1.5;
}
.deploy-card__specs li::before,
.spec-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--cisco-blue-dark);
}
.deploy-card__specs strong,
.spec-bullets strong {
  color: var(--text-strong);
  font-weight: var(--fw-semibold);
}

/* Customer card meta line — replaces inline-styled <p> in customer stories */
.card-meta {
  color: var(--text-muted);
  font-size: var(--fs-body-sm);
  margin-top: calc(-0.5rem);
}

/* In-card quote — italic with left accent bar (replaces inline style) */
.card-quote {
  margin-top: 1rem;
  padding-left: 1rem;
  border-left: 2px solid var(--color-accent-500);
  color: var(--text-muted);
  font-style: italic;
  font-size: var(--fs-body-sm);
  line-height: 1.5;
}
/* In-card note — small muted footer line (replaces inline style) */
.card-note {
  margin-top: 1rem;
  color: var(--text-muted);
  font-size: var(--fs-body-sm);
}

/* 3-column min-width variant — auto-fit responsive 3 columns from 280px */
.card-list.card-list--3-min { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* =========================================================
   SSE capability grid — 2×2 abbreviation cells
   (DUO list / Workload stepper / Vision list와 다른 시각 패턴)
   ========================================================= */
.sse-capability-grid {
  width: 100%;
  max-width: 460px;
  padding: var(--sp-6);
  background:
    radial-gradient(ellipse 70% 60% at 0% 100%, rgba(0,180,200,0.12) 0%, transparent 60%),
    linear-gradient(160deg, #f8fafc 0%, #e7f5fa 100%);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
}
.sse-capability-grid__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  margin-bottom: var(--sp-5);
  letter-spacing: -0.01em;
}
.sse-capability-grid__cells {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
}
.sse-cell {
  padding: var(--sp-4) var(--sp-3);
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(0,180,200,0.20);
  border-radius: var(--radius-md);
  text-align: center;
}
.sse-cell__abbr {
  display: block;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--cisco-blue-dark);
  letter-spacing: 0.02em;
  margin-bottom: 2px;
}
.sse-cell__name {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: var(--fw-medium);
  line-height: 1.3;
}

/* Stats strip — mobile: horizontal num|label rows; desktop: 4-col centered stack */
.duo-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
  background: var(--bg-section);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (min-width: 1025px) {
  .duo-stats {
    grid-template-columns: repeat(4, 1fr);
    padding: var(--sp-5);
    gap: var(--sp-5);
  }
}
.duo-stats__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border-soft);
}
.duo-stats__item:last-child { border-bottom: none; }
@media (min-width: 1025px) {
  .duo-stats__item {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0;
    border-bottom: none;
    border-right: 1px solid var(--border-soft);
  }
  .duo-stats__item:last-child { border-right: none; }
}
.duo-stats__num {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 26px;
  color: var(--cisco-blue-dark);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
@media (min-width: 1025px) {
  .duo-stats__num { font-size: 30px; margin-bottom: 4px; }
}
.duo-stats__label {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: var(--fw-medium);
}

/* =========================================================
   Sub-hero brand identity — SAILPOINT / RADWARE / PROOFPOINT / BROADCOM
   기존 SPLUNK·PTC·ISOVALENT 패턴(.splunk-badge 재사용) 그대로 가져감.
   각 벤더 토큰 + .sub-hero--<vendor> 그라데이션 + .<vendor>-hero-logo
   ========================================================= */
:root {
  /* SailPoint — deep navy + cyan */
  --sailpoint-navy: #01276F;
  --sailpoint-deep: #050A28;
  --sailpoint-blue: #3860BE;
  --sailpoint-cyan: #54C0E8;

  /* Radware — red on dark teal */
  --radware-red:   #EC1D25;
  --radware-teal:  #094459;
  --radware-deep:  #051A22;
  --radware-cyan:  #0d7b97;

  /* Proofpoint — vivid blue + green accent */
  --proofpoint-blue: #035BFB;
  --proofpoint-navy: #1A2A52;
  --proofpoint-deep: #0A1228;
  --proofpoint-green: #68B631;

  /* Broadcom — red on charcoal */
  --broadcom-red:      #CC092F;
  --broadcom-charcoal: #2A2A2A;
  --broadcom-deep:     #0A0A0A;

  /* Palo Alto — signature orange on near-black */
  --paloalto-orange:    #fa582d;
  --paloalto-orange-dk: #c84727;
  --paloalto-cyan:      #00c0e8;
  --paloalto-ink:       #1a1a1a;
  --paloalto-deep:      #0a0a0a;

  /* Gigamon — signature orange on dark slate */
  --gigamon-orange:    #FF6C00;
  --gigamon-orange-dk: #cc5700;
  --gigamon-ink:       #1a1f24;
  --gigamon-deep:      #0a0e12;
}

/* SAILPOINT */
.sub-hero.sub-hero--sailpoint {
  background:
    radial-gradient(ellipse 60% 80% at 78% 38%, rgba(84, 192, 232, 0.28) 0%, transparent 60%),
    radial-gradient(ellipse 50% 70% at 18% 82%, rgba(56, 96, 190, 0.22) 0%, transparent 60%),
    linear-gradient(180deg, var(--sailpoint-navy) 0%, var(--sailpoint-deep) 100%);
}
.sailpoint-hero-brand { margin-bottom: var(--sp-3); }
.sailpoint-hero-logo {
  height: 36px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

/* RADWARE */
.sub-hero.sub-hero--radware {
  background:
    radial-gradient(ellipse 60% 80% at 78% 38%, rgba(236, 29, 37, 0.30) 0%, transparent 60%),
    radial-gradient(ellipse 50% 70% at 18% 82%, rgba(13, 123, 151, 0.20) 0%, transparent 60%),
    linear-gradient(180deg, var(--radware-teal) 0%, var(--radware-deep) 100%);
}
.radware-hero-brand { margin-bottom: var(--sp-3); }
.radware-hero-logo {
  height: 36px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

/* PROOFPOINT */
.sub-hero.sub-hero--proofpoint {
  background:
    radial-gradient(ellipse 60% 80% at 78% 38%, rgba(3, 91, 251, 0.30) 0%, transparent 60%),
    radial-gradient(ellipse 50% 70% at 18% 82%, rgba(104, 182, 49, 0.16) 0%, transparent 60%),
    linear-gradient(180deg, var(--proofpoint-navy) 0%, var(--proofpoint-deep) 100%);
}
.proofpoint-hero-brand { margin-bottom: var(--sp-3); }
.proofpoint-hero-logo {
  height: 36px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

/* BROADCOM */
.sub-hero.sub-hero--broadcom {
  background:
    radial-gradient(ellipse 60% 80% at 78% 38%, rgba(204, 9, 47, 0.32) 0%, transparent 60%),
    radial-gradient(ellipse 50% 70% at 18% 82%, rgba(204, 9, 47, 0.10) 0%, transparent 70%),
    linear-gradient(180deg, var(--broadcom-charcoal) 0%, var(--broadcom-deep) 100%);
}
/* Broadcom 로고는 빨간 마크 + 검정 텍스트라 invert 시 컬러가 어색 →
   흰색 칩 안에 원본 그대로 표시 (브랜드 빨강 정체성 보존) */
.broadcom-hero-brand {
  margin-bottom: var(--sp-3);
  display: inline-block;
}
.broadcom-hero-logo {
  height: 36px;
  width: auto;
  display: block;
  background: #fff;
  padding: 6px 12px;
  border-radius: 6px;
}

/* PALOALTO — signature orange (#fa582d) glow on near-black */
.sub-hero.sub-hero--paloalto {
  background:
    radial-gradient(ellipse 60% 80% at 78% 38%, rgba(250, 88, 45, 0.30) 0%, transparent 60%),
    radial-gradient(ellipse 50% 70% at 18% 82%, rgba(0, 192, 232, 0.14) 0%, transparent 60%),
    linear-gradient(180deg, var(--paloalto-ink) 0%, var(--paloalto-deep) 100%);
}
/* PALOALTO 로고도 오렌지 마크 + 검정 텍스트 → BROADCOM과 동일하게 흰 칩 처리 */
.paloalto-hero-brand {
  margin-bottom: var(--sp-3);
  display: inline-block;
}
.paloalto-hero-logo {
  height: 36px;
  width: auto;
  display: block;
  background: #fff;
  padding: 6px 12px;
  border-radius: 6px;
}

/* GIGAMON — signature orange (#FF6C00) glow on dark slate */
.sub-hero.sub-hero--gigamon {
  background:
    radial-gradient(ellipse 60% 80% at 78% 38%, rgba(255, 108, 0, 0.30) 0%, transparent 60%),
    radial-gradient(ellipse 50% 70% at 18% 82%, rgba(104, 182, 49, 0.14) 0%, transparent 60%),
    linear-gradient(180deg, var(--gigamon-ink) 0%, var(--gigamon-deep) 100%);
}
/* Gigamon 로고는 단색 오렌지라 invert 시 흰색이지만 브랜드 정체성 보존 위해 흰 칩 */
.gigamon-hero-brand {
  margin-bottom: var(--sp-3);
  display: inline-block;
}
.gigamon-hero-logo {
  height: 36px;
  width: auto;
  display: block;
  background: #fff;
  padding: 6px 12px;
  border-radius: 6px;
}

/* ISOVALENT — sub-hero 로고 (검정 SVG → 흰색 wordmark) */
.isovalent-hero-brand { margin-bottom: var(--sp-3); }
.isovalent-hero-logo {
  height: 36px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

/* SPLUNK — sub-hero 로고 (검정 SVG → 흰색 wordmark) */
.splunk-hero-brand { margin-bottom: var(--sp-3); }
.splunk-hero-logo {
  height: 36px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

/* SOC Platform — 4 module cards (2×2 desktop / 1col mobile) */
.soc-v2-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6);
  margin-top: var(--sp-7);
}
.soc-v2-card {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.soc-v2-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
.soc-v2-card__visual {
  margin: 0;
  background: var(--bg-section, #faf7f1);
  padding: var(--sp-3);
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-in;
  position: relative;
}
.soc-v2-card__visual::after {
  content: "";
  position: absolute;
  inset: var(--sp-3);
  border-radius: var(--radius-md);
  background: rgba(43, 26, 12, 0) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/><line x1='11' y1='8' x2='11' y2='14'/><line x1='8' y1='11' x2='14' y2='11'/></svg>") no-repeat center;
  opacity: 0;
  transition: opacity 180ms ease, background-color 180ms ease;
  pointer-events: none;
}
.soc-v2-card__visual:hover::after {
  opacity: 1;
  background-color: rgba(43, 26, 12, 0.32);
}
.soc-v2-card__visual img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  box-shadow: 0 2px 10px rgba(43, 26, 12, 0.06);
}
.soc-v2-card__body {
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
}
.soc-v2-card__eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-primary-700, #6b4423);
  margin-bottom: var(--sp-2);
}
.soc-v2-card h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-strong);
  margin: 0 0 var(--sp-3);
}
.soc-v2-card p {
  color: var(--text-body);
  margin: 0 0 var(--sp-4);
  line-height: 1.65;
}
.soc-v2-card .feature-chip-row {
  padding: 0;
}
.soc-v2-card .feature-chip-row .chip-label {
  background: #fff;
  border: 1px solid var(--border-soft);
  color: var(--text-body);
}
.soc-v2-card .feature-chip-row .chip-label::before {
  background: var(--color-primary-700, #6b4423);
}
@media (max-width: 900px) {
  .soc-v2-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .soc-v2-card__visual { padding: var(--sp-3); }
}