/**
 * Hitex page atmosphere — fills open space with structure, not glow orbs.
 */

/* Site-wide subtle dot field */
.site-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: #f3f5f7;
  background-image: radial-gradient(circle at center, rgba(13, 148, 136, 0.09) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, #000 0%, #000 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 85%, transparent 100%);
}

main {
  position: relative;
  z-index: 1;
}

.header {
  width: 100%;
  left: 0;
  right: 0;
}

/* ── Hero: split canvas + grid ── */
.hero {
  position: relative;
  min-height: min(820px, calc(100vh - var(--header-height, 72px)));
  background:
    radial-gradient(ellipse 90% 70% at 88% 35%, rgba(204, 251, 241, 0.55) 0%, transparent 58%),
    radial-gradient(ellipse 60% 50% at 12% 88%, rgba(224, 242, 254, 0.45) 0%, transparent 55%),
    linear-gradient(180deg, #f8fafb 0%, #f3f5f7 100%) !important;
  border-bottom: 1px solid #dde3ea;
}

.hero .hero__grid {
  display: block !important;
  opacity: 1;
  background-image:
    linear-gradient(rgba(13, 148, 136, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 148, 136, 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 95% 85% at 50% 45%, black 15%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 95% 85% at 50% 45%, black 15%, transparent 72%);
}

.hero__layout {
  min-height: min(680px, calc(100vh - var(--header-height, 72px) - 2rem));
}

.hero__content::before {
  background: linear-gradient(180deg, #134e4a, #0d9488) !important;
  box-shadow: 0 0 0 1px rgba(13, 148, 136, 0.15);
}

.hero__badge {
  background: #fff !important;
  border: 1px solid #99f6e4 !important;
  color: #0f766e !important;
  font-family: var(--font-sans) !important;
  box-shadow: 0 2px 12px rgba(15, 118, 110, 0.08);
  backdrop-filter: none;
}

.hero__badge-dot {
  animation: none;
  background: #10b981;
  box-shadow: none;
}

.hero__title-rotate {
  background: none !important;
  -webkit-text-fill-color: #0d9488 !important;
  color: #0d9488 !important;
  animation: none !important;
}

.hero__title-dynamic::after {
  background: #0d9488 !important;
  box-shadow: none !important;
}

.hero__subtitle {
  max-width: 38ch;
}

/* Stats: light metric strip (not dark glass) */
.hero__stats {
  background: #fff !important;
  border: 1px solid #dde3ea !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 32px rgba(19, 78, 74, 0.08) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  gap: 0;
  overflow: hidden;
}

.hero__stat dt {
  background: none !important;
  -webkit-text-fill-color: #0f766e !important;
  color: #0f766e !important;
  font-size: 1.45rem !important;
}

.hero__stat dd {
  color: #64748b !important;
}

.hero__stat:not(:last-child)::after {
  background: #e2e8f0 !important;
}

/* Phone stage — product podium on hero */
.hero__phones {
  min-height: 0;
  height: auto;
}

.hero__phones::after {
  content: '';
  position: absolute;
  z-index: 0;
  bottom: 6%;
  left: 50%;
  transform: translateX(-50%);
  width: min(340px, 88%);
  height: 100px;
  border-radius: 28px;
  background: linear-gradient(180deg, #ffffff 0%, #ecfdf5 100%);
  border: 1px solid #ccfbf1;
  box-shadow:
    0 20px 50px rgba(13, 148, 136, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.hero__phones::before {
  width: 380px !important;
  height: 380px !important;
  background: radial-gradient(circle, rgba(45, 212, 191, 0.2) 0%, rgba(13, 148, 136, 0.06) 45%, transparent 70%) !important;
}

/* ── About: band + card lift ── */
.section--about {
  background:
    linear-gradient(180deg, #fff 0%, #f3f5f7 100%) !important;
  border-top: none;
}

.section--about::before {
  content: '';
  display: block;
  height: 4px;
  background: linear-gradient(90deg, transparent, #0d9488, #2dd4bf, #0d9488, transparent);
  opacity: 0.45;
  margin-bottom: -4px;
}

.about-grid {
  position: relative;
}

.about-card {
  border-radius: 12px !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.about-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(19, 78, 74, 0.12) !important;
}

.about-card__icon {
  background: #ecfdf5 !important;
  border: 1px solid #99f6e4;
  color: #0f766e !important;
  border-radius: 12px;
}

/* ── Solutions intro strip ── */
.section--solutions {
  position: relative;
  padding-block: 4rem 2.5rem !important;
  background:
    radial-gradient(ellipse 80% 100% at 50% 0%, rgba(204, 251, 241, 0.35), transparent 70%),
    #f3f5f7 !important;
}

.section--solutions::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(640px, 80%);
  height: 1px;
  background: linear-gradient(90deg, transparent, #cbd5e1, transparent);
}

.section__header--center h2::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  margin: 0.75rem auto 0;
  border-radius: 99px;
  background: #0d9488;
}

/* ── Technology + contact bands ── */
.section--tech {
  background: #fff !important;
  border-top: 1px solid #dde3ea;
  border-bottom: 1px solid #dde3ea;
}

.section--cta {
  background:
    radial-gradient(ellipse 70% 80% at 20% 100%, rgba(204, 251, 241, 0.4), transparent 55%),
    #f3f5f7 !important;
}

.section--contact {
  background: #fff !important;
  border-top: 1px solid #dde3ea;
}

.contact-form {
  border-radius: 12px !important;
}

/* Theme sections: breathing room between products */
.theme-section + .theme-section {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

@media (max-width: 900px) {
  .hero__phones::after {
    height: 100px;
    bottom: 4%;
  }

  .hero__layout {
    min-height: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-card:hover {
    transform: none;
  }
}
