/* ==========================================================================
   Lovable-inspired Overrides — design-play
   White canvas + CUBIG violet accent + humanist warm grays + inset-shadow CTA.
   Loaded last to win cascade over legacy section CSS.
   ========================================================================== */

/* ── Strip atmospheric depth: heavy shadows + decorative gradients ── */
* {
  box-shadow: none;
}

/* Kill leftover decorative background images / gradients on full sections */
.ai-models__banner,
.ai-models__banner[style],
.eval-cta__bg,
.barriers,
.solutions,
.entry-point,
.comparison,
.industry-cases,
.enterprise-features,
.core-values,
.syntitan-intro,
.company-info,
.built-prod__stats,
.ai-ready__product,
[class*="__hero"],
[class*="__bg"],
[class*="__stats"],
[class*="__product--"] {
  background-image: none !important;
  background-color: var(--c-bg-white) !important;
}

/* Sections with intentional alternate-band can opt in */
.section--alt,
.section--surface,
.section--light,
[class*="--surface"] {
  background: var(--c-bg-light) !important;
}

/* Hero → next section: keep white surface, hairline divider */
.hero + section {
  background: var(--c-bg-white) !important;
}

/* Syntitan intro + client logos: unified white surface */
.syntitan-intro,
.client-logos {
  background: var(--c-bg-white) !important;
}

.syntitan-intro {
  padding-bottom: 0 !important;
}

/* Syntitan intro section graphic — Linear-style card frame with label */
.syntitan-intro__graphic {
  position: relative !important;
  width: 100%;
  max-width: 1216px;
  margin: 56px auto 0 !important;
  background: #fff !important;
  border: 1px solid var(--c-border-light) !important;
  border-radius: var(--r-lg) !important;
  padding: 0 !important;
  overflow: hidden;
  /* Hero-tier elevation — sharp near + soft ambient. Exception to v0.8 flat rule
     because this is the page's primary visual anchor (product demo). */
  box-shadow:
    0 1px 2px rgba(20, 17, 13, 0.04),
    0 8px 24px -4px rgba(20, 17, 13, 0.06),
    0 24px 56px -8px rgba(20, 17, 13, 0.08) !important;
}

/* macOS-style window chrome on top */
.syntitan-demo__chrome {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 44px;
  padding: 0 16px;
  background: linear-gradient(180deg, #fafaf9 0%, #f5f5f4 100%);
  border-bottom: 1px solid var(--c-border-light);
}

.syntitan-demo__dots {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.syntitan-demo__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.syntitan-demo__dot--red    { background: #ff5f57; box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.06); }
.syntitan-demo__dot--yellow { background: #febc2e; box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.06); }
.syntitan-demo__dot--green  { background: #28c840; box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.06); }

.syntitan-demo__chrome-title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-primary, -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: var(--c-text-subtle, #6b6862);
  white-space: nowrap;
  pointer-events: none;
}

/* Narrow viewports: hide center title to avoid overlap with right-side nav */
@media (max-width: 640px) {
  .syntitan-demo__chrome-title { display: none; }
}

/* 모바일: chrome 전체 숨김 — 데모를 step 07 정적 화면으로만 노출 (JS에서 데이터셋 고정) */
@media (max-width: 767px) {
  .syntitan-demo__chrome { display: none !important; }
}

/* Syntitan intro section bg stays white; only the graphic card area gets gradient */
.hero + section.syntitan-intro,
section.syntitan-intro {
  background: var(--c-bg-white) !important;
}

.syntitan-intro__graphic-label {
  position: absolute !important;
  top: 20px !important;
  left: 24px !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  color: var(--c-text-subtle) !important;
}

.syntitan-intro__graphic-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-sm) !important;
  border: 1px solid var(--c-border-light) !important;
  box-shadow: none !important;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 65%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 65%, transparent 100%);
}

/* ============================================================
   Syntitan interactive demo stage
   - Cross-fades between 11 PNG frames driven by [data-step]
   - Typing overlay for step 04 → 05
   - Home pulse for steps 09 → 10
   - Auto-cycle via JS (assets/js/main.js → syntitanDemoInit)
   ============================================================ */
.syntitan-demo__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1080;
  /* Top corners flush against chrome (no gap). Bottom corners follow parent
     container's --r-lg via overflow:hidden on .syntitan-intro__graphic. */
  border-radius: 0 !important;
  border: none !important;
  overflow: hidden;
  background: #fff;
}

.syntitan-demo__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  /* Instant swap between steps — no cross-fade flash. */
  transition: none;
  pointer-events: none;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

/* (Cursor fade step removed — Upload card breathing glow on step 01 makes
   the cursor frame redundant.) */

/* Show the frame whose data-frame matches the stage's data-step */
.syntitan-demo[data-step="01_home-empty"] .syntitan-demo__frame[data-frame="01_home-empty"],
.syntitan-demo[data-step="02_upload-modal-empty"] .syntitan-demo__frame[data-frame="02_upload-modal-empty"],
.syntitan-demo[data-step="03_upload-files-no-purpose"] .syntitan-demo__frame[data-frame="03_upload-files-no-purpose"],
.syntitan-demo[data-step="04_profiling-20"] .syntitan-demo__frame[data-frame="04_profiling-20"],
.syntitan-demo[data-step="05_profiling-results-modal"] .syntitan-demo__frame[data-frame="05_profiling-results-modal"],
.syntitan-demo[data-step="06_datasets-list"] .syntitan-demo__frame[data-frame="06_datasets-list"],
.syntitan-demo[data-step="07_detail-readiness"] .syntitan-demo__frame[data-frame="07_detail-readiness"] {
  opacity: 1;
}

/* ── Step 07 composite: fixed sidebar (347/1920 = 18.07%)
   + fixed header (65/1080 = 6.02%) + scrollable content (1573×2290) ── */
.syntitan-demo__frame--composite {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  /* override base .syntitan-demo__frame disabling — composite needs scroll/hover */
  pointer-events: auto !important;
  object-fit: unset;
  object-position: unset;
}

.syntitan-demo__detail-sidebar {
  position: absolute;
  top: 0;
  left: 0;
  width: 13.54%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  z-index: 3;
  pointer-events: none;
}

.syntitan-demo__detail-header {
  position: absolute;
  top: 0;
  left: 13.54%;
  width: 86.46%;
  height: 6.02%;
  object-fit: cover;
  object-position: top left;
  z-index: 3;
  pointer-events: none;
  background: #fff;
}

.syntitan-demo__detail-scroll {
  position: absolute;
  top: 6.02%;
  left: 13.54%;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  /* neutral system-style scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}
.syntitan-demo__detail-scroll::-webkit-scrollbar { width: 10px; }
.syntitan-demo__detail-scroll::-webkit-scrollbar-track { background: transparent; }
.syntitan-demo__detail-scroll::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.22);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.syntitan-demo__detail-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.45);
  background-clip: padding-box;
}

/* Scroll-down hint — small pill floating at bottom-center of the content
   area. Visible by default, fades out the moment user starts scrolling. */
.syntitan-demo__detail-scroll-hint {
  position: absolute;
  bottom: 5%;
  left: calc(13.54% + (100% - 13.54%) / 2);
  transform: translate(-50%, 0);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(20, 17, 13, 0.78);
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.syntitan-demo__detail-scroll-hint svg {
  width: 16px;
  height: 16px;
}

@keyframes syntitanScrollHintBounce {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 6px); }
}

/* Show only on step 07 and only until first scroll. The pill itself
   floats up/down to draw attention. */
.syntitan-demo[data-step="07_detail-readiness"]
  .syntitan-demo__frame--composite:not(.has-scrolled)
  .syntitan-demo__detail-scroll-hint {
  opacity: 1;
  animation: syntitanScrollHintBounce 1.4s ease-in-out infinite;
}

.syntitan-demo__detail-canvas {
  position: relative;
  width: 100%;
  /* Lets tooltips size themselves by % of canvas (cqi units) instead of
     by % of the tiny hotspot parent. */
  container-type: inline-size;
}

.syntitan-demo__detail-content {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Hexagon vertex hover hotspots ──
   Coordinates from content SVG (1660 × 2290), converted to %.
   Each hotspot is a small invisible circle; the tooltip is a child
   that shows on hover and ALSO has a subtle breathing pulse on the
   hotspot itself to invite interaction. */
.syntitan-demo__hex-hotspot {
  position: absolute;
  /* Hit area is generous (~28px) so hover triggers easily, but the visible
     halo lives on ::before pinned to the actual dot center (~10px). */
  width: 2.7%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  z-index: 4;
  outline: none;
}

.syntitan-demo__hex-hotspot::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 38%;          /* 38% × 2.7% ≈ 1.0% of canvas — sits right on dot */
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: transparent;
  pointer-events: none;
  transition: background 0.12s ease;
}

/* Hover/focus highlight — plain green halo, tight ring (only on hover). */
.syntitan-demo__hex-hotspot:hover::before,
.syntitan-demo__hex-hotspot:focus-visible::before {
  background: rgba(0, 201, 80, 0.95);
  box-shadow:
    0 0 0 1.5px #fff,
    0 0 0 4px rgba(0, 201, 80, 0.4),
    0 0 0 7px rgba(0, 201, 80, 0.12);
}

/* ── Polygon ring pulse — SVG overlay tracing the polygon outline.
   While composite has .hex-all-pulsing, the ring breathes outward with
   a soft green glow. Hidden when the user starts interacting. ── */
.syntitan-demo__hex-poly-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  /* Glow lives in a drop-shadow filter so it expands AROUND the stroke
     without crossing into the polygon interior. */
  filter: drop-shadow(0 0 0px rgba(0, 201, 80, 0));
}

.syntitan-demo[data-step="07_detail-readiness"]
  .syntitan-demo__frame--composite.hex-all-pulsing
  .syntitan-demo__hex-poly-ring {
  animation: syntitanHexRingPulse 1.6s ease-in-out infinite;
}

@keyframes syntitanHexRingPulse {
  0%, 100% {
    opacity: 0.35;
    filter: drop-shadow(0 0 1px rgba(0, 201, 80, 0.3));
  }
  50% {
    opacity: 1;
    filter:
      drop-shadow(0 0 6px rgba(0, 201, 80, 0.85))
      drop-shadow(0 0 14px rgba(0, 201, 80, 0.45));
  }
}

/* While all-pulsing is ON, tooltips stay hidden — only individual hover
   reveals its tooltip. */
.syntitan-demo__frame--composite.hex-all-pulsing
  .syntitan-demo__hex-tooltip {
  opacity: 0 !important;
}
.syntitan-demo__frame--composite.hex-all-pulsing
  .syntitan-demo__hex-hotspot:hover .syntitan-demo__hex-tooltip {
  opacity: 1 !important;
}

/* Get AI-Ready button — invisible click target over the dark pill in the SVG.
   Path bounds: x=1385.13 y=32 w=232.2 h=59.52 in 1660×2221 content. */
.syntitan-demo__detail-cta-hotspot {
  position: absolute;
  left: 83.44%;
  top: 1.44%;
  width: 13.99%;
  height: 2.68%;
  background: transparent;
  border-radius: 12px;
  cursor: pointer;
  z-index: 4;
  transition: background 0.15s ease;
}
.syntitan-demo__detail-cta-hotspot:hover {
  background: rgba(255, 255, 255, 0.08);
}
.syntitan-demo__detail-cta-hotspot:focus-visible {
  outline: 2px solid rgba(138, 119, 224, 0.7);
  outline-offset: 2px;
}

/* tooltip wrapper — hidden by default, shown on hover/focus */
.syntitan-demo__hex-tooltip {
  position: absolute;
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 6;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.12));
}
.syntitan-demo__hex-tooltip img {
  display: block;
  width: 100%;
  height: auto;
}

.syntitan-demo__hex-hotspot:hover .syntitan-demo__hex-tooltip,
.syntitan-demo__hex-hotspot:focus-visible .syntitan-demo__hex-tooltip,
.syntitan-demo__hex-hotspot.is-active .syntitan-demo__hex-tooltip {
  opacity: 1;
  transform: translate(var(--tip-x, 0), var(--tip-y, 0)) scale(1);
}

/* Tooltip placement — center horizontally on the dot, with a generous gap
   matching the design ref. Gap uses cqi so it scales with the canvas. */
/* Tooltip SVGs have asymmetric drop-shadow padding (top:19px / bottom:38px).
   `top` placement needs +1.8cqi extra translateY to compensate for the
   38px bottom padding so visible card edges land equally close to the dot
   in both placements. */
.syntitan-demo__hex-tooltip--top {
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, 2.3cqi);
  --tip-x: -50%;
  --tip-y: 2.5cqi;
}
.syntitan-demo__hex-tooltip--bottom {
  top: 100%;
  left: 50%;
  transform: translate(-50%, -0.6cqi);
  --tip-x: -50%;
  --tip-y: -0.8cqi;
}

/* ── Bottom black gradient (appears only when scrolled to bottom) ── */
.syntitan-demo__detail-bottom-fade {
  position: absolute;
  left: 0;               /* extends across sidebar + content */
  right: 0;
  bottom: 0;
  height: 22%;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.18) 55%,
    rgba(0, 0, 0, 0.42) 100%
  );
}
.syntitan-demo__frame--composite.is-at-bottom .syntitan-demo__detail-bottom-fade {
  opacity: 1;
}

/* ── Floating status bar (473×137 / appears when scrolled to bottom) ──
   473/1920 = 24.64% wide. Stays centered horizontally over the content
   area (which spans 13.54% → 100% of stage). */
.syntitan-demo__detail-floating {
  position: absolute;
  bottom: 4%;
  left: calc(13.54% + (100% - 13.54%) / 2);
  transform: translate(-50%, 12px);
  width: 24.64%;
  /* keep aspect for hotspot positioning (473×137 → 28.96%) */
  aspect-ratio: 473 / 137;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.25));
}

.syntitan-demo__detail-floating-bar {
  display: block;
  width: 100%;
  height: 100%;
}

.syntitan-demo__frame--composite.is-at-bottom .syntitan-demo__detail-floating {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

/* Button hotspots overlaid on the floating bar (% of bar's 473×137 box) */
.syntitan-demo__detail-fb-btn {
  position: absolute;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 999px;
  z-index: 1;
  transition: background 0.15s ease;
}
.syntitan-demo__detail-fb-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}
.syntitan-demo__detail-fb-btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 2px;
}
/* Left (replay): 36.5/473=7.72%, 30.5/137=22.26%, 135.6/473=28.67%, 63.6/137=46.42% */
.syntitan-demo__detail-fb-btn--replay {
  left: 7.72%;
  top: 22.26%;
  width: 28.67%;
  height: 46.42%;
}
/* Right (explore): 188.6/473=39.87%, 30/137=21.90%, 247.6/473=52.35%, 64.6/137=47.15% */
.syntitan-demo__detail-fb-btn--explore {
  left: 39.87%;
  top: 21.90%;
  width: 52.35%;
  height: 47.15%;
}

/* ── Typing overlay (covers Data purpose inputs in step 04) ── */
/* Positions are % of stage; matches Figma 1920×1080 frame coordinates.
   Each input row in the modal is ~72px tall, starting around y=437/1080 ≈ 40.5%,
   x ≈ 793/1920 ≈ 41.3%, width ≈ 560/1920 ≈ 29.2% */
