:root{
  --r:#ff1744;        /* laser red */
  --g:#00ff6a;        /* laser green */
  --b:#1e63ff;        /* laser blue */
  --m:#ff00d4;        /* magenta accent */
  --c:red;        /* cyan accent */
  --bg:#04050a;
  --bg-2:#080912;
  --ink:#e9ecff;
  --dim:#8a8fb0;
  --line:rgba(255,255,255,.08);
  --grid:rgba(0,240,255,.05);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{background:var(--bg);color:var(--ink);font-family:'Inter',sans-serif;overflow-x:hidden;scroll-behavior:smooth}
body{
  background:
    radial-gradient(ellipse at top, rgba(30,99,255,.08), transparent 50%),
    radial-gradient(ellipse at bottom, rgba(255,23,68,.06), transparent 50%),
    var(--bg);
}

/* ---------- GLOBAL GRID OVERLAY ---------- */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse at center, black 30%, transparent 80%);
  opacity:.6;
}
/* scanlines */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:2;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0px, rgba(255,255,255,.02) 1px, transparent 1px, transparent 3px);
  mix-blend-mode:overlay;
}

/* noise */
.noise{position:fixed;inset:0;pointer-events:none;z-index:3;opacity:.04;mix-blend-mode:overlay}
.noise svg{width:100%;height:100%}

/* ---------- CURSOR LIGHT ---------- */
.cursor-glow{
  position:fixed;width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle, rgb(248 0 0 / 27%), transparent 60%);
  pointer-events:none;z-index:4;transform:translate(-50%,-50%);
  transition:opacity .3s;mix-blend-mode:screen;
}

/* ---------- NAV ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:12px 40px;display:flex;justify-content:space-between;align-items:center;
  backdrop-filter:blur(20px);
  background:linear-gradient(180deg, rgba(4,5,10,.85), rgba(4,5,10,.4));
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:12px;font-family:'Sora',sans-serif;font-weight:700;letter-spacing:.15em;font-size:18px}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--g);box-shadow:0 0 12px var(--g),0 0 30px var(--g);animation:pulse 1.5s infinite}
.brand .l1{color:var(--r);text-shadow:0 0 10px rgba(255,23,68,.6)}
.brand .l2{color:var(--b);text-shadow:0 0 10px rgba(30,99,255,.6)}
@keyframes pulse{50%{opacity:.4;transform:scale(.85)}}

.nav-links{display:flex;gap:32px;list-style:none;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.15em;text-transform:uppercase}
.nav-links a{color:var(--dim);text-decoration:none;position:relative;padding:6px 0;transition:color .3s}
.nav-links a::before{content:"";position:absolute;bottom:0;left:0;width:0;height:1px;background:red;transition:width .3s;box-shadow:0 0 8px red}
.nav-links a:hover{color:red}
.nav-links a:hover::before{width:100%}

.nav-cta{
  padding:10px 22px;border:1px solid var(--c);color:var(--c);
  font-family:'Sora',sans-serif;font-size:11px;letter-spacing:.2em;
  background:transparent;cursor:pointer;text-transform:uppercase;
  position:relative;overflow:hidden;transition:all .3s;
  clip-path:polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  text-decoration: none;
}
.nav-cta:hover{background:var(--c);color:var(--bg);box-shadow:0 0 30px var(--c)}

.mobile-toggle{display:none;background:transparent;border:none;color:var(--c);font-size:24px;cursor:pointer}

/* ---------- HERO ---------- */
.hero{
  position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;
  overflow:hidden;padding:120px 40px 80px;
}
#laser-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}

.hero-content{position:relative;z-index:5;text-align:center;max-width:1200px}

