/* ============================================================
   BATTLE MVP — Homepage v2
   Namespace: .hp2-*   (no collision with legacy .hp-*)
   Tokens from /assets/logo/brand.css
   ============================================================ */

.hp2{
  --hp2-gap:14px;
  --hp2-r:14px;
  --hp2-line:rgba(255,255,255,.07);
  --hp2-line-2:rgba(255,255,255,.12);
  --hp2-card:#0b1117;
  --hp2-card-2:#0e151d;
  --hp2-txt:#eaf1ff;
  --hp2-dim:#7e93a6;
  --hp2-dim-2:#54697b;
  --hp2-teal:#00ffa6;
  --hp2-blue:#3ba9ff;
  --hp2-violet:#a06bff;
  --hp2-gold:#ffd24a;
  display:flex;
  flex-direction:column;
  gap:var(--hp2-gap);
  padding-bottom:28px;
  color:var(--hp2-txt);
}

/* ---------- shared ---------- */
.hp2-sec{
  display:flex;align-items:center;justify-content:space-between;
  margin:6px 2px -4px;
}
.hp2-sec-t{
  font-size:11px;font-weight:800;letter-spacing:.14em;
  color:var(--hp2-dim);text-transform:uppercase;
}
.hp2-sec-more{
  font-size:10px;font-weight:700;letter-spacing:.1em;
  color:var(--hp2-dim-2);text-decoration:none;text-transform:uppercase;
  transition:color .18s ease;
}
.hp2-sec-more:hover{color:var(--hp2-teal);}

/* ============================================================
   HERO
   ============================================================ */
.hp2-hero{
  position:relative;overflow:hidden;
  border-radius:var(--hp2-r);
  border:1px solid var(--hp2-line);
  min-height:300px;
  display:flex;align-items:center;
  isolation:isolate;
}
.hp2-hero-art{
  position:absolute;inset:0;z-index:0;
  background:#060d14 center/cover no-repeat;
  opacity:.85;
}
.hp2-hero-veil{
  position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(120% 90% at 12% 50%, rgba(0,255,166,.16) 0%, transparent 55%),
    linear-gradient(90deg, rgba(5,11,18,.55) 0%, rgba(5,11,18,.80) 42%, rgba(5,11,18,.94) 78%);
}
.hp2-hero-glow{
  position:absolute;z-index:1;pointer-events:none;
  width:420px;height:420px;border-radius:50%;
  filter:blur(90px);opacity:.30;
}
.hp2-hero-glow--a{left:-90px;top:-140px;background:#00ffa6;}
.hp2-hero-glow--b{right:12%;bottom:-180px;background:#0a84ff;opacity:.18;}

.hp2-hero-body{
  position:relative;z-index:2;
  margin-left:auto;
  width:min(58%,720px);
  padding:34px 40px 34px 24px;
  text-align:center;
}
@media(max-width:1100px){
  .hp2-hero-body{width:100%;margin:0;padding:30px 22px;}
}

.hp2-badge{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 13px;margin-bottom:16px;
  border-radius:999px;
  border:1px solid rgba(0,255,166,.28);
  background:rgba(0,255,166,.07);
  font-size:10px;font-weight:800;letter-spacing:.15em;
  color:var(--hp2-teal);text-transform:uppercase;
}
.hp2-badge::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:var(--hp2-teal);
  box-shadow:0 0 8px var(--hp2-teal);
  animation:hp2pulse 2s ease-in-out infinite;
}
@keyframes hp2pulse{50%{opacity:.35;}}

.hp2-title{
  margin:0;
  font-size:clamp(38px,5.2vw,72px);
  font-weight:900;line-height:.96;letter-spacing:-.02em;
}
.hp2-title span{
  color:var(--hp2-teal);
  text-shadow:0 0 34px rgba(0,255,166,.42);
}
.hp2-sub{
  margin:14px 0 24px;
  font-size:clamp(13px,1.35vw,17px);
  font-weight:600;color:#8fe7c9;
}

.hp2-cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.hp2-btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 26px;border-radius:11px;
  font-size:13px;font-weight:800;letter-spacing:.05em;
  text-decoration:none;text-transform:uppercase;
  border:1px solid transparent;
  transition:transform .16s ease, box-shadow .2s ease, background .2s ease;
}
.hp2-btn--primary{
  background:linear-gradient(135deg,#1ee0ac,#08d6e8);
  color:#03231b;
  box-shadow:0 8px 26px rgba(30,224,172,.28);
}
.hp2-btn--primary:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(30,224,172,.42);}
.hp2-btn--ghost{
  background:rgba(255,255,255,.04);
  border-color:var(--hp2-line-2);
  color:var(--hp2-txt);
}
.hp2-btn--ghost:hover{background:rgba(255,255,255,.08);transform:translateY(-2px);}

/* ============================================================
   MODE CARDS
   ============================================================ */
.hp2-modes{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--hp2-gap);
}
@media(max-width:900px){.hp2-modes{grid-template-columns:1fr;}}

.hp2-mode{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  border-radius:var(--hp2-r);
  border:1px solid var(--hp2-line);
  background:var(--hp2-card);
  padding:16px 16px 0;
  text-decoration:none;color:inherit;
  transition:transform .18s ease, border-color .18s ease;
}
.hp2-mode::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 70% at 85% 0%, var(--hp2-acc-soft) 0%, transparent 62%);
}
.hp2-mode:hover{transform:translateY(-3px);border-color:var(--hp2-acc-line);}

