/* Hero Section */
.hero-landing {
  /* Darker bluish gradient for better contrast and modern feel */
  background: linear-gradient(
    135deg,
    var(--scitex-color-02) 0%,
    var(--scitex-color-03) 35%,
    var(--scitex-color-04) 70%,
    var(--scitex-color-05) 100%
  );
  padding: var(--spacing-xxl) 0 var(--spacing-xxl) 0;
  position: relative;
  overflow: hidden;
  /* Layered pattern: scattered dots + radial gradient for depth */
  background-image:
    radial-gradient(
      circle at 20% 30%,
      rgba(181, 199, 209, 0.2) 2px,
      transparent 2px
    ),
    radial-gradient(
      circle at 60% 70%,
      rgba(181, 199, 209, 0.15) 3px,
      transparent 3px
    ),
    radial-gradient(
      circle at 80% 20%,
      rgba(212, 225, 232, 0.25) 1.5px,
      transparent 1.5px
    ),
    radial-gradient(
      circle at 40% 80%,
      rgba(181, 199, 209, 0.18) 2.5px,
      transparent 2.5px
    ),
    radial-gradient(
      circle at 10% 60%,
      rgba(212, 225, 232, 0.2) 2px,
      transparent 2px
    ),
    radial-gradient(
      circle at 50% 50%,
      rgba(255, 255, 255, 0.1) 0%,
      transparent 70%
    ),
    linear-gradient(
      135deg,
      var(--scitex-color-04) 0%,
      var(--scitex-color-05) 35%,
      var(--scitex-color-06) 70%,
      var(--scitex-color-07) 100%
    );
  background-size:
    100px 100px,
    150px 150px,
    80px 80px,
    120px 120px,
    90px 90px,
    100% 100%,
    100% 100%;
  background-position:
    0 0,
    40px 60px,
    130px 270px,
    70px 100px,
    150px 30px,
    0 0,
    0 0;
}

/* Scattered random dots pattern for hero - light mode */
.hero-landing::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.3;
  background-image:
    radial-gradient(
      circle at 20% 30%,
      rgba(181, 199, 209, 0.4) 2px,
      transparent 2px
    ),
    radial-gradient(
      circle at 60% 70%,
      rgba(212, 225, 232, 0.5) 3px,
      transparent 3px
    ),
    radial-gradient(
      circle at 80% 20%,
      rgba(143, 164, 176, 0.3) 1.5px,
      transparent 1.5px
    ),
    radial-gradient(
      circle at 40% 80%,
      rgba(181, 199, 209, 0.4) 2.5px,
      transparent 2.5px
    ),
    radial-gradient(
      circle at 10% 60%,
      rgba(212, 225, 232, 0.5) 2px,
      transparent 2px
    );
  background-size:
    100px 100px,
    150px 150px,
    80px 80px,
    120px 120px,
    90px 90px;
  background-position:
    0 0,
    40px 60px,
    130px 270px,
    70px 100px,
    150px 30px;
}

/* Dark theme - bluish gradient with scattered dots */
[data-theme="dark"] .hero-landing {
  background: linear-gradient(
    135deg,
    #0d1520 0%,
    #1a2a40 35%,
    #34495e 70%,
    #506b7a 100%
  );
}

[data-theme="dark"] .hero-landing::before {
  opacity: 0.3;
  background-image:
    radial-gradient(
      circle at 20% 30%,
      rgba(108, 160, 200, 0.5) 2px,
      transparent 2px
    ),
    radial-gradient(
      circle at 60% 70%,
      rgba(143, 176, 210, 0.6) 3px,
      transparent 3px
    ),
    radial-gradient(
      circle at 80% 20%,
      rgba(80, 122, 160, 0.4) 1.5px,
      transparent 1.5px
    ),
    radial-gradient(
      circle at 40% 80%,
      rgba(108, 160, 200, 0.5) 2.5px,
      transparent 2.5px
    ),
    radial-gradient(
      circle at 10% 60%,
      rgba(143, 176, 210, 0.6) 2px,
      transparent 2px
    );
  background-size:
    100px 100px,
    150px 150px,
    80px 80px,
    120px 120px,
    90px 90px;
  background-position:
    0 0,
    40px 60px,
    130px 270px,
    70px 100px,
    150px 30px;
}

/* Ensure hero content stays above pattern */
.hero-landing .hero-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  z-index: 1;
  align-items: center; /* Center content vertically with PDF */
  gap: var(--spacing-xl);
}

.hero-landing .hero-content {
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 15%;
}

.hero-landing .hero-title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: var(--spacing-md);
  line-height: 1.1;
  /* Modern gradient text effect - Horizontal sweep */
  background: linear-gradient(
    90deg,
    var(--_scitex-01) 0%,
    var(--_scitex-03) 35%,
    var(--_scitex-04) 65%,
    var(--_scitex-05) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% auto;
}

/* Dark theme override - Bright to brighter sweep */
[data-theme="dark"] .hero-landing .hero-title {
  background: linear-gradient(
    90deg,
    var(--_scitex-04) 0%,
    var(--_scitex-05) 35%,
    var(--_scitex-06) 65%,
    var(--_scitex-07) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% auto;
}

.hero-landing .hero-subtitle {
  font-size: 1.25rem;
  margin-bottom: var(--spacing-lg);
  color: var(--text-color);
  max-width: 540px;
}

.hero-landing .hero-buttons {
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

.hero-landing .hero-image {
  text-align: center;
}

.hero-landing .hero-image img {
  max-width: 100%;
  height: auto;
  /* Remove the floating animation */
  animation: none;
}

/* Hero Logo Container */
.hero-landing .hero-logo-container {
  margin: var(--spacing-xl) 0;
  display: flex;
  justify-content: flex-start;
}

.hero-landing .hero-logo {
  max-width: 480px;
  height: auto;
  opacity: 0.95;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.15));
}

/* Light mode: invert white logo to black (transparent bg preserved) */
.hero-landing .hero-logo {
  filter: invert(1) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.15));
}

/* Dark mode: keep white logo as-is */
[data-theme="dark"] .hero-landing .hero-logo {
  filter: none;
  opacity: 0.95;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.3));
}