.syntitan-demo__typing {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

.syntitan-demo[data-step="03_upload-files-no-purpose"] .syntitan-demo__typing {
  opacity: 1;
}

/* Once a row has any typed text, give it a FULL input-width white background
   so the SVG placeholder for that row disappears cleanly (rather than the
   typed text awkwardly meeting half a placeholder). Empty rows stay
   transparent so placeholders on un-typed rows remain visible.
   No .is-typing requirement so the bg persists during 03 → 04 fade-out. */
.syntitan-demo[data-step="03_upload-files-no-purpose"] .syntitan-demo__typing-text:not(:empty) {
  background: #fff;
  width: 34.94%;
  max-width: 34.94%;
}

.syntitan-demo__typing-text {
  position: absolute;
  /* Input field rect in SVG: x=821.4, w=670.8, h=56.4
     → left 42.78%, height 5.22%, max-width 34.94%
     Width is auto so the element grows char-by-char with the typed text,
     and the white background mask only covers what's actually been typed
     (so the SVG placeholder fades out one character at a time). */
  left: 42.78%;
  height: 5.22%;
  max-width: 34.94%;
  display: flex;
  align-items: center;
  padding-left: 0.95cqi;
  padding-right: 0.2cqi;
  font-family: var(--font-primary, -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: 0.94cqi;
  color: #14110d;
  background: transparent;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
}

.syntitan-demo__stage { container-type: inline-size; }

/* Row Y positions — first row y=280.9, then +96 each row */
.syntitan-demo__typing-text[data-typing-row="1"] { top: 26.01%; }
.syntitan-demo__typing-text[data-typing-row="2"] { top: 34.90%; }
.syntitan-demo__typing-text[data-typing-row="3"] { top: 43.79%; }
.syntitan-demo__typing-text[data-typing-row="4"] { top: 52.68%; }
.syntitan-demo__typing-text[data-typing-row="5"] { top: 61.57%; }

/* ── Step nav cluster (right side of macOS chrome): ← [badge] → ── */
.syntitan-demo__nav {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.syntitan-demo__nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--c-text-subtle, #6b6862);
  cursor: pointer;
  transition: color 0.15s ease;
}

.syntitan-demo__nav-btn:hover {
  color: var(--c-text-strong, #14110d);
}

.syntitan-demo__badge {
  padding: 3px 10px;
  background: #fff;
  color: var(--c-text-strong, #14110d);
  font-family: var(--font-mono, ui-monospace, "JetBrains Mono", Menlo, monospace);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.4px;
  line-height: 1.3;
  border: 1px solid var(--c-border-light);
  border-radius: 5px;
  pointer-events: none;
  user-select: none;
  flex-shrink: 0;
}

/* ── Generic invisible hotspot (used on step 01 Upload card) ── */
.syntitan-demo__hotspot {
  position: absolute;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 999px;
}

/* ── Step 04 Data Profiling card overlay (user-provided SVG) ──
   Source: Data-Profiling-Card.svg (816×839 viewBox).
   Centered on stage; ratio preserved by aspect-ratio + auto height. */
.syntitan-demo__profile-modal {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 46.2%;  /* 42% × 1.1 */
  height: auto;
  display: block;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

.syntitan-demo[data-step="04_profiling-20"] .syntitan-demo__profile-modal {
  opacity: 1;
}

/* Rotating spinner overlay — single element, repositioned per active row.
   Sized + positioned to match the check icons in the SVG exactly:
     check icon bbox ≈ 22.8 SVG units, center x=715.2, row1 y=307.2 (image coords)
     → stage x = 1294, row1 stage y = 418 → 67.39% / 38.72%
   Container is 1.58% wide so the inner viewBox(24) circle r=9 visually
   matches the check icon's diameter (0.75 × 1.58% ≈ check size). */
.syntitan-demo__pm-rotor {
  position: absolute;
  left: 67.39%;
  top: 38.72%;
  transform: translate(-50%, -50%);
  width: 1.58%;
  aspect-ratio: 1;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.syntitan-demo__pm-rotor svg {
  width: 100%;
  height: 100%;
  animation: syntitanSpin 0.9s linear infinite;
}

@keyframes syntitanSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

.syntitan-demo[data-step="04_profiling-20"] .syntitan-demo__pm-rotor             { opacity: 1; }
.syntitan-demo[data-pm-row="1"] .syntitan-demo__pm-rotor { top: 38.72%; }
.syntitan-demo[data-pm-row="2"] .syntitan-demo__pm-rotor { top: 47.22%; }
.syntitan-demo[data-pm-row="3"] .syntitan-demo__pm-rotor { top: 55.72%; }
.syntitan-demo[data-pm-row="4"] .syntitan-demo__pm-rotor { top: 64.21%; }
.syntitan-demo[data-pm-row="5"] .syntitan-demo__pm-rotor { top: 72.71%; }
.syntitan-demo[data-pm-row="done"] .syntitan-demo__pm-rotor { opacity: 0; }

/* ── Step 02 file-drop animation ──
   file-pointer.svg flies in from off-stage bottom-right and stops just
   above the drop zone center. Plays each time step 02 becomes active. */
.syntitan-demo__file-pointer {
  position: absolute;
  width: 11%;
  height: auto;
  left: 50%;
  top: 50%;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  /* Off-stage initial position: bottom-right */
  transform: translate(180%, 60%) scale(0.92);
  /* Uniform 2-layer drop shadow on both file + cursor (respects SVG alpha,
     so it follows the actual shapes — not the bounding box). Darker than
     the cursor's baked-in shadow. */
  filter:
    drop-shadow(0 2px 4px rgba(20, 17, 13, 0.12))
    drop-shadow(0 10px 20px rgba(20, 17, 13, 0.18));
}

.syntitan-demo[data-step="02_upload-modal-empty"] .syntitan-demo__file-pointer {
  animation: syntitanFileDragIn 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}

@keyframes syntitanFileDragIn {
  0% {
    opacity: 0;
    transform: translate(180%, 60%) scale(0.92);
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    /* Land just above drop-zone center (subtle upward offset so cursor tip
       points right at the dashed zone) */
    transform: translate(-50%, -50%) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .syntitan-demo[data-step="02_upload-modal-empty"] .syntitan-demo__file-pointer {
    animation: none;
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

/* ── Step 02 Start Data Profiling click animation ──
   Actual button rect in SVG: x=1291, y=858.3, w=216.2, h=48.2, rx=9.6
   → 67.24% / 79.47% / 11.26% / 4.46% / 0.5cqi */
.syntitan-demo__click-btn {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  border-radius: 0.5cqi;
  transform-origin: center;
  background: transparent;
  border: none;
  padding: 0;
}

.syntitan-demo__click-btn--profiling {
  top: 79.4723%;
  left: 67.2396%;
  width: 11.2604%;
  height: 4.4630%;
}

/* Step 03 first input field (Data purpose row 1)
   SVG: x=821.4, y=280.9, w=670.8, h=56.4, rx=9
   → 42.78% / 26.01% / 34.94% / 5.22% / 0.469cqi */
.syntitan-demo__click-btn--input1 {
  top: 26.0093%;
  left: 42.7813%;
  width: 34.9375%;
  height: 5.2222%;
  border-radius: 0.469cqi;
}

.syntitan-demo[data-step="03_upload-files-no-purpose"] .syntitan-demo__click-btn--input1 {
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
  animation: syntitanUploadBreathe 1.8s ease-in-out infinite;
}

/* Step 03 Start Data Profiling button — only active after typing completes.
   Same SVG button position as the dark Start button in the modal.
   x=1291, y=858.3, w=216.2, h=48.2, rx=9.6
   → 67.2396% / 79.4723% / 11.2604% / 4.4630% / 0.5cqi */
.syntitan-demo__click-btn--profiling-03 {
  top: 79.4723%;
  left: 67.2396%;
  width: 11.2604%;
  height: 4.4630%;
}

.syntitan-demo.typing-complete[data-step="03_upload-files-no-purpose"] .syntitan-demo__click-btn--profiling-03 {
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
  animation: syntitanUploadBreathe 1.8s ease-in-out infinite;
}

/* Step 05 results modal X close button
   SVG rect: x=254.4, y=154.8, w=28.8, h=28.8, rx=7.2
   → 13.25% / 14.33% / 1.5% / 2.67% / 0.375cqi */
.syntitan-demo__click-btn--results-close {
  top: 14.33%;
  left: 13.25%;
  width: 1.5%;
  height: 2.67%;
  border-radius: 0.375cqi;
}

.syntitan-demo[data-step="05_profiling-results-modal"] .syntitan-demo__click-btn--results-close {
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
  animation: syntitanUploadBreathe 1.8s ease-in-out infinite;
}

/* Step 06 row 4 dataset card hotspot
   SVG row 4 bg: x=390, y=400, w=1400, h=54
   → 20.31% / 37.04% / 72.92% / 5.00% */
.syntitan-demo__click-btn--dataset-row4 {
  top: 37.04%;
  left: 20.31%;
  width: 72.92%;
  height: 5.00%;
  border-radius: 0;
}

.syntitan-demo[data-step="06_datasets-list"] .syntitan-demo__click-btn--dataset-row4 {
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
  animation: syntitanUploadBreathe 1.8s ease-in-out infinite;
}

/* Stop the input1 breathing glow as soon as typing starts (and stay off
   after typing completes — focus moves to the Start Data Profiling button) */
.syntitan-demo.is-typing[data-step="03_upload-files-no-purpose"] .syntitan-demo__click-btn--input1,
.syntitan-demo.typing-complete[data-step="03_upload-files-no-purpose"] .syntitan-demo__click-btn--input1 {
  animation: none;
  box-shadow: none;
  pointer-events: none;
}

.syntitan-demo[data-step="02_upload-modal-empty"] .syntitan-demo__click-btn--profiling {
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
  /* Same breathing glow as step 01 Upload card. Delay matches file-pointer
     landing so the breath starts after the file is placed. */
  animation: syntitanUploadBreathe 1.8s ease-in-out 2.4s infinite;
}

@media (prefers-reduced-motion: reduce) {
  .syntitan-demo[data-step="02_upload-modal-empty"] .syntitan-demo__click-btn--profiling {
    animation: none;
    opacity: 0;
  }
}

/* Step 01 Upload-data card affordance.
   Figma 1920×1080: card group at x=724, y=483.5, w=354, h=221, rx=18 */
.syntitan-demo__hotspot--upload {
  top: 44.7685%;
  left: 37.7083%;
  width: 18.4375%;
  height: 20.4630%;
  border-radius: 0.9375cqi;
}

.syntitan-demo[data-step="01_home-empty"] .syntitan-demo__hotspot--upload {
  pointer-events: auto;
  opacity: 1;
  cursor: pointer;
  animation: syntitanUploadBreathe 1.8s ease-in-out infinite;
}

/* Soft breathing glow — violet halo + inset ring (on the SVG element edge,
   not outside it, so the border aligns exactly with the underlying button
   or card instead of looking offset). */
@keyframes syntitanUploadBreathe {
  0%, 100% {
    box-shadow:
      inset 0 0 0 0 rgba(138, 119, 224, 0),
      0 0 0 0 rgba(138, 119, 224, 0);
  }
  50% {
    box-shadow:
      inset 0 0 0 2px rgba(138, 119, 224, 0.7),
      0 0 32px 8px rgba(138, 119, 224, 0.45);
  }
}

@media (prefers-reduced-motion: reduce) {
  .syntitan-demo__frame { transition: none; }
}

/* ── Workflow bridge — copy bridging demo (step 1, diagnose) to the 7-step
   workflow row underneath. Aligned with design-system `__lead` pattern
   (18px / 30 line-height / -0.2px tracking / regular weight). ── */
.syntitan-intro__workflow-bridge {
  grid-column: 1 / -1 !important;
  grid-row: 5 !important;
  margin: 56px auto 24px !important;
  padding: 0 !important;
  max-width: 720px;
  text-align: center !important;
  font-family: var(--font-primary) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 30px !important;
  letter-spacing: -0.2px !important;
  color: var(--c-text-subtle) !important;
}

/* ── Syntitan-intro: 7-step workflow stepper (light tone) ──
   Numbered circle + title + desc, hairline connector between steps. */
.syntitan-intro__features {
  grid-column: 1 / -1 !important;
  grid-row: 6 !important;
  list-style: none !important;
  margin: 0 auto !important;
  padding: 40px 16px !important;
  width: 100%;
  max-width: 1216px;
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 0 !important;
  background: var(--c-bg-white) !important;
  border: 1px solid var(--c-border-light) !important;
  border-radius: var(--r-lg) !important;
}

.syntitan-intro__feature {
  padding: 0 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 14px !important;
  border-right: none !important;
  position: relative;
  text-align: center;
}

/* Hairline connector to the next step — sits behind the number circle,
   visually flowing from one step to the next. */
.syntitan-intro__feature:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 16px;            /* aligns with circle center (32px circle, half = 16px) */
  left: calc(50% + 22px);  /* starts just right of the 32px circle */
  right: calc(-50% + 22px); /* ends just left of next circle */
  height: 1px;
  background: linear-gradient(
    to right,
    var(--c-border-light) 0%,
    var(--c-border-light) 40%,
    transparent 100%
  );
}

.syntitan-intro__feature-icon { display: none; }

/* Step number — circle */
.syntitan-intro__feature-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--c-text-subtle);
  background: var(--c-bg-white);
  border: 1px solid var(--c-border-light);
  position: relative;
  z-index: 1; /* sits on top of the connector line */
}

.syntitan-intro__feature-title {
  font-family: var(--font-primary) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--c-text-strong, #14110d) !important;
  margin: 0 !important;
  letter-spacing: -0.1px;
}

.syntitan-intro__feature-desc {
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--c-text-subtle) !important;
  margin: 0 !important;
  letter-spacing: -0.05px;
}

/* Step 1 (Diagnose) — active state. Violet circle with halo, violet title. */
.syntitan-intro__feature--active .syntitan-intro__feature-step {
  color: #fff !important;
  background: var(--c-accent-violet, #8A77E0) !important;
  border-color: var(--c-accent-violet, #8A77E0) !important;
  box-shadow: 0 0 0 4px rgba(138, 119, 224, 0.15);
}
.syntitan-intro__feature--active .syntitan-intro__feature-title {
  color: var(--c-accent-violet, #8A77E0) !important;
}

.syntitan-intro__feature-title {
  font-family: var(--font-primary) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--c-text-strong, #14110d) !important;
  margin: 0 !important;
  min-height: 22px;
}

.syntitan-intro__feature-desc {
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: var(--c-text-subtle) !important;
  margin: 0 !important;
  min-height: 40px;
}

@media (max-width: 1024px) {
  .syntitan-intro__features {
    grid-template-columns: repeat(4, 1fr) !important;
    row-gap: 28px !important;
  }
  /* On wrap, hide the last-in-row connector to avoid pointing into empty space */
  .syntitan-intro__feature:nth-child(4n)::after,
  .syntitan-intro__feature:last-child::after { display: none; }
}

@media (max-width: 640px) {
  .syntitan-intro__features {
    grid-template-columns: repeat(2, 1fr) !important;
    row-gap: 24px !important;
  }
  .syntitan-intro__feature:nth-child(2n)::after,
  .syntitan-intro__feature:last-child::after { display: none; }
}

/* ── ai-models section header: eyebrow + 2-line anti-thesis ── */
.ai-models__header {
  text-align: center !important;
  margin-bottom: 128px !important;
}

.ai-models__eyebrow {
  display: inline-block !important;
  font-family: var(--font-primary) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  color: var(--c-accent-violet) !important;
  margin-bottom: 20px !important;
}

.ai-models__subtitle {
  font-family: var(--font-primary) !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: var(--c-text-muted) !important;
  max-width: 720px !important;
  margin: 24px auto 0 !important;
  text-align: center !important;
}

.ai-models__title {
  color: var(--c-text-dark) !important;
}

.ai-models__title .ai-models__title-accent {
  color: var(--c-accent-violet) !important;
  font-weight: inherit !important;
}

/* client-logos만 상하 96으로 대칭 (다른 섹션은 96/128) */
.section.client-logos {
  padding-top: 96px !important;
  padding-bottom: 96px !important;
}

/* ── Cards: Lovable hairline containment, soft corners ── */
[class*="__card"],
[class*="-card"],
[class*="__panel"],
[class*="__box"],
.ai-failure-stats__card,
.built-prod__stats {
  background: var(--c-bg-white) !important;
  background-image: none !important;
  border: 1px solid var(--c-border-light) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: none !important;
}

/* ── Buttons: Lovable inset-shadow language ── */

/* Base button reset */
.btn,
.button,
[class*="__btn"],
[class*="-btn"],
a[class*="button"],
.cta {
  border-radius: var(--r-sm) !important;
  background-image: none !important;
  font-family: var(--font-primary) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  transition: opacity var(--transition), background var(--transition) !important;
}

.btn:active,
.button:active,
[class*="__btn"]:active,
a[class*="button"]:active {
  opacity: 0.8 !important;
}

/* Primary CTA: CUBIG violet, inset shadow (Lovable inset technique on brand color) */
.btn--primary,
.btn--gradient,
.button--primary,
[class*="__btn--primary"],
.hero__btn-primary,
.btn-primary {
  background: var(--c-accent-violet) !important;
  color: #fff !important;
  border: 0 !important;
  padding: 10px 18px !important;
  box-shadow:
    rgba(255, 255, 255, 0.18) 0 0.5px 0 0 inset,
    rgba(0, 0, 0, 0.18) 0 0 0 0.5px inset,
    rgba(0, 0, 0, 0.06) 0 1px 2px 0 !important;
}

.btn--primary:hover,
.btn--gradient:hover,
.button--primary:hover,
[class*="__btn--primary"]:hover {
  background: var(--c-accent-violet-strong) !important;
}

/* Secondary / Ghost: transparent + interactive border */
.btn--secondary,
.button--secondary,
[class*="__btn--secondary"],
.btn--ghost,
[class*="__btn--ghost"] {
  background: transparent !important;
  color: var(--c-text-dark) !important;
  border: 1px solid var(--c-border-interactive) !important;
  padding: 10px 18px !important;
}

.btn--secondary:hover,
.button--secondary:hover {
  background: rgba(28, 28, 28, 0.04) !important;
}

/* Tertiary: cream-surface-like soft button (we keep white) */
.btn--tertiary,
.button--tertiary,
[class*="__btn--tertiary"] {
  background: rgba(28, 28, 28, 0.04) !important;
  color: var(--c-text-dark) !important;
  border: 0 !important;
  padding: 10px 18px !important;
}

/* Pill / icon buttons — full pill radius */
.btn--pill,
[class*="__btn--pill"],
.pill-btn,
[class*="-pill-btn"] {
  border-radius: var(--r-pill) !important;
}

/* ── Headings: tight tracking, weight 600 (Lovable editorial) ── */
h1, h2, h3,
[class*="__title"],
[class*="__heading"] {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.9px !important;
  color: var(--c-text-dark) !important;
}

/* Display sizes get tighter tracking */
h1,
.hero__title {
  font-weight: 700 !important;
  letter-spacing: -1.8px !important;
}
/* Mobile: relax the -1.8px tracking (over-compresses smaller hero type → clipping). */
@media (max-width: 767px) {
  h1,
  .hero__title { letter-spacing: -0.5px !important; }
}

h2,
[class*="__title"]:not(.hero__title) {
  letter-spacing: -1.2px !important;
}

/* Body / labels — clean weight 400 */
p, li, span, small,
[class*="__body"],
[class*="__subtitle"],
[class*="__text"],
[class*="__caption"],
[class*="__label"] {
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

strong, b, .emphasis {
  font-weight: 600 !important;
}

/* ── Accent color unification → CUBIG violet ── */

/* Title accents / numeric highlights */
[class*="__title-accent"],
[class*="__stat-number"],
[class*="--accent-text"] {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: var(--c-accent-violet) !important;
  color: var(--c-accent-violet) !important;
}

/* Anywhere CSS used IBM blue / corporate blue → swap to violet */
[style*="color: #175dff"],
[style*="color: #0f62fe"],
[style*="color: #8892fa"] {
  color: var(--c-accent-violet) !important;
}

/* Inline backgrounds using brand-blue → violet */
[style*="background: #175dff"],
[style*="background-color: #175dff"] {
  background: var(--c-accent-violet) !important;
}

/* ── Eval CTA: solid violet banner with inset shadow ── */
.eval-cta__bg {
  background: var(--c-accent-violet) !important;
}

.eval-cta__inner {
  background: transparent !important;
  border: 0 !important;
}

.eval-cta,
.eval-cta__title,
.eval-cta__body,
.eval-cta__title *,
.eval-cta__body * {
  color: #fff !important;
}

.eval-cta .btn,
.eval-cta a[class*="btn"],
.eval-cta button {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow: none !important;
}

.eval-cta .btn:hover {
  background: rgba(255, 255, 255, 0.22) !important;
}

/* ── Quote inside "AI Needs More Than Models" → sub-content, smaller than h3 ── */
.ai-models__banner,
.ai-models__banner[style] {
  background: linear-gradient(to bottom, rgba(138, 119, 224, 0.10), rgba(138, 119, 224, 0)) !important;
  border: 0 !important;
  border-radius: 16px 16px 0 0 !important;
  min-height: auto !important;
  width: auto !important;
  padding: 32px 40px !important;
  margin: -24px -40px 0 !important;
}

.ai-models__banner-quote {
  font-family: var(--font-display) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  letter-spacing: -0.2px !important;
  color: var(--c-text-muted) !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

/* ── Operational/Timeline blocks → muted secondary tone ── */
.ai-models__blocks {
  margin: 0 -40px !important;
  padding: 40px 0 !important;
  gap: 0 !important;
  border-top: 1px solid var(--c-border-light) !important;
}

/* 좌우 블록을 가로 hairline + 가운데 vertical hairline로 정렬 */
.ai-models__text-block {
  padding: 0 40px !important;
}
.ai-models__text-block + .ai-models__text-block {
  border-left: 1px solid var(--c-border-light) !important;
}

.ai-models__cards {
  margin: 0 -40px !important;
  padding: 24px 40px 0 !important;
  border-top: 1px solid var(--c-border-light) !important;
}

.ai-models__text-num {
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--c-accent-violet) !important;
  letter-spacing: 0.16px !important;
}

.ai-models__text-label {
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.2px !important;
  color: var(--c-text-dark) !important;
}

.ai-models__text-body {
  font-family: var(--font-primary) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
  color: var(--c-text-muted) !important;
}

/* ── 3-card guarantees → hairline grid (match Stats/Barriers) ── */
.ai-models__cards {
  gap: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-top: 1px solid var(--c-border-light) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 32px 40px 32px !important;
  /* banner와 대칭: 카드 하단 가장자리에 스냅 (parent 24px padding 상쇄) */
  margin: 0 -40px -24px !important;
}

.ai-models__card {
  background: transparent !important;
  border: 0 !important;
  border-left: 1px solid var(--c-border-light) !important;
  border-radius: 0 !important;
  padding: 0 24px !important;
  box-shadow: none !important;
  align-items: center !important;
  text-align: center !important;
  gap: 12px !important;
}

.ai-models__card:first-child {
  border-left: 0 !important;
}

.ai-models__card-icon {
  width: 28px !important;
  height: 28px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  color: var(--c-accent-violet) !important;
}

.ai-models__card-icon svg {
  width: 100% !important;
  height: 100% !important;
}

.ai-models__card-badge {
  display: inline-block !important;
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.16px !important;
  color: var(--c-accent-violet) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  text-transform: uppercase !important;
}

.ai-models__card-desc {
  font-family: var(--font-primary) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
  color: var(--c-text-muted) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* ── ai-models stats: 3 columns separated by hairlines (no card) ── */
.ai-models__stats-card {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: 0 !important;
}

.ai-models__stats-grid {
  max-width: none !important;
  gap: 0 !important;
}

.ai-models__stat {
  padding: 32px 24px !important;
  border-left: 1px solid var(--c-border-light) !important;
}

.ai-models__stat:first-child {
  border-left: 0 !important;
}

/* 모바일: 1열 스택 시 hairline을 좌측→상단으로 전환 (세로선이 어색하게 떠 보이는 문제 해결) */
@media (max-width: 1024px) {
  .ai-models__stat {
    border-left: 0 !important;
    border-top: 1px solid var(--c-border-light) !important;
  }
  .ai-models__stat:first-child {
    border-top: 0 !important;
  }
}

/* Stat source chip: small, mono, hairline — unified violet across all stats */
.ai-models__stat-source,
.ai-models__stat-source[style] {
  font-size: 12px !important;
  line-height: 1.4 !important;
  padding: 4px 10px !important;
  letter-spacing: 0.16px !important;
  color: var(--c-text-muted) !important;
  border-color: var(--c-border-light) !important;
  --source-color: var(--c-border-light) !important;
}

/* Stat body text: muted, smaller */
.ai-models__stat-text {
  font-family: var(--font-primary) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  color: var(--c-text-muted) !important;
  max-width: none !important;
}

/* Subtitle under ai-models title: keep on one line */
.ai-models__subtitle {
  max-width: none !important;
}

/* ai-models sub-block: h3 title OUTSIDE, content INSIDE the card */
.ai-models__block {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-bottom: 48px !important;
}

.ai-models__block:last-child {
  margin-bottom: 0 !important;
}

.ai-models__block-title--outside {
  margin: 0 0 20px !important;
}

.ai-models__block-content {
  background: var(--c-bg-white) !important;
  border: 1px solid var(--c-border-light) !important;
  border-radius: var(--r-lg) !important;
  padding: 32px !important;
  overflow: hidden !important;
}

/* ── Barriers: 3-column hairline grid (matches stats card layout) ── */
.ai-models__barriers {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  flex-direction: row !important;
  gap: 0 !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.ai-models__barrier {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  gap: 12px !important;
  align-items: stretch !important;
  padding: 32px 24px !important;
  border-top: 0 !important;
  border-left: 1px solid var(--c-border-light) !important;
}

.ai-models__barrier:first-child {
  border-left: 0 !important;
  padding-top: 32px !important;
}

/* 모바일: 3-column이 좁아서 텍스트가 깨짐 → 세로 스택, 구분선은 위쪽으로 전환 */
@media (max-width: 640px) {
  .ai-models__barriers {
    grid-template-columns: 1fr !important;
  }
  .ai-models__barrier {
    border-left: 0 !important;
    border-top: 1px solid var(--c-border-light) !important;
    padding: 24px 0 !important;
  }
  .ai-models__barrier:first-child {
    border-top: 0 !important;
    padding-top: 0 !important;
  }
}

.ai-models__barrier-num {
  font-family: var(--font-mono) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  color: var(--c-accent-violet) !important;
}

.ai-models__barrier-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.ai-models__barrier-title {
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.2px !important;
  color: var(--c-text-dark) !important;
  margin: 0 !important;
}

.ai-models__barrier-desc {
  font-family: var(--font-primary) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  color: var(--c-text-muted) !important;
  margin: 0 !important;
}

/* ── Stats card text recovery (was white on dark gradient) ── */
.built-prod__stats,
.built-prod__stats * {
  color: var(--c-text-dark) !important;
}
.built-prod__stat-desc,
.built-prod__stats [class*="__desc"],
.built-prod__stats [class*="__label"] {
  color: var(--c-text-muted) !important;
}
.built-prod__stats [class*="__stat-number"],
.built-prod__stats [class*="__number"] {
  color: var(--c-accent-violet) !important;
  -webkit-text-fill-color: var(--c-accent-violet) !important;
  background: none !important;
}

/* ── built-prod stats: match ai-failure-stats card pattern ── */
.built-prod__stats {
  background: var(--c-bg-white) !important;
  border: 1px solid rgba(28, 28, 28, 0.08) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  padding: 32px !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 !important;
}

/* Cert marquee cards: full-card SVG, no wrapper */
.built-prod__marquee {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 48px 0 0 !important;
}

/* Edge-fade DISABLED (2026-06): the marquee is now overflow-x:auto for
   drag-to-scroll, so these position:absolute fades scrolled WITH the content
   (drifting a white gradient across the cards) instead of staying pinned to the
   rail edges. Cert badges run crisp to the edge instead. */
.built-prod__marquee::before,
.built-prod__marquee::after {
  content: none;
}

.built-prod__cert-card {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  width: 200px !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.built-prod__track {
  gap: 64px !important;
}

/* Certifications features: 3×2 grid with icons */
.certifications__features {
  list-style: none !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 40px 48px !important;
  margin: 64px 0 0 0 !important;
  padding: 0 !important;
}

.certifications__feature {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.certifications__feature::before { content: none !important; }

.certifications__feature-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: visible;
}

.certifications__feature-icon svg {
  width: 28px;
  height: 28px;
  margin-left: -2px;
}

.certifications__feature-icon svg > g > rect[fill="white"]:first-child,
.certifications__feature-icon svg > rect[fill="white"]:first-child {
  display: none;
}

/* Line icons: recolor strokes (filled paths still recolored if any) */
.certifications__feature-icon svg [stroke="black"],
.certifications__feature-icon svg [stroke="#000"],
.certifications__feature-icon svg [stroke="#000000"] {
  stroke: var(--c-accent-violet) !important;
}

.certifications__feature-icon svg [fill="black"]:not([stroke]),
.certifications__feature-icon svg [fill="#000"]:not([stroke]),
.certifications__feature-icon svg [fill="#000000"]:not([stroke]) {
  fill: var(--c-accent-violet) !important;
}

.certifications__feature-num {
  display: none !important;
}

.certifications__feature-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.certifications__feature-title {
  font-family: var(--font-display) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -0.2px !important;
  color: var(--c-text-dark) !important;
  margin: 0 !important;
}

.certifications__feature-desc {
  font-family: var(--font-primary) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: var(--c-text-muted) !important;
  margin: 0 !important;
}

@media (max-width: 900px) {
  .certifications__features {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
}

/* Barriers: icon + body, same icon treatment as features */
.ai-models__barrier {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.ai-models__barrier-num {
  display: none !important;
}

.ai-models__barrier-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: visible;
}

.ai-models__barrier-icon svg {
  width: 28px;
  height: 28px;
  margin-left: -2px;
}

.ai-models__barrier-icon svg > g > rect[fill="white"]:first-child,
.ai-models__barrier-icon svg > rect[fill="white"]:first-child {
  display: none;
}

.ai-models__barrier-icon svg [stroke="black"],
.ai-models__barrier-icon svg [stroke="#000"],
.ai-models__barrier-icon svg [stroke="#000000"] {
  stroke: var(--c-accent-violet) !important;
}

.ai-models__barrier-icon svg [fill="black"]:not([stroke]),
.ai-models__barrier-icon svg [fill="#000"]:not([stroke]),
.ai-models__barrier-icon svg [fill="#000000"]:not([stroke]) {
  fill: var(--c-accent-violet) !important;
}

.built-prod__cert-card .built-prod__cert-image {
  width: 100%;
  height: auto;
  display: block;
}

.built-prod__cert-card .built-prod__cert-type {
  margin: 0 0 4px 0 !important;
}

.built-prod__cert-card .built-prod__cert-product {
  margin: 0 0 48px 0 !important;
}

.built-prod__cert-card .built-prod__cert-wreath-row {
  margin: 0 0 8px 0 !important;
}

/* l1 / l2 가 카드마다 같은 y 라인에 오도록 고정 트랙 */
.built-prod__cert-card .built-prod__cert-name {
  display: flex !important;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  justify-content: center;
}

.built-prod__cert-card .built-prod__cert-name-l1,
.built-prod__cert-card .built-prod__cert-name-l2 {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.built-prod__cert-card .built-prod__cert-name-l2 {
  font-size: 12px !important;
  line-height: 16px !important;
  white-space: nowrap;
}

.built-prod__cert-card .built-prod__cert-year {
  margin: 0 !important;
}

/* Base logo: object-fit + center, 사이즈는 per-src에서 결정 */
.built-prod__cert-card .built-prod__cert-logo {
  width: auto;
  height: auto;
  object-fit: contain;
  margin-top: 48px !important;
  display: block;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Per-logo sizing — 개별 조정 가능 */
.built-prod__cert-card .built-prod__cert-logo[src*="cert-gs"] {
  max-width: 100px !important;
  max-height: 44px !important;
}

.built-prod__cert-card .built-prod__cert-logo[src*="cert-infosec"] {
  max-width: 190px !important;
  max-height: 52px !important;
}

.built-prod__cert-card .built-prod__cert-logo[src*="cert-kisa"] {
  max-width: 120px !important;
  max-height: 34px !important;
}

.built-prod__cert-card .built-prod__cert-logo[src*="cert-nextrise"] {
  max-width: 80px !important;
  max-height: 44px !important;
}

.built-prod__cert-card .built-prod__cert-logo[src*="cert-swc"] {
  max-width: 90px !important;
  max-height: 50px !important;
}

.built-prod__stat {
  padding: 16px 32px !important;
  border-left: 1px solid var(--c-border-light) !important;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: center;
  align-items: center;
}

.built-prod__stat:first-child {
  border-left: 0 !important;
}

.built-prod__stat-number {
  font-family: var(--font-primary);
  font-size: 70px !important;
  font-weight: 400 !important;
  line-height: 80px !important;
  letter-spacing: -1px !important;
}

.built-prod__stat-divider {
  display: none !important;
}

.built-prod__stat-label {
  display: inline-flex !important;
  align-items: center;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.16px !important;
  color: var(--c-text-muted) !important;
  background: transparent !important;
  border: 1px solid var(--c-border-light) !important;
  border-radius: 999px !important;
  padding: 4px 12px !important;
  margin: 0 0 12px 0 !important;
  align-self: center;
}

.built-prod__stat-desc {
  font-family: var(--font-primary) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  max-width: 240px;
  color: var(--c-text-muted) !important;
}

@media (max-width: 900px) {
  .built-prod__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 16px !important;
  }
  .built-prod__stat {
    border-left: 0 !important;
  }
}

/* ── Inputs: soft + warm-bordered ── */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
textarea,
select {
  background: var(--c-bg-white) !important;
  border: 1px solid var(--c-border-light) !important;
  border-radius: var(--r-sm) !important;
  padding: 10px 14px !important;
  font-family: var(--font-primary) !important;
  color: var(--c-text-dark) !important;
}

input:focus,
textarea:focus,
select:focus {
  outline: 0 !important;
  border-color: var(--c-border-interactive) !important;
  box-shadow: var(--shadow-focus) !important;
}

/* ── Chips / pills / badges ── */
.chip, .pill, .tag, .badge,
[class*="__chip"], [class*="__pill"], [class*="__tag"], [class*="__badge"] {
  background: var(--c-chip-bg) !important;
  border: 1px solid var(--c-chip-border) !important;
  color: var(--c-text-muted) !important;
  font-weight: 500 !important;
  border-radius: var(--r-pill) !important;
  padding: 4px 10px !important;
}

/* ── Header: slim + transparent-at-top + frosted-on-scroll (Lovable) ── */
.site-header {
  background: transparent !important;
  transition: background 0.25s ease, border-color 0.25s ease, backdrop-filter 0.25s ease !important;
}

/* 임시: 블로그는 다크(#1F1E24) 아카이브/싱글이라 투명 헤더의 다크 로고·nav가 묻힘
   → 블로그 페이지에서만 솔리드 흰 헤더로(스크롤에도 안정). 블로그 라이트화하면 제거 */
body.post-type-archive-blog .site-header,
body.single-blog .site-header {
  background: #fff !important;
  border-bottom: 1px solid var(--c-border-light, rgba(0, 0, 0, 0.08)) !important;
}

.site-header__nav {
  background: transparent !important;
  border-bottom: 0 !important;
  padding: 0 !important;
  transition: background 0.25s ease, border-color 0.25s ease !important;
}

.site-header__nav-top {
  background: transparent !important;
  border-bottom: 1px solid transparent !important;
  padding: 9px var(--container-px) !important;
  min-height: 64px !important;
  box-sizing: border-box !important;
  transition: background 0.25s ease, border-color 0.25s ease !important;
}

/* Slimmer logo */
.site-header__logo-img {
  width: auto !important;
  height: 22px !important;
}

/* Scrolled state — frosted translucent surface */
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.72) !important;
  -webkit-backdrop-filter: saturate(160%) blur(16px) !important;
  backdrop-filter: saturate(160%) blur(16px) !important;
}

.site-header.is-scrolled .site-header__nav {
  background: transparent !important;
}

.site-header.is-scrolled .site-header__nav-top {
  background: transparent !important;
  border-bottom-color: rgba(28, 28, 28, 0.06) !important;
}

/* Mega-menu open should NOT change header background — let the scroll state alone decide */
.site-header__nav.mega-open,
.site-header__nav:has(.nav-mega:hover),
.site-header__nav:has(.nav-links__dropdown--mega:hover) {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* ── Nav links: plain text, no pill background (Lovable) ── */
.nav-links__trigger {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 4px 12px !important;
  font-family: var(--font-primary) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  color: var(--c-text-dark) !important;
  transition: color 0.18s ease, opacity 0.18s ease !important;
}

.nav-links__trigger:hover {
  background: transparent !important;
  opacity: 0.7 !important;
}

.nav-links__chevron {
  opacity: 0.6 !important;
  width: 14px !important;
  height: 14px !important;
}

.nav-links__chevron svg {
  width: 100% !important;
  height: 100% !important;
}

/* Simple dropdown panel (Company/Resources non-mega) — clean white card */
.nav-links__panel {
  background: var(--c-bg-white) !important;
  border: 1px solid rgba(28, 28, 28, 0.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 48px -16px rgba(0, 0, 0, 0.12) !important;
  padding: 16px !important;
  min-width: 240px !important;
}

/* ── Mega menu: contained floating white card, left-aligned to trigger ── */
.nav-mega {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0;
  transform: none !important;
  width: max-content !important;
  max-width: 920px !important;
  padding: 16px !important;
  background: var(--c-bg-white) !important;
  border: 1px solid rgba(28, 28, 28, 0.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.14) !important;
  z-index: 250 !important;
}

/* Match header nav inner alignment to content container (1280 + 32px internal padding) */
.site-header__nav-menu {
  max-width: var(--container-max) !important;
  padding-left: var(--container-px) !important;
  padding-right: var(--container-px) !important;
  box-sizing: border-box !important;
}

/* Remove duplicate padding on nav-top so we don't double-pad */
.site-header__nav-top {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.nav-mega__inner {
  flex: 0 0 auto !important;
  max-width: none !important;
  width: auto !important;
  min-width: 280px !important;
  gap: 0 !important;
  padding: 0 !important;
  align-items: stretch !important;
}

/* Mega 우측 강조(피처) 영역 — 이미지 + 제목 + 설명 + CTA 카드 */
.nav-mega__inner:has(.nav-mega__feature) {
  display: flex !important;
  flex-direction: row !important;
  gap: 20px !important;
  align-items: stretch !important;
}
/* 링크 컬럼은 위로 정렬(피처 카드가 높이를 정의) */
.nav-mega__inner:has(.nav-mega__feature) .nav-mega__link-wrapper { align-self: flex-start !important; }
.nav-mega__feature {
  flex: 0 0 320px !important;
  display: flex !important;
  flex-direction: column;
  padding: 0 !important;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(28, 28, 28, 0.08);
  text-decoration: none !important;
  color: inherit !important;
  transition: border-color .2s ease, box-shadow .2s ease;
}
a.nav-mega__feature:hover {
  border-color: rgba(138, 119, 224, 0.45) !important;
  box-shadow: 0 8px 24px -12px rgba(138, 119, 224, 0.45);
}
.nav-mega__feature-media {
  height: 150px;
  background:
    radial-gradient(120px 80px at 72% 60%, rgba(138,119,224,0.25), transparent 70%),
    linear-gradient(135deg, #EFEAFB 0%, #F7F5FF 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* phase-1: 메가 피쳐 미디어 — 패널별 기존(main) 화면 스크린샷 임시 사용 */
.nav-mega[data-mega-panel="platform"] .nav-mega__feature-media {
  background-image: url('../images/sections/nav-mega-ss-syntitan-alt.png');
  background-position: top center;
}
.nav-mega[data-mega-panel="capabilities"] .nav-mega__feature-media {
  background-image: url('../images/sections/nav-mega-ss-dts.png');
  background-position: top center;
}
.nav-mega[data-mega-panel="learn"] .nav-mega__feature-media {
  background-image: url('../images/sections/nav-mega-ss-resources.png');
  background-position: top center;
}
.nav-mega[data-mega-panel="company"] .nav-mega__feature-media {
  background-image: url('../images/sections/nav-mega-ss-company.png');
  background-position: top center;
}
.nav-mega__feature-body {
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px 18px 18px;
}
.nav-mega__feature-tag {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--c-accent-violet, #8A77E0);
}
.nav-mega__feature-title {
  margin: 2px 0 0 !important; font-size: 16px; font-weight: 700; line-height: 1.3;
  color: var(--c-text-dark, #1c1c1c);
}
.nav-mega__feature-note {
  margin: 0 !important; font-size: 13px; line-height: 1.55; color: #6B6B72;
}
.nav-mega__feature-cta {
  align-self: flex-start; margin-top: 12px;
  padding: 8px 16px; border-radius: 8px;
  background: var(--c-accent-violet, #8A77E0); color: #fff;
  font-size: 13px; font-weight: 600;
}

/* Hide empty card-group strip that renders as a 2px vertical line */
.nav-mega__content,
.nav-mega__card-group:empty,
.nav-mega__card-group:not(:has(.nav-mega__card-bg)):not(:has(.nav-mega__card-texts)) {
  display: none !important;
}

/* Force-hide card-group panels entirely (no card preview used) */
.nav-mega .nav-mega__card-group {
  display: none !important;
  border: 0 !important;
  background: transparent !important;
}

.nav-mega__link-wrapper {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 280px !important;
  padding: 0 !important;
  gap: 0 !important;
  align-items: stretch !important;
}

.nav-mega__links {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 280px !important;
  padding: 0 !important;
  gap: 2px !important;
}

/* Floating mega link rows */
.nav-mega__link {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  transition: background 0.15s ease !important;
}

.nav-mega__link:hover {
  background: rgba(28, 28, 28, 0.04) !important;
}

.nav-mega .nav-mega__title,
.nav-mega__link .nav-mega__title {
  font-family: var(--font-display) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--c-text-dark) !important;
  letter-spacing: -0.1px !important;
}

.nav-mega .nav-mega__desc,
.nav-mega__link .nav-mega__desc {
  font-family: var(--font-primary) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  color: var(--c-text-muted) !important;
  letter-spacing: 0 !important;
}

/* Hide the full-page mega backdrop blur — Lovable mega is contained, not overlay */
.nav-mega__bg-blur,
.site-header__nav:has(.nav-links__dropdown--mega:hover) .nav-mega__bg-blur,
.site-header__nav:has(.nav-mega:hover) .nav-mega__bg-blur {
  display: none !important;
}

/* Don't take over the whole header bar when mega is open */
.site-header__nav.mega-open .site-header__nav-top,
.site-header__nav:has(.nav-mega:hover) .site-header__nav-top {
  border-bottom: 1px solid transparent !important;
  width: 100% !important;
}

/* Right-block buttons: small + tight (Log in / Get started feel) */
.site-header__right-block {
  align-items: center !important;
  gap: 6px !important;
}

/* Extra breathing room after the language switcher */
.nav-lang {
  margin-right: 12px !important;
}

.site-header__right-block .btn,
.site-header__right-block a[class*="btn"] {
  padding: 8px 14px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

/* Contact button: transparent ghost with hairline border (Lovable Log in) */
.btn--contact {
  background: transparent !important;
  border: 1px solid var(--c-border-interactive) !important;
  border-radius: var(--r-sm) !important;
  color: var(--c-text-dark) !important;
  padding: 7px 14px !important;
  line-height: 20px !important;
}

.btn--contact:hover {
  background: rgba(28, 28, 28, 0.04) !important;
}

/* Kill hover-lift motion on buttons / cards (Lovable stays still) */
.btn:hover,
.button:hover,
[class*="__btn"]:hover,
[class*="-btn"]:hover,
a[class*="button"]:hover,
.cta:hover,
[class*="__card"]:hover,
[class*="-card"]:hover {
  transform: none !important;
}

/* Try Syntitan: dark charcoal pill (Lovable Get started) */
.btn--dark {
  background: var(--c-text-dark) !important;
  color: var(--c-text-white) !important;
  border: 1px solid transparent !important;
  border-radius: var(--r-sm) !important;
  padding: 8px 14px !important;
  line-height: 20px !important;
  box-shadow:
    rgba(255, 255, 255, 0.2) 0 0.5px 0 0 inset,
    rgba(0, 0, 0, 0.2) 0 0 0 0.5px inset,
    rgba(0, 0, 0, 0.05) 0 1px 2px 0 !important;
}

.btn--dark:hover {
  background: #2a2a2a !important;
}

/* Language switcher container: flex-center so globe sits in middle of nav row */
.nav-lang {
  display: flex !important;
  align-items: center !important;
  align-self: center !important;
  font-family: var(--font-primary) !important;
}

.nav-lang__menu,
.nav-lang__option {
  font-family: var(--font-primary) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

/* Language switcher: icon + caret only, no card background */
.nav-lang__summary {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 6px !important;
  gap: 4px !important;
  opacity: 0.7 !important;
  transition: opacity 0.18s ease !important;
}

.nav-lang__summary:hover,
.nav-lang[open] .nav-lang__summary {
  background: transparent !important;
  opacity: 1 !important;
}

.nav-lang__globe {
  width: 18px !important;
  height: 18px !important;
}

.nav-lang__summary {
  gap: 4px !important;
}

.nav-lang__caret {
  display: block !important;
  width: 10px !important;
  height: 10px !important;
  opacity: 0.6 !important;
}

/* Language dropdown still gets the warm card */
.nav-lang__menu {
  background: #fbf9f4 !important;
  border: 1px solid rgba(28, 28, 28, 0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 48px -16px rgba(0, 0, 0, 0.12) !important;
}

/* ── Footer: stays light (Lovable footer is not inverse) ── */
.site-footer,
.footer,
footer[class*="footer"] {
  background: var(--c-bg-light) !important;
  border-top: 1px solid var(--c-border-light) !important;
}

/* ── Inline style background-image strip (banners w/ photo bgs) ── */
section[style*="background-image"],
div[style*="background-image"] {
  background-image: none !important;
}

/* ── Hero graphic placeholder (브랜드 필름 영역) ── */
.hero__graphic--placeholder {
  width: 100%;
  max-width: 1216px;
  margin: 0 auto;
  aspect-ratio: var(--hero-graphic-w, 1280) / var(--hero-graphic-h, 680);
  background: linear-gradient(180deg, rgba(138, 119, 224, 0.06), rgba(138, 119, 224, 0.02));
  border: 1px dashed rgba(138, 119, 224, 0.45);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__graphic-placeholder-label {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(60, 51, 110, 0.6);
}

/* ── Hero subtitle 하단 여백 축소 (actions가 상하 여백을 자체 관리) ── */
.hero__subtitle {
  margin-bottom: 0 !important;
}

/* ── Hero CTA actions (상하 여백 동일) ── */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 56px 0 56px;
}

.hero__actions .hero__btn {
  padding: 12px 22px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 9999px;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: all 0.18s ease;
}

/* ── Section eyebrow (.ai-models__eyebrow와 동일 스타일을 다른 섹션에도 적용) ── */
.section__eyebrow {
  display: inline-block;
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--c-accent-violet);
  margin-bottom: 20px;
}

/* eval-cta는 어두운 surface에 떠있을 수 있어 톤 조정 */
.eval-cta .section__eyebrow {
  color: var(--c-accent-violet);
  opacity: 0.9;
}

/* ──────────────────────────────────────────────────────────────
   Hero entrance animation (first viewport on page load)
   Fade-up + soft blur clear, staggered per element.
   Respects prefers-reduced-motion.
   ────────────────────────────────────────────────────────────── */
@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes heroFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Background wash subtle fade-in */
.hero {
  animation: heroFadeIn 1.2s ease-out both;
}

/* Stagger: eyebrow(없음) → title → subtitle → actions → graphic */
.hero__title,
.hero__subtitle,
.hero__actions,
.hero__graphic {
  animation: heroFadeUp 0.95s cubic-bezier(0.22, 1, 0.36, 1) both;
  will-change: transform, opacity, filter;
}

.hero__title    { animation-delay: 0.10s; }
.hero__subtitle { animation-delay: 0.30s; }
.hero__actions  { animation-delay: 0.50s; }
.hero__graphic  { animation-delay: 0.70s; }

/* Title 자체의 br 전후 라인이 한 단어로 끊어지지 않게,
   복잡한 글자별 stagger는 생략하고 통째로 처리 */

@media (prefers-reduced-motion: reduce) {
  .hero,
  .hero__title,
  .hero__subtitle,
  .hero__actions,
  .hero__graphic {
    animation: none !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   Section header alignment: LEFT for all sections except hero.
   Hero stays centered, everything below shifts to left-aligned editorial feel.
   ────────────────────────────────────────────────────────────── */

/* Targeted section headers — left align text + reset auto-centering margins */
.ai-models__header,
.comparison__header,
.entry-point__header,
.ai-ready__header,
.problem-match__header,
.built-prod__header,
.industry-cases__header,
.eval-cta__inner {
  text-align: left !important;
}

/* eyebrow margin-bottom: title과의 간격 정돈 */
.ai-models__header > .section__eyebrow,
.comparison__header > .section__eyebrow,
.entry-point__header > .section__eyebrow,
.ai-ready__header > .section__eyebrow,
.problem-match__header > .section__eyebrow,
.built-prod__header > .section__eyebrow,
.industry-cases__header > .section__eyebrow {
  margin-bottom: 24px !important;
}

/* eyebrow + subtitle: drop auto margins so they don't recentre */
.ai-models__header .section__eyebrow,
.comparison__header .section__eyebrow,
.entry-point__header .section__eyebrow,
.ai-ready__header .section__eyebrow,
.problem-match__header .section__eyebrow,
.built-prod__header .section__eyebrow,
.industry-cases__header .section__eyebrow,
.eval-cta__inner .section__eyebrow {
  display: inline-block !important;
}

.ai-models__subtitle,
.comparison__subtitle,
.entry-point__subtitle,
.ai-ready__subtitle,
.problem-match__subtitle,
.built-prod__subtitle,
.industry-cases__lead,
.eval-cta__body {
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
  max-width: 100% !important;
  width: fit-content !important;
  justify-self: end !important; /* 컬럼 우측 가장자리에 anchor */
}

/* eval-cta actions: left-align too */
.eval-cta__actions {
  justify-content: flex-start !important;
}

/* syntitan-intro 은 카드형이라 별도 처리 — inner 컨테이너만 좌측 정렬 */
.syntitan-intro .container.syntitan-intro__inner {
  text-align: left !important;
}
.syntitan-intro .section__eyebrow,
.syntitan-intro__title,
.syntitan-intro__body {
  text-align: left !important;
}
.syntitan-intro__actions {
  justify-content: flex-start !important;
}

/* 타이틀 영역 2단 구성 — 좌측: eyebrow + title / 우측: body (subtitle 역할)
   row-gap 없이 margin으로 각 블록 간격 제어 */
.syntitan-intro .container.syntitan-intro__inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) !important;
  column-gap: 72px !important;
  row-gap: 0 !important;
}
.syntitan-intro .section__eyebrow {
  grid-column: 1;
  grid-row: 1;
  margin: 0 0 20px 0 !important;
}
.syntitan-intro__title {
  grid-column: 1;
  grid-row: 2;
  margin: 0 !important;
}
.syntitan-intro__body {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: end;
  margin: 0 !important;
}

.more-link,
.syntitan-intro__more-link,
.built-prod__more-link,
.ai-ready__col-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 600;
  color: var(--c-accent-violet);
  text-decoration: none;
  transition: gap 0.18s ease, color 0.18s ease;
}

.built-prod__header .built-prod__subtitle-wrap {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  align-self: end !important;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.built-prod__header .built-prod__subtitle-wrap .built-prod__subtitle {
  grid-column: auto !important;
  grid-row: auto !important;
  margin: 0 !important;
  padding-bottom: 0 !important;
}

.more-link:hover,
.syntitan-intro__more-link:hover,
.built-prod__more-link:hover,
.ai-ready__col-cta:hover {
  gap: 8px;
  color: var(--c-text-dark);
}

.more-link span,
.syntitan-intro__more-link span,
.built-prod__more-link span,
.ai-ready__col-cta span {
  font-weight: 500;
}
.syntitan-intro__actions {
  grid-column: 1 / -1;
  grid-row: 3;
  margin: 56px 0 0 0 !important;
}
.syntitan-intro__graphic {
  grid-column: 1 / -1;
  grid-row: 4;
  margin: 96px 0 0 0 !important;
}

@media (max-width: 900px) {
  .syntitan-intro .container.syntitan-intro__inner {
    grid-template-columns: 1fr !important;
  }
  .syntitan-intro .section__eyebrow,
  .syntitan-intro__title,
  .syntitan-intro__body,
  .syntitan-intro__actions,
  .syntitan-intro__graphic {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
  .syntitan-intro__body { margin-top: 24px !important; }
  .syntitan-intro__actions { margin-top: 32px !important; }
  .syntitan-intro__graphic { margin-top: 56px !important; }
}

/* ──────────────────────────────────────────────────────────────
   Section header 2-column layout (Linear/Vercel editorial pattern)
   좌측: eyebrow + title / 우측: subtitle
   Hero / industry-cases / client-logos 는 그대로 둠
   ────────────────────────────────────────────────────────────── */
.ai-models__header,
.comparison__header,
.entry-point__header,
.ai-ready__header,
.problem-match__header,
.built-prod__header,
.industry-cases__header {
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) !important;
  column-gap: 72px !important;
  align-items: end !important;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
  margin: 0 0 96px 0 !important;
  max-width: none !important;
  width: 100% !important;
}

/* 좌측 컬럼 (eyebrow + title) */
.ai-models__header > .section__eyebrow,
.comparison__header > .section__eyebrow,
.entry-point__header > .section__eyebrow,
.ai-ready__header > .section__eyebrow,
.problem-match__header > .section__eyebrow,
.built-prod__header > .section__eyebrow,
.industry-cases__header > .section__eyebrow {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: start !important;
}

.ai-models__title,
.comparison__title,
.entry-point__title,
.ai-ready__title,
.problem-match__title,
.built-prod__title,
.industry-cases__header .industry-cases__section-title {
  grid-column: 1 !important;
  grid-row: 2 !important;
  margin-bottom: 0 !important;   /* align-items:end에서 타이틀 하단이 서브타이틀과 어긋나던 원인 제거 */
}

.industry-cases__header .industry-cases__section-title,
.industry-cases__header .industry-cases__lead {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
}

.industry-cases__header .industry-cases__lead {
  font-family: var(--font-primary) !important;
  font-size: 18px !important;
  line-height: 30px !important;
  letter-spacing: -0.2px !important;
}

/* 우측 컬럼 (subtitle) */
.ai-models__subtitle,
.comparison__subtitle,
.entry-point__subtitle,
.ai-ready__subtitle,
.problem-match__subtitle,
.built-prod__subtitle,
.industry-cases__header .industry-cases__lead {
  grid-column: 2 !important;
  grid-row: 2 !important;          /* 타이틀과 같은 행 → 둘 다 align-self:end로 하단 baseline 정렬 */
  align-self: end !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding-bottom: 0 !important;
}

/* ai-ready body: 2-column placeholder for future content */
.ai-ready__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
}

.ai-ready__cell {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ai-ready__cell > .ai-ready__col {
  flex: 1;
}

.ai-ready__col-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  color: var(--c-text-dark);
  letter-spacing: -0.4px !important;
}

.ai-ready__body .ai-ready__col {
  min-height: 240px;
  border: 1px solid var(--c-border-light);
  border-radius: 12px;
  padding: 24px;
  background: var(--c-bg-white);
}

.ai-ready__body .ai-ready__col--has-visual {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* phase-1: 비주얼 제거된 2-col 텍스트 카드 — 외곽 col 24px 이중패딩/과한 min-height 제거
   (col-body가 패딩 담당). 3-col capability 카드는 제외. 비주얼 복구 시 무해. */
.ai-ready__body:not(.ai-ready__body--3col) .ai-ready__col {
  padding: 0;
  min-height: 0;
}

.ai-ready__visual {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(180deg, #F6F4FB 0%, #EDE9F8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ai-ready__visual .entry-point__icon-frame {
  width: 100%;
  height: 100%;
}

.ai-ready__col-body {
  padding: 26px 26px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── In-card eyebrow (mono / JetBrains) — shared across cards ── */
.card__eyebrow,
.ai-ready__col-eyebrow,
.industry-cases__attr-text .industry-cases__industry,
.industry-cases__panel-head .industry-cases__industry {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-accent-violet);
}

.ai-ready__col-headline {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.3px;
  margin: 0;
  color: var(--c-text-dark);
  line-height: 1.25;
}

.ai-ready__col-lead {
  font-family: var(--font-primary);
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-text-body);
  margin: 0;
}

.ai-ready__col-points {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ai-ready__col-points li {
  position: relative;
  padding-left: 20px;
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-text-dark);
}

.ai-ready__col-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-accent-violet);
}

.ai-ready__col-actions {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 12px;
}

/* 칩 그룹: 여러 마켓플레이스 칩을 서로 붙여서 한 묶음으로 (CTA는 좌, 칩 묶음은 우) */
.ai-ready__col-chips { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* 모바일: "더 보기" + 클라우드 chip이 좁은 폭에서 겹치는 문제 → 세로 스택 */
@media (max-width: 768px) {
  .ai-ready__col-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .ai-ready__col-chips { width: 100%; }
}

/* .ai-ready__col-cta rules consolidated into shared .more-link family above */
.ai-ready__col-cta {
  margin-top: 0; /* col-actions handles top spacing via padding */
}

.ai-ready__col-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 20px 3px 8px;
  border: 1px solid var(--c-border-light);
  border-radius: 999px;
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text-dark);
  background: var(--c-bg-white);
}

.ai-ready__col-chip-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}

.ai-ready__body--3col {
  margin-top: 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.ai-ready__body--3col .ai-ready__col {
  min-height: 200px;
}

.ai-ready__body--3col .ai-ready__col-title {
  font-size: 20px;
}

.ai-ready__body--3col .ai-ready__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ai-ready__card-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: visible;
  margin-bottom: 4px;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.ai-ready__card-icon svg {
  width: 28px;
  height: 28px;
  margin-left: -2px;
}

.ai-ready__card-icon svg > g > rect[fill="white"]:first-child,
.ai-ready__card-icon svg > rect[fill="white"]:first-child {
  display: none;
}

.ai-ready__card-icon svg path[fill="black"]:not([stroke]),
.ai-ready__card-icon svg path[fill="#000"]:not([stroke]),
.ai-ready__card-icon svg path[fill="#000000"]:not([stroke]) {
  fill: var(--c-accent-violet);
}

.ai-ready__card-icon svg [stroke="black"],
.ai-ready__card-icon svg [stroke="#000"],
.ai-ready__card-icon svg [stroke="#000000"] {
  stroke: var(--c-accent-violet) !important;
}

.ai-ready__card-eyebrow {
  font-family: var(--font-primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-accent-violet);
}

.ai-ready__card-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: var(--c-text-dark);
  letter-spacing: -0.2px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.ai-ready__card-text {
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-text-body);
  margin: 0;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

@media (max-width: 900px) {
  .ai-ready__body--3col {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 900px) {
  .ai-ready__body {
    grid-template-columns: 1fr;
  }
}

/* 모바일: 1단 스택으로 fallback */
@media (max-width: 900px) {
  .ai-models__header,
  .comparison__header,
  .entry-point__header,
  .ai-ready__header,
  .problem-match__header,
  .built-prod__header,
  .industry-cases__header {
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
    align-items: start !important;
    margin-bottom: 56px !important;
  }
  .ai-models__subtitle,
  .comparison__subtitle,
  .entry-point__subtitle,
  .ai-ready__subtitle,
  .problem-match__subtitle,
  .built-prod__subtitle {
    grid-column: 1 !important;
    grid-row: auto !important;
    margin-top: 16px !important;
    padding-bottom: 0 !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   Client logos + Thesis strip (Hero 직후 신뢰 + 관점 선언)
   Linear pattern: 로고 위 / thesis 아래 (bright prefix + muted accent)
   ────────────────────────────────────────────────────────────── */
.client-logos__head {
  padding-top: 24px !important;
  padding-bottom: 8px !important;
}

.client-logos__head .section__eyebrow {
  margin-bottom: 0 !important;
}

.client-logos__thesis {
  padding-top: 0 !important;
  padding-bottom: 48px !important;
}

.client-logos__thesis-copy {
  font-family: var(--font-display) !important;
  font-size: clamp(24px, 2.6vw, 36px) !important;
  font-weight: 600 !important;
  line-height: 1.22 !important;
  letter-spacing: -1.2px !important;
  margin: 0 !important;
  max-width: 1216px !important;
}

.client-logos__thesis-prefix,
.client-logos__thesis-accent {
  font-weight: 600 !important;
}

.client-logos__marquee {
  padding-top: 32px !important;
}

.client-logos__thesis-prefix {
  color: var(--c-text-dark) !important;
}

.client-logos__thesis-accent {
  color: var(--c-text-subtle) !important;
}

/* ──────────────────────────────────────────────────────────────
   Section vertical rhythm — 상 96 / 하 128 (2026-05-14)
   ────────────────────────────────────────────────────────────── */
.section {
  padding-top: 96px !important;
  padding-bottom: 128px !important;
}

/* Hero는 fixed header(64px) 아래 충분한 breathing 필요 → 160px (시각 gap 96px) */
.section.hero {
  padding-top: 160px !important;
  /* 브랜드 필름 placeholder 숨김 후 텍스트-only hero → 하단 공백 축소(.section 128px 덮어씀) */
  padding-bottom: 72px !important;
}
@media (max-width: 900px) {
  .section.hero { padding-bottom: 48px !important; }
}

@media (max-width: 900px) {
  .section {
    padding-top: 64px !important;
    padding-bottom: 80px !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   Section dividers — hairline between every section
   ────────────────────────────────────────────────────────────── */
main > section + section,
main > section + .section,
section + section.section {
  border-top: 1px solid var(--c-border-light) !important;
}

/* ── Client logos item: 라벨 제거 후 그리드 row 정리 (80px 1줄로 축소) ── */
.client-logos__item {
  height: 80px !important;
  grid-template-rows: 80px !important;
  row-gap: 0 !important;
}

/* ──────────────────────────────────────────────────────────────
   Comparison → 3-layer Stack Diagram (Bible v5.0 Missing Layer)
   Top: AI Execution / Middle: CUBIG Operating Layer / Bottom: Data Management
   ────────────────────────────────────────────────────────────── */
.comparison__stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  max-width: 1216px;
  width: 100%;
}

.comparison__layer {
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: center;
  gap: 32px;
  padding: 40px 40px;
  background: var(--c-bg-white);
  border: 1px solid var(--c-border-light);
  border-radius: 16px;
  transition: transform 0.2s ease;
}

/* 위에서 아래로 쌓이는 톤: 첫 박스는 살짝 들어가 보이고, accent는 violet wash */
.comparison__layer + .comparison__layer {
  margin-top: -1px;  /* 살짝 겹치게 — stack 느낌 */
}

.comparison__layer--accent {
  background: linear-gradient(180deg, rgba(138, 119, 224, 0.06), rgba(138, 119, 224, 0.02));
  border: 1px solid rgba(138, 119, 224, 0.4) !important;
  position: relative;
  z-index: 1;
  box-shadow: 0 1px 24px rgba(138, 119, 224, 0.08) !important;
}

.comparison__layer-index {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--c-text-subtle);
}

.comparison__layer--accent .comparison__layer-index {
  color: var(--c-accent-violet);
}

.comparison__layer-body {
  min-width: 0;
}

.comparison__layer-label {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.6vw, 24px);
  font-weight: 700;
  letter-spacing: -0.6px;
  color: var(--c-text-dark);
  margin: 0 0 6px 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.comparison__layer-brand {
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--c-accent-violet);
  background: rgba(138, 119, 224, 0.12);
  padding: 4px 10px;
  border-radius: 999px;
}

.comparison__layer-desc {
  font-family: var(--font-primary);
  font-size: 15px;
  line-height: 1.5;
  color: var(--c-text-muted);
  margin: 0;
}

/* footer 톤 정돈 */
.comparison__footer {
  margin: 40px 0 0 !important;
  text-align: center !important;
  color: var(--c-text-subtle) !important;
  font-size: 14px !important;
}

@media (max-width: 720px) {
  .comparison__layer {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 32px 24px;
  }
}

/* ──────────────────────────────────────────────────────────────
   Comparison → Horizontal 3-lane flow (Enterprise Data → CUBIG → AI Execution)
   References: Linear "data → platform → output" pattern
   ────────────────────────────────────────────────────────────── */
.comparison__flow {
  display: grid;
  grid-template-columns: 1fr 56px 1.2fr 56px 1fr;
  align-items: center;
  gap: 0;
  max-width: 1216px;
  margin: 0 auto;
  padding: 8px 0;
}

/* Side columns (Enterprise Data, AI Execution) */
.comparison__flow-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.comparison__flow-label {
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--c-text-subtle);
  margin-bottom: 8px;
}

.comparison__flow-pills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.comparison__flow-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--c-bg-white);
  border: 1px solid var(--c-border-light);
  border-radius: 999px;
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 500;
  color: var(--c-text-dark);
  line-height: 1.2;
  width: fit-content;
  max-width: 100%;
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.comparison__flow-pill:hover {
  transform: translateX(2px);
  border-color: var(--c-border-interactive);
}

.comparison__flow-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-text-muted);
  flex-shrink: 0;
}

.comparison__flow-pill--data .comparison__flow-pill-dot {
  background: var(--c-text-subtle);
}

.comparison__flow-pill--ai .comparison__flow-pill-dot {
  background: var(--c-accent-violet);
}

/* Right column pills nudge left on hover (data flows leftward visually? no — keep) */
.comparison__flow-side--right .comparison__flow-pill:hover {
  transform: translateX(-2px);
}

/* Center column: CUBIG brand card */
.comparison__flow-center {
  text-align: center;
  padding: 56px 32px;
  background: var(--c-bg-white);
  border: 1px solid rgba(138, 119, 224, 0.4);
  border-radius: 20px;
  box-shadow: 0 1px 24px rgba(138, 119, 224, 0.10) !important;
  position: relative;
  z-index: 1;
  background-image:
    radial-gradient(120% 80% at 50% 0%, rgba(138, 119, 224, 0.07), transparent 60%),
    linear-gradient(180deg, var(--c-bg-white), var(--c-bg-white)) !important;
}

.comparison__flow-eyebrow {
  display: block;
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--c-accent-violet);
  margin-bottom: 14px;
}

.comparison__flow-brand {
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 800;
  letter-spacing: -2px;
  color: var(--c-text-dark);
  line-height: 1.05;
  margin: 0 0 16px 0;
}

.comparison__flow-desc {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.4px;
  color: var(--c-text-muted);
  margin: 0;
}

/* Flow arrows between columns */
.comparison__flow-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text-subtle);
  opacity: 0.6;
  height: 24px;
}

.comparison__flow-arrow svg {
  width: 100%;
  height: 24px;
  display: block;
}

/* Mobile fallback: stack vertically */
@media (max-width: 900px) {
  .comparison__flow {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 0;
  }
  .comparison__flow-side {
    align-items: stretch;
  }
  .comparison__flow-pills {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .comparison__flow-center {
    padding: 40px 24px;
  }
  .comparison__flow-arrow {
    transform: rotate(90deg);
    width: 24px;
    margin: 0 auto;
  }
}

/* ──────────────────────────────────────────────────────────────
   Comparison → 3 equal cards (Enterprise Data · CUBIG · AI Execution)
   ────────────────────────────────────────────────────────────── */
.comparison__cards {
  display: grid;
  grid-template-columns: 1fr 36px 1.25fr 36px 1fr;
  align-items: center;
  gap: 0;
  max-width: 1216px;
  margin: 0 auto;
}

/* Arrow between cards */
.comparison__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text-subtle);
  opacity: 0.55;
}

.comparison__arrow svg {
  width: 100%;
  max-width: 32px;
  height: 16px;
  display: block;
}

.comparison__card {
  background: var(--c-bg-white) !important;
  border: 1px solid var(--c-border-light) !important;
  border-radius: 20px !important;
  padding: 32px 28px !important;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.comparison__card--accent {
  border: 1px solid rgba(138, 119, 224, 0.4) !important;
  background-image:
    radial-gradient(120% 80% at 50% 0%, rgba(138, 119, 224, 0.08), transparent 60%),
    linear-gradient(180deg, var(--c-bg-white), var(--c-bg-white)) !important;
  box-shadow: 0 1px 24px rgba(138, 119, 224, 0.10) !important;
  position: relative;
  z-index: 1;
  padding: 64px 40px !important;
  gap: 18px;
}

.comparison__card-eyebrow {
  display: block;
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--c-text-subtle);
}

.comparison__card--accent .comparison__card-eyebrow {
  color: var(--c-accent-violet);
}

.comparison__card-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 1.8vw, 26px);
  font-weight: 700;
  letter-spacing: -0.6px;
  color: var(--c-text-dark);
  margin: 0;
}

.comparison__card-title--brand {
  font-size: clamp(36px, 3.4vw, 44px);
  font-weight: 800;
  letter-spacing: -1.6px;
  line-height: 1.05;
}

.comparison__card-desc {
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-text-muted);
  margin: -4px 0 12px 0;
}

.comparison__card--accent .comparison__card-desc {
  color: var(--c-text-dark);
}

.comparison__card-list {
  list-style: none;
  margin: 8px 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.comparison__card-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 500;
  color: var(--c-text-dark);
  line-height: 1.3;
}

.comparison__card-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-text-subtle);
  flex-shrink: 0;
}

.comparison__card--accent .comparison__card-dot {
  background: var(--c-accent-violet);
}

@media (max-width: 900px) {
  .comparison__cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .comparison__card {
    padding: 32px 24px !important;
  }
}

/* Clear wildcard __card border from non-card sub-elements inside comparison */
.comparison__cards,
.comparison__card-eyebrow,
.comparison__card-title,
.comparison__card-desc,
.comparison__card-list,
.comparison__card-list li {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.comparison__card-list {
  padding-left: 0 !important;
}

/* Re-establish dot circles (wildcard rule above clears these) */
.comparison__card-dot {
  background: var(--c-text-subtle) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  width: 6px !important;
  height: 6px !important;
  padding: 0 !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

.comparison__card--accent .comparison__card-dot {
  background: var(--c-accent-violet) !important;
}

/* ──────────────────────────────────────────────────────────────
   Comparison Figure (Linear FIG. pattern — dark surface + isometric stack)
   ────────────────────────────────────────────────────────────── */
.comparison__figure {
  position: relative;
  background: #0e0e0e !important;
  border-radius: 24px !important;
  padding: 80px 72px !important;
  margin: 0 !important;
  max-width: 1216px;
  width: 100%;
  overflow: hidden;
}

.comparison__figure-num {
  position: absolute;
  top: 32px;
  left: 32px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
}

.comparison__figure-grid {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 380px) 1fr;
  grid-template-rows: auto auto;
  column-gap: 64px;
  row-gap: 48px;
  align-items: center;
}

/* Side text blocks */
.comparison__figure-text {
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 1.55;
  max-width: 320px;
}

.comparison__figure-text--tl,
.comparison__figure-text--bl {
  justify-self: end;
  text-align: right;
}

.comparison__figure-text--tr,
.comparison__figure-text--br {
  justify-self: start;
  text-align: left;
}

.comparison__figure-text--tl  { grid-column: 1; grid-row: 1; }
.comparison__figure-text--tr  { grid-column: 3; grid-row: 1; }
.comparison__figure-text--bl  { grid-column: 1; grid-row: 2; }
.comparison__figure-text--br  { grid-column: 3; grid-row: 2; }

.comparison__figure-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 10px;
}

.comparison__figure-text p {
  margin: 0;
}

/* Center isometric stack */
.comparison__figure-visual {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* legacy figure-visual (dark variant) — unused, kept as dead code */
.comparison__figure-visual svg {
  width: 100%;
  max-width: 380px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ──────────────────────────────────────────────────────────────
   Comparison Stack Pair (2-col: isometric SVG + text labels per layer)
   화이트 테마, SVG 그대로 + chevron 그룹 단위 통일 pulse
   ────────────────────────────────────────────────────────────── */
.comparison__stack-pair {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  align-items: center;
  gap: 64px;
  max-width: 1216px;
  margin: 0 auto;
}

.comparison__stack-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.comparison__stack-visual svg {
  width: 100%;
  max-width: 420px;
  height: auto;
  display: block;
}

/* 3 text blocks vertically stacked, aligned to SVG layers */
.comparison__stack-labels {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 615px;
  gap: 24px;
}

.comparison__stack-label {
  padding: 18px 22px;
  background: var(--c-bg-white);
  border: 1px solid var(--c-border-light);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
}

.comparison__stack-label .comparison__stack-title {
  font-size: 18px;
  margin: 0 0 4px 0;
}

.comparison__stack-label .comparison__stack-title--brand {
  font-size: 22px;
}

.comparison__stack-label .comparison__stack-desc {
  font-size: 13px;
  line-height: 1.5;
}

.comparison__stack-label .comparison__stack-title { order: 1; }
.comparison__stack-label .comparison__stack-eyebrow { order: 2; }
.comparison__stack-label .comparison__stack-desc { order: 3; }

.comparison__stack-label--middle {
  border: 1px solid rgba(138, 119, 224, 0.35) !important;
  background: rgba(138, 119, 224, 0.04) !important;
  background-image: none !important;
  box-shadow: 0 1px 16px rgba(138, 119, 224, 0.08) !important;
}

.comparison__stack-label--bottom {
  background: rgba(15, 23, 42, 0.015) !important;
}

.comparison__stack-eyebrow {
  display: block;
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--c-text-subtle);
  margin-bottom: 8px;
}

.comparison__stack-eyebrow--accent {
  color: var(--c-accent-violet);
}

.comparison__stack-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px 0;
  flex-wrap: wrap;
}

.comparison__stack-title-row .comparison__stack-title,
.comparison__stack-title-row .comparison__stack-eyebrow {
  order: 0;
  margin: 0;
}

.comparison__stack-eyebrow--inline {
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--c-text-subtle);
  line-height: 1;
  font-weight: 600 !important;
}

.comparison__stack-eyebrow--inline.comparison__stack-eyebrow--accent {
  padding: 4px 10px;
  border-radius: 9999px;
  background: rgba(138, 119, 224, 0.10);
  color: var(--c-accent-violet);
  font-weight: 700 !important;
}

.comparison__stack-title {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.6vw, 24px);
  font-weight: 700;
  letter-spacing: -0.6px;
  color: var(--c-text-dark);
  margin: 0 0 8px 0;
}

.comparison__stack-title--brand {
  font-size: clamp(28px, 2.4vw, 36px);
  font-weight: 800;
  letter-spacing: -1.2px;
}

.comparison__stack-desc {
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-text-muted);
  margin: 0;
}

/* CUBIG layer label: slightly darker body text */
.comparison__stack-label--middle .comparison__stack-desc {
  color: var(--c-text-dark);
}

/* ── Tab-style expand: toggle button + panel ─────────────────── */
.comparison__stack-toggle {
  all: unset;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  padding: 0;
  cursor: pointer;
  color: inherit;
}

.comparison__stack-titles {
  flex: 1;
  min-width: 0;
}

.comparison__stack-chevron {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  color: var(--c-text-subtle);
  transition: transform 0.25s ease, color 0.25s ease, background 0.25s ease;
  margin-top: 2px;
}

.comparison__stack-label.is-active .comparison__stack-chevron {
  transform: rotate(180deg);
  color: var(--c-accent-violet);
  background: transparent;
}

.comparison__stack-panel {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  opacity: 0;
  margin-top: 0;
  padding-top: 0;
  border-top: 0 solid transparent;
  transition: grid-template-rows 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 0.22s ease,
              margin-top 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
              padding-top 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.comparison__stack-panel-inner {
  min-height: 0;
  overflow: hidden;
}

.comparison__stack-label.is-active .comparison__stack-panel {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--c-border-light);
}

.comparison__panel-lead,
.comparison__panel-foot {
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.comparison__panel-lead {
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-text-dark);
  margin: 0 0 14px 0;
}

.comparison__panel-lead strong {
  font-weight: 600;
  color: var(--c-text-dark);
}

.comparison__panel-foot {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--c-text-subtle);
  margin: 20px 0 0 0;
}

.comparison__panel-foot strong {
  color: var(--c-accent-violet);
  font-weight: 600;
}

/* Chip rows */
.comparison__chips {
  list-style: none;
  padding: 0 !important;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.comparison__chips li {
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 9999px;
  background: rgba(15, 23, 42, 0.04);
  color: var(--c-text-dark);
  border: 1px solid rgba(15, 23, 42, 0.06);
}

/* Plain chip style: execution panel — inline flow, bullet-separated, wraps if needed */
#comparison-panel-execution .comparison__chips {
  display: block;
  font-size: 12px;
  line-height: 1.5;
}

#comparison-panel-execution .comparison__chips li {
  display: inline;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--c-text-muted);
}