.hp2-mode--5v5  {--hp2-acc:#00ffa6;--hp2-acc-soft:rgba(0,255,166,.13);--hp2-acc-line:rgba(0,255,166,.42);}
.hp2-mode--1v1  {--hp2-acc:#3ba9ff;--hp2-acc-soft:rgba(59,169,255,.13);--hp2-acc-line:rgba(59,169,255,.42);}
.hp2-mode--train{--hp2-acc:#a06bff;--hp2-acc-soft:rgba(160,107,255,.13);--hp2-acc-line:rgba(160,107,255,.42);}

.hp2-mode-head{position:relative;z-index:1;display:flex;align-items:center;gap:11px;}
.hp2-mode-ico{
  width:34px;height:34px;flex:0 0 34px;
  display:grid;place-items:center;border-radius:9px;
  background:var(--hp2-acc-soft);
  border:1px solid var(--hp2-acc-line);
  color:var(--hp2-acc);font-size:15px;
}
.hp2-mode-t{font-size:14px;font-weight:800;letter-spacing:.02em;}
.hp2-mode-s{font-size:11px;color:var(--hp2-dim);margin-top:1px;}

.hp2-mode-list{
  position:relative;z-index:1;
  list-style:none;margin:14px 0 16px;padding:0;
  display:flex;flex-direction:column;gap:7px;
}
.hp2-mode-list li{
  display:flex;align-items:center;gap:8px;
  font-size:12px;color:#9fb3c4;
}
.hp2-mode-list li::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:var(--hp2-acc);flex:0 0 5px;
}
.hp2-mode-list b{color:var(--hp2-acc);font-weight:700;}

.hp2-mode-go{
  position:relative;z-index:1;margin-top:auto;
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 0;
  border-top:1px solid var(--hp2-line);
  font-size:11px;font-weight:800;letter-spacing:.12em;
  color:var(--hp2-acc);text-transform:uppercase;
}
.hp2-mode:hover .hp2-mode-go{background:var(--hp2-acc-soft);}

/* ============================================================
   STATS
   ============================================================ */
.hp2-stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-radius:var(--hp2-r);
  border:1px solid var(--hp2-line);
  background:var(--hp2-card);
  overflow:hidden;
}
@media(max-width:900px){.hp2-stats{grid-template-columns:repeat(2,1fr);}}

.hp2-stat{
  display:flex;align-items:center;gap:13px;
  padding:18px 20px;
  border-right:1px solid var(--hp2-line);
}
.hp2-stat:last-child{border-right:0;}
@media(max-width:900px){
  .hp2-stat:nth-child(2n){border-right:0;}
  .hp2-stat:nth-child(-n+2){border-bottom:1px solid var(--hp2-line);}
}
.hp2-stat-ico{
  width:36px;height:36px;flex:0 0 36px;
  display:grid;place-items:center;border-radius:10px;
  font-size:15px;
}
.hp2-stat:nth-child(1) .hp2-stat-ico{background:rgba(0,255,166,.10);color:#00ffa6;}
.hp2-stat:nth-child(2) .hp2-stat-ico{background:rgba(59,169,255,.10);color:#3ba9ff;}
.hp2-stat:nth-child(3) .hp2-stat-ico{background:rgba(0,255,166,.10);color:#00ffa6;}
.hp2-stat:nth-child(4) .hp2-stat-ico{background:rgba(160,107,255,.10);color:#a06bff;}
.hp2-stat-val{font-size:21px;font-weight:900;line-height:1.05;}
.hp2-stat-lbl{
  font-size:9px;font-weight:700;letter-spacing:.13em;
  color:var(--hp2-dim-2);text-transform:uppercase;margin-top:3px;
}

/* ============================================================
   MAPS
   ============================================================ */
.hp2-maps{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--hp2-gap);}
@media(max-width:1300px){.hp2-maps{grid-template-columns:repeat(3,1fr);}}
@media(max-width:700px){.hp2-maps{grid-template-columns:repeat(2,1fr);}}

.hp2-map{
  position:relative;overflow:hidden;
  border-radius:12px;
  border:1px solid var(--hp2-line);
  background:var(--hp2-card);
  text-decoration:none;color:inherit;
  transition:transform .18s ease, border-color .18s ease;
}
.hp2-map:hover{transform:translateY(-3px);border-color:rgba(0,255,166,.35);}
.hp2-map-img{
  height:118px;
  background:#0a1017 center/cover no-repeat;
  position:relative;
}
.hp2-map-img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,11,18,.15) 0%,rgba(5,11,18,.88) 100%);
}
.hp2-map-num{
  position:absolute;top:8px;left:9px;z-index:2;
  font-size:10px;font-weight:900;letter-spacing:.08em;
  color:rgba(255,255,255,.62);
  text-shadow:0 1px 6px rgba(0,0,0,.9);
}
.hp2-map-body{padding:9px 11px 11px;}
.hp2-map-name{font-size:12px;font-weight:700;}
.hp2-map-meta{
  font-size:9px;font-weight:700;letter-spacing:.11em;
  color:var(--hp2-dim-2);text-transform:uppercase;margin-top:3px;
}

/* ============================================================
   PROMOS
   ============================================================ */
.hp2-promos{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--hp2-gap);}
@media(max-width:900px){.hp2-promos{grid-template-columns:1fr;}}

