html { scroll-behavior: smooth; }
body { font-family: 'Lexend', sans-serif; }
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

section[id] { scroll-margin-top: 96px; }

::selection { background: #C43914; color: #fff; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #223969; border-radius: 9999px; }
.dark ::-webkit-scrollbar-thumb { background: #C43914; }

/* Scroll progress bar */
#scroll-progress { transition: width 80ms linear; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.in-view { opacity: 1; transform: translateY(0); }
.stagger > *:nth-child(1) { transition-delay: 0ms; }
.stagger > *:nth-child(2) { transition-delay: 90ms; }
.stagger > *:nth-child(3) { transition-delay: 180ms; }
.stagger > *:nth-child(4) { transition-delay: 270ms; }
.stagger > *:nth-child(5) { transition-delay: 360ms; }
.stagger > *:nth-child(6) { transition-delay: 450ms; }

/* Hero blobs */
@keyframes blob-float {
    0%, 100% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(30px, -40px) scale(1.15); }
    66% { transform: translate(-25px, 25px) scale(0.9); }
}
.animate-blob { animation: blob-float 14s infinite ease-in-out; }
.animation-delay-2000 { animation-delay: 2s; }
.animation-delay-4000 { animation-delay: 4s; }

/* Hero parallax banner — medical motif (stethoscope, heartbeat, cross) */
.hero-parallax {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' opacity='0.10'%3E%3Cpath d='M96,60 L120,60 L120,96 L156,96 L156,120 L120,120 L120,156 L96,156 L96,120 L60,120 L60,96 L96,96 Z'/%3E%3Cpath d='M0,420 L90,420 L112,372 L146,468 L176,396 L206,420 L560,420'/%3E%3Cpath d='M420,90 C420,130 460,120 460,150 C460,175 430,180 430,205 M430,205 a14,14 0 1,0 0.1,0 Z'/%3E%3Cpath d='M330,300 L346,300 L346,316 L362,316 L362,332 L346,332 L346,348 L330,348 L330,332 L314,332 L314,316 L330,316 Z'/%3E%3Ccircle cx='130' cy='260' r='16'/%3E%3Ccircle cx='480' cy='300' r='10'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 560px 560px;
    background-position: center top;
    background-attachment: fixed;
}
@media (max-width: 767px) {
    .hero-parallax { background-attachment: scroll; }
}

/* Gradient animated text */
.text-gradient {
    background: linear-gradient(90deg, #C43914, #DF927E, #C43914);
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: gradient-shift 4s linear infinite;
}
@keyframes gradient-shift { to { background-position: 200% center; } }

/* Pulsing CTA */
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(196,57,20,0.55); }
    50% { box-shadow: 0 0 0 16px rgba(196,57,20,0); }
}
.btn-pulse { animation: pulse-glow 2.2s infinite; }

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .4; transform: scale(1.4); }
}
.pulse-dot { animation: pulse-dot 1.6s infinite; }

/* FAQ */
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq-icon { transition: transform .3s ease; }

/* Marquee */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.animate-marquee { animation: marquee 28s linear infinite; }

.card-hover { transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .35s ease; }
.card-hover:hover { transform: translateY(-6px); }