#comparison-panel-execution .comparison__chips li + li::before {
  content: "\2022";
  color: var(--c-text-subtle);
  margin: 0 7px;
  font-size: 10px;
  vertical-align: 1px;
}

.comparison__chips--syntitan li {
  background: rgba(59, 130, 246, 0.10);
  border-color: rgba(59, 130, 246, 0.30);
  color: #2563EB;
}

/* Syntitan / DTS / Capsule chips: inline text, bullet-separated, wraps if narrow */
.comparison__chips--syntitan,
.comparison__chips--dts,
.comparison__chips--capsule {
  display: block;
  font-size: 12px;
  line-height: 1.5;
}

.comparison__chips--syntitan li,
.comparison__chips--dts li,
.comparison__chips--capsule li {
  display: inline;
  padding: 0;
  background: transparent;
  border: none;
}

.comparison__chips--syntitan li { color: #2563EB; }
.comparison__chips--dts li { color: #C25E3D; }
.comparison__chips--capsule li { color: #0f8a5f; }

.comparison__chips--syntitan li + li::before,
.comparison__chips--dts li + li::before,
.comparison__chips--capsule li + li::before {
  content: "\2022";
  color: var(--c-text-subtle);
  margin: 0 6px;
  font-size: 10px;
  vertical-align: 1px;
}

.capability-card--dts .capability-card__title { color: #C25E3D !important; }
.capability-card--capsule .capability-card__title { color: #0f8a5f !important; }

/* Data card 3 — chips as 2-line tags with sub */
.comparison__chips--data {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 20px;
}

/* 모바일: 3열이 너무 좁아 텍스트 깨짐 → 2열 */
@media (max-width: 640px) {
  .comparison__chips--data {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px;
  }
  .comparison__chips--data li {
    padding: 14px 12px !important;
  }
}

.comparison__chips--data li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  background: var(--c-bg-white) !important;
  border: 1px solid var(--c-border-light) !important;
  border-radius: 12px !important;
  padding: 18px 16px !important;
  min-width: 0;
}

.comparison__chips--data strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text-dark);
}

.comparison__chips--data span {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.6px;
  color: var(--c-text-subtle);
  text-transform: uppercase;
}

/* Syntitan wrap (Card 2): outer = Syntitan, inner = DTS + Capsule */
.syntitan-wrap {
  border: 1.5px solid rgba(59, 130, 246, 0.30);
  border-radius: 12px;
  background: var(--c-bg-white, #ffffff);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.syntitan-wrap__inner {
  margin-top: 6px;
}

.syntitan-wrap__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.syntitan-wrap__brand {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: #2563EB;
}

.syntitan-wrap__role {
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--c-text-subtle);
}

.syntitan-wrap__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* 모바일: DTS / LLM Capsule 카드 좁아서 잘림 → 세로 스택 (1열, 2행) */
@media (max-width: 640px) {
  .syntitan-wrap__inner {
    grid-template-columns: 1fr;
  }
}

.capability-card {
  background: var(--c-bg-white) !important;
  border: 1px solid var(--c-border-light) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}

.capability-card--dts {
  border-color: rgba(229, 130, 90, 0.40) !important;
  background: var(--c-bg-white, #ffffff) !important;
}

.capability-card--capsule {
  border-color: rgba(20, 158, 113, 0.35) !important;
  background: var(--c-bg-white, #ffffff) !important;
}

.capability-card__title,
.capability-card__role {
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.capability-card .capability-card__title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.2px !important;
}

.capability-card--dts .capability-card__title { color: #0f8a5f; }
.capability-card--capsule .capability-card__title { color: var(--c-accent-violet); }

.capability-card__role {
  font-family: var(--font-primary);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--c-text-subtle);
  margin: 0;
}


/* ── SVG layer dim/highlight per active card ──────────────────── */
.comparison__stack-pair .comparison__stack-visual #top-layer,
.comparison__stack-pair .comparison__stack-visual #cubig-layer,
.comparison__stack-pair .comparison__stack-visual #bottom-layer {
  transition: opacity 0.35s ease, filter 0.35s ease;
}

/* SVG container + element: allow translated layers to render outside viewBox */
.comparison__stack-visual,
.comparison__stack-visual svg {
  overflow: visible;
}

/* ── SVG: separate layers when cubig is expanded ─────────────── */
.comparison__stack-pair .comparison__stack-visual #top-layer,
.comparison__stack-pair .comparison__stack-visual #top-mark,
.comparison__stack-pair .comparison__stack-visual #cubig-layer,
.comparison__stack-pair .comparison__stack-visual #bottom-layer,
.comparison__stack-pair .comparison__stack-visual #bottom-mark,
.comparison__stack-pair .comparison__stack-visual #dashed-line-left,
.comparison__stack-pair .comparison__stack-visual #dashed-line-right,
.comparison__stack-pair .comparison__stack-visual #dashed-line-center,
.comparison__stack-pair .comparison__stack-visual [id^="arrows-"] {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 0.4s ease,
              filter 0.4s ease;
}

/* When CUBIG card is expanded: spread top/bottom layers, stretch connectors */
.comparison__stack-pair[data-active="cubig"] .comparison__stack-visual #top-layer,
.comparison__stack-pair[data-active="cubig"] .comparison__stack-visual #top-mark {
  transform: translateY(-14px);
}

.comparison__stack-pair[data-active="cubig"] .comparison__stack-visual #bottom-layer,
.comparison__stack-pair[data-active="cubig"] .comparison__stack-visual #bottom-mark {
  transform: translateY(14px);
}

.comparison__stack-pair[data-active="cubig"] .comparison__stack-visual #dashed-line-left,
.comparison__stack-pair[data-active="cubig"] .comparison__stack-visual #dashed-line-right,
.comparison__stack-pair[data-active="cubig"] .comparison__stack-visual #dashed-line-center {
  transform: scaleY(1.14);
}

