/* Frontpage redesign layer: visual only, loaded after the compiled theme. */
:root {
  --fx-primary: #2563eb;
  --fx-primary-dark: #1e3a8a;
  --fx-ink: #0f172a;
  --fx-muted: #64748b;
  --fx-surface: #f8fafc;
  --fx-border: #e2e8f0;
  --fx-radius: 20px;
}

/* ---------- Hero ---------- */
#main #main-background {
  position: relative;
  overflow: hidden;
  background-color: var(--fx-primary-dark);
  background-image:
    radial-gradient(60% 60% at 15% 10%, rgba(96, 165, 250, .55) 0%, transparent 60%),
    radial-gradient(50% 50% at 90% 80%, rgba(99, 102, 241, .5) 0%, transparent 60%),
    linear-gradient(135deg, #1d4ed8 0%, #1e3a8a 100%);
}
#main #main-background::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  pointer-events: none;
}
#main .text-container { position: relative; max-width: 860px; margin: 0 auto; }
#main .text-container h6 {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .02em;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .25);
  backdrop-filter: blur(6px);
}
#main .text-container h1,
#main .text-container h2.ah-headline {
  font-size: clamp(34px, 6vw, 64px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.02em;
  text-shadow: none;
}
#main .text-container h2.ah-headline .ah-words-wrapper b { color: #93c5fd; }
#main .text-container p {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.7;
  color: rgba(255, 255, 255, .85);
}

.fx-hero-cta { gap: 14px; flex-wrap: wrap; }
.fx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 32px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none !important;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.fx-btn:hover { transform: translateY(-2px); }
.fx-btn-light { background: #fff; color: var(--fx-primary-dark) !important; box-shadow: 0 10px 25px rgba(0, 0, 0, .18); }
.fx-btn-ghost { color: #fff !important; border: 1px solid rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .08); }
.fx-btn-ghost:hover { background: rgba(255, 255, 255, .18); }

/* ---------- Section titles ---------- */
#steps-wrapper .title,
#benefits-wrapper .title,
#info-banner .title { position: relative; }
#steps-wrapper .title p,
#benefits-wrapper .title p {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  background: #dbeafe;
  color: var(--fx-primary) !important;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
#steps-wrapper .title h3,
#benefits-wrapper .title h3,
#info-banner .title h3 {
  color: var(--fx-ink);
  font-weight: 800;
  letter-spacing: -.01em;
}

/* ---------- Steps ---------- */
#steps-wrapper { background: #fff; }
#steps-wrapper .steps-box-wrapper::before,
#steps-wrapper .steps-box-wrapper::after { display: none; }
#steps-wrapper .steps-box-wrapper { margin-bottom: 24px; }
#steps-wrapper .steps-box {
  height: auto;
  min-height: 200px;
  overflow: hidden;
  padding: 28px;
  background: var(--fx-surface);
  border: 1px solid var(--fx-border);
  border-radius: var(--fx-radius);
  text-align: left;
}
#steps-wrapper .steps-box:hover {
  background: #fff;
  border-color: #bfdbfe;
  box-shadow: 0 20px 40px -12px rgba(37, 99, 235, .18);
}
#steps-wrapper .step-number-big p { color: rgba(37, 99, 235, .08); }
#steps-wrapper .step-number h6 { color: var(--fx-primary); font-weight: 700; }
#steps-wrapper .step-title h2 { color: var(--fx-ink); font-weight: 700; }
#steps-wrapper .step-description p { color: var(--fx-muted); }

/* ---------- Features ---------- */
#benefits-wrapper { background: var(--fx-surface); }
#benefits-wrapper .benefits-box-wrapper {
  height: 100%;
  padding: 28px 24px;
  border: 1px solid var(--fx-border);
  border-radius: var(--fx-radius);
  box-shadow: none;
}
#benefits-wrapper .benefits-box-wrapper:hover,
#benefits-wrapper .benefits-box-wrapper:focus {
  border-color: #bfdbfe;
  box-shadow: 0 20px 40px -12px rgba(37, 99, 235, .18);
  transform: translateY(-4px);
}
#benefits-wrapper .benefit-image img { max-height: 120px; width: auto; }
#benefits-wrapper .benefit-title h6 { color: var(--fx-ink); }
#benefits-wrapper .btn-primary-frontend-small { background: var(--fx-primary); border: 0; }

/* ---------- Info banner ---------- */
#info-banner .info-box { border-radius: var(--fx-radius); overflow: hidden; }

@media (max-width: 767px) {
  #main .text-container p { font-size: 16px; }
  .fx-btn { width: 100%; max-width: 320px; }
}