/* Brain Bytes — homepage-only styles (hero, product, deployment, why, advisory).
   Shared chrome/tokens live in site.css, loaded BEFORE this file. */

/* ===== Hero (brain-chip signature) + scroll-over mechanic =====
   The hero is a fixed layer pinned to the top; .content-wrapper sits above it
   (higher z-index, solid bg) and scrolls up over it, revealing/covering the
   brain-chip. This is the original site's "scroll-over" effect. */
.hero{
  background:#000 url('brain-chip-l.jpg') no-repeat center bottom;
  background-size:contain; display:flex; align-items:center;
  position:fixed; top:0; left:0; width:100%; height:72vh; z-index:0;
  /* Clear the fixed 64px nav so the vertically-centred hero text never rises
     behind it on short (mobile) viewports. */
  padding-top:64px;
}
.content-wrapper{ position:relative; z-index:1; margin-top:72vh; background:#fff; }
.hero::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0) 55%); pointer-events:none; }
.hero .wrap{ position:relative; z-index:1; }
.hero-box{ max-width:640px; animation:rise .7s ease both; }
.hero h1{ color:#fff; font-size:clamp(2.2rem,5vw,3.4rem); font-weight:300; letter-spacing:.01em; }
.hero h1 b{ font-weight:700; }
.hero p{ color:#e7edf2; font-size:clamp(1.05rem,2vw,1.3rem); margin:.9rem 0 1.6rem; opacity:.92; }
.hero .btn{ border-color:#fff; color:#fff; }
.hero .btn:hover{ background:#fff; color:var(--bb-title); }
.hero .btn:focus-visible{ outline-color:#fff; }
@keyframes rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

/* ===== Product (Sovereign AI) ===== */
.product{ background:var(--bb-panel); border-top:1px solid var(--bb-line); border-bottom:1px solid var(--bb-line); }
.product .eyebrow{ color:var(--bb-signal); }         /* pilot-programme signal */
.product-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:2.5rem; align-items:center; margin-top:2rem; }
.frame{ border:1px solid var(--bb-line); border-radius:8px; overflow:hidden; background:#fff;
        box-shadow:0 8px 30px rgba(45,90,123,.10); }
.frame video, .frame img{ display:block; width:100%; height:auto; }
.caption{ font-size:.85rem; color:var(--bb-muted); margin:.6rem 0 0; }
.product-cta{ margin-top:2.2rem; display:flex; gap:.8rem; align-items:center; flex-wrap:wrap; }
.proof{ display:grid; grid-template-columns:.9fr 1.1fr; gap:2.5rem; align-items:center; margin-top:3.5rem; }
.proof .frame img{ max-height:460px; object-fit:cover; object-position:top; }

/* ===== Deployment spectrum ===== */
.spectrum-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin-top:2rem; }
.dep{ border:1px solid var(--bb-line); border-radius:8px; padding:1.5rem; background:#fff;
      display:flex; flex-direction:column; }
.dep i{ font-size:1.6rem; color:var(--bb-blue); }
.dep h3{ font-size:1.1rem; margin:.7rem 0 .3rem; }
.dep .desc{ margin:0 0 1.25em; font-size:.95rem; color:var(--bb-muted); }  /* min gap above the tag */
.dep .tag{ align-self:flex-start; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
           color:var(--bb-signal); background:#e9f1e4; border:1px solid #cfe0c4; border-radius:99px;
           padding:.2em .7em; margin-top:auto; }   /* soft green chip; margin-top:auto pins to box bottom */
.connectivity{ display:flex; gap:1rem; align-items:flex-start; margin-top:1.75rem;
               border:1px solid var(--bb-line); border-left:4px solid var(--bb-blue);
               border-radius:6px; background:#fff; padding:1.25rem 1.4rem; }
.connectivity i{ font-size:1.4rem; color:var(--bb-blue); margin-top:.15rem; }
.connectivity b{ color:var(--bb-title); }
.connectivity p{ margin:.2rem 0 0; color:var(--bb-muted); }

/* ===== Why-sovereign checklist ===== */
.why{ background:var(--bb-title); color:#dfe8ef; }
.why h2{ color:#fff; }
.why ul{ list-style:none; padding:0; margin:1.6rem 0 0; display:grid;
         grid-template-columns:repeat(2,1fr); gap:1rem 2rem; }
.why li{ display:flex; gap:.7rem; align-items:flex-start; font-size:1.08rem; }
.why li i{ color:#7fd0a6; flex:0 0 auto; margin-top:.42em; }   /* hanging: text wraps to text, not icon */

/* ===== Advisory ladder ===== */
.ladder{ display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:center; margin-top:2rem; }
.steps{ counter-reset:step; }
.step{ display:flex; gap:1rem; padding:1.1rem 0; border-bottom:1px solid var(--bb-line); }
.step:last-child{ border-bottom:0; }
.step .n{ flex:0 0 auto; width:2rem; height:2rem; border-radius:50%; background:#3a6d96; color:#fff;
          display:grid; place-items:center; font-weight:700; font-size:.95rem; }
.step h3{ font-size:1.1rem; margin:.15rem 0 .2rem; }
.step p{ margin:0; color:var(--bb-muted); font-size:.95rem; }

/* ===== Responsive (homepage grids) ===== */
@media (max-width:820px){
  .product-grid,.proof,.ladder{ grid-template-columns:1fr; }
  .spectrum-cards,.why ul{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  /* On phones the hero headline wraps to several lines; give the fixed hero
     enough height that the nav-cleared, vertically-centred text fits without
     the top hiding behind the nav or the CTA slipping under .content-wrapper.
     Keep the scroll-over layer height in sync. */
  .hero{ height:82vh; }
  .content-wrapper{ margin-top:82vh; }
}