/* When top (execution) is expanded: lift top layer only */
.comparison__stack-pair[data-active="execution"] .comparison__stack-visual #top-layer,
.comparison__stack-pair[data-active="execution"] .comparison__stack-visual #top-mark {
  transform: translateY(-12px);
}
.comparison__stack-pair[data-active="execution"] .comparison__stack-visual #dashed-line-left,
.comparison__stack-pair[data-active="execution"] .comparison__stack-visual #dashed-line-right {
  transform: scaleY(1.08);
  transform-origin: center bottom;
}

/* When bottom (data) is expanded: drop bottom layer only */
.comparison__stack-pair[data-active="data"] .comparison__stack-visual #bottom-layer,
.comparison__stack-pair[data-active="data"] .comparison__stack-visual #bottom-mark {
  transform: translateY(12px);
}
.comparison__stack-pair[data-active="data"] .comparison__stack-visual #dashed-line-left,
.comparison__stack-pair[data-active="data"] .comparison__stack-visual #dashed-line-right {
  transform: scaleY(1.08);
  transform-origin: center top;
}

/* Dim non-active layers: low opacity + grayscale */
.comparison__stack-pair[data-active="execution"] .comparison__stack-visual #cubig-layer,
.comparison__stack-pair[data-active="execution"] .comparison__stack-visual #bottom-layer,
.comparison__stack-pair[data-active="data"] .comparison__stack-visual #cubig-layer,
.comparison__stack-pair[data-active="data"] .comparison__stack-visual #top-layer,
.comparison__stack-pair[data-active="cubig"] .comparison__stack-visual #top-layer,
.comparison__stack-pair[data-active="cubig"] .comparison__stack-visual #bottom-layer {
  opacity: 0.18 !important;
  filter: grayscale(1);
}

