/**
 * ==============================================================================
 * IMPACTA-HOME-HERO.CSS — HAUTE COUTURE DARK LUXURY HERO SYSTEM
 * Awwwards / Digitam / Apple-grade visual depth, kinetic typography, 3D HUD
 * ==============================================================================
 */

/* ─── 01. HERO CONTAINER & 3D BACKDROP ─── */
.hero-section {
  position: relative !important;
  isolation: isolate !important;
  z-index: 2 !important;
  background: #040407 !important;
  overflow: hidden !important;
  padding-top: clamp(120px, 14vh, 160px) !important;
  padding-bottom: clamp(70px, 9vh, 110px) !important;
}

.hero-3d-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.hero-3d-backdrop canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-3d-backdrop.on canvas {
  opacity: 1;
}

/* Vignette & Depth Mask */
.hero-3d-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 65% 45%, transparent 20%, rgba(4, 4, 7, 0.6) 65%, #040407 95%),
              linear-gradient(180deg, rgba(4, 4, 7, 0.4) 0%, transparent 25%, transparent 75%, #040407 100%);
  pointer-events: none;
}

.hero-container {
  position: relative;
  z-index: 2;
  display: grid !important;
  grid-template-columns: 1.08fr 1fr !important;
  gap: clamp(40px, 5vw, 75px) !important;
  align-items: center !important;
  max-width: 1360px !important;
  margin: 0 auto !important;
  padding: 0 clamp(20px, 4vw, 40px) !important;
}

/* ─── 02. HERO HEADLINE & KINETIC TYPOGRAPHY ─── */
.hero-content {
  position: relative;
  z-index: 5;
}

.hero-title {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: clamp(42px, 5.2vw, 68px) !important;
  font-weight: 800 !important;
  line-height: 1.06 !important;
  letter-spacing: -0.035em !important;
  color: #ffffff !important;
  margin: 0 0 24px !important;
  text-wrap: balance !important;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.8) !important;
}

/* Liquid Impacta Hub Electric Orange & White Silk Shimmer on em */
.hero-title em {
  font-style: italic !important;
  font-family: 'Playfair Display', Georgia, serif, -apple-system, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  background: linear-gradient(125deg, #ffffff 0%, #ffad7a 24%, #ff5500 52%, #ff7728 76%, #e04400 100%) !important;
  background-size: 240% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline-block !important;
  filter: drop-shadow(0 2px 26px rgba(255, 85, 0, 0.42)) !important;
  animation: impactaTextShimmer 6.5s ease-in-out infinite alternate !important;
}

@keyframes impactaTextShimmer {
  0% {
    background-position: 0% 50%;
    filter: drop-shadow(0 2px 20px rgba(255, 85, 0, 0.32));
  }
  100% {
    background-position: 100% 50%;
    filter: drop-shadow(0 4px 34px rgba(255, 85, 0, 0.58));
  }
}

.hero-subtitle {
  font-size: clamp(15px, 1.25vw, 17px) !important;
  line-height: 1.62 !important;
  color: #c4c4cd !important;
  margin: 0 0 16px !important;
  max-width: 48ch !important;
  letter-spacing: -0.01em !important;
  font-weight: 400 !important;
}

.hero-support {
  font-size: clamp(14px, 1.1vw, 15.5px) !important;
  font-style: italic !important;
  color: #e2e2ec !important;
  margin: 0 0 32px !important;
  max-width: 50ch !important;
  line-height: 1.55 !important;
}

/* ─── 03. TACTILE MAGNETIC CTA BUTTON ─── */
.hero-cta-wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  align-items: flex-start !important;
}

#hero-cta-btn.button.primary {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 16px 36px !important;
  background: linear-gradient(135deg, #ff5b16 0%, #ff7a00 50%, #e04f10 100%) !important;
  color: #ffffff !important;
  font-family: 'Montserrat', -apple-system, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  border-radius: 9999px !important;
  text-decoration: none !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28) inset,
              0 14px 36px -6px rgba(255, 91, 22, 0.55),
              0 4px 12px rgba(0, 0, 0, 0.6) !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#hero-cta-btn.button.primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
  transition: left 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

#hero-cta-btn.button.primary:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4) inset,
              0 20px 48px -6px rgba(255, 91, 22, 0.7),
              0 8px 16px rgba(0, 0, 0, 0.5) !important;
}

