/* sections.css — Reusable Section Layouts */

/* ── Page Hero (inner pages) ── */
.page-hero {
  background: var(--dark);
  background-image: radial-gradient(circle, rgba(200,169,106,0.08) 1px, transparent 1px);
  background-size: 32px 32px;
  padding: calc(72px + var(--section-pad)) 0 var(--section-pad);
  position: relative; overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% -10%, rgba(26,60,94,0.45) 0%, transparent 60%);
  pointer-events: none;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero-eyebrow {
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold);
  margin-bottom: var(--sp-3); display: flex; align-items: center; gap: 12px;
}
.page-hero-eyebrow::before { content: ''; display: block; width: 32px; height: 1px; background: var(--gold); }
.page-hero h1 { color: #fff; }
.page-hero-sub {
  font-size: var(--text-lg); line-height: 1.7; color: rgba(255,255,255,0.55);
  max-width: 560px; margin-top: var(--sp-3);
}

/* ── Home Hero ── */
.hero {
  background: var(--dark);
  background-image: radial-gradient(circle, rgba(200,169,106,0.1) 1px, transparent 1px);
  background-size: 32px 32px;
  padding: calc(72px + 100px) 0 100px;
  position: relative; overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% -5%, rgba(26,60,94,0.55) 0%, transparent 60%);
  pointer-events: none;
}
.hero-content { position: relative; z-index: 1; max-width: 780px; }
.hero-eyebrow {
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold);
  margin-bottom: var(--sp-3); display: flex; align-items: center; gap: 12px;
}
.hero-eyebrow::before { content: ''; display: block; width: 32px; height: 1px; background: var(--gold); }
.hero h1 {
  font-size: var(--text-hero); font-weight: 800; color: #ffffff;
  letter-spacing: -0.03em; line-height: 1.06; margin-bottom: var(--sp-3);
}
.hero h1 em { font-style: normal; color: var(--gold); }
.hero-sub {
  font-size: var(--text-lg); line-height: 1.7; color: rgba(255,255,255,0.6);
  max-width: 580px; margin-bottom: var(--sp-5);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-7); }
.hero-trust {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: 13px; color: rgba(255,255,255,0.4); flex-wrap: wrap;
}
.hero-trust-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); opacity: 0.5; }

/* ── Trust Bar ── */
.trust-bar { background: var(--bg-white); padding: var(--sp-7) 0; border-bottom: 1px solid var(--border); }
.trust-bar-inner { display: flex; flex-direction: column; align-items: center; gap: var(--sp-5); }
.trust-bar-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-3);
}
.trust-bar-logos {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--sp-6);
}
.trust-logo-item {
  display: flex; align-items: center; justify-content: center;
  opacity: 0.32; filter: grayscale(1);
  transition: opacity var(--t-base) var(--ease), filter var(--t-base) var(--ease);
  height: 38px;
}
.trust-logo-item:hover { opacity: 0.6; filter: grayscale(0.3); }

/* ── Section Header ── */
.section-header { margin-bottom: var(--sp-7); }
.section-header--center { text-align: center; display: flex; flex-direction: column; align-items: center; }

/* ── Cards Grids ── */
.cards-grid { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
@media (min-width: 640px) { .cards-grid--2 { grid-template-columns: repeat(2,1fr); } .cards-grid--3 { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 900px) { .cards-grid--3 { grid-template-columns: repeat(3,1fr); } .cards-grid--4 { grid-template-columns: repeat(4,1fr); } }

/* ── Process Row ── */
.process-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-5); position: relative;
}
@media (min-width: 768px) {
  .process-grid { grid-template-columns: repeat(4,1fr); }
  .process-grid::before {
    content: ''; position: absolute; top: 10px;
    left: calc(12.5% + 16px); right: calc(12.5% + 16px);
    height: 1px; background: linear-gradient(90deg, var(--gold) 0%, transparent 100%); opacity: 0.25;
  }
}

/* ── CTA Banner ── */
.cta-banner {
  background: var(--navy);
  background-image: radial-gradient(circle at 80% 50%, rgba(200,169,106,0.1) 0%, transparent 60%);
  padding: var(--sp-10) 0;
}
.cta-banner-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-3); }
.cta-banner h2 { color: #fff; font-size: clamp(1.75rem, 3vw, 2.5rem); }
.cta-banner p { color: rgba(255,255,255,0.6); font-size: var(--text-lg); max-width: 480px; }
.btn-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; margin-top: var(--sp-1); }
.cta-micro { font-size: 13px; color: rgba(255,255,255,0.35); }

/* ── Why Grid ── */
.why-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-7); align-items: center; }
@media (min-width: 900px) { .why-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-10); } }
.why-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4);
  padding: var(--sp-5); background: var(--bg-white);
  border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-card);
}

/* ── Two Column ── */
.two-col { display: grid; grid-template-columns: 1fr; gap: var(--sp-7); }
@media (min-width: 900px) {
  .two-col { grid-template-columns: 1fr 1fr; }
  .two-col--60-40 { grid-template-columns: 1.5fr 1fr; }
  .two-col--40-60 { grid-template-columns: 1fr 1.5fr; }
}