body { margin: 0; font-family: Arial, sans-serif; background: #f2e3c6; color: #1f1d1b; }
header { background:#1f1d1b; color:#f2e3c6; padding:1rem 2rem; display:flex; justify-content:space-between; align-items:center; gap: 1rem; flex-wrap: wrap; }
header nav a { margin-left:1.25rem; color:#f2e3c6; text-decoration:none; font-weight:bold; }
header nav a:hover { color:#f7a21c; }
.logo { height: 120px; width: auto; display:block; }

.hero { text-align:center; padding:6rem 2rem; background:linear-gradient(90deg,#f7a21c 0%,#1f1d1b 100%); color:white; }
.hero h2 { margin: 0 0 1rem 0; }
.hero p { max-width: 720px; margin: 0 auto; opacity: .92; }
.hero button { margin-top:2rem; padding:1rem 2rem; border:none; border-radius:1rem; font-weight:bold; background:#f2e3c6; color:#1f1d1b; cursor:pointer; }
.hero button:hover { background:#ffd38b; }

section { padding: 4rem 2rem; }
h3 { text-align:center; font-size:2rem; margin: 0 0 2rem 0; }

.grid { display:grid; gap:2rem; }
.videos .grid { grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); max-width: 1100px; margin: 0 auto; }
.podcast .grid, .gallery .grid { grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); max-width: 1000px; margin: 0 auto; }

.card { background:white; border-radius:1rem; overflow:hidden; box-shadow:0 4px 12px rgba(0,0,0,0.2); transition: transform .2s ease; }
.card:hover { transform: translateY(-2px); }
.card iframe { width:100%; height:200px; display:block; }
.card-content { padding:1rem; }
.card-content h4 { margin: 0 0 .5rem 0; }
.card-content p { margin: 0; opacity: .8; }

.podcast { background:#1f1d1b; color:#f2e3c6; }
.podcast-episode { background:#f7a21c; color:#1f1d1b; border-radius:1rem; padding:1rem; font-weight: 700; }

.gallery img { width: 100%; height: 260px; object-fit: cover; border-radius: 1rem; cursor: pointer; box-shadow:0 4px 12px rgba(0,0,0,0.2); }

footer { background:#1f1d1b; color:#f2e3c6; text-align:center; padding:1rem; }

#scrollTopBtn {
  position:fixed; bottom:20px; right:20px;
  background:#f7a21c; color:white; border:none; border-radius:50%;
  width:50px; height:50px; font-size:24px; display:none; cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,0.3); z-index: 999;
}
#scrollTopBtn:hover { background:#e08f12; }

.lightbox {
  position:fixed; top:0; left:0; width:100%; height:100%;
  background:rgba(0,0,0,0.8); display:none; justify-content:center; align-items:center; z-index:1000;
  padding: 1rem;
}
.lightbox img { max-width:90%; max-height:90%; border-radius:1rem; }

@media (max-width: 768px) {
  header nav a { margin-left: .75rem; }
  .logo { height: 100px; }
  section { padding: 3rem 1.25rem; }
}
@media (max-width: 480px) {
  .logo { height: 90px; }
  .hero { padding: 4.5rem 1rem; }
  h3 { font-size: 1.6rem; }
}