/*
  ATLAS STATUS — Orbital Hologram White V5
  Direction : sphère holographique / réseau / orbites.
  Blanc uniquement, transparence et halo néon.
  Aucun backdrop-filter.
*/

:root {
  color-scheme: dark;

  --bg: #020304;
  --panel: rgba(255,255,255,.025);
  --panel-strong: rgba(255,255,255,.045);

  --line: rgba(255,255,255,.24);
  --line-strong: rgba(255,255,255,.62);
  --line-soft: rgba(255,255,255,.09);

  --text: #f7f8fa;
  --muted: rgba(247,248,250,.58);
  --faint: rgba(247,248,250,.30);

  /* Les états restent légèrement colorés pour rester lisibles,
     tandis que toute l'interface HUD/hologramme reste blanche. */
  --ok: #dfffee;
  --warn: #ffe9b7;
  --bad: #ffc2ca;
  --planned: rgba(247,248,250,.56);

  --shadow: 0 18px 55px rgba(0,0,0,.34);
  --hud-glow: 0 0 22px rgba(255,255,255,.04);
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 50% -12%, rgba(255,255,255,.07), transparent 31%),
    radial-gradient(circle at 12% 34%, rgba(255,255,255,.025), transparent 22%),
    radial-gradient(circle at 86% 72%, rgba(255,255,255,.02), transparent 24%),
    linear-gradient(180deg, #030405 0%, #010203 58%, #000102 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

button,
input {
  font: inherit;
}

button {
  color: inherit;
}

/* --------------------------------------------------------------------------
   FOND HUD
   Aucun blur/filter : rendu plus fluide sous Windows/Chrome.
   -------------------------------------------------------------------------- */

.grid-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .24;

  /*
    Fond "constellation technique".
    Seulement des gradients statiques : pas de filtre ni canvas animé.
  */
  background-image:
    radial-gradient(circle at 12% 16%, rgba(255,255,255,.28) 0 1px, transparent 1.4px),
    radial-gradient(circle at 72% 12%, rgba(255,255,255,.20) 0 1px, transparent 1.4px),
    radial-gradient(circle at 91% 37%, rgba(255,255,255,.18) 0 1px, transparent 1.4px),
    radial-gradient(circle at 31% 83%, rgba(255,255,255,.18) 0 1px, transparent 1.4px),
    linear-gradient(27deg, transparent 49.75%, rgba(255,255,255,.027) 50%, transparent 50.25%),
    linear-gradient(151deg, transparent 49.8%, rgba(255,255,255,.021) 50%, transparent 50.2%),
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);

  background-size:
    280px 240px,
    330px 290px,
    410px 360px,
    370px 330px,
    190px 190px,
    240px 240px,
    70px 70px,
    70px 70px;

  mask-image: linear-gradient(to bottom, rgba(0,0,0,.95), rgba(0,0,0,.65) 68%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.95), rgba(0,0,0,.65) 68%, transparent 100%);
}

/* Ancien gros blur remplacé par des halos statiques en radial-gradient. */
.ambient {
  position: fixed;
  width: 58vw;
  height: 58vw;
  border-radius: 50%;
  opacity: .055;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.7) 0%, rgba(255,255,255,.16) 24%, transparent 68%);
}

.ambient-a {
  top: -31vw;
  left: -26vw;
}

.ambient-b {
  right: -31vw;
  bottom: -33vw;
  opacity: .035;
}

/* --------------------------------------------------------------------------
   PANNEAUX HOLOGRAMMES
   Les 8 gradients dessinent les "crochets" blancs aux quatre coins.
   -------------------------------------------------------------------------- */

.glass-panel {
  position: relative;
  background:
    radial-gradient(circle at 70% 48%, rgba(255,255,255,.035), transparent 40%),
    linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.012));

  border: 1px solid rgba(255,255,255,.38);

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.035),
    inset 0 0 24px rgba(255,255,255,.018),
    0 0 7px rgba(255,255,255,.18),
    0 0 20px rgba(255,255,255,.08),
    0 20px 54px rgba(0,0,0,.44);
}

/* --------------------------------------------------------------------------
   DASHBOARD
   -------------------------------------------------------------------------- */

.dashboard-shell {
  width: min(1480px, calc(100% - 64px));
  margin: 0 auto;
  padding: 52px 0 80px;
  position: relative;
  z-index: 1;
}

.topline {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-end;
  margin-bottom: 28px;
}

.eyebrow,
.service-kicker {
  font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  letter-spacing: .23em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}

.topline h1 {
  font-size: clamp(32px, 4vw, 58px);
  letter-spacing: -.055em;
  margin: 6px 0 0;
  font-weight: 560;
  text-shadow: 0 0 18px rgba(255,255,255,.08);
}

.topline-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.node-state,
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 2px;
  background: rgba(255,255,255,.018);
  color: rgba(255,255,255,.72);
  font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 700;
}

.pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow:
    0 0 0 4px rgba(255,255,255,.04),
    0 0 12px rgba(255,255,255,.42);
  animation: pulse 2.2s infinite ease-out;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .38; }
}

.ghost-button,
.tiny-button {
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.018);
  border-radius: 2px;
  padding: 10px 13px;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, opacity .18s ease;
}

.ghost-button:hover,
.tiny-button:hover {
  background: rgba(255,255,255,.065);
  border-color: rgba(255,255,255,.38);
}

