/* Brotomotiv FX layer - creative animations (safe to delete: remove fx.css/fx.js links) */

/* 1. Intro loader: logo + polish sweep */
.ld{position:fixed;inset:0;z-index:999;background:#000;display:grid;place-items:center;transition:opacity .6s .1s,visibility .6s .1s}
.ld.out{opacity:0;visibility:hidden}
.ld div{position:relative;overflow:hidden;padding:6px 14px}
.ld img{height:96px;display:block;animation:ldp 1.1s ease-out both}
.ld div:after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-50%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);transform:skewX(-20deg);animation:lds 1s .35s ease-in-out forwards}
.ld i{position:absolute;left:50%;bottom:30%;width:140px;height:3px;margin-left:-70px;background:#222;border-radius:3px;overflow:hidden}
.ld i:after{content:"";position:absolute;inset:0;background:var(--yl);transform:translateX(-100%);animation:ldb 1s .1s ease-out forwards}
@keyframes ldp{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
@keyframes lds{to{left:130%}}
@keyframes ldb{to{transform:none}}

/* 2. Scroll progress bar */
.pb{position:fixed;top:0;left:0;height:3px;width:100%;z-index:998;background:linear-gradient(90deg,var(--yl),#fff3b0);transform-origin:0 50%;transform:scaleX(0);box-shadow:0 0 12px var(--yl)}

/* 3. Cursor glow ring (desktop only) */
.cr{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border:2px solid var(--yl);border-radius:50%;pointer-events:none;z-index:997;opacity:0;transition:width .25s,height .25s,margin .25s,background .25s,opacity .3s;mix-blend-mode:difference}
.cr.on{opacity:1}.cr.hv{width:58px;height:58px;margin:-29px 0 0 -29px;background:rgba(255,193,14,.25)}

/* 4. Hero spotlight + parallax */
.sl .gl{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(circle 260px at var(--mx,50%) var(--my,50%),rgba(255,255,255,.22),rgba(255,193,14,.08) 45%,transparent 70%);mix-blend-mode:screen}
.sl:hover .gl{opacity:1}
.sd>img{will-change:transform}
.sl .hint{position:absolute;right:14px;top:12px;z-index:4;background:rgba(0,0,0,.6);color:var(--yl);font-size:11px;padding:3px 10px;border-radius:20px;opacity:0;transition:opacity .4s}
.sl:hover .hint{opacity:1}

/* 5. Headline word reveal */
.wd{display:inline-block;overflow:hidden;vertical-align:bottom;line-height:1.1}
.wd>span{display:inline-block;transform:translateY(110%);transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.on .wd>span,.wd.on>span{transform:none}

/* 6. 3D tilt + glare on service cards and panels */
.sc,.cd,.step,.sv{transform-style:preserve-3d}
.tl{transition:transform .15s ease-out,box-shadow .35s}
.tl .sh{position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .3s;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.28),transparent 55%)}
.tl:hover .sh{opacity:1}
.sc,.cd,.step{position:relative}

/* 7. Heading underline draw */
h2.rv:after,.pgh h2:after{content:"";display:block;height:3px;width:0;margin-top:6px;background:var(--yl);border-radius:3px;transition:width 1s .3s cubic-bezier(.2,.8,.2,1)}
h2.rv.on:after,.pgh h2:after{width:70px}
.pgh h2:after{animation:ul 1s .5s cubic-bezier(.2,.8,.2,1) both}@keyframes ul{from{width:0}to{width:70px}}

/* 8. Magnetic buttons + shine */
.btn{position:relative;overflow:hidden}
.btn:before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .6s}
.btn:hover:before{left:130%}

/* 9. POLISH ME - interactive scratch-to-shine canvas */
.pol{position:relative;border-radius:26px;overflow:hidden;background:var(--pn);padding:26px 26px 30px}
.pol h2{margin-bottom:4px}
.pol p{color:#ddd;margin:0 0 16px;max-width:620px}
.pw{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:3/1;min-height:170px;touch-action:none;cursor:none;box-shadow:inset 0 0 0 2px rgba(255,193,14,.5)}
.pw .gl2,.pw canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.pw .gl2{background:
 radial-gradient(ellipse 60% 120% at 25% -10%,rgba(255,255,255,.75),transparent 55%),
 linear-gradient(115deg,#a30f1f 0%,#e11d2e 35%,#ff5a4d 50%,#c4101f 65%,#6b0813 100%)}
.pw .gl2:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.5) 50%,transparent 60%);background-size:250% 100%;animation:gls 4s ease-in-out infinite}
@keyframes gls{from{background-position:130% 0}to{background-position:-130% 0}}
.pw .lb{position:absolute;left:12px;bottom:10px;z-index:3;font:400 22px 'Bebas Neue';letter-spacing:1px;color:#fff;text-shadow:0 2px 6px #000;pointer-events:none}
.pw .pad{position:absolute;z-index:4;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,#444 0 30%,#222 31% 60%,var(--yl) 61% 66%,#111 67%);box-shadow:0 4px 14px rgba(0,0,0,.6);animation:spn 1s linear infinite;opacity:0;transition:opacity .3s}
.pw:hover .pad,.pw.t .pad{opacity:1}
@keyframes spn{to{transform:rotate(360deg)}}
.pm{display:flex;align-items:center;gap:14px;margin-top:14px;flex-wrap:wrap}
.pm .bar2{flex:1;min-width:160px;height:8px;background:#222;border-radius:8px;overflow:hidden}
.pm .bar2 i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--yl),#fff3b0);transition:width .2s}
.pm span{color:var(--yl);font:400 24px 'Bebas Neue';min-width:60px}
.pm .done{display:none;color:#fff;font:500 14px Poppins}
.pm.fin .done{display:block}

/* 10. Floating WhatsApp bubble */
.wa{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:40;width:54px;height:54px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 6px 20px rgba(0,0,0,.5);animation:pl2 2.2s infinite;transition:transform .3s}
.wa:hover{transform:scale(1.12) rotate(-8deg)}
.wa svg{width:30px;height:30px;fill:#fff}
@keyframes pl2{0%{box-shadow:0 0 0 0 rgba(37,211,102,.6),0 6px 20px rgba(0,0,0,.5)}70%,100%{box-shadow:0 0 0 18px rgba(37,211,102,0),0 6px 20px rgba(0,0,0,.5)}}

/* 11. Floating sparkles in hero buttons area / dust */
.sp{position:fixed;pointer-events:none;z-index:996;width:8px;height:8px;background:var(--yl);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:spk .8s ease-out forwards}
@keyframes spk{to{transform:translate(var(--dx),var(--dy)) scale(0) rotate(180deg);opacity:0}}

@media(max-width:900px){.cr{display:none}.pw{aspect-ratio:2/1}.pw{cursor:auto}}
@media(hover:none){.cr{display:none}.pw{cursor:auto}}
@media(prefers-reduced-motion:reduce){.ld{display:none}.wd>span{transform:none}.pb{display:none}.pw .gl2:after{display:none}}

/* ===== Stats + social cards ===== */
.st3{grid-template-columns:1fr 1fr .85fr .85fr;grid-auto-flow:row}
.st3 .s{padding:24px 10px}
.so{grid-row:1/3;border-radius:14px;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;padding:16px;color:#fff;position:relative;overflow:hidden;transition:transform .35s,box-shadow .35s}
.so:hover{transform:translateY(-6px);box-shadow:0 16px 34px rgba(0,0,0,.55)}
.so svg{width:52px;height:52px;margin-bottom:10px;transition:transform .5s}.so:hover svg{transform:rotate(-8deg) scale(1.12)}
.so b{font:500 26px Poppins;line-height:1.2}.so span{font:600 15px Poppins}
.so.ig{background:radial-gradient(circle at 30% 108%,#ffe27a 0,#ff6a4d 30%,#d72a95 58%,#5a4de6 100%)}
.so.gg{background:linear-gradient(180deg,#ffffff,#d6e6ff);color:#202124}
.so.gg svg{width:54px;height:54px}
.so.gg .gs{color:#FBBC05;font-size:22px;letter-spacing:3px;text-shadow:0 1px 0 rgba(0,0,0,.15)}
.so:after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:sw2 5s 1s ease-in-out infinite}
@keyframes sw2{0%,60%{left:-70%}100%{left:150%}}
.so.gg{grid-column:4}.so.ig{grid-column:3}
@media(max-width:900px){.st3{grid-template-columns:1fr 1fr}.so{grid-row:auto;grid-column:auto!important;padding:24px 10px}}

/* ===== Contact process timeline ===== */
.tm4{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:34px}
.tm4:before{content:"";position:absolute;top:30px;left:12.5%;right:12.5%;height:1px;background:#8a8a8a;transform:scaleX(0);transform-origin:0 50%;transition:transform 1.6s .3s ease}
.tm4.on:before{transform:scaleX(1)}
.tm4 .ts{text-align:center;position:relative;opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}
.tm4.on .ts{opacity:1;transform:none}
.tm4.on .ts:nth-child(1){transition-delay:.2s}.tm4.on .ts:nth-child(2){transition-delay:.6s}.tm4.on .ts:nth-child(3){transition-delay:1s}.tm4.on .ts:nth-child(4){transition-delay:1.4s}
.ti{width:60px;height:60px;border:2px solid var(--yl);border-radius:18px;background:#000;display:grid;place-items:center;margin:0 auto 18px;position:relative;z-index:1;color:var(--yl);transition:background .3s,color .3s,transform .3s}
.ti svg{width:28px;height:28px}
.ts:hover .ti{background:var(--yl);color:#000;transform:translateY(-4px) rotate(-6deg)}
.tm4.on .ts .ti{animation:tpop .7s both}
.tm4.on .ts:nth-child(1) .ti{animation-delay:.2s}.tm4.on .ts:nth-child(2) .ti{animation-delay:.6s}.tm4.on .ts:nth-child(3) .ti{animation-delay:1s}.tm4.on .ts:nth-child(4) .ti{animation-delay:1.4s}
@keyframes tpop{0%{box-shadow:0 0 0 0 rgba(255,193,14,.7)}100%{box-shadow:0 0 0 22px rgba(255,193,14,0)}}
.tm4 h3{font:500 15.5px/1.4 Poppins;text-transform:none;color:var(--yl);margin-bottom:8px}
.tm4 p{margin:0 auto;max-width:270px;font-size:13.5px;line-height:1.55;color:#f1f1f1}
@media(max-width:900px){.tm4{grid-template-columns:1fr 1fr;row-gap:34px}.tm4:before{display:none}}
@media(max-width:560px){.tm4{grid-template-columns:1fr}}

/* ===== Footer ===== */
footer.ft{background:#000;margin-top:40px;padding:0;color:#fff;font-size:14px}
.fy{background:var(--yl);padding:7px 0;text-align:center}
footer.ft a.fb{display:inline-block;background:#000;color:#fff;font:500 16px Poppins;padding:9px 20px;border-radius:8px;transition:transform .3s,box-shadow .3s,color .3s}
footer.ft a.fb:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(0,0,0,.5);color:var(--yl)}
footer.ft .fx{display:grid;grid-template-columns:1.3fr .8fr 1.2fr 1.1fr 1.2fr;gap:26px;padding-top:38px;padding-bottom:26px;position:relative}
footer.ft h3{font:500 19px Poppins;text-transform:none;color:var(--yl);margin:0 0 12px}
footer.ft .f1 h3{font-size:17px}
footer.ft .addr{margin:0 0 14px;color:#fff;font-size:13.5px}
footer.ft .f1 img{height:46px;margin:14px 0 0 40px}
footer.ft .fx a{display:block;color:#fff;padding:3px 0;font-size:13.5px;transition:color .25s,transform .25s}
footer.ft .fx a:hover{color:var(--yl);transform:translateX(5px)}
footer.ft a.fe{display:inline-block;background:var(--yl);color:#000!important;font-weight:500;padding:6px 18px;border-radius:5px;margin-top:10px;transition:transform .3s,box-shadow .3s!important}
footer.ft a.fe:hover{transform:translateY(-3px)!important;box-shadow:0 6px 18px rgba(255,193,14,.4)}
.fm{position:relative;align-self:end;margin:-20px -10px -26px 0;text-align:center}
.fm span{display:block;font:400 30px 'Bebas Neue';letter-spacing:2px;background:linear-gradient(180deg,#fff,#8c8c8c 60%,#d8d8d8);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:-4px;position:relative;z-index:1}
footer.ft .fm img{height:auto;width:100%;max-width:300px;margin:0;display:block;margin-left:auto;-webkit-mask-image:radial-gradient(ellipse 52% 62% at 50% 52%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 52% 62% at 50% 52%,#000 62%,transparent 100%);animation:fl 5s ease-in-out infinite}
.fbar{display:flex;align-items:center;gap:20px;background:#3a3a3a;border-radius:40px;padding:12px 22px;margin-bottom:26px;position:relative;z-index:2}
.so2{display:flex;gap:14px}
footer.ft .so2 a{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#fff;color:#000;padding:0;transition:transform .3s,background .3s}
footer.ft .so2 a:hover{background:var(--yl);transform:translateY(-4px) rotate(-10deg)}
.so2 svg{width:17px;height:17px}
.cp{flex:1;text-align:center;color:#bbb;font-size:13px}.cp b{color:var(--yl);font-weight:500}
.bt{position:fixed;right:19px;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:40;width:46px;height:46px;border:0;border-radius:50%;background:var(--yl);color:#000;cursor:pointer;display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.5);opacity:0;transform:translateY(20px) scale(.8);pointer-events:none;transition:opacity .3s,transform .3s}
.bt.on{opacity:1;transform:none;pointer-events:auto}.bt:hover{transform:translateY(-4px)}
.bt svg{width:20px;height:20px}
@media(max-width:900px){footer.ft .fx{grid-template-columns:1fr 1fr}.fm{grid-column:1/-1;margin:0}footer.ft .fm img{margin:auto}.fbar{flex-direction:column;border-radius:20px;text-align:center}footer.ft .f1 img{margin-left:0}}
@media(max-width:520px){footer.ft .fx{grid-template-columns:1fr}}

/* ===== Contact: car + headlight animation ===== */
.cl{display:grid;gap:14px;align-content:start}
.car{position:relative;border-radius:18px;overflow:hidden;background:#000;aspect-ratio:806/362;cursor:pointer;box-shadow:0 0 0 1px #2a2a2a}
.car img{width:100%;height:100%;display:block;object-fit:cover}
.car .hl,.car .bm{position:absolute;pointer-events:none;mix-blend-mode:screen;opacity:0}
.car .hl{top:52.5%;width:12%;aspect-ratio:1;margin:-6% 0 0 -6%;border-radius:50%;background:radial-gradient(circle,#fff 0 12%,rgba(215,235,255,.85) 24%,rgba(150,195,255,.3) 52%,transparent 72%)}
.car .hl.l{left:26.1%}.car .hl.r{left:44.3%}
.car .bm{inset:0;background:
  radial-gradient(ellipse 34% 52% at 26% 56%,rgba(190,220,255,.38),transparent 70%),
  radial-gradient(ellipse 34% 52% at 44.3% 56%,rgba(190,220,255,.38),transparent 70%),
  radial-gradient(ellipse 60% 70% at 35% 70%,rgba(160,200,255,.2),transparent 75%);transform-origin:35% 55%}
.car .cap{position:absolute;left:5%;bottom:7%;font:400 clamp(22px,3.4vw,38px)/1 'Bebas Neue';letter-spacing:2px;color:#fff;opacity:0;transform:translateY(12px);transition:opacity .8s 1.8s,transform .8s 1.8s;text-shadow:0 2px 10px #000}.car .cap b{color:var(--yl);font-weight:400}
.car.on .cap{opacity:1;transform:none}
.car.on .hl{animation:hlon 2.2s .2s both,hlp 3.4s 2.4s ease-in-out infinite}
.car.on .bm{animation:bmon 2.4s .2s both,bmp 3.4s 2.6s ease-in-out infinite}
.car:hover .bm,.car.hb .bm{filter:brightness(1.7)}
.car.hb .hl{animation:hlflash .7s ease-out}
@keyframes hlon{0%{opacity:0;transform:scale(.4)}6%{opacity:.95;transform:scale(1)}10%{opacity:.05}16%{opacity:1}22%{opacity:.15}30%{opacity:1}36%{opacity:.4}46%,100%{opacity:1;transform:scale(1)}}
@keyframes bmon{0%,30%{opacity:0;transform:scale(.5)}60%{opacity:.8}100%{opacity:.85;transform:scale(1)}}
@keyframes hlp{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.78;transform:scale(1.12)}}
@keyframes bmp{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
@keyframes hlflash{0%{transform:scale(1);opacity:1}30%{transform:scale(2.6);opacity:1;filter:brightness(1.8)}100%{transform:scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.car .hl{opacity:1}.car .bm{opacity:.85}.car .cap{opacity:1;transform:none}.tm4 .ts{opacity:1;transform:none}.tm4:before{transform:none}}
h2[style*="center"]:after{margin-left:auto!important;margin-right:auto!important}
.ti svg.inf{width:30px;height:30px}
footer.ft .w:not(.fx){display:block;grid-template-columns:none}
footer.ft .fm img{max-width:360px}

/* ===== Gandhinagar logo sizing ===== */
nav img{height:54px}
footer.ft .f1 img{height:62px;margin-left:0}
.so b.igh{font-size:15px;line-height:1.3;word-break:break-all;padding:0 6px}
.bar span{max-width:100%}
/* ===== Services page: each service row max 500px ===== */
@media(min-width:901px){
 .sv{max-height:500px;overflow:hidden}
 .sv img{max-height:460px;aspect-ratio:1.4/1;object-fit:cover}
}