/* ================================================================
   WEBCRAFT — css/shared.css
   Shared tokens, reset, layout helpers, nav, footer, responsive
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&family=JetBrains+Mono:wght@400&family=Inter:wght@900&display=swap');

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
  --bg:          #08080F;
  --s1:          #0E0E1A;
  --s2:          #141422;
  --s3:          #1B1B2E;
  --border:      rgba(255,255,255,.07);
  --border2:     rgba(255,255,255,.13);
  --text:        #F0EEE8;
  --muted:       rgba(240,238,232,.48);
  --faint:       rgba(240,238,232,.24);
  --accent:      #C8FF57;
  --accent2:     #AEED3A;
  --glow:        rgba(200,255,87,.14);
  --blue:        #4A7CFF;
  --nav-h:       68px;
  --ease:        cubic-bezier(.4,0,.2,1);
  --t:           .27s;
  --r1:          10px;
  --r2:          16px;
  --r3:          24px;
  --r4:          32px;
}

/* ── Reset ──────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html  { font-size:16px; scroll-behavior:smooth }
body  { font-family:'DM Sans',sans-serif; background:var(--bg); color:var(--text); overflow-x:hidden; -webkit-font-smoothing:antialiased; padding-top:var(--nav-h) }
a     { color:inherit; text-decoration:none }
ul    { list-style:none }
button{ cursor:pointer; border:none; font-family:inherit }

/* ── Z-index scale ──────────────────────────────────────────────
   10   — grain overlay (pointer-events:none)
   99   — mobile nav overlay
   100  — sticky navigation bar
   1000 — intro overlay (home only)
   ──────────────────────────────────────────────────────────── */

/* ── Grain overlay ──────────────────────────────────────────── */
body::after {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:10; opacity:.026;
  will-change:transform; transform:translateZ(0);
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Helpers ────────────────────────────────────────────────── */
.container    { max-width:1140px; margin:0 auto; padding:0 24px }
.section      { padding:96px 0 }
.section--alt { background:var(--s1) }
.reveal       { opacity:0; transform:translateY(22px); transition:opacity .6s ease,transform .6s ease }
.reveal.vis   { opacity:1; transform:none }
.sec-header   { text-align:center; max-width:560px; margin:0 auto }
.label        { display:block; font-size:.68rem; font-weight:600; letter-spacing:.17em; text-transform:uppercase; color:var(--accent) }

/* ── Typography ─────────────────────────────────────────────── */
h1,h2,h3,h4 { font-family:'Syne',sans-serif; letter-spacing:-.025em; line-height:1.08 }
.dxl { font-size:clamp(2.5rem,6vw,5.5rem); font-weight:800; letter-spacing:-.03em; line-height:1.05 }
.dlg { font-size:clamp(2rem,4.2vw,3.4rem);   font-weight:700 }
.dmd { font-size:clamp(1.4rem,2.6vw,2.1rem); font-weight:700 }

/* ── Buttons ────────────────────────────────────────────────── */
.btn   { display:inline-flex; align-items:center; gap:8px; font-family:'DM Sans',sans-serif; font-weight:500; font-size:.9375rem; padding:13px 26px; border-radius:100px; transition:all var(--t) var(--ease); border:none; cursor:pointer }
.btn-p { background:var(--accent); color:#08080F; font-weight:600 }
.btn-p:hover { background:var(--accent2); transform:translateY(-2px); box-shadow:0 8px 28px var(--glow) }
.btn-g { background:transparent; color:var(--text); border:1.5px solid var(--border2) }
.btn-g:hover { border-color:var(--accent); color:var(--accent); transform:translateY(-2px) }
.btn-lg { padding:15px 32px; font-size:1rem }

/* ── Page hero (shared across inner pages) ──────────────────── */
.page-hero   { min-height:70vh; display:flex; align-items:center; padding:100px 0 80px; text-align:center; position:relative; overflow:hidden }
.page-hero::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 70% 100% at 50% -10%,rgba(200,255,87,.06) 0%,transparent 65%);
}
.page-hero::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:80px 80px;
  -webkit-mask-image:radial-gradient(ellipse 85% 85% at 50% 50%,black 20%,transparent 100%);
  mask-image:radial-gradient(ellipse 85% 85% at 50% 50%,black 20%,transparent 100%);
}
.page-hero .container { position:relative; z-index:1 }
.page-hero .label     { margin-bottom:14px }
.page-hero h1         { margin-bottom:16px }
.page-hero p { color:var(--muted); max-width:500px; margin:14px auto 0; font-size:1.05rem; font-weight:300 }

