/* ==================================================================
   NAV.RO — /colocare · REDESIGN v4 "PURE BRAND" · MOCKUP WOW LIGHT
   DOAR culorile companiei: #0071b9 + #00bebc — alb, tints pale și
   benzi saturate cu gradientul oficial. ZERO culori închise/negre:
   până și textul e un shade al albastrului de brand (#0d3a5c).
   Fonturi: Inter + JetBrains Mono (self-hosted în repo).
   ================================================================== */

@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;}

.co2,.co2 *{margin:0;padding:0}
html{scroll-behavior:smooth}

.co2 ::selection{background:#00bebc;color:#ffffff}

#scrollbar{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;will-change:transform;z-index:100;
  background:linear-gradient(90deg,#00bebc,#0071b9);box-shadow:0 0 12px rgba(0,190,188,.5)}

/* sticky pills — replică serv-sticky-menu */

/* ------------------------------------------------------------------
   .co2 — PAGINA (doar brand: alb + tints + gradient #00bebc→#0071b9)
   ------------------------------------------------------------------ */
.co2{
  --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; /* DOAR pentru LED-uri de curent (cerinta owner) */
  --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;
}
.co2 *,.co2 *::before,.co2 *::after{box-sizing:border-box}
.co2 img{max-width:100%;display:block}
/* identic cu .wrapper global al site-ului (resort.css): 96% fluid, plafonat la 1400px */
.co2 .wrap{width:96%;max-width:none;margin:0 auto;padding:0}
@media (min-width:1400px){.co2 .wrap{width:1400px}}
.co2 .sec{padding:104px 0}
.co2 .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}
.co2 .eyebrow::before{content:"";width:24px;height:2px;background:var(--grad);border-radius:2px}
.co2 .sec-head{max-width:700px;margin:0 0 52px}
.co2 .sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.co2 .sec-head.center .eyebrow::before{display:none}
.co2 h2{font:800 clamp(30px,3.6vw,44px)/1.1 var(--sans);letter-spacing:-.025em;margin:0;
  text-wrap:balance;color:var(--ink)}
.co2 h2 strong{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.co2 .sec-head p{color:var(--muted);font-size:17px;margin:16px 0 0;max-width:62ch}
.co2 .sec-head.center p{margin-left:auto;margin-right:auto}

/* butoane */
.co2 .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}
.co2 .btn:active{transform:translateY(1px)}
.co2 .btn-pri,.co2 .btn-blue{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)}
.co2 .btn-pri:hover,.co2 .btn-blue: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)}
.co2 .band .btn-pri,.co2 .band .btn-blue,.co2-cta .btn-pri,.co2-hero .btn-pri{
  border:1.5px solid rgba(255,255,255,.7);
  box-shadow:0 16px 38px -14px rgba(0,40,70,.55)}
.co2 .btn-pri::after,.co2 .btn-blue::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}
.co2 .btn-pri:hover::after,.co2 .btn-blue:hover::after{left:125%}

.co2 .btn-ghost{background:#fff;color:var(--ink);border-color:var(--blue-t2)}
.co2 .btn-ghost:hover{border-color:var(--blue);color:var(--blue)}
.co2 .btn-lg{padding:18px 34px;font-size:16px}
.co2 .btn-block{width:100%}
.co2 .band .btn-ghost,.co2-hero .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.co2 .band .btn-ghost:hover,.co2-hero .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.12);color:#fff}
.co2 :is(a,button,summary,input,textarea):focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:4px}

/* reveal */
.co2.anim .rv{opacity:0;transform:translateY(26px);filter:blur(6px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1),filter .7s ease}
.co2.anim .rv.in{opacity:1;transform:none;filter:none}
/* rv direct pe cardurile cu lift: transform:none + transition-ul .7s de mai sus (0,4,0)
   ingropau .co2-step:hover/.co2-dcard:hover (0,2,0) — lift mort, umbra sarea instant.
   Post-reveal: pastram exact timing-ul reveal-ului si redam umbrei .25s; la hover-in,
   lift crisp .25s ca restul cardurilor (hover-out coboara pe float-ul .7s al reveal-ului) */
.co2.anim .co2-step.rv.in,.co2.anim .co2-dcard.rv.in{
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1),filter .7s ease,box-shadow .25s}
.co2.anim .co2-step.rv.in:hover{transform:translateY(-5px);transition:transform .25s,box-shadow .25s}
.co2.anim .co2-dcard.rv.in:hover{transform:translateY(-4px);transition:transform .25s,box-shadow .25s}
.co2.anim .rv.d1{transition-delay:.08s}.co2.anim .rv.d2{transition-delay:.16s}
.co2.anim .rv.d3{transition-delay:.24s}.co2.anim .rv.d4{transition-delay:.32s}

/* cursor glow (teal, subtil, pe hero + benzi) */
.co2 .cursor-glow{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:0;transition:opacity .5s;
  background:radial-gradient(560px circle at var(--mx,50%) var(--my,38%),rgba(0,190,188,.13),transparent 62%)}
.co2 .glow-on .cursor-glow{opacity:1}
.co2 .band .cursor-glow,.co2-hero .cursor-glow{background:radial-gradient(560px circle at var(--mx,50%) var(--my,38%),rgba(255,255,255,.16),transparent 62%)}

/* ================= HERO (LIGHT) ================= */
/* Owner, 2026-09-02 ("la fel și cu headerul: oprește și lasă cum ai lăsat la
   găzduire"): the header keeps the video (lazy, desktop-only) and ONE minimal
   effect — the slow float of the rack + its ground shadow (transform/opacity,
   composited). Gone: aurora drift blobs (90px blur), perspective floor grid,
   rising particles, orbit ring, every LED blink / glow pulse, the sway, the
   chip floats, the h1b gradient shimmer, the per-frame video filter and the
   marquee loop (static band). */
.co2-hero{position:relative;overflow:hidden;color:#fff;isolation:isolate;
  background:linear-gradient(118deg,#0071b9 8%,#0092b9 52%,#00bebc 100%)}
/* video-ul legacy din data center (colo_video.mp4) pe tot fundalul, ca în legacy,
   sub gradientul culorilor de brand */
.co2-hero .vid{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.co2-hero .vid video{width:100%;height:100%;object-fit:cover}
/* SITE-BLEED FIX: new.index.min.css ships a bare `video{position:absolute;z-index:2}`
   (the legacy hero-video convention), which hoists the film ABOVE the ::after brand
   overlay and washes the hero out. Pin the layers so the overlay paints on top,
   exactly like the standalone mockup (no global CSS there). */
.co2-hero .vid video{z-index:0}
.co2-hero .vid::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(118deg,rgba(0,113,185,.86) 8%,rgba(0,146,185,.74) 52%,rgba(0,190,188,.66) 100%),
             linear-gradient(180deg,rgba(0,90,148,.18),rgba(0,113,185,0) 40%)}
@media (prefers-reduced-motion:reduce){.co2-hero .vid video{display:none}}
/* co2drift1/2 keyframes stay: the section aurora blobs further down still use them */
@keyframes co2drift1{to{transform:translate(70px,50px) scale(1.08)}}
@keyframes co2drift2{to{transform:translate(-60px,40px) scale(.94)}}
.co2-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.10) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.10) 1px,transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(130% 90% at 60% 0,#000 25%,transparent 76%);
  mask-image:radial-gradient(130% 90% at 60% 0,#000 25%,transparent 76%)}
.co2-hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) 470px;
  gap:56px;align-items:center;padding-top:92px;padding-bottom:96px}
