/* ============================================================
   invariant.pro shared stylesheet
   Extracted from 12 inline <style> blocks, 2026-06-05
   ============================================================ */

/* -- Fonts --------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,600;1,8..60,300;1,8..60,400&display=swap');

/* -- Reset --------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box}

/* -- Root Variables ------------------------------------------ */
:root{
  --bg:#0a0a0c;
  --bg-panel:#0f0f12;
  --bg-card:#16161a;
  --border:#1e1e24;
  --text:#e8e6e3;
  --text-dim:#8a8880;
  --text-muted:#4a4842;
  --accent:#c4392a;
  --accent-soft:rgba(196,57,42,0.12);
  --accent-border:rgba(196,57,42,0.3);
  --green:#2a8a4a;
  --green-soft:rgba(42,138,74,0.15);
  --green-border:rgba(42,138,74,0.4);
  --yellow:#d49a6a;
  --yellow-soft:rgba(212,154,106,0.15);
  --mono:'JetBrains Mono','Consolas',monospace;
  --serif:'Source Serif 4','Georgia',serif
}

/* -- Base ---------------------------------------------------- */
html{scroll-behavior:smooth}
body{
  font-family:var(--serif);
  background:var(--bg);
  color:var(--text);
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased
}
::selection{background:var(--accent);color:#fff}
*::-webkit-scrollbar{width:6px;height:6px}
*::-webkit-scrollbar-track{background:var(--bg)}
*::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
*::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}

/* -- Site Nav ------------------------------------------------ */
.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(10,10,12,0.92);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  padding:0 10vw;
  display:flex;align-items:center;justify-content:space-between;
  height:44px
}
.site-nav .nav-brand{
  font-family:var(--mono);font-size:0.6rem;
  letter-spacing:0.3em;text-transform:uppercase;
  color:var(--text-muted);text-decoration:none
}
.site-nav .nav-brand span{color:var(--accent);font-weight:700}
.site-nav .nav-links{display:flex;gap:1.5rem;align-items:center}
.site-nav .nav-links a{
  font-family:var(--mono);font-size:0.6rem;
  letter-spacing:0.1em;text-transform:uppercase;
  color:var(--text-dim);text-decoration:none;
  transition:color 0.2s;padding:4px 0
}
.site-nav .nav-links a:hover{color:var(--text)}
.site-nav .nav-links a.nav-active{color:var(--text);border-bottom:1px solid var(--accent)}
.site-nav .nav-links a.nav-cta{color:var(--accent)}

/* -- Hero ---------------------------------------------------- */
.hero{padding:120px 10vw 80px;border-bottom:1px solid var(--border)}
.hero-eyebrow{
  font-family:var(--mono);font-size:0.55rem;font-weight:400;
  letter-spacing:0.35em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:1.5rem
}
.hero-eyebrow span{color:var(--accent);font-weight:700}
.hero h1{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2rem,4vw,3rem);line-height:1.25;
  max-width:750px;margin-bottom:1.2rem
}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero-sub{font-size:1.05rem;color:var(--text-dim);max-width:620px;margin-bottom:2rem}
.hero-ctas{display:flex;gap:1.2rem;flex-wrap:wrap;align-items:center}
.hero-ctas a{
  font-family:var(--mono);font-size:0.7rem;font-weight:300;
  letter-spacing:0.1em;text-transform:uppercase;
  padding:0.75rem 2rem;text-decoration:none;
  border-radius:3px;transition:all 0.2s
}

/* -- CTAs ---------------------------------------------------- */
.cta-primary{background:var(--accent);color:#fff;border:1px solid var(--accent)}
.cta-primary:hover{opacity:0.85}
.cta-secondary{background:transparent;color:var(--text);border:1px solid var(--border)}
.cta-secondary:hover{border-color:var(--accent-border);color:var(--text)}

/* -- Sections ------------------------------------------------ */
section{padding:80px 10vw;position:relative}
.section-label{
  font-family:var(--mono);font-size:0.55rem;
  letter-spacing:0.35em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:1rem
}
section h2{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.4rem,2.5vw,2rem);
  margin-bottom:1.2rem;max-width:650px
}
section p{
  color:var(--text-dim);max-width:620px;
  margin-bottom:1.5rem;font-size:1.02rem
}
section p em{color:var(--text);font-style:italic}

