/* ═══════════════════════════════════════════════════════════════════════
   V2 — TechLab Showcase ("Where Defense Meets Innovation")
   THEME-AWARE: All colors derived from --z-* tokens.
   When user switches theme, this section adapts automatically.
   Class prefix: .v2-tl-
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Theme-mapped color tokens ── */
.v2-tl-section {
  /* Primary accent — maps to theme accent (cyan in default, changes per theme) */
  --tl-primary: var(--z-accent, #f59e0b);
  --tl-primary-light: var(--z-accent-light, #fbbf24);
  --tl-primary-glow: var(--z-accent-glow, rgba(245, 158, 11, 0.15));

  /* Secondary — maps to theme success/green */
  --tl-secondary: var(--z-success, #10b981);
  --tl-secondary-light: var(--z-success-light, #34d399);

  /* Tertiary — maps to theme purple */
  --tl-tertiary: var(--z-purple, #7c3aed);

  /* Danger — maps to theme danger/red */
  --tl-danger: var(--z-danger, #ef4444);

  /* Info/Cyan — maps to theme cyan */
  --tl-cyan: var(--z-cyan, #0ea5e9);

  /* Surfaces */
  --tl-bg: var(--z-bg-deep, #0a101e);
  --tl-bg-mid: var(--z-bg, #0f172a);
  --tl-surface: var(--z-surface-1, #1e293b);
  --tl-text: var(--z-text, #f1f5f9);
  --tl-text-sec: var(--z-text-sec, #94a3b8);
  --tl-text-muted: var(--z-text-muted, #64748b);
  --tl-border: var(--z-border, rgba(255, 255, 255, 0.08));

  position: relative;
  padding: 5.5rem 0 5rem;
  overflow: hidden;
  background: linear-gradient(165deg, var(--tl-bg) 0%, var(--tl-bg-mid) 35%, var(--tl-bg) 100%);
  border-top: 1px solid color-mix(in srgb, var(--tl-primary) 12%, transparent);
}

/* ── Backgrounds ── */
.v2-tl-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }

.v2-tl-hexgrid {
  position: absolute; inset: 0; opacity: 0.06;
  /* SVG uses currentColor trick — but inline SVG can't use CSS vars, so we overlay with a CSS mask */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='white' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size: 56px 100px;
  /* Tint via background-color + mix-blend-mode */
  background-color: var(--tl-primary);
  background-blend-mode: multiply;
}

.v2-tl-glow-1 {
  position: absolute; top: 5%; right: -5%; width: 550px; height: 550px;
  border-radius: 50%; filter: blur(80px);
  background: radial-gradient(circle, color-mix(in srgb, var(--tl-primary) 18%, transparent) 0%, transparent 65%);
}

.v2-tl-glow-2 {
  position: absolute; bottom: 0; left: -5%; width: 450px; height: 450px;
  border-radius: 50%; filter: blur(70px);
  background: radial-gradient(circle, color-mix(in srgb, var(--tl-secondary) 14%, transparent) 0%, transparent 65%);
}

.v2-tl-bg::after {
  content: '';
  position: absolute;
  top: 40%; left: 50%;
  width: 350px; height: 350px;
  border-radius: 50%;
  filter: blur(90px);
  background: radial-gradient(circle, color-mix(in srgb, var(--tl-tertiary) 8%, transparent) 0%, transparent 70%);
  pointer-events: none;
}

/* ═══ SPLIT LAYOUT ═══ */
.v2-tl-showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  margin-bottom: 3.5rem;
}

/* ═══ LEFT: SHIELD + ORBITING ICONS ═══ */
.v2-tl-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 380px;
}

.v2-tl-orbit-system {
  position: relative;
  width: 320px;
  height: 320px;
}

.v2-tl-shield {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100px; height: 120px;
  z-index: 3;
}

.v2-tl-shield-svg {
  width: 100%; height: 100%;
  filter: drop-shadow(0 0 30px color-mix(in srgb, var(--tl-primary) 40%, transparent))
         drop-shadow(0 0 60px color-mix(in srgb, var(--tl-primary) 18%, transparent));
}

.v2-tl-shield-pulse {
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--tl-primary) 25%, transparent);
  animation: v2-tl-shieldPulse 2.5s ease-out infinite;
}

.v2-tl-shield::after {
  content: '';
  position: absolute;
  inset: -32px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--tl-secondary) 15%, transparent);
  animation: v2-tl-shieldPulse 2.5s ease-out infinite 1.2s;
}

@keyframes v2-tl-shieldPulse {
  0%   { transform: scale(0.6); opacity: 0.6; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Orbit rings */
.v2-tl-orbit-ring {
  position: absolute; inset: 15px;
  border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--tl-primary) 15%, transparent);
  animation: v2-tl-ringRotate 60s linear infinite;
}

.v2-tl-orbit-ring::before {
  content: '';
  position: absolute; inset: -25px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--tl-primary) 6%, transparent);
}

.v2-tl-orbit-ring::after {
  content: '';
  position: absolute; inset: 20px;
  border-radius: 50%;
  border: 1px dotted color-mix(in srgb, var(--tl-secondary) 8%, transparent);
}

@keyframes v2-tl-ringRotate { to { transform: rotate(360deg); } }

/* Orbiting icons */
.v2-tl-orbit {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  animation: v2-tl-orbitSpin 20s linear infinite;
}

.v2-tl-orbit--1 { animation-delay: 0s; }
.v2-tl-orbit--2 { animation-delay: -4s; }
.v2-tl-orbit--3 { animation-delay: -8s; }
.v2-tl-orbit--4 { animation-delay: -12s; }
.v2-tl-orbit--5 { animation-delay: -16s; }

@keyframes v2-tl-orbitSpin {
  0%   { transform: rotate(0deg)   translateX(140px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(140px) rotate(-360deg); }
}

.v2-tl-orbit-icon {
  width: 42px; height: 42px;
  margin: -21px 0 0 -21px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  font-size: 1rem;
  color: var(--oi-color, var(--tl-primary));
  background: color-mix(in srgb, var(--tl-bg) 90%, transparent);
  border: 1px solid color-mix(in srgb, var(--oi-color, var(--tl-primary)) 35%, transparent);
  backdrop-filter: blur(12px);
  box-shadow:
    0 4px 20px color-mix(in srgb, var(--oi-color, var(--tl-primary)) 20%, transparent),
    inset 0 0 12px color-mix(in srgb, var(--oi-color, var(--tl-primary)) 6%, transparent);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.v2-tl-orbit-icon:hover {
  transform: scale(1.2);
  box-shadow: 0 4px 28px color-mix(in srgb, var(--oi-color, var(--tl-primary)) 30%, transparent);
}

/* Corner coordinates */
.v2-tl-coord {
  position: absolute;
  font-family: var(--v2-hud-font, 'JetBrains Mono', monospace);
  font-size: 0.5rem; font-weight: 600;
  letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--tl-primary) 30%, transparent);
  pointer-events: none;
  text-shadow: 0 0 8px color-mix(in srgb, var(--tl-primary) 18%, transparent);
}
.v2-tl-coord--tl { top: 8px; left: 8px; }
.v2-tl-coord--br { bottom: 8px; right: 8px; }

/* ═══ RIGHT: CONTENT ═══ */
.v2-tl-content { position: relative; }

.v2-tl-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--v2-hud-font, 'JetBrains Mono', monospace);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tl-secondary);
  margin-bottom: 1.25rem;
  text-shadow: 0 0 10px color-mix(in srgb, var(--tl-secondary) 30%, transparent);
}

.v2-tl-tag-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--tl-secondary);
  box-shadow: 0 0 10px color-mix(in srgb, var(--tl-secondary) 65%, transparent),
              0 0 24px color-mix(in srgb, var(--tl-secondary) 25%, transparent);
  animation: v2-pulse 2s ease-in-out infinite;
}