.tag{
  display:inline-flex;align-items:center;gap:10px;padding:8px 18px;
  border:1px solid rgba(0,240,255,.3);background:rgba(0,240,255,.05);
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.3em;
  color:var(--c);text-transform:uppercase;margin-bottom:32px;
  clip-path:polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.tag::before{content:"";width:6px;height:6px;background:var(--c);border-radius:50%;box-shadow:0 0 10px var(--c);animation:pulse 1.2s infinite}

h1.hero-title{
  font-family:'Sora',sans-serif;font-weight:700;
  font-size: 84px;line-height:.95;letter-spacing:-.02em;
  margin-bottom:24px;
}
.hero-title .line{display:block;position:relative}
.hero-title .glitch{
  position:relative;display:inline-block;
  /*background:linear-gradient(180deg, #fff 0%, #fff 50%, var(--c) 100%);*/
  /*-webkit-background-clip:text;*/
  /*background-clip:text;*/
  /*-webkit-text-fill-color:transparent;*/
}
/*.hero-title .glitch::before,*/
/*.hero-title .glitch::after{*/
/*  content:attr(data-text);position:absolute;left:0;top:0;width:100%;*/
/*  -webkit-text-fill-color:initial;*/
/*}*/
/*.hero-title .glitch::before{color:var(--r);transform:translate(-2px,0);clip-path:polygon(0 0,100% 0,100% 45%,0 45%);animation:glitch1 4s infinite}*/
/*.hero-title .glitch::after{color:var(--b);transform:translate(2px,0);clip-path:polygon(0 55%,100% 55%,100% 100%,0 100%);animation:glitch2 4s infinite}*/
@keyframes glitch1{0%,90%,100%{transform:translate(-2px,0)}92%{transform:translate(-8px,2px)}94%{transform:translate(-3px,-1px)}}
@keyframes glitch2{0%,90%,100%{transform:translate(2px,0)}92%{transform:translate(8px,-2px)}94%{transform:translate(3px,1px)}}

.hero-title .accent{color:var(--g);text-shadow:0 0 30px rgba(0,255,106,.6),0 0 60px rgba(0,255,106,.3);font-style:italic}

.hero-sub{font-size:clamp(16px,1.4vw,20px);color:var(--dim);max-width:680px;margin:0 auto 48px;line-height:1.6}
.hero-sub strong{color:var(--ink);font-weight:500}

.cta-row{display:flex;gap:20px;justify-content:center;flex-wrap:wrap}
.btn{
  padding:18px 36px;font-family:'Sora',sans-serif;font-weight:700;
  font-size:13px;letter-spacing:.25em;text-transform:uppercase;
  cursor:pointer;border:none;position:relative;overflow:hidden;text-decoration:none;
  display:inline-flex;align-items:center;gap:12px;transition:all .3s;
  clip-path:polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
.btn-primary{background:var(--g);color:var(--bg);box-shadow:0 0 0 rgba(0,255,106,0)}
.btn-primary:hover{background: red; color: #fff;transform:translateY(-2px)}
.btn-ghost{background:rgba(255,255,255,.04);color:var(--ink);border:1px solid rgba(255,255,255,.15)}
.btn-ghost:hover{background:rgba(0,240,255,.1);border-color:var(--c);color:var(--c)}

.hero-meta{
  position:absolute;left:40px;bottom:40px;z-index:5;
  font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--dim);
  letter-spacing:.15em;
}
.hero-meta .row{display:flex;align-items:center;gap:10px;margin:6px 0}
.hero-meta .row::before{content:"";width:20px;height:1px;background:var(--c)}

.hero-stats{
  position:absolute;right:40px;bottom:40px;z-index:5;text-align:right;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.15em;
}
.hero-stats .big{font-family:'Sora',sans-serif;font-size:36px;color:var(--g);font-weight:700;text-shadow:0 0 20px rgba(0,255,106,.5)}
.hero-stats .lbl{color:var(--dim);text-transform:uppercase}

/* ---------- SECTION SHARED ---------- */
section{position:relative;padding:140px 40px;z-index:5}
.container{max-width:1400px;margin:0 auto;position:relative}

.section-head{margin-bottom:80px; text-align: center;}
.section-num{
  font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--c);letter-spacing:.3em;
  text-transform:uppercase;display:flex;align-items:center;gap:14px;
}
.section-num::before{content:"";width:50px;height:1px;background:var(--c);box-shadow:0 0 8px var(--c)}

h2.section-title{
  font-family:'Sora',sans-serif;font-weight:700;
  font-size: 50px;line-height:1;letter-spacing:-.02em;
  text-transform:uppercase;
  margin-bottom: 15px;
}
/*h2.section-title .acc{color:var(--g);text-shadow:0 0 20px rgba(0,255,106,.5)}*/
/*h2.section-title .acc-r{color:var(--r);text-shadow:0 0 20px rgba(255,23,68,.5)}*/
/*h2.section-title .acc-b{color:var(--b);text-shadow:0 0 20px rgba(30,99,255,.5)}*/

.section-head p{color:var(--dim);font-size:16px;line-height:1.6;}

/* ---------- TICKER ---------- */
.ticker{
  background:linear-gradient(90deg, var(--r), var(--g), var(--b), var(--r));
  background-size:300% 100%;animation:ticker-bg 8s linear infinite;
  padding:18px 0;overflow:hidden;position:relative;
  border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);
}
@keyframes ticker-bg{to{background-position:300% 0}}
.ticker-track{display:flex;gap:60px;white-space:nowrap;animation:ticker-scroll 30s linear infinite;font-family:'Sora',sans-serif;font-weight:700;font-size:22px;letter-spacing:.2em;text-transform:uppercase;color:#000;mix-blend-mode:screen}
.ticker-track span{display:inline-flex;align-items:center;gap:60px}
.ticker-track span::after{content:"◆";color:#000}
@keyframes ticker-scroll{to{transform:translateX(-50%)}}

/* ---------- ABOUT ---------- */
.about-grid{
  display:grid;
  /* grid-template-columns:1.1fr 1fr; */
  grid-template-columns: 1fr;
  gap:80px;
  align-items:center
}
.about-text p{font-size:17px;line-height:1.8;color:#bbc0dd;margin-bottom:24px}
.about-text p.lead{font-size:22px;color:var(--ink);line-height:1.5}
.about-text p.lead span{color:var(--g)}

.about-visual{position:relative;aspect-ratio:1;border:1px solid var(--line);background:linear-gradient(135deg, rgba(0,240,255,.03), rgba(255,0,212,.03));overflow:hidden;clip-path:polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px)}
.about-visual::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--grid) 1px, transparent 1px),linear-gradient(90deg, var(--grid) 1px, transparent 1px);background-size:30px 30px}
.beam-stack{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;gap:8px;padding:30px}
.beam{width:6px;background:linear-gradient(180deg, transparent, var(--g));border-radius:3px 3px 0 0;box-shadow:0 0 20px var(--g);animation:beam-pulse 2s ease-in-out infinite}
.beam:nth-child(1){height:60%;animation-delay:0s;background:linear-gradient(180deg, transparent, var(--r));box-shadow:0 0 20px var(--r)}
.beam:nth-child(2){height:80%;animation-delay:.2s}
.beam:nth-child(3){height:100%;animation-delay:.4s}
.beam:nth-child(4){height:90%;animation-delay:.6s;background:linear-gradient(180deg, transparent, var(--b));box-shadow:0 0 20px var(--b)}
.beam:nth-child(5){height:70%;animation-delay:.8s;background:linear-gradient(180deg, transparent, var(--m));box-shadow:0 0 20px var(--m)}
.beam:nth-child(6){height:85%;animation-delay:1s;background:linear-gradient(180deg, transparent, var(--c));box-shadow:0 0 20px var(--c)}
.beam:nth-child(7){height:65%;animation-delay:1.2s}
@keyframes beam-pulse{50%{transform:scaleY(.6);opacity:.6}}

