/* datacenter2.css — /data-center redesign (DATACENTER-REDESIGN Faza 1, staging on /data-center2).
   Part 1 = the shared design-system rules of the promoted redesigns (tokens, fonts, hero copy,
   buttons, section heads, .fx5 band + .grp2 cards + FAQ accordion, .colofisa service sheet),
   extracted from dedicate2.css; part 2 = this page's own sections. Rebuild: ds2/build_dc2css.py. */
@font-face{font-family:'InterCo';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/static/client/fonts/inter-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'InterCo';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/static/client/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'MonoCo';font-style:normal;font-weight:100 800;font-display:swap;
  src:url(/static/client/fonts/jetbrains-mono-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212;}
@font-face{font-family:'MonoCo';font-style:normal;font-weight:100 800;font-display:swap;
  src:url(/static/client/fonts/jetbrains-mono-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-024F,U+1E00-1EFF,U+2C60-2C7F,U+A720-A7FF;}
.wh, .wh *, .fx5, .fx5 *, .colofisa, .colofisa *{box-sizing:border-box}
.wh, .fx5, .colofisa{--blue:#0071b9;--teal:#00bebc;--grad:linear-gradient(135deg,#00bebc,#0071b9);--grad-band:linear-gradient(118deg,#0071b9 8%,#0092b9 52%,#00bebc 100%);--blue-t1:#5fb1e2;--blue-t2:#9ed3f0;--blue-t3:#d7edfa;--blue-t4:#eaf6fd;--blue-d1:#005a94;--teal-t1:#38d9d6;--teal-t2:#7deeec;--teal-t3:#c9f8f7;--teal-t4:#e0f7f6;--teal-d1:#008a88;--ink:#0d3a5c;--ink-2:#25567d;--muted:#42688e;--faint:#7396b3;--bg:#f2f9fd;--surface:#fff;--soft:#f6fbfe;--line:#d9eaf5;--line-2:#e7f2fa;--amber:#ffb545;--r-xs:8px;--r-sm:11px;--r:16px;--r-lg:24px;--pill:999px;--sh:0 1px 2px rgba(0,113,185,.06),0 16px 34px -20px rgba(0,113,185,.25);--sh-lift:0 3px 10px rgba(0,113,185,.08),0 36px 64px -26px rgba(0,113,185,.38);--sans:'InterCo',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;--mono:'MonoCo','JetBrains Mono',ui-monospace,monospace}
html{scroll-behavior:smooth}
.wh, .fx5, .colofisa{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
.wh{position:relative}
.wh .wrap{width:96%;max-width:1400px;margin:0 auto}
@media(min-width:1400px){.wh .wrap{width:1400px}}
.wh img{max-width:100%}
.wh .sec, .fx5 .sec, .colofisa .sec{padding:88px 0}
.wh .sec-head, .fx5 .sec-head, .colofisa .sec-head{max-width:none}
.wh .sec-head.center, .fx5 .sec-head.center, .colofisa .sec-head.center{text-align:center}
.wh .eyebrow{display:inline-flex;align-items:center;gap:9px;font:700 12px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--blue);margin:0 0 16px}
.wh .eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--grad)}
.wh .sec-head.center .eyebrow::before, .fx5 .sec-head.center .eyebrow::before, .colofisa .sec-head.center .eyebrow::before{display:none}
.wh h2{margin:0;font:800 clamp(30px,3.6vw,46px)/1.08 var(--sans);letter-spacing:-.02em;color:var(--ink)}
.wh h2 strong{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
.wh .sec-head p{color:var(--muted);font-size:17px;line-height:1.6;margin:16px 0 0;max-width:64ch}
.wh .sec-head.center p, .fx5 .sec-head.center p, .colofisa .sec-head.center p{margin-left:auto;margin-right:auto}
.wh .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;font:800 15px/1 var(--sans);letter-spacing:.01em;padding:15px 26px;border-radius:var(--pill);border:1px solid transparent;cursor:pointer;text-decoration:none;overflow:hidden;transition:transform .18s,box-shadow .25s,filter .25s,border-color .2s;white-space:nowrap}
.wh .btn:active{transform:translateY(1px)}
.wh .btn-pri{background:var(--grad);color:#fff;text-shadow:0 1px 4px rgba(0,63,104,.45);box-shadow:0 14px 34px -12px rgba(0,113,185,.65)}
.wh .btn-pri:hover{transform:translateY(-2px);filter:brightness(1.08) saturate(1.05);box-shadow:0 20px 46px -12px rgba(0,113,185,.75),0 0 26px rgba(0,190,188,.35)}
.wh .btn-ghost{background:#fff;color:var(--ink);border-color:var(--blue-t2)}
.wh .btn-ghost:hover{border-color:var(--blue);color:var(--blue)}
.wh .btn-lg{padding:17px 32px;font-size:16px}
.wh .band .btn-ghost, .wh-hero .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.wh .band .btn-ghost:hover, .wh-hero .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.12);color:#fff}
.wh .btn-pri::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);transition:left .5s ease}
.wh .btn-pri:hover::after{left:125%}
.wh :is(a, button):focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:6px}
.wh-hero{position:relative;overflow:hidden;color:#fff;isolation:isolate;padding:0}
.wh-hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(118deg,rgba(0,113,185,.9) 6%,rgba(0,146,185,.8) 52%,rgba(0,190,188,.72) 100%)}
.wh-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;background:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:46px 46px;-webkit-mask-image:radial-gradient(120% 90% at 70% 40%,#000 25%,transparent 80%);mask-image:radial-gradient(120% 90% at 70% 40%,#000 25%,transparent 80%)}
.wh-hero .floor{position:absolute;z-index:1;left:-25%;right:-25%;bottom:-40px;height:44%;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.16) 1.5px,transparent 1.5px),linear-gradient(90deg,rgba(255,255,255,.16) 1.5px,transparent 1.5px);background-size:64px 64px;transform:perspective(620px) rotateX(63deg);transform-origin:50% 0;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 34%,transparent 96%);mask-image:linear-gradient(to bottom,transparent 0,#000 34%,transparent 96%)}
.wh-hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) 468px;gap:48px;align-items:center;padding:92px 0 96px}
.wh-hero .eyebrow{color:#fff}
.wh-hero .eyebrow::before{background:rgba(255,255,255,.85)}
.wh-hero h1{margin:0;font:800 clamp(38px,5vw,62px)/1.03 var(--sans);letter-spacing:-.03em}
.wh-hero h1 .g{background:linear-gradient(90deg,#fff,var(--teal-t2));-webkit-background-clip:text;background-clip:text;color:transparent}
.wh-hero .lead{margin:20px 0 0;font-size:18px;line-height:1.62;color:rgba(255,255,255,.94);max-width:52ch}
.wh-hero .cta-row{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}
.wh-hero .trust{display:flex;gap:22px;margin-top:26px;flex-wrap:wrap}
.wh-hero .trust span{display:inline-flex;align-items:center;gap:8px;font:700 12.5px/1.3 var(--mono);letter-spacing:.02em;color:rgba(255,255,255,.92)}
.wh-hero .trust svg{width:17px;height:17px;stroke:var(--teal-t2);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@keyframes whfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.hstack{position:relative;z-index:2;margin-top:15px;display:flex;flex-direction:column;gap:11px;transform-style:preserve-3d}
@keyframes whgnd{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.92);opacity:.72}}
.wh-chip{position:absolute;z-index:5;display:flex;align-items:center;gap:10px;overflow:hidden;background:linear-gradient(150deg,rgba(0,56,95,.6),rgba(0,38,68,.45));border:1px solid rgba(255,255,255,.42);border-radius:13px;padding:9px 13px 9px 11px;box-shadow:0 18px 40px -16px rgba(0,20,40,.6),inset 0 1px 0 rgba(255,255,255,.3),0 0 22px rgba(0,190,188,.2)}
.wh-chip::before, .wh-chip::after{content:"";position:absolute;width:9px;height:9px;border:2px solid var(--teal-t1);opacity:.85}
.wh-chip::before{left:5px;top:5px;border-right:0;border-bottom:0;border-radius:4px 0 0 0}
.wh-chip::after{right:5px;bottom:5px;border-left:0;border-top:0;border-radius:0 0 4px 0}
.wh-chip .ico{flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:radial-gradient(120% 120% at 30% 20%,rgba(0,190,188,.3),rgba(0,190,188,.12));border:1px solid rgba(125,238,236,.55)}
.wh-chip .ico svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
.wh-chip .k{display:flex;align-items:center;gap:6px;font:700 8px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--teal-t2);white-space:nowrap}
.wh-chip .k i{width:5px;height:5px;border-radius:50%;background:var(--teal-t1);box-shadow:0 0 7px rgba(125,238,236,.95)}
.wh-chip .v{font:800 15px/1 var(--mono);color:#fff;white-space:nowrap;text-shadow:0 1px 5px rgba(0,26,48,.55)}
.wh-chip .v b{color:var(--teal-t2)}
.wh-chip.h1c{top:-22px;right:12px}
.wh-chip.h2c{top:150px;left:-56px}
.wh-chip.h3c{bottom:93px;right:-14px}
@media(max-width:1080px){.wh-hero .wrap{grid-template-columns:1fr;gap:48px}}
section[id]{scroll-margin-top:84px}
.rtop{position:absolute;top:6px;left:12px;right:6px;height:19px;z-index:7;transform:translateZ(4px);border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,#f4f9fe,#d5e3f1);border:1px solid #a6bed6;box-shadow:inset 0 1px 0 #fff,0 3px 7px -3px rgba(0,70,120,.4);display:flex;align-items:center;gap:9px;padding:0 13px}
.rtop .rlogo{font:900 10px/1 var(--sans);letter-spacing:.18em;color:#5c7d9c;text-shadow:0 1px 0 rgba(255,255,255,.9)}
.rtop .rvent{flex:1;height:8px;border-radius:2px;opacity:.75;background:repeating-linear-gradient(90deg,#b9cde2 0 2px,transparent 2px 5px)}
.rtop .rled{width:6px;height:6px;border-radius:50%;flex:none;background:radial-gradient(circle at 38% 34%,#dffffb,#00bebc);box-shadow:0 0 5px rgba(0,190,188,.8)}
.rbot{position:absolute;bottom:8px;left:12px;right:6px;height:16px;z-index:7;transform:translateZ(4px);border-radius:2px 2px 4px 4px;background:linear-gradient(180deg,#dbe8f4,#bccfe3);border:1px solid #a6bed6;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 5px 9px -3px rgba(0,70,120,.45);display:flex;align-items:flex-end;justify-content:space-between;padding:0 24px}
.rbot .foot{width:16px;height:6px;transform:translateY(5px);border-radius:0 0 3px 3px;background:linear-gradient(180deg,#adc4da,#8aa7c3);box-shadow:0 2px 3px -1px rgba(0,60,110,.4)}
.lhead{flex:none;width:170px;display:flex;align-items:stretch;gap:12px}
.cpanel{flex:none;display:flex;align-items:stretch;gap:5px;padding:3px 0}
.idcol{display:flex;flex-direction:column;align-items:center;gap:2px}
.idcol .ico{width:8px;height:8px;flex:none}
.idcol .i{fill:#7f9cb4}
.idcol .w path{fill:none;stroke:#7f9cb4;stroke-width:1.4;stroke-linecap:round}
.idcol .w circle{fill:#7f9cb4}
.idbar{flex:1;width:6px;min-height:12px;border-radius:4px;position:relative;border:1px solid #b6d2e8;background:linear-gradient(180deg,#0071b9 0 50%,#fff 50% 100%)}
.pname{align-self:center;font:800 22px/1 var(--sans);letter-spacing:.06em;white-space:nowrap;background:linear-gradient(180deg,#00567f 0%,#0085ba 52%,#1cadbd 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.bays{flex:1;display:flex;gap:2.5px;min-width:0;align-self:stretch;margin:2px 0;padding:2.5px;border-radius:3px;background:linear-gradient(180deg,#cfdeee,#bcd0e5);border:1px solid #aec5db;box-shadow:inset 0 1.5px 3px rgba(0,60,110,.28),inset 0 -1px 0 rgba(255,255,255,.45)}
.bay{position:relative;flex:1;min-width:0;border-radius:2px;overflow:hidden;background:linear-gradient(180deg,var(--bay-1),var(--bay-2));border:1px solid var(--steel-edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.72),inset 0 -2px 3px rgba(0,70,130,.13),inset 0 0 0 .5px rgba(0,70,130,.06)}
.bay::after{content:"";position:absolute;left:5.5px;right:3px;top:2.5px;bottom:2.5px;border-radius:1px;background-image:radial-gradient(circle .6px at .6px .6px,rgba(0,72,130,.42) 42%,transparent 48%);background-size:2.2px 2.2px;opacity:.7}
.bay .latch{position:absolute;left:1.3px;top:2.5px;bottom:2.5px;width:2.4px;border-radius:2px;z-index:2;background:linear-gradient(180deg,#f4f9fe,#aec6dd);box-shadow:1px 0 0 rgba(255,255,255,.6),inset 0 0 0 .5px rgba(0,60,110,.24)}
.bay .latch::after{content:"";position:absolute;top:0;left:-1.1px;width:4.6px;height:4.6px;border-radius:50%;background:radial-gradient(circle at 40% 32%,#fff,#9fbdd8 70%);box-shadow:0 1px 2px rgba(0,50,95,.35),inset 0 0 0 .5px rgba(0,60,110,.16)}
.bay .act{position:absolute;right:2px;top:3px;width:2px;height:6px;border-radius:1px;z-index:2;background:linear-gradient(180deg,#c2f6f4,#00bebc);box-shadow:0 0 4px rgba(0,190,188,.72);transition:.3s}
.bay .act2{position:absolute;right:2px;bottom:3px;width:2px;height:5px;border-radius:1px;z-index:2;background:linear-gradient(180deg,#c4e4fb,#2f9fe6);box-shadow:0 0 4px rgba(47,159,230,.6)}
.rzone{flex:none;width:206px;display:flex;align-items:center;gap:10px}
.plate{flex:1;position:relative;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:7px 11px;border-radius:6px;border:1px solid #bcd0e6;background:
    radial-gradient(circle 2px at 7px 6px,#fff,#a9c2da 62%,transparent 100%),
    radial-gradient(circle 2px at calc(100% - 7px) 6px,#fff,#a9c2da 62%,transparent 100%),
    radial-gradient(circle 2px at 7px calc(100% - 6px),#fff,#a9c2da 62%,transparent 100%),
    radial-gradient(circle 2px at calc(100% - 7px) calc(100% - 6px),#fff,#a9c2da 62%,transparent 100%),
    linear-gradient(180deg,#e9f1fa,#d4e3f2);box-shadow:inset 0 1.5px 3px rgba(0,60,110,.24),inset 0 -1px 0 rgba(255,255,255,.85)}
.plate .dell{font:900 12px/1 var(--mono);letter-spacing:.13em;color:#365d84;text-shadow:0 1px 0 rgba(255,255,255,.98),0 -0.7px 0 rgba(0,40,78,.45);margin-top:6px}
.plate .dell b{color:#1c4d78}
.plate .modelrow{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:3px}
.plate .model{font:800 10px/1.15 var(--mono);color:#496f97;text-shadow:0 1px 0 rgba(255,255,255,.95),0 -0.5px 0 rgba(0,40,78,.32)}
.plate .svctag{display:none;margin-top:4px;height:6px;border-radius:1px;opacity:.5;background:repeating-linear-gradient(90deg,#6f8ca6 0 1px,transparent 1px 2px,#6f8ca6 2px 3px,transparent 3px 5px,#6f8ca6 5px 6px,transparent 6px 9px)}
.ubadge{flex:none;position:relative;overflow:hidden;font:900 12px/1 var(--mono);letter-spacing:.03em;color:#fff;background:linear-gradient(160deg,#00c9c5,#0092c9 55%,#0068af);border-radius:6px;padding:5px 9px;box-shadow:0 5px 12px -3px rgba(0,113,185,.62),inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px rgba(255,255,255,.22),inset 0 -3px 5px rgba(0,48,88,.38);text-shadow:0 1px 1px rgba(0,42,78,.55)}
.ubadge::before{content:"";position:absolute;top:0;left:0;right:0;height:46%;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.5),transparent)}
.ctrl{flex:none;display:flex;flex-direction:column;align-items:center;gap:3.5px}
.pwr{width:15px;height:15px;border-radius:50%;position:relative;background:radial-gradient(circle at 38% 32%,#c6f3d5,#1fa855 50%,#11743a);border:1px solid #46b874;box-shadow:0 0 7px rgba(22,132,70,.55),inset 0 1px 0 rgba(255,255,255,.5)}
.pwr::after{content:"";position:absolute;left:50%;top:3px;transform:translateX(-50%);width:1.8px;height:5.5px;background:#083f23;border-radius:2px}
.usb{width:18px;height:8px;border-radius:1.5px;position:relative;background:linear-gradient(180deg,#c7dbeb,#a4bfda);border:1px solid #88a9c6;box-shadow:inset 0 1px 2px rgba(0,40,80,.42)}
.usb::after{content:"";position:absolute;left:2.5px;right:5.5px;top:2px;bottom:2px;border-radius:.5px;background:#eef5fc;box-shadow:inset 0 0 0 .5px rgba(0,50,90,.18)}
.usbc{width:16px;height:6.5px;border-radius:4px;position:relative;background:linear-gradient(180deg,#c7dbeb,#a4bfda);border:1px solid #88a9c6;box-shadow:inset 0 1px 2px rgba(0,40,80,.42)}
.usbc::after{content:"";position:absolute;inset:1.4px 2.5px;border-radius:3px;background:linear-gradient(180deg,#e3eef8,#ccdcec);box-shadow:inset 0 0 0 .5px rgba(0,50,90,.2)}
@keyframes boot{0%{opacity:.2;transform:scaleY(.4)}60%{opacity:1;transform:scaleY(1.15)}100%{opacity:1;transform:scaleY(1)}}
@keyframes compSheen{from{transform:translateX(-220%) skewX(-16deg)}to{transform:translateX(240%) skewX(-16deg)}}
@keyframes ctaLight{from{transform:translateX(-170%) skewX(-18deg)}to{transform:translateX(370%) skewX(-18deg)}}
.rback{display:none}
.fbheb{font:800 9px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:#4d84ac}
.fbnote{flex:none;font:700 9.5px/1.35 var(--mono);color:#0a8f6a;padding-right:8px;text-align:right;max-width:200px}
.fbnote.err{color:#c0392b}
@keyframes fbIn{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@property --cpang{syntax:"<angle>";inherits:false;initial-value:0deg}
.mon-ecg{stroke-dasharray:100 100;stroke-dashoffset:0}
@keyframes ixecg{0%{stroke-dashoffset:100}50%{stroke-dashoffset:0}100%{stroke-dashoffset:-100}}
.up-needle{transform-box:view-box;transform-origin:50px 48px}
@keyframes ixneedle{0%,100%{transform:rotate(-46deg)}55%{transform:rotate(8deg)}}
.inf-flow{stroke-dasharray:14 86;stroke-dashoffset:0;opacity:0}
@keyframes ixinf{to{stroke-dashoffset:-100}}
@keyframes ixspin{to{transform:rotate(360deg)}}
.sup-mic{transform-box:fill-box;transform-origin:center}
.sup-ping{transform-box:fill-box;transform-origin:center;opacity:0}
@keyframes ixmic{0%,100%{transform:scale(1)}50%{transform:scale(1.28)}}
@keyframes ixping{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(3);opacity:0}}
.cz-gear1, .cz-gear2{transform-box:fill-box;transform-origin:center}
@keyframes ixflow{0%,100%{opacity:.3}45%{opacity:1}}
.sh-check{stroke-dasharray:100 100;stroke-dashoffset:0}
@keyframes ixshield{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes ixcheck{0%{stroke-dashoffset:100}45%,100%{stroke-dashoffset:0}}
.wh-hero, .wh-hero *, .wh-hero *::before, .wh-hero *::after{animation:none!important}
.wh-hero .wh-chip{transition:border-color .3s ease,box-shadow .3s ease}
.wh-hero .wh-chip:hover{border-color:rgba(125,238,236,.8);box-shadow:0 18px 34px -18px rgba(0,190,188,.75)}
.wh-hero .btn-pri, .wh-hero .btn-ghost{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,color .25s ease}
.wh-hero .btn-pri:hover, .wh-hero .btn-ghost:hover{transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){.wh-hero *{animation:none!important;transition:none!important}}
.fx5 .band{position:relative;overflow:hidden;background:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.4px) 0 0/22px 22px,linear-gradient(150deg,#0071b9 0%,#00bebc 100%);padding:54px 0 64px;color:#eaf8fb}
.fx5 .band-inner{max-width:1320px;margin:0 auto;padding:0 26px;position:relative;z-index:1}
.fx5 .band::before{content:"";position:absolute;z-index:0;top:-28%;left:-8%;width:50%;height:92%;background:radial-gradient(circle at 35% 35%,rgba(0,190,188,.75),transparent 62%);opacity:.72;pointer-events:none}
.fx5 .band::after{content:"";position:absolute;z-index:0;bottom:-30%;right:-6%;width:54%;height:96%;background:radial-gradient(circle at 62% 60%,rgba(0,113,185,.8),transparent 62%);opacity:.72;pointer-events:none}
.fx5 .band-h{display:flex;align-items:center;gap:13px;margin-bottom:26px;position:relative;z-index:1}
.fx5 .band-h h3{margin:0;font:800 23px/1.25 var(--sans);letter-spacing:-.015em;background:linear-gradient(100deg,#ffffff 0%,#ffffff 36%,#c6f8ff 48%,#ffffff 60%,#ffffff 100%);background-size:230% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.fx5 .band-h p{margin:6px 0 0;font:700 11px/1.5 var(--mono);letter-spacing:.06em;color:rgba(255,255,255,.92);text-shadow:0 1px 10px rgba(0,50,80,.35)}
.fx5 .band-grid{display:block;position:relative;z-index:1}
.fx5 .cf-stage{display:flex;justify-content:center;gap:26px;align-items:flex-start;padding:22px 0 30px}
.fx5 .band-badge{width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:14px;background:rgba(255,255,255,.17);border:1px solid rgba(255,255,255,.45);color:#fff;box-shadow:0 8px 20px -8px rgba(0,40,70,.4),inset 0 1px 0 rgba(255,255,255,.35)}
.fx5 .band-badge svg{width:26px;height:26px}
.fx5 .band-h h3 b{-webkit-text-fill-color:transparent;color:transparent;font-weight:900}
.fx5 .grp2{position:relative;flex:0 0 262px;height:326px;transform-style:preserve-3d;transform:perspective(1500px) rotateX(0deg)}
.fx5 .g-face{position:absolute;inset:0;transform:translateZ(0);border-radius:14px;padding:16px 16px 14px;display:flex;flex-direction:column;background:linear-gradient(180deg,#ffffff,#eef5fc);border:1px solid var(--line-2);box-shadow:0 28px 42px -26px rgba(0,60,110,.5),inset 0 1px 0 #fff;overflow:hidden}
.fx5 .g-side{display:none}
.fx5 .g-left{display:none}
.fx5 .g-side-l{display:none}
.fx5 .g-top{display:none}
.fx5 .grp2::after{display:none}
.fx5 .grp2::before{content:"";position:absolute;top:-7px;left:-7px;right:-7px;bottom:-15px;border-radius:20px;background:linear-gradient(160deg,#dde9f7 45%,#9dbcda);transform:translateZ(-16px);box-shadow:0 24px 34px -16px rgba(0,55,110,.45)}
.fx5 .grp2-h{display:flex;align-items:center;gap:9px;margin-bottom:11px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.fx5 .grp2-ic{width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:9px;background:var(--grad);color:#fff;box-shadow:0 8px 15px -5px rgba(0,113,185,.5)}
.fx5 .grp2-ic svg{width:17px;height:17px}
.fx5 .grp2-h h4{margin:0;font:800 12px/1.15 var(--sans);letter-spacing:-.01em;color:var(--ink);flex:1}
.fx5 .grp2 ul{list-style:none;margin:0;padding:0}
.fx5 .grp2 li{display:flex;align-items:center;gap:9px;padding:5px 0;font:600 10px/1.3 var(--sans);color:var(--ink-2)}
.fx5 .grp2 li+li{border-top:1px solid var(--line-2)}
.fx5 .li-ic{width:26px;height:26px;flex:none;display:grid;place-items:center;border-radius:7px;background:linear-gradient(180deg,#fff,#f1f8fd);border:1px solid var(--line);color:var(--blue);box-shadow:0 3px 7px -3px rgba(0,60,110,.28),inset 0 1px 0 #fff}
.fx5 .li-ic svg{width:16px;height:16px}
.fx5 .grp2 li b{color:var(--ink);font-weight:800}
@media(max-width:980px){.fx5 .cf-stage{flex-wrap:wrap;gap:16px;perspective:none}}
@media(max-width:980px){.fx5 .grp2{transform:none;flex:0 0 46%;height:auto;animation:none}}
@media(max-width:980px){.fx5 .g-face{position:relative;inset:auto;transform:none;height:100%}}
@media(max-width:980px){.fx5 .g-side, .fx5 .g-side-l, .fx5 .g-top{display:none}}
@media(max-width:560px){.fx5 .grp2{flex-basis:100%}}
.fx5 .sa-block{margin-top:42px;padding-top:38px;border-top:1px solid rgba(255,255,255,.2)}
.fx5 .sa-head{margin:0 0 22px;display:flex;align-items:center;gap:14px}
.fx5 .sa-badge{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:13px;background:linear-gradient(160deg,rgba(255,255,255,.3),rgba(255,255,255,.08));border:1px solid rgba(255,255,255,.42);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 12px 24px -10px rgba(0,20,50,.55)}
.fx5 .sa-badge svg{width:23px;height:23px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fx5 .sa-ht h3{margin:0;font:800 21px/1.15 var(--sans);letter-spacing:-.015em;color:#fff;text-shadow:0 2px 12px rgba(0,40,70,.35)}
.fx5 .sa-ht p{margin:5px 0 0;font:600 12.5px/1.4 var(--sans);color:rgba(255,255,255,.88);letter-spacing:.005em}
@keyframes beamrun{0%{opacity:0;stroke-dashoffset:0}7%{opacity:1}100%{opacity:1;stroke-dashoffset:-100}}
@keyframes saled{50%{opacity:.2}}
.fx5 .band::before, .fx5 .band::after, .fx5 .band-h h3, .fx5 .band-badge{animation:none!important}
.fx5 .band-h h3{background-position:0 0}
@keyframes cf_netspin{to{transform:rotate(360deg)}}
.fx5 .cp-htag{position:relative;z-index:0;display:inline-flex;align-items:center;gap:9px;margin-top:16px;overflow:hidden;font:800 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--blue);background:linear-gradient(180deg,#ffffff,#f0fbff);border-radius:999px;padding:10px 20px;box-shadow:0 16px 34px -16px rgba(0,113,185,.5)}
.fx5 .cp-htag i{width:7px;height:7px;flex:none;border-radius:50%;background:var(--grad);box-shadow:0 0 10px rgba(0,190,188,.9)}
.fx5 .cp-htag::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.8px;background:conic-gradient(from var(--cpang),#00bebc,#0071b9,#8fe9e6,#4aa9e0,#0071b9,#00bebc);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.fx5 .cp-htag::after{content:"";position:absolute;top:-40%;left:0;width:42%;height:180%;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.9) 50%,transparent 62%);transform:translateX(-230%) skewX(-16deg);pointer-events:none}
.fx5 .faq-sec{position:relative;isolation:isolate;background:#ffffff;padding:88px 0 96px}
.fx5 .faq-sec::before{content:"";position:absolute;top:0;left:0;width:100%;height:340px;z-index:0;background:linear-gradient(180deg,#edf7fd,#ffffff);pointer-events:none}
.fx5 .faq-inner{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:0 26px}
.fx5 .faq-head{text-align:center;margin:0 auto 42px}
.fx5 .faq-head h2{margin:0;font:800 clamp(27px,3.5vw,44px)/1.07 var(--sans);letter-spacing:-.03em;color:var(--ink)}
.fx5 .faq-head h2 b{font-weight:800;background:linear-gradient(100deg,#00bebc,#0071b9,#00bebc);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.fx5 .faqgrid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:26px;align-items:start;max-width:1040px;margin:0 auto}
.fx5 .co3-acc{position:relative;display:flex;flex-direction:column;padding-left:64px}
.fx5 .co3-acc::before{content:"";position:absolute;left:19px;top:14px;bottom:14px;width:2px;background:repeating-linear-gradient(180deg,var(--blue-t2) 0 7px,transparent 7px 15px)}
.fx5 .co3-acc::after{content:"";position:absolute;left:19px;top:14px;bottom:14px;width:2px;background:repeating-linear-gradient(180deg,var(--teal) 0 3px,transparent 3px 24px)}
.fx5 .co3-q{background:transparent;border:0;position:relative;border-bottom:1.5px dashed var(--line)}
.fx5 .co3-q:last-child{border-bottom:0}
.fx5 .co3-q summary{display:flex;align-items:center;gap:16px;padding:21px 4px;cursor:pointer;font:700 16.5px/1.4 var(--sans);letter-spacing:-.01em;color:var(--ink);list-style:none;transition:color .2s}
.fx5 .co3-q summary:hover{color:var(--blue)}
.fx5 .co3-q summary::-webkit-details-marker{display:none}
.fx5 .co3-q .qn{position:absolute;left:-64px;top:18px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;border:2px solid var(--blue-t2);color:#005a94;font:800 11.5px/1 var(--mono);transition:all .3s;z-index:1}
.fx5 .co3-q[open] .qn{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 0 0 5px rgba(0,190,188,.16),0 10px 22px -8px rgba(0,113,185,.65)}
.fx5 .co3-q .chev{margin-left:auto;flex:none;display:grid;place-items:center;transition:transform .3s}
.fx5 .co3-q .chev svg{width:20px;height:20px;stroke:#5fb1e2;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s,transform .3s}
.fx5 .co3-q summary:hover .chev svg{stroke:var(--blue)}
.fx5 .co3-q[open] .chev svg{stroke:var(--teal-d1);transform:rotate(180deg)}
.fx5 .co3-q summary .qtx{position:relative}
.fx5 .co3-q summary .qtx::after{content:"";position:absolute;left:0;bottom:-6px;height:3px;width:0;border-radius:2px;background:var(--grad);transition:width .35s ease}
.fx5 .co3-q[open] summary .qtx::after{width:100%}
.fx5 .co3-q .ans{margin:2px 4px 22px 0;padding:14px 16px 14px 18px;font-size:14px;line-height:1.75;color:var(--ink-2);border-left:2.5px solid var(--teal-t2);border-radius:0 12px 12px 0;background:linear-gradient(90deg,var(--teal-t4),rgba(224,247,246,0) 70%)}
/* the "nav answers" label is i18n, not CSS copy: the page ships in RO/EN/DE
   since DATACENTER-REDESIGN Faza 2, and a hardcoded content: string would have
   printed Romanian on nav.co and nav.at (colocare solves it the same way) */
.fx5 .co3-q .ans::before{content:attr(data-prompt);display:block;margin-bottom:7px;font:700 9.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--teal-d1)}
.fx5 .faqhelp{position:sticky;top:96px;border-radius:18px;background:linear-gradient(118deg,#0071b9 8%,#0092b9 52%,#00bebc 100%);padding:22px;box-shadow:0 26px 56px -22px rgba(0,80,140,.55);overflow:hidden}
.fx5 .faqhelp .fh-ic{width:30px;height:30px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-bottom:10px}
.fx5 .faqhelp h4{margin:0 0 7px;font:800 17px/1.3 var(--sans);color:#fff}
.fx5 .faqhelp p{margin:0;font:500 13px/1.6 var(--sans);color:rgba(255,255,255,.93)}
.fx5 .faqhelp .lc{display:flex;align-items:center;gap:8px;margin:15px 0 7px;font:700 10px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:#fff}
.fx5 .faqhelp .lc i{width:7px;height:7px;flex:none;border-radius:50%;background:var(--teal-t1);box-shadow:0 0 8px rgba(125,238,236,.9)}
.fx5 .faqhelp .mail{display:inline-block;font:700 13.5px/1 var(--mono);color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.5);text-underline-offset:4px}
.fx5 .faqhelp .mini{margin-top:8px;font:600 9.5px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.fx5 .faqbtn{display:block;text-align:center;margin-top:16px;padding:12px 16px;border-radius:12px;font:800 13px/1 var(--sans);letter-spacing:.02em;text-decoration:none;color:#fff;background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.7);transition:background .25s,transform .25s}
.fx5 .faqbtn:hover{background:rgba(255,255,255,.24);transform:translateY(-2px)}
@media (max-width:1080px){.fx5 .faqgrid{grid-template-columns:1fr}}
@media (max-width:1080px){.fx5 .faqhelp{position:relative;top:auto}}
.colofisa{--blue:#0071b9;--teal:#00bebc;--grad:linear-gradient(135deg,#00bebc,#0071b9);--grad-band:linear-gradient(118deg,#0071b9 8%,#0092b9 52%,#00bebc 100%);--blue-t1:#5fb1e2;--blue-t2:#9ed3f0;--blue-t3:#d7edfa;--blue-t4:#eaf6fd;--blue-d1:#005a94;--teal-t1:#38d9d6;--teal-t2:#7deeec;--teal-t3:#c9f8f7;--teal-t4:#e0f7f6;--teal-d1:#008a88;--amber:#ffb545;--amber-d:#e8912a;--ink:#0d3a5c;--ink-2:#25567d;--muted:#42688e;--faint:#7396b3;--bg:#f2f9fd;--surface:#fff;--soft:#f6fbfe;--line:#d9eaf5;--line-2:#e7f2fa;--r-xs:8px;--r-sm:11px;--r:16px;--r-lg:24px;--pill:999px;--sh:0 1px 2px rgba(0,113,185,.06),0 16px 34px -20px rgba(0,113,185,.25);--sh-lift:0 3px 10px rgba(0,113,185,.08),0 36px 64px -26px rgba(0,113,185,.38);--sans:'InterCo',system-ui,-apple-system,'Segoe UI',sans-serif;--mono:'MonoCo','JetBrains Mono',ui-monospace,monospace;font-family:var(--sans);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:1.55}
.colofisa .wrap{width:96%;max-width:none;margin:0 auto;padding:0}
.colofisa .eyebrow{font:600 12px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--blue);display:inline-flex;align-items:center;gap:10px;margin:0 0 18px}
.colofisa .eyebrow::before{content:"";width:24px;height:2px;background:var(--grad);border-radius:2px}
.colofisa .sec-head{max-width:700px;margin:0 0 52px}
.colofisa .sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.colofisa .sec-head.center .eyebrow::before{display:none}
.colofisa .sec-head p{color:var(--muted);font-size:17px;margin:16px 0 0;max-width:62ch}
.colofisa .sec-head.center p{margin-left:auto;margin-right:auto}
.colofisa .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;font:800 15px/1 var(--sans);letter-spacing:.01em;padding:16px 28px;border-radius:var(--pill);border:1px solid transparent;cursor:pointer;text-decoration:none;overflow:hidden;transition:transform .18s,box-shadow .25s,background .25s,border-color .2s,color .2s;white-space:nowrap}
.colofisa .btn:active{transform:translateY(1px)}
.colofisa .btn-pri{background:var(--grad);color:#fff;text-shadow:0 1px 4px rgba(0,63,104,.45);box-shadow:0 14px 34px -12px rgba(0,113,185,.65)}
.colofisa .btn-pri:hover{transform:translateY(-2px);filter:brightness(1.08) saturate(1.05);box-shadow:0 20px 46px -12px rgba(0,113,185,.75),0 0 26px rgba(0,190,188,.35)}
.colofisa .band .btn-pri{border:1.5px solid rgba(255,255,255,.7);box-shadow:0 16px 38px -14px rgba(0,40,70,.55)}
.colofisa .btn-pri::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);transition:left .5s ease}
.colofisa .btn-pri:hover::after{left:125%}
.colofisa .faqhelp .btn{margin-top:15px}
.colofisa .faqhelp .btn-pri{border:1.5px solid rgba(255,255,255,.7)}
.colofisa .co3-info{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(298deg,#00bebc 0%,#0092b9 46%,#0071b9 94%)}
.colofisa .co3-info::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;z-index:0;background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);background-size:52px 52px;-webkit-mask-image:radial-gradient(100% 100% at 10% 0,#000 20%,transparent 72%);mask-image:radial-gradient(100% 100% at 10% 0,#000 20%,transparent 72%)}
.colofisa .co3-info>.wrap{position:relative;z-index:1}
.colofisa .co3-info .sec-head .eyebrow{color:#fff}
.colofisa .co3-info .sec-head .eyebrow::before{display:none}
.colofisa .co3-info .sec-head h2{color:#fff}
.colofisa .co3-info .sec-head h2 strong{color:#fff;background:none;-webkit-text-fill-color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.55);text-decoration-thickness:3px;text-underline-offset:8px}
.colofisa .dsheet{position:relative;isolation:isolate;overflow:hidden;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:0;background:linear-gradient(165deg,rgba(0,63,104,.34),rgba(0,63,104,.15) 55%,rgba(0,63,104,.28));border-top:1.5px solid rgba(255,255,255,.4);border-bottom:1.5px solid rgba(255,255,255,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 30px 70px -30px rgba(0,30,55,.6)}
.colofisa .dsheet::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.42;z-index:0;background:linear-gradient(rgba(255,255,255,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.10) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(130% 120% at 50% 0%,#000 32%,transparent 92%);mask-image:radial-gradient(130% 120% at 50% 0%,#000 32%,transparent 92%)}
.colofisa .dsheet::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:34%;z-index:0;pointer-events:none;background:linear-gradient(105deg,transparent,rgba(255,255,255,.10) 46%,rgba(125,238,236,.10) 54%,transparent);transform:skewX(-16deg)}
.colofisa .dsin{position:relative;z-index:1;width:96%;max-width:1400px;margin:0 auto;padding:26px 0 30px}
.colofisa .dhead{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-bottom:16px;margin-bottom:26px;border-bottom:1px solid rgba(255,255,255,.28)}
.colofisa .dhead .dt{display:flex;align-items:center;gap:7px;font:800 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#fff;text-shadow:0 1px 3px rgba(0,40,70,.5)}
.colofisa .dhead .dt b{width:8px;height:8px;border-radius:50%;background:var(--teal-t1);display:inline-block}
.colofisa .dhead .dt b:nth-of-type(2){background:var(--blue-t2)}
.colofisa .dhead .dt b:nth-of-type(3){background:rgba(255,255,255,.85)}
.colofisa .dhead .dt svg{width:16px;height:16px;margin:0 5px 0 6px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.colofisa .dhead .dser{display:flex;align-items:center;gap:9px;font:700 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.colofisa .dhead .dser em{position:relative;width:8px;height:8px;border-radius:50%;background:var(--teal);font-style:normal;box-shadow:0 0 9px rgba(0,190,188,.9)}
.colofisa .dhead .dser em::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid rgba(0,190,188,.6)}
.colofisa .dsin .crop{position:absolute;width:15px;height:15px;border:2.5px solid rgba(125,238,236,.85);z-index:2;pointer-events:none}
.colofisa .dsin .crop.tl{left:-4px;top:52px;border-right:0;border-bottom:0}
.colofisa .dsin .crop.tr{right:-4px;top:52px;border-left:0;border-bottom:0}
.colofisa .dsin .crop.bl{left:-4px;bottom:-6px;border-right:0;border-top:0}
.colofisa .dsin .crop.br{right:-4px;bottom:-6px;border-left:0;border-top:0}
.colofisa .dcols{display:grid;grid-template-columns:1.05fr 1.7fr .95fr .95fr;gap:34px}
.colofisa .dcol h4{margin:0 0 9px;display:flex;align-items:center;gap:9px;font:800 10.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:#fff;text-shadow:0 1px 3px rgba(0,40,70,.5)}
.colofisa .dcol h4::before{content:"";width:16px;height:3px;border-radius:2px;flex:none;background:linear-gradient(90deg,var(--teal-t1),var(--teal-t2));box-shadow:0 0 8px rgba(125,238,236,.6)}
.colofisa .dcol h4:not(:first-child){margin-top:22px}
.colofisa .dcol p{margin:0;font:500 13.5px/1.7 var(--sans);color:rgba(255,255,255,.9)}
.colofisa .dcol.desc p{color:rgba(255,255,255,.88)}
.colofisa .dcol.desc b{color:var(--teal-t2);font-weight:700}
.colofisa .dcol .lnks{display:flex;flex-direction:column;gap:8px}
.colofisa .dcol .lnks a{position:relative;display:inline-flex;align-items:center;gap:7px;width:fit-content;font:700 13.5px/1.3 var(--sans);color:#fff;text-decoration:none;transition:color .2s}
.colofisa .dcol .lnks a::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--teal-t1);flex:none;box-shadow:0 0 7px rgba(125,238,236,.8);transition:transform .2s}
.colofisa .dcol .lnks a::after{content:"→";font-weight:800;color:var(--teal-t2);opacity:0;transform:translateX(-4px);transition:all .2s}
.colofisa .dcol .lnks a:hover{color:var(--teal-t2)}
.colofisa .dcol .lnks a:hover::after{opacity:1;transform:none}
.colofisa .dcheck{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.colofisa .dcheck li{position:relative;padding-left:29px;font:600 13.5px/1.5 var(--sans);color:rgba(255,255,255,.92)}
.colofisa .dcheck li::before{content:"";position:absolute;left:0;top:0;width:19px;height:19px;border-radius:6px;background:rgba(0,190,188,.18);border:1.5px solid var(--teal-t1);box-shadow:0 0 10px rgba(0,190,188,.35)}
.colofisa .dcheck li::after{content:"";position:absolute;left:6px;top:3.5px;width:5px;height:9px;border:solid #fff;border-width:0 2.2px 2.2px 0;transform:rotate(40deg)}
.colofisa .dseal{position:absolute;right:2%;bottom:76px;width:118px;height:118px;z-index:0;opacity:.9;pointer-events:none}
.colofisa .dseal .srot{transform-origin:60px 60px;animation:cf_netspin 40s linear infinite}
.colofisa .dseal circle, .colofisa .dseal path{fill:none;stroke:rgba(255,255,255,.8)}
.colofisa .dseal .sr2{stroke:rgba(125,238,236,.7)}
.colofisa .dseal .stext{fill:#fff;stroke:none;font:700 7.6px/1 var(--mono);letter-spacing:.08em}
.colofisa .dseal .smono{fill:#fff;stroke:none;font:800 20px/1 var(--mono);letter-spacing:.04em;text-anchor:middle}
.colofisa .dseal .ssub{fill:var(--teal-t2);stroke:none;font:700 6.5px/1 var(--mono);letter-spacing:.22em;text-anchor:middle}
.colofisa .dbar{position:relative;z-index:1;display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:30px;padding-top:22px;border-top:1px dashed rgba(255,255,255,.3)}
.colofisa .dbar .dnote{display:flex;align-items:center;gap:9px;flex:1;min-width:240px;font:700 10.5px/1.5 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.88);text-shadow:0 1px 3px rgba(0,40,70,.4)}
.colofisa .dbar .dnote i{width:8px;height:8px;border-radius:50%;background:var(--teal);flex:none;box-shadow:0 0 0 2px rgba(255,255,255,.85),0 0 10px rgba(0,190,188,.85)}
.colofisa .dbar .btn-pri{border:1.5px solid rgba(255,255,255,.7)}
.colofisa .dbar .dtel{display:inline-flex;align-items:center;gap:9px;font:800 15px/1 var(--mono);color:#fff;text-decoration:none;text-shadow:0 1px 3px rgba(0,40,70,.4)}
.colofisa .dbar .dtel svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.colofisa .dbar .dtel:hover{color:var(--teal-t2)}
.colofisa .dbar .dtel:hover svg{stroke:var(--teal-t2)}
.colofisa .dsheet{padding:28px 0 20px}
@media (min-width:1400px){.colofisa .wrap{width:1400px}}
@media (max-width:1080px){.colofisa .dcols{grid-template-columns:1fr 1fr;gap:26px 30px}}
@media (max-width:1080px){.colofisa .dseal{position:relative;right:auto;bottom:auto;display:block;margin:22px 0 0 auto}}
@media (max-width:640px){.colofisa .dcols{grid-template-columns:1fr}}
#intrebari *, #intrebari *::before, #intrebari *::after{animation:none!important}
.colofisa .co3-info.sec{padding:0}
.colofisa .co3-info .sec-head h2{font:700 24px/1.55 var(--sans);letter-spacing:normal;margin:.83em 0;text-wrap:initial}
.colofisa .co3-info .sec-head h2 strong{font-weight:900}
.colofisa .dbar .btn{flex:none}
.colofisa .dseal .smono{font:800 10.5px/1 var(--mono)}
.colofisa .dseal .smono.l{font-size:8.4px}
.fx5 .faq-head h2 b{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.wh-hero h1 .g{background:none;color:#fff;-webkit-text-fill-color:#fff}
.wh-hero h2.sub{margin:10px 0 0;font:600 clamp(17px,1.5vw,21px)/1.35 var(--sans);color:rgba(255,255,255,.92);letter-spacing:-.01em}
.fx5 .sa-ht h3 strong{color:#fff;font-weight:800}
.fx5 .co3-q .ans .bold{font-weight:700}
.colofisa .co3-info .sec-head h2{color:#fff}
.wh-hero .lead.lead2{margin-top:12px;font-size:16px;line-height:1.62;color:rgba(255,255,255,.86)}
.wh-hero .punch{margin:16px 0 0;padding:2px 0 2px 14px;border-left:3px solid var(--teal);font:800 17px/1.45 var(--sans);letter-spacing:-.01em;color:#fff}
@media (max-width:640px){.wh-hero .lead.lead2{font-size:15px}}
@media (max-width:640px){.wh-hero .punch{font-size:16px}}
.fx5 .cp-htag::before{background:conic-gradient(from var(--cpang),#00bebc,#0071b9,#7deeec,#5fb1e2,#0071b9,#00bebc)}
@media (min-width:1101px){.wh-hero .wrap{padding-top:150px}}

/* ===== /data-center2 — page sections (DATACENTER-REDESIGN Faza 1) =====
   The legacy /data-center structure (intro + gallery, Cisco network, connectivity /
   DDoS / support, equipment / environment / benefits lists, facilities band,
   equipment details, quote form) in the /gazduire-web design language, on top of
   the shared design-system rules above (tokens, hero copy, band, FAQ, sheet).
   Motion budget: NOTHING moves on its own — every effect is hover-only
   (transform/box-shadow). Official palette only, no dark sections. */

/* ── hero: duotone corridor photo under the brand gradient ── */
/* the hero background is the legacy /data-center header photo — the duotone blue→teal corridor
   shown without darkening or a gradient overlay (the gradient is baked into the photo), only a
   faint tint under the copy for contrast and the grid texture almost off. It now carries the
   same touch of opacity the gallery photos got, at the owner's word (2026-09-18) — which
   supersedes the "exactly as legacy" instruction of 2026-09-09 */
.dc-hero .bgimg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;
  object-position:center;opacity:.88}
.dc-hero::before{background:linear-gradient(100deg,rgba(0,90,148,.22) 0%,rgba(0,90,148,.08) 40%,transparent 60%)}
.dc-hero::after{opacity:.12}
.dc-hero .copy{position:relative;z-index:2}
.dc-hero .wrap{grid-template-columns:minmax(0,1fr) 468px}
@media (min-width:1101px){.dc-hero .wrap{padding-top:150px}.dc-hero .wrap>.copy{align-self:start;padding-top:41px}}
.dc-vis{position:relative;z-index:2;justify-self:end;width:100%;max-width:468px;min-width:0}
.wh-chip .ico .dci{width:17px;height:17px;stroke:#fff}
.wh-hero .btn .dci{width:18px;height:18px;stroke:currentColor;margin:0 0 0 2px}
.wh-hero .btn-ghost .dci{margin:0 2px 0 0}
.wh-hero .trust .dci{width:17px;height:17px;stroke:var(--teal-t2)}
@media (max-width:1080px){.dc-hero .wrap{grid-template-columns:minmax(0,1fr)}.dc-hero .copy{min-width:0}.dc-vis{justify-self:center;margin-top:10px}.dc-vis .wh-chip.h2c{right:14px}.dc-vis .wh-chip.h1c{right:14px}}


/* ── hero gallery box: the legacy layer-1 content (ten photos + intro) as a glass card ── */
.dc-hg{position:relative;background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.5);border-radius:22px;padding:16px 16px 18px;box-shadow:0 34px 70px -34px rgba(0,20,40,.6),inset 0 1px 0 rgba(255,255,255,.35);transform:perspective(1200px) rotateX(0) rotateY(0);transition:transform .7s cubic-bezier(.2,.7,.2,1),border-color .4s}
.dc-hg:hover{transform:perspective(1200px) rotateX(2deg) rotateY(-3deg);border-color:rgba(255,255,255,.7)}
.hg-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:2px 4px 12px;font:700 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.86)}
.hg-head span{display:inline-flex;align-items:center;gap:7px}
.hg-head .dci{width:14px;height:14px;stroke:var(--teal-t2)}
.hg-n{color:var(--teal-t2)}
.hg-stage{position:relative}
.hg-main{position:relative;display:block;aspect-ratio:16/10;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.5);box-shadow:0 20px 40px -20px rgba(0,20,40,.55);background:rgba(255,255,255,.06)}
.hg-main img{width:100%;height:100%;object-fit:cover;display:block;opacity:.88;
  transition:transform .6s ease,opacity .35s ease}
.hg-main:hover img{transform:scale(1.04);opacity:1}
.hg-main::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(13,58,92,.72));pointer-events:none}
.hg-main .cap{position:absolute;z-index:1;left:14px;right:60px;bottom:12px;display:flex;align-items:center;gap:7px;font:700 11px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#fff;text-shadow:0 1px 6px rgba(0,26,48,.7)}
.hg-main .cap .dci{width:13px;height:13px;stroke:#fff}
.hg-zoom{position:absolute;z-index:1;right:12px;bottom:10px;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.5);transition:background .3s}
.hg-main:hover .hg-zoom{background:rgba(0,113,185,.75)}
.hg-zoom .dci{width:16px;height:16px;stroke:#fff}
.hg-stage button{position:absolute;z-index:2;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:rgba(0,40,70,.35);color:#fff;cursor:pointer;display:grid;place-items:center;padding:0;transition:background .25s,border-color .25s}
.hg-stage button:hover{background:rgba(0,113,185,.8);border-color:#fff}
.hg-stage .hg-prev{left:10px}
.hg-stage .hg-next{right:10px}
.hg-stage button svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hg-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:12px}
.hg-th{position:relative;padding:0;border:1px solid rgba(255,255,255,.5);border-radius:9px;overflow:hidden;background:rgba(255,255,255,.08);cursor:pointer;aspect-ratio:3/2;opacity:.55;transition:opacity .3s,transform .3s,border-color .3s,box-shadow .3s}
.hg-th img{width:100%;height:100%;object-fit:cover;display:block;opacity:.78}
.hg-th:hover{opacity:1;transform:translateY(-2px)}
.hg-th.on{opacity:1;border-color:var(--teal-t2);box-shadow:0 0 0 2px rgba(125,238,236,.6)}
.hg-th.on img,.hg-th:hover img{opacity:.95}
.hg-txt{margin:14px 4px 0;font:500 13.5px/1.55 var(--sans);color:rgba(255,255,255,.92)}
.dc-vis .wh-chip.h1c{top:58px;right:26px}
.dc-vis .wh-chip.h2c{top:204px;right:26px;left:auto;bottom:auto}
@media (max-width:520px){.hg-thumbs{gap:6px}.hg-txt{font-size:13px}}

/* ── band under the hero: the /gazduire-web .wh-marq contract (translucent blue band, mono claims,
   diamond separators), static. One row on desktop: the type scales with the viewport instead of wrapping. ── */
.wh-marq{position:relative;z-index:3;overflow:hidden;background:rgba(0,63,104,.5);border-top:1px solid rgba(255,255,255,.28);border-bottom:1px solid rgba(255,255,255,.14)}
.wh-marq .track{display:flex;justify-content:center}
.wh-marq .set{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 22px;padding:16px 17px;white-space:nowrap}
.wh-marq span{font:600 11.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.92)}
.wh-marq b{color:#fff;font-weight:800}
.wh-marq i{width:5px;height:5px;border-radius:1px;background:rgba(255,255,255,.85);transform:rotate(45deg);flex:none}
@media (min-width:1101px){
  .dc-marq .set{flex-wrap:nowrap;gap:0 1.2em;padding:16px 8px;font-size:clamp(7.7px,.69vw,11.5px)}
  .dc-marq span{font-size:inherit;letter-spacing:.07em}
}

/* ── icon system — one dedicated symbol per fact (datacenter2_icons.templ), brand-gradient stroke ── */
.dci{width:1em;height:1em;flex:none;fill:none;stroke:url(#dcIco);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.eyebrow.has-i{display:inline-flex;align-items:center;gap:10px}
.wh .eyebrow.has-i::before{display:none}
.eic{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(135deg,var(--teal-t4),var(--blue-t4));border:1px solid var(--line);box-shadow:inset 0 1px 0 #fff,0 4px 0 -1px #d7edfa}
.eic .dci{width:15px;height:15px}
.lic{width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center;background:linear-gradient(180deg,#fff,var(--blue-t4));border:1px solid var(--line);box-shadow:inset 0 1px 0 #fff,0 3px 6px -3px rgba(0,60,110,.25);margin-top:-3px;transition:background .35s,border-color .35s}
.lic .dci{width:16px;height:16px}

/* ── 3D "casete" — every box is a slab: its face floats over a blue back plate (the .grp2 recipe of the
   band), and ONLY on hover it lifts and tilts a little. No continuous motion, transform-only. ── */
.d3{position:relative;transform-style:preserve-3d;transform:perspective(1200px) rotateX(0) rotateY(0) translateY(0);transition:transform .55s cubic-bezier(.2,.7,.2,1),border-color .3s}
.d3::before{content:"";position:absolute;inset:-6px -6px -14px -6px;border-radius:calc(var(--r-lg) + 6px);background:linear-gradient(160deg,#d7edfa 40%,#5fb1e2);transform:translateZ(-14px);box-shadow:0 26px 36px -18px rgba(0,55,110,.45);transition:box-shadow .5s,background .5s}
.d3.sm::before{inset:-4px -4px -10px -4px;border-radius:calc(var(--r) + 4px);transform:translateZ(-10px);box-shadow:0 18px 26px -14px rgba(0,55,110,.42)}
.d3:hover{transform:perspective(1200px) rotateX(2deg) rotateY(-2.2deg) translateY(-7px)}
.d3.sm:hover{transform:perspective(1200px) rotateX(2.5deg) rotateY(-2.5deg) translateY(-5px)}
.d3:hover::before{box-shadow:0 42px 60px -24px rgba(0,55,110,.55);background:linear-gradient(160deg,#d7edfa 30%,#5fb1e2 70%,#0092b9)}
.d3.still,.d3.still:hover{transform:perspective(1200px)}
.d3.still:hover::before{box-shadow:0 30px 44px -20px rgba(0,55,110,.5)}
@media (prefers-reduced-motion:reduce){.d3,.d3:hover,.d3.sm:hover{transform:none}.d3::before{transform:none;inset:-4px -4px -10px -4px}}

/* ── section heads & generic grids ── */
.dc2 .grid{display:grid;gap:22px;margin-top:44px}
.dc2 .grid3{grid-template-columns:repeat(3,1fr)}
.dc2 .grid2{grid-template-columns:repeat(2,1fr)}
@media (max-width:1000px){.dc2 .grid3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.dc2 .grid3,.dc2 .grid2{grid-template-columns:1fr}}

/* ── cards (connectivity / details) ── */
.dc-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 26px 24px;box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(0,113,185,.06)}
.dc-card:hover{border-color:var(--blue-t2)}
.dc-card .ico,.dc-feat .ico,.dc-col .ico{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,var(--teal-t4),var(--blue-t4));border:1px solid var(--line);flex:none;box-shadow:inset 0 1px 0 #fff,0 5px 0 -1px #d7edfa,0 14px 22px -12px rgba(0,60,110,.45);transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
.dc-card .ico .dci,.dc-feat .ico .dci,.dc-col .ico .dci{width:28px;height:28px}
.dc-card.d3:hover .ico,.dc-feat .f.d3:hover .ico,.dc-col.d3:hover .ico{transform:translateY(-4px) rotate(-4deg);box-shadow:inset 0 1px 0 #fff,0 9px 0 -1px #d7edfa,0 22px 30px -14px rgba(0,60,110,.5)}
.dc-card .ico,.dc-col .ico{margin-bottom:18px}
.dc-card h3,.dc-col h3{margin:0 0 12px;font:800 19px/1.25 var(--sans);letter-spacing:-.015em;color:var(--ink)}
.dc-card p{margin:0;font:500 15px/1.62 var(--sans);color:var(--ink-2)}
.dc-card p u{text-decoration:none}
.dc-card p a{color:var(--blue);font-weight:700;text-decoration:none;border-bottom:1px solid var(--blue-t2)}
.dc-card p a:hover{border-bottom-color:var(--blue)}

/* ── lightbox (hero gallery) ── */
.dc-lb{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:fit-content;height:fit-content;overflow:visible}
.dc-lb::backdrop{background:rgba(5,30,55,.88)}
.dc-lb figure{margin:0;position:relative;display:block}
.dc-lb img{display:block;max-width:min(92vw,1200px);max-height:80vh;width:auto;height:auto;border-radius:14px;box-shadow:0 40px 80px -30px rgba(0,0,0,.7)}
.dc-lb figcaption{margin-top:12px;text-align:center;font:700 12.5px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#fff}
.dc-lb button{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.14);color:#fff;cursor:pointer;display:grid;place-items:center;padding:0}
.dc-lb button:hover{background:rgba(255,255,255,.28)}
.dc-lb .prev{left:-62px}
.dc-lb .next{right:-62px}
.dc-lb .close{top:-16px;right:-16px;transform:none;width:40px;height:40px;background:#0071b9;border-color:#0071b9}
.dc-lb button svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:1320px){.dc-lb .prev{left:10px}.dc-lb .next{right:10px}.dc-lb .close{right:10px;top:10px}}
/* the lightbox carries its own strip: while the dialog is open it covers the
   page, so the gallery's own thumbs cannot be clicked — these can (owner,
   2026-09-19) */
.dc-lb .lb-thumbs{display:flex;gap:8px;margin:14px auto 0;padding:2px;max-width:min(92vw,1200px);
  overflow-x:auto;scrollbar-width:thin}
.dc-lb .lb-th{position:static;transform:none;width:74px;height:50px;flex:none;padding:0;border-radius:8px;
  overflow:hidden;border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.08);
  opacity:.55;transition:opacity .25s,border-color .25s,transform .25s}
.dc-lb .lb-th img{width:100%;height:100%;object-fit:cover;display:block}
.dc-lb .lb-th:hover{opacity:1;transform:translateY(-2px);background:rgba(255,255,255,.08)}
.dc-lb .lb-th.on{opacity:1;border-color:var(--teal-t2);box-shadow:0 0 0 2px rgba(125,238,236,.6)}
@media (max-width:640px){.dc-lb .lb-th{width:58px;height:40px}}

/* ── network: two wide feature rows ── */
.dc-net{background:#fff;padding:88px 0}
.dc-feat .f{display:grid;grid-template-columns:54px 1fr;gap:18px;padding:22px 24px;background:var(--soft);border:1px solid var(--line);border-radius:var(--r);box-shadow:inset 0 1px 0 #fff}
.dc-feat .f:hover{border-color:var(--blue-t2)}
.dc-feat h3{margin:0 0 6px;font:800 18px/1.25 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.dc-feat p{margin:0;font:500 15px/1.6 var(--sans);color:var(--ink-2)}

/* network section: the full-width 3D topology board + the three layer cards under it */
.dc-nethead{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:28px 64px;align-items:end}
.dc-nethead .nh-copy p{max-width:66ch}
.nh-kicker{position:relative;padding:6px 0 4px 30px;border-left:2px solid var(--line)}
.nh-kicker::before{content:"";position:absolute;left:-2px;top:6px;width:2px;height:64px;background:var(--grad);border-radius:2px}
.nh-big{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.nh-2n{font:900 96px/.88 var(--sans);letter-spacing:-.05em;background:linear-gradient(135deg,#0071b9 0%,#0092b9 55%,#00bebc 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.nh-cap{max-width:250px;font:600 13px/1.5 var(--mono);letter-spacing:.04em;color:var(--muted)}
.nh-facts{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:10px}
.nh-facts li{display:flex;align-items:center;gap:12px;font:500 14.5px/1.4 var(--sans);color:var(--ink-2)}
.nh-facts b{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
@media (max-width:900px){.dc-nethead{grid-template-columns:1fr;gap:26px;align-items:start}.nh-kicker{padding:22px 0 0;border-left:0;border-top:1px solid var(--line)}.nh-kicker::before{display:none}.nh-2n{font-size:72px}}
.dc-netmap{position:relative;margin-top:52px}
.layers{display:grid;grid-template-columns:minmax(300px,480px) minmax(0,1fr);gap:28px 72px;align-items:center;margin-top:72px}
.lstk{display:block;width:100%;height:auto;overflow:visible}
.lstk .spine{fill:none;stroke:#00bebc;stroke-width:1.6;stroke-dasharray:3 6;stroke-linecap:round;opacity:.75}
.lstk .hit{pointer-events:all}
.lstk .mv{transition:transform .4s cubic-bezier(.2,.7,.2,1);transform-box:fill-box;transform-origin:center}
.lstk .tf{fill:url(#lsTop);stroke:#0071b9;stroke-opacity:.45;stroke-width:.9;stroke-linejoin:round;transition:stroke .3s,stroke-opacity .3s,stroke-width .3s}
.lstk .in{fill:none;stroke:#fff;stroke-opacity:.85;stroke-width:1}
.lstk .sl{fill:#5fb1e2;stroke:#0071b9;stroke-opacity:.35;stroke-width:.9;stroke-linejoin:round}
.lstk .sr{fill:#0092b9;stroke:#0071b9;stroke-opacity:.35;stroke-width:.9;stroke-linejoin:round}
.lstk .pn{font:900 30px var(--sans);letter-spacing:-.04em;fill:url(#lsNum)}
.lstk .pt{font:800 9.8px var(--mono);letter-spacing:.14em;fill:#0071b9}
.lstk .ic{transition:opacity .3s}
.lstk .pl:hover .mv,.layers:has(.lay-1:hover) .pl-1 .mv,.layers:has(.lay-2:hover) .pl-2 .mv,.layers:has(.lay-3:hover) .pl-3 .mv{transform:translateY(-9px)}
.lstk .pl:hover .tf,.layers:has(.lay-1:hover) .pl-1 .tf,.layers:has(.lay-2:hover) .pl-2 .tf,.layers:has(.lay-3:hover) .pl-3 .tf{stroke:#00bebc;stroke-opacity:1;stroke-width:1.6}
.lstk .pl:hover .ic,.layers:has(.lay-1:hover) .pl-1 .ic,.layers:has(.lay-2:hover) .pl-2 .ic,.layers:has(.lay-3:hover) .pl-3 .ic{stroke:#00bebc}
.lays{display:grid;gap:22px}
.lay{position:relative;padding:14px 0 18px 28px;border-left:2px solid var(--line);transition:border-color .3s}
.lay::before{content:"";position:absolute;left:-9px;top:22px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--blue);transition:background .3s,border-color .3s,box-shadow .3s}
.lay:hover,.layers:has(.pl-1:hover) .lay-1,.layers:has(.pl-2:hover) .lay-2,.layers:has(.pl-3:hover) .lay-3{border-color:var(--teal)}
.lay:hover::before,.layers:has(.pl-1:hover) .lay-1::before,.layers:has(.pl-2:hover) .lay-2::before,.layers:has(.pl-3:hover) .lay-3::before{background:var(--teal);border-color:var(--teal);box-shadow:0 0 0 5px rgba(0,190,188,.16)}
.lay-head{display:flex;gap:18px;align-items:flex-start}
.lay-n{font:900 32px/1 var(--sans);letter-spacing:-.05em;background:linear-gradient(135deg,#0071b9 0%,#0092b9 55%,#00bebc 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;margin-top:2px}
.lay-tag{margin:0 0 5px;font:800 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.lay h3{margin:0;font:800 20px/1.25 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.lay>p{margin:10px 0 0;font:500 15px/1.65 var(--sans);color:var(--ink-2);max-width:62ch}
@media (max-width:900px){.layers{grid-template-columns:1fr;gap:18px;margin-top:44px}.lstk{max-width:380px;margin:0 auto}.lay{padding:12px 0 14px 24px}.lay-n{font-size:28px}}
.nm-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.nm-head h3{margin:0;display:flex;align-items:center;gap:10px;font:800 18px/1.25 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.nm-head h3 .dci{width:22px;height:22px}
.nm-head p{margin:0;font:600 11.5px/1.4 var(--mono);letter-spacing:.04em;color:var(--muted)}
.nm-stage{position:relative}
.nm-hint{display:none;margin:2px 0 4px;font:600 10px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:center}
.net{display:block;width:100%;height:auto;font-family:var(--mono);pointer-events:none}
.nm-canvas{position:relative}
.net-live{position:absolute;inset:0;width:100%;height:100%;overflow:visible;font-family:var(--mono)}
.nm-stage .lk{fill:none;stroke:#9ed3f0;stroke-width:1.4;stroke-linecap:round}
.nm-stage .lk.hi{stroke:#5fb1e2;stroke-width:2}
.nm-stage .lk.dsh{stroke-dasharray:4 5;stroke:#5fb1e2;stroke-width:1.4}
.nm-stage .hit{pointer-events:all}
/* the node's labels go blue on hover — except the AS pill's own text, which is
   white on the brand gradient and would vanish into it (owner, 2026-09-18) */
.nm-stage .n:hover .nt:not(.as){fill:#0071b9}
/* the column heads lead the board, so their chips are filled brand chips with
   a white icon and a lit rim — not an outline with an icon dropped in it
   (owner, 2026-09-14) */
.nm-stage .hd-i{fill:#fff;stroke:#d7edfa;stroke-width:1}
.nm-stage .nt{font:800 11.5px var(--sans);fill:var(--ink)}
.nm-stage .nt.as{font:800 11.5px var(--mono);letter-spacing:.1em;fill:#fff}
.nm-stage .nt.nn{font:800 12px var(--mono);fill:#0071b9}
.nm-stage .ns{font:600 9px var(--mono);letter-spacing:.04em;fill:var(--muted)}
.nm-stage .cap-i{fill:#fff;stroke:#d7edfa;stroke-width:1}
.nm-stage .n:hover .cap-i{stroke:#00bebc;stroke-width:1.6}
.nm-stage .ll{font:800 9.5px var(--mono);letter-spacing:.14em;fill:#0071b9}
.nm-stage .hd .ll{font-size:10px}
.nm-stage .ls{font:700 7.8px var(--mono);letter-spacing:.08em;fill:var(--muted)}
.nm-stage .lg{font:600 8.5px var(--mono);letter-spacing:.05em;fill:var(--muted)}
.net-live:has(.n:hover) .lk{opacity:.22}
.net-live:has(.n-cl:hover) .lk.n-cl,.net-live:has(.n-c1:hover) .lk.n-c1,.net-live:has(.n-c2:hover) .lk.n-c2,.net-live:has(.n-d1:hover) .lk.n-d1,.net-live:has(.n-d2:hover) .lk.n-d2,.net-live:has(.n-q1:hover) .lk.n-q1,.net-live:has(.n-q2:hover) .lk.n-q2,.net-live:has(.n-q3:hover) .lk.n-q3,.net-live:has(.n-q4:hover) .lk.n-q4,.net-live:has(.n-a1:hover) .lk.n-a1,.net-live:has(.n-a2:hover) .lk.n-a2,.net-live:has(.n-r0:hover) .lk.n-r0,.net-live:has(.n-r1:hover) .lk.n-r1,.net-live:has(.n-r2:hover) .lk.n-r2,.net-live:has(.n-r3:hover) .lk.n-r3,.net-live:has(.n-r4:hover) .lk.n-r4,.net-live:has(.n-r5:hover) .lk.n-r5{stroke:#00bebc;stroke-width:2.8;opacity:1}
@media (max-width:900px){.dc-netmap{margin-top:36px}.nm-stage{perspective:none;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#5fb1e2 #eaf6fd;padding-bottom:8px}.nm-canvas{min-width:1120px}.nm-hint{display:block}}

/* ── connectivity / DDoS / support ── */
.dc-conn{padding:88px 0}

/* ── equipment / environment / benefits — the three legacy list columns ── */
.dc-eq{padding:88px 0}
.dc-eq .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px;align-items:start}
.dc-col{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px 22px;box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(0,113,185,.06)}
.dc-col:hover{border-color:var(--blue-t2)}
.dc-col ul{list-style:none;margin:0;padding:0}
.dc-col ul.main{display:grid;gap:9px}
.dc-col ul.main li{display:flex;align-items:flex-start;gap:11px;font:600 14.5px/1.5 var(--sans);color:var(--ink)}
.dc-col ul.main li a{color:var(--blue);font-weight:700;text-decoration:none;border-bottom:1px solid var(--blue-t2)}
.dc-col.d3:hover .lic{background:linear-gradient(180deg,#fff,var(--teal-t4));border-color:var(--teal-t2)}
.dc-col .grp{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.dc-col .grp h4{margin:0 0 10px;display:flex;align-items:center;gap:8px;font:800 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.dc-col .grp h4 .dci{width:15px;height:15px}
.dc-col .grp .note{margin:0 0 10px;font:500 13px/1.5 var(--sans);color:var(--muted)}
/* a note that follows a list needs its own air and a mark, or it reads as one
   more row of the list (owner: it stuck to "GTS Telecom") */
.dc2 .dc-col .grp .note-i{display:flex;align-items:flex-start;gap:9px;
  margin:14px 0 4px;padding-top:12px;border-top:1px dashed var(--line)}
.dc2 .dc-col .grp .note-i .dci{flex:none;width:15px;height:15px;margin-top:2px;stroke:var(--blue)}
.dc-col ul.sub{display:grid;gap:7px}
.dc-col ul.sub li{display:flex;align-items:flex-start;gap:9px;font:500 13.5px/1.45 var(--sans);color:var(--ink-2)}
.dc-col ul.sub li>.dci{width:15px;height:15px;margin-top:3px}
.dc-col ul.sub li strong{color:var(--ink);font-weight:700}
.dc-col ul.sub li.pr{display:grid;grid-template-columns:24px minmax(0,1fr) 64px 78px;align-items:center;gap:8px;padding:2px 0}
.dc-col li.pr .pk{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;background:#fff;border:1px solid var(--line);box-shadow:inset 0 1px 0 #fff}
.dc-col li.pr .pk .dci{width:13px;height:13px}
.dc-col li.pr .nm{font:600 13px/1.2 var(--sans);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dc-col li.pr strong{text-align:right;font:800 11px/1 var(--mono);color:var(--ink-2);white-space:nowrap}
.cbar{height:7px;border-radius:99px;background:var(--blue-t4);border:1px solid var(--line-2);overflow:hidden}
.cbar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(180deg,#00bebc,#0071b9);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.cbar.c10 i{width:9%}.cbar.c20 i{width:16%}.cbar.c40 i{width:26%}.cbar.c80 i{width:46%}.cbar.c200 i{width:100%}
/* The three equipment columns are built like the connectivity modules and,
   through them, like the reseller packages: the brand band behind the top of
   the row, a tinted frame 40px above and 12px around the white panel (drawn
   with two rings, so the markup stays as it was), the pale step over the
   panel, and a nameplate — mark, name in gradient caps, bay number cut as an
   outline, gradient rule (owner, 2026-09-15). */
/* The peering fabric: one panel in the same frame as everything else here —
   three readouts on the scale, then one line per session (owner, 2026-09-16). */
.dc-peers{padding:88px 0}
/* The band belongs to the ROW, not to the frame: a child at z-index:-1 paints
   above its own parent's background, so a band inside the frame covered the
   frame's tint — the outer, lighter step of the stack (owner, 2026-09-16).
   The equipment boxes never had it because there the band lives on .cols. */
.dc2 .dc-peers .pr-row{position:relative;z-index:0;margin-top:76px}
.dc2 .dc-peers .pr-row::before{content:"";position:absolute;z-index:-1;top:-44px;height:134px;
  left:calc(50% - 50vw);width:100vw;
  background:linear-gradient(to left,#00bebc,#0071b9)}
.dc2 .dc-peers .pr-frame{position:relative;padding:40px 12px 12px;background:rgba(163,188,192,.15)}
.dc2 .dc-peers .pr-card{position:relative;background:#fff;padding:26px 24px 22px}
.dc2 .dc-peers .pr-card::before{content:"";position:absolute;top:-18px;left:0;
  width:90%;height:18px;background:rgba(255,255,255,.1)}
/* the same answer to the pointer the boxes above give */
.dc2 .dc-peers .pr-frame{transition:background .28s}
.dc2 .dc-peers .pr-frame:hover{background:rgba(120,165,190,.22)}
.dc2 .dc-peers .pr-card{transition:box-shadow .28s}
.dc2 .dc-peers .pr-frame:hover .pr-card{box-shadow:0 20px 38px -22px rgba(0,60,110,.55)}
.dc2 .dc-peers .pr-card::before{transition:background .28s}
.dc2 .dc-peers .pr-frame:hover .pr-card::before{background:rgba(255,255,255,.22)}
/* the readouts, set on the same rule as the instrument readings above */
.dc2 .dc-peers .pr-read{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
  margin:0 0 26px;padding:0 0 22px;border-bottom:1px dashed var(--line)}
.dc2 .dc-peers .pr-read div{text-align:center}
.dc2 .dc-peers .pr-read b{display:block;font:900 clamp(24px,2.1vw,32px)/1 var(--sans);
  letter-spacing:-.035em;font-variant-numeric:tabular-nums;
  background:linear-gradient(100deg,#0071b9,#00bebc);-webkit-background-clip:text;background-clip:text;
  color:transparent}
.dc2 .dc-peers .pr-read span{display:flex;align-items:center;justify-content:center;gap:11px;margin-top:11px;
  font:800 9.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.dc2 .dc-peers .pr-read span::before,.dc2 .dc-peers .pr-read span::after{content:"";flex:1;height:8px;
  background:
    repeating-linear-gradient(90deg,rgba(0,113,185,.32) 0 1px,transparent 1px 9px) bottom left/100% 8px no-repeat,
    linear-gradient(90deg,rgba(0,113,185,.28),rgba(0,113,185,.28)) bottom left/100% 1px no-repeat}
/* one line per session */
.dc2 .dc-peers .pr-list{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:34px}
.dc2 .dc-peers .pr-list li{display:grid;grid-template-columns:78px minmax(0,1fr) auto 92px;
  align-items:center;gap:12px;padding:8px 0;border-top:1px solid #edf4f9}
.dc2 .dc-peers .pas{font:800 11.5px/1 var(--mono);letter-spacing:.04em;color:var(--blue)}
.dc2 .dc-peers .pnm{font:600 13.5px/1.35 var(--sans);color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc2 .dc-peers .pco{font:500 11.5px/1.2 var(--sans);color:var(--muted);white-space:nowrap}
/* every session carries IPv4; the ones that also carry IPv6 say so in the
   brand gradient, so the eye still finds them (owner, 2026-09-16) */
/* two fixed slots, so the IPv4 chips line up in their own column instead of
   sliding right on the rows that carry no IPv6 */
.dc2 .dc-peers .pip{display:grid;grid-template-columns:repeat(2,42px);gap:6px;
  align-items:center;justify-self:end}
.dc2 .dc-peers .pv4,.dc2 .dc-peers .pv6{font:800 9px/1 var(--mono);letter-spacing:.08em;font-style:normal;
  padding:5px 0;text-align:center}
.dc2 .dc-peers .pv4{color:var(--blue-d1);background:#eaf4fb;box-shadow:inset 0 0 0 1px #cde3f3}
.dc2 .dc-peers .pv6{color:#fff;background:linear-gradient(135deg,#00bebc,#0071b9)}
/* the button that opens the rest of the list — [hidden] needs saying out loud,
   a display rule would otherwise outrank the attribute */
.dc2 .dc-peers .pr-more{display:flex;align-items:center;gap:12px;margin:22px auto 4px;
  padding:12px 20px;border:0;border-radius:0;cursor:pointer;
  font:800 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#fff;
  background:linear-gradient(135deg,#00bebc,#0071b9);
  box-shadow:-6px -6px 0 0 rgba(0,113,185,.13),0 14px 24px -14px rgba(0,113,185,.8);
  transition:box-shadow .25s}
.dc2 .dc-peers .pr-more:hover{box-shadow:-6px -6px 0 0 rgba(0,113,185,.2),0 20px 30px -14px rgba(0,113,185,.9)}
.dc2 .dc-peers .pr-more[hidden]{display:none}
.dc2 .dc-peers .pr-more i{font-style:normal;font:800 11px/1 var(--mono);letter-spacing:.06em;
  padding:5px 7px;background:rgba(255,255,255,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.dc2 .dc-peers .pr-list li[hidden]{display:none}
@media (max-width:1000px){
  .dc2 .dc-peers .pr-list{grid-template-columns:minmax(0,1fr)}
  .dc2 .dc-peers .pr-read{grid-template-columns:minmax(0,1fr);gap:22px}
}
@media (max-width:760px){
  .dc2 .dc-peers .pr-frame{padding:32px 10px 10px}
  .dc2 .dc-peers .pr-card{padding:18px 16px}
  .dc2 .dc-peers .pr-list li{grid-template-columns:70px minmax(0,1fr) 88px;row-gap:2px}
  .dc2 .dc-peers .pco{grid-column:2/4;font-size:11px}
}
/* Built exactly like the connectivity modules: the frame IS the column's
   padding, so nothing reaches outside the row, and the white panel sits in it
   (owner: "ies in afara efectele 3d ... 1:1 cu cele de mai sus"). */
.dc2 .dc-eq .cols{position:relative;z-index:0;gap:20px;margin-top:76px;align-items:stretch}
.dc2 .dc-eq .cols::before{content:"";position:absolute;z-index:-1;top:-44px;height:134px;
  left:calc(50% - 50vw);width:100vw;
  background:linear-gradient(to left,#00bebc,#0071b9)}
.dc2 .dc-eq .eq-col{position:relative;display:flex;flex-direction:column;
  padding:40px 12px 12px;border:0;border-radius:0;box-shadow:none;transform:none;
  background:rgba(163,188,192,.15)}
/* Hover on the three boxes: the frame's tint deepens, the white panel lifts on
   its own shadow, the mark's stepped square opens and the rule under the name
   runs out. Nothing moves the box itself — a box that shifts under the pointer
   is what starts the bottom-edge flicker (owner, 2026-09-16). */
.dc2 .dc-eq .eq-col{transition:background .28s}
.dc2 .dc-eq .eq-col:hover{border-color:transparent;background:rgba(120,165,190,.22)}
.dc2 .dc-eq .eq-card{transition:box-shadow .28s}
.dc2 .dc-eq .eq-col:hover .eq-card{box-shadow:0 20px 38px -22px rgba(0,60,110,.55)}
.dc2 .dc-eq .eq-card::before{transition:background .28s}
.dc2 .dc-eq .eq-col:hover .eq-card::before{background:rgba(255,255,255,.22)}
.dc2 .dc-eq .eq-head .ico{transition:box-shadow .28s}
.dc2 .dc-eq .eq-col:hover .eq-head .ico{
  box-shadow:-10px -10px 0 0 rgba(0,113,185,.2),
    inset 0 1px 0 rgba(255,255,255,.45),0 16px 26px -10px rgba(0,113,185,.85)}
.dc2 .dc-eq .eq-head::after{transition:width .3s cubic-bezier(.2,.7,.2,1)}
.dc2 .dc-eq .eq-col:hover .eq-head::after{width:96px}
.dc2 .dc-eq .eq-card{position:relative;display:flex;flex-direction:column;flex:1;
  padding:20px;border-radius:0;box-shadow:none;background:#fff}
.dc2 .dc-eq .eq-card::before{content:"";position:absolute;top:-18px;left:0;
  width:90%;height:18px;background:rgba(255,255,255,.1)}
/* the nameplate */
.dc2 .dc-eq .eq-head{display:grid;grid-template-columns:52px minmax(0,1fr) auto;
  column-gap:14px;row-gap:9px;align-items:center;margin:0 0 18px;padding:0;background:none}
.dc2 .dc-eq .eq-head .ico{position:relative;grid-area:1/1/3/2;align-self:start;
  width:52px;height:52px;margin:0;border-radius:0;border:0;display:grid;place-items:center;
  background:linear-gradient(135deg,#00bebc,#0071b9);
  box-shadow:-7px -7px 0 0 rgba(0,113,185,.13),
    inset 0 1px 0 rgba(255,255,255,.45),0 12px 20px -10px rgba(0,113,185,.75)}
.dc2 .dc-eq .eq-head .ico::after{content:"";position:absolute;inset:5px;pointer-events:none;
  border:1px solid rgba(255,255,255,.4)}
.dc2 .dc-eq .eq-head .ico .dci{position:relative;width:26px;height:26px;stroke:#fff;stroke-width:1.7}
.dc2 .dc-eq .eq-head h3{grid-area:1/2/2/3;margin:0;
  font:800 clamp(17px,1.45vw,23px)/1.1 var(--sans);letter-spacing:2.5px;text-transform:uppercase;
  background:linear-gradient(100deg,#0071b9,#00bebc);-webkit-background-clip:text;background-clip:text;
  color:transparent}
.dc2 .dc-eq .eq-head .eq-n{grid-area:1/3/2/4;align-self:center;
  font:900 30px/1 var(--mono);letter-spacing:-.02em;color:transparent;
  -webkit-text-stroke:1.5px rgba(0,113,185,.32)}
.dc2 .dc-eq .eq-head::after{content:"";grid-area:2/2/3/4;width:56px;height:3px;
  background:linear-gradient(90deg,#00bebc,#0071b9)}
/* the rows follow the same square language */
.dc2 .dc-eq .eq-col .lic{border-radius:0}
.dc2 .dc-eq .eq-col li.pr .pk{border-radius:0}
.dc2 .dc-eq .eq-col .grp{border-top:0;padding-top:18px;position:relative}
.dc2 .dc-eq .eq-col .grp::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,rgba(0,190,188,.55),rgba(0,113,185,.25) 38%,rgba(0,113,185,0))}
@media (max-width:1000px){.dc-eq .cols{grid-template-columns:1fr;gap:20px}}

/* ── facilities band: seven tiles ── */
.dc-ftiles{display:grid;grid-template-columns:repeat(8,1fr);gap:18px 18px;padding:22px 0 30px;position:relative;z-index:1}
.dc-ftile{grid-column:span 2;display:flex;align-items:center;gap:14px;padding:16px 18px;background:linear-gradient(180deg,#fff,#eef5fc);border:1px solid var(--line-2);border-radius:var(--r);font:800 14px/1.3 var(--sans);color:var(--ink);box-shadow:inset 0 1px 0 #fff}
.dc-ftile:nth-child(5){grid-column:2/span 2}
.dc-ftile .ico{width:44px;height:44px;border-radius:12px;background:var(--grad);display:grid;place-items:center;flex:none;box-shadow:0 8px 15px -5px rgba(0,113,185,.5);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.dc-ftile .ico .dci{width:22px;height:22px;stroke:#fff}
.dc-ftile.d3:hover .ico{transform:translateY(-3px) rotate(-4deg)}
@media (max-width:1000px){.dc-ftiles{grid-template-columns:repeat(4,1fr)}.dc-ftile:nth-child(5){grid-column:span 2}}
@media (max-width:560px){.dc-ftiles{grid-template-columns:1fr}.dc-ftile,.dc-ftile:nth-child(5){grid-column:auto}}

/* ── equipment details ── */
.dc-det{background:#fff;padding:88px 0}
/* ── the equipment plates, in a row ──────────────────────────────────────
   Owner: "fa fix cum sunt cele de acolo" then "astea sa le pui pe orizontal".
   So it is the network layers' own plate — same rhombus, same 16px sides, same
   inner inset, same clip, same gradient numeral and mono tag — one per topic,
   standing in a row with the topic's title and paragraph under it. Each plate
   carries the machine it is about, clipped to its face. (owner, 2026-09-18) */
.dc2 .eqrow{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:56px}
.dc2 .eqcol{display:flex;flex-direction:column}
.dc2 .eqpl{display:block;width:100%;height:auto;overflow:visible;margin:0 0 6px}
/* a plate this size shows its tag smaller than the stack does, so it is set
   larger in plate units to land at the same size on screen */
.dc2 .eqpl .pt{font-size:13px;letter-spacing:.12em}
.dc2 .eqpl .ic{opacity:.34}
.dc2 .eqcol h3{margin:0 0 9px;font:800 18px/1.25 var(--sans);letter-spacing:-.015em;color:var(--ink)}
.dc2 .eqcol>p{margin:0;font:500 14px/1.65 var(--sans);color:var(--ink-2)}
/* the plate answers the whole column, the way it answers its card on the map */
.dc2 .eqcol:hover .mv{transform:translateY(-9px)}
.dc2 .eqcol:hover .tf{stroke:#00bebc;stroke-opacity:1;stroke-width:1.6}
.dc2 .eqcol:hover .ic{opacity:.72}
@media (max-width:1000px){.dc2 .eqrow{grid-template-columns:repeat(2,1fr);gap:26px}}
@media (max-width:620px){.dc2 .eqrow{grid-template-columns:1fr;gap:22px}
  .dc2 .eqpl{max-width:360px;margin-left:auto;margin-right:auto}}

/* ── quote request ── */
.dc-req{padding:88px 0;}
.dc-req .cols{display:grid;grid-template-columns:1fr 1.1fr;gap:44px;align-items:start}
.dc-req .contact{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:14px}
.dc-req .contact li{display:flex;align-items:center;gap:12px;font:700 15px/1.3 var(--sans);color:var(--ink)}
.dc-req .contact .dci{width:22px;height:22px}
.dc-req .contact a{color:var(--blue);text-decoration:none}
.dc-req .contact a:hover{text-decoration:underline}
.dc-req .contact span{font-weight:500;color:var(--ink-2)}
.dc-form{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;box-shadow:inset 0 1px 0 #fff;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.dc-form label{display:grid;gap:7px;font:800 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.dc-form label.full{grid-column:1/-1}
.dc-form .fwrap{position:relative;display:block}
.dc-form .fwrap .dci{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:17px;height:17px;pointer-events:none}
.dc-form .fwrap.ta .dci{top:15px;transform:none}
.dc-form input,.dc-form textarea{width:100%;font:500 15px/1.4 var(--sans);color:var(--ink);background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:12px 14px 12px 40px;outline:none;transition:border-color .2s,box-shadow .2s,background .2s}
.dc-form input:focus,.dc-form textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,113,185,.14);background:#fff}
.dc-form textarea{min-height:130px;resize:vertical}
.dc-form .altcha-row{grid-column:1/-1}
.dc-form .act{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.dc-form .btn .dci{width:18px;height:18px;stroke:currentColor}
@media (max-width:900px){.dc-req .cols{grid-template-columns:1fr}}
/* ── the quote request, standing on a plate ──────────────────────────────
   Owner: "fa ceva cu adevarat WOW ... sa stea totul pe o cutie cum este
   aceasta de aici: 42U · EIA-310-D". So the whole panel stands on the
   equipment row's own plate, stretched wide and shallow: the same faces, the
   same gradients, the same inner inset — the panel sits on its top face and
   the plate's corners and thickness show around it. (owner, 2026-09-18) */
.dc2 .dc-req{padding:64px 0 24px}
.dc2 .reqstage{position:relative;padding:46px 0 124px}
.dc2 .reqplate{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.dc2 .reqplate .tf{fill:url(#lsTop);stroke:#0071b9;stroke-opacity:.45;stroke-width:1.2;stroke-linejoin:round}
.dc2 .reqplate .in{fill:none;stroke:#fff;stroke-opacity:.85;stroke-width:1.4}
.dc2 .reqplate .sl{fill:#5fb1e2;stroke:#0071b9;stroke-opacity:.35;stroke-width:1.2;stroke-linejoin:round}
.dc2 .reqplate .sr{fill:#0092b9;stroke:#0071b9;stroke-opacity:.35;stroke-width:1.2;stroke-linejoin:round}
/* the panel that stands on it */
.dc2 .reqcard{position:relative;z-index:1;width:82%;margin:0 auto;display:grid;
  grid-template-columns:minmax(260px,350px) minmax(0,1fr);gap:28px 40px;align-items:start;
  padding:30px 32px;background:var(--surface);border:1px solid var(--line);
  /* the plate under it has crisp corners; the panel follows — 8px, the owner's
     cap, instead of the section radius (owner, 2026-09-18) */
  border-radius:8px;box-shadow:0 30px 60px -34px rgba(0,60,110,.75),var(--sh)}
.dc2 .reqside{padding:0 36px 0 0;border-right:1px solid var(--line)}
.dc2 .reqcard .sec-head h2{font:800 clamp(24px,2.2vw,31px)/1.14 var(--sans);letter-spacing:-.02em}
.dc2 .reqcard .sec-head p{margin-top:12px;font-size:15px;line-height:1.58}
.dc2 .reqcard .eyebrow{margin-bottom:12px}
.dc2 .reqcard .contact{margin:22px 0 0;gap:13px}
.dc2 .reqcard .contact li a,.dc2 .reqcard .contact li.note{display:inline-flex;align-items:center;gap:10px;
  font:800 15px/1.35 var(--sans);color:var(--blue);text-decoration:none}
.dc2 .reqcard .contact li a:hover{text-decoration:underline}
.dc2 .reqcard .contact li.note{font:600 13.5px/1.45 var(--sans);color:var(--muted);align-items:flex-start}
.dc2 .reqcard .contact .dci{width:18px;height:18px;flex:none}
.dc2 .reqcard .dc-form{padding:0;gap:14px;background:none;border:0;border-radius:0;box-shadow:none}
.dc2 .reqcard .dc-form label{font-size:10px;letter-spacing:.14em;gap:6px}
.dc2 .reqcard .dc-form input,.dc2 .reqcard .dc-form textarea{padding:11px 13px 11px 38px;font-size:14.5px;
  border-radius:6px}
.dc2 .reqcard .dc-form textarea{min-height:90px}
.dc2 .reqcard .dc-form .btn{padding:13px 22px;font-size:14.5px}
@media (max-width:900px){
  .dc2 .reqstage{padding:22px 0 46px}
  .dc2 .reqcard{width:94%}
  .dc2 .reqcard{grid-template-columns:1fr;gap:22px;padding:24px 20px}
  .dc2 .reqside{padding:0 0 22px;border-right:0;border-bottom:1px solid var(--line)}}
@media (max-width:620px){
  /* a plate this narrow shows only slivers at the sides — the panel stands on
     the page instead */
  .dc2 .reqplate{display:none}
  .dc2 .reqstage{padding:0}
  .dc2 .reqcard{width:100%}
  .dc2 .reqcard .dc-form{grid-template-columns:1fr}}
@media (max-width:600px){.dc-form{grid-template-columns:1fr;padding:22px}}

/* band badge icon */
.fx5 .band-badge .dci{width:20px;height:20px;stroke:currentColor}

/* each layer card carries the equipment it describes — the same drawing the
   topology above uses — dead-centre and deep in the background (owner,
   2026-09-14: "mai in umbra... fix pe center") */
.lay-ic{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  height:calc(100% - 14px);width:auto;max-width:56%;pointer-events:none;z-index:0;opacity:.13}
.lay-ic svg{display:block;height:100%;width:auto;max-width:100%}
.lay-head,.lay>p{position:relative;z-index:1}
@media (max-width:900px){.lay-ic{height:calc(100% - 22px);max-width:68%;opacity:.085}}
/* the plate's own icon is drawn big on its face, behind the number and the
   tag — the chip it used to sit in is gone (owner, 2026-09-14) */
.lstk .pl:hover .ic,.layers:has(.lay-1:hover) .pl-1 .ic,.layers:has(.lay-2:hover) .pl-2 .ic,.layers:has(.lay-3:hover) .pl-3 .ic{opacity:.72}

/* ================= the connectivity trio leads with its own figure: the chip
   and the title, then the number the paragraph is really about, then the text
   and the line that closes it, over a pale mark of the same icon (owner,
   2026-09-14). ================= */
/* Built 1:1 on the reseller-hosting packages (measured on the live page):
   a tinted frame — rgba(163,188,192,.15), 40px above and 12px around — with a
   white panel inside it at 20px padding, square corners on both, and the brand
   band running behind the top of the row, which is what turns the frame blue up
   there. The plan name's place is taken by the module's own nameplate.
   (owner, 2026-09-15) */
.dc2 .netmods{position:relative;z-index:0;margin-top:76px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
/* the cards SIT ON the colour, they are not crossed by it: at reseller the
   band starts ~40px above the row and ends just under the plan name, ~90px
   into the card. Same proportions here. */
.dc2 .netmods::before{content:"";position:absolute;z-index:-1;top:-44px;height:134px;
  left:calc(50% - 50vw);width:100vw;
  background:linear-gradient(to left,#00bebc,#0071b9)}
.dc2 .ncmod{position:relative;display:flex;flex-direction:column;
  padding:40px 12px 12px;border:0;border-radius:0;box-shadow:none;outline:0;
  background:rgba(163,188,192,.15)}
.dc2 .ncmod .nm-card{position:relative;display:flex;flex-direction:column;flex:1;
  padding:20px;border-radius:0;box-shadow:none;background:#fff}
/* the third tone, and the one that makes the stack read as depth: the reseller
   packages carry an 18px strip of rgba(255,255,255,.1) directly above the white
   panel, 90% of its width, starting at its padding edge — so the eye reads
   frame, then a lighter step, then the panel (measured: .inner::before) */
.dc2 .ncmod .nm-card::before{content:"";position:absolute;top:-18px;left:0;
  width:90%;height:18px;background:rgba(255,255,255,.1)}
/* Hover, the same answer the equipment boxes give: the frame's tint deepens,
   the white panel lifts, the mark's stepped square opens, the rule under the
   name runs out — and the engraving takes a little more ink. The module itself
   never moves (owner, 2026-09-16). */
.dc2 .ncmod{transition:background .28s}
.dc2 .ncmod:hover{background:rgba(120,165,190,.22)}
.dc2 .ncmod .nm-card{transition:box-shadow .28s}
.dc2 .ncmod:hover .nm-card{box-shadow:0 20px 38px -22px rgba(0,60,110,.55)}
.dc2 .ncmod .nm-card::before{transition:background .28s}
.dc2 .ncmod:hover .nm-card::before{background:rgba(255,255,255,.22)}
.dc2 .ncmod .nm-ic{transition:box-shadow .28s}
.dc2 .ncmod:hover .nm-ic{box-shadow:-10px -10px 0 0 rgba(0,113,185,.2),
  inset 0 1px 0 rgba(255,255,255,.45),0 16px 26px -10px rgba(0,113,185,.85)}
.dc2 .ncmod .nm-head::after{transition:width .3s cubic-bezier(.2,.7,.2,1)}
.dc2 .ncmod:hover .nm-head::after{width:96px}
.dc2 .ncmod .ncgv,.dc2 .ncmod .ncdv,.dc2 .ncmod .ncsw{transition:stroke .28s,fill .28s}
.dc2 .ncmod:hover .ncgv,.dc2 .ncmod:hover .ncdv{stroke:#8cabc2}
.dc2 .ncmod:hover .ncsw{fill:#89a5bb}
/* The nameplate: one grid — the mark on the left spanning the block, the name
   in gradient caps, the bay number cut as an outline, a gradient rule under it
   and the claim on the bottom line (owner: "ceva mult mai wow"). */
.dc2 .ncmod .nm-head{display:grid;grid-template-columns:48px minmax(0,1fr) auto;
  column-gap:14px;row-gap:9px;align-items:center;margin:0 0 18px;padding:0;background:none}
.dc2 .ncmod .nm-ic{position:relative;grid-area:1/1/4/2;align-self:start;
  width:52px;height:52px;border-radius:0;display:grid;place-items:center;
  background:linear-gradient(135deg,#00bebc,#0071b9);
  box-shadow:-7px -7px 0 0 rgba(0,113,185,.13),
    inset 0 1px 0 rgba(255,255,255,.45),0 12px 20px -10px rgba(0,113,185,.75)}
/* a machined hairline inside the tile */
.dc2 .ncmod .nm-ic::after{content:"";position:absolute;inset:5px;pointer-events:none;
  border:1px solid rgba(255,255,255,.4)}
.dc2 .ncmod-02 .nm-ic{background:linear-gradient(135deg,#0092b9,#00509a)}
.dc2 .ncmod-03 .nm-ic{background:linear-gradient(135deg,#00bebc,#0071b9)}
.dc2 .ncmod .nm-ic .dci{position:relative;width:26px;height:26px;stroke:#fff;stroke-width:1.7}
.dc2 .ncmod .nm-head h3{grid-area:1/2/2/3;margin:0;text-shadow:none;
  font:800 clamp(17px,1.45vw,23px)/1.1 var(--sans);letter-spacing:2.5px;text-transform:uppercase;
  background:linear-gradient(100deg,#0071b9,#00bebc);-webkit-background-clip:text;background-clip:text;
  color:transparent}
/* the bay number, cut out of the page rather than printed on it */
.dc2 .ncmod .nm-n{grid-area:1/3/2/4;align-self:center;
  font:900 30px/1 var(--mono);letter-spacing:-.02em;color:transparent;
  -webkit-text-stroke:1.5px rgba(0,113,185,.32)}
.dc2 .ncmod .nm-head::after{content:"";grid-area:2/2/3/4;width:56px;height:3px;
  background:linear-gradient(90deg,#00bebc,#0071b9)}
.dc2 .ncmod .nm-descr{grid-area:3/2/4/4;display:flex;align-items:center;gap:9px;margin:0;
  font:700 11.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#4a7d9e}
.dc2 .ncmod .nm-descr::before{content:"";flex:none;width:7px;height:7px;
  background:linear-gradient(135deg,#00bebc,#0071b9);
  box-shadow:0 0 0 3px rgba(0,190,188,.14)}
/* The drawings are cut into the panel, not mounted on a plate: no well, no
   colour — one tone family with a white edge under every line, the way an
   engraving sits in paper (owner, 2026-09-15). */
.dc2 .ncmod .nm-well{position:relative;margin:6px 0 0;padding:0;height:182px;
  border:0;border-radius:0;background:none;box-shadow:none}
.dc2 .ncmod .nm-well svg{width:100%;height:100%;overflow:visible;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.95)) drop-shadow(0 -1px 0 rgba(20,60,100,.14))}
.dc2 .ncmod .nm-well svg [filter]{filter:none}
/* 01 the gauge */
.dc2 .ncmod .ncg path[stroke="#e7f3fb"]{stroke:#eaeff4;stroke-width:9}
.dc2 .ncmod .ncgv{stroke:#a4bccf;stroke-width:9}
.dc2 .ncmod .ncgt line{stroke:#c3d3df}
.dc2 .ncmod .ncgn line{stroke:#879db0}
.dc2 .ncmod .ncgn circle{fill:#e2eaf0;stroke:#b3c4d1}
.dc2 .ncmod .ncgn circle+circle{fill:#879db0;stroke:none}
/* 02 the scrubbing filter: what is dirty is cut deeper than what is clean */
.dc2 .ncmod .ncsl path,.dc2 .ncmod .ncsr path{stroke:#c6d5e1}
.dc2 .ncmod .ncsd rect{fill:#aec2d1}
.dc2 .ncmod .ncsc rect{fill:#d9e4ec}
.dc2 .ncmod .ncs rect[stroke]{fill:#f1f5f8;stroke:#bccbd7}
.dc2 .ncmod .ncs g[stroke="#bcdcef"] line{stroke:#d6e1e9}
.dc2 .ncmod .ncsw{fill:#9db5c8;opacity:1}
.dc2 .ncmod .ncs path[stroke="#fff"]{stroke:#f2f6f9}
/* 03 the dial */
.dc2 .ncmod .ncd circle[stroke="#e7f3fb"]{stroke:#eaeff4;stroke-width:8}
.dc2 .ncmod .ncdv{stroke:#a4bccf;stroke-width:8}
.dc2 .ncmod .ncdt line{stroke:#c3d3df}
.dc2 .ncmod .ncdh line{stroke:#879db0}
.dc2 .ncmod .ncd circle[fill="#0a3c6e"]{fill:#879db0}
/* the readout */
.dc2 .ncmod .nm-read{padding:18px 0 0;text-align:center}
.dc2 .ncmod .nm-read b{display:block;font:900 clamp(26px,2.3vw,34px)/1 var(--sans);letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(100deg,#0071b9,#00bebc);-webkit-background-clip:text;background-clip:text;
  color:transparent;text-shadow:none}
/* the caption sits ON the scale, the ticks running out to both edges */
.dc2 .ncmod .nm-read span{display:flex;align-items:center;gap:11px;margin-top:13px;
  font:800 9.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.dc2 .ncmod .nm-read span::before,.dc2 .ncmod .nm-read span::after{content:"";flex:1;height:8px;
  background:
    repeating-linear-gradient(90deg,rgba(0,113,185,.32) 0 1px,transparent 1px 9px) bottom left/100% 8px no-repeat,
    linear-gradient(90deg,rgba(0,113,185,.28),rgba(0,113,185,.28)) bottom left/100% 1px no-repeat}
/* the words */
.dc2 .ncmod .nm-body{position:relative;display:flex;flex-direction:column;flex:1;
  margin:20px 0 0;padding:2px 0 2px 18px;border-top:0}
.dc2 .ncmod .nm-body::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,#00bebc,#0071b9 60%,rgba(0,113,185,.15))}
.dc2 .ncmod .nm-body p{flex:1;margin:0;font:500 15px/1.62 var(--sans);color:var(--ink-2)}
/* the opening line leads, the way a standfirst does */
.dc2 .ncmod .nm-body p::first-line{font-weight:650;color:var(--ink)}
/* the link at the end of the words is a destination, so it looks like one:
   a gradient chip on its own line, stepped square behind it like every other
   mark on the page, and a chevron that nudges (owner: "pune un link mai wow") */
.dc2 .ncmod .nm-body p u{display:block;margin-top:16px;text-decoration:none}
.dc2 .ncmod .nm-body p a{display:inline-flex;align-items:center;gap:11px;
  padding:11px 16px;border:0;border-bottom:0;text-decoration:none;
  font:800 12.5px/1 var(--sans);letter-spacing:.01em;color:#fff;
  background:linear-gradient(135deg,#00bebc,#0071b9);
  box-shadow:-6px -6px 0 0 rgba(0,113,185,.13),0 14px 22px -12px rgba(0,113,185,.8);
  transition:box-shadow .26s,background .26s}
.dc2 .ncmod-02 .nm-body p a{background:linear-gradient(135deg,#0092b9,#00509a)}
.dc2 .ncmod .nm-body p a::after{content:"";flex:none;width:7px;height:7px;margin-left:1px;
  border-right:2px solid currentColor;border-top:2px solid currentColor;
  transform:rotate(45deg);transition:transform .26s cubic-bezier(.2,.7,.2,1)}
.dc2 .ncmod .nm-body p a:hover{box-shadow:-9px -9px 0 0 rgba(0,113,185,.2),
  0 20px 30px -12px rgba(0,113,185,.9)}
.dc2 .ncmod .nm-body p a:hover::after{transform:rotate(45deg) translate(3px,-3px)}
/* 01 the needle swings up to the reading once, on load */
.dc2 .ncmod .ncgn{transform-origin:110px 106px;animation:ncSweep 1.5s cubic-bezier(.2,.8,.2,1) both}
@keyframes ncSweep{from{transform:rotate(-52deg)}to{transform:rotate(0)}}
/* 02 traffic runs left to right: dirty into the filter, clean out of it */
.dc2 .ncmod .ncsl,.dc2 .ncmod .ncsr{animation:ncFlow 2.6s linear infinite}
.dc2 .ncmod .ncsr{animation-duration:1.9s}
@keyframes ncFlow{from{stroke-dashoffset:26}to{stroke-dashoffset:0}}
/* 03 the hands keep going, because the shift does */
.dc2 .ncmod .ncdh line:first-child{transform-origin:110px 62px;animation:ncTurn 96s linear infinite}
.dc2 .ncmod .ncdh line:last-child{transform-origin:110px 62px;animation:ncTurn 16s linear infinite}
@keyframes ncTurn{to{transform:rotate(360deg)}}
@media (max-width:1000px){
  .dc2 .netmods{grid-template-columns:1fr;gap:20px;max-width:560px;margin-left:auto;margin-right:auto}
}
@media (max-width:760px){
  .dc2 .ncmod{padding:32px 10px 10px}
  .dc2 .ncmod .nm-card{padding:16px}
  .dc2 .ncmod .nm-well{height:150px}
  .dc2 .ncmod .nm-read b{font-size:26px}
}
@media (prefers-reduced-motion:reduce){
  .dc2 .ncmod .ncgn,.dc2 .ncmod .ncsl,.dc2 .ncmod .ncsr,
  .dc2 .ncmod .ncdh line{animation:none}
}

/* ── section grounds ──────────────────────────────────────────────────────
   The rhythm of /gazduire-web, so the two pages read as one site: white and a
   pale blue tint alternate down the page, both carrying the same fine dot
   grid, an aurora where a section has room to breathe, and the brand band
   sections (dotari, fisa) keeping the colour they already had.
   (owner, 2026-09-16) */
.dc2 .dc-net,.dc2 .dc-eq,.dc2 .dc-det{position:relative;background:#fff}
.dc2 .dc-conn,.dc2 .dc-peers,.dc2 .dc-req{position:relative;
  background:linear-gradient(180deg,#edf7fd 0,#e2f0fb 46%,#eef7fd 78%,#fff 100%)}
.dc2 .dc-net::after,.dc2 .dc-conn::after,.dc2 .dc-eq::after,.dc2 .dc-peers::after,
.dc2 .dc-det::after,.dc2 .dc-req::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(rgba(0,113,185,.06) 1px,rgba(0,0,0,0) 1.5px) 0 0/22px 22px}
/* the aurora: two soft lights in the upper corners, as on /gazduire-web */
.dc2 .dc-net::before,.dc2 .dc-det::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(42% 48% at 13% 2%,rgba(0,190,188,.18),rgba(0,0,0,0) 62%),
    radial-gradient(38% 44% at 88% 6%,rgba(0,113,185,.14),rgba(0,0,0,0) 60%)}
/* the page's own content sits above both layers */
.dc2 .dc-net>.wrap,.dc2 .dc-conn>.wrap,.dc2 .dc-eq>.wrap,.dc2 .dc-peers>.wrap,
.dc2 .dc-det>.wrap,.dc2 .dc-req>.wrap{position:relative;z-index:1}

/* ── Dotari, in the language of "we make a difference" on /data-center ─────
   The legacy section puts the data centre's own photograph behind a brand
   duotone, sets its title in the house handwriting and lays white equipment
   glyphs over it, four then three. Same composition here, with the machines
   drawn in 3D rather than flat. (owner, 2026-09-16) */
.fx5 .band{position:relative;overflow:hidden}
.fx5 .band::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("/imgs/datacenter-bg.webp");background-size:cover;background-position:center;
  opacity:.3}
.fx5 .band-inner{position:relative;z-index:1}
.fx5 .band-h{flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px}
.fx5 .band-badge{margin:0}
.fx5 .band-ht h2{font:800 clamp(26px,2.6vw,38px)/1.15 var(--sans);margin:0}
.fx5 .fc-rows{margin-top:44px;display:flex;flex-direction:column;gap:46px}
.fx5 .fc-row{display:flex;flex-wrap:wrap;justify-content:center;gap:34px 46px}
.fx5 .fc-tile{flex:0 1 240px;display:flex;flex-direction:column;align-items:center;gap:16px}
/* a fixed well for every machine, so the labels line up however tall the
   drawing happens to be */
.fx5 .fc-dr{display:grid;place-items:center;width:100%;height:130px}
.fx5 .fc-dr svg{max-width:100%;max-height:100%;width:auto;height:auto;display:block;
  filter:drop-shadow(0 8px 16px rgba(0,40,80,.35))}
/* the machine names are the legacy page's h3s — kept as headings so the
   equipment keywords ("Generator diesel de 220kVA", "HVAC industrial Daikin")
   stay in the outline, styled back down to a label */
.fx5 .fc-lb{margin:0;text-align:center;color:#fff;font:700 15.5px/1.45 var(--sans);text-shadow:0 1px 2px rgba(0,40,80,.3)}
/* ── the machines, built from elements ────────────────────────────────────
   The same 3D kit the rack on /colocare is made of: a tilted block with three
   faces — the glass front holding its own parts, the shaded side, the lit lid —
   and a shadow on the floor. Nothing here is a picture; every vent, screen,
   lamp and handle is an element. (owner: "3d din elemente", 2026-09-17) */
.fx5 .fc-dr{display:grid;place-items:center;width:100%;height:170px}
.fx5 .fc-m{--w:96px;--h:118px;--d:42px;
  position:relative;display:block;width:var(--w);height:var(--h);perspective:620px}
.fx5 .fcm-t{position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateX(5deg) rotateY(-26deg)}
.fx5 .fc-m .ff{position:absolute;border-radius:7px}
.fx5 .fc-m .front{inset:0;transform:translateZ(calc(var(--d)/2));padding:8px;display:flex;flex-direction:column;gap:5px;
  background:linear-gradient(165deg,rgba(255,255,255,.34),rgba(255,255,255,.15));
  border:1.4px solid rgba(255,255,255,.7);
  box-shadow:0 22px 40px -18px rgba(0,40,70,.55),inset 0 1px 0 rgba(255,255,255,.55),
    0 0 26px rgba(0,190,188,.22)}
/* the faces are tied to the box's own measurements, or they float away */
.fx5 .fc-m .side{top:0;bottom:0;left:50%;width:var(--d);margin-left:calc(var(--d) / -2);
  transform:rotateY(90deg) translateZ(calc(var(--w) / 2));
  background:linear-gradient(180deg,rgba(0,63,104,.34),rgba(0,63,104,.48)),
    repeating-linear-gradient(180deg,rgba(255,255,255,.16) 0 2px,rgba(0,0,0,0) 2px 10px);
  border:1.4px solid rgba(255,255,255,.38)}
.fx5 .fc-m .lid{left:0;right:0;top:50%;height:var(--d);margin-top:calc(var(--d) / -2);
  transform:rotateX(90deg) translateZ(calc(var(--h) / 2)) scale(.99);
  background:linear-gradient(120deg,rgba(255,255,255,.24),rgba(201,248,247,.12));
  border:1.4px solid rgba(255,255,255,.42)}
.fx5 .fcm-g{position:absolute;left:50%;bottom:-14px;width:calc(var(--w) + 16px);height:20px;
  margin-left:calc((var(--w) + 16px) / -2);border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(0,28,50,.55),rgba(0,28,50,0) 70%)}
/* the parts that sit on the front face */
.fx5 .fc-m .perf{flex:1;min-height:16px;border-radius:4px;border:1px solid rgba(255,255,255,.42);
  background:radial-gradient(circle at 2px 2px,rgba(255,255,255,.6) 1px,rgba(0,0,0,0) 1.5px) 0 0/6px 6px}
.fx5 .fc-m .perf.big{flex:1;height:100%}
.fx5 .fc-m .leds{display:flex;gap:5px;align-items:center}
.fx5 .fc-m .leds i{width:6px;height:6px;border-radius:50%;background:#7deeec;
  box-shadow:0 0 7px rgba(125,238,236,.9)}
.fx5 .fc-m .leds i:nth-child(2){background:#5fb1e2;box-shadow:0 0 7px rgba(95,177,226,.9)}
.fx5 .fc-m .leds i:nth-child(3){background:rgba(255,255,255,.55);box-shadow:none}
/* the fan, four blades around a hub */

/* the pieces that live outside the box, in their own depth. Every machine
   that stands on a floor stands on a plinth with feet — the same plinth, so
   the seven read as one set (owner: "sa fie unitar", 2026-09-17) */
.fx5 .fc-m .skid{position:absolute;left:-6px;right:-6px;bottom:-10px;height:10px;border-radius:2px;
  transform:translateZ(14px);background:rgba(160,246,255,.1);
  border:1.2px solid rgba(160,246,255,.65);box-shadow:0 0 12px rgba(99,224,255,.28)}
.fx5 .fc-m .skid::before,.fx5 .fc-m .skid::after{content:"";position:absolute;top:3px;width:15px;height:5px;
  border-radius:1px;border:1.2px solid rgba(160,246,255,.6);background:rgba(160,246,255,.12)}
.fx5 .fc-m .skid::before{left:14px}
.fx5 .fc-m .skid::after{right:14px}
/* the mount plate: it lies in the ROOF's own plane, so whatever leaves the
   machine through it leaves the machine, instead of ending in the air */
.fx5 .fc-m .plate{position:absolute;left:-14px;right:-14px;bottom:-12px;height:12px;border-radius:2px;
  transform:translateZ(16px);background:rgba(160,246,255,.1);
  border:1.2px solid rgba(160,246,255,.6);box-shadow:0 0 12px rgba(99,224,255,.25)}
.fx5 .fc-m .plate::after{content:"";position:absolute;inset:0;border-radius:4px;pointer-events:none;
  background:linear-gradient(90deg,rgba(160,246,255,0),rgba(190,250,255,.85),rgba(160,246,255,0));
  background-size:45% 100%;background-repeat:no-repeat;background-position:-45% 0;opacity:0}
.fx5 .fc-m .anc{position:absolute;bottom:-2px;width:16px;height:12px;transform:translateZ(20px);
  background:rgba(160,246,255,.16);
  border:1.2px solid rgba(160,246,255,.75);border-radius:2px;box-shadow:0 0 9px rgba(99,224,255,.3)}
.fx5 .fc-m .anc.a1{left:-8px}
.fx5 .fc-m .anc.a2{right:-8px}
/* the ceiling machine: slab, sprinkler, spray, detector */
.fx5 .fcm-fire .front{padding:0}
.fx5 .fc-m .slabface{flex:1;border-radius:4px;
  background:repeating-linear-gradient(90deg,rgba(160,246,255,.35) 0 1.2px,rgba(0,0,0,0) 1.2px 14px)}
.fx5 .fc-m .spr{position:absolute;left:26px;top:100%;width:10px;height:20px;transform:translateZ(24px);
  border-radius:0 0 3px 3px;background:rgba(160,246,255,.16);
  border:1.2px solid rgba(160,246,255,.75);border-top:0;box-shadow:0 0 9px rgba(99,224,255,.3)}
.fx5 .fc-m .spr::before{content:"";position:absolute;left:-4px;right:-4px;top:-1px;height:4px;border-radius:2px;
  border:1.2px solid rgba(160,246,255,.8);background:rgba(160,246,255,.22)}
.fx5 .fc-m .spray{position:absolute;left:8px;top:calc(100% + 20px);width:46px;height:42px;transform:translateZ(24px);
  clip-path:polygon(50% 0,100% 100%,0 100%);opacity:0;
  background:
    repeating-linear-gradient(180deg,rgba(190,250,255,.6) 0 3px,rgba(255,255,255,0) 3px 11px),
    linear-gradient(180deg,rgba(160,246,255,.5),rgba(160,246,255,0))}
.fx5 .fc-m .det{position:absolute;right:16px;top:100%;width:26px;height:9px;transform:translateZ(18px);
  border-radius:0 0 13px 13px;background:rgba(160,246,255,.14);
  border:1.2px solid rgba(160,246,255,.75);border-top:0;box-shadow:0 0 9px rgba(99,224,255,.3)}
.fx5 .fc-m .det::after{content:"";position:absolute;left:50%;bottom:2px;width:4px;height:4px;margin-left:-2px;
  border-radius:50%;background:#ff7676;box-shadow:0 0 7px rgba(255,118,118,.9)}
/* the sensor's probe */
/* ── the study pass: one language for all seven ─────────────────────────
   The genset was drawn as a lit technical study — glass faces you can see
   through, edges that glow, parts drawn in line instead of filled, reticle
   corners framing the subject. Owner: "fa-le pe toate in acelasi stil ca
   generatorul". So the language lives here, on every machine, and the genset's
   own block keeps only what is particular to a genset. Colour is spent where
   it says something: copper for busbars, red for the stop, green for run.
   (owner, 2026-09-17) */
.fx5 .fc-m .front{overflow:hidden;border:1.4px solid rgba(160,246,255,.85);
  background:
    linear-gradient(112deg,rgba(255,255,255,0) 38%,rgba(160,246,255,.16) 48%,rgba(255,255,255,0) 58%),
    linear-gradient(176deg,rgba(10,60,95,.34),rgba(6,32,52,.5));
  box-shadow:0 22px 44px -18px rgba(0,30,60,.6),inset 0 0 22px rgba(99,224,255,.28),
    0 0 26px rgba(99,224,255,.35)}
.fx5 .fc-m .lid{background:linear-gradient(120deg,rgba(160,246,255,.3),rgba(99,224,255,.1));
  border:1.4px solid rgba(160,246,255,.6)}
.fx5 .fc-m .side{background:linear-gradient(180deg,rgba(10,70,110,.45),rgba(4,28,46,.6));
  border:1.4px solid rgba(160,246,255,.5);filter:saturate(.9)}
.fx5 .fc-m .side::before{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(90deg,rgba(0,20,40,.5),rgba(0,0,0,0) 60%)}
.fx5 .fc-m .lid::after{content:"";position:absolute;left:8%;right:42%;top:12%;bottom:38%;border-radius:8px;
  background:linear-gradient(120deg,rgba(160,246,255,.32),rgba(255,255,255,0));filter:blur(1px)}
/* reticle corners, the way a concept drawing frames its subject */
.fx5 .fc-m .front::before{content:"";position:absolute;inset:4px;pointer-events:none;
  background:
    linear-gradient(90deg,#9ff3ff 0 9px,rgba(0,0,0,0) 9px) 0 0/100% 1.4px no-repeat,
    linear-gradient(90deg,rgba(0,0,0,0) calc(100% - 9px),#9ff3ff calc(100% - 9px)) 0 0/100% 1.4px no-repeat,
    linear-gradient(90deg,#9ff3ff 0 9px,rgba(0,0,0,0) 9px) 0 100%/100% 1.4px no-repeat,
    linear-gradient(90deg,rgba(0,0,0,0) calc(100% - 9px),#9ff3ff calc(100% - 9px)) 0 100%/100% 1.4px no-repeat,
    linear-gradient(180deg,#9ff3ff 0 9px,rgba(0,0,0,0) 9px) 0 0/1.4px 100% no-repeat,
    linear-gradient(180deg,rgba(0,0,0,0) calc(100% - 9px),#9ff3ff calc(100% - 9px)) 0 0/1.4px 100% no-repeat,
    linear-gradient(180deg,#9ff3ff 0 9px,rgba(0,0,0,0) 9px) 100% 0/1.4px 100% no-repeat,
    linear-gradient(180deg,rgba(0,0,0,0) calc(100% - 9px),#9ff3ff calc(100% - 9px)) 100% 0/1.4px 100% no-repeat;
  opacity:.9}
/* the brand light along the bottom edge */
.fx5 .fc-m .front::after{content:"";position:absolute;left:8px;right:8px;bottom:5px;height:1.4px;border-radius:2px;
  background:linear-gradient(90deg,rgba(99,224,255,0),rgba(99,224,255,.9),rgba(99,224,255,0));
  box-shadow:0 0 12px rgba(99,224,255,.8)}
/* the floor: a pool of cold light, not a shadow */
.fx5 .fcm-g{bottom:-16px;height:26px;
  background:radial-gradient(ellipse at center,rgba(99,224,255,.4),rgba(99,224,255,0) 70%)}
.fx5 .fcm-g::after{content:"";position:absolute;left:18%;right:18%;top:-6px;height:16px;border-radius:50%;
  background:linear-gradient(180deg,rgba(160,246,255,.32),rgba(174,232,255,0));filter:blur(3px)}
/* openings and mesh: line, not sheet metal */
.fx5 .fc-m .perf{border:1.2px solid rgba(160,246,255,.6);border-radius:2px;
  background:
    repeating-linear-gradient(90deg,rgba(160,246,255,.42) 0 1px,rgba(0,0,0,0) 1px 5px),
    repeating-linear-gradient(180deg,rgba(160,246,255,.42) 0 1px,rgba(0,0,0,0) 1px 5px);
  box-shadow:0 0 8px rgba(99,224,255,.25)}
/* displays: lit glass with the reading on it */
/* lamps: two lit, one dark, drawn as a ring */
.fx5 .fc-m .leds i{background:#9ff3ff;box-shadow:0 0 8px rgba(99,224,255,.9)}
.fx5 .fc-m .leds i:nth-child(2){background:#63e0ff;box-shadow:0 0 8px rgba(99,224,255,.75)}
.fx5 .fc-m .leds i:nth-child(3){background:none;border:1.2px solid rgba(160,246,255,.6);box-shadow:none}
/* doors, modules, breakers: outlines with a lit handle */
/* the fan: guard ring, blades and hub, all drawn */
/* nothing on a machine transitions, either — it simply stands there */
.fx5 .fcm-t,.fx5 .fc-m,.fx5 .fc-m *{transition:none}

/* ── the switchboard: what it shows is electricity ───────────────────────
   Owner: "vreau sa se vada ceva cu adevarat despre electrica". So the panel
   shows the three-phase signature itself — three sine waves, 120° apart,
   drifting across an instrument screen — and the two feeds arrive as three
   conductors each, which anyone can count. Then the switchgear: a breaker per
   feed, copper busbars, glands. (owner, 2026-09-17) */
.fx5 .fcm-feeds .front{padding:7px;gap:4px}
.fx5 .fc-m .wave{position:relative;height:30px;border-radius:3px;overflow:hidden;
  border:1.2px solid rgba(160,246,255,.7);
  background:linear-gradient(160deg,rgba(10,60,95,.5),rgba(4,24,40,.6));
  box-shadow:inset 0 0 14px rgba(99,224,255,.35),0 0 12px rgba(99,224,255,.25)}
.fx5 .fc-m .wave svg{position:absolute;left:0;top:0;width:200%;height:100%}
.fx5 .fc-m .wave path{fill:none;stroke-width:1.6;vector-effect:non-scaling-stroke}
.fx5 .fc-m .wave .w1{stroke:#7deeec}
.fx5 .fc-m .wave .w2{stroke:#5fb1e2}
.fx5 .fc-m .wave .w3{stroke:rgba(190,250,255,.9)}
.fx5 .fc-m .wave .hz{position:absolute;left:0;right:0;top:50%;height:1px;
  background:rgba(125,238,236,.35)}
.fx5 .fc-m .wave::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(160,246,255,.14) 0 1px,rgba(0,0,0,0) 1px 10px),
    repeating-linear-gradient(180deg,rgba(160,246,255,.14) 0 1px,rgba(0,0,0,0) 1px 10px)}
/* the two feed compartments */
.fx5 .fc-m .pnl2{display:flex;gap:4px;flex:1}
.fx5 .fc-m .fd{flex:1;display:flex;flex-direction:column;gap:3px;padding:4px 3px;border-radius:2px;
  background:rgba(160,246,255,.08);
  border:1.2px solid rgba(160,246,255,.6);box-shadow:0 0 8px rgba(99,224,255,.2)}
.fx5 .fc-m .ph{height:4px;border-radius:2px}
.fx5 .fc-m .ph.p1{background:#9ff3ff;box-shadow:0 0 6px rgba(99,224,255,.7)}
.fx5 .fc-m .ph.p2{background:#5fb1e2;box-shadow:0 0 6px rgba(95,177,226,.55)}
.fx5 .fc-m .ph.p3{background:rgba(190,250,255,.9);box-shadow:0 0 6px rgba(99,224,255,.45)}
.fx5 .fc-m .mcb{position:relative;margin-top:auto;height:11px;border-radius:2px;
  background:rgba(160,246,255,.12);border:1.2px solid rgba(160,246,255,.75)}
.fx5 .fc-m .mcb::after{content:"";position:absolute;left:50%;top:2px;width:7px;height:7px;margin-left:-3.5px;
  border-radius:1.5px;background:#9ff3ff;box-shadow:0 0 8px rgba(99,224,255,.85)}
/* copper busbars */
.fx5 .fc-m .bus{display:flex;gap:3px;height:8px;padding:0 1px}
.fx5 .fc-m .bus i{flex:1;border-radius:2px;
  border:1.2px solid rgba(255,196,130,.9);
  background:repeating-linear-gradient(90deg,rgba(255,196,130,.4) 0 1px,rgba(0,0,0,0) 1px 6px),
    linear-gradient(180deg,rgba(255,196,130,.26),rgba(196,128,60,.12));
  box-shadow:0 0 9px rgba(255,170,90,.4)}
.fx5 .fc-m .glnd{display:flex;gap:12px;justify-content:center;height:9px}
.fx5 .fc-m .glnd i{width:15px;border-radius:2px 2px 7px 7px;
  background:rgba(160,246,255,.14);
  border:1.2px solid rgba(160,246,255,.75);box-shadow:0 0 8px rgba(99,224,255,.25)}
/* each feed arrives as three conductors — L1, L2, L3 — that you can count */
.fx5 .fc-m .feedln{position:absolute;left:-34px;width:38px;display:flex;flex-direction:column;gap:2.5px;
  transform:translateZ(8px)}
.fx5 .fc-m .feedln i{height:3.5px;border-radius:2px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),
  0 1px 3px rgba(0,30,60,.4)}
.fx5 .fc-m .feedln .k1{background:linear-gradient(180deg,#9ff6f4,#3fbfbd)}
.fx5 .fc-m .feedln .k2{background:linear-gradient(180deg,#8fcdf0,#3d8fc4)}
.fx5 .fc-m .feedln .k3{background:linear-gradient(180deg,#eafcff,rgba(190,250,255,.75))}
.fx5 .fc-m .feedln::after{content:"";position:absolute;right:-5px;top:50%;width:8px;height:19px;
  margin-top:-9.5px;border-radius:2px;background:rgba(160,246,255,.18);
  border:1.2px solid rgba(160,246,255,.8);box-shadow:0 0 9px rgba(99,224,255,.3)}
.fx5 .fc-m .feedln.f1{top:70%}
.fx5 .fc-m .feedln.f2{top:86%}
/* and they come out of a duct that stands on the floor beside the board */
.fx5 .fc-m .duct{position:absolute;left:-40px;top:56%;bottom:-10px;width:14px;border-radius:2px;
  transform:translateZ(8px);border:1.2px solid rgba(160,246,255,.7);
  background:linear-gradient(90deg,rgba(160,246,255,.08),rgba(160,246,255,.24),rgba(160,246,255,.08));
  box-shadow:0 0 10px rgba(99,224,255,.28)}
.fx5 .fc-m .duct::before,.fx5 .fc-m .duct::after{content:"";position:absolute;left:-3px;right:-3px;
  border-radius:2px;border:1.2px solid rgba(160,246,255,.8);background:rgba(160,246,255,.2)}
/* capped at the top, strapped at the waist — a duct, not a cut-off bar */
.fx5 .fc-m .duct::before{top:-4px;height:6px}
.fx5 .fc-m .duct::after{bottom:26%;height:4px;left:-2px;right:-2px}
/* the reading every instrument screen carries */
.fx5 .fc-m .rdg{position:absolute;left:5px;bottom:3px;white-space:nowrap;
  font:800 6px/1 var(--mono);letter-spacing:.04em;color:#9ff3ff;
  text-shadow:0 0 6px rgba(99,224,255,.85)}
/* ── the UPS: an Easy UPS 3M 160 kVA, not a generic cabinet ──────────────
   Owner: "sunt de 160 KVA iar modelul este Easy UPS 3M 160kVA, te rog sa
   desenezi ca si model". What makes it that machine and not any cabinet: the
   tall narrow bay, the touchscreen high on the door with the rating on it, the
   lamp row and the emergency stop beside it, intake louvres over the whole
   lower door, the handle — and the air leaving through the TOP. Same reading
   as the Easy UPS tower on /colocare, in this page's language.
   (owner, 2026-09-17) */
.fx5 .fcm-ups .front{padding:7px;gap:5px}
.fx5 .fcm-ups .uscr{flex:none;height:30px;border-radius:3px;padding:4px 5px;
  display:flex;flex-direction:column;gap:3px;
  border:1.2px solid rgba(160,246,255,.7);
  background:linear-gradient(160deg,rgba(10,60,95,.5),rgba(4,24,40,.6));
  box-shadow:inset 0 0 14px rgba(99,224,255,.35),0 0 12px rgba(99,224,255,.25)}
.fx5 .fcm-ups .uscr i{height:1.6px;border-radius:1px;background:#9ff3ff;
  box-shadow:0 0 7px rgba(99,224,255,.9)}
.fx5 .fcm-ups .uscr i:nth-child(2){width:58%}
.fx5 .fcm-ups .rdg{position:static;margin-top:auto;white-space:nowrap;
  font:800 8px/1 var(--mono);letter-spacing:.02em;color:#eafcff;
  text-shadow:0 0 9px rgba(99,224,255,1),0 1px 0 rgba(0,20,35,.7)}
.fx5 .fcm-ups .umid{flex:none;height:14px;display:flex;align-items:center;gap:6px}
.fx5 .fcm-ups .uled{display:flex;gap:5px;align-items:center}
.fx5 .fcm-ups .uled i{width:6px;height:6px;border-radius:50%;background:#9ff3ff;
  box-shadow:0 0 8px rgba(99,224,255,.9)}
.fx5 .fcm-ups .uled i:nth-child(2){background:#63e0ff;box-shadow:0 0 8px rgba(99,224,255,.75)}
.fx5 .fcm-ups .uled i:nth-child(3){background:none;border:1.2px solid rgba(160,246,255,.6);box-shadow:none}
.fx5 .fcm-ups .uepo{margin-left:auto;width:12px;height:12px;border-radius:50%;
  border:1.5px solid rgba(255,150,150,.9);background:rgba(255,120,120,.26);
  box-shadow:0 0 9px rgba(255,120,120,.45)}
.fx5 .fcm-ups .ugrl{flex:1;border-radius:2px;border:1.2px solid rgba(160,246,255,.6);
  background:repeating-linear-gradient(180deg,rgba(160,246,255,.45) 0 1.2px,rgba(0,0,0,0) 1.2px 4.5px);
  box-shadow:0 0 8px rgba(99,224,255,.25)}
.fx5 .fcm-ups .ubar{flex:none;height:10px;display:flex;align-items:center;gap:6px}
.fx5 .fcm-ups .unm{flex:1;height:2.5px;border-radius:2px;
  background:linear-gradient(90deg,rgba(160,246,255,.85),rgba(160,246,255,0))}
.fx5 .fcm-ups .uhnd{width:16px;height:7px;border-radius:2px;
  border:1.2px solid rgba(160,246,255,.75);background:rgba(160,246,255,.14)}
/* the air leaves through the top, the way this machine does */
.fx5 .fcm-ups .lid::before{content:"";position:absolute;left:9px;right:9px;top:7px;bottom:7px;
  border-radius:2px;border:1.2px solid rgba(160,246,255,.5);
  background:repeating-linear-gradient(90deg,rgba(160,246,255,.4) 0 1px,rgba(0,0,0,0) 1px 5px)}
/* ── the CRAC: a Daikin outdoor unit, not a box with a fan on it ─────────
   Owner: "fa te rog si la HVAC ceva mai reprezentativ, model Daikin". What
   makes that machine recognisable at a glance: a tall narrow bay, the coil
   filling the front in fins, the service panel under it — and the two fans on
   the TOP, blowing up, each behind its own guard ring. (owner, 2026-09-17) */
.fx5 .fcm-hvac .front{padding:7px;gap:5px}
.fx5 .fcm-hvac .dcoil{flex:1;border-radius:2px;border:1.2px solid rgba(160,246,255,.6);
  background:
    repeating-linear-gradient(90deg,rgba(160,246,255,.4) 0 1px,rgba(0,0,0,0) 1px 3.5px),
    repeating-linear-gradient(180deg,rgba(160,246,255,.22) 0 1px,rgba(0,0,0,0) 1px 9px);
  box-shadow:0 0 8px rgba(99,224,255,.25)}
.fx5 .fcm-hvac .dpan{flex:none;height:26px;border-radius:2px;padding:4px 5px;
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  border:1.2px solid rgba(160,246,255,.6);background:rgba(160,246,255,.08);
  box-shadow:0 0 8px rgba(99,224,255,.2)}
.fx5 .fcm-hvac .dlbl{height:2.5px;width:70%;border-radius:2px;
  background:linear-gradient(90deg,rgba(160,246,255,.85),rgba(160,246,255,0))}
.fx5 .fcm-hvac .dled{display:flex;gap:5px;align-items:center}
.fx5 .fcm-hvac .dled i{width:5px;height:5px;border-radius:50%;background:#9ff3ff;
  box-shadow:0 0 8px rgba(99,224,255,.9)}
.fx5 .fcm-hvac .dled i:nth-child(2){background:none;border:1.2px solid rgba(160,246,255,.6);
  box-shadow:none}
/* the two fans live in the ROOF's plane, which is where they are */
.fx5 .fcm-hvac .lid{display:flex;align-items:center;justify-content:center;gap:7px}
.fx5 .fcm-hvac .dfan{position:relative;flex:none;width:33px;height:33px;border-radius:50%;
  border:1.4px solid rgba(190,250,255,.95);
  background:
    repeating-radial-gradient(circle at 50% 50%,rgba(190,250,255,.5) 0 1px,rgba(0,0,0,0) 1px 4px),
    radial-gradient(circle at 50% 50%,rgba(4,24,40,.5),rgba(4,24,40,.26));
  box-shadow:0 0 12px rgba(99,224,255,.45),inset 0 0 10px rgba(99,224,255,.25)}
.fx5 .fcm-hvac .dfan u{position:absolute;left:50%;top:50%;width:15px;height:7px;margin:-3.5px 0 0 0;
  --a:0deg;transform:rotate(var(--a));transform-origin:0 50%;border-radius:0 6px 6px 0;
  border:1.1px solid rgba(190,250,255,.85);
  background:linear-gradient(90deg,rgba(160,246,255,.45),rgba(160,246,255,.1))}
.fx5 .fcm-hvac .dfan u:nth-child(2){--a:120deg}
.fx5 .fcm-hvac .dfan u:nth-child(3){--a:240deg}
.fx5 .fcm-hvac .dfan::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;
  margin:-3.5px 0 0 -3.5px;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#9ff3ff,rgba(99,224,255,.5));
  box-shadow:0 0 8px rgba(99,224,255,.7)}
/* ── the seismic kit: what actually holds the rack down ──────────────────
   Owner: "mai reprezentativ si Sistem antiseismic de fixare a rack-urilor".
   A rack standing on a plate said nothing; the system is the fixing — corner
   brackets with their bolts, a bolted base plate, and the braces that take the
   shake diagonally into the floor. (owner, 2026-09-17) */
.fx5 .fcm-seis .plate::before{content:"";position:absolute;left:10px;right:10px;top:50%;height:4px;
  margin-top:-2px;pointer-events:none;
  background:radial-gradient(circle at 3px 50%,rgba(190,250,255,.95) 1.4px,rgba(0,0,0,0) 1.9px) 0 0/20px 4px repeat-x}
.fx5 .fcm-seis .anc::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;
  margin:-2px 0 0 -2px;border-radius:50%;background:#9ff3ff;box-shadow:0 0 7px rgba(99,224,255,.85)}
.fx5 .fcm-seis .brc{position:absolute;bottom:12px;width:40px;height:3px;border-radius:2px;
  border:1.1px solid rgba(160,246,255,.7);
  background:linear-gradient(90deg,rgba(160,246,255,.2),rgba(160,246,255,.6));
  box-shadow:0 0 9px rgba(99,224,255,.3)}
.fx5 .fcm-seis .brc.b1{left:-20px;transform:translateZ(18px) rotate(-40deg)}
.fx5 .fcm-seis .brc.b2{right:-20px;transform:translateZ(18px) rotate(40deg)}
.fx5 .fcm-seis .brc::after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;
  top:50%;margin-top:-2.5px;border:1.1px solid rgba(160,246,255,.85);background:rgba(160,246,255,.25)}
.fx5 .fcm-seis .brc.b1::after{right:-2px}
.fx5 .fcm-seis .brc.b2::after{left:-2px}
/* ── the sensor: what a temperature & humidity sensor actually looks like ─
   Owner: "la Senzori de temperatura si umiditate a aerului sa faci ceva mai
   reprezentativ". So: not a cabinet. A small instrument on the rack rail with
   BOTH readings lit on it, the window the air passes through beside them, the
   ears it is screwed by, and the probe hanging on its lead. (owner, 2026-09-17) */
.fx5 .fcm-sens .front{padding:7px;gap:5px}
.fx5 .fcm-sens .sdsp{flex:none;height:24px;border-radius:3px;padding:0 6px;
  display:flex;align-items:center;justify-content:space-between;gap:6px;
  border:1.2px solid rgba(160,246,255,.7);
  background:linear-gradient(160deg,rgba(10,60,95,.5),rgba(4,24,40,.6));
  box-shadow:inset 0 0 14px rgba(99,224,255,.35),0 0 12px rgba(99,224,255,.25)}
.fx5 .fcm-sens .rdg{position:static;white-space:nowrap;font:800 8px/1 var(--mono);
  letter-spacing:.02em;color:#eafcff;
  text-shadow:0 0 9px rgba(99,224,255,1),0 1px 0 rgba(0,20,35,.7)}
.fx5 .fcm-sens .sdsp{flex:1}
.fx5 .fcm-sens .srow{flex:none;height:8px;display:flex;align-items:center;gap:6px}
.fx5 .fcm-sens .slbl{flex:1;height:2.5px;border-radius:2px;
  background:linear-gradient(90deg,rgba(160,246,255,.85),rgba(160,246,255,0))}
.fx5 .fcm-sens .sled{flex:none;display:flex;gap:5px;align-items:center}
.fx5 .fcm-sens .sled i{width:6px;height:6px;border-radius:50%;background:#9ff3ff;
  box-shadow:0 0 8px rgba(99,224,255,.9)}
.fx5 .fcm-sens .sled i:nth-child(2){background:none;border:1.2px solid rgba(160,246,255,.6);
  box-shadow:none}
/* the ears it is screwed by */
.fx5 .fcm-sens .sear{position:absolute;top:50%;width:11px;height:16px;margin-top:-8px;
  transform:translateZ(11px);border-radius:2px;border:1.2px solid rgba(160,246,255,.7);
  background:rgba(160,246,255,.12);box-shadow:0 0 8px rgba(99,224,255,.25)}
.fx5 .fcm-sens .sear.e1{left:-10px}
.fx5 .fcm-sens .sear.e2{right:-10px}
.fx5 .fcm-sens .sear::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;
  margin:-2px 0 0 -2px;border-radius:50%;border:1.2px solid rgba(160,246,255,.85)}
/* the element's shield: the stack of wide plates a temperature & humidity
   probe wears, so the air reaches it while nothing else does. Wide and flat,
   sitting right under the housing — it belongs to the instrument instead of
   dangling off it. (owner, 2026-09-17) */
.fx5 .fcm-sens .sshld{position:absolute;left:50%;top:100%;width:52px;height:20px;margin-left:-26px;
  transform:translateZ(14px)}
.fx5 .fcm-sens .sshld i{position:absolute;left:50%;display:block;height:7px;
  border-radius:0 0 8px 8px;border:1.2px solid rgba(160,246,255,.85);border-top:0;
  background:linear-gradient(180deg,rgba(160,246,255,.28),rgba(160,246,255,.1));
  box-shadow:0 0 9px rgba(99,224,255,.35)}
.fx5 .fcm-sens .sshld i:nth-child(1){width:48px;margin-left:-24px;top:-2px}
.fx5 .fcm-sens .sshld i:nth-child(2){width:38px;margin-left:-19px;top:4px}
.fx5 .fcm-sens .sshld i:nth-child(3){width:28px;margin-left:-14px;top:10px}
.fx5 .fcm-sens .sshld i:nth-child(3)::after{content:"";position:absolute;left:50%;bottom:-2px;
  width:20px;height:20px;margin-left:-10px;border-radius:50%;
  border:1.2px solid rgba(160,246,255,.9);opacity:0}
/* ── the genset, drawn as a concept rather than a photograph ─────────────
   Owner: "ceva mai real dar schitat ... mai din viitor, ceva mai wow". So it
   is not a yellow box any more: it is the machine as a lit technical study —
   glass faces you can see through, edges that glow, the parts drawn in line
   instead of filled, reticle corners, a readout floating on the front and a
   scan running down it. (owner, 2026-09-17) */
.fx5 .fcm-gen .front{padding:8px;gap:6px;flex-direction:row;align-items:stretch}
/* the faces, the reticle and the floor light are the study pass now — what
   follows is only what a genset has that the others do not */
/* the cool end: vent lines, drawn */
.fx5 .fcm-gen .gleft{width:26px;flex:none;display:flex;flex-direction:column;gap:5px;justify-content:center}
.fx5 .fcm-gen .gleft i{height:14px;border-radius:2px;border:1.2px solid rgba(160,246,255,.6);
  background:repeating-linear-gradient(180deg,rgba(160,246,255,.45) 0 1px,rgba(0,0,0,0) 1px 4px);
  box-shadow:0 0 8px rgba(99,224,255,.25)}
.fx5 .fcm-gen .gmid{width:16px;flex:none;display:flex;flex-direction:column;gap:4px;justify-content:center}
.fx5 .fcm-gen .gmesh{flex:none;height:9px;border-radius:2px;border:1.2px solid rgba(160,246,255,.6);
  background:repeating-linear-gradient(90deg,rgba(160,246,255,.5) 0 1px,rgba(0,0,0,0) 1px 4px);
  box-shadow:0 0 8px rgba(99,224,255,.3)}
/* the controller floats on the face as a readout, not a box. These are the
   structural rules too — the old genset block carried them and went with it */
.fx5 .fc-m .gctl{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.fx5 .fcm-gen .gctl{flex:1;justify-content:center;padding:5px;gap:4px;align-items:stretch;
  border:1.2px solid rgba(160,246,255,.7);border-radius:3px;
  background:linear-gradient(176deg,rgba(10,60,95,.4),rgba(6,32,52,.25));
  box-shadow:inset 0 0 12px rgba(99,224,255,.22)}
.fx5 .fcm-gen .gkeys{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.fx5 .fcm-gen .gkeys i{height:6px;border-radius:1.5px;border:1px solid rgba(160,246,255,.55);
  background:rgba(160,246,255,.12)}
.fx5 .fcm-gen .gbtns{display:flex;align-items:center;gap:5px}
.fx5 .fcm-gen .sw{width:9px;height:9px;border-radius:50%;flex:none;
  border:1.2px solid rgba(160,246,255,.7);background:rgba(160,246,255,.15);position:relative}
.fx5 .fcm-gen .sw::after{content:"";position:absolute;left:50%;top:1px;width:1.4px;height:4px;
  margin-left:-.7px;background:rgba(200,250,255,.9)}
.fx5 .fcm-gen .gbtns .leds{margin-left:auto;gap:4px}
.fx5 .fcm-gen .gbtns .leds i{width:5px;height:5px}
.fx5 .fc-m .gdisp{position:relative;width:100%;height:24px;border-radius:2px;padding:3px 4px;
  display:flex;flex-direction:column;gap:2.5px}
.fx5 .fc-m .gdisp i{height:2px;border-radius:1px}
.fx5 .fc-m .gdisp i:nth-child(2){width:62%}
.fx5 .fc-m .estop{flex:none;border-radius:50%}
.fx5 .fcm-gen .estop{width:11px;height:11px;border:1.6px solid rgba(255,150,150,.9);
  background:radial-gradient(circle at 38% 32%,rgba(255,190,190,.95),rgba(225,59,59,.55));
  box-shadow:0 0 12px rgba(255,90,90,.75)}
.fx5 .fcm-gen .gdisp{background:linear-gradient(160deg,rgba(10,60,95,.5),rgba(4,24,40,.6));
  border:1.2px solid rgba(160,246,255,.7);box-shadow:inset 0 0 12px rgba(99,224,255,.35)}
.fx5 .fcm-gen .gdisp i{background:#9ff3ff;box-shadow:0 0 7px rgba(99,224,255,.9);height:1.6px}
.fx5 .fcm-gen .gdisp{justify-content:flex-start;gap:2px;padding:3px 5px 4px}
/* the reading is the one piece of text on the machine, so it gets room and
   contrast: its own line on the display, bigger and brighter (owner) */
.fx5 .fcm-gen .rdg{position:static;font:800 8px/1 var(--mono);letter-spacing:.02em;color:#eafcff;
  text-shadow:0 0 9px rgba(99,224,255,1),0 1px 0 rgba(0,20,35,.7);margin-top:auto}
/* the doors are drawn, not built */
.fx5 .fcm-gen .gdoors{flex:.9;gap:5px}
.fx5 .fcm-gen .gdoors i{border:1.2px solid rgba(160,246,255,.6);border-radius:2px;background:none;
  box-shadow:inset 0 0 10px rgba(99,224,255,.18)}
.fx5 .fcm-gen .gdoors i::after{right:3px;width:2px;height:12px;margin-top:-6px;border-radius:1px;
  background:rgba(160,246,255,.9);box-shadow:0 0 8px rgba(99,224,255,.8)}
/* exhaust and skid, in the same line language. The silencer is not floating:
   it is bolted to the canopy — a flange lying in the roof's own plane, the
   riser out of it with its clamp, two straps the drum rests in, and the outlet
   out of the drum's far end with its rain cap. (owner: "leaga cumva toba de
   esapament ... este in aer", 2026-09-17) */
.fx5 .fcm-gen .exh{position:absolute;right:16px;bottom:100%;width:62px;height:44px;
  transform:translateZ(12px);transform-style:preserve-3d}
.fx5 .fcm-gen .exh i{position:absolute;display:block}
/* the flange lies flat, in the roof's plane — that is what makes the pipe
   leave the canopy instead of ending in the air */
.fx5 .fcm-gen .flg{left:-8px;bottom:-3.5px;width:18px;height:9px;border-radius:2px;
  transform:rotateX(90deg);border:1.2px solid rgba(160,246,255,.85);
  background:linear-gradient(180deg,rgba(160,246,255,.3),rgba(99,224,255,.1));
  box-shadow:0 0 10px rgba(99,224,255,.45)}
.fx5 .fcm-gen .riser{left:-4px;bottom:0;width:9px;height:19px;border-radius:3px 3px 0 0;
  border:1.2px solid rgba(160,246,255,.8);border-bottom:0;
  background:linear-gradient(90deg,rgba(160,246,255,.06),rgba(160,246,255,.24),rgba(160,246,255,.06))}
/* the bend that takes the pipe into the drum's end cap */
.fx5 .fcm-gen .riser::before{content:"";position:absolute;left:4px;bottom:11px;width:15px;height:7px;
  border:1.2px solid rgba(160,246,255,.8);border-left:0;border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,rgba(160,246,255,.22),rgba(99,224,255,.08))}
.fx5 .fcm-gen .riser::after{content:"";position:absolute;left:-2.5px;right:-2.5px;bottom:3px;height:4px;
  border-radius:1px;border:1.2px solid rgba(160,246,255,.85);background:rgba(160,246,255,.2)}
.fx5 .fcm-gen .drum{left:8px;bottom:7px;width:46px;height:15px;border-radius:8px;
  border:1.3px solid rgba(160,246,255,.8);
  background:
    repeating-linear-gradient(90deg,rgba(160,246,255,.35) 0 1px,rgba(0,0,0,0) 1px 7px),
    linear-gradient(180deg,rgba(160,246,255,.2),rgba(99,224,255,.06));
  box-shadow:0 0 14px rgba(99,224,255,.4),inset 0 1px 0 rgba(255,255,255,.35)}
.fx5 .fcm-gen .drum::before,.fx5 .fcm-gen .drum::after{content:"";position:absolute;top:1.5px;bottom:1.5px;
  width:7px;border-radius:50%;border:1.2px solid rgba(160,246,255,.75)}
.fx5 .fcm-gen .drum::before{left:1.5px}
.fx5 .fcm-gen .drum::after{right:1.5px}
/* the straps: a belt over the drum, the leg down to a foot on the roof —
   in this view a strap reads as a band crossing the drum, not a cradle */
.fx5 .fcm-gen .sad{left:21px;bottom:0;width:5px;height:24px;border-radius:2px;
  border:1.2px solid rgba(160,246,255,.85);background:rgba(160,246,255,.2);
  box-shadow:0 0 8px rgba(99,224,255,.3)}
.fx5 .fcm-gen .sad.s2{left:37px}
.fx5 .fcm-gen .sad::before{content:"";position:absolute;left:-4px;right:-4px;bottom:-1.5px;height:3.5px;
  border-radius:1px;border:1.2px solid rgba(160,246,255,.85);background:rgba(160,246,255,.22)}
/* the outlet, welded to the drum at its collar */
.fx5 .fcm-gen .tip{left:36px;bottom:20px;width:7px;height:14px;border-radius:2px 2px 0 0;
  border:1.2px solid rgba(160,246,255,.85);border-bottom:0;background:rgba(160,246,255,.16)}
.fx5 .fcm-gen .tip::before{content:"";position:absolute;left:-3px;right:-3px;bottom:1px;height:3.5px;
  border-radius:2px;border:1.2px solid rgba(160,246,255,.85);background:rgba(160,246,255,.24)}
.fx5 .fcm-gen .tip::after{content:"";position:absolute;left:-2.5px;top:-5px;width:12px;height:4px;
  border-radius:2px;border:1.2px solid rgba(160,246,255,.85);background:rgba(160,246,255,.26);
  transform:rotate(-7deg)}
/* what leaves the stack once it runs */
.fx5 .fcm-gen .fume{position:absolute;right:26.5px;bottom:calc(100% + 36px);width:24px;height:30px;
  transform:translateZ(12px);pointer-events:none}
.fx5 .fcm-gen .fume i{position:absolute;left:50%;bottom:0;width:9px;height:9px;margin-left:-4.5px;
  border-radius:50%;background:radial-gradient(circle,rgba(200,245,255,.5),rgba(200,245,255,0) 70%);
  opacity:0}
.fx5 .fcm-gen .skid{left:-10px;right:-10px;bottom:-13px;height:11px;border-radius:2px;background:none;
  border:1.2px solid rgba(160,246,255,.65);
  box-shadow:0 0 14px rgba(99,224,255,.35),inset 0 0 10px rgba(99,224,255,.2)}
.fx5 .fcm-gen .skid::before,.fx5 .fcm-gen .skid::after{content:"";position:absolute;top:3px;width:16px;
  height:5px;border-radius:1px;background:none;border:1.2px solid rgba(160,246,255,.55)}
.fx5 .fcm-gen .skid::before{left:18px}
.fx5 .fcm-gen .skid::after{right:18px}

/* ── hover on the genset: the set runs ──────────────────────────────────
   The only movement left on this page, and it means something: the display
   lights, the run lamps come up, the canopy takes the engine's tremor and the
   stack starts breathing. (owner, 2026-09-17) */
.fx5 .fc-tile:hover .fcm-gen .fcm-t{animation:genRun .16s steps(2,end) infinite}
@keyframes genRun{
  0%{transform:rotateX(5deg) rotateY(-26deg) translate(0,0)}
  50%{transform:rotateX(5deg) rotateY(-26deg) translate(.5px,-.4px)}
  100%{transform:rotateX(5deg) rotateY(-26deg) translate(-.4px,.3px)}}
.fx5 .fc-tile:hover .fcm-gen .gdisp{box-shadow:inset 0 0 16px rgba(99,224,255,.6),0 0 16px rgba(99,224,255,.5)}
.fx5 .fc-tile:hover .fcm-gen .rdg{color:#ffffff;text-shadow:0 0 12px rgba(120,240,255,1)}
.fx5 .fc-tile:hover .fcm-gen .gbtns .leds i{background:#39e08a;box-shadow:0 0 10px rgba(57,224,138,.95)}
.fx5 .fc-tile:hover .fcm-gen .gleft i{box-shadow:0 0 14px rgba(99,224,255,.55);
  border-color:rgba(190,250,255,.9)}
.fx5 .fc-tile:hover .fcm-gen .drum{box-shadow:0 0 20px rgba(99,224,255,.6),inset 0 1px 0 rgba(255,255,255,.45)}
.fx5 .fc-tile:hover .fcm-gen .fume i{animation:genFume 2.1s ease-out infinite}
.fx5 .fc-tile:hover .fcm-gen .fume i:nth-child(2){animation-delay:.7s}
.fx5 .fc-tile:hover .fcm-gen .fume i:nth-child(3){animation-delay:1.4s}
@keyframes genFume{
  0%{opacity:0;transform:translate(0,0) scale(.5)}
  18%{opacity:.85}
  100%{opacity:0;transform:translate(6px,-24px) scale(1.9)}}

/* ── hover on the other six: each one does its own job ───────────────────
   The genset runs; so, in the same language, the board carries current, the
   UPS carries the load, the CRAC turns, the rack holds the shock, the head
   sprays and the sensor takes a reading. Nothing moves until the pointer is
   on the tile, and nothing moves at all under prefers-reduced-motion.
   (owner: "fa la fel si la celelalte utilaje, sa fie unitar", 2026-09-17) */
/* the board: current in the three phases */
.fx5 .fc-tile:hover .fcm-feeds .wave svg{animation:phFlow 1.5s linear infinite}
.fx5 .fc-tile:hover .fcm-feeds .ph{animation:phPulse 1.2s ease-in-out infinite}
.fx5 .fc-tile:hover .fcm-feeds .ph.p2{animation-delay:.4s}
.fx5 .fc-tile:hover .fcm-feeds .ph.p3{animation-delay:.8s}
.fx5 .fc-tile:hover .fcm-feeds .bus i{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 12px rgba(255,190,120,.9)}
.fx5 .fc-tile:hover .fcm-feeds .rdg{color:#ffffff;text-shadow:0 0 12px rgba(120,240,255,1)}
@keyframes phFlow{from{transform:translateX(0)}to{transform:translateX(-25%)}}
@keyframes phPulse{0%,100%{opacity:.5}50%{opacity:1}}
/* the UPS: on load, the bars climb and the lamps go green */
.fx5 .fc-tile:hover .fcm-ups .uscr i:nth-child(2){animation:upsBar 2.6s ease-in-out infinite alternate}
.fx5 .fc-tile:hover .fcm-ups .uscr{box-shadow:inset 0 0 18px rgba(99,224,255,.5),0 0 16px rgba(99,224,255,.4)}
.fx5 .fc-tile:hover .fcm-ups .rdg{color:#ffffff;text-shadow:0 0 12px rgba(120,240,255,1)}
.fx5 .fc-tile:hover .fcm-ups .uled i:nth-child(1),
.fx5 .fc-tile:hover .fcm-ups .uled i:nth-child(2){background:#39e08a;box-shadow:0 0 10px rgba(57,224,138,.95)}
.fx5 .fc-tile:hover .fcm-ups .ugrl{box-shadow:inset 0 0 14px rgba(99,224,255,.35),0 0 10px rgba(99,224,255,.3)}
@keyframes upsBar{from{width:38%}to{width:88%}}
/* the CRAC: the fan turns and the louvres pull air */
.fx5 .fc-tile:hover .fcm-hvac .dfan u{animation:fanSpin 1.15s linear infinite}
.fx5 .fc-tile:hover .fcm-hvac .dcoil{animation:airFlow 1.4s linear infinite;
  box-shadow:inset 0 0 14px rgba(99,224,255,.45)}
.fx5 .fc-tile:hover .fcm-hvac .dled i:nth-child(1){background:#39e08a;
  box-shadow:0 0 10px rgba(57,224,138,.95)}
@keyframes fanSpin{from{transform:rotate(var(--a))}to{transform:rotate(calc(var(--a) + 360deg))}}
@keyframes airFlow{from{background-position:0 0}to{background-position:0 10px}}
/* the seismic rack: the shock runs through the floor, the rack does not move */
.fx5 .fc-tile:hover .fcm-seis .plate::after{animation:seisWave 2.4s ease-in-out infinite}
.fx5 .fc-tile:hover .fcm-seis .anc{border-color:rgba(190,250,255,.95);box-shadow:0 0 12px rgba(99,224,255,.8)}
.fx5 .fc-tile:hover .fcm-seis .brc{border-color:rgba(190,250,255,.95);box-shadow:0 0 14px rgba(99,224,255,.75)}
@keyframes seisWave{0%{background-position:-45% 0;opacity:0}14%{opacity:1}
  86%{opacity:1}100%{background-position:145% 0;opacity:0}}
/* the head opens */
.fx5 .fc-tile:hover .fcm-fire .spray{opacity:.8;animation:sprFall .9s linear infinite}
.fx5 .fc-tile:hover .fcm-fire .det::after{animation:detBlink 1.8s steps(1,end) infinite}
@keyframes sprFall{from{background-position:0 0,0 0}to{background-position:0 22px,0 0}}
@keyframes detBlink{0%,80%{opacity:.3}86%,100%{opacity:1}}
/* the sensor takes a reading */
.fx5 .fc-tile:hover .fcm-sens .sdsp{box-shadow:inset 0 0 18px rgba(99,224,255,.5),0 0 16px rgba(99,224,255,.4)}
.fx5 .fc-tile:hover .fcm-sens .rdg{color:#ffffff;text-shadow:0 0 12px rgba(120,240,255,1)}
.fx5 .fc-tile:hover .fcm-sens .sshld i{box-shadow:0 0 14px rgba(99,224,255,.6)}
.fx5 .fc-tile:hover .fcm-sens .sshld i:nth-child(3)::after{animation:probePing 1.9s ease-out infinite}
.fx5 .fc-tile:hover .fcm-sens .sled i:nth-child(1){background:#39e08a;
  box-shadow:0 0 10px rgba(57,224,138,.95)}
.fx5 .fc-tile:hover .fcm-sens .sled i:nth-child(2){animation:phPulse 1.1s ease-in-out infinite}
@keyframes probePing{0%{transform:scale(1);opacity:.9}70%,100%{transform:scale(1.7);opacity:0}}
/* one guard for the whole set */
@media (prefers-reduced-motion:reduce){
  .fx5 .fc-tile:hover .fc-m,.fx5 .fc-tile:hover .fc-m *,
  .fx5 .fc-tile:hover .fc-m *::before,.fx5 .fc-tile:hover .fc-m *::after{animation:none!important}}
/* the shapes each machine takes */
.fx5 .fcm-feeds{--w:92px;--h:120px;--d:40px}
.fx5 .fcm-gen{--w:142px;--h:82px;--d:54px}
.fx5 .fcm-ups{--w:78px;--h:142px;--d:44px}
.fx5 .fcm-hvac{--w:86px;--h:136px;--d:58px}
.fx5 .fcm-seis{--w:94px;--h:120px;--d:46px}
.fx5 .fcm-fire{--w:120px;--h:32px;--d:44px}
.fx5 .fcm-sens{--w:96px;--h:50px;--d:28px}

@media (max-width:900px){
  .fx5 .fc-rows{gap:34px}
  .fx5 .fc-row{gap:28px 32px}
  .fx5 .fc-tile{flex:0 1 200px}
  .fx5 .fc-dr{height:104px}
}
@media (max-width:560px){
  .fx5 .fc-tile{flex:0 1 44%}
  .fx5 .fc-lb{font-size:14px}
}