.v2-tl-tag-sep { color: color-mix(in srgb, var(--tl-secondary) 35%, transparent); }

/* Title */
.v2-tl-title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 800;
  color: var(--tl-text);
  line-height: 1.2;
  margin: 0 0 1.25rem;
  letter-spacing: -0.02em;
}

.v2-tl-hl-cyan {
  color: var(--tl-primary);
  text-shadow: 0 0 24px color-mix(in srgb, var(--tl-primary) 45%, transparent),
               0 0 60px color-mix(in srgb, var(--tl-primary) 18%, transparent);
}

.v2-tl-hl-green {
  color: var(--tl-secondary);
  text-shadow: 0 0 24px color-mix(in srgb, var(--tl-secondary) 45%, transparent),
               0 0 60px color-mix(in srgb, var(--tl-secondary) 18%, transparent);
}

/* Description */
.v2-tl-desc {
  font-size: 0.9rem;
  color: var(--tl-text-muted);
  line-height: 1.7;
  margin: 0 0 2rem;
  max-width: 480px;
}

/* Metrics */
.v2-tl-metrics { display: flex; align-items: center; gap: 0; margin-bottom: 2rem; }

.v2-tl-metric { display: flex; flex-direction: column; padding: 0 1.5rem; }
.v2-tl-metric:first-child { padding-left: 0; }

