:root{
  --bg:#05070b;
  --panel:#0b0f15;
  --line:rgba(255,255,255,.12);
  --muted:rgba(255,255,255,.42);
  --cyan:#6ce7f1;
  --blue:#387bdc;
  --red:#d8685d;
  --paper:#e8e8e3;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:#fff}
body{min-height:100vh;overflow:hidden}
a{color:inherit;text-decoration:none}
.shell{min-height:100vh;position:relative;overflow:hidden;background:
  radial-gradient(circle at 50% 48%,rgba(43,77,119,.12),transparent 31%),
  radial-gradient(circle at 11% 0%,rgba(36,91,151,.10),transparent 32%),
  #05070b}
.shell::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.25;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(circle at center,#000 0,transparent 78%)}
.brandbar{position:absolute;z-index:50;top:0;left:0;right:0;height:112px;display:flex;align-items:center;justify-content:center;pointer-events:none}
.brand{pointer-events:auto;display:inline-flex;align-items:center;padding:18px 24px}
.brand img{height:54px;width:auto;display:block;filter:brightness(0) invert(1);opacity:.96}
.gateway{position:absolute;z-index:4;left:50%;top:54%;transform:translate(-50%,-50%);width:min(1320px,calc(100vw - 88px));height:min(700px,72vh);display:flex;gap:14px;perspective:1800px}
.portal{--rx:0deg;--ry:0deg;position:relative;flex:1 1 50%;overflow:hidden;isolation:isolate;border:1px solid var(--line);background:var(--panel);transition:flex .72s cubic-bezier(.18,.82,.18,1),transform .35s ease,opacity .35s ease,filter .35s ease,border-color .35s ease;transform:perspective(1800px) rotateX(var(--rx)) rotateY(var(--ry));will-change:transform,flex}
.gateway:has(.portal:hover) .portal:not(:hover){flex:.88 1 44%;opacity:.66;filter:saturate(.72)}
.portal:hover{flex:1.12 1 56%;border-color:rgba(255,255,255,.24)}
.portal-it{background:linear-gradient(145deg,#08111d 0%,#0b1929 48%,#0b2135 100%)}
.portal-sec{background:linear-gradient(145deg,#111317 0%,#17191c 54%,#1d1d1c 100%)}
.portal-bg{position:absolute;inset:0;z-index:0;overflow:hidden;transition:transform .75s cubic-bezier(.18,.82,.18,1),opacity .4s ease}
.portal:hover .portal-bg{transform:scale(1.025)}
.mesh{position:absolute;inset:0;background-size:34px 34px;opacity:.38;mask-image:linear-gradient(180deg,rgba(0,0,0,.25),#000 30%,#000 76%,rgba(0,0,0,.2))}
.portal-it .mesh{background-image:linear-gradient(rgba(107,212,236,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(107,212,236,.055) 1px,transparent 1px)}
.portal-sec .mesh{background-image:linear-gradient(rgba(255,255,255,.038) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.038) 1px,transparent 1px)}
.it-map,.sec-map{position:absolute;inset:5%;width:90%;height:90%;fill:none;transition:opacity .35s ease,transform .65s cubic-bezier(.18,.82,.18,1)}
.it-map{stroke:var(--cyan);stroke-width:2;opacity:.25}.it-map .muted{opacity:.42}.it-map circle{fill:var(--cyan);stroke:none}
.sec-map{stroke:#d4d6d9;stroke-width:2;opacity:.17}.sec-map .axis{stroke:var(--red);stroke-width:5}.sec-map rect{stroke:var(--red);fill:rgba(216,104,93,.025)}.sec-map circle{fill:#1a1b1e;stroke:#d4d6d9}
.portal:hover .it-map,.portal:hover .sec-map{opacity:.38;transform:scale(1.015)}
.rack{position:absolute;right:7%;width:28%;height:17%;border:1px solid rgba(116,218,238,.15);background:rgba(2,10,18,.22);opacity:.75}
.rack-one{top:25%}.rack-two{top:48%}.rack i{display:block;margin:13px 16px 0;height:6px;border-top:1px solid rgba(108,231,241,.42);border-bottom:1px solid rgba(108,231,241,.05)}
.tag{position:absolute;padding:4px 7px;border:1px solid rgba(255,255,255,.12);font-size:9px;font-weight:800;letter-spacing:.18em;color:rgba(255,255,255,.52);background:rgba(13,15,18,.66)}
.tag-a{right:15%;top:22%}.tag-b{right:43%;top:43%}.tag-c{right:16%;bottom:24%}
.portal-frame{position:absolute;z-index:3;left:50%;top:48%;width:34%;height:62%;transform:translate(-50%,-50%);pointer-events:none;perspective:900px;transition:width .65s cubic-bezier(.18,.82,.18,1),height .65s cubic-bezier(.18,.82,.18,1),opacity .4s ease}
.frame-edge{position:absolute;inset:0;border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 0 0 7px rgba(255,255,255,.012),0 26px 80px rgba(0,0,0,.24)}
.frame-edge::before,.frame-edge::after{content:"";position:absolute;top:-1px;bottom:-1px;width:2px;opacity:.7}
.portal-it .frame-edge::before{left:-1px;background:linear-gradient(180deg,transparent,var(--cyan),transparent)}
.portal-it .frame-edge::after{right:-1px;background:linear-gradient(180deg,transparent,rgba(56,123,220,.72),transparent)}
.portal-sec .frame-edge::before{left:-1px;background:linear-gradient(180deg,transparent,var(--red),transparent)}
.portal-sec .frame-edge::after{right:-1px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.45),transparent)}
.frame-plane{position:absolute;inset:12px;background:linear-gradient(135deg,rgba(255,255,255,.025),rgba(255,255,255,.005));border:1px solid rgba(255,255,255,.055);transform-origin:left center;transition:transform .75s cubic-bezier(.18,.82,.18,1),background .35s ease}
.portal-it:hover .frame-plane{transform:rotateY(-11deg);background:linear-gradient(135deg,rgba(81,185,236,.08),rgba(255,255,255,.008))}
.portal-sec:hover .frame-plane{transform-origin:right center;transform:rotateY(11deg);background:linear-gradient(135deg,rgba(216,104,93,.065),rgba(255,255,255,.008))}
.frame-glow{position:absolute;inset:10%;opacity:0;filter:blur(30px);transition:opacity .45s ease}
.portal-it .frame-glow{background:rgba(47,140,205,.15)}.portal-sec .frame-glow{background:rgba(216,104,93,.12)}
.portal:hover .frame-glow{opacity:1}
.portal:hover .portal-frame{width:36%;height:65%}
.index{position:absolute;z-index:8;top:28px;left:30px;font-size:10px;font-weight:800;letter-spacing:.22em;color:rgba(255,255,255,.34)}
.label{position:absolute;z-index:9;left:34px;right:34px;bottom:30px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.label h1{margin:0;text-transform:uppercase;line-height:.86;letter-spacing:-.07em;font-weight:800}
.portal-it h1{font-size:clamp(76px,7.6vw,126px)}
.portal-sec h1{display:flex;flex-direction:column;gap:.10em;font-size:clamp(42px,4.3vw,72px)}
.portal-sec h1 span:last-child{font-size:.62em;letter-spacing:-.045em;color:rgba(255,255,255,.72)}
.enter{display:inline-flex;align-items:center;gap:9px;margin-bottom:6px;font-size:10px;font-weight:800;letter-spacing:.19em;color:rgba(255,255,255,.43);white-space:nowrap;transition:color .3s ease,transform .3s ease}
.enter b{font-size:17px;font-weight:400}.portal-it .enter b{color:var(--cyan)}.portal-sec .enter b{color:var(--red)}
.portal:hover .enter{color:#fff;transform:translateX(4px)}
body.leaving .gateway{transition:width .45s cubic-bezier(.7,0,.2,1),height .45s cubic-bezier(.7,0,.2,1)}
body.leaving .portal{transition:flex .42s cubic-bezier(.7,0,.2,1),opacity .3s ease,transform .42s ease,border-color .25s ease}
body.leaving.to-it .portal-it,body.leaving.to-sec .portal-sec{flex:1 1 100%;transform:scale(1.04)}
body.leaving.to-it .portal-sec,body.leaving.to-sec .portal-it{flex:0 1 0%;opacity:0;border-color:transparent}
@media(max-width:900px){
  body{overflow:auto}.shell{min-height:100svh;overflow:auto}.brandbar{height:92px}.brand img{height:44px}.gateway{position:relative;left:auto;top:auto;transform:none;width:auto;height:auto;min-height:100svh;padding:106px 14px 14px;display:grid;grid-template-rows:1fr 1fr;gap:10px}.portal{min-height:calc((100svh - 130px)/2);transform:none!important}.gateway:has(.portal:hover) .portal:not(:hover),.portal:hover{flex:auto;opacity:1;filter:none}.portal-frame{left:69%;top:45%;width:23%;height:65%}.portal:hover .portal-frame{width:23%;height:65%}.index{top:20px;left:22px}.label{left:22px;right:22px;bottom:22px}.portal-it h1{font-size:clamp(64px,18vw,92px)}.portal-sec h1{font-size:clamp(38px,9vw,60px)}.enter{margin-bottom:4px}.rack{display:none}
}
@media(max-width:520px){
  .brandbar{height:78px}.brand img{height:38px}.gateway{padding-top:90px}.portal-frame{left:73%;width:28%;opacity:.8}.portal-sec h1{font-size:clamp(34px,10vw,50px)}.portal-sec h1 span:last-child{font-size:.60em}.enter{font-size:9px}.index{font-size:9px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}