*,

*::before,

*::after {

  box-sizing: border-box;

}



body {

  margin: 0;

  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  color: #111827;

  background: #f9fafb;

  line-height: 1.6;

}



a {

  color: inherit;

  text-decoration: none;

}



.site-header {

  background: #1d4ed8;

  border-bottom: 1px solid #1e40af;

  position: sticky;

  top: 0;

  z-index: 10;

}



.container {

  width: 95%;

  max-width: 1100px;

  margin: 0 auto;

}



.nav {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 0.7rem 0;

}



.brand {

  display: flex;

  align-items: center;

  gap: 0.55rem;

}



.logo-mark {

  width: 32px;

  height: 32px;

  border-radius: 999px;

  background: radial-gradient(circle at 30% 20%, #bfdbfe, #1d4ed8);

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 0 0 2px rgba(191, 219, 254, 0.35);

}



.logo-mark span {

  font-size: 0.9rem;

  font-weight: 800;

  color: #eff6ff;

}



.logo-text {

  display: flex;

  flex-direction: column;

  font-weight: 700;

  letter-spacing: 0.04em;

}



.logo-main {

  font-size: 1.05rem;

  text-transform: uppercase;

  color: #eff6ff;

}



.logo-tag {

  font-size: 0.7rem;

  text-transform: uppercase;

  color: #bfdbfe;

}



.nav-pill {

  font-size: 0.78rem;

  text-transform: uppercase;

  border-radius: 999px;

  padding: 0.3rem 0.85rem;

  border: 1px solid #bfdbfe;

  background: #eff6ff;

  color: #1d4ed8;

  font-weight: 600;

}



main {

  padding: 2.3rem 0 3.5rem;

}



.hero {

  display: grid;

  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);

  gap: 2.5rem;

  align-items: stretch;

}



.hero-copy h1 {

  font-size: clamp(2.1rem, 4vw, 2.6rem);

  margin-bottom: 0.5rem;

  color: #0f172a;

}



.hero-sub {

  opacity: 0.95;

  font-size: 0.98rem;

  max-width: 30rem;

  margin-bottom: 1.3rem;

  color: #4b5563;

}



.badge-row {

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  padding: 0.25rem 0.7rem;

  border-radius: 999px;

  border: 1px solid #dbeafe;

  font-size: 0.75rem;

  text-transform: uppercase;

  letter-spacing: 0.12em;

  margin-bottom: 0.9rem;

  background: #eff6ff;

  color: #1d4ed8;

}



.badge-dot {

  width: 8px;

  height: 8px;

  border-radius: 999px;

  background: #22c55e;

}



.pill-row {

  display: flex;

  flex-wrap: wrap;

  gap: 0.5rem;

  margin-bottom: 1.4rem;

}



.pill {

  font-size: 0.75rem;

  border-radius: 999px;

  padding: 0.25rem 0.7rem;

  border: 1px solid #e5e7eb;

  background: #ffffff;

  color: #374151;

}



.trust-text {

  font-size: 0.8rem;

  color: #4b5563;

}



.trust-text strong {

  color: #111827;

}



.cred-row {

  margin-top: 2.1rem;

  display: flex;

  flex-wrap: wrap;

  gap: 0.9rem;

}



.cred-badge {

  display: inline-flex;

  align-items: center;

  gap: 0.45rem;

  padding: 0.45rem 0.7rem;

  border-radius: 999px;

  border: 1px solid #e5e7eb;

  background: #ffffff;

  font-size: 0.78rem;

  color: #374151;

}



.cred-icon {

  width: 18px;

  height: 18px;

  border-radius: 999px;

  background: #eff6ff;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 0.75rem;

  color: #1d4ed8;

}



.hero-art-wrapper {

  display: flex;

  align-items: stretch;

}