/* --------------------------------------------------------------------------
   BLOC ATLAS
   -------------------------------------------------------------------------- */

.atlas-overview {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 26px 28px 24px;
  margin-bottom: 18px;
  transition: transform .24s cubic-bezier(.2,.8,.2,1), opacity .24s ease;
  contain: paint;
}


.atlas-overview::before {
  content: "";
  position: absolute;
  width: 340px;
  height: 340px;
  right: 32px;
  top: -60px;
  z-index: 0;
  pointer-events: none;

  background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20320%20320%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3CradialGradient%20id=%22core%22%20cx=%2242%25%22%20cy=%2238%25%22%20r=%2265%25%22%3E%0A%20%20%20%20%20%20%3Cstop%20offset=%220%22%20stop-color=%22white%22%20stop-opacity=%22.18%22/%3E%0A%20%20%20%20%20%20%3Cstop%20offset=%22.5%22%20stop-color=%22white%22%20stop-opacity=%22.055%22/%3E%0A%20%20%20%20%20%20%3Cstop%20offset=%221%22%20stop-color=%22white%22%20stop-opacity=%220%22/%3E%0A%20%20%20%20%3C/radialGradient%3E%0A%20%20%3C/defs%3E%0A%0A%20%20%3Ccircle%20cx=%22160%22%20cy=%22160%22%20r=%22112%22%20fill=%22url(%23core)%22%0A%20%20%20%20%20%20%20%20%20%20stroke=%22white%22%20stroke-opacity=%22.84%22%20stroke-width=%221.4%22/%3E%0A%0A%20%20%3C%21--%20latitude%20--%3E%0A%20%20%3Cg%20fill=%22none%22%20stroke=%22white%22%20stroke-width=%221%22%3E%0A%20%20%20%20%3Cellipse%20cx=%22160%22%20cy=%22160%22%20rx=%22108%22%20ry=%2232%22%20stroke-opacity=%22.28%22/%3E%0A%20%20%20%20%3Cellipse%20cx=%22160%22%20cy=%22160%22%20rx=%22108%22%20ry=%2262%22%20stroke-opacity=%22.24%22/%3E%0A%20%20%20%20%3Cellipse%20cx=%22160%22%20cy=%22160%22%20rx=%22108%22%20ry=%2288%22%20stroke-opacity=%22.18%22/%3E%0A%0A%20%20%20%20%3C%21--%20longitude%20--%3E%0A%20%20%20%20%3Cellipse%20cx=%22160%22%20cy=%22160%22%20rx=%2236%22%20ry=%22110%22%20stroke-opacity=%22.32%22/%3E%0A%20%20%20%20%3Cellipse%20cx=%22160%22%20cy=%22160%22%20rx=%2267%22%20ry=%22110%22%20stroke-opacity=%22.24%22/%3E%0A%20%20%20%20%3Cellipse%20cx=%22160%22%20cy=%22160%22%20rx=%2291%22%20ry=%22110%22%20stroke-opacity=%22.16%22/%3E%0A%20%20%3C/g%3E%0A%0A%20%20%3C%21--%20network%20--%3E%0A%20%20%3Cg%20fill=%22none%22%20stroke=%22white%22%20stroke-opacity=%22.40%22%20stroke-width=%221%22%3E%0A%20%20%20%20%3Cpath%20d=%22M73%20120%20L112%2091%20L147%20112%20L182%2078%20L224%20104%20L245%20148%20L212%20178%20L234%20218%20L188%20238%20L153%20207%20L114%20232%20L88%20190%20L73%20120%22/%3E%0A%20%20%20%20%3Cpath%20d=%22M112%2091%20L114%20145%20L153%20160%20L182%2078%22/%3E%0A%20%20%20%20%3Cpath%20d=%22M114%20145%20L88%20190%20L153%20207%20L153%20160%20L212%20178%20L224%20104%22/%3E%0A%20%20%20%20%3Cpath%20d=%22M147%20112%20L153%20160%20L188%20238%22/%3E%0A%20%20%20%20%3Cpath%20d=%22M73%20120%20L153%20160%20L245%20148%22/%3E%0A%20%20%20%20%3Cpath%20d=%22M114%20232%20L153%20160%20L234%20218%22/%3E%0A%20%20%3C/g%3E%0A%0A%20%20%3C%21--%20hex%20/%20HUD%20details%20--%3E%0A%20%20%3Cg%20fill=%22none%22%20stroke=%22white%22%20stroke-opacity=%22.42%22%20stroke-width=%22.9%22%3E%0A%20%20%20%20%3Cpath%20d=%22M188%20122%20l13%20-8%2013%208%200%2015%20-13%208%20-13%20-8z%22/%3E%0A%20%20%20%20%3Cpath%20d=%22M103%20171%20l10%20-6%2010%206%200%2012%20-10%206%20-10%20-6z%22/%3E%0A%20%20%20%20%3Ccircle%20cx=%22198%22%20cy=%22189%22%20r=%2210%22/%3E%0A%20%20%20%20%3Ccircle%20cx=%22198%22%20cy=%22189%22%20r=%2216%22%20stroke-opacity=%22.18%22/%3E%0A%20%20%20%20%3Cpath%20d=%22M140%2070%20h40%20M160%2050%20v40%22/%3E%0A%20%20%3C/g%3E%0A%0A%20%20%3C%21--%20nodes%20--%3E%0A%20%20%3Cg%20fill=%22white%22%3E%0A%20%20%20%20%3Ccircle%20cx=%2273%22%20cy=%22120%22%20r=%222.2%22%20fill-opacity=%22.86%22/%3E%0A%20%20%20%20%3Ccircle%20cx=%22112%22%20cy=%2291%22%20r=%222.5%22%20fill-opacity=%22.95%22/%3E%0A%20%20%20%20%3Ccircle%20cx=%22147%22%20cy=%22112%22%20r=%222%22%20fill-opacity=%22.70%22/%3E%0A%20%20%20%20%3Ccircle%20cx=%22182%22%20cy=%2278%22%20r=%222.8%22/%3E%0A%20%20%20%20%3Ccircle%20cx=%22224%22%20cy=%22104%22%20r=%222.2%22%20fill-opacity=%22.88%22/%3E%0A%20%20%20%20%3Ccircle%20cx=%22245%22%20cy=%22148%22%20r=%222.5%22/%3E%0A%20%20%20%20%3Ccircle%20cx=%22212%22%20cy=%22178%22%20r=%222.3%22%20fill-opacity=%22.82%22/%3E%0A%20%20%20%20%3Ccircle%20cx=%22234%22%20cy=%22218%22%20r=%222.8%22/%3E%0A%20%20%20%20%3Ccircle%20cx=%22188%22%20cy=%22238%22%20r=%222.2%22%20fill-opacity=%22.82%22/%3E%0A%20%20%20%20%3Ccircle%20cx=%22153%22%20cy=%22207%22%20r=%222.6%22/%3E%0A%20%20%20%20%3Ccircle%20cx=%22114%22%20cy=%22232%22%20r=%222.2%22%20fill-opacity=%22.82%22/%3E%0A%20%20%20%20%3Ccircle%20cx=%2288%22%20cy=%22190%22%20r=%222.6%22/%3E%0A%20%20%20%20%3Ccircle%20cx=%22114%22%20cy=%22145%22%20r=%222.2%22/%3E%0A%20%20%20%20%3Ccircle%20cx=%22153%22%20cy=%22160%22%20r=%223.2%22/%3E%0A%20%20%3C/g%3E%0A%0A%20%20%3C%21--%20bright%20core%20points%20--%3E%0A%20%20%3Cg%20fill=%22white%22%3E%0A%20%20%20%20%3Ccircle%20cx=%22182%22%20cy=%2278%22%20r=%225%22%20fill-opacity=%22.18%22/%3E%0A%20%20%20%20%3Ccircle%20cx=%22234%22%20cy=%22218%22%20r=%226%22%20fill-opacity=%22.15%22/%3E%0A%20%20%20%20%3Ccircle%20cx=%22153%22%20cy=%22160%22%20r=%228%22%20fill-opacity=%22.12%22/%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  opacity: .27;
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,.72))
    drop-shadow(0 0 10px rgba(255,255,255,.24));
}

