/* CSS dla strony głównej ScrumPokerPlanning.eu */
.highlight { color: var(--primary-dark); font-weight: 900; }
.section { padding: var(--space-20) 0; }
.section-header { text-align: center; margin-bottom: var(--space-16); max-width: 800px; margin-left: auto; margin-right: auto; }
.section-title { font-size: var(--text-4xl); font-weight: 900; margin-bottom: var(--space-6); color: var(--text-primary); }
.section-subtitle { font-size: var(--text-xl); color: var(--text-secondary); line-height: 1.6; }

/* HERO */
.hero { background: var(--bg-primary); padding: calc(var(--space-0) + var(--header-height)) var(--space-4) var(--space-8); position: relative; overflow: hidden; min-height: calc(100vh - var(--header-height)); display: flex; align-items: center; }
.hero > .container { display: flex; flex-direction: column; justify-content: space-between; min-height: calc(90vh - var(--header-height)); width: 100%; }
.hero-content { display: grid; grid-template-columns: 1.5fr 1fr; align-items: center; position: relative; z-index: 1; max-width: var(--container-max-width); margin: 0 auto; flex: 1; }
.hero-title { font-size: 3.5rem; font-weight: 900; line-height: 1.2; margin-bottom: var(--space-6); }
.hero-title .highlight { color: var(--primary-dark); display: block; }
.hero-subtitle { font-size: var(--text-2xl); font-weight: 400; color: var(--text-secondary); margin-bottom: var(--space-4); line-height: 1.2; }
.hero-tagline { font-size: var(--text-lg); color: var(--text-secondary); margin-bottom: var(--space-8); line-height: 1.6; }
.hero-actions { padding: 50px 0 50px 0px; display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: center; }
.hero-actions .btn-primary { background: var(--primary-dark); color: #1a1a1a; font-weight: 600; padding: 1.2rem 2rem; font-size: var(--text-xl); border-radius: var(--radius-lg); box-shadow: 0 4px 6px -1px rgba(250, 204, 21, 0.3); }
.hero-actions .btn-primary:hover { background: var(--primary-color); transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(250, 204, 21, 0.4); }
.hero-visual { display: flex; justify-content: center; align-items: center; }
.hero-image { max-width: 500px; width: 100%; height: auto; filter: drop-shadow(0 10px 30px rgba(250, 204, 21, 0.2)); }
.hero-keywords { text-align: left; padding: 0; font-size: var(--text-sm); color: var(--text-muted); font-family: var(--font-family-mono); }

/* TWOJE POKOJE */
.player-rooms { padding: var(--space-20) 0; background: var(--bg-secondary); }
.rooms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-6); margin-top: var(--space-6); margin-bottom: var(--space-8); }
.room-card { background: var(--bg-card); border: 2px solid var(--border-color); border-radius: var(--radius-xl); padding: var(--space-6); transition: all var(--transition-normal); position: relative; display: flex; flex-direction: column; }
.room-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl);  }
.room-card:hover::before { transform: scaleY(1); }
.room-card.room-owned { border-color: var(--primary-dark); background: linear-gradient(135deg, var(--bg-card) 0%, rgba(250, 204, 21, 0.05) 100%); }
.room-card.room-owned::before { background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-dark) 100%); transform: scaleY(1); }
.room-header { margin-bottom: var(--space-4); }
.room-name { font-size: var(--text-xl); font-weight: 600; color: var(--text-primary); margin: 0; display: flex; align-items: center; gap: var(--space-2); flex: 1; word-break: break-word; }
.owner-badge { font-size: var(--text-lg); display: inline-block; animation: pulse 2s ease-in-out infinite; filter: drop-shadow(0 2px 4px rgba(250, 204, 21, 0.3)); }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.room-code { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: var(--primary-dark); color: var(--text-primary); font-weight: 700; padding: var(--space-2) var(--space-6); border-radius: var(--radius-full); font-size: var(--text-sm); box-shadow: none; white-space: nowrap; letter-spacing: 0.5px; }
.room-description { color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.5; margin: 0 0 var(--space-4); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.room-meta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--border-color); }
.room-meta span { font-size: var(--text-xs); color: var(--text-secondary); display: flex; align-items: center; gap: var(--space-1); }
.room-deck { background: rgba(250, 204, 21, 0.1); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font-weight: 500; }
.room-role { background: rgba(56, 189, 248, 0.1); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font-weight: 500; color: var(--secondary-color); }
.room-actions { display: flex; gap: var(--space-2); margin-top: auto; }
.room-actions .btn { flex: 1; justify-content: center; }
.rooms-actions { text-align: center; margin-top: var(--space-8); }
.rooms-empty { text-align: center; padding: var(--space-16) var(--space-4); background: var(--bg-card); border-radius: var(--radius-xl); border: 2px dashed var(--border-color); }
.rooms-empty-icon { font-size: 4rem; margin-bottom: var(--space-4); opacity: 0.5; }
.rooms-empty-title { font-size: var(--text-2xl); font-weight: 600; margin-bottom: var(--space-3); color: var(--text-primary); }
.rooms-empty-text { color: var(--text-secondary); margin-bottom: var(--space-6); max-width: 500px; margin-left: auto; margin-right: auto; }

