/* ===== Cloud & DevOps — "pipeline / ops board" concept ===== */
:root{
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --wire: rgba(255,255,255,.12);
  --term: #080b16;
  --ok: #6ee7b7;
  --amber: #fbbf24;
  --cy: #7dd3fc;
}
body.ops{background:var(--bg);color:var(--ink)}
.ops main{position:relative}
.ops main::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px) 0 0/100% 40px,
             radial-gradient(ellipse at 50% -10%,rgba(67,104,250,.2),transparent 55%)}

/* status bar */
.ops-bar{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:14px;
  padding:10px 20px;background:rgba(7,10,24,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:.8rem}
.ops-bar__brand{display:flex;align-items:center;gap:8px;font-weight:700;font-family:Inter,system-ui,sans-serif}
.ops-bar__brand .brand__mark{color:var(--accent-2)}
.ops-bar__health{color:var(--ok)}
.ops-bar__health::before{content:"● "}
.ops-bar__region{color:var(--muted)}
.ops-bar__deploy{margin-left:auto;color:var(--accent-2)}

.ops-section{padding:54px 0}
.ops-eyebrow{font-family:var(--mono);font-size:.8rem;color:var(--muted);margin-bottom:14px}
.ops-eyebrow::before{content:"⬢ ";color:var(--cy)}
.ops-section h2{font-size:clamp(1.7rem,3.4vw,2.4rem)}
.ops-section > .container > p{max-width:600px;margin:14px 0 0;color:var(--muted)}

/* hero + pipeline strip */
.ops-hero{padding:44px 0 20px}
.ops-hero h1{font-size:clamp(2.3rem,5.4vw,3.7rem);letter-spacing:-.02em}
.ops-hero__sub{max-width:46ch;margin:18px 0 0;color:var(--muted);font-size:1.03rem}
.ops-hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.pipe{display:flex;align-items:center;gap:0;margin-top:34px;overflow-x:auto;padding:22px;background:var(--panel);border:1px solid var(--line);border-radius:16px}
.pipe__node{flex:none;display:flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--mono);font-size:.74rem;color:var(--muted)}
.pipe__node b{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:rgba(110,231,183,.12);border:1px solid var(--ok);color:var(--ok)}
.pipe__link{flex:1;min-width:26px;height:2px;background:linear-gradient(90deg,var(--ok),var(--wire))}

/* health board (what's included) */
.board{list-style:none;margin-top:24px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.board li{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;padding:16px 20px;border-bottom:1px solid var(--wire)}
.board li:last-child{border-bottom:0}
.board li:hover{background:rgba(255,255,255,.03)}
.board h4{font-size:.98rem}
.board p{margin-top:3px;font-size:.86rem;color:var(--muted)}
.board .pill{font-family:var(--mono);font-size:.72rem;color:var(--ok);border:1px solid rgba(110,231,183,.4);border-radius:999px;padding:3px 10px;white-space:nowrap}

/* deploy log (approach) */
.deploylog{margin-top:26px;background:var(--term);border:1px solid var(--line);border-radius:14px;
  font-family:var(--mono);font-size:.85rem;line-height:1.95;padding:20px 22px;overflow-x:auto}
.deploylog div{white-space:pre;color:var(--muted)}
.deploylog .s{color:var(--cy)}
.deploylog .ok{color:var(--ok)}
.deploylog .d{color:#6b6b7a}

/* terraform plan (what you get) */
.ops-cols{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;margin-top:24px}
.plan{background:var(--term);border:1px solid var(--line);border-radius:14px;padding:20px;font-family:var(--mono);
  font-size:.84rem;line-height:1.9;color:var(--muted);overflow-x:auto;white-space:pre}
.plan .add{color:var(--ok)}
.plan .cm{color:#6b6b7a}
.providers{border:1px solid var(--line);border-radius:14px;overflow:hidden;font-family:var(--mono);font-size:.82rem}
.providers div{display:flex;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--wire)}
.providers div:last-child{border-bottom:0}
.providers span:first-child{color:var(--muted)}

/* depends_on (related) */
.deps-on{margin-top:22px;background:var(--term);border:1px solid var(--line);border-radius:14px;padding:20px 22px;font-family:var(--mono);font-size:.86rem;line-height:2}
.deps-on .cm{color:#6b6b7a}
.deps-on a{color:var(--ink)}
.deps-on a:hover{color:var(--accent-2)}
.deps-on .note{color:var(--muted)}

.ops-cta{padding:80px 0 96px;text-align:center}
.ops-cta h2{font-size:clamp(2rem,4.5vw,3rem)}
.ops-cta p{color:var(--muted);max-width:46ch;margin:14px auto 26px}

@media(max-width:900px){
  .ops-cols{grid-template-columns:1fr}
  .board li{grid-template-columns:1fr;gap:8px}
  .ops-bar__region{display:none}
}