.hp2-promo{
  position:relative;overflow:hidden;
  border-radius:var(--hp2-r);
  border:1px solid var(--hp2-line);
  background:var(--hp2-card);
  padding:20px 22px;min-height:104px;
  text-decoration:none;color:inherit;
  transition:transform .18s ease, border-color .18s ease;
}
.hp2-promo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(100% 120% at 100% 50%, var(--hp2-acc-soft) 0%, transparent 60%);
}
.hp2-promo:hover{transform:translateY(-3px);border-color:var(--hp2-acc-line);}
.hp2-promo--blue  {--hp2-acc:#3ba9ff;--hp2-acc-soft:rgba(59,169,255,.16);--hp2-acc-line:rgba(59,169,255,.40);}
.hp2-promo--violet{--hp2-acc:#a06bff;--hp2-acc-soft:rgba(160,107,255,.16);--hp2-acc-line:rgba(160,107,255,.40);}
.hp2-promo--gold  {--hp2-acc:#ffd24a;--hp2-acc-soft:rgba(255,210,74,.14);--hp2-acc-line:rgba(255,210,74,.38);}

.hp2-promo-t{position:relative;z-index:1;font-size:15px;font-weight:800;letter-spacing:.01em;}
.hp2-promo-hl{
  position:relative;z-index:1;margin-top:3px;
  font-size:13px;font-weight:800;color:var(--hp2-acc);
}
.hp2-promo-s{
  position:relative;z-index:1;margin-top:9px;
  font-size:11px;color:var(--hp2-dim);
}

/* ============================================================
   EMPTY STATE (honest — no fake data)
   ============================================================ */
.hp2-empty{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:34px 20px;
  border-radius:var(--hp2-r);
  border:1px dashed var(--hp2-line-2);
  background:rgba(255,255,255,.015);
  text-align:center;
}
.hp2-empty-ico{font-size:24px;opacity:.35;}
.hp2-empty-t{font-size:13px;font-weight:700;color:var(--hp2-dim);}
.hp2-empty-s{font-size:11px;color:var(--hp2-dim-2);}

/* ---------- entrance ---------- */
.hp2-in{animation:hp2in .5s ease both;}
.hp2-in:nth-child(2){animation-delay:.05s;}
.hp2-in:nth-child(3){animation-delay:.10s;}
.hp2-in:nth-child(4){animation-delay:.15s;}
.hp2-in:nth-child(5){animation-delay:.20s;}
@keyframes hp2in{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
@media(prefers-reduced-motion:reduce){
  .hp2-in{animation:none;}
  .hp2-badge::before{animation:none;}
}

/* ============================================================
   v2.1 — hero refinement + promo polish
   Appended: later rules win by order, same specificity.
   No !important, no layout hacks.
   ============================================================ */

/* ---- HERO: centered until a real art file exists ---- */
.hp2-hero{min-height:264px;}
.hp2-hero-body{
  width:100%;
  max-width:840px;
  margin:0 auto;
  padding:40px 26px;
}
.hp2-title{font-size:clamp(38px,4.6vw,66px);}

/* brand monogram as a watermark on the left (fills the art slot) */
.hp2-hero::before{
  content:"";
  position:absolute;z-index:1;pointer-events:none;
  left:-46px;top:50%;transform:translateY(-50%);
  width:330px;height:330px;
  background:url('/assets/logo/battle-mvp-mark.svg') center/contain no-repeat;
  opacity:.09;
}
@media(max-width:980px){.hp2-hero::before{display:none;}}

/* faint tech grid via ::after — keeps inline background-image intact */
.hp2-hero-art{background-color:#070e15;}
.hp2-hero-art::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:46px 46px;
}

/* tame the left glow so it reads as light, not as a blob */
.hp2-hero-glow--a{left:-150px;top:-190px;opacity:.15;}
.hp2-hero-glow--b{opacity:.13;}

/* ---- PROMO: soft accent orb on the right ---- */
.hp2-promo{
  min-height:118px;
  display:flex;flex-direction:column;justify-content:center;
}
.hp2-promo::before{
  content:"";position:absolute;pointer-events:none;
  right:-34px;top:50%;transform:translateY(-50%);
  width:158px;height:158px;border-radius:50%;
  background:var(--hp2-acc-soft);
  filter:blur(32px);
}

/* ---- MAPS: slightly taller tiles ---- */
.hp2-map-img{height:126px;}

/* ============================================================
   v3.0 — informational homepage
   KPI strip / lifecycle / why-cards / season / recent
   ============================================================ */

/* perf: skip rendering work for off-screen sections */
.hp2-defer{content-visibility:auto;contain-intrinsic-size:auto 340px;}

.hp2-btn--sm{padding:9px 18px;font-size:11px;}

/* ---- KPI strip (variable count, zeros omitted) ---- */
.hp2-kpis{
  display:grid;gap:var(--hp2-gap);
  grid-template-columns:repeat(auto-fit,minmax(184px,1fr));
}
.hp2-kpi{
  display:flex;align-items:center;gap:13px;
  padding:17px 19px;
  border:1px solid var(--hp2-line);
  border-radius:var(--hp2-r);
  background:var(--hp2-card);
}
.hp2-kpi-ico{
  width:36px;height:36px;flex:0 0 36px;
  display:grid;place-items:center;border-radius:10px;font-size:15px;
}
.hp2-kpi--teal   .hp2-kpi-ico{background:rgba(0,255,166,.10);color:#00ffa6;}
.hp2-kpi--blue   .hp2-kpi-ico{background:rgba(59,169,255,.10);color:#3ba9ff;}
.hp2-kpi--violet .hp2-kpi-ico{background:rgba(160,107,255,.10);color:#a06bff;}
.hp2-kpi--gold   .hp2-kpi-ico{background:rgba(255,210,74,.10);color:#ffd24a;}
.hp2-kpi-val{font-size:21px;font-weight:900;line-height:1.05;}
.hp2-kpi-lbl{
  font-size:9px;font-weight:700;letter-spacing:.13em;
  color:var(--hp2-dim-2);text-transform:uppercase;margin-top:3px;
}

/* ---- generic block ---- */
.hp2-block{
  border:1px solid var(--hp2-line);
  border-radius:var(--hp2-r);
  background:var(--hp2-card);
  padding:20px 20px 22px;
}
.hp2-block-head{margin-bottom:16px;}
.hp2-block-head--row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.hp2-block-t{font-size:14px;font-weight:800;letter-spacing:.02em;}
.hp2-block-s{font-size:11px;color:var(--hp2-dim);margin-top:4px;}

/* ---- lifecycle flow ---- */
.hp2-flow{
  list-style:none;margin:0;padding:0;
  display:flex;gap:8px;flex-wrap:wrap;
  counter-reset:hp2f;
}
.hp2-flow-step{
  flex:1 1 118px;min-width:112px;
  position:relative;
  display:flex;flex-direction:column;gap:3px;
  padding:13px 11px;
  border:1px solid var(--hp2-line);
  border-radius:11px;
  background:rgba(255,255,255,.015);
}
.hp2-flow-step::after{
  content:"›";
  position:absolute;right:-8px;top:50%;transform:translateY(-50%);
  font-size:15px;color:var(--hp2-dim-2);z-index:1;
}
.hp2-flow-step:last-child::after{content:none;}
.hp2-flow-ico{font-size:14px;color:var(--hp2-teal);line-height:1;}
.hp2-flow-t{
  font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
}
.hp2-flow-s{font-size:10px;color:var(--hp2-dim-2);}
@media(max-width:760px){
  .hp2-flow-step{flex:1 1 100%;}
  .hp2-flow-step::after{content:none;}
}

/* ---- why cards ---- */
.hp2-why{
  display:grid;gap:var(--hp2-gap);
  grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
}
.hp2-why-card{
  position:relative;overflow:hidden;
  padding:17px 17px 19px;
  border:1px solid var(--hp2-line);
  border-radius:12px;
  background:rgba(255,255,255,.015);
}
.hp2-why-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--hp2-wc);
}
.hp2-why-card--teal  {--hp2-wc:#00ffa6;}
.hp2-why-card--blue  {--hp2-wc:#3ba9ff;}
.hp2-why-card--violet{--hp2-wc:#a06bff;}
.hp2-why-card--gold  {--hp2-wc:#ffd24a;}
.hp2-why-ico{font-size:17px;color:var(--hp2-wc);line-height:1;margin-bottom:9px;}
.hp2-why-t{font-size:13px;font-weight:800;margin-bottom:6px;}
.hp2-why-s{font-size:11.5px;line-height:1.55;color:var(--hp2-dim);}

/* ---- season ---- */
.hp2-season{
  border:1px solid rgba(255,210,74,.16);
  border-radius:var(--hp2-r);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(255,210,74,.07) 0%, transparent 58%),
    var(--hp2-card);
  padding:20px;
}
.hp2-season-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-bottom:16px;
}
.hp2-season-tag{
  font-size:9px;font-weight:800;letter-spacing:.14em;
  color:var(--hp2-gold);text-transform:uppercase;
}
.hp2-season-name{font-size:17px;font-weight:900;margin-top:3px;}
.hp2-season-grid{
  display:grid;gap:1px;background:var(--hp2-line);
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  border:1px solid var(--hp2-line);border-radius:11px;overflow:hidden;
}
.hp2-season-cell{background:var(--hp2-card);padding:15px 16px;text-align:center;}
.hp2-season-val{font-size:20px;font-weight:900;}
.hp2-season-val--gold{color:var(--hp2-gold);}
.hp2-season-lbl{
  font-size:9px;font-weight:700;letter-spacing:.12em;
  color:var(--hp2-dim-2);text-transform:uppercase;margin-top:4px;
}
.hp2-season-bar{
  margin-top:14px;height:4px;border-radius:99px;
  background:rgba(255,255,255,.06);overflow:hidden;
}
.hp2-season-bar i{
  display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#1ee0ac,#ffd24a);
}

/* ---- recent matches ---- */
.hp2-rc{display:flex;flex-direction:column;gap:1px;}
.hp2-rc-row{
  display:grid;align-items:center;gap:12px;
  grid-template-columns:52px 1fr auto;
  padding:12px 13px;border-radius:9px;
  text-decoration:none;color:inherit;
  background:rgba(255,255,255,.015);
  transition:background .16s ease;
}
.hp2-rc-row:hover{background:rgba(255,255,255,.045);}
.hp2-rc-mode{
  font-size:9px;font-weight:800;letter-spacing:.1em;
  color:var(--hp2-teal);
}
.hp2-rc-map{font-size:12px;color:#9fb3c4;}
.hp2-rc-score{font-size:14px;font-weight:900;}

/* empty state gets a CTA now */
.hp2-empty .hp2-btn{margin-top:10px;}

/* ============================================================
   v4.0 — real art + masked icons
   Icons are recoloured via CSS mask, so one PNG serves every
   accent colour. Mask uses the alpha channel of the source.
   ============================================================ */

/* ---- hero now has a real art file: art left, copy right ---- */
.hp2-hero{min-height:300px;}
.hp2-hero::before{content:none;}          /* monogram watermark no longer needed */
.hp2-hero-art{
  background-position:left center;
  background-size:cover;
  opacity:1;
}
.hp2-hero-art::after{content:none;}       /* grid would fight the artwork */
.hp2-hero-veil{
  background:linear-gradient(90deg,
    rgba(5,11,18,0)   0%,
    rgba(5,11,18,.06) 30%,
    rgba(5,11,18,.34) 52%,
    rgba(5,11,18,.55) 100%);
}
.hp2-hero-glow--a{opacity:0;}             /* the artwork provides its own glow */
.hp2-hero-glow--b{right:6%;opacity:.10;}
.hp2-hero-body{
  width:min(54%,660px);
  max-width:none;
  margin:0 0 0 auto;
  padding:36px 40px 36px 20px;
  text-align:center;
}
@media(max-width:1080px){
  .hp2-hero-art{background-position:center;}
  .hp2-hero-veil{background:linear-gradient(90deg,rgba(5,11,18,.62),rgba(5,11,18,.82));}
  .hp2-hero-body{width:100%;margin:0;padding:32px 22px;}
}

/* ---- masked icons: inherit the card accent ---- */
.hp2-mode-ico i,
.hp2-why-ico i{
  display:block;
  -webkit-mask:var(--ic) center/contain no-repeat;
          mask:var(--ic) center/contain no-repeat;
}
.hp2-mode-ico i{width:19px;height:19px;background:var(--hp2-acc);}
.hp2-why-ico{height:20px;margin-bottom:11px;}
.hp2-why-ico i{width:20px;height:20px;background:var(--hp2-wc);}

/* ---- promo card with artwork ---- */
.hp2-promo--art{min-height:132px;}
.hp2-promo--art::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--art) right center/auto 100% no-repeat;
  opacity:.62;
  -webkit-mask:linear-gradient(90deg,transparent 8%,#000 62%);
          mask:linear-gradient(90deg,transparent 8%,#000 62%);
}
.hp2-promo--art::before{z-index:1;}
.hp2-promo--art .hp2-promo-t,
.hp2-promo--art .hp2-promo-hl,
.hp2-promo--art .hp2-promo-s{position:relative;z-index:2;}

/* ============================================================
   v4.1 — promo balance + icon sizing
   Neon rings are drawn in CSS (zero bytes) instead of shipping
   80 KB PNGs for decoration.
   ============================================================ */

/* ---- why-card icons: standing free, so they need more presence ---- */
.hp2-why-ico{height:24px;margin-bottom:12px;}
.hp2-why-ico i{width:24px;height:24px;}

/* ---- promo: tame the plain accent orb ---- */
.hp2-promo::before{
  right:-46px;width:150px;height:150px;
  filter:blur(40px);opacity:.55;
}

/* neon ring for promo cards without artwork */
.hp2-promo--ring::after{
  content:"";position:absolute;pointer-events:none;
  right:20px;top:50%;transform:translateY(-50%);
  width:104px;height:104px;border-radius:50%;
  border:2px solid var(--hp2-acc);
  opacity:.30;
  box-shadow:
    0 0 22px var(--hp2-acc),
    inset 0 0 18px var(--hp2-acc);
}
.hp2-promo--ring::before{opacity:.32;}
.hp2-promo--ring .hp2-promo-t,
.hp2-promo--ring .hp2-promo-hl,
.hp2-promo--ring .hp2-promo-s{position:relative;z-index:2;}
.hp2-promo--ring:hover::after{opacity:.46;}

/* keep all three promo cards the same height */
.hp2-promo{min-height:132px;}

/* ============================================================
   v5.0 — server fleet + movement records
   FIX: promo ring was pinned left because the base .hp2-promo::after
   rule sets inset:0, and left:0 beats a later right:20px.
   ============================================================ */

.hp2-promo--ring::after{left:auto;top:50%;bottom:auto;}

/* compact empty state — a 250px void reads as broken, not honest */
.hp2-empty{padding:26px 20px;}
.hp2-empty--sm{padding:20px;}
.hp2-empty--sm .hp2-empty-ico{display:none;}

/* ---- server fleet ---- */
.hp2-srv{
  display:grid;gap:8px;
  grid-template-columns:repeat(auto-fill,minmax(212px,1fr));
}
.hp2-srv-i{
  display:flex;align-items:center;gap:10px;
  padding:11px 13px;
  border:1px solid var(--hp2-line);
  border-radius:10px;
  background:rgba(255,255,255,.015);
}
.hp2-srv-dot{
  width:7px;height:7px;flex:0 0 7px;border-radius:50%;
  background:#3d4d5c;
}
.hp2-srv-i.is-live .hp2-srv-dot{
  background:var(--hp2-teal);
  box-shadow:0 0 9px var(--hp2-teal);
  animation:hp2pulse 2.4s ease-in-out infinite;
}
.hp2-srv-b{min-width:0;flex:1;}
.hp2-srv-n{
  font-size:11px;font-weight:800;letter-spacing:.05em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hp2-srv-m{
  font-size:9.5px;color:var(--hp2-dim-2);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hp2-srv-r{text-align:right;flex:0 0 auto;}
.hp2-srv-sl{font-size:12px;font-weight:800;color:#9fb3c4;}
.hp2-srv-rg{
  font-size:8.5px;font-weight:700;letter-spacing:.1em;
  color:var(--hp2-dim-2);margin-top:2px;
}

/* ---- movement records ---- */
.hp2-rec{display:flex;flex-direction:column;gap:1px;}
.hp2-rec-row{
  display:grid;align-items:center;gap:12px;
  grid-template-columns:52px 1fr auto auto;
  padding:11px 13px;border-radius:9px;
  background:rgba(255,255,255,.015);
}
.hp2-rec-mode{
  font-size:9px;font-weight:800;letter-spacing:.09em;
  padding:3px 0;text-align:center;border-radius:5px;
}
.hp2-rec-mode--bhop{background:rgba(0,255,166,.12);color:#00ffa6;}
.hp2-rec-mode--kz  {background:rgba(59,169,255,.12);color:#3ba9ff;}
.hp2-rec-mode--surf{background:rgba(160,107,255,.12);color:#a06bff;}
.hp2-rec-map{
  font-size:11.5px;color:#9fb3c4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hp2-rec-who{font-size:11px;color:var(--hp2-dim-2);}
.hp2-rec-time{
  font-size:13px;font-weight:900;color:var(--hp2-txt);
  font-variant-numeric:tabular-nums;
}
@media(max-width:640px){
  .hp2-rec-row{grid-template-columns:46px 1fr auto;}
  .hp2-rec-who{display:none;}
}

/* ============================================================
   v5.1 — server fleet removed from the public page
   Server codes and maps are operational data: the aggregate
   "N/M online" KPI is all a player needs. Detail belongs in admin.
   ============================================================ */

.hp2-srv,.hp2-srv-i,.hp2-srv-dot,.hp2-srv-b,.hp2-srv-n,
.hp2-srv-m,.hp2-srv-r,.hp2-srv-sl,.hp2-srv-rg{display:none;}

/* matches (often empty) beside records (live) */
.hp2-duo{
  display:grid;gap:var(--hp2-gap);
  grid-template-columns:1fr 1fr;
  align-items:start;
}
@media(max-width:1000px){.hp2-duo{grid-template-columns:1fr;}}

.hp2-duo .hp2-block{height:100%;}
.hp2-duo .hp2-empty{padding:30px 18px;}
.hp2-duo .hp2-rec-row{grid-template-columns:48px 1fr auto;}
.hp2-duo .hp2-rec-who{display:none;}

/* ============================================================
   v6.0 — lifecycle steps as filled tiles
   Colour arc: cold queue -> bright LIVE peak -> gold highlights.
   Rendered in CSS: seven background images would cost ~100 KB
   and drown the label text at this tile size.
   ============================================================ */

.hp2-flow{gap:9px;counter-reset:hp2f;}

.hp2-flow-step{
  position:relative;overflow:hidden;
  flex:1 1 132px;min-width:126px;
  padding:15px 13px 14px;
  border:1px solid var(--hp2-line);
  border-radius:12px;
  background:
    linear-gradient(160deg,
      color-mix(in srgb, var(--st) 22%, transparent) 0%,
      color-mix(in srgb, var(--st) 7%,  transparent) 46%,
      rgba(255,255,255,.012) 100%),
    var(--hp2-card);
  transition:transform .2s ease, border-color .2s ease;
}

/* diagonal tech hatch */
.hp2-flow-step::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(58deg,
    color-mix(in srgb, var(--st) 9%, transparent) 0 1px,
    transparent 1px 13px);
  opacity:.55;
}

/* step number watermark (replaces the old chevron) */
.hp2-flow-step::after{
  counter-increment:hp2f;
  content:counter(hp2f,decimal-leading-zero);
  position:absolute;right:8px;bottom:-13px;left:auto;top:auto;
  transform:none;
  font-size:44px;font-weight:900;line-height:1;
  color:var(--st);opacity:.14;
  letter-spacing:-.04em;
}

.hp2-flow-step:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--st) 42%, transparent);
}

.hp2-flow-ico,
.hp2-flow-t,
.hp2-flow-s{position:relative;z-index:1;}
.hp2-flow-ico{color:var(--st);font-size:15px;}
.hp2-flow-t{color:var(--hp2-txt);}
.hp2-flow-s{color:var(--hp2-dim-2);}

/* ---- the arc ---- */
.hp2-flow-step:nth-child(1){--st:#5a7488;}  /* queue    — cold */
.hp2-flow-step:nth-child(2){--st:#3ba9ff;}  /* accept   */
.hp2-flow-step:nth-child(3){--st:#a06bff;}  /* veto     */
.hp2-flow-step:nth-child(4){--st:#08d6e8;}  /* connect  */
.hp2-flow-step:nth-child(5){--st:#00ffa6;}  /* LIVE     — peak */
.hp2-flow-step:nth-child(6){--st:#1ee0ac;}  /* stats    */
.hp2-flow-step:nth-child(7){--st:#ffd24a;}  /* highlights — gold */

/* LIVE carries the brightest treatment: it is the moment that matters */
.hp2-flow-step:nth-child(5){
  border-color:rgba(0,255,166,.30);
  box-shadow:0 0 0 1px rgba(0,255,166,.06), 0 6px 24px rgba(0,255,166,.09);
}
.hp2-flow-step:nth-child(5) .hp2-flow-ico{
  animation:hp2pulse 2s ease-in-out infinite;
}

@media(max-width:760px){
  .hp2-flow-step{flex:1 1 100%;}
  .hp2-flow-step::after{font-size:38px;bottom:-10px;}
}
@media(prefers-reduced-motion:reduce){
  .hp2-flow-step:nth-child(5) .hp2-flow-ico{animation:none;}
}

/* ============================================================
   v7.0 — illustrated lifecycle tiles
   Icon art on top with a coloured haze, number + label below.
   SVG strokes inherit --st, so the colour arc still drives
   everything from one variable per step.
   ============================================================ */

.hp2-flow{gap:10px;}

.hp2-flow-step{
  flex:1 1 148px;min-width:138px;
  display:flex;flex-direction:column;gap:0;
  padding:0;overflow:hidden;
  border-radius:13px;
}

/* number moves into the footer — kill the old watermark */
.hp2-flow-step::after{content:none;}
.hp2-flow-step::before{opacity:.42;}

/* ---- art panel ---- */
.hp2-flow-art{
  position:relative;z-index:1;
  display:grid;place-items:center;
  height:86px;
  background:
    radial-gradient(70% 78% at 50% 62%,
      color-mix(in srgb, var(--st) 26%, transparent) 0%,
      color-mix(in srgb, var(--st) 8%,  transparent) 45%,
      transparent 72%);
}
.hp2-flow-art::after{           /* haze pooling at the base */
  content:"";position:absolute;left:12%;right:12%;bottom:0;height:34px;
  background:radial-gradient(60% 100% at 50% 100%,
    color-mix(in srgb, var(--st) 34%, transparent) 0%, transparent 70%);
  filter:blur(9px);
  pointer-events:none;
}
.hp2-flow-art svg{
  position:relative;z-index:1;
  width:38px;height:38px;
  color:var(--st);
  filter:drop-shadow(0 0 7px color-mix(in srgb, var(--st) 62%, transparent));
}

/* ---- footer: number + labels ---- */
.hp2-flow-foot{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:9px;
  padding:11px 12px 13px;
  border-top:1px solid color-mix(in srgb, var(--st) 13%, transparent);
  background:linear-gradient(180deg, rgba(5,11,18,.28), rgba(5,11,18,.52));
}
.hp2-flow-num{
  counter-increment:hp2f;
  font-size:21px;font-weight:900;line-height:1;
  letter-spacing:-.04em;
  color:var(--st);opacity:.62;
  flex:0 0 auto;
}
.hp2-flow-num::before{content:counter(hp2f,decimal-leading-zero);}
.hp2-flow-txt{display:flex;flex-direction:column;gap:2px;min-width:0;}
.hp2-flow-t{
  font-size:10px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--hp2-txt);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hp2-flow-s{
  font-size:9.5px;color:var(--hp2-dim-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.hp2-flow-step:hover .hp2-flow-art svg{
  filter:drop-shadow(0 0 12px color-mix(in srgb, var(--st) 85%, transparent));
}

/* LIVE stays the peak of the arc */
.hp2-flow-step:nth-child(5) .hp2-flow-art svg{
  animation:hp2glow 2.4s ease-in-out infinite;
}
@keyframes hp2glow{
  50%{filter:drop-shadow(0 0 15px color-mix(in srgb, var(--st) 95%, transparent));}
}

@media(max-width:900px){
  .hp2-flow-step{flex:1 1 calc(50% - 5px);}
}
@media(max-width:520px){
  .hp2-flow-step{flex:1 1 100%;}
  .hp2-flow-art{height:74px;}
}
@media(prefers-reduced-motion:reduce){
  .hp2-flow-step:nth-child(5) .hp2-flow-art svg{animation:none;}
}

/* ============================================================
   v7.1 — compact lifecycle tiles
   Same composition, ~35% less vertical space.
   ============================================================ */

.hp2-flow{gap:8px;}

.hp2-flow-step{
  flex:1 1 130px;min-width:120px;
  border-radius:11px;
}

/* ---- art panel: shorter ---- */
.hp2-flow-art{height:58px;}
.hp2-flow-art svg{width:30px;height:30px;}
.hp2-flow-art::after{
  left:16%;right:16%;height:24px;
  filter:blur(7px);
}

/* ---- footer: tighter ---- */
.hp2-flow-foot{
  gap:8px;
  padding:8px 10px 9px;
}
.hp2-flow-num{font-size:18px;opacity:.58;}
.hp2-flow-t{font-size:9.5px;letter-spacing:.07em;}
.hp2-flow-s{font-size:9px;}

@media(max-width:900px){
  .hp2-flow-step{flex:1 1 calc(50% - 4px);}
}
@media(max-width:520px){
  .hp2-flow-step{flex:1 1 100%;}
  .hp2-flow-art{height:52px;}
}

/* ============================================================
   v8.0 — illustrated art tiles
   Art is a real image; the CSS gradient underneath is switched
   off so the two don't stack. SVG fallback stays for the case
   where a file is missing.
   ============================================================ */

.hp2-flow-art.has-art{
  height:66px;
  background:var(--art) center/cover no-repeat;
}
.hp2-flow-art.has-art::after{
  content:"";
  left:0;right:0;bottom:0;height:100%;
  background:linear-gradient(180deg,
    rgba(5,11,18,0) 42%, rgba(5,11,18,.45) 100%);
  filter:none;
}
.hp2-flow-step:hover .hp2-flow-art.has-art{
  filter:brightness(1.12);
}

/* the tile keeps only a hairline of its accent — the art carries the colour */
.hp2-flow-step{
  background:
    linear-gradient(180deg, rgba(255,255,255,.014), rgba(255,255,255,.004)),
    var(--hp2-card);
}
.hp2-flow-step::before{opacity:.16;}

@media(max-width:520px){
  .hp2-flow-art.has-art{height:74px;}
}

/* ============================================================
   v8.1 — block headers span the full width
   title -> rule -> subtitle on one line. The rule is a flex
   child ordered between them, so no extra markup is needed.
   ============================================================ */

.hp2-block-head:not(.hp2-block-head--row){
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:15px;
}

/* accent bar + title */
.hp2-block-head:not(.hp2-block-head--row) .hp2-block-t{
  flex:0 0 auto;
  order:1;
  position:relative;
  padding-left:11px;
  font-size:14.5px;
}
.hp2-block-head:not(.hp2-block-head--row) .hp2-block-t::before{
  content:"";
  position:absolute;left:0;top:50%;
  transform:translateY(-50%);
  width:3px;height:15px;border-radius:2px;
  background:linear-gradient(180deg,#1ee0ac,#08d6e8);
}

/* the rule that fills the gap */
.hp2-block-head:not(.hp2-block-head--row)::after{
  content:"";
  order:2;
  flex:1 1 auto;
  height:1px;
  min-width:20px;
  background:linear-gradient(90deg,
    rgba(255,255,255,.13) 0%,
    rgba(255,255,255,.05) 55%,
    transparent 100%);
}

/* subtitle moves to the right end of the same line */
.hp2-block-head:not(.hp2-block-head--row) .hp2-block-s{
  flex:0 0 auto;
  order:3;
  margin-top:0;
  text-align:right;
  font-size:10.5px;
  letter-spacing:.02em;
  color:var(--hp2-dim-2);
}

@media(max-width:820px){
  .hp2-block-head:not(.hp2-block-head--row){
    flex-wrap:wrap;
    gap:8px 12px;
  }
  .hp2-block-head:not(.hp2-block-head--row)::after{display:none;}
  .hp2-block-head:not(.hp2-block-head--row) .hp2-block-s{
    order:3;flex:1 1 100%;text-align:left;
  }
}

/* ---- tile captions: wrap instead of truncating ---- */
.hp2-flow-t{white-space:normal;overflow:visible;text-overflow:clip;}
.hp2-flow-s{
  white-space:normal;overflow:visible;text-overflow:clip;
  line-height:1.3;
}
.hp2-flow-foot{align-items:flex-start;padding-top:9px;}
.hp2-flow-num{margin-top:1px;}

/* ============================================================
   v9.0 — KPI tiles with artwork
   Accent bar on the left edge, ring icon, art bleeding in from
   the right. Slots without art keep the plain treatment, so the
   strip still works when it grows to five after F1.
   ============================================================ */

.hp2-kpis{gap:12px;}

.hp2-kpi{
  position:relative;overflow:hidden;
  padding:16px 18px 16px 22px;
  min-height:78px;
  border-color:color-mix(in srgb, var(--kc) 16%, var(--hp2-line));
}
.hp2-kpi--teal  {--kc:#00ffa6;}
.hp2-kpi--blue  {--kc:#3ba9ff;}
.hp2-kpi--violet{--kc:#a06bff;}
.hp2-kpi--gold  {--kc:#ffd24a;}

/* left accent bar */
.hp2-kpi::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--kc);
  box-shadow:0 0 14px color-mix(in srgb, var(--kc) 65%, transparent);
  z-index:2;
}

/* artwork bleeding from the right */
.hp2-kpi.has-art::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--kart) right center/cover no-repeat;
  -webkit-mask:linear-gradient(90deg,transparent 4%,#000 58%);
          mask:linear-gradient(90deg,transparent 4%,#000 58%);
  opacity:.85;
}

/* ring icon */
.hp2-kpi-ico{
  position:relative;z-index:3;
  width:44px;height:44px;flex:0 0 44px;
  border-radius:50%;
  border:1.5px solid color-mix(in srgb, var(--kc) 55%, transparent);
  background:
    radial-gradient(circle at 50% 50%,
      color-mix(in srgb, var(--kc) 22%, transparent) 0%,
      rgba(5,11,18,.72) 72%);
  box-shadow:
    0 0 16px color-mix(in srgb, var(--kc) 30%, transparent),
    inset 0 0 12px color-mix(in srgb, var(--kc) 16%, transparent);
  color:var(--kc);
  font-size:17px;
}

.hp2-kpi-b{position:relative;z-index:3;}
.hp2-kpi-val{
  font-size:25px;font-weight:900;line-height:1;
  text-shadow:0 2px 12px rgba(5,11,18,.9);
}
.hp2-kpi-lbl{
  font-size:9.5px;margin-top:5px;
  color:color-mix(in srgb, var(--kc) 72%, #ffffff);
  text-shadow:0 1px 8px rgba(5,11,18,.9);
}

.hp2-kpi:hover.has-art::after{opacity:1;}
.hp2-kpi{transition:border-color .18s ease;}
.hp2-kpi:hover{border-color:color-mix(in srgb, var(--kc) 38%, transparent);}

@media(max-width:700px){
  .hp2-kpi{padding:14px 14px 14px 18px;min-height:70px;}
  .hp2-kpi-ico{width:38px;height:38px;flex:0 0 38px;font-size:15px;}
  .hp2-kpi-val{font-size:21px;}
}

/* ============================================================
   v9.2 — full-bleed KPI art with baked-in icon
   The mockup art already contains the ring icon, so the CSS one
   is hidden on tiles that have art. Copy is pushed right of the
   baked circle; the art is height-anchored so that offset holds.
   ============================================================ */

.hp2-kpi.has-art{
  padding:0;
  min-height:86px;
  display:flex;align-items:center;
  border-color:color-mix(in srgb, var(--kc) 24%, transparent);
  background:#070d14;
}

/* art fills the tile, anchored left so the icon lands predictably */
.hp2-kpi.has-art::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--kart) left center/cover no-repeat;
  -webkit-mask:none;mask:none;
  opacity:1;
  z-index:0;
}

/* readability wash behind the copy */
.hp2-kpi.has-art .hp2-kpi-b::before{
  content:"";position:absolute;inset:-14px -22px -14px -30px;
  background:linear-gradient(90deg,
    rgba(6,12,19,.90) 0%,
    rgba(6,12,19,.72) 55%,
    rgba(6,12,19,0)  100%);
  z-index:-1;
  border-radius:8px;
}

/* the baked circle already is the icon */
.hp2-kpi.has-art .hp2-kpi-ico{display:none;}
.hp2-kpi.has-art::before{z-index:3;}

.hp2-kpi.has-art .hp2-kpi-b{
  position:relative;z-index:3;
  margin-left:92px;
  padding-right:14px;
}
.hp2-kpi.has-art .hp2-kpi-val{font-size:26px;}
.hp2-kpi.has-art .hp2-kpi-lbl{
  color:color-mix(in srgb, var(--kc) 78%, #ffffff);
}

.hp2-kpi.has-art:hover::after{filter:brightness(1.1);}

@media(max-width:1200px){
  .hp2-kpi.has-art .hp2-kpi-b{margin-left:78px;}
}
@media(max-width:700px){
  .hp2-kpi.has-art{min-height:76px;}
  .hp2-kpi.has-art .hp2-kpi-b{margin-left:70px;}
  .hp2-kpi.has-art .hp2-kpi-val{font-size:21px;}
}

/* ============================================================
   v9.3 — clean art, CSS ring restored
   The new artwork has no baked-in icon or label, so the ring
   comes back and the copy sits over a readability wash.
   Supersedes the v9.2 offsets.
   ============================================================ */

.hp2-kpi.has-art{
  padding:16px 18px 16px 22px;
  min-height:88px;
}

.hp2-kpi.has-art .hp2-kpi-ico{
  display:grid;
  background:
    radial-gradient(circle at 50% 50%,
      color-mix(in srgb, var(--kc) 26%, transparent) 0%,
      rgba(5,11,18,.80) 74%);
}

.hp2-kpi.has-art .hp2-kpi-b{
  margin-left:0;
  padding-right:8px;
}

.hp2-kpi.has-art .hp2-kpi-b::before{
  content:"";position:absolute;inset:-18px -30px -18px -74px;
  background:linear-gradient(90deg,
    rgba(6,12,19,.88) 0%,
    rgba(6,12,19,.70) 48%,
    rgba(6,12,19,0)  100%);
  z-index:-1;border-radius:10px;
}

.hp2-kpi.has-art .hp2-kpi-val{
  font-size:25px;
  text-shadow:0 2px 14px rgba(5,11,18,.95);
}
.hp2-kpi.has-art .hp2-kpi-lbl{
  text-shadow:0 1px 10px rgba(5,11,18,.95);
}

@media(max-width:700px){
  .hp2-kpi.has-art{min-height:78px;padding:14px 14px 14px 18px;}
  .hp2-kpi.has-art .hp2-kpi-val{font-size:21px;}
}

/* ============================================================
   v9.4 — KPI ring visibility over artwork
   On a dark art background the ring lost contrast; give it a
   solid core, a brighter border and an outward glow.
   ============================================================ */

.hp2-kpi.has-art .hp2-kpi-ico{
  width:46px;height:46px;flex:0 0 46px;
  border:2px solid var(--kc);
  background:
    radial-gradient(circle at 50% 45%,
      color-mix(in srgb, var(--kc) 34%, transparent) 0%,
      rgba(4,9,15,.94) 68%);
  box-shadow:
    0 0 20px color-mix(in srgb, var(--kc) 55%, transparent),
    0 0 42px color-mix(in srgb, var(--kc) 22%, transparent),
    inset 0 0 14px color-mix(in srgb, var(--kc) 26%, transparent);
  color:var(--kc);
  font-size:19px;
  text-shadow:0 0 10px color-mix(in srgb, var(--kc) 80%, transparent);
}

.hp2-kpi.has-art:hover .hp2-kpi-ico{
  box-shadow:
    0 0 26px color-mix(in srgb, var(--kc) 75%, transparent),
    0 0 54px color-mix(in srgb, var(--kc) 30%, transparent),
    inset 0 0 16px color-mix(in srgb, var(--kc) 34%, transparent);
}

@media(max-width:700px){
  .hp2-kpi.has-art .hp2-kpi-ico{width:40px;height:40px;flex:0 0 40px;font-size:16px;}
}

/* ============================================================
   v10.0 — mode cards on artwork
   Environment shot behind each mode, darkened toward the bottom
   so the bullet list and the play link stay legible.
   ============================================================ */

.hp2-mode--art{isolation:isolate;}

.hp2-mode--art::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:var(--mart) center/cover no-repeat;
  opacity:.60;
}
.hp2-mode--art::after{
  background:
    linear-gradient(180deg,
      rgba(6,12,19,.18) 0%,
      rgba(6,12,19,.70) 50%,
      rgba(6,12,19,.94) 100%),
    radial-gradient(90% 70% at 85% 0%, var(--hp2-acc-soft) 0%, transparent 62%);
}

.hp2-mode--art .hp2-mode-head,
.hp2-mode--art .hp2-mode-list,
.hp2-mode--art .hp2-mode-go{position:relative;z-index:2;}

.hp2-mode--art .hp2-mode-t{text-shadow:0 2px 10px rgba(5,11,18,.92);}
.hp2-mode--art .hp2-mode-s{color:#8fa3b4;}
.hp2-mode--art .hp2-mode-list li{color:#b6c6d4;}

.hp2-mode--art .hp2-mode-ico{
  background:rgba(6,12,19,.74);
  border-color:color-mix(in srgb, var(--hp2-acc) 62%, transparent);
  box-shadow:0 0 16px color-mix(in srgb, var(--hp2-acc) 34%, transparent);
}
.hp2-mode--art .hp2-mode-go{
  border-top-color:color-mix(in srgb, var(--hp2-acc) 24%, transparent);
  background:rgba(6,12,19,.40);
}
.hp2-mode--art:hover::before{opacity:.76;}

/* ============================================================
   v4.2 - artwork backgrounds (why cards + full-bleed promo)
   ::before on .hp2-why-card is taken by the 2px accent bar,
   so the art lives in ::after with the scrim baked into the
   same layer - one paint, full control over text contrast.
   ============================================================ */
.hp2-why-card--art{background:transparent;}
.hp2-why-card--art::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(5,11,18,.90) 0%,rgba(5,11,18,.76) 48%,rgba(5,11,18,.54) 100%),
    var(--art) center/cover no-repeat;
}
/* accent bar and copy stay above the artwork */
.hp2-why-card--art::before{z-index:2;}
.hp2-why-card--art .hp2-why-ico,
.hp2-why-card--art .hp2-why-t,
.hp2-why-card--art .hp2-why-s{position:relative;z-index:2;}
/* full-bleed promo art: base rule anchors right for figure art */
.hp2-promo--art.hp2-promo--cover::after{
  background:var(--art) center/cover no-repeat;
  opacity:.42;
  -webkit-mask:linear-gradient(90deg,rgba(0,0,0,.30) 0%,#000 70%);
          mask:linear-gradient(90deg,rgba(0,0,0,.30) 0%,#000 70%);
}

/* ============================================================
   v4.3 - art framing per card
   cover on a wide card crops a tall source to its middle band;
   the server-room art is darkest exactly there, so pull the
   frame up to the lit corridor.
   ============================================================ */
.hp2-why-card--teal.hp2-why-card--art::after{background-position:center 32%,center 32%;}

/* =====================================================================
   v4.4 - interaction states
   Static blocks (.hp2-kpi, .hp2-flow-step) are <div>/<li>, not links,
   yet they carried lift + glow on hover - the strongest "I am a button"
   signal in the UI. Muted here back to their rest values. Real links get
   a stronger response plus :active and :focus-visible, which the page
   had nowhere at all.
   cursor is not touched: the browser already gives pointer to <a href>
   and default to <div>.
   =================================================================== */

/* ---- 1. static blocks: no hover response at all ---- */
.hp2-flow-step:hover{
  transform:none;
  border-color:var(--hp2-line);
}
/* LIVE keeps pulsing: @keyframes outrank normal declarations */
.hp2-flow-step:hover .hp2-flow-art svg{
  filter:drop-shadow(0 0 7px color-mix(in srgb, var(--st) 62%, transparent));
}
.hp2-flow-step:hover .hp2-flow-art.has-art{filter:none;}
.hp2-kpi:hover{border-color:color-mix(in srgb, var(--kc) 16%, var(--hp2-line));}
.hp2-kpi.has-art:hover::after{filter:none;}
.hp2-kpi.has-art:hover .hp2-kpi-ico{
  box-shadow:
    0 0 20px color-mix(in srgb, var(--kc) 55%, transparent),
    0 0 42px color-mix(in srgb, var(--kc) 22%, transparent),
    inset 0 0 14px color-mix(in srgb, var(--kc) 26%, transparent);
}

/* ---- 2. card links: lift + accent halo + depth ---- */
.hp2-mode,
.hp2-promo{
  transition:transform .18s ease, border-color .18s ease, box-shadow .2s ease;
}
.hp2-mode:hover,
.hp2-promo:hover{
  box-shadow:
    0 14px 32px rgba(3,7,12,.55),
    0 0 24px color-mix(in srgb, var(--hp2-acc) 20%, transparent);
}
/* press: the card settles back down under the finger */
.hp2-mode:active,
.hp2-promo:active,
.hp2-btn:active{transform:translateY(0);box-shadow:none;}

/* artwork wakes up under the cursor */
.hp2-promo--art:hover::after{opacity:.78;}
.hp2-promo--art.hp2-promo--cover:hover::after{opacity:.56;}

/* ---- 3. text links ---- */
.hp2-sec-more{transition:color .18s ease, transform .18s ease;}
.hp2-sec-more:hover{transform:translateX(2px);}

/* ---- 4. keyboard focus (page had none) ---- */
.hp2-btn:focus-visible,
.hp2-mode:focus-visible,
.hp2-promo:focus-visible,
.hp2-sec-more:focus-visible,
.hp2-rc-row:focus-visible{
  outline:2px solid var(--hp2-acc, #00ffa6);
  outline-offset:3px;
}

/* ---- 5. motion sensitivity ---- */
@media (prefers-reduced-motion:reduce){
  .hp2-btn:hover,
  .hp2-mode:hover,
  .hp2-promo:hover,
  .hp2-sec-more:hover,
  .hp2-btn--primary:hover,
  .hp2-btn--ghost:hover{transform:none;}
}
/* ============================================================
   v4.5 - flow step 5 (LIVE) levelled with its siblings
   The lifecycle strip explains the flow, it does not report
   state. A permanently lit LIVE tile reads as "a match is
   running now" while the matches panel says there are none.
   The --st colour arc stays intact - only the extra frame,
   shadow and the two animations are dropped.
   ============================================================ */
.hp2-flow-step:nth-child(5){
  border-color:var(--hp2-line);
  box-shadow:none;
}
.hp2-flow-step:nth-child(5) .hp2-flow-ico{animation:none;}
.hp2-flow-step:nth-child(5) .hp2-flow-art svg{animation:none;}

/* ============================================================
   v4.6 - card edges
   Link cards used the neutral --hp2-line at rest, the same
   border static blocks carry, then flashed to full accent on
   hover - the edge appeared rather than strengthened. Tint it
   at rest so the card always reads as an object, and move the
   v4.4 halo further out so it stops washing over the contour.
   ============================================================ */
.hp2-promo,
.hp2-mode{
  border-color:color-mix(in srgb, var(--hp2-acc) 22%, var(--hp2-line));
}
.hp2-promo:hover,
.hp2-mode:hover{
  border-color:color-mix(in srgb, var(--hp2-acc) 65%, transparent);
  box-shadow:
    0 14px 32px rgba(3,7,12,.55),
    0 0 40px color-mix(in srgb, var(--hp2-acc) 14%, transparent);
}

/* ============================================================
   v4.7 - clipped lift
   .hp2-defer (line 402) is content-visibility:auto, which
   implies paint containment: children are clipped to the
   padding box just like overflow:hidden. .hp2-promos has no
   padding, so the -3px hover lift and the drop shadow were
   cut off top and bottom. Give it vertical room and take the
   same amount back with a negative margin - layout unchanged,
   paint box is not. The other four .hp2-defer sections are
   .hp2-block, which already carries its own padding.
   Vertical only: negative side margins would widen the
   section past its container and risk horizontal scroll.
   ============================================================ */
.hp2-promos{padding:16px 0;margin:-16px 0;}