/* ================================================================
   CRIS LANDING — HERO
   Loaded after landing-base.css (shared tokens, header, buttons).
   Rules: no inline styles, no !important, no media queries.
          Responsive values are custom properties set per range in
          responsive.css under ".plx-hero":
            xs ≤575.98 | sm 576-767.98 | md 768-991.98
            lg 992-1199.98 | xl 1200-1399.98 | xxl ≥1400
          UI state comes from attributes (aria-current on the mock nav).

   Variables set per range (responsive.css):
     --hero-pt --hero-pb --hero-cols --hero-gap --hero-fs-h1 --hero-fs-lead
     --hero-actions-cols --hero-actions-gap
     --hero-assure-gap --hero-assure-divider --hero-assure-pl
     --hero-art-opacity --hero-tilt
     --hero-cards-cols --hero-cards-gap --hero-cards-mb
     --hero-connector-display --hero-tools-display
     --hero-frame-pad --hero-hd-cols --hero-side-display --hero-panels-cols
   ================================================================ */

/* ── 1. TOKENS (non-responsive) ── */

/* ── 2. SECTION + BACKGROUND ── */
.plx-hero {
  overflow: hidden;
  padding: var(--sp-185) 0 var(--sp-64);
  position: relative;
}
.plx-hero-bg {
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}
.plx-hero-glow { inset: 0; position: absolute; }
.plx-hero-glow-a { background: radial-gradient(ellipse 55% 60% at 74% 46%, var(--green-bg), transparent 70%); }
.plx-hero-glow-b { background: radial-gradient(ellipse 40% 40% at 8% 82%, var(--lime-a10), transparent 70%); }
.plx-hero-waves {
  height: 100%;
  inset: 0;
  opacity: var(--opacity-faint);
  position: absolute;
  width: 100%;
}
.plx-hero-stop-a { stop-color: var(--lime); }
.plx-hero-stop-b { stop-color: var(--green); }
.plx-hero-stop-c { stop-color: var(--cyan); }
.plx-hero-wave { stroke: url(#plxHeroWaveGrad); }
.plx-hero-wave-1 { opacity: var(--opacity-hover); stroke-width: 2.2; }
.plx-hero-wave-2 { opacity: var(--opacity-muted); stroke-width: 1.4; }
.plx-hero-wave-3 { opacity: var(--opacity-disabled); stroke-width: 1; }
.plx-hero-wave-4 { opacity: var(--opacity-disabled);  stroke-width: 1; }
.plx-hero-wave-5 { opacity: var(--opacity-faint); stroke-width: .8; }
.plx-hero-dot { fill: var(--lime); opacity: var(--opacity-muted); }

.plx-hero .container-xl { position: relative; z-index: var(--z-1); }
.plx-hero-grid {
  align-items: center;
  display: grid;
  gap: var(--sp-60);
  grid-template-columns: minmax(0, 10fr) minmax(0, 11fr);
}

/* ── 3. COPY ── */
.plx-hero-copy { min-width: 0; }
.plx-hero-eyebrow {
  color: var(--lime);
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: .24em;
  margin-bottom: var(--sp-16);
  text-transform: uppercase;
}
.plx-hero-title {
  color: var(--t1);
  font-size: var(--fs-36);
  font-weight: 800;
  letter-spacing: -.03em;

  margin-bottom: var(--sp-24);
}
.plx-hero-line { display: block; }
.plx-hero-line-fix,
.plx-hero-line-next {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  width: fit-content;
}
.plx-hero-line-fix  { background-image: linear-gradient(90deg, var(--lime) 0%, var(--green) 100%); }
.plx-hero-line-next { background-image: linear-gradient(90deg, var(--lime-400) 0%, var(--cyan) 100%); }
.plx-hero-lead {
  color: var(--t2);
  font-size: var(--fs-16);

  margin-bottom: var(--sp-24);
  max-width: 34em;
}

/* Buttons */
.plx-hero-actions {
  display: grid;
  gap: var(--sp-16);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: var(--sp-24);
}
.plx-hero-btn {
  align-items: center;
  border-radius: var(--br-inner);
  display: inline-flex;
  font-size: var(--fs-14);
  font-weight: 700;
  gap: var(--sp-12);
  justify-content: center;
  padding: var(--sp-16) var(--sp-24);
  transition: filter var(--t-default), transform var(--t-default), box-shadow var(--t-default), border-color var(--t-default), background var(--t-default);
  white-space: nowrap;
}
.plx-hero-btn-primary {
  background: var(--grad);
  border: 1px solid transparent;
  color: var(--bg);
  grid-column: 1 / -1;
  justify-self: stretch;
  transition: box-shadow var(--t-default) ease, color var(--t-default) ease, filter var(--t-default) ease, transform var(--t-default) ease;
}
.plx-hero-btn-primary:hover {
  box-shadow: 0 0 32px var(--lime-a50);
  color: var(--bg);
  filter: brightness(1.06);
  transform: translateY(-1px);
}
.plx-hero-btn-ghost {
  background: var(--dark-green);
  border: 1px solid var(--lime-a15);
  color: var(--t1);
  transition: border-color var(--t-default) ease, color var(--t-default) ease;
}
.plx-hero-btn-ghost:hover {
  border-color: var(--lime-a60);
  color: var(--t1);
}

/* Assurance row */
/* Items stay whole; when a row is full a whole item moves down. The clip wrapper hides the divider on the first item of every row. */
.plx-hero-assure-clip { overflow: hidden; }
.plx-hero-assure {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-20) var(--sp-28);
  list-style: none;
  margin: 0 0 0 calc(-1 * (var(--sp-28) + 1px));
  padding: 0;
}
.plx-hero-assure-item {
  align-items: center;
  border-left: 1px solid var(--border-lg);
  color: var(--t3);
  display: inline-flex;
  font-size: var(--fs-12);
  gap: var(--sp-8);
  padding-left: var(--sp-28);
  white-space: nowrap;
}
.plx-hero-assure-item i { color: var(--t3); font-size: var(--fs-14); }

/* ── 4. VISUAL STAGE ── */
.plx-hero-visual { min-width: 0; }
.plx-hero-stage {
  position: relative;
  transform: none;
}

/* Floating cards */
.plx-hero-cards {
  display: grid;
  gap: var(--sp-16);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: var(--sp-32);
  position: relative;
  z-index: var(--z-3);
}
.plx-hero-card {
  align-items: center;
  animation: heroFloat 6s ease-in-out infinite;
  background: var(--dark-green);
  border: 1px solid var(--green-bg);
  border-radius: var(--br-inner);
  box-shadow: 0 0 24px var(--green-bg), 0 8px 28px var(--black-a50);
  display: flex;
  gap: var(--sp-12);
  padding: var(--sp-12) var(--sp-16);
  position: relative;
}
.plx-hero-card:nth-child(2) { animation-delay: calc(6s * -.33); }
.plx-hero-card:nth-child(3) { animation-delay: calc(6s * -.66); }
.plx-hero-card::after {
  background: linear-gradient(180deg, var(--green-bg), transparent);
  content: '';
  display: block;
  height: var(--size-16);
  left: 50%;
  position: absolute;
  top: 100%;
  width: 1px;
}
@keyframes heroFloat {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -4px; }
}
.plx-hero-card-ic {
  align-items: center;
  background: var(--lime-a10);
  border: 1px solid var(--lime-a50);
  border-radius: var(--br-inner);
  color: var(--lime);
  display: flex;
  flex-shrink: 0;
  font-size: var(--fs-20);
  height: var(--size-40);
  justify-content: center;
  width: var(--size-40);
}
.plx-hero-card-body { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.plx-hero-card-label { color: var(--t3); font-size: var(--fs-10); font-weight: 600; }
.plx-hero-card-val   { color: var(--lime); font-size: var(--fs-18); font-weight: 800;}
.plx-hero-card-text  { color: var(--t1); font-size: var(--fs-10); font-weight: 700;}
.plx-hero-card-sub   { color: var(--t4); font-size: var(--fs-10); }

/* Frame */
.plx-hero-frame {
  background: var(--bg);
  border: 1px solid var(--green-bg);
  border-radius: var(--br-outer);
  box-shadow: 0 0 0 1px var(--bg-card), 0 30px 90px var(--black-a65), 0 0 60px var(--green-bg);
  padding: var(--sp-20);
  position: relative;
}
.plx-hero-frame-tools {
  color: var(--t4);
  display: flex;
  font-size: var(--fs-12);
  gap: var(--sp-12);
  position: absolute;
  right: var(--sp-12);
  top: calc(var(--sp-24) * -1);
}

/* ── 5. DASHBOARD MOCK ── */
.plx-hd {
  display: grid;
  gap: var(--sp-12);
  grid-template-columns: minmax(0, 1fr);
}
.plx-hd-side {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  min-width: 0;
}
.plx-hd-logo { height: var(--size-24); object-fit: contain; object-position: left center; width: auto; }
.plx-hd-nav { display: flex; flex-direction: column; gap: var(--sp-4); list-style: none; margin: 0; padding: 0; }
.plx-hd-nav-item {
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--br-inner);
  color: var(--t4);
  display: flex;
  font-size: var(--fs-10);
  gap: var(--sp-8);
  padding: var(--sp-6) var(--sp-8);
}
.plx-hd-nav-item i { font-size: var(--fs-12); }
.plx-hd-nav-item[aria-current="true"] {
  background: var(--lime-a10);
  border-color: var(--lime-a60);
  color: var(--lime);
}

