/* Peterpan — Dark Cinematic Rock Theme */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --midnight: #0a0f1e;
  --night: #0f1629;
  --dark: #141b2d;
  --slate: #1e2740;
  --blue: #3b82f6;
  --blue-glow: #60a5fa;
  --gold: #d4a017;
  --gold-light: #f0d060;
  --text: #e8ecf4;
  --muted: #7a869a;
  --border: rgba(59,130,246,0.12);
  --gradient-hero: linear-gradient(135deg, #0a0f1e 0%, #0f1629 40%, #1a1040 100%);
  --gradient-blue: linear-gradient(135deg, #3b82f6, #60a5fa);
  --gradient-gold: linear-gradient(135deg, #d4a017, #f0d060);
  --shadow: 0 4px 30px rgba(59,130,246,0.15);
  --shadow-lg: 0 8px 40px rgba(59,130,246,0.2);
  --radius: 16px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:5rem; }
body { font-family:'Inter',sans-serif; background:var(--midnight); color:var(--text); line-height:1.7; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
a { color:var(--blue-glow); text-decoration:none; transition:all 0.3s; }
a:hover { color:var(--gold); }

/* ── NAV ── */
.navbar { position:fixed; top:0; left:0; right:0; z-index:1000; background:rgba(10,15,30,0.92); backdrop-filter:blur(25px); -webkit-backdrop-filter:blur(25px); border-bottom:1px solid var(--border); padding:0 1.5rem; height:60px; display:flex; align-items:center; justify-content:space-between; }
.nav-logo { font-family:'Playfair Display',serif; font-size:1.4rem; font-weight:900; color:var(--text); letter-spacing:-0.02em; }
.nav-logo span { color:var(--blue); }
.nav-links { display:flex; gap:1.5rem; list-style:none; }
.nav-links a { color:var(--muted); font-size:0.85rem; font-weight:500; }
.nav-links a:hover,.nav-links a.active { color:var(--blue-glow); }
.nav-cta { padding:0.5rem 1.2rem; background:var(--gradient-blue); color:white; border-radius:50px; font-weight:700; font-size:0.8rem; }
.nav-cta:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.hamburger { display:none; background:none; border:none; cursor:pointer; }
.hamburger span { display:block; width:22px; height:2px; background:var(--text); margin:5px 0; border-radius:2px; }

/* ── HERO ── */
.hero { min-height:100vh; background:var(--gradient-hero); display:flex; align-items:center; justify-content:center; text-align:center; position:relative; overflow:hidden; padding:6rem 1.5rem 4rem; }
.hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 80% 60% at 50% 20%, rgba(59,130,246,0.08) 0%, transparent 70%); }
.hero::after { content:''; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%233b82f6' fill-opacity='0.02'%3E%3Ccircle cx='20' cy='20' r='1'/%3E%3C/g%3E%3C/svg%3E"); }
.hero-content { position:relative; z-index:1; max-width:700px; }
.hero-badge { display:inline-flex; align-items:center; gap:0.4rem; padding:0.4rem 1rem; background:rgba(59,130,246,0.1); border:1px solid rgba(59,130,246,0.2); border-radius:50px; font-size:0.75rem; font-weight:600; color:var(--blue-glow); text-transform:uppercase; letter-spacing:0.1em; margin-bottom:2rem; }
.hero-badge-dot { width:6px; height:6px; background:var(--blue); border-radius:50%; animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:.4} }
.hero-year { font-size:0.9rem; letter-spacing:0.3em; color:var(--gold); text-transform:uppercase; margin-bottom:1rem; }
.hero-title { font-family:'Playfair Display',serif; font-size:clamp(3.5rem,12vw,7rem); font-weight:900; color:var(--text); line-height:1.1; margin-bottom:1rem; text-shadow:0 0 80px rgba(59,130,246,0.2); }
.hero-subtitle { font-size:1rem; color:var(--muted); letter-spacing:0.15em; text-transform:uppercase; }
.hero-tagline { font-family:'Playfair Display',serif; font-style:italic; font-size:1.1rem; color:rgba(212,160,23,0.4); margin-top:1.5rem; max-width:500px; margin-left:auto; margin-right:auto; }
.hero-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:2.5rem; }

.btn { padding:0.85rem 2rem; border-radius:50px; font-weight:700; font-size:0.9rem; text-decoration:none; transition:all 0.3s; display:inline-flex; align-items:center; gap:0.5rem; }
.btn:hover { transform:translateY(-2px); }
.btn-primary { background:var(--gradient-blue); color:white; box-shadow:0 4px 20px rgba(59,130,246,0.3); }
.btn-primary:hover { box-shadow:0 8px 30px rgba(59,130,246,0.4); }
.btn-secondary { background:transparent; color:var(--text); border:1px solid rgba(255,255,255,0.15); }
.btn-secondary:hover { border-color:var(--blue); background:rgba(59,130,246,0.05); }
.btn-gold { background:var(--gradient-gold); color:var(--midnight); box-shadow:0 4px 20px rgba(212,160,23,0.3); }