/* Active layer: boost saturation + soft glow */
.comparison__stack-pair[data-active="execution"] .comparison__stack-visual #top-layer,
.comparison__stack-pair[data-active="data"] .comparison__stack-visual #bottom-layer {
  opacity: 1 !important;
  filter: drop-shadow(0 6px 14px rgba(15, 23, 42, 0.10));
}

.comparison__stack-pair[data-active="cubig"] .comparison__stack-visual #cubig-layer {
  opacity: 1 !important;
  filter: drop-shadow(0 8px 18px rgba(138, 119, 224, 0.32)) saturate(1.15);
}

/* Mobile: hide SVG, vertical accordion */
@media (max-width: 900px) {
  .comparison__stack-pair .comparison__stack-visual {
    display: none;
  }
}

/* ── Chevron flow animation: 아래 → 위 순차 fade (흐르는 느낌) ── */
@keyframes chevron-flow {
  0%   { opacity: 0.15; }
  35%  { opacity: 1; }
  70%  { opacity: 0.15; }
  100% { opacity: 0.15; }
}

.comparison__stack-visual [id^="arrow-"] {
  animation: chevron-flow 1.6s ease-in-out infinite;
}

/* 각 그룹 안에서 bottom (-4) → top (-1) 순서로 lit up — 위로 흐르는 느낌 */
.comparison__stack-visual [id$="-4"] { animation-delay: 0s;    }
.comparison__stack-visual [id$="-3"] { animation-delay: 0.15s; }
.comparison__stack-visual [id$="-2"] { animation-delay: 0.30s; }
.comparison__stack-visual [id$="-1"] { animation-delay: 0.45s; }

