:root{
  --bg:#050507;
  --bg2:#09090d;
  --panel:#0d0d13;
  --panel2:#101018;
  --text:#f5f7ff;
  --muted:#a2a6b3;
  --neon:#00000;
  --cyan:#00f5ff;
  --violet:#8a5cff;
  --pink:#ff2bd6;
  --line:rgba(255,255,255,.09);
  --glow-green:0 0 25px rgba(140,255,0,.35),0 0 60px rgba(140,255,0,.14);
  --glow-cyan:0 0 25px rgba(0,245,255,.32),0 0 70px rgba(0,245,255,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 20% 10%,rgba(138,92,255,.12),transparent 26%),
    radial-gradient(circle at 86% 26%,rgba(0,245,255,.10),transparent 28%),
    radial-gradient(circle at 50% 80%,rgba(140,255,0,.08),transparent 32%),
    var(--bg);
  overflow-x:hidden;
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-2;
  background-image:
    linear-gradient(rgba(255,255,255,.024) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.024) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 90%);
}
body:after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.12;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.02) 0,rgba(255,255,255,.02) 1px,transparent 2px,transparent 4px)
}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
.container{width:min(1200px,calc(100% - 34px));margin:auto}
.navbar{
  position:fixed;inset:0 0 auto;z-index:100;padding:18px 0;transition:.3s ease;
}
.navbar.scrolled{
  background:rgba(5,5,7,.76);backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(0,245,255,.12);padding:11px 0;
  box-shadow:0 10px 40px rgba(0,0,0,.28)
}
.navinner{display:flex;align-items:center;justify-content:space-between;gap:26px}
.logo-wrap{background:#fff;border-radius:12px;padding:6px 9px;box-shadow:0 0 26px rgba(140,255,0,.11)}
.logo-wrap img{width:150px}
.navlinks{display:flex;gap:27px;align-items:center}
.navlinks a{font-weight:800;color:#daddE5;position:relative}
.navlinks>a:not(.cta):after{content:"";position:absolute;left:0;bottom:-7px;width:0;height:2px;background:linear-gradient(90deg,var(--cyan),var(--neon));transition:.25s}
.navlinks>a:not(.cta):hover:after{width:100%}
.navtoggle{display:none;background:none;border:0;color:#fff;font-size:30px}
.cta{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 21px;border-radius:999px;font-weight:950;letter-spacing:.01em;
  background:var(--neon);color:white;border:1px solid transparent;transition:.25s;
  box-shadow:var(--glow-green)
}
.cta:hover{transform:translateY(-3px) scale(1.02);filter:brightness(1.08)}
.cta.alt{background:transparent;color:#fff;border-color:rgba(0,245,255,.42);box-shadow:none}
.cta.alt:hover{background:rgba(0,245,255,.08);box-shadow:var(--glow-cyan)}

.hero{
  min-height:100svh;position:relative;display:grid;align-items:end;overflow:hidden;
  background:#030305
}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.36) saturate(1.65) hue-rotate(12deg)}
.hero:before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(2,2,3,.97) 0%,rgba(4,4,7,.72) 48%,rgba(4,5,8,.56) 100%),
    radial-gradient(circle at 75% 42%,rgba(0,245,255,.16),transparent 35%),
    radial-gradient(circle at 24% 76%,rgba(140,255,0,.12),transparent 32%);
  z-index:1
}
.hero:after{
  content:"";position:absolute;z-index:1;width:520px;height:520px;border:1px solid rgba(0,245,255,.15);border-radius:50%;
  right:-110px;top:14%;box-shadow:0 0 90px rgba(0,245,255,.08) inset;animation:ringPulse 6s ease-in-out infinite
}
.hero-grid{position:relative;z-index:2;padding:170px 0 96px}
.kicker{
  display:inline-flex;padding:8px 12px;border-radius:999px;border:1px solid rgba(140,255,0,.25);
  background:rgba(140,255,0,.06);color:var(--neon);font-size:12px;font-weight:950;letter-spacing:.16em;text-transform:uppercase
}
.hero h1{
  font-size:clamp(64px,10.4vw,138px);line-height:.84;letter-spacing:-.072em;margin:25px 0 24px;
  max-width:1100px;text-transform:uppercase
}
.gradient-text{
  background:linear-gradient(90deg,var(--neon) 0%,var(--cyan) 46%,var(--violet) 78%,var(--pink));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 24px rgba(0,245,255,.12))
}
.hero p{max-width:700px;font-size:19px;color:#c8cad4}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.hero-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px}
.hero-badges span{padding:9px 12px;border:1px solid rgba(255,255,255,.09);border-radius:10px;background:rgba(255,255,255,.035);color:#bfc3cf;font-size:13px}
.scrollmark{position:absolute;right:28px;bottom:28px;z-index:3;color:#8e939f;letter-spacing:.18em;text-transform:uppercase;font-size:11px;writing-mode:vertical-rl}

.marquee{overflow:hidden;border-block:1px solid rgba(255,255,255,.07);background:#09090d}
.track{display:flex;width:max-content;animation:marquee 25s linear infinite;padding:17px 0}
.track span{white-space:nowrap;padding:0 26px;font-size:17px;font-weight:950;color:#e8ebf3}
.track i{font-style:normal;color:var(--cyan);text-shadow:0 0 16px rgba(0,245,255,.5)}

.section{padding:112px 0;position:relative}
.section.black{background:#050507}
.section.altbg{background:linear-gradient(180deg,#08080c,#050507)}
.section-head{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;align-items:end;margin-bottom:54px}
.section-head small{font-weight:950;letter-spacing:.15em;color:var(--cyan);text-transform:uppercase}
.section-head h2{font-size:clamp(46px,6.5vw,82px);line-height:.93;letter-spacing:-.058em;margin:0}
.section-head p{font-size:18px;color:var(--muted);max-width:580px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{
  min-height:360px;border-radius:28px;padding:29px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.08);transition:.35s cubic-bezier(.2,.8,.2,1)
}
.card:before{
  content:"";position:absolute;inset:-1px;border-radius:28px;padding:1px;
  background:linear-gradient(130deg,rgba(0,245,255,.65),transparent 30%,transparent 70%,rgba(140,255,0,.45));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:.35s
}
.card:hover{transform:translateY(-10px);background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.022))}
.card:hover:before{opacity:1}
.card .num{font-size:13px;color:#808693;font-weight:900}
.card h3{font-size:34px;line-height:1;margin:86px 0 15px}
.card p{color:#a6abb6}
.card .glow{
  position:absolute;width:230px;height:230px;border-radius:50%;right:-95px;bottom:-110px;
  background:radial-gradient(circle,rgba(0,245,255,.42),rgba(138,92,255,.12) 40%,transparent 70%);
  filter:blur(8px);transition:.5s
}
.card:nth-child(2) .glow{background:radial-gradient(circle,rgba(140,255,0,.40),rgba(0,245,255,.10) 42%,transparent 70%)}
.card:nth-child(3) .glow{background:radial-gradient(circle,rgba(255,43,214,.35),rgba(138,92,255,.15) 42%,transparent 70%)}
.card:hover .glow{transform:scale(1.24) translate(-18px,-12px)}

.showcase{display:grid;grid-template-columns:1.05fr .95fr;gap:20px}
.neon-panel{
  min-height:480px;border-radius:30px;padding:34px;position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 75% 25%,rgba(0,245,255,.18),transparent 30%),
    linear-gradient(145deg,#0b0b12,#07070a);
  border:1px solid rgba(0,245,255,.16);box-shadow:inset 0 0 80px rgba(0,245,255,.025)
}
.neon-panel.green{
  background:
    radial-gradient(circle at 78% 24%,rgba(140,255,0,.18),transparent 30%),
    linear-gradient(145deg,#0b0c0b,#070807);
  border-color:rgba(140,255,0,.15)
}
.neon-panel h3{font-size:48px;line-height:.96;margin:165px 0 15px;max-width:520px}
.neon-panel p{color:#aeb3bd;max-width:520px}
.neon-orbit{position:absolute;width:250px;height:250px;border-radius:50%;right:-60px;top:-70px;border:30px solid rgba(0,245,255,.08);box-shadow:0 0 55px rgba(0,245,255,.08);animation:orbitPulse 5s ease-in-out infinite}
.green .neon-orbit{border-color:rgba(140,255,0,.08);box-shadow:0 0 55px rgba(140,255,0,.08)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.tags span{padding:8px 11px;border:1px solid rgba(255,255,255,.10);border-radius:999px;color:#cbd0da;font-size:13px}

.video-break{position:relative;min-height:78vh;display:grid;place-items:center;overflow:hidden}
.video-break video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.32) saturate(1.7) hue-rotate(20deg)}
.video-break:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,7,.45),rgba(5,5,7,.72))}
.video-copy{position:relative;z-index:2;text-align:center;max-width:950px;padding:35px}
.video-copy h2{font-size:clamp(50px,7.8vw,104px);line-height:.88;letter-spacing:-.06em;margin:18px 0 24px;text-transform:uppercase}
.video-copy p{font-size:18px;color:#bfc4cf;max-width:700px;margin:0 auto 25px}

.page-hero{
  padding:190px 0 100px;position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 78% 20%,rgba(0,245,255,.11),transparent 26%),
    radial-gradient(circle at 25% 80%,rgba(140,255,0,.08),transparent 28%),
    #050507
}
.page-hero h1{font-size:clamp(65px,9.5vw,120px);line-height:.86;letter-spacing:-.065em;margin:18px 0 24px;text-transform:uppercase}
.page-hero p{max-width:730px;color:#adb2bd;font-size:19px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-top:50px}
.stat{padding:25px 20px;border-top:1px solid rgba(255,255,255,.09)}
.stat strong{display:block;font-size:50px;color:var(--neon);text-shadow:0 0 20px rgba(140,255,0,.2)}
.stat span{color:#9da3ae}

.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:22px}
.contact-card{
  border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,#0c0c12,#08080c);
  border-radius:26px;padding:31px;box-shadow:0 20px 60px rgba(0,0,0,.25)
}
.contact-card h2{font-size:46px;margin:0 0 20px}
form{display:grid;gap:14px}
input,textarea,select{width:100%;padding:15px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.10);background:#111119;color:#fff;outline:none}
input:focus,textarea:focus,select:focus{border-color:rgba(0,245,255,.7);box-shadow:0 0 0 4px rgba(0,245,255,.07)}
textarea{min-height:150px;resize:vertical}

.footer{background:#030304;padding:58px 0 22px;border-top:1px solid rgba(255,255,255,.07)}
.footgrid{display:grid;grid-template-columns:1.3fr .7fr .7fr;gap:32px}
.footer p,.footer a{color:#9ea4af}
.footbottom{margin-top:30px;padding-top:18px;border-top:1px solid rgba(255,255,255,.07);color:#6f7580}
.reveal{opacity:0;transform:translateY(34px);transition:.8s cubic-bezier(.2,.7,.2,1)}
.reveal.show{opacity:1;transform:none}
.cursor{
  position:fixed;width:20px;height:20px;border:1px solid var(--cyan);border-radius:50%;
  pointer-events:none;z-index:9998;transform:translate(-50%,-50%);box-shadow:0 0 18px rgba(0,245,255,.25)
}
.cursor-dot{position:fixed;width:5px;height:5px;background:var(--neon);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);box-shadow:0 0 14px var(--neon)}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes ringPulse{0%,100%{transform:scale(.95);opacity:.7}50%{transform:scale(1.06);opacity:1}}
@keyframes orbitPulse{0%,100%{transform:scale(.92) rotate(0)}50%{transform:scale(1.08) rotate(10deg)}}
@media(max-width:900px){
 .navtoggle{display:block}.navlinks{display:none;position:absolute;top:76px;left:16px;right:16px;background:rgba(8,8,12,.98);border:1px solid rgba(0,245,255,.12);border-radius:18px;padding:18px;flex-direction:column;align-items:stretch}.navlinks.open{display:flex}
 .section-head,.showcase,.contact-grid{grid-template-columns:1fr}.grid3{grid-template-columns:1fr 1fr}.stats{grid-template-columns:1fr 1fr}.footgrid{grid-template-columns:1fr}
 .hero h1{font-size:clamp(64px,14vw,100px)}
}
@media(max-width:620px){
 .container{width:min(100% - 22px,1200px)}.grid3,.stats{grid-template-columns:1fr}.section{padding:76px 0}.section-head{margin-bottom:36px}.neon-panel{min-height:410px}.neon-panel h3{font-size:36px;margin-top:140px}.scrollmark,.cursor,.cursor-dot{display:none}
 .hero-grid{padding-top:145px}.hero p{font-size:17px}.logo-wrap img{width:140px}
}


/* ===== Motion Plus ===== */
.motion-stage{
  position:relative;min-height:82vh;overflow:hidden;display:grid;place-items:center;
  border-block:1px solid rgba(255,255,255,.07);
}
.motion-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.36) saturate(1.8)}
.motion-stage:before{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(circle at 50% 45%,rgba(0,245,255,.06),transparent 35%),
    linear-gradient(180deg,rgba(5,5,7,.25),rgba(5,5,7,.78));
}
.motion-stage-content{position:relative;z-index:2;text-align:center;max-width:980px;padding:44px 24px}
.motion-stage h2{font-size:clamp(54px,8vw,108px);line-height:.87;letter-spacing:-.065em;margin:18px 0;text-transform:uppercase}
.motion-stage p{color:#bac0ca;font-size:19px;max-width:720px;margin:0 auto 26px}
.holo-ring{
  position:absolute;border-radius:50%;border:1px solid rgba(0,245,255,.18);
  box-shadow:0 0 50px rgba(0,245,255,.08),inset 0 0 40px rgba(138,92,255,.05);
  z-index:2;pointer-events:none
}
.holo-ring.r1{width:380px;height:380px;left:-150px;top:18%;animation:driftRing 10s ease-in-out infinite}
.holo-ring.r2{width:260px;height:260px;right:-80px;bottom:10%;border-color:rgba(140,255,0,.18);animation:driftRing 8s ease-in-out infinite reverse}
.glitch{position:relative;display:inline-block}
.glitch::before,.glitch::after{
  content:attr(data-text);position:absolute;inset:0;pointer-events:none;opacity:.35
}
.glitch::before{color:var(--cyan);transform:translate(2px,-1px);clip-path:inset(0 0 52% 0);animation:glitchA 2.8s infinite steps(2,end)}
.glitch::after{color:var(--pink);transform:translate(-2px,1px);clip-path:inset(48% 0 0 0);animation:glitchB 3.4s infinite steps(2,end)}
.float-badges{position:absolute;inset:0;z-index:2;pointer-events:none}
.float-badge{
  position:absolute;padding:10px 13px;border-radius:12px;
  background:rgba(10,10,16,.62);backdrop-filter:blur(10px);
  border:1px solid rgba(0,245,255,.15);color:#dce3eb;font-size:12px;font-weight:900;
  box-shadow:0 10px 35px rgba(0,0,0,.3);animation:badgeFloat 5.5s ease-in-out infinite
}
.float-badge.b1{left:8%;top:24%;animation-delay:-1s}
.float-badge.b2{right:9%;top:30%;animation-delay:-2.3s}
.float-badge.b3{left:14%;bottom:18%;animation-delay:-3.4s}
.float-badge.b4{right:14%;bottom:17%;animation-delay:-4.1s}
.parallax-orb{
  position:fixed;width:420px;height:420px;border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(circle,rgba(0,245,255,.08),rgba(138,92,255,.025) 45%,transparent 70%);
  filter:blur(8px);transform:translate(-50%,-50%);
}
.magnetic{transition:transform .15s ease-out}
.shine{position:relative;overflow:hidden}
.shine:after{
  content:"";position:absolute;top:-130%;left:-35%;width:30%;height:360%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
  transform:rotate(18deg);transition:left .55s ease
}
.shine:hover:after{left:120%}
@keyframes badgeFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-13px) rotate(1deg)}}
@keyframes driftRing{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(28px,-20px) rotate(12deg)}}
@keyframes glitchA{0%,92%,100%{transform:translate(2px,-1px)}94%{transform:translate(7px,-2px)}96%{transform:translate(-4px,1px)}}
@keyframes glitchB{0%,90%,100%{transform:translate(-2px,1px)}92%{transform:translate(-7px,2px)}95%{transform:translate(5px,-1px)}}
@media(max-width:700px){
  .float-badge{display:none}
  .holo-ring.r1{width:250px;height:250px}
  .holo-ring.r2{width:190px;height:190px}
}