/* ═══════════════════════════════════════════════════════
   HOUSE OF ₿ITCOINAIRE — SHARED DESIGN SYSTEM
   One source of truth. Every page loads this.
   ═══════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --gold:#f7931a;
  --gold-dim:rgba(247,147,26,0.5);
  --gold-faint:rgba(247,147,26,0.08);
  --gold-border:rgba(247,147,26,0.2);
  --black:#06050a;
  --surface:#0f0e15;
  --card:rgba(12,10,16,0.95);
  --white:#f5f3f0;
  --cream:#f5f0e8;
  --muted:rgba(245,243,240,0.45);
  --muted2:rgba(245,243,240,0.25);
  --border:rgba(245,243,240,0.07);
  --green:#22c55e;
  --red:#ef4444;
  --font-sans:'DM Sans',sans-serif;
  --font-mono:'DM Mono',monospace;
}

html,body{
  background:var(--black);
  color:var(--white);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  scroll-behavior:smooth;
}

/* ─── NAV ─── */
.b-nav{
  position:fixed;top:0;left:0;right:0;z-index:500;
  background:rgba(6,5,10,0.92);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  padding:0 32px;height:56px;
  display:flex;align-items:center;justify-content:space-between;
}
.b-nav-logo{
  font-family:var(--font-mono);font-size:0.85rem;
  letter-spacing:0.1em;color:var(--gold);text-decoration:none;
  display:flex;align-items:center;gap:6px;
}
.b-nav-links{display:flex;gap:24px;list-style:none;}
.b-nav-links a{
  font-size:0.8rem;color:var(--muted);text-decoration:none;
  transition:color 0.2s;letter-spacing:0.04em;
}
.b-nav-links a:hover,.b-nav-links a.active{color:var(--white);}
.b-nav-cta{
  background:var(--gold);color:#000;
  font-size:0.72rem;font-weight:700;letter-spacing:0.08em;
  padding:8px 18px;text-decoration:none;text-transform:uppercase;
  transition:opacity 0.15s;white-space:nowrap;
}
.b-nav-cta:hover{opacity:0.88;}
@media(max-width:768px){.b-nav-links{display:none;}}

/* ─── HERO SYSTEM ─── */
.b-hero{
  position:relative;min-height:100dvh;
  display:flex;flex-direction:column;
  justify-content:flex-end;align-items:center;
  text-align:center;overflow:hidden;padding-bottom:80px;
}
.b-hero-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:1;z-index:0;
}
.b-hero-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 20%;
  opacity:0.7;z-index:0;
  animation:bHeroPan 20s ease-in-out infinite alternate;
}
@keyframes bHeroPan{
  0%{transform:scale(1.05) translateX(0);}
  100%{transform:scale(1.05) translateX(-2%);}
}
.b-hero-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(to bottom,
    transparent 0%,
    transparent 60%,
    rgba(6,5,10,0.8) 85%,
    rgba(6,5,10,1) 100%);
}
.b-hero-content{
  position:relative;z-index:2;
  max-width:780px;padding:40px 24px 60px;
}
.b-eyebrow{
  font-family:var(--font-mono);font-size:0.56rem;
  letter-spacing:0.26em;color:var(--gold);
  text-transform:uppercase;margin-bottom:28px;
  display:flex;align-items:center;justify-content:center;gap:12px;
}
.b-live-dot{
  width:5px;height:5px;border-radius:50%;
  background:var(--gold);display:inline-block;
  animation:bPulse 2.5s ease-in-out infinite;
}
@keyframes bPulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.3;transform:scale(0.6);}}
.b-hero-title{
  font-size:clamp(2.4rem,6vw,4.8rem);
  font-weight:300;letter-spacing:-0.03em;line-height:1.05;
  color:var(--white);margin-bottom:20px;
}
.b-hero-title em{
  font-style:normal;color:var(--gold);font-weight:700;
}
.b-hero-sub{
  font-size:clamp(1rem,2vw,1.25rem);
  color:var(--muted);font-weight:300;margin-bottom:8px;
}