.about-mini-stats{position:absolute;bottom:30px;left:30px;right:30px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;background:rgba(4,5,10,.85);backdrop-filter:blur(10px);padding:20px;border:1px solid var(--line)}
.about-mini-stats div{text-align:center}
.about-mini-stats .n{font-family:'Sora',sans-serif;font-size:28px;font-weight:700;color:var(--c)}
.about-mini-stats .l{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.2em;color:var(--dim);text-transform:uppercase;margin-top:4px}

/* ---------- SERVICES ---------- */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.service-card{
  position:relative;padding:40px 32px;background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.005));
  border:1px solid var(--line);overflow:hidden;cursor:pointer;
  transition:transform .4s, border-color .4s;
  clip-path:polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
}
.service-card::before{
  content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(0,240,255,.15), transparent 40%);
  opacity:0;transition:opacity .4s;pointer-events:none;
}
.service-card:hover{transform:translateY(-6px);border-color:rgba(0,240,255,.4)}
.service-card:hover::before{opacity:1}
.service-card .icon{width:56px;height:56px;display:flex;align-items:center;justify-content:center;margin-bottom:24px;border:1px solid var(--line);position:relative}
.service-card .icon svg{width:28px;height:28px;stroke:var(--c);fill:none;stroke-width:1.5}
.service-card h3{font-family:'Sora',sans-serif;font-size:20px;font-weight:700;margin-bottom:14px;text-transform:uppercase;letter-spacing:.05em}
.service-card p{color:var(--dim);font-size:15px;line-height:1.6;margin-bottom:20px}
.service-card .num{position:absolute;top:24px;right:32px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--dim);letter-spacing:.2em}
.service-card .more{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--c);letter-spacing:.2em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.service-card .more::after{content:"→";transition:transform .3s}
.service-card:hover .more::after{transform:translateX(6px)}

.service-card.r .icon svg{stroke:var(--r)}
.service-card.r:hover{border-color:rgba(255,23,68,.4)}
.service-card.r::before{background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,23,68,.15), transparent 40%)}
.service-card.g .icon svg{stroke:var(--g)}
.service-card.g:hover{border-color:rgba(0,255,106,.4)}
.service-card.g::before{background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(0,255,106,.15), transparent 40%)}
.service-card.b .icon svg{stroke:var(--b)}
.service-card.b:hover{border-color:rgba(30,99,255,.4)}
.service-card.b::before{background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(30,99,255,.15), transparent 40%)}
.service-card.m .icon svg{stroke:var(--m)}
.service-card.m:hover{border-color:rgba(255,0,212,.4)}
.service-card.m::before{background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,0,212,.15), transparent 40%)}

/* ---------- WHY US ---------- */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line)}
.why-cell{padding:40px 32px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);position:relative}
.why-cell:nth-child(4n){border-right:none}
.why-cell:nth-last-child(-n+4){border-bottom:none}
.why-cell .num{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--c);letter-spacing:.2em;margin-bottom:18px}
.why-cell h4{font-family:'Sora',sans-serif;font-size:18px;text-transform:uppercase;margin-bottom:12px;font-weight:700}
.why-cell p{color:var(--dim);font-size:14px;line-height:1.6}
.why-cell::before{content:"";position:absolute;top:0;left:0;width:0;height:2px;background:var(--c);transition:width .5s}
.why-cell:hover::before{width:100%}
.why-cell:hover{background:rgba(0,240,255,.02)}