.atlas-overview::after {
  content: "";
  position: absolute;
  width: 440px;
  height: 300px;
  right: -18px;
  top: -28px;
  z-index: 0;
  pointer-events: none;

  background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20420%20300%22%3E%0A%20%20%3Cg%20fill=%22none%22%20stroke=%22white%22%20stroke-linecap=%22round%22%3E%0A%20%20%20%20%3Cellipse%20cx=%22210%22%20cy=%22150%22%20rx=%22168%22%20ry=%2258%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20transform=%22rotate(-18%20210%20150)%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20stroke-opacity=%22.62%22%20stroke-width=%221.5%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20stroke-dasharray=%22125%2020%2046%2016%22/%3E%0A%20%20%20%20%3Cellipse%20cx=%22210%22%20cy=%22150%22%20rx=%22142%22%20ry=%2286%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20transform=%22rotate(31%20210%20150)%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20stroke-opacity=%22.32%22%20stroke-width=%221%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20stroke-dasharray=%2252%2015%2094%2018%22/%3E%0A%20%20%20%20%3Cellipse%20cx=%22210%22%20cy=%22150%22%20rx=%22102%22%20ry=%22129%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20transform=%22rotate(70%20210%20150)%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20stroke-opacity=%22.22%22%20stroke-width=%22.9%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20stroke-dasharray=%2265%2022%2038%2018%22/%3E%0A%20%20%3C/g%3E%0A%0A%20%20%3Cg%20fill=%22white%22%3E%0A%20%20%20%20%3Ccircle%20cx=%2259%22%20cy=%2298%22%20r=%223%22/%3E%0A%20%20%20%20%3Ccircle%20cx=%22350%22%20cy=%22116%22%20r=%223.4%22/%3E%0A%20%20%20%20%3Ccircle%20cx=%22332%22%20cy=%22225%22%20r=%222.8%22/%3E%0A%20%20%20%20%3Ccircle%20cx=%22139%22%20cy=%2246%22%20r=%222.6%22/%3E%0A%20%20%3C/g%3E%0A%0A%20%20%3Cg%20fill=%22none%22%20stroke=%22white%22%20stroke-opacity=%22.28%22%20stroke-width=%22.8%22%3E%0A%20%20%20%20%3Ccircle%20cx=%2259%22%20cy=%2298%22%20r=%228%22/%3E%0A%20%20%20%20%3Ccircle%20cx=%22350%22%20cy=%22116%22%20r=%229%22/%3E%0A%20%20%20%20%3Ccircle%20cx=%22332%22%20cy=%22225%22%20r=%227%22/%3E%0A%20%20%20%20%3Ccircle%20cx=%22139%22%20cy=%2246%22%20r=%227%22/%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  opacity: .28;
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,.64))
    drop-shadow(0 0 11px rgba(255,255,255,.22));
}

