/* bnb-theme.css — brings About, How It Works, Security and the case study in line with the new home page.
   Loaded AFTER styles.css, so it only overrides; delete this file's <link> to roll a page back. */
:root{--t-bg:#0A1326;--t-panel:#0F1B36;--t-panel2:#16264B;--t-line:#243863;--t-ink:#E9EDF6;--t-mute:#A6B1CC;--t-gold:#E6B24C;--t-gold-hi:#F6D58B;--t-green:#8EC07C}

/* new nav (fixed, same height as the old one so page spacing is unchanged) */
.bnbn{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(10,19,38,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--t-line);padding:0 clamp(16px,4vw,40px)}
.bnbn-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.bnbn-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--t-ink);font:14px "Silkscreen","IBM Plex Mono",monospace;letter-spacing:.08em}
.bnbn-brand:hover{text-decoration:none;color:var(--t-ink)}
.bnbn-brand svg{width:24px;height:auto;display:block}
.bnbn-links{display:flex;gap:20px;align-items:center}
.bnbn-links a{color:var(--t-mute);text-decoration:none;font:500 14px "IBM Plex Sans",Arial,sans-serif;position:relative;padding:4px 0}
.bnbn-links a:not(.cta)::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--t-gold);transform:scaleX(0);transition:transform .35s cubic-bezier(.4,0,.2,1)}
.bnbn-links a:hover{color:var(--t-ink);text-decoration:none}
.bnbn-links a:not(.cta):hover::after,.bnbn-links a.active::after{transform:scaleX(1)}
.bnbn-links a.active{color:var(--t-ink)}
.bnbn-links a.cta{color:var(--t-bg);background:var(--t-gold);padding:8px 14px;border-radius:3px;font-weight:600}
.bnbn-links a.cta:hover{background:var(--t-gold-hi)}
.bnbn-btn{display:none;background:none;border:1px solid var(--t-line);color:var(--t-ink);font:500 13px "IBM Plex Mono",monospace;padding:8px 12px;border-radius:3px;min-height:40px;cursor:pointer}
@media (max-width:980px){
  .bnbn-btn{display:block}
  .bnbn-links{display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--t-panel);border-bottom:1px solid var(--t-line);padding:8px clamp(16px,4vw,40px) 16px}
  .bnbn-links.open{display:flex}
  .bnbn-links a{padding:12px 0;border-bottom:1px solid var(--t-line)}
  .bnbn-links a::after{display:none}
  .bnbn-links a.cta{margin-top:12px;text-align:center;border:0}
}

/* pages built on styles.css */
body{background:var(--t-bg);color:var(--t-ink);font-family:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif}
a{color:var(--t-gold-hi)}
.page-header{background:radial-gradient(1000px 420px at 78% 10%,rgba(230,178,76,.09),transparent 60%),var(--t-bg)}
.page-header h1,.section h2,.cta-section h2,.security-h2{font-family:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.01em;line-height:.98;color:var(--t-ink)}
.page-header h1{font-size:clamp(40px,6vw,76px)}
.section h2,.cta-section h2{font-size:clamp(32px,4.6vw,56px)}
.security-h2{font-size:clamp(26px,3vw,36px)}
.page-header .tag,.tag,.section-tag,.cta-section .section-tag,.security-tag,.result-category,.process-week,.svc-tier{font-family:"Silkscreen","IBM Plex Mono",monospace;color:var(--t-gold);letter-spacing:.12em}
.page-header .desc,.section .desc,.cta-section .desc,.security-p,.security-intro p,.about-text p,.process-desc,.arch-desc,.cap-desc{color:var(--t-mute)}
.dark-bg{background:var(--t-panel);border-top:1px solid var(--t-line);border-bottom:1px solid var(--t-line)}
.process-card,.arch-bar,.compare-card,.security-callout,.cap-card,.result-card,.founder-box{background:var(--t-bg);border-color:var(--t-line);border-radius:4px;transition:transform .25s ease,border-color .25s ease}
.process-card:hover,.arch-bar:hover,.cap-card:hover{transform:translateY(-3px);border-color:var(--t-gold)}
.process-num,.stat-num,.about-stat-num{font-family:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;color:var(--t-gold)}
.process-title,.arch-title,.cap-name{font-family:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:1.35rem}
.btn-primary{background:var(--t-gold);color:var(--t-bg);border-radius:3px;animation:bnbPulse 3.2s ease-in-out 1.5s infinite}
.btn-primary:hover{background:var(--t-gold-hi)}
@keyframes bnbPulse{50%{box-shadow:0 0 22px 3px rgba(230,178,76,.32)}}
.avatar{background:transparent;border:0;padding:0}
.footer{background:var(--t-bg);border-top:1px solid var(--t-line);color:var(--t-mute)}
/* the floating pixel agents on About: brand green, whatever color they were drawn in */
.agent-float svg [stroke]:not([stroke="none"]){stroke:var(--t-green)}
.agent-float svg [fill]:not([fill="none"]):not([fill="#0a1225"]):not([fill="#0d1a2e"]):not([fill="#060f1f"]){fill:var(--t-green)}
.px{fill:var(--t-green)}
@media (prefers-reduced-motion:reduce){.btn-primary,.process-card,.arch-bar,.cap-card{animation:none!important;transition:none!important}}