/* v11.1 original layout with tight ticket logo */
:root { --blue:#0051A3; --yellow:#FFD700; --white:#FFFFFF; }
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial,sans-serif;color:#0a0a0a;background:#fafbff}
a{color:var(--blue);text-decoration:none} a:hover{text-decoration:underline}
.header{background:var(--blue);color:var(--yellow);padding:10px 20px;position:sticky;top:0;z-index:50;border-bottom:4px solid var(--yellow)}
.nav{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:72px;width:auto;display:block}
.nav-links a{color:var(--yellow);font-weight:700;padding:8px 12px;border-radius:10px;border:2px solid transparent}
.nav-links a:hover{border-color:var(--yellow);background:rgba(255,215,0,0.1)}
.hero{background:linear-gradient(145deg,var(--blue) 0%,#003b78 65%);color:var(--yellow);padding:70px 20px;border-bottom:6px solid var(--yellow)}
.container{max-width:1100px;margin:0 auto}
.hero-inner{display:grid;grid-template-columns:1.2fr 0.8fr;gap:30px;align-items:center}
.hero h1{font-family:'Bebas Neue',Impact,'Arial Black',sans-serif;font-size:clamp(36px,7vw,72px);line-height:0.95;margin:0 0 10px;color:var(--yellow)}
.hero p{font-size:clamp(18px,2.4vw,22px);margin:0 0 12px;color:#fff6bf}
.cta-btn{display:inline-block;background:var(--yellow);color:#0a0a0a;font-weight:800;padding:14px 22px;border-radius:14px;border:3px solid #0a0a0a;box-shadow:0 6px 0 #0a0a0a;transition:transform .06s}
.cta-btn:hover{transform:translateY(2px);box-shadow:0 4px 0 #0a0a0a;text-decoration:none}
.card{background:#fff;border:3px solid #0a0a0a;border-radius:16px;box-shadow:8px 8px 0 #0a0a0a;padding:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.section{padding:50px 20px}
h2.section-title{font-family:'Bebas Neue',Impact,'Arial Black',sans-serif;font-size:clamp(28px,4.2vw,42px);color:var(--blue);margin:0 0 10px}
.small{color:#444;font-size:14px}
.footer{background:#0b1a33;color:#c9d7ff;padding:30px 20px;margin-top:40px;border-top:6px solid var(--yellow)}
.footer a{color:#c9d7ff}
@media (max-width:900px){.hero-inner{grid-template-columns:1fr}.grid-3{grid-template-columns:1fr}}


/* Responsive tabs fix */
.tabs {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding: .5rem 1.25rem;
}
.tabs::-webkit-scrollbar {
  display: none;
}
.tabs a {
  flex: 0 0 auto;
  scroll-snap-align: start;
}
@media (min-width: 640px) {
  .tabs {
    overflow: visible;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* --- Mobile layout for "What is a Free Blockbuster?" section --- */
.section .grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.section .card {
  padding: 16px 18px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}
.section .card h3 {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 1.125rem;
}
.section .card p {
  margin: 0;
  line-height: 1.55;
}
@media (max-width: 700px) {
  .section .grid-3 {
    grid-template-columns: 1fr; /* stack cards vertically */
    gap: 14px;
  }
  .section .card {
    padding: 18px; /* larger tap target */
  }
  .section .section-title {
    font-size: 1.35rem;
    line-height: 1.25;
    margin-bottom: 12px;
    text-align: center;
  }
  .section p.small {
    text-align: center; /* center FreeBlockbuster.org credit on mobile */
  }
}