/* QX Federal — shared site styles (dark system, aligned to ShoQ/ShoQTI) */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:wght@300;400;600;700&family=Barlow:ital,wght@0,400;0,500;1,400;1,500&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --black:#0a0a0a;
  --paper:#0a0a0a;         /* legacy alias so old markup keeps working */
  --card:#131313;
  --card2:#171717;
  --surface:#131313;       /* legacy alias */
  --text:#f2f2f0;
  --ink:#f2f2f0;            /* legacy alias */
  --body-text:#c9c6bd;
  --muted:#8c887e;
  --line:rgba(242,242,240,0.09);

  --accent:#c23b32;         /* oxblood, brightened for dark bg */
  --accent-hot:#e2493e;
  --accent-dim:rgba(194,59,50,0.14);
  --accent-glow:rgba(194,59,50,0.30);
  --brass:#c99a4a;
  --brass-dim:rgba(201,154,74,0.12);

  /* Belt tier colors — unchanged, the product's own signature */
  --belt-bronze:#e7e2d3;
  --belt-silver:#d9b64a;
  --belt-gold:#c9701f;
  --belt-platinum:#3f6b47;
  --belt-master:#2c4d7a;
  --belt-elite:#6b4a2f;
  --belt-black:#f2f2f0;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--black);
  color:var(--text);
  font-family:'Barlow',sans-serif;
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  position:relative;
}

/* grain overlay, matches ShoQTI's texture */
body::after{
  content:'';
  position:fixed;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events:none;z-index:9999;opacity:.5;
}

.eyebrow{
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px;
  letter-spacing:4px;
  text-transform:uppercase;
  color:var(--accent-hot);
  font-weight:700;
  opacity:0.9;
}

h1,h2,h3{
  font-family:'Bebas Neue',sans-serif;
  font-weight:400;
  color:var(--text);
  line-height:1.02;
  margin:0;
  letter-spacing:0.5px;
}
h1{font-size:clamp(40px,6.4vw,72px);letter-spacing:1px}
h2{font-size:clamp(28px,3.8vw,42px);letter-spacing:0.5px}
h3{font-size:22px;font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:0.2px}

p{margin:0 0 16px;color:var(--body-text)}
p.lede{font-size:19px;color:var(--body-text);max-width:640px}
a{color:var(--accent-hot)}
a.plain{color:inherit;text-decoration:none}

/* ── Belt strip: the signature element, unchanged ── */
.belt-strip{display:flex;height:6px;width:100%;overflow:hidden}
.belt-strip span{flex:1}
.belt-strip .bronze{background:var(--belt-bronze)}
.belt-strip .silver{background:var(--belt-silver)}
.belt-strip .gold{background:var(--belt-gold)}
.belt-strip .platinum{background:var(--belt-platinum)}
.belt-strip .master{background:var(--belt-master)}
.belt-strip .elite{background:var(--belt-elite)}
.belt-strip .black{background:var(--belt-black)}

.belt-divider{margin:64px 0}

/* ── Nav ── */
.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(10,10,10,0.88);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:1120px;margin:0 auto;padding:18px 32px;
  display:flex;align-items:center;justify-content:space-between;
}
.nav-mark{font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:700;letter-spacing:2.5px;color:var(--text);text-transform:uppercase}
.nav-mark span{color:var(--accent-hot)}
.nav-links{display:flex;gap:28px;flex-wrap:wrap}
.nav-links a{
  font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:600;letter-spacing:0.5px;
  color:var(--muted);text-decoration:none;text-transform:uppercase;
}
.nav-links a:hover,.nav-links a.current{color:var(--accent-hot)}
.nav-toggle{display:none}

/* ── Layout ── */
.wrap{max-width:1120px;margin:0 auto;padding:0 32px}
.section{padding:72px 0}
.section-tight{padding:40px 0}

.hero{padding:88px 0 56px}
.hero h1{margin:18px 0 22px}
.hero-cta{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 26px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;
  letter-spacing:2px;text-transform:uppercase;
  text-decoration:none;border:1px solid transparent;border-radius:2px;
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .15s ease;
}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hot);transform:translateY(-1px)}
.btn-outline{background:transparent;color:var(--text);border-color:var(--line)}
.btn-outline:hover{border-color:var(--accent-hot);color:var(--accent-hot)}

/* ── Cards / grids ── */
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}

.card{
  background:var(--card);border:1px solid var(--line);
  padding:26px 24px;
}
.card h3{color:var(--text)}
.card .tier-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px;vertical-align:middle}

.stat-block{border-left:2px solid var(--accent-hot);padding-left:18px}
.stat-block h3{margin-bottom:6px}

