/* ==========================================================================
   Hero Section Widget — Premium Dark Design
   Full Responsive: Desktop / Tablet / Mobile
   ========================================================================== */

/* ==========================================================================
   1. Google Fonts
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ==========================================================================
   2. Wrapper Base
   ========================================================================== */

.hero-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #080814;
  padding: 120px 40px;
  box-sizing: border-box;
  overflow: hidden;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   3. Overlay
   ========================================================================== */

.hero-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(8, 8, 20, 0.75);
  z-index: 1;
  pointer-events: none;
}

/* ==========================================================================
   4. Noise Texture (subtle grain)
   ========================================================================== */

.hero-noise::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* ==========================================================================
   5. Decorative Glow Orbs
   ========================================================================== */

.hero-orbs {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.hero-orb {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}

.hero-orb-1 {
  width: 600px;
  height: 600px;
  background-color: #4e6ef2;
  opacity: 0.12;
  filter: blur(120px);
  top: -20%;
  left: -15%;
  animation: heroOrbDrift1 18s ease-in-out infinite alternate;
}

.hero-orb-2 {
  width: 500px;
  height: 500px;
  background-color: #a855f7;
  opacity: 0.10;
  filter: blur(100px);
  bottom: -20%;
  right: -10%;
  animation: heroOrbDrift2 22s ease-in-out infinite alternate;
}

@keyframes heroOrbDrift1 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(60px, 40px) scale(1.08); }
  100% { transform: translate(20px, 80px) scale(0.95); }
}

@keyframes heroOrbDrift2 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-50px, -30px) scale(1.05); }
  100% { transform: translate(-80px, 20px) scale(0.92); }
}

/* ==========================================================================
   6. Content Container
   ========================================================================== */

.hero-main-stack {
  display: contents;
}

.hero-content {
  position: relative;
  z-index: 10;
  max-width: 820px;
  width: 100%;
  display: flex;
	flex-direction: column;
	flex: 1;
	justify-content: center;
}

/* ==========================================================================
   6.5 Industries Integration
   ========================================================================== */

.hero-industries-section {
	position: relative;
	width: 100%;
	z-index: 10;
	padding: 20px 0;
	margin-bottom: 24px;
	animation: heroFadeUp 800ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
	animation-delay: 500ms;
	opacity: 0;
}

/* ==========================================================================
   7. Badge / Pill
   ========================================================================== */

.hero-badge-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 100px;
  background-color: rgba(78, 110, 242, 0.15);
  border: 1px solid rgba(78, 110, 242, 0.4);
  color: #a0b4f8;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.hero-badge:hover {
  background-color: rgba(78, 110, 242, 0.22);
  border-color: rgba(78, 110, 242, 0.6);
}

.hero-badge-icon {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
}

.hero-badge-icon i,
.hero-badge-icon svg {
  width: 14px;
  height: 14px;
}

/* ==========================================================================
   8. Pre-heading Label
   ========================================================================== */

.hero-pre-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #6c7fbe;
  margin: 0 0 16px 0;
}

/* ==========================================================================
   9. Main Heading
   ========================================================================== */