/* -- Proof Box ----------------------------------------------- */
.proof-box{
  background:var(--accent-soft);
  border:1px solid var(--accent-border);
  border-radius:3px;padding:2rem 2.5rem;
  margin:2.5rem 0;max-width:860px
}
.proof-box p{color:var(--text);max-width:100%;font-size:1rem;line-height:1.8;margin-bottom:0}
.proof-box strong{color:var(--accent);font-weight:700}

/* -- Products Grid ------------------------------------------- */
.products-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;max-width:960px;margin:2.5rem 0;
  background:var(--border);border:1px solid var(--border);
  border-radius:3px;overflow:hidden
}
.product-card{
  background:var(--bg-card);padding:2rem;
  transition:background 0.3s;text-decoration:none;display:block
}
.product-card:hover{background:#1a1a1f}
.product-tag{
  font-family:var(--mono);font-size:0.5rem;
  letter-spacing:0.2em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:0.6rem;display:block
}
.product-title{
  font-family:var(--mono);font-size:0.8rem;font-weight:500;
  color:var(--text);display:block;margin-bottom:0.5rem
}
.product-desc{font-size:0.85rem;color:var(--text-dim);line-height:1.55}

/* -- Stats Row ----------------------------------------------- */
.stats-row{display:flex;gap:3rem;flex-wrap:wrap;margin:2.5rem 0}
.stat{border-left:2px solid var(--border);padding-left:1rem}
.stat-num{
  font-family:var(--mono);font-size:1.7rem;font-weight:700;
  color:var(--text);display:block;line-height:1.2
}
.stat-label{
  font-family:var(--mono);font-size:0.6rem;
  letter-spacing:0.15em;text-transform:uppercase;
  color:var(--text-dim)
}
.stat-accent .stat-num{color:var(--accent)}

/* -- Stats Grid ---------------------------------------------- */
.stats-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1px;background:var(--border);border:1px solid var(--border);
  border-radius:3px;overflow:hidden;max-width:960px;margin:2.5rem 0
}
.stat-card{background:var(--bg-card);padding:1.5rem}
.stat-val{
  font-family:var(--mono);font-size:1.5rem;font-weight:700;
  color:var(--text);display:block;line-height:1.2;margin-bottom:0.3rem
}
.stat-val.accent{color:var(--accent)}

/* -- Quote Block --------------------------------------------- */
.quote-block{
  background:var(--bg-panel);
  border-left:3px solid var(--accent);
  padding:2rem 2.5rem;margin:2.5rem 0;max-width:860px
}
.quote-block p{
  color:var(--text-dim);font-style:italic;
  font-size:1.05rem;line-height:1.8;
  max-width:100%;margin-bottom:0.8rem
}
.quote-source{
  font-family:var(--mono);font-size:0.6rem;
  letter-spacing:0.15em;text-transform:uppercase;
  color:var(--text-muted)
}

/* -- Domain Tags --------------------------------------------- */
.domains{display:flex;gap:0.8rem;flex-wrap:wrap;margin-top:1.5rem}
.domain-tag{
  font-family:var(--mono);font-size:0.6rem;
  letter-spacing:0.15em;text-transform:uppercase;
  padding:0.35rem 0.8rem;border:1px solid var(--border);
  border-radius:2px;color:var(--text-dim);
  transition:border-color 0.3s,color 0.3s
}
.domain-tag:hover{border-color:var(--accent-border);color:var(--text)}

/* -- Method Block -------------------------------------------- */
.method-block{
  background:var(--bg-panel);border:1px solid var(--border);
  border-radius:3px;padding:2rem;max-width:800px;margin:2rem 0
}
.method-block h3{
  font-family:var(--mono);font-size:0.7rem;
  letter-spacing:0.12em;text-transform:uppercase;
  color:var(--text);margin-bottom:1rem
}
.method-block p{font-size:0.9rem;color:var(--text-dim);line-height:1.7;max-width:100%}

