/* Layout: brand-blue corporate site. Dark navy hero slider, white product stages, yellow slash as the single accent gesture (from the X in the logo). */
:root{
  --blue:#0000FF; --blue-ink:#0000CC; --yellow:#FFAB00; --sky:#0095E0;
  --bg:#FFFFFF; --surface:#F4F5FB; --line:#E2E3EE; --ink:#14142B; --muted:#5C5C78;
  --navy:#05051F; --navy-2:#0B0B33; --on-navy:#F2F2FF; --on-navy-muted:#A9A9CC;
  --stage:linear-gradient(160deg,#FFFFFF 0%,#EEF0FA 100%); --link:#0000FF;
  --display:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  --body:"Open Sans","Segoe UI",system-ui,sans-serif;
  --r:14px; --max:1200px; --gutter:clamp(16px,4vw,40px);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#08081A; --surface:#11112B; --line:#23234A; --ink:#ECECF8; --muted:#A3A3C2; --link:#8C8CFF; --stage:linear-gradient(160deg,#FFFFFF 0%,#E4E6F4 100%); color-scheme:dark}}
:root[data-theme="dark"]{--bg:#08081A; --surface:#11112B; --line:#23234A; --ink:#ECECF8; --muted:#A3A3C2; --link:#8C8CFF; --stage:linear-gradient(160deg,#FFFFFF 0%,#E4E6F4 100%); color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--display);line-height:1.12;margin:0;text-wrap:balance;letter-spacing:-.02em}
p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
img{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.eyebrow{font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--link);display:inline-flex;align-items:center;gap:.6em}
.eyebrow::before{content:"";width:18px;height:3px;background:var(--yellow);transform:skewX(-35deg)}
.h2{font-size:clamp(1.8rem,3.4vw,2.8rem);font-weight:800}
.lead{color:var(--muted);font-size:1.06rem;max-width:62ch}
.sec{padding-block:clamp(64px,9vw,120px)}
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px 40px;margin-bottom:48px}
.sec-head>div{display:grid;gap:14px;min-width:0}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:999px;font-family:var(--display);font-weight:700;font-size:.95rem;border:2px solid transparent;position:relative;overflow:hidden;transition:transform .25s,background .25s,color .25s,border-color .25s;isolation:isolate}
.btn svg{width:18px;height:18px;transition:transform .3s}
.btn:hover svg{transform:translateX(4px)}
.btn-y{background:var(--yellow);color:#14142B}
.btn-y::after{content:"";position:absolute;inset:0;background:#fff;transform:translateX(-101%);transition:transform .35s ease;z-index:-1}
.btn-y:hover::after{transform:none}
.btn-b{background:var(--blue);color:#fff}
.btn-b:hover{background:var(--blue-ink)}
.btn-o{border-color:currentColor}
.btn-o:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.on-navy .btn-o:hover{background:#fff;color:var(--navy);border-color:#fff}

/* header */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.hdr.scrolled{border-color:var(--line);box-shadow:0 8px 30px -18px rgba(0,0,60,.35)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;height:78px;transition:height .3s;gap:20px}
.hdr.scrolled .wrap{height:64px}
.logo img{height:30px;width:auto}
.logo .lw{display:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .logo .lb{display:none}:root:not([data-theme="light"]) .logo .lw{display:block}}
:root[data-theme="dark"] .logo .lb{display:none}:root[data-theme="dark"] .logo .lw{display:block}
.nav{display:flex;align-items:center;gap:6px}
.nav>a,.nav>.dd>a{font-family:var(--display);font-weight:600;font-size:.95rem;padding:10px 14px;border-radius:8px;position:relative;display:block}
.nav>a::after,.nav>.dd>a::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;background:var(--yellow);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.nav>a:hover::after,.nav>.dd:hover>a::after,.nav a.active::after{transform:scaleX(1)}
.dd{position:relative}
.mega{position:absolute;top:100%;left:50%;width:min(760px,92vw);transform:translate(-50%,10px);opacity:0;visibility:hidden;transition:.3s;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 30px 60px -30px rgba(0,0,60,.4);padding:18px;display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.dd:hover .mega,.dd:focus-within .mega{opacity:1;visibility:visible;transform:translate(-50%,0)}
.mega a{display:flex;gap:14px;align-items:center;padding:10px;border-radius:10px;transition:background .2s}
.mega a:hover{background:var(--surface)}
.mega .thumb{width:64px;height:54px;flex:none;border-radius:10px;background:var(--stage);position:relative;overflow:hidden;border:1px solid var(--line)}
.mega .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.mega b{font-family:var(--display);font-size:.92rem;display:block}
.mega small{color:var(--muted);font-size:.8rem;line-height:1.35;display:block}
.hdr-cta{display:flex;align-items:center;gap:10px}
.hdr-cta .btn{padding:10px 20px}
.burger{display:none;width:44px;height:44px;border-radius:10px;border:1px solid var(--line);background:none;color:var(--ink);position:relative}
.burger span,.burger span::before,.burger span::after{position:absolute;left:12px;width:20px;height:2px;background:currentColor;transition:.3s;content:""}
.burger span{top:21px}.burger span::before{left:0;top:-6px}.burger span::after{left:0;top:6px}
.menu-open .burger span{background:transparent}.menu-open .burger span::before{transform:translateY(6px) rotate(45deg)}.menu-open .burger span::after{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:900px){
  .burger{display:block}
  .hdr-cta .btn{display:none}
  .nav{position:fixed;inset:64px 0 auto 0;flex-direction:column;align-items:stretch;background:var(--bg);padding:12px var(--gutter) 24px;border-bottom:1px solid var(--line);transform:translateY(-12px);opacity:0;visibility:hidden;transition:.3s}
  .menu-open .nav{opacity:1;visibility:visible;transform:none}
  .mega{display:none}
  .nav>a,.nav>.dd>a{padding:14px 4px;font-size:1.05rem;border-bottom:1px solid var(--line);border-radius:0}
}

/* page system */
.page{display:none}
.page.show{display:block;animation:pageIn .6s cubic-bezier(.2,.7,.2,1)}
@keyframes pageIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* hero slider */
.hero{position:relative;background:var(--navy);color:var(--on-navy);overflow:hidden;isolation:isolate}
.hero .grid-bg{position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(120,120,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(120,120,255,.08) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse at 70% 50%,#000 20%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at 70% 50%,#000 20%,transparent 75%);animation:gridMove 30s linear infinite}
@keyframes gridMove{to{background-position:56px 56px,56px 56px}}
.hero .glow{position:absolute;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle,rgba(0,0,255,.55),transparent 65%);right:-120px;top:-160px;z-index:-1;filter:blur(10px);animation:float 9s ease-in-out infinite alternate}
@keyframes float{to{transform:translate(-60px,60px)}}
.slides{position:relative;min-height:clamp(640px,86vh,860px)}
.slide{position:absolute;inset:0;isolation:isolate;opacity:0;visibility:hidden;transition:opacity 1s,visibility 1s;display:grid}
.slide.on{opacity:1;visibility:visible}
.slide .bg{position:absolute;inset:0;overflow:hidden;z-index:-1}
.slide .bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.15);transition:transform 8s linear}
.slide.on .bg img{transform:scale(1)}
.slide .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,5,31,.94) 0%,rgba(5,5,31,.78) 45%,rgba(5,5,31,.35) 100%),linear-gradient(0deg,rgba(5,5,31,.85),transparent 40%)}
.slide .inner{position:relative;width:100%;display:grid;grid-template-columns:1fr 1.15fr;align-items:center;gap:24px;padding-block:40px 100px}
.slide .txt{display:grid;gap:22px;min-width:0}
.slide .txt>*{opacity:0;transform:translateY(28px)}
.slide.on .txt>*{animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards}
.slide.on .txt>*:nth-child(2){animation-delay:.12s}.slide.on .txt>*:nth-child(3){animation-delay:.24s}.slide.on .txt>*:nth-child(4){animation-delay:.36s}
@keyframes rise{to{opacity:1;transform:none}}
.hero .eyebrow{color:var(--yellow)}
.hero h1,.hero .sh{font-size:clamp(2.4rem,5.6vw,4.6rem);font-weight:800;letter-spacing:-.035em}
.hero h1 em,.hero .sh em{font-style:normal;color:var(--yellow)}
.hero p{color:#C9C9E6;font-size:1.1rem;max-width:46ch}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap}
.slide .pic{position:relative;height:clamp(420px,70vh,700px);display:grid;place-items:center}
.slide .pic>img{width:128%!important;height:128%!important;max-width:none;margin:-14%}
.slide .pic::before{content:"";position:absolute;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(40,60,255,.55),transparent 65%);filter:blur(8px)}
.slide .pic img{position:relative;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6));opacity:0;transform:translateX(60px) scale(.94);transition:opacity 1s .2s,transform 1.1s .2s cubic-bezier(.2,.7,.2,1)}
.slide.on .pic img{opacity:1;transform:none;animation:bob 6s ease-in-out 1.3s infinite}
@keyframes bob{50%{transform:translateY(-10px)}}
.hero-ctrl{position:absolute;left:0;right:0;bottom:28px;z-index:3}
.hero-ctrl .wrap{display:flex;align-items:center;gap:22px}
.dots{display:flex;gap:10px}
.dots button{width:46px;height:4px;border:0;padding:0;background:rgba(255,255,255,.22);border-radius:4px;overflow:hidden;position:relative}
.dots button i{position:absolute;inset:0;background:var(--yellow);transform:scaleX(0);transform-origin:left}
.dots button.on i{animation:prog 6s linear forwards}
.dots button.done i{transform:scaleX(1)}
@keyframes prog{to{transform:scaleX(1)}}
.counter{font-family:var(--display);font-weight:700;color:var(--on-navy-muted);font-size:.9rem;font-variant-numeric:tabular-nums}
.counter b{color:#fff}
.arrows{margin-left:auto;display:flex;gap:8px}
.arrows button{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;display:grid;place-items:center;transition:.25s}
.arrows button:hover{background:var(--yellow);border-color:var(--yellow);color:#14142B}
.arrows svg{width:18px;height:18px}
@media (max-width:900px){
  .slides{min-height:880px}
  .slide .inner{grid-template-columns:1fr;gap:10px;align-content:start;padding-block:44px 100px}
  .slide .pic{height:320px}
  .slash{display:none}
  .arrows{display:none}
}

/* category strip */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:-1px}
.cat{position:relative;border-radius:var(--r);background:var(--surface);padding:26px 24px 24px;overflow:hidden;display:grid;gap:12px;min-height:270px;grid-template-rows:auto auto 1fr;transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
.cat:hover{transform:translateY(-8px);box-shadow:0 30px 50px -30px rgba(0,0,120,.45)}
.cat .num{font-family:var(--display);font-size:.8rem;font-weight:700;color:var(--muted);letter-spacing:.1em}
.cat h3{font-size:1.25rem;font-weight:700}
.cat .img{align-self:end;justify-self:end;height:170px;width:78%;position:relative;transition:transform .5s}
.cat .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 12px 14px rgba(0,0,40,.18))}
.cat:hover .img{transform:scale(1.07) translateX(-6px)}
.cat .go{position:absolute!important;left:24px;bottom:24px;width:40px;height:40px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;transition:.3s}
.cat:hover .go{background:var(--yellow);color:#14142B;transform:rotate(-45deg)}
.cat .go svg{width:18px;height:18px}
@media (max-width:1000px){.cats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.cats{grid-template-columns:1fr}}

/* feature showcase */
.show{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,80px);align-items:center}
.show .stage{background:var(--stage);border-radius:24px;position:relative;overflow:hidden;aspect-ratio:4/3.2;display:grid;place-items:center;max-width:100%}
.show .stage::before{content:"";position:absolute;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(0,0,255,.12),transparent 70%);animation:pulse 4s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.2)}}
.show .stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:4%;filter:drop-shadow(0 24px 28px rgba(0,0,40,.22));transition:transform .6s}
.show .stage:hover img{transform:scale(1.04) rotate(-1deg)}
.show .stage .tag{position:absolute;left:20px;top:20px;background:var(--blue);color:#fff;font-family:var(--display);font-weight:700;font-size:.78rem;padding:6px 12px;border-radius:999px;letter-spacing:.06em}
.show .txt{display:grid;gap:20px;min-width:0}
.ticks{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}
.ticks li{display:flex;gap:10px;align-items:flex-start;font-size:.95rem}
.ticks li::before{content:"";flex:none;width:18px;height:18px;margin-top:3px;border-radius:50%;background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/11px no-repeat}
@media (max-width:860px){.show{grid-template-columns:1fr}.ticks{grid-template-columns:1fr}}
.models{display:flex;flex-wrap:wrap;gap:8px}
.models span{font-family:var(--display);font-weight:600;font-size:.85rem;padding:7px 14px;border:1px solid var(--line);border-radius:999px;font-variant-numeric:tabular-nums;transition:.2s}
.models span:hover{border-color:var(--blue);color:var(--link)}

/* numbers band */
.band{background:var(--navy);color:var(--on-navy);position:relative;overflow:hidden}
.band .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(5,5,31,.92),rgba(5,5,31,.7) 60%,rgba(0,0,120,.55))}
.stats{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.stat{display:grid;gap:8px;border-left:2px solid rgba(255,255,255,.12);padding-left:22px}
.stat .v{font-family:var(--display);font-weight:800;font-size:clamp(2.2rem,4.6vw,3.6rem);letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.stat .v small{font-size:.45em;color:var(--yellow);margin-left:4px;font-weight:700}
.stat p{color:var(--on-navy-muted);font-size:.92rem}
@media (max-width:800px){.stats{grid-template-columns:repeat(2,1fr)}}

/* applications */
.apps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.app{border:1px solid var(--line);border-radius:var(--r);padding:24px;display:grid;gap:14px;transition:.35s;background:var(--bg)}
.app:hover{border-color:var(--blue);transform:translateY(-4px)}
.app svg{width:34px;height:34px;color:var(--link);transition:transform .4s}
.app:hover svg{transform:scale(1.15) rotate(-6deg)}
.app h4{font-size:1.02rem;font-weight:700}
.app p{color:var(--muted);font-size:.88rem;line-height:1.55}
@media (max-width:1000px){.apps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.apps{grid-template-columns:1fr}}

/* marquee */
.marq{overflow:hidden;border-block:1px solid var(--line);padding-block:22px;background:var(--surface)}
.marq .row{display:flex;gap:56px;width:max-content;animation:marq 32s linear infinite}
.marq:hover .row{animation-play-state:paused}
.marq span{font-family:var(--display);font-weight:800;font-size:clamp(1.3rem,2.4vw,2rem);letter-spacing:-.02em;white-space:nowrap;display:flex;align-items:center;gap:56px;color:var(--ink)}
.marq span::after{content:"";width:12px;height:30px;background:var(--yellow);transform:skewX(-28deg)}
@keyframes marq{to{transform:translateX(-50%)}}

/* cta */
.cta{background:linear-gradient(100deg,rgba(0,0,255,.96) 35%,rgba(0,0,200,.7)),url(img/bg-servers.jpg) center/cover;color:#fff;border-radius:28px;padding:clamp(36px,6vw,70px);position:relative;overflow:hidden;display:grid;grid-template-columns:1.4fr auto;gap:30px;align-items:center}
.cta::after{content:"";position:absolute;width:40px;height:220%;background:var(--yellow);right:24%;top:-60%;transform:rotate(28deg);opacity:.9;animation:sweep 6s ease-in-out infinite alternate}
@keyframes sweep{to{right:34%}}
.cta>*{position:relative;z-index:1}
.cta h2{font-size:clamp(1.7rem,3.2vw,2.6rem);font-weight:800}
.cta p{color:#D6D6FF;margin-top:12px;max-width:52ch}
@media (max-width:800px){.cta{grid-template-columns:1fr}.cta::after{right:6%}}

/* products page */
.pghead{background:var(--navy);color:var(--on-navy);position:relative;overflow:hidden;padding-block:clamp(60px,8vw,100px)}
.pghead .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;animation:kb 18s ease-in-out infinite alternate}
@keyframes kb{to{transform:scale(1.08)}}
.pghead::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,5,31,.95) 20%,rgba(5,5,31,.5))}
.pghead .wrap{z-index:1}
.pghead .grid-bg{z-index:1;position:absolute;inset:0;background-image:linear-gradient(rgba(120,120,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(120,120,255,.08) 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(90deg,transparent,#000);-webkit-mask-image:linear-gradient(90deg,transparent,#000)}
.pghead .wrap{position:relative;display:grid;gap:16px}
.pghead h1{font-size:clamp(2.2rem,5vw,3.8rem);font-weight:800}
.pghead p{color:var(--on-navy-muted);max-width:60ch;font-size:1.06rem}
.pghead .eyebrow{color:var(--yellow)}
.crumbs{font-size:.85rem;color:var(--on-navy-muted);display:flex;gap:8px;flex-wrap:wrap}
.crumbs a:hover{color:#fff}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:36px}
.filters button{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:999px;padding:10px 18px;font-family:var(--display);font-weight:600;font-size:.9rem;transition:.25s}
.filters button:hover{border-color:var(--blue)}
.filters button.on{background:var(--blue);border-color:var(--blue);color:#fff}
.pgrid{display:grid;align-items:start;grid-template-columns:repeat(3,1fr);gap:22px}
.pcard{border:1px solid var(--line);border-radius:18px;overflow:hidden;display:grid;grid-template-rows:auto 1fr;background:var(--bg);transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s,border-color .3s}
.pcard:hover{transform:translateY(-8px);box-shadow:0 30px 50px -30px rgba(0,0,120,.4);border-color:transparent}
.pcard .im{background:var(--stage);aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden;position:relative;max-width:100%}
.pcard .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:4%;filter:drop-shadow(0 14px 18px rgba(0,0,40,.18));transition:transform .6s}
.pcard:hover .im img{transform:scale(1.08)}
.pcard .im .badge{position:absolute;left:14px;top:14px;font-size:.72rem;font-family:var(--display);font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:#EEF0FF;color:#0000CC;padding:5px 10px;border-radius:999px}
.pcard .bd{padding:22px;display:grid;gap:8px;align-content:start}
.pcard h3{font-size:1.15rem;font-weight:700}
.pcard .model{font-family:var(--display);font-weight:600;font-size:.82rem;color:var(--muted);letter-spacing:.04em}
.pcard p{color:var(--muted);font-size:.92rem;line-height:1.55}
.pcard .more{margin-top:10px;font-family:var(--display);font-weight:700;font-size:.9rem;color:var(--link);display:inline-flex;gap:8px;align-items:center}
.pcard .more svg{width:16px;height:16px;transition:transform .3s}
.pcard:hover .more svg{transform:translateX(5px)}
.pcard.hide{display:none}
@media (max-width:980px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.pgrid{grid-template-columns:1fr}}

/* product detail */
.pd{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(30px,5vw,70px);align-items:start}
.gal{display:grid;gap:14px;position:sticky;top:100px;min-width:0}
.gal .main{background:var(--stage);border-radius:22px;border:1px solid var(--line);aspect-ratio:1/0.85;position:relative;overflow:hidden;max-width:100%}
.gal .main img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:3%;filter:drop-shadow(0 20px 24px rgba(0,0,40,.2));animation:zoomIn .6s cubic-bezier(.2,.7,.2,1)}
@keyframes zoomIn{from{opacity:0;transform:scale(.92)}}
.gal .th{display:flex;gap:10px;flex-wrap:wrap}
.gal .th button{width:84px;height:70px;border-radius:12px;border:2px solid var(--line);background:var(--stage);padding:6px;transition:.2s}
.gal .th button img{width:100%;height:100%;object-fit:contain}
.gal .th button{background:var(--stage)}
.gal .th button.on{border-color:var(--blue)}
.pinfo{display:grid;gap:20px;min-width:0}
.pinfo h1{font-size:clamp(2rem,4vw,3rem);font-weight:800}
.pinfo .model{font-family:var(--display);font-weight:600;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{background:var(--surface);border-radius:8px;padding:7px 12px;font-size:.85rem;font-weight:600}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-top:10px;overflow-x:auto}
.tabs button{background:none;border:0;padding:14px 18px;font-family:var(--display);font-weight:700;color:var(--muted);position:relative;white-space:nowrap}
.tabs button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--blue);transform:scaleX(0);transition:transform .3s}
.tabs button.on{color:var(--ink)}.tabs button.on::after{transform:none}
.tpanel{display:none;animation:pageIn .45s}
.tpanel.on{display:block}
.tscroll{overflow-x:auto}
table.spec{width:100%;border-collapse:collapse;font-size:.92rem;font-variant-numeric:tabular-nums}
table.spec th,table.spec td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
table.spec th{font-weight:600;color:var(--muted);width:44%;font-family:var(--body)}
table.spec tr.grp td{background:var(--blue);color:#fff;font-family:var(--display);font-weight:700;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;padding:8px 14px}
table.spec thead th{background:var(--surface);color:var(--ink);font-family:var(--display);font-weight:700;width:auto}
.feat-list{display:grid;gap:12px;padding:0;margin:0;list-style:none}
.feat-list li{display:flex;gap:12px;padding:14px 16px;background:var(--surface);border-radius:12px;font-size:.95rem}
.feat-list li b{font-family:var(--display);color:var(--link);font-variant-numeric:tabular-nums}
@media (max-width:900px){.pd{grid-template-columns:1fr}.gal{position:static}}
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:900px){.related{grid-template-columns:1fr}}

/* about */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,80px);align-items:center}
.split .txt{display:grid;gap:18px;min-width:0}
.split .vis{position:relative;border-radius:24px;overflow:hidden;background:var(--navy);height:480px;max-width:100%}
.split .vis .bgp{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.6}
.split .vis .prod{position:absolute;inset:6% 0 4%;width:100%;height:90%;object-fit:contain;filter:drop-shadow(0 30px 30px rgba(0,0,0,.6))}
.split .vis .slash{right:10%;opacity:1;z-index:0}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.val{padding:30px;border-radius:var(--r);background:var(--surface);display:grid;gap:12px;align-content:start}
.val h3{font-size:1.2rem}
.val p{color:var(--muted);font-size:.94rem}
.val .ic{width:48px;height:48px;border-radius:12px;background:var(--blue);display:grid;place-items:center;color:#fff}
.val .ic svg{width:24px;height:24px}
@media (max-width:860px){.values{grid-template-columns:1fr}}
.offices{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.office{border:1px solid var(--line);border-radius:var(--r);padding:28px;display:grid;gap:8px}
.office .rg{font-family:var(--display);font-weight:800;font-size:1.5rem}
.office p{color:var(--muted)}
@media (max-width:700px){.offices{grid-template-columns:1fr}}

/* contact */
.contact{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(30px,5vw,60px);align-items:start}
.cinfo{display:grid;gap:16px}
.cbox{background:var(--surface);border-radius:var(--r);padding:22px;display:grid;gap:6px}
.cbox h4{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
.cbox .big{font-family:var(--display);font-weight:700;font-size:1.1rem;word-break:break-word;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.copy{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:8px;font-size:.78rem;padding:4px 10px;font-family:var(--display);font-weight:600}
form.f{border:1px solid var(--line);border-radius:22px;padding:clamp(22px,4vw,40px);display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fld{display:grid;gap:6px;min-width:0}
.fld.full{grid-column:1/-1}
.fld label{font-family:var(--display);font-weight:600;font-size:.88rem}
.fld input,.fld select,.fld textarea{width:100%;font:inherit;font-size:.95rem;padding:13px 14px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);transition:border-color .2s,box-shadow .2s}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,0,255,.12)}
.fld textarea{min-height:130px;resize:vertical}
.fld .err{color:#D93025;font-size:.8rem;min-height:1em}
.f .ok{grid-column:1/-1;background:#E8F7EE;color:#0B6B33;border-radius:10px;padding:14px 16px;font-weight:600}
@media (max-width:860px){.contact{grid-template-columns:1fr}form.f{grid-template-columns:1fr}}
.support{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:860px){.support{grid-template-columns:1fr}}
details.faq{border-bottom:1px solid var(--line);padding-block:18px}
details.faq summary{cursor:pointer;font-family:var(--display);font-weight:700;font-size:1.05rem;list-style:none;display:flex;justify-content:space-between;gap:16px}
details.faq summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--link);transition:transform .3s}
details.faq[open] summary::after{transform:rotate(45deg)}
details.faq p{color:var(--muted);margin-top:10px;max-width:70ch}

/* footer */
footer{background:var(--navy);color:var(--on-navy-muted);padding-block:70px 30px;margin-top:0}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px}
footer h5{font-family:var(--display);color:#fff;font-size:.9rem;letter-spacing:.12em;text-transform:uppercase;margin:0 0 16px}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:10px;font-size:.93rem}
footer a:hover{color:var(--yellow)}
footer .tag{font-family:var(--display);font-weight:800;color:#fff;font-size:1.2rem;margin-top:18px}
footer .bot{border-top:1px solid rgba(255,255,255,.1);margin-top:50px;padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.85rem}
@media (max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.fgrid{grid-template-columns:1fr}}

.totop{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));width:48px;height:48px;border-radius:50%;background:var(--yellow);color:#14142B;border:0;display:grid;place-items:center;z-index:40;opacity:0;transform:translateY(20px);transition:.3s;box-shadow:0 10px 30px -10px rgba(0,0,0,.5)}
.totop.show{opacity:1;transform:none}
.totop svg{width:20px;height:20px}


/* ===== product theme FX ===== */
.fxl{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.slide .fxl{z-index:-1}
.pghead::after{z-index:0}.pghead .fxl{z-index:1}.pghead .wrap{z-index:2}
.flow{fill:none;stroke:#FFAB00;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:2 18;animation:flow 1.6s linear infinite;opacity:.75;filter:drop-shadow(0 0 6px rgba(255,171,0,.9))}
.flow.b{stroke:#3CE37A;animation-duration:2.2s;opacity:.55;filter:drop-shadow(0 0 6px rgba(60,227,122,.9))}
@keyframes flow{to{stroke-dashoffset:-80}}
.flash{position:absolute;inset:0;background:radial-gradient(ellipse at 70% 10%,rgba(200,210,255,.95),rgba(120,120,255,.35) 40%,transparent 70%);opacity:0;animation:flash 7s infinite;mix-blend-mode:screen}
@keyframes flash{0%,58%,100%{opacity:0}59%{opacity:.9}60%{opacity:.15}62%{opacity:1}64%{opacity:0}78%{opacity:0}79%{opacity:.6}80%{opacity:0}}
.bolt{position:absolute;right:26%;top:-4%;height:78%;width:auto;fill:#fff;opacity:0;filter:drop-shadow(0 0 14px #9DB4FF) drop-shadow(0 0 40px #6A7BFF);animation:boltA 7s infinite}
.bolt.s2{right:8%;height:55%;transform:scaleX(-1);animation-delay:1.3s}
@keyframes boltA{0%,58%,100%{opacity:0}59%,62%{opacity:1}60%{opacity:.2}65%{opacity:0}}
.fx-spd .bg img,.cat.c-spd .cbg,.dhead.t-spd .ph,#pg-products .pghead.t-spd .ph{animation:flick 7s infinite}
@keyframes flick{0%,58%,66%,100%{filter:brightness(1)}59%,62%{filter:brightness(2.1) saturate(1.3)}60%{filter:brightness(1.2)}}
.scan{position:absolute;left:0;right:0;height:160px;top:-160px;background:linear-gradient(transparent,rgba(0,149,224,.22),rgba(140,220,255,.35) 50%,rgba(0,149,224,.22),transparent);animation:scan 4.5s linear infinite}
@keyframes scan{to{top:100%}}
.leds{position:absolute;inset:0}
.leds i{position:absolute;width:6px;height:6px;border-radius:50%;background:#3CE37A;box-shadow:0 0 10px #3CE37A;animation:blink 1.4s steps(2,jump-none) infinite}
.leds i:nth-child(3n){background:#FFAB00;box-shadow:0 0 10px #FFAB00;animation-duration:.9s}
.leds i:nth-child(4n){background:#0095E0;box-shadow:0 0 10px #0095E0;animation-duration:2.1s}
@keyframes blink{50%{opacity:.15}}
.wave{position:absolute;left:0;bottom:12%;width:200%;height:140px;animation:wave 5s linear infinite}
.wave path{fill:none;stroke:#C77DFF;stroke-width:2.5;filter:drop-shadow(0 0 8px #C77DFF)}
.wave path.w2{stroke:#FFAB00;opacity:.6;stroke-width:1.5;filter:drop-shadow(0 0 6px #FFAB00)}
@keyframes wave{to{transform:translateX(-50%)}}
.fx-avr .bg img{animation:arc 3.2s infinite}
@keyframes arc{0%,100%{filter:brightness(1)}45%{filter:brightness(1)}48%{filter:brightness(1.7)}52%{filter:brightness(1.05)}55%{filter:brightness(1.5)}60%{filter:brightness(1)}}
.rings{position:absolute;left:58%;top:22%}
.rings i{position:absolute;left:-30px;top:-30px;width:60px;height:60px;border-radius:50%;border:2px solid rgba(255,171,0,.8);animation:ring 3s ease-out infinite;opacity:0}
.rings i:nth-child(2){animation-delay:1s}.rings i:nth-child(3){animation-delay:2s}
@keyframes ring{0%{transform:scale(.2);opacity:1}100%{transform:scale(7);opacity:0}}
/* glass badge */
.fxbadge{display:inline-flex;align-items:center;gap:14px;padding:14px 20px 14px 16px;border-radius:16px;background:rgba(10,10,40,.55);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;box-shadow:0 20px 40px -20px rgba(0,0,0,.7);font-family:var(--display)}
.fxbadge small{display:block;color:#B9B9DD;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.fxbadge b{font-size:1.15rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.fxbadge svg{flex:none}
.slide .pic .fxbadge{position:absolute;left:0;bottom:4%;z-index:2;animation:bob 5s ease-in-out infinite reverse}
.bat .lvl{fill:#3CE37A}
.shield{animation:shieldA 7s infinite;border-radius:12px}
@keyframes shieldA{0%,58%,70%,100%{filter:none}59%,64%{filter:drop-shadow(0 0 12px #FFAB00) drop-shadow(0 0 22px #FFAB00)}}
.minileds{display:grid;grid-template-columns:repeat(4,8px);gap:5px}
.minileds i{width:8px;height:8px;border-radius:2px;background:#3CE37A;box-shadow:0 0 8px #3CE37A;animation:blink 1.2s steps(2,jump-none) infinite}
.minileds i:nth-child(2n){animation-duration:.8s}.minileds i:nth-child(3n){background:#FFAB00;box-shadow:0 0 8px #FFAB00;animation-duration:1.7s}
.bars i{display:inline-block;width:5px;margin-right:3px;border-radius:2px;background:#FFAB00;vertical-align:bottom;animation:barA 1.6s ease-in-out infinite}
.bars i:nth-child(1){height:8px}.bars i:nth-child(2){height:14px;animation-delay:.15s}.bars i:nth-child(3){height:20px;animation-delay:.3s}.bars i:nth-child(4){height:26px;animation-delay:.45s}
@keyframes barA{0%,100%{opacity:.25}40%{opacity:1}}
.mwave{animation:wave 1.6s linear infinite}
/* detail header */
.dhead{padding-block:clamp(56px,7vw,96px)}
.dwrap{display:flex!important;justify-content:space-between;align-items:flex-end;gap:24px 40px;flex-wrap:wrap}
.dwrap>div:first-child{display:grid;gap:14px;min-width:0;max-width:720px}
.dhead .dtt{font-family:var(--display);font-weight:800;line-height:1.12;letter-spacing:-.02em;text-wrap:balance;font-size:clamp(2rem,4.4vw,3.4rem);color:#fff}
.pghead .ph{transition:opacity .5s}
/* themed category cards */
.cat{background:#0B0B2A;color:#fff;min-height:320px}
.cat .cbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.6;transition:transform .9s cubic-bezier(.2,.7,.2,1),opacity .5s}
.cat::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(5,5,31,.85) 0%,rgba(5,5,31,.25) 55%,rgba(5,5,31,.7) 100%)}
.cat:hover .cbg{transform:scale(1.1);opacity:.85}
.cat>*:not(.cbg):not(.fxl){position:relative;z-index:1}
.cat .fxl{z-index:0}
.cat .num{color:#C9C9E6}
.cat .go{z-index:2}
.cat .img img{filter:drop-shadow(0 18px 20px rgba(0,0,0,.6))}


.fx-ups .bg img{filter:brightness(.5) saturate(.7) hue-rotate(10deg)}
.fx-spd .bg::after{background:linear-gradient(90deg,rgba(5,5,31,.9) 0%,rgba(5,5,31,.55) 45%,rgba(5,5,31,.05) 100%),linear-gradient(0deg,rgba(5,5,31,.7),transparent 35%)}
.fx-spd .bg img{object-position:70% 30%}
.dhead::after,#pg-products .pghead::after{background:linear-gradient(90deg,rgba(5,5,31,.92) 15%,rgba(5,5,31,.45) 65%,rgba(5,5,31,.2))}
.dhead .ph,#pg-products .pghead .ph{opacity:.9}
.c-ups .cbg{filter:brightness(.6)}
@media (max-width:900px){.slide .pic .fxbadge{left:auto;right:0;bottom:0;padding:10px 14px}.fxbadge b{font-size:1rem}}

/* compare */
.cmp-nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:40px}
.cmp-nav a{border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-family:var(--display);font-weight:600;font-size:.9rem;transition:.2s}
.cmp-nav a:hover{border-color:var(--blue);color:var(--link)}
.cmp{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(24px,4vw,56px);padding-block:48px;border-top:1px solid var(--line);scroll-margin-top:90px}
.cmp>div{display:grid;gap:16px;align-content:start;min-width:0}
.cmp h2{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.alts{display:flex;flex-wrap:wrap;gap:8px}
.alts span{background:var(--surface);border-radius:8px;padding:7px 12px;font-size:.86rem;font-weight:600}
.cmp .faq summary{font-size:1rem}
@media (max-width:860px){.cmp{grid-template-columns:1fr}}
.ml{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
.ml .val p{font-size:.9rem}
.ml .val{background:var(--surface)}
@media (max-width:1000px){.ml{grid-template-columns:1fr 1fr}}@media (max-width:640px){.ml{grid-template-columns:1fr}}
.repl{margin-top:26px;border:1px dashed var(--line);border-radius:14px;padding:18px 20px;display:grid;gap:10px}
.repl b{font-family:var(--display)}
.repl a{color:var(--link);font-family:var(--display);font-weight:700}
.note{color:var(--muted);font-size:.8rem;margin-top:30px;max-width:90ch}

/* distributor */
.dist{margin-top:22px;border-radius:28px;padding:clamp(30px,5vw,56px);background:var(--surface);display:grid;grid-template-columns:1.3fr auto;gap:24px 40px;align-items:center;border:1px solid var(--line)}
.dist-txt{display:grid;gap:12px;min-width:0}
.dist h2{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:800}
.dist p{color:var(--muted);max-width:60ch}
.dist-cta{display:flex;flex-direction:column;gap:10px;align-items:stretch}
@media (max-width:800px){.dist{grid-template-columns:1fr}.dist-cta{align-items:flex-start}}
.steps{list-style:none;counter-reset:st;padding:0;margin:0;display:grid;gap:14px}
.steps li{counter-increment:st;display:grid;grid-template-columns:44px 1fr;column-gap:14px;align-items:start;background:var(--bg);border-radius:14px;padding:16px}
.steps li::before{content:counter(st);grid-row:span 2;width:44px;height:44px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:800}
.steps b{font-family:var(--display)}
.steps span{color:var(--muted);font-size:.93rem}
fieldset.chk{border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;flex-wrap:wrap;gap:10px 22px;margin:0}
fieldset.chk legend{font-family:var(--display);font-weight:600;font-size:.88rem;padding:0 6px}
fieldset.chk label,.consent{display:flex;gap:8px;align-items:center;font-size:.93rem;cursor:pointer}
fieldset.chk input,.consent input{width:18px;height:18px;accent-color:var(--blue)}
.f .ok .mbtn{display:inline-flex;margin-top:10px}


/* categories & coming soon */
.pcard .im .soon{position:absolute;right:14px;top:14px;font-size:.72rem;font-family:var(--display);font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--yellow);color:#14142B;padding:5px 10px;border-radius:999px;z-index:1}
.soonbox{background:#FFF4DB;color:#5A3D00;border-radius:12px;padding:12px 16px;font-size:.92rem}
.mega{width:min(1040px,94vw);grid-template-columns:repeat(5,1fr);gap:10px 14px}
.mega .mcol{display:grid;gap:4px;align-content:start;min-width:0}
.mega .mhead{font-family:var(--display);font-weight:800;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--link);padding:6px 10px!important}
.mega .mcol a{padding:8px}
.mega .thumb{width:48px;height:42px}
.cats{grid-template-columns:repeat(5,1fr)}
@media (max-width:1200px){.cats{grid-template-columns:repeat(3,1fr)}}
.hdr .wrap{position:relative}
@media (min-width:901px){.dd{position:static}.mega{left:50%;top:calc(100% - 6px)}.mega::before{content:"";position:absolute;left:0;right:0;top:-30px;height:30px}}

/* ===== UPS calculator ===== */
.calc{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px;align-items:start}
.cpanel{display:grid;gap:18px;min-width:0}
.cstep{border:1px solid var(--line);border-radius:18px;padding:clamp(18px,3vw,28px);display:grid;gap:16px;background:var(--bg)}
.cstep-h{display:flex;gap:14px;align-items:flex-start}
.cstep-h h2{font-size:1.25rem}
.cstep-h p{color:var(--muted);font-size:.92rem;margin-top:4px}
.cnum{flex:none;width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:800}
.seg{display:flex;flex-wrap:wrap;gap:6px;background:var(--surface);padding:5px;border-radius:12px}
.seg button{flex:1 1 auto;border:0;background:none;color:var(--ink);padding:10px 12px;border-radius:9px;font-family:var(--display);font-weight:600;font-size:.88rem}
.seg button.on{background:var(--bg);color:var(--link);box-shadow:0 2px 8px -3px rgba(0,0,60,.3)}
.ltable{display:grid;gap:8px}
.lrow{display:grid;grid-template-columns:minmax(0,1fr) 96px 76px 64px 36px;gap:8px;align-items:center}
.lrow.head{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-family:var(--display);font-weight:700}
.lrow input{width:100%;font:inherit;font-size:16px;padding:10px 10px;border-radius:9px;border:1px solid var(--line);background:var(--bg);color:var(--ink);min-width:0}
.lrow input:focus,.calc select:focus,.calc input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,0,255,.12)}
.lrow .sub{font-family:var(--display);font-weight:700;font-size:.9rem;text-align:right;font-variant-numeric:tabular-nums}
.lrow .del{width:34px;height:34px;border-radius:8px;border:1px solid var(--line);background:none;color:var(--muted);font-size:1.1rem;line-height:1}
.lrow .del:hover{border-color:#D93025;color:#D93025}
.lrow-add{display:flex;gap:8px;flex-wrap:wrap}
.lrow-add select{flex:1 1 220px;font:inherit;font-size:16px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.btn-sm{padding:9px 16px;font-size:.88rem}
.hint{color:var(--muted);font-size:.84rem}
.crow2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.calc .fld select,.calc .fld input{font-size:16px}
.unitin{display:flex;align-items:center;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg)}
.unitin input{border:0!important;font-family:var(--display)!important;font-size:1.6rem!important;font-weight:800;padding:14px 16px!important;width:100%;background:transparent;color:var(--ink)}
.unitin span{padding:0 18px;font-family:var(--display);font-weight:800;color:var(--muted);font-size:1.2rem}
.unitin:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,0,255,.12)}
.rng{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.rng input[type=range]{flex:1 1 220px;accent-color:var(--blue);height:28px}
.rng-v{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:600}
.rng-v input{width:90px;font:inherit;font-size:16px;padding:9px 10px;border-radius:9px;border:1px solid var(--line);background:var(--bg);color:var(--ink);text-align:center}
.chips2{display:flex;flex-wrap:wrap;gap:6px}
.chips2 button{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:999px;padding:7px 14px;font-family:var(--display);font-weight:600;font-size:.84rem}
.chips2 button.on{background:var(--blue);border-color:var(--blue);color:#fff}
.stepper{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;width:max-content}
.stepper button{width:44px;border:0;background:var(--surface);color:var(--ink);font-size:1.2rem}
.stepper input{width:64px;text-align:center;border:0!important;border-radius:0!important;font:inherit;font-size:16px;padding:10px 0;background:var(--bg);color:var(--ink)}
.cres{position:sticky;top:90px;min-width:0}
.cres-card{background:var(--navy);color:var(--on-navy);border-radius:22px;padding:clamp(20px,3vw,28px);display:grid;gap:16px;box-shadow:0 30px 60px -30px rgba(0,0,60,.5)}
.cres-card .eyebrow{color:var(--yellow)}
.rtop{display:flex;gap:14px;align-items:center}
.rimg{width:92px;height:78px;flex:none;border-radius:12px;background:linear-gradient(160deg,#fff,#e4e6f4);position:relative;overflow:hidden}
.rimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.rname{display:grid;gap:2px;min-width:0}
.rname small{color:var(--yellow);font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.rname b{font-family:var(--display);font-size:1.35rem}
.rname span{color:var(--on-navy-muted);font-size:.86rem}
.rbig{display:grid;grid-template-columns:1.3fr 1fr;gap:12px}
.rbig>div,.rgrid>div{background:rgba(255,255,255,.06);border-radius:14px;padding:12px 14px;display:grid;gap:2px}
.rbig small,.rgrid small{color:var(--on-navy-muted);font-size:.78rem}
.rbig b{font-family:var(--display);font-size:clamp(1.6rem,3.2vw,2.2rem);font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}
.rgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rgrid b{font-family:var(--display);font-size:1.05rem;font-variant-numeric:tabular-nums}
.lbar{position:relative;height:10px;border-radius:99px;background:rgba(255,255,255,.12);overflow:visible}
.lbar i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:#3CE37A;transition:width .5s cubic-bezier(.2,.7,.2,1),background .3s;max-width:100%}
.lbar-80{position:absolute;left:80%;top:-4px;bottom:-4px;width:2px;background:#fff;opacity:.7}
.rmsg{border-radius:12px;padding:12px 14px;font-size:.9rem;line-height:1.5}
.rmsg.ok{background:rgba(60,227,122,.14);color:#BFF5D3}
.rmsg.warn{background:rgba(255,171,0,.16);color:#FFE2A6}
.rmsg.bad{background:rgba(255,80,80,.16);color:#FFC9C9}
.rchart{width:100%;height:auto;display:block}
.rchart text{font-family:var(--body);font-size:11px;fill:#A9A9CC}
.rcta .btn{width:100%;justify-content:center}
.cfull{display:grid;gap:16px;margin-top:40px;padding-bottom:clamp(48px,7vw,90px)}
.h3{font-size:1.4rem}
.ctable td,.ctable th{white-space:nowrap}
.ctable tr.best td{background:rgba(0,0,255,.06);font-weight:600}
.ok-t{color:#0B8A43;font-weight:700}.no-t{color:#C0392B;font-weight:700}
.cfaq{max-width:860px}
.rt-opts{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-family:var(--display);font-weight:600;font-size:.9rem}
.rt-opts select{font:inherit;font-size:16px;padding:8px 12px;border-radius:9px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.rtchart th,.rtchart td{text-align:center!important;font-size:.85rem;padding:9px 10px!important}
.rtchart th:first-child,.rtchart td:first-child{text-align:left!important;position:sticky;left:0;background:var(--bg);font-weight:700}
.rtchart thead th{width:auto}
.rtchart small{color:var(--muted);font-size:.72rem}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .ok-t{color:#3CE37A}:root:not([data-theme="light"]) .no-t{color:#FF8A80}}
:root[data-theme="dark"] .ok-t{color:#3CE37A}:root[data-theme="dark"] .no-t{color:#FF8A80}
@media (max-width:960px){.calc{grid-template-columns:1fr}.cres{position:static}}
@media (max-width:560px){.lrow{grid-template-columns:minmax(0,1fr) 74px 58px 34px}.lrow .sub{display:none}.lrow.head span:nth-child(4){display:none}.crow2{grid-template-columns:1fr}.rbig{grid-template-columns:1fr 1fr}}
.calcband{margin-top:22px;border-radius:28px;padding:clamp(26px,4vw,44px);display:grid;grid-template-columns:auto 1fr auto;gap:20px 30px;align-items:center;background:linear-gradient(120deg,var(--navy),#10106a);color:#fff}
.calcband .ic{width:64px;height:64px;border-radius:16px;background:var(--yellow);display:grid;place-items:center;color:#14142B}
.calcband .ic svg{width:34px;height:34px}
.calcband h2{font-size:clamp(1.4rem,2.6vw,2rem);font-weight:800}
.calcband p{color:#C9C9E6;margin-top:6px}
@media (max-width:800px){.calcband{grid-template-columns:1fr}}


[hidden]{display:none!important}
/* support dropdown */
.dd2 .submenu{position:absolute;top:100%;right:0;min-width:320px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 30px 60px -30px rgba(0,0,60,.4);padding:10px;display:grid;gap:4px;opacity:0;visibility:hidden;transform:translateY(10px);transition:.3s;z-index:5}
.dd2 .submenu::before{content:"";position:absolute;left:0;right:0;top:-20px;height:20px}
.dd2:hover .submenu,.dd2:focus-within .submenu{opacity:1;visibility:visible;transform:none}
.dd2 .submenu a{display:grid;gap:2px;padding:10px 12px;border-radius:10px;transition:background .2s}
.dd2 .submenu a:hover,.dd2 .submenu a.on{background:var(--surface)}
.dd2 .submenu b{font-family:var(--display);font-size:.92rem}
.dd2 .submenu small{color:var(--muted);font-size:.8rem}
@media (min-width:901px){.dd2{position:relative!important}}
@media (max-width:900px){
  .dd2 .submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0 0 6px 14px;min-width:0;background:none}
  .dd2 .submenu a{padding:10px 4px;border-bottom:1px solid var(--line);border-radius:0}
  .dd2 .submenu small{display:none}
}
/* mobile polish */
@media (max-width:600px){
  .tabs{gap:0;justify-content:space-between}
  .tabs button{padding:12px 6px;font-size:.88rem}
  .fld input,.fld select,.fld textarea{font-size:16px}
  .nav .mcta{display:flex!important;justify-content:center;margin-top:14px;border:0;border-radius:999px!important;padding:14px 20px!important}
  .nav .mcta::after{display:none}
}
.nav .mcta{display:none}
/* scroll reveal (only applied by script to elements below the first screen) */
.pre{opacity:0;transform:translateY(40px)}
.rv{transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .pre{opacity:1;transform:none}
}

/* ================================================================
   TYPE B — "Axtren Noir": cinematic dark, glass, electric-blue light.
   Overrides Type A. One accent family (electric blue → violet, from the
   octagon badge on Ventrix Pro); yellow kept only for tiny signals.
   ================================================================ */
:root,:root[data-theme="dark"],:root[data-theme="light"]{
  --blue:#3346FF; --blue-ink:#2533E6; --sky:#00A3FF; --violet:#8A4DFF; --yellow:#FFB21A;
  --bg:#05050B; --surface:#0D0D18; --surface-2:#12121F; --line:rgba(255,255,255,.085); --line-2:rgba(255,255,255,.14);
  --ink:#F4F5FF; --muted:#9097B8; --link:#8E9BFF;
  --navy:#05050B; --navy-2:#0B0B16; --on-navy:#F4F5FF; --on-navy-muted:#9097B8;
  --stage:radial-gradient(60% 55% at 50% 58%,rgba(51,70,255,.30),rgba(51,70,255,0) 70%),linear-gradient(180deg,#0B0B18,#06060D);
  --grad:linear-gradient(100deg,#3346FF 0%,#7A4DFF 55%,#00A3FF 100%);
  --display:"Inter Tight","Inter","Segoe UI",system-ui,sans-serif;
  --body:"Inter","Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --r:18px; --max:1240px; color-scheme:dark;
}
body{background:var(--bg);color:var(--ink);font-feature-settings:"ss01","cv11";letter-spacing:-.005em}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(900px 600px at 85% -10%,rgba(51,70,255,.16),transparent 60%),
  radial-gradient(700px 500px at -10% 30%,rgba(138,77,255,.10),transparent 60%)}
::selection{background:#3346FF;color:#fff}
h1,h2,h3,h4{letter-spacing:-.035em;font-weight:600}
.logo .lb{display:none!important}.logo .lw{display:block!important}
.logo img{height:26px}

/* type */
.eyebrow{font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.18em;color:#AEB7FF;gap:.7em}
.eyebrow::before{width:7px;height:7px;border-radius:50%;background:#5B6CFF;transform:none;box-shadow:0 0 0 4px rgba(91,108,255,.18),0 0 14px #5B6CFF}
.h2,.pghead h1,.cta h2,.dist h2{font-weight:600;letter-spacing:-.04em}
.h2{font-size:clamp(2.1rem,4.6vw,3.9rem);line-height:1.04}
.gt{background:linear-gradient(180deg,#FFFFFF 30%,#A9B2FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.gb{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:var(--muted);font-size:1.08rem;line-height:1.7}
.sec{padding-block:clamp(80px,11vw,150px)}

/* buttons */
.btn{border-radius:999px;font-family:var(--display);font-weight:600;font-size:.94rem;padding:13px 24px;letter-spacing:-.01em}
.btn-y{background:#fff;color:#05050B}
.btn-y::after{background:linear-gradient(100deg,#C9D0FF,#fff)}
.btn-b{background:var(--blue);color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 10px 30px -8px rgba(51,70,255,.8)}
.btn-b:hover{background:#4757FF;box-shadow:0 0 0 1px rgba(255,255,255,.2) inset,0 14px 40px -6px rgba(51,70,255,.95)}
.btn-o{border:1px solid var(--line-2);background:rgba(255,255,255,.04);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn-o:hover,.on-navy .btn-o:hover{background:#fff;color:#05050B;border-color:#fff}

/* header: floating glass bar */
.hdr{position:fixed;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 12px);background:none!important;backdrop-filter:none;-webkit-backdrop-filter:none;border:0!important;box-shadow:none!important;padding-inline:12px}
.hdr .wrap{max-width:1280px;height:62px!important;background:rgba(14,14,26,.55);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding-inline:18px 10px;box-shadow:0 20px 50px -30px rgba(0,0,0,.9);transition:background .3s,border-color .3s}
.hdr.scrolled .wrap{background:rgba(10,10,20,.78);border-color:rgba(255,255,255,.12)}
main{padding-top:calc(env(safe-area-inset-top,0px) + 86px)}
.nav>a,.nav>.dd>a{font-family:var(--body);font-weight:500;font-size:.9rem;color:#C9CDE6;padding:9px 13px}
.nav>a:hover,.nav>.dd:hover>a,.nav a.active{color:#fff}
.nav>a::after,.nav>.dd>a::after{height:1px;bottom:3px;background:linear-gradient(90deg,transparent,#8E9BFF,transparent)}
.hdr-cta .btn{padding:9px 18px;font-size:.86rem}
.hdr-cta .btn-b{background:#fff;color:#05050B;box-shadow:none}
.hdr-cta .btn-b:hover{background:#DDE1FF}
.mega,.dd2 .submenu{background:rgba(12,12,22,.92);backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%);border:1px solid rgba(255,255,255,.1);box-shadow:0 40px 80px -30px rgba(0,0,0,.9);border-radius:20px}
.mega a:hover,.dd2 .submenu a:hover,.dd2 .submenu a.on{background:rgba(255,255,255,.06)}
.mega .thumb{background:var(--stage);border-color:rgba(255,255,255,.08)}
.mega .mhead{font-family:var(--mono);font-weight:500;color:#AEB7FF;letter-spacing:.14em}
.burger{border-color:rgba(255,255,255,.12);color:#fff}
@media (max-width:900px){
  .nav{top:84px!important;left:12px!important;right:12px!important;border-radius:18px;background:rgba(10,10,20,.96)!important;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.1)!important;max-height:calc(100dvh - 100px);overflow:auto}
  .nav>a,.nav>.dd>a{border-color:rgba(255,255,255,.07)!important;color:#fff;font-size:1.05rem}
  .hdr .wrap{padding-inline:16px 8px}
}

/* page heads: rounded cinematic cards */
.pghead{margin-inline:12px;border-radius:28px;background:#06060E;border:1px solid rgba(255,255,255,.06);padding-block:clamp(70px,9vw,120px);isolation:isolate}
.pghead .ph{opacity:.32!important;filter:grayscale(1) contrast(1.15) brightness(.9);mix-blend-mode:luminosity}
.pghead::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(70% 90% at 85% 20%,rgba(51,70,255,.45),transparent 60%),radial-gradient(50% 70% at 10% 110%,rgba(138,77,255,.25),transparent 60%);mix-blend-mode:screen;pointer-events:none}
.pghead::after,.dhead::after,#pg-products .pghead::after{background:linear-gradient(90deg,rgba(5,5,11,.94) 18%,rgba(5,5,11,.55) 60%,rgba(5,5,11,.25))!important}
.pghead .eyebrow{color:#AEB7FF}
.pghead h1,.dhead .dtt{font-size:clamp(2.4rem,5.6vw,4.6rem);font-weight:600;letter-spacing:-.045em;line-height:1.02;background:linear-gradient(180deg,#fff 40%,#AEB7FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.pghead p{color:#A7ADCB}
.crumbs{font-family:var(--mono);font-size:.74rem;letter-spacing:.04em}
.pghead .hv{position:absolute;right:0;top:0;height:100%;width:62%;object-fit:cover;z-index:0;opacity:.95;-webkit-mask-image:linear-gradient(90deg,transparent,#000 35%);mask-image:linear-gradient(90deg,transparent,#000 35%)}
.pghead.has-v .ph{opacity:0!important}
.pghead.has-v::after{background:linear-gradient(90deg,rgba(5,5,11,.96) 25%,rgba(5,5,11,.35) 60%,rgba(5,5,11,0))!important}
.pghead .fxl{opacity:.55}
.fxbadge{background:rgba(14,14,26,.6);border-color:rgba(255,255,255,.12);border-radius:16px}
.fxbadge small{font-family:var(--mono);font-weight:500;color:#9AA3D6}
@media (max-width:760px){.pghead .hv{width:100%;opacity:.45;-webkit-mask-image:linear-gradient(180deg,#000 30%,transparent);mask-image:linear-gradient(180deg,#000 30%,transparent)}.pghead{margin-inline:8px;border-radius:22px}}

/* product cards */
.filters button{background:rgba(255,255,255,.03);border-color:var(--line);font-family:var(--body);font-weight:500}
.filters button.on{background:#fff;border-color:#fff;color:#05050B}
.pcard{background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));border-color:var(--line);border-radius:24px;position:relative}
.pcard::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(120,135,255,.16),transparent 45%);opacity:0;transition:opacity .3s;z-index:1}
.pcard:hover::before{opacity:1}
.pcard:hover{border-color:rgba(142,155,255,.38);box-shadow:0 40px 80px -40px rgba(51,70,255,.55)}
.pcard .im{background:var(--stage);border-bottom:1px solid var(--line)}
.pcard .im img{filter:drop-shadow(0 0 24px rgba(80,100,255,.35)) drop-shadow(0 20px 20px rgba(0,0,0,.6))}
.pcard .im .badge{background:rgba(255,255,255,.08);color:#C9CFFF;font-family:var(--mono);font-weight:500;border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(8px)}
.pcard .model{font-family:var(--mono);font-weight:400;font-size:.74rem;color:#8E9BFF}
.pcard h3{font-weight:600;font-size:1.2rem}
.pcard .more{color:#fff;font-weight:500}
.pcard .im .soon{background:rgba(255,178,26,.14);color:#FFC95C;border:1px solid rgba(255,178,26,.35)}
.soonbox{background:rgba(255,178,26,.08);color:#FFD68A;border:1px solid rgba(255,178,26,.25)}

/* product detail */
.gal .main,.gal .th button{background:var(--stage);border-color:var(--line)}
.gal .main img{filter:drop-shadow(0 0 40px rgba(80,100,255,.35)) drop-shadow(0 30px 30px rgba(0,0,0,.6))}
.gal .th button.on{border-color:#8E9BFF}
.pinfo h1{font-weight:600;letter-spacing:-.04em}
.chips span{background:rgba(255,255,255,.05);border:1px solid var(--line);font-weight:500;font-family:var(--mono);font-size:.76rem;letter-spacing:.02em}
.tabs button{font-weight:500}
.tabs button::after{height:2px;background:var(--grad)}
table.spec th,table.spec td{border-color:var(--line)}
table.spec tr.grp td{background:rgba(51,70,255,.16);color:#C9CFFF;font-family:var(--mono);font-weight:500;border-bottom:1px solid rgba(91,108,255,.35)}
table.spec thead th{background:rgba(255,255,255,.04)}
.feat-list li{background:rgba(255,255,255,.03);border:1px solid var(--line)}
.feat-list li b{font-family:var(--mono);font-weight:500;color:#8E9BFF}
.ticks li::before{background-color:transparent;border:1px solid #5B6CFF;box-shadow:0 0 12px rgba(91,108,255,.6) inset}
.repl{border-color:rgba(142,155,255,.3);background:rgba(51,70,255,.05)}
.models span{border-color:var(--line-2);font-family:var(--mono);font-weight:500}

/* generic blocks */
.val,.cbox,.office,.steps li,.alts span{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));border:1px solid var(--line)}
.val .ic{background:linear-gradient(135deg,#3346FF,#7A4DFF);box-shadow:0 10px 30px -10px rgba(51,70,255,.8)}
.steps li::before,.cnum{background:linear-gradient(135deg,#3346FF,#7A4DFF)}
.split .vis{background:#06060E;border:1px solid var(--line)}
.split .vis .bgp{opacity:.25;filter:grayscale(1)}
.split .vis .prod{filter:drop-shadow(0 0 40px rgba(80,100,255,.4)) drop-shadow(0 30px 30px rgba(0,0,0,.6))}
.fld input,.fld select,.fld textarea,.lrow input,.lrow-add select,.rng-v input,.stepper input{background:rgba(255,255,255,.035)!important;border-color:var(--line-2)!important;color:#fff}
.fld select option{background:#0D0D18}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:#7C8CFF!important;box-shadow:0 0 0 4px rgba(91,108,255,.18)!important}
details.faq{border-color:var(--line)}
.dist{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));border-color:var(--line)}
.cta{background:radial-gradient(80% 140% at 100% 0%,rgba(122,77,255,.55),transparent 60%),linear-gradient(110deg,#1B26C9,#3346FF 60%,#4B3BD9);border:1px solid rgba(255,255,255,.12)}
.cta::after{display:none}
.calcband{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));border:1px solid var(--line)}
.calcband .ic{background:linear-gradient(135deg,#3346FF,#7A4DFF);color:#fff}
.band::before{background:linear-gradient(90deg,rgba(5,5,11,.95),rgba(5,5,11,.75) 60%,rgba(25,30,140,.5))}
.stat .v small{color:#8E9BFF}
.cstep,.seg{background:rgba(255,255,255,.025)}
.cstep{border-color:var(--line)}
.seg button.on{background:#fff;color:#05050B}
.chips2 button{background:rgba(255,255,255,.03)}
.chips2 button.on,.stepper button{background:#3346FF;border-color:#3346FF;color:#fff}
.cres-card{background:radial-gradient(90% 60% at 100% 0%,rgba(51,70,255,.35),transparent 60%),#0B0B16;border:1px solid rgba(255,255,255,.1)}
.rimg{background:var(--stage)}
.cres-card .eyebrow,.rname small{color:#AEB7FF}
.ctable tr.best td{background:rgba(51,70,255,.14)}
.totop{background:#fff;color:#05050B}

/* footer */
footer{background:#030307;border-top:1px solid var(--line);position:relative;overflow:hidden;padding-top:90px}
footer h5{font-family:var(--mono);font-weight:500;color:#AEB7FF}
footer a:hover{color:#fff}
footer .tag{font-weight:600}
.fword{font-family:var(--display);font-weight:700;letter-spacing:-.06em;line-height:.8;font-size:clamp(4rem,17.5vw,15.5rem);text-align:center;margin:60px 0 -0.12em;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 85%);-webkit-background-clip:text;background-clip:text;color:transparent;user-select:none;pointer-events:none}
.fbadges{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.fbadges span{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:#AEB7FF;border:1px solid rgba(142,155,255,.25);padding:5px 9px;border-radius:999px}

/* ================= HOME (Type B) ================= */
.bhero{position:relative;margin:0 12px;border-radius:32px;overflow:hidden;min-height:min(860px,calc(100svh - 100px));display:grid;align-items:end;isolation:isolate;border:1px solid rgba(255,255,255,.07);background:#020208}
.bhero picture{position:absolute;inset:0;z-index:-2}
.bhero video,.bhero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.bhero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(2,2,8,0) 55%,rgba(2,2,8,.85))}
.bhero .inner{padding:clamp(28px,5vw,72px);display:grid;gap:26px;max-width:820px}
.bhero .pill{justify-self:start;display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 8px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:.82rem;color:#D5DAF5}
.bhero .pill b{font-family:var(--mono);font-weight:500;font-size:.68rem;letter-spacing:.12em;background:#3346FF;color:#fff;padding:3px 8px;border-radius:999px}
.bhero h1{font-size:clamp(2.9rem,8vw,7rem);line-height:.95;letter-spacing:-.055em;font-weight:600}
.bhero h1 .l{display:block;overflow:hidden;padding-bottom:.06em}
.bhero h1 .l>span{display:inline-block;animation:lineUp 1.1s cubic-bezier(.2,.8,.2,1) both}
.bhero h1 .l:nth-child(2)>span{animation-delay:.12s}
@keyframes lineUp{from{transform:translateY(105%)}to{transform:none}}
.bhero p{color:#B9BEDB;font-size:clamp(1rem,1.4vw,1.15rem);max-width:54ch;animation:fadeUp 1s .35s both}
.bhero .ctas{display:flex;gap:12px;flex-wrap:wrap;animation:fadeUp 1s .5s both}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.chapters{position:absolute;right:clamp(20px,4vw,48px);bottom:clamp(28px,5vw,72px);display:grid;gap:4px;width:min(260px,40%);z-index:1}
.chapters button{all:unset;cursor:pointer;display:grid;grid-template-columns:28px 1fr;gap:4px 10px;padding:9px 12px;border-radius:12px;color:#8F95B5;font-size:.84rem;transition:background .3s,color .3s}
.chapters button small{font-family:var(--mono);font-size:.66rem;padding-top:2px}
.chapters button i{grid-column:1/-1;height:2px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden;position:relative}
.chapters button i::after{content:"";position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--p,0));background:linear-gradient(90deg,#5B6CFF,#00A3FF)}
.chapters button.on{color:#fff;background:rgba(255,255,255,.05)}
.chapters button:focus-visible{outline:2px solid #8E9BFF}
.scrollcue{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);width:22px;height:34px;border:1.5px solid rgba(255,255,255,.35);border-radius:12px}
.scrollcue::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:#fff;animation:cue 1.8s infinite}
@keyframes cue{0%{opacity:0;transform:translateY(-3px)}40%{opacity:1}100%{opacity:0;transform:translateY(10px)}}
@media (max-width:860px){.chapters{position:static;width:auto;grid-template-columns:repeat(4,1fr);padding:0 clamp(28px,5vw,72px) 28px;gap:6px}.chapters button{grid-template-columns:1fr;padding:6px 2px;background:none!important;font-size:.74rem}.chapters button small{display:none}.scrollcue{display:none}.bhero{align-items:stretch;grid-template-rows:1fr auto;min-height:calc(100svh - 96px)}.bhero .inner{align-content:start;padding-top:34px;padding-bottom:18px}.bhero::after{background:linear-gradient(180deg,rgba(2,2,8,.2),rgba(2,2,8,0) 40%,rgba(2,2,8,.7))}}

/* spec ticker */
.ticker{margin-top:28px;border-block:1px solid var(--line);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.ticker .row{display:flex;width:max-content;animation:marq 40s linear infinite}
.ticker span{font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#8F95B5;padding:18px 28px;display:inline-flex;align-items:center;gap:28px;white-space:nowrap}
.ticker span::after{content:"";width:5px;height:5px;border-radius:50%;background:#3346FF;box-shadow:0 0 10px #3346FF}
.ticker span b{color:#fff;font-weight:500;margin-right:8px}

/* statement */
.statement{max-width:1100px;margin-inline:auto;text-align:left}
.statement p{font-family:var(--display);font-weight:500;font-size:clamp(1.7rem,3.8vw,3.3rem);line-height:1.18;letter-spacing:-.035em}
.statement .w{color:rgba(255,255,255,.16);transition:color .25s}
.statement .w.on{color:#fff}
.statement .w.hl.on{color:#8E9BFF;text-shadow:0 0 30px rgba(91,108,255,.55)}
.statement .by{margin-top:36px;display:flex;gap:14px;align-items:center;color:var(--muted);font-size:.92rem}
.statement .by img{height:18px;width:auto;opacity:.9}

/* portfolio showcase */
.show2 .tabs2{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:22px;padding:6px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid var(--line);width:max-content;max-width:100%}
.show2 .tabs2 button{flex:none;border:0;background:none;color:#9AA0BF;padding:10px 16px;border-radius:11px;font-size:.9rem;font-weight:500;position:relative;overflow:hidden;white-space:nowrap}
.show2 .tabs2 button.on{background:rgba(255,255,255,.08);color:#fff}
.show2 .tabs2 button i{position:absolute;left:12px;right:12px;bottom:5px;height:2px;border-radius:2px;background:rgba(255,255,255,.08);opacity:0}
.show2 .tabs2 button.on i{opacity:1}
.show2 .tabs2 button i::after{content:"";position:absolute;inset:0;background:#7C8CFF;transform-origin:left;transform:scaleX(var(--p,0))}
.stage2{position:relative;border-radius:30px;overflow:hidden;border:1px solid var(--line);background:#020208;min-height:620px;display:grid;grid-template-columns:1fr 1.25fr}
.stage2 .panel{grid-area:1/1/2/3;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);opacity:0;visibility:hidden;transition:opacity .7s,visibility .7s}
.stage2 .panel.on{opacity:1;visibility:visible}
.stage2 .txt{padding:clamp(28px,4.5vw,60px);display:grid;gap:18px;align-content:center;z-index:1;position:relative}
.stage2 .txt h3{font-size:clamp(1.9rem,3.4vw,3rem);line-height:1.05;letter-spacing:-.045em}
.stage2 .txt p{color:#A3A9C8}
.stage2 .spec3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:6px}
.stage2 .spec3 div{background:#07070F;padding:14px 14px 12px;display:grid;gap:2px}
.stage2 .spec3 b{font-family:var(--display);font-weight:600;font-size:1.15rem;letter-spacing:-.02em}
.stage2 .spec3 small{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:#8088AE}
.stage2 .med{position:relative;min-height:420px;overflow:hidden}
.stage2 .med video,.stage2 .med img.full{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stage2 .med::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#020208,rgba(2,2,8,0) 30%)}
.stage2 .med .pdu{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(55% 55% at 50% 50%,rgba(122,92,255,.35),transparent 70%)}
.stage2 .med .pdu img{width:84%;filter:drop-shadow(0 0 40px rgba(122,92,255,.55));animation:bob 6s ease-in-out infinite alternate}
.stage2 .links{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
@media (max-width:900px){.stage2,.stage2 .panel{grid-template-columns:1fr}.stage2 .med{min-height:300px;order:-1}.stage2 .med::before{background:linear-gradient(0deg,#020208,rgba(2,2,8,0) 40%)}.stage2 .txt{padding-top:0}.show2 .tabs2{width:auto;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.show2 .tabs2::-webkit-scrollbar{display:none}}
@media (max-width:520px){.stage2 .spec3 b{font-size:1rem}.stage2 .spec3 div{padding:12px 10px}}

/* bento */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.bx{grid-column:span 2;position:relative;border-radius:26px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));padding:clamp(22px,2.6vw,32px);display:grid;align-content:space-between;gap:28px;overflow:hidden;min-height:300px;isolation:isolate}
.bx::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(360px circle at var(--mx,50%) var(--my,-20%),rgba(120,135,255,.14),transparent 50%);opacity:0;transition:opacity .3s}
.bx:hover::before{opacity:1}
.bx.w3{grid-column:span 3}.bx.w4{grid-column:span 4}
.bx h3{font-size:1.4rem;letter-spacing:-.03em}
.bx p{color:var(--muted);font-size:.95rem;margin-top:8px;max-width:46ch}
.bx .k{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#8E9BFF}
.bx .big{font-family:var(--display);font-weight:600;font-size:clamp(3rem,6vw,5rem);letter-spacing:-.06em;line-height:.9}
.bx .big small{font-size:.32em;color:#8E9BFF;letter-spacing:0;margin-left:6px}
.bx svg.viz{width:100%;height:auto;display:block}
.osc path{fill:none;stroke-width:2.2;stroke-linecap:round}
.osc .in{stroke:#FF6B5B;opacity:.85;stroke-dasharray:6 0}
.osc .out{stroke:url(#gOut);filter:drop-shadow(0 0 6px rgba(91,108,255,.9))}
.osc .move{animation:oscMove 4s linear infinite}
@keyframes oscMove{from{transform:translateX(-160px)}to{transform:translateX(0)}}
.bars{display:flex;align-items:flex-end;gap:6px;height:110px}
.bars i{flex:1;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#5B6CFF,rgba(51,70,255,.15));animation:barB 2.4s ease-in-out infinite alternate;transform-origin:bottom}
.bars i:nth-child(2n){animation-duration:3.1s}.bars i:nth-child(3n){animation-duration:1.9s}
@keyframes barB{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
.batt{display:flex;align-items:center;gap:6px}
.batt .cell{width:100%;height:58px;border:2px solid rgba(255,255,255,.35);border-radius:12px;padding:5px;display:flex;gap:5px}
.batt .cell i{flex:1;border-radius:5px;background:#2b2f4a;animation:cellOn 3s infinite}
.batt .cell i:nth-child(1){animation-delay:0s}.batt .cell i:nth-child(2){animation-delay:.3s}.batt .cell i:nth-child(3){animation-delay:.6s}.batt .cell i:nth-child(4){animation-delay:.9s}.batt .cell i:nth-child(5){animation-delay:1.2s}
@keyframes cellOn{0%,10%{background:#2b2f4a}25%,85%{background:#3CE37A;box-shadow:0 0 14px rgba(60,227,122,.7)}100%{background:#2b2f4a}}
.batt .tip{width:8px;height:22px;border-radius:0 4px 4px 0;background:rgba(255,255,255,.35)}
.shieldv{position:relative;height:150px;display:grid;place-items:center}
.shieldv svg{width:110px;height:auto;filter:drop-shadow(0 0 22px rgba(0,163,255,.7))}
.shieldv .rp{position:absolute;left:50%;top:50%;width:110px;height:110px;margin:-55px;border-radius:50%;border:1px solid rgba(0,163,255,.6);animation:rip 2.6s infinite}
.shieldv .rp:nth-child(2){animation-delay:.9s}.shieldv .rp:nth-child(3){animation-delay:1.8s}
@keyframes rip{from{transform:scale(.6);opacity:1}to{transform:scale(2.2);opacity:0}}
.clock{font-family:var(--mono);font-size:clamp(2.4rem,4vw,3.4rem);letter-spacing:-.02em;color:#fff}
.clock span{color:#8E9BFF}
@media (max-width:980px){.bento{grid-template-columns:repeat(2,1fr)}.bx,.bx.w3,.bx.w4{grid-column:span 2}.bx.half{grid-column:span 1}}
@media (max-width:560px){.bx.half{grid-column:span 2}}

/* NexRack spotlight with callouts */
.spot{position:relative;border-radius:32px;border:1px solid var(--line);overflow:hidden;background:radial-gradient(50% 60% at 50% 55%,rgba(43,107,255,.32),transparent 70%),#03030A;padding:clamp(28px,5vw,64px)}
.spot .head{display:grid;gap:14px;max-width:640px;position:relative;z-index:2}
.spot .rig{position:relative;max-width:1000px;margin:20px auto 0;aspect-ratio:16/10}
.spot .rig img{position:absolute;left:50%;top:0;height:100%;width:auto;transform:translateX(-50%);filter:drop-shadow(0 0 50px rgba(43,107,255,.55))}
.spot .co{position:absolute;display:flex;align-items:center;gap:10px;font-size:.86rem;color:#D8DCF5;white-space:nowrap;opacity:0;transform:translateY(8px);transition:opacity .6s,transform .6s}
.spot.in .co{opacity:1;transform:none}
.spot .co b{display:block;font-family:var(--display);font-weight:600;color:#fff;font-size:1rem}
.spot .co small{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;color:#8E9BFF;text-transform:uppercase}
.spot .co .dot{width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px rgba(91,108,255,.3),0 0 18px #5B6CFF;flex:none;animation:pulseD 2s infinite}
@keyframes pulseD{50%{box-shadow:0 0 0 9px rgba(91,108,255,.12),0 0 24px #5B6CFF}}
.spot .co .ln{height:1px;width:clamp(30px,8vw,110px);background:linear-gradient(90deg,#5B6CFF,rgba(91,108,255,.1))}
.spot .co.r{flex-direction:row-reverse;text-align:right}
.spot .co.r .ln{background:linear-gradient(270deg,#5B6CFF,rgba(91,108,255,.1))}
.spot .colist{display:none}
@media (max-width:860px){.spot .co{display:none}.spot .rig{aspect-ratio:4/5;max-width:420px}.spot .colist{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px;position:relative;z-index:2}.spot .colist div{border:1px solid var(--line);border-radius:14px;padding:12px;background:rgba(255,255,255,.03)}.spot .colist b{display:block;font-family:var(--display);font-weight:600}.spot .colist small{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;color:#8E9BFF;text-transform:uppercase}}

/* metrics */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:26px;overflow:hidden;background:var(--line);gap:1px}
.metrics .stat{background:#05050B;border:0;padding:clamp(22px,3vw,36px);gap:10px}
.metrics .stat .v{font-weight:600;font-size:clamp(2.6rem,5vw,4.4rem);letter-spacing:-.06em}
.metrics .stat .v small{color:#8E9BFF;font-weight:500;letter-spacing:0}
@media (max-width:860px){.metrics{grid-template-columns:1fr 1fr}}

/* industries chips */
.inds{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.inds span{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.025);font-size:.92rem;color:#D2D6EE;transition:.3s}
.inds span:hover{border-color:rgba(142,155,255,.5);background:rgba(51,70,255,.1);color:#fff}
.inds svg{width:18px;height:18px;color:#8E9BFF}

/* globe */
.glob{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,70px);align-items:center}
.glob .txt{display:grid;gap:20px}
.glob canvas{width:100%;aspect-ratio:1;display:block;max-width:560px;margin-inline:auto}
.offs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.offs div{border:1px solid var(--line);border-radius:18px;padding:18px;background:rgba(255,255,255,.025);display:grid;gap:4px}
.offs small{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;color:#8E9BFF;text-transform:uppercase}
.offs b{font-family:var(--display);font-weight:600;font-size:1.15rem}
.offs span{color:var(--muted);font-size:.86rem}
@media (max-width:860px){.glob{grid-template-columns:1fr}.glob canvas{max-width:420px}}

/* closing duo */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.duo>a{position:relative;border-radius:28px;border:1px solid var(--line);overflow:hidden;padding:clamp(28px,4vw,48px);min-height:340px;display:grid;align-content:end;gap:14px;isolation:isolate;transition:border-color .3s,transform .5s cubic-bezier(.2,.7,.2,1)}
.duo>a:hover{border-color:rgba(142,155,255,.45);transform:translateY(-4px)}
.duo>a::before{content:"";position:absolute;inset:0;z-index:-1}
.duo .d1::before{background:radial-gradient(60% 80% at 90% 10%,rgba(51,70,255,.5),transparent 60%),#06060F}
.duo .d2::before{background:radial-gradient(60% 80% at 90% 10%,rgba(138,77,255,.45),transparent 60%),#06060F}
.duo .circ{position:absolute;inset:0;z-index:-1;opacity:.5;-webkit-mask-image:radial-gradient(70% 90% at 80% 20%,#000,transparent 75%);mask-image:radial-gradient(70% 90% at 80% 20%,#000,transparent 75%)}
.duo .circ path{fill:none;stroke:rgba(142,155,255,.35);stroke-width:1}
.duo .circ circle{fill:#8E9BFF}
.duo .circ .p{stroke:#AEB7FF;stroke-width:1.6;stroke-dasharray:24 400;animation:trace 5s linear infinite;filter:drop-shadow(0 0 4px #8E9BFF)}
@keyframes trace{from{stroke-dashoffset:424}to{stroke-dashoffset:0}}
.duo h3{font-size:clamp(1.7rem,3vw,2.5rem);letter-spacing:-.045em;line-height:1.05}
.duo p{color:#A7ADCB;max-width:44ch}
.duo .go{display:inline-flex;align-items:center;gap:10px;font-weight:600;margin-top:6px}
.duo .go svg{width:18px;height:18px;transition:transform .3s}
.duo>a:hover .go svg{transform:translateX(5px)}
@media (max-width:860px){.duo{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){.bhero h1 .l>span,.bhero p,.bhero .ctas{animation:none}.statement .w{color:#fff}}

/* ===== Ventrix Pro film player ===== */
.vfilm .sec-head{margin-bottom:28px}
.vfilm .vtabs{display:flex;gap:6px;padding:6px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--line);width:max-content;max-width:100%;margin-bottom:16px}
.vfilm .vtabs button{border:0;background:none;color:#9AA0BF;padding:10px 16px;border-radius:10px;font-size:.9rem;font-weight:500;white-space:nowrap}
.vfilm .vtabs button.on{background:#fff;color:#05050B}
.vfilm .vtabs button small{opacity:.6;margin-left:6px;font-family:var(--mono);font-size:.72rem}
.vfilm .player{position:relative;border-radius:28px;overflow:hidden;border:1px solid var(--line);background:#000;aspect-ratio:16/9;box-shadow:0 60px 120px -60px rgba(51,70,255,.55)}
.vfilm .player video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.vfilm .player .ov{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(180deg,rgba(2,2,8,0) 40%,rgba(2,2,8,.7));cursor:pointer;border:0;padding:0;color:#fff;transition:opacity .4s}
.vfilm .player .ov img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.vfilm .player .ov .pb{width:clamp(64px,8vw,96px);height:clamp(64px,8vw,96px);border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:grid;place-items:center;transition:transform .3s,background .3s;box-shadow:0 0 0 0 rgba(140,155,255,.5);animation:pbPulse 2.4s infinite}
.vfilm .player .ov:hover .pb{transform:scale(1.08);background:rgba(255,255,255,.22)}
.vfilm .player .ov .pb svg{width:34%;height:34%;margin-left:6%}
@keyframes pbPulse{70%{box-shadow:0 0 0 22px rgba(140,155,255,0)}100%{box-shadow:0 0 0 0 rgba(140,155,255,0)}}
.vfilm .player .ov .cap{position:absolute;left:clamp(18px,3vw,36px);bottom:clamp(16px,3vw,32px);text-align:left;display:grid;gap:4px}
.vfilm .player .ov .cap b{font-family:var(--display);font-weight:600;font-size:clamp(1.1rem,2.2vw,1.6rem);letter-spacing:-.03em}
.vfilm .player .ov .cap small{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;color:#AEB7FF;text-transform:uppercase}
.vfilm .player.playing .ov{opacity:0;pointer-events:none}
.vfilm .note{color:var(--muted);font-size:.86rem;margin-top:12px}
@media (max-width:600px){.vfilm .player{border-radius:18px}}

/* film: autoplay muted + compact sound toggle */
.vfilm .player{position:relative}
.vfilm .player .snd{position:absolute;right:10px;bottom:10px;z-index:3;display:none;align-items:center;gap:5px;border:0;cursor:pointer;font:600 .6rem/1 var(--mono,ui-monospace,monospace);letter-spacing:.08em;text-transform:uppercase;padding:5px 8px;border-radius:999px;background:rgba(5,5,20,.72);color:#fff;backdrop-filter:blur(4px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.vfilm .player.playing .snd{display:inline-flex}
.vfilm .player .snd:hover{background:#FFAB00;color:#05050B}
.vfilm .player .snd svg{width:12px;height:12px}
@media (max-width:600px){.vfilm .player .snd{right:6px;bottom:6px;font-size:.56rem;padding:4px 7px}.vfilm .player .snd svg{width:11px;height:11px}}
/* header option 2: full-width bar + glow line + gradient button */
.hdr{top:env(safe-area-inset-top,0px)!important;padding:0!important;background:linear-gradient(180deg,rgba(5,5,11,.96),rgba(5,5,11,.78))!important;backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important}
.hdr::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent 5%,#7b5cff 35%,#2f6bff 65%,transparent 95%)}
.hdr .wrap,.hdr.scrolled .wrap{background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;max-width:1360px!important;height:72px!important;padding-inline:28px!important}
.hdr.scrolled{background:rgba(5,5,11,.94)!important}
.hdr-cta .btn-b{background:linear-gradient(90deg,#6a4dff,#2f6bff)!important;color:#fff!important;border-radius:8px!important}
.hdr-cta .btn-b:hover{filter:brightness(1.12)}
main{padding-top:calc(env(safe-area-inset-top,0px) + 72px)}
@media (max-width:900px){.hdr .wrap{height:64px!important;padding-inline:16px 10px!important}.nav{top:72px!important}main{padding-top:calc(env(safe-area-inset-top,0px) + 64px)}}
/* micro data center feature list */
.feat{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:9px}
.feat li{display:grid;grid-template-columns:104px 1fr;gap:12px;font-size:.93rem;line-height:1.45;color:var(--muted);padding-bottom:9px;border-bottom:1px solid var(--line)}
.feat li:last-child{border-bottom:0;padding-bottom:0}
.feat b{font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--link);padding-top:3px}
.feat-end{font-weight:600;color:var(--ink)!important;margin-top:4px}
@media (max-width:520px){.feat li{grid-template-columns:1fr;gap:2px}}

/* six product boxes */
.bento.b6 .bx{grid-column:span 2;grid-template-columns:1fr;align-content:space-between}
.bento.b6 .batt,.bento.b6 .bars,.bento.b6 .vreg{width:100%}
.bento.b6 .shieldv{height:130px}
.bx p b{color:var(--ink);font-weight:600}
.bx .more{display:inline-flex;gap:6px;margin-top:14px;font-size:.85rem;font-weight:500;color:#C9CEFF;text-decoration:none}.bx .more::after{content:"\2192";transition:transform .2s}.bx .more:hover::after{transform:translateX(3px)}
.clock{white-space:nowrap}.clock span:first-child{animation:colon 1s steps(1) infinite}
@keyframes colon{50%{opacity:.2}}
.vreg{display:grid;gap:18px;font-family:var(--mono);font-size:.72rem;color:#9AA3C7}
.vreg .r{display:grid;grid-template-columns:30px 1fr 44px;gap:8px;align-items:center}
.vreg .m{position:relative;height:10px;border-radius:99px;background:rgba(255,255,255,.07)}
.vreg .m .band{position:absolute;left:40%;width:20%;top:0;bottom:0;border-radius:99px;background:rgba(61,220,132,.25)}
.vreg .m i{position:absolute;top:-4px;width:4px;height:18px;border-radius:2px;left:50%}
.vreg .in i{background:#FF8A80;box-shadow:0 0 10px #FF8A80;animation:vj 2.2s ease-in-out infinite}
.vreg .out i{background:#3DDC84;box-shadow:0 0 10px #3DDC84;animation:vs 2.2s ease-in-out infinite}
.vreg b{color:#fff;font-weight:500;text-align:right}
@keyframes vj{0%{left:12%}20%{left:78%}40%{left:28%}60%{left:88%}80%{left:18%}100%{left:12%}}
@keyframes vs{0%,100%{left:49%}50%{left:51%}}
@media (max-width:980px){.bento.b6 .bx{grid-column:span 2}}
@media (prefers-reduced-motion:reduce){.vreg i,.clock span{animation:none!important}}

.inds{display:grid;grid-template-columns:repeat(6,auto)}
.inds span{justify-content:center}
@media (max-width:1100px){.inds{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.inds{grid-template-columns:repeat(2,1fr)}.inds span{padding:11px 12px;font-size:.84rem;text-align:center}}

@media (min-width:761px){.bhero video,.bhero .poster{object-position:right center}}

/* NexRack box: rack filling + live sensors */
.nxg{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center}
.nxr{width:118px;border:2px solid rgba(255,255,255,.35);border-radius:10px;padding:6px;display:grid;gap:4px;background:rgba(255,255,255,.03)}
.nxr i{height:17px;border-radius:4px;background:rgba(255,255,255,.05);position:relative;overflow:hidden;font-style:normal}
.nxr i b{position:absolute;inset:0;display:flex;align-items:center;padding-left:6px;font-family:var(--mono);font-size:.5rem;letter-spacing:.08em;text-transform:uppercase;color:#fff;font-weight:500;white-space:nowrap;background:linear-gradient(90deg,#3346FF,#00A3FF);animation:nxslot 6s var(--d) infinite both}
@keyframes nxslot{0%{transform:translateX(-105%)}8%,80%{transform:none}92%,100%{transform:translateX(-105%)}}
.nxs{display:grid;gap:5px;font-family:var(--mono);font-size:.66rem}
.nxs div{display:grid;grid-template-columns:1fr auto 8px;gap:6px;align-items:center;padding:5px 9px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.03);color:#9AA3C7}
.nxs b{color:#fff;font-weight:500}
.nxs i{width:6px;height:6px;border-radius:50%;background:#3DDC84;box-shadow:0 0 10px #3DDC84;animation:nxblink 2s infinite}
.nxs div:nth-child(2) i{animation-delay:.4s}.nxs div:nth-child(3) i{animation-delay:.8s}.nxs div:nth-child(5) i{animation-delay:1.6s}
.nxs div.al{border-color:rgba(255,77,77,.55);background:rgba(255,60,60,.1)}.nxs div.al b{color:#FF6B6B}.nxs div.al i{background:#FF4D4D;box-shadow:0 0 12px #FF4D4D;animation:nxblink .8s infinite}
@keyframes nxblink{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.nxr i b,.nxs i{animation:none!important}}

.bhero h1{font-size:clamp(2.6rem,6vw,5.6rem)}.bhero .inner{max-width:900px}

.mega .msub{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:8px 8px 0}
.mega .thumb-ph{display:grid;place-items:center;color:#8E9BFF}.mega .thumb-ph svg{width:22px;height:22px}