/* DC ChemTech LLC -- Learn / SEO article styles (matches pages/quality.html look) */
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@400;600;700&family=Inter:wght@400;500;600&display=swap');

:root {
  --accent:  #00d4ff;
  --bg:      #0a1428;
  --panel:   rgba(255,255,255,.04);
  --border:  rgba(160,200,255,.12);
  --text:    #a0bcdc;
  --heading: #c8dcf8;
  --white:   #fff;
}
* { box-sizing:border-box; margin:0; padding:0; }
body { background:var(--bg); color:var(--text); font-family:'Inter',sans-serif; line-height:1.75; }
a { color:var(--accent); }

nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:70px; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(10,20,60,.92); border-bottom:1px solid var(--border);
  backdrop-filter:blur(14px);
}
.nav-brand { font-family:'Titillium Web',sans-serif; font-size:1rem; font-weight:700; color:var(--heading); letter-spacing:.06em; text-decoration:none; }
.nav-links { display:flex; gap:12px; align-items:center; }
.nav-links a {
  padding:7px 14px; border:1px solid rgba(160,200,255,.2); border-radius:6px;
  color:#7aaad0; font-size:.78rem; font-weight:600; text-decoration:none; transition:.2s; white-space:nowrap;
}
.nav-links a:hover { border-color:rgba(0,212,255,.4); color:var(--accent); }

.article-hero {
  padding:130px 20px 50px; text-align:center;
  background:linear-gradient(180deg, rgba(0,212,255,.05) 0%, transparent 100%);
  border-bottom:1px solid var(--border);
}
.crumbs { font-size:.74rem; color:#6a90b8; margin-bottom:14px; }
.crumbs a { color:#7aaad0; text-decoration:none; }
.crumbs a:hover { color:var(--accent); }
.hero-tag {
  display:inline-block; margin-bottom:16px; padding:5px 16px;
  background:rgba(0,212,255,.1); border:1px solid rgba(0,212,255,.25); border-radius:20px;
  font-size:.7rem; font-weight:700; letter-spacing:.12em; color:var(--accent); text-transform:uppercase;
}
.article-hero h1 {
  font-family:'Titillium Web',sans-serif; font-size:clamp(1.8rem,4.5vw,2.8rem);
  font-weight:700; color:var(--white); line-height:1.25; max-width:820px; margin:0 auto 16px;
}
.article-hero .lede { max-width:660px; margin:0 auto; color:#8aacc8; font-size:1rem; line-height:1.85; }
.meta-line { margin-top:16px; font-size:.74rem; color:#5a7a9a; }

.article { max-width:780px; margin:0 auto; padding:56px 20px 30px; }
.article h2 {
  font-family:'Titillium Web',sans-serif; font-size:1.45rem; font-weight:700;
  color:var(--white); margin:42px 0 12px; line-height:1.3;
}
.article h3 { font-family:'Titillium Web',sans-serif; font-size:1.1rem; font-weight:700; color:var(--heading); margin:26px 0 8px; }
.article p { font-size:.97rem; margin-bottom:16px; }
.article ul, .article ol { padding-left:24px; margin-bottom:18px; }
.article li { font-size:.95rem; margin-bottom:8px; }
.article strong { color:var(--heading); font-weight:600; }

.callout {
  margin:26px 0; padding:20px 22px;
  background:rgba(0,212,255,.05); border:1px solid rgba(0,212,255,.22); border-radius:12px;
}
.callout p:last-child { margin-bottom:0; }
.callout .callout-title { font-family:'Titillium Web',sans-serif; font-weight:700; color:var(--white); margin-bottom:6px; font-size:.95rem; }

.data-table { width:100%; border-collapse:collapse; margin:22px 0; font-size:.88rem; }
.data-table th {
  text-align:left; padding:10px 14px; background:rgba(0,212,255,.08); border:1px solid var(--border);
  font-family:'Titillium Web',sans-serif; font-size:.8rem; color:var(--heading);
  text-transform:uppercase; letter-spacing:.06em;
}
.data-table td { padding:10px 14px; border:1px solid var(--border); vertical-align:top; }
.data-table tr:nth-child(even) td { background:rgba(255,255,255,.02); }

.related { max-width:780px; margin:10px auto 0; padding:0 20px 20px; }
.related h2 { font-family:'Titillium Web',sans-serif; font-size:1.1rem; color:var(--white); margin-bottom:14px; }
.related-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.related-card {
  display:block; padding:16px 18px; background:var(--panel); border:1px solid var(--border);
  border-radius:12px; text-decoration:none; transition:.25s;
}
.related-card:hover { border-color:rgba(0,212,255,.35); transform:translateY(-2px); }
.related-card .rc-title { font-family:'Titillium Web',sans-serif; font-weight:700; color:var(--heading); font-size:.95rem; margin-bottom:4px; }
.related-card .rc-desc { font-size:.78rem; color:#7a9aba; line-height:1.55; }

.cta-band {
  max-width:780px; margin:30px auto 70px; padding:30px 24px; text-align:center;
  background:rgba(0,212,255,.04); border:1px solid rgba(0,212,255,.2); border-radius:16px;
}
.cta-band h2 { font-family:'Titillium Web',sans-serif; font-size:1.2rem; color:var(--white); margin-bottom:10px; }
.cta-band p { font-size:.88rem; color:#8aacc8; margin-bottom:18px; }
.btn-primary {
  display:inline-flex; padding:12px 28px; border:1px solid #5b85d6; border-radius:8px;
  background:linear-gradient(135deg,#1a3a8a,#2d5fc4); color:#fff; text-decoration:none;
  font-family:'Titillium Web',sans-serif; font-size:.88rem; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; transition:.25s;
}
.btn-primary:hover { background:linear-gradient(135deg,#2d5fc4,#5b85d6); }

.hub-grid { max-width:980px; margin:0 auto; padding:50px 20px 20px; display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:20px; }

footer { border-top:1px solid var(--border); padding:34px 20px; text-align:center; }
.foot-disclaimer {
  display:inline-block; margin-bottom:14px; padding:4px 14px;
  background:rgba(255,100,100,.1); border:1px solid rgba(255,100,100,.28); border-radius:4px;
  color:#ffaaaa; font-size:.7rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
}
footer p { font-size:.76rem; color:#5a7a9a; max-width:680px; margin:0 auto 6px; line-height:1.7; }
footer a { color:#7aaad0; text-decoration:none; }
footer a:hover { color:var(--accent); }

@media (max-width:768px) {
  nav { padding:0 14px; }
  .nav-links a { padding:6px 10px; font-size:.72rem; }
  .article-hero { padding:105px 16px 40px; }
  .article { padding-top:40px; }
  .data-table { font-size:.8rem; }
  .data-table th, .data-table td { padding:8px 10px; }
}