.hero-art {

  position: relative;

  flex: 1;

  border-radius: 1.1rem;

  padding: 1.4rem 1.3rem;

  background: radial-gradient(circle at 10% 0%, #bfdbfe, #1d4ed8);

  box-shadow: 0 22px 50px rgba(15, 23, 42, 0.35);

  overflow: hidden;

}



.hero-art h3 {

  font-size: 1rem;

  color: #eff6ff;

  margin-bottom: 0.35rem;

}



.hero-art p {

  font-size: 0.82rem;

  color: #e0f2fe;

  max-width: 15rem;

  margin-bottom: 0.9rem;

}



.hero-stats {

  display: flex;

  gap: 1.1rem;

  font-size: 0.78rem;

  color: #e0f2fe;

  margin-bottom: 1.2rem;

}



.hero-stat-label {

  opacity: 0.9;

}



.hero-stat-value {

  font-weight: 700;

  display: block;

  font-size: 0.95rem;

  color: #ffffff;

}



.hero-illustration {

  position: absolute;

  right: -18px;

  bottom: -10px;

  width: 170px;

  height: 120px;

}



.hero-svg {

  width: 100%;

  height: 100%;

}



.hero-card {

  position: absolute;

  right: 18px;

  bottom: 22px;

  width: 140px;

  padding: 0.55rem 0.7rem;

  border-radius: 0.75rem;

  background: rgba(15, 23, 42, 0.85);

  color: #e5e7eb;

  font-size: 0.72rem;

  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.55);

}



.hero-card strong {

  display: block;

  font-size: 0.78rem;

  margin-bottom: 0.12rem;

}



.hero-card .small {

  font-size: 0.68rem;

  opacity: 0.9;

}



/* Form section */



.form-section {

  margin-top: 2.3rem;

}



.form-card {

  position: relative;

  background: #ffffff;

  border-radius: 1.1rem;

  padding: 1.4rem 1.4rem 1.7rem;

  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.18);

  border: 1px solid #e5e7eb;

}



.form-title {

  font-size: 1.05rem;

  font-weight: 600;

  margin-bottom: 0.2rem;

  color: #0f172a;

}



.form-sub {

  font-size: 0.8rem;

  color: #4b5563;

  margin-bottom: 1rem;

}



#quoteForm {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 0.75rem 0.9rem;

  font-size: 0.85rem;

}



.field-full {

  grid-column: 1 / -1;

}



label {

  display: block;

  margin-bottom: 0.18rem;

  font-size: 0.76rem;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  color: #6b7280;

}



input,

select,

textarea {

  width: 100%;

  padding: 0.55rem 0.6rem;

  border-radius: 0.6rem;

  border: 1px solid #cbd5f5;

  background: #f9fafb;

  color: #111827;

  font-size: 0.86rem;

}



input::placeholder,

textarea::placeholder {

  color: #9ca3af;

}



textarea {

  resize: vertical;

  min-height: 60px;

}



.subnote {

  font-size: 0.72rem;

  margin-top: 0.2rem;

  color: #6b7280;

}



.checkbox-row {

  display: flex;

  flex-wrap: wrap;

  gap: 0.6rem;

  font-size: 0.8rem;

}



