/* Shared homepage section and component primitives. */

.home-page {
  --home-bg: #070b10;
  --home-bg-2: #0b1118;
  --home-panel: rgba(15, 23, 32, 0.72);
  --home-panel-strong: rgba(18, 28, 39, 0.88);
  --home-panel-soft: rgba(255, 255, 255, 0.055);
  --home-border: rgba(205, 235, 255, 0.13);
  --home-border-strong: rgba(18, 218, 209, 0.34);
  --home-text: #f5f8fb;
  --home-muted: #aebdca;
  --home-subtle: #738291;
  --home-cyan: #12dad1;
  --home-teal: #0ea7a1;
  --home-amber: #ffad5c;
  --home-card-shadow: 0 24px 80px rgba(0, 0, 0, 0.34);
  --home-glow: 0 0 0 1px rgba(18, 218, 209, 0.18), 0 22px 70px rgba(18, 218, 209, 0.11);
  --focus-ring-home: 0 0 0 4px rgba(18, 218, 209, 0.24);
}

.section-container,
.services-content,
.testimonial-inner,
.about-wrapper,
.faq-container,
.contact-wrapper {
  width: min(100% - 40px, var(--container-2xl, 1360px));
  margin-inline: auto;
}

.section-header {
  max-width: 720px;
  margin: 0 auto var(--space-16, 16px);
  text-align: center;
}

.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  margin-bottom: var(--space-8, 8px);
  color: var(--home-cyan, var(--brand-teal-dark));
  font-size: 0.72rem;
  font-weight: 760;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.section-title,
.services-headline,
.testimonials-section h2,
.about-title,
#faq-heading,
.faq-heading,
#contact-heading,
.contact-section h2 {
  color: var(--home-text, var(--text-strong));
  font-family: var(--font-family-display);
  font-size: clamp(1.45rem, 2.4vw, 2.1rem);
  font-weight: 780;
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  margin: 0;
  text-wrap: balance;
}

.section-copy,
.services-subtitle,
.faq-subtext,
.contact-subtitle,
.about-mission {
  color: var(--home-muted, var(--text-body));
  font-size: clamp(0.86rem, 1vw, 0.94rem);
  line-height: 1.45;
  letter-spacing: 0;
}

.surface-card,
.service-card,
.testimonial-card,
.about-stat,
.faq-item,
.contact-form {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.045)),
    var(--home-panel, #fff);
  border: 1px solid var(--home-border, var(--border-subtle));
  border-radius: var(--radius-xl);
  box-shadow: var(--home-card-shadow, var(--shadow-soft));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.surface-card:hover,
.service-card:hover,
.testimonial-card:hover,
.about-stat:hover,
.faq-item:hover,
.contact-form:hover {
  border-color: rgba(18, 218, 209, 0.28);
  box-shadow: var(--home-glow, var(--shadow-surface));
}

.btn,
.cta-btn,
.service-card__action,
.contact-submit {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: 44px;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--font-family-base);
  font-size: 0.9rem;
  font-weight: 740;
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  transition:
    transform var(--duration-normal) var(--ease-standard),
    box-shadow var(--duration-normal) var(--ease-standard),
    border-color var(--duration-normal) var(--ease-standard),
    background var(--duration-normal) var(--ease-standard),
    color var(--duration-normal) var(--ease-standard);
}

.btn-primary,
.cta-btn,
.service-card__action,
.contact-submit {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent 38%),
    linear-gradient(135deg, var(--home-cyan, var(--brand-teal)), var(--home-teal, var(--brand-teal-600)));
  color: #031315;
  box-shadow: 0 16px 42px rgba(18, 218, 209, 0.24);
}

.btn-primary:hover,
.cta-btn:hover,
.service-card__action:hover,
.contact-submit:hover {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.24), transparent 38%),
    linear-gradient(135deg, #55f4ed, var(--home-cyan, var(--brand-teal)));
  color: #031315;
  transform: translateY(-2px);
  box-shadow: 0 20px 56px rgba(18, 218, 209, 0.34);
}

.service-card__action:disabled,
.contact-submit:disabled,
.service-card__action[disabled],
.contact-submit[disabled] {
  cursor: not-allowed;
  opacity: 0.68;
  transform: none;
}

.service-card__action.success-state,
.contact-submit.success-state {
  color: #dffffd;
  background: linear-gradient(135deg, rgba(18, 218, 209, 0.26), rgba(15, 123, 143, 0.22));
  border-color: rgba(18, 218, 209, 0.38);
  box-shadow: 0 10px 28px rgba(15, 123, 143, 0.18);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--home-text, var(--text-primary));
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(18, 218, 209, 0.36);
  color: var(--home-text, var(--text-primary));
}

.btn:focus-visible,
.cta-btn:focus-visible,
.service-card__action:focus-visible,
.contact-submit:focus-visible,
.nav-links a:focus-visible,
.nav-login-link:focus-visible,
.faq-question:focus-visible,
.contact-form input:focus-visible,
.contact-form textarea:focus-visible,
.scroll-btn:focus-visible,
.user-avatar-btn:focus-visible,
.menu-toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-home);
}

.ngf-icon {
  width: 1.25em;
  height: 1.25em;
  display: inline-block;
  flex: 0 0 auto;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.icon-badge,
.value-icon,
.detail-icon,
.service-card__icon,
.faq-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

#services-section,
.testimonials-section,
.about-section,
.faq-section,
.contact-section {
  position: relative;
  overflow: hidden;
  scroll-margin-top: 72px;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#services-section::before,
.testimonials-section::before,
.about-section::before,
.faq-section::before,
.contact-section::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(18, 218, 209, 0.28), rgba(255, 173, 92, 0.18), transparent);
  pointer-events: none;
}

#services-section::after,
.testimonials-section::after,
.about-section::after,
.faq-section::after,
.contact-section::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.28;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(180deg, transparent, black 12%, black 82%, transparent);
  pointer-events: none;
}

#services-section,
.about-section,
.contact-section {
  background:
    radial-gradient(circle at 12% 12%, rgba(18, 218, 209, 0.12), transparent 32%),
    radial-gradient(circle at 88% 18%, rgba(255, 173, 92, 0.08), transparent 28%),
    linear-gradient(180deg, #080c12 0%, #0b1118 100%);
}

.testimonials-section,
.faq-section {
  background:
    radial-gradient(circle at 84% 10%, rgba(18, 218, 209, 0.10), transparent 32%),
    linear-gradient(180deg, #0b1118 0%, #080c12 100%);
}

.home-reveal {
  opacity: 0;
  transform: translateY(26px);
}

.home-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 680ms var(--ease-standard),
    transform 680ms var(--ease-standard);
}

@media (max-width: 900px) {
  .section-container,
  .services-content,
  .testimonial-inner,
  .about-wrapper,
  .faq-container,
  .contact-wrapper {
    width: min(100% - 28px, var(--container-2xl, 1360px));
  }

  .section-header {
    margin-bottom: var(--space-24);
  }
}

@media (max-width: 560px) {
  .section-container,
  .services-content,
  .testimonial-inner,
  .about-wrapper,
  .faq-container,
  .contact-wrapper {
    width: min(100% - 28px, var(--container-2xl, 1360px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-reveal {
    opacity: 1;
    transform: none;
  }
}