/* ─── FILM GRAIN ─── */
.b-hero::after,
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 128px;
  animation: grain 0.5s steps(1) infinite;
}
@keyframes grain {
  0%,100%{background-position:0 0}
  10%{background-position:-5% -10%}
  20%{background-position:-15% 5%}
  30%{background-position:7% -25%}
  40%{background-position:-5% 25%}
  50%{background-position:-15% 10%}
  60%{background-position:15% 0%}
  70%{background-position:0 15%}
  80%{background-position:3% 35%}
  90%{background-position:-10% 10%}
}

/* ─── COUNTDOWN ─── */
.b-countdown{display:flex;gap:20px;justify-content:center;margin:28px 0;}
.b-cd-unit{display:flex;flex-direction:column;align-items:center;gap:4px;}
.b-cd-num{
  font-family:var(--font-mono);font-size:clamp(2rem,4vw,3rem);
  font-weight:700;color:var(--gold);line-height:1;
  min-width:64px;text-align:center;
}
.b-cd-label{font-size:0.6rem;letter-spacing:0.15em;color:var(--muted);text-transform:uppercase;}
.b-cd-sep{font-family:var(--font-mono);font-size:2rem;color:var(--gold-dim);align-self:flex-start;padding-top:8px;}

/* ─── BUTTONS ─── */
.b-btn{
  display:inline-block;padding:16px 40px;
  background:var(--gold);color:#000;
  font-weight:700;font-size:0.85rem;letter-spacing:0.1em;
  text-transform:uppercase;text-decoration:none;
  transition:transform 0.15s,box-shadow 0.15s;
  animation:bBtnPulse 3s ease-in-out infinite;
}
.b-btn:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(247,147,26,0.35);}
@keyframes bBtnPulse{0%,100%{box-shadow:0 0 0 0 rgba(247,147,26,0.4);}50%{box-shadow:0 0 0 12px rgba(247,147,26,0);}}
.b-btn-ghost{
  display:inline-block;padding:14px 36px;
  border:1px solid var(--gold-border);color:var(--white);
  font-size:0.8rem;letter-spacing:0.08em;text-transform:uppercase;
  text-decoration:none;transition:border-color 0.2s,color 0.2s;
}
.b-btn-ghost:hover{border-color:var(--gold);color:var(--gold);}

/* ─── SECTION DEFAULTS ─── */
.b-section{padding:100px 24px;max-width:1200px;margin:0 auto;}
.b-section-eyebrow{
  font-family:var(--font-mono);font-size:0.6rem;
  letter-spacing:0.22em;color:var(--gold);
  text-transform:uppercase;margin-bottom:20px;
}
.b-section-title{
  font-size:clamp(2rem,4vw,3.2rem);
  font-weight:300;letter-spacing:-0.02em;line-height:1.1;
  margin-bottom:24px;
}
.b-section-body{
  font-size:1.05rem;color:var(--muted);
  line-height:1.8;max-width:680px;
}

/* ─── CARDS ─── */
.b-card{
  background:var(--card);border:1px solid var(--border);
  padding:32px;transition:transform 0.3s,border-color 0.3s,box-shadow 0.3s;
}
.b-card:hover{
  transform:translateY(-4px);
  border-color:var(--gold-border);
  box-shadow:0 16px 48px rgba(247,147,26,0.08);
}

/* ─── SCROLL REVEAL ─── */
.reveal{opacity:0;transform:translateY(32px);transition:opacity 0.7s ease,transform 0.7s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}
.reveal-left{opacity:0;transform:translateX(-32px);transition:opacity 0.7s ease,transform 0.7s ease;}
.reveal-left.visible{opacity:1;transform:translateX(0);}
.reveal-right{opacity:0;transform:translateX(32px);transition:opacity 0.7s ease,transform 0.7s ease;}
.reveal-right.visible{opacity:1;transform:translateX(0);}

