@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

body {
  font-family: "Plus Jakarta Sans", Inter, Roboto, "Open Sans", "Segoe UI", Arial, sans-serif;
  background: #0c1430;
  color: #d8e2ff;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(7, 16, 45, 0.65);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(12px);
}

.logo,
.nav-links a {
  color: #ffffff;
}

.nav-links a:hover,
.nav-links a:focus-visible {
  background: rgba(255, 255, 255, 0.12);
}

.hero {
  position: relative;
  overflow: hidden;
  padding-top: 138px;
  padding-bottom: 92px;
  background:
    radial-gradient(circle at 90% 20%, rgba(248, 255, 53, 0.2) 0%, rgba(248, 255, 53, 0) 40%),
    radial-gradient(circle at 12% 12%, rgba(104, 101, 255, 0.42) 0%, rgba(104, 101, 255, 0) 44%),
    linear-gradient(145deg, #1019a7 0%, #0a1458 55%, #090d2c 100%);
}

.hero::before {
  content: "";
  position: absolute;
  right: 8%;
  top: 18%;
  width: 190px;
  height: 190px;
  background: url("softec/assets/img/hero/hero-4-3.png") no-repeat center/contain;
  opacity: 0.22;
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 170px;
  background: linear-gradient(180deg, rgba(11, 20, 59, 0) 0%, rgba(11, 20, 59, 0.9) 100%);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  z-index: 2;
}

.eyebrow {
  background: transparent;
  border: 0;
  color: #f8ff35;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0;
  font-size: 0.82rem;
}

h1,
.section-heading h2,
.info-card h2,
.feature-card h3,
.step-card h3,
.faq-item h3,
.assessment-screen h2 {
  color: #ffffff;
}

h1 {
  font-size: clamp(2rem, 6vw, 4.4rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.subheadline,
.trust-badge,
.info-card p,
.feature-card p,
.step-card p,
.faq-item p,
.review-card blockquote,
.reviewer,
.section-heading p,
.assessment-screen p,
.assessment-micro,
.assessment-progress-text,
.fine-print {
  color: #d7defc;
}

.hero-media {
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 26px;
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.34);
}

.btn-primary {
  color: #1117a0;
  background: linear-gradient(145deg, #f8ff35, #ffce57);
  box-shadow: 0 12px 26px rgba(255, 206, 87, 0.36);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  box-shadow: 0 14px 30px rgba(255, 206, 87, 0.45);
}

.section,
.section-alt,
.pricing {
  background: #0b143b;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.info-card,
.feature-card,
.step-card,
.review-card,
.faq-item {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 14px 24px rgba(2, 4, 20, 0.24);
}

.info-card-solution {
  background: rgba(255, 255, 255, 0.08);
}

.icon-wrap {
  background: rgba(248, 255, 53, 0.12);
  border: 1px solid rgba(248, 255, 53, 0.45);
}

.icon-wrap svg {
  fill: #f8ff35;
}

.step-number {
  background: linear-gradient(145deg, #6865ff, #1117a0);
  color: #fff;
}

.stars {
  color: #f8ff35;
}

.assessment-box {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 24px 36px rgba(0, 0, 0, 0.28);
}

.assessment-progress-track {
  background: rgba(255, 255, 255, 0.2);
}

.assessment-progress-fill {
  background: linear-gradient(90deg, #f8ff35, #ffce57);
}

.assessment-benefits li,
.assessment-description {
  color: #f4f7ff;
}

.assessment-benefits li::before,
.checklist li::before {
  background: rgba(248, 255, 53, 0.2);
  border: 2px solid #f8ff35;
}

.assessment-option {
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

.assessment-option:hover,
.assessment-option:focus-visible {
  border-color: rgba(248, 255, 53, 0.75);
  background: rgba(255, 255, 255, 0.14);
}

.assessment-spinner {
  border: 4px solid rgba(255, 255, 255, 0.24);
  border-top-color: #f8ff35;
}

.assessment-form input[type="email"] {
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.assessment-form input[type="email"]::placeholder {
  color: #d5defc;
}

.assessment-form input[type="email"]:focus-visible {
  outline: 2px solid rgba(248, 255, 53, 0.8);
}

.assessment-check {
  color: #d6ddfb;
}

.assessment-check a {
  color: #f8ff35;
}

.price-area {
  border: 1px dashed rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.07);
}

.price-area p {
  color: #fff;
}

.old-price {
  color: #c8d3ff;
}

.today-price {
  color: #f8ff35;
  font-size: 1.7rem;
}

.site-footer {
  background: linear-gradient(165deg, #050b24, #050913);
  color: #d5defc;
}

.footer-links a {
  color: #f8ff35;
  border: 1px solid rgba(248, 255, 53, 0.35);
  border-radius: 999px;
  padding: 4px 10px;
}

.footer-links a:hover,
.footer-links a:focus-visible {
  background: rgba(248, 255, 53, 0.1);
}

.business-info,
.site-footer .fine-print,
.site-footer .copyright {
  color: #c4cff7;
}

.business-info a {
  color: #f8ff35;
}

.cookie-banner {
  background: rgba(10, 18, 53, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.26);
  color: #dce5ff;
}

.cookie-actions .btn-primary,
.cookie-actions .btn-secondary {
  border-radius: 10px;
}

.cookie-actions .btn-secondary {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.06);
}

@media (max-width: 767px) {
  .site-header {
    position: sticky;
    background: rgba(7, 16, 45, 0.88);
  }

  .hero {
    padding-top: 92px;
  }
}