/* -- Demo Grid ----------------------------------------------- */
.demo-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--border);border:1px solid var(--border);
  border-radius:3px;overflow:hidden;margin:2rem 0;max-width:900px
}
.demo-card{
  background:var(--bg-card);padding:1.5rem;
  cursor:pointer;transition:background 0.2s
}
.demo-card:hover{background:#1c1c22}
.demo-card.selected{background:#1a1a1f;border-left:3px solid var(--accent)}
.demo-card.loading{opacity:0.6;pointer-events:none}
.demo-card .card-label{
  font-family:var(--mono);font-size:0.65rem;font-weight:500;
  color:var(--text);display:block;margin-bottom:0.4rem
}
.demo-card .card-desc{font-size:0.8rem;color:var(--text-dim);line-height:1.5}
.demo-card .card-action{
  font-family:var(--mono);font-size:0.55rem;
  letter-spacing:0.1em;text-transform:uppercase;
  color:var(--accent);margin-top:0.6rem;display:block
}

/* -- Result Panel -------------------------------------------- */
.result-panel{
  background:var(--bg-panel);border:1px solid var(--border);
  border-radius:3px;padding:2.5rem;margin:2rem 0;
  max-width:900px;display:none
}
.result-panel.visible{display:block}
.result-header{
  display:flex;align-items:center;gap:1rem;
  margin-bottom:1.5rem;flex-wrap:wrap
}
.result-verdict{
  font-family:var(--mono);font-size:0.8rem;
  letter-spacing:0.1em;text-transform:uppercase;
  padding:4px 12px;border-radius:2px
}
.result-case{font-family:var(--serif);font-size:1.1rem;color:var(--text-dim)}
.result-time{font-family:var(--mono);font-size:0.6rem;color:var(--text-muted);margin-left:auto}

/* -- Verdict Badges ------------------------------------------ */
.verdict-badge{
  font-size:0.6rem;letter-spacing:0.08em;text-transform:uppercase;
  padding:3px 10px;border-radius:2px;
  background:var(--green-soft);color:var(--green);
  border:1px solid var(--green-border);white-space:nowrap
}
.verdict-safe{background:var(--green-soft);color:var(--green);border:1px solid var(--green-border)}
.verdict-unsafe{background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-border)}
.verdict-rejected{background:var(--yellow-soft);color:var(--yellow);border:1px solid rgba(212,154,106,0.4)}

/* -- Metrics Grid -------------------------------------------- */
.metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-bottom:1.5rem}
.metric{border-left:2px solid var(--border);padding-left:0.8rem}
.metric-val{
  font-family:var(--mono);font-size:1.3rem;font-weight:700;
  color:var(--text);display:block
}
.metric-label{
  font-family:var(--mono);font-size:0.55rem;
  letter-spacing:0.1em;text-transform:uppercase;
  color:var(--text-dim)
}

/* -- Failures / Obstructions --------------------------------- */
.failures-section{margin-top:1.5rem}
.failures-title{
  font-family:var(--mono);font-size:0.6rem;
  letter-spacing:0.15em;text-transform:uppercase;
  color:var(--accent);margin-bottom:0.6rem
}
.failure-item{
  font-family:var(--mono);font-size:0.75rem;
  color:var(--text-dim);padding:4px 0;
  border-bottom:1px solid var(--border)
}
.obstruction-tag{
  font-family:var(--mono);font-size:0.6rem;
  background:var(--accent-soft);color:var(--accent);
  border:1px solid var(--accent-border);
  padding:2px 8px;border-radius:2px;
  margin:2px 4px 2px 0;display:inline-block
}

/* -- Receipt Section ----------------------------------------- */
.receipt-section{margin-top:2rem;border-top:1px solid var(--border);padding-top:1.5rem}
.receipt-title{
  font-family:var(--mono);font-size:0.6rem;
  letter-spacing:0.15em;text-transform:uppercase;
  color:var(--green);margin-bottom:0.8rem
}
.receipt-json{
  background:var(--bg);border:1px solid var(--border);
  border-radius:3px;padding:1rem;
  font-family:var(--mono);font-size:0.65rem;
  color:var(--text-dim);line-height:1.6;
  max-height:400px;overflow-y:auto;
  white-space:pre-wrap;word-break:break-all
}
.receipt-actions{margin-top:0.8rem;display:flex;gap:0.8rem}
.receipt-btn{
  font-family:var(--mono);font-size:0.55rem;
  letter-spacing:0.1em;text-transform:uppercase;
  padding:4px 12px;background:transparent;
  color:var(--text-dim);border:1px solid var(--border);
  border-radius:2px;cursor:pointer;transition:all 0.2s
}
.receipt-btn:hover{border-color:var(--accent-border);color:var(--text)}

