/* Living, optimistic motion for the Naraya homepage. */
.services-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 26%, rgba(107, 224, 211, .22), transparent 26%),
        radial-gradient(circle at 88% 72%, rgba(198, 246, 219, .42), transparent 28%),
        linear-gradient(145deg, #fbfffe 0%, #effcf9 46%, #f6fffb 100%);
}
.services-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: .55;
    background-image: radial-gradient(circle, rgba(7, 157, 152, .2) 1.2px, transparent 1.2px);
    background-size: 31px 31px;
    mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
    animation: carePattern 22s linear infinite;
}
.care-stage { position: relative; z-index: 2; }
.care-atmosphere { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.care-orbit {
    position: absolute;
    border: 1px solid rgba(7, 157, 152, .18);
    border-radius: 50%;
    animation: careOrbit 18s linear infinite;
}
.care-orbit::after {
    content: "";
    position: absolute;
    top: 12%;
    left: 8%;
    width: 14px;
    height: 14px;
    border: 4px solid rgba(255,255,255,.9);
    border-radius: 50%;
    background: #32b9ad;
    box-shadow: 0 0 24px rgba(7,157,152,.55);
}
.orbit-one { width: 520px; height: 520px; top: -260px; right: -95px; }
.orbit-two { width: 390px; height: 390px; bottom: -210px; left: -100px; animation-direction: reverse; animation-duration: 23s; }
.care-glow {
    position: absolute;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    filter: blur(12px);
    opacity: .34;
    animation: careFloat 8s ease-in-out infinite;
}
.glow-one { top: 12%; left: -130px; background: rgba(140,235,225,.62); }
.glow-two { right: -110px; bottom: 8%; background: rgba(184,246,203,.72); animation-delay: -4s; }
.care-spark { position: absolute; color: rgba(7,157,152,.42); font-size: 24px; animation: careSpark 4.6s ease-in-out infinite; }
.spark-one { top: 16%; left: 9%; }
.spark-two { top: 43%; right: 7%; animation-delay: -1.7s; }
.spark-three { bottom: 13%; left: 47%; animation-delay: -3.1s; }
.care-heading { position: relative; max-width: 980px; margin-bottom: 68px; }
.care-heading h2 strong { display: block; color: #078b86; font-weight: 600; }
.care-heading > p { max-width: 760px; margin: 22px auto 0; color: #385d58; font-size: 20px; line-height: 1.75; }
.care-heart {
    position: relative;
    width: 88px;
    height: 88px;
    display: grid;
    place-items: center;
    margin: 0 auto 25px;
    border: 1px solid rgba(7,157,152,.2);
    border-radius: 50%;
    background: rgba(255,255,255,.72);
    box-shadow: 0 18px 55px rgba(7,157,152,.18);
    animation: careBreathe 3.2s ease-in-out infinite;
}
.care-heart::before,
.care-heart::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(7,157,152,.17); animation: carePulse 3.2s ease-out infinite; }
.care-heart::before { inset: -12px; }
.care-heart::after { inset: -25px; animation-delay: 1.1s; }
.care-heart i,
.care-heart i::before,
.care-heart i::after { width: 27px; height: 42px; border-radius: 28px 28px 5px 5px; background: linear-gradient(150deg,#0bb2a9,#73d8b7); }
.care-heart i { position: relative; transform: rotate(-45deg); transform-origin: 0 100%; }
.care-heart i::before { content: ""; position: absolute; left: 27px; transform: rotate(90deg); transform-origin: 0 100%; }
.care-heart i::after { content: ""; position: absolute; inset: 8px auto auto 11px; width: 5px; height: 5px; border-radius: 50%; background: #fff; box-shadow: 8px 9px 0 rgba(255,255,255,.75); }
.care-promise { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 13px; margin-top: 27px; color: #087b76; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.care-promise i { width: 5px; height: 5px; border-radius: 50%; background: #5cc9b4; box-shadow: 0 0 0 5px rgba(92,201,180,.13); }
.services-section .services-grid { perspective: 1200px; }
.services-section .service-card {
    position: relative;
    overflow: hidden;
    border-color: rgba(7,157,152,.13);
    background: rgba(255,255,255,.82);
    box-shadow: 0 16px 50px rgba(12,105,98,.09);
    backdrop-filter: blur(12px);
    animation: careCardFloat 7s ease-in-out infinite;
}
.services-section .service-card:nth-child(2n) { animation-delay: -2.2s; }
.services-section .service-card:nth-child(3n) { animation-delay: -4.4s; }
.services-section .service-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,.22) 48%, transparent 70%);
    transform: translateX(-130%);
    transition: transform .85s ease;
}
.services-section .service-card::after {
    content: "";
    position: absolute;
    width: 110px;
    height: 110px;
    right: -46px;
    top: -52px;
    border-radius: 50%;
    z-index: 0;
    background: linear-gradient(145deg,rgba(74,207,190,.18),rgba(179,244,204,.3));
    transition: transform .45s ease;
}
.services-section .service-card:hover::before { transform: translateX(130%); }
.services-section .service-card:hover::after { transform: scale(1.4); }
.services-section .service-card:hover {
    border-color: rgba(255,255,255,.42);
    background:
        radial-gradient(circle at 92% 5%, rgba(153,239,211,.27), transparent 31%),
        linear-gradient(145deg, #087f79 0%, #076b68 52%, #064f4d 100%);
    color: #fff;
    box-shadow: 0 28px 70px rgba(4,82,78,.28);
    transform: translateY(-10px) scale(1.012);
    animation-play-state: paused;
}
.services-section .service-card > span { position: relative; z-index: 1; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: #def7f0; font-size: 14px; }
.services-section .service-card h3,
.services-section .service-card p,
.services-section .service-card a { position: relative; z-index: 1; }
.services-section .service-card:hover > span {
    background: #fff;
    color: #087f79;
    box-shadow: 0 0 0 8px rgba(255,255,255,.1);
}
.services-section .service-card:hover h3,
.services-section .service-card:hover p,
.services-section .service-card:hover a {
    color: #fff;
}
.services-section .service-card:hover p { opacity: .88; }
.services-section .service-card a {
    width: fit-content;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(7,157,152,.32);
}
.services-section .service-card:hover a { border-bottom-color: rgba(255,255,255,.62); }

/* Subtle continuous motion across the remaining homepage. */
.home-slider::after,
.about-section::after,
.numbers-section::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    border: 1px solid rgba(7,157,152,.13);
    border-radius: 50%;
    pointer-events: none;
    animation: careDrift 12s ease-in-out infinite;
}
.home-slider::after { right: 8%; top: 9%; }
.about-section,.numbers-section { position: relative; overflow: hidden; }
.about-section::after { left: -70px; top: 18%; animation-delay: -4s; }
.numbers-section::after { right: -50px; bottom: 12%; animation-delay: -8s; }
.round-label { animation: careBreathe 4s ease-in-out infinite; }
.doctor-card:nth-child(odd),.quick-card:nth-child(odd) { animation: gentleLift 7s ease-in-out infinite; }
.doctor-card:nth-child(even),.quick-card:nth-child(even) { animation: gentleLift 7s ease-in-out -3.5s infinite; }

@keyframes carePattern { to { background-position: 31px 31px; } }
@keyframes careOrbit { to { transform: rotate(360deg); } }
@keyframes careFloat { 50% { transform: translate3d(24px,-22px,0) scale(1.08); } }
@keyframes careSpark { 0%,100% { opacity:.2; transform:scale(.7) rotate(0); } 50% { opacity:1; transform:scale(1.2) rotate(90deg); } }
@keyframes careBreathe { 50% { transform: scale(1.055); box-shadow: 0 22px 65px rgba(7,157,152,.24); } }
@keyframes carePulse { 0% { opacity:.75; transform:scale(.75); } 80%,100% { opacity:0; transform:scale(1.2); } }
@keyframes careCardFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-7px); } }
@keyframes careDrift { 50% { transform:translate3d(20px,28px,0) scale(1.12); } }
@keyframes gentleLift { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-4px); } }

@media (max-width: 700px) {
    .care-heading > p { font-size: 17px; }
    .care-heart { width: 74px; height: 74px; }
    .care-promise { gap: 10px; font-size: 10px; }
    .services-section .service-card { animation-duration: 9s; }
    .care-orbit { opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
    .home-page *,
    .home-page *::before,
    .home-page *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}