/* ── Feature rows (bold statement + explanation, used throughout) ── */
.feature{padding:28px 0;border-top:1px solid var(--line)}
.feature:first-of-type{border-top:none}
.feature h3{color:var(--accent-hot);margin-bottom:10px;font-size:24px}
.feature p{max-width:680px;color:var(--body-text);font-size:16px}

/* ── Table (pricing) ── */
table.price-table{width:100%;border-collapse:collapse;margin:20px 0}
table.price-table th,table.price-table td{
  text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);
  font-size:15px;color:var(--body-text);
}
table.price-table th{
  font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:2px;
  text-transform:uppercase;color:var(--muted);font-weight:700;
}
table.price-table td:first-child{font-weight:600;color:var(--text)}

/* ── FAQ ── */
.faq-item{padding:26px 0;border-top:1px solid var(--line)}
.faq-item:first-of-type{border-top:none}
.faq-item h3{font-size:18px;margin-bottom:10px;color:var(--text)}
.faq-item p{color:var(--body-text);max-width:700px}

/* ── Track list ── */
.track-row{display:flex;gap:20px;padding:22px 0;border-top:1px solid var(--line);align-items:baseline}
.track-row:first-of-type{border-top:none}
.track-name{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:19px;min-width:180px;color:var(--text)}
.track-desc{color:var(--body-text);font-size:15px}

/* ── Tech steps (numbered process, used on About / Pathway) ── */
.tech-step{display:flex;gap:22px;padding:22px 0;border-top:1px solid var(--line);align-items:flex-start}
.tech-step:first-of-type{border-top:none}
.tech-step-num{
  font-family:'Bebas Neue',sans-serif;font-size:34px;color:var(--accent-hot);
  min-width:52px;line-height:1;opacity:0.85;
}
.tech-step h3{color:var(--text);margin-bottom:6px;font-size:19px}
.tech-step p{color:var(--body-text);font-size:15px;margin:0;max-width:600px}

/* ── Proof panel (hash / verification callout) ── */
.proof-panel{
  background:var(--card);border:1px solid var(--accent-dim);
  border-left:3px solid var(--accent);
  padding:28px 30px;margin-top:28px;
}
.proof-panel .eyebrow{margin-bottom:10px}
.proof-panel h3{color:var(--text);margin-bottom:10px;font-size:20px}
.proof-panel p{color:var(--body-text);margin-bottom:0;max-width:700px}

.hash-line{
  font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--brass);
  background:rgba(0,0,0,0.35);border:1px solid var(--line);
  padding:12px 14px;margin-top:16px;word-break:break-all;letter-spacing:0.3px;
}

/* ── Certificate image block ── */
.cert-example{
  width:100%;max-width:640px;display:block;margin:0 auto;
  border:1px solid var(--line);
}
.cert-caption{
  text-align:center;color:var(--muted);font-size:13px;
  margin-top:14px;font-family:'IBM Plex Mono',monospace;letter-spacing:0.3px;
}

/* ── Scan hook (index page callout strip) ── */
.scan-hook{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line);
  padding:32px 30px;
}

/* ── Footer ── */
footer{border-top:1px solid var(--line);margin-top:80px}
.footer-inner{max-width:1120px;margin:0 auto;padding:40px 32px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px}
.footer-mark{font-family:'Barlow Condensed',sans-serif;font-size:12px;letter-spacing:1px;color:var(--muted);text-transform:uppercase}
.footer-links{display:flex;gap:22px;flex-wrap:wrap}
.footer-links a{font-size:13px;color:var(--muted);text-decoration:none}
.footer-links a:hover{color:var(--accent-hot)}
.footer-note{font-size:12px;color:var(--muted);max-width:1120px;margin:0 auto;padding:0 32px 32px}

/* ── About page backlink block ── */
.backlink-card{
  background:var(--card);border:1px solid var(--line);
  padding:32px;display:flex;align-items:center;justify-content:space-between;
  gap:24px;flex-wrap:wrap;
}
.backlink-card .btn{flex-shrink:0}

@media(max-width:760px){
  .nav-inner{align-items:flex-start;gap:14px;flex-direction:column}
  .nav-links{display:flex;gap:14px;flex-wrap:wrap}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .hero{padding:56px 0 40px}
  .section{padding:48px 0}
  .track-row{flex-direction:column;gap:6px}
  .tech-step{flex-direction:column;gap:8px}
  .backlink-card{flex-direction:column;align-items:flex-start}
  .scan-hook{flex-direction:column;align-items:flex-start}
}