/* ===== A1 CONNECT — About Page ===== Requires in , in this order: base.css, header.css, about.css. Self-contained — dark intro hero, light story section, and a QR-code vs one-tap comparison section below. */ :root { --about-black: #060606; --about-black-soft: #121212; } /* Intro hero */ .about-hero { position: relative; background: radial-gradient(900px 420px at 85% -10%, rgba(59,130,246,0.22), transparent 60%), radial-gradient(700px 400px at 5% 110%, rgba(59,130,246,0.1), transparent 60%), linear-gradient(180deg, var(--about-black) 0%, var(--about-black-soft) 100%); color: #ffffff; padding: 96px 0 80px; overflow: hidden; text-align: center; } .about-hero .eyebrow { color: var(--gold-light); background: rgba(59, 130, 246, 0.14); border: 1px solid rgba(59, 130, 246, 0.4); } .about-hero h1 { font-family: "Sora", "Inter", sans-serif; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; font-size: clamp(2.2rem, 4.4vw, 3.4rem); margin: 0 auto 18px; max-width: 700px; background: linear-gradient(100deg, #ffffff 0%, #cfe0ff 22%, #8fb8ff 45%, #ffffff 65%, #cfe0ff 85%, #8fb8ff 100%); background-size: 250% auto; -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 42px rgba(59,130,246,0.28); animation: aboutGradientMove 7s ease-in-out infinite; } @keyframes aboutGradientMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .about-hero p.lead { color: rgba(255,255,255,0.68); font-size: 1.05rem; line-height: 1.7; max-width: 600px; margin: 0 auto; } /* "Our Story" */ .story-section { background: #ffffff; } .story-section h2 { background: linear-gradient(100deg, #0b2560 0%, #1d4ed8 45%, #3b82f6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .story-section p { text-align: left; } @media (max-width: 560px) { .about-hero { padding: 64px 0 56px; } }