@media (prefers-reduced-motion: reduce) {
  .comparison__stack-visual [id^="arrow-"] {
    animation: none;
    opacity: 0.6;
  }
}

@media (max-width: 900px) {
  .comparison__stack-pair {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .comparison__stack-visual svg {
    max-width: 360px;
  }
}

/* clear wildcard __card border from stack labels (use own border) */
.comparison__stack-labels,
.comparison__stack-label,
.comparison__stack-eyebrow,
.comparison__stack-title,
.comparison__stack-desc {
  background: transparent;
}

/* ── Chevron arrows: flow-up animation, staggered ── */
@keyframes chevron-flow-up {
  0%   { transform: translateY(8px); opacity: 0; }
  25%  { opacity: 0.95; }
  100% { transform: translateY(-8px); opacity: 0; }
}

.comparison__figure-visual [id^="arrow-"] {
  transform-box: fill-box;
  transform-origin: center;
  animation: chevron-flow-up 1.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.comparison__figure-visual [id$="-1"] { animation-delay: 0s; }
.comparison__figure-visual [id$="-2"] { animation-delay: 0.45s; }
.comparison__figure-visual [id$="-3"] { animation-delay: 0.90s; }
.comparison__figure-visual [id$="-4"] { animation-delay: 1.35s; }

/* arrow color */
.comparison__figure-visual [id^="arrow-"] path {
  stroke: rgba(255, 255, 255, 0.7) !important;
}

@media (prefers-reduced-motion: reduce) {
  .comparison__figure-visual [id^="arrow-"] {
    animation: none;
    opacity: 0.7;
  }
}

/* Mobile fallback */
@media (max-width: 900px) {
  .comparison__figure {
    padding: 56px 32px !important;
  }
  .comparison__figure-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto;
    row-gap: 32px;
  }
  .comparison__figure-text,
  .comparison__figure-text--tl,
  .comparison__figure-text--tr,
  .comparison__figure-text--bl,
  .comparison__figure-text--br {
    grid-column: 1 !important;
    justify-self: stretch !important;
    text-align: left !important;
    max-width: 100%;
  }
  .comparison__figure-text--tl { grid-row: 1; }
  .comparison__figure-text--tr { grid-row: 2; }
  .comparison__figure-visual   { grid-column: 1; grid-row: 3; }
  .comparison__figure-text--bl { grid-row: 4; }
  .comparison__figure-text--br { grid-row: 5; }
}

/* comparison__title-line--accent: violet 강조 (wildcard __title 룰이 dark로 잡아서 명시 override) */
.comparison__title-line--accent {
  color: var(--c-accent-violet) !important;
}

/* bottom-layer 박스를 더 옅은 회색으로 (white → very light gray) */
.comparison__stack-visual #bottom-layer rect[fill="white"],
.comparison__stack-visual #bottom-layer path[fill="white"] {
  fill: #f3f2f0 !important;
}

/* 3개 layer 모두 같은 opacity 0.85로 반투명 통일 */
.comparison__stack-visual #top-layer,
.comparison__stack-visual #cubig-layer,
.comparison__stack-visual #bottom-layer {
  opacity: 0.85 !important;
}

.comparison__stack-visual #top-layer {
  filter: drop-shadow(0 8px 20px rgba(28, 28, 28, 0.06));
}
.comparison__stack-visual #top-layer rect[fill="white"],
.comparison__stack-visual #top-layer path[fill="white"] {
  fill: #ffffff !important;
}

/* 박스 사이 vertical dashed lines — 중앙만 제거, 양 끝(left/right)은 유지 */
.comparison__stack-visual #dashed-line-center {
  display: none !important;
}

/* ── Section 서브타이틀 컬러 통일 — 모두 --c-text-muted로 ── */
.ai-models__subtitle,
.comparison__subtitle,
.entry-point__subtitle,
.ai-ready__subtitle,
.problem-match__subtitle,
.built-prod__subtitle,
.industry-cases__lead,
.eval-cta__body {
  color: var(--c-text-muted) !important;
}

/* 헤더 뒤에 block title 없이 바로 본문 시작하는 섹션 — gap 축소 (96 → 64) */
.comparison__header {
  margin-bottom: 64px !important;
}
@media (max-width: 768px) {
  .comparison__header {
    margin-bottom: 32px !important;
  }
}
/* entry-point는 H3 legend가 추가되어 표준 96px 유지 (H2 자체 mb 제거하여 시각 gap 정확히 96px) */
.entry-point__header .entry-point__title {
  margin-bottom: 0 !important;
}

/* Entry-point path label (Path A / Path B 구분 badge) */
.entry-point__path-label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--c-accent-violet);
  background: rgba(138, 119, 224, 0.10);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
}

/* ──────────────────────────────────────────────────────────────
   Entry-point: 2개 path를 가로 2-col 카드 그리드로 (Linear FIG. style)
   ────────────────────────────────────────────────────────────── */
.entry-point__list {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
  flex-direction: unset !important;
}

.entry-point__row,
.entry-point__row:nth-child(even) {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: unset !important;
  gap: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--c-border-light) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  background: var(--c-bg-white);
}

.entry-point__row:nth-child(even) .entry-point__visual {
  order: 0 !important;
}

.entry-point__visual {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  border-radius: 0 !important;
  padding: 24px 24px 0 !important;
}

.entry-point__body {
  width: 100% !important;
  padding: 32px 40px 40px !important;
  gap: 16px !important;
}

.entry-point__row-title {
  font-size: 18px !important;
  line-height: 1.4 !important;
}

/* 본문(body) 숨김 — 콘텐츠 압축. lead만 보여줌 */
.entry-point__row-body {
  display: none !important;
}

.entry-point__row-lead {
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--c-text-muted) !important;
}

.entry-point__actions {
  margin-top: 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

@media (max-width: 900px) {
  .entry-point__list {
    grid-template-columns: 1fr !important;
  }
}

/* entry-point title — 두 path 모두 동등하게 강조 (한쪽 violet accent 제거) */
.entry-point__title,
.entry-point__title .entry-point__title-accent,
h2.entry-point__title span.entry-point__title-accent {
  color: var(--c-text-dark) !important;
  -webkit-text-fill-color: var(--c-text-dark) !important;
  background: none !important;
}

/* ── Entry-point visual: icon-only (제품 UI 제거, persona·blocker 중심) ── */
.entry-point__visual--icon {
  aspect-ratio: 16 / 9 !important;
  background-image: none !important;
  background: var(--c-bg-white, #ffffff) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border-bottom: 1px solid var(--c-border-subtle, rgba(0, 0, 0, 0.08)) !important;
}

.entry-point__icon-frame {
  width: 100%;
  height: 100%;
  color: var(--c-accent-violet);
  display: flex;
  align-items: center;
  justify-content: center;
}

.entry-point__icon-frame svg,
.entry-point__icon-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  padding: 0;
  box-sizing: border-box;
}

.entry-point__persona {
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text-subtle);
  margin: 0 0 4px 0;
}

.entry-point__destination {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--c-accent-violet);
  margin: 8px 0 0 0;
}

/* Entry-point path label: 이미지 좌상단 코너 — 배경 없이 텍스트만 */
.entry-point__visual--icon {
  position: relative;
}

.entry-point__path-label--corner {
  position: absolute !important;
  top: 24px !important;
  left: 24px !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  color: var(--c-accent-violet) !important;
}

.entry-point__path-label--above {
  display: block !important;
  align-self: flex-start !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 0 -8px 0 !important;
  border-radius: 0 !important;
  color: var(--c-accent-violet) !important;
}

/* Converge frame — 둘러싼 카드 제거, h3 legend만 그룹 헤딩으로 (Bible v5.0 checklist #3) */
.entry-point__frame {
  position: relative;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  margin-top: 0;
}


.entry-point__frame-legend {
  display: block;
  margin: 0 0 28px 0;
  font-family: var(--font-primary);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.1px;
  color: var(--c-text-dark);
  text-align: left;
}


/* ── Typography unification ──────────────────────────────────────
   H3 = 28px, eyebrow / path-label = 13px (전역 통일)
   ────────────────────────────────────────────────────────────── */
h3,
.entry-point__frame-legend {
  font-size: 28px !important;
  line-height: 1.3 !important;
}

.section__eyebrow,
[class*="__eyebrow"],
.entry-point__path-label,
[class*="__path-label"] {
  font-size: 13px !important;
}


/* ──────────────────────────────────────────────────────────────
   Industry Cases — sticky nav layout (Linear-style scroll nav)
   좌측: sticky industry list / 우측: 스크롤 케이스 스택
   ────────────────────────────────────────────────────────────── */
.industry-cases__layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  column-gap: 64px;
  align-items: start;
}

.industry-cases__nav {
  position: sticky;
  top: 96px;
  align-self: start;
}

.industry-cases__nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 1px solid var(--c-border-light);
}

.industry-cases__nav-item {
  display: block;
  padding: 12px 16px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-family: var(--font-primary);
  font-size: 13px !important;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--c-text-subtle);
  text-decoration: none;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.industry-cases__nav-item:hover {
  color: var(--c-text-dark);
}

.industry-cases__nav-item.is-active {
  color: var(--c-accent-violet);
  border-left-color: var(--c-accent-violet);
  background: rgba(138, 119, 224, 0.04);
}

.industry-cases__layout .industry-cases__case {
  display: none;
}

.industry-cases__layout .industry-cases__case.is-active {
  display: grid;
}

/* Mobile: nav를 가로 chip strip으로 */
@media (max-width: 900px) {
  .industry-cases__layout {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }
  .industry-cases__nav {
    position: sticky;
    top: 64px;
    background: var(--c-bg-white);
    z-index: 10;
    margin: 0 -16px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--c-border-light);
  }
  .industry-cases__nav-list {
    flex-direction: row;
    border-left: 0;
    overflow-x: auto;
    gap: 4px;
    scrollbar-width: none;
  }
  .industry-cases__nav-list::-webkit-scrollbar { display: none; }
  .industry-cases__nav-item {
    margin-left: 0;
    border-left: 0;
    border-bottom: 2px solid transparent;
    padding: 10px 12px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .industry-cases__nav-item.is-active {
    border-left: 0;
    border-bottom-color: var(--c-accent-violet);
    background: transparent;
  }
}

/* ──────────────────────────────────────────────────────────────
   Industry Cases — Outcome-First Hero panel (단일 카드)
   ────────────────────────────────────────────────────────────── */

/* 기존 industry-cases__case grid 무력화 — 단일 panel만 표시 */
.industry-cases__layout .industry-cases__case.is-active {
  display: block !important;
}

.industry-cases__panel {
  background: var(--c-bg-white) !important;
  border: 1px solid var(--c-border-light) !important;
  border-radius: var(--r-lg) !important;
  padding: 40px 44px !important;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.industry-cases__panel-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.industry-cases__panel .industry-cases__industry {
  font-family: var(--font-primary);
  font-size: 13px !important;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--c-text-subtle);
  margin: 0;
}

.industry-cases__panel-title {
  font-family: var(--font-display);
  font-size: 28px !important;
  font-weight: 700;
  line-height: 1.25 !important;
  letter-spacing: -0.4px;
  color: var(--c-text-dark);
  margin: 0;
}

/* Outcome hero quote — violet card */
.industry-cases__outcome {
  margin: 0;
  padding: 24px 28px;
  border-radius: 12px;
  border: 1px solid rgba(138, 119, 224, 0.25) !important;
  background: rgba(138, 119, 224, 0.06) !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.industry-cases__outcome-label {
  font-family: var(--font-primary);
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--c-accent-violet);
}

.industry-cases__outcome-text {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.2px;
  color: var(--c-text-dark);
  margin: 0;
}

/* Mirror: Blocker | CUBIG Removes It */
.industry-cases__mirror {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px 48px;
}

.industry-cases__mirror-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.industry-cases__mirror-label {
  font-family: var(--font-primary);
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--c-text-subtle);
}