/* FEATURES */
.features { padding: var(--space-20) 0; background: var(--bg-primary); }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-8); }
.feature-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: var(--space-8); text-align: left; transition: all var(--transition-normal); position: relative; overflow: hidden; }
.feature-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(250, 204, 21, 0.05), transparent); transition: left var(--transition-slow); }
.feature-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); border-color: var(--primary-dark); }
.feature-card:hover::before { left: 100%; }
.feature-icon { font-size: 3rem; margin-bottom: var(--space-4); display: block; text-align: center; }
.feature-title { font-size: var(--text-xl); font-weight: 700; margin-bottom: var(--space-4); color: var(--text-primary); text-align: center; }
.feature-description { color: var(--text-secondary); line-height: 1.6; margin: 0; text-align: justify; }

/* CENNIK */
.pricing { padding: var(--space-20) 0; background: var(--bg-secondary); text-align: center; }
.pricing-card { max-width: 500px; margin: 0 auto; background: var(--bg-card); border: 3px solid var(--primary-dark); border-radius: var(--radius-2xl); padding: var(--space-10); box-shadow: 0 10px 30px rgba(250, 204, 21, 0.2); position: relative; }
.pricing-badge { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: var(--primary-dark); color: #1a1a1a; font-weight: 700; padding: var(--space-2) var(--space-6); border-radius: var(--radius-full); font-size: var(--text-sm); box-shadow: 0 4px 6px -1px rgba(250, 204, 21, 0.4); }
.pricing-name { font-size: var(--text-2xl); font-weight: 700; margin-bottom: var(--space-4); color: var(--text-secondary); }
.pricing-price { font-size: 4rem; font-weight: 900; color: var(--text-primary); margin-bottom: var(--space-2); line-height: 1; margin-left: 2.5rem;}
.pricing-period { font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--space-8); }
.pricing-features { list-style: none; margin-bottom: var(--space-8); text-align: left; }
.pricing-features li { padding: var(--space-3) 0; border-bottom: 1px solid var(--border-color); display: block; align-items: flex-start; gap: var(--space-3); color: var(--text-secondary);}
.pricing-features li:last-child { border-bottom: none; }
.pricing-features li strong { color: var(--text-primary); }
.pricing-guarantee { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.5; margin-top: var(--space-6); }

/* TESTIMONIALS */
.testimonials { padding: var(--space-20) 0; background: var(--bg-primary); overflow: hidden; }
.testimonials-carousel { position: relative; max-width: 800px; margin: 0 auto; padding: 0 0 var(--space-8) 0; }
.testimonials-track { position: relative; min-height: 250px; }
.testimonial-slide { position: absolute; top: 0; left: 0; width: 100%; padding: var(--space-8); box-sizing: border-box; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-xl); text-align: center; box-shadow: var(--shadow-md); display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out; }
.testimonial-slide.active { opacity: 1; visibility: visible; }
.testimonial-slide blockquote { font-size: var(--text-2xl); font-style: italic; color: var(--text-primary); margin: 0 0 var(--space-6) 0; padding: 0 var(--space-10); line-height: 1.5; quotes: none; }
.testimonial-slide cite { font-size: var(--text-lg); font-weight: 600; color: var(--text-secondary); font-style: normal; }
.carousel-controls { display: flex; justify-content: center; gap: var(--space-3); margin-top: var(--space-6); }
.carousel-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--border-color); border: none; cursor: pointer; transition: all var(--transition-fast); padding: 0; }
.carousel-dot.active { background: var(--primary-dark); transform: scale(1.2); }
.carousel-dot:hover { background: var(--primary-dark); }

