html { scroll-behavior: smooth; }

.bg-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 110%;
  height: 110%;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  filter: blur(12px);
  opacity: 0;
  transform: scale(1);
  transition: 
    opacity 1.8s ease-in-out, 
    filter 1.8s ease-in-out, 
    transform 6s ease-in-out;
  z-index: -2;
}

#bg1 {
  opacity: 1;
  filter: blur(0px);
  transform: scale(1.05);
}

/* Overlay for readability */
.bg-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.178) 0%,
    rgba(255, 255, 255, 0.418) 100%
  );
  z-index: -1;
}


/* ── WRAPPER ── */
.page {
position: relative;
z-index: 3;
max-width: 680px;
margin: 0 auto;
padding: 0 24px 80px;
}

/* ── HEADER ── */
.site-header {
display: flex;
justify-content: center;
padding: 40px 0 10px;
}
.site-header img {
height: 64px;
filter: drop-shadow(0 2px 12px rgba(201,168,76,0.4));
}

/* ── HERO ── */
.hero {
text-align: center;
padding: 30px 0 50px;
animation: fadeUp 0.9s ease both;
}
.hero-eyebrow {
font-size: 12px;
font-weight: 700;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 20px;
opacity: 0.9;
}
.hero-title {
font-size: clamp(46px, 12vw, 72px);
color: var(--cream);
line-height: 1.1;
margin-bottom: 18px;
text-shadow: var(--brand-4);
}
.hero-sub {
font-size: 16px;
font-weight: 300;
color: var(--text-muted);
line-height: 1.7;
max-width: 460px;
margin: 0 auto 36px;
}
.hero-sub strong {
color: var(--gold-light);
font-weight: 600;
}

/* ── STEPS ── */
.steps-label {
text-align: center;
font-size: 11px;
font-weight: 700;
letter-spacing: 5px;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 36px;
animation: fadeUp 0.9s 0.15s ease both;
}

.steps {
display: flex;
flex-direction: column;
gap: 20px;
margin-bottom: 56px;
}

.step {
display: flex;
align-items: flex-start;
gap: 24px;
background: var(--brand-gray);
border: var(--brand-accent);
border-radius: 20px;
padding: 28px 28px 28px 24px;
backdrop-filter: blur(8px);
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease, transform 0.6s ease, border-color 0.3s, background 0.3s;
}
.step.visible {
opacity: 1;
transform: translateY(0);
}
.step:hover {
border-color: rgba(201,168,76,0.45);
background: rgba(255,255,255,0.07);
}

.step-num {
flex-shrink: 0;
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--brand-primary);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: 900;
color: var(--dark);
box-shadow: var(--brand-4);
}

.step-body h3 {
font-size: 17px;
font-weight: 700;
color: var(--cream);
margin-bottom: 8px;
line-height: 1.3;
}
.step-body p {
font-size: 14px;
font-weight: 300;
color: var(--text-muted);
line-height: 1.65;
}
.step-body p strong {
color: var(--gold-light);
font-weight: 500;
}

/* ── CONNECTOR ── */
.connector {
display: flex;
justify-content: flex-start;
padding-left: 48px;
margin: -10px 0;
opacity: 0.35;
}
.connector svg { display: block; }

/* ── CTA ── */
.cta-block {
text-align: center;
animation: fadeUp 0.9s 0.4s ease both;
}
.cta-note {
font-size: 13px;
color: var(--text-muted);
margin-bottom: 22px;
font-weight: 300;
}
.cta-btn {
display: inline-block;
padding: 18px 52px;
background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
color: var(--dark);
font-family: 'Montserrat', sans-serif;
font-size: 15px;
font-weight: 800;
letter-spacing: 1.5px;
text-transform: uppercase;
text-decoration: none;
border-radius: 60px;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.cta-btn:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 12px 40px var(--brand-accent), 0 4px 12px rgba(0,0,0,0.4);
}
.cta-sub {
margin-top: 14px;
font-size: 12px;
color: var(--text-muted);
font-weight: 300;
}

/* ── DIVIDER ── */
.divider {
width: 60px;
height: 2px;
background: linear-gradient(to right, transparent, var(--gold), transparent);
margin: 56px auto;
opacity: 0.5;
}

/* ── TRUST BAR ── */
.trust {
display: flex;
justify-content: center;
gap: 36px;
flex-wrap: wrap;
margin-bottom: 56px;
animation: fadeUp 0.9s 0.5s ease both;
}
.trust-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.trust-item .num {
font-size: 26px;
font-weight: 900;
color: var(--gold-light);
line-height: 1;
}
.trust-item .lbl {
font-size: 11px;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--text-muted);
}

/* ── FOOTER ── */
footer {
text-align: center;
font-size: 12px;
color: var(--text-muted);
font-weight: 300;
opacity: 0.6;
padding-top: 20px;
border-top: 1px solid rgba(255,255,255,0.07);
}

/* ── ANIMATIONS ── */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(24px); }
to   { opacity: 1; transform: translateY(0); }
}