@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@400;500;600&family=Share+Tech+Mono&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600&family=Space+Mono:wght@400;700&display=swap');
   
  
  :root{
    --bg-0:#0a0908;
    --bg-1:#141210;
    --red:#d92b1c;
    --red-dim:#7a1810;
    --white:#f2efe9;
    --gray:#8d8983;
    --line:#2a2724;
    --paper:#fefefe;
    --paper-rgb:254,254,254;
    --ink:#0e0d0b;
    --ink-rgb:14,13,11;
    --gold:#c9982e;
    --gold-rgb:201,152,46;
    /* -rgb companions exist so backgrounds can fade these colors to transparent
       (rgba() needs separate channels; opacity alone can't do per-stop fades in
       a gradient). Update the hex + matching -rgb together when swapping palettes
       for a different flyer — anything built from these (see events.css) follows
       automatically. */
  }

/* =========================================================
   BREAKPOINTS — mobile-first
   Write base rules for mobile (no media query = mobile).
   Then layer on bigger-screen overrides with min-width, in
   this order, smallest to largest:

     Tablet:  @media (min-width: 768px)  { ... }
     Desktop: @media (min-width: 1024px) { ... }

   Floor: body has min-width:320px (below), so the layout never
   keeps shrinking past that — a narrower viewport just gets a
   horizontal scrollbar instead of squished/broken content.

   Reference (for occasional fine-tuning, not standard tiers):
     320px  smallest common phone width  <- hard floor
     375px  iPhone standard width
     768px  iPad portrait / tablet breakpoint  <- tablet tier
     1024px iPad landscape / small laptop      <- desktop tier
   ========================================================= */

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

  html{
    scroll-behavior:smooth;
    scrollbar-gutter:stable; /* reserves the scrollbar's width on every page, even ones
                                 short enough not to need one — otherwise a page without
                                 a scrollbar renders ~15-17px wider than one that has it,
                                 which is enough to visibly shift the header/home button
                                 between pages with different amounts of content */
  }

    body{
    background-color:var(--bg-0);
    /* background-image:url('...');  <- add a path here when you pick a sitewide background */
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    color:var(--white);
    font-family:'Inter',sans-serif;
    min-height:100vh;
    min-width:320px; /* floor — below this the layout stops shrinking and the browser
                         scrolls horizontally instead of squishing content */
  }

  /* Tablet and up */
  @media (min-width:768px){
    body{
      background-attachment:fixed; /* parallax effect — gated off mobile, unreliable on iOS Safari */
    }
  }



  /* pinned regardless of page — faq.css narrows .wrap to 1100px for its own
     content, which would otherwise also narrow the header row (nav-row reuses
     the .wrap class) and shift the nav/home button positions on that page alone */
  header .wrap{
    max-width:1400px;
  }

