/* Shared header/footer + logo glow styles based on MainScreen */
:root{
  --brand:#fd0147;
  --bg-900:rgba(20,20,20,0.9);
}
/* Reset helpers (kept light; pages keep their own section styles) */
a{ text-decoration:none; color:inherit }
html, body{ max-width:100%; overflow-x:hidden }
/* Ensure a solid black base to avoid white flashes/gaps behind gradients */
html{ background:#000; }
body{ background-color:#000; }

/* Header (from MainScreen) */
header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1.5rem 3rem;
  background:var(--bg-900);
  position:sticky; top:0; z-index:10;
  flex-wrap:wrap;
}
.logo{
  display:flex; align-items:center; gap:.75rem;
  font-size:1.5rem; font-weight:700; letter-spacing:1px; color:var(--brand);
  /* Neon glow + subtle outline for better legibility */
  text-shadow:
    0 0 3px rgba(253,1,71,0.90),
    0 0 12px rgba(253,1,71,0.50),
    0 1px 2px rgba(0,0,0,0.80); /* soft dark drop shadow for contrast */
  -webkit-text-stroke: 0.5px rgba(0,0,0,0.55); /* subtle outline (Chromium/WebKit) */
}
.logo img{ width:72px; height:72px; object-fit:contain; display:block;
  /* subtle neon glow around the logo image */
  filter: drop-shadow(0 0 3px var(--brand)) drop-shadow(0 0 8px rgba(253,1,71,0.45));
}
@media (max-width:600px){ .logo img{ width:48px; height:48px } }

/* Nav buttons (from MainScreen) */
.nav-buttons{ display:flex; gap:1.25rem }
.contact-button{
  padding:.75rem 1.5rem; background:var(--brand); color:#111; font-weight:700;
  border:0; border-radius:4px; cursor:pointer;
  box-shadow:0 0 5px var(--brand), 0 0 15px rgba(253,1,71,.8), inset 0 0 5px var(--brand);
  transition: filter .2s, box-shadow .2s, transform .15s ease;
}
.contact-button:hover{ filter:brightness(1.2); box-shadow:0 0 8px var(--brand), 0 0 20px rgba(253,1,71,.9), inset 0 0 6px var(--brand); transform: translateY(-1px) }

/* Footer (from MainScreen) */
footer{ text-align:center; padding:2rem; background:var(--bg-900); font-size:.9rem; opacity:.8 }

/* Small responsive tweak to match MainScreen */
@media (max-width:600px){
  header{ flex-direction:column; align-items:center; padding:1rem 1rem; width:100%; }
  .logo{ margin-bottom:0.75rem; text-align:center; justify-content:center; flex-wrap:wrap; font-size:1.25rem }
  /* Use grid on small screens so all buttons fit without horizontal scroll */
  .nav-buttons{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; width:100%; max-width:420px; margin-top:.5rem; justify-items:stretch }
  .nav-buttons a{ display:block; width:100% }
  .nav-buttons .contact-button{ width:100%; padding:.65rem .9rem; white-space:normal }
}

/* Turn off fixed backgrounds on touch/smaller screens to prevent white plank during scroll */
@media (max-width:1024px), (hover:none) and (pointer:coarse){
  body{
    /* smoother gradient with a faint top glow for better blend under header */
    background: radial-gradient(120% 60% at 50% -10%, rgba(255,255,255,0.06), rgba(255,255,255,0) 60%),
                linear-gradient(135deg, #0c0c0e 0%, #2a2a2d 100%)
                no-repeat center top / cover !important;
    background-attachment: scroll !important;
    background-position: center top !important;
  }
}

/* Very narrow phones: keep 2-column grid but tighten spacing so it fits */
@media (max-width:380px){
  .nav-buttons{ grid-template-columns:repeat(2,1fr); max-width:100%; gap:.45rem }
  .nav-buttons .contact-button{ padding:.55rem .7rem; font-size:.92rem }
}