#hero-cta-btn.button.primary:hover::before {
  left: 150%;
}

#hero-cta-btn.button.primary:active {
  transform: translateY(1px) scale(0.97) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset,
              0 8px 20px -4px rgba(255, 91, 22, 0.4) !important;
}

#hero-cta-btn .cta-arrow {
  display: inline-block;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  font-size: 16px;
}

#hero-cta-btn.button.primary:hover .cta-arrow {
  transform: translateX(4px);
}

/* ─── 04. LUXURY TRUST CAPSULES (MICROCOPY) ─── */
.hero-trust-capsules {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px 10px !important;
  margin-top: 4px !important;
}

.hero-trust-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  border-radius: 9999px !important;
  background: rgba(255, 255, 255, 0.035) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  font-size: 12.5px !important;
  color: #c4c4cd !important;
  letter-spacing: 0.01em !important;
  line-height: 1.3 !important;
  transition: border-color 0.22s ease, background 0.22s ease !important;
}

.hero-trust-item:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 85, 0, 0.35) !important;
  color: #ffffff !important;
}

.hero-trust-item .trust-check {
  color: #10b981 !important;
  font-weight: 700 !important;
}

/* ─── 05. AUTONOMOUS COMMAND COCKPIT (3D HUD) ─── */
.hero-hud-wrapper {
  position: relative !important;
  margin-top: 0 !important;
  padding-bottom: 0 !important;
  perspective: 1200px !important;
  max-width: 620px !important;
  width: 100% !important;
  transform-style: preserve-3d !important;
}

.hero-command-hud {
  position: relative !important;
  background: rgba(12, 13, 18, 0.82) !important;
  backdrop-filter: blur(32px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 22px !important;
  box-shadow: 0 32px 80px -20px rgba(0, 0, 0, 0.9),
              0 0 50px -15px rgba(255, 85, 0, 0.14),
              inset 0 1px 0 0 rgba(255, 255, 255, 0.12) !important;
  overflow: hidden !important;
  will-change: transform !important;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.25s ease !important;
  transform-style: preserve-3d !important;
}

.hero-command-hud:hover {
  border-color: rgba(255, 85, 0, 0.35) !important;
  box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.95),
              0 0 60px -10px rgba(255, 85, 0, 0.22),
              inset 0 1px 0 0 rgba(255, 255, 255, 0.2) !important;
}

/* Dynamic Glare Specular Light Sweep */
.hero-command-hud::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 380px at var(--mouse-x, 50%) var(--mouse-y, 30%), rgba(255, 255, 255, 0.07), transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 10;
}

.hero-command-hud:hover::after {
  opacity: 1;
}

/* HUD Header: Live Telemetry Bar */
.hud-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 20px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  font-family: var(--font-mono, monospace) !important;
}

.hud-status-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  color: #34d399 !important;
  text-transform: uppercase !important;
}

.hud-status-pulse {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
  box-shadow: 0 0 10px #10b981 !important;
  animation: hudPulseGlow 2s infinite ease-in-out !important;
}

@keyframes hudPulseGlow {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 8px #10b981;
  }
  50% {
    opacity: 0.55;
    transform: scale(1.25);
    box-shadow: 0 0 16px #34d399;
  }
}

.hud-telemetry-tag {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #ff5500 !important;
  background: rgba(255, 85, 0, 0.08) !important;
  border: 1px solid rgba(255, 85, 0, 0.25) !important;
  padding: 3px 10px !important;
  border-radius: 9999px !important;
}

.hud-body {
  padding: 22px 20px 20px !important;
}

/* ─── 06. ARCHITECTURE NODES & ELECTRIC ENERGY FLOW ─── */
.hud-nodes-architecture {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  position: relative !important;
}

.hud-node-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 18px !important;
  background: rgba(20, 21, 28, 0.7) !important;
  backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 14px !important;
  position: relative !important;
  transition: all 0.26s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  z-index: 2 !important;
}

.hud-node-card:hover {
  background: rgba(26, 27, 36, 0.9) !important;
  border-color: rgba(255, 85, 0, 0.42) !important;
  transform: translate3d(4px, 0, 12px) !important;
  box-shadow: 0 10px 24px -6px rgba(0, 0, 0, 0.6),
              0 0 20px -4px rgba(255, 85, 0, 0.2) !important;
}

.hud-node-left {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: 0 !important;
}

