/* Base + Theme */
:root{
  --bg: #f8fafc;
  --fg: #0f172a;
  --muted: #475569;
  --accent: #3b82f6;
  --card: #ffffff;
  --shadow: 0 8px 30px rgba(2,6,23,0.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji','Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
  color:var(--fg);
  background:
    linear-gradient(45deg, rgba(59,130,246,0.08) 25%, transparent 25%) 0 0/48px 48px,
    linear-gradient(-45deg, rgba(59,130,246,0.08) 25%, transparent 25%) 0 0/48px 48px,
    linear-gradient(45deg, transparent 75%, rgba(59,130,246,0.08) 75%) 0 0/48px 48px,
    linear-gradient(-45deg, transparent 75%, rgba(59,130,246,0.08) 75%) 0 0/48px 48px,
    #ffffff;
}

/* Layout */
.container{max-width:1000px;margin:0 auto;padding:0 1rem}
.container.small{max-width:800px}
.hero{position:relative;height:48vh;min-height:320px;display:grid;place-items:center;overflow:hidden}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(0.95) brightness(0.9)}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom, rgba(2,6,23,0.55), rgba(2,6,23,0.25), rgba(2,6,23,0.55))}
.hero-content{position:relative;text-align:center;color:white}
.hero h1{font-weight:800;letter-spacing:0.3px;font-size:clamp(2rem,4.5vw,3.5rem);margin:0}
.subtitle{margin-top:0.5rem;font-weight:600;opacity:0.95}

.cards{display:grid;grid-template-columns:repeat(12,1fr);gap:1.25rem;margin-top:-3rem;padding-bottom:2rem}
.card{
  grid-column:span 12;
  background:var(--card);
  border-radius:1.25rem;
  box-shadow:var(--shadow);
  padding:1.25rem 1.25rem;
}
.card h2{margin:0 0 0.75rem 0;font-size:1.25rem}
.note{color:var(--muted);font-size:0.95rem;margin-top:0.5rem}

@media (min-width: 720px){
  .card{padding:1.5rem}
  .cards .card:nth-child(1){grid-column:span 7}
  .cards .card:nth-child(2){grid-column:span 5}
  .cards .card:nth-child(3){grid-column:span 5}
  .cards .card:nth-child(4){grid-column:span 7}
}

/* Schedule */
.schedule{list-style:none;padding:0;margin:0}
.schedule li{display:grid;grid-template-columns:2rem 6.5rem 1fr;align-items:center;gap:0.5rem;padding:0.5rem 0;border-bottom:1px dashed #e2e8f0}
.schedule li:last-child{border-bottom:none}
.icon{font-size:1.2rem;display:inline-block;width:1.5rem;text-align:center}
.time{font-weight:600}
.label{}

/* Buttons */
.btn{
  display:inline-block;
  text-decoration:none;
  padding:0.75rem 1rem;
  border-radius:0.875rem;
  font-weight:600;
  border:2px solid transparent;
  transition:transform .06s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
  box-shadow:var(--shadow);
  text-align:center;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.primary{background:var(--accent);color:white}
.btn.primary:hover{filter:brightness(0.98)}
.btn.outline{background:white;color:var(--fg);border-color:#cbd5e1}
.btn.outline:hover{background:#f8fafc}
.pay-grid{display:grid;gap:0.75rem;grid-template-columns:1fr}
@media (min-width:560px){.pay-grid{grid-template-columns:1fr 1fr}}

/* Footer */
.footer{margin:2rem 0 3rem}
.footer p{text-align:center;color:var(--muted)}