.overview-heading,
.metrics-row {
  position: relative;
  z-index: 2;
}

@media (hover: hover) {
  .atlas-overview:hover {
    transform: translate3d(0, -2px, 0);
  }
}

.card-hitbox {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: 0;
  z-index: 3;
}

.overview-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.overview-heading h2 {
  margin: 5px 0 0;
  font-size: 29px;
  letter-spacing: -.04em;
  font-weight: 560;
}

.metrics-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) 1.45fr;
  gap: 12px;
  margin-top: 36px;
}

.metric {
  min-height: 98px;
  padding: 18px;
  border-top: 1px solid rgba(255,255,255,.12);
  border-right: 1px solid rgba(255,255,255,.07);
  background:
    linear-gradient(90deg, rgba(255,255,255,.025), transparent 75%);
}

.metric span {
  display: block;
  color: var(--muted);
  font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  font-size: 9px;
  letter-spacing: .18em;
  font-weight: 700;
  margin-bottom: 8px;
}

.metric strong {
  font-weight: 430;
  font-size: 31px;
  letter-spacing: -.04em;
  text-shadow: 0 0 15px rgba(255,255,255,.08);
}

.metric small {
  color: var(--faint);
  margin-left: 4px;
  font-size: 12px;
}

.metric.wide strong {
  font-size: 22px;
}

.metric-bars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 12px;
  width: calc(80% - 6px);
}

.metric-bars div {
  height: 2px;
  background: rgba(255,255,255,.055);
  overflow: hidden;
}

.metric-bars i {
  display: block;
  width: var(--value);
  height: 100%;
  background: rgba(255,255,255,.82);
  box-shadow: 0 0 10px rgba(255,255,255,.22);
  transition: width .32s ease;
}

/* --------------------------------------------------------------------------
   CARTES SERVICES - HUD BLANC
   -------------------------------------------------------------------------- */

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
}

.service-card {
  position: relative;
  min-height: 260px;
  border-radius: 18px;
  padding: 22px;
  overflow: hidden;
  isolation: isolate;
  contain: paint;

  transition:
    transform .24s cubic-bezier(.2,.8,.2,1),
    border-color .2s ease,
    box-shadow .2s ease,
    opacity .24s ease;
}

