/* ============================================================
   BCH BUILDER COMPENDIUM — STYLES
   Design tokens
   Color:  --bg #06100c · --panel #0c1a14 · --panel-2 #0f2018
           --green #0ac18e · --green-bright #35e6ab · --amber #e0a94c
           --ink #eaf3ee · --ink-dim #8fa89c · --line rgba(234,243,238,.09)
   Type:   Space Grotesk (display) · Inter (body) · JetBrains Mono (data/ledger)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --bg:#06100c;
  --panel:#0c1a14;
  --panel-2:#0f2018;
  --green:#0ac18e;
  --green-bright:#35e6ab;
  --green-dim:#0ac18e33;
  --amber:#e0a94c;
  --ink:#eaf3ee;
  --ink-dim:#8fa89c;
  --ink-faint:#5c7268;
  --line:rgba(234,243,238,.09);
  --line-bright:rgba(10,193,142,.35);
  --radius:14px;
  --mono:'JetBrains Mono', ui-monospace, monospace;
  --display:'Space Grotesk', sans-serif;
  --body:'Inter', sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:.001ms !important; transition-duration:.001ms !important;} }

body{
  margin:0;
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, #0ac18e14, transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 10%, #0ac18e0d, transparent 55%),
    var(--bg);
  color:var(--ink);
  font-family:var(--body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;}
img{max-width:100%; display:block;}
button{font-family:inherit;}
:focus-visible{outline:2px solid var(--green-bright); outline-offset:2px;}

.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}
section{padding:88px 0;}
@media (max-width:720px){ section{padding:56px 0;} }

.eyebrow{
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--green-bright);
  display:flex; align-items:center; gap:10px;
  margin:0 0 14px;
}
.eyebrow::before{content:''; width:22px; height:1px; background:var(--green); display:inline-block;}

h1,h2,h3,h4{font-family:var(--display); margin:0; letter-spacing:-.01em; color:var(--ink); font-weight:600;}
h2{font-size:clamp(26px,3.4vw,38px); margin-bottom:14px;}
h3{font-size:19px;}
p{color:var(--ink-dim); margin:0 0 12px;}
.lede{font-size:16.5px; max-width:640px; color:var(--ink-dim);}

.mono{font-family:var(--mono);}

/* ---------- NAV ---------- */
header.site-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(6,16,12,.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:1180px; margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{
  font-family:var(--mono); font-weight:600; font-size:15px; color:var(--ink);
  display:flex; align-items:center; gap:9px; text-decoration:none;
}
.brand .dot{width:8px; height:8px; border-radius:2px; background:var(--green); box-shadow:0 0 10px var(--green);}
.nav-links{display:flex; gap:26px; list-style:none; margin:0; padding:0;}
.nav-links a{
  font-size:14px; color:var(--ink-dim); text-decoration:none; font-weight:500;
  transition:color .15s;
}
.nav-links a:hover{color:var(--green-bright);}
.nav-cta{
  font-family:var(--mono); font-size:13px; font-weight:600;
  padding:9px 16px; border-radius:8px;
  background:var(--green); color:#04140f; text-decoration:none;
  border:1px solid var(--green);
}
.nav-cta:hover{background:var(--green-bright); border-color:var(--green-bright);}
.nav-toggle{display:none; background:none; border:1px solid var(--line); color:var(--ink); padding:8px 10px; border-radius:8px;}
@media (max-width:860px){
  .nav-links{position:fixed; inset:57px 0 auto 0; background:var(--panel); flex-direction:column; padding:18px 24px; border-bottom:1px solid var(--line); display:none; gap:16px;}
  .nav-links.open{display:flex;}
  .nav-toggle{display:block;}
}

/* ---------- HERO ---------- */
.hero{padding:96px 0 60px; position:relative; overflow:hidden;}
.hero-grid{
  position:absolute; inset:0; opacity:.35; pointer-events:none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 700px 400px at 20% 0%, black, transparent 75%);
}
.hero h1{
  font-size:clamp(36px,5.4vw,58px);
  line-height:1.05;
  max-width:760px;
  margin-bottom:20px;
}
.hero h1 .accent{color:var(--green-bright);}
.hero-actions{display:flex; gap:14px; margin-top:30px; flex-wrap:wrap;}
.btn{
  font-family:var(--mono); font-size:13.5px; font-weight:600;
  padding:13px 22px; border-radius:9px; text-decoration:none;
  display:inline-flex; align-items:center; gap:8px;
  transition:transform .15s, background .15s, border-color .15s;
  border:1px solid transparent;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--green); color:#04140f;}