.hud-node-icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  background: rgba(255, 85, 0, 0.1) !important;
  border: 1px solid rgba(255, 85, 0, 0.28) !important;
  color: #ff5500 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  flex-shrink: 0 !important;
  transition: all 0.22s ease !important;
}

.hud-node-card:hover .hud-node-icon {
  background: #ff5500 !important;
  color: #ffffff !important;
  box-shadow: 0 0 16px rgba(255, 85, 0, 0.55) !important;
}

.hud-node-name {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: #ffffff !important;
  margin-bottom: 2px !important;
}

.hud-node-desc {
  font-size: 11.5px !important;
  line-height: 1.45 !important;
  color: #a0a0aa !important;
}

.hud-node-metric {
  text-align: right !important;
  font-family: var(--font-mono, monospace) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #ff7728 !important;
  background: rgba(255, 85, 0, 0.08) !important;
  border: 1px solid rgba(255, 85, 0, 0.22) !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  flex-shrink: 0 !important;
  margin-left: 12px !important;
  transition: all 0.22s ease !important;
}

.hud-node-card:hover .hud-node-metric {
  background: rgba(255, 85, 0, 0.2) !important;
  border-color: rgba(255, 85, 0, 0.5) !important;
  box-shadow: 0 0 12px rgba(255, 85, 0, 0.35) !important;
}

/* Dynamic Glowing Electric Connector Line */
.hud-connector-line {
  position: relative !important;
  width: 2px !important;
  height: 16px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  margin: 0 0 0 36px !important;
  overflow: hidden !important;
  z-index: 1 !important;
}

.hud-connector-line::after {
  content: '' !important;
  position: absolute !important;
  top: -100% !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(180deg, transparent, #ff5500, #ff8833, transparent) !important;
  box-shadow: 0 0 8px #ff5500 !important;
  animation: electricPulse 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
}

@keyframes electricPulse {
  0% {
    top: -100%;
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

/* ─── 07. LUXURY DYNAMIC REVIEW RADAR ─── */
.hud-reviews-card {
  margin-top: 18px !important;
  padding: 16px 18px !important;
  background: rgba(16, 17, 24, 0.85) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  position: relative !important;
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.6) !important;
  transition: border-color 0.25s ease !important;
}

.hud-reviews-card:hover {
  border-color: rgba(255, 85, 0, 0.3) !important;
}

.hud-reviews-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 10px !important;
}

.hud-reviews-stars {
  color: #ff5500 !important;
  font-size: 13px !important;
  letter-spacing: 2.5px !important;
  text-shadow: 0 0 12px rgba(255, 85, 0, 0.45) !important;
}

.hud-reviews-badge {
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #34d399 !important;
  font-weight: 700 !important;
  background: rgba(16, 185, 129, 0.1) !important;
  padding: 3px 9px !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
}

.hud-reviews-slider {
  position: relative !important;
  overflow: hidden !important;
  height: 82px !important;
  mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
}

.hud-reviews-track {
  display: flex !important;
  flex-direction: column !important;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.hud-review-slide {
  height: 82px !important;
  min-height: 82px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  opacity: 1 !important;
}

.hud-review-quote {
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: #f4f4f5 !important;
  font-style: italic !important;
  margin: 0 0 6px !important;
}

.hud-review-author {
  font-size: 11.5px !important;
  color: #d4b375 !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}

.hud-reviews-dots {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 10px !important;
}

.hud-dot {
  width: 6px !important;
  height: 5px !important;
  border-radius: 9999px !important;
  background: rgba(255, 255, 255, 0.18) !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.hud-dot.is-active {
  width: 20px !important;
  background: #d4b375 !important;
  box-shadow: 0 0 10px rgba(212, 179, 117, 0.6) !important;
}

/* ─── 08. RESPONSIVE BREAKPOINTS ─── */
@media (max-width: 1060px) {
  .hero-container {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }
  .hero-title {
    max-width: 100% !important;
  }
  .hero-hud-wrapper {
    max-width: 580px !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 640px) {
  .hero-section {
    padding-top: 105px !important;
    padding-bottom: 60px !important;
  }
  .hero-title {
    font-size: 38px !important;
    line-height: 1.1 !important;
  }
  .hero-subtitle {
    font-size: 15px !important;
  }
  .hud-node-card {
    padding: 12px 14px !important;
  }
  .hud-node-metric {
    display: none !important;
  }
  .hero-trust-capsules {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}