/* ---------- INDUSTRIES ---------- */
.industries{display:grid;grid-template-columns:repeat(8,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.industry{
  background:var(--bg);padding:32px 16px;text-align:center;cursor:pointer;transition:all .3s;
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.industry:hover{background:rgba(0,240,255,.04)}
.industry svg{width:36px;height:36px;stroke:var(--ink);fill:none;stroke-width:1.5;transition:all .3s}
.industry:hover svg{stroke:var(--c);filter:drop-shadow(0 0 8px var(--c))}
.industry span{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.15em;color:var(--dim);text-transform:uppercase}

/* ---------- PORTFOLIO ---------- */
.portfolio-filter{display:flex;gap:12px;margin-bottom:40px;flex-wrap:wrap}
.filter-btn{padding:10px 22px;background:transparent;border:1px solid var(--line);color:var(--dim);font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:all .2s}
.filter-btn.active,.filter-btn:hover{border-color:var(--c);color:var(--c);background:rgba(0,240,255,.05)}

.portfolio-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:200px;gap:16px}
.p-item{position:relative;overflow:hidden;cursor:pointer;clip-path:polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px)}
/* .p-item:nth-child(1){grid-column:span 6;grid-row:span 2}
.p-item:nth-child(2){grid-column:span 3}
.p-item:nth-child(3){grid-column:span 3}
.p-item:nth-child(4){grid-column:span 4}
.p-item:nth-child(5){grid-column:span 2}
.p-item:nth-child(6){grid-column:span 4;grid-row:span 2}
.p-item:nth-child(7){grid-column:span 4}
.p-item:nth-child(8){grid-column:span 4} */

.p-bg{position:absolute;inset:0;transition:transform .8s}
.p-item:hover .p-bg{transform:scale(1.08)}
.p-overlay{position:absolute;inset:0;background:linear-gradient(180deg, transparent 30%, rgba(4,5,10,.95));z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:24px}
.p-tag{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.25em;color:var(--c);text-transform:uppercase;margin-bottom:6px;opacity:0;transform:translateY(10px);transition:all .4s}
.p-title{font-family:'Sora',sans-serif;font-size:18px;font-weight:700;text-transform:uppercase;opacity:0;transform:translateY(10px);transition:all .4s .1s}
.p-item:hover .p-tag,.p-item:hover .p-title{opacity:1;transform:translateY(0)}
.p-corner{position:absolute;top:14px;right:14px;z-index:3;width:32px;height:32px;border:1px solid var(--c);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:14px;color:var(--c);opacity:0;transition:opacity .3s}
.p-item:hover .p-corner{opacity:1}

/* gradient backgrounds for portfolio items */
/* .bg1{background:linear-gradient(135deg, #0a0d2e, #2d0a3e),radial-gradient(circle at 30% 50%, rgba(0,255,106,.4), transparent 50%)}
.bg2{background:linear-gradient(135deg, #2d0a1a, #0a0a2e)}
.bg3{background:linear-gradient(135deg, #1a0a3e, #0a2d2e)}
.bg4{background:linear-gradient(135deg, #2e0a2d, #0a0d2e)}
.bg5{background:linear-gradient(135deg, #0a2d1a, #1a0a2d)}
.bg6{background:linear-gradient(135deg, #2d1a0a, #0a2d3e)}
.bg7{background:linear-gradient(135deg, #1a2d0a, #2d0a3e)}
.bg8{background:linear-gradient(135deg, #0a1a3e, #3e0a2d)} */

.p-laser{position:absolute;inset:0;opacity:.7;mix-blend-mode:screen}

/* ---------- COUNTER ---------- */
.counter-section{padding:100px 40px;background:linear-gradient(180deg, rgba(0,240,255,.03), transparent);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.counter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;text-align:center}
.counter-grid > div{position:relative}
.counter-grid > div:not(:last-child)::after{content:"";position:absolute;right:-20px;top:20%;height:60%;width:1px;background:var(--line)}
.cnum{font-family:'Sora',sans-serif;font-size:64px;font-weight:700;line-height:1;background:linear-gradient(180deg, #fff, var(--c));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 30px rgba(0,240,255,.3)}
.cnum.r{background:linear-gradient(180deg, #fff, var(--r));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cnum.g{background:linear-gradient(180deg, #fff, var(--g));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cnum.b{background:linear-gradient(180deg, #fff, var(--b));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cnum.m{background:linear-gradient(180deg, #fff, var(--m));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.clbl{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.3em;color:var(--dim);text-transform:uppercase;margin-top:14px}

/* ---------- PROCESS ---------- */
.process{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative}
.process::before{content:"";position:absolute;top:32px;left:5%;right:5%;height:1px;background:linear-gradient(90deg, transparent, var(--c), var(--c), transparent);box-shadow:0 0 10px var(--c)}
.p-step{padding:0 16px;text-align:center;position:relative}
.p-step .circle{width:64px;height:64px;border:1px solid var(--c);background:var(--bg);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Sora',sans-serif;font-weight:700;color:var(--c);margin:0 auto 24px;position:relative;z-index:2;box-shadow:0 0 20px rgba(0,240,255,.3)}
.p-step h5{font-family:'Sora',sans-serif;font-size:14px;text-transform:uppercase;margin-bottom:8px;letter-spacing:.05em}
.p-step p{color:var(--dim);font-size:13px;line-height:1.5}

/* ---------- CLIENTS ---------- */
.clients-marquee{overflow:hidden;padding:40px 0;position:relative;mask-image:linear-gradient(90deg, transparent, black 10%, black 90%, transparent)}
.clients-track{display:flex;gap:60px;animation:client-scroll 40s linear infinite;white-space:nowrap}
@keyframes client-scroll{to{transform:translateX(-50%)}}
.client-logo{flex-shrink:0;padding:24px 36px;border:1px solid var(--line);font-family:'Sora',sans-serif;font-weight:700;letter-spacing:.15em;color:var(--dim);text-transform:uppercase;font-size:16px;transition:all .3s;cursor:default}
.client-logo:hover{color:var(--c);border-color:var(--c);box-shadow:0 0 20px rgba(0,240,255,.2)}

/* ---------- TESTIMONIALS ---------- */
.test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.test-card{padding:36px;border:1px solid var(--line);background:linear-gradient(180deg, rgba(255,255,255,.02), transparent);position:relative;clip-path:polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px)}
.test-card .quote{font-size:60px;font-family:'Sora',sans-serif;color:var(--c);line-height:.5;opacity:.4;margin-bottom:20px}
.test-card p{font-size:16px;line-height:1.6;color:#cdd1f0;margin-bottom:28px}
.test-card .author{display:flex;align-items:center;gap:14px;padding-top:20px;border-top:1px solid var(--line)}
.test-card .avatar{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg, var(--c), var(--m));display:flex;align-items:center;justify-content:center;font-family:'Sora',sans-serif;font-weight:700;font-size:16px;color:var(--bg)}
.test-card .name{font-family:'Sora',sans-serif;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.05em}
.test-card .role{
  /* font-family:'JetBrains Mono',monospace; */
  font-size:11px;
  letter-spacing:.15em;
  color:var(--dim);
  /* text-transform:uppercase; */
  text-transform: capitalize;
  margin-top:2px
}

.avtar-text {
  width: 52%;
}
.test-card .stars{display:flex;gap:3px;margin-left:auto}
.test-card .stars span{color:var(--g);font-size:13px}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:60px}
.contact-info h3{font-family:'Sora',sans-serif;font-size:32px;font-weight:700;margin-bottom:24px;text-transform:uppercase;line-height:1.1}
.contact-info p{color:var(--dim);font-size:16px;line-height:1.7;margin-bottom:40px}
.contact-info .info-row{display:flex;gap:18px;margin-bottom:24px;align-items:flex-start;padding:18px;border:1px solid var(--line);transition:all .3s}
.contact-info .info-row:hover{border-color:var(--c);background:rgba(0,240,255,.02)}
.contact-info .info-row .ic{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:1px solid var(--c);flex-shrink:0;color:var(--c)}
.contact-info .info-row .lbl{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.25em;color:var(--dim);text-transform:uppercase;margin-bottom:4px}
.contact-info .info-row .val{font-family:'Sora',sans-serif;font-size:15px;letter-spacing:.05em}

.contact-form{padding:40px;background:linear-gradient(180deg, rgba(255,255,255,.02), transparent);border:1px solid var(--line);clip-path:polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.field{position:relative}
.field label{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.25em;color:var(--dim);text-transform:uppercase;margin-bottom:8px}
.field input,.field select,.field textarea{
  width:100%;padding:14px 16px;background:rgba(0,0,0,.4);border:1px solid var(--line);
  color:var(--ink);font-family:'Inter',sans-serif;font-size:15px;outline:none;transition:all .3s;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--c);box-shadow:0 0 0 3px rgba(0,240,255,.1)}
.field textarea{resize:vertical;min-height:120px;font-family:'Inter',sans-serif}
.field.full{grid-column:1/-1}
.form-submit{margin-top:24px}

/* ---------- CTA ---------- */
.big-cta{padding:120px 40px;text-align:center;position:relative;overflow:hidden}
.big-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at center, rgba(0,255,106,.08), transparent 50%);pointer-events:none}
.big-cta h2{font-family:'Sora',sans-serif;
  /* font-size:clamp(40px, 7vw, 100px); */
  font-size: 65px;
  font-weight:700;line-height:.95;text-transform:uppercase;margin-bottom:24px;letter-spacing:-.02em}
/*.big-cta h2 .acc{font-style:italic;color:var(--g);text-shadow:0 0 40px rgba(0,255,106,.5)}*/
.big-cta p{font-size:18px;color:var(--dim);max-width:600px;margin:0 auto 40px}

/* ---------- FOOTER ---------- */
footer{padding:80px 40px 40px;border-top:1px solid var(--line);background:linear-gradient(180deg, transparent, rgba(0,0,0,.5))}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:60px;max-width:1400px;margin:0 auto 60px}
.foot-brand .logo-wrap{display:flex;align-items:center;gap:12px;margin-bottom:20px;font-family:'Sora',sans-serif;font-weight:700;font-size:22px;letter-spacing:.15em}
.foot-brand p{color:var(--dim);font-size:14px;line-height:1.7;max-width:340px;margin-bottom:24px}
.social{display:flex;gap:10px}
.social a{width:42px;height:42px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--dim);text-decoration:none;transition:all .3s}
.social a svg{width:18px;height:18px}
.social a:hover{border-color:var(--c);color:var(--c);box-shadow:0 0 16px rgba(0,240,255,.3);transform:translateY(-2px)}
.foot-col h5{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.25em;color:var(--c);text-transform:uppercase;margin-bottom:20px}
.foot-col a{display:block;color:var(--dim);text-decoration:none;font-size:14px;padding:6px 0;transition:color .3s}
.foot-col a:hover{color:var(--ink)}
.foot-bottom{max-width:1400px;margin:0 auto;padding-top:30px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.15em;color:var(--dim);text-transform:uppercase}