.plx-hd-main { min-width: 0; }
.plx-hd-title {
  color: var(--t1);
  font-size: var(--fs-14);
  font-weight: 700;
  margin-bottom: var(--sp-12);
}
.plx-hd-panels {
  display: grid;
  gap: var(--sp-8);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.plx-hd-panel {
  background: var(--bg-card);
  border: 1px solid var(--green-bg);
  border-radius: var(--br-inner);
  min-width: 0;
  padding: var(--sp-12);
}
.plx-hd-panel-title {
  color: var(--t2);
  font-size: var(--fs-10);
  font-weight: 600;
  margin-bottom: var(--sp-8);
}

/* Score gauge */
.plx-hd-panel-score {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.plx-hd-gauge { display: block; height: auto; width: var(--size-140); }
.plx-hd-gauge-track,
.plx-hd-gauge-arc {
  fill: none;
  stroke-linecap: round;
  stroke-width: 9;
  transform: rotate(135deg);
  transform-origin: 60px 60px;
}
.plx-hd-gauge-track { stroke: var(--border-md); stroke-dasharray: 75 100; }
.plx-hd-gauge-arc   { stroke-dasharray: calc(82 * .75) 100; }
.plx-hd-gauge-stop-a { stop-color: var(--lime); }
.plx-hd-gauge-stop-b { stop-color: var(--green); }
.plx-hd-gauge-num { fill: var(--t1); font-family: var(--font-body); font-size: var(--fs-32); font-weight: 800; }
.plx-hd-gauge-max { fill: var(--t4); font-family: var(--font-body); font-size: var(--fs-10); }
.plx-hd-score-label { color: var(--green); font-size: var(--fs-14); font-weight: 700; margin-top: calc(var(--sp-16) * -1); }
.plx-hd-score-delta { align-items: center; color: var(--t4); display: inline-flex; font-size: var(--fs-10); gap: var(--sp-4); }
.plx-hd-score-delta i { color: var(--lime); }

/* Radar */
.plx-hd-radar { display: block; height: auto; width: 100%; }
.plx-hd-radar-ring  { fill: none; stroke: var(--cyan-bd); stroke-width: .8; }
.plx-hd-radar-axis  { fill: none; stroke: var(--cyan-bd); stroke-width: .6; }
.plx-hd-radar-score { fill: var(--green-bg); stroke: var(--green); stroke-width: 1.4; }
.plx-hd-radar-avg   { fill: none; stroke: var(--lime); stroke-width: 1; }
.plx-hd-radar-label { fill: var(--t3); font-family: var(--font-body); font-size: var(--fs-10); }
.plx-hd-legend { display: flex; flex-wrap: wrap; gap: var(--sp-12); justify-content: center; margin-top: var(--sp-4); }
.plx-hd-legend-item { align-items: center; color: var(--t3); display: inline-flex; font-size: var(--fs-10); gap: var(--sp-4); }
.plx-hd-legend-item::before { background: var(--lime); border-radius: var(--br-full); content: ''; height: var(--size-6); width: var(--size-6); }
.plx-hd-legend-score::before { background: var(--green); }

/* Trend */
.plx-hd-trend { display: block; height: auto; width: 100%; }
.plx-hd-trend-grid { fill: none; stroke: var(--border); stroke-width: .6; }
.plx-hd-trend-tick { fill: var(--t5); font-family: var(--font-body); font-size: var(--fs-10); }
.plx-hd-trend-line { fill: none; stroke-linecap: round; stroke-width: 1.6; }
.plx-hd-trend-line-a { stroke: var(--green); }
.plx-hd-trend-line-b { stroke: var(--lime); }

/* Priorities */
.plx-hd-prio { display: flex; flex-direction: column; gap: var(--sp-12); list-style: none; margin: 0; padding: 0; }
.plx-hd-prio-row { align-items: center; display: flex; gap: var(--sp-8); }
.plx-hd-prio-num {
  align-items: center;
  background: var(--amber);
  border-radius: var(--br-full);
  color: var(--bg);
  display: inline-flex;
  flex-shrink: 0;
  font-size: var(--fs-10);
  font-weight: 800;
  height: var(--size-18);
  justify-content: center;
  width: var(--size-18);
}
.plx-hd-prio-text { color: var(--t2); flex: 1; font-size: var(--fs-10);min-width: 0; }
.plx-hd-badge {
  border-radius: var(--br-inner);
  flex-shrink: 0;
  font-size: var(--fs-10);
  font-weight: 700;
  padding: var(--sp-2) var(--sp-12);
}
.plx-hd-badge-high   { background: var(--red-bg); color: var(--red); }
.plx-hd-badge-medium { background: var(--amber-bg);  color: var(--amber); }