.hero-heading {
  font-size: clamp(36px, 6.5vw, 72px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #ffffff;
  margin: 0 0 24px 0;
}

.hero-highlight {
  display: inline;
  background: linear-gradient(135deg, #4e6ef2 0%, #a855f7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% auto;
  animation: heroGradientShift 4s ease-in-out infinite alternate;
}

@keyframes heroGradientShift {
  0%   { background-position: 0% center; }
  100% { background-position: 100% center; }
}

/* ==========================================================================
   10. Typewriter
   ========================================================================== */

.hero-typewriter-row {
  font-size: clamp(20px, 3vw, 32px);
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 32px 0;
  min-height: 1.4em;
}

.hero-typewriter-prefix {
  color: rgba(255, 255, 255, 0.7);
}

.hero-typewriter-word {
  color: #4e6ef2;
}

.hero-typewriter-cursor {
  display: inline-block;
  color: #4e6ef2;
  margin-left: 2px;
  animation: heroCursorBlink 0.8s steps(1) infinite;
  font-weight: 300;
}

@keyframes heroCursorBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ==========================================================================
   11. Description
   ========================================================================== */

.hero-description {
  font-size: clamp(15px, 2vw, 18px);
  font-weight: 400;
  line-height: 1.75;
  color: #9fa8c4;
  margin: 0 0 40px 0;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   12. Buttons
   ========================================================================== */

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  align-items: center;
  margin-bottom: 48px;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  border-radius: 10px;
  transition: all 0.25s ease;
  cursor: pointer;
  white-space: nowrap;
  outline-offset: 4px;
}

/* Primary */
.hero-btn-primary {
  background-color: #4e6ef2;
  color: #ffffff;
  padding: 14px 32px;
  box-shadow: 0 4px 24px rgba(78, 110, 242, 0.4), 0 1px 4px rgba(0, 0, 0, 0.3);
}

.hero-btn-primary:hover {
  background-color: #3a56d8;
  box-shadow: 0 6px 32px rgba(78, 110, 242, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4);
  transform: translateY(-2px);
  color: #ffffff;
  text-decoration: none;
}

/* Secondary */
.hero-btn-secondary {
  background-color: transparent;
  color: #a0b4f8;
  padding: 13px 30px;
  border: 1px solid rgba(160, 180, 248, 0.3);
}

.hero-btn-secondary:hover {
  background-color: rgba(160, 180, 248, 0.1);
  border-color: rgba(160, 180, 248, 0.6);
  color: #ffffff;
  transform: translateY(-2px);
  text-decoration: none;
}

.hero-btn-icon {
  display: inline-flex;
  align-items: center;
  transition: transform 0.2s ease;
}

.hero-btn-icon i,
.hero-btn-icon svg {
  width: 16px;
  height: 16px;
  font-size: 14px;
}

.hero-btn-primary:hover .hero-btn-icon {
  transform: translateX(3px);
}

/* ==========================================================================
   13. Scroll Indicator
   ========================================================================== */

.hero-scroll-indicator {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  z-index: 10;
  transition: color 0.25s ease;
  animation: heroScrollBounce 2.5s ease-in-out infinite;
}

.hero-scroll-indicator:hover {
  color: #ffffff;
  text-decoration: none;
  animation-play-state: paused;
}

.hero-scroll-text {
  font-size: 11px;
}

.hero-scroll-icon {
  display: flex;
  align-items: center;
}

@keyframes heroScrollBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(8px); }
}


/* ==========================================================================
   13.5 First-Screen Viewport Fit
   Keeps the complete hero visible below normal, sticky, or fixed headers.
   The content and industries slider are grouped into one stable stack so
   spacing controls do not fluctuate as the viewport-fit script recalculates.
   ========================================================================== */

.hero-wrapper.hero-fit-screen {
  --hero-fit-height: 100svh;
  --hero-min-safe-height: 560px;
  --hero-fit-pad-top: 34px;
  --hero-fit-pad-right: 40px;
  --hero-fit-pad-bottom: 62px;
  --hero-fit-pad-left: 40px;
  --hero-content-industries-gap: 24px;
  --hero-industries-scroll-gap: 16px;
  --hero-scroll-bottom: 14px;
  --hero-manual-offset: 0px;
  min-height: max(var(--hero-min-safe-height), var(--hero-fit-height)) !important;
  padding-top: var(--hero-fit-pad-top) !important;
  padding-right: var(--hero-fit-pad-right) !important;
  padding-bottom: var(--hero-fit-pad-bottom) !important;
  padding-left: var(--hero-fit-pad-left) !important;
  justify-content: flex-start;
  width: 100%;
}

/* Lock to the available first-screen height only when JS confirms that the
   actual content fits. If it does not fit, the widget safely grows naturally. */
.hero-wrapper.hero-fit-screen.hero-fit-locked {
  height: var(--hero-fit-height) !important;
  min-height: var(--hero-fit-height) !important;
  max-height: var(--hero-fit-height) !important;
}

/* The main content and the industries row now behave as one centered block.
   This removes the old flex expansion that created a large empty area between
   the CTA buttons and the industries slider. */
