/* Scroll Reveal */
.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-stagger > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.05s; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.12s; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.19s; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.26s; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.33s; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.4s; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(7) { transition-delay: 0.47s; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(8) { transition-delay: 0.54s; opacity: 1; transform: translateY(0); }

/* Hero Visual */
.visual--hero {
    position: relative;
    width: 100%;
    max-width: 420px;
    aspect-ratio: 1;
    margin: 0 auto;
}

.visual__ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.15);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.visual__ring--1 { width: 100%; height: 100%; animation: ringPulse 4s ease-in-out infinite; }
.visual__ring--2 { width: 75%; height: 75%; animation: ringPulse 4s ease-in-out 0.5s infinite; }
.visual__ring--3 { width: 50%; height: 50%; animation: ringPulse 4s ease-in-out 1s infinite; border-color: rgba(148, 192, 34, 0.45); }

.visual__core {
    position: absolute;
    inset: 22%;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(16px);
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.visual__ecg {
    width: 80%;
    height: 40%;
}

.visual__ecg-line {
    fill: none;
    stroke: rgba(148, 192, 34, 0.95);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 400;
    animation: ecgDraw 3s linear infinite;
}

.visual__pulse-dot {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 20px var(--accent);
    animation: dotPulse 2s ease-in-out infinite;
}

.visual__orbit {
    position: absolute;
    inset: 0;
    animation: orbitSpin 20s linear infinite;
}

.visual__orbit--2 {
    animation-duration: 28s;
    animation-direction: reverse;
}

.visual__orbit span {
    position: absolute;
    width: 10px;
    height: 10px;
    background: rgba(255,255,255,0.5);
    border-radius: 50%;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 12px rgba(255,255,255,0.4);
}

.visual__orbit span:nth-child(2) { top: auto; bottom: 5%; }
.visual__orbit span:nth-child(3) { top: 50%; left: 5%; transform: translateY(-50%); }

.visual__float {
    position: absolute;
    width: 6px;
    height: 6px;
    background: rgba(148, 192, 34, 0.65);
    border-radius: 50%;
    animation: floatDrift 6s ease-in-out infinite;
}

.visual__float--1 { top: 15%; right: 10%; animation-delay: 0s; }
.visual__float--2 { bottom: 20%; left: 8%; animation-delay: 2s; width: 8px; height: 8px; }
.visual__float--3 { top: 40%; right: 5%; animation-delay: 4s; width: 4px; height: 4px; }

/* Doctor Visual */
.visual--doctor {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

.visual__doctor-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, var(--primary-light) 0%, #dceefb 50%, var(--accent-light) 100%);
    border-radius: var(--radius-lg);
    animation: gradientShift 8s ease-in-out infinite alternate;
}

.visual__doctor-frame {
    position: relative;
    aspect-ratio: 4/5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.visual__doctor-avatar {
    position: relative;
    width: 180px;
    height: 180px;
    color: var(--primary);
}

.visual__doctor-svg {
    width: 100%;
    height: 100%;
}

.visual__stethoscope {
    animation: stethoscopeSway 4s ease-in-out infinite;
    transform-origin: 45px 55px;
}

.visual__doctor-pulse {
    position: absolute;
    inset: -10%;
    border: 2px solid var(--primary);
    border-radius: 50%;
    opacity: 0;
    animation: doctorPulse 3s ease-out infinite;
}

.visual__doctor-orbit {
    position: absolute;
    inset: 10%;
    animation: orbitSpin 18s linear infinite;
}

.visual__badge-icon {
    position: absolute;
    width: 36px;
    height: 36px;
    background: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: var(--primary);
    box-shadow: var(--shadow);
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.visual__badge-icon:nth-child(2) { top: auto; bottom: 0; }
.visual__badge-icon:nth-child(3) { top: 50%; left: 0; transform: translateY(-50%); }
.visual__badge-icon:nth-child(4) { top: 50%; left: auto; right: 0; transform: translateY(-50%); }

.visual__doctor-card {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    right: 1.5rem;
    background: var(--white);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    box-shadow: var(--shadow-lg);
    text-align: center;
}

.visual__doctor-card strong {
    display: block;
    color: var(--primary);
    font-size: 1.05rem;
    margin-bottom: 0.25rem;
}

.visual__doctor-card span {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Service Icon Ring */
.service-card__icon {
    position: relative;
}

.service-card__icon-ring {
    position: absolute;
    inset: -4px;
    border: 2px solid var(--primary);
    border-radius: 16px;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
}

.service-card:hover .service-card__icon-ring {
    opacity: 0.3;
    animation: iconRing 1.5s ease-out;
}

/* Blog Visuals */
.blog-visual {
    position: relative;
    height: 200px;
    overflow: hidden;
    color: var(--primary);
}

.blog-visual__bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--primary-light), var(--accent-light));
}

.blog-visual--wave .blog-visual__bg { background: linear-gradient(135deg, #dceefb, #e8f6fc); }
.blog-visual--nodes .blog-visual__bg { background: linear-gradient(135deg, #e8f6fc, #f0f7e4); }
.blog-visual--pulse .blog-visual__bg { background: linear-gradient(135deg, #dceefb, #eef6dc); }
.blog-visual--leaf .blog-visual__bg { background: linear-gradient(135deg, #e4f5e8, #f0f7e4); }
.blog-visual--hex .blog-visual__bg { background: linear-gradient(135deg, #dceefb, #eef6dc); }
.blog-visual--flow .blog-visual__bg { background: linear-gradient(135deg, #e0f2fc, #f0f7e4); }

.blog-visual__svg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70%;
}

.blog-visual__wave {
    fill: rgba(52, 168, 224, 0.14);
}

.blog-visual__wave--1 { animation: waveMove 6s ease-in-out infinite; }
.blog-visual__wave--2 { fill: rgba(148, 192, 34, 0.18); animation: waveMove 8s ease-in-out infinite reverse; }

.blog-visual__nodes span {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--primary);
    border-radius: 50%;
    opacity: 0.25;
    animation: nodeFloat 4s ease-in-out infinite;
}

.blog-visual__nodes span:nth-child(1) { top: 30%; left: 20%; animation-delay: 0s; }
.blog-visual__nodes span:nth-child(2) { top: 50%; left: 45%; width: 16px; height: 16px; animation-delay: 0.5s; }
.blog-visual__nodes span:nth-child(3) { top: 25%; right: 25%; animation-delay: 1s; }
.blog-visual__nodes span:nth-child(4) { bottom: 30%; left: 35%; animation-delay: 1.5s; }
.blog-visual__nodes span:nth-child(5) { bottom: 25%; right: 20%; animation-delay: 2s; }

.blog-visual__pulse-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    margin: -40px 0 0 -40px;
    border: 2px solid var(--primary);
    border-radius: 50%;
    opacity: 0;
    animation: blogPulse 3s ease-out infinite;
}

.blog-visual__pulse-ring--2 { animation-delay: 1.5s; }

.blog-visual__leaf {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70px;
    height: 70px;
    margin: -35px 0 0 -35px;
    animation: leafSway 5s ease-in-out infinite;
}

.blog-visual__hex span {
    position: absolute;
    width: 40px;
    height: 40px;
    border: 2px solid rgba(52, 168, 224, 0.22);
    transform: rotate(45deg);
    animation: hexRotate 10s linear infinite;
}

.blog-visual__hex span:nth-child(1) { top: 30%; left: 30%; }
.blog-visual__hex span:nth-child(2) { top: 40%; right: 25%; width: 30px; height: 30px; animation-direction: reverse; }
.blog-visual__hex span:nth-child(3) { bottom: 25%; left: 40%; width: 25px; height: 25px; }

.blog-visual__flow span {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    opacity: 0.3;
    animation: flowLine 4s linear infinite;
}

.blog-visual__flow span:nth-child(1) { top: 35%; left: 0; width: 60%; animation-delay: 0s; }
.blog-visual__flow span:nth-child(2) { top: 55%; left: 20%; width: 50%; animation-delay: 1.3s; }
.blog-visual__flow span:nth-child(3) { top: 75%; left: 10%; width: 70%; animation-delay: 2.6s; }

.blog-visual__icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(8px);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow);
    z-index: 2;
}

/* Page Header Decor */
.page-header {
    position: relative;
    overflow: hidden;
}

.page-header__decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.page-header__orb {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    animation: orbFloat 12s ease-in-out infinite;
}

.page-header__orb--1 { width: 300px; height: 300px; top: -100px; right: -50px; }
.page-header__orb--2 { width: 200px; height: 200px; bottom: -60px; left: -40px; animation-delay: 4s; }

.page-header__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 40px 40px;
}

.page-header .container {
    position: relative;
    z-index: 1;
}

/* Contact Map */
.contact-map {
    position: relative;
    height: 280px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: linear-gradient(145deg, var(--primary-light), #dceefb);
    margin-bottom: 2rem;
}

.contact-map__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(52, 168, 224, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(52, 168, 224, 0.1) 1px, transparent 1px);
    background-size: 24px 24px;
}

.contact-map__roads {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, transparent 48%, rgba(52, 168, 224, 0.14) 48%, rgba(52, 168, 224, 0.14) 52%, transparent 52%),
        linear-gradient(0deg, transparent 58%, rgba(52, 168, 224, 0.12) 58%, rgba(52, 168, 224, 0.12) 62%, transparent 62%);
}

.contact-map__pin {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -100%);
}

.contact-map__pin-dot {
    display: block;
    width: 20px;
    height: 20px;
    background: var(--primary);
    border: 3px solid white;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: var(--shadow);
}

.contact-map__pin-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 2px solid var(--primary);
    border-radius: 50%;
    animation: mapPinPulse 2s ease-out infinite;
}

.contact-map__label {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    padding: 0.6rem 1.25rem;
    border-radius: 50px;
    box-shadow: var(--shadow);
    text-align: center;
    font-size: 0.85rem;
}

.contact-map__label strong { display: block; color: var(--primary); }
.contact-map__label span { color: var(--text-muted); font-size: 0.8rem; }

/* CTA Orbs */
.cta-section {
    position: relative;
    overflow: hidden;
}

.cta-section__bg {
    position: absolute;
    inset: 0;
}

.cta-section__orb {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    top: -150px;
    right: -100px;
    animation: orbFloat 10s ease-in-out infinite;
}

.cta-section__orb--2 {
    width: 250px;
    height: 250px;
    top: auto;
    bottom: -80px;
    right: auto;
    left: -60px;
    animation-delay: 3s;
}

.cta-section__inner {
    position: relative;
    z-index: 1;
}

.btn--glow {
    box-shadow: 0 4px 24px rgba(148, 192, 34, 0.4);
}

.btn--glow:hover {
    box-shadow: 0 8px 32px rgba(148, 192, 34, 0.55);
}

/* Keyframes */
@keyframes ringPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    50% { transform: translate(-50%, -50%) scale(1.05); opacity: 1; }
}

@keyframes ecgDraw {
    0% { stroke-dashoffset: 400; }
    100% { stroke-dashoffset: 0; }
}

@keyframes dotPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.7; }
}

@keyframes orbitSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes floatDrift {
    0%, 100% { transform: translate(0, 0); opacity: 0.6; }
    50% { transform: translate(8px, -12px); opacity: 1; }
}

@keyframes gradientShift {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(8deg); }
}

@keyframes stethoscopeSway {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(3deg); }
}

@keyframes doctorPulse {
    0% { transform: scale(0.8); opacity: 0.6; }
    100% { transform: scale(1.4); opacity: 0; }
}

@keyframes iconRing {
    0% { transform: scale(1); opacity: 0.4; }
    100% { transform: scale(1.3); opacity: 0; }
}

@keyframes waveMove {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-20px); }
}

@keyframes nodeFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes blogPulse {
    0% { transform: scale(0.5); opacity: 0.5; }
    100% { transform: scale(1.5); opacity: 0; }
}

@keyframes leafSway {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
}

@keyframes hexRotate {
    from { transform: rotate(45deg); }
    to { transform: rotate(405deg); }
}

@keyframes flowLine {
    0% { transform: translateX(-100%); opacity: 0; }
    50% { opacity: 0.5; }
    100% { transform: translateX(100%); opacity: 0; }
}

@keyframes orbFloat {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(20px, -15px); }
}

@keyframes mapPinPulse {
    0% { transform: scale(0.5); opacity: 0.6; }
    100% { transform: scale(2); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .reveal, .reveal-stagger > * {
        opacity: 1;
        transform: none;
    }
}