:root{
  --bg:#06101f;
  --bg2:#0a1627;
  --panel:#0d1a2d;
  --panel2:#11243a;
  --panel3:#132a42;
  --line:#26405b;
  --line2:#315271;
  --text:#f5f9ff;
  --muted:#91a8bf;
  --cyan:#35d4ff;
  --blue:#1787ff;
  --blue2:#0d6ee7;
  --gold:#d6aa2f;
  --gold2:#806310;
  --green:#24d184;
  --green2:#09623e;
  --coral:#f07a67;
  --teal:#35d7ca;
  --danger:#ff8193;
  --shadow:0 18px 40px rgba(0,0,0,.22);
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  min-height:100vh;
  font-family:Inter,Segoe UI,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 8% -8%,rgba(20,101,179,.28),transparent 28%),
    radial-gradient(circle at 91% 1%,rgba(0,102,180,.20),transparent 24%),
    linear-gradient(180deg,#071425 0%,#050d19 55%,#040a13 100%);
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input,
select,
textarea{
  font:inherit;
}

svg{
  display:block;
  width:100%;
  height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* TOP BAR */

.topbar{
  min-height:72px;
  display:flex;
  align-items:center;
  gap:30px;
  padding:0 32px;
  background:rgba(4,12,24,.96);
  border-bottom:1px solid rgba(53,212,255,.17);
  box-shadow:0 8px 25px rgba(0,0,0,.16);
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(14px);
}

.brandBlock{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:250px;
}

.brandLogo,
.miniBrandLogo,
.footerLogo{
  position:relative;
  display:flex;
  align-items:flex-end;
  gap:3px;
}

.brandLogo{
  width:38px;
  height:38px;
}

.brandLogo span,
.miniBrandLogo span,
.footerLogo span{
  display:block;
  width:7px;
  border-radius:2px 2px 0 0;
  transform:skewY(-28deg);
  background:linear-gradient(180deg,#38c7ff,#126bd8);
  box-shadow:0 0 13px rgba(41,175,255,.28);
}

.brandLogo span:nth-child(1){height:18px}
.brandLogo span:nth-child(2){height:27px}
.brandLogo span:nth-child(3){height:36px}

.brand{
  font-size:18px;
  line-height:1;
  font-weight:850;
  letter-spacing:-.015em;
}

.tagline{
  margin-top:5px;
  font-size:7px;
  color:#4acdf5;
  letter-spacing:.16em;
  font-weight:850;
}

.nav{
  display:flex;
  align-items:stretch;
  align-self:stretch;
  gap:25px;
}

.nav a{
  display:flex;
  align-items:center;
  padding-top:2px;
  border-bottom:2px solid transparent;
  color:#9eb0c2;
  font-size:12px;
  font-weight:650;
}

.nav a:hover{
  color:white;
}

.nav a.active{
  color:#fff;
  border-bottom-color:#2097ff;
}

.topbarTools{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:12px;
}

.searchBox{
  width:275px;
  height:36px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 12px;
  border-radius:8px;
  border:1px solid #20384f;
  background:#0b1727;
}

.searchBox svg{
  width:15px;
  height:15px;
  color:#718ba4;
  flex:0 0 15px;
}

.searchBox input{
  width:100%;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  color:#cbd9e7;
  font-size:10px;
}

.searchBox input::placeholder{
  color:#71889e;
}

.searchBox input:focus{
  outline:0;
}

.iconButton{
  width:35px;
  height:35px;
  display:grid;
  place-items:center;
  border:0;
  padding:8px;
  background:transparent;
  color:#9bb1c6;
  cursor:pointer;
  position:relative;
}

.notificationDot{
  position:absolute;
  right:6px;
  top:5px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#ff4f63;
  box-shadow:0 0 0 2px #06101f;
}

.userBlock{
  display:flex;
  align-items:center;
  gap:9px;
  padding-left:4px;
}

.avatar{
  width:32px;
  height:32px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#176cd8,#28b5f4);
  color:white;
  font-size:10px;
  font-weight:900;
}

.userText{
  display:flex;
  flex-direction:column;
  min-width:112px;
}

.userText strong{
  font-size:10px;
  line-height:1.2;
}

.userText span{
  margin-top:2px;
  font-size:8px;
  color:#7891a8;
}

.signout{
  margin-left:2px;
}

/* PAGE */

.shell{
  width:min(1600px,calc(100% - 52px));
  margin:0 auto;
  padding:32px 0 26px;
}

/* HERO */

.hero{
  display:grid;
  grid-template-columns:minmax(0,1.58fr) minmax(390px,.82fr);
  gap:28px;
  align-items:stretch;
}

.heroMain{
  padding:12px 10px 8px 8px;
}

.eyebrow{
  color:#34ccf4;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:10px;
  font-weight:900;
}

.hero h1{
  margin:15px 0 12px;
  max-width:880px;
  font-size:44px;
  line-height:1.02;
  letter-spacing:-.035em;
  font-weight:800;
}

.lead{
  max-width:830px;
  margin:0;
  color:#adc0d2;
  font-size:14px;
  line-height:1.55;
}

/* ACTION BUTTONS */

.actions{
  display:flex;
  flex-wrap:wrap;
  gap:11px;
  margin-top:23px;
}

.actionButton{
  min-width:182px;
  min-height:58px;
  display:flex;
  align-items:center;
  gap:11px;
  padding:10px 15px;
  border-radius:10px;
  border:1px solid;
  box-shadow:0 8px 20px rgba(0,0,0,.15);
  transition:transform .16s ease,filter .16s ease;
}

.actionButton:hover{
  filter:brightness(1.08);
}

.actionIcon{
  width:28px;
  height:28px;
  flex:0 0 28px;
}

.actionButton strong{
  display:block;
  font-size:12px;
  line-height:1.2;
}

.actionButton small{
  display:block;
  margin-top:4px;
  color:rgba(255,255,255,.72);
  font-size:9px;
}

.actionButton.blue{
  background:linear-gradient(180deg,#1789ff,#0d68d8);
  border-color:#2f9dff;
}

.actionButton.gold{
  background:linear-gradient(180deg,#816619,#554109);
  border-color:#c89b23;
}

.actionButton.cyan{
  background:linear-gradient(180deg,#0c637c,#084359);
  border-color:#2ec5e4;
}

.actionButton.green{
  background:linear-gradient(180deg,#087947,#055d38);
  border-color:#25c979;
}

/* PROGRAM POSTURE */

.postureCard{
  border:1px solid #284a67;
  border-radius:13px;
  background:
    linear-gradient(180deg,rgba(16,38,60,.97),rgba(10,27,44,.98));
  box-shadow:var(--shadow);
  padding:17px 18px 16px;
}

.postureHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.postureTitle{
  display:flex;
  align-items:center;
  gap:7px;
}

.shieldIcon{
  width:15px;
  height:15px;
  color:#38d4ff;
}

.updatedStatus{
  display:flex;
  align-items:center;
  gap:7px;
  color:#7895ad;
  font-size:8px;
}

.liveDot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#30d98c;
  box-shadow:0 0 8px rgba(48,217,140,.55);
}

.postureGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:14px;
}

.postureMetric{
  min-height:105px;
  padding:13px 14px;
  border-radius:10px;
  border:1px solid #31516d;
  background:linear-gradient(180deg,#132b44,#10253b);
}

.postureMetric>span{
  display:block;
  color:#8ea7bc;
  font-size:9px;
}

.postureMetric strong{
  display:block;
  margin-top:9px;
  font-size:24px;
  line-height:1;
}

.postureMetric small{
  display:flex;
  align-items:center;
  margin-top:12px;
  color:#7f9db2;
  font-size:8px;
}

.postureMetric i{
  width:7px;
  height:7px;
  margin-right:6px;
  border-radius:50%;
  background:#26d181;
}

.postureFooter{
  min-height:68px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:18px;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid #29465f;
}

.postureQuote{
  display:flex;
  align-items:flex-start;
  color:#b9cbda;
  font-size:9px;
  line-height:1.5;
}

.quoteMark{
  margin-right:6px;
  color:#62cdf2;
  font-size:24px;
  line-height:.8;
}

.miniBrand{
  display:flex;
  align-items:center;
  gap:8px;
  color:#91a6ba;
  font-size:8px;
  line-height:1.2;
}

.miniBrandLogo{
  width:25px;
  height:25px;
}

.miniBrandLogo span{
  width:5px;
}

.miniBrandLogo span:nth-child(1){height:12px}
.miniBrandLogo span:nth-child(2){height:18px}
.miniBrandLogo span:nth-child(3){height:24px}

/* KPI ROW */

.grid4{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:13px;
}

.kpiGrid{
  margin-top:18px;
}

.kpiCard{
  min-height:100px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 17px;
  border:1px solid #263f58;
  border-radius:11px;
  background:linear-gradient(180deg,#0e1d30,#0b1727);
  box-shadow:0 10px 22px rgba(0,0,0,.12);
}

.kpiIcon{
  width:45px;
  height:45px;
  flex:0 0 45px;
  display:grid;
  place-items:center;
  padding:10px;
  border-radius:9px;
}

.blueTone .kpiIcon{
  background:#0b4e9c;
  color:#58b8ff;
}

.goldTone .kpiIcon{
  background:#59440e;
  color:#f2c947;
}

.coralTone .kpiIcon{
  background:#592d26;
  color:#ff927e;
}

.greenTone .kpiIcon{
  background:#075b39;
  color:#5ce2a0;
}

.small{
  color:#9ab0c3;
  font-size:10px;
}

.kpi{
  margin-top:5px;
  font-size:27px;
  line-height:1;
  font-weight:900;
}

.kpiFoot{
  margin-top:5px;
  color:#748fa6;
  font-size:8px;
}

/* SECTION BASES */

.lifecycle,
.queueCard,
.intelligenceCard,
.outputsCard,
.card{
  border:1px solid #263f58;
  border-radius:12px;
  background:linear-gradient(180deg,#0d1b2d,#091725);
  box-shadow:0 12px 26px rgba(0,0,0,.12);
}

.sectionHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.sectionSub{
  margin:5px 0 0;
  color:#7894aa;
  font-size:9px;
  line-height:1.4;
}

.sectionLink{
  color:#43cdf8;
  font-size:9px;
  white-space:nowrap;
}

.sectionLink:hover{
  color:white;
}

/* LIFECYCLE */

.lifecycle{
  margin-top:17px;
  padding:16px 19px 18px;
}

.processGuide{
  display:flex;
  align-items:center;
  gap:7px;
  color:#74bcdc;
  font-size:9px;
}

.processGuide svg{
  width:14px;
  height:14px;
}

.lifegrid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:0;
  margin-top:20px;
}

.life{
  display:grid;
  grid-template-columns:37px minmax(0,1fr) 18px;
  gap:9px;
  align-items:start;
  min-width:0;
}

.life:last-child{
  grid-template-columns:37px minmax(0,1fr);
}

.lifeNumber{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:2px solid;
  border-radius:50%;
  background:#0d2135;
  font-size:11px;
  font-weight:900;
  box-shadow:0 0 15px rgba(0,0,0,.2);
}

.life strong{
  display:block;
  margin-top:1px;
  font-size:11px;
}

.life span{
  display:block;
  margin-top:4px;
  color:#748da3;
  font-size:8px;
  line-height:1.35;
}

.lifeArrow{
  align-self:center;
  color:#37536c;
  font-size:14px;
  font-weight:400;
}

.blueLife .lifeNumber{
  border-color:#198fff;
  color:#68c2ff;
}

.goldLife .lifeNumber{
  border-color:#d6ad2e;
  color:#f1cb55;
}

.coralLife .lifeNumber{
  border-color:#ec7966;
  color:#ff9a88;
}

.greenLife .lifeNumber{
  border-color:#29cf83;
  color:#6be0a7;
}

.tealLife .lifeNumber{
  border-color:#37d4c9;
  color:#6ee8df;
}

/* LOWER GRID */

.dashboardGrid{
  display:grid;
  grid-template-columns:minmax(0,1.72fr) minmax(385px,.93fr);
  gap:14px;
  margin-top:14px;
  align-items:start;
}

.queueCard,
.intelligenceCard,
.outputsCard{
  padding:16px 18px;
}

.sideStack{
  display:grid;
  gap:14px;
}

/* QUEUE */

.queueColumns{
  display:grid;
  grid-template-columns:1.8fr .75fr .7fr 1fr .85fr .58fr;
  gap:10px;
  align-items:center;
  margin-top:15px;
  padding:9px 10px 8px;
  border-bottom:1px solid #294057;
  color:#69849b;
  text-transform:uppercase;
  letter-spacing:.07em;
  font-size:7px;
  font-weight:850;
}

.case{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:13px 10px;
  border-bottom:1px solid #1e3448;
  min-height:63px;
}

.case:last-child{
  border-bottom:0;
}

.case b{
  font-size:10px;
}

.case .small{
  font-size:8px;
}

.case .btn{
  flex:0 0 auto;
}

/* PORTFOLIO INTELLIGENCE */

.portfolioGrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
  margin-top:14px;
}

.portfolioMetric{
  min-height:108px;
  display:flex;
  gap:10px;
  padding:11px;
  border:1px solid #284761;
  border-radius:9px;
  background:#10253a;
}

.portfolioIcon{
  width:26px;
  height:26px;
  flex:0 0 26px;
  display:grid;
  place-items:center;
  border-radius:7px;
  background:#10395a;
  color:#57c8f6;
  font-size:15px;
}

.portfolioMetric small{
  display:block;
  color:#8ca5b9;
  font-size:8px;
}

.portfolioMetric strong{
  display:block;
  margin-top:7px;
  color:#f7fbff;
  font-size:20px;
  line-height:1.05;
}

.portfolioMetric span:not(.portfolioIcon){
  display:block;
  margin-top:7px;
  color:#718aa0;
  font-size:7px;
  line-height:1.3;
}

/* OUTPUTS */

.outputPlaceholder{
  margin-top:14px;
  padding:17px;
  border:1px dashed #2c4b64;
  border-radius:9px;
  background:#0d2033;
  color:#748ea4;
  font-size:9px;
}

/* DETAIL AREA / EXISTING APP.JS */

.detail{
  margin-top:16px;
}

.grid2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:13px;
}

.section{
  margin-top:18px;
}

.mini{
  margin-bottom:8px;
  padding:12px;
  border:1px solid #294963;
  border-radius:9px;
  background:#10253a;
}

.row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:11px;
}

.field{
  margin-bottom:11px;
}

.label{
  color:#96aec1;
  font-size:9px;
  font-weight:700;
}

input,
select,
textarea{
  width:100%;
  margin-top:5px;
  padding:9px 10px;
  border:1px solid #2d4d68;
  border-radius:8px;
  outline:none;
  background:#071523;
  color:#fff;
}

input:focus,
select:focus,
textarea:focus{
  border-color:#35c7ef;
  box-shadow:0 0 0 2px rgba(53,199,239,.10);
}

textarea{
  min-height:90px;
  resize:vertical;
}

/* BUTTONS / PILLS */

.btn{
  appearance:none;
  padding:8px 13px;
  border:1px solid #36536c;
  border-radius:7px;
  background:#10243a;
  color:white;
  cursor:pointer;
  font-size:9px;
  font-weight:750;
}

.btn:hover{
  filter:brightness(1.12);
}

.btn.primary{
  border-color:#2996ff;
  background:#1684ff;
}

.btn.gold{
  border-color:#97771f;
  background:#5b460d;
  color:#ffe58b;
}

.pill{
  display:inline-block;
  padding:5px 8px;
  border-radius:999px;
  font-size:8px;
  line-height:1;
  font-weight:850;
}

.ok{
  background:#0a5738;
  color:#6ff0ae;
}

.warn{
  background:#59440f;
  color:#f7d36a;
}

.risk{
  background:#59252d;
  color:#ff9ba6;
}

.neutral{
  background:#17324d;
  color:#a8cae3;
}

.hidden{
  display:none!important;
}

/* LOGIN */

.login{
  width:min(460px,calc(100% - 32px));
  margin:90px auto;
}

.error{
  color:#ff8d9c;
  font-size:11px;
}

/* FOOTER */

.footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-top:17px;
  padding:16px 4px 6px;
  border-top:1px solid #173047;
  color:#6988a0;
  font-size:7px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.footerBrand{
  display:flex;
  align-items:center;
  gap:8px;
}

.footerBrand strong{
  color:#93aabc;
  font-size:8px;
  letter-spacing:0;
  text-transform:none;
}

.footerLogo{
  width:22px;
  height:22px;
}

.footerLogo span{
  width:4px;
}

.footerLogo span:nth-child(1){height:10px}
.footerLogo span:nth-child(2){height:15px}
.footerLogo span:nth-child(3){height:21px}

/* =========================================================
   PUBLICPATH PRESENTATION-READY VISUAL SYSTEM v4
   One coherent override layer only.
   Principle: dark base, saturated cores, crisp edges,
   tight neon halos, zero global washout.
   ========================================================= */

:root{
  --pp-bg-0:#010713;
  --pp-bg-1:#031328;
  --pp-bg-2:#06234a;

  --pp-surface-0:#071526;
  --pp-surface-1:#0a2038;
  --pp-surface-2:#0d2a48;
  --pp-surface-3:#12395d;

  --pp-edge:#2877a8;
  --pp-edge-hot:#44cfff;

  --pp-white:#fbfdff;
  --pp-copy:#c6dced;
  --pp-muted:#88a9c2;

  --pp-blue:#159dff;
  --pp-blue-hot:#56d7ff;
  --pp-cyan:#20e2ff;
  --pp-gold:#f5c62f;
  --pp-green:#2cea8a;
  --pp-coral:#ff7f68;
  --pp-teal:#30e4d4;
}

/* ---------- PAGE FIELD: DEEP, NOT BRIGHT ---------- */

html{
  background:var(--pp-bg-0);
}

body{
  background:
    radial-gradient(ellipse 58% 38% at 17% 8%,
      rgba(20,123,255,.48) 0%,
      rgba(8,79,187,.27) 32%,
      rgba(4,31,81,.07) 54%,
      transparent 74%),
    radial-gradient(ellipse 48% 34% at 79% 12%,
      rgba(0,173,255,.24) 0%,
      rgba(0,101,207,.13) 38%,
      transparent 72%),
    linear-gradient(180deg,
      #03142e 0%,
      #031024 30%,
      #020b19 66%,
      #010713 100%);
  color:var(--pp-white);
}

/* subtle directional light without haze */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    linear-gradient(118deg,
      transparent 0 29%,
      rgba(18,92,220,.075) 36%,
      transparent 44%),
    linear-gradient(64deg,
      transparent 0 65%,
      rgba(0,157,255,.045) 72%,
      transparent 80%);
}

/* ---------- TOP BAR ---------- */

.topbar{
  background:
    linear-gradient(180deg,rgba(2,10,22,.995),rgba(2,8,18,.99));
  border-bottom:1px solid rgba(50,186,255,.34);
  box-shadow:
    0 12px 34px rgba(0,0,0,.44),
    inset 0 -1px 0 rgba(0,140,255,.10);
  backdrop-filter:none;
}

.brandLogo span,
.miniBrandLogo span,
.footerLogo span{
  background:linear-gradient(180deg,#6beaff 0%,#24c9ff 31%,#168fff 63%,#0757dc 100%);
  box-shadow:
    0 0 5px rgba(69,220,255,.92),
    0 0 11px rgba(28,165,255,.48);
}

.brand{
  color:#fff;
}

.tagline,
.eyebrow{
  color:#39e6ff;
  text-shadow:0 0 7px rgba(57,230,255,.32);
}

.nav a{
  color:#d8e9f6;
}

.nav a.active{
  color:#fff;
  border-bottom-color:#35ceff;
  text-shadow:none;
}

.searchBox{
  background:#071729;
  border-color:#245b80;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}

/* ---------- HERO: RICH BLUE POCKETS ---------- */

.hero{
  position:relative;
  isolation:isolate;
}

.hero::before{
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  left:-4%;
  top:-22%;
  width:72%;
  height:128%;
  background:
    radial-gradient(ellipse at 28% 35%,
      rgba(25,127,255,.46) 0%,
      rgba(9,80,199,.24) 39%,
      transparent 71%);
}

.hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  right:16%;
  top:-8%;
  width:31%;
  height:78%;
  background:
    radial-gradient(ellipse,
      rgba(0,182,255,.18) 0%,
      transparent 69%);
}

.hero h1{
  color:#fff;
  text-shadow:
    0 2px 10px rgba(0,0,0,.52),
    0 0 8px rgba(255,255,255,.035);
}

.lead{
  color:#cfe3f1;
}

/* ---------- SHARED PANEL LANGUAGE ---------- */

.postureCard,
.kpiCard,
.lifecycle,
.queueCard,
.intelligenceCard,
.outputsCard,
.card{
  position:relative;
  background:
    linear-gradient(180deg,#0e3358 0%,#08213a 100%);
  border:1px solid #3597c9;
  box-shadow:
    0 14px 34px rgba(0,0,0,.27),
    inset 0 1px 0 rgba(144,223,255,.10),
    inset 0 0 24px rgba(0,115,196,.035);
  overflow:hidden;
}

.postureCard::before,
.kpiCard::before,
.lifecycle::before,
.queueCard::before,
.intelligenceCard::before,
.outputsCard::before,
.card::before{
  content:"";
  position:absolute;
  pointer-events:none;
  left:4%;
  right:4%;
  top:0;
  height:1px;
  background:linear-gradient(90deg,
    transparent,
    rgba(86,213,255,.88),
    transparent);
}

/* tighter outer edge illumination */
.postureCard,
.lifecycle{
  box-shadow:
    0 16px 38px rgba(0,0,0,.29),
    0 0 14px rgba(0,139,230,.055),
    inset 0 1px 0 rgba(152,230,255,.12);
}

/* ---------- POSTURE ---------- */

.postureCard{
  background:
    radial-gradient(circle at 88% 0%,rgba(0,140,228,.10),transparent 34%),
    linear-gradient(180deg,#12456f 0%,#0a2b4a 100%);
  border-color:#43b5e5;
}

.postureMetric{
  background:linear-gradient(180deg,#19557d,#123858);
  border-color:#49a9d4;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 8px 20px rgba(0,0,0,.16);
}

.postureMetric strong{
  color:#fff;
}

.postureMetric>span,
.postureMetric small{
  color:#a9c9df;
}

.liveDot,
.postureMetric i{
  box-shadow:0 0 6px currentColor,0 0 12px rgba(45,232,139,.28);
}

/* ---------- CTA BUTTONS: SATURATED CORE + TIGHT LIGHT ---------- */

.actionButton{
  position:relative;
  overflow:hidden;
  border-width:1px;
  box-shadow:
    0 10px 24px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.26);
  transition:filter .16s ease,box-shadow .16s ease;
}

.actionButton::before{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  top:0;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.86),transparent);
}

.actionButton::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.16),transparent 43%);
}

.actionButton:hover{
  transform:none;
  filter:saturate(1.08) brightness(1.05);
}

.actionButton.blue{
  background:linear-gradient(180deg,#1cadff 0%,#1189ff 48%,#0967d8 100%);
  border-color:#6adfff;
  box-shadow:
    0 10px 24px rgba(0,69,159,.34),
    0 0 8px rgba(38,190,255,.58),
    0 0 18px rgba(0,127,255,.20),
    inset 0 1px 0 rgba(255,255,255,.34);
}

.actionButton.gold{
  background:linear-gradient(180deg,#d5a10c 0%,#a77b00 51%,#765500 100%);
  border-color:#ffe36b;
  box-shadow:
    0 10px 24px rgba(83,56,0,.34),
    0 0 8px rgba(255,209,52,.52),
    0 0 18px rgba(255,181,0,.16),
    inset 0 1px 0 rgba(255,249,193,.30);
}

.actionButton.cyan{
  background:linear-gradient(180deg,#12a9ca 0%,#087d9f 51%,#07546e 100%);
  border-color:#79f5ff;
  box-shadow:
    0 10px 24px rgba(0,67,87,.34),
    0 0 8px rgba(52,234,255,.54),
    0 0 18px rgba(0,189,255,.17),
    inset 0 1px 0 rgba(224,254,255,.27);
}

.actionButton.green{
  background:linear-gradient(180deg,#0fc975 0%,#099f5b 50%,#087240 100%);
  border-color:#6bffb7;
  box-shadow:
    0 10px 24px rgba(0,76,43,.34),
    0 0 8px rgba(49,239,143,.50),
    0 0 18px rgba(0,207,111,.16),
    inset 0 1px 0 rgba(228,255,239,.26);
}

.actionButton strong{
  color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.38);
}

.actionButton small{
  color:rgba(255,255,255,.91);
}

.actionIcon{
  filter:drop-shadow(0 0 4px currentColor);
}

/* ---------- KPI CARDS ---------- */

.kpiCard{
  background:linear-gradient(180deg,#10385e,#08243f);
  border-color:#3b96c6;
}

.kpiIcon{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 0 7px currentColor;
}

.blueTone .kpiIcon{
  background:linear-gradient(180deg,#159dff,#0766d8);
  color:#65d8ff;
}

.goldTone .kpiIcon{
  background:linear-gradient(180deg,#b58b0e,#745500);
  color:#ffe262;
}

.coralTone .kpiIcon{
  background:linear-gradient(180deg,#be5844,#713126);
  color:#ffab9c;
}

.greenTone .kpiIcon{
  background:linear-gradient(180deg,#08ad68,#056941);
  color:#74ffb4;
}

.kpi{
  color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,.46);
}

.small{
  color:#b7d0e2;
}

.kpiFoot{
  color:#86a9c1;
}

/* ---------- LIFECYCLE: NEON RINGS, DARK CENTERS ---------- */

.lifecycle{
  background:linear-gradient(180deg,#0b2e50,#071d35);
  border-color:#3ca4d4;
}

.lifeNumber{
  background:#071a2c;
  border-width:2px;
  color:#fff;
  text-shadow:none;
}

.blueLife .lifeNumber{
  border-color:#35b6ff;
  color:#8ee4ff;
  box-shadow:
    0 0 7px rgba(53,182,255,1),
    0 0 18px rgba(53,182,255,.70),
    0 0 34px rgba(24,145,255,.28),
    inset 0 0 6px rgba(53,182,255,.08);
}

.goldLife .lifeNumber{
  border-color:#ffd53f;
  color:#ffe978;
  box-shadow:
    0 0 7px rgba(255,213,63,.98),
    0 0 18px rgba(255,196,26,.62),
    0 0 34px rgba(255,177,0,.24),
    inset 0 0 6px rgba(255,213,63,.07);
}

.coralLife .lifeNumber{
  border-color:#ff806d;
  color:#ffb2a5;
  box-shadow:
    0 0 7px rgba(255,128,109,.98),
    0 0 18px rgba(255,96,74,.58),
    0 0 34px rgba(255,75,52,.22),
    inset 0 0 6px rgba(255,128,109,.07);
}

.greenLife .lifeNumber{
  border-color:#3cf099;
  color:#8dffc4;
  box-shadow:
    0 0 7px rgba(60,240,153,.98),
    0 0 18px rgba(31,221,129,.58),
    0 0 34px rgba(0,200,105,.22),
    inset 0 0 6px rgba(60,240,153,.07);
}

.tealLife .lifeNumber{
  border-color:#3ee7da;
  color:#9bfff4;
  box-shadow:
    0 0 7px rgba(62,231,218,.98),
    0 0 18px rgba(24,208,197,.58),
    0 0 34px rgba(0,190,180,.22),
    inset 0 0 6px rgba(62,231,218,.07);
}

.life strong{
  color:#fff;
}

.life span{
  color:#a4c3d9;
}

.lifeArrow{
  color:#5f95b9;
  text-shadow:0 0 4px rgba(67,192,255,.16);
}

/* ---------- LOWER WORKSPACE ---------- */

.queueColumns{
  color:#9fc3dc;
  border-bottom-color:#32759b;
}

.case{
  border-bottom-color:#25536f;
}

.portfolioMetric{
  background:linear-gradient(180deg,#164b72,#0e3452);
  border-color:#46a7d2;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055);
}

.portfolioIcon{
  background:linear-gradient(180deg,#0d6598,#084769);
  color:#75efff;
  box-shadow:0 0 6px rgba(56,221,255,.35);
}

.portfolioMetric small{
  color:#b4d0e2;
}

.portfolioMetric strong{
  color:#fff;
}

.portfolioMetric span:not(.portfolioIcon){
  color:#8eafc5;
}

.outputPlaceholder{
  background:#0e3553;
  border-color:#48a9d5;
  color:#9ebed3;
}

/* ---------- FOOTER: CRISP, NOT GLOW-WASHED ---------- */

.footer{
  border-top-color:#285775;
  color:#7f9fb6;
}

.footerBrand strong{
  color:#b8cfdd;
}

.footerLogo span{
  box-shadow:
    0 0 4px rgba(69,220,255,.72),
    0 0 8px rgba(28,165,255,.30);
}

/* ---------- TYPOGRAPHY SAFETY ---------- */

h1,h2,h3,h4,h5,h6,
p,span,small,label,a,button,td,th{
  filter:none;
}

/* Never physically move clickable controls on hover. */
button:hover,
.actionButton:hover,
.btn:hover{
  transform:none;
}

/* ---------- DESKTOP SCALE ---------- */

@media(min-width:1260px){
  .shell{
    width:min(1640px,calc(100% - 70px));
  }

  .hero{
    grid-template-columns:minmax(0,1.52fr) minmax(430px,.84fr);
    gap:34px;
  }

  .hero h1{
    font-size:47px;
  }

  .actionButton{
    min-width:190px;
    min-height:61px;
  }
}


/* v5 targeted presentation enhancements: stronger luster, not more exposure */
.actionButton.blue{
  box-shadow:
    0 11px 28px rgba(0,69,159,.40),
    0 0 11px rgba(38,190,255,.78),
    0 0 26px rgba(0,127,255,.34),
    inset 0 1px 0 rgba(255,255,255,.38);
}
.actionButton.gold{
  box-shadow:
    0 11px 28px rgba(83,56,0,.38),
    0 0 11px rgba(255,209,52,.72),
    0 0 26px rgba(255,181,0,.28),
    inset 0 1px 0 rgba(255,249,193,.34);
}
.actionButton.cyan{
  box-shadow:
    0 11px 28px rgba(0,67,87,.38),
    0 0 11px rgba(52,234,255,.74),
    0 0 26px rgba(0,189,255,.28),
    inset 0 1px 0 rgba(224,254,255,.31);
}
.actionButton.green{
  box-shadow:
    0 11px 28px rgba(0,76,43,.38),
    0 0 11px rgba(49,239,143,.70),
    0 0 26px rgba(0,207,111,.28),
    inset 0 1px 0 rgba(228,255,239,.30);
}

.kpiIcon{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 0 9px currentColor,
    0 0 22px color-mix(in srgb,currentColor 38%,transparent);
}

.queueCard,
.intelligenceCard,
.outputsCard{
  box-shadow:
    0 15px 34px rgba(0,0,0,.28),
    0 0 16px rgba(0,136,224,.08),
    inset 0 1px 0 rgba(140,220,255,.09);
}


/* =========================================================
   PUBLICPATH PRESENTATION VISUAL SYSTEM v6 — LACQUER FINISH
   Target: darker cores, brighter rims, tighter neon halos,
   controlled internal reflections, premium depth.
   Visual-only. No routes, IDs, HTML structure, or JS changes.
   ========================================================= */

/* PAGE FIELD — darker floor, concentrated royal/electric blue pockets */
body{
  background:
    radial-gradient(ellipse 48% 34% at 18% 8%,
      rgba(20,118,255,.44) 0%,
      rgba(7,72,176,.24) 28%,
      rgba(4,28,76,.08) 52%,
      transparent 72%),
    radial-gradient(ellipse 38% 28% at 78% 10%,
      rgba(0,184,255,.20) 0%,
      rgba(0,102,214,.10) 35%,
      transparent 68%),
    radial-gradient(ellipse 52% 36% at 49% 45%,
      rgba(0,74,180,.07) 0%,
      transparent 72%),
    linear-gradient(180deg,
      #020d1e 0%,
      #021127 27%,
      #010b19 62%,
      #010713 100%);
}

/* HERO — darker lacquer center with concentrated internal blue light */
.hero::before{
  left:-3%;
  top:-24%;
  width:74%;
  height:132%;
  background:
    radial-gradient(ellipse at 31% 34%,
      rgba(27,132,255,.36) 0%,
      rgba(8,74,183,.18) 37%,
      rgba(3,32,83,.06) 58%,
      transparent 74%);
}

.hero::after{
  right:12%;
  top:-10%;
  width:35%;
  height:84%;
  background:
    radial-gradient(ellipse,
      rgba(0,192,255,.14) 0%,
      rgba(0,111,222,.07) 39%,
      transparent 72%);
}

/* PANELS — darker center, brighter rim, subtle inner reflection */
.postureCard,
.kpiCard,
.lifecycle,
.queueCard,
.intelligenceCard,
.outputsCard,
.card{
  background:
    radial-gradient(circle at 18% 0%, rgba(28,137,220,.09), transparent 30%),
    linear-gradient(180deg,#0c2d4e 0%,#071b30 52%,#061727 100%);
  border-color:#3ba8d7;
  box-shadow:
    0 16px 38px rgba(0,0,0,.33),
    0 0 0 1px rgba(31,164,229,.035),
    0 0 14px rgba(0,145,235,.08),
    inset 0 1px 0 rgba(164,235,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.26);
}

.postureCard::before,
.kpiCard::before,
.lifecycle::before,
.queueCard::before,
.intelligenceCard::before,
.outputsCard::before,
.card::before{
  left:5%;
  right:5%;
  background:linear-gradient(90deg,
    transparent,
    rgba(87,220,255,.96),
    transparent);
  box-shadow:0 0 7px rgba(69,211,255,.34);
}

/* Secondary inner reflection band */
.postureCard::after,
.kpiCard::after,
.lifecycle::after,
.queueCard::after,
.intelligenceCard::after,
.outputsCard::after{
  content:"";
  position:absolute;
  pointer-events:none;
  inset:0;
  border-radius:inherit;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.045) 0%,
      rgba(255,255,255,.012) 18%,
      transparent 38%),
    radial-gradient(circle at 88% 4%,rgba(0,177,255,.045),transparent 24%);
}

/* PROGRAM POSTURE — more premium glass depth */
.postureCard{
  background:
    radial-gradient(circle at 90% 0%,rgba(0,166,255,.14),transparent 33%),
    linear-gradient(180deg,#113c62 0%,#0a2743 58%,#081f37 100%);
  border-color:#49bde8;
  box-shadow:
    0 18px 40px rgba(0,0,0,.34),
    0 0 17px rgba(0,157,242,.11),
    inset 0 1px 0 rgba(176,239,255,.16);
}

.postureMetric{
  background:
    linear-gradient(180deg,#174c73 0%,#103550 100%);
  border-color:#4aadd4;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.075),
    inset 0 -1px 0 rgba(0,0,0,.24),
    0 7px 18px rgba(0,0,0,.18);
}

/* CTA BUTTONS — dense color cores, specular strip, tight halo */
.actionButton{
  box-shadow:
    0 12px 26px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(0,0,0,.22);
}

.actionButton::before{
  left:9%;
  right:9%;
  height:2px;
  background:linear-gradient(90deg,
    transparent,
    rgba(255,255,255,.92) 35%,
    rgba(255,255,255,.92) 65%,
    transparent);
  opacity:.78;
  filter:blur(.2px);
}

.actionButton::after{
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.22) 0%,
      rgba(255,255,255,.07) 26%,
      transparent 48%),
    radial-gradient(ellipse at 50% -12%,
      rgba(255,255,255,.14),
      transparent 45%);
}

.actionButton.blue{
  background:linear-gradient(180deg,#20b9ff 0%,#118fff 38%,#0871e6 70%,#0758bf 100%);
  border-color:#79e6ff;
  box-shadow:
    0 11px 26px rgba(0,62,148,.40),
    0 0 7px rgba(62,205,255,.92),
    0 0 16px rgba(27,164,255,.42),
    0 0 30px rgba(0,101,255,.18),
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -1px 0 rgba(0,52,136,.34);
}

.actionButton.gold{
  background:linear-gradient(180deg,#e0ad17 0%,#b88904 40%,#8c6500 72%,#6a4a00 100%);
  border-color:#ffe77c;
  box-shadow:
    0 11px 26px rgba(80,52,0,.40),
    0 0 7px rgba(255,220,84,.86),
    0 0 16px rgba(255,190,16,.38),
    0 0 30px rgba(255,161,0,.15),
    inset 0 1px 0 rgba(255,251,210,.40),
    inset 0 -1px 0 rgba(92,60,0,.32);
}

.actionButton.cyan{
  background:linear-gradient(180deg,#19bad5 0%,#0a8cac 40%,#086a88 72%,#064d65 100%);
  border-color:#8cf7ff;
  box-shadow:
    0 11px 26px rgba(0,64,82,.40),
    0 0 7px rgba(89,241,255,.88),
    0 0 16px rgba(30,216,255,.38),
    0 0 30px rgba(0,178,255,.14),
    inset 0 1px 0 rgba(231,255,255,.38),
    inset 0 -1px 0 rgba(0,66,86,.31);
}

.actionButton.green{
  background:linear-gradient(180deg,#16d47e 0%,#0aa65f 40%,#087b49 72%,#065b37 100%);
  border-color:#83ffc3;
  box-shadow:
    0 11px 26px rgba(0,73,42,.40),
    0 0 7px rgba(73,245,158,.86),
    0 0 16px rgba(32,225,135,.36),
    0 0 30px rgba(0,191,101,.14),
    inset 0 1px 0 rgba(232,255,241,.37),
    inset 0 -1px 0 rgba(0,76,44,.30);
}

/* KPI ICONS — smaller, denser halos */
.kpiIcon{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.17),
    inset 0 -1px 0 rgba(0,0,0,.20),
    0 0 6px currentColor,
    0 0 14px color-mix(in srgb,currentColor 34%,transparent);
}

/* LIFECYCLE — vivid tube ring + secondary controlled halo */
.lifeNumber{
  background:
    radial-gradient(circle at 35% 26%,rgba(255,255,255,.055),transparent 35%),
    #06192b;
  border-width:2px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}

.blueLife .lifeNumber{
  border-color:#47c7ff;
  box-shadow:
    0 0 4px rgba(91,219,255,1),
    0 0 10px rgba(42,186,255,.82),
    0 0 22px rgba(0,128,255,.36),
    inset 0 0 7px rgba(47,181,255,.12);
}
.goldLife .lifeNumber{
  border-color:#ffe151;
  box-shadow:
    0 0 4px rgba(255,229,101,1),
    0 0 10px rgba(255,204,44,.76),
    0 0 22px rgba(255,167,0,.31),
    inset 0 0 7px rgba(255,205,44,.10);
}
.coralLife .lifeNumber{
  border-color:#ff8c78;
  box-shadow:
    0 0 4px rgba(255,154,134,1),
    0 0 10px rgba(255,105,83,.72),
    0 0 22px rgba(255,73,52,.28),
    inset 0 0 7px rgba(255,108,87,.10);
}
.greenLife .lifeNumber{
  border-color:#4bf5a0;
  box-shadow:
    0 0 4px rgba(104,255,182,1),
    0 0 10px rgba(48,235,150,.72),
    0 0 22px rgba(0,201,104,.28),
    inset 0 0 7px rgba(50,229,144,.10);
}
.tealLife .lifeNumber{
  border-color:#4ceee1;
  box-shadow:
    0 0 4px rgba(121,255,244,1),
    0 0 10px rgba(53,230,218,.72),
    0 0 22px rgba(0,190,177,.28),
    inset 0 0 7px rgba(53,220,211,.10);
}

/* Slightly stronger lifecycle rail readability */
.lifeArrow{
  color:#6fa9ce;
  text-shadow:0 0 5px rgba(67,190,255,.23);
}

/* LOWER WORKSPACE — dark lacquer, luminous rim */
.queueCard,
.intelligenceCard,
.outputsCard{
  background:
    radial-gradient(circle at 14% 0%,rgba(29,139,220,.075),transparent 30%),
    linear-gradient(180deg,#0c2d4c 0%,#071c31 100%);
  border-color:#3da6d2;
  box-shadow:
    0 15px 36px rgba(0,0,0,.30),
    0 0 14px rgba(0,137,221,.07),
    inset 0 1px 0 rgba(151,228,255,.11);
}

.portfolioMetric{
  background:
    linear-gradient(180deg,#174e75 0%,#0f3452 100%);
  border-color:#4ab2d9;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.075),
    inset 0 -1px 0 rgba(0,0,0,.20);
}

/* Keep copy sharp and cool rather than glowing */
.hero h1,
.kpi,
.postureMetric strong,
.life strong,
.portfolioMetric strong{
  text-shadow:
    0 1px 5px rgba(0,0,0,.52);
}

.lead,
.kpiFoot,
.sectionSub,
.life span,
.portfolioMetric span:not(.portfolioIcon){
  text-shadow:none;
}
/* =========================================================
   FINAL PRESENTATION CLEANUP — LIFECYCLE ARROW ALIGNMENT
   ========================================================= */

.lifegrid{
  column-gap:24px;
}

.life{
  position:relative;
  grid-template-columns:37px minmax(0,1fr);
  gap:9px;
}

.lifeArrow{
  position:absolute;
  top:17px;
  right:-18px;
  width:12px;
  height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#79bde7;
  font-size:16px;
  font-weight:500;
  line-height:1;
  text-shadow:
    0 0 4px rgba(86,199,255,.34),
    0 0 8px rgba(38,145,216,.18);
}
/* =========================================================
   FINAL PRESENTATION CLEANUP — KPI ICON SHARPNESS
   ========================================================= */

.kpiIcon{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    0 0 0 1px rgba(90,190,255,.26),
    0 0 8px rgba(46,160,235,.18);
  filter:none;
}

.kpiIcon::before{
  opacity:.42;
  filter:none;
}

.kpiCard{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 8px 20px rgba(0,0,0,.20);
}
/* =========================================================
   FINAL PRESENTATION CLEANUP — KPI TREND LINES
   ========================================================= */

.kpiTrend{
  margin-top:4px;
  font-size:11px;
  line-height:1.2;
  color:#7fb7d8;
  letter-spacing:.01em;
  opacity:.92;
}

.kpiTrend.positive{
  color:#63e6a3;
}

.kpiTrend.negative{
  color:#ff8d7a;
}

.kpiTrend.neutral{
  color:#7fb7d8;
}
/* =========================================================
   FINAL PRESENTATION CLEANUP — READINESS QUEUE GRID
   ========================================================= */

.case{
  display:grid;
  grid-template-columns:1.8fr .75fr .7fr 1fr .85fr .58fr;
  gap:10px;
  align-items:center;
  justify-content:initial;
  padding:13px 10px;
  min-height:63px;
  border-bottom:1px solid #25536f;
}
/* =========================================================
   FINAL PRESENTATION CLEANUP — CONTROLLED OUTPUT ACTIONS
   ========================================================= */

.outputPlaceholder{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.outputEmptyText{
  color:#84a8c0;
  font-size:12px;
}

.outputActions{
  display:flex;
  gap:8px;
  align-items:center;
}

.outputButton{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:0 12px;
  border-radius:8px;
  border:1px solid #3b8ab4;
  background:linear-gradient(180deg,#12496d,#0b304b);
  color:#d8f2ff;
  font-size:11px;
  font-weight:750;
  text-decoration:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 0 8px rgba(48,164,222,.14);
}

.outputButtonDisabled{
  opacity:.42;
  cursor:not-allowed;
  filter:saturate(.55);
}
/* =========================================================
   FINAL PRESENTATION CLEANUP — PUBLICPATH MARK SHARPNESS
   ========================================================= */

.brandLogo span,
.miniBrandLogo span,
.footerLogo span{
  background:linear-gradient(
    180deg,
    #67dcff 0%,
    #27b8ff 34%,
    #087ee8 72%,
    #0757bd 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 1px 0 0 rgba(255,255,255,.08),
    0 0 0 1px rgba(62,187,255,.30),
    0 0 5px rgba(30,157,239,.24);
  filter:none;
}