/* =========================================================
   CASE HEROES
   Shared differentiated hero treatments

   01 — Shared overrides
   02 — SaaS / Adaptive Architecture
   03 — HRSA / Living Ecosystem
   04 — Mission Readiness / Forecast Horizon
   05 — Responsive
   ========================================================= */


/* =========================================================
   01 — SHARED HERO OVERRIDES
   ========================================================= */

.case-hero-grid {
  grid-template-columns: 1fr 1fr;
  gap: 6vw;
}


/* Shared visual positioning */
.hero-architecture,
.hero-ecosystem,
.hero-forecast {
  position: relative;
  width: min(500px, 100%);
  margin-inline: auto;
}


/* =========================================================
   02 — SAAS FINANCIAL SYSTEMS
   ADAPTIVE ARCHITECTURE
   ========================================================= */

.case-hero--architecture .hero-architecture {
  /* Colours come from the :root tokens in base.css (fallbacks = same values) */
  --a-navy:    var(--navy, #000);
  --a-navy2:   var(--navy-2, #0e0064);
  --a-cyan:    var(--cyan, #12c0ff);
  --a-pink:    var(--pink, #ff54c2);
  --a-violet:  var(--violet, #5b00c2);
  --a-magenta: var(--magenta, #c000ff);
  --a-soft:    var(--soft, #f3f0ff);
  --a-paper:   var(--paper, #fff);

  width: min(500px, 100%);
  aspect-ratio: 500 / 350;
}


/* Atmospheric halo behind the disc */

.case-hero--architecture .hero-architecture::before {
  position: absolute;
  inset: 14% 2% 6%;
  content: "";

  border-radius: 50%;

  background: radial-gradient(
    ellipse at 50% 55%,
    color-mix(in srgb, var(--a-pink) 14%, transparent) 0%,
    color-mix(in srgb, var(--a-violet) 16%, transparent) 38%,
    transparent 70%
  );
}


/* Disc SVG */

.arch-disc {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  overflow: visible;

  filter: drop-shadow(0 18px 38px color-mix(in srgb, var(--a-violet) 40%, transparent));
}


/* Segment colour tokens
   cool half = custom flow, warm half = configured SaaS */

.arch-c1 { --seg: var(--a-cyan); }
.arch-c2 { --seg: color-mix(in srgb, var(--a-cyan) 66%, var(--a-navy2)); }
.arch-c3 { --seg: var(--a-violet); }
.arch-c4 { --seg: color-mix(in srgb, var(--a-cyan) 45%, var(--a-violet)); }
.arch-c5 { --seg: color-mix(in srgb, var(--a-navy2) 40%, var(--a-cyan)); }

.arch-w1 { --seg: var(--a-pink); }
.arch-w2 { --seg: var(--a-magenta); }
.arch-w3 { --seg: color-mix(in srgb, var(--a-pink) 55%, var(--a-soft)); }
.arch-w4 { --seg: color-mix(in srgb, var(--a-magenta) 55%, var(--a-pink)); }
.arch-w5 { --seg: color-mix(in srgb, var(--a-pink) 50%, var(--a-violet)); }


/* Segments */

.arch-seg {
  fill: var(--seg);
  fill-opacity: .76;

  stroke: color-mix(in srgb, var(--a-soft) 26%, transparent);
  stroke-width: .8;

  vector-effect: non-scaling-stroke;
}

.arch-seg.arch-dim {
  fill-opacity: .46;
}

.arch-seg.arch-bright {
  fill-opacity: .95;
}

.arch-seg.arch-top {
  fill-opacity: .94;
  stroke: color-mix(in srgb, var(--a-soft) 60%, transparent);
}


/* Side walls of the raised blocks */

.arch-wall {
  fill: color-mix(in srgb, var(--seg) 38%, var(--a-navy));

  stroke: color-mix(in srgb, var(--a-soft) 12%, transparent);
  stroke-width: .6;

  vector-effect: non-scaling-stroke;
}


/* Slab under the disc (gives it thickness) */

.arch-slab {
  fill: color-mix(in srgb, var(--a-navy2) 55%, var(--a-navy));
  fill-opacity: calc(1 - var(--k) * .08);

  stroke: color-mix(in srgb, var(--a-cyan) 18%, transparent);
  stroke-width: .8;
    filter: blur(53px);
    opacity: .03;
  vector-effect: non-scaling-stroke;
}
#arch-vignette {display: none;}

/* Recessed centre hole */

.arch-hole-floor {
  fill: var(--a-navy);
}

.arch-hole-rim {
  fill: none;

  stroke: color-mix(in srgb, var(--a-cyan) 60%, transparent);
  stroke-width: 1;

  vector-effect: non-scaling-stroke;
}


/* SVG gradient stops (colours via tokens) */

.arch-stop-a     { stop-color: var(--a-pink); }
.arch-stop-wall-hi { stop-color: color-mix(in srgb, var(--a-violet) 70%, var(--a-navy2)); }
.arch-stop-cyan  { stop-color: var(--a-cyan); }
.arch-stop-shade { stop-color: var(--a-navy2); }


/* Top status */

.architecture-status {
  position: absolute;
  top: 1%;
  left: 50%;
  z-index: 4;

  display: flex;
  align-items: center;
  gap: 10px;

  transform: translateX(-50%);

  color: color-mix(in srgb, var(--a-cyan) 55%, var(--a-soft));

  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;

  white-space: nowrap;
}

.architecture-status i {
  display: block;

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: var(--a-cyan);

  box-shadow: 0 0 16px var(--a-cyan);
}


/* Side tags: custom (cool) / SaaS (warm) */

.architecture-tag {
  position: absolute;
  top: 14%;
  z-index: 4;

  display: grid;
  gap: 5px;

  padding-top: 9px;

  color: #fff;

  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
}

.architecture-tag small {
  color: rgba(255, 255, 255, .45);

  font-size: 7px;
  letter-spacing: .12em;
}

.architecture-tag::before {
  position: absolute;
  top: 0;

  width: 26px;
  height: 2px;

  content: "";
}

.architecture-tag--custom {
  left: 0;
}

.architecture-tag--custom::before {
  left: 0;

  background: linear-gradient(90deg, var(--a-cyan), var(--a-violet));
  box-shadow: 0 0 12px color-mix(in srgb, var(--a-cyan) 60%, transparent);
}

.architecture-tag--saas {
  right: 0;

  text-align: right;
}

.architecture-tag--saas::before {
  right: 0;

  background: linear-gradient(90deg, var(--a-pink), var(--a-magenta));
  box-shadow: 0 0 12px color-mix(in srgb, var(--a-pink) 60%, transparent);
}


/* Micro labels under the disc */

.architecture-label {
  position: absolute;
  z-index: 6;
  top: 78%;

  color: rgba(255, 255, 255, .34);

  font-size: 8px;
  font-weight: 700;
  letter-spacing: .15em;
}

.architecture-label--left {
  left: 0;
}

.architecture-label--right {
  right: 0;
}


/* Ring legend (inner → outer) */

.architecture-legend {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 6;

  transform: translateX(-50%);

  color: rgba(255, 255, 255, .4);

  font-size: 8px;
  font-weight: 700;
  letter-spacing: .15em;

  white-space: nowrap;
}



/* =========================================================
   03 — HRSA / OPTN
   LIVING ECOSYSTEM
   ========================================================= */

.case-hero--ecosystem .hero-ecosystem {
  width: min(480px, 100%);
  aspect-ratio: 1;
}


/* Atmospheric halo */

.hero-ecosystem::before {
  position: absolute;
  inset: 16%;

  border-radius: 50%;

  content: "";

  background: radial-gradient(
    circle,
    rgba(255, 89, 203, .11) 0%,
    rgba(116, 48, 238, .08) 30%,
    transparent 72%
  );

  filter: blur(3px);
}


/* Connection system */

.ecosystem-lines {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  overflow: visible;
}

.ecosystem-lines path {
  fill: none;

  stroke: rgba(145, 228, 255, .42);
  stroke-width: 1;
}

.ecosystem-lines .ecosystem-line--faint {
  stroke: rgba(255, 135, 217, .18);
  stroke-dasharray: 3 8;
}


/* Trust center */

.ecosystem-core {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;

  display: grid;
  place-items: center;

  width: 126px;
  aspect-ratio: 1;

  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;

  background:
    radial-gradient(
      circle at 33% 28%,
      rgba(255, 255, 255, .17),
      transparent 22%
    ),
    linear-gradient(145deg, #fb63cb, #7616de);

  box-shadow:
    0 0 45px rgba(225, 52, 215, .33),
    0 0 90px rgba(92, 29, 219, .16);

  transform: translate(-50%, -50%);

  text-align: center;
}

.ecosystem-core span {
  color: #fff;

  font-size: 17px;
  font-weight: 500;
  letter-spacing: .12em;
}

.ecosystem-core small {
  display: block;

  margin-top: 7px;

  color: rgba(255, 255, 255, .65);

  font-size: 7px;
  font-weight: 700;
  letter-spacing: .16em;
}


/* Ecosystem nodes */

.ecosystem-node {
  position: absolute;
  z-index: 5;

  display: grid;
  gap: 5px;

  width: 105px;

  padding: 12px 10px;

  border: 1px solid rgba(145, 229, 255, .36);
  border-radius: 999px;

  background: rgba(3, 7, 35, .62);

  box-shadow: 0 0 28px rgba(45, 189, 255, .08);

  text-align: center;
}

.ecosystem-node b {
  color: #fff;

  font-size: 8px;
  letter-spacing: .13em;
}

.ecosystem-node span {
  color: rgba(255, 255, 255, .4);

  font-size: 7px;
  letter-spacing: .08em;
}


.ecosystem-node--patients {
  top: 13%;
  left: 5%;
}

.ecosystem-node--opos {
  top: 51%;
  left: 0;
}

.ecosystem-node--centers {
  top: 17%;
  right: 3%;

  border-color: rgba(255, 131, 217, .42);
}

.ecosystem-node--governance {
  top: 58%;
  right: -1%;

  border-color: rgba(255, 131, 217, .42);
}

.ecosystem-node--clinicians {
  bottom: 7%;
  left: 14%;
}

.ecosystem-node--policy {
  right: 17%;
  bottom: 7%;
}


/* Small ambient signals */

.hero-ecosystem::after {
  position: absolute;
  top: 21%;
  left: 48%;

  width: 4px;
  height: 4px;

  border-radius: 50%;

  content: "";

  background: #76e5ff;

  box-shadow:
    0 0 12px #76e5ff,
    100px 80px 0 -1px rgba(255, 113, 208, .8),
    -120px 140px 0 -1px rgba(125, 226, 255, .6),
    132px 190px 0 -1px rgba(255, 113, 208, .6);
}



/* =========================================================
   04 — MISSION READINESS
   FORECAST HORIZON
   ========================================================= */

.case-hero--forecast .hero-forecast {
  width: min(500px, 100%);

  padding: 18px 0 14px;
}


/* Forecast header */

.forecast-header {
  display: flex;
  justify-content: space-between;
  gap: 20px;

  margin-bottom: 20px;

  color: rgba(171, 237, 255, .62);

  font-size: 8px;
  font-weight: 700;
  letter-spacing: .15em;
}


/* Chart */

.forecast-chart {
  position: relative;

  height: 305px;

  padding-left: 42px;

  border-top: 1px solid rgba(148, 227, 255, .14);
  border-bottom: 1px solid rgba(148, 227, 255, .14);
}


/* Y axis */

.forecast-y-axis {
  position: absolute;
  top: 10px;
  bottom: 22px;
  left: 0;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  color: rgba(255, 255, 255, .27);

  font-size: 7px;
  letter-spacing: .08em;
}


/* Grid */

.forecast-grid {
  position: absolute;
  inset: 10px 0 25px 42px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.forecast-grid span {
  display: block;

  width: 100%;
  height: 1px;

  background: rgba(150, 226, 255, .08);
}


/* SVG */

.forecast-lines {
  position: absolute;
  top: 10px;
  right: 0;
  bottom: 25px;
  left: 42px;

  width: calc(100% - 42px);
  height: calc(100% - 35px);

  overflow: visible;
}


/* Observed trajectory */

.forecast-observed {
  fill: none;

  stroke: #73e4ff;
  stroke-width: 3;

  filter: drop-shadow(
    0 0 7px rgba(115, 228, 255, .55)
  );
}


/* Predicted trajectory */

.forecast-predicted {
  fill: none;

  stroke: #ff68cb;
  stroke-width: 3;

  filter: drop-shadow(
    0 0 8px rgba(255, 104, 203, .55)
  );
}


/* Confidence range */

.forecast-band {
  fill: none;

  stroke: rgba(255, 122, 211, .2);
  stroke-width: 1;

  stroke-dasharray: 4 6;
}


/* NOW marker */

.forecast-now-line {
  stroke: rgba(255, 255, 255, .28);
  stroke-width: 1;

  stroke-dasharray: 3 7;
}

.forecast-now-dot {
  fill: #fff;

  stroke: #ff6bcd;
  stroke-width: 3;

  filter: drop-shadow(
    0 0 9px rgba(255, 107, 205, .85)
  );
}


/* NOW annotation */

.forecast-now {
  position: absolute;
  top: 18px;
  left: 46%;

  display: grid;
  gap: 5px;

  transform: translateX(-50%);

  white-space: nowrap;
}

.forecast-now b {
  color: #fff;

  font-size: 9px;
  letter-spacing: .17em;
}

.forecast-now span {
  color: rgba(255, 255, 255, .36);

  font-size: 6px;
  letter-spacing: .12em;
}


/* Confidence */

.forecast-confidence {
  position: absolute;
  top: 49%;
  right: 3%;

  display: grid;
  gap: 4px;

  padding: 8px 11px;

  border: 1px solid rgba(255, 114, 207, .28);

  background: rgba(9, 7, 34, .66);

  backdrop-filter: blur(8px);
}

.forecast-confidence span {
  color: rgba(255, 255, 255, .38);

  font-size: 6px;
  font-weight: 700;
  letter-spacing: .15em;
}

.forecast-confidence strong {
  color: #ff8dd7;

  font-size: 15px;
  font-weight: 500;
}


/* X axis */

.forecast-axis-label {
  position: absolute;
  bottom: 7px;

  color: rgba(255, 255, 255, .28);

  font-size: 7px;
  letter-spacing: .13em;
}

.forecast-axis-label--start {
  left: 42px;
}

.forecast-axis-label--mid {
  left: 46%;

  transform: translateX(-50%);
}

.forecast-axis-label--end {
  right: 0;
}


/* Forecast legend */

.forecast-footer {
  display: flex;
  justify-content: flex-end;
  gap: 18px;

  margin-top: 14px;

  color: rgba(255, 255, 255, .32);

  font-size: 6px;
  font-weight: 700;
  letter-spacing: .11em;
}

.forecast-footer span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.forecast-key {
  display: inline-block;

  width: 14px;
  height: 1px;
}

.forecast-key--observed {
  background: #73e4ff;

  box-shadow: 0 0 7px rgba(115, 228, 255, .5);
}

.forecast-key--predicted {
  background: #ff68cb;

  box-shadow: 0 0 7px rgba(255, 104, 203, .5);
}

.forecast-key--band {
  background: rgba(255, 122, 211, .45);
}



/* =========================================================
   05 — RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

  .case-hero-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .case-hero--architecture .hero-architecture,
  .case-hero--ecosystem .hero-ecosystem {
    max-width: 360px;
  }

  .case-hero--forecast .hero-forecast {
    max-width: 420px;
  }
}


@media (max-width: 640px) {

  /* Architecture */

  .case-hero--architecture .hero-architecture {
    max-width: 320px;
    margin-top: 12px;
  }

  .architecture-status {
    font-size: 8px;
  }

  .architecture-tag {
    font-size: 8px;
  }

  .architecture-tag small {
    display: none;
  }

  .architecture-label {
    display: none;
  }

  .architecture-legend {
    font-size: 6px;
    letter-spacing: .1em;
  }


  /* Ecosystem */

  .case-hero--ecosystem .hero-ecosystem {
    max-width: 320px;
    margin-top: 12px;
  }

  .ecosystem-core {
    width: 96px;
  }

  .ecosystem-core span {
    font-size: 14px;
  }

  .ecosystem-node {
    width: 84px;
    padding: 9px 7px;
  }

  .ecosystem-node b {
    font-size: 7px;
  }

  .ecosystem-node span {
    font-size: 6px;
  }


  /* Forecast */

  .case-hero--forecast .hero-forecast {
    max-width: 340px;
    margin-top: 14px;
  }

  .forecast-chart {
    height: 235px;
    padding-left: 34px;
  }

  .forecast-grid,
  .forecast-lines {
    left: 34px;
  }

  .forecast-lines {
    width: calc(100% - 34px);
  }

  .forecast-y-axis {
    font-size: 6px;
  }

  .forecast-axis-label--start {
    left: 34px;
  }

  .forecast-confidence {
    right: 1%;

    padding: 6px 8px;
  }

  .forecast-footer {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
  }

  .forecast-header {
    font-size: 7px;
  }
}