/*
  "Réseau liquide" blanc à l'intérieur du bloc.
  Le motif est volontairement irrégulier : plusieurs familles de courbes
  se chevauchent pour éviter l'aspect simple grille.
*/
.service-card::before {
  content: "";
  position: absolute;
  width: 236px;
  height: 236px;
  right: -16px;
  top: 18px;
  z-index: 0;
  pointer-events: none;

  background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20320%20320%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3CradialGradient%20id=%22core%22%20cx=%2242%25%22%20cy=%2238%25%22%20r=%2265%25%22%3E%0A%20%20%20%20%20%20%3Cstop%20offset=%220%22%20stop-color=%22white%22%20stop-opacity=%22.18%22/%3E%0A%20%20%20%20%20%20%3Cstop%20offset=%22.5%22%20stop-color=%22white%22%20stop-opacity=%22.055%22/%3E%0A%20%20%20%20%20%20%3Cstop%20offset=%221%22%20stop-color=%22white%22%20stop-opacity=%220%22/%3E%0A%20%20%20%20%3C/radialGradient%3E%0A%20%20%3C/defs%3E%0A%0A%20%20%3Ccircle%20cx=%22160%22%20cy=%22160%22%20r=%22112%22%20fill=%22url(%23core)%22%0A%20%20%20%20%20%20%20%20%20%20stroke=%22white%22%20stroke-opacity=%22.84%22%20stroke-width=%221.4%22/%3E%0A%0A%20%20%3C%21--%20latitude%20--%3E%0A%20%20%3Cg%20fill=%22none%22%20stroke=%22white%22%20stroke-width=%221%22%3E%0A%20%20%20%20%3Cellipse%20cx=%22160%22%20cy=%22160%22%20rx=%22108%22%20ry=%2232%22%20stroke-opacity=%22.28%22/%3E%0A%20%20%20%20%3Cellipse%20cx=%22160%22%20cy=%22160%22%20rx=%22108%22%20ry=%2262%22%20stroke-opacity=%22.24%22/%3E%0A%20%20%20%20%3Cellipse%20cx=%22160%22%20cy=%22160%22%20rx=%22108%22%20ry=%2288%22%20stroke-opacity=%22.18%22/%3E%0A%0A%20%20%20%20%3C%21--%20longitude%20--%3E%0A%20%20%20%20%3Cellipse%20cx=%22160%22%20cy=%22160%22%20rx=%2236%22%20ry=%22110%22%20stroke-opacity=%22.32%22/%3E%0A%20%20%20%20%3Cellipse%20cx=%22160%22%20cy=%22160%22%20rx=%2267%22%20ry=%22110%22%20stroke-opacity=%22.24%22/%3E%0A%20%20%20%20%3Cellipse%20cx=%22160%22%20cy=%22160%22%20rx=%2291%22%20ry=%22110%22%20stroke-opacity=%22.16%22/%3E%0A%20%20%3C/g%3E%0A%0A%20%20%3C%21--%20network%20--%3E%0A%20%20%3Cg%20fill=%22none%22%20stroke=%22white%22%20stroke-opacity=%22.40%22%20stroke-width=%221%22%3E%0A%20%20%20%20%3Cpath%20d=%22M73%20120%20L112%2091%20L147%20112%20L182%2078%20L224%20104%20L245%20148%20L212%20178%20L234%20218%20L188%20238%20L153%20207%20L114%20232%20L88%20190%20L73%20120%22/%3E%0A%20%20%20%20%3Cpath%20d=%22M112%2091%20L114%20145%20L153%20160%20L182%2078%22/%3E%0A%20%20%20%20%3Cpath%20d=%22M114%20145%20L88%20190%20L153%20207%20L153%20160%20L212%20178%20L224%20104%22/%3E%0A%20%20%20%20%3Cpath%20d=%22M147%20112%20L153%20160%20L188%20238%22/%3E%0A%20%20%20%20%3Cpath%20d=%22M73%20120%20L153%20160%20L245%20148%22/%3E%0A%20%20%20%20%3Cpath%20d=%22M114%20232%20L153%20160%20L234%20218%22/%3E%0A%20%20%3C/g%3E%0A%0A%20%20%3C%21--%20hex%20/%20HUD%20details%20--%3E%0A%20%20%3Cg%20fill=%22none%22%20stroke=%22white%22%20stroke-opacity=%22.42%22%20stroke-width=%22.9%22%3E%0A%20%20%20%20%3Cpath%20d=%22M188%20122%20l13%20-8%2013%208%200%2015%20-13%208%20-13%20-8z%22/%3E%0A%20%20%20%20%3Cpath%20d=%22M103%20171%20l10%20-6%2010%206%200%2012%20-10%206%20-10%20-6z%22/%3E%0A%20%20%20%20%3Ccircle%20cx=%22198%22%20cy=%22189%22%20r=%2210%22/%3E%0A%20%20%20%20%3Ccircle%20cx=%22198%22%20cy=%22189%22%20r=%2216%22%20stroke-opacity=%22.18%22/%3E%0A%20%20%20%20%3Cpath%20d=%22M140%2070%20h40%20M160%2050%20v40%22/%3E%0A%20%20%3C/g%3E%0A%0A%20%20%3C%21--%20nodes%20--%3E%0A%20%20%3Cg%20fill=%22white%22%3E%0A%20%20%20%20%3Ccircle%20cx=%2273%22%20cy=%22120%22%20r=%222.2%22%20fill-opacity=%22.86%22/%3E%0A%20%20%20%20%3Ccircle%20cx=%22112%22%20cy=%2291%22%20r=%222.5%22%20fill-opacity=%22.95%22/%3E%0A%20%20%20%20%3Ccircle%20cx=%22147%22%20cy=%22112%22%20r=%222%22%20fill-opacity=%22.70%22/%3E%0A%20%20%20%20%3Ccircle%20cx=%22182%22%20cy=%2278%22%20r=%222.8%22/%3E%0A%20%20%20%20%3Ccircle%20cx=%22224%22%20cy=%22104%22%20r=%222.2%22%20fill-opacity=%22.88%22/%3E%0A%20%20%20%20%3Ccircle%20cx=%22245%22%20cy=%22148%22%20r=%222.5%22/%3E%0A%20%20%20%20%3Ccircle%20cx=%22212%22%20cy=%22178%22%20r=%222.3%22%20fill-opacity=%22.82%22/%3E%0A%20%20%20%20%3Ccircle%20cx=%22234%22%20cy=%22218%22%20r=%222.8%22/%3E%0A%20%20%20%20%3Ccircle%20cx=%22188%22%20cy=%22238%22%20r=%222.2%22%20fill-opacity=%22.82%22/%3E%0A%20%20%20%20%3Ccircle%20cx=%22153%22%20cy=%22207%22%20r=%222.6%22/%3E%0A%20%20%20%20%3Ccircle%20cx=%22114%22%20cy=%22232%22%20r=%222.2%22%20fill-opacity=%22.82%22/%3E%0A%20%20%20%20%3Ccircle%20cx=%2288%22%20cy=%22190%22%20r=%222.6%22/%3E%0A%20%20%20%20%3Ccircle%20cx=%22114%22%20cy=%22145%22%20r=%222.2%22/%3E%0A%20%20%20%20%3Ccircle%20cx=%22153%22%20cy=%22160%22%20r=%223.2%22/%3E%0A%20%20%3C/g%3E%0A%0A%20%20%3C%21--%20bright%20core%20points%20--%3E%0A%20%20%3Cg%20fill=%22white%22%3E%0A%20%20%20%20%3Ccircle%20cx=%22182%22%20cy=%2278%22%20r=%225%22%20fill-opacity=%22.18%22/%3E%0A%20%20%20%20%3Ccircle%20cx=%22234%22%20cy=%22218%22%20r=%226%22%20fill-opacity=%22.15%22/%3E%0A%20%20%20%20%3Ccircle%20cx=%22153%22%20cy=%22160%22%20r=%228%22%20fill-opacity=%22.12%22/%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  opacity: .58;

  filter:
    drop-shadow(0 0 2px rgba(255,255,255,.95))
    drop-shadow(0 0 7px rgba(255,255,255,.66))
    drop-shadow(0 0 18px rgba(255,255,255,.28));

  transform: translateZ(0);
}