.btn-primary:hover{background:var(--green-bright);}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line);}
.btn-ghost:hover{border-color:var(--line-bright); color:var(--green-bright);}
.btn-sm{padding:8px 14px; font-size:12.5px;}

.stat-strip{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; margin-top:56px;
}
.stat-cell{background:var(--panel); padding:22px 20px;}
.stat-cell .num{font-family:var(--mono); font-size:24px; color:var(--green-bright); font-weight:600;}
.stat-cell .label{font-size:12.5px; color:var(--ink-dim); margin-top:4px;}
@media (max-width:720px){ .stat-strip{grid-template-columns:1fr 1fr;} }

/* ---------- INTRO ---------- */
.intro{border-top:1px solid var(--line);}
.intro-grid{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:start;}
@media (max-width:860px){ .intro-grid{grid-template-columns:1fr;} }
.thesis{
  font-family:var(--display); font-size:clamp(20px,2.4vw,27px); color:var(--ink);
  border-left:2px solid var(--green); padding-left:20px; margin:22px 0;
  line-height:1.4;
}
.platform-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px;}
.platform-tag{
  font-family:var(--mono); font-size:12px; color:var(--ink-dim);
  border:1px solid var(--line); padding:5px 11px; border-radius:99px;
}

/* ---------- CONCEPT (two categories) ---------- */
.concept-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:36px;}
@media (max-width:720px){ .concept-grid{grid-template-columns:1fr;} }
.concept-card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px; position:relative; overflow:hidden;
}
.concept-card::after{
  content:''; position:absolute; top:-40%; right:-20%; width:220px; height:220px;
  background:radial-gradient(circle, var(--green-dim), transparent 70%);
}
.concept-card h3{margin-bottom:10px;}
.concept-card .count{font-family:var(--mono); font-size:13px; color:var(--green-bright);}

