/* tech-hub.css — shared marketing components for SitePath's technology
   hub pages (data-centers.html, bess.html). Ported from index.html so the
   tech pages read as one system: light .hero with a Fraunces .hero-h1, navy
   .hbtn buttons, the .hero-spot-card product artifact, and .sec-wrap sections,
   plus the shared .dci-* layer/capability/lock helpers. Loaded ONLY by the
   tech hubs, so the generic .hero/.eyebrow names never collide with the many
   other pages that style those classes their own way. */
/* ── Data Center Intelligence hub — native SitePath house style ──────────
   Ported verbatim from index.html so this page reads as one system with the
   rest of the site: light grounds, Fraunces display, navy/outline buttons,
   the hero spotlight county card, and .sec-wrap sections. Page-scoped. */
.hero{background:linear-gradient(180deg,#f9fafb 0%,#fff 60%,#fff 100%);padding:64px 32px 56px;border-bottom:1px solid var(--border);position:relative;overflow:hidden}
.hero-inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:64px;align-items:center}
.eyebrow{font-size:12px;font-weight:600;color:var(--text3);letter-spacing:.08em;text-transform:uppercase;margin-bottom:24px}
.hero-h1{font-family:'Fraunces',Georgia,serif;font-size:clamp(34px,4.3vw,60px);font-weight:600;color:var(--navy);letter-spacing:-0.01em;margin-bottom:22px;line-height:1.06;max-width:15ch}
.hero-h1 em{font-style:normal;color:var(--navy)}
.hero-sub{font-size:clamp(15px,1.2vw,17px);color:var(--text2);max-width:560px;line-height:1.6;margin-bottom:30px}
.hero-btns{display:flex;gap:10px;flex-wrap:wrap}
.hbtn-primary{display:inline-flex;align-items:center;gap:7px;padding:14px 24px;background:var(--navy);color:#fff;border-radius:8px;font-size:14px;font-weight:600;text-decoration:none;transition:background .15s}
.hbtn-primary:hover{background:#152a4a}
.hbtn-ghost{display:inline-flex;align-items:center;gap:7px;padding:14px 22px;background:#fff;color:var(--navy);border:1px solid var(--border);border-radius:8px;font-size:14px;font-weight:600;text-decoration:none;transition:all .15s}
.hbtn-ghost:hover{border-color:var(--navy)}
.hero-spot{display:flex;flex-direction:column;gap:14px;min-width:0}
.hero-spot-card{background:#fff;color:var(--navy);border-radius:18px;padding:26px 28px;box-shadow:0 24px 48px -16px rgba(10,22,40,.12),0 0 0 1px rgba(15,23,42,.06);position:relative;overflow:hidden;border:1px solid var(--border)}
.hero-spot-card::before{content:'';position:absolute;top:-40%;right:-20%;width:280px;height:280px;background:radial-gradient(circle,rgba(220,38,38,.06) 0%,transparent 60%);pointer-events:none}
.hero-spot-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:18px;position:relative}
.hero-spot-county{font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--navy)}
.hero-spot-state{font-size:12px;color:var(--text3);margin-top:2px;letter-spacing:.5px;text-transform:uppercase;font-weight:500}
.hero-spot-signal{padding:12px 14px;background:#fff5f5;border:1px solid #fecaca;border-radius:10px;font-size:12.5px;line-height:1.55;color:#7f1d1d;position:relative}
.hero-spot-signal-head{font-size:10px;font-weight:700;color:#b91c1c;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:5px}
.hero-spot-signal-body strong{color:#7f1d1d;font-weight:700}
.hero-spot-meta{display:flex;gap:18px;margin-top:18px;padding-top:16px;border-top:1px solid var(--border);position:relative}
.hero-spot-meta-item{flex:1;min-width:0}
.hero-spot-meta-k{font-size:9px;font-weight:700;color:var(--text4);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:3px}
.hero-spot-meta-v{font-size:12px;font-weight:600;color:var(--navy)}
.hero-spot-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:11px;color:var(--text3);padding:0 4px}
.hero-spot-foot strong{color:var(--navy);font-weight:600}
.hero-spot-foot a{color:var(--blue);font-weight:600;text-decoration:none;white-space:nowrap}
.sec-wrap{padding:72px 32px;border-bottom:1px solid var(--border);background:#fff}
.sec-wrap.cream{background:linear-gradient(180deg,#f9fafb 0%,#fff 100%)}
.sec-inner{max-width:1180px;margin:0 auto}
.sec-label{font-size:12px;font-weight:600;color:var(--text3);letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px}
.sec-title{font-family:'Fraunces',Georgia,serif;font-size:clamp(28px,3.4vw,42px);font-weight:600;color:var(--navy);letter-spacing:-0.01em;margin:0 0 16px;line-height:1.12;max-width:22ch}
.sec-sub{font-size:16px;color:var(--text2);max-width:640px;line-height:1.6;margin:0}
/* Three-layer cards (light; the premium one gets a navy ring, never a dark fill) */
.dci-layers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
.dci-layer{border:1px solid var(--border);border-radius:14px;padding:22px 20px;background:#fff;display:flex;flex-direction:column;gap:8px}
.dci-layer h3{margin:0;font-size:15px;font-weight:700;color:var(--navy);display:flex;align-items:center;gap:9px}
.dci-layer .ic{width:32px;height:32px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;background:#f1f5f9;color:var(--text3)}
.dci-layer .tag{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:#f1f5f9;color:var(--text3)}
.dci-layer p{margin:0;font-size:13px;line-height:1.55;color:var(--text2)}
.dci-layer.premium{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
.dci-layer.premium .ic{background:var(--navy);color:#fff}
.dci-layer.premium .tag{background:var(--navy);color:#fff}
/* Capability cards (light) */
.dci-caps{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:34px}
.dci-cap{border:1px solid var(--border);border-radius:14px;padding:22px;background:#fff}
.dci-cap-hd{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.dci-cap-hd .ic{width:30px;height:30px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;background:#f1f5f9;color:var(--navy);flex:none}
.dci-cap-hd h3{margin:0;font-size:15px;font-weight:700;color:var(--navy)}
.dci-cap-sub{font-size:12.5px;color:var(--text3);line-height:1.5;margin:0 0 16px}
.dci-tax{display:flex;flex-wrap:wrap;gap:8px}
.dci-tax .t{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);border-radius:8px;padding:6px 11px;font-size:12px;font-weight:600;color:var(--text2);background:#fff}
.dci-tax .t .d{width:8px;height:8px;border-radius:2px;flex:none}
.dci-names{display:flex;flex-wrap:wrap;gap:8px}
.dci-names .nm{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:600;color:var(--text2);background:#fff}
.dci-names .nm .code{font-weight:800;color:var(--navy);letter-spacing:.02em}
.dci-op{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:600;color:var(--text2);background:#fff}
.dci-op .sw{width:7px;height:7px;border-radius:50%;background:var(--blue)}
.dci-src-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.dci-src-list li{display:flex;gap:10px;font-size:13px;line-height:1.5;color:var(--text2)}
.dci-src-list .ck{flex:none;color:var(--green2);margin-top:1px}
/* Add-on plan (light) */
.dci-plan-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center;margin-top:30px}
.dci-feats{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dci-feats li{display:flex;gap:9px;font-size:13.5px;line-height:1.45;color:var(--text2)}
.dci-feats .ck{flex:none;color:var(--green2);margin-top:1px}
.dci-plan-cta{display:flex;flex-direction:column;gap:12px;align-items:flex-start;border-left:1px solid var(--border);padding-left:44px}
.dci-plan-note{font-size:12px;color:var(--text3);line-height:1.5}
/* Detail lock (light) */
.dci-lock{border:1px solid var(--border);border-radius:16px;background:#f9fafb;padding:30px;display:flex;gap:22px;align-items:center}
.dci-lock-ic{flex:none;width:50px;height:50px;border-radius:13px;background:#eef2f7;color:var(--navy);display:inline-flex;align-items:center;justify-content:center}
.dci-lock h3{margin:0 0 5px;font-size:18px;font-weight:700;color:var(--navy)}
.dci-lock p{margin:0;font-size:13.5px;line-height:1.6;color:var(--text2);max-width:62ch}
.dci-lock .acts{margin-left:auto;display:flex;gap:9px;flex:none}
@media(max-width:900px){
 .hero-inner{grid-template-columns:1fr;gap:40px}
 .hero-spot{order:2;max-width:480px;margin:0 auto;width:100%}
 .dci-layers{grid-template-columns:1fr}
 .dci-caps{grid-template-columns:1fr}
 .dci-plan-grid{grid-template-columns:1fr;gap:24px}
 .dci-feats{grid-template-columns:1fr}
 .dci-plan-cta{border-left:0;padding-left:0;border-top:1px solid var(--border);padding-top:22px}
 .dci-lock{flex-direction:column;text-align:center}
 .dci-lock .acts{margin-left:0;flex-wrap:wrap;justify-content:center}
}
@media(max-width:560px){.sec-wrap,.hero{padding-left:18px;padding-right:18px}.hero-btns a{flex:1;justify-content:center}}