/* ============================================================================
   MEEZABTECH VISUAL LAYER
   The atmosphere of the source image sits here: the deep near-black behind the
   hero, the coloured light bleeding off each card, the glow under the cubes.
   Loaded after site.css so the measured foundation always wins on contrast.
   ========================================================================= */

/* ---- PAGE ATMOSPHERE -------------------------------------------------------
   The source is not flat navy. It is near-black at the top of the hero, warming
   into navy as the page descends, with coloured light pooled behind the figure. */
body{background:var(--bg-deep)}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1100px 620px at 74% -6%,rgba(229,62,62,.13),transparent 62%),
    radial-gradient(900px 560px at 22% 12%,rgba(49,130,206,.11),transparent 64%),
    radial-gradient(760px 520px at 88% 40%,rgba(221,107,32,.09),transparent 66%),
    linear-gradient(180deg,#050D1A 0%,#081426 42%,#0A1628 100%);
}

/* ---- HERO ---------------------------------------------------------------- */
.hero{background:radial-gradient(1000px 700px at 68% 42%,rgba(10,26,50,.75),transparent 70%)}
.hero h1{text-shadow:0 2px 30px rgba(0,0,0,.5)}
.hero__fig::after{
  /* the light the cubes throw onto the page behind them */
  content:"";position:absolute;inset:8% 4% 12%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(49,130,206,.16),transparent 78%);
  filter:blur(22px);
}
.herofig{filter:drop-shadow(0 0 34px rgba(49,130,206,.22))}

/* ---- CTA ------------------------------------------------------------------
   The primary button in the source glows. Kept restrained: a coloured shadow,
   not a halo, so it still reads as a button and not as an effect. */
.btn--primary{box-shadow:0 8px 26px rgba(229,62,62,.28),inset 0 1px 0 rgba(255,255,255,.18)}
.btn--primary:hover{box-shadow:0 10px 32px rgba(229,62,62,.38),inset 0 1px 0 rgba(255,255,255,.24)}
.nav__cta{box-shadow:0 6px 18px rgba(229,62,62,.26),inset 0 1px 0 rgba(255,255,255,.18)}

/* ---- TRUST BAR ----------------------------------------------------------- */
.trust{background:linear-gradient(180deg,rgba(10,22,40,.85),rgba(8,18,34,.45))}
.tr svg{filter:drop-shadow(0 0 10px currentColor);opacity:.95}

/* ---- CARDS ----------------------------------------------------------------
   Each card carries a hairline of its own accent along the top edge and a soft
   pool of that colour behind its icon. That is the whole card treatment in the
   source: no glass, no blur, no border glow on every side. */
.card{background:linear-gradient(180deg,var(--card-2) 0%,var(--card) 58%)}
.card::before{
  content:"";position:absolute;inset-inline:16%;top:-1px;height:2px;border-radius:2px;
  opacity:.62;transition:opacity var(--dur) var(--ease),inset-inline var(--dur) var(--ease);
}
.card:hover::before{inset-inline:6%;opacity:1}
.card--red::before{background:linear-gradient(90deg,transparent,var(--red),transparent)}
.card--blue::before{background:linear-gradient(90deg,transparent,var(--blue),transparent)}
.card--orange::before{background:linear-gradient(90deg,transparent,var(--orange),transparent)}
.card__icon::before{filter:blur(11px)}
.card__icon svg{filter:drop-shadow(0 0 9px currentColor)}
.card:hover{box-shadow:0 16px 40px rgba(0,0,0,.45)}

/* ---- INDUSTRIES -----------------------------------------------------------
   The source treats these cards as photographs. No approved photography exists
   and the order forbids stock imagery, so the same card silhouette is built
   from light instead: a warm corner wash where the picture used to sit. */
.ind{background:linear-gradient(180deg,var(--card-2) 0%,#0B1930 100%)}
.ind::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  transition:opacity var(--dur) var(--ease);
  background:radial-gradient(120% 90% at 100% 0%,rgba(120,160,220,.16),transparent 58%);
}
.ind:hover::before{opacity:.9}
.ind svg{filter:drop-shadow(0 0 10px rgba(160,195,240,.35))}
.ind:nth-child(3)::before{background:radial-gradient(120% 90% at 100% 0%,rgba(221,107,32,.20),transparent 58%)}
.ind:nth-child(5)::before{background:radial-gradient(120% 90% at 100% 0%,rgba(229,62,62,.15),transparent 58%)}

/* ---- STATS BAND -----------------------------------------------------------
   Same panel geometry as the source. Colour is carried by the labels until the
   figures are confirmed, so the band is visually complete with no numerals. */
.statband{background:linear-gradient(180deg,#0E1E38 0%,#0A1729 100%);box-shadow:var(--shadow)}
.stat b{text-shadow:0 0 20px rgba(0,0,0,.45)}

/* ---- FOOTER ---------------------------------------------------------------
   The source ends on a thin coloured rule above the footer bar. */
.footbar{position:relative;background:linear-gradient(180deg,rgba(8,18,34,.9),rgba(5,13,26,1))}
.footbar::before{
  content:"";position:absolute;top:-1px;inset-inline:0;height:2px;
  background:linear-gradient(90deg,#E53E3E 0%,#DD6B20 46%,#3182CE 100%);opacity:.85;
}