/* ═══════════════════════════════════════
   THE PLUMBING PIPELINE — BLOG SHARED CSS
   ═══════════════════════════════════════ */

/* RESET & VARIABLES */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#0a1628;--ink2:#1c2e45;--ink3:#2d4460;
  --water:#0891b2;--water2:#06b6d4;--water3:#67e8f9;
  --gold:#d97706;--gold2:#f59e0b;
  --emerald:#059669;--emerald2:#10b981;
  --rose:#e11d48;
  --smoke:#f8fafc;--smoke2:#f1f5f9;--smoke3:#e2e8f0;
  --slate:#64748b;--white:#ffffff;
  --font-d:'Instrument Serif',Georgia,serif;
  --font-b:'Sora',system-ui,sans-serif;
}
html{scroll-behavior:smooth}
body{font-family:var(--font-b);background:var(--white);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* ANIMATIONS */
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.5)}}
@keyframes slideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-b);font-weight:600;cursor:pointer;border:none;transition:all .22s;text-decoration:none;white-space:nowrap}
.btn-sm{padding:9px 20px;font-size:.82rem;border-radius:9px}
.btn-md{padding:12px 26px;font-size:.9rem;border-radius:10px}
.btn-lg{padding:15px 34px;font-size:.95rem;border-radius:11px}
.btn-xl{padding:18px 42px;font-size:1.05rem;border-radius:12px}
.btn-water{background:var(--water);color:#fff}
.btn-water:hover{background:var(--water2);transform:translateY(-2px);box-shadow:0 8px 24px rgba(8,145,178,.38)}
.btn-ghost{background:transparent;border:1.5px solid rgba(255,255,255,.25);color:rgba(255,255,255,.9)}
.btn-ghost:hover{border-color:var(--water2);color:var(--water2);transform:translateY(-1px)}
.btn-outline{background:transparent;border:1.5px solid var(--smoke3);color:var(--ink2)}
.btn-outline:hover{border-color:var(--water);color:var(--water);transform:translateY(-1px)}

/* NAV */
#nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:all .3s}
#nav.scrolled{background:rgba(10,22,40,.97);backdrop-filter:blur(20px);border-bottom:1px solid rgba(8,145,178,.15);box-shadow:0 4px 32px rgba(0,0,0,.2)}
.nav-inner{max-width:1200px;margin:0 auto;padding:0 5%;height:66px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav-logo{display:flex;align-items:center;gap:11px;text-decoration:none}
.nav-logo-mark{width:36px;height:36px;background:linear-gradient(135deg,var(--water),var(--water2));border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nav-logo-mark svg{width:18px;height:18px;fill:white}
.nav-logo-text{font-weight:700;font-size:1rem;line-height:1.2}
.nav-logo-text .d{color:rgba(255,255,255,.5);font-weight:400}
.nav-logo-text .m{color:white}
.nav-logo-text .a{color:var(--water2)}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{color:rgba(255,255,255,.58);text-decoration:none;font-size:.85rem;font-weight:500;padding:7px 13px;border-radius:8px;transition:all .2s;white-space:nowrap}
.nav-links a:hover,.nav-links a.active{color:white;background:rgba(255,255,255,.08)}
.nav-links a.active{color:var(--water2)}
.nav-ctas{display:flex;gap:9px;flex-shrink:0}

/* FOOTER */
footer{background:var(--ink);border-top:1px solid rgba(255,255,255,.06);padding:68px 5% 28px}
.footer-inner{max-width:1200px;margin:0 auto}
.ft-grid{display:grid;grid-template-columns:2.1fr 1fr 1fr 1fr;gap:52px;margin-bottom:52px}
.ft-brand-name{font-weight:700;font-size:1rem;color:white;margin-bottom:12px}
.ft-brand-name .a{color:var(--water2)}
.ft-brand-desc{color:rgba(255,255,255,.28);font-size:.82rem;line-height:1.7;max-width:250px;margin-bottom:18px}
.ft-badge{display:inline-flex;align-items:center;gap:7px;background:rgba(8,145,178,.1);border:1px solid rgba(8,145,178,.2);color:var(--water2);padding:6px 13px;border-radius:100px;font-size:.7rem;font-weight:600}
.ft-col h5{font-weight:700;color:white;font-size:.86rem;margin-bottom:14px}
.ft-col ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.ft-col ul a{color:rgba(255,255,255,.32);text-decoration:none;font-size:.82rem;transition:color .2s}
.ft-col ul a:hover{color:var(--water2)}
.ft-bottom{border-top:1px solid rgba(255,255,255,.06);padding-top:22px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.ft-bottom p{color:rgba(255,255,255,.2);font-size:.78rem}
.ft-hl{color:var(--water2)}

/* RESPONSIVE */
@media(max-width:1024px){
  .ft-grid{grid-template-columns:1fr 1fr;gap:32px}
  .nav-links{display:none}
}
@media(max-width:600px){
  .nav-ctas .btn-ghost{display:none}
  .ft-grid{grid-template-columns:1fr}
}