/* --- CSS RESET & VARIABLES --- */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --dark:#101820;
  --primary:#ffcc00;
  --light:#fdfdfd;
  --gray:#f3f4f6;
  --radius:10px;
  --transition:0.25s ease;
  --shadow:0 2px 6px rgba(0,0,0,.08);
  font-size:16px;
}
body{
  font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--dark);
  background:var(--light);
  line-height:1.6;
}
a{color:inherit;text-decoration:none}
.container{width:90%;max-width:1100px;margin:0 auto}

/* --- NAVBAR --- */
header{
  width:100%;background:var(--dark);color:var(--light);
  position:sticky;top:0;z-index:999;box-shadow:0 1px 4px rgba(0,0,0,.15)
}
nav{display:flex;align-items:center;justify-content:center;padding:.4rem 0}
nav .logo{font-size:1.6rem;font-weight:600;color:var(--primary)}

/* --- HERO --- */
.hero{
  display:flex;align-items:center;justify-content:center;
  min-height:55vh;background:url('A_photograph_of_a_light-skinned_male_guitarist_wit.png') center/cover;
  position:relative;color:var(--light);text-align:center
}
.hero::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.55)}
.hero-content{position:relative;z-index:2;padding:1rem}
.hero h1{font-size:2.5rem;font-weight:700;margin-bottom:.5rem}
.hero p{font-size:1.1rem;margin-bottom:1.5rem}
.btn{
  display:inline-block;padding:.6rem 1.4rem;border-radius:50px;
  background:var(--primary);color:var(--dark);font-weight:600;transition:var(--transition)
}
.btn:hover{filter:brightness(1.1)}

/* --- SECTIONS --- */
section{padding:4rem 0}
h2{text-align:center;font-size:2rem;margin-bottom:2rem;color:var(--dark)}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem}
.card{background:var(--gray);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;transition:transform .3s}
.card:hover{transform:translateY(-5px)}
.card img{width:100%;height:160px;object-fit:cover}
.card-content{padding:1rem}
.card h3{margin-bottom:.6rem;font-size:1.2rem}
.card p{font-size:.95rem}

/* INFO GRID */
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.info-grid p{margin-bottom:1rem}
@media(max-width:768px){.info-grid{grid-template-columns:1fr}}

/* Success message */
.success-message{display:none;margin-top:1rem;padding:.8rem;border-radius:var(--radius);background:#e6ffed;color:#046307;text-align:center;font-weight:600;box-shadow:var(--shadow)}

/* FOOTER */
footer{background:var(--dark);color:var(--light);padding:1.5rem 0;margin-top:4rem;text-align:center;font-size:.9rem}
@media(max-width:768px){
  nav .logo{font-size:1.2rem}
  .hero h1{font-size:2rem}
  .hero p{font-size:1rem}
}