/* AFG Overrides — radars + HUD (additive layer) */
.hero { position: relative; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: 0; }

#radar-canvas, .console-layer, .hud-layer {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
}

.hero-content { position: relative; z-index: 2; }

#radar-canvas { opacity: .18; }

.console-layer .mini-radar{
  position: absolute;
  width: 140px; height: 140px;
  border-radius: 14px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(120,255,200,.18);
  box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset;
  opacity: .55;
}

.mini-radar.tl-1 { top: 12%; left: 6%; }
.mini-radar.tl-2 { top: 28%; left: 10%; width: 110px; height: 110px; }
.mini-radar.tr-1 { top: 14%; right: 6%; width: 130px; height: 130px; }
.mini-radar.ml-1 { top: 52%; left: 4%; transform: translateY(-50%); width: 120px; height: 120px; }
.mini-radar.bl-1 { bottom: 10%; left: 8%; width: 140px; height: 140px; }
.mini-radar.br-1 { bottom: 12%; right: 7%; width: 110px; height: 110px; }

.hud-layer { z-index: 1; }
.hud-screen{
  position: absolute;
  width: 260px;
  padding: 12px 12px 10px;
  border-radius: 14px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(120,255,200,.18);
  opacity: .75;
  backdrop-filter: blur(2px);
}

.hud-left{ left: 6%; top: 56%; transform: translateY(-50%); }
.hud-right{ right: 6%; top: 56%; transform: translateY(-50%); text-align: right; }

.hud-title{
  font-family: "Rajdhani", system-ui, sans-serif;
  letter-spacing: .12em;
  font-weight: 700;
  font-size: 12px;
  opacity: .9;
  margin-bottom: 8px;
}

.hud-lines span{
  display: block;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 12px;
  opacity: .9;
  margin: 3px 0;
}

/* TikTok card (keeps your existing system) */
a.card.link.tiktok .logo-circle { background: rgba(255,255,255,.08); }

@media (max-width: 900px){
  .mini-radar.tl-2, .mini-radar.bl-1, .mini-radar.br-1, .mini-radar.mr-2 { display:none; }
  .hud-screen{ width: 210px; }
}
@media (max-width: 680px){
  .console-layer{ display:none; }
  .hud-layer{ display:none; }
}


/* Extra mini-radars (denser console look) */
.mini-radar.tr-2 { top: 32%; right: 10%; width: 110px; height: 110px; }
.mini-radar.mr-1 { top: 52%; right: 4%; transform: translateY(-50%); width: 120px; height: 120px; }
.mini-radar.mr-2 { top: 68%; right: 9%; width: 100px; height: 100px; }
.mini-radar.br-2 { bottom: 28%; right: 3%; width: 120px; height: 120px; }

/* Center hero logo */
.hero-logo{
  width: 140px;
  height: 140px;
  margin: 10px auto 6px;
  opacity: .92;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.45));
}
.hero-logo img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (max-width: 680px){
  .hero-logo{ width: 110px; height: 110px; }
}

/* Keep background vivid: reduce overlays a touch */
.console-layer .mini-radar{ opacity: .48; }
.hud-screen{ opacity: .68; }


/* OP ROOM WALL — command center screens */
.op-room{
  position:absolute; inset:0;
  pointer-events:none;
  z-index: 1;
  opacity: .95;
}

.op-panel{
  position:absolute;
  border-radius: 14px;
  border: 1px solid rgba(120,255,200,.18);
  background:
    radial-gradient(120% 120% at 20% 15%, rgba(60,120,90,.18), rgba(0,0,0,.0) 55%),
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.42));
  box-shadow:
    0 0 0 1px rgba(0,0,0,.25) inset,
    0 12px 26px rgba(0,0,0,.35);
  overflow:hidden;
  transform: translateZ(0);
  filter: saturate(1.1);
  opacity: .62;
}

.op-panel.lg{
  width: clamp(220px, 26vw, 360px);
  height: clamp(150px, 16vw, 240px);
}
.op-panel.sm{
  width: clamp(160px, 18vw, 260px);
  height: clamp(110px, 12vw, 180px);
}

.op-panel::before{
  content:"";
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.06) 0px,
      rgba(255,255,255,.06) 1px,
      rgba(0,0,0,0) 3px,
      rgba(0,0,0,0) 5px
    );
  opacity:.18;
  mix-blend-mode: overlay;
}

