/* ============ Platform deep-dive ============ */
:root{
  --ok:#36e27e; --warn:#f7b955; --down:#fb6f6f; --planned:#6f7aa0;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

.nav-links a.active{color:var(--ink)}
.nav-links a.active::after{content:"";display:block;height:2px;border-radius:2px;margin-top:3px;
  background:linear-gradient(90deg,var(--cyan),var(--blue))}

/* ---- hero ---- */
.pf-hero{position:relative;z-index:1;max-width:920px;margin:0 auto;padding:78px 28px 30px;text-align:center}
.pf-hero h1{font-family:"Space Grotesk";font-size:clamp(2.3rem,5vw,3.6rem);line-height:1.06;margin:0 0 20px;letter-spacing:-.02em}
.pf-hero .lede{color:var(--muted);font-size:clamp(1.02rem,1.4vw,1.18rem);max-width:680px;margin:0 auto 26px}
.legend{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;font-size:.85rem;font-weight:600}
.lg-live{color:var(--ok)} .lg-partial{color:var(--warn)} .lg-planned{color:var(--planned)}

.pf-section{padding-top:88px;padding-bottom:30px}
.grad-t{background:linear-gradient(100deg,var(--cyan),var(--blue) 60%,var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- 1 · regulatory coverage ---- */
.reg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.reg-card{background:var(--card);border:1px solid var(--card-bd);border-radius:16px;padding:22px 20px;transition:transform .2s,border-color .25s}
.reg-card:hover{transform:translateY(-4px);border-color:rgba(120,180,255,.35)}
.reg-top{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.reg-ring{
  --cov:0; width:60px;height:60px;flex:none;border-radius:50%;display:grid;place-items:center;position:relative;
  background:conic-gradient(var(--cyan) calc(var(--ring,0)*1%), rgba(255,255,255,.07) 0);
  transition:none;
}
.reg-ring::before{content:"";position:absolute;inset:5px;border-radius:50%;background:#0c1230}
.reg-ring span{position:relative;font-family:"Space Grotesk";font-weight:700;font-size:1.02rem;color:var(--ink)}
.reg-ring i{font-style:normal;font-size:.6em;color:var(--muted)}
.reg-id h3{font-family:"Space Grotesk";font-size:1.18rem;margin:0;letter-spacing:-.01em}
.reg-id p{margin:2px 0 0;font-size:.82rem;color:var(--muted-2)}
.reg-maps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.reg-maps li{font-size:.84rem;color:var(--muted);line-height:1.4;padding-left:2px}
.reg-maps b{display:inline-block;min-width:42px;color:var(--cyan-2);font-family:var(--mono);font-size:.78rem;font-weight:500}

/* ---- 2 · finops ---- */
.finops-wrap{background:var(--card);border:1px solid var(--card-bd);border-radius:20px;padding:30px 28px}
.finops-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid var(--card-bd)}
.fo-stat{display:flex;flex-direction:column;gap:3px}
.fo-stat b{font-family:"Space Grotesk";font-size:1.7rem;color:var(--ink);line-height:1}
.fo-stat span{font-size:.82rem;color:var(--muted-2)}
.fo-stat .ok{color:var(--ok)}
.bars{display:flex;flex-direction:column;gap:11px}
.bar-row{display:grid;grid-template-columns:210px 1fr 78px;align-items:center;gap:16px}
.bar-label{font-size:.9rem;color:var(--ink);display:flex;flex-direction:column;line-height:1.25}
.bar-label small{color:var(--muted-2);font-size:.74rem;font-family:var(--mono)}
.bar-track{height:12px;border-radius:7px;background:rgba(255,255,255,.05);overflow:hidden}
.bar-fill{height:100%;width:0;border-radius:7px;background:linear-gradient(90deg,var(--blue),var(--cyan-2));
  transition:width 1.1s cubic-bezier(.2,.7,.3,1);box-shadow:0 0 12px rgba(56,189,248,.4)}
.bar-val{font-family:var(--mono);font-size:.92rem;color:var(--ink);text-align:right;font-weight:500}
.finops-note{margin:20px 0 0;font-size:.82rem;color:var(--muted-2);text-align:center}

/* ---- 3 · bcp ---- */
.bcp-status{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.bcp-stat{background:var(--card);border:1px solid var(--card-bd);border-radius:14px;padding:18px 20px;display:flex;flex-direction:column;gap:4px}
.bcp-k{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-2)}
.bcp-stat b{font-family:"Space Grotesk";font-size:1.55rem;line-height:1}
.bcp-stat small{font-size:.78rem;color:var(--muted-2)}
.bcp-stat .ok{color:var(--ok)} .bcp-stat .warn{color:var(--warn)}
.bcp-tiers{display:flex;flex-direction:column;gap:14px}
.tier{background:var(--card);border:1px solid var(--card-bd);border-radius:16px;padding:20px 22px;border-left:3px solid var(--card-bd)}
.tier:nth-child(1){border-left-color:var(--muted-2)}
.tier:nth-child(2){border-left-color:var(--blue)}
.tier:nth-child(3){border-left-color:var(--down)}
.tier-head{display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.tier-no{width:34px;height:34px;flex:none;border-radius:9px;display:grid;place-items:center;font-family:"Space Grotesk";font-weight:700;color:#04122b}
.tier-no.t0{background:#9aa6c8} .tier-no.t1{background:var(--blue)} .tier-no.t2{background:var(--down)}
.tier-head h3{font-size:1.05rem;margin:0}
.tier-head p{margin:2px 0 0;font-size:.8rem;color:var(--muted-2)}
.tier-meta{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:.78rem;color:var(--muted)}
.tier-meta b{color:var(--ink);font-family:var(--mono)}
.t-prio{padding:3px 9px;border-radius:6px;background:rgba(255,255,255,.06);border:1px solid var(--card-bd);font-weight:600}
.t-ok{color:var(--ok);font-weight:600}.t-ok.warn{color:var(--warn)}
.nodes{display:flex;flex-wrap:wrap;gap:9px}
.node{position:relative;font-size:.84rem;padding:8px 13px 8px 26px;border-radius:9px;background:rgba(255,255,255,.035);border:1px solid var(--card-bd);color:var(--muted)}
.node::before{content:"";position:absolute;left:11px;top:50%;transform:translateY(-50%);width:8px;height:8px;border-radius:50%;background:var(--planned)}
.node.up{color:var(--ink)} .node.up::before{background:var(--ok);box-shadow:0 0 0 0 rgba(54,226,126,.6);animation:nodepulse 2.6s ease-in-out infinite}
.node.partial{color:var(--ink)} .node.partial::before{background:var(--warn)}
.node.unknown::before{background:var(--planned)}
.node.down{color:var(--muted)} .node.down::before{background:var(--down)}
.node.planned{color:var(--muted-2);border-style:dashed} .node.planned::before{background:transparent;border:1.5px solid var(--planned)}
@keyframes nodepulse{0%,100%{box-shadow:0 0 0 0 rgba(54,226,126,.5)}50%{box-shadow:0 0 0 5px rgba(54,226,126,0)}}

/* ---- 4 · ai governance ---- */
.ai-posture{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}
.ai-stat{background:var(--card);border:1px solid var(--card-bd);border-radius:14px;padding:20px;text-align:center}
.ai-stat b{display:block;font-family:"Space Grotesk";font-size:1.7rem;color:var(--ink)}
.ai-stat span{display:block;font-size:.9rem;color:var(--ink);margin-top:4px}
.ai-stat small{display:block;font-size:.76rem;color:var(--muted-2);margin-top:2px}
.ai-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ai-tier{background:var(--card);border:1px solid var(--card-bd);border-radius:16px;padding:22px 20px}
.ai-tier h4{font-family:var(--mono);font-size:.98rem;margin:0 0 16px;color:var(--ink)}
.ai-tier h4 span{display:block;font-family:"Inter";font-size:.76rem;font-weight:500;color:var(--muted-2);margin-top:3px;text-transform:none;letter-spacing:0}
.ai-tier.read{border-top:2px solid var(--ok)}
.ai-tier.prop{border-top:2px solid var(--warn)}
.ai-tier.deny{border-top:2px solid var(--down)}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{font-family:var(--mono);font-size:.76rem;padding:5px 10px;border-radius:7px;border:1px solid transparent}
.chip.g{color:var(--ok);background:rgba(54,226,126,.1);border-color:rgba(54,226,126,.25)}
.chip.a{color:var(--warn);background:rgba(247,185,85,.1);border-color:rgba(247,185,85,.25)}
.chip.r{color:var(--down);background:rgba(251,111,111,.1);border-color:rgba(251,111,111,.25);text-decoration:line-through;text-decoration-thickness:1px}

/* ---- 5 · cloud architecture ---- */
.cloud{display:flex;flex-direction:column;gap:16px}
.cloud-layer{border-radius:16px;padding:20px 22px;border:1px solid var(--card-bd);background:var(--card)}
.cloud-layer.edge{border-color:rgba(91,140,255,.3)}
.cloud-layer.aws{border-color:rgba(247,185,85,.3)}
.cloud-layer.eks{border-color:rgba(139,124,255,.35)}
.cl-title{font-family:"Space Grotesk";font-weight:600;font-size:1.02rem;margin-bottom:14px;color:var(--ink)}
.cl-title span{display:block;font-family:"Inter";font-weight:400;font-size:.78rem;color:var(--muted-2);margin-top:3px}
.cl-sub{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-2);margin:14px 0 9px;font-weight:600}
.cl-sub small{text-transform:none;letter-spacing:0;font-weight:400;color:var(--muted-2);font-family:var(--mono)}
.node.up.upbadge::after{content:"UP";font-family:var(--mono);font-size:.62rem;color:var(--ok);margin-left:7px;font-weight:600}

/* reveal stagger for grids handled by JS classes */

/* ---- responsive ---- */
@media(max-width:1000px){
  .reg-grid{grid-template-columns:repeat(2,1fr)}
  .finops-summary,.bcp-status,.ai-posture{grid-template-columns:repeat(2,1fr)}
  .ai-tiers{grid-template-columns:1fr}
}
@media(max-width:680px){
  .reg-grid{grid-template-columns:1fr}
  .finops-summary,.bcp-status,.ai-posture{grid-template-columns:1fr}
  .bar-row{grid-template-columns:1fr;gap:6px}
  .bar-row .bar-val{text-align:left}
  .tier-meta{margin-left:0;width:100%}
}
@media(prefers-reduced-motion:reduce){
  .bar-fill{transition:none}
  .node.up::before{animation:none}
}