/* DEVLOPX brand colors - sabhi pages par lagta hai (link: brand.css)
   Deep Black #080808 | Charcoal #111111 | Metallic Silver #C0C0C0 | White #F5F5F5
   Electric Blue #5B6CFF | Light Blue #8490FF | Dark Gray #292929
   Koi colour badalna ho to sirf neeche ke variables badlo. */
:root{
--bg:#080808;--card:#111111;--line:#292929;--mut:#a3a8ba;--txt:#f5f5f5;--ink:#f5f5f5;--soft:#c9cdda;
--chrome:linear-gradient(180deg,#fff 0%,#9a9a9a 42%,#e9e9e9 58%,#6e6e6e 100%);
--acc:#5b6cff;--acc2:#8490ff;--ic:#8490ff;--accg:linear-gradient(180deg,#6b7bff,#4d5ff5);--gb:#5b6cff;
--glass:rgba(138,150,255,.06);--glass2:rgba(91,108,255,.10);--glassb:rgba(138,150,255,.22);
--hdr:rgba(8,8,8,.88);--hdr2:rgba(8,8,8,.97);--surf:#111111;--surf2:#0c0c0c;
--cardg:linear-gradient(180deg,#141414,#0b0b0b);
--glow:rgba(91,108,255,.20);--glow2:rgba(91,108,255,.10);--glow3:rgba(132,144,255,.18);--dot:rgba(132,144,255,.22);
--hcbg:linear-gradient(160deg,rgba(91,108,255,.16),rgba(255,255,255,.03));
--hcsh:0 18px 44px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.10);
--sk:rgba(255,255,255,.18);--sk2:rgba(255,255,255,.34);--chartbg:rgba(0,0,0,.35);
--barg:linear-gradient(180deg,#8490ff,#5b6cff);--gs-bg:#fff;--gs-c:#000;
--tgbg:#fff;--tgc:#000;--tgsh:none;
--phbg:linear-gradient(160deg,#1f1f1f,#0a0a0a);--phb:rgba(192,192,192,.45);--notch:#000;
--dotoff:#3a3d4d;--barbg:linear-gradient(100deg,#0b0b0b 40%,#1c2468 100%);--barb:rgba(91,108,255,.55);
--sh:0 20px 40px rgba(0,0,0,.6);--menuhover:rgba(91,108,255,.14);
--thumb:linear-gradient(135deg,#1a2050,#0b0b0f);--numg:linear-gradient(180deg,#b9c2ff,#5b6cff)}
html[data-theme="light"]{
--bg:#f6f7ff;--card:#ffffff;--line:#dfe3f5;--mut:#5d6384;--txt:#0b0f2a;--ink:#0b0f2a;--soft:#3f4566;
--chrome:linear-gradient(180deg,#3d4366 0%,#0b0f2a 42%,#5d6384 58%,#0b0f2a 100%);
--acc:#3d5cf5;--acc2:#4c6aff;--ic:#3d5cf5;--accg:linear-gradient(90deg,#2f55f0,#4f6dff);--gb:#0b0f2a;
--glass:rgba(255,255,255,.7);--glass2:rgba(61,92,245,.08);--glassb:#d5daf2;
--hdr:rgba(255,255,255,.86);--hdr2:rgba(255,255,255,.96);--surf:#ffffff;--surf2:#f1f3ff;
--cardg:linear-gradient(180deg,#ffffff,#f4f6ff);
--glow:rgba(91,108,255,.16);--glow2:rgba(61,92,245,.08);--glow3:rgba(61,92,245,.12);--dot:rgba(61,92,245,.18);
--hcbg:linear-gradient(160deg,rgba(255,255,255,.95),rgba(236,240,255,.85));--hcsh:0 14px 36px rgba(40,60,160,.14);
--sk:rgba(30,40,100,.14);--sk2:rgba(30,40,100,.28);--chartbg:rgba(61,92,245,.06);
--barg:linear-gradient(180deg,#7a8dff,#3d5cf5);--gs-bg:linear-gradient(90deg,#2f55f0,#4f6dff);--gs-c:#fff;
--tgbg:#fff;--tgc:#0b0f2a;--tgsh:0 0 0 1px #dfe3f5,0 6px 16px rgba(40,60,160,.10);
--phbg:linear-gradient(160deg,#ffffff,#eef1ff);--phb:#c7cdea;--notch:#0b0f2a;
--dotoff:#c3c9e6;--barbg:linear-gradient(100deg,#ffffff 30%,#dde4ff 100%);--barb:rgba(61,92,245,.4);
--sh:0 20px 40px rgba(40,60,160,.15);--menuhover:rgba(61,92,245,.10);
--thumb:linear-gradient(135deg,#e4e9ff,#cfd8ff);--numg:linear-gradient(180deg,#6f84ff,#2f55f0)}

/* light mode: invert hata ke proper colors */
html[data-theme="light"]{filter:none;background:var(--bg);color-scheme:light}
html[data-theme="light"] img,html[data-theme="light"] video,html[data-theme="light"] iframe,html[data-theme="light"] picture,html[data-theme="light"] .p,html[data-theme="light"] .avs i,html[data-theme="light"] .who i{filter:none}
html[data-theme="light"] img.logo-img,html[data-theme="light"] .bw-l img{filter:invert(1) contrast(1.1)}
html[data-theme="light"] .photo{background:linear-gradient(135deg,#ffffff,#e6eaff)}
html[data-theme="light"] .photo svg{filter:invert(1) hue-rotate(180deg)}
html[data-theme="light"] .map{filter:none}
html[data-theme="light"] header{background:radial-gradient(420px 90px at 8% 0%,rgba(91,108,255,.13),transparent 70%),radial-gradient(520px 100px at 92% 100%,rgba(91,108,255,.14),transparent 70%),linear-gradient(100deg,rgba(255,255,255,.92) 0%,rgba(236,240,255,.92) 50%,rgba(224,230,255,.92) 100%);border-bottom-color:#d9def5;box-shadow:0 6px 24px rgba(61,92,245,.07)}
html[data-theme="light"] header.scrolled{background:radial-gradient(420px 90px at 8% 0%,rgba(91,108,255,.13),transparent 70%),radial-gradient(520px 100px at 92% 100%,rgba(91,108,255,.14),transparent 70%),linear-gradient(100deg,rgba(255,255,255,.97) 0%,rgba(236,240,255,.97) 50%,rgba(224,230,255,.97) 100%)}
html[data-theme="light"] header .btn.ghost.sm{background:var(--accg);color:#fff;border-color:transparent}
html[data-theme="light"] header .btn.ghost.sm:hover{background:var(--accg);color:#fff;filter:brightness(1.1)}

::selection{background:var(--acc);color:#fff}
:focus-visible{outline-color:var(--acc2)}
.prog{background:linear-gradient(90deg,var(--acc),var(--acc2))}

/* header / nav */
header{background:var(--hdr)}
header.scrolled{background:var(--hdr2)}
.menu a:hover{color:var(--ic);opacity:1}
.menu a[aria-current]{color:var(--ic);box-shadow:0 2px 0 var(--acc)}
.burger{color:var(--ink)}
.themebtn:hover{border-color:var(--acc2);background:var(--glass2)}
.ddm{background:var(--surf2);box-shadow:var(--sh)}
.ddm a:hover,.ddm a[aria-current]{background:var(--menuhover)}
@media(max-width:860px){.menu{background:var(--surf2)}.ddm{box-shadow:none}}

/* buttons */
.btn{border-color:var(--gb)}
.btn.solid{background:var(--accg);color:#fff;border-color:transparent;box-shadow:0 8px 24px rgba(91,108,255,.35)}
.btn.solid:hover{background:var(--accg);color:#fff;filter:brightness(1.12)}
.hero .btn.solid{box-shadow:0 10px 30px rgba(91,108,255,.38)}
.btn.sm{border-color:var(--gb)}
.btn.ghost:hover,.hero .btn.ghost:hover{background:var(--acc);border-color:var(--acc);color:#fff}
.hero .btn.ghost{background:var(--glass);border-color:var(--gb)}
.fa .ghost:not(:hover){background:none;color:var(--ink)}

/* hero */
.hero{background:radial-gradient(ellipse 60% 55% at 78% 38%,var(--glow),transparent 70%),radial-gradient(ellipse 45% 40% at 0% 55%,var(--glow2),transparent 70%);border-bottom-color:var(--line)}
.hero:before{background-image:radial-gradient(var(--dot) 1px,transparent 1.2px)}
.hero:after{background:radial-gradient(520px circle at var(--gx,70%) var(--gy,30%),var(--glow2),transparent 60%)}
.hero .pill,.pill{background:var(--glass);border-color:var(--glassb);color:var(--soft)}
.pill:before,.hero .pill:before{background:var(--acc2)}
@keyframes pdot{0%{box-shadow:0 0 0 0 rgba(91,108,255,.6)}70%,100%{box-shadow:0 0 0 7px rgba(91,108,255,0)}}
.hero p.lead{color:var(--soft)}
.svcs a{border-color:var(--glassb);background:var(--glass)}
.svcs a:hover{background:var(--acc);border-color:var(--acc);color:#fff}
.svcs a:hover .ic{stroke:#fff}
.trustline span{background:var(--acc2)}
.label{color:var(--soft)}
.label:before,.label.c:after{background:var(--acc2)}
.sub{color:var(--soft)}
.ic{stroke:var(--ic)}

/* hero visual (home) */
.orbit ellipse{stroke:var(--acc2)}
.sweep{filter:drop-shadow(0 0 6px var(--acc2))}
.hc{background:var(--hcbg);border-color:var(--glassb);box-shadow:var(--hcsh)}
.ph{background:var(--phbg);border-color:var(--phb)}
.ph-notch{background:var(--notch);border-color:var(--notch)}
.tg{background:var(--tgbg);color:var(--tgc);box-shadow:var(--tgsh)}
.tg .ic{stroke:var(--acc)}
.bw-bar{border-bottom-color:var(--line)}
.bw-bar i{background:var(--acc)}
.bw-bar span{background:var(--glass2);color:var(--mut)}
.bw-l u{background:var(--gs-bg);color:var(--gs-c)}
.ln{background:var(--sk)}
.bw-r svg{background:var(--chartbg);border-color:var(--line)}
.bw-r svg stop{stop-color:var(--acc)}
.bw-r svg path:last-of-type{stroke:var(--acc)}
.ph-h{background:var(--sk2)}
.ph-r{background:var(--sk)}
.ph-bars{background:var(--glass2)}
.ph-bars i,.pc-b i{background:var(--barg)}
.heart{background:var(--glass2);color:var(--acc)}
.so small,.sc-r small,.pc small,.hero .badge small{color:var(--mut)}
.sc-q{background:var(--chartbg);border-color:var(--line);color:var(--soft)}
.sc-q svg{stroke:var(--mut)}
.sc-r{background:var(--glass2);border-left-color:var(--acc)}
.hero .badge{background:var(--hcbg);border-color:var(--glassb);box-shadow:var(--hcsh)}

/* cards / sections */
.svc,.xc,.card,.pf,.form{background:var(--cardg);border-color:var(--line)}
.svc:hover,.card:hover,.pf:hover{border-color:var(--acc2)}
.svc:before{background:radial-gradient(180px circle at var(--mx,50%) var(--my,0%),var(--glow3),transparent 70%)}
.go{border-color:var(--acc2);color:var(--acc2)}
.svc:hover .go{background:var(--acc);border-color:var(--acc);color:#fff}
.xc .xs,.xcs .xi{color:var(--ic)}
.xcs dt{color:var(--ink)}
.xcs .xr b{color:var(--ic)}
.xchips span,.chips span{border-color:var(--glassb);background:var(--glass)}
.xfaq details,.faq details{background:var(--surf)}
.xfaq p,.faq p{color:var(--soft)}
.story p,.aboutr p{color:var(--soft)}
.step{border-top-color:var(--acc2)}
.step:before{background-image:var(--numg)}
.chips a{border-color:var(--glassb)}
.chips a:hover,.chips button:hover,.chips button.on{background:var(--acc);border-color:var(--acc);color:#fff}
.chips button{border-color:var(--glassb)}
.ticks li:before{background:var(--acc);color:#fff}
#cg stop:nth-child(1){stop-color:#b9c2ff}
#cg stop:nth-child(2){stop-color:#5b6cff}
#cg stop:nth-child(3){stop-color:#8490ff}
#cg stop:nth-child(4){stop-color:#2f3dbf}
.bars path:last-child{fill:var(--acc2)}
.stats{background:var(--surf);border-color:var(--line)}

/* testimonials */
.ar{border-color:var(--acc2);color:var(--ink)}
.ar:hover{background:var(--acc);border-color:var(--acc);color:#fff}
.tview,.q{background:var(--surf);border-color:var(--line)}
.ts .mark,.q .mark{color:var(--acc2)}
.tagp{border-color:var(--glassb);color:var(--ic)}
.ts .who i{background:var(--glass2);border-color:var(--glassb)}
.ts .who i svg{stroke:var(--ic)}
.dot{background:var(--dotoff)}
.dot.on{background:var(--acc)}
.dot:hover{background:var(--acc2)}
.tq{background:var(--cardg);border-color:var(--glassb)}
.tq .mark{background-image:var(--numg)}
.tq.proj .who a{color:var(--ic)}
.av{background:var(--accg);color:#fff}
.sctl button{border-color:var(--glassb);background:var(--surf);color:var(--ink)}
.sctl button:hover{border-color:var(--acc);background:var(--acc);color:#fff}
.sctl button:focus-visible,.dots button:focus-visible{outline-color:var(--acc2)}
.dots button{background:var(--dotoff)}
.dots button[aria-current="true"]{background:var(--acc)}
.consent{color:var(--soft)}
.consent input{accent-color:var(--acc)}

/* blog */
.feat{background:var(--surf);border-color:var(--line)}
.feat p{color:var(--soft)}
.th,.pt{background:var(--thumb);border-color:var(--line)}
.th:after{background:rgba(91,108,255,.18)}
.pt img{background:var(--surf)}
.tag{border-color:var(--glassb);color:var(--ic)}
.art p,.art li{color:var(--soft)}
.art .intro{color:var(--ink)}
.rel a:hover{border-color:var(--acc2)}
.crumbs a:hover{color:var(--ic)}

/* forms / contact / portfolio search */
.fld input,.fld select,.fld textarea,.tools input{color:var(--ink);background:var(--surf2);border-color:var(--line)}
.fld input:focus,.fld select:focus,.fld textarea:focus,.tools input:focus{border-color:var(--acc)}
.fld select option{background:var(--surf);color:var(--ink)}
.note{color:var(--mut)}
.ci{background:var(--surf);border-color:var(--line)}
a.ci:hover{border-color:var(--acc2)}
.ci i{border-color:var(--acc2);color:var(--ic)}
.tkd{color:var(--ink)}
.tk{background:var(--cardg);border-color:var(--glassb)}
.tkic{border-color:var(--acc2)}
.tkic svg{stroke:var(--acc2)}
.tk p{color:var(--soft)}

/* CTA bar */
.bar{border-color:var(--barb);background:var(--barbg)}
.bar svg{stroke:var(--acc2)}
.bar p{color:var(--mut)}

/* footer */
footer{border-top-color:var(--line)}
.fg li{color:var(--soft)}
.fg a:hover{color:var(--ic)}
footer .tag,footer .ftag,.fg .tag,.fg .ftag{color:var(--ic);border-color:var(--glassb)}
.soc a{border-color:var(--acc2)}
.soc a:hover{background:var(--acc);border-color:var(--acc);color:#fff}
.copy{color:var(--mut);border-top-color:var(--line)}
