/* ============================================================
   PragOptics — HART resource hub stylesheet
   Brand tokens match css/tokens.css (teal / purple / indigo on black).
   Styles the semantic HTML emitted for the /hart/ content pages.
   Static, lightweight, no external fonts (Core Web Vitals friendly).
   ============================================================ */

:root{
  --bg-deep:#000;
  --ink:#dcdbf0;
  --muted:#c6d0f0;
  --brand:#1ca490;
  --brand-600:#21bca5;
  --brand-lit:#7df3ff;
  --purp:#a200ff;
  --purp-lit:#c9a3ff;
  --indigo:#6c5ce7;
  --glass:rgba(0,0,0,0.43);
  --panel:rgba(8,14,22,0.66);
  --hairline:rgba(255,255,255,0.10);
  --radius:16px;
  --radius-sm:12px;
  --aura:0 0 0 1px rgba(255,255,255,0.06), 0 18px 50px rgba(0,0,0,0.55), 0 0 60px rgba(28,164,144,0.10);
  --maxw:820px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(1100px 640px at 84% -6%, rgba(162,0,255,0.18), transparent 60%),
    radial-gradient(900px 560px at -10% 6%, rgba(28,164,144,0.16), transparent 55%),
    linear-gradient(130deg, #000 0%, #180425 55%, #021812 100%);
  background-attachment:fixed;
  font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.68;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}

/* ---------- header / nav ---------- */
.site-header{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  max-width:1100px; margin:0 auto; padding:18px 24px;
}
.site-header .brand{ display:flex; align-items:center; gap:11px; font-weight:800; letter-spacing:.02em; color:#fff; text-decoration:none; }
.site-header .brand img{ width:30px; height:30px; object-fit:contain; }
.site-header .brand span{ background:linear-gradient(100deg,#fff,var(--brand-600) 60%,var(--purp)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.site-header nav a{ color:var(--muted); text-decoration:none; margin-left:18px; font-size:.92rem; }
.site-header nav a:hover{ color:#fff; }

.breadcrumb{ max-width:var(--maxw); margin:4px auto 0; padding:0 24px; font-size:.8rem; color:var(--muted); }
.breadcrumb a{ color:var(--brand-600); text-decoration:none; }
.breadcrumb a:hover{ color:#fff; }

/* ---------- layout ---------- */
.container{ max-width:var(--maxw); margin:0 auto; padding:14px 24px 70px; }

/* ---------- article prose ---------- */
.prose h1{
  font-size:2.5rem; line-height:1.14; font-weight:900; margin:.4em 0 .35em; letter-spacing:.01em;
  background:linear-gradient(100deg,#fff, var(--brand-600) 55%, var(--purp));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.prose h2{
  font-size:1.55rem; font-weight:800; color:var(--brand-600); margin:2em 0 .5em;
  padding-bottom:.28em; border-bottom:1px solid var(--hairline);
}
.prose h3{ font-size:1.18rem; font-weight:700; color:var(--purp-lit); margin:1.6em 0 .35em; }
.prose p{ margin:.75em 0; color:var(--ink); }
.prose strong{ color:#fff; }
.prose em{ color:var(--muted); }
.prose a{ color:var(--brand-lit); text-decoration:none; border-bottom:1px solid rgba(125,243,255,0.28); }
.prose a:hover{ color:#fff; border-bottom-color:var(--purp); }
.prose ul,.prose ol{ padding-left:1.4em; margin:.7em 0; }
.prose li{ margin:.32em 0; }
.prose blockquote{
  margin:1.3em 0; padding:.7em 1.1em; color:var(--muted);
  background:rgba(162,0,255,0.07); border-left:4px solid var(--purp);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
.prose code{ background:rgba(28,164,144,0.12); color:var(--brand-lit); padding:.08em .42em; border-radius:6px; font-size:.9em;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }

/* tables */
.prose table{ border-collapse:separate; border-spacing:0; width:100%; margin:1.4em 0; font-size:.95rem;
  border:1px solid var(--hairline); border-radius:var(--radius-sm); overflow:hidden; }
.prose th{ background:linear-gradient(180deg,rgba(28,164,144,0.18),rgba(162,0,255,0.10)); color:#fff;
  text-align:left; padding:10px 13px; border-bottom:1px solid var(--hairline); font-weight:700; }
.prose td{ padding:9px 13px; border-bottom:1px solid rgba(255,255,255,0.06); }
.prose tr:last-child td{ border-bottom:0; }
.prose tbody tr:nth-child(even) td{ background:rgba(255,255,255,0.022); }

/* glossary definition lists */
.prose dl{ margin:1.2em 0; display:grid; gap:0; }
.prose dt{ color:var(--brand-600); font-weight:700; font-size:1.04rem; margin-top:1.1em; }
.prose dd{ margin:.2em 0 0; padding:0 0 .9em; color:var(--muted); border-bottom:1px solid rgba(255,255,255,0.06); }

/* FAQ rhythm: h3 questions get a subtle marker */
.prose .faq h3, .prose h3.q{ position:relative; padding-left:1.1em; }

/* ---------- hub cards ---------- */
.hub-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; margin:1.8em 0; }
.hub-card{
  display:block; text-decoration:none; padding:20px 20px 18px; border-radius:var(--radius);
  background:var(--panel); border:1px solid var(--hairline); border-top:3px solid var(--brand-600);
  box-shadow:var(--aura); transition:transform .15s ease, border-color .15s ease;
}
.hub-card:nth-child(2){ border-top-color:var(--purp); }
.hub-card:nth-child(3){ border-top-color:var(--indigo); }
.hub-card:hover{ transform:translateY(-2px); border-color:rgba(125,243,255,0.4); }
.hub-card .ht{ color:#fff; font-weight:800; font-size:1.08rem; }
.hub-card .hs{ color:var(--muted); font-size:.9rem; margin-top:.4em; line-height:1.5; }

/* ---------- product CTA ---------- */
.cta-box{
  margin:2.4em 0 0; padding:22px 24px; border-radius:var(--radius);
  background:linear-gradient(120deg, rgba(28,164,144,0.12), rgba(162,0,255,0.12));
  border:1px solid rgba(162,0,255,0.28); box-shadow:var(--aura);
}
.cta-box h2{ margin:0 0 .25em; color:#fff; font-size:1.3rem; border:0; padding:0; }
.cta-box p{ color:var(--muted); margin:.3em 0 1em; }
.cta{
  display:inline-block; padding:11px 22px; border-radius:999px; font-weight:800; text-decoration:none;
  color:#04130f; background:linear-gradient(120deg,var(--brand-600),var(--brand));
  box-shadow:0 10px 26px rgba(28,164,144,0.30);
}
.cta:hover{ background:linear-gradient(120deg,var(--brand-600),var(--purp)); color:#fff; }

/* ---------- footer ---------- */
.site-footer{
  max-width:1100px; margin:0 auto; padding:26px 24px 44px; border-top:1px solid var(--hairline);
  color:var(--muted); font-size:.86rem; display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:space-between;
}
.site-footer a{ color:var(--brand-600); text-decoration:none; }
.site-footer a:hover{ color:#fff; }

/* ---------- responsive ---------- */
@media (max-width:560px){
  body{ font-size:16px; }
  .prose h1{ font-size:2rem; }
  .prose h2{ font-size:1.35rem; }
  .site-header{ flex-wrap:wrap; gap:8px 0; }
  .site-header nav a{ margin-left:0; margin-right:14px; }
  .prose table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}