*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}
body{background:#05060d;color:#dfe6f5;font-family:Inter,sans-serif;line-height:1.6;overflow-x:hidden}
#bg{position:fixed;inset:0;z-index:-1}a{color:#5ef0ff}
nav{position:fixed;top:0;width:100%;display:flex;justify-content:space-between;align-items:center;padding:1rem 5vw;z-index:10;background:rgba(5,6,13,.5);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.06)}
.logo{font-family:Orbitron;font-weight:700;color:#fff;text-decoration:none;letter-spacing:3px}.logo span{color:#b06bff}
nav ul{display:flex;gap:1.8rem;list-style:none}nav ul a{color:#cbd3e6;text-decoration:none;font-size:.9rem}nav ul a:hover{color:#5ef0ff}
#menu{display:none;background:none;border:0;color:#fff;font-size:1.5rem}
.hero{min-height:100vh;display:flex;align-items:center;padding:0 8vw;position:relative}.hero-text{max-width:640px}
h1{font-family:Orbitron;font-size:clamp(2.2rem,6vw,4.5rem);line-height:1.1;margin:.6rem 0 1rem;color:#fff}
h2{font-family:Orbitron;font-size:clamp(1.6rem,3.5vw,2.4rem);margin-bottom:1.5rem;color:#fff}
.grad{background:linear-gradient(90deg,#5ef0ff,#b06bff);-webkit-background-clip:text;color:transparent}
.tag{color:#5ef0ff;text-transform:uppercase;letter-spacing:3px;font-size:.75rem}
.btns{display:flex;gap:1rem;margin-top:2rem;flex-wrap:wrap}
.btn{display:inline-block;padding:.8rem 1.6rem;border-radius:40px;background:linear-gradient(90deg,#5ef0ff,#b06bff);color:#05060d;font-weight:600;text-decoration:none;transition:.3s}
.btn:hover{box-shadow:0 0 25px #5ef0ff88;transform:translateY(-2px)}.btn.ghost{background:transparent;color:#fff;border:1px solid #5ef0ff}
.scroll{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);opacity:.5;font-size:.8rem;animation:b 2s infinite}@keyframes b{50%{transform:translate(-50%,8px)}}
section{padding:6rem 8vw}.sub{opacity:.6;margin:-1rem 0 1.5rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem}
.card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(14px);border-radius:18px;padding:2rem;transition:.4s}
.card:hover{border-color:#5ef0ff66;box-shadow:0 0 30px #5ef0ff22;transform:translateY(-4px)}
.card i{font-style:normal;font-size:1.8rem;color:#b06bff}.card h3{margin:.6rem 0;color:#fff}
.ph{aspect-ratio:4/3;border:2px dashed rgba(94,240,255,.35);border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(255,255,255,.03);font-family:Orbitron;letter-spacing:2px}
.ph small{font-family:Inter;opacity:.5;letter-spacing:0}
.feature{text-align:center;padding:4rem 2rem;background:linear-gradient(135deg,rgba(94,240,255,.08),rgba(176,107,255,.12))}
.badge{display:inline-block;margin-top:1.5rem;padding:.5rem 1.2rem;border-radius:30px;border:1px solid #b06bff;color:#d9b8ff;font-size:.85rem}
.about,.contact{max-width:800px}.contact p{margin-bottom:.8rem;font-size:1.1rem}
footer{text-align:center;padding:2rem;opacity:.5;font-size:.8rem}
.reveal{opacity:1;transform:none}
@media(max-width:760px){#menu{display:block}nav ul{display:none;position:absolute;top:100%;right:0;left:0;flex-direction:column;padding:1rem 5vw;background:rgba(5,6,13,.95)}nav ul.open{display:flex}section{padding:4rem 6vw}}
.logo{display:flex;align-items:center;gap:.6rem;font-size:.85rem}.logo img{height:30px;filter:drop-shadow(0 0 4px #00F0FF) drop-shadow(0 0 10px rgba(255,43,214,.5))}.logo span{color:#fff}
.hero-logo{width:clamp(110px,14vw,170px);display:block;margin-bottom:1rem;filter:drop-shadow(0 0 10px #00F0FF88) drop-shadow(0 0 28px #00F0FF44);animation:gl 4s ease-in-out infinite}
@keyframes gl{50%{filter:drop-shadow(0 0 14px #00F0FFaa) drop-shadow(0 0 40px #00F0FF55)}}
@media(max-width:760px){.logo span{display:none}}
/* ===== cyber redesign ===== */
body{background:#020208}
.reveal{opacity:1;transform:none}
.hero{background:linear-gradient(90deg,rgba(2,2,8,.75) 0%,rgba(2,2,8,.2) 55%,transparent)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px)}
.card,.ph{position:relative;border-radius:4px}
.card::before,.card::after,.ph::before,.ph::after{content:"";position:absolute;width:18px;height:18px;border:2px solid #00F0FF;transition:.35s;pointer-events:none}
.card::before,.ph::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.card::after,.ph::after{bottom:-1px;right:-1px;border-left:0;border-top:0;border-color:#ff2bd6}
.card:hover::before,.ph:hover::before{width:40px;height:40px}.card:hover::after,.ph:hover::after{width:40px;height:40px}
.card{background:rgba(10,14,30,.55);border:1px solid rgba(0,240,255,.15)}
.ph{border-style:dashed}
.btn{border-radius:2px;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);background:linear-gradient(90deg,#00F0FF,#ff2bd6)}
.btn.ghost{background:rgba(0,240,255,.08)}
.grad{background:linear-gradient(90deg,#00F0FF,#ff2bd6);-webkit-background-clip:text}
.glitch{position:relative;text-shadow:2px 0 #ff2bd6aa,-2px 0 #00F0FFaa;animation:gx 4s infinite steps(1)}
@keyframes gx{0%,92%,100%{transform:none;text-shadow:2px 0 #ff2bd6aa,-2px 0 #00F0FFaa}93%{transform:translate(-3px,1px) skewX(-4deg);text-shadow:-4px 0 #ff2bd6,4px 0 #00F0FF}95%{transform:translate(3px,-1px);text-shadow:4px 0 #ff2bd6,-4px 0 #00F0FF}}
h2[data-scramble]::before{content:"// ";color:#ff2bd6}
#cursor{position:fixed;left:0;top:0;width:340px;height:340px;margin:-170px 0 0 -170px;border-radius:50%;pointer-events:none;z-index:1;background:radial-gradient(circle,rgba(0,240,255,.14),rgba(255,43,214,.06) 40%,transparent 70%)}
@media (hover:none){#cursor{display:none}}
.svc{cursor:pointer;overflow:hidden}
.svc::marker{display:none}
.svc .more{max-height:0;opacity:0;transition:max-height .5s ease,opacity .4s;overflow:hidden}
.svc .more p{margin-top:.8rem;color:#bfefff}.svc .more a{display:inline-block;margin-top:.6rem;font-size:.85rem;color:#ff2bd6}
.svc.open{grid-column:span 2;background:linear-gradient(135deg,rgba(0,240,255,.12),rgba(255,43,214,.1));border-color:#00F0FF;box-shadow:0 0 40px rgba(0,240,255,.25),inset 0 0 30px rgba(0,240,255,.08)}
.svc.open .more{max-height:200px;opacity:1}
.svc .shine{position:absolute;inset:0;pointer-events:none;background:radial-gradient(300px circle at var(--x,50%) var(--y,50%),rgba(0,240,255,.18),transparent 60%);opacity:0;transition:opacity .3s}
.svc:hover .shine{opacity:1}
.card,.ph{transform-style:preserve-3d;will-change:transform}
@media(max-width:760px){.svc.open{grid-column:auto}}
@media(max-width:760px){.hero{align-items:flex-end;padding-bottom:18vh}}
/* ===== synthwave push ===== */
:root{--sun:linear-gradient(90deg,#ff2bd6,#ff6a3d 50%,#ffb347);--sunv:linear-gradient(180deg,#ffd36b,#ff6a3d 45%,#ff2bd6 75%,#7a2cff)}
h1.chrome{font-family:Orbitron;font-weight:900;letter-spacing:1px;text-transform:uppercase;font-size:clamp(2.1rem,5.6vw,4.6rem);
 background:linear-gradient(180deg,#eaf6ff 0%,#9fd8ff 30%,#2a3d8f 50%,#e9d2ff 51%,#ff9be8 70%,#fff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
 -webkit-text-stroke:1px rgba(255,255,255,.35);text-shadow:none;filter:drop-shadow(0 0 6px #ff2bd6) drop-shadow(0 0 18px rgba(0,240,255,.45));animation:none}
h1.chrome .grad{background:linear-gradient(180deg,#ffe58a 0%,#ff9a3d 45%,#ff2bd6 52%,#ff6ad5 75%,#b26bff 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:1px rgba(255,220,255,.45)}
h1.chrome:hover{animation:gx .6s steps(1) 1}
.tag{color:#ffb347}
section{position:relative}
section::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 120%,rgba(255,43,214,.16),transparent 60%),linear-gradient(180deg,rgba(18,4,38,.55),rgba(40,6,40,.35))}
#services::before{background:radial-gradient(ellipse at 0% 100%,rgba(255,106,61,.14),transparent 55%),linear-gradient(180deg,rgba(18,4,38,.6),rgba(10,2,20,.4))}
#cabinets::before{background:radial-gradient(ellipse at 50% 50%,rgba(255,106,61,.18),transparent 65%),rgba(20,4,30,.4)}
.neon-div{height:2px;margin:0 6vw;background:var(--sun);box-shadow:0 0 12px #ff2bd6,0 0 30px #ff6a3d;position:relative}
.neon-div::after{content:"";position:absolute;left:50%;top:-5px;width:12px;height:12px;margin-left:-6px;transform:rotate(45deg);background:#ffb347;box-shadow:0 0 14px #ff6a3d}
.btn{background:var(--sun);color:#16021f}
.btn.ghost{background:rgba(255,43,214,.08);border:1px solid #ff6a3d;color:#ffe3f6}
.btn:hover{box-shadow:0 0 22px #ff2bd6,0 0 40px rgba(255,106,61,.5)}
h2{background:linear-gradient(180deg,#fff,#ffc4f0 60%,#ff8a5c);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 8px rgba(255,43,214,.55))}
h2[data-scramble]::before{-webkit-text-fill-color:#ff2bd6}
.feature{background:linear-gradient(135deg,rgba(255,43,214,.16),rgba(255,106,61,.14),rgba(122,44,255,.18))}
.badge{border-color:#ff6a3d;color:#ffd0a8}
/* VHS / CRT */
.vhs-noise{position:fixed;inset:-50%;z-index:51;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:noise .5s steps(4) infinite}
@keyframes noise{0%{transform:translate(0,0)}25%{transform:translate(-7%,4%)}50%{transform:translate(5%,-6%)}75%{transform:translate(-3%,-2%)}}
.vhs-track{position:fixed;left:0;right:0;height:14px;top:-20px;z-index:52;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(255,255,255,.18) 40%,rgba(0,240,255,.12) 60%,transparent);filter:blur(1px);animation:track 9s linear infinite}
@keyframes track{0%,82%{top:-20px;opacity:0}83%{opacity:1}100%{top:105vh;opacity:.8}}
.vhs-vignette{position:fixed;inset:0;z-index:49;pointer-events:none;box-shadow:inset 0 0 140px rgba(0,0,0,.6);border-radius:0}
nav ul a,.card h3{text-shadow:1px 0 rgba(255,43,214,.55),-1px 0 rgba(0,240,255,.55)}
/* sound button */
#sound{position:fixed;right:20px;bottom:20px;z-index:60;display:flex;align-items:center;gap:.6rem;padding:.6rem 1rem;font:600 .75rem Orbitron;letter-spacing:2px;color:#ffd0f2;background:rgba(20,4,30,.7);border:1px solid #ff2bd6;backdrop-filter:blur(8px);cursor:pointer;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);box-shadow:0 0 18px rgba(255,43,214,.35)}
#sound .eq{display:flex;gap:2px;align-items:flex-end;height:14px}#sound .eq i{width:3px;height:4px;background:var(--sunv)}
#sound.on{border-color:#ffb347;color:#fff}#sound.on .eq i{animation:eq .5s ease-in-out infinite alternate}
#sound.on .eq i:nth-child(2){animation-delay:.15s}#sound.on .eq i:nth-child(3){animation-delay:.3s}#sound.on .eq i:nth-child(4){animation-delay:.08s}
@keyframes eq{to{height:14px}}
@media(max-width:760px){.vhs-noise{animation:none}#sound b{display:none}}
@media(prefers-reduced-motion:reduce){.vhs-noise,.vhs-track{animation:none}.vhs-track{display:none}}
.lowq .vhs-noise{animation:none}
#sound.ready{animation:sndp 1.8s ease-in-out infinite}
@keyframes sndp{50%{box-shadow:0 0 28px rgba(255,43,214,.75),0 0 50px rgba(255,106,61,.35)}}
#sound-hint{position:fixed;right:22px;bottom:68px;z-index:60;font:500 .7rem Orbitron;letter-spacing:2px;color:#ffd0f2;text-transform:uppercase;opacity:.8;pointer-events:none;animation:hintb 1.8s ease-in-out infinite;text-shadow:0 0 8px #ff2bd6}
@keyframes hintb{50%{opacity:.35}}
#scene-chips{position:fixed;left:20px;bottom:20px;z-index:60;display:flex;align-items:center;gap:6px;padding:6px 8px;background:rgba(20,4,30,.65);border:1px solid rgba(0,240,255,.35);backdrop-filter:blur(8px);clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
#scene-chips span{font:600 .6rem Orbitron;letter-spacing:2px;color:#7fdfe8;margin-right:4px}
#scene-chips button{width:28px;height:26px;font:700 .75rem Orbitron;color:#bff8ff;background:rgba(0,240,255,.06);border:1px solid rgba(0,240,255,.4);cursor:pointer;transition:.2s}
#scene-chips button:hover{border-color:#ff2bd6;color:#fff}
#scene-chips button[aria-pressed="true"]{background:linear-gradient(135deg,#00F0FF,#ff2bd6);color:#14021c;border-color:transparent;box-shadow:0 0 12px rgba(255,43,214,.6)}
@media(max-width:760px){#scene-chips{left:10px;bottom:14px}#scene-chips span{display:none}#scene-chips button{width:26px}}

/* progressive enhancement failsafe: content is visible unless JS animation is running; these force it back */
html.reveal-all .card,html.reveal-all .ph,html.reveal-all .sub,html.reveal-all .hero-text>*{opacity:1!important;visibility:visible!important}