/* ================================================================
   LOYALTY INFOWAY — Master Stylesheet v4.0
   Aesthetic: Vibrant Deep-Navy Futurism · Electric Gradients
   Fonts: Space Grotesk (display) → NO. Using Clash Display + Satoshi feel
   Actually using: Exo 2 (tech display) + Nunito Sans (body)
================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&family=Nunito+Sans:wght@300;400;500;600;700&display=swap');

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;overflow-x:hidden}
body{font-family:'Nunito Sans',sans-serif;background:#080e28;color:#b0c4de;line-height:1.75;overflow-x:hidden;-webkit-font-smoothing:antialiased;min-height:100vh}
img,video{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul,ol{list-style:none}
button{font-family:'Nunito Sans',sans-serif;cursor:pointer;border:none;background:none}
address{font-style:normal}
input,select,textarea{font-family:'Nunito Sans',sans-serif}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:#080e28}
::-webkit-scrollbar-thumb{background:linear-gradient(#3b82f6,#06b6d4);border-radius:3px}

/* ── SELECTION ── */
::selection{background:rgba(59,130,246,0.35);color:#fff}

/* ── VARIABLES ── */
:root{
  --bg:#080e28;
  --bg2:#0c1334;
  --bg3:#0f183e;
  --bgcard:rgba(13,19,52,0.8);
  --blue:#3b82f6;
  --cyan:#06b6d4;
  --violet:#7c3aed;
  --emerald:#10b981;
  --amber:#f59e0b;
  --pink:#ec4899;
  --white:#fff;
  --text:#b0c4de;
  --textm:#5a7a9e;
  --border:rgba(255,255,255,0.07);
  --borderglow:rgba(59,130,246,0.3);
  --grad:linear-gradient(135deg,#3b82f6 0%,#06b6d4 100%);
  --gradwarm:linear-gradient(135deg,#7c3aed 0%,#ec4899 100%);
  --gradglow:linear-gradient(135deg,#10b981 0%,#3b82f6 100%);
  --gradhero:linear-gradient(145deg,#1e3a8a 0%,#1e40af 30%,#0e7490 70%,#065f46 100%);
  --ease:cubic-bezier(0.4,0,0.2,1);
  --t:0.3s var(--ease);
  --shadow:0 8px 48px rgba(0,0,0,0.6),0 1px 0 rgba(255,255,255,0.05) inset;
  --r:18px;
  --rl:28px;
}

/* ── SITE BACKGROUND — vibrant, NOT plain black ── */
body::before{
  content:'';
  position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(ellipse 90% 70% at 15% 10%, rgba(29,78,216,0.35) 0%, transparent 55%),
    radial-gradient(ellipse 70% 60% at 85% 80%, rgba(124,58,237,0.25) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 70% 5%,  rgba(6,182,212,0.2)  0%, transparent 50%),
    radial-gradient(ellipse 50% 60% at 5%  85%, rgba(16,185,129,0.15) 0%, transparent 50%),
    radial-gradient(ellipse 80% 80% at 50% 50%, rgba(15,23,62,0.8)   0%, transparent 80%),
    #080e28;
}
/* Animated grid overlay — gives futuristic feel */
body::after{
  content:'';
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(59,130,246,0.06) 1px, transparent 1px),
    linear-gradient(90deg,rgba(59,130,246,0.06) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:
    radial-gradient(ellipse 80% 80% at 50% 30%, rgba(0,0,0,0.8) 0%, transparent 70%);
}

/* Noise grain texture */
.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0.03;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── TYPOGRAPHY ── */
h1{font-family:'Exo 2',sans-serif;font-size:clamp(2.8rem,6vw,5.4rem);font-weight:800;line-height:1.08;color:#fff;letter-spacing:-0.02em}
h2{font-family:'Exo 2',sans-serif;font-size:clamp(2rem,4vw,3.4rem);font-weight:700;line-height:1.12;color:#fff;letter-spacing:-0.02em}
h3{font-family:'Exo 2',sans-serif;font-size:1.25rem;font-weight:700;color:#fff;line-height:1.3}
h4{font-family:'Exo 2',sans-serif;font-size:1rem;font-weight:700;color:#fff}
p{color:var(--text);font-weight:400}

.gtxt{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.gtwarm{background:var(--gradwarm);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.gtglow{background:var(--gradglow);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ── LAYOUT ── */
.container{max-width:1260px;margin:0 auto;padding:0 28px}
.section{padding:120px 0;position:relative}
.section--alt{background:rgba(9,14,38,0.5)}

/* ── LABEL ── */
.lbl{
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 18px;border-radius:50px;
  background:rgba(59,130,246,0.1);
  border:1px solid rgba(59,130,246,0.28);
  color:var(--cyan);font-size:0.72rem;font-weight:700;
  letter-spacing:0.1em;text-transform:uppercase;margin-bottom:22px;
}
.lbl::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 6px var(--cyan);animation:lblblink 2s ease infinite}
@keyframes lblblink{0%,100%{opacity:1}50%{opacity:0.2}}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 32px;border-radius:50px;font-family:'Exo 2',sans-serif;font-weight:600;font-size:0.95rem;transition:var(--t);cursor:pointer;border:none;white-space:nowrap}
.btn svg{transition:transform 0.2s}
.btn:hover svg{transform:translateX(3px)}
.btn-p{background:var(--grad);color:#fff;box-shadow:0 4px 24px rgba(59,130,246,0.4)}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 8px 40px rgba(59,130,246,0.55)}
.btn-s{background:rgba(255,255,255,0.06);border:1.5px solid rgba(255,255,255,0.1);color:#fff;backdrop-filter:blur(10px)}
.btn-s:hover{border-color:rgba(59,130,246,0.5);transform:translateY(-2px)}
.btn-o{background:transparent;border:1.5px solid rgba(59,130,246,0.4);color:var(--cyan)}
.btn-o:hover{background:rgba(59,130,246,0.1);transform:translateY(-2px)}
.btn-w{background:#fff;color:#080e28;font-weight:700}
.btn-w:hover{transform:translateY(-2px);box-shadow:0 8px 40px rgba(255,255,255,0.25)}
.btn-lg{padding:18px 44px;font-size:1.02rem}
.btn-sm{padding:10px 22px;font-size:0.82rem}

/* ── PRELOADER ── */
#pl{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;transition:opacity 0.8s,visibility 0.8s}
#pl.gone{opacity:0;visibility:hidden;pointer-events:none}
.pl-logo{animation:plpulse 1.6s ease infinite}
@keyframes plpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.pl-bar{width:220px;height:3px;background:rgba(255,255,255,0.07);border-radius:3px;overflow:hidden}
.pl-fill{height:100%;background:var(--grad);animation:plfill 2s ease forwards;border-radius:3px}
@keyframes plfill{from{width:0}to{width:100%}}
.pl-txt{font-family:'Exo 2',sans-serif;font-size:0.72rem;letter-spacing:0.18em;color:var(--textm);text-transform:uppercase}

/* ── CURSOR ── */
#cur{position:fixed;width:9px;height:9px;background:var(--cyan);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);box-shadow:0 0 10px var(--cyan)}
#curring{position:fixed;width:36px;height:36px;border:1.5px solid rgba(59,130,246,0.5);border-radius:50%;pointer-events:none;z-index:9997;transform:translate(-50%,-50%);transition:width 0.25s,height 0.25s,opacity 0.25s;opacity:0.5}
.cg #curring{width:56px;height:56px;opacity:0.2}

/* ── HEADER ── */
#hdr{position:fixed;top:0;left:0;right:0;z-index:200;transition:all 0.4s var(--ease)}
#hdr.sc{background:rgba(8,14,40,0.9);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid rgba(255,255,255,0.07);box-shadow:0 4px 60px rgba(0,0,0,0.5)}
.nav{max-width:1260px;margin:0 auto;padding:0 28px;height:78px;display:flex;align-items:center;gap:32px}
.navlogo{display:flex;align-items:center;gap:13px;font-family:'Exo 2',sans-serif;font-size:1.12rem;font-weight:700;color:#fff;flex-shrink:0;transition:opacity 0.2s}
.navlogo:hover{opacity:0.85}
.navlogo strong{font-weight:900}
.navlinks{display:flex;align-items:center;gap:2px;margin:0 auto}
.navlink{font-family:'Exo 2',sans-serif;font-size:0.88rem;font-weight:500;color:var(--textm);padding:8px 16px;border-radius:10px;transition:color 0.2s,background 0.2s;position:relative}
.navlink:hover,.navlink.on{color:#fff;background:rgba(255,255,255,0.06)}
.navlink.on::after{content:'';position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:5px;height:5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.navr{display:flex;align-items:center;gap:12px;flex-shrink:0}
.burger{display:none;flex-direction:column;gap:5px;padding:8px}
.burger span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:var(--t)}
.burger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
.mnav{display:none;position:fixed;inset:0;top:78px;z-index:199;background:rgba(8,14,40,0.98);backdrop-filter:blur(30px);flex-direction:column;padding:36px 28px 48px;gap:4px;border-top:1px solid var(--border)}
.mnav.open{display:flex}
.mlink{font-family:'Exo 2',sans-serif;font-size:1.6rem;font-weight:800;color:var(--textm);padding:14px 0;border-bottom:1px solid rgba(255,255,255,0.05);display:block;transition:color 0.2s}
.mlink:hover,.mlink.on{color:#fff}
.mnav .btn{margin-top:28px;width:100%;justify-content:center}

/* ── L LOGO MARK ── */
.logo-mark{width:44px;height:44px;flex-shrink:0}

/* ── HERO ── */
.hero{min-height:100vh;display:flex;align-items:center;padding:130px 0 80px;position:relative;overflow:hidden}
/* Animated floating orbs — core visual FX */
.orbs{position:absolute;inset:0;pointer-events:none;z-index:0}
.orb{position:absolute;border-radius:50%;filter:blur(70px);animation:orbdrift linear infinite}
.o1{width:650px;height:650px;background:radial-gradient(circle,rgba(29,78,216,0.5),transparent 65%);top:-15%;left:-10%;animation-duration:22s}
.o2{width:500px;height:500px;background:radial-gradient(circle,rgba(124,58,237,0.4),transparent 65%);bottom:-10%;right:-5%;animation-duration:28s;animation-direction:reverse}
.o3{width:380px;height:380px;background:radial-gradient(circle,rgba(6,182,212,0.35),transparent 65%);top:30%;right:18%;animation-duration:19s;animation-delay:-9s}
.o4{width:260px;height:260px;background:radial-gradient(circle,rgba(16,185,129,0.3),transparent 65%);bottom:25%;left:20%;animation-duration:24s;animation-delay:-14s}
.o5{width:200px;height:200px;background:radial-gradient(circle,rgba(245,158,11,0.2),transparent 65%);top:60%;right:40%;animation-duration:16s;animation-delay:-6s}
@keyframes orbdrift{0%{transform:translate(0,0) scale(1)}25%{transform:translate(40px,-30px) scale(1.05)}50%{transform:translate(-20px,50px) scale(0.95)}75%{transform:translate(60px,20px) scale(1.08)}100%{transform:translate(0,0) scale(1)}}

#hero-canvas{position:absolute;inset:0;z-index:0}

.hero-inner{max-width:1260px;margin:0 auto;padding:0 28px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;position:relative;z-index:1}
.hero-badge{display:inline-flex;align-items:center;gap:10px;padding:9px 20px;border-radius:50px;background:rgba(59,130,246,0.12);border:1px solid rgba(59,130,246,0.35);color:var(--cyan);font-size:0.8rem;font-weight:700;margin-bottom:28px;width:fit-content;backdrop-filter:blur(10px)}
.badgedot{width:8px;height:8px;border-radius:50%;background:var(--emerald);box-shadow:0 0 10px var(--emerald);animation:bdblink 2s ease infinite;flex-shrink:0}
@keyframes bdblink{0%,100%{opacity:1}50%{opacity:0.2}}
.hero h1{margin-bottom:24px}
.hero-p{font-size:1.1rem;margin-bottom:38px;max-width:520px;line-height:1.82}
.hero-ctas{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:52px}
.hstats{display:flex;gap:0;background:var(--bgcard);border:1px solid var(--border);border-radius:var(--r);backdrop-filter:blur(20px);overflow:hidden;box-shadow:var(--shadow)}
.hstat{padding:22px 26px;position:relative;flex:1}
.hstat+.hstat::before{content:'';position:absolute;left:0;top:20%;height:60%;width:1px;background:var(--border)}
.hstat-v{font-family:'Exo 2',sans-serif;font-size:1.9rem;font-weight:800;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}
.hstat-l{font-size:0.74rem;color:var(--textm);margin-top:5px}

/* Hero right — visual panel */
.hero-panel{position:relative;height:500px}
.hp-main{position:absolute;inset:0;background:var(--bgcard);border:1px solid var(--border);border-radius:var(--rl);backdrop-filter:blur(20px);box-shadow:var(--shadow),0 0 80px rgba(59,130,246,0.15);padding:28px;overflow:hidden}
.hp-glow{position:absolute;top:-100px;right:-100px;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(59,130,246,0.2),transparent 65%);pointer-events:none}
.hp-hdr{display:flex;align-items:center;gap:8px;margin-bottom:22px}
.hp-dot{width:10px;height:10px;border-radius:50%}
.hp-title{font-family:'Exo 2',sans-serif;font-size:0.78rem;font-weight:600;color:var(--textm);margin-left:auto}
.hp-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.hp-card{background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:14px;padding:16px;transition:border-color 0.3s}
.hp-card:hover{border-color:rgba(59,130,246,0.3)}
.hp-lbl{font-size:0.7rem;color:var(--textm);margin-bottom:7px}
.hp-val{font-family:'Exo 2',sans-serif;font-size:1.6rem;font-weight:800;color:#fff;line-height:1}
.hp-sub{font-size:0.68rem;color:var(--emerald);margin-top:4px}
.hp-chart{background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:14px;padding:16px;margin-bottom:14px}
.hp-clbl{font-size:0.7rem;color:var(--textm);margin-bottom:10px}
.hp-bars{display:flex;align-items:flex-end;gap:6px;height:56px}
.hp-bar{flex:1;border-radius:4px 4px 0 0;background:var(--grad);opacity:0.7;transition:opacity 0.2s}
.hp-bar:hover{opacity:1}
.hp-acts{display:flex;flex-direction:column;gap:7px}
.hp-act{display:flex;align-items:center;gap:9px;padding:8px 12px;background:rgba(255,255,255,0.03);border-radius:10px}
.hp-adot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.hp-atxt{font-size:0.72rem;color:var(--textm);flex:1}
.hp-atime{font-size:0.68rem;color:rgba(255,255,255,0.2)}

/* Floating status pills */
.fpill{position:absolute;display:flex;align-items:center;gap:9px;background:var(--bgcard);border:1px solid var(--border);border-radius:50px;padding:10px 18px;backdrop-filter:blur(16px);box-shadow:var(--shadow);font-family:'Exo 2',sans-serif;font-size:0.78rem;font-weight:600;color:#fff;animation:pilfloat ease-in-out infinite;z-index:10}
.fp1{top:-24px;left:-28px;animation-duration:5s}
.fp2{bottom:20px;right:-24px;animation-duration:6.5s;animation-delay:-2.5s}
.fpdot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
@keyframes pilfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.scrollhint{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0.35;z-index:1}
.scrollhint span{font-size:0.68rem;letter-spacing:0.12em;text-transform:uppercase;font-weight:600}
.scrollline{width:1px;height:50px;background:linear-gradient(to bottom,var(--cyan),transparent);animation:scrollanim 2s ease infinite}
@keyframes scrollanim{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ── MARQUEE ── */
.marq{overflow:hidden;padding:20px 0;background:linear-gradient(135deg,rgba(59,130,246,0.07),rgba(124,58,237,0.05));border-top:1px solid rgba(59,130,246,0.1);border-bottom:1px solid rgba(59,130,246,0.1);position:relative}
.marq::before,.marq::after{content:'';position:absolute;top:0;bottom:0;width:100px;z-index:1}
.marq::before{left:0;background:linear-gradient(to right,var(--bg),transparent)}
.marq::after{right:0;background:linear-gradient(to left,var(--bg),transparent)}
.marqtrack{display:inline-flex;align-items:center;gap:26px;animation:marqslide 50s linear infinite;white-space:nowrap;font-family:'Exo 2',sans-serif;font-size:0.84rem;font-weight:600;color:var(--textm);letter-spacing:0.02em}
.mdot{color:var(--cyan);font-size:0.5rem}
@keyframes marqslide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── SERVICE CARDS ── */
.svcgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.svcc{position:relative;overflow:hidden;background:var(--bgcard);border:1px solid var(--border);border-radius:22px;padding:36px 30px;backdrop-filter:blur(16px);transition:transform 0.35s var(--ease),border-color 0.35s,box-shadow 0.35s;cursor:default}
.svcc::before{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform 0.4s var(--ease);border-radius:0 0 22px 22px}
.svcc:hover::before{transform:scaleX(1)}
.svcc:hover{transform:translateY(-7px);border-color:rgba(59,130,246,0.35);box-shadow:var(--shadow),0 0 60px rgba(59,130,246,0.12)}
.svcc.ft{border-color:rgba(59,130,246,0.3);box-shadow:var(--shadow),0 0 40px rgba(59,130,246,0.1)}
.svcc.ft::before{transform:scaleX(1)}
.svcig{width:60px;height:60px;border-radius:16px;margin-bottom:24px;display:flex;align-items:center;justify-content:center;background:rgba(59,130,246,0.1);border:1px solid rgba(59,130,246,0.2);transition:background 0.3s}
.svcc:hover .svcig{background:rgba(59,130,246,0.2)}
.svcc h3{margin-bottom:12px;font-size:1.15rem}
.svcc>p{font-size:0.87rem;margin-bottom:18px;line-height:1.72}
.svctags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:22px}
.svctag{padding:4px 12px;background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:20px;font-size:0.72rem;color:var(--textm)}
.svclink{display:inline-flex;align-items:center;gap:6px;color:var(--cyan);font-size:0.84rem;font-weight:600;transition:gap 0.2s}
.svclink:hover{gap:10px}

/* ── WHY US ── */
.whlayout{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.whitems{display:flex;flex-direction:column;gap:22px;margin-bottom:32px}
.whitem{display:flex;gap:18px;align-items:flex-start}
.whnum{font-family:'Exo 2',sans-serif;font-size:0.7rem;font-weight:800;color:var(--cyan);background:rgba(59,130,246,0.1);border:1px solid rgba(59,130,246,0.25);border-radius:8px;padding:5px 10px;flex-shrink:0;margin-top:2px}
.whitem h4{margin-bottom:5px;font-size:1rem}
.whitem p{font-size:0.85rem}
.whvis{background:var(--bgcard);border:1px solid var(--border);border-radius:var(--rl);padding:36px;backdrop-filter:blur(16px);box-shadow:var(--shadow);position:relative;overflow:hidden}
.whvis-mesh{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(59,130,246,0.18),transparent 65%);pointer-events:none}
.whvis-ttl{font-family:'Exo 2',sans-serif;font-size:0.72rem;font-weight:700;color:var(--textm);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:22px;position:relative;z-index:1}
.techcloud{display:flex;flex-wrap:wrap;gap:10px;position:relative;z-index:1}
.tpill{padding:9px 18px;border-radius:50px;font-size:0.8rem;font-weight:600;background:rgba(255,255,255,0.04);border:1px solid var(--border);color:var(--text);transition:var(--t);animation:tpop 3.5s ease-in-out infinite;animation-delay:var(--d,0s);cursor:default}
.tpill:hover{background:rgba(59,130,246,0.15);border-color:rgba(59,130,246,0.4);color:#fff;transform:scale(1.06)}
@keyframes tpop{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ── WORK ENVIRONMENT ── */
.envgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.envc{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--border);min-height:260px;display:flex;align-items:flex-end;transition:transform 0.35s var(--ease),border-color 0.35s;cursor:default}
.envc:hover{transform:translateY(-5px);border-color:rgba(59,130,246,0.3)}
.envc:first-child{grid-column:span 2;min-height:360px}
.envc-img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 0.6s var(--ease)}
.envc:hover .envc-img{transform:scale(1.04)}
.envc-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,14,40,0.95) 0%,rgba(8,14,40,0.4) 50%,rgba(8,14,40,0.1) 100%)}
/* vibrant color tint on hover */
.envc:hover .envc-ov{background:linear-gradient(to top,rgba(8,14,40,0.9) 0%,rgba(29,78,216,0.2) 50%,transparent 100%)}
.envc-content{position:relative;z-index:1;padding:28px 30px}
.envc-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:20px;font-size:0.7rem;font-weight:700;margin-bottom:10px}
.envc h3{color:#fff;font-size:1.1rem;margin-bottom:6px}
.envc p{font-size:0.82rem;max-width:440px}

/* ── PROCESS ── */
.procgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.procc{background:var(--bgcard);border:1px solid var(--border);padding:40px 30px;position:relative;overflow:hidden;transition:border-color 0.3s,transform 0.3s;backdrop-filter:blur(12px)}
.procc:first-child{border-radius:22px 0 0 22px}
.procc:last-child{border-radius:0 22px 22px 0}
.procc::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad);transform:scaleX(0);transition:transform 0.4s}
.procc:hover::before{transform:scaleX(1)}
.procc:hover{border-color:rgba(59,130,246,0.25);transform:translateY(-4px)}
.procn{font-family:'Exo 2',sans-serif;font-size:3.5rem;font-weight:900;line-height:1;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:20px;opacity:0.5}
.procc h3{font-size:1.02rem;margin-bottom:10px}
.procc p{font-size:0.83rem}

/* ── TESTIMONIALS ── */
.testigrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.testic{background:var(--bgcard);border:1px solid var(--border);border-radius:22px;padding:34px 30px;backdrop-filter:blur(16px);transition:border-color 0.3s,transform 0.3s,box-shadow 0.3s;position:relative;overflow:hidden}
.testic::after{content:'"';position:absolute;top:12px;right:22px;font-size:6rem;font-family:Georgia,serif;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;opacity:0.12;pointer-events:none}
.testic:hover{border-color:rgba(59,130,246,0.28);transform:translateY(-5px);box-shadow:var(--shadow),0 0 50px rgba(59,130,246,0.1)}
.tistars{font-size:0.9rem;letter-spacing:3px;color:#f59e0b;margin-bottom:16px}
.titxt{font-size:0.89rem;color:var(--text);line-height:1.75;margin-bottom:24px}
.tiauthor{display:flex;align-items:center;gap:14px}
.tiav{width:48px;height:48px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:'Exo 2',sans-serif;font-weight:800;font-size:0.8rem;color:#fff}
.tiname{font-family:'Exo 2',sans-serif;font-weight:700;font-size:0.9rem;color:#fff}
.tirole{font-size:0.74rem;color:var(--textm);margin-top:3px}

/* ── CTA BLOCK ── */
.ctabl{position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(59,130,246,0.12),rgba(124,58,237,0.1));border:1px solid rgba(59,130,246,0.22);border-radius:var(--rl);padding:88px 60px;text-align:center;backdrop-filter:blur(16px)}
.ctabl::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 20% 20%,rgba(59,130,246,0.15),transparent 60%),radial-gradient(ellipse 60% 50% at 80% 80%,rgba(124,58,237,0.12),transparent 60%);pointer-events:none;border-radius:var(--rl)}
.ctatag{position:relative;z-index:1;font-size:0.75rem;font-weight:700;color:var(--cyan);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:18px}
.ctabl h2{position:relative;z-index:1;margin-bottom:18px}
.ctabl>p{position:relative;z-index:1;font-size:1.05rem;max-width:520px;margin:0 auto 38px}
.ctabtns{position:relative;z-index:1;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ── FOOTER ── */
.footer{background:rgba(5,8,20,0.95);border-top:1px solid var(--border);padding:88px 0 0;position:relative}
.footer::before{content:'';position:absolute;top:0;left:0;right:0;height:300px;background:linear-gradient(to bottom,rgba(59,130,246,0.06),transparent);pointer-events:none}
.ftgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:60px;margin-bottom:64px}
.ftbrand p{font-size:0.86rem;margin-top:18px;max-width:295px;line-height:1.8}
.ftsocials{display:flex;gap:10px;margin-top:24px}
.ftsoc{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,0.04);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--textm);transition:var(--t)}
.ftsoc:hover{background:rgba(59,130,246,0.15);border-color:rgba(59,130,246,0.4);color:var(--cyan)}
.ftcol h4{font-family:'Exo 2',sans-serif;font-size:0.9rem;font-weight:700;color:#fff;margin-bottom:20px}
.ftcol ul{display:flex;flex-direction:column;gap:10px}
.ftcol ul a{font-size:0.85rem;color:var(--textm);transition:color 0.2s}
.ftcol ul a:hover{color:var(--cyan)}
.ftcol address{display:flex;flex-direction:column;gap:10px}
.ftcol address p,.ftcol address a{font-size:0.85rem;color:var(--textm);line-height:1.7;transition:color 0.2s}
.ftcol address a:hover{color:var(--cyan)}
.ftbottom{border-top:1px solid var(--border);padding:26px 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.ftbottom p{font-size:0.8rem}
.ftblinks{display:flex;gap:20px}
.ftblinks a{font-size:0.8rem;color:var(--textm);transition:color 0.2s}
.ftblinks a:hover{color:var(--cyan)}

/* ── PAGE HERO ── */
.phero{padding:180px 0 90px;text-align:center;position:relative;overflow:hidden}
.phero-bg{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 80% 60% at 50% -5%,rgba(59,130,246,0.22),transparent 60%)}
.phero p{font-size:1.1rem;max-width:620px;margin:0 auto;line-height:1.82}
.breadc{display:flex;align-items:center;gap:8px;justify-content:center;margin-bottom:22px}
.breadc a{font-size:0.78rem;color:var(--textm);transition:color 0.2s}
.breadc a:hover{color:var(--cyan)}
.breadc span,.breadsep{font-size:0.78rem;color:var(--textm)}

/* ── SERVICES DETAIL ── */
.svcd{padding:100px 0;border-bottom:1px solid rgba(255,255,255,0.05)}
.svcd:last-of-type{border-bottom:none}
.svcdgrid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.svcdgrid.fl{direction:rtl}
.svcdgrid.fl>*{direction:ltr}
.svcd-content p{margin:18px 0 26px}
.featlist{display:flex;flex-direction:column;gap:10px;margin-bottom:32px}
.featlist li{display:flex;align-items:center;gap:12px;font-size:0.9rem;color:var(--text)}
.featlist li::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--grad);flex-shrink:0}
.svcvis{background:var(--bgcard);border:1px solid var(--border);border-radius:var(--rl);min-height:360px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:48px;position:relative;overflow:hidden;backdrop-filter:blur(16px);box-shadow:var(--shadow)}
.svcvis-mesh{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(59,130,246,0.08),transparent 70%)}
.svcvis-icon{font-size:5rem;position:relative;z-index:1}
.svcstack{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;position:relative;z-index:1}
.svcstack span{padding:5px 14px;border-radius:20px;background:rgba(59,130,246,0.1);border:1px solid rgba(59,130,246,0.22);color:var(--cyan);font-size:0.74rem;font-weight:600}

/* ── ABOUT ── */
.storygrid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.statnums{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.statcard{background:var(--bgcard);border:1px solid var(--border);border-radius:18px;padding:28px 24px;text-align:center;backdrop-filter:blur(12px);transition:border-color 0.3s}
.statcard:hover{border-color:rgba(59,130,246,0.3)}
.statval{font-family:'Exo 2',sans-serif;font-size:2.4rem;font-weight:800;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}
.statlbl{font-size:0.8rem;margin-top:6px}
.valsgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.valc{background:var(--bgcard);border:1px solid var(--border);border-radius:20px;padding:32px 28px;transition:border-color 0.3s,transform 0.3s;backdrop-filter:blur(12px)}
.valc:hover{border-color:rgba(59,130,246,0.25);transform:translateY(-4px)}
.valicon{font-size:2.2rem;margin-bottom:16px}
.valc h3{margin-bottom:10px;font-size:1.02rem}
.valc p{font-size:0.84rem}
.teamgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.teamc{background:var(--bgcard);border:1px solid var(--border);border-radius:20px;overflow:hidden;transition:border-color 0.3s,transform 0.3s}
.teamc:hover{border-color:rgba(59,130,246,0.25);transform:translateY(-4px)}
.teamav{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-family:'Exo 2',sans-serif;font-size:2.4rem;font-weight:800;position:relative}
.teamav-initials{position:relative;z-index:1;color:#fff}
.teaminfo{padding:20px}
.teaminfo h3{font-size:0.95rem;margin-bottom:5px}
.teaminfo p{font-size:0.78rem}

/* ── PORTFOLIO ── */
.portfilts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:50px}
.pfb{padding:10px 24px;border-radius:50px;font-family:'Exo 2',sans-serif;font-size:0.82rem;font-weight:600;background:rgba(255,255,255,0.04);border:1px solid var(--border);color:var(--textm);cursor:pointer;transition:var(--t)}
.pfb:hover,.pfb.on{background:rgba(59,130,246,0.12);border-color:rgba(59,130,246,0.4);color:var(--cyan)}
.portgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.portc{background:var(--bgcard);border:1px solid var(--border);border-radius:22px;overflow:hidden;transition:border-color 0.35s,transform 0.35s;backdrop-filter:blur(12px)}
.portc:hover{border-color:rgba(59,130,246,0.3);transform:translateY(-5px)}
.portc.s2{grid-column:span 2}
.portc.hid{display:none}
.portthumb{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;font-size:4rem;position:relative;overflow:hidden}
.portfeat{position:absolute;top:14px;left:14px;background:var(--grad);padding:5px 14px;border-radius:20px;font-size:0.7rem;font-weight:700;color:#fff;z-index:2;font-family:'Exo 2',sans-serif}
.portinfo{padding:26px 24px}
.portcats{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.portcat{padding:4px 11px;border-radius:20px;background:rgba(59,130,246,0.1);border:1px solid rgba(59,130,246,0.2);color:var(--cyan);font-size:0.7rem;font-weight:600}
.portinfo h3{margin-bottom:8px;font-size:1.05rem}
.portinfo p{font-size:0.84rem;margin-bottom:14px}
.portres{display:inline-flex;align-items:center;gap:7px;background:rgba(16,185,129,0.08);border:1px solid rgba(16,185,129,0.2);color:var(--emerald);padding:6px 14px;border-radius:8px;font-size:0.77rem;font-weight:600}

/* ── BLOG ── */
.blogfeat{display:grid;grid-template-columns:1.5fr 1fr;gap:22px;margin-bottom:28px}
.bloggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.blogc{background:var(--bgcard);border:1px solid var(--border);border-radius:22px;overflow:hidden;transition:border-color 0.35s,transform 0.35s;backdrop-filter:blur(12px)}
.blogc:hover{border-color:rgba(59,130,246,0.25);transform:translateY(-4px)}
.blogc.feat{display:grid;grid-template-columns:1fr 1fr}
.blogthumb{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;font-size:3.5rem;position:relative;overflow:hidden}
.blogthumb.lg{aspect-ratio:4/3}
.blogcont{padding:24px 22px}
.blogmeta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.blogcat{padding:4px 11px;border-radius:20px;background:rgba(59,130,246,0.1);border:1px solid rgba(59,130,246,0.2);color:var(--cyan);font-size:0.7rem;font-weight:600}
.blogdate,.blogread{font-size:0.74rem;color:var(--textm)}
.blogc h3{color:#fff;font-size:1rem;line-height:1.4;margin-bottom:10px}
.blogc.feat h3{font-size:1.22rem}
.blogc p{font-size:0.84rem;margin-bottom:16px}
.bloglink{display:inline-flex;align-items:center;gap:5px;color:var(--cyan);font-size:0.82rem;font-weight:600;transition:gap 0.2s}
.bloglink:hover{gap:9px}
.blogauthor{display:flex;align-items:center;gap:10px;margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}
.bav{width:34px;height:34px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:'Exo 2',sans-serif;font-weight:800;font-size:0.7rem;color:#fff}
.bname{font-size:0.82rem;color:#fff;font-weight:600}
.brole{font-size:0.73rem;color:var(--textm)}

/* ── CONTACT ── */
.contlayout{display:grid;grid-template-columns:1fr 1.6fr;gap:64px;align-items:start}
.cdet{display:flex;gap:16px;align-items:flex-start;margin-bottom:28px}
.cico{width:50px;height:50px;flex-shrink:0;border-radius:14px;background:rgba(59,130,246,0.1);border:1px solid rgba(59,130,246,0.2);display:flex;align-items:center;justify-content:center;color:var(--cyan)}
.cdet h4{margin-bottom:5px;font-size:0.9rem}
.cdet a{font-size:0.86rem;color:var(--textm);transition:color 0.2s;display:block}
.cdet a:hover{color:var(--cyan)}
.cdet p{font-size:0.86rem}
.cnote{padding:22px 24px;background:rgba(59,130,246,0.06);border:1px solid rgba(59,130,246,0.15);border-radius:16px;margin-top:12px}
.cnote h4{margin-bottom:6px;font-size:0.9rem}
.cnote p{font-size:0.83rem}
.cformbox{background:var(--bgcard);border:1px solid var(--border);border-radius:var(--rl);padding:48px 44px;backdrop-filter:blur(16px);box-shadow:var(--shadow)}
.cformbox h2{margin-bottom:8px;font-size:1.9rem}
.cformbox>p{margin-bottom:32px;font-size:0.9rem}
.frow2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fg{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.fg label{font-size:0.82rem;font-weight:600;color:var(--textm)}
.fg input,.fg select,.fg textarea{width:100%;background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:12px;padding:14px 18px;color:#fff;font-family:'Nunito Sans',sans-serif;font-size:0.9rem;outline:none;transition:border-color 0.2s,background 0.2s}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:rgba(59,130,246,0.5);background:rgba(59,130,246,0.04)}
.fg input::placeholder,.fg textarea::placeholder{color:rgba(255,255,255,0.2)}
.fg select{appearance:none;cursor:pointer}
.fg select option{background:#0c1334;color:#fff}
.fg textarea{resize:vertical;min-height:120px}
.fsubmit .btn{width:100%;justify-content:center;margin-top:8px}
.fsuccess{display:none;text-align:center;padding:40px}
.fsuccess .fsico{font-size:3rem;margin-bottom:14px}
.fsuccess h3{color:#fff;margin-bottom:8px}
.mapwrap{border-radius:20px;overflow:hidden;border:1px solid var(--border);height:420px}
.mapwrap iframe{width:100%;height:100%;display:block;border:none}

/* ── LEGAL ── */
.legalwrap{max-width:820px;margin:0 auto;padding-bottom:100px}
.legalup{background:rgba(59,130,246,0.07);border:1px solid rgba(59,130,246,0.15);border-radius:10px;padding:12px 20px;margin-bottom:36px;font-size:0.82rem;color:var(--textm)}
.legalwrap h2{color:#fff;font-size:1.4rem;margin:44px 0 14px;padding-left:18px;border-left:3px solid var(--blue)}
.legalwrap h3{color:var(--text);font-size:1.05rem;margin:26px 0 10px}
.legalwrap p{font-size:0.93rem;margin-bottom:14px;line-height:1.82}
.legalwrap ul{display:flex;flex-direction:column;gap:8px;margin:14px 0 20px 20px}
.legalwrap ul li{font-size:0.93rem;color:var(--textm);list-style:disc}
.legalwrap a{color:var(--cyan)}

/* ── NEWSLETTER ── */
.nlform{display:flex;gap:12px;max-width:460px;margin:0 auto}
.nlform input{flex:1;background:rgba(255,255,255,0.05);border:1px solid var(--border);border-radius:50px;padding:14px 22px;color:#fff;font-family:'Nunito Sans',sans-serif;font-size:0.9rem;outline:none;transition:border-color 0.2s}
.nlform input:focus{border-color:rgba(59,130,246,0.4)}
.nlform input::placeholder{color:rgba(255,255,255,0.2)}
.nlnote{font-size:0.75rem;margin-top:10px;text-align:center}

/* ── REVEAL ── */
.rev{opacity:0;transform:translateY(30px);transition:opacity 0.75s var(--ease),transform 0.75s var(--ease)}
.rev.up{opacity:1;transform:translateY(0)}
[data-d="1"]{transition-delay:0.1s}[data-d="2"]{transition-delay:0.2s}[data-d="3"]{transition-delay:0.3s}[data-d="4"]{transition-delay:0.4s}[data-d="5"]{transition-delay:0.5s}[data-d="6"]{transition-delay:0.6s}[data-d="7"]{transition-delay:0.7s}

/* ── RESPONSIVE ── */
@media(max-width:1100px){
  .hero-inner{grid-template-columns:1fr}.hero-panel{display:none}
  .svcgrid{grid-template-columns:repeat(2,1fr)}.whlayout{grid-template-columns:1fr}.whvis{display:none}
  .testigrid{grid-template-columns:1fr 1fr}.ftgrid{grid-template-columns:1fr 1fr;gap:40px}
  .envgrid{grid-template-columns:1fr}.envc:first-child{grid-column:span 1}
  .storygrid{grid-template-columns:1fr}.teamgrid{grid-template-columns:repeat(2,1fr)}
  .svcdgrid{grid-template-columns:1fr}.svcdgrid.fl{direction:ltr}
  .portgrid{grid-template-columns:1fr 1fr}.portc.s2{grid-column:span 1}
  .blogfeat{grid-template-columns:1fr}.blogc.feat{grid-template-columns:1fr}
  .contlayout{grid-template-columns:1fr}.procgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .navlinks,.navr .btn{display:none}.burger{display:flex}
  .hero{padding:110px 0 60px}.hstats{flex-direction:column}
  .hstat+.hstat::before{width:80%;height:1px;left:10%;top:0}
  .svcgrid{grid-template-columns:1fr}.testigrid{grid-template-columns:1fr}
  .valsgrid{grid-template-columns:1fr}.procgrid{grid-template-columns:1fr}
  .ftgrid{grid-template-columns:1fr;gap:32px}.ftbottom{flex-direction:column;text-align:center}
  .bloggrid{grid-template-columns:1fr}.portgrid{grid-template-columns:1fr}
  .ctabl{padding:48px 24px}.cformbox{padding:28px 22px}.frow2{grid-template-columns:1fr}
  .teamgrid{grid-template-columns:1fr 1fr}.statnums{grid-template-columns:1fr 1fr}
  .procc:first-child,.procc:last-child{border-radius:0}.procgrid{gap:0}
  .procc:first-child{border-radius:22px 22px 0 0}.procc:last-child{border-radius:0 0 22px 22px}
}