/* ────────────────────────────────────────────────────────────────────────── BASE ────────────────────────────────────────────────────────────────────────── */ body { font-family: "Cairo", sans-serif; background-color: #ffffff; } /* ────────────────────────────────────────────────────────────────────────── CTA GRADIENT BUTTON ────────────────────────────────────────────────────────────────────────── */ .cta-gradient { background: linear-gradient(to right, #dd7a52, #7b5ea7); box-shadow: 0 10px 25px -5px rgba(123, 94, 167, 0.3); transition: box-shadow 0.3s ease, transform 0.3s ease; } .cta-gradient:hover { box-shadow: 0 15px 30px -5px rgba(123, 94, 167, 0.4); transform: translateY(-2px); } .cta-gradient:focus-visible { outline: 3px solid #dd7a52; outline-offset: 3px; } /* ────────────────────────────────────────────────────────────────────────── FAQ ACCORDION ICON ROTATION ────────────────────────────────────────────────────────────────────────── */ .faq-item[open] .faq-icon { transform: rotate(45deg); } /* ────────────────────────────────────────────────────────────────────────── FONT UTILITY ────────────────────────────────────────────────────────────────────────── */ .text-cairo { font-family: "Cairo", sans-serif; } /* ────────────────────────────────────────────────────────────────────────── FADE-IN ANIMATION SYSTEM ───────────────────────────────────────────────────────────────────────── Base state: invisible + shifted down. .is-visible: fully shown + in-position. Both .hero-fade and .scroll-fade share the same transition. The .js-enabled guard means without JS everything is visible. ────────────────────────────────────────────────────────────────────────── */ .js-enabled .hero-fade, .js-enabled .scroll-fade { opacity: 0; transform: translateY(18px); transition: opacity 0.55s ease, transform 0.55s ease; } .js-enabled .hero-fade.is-visible, .js-enabled .scroll-fade.is-visible { opacity: 1; transform: translateY(0); } /* ────────────────────────────────────────────────────────────────────────── REDUCE MOTION — disable all transforms and show everything immediately ────────────────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .js-enabled .hero-fade, .js-enabled .scroll-fade, .js-enabled .hero-fade.is-visible, .js-enabled .scroll-fade.is-visible { opacity: 1 !important; transform: none !important; transition: none !important; } .cta-gradient, .cta-gradient:hover { transform: none !important; transition: none !important; } .faq-icon { transition: none !important; } } /* ────────────────────────────────────────────────────────────────────────── MOBILE OVERFLOW GUARD Prevent any child from causing horizontal scroll on the page. Use `clip` (not `hidden`): `overflow-x: hidden` forces overflow-y to compute to `auto`, which turns into its own scroll container and produces a second scrollbar. `clip` hides overflow without scrolling. ────────────────────────────────────────────────────────────────────────── */ html, body { overflow-x: clip; }