/* AlpenRiderChain — Unified Design System v1
   All landing pages share these styles.
   Colors: #050810 bg, #39FF14 primary, #00d4ff cyan, #a855f7 purple, #FFD700 gold
*/

/* ═══ RESET & BASE ═══ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px}
body{background:#050810;color:#c8cad0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;line-height:1.7;-webkit-font-smoothing:antialiased}
::selection{background:#39FF14;color:#050810}
a{color:#39FF14;text-decoration:none;transition:opacity 0.2s}
a:hover{opacity:0.85}
img{max-width:100%;height:auto}

/* ═══ TYPOGRAPHY ═══ */
h1,h2,h3,h4{font-family:'JetBrains Mono',ui-monospace,monospace;color:#e8eaf0;line-height:1.3}
h1{font-size:clamp(1.5rem,4vw,2.4rem);font-weight:800;letter-spacing:-0.5px}
h2{font-size:clamp(1rem,2.5vw,1.25rem);font-weight:700;margin-top:3rem;margin-bottom:0.8rem;padding-bottom:0.5rem;border-bottom:1px solid rgba(57,255,20,0.12)}
h3{font-size:clamp(0.85rem,2vw,0.95rem);font-weight:600;color:#39FF14;margin-top:1.5rem;margin-bottom:0.4rem}
p{font-size:clamp(0.78rem,1.8vw,0.88rem);margin-bottom:0.7rem;color:#888}
code{font-family:'JetBrains Mono',monospace;background:rgba(57,255,20,0.06);color:#39FF14;padding:1px 6px;border-radius:3px;font-size:0.78rem}
strong{color:#e8eaf0}

/* ═══ LAYOUT ═══ */
.container{max-width:760px;margin:0 auto;padding:0 1rem 3rem}
.container-wide{max-width:960px;margin:0 auto;padding:0 1rem 3rem}

/* ═══ STICKY NAV ═══ */
.site-nav{position:sticky;top:0;z-index:100;background:rgba(5,8,16,0.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid #111;padding:0}
.site-nav .nav-inner{max-width:760px;margin:0 auto;padding:0.7rem 1rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:0.3rem}
.site-nav .logo{font-family:'JetBrains Mono',monospace;font-size:1rem;font-weight:800;color:#39FF14;letter-spacing:3px;text-decoration:none;flex-shrink:0}
.site-nav .nav-right{display:flex;align-items:center;gap:0.4rem;flex-wrap:wrap}
.site-nav .nav-links{display:flex;gap:0.3rem}
.site-nav .nav-links a{font-family:'JetBrains Mono',monospace;font-size:0.65rem;color:#555;border:1px solid #1a1e30;padding:0.25rem 0.6rem;border-radius:50px;text-decoration:none;letter-spacing:0.5px;transition:all 0.25s}
.site-nav .nav-links a:hover,.site-nav .nav-links a.active{border-color:rgba(57,255,20,0.5);color:#39FF14}
.lang-switch{display:flex;gap:2px;margin-left:0.5rem}
.lang-btn{font-family:'JetBrains Mono',monospace;font-size:0.55rem;color:#444;background:transparent;border:1px solid transparent;padding:0.15rem 0.35rem;border-radius:3px;cursor:pointer;transition:all 0.2s;letter-spacing:0.5px}
.lang-btn:hover{color:#888}
.lang-btn.active{color:#39FF14;border-color:rgba(57,255,20,0.3)}

/* ═══ HERO ═══ */
.hero{text-align:center;padding:4rem 1rem 2rem}
.hero .badge-label{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:0.55rem;letter-spacing:3px;color:#39FF14;border:1px solid rgba(57,255,20,0.25);padding:0.3rem 1rem;border-radius:50px;margin-bottom:1.5rem;text-transform:uppercase}
.hero h1 .accent{color:#39FF14}
.hero p{color:#888;font-size:clamp(0.8rem,2vw,0.95rem);max-width:520px;margin:0.5rem auto 0}

/* ═══ BUTTONS ═══ */
.btn{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:0.72rem;padding:0.5rem 1.4rem;border-radius:50px;border:1px solid #39FF14;color:#39FF14;text-decoration:none;transition:all 0.3s;letter-spacing:1px;text-transform:uppercase;cursor:pointer;background:transparent}
.btn:hover{background:rgba(57,255,20,0.08);box-shadow:0 0 12px rgba(57,255,20,0.15);text-decoration:none;opacity:1}
.btn-cyan{border-color:#00d4ff;color:#00d4ff}
.btn-cyan:hover{background:rgba(0,212,255,0.08);box-shadow:0 0 12px rgba(0,212,255,0.15)}
.btn-gold{border-color:#FFD700;color:#FFD700}
.btn-gold:hover{background:rgba(255,215,0,0.08);box-shadow:0 0 12px rgba(255,215,0,0.15)}
.btn-solid{background:#39FF14;color:#050810;border-color:#39FF14;font-weight:700}
.btn-solid:hover{background:#2ee00f;box-shadow:0 0 20px rgba(57,255,20,0.3)}

/* ═══ STAT CARDS ═══ */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0.6rem;margin:2rem 0}
.stat-card{border:1px solid #1a1e30;border-radius:10px;padding:0.8rem 0.6rem;text-align:center;transition:all 0.3s;position:relative;overflow:hidden}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#39FF14,transparent);opacity:0;transition:opacity 0.3s}
.stat-card:hover::before{opacity:1}
.stat-card:hover{border-color:rgba(57,255,20,0.25);transform:translateY(-1px)}
.stat-card .num{font-family:'JetBrains Mono',monospace;font-size:clamp(1rem,3vw,1.4rem);font-weight:900;color:#39FF14;display:block}
.stat-card .label{font-family:'JetBrains Mono',monospace;font-size:0.55rem;color:#444;letter-spacing:1px;margin-top:0.2rem;display:block;text-transform:uppercase}
.stat-card .live-dot{position:absolute;top:6px;right:8px;width:5px;height:5px;border-radius:50%;background:#39FF14;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.3}}

/* ═══ CARDS (generic) ═══ */
.card{border:1px solid #1a1e30;border-radius:10px;padding:1rem;transition:all 0.3s}
.card:hover{border-color:rgba(57,255,20,0.25);transform:translateY(-1px)}
.card-grid{display:grid;gap:0.8rem;margin:1rem 0}
.card-grid-2{grid-template-columns:repeat(2,1fr)}
.card-grid-3{grid-template-columns:repeat(3,1fr)}
.card-grid-4{grid-template-columns:repeat(4,1fr)}

/* ═══ SEP / TAG CARDS ═══ */
.tag-label{font-family:'JetBrains Mono',monospace;font-size:0.6rem;color:#39FF14;letter-spacing:1px;display:block;margin-bottom:0.3rem;text-transform:uppercase}
.card-title{font-size:0.85rem;color:#e8eaf0;font-weight:600;margin-bottom:0.3rem}
.card-desc{font-size:0.75rem;color:#666;line-height:1.5}
.status-badge{font-family:'JetBrains Mono',monospace;font-size:0.55rem;padding:2px 8px;border-radius:50px;display:inline-block;margin-top:0.5rem}
.status-live{background:rgba(57,255,20,0.1);color:#39FF14;border:1px solid rgba(57,255,20,0.2)}

/* ═══ SOROBAN BOX ═══ */
.highlight-box{border:1px solid rgba(57,255,20,0.15);border-radius:12px;padding:1.3rem;margin:1.5rem 0;position:relative;overflow:hidden}
.highlight-box::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(57,255,20,0.02),transparent);pointer-events:none}
.fn-tags{display:flex;gap:0.4rem;flex-wrap:wrap;margin:0.8rem 0}
.fn-tag{font-family:'JetBrains Mono',monospace;font-size:0.65rem;background:rgba(57,255,20,0.06);border:1px solid rgba(57,255,20,0.12);color:#39FF14;padding:0.25rem 0.6rem;border-radius:6px}

/* ═══ FLOW CHAIN (Pipeline) ═══ */
.flow-chain{display:flex;align-items:center;gap:0.3rem;flex-wrap:wrap;margin:1rem 0;padding:1rem;border:1px solid #1a1e30;border-radius:10px}
.flow-step{font-family:'JetBrains Mono',monospace;font-size:0.68rem;padding:0.4rem 0.7rem;border-radius:6px;white-space:nowrap;cursor:pointer;transition:all 0.2s}
.flow-step:hover{filter:brightness(1.2)}
.flow-step.sensor{background:rgba(0,180,255,0.08);border:1px solid rgba(0,180,255,0.15);color:#00b4ff}
.flow-step.verify{background:rgba(255,180,0,0.08);border:1px solid rgba(255,180,0,0.15);color:#ffb400}
.flow-step.chain{background:rgba(57,255,20,0.08);border:1px solid rgba(57,255,20,0.15);color:#39FF14}
.flow-step.social{background:rgba(168,85,247,0.08);border:1px solid rgba(168,85,247,0.15);color:#a855f7}
.step-info{font-size:0.75rem;color:#a0a8b8;padding:0.5rem 0.8rem;margin:0.3rem 0;line-height:1.5;background:rgba(10,14,25,0.5);border-radius:6px;border-left:2px solid #39FF14;width:100%;display:none}
.flow-arrow{color:#333;font-size:0.7rem}

/* ═══ TABLES ═══ */
.data-table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:0.8rem}
.data-table th{font-family:'JetBrains Mono',monospace;font-size:0.6rem;letter-spacing:1px;color:#39FF14;text-align:left;padding:0.5rem 0.7rem;border-bottom:1px solid rgba(57,255,20,0.12);text-transform:uppercase}
.data-table td{padding:0.5rem 0.7rem;border-bottom:1px solid #111;color:#888;font-size:0.78rem}
.data-table td:first-child{color:#c8cad0;font-family:'JetBrains Mono',monospace}
.data-table tr:hover{background:rgba(57,255,20,0.02)}

/* ═══ LINK CARDS (grid) ═══ */
.link-card{border:1px solid #1a1e30;border-radius:10px;padding:0.9rem;display:flex;align-items:center;gap:0.7rem;transition:all 0.3s;text-decoration:none}
.link-card:hover{border-color:rgba(57,255,20,0.3);transform:translateY(-1px);opacity:1}
.link-card i{font-size:1.1rem;color:#39FF14;width:24px;text-align:center;flex-shrink:0}
.link-card .link-title{font-size:0.82rem;color:#e8eaf0;font-weight:600}
.link-card .link-sub{font-size:0.65rem;color:#555;font-family:'JetBrains Mono',monospace}

/* ═══ BUDGET BAR ═══ */
.budget-bar{height:26px;border-radius:6px;overflow:hidden;display:flex;margin:0.8rem 0}
.budget-bar div{display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:0.5rem;color:#050810;font-weight:700;transition:all 0.3s}
.budget-bar div:hover{filter:brightness(1.15)}

/* ═══ FAQ ═══ */
.faq-item{margin-bottom:1.2rem}
.faq-item h3{font-size:clamp(0.82rem,2vw,0.95rem);margin-bottom:0.3rem;color:#e8eaf0;font-weight:600;cursor:default}
.faq-item p{font-size:clamp(0.75rem,1.7vw,0.85rem);color:#888;line-height:1.6}

/* ═══ BLOG POST CARDS ═══ */
.post-card{border:1px solid #1a1e30;border-radius:10px;padding:1.2rem;margin-bottom:1rem;transition:border-color 0.3s}
.post-card:hover{border-color:rgba(57,255,20,0.2)}
.post-card .meta{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem}
.post-card .meta .date{font-family:'JetBrains Mono',monospace;font-size:0.65rem;color:#555}
.post-card .meta .source{font-family:'JetBrains Mono',monospace;font-size:0.55rem;padding:2px 8px;border-radius:50px;letter-spacing:0.5px}
.post-card h2{font-size:clamp(0.85rem,2vw,1rem);margin:0 0 0.3rem;border:none;padding:0}
.post-card .body{font-size:clamp(0.75rem,1.7vw,0.85rem);color:#888;line-height:1.5}
.post-card .tags{display:flex;gap:0.3rem;flex-wrap:wrap;margin-top:0.6rem}
.post-card .tag{font-family:'JetBrains Mono',monospace;font-size:0.55rem;color:#555;border:1px solid #1a1e30;padding:2px 8px;border-radius:50px}

/* ═══ FOOTER ═══ */
.site-footer{border-top:1px solid #111;margin-top:3rem;padding:2rem 1rem;text-align:center}
.site-footer p{font-family:'JetBrains Mono',monospace;font-size:0.65rem;color:#333;margin-bottom:0.3rem}
.site-footer a{color:#555}
.site-footer a:hover{color:#39FF14}

/* ═══ WAITLIST FORM ═══ */
.email-form{display:flex;gap:0.5rem;max-width:420px;margin:0 auto}
.email-form input{flex:1;background:rgba(10,15,30,0.7);border:1px solid rgba(57,255,20,0.2);border-radius:50px;padding:0.6rem 1.1rem;color:#e8eaf0;font-size:0.82rem;outline:none;transition:border-color 0.3s}
.email-form input:focus{border-color:#39FF14}
.email-form button{font-family:'JetBrains Mono',monospace;font-size:0.72rem;background:#39FF14;color:#050810;border:none;border-radius:50px;padding:0.6rem 1.3rem;cursor:pointer;font-weight:700;white-space:nowrap;transition:all 0.3s;letter-spacing:0.5px}
.email-form button:hover{background:#2ee00f;box-shadow:0 0 15px rgba(57,255,20,0.3)}

/* ═══ RESPONSIVE ═══ */
@media(max-width:640px){
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .card-grid-2,.card-grid-3,.card-grid-4{grid-template-columns:1fr}
  .hero{padding:2.5rem 1rem 1.5rem}
  .flow-chain{flex-direction:column;gap:0.4rem}
  .flow-arrow{display:none}
  .flow-step{width:100%;text-align:center}
  .step-info{border-left:none;border-top:2px solid #39FF14}
  .data-table{font-size:0.7rem}
  .data-table th,.data-table td{padding:0.35rem 0.5rem}
  .email-form{flex-direction:column}
  .email-form input,.email-form button{border-radius:8px;padding:0.7rem 1rem}
  .site-nav .nav-links a{font-size:0.58rem;padding:0.2rem 0.45rem}
  .lang-btn{font-size:0.5rem}
  .budget-bar div{font-size:0.4rem}
  h2{margin-top:2rem}
}

/* ═══ UTILITIES ═══ */
.text-neon{color:#39FF14}
.text-cyan{color:#00d4ff}
.text-purple{color:#a855f7}
.text-gold{color:#FFD700}
.text-flame{color:#ff6b35}
.text-muted{color:#555}
.mono{font-family:'JetBrains Mono',monospace}
.mt-0{margin-top:0}
.mb-0{margin-bottom:0}
.mt-1{margin-top:0.5rem}
.mt-2{margin-top:1rem}
.center{text-align:center}
.break-all{word-break:break-all}