.industry-cases__mirror-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.industry-cases__mirror-list li {
  position: relative;
  padding-left: 16px;
  font-family: var(--font-primary);
  font-size: 15px;
  line-height: 1.55;
  color: var(--c-text-dark);
}

.industry-cases__mirror-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 1px;
  background: var(--c-text-subtle);
}

@media (max-width: 900px) {
  .industry-cases__panel { padding: 28px 24px !important; gap: 24px; }
  .industry-cases__panel-title { font-size: 24px !important; }
  .industry-cases__outcome-text { font-size: 18px; }
  .industry-cases__mirror { grid-template-columns: 1fr; gap: 24px; }
}

/* Clear: __panel-head, __panel-title은 wildcard 매칭에서 제외 */
.industry-cases__panel-head,
.industry-cases__panel-title {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Blocker chips */
.industry-cases__chips {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.industry-cases__chips li {
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: var(--c-text-dark);
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid var(--c-border-light);
  border-radius: 9999px;
  padding: 6px 12px;
  line-height: 1.4;
}

/* Fix line (single-line, condensed) */
.industry-cases__fix-line {
  margin: 0;
  font-family: var(--font-primary);
  font-size: 15px;
  line-height: 1.55;
  color: var(--c-text-dark);
}

/* Override: __chips UL은 wildcard 무력화 (li만 칩 처리) */
.industry-cases__chips {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* ──────────────────────────────────────────────────────────────
   Industry panel — A+C: 컬러 톤 mirror + 산업 아이콘
   ────────────────────────────────────────────────────────────── */

/* Head: icon + text 2-col */
.industry-cases__panel-head {
  display: grid !important;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 20px;
  flex-direction: row !important;
}

.industry-cases__icon {
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(138, 119, 224, 0.08);
  border-radius: 16px;
  color: var(--c-accent-violet);
  flex-shrink: 0;
}

.industry-cases__icon svg {
  width: 48px;
  height: 48px;
}

.industry-cases__panel-head-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

/* Outcome — 크기 키움 (hero 무게 부여) */
.industry-cases__outcome-text {
  font-size: 26px !important;
  line-height: 1.4 !important;
}

/* Mirror — 컬러 톤 (2-col, 화살표 제거) */
.industry-cases__mirror {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 20px !important;
  align-items: stretch;
}

.industry-cases__mirror-col {
  padding: 20px 22px !important;
  border-radius: 12px !important;
  gap: 12px;
}

/* Left col (Blocker) — warm gray */
.industry-cases__mirror-col:nth-of-type(1) {
  background: rgba(15, 23, 42, 0.035);
  border: 1px solid rgba(15, 23, 42, 0.05);
}

/* Right col (Fix) — white + gray hairline */
.industry-cases__mirror-col:nth-of-type(2) {
  background: var(--c-bg-white);
  border: 1px solid var(--c-border-light);
}

.industry-cases__mirror-col:nth-of-type(2) .industry-cases__mirror-label {
  color: var(--c-accent-violet);
}

.industry-cases__mirror-col:nth-of-type(2) .industry-cases__fix-line {
  color: var(--c-text-dark);
}

/* Blocker list — full sentences (no chips) */
.industry-cases__chips {
  display: flex !important;
  flex-direction: column;
  gap: 8px !important;
  list-style: none;
  padding: 0;
  margin: 0;
}

.industry-cases__chips li {
  position: relative;
  padding: 0 0 0 16px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: var(--font-primary);
  font-size: 14.5px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  letter-spacing: 0;
  color: var(--c-text-dark) !important;
}

.industry-cases__chips li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 1px;
  background: var(--c-text-subtle);
}

@media (max-width: 900px) {
  .industry-cases__panel-head { grid-template-columns: 1fr !important; gap: 16px; }
  .industry-cases__icon { width: 64px; height: 64px; }
  .industry-cases__icon svg { width: 36px; height: 36px; }
  .industry-cases__outcome-text { font-size: 20px !important; }
  .industry-cases__mirror { grid-template-columns: 1fr !important; gap: 16px !important; }
  .industry-cases__mirror::before {
    content: '↓';
    grid-column: 1;
    justify-self: center;
  }
}

/* ──────────────────────────────────────────────────────────────
   Industry panel — Linear-style 2-quote layout
   Top: OUTCOME(big white) + FIX(small violet) 나란히
   Bottom: BLOCKER (subdued)
   ────────────────────────────────────────────────────────────── */

/* Container reset — no outer panel border */
.industry-cases__layout .industry-cases__case.is-active {
  display: flex !important;
  flex-direction: column;
  gap: 24px;
}

/* Top quote row */
.industry-cases__quotes {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

/* OUTCOME (left, big, white) — override earlier outcome style */
blockquote.industry-cases__outcome {
  margin: 0 !important;
  padding: 32px 32px 24px !important;
  border-radius: 16px !important;
  border: 1px solid var(--c-border-light) !important;
  background: var(--c-bg-white) !important;
  display: flex !important;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  min-height: 280px;
}

.industry-cases__outcome .industry-cases__outcome-text {
  font-family: var(--font-display);
  font-size: 26px !important;
  font-weight: 600;
  line-height: 1.35 !important;
  letter-spacing: -0.3px;
  color: var(--c-text-dark);
  margin: 0;
}

/* FIX card (right, smaller, violet) */
.industry-cases__fix-card {
  margin: 0;
  padding: 32px 28px 24px;
  border-radius: 16px;
  border: 1px solid rgba(138, 119, 224, 0.30) !important;
  background: rgba(138, 119, 224, 0.10) !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  min-height: 280px;
}

.industry-cases__fix-text {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.2px;
  color: var(--c-text-dark);
  margin: 0;
}

/* Attribution footer (shared) */
.industry-cases__attr {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.industry-cases__fix-card .industry-cases__attr {
  border-top: 1px solid rgba(138, 119, 224, 0.20);
}

.industry-cases__outcome .industry-cases__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}

.industry-cases__outcome .industry-cases__icon svg {
  width: 24px;
  height: 24px;
}

.industry-cases__attr-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.industry-cases__attr-text .industry-cases__industry {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--c-accent-violet);
  margin: 0;
  line-height: 1.2;
}

.industry-cases__attr-title {
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text-dark);
  margin: 0;
  line-height: 1.3;
}

.industry-cases__fix-label {
  font-family: var(--font-primary);
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--c-accent-violet);
}

/* Bottom BLOCKER strip */
.industry-cases__blocker {
  padding: 20px 24px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.035);
  border: 1px solid rgba(15, 23, 42, 0.05);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.industry-cases__blocker-label {
  font-family: var(--font-primary);
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--c-text-subtle);
}

@media (max-width: 900px) {
  .industry-cases__quotes { grid-template-columns: 1fr; }
  blockquote.industry-cases__outcome,
  .industry-cases__fix-card { min-height: auto; padding: 24px !important; }
  .industry-cases__outcome .industry-cases__outcome-text { font-size: 20px !important; }
  .industry-cases__fix-text { font-size: 17px; }
}

/* ──────────────────────────────────────────────────────────────
   Industry Cases — 3×2 grid (Linear-style card per industry)
   ────────────────────────────────────────────────────────────── */
.industry-cases__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.industry-cases__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: 32px 28px 24px !important;
  border-radius: 16px !important;
  border: 1px solid var(--c-border-light) !important;
  background: var(--c-bg-white) !important;
  min-height: 280px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.industry-cases__card:hover {
  border-color: rgba(138, 119, 224, 0.35) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
  transform: translateY(-2px);
}

.industry-cases__card .industry-cases__outcome {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.industry-cases__card .industry-cases__outcome-text {
  font-family: var(--font-display);
  font-size: 19px !important;
  font-weight: 500;
  line-height: 1.45 !important;
  letter-spacing: -0.2px;
  color: var(--c-text-dark);
  margin: 0;
}

@media (max-width: 1100px) {
  .industry-cases__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .industry-cases__grid { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────────────────────
   Industry Cases — Top 3×2 tabs + bottom panels swap
   ────────────────────────────────────────────────────────────── */
.industry-cases__tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

button.industry-cases__tab {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px !important;
  border-radius: 14px !important;
  border: 1px solid var(--c-border-light) !important;
  background: var(--c-bg-white) !important;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  width: 100%;
}

button.industry-cases__tab:hover {
  border-color: rgba(138, 119, 224, 0.35) !important;
  transform: translateY(-1px);
}

button.industry-cases__tab.is-active {
  border-color: var(--c-accent-violet) !important;
  background: rgba(138, 119, 224, 0.05) !important;
  box-shadow: 0 4px 16px rgba(138, 119, 224, 0.10);
}

button.industry-cases__tab .industry-cases__icon {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: rgba(138, 119, 224, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

button.industry-cases__tab.is-active .industry-cases__icon {
  background: rgba(138, 119, 224, 0.18);
}

button.industry-cases__tab .industry-cases__icon svg {
  width: 32px;
  height: 32px;
}

/* 사용자 업로드 SVG 안에 있는 흰색 bg rect 숨기기 (옅은 violet 컨테이너 그대로 보이게) */
button.industry-cases__tab .industry-cases__icon svg > g > rect[fill="white"]:first-child,
button.industry-cases__tab .industry-cases__icon svg > rect[fill="white"]:first-child {
  display: none;
}

/* 검정 path들 → 보라색으로 (filled + stroked) */
button.industry-cases__tab .industry-cases__icon svg path[fill="black"]:not([stroke]),
button.industry-cases__tab .industry-cases__icon svg path[fill="#000"]:not([stroke]),
button.industry-cases__tab .industry-cases__icon svg path[fill="#000000"]:not([stroke]) {
  fill: var(--c-accent-violet);
}

button.industry-cases__tab .industry-cases__icon svg [stroke="black"],
button.industry-cases__tab .industry-cases__icon svg [stroke="#000"],
button.industry-cases__tab .industry-cases__icon svg [stroke="#000000"] {
  stroke: var(--c-accent-violet) !important;
}

button.industry-cases__tab .industry-cases__attr-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

button.industry-cases__tab .industry-cases__industry {
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--c-text-subtle);
  margin: 0;
  line-height: 1.2;
}

button.industry-cases__tab.is-active .industry-cases__industry {
  color: var(--c-accent-violet);
}

button.industry-cases__tab .industry-cases__attr-title {
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text-dark);
  margin: 0;
  line-height: 1.3;
}

/* Panels: only active shown */
.industry-cases__panels .industry-cases__case {
  display: none;
}
.industry-cases__panels .industry-cases__case.is-active {
  display: flex !important;
  flex-direction: column;
  gap: 16px;
}

/* Outcome label (attribution-style at bottom) */
.industry-cases__outcome-label {
  font-family: var(--font-primary);
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--c-accent-violet);
  display: block;
  margin: 0;
}

@media (max-width: 900px) {
  .industry-cases__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .industry-cases__tabs { grid-template-columns: 1fr; }
}

/* Clear: __panels wrapper는 wildcard 무력화 */
.industry-cases__panels {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* Divider between tabs and panels */
.industry-cases__divider {
  border: 0;
  border-top: 1px solid var(--c-border-light);
  margin: 16px 0 32px 0;
  width: 100%;
}

/* Panel head inside each case panel (active industry context) */
.industry-cases__panel-head {
  display: flex !important;
  flex-direction: column;
  gap: 4px;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  /* margin-bottom 제거 — 부모 article의 gap(12px)으로 충분 (이중 spacing 방지) */
}

.industry-cases__panel-head .industry-cases__icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: rgba(138, 119, 224, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-accent-violet);
  flex-shrink: 0;
}

.industry-cases__panel-head .industry-cases__icon svg {
  width: 32px;
  height: 32px;
}

.industry-cases__panel-head-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

.industry-cases__panel-head .industry-cases__industry {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--c-accent-violet);
  margin: 0;
  line-height: 1.2;
}

.industry-cases__panel-head .industry-cases__panel-title {
  font-family: var(--font-display);
  font-size: 22px !important;
  font-weight: 700;
  line-height: 1.3 !important;
  letter-spacing: -0.3px;
  color: var(--c-text-dark);
  margin: 0;
}

/* Context row: BLOCKER + DATASET 2-col */
.industry-cases__context {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}

.industry-cases__context .industry-cases__blocker {
  margin: 0;
}

.industry-cases__dataset {
  padding: 20px 24px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.035);
  border: 1px solid rgba(15, 23, 42, 0.05);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.industry-cases__fields {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.industry-cases__fields li {
  font-family: var(--font-mono, ui-monospace, "SF Mono", monospace);
  font-size: 12px;
  letter-spacing: 0.2px;
  color: var(--c-text-dark);
  background: var(--c-bg-white);
  border: 1px solid var(--c-border-light);
  border-radius: 6px;
  padding: 4px 8px;
  line-height: 1.4;
}

@media (max-width: 900px) {
  .industry-cases__context { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────────────────────
   Next Step — 3 entry-path CTA cards
   ────────────────────────────────────────────────────────────── */
.next-step__header {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  column-gap: 72px;
  align-items: end;
  margin: 0 0 64px 0;
}

.next-step__header > .section__eyebrow {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  margin-bottom: 24px;
  display: inline-block;
}

.next-step__title {
  grid-column: 1;
  grid-row: 2;
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.8px;
  margin: 0;
  color: var(--c-text-dark);
}

.next-step__title-line {
  display: block;
}

.next-step__title-line--accent {
  color: var(--c-accent-violet);
}

.next-step__subtitle {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: end;
  font-family: var(--font-primary);
  font-size: 18px;
  line-height: 30px;
  color: var(--c-text-muted);
  margin: 0 0 8px 0;
  padding-bottom: 4px;
}

/* phase-1 — 홈 하단 클로징 CTA 배너 (Syntitan final-cta 스타일: 중앙 그라데이션) */
.next-step--banner {
  /* 5페이지 하단 배너 통일 = cap-cta 표준(그라데이션·대칭 패딩) */
  background:
    radial-gradient(900px 500px at 50% 0%, rgba(138, 119, 224, 0.30), transparent 70%),
    var(--c-bg-white);
  text-align: center;
  padding: clamp(64px, 8vw, 104px) 0 !important;  /* .section 96/128 비대칭 override */
}
.next-step--banner .next-step__header {
  display: block !important;          /* 2-col 그리드 해제 → 중앙 단일 컬럼 */
  max-width: 720px;
  margin: 0 auto !important;
  text-align: center;
}
.next-step--banner .next-step__header > .section__eyebrow { display: none; }
.next-step--banner .next-step__title { font-size: clamp(28px, 3.4vw, 42px); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; }
.next-step--banner .next-step__subtitle {
  grid-column: auto; grid-row: auto;
  margin: 16px auto 0;
  max-width: 620px;
}
.next-step__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 32px;
}
/* 5페이지 배너 버튼 크기 통일(15px) */
.next-step__actions .btn { font-size: 15px; }
@media (max-width: 560px) {
  .next-step__actions { flex-direction: column; align-items: center; }
  .next-step__actions .next-step__cta { width: 100%; max-width: 320px; justify-content: center; }
}

.next-step__offers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.next-step__card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 28px !important;
  border-radius: 16px !important;
  border: 1px solid var(--c-border-light) !important;
  background: var(--c-bg-white) !important;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.next-step__card:hover {
  border-color: rgba(138, 119, 224, 0.35) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
}

.next-step__card--primary {
  border-color: rgba(138, 119, 224, 0.30) !important;
  background: rgba(138, 119, 224, 0.04) !important;
}

.next-step__card-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

.next-step__path {
  font-family: var(--font-primary);
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--c-text-subtle);
}

.next-step__card--primary .next-step__path {
  color: var(--c-accent-violet);
}

.next-step__card-title {
  font-family: var(--font-display);
  font-size: 22px !important;
  font-weight: 700;
  line-height: 1.3 !important;
  letter-spacing: -0.3px;
  color: var(--c-text-dark);
  margin: 0;
}

.next-step__card-body {
  font-family: var(--font-primary);
  font-size: 15px;
  line-height: 1.55;
  color: var(--c-text-muted);
  margin: 0;
  flex-grow: 1;
}

.next-step__audience {
  font-family: var(--font-primary);
  font-size: 12px;
  letter-spacing: 0.2px;
  color: var(--c-text-subtle);
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--c-border-light);
}

a.next-step__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 10px 16px !important;
  border-radius: 9999px !important;
  font-family: var(--font-primary);
  font-size: 14px !important;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--c-text-dark) !important;
  background: transparent !important;
  color: var(--c-text-dark) !important;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  box-shadow: none !important;
}

a.next-step__btn:hover {
  background: var(--c-text-dark) !important;
  color: var(--c-bg-white) !important;
}

a.next-step__btn--primary {
  background: var(--c-accent-violet) !important;
  border-color: var(--c-accent-violet) !important;
  color: #fff !important;
}

a.next-step__btn--primary:hover {
  background: #6f5bd1 !important;
  border-color: #6f5bd1 !important;
}

.next-step__btn-arrow {
  font-size: 16px;
  line-height: 1;
}

.next-step__note {
  text-align: center;
  font-family: var(--font-primary);
  font-size: 13px;
  color: var(--c-text-subtle);
  margin: 32px 0 0 0;
}

@media (max-width: 1100px) {
  .next-step__offers { grid-template-columns: 1fr; }
  .next-step__header { grid-template-columns: 1fr; column-gap: 0; }
  .next-step__title, .next-step__header > .section__eyebrow { grid-column: 1; }
  .next-step__subtitle { grid-column: 1; grid-row: auto; align-self: start; }
}

/* ──────────────────────────────────────────────────────────────
   Footer — GNB IA 정합 5 columns
   ────────────────────────────────────────────────────────────── */
.footer-main__inner {
  flex-wrap: wrap;
}

.footer-main__brand {
  flex: 0 0 280px !important;
  max-width: 320px !important;
}

.footer-main__columns {
  flex: 1 1 auto !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 32px !important;
}

.footer-main__col {
  min-width: 0 !important;
}

.footer-main__heading {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  margin: 0 0 16px 0 !important;
  color: var(--c-text-dark) !important;
}

.footer-main__subheading {
  font-family: var(--font-primary);
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--c-text-subtle);
  margin: 20px 0 8px 0;
}

.footer-main__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-main__col a {
  font-size: 14px !important;
  color: var(--c-text-muted) !important;
  text-decoration: none;
  transition: color 0.18s ease;
}

.footer-main__col a:hover {
  color: var(--c-text-dark) !important;
}

