/* Header */
.site-header{
  height: 4rem;
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 244, 238, 0.295);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,.06);
  overflow: visible; /* important */
}


.header-inner{
  height: 100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--gap-2);
  padding: var(--pad-1) 0;
}

.brand{
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}


.logo{
  height: clamp(5.1rem, 10vw + 2.6rem, 7rem);
  width: auto;
  margin-top: clamp(2.6rem, 6vw, 3.8rem);
  transform: translateY(2px);
  max-height: none;
}

.hero{
  padding-top: calc(var(--pad-3) + clamp(1.4rem, 4vw, 2.5rem));
}


.hero-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: var(--gap-3);
  align-items: start;
}

.hero-cta{
  display:flex;
  gap: var(--gap-1);
  flex-wrap: wrap;
  margin: var(--gap-1) 0 var(--gap-2);
}

.trust{
  display:flex;
  gap: var(--gap-1);
  flex-wrap: wrap;
}

.fineprint{
  margin: var(--gap-2) 0 0;
  max-width: 60ch;
  font-size: var(--small);
}

/* Sections */
.section{ padding: clamp(34px, 5vw, 44px) 0; }

.section.alt{
  background: rgba(255,255,255,.45);
  border-top: .1rem solid rgba(170, 78, 2, 0.158);
  border-bottom: .1rem solid rgba(170, 78, 2, 0.158);
}

.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: var(--gap-2);
  margin-bottom: var(--gap-2);
  flex-wrap: wrap;
}

/* Grids */
.cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-2);
}

.steps{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-2);
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.pricing{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-2);
}

.contact{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: var(--gap-2);
  align-items: start;
}

/* Footer */
.footer{
  padding: var(--pad-2) 0;
  border-top: 1px solid rgba(0,0,0,.06);
}
.footer-inner{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap-1);
  color: var(--muted);
}

/* Responsive */
@media (max-width: 920px){
  .hero-grid{ grid-template-columns: 1fr; }
  .cards, .steps, .pricing, .contact{ grid-template-columns: 1fr; }
}

@media (max-width: 640px){
  .footer-inner{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
  }
}