.op-panel::after{
  content: attr(data-label);
  position:absolute;
  left:10px; bottom:8px;
  font-family: "Rajdhani", system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: .12em;
  opacity: .85;
}

.op-panel canvas.op-screen{
  width:100%;
  height:100%;
  display:block;
}

/* positions (keep the center readable; screens wrap around) */
.op-panel.p1  { top: 8%;  left: 3%;  }
.op-panel.p2  { top: 10%; left: 26%; }
.op-panel.p3  { top: 10%; right: 26%; }
.op-panel.p4  { top: 8%;  right: 3%; }

.op-panel.p5  { top: 30%; left: 1.5%; }
.op-panel.p6  { top: 30%; right: 1.5%; }

.op-panel.p7  { bottom: 12%; left: 3%; }
.op-panel.p8  { bottom: 12%; right: 3%; }

.op-panel.p9  { bottom: 34%; left: 16%; }
.op-panel.p10 { bottom: 34%; right: 16%; }

.op-panel.p11 { top: 52%; left: 7%; }
.op-panel.p12 { top: 52%; right: 7%; }

.op-panel.p13 { top: 22%; left: 12%; }
.op-panel.p14 { top: 22%; right: 12%; }
.op-panel.p15 { bottom: 24%; left: 8%; }
.op-panel.p16 { bottom: 24%; right: 8%; }

/* flicker (subtle) */
@keyframes opFlicker{
  0%, 100% { opacity: .62; }
  50%      { opacity: .55; }
  52%      { opacity: .68; }
  58%      { opacity: .60; }
}
.op-panel{ animation: opFlicker 7s infinite; }
.op-panel:nth-child(2){ animation-delay: .6s; }
.op-panel:nth-child(3){ animation-delay: 1.1s; }
.op-panel:nth-child(4){ animation-delay: 1.8s; }
.op-panel:nth-child(5){ animation-delay: .3s; }
.op-panel:nth-child(6){ animation-delay: 2.2s; }
.op-panel:nth-child(7){ animation-delay: 1.4s; }
.op-panel:nth-child(8){ animation-delay: .9s; }

/* Keep hero background vivid (radar very light) */
#radar-canvas { opacity: .12; }

/* Responsive: reduce screen-wall on smaller devices */
@media (max-width: 1100px){
  .op-panel.p13, .op-panel.p14, .op-panel.p15, .op-panel.p16 { display:none; }
}
@media (max-width: 900px){
  .op-panel.p2, .op-panel.p3, .op-panel.p9, .op-panel.p10 { display:none; }
  .op-panel{ opacity: .55; }
}
@media (max-width: 680px){
  .op-room{ display:none; }
}


/* =========================
   OP ROOM WALL v4 (GRID)
   Fix overlap + make screens readable
   ========================= */
.console-layer, .hud-layer { display:none !important; }

.op-room{
  position:absolute;
  inset: 0;
  pointer-events:none;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(6, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 18px);
  padding: clamp(70px, 7vh, 110px) clamp(18px, 2.2vw, 38px) clamp(70px, 8vh, 130px);
}

/* Neutralise v3 absolute placement */
.op-panel{
  position: relative !important;
  top:auto !important; left:auto !important; right:auto !important; bottom:auto !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 16px;
  border: 1px solid rgba(120,255,200,.22);
  background:
    radial-gradient(120% 120% at 15% 20%, rgba(70,140,110,.22), rgba(0,0,0,0) 58%),
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.46));
  box-shadow:
    0 0 0 1px rgba(0,0,0,.28) inset,
    0 18px 34px rgba(0,0,0,.40);
  overflow:hidden;
  opacity: .82;
  transform: translateZ(0);
}

.op-panel::before{
  content:"";
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.06) 0px,
      rgba(255,255,255,.06) 1px,
      rgba(0,0,0,0) 3px,
      rgba(0,0,0,0) 6px
    );
  opacity:.10;
  mix-blend-mode: overlay;
}

.op-panel::after{
  content: attr(data-label);
  position:absolute;
  left:12px; bottom:10px;
  font-family: "Rajdhani", system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: .14em;
  opacity: .88;
}

