/* ==========================================================
   Ogha Health — modern & elegant layer  ·  css/ogha-modern.css
   Loaded last on every page. Pure enhancement: if this file is
   removed, the site looks exactly as before.
   ========================================================== */
:root{
  --om-blue:#038ed3; --om-blue-2:#2fb6f0; --om-navy:#0b2a3c; --om-gold:#c2a14d;
  --om-ease:cubic-bezier(.22,.61,.36,1);
  --om-shadow:0 18px 40px rgba(3,80,122,.12);
  --om-shadow-lg:0 26px 60px rgba(3,80,122,.18);
}
html{scroll-behavior:smooth}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
::selection{background:rgba(3,142,211,.18);color:inherit}
a,button{transition:color .25s var(--om-ease),background-color .25s var(--om-ease),box-shadow .3s var(--om-ease),transform .3s var(--om-ease)}
:focus-visible{outline:2px solid var(--om-blue);outline-offset:3px;border-radius:6px}
img{image-rendering:auto}

/* ---------- Scroll progress bar ---------- */
#om-progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:100000;pointer-events:none;
  transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--om-blue),var(--om-blue-2),var(--om-gold))}

/* ---------- Header ---------- */
.top_section{transition:box-shadow .35s var(--om-ease),background-color .35s var(--om-ease)}
body.om-scrolled .top_section{box-shadow:0 10px 30px rgba(3,80,122,.10)}
@media (min-width:993px){
  .droopmenu > li > a:not(.top_phone){background-image:linear-gradient(var(--om-blue),var(--om-blue));
    background-repeat:no-repeat;background-position:50% calc(100% - 6px);background-size:0 2px;transition:background-size .35s var(--om-ease),color .25s}
  .droopmenu > li:hover > a:not(.top_phone),.droopmenu > li.dmopener > a:not(.top_phone){background-size:calc(100% - 20px) 2px}
  .droopmenu li > ul{box-shadow:0 26px 60px rgba(3,80,122,.16)!important;border:1px solid rgba(3,142,211,.08)}
  .droopmenu li ul li a{border-radius:8px}
  .droopmenu li ul li a:hover{background:rgba(3,142,211,.06);color:var(--om-blue)!important;padding-left:30px}
}
a.top_phone{position:relative;overflow:hidden;background-image:linear-gradient(135deg,#038ed3,#2fb6f0)!important;
  box-shadow:0 8px 20px rgba(3,142,211,.30)}
a.top_phone:after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);animation:omShine 4.5s ease-in-out infinite}
a.top_phone:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(3,142,211,.38)}
@keyframes omShine{0%,65%{left:-80%}100%{left:140%}}

/* ---------- Buttons ---------- */
.btn_new1,.ogha-btn,.oi-btn,.om-btn,.wlr-btn,.tj-btn,.btn-primary{transition:transform .3s var(--om-ease),box-shadow .3s var(--om-ease),background-color .25s}
.btn_new1:hover,.ogha-btn:hover,.oi-btn:hover,.om-btn:hover,.wlr-btn:hover,.tj-btn:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(3,142,211,.25)}
.oi-btn.primary,.om-btn,.wlr-btn,.tj-btn{background-image:linear-gradient(135deg,#038ed3,#26a8ea)}
.oi-btn.primary:hover,.om-btn:hover,.wlr-btn:hover,.tj-btn:hover{background-image:linear-gradient(135deg,#0277b6,#038ed3)}

/* ---------- Cards: gentle lift ---------- */
.svc-card,.spl-card,.oi-rel,.oi-benefit,.oi-step,.oi-sign,.oi-card,.oi-team-card,.oi-diff-item,.therapy-card,.stat-card,
.premium-wellness-card,.p-test-card,.story-block,.om-card,.wlr-card,.tj-milestone,.ogha-indicator-col,.testimonial_box{
  transition:transform .45s var(--om-ease),box-shadow .45s var(--om-ease),border-color .3s}
.oi-benefit:hover,.oi-step:hover,.oi-card:hover,.oi-team-card:hover,.therapy-card:hover,.stat-card:hover,.p-test-card:hover,
.premium-wellness-card:hover,.story-block:hover,.wlr-card:hover{transform:translateY(-6px);box-shadow:var(--om-shadow-lg)}
.oi-sign:hover{transform:translateY(-3px);box-shadow:var(--om-shadow)}
.oi-benefit i{transition:transform .5s var(--om-ease)}
.oi-benefit:hover i{transform:translateY(-4px) rotate(-6deg) scale(1.08)}
.oi-rel img,.svc-card img,.spl-card img,.om-card img,.therapy-card img,.card-img{transition:transform .9s var(--om-ease)}
.oi-rel:hover img,.om-card:hover img,.therapy-card:hover .card-img{transform:scale(1.06)}
.ogha-indicator-col:hover{transform:translateY(-6px)}

/* doctor name links */
a.dr-link{color:inherit;text-decoration:none!important;background-image:linear-gradient(var(--om-blue),var(--om-blue));
  background-repeat:no-repeat;background-position:0 100%;background-size:0 1.5px;transition:background-size .35s var(--om-ease),color .25s}
a.dr-link:hover{color:var(--om-blue);background-size:100% 1.5px}

/* ---------- FAQ accordions ---------- */
.oi-faq details{transition:box-shadow .35s var(--om-ease),border-color .3s}
.oi-faq details[open]{box-shadow:0 14px 34px rgba(3,80,122,.10);border-color:rgba(3,142,211,.25)}

/* ---------- Scroll reveal (only when JS is running) ---------- */
html.om-js .om-reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--om-ease),transform .9s var(--om-ease)}
html.om-js .om-reveal.om-in{opacity:1;transform:none}

/* ---------- Animated graphic 1: drifting light behind page heroes ---------- */
.oi-hero:after{content:"";position:absolute;left:-160px;bottom:-220px;width:520px;height:520px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(194,161,77,.16),rgba(194,161,77,0) 70%);animation:omDrift 20s ease-in-out infinite}
.oi-hero:before{animation:omDrift 16s ease-in-out infinite reverse}
.oi-hero > .oi-wrap{position:relative;z-index:1}
@keyframes omDrift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(60px,-40px) scale(1.12)}}