/* ---------- FILTER BAR ---------- */
.filter-bar{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  margin:34px 0 30px; padding:16px; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--radius);
}
.filter-group{display:flex; flex-wrap:wrap; gap:8px;}
.chip{
  font-family:var(--mono); font-size:12px; padding:7px 13px; border-radius:99px;
  border:1px solid var(--line); background:transparent; color:var(--ink-dim);
  cursor:pointer; transition:all .15s;
}
.chip:hover{border-color:var(--line-bright); color:var(--ink);}
.chip.active{background:var(--green); border-color:var(--green); color:#04140f; font-weight:600;}
.search-input{
  margin-left:auto; background:var(--bg); border:1px solid var(--line); color:var(--ink);
  padding:9px 14px; border-radius:9px; font-size:13.5px; min-width:200px; font-family:var(--body);
}
.search-input:focus{border-color:var(--green);}
.filter-divider{width:1px; align-self:stretch; background:var(--line);}
@media (max-width:720px){ .search-input{margin-left:0; width:100%;} .filter-divider{display:none;} }

.result-count{font-family:var(--mono); font-size:12.5px; color:var(--ink-faint); margin-bottom:18px;}

/* ---------- PROJECT GRID / CARDS ---------- */
.project-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:18px;}
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; display:flex; flex-direction:column; gap:12px;
  transition:border-color .18s, transform .18s;
  position:relative;
}
.card:hover{border-color:var(--line-bright); transform:translateY(-2px);}
.card-ledger-id{
  position:absolute; top:18px; right:20px; font-family:var(--mono); font-size:11px; color:var(--ink-faint);
}
.card-top{display:flex; justify-content:space-between; align-items:flex-start; gap:10px;}
.card-top h3{padding-right:44px;}
.badge{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
  padding:4px 9px; border-radius:5px; white-space:nowrap; font-weight:600;
}
.badge-finished{background:#0ac18e22; color:var(--green-bright); border:1px solid #0ac18e55;}
.badge-beta{background:#3aa8e022; color:#6fc3ee; border:1px solid #3aa8e055;}
.badge-unfinished{background:#e0a94c1f; color:var(--amber); border:1px solid #e0a94c55;}
.badge-archived{background:#8fa89c1a; color:var(--ink-dim); border:1px solid var(--line);}
.card p{font-size:14px; margin:0;}
.card-tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:2px;}
.tag{font-family:var(--mono); font-size:10.5px; color:var(--ink-dim); border:1px solid var(--line); padding:3px 8px; border-radius:99px;}
.card-actions{display:flex; gap:8px; margin-top:auto; padding-top:8px; flex-wrap:wrap;}

.needs-support-tags{display:flex; gap:6px; flex-wrap:wrap; margin-top:2px;}
.support-flag{font-family:var(--mono); font-size:10.5px; color:var(--amber); border:1px solid #e0a94c40; padding:3px 8px; border-radius:99px; background:#e0a94c12;}

/* ---------- NEEDS-SUPPORT SECTION ---------- */
.support-section{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, #e0a94c08, transparent 40%);
}
.support-philosophy{
  font-family:var(--display); font-size:19px; color:var(--ink); max-width:680px;
  border-left:2px solid var(--amber); padding-left:20px; margin:22px 0 30px; line-height:1.5;
}
.maintenance-list{display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 8px;}
.maintenance-list span{
  font-family:var(--mono); font-size:11.5px; color:var(--ink-faint);
  border:1px solid var(--line); padding:5px 11px; border-radius:99px;
}

/* ---------- TIMELINE ---------- */
.timeline{position:relative; margin-top:40px; padding-left:28px; border-left:1px solid var(--line);}
.timeline-item{position:relative; padding-bottom:34px;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-item::before{
  content:''; position:absolute; left:-33px; top:4px; width:9px; height:9px; border-radius:50%;
  background:var(--green); box-shadow:0 0 0 4px var(--bg), 0 0 10px var(--green);
}
.timeline-period{font-family:var(--mono); font-size:12px; color:var(--green-bright); margin-bottom:4px;}
.timeline-item h4{font-size:16.5px; margin-bottom:5px;}
.timeline-item p{font-size:14px; max-width:560px;}

/* ---------- OPEN SOURCE ---------- */
.opensource-panel{
  border:1px solid var(--line); border-radius:var(--radius); background:var(--panel);
  padding:36px; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;
}
.opensource-panel p{max-width:520px; margin:0;}

/* ---------- SUPPORT / DONATION ---------- */
.donate-panel{
  border:1px solid var(--line-bright); border-radius:var(--radius);
  background:linear-gradient(160deg, #0ac18e14, var(--panel) 55%);
  padding:36px; display:grid; grid-template-columns:1fr auto; gap:32px; align-items:center;
}
@media (max-width:720px){ .donate-panel{grid-template-columns:1fr; text-align:center;} }
.address-row{
  display:flex; align-items:center; gap:10px; margin-top:16px;
  background:var(--bg); border:1px solid var(--line); border-radius:9px; padding:12px 14px;
  font-family:var(--mono); font-size:12.5px; word-break:break-all;
}
.copy-btn{
  flex-shrink:0; background:var(--green); color:#04140f; border:none; border-radius:6px;
  padding:7px 12px; font-family:var(--mono); font-size:11.5px; font-weight:600; cursor:pointer;
}
.copy-btn:hover{background:var(--green-bright);}
#qr-canvas{background:#fff; padding:10px; border-radius:10px;}
.support-asks{display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 0;}
.ask-item{font-family:var(--mono); font-size:12.5px; color:var(--ink-dim); border:1px solid var(--line); padding:7px 13px; border-radius:99px;}

/* ---------- FUNDING BANNER ---------- */
.funding-banner{padding:48px 0;}
.funding-panel{
  border:1px solid var(--line-bright); border-radius:var(--radius);
  background:linear-gradient(160deg, #0ac18e12, var(--panel) 50%);
  padding:36px; display:flex; justify-content:space-between; align-items:center; gap:28px; flex-wrap:wrap;
}
.funding-panel h2{margin-bottom:12px;}
.funding-panel .lede{margin-bottom:16px;}

.cost-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
@media (max-width:720px){ .cost-grid{grid-template-columns:1fr;} }
.cost-card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 26px;
}
.cost-card h4{font-size:15px; margin-bottom:12px; color:var(--ink);}
.cost-list{margin:0; padding-left:18px; color:var(--ink-dim); font-size:14px;}
.cost-list li{margin-bottom:8px;}
.cost-list strong{color:var(--ink);}
.cost-note{font-size:13px; color:var(--ink-faint); margin:12px 0 0; line-height:1.45;}

.donate-label{
  font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--green-bright); margin:16px 0 6px;
}
.qr-stack{display:flex; gap:18px; flex-wrap:wrap; justify-content:center;}
.qr-label{font-family:var(--mono); font-size:11px; color:var(--ink-faint); text-align:center; margin:0 0 6px;}
#qr-canvas, #qr-canvas-token{background:#fff; padding:10px; border-radius:10px;}

.card-participate{
  display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; padding-top:10px;
  border-top:1px solid var(--line);
}
.btn-use, .btn-part{
  font-family:var(--mono); font-size:11px; padding:6px 10px; border-radius:6px;
  text-decoration:none; border:1px solid var(--line); background:transparent;
  color:var(--ink-dim); cursor:pointer; transition:all .15s;
}
.btn-use:hover, .btn-part:hover{border-color:var(--line-bright); color:var(--green-bright);}
.btn-use{border-color:#0ac18e44; color:var(--green-bright);}
.btn-use:hover{background:#0ac18e18;}

/* ---------- FEATURED ---------- */
.featured-panel{
  margin-top:28px;
  border:1px solid var(--line-bright);
  border-radius:var(--radius);
  background:linear-gradient(145deg, #0ac18e10, var(--panel) 45%);
  padding:28px 30px;
}
.featured-inner{
  display:grid; grid-template-columns:1.2fr 1fr; gap:32px; align-items:start;
}
@media (max-width:860px){ .featured-inner{grid-template-columns:1fr;} }
.featured-why{
  background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:20px 22px;
}
.featured-why h5{
  font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--green-bright); margin:0 0 10px;
}
.featured-why p{font-size:14px; margin:0; color:var(--ink-dim);}

/* ---------- INVITE BOX ---------- */
.invite-box{
  border-left:3px solid var(--amber);
  background:#e0a94c12;
  padding:16px 20px;
  margin:18px 0 22px;
  max-width:720px;
  border-radius:0 10px 10px 0;
}
.invite-box p{margin:0; color:var(--ink); font-size:15px; line-height:1.5;}
.invite-box strong{color:var(--amber);}

/* ---------- FUNDED LIST ---------- */
.funded-list{
  list-style:none; margin:28px 0 0; padding:0;
  display:flex; flex-direction:column; gap:14px; max-width:720px;
}
.funded-list li{
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:14px 18px; font-size:14.5px; color:var(--ink-dim);
}
.funded-period{
  font-family:var(--mono); font-size:12px; color:var(--green-bright);
  margin-right:10px;
}

/* ---------- WHAT DESERVES TO LIVE ---------- */
.decide-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:32px;}
@media (max-width:860px){ .decide-grid{grid-template-columns:repeat(2,1fr);} }
.decide-card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:22px;
  text-align:center;
}
.decide-card .icon{font-family:var(--mono); font-size:20px; color:var(--green-bright); margin-bottom:10px;}
.decide-card h4{font-size:14.5px; margin-bottom:6px;}
.decide-card p{font-size:12.5px; margin:0;}

/* ---------- ABOUT / MAINTAINER ---------- */
.about-panel{display:grid; grid-template-columns:1fr 1fr; gap:52px;}
@media (max-width:860px){ .about-panel{grid-template-columns:1fr;} }
.about-facts{list-style:none; margin:20px 0 0; padding:0; display:flex; flex-direction:column; gap:12px;}
.about-facts li{
  font-size:14px; color:var(--ink-dim); padding-left:18px; position:relative;
}
.about-facts li::before{content:'—'; position:absolute; left:0; color:var(--green);}
.about-facts a{color:var(--green-bright); text-decoration:none;}
.about-facts a:hover{text-decoration:underline;}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--line); padding:44px 0; margin-top:20px;}
.footer-inner{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
.footer-links{display:flex; gap:20px; list-style:none; margin:0; padding:0;}
.footer-links a{font-size:13.5px; color:var(--ink-dim); text-decoration:none;}
.footer-links a:hover{color:var(--green-bright);}
.footer-note{font-family:var(--mono); font-size:12px; color:var(--ink-faint);}

/* ---------- MODAL ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(4,10,8,.78); backdrop-filter:blur(3px);
  display:none; align-items:flex-start; justify-content:center; z-index:100; padding:40px 18px; overflow-y:auto;
}
.modal-overlay.open{display:flex;}
.modal{
  background:var(--panel); border:1px solid var(--line-bright); border-radius:16px;
  max-width:640px; width:100%; padding:34px; position:relative; margin:auto 0;
}
.modal-close{
  position:absolute; top:18px; right:18px; background:transparent; border:1px solid var(--line);
  color:var(--ink-dim); width:32px; height:32px; border-radius:8px; cursor:pointer; font-size:16px;
}
.modal-close:hover{color:var(--ink); border-color:var(--line-bright);}
.modal h3{font-size:23px; margin-bottom:6px;}
.modal-section{margin-top:20px;}
.modal-section h5{
  font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--green-bright); margin:0 0 8px;
}
.modal-section p{font-size:14.5px;}
.modal-section ul{margin:0; padding-left:18px; color:var(--ink-dim); font-size:14px;}
.modal-section ul li{margin-bottom:5px;}
.modal-actions{display:flex; gap:10px; margin-top:26px; flex-wrap:wrap;}