.co2-hero .eyebrow{color:#fff}
.co2-hero .eyebrow::before{background:rgba(255,255,255,.85)}
.co2-hero h1,.co2-hero .h1b{display:block;font:800 clamp(36px,4.9vw,62px)/1.04 var(--sans);letter-spacing:-.032em;margin:0;
  text-wrap:balance;color:#fff;text-shadow:0 2px 24px rgba(0,63,104,.25)}
.co2-hero .h1b{margin:0 0 22px}
.co2-hero h1 .w,.co2-hero .h1b .w{display:inline-block}
.co2.anim .co2-hero h1 .w,.co2.anim .co2-hero .h1b .w{opacity:0;transform:translateY(26px);animation:co2word .7s cubic-bezier(.2,.7,.2,1) forwards}
.co2.anim .co2-hero h1 .w:nth-child(1){animation-delay:.05s}.co2.anim .co2-hero h1 .w:nth-child(2){animation-delay:.11s}
.co2.anim .co2-hero h1 .w:nth-child(3){animation-delay:.17s}.co2.anim .co2-hero h1 .w:nth-child(4){animation-delay:.23s}
.co2.anim .co2-hero .h1b .w:nth-child(1){animation-delay:.29s}.co2.anim .co2-hero .h1b .w:nth-child(2){animation-delay:.35s}
.co2.anim .co2-hero .h1b .w:nth-child(3){animation-delay:.41s}.co2.anim .co2-hero .h1b .w:nth-child(4){animation-delay:.47s}
@keyframes co2word{to{opacity:1;transform:none}}
.co2-hero h1 em,.co2-hero .h1b em{font-style:normal;background:linear-gradient(90deg,#c9f8f7,#ffffff,#c9f8f7);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.co2-hero .lead{font-size:19px;line-height:1.62;color:rgba(255,255,255,.95);margin:0 0 36px;max-width:56ch}
.co2-hero .cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.co2-hero .hint{display:flex;align-items:center;gap:8px;margin-top:24px;font:500 13px/1.4 var(--sans);color:rgba(255,255,255,.88)}
.co2-hero .hint svg{width:15px;height:15px;stroke:#c9f8f7;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---- RACK (light) ---- */
/* owner 2026-07-23: the whole hero rack assembly (hologram + HUD chips + halo)
   sits ~10% lower in the header (translateY = 10% of its own height; owner
   tuned 20% -> 10%). Reset on the stacked ≤1080 layout, where the rack flows
   under the text. */
.co2-rackwrap{position:relative;justify-self:end;width:100%;max-width:470px;z-index:2;transform:translateY(10%)}
.co2-rackwrap .halo{position:absolute;inset:-60px -40px;z-index:0;pointer-events:none;
  background:radial-gradient(48% 42% at 50% 46%,rgba(255,255,255,.28),transparent 70%),
             radial-gradient(60% 52% at 52% 50%,rgba(201,248,247,.22),transparent 72%);
  filter:blur(8px)}
/* ===== RACK HOLOGRAFIC 3D (shared by the hero rack, .h3d.big and .h3d.mini) =====
   The HERO rack keeps ONLY the float + ground shadow — see the .co2-rackwrap
   overrides after the chips; the big/mini racks keep the full set. */
@keyframes co2led{50%{opacity:.2}}
.h3d{position:relative;z-index:1;margin:0 auto;width:300px;height:520px;perspective:1150px}
.h3d .float{width:100%;height:100%;animation:h3dfloat 7s ease-in-out infinite}
@keyframes h3dfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.h3d .tilt{width:100%;height:100%;transform-style:preserve-3d;
  transform:rotateX(calc(5deg + var(--prx,0deg))) rotateY(calc(-26deg + var(--pry,0deg)));
  transition:transform .25s ease-out}
.h3d .face{position:absolute;border-radius:16px}
/* fața frontală — panou de sticlă cu unitățile */
.h3d .front{inset:0;transform:translateZ(60px);
  background:linear-gradient(165deg,rgba(255,255,255,.28),rgba(255,255,255,.12));
  border:1.5px solid rgba(255,255,255,.65);
  box-shadow:0 30px 70px -20px rgba(0,40,70,.45),inset 0 1px 0 rgba(255,255,255,.5),0 0 44px rgba(0,190,188,.28);
  padding:18px 16px 16px;display:flex;flex-direction:column}
/* lateral dreapta */
.h3d .side{top:0;bottom:0;left:50%;width:120px;margin-left:-60px;
  transform:rotateY(90deg) translateZ(142px);border-radius:14px;
  background:linear-gradient(180deg,rgba(0,63,104,.30),rgba(0,63,104,.42)),
    repeating-linear-gradient(180deg,rgba(255,255,255,.15) 0 2px,transparent 2px 12px);
  border:1.5px solid rgba(255,255,255,.35)}
/* capac sus */
.h3d .lid{left:0;right:0;top:50%;height:120px;margin-top:-60px;
  transform:rotateX(90deg) translateZ(252px) scale(.985);border-radius:14px;
  background:linear-gradient(120deg,rgba(255,255,255,.18),rgba(201,248,247,.10));
  border:1.5px solid rgba(255,255,255,.38)}
/* orbită de date care intersectează rack-ul (3D real) */
.h3d .orbit{position:absolute;left:50%;top:50%;width:470px;height:470px;margin:-235px 0 0 -235px;
  transform:rotateX(76deg);transform-style:preserve-3d;
  pointer-events:none}
.h3d .orbit::before{content:"";position:absolute;inset:0;border-radius:50%;
  border:2px dashed rgba(255,255,255,.68)}
.h3d .orbit i{position:absolute;left:50%;top:-6px;width:12px;height:12px;margin-left:-6px;border-radius:50%;
  background:#fff;box-shadow:0 0 16px 4px rgba(0,190,188,.95),0 0 5px rgba(255,255,255,.95)}
.h3d .orbit i.o2{top:auto;bottom:-6px;background:var(--teal-t1);
  box-shadow:0 0 14px 3px rgba(255,255,255,.85)}
/* conținutul feței frontale */
.h3d .rtitle{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;
  font:600 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.h3d .rtitle .live{display:inline-flex;align-items:center;gap:6px;color:#fff}
.h3d .rtitle .live i{width:7px;height:7px;border-radius:50%;background:var(--teal-t1);display:inline-block}
.h3d .units{position:relative;display:flex;flex-direction:column;gap:3px;flex:1}
.h3d .u{position:relative;flex:1;border-radius:3px;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16)}
.h3d .u.on{background:linear-gradient(90deg,rgba(0,190,188,.55),rgba(125,238,236,.35));
  border-color:rgba(255,255,255,.55)}
.h3d .u.on::before{content:"";position:absolute;left:6px;top:50%;transform:translateY(-50%);
  width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:5px 0 0 rgba(255,255,255,.6)}
.h3d .u.on::after{content:"";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:20px;height:2.5px;border-radius:2px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.6) 0 3px,transparent 3px 6px)}

/* unitatea clientului */
.h3d .u.you{flex:2.6;background:linear-gradient(90deg,#00bebc,#7deeec);border-color:#fff;
  box-shadow:0 0 22px rgba(0,190,188,.75),inset 0 1px 0 rgba(255,255,255,.7)}
@keyframes h3dyou{0%,100%{box-shadow:0 0 22px rgba(0,190,188,.75),inset 0 1px 0 rgba(255,255,255,.7)}
  50%{box-shadow:0 0 34px rgba(255,255,255,.95),inset 0 1px 0 rgba(255,255,255,.7)}}
.h3d .u.you::before{content:"";position:absolute;left:8px;top:50%;transform:translateY(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--blue-d1);box-shadow:7px 0 0 rgba(0,90,148,.55)}
.h3d .u.you::after{content:attr(data-you);position:absolute;right:7px;top:50%;transform:translateY(-50%);
  font:800 9.5px/1 var(--mono);letter-spacing:.1em;color:#fff;width:auto;height:auto;
  background:rgba(0,63,104,.72);padding:4px 8px;border-radius:6px;
  box-shadow:0 2px 8px rgba(0,40,70,.35);text-shadow:0 1px 3px rgba(0,40,70,.6)}
/* umbra pe podea + reflexie */
.h3d .ground{position:absolute;left:50%;bottom:-52px;width:340px;height:56px;margin-left:-170px;
  border-radius:50%;background:radial-gradient(50% 100% at 50% 50%,rgba(0,40,70,.4),transparent 72%);
  filter:blur(10px);animation:h3dground 7s ease-in-out infinite}
@keyframes h3dground{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.92);opacity:.75}}
@media (max-width:560px){
  .h3d{transform:scale(.8);transform-origin:top center;height:440px}
}
/* HERO rack only (2026-09-02, owner: "oprește și lasă cum ai lăsat la găzduire"):
   the one effect is .float (h3dfloat) + .ground (h3dground). Sway, orbit (its
   element is gone from the hero markup), LED blinks, the client-unit glow
   pulse and the chip LEDs are switched off HERE only — .h3d.big / .h3d.mini
   further down are untouched. */
.co2-rackwrap .h3d .tilt,
.co2-rackwrap .h3d .rtitle .live i,
.co2-rackwrap .h3d .u.blink::before,
.co2-rackwrap .h3d .u.you,
.co2-rackwrap .h3d .u.you::before,
.co2-rackwrap .co2-chip .k i{animation:none}
/* chips telemetrie — readout HUD holografic (navy-glass) */
/* PERF (2026-08-13): backdrop-filter over the LIVE hero video re-blurred every
   video frame (constant compositing churn). Glass look kept via a slightly more
   opaque own background — same fix as gazduire2's hero HUD. */
.co2-chip{position:absolute;z-index:3;display:flex;align-items:center;gap:11px;overflow:hidden;
  background:linear-gradient(150deg,rgba(0,56,95,.84),rgba(0,38,68,.7));
  border:1px solid rgba(255,255,255,.42);border-radius:14px;
  padding:10px 14px 10px 12px;
  box-shadow:0 20px 44px -16px rgba(0,22,42,.62),inset 0 1px 0 rgba(255,255,255,.3),0 0 24px rgba(0,190,188,.2)}
/* colturi de vizor HUD */
.co2-chip::before,.co2-chip::after{content:"";position:absolute;width:10px;height:10px;
  border:2px solid var(--teal-t1);opacity:.85;pointer-events:none}
.co2-chip::before{left:5px;top:5px;border-right:0;border-bottom:0;border-radius:4px 0 0 0}
.co2-chip::after{right:5px;bottom:5px;border-left:0;border-top:0;border-radius:0 0 4px 0}
/* reflex care matura chip-ul */
.co2-chip .ico{position:relative;flex:none;width:32px;height:32px;border-radius:9px;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);box-shadow:inset 0 0 8px rgba(125,238,236,.25)}
.co2-chip .ico svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.85;
  stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 3px rgba(125,238,236,.5))}
.co2-chip .tx{display:flex;flex-direction:column;gap:4px;min-width:0}
.co2-chip .k{display:flex;align-items:center;gap:6px;font:700 8.5px/1 var(--mono);letter-spacing:.13em;
  text-transform:uppercase;color:var(--teal-t2);white-space:nowrap}
.co2-chip .k i{width:5px;height:5px;border-radius:50%;background:var(--teal-t1);flex:none;
  box-shadow:0 0 7px rgba(125,238,236,.95)}
.co2-chip .v{font:800 17px/1 var(--mono);color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap;
  text-shadow:0 1px 5px rgba(0,26,48,.55)}
.co2-chip .v b{color:var(--teal-t2);font-weight:800}
.co2-chip.c1{top:30px;left:-30px}
.co2-chip.c2{top:170px;right:-16px}
.co2-chip.c3{bottom:128px;left:-42px}
.co2-chip.c4{bottom:24px;right:-8px}
@keyframes co2float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.co2-net{position:absolute;inset:-20px -30px;z-index:1;pointer-events:none}
.co2-net path{fill:none;stroke:rgba(255,255,255,.5);stroke-width:1.5;stroke-dasharray:3 7}

/* feature band — glass strip over the hero gradient, STATIC (2026-09-02, same
   as gazduire2): one set, wrapped + centred, no marquee loop */
.co2-marq{position:relative;z-index:2;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)}
.co2-marq .track{display:flex;justify-content:center}
.co2-marq .set{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 22px;padding:16px 17px;white-space:nowrap}
.co2-marq span{font:600 11.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.92)}
.co2-marq b{color:#fff;font-weight:800}
.co2-marq i{width:5px;height:5px;border-radius:1px;background:rgba(255,255,255,.85);transform:rotate(45deg);flex:none}

@media (max-width:1080px){
  .co2-hero .wrap{grid-template-columns:1fr;padding-bottom:96px}
  .co2-rackwrap{justify-self:center;margin-top:10px;transform:none}
}
@media (max-width:560px){
  .co2-rack{width:252px}
  .co2-rack .zone .tag{right:-76px}
  .co2-chip.c1{left:-6px;top:-18px}.co2-chip.c3{left:-8px}
}

/* ================= STATS — „pulsul infrastructurii" (fără cutii) ================= */
.co2-stats{position:relative;z-index:3;padding:78px 0 10px;
  background:linear-gradient(180deg,var(--bg),#fff)}
.co2-stats .pulse{position:relative}
/* linia de semnal */
.co2-stats .waveband{position:absolute;left:-40px;right:-40px;top:86px;height:120px;pointer-events:none}
.co2-stats .waveband svg{width:100%;height:100%;overflow:visible}
.co2-stats .wtrack{fill:none;stroke:var(--blue-t3);stroke-width:2}
.co2-stats .wline{fill:none;stroke:url(#coGrad);stroke-width:4;stroke-linecap:round;
  stroke-dasharray:100 130;stroke-dashoffset:0;
  filter:drop-shadow(0 3px 8px rgba(0,190,188,.45))}
.co2-stats .wflow{fill:none;stroke:rgba(255,255,255,.85);stroke-width:2.4;stroke-linecap:round;
  stroke-dasharray:.7 8}
/* terminalele de la capetele liniei serpuite */
.co2-stats .wend{position:absolute;z-index:3;width:50px;height:50px;border-radius:50%;
  display:grid;place-items:center;transform:translate(-50%,-50%);
  background:var(--grad);box-shadow:0 0 0 5px #fff,0 12px 26px -8px rgba(0,113,185,.55),0 0 24px rgba(0,190,188,.55)}
.co2-stats .wend svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.co2-stats .wend::before,.co2-stats .wend::after{content:"";position:absolute;inset:-6px;border-radius:50%;
  border:2px solid rgba(0,190,188,.5)}
.co2-stats .wend.start{left:80px;top:84px}
.co2-stats .wend.finish{left:calc(100% - 80px);top:80px}
.co2-stats .wend.start::after{animation-delay:1.45s}
.co2-stats .wend.finish::before{animation-delay:.7s}
.co2-stats .wend.finish::after{animation-delay:2.15s}
.co2-stats .wend b{position:absolute;top:calc(100% + 9px);left:50%;transform:translateX(-50%);white-space:nowrap;
  font:800 8.5px/1.35 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--blue-d1);text-align:center}
/* coloanele libere */
.co2-stats .cols{position:relative;display:grid;grid-template-columns:repeat(4,1fr);z-index:1}
.pstat{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  transition:transform .25s}
.pstat:hover{transform:translateY(-4px)}
/* hitbox anti-jitter la marginea de jos (vezi .amod:hover::after) */
.pstat:hover::after{content:"";position:absolute;left:0;right:0;top:100%;height:6px}
.pstat .num{height:86px;display:flex;align-items:baseline;justify-content:center;gap:7px;
  font-variant-numeric:tabular-nums}
.pstat .num b{font:800 clamp(44px,4.6vw,64px)/1 var(--mono);letter-spacing:-.04em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  align-self:center}
.pstat:hover .num b{filter:drop-shadow(0 4px 16px rgba(0,190,188,.45))}
.pstat .num span{font:700 clamp(17px,1.6vw,22px)/1 var(--mono);color:var(--ink-2)}
.pstat .num .pre{font:700 clamp(17px,1.6vw,22px)/1 var(--mono);color:var(--ink-2);letter-spacing:.02em}
/* nodul de pe linie */
.pstat .nodez{height:120px;display:grid;place-items:center}
.pstat .node{position:relative;width:15px;height:15px;border-radius:50%;
  background:var(--grad);box-shadow:0 0 0 4px #fff,0 0 16px rgba(0,190,188,.75)}
.pstat .node::before,.pstat .node::after{content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1.6px solid rgba(0,190,188,.65)}
.pstat .node::after{animation-delay:1.3s}
.pstat:nth-child(2) .node::before{animation-delay:.4s}.pstat:nth-child(2) .node::after{animation-delay:1.7s}
.pstat:nth-child(3) .node::before{animation-delay:.8s}.pstat:nth-child(3) .node::after{animation-delay:2.1s}
.pstat:nth-child(4) .node::before{animation-delay:1.1s}.pstat:nth-child(4) .node::after{animation-delay:2.4s}
.pstat:hover .node::before,.pstat:hover .node::after{animation-duration:1.2s}
.co2-stats .waveband:hover .wend{filter:brightness(1.05)}
.pstat .pic{width:62px;height:62px;margin:0 auto}
.pstat .pic svg{width:100%;height:100%;overflow:visible;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.pstat:hover .pic svg{transform:scale(1.1) rotate(-2deg)}
.cic .t3{font:800 11px var(--mono);fill:var(--blue);letter-spacing:.04em}
.cic .sdash{fill:none;stroke:var(--blue-t2);stroke-width:1.3;stroke-dasharray:3 4}
.cic .nodec{fill:var(--teal-t3);stroke:url(#coGrad);stroke-width:1.8}
.cic .stick{stroke:var(--blue-t2);stroke-width:2;stroke-linecap:round}
.cic .t3s{font:700 5.5px var(--mono);fill:var(--faint);letter-spacing:.3em}
.cic .ledw{fill:#fff}
.cic .dash2{stroke:var(--blue-t1);stroke-width:1.6;fill:none;stroke-dasharray:4 4;stroke-linejoin:round}
.pstat .pl{margin:10px auto 0;font-size:13.5px;line-height:1.5;color:var(--muted);max-width:24ch}
/* reveal: linia se desenează, nodurile pop, cifrele se numără (data-count) */
.co2.anim .co2-stats .rv .wline{stroke-dashoffset:100}
.co2.anim .co2-stats .rv .wflow{opacity:0}
.co2.anim .co2-stats .rv .node{transform:scale(0)}
.co2.anim .co2-stats .rv .pl,.co2.anim .co2-stats .rv .pic{opacity:0;transform:translateY(8px)}
.co2.anim .co2-stats .rv.in .wline{animation:stDrawW 1.6s cubic-bezier(.3,.7,.25,1) .1s forwards}
.co2.anim .co2-stats .rv.in .wflow{animation:stFade .5s 1.5s forwards}
.co2.anim .co2-stats .rv.in .node{animation:stNode .5s cubic-bezier(.34,1.6,.5,1) forwards}
.co2.anim .co2-stats .rv.in .pstat:nth-child(1) .node{animation-delay:.35s}
.co2.anim .co2-stats .rv.in .pstat:nth-child(2) .node{animation-delay:.7s}
.co2.anim .co2-stats .rv.in .pstat:nth-child(3) .node{animation-delay:1.05s}
.co2.anim .co2-stats .rv.in .pstat:nth-child(4) .node{animation-delay:1.4s}
.co2.anim .co2-stats .rv.in .pl,.co2.anim .co2-stats .rv.in .pic{animation:stLabel .6s ease .9s forwards}
@keyframes stDrawW{to{stroke-dashoffset:0}}
@keyframes stFade{to{opacity:1}}
@keyframes stNode{to{transform:scale(1)}}
@keyframes stLabel{to{opacity:1;transform:none}}
@media (max-width:820px){
  .co2-stats{padding:56px 0 0}
  .co2-stats .waveband{display:none}
  .co2-stats .wend{display:none}
  .co2-stats .cols{grid-template-columns:repeat(2,1fr);gap:38px 12px}
  .pstat .num{height:auto}
  .pstat .nodez{height:30px}
}
/* ================= INFRASTRUCTURE DIAGRAM („De ce NAV" WOW) ================= */
/* Owner, 2026-09-02 ("optimizează efectele și aici … încarcă memoria foarte
   mult"): the whole section is STILL now. Gone: the two aurora blobs (600px,
   blur 95px, will-change — the biggest GPU textures on the page), every
   backdrop-filter and -webkit-box-reflect (console, pillar cards, pills, sys
   badges — each reflect doubles a layer), the @property conic edge rotation
   (repainted the console every frame on the CPU), the glare sweep, the pool
   pulse, the text shine, the SVG dash flows + their drop-shadows, the LED
   blinks, the pillar-icon animations and the mini rack's float/sway/orbit/
   LEDs. Left: the failover simulation's transient cues while .inc is on
   (shock ring, spinner, heal bar, "your unit" blink). */
.co2-infra{position:relative;overflow:hidden;color:#fff;background:var(--grad-band)}
.co2-infra::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  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:44px 44px;
  -webkit-mask-image:radial-gradient(110% 90% at 50% 8%,#000 25%,transparent 85%);
  mask-image:radial-gradient(110% 90% at 50% 8%,#000 25%,transparent 85%)}
.co2-infra .wrap{position:relative;z-index:1}
.co2-infra .sec-head{max-width:760px;margin-left:auto;margin-right:auto;text-align:center;margin-bottom:60px}
.co2-infra .sec-head .eyebrow{color:#fff}
.co2-infra .sec-head .eyebrow::before{display:none}
.co2-infra h2{font-size:clamp(32px,4vw,50px);color:#fff}
.co2-infra 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}
.co2-infra .sec-head p{color:rgba(255,255,255,.93)}
/* ---- DIORAMA „rețeaua redundantă NAV" ---- */
.dio{position:relative;perspective:1200px}
.dio-scene{position:relative;height:848px}
.dio::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  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:40px 40px;
  -webkit-mask-image:radial-gradient(120% 110% at 50% 0,#000 30%,transparent 88%);
  mask-image:radial-gradient(120% 110% at 50% 0,#000 30%,transparent 88%)}
.dio .dt{position:absolute;top:22px;left:26px;font:600 10.5px/1 var(--mono);letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.9);display:flex;align-items:center;gap:8px}
.dio .dt i{width:7px;height:7px;border-radius:50%;background:var(--teal-t1)}
.dio .dm{position:absolute;top:22px;right:26px;font:600 10.5px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.65)}
/* rutele SVG */
.dio-net{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.dio-net .rt{fill:none;stroke:rgba(255,255,255,.30);stroke-width:2.5}
.dio-net .fan{fill:none;stroke:rgba(255,255,255,.45);stroke-width:1.5;stroke-dasharray:2 7}
.dio-net .fl{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-dasharray:7 11;
  transition:opacity .5s,stroke-width .5s}
.dio-net .xg{opacity:0;transition:opacity .35s}
.dio-net .xg circle{fill:rgba(0,63,104,.72);stroke:#fff;stroke-width:2}
.dio-net .xg path{stroke:#fff;stroke-width:2.6;stroke-linecap:round}
/* stări de avarie */
.dio.inc-netA .p-netA .fl,.dio.inc-netB .p-netB .fl,
.dio.inc-feedA .p-feedA .fl,.dio.inc-feedB .p-feedB .fl{opacity:.08}
.dio.inc-netA .p-netA .rt,.dio.inc-netB .p-netB .rt,
.dio.inc-feedA .p-feedA .rt,.dio.inc-feedB .p-feedB .rt{stroke:rgba(255,255,255,.16)}
.dio.inc-netA .p-netA .xg,.dio.inc-netB .p-netB .xg,
.dio.inc-feedA .p-feedA .xg,.dio.inc-feedB .p-feedB .xg{opacity:1}
.dio.inc-netA .p-netB .fl,.dio.inc-netB .p-netA .fl,
.dio.inc-feedA .p-feedB .fl,.dio.inc-feedB .p-feedA .fl{stroke-width:4.5}
/* nodurile (chips glass) */
.dio-node{position:absolute;display:flex;flex-direction:column;gap:5px;min-width:186px;
  background:rgba(255,255,255,.95);border:1px solid rgba(255,255,255,.78);border-radius:14px;
  padding:14px 17px;box-shadow:0 20px 48px -16px rgba(0,40,70,.48);transition:opacity .5s,box-shadow .5s,transform .5s}
.dio-node .k{font:700 12px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink);
  display:flex;align-items:center;gap:7px}
.dio-node .k i{width:8px;height:8px;border-radius:50%;background:var(--grad);flex:none}
.dio-node .s{font:500 11.5px/1.35 var(--sans);color:var(--muted)}
.dio-node.nw{left:17%;top:17.5%}
.dio-node.sw{left:17%;bottom:22%}
.dio-node.ne{right:3.5%;top:16%}
.dio-node.se{right:3.5%;bottom:20%}
.dio.inc-netA .dio-node.nw,.dio.inc-netB .dio-node.sw,
.dio.inc-feedA .dio-node.ne,.dio.inc-feedB .dio-node.se{opacity:.5;transform:scale(.97)}
.dio.inc-netA .dio-node.nw .k i,.dio.inc-netB .dio-node.sw .k i,
.dio.inc-feedA .dio-node.ne .k i,.dio.inc-feedB .dio-node.se .k i{background:var(--blue-t2);animation:none}
.dio.inc-netA .dio-node.sw,.dio.inc-netB .dio-node.nw,
.dio.inc-feedA .dio-node.se,.dio.inc-feedB .dio-node.ne{box-shadow:0 0 0 2.5px var(--teal),0 22px 50px -16px rgba(0,190,188,.6)}
/* norul de provideri */
.dio-cloud{position:absolute;left:2.3%;top:52%;transform:translateY(-50%);width:158px;
  background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.75);border-radius:14px;
  padding:14px 15px;box-shadow:0 18px 44px -16px rgba(0,40,70,.45);text-align:center}
.dio-cloud .dots{display:grid;grid-template-columns:repeat(8,1fr);gap:3.5px;margin-bottom:9px}
.dio-cloud .dots i{width:5px;height:5px;border-radius:50%;background:var(--blue-t2);justify-self:center}
.dio-cloud .dots i:nth-child(3n){background:var(--teal-t1)}
.dio-cloud .dots i:nth-child(5n){background:var(--blue-t1)}
.dio-cloud .big{font:800 24px/1 var(--mono);letter-spacing:-.02em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.dio-cloud .lbl{margin-top:5px;font:500 10.5px/1.4 var(--sans);color:var(--muted)}
/* rândul de echipamente din chips */
.dio-node .devrow{display:flex;gap:11px;margin-top:9px;align-items:flex-end}
.dio-node .devrow svg{width:46px;height:auto;overflow:visible}
.dio-node .devrow.rw svg{width:100%;max-width:168px}
.dio-node .devrow svg[viewBox="0 0 62 46"]{width:74px}
.dio-node .devrow svg[viewBox="0 0 34 46"]{width:42px}
.dio-node.ec{right:2.3%;top:52%;transform:translateY(-50%)}
/* marcaje de sistem (anti-ddos / ats) */
.dio-sys{position:absolute;top:45.5%;display:flex;flex-direction:column;align-items:center;gap:7px;
  transform:translateY(-50%)}
.dio-sys.l{left:29.5%}
.dio-sys.r{right:27.5%}
.dio-sys .c{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.22);border:1.6px solid rgba(255,255,255,.6)}
.dio-sys .c svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.dio-sys .t{font:700 9.5px/1 var(--mono);letter-spacing:.14em;color:rgba(255,255,255,.9);text-transform:uppercase}
/* consola de incident (failover) — panou holografic-oglindă */
.dio-alert{position:absolute;left:50%;top:0;z-index:5;width:470px;
  transform:translate(-50%,0) rotateX(10deg);transform-origin:50% 115%;
  pointer-events:none;display:flex;gap:13px;align-items:center;
  background:linear-gradient(160deg,rgba(255,255,255,.40),rgba(255,255,255,.20) 55%,rgba(255,255,255,.30)),
             repeating-linear-gradient(180deg,rgba(255,255,255,.05) 0 1.5px,transparent 1.5px 4px);
  border:1px solid rgba(255,255,255,.55);border-radius:16px;
  padding:11px 16px 12px;
  box-shadow:0 30px 70px -18px rgba(0,40,70,.7),inset 0 1px 0 rgba(255,255,255,.8);
  transition:opacity .4s,transform .6s cubic-bezier(.3,1.4,.4,1)}

/* marginea de lumină — STATICĂ (2026-09-02; rotația prin @property repicta panoul la fiecare cadru) */
.dio-alert .edge{position:absolute;inset:-2px;border-radius:20px;padding:2px;pointer-events:none;opacity:1;
  background:conic-gradient(from 0deg,rgba(255,255,255,.95),rgba(125,238,236,.95) 22%,rgba(255,255,255,.08) 48%,rgba(125,238,236,.7) 72%,rgba(255,255,255,.95));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
/* colțuri HUD */
.dio-alert .hud{position:absolute;inset:6px;border-radius:12px;pointer-events:none;opacity:.85;
  background:
    linear-gradient(#fff,#fff) left 0 top 0/15px 2px no-repeat,
    linear-gradient(#fff,#fff) left 0 top 0/2px 15px no-repeat,
    linear-gradient(#fff,#fff) right 0 top 0/15px 2px no-repeat,
    linear-gradient(#fff,#fff) right 0 top 0/2px 15px no-repeat,
    linear-gradient(#fff,#fff) left 0 bottom 0/15px 2px no-repeat,
    linear-gradient(#fff,#fff) left 0 bottom 0/2px 15px no-repeat,
    linear-gradient(#fff,#fff) right 0 bottom 0/15px 2px no-repeat,
    linear-gradient(#fff,#fff) right 0 bottom 0/2px 15px no-repeat}
/* balta de lumină sub panou */
.dio-alert .pool{position:absolute;left:10%;right:10%;bottom:-34px;height:40px;border-radius:50%;pointer-events:none;
  background:radial-gradient(50% 62% at 50% 38%,rgba(255,255,255,.5),transparent 72%);
  filter:blur(11px);opacity:0}
.dio-alert .pool{opacity:.5}
.dio.inc .dio-alert .pool{opacity:.9}
/* conținutul — alb, pe sticlă */
.dio-alert .ic{position:relative;flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.2);border:1.6px solid rgba(255,255,255,.85);
  box-shadow:0 10px 26px -8px rgba(0,40,70,.5),inset 0 1px 0 rgba(255,255,255,.6)}
.dio-alert .ic svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.dio-alert .ic .ial{display:none}
.dio.inc .dio-alert .ic .iok{display:none}
.dio.inc .dio-alert .ic .ial{display:block;animation:dioSpin 1.1s linear infinite}
@keyframes dioSpin{to{transform:rotate(360deg)}}
.dio-alert .tx{position:relative;min-width:0;flex:1}
/* SITE-BLEED FIX: resort.min.css's legacy grid (≥993px: .l1{width:8.33%}
   .l2{width:16.66%} .l3{width:25%}) collides with the mockup's class names —
   it squeezed the failover console's .l1/.l2/.l3 lines into 32/64/96px columns
   (text wrapped, the panel more than doubled in height and crowded the rack)
   and skews the three-phase breaker chips. The standalone mockup has no site
   grid; restore intrinsic widths. (.swport pins are safe — own width rule.) */
.dio-alert .tx .l1,.dio-alert .tx .l2,.dio-alert .tx .l3,
.brk3 .b3.l1,.brk3 .b3.l2,.brk3 .b3.l3{width:auto}
.dio-alert .grp{display:contents}
.dio-alert .grp.al{display:none}
.dio.inc .dio-alert .grp.al{display:contents}
.dio.inc .dio-alert .grp.ok{display:none}
.dio-alert .l1{display:flex;font:700 9.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#eaffff;
  align-items:center;gap:6px;text-shadow:0 1px 6px rgba(0,40,70,.4)}
.dio-alert .l1 i{width:6px;height:6px;border-radius:50%;background:#fff;flex:none;
  box-shadow:0 0 8px rgba(255,255,255,.95)}
.dio-alert .l2{display:block;margin-top:4px;font:800 15px/1.1 var(--sans);letter-spacing:-.01em;
  background:linear-gradient(100deg,#fff 42%,var(--teal-t2) 50%,#fff 58%);
  background-size:240% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.dio-alert .l3{display:block;margin-top:3px;font:500 10.5px/1.35 var(--sans);color:rgba(255,255,255,.94);
  text-shadow:0 1px 5px rgba(0,40,70,.35)}
.dio-alert .bar{display:block;margin-top:7px;height:3px;border-radius:2px;background:rgba(255,255,255,.28);overflow:hidden}
.dio-alert .bar i{display:block;height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,#fff,var(--teal-t2))}
.dio-alert .bar i{width:100%}
.dio.inc .dio-alert .bar i{width:0;animation:dioHeal 1.15s cubic-bezier(.2,.7,.3,1) .15s forwards}
@keyframes dioHeal{to{width:100%}}
/* unda de șoc din server la failover */
.dio-shock{position:absolute;left:50%;top:44%;width:10px;height:10px;margin:-5px 0 0 -5px;pointer-events:none;z-index:1}
.dio-shock i{position:absolute;inset:0;border-radius:50%;border:2.5px solid rgba(255,255,255,.75);opacity:0}
.dio.inc .dio-shock i{animation:dioShock 1.3s cubic-bezier(.2,.7,.3,1) forwards}
.dio.inc .dio-shock i:nth-child(2){animation-delay:.4s}
@keyframes dioShock{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(34)}}
/* serverul reacționează DOAR în incident: unitatea ta clipește puternic (restul
   mini-rack-ului e static — vezi override-urile .dio .h3d.mini mai jos) */
.dio.inc .h3d.mini .u.you{animation:h3dyou .7s ease-in-out infinite}
/* holograma + textul din panou */
.dio .h3d.mini{position:absolute;left:50%;top:44%;margin:-165px 0 0 -100px}
.dio .name{position:absolute;left:0;right:0;bottom:92px;text-align:center;
  font:800 21px/1.25 var(--sans);letter-spacing:-.02em;color:#fff}
.dio .name em{font-style:normal;color:var(--teal-t2)}
.dio .strow{position:absolute;left:0;right:0;bottom:46px;display:flex;justify-content:center;gap:8px}
.dio .st{display:inline-flex;align-items:center;gap:8px;font:700 10.5px/1 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:#fff;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.5);
  border-radius:var(--pill);padding:9px 15px;
  box-shadow:0 10px 26px -12px rgba(0,40,70,.5),inset 0 1px 0 rgba(255,255,255,.4);
  text-shadow:0 1px 4px rgba(0,40,70,.35)}
.dio .st svg{width:15px;height:15px;flex:none;fill:none;stroke:var(--teal-t2);stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round}
.dio .loc{position:absolute;left:0;right:0;bottom:18px;text-align:center;
  font:500 11.5px/1.4 var(--sans);color:rgba(255,255,255,.78)}
.dio .nodes-m{display:contents}
/* rândul de carduri piloni — sticlă, în interiorul scenei */
.ipc-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:8px}
/* --- cardurile piloni --- */
.ipc{position:relative;border-radius:18px;padding:26px 24px;z-index:1;
  background:linear-gradient(160deg,rgba(255,255,255,.32),rgba(255,255,255,.16) 58%,rgba(255,255,255,.24)),
             repeating-linear-gradient(180deg,rgba(255,255,255,.045) 0 1.5px,transparent 1.5px 4px);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 26px 60px -22px rgba(0,40,70,.55),inset 0 1px 0 rgba(255,255,255,.65);
  transition:transform .25s,box-shadow .25s,border-color .25s;transform-style:preserve-3d}
.ipc::before{content:"";position:absolute;inset:7px;border-radius:12px;pointer-events:none;opacity:.7;
  background:
    linear-gradient(#fff,#fff) left 0 top 0/13px 1.6px no-repeat,
    linear-gradient(#fff,#fff) left 0 top 0/1.6px 13px no-repeat,
    linear-gradient(#fff,#fff) right 0 top 0/13px 1.6px no-repeat,
    linear-gradient(#fff,#fff) right 0 top 0/1.6px 13px no-repeat,
    linear-gradient(#fff,#fff) left 0 bottom 0/13px 1.6px no-repeat,
    linear-gradient(#fff,#fff) left 0 bottom 0/1.6px 13px no-repeat,
    linear-gradient(#fff,#fff) right 0 bottom 0/13px 1.6px no-repeat,
    linear-gradient(#fff,#fff) right 0 bottom 0/1.6px 13px no-repeat}
.ipc::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.45) 47%,rgba(255,255,255,.1) 53%,transparent 64%);
  background-size:260% 100%;background-position:185% 0;background-repeat:no-repeat;
  transition:background-position .7s ease}
.ipc:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.95);
  box-shadow:0 36px 80px -24px rgba(0,40,70,.7),0 0 34px rgba(125,238,236,.25),inset 0 1px 0 rgba(255,255,255,.8)}
.ipc:hover::after{background-position:-95% 0}
/* hitbox anti-jitter la marginea de jos (vezi .amod:hover::after); ::before/::after ale
   cardului sunt decor, deci pseudo-ul sta pe h3 (static) si se ancoreaza tot la .ipc */
.ipc:hover h3::after{content:"";position:absolute;left:0;right:0;top:100%;height:8px}
.ipc .co2-ic{width:86px;height:86px;border-radius:22px;display:grid;place-items:center;margin-bottom:20px;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 12px 26px -14px rgba(0,40,70,.5);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.ipc:hover .co2-ic{transform:scale(1.07) rotate(-3deg)}
.ipc .co2-ic svg{width:58px;height:58px}
.ipc h3{font:700 17.5px/1.3 var(--sans);letter-spacing:-.01em;margin:0 0 9px;color:#fff;
  text-shadow:0 1px 6px rgba(0,40,70,.35)}
.ipc p{margin:0;font-size:14px;line-height:1.6;color:rgba(255,255,255,.93);
  text-shadow:0 1px 5px rgba(0,40,70,.3)}
.ipc .proof{display:inline-flex;align-items:baseline;gap:7px;margin-top:16px;
  font:700 12.5px/1 var(--mono);color:#fff;background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.5);border-radius:var(--pill);padding:8px 13px;font-variant-numeric:tabular-nums;
  text-shadow:0 1px 4px rgba(0,40,70,.3)}
.ipc .proof b{font-size:15px;background:linear-gradient(90deg,#fff,var(--teal-t2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
/* iconografia .cic devine linii-hologramă pe sticla cardurilor */
.ipc .cic .line,.ipc .cic .fib{stroke:#fff}
.ipc .cic .det{stroke:rgba(255,255,255,.8)}
.ipc .cic .f1{fill:rgba(255,255,255,.16)}
.ipc .cic .f2{fill:rgba(255,255,255,.26)}
.ipc .cic .f2s{fill:rgba(125,238,236,.35)}
.ipc .cic .sig{stroke:var(--teal-t2)}
.ipc .cic .led{fill:var(--teal-t1)}
.ipc .cic .spk,.ipc .cic .spkstar{fill:#fff}
.ipc .cic .bub{fill:rgba(255,255,255,.3)}
.ipc .cic .t247{fill:#fff}
.ipc .cic .atk{stroke:rgba(255,255,255,.9)}
.ipc .cic .field{stroke:rgba(255,255,255,.8)}
/* --- iconografie custom NAV (.cic) --- */
.cic .f1{fill:#fff}
.cic .f2{fill:var(--blue-t3)}
.cic .f2s{fill:var(--teal-t3)}
.cic .bub{fill:var(--blue)}
.cic .line{stroke:url(#coGrad);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.cic .fib{stroke:url(#coGrad);stroke-width:2;fill:none;stroke-linecap:round}
.cic .det{stroke:var(--blue-t1);stroke-width:1.6;fill:none;stroke-linecap:round}
.cic .atk{stroke:var(--blue-d1);stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.cic .sig{stroke:var(--teal);stroke-width:2;fill:none;stroke-linecap:round}
.cic .sig.s2{animation-delay:.45s}
.cic .led{fill:var(--teal)}
.cic .led.l2{animation-delay:.5s}
.cic .spk,.cic .spkstar{fill:var(--teal);transform-box:fill-box;transform-origin:center}
.cic .spkstar{animation-duration:1.7s}
.cic .field{stroke:url(#coGrad);stroke-width:1.8;fill:none;stroke-dasharray:4 5}
.cic .t247{font:800 6.8px var(--mono);fill:#fff;letter-spacing:.03em}
/* the shared .cic icon animations (signal/led/sparks/field) are switched off
   everywhere in this section — the pillar cards AND the diorama's router/
   pylon/UPS/genset SVGs (14 co2led + 4 cicSpk were still ticking) */
.co2-infra .cic .sig,.co2-infra .cic .led,.co2-infra .cic .spk,.co2-infra .cic .spkstar,.co2-infra .cic .field{animation:none}
/* --- mini-holograma (refolosește .h3d din hero) --- */
.h3d.mini{width:200px;height:330px;perspective:900px}
.h3d.mini .tilt{transform:rotateX(calc(4deg + var(--prx,0deg))) rotateY(calc(-22deg + var(--pry,0deg)))}
.h3d.mini .front{transform:translateZ(42px);padding:12px 11px 11px;border-radius:13px}
.h3d.mini .side{width:84px;margin-left:-42px;transform:rotateY(90deg) translateZ(96px);border-radius:11px}
.h3d.mini .lid{height:84px;margin-top:-42px;transform:rotateX(90deg) translateZ(161px) scale(.98);border-radius:11px}
.h3d.mini .ground{width:230px;margin-left:-115px;bottom:-34px;height:40px}
.h3d.mini .rtitle{font-size:8.5px;letter-spacing:.12em;margin-bottom:8px}
.h3d.mini .u.you::after{font-size:7.5px;letter-spacing:.08em;right:5px;padding:3px 6px;border-radius:5px}
.h3d.mini .u.you::before{left:6px;width:3px;height:3px;box-shadow:5px 0 0 rgba(0,90,148,.55)}
/* the mini rack is STILL (2026-09-02): no float, sway, ground pulse, LED blinks or
   idle glow (orbit element removed from the markup); only .dio.inc re-arms the
   "your unit" blink above. The shared .h3d rules stay for the other racks. */
.dio .h3d.mini .float,.dio .h3d.mini .ground,.dio .h3d.mini .tilt,
.dio .h3d.mini .rtitle .live i,.dio .h3d.mini .u.blink::before,
.dio .h3d.mini .u.you,.dio .h3d.mini .u.you::before{animation:none}
.co2-infra .next{display:flex;justify-content:center;margin-top:54px}
.co2-infra .next a{display:inline-flex;align-items:center;gap:10px;font:800 16px/1 var(--sans);
  color:#fff;text-decoration:none;padding:16px 26px;border-radius:var(--pill);
  text-shadow:0 1px 4px rgba(0,63,104,.45);
  border:1.6px solid rgba(255,255,255,.7);background:var(--grad);
  box-shadow:0 18px 44px -14px rgba(0,40,70,.55);transition:transform .2s,filter .2s,box-shadow .25s}
.co2-infra .next a svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.co2-infra .next a:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 24px 54px -14px rgba(0,40,70,.65),0 0 30px rgba(125,238,236,.4)}
.co2-infra .next a:hover svg{transform:translateX(4px)}
/* responsive schema */
@media (max-width:1080px){
  .ipc-row{grid-template-columns:repeat(2,1fr)}
  .dio{height:auto;padding:0}
  .dio-scene{height:auto}
  .ipc-row{margin-top:22px}
  .dio-net,.dio-sys,.dio .dm,.dio-alert,.dio-shock{display:none}
  .dio .dt{position:relative;top:auto;left:auto;justify-content:center;margin-bottom:18px}
  .dio .h3d.mini{position:relative;left:auto;top:auto;margin:0 auto}
  .dio-cloud{position:relative;left:auto;top:auto;transform:none;width:100%;margin-top:26px}
  .dio-node{position:relative;inset:auto;width:calc(50% - 6px);min-width:0}
  .dio-node.ec{transform:none;top:auto;right:auto}
  .dio .nodes-m{display:flex;flex-wrap:wrap;gap:12px;margin:0 auto;max-width:460px}
  .dio .name,.dio .strow,.dio .loc{position:relative;bottom:auto;margin-top:14px}
  .dio .name{margin-top:26px}
}
@media (max-width:600px){
  .ipc-row{grid-template-columns:1fr}
  .dio-node{width:100%}
}

/* ================= PLANS -> CONFIGURATOR ================= */
.co2-plans{position:relative;
  background:linear-gradient(180deg,#e6f4fc 0%,#ecf7fd 34%,var(--bg) 72%,var(--soft) 100%)}
.co2-plans::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(rgba(0,113,185,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(0,113,185,.055) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 30%,transparent 88%);
          mask-image:radial-gradient(120% 90% at 50% 0%,#000 30%,transparent 88%)}
.co2-plans::after{content:"";position:absolute;left:50%;top:-140px;width:900px;height:420px;
  margin-left:-450px;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,190,188,.10),transparent 70%)}
.co2-plans>.wrap{position:relative;z-index:1}
.cfg{display:block;scroll-margin-top:96px} /* hero "Cere o ofertă" anchors here (#configurator) — clear the pinned bar */
/* --- grupuri de câmpuri, direct pe fundal (fără cutii) --- */
.cgroup{margin-bottom:18px}
.cgroup .ghead{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.cgroup .gnum{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  border-radius:11px;background:var(--grad);color:#fff;
  box-shadow:0 8px 18px -8px rgba(0,113,185,.6)}
.cgroup .gnum svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cgroup .ghead h3{margin:0;font:800 17px/1.2 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.cgroup .ghead::after{content:"";flex:1;height:1.5px;background:linear-gradient(90deg,var(--blue-t2),transparent)}
.grow2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.grow1{margin-bottom:14px}
.fld{display:block}
.fld .flbl{display:flex;align-items:center;gap:7px;font:600 10.5px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.fld .flbl svg{width:13px;height:13px;stroke:url(#coGrad);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fld input[type=text],.fld input[type=email],.fld input[type=tel]{width:100%;background:#fff;
  border:1px solid var(--line);border-radius:12px;padding:14px 16px;color:var(--ink);
  font:500 15px/1.4 var(--sans);transition:border-color .2s,box-shadow .2s}
.fld input::placeholder{color:var(--faint)}
.fld input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3.5px rgba(0,190,188,.18)}
/* segmented (companie/persoană, NAV/alt provider) */
.seg{display:inline-flex;background:var(--blue-t4);border:1px solid var(--blue-t3);border-radius:var(--pill);padding:4px;gap:4px}
.seg button{border:0;cursor:pointer;font:700 12.5px/1 var(--sans);color:var(--muted);background:transparent;
  border-radius:var(--pill);padding:9px 16px;transition:background .2s,color .2s,box-shadow .2s}
.seg button.on{background:var(--grad);color:#fff;text-shadow:0 1px 3px rgba(0,63,104,.4);box-shadow:0 6px 16px -6px rgba(0,113,185,.65)}
/* chips selectabile */
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chips .ch{cursor:pointer;font:700 12.5px/1 var(--mono);color:var(--ink-2);background:#fff;
  border:1.5px solid var(--line);border-radius:var(--pill);padding:11px 16px;
  transition:all .2s;user-select:none}
.chips .ch:hover{border-color:var(--blue-t1)}
.chips .ch.on{background:var(--grad);border-color:transparent;color:#fff;text-shadow:0 1px 3px rgba(0,63,104,.4);
  box-shadow:0 8px 20px -8px rgba(0,113,185,.6)}
.chips .ch.dis{opacity:.45;cursor:not-allowed;font-weight:500}
/* slidere */
.sld{display:flex;align-items:center;gap:16px}
.sld input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:7px;border-radius:4px;
  background:linear-gradient(90deg,#00bebc 0%,#0071b9 var(--p,50%),var(--blue-t3) var(--p,50%));outline:none}
.sld input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:23px;height:23px;border-radius:50%;
  background:#fff;border:3px solid var(--teal);box-shadow:0 3px 10px rgba(0,113,185,.4),0 0 0 5px rgba(0,190,188,.15);
  cursor:grab}
.sld .sval{flex:none;min-width:86px;text-align:center;font:800 15px/1 var(--mono);color:var(--blue);
  background:var(--blue-t4);border:1px solid var(--blue-t3);border-radius:10px;padding:10px 12px;
  font-variant-numeric:tabular-nums}
/* switch on/off (BGP) */

/* --- HANGARUL hardware: configurezi direct pe echipamente reale, pe scena gradient --- */
.hwhint{margin:2px 0 12px;font:500 13px/1.55 var(--sans);color:var(--muted)}
.hwhint b{color:var(--blue);font-weight:700}
.hwscene{position:relative;display:grid;grid-template-columns:290px minmax(0,1fr) 172px;grid-template-rows:auto auto;gap:18px;
  background:var(--grad-band);border-radius:26px;padding:20px 22px;overflow:hidden;
  box-shadow:0 34px 70px -30px rgba(0,80,140,.55)}
.hwscene::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:linear-gradient(rgba(255,255,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px);
  background-size:42px 42px;
  -webkit-mask-image:radial-gradient(130% 100% at 50% 0%,#000 30%,transparent 80%);
          mask-image:radial-gradient(130% 100% at 50% 0%,#000 30%,transparent 80%)}
.hwscene::after{content:"";position:absolute;left:-90px;top:-120px;width:420px;height:420px;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,255,255,.2),transparent 70%)}

.hwscene>div{position:relative;z-index:1}
.hwplate{font:700 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#fff;text-shadow:0 1px 3px rgba(0,63,104,.45);
  text-align:center;margin-bottom:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hwsub{margin-top:7px;text-align:center;font:700 11.5px/1.5 var(--mono);letter-spacing:.07em;color:#fff;
  text-transform:uppercase;text-shadow:0 1px 4px rgba(0,63,104,.4)}
/* panou de sticla comun (limbajul hologramei) */
/* WHITE-CARD CONFIGURATOR — the /reseller-hosting package recipe, 1:1
   (owner, 2026-09-11). Legacy rshosting.min.css builds each package as a white
   card inside a translucent grey-teal box with square corners, plus a strip of
   light above the card:
     .layer-1 .col .inside{padding:15px;background-color:rgba(163,188,192,.15)}
     .layer-1 .col .inner {padding:20px 15px;background-color:#fff}
     .layer-1 .col .inner:before{width:90%;height:18px;top:-18px;left:0;right:0;
       margin:auto;background-color:rgba(255,255,255,.1)}
   The computed geometry on the live packages is padding 40px 12px 12px — a
   thick band above the card and a thin one on the other three sides, which is
   what gives the three tones: page band, tinted box, white card. Here the
   panel IS the card; the frame is an outline (uniform, and it paints over
   the shadow so the tint never doubles) and the extra band on top is one
   shadow. The gaps must be LARGER than the two facing bands, or the tinted
   boxes touch and read as one continuous light area instead of separate cards
   (owner, 2026-09-11). Scaled down a step at the owner's request — 8px frame,
   26px top band, 12px strip — so the facing bands total 16px horizontally and
   34px vertically and the grid uses 30px and 52px, leaving a strip of the
   darker hangar band between two boxes. No rounded corners anywhere, as on the packages. Everything
   inside the panels was painted for a dark surface, so the block below flips
   that palette; it is scoped to .gpanel and sits last in the file, so
   reverting this look means reverting this one block. */
.co2 .hwscene .gpanel{position:relative;background:#fff;border:0;border-radius:0;backdrop-filter:none;
  outline:8px solid rgba(163,188,192,.15);
  box-shadow:0 -18px 0 8px rgba(163,188,192,.15)}
.co2 .hwscene .gpanel::before{content:"";display:block;position:absolute;left:0;right:0;margin:auto;
  width:90%;height:12px;top:-12px;background:rgba(255,255,255,.1);border-radius:0;pointer-events:none}

/* --- text --------------------------------------------------------------- */
.co2 .hwscene .gpanel .silk,
.co2 .hwscene .gpanel .hwplate,
.co2 .hwscene .gpanel .iplbl,
.co2 .hwscene .gpanel .iplbl2,
.co2 .hwscene .gpanel .svch,
.co2 .hwscene .gpanel .pcap,
.co2 .hwscene .gpanel .ctitle,
.co2 .hwscene .gpanel .flbl,
.co2 .hwscene .gpanel .svnote,
.co2 .hwscene .gpanel .svincl li,
.co2 .hwscene .gpanel .blkleg,
.co2 .hwscene .gpanel .ip6note,
.co2 .hwscene .gpanel .swnote,
.co2 .hwscene .gpanel .asnode .ttl,
.co2 .hwscene .gpanel .asnode .sub,
.co2 .hwscene .gpanel .ulab,
.co2 .hwscene .gpanel .pzl,
.co2 .hwscene .gpanel .pnum,
.co2 .hwscene .gpanel .ls{color:var(--muted);text-shadow:none}
.co2 .hwscene .gpanel .silk,
.co2 .hwscene .gpanel .hwplate,
.co2 .hwscene .gpanel .iplbl,
.co2 .hwscene .gpanel .iplbl2,
.co2 .hwscene .gpanel .svch,
.co2 .hwscene .gpanel .ctitle,
.co2 .hwscene .gpanel .asnode .ttl,
.co2 .hwscene .gpanel .blkleg b,
.co2 .hwscene .gpanel .ip6note b{color:var(--blue-d1)}
.co2 .hwscene .gpanel .chassis .silk i,
.co2 .hwscene .gpanel .silk i{background:var(--line)}
.co2 .hwscene .gpanel .svn,
.co2 .hwscene .gpanel .lay h3{color:var(--ink);text-shadow:none}
.co2 .hwscene .gpanel .svd{color:var(--faint)}
.co2 .hwscene .gpanel .ctitle svg{stroke:var(--blue)}
.co2 .hwscene .gpanel .hwsub{color:var(--blue-d1);text-shadow:none}
.co2 .hwscene .gpanel .meter .mv,
.co2 .hwscene .gpanel .plcd,
.co2 .hwscene .gpanel .plcd b{color:var(--blue-d1);text-shadow:none}

/* --- chips, toggles, segmented controls ---------------------------------- */
.co2 .hwscene .gpanel .uchk{border-color:var(--line);color:var(--ink-2);background:#fff;text-shadow:none}
.co2 .hwscene .gpanel .uchk i{border-color:var(--blue-t1);background:#fff}
.co2 .hwscene .gpanel .uchk:hover{border-color:var(--blue-t1);background:var(--blue-t4)}
.co2 .hwscene .gpanel .uchk.on{background:var(--grad);border-color:transparent;color:#fff;text-shadow:0 1px 3px rgba(0,63,104,.4)}
.co2 .hwscene .gpanel .uchk.on i{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.6l4.6 4.6L19 7.2'/%3E%3C/svg%3E") center;border-color:rgba(255,255,255,.85)}
.co2 .hwscene .gpanel .uchk .ut em{opacity:.75}
.co2 .hwscene .gpanel .uchk.on .ut em{opacity:1;color:#fff}
.co2 .hwscene .gpanel .chips-sm .ch{background:#fff;border-color:var(--line);color:var(--ink-2);text-shadow:none}
.co2 .hwscene .gpanel .chips-sm .ch:hover{border-color:var(--blue-t1);background:var(--blue-t4)}
.co2 .hwscene .gpanel .chips-sm .ch.on{background:var(--grad);border-color:transparent;color:#fff;text-shadow:0 1px 3px rgba(0,63,104,.4)}
.co2 .hwscene .gpanel .ptype{background:var(--blue-t4);border:1px solid var(--line)}
.co2 .hwscene .gpanel .ptype button{color:var(--muted);text-shadow:none}
.co2 .hwscene .gpanel .ptype button:hover{color:var(--blue-d1);background:#fff}
.co2 .hwscene .gpanel .ptype button.on{background:var(--grad);color:#fff;text-shadow:0 1px 3px rgba(0,63,104,.4)}
.co2 .hwscene .gpanel .seg{background:var(--blue-t4);border-color:var(--line)}
.co2 .hwscene .gpanel .seg button{color:var(--muted)}
.co2 .hwscene .gpanel .seg button.on{background:var(--grad);color:#fff}
.co2 .hwscene .gpanel .svt,
.co2 .hwscene .gpanel .stp,
.co2 .hwscene .gpanel .svtr{background:var(--soft);border-color:var(--line);color:var(--ink)}
.co2 .hwscene .gpanel .svt:hover{border-color:var(--blue-t1);background:var(--blue-t4)}
.co2 .hwscene .gpanel .svt.on{background:var(--grad);border-color:transparent;color:#fff}
.co2 .hwscene .gpanel .svt.on .svn,
.co2 .hwscene .gpanel .svt.on .svd{color:#fff;text-shadow:0 1px 3px rgba(0,63,104,.4)}
.co2 .hwscene .gpanel .svled{background:var(--blue-t2)}
.co2 .hwscene .gpanel .svt.on .svled{background:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.4)}
.co2 .hwscene .gpanel .svp{background:var(--blue-t4);border-color:var(--line);color:var(--blue-d1)}
.co2 .hwscene .gpanel .svt.on .svp{background:rgba(255,255,255,.92);border-color:transparent;color:var(--blue-d1);text-shadow:none}
.co2 .hwscene .gpanel .svp.free{background:rgba(0,190,188,.12);border-color:rgba(0,190,188,.4);color:var(--teal-d1)}
.co2 .hwscene .gpanel .stp.on{background:var(--blue-t4);border-color:var(--blue-t2)}
.co2 .hwscene .gpanel .stpc button{border-color:var(--line);background:#fff;color:var(--blue-d1)}
.co2 .hwscene .gpanel .stpc button:hover{border-color:var(--blue-t1);background:var(--blue-t4);color:var(--blue-d1)}
.co2 .hwscene .gpanel .svincl{border-color:var(--line)}
.co2 .hwscene .gpanel .bgpled,
.co2 .hwscene .gpanel .xcport{border-color:var(--line);color:var(--ink-2);background:#fff;text-shadow:none}
.co2 .hwscene .gpanel .bgpled:hover,
.co2 .hwscene .gpanel .xcport:hover{border-color:var(--blue-t1);color:var(--blue-d1);background:var(--blue-t4)}
.co2 .hwscene .gpanel .bgpled i{background:var(--blue-t2)}
.co2 .hwscene .gpanel .bgpled.on{background:var(--grad);border-color:transparent;color:#fff}
.co2 .hwscene .gpanel .bgpled.on i{background:#fff;box-shadow:0 0 8px rgba(255,255,255,.9)}
.co2 .hwscene .gpanel .xcport.on{background:var(--grad);border-color:transparent;color:#fff}

/* --- inputs -------------------------------------------------------------- */
.co2 .hwscene .gpanel input[type=text],
.co2 .hwscene .gpanel input[type=email],
.co2 .hwscene .gpanel input[type=tel],
.co2 .hwscene .gpanel .asinp{
  background:#fff;border:1px solid var(--line);color:var(--ink)}
.co2 .hwscene .gpanel input::placeholder,
.co2 .hwscene .gpanel .asinp::placeholder{color:var(--faint)}
.co2 .hwscene .gpanel input:focus,
.co2 .hwscene .gpanel .asinp:focus{border-color:var(--blue-t1);color:var(--ink);
  box-shadow:0 0 0 3px rgba(0,113,185,.12)}
.co2 .hwscene .gpanel .sld input[type=range]::-webkit-slider-thumb{background:var(--grad);border:2px solid #fff;
  box-shadow:0 3px 10px -2px rgba(0,60,110,.5)}
.co2 .hwscene .gpanel .sld .sval{color:var(--blue-d1);background:var(--blue-t4);border:1px solid var(--line);text-shadow:none}

/* --- hardware drawings ---------------------------------------------------- */
.co2 .hwscene .gpanel .bay{border-color:var(--line);background:var(--soft)}
.co2 .hwscene .gpanel .bay .blbl{color:var(--muted);text-shadow:none}
.co2 .hwscene .gpanel .bay.on{border-color:var(--blue-t2);background:var(--blue-t4);color:var(--blue-d1)}
.co2 .hwscene .gpanel .bay .fan svg{stroke:var(--blue-t1)}
.co2 .hwscene .gpanel .swport,
.co2 .hwscene .gpanel .sfpport,
.co2 .hwscene .gpanel .qport{border-color:var(--blue-t2);background:#fff}
.co2 .hwscene .gpanel .swport.on,
.co2 .hwscene .gpanel .sfpport.on,
.co2 .hwscene .gpanel .qport.on{background:var(--grad);border-color:transparent}
.co2 .hwscene .gpanel .outlets button{border-color:var(--line);background:#fff}
.co2 .hwscene .gpanel .outlets button .onum{color:var(--muted)}
.co2 .hwscene .gpanel .outlets button.on{background:var(--grad);border-color:transparent;color:#fff}
.co2 .hwscene .gpanel .outlets button.on .onum{color:#fff}
.co2 .hwscene .gpanel .pstrip{background:var(--soft);border:1px solid var(--line)}
.co2 .hwscene .gpanel .pstrip .ph{color:var(--blue-d1);text-shadow:none}
.co2 .hwscene .gpanel .ipsw{background:var(--blue-t4);border-color:var(--line)}
.co2 .hwscene .gpanel .ipsw i{background:#fff;box-shadow:0 1px 3px rgba(0,40,70,.3)}
.co2 .hwscene .gpanel .ipsw.on{background:var(--grad);border-color:transparent}
.co2 .hwscene .gpanel .ipblk .cells i{background:var(--blue-t4);border-color:var(--line)}
.co2 .hwscene .gpanel .ipblk .cells i.on{background:var(--grad);border-color:transparent}
.co2 .hwscene .gpanel .ipblk .cells i.rz{background:repeating-linear-gradient(45deg,rgba(0,113,185,.24) 0 2px,rgba(0,113,185,.05) 2px 5px)}
.co2 .hwscene .gpanel .ipblk .alloc{border-color:var(--blue-t1)}
.co2 .hwscene .gpanel .blkleg .lg.on{background:var(--grad)}
.co2 .hwscene .gpanel .blkleg .lg.rz{background:repeating-linear-gradient(45deg,rgba(0,113,185,.3) 0 2px,rgba(0,113,185,.07) 2px 4px)}
.co2 .hwscene .gpanel .ip6bar .g{background:var(--blue-t4);color:var(--blue-d1)}
.co2 .hwscene .gpanel .ip6bar .g.fix{background:var(--grad);color:#fff;box-shadow:none}
.co2 .hwscene .gpanel .ip6bar .g.host{background:repeating-linear-gradient(100deg,rgba(0,113,185,.10) 0 6px,rgba(0,113,185,.22) 6px 12px);color:var(--blue-d1)}
.co2 .hwscene .gpanel .ip6bar .sep{color:var(--muted)}
.co2 .hwscene .gpanel .ip6bar .cidr{background:var(--blue-t4);color:var(--blue-d1);border:1px solid var(--line)}
.co2 .hwscene .gpanel .asbadge .nspk{stroke:var(--blue-t1)}
.co2 .hwscene .gpanel .asbadge .nring{border-color:var(--blue-t2)}
.co2 .hwscene .gpanel .asbadge .nring.n2{border-color:var(--blue-t1)}
.co2 .hwscene .gpanel .asbadge .nhub{border-color:#fff;box-shadow:0 0 0 4px var(--blue-t4),0 0 14px rgba(0,190,188,.6)}
.co2 .hwscene .gpanel .asnode.nav .sub{border-color:var(--line);background:var(--blue-t4)}
.co2 .hwscene .gpanel .asflow .t{stroke:var(--blue-t2)}
.co2 .hwscene .gpanel .ipfam+.ipfam,
.co2 .hwscene .gpanel .ipas{border-top-color:var(--line)}
.co2 .hwscene .gpanel .hwcol-sw{border-top-color:var(--line)}
.co2 .hwscene .gpanel .urow{border-bottom-color:var(--line)}
.co2 .hwscene .gpanel .scrw{background:var(--line)}
.co2 .hwscene .gpanel .pmgmt .peth,
.co2 .hwscene .gpanel .pmgmt .pled{background:var(--blue-t2)}
.co2 .hwscene .gpanel .meter .marc{stroke:var(--blue-t3)}
.co2 .hwscene .gpanel .meter .mtick{stroke:var(--blue-t2)}
.co2 .hwscene .gpanel .meter .mneedle{stroke:var(--blue-d1)}
.co2 .hwscene .gpanel .meter .mhub{fill:var(--blue-d1)}
.co2 .hwscene .gpanel .vents,
.co2 .hwscene .gpanel .brk,
.co2 .hwscene .gpanel .brk3 i{background:var(--blue-t4)}
.co2 .hwscene .gpanel .altcha-row{--altcha-color-base:#fff;--altcha-color-text:var(--ink)}
.co2 .hwscene .gpanel .silk span,.co2 .hwscene .gpanel .silk>span{color:var(--blue-d1);text-shadow:none}
.co2 .hwscene .gpanel .silk span+span{color:var(--muted)}
.co2 .hwscene .gpanel .pzl,.co2 .hwscene .gpanel .pnum{color:var(--muted);text-shadow:none}
.co2 .hwscene .gpanel .sld .sval{color:var(--blue-d1);background:var(--blue-t4);border:1px solid var(--line);text-shadow:none}
.co2 .hwscene .gpanel .uchk .ut b,.co2 .hwscene .gpanel .uchk .ut em{color:inherit}
.co2 .hwscene .gpanel .mapstage .silk span{color:var(--blue-d1)}
/* white-card fixes: the hardware drawings were white-on-dark, so their cages,
   LEDs and breakers need brand ink on the white cards */
.co2 .hwscene .gpanel .pcap{color:var(--muted) !important;text-shadow:none}
.co2 .hwscene .gpanel .swport,.co2 .hwscene .gpanel .sfpport,.co2 .hwscene .gpanel .qport{
  border-color:var(--blue-t1);background:var(--blue-t4)}
.co2 .hwscene .gpanel .swport:hover,.co2 .hwscene .gpanel .sfpport:hover,.co2 .hwscene .gpanel .qport:hover{
  border-color:var(--blue);background:#fff}
.co2 .hwscene .gpanel .swport::before{background:repeating-linear-gradient(90deg,var(--blue-t1) 0 2.5px,transparent 2.5px 5.4px)}
.co2 .hwscene .gpanel .swport::after{border-color:var(--blue-t1)}
.co2 .hwscene .gpanel .swport i{background:var(--blue-t2)}
.co2 .hwscene .gpanel .sfpport::before,.co2 .hwscene .gpanel .sfpport::after,
.co2 .hwscene .gpanel .qport::after{border-color:var(--blue-t1)}
.co2 .hwscene .gpanel .qport::before{background:repeating-linear-gradient(90deg,var(--blue-t1) 0 3.5px,transparent 3.5px 8px)}
.co2 .hwscene .gpanel .swport.on,.co2 .hwscene .gpanel .sfpport.on,.co2 .hwscene .gpanel .qport.on{
  background:var(--grad);border-color:transparent;box-shadow:0 6px 16px -6px rgba(0,113,185,.7)}
.co2 .hwscene .gpanel .swport.on::before{background:repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px 4.6px)}
.co2 .hwscene .gpanel .swport.on::after,.co2 .hwscene .gpanel .sfpport.on::before,
.co2 .hwscene .gpanel .sfpport.on::after,.co2 .hwscene .gpanel .qport.on::after{border-color:#fff}
.co2 .hwscene .gpanel .qport.on::before{background:repeating-linear-gradient(90deg,#fff 0 3px,transparent 3px 7px)}
.co2 .hwscene .gpanel .swport.on i{background:#fff;box-shadow:0 0 7px rgba(255,255,255,.9)}
.co2 .hwscene .gpanel .xcport{border-color:var(--blue-t1)}
.co2 .hwscene .gpanel .pstrip .brk{border-color:var(--line);background:var(--blue-t4)}
.co2 .hwscene .gpanel .pstrip .brk::after{background:var(--blue-t1)}
.co2 .hwscene .gpanel .pstrip .brk::before{color:var(--muted)}
.co2 .hwscene .gpanel .brk3 .b3 i{border-color:var(--line);background:var(--blue-t4)}
.co2 .hwscene .gpanel .brk3 .l2{color:var(--blue-d1)}
.co2 .hwscene .gpanel .brk3 .l2 i::after{background:var(--blue)}
.co2 .hwscene .gpanel .brk3 .l3{color:var(--teal-d1)}
.co2 .hwscene .gpanel .pmgmt .plcd{background:var(--blue-t4);border:1px solid var(--line)}
.co2 .hwscene .gpanel .hw-pw .flbl svg{stroke:var(--blue)}
.co2 .hwscene .gpanel .sld input[type=range]{background:var(--blue-t4)}
.co2 .hwscene .gpanel .mappin .pinlbl{box-shadow:0 6px 16px -6px rgba(0,40,70,.4)}

/* rack-ul = holograma 3D mare, CLICKABILA (identica cu cea din rezumatul live) */
.h3d.big{width:266px;height:720px;perspective:1020px;margin:2px auto 0}
.h3d.big .tilt{transform:rotateX(4.5deg) rotateY(25deg)} /* faces right, toward the configurator (owner, 2026-09-06) */
.h3d.big .front{transform:translateZ(60px);padding:13px 12px 12px;border-radius:14px}
.h3d.big .side{width:120px;margin-left:-60px;transform:rotateY(-90deg) translateZ(120px);border-radius:12px} /* left flank — the visible one at +25deg */
.h3d.big .lid{display:none} /* top cap hidden: at +25deg yaw it projected left of the front face as a stray translucent slab (owner, 2026-09-06) */
.h3d.big .orbit{display:none}

.h3d.big .ground{width:330px;margin-left:-180px;bottom:-40px;height:50px}
.h3d.big .rtitle{font-size:9.5px;letter-spacing:.12em;margin-bottom:10px}
.h3d.big .units{gap:2px}
.h3d.big .u{position:relative;display:block;width:100%;flex:1;padding:0;margin:0;cursor:pointer;border-radius:3.5px;
  background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.2);
  transition:background .12s,border-color .12s}
/* bezel de server 1:1 cu referinta Dell EMC: fante cu capete TESITE (SVG),
   oval central cu liniuta si inel, LED rotund in dreapta */
.h3d.big .u{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%2024%22%20preserveAspectRatio%3D%22none%22%3E%3Cg%20fill%3D%22rgba%280%2C63%2C104%2C0.28%29%22%3E%3Cpath%20d%3D%22M8%203h26l-8%206H8z%22%2F%3E%3Crect%20x%3D%2240%22%20y%3D%223%22%20width%3D%2224%22%20height%3D%226%22%2F%3E%3Crect%20x%3D%2270%22%20y%3D%223%22%20width%3D%2224%22%20height%3D%226%22%2F%3E%3Crect%20x%3D%22100%22%20y%3D%223%22%20width%3D%2224%22%20height%3D%226%22%2F%3E%3Crect%20x%3D%22130%22%20y%3D%223%22%20width%3D%2224%22%20height%3D%226%22%2F%3E%3Cpath%20d%3D%22M166%203h26v6h-18z%22%2F%3E%3Cpath%20d%3D%22M8%2015h18l8%206H8z%22%2F%3E%3Crect%20x%3D%2240%22%20y%3D%2215%22%20width%3D%2224%22%20height%3D%226%22%2F%3E%3Crect%20x%3D%2270%22%20y%3D%2215%22%20width%3D%2224%22%20height%3D%226%22%2F%3E%3Crect%20x%3D%22100%22%20y%3D%2215%22%20width%3D%2224%22%20height%3D%226%22%2F%3E%3Crect%20x%3D%22130%22%20y%3D%2215%22%20width%3D%2224%22%20height%3D%226%22%2F%3E%3Cpath%20d%3D%22M192%2015v6h-26z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.08));
  background-repeat:no-repeat,no-repeat;
  background-position:28px center,0 0;
  background-size:calc(100% - 60px) 100%,100% 100%}
.h3d.big .u::after{content:"";position:absolute;right:9px;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;background:rgba(0,63,104,.32)}
.h3d.big .u .ubdg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:16px;height:7.5px;border-radius:5px;background:rgba(0,63,104,.30);pointer-events:none;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.4)}
.h3d.big .u .ubdg::after{content:"";position:absolute;left:3.5px;right:3.5px;top:50%;height:1.7px;
  transform:translateY(-50%);border-radius:1px;background:rgba(255,255,255,.85)}
.h3d.big .u .unum{position:absolute;left:7px;top:50%;transform:translateY(-50%);
  font:800 9.5px/1 var(--mono);letter-spacing:0;color:rgba(255,255,255,.95);pointer-events:none;
  text-shadow:0 1px 3px rgba(0,63,104,.45)}
.h3d.big .u.pv{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%2024%22%20preserveAspectRatio%3D%22none%22%3E%3Cg%20fill%3D%22rgba%280%2C63%2C104%2C0.28%29%22%3E%3Cpath%20d%3D%22M8%203h26l-8%206H8z%22%2F%3E%3Crect%20x%3D%2240%22%20y%3D%223%22%20width%3D%2224%22%20height%3D%226%22%2F%3E%3Crect%20x%3D%2270%22%20y%3D%223%22%20width%3D%2224%22%20height%3D%226%22%2F%3E%3Crect%20x%3D%22100%22%20y%3D%223%22%20width%3D%2224%22%20height%3D%226%22%2F%3E%3Crect%20x%3D%22130%22%20y%3D%223%22%20width%3D%2224%22%20height%3D%226%22%2F%3E%3Cpath%20d%3D%22M166%203h26v6h-18z%22%2F%3E%3Cpath%20d%3D%22M8%2015h18l8%206H8z%22%2F%3E%3Crect%20x%3D%2240%22%20y%3D%2215%22%20width%3D%2224%22%20height%3D%226%22%2F%3E%3Crect%20x%3D%2270%22%20y%3D%2215%22%20width%3D%2224%22%20height%3D%226%22%2F%3E%3Crect%20x%3D%22100%22%20y%3D%2215%22%20width%3D%2224%22%20height%3D%226%22%2F%3E%3Crect%20x%3D%22130%22%20y%3D%2215%22%20width%3D%2224%22%20height%3D%226%22%2F%3E%3Cpath%20d%3D%22M192%2015v6h-26z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,.30));
  border-color:rgba(255,255,255,.65)}
.h3d.big .u.on{border-color:#fff;box-shadow:0 0 11px rgba(125,238,236,.8);
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%2024%22%20preserveAspectRatio%3D%22none%22%3E%3Cg%20fill%3D%22rgba%280%2C113%2C185%2C0.62%29%22%3E%3Cpath%20d%3D%22M8%203h26l-8%206H8z%22%2F%3E%3Crect%20x%3D%2240%22%20y%3D%223%22%20width%3D%2224%22%20height%3D%226%22%2F%3E%3Crect%20x%3D%2270%22%20y%3D%223%22%20width%3D%2224%22%20height%3D%226%22%2F%3E%3Crect%20x%3D%22100%22%20y%3D%223%22%20width%3D%2224%22%20height%3D%226%22%2F%3E%3Crect%20x%3D%22130%22%20y%3D%223%22%20width%3D%2224%22%20height%3D%226%22%2F%3E%3Cpath%20d%3D%22M166%203h26v6h-18z%22%2F%3E%3Cpath%20d%3D%22M8%2015h18l8%206H8z%22%2F%3E%3Crect%20x%3D%2240%22%20y%3D%2215%22%20width%3D%2224%22%20height%3D%226%22%2F%3E%3Crect%20x%3D%2270%22%20y%3D%2215%22%20width%3D%2224%22%20height%3D%226%22%2F%3E%3Crect%20x%3D%22100%22%20y%3D%2215%22%20width%3D%2224%22%20height%3D%226%22%2F%3E%3Crect%20x%3D%22130%22%20y%3D%2215%22%20width%3D%2224%22%20height%3D%226%22%2F%3E%3Cpath%20d%3D%22M192%2015v6h-26z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),linear-gradient(180deg,#fff,#eef9ff)}
.h3d.big .u.on::after{background:var(--blue);box-shadow:0 0 5px rgba(0,113,185,.6)}
.h3d.big .u.on .ubdg{background:var(--blue);box-shadow:0 0 0 1.5px #fff}
.h3d.big .u.on .ubdg::after{background:#fff}
.h3d.big .u.on .unum{color:var(--blue-d1)}
.hrack:hover .float,.hrack:hover .tilt,.hrack:hover .orbit,.hrack:hover .ground{animation-play-state:paused}

.chips-sm{justify-content:center}
.chips-sm .ch{padding:7.5px 12px;font-size:11px;border-radius:9px}
.hwscene .chips-sm .ch{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.6);color:#fff;text-shadow:0 1px 3px rgba(0,63,104,.45);}
.hwscene .chips-sm .ch:hover{border-color:#fff}
.hwscene .chips-sm .ch.on{background:#fff;border-color:#fff;color:var(--blue);text-shadow:none;
  box-shadow:0 8px 20px -8px rgba(0,40,70,.55)}
/* serverul desenat, real: sasiu 2U cu bay-uri PSU hot-swap */
.chassis{position:relative;padding:12px}
.chassis .silk,.swface .silk,.ipface .silk{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px;
  font:700 9.5px/1 var(--mono);letter-spacing:.12em;color:rgba(255,255,255,.95);text-transform:uppercase;text-shadow:0 1px 3px rgba(0,63,104,.45);}
.chassis .silk i{display:inline-block;width:46px;height:5px;border-radius:3px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.4) 0 3px,transparent 3px 7px)}
.scrw{position:absolute;width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.5);
  box-shadow:inset 0 1px 2px rgba(0,40,70,.5)}
.scrw.tl{top:7px;left:7px}.scrw.tr{top:7px;right:7px}.scrw.bl{bottom:7px;left:7px}.scrw.br{bottom:7px;right:7px}
.urow{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:12px;text-align:center;
  padding-bottom:10px;border-bottom:1px dashed rgba(255,255,255,.28)}
.ulab{font:800 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:#fff;text-shadow:0 1px 3px rgba(0,63,104,.45)}
.uchks{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.uchk{display:inline-flex;align-items:center;gap:5.5px;border:1.5px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.09);border-radius:8px;padding:6.5px 9px;font:800 10.5px/1 var(--mono);
  color:#fff;cursor:pointer;transition:all .15s;text-shadow:0 1px 3px rgba(0,63,104,.45)}
.uchk i{width:12px;height:12px;border-radius:3.5px;border:1.5px solid rgba(255,255,255,.75);
  position:relative;flex:none;background:rgba(255,255,255,.06);transition:all .15s}
.uchk:hover{border-color:#fff;background:rgba(255,255,255,.16)}
.uchk.on{background:#fff;color:var(--blue-d1);border-color:#fff;text-shadow:none;
  box-shadow:0 8px 18px -8px rgba(0,40,70,.6)}
.uchk.on i{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.6l4.6 4.6L19 7.2'/%3E%3C/svg%3E") center/9px 9px no-repeat,var(--grad);border-color:transparent;box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.uchk.on i::after{content:none} /* crisp SVG check via background (owner, 2026-09-07) */
.uinp{margin-top:10px}
.uinp[hidden]{display:none}
.h3d.big .rtitle b{color:var(--teal-t2);font-weight:800}
/* mini-terminalul "incluse in orice configuratie" — sub rack, in stilul terminalului mare */
.hw-inc{position:relative;margin-top:10px;padding:0 2px}
.inctop{position:relative;height:36px;margin-bottom:4px}
.inctop svg{position:absolute;inset:0;width:100%;height:100%}
.inctop .t{fill:none;stroke:rgba(255,255,255,.4);stroke-width:1.8;stroke-dasharray:2 6}
.inctop .f{fill:none;stroke:var(--teal-t2);stroke-width:2;stroke-linecap:round;stroke-dasharray:1 8;
  filter:drop-shadow(0 0 4px rgba(125,238,236,.8))}
.inctop .f.d2{animation-delay:.4s}
.inctop .f.d3{animation-delay:.8s}
.inctop .md{fill:rgba(255,255,255,.85)}
.incbadge{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);white-space:nowrap;
  font:800 8px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--blue-d1);
  background:#fff;border-radius:999px;padding:5.5px 10px;box-shadow:0 8px 18px -6px rgba(0,40,70,.6)}
.inchead{display:flex;align-items:center;gap:5.5px;margin-bottom:12px}
.inchead i{width:7.5px;height:7.5px;border-radius:50%;background:var(--teal-t1);flex:none}
.inchead i:nth-child(2){background:var(--blue-t2)}
.inchead i:nth-child(3){background:rgba(255,255,255,.9)}
.inchead svg{width:13px;height:13px;margin-left:5px;flex:none;fill:none;stroke:#fff;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.inchead span{font:800 9px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:#fff;text-shadow:0 1px 3px rgba(0,63,104,.45)}
.hw-inc .ln{display:flex;align-items:center;gap:6px;padding:3px 0;min-width:0}
.hw-inc .pr{flex:none;font:700 9.5px/1 var(--mono);color:rgba(255,255,255,.8)}
.hw-inc .pr b{color:var(--teal-t2);font-weight:700}
.hw-inc .k{font:600 10.5px/1.3 var(--mono);color:#fff;white-space:nowrap;text-shadow:0 1px 3px rgba(0,63,104,.45)}
.hw-inc .dots{flex:1;min-width:8px;border-bottom:1.5px dotted rgba(255,255,255,.4);margin:0 2px;
  transform:translateY(-2px)}
.hw-inc .ln > b{flex:none;font:700 8.5px/1 var(--mono);color:#fff;border:1.5px solid rgba(255,255,255,.65);
  border-radius:7px;padding:4px 7px;letter-spacing:.04em;text-shadow:0 1px 3px rgba(0,63,104,.45)}
.incfoot{display:flex;align-items:center;gap:10px;margin-top:7px;padding-top:8px;
  border-top:1px dashed rgba(255,255,255,.35);
  font:700 9.5px/1.4 var(--mono);letter-spacing:.03em;color:#fff;text-shadow:0 1px 3px rgba(0,63,104,.45)}
.incfoot .ftx{flex:1;min-width:0;white-space:nowrap}
.incfoot .hl{color:var(--teal-t2)}
.incfoot .cur{display:inline-block;width:6px;height:10px;margin-left:4px;vertical-align:-1px;
  background:var(--teal-t2)}
.hw-contact{margin-top:20px}
/* contact panel: moved from the rack column to the middle column, right above
   "Trimite configurația" (owner, 2026-09-06) — title + company/person switch on
   one row, the three fields side by side, ALTCHA underneath */
.hw-mid .hw-contact{margin-top:14px;padding:12px 14px 12px}
.hw-mid .hw-contact .ctop{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:10px}
.hw-mid .hw-contact .ctitle{flex:1;margin-bottom:0}
.hw-mid .hw-contact .seg{width:auto;margin:0;flex:none}
.hw-mid .hw-contact .seg button{flex:none;padding:7px 14px}
.hw-mid .hw-contact .cfields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.hw-mid .hw-contact .fld{margin:0}
.hw-mid .hw-contact .altcha-row{margin-top:10px}
@media (max-width:760px){.hw-mid .hw-contact .cfields{grid-template-columns:1fr}.hw-mid .hw-contact .ctop{flex-direction:column;align-items:stretch}}
.ctitle{display:flex;align-items:center;gap:8px;margin-bottom:9px;
  font:800 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#fff;text-shadow:0 1px 3px rgba(0,63,104,.45)}
.ctitle svg{width:14px;height:14px;flex:none;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round}
.ctitle i{flex:1;height:1px;border-bottom:1px dashed rgba(255,255,255,.35)}
.hw-contact .seg{display:flex;width:100%;margin-bottom:9px}
.hw-contact .seg button{flex:1}
.hw-contact .fld{display:block;margin-bottom:8px}
.hw-contact .flbl{color:rgba(255,255,255,.95);text-shadow:0 1px 3px rgba(0,63,104,.45)}
.hw-contact input{width:100%;padding:11px 14px}
.incstamp{flex:none;transform:rotate(-7deg);
  font:800 9.5px/1 var(--mono);letter-spacing:.09em;color:#fff;border:2px solid rgba(255,255,255,.85);
  border-radius:9px;padding:6px 8px;box-shadow:0 0 0 3px rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);text-shadow:0 1px 3px rgba(0,63,104,.45)}
/* serviciile aditionale — panou compact sub rack (istoric, nefolosit) */
.hw-add{margin-top:26px}

.bays{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.bay{position:relative;display:flex;align-items:center;gap:11px;border:1.5px solid rgba(255,255,255,.4);
  border-radius:12px;background:rgba(255,255,255,.08);padding:9px 11px;cursor:pointer;transition:all .2s;text-align:left}
.bay .fan{flex:none;width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);
  display:grid;place-items:center;background:rgba(255,255,255,.06)}
.bay .fan svg{width:33px;height:33px;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;
  stroke-linejoin:round;transform-origin:50% 50%}
.bay:not(.on) .fan svg{animation-play-state:paused}
.bay .iec{flex:none;width:13px;height:17px;border:1.5px solid rgba(255,255,255,.6);border-radius:3px;position:relative}
.bay .iec::after{content:"";position:absolute;inset:3px 2.5px;background:linear-gradient(180deg,rgba(255,255,255,.5),transparent)}
.bay .bled{flex:none;width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.3);
  box-shadow:inset 0 0 3px rgba(0,63,104,.45)}
.bay .blbl{font:700 9.5px/1.5 var(--mono);letter-spacing:.05em;color:#fff;text-transform:uppercase;text-shadow:0 1px 3px rgba(0,63,104,.45);}
.bay.on{border-color:#fff;background:linear-gradient(165deg,rgba(255,255,255,.24),rgba(255,255,255,.10));
  box-shadow:0 14px 30px -14px rgba(0,40,70,.55),0 0 22px rgba(125,238,236,.25)}
.bay.on .bled{background:#0f8a44;
  box-shadow:0 0 0 2.5px rgba(255,255,255,.95),0 0 18px 5px rgba(20,150,80,.9)}
.bay:not(.on){border-style:dashed;opacity:.85}
.bay:not(.on) .fan,.bay:not(.on) .iec{opacity:.4}
.bay:not(.on)::after{content:"+ adaugă";position:absolute;right:9px;top:7px;font:700 8px/1 var(--mono);
  color:#fff;letter-spacing:.06em;text-transform:uppercase;opacity:.9}
.bay.fixed{cursor:default}
.bay .psw{margin-left:auto;pointer-events:none;flex:none}
.bay:not(.on) .psw{opacity:1}
.hw-pw{margin-top:2px}
.hw-pw .flbl{color:rgba(255,255,255,.85);margin-bottom:6px}
.hw-pw .flbl svg{stroke:#fff}
.hw-pw .sval{min-width:84px}
/* PSU bays + the two power sliders in ONE compact 2x2 group (owner, 2026-09-06):
   bays ~40% of the old size stacked on the left, "Putere pe sursă" + "Consum
   energie" to their right; the whole group is no wider than one old bay */
.pwgrid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,10fr);gap:10px 12px;align-items:stretch;max-width:420px;margin-bottom:10px}
.pwgrid .bays{grid-template-columns:1fr;gap:8px;margin:0}
.pwgrid .bay{gap:7px;padding:6px 8px;min-height:0}
.pwgrid .bay .fan{width:24px;height:24px}
.pwgrid .bay .fan svg{width:19px;height:19px}
.pwgrid .bay .iec{display:none}
.pwgrid .bay .bled{width:8px;height:8px}
.pwgrid .bay .blbl{font-size:8px;line-height:1.35;letter-spacing:.04em}
.pwgrid .bay .psw{width:30px;height:16px}
.pwgrid .bay .psw i{width:11px;height:11px}
.pwgrid .bay .psw.on i{left:17px}
.pwgrid .pwcol{display:flex;flex-direction:column;justify-content:space-between;gap:8px;min-width:0}
.pwgrid .hw-pw{margin:0}
.pwgrid .hw-pw .flbl{font-size:9px;letter-spacing:.08em;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pwgrid .sld{gap:8px}
.pwgrid .sld .sval{min-width:56px;font-size:12px;padding:6px 6px}
@media (max-width:560px){.pwgrid{grid-template-columns:1fr;max-width:none}}
/* PSU group + the switch faceplate side by side INSIDE the chassis (owner,
   2026-09-06: "pune switch-ul în dreapta lor"); the two readouts share one line */
.hwrow{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:12px 0;align-items:stretch}
.hwcol-psu{padding-right:22px}
.hwcol-sw{position:relative;padding-left:22px}
/* the separator between the two halves: a soft vertical line centred in the gap (owner, 2026-09-06) */
.hwcol-sw::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:1px;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.6) 18%,rgba(255,255,255,.6) 82%,rgba(255,255,255,0))}
.hwrow .pwgrid{margin-bottom:0;max-width:none}
.hwrow .swface{padding:0;background:none;border:0;box-shadow:none}
.hwrow .swface .silk{margin-bottom:10px}
/* tighter faceplate so 1G+10G+25G share row 1 and 40G…XC + BGP share row 2 */
.hwrow .swrow2{gap:9px 8px}
.hwrow .pzone .prow{gap:4px}
.hwrow .swport{width:36px;height:36px}
.hwrow .swport::before{top:11px;width:23px;height:6px}
.hwrow .swport::after{width:13px;height:7px}
.hwrow .sfpport{width:52px;height:29px}
.hwrow .sfpport::before{width:27px}
.hwrow .qport{width:58px;height:31px}
.hwrow .qport::before{width:31px}
.hwrow .bgpled{padding:6px 9px;font-size:9.5px;height:31px;box-sizing:border-box}
.hwrow .swbgp{align-self:flex-start} /* LEDs on the XC cage line, not on its label line (owner, 2026-09-06) */
.hwsubs{display:flex;flex-wrap:wrap;justify-content:center;gap:0 28px}
@media (max-width:1180px){.hwrow{grid-template-columns:1fr}.hwcol-psu{padding-right:0}.hwcol-sw{padding-left:0;padding-top:12px;border-top:1px dashed rgba(255,255,255,.28)}.hwcol-sw::before{display:none}}

/* switch-ul desenat, real: faceplate 1U cu porturi RJ45, cage SFP si LED-uri BGP */
.hw-mid{display:flex;flex-direction:column}
.swface{position:relative;padding:10px 12px 11px}
.swface .silk{font-size:9.5px;margin-bottom:10px}
.swface .vents{display:none}
.swrow2{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 12px}
.pzones{display:contents}
.pzbreak{flex-basis:100%;height:0}
.pzone{display:flex;flex-direction:column;gap:5px;min-width:0}
.pzone .pzl{text-align:center;font:800 9.5px/1 var(--mono);letter-spacing:.1em;color:#fff;
  text-transform:uppercase;padding-bottom:3px;border-bottom:1.5px solid rgba(255,255,255,.5)}
.pzone .prow{display:flex;gap:5px}
.pcell{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.pcell .pnum,.sfpcell .pnum{font:800 9px/1 var(--mono);letter-spacing:.05em;color:#fff;text-shadow:0 1px 3px rgba(0,63,104,.45);}
.swport{position:relative;width:40px;height:40px;border:2.5px solid rgba(255,255,255,.85);
  border-radius:6px;background:rgba(255,255,255,.09);cursor:pointer;padding:0;transition:all .15s}
.swport i{position:absolute;top:3px;width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.4)}
.swport i.l1{left:4px}.swport i.l2{right:4px}
.swport::before{content:"";position:absolute;left:50%;top:13px;transform:translateX(-50%);width:26px;height:7px;
  border-radius:1px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.85) 0 2.5px,transparent 2.5px 5.4px)}
.swport::after{content:"";position:absolute;left:50%;bottom:3px;transform:translateX(-50%);width:15px;height:8px;
  border:2px solid rgba(255,255,255,.75);border-top:0;border-radius:0 0 4px 4px}
.swport:hover{border-color:#fff;background:rgba(255,255,255,.2)}
.swport.on{background:#fff;border-color:#fff;box-shadow:0 0 16px rgba(125,238,236,.75)}
.swport.on::before{background:repeating-linear-gradient(90deg,var(--blue) 0 2px,transparent 2px 4.6px)}
.swport.on::after{border-color:var(--blue-t1)}
.swport.on i{background:var(--teal);box-shadow:0 0 7px rgba(0,190,188,.9)}
.swface.alt .swport:not(.on),.swface.alt .sfpport:not(.on),.swface.alt .qport:not(.on){opacity:.4}
/* cage SFP+ / SFP28 (10G / 25G) */
.sfpport{position:relative;width:58px;height:31px;border:2.5px solid rgba(255,255,255,.85);border-radius:5px;
  background:rgba(255,255,255,.08);cursor:pointer;padding:0;transition:all .15s}
.sfpport::before{content:"";position:absolute;left:6px;top:50%;transform:translateY(-50%);width:31px;height:12px;
  border:2px solid rgba(255,255,255,.85);border-radius:2.5px}
.sfpport::after{content:"";position:absolute;right:6px;top:50%;transform:translateY(-50%);width:11px;height:12px;
  border:2px solid rgba(255,255,255,.85);border-left:0;border-radius:0 7px 7px 0}
.sfpport:hover{border-color:#fff;background:rgba(255,255,255,.18)}
.sfpport.on{background:#fff;border-color:#fff;box-shadow:0 0 16px rgba(125,238,236,.75)}
.sfpport.on::before{border-color:var(--blue)}
.sfpport.on::after{border-color:var(--blue-t1)}
/* cage QSFP (40G / 100G) */
.qport{position:relative;width:68px;height:33px;border:2.5px solid rgba(255,255,255,.85);border-radius:5px;
  background:rgba(255,255,255,.08);cursor:pointer;padding:0;transition:all .15s}
.qport::before{content:"";position:absolute;left:7px;top:50%;transform:translateY(-50%);width:38px;height:14px;
  border-radius:2px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.85) 0 3.5px,transparent 3.5px 8px)}
.qport::after{content:"";position:absolute;right:7px;top:50%;transform:translateY(-50%);width:9px;height:14px;
  border:2px solid rgba(255,255,255,.85);border-radius:2px}
.qport:hover{border-color:#fff;background:rgba(255,255,255,.18)}
.qport.on{background:#fff;border-color:#fff;box-shadow:0 0 18px rgba(125,238,236,.8)}
.qport.on::before{background:repeating-linear-gradient(90deg,var(--blue) 0 3px,transparent 3px 7px)}
.qport.on::after{border-color:var(--blue-t1)}
.sfpcell{display:flex;flex-direction:column;align-items:center;gap:4px;flex:none}
/* XC cage carries its label; a provider box slides in beside it when chosen (owner, 2026-09-07) */
.xcport{position:relative;display:inline-flex;align-items:center;gap:6px;height:31px;padding:0 8px 0 7px;border:2.5px dashed rgba(255,255,255,.8);border-radius:6px;background:transparent;cursor:pointer;font:800 9.5px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:#fff;white-space:nowrap;text-shadow:0 1px 3px rgba(0,63,104,.45)}
.xcport .xcg{width:20px;height:11px;border:2px solid rgba(255,255,255,.85);border-radius:3px;flex:none;position:relative}
.xcport .xcg::after{content:"";position:absolute;right:-6px;top:50%;width:6px;height:5px;transform:translateY(-50%);border:2px solid rgba(255,255,255,.85);border-left:0;border-radius:0 3px 3px 0}
.xcport:hover{border-color:#fff}
.xccell{flex-direction:row;align-items:center;gap:8px}
.xccell .xcinp{height:31px;width:84px;flex:none;padding:0 8px;margin:0;font:700 11px/1 var(--mono);border-radius:6px;box-sizing:border-box} /* narrow enough for XC + box + BGP4/BGP6 on one line (owner, 2026-09-07) */
.xccell .xcinp[hidden]{display:none}
.xcport.on{background:#fff;border-color:#fff;border-style:solid;color:var(--blue-d1);text-shadow:none;box-shadow:0 0 16px rgba(125,238,236,.75)}
.xcport.on .xcg,.xcport.on .xcg::after{border-color:var(--blue)}
.swbgp{flex:none;display:flex;flex-direction:row;gap:8px}
.bgpled{display:inline-flex;align-items:center;gap:7px;border:2px solid rgba(255,255,255,.6);border-radius:9px;
  background:rgba(255,255,255,.09);padding:9px 12px;cursor:pointer;font:800 10.5px/1 var(--mono);color:#fff;transition:all .18s}
.bgpled i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.35);transition:all .18s}
.bgpled:hover{border-color:#fff}
.bgpled.on{border-color:#fff;background:rgba(255,255,255,.14)}
.bgpled.on i{background:var(--teal-t1);box-shadow:0 0 9px rgba(125,238,236,.95)}
/* consumul, pe scena */

.hwscene .sld input[type=range]{background:linear-gradient(90deg,#fff 0%,var(--teal-t2) var(--p,50%),rgba(255,255,255,.25) var(--p,50%))}
.hwscene .sld input[type=range]::-webkit-slider-thumb{border-color:#fff;background:var(--teal);
  box-shadow:0 3px 10px rgba(0,40,70,.5),0 0 0 5px rgba(255,255,255,.25)}
.hwscene .sld .sval{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.45);color:#fff;min-width:78px}
/* PDU-ul vertical, real: tip + ceas de consum + prize C13 */
.hw-pdu{display:flex;flex-direction:column}
.pmgmt{display:flex;align-items:center;gap:7px;margin-bottom:6px}
.peth{width:15px;height:12px;border:1.5px solid rgba(255,255,255,.6);border-radius:2.5px;position:relative;flex:none}
.peth::after{content:"";position:absolute;left:3px;right:3px;bottom:1.5px;height:3px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.7) 0 1.5px,transparent 1.5px 3px)}
.plcd{flex:1;text-align:center;font:600 9px/1 var(--mono);letter-spacing:.05em;color:rgba(255,255,255,.85);
  background:rgba(255,255,255,.10);border:1.5px solid rgba(255,255,255,.45);border-radius:7px;padding:6px 3px}
.plcd b{font-size:12.5px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.pled{width:10px;height:10px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 0 2px rgba(255,255,255,.95),0 0 14px 4px rgba(255,181,69,.95);
  flex:none}
.pcap{margin:0 0 8px;text-align:center;white-space:pre-line;font:800 9px/1.5 var(--mono);letter-spacing:.06em;color:#fff !important;text-shadow:0 1px 3px rgba(0,63,104,.55);
  color:rgba(255,255,255,.92);text-transform:uppercase;text-shadow:0 1px 3px rgba(0,63,104,.45);}
.pdurow{display:flex;gap:8px;flex:1;min-height:0}
.pstrip{flex:1;display:flex;flex-direction:column;gap:5px;min-width:0;
  border:1.5px solid rgba(255,255,255,.5);border-radius:11px;padding:6px 5px 5px;
  background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.06));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.pstrip .ph{display:flex;align-items:center;justify-content:center;gap:5px;
  font:800 9px/1 var(--mono);letter-spacing:.08em;color:#fff;text-transform:uppercase;white-space:nowrap;text-shadow:0 1px 3px rgba(0,63,104,.45);}
.pstrip .ph i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.9),0 0 9px 2px rgba(255,181,69,.95)}
.pstrip .brk{height:13px;border:1.5px solid rgba(255,255,255,.55);border-radius:4px;position:relative;
  margin:0 3px;background:rgba(255,255,255,.06)}
.pstrip .brk::after{content:"";position:absolute;left:50%;top:2px;bottom:2px;width:11px;
  transform:translateX(-50%);background:rgba(255,255,255,.75);border-radius:2px}
.pstrip .brk::before{content:"ON";position:absolute;right:3.5px;top:50%;transform:translateY(-50%);
  font:700 5.5px/1 var(--mono);color:rgba(255,255,255,.7);letter-spacing:.05em}
/* trifazic: 3 breakere de faza + fazele pe prize */
.brk3{display:none;gap:5px;margin:0 3px}
.brk3 .b3{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  font:800 6.5px/1 var(--mono);letter-spacing:.04em}
.brk3 .b3 i{display:block;width:100%;height:12px;border:1.5px solid rgba(255,255,255,.6);border-radius:4px;
  position:relative;background:rgba(255,255,255,.06)}
.brk3 .b3 i::after{content:"";position:absolute;left:50%;top:2px;bottom:2px;width:8px;
  transform:translateX(-50%);border-radius:2px}
.brk3 .l1{color:var(--amber)}
.brk3 .l1 i::after{background:var(--amber)}
.brk3 .l2{color:#fff}
.brk3 .l2 i::after{background:#fff}
.brk3 .l3{color:var(--teal-t1)}
.brk3 .l3 i::after{background:var(--teal-t1)}
.pdurow.trif .pstrip.a .brk{display:none}
.pdurow.trif .brk3{display:flex}
.plbl{display:none;pointer-events:none}
.pdurow.trif .outl button{border-left:3.5px solid rgba(255,255,255,.4)}
.pdurow.trif .outl button .plbl{display:block;position:absolute;left:6px;top:50%;transform:translateY(-50%);
  font:800 7.5px/1 var(--mono)}
.pdurow.trif .outl button.ph1{border-left-color:var(--amber)}
.pdurow.trif .outl button.ph2{border-left-color:rgba(255,255,255,.95)}
.pdurow.trif .outl button.ph3{border-left-color:var(--teal-t1)}
.plbl.p1{color:var(--amber)}
.plbl.p2{color:#fff}
.plbl.p3{color:var(--teal-t1)}
/* feed-uri individuale: doar A sau doar B (click pe capul benzii) */
.pdurow:not(.single) .pstrip .ph{cursor:pointer;border-radius:7px;padding:3px 4px;margin:-3px -4px 0;
  transition:background .15s}
.pdurow:not(.single) .pstrip .ph:hover{background:rgba(255,255,255,.14)}
.pstrip.down{opacity:.5;border-style:dashed}
.pstrip.down .ph i{background:rgba(255,255,255,.35);box-shadow:none;animation:none}
.pstrip.down .ph::after{content:"OFF";font:800 6.5px/1 var(--mono);color:rgba(255,255,255,.85);
  border:1px solid rgba(255,255,255,.55);border-radius:4px;padding:2px 3.5px;margin-left:5px}
.pstrip.down .outlets button{pointer-events:none}
/* panoul Adrese IP & rutare prin AS-ul NAV */
.ipface{padding:11px 12px 10px}
.ipfam{display:flex;align-items:flex-start;gap:11px;padding:7px 0}
.ipfam+.ipfam{border-top:1px dashed rgba(255,255,255,.25)}
.ipsw{position:relative;flex:none;width:40px;height:21px;border-radius:999px;cursor:pointer;padding:0;
  background:rgba(255,255,255,.16);border:1.5px solid rgba(255,255,255,.55);transition:all .2s}
.ipsw i{position:absolute;left:2px;top:50%;transform:translateY(-50%);width:14px;height:14px;border-radius:50%;
  background:#fff;box-shadow:0 1px 4px rgba(0,40,70,.45);transition:left .2s}
.ipsw:hover{border-color:#fff}
.ipsw.on{background:linear-gradient(90deg,rgba(255,255,255,.95),var(--teal-t2));border-color:#fff;
  box-shadow:0 0 12px rgba(125,238,236,.45)}
.ipsw.on i{left:21px;background:var(--blue)}
.iplbl{flex:none;width:36px;font:800 11.5px/1 var(--mono);color:#fff}
.ipchips{flex:1;justify-content:flex-start;gap:6px}
.ipfam .ipsw,.ipfam .iplbl{margin-top:2px}
.ipmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.ipfam.off .ipmain{opacity:.4;pointer-events:none;filter:saturate(.5)}
/* blocul vizual de adrese IPv4: celulele se aprind */
.ipblk{display:flex;align-items:center;gap:12px}
.ipblk .cellwrap{position:relative;flex:1;min-width:0}
.ipblk .cells{display:grid;grid-template-columns:repeat(8,1fr);grid-auto-rows:10.5px;gap:3px}
.ipblk .cells i{border-radius:3px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  transition:background .3s,border-color .3s,box-shadow .3s,opacity .3s;
  transition-delay:min(calc(var(--i)*14ms),840ms)}
.ipblk .cells i.hide{display:none}
.ipblk .cells i.on{background:linear-gradient(135deg,#fff,var(--teal-t2));border-color:#fff;
  box-shadow:0 0 8px rgba(125,238,236,.75)}
.ipblk .cells i.rz{background:repeating-linear-gradient(45deg,rgba(255,255,255,.30) 0 2px,rgba(255,255,255,.06) 2px 5px);
  border-color:rgba(255,255,255,.5)}
.ipblk .cells i.out{opacity:.28}
.ipblk .alloc{position:absolute;left:-3px;top:-3px;border:1.5px dashed rgba(255,255,255,.8);
  border-radius:7px;pointer-events:none;transition:all .35s ease;z-index:1}
.ipblk .alloc.s4{width:calc((100% - 21px)/2 + 15px);height:16.5px}
.ipblk .alloc.s8{width:calc(100% + 6px);height:16.5px}
.ipblk .alloc.s16{width:calc(100% + 6px);height:30px}
.ipblk .alloc.s32{width:calc(100% + 6px);height:30px}
.ipblk .alloc.s64{width:calc(100% + 6px);height:57px}
.blkleg{flex:none;display:flex;flex-direction:column;gap:5px;font:700 9.5px/1.25 var(--mono);
  letter-spacing:.05em;color:#fff;text-transform:uppercase;text-shadow:0 1px 3px rgba(0,63,104,.45);}
.blkleg b{font-size:17px;color:#fff}
.blkleg .row{display:flex;align-items:center;gap:5px;overflow:visible} /* site-bleed: legacy grid `.row{overflow:hidden}` */
.blkleg .lg{width:9px;height:9px;border-radius:2.5px;flex:none}
.blkleg .lg.on{background:linear-gradient(135deg,#fff,var(--teal-t2));box-shadow:0 0 6px rgba(125,238,236,.7)}
.blkleg .lg.rz{background:repeating-linear-gradient(45deg,rgba(255,255,255,.35) 0 2px,rgba(255,255,255,.08) 2px 4px);
  border:1px solid rgba(255,255,255,.5)}
/* prefixul IPv6 holografic */
.ip6bar{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.ip6bar .g{font:800 11px/1 var(--mono);letter-spacing:.02em;border-radius:6px;padding:6px 7px;border:1px solid transparent;
  transition:background-color .3s,color .3s,box-shadow .3s,border-color .3s} /* fixed box: the /48 host chip used to grow by its border (owner bug, 2026-09-06) */
.ip6bar .g.fix{background:#fff;color:var(--blue-d1);box-shadow:0 5px 12px -5px rgba(0,40,70,.6)}
.ip6bar .g.host{background:linear-gradient(100deg,rgba(255,255,255,.14) 25%,rgba(255,255,255,.45) 50%,rgba(255,255,255,.14) 75%);
  background-size:220% 100%;color:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.4)}
.ip6bar .sep{font:800 12px/1 var(--mono);color:rgba(255,255,255,.95)}
.ip6bar .cidr{font:800 12px/1 var(--mono);color:#fff;background:rgba(255,255,255,.16);
  border:1.5px solid rgba(255,255,255,.6);border-radius:6px;padding:5.5px 8px}
.ip6note{font:700 9.5px/1.4 var(--mono);letter-spacing:.07em;color:rgba(255,255,255,.95);text-transform:uppercase;text-shadow:0 1px 3px rgba(0,63,104,.45);}
.ip6note b{color:#fff;font-size:11.5px}
/* diagrama BGP: prefixele tale -> AS NAV -> internet */
.asroute{display:flex;align-items:center;gap:8px;margin:0;min-height:52px;padding:0 0 24px} /* the row hugs the title (owner, 2026-09-07: "salt mai sus toată linia") */
.asnode{position:relative;flex:none;display:flex;align-items:center;justify-content:center}
.asnode .ttl{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;
  font:800 9px/1 var(--mono);letter-spacing:.06em;color:#fff;text-transform:uppercase;
  text-align:center;text-shadow:0 1px 3px rgba(0,63,104,.45)}
.asnode.you{flex:none;min-width:0;justify-content:flex-start} /* the customer node IS the prefix chooser and takes the left line's place (owner, 2026-09-06); its natural width wins, the right line takes the rest */
.aschips{display:flex;flex-wrap:nowrap;gap:6px;align-items:center;justify-content:flex-start}
@media (max-width:560px){.aschips{flex-wrap:wrap}.asnode.you{flex:1 1 100%}}
#chAS .ch.asnone{display:inline-flex;align-items:center;padding:7px;cursor:pointer} /* check only, no text */
#chAS .ch{display:inline-flex;align-items:center;gap:6px}
#chAS .ch i{position:relative;width:12px;height:12px;border-radius:3.5px;border:1.5px solid rgba(255,255,255,.75);background:transparent;flex:none}
#chAS .ch.on i{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.6l4.6 4.6L19 7.2'/%3E%3C/svg%3E") center/9px 9px no-repeat,var(--grad);border-color:transparent;box-shadow:0 0 0 1px rgba(255,255,255,.35)}
#chAS .ch.asnone.on i{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.6l4.6 4.6L19 7.2'/%3E%3C/svg%3E") center/9px 9px no-repeat,var(--grad);border-color:transparent;box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.asnode.you .ttl{bottom:100%;margin-bottom:9px}
.plates{display:flex;flex-direction:column;gap:3px;align-items:center;min-height:20px;justify-content:center}
.plates i{display:block;font:800 9.5px/1 var(--mono);font-style:normal;color:var(--blue-d1);background:#fff;
  border-radius:5px;padding:4px 8px;box-shadow:0 5px 12px -5px rgba(0,40,70,.6);white-space:nowrap;
  max-width:120px;overflow:hidden;text-overflow:ellipsis}
.plates i.none{background:transparent;color:rgba(255,255,255,.9);border:1.5px dashed rgba(255,255,255,.6);
  box-shadow:none}
.asnode.nav{min-width:76px} /* the starburst carries AS6718 (owner, 2026-09-06); the hexagon is gone */
.asnode.nav .ttl{top:100%;margin-top:2px}
.asnode.net{min-width:72px}
.asnode.net .ttl{top:100%;margin-top:5px}
.asnode.net .sub{position:absolute;left:50%;transform:translateX(-50%);top:100%;margin-top:17px;white-space:nowrap}
.netviz{position:relative;width:76px;height:60px;display:grid;place-items:center}
.netviz>svg{position:absolute;left:50%;top:50%;width:66px;height:66px;margin:-33px 0 0 -33px}
@keyframes netspin{to{transform:rotate(360deg)}}
.netviz .nspk{stroke:rgba(255,255,255,.45);stroke-width:1.2}
.netviz .nd1{fill:#fff}
.netviz .nd2{fill:var(--teal-t1)}
.netviz .nd3{fill:var(--teal-t2)}
.netviz .nring{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;
  border:1.5px solid rgba(255,255,255,.75);border-radius:50%}
.netviz .cap{position:relative;z-index:1;font:800 10.5px/1 var(--mono);color:var(--blue-d1);
  background:#fff;border-radius:7px;padding:5px 7px;box-shadow:0 6px 16px -6px rgba(0,40,70,.65)}
.asnode .sub{font:700 8px/1.4 var(--mono);letter-spacing:.06em;color:rgba(255,255,255,.95);
  text-transform:uppercase;text-align:center;text-shadow:0 1px 3px rgba(0,63,104,.45);}
.asflow{flex:1;height:30px;min-width:26px} /* longer, bolder dashes (owner, 2026-09-06) */
.asflow .t{fill:none;stroke:rgba(255,255,255,.42);stroke-width:3;stroke-dasharray:7 6;stroke-linecap:round}
.asflow .f{fill:none;stroke:var(--teal-t2);stroke-width:3.2;stroke-linecap:round;stroke-dasharray:3 10;
  filter:drop-shadow(0 0 5px rgba(125,238,236,.9))}
.asroute.off .f{display:none}
.asroute.off .asnode.net .sub,.asroute.off .asnode.net .pill{opacity:.75}
.ipas{padding-top:8px;border-top:1px dashed rgba(255,255,255,.25);display:flex;flex-direction:column;gap:6px}
.iplbl2{font:800 10.5px/1.4 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:#fff;text-shadow:0 1px 3px rgba(0,63,104,.45);}
.asinp{border:1.5px solid rgba(255,255,255,.55);background:rgba(255,255,255,.12);border-radius:9px;
  padding:9px 11px;font:600 12px/1.3 var(--mono);color:#fff;outline:none;width:100%}
.asinp::placeholder{color:rgba(255,255,255,.72)}
.ipas .asinp{margin-top:10px;width:100%;box-sizing:border-box}
.asinp:focus{border-color:#fff;background:rgba(255,255,255,.2)}
.asinp[hidden]{display:none}
.pstrip .outlets{flex:1;gap:5px}
.pstrip .outlets button{min-height:30px;border-radius:7px}
.pstrip .outlets button .onum{right:4px;top:2.5px;font-size:7px}
.pdurow.single .pstrip.b{display:none}
.ptype{display:flex;gap:4px;margin-bottom:6px}
.ptype button{flex:1;border:1.5px solid rgba(255,255,255,.7);background:rgba(255,255,255,.16);border-radius:7px;color:#fff;font-weight:800;text-shadow:0 1px 3px rgba(0,63,104,.5);
  padding:6px 2px;font:700 8px/1 var(--mono);letter-spacing:.03em;color:#fff;cursor:pointer;
  text-transform:uppercase;transition:all .18s;white-space:nowrap}
.ptype button:hover{border-color:#fff}
.ptype button.on{background:#fff;border-color:#fff;color:var(--blue);box-shadow:0 6px 14px -6px rgba(0,40,70,.6)}
.hw-pdu .pduback{flex:1;display:flex;flex-direction:column;padding:12px 10px}
.meter{position:relative;margin-bottom:9px;padding-bottom:13px}
.meter svg{display:block;width:100%;height:auto}
.meter .marc{fill:none;stroke:rgba(255,255,255,.3);stroke-width:6.5;stroke-linecap:round}
.meter .mtick{stroke:rgba(255,255,255,.7);stroke-width:1.6;stroke-linecap:round}
.meter .mneedle{stroke:#fff;stroke-width:2.6;stroke-linecap:round;transition:transform .35s cubic-bezier(.2,.7,.2,1);
  filter:drop-shadow(0 0 4px rgba(125,238,236,.8))}
.meter .mhub{fill:#fff}
.meter .mv{position:absolute;left:0;right:0;bottom:-1px;text-align:center;font:800 12px/1 var(--mono);color:#fff;
  font-variant-numeric:tabular-nums}
.outlets{display:grid;grid-template-columns:1fr;grid-auto-rows:1fr;gap:7px;flex:1}
/* outlets: IEC C13 like a real rack PDU (owner, 2026-09-07) — bevelled face plate,
   chamfered white rim, dark recess with the three pin slots (E top, L/N bottom);
   static shading only */
.outlets button{position:relative;min-height:30px;border:1.5px solid rgba(255,255,255,.55);border-radius:8px;cursor:pointer;padding:0;
  background:linear-gradient(165deg,rgba(255,255,255,.26),rgba(255,255,255,.08));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(0,40,70,.28),0 2px 4px rgba(0,40,70,.28);
  transition:border-color .15s,box-shadow .15s,background-color .15s}
.outlets button::before{content:"";position:absolute;left:50%;top:50%;width:28px;height:19px;transform:translate(-50%,-50%);
  background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.5));
  clip-path:polygon(17% 0,83% 0,100% 30%,100% 100%,0 100%,0 30%)}
.outlets button::after{content:"";position:absolute;left:50%;top:50%;width:24px;height:15px;transform:translate(-50%,-50%);
  clip-path:polygon(17% 0,83% 0,100% 30%,100% 100%,0 100%,0 30%);
  background:
    linear-gradient(90deg,transparent 4.5px,rgba(255,255,255,.85) 4.5px 7px,transparent 7px 17px,rgba(255,255,255,.85) 17px 19.5px,transparent 19.5px) 0 8px/24px 5px no-repeat,
    linear-gradient(rgba(255,255,255,.85),rgba(255,255,255,.85)) 10.75px 2.5px/2.5px 4.5px no-repeat,
    linear-gradient(180deg,var(--blue),var(--blue-d1))} /* brand blue recess (owner, 2026-09-07) */
.outlets button:hover{border-color:#fff}
.outlets button.on{background:linear-gradient(165deg,rgba(255,255,255,.38),rgba(255,255,255,.16));border-color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 12px rgba(125,238,236,.55),0 2px 4px rgba(0,40,70,.28)}
.outlets button.on::before{background:#fff}
.outlets button.on::after{background:
    linear-gradient(90deg,transparent 4.5px,#fff 4.5px 7px,transparent 7px 17px,#fff 17px 19.5px,transparent 19.5px) 0 8px/24px 5px no-repeat,
    linear-gradient(#fff,#fff) 10.75px 2.5px/2.5px 4.5px no-repeat,
    linear-gradient(180deg,var(--teal),var(--teal-d1))} /* lit = brand teal */
.outlets button .onum{right:4px;top:2.5px;font-size:7px}
.outlets button .onum{position:absolute;right:5px;top:3px;font:700 7.5px/1 var(--mono);color:rgba(255,255,255,.6)}
.outlets button .ochk{display:none;position:absolute;left:5px;top:5px;width:16px;height:16px;border-radius:50%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.6l4.6 4.6L19 7.2'/%3E%3C/svg%3E") center/10px 10px no-repeat,var(--grad);box-shadow:0 0 0 1.5px #fff,0 3px 8px -2px rgba(0,40,70,.55),0 0 10px rgba(125,238,236,.55)}
.outlets button.on .ochk{display:block}
/* harta 3D — locatia colocarii, sub server (alta culoare: uscat deschis + grila albastra) */
.hw-map{margin-top:14px;padding:10px 14px 11px}
.hw-map .silk{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;
  font:700 8.5px/1 var(--mono);letter-spacing:.12em;color:rgba(255,255,255,.78);text-transform:uppercase}
/* map column + IP & routing column in ONE panel (owner, 2026-09-06: "mută tot din
   Adrese IP & rutare în Locație colocare"); the map is flat (no tilt) and drawn
   from a real Romania outline so it reads as a map — pins are positioned in % of
   the SVG box, so they stay on the cities at any size */
.maprow{display:grid;grid-template-columns:280px minmax(0,1fr);gap:8px 24px;align-items:start}
.mapcol .silk{font-size:8px;letter-spacing:.09em;white-space:nowrap}
.mapstage{position:relative;padding:4px 0 8px}
.mapbox{position:relative;width:100%;aspect-ratio:320/234}
.mapbox svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 10px 18px rgba(0,40,70,.4))}
.mcarp{fill:none;stroke:rgba(0,113,185,.45);stroke-width:1.6;stroke-dasharray:3 3;stroke-linecap:round}
.mapbox .mappin .pinlbl{font-size:9px;padding:6px 8px}
.mapbox #pinBuc .pinlbl{left:auto;right:14px}
/* pins — quiet when inactive, lift on hover, "wow" when selected (owner,
   2026-09-06). Transitions + ONE-SHOT pops only (they run once, on click):
   nothing animates at idle, so the colocare page stays lean. */
.mapbox .mappin .pinlbl{transition:transform .18s ease,opacity .18s ease,background-color .18s ease,box-shadow .18s ease}
.mapbox .mappin .head,.mapbox .mappin .leg{transition:opacity .18s ease,background-color .18s ease,box-shadow .18s ease}
/* inactive: short faint leg, small white dot, ghost label (sits lower on the map) */
.mapbox .mappin:not(.on) .leg{height:22px;opacity:.45}
.mapbox .mappin:not(.on) .head{width:9px;height:9px;top:-5px;background:#fff;border-color:rgba(255,255,255,.9);box-shadow:none}
.mapbox .mappin:not(.on) .pinlbl{opacity:.6;background:rgba(255,255,255,.5);color:var(--blue-d1);box-shadow:none;padding:5px 7px;font-size:8.5px}
/* hover: the pin wakes up — solid label lifted 2px, teal dot */
.mapbox .mappin:not(.on):hover .leg{opacity:.9}
.mapbox .mappin:not(.on):hover .head{background:var(--teal-t1);box-shadow:0 0 12px rgba(125,238,236,.9)}
.mapbox .mappin:not(.on):hover .pinlbl{opacity:1;background:#fff;transform:translateY(-2px);box-shadow:0 10px 20px -8px rgba(0,40,70,.65)}
/* selected: gradient label + ✓, glowing head, double teal halo at the tip */
.mapbox .mappin.on .pinlbl{background:var(--grad);color:#fff;box-shadow:0 10px 22px -8px rgba(0,40,70,.75)}
.mapbox .mappin.on .pinlbl b{color:#fff}
.mapbox .mappin.on .head{width:16px;height:16px;top:-9px;box-shadow:0 0 0 4px rgba(125,238,236,.35),0 0 18px rgba(125,238,236,.95)}
.mapbox .mappin.on .ring{width:46px;height:17px;border:2px solid var(--teal-t1);background:radial-gradient(ellipse at center,rgba(125,238,236,.45),rgba(125,238,236,0) 70%);box-shadow:0 0 18px rgba(125,238,236,.8)}
.mapbox .mappin.on .ring::after{content:"";position:absolute;inset:-9px -12px;border-radius:50%;border:1.5px solid rgba(125,238,236,.45)}
/* the pop runs ONLY on a click (JS adds .pop with .on) — never at load, where the
   section-sleep logic left it stuck at its opacity:0 first frame */
.mapbox .mappin.on.pop .pinlbl{animation:mpinLbl .32s ease-out both}
.mapbox .mappin.on.pop .ring{animation:mpinRing .42s cubic-bezier(.2,.9,.3,1.25) both}
/* NB: unique names — a `pinring` keyframes (the DC-card hover ping, ends at opacity 0) already exists further down */
@keyframes mpinRing{from{transform:translate(-50%,50%) scale(.45);opacity:0}to{transform:translate(-50%,50%) scale(1);opacity:1}}
@keyframes mpinLbl{from{transform:translateY(5px);opacity:.3}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.mapbox .mappin.on.pop .pinlbl,.mapbox .mappin.on.pop .ring{animation:none}}
/* the Cluj banner sits beside the lower part of its pin (owner: "lasă mai jos") */
.mapbox #pinCluj .pinlbl{top:4px}
.hw-map .ipcol.ipface{padding:0}
.ipcol > .hwsub{margin-top:8px}
@media (max-width:1180px){.maprow{grid-template-columns:1fr}}
.mro{fill:#eaf6fd;fill-opacity:.92;stroke:#fff;stroke-width:2.2;stroke-linejoin:round}
.mgrid{stroke:rgba(0,113,185,.16);stroke-width:1;fill:none}
.mcity{fill:var(--blue-t1)}
.mdc{fill:var(--blue)}
.mappin{position:absolute;transform:translate(-50%,-100%);background:none;border:0;
  cursor:pointer;padding:0;z-index:3}
.mappin .pinlbl b{display:none}
.mappin.on .pinlbl b{display:inline}
.mappin:not(.on) .head{background:#fff;box-shadow:0 0 8px rgba(255,255,255,.7)}
.mappin:not(.on) .ring{display:none}
.mappin:not(.on) .pinlbl{opacity:.95;background:rgba(255,255,255,.88)}
.mappin:hover .pinlbl{opacity:1;border-color:#fff}
.mappin .leg{display:block;width:2.5px;height:34px;margin:0 auto;border-radius:2px;
  background:linear-gradient(180deg,#fff,rgba(255,255,255,.12))}
.mappin .head{position:absolute;left:50%;top:-8px;transform:translateX(-50%);width:14px;height:14px;
  border-radius:50%;background:var(--teal-t1);border:2.5px solid #fff;
  box-shadow:0 0 16px rgba(125,238,236,.95)}
.mappin .ring{position:absolute;left:50%;bottom:-4px;transform:translate(-50%,50%);width:30px;height:11px;
  border:1.5px solid rgba(255,255,255,.75);border-radius:50%}
.mappin .pinlbl{position:absolute;left:14px;top:-15px;white-space:nowrap;font:800 10px/1 var(--mono);
  letter-spacing:.06em;color:var(--blue-d1);background:#fff;border:0;
  border-radius:8px;padding:7px 10px;box-shadow:0 8px 20px -6px rgba(0,40,70,.6);text-transform:uppercase}
.mappin .pinlbl b{color:var(--teal-d1)}
/* trimiterea — jos, doar butonul si nota */
.cfg-send{margin-top:30px;text-align:center}
.hwscene .cfg-send{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;margin-top:18px} /* centred stack (owner, 2026-09-07) */
.hwscene .cfg-send .btn{flex:none;min-width:0;width:auto;padding:14px 26px;font-size:14.5px}
.hwscene .cfg-send .btn-pri{border:1.5px solid rgba(255,255,255,.7)}
.cfg-legal{flex:none;min-width:0;max-width:760px;display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center}
.hwscene .cfg-legal .gdpr{display:block;font:500 11.5px/1.6 var(--sans);color:rgba(255,255,255,.95);
  text-shadow:0 1px 1px rgba(0,40,70,.35)}
.cfg-legal .gdpr svg{width:13px;height:13px;margin:0 5px -2px 0;fill:none;stroke:var(--teal-t2);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cfg-legal .gdpr a{color:#fff;font-weight:700;text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.6);text-underline-offset:2px}
.cfg-legal .gdpr a:hover{text-decoration-color:#fff}
.hwscene .cfg-legal .note{display:inline-flex;align-items:center;gap:8px;
  background:rgba(0,45,78,.55);border:1px solid rgba(255,255,255,.45);border-radius:9px;padding:7px 13px;
  font:800 10.5px/1 var(--mono);letter-spacing:.02em;color:#fff}
.hwscene .cfg-legal .note i{width:6px;height:6px;border-radius:50%;background:var(--teal-t1);flex:none;
  box-shadow:0 0 8px rgba(125,238,236,.9)}
.cfg-send .btn{min-width:400px}

.cfg-send .note{margin-top:9px;font:600 10.5px/1.5 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
@media (max-width:1080px){
  .hwscene{grid-template-columns:250px minmax(0,1fr)}
  .hw-pdu{grid-column:1/-1}
  .hw-pdu .outlets{grid-template-columns:repeat(4,1fr)}
  .pzones{flex-wrap:wrap}
}
@media (max-width:760px){
  .hwscene{grid-template-columns:1fr;padding:18px}
  .h3d.big{transform:scale(.92);transform-origin:top center}
  .swrow2{flex-wrap:wrap;align-items:center}
  .swbgp{flex-direction:row}
  .cfg-send .btn{min-width:0;width:100%}
}
/* --- rezumat live pe scenă gradient --- */

/* mini-holograma 3D din rezumat */

@keyframes rwFlash{0%{background:rgba(125,238,236,.4);border-radius:6px}100%{background:transparent}}

@keyframes unFlash{40%{transform:scale(1.12);text-shadow:0 0 22px rgba(125,238,236,.95)}}

@media (max-width:1080px){
  .cfg{grid-template-columns:1fr}

  .grow2{grid-template-columns:1fr}
}
/* incluse — terminalul în care converg toate planurile */

@keyframes inclFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.co2-included{position:relative;border-radius:22px;overflow:hidden;
  transform:rotateX(3.5deg);transform-origin:50% 0;
  background:linear-gradient(165deg,rgba(0,63,104,.34),rgba(0,63,104,.16) 55%,rgba(0,63,104,.26)),
             repeating-linear-gradient(180deg,rgba(255,255,255,.03) 0 2px,transparent 2px 5px),
             var(--grad-band);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 44px 90px -30px rgba(0,64,110,.6),inset 0 1px 0 rgba(255,255,255,.3);
  -webkit-box-reflect:below 8px linear-gradient(transparent 78%,rgba(255,255,255,.16))}
.co2-included::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.4;
  background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:38px 38px;
  -webkit-mask-image:radial-gradient(120% 120% at 50% 0,#000 30%,transparent 90%);
  mask-image:radial-gradient(120% 120% at 50% 0,#000 30%,transparent 90%)}

.co2-included .tbar{position:relative;z-index:1;display:flex;align-items:center;gap:9px;
  padding:19px 24px 15px;border-bottom:1px solid rgba(255,255,255,.28);flex-wrap:wrap}
.co2-included .tbar .d{width:12px;height:12px;border-radius:50%;flex:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.co2-included .tbar .d1{background:var(--teal)}
.co2-included .tbar .d2{background:var(--blue-t2)}
.co2-included .tbar .d3{background:rgba(255,255,255,.75)}
.co2-included .tbar .sh{width:17px;height:17px;margin-left:12px;flex:none}
.co2-included .tbar .sh svg{width:100%;height:100%;stroke:#fff;fill:none;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 3px rgba(0,40,70,.4))}
.co2-included .tbar .ti{margin:0;font:800 13.5px/1 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:#fff;text-shadow:0 1px 5px rgba(0,40,70,.4)}
.co2-included .tbar .tr{margin-left:auto;font:600 10.5px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.75)}
.co2-included .tbody{position:relative;z-index:1;padding:16px 24px 20px}
.co2-included .ln{position:relative;display:flex;align-items:baseline;gap:11px;padding:8px 10px;
  border-radius:8px;font:500 13.5px/1.4 var(--mono);color:#fff;transition:background .2s}
.co2-included .ln:hover{background:rgba(255,255,255,.09)}
.co2-included .ln .pr{color:var(--teal-t2);flex:none;font-weight:700}
.co2-included .ln .wt{white-space:nowrap;text-shadow:0 1px 4px rgba(0,40,70,.35)}
.co2-included .ln .wt b{font-weight:700}
.co2-included .ln .dots{flex:1;min-width:24px;border-bottom:2px dotted rgba(255,255,255,.32);
  transform:translateY(-4px)}
.co2-included .ln .tag{flex:none;font:700 11.5px/1 var(--mono);letter-spacing:.06em;color:#eaffff;
  background:rgba(0,190,188,.26);border:1px solid rgba(125,238,236,.6);border-radius:6px;
  padding:4.5px 9px;box-shadow:0 0 12px rgba(0,190,188,.35);white-space:nowrap;
  transform-origin:center}
.co2-included .fin{display:flex;align-items:center;gap:14px;margin-top:10px;padding:13px 10px 2px;
  border-top:1px solid rgba(255,255,255,.24);flex-wrap:wrap}
.co2-included .fin .fx{font:700 13.5px/1.4 var(--mono);color:#fff;letter-spacing:.02em}
.co2-included .fin .fx .hl{color:var(--teal-t2)}
.co2-included .cursor{display:inline-block;width:8px;height:15px;background:var(--teal-t2);
  margin-left:7px;vertical-align:-2px;
  box-shadow:0 0 10px rgba(125,238,236,.8)}
.co2-included .stamp{margin-left:auto;flex:none;font:800 13px/1 var(--mono);letter-spacing:.22em;color:#fff;
  border:2.5px solid rgba(255,255,255,.9);border-radius:9px;padding:8px 14px;transform:rotate(-7deg);
  box-shadow:0 0 0 3px rgba(0,190,188,.25),0 0 24px rgba(125,238,236,.45),inset 0 0 14px rgba(255,255,255,.15);
  text-shadow:0 0 10px rgba(125,238,236,.75)}
/* secvența la reveal */

@keyframes inclDrop{to{opacity:1;transform:translateY(0)}}
@keyframes inclTilt{to{transform:rotateX(3.5deg)}}

@keyframes lnIn{to{opacity:1;transform:none}}
@keyframes tagIn{to{opacity:1;transform:scale(1)}}
@keyframes stampIn{0%{opacity:0;transform:rotate(-7deg) scale(1.9)}100%{opacity:1;transform:rotate(-7deg) scale(1)}}
@media (max-width:820px){

  .co2-included{transform:none}

  .co2-included .tbar{padding:17px 16px 13px}
  .co2-included .tbar .tr{margin-left:0;flex-basis:100%;margin-top:6px}
  .co2-included .tbody{padding:12px 14px 16px}
  .co2-included .ln{flex-wrap:wrap;gap:8px}
  .co2-included .ln .wt{white-space:normal}
  .co2-included .ln .dots{display:none}
}
/* add-ons */
.co2-adhead{margin:44px 0 20px;display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.co2-adhead h3{font:800 24px/1.2 var(--sans);letter-spacing:-.02em;color:var(--ink);margin:0;
  display:flex;align-items:center;gap:12px}
.co2-adhead h3::before{content:"";width:26px;height:3px;border-radius:2px;background:var(--grad)}
.co2-adhead p{margin:0;font-size:14.5px;color:var(--muted)}
/* --- serviciile aditionale: MODULE HOT-SWAP montate pe sine de rack --- */
.addrack{display:flex;flex-direction:column;gap:30px}
.ashelf{position:relative}
/* sina de rack: bara gradient cu gauri de prindere */
.ashelf .rail{position:absolute;left:0;right:0;bottom:0;height:13px;border-radius:7px;
  background:var(--grad-band);box-shadow:0 8px 22px -8px rgba(0,113,185,.5),inset 0 1px 0 rgba(255,255,255,.5);
  overflow:hidden}
.ashelf .rail::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,transparent 0 26px,rgba(255,255,255,.75) 26px 30px,transparent 30px 56px);
  -webkit-mask-image:radial-gradient(3px 3px at 28px 50%,#000 98%,transparent),linear-gradient(#000,#000);
  opacity:.55}
.ashelf .rail::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.6) 0 4px,transparent 4px 52px);
  opacity:.35;mix-blend-mode:overlay}
/* eticheta raftului */
.asl-tag{display:inline-flex;align-items:center;gap:9px;margin-bottom:14px;
  background:#fff;border:1px solid var(--blue-t3);border-radius:10px;padding:8px 13px;
  box-shadow:var(--sh);font:800 12px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink)}
.asl-tag svg{width:15px;height:15px;stroke:url(#coGrad);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.asl-tag i{width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 8px rgba(0,190,188,.8)}
/* modulele */
.asl-mods{position:relative;z-index:1;display:grid;gap:14px;padding-bottom:7px}
.asl-mods.c3{grid-template-columns:repeat(3,1fr)}
.asl-mods.c5{grid-template-columns:repeat(5,1fr)}
.asl-mods.cnet{grid-template-columns:1fr 2fr}
/* Internet-access price sliders inside the wide add-on module (owner, 2026-09-07) */
.amod.anet{align-items:center;cursor:default;padding-top:8px;padding-bottom:8px} /* same height as a standard module: the two sliders sit side by side (owner, 2026-09-07) */
.amod.anet:hover{transform:none}
.amod.anet .atx{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;align-items:center}
.isl{display:block;min-width:0}
.amod.anet .isl-h{display:flex;align-items:center;gap:8px;margin-bottom:2px;min-width:0}
.amod.anet .atx .isl-h b{display:inline;margin:0;flex:none;font:700 11.5px/1.2 var(--sans);color:var(--ink);letter-spacing:-.01em;white-space:nowrap}
.amod.anet .atx .isl-h .isl-v{display:block;margin:0;flex:1;min-width:0;font:600 8.5px/1.2 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.amod.anet .atx .isl-h .isl-p{display:inline-block;margin:0;flex:none;font:800 10px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--blue-d1);background:var(--blue-t4);border:1px solid var(--blue-t3);border-radius:6px;padding:2.5px 6px;white-space:nowrap}
.amod.anet .atx .isl-h .isl-p.free{color:var(--teal-d1);background:rgba(0,190,188,.10);border-color:rgba(0,190,188,.35)}
.isl-r{-webkit-appearance:none;appearance:none;display:block;width:100%;height:14px;margin:0;background:transparent;cursor:pointer}
.isl-r::-webkit-slider-runnable-track{height:5px;border-radius:3px;background:linear-gradient(90deg,var(--blue) 0,var(--teal) var(--p,0%),var(--blue-t3) var(--p,0%))}
.isl-r::-moz-range-track{height:6px;border-radius:3px;background:var(--blue-t3)}
.isl-r::-moz-range-progress{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--blue),var(--teal))}
.isl-r::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:13px;height:13px;margin-top:-4px;border-radius:50%;background:#fff;border:2.5px solid var(--blue);box-shadow:0 3px 8px -2px rgba(0,40,70,.45)}
.isl-r::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:#fff;border:2.5px solid var(--blue);box-shadow:0 3px 8px -2px rgba(0,40,70,.45)}
.isl-r:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:6px}
.amod.anet .atx .isl-t{display:flex;justify-content:space-between;margin-top:0;font:600 7px/1 var(--mono);letter-spacing:.02em;color:var(--muted);font-variant-numeric:tabular-nums}
.amod.anet .atx .isl-t span{display:block;margin:0;font:600 7px/1 var(--mono);white-space:nowrap} /* "500 Mb/s" used to break onto two lines and push the module taller */
.amod.anet .atx .isl-t span.on{color:var(--blue-d1);font-weight:800}
@media (max-width:900px){.asl-mods.cnet{grid-template-columns:1fr}.amod.anet .atx{grid-template-columns:1fr;gap:10px}}
.amod{position:relative;display:flex;align-items:center;gap:11px;background:var(--surface);
  border:1px solid var(--line);border-radius:13px;padding:14px 14px 14px 12px;
  box-shadow:0 2px 6px rgba(0,113,185,.06),0 14px 26px -18px rgba(0,113,185,.35);
  transition:transform .22s cubic-bezier(.2,.8,.3,1.2),box-shadow .25s,border-color .2s;cursor:default}
/* manerul de extractie */
.amod .hnd{flex:none;width:9px;height:38px;border-radius:5px;border:2px solid var(--blue-t1);
  background:linear-gradient(180deg,var(--blue-t4),#fff);position:relative;transition:border-color .2s}
.amod .hnd::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:2px;height:16px;border-radius:2px;background:var(--blue-t2);transition:background .2s}
/* LED-ul modulului */
.amod .aled{flex:none;width:8px;height:8px;border-radius:50%;background:var(--teal-t3);
  box-shadow:inset 0 0 2px rgba(0,138,136,.4);transition:all .2s}
.amod .atx{flex:1;min-width:0}
.amod .atx b{display:block;font:700 13.5px/1.25 var(--sans);color:var(--ink);letter-spacing:-.01em}
.amod .atx span{display:block;margin-top:3px;font:600 9.5px/1.3 var(--mono);letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint)}
.amod .aprice{flex:none;font:800 13px/1 var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;
  color:var(--blue-d1);background:var(--blue-t4);border-radius:8px;padding:7px 9px;
  transition:all .2s;text-align:center}
/* hover: modulul se EXTRAGE din sina */
/* hitbox sub modulul ridicat: translateY(-8px) muta cutia de sub cursorul aflat pe
   marginea de jos -> hover pierdut -> revine -> bucla de jitter; 10px acopera si
   overshoot-ul easing-ului (P2y=1.2 ~ 8.4px) */
.amod:hover::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px}
.amod:hover{transform:translateY(-8px);border-color:var(--blue-t2);
  box-shadow:0 6px 14px rgba(0,113,185,.10),0 30px 44px -20px rgba(0,113,185,.5),0 0 24px rgba(0,190,188,.18)}
.amod:hover .hnd{border-color:var(--blue)}
.amod:hover .hnd::after{background:var(--blue)}
.amod:hover .aled{background:var(--teal-t1);box-shadow:0 0 0 2px #fff,0 0 12px 3px rgba(0,190,188,.85);
  animation:co2led 1.1s steps(2) infinite}
.amod:hover .aprice{background:var(--grad);color:#fff;text-shadow:0 1px 3px rgba(0,63,104,.4);
  box-shadow:0 8px 18px -6px rgba(0,113,185,.6)}
@media (max-width:1080px){
  .asl-mods.c3{grid-template-columns:repeat(2,1fr)}
  .asl-mods.c5{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:700px){
  .asl-mods.c3,.asl-mods.c5{grid-template-columns:1fr}
}

/* ================= PROCESS ================= */
.co2-proc{background:linear-gradient(180deg,var(--bg),var(--blue-t4))}
.co2-steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-top:64px}
/* banda de transport: traseu + flux + mini-serverul care calatoreste */
.co2-steps::before{content:"";position:absolute;left:2%;right:2%;top:26px;height:2.5px;z-index:0;border-radius:2px;
  background:repeating-linear-gradient(90deg,var(--blue-t2) 0 9px,transparent 9px 18px);opacity:.8}
.co2-steps::after{content:"";position:absolute;left:2%;right:2%;top:26px;height:2.5px;z-index:0;border-radius:2px;
  background:repeating-linear-gradient(90deg,var(--teal) 0 4px,transparent 4px 22px);
  filter:drop-shadow(0 1px 4px rgba(0,190,188,.55))}
.pstops{position:absolute;left:2%;right:2%;top:26px;height:0;z-index:0;pointer-events:none}
.pstops i{position:absolute;top:-4.5px;width:11px;height:11px;border-radius:50%;background:#fff;
  border:2.5px solid var(--blue-t1);box-shadow:0 2px 8px rgba(0,113,185,.35)}
.pstops i:nth-child(1){left:10.5%}.pstops i:nth-child(2){left:37%}
.pstops i:nth-child(3){left:63.2%}.pstops i:nth-child(4){left:89.5%}
/* calatorul: mini-serverul clientului */
.pwalk{position:absolute;left:2%;right:2%;top:0;height:52px;z-index:2;pointer-events:none}
.pwalk .box{position:absolute;left:10.5%;top:3px;width:64px;height:24px;margin-left:-32px}
.pwalk .srv{position:relative;width:64px;height:24px;border-radius:5px;background:#fff;
  border:1.5px solid var(--blue-t1);box-shadow:0 10px 22px -8px rgba(0,113,185,.55),0 0 16px rgba(0,190,188,.28)}
.pwalk .srv::before{content:"";position:absolute;left:9px;right:22px;top:5px;bottom:5px;
  background:repeating-linear-gradient(90deg,rgba(0,113,185,.5) 0 4px,transparent 4px 8px);border-radius:1.5px}
.pwalk .srv::after{content:"";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--teal);box-shadow:0 0 7px rgba(0,190,188,.95)}
.pwalk .box::after{content:"";position:absolute;left:50%;bottom:-11px;transform:translateX(-50%);
  width:44px;height:8px;border-radius:50%;background:radial-gradient(50% 100% at 50% 50%,rgba(0,64,110,.35),transparent 75%);
  filter:blur(2px)}
/* statiile (fara overflow:hidden — nu taia nimic, dar bloca hitbox-ul anti-jitter;
   verificat pixel-diff la 1440/700: doar zgomot AA in .pscene) */
.pscene{position:relative;height:78px;margin:-6px -6px 12px;display:grid;place-items:center}
.pscene svg{width:150px;height:72px;fill:none;stroke:url(#coGrad);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.pscene .f1{fill:var(--blue-t4);stroke:none}
.pscene .f2{fill:var(--teal-t4);stroke:none}
.pscene .fw{fill:#fff;stroke:url(#coGrad)}
.pscene .tl{stroke:var(--teal)}
.pscene .led{fill:var(--teal);stroke:none}
.pscene .ldbar{fill:none;stroke:var(--teal);stroke-width:3.5;stroke-linecap:round;
  stroke-dasharray:34 60}
.pscene .sig{stroke:var(--blue);stroke-width:2;stroke-dasharray:56;stroke-dashoffset:56}
.pscene .puls{transform-origin:center}
.co2-step{position:relative;z-index:1;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:28px 26px;box-shadow:var(--sh);transition:transform .25s,box-shadow .25s}
.co2-step:hover{transform:translateY(-5px);box-shadow:var(--sh-lift);border-color:var(--blue-t2)}
/* hitbox anti-jitter la marginea de jos (vezi .amod:hover::after) */
.co2-step:hover::after{content:"";position:absolute;left:0;right:0;top:100%;height:7px}
.co2-step:hover .pscene svg{filter:drop-shadow(0 4px 10px rgba(0,113,185,.25))}
.co2-step .wm{position:absolute;right:14px;top:6px;font:800 64px/1 var(--mono);letter-spacing:-.05em;
  background:linear-gradient(180deg,var(--blue-t3),transparent);-webkit-background-clip:text;background-clip:text;color:transparent;
  pointer-events:none;user-select:none}
.co2-step .num{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:12px;background:var(--grad);color:#fff;font:800 14px/1 var(--mono);margin-bottom:16px;
  box-shadow:0 10px 22px -10px rgba(0,113,185,.6)}
.co2-step h3{font:700 16.5px/1.35 var(--sans);color:var(--ink);margin:0 0 8px}
.co2-step p{margin:0;font-size:13.5px;line-height:1.62;color:var(--muted)}
.co2-step .chip{display:inline-flex;align-items:center;gap:6px;margin-top:14px;
  font:600 11px/1 var(--mono);letter-spacing:.04em;color:#006b6a;background:var(--teal-t4);
  border:1px solid var(--teal-t2);border-radius:var(--pill);padding:6px 11px}
.co2-step .chip svg{width:12px;height:12px;stroke:var(--teal-d1);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:1080px){.co2-steps{grid-template-columns:repeat(2,1fr)}.co2-steps::before{display:none}}
@media (max-width:600px){.co2-steps{grid-template-columns:1fr}}

/* ================= DATA CENTER — bandă GRADIENT brand ================= */
.co2-dc{position:relative;color:#fff;overflow:hidden;isolation:isolate;background:var(--grad-band)}
.co2-dc::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;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:58px 58px;
  -webkit-mask-image:radial-gradient(120% 90% at 80% 10%,#000 20%,transparent 75%);
  mask-image:radial-gradient(120% 90% at 80% 10%,#000 20%,transparent 75%)}
.co2-dc .wrap{position:relative;z-index:1}
.co2-dc .eyebrow{color:#fff}
.co2-dc .eyebrow::before{background:rgba(255,255,255,.85)}
.co2-dc h2{color:#fff}
.co2-dc h2 strong{color:#fff;background:none;-webkit-text-fill-color:#fff;
  text-decoration:underline;text-decoration-color:rgba(255,255,255,.5);text-decoration-thickness:3px;text-underline-offset:8px}
.co2-dc .sec-head p{color:rgba(255,255,255,.92)}
.co2-bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.co2-dcard{position:relative;background:rgba(255,255,255,.95);
  border:1px solid rgba(255,255,255,.7);border-radius:var(--r);padding:26px;
  box-shadow:0 22px 50px -22px rgba(0,64,110,.45);
  transition:transform .25s,box-shadow .25s}
.co2-dcard:hover{transform:translateY(-4px);box-shadow:0 30px 64px -22px rgba(0,64,110,.55)}
/* hitbox anti-jitter la marginea de jos (vezi .amod:hover::after) */
.co2-dcard:hover::after{content:"";position:absolute;left:0;right:0;top:100%;height:6px}
.co2-dcard.span2{grid-column:span 2}.co2-dcard.span3{grid-column:span 3}
.co2-dcard.span4{grid-column:span 4}.co2-dcard.span6{grid-column:span 6}
.co2-dic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;margin-bottom:16px;
  background:linear-gradient(157deg,var(--teal-t3),var(--blue-t3));border:1px solid var(--blue-t2)}
.co2-dic svg{width:24px;height:24px;fill:none;stroke:url(#coGrad);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.co2-dcard h3{font:700 17px/1.3 var(--sans);margin:0 0 10px;color:var(--ink)}
.co2-dcard p{margin:0;font-size:14px;line-height:1.62;color:var(--muted)}
.co2-dcard .big{font:700 40px/1 var(--mono);letter-spacing:-.02em;margin:2px 0 8px;font-variant-numeric:tabular-nums;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.co2-dcard .spec{margin:14px 0 0;padding:0;list-style:none;font-family:var(--mono);font-size:12.5px;
  line-height:2.05;color:var(--ink-2)}
.co2-dcard .spec li{padding-left:16px;position:relative}
.co2-dcard .spec li::before{content:"›";position:absolute;left:0;color:var(--teal-d1)}
/* status board */

/* foto strip */
.co2-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:4px 0 16px}
.co2-photos figure{position:relative;margin:0;border-radius:12px;overflow:hidden;border:1px solid var(--blue-t3)}
.co2-photos img{width:100%;height:172px;object-fit:cover;display:block;transform:scale(1.02);transition:transform .6s ease}
.co2-photos figure:hover img{transform:scale(1.08)}
.co2-photos figure::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,0) 55%,rgba(255,255,255,.85));pointer-events:none}
.co2-photos figcaption{position:absolute;left:13px;bottom:11px;z-index:1;
  font:700 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--blue-d1)}
.co2-dcard .foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.co2-dcard .foot p{font-size:13px;color:var(--muted)}
.co2-dcard .foot a{font:700 13.5px/1 var(--sans);color:var(--blue);text-decoration:none;display:inline-flex;align-items:center;gap:7px}
.co2-dcard .foot a:hover{color:var(--teal-d1)}
.co2-dcard .foot a svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:1080px){
  .co2-bento{grid-template-columns:repeat(4,1fr)}
  .co2-dcard.span3{grid-column:span 4}
  .co2-dcard.span6{grid-column:span 4}
}
@media (max-width:680px){
  .co2-bento{grid-template-columns:1fr}
  .co2-dcard.span2,.co2-dcard.span3,.co2-dcard.span4,.co2-dcard.span6{grid-column:span 1}
  .co2-photos{grid-template-columns:1fr}
  .co2-photos img{height:150px}
}

/* ================= FAQ ================= */
.co2-acc{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.co2-q{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:border-color .25s,box-shadow .25s}
.co2-q::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad);
  opacity:0;transition:opacity .25s}
.co2-q[open]{border-color:var(--blue-t2);box-shadow:var(--sh)}
.co2-q[open]::before{opacity:1}
.co2-q summary{list-style:none;cursor:pointer;padding:21px 24px;display:flex;align-items:center;gap:16px;
  font:700 16px/1.45 var(--sans);color:var(--ink)}
.co2-q summary::-webkit-details-marker{display:none}
.co2-q summary .chev{margin-left:auto;flex:none;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;background:var(--blue-t4);color:var(--blue);
  transition:transform .3s,background .25s,color .25s}
.co2-q summary .chev svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.co2-q[open] summary .chev{transform:rotate(180deg);background:var(--grad);color:#fff}
.co2-q .ans{padding:0 26px 22px;color:var(--muted);font-size:15px;line-height:1.7;max-width:72ch}

/* ================= CTA — bandă GRADIENT brand ================= */
.co2-cta{position:relative;overflow:hidden;color:#fff;isolation:isolate;
  background:linear-gradient(298deg,#00bebc 0%,#0092b9 46%,#0071b9 94%)}
.co2-cta::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%)}
.co2-cta .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.co2-cta .eyebrow{color:#fff}
.co2-cta .eyebrow::before{background:rgba(255,255,255,.85)}
.co2-cta h2{color:#fff;font-size:clamp(28px,3.4vw,42px)}
.co2-cta .lead{color:rgba(255,255,255,.94);font-size:16.5px;line-height:1.65;margin:16px 0 22px;max-width:48ch}
.co2-cta .sla-chip{display:inline-flex;align-items:center;gap:9px;font:600 12.5px/1.3 var(--mono);
  color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.45);
  border-radius:var(--pill);padding:10px 16px;margin-bottom:28px}
.co2-cta .sla-chip svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.co2-cta .call{display:flex;align-items:center;gap:14px}
.co2-cta .call .ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;flex:none;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.45)}
.co2-cta .call .ic svg{width:21px;height:21px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.co2-cta .call .lbl{font-size:12.5px;color:rgba(255,255,255,.85);display:block;margin-bottom:3px}
.co2-cta .call a{font:700 23px/1 var(--mono);color:#fff;text-decoration:none;letter-spacing:-.01em}
.co2-cta .call a:hover{text-decoration:underline;text-underline-offset:5px}
/* form alb cu bordură conic animată */
.co2-form{position:relative;background:#fff;border-radius:var(--r-lg);padding:32px;
  box-shadow:0 40px 90px -30px rgba(0,64,110,.5)}
.co2-form::before{content:"";position:absolute;inset:-2px;z-index:-1;border-radius:calc(var(--r-lg) + 2px);
  background:conic-gradient(from var(--rot2,0deg),#c9f8f7,#ffffff,#d7edfa,#c9f8f7)}
@property --rot2{syntax:'<angle>';initial-value:0deg;inherits:false}
.co2-form .ft{font:700 17px/1.3 var(--sans);color:var(--ink);margin:0 0 20px}
.co2-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.co2-form label{display:block;margin:0 0 13px}
.co2-form .lbl{display:block;font:600 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:7px}
.co2-form input,.co2-form textarea{width:100%;background:var(--soft);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:13px 15px;color:var(--ink);font:500 15px/1.4 var(--sans);
  transition:border-color .2s,background .2s,box-shadow .2s}
.co2-form input::placeholder,.co2-form textarea::placeholder{color:var(--faint)}
.co2-form input:focus,.co2-form textarea:focus{outline:none;border-color:var(--teal);
  background:#fff;box-shadow:0 0 0 3px rgba(0,190,188,.2)}
.co2-form textarea{resize:vertical;min-height:104px}
.co2-form .altcha{display:flex;align-items:center;gap:10px;margin:2px 0 16px;
  border:1px dashed var(--blue-t2);border-radius:var(--r-sm);padding:11px 14px;
  font:500 12px/1.4 var(--mono);color:var(--muted)}
.co2-form .altcha .box{width:18px;height:18px;border-radius:5px;border:1.6px solid var(--blue-t2);flex:none;background:#fff}
@media (max-width:920px){.co2-cta .wrap{grid-template-columns:1fr;gap:38px}}
@media (max-width:600px){.co2-form .row2{grid-template-columns:1fr}}

/* footer replica */

@media (max-width:820px){.co2 .sec{padding:72px 0}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .co2 *,.co2 *::before,.co2 *::after{animation:none !important;transition:none !important}
  #scrollbar{display:none}
}

/* --- DC: sectiune prin hala NAV (scena desenata live) --- */
.dchall{grid-column:1/-1;position:relative;border-radius:22px;padding:16px 20px 18px;overflow:hidden;
  background:linear-gradient(165deg,rgba(0,63,104,.30),rgba(0,63,104,.14) 55%,rgba(0,63,104,.26));
  border:1px solid rgba(255,255,255,.45);
  box-shadow:0 30px 70px -28px rgba(0,40,70,.55),inset 0 1px 0 rgba(255,255,255,.3)}
.dchall::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.4;
  background:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);
  background-size:38px 38px;
  -webkit-mask-image:radial-gradient(130% 110% at 50% 0%,#000 30%,transparent 88%);
          mask-image:radial-gradient(130% 110% at 50% 0%,#000 30%,transparent 88%)}
.dchall>*{position:relative;z-index:1}
.dchud{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.dchud .tag{display:flex;align-items:center;gap:7px;align-self:center;margin-right:4px;
  font:700 9.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:#fff;
  text-shadow:0 1px 3px rgba(0,63,104,.45)}
.dchud .tag i{width:7px;height:7px;border-radius:50%;background:var(--teal-t1);
  box-shadow:0 0 8px rgba(125,238,236,.9)}
.hudchip{display:flex;flex-direction:column;gap:3px;background:#fff;border-radius:10px;padding:7px 12px;
  box-shadow:0 10px 24px -10px rgba(0,40,70,.55);min-width:92px}
.hudchip .k{font:600 8.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hudchip .v{display:flex;align-items:center;gap:6px;font:800 13px/1 var(--mono);color:var(--ink);
  font-variant-numeric:tabular-nums}
.hudchip .adot{width:8px;height:8px;border-radius:50%;background:var(--amber);flex:none;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.9),0 0 9px rgba(255,181,69,.9)}
.hudchip .tping{position:relative;width:8px;height:8px;border-radius:50%;background:var(--teal);flex:none;
  box-shadow:0 0 8px rgba(0,190,188,.8)}
.hudchip .tping::after{content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1.5px solid rgba(0,190,188,.65)}
.slabadge{margin-left:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:#fff;border-radius:12px;padding:7px 16px;box-shadow:0 12px 28px -10px rgba(0,40,70,.6)}
.slabadge .k{font:700 8.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.slabadge .v{font:800 21px/1 var(--mono);letter-spacing:-.01em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.dcscene{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;padding:8px 4px 0}
.dcscene .dz{display:flex;flex-direction:column;align-items:center;gap:9px;flex:none}
.dcscene .art{display:flex;align-items:flex-end;gap:9px;padding-bottom:9px;
  border-bottom:2px solid rgba(255,255,255,.4)}
.dcscene svg{fill:none;stroke:rgba(255,255,255,.9);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dcscene .gl{fill:rgba(255,255,255,.10)}
.dcscene .gl2{fill:rgba(255,255,255,.20)}
.dcscene .aled{fill:var(--amber);stroke:none}
.dcscene .tled{fill:var(--teal-t1);stroke:none}
.dzl{font:700 8.5px/1.55 var(--mono);letter-spacing:.07em;text-transform:uppercase;text-align:center;
  color:rgba(255,255,255,.92);max-width:170px;text-shadow:0 1px 3px rgba(0,63,104,.45)}
.dzl b{color:var(--teal-t2)}
.dwall{align-self:stretch;width:0;border-left:2px dashed rgba(255,255,255,.4);margin:4px 0 30px}

.dz.hall{position:relative}
.dz.hall .air{position:absolute;left:44px;right:-4px;top:-16px;height:58px;width:auto;pointer-events:none}
.dz.hall .air .at{stroke:rgba(255,255,255,.30);stroke-width:1.6;stroke-dasharray:2 6;fill:none}
.dz.hall .air .af{stroke:var(--teal-t2);stroke-width:2;stroke-linecap:round;stroke-dasharray:1 9;fill:none;
  filter:drop-shadow(0 0 4px rgba(125,238,236,.75))}
.dz.hall .air .af.d2{animation-delay:.5s}
.dz.net .artnet{display:flex;flex-direction:column;align-items:stretch;gap:6px;border-bottom:2px solid rgba(255,255,255,.4);
  padding-bottom:9px;position:relative}
.nbox{display:inline-flex;align-items:center;gap:6px;font:700 8.5px/1 var(--mono);letter-spacing:.06em;
  color:#fff;border:1.5px solid rgba(255,255,255,.55);border-radius:7px;padding:6px 9px;
  background:rgba(255,255,255,.08);text-shadow:0 1px 3px rgba(0,63,104,.45);white-space:nowrap}
.tled2{width:5px;height:5px;border-radius:50%;background:var(--teal-t1);flex:none;
  box-shadow:0 0 6px rgba(125,238,236,.9)}
.nbox:nth-child(2) .tled2{animation-delay:.3s}
.nbox:nth-child(3) .tled2{animation-delay:.6s}
.dz.net .fib{height:18px;width:100%;margin-top:2px}
.dz.net .fib .at{stroke:rgba(255,255,255,.3);stroke-dasharray:2 6}
.dz.net .fib .af{stroke:var(--teal-t2);stroke-width:2;stroke-dasharray:1 8;
  filter:drop-shadow(0 0 4px rgba(125,238,236,.8))}
.nglob{position:absolute;right:-6px;bottom:2px;font:800 8px/1 var(--mono);color:var(--blue-d1);
  background:#fff;border-radius:6px;padding:3.5px 5.5px;box-shadow:0 6px 14px -6px rgba(0,40,70,.6)}
@media (max-width:1080px){
  .dcscene{flex-wrap:wrap;justify-content:center;row-gap:22px}
  .dwall{display:none}
  .slabadge{margin-left:0}
}

/* --- FAQ v2: consola de intrebari --- */
.faqgrid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:26px;align-items:start;
  max-width:1040px;margin:0 auto}
.co2-faqsec .co2-acc{position:relative;display:flex;flex-direction:column;padding-left:64px}
/* sina verticala a dialogului, cu flux care coboara */
.co2-faqsec .co2-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)}
.co2-faqsec .co2-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);
  
  filter:drop-shadow(0 0 4px rgba(0,190,188,.55))}
.co2-q{background:transparent;border:0;border-radius:0;box-shadow:none;position:relative;
  border-bottom:1.5px dashed var(--line);transition:none}
.co2-q:last-child{border-bottom:0}
.co2-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}
.co2-q summary:hover{color:var(--blue)}
.co2-q summary::-webkit-details-marker{display:none}
/* nodul Q, ancorat pe sina */
.co2-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:var(--blue-d1);font:800 11.5px/1 var(--mono);transition:all .3s;z-index:1}
.co2-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)}
.co2-q .chev{margin-left:auto;flex:none;display:grid;place-items:center;transition:transform .3s}
.co2-q .chev svg{width:20px;height:20px;stroke:var(--blue-t1);fill:none;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s,transform .3s}
.co2-q summary:hover .chev svg{stroke:var(--blue)}
.co2-q[open] .chev svg{stroke:var(--teal-d1);transform:rotate(180deg)}
/* intrebarea deschisa: subliniere gradient care creste */
.co2-q summary .qtx{position:relative}
.co2-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}
.co2-q[open] summary .qtx::after{width:100%}
.co2-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%)}
.co2-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)}
.faqhelp{position:sticky;top:96px;border-radius:18px;background:var(--grad-band);padding:22px;
  box-shadow:0 26px 56px -22px rgba(0,80,140,.55)}
.faqhelp .fh-ic{width:30px;height:30px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;
  stroke-linejoin:round;margin-bottom:10px}
.faqhelp h4{margin:0 0 7px;font:800 17px/1.3 var(--sans);color:#fff}
.faqhelp p{margin:0;font:500 13px/1.6 var(--sans);color:rgba(255,255,255,.93)}
.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}
.faqhelp .lc i{width:7px;height:7px;border-radius:50%;background:var(--teal-t1);
  box-shadow:0 0 8px rgba(125,238,236,.9)}
.faqhelp .mail{font:700 13.5px/1 var(--mono);color:#fff;text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.5);text-underline-offset:4px}
.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)}
.faqhelp .btn{margin-top:15px}
.faqhelp .btn-pri{border:1.5px solid rgba(255,255,255,.7)}
@media (max-width:1080px){
  .faqgrid{grid-template-columns:1fr}
  .faqhelp{position:relative;top:auto}
}
/* --- Informatii despre serviciu: fisa serviciului pe banda gradient oglindita --- */
.co2-info{position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(298deg,#00bebc 0%,#0092b9 46%,#0071b9 94%)}
.co2-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%)}
.co2-info>.wrap{position:relative;z-index:1}
.co2-info .sec-head .eyebrow{color:#fff}
.co2-info .sec-head .eyebrow::before{display:none}
.co2-info .sec-head h2{color:#fff}
.co2-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}
/* --- Fisa serviciului: CONSOLA TEHNICA din sticla navy, full-width pe gradient --- */
.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)}
.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%)}
/* 2026-09-02: the holographic light sweep across the console (.dsheet::after,
   an animated `left`, i.e. layout + paint every frame) is gone — owner:
   "scoate efectul ăla de lumină de pe Fișa serviciului". */
.dsin{position:relative;z-index:1;width:96%;max-width:1400px;margin:0 auto;padding:26px 0 30px}
/* antetul de document */
.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)}
.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)}
.dhead .dt b{width:8px;height:8px;border-radius:50%;background:var(--teal-t1);display:inline-block}
.dhead .dt b:nth-of-type(2){background:var(--blue-t2)}
.dhead .dt b:nth-of-type(3){background:rgba(255,255,255,.85)}
.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}
.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)}
.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)}
.dsin .crop{position:absolute;width:15px;height:15px;border:2.5px solid rgba(125,238,236,.85);z-index:2;pointer-events:none}
.dsin .crop.tl{left:-4px;top:52px;border-right:0;border-bottom:0}
.dsin .crop.tr{right:-4px;top:52px;border-left:0;border-bottom:0}
.dsin .crop.bl{left:-4px;bottom:-6px;border-right:0;border-top:0}
.dsin .crop.br{right:-4px;bottom:-6px;border-left:0;border-top:0}
.dcols{display:grid;grid-template-columns:1.05fr 1.7fr .95fr .95fr;gap:34px}
.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)}
.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)}
.dcol h4:not(:first-child){margin-top:22px}
.dcol p{margin:0;font:500 13.5px/1.7 var(--sans);color:rgba(255,255,255,.9)}
.dcol.desc p{color:rgba(255,255,255,.88)}
.dcol.desc b{color:var(--teal-t2);font-weight:700}
.dcol .lnks{display:flex;flex-direction:column;gap:8px}
.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}
.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}
.dcol .lnks a::after{content:"→";font-weight:800;color:var(--teal-t2);opacity:0;transform:translateX(-4px);transition:all .2s}
.dcol .lnks a:hover{color:var(--teal-t2)}
.dcol .lnks a:hover::after{opacity:1;transform:none}
.dcheck{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.dcheck li{position:relative;padding-left:29px;font:600 13.5px/1.5 var(--sans);color:rgba(255,255,255,.92)}
.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)}
.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)}
/* sigiliul NAV circular */
.dseal{position:absolute;right:2%;bottom:76px;width:118px;height:118px;z-index:0;opacity:.9;pointer-events:none}
.dseal .srot{transform-origin:60px 60px;animation:netspin 40s linear infinite}
.dseal circle,.dseal path{fill:none;stroke:rgba(255,255,255,.8)}
.dseal .sr2{stroke:rgba(125,238,236,.7)}
.dseal .stext{fill:#fff;stroke:none;font:700 7.6px/1 var(--mono);letter-spacing:.08em}
.dseal .smono{fill:#fff;stroke:none;font:800 20px/1 var(--mono);letter-spacing:.04em;text-anchor:middle}
.dseal .ssub{fill:var(--teal-t2);stroke:none;font:700 6.5px/1 var(--mono);letter-spacing:.22em;text-anchor:middle}
.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)}
.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)}
.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)}
.dbar .btn-pri{border:1.5px solid rgba(255,255,255,.7)}
.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)}
.dbar .dtel svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.dbar .dtel:hover{color:var(--teal-t2)}
.dbar .dtel:hover svg{stroke:var(--teal-t2)}
@media (max-width:1080px){
  .dcols{grid-template-columns:1fr 1fr;gap:26px 30px}
  .dseal{position:relative;right:auto;bottom:auto;display:block;margin:22px 0 0 auto}
}
@media (max-width:640px){
  .dcols{grid-template-columns:1fr}
}
.dsheet{padding:28px 0 20px}

/* corectii mostenite din stilul vechi de acordeon */
.co2-q{overflow:visible}
.co2-q .chev,.co2-q[open] .chev{background:none;width:auto;height:auto;box-shadow:none;border:0}
/* ==================================================================
   MOBILE HARDENING — owner 2026-07-23: „100% responsive pe orice device".
   The desktop-first mockup left real overflow below ~600px (its media
   queries stop at 560; the hangar terminal forced a 433px min-content
   column, the stacked diorama nodes kept their desktop offsets). The
   site-wide body{overflow-x:clip} hid all of it as CUT content on
   phones/tablets — these rules make the content actually fit.
   ================================================================== */
/* grid/flex children may shrink below their content min-width */
.hwscene>div,.hw-rack,.hw-mid,.hw-pdu{min-width:0}
/* the DC-hall airflow arcs poke out of the wrapped scene at ≤768 — the
   hall is a rounded glass panel, safe to clip at every width */
.dchall{overflow:hidden}
/* the process walker's start position sits 10px left of the track */
.co2-proc{overflow-x:clip}

@media (max-width:1080px){
  /* the desktop absolute spots (.dio-node.nw{left:…} etc., specificity
     0,2,0) outrank the stacked reset (.dio-node, 0,1,0) and shifted the
     full-width nodes +17.5% off-screen — mockup bug, fixed with matching
     specificity */
  .dio-node.nw,.dio-node.ne,.dio-node.sw,.dio-node.se,.dio-node.ec{
    left:auto;right:auto;top:auto;bottom:auto;transform:none}
}
@media (max-width:600px){
  /* hero HUD chips stay inside the viewport on the stacked hero */
  .co2-chip.c1{left:0}
  .co2-chip.c2{right:0}
  .co2-chip.c3{left:0}
  .co2-chip.c4{right:0}
  /* the submit row stacks; the GDPR block takes the full width */
  .hwscene .cfg-send{flex-wrap:wrap}
  .hwscene .cfg-legal{flex:1 1 100%;width:100%;min-width:0}
}
@media (max-width:480px){
  /* the two PSU bays (fan + IEC + label + toggle ≈ 237px each) cannot sit
     side-by-side — stack them */
  .bays{grid-template-columns:1fr}
  /* terminal rows wrap (the mockup's own mobile note for the big
     terminal: „liniile fac wrap, leader-ele dispar") */
  .hw-inc .ln{flex-wrap:wrap}
  .hw-inc .ln .dots{display:none}
  .hw-inc .ln>b{margin-left:auto}
  /* panel silks wrap instead of clipping their right-hand label */
  .chassis .silk,.swface .silk,.ipface .silk,.hw-map .silk{flex-wrap:wrap;row-gap:2px}
  /* IPv4 block: the legend drops under the address cells */
  .ipblk{flex-wrap:wrap}
  .ipblk .blkleg{width:100%;flex-direction:row;gap:14px}
}

/* ── mobile pass 2 (owner, 2026-07-23) ─────────────────────────────── */
@media (max-width:767px){
  /* 1. the site's FIXED mobile header (burger row + lang/account/themes
     row) reaches ~106px — the hero eyebrow sat underneath it */
  .co2-hero .wrap{padding-top:150px}
  /* 3. hall HUD, owner's mobile arrangement: title full-width, then
     Temperatură + Uptime SLA on one row, then Umiditate · Feed A/B ·
     Anti-DDoS together on the next line */
  .dchud{row-gap:8px}
  .dchud .tag{width:100%;order:0;margin-right:0}
  .dchud .hudchip:nth-of-type(1){order:1;flex:1 1 42%}
  .dchud .slabadge{order:2;margin-left:0;flex:1 1 42%}
  .dchud .hudchip:nth-of-type(2){order:3;flex:1 1 27%}
  .dchud .hudchip:nth-of-type(3){order:4;flex:1 1 27%}
  .dchud .hudchip:nth-of-type(4){order:5;flex:1 1 27%}
}

/* MENU-BAR CLEARANCE (2026-08-13): the shared floating section bar is now
   LEFT-aligned at top:100px (56c8af2) and sat exactly over the hero eyebrow
   ("DATA CENTER PROPRIU · TIER III · BUCUREȘTI", y≈122-134). Push the hero copy
   below the bar. Desktop-only — the bar exists only ≥1200px. */
@media only screen and (min-width:1200px){
  .co2-hero-in{padding-top:64px}
}

/* HOVER-ONLY effects (owner, 2026-09-02: "pune efectele la «De la ofertă la live
   în patru pași» și «Data center administrat de profesioniști» să fie totuși la
   hover"): the process walk-through and the data-center hall scene come alive
   while a fine pointer rests on their section, and are still — and free — the
   rest of the time (no animation objects exist until the hover starts). Touch
   devices never start them (hover:none). */
@media (hover:hover) and (pointer:fine){
  .co2-proc:hover .co2-steps::after{animation:co2wflow 1.3s linear infinite}
  .co2-proc:hover .pwalk .box{animation:procWalk 12s ease-in-out infinite}
  .co2-proc:hover .pwalk .srv::after{animation:co2led 1.1s steps(2) infinite}
  .co2-proc:hover .pscene .led{animation:co2led 1.6s steps(2) infinite}
  .co2-proc:hover .pscene .ldbar{animation:pload 2.6s ease-in-out infinite}
  .co2-proc:hover .pscene .sig{animation:psign 3.2s ease-in-out infinite}
  .co2-proc:hover .pscene .puls{animation:ppuls 2.2s ease-in-out infinite}
  .co2-dc:hover .dchud .tag i{animation:co2led 1.6s steps(2) infinite}
  .co2-dc:hover .hudchip .adot{animation:co2led 2s steps(2) infinite}
  .co2-dc:hover .hudchip .tping::after{animation:hudping 2s ease-out infinite}
  .co2-dc:hover .dcscene .aled{animation:co2led 2s steps(2) infinite}
  .co2-dc:hover .dcscene .tled{animation:co2led 1.7s steps(2) infinite}
  .co2-dc:hover .fanrot{animation:hwfan 4.5s linear infinite}
  .co2-dc:hover .dz.hall .air .af{animation:co2wflow 1.4s linear infinite}
  .co2-dc:hover .tled2{animation:co2led 1.3s steps(2) infinite}
  .co2-dc:hover .dz.net .fib .af{animation:co2wflow 1.1s linear infinite}
}
@keyframes procWalk{
  0%{left:10.5%;transform:scale(1)}  4%{transform:scale(1.12)}  10%{left:10.5%;transform:scale(1)}
  24%{left:37%;transform:scale(1)}   28%{transform:scale(1.12)} 34%{left:37%;transform:scale(1)}
  48%{left:63.2%;transform:scale(1)} 52%{transform:scale(1.12)} 58%{left:63.2%;transform:scale(1)}
  72%{left:89.5%;transform:scale(1)} 76%{transform:scale(1.12)} 88%{left:89.5%;transform:scale(1)}
  94%{left:89.5%;opacity:0}          95%{left:10.5%;opacity:0}  100%{left:10.5%;opacity:1}}
@keyframes pload{0%{stroke-dashoffset:34}55%{stroke-dashoffset:-22}100%{stroke-dashoffset:-60}}
@keyframes psign{0%,15%{stroke-dashoffset:56}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
@keyframes ppuls{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes co2wflow{to{stroke-dashoffset:-8.7}}
@keyframes hwfan{to{transform:rotate(360deg)}}
@keyframes hudping{0%{transform:scale(.35);opacity:1}100%{transform:scale(1.7);opacity:0}} /* was `pinring` with the map pin's translate — the ring sat low/left on hover (owner, 2026-09-07) */

/* SECTION SLEEP (2026-08-13 → v2 2026-09-02): offscreen sections used to get a
   `.zzz` class whose universal rule paused every animation inside — and made
   Chrome recalculate style for the whole subtree (1700+ nodes, 40-50ms) at each
   boundary crossing. The page script now pauses the animation objects directly
   (Web Animations API + svg.pauseAnimations); no class, no rule, no recalc. */

/* 2026-09-02: the 90-95px-blur drift blobs are gone from every band (hero, „De
   ce NAV", data center, CTA) — owner: they held the largest GPU textures on the
   page. Nothing left to promote with will-change. */

/* Owner 2026-09-08 — same hero start as /servere-dedicate2 (see gazduire2.css): 150px + copy anchored at 39px (its eyebrow carries 2px more top margin) on
   desktop; below the two-column layout 90px (tablet) / 96px (phones, were 150px) — the other two pages' 92px corrected for this eyebrow's own top metrics, so the line starts at the same y everywhere. */
@media (min-width:1101px){.co2-hero .wrap{padding-top:150px}.co2-hero .wrap>.co2-hero-in{align-self:start;padding-top:39px}}
@media (max-width:1100px){.co2-hero .wrap{padding-top:90px}}
@media (max-width:767px){.co2-hero .wrap{padding-top:96px}}

/* Owner 2026-09-08 — service sheet head as on /gazduire-web: no section padding, compact 24px title. */
.co2-info.sec{padding:0}
.co2-info .sec-head h2{font:700 24px/1.55 var(--sans);letter-spacing:normal;margin:.83em 0;text-wrap:initial}
.co2-info .sec-head h2 strong{font-weight:900}

/* Owner 2026-09-08 — seal centre: the service name on one or two lines (no NAV + sub-label). */
.dseal .smono{font:800 10.5px/1 var(--mono)}
.dseal .smono.l{font-size:8.4px}

/* ================= PRICED CONFIGURATOR (owner grid, 2026-09-10) ================= */
/* rack chips carry their own monthly price (owner, 2026-09-10) */
.uchk{align-items:center;padding:5px 9px;gap:6px}
.uchk .ut{display:flex;flex-direction:column;align-items:flex-start;gap:1px;line-height:1}
.uchk .ut b{font:800 11.5px/1 var(--sans);letter-spacing:-.01em}
.uchk .ut em{font:700 9px/1 var(--mono);font-style:normal;letter-spacing:.02em;font-variant-numeric:tabular-nums;opacity:.82}
.uchk.on .ut em{opacity:1;color:var(--blue)}
.uchk.nop .ut{justify-content:center}
.uchk.nop .ut b{font-weight:700}
/* dedicated circuit selector (PDU panel) */
.circplate{margin:10px 0 6px}
.ptype.circ button{font-size:10px}
/* services panel */
.hw-svc{margin-top:14px;padding:14px 16px 14px}
.hw-svc .silk{margin-bottom:12px}
.svcgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px 22px}
.svch{margin:6px 0 6px;font:800 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.85);text-shadow:0 1px 3px rgba(0,63,104,.45)}
.svch:first-child{margin-top:0}
.svt,.stp,.svtr{display:flex;align-items:center;gap:10px;width:100%;margin:0 0 7px;padding:8px 10px;border-radius:11px;text-align:left;
  background:rgba(255,255,255,.10);border:1.5px solid rgba(255,255,255,.45);color:#fff;cursor:pointer;transition:border-color .18s,background .18s}
.svt:hover{border-color:#fff;background:rgba(255,255,255,.16)}
.svt.on{background:#fff;border-color:#fff;color:var(--blue-d1)}
.svled{flex:none;width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.4);transition:all .18s}
.svt.on .svled{background:var(--teal);box-shadow:0 0 0 2px #fff,0 0 10px rgba(0,190,188,.9)}
.svtx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.svn{font:700 12px/1.25 var(--sans);letter-spacing:-.01em;text-shadow:0 1px 3px rgba(0,63,104,.35)}
.svt.on .svn,.stp.on .svn{text-shadow:none}
.svd{font:600 8.5px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.svp{flex:none;font:800 11px/1 var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;padding:6px 8px;border-radius:8px;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.5)}
.svt.on .svp,.stp.on .svp{background:var(--grad);color:#fff;border-color:transparent;text-shadow:0 1px 3px rgba(0,63,104,.4)}
.svp.free{background:rgba(0,190,188,.22);border-color:rgba(125,238,236,.7)}
.svt.on .svp.free{background:var(--teal);color:#fff}
.svtr{cursor:default;flex-wrap:wrap}
.svtr .svn{flex:1 1 100%}
.svtr .ptype{margin:0;width:100%}
.svtr .ptype button{flex:1;font-size:10px;white-space:nowrap}
.stp{cursor:default}
.stp.on{background:#fff;border-color:#fff;color:var(--blue-d1)}
.stpc{flex:none;display:inline-flex;align-items:center;gap:6px}
.stpc button{width:26px;height:26px;border-radius:8px;border:1.5px solid rgba(255,255,255,.6);background:rgba(255,255,255,.14);color:#fff;
  font:800 15px/1 var(--mono);cursor:pointer;display:grid;place-items:center;padding:0;transition:background .15s,border-color .15s}
.stpc button:hover{background:rgba(255,255,255,.28);border-color:#fff}
.stp.on .stpc button{border-color:var(--blue-t2);background:var(--blue-t4);color:var(--blue-d1)}
.stpv{min-width:16px;text-align:center;font:800 13px/1 var(--mono);font-variant-numeric:tabular-nums}
.svnote{margin:0 0 8px;font:500 11px/1.45 var(--sans);color:rgba(255,255,255,.9);text-shadow:0 1px 3px rgba(0,63,104,.35)}
.svincl{margin-top:4px;padding:8px 10px;border-radius:11px;border:1px dashed rgba(255,255,255,.5)}
.svincl .svch{margin:0 0 6px}
.svincl ul{margin:0;padding:0;list-style:none;display:grid;gap:4px}
.svincl li{position:relative;padding-left:16px;font:600 10.5px/1.35 var(--sans);color:#fff;text-shadow:0 1px 3px rgba(0,63,104,.35)}
.svincl li::before{content:"";position:absolute;left:0;top:4px;width:9px;height:9px;border-radius:50%;background:var(--teal-t1);box-shadow:0 0 6px rgba(125,238,236,.9)}
@media (max-width:760px){.svcgrid{grid-template-columns:1fr}}
/* submit row: the button and the monthly estimate side by side (owner, 2026-09-10) */
.sendrow{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
.cest{position:relative;flex:none;display:flex;align-items:baseline;gap:2px 9px;flex-wrap:wrap;max-width:330px;text-align:left;
  padding:9px 14px 9px;border-radius:13px;overflow:hidden;
  background:linear-gradient(150deg,rgba(0,45,78,.62),rgba(0,70,110,.5));
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 14px 30px -16px rgba(0,20,40,.95),inset 0 1px 0 rgba(255,255,255,.28)}
.cest::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--teal-t1),var(--blue))}
.cest::after{content:"";position:absolute;right:-26px;top:-30px;width:86px;height:86px;border-radius:50%;
  background:radial-gradient(circle,rgba(125,238,236,.28),transparent 70%);pointer-events:none}
.cest-l{position:relative;font:800 8.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--teal-t1)}
.cest b{position:relative;font:900 22px/1 var(--sans);letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  color:#fff;text-shadow:0 2px 12px rgba(0,25,45,.7)}
.cest small{position:relative;flex:1 1 100%;font:600 8px/1.4 var(--mono);letter-spacing:.03em;color:rgba(255,255,255,.85)}
@media (max-width:700px){.cest{max-width:none}}
/* IPv4 / IPv6 prefix chips: one row (owner, 2026-09-10) */
.ipfam{gap:8px}
.ipsw{width:34px;height:19px}
.ipsw.on i{left:17px}
.iplbl{width:30px;font-size:10.5px}
.ipchips{flex-wrap:nowrap;gap:5px}
.hwscene .ipchips .ch{padding:5.5px 7px;font-size:9.5px;white-space:nowrap;border-radius:8px}
@media (max-width:900px){.ipchips{flex-wrap:wrap}}
/* the AS6718 node: the network drawing stays clear — a lit hub in the middle,
   the number and its role labelled underneath (owner, 2026-09-10) */
.asnode.nav{min-width:104px}
.asbadge{width:104px;height:78px}
.asbadge>svg{width:84px;height:84px;margin:-42px 0 0 -42px;opacity:1}
.asbadge .nspk{stroke:rgba(255,255,255,.6);stroke-width:1.3}
.asbadge .nring{width:52px;height:52px;margin:-26px 0 0 -26px;border:1.5px solid rgba(255,255,255,.55);background:none}
.asbadge .nring.n2{width:74px;height:74px;margin:-37px 0 0 -37px;border:1.5px dashed rgba(255,255,255,.3)}
.asbadge .nhub{position:relative;z-index:1;width:19px;height:19px;border-radius:50%;
  background:linear-gradient(135deg,#fff,var(--teal-t2));border:2px solid #fff;
  box-shadow:0 0 0 5px rgba(0,45,78,.35),0 0 16px rgba(125,238,236,.85)}
.asnode.nav .ttl{top:100%;margin-top:7px;font:800 12.5px/1 var(--mono);letter-spacing:.1em;color:#fff;
  text-shadow:0 1px 6px rgba(0,30,55,.7)}
.asnode.nav .sub{position:absolute;left:50%;transform:translateX(-50%);top:100%;margin-top:24px;white-space:nowrap;
  font-size:8.5px;opacity:.9}
.asroute{padding-bottom:46px}
/* the monthly estimate beside the submit button (owner, 2026-09-11: make it
   more striking): a glass capsule with a brand-gradient rim, the label in teal
   mono and the figure on a white plate in gradient text, lit by a soft teal
   halo. The VAT note sits on its own line under the row. */
.sendrow{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
.cest{position:relative;flex:none;display:inline-flex;align-items:center;gap:14px;
  padding:7px 7px 7px 18px;border-radius:999px;overflow:hidden;
  background:linear-gradient(120deg,rgba(0,45,78,.62),rgba(0,86,132,.46));
  box-shadow:0 0 0 1.5px rgba(125,238,236,.55),0 16px 30px -16px rgba(0,20,40,.95),
    inset 0 1px 0 rgba(255,255,255,.3)}
.cest::before{content:"";position:absolute;left:-30%;top:-140%;width:70%;height:300%;pointer-events:none;
  transform:rotate(18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent)}
.cest::after{content:"";position:absolute;right:-34px;top:-46px;width:120px;height:120px;border-radius:50%;
  pointer-events:none;background:radial-gradient(circle,rgba(125,238,236,.35),transparent 68%)}
.cest-l{position:relative;font:800 9px/1.35 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--teal-t1);text-shadow:0 1px 6px rgba(0,25,45,.6);max-width:92px}
.cest b{position:relative;display:inline-flex;align-items:center;padding:9px 16px;border-radius:999px;
  background:#fff;font:900 21px/1 var(--sans);letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  box-shadow:0 6px 18px -8px rgba(0,20,40,.7),inset 0 0 0 1px rgba(0,113,185,.12);
  background-image:none;color:var(--blue-d1)}
.cest b::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(0,113,185,.08),transparent 55%)}
.cest-note{margin:10px 0 0;font:600 9.5px/1.5 var(--mono);letter-spacing:.05em;text-transform:uppercase;
  color:rgba(255,255,255,.85);text-shadow:0 1px 3px rgba(0,40,70,.45);text-align:center}
@media (max-width:700px){.cest{width:100%;justify-content:space-between}}
/* price grid shelves: 4-up, free plates */
.asl-mods.c4{grid-template-columns:repeat(4,1fr)}
.asl-tag span{font:inherit}
.amod .aprice.free{color:var(--teal-d1);background:rgba(0,190,188,.10)}
.amod:hover .aprice.free{background:var(--teal);color:#fff}
@media (max-width:1080px){.asl-mods.c4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.asl-mods.c4{grid-template-columns:1fr}}
/* panel silks in the two new panels: the shared mono label row, spaced */
.hw-svc>.silk{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 12px;
  font:800 10px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#fff;text-shadow:0 1px 3px rgba(0,63,104,.45)}
.hw-svc>.silk span{font:inherit}
.hw-svc>.silk span+span{opacity:.85;font-weight:600}
/* compact services panel (owner, 2026-09-10: rows half the size, grouped) */
.hw-svc{padding:10px 12px 10px}
.hw-svc>.silk{margin-bottom:8px}
.svcgrid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 14px;align-items:start}
.svcgrid3 .svch{margin:2px 0 5px;font-size:8.5px;letter-spacing:.14em}
.hw-svc .svt,.hw-svc .stp,.hw-svc .svtr{margin:0 0 4px;padding:4px 7px;gap:7px;border-radius:8px;border-width:1px}
.hw-svc .svd{display:none}
.hw-svc .svled{width:7px;height:7px}
.hw-svc .svn{font-size:10.5px;line-height:1.2}
.hw-svc .svp{font-size:9.5px;padding:4px 6px;border-radius:6px}
.hw-svc .stpc{gap:4px}
.hw-svc .stpc button{width:20px;height:20px;border-radius:6px;font-size:13px}
.hw-svc .stpv{min-width:12px;font-size:11px}
.hw-svc .svtr{flex-wrap:wrap;gap:4px 8px;padding:5px 7px}
.hw-svc .svtr .svn{flex:1 1 100%}
.hw-svc .svtr .ptype{padding:2px;gap:2px}
.hw-svc .svtr .ptype button{padding:4px 5px;font-size:8.5px;letter-spacing:.02em}
.hw-svc .svincl{margin-top:6px;padding:5px 8px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
.hw-svc .svincl .svch{margin:0;flex:none}
.hw-svc .svincl ul{display:contents}
.hw-svc .svincl li{font-size:9.5px;padding-left:12px;white-space:nowrap}
.hw-svc .svincl li::before{width:7px;height:7px;top:3px}
@media (max-width:1180px){.svcgrid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.svcgrid3{grid-template-columns:1fr}}
/* the switch faceplate states the port contract (owner, 2026-09-10) */
.swnote{margin:8px 0 0;font:600 8.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.9);text-shadow:0 1px 3px rgba(0,63,104,.4)}
/* the BGP LEDs carry their monthly price, so the row may wrap (owner, 2026-09-10) */
.swbgp{flex-wrap:wrap}
.asbadge .cap b{color:rgba(255,255,255,.9)}
/* square corners through the cards, as on the reseller packages */
.co2 .hwscene .gpanel .silk,.co2 .hwscene .gpanel .swface,.co2 .hwscene .gpanel .mapbox{border-radius:0}
/* the 15px ring needs 30px between panels so neighbouring rings meet without
   overlapping, and 15px of breathing room inside the scene's own padding */
.co2 .hwscene{gap:52px 30px;padding:32px 22px 22px;grid-template-columns:268px minmax(0,1fr) 188px}
.co2 .hwscene .h3d.big{width:250px}
.co2 .hwscene .hw-map,.co2 .hwscene .hw-mid .hw-contact,.co2 .hwscene .hw-svc{margin-top:52px}
@media (max-width:1080px){.co2 .hwscene{padding:32px 18px 18px;grid-template-columns:240px minmax(0,1fr)}}
@media (max-width:760px){.co2 .hwscene{gap:52px 30px;padding:32px 16px 16px;grid-template-columns:1fr}}
/* the wider gaps cost the middle column ~24px, so below 1400 the port cages and
   the rack chips tighten a little to stay on one row each */
@media (max-width:1400px){
  .co2 .hwscene .hwrow .sfpport{width:44px}
  .co2 .hwscene .hwrow .sfpport::before{width:22px}
  .co2 .hwscene .hwrow .qport{width:49px}
  .co2 .hwscene .hwrow .qport::before{width:25px}
  .co2 .hwscene .hwrow .swport{width:31px;height:31px}
  .co2 .hwscene .hwrow .pzone .prow{gap:3px}
  .co2 .hwscene .hwrow{grid-template-columns:minmax(0,330px) minmax(0,1fr)}
  .co2 .hwscene .uchk{padding:5px 7px;gap:5px}
  .co2 .hwscene .uchk .ut b{font-size:11px}
  .co2 .hwscene .uchk .ut em{font-size:8.5px}
}
/* the switch faceplate needs 408px for its seven port cages; #hwPorts is
   display:contents, so the zones are flex items of .swrow2 and wrap against
   its width. Give the switch column the room by trimming the PSU column. */
@media (min-width:1401px){.co2 .hwscene .hwrow{grid-template-columns:minmax(0,372px) minmax(0,1fr)}}
.co2 .hwscene .hwcol-psu .pwgrid{max-width:100%}
/* the "fara" chip carries its label now, so it gets the same padding and gap
   as its siblings instead of being a bare checkbox */
.co2 .hwscene #chAS .ch.asnone{padding:5.5px 7px;gap:6px}
/* the AS chips' checkboxes were white-bordered for the dark panel, so they
   vanished on the white cards; only the selected one showed its tick */
.co2 .hwscene #chAS .ch i{border-color:var(--blue-t1);background:#fff}
.co2 .hwscene #chAS .ch.on i,.co2 .hwscene #chAS .ch.asnone.on i{border-color:rgba(255,255,255,.85);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.6l4.6 4.6L19 7.2'/%3E%3C/svg%3E") center}
/* without the dashed flow the AS node sits at the end of the row; pull it in so
   its "60+ upstreams" pill stays inside the card */
.co2 .hwscene .asroute{justify-content:space-between}
.co2 .hwscene .asnode.nav{margin-left:auto}
/* the chips fill the row, so the node cannot be pushed further left; anchor its
   two labels to the node's right edge instead of centring them, or the wider
   "60+ upstreams" pill hangs past the card */
.co2 .hwscene .asnode.nav .ttl,.co2 .hwscene .asnode.nav .sub{left:auto;right:0;transform:none;text-align:right}
/* the ammeter LED reads as a stamped indicator: lit dome, recessed rim, white
   collar and a soft amber glow (owner, 2026-09-11). Must outrank the
   white-card repaint that flattened it to a pale blue dot. */
.co2 .hwscene .gpanel .pmgmt .pled{position:relative;width:13px;height:13px;flex:none;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#ffd79a,var(--amber) 55%,#c47708);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.75),
    inset 0 -1px 2px rgba(120,60,0,.55),
    0 0 0 2px #fff,
    0 0 0 3.5px var(--blue-t3),
    0 1px 2px rgba(0,40,72,.35),
    0 0 9px rgba(245,158,11,.55)}
.co2 .hwscene .gpanel .pmgmt .peth{border-color:var(--blue-t1);background:#fff;
  box-shadow:inset 0 1px 2px rgba(0,40,72,.18)}
.co2 .hwscene .gpanel .pmgmt .peth::after{background:var(--blue-t1)}
/* ---- panel titles: icon + label + hairline (owner, 2026-09-11) ---- */
.co2 .hwscene .gpanel .silk{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding-bottom:7px;margin-bottom:11px;border-bottom:1px solid var(--line)}
.co2 .hwscene .gpanel .silk .slk{display:inline-flex;align-items:center;gap:8px;min-width:0}
.co2 .hwscene .gpanel .silk .slk-i{width:15px;height:15px;flex:none;fill:none;stroke:url(#coGrad);
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.co2 .hwscene .gpanel .silk .slk b{font:800 10px/1.3 var(--mono);letter-spacing:.15em;text-transform:uppercase;
  color:var(--blue-d1);text-shadow:none}
.co2 .hwscene .gpanel .silk .slk-s{font:600 9px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);text-shadow:none}
.co2 .hwscene .gpanel .swnote{margin:-4px 0 10px}
/* ---- the two power sliders: centred in their column, clear of the bays ---- */
.co2 .hwscene .pwgrid{grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:10px 16px;align-items:center}
.co2 .hwscene .pwgrid .pwcol{justify-content:center;gap:14px;min-width:0}
.co2 .hwscene .pwgrid .hw-pw .flbl{margin-bottom:6px}
.co2 .hwscene .pwgrid .sld{gap:10px;align-items:center}
.co2 .hwscene .pwgrid .sld input[type=range]{min-width:0}
.co2 .hwscene .pwgrid .sld .sval{min-width:62px;font-size:12px;padding:6px 8px}
/* ---- cross-connect: the cage stays white while the port is active ---- */
.co2 .hwscene .gpanel .xcport.on .xcg,.co2 .hwscene .gpanel .xcport.on .xcg::after{border-color:#fff}
/* ---- PDU outlets: socket-sized rows instead of stretched blocks ---- */
.co2 .hwscene .gpanel .pstrip .outlets{flex:none;grid-auto-rows:30px;gap:6px;align-content:start}
.co2 .hwscene .gpanel .outlets button{min-height:0;height:30px;border-radius:7px;border-width:1.5px}
.co2 .hwscene .gpanel .outlets button::before{width:21px;height:14px;border-radius:3px;
  background:var(--blue-t2);top:50%;left:50%;transform:translate(-50%,-50%)}
.co2 .hwscene .gpanel .outlets button::after{width:17px;height:10px;top:50%;left:50%;transform:translate(-50%,-50%);
  background:
    radial-gradient(circle at 22% 34%,#fff 0 1.6px,transparent 1.7px),
    radial-gradient(circle at 78% 34%,#fff 0 1.6px,transparent 1.7px),
    radial-gradient(circle at 50% 76%,#fff 0 1.6px,transparent 1.7px)}
.co2 .hwscene .gpanel .outlets button.on::before{background:#fff}
.co2 .hwscene .gpanel .outlets button.on::after{background:
    radial-gradient(circle at 22% 34%,var(--blue-d1) 0 1.6px,transparent 1.7px),
    radial-gradient(circle at 78% 34%,var(--blue-d1) 0 1.6px,transparent 1.7px),
    radial-gradient(circle at 50% 76%,var(--blue-d1) 0 1.6px,transparent 1.7px)}
.co2 .hwscene .gpanel .outlets button .onum{right:5px;top:50%;transform:translateY(-50%);font-size:8px}
.co2 .hwscene .gpanel .outlets button .ochk{left:6px;top:50%;transform:translateY(-50%);width:13px;height:13px}
.co2 .hwscene .gpanel .pstrip{flex:none}
.co2 .hwscene .gpanel .hw-pdu .pduback{flex:none}
/* the PDU column no longer stretches to the middle column's height, and the
   narrow outlet rows drop the tick — the lit fill already reads as "on" */
.co2 .hwscene .hw-pdu{align-self:start}
.co2 .hwscene .gpanel .outlets button .ochk{display:none}
.co2 .hwscene .gpanel .outlets button .onum{right:4px}
.co2 .hwscene .gpanel .outlets button::before{width:19px;height:13px}
.co2 .hwscene .gpanel .outlets button::after{width:15px;height:9px}
/* ---- cross-connect: same skin as the ports, gradient when active (owner) ---- */
.co2 .hwscene .gpanel .xcport{background:var(--blue-t4);border-color:var(--blue-t1);color:var(--ink-2)}
.co2 .hwscene .gpanel .xcport .xcg,.co2 .hwscene .gpanel .xcport .xcg::after{border-color:var(--blue-t1)}
.co2 .hwscene .gpanel .xcport:hover{background:#fff;border-color:var(--blue)}
.co2 .hwscene .gpanel .xcport.on{background:var(--grad);border-color:transparent;border-style:solid;color:#fff;
  text-shadow:0 1px 3px rgba(0,63,104,.4);box-shadow:0 8px 20px -8px rgba(0,113,185,.6)}
.co2 .hwscene .gpanel .xcport.on .xcg,.co2 .hwscene .gpanel .xcport.on .xcg::after{border-color:#fff}
/* ---- PDU outlets: a drawn socket face (chamfered body, narrow square slots) ---- */
.co2 .hwscene .gpanel .outlets button::before{width:25px;height:15px;border-radius:0;background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 16'><path fill-rule='evenodd' fill='%235fb1e2' d='M4.6 1.2H23.4L26 3.8v7.4a3.4 3.4 0 0 1-3.4 3.4H5.4A3.4 3.4 0 0 1 2 11.2V3.8ZM7.9 4.3h1.9v5.2H7.9ZM18.2 4.3h1.9v5.2h-1.9ZM11.6 4.3h4.8v1.9h-4.8ZM11.6 7.6h4.8v1.9h-4.8Z'/></svg>") center/contain no-repeat}
.co2 .hwscene .gpanel .outlets button::after{content:none}
.co2 .hwscene .gpanel .outlets button.on::before{background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 16'><path fill-rule='evenodd' fill='%23ffffff' d='M4.6 1.2H23.4L26 3.8v7.4a3.4 3.4 0 0 1-3.4 3.4H5.4A3.4 3.4 0 0 1 2 11.2V3.8ZM7.9 4.3h1.9v5.2H7.9ZM18.2 4.3h1.9v5.2h-1.9ZM11.6 4.3h4.8v1.9h-4.8ZM11.6 7.6h4.8v1.9h-4.8Z'/></svg>") center/contain no-repeat}
.co2 .hwscene .gpanel .outlets button.on::after{content:none}
/* ---- every indicator lamp is stamped into the panel, the /gazduire-web way:
        a pressed well (inset top shade, inset bottom light, white lip below) ---- */
.co2 .hwscene .gpanel .pstrip .ph i,
.co2 .hwscene .gpanel .bay .bled,
.co2 .hwscene .gpanel .svled,
.co2 .hwscene .gpanel .bgpled i{border-radius:50%;
  background:linear-gradient(#d9e5f1,#f7fbfe);
  box-shadow:inset 0 2px 3px rgba(10,60,110,.28),inset 0 -1px 1px rgba(255,255,255,.9),0 1px 0 #fff}
.co2 .hwscene .gpanel .pstrip .ph i{width:9px;height:9px;
  background:radial-gradient(circle at 50% 34%,#ffd79a,var(--amber) 60%,#c47708);
  box-shadow:inset 0 2px 3px rgba(120,60,0,.4),inset 0 -1px 1px rgba(255,255,255,.65),0 1px 0 #fff;animation:none}
.co2 .hwscene .gpanel .bay .bled{width:10px;height:10px;
  background:radial-gradient(circle at 50% 34%,#b8f5e6,var(--teal) 60%,#007a78);
  box-shadow:inset 0 2px 3px rgba(0,70,68,.4),inset 0 -1px 1px rgba(255,255,255,.7),0 1px 0 #fff}
.co2 .hwscene .gpanel .svt.on .svled,.co2 .hwscene .gpanel .bgpled.on i{
  background:radial-gradient(circle at 50% 34%,#fff,#cdeefb 60%,#8fc9e8);
  box-shadow:inset 0 2px 3px rgba(0,50,90,.3),inset 0 -1px 1px rgba(255,255,255,.9),0 1px 0 rgba(255,255,255,.7)}
.co2 .hwscene .gpanel .pmgmt .pled{
  background:radial-gradient(circle at 50% 34%,#ffd79a,var(--amber) 60%,#c47708);
  box-shadow:inset 0 2px 3px rgba(120,60,0,.42),inset 0 -1px 1px rgba(255,255,255,.7),0 1px 0 #fff,
    0 0 0 2px #fff,0 0 0 3.5px var(--blue-t3)}
/* ---- one active state everywhere, taken from the transport segment
        ("Transport alt data center · Fara", owner 2026-09-11): the brand
        gradient, a white 1px outline that lifts it off its surface, white
        text and the same soft shadow. The chips had a transparent border, so
        the gradient bled into the white card with no definition. ---- */
.co2 .hwscene .gpanel .uchk.on,
.co2 .hwscene .gpanel .chips-sm .ch.on,
.co2 .hwscene #chAS .ch.on,
.co2 .hwscene .gpanel .svt.on,
.co2 .hwscene .gpanel .bgpled.on,
.co2 .hwscene .gpanel .xcport.on,
.co2 .hwscene .gpanel .outlets button.on,
.co2 .hwscene .gpanel .seg button.on,
.co2 .hwscene .gpanel .ptype button.on,
.co2 .hwscene .gpanel .swport.on,
.co2 .hwscene .gpanel .sfpport.on,
.co2 .hwscene .gpanel .qport.on,
.co2 .hwscene .gpanel .ipsw.on{
  background:var(--grad);border-color:#fff;color:#fff;
  text-shadow:0 1px 3px rgba(0,63,104,.4);
  box-shadow:0 6px 14px -6px rgba(0,40,70,.6)}
.co2 .hwscene .gpanel .seg button.on{border-width:1px;border-style:solid}
.co2 .hwscene .gpanel .outlets button.on{box-shadow:0 6px 14px -6px rgba(0,40,70,.6),inset 0 1px 0 rgba(255,255,255,.7)}
.co2 .hwscene .gpanel .ipsw.on{box-shadow:0 6px 14px -6px rgba(0,40,70,.6)}
/* ================= PDU: the WHOLE unit drawn in 3D, modelled on the APC
   NetShelter Rack PDU Advanced APDU10350MO — a 0U vertical strip with a
   metering head (colour readout + keys + network/sensor ports), breakers,
   outlet bays colour-coded by input phase, and flat end caps.
   Light brushed-metal body in the site palette, never black (owner,
   2026-09-11). Same markup, same behaviour: the unit is extruded with a top
   face and a right side face so it reads as a solid object. ================= */
.co2 .hwscene .gpanel .pdurow{gap:15px;padding:10px 12px 12px 0}
/* no enclosure: each feed is a power rail on the card — a lit spine with the
   outlets hung off it (owner, 2026-09-13: the drawn casing looked like a toy) */
.co2 .hwscene .gpanel .pstrip{flex:1 1 0;min-width:0;position:relative;
  padding:0 0 0 18px;border-radius:0;border:0;gap:7px;background:none;box-shadow:none}
.co2 .hwscene .gpanel .pstrip::before{content:"";position:absolute;left:4px;top:6px;bottom:6px;width:3px;
  border-radius:3px;background:linear-gradient(180deg,var(--teal),var(--blue));
  box-shadow:0 0 0 1px rgba(255,255,255,.95),0 0 10px rgba(0,150,190,.35)}
.co2 .hwscene .gpanel .pstrip.down::before{background:linear-gradient(180deg,#d3e0ea,#bdd0de);box-shadow:0 0 0 1px #fff}
/* the extrusion: top face + right side face, both lit from the upper left */
/* metering head: the colour readout, the two keys and the network + sensor ports */
.co2 .hwscene .gpanel .pdu-meter{display:flex;align-items:center;gap:4px;padding:3px 4px;border-radius:3px;
  background:linear-gradient(#f3fafe,#d8e9f5);
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(126,166,196,.5),0 1px 2px rgba(0,40,70,.16)}
.co2 .hwscene .gpanel .pdu-meter .lcd{flex:1;min-width:0;overflow:hidden;
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:1px 2px;
  padding:2px 4px 3px;border-radius:2px;background:linear-gradient(#eefaff,#cfe9f4);
  box-shadow:inset 0 1px 3px rgba(41,86,120,.38),inset 0 0 0 1px rgba(126,166,196,.5);
  font:800 8.5px/1 var(--mono);color:var(--blue-d1);text-shadow:0 1px 0 rgba(255,255,255,.85)}
.co2 .hwscene .gpanel .pdu-meter .lcd em{font-style:normal;font-size:6.5px;opacity:.85}
.co2 .hwscene .gpanel .pdu-meter .lcd i{flex-basis:100%;font:700 6px/1 var(--mono);font-style:normal;
  color:var(--muted);text-shadow:none}
.co2 .hwscene .gpanel .pstrip.down .pdu-meter .lcd{color:var(--faint);text-shadow:none;
  background:linear-gradient(#eef3f7,#dee8ef)}
/* feed head (clickable): a stamped label plate on the metal body */
.co2 .hwscene .gpanel .pstrip .ph{justify-content:center;gap:6px;padding:5px;border-radius:6px;
  background:linear-gradient(#f6fbfe,#dcebf6);border:1px solid rgba(126,166,196,.45);
  color:var(--blue-d1);font:800 8px/1 var(--mono);letter-spacing:.12em;
  text-shadow:0 1px 0 #fff;box-shadow:inset 0 1px 0 #fff}
.co2 .hwscene .gpanel .pdurow:not(.single) .pstrip .ph:hover{border-color:var(--blue-t1);background:linear-gradient(#fff,#d3e7f6)}
.co2 .hwscene .gpanel .pstrip.down .ph{color:var(--faint);border-color:rgba(126,166,196,.35);
  background:linear-gradient(#f0f5f9,#e0e8ef);text-shadow:none;flex-wrap:wrap;gap:3px 5px}
.co2 .hwscene .gpanel .pstrip.down .ph::after{color:var(--muted);border-color:rgba(126,166,196,.5);
  font-size:5.5px;padding:1px 3px;margin-left:0}
/* the dark feed is unlit: the lamp goes cold */
.co2 .hwscene .gpanel .pstrip.down .ph i{background:radial-gradient(circle at 50% 34%,#f2f7fb,#c6d8e6 62%,#a6bed0);
  box-shadow:inset 0 1px 2px rgba(60,95,125,.4),0 0 0 1px rgba(255,255,255,.9)}
.co2 .hwscene .gpanel .pstrip .ph i{width:7px;height:7px;
  background:radial-gradient(circle at 50% 34%,#ffe3b7,var(--amber) 58%,#d08b12);
  box-shadow:inset 0 1px 2px rgba(120,60,0,.45),0 0 0 1px rgba(255,255,255,.95),0 0 6px rgba(255,181,69,.85)}
/* breakers set into the body */
.co2 .hwscene .gpanel .pstrip .brk{margin:0 2px;border-color:rgba(126,166,196,.5);
  background:linear-gradient(#e9f3fa,#d2e3f0);box-shadow:inset 0 1px 0 #fff}
.co2 .hwscene .gpanel .pstrip .brk::after{background:linear-gradient(#fff,#cbdeec);
  box-shadow:0 0 0 1px rgba(126,166,196,.55)}
.co2 .hwscene .gpanel .pstrip .brk::before{color:var(--muted)}
.co2 .hwscene .gpanel .brk3 .b3 i{border-color:rgba(126,166,196,.5);background:linear-gradient(#e9f3fa,#d2e3f0)}
.co2 .hwscene .gpanel .brk3 .l1{color:var(--amber-d)}
.co2 .hwscene .gpanel .brk3 .l1 i::after{background:var(--amber-d)}
.co2 .hwscene .gpanel .brk3 .l2{color:var(--blue)}
.co2 .hwscene .gpanel .brk3 .l2 i::after{background:var(--blue)}
.co2 .hwscene .gpanel .brk3 .l3{color:var(--teal-d1)}
.co2 .hwscene .gpanel .brk3 .l3 i::after{background:var(--teal-d1)}
/* outlets: a sunken bay per outlet, the socket coloured by input phase */
.co2 .hwscene .gpanel .pstrip .outlets{gap:5px;grid-auto-rows:28px}
.co2 .hwscene .gpanel .outlets button{height:28px;border:1px solid rgba(126,166,196,.45);border-radius:6px;
  background:linear-gradient(180deg,#d9e8f3,#f3f9fd);
  box-shadow:inset 0 2px 3px rgba(41,86,120,.24),inset 0 -1px 0 rgba(255,255,255,.95)}
.co2 .hwscene .gpanel .outlets button:hover{border-color:var(--blue-t1);background:linear-gradient(180deg,#cfe4f5,#eef7fd)}
.co2 .hwscene .gpanel .outlets button::before{width:23px;height:14px;background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 16'><path fill-rule='evenodd' fill='%236f98b6' d='M4.6 1.2H23.4L26 3.8v7.4a3.4 3.4 0 0 1-3.4 3.4H5.4A3.4 3.4 0 0 1 2 11.2V3.8ZM7.9 4.3h1.9v5.2H7.9ZM18.2 4.3h1.9v5.2h-1.9ZM11.6 4.3h4.8v1.9h-4.8ZM11.6 7.6h4.8v1.9h-4.8Z'/></svg>") center/contain no-repeat}
.co2 .hwscene .gpanel .outlets button.ph1::before{background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 16'><path fill-rule='evenodd' fill='%23e8912a' d='M4.6 1.2H23.4L26 3.8v7.4a3.4 3.4 0 0 1-3.4 3.4H5.4A3.4 3.4 0 0 1 2 11.2V3.8ZM7.9 4.3h1.9v5.2H7.9ZM18.2 4.3h1.9v5.2h-1.9ZM11.6 4.3h4.8v1.9h-4.8ZM11.6 7.6h4.8v1.9h-4.8Z'/></svg>") center/contain no-repeat}
.co2 .hwscene .gpanel .outlets button.ph2::before{background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 16'><path fill-rule='evenodd' fill='%230071b9' d='M4.6 1.2H23.4L26 3.8v7.4a3.4 3.4 0 0 1-3.4 3.4H5.4A3.4 3.4 0 0 1 2 11.2V3.8ZM7.9 4.3h1.9v5.2H7.9ZM18.2 4.3h1.9v5.2h-1.9ZM11.6 4.3h4.8v1.9h-4.8ZM11.6 7.6h4.8v1.9h-4.8Z'/></svg>") center/contain no-repeat}
.co2 .hwscene .gpanel .outlets button.ph3::before{background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 16'><path fill-rule='evenodd' fill='%23008a88' d='M4.6 1.2H23.4L26 3.8v7.4a3.4 3.4 0 0 1-3.4 3.4H5.4A3.4 3.4 0 0 1 2 11.2V3.8ZM7.9 4.3h1.9v5.2H7.9ZM18.2 4.3h1.9v5.2h-1.9ZM11.6 4.3h4.8v1.9h-4.8ZM11.6 7.6h4.8v1.9h-4.8Z'/></svg>") center/contain no-repeat}
.co2 .hwscene .gpanel .outlets button .onum{color:var(--muted);right:4px}
/* the lit outlet keeps the one canonical active state */
.co2 .hwscene .gpanel .outlets button.on{background:var(--grad);border-color:#fff;
  box-shadow:0 6px 14px -6px rgba(0,40,70,.6),inset 0 1px 0 rgba(255,255,255,.5)}
.co2 .hwscene .gpanel .outlets button.on::before{background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 16'><path fill-rule='evenodd' fill='%23ffffff' d='M4.6 1.2H23.4L26 3.8v7.4a3.4 3.4 0 0 1-3.4 3.4H5.4A3.4 3.4 0 0 1 2 11.2V3.8ZM7.9 4.3h1.9v5.2H7.9ZM18.2 4.3h1.9v5.2h-1.9ZM11.6 4.3h4.8v1.9h-4.8ZM11.6 7.6h4.8v1.9h-4.8Z'/></svg>") center/contain no-repeat}
.co2 .hwscene .gpanel .outlets button.on .onum{color:#fff}
.co2 .hwscene .gpanel .pstrip.down{opacity:.62}
/* phase labels on the light body take the darker phase colours */
.co2 .hwscene .gpanel .outlets button .plbl.p1{color:var(--amber-d)}
.co2 .hwscene .gpanel .outlets button .plbl.p2{color:var(--blue)}
.co2 .hwscene .gpanel .outlets button .plbl.p3{color:var(--teal-d1)}
.co2 .hwscene .gpanel .outlets button.on .plbl{color:#fff}
.co2 .hwscene .gpanel .pdurow.trif .outl button.ph1{border-left-color:var(--amber-d)}
.co2 .hwscene .gpanel .pdurow.trif .outl button.ph2{border-left-color:var(--blue)}
.co2 .hwscene .gpanel .pdurow.trif .outl button.ph3{border-left-color:var(--teal-d1)}
/* the foot: a flat end cap, flush with the body */
/* 1081-1280: the PDU column stays at its old width so the port cages keep their
   three rows — the metering head stacks instead of shrinking */
@media (min-width:1081px) and (max-width:1280px){
  .co2 .hwscene{grid-template-columns:268px minmax(0,1fr) 158px}
  .co2 .hwscene .gpanel .pdurow{gap:13px;padding:9px 11px 12px 0}
  .co2 .hwscene .gpanel .pstrip{padding:0 0 0 12px}
  .co2 .hwscene .gpanel .pdu-meter{flex-wrap:wrap;justify-content:center;gap:3px;padding:3px}
  .co2 .hwscene .gpanel .pdu-meter .lcd{flex:0 0 100%;justify-content:center;text-align:center}
  .co2 .hwscene .gpanel .pdu-meter .lcd i{flex-basis:auto;margin-left:2px}
}
@media (max-width:1080px){
  .co2 .hwscene .gpanel .pstrip{padding:0 0 0 12px}
  .co2 .hwscene .gpanel .pdurow{gap:13px;padding:8px 9px 11px 0}
  /* the strips span the row here, so the head keeps the proportions of the real unit */
  .co2 .hwscene .gpanel .pdu-meter{max-width:184px;margin:0 auto}
  .co2 .hwscene .gpanel .pstrip .ph,
  .co2 .hwscene .gpanel .pstrip .brk{max-width:184px;margin-left:auto;margin-right:auto}
}

/* ================= PSU bays: real 1U hot-plug supply modules, drawn in 3D the
   way the PDU is (owner, 2026-09-11). Each module carries what the real thing
   carries — a recessed fan grille with its mesh, the status LED, the ribbed
   latch handle and the C14 inlet — on a brushed light-metal body extruded by a
   top face and a right side face, both lit from the upper left. ================= */
.co2 .hwscene .gpanel .pwgrid .bays{gap:12px;padding:7px 9px 0 0}
.co2 .hwscene .gpanel .pwgrid .bay{--pd:8px;--pk:6px;position:relative;min-width:0;min-height:46px;gap:4px;padding:5px 5px 5px 6px;
  border:0;border-radius:0;overflow:visible;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.3) 0 1px,rgba(120,160,190,.03) 1px 4px),
    linear-gradient(178deg,#fff 0,#f2f9fd 34%,#dfecf6 78%,#c3d9e9 100%);
  box-shadow:inset 0 0 0 1px rgba(126,166,196,.5),inset 0 2px 0 rgba(255,255,255,.95),
    inset 0 -3px 5px rgba(72,113,143,.2),0 12px 20px -14px rgba(0,45,80,.5)}
/* the extrusion: the top face runs the width of the module, the side face its height */
.co2 .hwscene .gpanel .pwgrid .bay .m3d{position:absolute;left:0;top:calc(-1 * var(--pk));pointer-events:none;
  width:calc(100% + var(--pd));height:var(--pk);
  background:linear-gradient(104deg,#fff,#edf6fc 52%,#d3e5f2);
  clip-path:polygon(0 100%,calc(100% - var(--pd)) 100%,100% 0,var(--pd) 0)}
.co2 .hwscene .gpanel .pwgrid .bay::before{content:"";position:absolute;left:100%;top:calc(-1 * var(--pk));
  pointer-events:none;width:var(--pd);height:calc(100% + var(--pk));border-radius:0;
  background:linear-gradient(90deg,#b0ccdf,#88adc8 58%,#6c95b4);
  clip-path:polygon(0 var(--pk),100% 0,100% calc(100% - var(--pk)),0 100%)}
/* fan grille: a well sunk into the face, its mesh drawn under the blades */
.co2 .hwscene .gpanel .pwgrid .bay .fan{order:1;width:28px;height:28px;border:0;border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 50%,rgba(110,150,180,.26) 0 1px,rgba(255,255,255,0) 1px 3px),
    radial-gradient(circle at 50% 34%,#eef6fb,#cfe0ee 72%,#b6cddf);
  box-shadow:inset 0 2px 3px rgba(41,86,120,.45),inset 0 -1px 0 rgba(255,255,255,.9),0 1px 0 #fff}
.co2 .hwscene .gpanel .pwgrid .bay .fan svg{width:21px;height:21px;stroke:var(--blue);stroke-width:1.5;opacity:.85}
.co2 .hwscene .gpanel .pwgrid .bay:not(.on) .fan{opacity:.55}
.co2 .hwscene .gpanel .pwgrid .bay:not(.on) .fan svg{stroke:var(--faint)}
/* status LED, stamped into the face like the lamps on /gazduire-web */
.co2 .hwscene .gpanel .pwgrid .bay .bled{order:2;width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle at 50% 34%,#eef3f7,#c3d5e2 62%,#a3bacd);
  box-shadow:inset 0 1px 2px rgba(60,95,125,.45),0 0 0 1px rgba(255,255,255,.9)}
.co2 .hwscene .gpanel .pwgrid .bay.on .bled{background:radial-gradient(circle at 50% 32%,#c8f7dc,#19b364 55%,#0c7a42);
  box-shadow:inset 0 1px 2px rgba(6,70,40,.5),0 0 0 1px rgba(255,255,255,.95),0 0 7px rgba(25,179,100,.8)}
/* the module's printed label: the <br> makes the two lines, so nothing else may
   break — a wrapped "REDUNDANTA" would push the module to three lines */
.co2 .hwscene .gpanel .pwgrid .bay .blbl{order:3;flex:1 1 0;min-width:0;white-space:nowrap;font:700 7px/1.5 var(--mono);
  letter-spacing:.02em;color:var(--ink-2);text-shadow:0 1px 0 #fff}
.co2 .hwscene .gpanel .pwgrid .bay.on .blbl{color:var(--blue-d1)}
/* the end of the module: the inlet with, on the removable supply, its switch */
.co2 .hwscene .gpanel .pwgrid .bay .mend{order:6;flex:none;display:flex;flex-direction:column;align-items:center;gap:3px}
.co2 .hwscene .gpanel .pwgrid .bay .psw{margin-left:0;width:22px;height:11px}
.co2 .hwscene .gpanel .pwgrid .bay .psw i{width:7px;height:7px}
.co2 .hwscene .gpanel .pwgrid .bay .psw.on i{left:13px}
/* the latch handle: a ribbed grip standing proud of the face */
.co2 .hwscene .gpanel .pwgrid .bay .hndl{order:5;flex:none;width:8px;height:24px;border-radius:2px;
  background:repeating-linear-gradient(180deg,#e8f2f9 0 2px,#b5cee1 2px 4px);
  box-shadow:inset 0 0 0 1px rgba(126,166,196,.6),0 1px 2px rgba(0,40,70,.28),inset 1px 0 0 rgba(255,255,255,.9)}
/* C14 inlet, in its own recess at the end of the module */
.co2 .hwscene .gpanel .pwgrid .bay .iec{display:block;flex:none;width:17px;height:13px;border:0;border-radius:2.5px;
  box-shadow:inset 0 1px 2px rgba(41,86,120,.45),0 1px 0 rgba(255,255,255,.9);
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 16'><path fill='%236f98b6' d='M4.6 1.2H23.4L26 3.8v7.4a3.4 3.4 0 0 1-3.4 3.4H5.4A3.4 3.4 0 0 1 2 11.2V3.8Z'/><g fill='%23ffffff'><rect x='7.4' y='4.2' width='2.6' height='4.8' rx='.6'/><rect x='18' y='4.2' width='2.6' height='4.8' rx='.6'/><rect x='12.7' y='7.6' width='2.6' height='4.8' rx='.6'/></g></svg>") center/contain no-repeat,linear-gradient(#d7e7f2,#bcd4e6);
  box-shadow:none}
.co2 .hwscene .gpanel .pwgrid .bay .iec::after{content:none}
.co2 .hwscene .gpanel .pwgrid .bay.on .iec{background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 16'><path fill='%23ffffff' d='M4.6 1.2H23.4L26 3.8v7.4a3.4 3.4 0 0 1-3.4 3.4H5.4A3.4 3.4 0 0 1 2 11.2V3.8Z'/><g fill='%230071b9'><rect x='7.4' y='4.2' width='2.6' height='4.8' rx='.6'/><rect x='18' y='4.2' width='2.6' height='4.8' rx='.6'/><rect x='12.7' y='7.6' width='2.6' height='4.8' rx='.6'/></g></svg>") center/contain no-repeat}
.co2 .hwscene .gpanel .pwgrid .bay:not(.on){opacity:1;border-style:none}
.co2 .hwscene .gpanel .pwgrid .bay:not(.on) .iec{opacity:.5}
.co2 .hwscene .gpanel .pwgrid .bay:not(.on) .m3d{background:linear-gradient(104deg,#f7fbfd,#e6f0f7 52%,#cfdfeb)}
/* the empty bay reads as a slot waiting for a module */
.co2 .hwscene .gpanel .pwgrid .bay:not(.on){background:linear-gradient(178deg,#f4f9fc,#e6eef5 70%,#d7e4ee);
  box-shadow:inset 0 0 0 1px rgba(126,166,196,.45),inset 0 3px 6px rgba(72,113,143,.22)}
.co2 .hwscene .gpanel .pwgrid .bay:not(.on)::after{right:6px;top:4px;font-size:7px;color:var(--muted);opacity:1;text-shadow:0 1px 0 #fff}
/* ================= the AS6718 node stays inside the card: the chip row keeps
   the space the node needs and wraps when it runs out (EN/DE pushed the node
   76px past the card edge), and the node itself is a touch smaller. ================= */
.co2 .hwscene .asroute{flex-wrap:nowrap;align-items:center;gap:10px}
.co2 .hwscene .asnode.you{flex:1 1 auto;min-width:0}
.co2 .hwscene .aschips{flex-wrap:wrap;gap:5px}
.co2 .hwscene #chAS .ch{padding:5.5px 6px;gap:5px}
.co2 .hwscene #chAS .ch.asnone{padding:5.5px 6px;gap:5px}
.co2 .hwscene .asnode.nav{flex:none;margin-left:0;min-width:84px}
.co2 .hwscene .asbadge{width:84px;height:64px}
.co2 .hwscene .asbadge>svg{width:70px;height:70px;margin:-35px 0 0 -35px}
.co2 .hwscene .asbadge .nring{width:42px;height:42px;margin:-21px 0 0 -21px}
.co2 .hwscene .asbadge .nring.n2{width:60px;height:60px;margin:-30px 0 0 -30px}
.co2 .hwscene .asbadge .nhub{width:16px;height:16px;box-shadow:0 0 0 4px rgba(0,45,78,.3),0 0 13px rgba(125,238,236,.8)}
.co2 .hwscene .asnode.nav .ttl{font-size:11.5px;margin-top:6px}
.co2 .hwscene .asnode.nav .sub{font-size:8px;margin-top:20px}

/* ================= the monthly estimate beside the submit button, in the site
   palette (owner, 2026-09-12): a white capsule on the gradient band, a teal
   rim, the label in deep blue and the figure in the brand gradient — no more
   navy glass. ================= */
.co2 .cest{background:#fff;border:0;
  box-shadow:0 0 0 1.5px rgba(0,190,188,.5),0 16px 30px -18px rgba(0,25,45,.6)}
.co2 .cest::before{background:linear-gradient(90deg,transparent,rgba(0,190,188,.12),transparent)}
.co2 .cest::after{background:radial-gradient(circle,rgba(0,190,188,.16),transparent 68%)}
.co2 .cest-l{color:var(--blue-d1);text-shadow:none}
.co2 .cest b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  box-shadow:none;padding:7px 12px;
  /* the figure is gradient-clipped, so the old dark text-shadow showed through
     the transparent glyphs as a smudge (owner, 2026-09-12) */
  text-shadow:none}
.co2 .cest b::after{content:none}

/* the management panel kept only the IPMI port and the "included" list, so the
   three-column grid becomes a pair (owner, 2026-09-12) */
.co2 .hwscene .hw-svc .svcgrid3.svcsolo{grid-template-columns:minmax(0,300px) minmax(0,1fr);align-items:start}
.co2 .hwscene .hw-svc .svcgrid3.svcsolo .svincl{margin:0}
@media (max-width:760px){.co2 .hwscene .hw-svc .svcgrid3.svcsolo{grid-template-columns:1fr}}

/* ================= the AS6718 node moved out of the routing row and under the
   map (owner, 2026-09-12), so it centres under the drawing instead of hugging
   the card's right edge, and the routing row no longer reserves its space.
   ================= */
.co2 .hwscene .mapcol .asnode.nav{display:flex;justify-content:center;margin:6px auto 32px;min-width:0}
.co2 .hwscene .mapcol .asnode.nav .ttl,
.co2 .hwscene .mapcol .asnode.nav .sub{left:50%;right:auto;transform:translateX(-50%);text-align:center}
.co2 .hwscene .asroute{padding-bottom:0;min-height:0}

/* ================= the priced options that belong to the PDU column, in their
   own card under it (owner, 2026-09-12): extra C13 outlet, the two dedicated
   circuits, the remote KVM console and advanced monitoring. Narrow column, so
   each box is one compact row — name over price. ================= */
/* the white cards carry an 8px ring and a 26px band above them: 34px of tint,
   so the column's gap has to clear that or two cards melt into one light area
   (owner, 2026-09-13) */
.co2 .hwscene .hw-pdu{gap:46px}
.co2 .hwscene .hw-opt{flex:none;padding:14px 12px 12px;display:flex;flex-direction:column;gap:8px}
.co2 .hwscene .hw-opt .svt{margin:0;gap:7px;padding:7px 8px;border-radius:9px;
  flex-wrap:nowrap;align-items:center}
.co2 .hwscene .hw-opt .svt .svtx{flex:1 1 auto;gap:0}
.co2 .hwscene .hw-opt .svt .svn{font-size:10px;line-height:1.25;text-shadow:none}
.co2 .hwscene .hw-opt .svt .svd{display:none}
.co2 .hwscene .hw-opt .svt .svp{flex:none;margin-left:auto;font-size:9.5px;padding:3px 6px}
@media (max-width:1080px){
  .co2 .hwscene .hw-pdu{gap:46px}
  .co2 .hwscene .hw-opt{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
}

/* the included shelf sits under the PDU column (owner, 2026-09-12): a narrow
   card, one line per service, so the whole list reads down the column */
.co2 .hwscene .hw-incl{flex:none;padding:12px 12px 11px}
.co2 .hwscene .hw-incl .svincl{margin:0;padding:0;border:0;background:none}
.co2 .hwscene .hw-incl .svincl ul{display:flex;flex-direction:column;gap:5px;margin:8px 0 0;padding:0;list-style:none}
.co2 .hwscene .hw-incl .svincl li{font-size:9px;line-height:1.35;white-space:normal;padding-left:13px}
.co2 .hwscene .hw-incl .svincl li::before{top:4px}
@media (max-width:1080px){
  .co2 .hwscene .hw-incl .svincl ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:6px 14px}
}
/* the management card is one row now that the shelf moved out */
.co2 .hwscene .hw-svc .svcgrid3.svcsolo{grid-template-columns:minmax(0,320px)}

/* ================= the iLO/iDRAC/IPMI row moved onto the switch line, ahead of
   the cross-connect (owner, 2026-09-13): same box, sized to sit beside the XC
   cell instead of filling a card. ================= */
.co2 .hwscene .ipmicell{flex:0 1 auto;min-width:0;display:flex;align-items:center}
.co2 .hwscene .ipmicell .svt{margin:0;gap:7px;padding:7px 9px;border-radius:9px;flex-wrap:nowrap;align-items:center;width:auto}
.co2 .hwscene .ipmicell .svt .svtx{flex:0 1 auto;gap:0}
.co2 .hwscene .ipmicell .svt .svn{font-size:10px;line-height:1.25;white-space:nowrap;text-shadow:none}
.co2 .hwscene .ipmicell .svt .svd{display:none}
.co2 .hwscene .ipmicell .svt .svp{flex:none;margin-left:2px;font-size:9.5px;padding:3px 6px}
/* the included shelf's bullets are the /gazduire-web lamp, 1:1: a pale socket
   pressed into the card with the lit dot sunk inside it (owner, 2026-09-13) */
.co2 .hwscene .hw-incl .svincl li{padding-left:20px}
.co2 .hwscene .hw-incl .svincl li::before{content:"";position:absolute;left:0;top:2px;width:13px;height:13px;border-radius:50%;
  background:linear-gradient(180deg,#d9e5f1,#f7fbfe);
  box-shadow:inset 0 2px 3px rgba(10,60,110,.28),inset 0 -1px 1px rgba(255,255,255,.9),0 1px 0 #fff}
.co2 .hwscene .hw-incl .svincl li::after{content:"";position:absolute;left:3.5px;top:5.5px;width:6px;height:6px;border-radius:50%;
  background:var(--teal);
  box-shadow:inset 0 1.5px 2px rgba(0,0,0,.3),inset 0 -1px 1px rgba(255,255,255,.35)}
/* the BGP pills could not shrink (flex:none), so they hung 49px out of the
   switch card at 1180 and off the edge on a phone — let them wrap instead */
.co2 .hwscene .swbgp{flex:1 1 auto;min-width:0;flex-wrap:wrap}
.co2 .hwscene .swbgp .bgpled{max-width:100%}
/* below 1180 the server panel was meant to stack, but the <=1400 rule (three
   classes) outranked the <=1180 one (one class), so the chassis stayed in two
   columns: the PSU column took its whole 330px and the switch column was
   squeezed to nothing and clipped away by the scene's overflow — the ports,
   the cross-connect and the BGP pills were invisible on a phone. */
@media (max-width:1180px){
  .co2 .hwscene .hwrow{grid-template-columns:minmax(0,1fr)}
}
/* the submit block is a COLUMN flex; the phone rule that gave it flex-wrap
   made it wrap sideways — the scene stretches it to the grid row's height, so
   the GDPR block jumped into a second column 356px off the card. It stacks by
   direction, not by wrapping. */
@media (max-width:600px){
  .co2 .hwscene .cfg-send{flex-wrap:nowrap}
  .co2 .hwscene .cfg-legal{flex:0 0 auto;width:100%;min-width:0}
}

/* ================= the PDU rails, without the enclosure (owner, 2026-09-13):
   the head is a flat readout on the card, the feed label a stamped lamp with
   its name, the breaker a slim pill, and every outlet a socket tapped off the
   lit spine. Nothing is "drawn in a box" any more. ================= */
.co2 .hwscene .gpanel .pdurow{gap:18px;padding:4px 6px 6px 0}
/* head: the reading sits on the card, not in a bezel */
.co2 .hwscene .gpanel .pdu-meter{padding:0;border-radius:0;background:none;box-shadow:none;justify-content:center}
/* the reading is two lines on the rail — the current over the supply voltage —
   so nothing is cramped against the pill's edge (owner, 2026-09-13) */
.co2 .hwscene .gpanel .pdu-meter .lcd{flex:0 1 auto;flex-wrap:wrap;justify-content:center;align-items:baseline;
  gap:2px 2px;overflow:visible;
  padding:6px 10px 7px;border-radius:14px;background:var(--blue-t4);
  box-shadow:inset 0 0 0 1px var(--line);font:800 11px/1 var(--mono);color:var(--blue-d1);text-shadow:none;
  font-variant-numeric:tabular-nums}
/* the unit rides with the number (one text run, non-breaking), so a wide
   reading like "95.7 A" never splits across two lines */
.co2 .hwscene .gpanel .pdu-meter .lcd em{display:none}
.co2 .hwscene .gpanel .pdu-meter .lcd b{white-space:nowrap}
.co2 .hwscene .gpanel .pdu-meter .lcd b::after{content:" A";font-size:8px;opacity:.75;font-weight:700}
.co2 .hwscene .gpanel .pdu-meter .lcd i{flex:0 0 100%;margin:0;text-align:center;color:var(--faint);
  font:700 7.5px/1 var(--mono);letter-spacing:.08em}
.co2 .hwscene .gpanel .pdu-meter .lcd i::before{content:none}
.co2 .hwscene .gpanel .pstrip.down .pdu-meter .lcd{background:#eef3f7;color:var(--faint);box-shadow:inset 0 0 0 1px #e3eaf0}
/* feed label: lamp + name on the card */
.co2 .hwscene .gpanel .pstrip .ph{justify-content:flex-start;gap:7px;padding:0;border:0;background:none;box-shadow:none;
  font:800 9.5px/1 var(--mono);letter-spacing:.14em;color:var(--blue-d1);text-shadow:none}
.co2 .hwscene .gpanel .pdurow:not(.single) .pstrip .ph:hover{background:none;border:0;color:var(--blue)}
.co2 .hwscene .gpanel .pstrip.down .ph{background:none;border:0;color:var(--faint)}
.co2 .hwscene .gpanel .pstrip.down .ph::after{border-color:var(--line);background:#fff}
/* breaker: a slim switch pill instead of a moulded part */
/* the feed is thrown with a real switch: the knob slides and the label follows
   (owner, 2026-09-13) */
.co2 .hwscene .gpanel .pstrip .brk{margin:0;height:16px;border:0;border-radius:5px;cursor:pointer;
  background:var(--blue-t4);box-shadow:inset 0 0 0 1px var(--line);transition:background .18s}
.co2 .hwscene .gpanel .pdurow:not(.single) .pstrip .brk:hover{box-shadow:inset 0 0 0 1px var(--blue-t1)}
.co2 .hwscene .gpanel .pdurow.single .pstrip .brk{cursor:default}
.co2 .hwscene .gpanel .pstrip .brk::after{left:calc(100% - 13px);top:3px;bottom:3px;width:10px;transform:none;
  border-radius:3px;background:var(--grad);box-shadow:0 1px 2px rgba(0,40,70,.35);transition:left .18s,background .18s}
.co2 .hwscene .gpanel .pstrip .brk::before{content:"ON";right:auto;left:6px;font:800 6.5px/1 var(--mono);letter-spacing:.1em;color:var(--blue-d1)}
.co2 .hwscene .gpanel .pstrip.down .brk{background:#eef3f7;box-shadow:inset 0 0 0 1px #e1e9ef}
.co2 .hwscene .gpanel .pstrip.down .brk::after{left:3px;background:#c3d2dd;box-shadow:none}
.co2 .hwscene .gpanel .pstrip.down .brk::before{content:"OFF";left:auto;right:6px;color:var(--faint)}
/* the switch says it, so the badge beside the name goes */
.co2 .hwscene .gpanel .pstrip.down .ph::after{content:none}
/* nothing in the PDU column is rounder than 5px (owner, 2026-09-13) */
.co2 .hwscene .gpanel .pdu-meter .lcd,
.co2 .hwscene .hw-pdu .lcd,
.co2 .hwscene .hw-pdu .outlets button,
.co2 .hwscene .hw-pdu .ptype,
.co2 .hwscene .hw-pdu .ptype button,
.co2 .hwscene .hw-pdu .hwplate,
.co2 .hwscene .hw-pdu .plcd,
.co2 .hwscene .hw-pdu .peth,
.co2 .hwscene .hw-pdu .brk3 .b3 i,
.co2 .hwscene .hw-opt .svt,
.co2 .hwscene .hw-opt .svt .svp{border-radius:5px}
.co2 .hwscene .hw-pdu .outlets button .ochk{border-radius:5px}
.co2 .hwscene .gpanel .brk3 .b3 i{border:0;border-radius:999px;background:var(--blue-t4);box-shadow:inset 0 0 0 1px var(--line)}
.co2 .hwscene .gpanel .brk3 .b3 i::after{border-radius:999px}
/* outlets: socket rows beside the rail */
.co2 .hwscene .gpanel .pstrip .outlets{gap:6px}
/* the phase colours mean something only on a three-phase feed; on A/B they made
   the rail look like scattered toys, so the sockets stay one colour there */
.co2 .hwscene .gpanel .pstrip .outlets button::before{background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 16'><path fill-rule='evenodd' fill='%230071b9' d='M4.6 1.2H23.4L26 3.8v7.4a3.4 3.4 0 0 1-3.4 3.4H5.4A3.4 3.4 0 0 1 2 11.2V3.8ZM7.9 4.3h1.9v5.2H7.9ZM18.2 4.3h1.9v5.2h-1.9ZM11.6 4.3h4.8v1.9h-4.8ZM11.6 7.6h4.8v1.9h-4.8Z'/></svg>") center/contain no-repeat}
.co2 .hwscene .gpanel .pstrip .outlets button.on::before{background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 16'><path fill-rule='evenodd' fill='%23ffffff' d='M4.6 1.2H23.4L26 3.8v7.4a3.4 3.4 0 0 1-3.4 3.4H5.4A3.4 3.4 0 0 1 2 11.2V3.8ZM7.9 4.3h1.9v5.2H7.9ZM18.2 4.3h1.9v5.2h-1.9ZM11.6 4.3h4.8v1.9h-4.8ZM11.6 7.6h4.8v1.9h-4.8Z'/></svg>") center/contain no-repeat}
.co2 .hwscene .gpanel .pdurow.trif .outlets button.ph1::before{background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 16'><path fill-rule='evenodd' fill='%23e8912a' d='M4.6 1.2H23.4L26 3.8v7.4a3.4 3.4 0 0 1-3.4 3.4H5.4A3.4 3.4 0 0 1 2 11.2V3.8ZM7.9 4.3h1.9v5.2H7.9ZM18.2 4.3h1.9v5.2h-1.9ZM11.6 4.3h4.8v1.9h-4.8ZM11.6 7.6h4.8v1.9h-4.8Z'/></svg>") center/contain no-repeat}
.co2 .hwscene .gpanel .pdurow.trif .outlets button.ph2::before{background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 16'><path fill-rule='evenodd' fill='%230071b9' d='M4.6 1.2H23.4L26 3.8v7.4a3.4 3.4 0 0 1-3.4 3.4H5.4A3.4 3.4 0 0 1 2 11.2V3.8ZM7.9 4.3h1.9v5.2H7.9ZM18.2 4.3h1.9v5.2h-1.9ZM11.6 4.3h4.8v1.9h-4.8ZM11.6 7.6h4.8v1.9h-4.8Z'/></svg>") center/contain no-repeat}
.co2 .hwscene .gpanel .pdurow.trif .outlets button.ph3::before{background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 16'><path fill-rule='evenodd' fill='%23008a88' d='M4.6 1.2H23.4L26 3.8v7.4a3.4 3.4 0 0 1-3.4 3.4H5.4A3.4 3.4 0 0 1 2 11.2V3.8ZM7.9 4.3h1.9v5.2H7.9ZM18.2 4.3h1.9v5.2h-1.9ZM11.6 4.3h4.8v1.9h-4.8ZM11.6 7.6h4.8v1.9h-4.8Z'/></svg>") center/contain no-repeat}
.co2 .hwscene .gpanel .pdurow.trif .outlets button.on::before{background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 16'><path fill-rule='evenodd' fill='%23ffffff' d='M4.6 1.2H23.4L26 3.8v7.4a3.4 3.4 0 0 1-3.4 3.4H5.4A3.4 3.4 0 0 1 2 11.2V3.8ZM7.9 4.3h1.9v5.2H7.9ZM18.2 4.3h1.9v5.2h-1.9ZM11.6 4.3h4.8v1.9h-4.8ZM11.6 7.6h4.8v1.9h-4.8Z'/></svg>") center/contain no-repeat}

/* the 158px PDU column leaves each rail ~57px, so the reading tightens there */
@media (max-width:1280px){
  .co2 .hwscene .gpanel .pdu-meter .lcd{padding:5px 7px 6px;border-radius:11px;font-size:9px}
  .co2 .hwscene .gpanel .pdu-meter .lcd b::after{font-size:7px}
  .co2 .hwscene .gpanel .pdu-meter .lcd i{font-size:7px;letter-spacing:.04em}
}
@media (max-width:1280px){
  .co2 .hwscene .gpanel .pdu-meter .lcd{border-radius:5px}
}