.op-panel canvas.op-screen{
  width:100%;
  height:100%;
  display:block;
}

/* Grid placement (2 columns per panel) */
.op-panel.p1  { grid-column: 1 / span 2; grid-row: 1; }
.op-panel.p2  { grid-column: 3 / span 2; grid-row: 1; }
.op-panel.p3  { grid-column: 5 / span 2; grid-row: 1; }
.op-panel.p4  { grid-column: 7 / span 2; grid-row: 1; }

.op-panel.p5  { grid-column: 1 / span 2; grid-row: 2; }
.op-panel.p6  { grid-column: 7 / span 2; grid-row: 2; }

.op-panel.p11 { grid-column: 1 / span 2; grid-row: 3; }
.op-panel.p12 { grid-column: 7 / span 2; grid-row: 3; }

.op-panel.p13 { grid-column: 1 / span 2; grid-row: 4; }
.op-panel.p14 { grid-column: 7 / span 2; grid-row: 4; }

.op-panel.p15 { grid-column: 1 / span 2; grid-row: 5; }
.op-panel.p16 { grid-column: 7 / span 2; grid-row: 5; }

.op-panel.p7  { grid-column: 1 / span 2; grid-row: 6; }
.op-panel.p8  { grid-column: 3 / span 2; grid-row: 6; }
.op-panel.p9  { grid-column: 5 / span 2; grid-row: 6; }
.op-panel.p10 { grid-column: 7 / span 2; grid-row: 6; }

/* Create the big "center hole" (no panels there) */
.op-room::after{
  content:"";
  grid-column: 3 / span 4;
  grid-row: 2 / span 4;
}

/* Keep hero background vivid */
#radar-canvas { opacity: .10; }

/* Responsive: reduce density */
@media (max-width: 1100px){
  .op-panel.p2, .op-panel.p3, .op-panel.p8, .op-panel.p9 { display:none; }
  .op-room{ grid-template-columns: repeat(6, 1fr); }
  .op-panel.p1, .op-panel.p4, .op-panel.p5, .op-panel.p6, .op-panel.p7, .op-panel.p10,
  .op-panel.p11, .op-panel.p12, .op-panel.p13, .op-panel.p14, .op-panel.p15, .op-panel.p16{
    grid-column: auto / span 2;
  }
}
@media (max-width: 900px){
  .op-panel.p11, .op-panel.p12, .op-panel.p15, .op-panel.p16 { display:none; }
  .op-room{ opacity: .95; }
}
@media (max-width: 680px){
  .op-room{ display:none; }
}


/* =========================
   AFG CYBER UI v5
   More "filled" command room look
   ========================= */
.op-panel{
  border-color: rgba(70, 180, 150, .36) !important;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.28) inset,
    0 18px 34px rgba(0,0,0,.44),
    0 0 22px rgba(70,180,150,.10);
}
.op-panel::before{ opacity:.14 !important; }
.op-panel canvas.op-screen{ filter: contrast(1.05) saturate(1.10); }

/* Corner brackets */
.op-panel .op-corners{
  position:absolute; inset:0;
  pointer-events:none;
}
.op-panel .op-corners:before,
.op-panel .op-corners:after{
  content:"";
  position:absolute;
  inset:12px;
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(190,255,230,.10) inset;
  padding: 14px;
  opacity: .90;
}
.op-panel .op-corners:after{
  inset:10px;
  box-shadow: 0 0 0 1px rgba(70,180,150,.14) inset;
  opacity:.85;
}

/* tiny status dot near label */
.op-panel .op-dot{
  position:absolute;
  left:12px; bottom:28px;
  width:7px; height:7px;
  border-radius: 99px;
  background: rgba(70,180,150,.9);
  box-shadow: 0 0 12px rgba(70,180,150,.35);
  opacity:.75;
}

/* Ensure label readable */
.op-panel::after{ text-shadow: 0 2px 10px rgba(0,0,0,.55); }


/* =========================
   OPS WALL v6 (monitor wall)
   Inspired by control-room dashboards (like your refs)
   ========================= */
.ops-wall{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 1;
  display:grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(6, minmax(0, 1fr));
  gap: clamp(10px, 1.1vw, 18px);
  padding: clamp(86px, 8vh, 120px) clamp(18px, 2.4vw, 56px) clamp(120px, 10vh, 170px);
  transform: perspective(1400px) rotateX(8deg);
  transform-origin: center top;
  opacity: .78;
  filter: saturate(1.18) contrast(1.05);
}

