:root{
  color-scheme:dark;
  --red:#e1131b;
  --red-hot:#ff202a;
  --ink:#050607;
  --line:rgba(255,255,255,.14);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--ink);font-family:Inter,"Segoe UI",Arial,sans-serif;color:#fff}
body{overflow:hidden}
a{color:inherit}
.hub{
  min-height:100vh;
  background:#030405;
}

/* Fill any unused space on ultra-wide / short browser viewports with a
   dark atmospheric copy of the artwork, while keeping the real hub uncropped. */
.hub:before{
  content:"";
  position:fixed;
  inset:-24px;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(3,4,5,.66),rgba(3,4,5,.66)),
    url('/assets/pandemicz-hub.webp') center/cover no-repeat;
  filter:blur(14px) brightness(.50) saturate(.72);
  transform:scale(1.035);
}

/* Approved artwork is 1672x941 (1.7768:1).
   The stage always fits fully inside the browser viewport.
   Because hotspots live inside this same stage, their alignment remains exact. */
.hub-stage{
  position:fixed;
  z-index:1;
  left:50%;
  top:50%;
  width:min(100vw,177.68vh);
  height:min(100vh,56.28vw);
  overflow:hidden;
  background:#030405;
  opacity:0;
  transform:translate(-50%,-50%) scale(1.012);
  transition:opacity .75s ease,transform 1.25s cubic-bezier(.2,.75,.25,1);
  box-shadow:0 0 90px rgba(0,0,0,.46);
}
body.hub-ready .hub-stage{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}
.hub-art{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:fill;
  object-position:center;
  user-select:none;
  -webkit-user-drag:none;
}
.hub-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 48%,transparent 45%,rgba(0,0,0,.16) 74%,rgba(0,0,0,.42) 100%)}
.hub-scanlines{position:absolute;inset:0;pointer-events:none;opacity:.12;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.035) 0,rgba(255,255,255,.035) 1px,transparent 1px,transparent 4px);mix-blend-mode:overlay}
.hub-zone{
  position:absolute;
  inset:0;
  z-index:5;
  display:block;
  outline:none;
  cursor:pointer;
  background:transparent;
  transition:background .25s ease,filter .25s ease;
}
.hub-zone:focus-visible{
  filter:brightness(1.10);
}
.hub-zone-gaming{
  clip-path:polygon(
    0 10%,
    47.8% 34%,
    48.8% 49%,
    35% 70%,
    17% 100%,
    0 100%
  );
}
.hub-zone-modding{
  clip-path:polygon(
    100% 10%,
    52.2% 34%,
    51.2% 49%,
    65% 70%,
    83% 100%,
    100% 100%
  );
}
.hub-zone-gaming:hover,
.hub-zone-gaming:focus-visible{
  background:
    radial-gradient(circle at 27% 60%,rgba(225,19,27,.15),transparent 38%),
    linear-gradient(90deg,rgba(225,19,27,.045),transparent 62%);
}
.hub-zone-modding:hover,
.hub-zone-modding:focus-visible{
  background:
    radial-gradient(circle at 72% 59%,rgba(240,244,248,.11),transparent 38%),
    linear-gradient(270deg,rgba(235,240,245,.035),transparent 62%);
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hub-mobile{display:none}



/* ================================================================
   PANDEMICZ HUB v1.2.0 — INTEGRATED THREE-WORLD HOTSPOTS
   The approved artwork contains Gaming / Modding / Hosting itself.
   These are transparent interaction zones only.
   ================================================================ */

.hub-zone-hosting{
  clip-path:polygon(
    35% 70%,
    48.8% 49%,
    51.2% 49%,
    65% 70%,
    83% 100%,
    17% 100%
  );
}

.hub-zone-hosting:hover,
.hub-zone-hosting:focus-visible{
  background:
    radial-gradient(circle at 50% 82%,rgba(23,119,203,.19),transparent 38%),
    linear-gradient(0deg,rgba(19,95,168,.065),transparent 58%);
}

.hub-stage:has(.hub-zone-gaming:hover) .hub-art,
.hub-stage:has(.hub-zone-gaming:focus-visible) .hub-art{
  filter:saturate(1.035) contrast(1.012);
}

.hub-stage:has(.hub-zone-modding:hover) .hub-art,
.hub-stage:has(.hub-zone-modding:focus-visible) .hub-art{
  filter:brightness(1.018) contrast(1.01);
}

.hub-stage:has(.hub-zone-hosting:hover) .hub-art,
.hub-stage:has(.hub-zone-hosting:focus-visible) .hub-art{
  filter:saturate(1.06) brightness(1.015);
}

.hub-art{
  transition:filter .28s ease;
}



/* ================================================================
   PANDEMICZ HUB v1.2.2 — BRANCH ENERGY PULSE
   Pulse originates at the central PZ core and travels only through
   the branch currently under the pointer/focus.
   ================================================================ */

.hub-stage:before,
.hub-stage:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  opacity:0;
  will-change:transform,opacity,filter;
}

/* Expanding energy ring from the central PZ core. */
.hub-stage:before{
  background:
    radial-gradient(circle at 50% 50%,
      transparent 0 8%,
      var(--branch-pulse-soft,rgba(255,255,255,.05)) 10%,
      var(--branch-pulse,rgba(255,255,255,.52)) 11.1%,
      var(--branch-pulse-soft,rgba(255,255,255,.08)) 12.2%,
      transparent 14.2% 100%);
  transform-origin:50% 50%;
  mix-blend-mode:screen;
  filter:blur(.15px);
}

/* Softer wake behind the pulse. */
.hub-stage:after{
  background:
    radial-gradient(circle at 50% 50%,
      var(--branch-core,rgba(255,255,255,.20)) 0,
      var(--branch-pulse-soft,rgba(255,255,255,.08)) 8%,
      transparent 34%),
    linear-gradient(var(--branch-angle,90deg),
      transparent 35%,
      var(--branch-pulse-soft,rgba(255,255,255,.06)) 52%,
      transparent 72%);
  mix-blend-mode:screen;
}

/* Gaming: hot red pulse. */
.hub-stage:has(.hub-zone-gaming:hover),
.hub-stage:has(.hub-zone-gaming:focus-visible){
  --branch-pulse:rgba(255,46,55,.72);
  --branch-pulse-soft:rgba(225,19,27,.17);
  --branch-core:rgba(255,40,48,.24);
  --branch-angle:270deg;
}
.hub-stage:has(.hub-zone-gaming:hover):before,
.hub-stage:has(.hub-zone-gaming:focus-visible):before,
.hub-stage:has(.hub-zone-gaming:hover):after,
.hub-stage:has(.hub-zone-gaming:focus-visible):after{
  clip-path:polygon(0 0,27% 0,50% 50%,20% 100%,0 100%);
}

/* Modding: cool white/steel pulse. */
.hub-stage:has(.hub-zone-modding:hover),
.hub-stage:has(.hub-zone-modding:focus-visible){
  --branch-pulse:rgba(239,245,252,.68);
  --branch-pulse-soft:rgba(218,228,240,.15);
  --branch-core:rgba(239,245,252,.21);
  --branch-angle:90deg;
}
.hub-stage:has(.hub-zone-modding:hover):before,
.hub-stage:has(.hub-zone-modding:focus-visible):before,
.hub-stage:has(.hub-zone-modding:hover):after,
.hub-stage:has(.hub-zone-modding:focus-visible):after{
  clip-path:polygon(73% 0,100% 0,100% 100%,80% 100%,50% 50%);
}

/* Hosting: deep electric blue pulse. */
.hub-stage:has(.hub-zone-hosting:hover),
.hub-stage:has(.hub-zone-hosting:focus-visible){
  --branch-pulse:rgba(54,153,235,.78);
  --branch-pulse-soft:rgba(22,103,181,.19);
  --branch-core:rgba(52,143,221,.25);
  --branch-angle:180deg;
}
.hub-stage:has(.hub-zone-hosting:hover):before,
.hub-stage:has(.hub-zone-hosting:focus-visible):before,
.hub-stage:has(.hub-zone-hosting:hover):after,
.hub-stage:has(.hub-zone-hosting:focus-visible):after{
  clip-path:polygon(20% 100%,50% 50%,80% 100%);
}

/* Start the pulse only while a branch is active. */
.hub-stage:has(.hub-zone:hover):before,
.hub-stage:has(.hub-zone:focus-visible):before{
  animation:pzBranchPulse 1.72s cubic-bezier(.14,.70,.20,1) infinite;
}
.hub-stage:has(.hub-zone:hover):after,
.hub-stage:has(.hub-zone:focus-visible):after{
  animation:pzBranchWake 1.72s ease-in-out infinite;
}

@keyframes pzBranchPulse{
  0%{
    opacity:0;
    transform:scale(.22);
    filter:blur(.8px);
  }
  14%{opacity:.92}
  58%{opacity:.56}
  100%{
    opacity:0;
    transform:scale(4.75);
    filter:blur(1.5px);
  }
}

@keyframes pzBranchWake{
  0%,100%{opacity:.10;filter:brightness(.92)}
  28%{opacity:.30;filter:brightness(1.12)}
  62%{opacity:.16;filter:brightness(1.02)}
}

/* Keep the wedge glow restrained; the center pulse is the main feedback. */
.hub-zone-gaming:hover,
.hub-zone-gaming:focus-visible{
  background:radial-gradient(circle at 36% 58%,rgba(225,19,27,.075),transparent 42%);
}
.hub-zone-modding:hover,
.hub-zone-modding:focus-visible{
  background:radial-gradient(circle at 66% 57%,rgba(239,245,252,.060),transparent 42%);
}
.hub-zone-hosting:hover,
.hub-zone-hosting:focus-visible{
  background:radial-gradient(circle at 50% 82%,rgba(28,116,198,.095),transparent 44%);
}