.v2-tl-metric-sep {
  width: 1px; height: 32px;
  background: color-mix(in srgb, var(--tl-primary) 15%, transparent);
  flex-shrink: 0;
}

.v2-tl-metric-val {
  font-family: var(--v2-hud-font, 'JetBrains Mono', monospace);
  font-size: 1.5rem; font-weight: 700;
  color: var(--tl-primary);
  text-shadow: 0 0 16px color-mix(in srgb, var(--tl-primary) 40%, transparent),
               0 0 40px color-mix(in srgb, var(--tl-primary) 12%, transparent);
  font-variant-numeric: tabular-nums;
  line-height: 1; margin-bottom: 0.25rem;
}

.v2-tl-metric-lbl {
  font-family: var(--v2-hud-font, 'JetBrains Mono', monospace);
  font-size: 0.5rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--tl-text-muted);
}

/* Action buttons */
.v2-tl-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

.v2-tl-btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0.75rem 1.75rem;
  font-family: var(--v2-hud-font, 'JetBrains Mono', monospace);
  font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none;
  color: var(--tl-bg);
  background: linear-gradient(135deg, var(--tl-primary), var(--tl-primary-light));
  border: none; border-radius: 8px;
  position: relative; overflow: hidden;
  transition: all 0.35s cubic-bezier(0.16,1,0.3,1);
  box-shadow: 0 4px 20px color-mix(in srgb, var(--tl-primary) 30%, transparent),
              0 0 40px color-mix(in srgb, var(--tl-primary) 12%, transparent);
}

.v2-tl-btn-primary::after {
  content: '';
  position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s ease;
}

.v2-tl-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px color-mix(in srgb, var(--tl-primary) 35%, transparent);
  color: var(--tl-bg);
}

.v2-tl-btn-primary:hover::after { left: 100%; }
.v2-tl-btn-primary svg { transition: transform 0.3s ease; }
.v2-tl-btn-primary:hover svg { transform: translateX(4px); }

.v2-tl-btn-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0.75rem 1.5rem;
  font-size: 0.75rem; font-weight: 600;
  text-decoration: none;
  color: var(--tl-primary);
  border: 1px solid color-mix(in srgb, var(--tl-primary) 28%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--tl-primary) 5%, transparent);
  transition: all 0.3s ease;
}

.v2-tl-btn-ghost:hover {
  border-color: color-mix(in srgb, var(--tl-primary) 55%, transparent);
  background: color-mix(in srgb, var(--tl-primary) 12%, transparent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--tl-primary) 10%, transparent);
  color: var(--tl-primary);
}

.v2-tl-btn-ghost i { font-size: 0.6875rem; }

/* ═══ SECTOR CARDS ═══ */
.v2-tl-sectors {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
  position: relative; z-index: 2;
}

.v2-tl-sector {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: color-mix(in srgb, var(--tl-primary) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--tl-primary) 10%, transparent);
  border-radius: 8px;
  text-decoration: none; color: inherit;
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
  position: relative; overflow: hidden;
  opacity: 0; transform: translateY(12px);
}

.v2-tl-section.v2-in-view .v2-tl-sector { opacity: 1; transform: translateY(0); }
.v2-tl-section.v2-in-view .v2-tl-sector:nth-child(1) { transition-delay: 0.05s; }
.v2-tl-section.v2-in-view .v2-tl-sector:nth-child(2) { transition-delay: 0.1s; }
.v2-tl-section.v2-in-view .v2-tl-sector:nth-child(3) { transition-delay: 0.15s; }
.v2-tl-section.v2-in-view .v2-tl-sector:nth-child(4) { transition-delay: 0.2s; }
.v2-tl-section.v2-in-view .v2-tl-sector:nth-child(5) { transition-delay: 0.25s; }
.v2-tl-section.v2-in-view .v2-tl-sector:nth-child(6) { transition-delay: 0.3s; }

.v2-tl-sector::before {
  content: '';
  position: absolute; left: 0; top: 20%; height: 60%; width: 3px;
  background: var(--sc, var(--tl-primary));
  border-radius: 0 3px 3px 0;
  opacity: 0.5;
  transition: height 0.3s ease, opacity 0.3s ease, width 0.3s ease;
}

