:root{--g:#39FF14;--p:#9D00FF;--pk:#FF006E;--cy:#00D4FF;--or:#FF9500;--gd:#FFD700;--bg:#050505;--bg2:#080808;--bg3:#0d0d0d;--b1:#141414;--b2:#1e1e1e;--t1:#fff;--t2:#888;--t3:#555;--t4:#333;--ff:'Bebas Neue',sans-serif;--fm:'Share Tech Mono',monospace}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--t1);overflow-x:hidden;font-family:var(--fm)}
*{cursor:none!important}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::-webkit-scrollbar{width:3px;background:#000}
::-webkit-scrollbar-thumb{background:var(--p)}
::selection{background:#9D00FF30;color:#CE7DFF}
#cur{position:fixed;width:8px;height:8px;background:var(--g);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);mix-blend-mode:screen;transition:width .1s,height .1s}
#cur-r{position:fixed;width:28px;height:28px;border:1px solid var(--g);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);opacity:.4}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes scan{0%{top:-10%}100%{top:110%}}
@keyframes flicker{0%,93%,95%,100%{opacity:1}94%,96%{opacity:.4}}
@keyframes fadein{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes neon-glow{0%{text-shadow:0 0 10px currentColor,0 0 20px currentColor,0 0 40px currentColor}50%{text-shadow:0 0 20px currentColor,0 0 30px currentColor,0 0 60px currentColor,0 0 80px currentColor}100%{text-shadow:0 0 10px currentColor,0 0 20px currentColor,0 0 40px currentColor}}
@keyframes float-drift{0%,100%{transform:translate(0,0)}25%{transform:translate(30px,-20px)}50%{transform:translate(-20px,-40px)}75%{transform:translate(40px,20px)}}
@keyframes glow-pulse{0%,100%{box-shadow:0 0 20px currentColor}50%{box-shadow:0 0 50px currentColor,0 0 80px currentColor}}
@keyframes neon-flicker{0%,100%,80%{opacity:1}82%{opacity:.7}85%{opacity:1}87%{opacity:.7}90%{opacity:1}}
@keyframes led-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}
@keyframes rotate-orbit{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
input[type=range]{-webkit-appearance:none;height:2px;background:var(--b2);border-radius:2px;outline:none;width:100%}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--p);box-shadow:0 0 10px var(--p)}
.wrap{max-width:1280px;margin:0 auto;padding:0 28px}
.sec{padding:90px 0;border-top:1px solid var(--b1)}
.tag{font-size:9px;letter-spacing:6px;color:var(--g);margin-bottom:14px;display:flex;align-items:center;gap:10px}
.tag::before{content:'';width:20px;height:1px;background:var(--g)}
.h1{font-family:var(--ff);font-size:clamp(32px,5vw,70px);letter-spacing:4px;line-height:.92}
.sub{font-size:9px;letter-spacing:3px;color:var(--t3);margin-top:12px}
.intro{font-size:11px;color:var(--t2);line-height:1.9;margin-top:18px;max-width:700px}
.btn-p{display:inline-flex;align-items:center;background:var(--p);color:#fff;font-family:var(--ff);font-size:17px;letter-spacing:5px;padding:14px 36px;border:none;border-radius:4px;box-shadow:0 0 28px #9D00FF44;transition:all .3s}
.btn-p:hover{box-shadow:0 0 60px var(--p);transform:translateY(-2px)}
.btn-g{display:inline-flex;align-items:center;background:var(--g);color:#000;font-family:var(--ff);font-size:13px;letter-spacing:4px;padding:11px 24px;border:none;border-radius:4px;transition:all .3s}
.btn-g:hover{box-shadow:0 0 40px var(--g);transform:translateY(-2px)}
.btn-o{display:inline-flex;align-items:center;background:transparent;color:var(--t1);font-family:var(--ff);font-size:16px;letter-spacing:5px;padding:13px 36px;border:1px solid #333;border-radius:4px;transition:all .3s}
.btn-o:hover{border-color:#666;transform:translateY(-2px)}
.inp{width:100%;background:#0f0f0f;border:1px solid var(--b2);color:var(--t1);font-family:var(--fm);font-size:11px;padding:13px 16px;border-radius:5px;outline:none;letter-spacing:1px;transition:border-color .3s;resize:vertical}
.inp:focus{border-color:#9D00FF55}
/* NAV */
#nav{position:fixed;top:0;left:0;right:0;z-index:500;padding:16px 28px;display:flex;align-items:center;justify-content:space-between;transition:all .4s}
#nav.sc{background:rgba(5,5,5,.97);backdrop-filter:blur(24px);border-bottom:1px solid var(--b1)}
.logo{display:flex;align-items:center;gap:12px}
.lm{font-family:var(--ff);font-size:24px;letter-spacing:5px;line-height:1}
.lm .ac{color:var(--g);text-shadow:0 0 16px var(--g)}
.lt{font-size:7px;letter-spacing:3px;color:#39FF1330;margin-top:3px}
.nav-c{display:flex;align-items:center;gap:4px}
.nl{background:none;border:none;color:var(--t3);font-family:var(--fm);font-size:9px;letter-spacing:3px;padding:9px 14px;transition:color .2s;border-radius:3px}
.nl:hover,.nl.act{color:var(--g)}
.dd{position:relative}
.ddm{position:absolute;top:calc(100% + 8px);left:0;background:#0c0c0c;border:1px solid var(--b2);border-radius:8px;min-width:270px;z-index:600;display:none;padding:8px 0;box-shadow:0 24px 60px rgba(0,0,0,.9)}
.dd:hover .ddm{display:block}
.ddm a{display:block;padding:10px 22px;font-size:9px;letter-spacing:2px;color:var(--t3);transition:all .2s}
.ddm a:hover{color:var(--g);background:#39FF1408;padding-left:30px}
.ddm .div{border-top:1px solid var(--b1);margin:7px 0}
.ddm .cta{color:var(--g)}
.nav-cta{background:none;border:1px solid var(--g);color:var(--g);font-family:var(--fm);font-size:9px;letter-spacing:3px;padding:10px 22px;border-radius:4px;transition:all .25s;box-shadow:0 0 14px #39FF1420;margin-left:6px}
.nav-cta:hover{background:var(--g);color:#000;box-shadow:0 0 36px var(--g)}
.hbg{display:none;background:none;border:1px solid var(--b2);color:var(--t1);width:40px;height:40px;border-radius:4px;font-size:18px;align-items:center;justify-content:center;font-family:var(--fm)}
#mob{position:fixed;inset:0;background:rgba(3,3,3,.99);backdrop-filter:blur(20px);z-index:400;display:none;flex-direction:column;align-items:center;justify-content:center}
#mob.open{display:flex}
.mob-x{position:absolute;top:20px;right:24px;background:none;border:1px solid var(--b2);color:var(--t1);width:40px;height:40px;border-radius:4px;font-size:20px;display:flex;align-items:center;justify-content:center;font-family:var(--fm)}
.mlink{background:none;border:none;color:var(--t3);font-family:var(--fm);font-size:18px;letter-spacing:5px;padding:16px 60px;border-bottom:1px solid var(--b1);width:100%;text-align:center;transition:color .2s}
.mlink:hover{color:var(--g)}
/* HERO */
.hero{min-height:100vh;position:relative;overflow:hidden;background:#000;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(135deg,#000,#0a0a0a,#050505)}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-lights{position:absolute;inset:0;z-index:5;pointer-events:none}
.light{position:absolute;border-radius:50%;filter:blur(80px);opacity:.15;animation:float-drift var(--duration,5s) ease-in-out infinite,glow-pulse 3s ease-in-out infinite;box-shadow:0 0 40px var(--lg)}
.light-1{width:300px;height:300px;top:10%;left:5%;--lg:#39FF14;animation-delay:var(--delay,0s),calc(var(--delay,0s) + 0.5s)}
.light-2{width:250px;height:250px;top:15%;right:10%;--lg:#9D00FF;animation-delay:var(--delay,0s),calc(var(--delay,0s) + 1.2s)}
.light-3{width:280px;height:280px;bottom:20%;left:20%;--lg:#00D4FF;animation-delay:var(--delay,0s),calc(var(--delay,0s) + 0.8s)}
.light-4{width:220px;height:220px;top:50%;right:15%;--lg:#FF9500;animation-delay:var(--delay,0s),calc(var(--delay,0s) + 1.5s)}
.light-5{width:260px;height:260px;bottom:15%;right:5%;--lg:#BF00FF;animation-delay:var(--delay,0s),calc(var(--delay,0s) + 0.3s)}
.neon-line{position:absolute;background:linear-gradient(90deg,transparent,#39FF14,transparent);opacity:.3;animation:neon-flicker 4s ease-in-out infinite;z-index:4}
.neon-1{width:400px;height:2px;top:25%;left:10%;transform:rotate(-20deg);animation-delay:0.2s}
.neon-2{width:350px;height:2px;bottom:30%;right:15%;transform:rotate(25deg);background:linear-gradient(90deg,transparent,#9D00FF,transparent);animation-delay:0.8s}
.neon-text{position:absolute;font-family:var(--ff);font-size:100px;font-weight:bold;letter-spacing:12px;opacity:.15;z-index:3;pointer-events:none;color:#39FF1430}
.neon-sign{top:35%;left:50%;transform:translate(-50%,-50%);text-shadow:0 0 30px #39FF1444,0 0 60px #39FF1422;animation:neon-glow 2.5s ease-in-out infinite;color:#39FF1455}
.hero-body{position:relative;z-index:10;padding:0 36px 72px;max-width:1280px;margin:0 auto;width:100%}
.badge{display:inline-flex;align-items:center;gap:10px;border:1px solid #39FF1328;background:#39FF1406;border-radius:4px;padding:6px 16px;margin-bottom:26px}
.bdot{width:7px;height:7px;border-radius:50%;background:var(--g);box-shadow:0 0 10px var(--g);animation:pulse 1.5s infinite}
.htitle{font-family:var(--ff);font-size:clamp(52px,11vw,150px);letter-spacing:1px;line-height:.87}
.l1{color:#fff}.l2{color:var(--g);text-shadow:0 0 50px var(--g),0 0 100px #39FF1428;animation:flicker 8s infinite}.l3{color:var(--p);text-shadow:0 0 50px var(--p)}
.hsub{font-size:11px;letter-spacing:6px;color:var(--t3);margin:22px 0 34px}
.hact{display:flex;gap:14px;flex-wrap:wrap}
.hscroll{position:absolute;bottom:32px;right:50px;display:flex;flex-direction:column;align-items:center;gap:10px}
.hsl{font-size:7px;letter-spacing:3px;color:#2a2a2a;writing-mode:vertical-rl}
.hll{width:1px;height:50px;background:linear-gradient(#2a2a2a,transparent);position:relative;overflow:hidden}
.hll::after{content:'';position:absolute;top:0;left:0;right:0;height:50%;background:var(--g);animation:scan 2s ease-in-out infinite}
/* STATS */
.stats{background:var(--bg3);border-top:1px solid var(--b1);border-bottom:1px solid var(--b1);padding:28px}
.sg{display:grid;grid-template-columns:repeat(4,1fr);max-width:1000px;margin:0 auto;gap:10px;text-align:center}
.sn{font-family:var(--ff);font-size:clamp(36px,5vw,56px);color:var(--g);text-shadow:0 0 24px #39FF1455;line-height:1}
.sl{font-size:8px;letter-spacing:3px;color:var(--t3);margin-top:5px}
/* PRODUCT CARDS */
.pcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;margin-top:50px}
.pcard{background:var(--bg3);border:1px solid var(--b1);border-radius:10px;overflow:hidden;transition:all .35s;animation:fadein .5s ease both}
.pcard:hover{border-color:#9D00FF55;transform:translateY(-5px);box-shadow:0 20px 70px rgba(0,0,0,.7)}
.pcard img{width:100%;height:210px;object-fit:cover;filter:brightness(.82);transition:filter .4s}
.pcard:hover img{filter:brightness(1)}
.pb{padding:22px}
.ptag{font-size:8px;letter-spacing:3px;margin-bottom:6px}
.pname{font-family:var(--ff);font-size:24px;letter-spacing:3px;margin-bottom:10px}
.pdesc{font-size:9px;color:var(--t2);line-height:1.9;margin-bottom:18px}
.pfoot{border-top:1px solid var(--b1);padding-top:16px;display:flex;justify-content:space-between;align-items:flex-end}
.pprice{font-family:var(--ff);font-size:30px;line-height:1}
.punit{font-size:8px;color:var(--t3);margin-top:4px}
/* PROCESS */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:50px}
.pstep{background:var(--bg3);padding:38px 30px;position:relative;overflow:hidden}
.psn{font-family:var(--ff);font-size:90px;color:#0f0f0f;line-height:1;margin-bottom:-12px}
.pst{font-family:var(--ff);font-size:24px;letter-spacing:3px;margin-bottom:14px}
.psd{font-size:10px;color:var(--t2);line-height:1.9}
.pstep::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px}
.pstep:nth-child(1)::after{background:linear-gradient(90deg,var(--p),transparent)}
.pstep:nth-child(2)::after{background:linear-gradient(90deg,var(--pk),transparent)}
.pstep:nth-child(3)::after{background:linear-gradient(90deg,var(--g),transparent)}
/* WHY */
.wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px;margin-top:50px}
.wcard{background:var(--bg3);border:1px solid var(--b1);border-radius:8px;padding:26px;display:flex;gap:18px;transition:border-color .3s}
.wcard:hover{border-color:#9D00FF30}
.wdot{width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-top:5px}
.wt{font-family:var(--ff);font-size:17px;letter-spacing:3px;margin-bottom:8px}
.wd{font-size:10px;color:var(--t2);line-height:1.9}
/* GALLERY */
.gfilt{display:flex;flex-wrap:wrap;gap:8px;margin:32px 0}
.gf{background:var(--bg3);border:1px solid var(--b1);border-radius:4px;padding:8px 18px;font-size:9px;letter-spacing:2px;color:var(--t3);transition:all .2s}
.gf.on,.gf:hover{border-color:var(--p);color:var(--p);background:#9D00FF0d}
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.gi{position:relative;border-radius:8px;overflow:hidden;border:1px solid var(--b1);aspect-ratio:1;transition:all .3s}
.gi:hover{border-color:#9D00FF55;transform:scale(1.02)}
.gi img{width:100%;height:100%;object-fit:cover;filter:brightness(.8);transition:filter .3s;display:block}
.gi:hover img{filter:brightness(1.08)}
.gov{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.8),transparent 55%);opacity:0;transition:opacity .3s;display:flex;align-items:flex-end;padding:14px}
.gi:hover .gov{opacity:1}
.glbl{font-size:9px;letter-spacing:2px;color:var(--g)}
/* COLOUR CHARTS */
.ccb{margin-bottom:60px}
.cct{font-family:var(--ff);font-size:30px;letter-spacing:4px;margin-bottom:8px}
.ccd{font-size:9px;color:var(--t3);letter-spacing:2px;margin-bottom:28px;line-height:1.8}
.ledg{display:flex;flex-wrap:wrap;gap:16px}
.ledi{display:flex;flex-direction:column;align-items:center;gap:8px}
.leds{width:56px;height:56px;border-radius:50%;border:2px solid #1a1a1a}
.ledn{font-size:7px;letter-spacing:1px;color:var(--t3);text-align:center;max-width:70px;line-height:1.4}
.ccg{display:grid;grid-template-columns:repeat(auto-fill,minmax(95px,1fr));gap:10px}
.cci{border-radius:6px;overflow:hidden;border:1px solid var(--b1);transition:transform .2s,border-color .2s}
.cci:hover{transform:scale(1.06);border-color:var(--p)}
.cci img{width:100%;aspect-ratio:1;object-fit:cover}
.ccin{font-size:7px;color:var(--t3);padding:6px 7px;text-align:center;line-height:1.4;background:var(--bg3)}
/* FONT LIST */
.fcat{margin-bottom:52px}
.fct{font-family:var(--ff);font-size:28px;letter-spacing:4px;margin-bottom:8px}
.fcd{font-size:9px;color:var(--t3);letter-spacing:2px;margin-bottom:24px}
.fitems{display:flex;flex-direction:column;gap:10px}
.fi{background:var(--bg3);border:1px solid var(--b1);border-radius:8px;padding:18px 22px;display:flex;justify-content:space-between;align-items:center;gap:20px;transition:border-color .3s}
.fi:hover{border-color:#9D00FF40}
.fprev{font-size:clamp(20px,3vw,34px);letter-spacing:3px}
.fmn{font-size:9px;letter-spacing:2px;color:var(--t3);margin-bottom:6px;text-align:right}
.fub{background:none;border:1px solid var(--b2);color:var(--t3);font-family:var(--fm);font-size:8px;letter-spacing:2px;padding:7px 16px;border-radius:3px;transition:all .2s}
.fub:hover{border-color:var(--p);color:var(--p)}
/* FAQ */
.fqct{font-family:var(--ff);font-size:26px;letter-spacing:4px;margin:44px 0 18px;padding-top:10px;border-top:1px solid var(--b1)}
.fqct:first-child{border-top:none;margin-top:0}
.fqi{border:1px solid var(--b1);border-radius:6px;overflow:hidden;margin-bottom:8px;transition:border-color .3s}
.fqi.open{border-color:#9D00FF55}
.fqq{width:100%;background:var(--bg3);border:none;padding:17px 22px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:var(--fm);font-size:11px;letter-spacing:2px;color:var(--t3);text-align:left;transition:all .3s}
.fqi.open .fqq{background:#9D00FF0a;color:#CE7DFF}
.fqq:hover{color:#CE7DFF}
.fqa_arr{font-size:16px;flex-shrink:0;transition:transform .3s}
.fqi.open .fqa_arr{transform:rotate(90deg)}
.fqa{padding:16px 22px;background:var(--bg2);font-size:10px;color:var(--t2);line-height:1.9;display:none;border-top:1px solid var(--b1)}
.fqi.open .fqa{display:block}
/* INSTALL */
.wbox{background:#FF006E0d;border:1px solid #FF006E30;border-radius:8px;padding:18px 22px;margin-bottom:38px;font-size:10px;color:var(--t2);line-height:1.9}
.wbox strong{color:var(--pk)}
.igrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:50px}
.ic{background:var(--bg3);border:1px solid var(--b1);border-radius:10px;padding:30px;position:relative;overflow:hidden}
.icn{font-family:var(--ff);font-size:80px;color:#0f0f0f;line-height:1;margin-bottom:-8px}
.ict{font-family:var(--ff);font-size:22px;letter-spacing:3px;margin-bottom:14px}
.icd{font-size:10px;color:var(--t2);line-height:1.9}
.ic::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--a,var(--p)),transparent)}
/* PRODUCT SUBPAGE */
.psh{padding:130px 0 90px;position:relative;overflow:hidden}
.psh::before{content:'';position:absolute;inset:0;opacity:.1;pointer-events:none;background:radial-gradient(ellipse at 60% 40%,var(--ac,var(--p)),transparent 70%)}
.psgrid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.psimg{width:100%;border-radius:10px;border:1px solid var(--b1);box-shadow:0 24px 80px rgba(0,0,0,.85)}
.stab{background:var(--bg3);border:1px solid var(--b1);border-radius:10px;padding:28px;margin-top:28px}
.sr{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--b1)}
.sr:last-child{border-bottom:none}
.sk{font-size:9px;letter-spacing:2px;color:var(--t3)}
.sv{font-size:10px;color:var(--t2);text-align:right}
.ptiers{background:#0a0a0a;border:1px solid var(--b1);border-radius:8px;padding:22px;margin-top:18px}
.tr{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--b1)}
.tr:last-child{border-bottom:none}
.ts{font-size:9px;letter-spacing:2px;color:var(--t3)}
.tp{font-family:var(--ff);font-size:20px}
/* CONTACT */
.cgrid{display:grid;grid-template-columns:1fr 1.2fr;gap:44px}
.cinfo{display:flex;flex-direction:column;gap:14px}
.ccard{background:var(--bg3);border:1px solid var(--b1);border-radius:8px;padding:20px 22px;display:flex;gap:18px;align-items:center;transition:border-color .3s}
.ccard:hover{border-color:var(--p)}
.cform{display:flex;flex-direction:column;gap:12px}
.crow2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* CONFIGURATOR */
.cfgwrap{display:grid;grid-template-columns:390px 1fr;min-height:calc(100vh - 80px)}
.cfgl{background:var(--bg3);border-right:1px solid var(--b1);overflow-y:auto;max-height:calc(100vh - 80px);position:sticky;top:80px;display:flex;flex-direction:column}
.cfgh{padding:24px;border-bottom:1px solid var(--b1);background:linear-gradient(135deg,#9D00FF0a,transparent);flex-shrink:0}
.cfgs{flex:1;overflow-y:auto;padding:10px 14px 20px;display:flex;flex-direction:column;gap:6px}
.cs{border:1px solid var(--b1);border-radius:6px;overflow:hidden;transition:border-color .3s}
.cs.open{border-color:#9D00FF55}
.csh{width:100%;background:none;border:none;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;font-family:var(--fm);font-size:10px;letter-spacing:3px;color:var(--t3);transition:all .25s}
.cs.open .csh,.csh:hover{background:#9D00FF0d;color:#CE7DFF}
.arr{font-size:14px;transition:transform .3s}
.cs.open .arr{transform:rotate(90deg)}
.csb{padding:14px 16px;background:var(--bg2);display:none}
.cs.open .csb{display:block}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.sb{background:var(--bg3);border:1px solid var(--b1);border-radius:5px;padding:10px 11px;text-align:left;transition:all .2s;display:flex;flex-direction:column;gap:3px}
.sb.on,.sb:hover{border-color:var(--p);background:#9D00FF0d}
.sbt{font-size:7px;letter-spacing:2px;color:var(--t3)}.sb.on .sbt{color:var(--p)}
.sbn{font-family:var(--ff);font-size:13px;letter-spacing:2px;color:var(--t3)}.sb.on .sbn{color:#CE7DFF}
.sbp{font-size:7px;color:#2a2a2a}.sb.on .sbp{color:#555}
.sinp{width:100%;background:#0f0f0f;border:1px solid var(--b1);color:var(--t1);font-family:var(--fm);font-size:22px;letter-spacing:4px;padding:13px 15px;border-radius:5px;outline:none;transition:border-color .3s}
.sinp:focus{border-color:#9D00FF55}
.cbts{display:flex;gap:6px;margin-top:8px}
.cbt{background:var(--bg3);border:1px solid var(--b1);border-radius:3px;padding:6px 12px;font-family:var(--fm);font-size:9px;letter-spacing:2px;color:var(--t3);transition:all .2s}
.cbt:hover{border-color:var(--p);color:var(--p)}
.colg{display:flex;flex-wrap:wrap;gap:10px}
.col{width:32px;height:32px;border-radius:50%;border:2px solid transparent;transition:all .2s}
.col.on{border-color:#fff;transform:scale(1.3)}
.col:hover{transform:scale(1.15)}
.ldrop{border:1px dashed #9D00FF40;border-radius:6px;padding:20px;text-align:center;background:#9D00FF06;transition:border-color .3s}
.ldrop:hover{border-color:#9D00FF80}
.arow{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ach{width:16px;height:16px;border:1px solid #2a2a2a;border-radius:3px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s}
.ach.on{background:var(--p);border-color:var(--p)}
.albl{font-size:9px;color:#666;flex:1}.ach.on~.albl{color:#ccc}
.ap{font-size:9px;color:var(--p)}
.cfgr{background:#000;display:flex;flex-direction:column;position:relative}
#cc{width:100%;flex:1;min-height:70vh;display:block}
.cvl{position:absolute;top:16px;left:22px;font-size:8px;letter-spacing:3px;color:#2a2a2a;pointer-events:none}
.vcs{position:absolute;bottom:22px;left:0;right:0;display:flex;justify-content:center;gap:10px}
.vcb{background:rgba(10,10,10,.92);border:1px solid var(--b1);color:var(--t3);font-family:var(--fm);font-size:9px;letter-spacing:2px;padding:8px 18px;border-radius:4px;transition:all .2s;backdrop-filter:blur(12px)}
.vcb:hover,.vcb.on{border-color:var(--p);color:var(--p)}
.pp{background:var(--bg3);border-top:1px solid var(--b1);padding:24px 28px}
.prr{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.prl{font-size:9px;letter-spacing:2px;color:var(--t3)}
.prv{font-size:10px;color:var(--t2)}
.ptot{border-top:1px solid var(--b1);padding-top:14px;margin-top:6px;display:flex;justify-content:space-between;align-items:center}
.ptn{font-family:var(--ff);font-size:48px;color:var(--p);text-shadow:0 0 24px var(--p)}
.cbig{width:100%;background:var(--p);color:#fff;font-family:var(--ff);font-size:18px;letter-spacing:5px;padding:17px;border:none;border-radius:5px;margin-top:16px;transition:all .3s;box-shadow:0 0 28px #9D00FF44}
.cbig:hover{box-shadow:0 0 65px var(--p);transform:translateY(-1px)}
/* MODAL */
.modal{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:20px}
.modal.open{display:flex}
.mbg{position:absolute;inset:0;background:rgba(0,0,0,.93);backdrop-filter:blur(16px)}
.mbox{position:relative;z-index:1;background:#0b0b0b;border:1px solid #9D00FF44;border-radius:14px;max-width:560px;width:100%;max-height:92vh;overflow-y:auto;box-shadow:0 0 100px #9D00FF18}
.mh{padding:26px 30px 22px;border-bottom:1px solid #9D00FF1a;background:linear-gradient(135deg,#9D00FF0a,transparent);display:flex;justify-content:space-between;align-items:flex-start}
.mb{padding:22px 30px 30px}
.mx{background:none;border:1px solid var(--b2);color:var(--t3);width:34px;height:34px;border-radius:5px;font-size:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s;font-family:var(--fm)}
.mx:hover{border-color:var(--pk);color:var(--pk)}
.sum{background:#9D00FF08;border:1px solid #9D00FF18;border-radius:8px;padding:16px;margin-bottom:22px}
.sg3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.sc{background:#060606;border-radius:5px;padding:10px 12px}
.sck{font-size:7px;color:#333;letter-spacing:2px;margin-bottom:4px}
.scv{font-family:var(--ff);font-size:15px;letter-spacing:1px}
.istripe{background:#39FF1408;border:1px solid #39FF1418;border-radius:5px;padding:12px 16px;font-size:9px;color:var(--g);line-height:1.9;margin-bottom:16px}
.smsg{background:#9D00FF12;border:1px solid #9D00FF40;border-radius:6px;padding:16px;text-align:center;margin-bottom:14px;font-size:11px;color:#CE7DFF;letter-spacing:2px}
/* FOOTER */
.footer{background:#030303;border-top:1px solid var(--b1);padding:70px 28px 30px}
.fg{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:44px;max-width:1280px;margin:0 auto 52px}
.fbn{font-family:var(--ff);font-size:28px;letter-spacing:5px}
.fbn .ac{color:var(--g);text-shadow:0 0 16px var(--g)}
.fbt{font-size:7px;letter-spacing:3px;color:#39FF1330;margin-top:3px}
.fbd{font-size:10px;color:#333;line-height:2.3;margin-top:18px}
.fch{font-size:9px;letter-spacing:4px;color:var(--g);margin-bottom:20px}
.fl{display:block;font-size:9px;color:var(--t4);letter-spacing:2px;margin-bottom:11px;background:none;border:none;padding:0;text-align:left;transition:all .2s}
.fl:hover{color:var(--p);padding-left:5px}
.fb{border-top:1px solid var(--b1);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;max-width:1280px;margin:0 auto}
.fc{font-size:8px;color:#222;letter-spacing:2px}
.socr{display:flex;gap:10px;margin-top:20px}
.sol{width:38px;height:38px;border:1px solid var(--b1);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:10px;color:#333;transition:all .2s}
.sol:hover{border-color:var(--g);color:var(--g)}
.inote{background:#9D00FF08;border:1px solid #9D00FF20;border-radius:8px;padding:14px 18px;font-size:9px;color:var(--t3);letter-spacing:1px;line-height:1.9;margin-top:20px}
/* RESPONSIVE */
@media(max-width:1100px){.cfgwrap{grid-template-columns:340px 1fr}}
@media(max-width:900px){.cfgwrap{grid-template-columns:1fr}.cfgl{max-height:none;position:relative;border-right:none;border-bottom:1px solid var(--b1);order:2}.cfgr{order:1}.nav-c{display:none!important}.hbg{display:flex!important}.pgrid{grid-template-columns:1fr}.psgrid{grid-template-columns:1fr}.cgrid{grid-template-columns:1fr}.fg{grid-template-columns:1fr 1fr}.igrid{grid-template-columns:1fr}}
@media(max-width:768px){.sg{grid-template-columns:1fr 1fr}.pcards{grid-template-columns:1fr}.ggrid{grid-template-columns:1fr 1fr}.sg3{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.ggrid{grid-template-columns:1fr}.fg{grid-template-columns:1fr}.wrap{padding:0 16px}.hero-body{padding:0 18px 56px}.crow2{grid-template-columns:1fr}}

/* ── LANGUAGE SWITCHER ─────────────────────────────────── */
.lang-sw{display:flex;align-items:center;gap:2px;margin:0 6px;border:1px solid var(--b2);border-radius:4px;overflow:hidden}
.lang-btn{background:none;border:none;color:var(--t4);font-family:var(--fm);font-size:8px;letter-spacing:2px;padding:7px 10px;transition:all .2s}
.lang-btn.on,.lang-btn:hover{background:#9D00FF18;color:var(--p)}
.lang-btn.on{color:#CE7DFF}

/* ── DROPDOWN MENU FIX (desktop hover gap bridge) ─────── */
.dd{position:relative}
/* Invisible bridge between button and dropdown */
.ddm::before{content:'';position:absolute;top:-10px;left:0;right:0;height:10px}
.ddm{margin-top:0;padding-top:10px}
/* JS-powered hover – keep CSS fallback but remove the gap */
.dd.is-open .ddm{display:block}

/* ── FAQ on homepage ─────────────────────────────────── */
.hfaq{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:40px}
.hfq{background:var(--bg3);border:1px solid var(--b1);border-radius:8px;padding:22px 24px;transition:border-color .3s}
.hfq:hover{border-color:#9D00FF40}
.hfq-q{font-family:var(--ff);font-size:16px;letter-spacing:2px;margin-bottom:8px;color:#CE7DFF}
.hfq-a{font-size:9px;color:var(--t2);line-height:1.9}
@media(max-width:768px){.hfaq{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════
   v7.0 TYPOGRAPHY & MOBILE IMPROVEMENTS
   ═══════════════════════════════════════════════════════════ */

/* ── Core body text: bigger & more readable ── */
body { font-size: 14px; line-height: 1.7; }
.intro { font-size: 15px; color: var(--t2); line-height: 1.85; margin-top: 20px; max-width: 700px; }
.sub   { font-size: 12px; letter-spacing: 3px; color: var(--t3); margin-top: 14px; }
.tag   { font-size: 11px; letter-spacing: 5px; }
.pdesc { font-size: 12px; color: var(--t2); line-height: 1.85; margin-bottom: 20px; }
.pname { font-size: 26px; }
.psd   { font-size: 13px; color: var(--t2); line-height: 1.85; }
.wd    { font-size: 13px; color: var(--t2); line-height: 1.85; }
.hsub  { font-size: 13px; letter-spacing: 5px; }
.hfq-a { font-size: 13px; color: var(--t2); line-height: 1.85; }
.fqq   { font-size: 13px; }
.fqa   { font-size: 13px; color: var(--t2); line-height: 1.85; }
.sk    { font-size: 12px; letter-spacing: 1px; color: var(--t3); }
.sv    { font-size: 13px; color: var(--t1); }
.prl   { font-size: 12px; letter-spacing: 1px; color: var(--t3); }
.prv   { font-size: 13px; color: var(--t2); }
.ccd   { font-size: 12px; letter-spacing: 2px; color: var(--t3); line-height: 1.85; }
.ccin  { font-size: 10px; color: var(--t3); }
.sbt   { font-size: 9px; letter-spacing: 2px; }
.sbn   { font-size: 14px; }
.albl  { font-size: 12px; color: #444; }
.albl.on { color: #aaa; }
.ap    { font-size: 12px; color: var(--p); }
.arow .ach~.albl { color: #3a3a3a; }
.arow .ach.on~.albl { color: #aaa; }
.fbd   { font-size: 13px; color: #444; line-height: 2.2; margin-top: 18px; }
.istripe { font-size: 12px; }
.smsg  { font-size: 13px; }
.inote { font-size: 12px; line-height: 1.85; }
.csh   { font-size: 12px; letter-spacing: 2px; }
.cvl   { font-size: 10px; letter-spacing: 2px; }
.vcb   { font-size: 11px; letter-spacing: 2px; padding: 9px 20px; }

/* ── Navigation text ── */
.nl    { font-size: 11px; letter-spacing: 2px; }
.ddm a { font-size: 12px; letter-spacing: 1px; }
.mlink { font-size: 20px; }
.fch   { font-size: 11px; letter-spacing: 3px; }
.fl    { font-size: 12px; letter-spacing: 1px; margin-bottom: 12px; }
.fc    { font-size: 10px; letter-spacing: 1px; }

/* ── Product spec table bigger ── */
.sr    { display: flex; justify-content: space-between; align-items: center;
         padding: 8px 0; border-bottom: 1px solid var(--b1); }
.sr:last-child { border-bottom: none; }

/* ── Product page hero background text ── */
.ps-bg-text {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none; overflow: hidden; z-index: 0;
}
.ps-bg-text span {
  font-family: var(--ff); font-size: clamp(80px, 14vw, 180px); letter-spacing: 2px;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.04);
  white-space: nowrap; user-select: none; line-height: 1;
}
.psh { position: relative; }
.psh .wrap.psgrid { position: relative; z-index: 1; }

/* ── Product colour picker on product pages ── */
.prod-color-section {
  background: var(--bg3); border: 1px solid var(--b1); border-radius: 10px;
  padding: 28px 30px; margin-top: 28px;
}
.prod-color-section h3 {
  font-family: var(--ff); font-size: 20px; letter-spacing: 3px; margin-bottom: 18px;
  color: var(--ac, var(--p));
}
.prod-color-row { display: flex; flex-direction: column; gap: 20px; }
.prod-color-group label {
  font-size: 12px; letter-spacing: 2px; color: var(--t3); display: block; margin-bottom: 10px;
}
.prod-color-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.prod-swatch {
  width: 34px; height: 34px; border-radius: 50%; border: 2px solid transparent;
  cursor: none; transition: all .2s; position: relative;
}
.prod-swatch:hover { transform: scale(1.18); }
.prod-swatch.active { border-color: #fff; transform: scale(1.28); }
.prod-swatch-label {
  font-size: 11px; color: var(--t2); margin-top: 6px; letter-spacing: 1px;
}

/* ── Product info cards (descriptions) ── */
.prod-info-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px;
}
.prod-info-card {
  background: var(--bg3); border: 1px solid var(--b1); border-radius: 8px;
  padding: 24px 26px;
}
.prod-info-card .pic-title {
  font-family: var(--ff); font-size: 18px; letter-spacing: 2px; margin-bottom: 10px;
  color: var(--ac, var(--p));
}
.prod-info-card p { font-size: 13px; color: var(--t2); line-height: 1.85; }

/* ── Product comparison gallery ── */
.prod-compare-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px; margin-top: 30px;
}
.prod-compare-card {
  background: var(--bg3); border: 1px solid var(--b1); border-radius: 8px;
  overflow: hidden; transition: all .3s;
}
.prod-compare-card:hover { border-color: var(--ac, var(--p)); transform: translateY(-4px); }
.prod-compare-card img { width: 100%; height: 200px; object-fit: cover; filter: brightness(.85); transition: filter .3s; }
.prod-compare-card:hover img { filter: brightness(1); }
.prod-compare-card .pcc-body { padding: 16px 18px; }
.prod-compare-card .pcc-title { font-family: var(--ff); font-size: 16px; letter-spacing: 2px; margin-bottom: 6px; }
.prod-compare-card .pcc-desc { font-size: 12px; color: var(--t2); line-height: 1.75; }

/* ── Cross-section diagram strip ── */
.cross-section-strip {
  display: flex; gap: 0; overflow-x: auto; margin: 30px 0;
  border: 1px solid var(--b1); border-radius: 8px; overflow: hidden;
}
.cs-layer {
  flex: 1; min-width: 80px; padding: 18px 12px; text-align: center;
  border-right: 1px solid var(--b1); display: flex; flex-direction: column;
  align-items: center; gap: 8px;
}
.cs-layer:last-child { border-right: none; }
.cs-layer-icon { font-size: 22px; }
.cs-layer-name { font-size: 11px; letter-spacing: 1px; color: var(--t2); font-weight: 600; }
.cs-layer-desc { font-size: 10px; color: var(--t3); line-height: 1.5; }

/* ── ═══ MOBILE IMPROVEMENTS ═══ ── */
@media (max-width: 900px) {
  .intro { font-size: 15px; }
  .h1    { font-size: clamp(32px, 8vw, 60px); }
  .prod-info-grid { grid-template-columns: 1fr; }
  .cross-section-strip { flex-direction: column; }
  .cs-layer { border-right: none; border-bottom: 1px solid var(--b1); }
  .cs-layer:last-child { border-bottom: none; }
}
@media (max-width: 768px) {
  body { font-size: 15px; }
  .intro { font-size: 16px; line-height: 1.9; }
  .sub   { font-size: 12px; }
  .pdesc { font-size: 14px; }
  .psd   { font-size: 14px; }
  .wd    { font-size: 14px; }
  .hfq-a { font-size: 14px; }
  .sk    { font-size: 13px; }
  .sv    { font-size: 14px; }
  .fqq   { font-size: 14px; letter-spacing: 1px; }
  .nl    { font-size: 12px; }
  .fbd   { font-size: 14px; }
  .prl   { font-size: 13px; }
  .prv   { font-size: 14px; }
  .albl  { font-size: 14px; }
  .ap    { font-size: 13px; }
  .csh   { font-size: 13px; }
  .ps-bg-text span { font-size: clamp(60px, 18vw, 120px); }
  .prod-compare-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  body   { font-size: 15px; }
  .intro { font-size: 16px; }
  .h1    { font-size: clamp(30px, 9vw, 55px); }
  .pname { font-size: 22px; }
  .sk, .sv { font-size: 14px; }
  .vcb   { font-size: 11px; padding: 8px 13px; }
  .prod-color-section { padding: 20px 16px; }
}

/* ── Preview3D section ──────────────────────────────────────────── */
#prev3d { cursor: grab; }
#prev3d:active { cursor: grabbing; }
@media (max-width: 600px) {
  #prev3d { height: 260px !important; }
  #prev3d + div { display: none !important; } /* hide hint on mobile, too small */
}

/* ── Sample sign cards ──────────────────────────────────────────── */
.sign-card { 
  transition: transform .2s ease, box-shadow .2s ease !important; 
  user-select: none;
}
.sign-card:hover { transform: scale(1.04) !important; }

/* ── Preview top controls responsive ───────────────────────────── */
@media (max-width: 500px) {
  #prev3d-txt { width: 100px !important; font-size: 10px !important; }
}

/* ══════════════════════════════════════════════════════════════════
   COMBINED 3D PREVIEW + COLOR PICKER LAYOUT
   ══════════════════════════════════════════════════════════════════ */

/* Grid: canvas left, controls right */
.prev3d-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 18px;
  align-items: start;
}
@media (max-width: 900px) {
  .prev3d-grid { grid-template-columns: 1fr; }
}

/* Controls panel */
.prev3d-panel {
  background: #0a0a0a;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 320px;
}
.prev3d-label {
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--ac, #39FF14);
  margin-bottom: 9px;
  font-family: var(--fm);
}
.prev3d-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.prev3d-input {
  flex: 1;
  background: #0e0e0e;
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--ac, #39FF14);
  font-family: var(--fm);
  font-size: 12px;
  letter-spacing: 3px;
  padding: 10px 14px;
  border-radius: 6px;
  outline: none;
  text-transform: uppercase;
  width: 100%;
  transition: border-color .2s;
}
.prev3d-input:focus { border-color: var(--ac, #39FF14); }

/* Color swatches in panel */
.cp-row { display: flex; flex-wrap: wrap; gap: 7px; }
.cp-sw {
  width: 26px; height: 26px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform .15s, border-color .15s, box-shadow .15s;
  flex-shrink: 0;
}
.cp-sw:hover { transform: scale(1.18); }
.cp-sw.active {
  border-color: #fff !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.3), 0 0 12px currentColor;
  transform: scale(1.12);
}
.cp-name {
  font-size: 10px;
  color: #555;
  letter-spacing: 1px;
  margin-top: 7px;
  font-family: var(--fm);
  min-height: 14px;
}

/* Canvas wrapper */
.prev3d-canvas-wrap {
  position: relative;
  background: #050505;
  border: 1px solid rgba(57,255,20,0.25);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.85);
}
.prev3d-canvas-wrap canvas {
  width: 100% !important;
  display: block;
  cursor: grab;
}
.prev3d-canvas-wrap canvas:active { cursor: grabbing; }
.prev3d-hint {
  position: absolute;
  bottom: 12px; left: 0; right: 0;
  text-align: center;
  font-size: 8px;
  letter-spacing: 3px;
  color: #252525;
  pointer-events: none;
  font-family: var(--fm);
}

/* Feature chips below canvas */
.prev3d-chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.prev3d-chip {
  font-size: 9px;
  letter-spacing: 2px;
  border-radius: 6px;
  padding: 10px 12px;
  text-align: center;
  font-family: var(--fm);
  border: 1px solid;
}

/* ══════════════════════════════════════════════════════════════════
   SIGN 3D CARD — rendered thumbnail images
   ══════════════════════════════════════════════════════════════════ */
.sign3d-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
.sign3d-card {
  background: #060606;
  border-radius: 10px;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
  cursor: default;
  border: 1px solid rgba(255,255,255,0.05);
}
.sign3d-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 40px rgba(0,0,0,.6);
}
.sign3d-img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  display: block;
  background: #0a0a0a;
}
/* Loading placeholder shimmer */
.sign3d-img:not([src]), .sign3d-img[src=""] {
  background: linear-gradient(90deg, #0a0a0a 25%, #141414 50%, #0a0a0a 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.sign3d-name {
  padding: 10px 14px;
  font-family: var(--ff);
  font-size: 13px;
  letter-spacing: 3px;
  color: #555;
  text-align: center;
}