/* ── Pulse animation ────────────────────────────────────────── */
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.5)} }

/* ── Navigation ─────────────────────────────────────────────── */
.nav {
  position:fixed; top:0; left:0; right:0; height:var(--nav-h); z-index:100;
  transition:var(--t) var(--ease);
}
.nav.scrolled { background:rgba(8,8,15,.88); backdrop-filter:blur(20px); border-bottom:1px solid var(--border) }
.nav-inner {
  max-width:1140px; margin:0 auto; padding:0 24px; height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
}
.logo      { font-family:'Syne',sans-serif; font-weight:800; font-size:1.15rem; letter-spacing:-.03em }
.logo span { color:var(--accent) }
.navlinks  { display:flex; gap:28px; align-items:center }
.navlinks a {
  font-size:.875rem; color:var(--muted); transition:color var(--t) var(--ease); position:relative;
}
.navlinks a::after { content:''; position:absolute; bottom:-3px; left:0; width:0; height:1.5px; background:var(--accent); transition:width var(--t) var(--ease) }
.navlinks a:hover,.navlinks a.act { color:var(--text) }
.navlinks a:hover::after,.navlinks a.act::after { width:100% }
.navlinks .cta-link {
  background:var(--accent) !important; color:#08080F !important; padding:8px 18px;
  border-radius:100px; font-weight:600 !important; font-size:.8rem !important;
}
.navlinks .cta-link::after { display:none !important }
.navlinks .cta-link:hover  { background:var(--accent2) !important; transform:translateY(-1px) }
.burger {
  display:none; flex-direction:column; justify-content:center; align-items:center;
  gap:5px; width:42px; height:42px; cursor:pointer;
  background:var(--s2); border:1.5px solid var(--border2); border-radius:var(--r1);
  -webkit-tap-highlight-color:transparent; flex-shrink:0;
  transition:border-color var(--t) var(--ease), background var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.burger:hover { border-color:rgba(200,255,87,.35); background:var(--s3) }
.burger[aria-expanded="true"] { border-color:rgba(200,255,87,.5); background:var(--s3); box-shadow:0 0 0 3px rgba(200,255,87,.07) }
.burger span {
  display:block; background:var(--text); border-radius:2px;
  transition:transform .25s var(--ease), opacity .2s var(--ease);
  transform-origin:center;
}
.burger span:nth-child(1) { width:18px; height:1.5px }
.burger span:nth-child(2) { width:11px; height:1.5px }
.burger span:nth-child(3) { width:18px; height:1.5px }
/* Burger → X when menu is open */
.burger[aria-expanded="true"] span:nth-child(1) { transform:translateY(6.5px) rotate(45deg) }
.burger[aria-expanded="true"] span:nth-child(2) { opacity:0; transform:scaleX(0) }
.burger[aria-expanded="true"] span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg) }

