/* =========================================================================
   ONE BOOST — sections.css
   Generic section shells, headings, grid layouts, and the CTA band.
   (Hero lives in hero.css; media queries live in responsive.css.)
   ========================================================================= */

section { position: relative; }
.section { padding: 84px 0; }
.section-tight { padding: 40px 0; }
.section-alt { background: var(--bg-soft); border-block: 1px solid var(--line); }

/* Section heading */
.head { text-align: center; max-width: 640px; margin: 0 auto 52px; }
.eyebrow { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--red-ink); margin-bottom: 14px; }
html[lang="ar"] .eyebrow { letter-spacing: 1px; }
.h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 3.6vw, 42px); line-height: 1.12; letter-spacing: -.4px; text-wrap: balance; }
html[lang="ar"] .h2 { line-height: 1.28; letter-spacing: 0; }
.head p { color: var(--text-2); font-size: 17px; margin-top: 16px; }

/* Grid layouts */
.stats    { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.steps    { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pricing  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.faq      { max-width: 800px; margin-inline: auto; display: flex; flex-direction: column; gap: 12px; }
.safety-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
.safety-list { display: flex; flex-direction: column; gap: 18px; }

/* CTA band */
.cta-band { position: relative; text-align: center; padding: 70px 30px; background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--line-2); border-radius: 26px; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 120% at 50% -20%, var(--glow-soft), transparent 60%); }
.cta-band > * { position: relative; }
.cta-band h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 3.4vw, 40px); margin-bottom: 14px; text-wrap: balance; }
html[lang="ar"] .cta-band h2 { line-height: 1.3; }
.cta-band p { color: var(--text-2); font-size: 17px; margin-bottom: 28px; }
.cta-band .hero-cta { justify-content: center; }