/* ---------- HEADER (thin, full-width bar) ---------- */
  header{
    padding:0;
    background:rgba(10,9,8,0.75);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    border-bottom:1px solid rgba(242,239,233,0.12);
    position:sticky;
    top:0;
    z-index:50;
    transition:background-color .25s ease, border-color .25s ease;
  }
  /* toggled by js/header-scroll.js: fades while scrolling down, snaps back on scroll up.
     Fades the header's own background/border and nav specifically — NOT a plain
     opacity on <header>, since a child can't opt back out of an ancestor's opacity
     (its own opacity is multiplied against the parent's, not independent of it).
     Keeping .home-btn out of the fade this way lets it stay fully visible, plus it
     gets its own highlight below so it stands out even more against the dimmed bar. */
  header.header-faded{
    background:rgba(10,9,8,0.15);
    border-bottom-color:rgba(242,239,233,0.03);
  }
  header.header-faded nav{
    opacity:0.15;
    transition:opacity .25s ease;
  }
  header.header-faded .home-btn::before{
    content:'';
    position:absolute;
    inset:-8px;
    background:rgba(10,9,8,0.9);
    border-radius:10px;
    box-shadow:0 0 18px rgba(217,43,28,0.55);
    z-index:-1;
  }

  .nav-row{
    display:flex;
    align-items:center;
    gap:20px;
    padding:48px 0;
    border-bottom:none;
  }
  nav{
    width:100%;
    transition:opacity .25s ease;
  }

     .wrap_nav{
    max-width:1400px;
    margin:0 auto;
    padding:0 0px;
  } 

  /* ---------- HOME BUTTON (HUD scanner ring + mil-dot reticle) ---------- */
  .home-btn{
    position:relative;
    width:30px;
    height:40px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    overflow:visible;
    filter:drop-shadow(0 0 6px rgba(217,43,28,0.6)); /* constant red glow */
  }
  .home-btn img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    border-radius:4px;
    mix-blend-mode:screen;
    -webkit-mask-image:radial-gradient(ellipse 60% 55% at 50% 50%, black 40%, transparent 78%);
    mask-image:radial-gradient(ellipse 60% 55% at 50% 50%, black 40%, transparent 78%);
  }
  .home-btn .eye-glow{
    position:absolute;
    left:40%;
    top:43%;
    width:7px;
    height:7px;
    margin:-3.5px 0 0 -3.5px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,220,210,0.75) 0%, rgba(217,43,28,0.65) 45%, rgba(217,43,28,0) 75%);
    animation:eyePulse 2.2s ease-in-out infinite;
    pointer-events:none;
    mix-blend-mode:screen;
  }
  @keyframes eyePulse{
    0%, 100%{ opacity:0.4; transform:scale(0.85); }
    50%{ opacity:0.75; transform:scale(1.2); }
  }
  @keyframes homeBtnSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
  @keyframes homeBtnSpinRev{ from{ transform:rotate(360deg); } to{ transform:rotate(0deg); } }
  @keyframes homeBtnGlow{
    0%, 100%{ filter:drop-shadow(0 0 1px rgba(217,43,28,0.5)); }
    50%{ filter:drop-shadow(0 0 4px rgba(217,43,28,0.95)); }
  }

  /* ---------- HOME BUTTON TOOLTIP ---------- */
  .home-btn::after{
    content:'Come With Me If You Want To Live';
    position:absolute;
    top:100%;
    left:0;
    margin-top:10px;
    white-space:nowrap;
    background:var(--bg-0);
    border:1px solid var(--red);
    color:var(--white);
    font-family:'Oswald',sans-serif;
    font-weight:600;
    font-size:11px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    padding:8px 14px;
    border-radius:4px;
    box-shadow:0 8px 20px rgba(0,0,0,0.5), 0 0 12px rgba(217,43,28,0.35);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
    transform:translateY(-4px);
    z-index:40;
  }
  .home-btn:hover::after{
    opacity:1;
    transform:translateY(0);
  }

  nav ul{
    list-style:none;
    display:flex;
    gap:28px;
    flex-wrap:wrap;
    justify-content:center;
  }
  nav a{
    color:var(--white);
    text-decoration:none;
    font-family:'Oswald',sans-serif;
    font-weight:500;
    font-size:13px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    position:relative;
    padding-bottom:4px;
    transition:color .2s ease;
  }
  nav a:hover{ color:var(--red); }
  nav a::after{
    content:'';
    position:absolute;
    left:0; bottom:0;
    width:0; height:2px;
    background:var(--red);
    transition:width .25s ease;
  }
  nav a:hover::after{ width:100%; }

  /* ---------- HAMBURGER BUTTON (mobile/tablet only) ---------- */
  .hamburger-btn{
    display:none; /* shown below, under 1024px */
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
    width:32px;
    height:32px;
    padding:0;
    background:none;
    border:none;
    cursor:pointer;
    flex-shrink:0;
  }
  .hamburger-btn span{
    display:block;
    width:24px;
    height:2px;
    background:var(--white);
    border-radius:1px;
    transition:transform .25s ease, opacity .2s ease;
  }
  .hamburger-btn:hover span{ background:var(--red); }
  /* open state: bars become an X */
  .hamburger-btn[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .hamburger-btn[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .hamburger-btn[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  /* ---------- MOBILE/TABLET NAV: collapses into a dropdown behind the hamburger ---------- */
  @media (max-width:1023px){
    .nav-row{ justify-content:space-between; }
    .hamburger-btn{ display:flex; }

    nav{
      width:auto;
      position:absolute;
      top:100%;
      left:0;
      right:0;
      background:var(--bg-0);
      border-bottom:1px solid var(--line);
      max-height:0;
      overflow:hidden;
      transition:max-height .3s ease;
    }
    nav.nav-open{ max-height:400px; }
    nav ul{
      flex-direction:column;
      align-items:stretch;
      gap:0;
      padding:8px 0;
    }
    nav a{
      display:block;
      padding:14px 20px;
    }
    nav a::after{ display:none; } /* the underline hover effect doesn't suit a full-width row */
  }

  /* ---------- DESKTOP NAV: a bit bigger, spread out more (not edge to edge) ---------- */
  @media (min-width:1024px){
    nav ul{ gap:44px; }
    nav a{ font-size:14.5px; }
  }




  /* ---------- FOOTER LOGO BADGE ---------- */
  .footer-badge-wrap{
    position:relative;
    height:0;
  }
  .footer-badge{
    position:absolute;
    top:-50px;
    left:50%;
    transform:translateX(-50%);
    width:100px;
    height:100px;
    z-index:2;
    border-radius:50%;
    overflow:hidden;
    border:2px solid var(--red);
    box-shadow:0 8px 24px rgba(0,0,0,0.6), 0 0 20px rgba(217,43,28,0.35);
    background:var(--bg-0);
  }
  .footer-badge img{
    width:100%;
    height:100%;
    object-fit:cover;
  }

  /* ---------- FOOTER QUICK ICONS (About / Products / Contact) ---------- */
  .footer-quick-icons{
    display:flex;
    gap:10px;
    margin-top:14px;
  }
  .footer-quick-icons a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border:1px solid var(--line);
    border-radius:6px;
    color:var(--gray);
    text-decoration:none;
    font-family:'Oswald',sans-serif;
    font-weight:700;
    font-size:12px;
    transition:all .2s ease;
  }
  .footer-quick-icons a:hover{
    color:var(--white);
    border-color:var(--red);
  }

  footer{
    border-top:1px solid var(--line);
    padding:36px 0 18px; /* mobile default */
    position:relative;
    width:100%;
    box-sizing:border-box;
  }
  footer .foot-row{
    display:flex;
    flex-direction:column; /* mobile default: stacked */
    align-items:center;
    text-align:center;
    flex-wrap:wrap;
    gap:14px;
    margin-top:24px; /* one more line down from the nav row above */
  }
  @media (min-width:768px){
    footer{ padding:60px 0 22px; }
    footer .foot-row{ gap:18px; } /* stays stacked (column, from the base rule) so the
                                      copyright line sits above the social row */
  }
  footer p{
    font-family:'Inter',sans-serif;
    font-size:12px;
    color:var(--gray);
    letter-spacing:0.3px;
  }
  .footer-explore-row{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px 14px; /* mobile default */
    padding:16px 0 20px;
    border-bottom:1px solid var(--line);
  }
  .footer-explore-row a{
    font-family:'Inter',sans-serif;
    font-size:11px; /* mobile default */
    color:var(--gray);
    text-decoration:none;
    transition:color .2s ease;
    white-space:nowrap;
  }
  .footer-explore-row a:hover{ color:var(--white); }
  @media (min-width:768px){
    .footer-explore-row{ gap:14px 20px; }
    .footer-explore-row a{ font-size:13.5px; }
  }

  /* footer-grid/footer-col/footer-head/footer-brand* removed — they only ever
     styled the Contact column and an unused brand block, both gone now that
     contact info lives elsewhere on the site (not duplicated in every footer). */

  .social-row{
    display:flex;
    gap:16px;
    margin-top:18px;
  }
  .social-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:54px; /* was 72px (doubled from 36px), shrunk 25% back down */
    height:54px;
    border:1px solid var(--line);
    border-radius:50%;
    color:var(--gray);
    text-decoration:none;
    font-family:'Oswald',sans-serif;
    font-size:16px; /* scaled down with the circle, was 21px */
    font-weight:600;
    letter-spacing:0.5px;
    transition:all .2s ease;
  }
  .social-btn:hover{
    color:var(--white);
    border-color:var(--red);
  }