:root {
    --bg1:#0b0b10;
    --bg2:#060607;
    --neon:#ffcb3c;
    --pink:#f72585;
    --blue:#4361ee;
    --cyan:#4cc9f0;
    --grid: rgba(255,255,255,.06);
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: sans-serif;
    color: #fff;
    background: radial-gradient(1200px 700px at 50% -10%, var(--bg1) 0%, var(--bg2) 55%, #000 100%);
    overflow-x: hidden;
    line-height: 1.5;
}

/* Layout */
.container { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }
.section { padding: 4rem 0; }

/* Header */
.header { border-bottom: 1px solid rgba(63,63,70,.7); }
.header-inner { display:flex; align-items:center; justify-content:space-between; padding:0.75rem 0; }
.logo { font-size:14px; font-weight:700; color:var(--neon); }
.nav { display:flex; gap:1.5rem; font-size:15px; }
.nav a { color:#fff; font-weight:600; transition: color .3s, text-shadow .3s; }
.nav a:hover { color: var(--neon); text-shadow:0 0 8px var(--neon); }

/* Hero */
.hero { text-align:center; padding:6rem 1.5rem; }
.hero-title { font-size:3rem; font-weight:800; margin-bottom:1rem; color:var(--neon); }
.hero-subtitle { font-size:1.125rem; color:#ccc; margin-bottom:1.5rem; }

/* Features */
.features {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    justify-items: center;
}
.features .card { width:100%; max-width:420px; text-align:center; }
.full-width { grid-column:1/-1; }

/* Ranking */
.ranking ul { display:grid; gap:0.5rem; }
.ranking-item {
    display:flex; justify-content:space-between; align-items:center;
    background: rgba(24,24,27,.7);
    padding:0.4rem 0.75rem;
    border:1px solid rgba(63,63,70,.7);
    border-radius:0.6rem;
    font-size:0.85rem;
}
.ranking-item .left { display:flex; align-items:center; gap:0.5rem; }
.ranking-item .lvl { color:#bbb; }

/* FAQ */
.faq-heading {
    font-size: 2rem;
    font-weight: 800;
    color: var(--neon);
    text-align: center;
    margin-bottom: 2.5rem;
}

.faq .faq-item { margin-bottom:1rem; }
.faq-question {
    width:100%; padding:1rem 1.5rem;
    font-weight:bold; display:flex; justify-content:space-between;
    cursor:pointer; background:none; border:none; color:#fff;
}
.arrow { transition:transform 0.3s; }
.faq-item.active .arrow { transform:rotate(180deg); }
.faq-content {
    max-height:0; overflow:hidden; opacity:0; transform:translateY(-6px);
    transition: all 0.4s ease; padding:0 1.5rem;
}
.faq-item.active .faq-content {
    max-height:600px; opacity:1; transform:translateY(0);
    padding:1rem 1.5rem 1.5rem;
}
.faq-item.active {
    border-color: var(--neon);
    box-shadow: 0 0 15px var(--neon), 0 0 30px rgba(255,193,7,0.5);
    animation: pulseGlow 2s infinite ease-in-out;
}
@keyframes pulseGlow {
    0% { box-shadow:0 0 10px var(--neon), 0 0 20px rgba(255,193,7,0.4); }
    50% { box-shadow:0 0 25px var(--neon), 0 0 40px rgba(255,193,7,0.6); }
    100% { box-shadow:0 0 10px var(--neon), 0 0 20px rgba(255,193,7,0.4); }
}

/* Footer */
.footer { border-top:1px solid rgba(63,63,70,.7); padding:1.5rem 0; font-size:14px; color:#aaa; text-align:center; }
.footer-inner { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.footer-links { display:flex; gap:0.75rem; }
.footer a:hover { color:#fff; }
.footer a {
    color: #fff;                  /* białe linki */
    font-weight: 600;
    transition: color .3s, text-shadow .3s;
}

.footer a:hover {
    color: var(--neon);           /* żółty neon przy hoverze */
    text-shadow: 0 0 8px var(--neon);
}

/* Cards & buttons */
.glass { background:rgba(24,24,27,.6); backdrop-filter:blur(12px); }
.card { background:rgba(24,24,27,.7); border:1px solid rgba(63,63,70,.7); border-radius:1rem; padding:1.5rem; transition:transform .25s, box-shadow .25s; }
.card:hover { transform:translateY(-4px) scale(1.02); box-shadow:0 10px 40px rgba(0,0,0,.4); }
.btn-neon { background:var(--neon); color:#000; font-weight:700; border-radius:0.75rem; padding:0.6rem 1.2rem; box-shadow:0 0 20px rgba(255,193,7,.5); transition:.3s; }
.btn-neon:hover { box-shadow:0 0 36px var(--neon); transform:scale(1.05); }

/* Background Aura */
.bg-aura::before {
    content:""; position:fixed; inset:-25%; z-index:-2;
    filter:blur(80px) saturate(1.1); opacity:.28;
    background: conic-gradient(from 0deg, var(--pink), var(--blue), var(--cyan), var(--neon), var(--pink));
    animation: spin 26s linear infinite;
}
.bg-aura::after {
    content:""; position:fixed; inset:0; z-index:-1; opacity:.18;
    background-image: linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
    background-size:48px 48px;
}

/* === Wyróżnienie karty TAG WÓDA (baner szerokości) === */
.tag-card {
    width: 50vw;
    margin: 0 auto;
    padding: 3rem 0; /* już bez bocznych paddingów, bo container zrobi swoje */
    text-align: center;
    background: rgba(24,24,27,.85);
    border: 2px solid var(--neon);
    border-radius: 1.25rem;
    box-shadow: 0 0 30px rgba(255,193,7,0.6);
}

.tag-card h3,
.tag-card p {
    max-width: 500px;   /* ograniczenie szerokości */
    margin-left: auto;  /* wyśrodkowanie */
    margin-right: auto; /* wyśrodkowanie */
}


/* muzyka */

.music-player {
    margin-top: -4rem;
    text-align: center;
}
#playMusic {
    cursor: pointer;
}

/* plynny scroll  */
html {
  scroll-behavior: smooth;
}



@keyframes spin { to { transform:rotate(360deg); } }