/* ---------- REVEAL ANIMATION ---------- */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .9s, transform .9s}
.reveal.in{
  opacity:1;
  transform:none
}
.about-text {
  max-width: 950px;
  margin: 0 auto;
  text-align: center;
}

/* ---------- FLOATING ACTIONS (WHATSAPP + CALL) ---------- */
.float-actions{
  position:fixed;right:24px;bottom:24px;z-index:200;
  display:flex;flex-direction:column;gap:14px;
}
.float-btn{
  width:60px;height:60px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;color:#fff;position:relative;
  transition:transform .3s, box-shadow .3s;
  border:2px solid rgba(255,255,255,.12);
}
.float-btn svg{width:28px;height:28px;position:relative;z-index:2}
.float-btn::before{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  background:inherit;opacity:.4;animation:fa-pulse 2.4s ease-out infinite;z-index:1;
}
@keyframes fa-pulse{
  0%{transform:scale(1);opacity:.45}
  100%{transform:scale(1.6);opacity:0}
}
.float-btn:hover{transform:scale(1.08)}
.float-wa{background:#25D366;box-shadow:0 8px 30px rgba(37, 211, 102, .5);}
.float-wa:hover{background: red;box-shadow:0 8px 40px #ff00001a}
.float-call{background:#1e63ff;box-shadow:0 8px 30px rgba(30, 99, 255, .5);}
.float-call:hover{background: red;box-shadow:0 8px 40px #ff00001a}
.float-btn .tip{
  position:absolute;right:72px;top:50%;transform:translateY(-50%);
  background:#0a0c18;color:var(--ink);font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  padding:8px 14px;white-space:nowrap;border:1px solid var(--line);
  opacity:0;pointer-events:none;transition:opacity .3s, transform .3s;
  z-index:3;
  clip-path:polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.float-btn:hover .tip{opacity:1;transform:translateY(-50%) translateX(-4px)}
@media (max-width:720px){
  .float-actions{right:16px;bottom:16px;gap:12px}
  .float-btn{width:54px;height:54px}
  .float-btn svg{width:24px;height:24px}
  .float-btn .tip{display:none}
}


@media (max-width:1100px){
  .services-grid,.test-grid,.upcoming-grid{grid-template-columns:repeat(2,1fr)}
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .why-cell:nth-child(4n){border-right:1px solid var(--line)}
  .why-cell:nth-child(2n){border-right:none}
  .industries{grid-template-columns:repeat(4,1fr)}
  .process{grid-template-columns:repeat(5,1fr);gap:0}
  .counter-grid{grid-template-columns:repeat(2,1fr);gap:60px 20px}
  .counter-grid > div:nth-child(2)::after{display:none}
  .about-grid,.contact-grid,.deck{grid-template-columns:1fr;gap:40px}
  .deck{padding:30px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:40px}
}
@media (max-width:720px){
  nav{padding:14px 20px}
  .nav-links{display:none}
  .mobile-toggle{display:block}
  .nav-cta{display:none}
  section,.wow-section,.counter-section,.big-cta{padding:80px 20px}
  .hero{padding:120px 20px 60px}
  .section-head{grid-template-columns:1fr;gap:24px}
  .section-head p{justify-self:start}
  .services-grid,.test-grid,.upcoming-grid{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr}
  .why-cell{border-right:none!important}
  .industries{grid-template-columns:repeat(2,1fr)}
  .portfolio-grid{grid-template-columns:1fr;grid-auto-rows:240px}
  .p-item{grid-column:span 1!important;grid-row:span 1!important}
  .counter-grid{grid-template-columns:1fr;gap:60px}
  .counter-grid > div::after{display:none}
  .form-row{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr;gap:40px}
  .foot-bottom{flex-direction:column;gap:10px;text-align:center}
  .hero-meta,.hero-stats{display:none}
  .process{grid-template-columns:1fr 1fr;gap:30px 20px}
  .process::before{display:none}
}

/* ---------- SLIM FOOTER ---------- */
.foot-slim{grid-template-columns:2fr 1fr;gap:80px}
.foot-nav h5{
    /*font-family:'JetBrains Mono',monospace;*/
    /*font-size:11px;*/
    /*letter-spacing:.25em;*/
    /*color:var(--c);*/
    /*text-transform:*/
    /*uppercase;margin-bottom:20px;*/
    font-size: 17px;
    letter-spacing: .25em;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.foot-nav a{
  display:block;color:var(--dim);text-decoration:none;font-size:15px;padding:10px 0;
  border-bottom:1px solid var(--line);transition:color .3s, padding-left .3s;
  position:relative;font-family:'Sora',sans-serif;font-weight:500;
}
.foot-nav a:last-child{border-bottom:none}
.foot-nav a::before{content:"→";position:absolute;left:0;opacity:0;transition:all .3s;color:var(--c)}
.foot-nav a:hover{color:var(--ink);padding-left:24px}
.foot-nav a:hover::before{opacity:1}
@media (max-width:720px){.foot-slim{grid-template-columns:1fr;gap:40px}}

/* ---------- NAV ACTIVE STATE ---------- */
.nav-links a.active{color:red}
.nav-links a.active::before{width:100%}

/* ---------- PAGE HERO (sub-pages) ---------- */
.page-hero{
  position:relative;min-height:60vh;display:flex;align-items:center;justify-content:center;
  overflow:hidden;padding:160px 40px 100px;text-align:center;
}
.page-hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.page-hero-content{position:relative;z-index:5;max-width:1000px}
.page-hero .crumb{
  display:inline-flex;align-items:center;gap:10px;font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.3em;color:var(--c);text-transform:uppercase;margin-bottom:24px;
}
.page-hero .crumb a{color:var(--dim);text-decoration:none;transition:color .3s}
.page-hero .crumb a:hover{color:var(--c)}
.page-hero .crumb span{color:var(--line)}
.page-hero h1{
  font-family:'Sora',sans-serif;font-weight:700;
  font-size:55px;line-height:1;letter-spacing:-.02em;
  margin-bottom:20px;
}
/*.page-hero h1 .acc{color:var(--g);text-shadow:0 0 30px rgba(0,255,106,.5)}*/
/*.page-hero h1 .acc-r{color:var(--r);text-shadow:0 0 30px rgba(255,23,68,.5)}*/
/*.page-hero h1 .acc-b{color:var(--b);text-shadow:0 0 30px rgba(30,99,255,.5)}*/
.page-hero p.lead{font-size:clamp(16px,1.3vw,19px);color:var(--dim);max-width:680px;margin:0 auto;line-height:1.6}

/* ---------- PAGE CONTENT WRAP ---------- */
.page-body{padding:80px 40px 120px}
.page-body section{padding:60px 0}
@media (max-width:720px){.page-body{padding:60px 20px 80px}}

/* ---------- VALUES GRID (about page) ---------- */
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.value-card{padding:36px 28px;border:1px solid var(--line);background:linear-gradient(180deg, rgba(255,255,255,.02), transparent);clip-path:polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);transition:all .3s}
.value-card:hover{border-color:rgba(0,240,255,.4);transform:translateY(-4px)}
.value-card .vnum{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.25em;color:var(--c);margin-bottom:14px}
.value-card h3{font-family:'Sora',sans-serif;font-size:22px;font-weight:700;margin-bottom:12px}
.value-card p{color:var(--dim);font-size:15px;line-height:1.6}
@media (max-width:1000px){.values-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.values-grid{grid-template-columns:1fr}}

/* ---------- TEAM ROW ---------- */
.team-row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:40px}
.team-card{padding:30px;border:1px solid var(--line);text-align:center;clip-path:polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px)}
.team-card .ava{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg, var(--r), var(--b));margin:0 auto 18px;display:flex;align-items:center;justify-content:center;font-family:'Sora',sans-serif;font-weight:700;font-size:24px;color:#fff}
.team-card.g .ava{background:linear-gradient(135deg, var(--g), var(--c))}
.team-card.m .ava{background:linear-gradient(135deg, var(--m), var(--r))}
.team-card.b .ava{background:linear-gradient(135deg, var(--b), var(--g))}
.team-card h4{font-family:'Sora',sans-serif;font-weight:600;font-size:17px;margin-bottom:4px}
.team-card .role{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;color:var(--c);text-transform:uppercase;margin-bottom:14px}
.team-card p{color:var(--dim);font-size:13px;line-height:1.6}
@media (max-width:900px){.team-row{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.team-row{grid-template-columns:1fr}}

/* ---------- DETAIL SERVICE (services page) ---------- */
.svc-detail{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding:60px 0;border-bottom:1px solid var(--line)}
.svc-detail:last-of-type{border-bottom:none}
.svc-detail.flip > div:first-child{order:2}
.svc-detail h2{font-family:'Sora',sans-serif;font-weight:700;font-size:clamp(28px,3.5vw,44px);line-height:1.1;margin-bottom:16px}
.svc-detail .label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.25em;color:var(--c);text-transform:uppercase;margin-bottom:12px}
.svc-detail p{color:var(--dim);font-size:16px;line-height:1.7;margin-bottom:20px}
.svc-detail ul{list-style:none;padding:0;margin-bottom:24px}
.svc-detail ul li{padding:10px 0 10px 28px;border-bottom:1px solid var(--line);position:relative;color:#d0d5ee;font-size:15px}
.svc-detail ul li::before{content:"◆";position:absolute;left:0;color:var(--c);font-size:10px;top:14px}
.svc-visual{position:relative;aspect-ratio:4/3;border:1px solid var(--line);overflow:hidden;clip-path:polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px)}
.svc-visual svg{position:absolute;inset:0;width:100%;height:100%}
@media (max-width:900px){.svc-detail{grid-template-columns:1fr;gap:30px}.svc-detail.flip > div:first-child{order:0}}

/* ---------- PORTFOLIO PAGE FULL GRID ---------- */
.portfolio-full{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.portfolio-full .p-item{aspect-ratio:4/3}
@media (max-width:900px){.portfolio-full{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.portfolio-full{grid-template-columns:1fr}}

/* ---------- CONTACT PAGE EXTRAS ---------- */
.contact-map{
  margin-top:40px;height:300px;border:1px solid var(--line);position:relative;overflow:hidden;
  background:linear-gradient(135deg, #0a0d2e, #1a0a3e);
  clip-path:polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
}
.map-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(0,240,255,.15) 1px, transparent 1px),linear-gradient(90deg, rgba(0,240,255,.15) 1px, transparent 1px);background-size:40px 40px}
.map-pin{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}
.map-pin .ring{width:80px;height:80px;border:2px solid var(--c);border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);animation:ringp 2s infinite}
.map-pin .dot{width:18px;height:18px;background:var(--c);border-radius:50%;position:relative;z-index:2;margin:0 auto;box-shadow:0 0 30px var(--c)}
.map-pin .lbl{margin-top:60px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.25em;color:var(--c);text-transform:uppercase;background:rgba(4,5,10,.85);padding:6px 14px;display:inline-block;border:1px solid var(--c)}
@keyframes ringp{0%{transform:translate(-50%,-50%) scale(.5);opacity:1}100%{transform:translate(-50%,-50%) scale(2.5);opacity:0}}

/* ---------- WHATSAPP CONTACT CARD ---------- */
.wa-card{
  margin-top:40px;padding:36px;background:linear-gradient(135deg, rgba(37,211,102,.08), rgba(0,240,255,.04));
  border:1px solid rgba(37,211,102,.3);clip-path:polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;
}
.wa-card .wa-ic{width:60px;height:60px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 0 30px rgba(37,211,102,.5)}
.wa-card .wa-ic svg{width:30px;height:30px;color:#fff}
.wa-card .wa-text{flex:1;min-width:200px}
.wa-card h4{font-family:'Sora',sans-serif;font-weight:700;font-size:20px;margin-bottom:6px}
.wa-card p{color:var(--dim);font-size:14px;line-height:1.5;margin:0}
.wa-card .btn{flex-shrink:0;background:#25D366;color:#fff}
.wa-card .btn:hover{box-shadow:0 0 30px rgba(37,211,102,.6)}

.brand a img,.logo-wrap a img {max-width: 140px;object-fit: contain;}
.brand a img {
    max-width: 170px;
    height: 80px;
}
.hero {
  padding: 0;
  height: 840px;
  min-height: 100%;
}
.hero video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-cont-wrapper {
  width: 100%;
  max-width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  padding: 180px 40px 80px;
  background: #000000b5;
}
.hero-content {
  max-width: 100%;
}

.video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  object-fit: cover;
}

.page-hero {
  min-height: 100vh;
}

.page-hero-content {
    position: absolute;
    z-index: 5;
    max-width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-align: center;
    width: 100%;
    background: #000000b5;
    padding: 160px 40px 100px;
}

.p-item {
  height: 320px;
}

.p-item-box {
  padding: 0 10px;
}

.p-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media(max-width: 575px) {
  .portfolio-full {
    grid-template-columns: 1fr 1fr;
  }
}

.portfolio-wrapper button {
  width: 40px;
    height: 40px;
    background: #04050a;
    border: 1px solid rgb(255 255 255 / 8%);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
}
.portfolio-wrapper .slick-prev.slick-arrow {
  position: absolute;
  left: -12px;
  top: 50%;
  z-index: 5;
  transform: translate(0, -50%);
}
.portfolio-wrapper .slick-next.slick-arrow {
  position: absolute;
  right: -12px;
  top: 50%;
  z-index: 5;
  transform: translate(0, -50%);
}
.foot-bottom div a {
  color: var(--c);
}
.details-inner-sec h3 {
    color: var(--g);
    text-shadow: 0 0 30px rgba(0, 255, 106, .6), 0 0 60px rgba(0, 255, 106, .3);
    font-style: italic;
}
.foot-nav a {
     display: inline-block; 
     padding: 0;
}
.foot-nav a::before {
    display: none;
}
.foot-nav a:hover {
    color: red;
    padding-left: 0;
}
.foot-nav p {
    margin-bottom: 6px;
}