/* ── STATS ── */
.stats-bar { background:var(--night); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:2rem 1.5rem; }
.stats-grid { max-width:1000px; margin:0 auto; display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; text-align:center; }
.stat-num { font-size:2rem; font-weight:900; color:var(--blue-glow); font-family:'Playfair Display',serif; }
.stat-label { font-size:0.7rem; text-transform:uppercase; letter-spacing:0.12em; color:var(--muted); margin-top:0.25rem; }

/* ── SECTIONS ── */
.section { padding:5rem 1.5rem; }
.section-alt { background:var(--night); }
.container { max-width:1100px; margin:0 auto; }
.section-label { font-size:0.7rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--blue); margin-bottom:0.5rem; }
.section-title { font-family:'Playfair Display',serif; font-size:clamp(1.8rem,4vw,2.8rem); font-weight:800; line-height:1.2; margin-bottom:1rem; }
.section-desc { color:var(--muted); max-width:540px; line-height:1.75; margin-bottom:2.5rem; }

/* ── CARDS ── */
.card { background:var(--dark); border-radius:var(--radius); border:1px solid var(--border); overflow:hidden; transition:transform 0.3s, box-shadow 0.3s; }
.card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.card-img { aspect-ratio:16/9; background:var(--slate); position:relative; overflow:hidden; }
.card-img img { width:100%; height:100%; object-fit:cover; display:block; }
.card-body { padding:1.25rem; }
.card-title { font-weight:700; font-size:1rem; margin-bottom:0.5rem; color:var(--text); }
.card-text { font-size:0.85rem; color:var(--muted); line-height:1.6; }
.card-badge { display:inline-block; padding:0.2rem 0.6rem; background:rgba(59,130,246,0.1); color:var(--blue-glow); border-radius:50px; font-size:0.7rem; font-weight:700; }

/* ── VIDEO ── */
.video-card { background:var(--dark); border-radius:var(--radius); overflow:hidden; transition:transform 0.3s, box-shadow 0.3s; }
.video-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.video-thumb { position:relative; aspect-ratio:16/9; background:#000; overflow:hidden; }
.video-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.video-thumb .play-btn { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.3); opacity:0; transition:opacity 0.3s; }
.video-card:hover .play-btn { opacity:1; }
.play-icon { width:50px; height:50px; background:var(--gradient-blue); border-radius:50%; display:flex; align-items:center; justify-content:center; }

/* ── TIMELINE ── */
.timeline { position:relative; padding-left:2rem; }
.timeline::before { content:''; position:absolute; left:0.5rem; top:0; bottom:0; width:2px; background:linear-gradient(to bottom, var(--blue), var(--gold)); }
.timeline-item { position:relative; margin-bottom:2rem; padding-left:1.5rem; }
.timeline-item::before { content:''; position:absolute; left:-1.6rem; top:0.3rem; width:12px; height:12px; border-radius:50%; background:var(--blue); border:3px solid var(--midnight); box-shadow:0 0 0 3px var(--blue); }
.timeline-year { font-size:0.75rem; font-weight:800; color:var(--gold); text-transform:uppercase; letter-spacing:0.1em; }
.timeline-title { font-weight:700; font-size:1.05rem; margin:0.3rem 0; }
.timeline-desc { font-size:0.85rem; color:var(--muted); line-height:1.7; }

/* ── SONGS ── */
.song-item { display:flex; align-items:center; gap:1rem; padding:1rem 1.25rem; border-radius:12px; transition:background 0.2s; }
.song-item:hover { background:rgba(59,130,246,0.05); }
.song-num { width:2rem; text-align:center; font-weight:800; color:var(--blue); font-size:0.85rem; }
.song-info { flex:1; }
.song-title { font-weight:700; font-size:0.95rem; }
.song-meta { font-size:0.75rem; color:var(--muted); }
.song-tier { font-size:0.65rem; padding:0.15rem 0.5rem; border-radius:50px; font-weight:700; }
.song-tier.legendary { background:rgba(212,160,23,0.15); color:var(--gold); }
.song-tier.hit { background:rgba(59,130,246,0.12); color:var(--blue-glow); }
.song-tier.popular { background:rgba(122,134,154,0.15); color:var(--muted); }

/* ── MEMBER ── */
.member-card { background:var(--dark); border-radius:var(--radius); border:1px solid var(--border); padding:1.5rem; text-align:center; transition:border-color 0.3s; }
.member-card:hover { border-color:var(--blue); }
.member-avatar { width:80px; height:80px; border-radius:50%; background:var(--gradient-blue); display:flex; align-items:center; justify-content:center; margin:0 auto 1rem; font-size:1.5rem; font-weight:900; color:white; font-family:'Playfair Display',serif; }
.member-name { font-weight:800; font-size:1.1rem; }
.member-role { font-size:0.8rem; color:var(--blue-glow); margin-top:0.25rem; }
.member-years { font-size:0.75rem; color:var(--muted); margin-top:0.5rem; }
.member-status-former { opacity:0.6; }

