/* Serenity Youth — minimalist, modern, responsive */
:root{
  --bg:#0f172a;          /* deep slate */
  --surface:#0b1222;
  --muted:#0f1b33;
  --text:rgba(255,255,255,.86);
  --muted-text:rgba(255,255,255,.65);
  --accent:#16a34a;      /* green */
  --accent-2:#fb923c;    /* orange */
  --card: #0b1224;
  --border: rgba(255,255,255,.08);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;
  color:var(--text);
  background:linear-gradient(180deg,var(--bg),#0b1220 35%, var(--surface) 100%);
  line-height:1.65;
}

/* Utilities */
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.row{display:flex;align-items:center}
.center{align-items:center}
.center-text{text-align:center}
.center-wrap{align-items:center;flex-wrap:wrap}
.space-between{justify-content:space-between}
.gap-8{gap:.5rem}.gap-12{gap:.75rem}.gap-16{gap:1rem}.gap-24{gap:1.5rem}
.mt-24{margin-top:1.5rem}
.narrow{max-width:800px;margin-inline:auto}
.link{color:var(--text);text-decoration:none;border-bottom:1px dashed rgba(255,255,255,.35)}
.link:hover{color:#fff;border-bottom-color:transparent}

/* Announcement */
.announce{background:rgba(22,163,74,.1);border-bottom:1px solid var(--border);padding:.5rem 0}
.badge{display:inline-block;padding:.25rem .6rem;border-radius:999px;background:var(--accent);color:#03110a;font-weight:700;font-size:.75rem}
.badge--outline{background:transparent;border:1px solid var(--border);color:var(--text)}

/* Header */
.header{position:sticky;top:0;z-index:50;background:rgba(15,23,42,.7);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:.6rem;color:#fff;text-decoration:none;font-weight:800}
.logo{width:28px;height:28px;color:var(--accent)}
.nav{display:flex;gap:1rem;align-items:center}
.nav__link{color:var(--muted-text);text-decoration:none}
.nav__link:hover{color:#fff}
.btn{display:inline-block;background:var(--accent);color:#04120a;text-decoration:none;padding:.75rem 1.1rem;border-radius:999px;font-weight:700;box-shadow:var(--shadow)}
.btn--ghost{background:transparent;border:1px solid var(--border);color:#fff}
.btn--outline{background:transparent;border:1px solid var(--accent);color:#fff}
.btn--lg{padding:1rem 1.25rem}
.btn--block{display:block;width:100%}
.nav-toggle{display:none;background:none;border:0;cursor:pointer}
.nav-toggle span{display:block;width:22px;height:2px;background:#fff;margin:5px 0;transition:.3s}

/* Hero */
.hero{position:relative;padding:64px 0 32px;overflow:hidden}
.hero .shape{position:absolute;inset:auto -15% -25% -15%;height:45vh;background:radial-gradient(60% 60% at 50% 50%, rgba(22,163,74,.25), transparent 60%);filter:blur(60px);pointer-events:none}
.eyebrow{display:inline-block;font-weight:700;color:var(--accent-2);letter-spacing:.02em;margin-bottom:.35rem}
.hero h1{font-size:clamp(32px,4vw,56px);line-height:1.1;margin:.25rem 0 .5rem}
.hero p{color:var(--muted-text);max-width:60ch}
.hero__image .image-card{position:relative;border-radius:22px;overflow:hidden;box-shadow:var(--shadow);background:#000}
.hero__image img{display:block;width:100%;height:auto;object-fit:cover;aspect-ratio:4/3}
.chip{position:absolute;left:12px;bottom:12px;background:rgba(3,10,8,.65);backdrop-filter:blur(6px);padding:.35rem .6rem;border-radius:999px;border:1px solid var(--border);font-size:.8rem}

/* Sections */
.section{padding:72px 0;border-top:1px solid var(--border)}
.section--muted{background:linear-gradient(180deg,var(--surface),var(--muted))}
.section__title{font-size:clamp(24px,2.5vw,36px);margin:0 0 .3rem;font-weight:800}
.section__subtitle{color:var(--muted-text);margin:0 auto 1rem;max-width:70ch}

/* Cards */
.card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:18px;box-shadow:var(--shadow)}
.panel{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:18px}
.icon{font-size:24px}
.event__meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}
.price{font-size:1.4rem;font-weight:800;color:#fff;margin:.25rem 0}

/* Stats */
.stats .stat{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:16px;text-align:center}
.stat__value{font-size:clamp(28px,4vw,40px);font-weight:800}
.stat__label{color:var(--muted-text);font-size:.9rem}

/* Lists */
.list{margin:0;padding-left:1.2rem}
.list li{margin:.25rem 0}
.small li{font-size:.95rem}
.tiny{font-size:.8rem}

/* Quotes */
.quote{background:var(--card);border-left:4px solid var(--accent);padding:18px;border-radius:12px}
.quote p{margin:0 0 .5rem}

/* Contact */
.form .field{display:block;width:100%}
.form .field span{display:block;font-weight:600;margin-bottom:.35rem}
.form input,.form textarea{width:100%;padding:.8rem 1rem;border-radius:10px;border:1px solid var(--border);background:#0b1326;color:#fff}
.form__status{margin-top:.5rem}

/* Footer */
.footer{border-top:1px solid var(--border);padding:18px 0;color:var(--muted-text)}

/* Layout grids */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}

/* Reveal animations */
.reveal-up{opacity:0;transform:translateY(16px);transition:.7s ease}
.reveal-up.is-visible{opacity:1;transform:none}

/* Responsive */
@media (max-width: 980px){
  .nav{display:none;position:absolute;top:64px;right:20px;background:#0b1326;border:1px solid var(--border);border-radius:14px;padding:12px;flex-direction:column;min-width:240px;box-shadow:var(--shadow)}
  .nav.show{display:flex}
  .nav-toggle{display:block}
  .grid-2{grid-template-columns:1fr}
}
@media (max-width: 760px){
  .grid-3{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,1fr)}
}