/* Leave a calm area behind the center text (darken slightly) */
.ops-wall::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient( circle at 50% 55%,
    rgba(0,0,0,.74) 0%,
    rgba(0,0,0,.62) 32%,
    rgba(0,0,0,.35) 58%,
    rgba(0,0,0,0) 76% );
  z-index: 2;
  pointer-events:none;
}

.monitor{
  position:relative;
  border-radius: 18px;
  overflow:hidden;
  background-image: var(--bg);
  background-size: cover;
  background-position: var(--pos, 50% 50%);
  border: 1px solid rgba(90, 255, 210, .22);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.32) inset,
    0 18px 34px rgba(0,0,0,.50);
  z-index: 1;
  transform: translateZ(0);
}

/* Screen glass + scanlines */
.monitor::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(120% 120% at 18% 10%, rgba(120,255,230,.14), rgba(0,0,0,0) 55%),
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.55)),
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.06) 0px,
      rgba(255,255,255,.06) 1px,
      rgba(0,0,0,0) 3px,
      rgba(0,0,0,0) 7px
    );
  opacity: .86;
  mix-blend-mode: overlay;
}

/* Moving sweep */
.monitor::after{
  content:"";
  position:absolute;
  inset:-30% -40%;
  background: linear-gradient(90deg,
    rgba(0,0,0,0) 0%,
    rgba(120,255,230,.10) 48%,
    rgba(0,0,0,0) 100%);
  transform: translateX(-30%);
  opacity: .55;
  animation: opsSweep 6.5s linear infinite;
}

@keyframes opsSweep{
  0%{ transform: translateX(-30%) rotate(8deg); }
  100%{ transform: translateX(35%) rotate(8deg); }
}

/* Title bar */
.monitor[data-title] .title{ display:none; }
.monitor[data-title]{
  --barH: 34px;
}
.monitor[data-title]::marker{ content:""; }
.monitor[data-title] .dummy{ display:none; }

.monitor[data-title] > i{ display:none; }

/* label overlay */
.monitor[data-title] span,
.monitor[data-title] em{ display:none; }

.monitor[data-title]::selection{ background: transparent; }

.monitor[data-title]::before{
  /* keep existing glass, but we'll add a label via another layer below */
}

.monitor[data-title]{
  /* create room for label with inner shadow */
}
.monitor[data-title] .__noop{ display:none; }

.monitor[data-title] .monitor-label{ display:none; }

.monitor[data-title]{
  /* label using background trick */
}
.monitor[data-title]{
  /* nothing */
}

/* label using pseudo-element on a child-like layer */
.monitor[data-title]{
  /* add label via extra pseudo (requires ::before already used) -> use background-image layer on a new pseudo */
}
.monitor .label{ display:none; }

.monitor .dot{ display:none; }

/* Use ::backdrop not supported; so we add real elements via CSS only: use an extra div? Not possible.
   We'll instead draw the label with box-shadow + outline by using ::before second layer isn't possible.
   So we use a real HTML overlay injected via a CSS-generated content in :where() */
.monitor[data-title]{
  /* add a label with another pseudo using box-shadow technique */
}
.monitor[data-title]{
  /* ok */
}

/* Title: use outline text via a separate pseudo element using content: attr(data-title) */
.monitor[data-title] .x{ display:none; }
.monitor[data-title]{
  /* title pseudo */
}
.monitor[data-title]{
  /* no-op */
}
.monitor[data-title]::before{
  /* keep glass */
}
.monitor[data-title]::after{
  /* keep sweep */
}

/* Dedicated title overlay */
.monitor[data-title] ._t{ display:none; }

.monitor[data-title]{
  /* Add title using another pseudo element via background-clip isn't possible.
     We'll use box-shadow and a separate absolutely positioned title using ::before? already used.
     So: swap roles: move glass to ::after? but it's sweep. We'll do a 3-layer: use ::before for title, and create glass using background-image itself.
     Simpler: use an extra inset overlay via box-shadow and use ::before for title only. */
}

/* We can't easily restructure existing pseudos without breaking. We'll add a title using an inner shadow + text in ::before by adding content.
   We'll convert ::before into content layer with background + text. */
