*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Arial,Helvetica,sans-serif;background:#050510;color:#fff;overflow-x:hidden}

/* BACKGROUND */
#bgCanvas{position:fixed;inset:0;z-index:-1}

/* HEADER */
header{position:fixed;top:0;width:100%;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);z-index:100}
nav{display:flex;justify-content:space-between;align-items:center;padding:15px 30px}
.logo{color:#00ffff;font-size:22px;font-weight:bold;text-decoration:none}
.nav-links{list-style:none;display:flex;gap:25px}
.nav-links a{color:#ddd;text-decoration:none;position:relative;font-weight:500}
.nav-links a:hover,.nav-links a.active{color:#00ffff}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:linear-gradient(90deg,#00ffff,#7c3aed);transition:.3s}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.mobile-btn{display:none;font-size:28px;color:#00ffff;cursor:pointer}

/* MOBILE MENU */
.mobile-nav{position:fixed;inset:0;background:rgba(5,5,16,.95);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:30px;transform:translateY(-100%);transition:.4s;z-index:200}
.mobile-nav.active{transform:translateY(0)}
.mobile-nav a{font-size:26px;color:#00ffff;text-decoration:none}
.close-btn{position:absolute;top:20px;right:25px;font-size:32px;cursor:pointer}

/* HERO */
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;padding-top:80px;text-align:center}
.hero h1{font-size:64px;margin-bottom:10px}
.hero p{font-size:18px;opacity:.9}

/* SECTIONS */
.section{padding:100px 30px;text-align:center}
.section h2{font-size:38px;margin-bottom:15px}
.section p{max-width:900px;margin:0 auto 30px;opacity:.9}

/* CARDS */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:30px;max-width:1100px;margin:0 auto}
.card{padding:30px;border-radius:18px;background:rgba(255,255,255,.08);backdrop-filter:blur(14px);border:1px solid rgba(0,255,255,.3);box-shadow:0 0 20px rgba(0,255,255,.15);transition:.3s;text-align:center;font-size:18px;font-weight:bold;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px}
.card:hover{transform:translateY(-8px);box-shadow:0 0 35px rgba(0,255,255,.5)}

.card i{font-size:40px;color:#00ffff}

/* CHANNEL LOGOS */
.channel-logo img{max-width:120px;max-height:60px;filter:brightness(0) invert(1);opacity:.9;transition:.3s}
.channel-logo img:hover{opacity:1;transform:scale(1.1)}

/* CONTACT */
.contact-wrapper{display:flex;gap:40px;max-width:1100px;margin:0 auto;align-items:stretch}
.contact-card{flex:1;padding:40px;border-radius:20px;background:rgba(255,255,255,.08);backdrop-filter:blur(14px);border:1px solid rgba(0,255,255,.3);box-shadow:0 0 25px rgba(0,255,255,.25)}
.contact-card h3{color:#00ffff;margin-bottom:15px}
.contact-form{display:flex;flex-direction:column;gap:15px}
.contact-form input,.contact-form textarea{padding:14px;border-radius:8px;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.4);color:#fff}
.contact-form textarea{min-height:200px}
.contact-form button{padding:14px;border:none;border-radius:10px;background:linear-gradient(90deg,#00ffff,#7c3aed);font-weight:bold;cursor:pointer}
.form-success{margin-top:15px;padding:12px;border-radius:10px;background:#00ffff;color:#000;opacity:0;transform:translateY(10px);transition:.4s;text-align:center}
.form-success.show{opacity:1;transform:translateY(0)}

.contact-links{display:flex;flex-direction:column;gap:20px}
.contact-btn{text-decoration:none;padding:18px;border-radius:16px;font-size:18px;font-weight:bold;text-align:center;transition:.3s;color:#000}
.contact-btn:hover{transform:translateY(-5px)}
.whatsapp{background:#25D366}
.telegram{background:#2AABEE}
.email{background:linear-gradient(90deg,#00ffff,#7c3aed)}

/* SWIPER */
.swiper{padding:30px 0}
.swiper-slide{text-align:center;display:flex;align-items:center;justify-content:center}


/* FOOTER */
footer{padding:25px;text-align:center;background:rgba(0,0,0,.4)}

/* RESPONSIVE */
@media(max-width:900px){.contact-wrapper{flex-direction:column}}
@media(max-width:768px){.nav-links{display:none}.mobile-btn{display:block}}



.channel-chip {
  /* Alap háttér: enyhén áttetsző, kis gradient */
  background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding: 12px 20px;
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
  cursor: default;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.1);
}

/* Minden chiphez egyedi, kis színes gradient */
.channel-chip:nth-child(odd) {
  background: linear-gradient(135deg, rgba(255,99,71,0.2), rgba(255,69,0,0.1));
}
.channel-chip:nth-child(even) {
  background: linear-gradient(135deg, rgba(30,144,255,0.2), rgba(0,191,255,0.1));
}
.channel-chip:nth-child(3n) {
  background: linear-gradient(135deg, rgba(50,205,50,0.2), rgba(34,139,34,0.1));
}
.channel-chip:nth-child(4n) {
  background: linear-gradient(135deg, rgba(255,105,180,0.2), rgba(199,21,133,0.1));
}

/* Hover effekt: emelkedik és erősödik a gradient */
.channel-chip:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.25);
  background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.1));
  border-color: rgba(255,255,255,0.2);
}