/* style.css - Crvena Zvezda Fun-Club landing page */
:root{
  --bg:#070606; /* almost black */
  --red:#c8102e; /* vivid red */
  --red-dark:#9b0b24;
  --muted:#bdbdbd;
  --card:#0f0f10;
  --glass: rgba(255,255,255,0.04);
  --accent:#ffffff;
  --radius:12px;
}

*{box-sizing:border-box}
html, body{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; color:var(--accent); background: linear-gradient(180deg, var(--bg) 0%, #09090a 100%); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
body{min-height:100%; margin:0; line-height:1.5}
.container{max-width:1100px; margin:0 auto; padding:28px;}

/* Header */
.site-header{position:sticky; top:0; z-index:40; backdrop-filter: blur(6px); background:linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.25)); border-bottom:1px solid rgba(255,255,255,0.03)}
.header-inner{display:flex; align-items:center; gap:16px}
.brand{display:flex; align-items:center; gap:12px}
.logo{width:52px; height:52px; border-radius:10px; background:linear-gradient(135deg,var(--red),var(--red-dark)); display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--accent)}
.brand-text small{display:block; color:var(--muted); font-size:12px}
.main-nav{margin-left:20px; display:flex; gap:14px}
.main-nav a{color:var(--muted); text-decoration:none; font-weight:600}
.cta-wrap{margin-left:auto}
.btn{display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:10px; font-weight:700; cursor:pointer; text-decoration:none;}
.btn-primary{background:var(--red); color:white; border:1px solid rgba(0,0,0,0.2)}
.btn-outline{background:transparent; color:var(--accent); border:1px solid rgba(255,255,255,0.06)}
.btn-ghost{background:transparent; color:var(--muted); border:1px solid transparent}
.btn.small{padding:8px 10px; font-size:14px}

/* HERO */
.hero{padding:56px 0;}
.hero-grid{display:grid; grid-template-columns:1fr 420px; gap:28px; align-items:center}
.hero-content h1{font-size:34px; margin:0 0 12px}
.hero-content .lead{color:var(--muted); max-width:55ch}
.hero-actions{margin:18px 0; display:flex; gap:12px}
.hero-stats{display:flex; gap:18px; list-style:none; padding:0; margin:18px 0 0}
.hero-stats li{background:var(--glass); padding:10px 14px; border-radius:10px; text-align:center}
.hero-stats strong{display:block; font-size:18px}

.media-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.media-grid img{width:100%; height:140px; object-fit:cover; border-radius:10px; display:block; box-shadow:0 6px 18px rgba(0,0,0,0.6)}

/* Sections */
.section{padding:48px 0}
.section h2{font-size:26px; margin:0 0 8px}
.section-sub{color:var(--muted); margin-bottom:18px}
.dark-section{background:transparent}
.red-section{background:linear-gradient(180deg, rgba(200,16,46,0.06), rgba(0,0,0,0.02)); border-top:1px solid rgba(255,255,255,0.02); border-bottom:1px solid rgba(255,255,255,0.02)}

/* Team cards */
.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.player-card{background:var(--card); padding:18px; border-radius:14px; box-shadow:0 8px 20px rgba(0,0,0,0.6)}
.avatar{width:64px; height:64px; border-radius:50%; background:linear-gradient(135deg,var(--red),var(--red-dark)); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px; margin-bottom:10px}
.player-card h3{margin:6px 0}
.player-card .muted{color:var(--muted); font-weight:600; font-size:13px}
.player-card p{color:var(--muted); margin:10px 0}
.player-card .meta{display:flex; gap:12px; list-style:none; padding:0; color:var(--muted); font-size:13px}

/* About grid */
.about-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.about-grid h3{margin-top:0}

/* Merch */
.product-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.product-card{background:var(--card); padding:16px; border-radius:12px}
.product-thumb{height:120px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:22px; color:var(--accent); margin-bottom:10px}
.product-thumb-shirt{background:linear-gradient(135deg,var(--red-dark),#7f0a19)}
.product-thumb-scarf{background:linear-gradient(135deg,#8a0b1f,#5b060f)}
.product-thumb-cap{background:linear-gradient(135deg,#b3182f,#7a0c1a)}
.product-card h4{display:flex; justify-content:space-between; align-items:center; margin:0 0 6px}
.price{color:var(--muted); font-weight:700}
.product-card p{color:var(--muted); margin-bottom:12px}
.product-actions{display:flex; gap:8px}

/* FAQ */
.faq details{background:var(--card); padding:12px 16px; border-radius:10px; margin-bottom:10px}
.faq summary{cursor:pointer; font-weight:700}
.faq-body{color:var(--muted); margin-top:8px}

/* Contact */
.contact-grid{display:grid; grid-template-columns:1fr 340px; gap:22px}
.contact-form{background:var(--card); padding:18px; border-radius:12px}
.contact-form label{display:block; margin-top:10px; margin-bottom:6px; font-weight:600}
.contact-form input, .contact-form textarea, .contact-form select{width:100%; padding:10px; border-radius:8px; border:1px solid rgba(255,255,255,0.04); background:rgba(255,255,255,0.02); color:var(--accent)}
.form-foot{display:flex; align-items:center; gap:12px; margin-top:12px}
.contact-info{background:var(--card); padding:18px; border-radius:12px}
.contact-info img{width:100%; border-radius:10px; margin-top:12px}
.socials a{display:inline-block; margin-right:8px; color:var(--muted); text-decoration:none}

/* Footer */
.site-footer{border-top:1px solid rgba(255,255,255,0.03); padding:18px 0; margin-top:28px}
.footer-inner{display:flex; justify-content:space-between; align-items:center}
.footer-links a{color:var(--muted); margin-left:12px; text-decoration:none}

/* Responsive */
@media (max-width:920px){
  .hero-grid{grid-template-columns:1fr}
  .media-grid img{height:120px}
  .card-grid{grid-template-columns:repeat(2,1fr)}
  .about-grid{grid-template-columns:1fr}
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr}
  .main-nav{display:none}
}
@media (max-width:560px){
  .card-grid{grid-template-columns:1fr}
  .product-grid{grid-template-columns:1fr}
  .hero-content h1{font-size:22px}
  .logo{width:44px; height:44px}
  .container{padding:16px}
}