/* Reflet lumineux principal de la plaque. */
.service-card::after {
  content: "";
  position: absolute;
  width: 310px;
  height: 228px;
  right: -52px;
  top: 20px;
  z-index: 0;
  pointer-events: none;

  background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20420%20300%22%3E%0A%20%20%3Cg%20fill=%22none%22%20stroke=%22white%22%20stroke-linecap=%22round%22%3E%0A%20%20%20%20%3Cellipse%20cx=%22210%22%20cy=%22150%22%20rx=%22168%22%20ry=%2258%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20transform=%22rotate(-18%20210%20150)%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20stroke-opacity=%22.62%22%20stroke-width=%221.5%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20stroke-dasharray=%22125%2020%2046%2016%22/%3E%0A%20%20%20%20%3Cellipse%20cx=%22210%22%20cy=%22150%22%20rx=%22142%22%20ry=%2286%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20transform=%22rotate(31%20210%20150)%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20stroke-opacity=%22.32%22%20stroke-width=%221%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20stroke-dasharray=%2252%2015%2094%2018%22/%3E%0A%20%20%20%20%3Cellipse%20cx=%22210%22%20cy=%22150%22%20rx=%22102%22%20ry=%22129%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20transform=%22rotate(70%20210%20150)%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20stroke-opacity=%22.22%22%20stroke-width=%22.9%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20stroke-dasharray=%2265%2022%2038%2018%22/%3E%0A%20%20%3C/g%3E%0A%0A%20%20%3Cg%20fill=%22white%22%3E%0A%20%20%20%20%3Ccircle%20cx=%2259%22%20cy=%2298%22%20r=%223%22/%3E%0A%20%20%20%20%3Ccircle%20cx=%22350%22%20cy=%22116%22%20r=%223.4%22/%3E%0A%20%20%20%20%3Ccircle%20cx=%22332%22%20cy=%22225%22%20r=%222.8%22/%3E%0A%20%20%20%20%3Ccircle%20cx=%22139%22%20cy=%2246%22%20r=%222.6%22/%3E%0A%20%20%3C/g%3E%0A%0A%20%20%3Cg%20fill=%22none%22%20stroke=%22white%22%20stroke-opacity=%22.28%22%20stroke-width=%22.8%22%3E%0A%20%20%20%20%3Ccircle%20cx=%2259%22%20cy=%2298%22%20r=%228%22/%3E%0A%20%20%20%20%3Ccircle%20cx=%22350%22%20cy=%22116%22%20r=%229%22/%3E%0A%20%20%20%20%3Ccircle%20cx=%22332%22%20cy=%22225%22%20r=%227%22/%3E%0A%20%20%20%20%3Ccircle%20cx=%22139%22%20cy=%2246%22%20r=%227%22/%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  opacity: .64;

  filter:
    drop-shadow(0 0 2px rgba(255,255,255,.95))
    drop-shadow(0 0 8px rgba(255,255,255,.72))
    drop-shadow(0 0 18px rgba(255,255,255,.30));

  transform: translateZ(0);
}

.service-head,
.service-body,
.service-foot {
  position: relative;
  z-index: 2;
}

@media (hover: hover) {
  .service-card:hover {
    transform: translate3d(0, -4px, 0);
    border-color: rgba(255,255,255,.88);

    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.08),
      inset 0 0 30px rgba(255,255,255,.03),
      0 0 5px rgba(255,255,255,.72),
      0 0 18px rgba(255,255,255,.30),
      0 0 42px rgba(255,255,255,.13),
      0 24px 68px rgba(0,0,0,.50);
  }

  .service-card:hover::before {
    opacity: .76;
    filter:
      drop-shadow(0 0 3px rgba(255,255,255,1))
      drop-shadow(0 0 9px rgba(255,255,255,.86))
      drop-shadow(0 0 22px rgba(255,255,255,.40));
  }

  .service-card:hover::after {
    opacity: .86;
    filter:
      drop-shadow(0 0 3px rgba(255,255,255,1))
      drop-shadow(0 0 10px rgba(255,255,255,.82))
      drop-shadow(0 0 24px rgba(255,255,255,.36));
  }
}

.service-card.planned {
  opacity: .48;
}

.service-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 1;
}

.service-icon {
  width: 44px;
  height: 44px;

  border: 1px solid rgba(255,255,255,.80);
  border-radius: 10px;

  display: grid;
  place-items: center;

  font-size: 11px;
  letter-spacing: .08em;
  font-weight: 800;

  background: rgba(255,255,255,.10);

  box-shadow:
    inset 0 0 12px rgba(255,255,255,.10),
    0 0 4px rgba(255,255,255,.72),
    0 0 13px rgba(255,255,255,.24);
}

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--muted);
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--planned);
  box-shadow: 0 0 9px currentColor;
}