@media (max-width: 1100px) {
  .footer-main__inner { flex-direction: column; align-items: stretch; }
  .footer-main__brand { flex: 1 1 auto !important; max-width: 100% !important; }
  .footer-main__columns { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 700px) {
  .footer-main__columns { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Footer brand: contact link near email */
.footer-main__contact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: -4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-accent-violet) !important;
  text-decoration: none;
  width: fit-content;
  transition: color 0.18s ease, gap 0.18s ease;
}

.footer-main__contact:hover {
  color: #6f5bd1 !important;
  gap: 8px;
}

/* ──────────────────────────────────────────────────────────────
   Footer — brand (left, stacked) + 5 link columns (right)
   ────────────────────────────────────────────────────────────── */
.footer-main__inner {
  display: grid !important;
  grid-template-columns: 140px minmax(0, 1fr) !important;
  gap: 48px !important;
  align-items: start !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
}

.footer-main__brand {
  display: flex !important;
  flex-direction: column;
  gap: 16px;
  max-width: 140px !important;
  flex: 0 0 auto !important;
}

.footer-main__brand .footer-main__logo {
  width: 100px;
  height: auto;
}

.footer-main__brand .footer-main__contact {
  margin-top: 0;
  align-self: flex-start;
}

.footer-main__brand .footer-main__email {
  font-size: 13px !important;
  color: var(--c-text-muted);
  margin: 0;
}

.footer-main__brand .footer-main__legal {
  margin: 8px 0 0 0 !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-main__brand .footer-main__entity {
  font-size: 12px !important;
  line-height: 1.55 !important;
  color: var(--c-text-muted);
  margin: 0;
}

.footer-main__brand .footer-main__entity strong {
  font-size: 13px;
  color: var(--c-text-dark);
}

.footer-main__brand .footer-main__social {
  margin-top: 8px;
}

.footer-main__columns {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 32px !important;
}

.footer-main__col ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-main__col ul li {
  margin: 0 !important;
}

.footer-main__heading {
  font-size: 13px !important;
}

.footer-main__col a {
  font-size: 13px !important;
}

/* Proof & Learn sub-headings */
.footer-main__subheading {
  font-family: var(--font-primary);
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--c-text-subtle);
  margin: 16px 0 8px 0;
}

.footer-main__col > .footer-main__subheading:first-of-type {
  margin-top: 0;
}


/* Addresses row (below columns) */
.footer-main__addresses {
  display: grid;
  grid-template-columns: 1.5fr repeat(5, minmax(0, 1fr));
  gap: 32px;
  margin-top: 48px;
  padding-top: 0;
  border-top: 0;
}

.footer-main__addresses .footer-main__entity:nth-of-type(1) {
  grid-column: 1 / 4;
}

.footer-main__addresses .footer-main__entity:nth-of-type(2) {
  grid-column: 4 / -1;
}

/* Footer: 6-col grid (brand + 5 nav) for consistent alignment */
.footer-main__inner {
  display: grid !important;
  grid-template-columns: 1.5fr repeat(5, minmax(0, 1fr)) !important;
  gap: 32px !important;
  align-items: start !important;
  justify-content: stretch !important;
}

.footer-main__brand {
  max-width: none !important;
  flex: none !important;
}

.footer-main__columns {
  display: contents !important;
}

.footer-main__col {
  min-width: 0 !important;
}

.industry-cases__divider {
  display: none !important;
}

.industry-cases__panels {
  margin-top: 48px !important;
}

.next-step__placeholder {
  border: 1px dashed var(--c-border-light);
  border-radius: 12px;
  padding: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  background: rgba(138, 119, 224, 0.04);
}

.next-step__placeholder-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-accent-violet);
  padding: 4px 12px;
  border: 1px solid var(--c-border-light);
  border-radius: 999px;
  background: var(--c-bg-white);
}

.next-step__placeholder-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--c-text-dark);
  margin: 0;
}

.next-step__placeholder-body {
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-text-muted);
  margin: 0;
  max-width: 560px;
}

.footer-main {
  padding-bottom: 16px !important;
}

.footer-bottom {
  border-top: 0 !important;
  padding-top: 8px !important;
}

.footer-bottom__inner {
  display: grid !important;
  grid-template-columns: 1.5fr repeat(5, minmax(0, 1fr)) !important;
  gap: 32px !important;
  align-items: center;
  font-size: 12px !important;
}

.footer-bottom__copy {
  grid-column: 1 / 4;
}

.footer-bottom__links {
  grid-column: 4 / -1;
}

.footer-bottom__inner .footer-bottom__copy,
.footer-bottom__inner .footer-bottom__links a {
  font-size: 12px !important;
}

.footer-bottom__links {
  justify-content: flex-start !important;
}

.footer-main__addresses .footer-main__entity {
  font-size: 12px !important;
  line-height: 1.55 !important;
  color: var(--c-text-muted);
  margin: 0;
}

.footer-main__addresses .footer-main__entity strong {
  font-size: 13px;
  color: var(--c-text-dark);
  font-weight: 600;
}

@media (max-width: 1100px) {
  .footer-main__inner { grid-template-columns: 1fr !important; row-gap: 48px !important; }
  .footer-main__brand { max-width: 100% !important; }
  .footer-main__columns { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (max-width: 600px) {
  .footer-main__columns { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ──────────────────────────────────────────────────────────────
   Entry-point inline SVG: floating hub animation
   ────────────────────────────────────────────────────────────── */
.entry-point__icon-frame svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* Data SVG: AI-READY DATA 라벨 바 — floating only, 그림자 없음 */
.entry-point__icon-frame--data svg #extrude-group_11 {
  transform-box: fill-box;
  transform-origin: center;
  animation: entryFloatNoShadow 4.2s ease-in-out infinite;
  will-change: transform;
}


@keyframes entryFloatNoShadow {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}


/* Workflow SVG: legacy-env-bar만 floating (extrude-group은 정적) */
.entry-point__icon-frame--workflow svg #legacy-env-bar {
  transform-box: fill-box;
  transform-origin: center;
  animation: entryFloat 4.2s ease-in-out infinite;
  animation-delay: -1.6s;
  filter: drop-shadow(0 8px 14px rgba(15, 23, 42, 0.06));
  will-change: transform, filter;
}

@keyframes entryFloat {
  0%, 100% {
    transform: translateY(0);
    filter: drop-shadow(0 4px 6px rgba(15, 23, 42, 0.05));
  }
  50% {
    transform: translateY(-10px);
    filter: drop-shadow(0 8px 10px rgba(15, 23, 42, 0.07));
  }
}

@media (prefers-reduced-motion: reduce) {
  .entry-point__icon-frame--data svg #extrude-group_11,
  .entry-point__icon-frame--workflow svg #legacy-env-bar {
    animation: none;
  }
}

/* Data-flow animation along connector lines (Vector + Line) — dash 간격 넓힘 + blend */
.entry-point__icon-frame svg path[id^="Vector "],
.entry-point__icon-frame svg line[id^="Line "] {
  stroke-dasharray: 4 20; /* 합 24 — keyframe offset과 매칭하여 seamless loop */
  stroke-linecap: round;
  animation: dataFlow 1.8s linear infinite;
  mix-blend-mode: multiply;
}

/* Workflow SVG: 같은 duration + 다른 delay로 phase 고정(영원히 sync 안 됨) */
.entry-point__icon-frame--workflow svg path[id="Vector 8"] {
  animation-duration: 2s;
  animation-delay: 0s;
  stroke-dasharray: 4 20;
}
.entry-point__icon-frame--workflow svg path[id="Vector 9"] {
  animation-duration: 2s;
  animation-delay: -0.66s; /* 1/3 cycle */
  stroke-dasharray: 3 21;
}
.entry-point__icon-frame--workflow svg line[id="Line 2"] {
  animation-duration: 2s;
  animation-delay: -1.33s; /* 2/3 cycle */
  stroke-dasharray: 5 19;
}

/* Data SVG: Vector 6~9는 path 시작점이 중앙이라 기본 방향이 바깥으로 흐름 → reverse */
.entry-point__icon-frame--data svg path[id="Vector 6"],
.entry-point__icon-frame--data svg path[id="Vector 7"],
.entry-point__icon-frame--data svg path[id="Vector 8"],
.entry-point__icon-frame--data svg path[id="Vector 9"] {
  animation-direction: reverse;
}

/* Workflow SVG: Vector 8은 path가 아래→위로 그려져 흐름이 역방향 → reverse */
.entry-point__icon-frame--workflow svg path[id="Vector 8"] {
  animation-direction: reverse;
}

/* Workflow SVG: sensitive-ai-zone(violet diamond)의 자체 drop-shadow filter만 제거 */
.entry-point__icon-frame--workflow svg #sensitive-ai-zone {
  filter: none !important;
}

/* Data SVG: Vector 7 (오른쪽 아래 흐름)는 0.1로 너무 옅음 → 0.3으로 살짝 올림 */
.entry-point__icon-frame--data svg path[id="Vector 7"] {
  stroke-opacity: 0.3 !important;
}



@keyframes dataFlow { to { stroke-dashoffset: -24; } } /* dash sum 24 — seamless */

@media (prefers-reduced-motion: reduce) {
  .entry-point__icon-frame svg path[id^="Vector "],
  .entry-point__icon-frame svg line[id^="Line "] {
    animation: none;
  }
}

/* ===========================================================================
   MOBILE CLEANUP (≤ 767px) — 한 번에 정리하는 모바일 전용 패치
   1) 드로어 열림 시 헤더 불투명화 (콘텐츠 비침 해결)
   2) ai-ready 3col 카드 간격 통일
   3) industry-cases 6 탭 → 2열 컴팩트 그리드
   4) built-prod 헤더 모바일 레이아웃 정리
   5) built-prod stat-label 한 줄
   6) 푸터 2열 그리드 + 컴팩트 타이포
   =========================================================================== */
@media (max-width: 767px) {
  /* (0) syntitan 데모 모바일에선 step 07 정적 노출 — 스크롤 안내 화살표 숨김 */
  .syntitan-demo__detail-scroll-hint { display: none !important; }

  /* (1) 드로어 열렸을 때 헤더 솔리드 흰 배경 — 드로어 텍스트 비침 방지 */
  body.nav-open .site-header,
  body.nav-open .site-header__nav-top {
    background: #fff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* (2) ai-ready 3col 카드 — 위쪽 2개 카드(.ai-ready__body)와 카드 간 gap 동일(32px) */
  .ai-ready__body--3col {
    gap: 32px !important;
    margin-top: 32px !important;
  }
  .ai-ready__body--3col .ai-ready__col {
    min-height: 0 !important;
  }

  /* (3) industry-cases 탭 — 2열 3행 그리드, 아이콘 상단 + 라벨 하단 컴팩트 */
  .industry-cases__tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 24px !important;
  }
  button.industry-cases__tab {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 14px 14px !important;
    border-radius: 12px !important;
  }
  button.industry-cases__tab .industry-cases__icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
  }
  button.industry-cases__tab .industry-cases__icon svg {
    width: 20px !important;
    height: 20px !important;
  }
  button.industry-cases__tab .industry-cases__attr-text {
    gap: 2px !important;
  }
  button.industry-cases__tab .industry-cases__industry {
    font-size: 10px !important;
    letter-spacing: 0.8px !important;
  }
  button.industry-cases__tab .industry-cases__panel-title,
  button.industry-cases__tab h3 {
    font-size: 13px !important;
    line-height: 1.3 !important;
  }

  /* (4) built-prod 헤더 — desktop 2-column grid 해제, 세로 스택 */
  .built-prod__header .built-prod__subtitle-wrap {
    grid-column: 1 !important;
    grid-row: auto !important;
    align-self: auto !important;
    margin-top: 16px !important;
    margin-bottom: 0 !important;
  }

  /* (5) stat-label "고객사 · 파트너" 등 — 한 줄 유지 */
  .built-prod__stat-label {
    white-space: nowrap !important;
    font-size: 12px !important;
    letter-spacing: 0.5px !important;
  }

  /* (5a) Key Numbers stats — 모바일에선 1열 세로 스택 (긴 라벨 wrap 방지) */
  .built-prod__stats {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding: 32px 24px !important;
  }
  .built-prod__stat { padding: 0 !important; }
  .built-prod__stat-number { font-size: 64px !important; }

  /* (5a-unify) 타이포 위계 — 모바일
     L1 섹션 타이틀(H2): 26px / 600  — 가장 큼 (hero 36 제외)
     L2 카드·블록 타이틀(H3/H4): 19px / 600
     L3 카드 부제(eyebrow/role): 11px 라벨 */
  .ai-models__title,
  .comparison__title,
  .entry-point__title,
  .ai-ready__title,
  .industry-cases__section-title,
  .built-prod__title,
  .next-step__title,
  .syntitan-intro__title {
    font-size: 26px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    letter-spacing: -0.4px !important;
  }
  /* KO: variables.css의 :lang(ko) 타이틀 행간(1.25)을 모바일에선 1.3으로 통일
     (specificity 0,1,1 동일 → 늦게 로드되는 이 규칙이 승리) */
  :lang(ko) .ai-models__title,
  :lang(ko) .comparison__title,
  :lang(ko) .entry-point__title,
  :lang(ko) .ai-ready__title,
  :lang(ko) .industry-cases__section-title,
  :lang(ko) .built-prod__title,
  :lang(ko) .next-step__title,
  :lang(ko) .syntitan-intro__title {
    line-height: 1.3 !important;
  }
  /* L2 — 섹션 안쪽 카드/블록 타이틀은 섹션 타이틀보다 작게 */
  .ai-ready__col-title,
  .comparison__stack-title,
  .ai-ready__col-headline,
  .industry-cases__panel-title,
  .ai-models__block-title,
  .ai-models__overhead-title,
  .entry-point__frame-legend,
  .built-prod__stats-label,
  .built-prod__cert-label {
    font-size: 20px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
  }

  /* (4a) 모바일 섹션 상하 패딩 통일 — hero 제외 모든 콘텐츠 섹션 64/64 대칭 */
  main > section.section:not(.hero) {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  /* (4b) Missing Layer(comparison) 표 내부 정리 (패딩은 위 공통 규칙 따름) */
  .comparison__stack-pair {
    gap: 0 !important;            /* 숨긴 visual로 인한 빈 row gap 제거 */
  }
  /* 데스크탑 3D 다이어그램 정렬용 min-height + center → 모바일에선 빈 여백 원인. 해제 */
  .comparison__stack-labels {
    min-height: 0 !important;
    justify-content: flex-start !important;
    gap: 12px !important;
  }
  /* 헤더를 flex 컬럼으로 — grid 빈 행 때문에 title↔subtitle 사이 뜨던 문제 제거 */
  .comparison .comparison__header {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: 24px !important;
  }
  .comparison .comparison__subtitle {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* (5b) Use cases (industry-cases) 헤더 — 모바일 타이틀/서브 사이즈 + 간격 정리 */
  .industry-cases__header {
    grid-template-columns: 1fr !important;
    margin-bottom: 32px !important;
    row-gap: 12px !important;
  }
  .industry-cases__header > .section__eyebrow {
    margin-bottom: 0 !important;
    grid-column: 1 !important;
  }
  .industry-cases__header .industry-cases__section-title {
    font-size: 26px !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    grid-column: 1 !important;
  }
  .industry-cases__header .industry-cases__lead {
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin: 4px 0 0 0 !important;
    padding-bottom: 0 !important;
    grid-column: 1 !important;
    grid-row: auto !important;
    align-self: start !important;
  }

  /* (5c) Next Step (evaluation-cta) 헤더 — 동일 패턴 */
  .next-step__header {
    margin-bottom: 32px !important;
    row-gap: 12px !important;
  }
  .next-step__header > .section__eyebrow {
    margin-bottom: 0 !important;
  }
  .next-step__title {
    font-size: 26px !important;
    line-height: 1.3 !important;
    letter-spacing: -0.4px !important;
    margin: 0 !important;
  }
  .next-step__subtitle {
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin: 4px 0 0 0 !important;
    padding-bottom: 0 !important;
  }

  /* (6) 푸터 — 1열 풀어진 걸 2열 그리드로 묶어 밀도 ↑ */
  .footer-main__inner {
    flex-direction: column !important;
    gap: 32px !important;
    padding: 40px 20px !important;
  }
  .footer-main__brand {
    flex: 0 0 auto !important;
    margin-bottom: 0 !important;
  }
  .footer-main__columns {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px 16px !important;
    flex-direction: unset !important;
  }
  .footer-main__heading {
    font-size: 14px !important;
    line-height: 1.3 !important;
    margin-bottom: 8px !important;
  }
  .footer-main__col ul {
    gap: 0 !important;        /* flex gap 제거 — li로 간격 제어 */
  }
  .footer-main__col ul li {
    margin-bottom: 0 !important;
    line-height: 1.4 !important;  /* KO body 1.65 상속 끊기 */
  }
  .footer-main__col a {
    font-size: 13px !important;
    line-height: 1.4 !important;
    display: inline-block !important;
    padding: 5px 0 !important;     /* 탭 타겟 확보 + 일정 간격 */
  }

  /* (6a-2) 푸터 법인 주소 — 모바일 깔끔한 2열 그리드 */
  .footer-main__addresses {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px 16px !important;
    margin-top: 32px !important;
  }
  .footer-main__addresses .footer-main__entity:nth-of-type(1),
  .footer-main__addresses .footer-main__entity:nth-of-type(2) {
    grid-column: auto !important;
  }
  .footer-main__addresses .footer-main__entity {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }
  .footer-main__addresses .footer-main__entity strong {
    font-size: 13px !important;
  }

  /* (2b) ai-ready 카드 액션 — "더 보기" + 클라우드 chip 간격/하단 여백 정리 */
  .ai-ready__col-actions {
    gap: 10px !important;
    padding-top: 16px !important;
    margin-top: 4px !important;
  }

  /* (2c) ai-ready 2-col 카드 — 비어 있는 placeholder 비주얼 숨김 + 타이틀을 카드에 붙임 */
  .ai-ready__body .ai-ready__visual {
    display: none !important;       /* 이미지 없는 빈 그라데이션 박스 제거 */
  }
  .ai-ready__body .ai-ready__cell {
    gap: 0 !important;              /* 타이틀이 카드 위에 바로 붙도록 */
  }
  .ai-ready__body .ai-ready__col-title {
    margin: 0 0 -1px 0 !important;  /* 카드 상단 보더와 맞물리게 */
    padding: 0 4px 12px !important;
  }
  .ai-ready__body .ai-ready__col--has-visual .ai-ready__col-body {
    padding: 24px 20px !important;  /* 비주얼 없으니 본문 padding으로 카드 내부 여백 확보 */
  }

  /* (6b) 푸터 하단 (copy + 정책 링크) — 간격 좁히고 가운데 정렬 깔끔하게 */
  .footer-bottom {
    padding: 20px 0 24px !important;
  }
  .footer-bottom__inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center !important;
    font-size: 12px !important;
    align-items: center !important;
  }
  .footer-bottom__links {
    display: flex !important;
    gap: 16px !important;
    justify-content: center !important;
  }
}

/* ── Fix: 위 [class*="-card"] 와일드카드가 blog/news 카드의 __title·__date·__body·__thumb
   까지 매칭해 텍스트마다 카드 테두리/흰배경이 덧씌워짐(이중 카드). 컨테이너만 카드로,
   내부 요소는 리셋. (썸네일은 둥근 모서리 유지) ── */
.blog-card__body, .blog-card__title, .blog-card__date,
.news-card__body, .news-card__title, .news-card__date {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.blog-card__thumb, .news-card__thumb {
  border: 0 !important;
  border-radius: var(--r-sm) !important;
}