.btn-primary {

  grid-column: 1 / -1;

  margin-top: 0.2rem;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 0.4rem;

  padding: 0.7rem 0.9rem;

  border-radius: 999px;

  border: none;

  background: linear-gradient(135deg, #3b82f6, #1d4ed8);

  color: #eff6ff;

  font-weight: 600;

  font-size: 0.9rem;

  text-transform: uppercase;

  letter-spacing: 0.12em;

  cursor: pointer;

  box-shadow: 0 12px 30px rgba(37, 99, 235, 0.45);

}



.btn-primary .arrow {

  font-size: 1.1rem;

}



.live-indicator {

  grid-column: 1 / -1;

  margin-top: 0.6rem;

  font-size: 0.78rem;

  display: flex;

  align-items: center;

  gap: 0.4rem;

  color: #16a34a;

}



.live-dot {

  width: 10px;

  height: 10px;

  background: #22c55e;

  border-radius: 50%;

  box-shadow: 0 0 8px #22c55e;

  animation: pulse 1.3s infinite ease-in-out;

}



@keyframes pulse {

  0% {

    transform: scale(1);

    opacity: 1;

  }

  50% {

    transform: scale(1.4);

    opacity: 0.6;

  }

  100% {

    transform: scale(1);

    opacity: 1;

  }

}



.disclaimer {

  grid-column: 1 / -1;

  margin-top: 0.7rem;

  font-size: 0.72rem;

  color: #6b7280;

}



.success-message {

  grid-column: 1 / -1;

  display: none;

  margin-top: 0.75rem;

  padding: 0.55rem 0.65rem;

  border-radius: 0.6rem;

  font-size: 0.78rem;

  background: #ecfdf3;

  border: 1px solid #bbf7d0;

  color: #166534;

}



/* Steps */



.section {

  margin-top: 2.8rem;

}



.section h2 {

  font-size: 1.4rem;

  margin-bottom: 0.35rem;

  color: #0f172a;

}



.section-sub {

  font-size: 0.9rem;

  color: #4b5563;

  margin-bottom: 1.3rem;

}



.steps {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 1.3rem;

}



.step-card {

  background: #ffffff;

  border-radius: 0.9rem;

  padding: 1rem;

  border: 1px solid #e5e7eb;

  font-size: 0.85rem;

  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07);

}



.step-badge {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 1.6rem;

  height: 1.6rem;

  border-radius: 999px;

  background: #eff6ff;

  border: 1px solid #60a5fa;

  font-size: 0.8rem;

  margin-bottom: 0.35rem;

  color: #1d4ed8;

}



.step-title {

  font-weight: 600;

  margin-bottom: 0.15rem;

  color: #111827;

}



.step-text {

  color: #4b5563;

}



/* Footer */



footer {

  border-top: 1px solid #e5e7eb;

  margin-top: 2.8rem;

  padding: 1.3rem 0 1.6rem;

  font-size: 0.75rem;

  color: #6b7280;

  background: #ffffff;

}



.footer-grid {

  display: flex;

  flex-direction: column;

  gap: 0.7rem;

}



.footer-meta {

  display: flex;

  flex-wrap: wrap;

  gap: 0.8rem;

}



footer a {

  color: #1d4ed8;

  text-decoration: underline;

  text-decoration-thickness: 1px;

}



/* Privacy page */



.privacy-body {

  background: #f3f4f6;

}



.privacy-container {

  background: #ffffff;

  border-radius: 0.9rem;

  padding: 1.8rem 1.6rem;

  margin-top: 2rem;

  margin-bottom: 3rem;

  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);

  border: 1px solid #e5e7eb;

}



.privacy-container h1 {

  font-size: 1.6rem;

  margin-bottom: 0.5rem;

}



.privacy-container h2 {

  font-size: 1.1rem;

  margin-top: 1.5rem;

  margin-bottom: 0.4rem;

}



.privacy-container p {

  margin-bottom: 0.7rem;

  font-size: 0.92rem;

}



.privacy-container ul {

  margin-left: 1.2rem;

  margin-bottom: 0.7rem;

  font-size: 0.9rem;

}



.privacy-container li {

  margin-bottom: 0.3rem;

}



.privacy-updated {

  font-size: 0.85rem;

  color: #6b7280;

}



.back-link {

  margin-top: 1.5rem;

  font-size: 0.9rem;

}



.back-link a {

  color: #1d4ed8;

  text-decoration: underline;

}



/* Responsive */



@media (max-width: 900px) {

  .hero {

    grid-template-columns: 1fr;

  }



  main {

    padding-top: 1.8rem;

  }



  .hero-art-wrapper {

    order: -1;

  }



  .hero-art {

    margin-bottom: 1.2rem;

  }



  .hero-illustration {

    right: -10px;

    bottom: -6px;

    width: 150px;

    height: 105px;

  }



  .hero-card {

    position: static;

    width: 100%;

    margin-top: 0.8rem;

  }



  .form-card {

    margin-top: 1.2rem;

  }

}



@media (max-width: 640px) {

  #quoteForm {

    grid-template-columns: 1fr;

  }



  .steps {

    grid-template-columns: 1fr;

  }

}