.monitor::before{
  content: attr(data-title);
  display:flex;
  align-items:flex-end;
  padding: 0 14px 10px;
  font-family: "Rajdhani", system-ui, sans-serif;
  letter-spacing: .16em;
  font-size: 11px;
  color: rgba(190,255,230,.82);
  text-shadow: 0 2px 12px rgba(0,0,0,.65);
  box-sizing:border-box;
}

/* Re-apply the glass via background layers on ::before */
.monitor::before{
  background:
    linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.62)),
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.05) 0px,
      rgba(255,255,255,.05) 1px,
      rgba(0,0,0,0) 3px,
      rgba(0,0,0,0) 7px
    ),
    radial-gradient(120% 120% at 18% 10%, rgba(120,255,230,.14), rgba(0,0,0,0) 55%);
  opacity: .92;
  mix-blend-mode: normal;
}

/* Small status dot near label */
.monitor::before{
  /* dot via text-shadow trick won't work; add dot using background */
  background:
    radial-gradient(circle at 18px calc(100% - 18px), rgba(90,255,210,.95) 0 3px, rgba(0,0,0,0) 4px),
    linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.62)),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.05) 0px, rgba(255,255,255,.05) 1px, rgba(0,0,0,0) 3px, rgba(0,0,0,0) 7px),
    radial-gradient(120% 120% at 18% 10%, rgba(120,255,230,.14), rgba(0,0,0,0) 55%);
}

/* Layout (like a wall of monitors) */
.monitor.m1 { grid-column: 1 / span 5;  grid-row: 1 / span 2; }
.monitor.m2 { grid-column: 6 / span 7;  grid-row: 1 / span 2; }

.monitor.m3 { grid-column: 1 / span 4;  grid-row: 3 / span 2; }
.monitor.m4 { grid-column: 5 / span 4;  grid-row: 3 / span 2; }
.monitor.m5 { grid-column: 9 / span 4;  grid-row: 3 / span 2; }

.monitor.m6 { grid-column: 1 / span 4;  grid-row: 5 / span 2; }
.monitor.m7 { grid-column: 5 / span 4;  grid-row: 5 / span 2; }
.monitor.m8 { grid-column: 9 / span 4;  grid-row: 5 / span 2; }

/* Keep hero content above */
.hero .container.center.hero-content{ position:relative; z-index: 3; }

/* Tone down old radar canvas for subtle motion (optional) */
#radar-canvas{ opacity: .08; z-index:2; position:absolute; inset:0; }

/* Reduce intensity on smaller screens */
@media (max-width: 1100px){
  .ops-wall{ transform: none; opacity:.70; }
  .monitor.m2{ grid-column: 1 / span 12; grid-row: 1 / span 2; }
  .monitor.m1{ display:none; }
}
@media (max-width: 760px){
  .ops-wall{ display:none; }
  #radar-canvas{ opacity: .12; }
}



/* =========================
   HERO CENTER v7
   Put texts/buttons back in the middle (like before)
   ========================= */
