/* Premium visual effects for Shreeji Online */
:root{--glass:rgba(255,255,255,.78);--glow:0 22px 60px rgba(11,109,181,.16)}
body{background:linear-gradient(180deg,#fff,#fbfdff 42%,#f7fbfe)}
.site-header{transition:box-shadow .25s ease,background .25s ease,transform .25s ease}
.site-header.scrolled{background:rgba(255,255,255,.92);box-shadow:0 14px 38px rgba(8,35,70,.12)}
.brand-logo,.custom-logo-link{transition:transform .3s ease,filter .3s ease}
.brand:hover .brand-logo,.brand:hover .custom-logo-link{transform:scale(1.04);filter:drop-shadow(0 0 14px rgba(43,184,234,.28))}
.header-btn,.cta{position:relative;overflow:hidden;isolation:isolate}
.header-btn:after,.cta:after{content:"";position:absolute;top:-35%;left:-120%;width:44%;height:170%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);transform:rotate(16deg);animation:shine 4.2s ease-in-out infinite;z-index:-1}
.hero{background-size:140% 140%;animation:heroShift 14s ease-in-out infinite}
.hero:after{content:"";position:absolute;right:-180px;top:90px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(43,184,234,.16),transparent 68%);filter:blur(8px);animation:orbDrift 11s ease-in-out infinite}
.eyebrow{box-shadow:0 10px 26px rgba(14,127,214,.08)}
.hero h1 .blue{background:linear-gradient(90deg,#0f7fd6,#2bb8ea,#0f7fd6);background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:textFlow 6s linear infinite}
.hero-left>*{animation:rise .8s cubic-bezier(.2,.8,.2,1) both}.hero-left>.eyebrow{animation-delay:.05s}.hero-left>h1{animation-delay:.14s}.hero-left>.hero-sub{animation-delay:.22s}.hero-left>.hero-desc{animation-delay:.3s}.hero-left>.trust-row{animation-delay:.38s}.hero-left>.hero-actions{animation-delay:.46s}
.hero-mark{will-change:transform;border-radius:50%;overflow:hidden;background:transparent;box-shadow:0 22px 55px rgba(8,42,84,.28)}.hero-mark .custom-logo{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;display:block!important;transform:none!important;border-radius:50%!important;clip-path:circle(50% at 50% 50%)!important}.orbit:after{content:"";position:absolute;inset:36px;border-radius:50%;border:1px dashed rgba(15,127,214,.25);animation:spin 18s linear infinite}
.logo-glow{animation:glowPulse 4.4s ease-in-out infinite}.pedestal{animation:pedestalPulse 3.4s ease-in-out infinite}
.office-visual{transition:transform .35s ease,box-shadow .35s ease}.office-visual:hover{transform:translateY(-6px) rotateX(.5deg);box-shadow:0 28px 62px rgba(8,35,70,.17)}
.laptop{animation:laptopFloat 5.8s ease-in-out infinite}.book:nth-child(1){animation:bookSlide 6s ease-in-out infinite}.book:nth-child(2){animation:bookSlide 6s ease-in-out infinite .15s}.book:nth-child(3){animation:bookSlide 6s ease-in-out infinite .3s}.book:nth-child(4){animation:bookSlide 6s ease-in-out infinite .45s}
.feature-strip{position:relative;overflow:hidden;background-size:200% 100%;animation:stripFlow 8s ease-in-out infinite}.feature-strip:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);transform:translateX(-100%);animation:stripSweep 6s ease-in-out infinite;pointer-events:none}
.feature{transition:background .25s ease,transform .25s ease}.feature:hover{background:rgba(255,255,255,.06);transform:translateY(-2px)}.feature-icon{transition:transform .25s ease}.feature:hover .feature-icon{transform:scale(1.08) rotate(-3deg)}
.section-head .kicker{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:#eef8fe;border:1px solid #d7edf9}.section-head h2{position:relative}.section-head h2:after{content:"";display:block;width:78px;height:4px;border-radius:999px;margin:14px auto 0;background:linear-gradient(90deg,var(--blue),var(--cyan))}
.service-card,.step,.benefit,.post-card{transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}.service-card:before,.step:before,.post-card:before{content:"";position:absolute;inset:auto -50px -65px auto;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,rgba(43,184,234,.13),transparent 68%);transition:transform .35s ease;pointer-events:none}.service-card:hover:before,.step:hover:before,.post-card:hover:before{transform:scale(1.35)}
.service-card:hover,.step:hover,.post-card:hover{transform:translateY(-8px);box-shadow:0 24px 50px rgba(8,35,70,.12);border-color:#c5e4f5}.service-icon{transition:transform .25s ease,box-shadow .25s ease}.service-card:hover .service-icon{transform:translateY(-4px) scale(1.06);box-shadow:0 10px 24px rgba(15,127,214,.12)}
.about-card{background-size:170% 170%;animation:aboutFlow 10s ease-in-out infinite}.about-card:after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(43,184,234,.18),transparent 70%);right:-40px;bottom:-50px;animation:orbDrift 9s ease-in-out infinite}.about-logo{animation:float 5s ease-in-out infinite;filter:drop-shadow(0 22px 35px rgba(0,0,0,.25));border-radius:50%;overflow:hidden;background:transparent;min-width:290px;min-height:290px;box-shadow:0 22px 55px rgba(8,42,84,.28)}.about-logo .custom-logo{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;display:block!important;transform:none!important;border-radius:50%!important;clip-path:circle(50% at 50% 50%)!important}
.benefit:hover{transform:translateX(6px);box-shadow:0 14px 30px rgba(8,35,70,.07)}
.step{position:relative;overflow:hidden}.step-num{box-shadow:0 10px 22px rgba(15,127,214,.18);transition:transform .25s ease}.step:hover .step-num{transform:scale(1.08) rotate(-3deg)}
.cta-section{position:relative;overflow:hidden;background-size:160% 160%;animation:ctaFlow 10s ease-in-out infinite}.cta-section:before{content:"";position:absolute;right:-120px;bottom:-160px;width:380px;height:380px;border-radius:50%;border:1px solid rgba(255,255,255,.09);box-shadow:0 0 0 32px rgba(255,255,255,.025),0 0 0 72px rgba(255,255,255,.018)}
.contact-card{transition:transform .3s ease,box-shadow .3s ease}.contact-card:hover{transform:translateY(-5px);box-shadow:0 22px 46px rgba(0,0,0,.16)}
.page-hero{position:relative;overflow:hidden}.page-hero:before{content:"";position:absolute;left:-100px;top:-120px;width:330px;height:330px;border-radius:50%;background:radial-gradient(circle,rgba(43,184,234,.15),transparent 68%)}
.site-footer{position:relative;overflow:hidden}.site-footer:before{content:"";position:absolute;left:-110px;bottom:-160px;width:330px;height:330px;border-radius:50%;background:radial-gradient(circle,rgba(43,184,234,.10),transparent 70%)}
.footer-links a{transition:color .2s ease,transform .2s ease}.footer-links a:hover{transform:translateX(4px);color:#fff}
.floating-wa{animation:waBob 2.8s ease-in-out infinite}.floating-wa:before{content:"";position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(23,173,91,.35);animation:ripple 2.8s ease-out infinite}
.reveal{opacity:0;transform:translateY(30px) scale(.985);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.8,.2,1)}.reveal.visible{opacity:1;transform:none}.services-grid .reveal:nth-child(2),.steps .reveal:nth-child(2),.blog-grid .reveal:nth-child(2){transition-delay:.08s}.services-grid .reveal:nth-child(3),.steps .reveal:nth-child(3),.blog-grid .reveal:nth-child(3){transition-delay:.16s}.services-grid .reveal:nth-child(4){transition-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}@keyframes shine{0%{left:-120%}58%,100%{left:140%}}@keyframes heroShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes textFlow{to{background-position:220% center}}@keyframes orbDrift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-24px,18px,0) scale(1.06)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes glowPulse{0%,100%{opacity:.72;transform:scale(.98)}50%{opacity:1;transform:scale(1.05)}}@keyframes pedestalPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.16)}}@keyframes laptopFloat{0%,100%{transform:perspective(800px) rotateY(-7deg) translateY(0)}50%{transform:perspective(800px) rotateY(-7deg) translateY(-5px)}}@keyframes bookSlide{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}@keyframes stripFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes stripSweep{0%,55%{transform:translateX(-100%)}75%,100%{transform:translateX(100%)}}@keyframes aboutFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes ctaFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes waBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes ripple{0%{transform:scale(.88);opacity:.45}70%,100%{transform:scale(1.18);opacity:0}}
@media(max-width:820px){.hero-left>*{animation-duration:.55s}.office-visual:hover,.service-card:hover,.step:hover,.post-card:hover,.contact-card:hover{transform:none}.orbit:after{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.reveal{opacity:1!important;transform:none!important}}