/* Main stylesheet for Lucky Clover Botanical Academy -- Dark Forest style */
:root{
  --accent:#2ea04f;
  --accent-dark:#1b6a34;
  --bg-url: url('https://images.unsplash.com/photo-1591124247703-555dba788f8d?auto=format&fit=crop&w=1920&q=80');
  --card: rgba(255,255,255,0.06);
  --muted: rgba(255,255,255,0.8);
  --max-width:1100px;
  --shadow:0 8px 30px rgba(6,18,12,0.45);
  --radius:12px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, Arial, sans-serif;
  background-image: linear-gradient(120deg, rgba(5,60,20,0.6), rgba(4,30,15,0.6)), var(--bg-url);
  background-size: cover;background-position:center center;color:#f7fff6;line-height:1.5;padding-bottom:80px;
}
main{max-width:var(--max-width);margin:32px auto;padding:20px}
.nav{width:100%;position:fixed;top:16px;left:0;right:0;display:flex;align-items:center;justify-content:center;z-index:9999}
.nav-inner{width:calc(100% - 48px);max-width:1200px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 18px;border-radius:18px;background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.12));box-shadow:var(--shadow);backdrop-filter: blur(8px) saturate(1.1)}
.brand{display:flex;gap:12px;align-items:center;font-weight:700;letter-spacing:0.2px}
.logo{width:48px;height:48px;border-radius:10px;display:inline-grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent-dark));box-shadow:0 4px 14px rgba(20,80,30,0.25);font-size:22px}
nav ul{list-style:none;margin:0;padding:0;display:flex;gap:12px;align-items:center}
nav a{color:var(--muted);text-decoration:none;padding:8px 12px;border-radius:10px;transition:all .18s cubic-bezier(.2,.9,.3,1)}
nav a:hover,nav a.active{background:rgba(255,255,255,0.06);color:white;transform:translateY(-2px)}
.cta{background:linear-gradient(90deg,var(--accent),#7ad98b);color:#003107;padding:8px 14px;border-radius:10px;font-weight:700}
.hamburger{display:none;cursor:pointer;padding:6px;border-radius:8px}
.hamburger div{width:22px;height:2px;background:white;margin:4px 0;border-radius:2px}
.hero{margin-top:86px;display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:start}
.hero-card{background:linear-gradient(180deg, rgba(0,0,0,0.22), rgba(0,0,0,0.38));padding:28px;border-radius:18px;box-shadow:var(--shadow);backdrop-filter: blur(6px)}
.hero h1{margin:0;font-size:46px;line-height:1.02}
.hero p.lead{font-size:18px;color:rgba(255,255,255,0.92);margin-top:10px}
.quick-stats{display:flex;gap:12px;margin-top:18px}
.stat{background:var(--card);padding:12px;border-radius:12px;min-width:120px;text-align:center}
.section-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:18px}
.card{background:var(--card);padding:18px;border-radius:14px;box-shadow:0 6px 20px rgba(2,10,6,0.35)}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gallery-item{position:relative;border-radius:12px;overflow:hidden}
.gallery-item img{width:100%;height:200px;object-fit:cover;display:block;transition:transform .35s cubic-bezier(.2,.9,.3,1)}
.gallery-item:hover img{transform:scale(1.06)}
.lightbox{position:fixed;inset:0;background:rgba(2,6,2,0.82);display:none;align-items:center;justify-content:center;z-index:9998}
.lightbox img{max-width:90%;max-height:84%;border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,0.8)}
@media (max-width:980px){.hero{grid-template-columns:1fr}.section-grid{grid-template-columns:1fr}.hamburger{display:block}nav ul{display:none}.nav-inner{padding:10px}}
@media (max-width:560px){.gallery-grid{grid-template-columns:1fr}}
footer{margin-top:36px;padding:28px;border-radius:14px;background:linear-gradient(180deg, rgba(0,0,0,0.4), rgba(0,0,0,0.5));text-align:center}
.small{font-size:13px}
.kbd{background:rgba(0,0,0,0.2);padding:6px 8px;border-radius:6px;font-weight:700}