.hero-wrapper.hero-fit-screen .hero-main-stack {
  position: relative;
  z-index: 10;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  gap: var(--hero-content-industries-gap);
}

.hero-wrapper.hero-fit-screen .hero-content {
  flex: 0 0 auto;
  min-height: 0;
  justify-content: center;
}

/* In first-screen mode the dedicated gap controls own the vertical rhythm.
   This avoids stacking the legacy button and industries margins on top. */
.hero-wrapper.hero-fit-screen .hero-buttons {
  margin-bottom: 0 !important;
}

.hero-wrapper.hero-fit-screen .hero-industries-section {
  flex: 0 0 auto;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* The indicator remains in normal document flow instead of being absolutely
   positioned. Therefore bottom padding and spacing controls always produce a
   visible, predictable result and the icon can never overlap the section edge. */
.hero-wrapper.hero-fit-screen .hero-scroll-indicator {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto !important;
  flex: 0 0 auto;
  align-self: center;
  margin-top: var(--hero-industries-scroll-gap);
  margin-right: 0;
  margin-bottom: var(--hero-scroll-bottom);
  margin-left: 0;
  animation-name: heroScrollBounce;
}

/* Smart compact mode only activates on short browser heights. It reduces the
   internal text rhythm but no longer overrides user-controlled outer gaps. */
.hero-wrapper.hero-fit-tight .hero-badge-wrap {
  margin-bottom: 16px !important;
}

.hero-wrapper.hero-fit-tight .hero-pre-label {
  margin-bottom: 10px !important;
}

.hero-wrapper.hero-fit-tight .hero-heading {
  margin-bottom: 14px !important;
  font-size: clamp(38px, 5.25vw, 64px) !important;
  line-height: 1.04 !important;
}

.hero-wrapper.hero-fit-tight .hero-typewriter-row {
  margin-bottom: 18px !important;
  font-size: clamp(20px, 2.35vw, 28px) !important;
}

.hero-wrapper.hero-fit-tight .hero-description {
  margin-top: 0 !important;
  margin-bottom: 22px !important;
  line-height: 1.55 !important;
  font-size: clamp(14px, 1.35vw, 17px) !important;
}

.hero-wrapper.hero-fit-tight .hero-buttons {
  margin-bottom: 0 !important;
  gap: 12px !important;
}

.hero-wrapper.hero-fit-tight .hero-industries-section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.hero-wrapper.hero-fit-tight .industries-heading {
  margin-bottom: 12px !important;
}

.hero-wrapper.hero-fit-tight .industry-card {
  padding-top: 9px !important;
  padding-bottom: 9px !important;
}

.hero-wrapper.hero-fit-extra-tight .hero-badge-wrap {
  margin-bottom: 10px !important;
}

.hero-wrapper.hero-fit-extra-tight .hero-pre-label {
  margin-bottom: 7px !important;
}

.hero-wrapper.hero-fit-extra-tight .hero-heading {
  margin-bottom: 10px !important;
  font-size: clamp(34px, 4.8vw, 56px) !important;
}

.hero-wrapper.hero-fit-extra-tight .hero-typewriter-row {
  margin-bottom: 12px !important;
}

.hero-wrapper.hero-fit-extra-tight .hero-description {
  margin-bottom: 15px !important;
  line-height: 1.45 !important;
}

.hero-wrapper.hero-fit-extra-tight .hero-buttons {
  margin-bottom: 0 !important;
}

.hero-wrapper.hero-fit-extra-tight .hero-industries-section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.hero-wrapper.hero-fit-extra-tight .industries-heading {
  margin-bottom: 8px !important;
}

.hero-wrapper.hero-fit-extra-tight .industry-card {
  padding-top: 7px !important;
  padding-bottom: 7px !important;
}


/* Keep a clear, consistent gap between the industries heading and cards.
   Elementor's responsive control can override this default per device. */
.hero-wrapper.hero-fit-screen .industries-heading {
  margin-bottom: 18px !important;
}

/* This class is added only when the content genuinely cannot fit inside the
   viewport. Natural page height is then allowed, preventing clipping. */
.hero-wrapper.hero-fit-content-overflow {
  height: auto !important;
  min-height: max(var(--hero-min-safe-height), var(--hero-fit-height)) !important;
  max-height: none !important;
}

/* ==========================================================================
   14. Entrance Animation
   ========================================================================== */

.hero-animate-in .hero-badge-wrap,
.hero-animate-in .hero-pre-label,
.hero-animate-in .hero-heading,
.hero-animate-in .hero-typewriter-row,
.hero-animate-in .hero-description,
.hero-animate-in .hero-buttons {
  opacity: 0;
  transform: translateY(30px);
  animation: heroFadeUp var(--hero-anim-dur, 800ms) cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-animate-in .hero-badge-wrap    { animation-delay: 0ms; }
.hero-animate-in .hero-pre-label     { animation-delay: 80ms; }
.hero-animate-in .hero-heading       { animation-delay: 160ms; }
.hero-animate-in .hero-typewriter-row{ animation-delay: 260ms; }
.hero-animate-in .hero-description   { animation-delay: 340ms; }
.hero-animate-in .hero-buttons       { animation-delay: 440ms; }

@keyframes heroFadeUp {
  0%   { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   15. Responsive — Tablet (max 1024px)
   ========================================================================== */

@media (max-width: 1024px) {
  .hero-wrapper {
    padding: 80px 30px;
    min-height: 85vh;
  }

  .hero-heading {
    font-size: clamp(32px, 5.5vw, 56px);
  }

  .hero-orb-1 {
    width: 400px;
    height: 400px;
  }

  .hero-orb-2 {
    width: 350px;
    height: 350px;
  }
}

/* ==========================================================================
   16. Responsive — Mobile (max 767px)
   ========================================================================== */

@media (max-width: 767px) {
  .hero-wrapper {
    padding: 80px 20px;
    min-height: 100vh;
    text-align: center;
    align-items: center;
  }

  .hero-content {
    max-width: 100%;
    align-items: center;
  }

  .hero-badge-wrap {
    justify-content: center;
  }

  .hero-heading {
    font-size: clamp(28px, 8vw, 42px);
    letter-spacing: -0.02em;
  }

  .hero-typewriter-row {
    font-size: clamp(18px, 5vw, 24px);
  }

  .hero-description {
    font-size: 15px;
    max-width: 100%;
  }

  .hero-buttons {
    flex-direction: column;
    width: 100%;
    align-items: stretch;
  }

  .hero-btn {
    justify-content: center;
    width: 100%;
  }

  .hero-btn-primary,
  .hero-btn-secondary {
    padding: 14px 24px;
    font-size: 15px;
  }

  .hero-orb-1 {
    width: 300px;
    height: 300px;
    opacity: 0.09;
  }

  .hero-orb-2 {
    width: 280px;
    height: 280px;
    opacity: 0.07;
  }

  .hero-scroll-indicator {
    bottom: 20px;
  }

  .hero-pre-label {
    font-size: 10px;
    letter-spacing: 2px;
  }
}

/* ==========================================================================
   17. Responsive — Small Mobile (max 480px)
   ========================================================================== */

@media (max-width: 480px) {
  .hero-wrapper {
    padding: 70px 16px;
  }

  .hero-heading {
    font-size: clamp(26px, 9vw, 36px);
  }

  .hero-badge {
    font-size: 12px;
    padding: 7px 14px;
  }
}

/* ==========================================================================
   18. Accessibility
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .hero-orb,
  .hero-highlight,
  .hero-scroll-indicator,
  .hero-typewriter-cursor,
  .hero-animate-in *,
  .hero-btn {
    animation: none !important;
    transition: none !important;
  }

  .hero-animate-in .hero-badge-wrap,
  .hero-animate-in .hero-pre-label,
  .hero-animate-in .hero-heading,
  .hero-animate-in .hero-typewriter-row,
  .hero-animate-in .hero-description,
  .hero-animate-in .hero-buttons {
    opacity: 1;
    transform: none;
  }

  .hero-highlight {
    background: linear-gradient(135deg, #4e6ef2 0%, #a855f7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
}