/* ─── STATS BAR ─── */
.b-stats{
  display:flex;gap:0;border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:rgba(6,5,10,0.95);
  overflow-x:auto;
}
.b-stat{
  flex:1;min-width:140px;padding:24px 32px;
  border-right:1px solid var(--border);text-align:center;
}
.b-stat:last-child{border-right:none;}
.b-stat-num{
  font-family:var(--font-mono);font-size:1.6rem;
  font-weight:700;color:var(--gold);display:block;
}
.b-stat-label{font-size:0.65rem;letter-spacing:0.15em;color:var(--muted);text-transform:uppercase;margin-top:4px;}

/* ─── FOOTER ─── */
.b-footer{
  border-top:1px solid var(--border);
  padding:60px 32px 40px;
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:48px;
  max-width:1200px;margin:0 auto;
}
.b-footer-brand .b-logo-mark{
  font-family:var(--font-mono);font-size:1rem;
  color:var(--gold);letter-spacing:0.08em;margin-bottom:12px;
}
.b-footer-brand p{font-size:0.8rem;color:var(--muted);line-height:1.7;max-width:280px;}
.b-footer-col h4{
  font-family:var(--font-mono);font-size:0.65rem;
  letter-spacing:0.18em;color:var(--gold);
  text-transform:uppercase;margin-bottom:16px;
}
.b-footer-col ul{list-style:none;}
.b-footer-col ul li{margin-bottom:10px;}
.b-footer-col ul li a{font-size:0.82rem;color:var(--muted);text-decoration:none;transition:color 0.2s;}
.b-footer-col ul li a:hover{color:var(--white);}
.b-footer-bottom{
  border-top:1px solid var(--border);
  padding:24px 32px;text-align:center;
  font-size:0.72rem;color:var(--muted2);
  display:flex;justify-content:space-between;align-items:center;
  max-width:1200px;margin:0 auto;
}
@media(max-width:768px){
  .b-footer{grid-template-columns:1fr;gap:32px;}
  .b-footer-bottom{flex-direction:column;gap:8px;}
}

/* ─── AUDIO BUTTON ─── */
#b-audio-btn{
  position:fixed;bottom:24px;right:24px;z-index:9999;
  width:auto;min-width:44px;padding:0 18px;height:48px;
  border-radius:24px;cursor:pointer;
  background:rgba(6,5,10,0.95);border:1.5px solid var(--gold);
  color:var(--gold);font-size:0.7rem;font-family:'DM Mono',monospace;
  letter-spacing:0.15em;text-transform:uppercase;
  display:flex;align-items:center;justify-content:center;gap:8px;
  backdrop-filter:blur(12px);
  transition:all 0.25s;
  box-shadow:0 0 28px rgba(247,147,26,0.4),0 0 8px rgba(247,147,26,0.2);
  animation:audioGlow 2s ease-in-out infinite;
}
@keyframes audioGlow{
  0%,100%{box-shadow:0 0 28px rgba(247,147,26,0.4),0 0 8px rgba(247,147,26,0.2);}
  50%{box-shadow:0 0 48px rgba(247,147,26,0.7),0 0 20px rgba(247,147,26,0.45);}
}
#b-audio-btn:hover{background:rgba(247,147,26,0.1);transform:scale(1.05);}
#b-audio-btn.playing{animation:none;box-shadow:0 0 12px rgba(247,147,26,0.2);border-color:rgba(247,147,26,0.35);padding:0 14px;font-size:1.1rem;letter-spacing:0;}

/* ─── SCROLL HINT ─── */
.b-scroll-hint{
  position:absolute;bottom:32px;left:50%;transform:translateX(-50%);
  z-index:3;display:flex;flex-direction:column;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:0.55rem;letter-spacing:0.2em;
  color:var(--muted2);text-transform:uppercase;animation:bFadeUpIn 1s 2s both;
}
.b-scroll-arrow{width:1px;height:40px;background:linear-gradient(to bottom,var(--gold-dim),transparent);animation:bScrollPulse 2s ease-in-out infinite;}
@keyframes bScrollPulse{0%,100%{opacity:1;}50%{opacity:0.3;}}
@keyframes bFadeUpIn{from{opacity:0;transform:translateX(-50%) translateY(10px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}