.hero-content{
  position: relative;
  z-index: 5 !important;
  text-align: center !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.hero-content .badge{ margin-left:auto; margin-right:auto; }
.hero-content .cta{ justify-content:center; }
.hero-content h1{ text-align:center; }
.hero-content p.lead{ text-align:center; max-width: 58ch; }

/* Keep stats centered */
.stats-vertical{ align-items: center; }
.stats-vertical .stat{ text-align:center; }

/* Ensure ops wall never pushes layout */
.ops-wall{ pointer-events:none; }


/* =========================
   HERO CENTER ONLY v8
   User request: keep background screens untouched, just re-center texts/buttons.
   ========================= */

/* Most specific selector for your hero container */
.hero .container.center.hero-content{
  /* make it a true centered block */
  width: min(980px, 92vw) !important;
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  /* kill any weird offsets from other rules */
  float: none !important;
  left: auto !important;
  right: auto !important;
  inset: auto !important;
  transform: none !important;
  justify-self: center !important;
  align-self: center !important;
}

/* Force center layout inside */
.hero .container.center.hero-content{
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px;
}

/* Make all hero children naturally centered */
.hero .container.center.hero-content > *{
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Buttons centered and wrap nicely on small screens */
.hero .container.center.hero-content .cta{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

/* Badge centered */
.hero .container.center.hero-content .badge{
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Keep lead readable */
.hero .container.center.hero-content .lead{
  max-width: 62ch !important;
}

/* Stats centered and prevent overlap on narrow screens */
.hero .container.center.hero-content .stats{
  width: 100% !important;
  max-width: 980px !important;
  margin-top: 14px !important;
}
.hero .container.center.hero-content .stats-vertical{
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
}
.hero .container.center.hero-content .stats-vertical .stat{
  min-width: 220px;
  text-align: center !important;
}

/* Mobile: stack stats if needed */
@media (max-width: 620px){
  .hero .container.center.hero-content .stats-vertical{
    flex-direction: column !important;
    align-items: center !important;
  }
  .hero .container.center.hero-content .stats-vertical .stat{
    width: min(520px, 92vw);
  }
}


/* =========================
   HERO HARD CENTER v9
   Force the hero texts/buttons DEAD CENTER (horizontally), regardless of any right-anchored layout.
   DOES NOT touch the background screens.
   ========================= */

.hero{ position: relative; }

/* Force hero-content to span the hero and center itself */
.hero .container.center.hero-content{
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: 0 !important;
  bottom: 0 !important;
  transform: translateX(-50%) !important;

  width: min(1100px, calc(100vw - 48px)) !important;
  max-width: 1100px !important;
  margin: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  text-align: center !important;
  z-index: 6 !important;
  pointer-events: auto;
}

/* Prevent the H1 from breaking into vertical words on desktop */
@media (min-width: 900px){
  .hero .container.center.hero-content h1{
    white-space: nowrap !important;
  }
}

/* Center the CTA row */
.hero .container.center.hero-content .cta{
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

/* Center stats under the content */
.hero .container.center.hero-content .stats,
.hero .container.center.hero-content .stats-vertical{
  width: 100% !important;
  justify-content: center !important;
  align-items: center !important;
}


/* =========================
   STAT DEV v1
   Make the "En développement" stat fit (use a wider rectangle, no overflow).
   ========================= */
.stats .stat.dev{
  min-width: 340px;
  padding-left: 18px;
  padding-right: 18px;
}
.stats .stat.dev .num{
  font-size: clamp(1.35rem, 2.1vw, 2.1rem);
  line-height: 1.05;
  white-space: normal;
  text-align: center;
}
.stats .stat.dev .label{
  opacity: .85;
  white-space: normal;
  text-align: center;
}

@media (max-width: 760px){
  .stats .stat.dev{
    min-width: min(520px, 92vw);
  }
}


/* =========================
   RADAR FX v3
   Heavy animation overlays: random blips, rotating bars, pulses, scan sweeps.
   Background screens unchanged (pure overlay).
   ========================= */

.ops-wall .monitor{ position: relative; }
.ops-wall .monitor .fx-layer{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 5; /* above scanlines */
  overflow:hidden;
}

/* Keep scanline glass, but let FX stay visible */
.ops-wall .monitor::before{ opacity: .80; }

/* Common glow */
.ops-wall .monitor .fx-layer .glow{
  filter: drop-shadow(0 0 12px rgba(90,255,210,.40)) drop-shadow(0 0 28px rgba(90,255,210,.16));
}

/* Circular radar container (masked) */
.ops-wall .monitor .fx-layer .radar{
  position:absolute;
  inset: 12%;
  border-radius: 50%;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 66%, transparent 68%);
  mask-image: radial-gradient(circle at 50% 50%, #000 66%, transparent 68%);
}

/* Rotating sweep wedge */
.ops-wall .monitor .fx-layer .sweep{
  position:absolute;
  inset:-40%;
  border-radius:50%;
  background: conic-gradient(
    from 0deg,
    rgba(0,0,0,0) 0deg,
    rgba(90,255,210,0.00) 295deg,
    rgba(90,255,210,0.10) 330deg,
    rgba(90,255,210,0.45) 350deg,
    rgba(90,255,210,0.70) 358deg,
    rgba(0,0,0,0) 360deg
  );
  opacity: .72;
  animation: radarRotate var(--spd, 6.8s) linear infinite;
}

/* Rotating bar ring segments */
.ops-wall .monitor .fx-layer .ring{
  position:absolute;
  inset: 10%;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 60%, rgba(90,255,210,.10) 61%, rgba(0,0,0,0) 62%),
    conic-gradient(
      from 0deg,
      rgba(90,255,210,.00) 0deg,
      rgba(90,255,210,.22) 18deg,
      rgba(90,255,210,.00) 34deg,
      rgba(90,255,210,.00) 90deg,
      rgba(90,255,210,.18) 104deg,
      rgba(90,255,210,.00) 120deg,
      rgba(90,255,210,.00) 200deg,
      rgba(210,255,245,.22) 214deg,
      rgba(90,255,210,.00) 228deg,
      rgba(90,255,210,.00) 360deg
    );
  opacity:.70;
  animation: radarRotate var(--spd2, 10.5s) linear infinite reverse;
}

/* Crosshair */
.ops-wall .monitor .fx-layer .cross{
  position:absolute;
  left:50%; top:50%;
  width: 62%;
  height: 62%;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  border: 2px solid rgba(90,255,210,.18);
}
.ops-wall .monitor .fx-layer .cross::before,
.ops-wall .monitor .fx-layer .cross::after{
  content:"";
  position:absolute; left:50%; top:50%;
  width: 140%; height: 2px;
  background: rgba(90,255,210,.14);
  transform: translate(-50%,-50%);
}
.ops-wall .monitor .fx-layer .cross::after{
  width: 2px; height: 140%;
}

/* Pulsing ring (ping) */
.ops-wall .monitor .fx-layer .pulse{
  position:absolute;
  left:50%; top:50%;
  width: 14px; height: 14px;
  transform: translate(-50%,-50%);
  border-radius: 999px;
  border: 2px solid rgba(210,255,245,.40);
  opacity: 0;
  animation: radarPulse 2.8s ease-out infinite;
}

/* Blips created by JS (x,y in %) */
.ops-wall .monitor .fx-layer .blip{
  position:absolute;
  left: calc(var(--x, 50) * 1%);
  top:  calc(var(--y, 50) * 1%);
  width: 6px; height: 6px;
  border-radius: 999px;
  background: rgba(210,255,245,.80);
  transform: translate(-50%,-50%) scale(.6);
  opacity: 0;
  animation: blipLife var(--life, 2200ms) ease-in-out forwards;
}
.ops-wall .monitor .fx-layer .blip::after{
  content:"";
  position:absolute;
  inset:-12px;
  border-radius: 999px;
  border: 2px solid rgba(90,255,210,.22);
  opacity: 0;
  animation: blipPing var(--life, 2200ms) ease-out forwards;
}

/* Moving scan band */
.ops-wall .monitor .fx-layer .scan{
  position:absolute;
  left:-25%;
  right:-25%;
  height: 18%;
  top: var(--scanY, 26%);
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(90,255,210,.10), rgba(0,0,0,0));
  opacity: .50;
  animation: scanMove var(--scanSpd, 7.0s) linear infinite;
}

/* Radar-heavy monitors: show circular kit */
.ops-wall .monitor.m1 .fx-layer .radar,
.ops-wall .monitor.m3 .fx-layer .radar,
.ops-wall .monitor.m8 .fx-layer .radar{ inset: 10%; }

/* Keyframes */
@keyframes radarRotate{ to{ transform: rotate(360deg); } }
@keyframes radarPulse{
  0%{ opacity:0; transform: translate(-50%,-50%) scale(.2); }
  15%{ opacity:.55; }
  100%{ opacity:0; transform: translate(-50%,-50%) scale(9.0); }
}
@keyframes blipLife{
  0%{ opacity:0; transform: translate(-50%,-50%) scale(.5); }
  12%{ opacity:.95; transform: translate(-50%,-50%) scale(1.0); }
  72%{ opacity:.65; }
  100%{ opacity:0; transform: translate(-50%,-50%) scale(.75); }
}
@keyframes blipPing{
  0%{ opacity:0; transform: scale(.2); }
  18%{ opacity:.40; }
  100%{ opacity:0; transform: scale(1.9); }
}
@keyframes scanMove{
  0%{ transform: translateX(-25%); }
  100%{ transform: translateX(25%); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .ops-wall .monitor .fx-layer *, .ops-wall .monitor::after{ animation: none !important; }
}