/* ===== A1 CONNECT — Pricing teaser section (home page, blue palette) ===== Requires in , in this order: base.css, header.css, pricing.css. Sits between the hero and "Why reviews matter". Dark section matching the hero/product-hero treatment, converted from the gold/black reference into brand blue. */ :root { --pr-black: #060606; --pr-black-soft: #121212; } .pricing-section { position: relative; max-width: 860px; margin: 64px auto; padding: 64px 40px; overflow: hidden; text-align: center; color: #ffffff; border: 3px solid transparent; border-radius: 28px; background: radial-gradient(900px 420px at 85% -10%, rgba(59,130,246,0.22), transparent 60%) padding-box, radial-gradient(700px 400px at 5% 110%, rgba(59,130,246,0.1), transparent 60%) padding-box, linear-gradient(180deg, var(--pr-black) 0%, var(--pr-black-soft) 100%) padding-box, linear-gradient(100deg, #1d4ed8 0%, #60a5fa 22%, #93c5fd 45%, #1d4ed8 65%, #60a5fa 85%, #93c5fd 100%) border-box; background-size: auto, auto, auto, 250% auto; background-position: 0 0, 0 0, 0 0, 0% 50%; animation: pricingBorderMove 7s ease-in-out infinite; } @keyframes pricingBorderMove { 0% { background-position: 0 0, 0 0, 0 0, 0% 50%; } 50% { background-position: 0 0, 0 0, 0 0, 100% 50%; } 100% { background-position: 0 0, 0 0, 0 0, 0% 50%; } } .pricing-section .eyebrow { color: var(--gold-light); background: rgba(59, 130, 246, 0.14); border: 1px solid rgba(59, 130, 246, 0.4); } .pricing-section h2 { 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.2rem); margin: 0 auto 18px; max-width: 760px; 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: pricingGradientMove 7s ease-in-out infinite; } @keyframes pricingGradientMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .pricing-section p.lead { color: rgba(255,255,255,0.68); font-size: 1.05rem; line-height: 1.7; max-width: 640px; margin: 0 auto 14px; } .pricing-section .pricing-guarantee { color: var(--gold-light); font-weight: 700; font-size: 0.98rem; margin: 0 auto 34px; } @media (max-width: 700px) { .pricing-section { margin: 40px 16px; } } @media (max-width: 480px) { .pricing-section { padding: 56px 22px; margin: 32px 12px; } .pricing-section .btn { width: 100%; } }