/* ── QUOTES ── */
.quote-card { padding:2rem; border-radius:var(--radius); background:rgba(59,130,246,0.05); border-left:4px solid var(--blue); margin:1.5rem 0; }
.quote-text { font-family:'Playfair Display',serif; font-size:1.1rem; font-style:italic; line-height:1.8; }
.quote-source { font-size:0.8rem; color:var(--gold); font-weight:700; margin-top:0.75rem; }

/* ── AWARDS ── */
.award-item { display:flex; gap:1rem; align-items:flex-start; padding:1.25rem; border-radius:12px; background:var(--dark); border:1px solid var(--border); margin-bottom:0.75rem; }
.award-year { font-size:0.75rem; font-weight:800; color:var(--gold); min-width:3rem; }
.award-title { font-weight:700; font-size:0.95rem; }
.award-cat { font-size:0.8rem; color:var(--muted); }

/* ── FAN CLUB ── */
.fanclub-hero { background:var(--gradient-hero); padding:8rem 1.5rem 4rem; text-align:center; position:relative; }
.fanclub-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 30%, rgba(212,160,23,0.08), transparent 60%); }
.fanclub-form { max-width:500px; margin:0 auto; background:var(--dark); border-radius:24px; padding:2.5rem; box-shadow:var(--shadow-lg); border:1px solid var(--border); }
.form-group { margin-bottom:1.25rem; }
.form-label { display:block; font-size:0.8rem; font-weight:700; color:var(--text); margin-bottom:0.4rem; }
.form-input { width:100%; padding:0.85rem 1rem; border:2px solid var(--border); border-radius:12px; font-family:inherit; font-size:0.9rem; background:var(--night); color:var(--text); transition:border-color 0.2s; }
.form-input:focus { outline:none; border-color:var(--blue); }
.form-select { appearance:none; cursor:pointer; }
.form-submit { width:100%; padding:1rem; background:var(--gradient-blue); color:white; border:none; border-radius:50px; font-family:inherit; font-size:1rem; font-weight:800; cursor:pointer; transition:all 0.3s; text-transform:uppercase; letter-spacing:0.1em; }
.form-submit:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }

/* ── FOOTER ── */
footer { background:var(--midnight); color:var(--muted); padding:3rem 1.5rem 2rem; text-align:center; border-top:1px solid var(--border); }
.footer-logo { font-family:'Playfair Display',serif; font-size:1.5rem; font-weight:900; color:var(--text); margin-bottom:1rem; }
.footer-logo span { color:var(--blue); }
.footer-links { display:flex; flex-wrap:wrap; justify-content:center; gap:1.5rem; margin:1.5rem 0; }
.footer-links a { color:var(--muted); font-size:0.85rem; }
.footer-links a:hover { color:var(--blue-glow); }
.footer-copy { font-size:0.75rem; margin-top:1.5rem; }

/* ── MOBILE BOTTOM NAV ── */
.bottom-nav { display:none; position:fixed; bottom:0; left:0; right:0; z-index:1000; background:rgba(10,15,30,0.96); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-top:1px solid var(--border); padding-bottom:env(safe-area-inset-bottom,0); }
.bottom-nav-inner { display:grid; grid-template-columns:repeat(5,1fr); height:60px; }
.bottom-nav a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; color:var(--muted); font-size:0.6rem; font-weight:600; text-decoration:none; transition:color 0.2s; }
.bottom-nav a:active { transform:scale(0.92); }
.bottom-nav a.active { color:var(--blue-glow); }
.bottom-nav svg { width:20px; height:20px; }
.bottom-nav .fan-btn { display:flex; flex-direction:column; align-items:center; gap:2px; }
.bottom-nav .fan-circle { width:42px; height:42px; background:var(--gradient-blue); border-radius:50%; display:flex; align-items:center; justify-content:center; margin-top:-18px; box-shadow:0 4px 15px rgba(59,130,246,0.3); }
.bottom-nav .fan-circle svg { width:20px; height:20px; color:white; }
.bottom-nav .fan-btn span { color:var(--blue-glow); margin-top:2px; }
.bottom-spacer { display:none; height:60px; }

/* ── RESPONSIVE ── */
@media (max-width:768px) {
  .nav-links,.nav-cta { display:none; }
  .hamburger { display:flex; flex-direction:column; }
  .bottom-nav { display:block; }
  .bottom-spacer { display:block; }
  footer { padding-bottom:5rem; }
  .stats-grid { grid-template-columns:repeat(3,1fr); }
  .section { padding:3rem 1rem; }
}
@media (min-width:769px) { .navbar { padding:0 3rem; } }

.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
@media (max-width:768px) { .grid-2,.grid-3 { grid-template-columns:1fr; } }

/* Article content */
.article-content h2 { font-family:'Playfair Display',serif; font-size:1.5rem; font-weight:700; margin:2rem 0 1rem; color:var(--text); border-bottom:2px solid var(--border); padding-bottom:0.5rem; }
.article-content h3 { font-size:1.2rem; font-weight:700; margin:1.5rem 0 0.5rem; color:var(--blue-glow); }
.article-content p { color:var(--muted); margin-bottom:1rem; line-height:1.85; }
.article-content strong { color:var(--text); }
.article-content em { color:var(--gold); }