/* ── B4B Logo ───────────────────────────────────────────────── */
@keyframes b4b-blink { 0%,100%{opacity:1} 50%{opacity:0} }
.b4b-logo         { display:flex; align-items:center; gap:8px; text-decoration:none }
.b4b-mark         { display:flex; align-items:center; gap:5px }
.b4b-cursor       { width:3px; height:26px; background:linear-gradient(180deg,#CCFF00,#60CFFF); border-radius:2px; animation:b4b-blink 1.2s ease-in-out infinite }
.b4b-bricks       { display:flex; flex-direction:column; gap:2px }
.b4b-row          { display:flex; gap:2px }
.b4b-mb           { width:18px; height:8px; border-radius:2px; background:linear-gradient(135deg,#CCFF00,#7DFFC0,#60CFFF) }
.b4b-mb.b4b-dim   { opacity:.4 }
.b4b-mb.b4b-half  { width:10px }
.b4b-wordmark     { font-family:'Inter',sans-serif; font-size:12px; font-weight:900; color:#fff; letter-spacing:2.5px }
.fb .b4b-logo     { margin-bottom:12px }

/* ── Footer ─────────────────────────────────────────────────── */
.footer      { background:var(--s1); border-top:1px solid var(--border); padding:48px 0 28px }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:36px; margin-bottom:36px }
.fb .logo    { display:block; margin-bottom:12px; font-size:1.1rem; color:var(--text) }
.fb p        { font-size:.84rem; line-height:1.65; color:var(--muted); max-width:220px }
.fc h5       { font-family:'Syne',sans-serif; font-size:.78rem; font-weight:700; color:var(--text); margin-bottom:16px; letter-spacing:.04em }
.fc ul       { display:flex; flex-direction:column; gap:10px }
.fc ul li    { font-size:.84rem; color:var(--muted) }
.fc ul li a  { font-size:.84rem; color:var(--muted); transition:color var(--t) var(--ease) }
.fc ul li a:hover { color:var(--accent) }
.footer-bot  { border-top:1px solid var(--border); padding-top:24px; display:flex; justify-content:space-between; align-items:center; font-size:.78rem; color:var(--muted) }
.footer-bot a { color:var(--muted); transition:color var(--t) var(--ease) }
.footer-bot a:hover { color:var(--accent) }
.fbl         { display:flex; gap:20px }

/* ── No-JS fallback ─────────────────────────────────────────── */
.no-js .navlinks    { display:flex; flex-direction:column; position:static; background:transparent; padding:0; gap:12px; align-items:flex-start; opacity:1 !important; visibility:visible !important; transform:none !important; pointer-events:auto !important }
.no-js .navlinks li { transform:none !important; opacity:1 !important; border-bottom:none }
.no-js .burger      { display:none }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width:1024px) {
  .footer-grid { grid-template-columns:1.4fr 1fr 1fr }
}

@media (max-width:768px) {
  .section  { padding:60px 0 }
  .burger   { display:flex }

  /* Full-screen nav overlay */
  .navlinks {
    display:flex; flex-direction:column; position:fixed;
    top:0; left:0; right:0; bottom:0;
    background:var(--bg);
    padding:calc(var(--nav-h) + 40px) 28px 48px;
    gap:0; align-items:stretch; z-index:98;
    opacity:0; transform:translateY(-6px);
    transition:opacity .2s var(--ease), transform .2s var(--ease);
    pointer-events:none; will-change:opacity,transform;
    overflow-y:auto;
  }
  .navlinks.open {
    opacity:1; transform:translateY(0);
    pointer-events:auto;
  }

  /* Nav items — staggered slide-up on open */
  .navlinks li {
    border-bottom:1px solid var(--border);
    transform:translateY(14px);
    transition:transform .3s var(--ease);
  }
  .navlinks li:last-child { border-bottom:none; padding-top:20px }
  .navlinks.open li { transform:translateY(0) }
  .navlinks.open li:nth-child(1) { transition-delay:.06s }
  .navlinks.open li:nth-child(2) { transition-delay:.10s }
  .navlinks.open li:nth-child(3) { transition-delay:.14s }
  .navlinks.open li:nth-child(4) { transition-delay:.18s }
  .navlinks.open li:last-child   { transition-delay:.22s }

  /* Nav link styling — large editorial look */
  .navlinks a {
    font-family:'Syne',sans-serif;
    font-size:1.3rem; font-weight:700; letter-spacing:-.02em;
    padding:18px 0; width:100%; border-bottom:none;
    color:var(--text);
    display:flex; align-items:center; justify-content:space-between;
  }
  .navlinks a::after {
    content:'→'; display:block; position:static;
    width:auto; height:auto; background:none;
    color:var(--faint); font-family:'DM Sans',sans-serif;
    font-size:.9rem; font-weight:400; letter-spacing:0;
    transition:color var(--t) var(--ease), transform var(--t) var(--ease);
  }
  .navlinks a:hover { color:var(--text) }
  .navlinks a:hover::after { color:var(--accent); transform:translateX(4px) }
  .navlinks a.act { color:var(--accent) }
  .navlinks a.act::after { color:var(--accent) }

  /* CTA link in mobile nav — full-width accent button */
  .navlinks .cta-link {
    background:var(--accent) !important; color:#08080F !important;
    padding:14px 24px !important; border-radius:100px !important;
    font-weight:700 !important; font-size:.9375rem !important;
    font-family:'DM Sans',sans-serif !important; letter-spacing:0 !important;
    justify-content:center !important; display:flex !important;
    width:100%; border:none !important;
  }
  .navlinks .cta-link::after { display:none !important }
  .navlinks .cta-link:hover  { background:var(--accent2) !important; transform:none !important }

  /* Close button inside the overlay */
  .nav-close-btn {
    display:none; position:absolute;
    top:calc(var(--nav-h) + 16px); right:24px;
    width:42px; height:42px;
    background:var(--s3); border:1.5px solid rgba(200,255,87,.45);
    border-radius:var(--r1); color:var(--text); font-size:1.1rem; line-height:1;
    align-items:center; justify-content:center;
    box-shadow:0 0 0 3px rgba(200,255,87,.07);
    transition:background var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t) var(--ease);
    z-index:2;
  }
  .nav-close-btn:hover { background:var(--s2); border-color:var(--accent); transform:scale(1.07) }
  .navlinks.open .nav-close-btn { display:flex }

  /* Nav bar state when overlay is open */
  .nav.menu-open { background:rgba(8,8,15,.99) !important; backdrop-filter:none !important; border-bottom:1px solid var(--border) }

  .footer-grid    { grid-template-columns:1fr; gap:26px }
  .footer-bot     { flex-direction:column; gap:10px; text-align:center }
}

@media (max-width:480px) {
  .dxl       { font-size:clamp(2rem,9vw,2.8rem) }
  .dlg       { font-size:clamp(1.6rem,7vw,2rem) }
  .dmd       { font-size:clamp(1.2rem,5vw,1.5rem) }
  .btn       { width:100%; justify-content:center }
  .section   { padding:40px 0 }
  .section--alt { padding:40px 0 }
  .page-hero { min-height:70vh; padding:72px 0 52px }
  .page-hero h1 { font-size:clamp(2rem,8.5vw,2.6rem) }
  .page-hero p  { font-size:1rem }
  .container { padding:0 16px }
}

/* ── Page hero ghost text ──────────────────────────────────── */
.ph-ghost {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:'Syne',sans-serif; font-size:clamp(4rem,16vw,14rem); font-weight:800;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.03);
  pointer-events:none; user-select:none; letter-spacing:-.06em; z-index:0;
  overflow:hidden; white-space:nowrap;
}

/* ── Marquee ticker strip ──────────────────────────────────── */
.mq-strip {
  overflow:hidden; background:var(--s1);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  padding:13px 0; white-space:nowrap;
}
.mq-inner {
  display:inline-flex; gap:36px; animation:mq-scroll 22s linear infinite;
}
@media (max-width:480px) { .mq-inner { gap:16px } }
.mq-strip:hover .mq-inner { animation-play-state:paused }
@keyframes mq-scroll {
  from { transform:translateX(0) }
  to   { transform:translateX(-50%) }
}
.mq-item {
  font-size:.68rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--muted); flex-shrink:0;
}
.mq-item--accent { color:var(--accent) }

/* ── Shared CTA banner ─────────────────────────────────────── */
.cta-banner {
  background:linear-gradient(135deg,#0C1728 0%,#08080F 50%,#0C1A0C 100%);
  border:1px solid var(--border); border-radius:var(--r4);
  padding:68px 72px; text-align:center; position:relative; overflow:hidden; margin-top:60px; margin-bottom:96px;
}
.cta-banner::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 55% 65% at 50% 50%,var(--glow),transparent 70%);
  pointer-events:none;
}
.cta-banner h2 { margin-bottom:14px; position:relative }
.cta-banner p  { color:var(--muted); max-width:420px; margin:0 auto 32px; position:relative }
@media (max-width:768px) { .cta-banner { padding:44px 24px } }
@media (max-width:480px) { .cta-banner { padding:32px 16px } }