/* -- Viz Actions --------------------------------------------- */
.viz-actions{display:flex;gap:12px;margin:2rem 0 1.5rem;flex-wrap:wrap}
.viz-btn{
  font-family:var(--mono);font-size:0.75rem;
  letter-spacing:0.12em;text-transform:uppercase;
  padding:10px 22px;background:transparent;
  color:#e8e6e3;border:1.5px solid rgba(232,230,227,0.25);
  border-radius:3px;cursor:pointer;transition:all 0.3s ease
}
.viz-btn:hover{
  color:#fff;border-color:rgba(232,230,227,0.5);
  background:rgba(232,230,227,0.04);
  box-shadow:0 0 20px rgba(232,230,227,0.08)
}
.viz-btn:active{transform:scale(0.97)}
.viz-btn-sep{width:1px;background:var(--border);align-self:stretch;margin:0 4px}
.util-btn{
  font-family:var(--mono);font-size:0.6rem;
  letter-spacing:0.08em;text-transform:uppercase;
  padding:8px 16px;background:transparent;
  color:var(--text-muted);border:1px solid var(--border);
  border-radius:2px;cursor:pointer;transition:all 0.2s
}
.util-btn:hover{border-color:var(--accent-border);color:var(--text-dim)}

/* -- Upload Section ------------------------------------------ */
.upload-section{
  background:var(--bg-panel);border:1px solid var(--border);
  border-radius:3px;padding:2.5rem;margin:2rem 0;max-width:900px
}
.upload-form{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:1.5rem}
.upload-drop{
  border:2px dashed var(--border);border-radius:3px;
  padding:2rem;text-align:center;cursor:pointer;
  transition:border-color 0.2s,background 0.2s;
  min-height:120px;display:flex;flex-direction:column;
  align-items:center;justify-content:center
}
.upload-drop:hover,.upload-drop.dragover{border-color:var(--accent);background:rgba(196,57,42,0.04)}
.upload-drop.has-file{border-color:var(--green);border-style:solid;background:var(--green-soft)}
.upload-drop-text{font-family:var(--mono);font-size:0.7rem;color:var(--text-muted);line-height:1.8}
.upload-drop-text strong{color:var(--text-dim);display:block;font-size:0.8rem;margin-bottom:4px}
.upload-drop.has-file .upload-drop-text{color:var(--green)}
.upload-run-btn{
  font-family:var(--mono);font-size:0.75rem;
  letter-spacing:0.1em;text-transform:uppercase;
  padding:12px 2.5rem;background:var(--accent);color:#fff;
  border:none;border-radius:3px;cursor:pointer;
  transition:opacity 0.2s;margin-top:1.5rem;display:inline-block
}
.upload-run-btn:hover{opacity:0.85}
.upload-run-btn:disabled{background:#333;color:#666;cursor:not-allowed}
.upload-status{font-family:var(--mono);font-size:0.7rem;color:var(--text-muted);margin-top:0.8rem;min-height:20px}
.privacy-note{
  font-family:var(--mono);font-size:0.6rem;color:var(--text-muted);
  margin-top:1rem;padding-top:0.8rem;border-top:1px solid var(--border)
}

/* -- Engine Note --------------------------------------------- */
.engine-note{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:3px;padding:1.2rem 1.5rem;margin:1.5rem 0;
  max-width:900px;font-family:var(--mono);font-size:0.7rem;
  color:var(--text-dim);line-height:1.6
}
.engine-note a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-border)}
.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:6px}
.status-live{background:var(--green)}
.status-offline{background:var(--accent)}