/* STATS */
.stats { padding: var(--space-20) 0; background: var(--bg-primary); }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-8); margin-bottom: var(--space-8); }
.stat-item { text-align: center; background: var(--bg-card); padding: var(--space-6); border-radius: var(--radius-xl); border: 1px solid var(--border-color); transition: all var(--transition-normal); }
.stat-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--primary-dark); }
.stat-icon { font-size: 2.5rem; margin-bottom: var(--space-3); }
.stat-number { font-size: var(--text-5xl); font-weight: 900; margin-bottom: var(--space-2); color: var(--primary-dark); }
.stat-label { font-size: var(--text-base); font-weight: 600; color: var(--text-primary); }
.stat-label small { display: block; font-size: var(--text-sm); font-weight: 400; color: var(--text-secondary); margin-top: var(--space-1); }
.stats-secondary { display: flex; justify-content: center; gap: var(--space-12); flex-wrap: wrap; }
.stat-small { text-align: center; }
.stat-small-number { font-size: var(--text-3xl); font-weight: 800; display: block; margin-bottom: var(--space-1); color: var(--text-primary); }
.stat-small-label { font-size: var(--text-sm); color: var(--text-secondary); }

/* FAQ */
.faq { padding: var(--space-20) 0; background: var(--bg-secondary); }
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); margin-bottom: var(--space-4); overflow: hidden; }
.faq-question { width: 100%; padding: var(--space-6); background: none; border: none; text-align: left; font-size: var(--text-lg); font-weight: 600; color: var(--text-primary); cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: background var(--transition-fast); }
.faq-question:hover { background: var(--bg-secondary); }
.faq-icon { font-size: var(--text-2xl); transition: transform var(--transition-fast); color: var(--primary-dark); }
.faq-item.active .faq-icon { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out, padding 0.3s ease-out; padding: 0 var(--space-6); }
.faq-item.active .faq-answer { max-height: 1000px;     padding-top: var(--space-2); padding-bottom: var(--space-2); }
.faq-answer p { color: var(--text-secondary); line-height: 1.6; margin-bottom: var(--space-4); }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer strong { color: var(--text-primary); }
.faq-answer a { color: var(--secondary-color); text-decoration: underline; }

/* FINAL CTA */
.final-cta { padding: var(--space-20) 0; background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-dark) 100%); text-align: center; }
.cta-content { max-width: 800px; margin: 0 auto; }
.cta-title { font-size: var(--text-4xl); font-weight: 900; margin-bottom: var(--space-6); color: var(--text-primary); }
.cta-description { font-size: var(--text-xl); color: #1a1a1a; margin-bottom: var(--space-6); line-height: 1.6; opacity: 0.9; }
.cta-checkmarks { display: flex; justify-content: center; gap: var(--space-8); margin-bottom: var(--space-8); flex-wrap: wrap; }
.cta-checkmarks span { font-size: var(--text-lg); font-weight: 600; color: #1a1a1a; }
.cta-button-wrapper { margin-bottom: var(--space-4); }
.cta-button-wrapper .btn-primary { background: #1a1a1a; color: #ffffff; font-weight: 700; padding: 1.25rem 3rem; font-size: var(--text-xl); border-radius: var(--radius-lg); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); border: 2px solid #1a1a1a; }
.cta-button-wrapper .btn-primary:hover { color: #ffffff; background: #2a2a2a; transform: translateY(-3px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4); }
.cta-subtext { font-size: var(--text-base); color: #1a1a1a; font-style: italic; opacity: 0.8; }

/* RESPONSYWNOŚĆ */
@media (max-width: 1024px) {
    .hero-content { grid-template-columns: 1fr; gap: var(--space-8); text-align: center; }
    .hero-visual { order: -1; }
    .hero-image { max-width: 400px; }
    .hero-actions { justify-content: center; }
}

@media (max-width: 768px) {
    .section { padding: var(--space-16) 0; }
    .hero { padding: calc(var(--space-16) + var(--header-height)) var(--space-4) var(--space-16); min-height: calc(100vh - var(--header-height)); }
    .hero-title { font-size: 2.5rem; }
    .hero-subtitle { font-size: var(--text-xl); }
    .section-title { font-size: var(--text-3xl); }
    .section-subtitle { font-size: var(--text-lg); }
    .rooms-grid { grid-template-columns: 1fr; gap: var(--space-4); }
    .features-grid, .stats-grid { grid-template-columns: 1fr; }
    .testimonial-slide blockquote { font-size: var(--text-xl); }
    .stat-number { font-size: var(--text-4xl); }
    .pricing-price { font-size: 3rem; }
    .cta-title { font-size: var(--text-3xl); }
    .cta-checkmarks { flex-direction: column; gap: var(--space-3); }
}

@media (max-width: 480px) {
    .hero { padding: calc(var(--space-12) + var(--header-height)) var(--space-4) var(--space-12); }
    .hero-title { font-size: 2rem; }
    .hero-image { max-width: 280px; }
    .section-title { font-size: var(--text-2xl); }
    .stat-number { font-size: var(--text-3xl); }
}