/* Drevia Infotech — shared base */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:'Poppins',system-ui,sans-serif;background:var(--bg);color:var(--fg);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:6px}
:root{--nav:72px;--ribbon:34px;--bg:#070d33;--fg:#eef1ff;--acc:#5b8cff;--acc2:#9db9ff;--muted:rgba(238,241,255,.66);--line:rgba(255,255,255,.12);--disp:'Poppins',sans-serif;--navy:#0b1550}
.wrap{width:min(1180px,100% - 40px);margin-inline:auto}
.disp{font-family:var(--disp)}
.serif-i{font-family:'Lora',serif;font-style:italic;font-weight:400}
h1,h2,h3,h4{font-family:var(--disp);line-height:1.08;margin:0 0 .5em;letter-spacing:-.02em}
p{margin:0 0 1em}
.muted{color:var(--muted)}
section{position:relative}
.pad{padding:clamp(70px,10vw,140px) 0}

/* ribbon */
.ribbon{position:fixed;inset:0 0 auto 0;height:var(--ribbon);z-index:120;background:linear-gradient(90deg,#1b2f9b,#3b6fd4,#1b2f9b);background-size:200% 100%;animation:rib 8s linear infinite;color:#fff;font-size:12.5px;font-weight:500;display:flex;align-items:center;overflow:hidden;letter-spacing:.02em}
@keyframes rib{to{background-position:200% 0}}
.ribbon .track{display:flex;gap:48px;white-space:nowrap;animation:mq 26s linear infinite;padding-left:24px}
.ribbon b{background:#fff;color:#1b2f9b;border-radius:99px;padding:1px 10px;margin-right:10px;font-weight:700}
.ribbon i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#7dffb0;margin-right:8px;animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.2}}
@keyframes mq{to{transform:translateX(-50%)}}

/* nav */
.nav{position:fixed;top:var(--ribbon);left:0;right:0;height:var(--nav);z-index:110;transition:background .35s,backdrop-filter .35s,box-shadow .35s}
.nav.scrolled{background:var(--navbg,rgba(7,13,51,.78));backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);box-shadow:0 1px 0 var(--line)}
.nav .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:20px;letter-spacing:-.02em;color:var(--brandc,#fff)}
.brand img{height:34px;width:auto}
.brand span{font-weight:400;color:var(--brandc2,var(--acc2))}
.links{display:flex;align-items:center;gap:6px}
.links a.l{padding:8px 14px;border-radius:99px;font-size:14px;font-weight:500;color:var(--navc,var(--muted));position:relative;transition:color .25s,background .25s}
.links a.l:hover,.links a.l.on{color:var(--navh,#fff);background:var(--navpill,rgba(255,255,255,.09))}
.cta-wrap{position:relative;margin-left:8px}
.cta{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;background:var(--ctabg,linear-gradient(135deg,#3b6fd4,#6f5bff));color:#fff;padding:10px 18px;border-radius:99px;font-weight:600;font-size:14px;box-shadow:0 8px 30px -8px var(--acc);transition:transform .25s,box-shadow .25s}
.cta:hover{transform:translateY(-2px)}
.cta svg{transition:transform .3s}
.cta-wrap.open .cta svg{transform:rotate(180deg)}
.menu{position:absolute;right:0;top:calc(100% + 12px);width:340px;background:#0e1440;border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:10px;opacity:0;visibility:hidden;transform:translateY(-8px) scale(.97);transform-origin:top right;transition:.28s cubic-bezier(.2,.8,.2,1);box-shadow:0 40px 80px -20px rgba(0,0,0,.6);color:#fff}
.cta-wrap.open .menu{opacity:1;visibility:visible;transform:none}
.menu a{display:flex;gap:14px;align-items:center;padding:12px;border-radius:14px;transition:background .2s,transform .2s}
.menu a:hover{background:rgba(255,255,255,.08);transform:translateX(4px)}
.menu .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none;font-size:20px}
.menu b{display:block;font-size:14px}
.menu small{display:block;color:rgba(255,255,255,.58);font-size:12px;line-height:1.35}
.menu .all{border-top:1px solid rgba(255,255,255,.1);margin-top:6px;padding-top:14px;border-radius:0 0 14px 14px;font-size:13px;font-weight:600;color:#9db9ff}
.burger{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.06);cursor:pointer;position:relative}
.burger i{position:absolute;left:12px;right:12px;height:2px;background:var(--brandc,#fff);border-radius:2px;transition:.3s}
.burger i:nth-child(1){top:15px}.burger i:nth-child(2){top:21px}.burger i:nth-child(3){top:27px}
.burger.x i:nth-child(1){top:21px;transform:rotate(45deg)}.burger.x i:nth-child(2){opacity:0}.burger.x i:nth-child(3){top:21px;transform:rotate(-45deg)}
.drawer{position:fixed;inset:0;z-index:105;background:#070d33;color:#fff;padding:calc(var(--ribbon) + var(--nav) + 10px) 24px 30px;overflow:auto;clip-path:circle(0 at calc(100% - 40px) 60px);transition:clip-path .7s cubic-bezier(.7,0,.2,1);visibility:hidden}
.drawer.open{clip-path:circle(150% at calc(100% - 40px) 60px);visibility:visible}
.drawer a{display:block;font-size:26px;font-weight:600;padding:10px 0;border-bottom:1px solid var(--line);opacity:0;transform:translateY(18px);transition:.5s}
.drawer.open a{opacity:1;transform:none}
.drawer.open a:nth-child(n){transition-delay:calc(.25s + var(--i)*.05s)}
.drawer small{display:block;margin:22px 0 4px;color:#9db9ff;font-size:13px}
.drawer a.s{font-size:18px;font-weight:500;color:#cdd8ff;padding-left:14px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:99px;font-weight:600;font-size:15px;border:1px solid transparent;cursor:pointer;transition:transform .25s,box-shadow .25s,background .25s;position:relative;overflow:hidden}
.btn.p{background:var(--btnbg,linear-gradient(135deg,#3b6fd4,#6f5bff));color:#fff;box-shadow:0 14px 40px -12px var(--acc)}
.btn.g{border-color:var(--line);background:rgba(255,255,255,.05);color:inherit}
.btn:hover{transform:translateY(-3px)}
.btn.p::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s}
.btn.p:hover::after{transform:translateX(120%)}

/* reveal */
[data-r]{opacity:0;transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1),filter .9s;transition-delay:var(--d,0s)}
[data-r=up],[data-r=""]{transform:translateY(40px)}
[data-r=left]{transform:translateX(-60px)}
[data-r=right]{transform:translateX(60px)}
[data-r=zoom]{transform:scale(.88)}
[data-r=blur]{filter:blur(14px);transform:translateY(20px)}
[data-r].in{opacity:1;transform:none;filter:none}
.ch{display:inline-block;opacity:0;transform:translateY(.9em) rotate(6deg);transition:.8s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--k)*28ms + var(--base,0ms))}
.in .ch,.ch.in{opacity:1;transform:none}
.wd{display:inline-block;white-space:nowrap}

/* misc fx */
.spot{position:relative;overflow:hidden}
.spot::before{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),var(--spot,rgba(91,140,255,.22)),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none;z-index:0}
.spot:hover::before{opacity:1}
.spot>*{position:relative;z-index:1}
#glow{position:fixed;width:520px;height:520px;border-radius:50%;pointer-events:none;z-index:1;background:radial-gradient(circle,var(--acc) 0%,transparent 65%);opacity:.10;transform:translate(-50%,-50%);mix-blend-mode:screen;left:-999px;top:-999px}
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,#5b8cff,#b18cff,#5bffd1);z-index:200}
.fab{position:fixed;right:18px;bottom:18px;z-index:90;display:flex;flex-direction:column;gap:10px}
.fab a{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:#fff;box-shadow:0 14px 30px -8px rgba(0,0,0,.5);transition:transform .25s}
.fab a:hover{transform:scale(1.1)}
.fab .wa{background:#1fb855}.fab .ph{background:#3b6fd4}
.fab .ph::after{content:"";position:absolute;width:54px;height:54px;border-radius:50%;border:2px solid #3b6fd4;animation:ping 2s infinite}
.fab a{position:relative}
@keyframes ping{to{transform:scale(1.7);opacity:0}}

/* footer */
footer.ft{background:#050a26;color:#cfd8ff;padding:70px 0 30px;position:relative;overflow:hidden;z-index:2}
footer.ft .big{font-family:'Poppins';font-weight:800;font-size:clamp(48px,13vw,190px);line-height:.9;letter-spacing:-.05em;background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0));-webkit-background-clip:text;background-clip:text;color:transparent;margin:50px 0 0;white-space:nowrap}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
.fgrid h5{margin:0 0 14px;font-size:13px;color:#8fa6ff;font-weight:600}
.fgrid a{display:block;padding:4px 0;color:#cfd8ff;font-size:14.5px;opacity:.85;transition:.2s}
.fgrid a:hover{opacity:1;transform:translateX(4px);color:#fff}
.fbot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.1);margin-top:36px;padding-top:20px;font-size:13px;color:#8fa0d6}

/* LOADER */
#loader{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;overflow:hidden;background:#04081f}
#loader .panel{position:absolute;left:0;right:0;height:50.5%;background:#04081f;transition:transform 1.1s cubic-bezier(.8,0,.15,1) .15s;z-index:3}
#loader .panel.t{top:0}#loader .panel.b{bottom:0}
#loader.go .panel.t{transform:translateY(-101%)}#loader.go .panel.b{transform:translateY(101%)}
#loader .core{position:relative;z-index:4;text-align:center;transition:opacity .5s,transform .8s cubic-bezier(.7,0,.3,1)}
#loader.go .core{opacity:0;transform:scale(1.25)}
#loader .aur{position:absolute;inset:-20%;background:radial-gradient(40% 40% at 30% 30%,rgba(59,111,212,.55),transparent 70%),radial-gradient(35% 35% at 75% 70%,rgba(111,91,255,.45),transparent 70%);filter:blur(30px);animation:aur 6s ease-in-out infinite alternate;z-index:1;transition:opacity .6s}
#loader.go .aur{opacity:0}
@keyframes aur{to{transform:translate(4%,-3%) rotate(8deg) scale(1.1)}}
.lg-mark{position:relative;width:132px;height:132px;margin:0 auto 26px;display:grid;place-items:center}
.lg-mark img{width:78px;position:relative;z-index:2;filter:drop-shadow(0 0 26px rgba(91,140,255,.8));animation:lgin 1.4s cubic-bezier(.2,.9,.2,1) both}
@keyframes lgin{0%{opacity:0;transform:scale(.4) rotate(-25deg);filter:blur(14px)}60%{opacity:1}100%{transform:none}}
.lg-mark svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.lg-mark circle{fill:none;stroke-width:2}
.lg-mark .c1{stroke:rgba(255,255,255,.12)}
.lg-mark .c2{stroke:url(#lgg);stroke-linecap:round;stroke-dasharray:377;stroke-dashoffset:377;animation:ring 2s .2s cubic-bezier(.6,0,.2,1) forwards}
@keyframes ring{to{stroke-dashoffset:0}}
.lg-mark::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:1px dashed rgba(157,185,255,.3);animation:spin 9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.lg-name{font-size:34px;font-weight:700;letter-spacing:-.02em;color:#fff;overflow:hidden;white-space:nowrap}
.lg-name span.ch{--base:700ms}
.lg-name em{font-style:normal;font-weight:400;color:#9db9ff}
.lg-tag{margin-top:6px;font-size:13px;letter-spacing:.34em;color:#8ea4ea;opacity:0;animation:fade 1s 1.7s forwards;text-transform:none}
@keyframes fade{to{opacity:1}}
.lg-bar{width:min(240px,60vw);height:2px;background:rgba(255,255,255,.12);margin:26px auto 0;border-radius:2px;overflow:hidden}
.lg-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#5b8cff,#b18cff,#5bffd1);transition:width .2s}
.lg-pct{margin-top:10px;font-size:12px;color:#7d92da;font-variant-numeric:tabular-nums}
.lg-sweep{position:absolute;inset:0;z-index:5;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.1) 50%,transparent 60%);transform:translateX(-100%);animation:sw 2.2s .6s ease-in-out forwards;pointer-events:none}
@keyframes sw{to{transform:translateX(100%)}}
body.loading{overflow:hidden}

@media (max-width:980px){
 .links{display:none}.burger{display:block}.cta-wrap{display:none}
 .fgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
 :root{--nav:64px}
 .fgrid{grid-template-columns:1fr}
 .lg-name{font-size:26px}
 .fab a{width:48px;height:48px}
 .ribbon{font-size:11.5px}
}
@media (prefers-reduced-motion:reduce){
 *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
 [data-r],.ch{opacity:1!important;transform:none!important;filter:none!important}
}
.nav .lm{filter:brightness(0) invert(1)}
body.light .nav .lm{filter:none}
body.light{--navc:#33406f;--navh:#0b1550;--navpill:rgba(11,21,80,.07);--brandc:#0b1550;--brandc2:#4a6fc7;--navbg:rgba(244,246,255,.82)}
body.light .burger{background:rgba(11,21,80,.05);border-color:rgba(11,21,80,.15)}
body.light .burger i{background:#0b1550}
html,body{overflow-x:clip}