.status-chip.online {
  color: var(--ok);
}

.status-chip.online .status-dot {
  background: var(--ok);
  box-shadow: 0 0 10px rgba(255,255,255,.46);
}

.status-chip.offline {
  color: var(--bad);
  opacity: .78;
}

.status-chip.offline .status-dot {
  background: var(--bad);
  box-shadow: none;
}

.status-chip.warning {
  color: var(--warn);
}

.status-chip.warning .status-dot {
  background: var(--warn);
}

.status-chip.planned {
  color: var(--planned);
}

.status-chip.large {
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 2px;
  background: rgba(255,255,255,.015);
}

.service-body {
  margin-top: 55px;
  position: relative;
  z-index: 2;
  max-width: 68%;
  text-shadow:
    0 1px 4px rgba(0,0,0,.95),
    0 0 10px rgba(0,0,0,.85);
}

.service-body h3 {
  margin: 6px 0 7px;
  font-size: 25px;
  letter-spacing: -.035em;
  font-weight: 540;
  text-shadow: 0 0 15px rgba(255,255,255,.08);
}

.service-body p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.service-foot {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 20px;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--faint);
  font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  font-size: 9px;
  letter-spacing: .12em;
  font-weight: 700;
}

.arrow {
  font-size: 18px;
  color: rgba(255,255,255,.75);
}

/* --------------------------------------------------------------------------
   MODALE / OUVERTURE D'UN BLOC
   Animation limitée à transform + opacity pour garder des FPS élevés.
   -------------------------------------------------------------------------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 32px;
  background: rgba(0,0,0,.82);

  /* Aucun backdrop-filter : évite le blur plein écran coûteux. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity .25s ease,
    visibility 0s linear .25s;
}

.modal-backdrop.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity .25s ease,
    visibility 0s linear 0s;
}

.service-modal {
  position: relative;
  width: min(960px, 100%);
  max-height: min(860px, calc(100vh - 64px));
  overflow: auto;
  border-radius: 20px;
  padding: 28px;

  background:
    radial-gradient(circle at 76% 24%, rgba(255,255,255,.05), transparent 34%),
    linear-gradient(145deg, rgba(20,22,25,.985), rgba(5,6,8,.99));

  border: 1px solid rgba(255,255,255,.70);

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    inset 0 0 36px rgba(255,255,255,.018),
    0 0 5px rgba(255,255,255,.54),
    0 0 18px rgba(255,255,255,.20),
    0 30px 92px rgba(0,0,0,.68);

  opacity: 0;
  transform: translate3d(0, 22px, 0) scale(.92);
  backface-visibility: hidden;
  will-change: transform, opacity;

  transition:
    transform .32s cubic-bezier(.18,.8,.22,1),
    opacity .22s ease;
}

.modal-backdrop.open .service-modal {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.modal-close {
  position: absolute;
  right: 18px;
  top: 17px;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.018);
  cursor: pointer;
  font-size: 22px;
  color: var(--muted);
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.modal-close:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.36);
  color: var(--text);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
  padding-right: 46px;
}

.modal-header h2 {
  margin: 6px 0 4px;
  font-size: 38px;
  letter-spacing: -.045em;
  font-weight: 550;
  text-shadow: 0 0 18px rgba(255,255,255,.07);
}

.modal-header p {
  margin: 0;
  color: var(--muted);
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 30px 0 20px;
}

.detail-tile {
  min-height: 84px;
  padding: 15px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 2px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.03), transparent 72%);
  position: relative;
}

.detail-tile::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  width: 19px;
  height: 1px;
  background: rgba(255,255,255,.58);
}

.detail-tile span {
  display: block;
  color: var(--faint);
  font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  font-size: 9px;
  letter-spacing: .16em;
  font-weight: 700;
  margin-bottom: 9px;
}

.detail-tile strong {
  font-size: 17px;
  font-weight: 500;
  word-break: break-word;
}

.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 8px;
}

.action-button {
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.025);
  border-radius: 2px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.action-button:hover:not(:disabled) {
  background: rgba(255,255,255,.075);
  border-color: rgba(255,255,255,.36);
  transform: translate3d(0, -1px, 0);
}

.action-button.stop {
  border-color: rgba(255,194,202,.24);
}

.action-button.start {
  border-color: rgba(223,255,238,.24);
}

.action-button:disabled {
  opacity: .28;
  cursor: not-allowed;
}

.terminal-section,
.rcon-section {
  margin-top: 20px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 2px;
  overflow: hidden;
  background: rgba(0,0,0,.34);
}

.terminal-head {
  min-height: 42px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,.09);
  font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  font-size: 9px;
  letter-spacing: .17em;
  color: var(--muted);
  font-weight: 700;
}

pre {
  margin: 0;
  padding: 15px;
  min-height: 190px;
  max-height: 330px;
  overflow: auto;
  color: rgba(239,244,247,.76);
  font: 12px/1.6 "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  white-space: pre-wrap;
  word-break: break-word;
}

.rcon-row {
  display: flex;
  gap: 8px;
  padding: 12px;
}

.rcon-row input {
  flex: 1;
  min-width: 0;
  border: 1px solid rgba(255,255,255,.17);
  background: rgba(0,0,0,.38);
  color: var(--text);
  padding: 11px 12px;
  border-radius: 2px;
  outline: none;
}

.rcon-row input:focus {
  border-color: rgba(255,255,255,.42);
  box-shadow: 0 0 0 2px rgba(255,255,255,.025);
}

/* --------------------------------------------------------------------------
   TOAST
   -------------------------------------------------------------------------- */