.v2-tl-sector:hover {
  background: color-mix(in srgb, var(--tl-primary) 8%, transparent);
  border-color: color-mix(in srgb, var(--sc, var(--tl-primary)) 22%, transparent);
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.25),
              0 0 16px color-mix(in srgb, var(--sc, var(--tl-primary)) 10%, transparent);
}

.v2-tl-sector:hover::before { height: 80%; opacity: 0.8; width: 4px; }

.v2-tl-sector-icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; font-size: 0.9375rem;
  color: var(--sc, var(--tl-primary));
  background: color-mix(in srgb, var(--sc, var(--tl-primary)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--sc, var(--tl-primary)) 15%, transparent);
  flex-shrink: 0;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.v2-tl-sector:hover .v2-tl-sector-icon {
  transform: scale(1.08);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--sc, var(--tl-primary)) 18%, transparent);
}

.v2-tl-sector-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }

.v2-tl-sector-name {
  font-size: 0.8125rem; font-weight: 600;
  color: var(--tl-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.v2-tl-sector-count {
  font-family: var(--v2-hud-font, 'JetBrains Mono', monospace);
  font-size: 0.5rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--sc, var(--tl-primary)); opacity: 0.5;
}

.v2-tl-sector-arrow {
  font-size: 0.5rem; color: var(--tl-text-muted);
  transition: transform 0.3s ease, color 0.3s ease;
  flex-shrink: 0;
}

.v2-tl-sector:hover .v2-tl-sector-arrow {
  transform: translateX(3px);
  color: var(--sc, var(--tl-primary));
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 992px) {
  .v2-tl-showcase { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
  .v2-tl-visual { order: -1; min-height: 300px; }
  .v2-tl-orbit-system { width: 260px; height: 260px; }
  @keyframes v2-tl-orbitSpin {
    0%   { transform: rotate(0deg) translateX(110px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(110px) rotate(-360deg); }
  }
  .v2-tl-content { display: flex; flex-direction: column; align-items: center; }
  .v2-tl-desc { text-align: center; }
  .v2-tl-actions { justify-content: center; }
  .v2-tl-metrics { justify-content: center; }
}

@media (max-width: 768px) {
  .v2-tl-section { padding: 3.5rem 0 3rem; }
  .v2-tl-visual { min-height: 250px; }
  .v2-tl-orbit-system { width: 220px; height: 220px; }
  @keyframes v2-tl-orbitSpin {
    0%   { transform: rotate(0deg) translateX(90px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(90px) rotate(-360deg); }
  }
  .v2-tl-orbit-icon { width: 32px; height: 32px; margin: -16px 0 0 -16px; font-size: 0.75rem; }
  .v2-tl-shield { width: 72px; height: 86px; }
  .v2-tl-sectors { grid-template-columns: repeat(2, 1fr); }
  .v2-tl-glow-1, .v2-tl-glow-2 { display: none; }
  .v2-tl-coord { display: none; }
  .v2-tl-actions { flex-direction: column; width: 100%; }
  .v2-tl-btn-primary, .v2-tl-btn-ghost { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
  .v2-tl-sectors { grid-template-columns: 1fr; }
  .v2-tl-metrics { flex-wrap: wrap; gap: 1rem; }
  .v2-tl-metric-sep { display: none; }
  .v2-tl-metric { padding: 0 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .v2-tl-orbit { animation: none; }
  .v2-tl-orbit--1 .v2-tl-orbit-icon { position: absolute; top: -160px; left: -20px; margin: 0; }
  .v2-tl-orbit--2 .v2-tl-orbit-icon { position: absolute; top: -60px;  left: 120px; margin: 0; }
  .v2-tl-orbit--3 .v2-tl-orbit-icon { position: absolute; top: 60px;   left: 140px; margin: 0; }
  .v2-tl-orbit--4 .v2-tl-orbit-icon { position: absolute; top: 120px;  left: 20px;  margin: 0; }
  .v2-tl-orbit--5 .v2-tl-orbit-icon { position: absolute; top: 40px;   left: -100px; margin: 0; }
  .v2-tl-shield-pulse, .v2-tl-shield::after { animation: none; }
  .v2-tl-orbit-ring { animation: none; }
  .v2-tl-btn-primary::after { transition: none; }
  .v2-tl-sector { opacity: 1; transform: none; }
}