:root{
  --bg:#0b1224;
  --panel:#0f172a;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --brand:#0ea5e9;
  --brand-2:#38bdf8;
  --ring:rgba(14,165,233,.4);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background: linear-gradient(180deg,var(--bg),#0a0f1f);
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, sans-serif;
  line-height:1.6;
}

.container{width:min(1100px,92%);margin-inline:auto;padding:1.5rem 0 3rem}
header{position:sticky;top:0;z-index:50;background:rgba(15,23,42,.9);backdrop-filter:blur(6px);border-bottom:1px solid rgba(255,255,255,.08)}

.nav{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem}
.logo{font-weight:800;letter-spacing:.2px}
.menu{display:flex;gap:.5rem;list-style:none;margin:0;padding:0}
.menu a{display:block;padding:.5rem .8rem;border-radius:999px}
.menu a:hover{background:rgba(255,255,255,.06)}
#menu-toggle{display:none}
.menu-button-container{display:none;cursor:pointer}
.menu-button, .menu-button::before, .menu-button::after{display:block;background:#e5e7eb;height:2px;width:26px;border-radius:2px;position:relative;transition:.2s}
.menu-button::before, .menu-button::after{content:"";position:absolute;left:0}
.menu-button::before{top:-8px}
.menu-button::after{top:8px}

@media (max-width: 720px){
  .menu{position:absolute;top:60px;right:12px;background:var(--panel);padding:.5rem;border:1px solid rgba(255,255,255,.08);border-radius:12px;display:none;flex-direction:column;min-width:180px}
  #menu-toggle:checked ~ .menu{display:flex}
  .menu-button-container{display:block}
}

a{color:var(--brand-2);text-decoration:none}
a:hover{text-decoration:underline}

.btn{display:inline-block;background:var(--brand);color:#031220;border:none;padding:.7rem 1rem;border-radius:12px;font-weight:700;box-shadow:0 6px 20px -8px var(--ring)}
.btn:hover{text-decoration:none;filter:brightness(1.05)}
.btn.outline{background:transparent;border:1px solid var(--brand);color:var(--text)}

.hero{padding:clamp(2rem,6vw,5rem) 0}
.hero-inner{text-align:center;background:radial-gradient(60% 60% at 50% 0%, rgba(56,189,248,.15), rgba(56,189,248,0) 60%)}
.hero h1{font-size:clamp(2rem,5vw,3rem);margin:0 0 .25rem}
.tagline{color:var(--muted);margin:.25rem 0 1rem}
.cta{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}

.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin:2rem 0}
.features article{background:var(--panel);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:1rem}

.page-head h1{margin-bottom:.25rem}
.page-head p{color:var(--muted)}

.split{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem}
.split > div{background:var(--panel);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:1rem}
@media (max-width:900px){.split{grid-template-columns:1fr}}

.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.75rem;margin-top:1rem}
.gallery figure{margin:0;background:var(--panel);border:1px solid rgba(255,255,255,.06);border-radius:14px;overflow:hidden}
.gallery img{width:100%;height:200px;object-fit:cover;display:block}
.gallery figcaption{padding:.5rem .75rem;color:var(--muted);font-size:.9rem}

.contact-card{background:var(--panel);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:1rem;margin-top:2rem}
.contact-list{list-style:none;margin:.25rem 0 0;padding:0;display:grid;gap:.25rem}

.footer{border-top:1px solid rgba(255,255,255,.08);margin-top:3rem;padding-top:1rem}
.footer-grid{display:flex;justify-content:space-between;gap:1rem;align-items:center;flex-wrap:wrap}
.legal{text-align:center;color:var(--muted);font-size:.9rem;margin-top:.5rem}



/* === BamBam Poster Theme (matches palm/rocks artwork) === */
:root{
  --brand:#ff7f11;
  --brand-2:#20c56b;
  --text:#1b1712;
  --panel:rgba(255,255,255,0.75);
  --muted:#4a423a;
}
body{
  background: #0c5f2b;
  background-image: url("../img/tropical-bg.svg");
  background-size: cover;
  background-attachment: fixed;
  color: var(--text);
}
body::after{
  content:"";
  position: fixed; left:0; right:0; bottom:-2px; height: 240px;
  background: url("../img/rocks-footer.svg") center bottom / 100% 240px no-repeat;
  pointer-events:none; z-index:-1;
}
h1, h2, .logo{
  font-family: "Bangers", cursive;
  color: #ff7f11;
  -webkit-text-stroke: 3px #1e1e1e;
  text-shadow: 0 4px 0 rgba(0,0,0,.25);
  letter-spacing: .5px;
}
h3{ font-family: "Bangers", cursive; }
.card, .split article, .contact-card, .gallery figure, .hero{
  background: var(--panel);
  backdrop-filter: blur(2px);
  border: 2px solid rgba(0,0,0,.08);
  border-radius: 18px;
  box-shadow: 0 8px 0 rgba(0,0,0,.08);
}
.btn{
  background: var(--brand);
  color: #2b1600;
  border: 3px solid rgba(0,0,0,.2);
  border-radius: 14px;
  box-shadow: 0 6px 0 #cc650d;
  font-weight: 900;
  transform: translateY(0);
  transition: transform .06s ease, box-shadow .06s ease, filter .15s ease;
}
.btn:hover{ transform: translateY(1px); box-shadow: 0 5px 0 #cc650d; }
.btn.outline{ background: var(--brand-2); color:#003b1f; box-shadow: 0 6px 0 #159a50; }
.nav{ background: rgba(255,255,255,.18); border-bottom: 2px solid rgba(0,0,0,.08); }
.menu a{ color:#1f1b16; } .menu a:hover{ color: var(--brand); }
.footer{ border-top: 2px solid rgba(0,0,0,.1); }
.legal{ color: var(--muted); }



/* === Refinements: heavier logo outline + white rocky subheads === */
.logo{
  color:#ff7f11;
  -webkit-text-stroke: 4px #1e1e1e;
  text-shadow: 0 5px 0 rgba(0,0,0,.28), 2px 2px 0 #1e1e1e, -2px 2px 0 #1e1e1e,
               2px -2px 0 #1e1e1e, -2px -2px 0 #1e1e1e;
  letter-spacing:.6px; font-weight: 900;
}
h2{
  color:#ffffff;
  -webkit-text-stroke: 3px #1e1e1e;
  text-shadow: 0 4px 0 rgba(0,0,0,.25), 1px 1px 0 #1e1e1e, -1px 1px 0 #1e1e1e,
               1px -1px 0 #1e1e1e, -1px -1px 0 #1e1e1e;
}