.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 100;
  max-width: 420px;
  padding: 13px 16px;
  border-radius: 2px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(10,11,12,.98);
  box-shadow: var(--shadow);
  color: var(--text);
  font-size: 13px;
  transform: translate3d(0, 20px, 0);
  opacity: 0;
  pointer-events: none;
  transition: transform .22s ease, opacity .22s ease;
}

.toast.show {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.toast.error {
  border-color: rgba(255,194,202,.35);
}

/* --------------------------------------------------------------------------
   LOGIN
   -------------------------------------------------------------------------- */

.login-page {
  display: grid;
  place-items: center;
  overflow: hidden;
}

.login-shell {
  position: relative;
  z-index: 2;
  width: min(460px, calc(100% - 36px));
}

.login-panel {
  border-radius: 20px;
  padding: 36px;
}

.login-mark {
  width: 50px;
  height: 50px;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 0;
  display: grid;
  place-items: center;
  font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  font-weight: 700;
  margin-bottom: 30px;
  background: rgba(255,255,255,.018);
  clip-path: polygon(
    0 10px,
    10px 0,
    100% 0,
    100% calc(100% - 10px),
    calc(100% - 10px) 100%,
    0 100%
  );
}

.login-panel h1 {
  font-size: 40px;
  letter-spacing: -.05em;
  margin: 7px 0 8px;
  font-weight: 550;
}

.login-copy {
  margin: 0 0 30px;
  color: var(--muted);
}

.login-form {
  display: grid;
  gap: 16px;
}

.login-form label span {
  display: block;
  color: var(--muted);
  font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  margin-bottom: 7px;
}

.login-form input {
  width: 100%;
  padding: 13px 14px;
  border-radius: 2px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.30);
  color: var(--text);
  outline: none;
}

.login-form input:focus {
  border-color: rgba(255,255,255,.44);
  box-shadow: 0 0 0 2px rgba(255,255,255,.025);
}

.primary-button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 2px;
  background: rgba(255,255,255,.93);
  color: #070809;
  font-weight: 700;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease;
}

.primary-button:hover:not(:disabled) {
  transform: translate3d(0, -1px, 0);
  background: #fff;
}

.primary-button:disabled {
  opacity: .25;
  cursor: not-allowed;
}

.login-footer {
  margin-top: 27px;
  color: var(--faint);
  font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  font-size: 9px;
  letter-spacing: .2em;
  display: flex;
  align-items: center;
  gap: 9px;
}

.alert {
  padding: 11px 12px;
  border-radius: 2px;
  margin: 0 0 16px;
  font-size: 12px;
  line-height: 1.5;
}

.alert.warning {
  background: rgba(255,233,183,.055);
  border: 1px solid rgba(255,233,183,.16);
  color: #f4e7c6;
}

.alert.error {
  background: rgba(255,194,202,.055);
  border: 1px solid rgba(255,194,202,.18);
  color: #ffd5da;
}


/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
  .service-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .metrics-row {
    grid-template-columns: repeat(3, 1fr);
  }

  .metric.wide {
    grid-column: span 2;
  }

  .metric-bars {
    width: 100%;
  }

  .detail-grid {
    grid-template-columns: repeat(2,1fr);
  }
}

@media (max-width: 650px) {
  .service-card::before {
    opacity: .34;
  }

  .service-card::after {
    opacity: .52;
  }


  .dashboard-shell {
    width: min(100% - 28px, 1480px);
    padding-top: 28px;
  }

  .topline {
    align-items: flex-start;
    flex-direction: column;
  }

  .topline-right {
    width: 100%;
    justify-content: space-between;
  }

  .service-grid {
    grid-template-columns: 1fr;
  }

  .atlas-overview {
    padding: 20px;
  }

  .metrics-row {
    grid-template-columns: repeat(2,1fr);
    margin-top: 24px;
  }

  .metric.wide {
    grid-column: span 2;
  }

  .modal-backdrop {
    padding: 12px;
  }

  .service-modal {
    padding: 22px 18px;
    max-height: calc(100vh - 24px);
  }

  .modal-header {
    flex-direction: column;
  }

  .detail-grid {
    grid-template-columns: 1fr 1fr;
  }

  .node-state {
    display: none;
  }
}

/* Réduit les animations si l'OS le demande. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


@media (max-width: 650px) {
  .service-card::before {
    opacity: .62;
    background-size: 128% auto;
    filter:
      drop-shadow(0 0 2px rgba(255,255,255,.86))
      drop-shadow(0 0 6px rgba(255,255,255,.48));
  }
}

@media (max-width: 650px) {
  .service-card::before {
    width: 210px;
    height: 210px;
    right: -42px;
    top: 30px;
    opacity: .46;
  }

  .service-card::after {
    width: 268px;
    height: 206px;
    right: -72px;
    top: 32px;
    opacity: .46;
  }

  .service-body {
    max-width: 74%;
  }

  .atlas-overview::before,
  .atlas-overview::after {
    opacity: .14;
  }
}