/* ---------- Animated graphic 2: living gradient on CTA bands ---------- */
.oi-cta{position:relative;overflow:hidden;background:linear-gradient(120deg,#e6f6ff 0%,#f7fbff 35%,#fdf3ec 65%,#e6f6ff 100%)!important;background-size:220% 220%!important;animation:omBg 14s ease-in-out infinite}
.oi-cta:before,.oi-cta:after{content:"";position:absolute;border-radius:50%;border:1.5px solid rgba(3,142,211,.18);pointer-events:none;animation:omRing 7s ease-out infinite}
.oi-cta:before{width:260px;height:260px;left:6%;top:-90px}
.oi-cta:after{width:340px;height:340px;right:4%;bottom:-160px;animation-delay:-3.5s}
.oi-cta > .oi-wrap{position:relative;z-index:1}
@keyframes omBg{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes omRing{0%{transform:scale(.7);opacity:0}30%{opacity:1}100%{transform:scale(1.25);opacity:0}}

/* ---------- Animated graphic 3: heartbeat line above the footer ---------- */
.om-ecg{position:relative;height:56px;margin:-10px 0 18px;overflow:hidden;opacity:.9}
.om-ecg svg{display:block;width:100%;height:100%}
.om-ecg .om-ecg-base{fill:none;stroke:rgba(255,255,255,.08);stroke-width:2}
.om-ecg .om-ecg-run{fill:none;stroke:url(#omEcgGrad);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:260 1400;animation:omEcg 4.2s linear infinite;filter:drop-shadow(0 0 6px rgba(47,182,240,.7))}
@keyframes omEcg{from{stroke-dashoffset:260}to{stroke-dashoffset:-1400}}

/* ---------- Animated graphic 4: pulse on floating WhatsApp / call ---------- */
.whatsapp_div a img{border-radius:50%;animation:omPulse 2.8s ease-out infinite}
.whatsapp_div a:first-child img{animation-name:omPulseG}
.whatsapp_div a:hover img{transform:scale(1.08)}
@keyframes omPulse{0%{box-shadow:0 0 0 0 rgba(3,142,211,.45)}75%,100%{box-shadow:0 0 0 16px rgba(3,142,211,0)}}
@keyframes omPulseG{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}75%,100%{box-shadow:0 0 0 16px rgba(37,211,102,0)}}

/* ---------- Animated graphic 5: sparkle accent on section eyebrows ---------- */
.oi-eyebrow,.sec-head .eyebrow{position:relative}
.oi-head .oi-eyebrow:before,.sec-head .eyebrow:before{content:"";display:inline-block;width:7px;height:7px;margin-right:10px;vertical-align:2px;
  background:var(--om-gold);transform:rotate(45deg);border-radius:1px;animation:omSpark 3s ease-in-out infinite}
@keyframes omSpark{0%,100%{transform:rotate(45deg) scale(1);opacity:1}50%{transform:rotate(225deg) scale(.6);opacity:.6}}


/* ---------- Animated graphic 6: scroll cue on landing banners ---------- */
.om-scrollcue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:5;width:26px;height:42px;border:2px solid rgba(3,142,211,.85);
  border-radius:16px;box-shadow:0 6px 18px rgba(3,80,122,.18);cursor:pointer;background:rgba(255,255,255,.7);backdrop-filter:blur(2px)}
.om-scrollcue:before{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#038ed3;animation:omWheel 1.8s ease-in-out infinite}
@keyframes omWheel{0%{opacity:0;transform:translateY(-2px)}30%{opacity:1}100%{opacity:0;transform:translateY(12px)}}
@media (max-width:767px){.om-scrollcue{display:none}}

/* ---------- Animated graphic 7: floating sparkles in dark landing intros ---------- */
.om-sparkles{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.om-sparkles i{position:absolute;bottom:-12px;width:6px;height:6px;border-radius:50%;background:rgba(127,208,247,.75);
  box-shadow:0 0 10px rgba(127,208,247,.9);animation:omRise linear infinite;opacity:0}
.om-sparkles i:nth-child(3n){background:rgba(226,199,124,.85);box-shadow:0 0 10px rgba(226,199,124,.9)}
@keyframes omRise{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:.9}100%{transform:translateY(-520px) scale(1.1);opacity:0}}
.pain-hero-section .container{position:relative;z-index:2}

/* ---------- Scroll-to-top ---------- */
#scrollToTopBtn img{transition:transform .3s var(--om-ease)}
#scrollToTopBtn:hover img{transform:translateY(-4px)}

/* ---------- Accessibility: respect reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html.om-js .om-reveal{opacity:1;transform:none}
  #om-progress{display:none}
}