/* -- Post-Result CTA ----------------------------------------- */
.post-result-cta{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:3px;padding:1.5rem 2rem;margin-top:1.5rem;max-width:900px
}
.post-result-cta p{color:var(--text-dim);font-size:0.95rem;max-width:100%;margin-bottom:1rem}
.post-result-cta .cta-row{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.post-result-cta .cta-dl{
  font-family:var(--mono);font-size:0.65rem;
  letter-spacing:0.1em;text-transform:uppercase;
  padding:0.6rem 1.8rem;background:var(--accent);color:#fff;
  text-decoration:none;border-radius:3px;border:1px solid var(--accent);
  transition:opacity 0.2s;display:inline-block
}
.post-result-cta .cta-dl:hover{opacity:0.85}
.post-result-cta .cta-alt{
  font-family:var(--mono);font-size:0.6rem;
  color:var(--text-muted);text-decoration:none;
  border-bottom:1px solid var(--border);transition:color 0.2s
}
.post-result-cta .cta-alt:hover{color:var(--text-dim);border-color:var(--text-muted)}

/* -- Parse Summary ------------------------------------------- */
.parse-summary{
  background:var(--bg);border:1px solid var(--border);
  border-radius:3px;padding:1.2rem 1.5rem;margin-top:1.5rem;
  font-family:var(--mono);font-size:0.7rem;line-height:1.8;
  color:var(--text-dim);display:none
}
.parse-summary.visible{display:block}
.parse-summary .ps-label{
  color:var(--text-muted);font-size:0.55rem;
  letter-spacing:0.15em;text-transform:uppercase;
  display:block;margin-bottom:0.5rem
}
.parse-summary .ps-val{color:var(--text)}

/* -- Scroll Cue (homepage) ----------------------------------- */
.scroll-cue{
  position:absolute;bottom:36px;left:50%;
  transform:translateX(-50%);
  font-family:var(--mono);font-size:0.55rem;
  color:var(--text-muted);letter-spacing:0.3em;text-transform:uppercase
}
.scroll-cue::after{
  content:'';display:block;width:1px;height:24px;
  background:var(--text-muted);margin:8px auto 0;
  animation:pulse 2s ease infinite
}

/* -- SC Section (panel bg) ----------------------------------- */
.sc-section{
  background:var(--bg-panel);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border)
}

/* -- Site Footer --------------------------------------------- */
.site-footer{
  padding:50px 10vw;border-top:1px solid var(--border);
  display:flex;justify-content:space-between;
  align-items:flex-end;flex-wrap:wrap;gap:2rem
}
.footer-contact{font-family:var(--mono);font-size:0.8rem;color:var(--text-dim);line-height:1.8}
.footer-contact a{
  color:var(--text);text-decoration:none;
  border-bottom:1px solid var(--text-muted);transition:border-color 0.2s
}
.footer-contact a:hover{border-color:var(--accent)}
.footer-links{display:flex;gap:1.5rem}
.footer-links a{
  font-family:var(--mono);font-size:0.65rem;
  letter-spacing:0.1em;color:var(--text-muted);
  text-decoration:none;transition:color 0.2s
}
.footer-links a:hover{color:var(--text)}
.footer-brand{
  font-family:var(--mono);font-size:0.55rem;
  color:var(--text-muted);letter-spacing:0.2em;
  text-transform:uppercase;text-align:right
}

/* -- Animations ---------------------------------------------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:0.3}50%{opacity:0.8}}
.reveal{opacity:0;transform:translateY(24px);transition:opacity 0.7s ease,transform 0.7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* -- Responsive ---------------------------------------------- */
@media(max-width:768px){
  .site-nav{padding:0 5vw}
  .site-nav .nav-links{gap:0.7rem}
  .site-nav .nav-links a{font-size:0.5rem}
  .hero{padding:80px 7vw 60px}
  section{padding:60px 7vw}
  .products-grid{grid-template-columns:1fr 1fr}
  .stats-row{gap:1.5rem}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .demo-grid{grid-template-columns:1fr}
  .metrics-grid{grid-template-columns:repeat(2,1fr)}
  .upload-form{grid-template-columns:1fr}
  .site-footer{flex-direction:column;align-items:flex-start}
  .footer-brand{text-align:left}
}