@media (prefers-reduced-motion:reduce){
  .hub-stage:before,
  .hub-stage:after{
    animation:none!important;
  }
  .hub-stage:has(.hub-zone:hover):before,
  .hub-stage:has(.hub-zone:focus-visible):before{
    opacity:.34;
    transform:scale(1.25);
  }
  .hub-stage:has(.hub-zone:hover):after,
  .hub-stage:has(.hub-zone:focus-visible):after{
    opacity:.15;
  }
}



/* PANDEMICZ HUB v1.2.3 — CURVE-FOLLOWING ENERGY TRACE */
.hub-energy-lines{
  position:absolute;
  inset:0;
  z-index:4;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
}
.energy-group{
  opacity:0;
  transition:opacity .16s ease;
}
.energy-rail,
.energy-sweep{
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.energy-rail{
  stroke-width:3;
  opacity:.25;
}
.energy-sweep{
  stroke-width:8;
  stroke-dasharray:125 1800;
  stroke-dashoffset:0;
  opacity:.95;
}
.energy-gaming .energy-rail,
.energy-gaming .energy-sweep{
  stroke:#ff2932;
  filter:url(#pzGlowRed);
}
.energy-modding .energy-rail,
.energy-modding .energy-sweep{
  stroke:#edf4fb;
  filter:url(#pzGlowWhite);
}
.energy-hosting .energy-rail,
.energy-hosting .energy-sweep{
  stroke:#3198ed;
  filter:url(#pzGlowBlue);
}

.hub-stage:has(.hub-zone-gaming:hover) .energy-gaming,
.hub-stage:has(.hub-zone-gaming:focus-visible) .energy-gaming,
.hub-stage:has(.hub-zone-modding:hover) .energy-modding,
.hub-stage:has(.hub-zone-modding:focus-visible) .energy-modding,
.hub-stage:has(.hub-zone-hosting:hover) .energy-hosting,
.hub-stage:has(.hub-zone-hosting:focus-visible) .energy-hosting{
  opacity:1;
}

.hub-stage:has(.hub-zone:hover) .energy-sweep,
.hub-stage:has(.hub-zone:focus-visible) .energy-sweep{
  animation:pzCurveTravel 1.72s linear infinite;
}

@keyframes pzCurveTravel{
  from{stroke-dashoffset:0;opacity:.98}
  72%{opacity:.88}
  to{stroke-dashoffset:-1840;opacity:.12}
}

@media (prefers-reduced-motion:reduce){
  .energy-sweep{
    animation:none!important;
    stroke-dasharray:none;
    opacity:.48;
  }
}

@media (max-aspect-ratio: 4/3), (max-width: 760px){
  .hub:before{display:none}
  .hub-energy-lines{display:none}
  body{overflow:auto}
  .hub-stage{display:none}
  .hub-mobile{display:flex;min-height:100vh;flex-direction:column;padding:24px 18px 30px;background:radial-gradient(circle at 50% 12%,rgba(225,19,27,.12),transparent 31%),#050607}
  .mobile-brand{font-size:12px;font-weight:900;letter-spacing:3px;color:#d8dce1}.mobile-brand span{color:var(--red)}
  .mobile-kicker{margin:34px 0 8px;font-size:9px;letter-spacing:3px;color:#9096a0}.mobile-kicker b{color:var(--red)}
  .hub-mobile h1{margin:0 0 24px;font-size:clamp(34px,10vw,54px);line-height:.96;text-transform:uppercase;letter-spacing:-1.5px}.hub-mobile h1 span{color:var(--red)}
  .mobile-card{position:relative;display:block;min-height:245px;margin:0 0 14px;border:1px solid rgba(255,255,255,.16);overflow:hidden;text-decoration:none;background-image:url('/assets/pandemicz-hub.webp');background-size:auto 118%;box-shadow:0 18px 50px rgba(0,0,0,.34)}
  .mobile-card-gaming{background-position:17% 51%}
  .mobile-card-modding{background-position:84% 51%}
  .mobile-card-hosting{background-position:50% 87%}
  .mobile-card-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,4,5,.84),rgba(3,4,5,.31) 70%,rgba(3,4,5,.64)),linear-gradient(0deg,rgba(3,4,5,.94),transparent 70%)}
  .mobile-card-copy{position:absolute;left:22px;right:22px;bottom:22px;display:flex;flex-direction:column;align-items:flex-start}
  .mobile-card-copy small{font-size:9px;letter-spacing:3px;color:var(--red);font-weight:900}
  .mobile-card-copy strong{font-size:42px;line-height:1;margin:7px 0 7px;letter-spacing:-1px}
  .mobile-card-copy p{margin:0 0 16px;color:#c7ccd2;font-size:13px;text-transform:uppercase;letter-spacing:1.2px}
  .mobile-card-copy span{display:inline-flex;padding:12px 16px;border:1px solid rgba(255,255,255,.18);background:linear-gradient(180deg,#e61a22,#af0c13);font-size:10px;font-weight:900;letter-spacing:1.7px}
  .hub-mobile footer{margin-top:auto;padding-top:24px;text-align:center;color:#8d939c;font-size:8px;letter-spacing:2.4px}.hub-mobile footer i{color:var(--red);font-style:normal;margin:0 6px}
}

@media (prefers-reduced-motion:reduce){
  .hub-stage,.hub-zone{transition:none!important}
}


/* ================================================================
   PANDEMICZ SERVER HOSTING — COMING SOON PAGE
   ================================================================ */
.hosting-page{
  min-height:100vh;
  overflow:auto;
  background:
    radial-gradient(circle at 78% 26%,rgba(226,234,243,.10),transparent 27%),
    radial-gradient(circle at 22% 70%,rgba(225,19,27,.10),transparent 26%),
    linear-gradient(145deg,#050607,#090c10 58%,#0f141a);
}
.hosting-noise{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:10;
  opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.hosting-grid-bg{
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.14;
  background-image:
    linear-gradient(rgba(235,241,247,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(235,241,247,.045) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(90deg,transparent,#000 36%,#000 90%,transparent);
}
.hosting-coming-soon{
  width:min(1240px,calc(100% - 40px));
  min-height:100vh;
  margin:auto;
  display:flex;
  flex-direction:column;
}
.hosting-brand{
  width:max-content;
  display:flex;
  align-items:center;
  gap:13px;
  margin-top:30px;
  text-decoration:none;
}
.hosting-brand-mark{
  width:52px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid var(--red);
  color:#fff;
  font-size:18px;
  font-weight:1000;
  font-style:italic;
  letter-spacing:-2px;
  transform:skew(-7deg);
  box-shadow:inset 0 0 25px rgba(225,19,27,.15);
}
.hosting-brand>span:last-child{display:grid;line-height:1}
.hosting-brand b{
  color:#fff;
  font-size:12px;
  letter-spacing:3px;
}
.hosting-brand small{
  margin-top:6px;
  color:#757e88;
  font-size:7px;
  font-weight:900;
  letter-spacing:2.6px;
}
.hosting-hero{
  flex:1;
  display:grid;
  grid-template-columns:1fr .82fr;
  align-items:center;
  gap:90px;
  padding:70px 0;
}
.hosting-kicker{
  color:#9ea7b2;
  font-size:9px;
  font-weight:900;
  letter-spacing:2.4px;
}
.hosting-copy h1{
  margin:18px 0 24px;
  color:#fff;
  font-size:clamp(64px,8vw,112px);
  line-height:.84;
  letter-spacing:-5px;
}
.hosting-copy h1 em{
  color:#dce2e8;
  font-style:normal;
  text-shadow:0 0 46px rgba(221,229,238,.10);
}
.hosting-coming-label{
  width:max-content;
  padding:9px 13px;
  border:1px solid rgba(225,19,27,.58);
  background:rgba(225,19,27,.08);
  color:#f16a72;
  font-size:10px;
  font-weight:900;
  letter-spacing:2.5px;
}
.hosting-copy p{
  margin:18px 0 30px;
  color:#9da5af;
  font-size:19px;
}
.hosting-back{
  display:inline-flex;
  min-height:46px;
  align-items:center;
  padding:0 18px;
  border:1px solid rgba(221,230,239,.18);
  background:rgba(228,235,242,.025);
  color:#fff;
  font-size:10px;
  font-weight:900;
  letter-spacing:1.2px;
  text-decoration:none;
  text-transform:uppercase;
  transition:.2s;
}
.hosting-back:hover{
  transform:translateY(-2px);
  border-color:rgba(229,236,244,.36);
}
.hosting-visual{
  position:relative;
  border:1px solid rgba(220,229,239,.19);
  background:
    linear-gradient(145deg,rgba(229,236,244,.035),transparent 44%),
    #0e1217;
  box-shadow:0 32px 90px rgba(0,0,0,.42);
}
.hosting-visual:before,
.hosting-visual:after{
  content:"";
  position:absolute;
  width:26px;
  height:26px;
}
.hosting-visual:before{
  top:-1px;left:-1px;
  border-top:2px solid var(--red);
  border-left:2px solid var(--red);
}
.hosting-visual:after{
  bottom:-1px;right:-1px;
  border-bottom:2px solid rgba(231,238,245,.78);
  border-right:2px solid rgba(231,238,245,.78);
}
.hosting-visual-head{
  height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 17px;
  border-bottom:1px solid rgba(221,230,239,.10);
  color:#737c87;
  font-size:8px;
  font-weight:900;
  letter-spacing:1.3px;
}
.hosting-visual-head b{color:#e65a62}
.hosting-rack{
  display:grid;
  gap:13px;
  padding:38px;
}
.hosting-rack i{
  position:relative;
  height:66px;
  border:1px solid rgba(224,233,242,.16);
  background:linear-gradient(90deg,#090c10,#151b22);
  box-shadow:inset 0 1px rgba(239,244,248,.025),0 12px 30px rgba(0,0,0,.28);
}
.hosting-rack i:before,
.hosting-rack i:after{
  content:"";
  position:absolute;
  top:50%;
  width:8px;
  height:8px;
  border-radius:50%;
  transform:translateY(-50%);
}
.hosting-rack i:before{
  left:18px;
  background:var(--red);
  box-shadow:0 0 15px rgba(225,19,27,.34);
}
.hosting-rack i:after{
  left:39px;
  background:#66717d;
}
.hosting-rack i span{
  position:absolute;
  left:68px;
  right:150px;
  top:50%;
  height:2px;
  transform:translateY(-50%);
  background:rgba(225,233,241,.10);
}
.hosting-rack i b{
  position:absolute;
  right:20px;
  top:50%;
  width:105px;
  height:10px;
  transform:translateY(-50%);
  background:repeating-linear-gradient(90deg,rgba(221,230,239,.18) 0 3px,transparent 3px 7px);
}
.hosting-visual-footer{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(221,230,239,.10);
}
.hosting-visual-footer span{
  padding:15px 8px;
  text-align:center;
  border-right:1px solid rgba(221,230,239,.10);
  color:#737d88;
  font-size:7px;
  font-weight:900;
  letter-spacing:1px;
}
.hosting-visual-footer span:last-child{border-right:0}
.hosting-footer{
  padding:22px 0 26px;
  border-top:1px solid rgba(220,229,239,.09);
  text-align:center;
  color:#747d87;
  font-size:8px;
  letter-spacing:2.3px;
}
.hosting-footer i{
  margin:0 7px;
  color:var(--red);
  font-style:normal;
}

@media(max-width:840px){
  .hosting-hero{
    grid-template-columns:1fr;
    gap:42px;
    padding:70px 0 50px;
  }
  .hosting-visual{max-width:620px}
}
@media(max-width:520px){
  .hosting-coming-soon{width:calc(100% - 28px)}
  .hosting-brand{margin-top:18px}
  .hosting-copy h1{font-size:58px;letter-spacing:-3px}
  .hosting-copy p{font-size:16px}
  .hosting-rack{padding:22px}
  .hosting-rack i span{right:95px}
  .hosting-rack i b{width:58px}
}


/* ================================================================
   PANDEMICZ SERVER HOSTING v0.1.0 — PRE-LAUNCH STOREFRONT
   ================================================================ */

.hosting-prelaunch-page{
  min-height:100vh;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 78% 7%,rgba(25,113,191,.15),transparent 25%),
    radial-gradient(circle at 12% 42%,rgba(19,84,145,.07),transparent 26%),
    linear-gradient(145deg,#05080c,#08101a 58%,#07111b);
  color:#f4f6f8;
  font-family:Inter,"Segoe UI",Arial,sans-serif;
}

.hosting-prelaunch-page *{box-sizing:border-box}
.hosting-prelaunch-page a{text-decoration:none;color:inherit}

.hosting-prelaunch-noise{
  position:fixed;
  inset:0;
  z-index:50;
  pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.hosting-prelaunch-grid{
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.11;
  background-image:
    linear-gradient(rgba(115,181,235,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(115,181,235,.045) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(90deg,transparent,#000 18%,#000 90%,transparent);
}

.hosting-header{
  position:sticky;
  top:0;
  z-index:40;
  min-height:72px;
  display:flex;
  align-items:center;
  gap:30px;
  padding:0 max(24px,calc((100vw - 1240px)/2));
  border-bottom:1px solid rgba(139,196,241,.13);
  background:rgba(5,9,14,.88);
  backdrop-filter:blur(18px);
}

.hosting-header-brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:240px;
}
.hosting-header-mark{
  width:48px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid rgba(43,146,230,.70);
  color:#fff;
  font-size:17px;
  font-weight:1000;
  font-style:italic;
  letter-spacing:-2px;
  transform:skew(-7deg);
  box-shadow:inset 0 0 25px rgba(30,121,198,.18),0 0 18px rgba(29,112,184,.10);
}
.hosting-header-brand>span:last-child{display:grid;line-height:1}
.hosting-header-brand b{font-size:11px;letter-spacing:2.8px}
.hosting-header-brand small{
  margin-top:6px;
  color:#6fa8d4;
  font-size:7px;
  font-weight:900;
  letter-spacing:2.3px;
}

.hosting-header-nav{
  display:flex;
  align-items:center;
  gap:25px;
  margin-left:auto;
}
.hosting-header-nav a{
  position:relative;
  color:#8f9eab;
  font-size:12px;
  font-weight:800;
  transition:.2s;
}
.hosting-header-nav a:hover,
.hosting-header-nav a.active{color:#fff}
.hosting-header-nav a.active:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-26px;
  height:2px;
  background:#278edb;
  box-shadow:0 0 12px rgba(39,142,219,.38);
}

.hosting-header-discord{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  padding:0 15px;
  border:1px solid rgba(142,195,237,.16);
  background:rgba(94,159,211,.025);
  color:#dce9f4!important;
  font-size:9px;
  font-weight:900;
  letter-spacing:1px;
  text-transform:uppercase;
  transition:.2s;
}
.hosting-header-discord:hover{
  border-color:rgba(149,205,247,.34);
  background:rgba(91,161,216,.06);
}

.hosting-launch-hero{
  position:relative;
  width:min(1240px,calc(100% - 40px));
  min-height:650px;
  margin:auto;
  display:grid;
  grid-template-columns:1.05fr .82fr;
  align-items:center;
  gap:70px;
  padding:78px 0 68px;
}
.hosting-launch-hero:before{
  content:"";
  position:absolute;
  right:42%;
  bottom:0;
  width:1px;
  height:34%;
  background:linear-gradient(180deg,transparent,rgba(45,142,214,.26),transparent);
}

.hosting-launch-kicker{
  display:flex;
  align-items:center;
  gap:10px;
  color:#7ca9ca;
  font-size:9px;
  font-weight:900;
  letter-spacing:1.8px;
}
.hosting-status-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#2e95df;
  box-shadow:0 0 16px rgba(46,149,223,.68);
  animation:pzHostingStatus 1.7s ease-in-out infinite;
}
@keyframes pzHostingStatus{
  0%,100%{opacity:.48;box-shadow:0 0 7px rgba(46,149,223,.28)}
  50%{opacity:1;box-shadow:0 0 20px rgba(46,149,223,.75)}
}

.hosting-launch-copy h1{
  margin:20px 0 23px;
  font-size:clamp(52px,5.8vw,84px);
  line-height:.91;
  letter-spacing:-3.8px;
  text-transform:uppercase;
}
.hosting-launch-copy h1 em{
  color:#6db6ed;
  font-style:normal;
  text-shadow:0 0 38px rgba(53,150,222,.15);
}
.hosting-launch-lead{
  max-width:690px;
  margin:0;
  color:#9aa9b5;
  font-size:17px;
  line-height:1.7;
}
.hosting-launch-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:30px;
}
.hosting-blue-btn,
.hosting-ghost-btn{
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 20px;
  font-size:9px;
  font-weight:900;
  letter-spacing:1.2px;
  text-transform:uppercase;
  transition:.22s;
}
.hosting-blue-btn{
  border:1px solid #278edb;
  background:linear-gradient(180deg,#218bd8,#1166a4);
  color:#fff!important;
  box-shadow:0 15px 36px rgba(18,106,169,.20);
}
.hosting-blue-btn:hover{
  transform:translateY(-2px);
  background:linear-gradient(180deg,#2b9be9,#1575ba);
  box-shadow:0 20px 44px rgba(18,106,169,.28);
}
.hosting-ghost-btn{
  border:1px solid rgba(151,197,232,.17);
  background:rgba(108,164,207,.025);
  color:#dfeaf3!important;
}
.hosting-ghost-btn:hover{
  transform:translateY(-2px);
  border-color:rgba(153,207,248,.34);
}

.hosting-launch-note{
  max-width:700px;
  margin-top:25px;
  padding:12px 14px;
  border-left:2px solid #2489d4;
  background:rgba(24,91,143,.07);
  color:#738b9d;
  font-size:11px;
  line-height:1.55;
}
.hosting-launch-note strong{color:#79b9e9}

.hosting-launch-visual{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(132,190,236,.18);
  background:
    radial-gradient(circle at 50% 32%,rgba(31,132,210,.11),transparent 36%),
    linear-gradient(145deg,rgba(153,205,245,.025),transparent 50%),
    #091019;
  box-shadow:0 30px 90px rgba(0,0,0,.42);
}
.hosting-launch-visual:before,
.hosting-launch-visual:after{
  content:"";
  position:absolute;
  width:26px;
  height:26px;
  z-index:3;
}
.hosting-launch-visual:before{
  left:-1px;top:-1px;
  border-left:2px solid #2b95e1;
  border-top:2px solid #2b95e1;
}
.hosting-launch-visual:after{
  right:-1px;bottom:-1px;
  border-right:2px solid rgba(191,222,246,.65);
  border-bottom:2px solid rgba(191,222,246,.65);
}
.hosting-visual-top{
  height:44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
  border-bottom:1px solid rgba(139,193,234,.10);
  color:#647f94;
  font-size:8px;
  font-weight:900;
  letter-spacing:1.3px;
}
.hosting-visual-top b{color:#5bafea}

.hosting-visual-image{
  position:relative;
  min-height:335px;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:
    linear-gradient(rgba(91,161,215,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(91,161,215,.045) 1px,transparent 1px);
  background-size:32px 32px;
}
.hosting-server-orbit{
  position:absolute;
  width:360px;
  height:360px;
  border:1px solid rgba(72,161,227,.11);
  border-radius:50%;
  box-shadow:
    0 0 0 70px rgba(42,136,205,.025),
    0 0 0 140px rgba(42,136,205,.015);
}
.hosting-server-orbit:before,
.hosting-server-orbit:after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  background:rgba(74,170,237,.14);
  transform:translate(-50%,-50%);
}
.hosting-server-orbit:before{width:1px;height:130%}
.hosting-server-orbit:after{height:1px;width:130%}

.hosting-server-stack{
  position:relative;
  z-index:2;
  width:72%;
  display:grid;
  gap:10px;
}
.hosting-server-stack i{
  position:relative;
  height:52px;
  border:1px solid rgba(153,205,242,.20);
  background:linear-gradient(90deg,#07101a,#0e1d2a);
  box-shadow:inset 0 1px rgba(223,239,251,.025),0 12px 28px rgba(0,0,0,.30);
}
.hosting-server-stack i:before,
.hosting-server-stack i:after{
  content:"";
  position:absolute;
  top:50%;
  width:7px;
  height:7px;
  border-radius:50%;
  transform:translateY(-50%);
}
.hosting-server-stack i:before{
  left:15px;
  background:#2f9ce7;
  box-shadow:0 0 14px rgba(47,156,231,.45);
}
.hosting-server-stack i:after{
  left:34px;
  background:#536d80;
}
.hosting-server-stack i span{
  position:absolute;
  left:60px;
  right:112px;
  top:50%;
  height:2px;
  transform:translateY(-50%);
  background:rgba(151,204,243,.11);
}
.hosting-server-stack i b{
  position:absolute;
  right:15px;
  top:50%;
  width:78px;
  height:9px;
  transform:translateY(-50%);
  background:repeating-linear-gradient(90deg,rgba(130,193,239,.24) 0 3px,transparent 3px 7px);
}
.hosting-visual-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(139,193,234,.10);
}
.hosting-visual-stats>div{
  padding:15px;
  border-right:1px solid rgba(139,193,234,.10);
}
.hosting-visual-stats>div:last-child{border-right:0}
.hosting-visual-stats small{
  display:block;
  color:#607a8e;
  font-size:7px;
  font-weight:900;
  letter-spacing:1.2px;
}
.hosting-visual-stats strong{
  display:block;
  margin-top:5px;
  font-size:12px;
}
.hosting-visual-stats strong.blue{color:#55adeb}

.hosting-status-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(137,194,238,.10);
  border-bottom:1px solid rgba(137,194,238,.10);
  background:rgba(5,10,16,.72);
}
.hosting-status-strip>div{
  display:flex;
  align-items:center;
  gap:14px;
  padding:22px max(16px,calc((100vw - 1240px)/8));
  border-right:1px solid rgba(137,194,238,.10);
}
.hosting-status-strip>div:last-child{border-right:0}
.hosting-status-strip strong{
  color:#3c8cc6;
  font:11px Consolas,monospace;
}
.hosting-status-strip span{display:grid}
.hosting-status-strip b{
  font-size:9px;
  letter-spacing:.9px;
}
.hosting-status-strip small{
  margin-top:3px;
  color:#667f92;
  font-size:9px;
}

.hosting-section{
  position:relative;
  width:min(1240px,calc(100% - 40px));
  margin:auto;
  padding:82px 0;
}
.hosting-section-dark{
  width:100%;
  padding-left:max(20px,calc((100vw - 1240px)/2));
  padding-right:max(20px,calc((100vw - 1240px)/2));
  border-top:1px solid rgba(137,194,238,.07);
  border-bottom:1px solid rgba(137,194,238,.07);
  background:
    radial-gradient(circle at 88% 18%,rgba(27,119,190,.07),transparent 26%),
    linear-gradient(180deg,rgba(8,16,25,.92),rgba(6,12,19,.95));
}
.hosting-section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:40px;
  margin-bottom:30px;
}
.hosting-section-head>div>span{
  color:#5f98c1;
  font-size:8px;
  font-weight:900;
  letter-spacing:2px;
}
.hosting-section-head h2{
  margin:7px 0 0;
  font-size:38px;
  line-height:1.04;
  letter-spacing:-1.4px;
}
.hosting-section-head>p{
  max-width:560px;
  margin:0;
  color:#8495a2;
  font-size:13px;
  line-height:1.65;
}

.hosting-plan-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.hosting-plan-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:520px;
  padding:25px;
  overflow:hidden;
  border:1px solid rgba(132,188,231,.15);
  background:
    linear-gradient(145deg,rgba(133,194,239,.025),transparent 50%),
    #0a121b;
  transition:.25s;
}
.hosting-plan-card:before{
  content:"";
  position:absolute;
  left:-1px;top:-1px;
  width:22px;height:22px;
  border-left:2px solid rgba(42,146,222,.66);
  border-top:2px solid rgba(42,146,222,.66);
}
.hosting-plan-card:hover{
  transform:translateY(-5px);
  border-color:rgba(137,201,248,.28);
  box-shadow:0 24px 55px rgba(0,0,0,.25);
}
.hosting-plan-featured{
  border-color:rgba(52,159,235,.35);
  box-shadow:0 0 42px rgba(27,119,188,.06);
}
.hosting-plan-ribbon{
  position:absolute;
  top:0;right:0;
  padding:7px 10px;
  background:#1d73ad;
  color:#fff;
  font-size:7px;
  font-weight:900;
  letter-spacing:1px;
}
.hosting-plan-top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  color:#5c7c94;
  font-size:8px;
  font-weight:900;
  letter-spacing:1.1px;
}
.hosting-plan-top b{color:#4aa7e7}
.hosting-plan-card h3{
  margin:22px 0 7px;
  font-size:25px;
}
.hosting-plan-card>p{
  min-height:58px;
  margin:0;
  color:#8495a2;
  font-size:13px;
  line-height:1.55;
}
.hosting-price{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin:25px 0 19px;
  padding-bottom:18px;
  border-bottom:1px solid rgba(137,194,238,.10);
}
.hosting-price strong{
  font-size:34px;
  letter-spacing:-1px;
}
.hosting-price span{
  color:#667f92;
  font-size:10px;
}
.hosting-plan-card ul{
  flex:1;
  margin:0;
  padding:0;
  list-style:none;
}
.hosting-plan-card li{
  position:relative;
  padding:9px 0 9px 18px;
  border-bottom:1px solid rgba(137,194,238,.07);
  color:#9aabb8;
  font-size:12px;
}
.hosting-plan-card li:before{
  content:"+";
  position:absolute;
  left:0;
  color:#3e9ee0;
  font-weight:900;
}
.hosting-plan-card button{
  width:100%;
  min-height:44px;
  margin-top:22px;
  border:1px solid rgba(91,157,207,.15);
  background:#0b151f;
  color:#607b90;
  font-size:9px;
  font-weight:900;
  letter-spacing:1.2px;
  cursor:not-allowed;
}
.hosting-plan-disclaimer{
  margin:16px 0 0;
  color:#5f7484;
  font-size:10px;
  text-align:center;
}

.hosting-feature-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(137,194,238,.10);
  border-left:1px solid rgba(137,194,238,.10);
}
.hosting-feature-grid article{
  min-height:190px;
  padding:26px;
  border-right:1px solid rgba(137,194,238,.10);
  border-bottom:1px solid rgba(137,194,238,.10);
  background:rgba(109,172,219,.012);
}
.hosting-feature-grid article>span{
  color:#3b8bc6;
  font:9px Consolas,monospace;
}
.hosting-feature-grid h3{
  margin:19px 0 8px;
  font-size:19px;
}
.hosting-feature-grid p{
  margin:0;
  color:#8294a2;
  font-size:12px;
  line-height:1.6;
}

.hosting-roadmap{
  border:1px solid rgba(132,188,231,.14);
  background:#08111a;
}
.hosting-roadmap>div{
  display:grid;
  grid-template-columns:50px 1fr auto;
  align-items:center;
  gap:18px;
  min-height:80px;
  padding:14px 20px;
  border-bottom:1px solid rgba(137,194,238,.09);
}
.hosting-roadmap>div:last-child{border-bottom:0}
.hosting-roadmap>div>span{
  color:#477b9f;
  font:10px Consolas,monospace;
}
.hosting-roadmap>div>div{display:grid}
.hosting-roadmap b{font-size:13px}
.hosting-roadmap small{
  margin-top:4px;
  color:#718596;
  font-size:10px;
}
.hosting-roadmap em{
  padding:5px 7px;
  border:1px solid rgba(124,181,226,.14);
  color:#607c91;
  font-size:7px;
  font-style:normal;
  font-weight:900;
  letter-spacing:1px;
}
.hosting-roadmap>div.active{
  background:linear-gradient(90deg,rgba(24,118,189,.10),transparent);
}
.hosting-roadmap>div.active>span,
.hosting-roadmap>div.active em{color:#55afea}
.hosting-roadmap>div.active em{border-color:rgba(69,166,232,.34)}

.hosting-faq-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.hosting-faq-grid details{
  border:1px solid rgba(132,188,231,.13);
  background:#09121b;
}
.hosting-faq-grid summary{
  position:relative;
  padding:19px 45px 19px 19px;
  cursor:pointer;
  color:#e8eef3;
  font-size:12px;
  font-weight:800;
  list-style:none;
}
.hosting-faq-grid summary::-webkit-details-marker{display:none}
.hosting-faq-grid summary:after{
  content:"+";
  position:absolute;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  color:#449fdf;
  font-size:18px;
}
.hosting-faq-grid details[open] summary:after{content:"−"}
.hosting-faq-grid details p{
  margin:0;
  padding:0 19px 19px;
  color:#8093a2;
  font-size:12px;
  line-height:1.6;
}

.hosting-final-cta{
  width:min(1240px,calc(100% - 40px));
  margin:0 auto 70px;
  padding:48px;
  text-align:center;
  border:1px solid rgba(132,188,231,.16);
  background:
    radial-gradient(circle at 50% 100%,rgba(31,130,204,.14),transparent 42%),
    linear-gradient(145deg,#0b141e,#081019);
  box-shadow:0 26px 70px rgba(0,0,0,.24);
}
.hosting-final-cta>span{
  color:#5e9bc8;
  font-size:8px;
  font-weight:900;
  letter-spacing:2px;
}
.hosting-final-cta h2{
  margin:10px 0 9px;
  font-size:34px;
}
.hosting-final-cta p{
  margin:0 auto;
  max-width:620px;
  color:#8496a4;
  font-size:13px;
}
.hosting-final-cta>div{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:24px;
}

.hosting-prelaunch-footer{
  min-height:88px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:0 max(24px,calc((100vw - 1240px)/2));
  border-top:1px solid rgba(137,194,238,.10);
  background:#050a10;
  color:#637c8f;
  font-size:8px;
  letter-spacing:1.3px;
}
.hosting-prelaunch-footer>div{display:grid}
.hosting-prelaunch-footer b{
  color:#dfe7ed;
  font-size:10px;
  letter-spacing:2px;
}
.hosting-prelaunch-footer>div span{margin-top:5px}

@media(max-width:980px){
  .hosting-launch-hero{grid-template-columns:1fr;gap:36px}
  .hosting-launch-visual{max-width:720px}
  .hosting-plan-grid{grid-template-columns:1fr}
  .hosting-plan-card{min-height:auto}
  .hosting-feature-grid{grid-template-columns:1fr 1fr}
  .hosting-status-strip{grid-template-columns:1fr 1fr}
  .hosting-status-strip>div:nth-child(2){border-right:0}
  .hosting-status-strip>div:nth-child(-n+2){border-bottom:1px solid rgba(137,194,238,.10)}
}

@media(max-width:760px){
  .hosting-header{
    min-height:66px;
    padding:0 14px;
    gap:12px;
  }
  .hosting-header-brand{min-width:0}
  .hosting-header-brand b{font-size:9px}
  .hosting-header-brand small{font-size:6px}
  .hosting-header-mark{width:42px;height:34px}
  .hosting-header-nav{display:none}
  .hosting-header-discord{margin-left:auto}
  .hosting-launch-hero{
    width:calc(100% - 28px);
    min-height:auto;
    padding:62px 0 50px;
  }
  .hosting-launch-copy h1{
    font-size:48px;
    letter-spacing:-2.5px;
  }
  .hosting-launch-lead{font-size:15px}
  .hosting-section{
    width:calc(100% - 28px);
    padding:60px 0;
  }
  .hosting-section-dark{
    width:100%;
    padding-left:14px;
    padding-right:14px;
  }
  .hosting-section-head{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }
  .hosting-section-head h2{font-size:31px}
  .hosting-feature-grid{grid-template-columns:1fr}
  .hosting-faq-grid{grid-template-columns:1fr}
  .hosting-roadmap>div{
    grid-template-columns:36px 1fr;
  }
  .hosting-roadmap em{
    grid-column:2;
    width:max-content;
  }
  .hosting-final-cta{
    width:calc(100% - 28px);
    padding:32px 20px;
  }
  .hosting-final-cta>div{
    flex-direction:column;
  }
  .hosting-status-strip{grid-template-columns:1fr}
  .hosting-status-strip>div{
    border-right:0!important;
    border-bottom:1px solid rgba(137,194,238,.10);
    padding:16px 20px;
  }
  .hosting-status-strip>div:last-child{border-bottom:0}
  .hosting-prelaunch-footer{
    padding:20px 14px;
    flex-direction:column;
    align-items:flex-start;
  }
}


/* ================================================================
   PANDEMICZ SERVER HOSTING v0.1.1 — SCROLL FIX
   The main Hub intentionally uses body{overflow:hidden}; Hosting is
   a long page and explicitly opts back into normal document scroll.
   ================================================================ */

body.hosting-prelaunch-page{
  height:auto;
  min-height:100vh;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  overscroll-behavior-y:auto;
}

/* Modern browsers: ensure the root scrolling element is not locked
   while this specific page is open. */
html:has(body.hosting-prelaunch-page){
  height:auto;
  min-height:100%;
  overflow-x:hidden;
  overflow-y:auto;
  scroll-behavior:smooth;
}

/* Sticky header should not cover sections reached through #plans etc. */
.hosting-prelaunch-page .hosting-section,
.hosting-prelaunch-page #plans{
  scroll-margin-top:92px;
}

/* Fixed visual effects must never interfere with scrolling/clicking. */
.hosting-prelaunch-noise,
.hosting-prelaunch-grid{
  pointer-events:none !important;
}


/* ================================================================
   PANDEMICZ HOSTING v0.2.0 — MODDING-STYLE NAV + CONFIGURATOR
   ================================================================ */

.hosting-header{
  padding:0;
}
.hosting-nav-wrap{
  width:min(1240px,calc(100% - 40px));
  min-height:72px;
  margin:auto;
  display:flex;
  align-items:center;
  gap:28px;
}
.hosting-header-brand{min-width:225px}
.hosting-main-nav{
  display:flex;
  align-items:center;
  gap:24px;
  margin-left:auto;
}
.hosting-main-nav a{
  position:relative;
  color:#8e9eab;
  font-size:12px;
  font-weight:800;
  transition:.2s;
}
.hosting-main-nav a:hover,
.hosting-main-nav a.active{color:#fff}
.hosting-main-nav a.active:after{
  content:"";
  position:absolute;
  left:0;right:0;
  bottom:-27px;
  height:2px;
  background:#278edb;
  box-shadow:0 0 12px rgba(39,142,219,.38);
}
.hosting-nav-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.hosting-hub-btn,
.hosting-branch-link{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  padding:0 12px;
  color:#8f9eab!important;
  font-size:9px;
  font-weight:900;
  letter-spacing:.9px;
  text-transform:uppercase;
  white-space:nowrap;
  transition:.2s;
}
.hosting-hub-btn{
  border-left:1px solid rgba(139,196,241,.15);
  border-right:1px solid rgba(139,196,241,.08);
}
.hosting-hub-btn:hover,
.hosting-branch-link:hover{
  color:#fff!important;
  background:rgba(87,157,210,.04);
}
.hosting-mobile-toggle{
  display:none;
  margin-left:auto;
  border:0;
  background:transparent;
  color:#dfe9f1;
  font-size:21px;
  cursor:pointer;
}

.hosting-plan-card{
  padding:0;
}
.hosting-plan-art{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  border-bottom:1px solid rgba(132,188,231,.13);
  background:#07101a;
}
.hosting-plan-art:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,transparent 60%,rgba(5,10,16,.28));
}
.hosting-plan-art img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .35s ease,filter .35s ease;
}
.hosting-plan-card:hover .hosting-plan-art img{
  transform:scale(1.025);
  filter:brightness(1.08);
}
.hosting-plan-body{
  flex:1;
  display:flex;
  flex-direction:column;
  padding:25px;
}
.hosting-profile-specs{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin-top:19px;
  border:1px solid rgba(137,194,238,.10);
}
.hosting-profile-specs span{
  padding:11px 8px;
  border-right:1px solid rgba(137,194,238,.10);
}
.hosting-profile-specs span:last-child{border-right:0}
.hosting-profile-specs small{
  display:block;
  color:#5e778b;
  font-size:6px;
  font-weight:900;
  letter-spacing:.8px;
}
.hosting-profile-specs b{
  display:block;
  margin-top:4px;
  color:#cfe1ee;
  font-size:11px;
}
.hosting-preset-btn{
  cursor:pointer!important;
  border-color:rgba(53,151,220,.32)!important;
  color:#77b9e9!important;
  background:linear-gradient(180deg,rgba(29,112,172,.14),rgba(11,40,62,.18))!important;
  transition:.2s;
}
.hosting-preset-btn:hover{
  border-color:rgba(73,173,240,.56)!important;
  color:#fff!important;
  transform:translateY(-1px);
}

.hosting-builder-section{
  scroll-margin-top:92px;
}
.hosting-builder{
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(320px,.62fr);
  gap:16px;
  align-items:start;
}
.hosting-builder-controls{
  border:1px solid rgba(132,188,231,.14);
  background:#08111a;
}
.hosting-control-block{
  padding:23px;
  border-bottom:1px solid rgba(137,194,238,.09);
}
.hosting-control-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:17px;
}
.hosting-control-head>div{
  display:flex;
  align-items:center;
  gap:11px;
}
.hosting-control-head small{
  color:#3f8dc5;
  font:9px Consolas,monospace;
}
.hosting-control-head b{
  font-size:12px;
}
.hosting-control-head output{
  color:#72b7e8;
  font-size:11px;
  font-weight:900;
}
.hosting-control-block input[type="range"]{
  width:100%;
  height:4px;
  margin:3px 0 0;
  appearance:none;
  border:0;
  background:linear-gradient(90deg,#217fbd,#39a1e7);
  accent-color:#379fe5;
  cursor:pointer;
}
.hosting-range-labels{
  display:flex;
  justify-content:space-between;
  margin-top:8px;
  color:#526b7d;
  font-size:8px;
}
.hosting-choice-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:7px;
}
.hosting-choice-grid-storage{grid-template-columns:repeat(5,1fr)}
.hosting-choice-grid-cpu{grid-template-columns:repeat(3,1fr)}
.hosting-choice-grid button{
  min-height:40px;
  border:1px solid rgba(130,186,229,.12);
  background:#0b151f;
  color:#70879a;
  font-size:9px;
  font-weight:900;
  cursor:pointer;
  transition:.18s;
}
.hosting-choice-grid button:hover{
  color:#dbeaf5;
  border-color:rgba(74,161,224,.32);
}
.hosting-choice-grid button.active{
  color:#fff;
  border-color:#2f96dc;
  background:linear-gradient(180deg,rgba(45,144,211,.20),rgba(18,72,108,.16));
  box-shadow:inset 0 0 18px rgba(41,139,204,.08);
}
.hosting-control-row{
  padding:20px 23px;
  border-bottom:1px solid rgba(137,194,238,.09);
}
.hosting-control-row label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.hosting-control-row label>span{display:grid}
.hosting-control-row b{font-size:12px}
.hosting-control-row small{
  margin-top:4px;
  color:#60798c;
  font-size:8px;
}
.hosting-control-row select{
  min-width:205px;
  min-height:40px;
  padding:0 11px;
  border:1px solid rgba(132,188,231,.15);
  background:#0b151f;
  color:#bfd2e0;
  outline:none;
}
.hosting-addon-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
}
.hosting-addon-grid label{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:70px;
  padding:14px;
  border-right:1px solid rgba(137,194,238,.09);
  cursor:pointer;
}
.hosting-addon-grid label:last-child{border-right:0}
.hosting-addon-grid input{accent-color:#2d95dc}
.hosting-addon-grid span{display:grid}
.hosting-addon-grid b{font-size:10px}
.hosting-addon-grid small{
  margin-top:3px;
  color:#5f788b;
  font-size:8px;
}

.hosting-build-summary{
  position:sticky;
  top:92px;
  overflow:hidden;
  border:1px solid rgba(74,160,223,.24);
  background:
    radial-gradient(circle at 86% 4%,rgba(34,130,201,.10),transparent 32%),
    #09131d;
  box-shadow:0 25px 65px rgba(0,0,0,.26);
}
.hosting-build-summary:before,
.hosting-build-summary:after{
  content:"";
  position:absolute;
  width:24px;height:24px;
  pointer-events:none;
}
.hosting-build-summary:before{
  left:-1px;top:-1px;
  border-left:2px solid #3198e0;
  border-top:2px solid #3198e0;
}
.hosting-build-summary:after{
  right:-1px;bottom:-1px;
  border-right:2px solid rgba(169,212,244,.58);
  border-bottom:2px solid rgba(169,212,244,.58);
}
.hosting-summary-top{
  min-height:43px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 15px;
  border-bottom:1px solid rgba(137,194,238,.10);
  color:#5f7d93;
  font-size:7px;
  font-weight:900;
  letter-spacing:1.2px;
}
.hosting-summary-top b{
  padding:5px 7px;
  border:1px solid rgba(54,155,227,.30);
  color:#62b3ed;
  font-size:7px;
  letter-spacing:1px;
}
.hosting-summary-core{padding:23px}
.hosting-summary-kicker{
  color:#528fb9;
  font-size:7px;
  font-weight:900;
  letter-spacing:1.4px;
}
.hosting-summary-core h3{
  margin:6px 0 8px;
  font-size:27px;
}
.hosting-summary-core p{
  min-height:42px;
  margin:0;
  color:#7e93a3;
  font-size:11px;
  line-height:1.55;
}
.hosting-summary-specs{
  margin:0;
  border-top:1px solid rgba(137,194,238,.09);
}
.hosting-summary-specs div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  min-height:43px;
  padding:0 18px;
  border-bottom:1px solid rgba(137,194,238,.08);
}
.hosting-summary-specs dt{
  color:#647c8e;
  font-size:9px;
}
.hosting-summary-specs dd{
  margin:0;
  color:#d8e5ee;
  font-size:10px;
  font-weight:900;
  text-align:right;
}
.hosting-summary-addons{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:16px 18px;
  border-bottom:1px solid rgba(137,194,238,.08);
}
.hosting-summary-addons span{
  padding:5px 7px;
  border:1px solid rgba(111,173,220,.13);
  color:#728da1;
  font-size:7px;
  font-weight:900;
}
.hosting-summary-price{
  padding:19px 18px;
}
.hosting-summary-price small{
  display:block;
  color:#60798c;
  font-size:7px;
  font-weight:900;
  letter-spacing:1px;
}
.hosting-summary-price strong{
  display:block;
  margin:3px 0;
  font-size:32px;
}
.hosting-summary-price span{
  color:#5f778a;
  font-size:8px;
}
.hosting-summary-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid rgba(137,194,238,.09);
}
.hosting-summary-actions button,
.hosting-summary-actions a{
  min-height:45px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  background:#0a1621;
  color:#7ca7c6;
  font-size:7px;
  font-weight:900;
  letter-spacing:.8px;
  cursor:pointer;
  transition:.2s;
}
.hosting-summary-actions button{
  border-right:1px solid rgba(137,194,238,.09);
}
.hosting-summary-actions button:hover,
.hosting-summary-actions a:hover{
  color:#fff;
  background:#0d2030;
}
.hosting-copy-status{
  min-height:0;
  padding:0 18px;
  color:#62b5ec;
  font-size:8px;
}
.hosting-copy-status:not(:empty){
  min-height:34px;
  display:flex;
  align-items:center;
  border-top:1px solid rgba(137,194,238,.08);
}

@media(max-width:1180px){
  .hosting-main-nav{gap:15px}
  .hosting-nav-actions{gap:3px}
  .hosting-branch-link{display:none}
}
@media(max-width:980px){
  .hosting-builder{grid-template-columns:1fr}
  .hosting-build-summary{position:relative;top:auto}
}
@media(max-width:820px){
  .hosting-mobile-toggle{display:block}
  .hosting-main-nav{
    position:absolute;
    top:72px;
    left:0;right:0;
    display:none;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    padding:10px 20px;
    border-bottom:1px solid rgba(139,196,241,.12);
    background:rgba(5,9,14,.97);
  }
  body.hosting-menu-open .hosting-main-nav{display:flex}
  .hosting-main-nav a{
    width:100%;
    padding:10px 0;
  }
  .hosting-main-nav a.active:after{display:none}
  .hosting-nav-actions{margin-left:auto}
  .hosting-hub-btn{display:none}
}
@media(max-width:620px){
  .hosting-nav-wrap{width:calc(100% - 28px)}
  .hosting-header-discord{display:none}
  .hosting-choice-grid,
  .hosting-choice-grid-storage{grid-template-columns:repeat(3,1fr)}
  .hosting-choice-grid-cpu{grid-template-columns:1fr}
  .hosting-control-row label{
    align-items:flex-start;
    flex-direction:column;
  }
  .hosting-control-row select{width:100%;min-width:0}
  .hosting-addon-grid{grid-template-columns:1fr}
  .hosting-addon-grid label{
    border-right:0;
    border-bottom:1px solid rgba(137,194,238,.09);
  }
  .hosting-addon-grid label:last-child{border-bottom:0}
  .hosting-profile-specs{grid-template-columns:1fr}
  .hosting-profile-specs span{
    border-right:0;
    border-bottom:1px solid rgba(137,194,238,.10);
  }
  .hosting-profile-specs span:last-child{border-bottom:0}
}


/* ================================================================
   PANDEMICZ ECOSYSTEM v2.2.6 — UNIFIED HEADER
   GAMING HEADER IS THE MASTER GEOMETRY
   Hosting branch accent = blue/white
   ================================================================ */

.hosting-header{
  position:sticky;
  top:0;
  z-index:80;
  padding:0;
  background:rgba(8,9,11,.89);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(101,184,241,.12);
}

.hosting-nav{
  width:min(1240px,calc(100% - 40px));
  height:76px;
  margin:auto;
  display:flex;
  align-items:center;
  gap:34px;
}

.hosting-brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:245px;
}

/* Same 96px logo as Gaming.
   hue-rotate changes PandemicZ red to Hosting blue while white stays white. */
.hosting-brand img{
  width:96px;
  height:auto;
  display:block;
  filter:hue-rotate(198deg) saturate(1.12) brightness(1.08)
         drop-shadow(0 0 9px rgba(55,155,225,.10));
}

.hosting-brand-divider{
  width:1px;
  height:30px;
  background:linear-gradient(180deg,transparent,#4a5964,transparent);
}

.hosting-brand-subline{
  color:#6fb8eb;
  font-size:8px;
  font-weight:900;
  letter-spacing:3.5px;
}

.hosting-menu{
  display:flex;
  align-items:center;
  gap:28px;
  margin-left:auto;
}

.hosting-menu a{
  position:relative;
  color:#aaaeb5;
  font-size:13px;
  font-weight:700;
  transition:.2s;
}

.hosting-menu a:hover,
.hosting-menu a.active{
  color:#fff;
}

.hosting-menu a.active:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-29px;
  height:2px;
  background:#2f98df;
  box-shadow:0 0 12px rgba(47,152,223,.25);
}

.hosting-nav-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

.hosting-hub-link{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  padding:0 14px;
  border-left:1px solid rgba(137,194,238,.12);
  color:#9298a1!important;
  font-size:10px;
  font-weight:900;
  letter-spacing:1px;
  text-transform:uppercase;
  white-space:nowrap;
  transition:.2s;
}

.hosting-hub-link:hover{
  color:#fff!important;
}

.hosting-discord-btn{
  min-height:40px;
  padding:0 15px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(79,164,224,.30);
  background:linear-gradient(180deg,rgba(34,131,198,.16),rgba(17,73,112,.14));
  color:#eaf6ff!important;
  font-size:9px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:1.35px;
  transition:.22s;
}

.hosting-discord-btn:hover{
  transform:translateY(-2px);
  border-color:rgba(83,180,244,.55);
  background:linear-gradient(180deg,rgba(42,151,226,.23),rgba(18,86,132,.20));
}

@media(max-width:1050px){
  .hosting-menu{gap:18px}
  .hosting-brand{min-width:190px}
  .hosting-menu a{font-size:12px}
}

@media(max-width:900px){
  .hosting-menu{gap:14px}
  .hosting-menu a{font-size:11px}
  .hosting-hub-link{display:none}
}

@media(max-width:820px){
  .hosting-nav{
    height:auto;
    min-height:70px;
    flex-wrap:wrap;
    padding:12px 0;
  }
  .hosting-brand img{width:84px}
  .hosting-mobile-toggle{
    display:block;
    margin-left:auto;
  }
  .hosting-menu{
    order:4;
    width:100%;
    display:none;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    margin:0;
    padding:8px 0 4px;
    border-top:1px solid rgba(137,194,238,.10);
  }
  body.hosting-menu-open .hosting-menu{display:flex}
  .hosting-menu a{
    width:100%;
    padding:11px 0;
    font-size:13px;
  }
  .hosting-menu a.active:after{display:none}
  .hosting-nav-actions{margin-left:auto}
}

@media(max-width:560px){
  .hosting-nav{width:min(100% - 28px,1240px)}
  .hosting-brand-subline,
  .hosting-brand-divider{display:none}
  .hosting-discord-btn{display:none}
}


/* ================================================================
   PANDEMICZ ECOSYSTEM v2.2.7 — SHARED ACCOUNT ACCESS
   Hosting uses the central /Mods/ account system.
   ================================================================ */

.hosting-account-link{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 14px;
  border:1px solid rgba(54,156,226,.34);
  background:linear-gradient(180deg,rgba(40,143,214,.13),rgba(15,77,119,.10));
  color:#edf8ff!important;
  font-size:9px;
  font-weight:900;
  letter-spacing:1.15px;
  text-transform:uppercase;
  white-space:nowrap;
  transition:.22s;
}
.hosting-account-link:hover{
  transform:translateY(-2px);
  border-color:rgba(79,180,244,.62);
  background:linear-gradient(180deg,rgba(47,157,229,.20),rgba(20,95,145,.16));
  box-shadow:0 8px 22px rgba(46,149,223,.10);
}

@media(max-width:930px){
  .hosting-account-link{padding:0 11px}
}
@media(max-width:560px){
  /* Keep account access visible on phones even when Discord is hidden. */
  .hosting-account-link{
    min-height:38px;
    padding:0 12px;
    font-size:8px;
  }
}


/* ================================================================
   PANDEMICZ ECOSYSTEM v2.2.8 — HOSTING ACCOUNT + SESSION NAV
   ================================================================ */
.hosting-admin-link{min-height:40px;display:inline-flex;align-items:center;justify-content:center;padding:0 13px;border:1px solid rgba(54,156,226,.22);background:rgba(42,133,196,.035);color:#d8edf9!important;font-size:9px;font-weight:900;letter-spacing:1px;text-transform:uppercase;white-space:nowrap}.hosting-admin-link:hover{border-color:rgba(78,179,243,.48);color:#fff!important}.hosting-admin-link[hidden]{display:none!important}.hosting-account-page{overflow-y:auto!important}.hosting-account-hero{width:min(1240px,calc(100% - 40px));margin:auto;padding:66px 0 35px}.hosting-account-hero span,.hosting-account-head>div>span,.hosting-account-title span{color:#5ba6da;font-size:8px;font-weight:900;letter-spacing:1.8px}.hosting-account-hero h1{margin:7px 0 9px;font-size:48px;letter-spacing:-2px}.hosting-account-hero p{max-width:720px;margin:0;color:#8295a4;line-height:1.6}.hosting-account-section{padding:0 0 80px}.hosting-account-container{width:min(1240px,calc(100% - 40px));margin:auto}.hosting-account-guest{padding:54px;border:1px dashed rgba(116,184,231,.22);background:#09131d;text-align:center}.hosting-account-guest h2{font-size:31px;margin:0 0 8px}.hosting-account-guest p{color:#7e93a2}.hosting-account-guest>div{display:flex;justify-content:center;gap:9px;margin-top:20px}.hosting-account-head{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:23px;border:1px solid rgba(122,184,230,.13);background:#09131d}.hosting-account-head h2{margin:5px 0}.hosting-account-head p{margin:0;color:#6e8495}.hosting-account-head>div:last-child{display:flex;gap:8px}.hosting-account-head>div:last-child a{min-height:38px;display:flex;align-items:center;padding:0 12px;border:1px solid rgba(79,163,223,.20);color:#94bad5;font-size:8px;font-weight:900;text-transform:uppercase}.pz-account-tabs{display:grid;grid-template-columns:repeat(4,1fr);margin:18px 0 8px;border:1px solid rgba(122,184,230,.13);background:#08111a}.pz-account-tabs a{position:relative;min-height:70px;display:flex;justify-content:center;flex-direction:column;padding:13px 16px;border-right:1px solid rgba(122,184,230,.10);color:#728696!important;transition:.2s}.pz-account-tabs a:last-child{border-right:0}.pz-account-tabs a:hover,.pz-account-tabs a.active{color:#fff!important;background:rgba(67,151,210,.025)}.pz-account-tabs a:after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;opacity:0}.pz-account-tabs a.active:after{opacity:1}.pz-account-tabs a.modding.active:after,.pz-account-tabs a.gaming.active:after{background:#e1131b}.pz-account-tabs a.hosting.active:after{background:#3199df}.pz-account-tabs a.settings.active:after{background:#dce5ec}.pz-account-tabs span{font-size:7px;font-weight:900;letter-spacing:1.3px}.pz-account-tabs a.modding span{color:#c0c8cf}.pz-account-tabs a.gaming span{color:#d8585e}.pz-account-tabs a.hosting span{color:#5eb3eb}.pz-account-tabs b{margin-top:5px;font-size:10px}.hosting-account-title{display:flex;align-items:end;justify-content:space-between;margin:44px 0 14px}.hosting-account-title h2{margin:5px 0 0;font-size:28px}.hosting-account-title>b{color:#71899a;font:12px Consolas,monospace}.hosting-account-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}.hosting-account-grid article{padding:21px;border:1px solid rgba(122,184,230,.13);background:#09131d}.hosting-account-grid h3{margin:9px 0 5px}.hosting-account-grid p{margin:0;color:#7e93a3}.hosting-account-grid dl{margin:18px 0 0;border-top:1px solid rgba(122,184,230,.09)}.hosting-account-grid dl div{display:flex;justify-content:space-between;gap:15px;padding:9px 0;border-bottom:1px solid rgba(122,184,230,.08)}.hosting-account-grid dt{color:#6f8799;font-size:9px}.hosting-account-grid dd{margin:0;font-size:9px;text-align:right}.hosting-account-empty{grid-column:1/-1;padding:30px;border:1px dashed rgba(122,184,230,.16);color:#718797;text-align:center}.hosting-account-status{display:inline-flex;align-items:center;min-height:22px;padding:0 7px;border:1px solid rgba(128,185,228,.15);color:#7b94a6;font-size:7px;font-weight:900}.hosting-account-status.online,.hosting-account-status.active,.hosting-account-status.converted{border-color:rgba(53,181,119,.30);color:#62d293}.hosting-account-status.pending,.hosting-account-status.provisioning,.hosting-account-status.new,.hosting-account-status.quoted{border-color:rgba(57,159,229,.30);color:#69b7ea}.hosting-account-status.cancelled,.hosting-account-status.suspended,.hosting-account-status.closed{border-color:rgba(204,73,73,.28);color:#df7c7c}.hosting-account-table{overflow:auto;border:1px solid rgba(122,184,230,.13);background:#09131d}.hosting-account-table table{width:100%;min-width:700px;border-collapse:collapse}.hosting-account-table th,.hosting-account-table td{text-align:left;padding:13px;border-bottom:1px solid rgba(122,184,230,.08);font-size:10px}.hosting-account-table th{color:#667f91;font-size:7px;letter-spacing:1px;text-transform:uppercase}@media(max-width:800px){.hosting-account-grid{grid-template-columns:1fr 1fr}.pz-account-tabs{grid-template-columns:1fr 1fr}.pz-account-tabs a:nth-child(2){border-right:0}.pz-account-tabs a:nth-child(-n+2){border-bottom:1px solid rgba(122,184,230,.10)}}@media(max-width:560px){.hosting-account-grid{grid-template-columns:1fr}.hosting-account-head{align-items:flex-start;flex-direction:column}.hosting-account-guest>div{flex-direction:column}.hosting-account-hero,.hosting-account-container{width:calc(100% - 28px)}}


/* ================================================================
   PANDEMICZ ECOSYSTEM v2.2.16 — HOSTING MY ACCOUNT CONSISTENCY
   Public Hosting keeps its existing blue/white branch identity.
   ================================================================ */

.hosting-nav-actions .hosting-account-link{
  min-height:40px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 14px!important;
  border:1px solid rgba(54,156,226,.34)!important;
  background:linear-gradient(180deg,rgba(40,143,214,.13),rgba(15,77,119,.10))!important;
  color:#edf8ff!important;
  font-size:9px!important;
  font-weight:900!important;
  letter-spacing:1.15px!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}

.hosting-nav-actions .hosting-account-link:hover{
  transform:translateY(-2px);
  border-color:rgba(79,180,244,.62)!important;
  background:linear-gradient(180deg,rgba(47,157,229,.20),rgba(20,95,145,.16))!important;
  box-shadow:0 8px 22px rgba(46,149,223,.10)!important;
}


/* ================================================================
   PANDEMICZ ECOSYSTEM v2.2.22 — HOSTING CART
   ================================================================ */

.hosting-nav-actions .hosting-cart-link{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 14px;
  border:1px solid rgba(54,156,226,.34);
  background:linear-gradient(180deg,rgba(40,143,214,.13),rgba(15,77,119,.10));
  color:#edf8ff!important;
  font-size:9px;
  font-weight:900;
  letter-spacing:1.15px;
  text-transform:uppercase;
  white-space:nowrap;
  transition:.22s ease;
}

.hosting-nav-actions .hosting-cart-link:hover,
.hosting-nav-actions .hosting-cart-link.active{
  border-color:rgba(79,180,244,.62);
  background:linear-gradient(180deg,rgba(47,157,229,.20),rgba(20,95,145,.16));
  box-shadow:0 8px 22px rgba(46,149,223,.10);
}

.hosting-cart-link span{
  margin-left:7px;
  min-width:19px;
  height:19px;
  display:inline-grid;
  place-items:center;
  padding:0 5px;
  background:#2d91d7;
  color:#fff;
  font-size:8px;
  font-weight:900;
  border-radius:2px;
  box-shadow:0 0 10px rgba(45,145,215,.20);
}

.hosting-cart-empty{
  padding:46px;
  border:1px solid rgba(132,188,231,.16);
  background:
    radial-gradient(circle at 85% 10%,rgba(31,130,204,.09),transparent 34%),
    #09131d;
}
.hosting-cart-empty>span{
  color:#5897c3;
  font-size:8px;
  font-weight:900;
  letter-spacing:1.8px;
}
.hosting-cart-empty h2{
  margin:9px 0 10px;
  font-size:32px;
}
.hosting-cart-empty p{
  max-width:760px;
  color:#8093a2;
  font-size:13px;
  line-height:1.65;
}
.hosting-cart-empty>div{
  display:flex;
  gap:10px;
  margin-top:22px;
}

.hosting-cart-list{
  display:grid;
  gap:10px;
}
.hosting-cart-list article{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:20px;
  border:1px solid rgba(132,188,231,.14);
  background:#09131d;
}
.hosting-cart-list article span{
  color:#5897c3;
  font-size:7px;
  font-weight:900;
  letter-spacing:1.5px;
}
.hosting-cart-list article h3{
  margin:5px 0;
}
.hosting-cart-list article p{
  margin:0;
  color:#718697;
  font-size:10px;
}
.hosting-cart-checkout-lock{
  margin-top:14px;
  padding:15px 17px;
  border-left:2px solid #2d91d7;
  background:rgba(28,111,170,.08);
  color:#7894a8;
  font-size:10px;
}
.hosting-cart-checkout-lock b{
  color:#64b0e6;
  margin-right:8px;
}

@media(max-width:760px){
  .hosting-cart-empty{padding:28px 20px}
  .hosting-cart-empty>div{flex-direction:column}
}


/* ================================================================
   PANDEMICZ ECOSYSTEM v2.2.24 — ADMIN CORNER POSITION
   Hosting branch = blue/white.
   ================================================================ */

.pz-corner-admin{
  position:absolute!important;
  left:18px!important;
  top:50%!important;
  z-index:95!important;
  min-width:68px;
  min-height:38px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 13px!important;
  transform:translateY(-50%)!important;
  font-size:9px!important;
  font-weight:900!important;
  letter-spacing:1.1px!important;
  text-transform:uppercase!important;
  text-decoration:none!important;
  white-space:nowrap!important;
  transition:.22s ease!important;
}

.pz-corner-admin-blue{
  border:1px solid rgba(54,156,226,.42)!important;
  background:linear-gradient(180deg,rgba(40,143,214,.14),rgba(15,77,119,.11))!important;
  color:#edf8ff!important;
  box-shadow:inset 0 0 0 1px rgba(54,156,226,.02)!important;
}

.pz-corner-admin-blue:hover{
  border-color:rgba(79,180,244,.72)!important;
  background:linear-gradient(180deg,rgba(47,157,229,.22),rgba(20,95,145,.17))!important;
  box-shadow:0 0 16px rgba(46,149,223,.15)!important;
}

@media(max-width:760px){
  .pz-corner-admin{
    left:9px!important;
    min-width:54px;
    min-height:34px!important;
    padding:0 9px!important;
    font-size:7px!important;
  }
}


/* 2026-08-29 — PandemicZ navigation consistency: five account branches */
.hosting-account-page .pz-account-tabs{grid-template-columns:repeat(5,1fr)}
.hosting-account-page .pz-account-tabs a.metrics.active:after{background:#e1131b}
.hosting-account-page .pz-account-tabs a.metrics span{color:#ef6b70}
@media(max-width:800px){
  .hosting-account-page .pz-account-tabs{grid-template-columns:1fr 1fr}
  .hosting-account-page .pz-account-tabs a{border-bottom:1px solid rgba(122,184,230,.10)}
  .hosting-account-page .pz-account-tabs a:nth-child(even){border-right:0}
  .hosting-account-page .pz-account-tabs a:last-child{border-bottom:0}
}

/* PandemicZ account cleanup — Hosting sign out in main navigation */
.hosting-signout-form{margin:0;display:flex;align-items:center}.hosting-signout-link{min-height:40px;display:inline-flex;align-items:center;justify-content:center;padding:0 13px;border:1px solid rgba(74,167,230,.28);background:rgba(25,99,147,.08);color:#d5e5ef;font-size:8px;font-weight:900;letter-spacing:1px;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:.2s}.hosting-signout-link:hover{border-color:rgba(79,180,244,.58);color:#fff;background:rgba(25,108,163,.16)}
@media(max-width:820px){.hosting-signout-link{min-height:36px;padding:0 9px;font-size:7px}}

/* ================================================================
   PANDEMICZ HUB v2.1 — FOUR WORLDS + CLASSIC CURVE WAVE
   Restores the original full shared stylesheet and only overrides
   the root hub itself for Gaming / Modding / Hosting / Software.
   ================================================================ */
:root{--orange:#ff6b11}

/* The v2 artwork contains all four branches. */
.hub:before{
  background:
    linear-gradient(rgba(3,4,5,.58),rgba(3,4,5,.58)),
    url('/assets/pandemicz-hub-v2.webp') center/cover no-repeat;
  filter:blur(18px) brightness(.42) saturate(.84);
}
.hub-art{transition:filter .25s ease,transform .18s ease-out}

/* Four equal visual worlds around the central PZ core. */
.hub-zone-gaming{clip-path:polygon(0 0,50% 0,50% 36%,47.2% 49%,0 64%)}
.hub-zone-modding{clip-path:polygon(50% 0,100% 0,100% 64%,52.8% 49%,50% 36%)}
.hub-zone-hosting{clip-path:polygon(0 64%,47.2% 49%,50% 52%,50% 100%,0 100%)}
.hub-zone-software{clip-path:polygon(52.8% 49%,100% 64%,100% 100%,50% 100%,50% 52%)}

.hub-zone-gaming:hover,.hub-zone-gaming:focus-visible{background:radial-gradient(circle at 27% 36%,rgba(239,23,34,.18),transparent 40%)}
.hub-zone-modding:hover,.hub-zone-modding:focus-visible{background:radial-gradient(circle at 74% 36%,rgba(238,242,247,.13),transparent 40%)}
.hub-zone-hosting:hover,.hub-zone-hosting:focus-visible{background:radial-gradient(circle at 27% 76%,rgba(32,139,231,.20),transparent 42%)}
.hub-zone-software:hover,.hub-zone-software:focus-visible{background:radial-gradient(circle at 74% 76%,rgba(255,107,17,.22),transparent 42%)}

.hub-stage:has(.hub-zone-gaming:hover) .hub-art,.hub-stage:has(.hub-zone-gaming:focus-visible) .hub-art{filter:saturate(1.06) contrast(1.02)}
.hub-stage:has(.hub-zone-modding:hover) .hub-art,.hub-stage:has(.hub-zone-modding:focus-visible) .hub-art{filter:brightness(1.02) contrast(1.02)}
.hub-stage:has(.hub-zone-hosting:hover) .hub-art,.hub-stage:has(.hub-zone-hosting:focus-visible) .hub-art{filter:saturate(1.07) brightness(1.02)}
.hub-stage:has(.hub-zone-software:hover) .hub-art,.hub-stage:has(.hub-zone-software:focus-visible) .hub-art{filter:saturate(1.10) brightness(1.025)}

/* Disable the old radial branch pulse. The classic path-following wave
   below is the intended hover effect for the new four-world artwork. */
.hub-stage:before,.hub-stage:after{display:none!important}

/* Software gets the same rail + broad travelling wave as the original
   Gaming / Modding / Hosting lines, but in orange. */
.energy-software .energy-rail,
.energy-software .energy-sweep{
  stroke:#ff7a1c;
  filter:url(#pzGlowOrange);
}
.hub-stage:has(.hub-zone-software:hover) .energy-software,
.hub-stage:has(.hub-zone-software:focus-visible) .energy-software{opacity:1}

/* Current four-world mobile cards. */
@media (max-aspect-ratio:4/3), (max-width:760px){
  .hub-mobile{display:block;position:relative;z-index:2;min-height:100vh;padding:34px 18px 24px;background:radial-gradient(circle at 50% 0,rgba(255,107,17,.08),transparent 30%),#050607}
  .mobile-mark{width:48px;height:38px;border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;font-weight:950;letter-spacing:-.06em;color:#fff;margin-bottom:28px}
  .mobile-kicker{margin:0 0 8px;font-size:11px;letter-spacing:.19em;color:#8f9aa4}.mobile-kicker b{color:var(--orange)}
  .hub-mobile h1{margin:10px 0 28px;font-size:clamp(34px,10vw,54px);line-height:.95;text-transform:uppercase;letter-spacing:-.04em}.hub-mobile h1 span{color:#f02a32}
  .mobile-worlds{display:grid;gap:12px}
  .mobile-world{position:relative;display:block;min-height:145px;padding:22px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(135deg,rgba(255,255,255,.045),rgba(255,255,255,.015));overflow:hidden;text-decoration:none!important}
  .mobile-world:before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--accent)}
  .mobile-world:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:-70px;top:-85px;background:radial-gradient(circle,var(--glow),transparent 68%);opacity:.8}
  .mobile-world small{display:block;color:var(--accent);font-size:9px;letter-spacing:.2em;font-weight:800}
  .mobile-world strong{display:block;margin-top:7px;font-size:28px;letter-spacing:-.03em}
  .mobile-world p{margin:5px 0 16px;color:#9ba4ad;font-size:13px}
  .mobile-world span{font-size:10px;font-weight:900;letter-spacing:.12em}
  .mobile-world.red{--accent:#ef2530;--glow:rgba(239,37,48,.34)}
  .mobile-world.white{--accent:#e8edf3;--glow:rgba(232,237,243,.20)}
  .mobile-world.blue{--accent:#2d9df2;--glow:rgba(45,157,242,.32)}
  .mobile-world.orange{--accent:#ff7418;--glow:rgba(255,116,24,.36)}
  .hub-mobile footer{padding:28px 0 8px;color:#59636d;font-size:9px;letter-spacing:.12em;text-align:center}.hub-mobile footer i{color:#2d343a;font-style:normal;margin:0 5px}
}