/* =====================================================================
   BinEye the-gates - STEEL-FIRST REFRESH (scoped additions)
   Loaded AFTER main.css. Reuses tokens.css custom properties; does not
   fork the design system. Self-contained, static-freeze safe, no external
   dependencies.

   Adds:
     - intro veil (one-shot eagle opener that vanishes; JS-activated so the
       page is fully visible if JS is stripped by server security)
     - Blues-Inside tech-strength treatment (subtle TEXT accent only, no
       logo lockup, pending expanded co-marketing consent)
     - eagle-eye module visual (device intentionally not shown)
     - patent tags, About/BetterGroup, price-on-enquiry
   ===================================================================== */

:root{
  --blues: #4AA8FF;                       /* Blues ingredient accent - TEXT only */
  --blues-dim: rgba(74,168,255,0.62);
}

/* ---- INTRO VEIL: one-shot eagle opener, then vanishes ---------------
   Default display:none. JS adds .is-active at load (motion allowed, once
   per session), plays the eagle->camera morph, then .is-hiding fades it
   out and JS removes it. If JS never runs, the veil stays hidden and the
   page renders normally - safe under a security-stripped static deploy. */
#intro-veil{
  display:none; position:fixed; inset:0; z-index:200;
  align-items:center; justify-content:center; background:var(--ink);
}
#intro-veil.is-active{ display:flex; opacity:1;
  transition:opacity 720ms cubic-bezier(0.16,1,0.3,1); }
#intro-veil.is-hiding{ opacity:0; pointer-events:none; }
#intro-veil video{ width:100%; height:100%; object-fit:cover; }
.intro-veil-scrim{ position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 50% 45%, transparent 42%, rgba(10,22,40,0.6) 100%); }
.intro-skip{
  position:absolute; bottom:28px; right:28px; z-index:2;
  font:500 0.72rem/1 'IBM Plex Mono',monospace; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--bone-dim); cursor:pointer;
  background:rgba(255,255,255,0.06); border:1px solid var(--edge);
  border-radius:4px; padding:10px 16px;
  transition:color .18s ease, border-color .18s ease;
}
.intro-skip:hover, .intro-skip:focus-visible{ color:var(--raptor); border-color:var(--raptor); }
html.intro-active{ overflow:hidden; }
@media (prefers-reduced-motion: reduce){ #intro-veil{ display:none !important; } }

/* ---- BLUES INSIDE / TECH STRENGTH ----------------------------------- */
.blues-badge{
  display:inline-flex; align-items:center; gap:9px;
  font:700 0.78rem/1 'IBM Plex Mono',monospace; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--blues);
  border:1px solid var(--blues-dim); border-radius:4px; padding:9px 15px;
}
.blues-badge::before{ content:""; width:9px; height:9px; border-radius:50%;
  background:var(--blues); box-shadow:0 0 10px var(--blues); }
.tech-strength-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:24px; margin-top:40px;
}
.tech-strength-item .tile-title{ margin-bottom:8px; }
.tech-note{ color:var(--bone-dim); font-size:0.9rem; margin-top:16px; }

/* ---- EAGLE-EYE MODULE VISUAL (device intentionally not shown) -------- */
.eagle-eye-figure{
  max-width:480px; margin:0 auto; position:relative;
  display:flex; align-items:center; justify-content:center;
}
.eagle-eye-figure svg{ width:100%; height:auto; display:block; }
.eagle-eye-caption{
  text-align:center; margin-top:18px; color:var(--bone-ghost);
  font:500 0.78rem/1.5 'IBM Plex Mono',monospace; letter-spacing:0.08em;
  text-transform:uppercase;
}

/* ---- PATENT TAGS ---------------------------------------------------- */
.patent-tag-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.patent-tag{
  display:inline-flex; align-items:center; gap:8px;
  font:500 0.72rem/1 'IBM Plex Mono',monospace; letter-spacing:0.05em;
  color:var(--bone-dim); background:rgba(255,255,255,0.04);
  border:1px solid var(--edge); border-radius:4px; padding:8px 12px;
}
.patent-tag strong{ color:var(--raptor); font-weight:600; }

/* ---- ABOUT / BETTERGROUP -------------------------------------------- */
.about-grid{ display:grid; grid-template-columns:1.15fr 1fr; gap:48px; align-items:center; }
@media (max-width:768px){ .about-grid{ grid-template-columns:1fr; gap:32px; } }
.bettergroup-family{ display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.bettergroup-chip{
  font:600 0.78rem/1 'IBM Plex Mono',monospace; letter-spacing:0.07em;
  color:var(--bone); border:1px solid var(--edge); border-radius:4px;
  padding:11px 15px; background:rgba(255,255,255,0.03);
}
.bettergroup-chip span{ color:var(--bone-ghost); font-weight:400; }

/* ---- PRICING -> ENQUIRY (no public prices; quote-request only) ------ */
.price-on-enquiry{ font:700 1.05rem/1.2 'Inter',sans-serif; color:var(--raptor); letter-spacing:0.01em; }
.price-on-enquiry small{
  display:block; font:400 0.75rem/1.45 'Inter',sans-serif;
  color:var(--bone-dim); letter-spacing:0; margin-top:5px;
}

/* ---- NFC STAMPING VIDEO (subtle, behind the identity copy) ---------- */
.connected-block--stamp{ position:relative; }
.nfc-stamp-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0.14; z-index:0; pointer-events:none; border-radius:12px;
}
.connected-block--stamp > *:not(.nfc-stamp-bg){ position:relative; z-index:1; }