/* Zmienne i style podstawowe */
 :root {
     --pwr-color: #990000;
     --pwr-dark: #770000;
     --pwr-light: #fdf2f2;
     --bg-body: #f8fafc;
     --bg-card: #ffffff;
     --text-main: #0f172a;
     --text-muted: #64748b;
     --border-color: #e2e8f0;
     --radius-lg: 16px;
     --radius-md: 12px;
     --radius-sm: 8px;
     --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
     --shadow-hover: 0 12px 24px -10px rgba(153, 0, 0, 0.15), 0 4px 12px -2px rgba(0, 0, 0, 0.04);
     --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
 }

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

body {
     font-family: 'Inter', sans-serif;
     background-color: var(--bg-body);
     color: var(--text-main);
     min-height: 100vh;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     line-height: 1.5;
     -webkit-font-smoothing: antialiased;
 }

/* Pasek akcentujący PWr */
 .top-bar {
     height: 6px;
     background-color: var(--pwr-color);
 }

/* Layout i Kontener */
 .container {
     max-width: 1120px;
     margin: 0 auto;
     padding: 0 1.5rem;
     width: 100%;
 }

/* Nagłówek */
 header {
     background-color: rgba(255, 255, 255, 0.9);
     border-bottom: 1px solid var(--border-color);
     position: sticky;
     top: 0;
     z-index: 30;
     backdrop-filter: blur(8px);
     padding: 1.25rem 0;
 }

.header-content {
     display: flex;
     align-items: center;
     justify-content: space-between;
 }

.brand {
     display: flex;
     align-items: center;
     gap: 0.875rem;
 }

.brand-logo {
     width: 42px;
     height: 42px;
     background-color: var(--pwr-color);
     color: #fff;
     border-radius: var(--radius-md);
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 700;
     font-size: 1.125rem;
     box-shadow: var(--shadow-sm);
 }

.brand-title h1 {
     font-size: 1.25rem;
     font-weight: 700;
     letter-spacing: -0.02em;
     color: var(--text-main);
 }

.brand-title p {
     font-size: 0.75rem;
     color: var(--text-muted);
     font-weight: 500;
 }

/* Baner informacyjny */
 .banner-wrapper {
     padding-top: 2rem;
     padding-bottom: 1rem;
 }

.banner {
     background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
     color: #ffffff;
     border-radius: var(--radius-lg);
     padding: 2rem;
     position: relative;
     overflow: hidden;
     box-shadow: var(--shadow-sm);
 }

.banner-badge {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     padding: 0.25rem 0.75rem;
     border-radius: 9999px;
     font-size: 0.75rem;
     font-weight: 600;
     background-color: rgba(153, 0, 0, 0.3);
     color: #fca5a5;
     border: 1px solid rgba(153, 0, 0, 0.4);
     margin-bottom: 0.75rem;
 }

.badge-dot {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background-color: #f87171;
 }

.banner h2 {
     font-size: 1.75rem;
     font-weight: 700;
     letter-spacing: -0.02em;
     margin-bottom: 0.5rem;
 }

.banner p {
     color: #94a3b8;
     font-size: 0.9375rem;
     max-width: 650px;
 }

.banner-bg-icon {
     position: absolute;
     right: -20px;
     bottom: -30px;
     font-size: 11rem;
     opacity: 0.05;
     pointer-events: none;
     color: #ffffff;
 }

/* Sekcje z Gemami */
 main {
     padding: 1.5rem 0 3rem 0;
     display: flex;
     flex-direction: column;
     gap: 2.5rem;
 }

.section-header {
     display: flex;
     align-items: center;
     gap: 0.75rem;
     margin-bottom: 1.5rem;
 }

.section-icon {
     width: 36px;
     height: 36px;
     border-radius: var(--radius-md);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 0.875rem;
 }

.section-icon.red {
     background-color: #fee2e2;
     color: var(--pwr-color);
 }

.section-icon.blue {
     background-color: #dbeafe;
     color: #1d4ed8;
 }

.section-title h3 {
     font-size: 1.125rem;
     font-weight: 700;
     color: var(--text-main);
 }

.section-title p {
     font-size: 0.75rem;
     color: var(--text-muted);
 }

/* Siatka kart */
 .cards-grid {
     display: grid;
     grid-template-columns: repeat(1, 1fr);
     gap: 1.5rem;
 }

@media (min-width: 640px) {
     .cards-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

@media (min-width: 1024px) {
     .cards-grid.three-cols {
         grid-template-columns: repeat(3, 1fr);
     }
 }

/* Karty Gemów */
 .gem-card {
     background-color: var(--bg-card);
     border: 1px solid var(--border-color);
     border-radius: var(--radius-lg);
     padding: 1.5rem;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     transition: var(--transition);
 }

.gem-card:hover {
     transform: translateY(-4px);
     box-shadow: var(--shadow-hover);
     border-color: rgba(153, 0, 0, 0.2);
 }

.card-top {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     margin-bottom: 1rem;
 }

.card-icon-box {
     width: 44px;
     height: 44px;
     border-radius: var(--radius-md);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.125rem;
     border: 1px solid transparent;
 }

.card-tag {
     font-size: 0.6875rem;
     font-weight: 600;
     padding: 0.25rem 0.625rem;
     border-radius: 9999px;
     background-color: #f1f5f9;
     color: var(--text-muted);
 }

.card-title {
     font-size: 1rem;
     font-weight: 700;
     color: var(--text-main);
     margin-bottom: 0.5rem;
     transition: var(--transition);
 }

.gem-card:hover .card-title {
     color: var(--pwr-color);
 }

.card-desc {
     font-size: 0.8125rem;
     color: #475569;
     line-height: 1.6;
     margin-bottom: 1.5rem;
 }

.card-bottom {
     padding-top: 1rem;
     border-top: 1px solid #f1f5f9;
     display: flex;
     align-items: center;
     gap: 0.5rem;
 }

/* Przyciski */
 .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 0.5rem;
     font-size: 0.8125rem;
     font-weight: 600;
     padding: 0.625rem 1rem;
     border-radius: var(--radius-md);
     text-decoration: none;
     cursor: pointer;
     border: none;
     transition: var(--transition);
     width: 100%;
 }

.btn-pwr {
     background-color: var(--pwr-color);
     color: #ffffff;
 }

.btn-pwr:hover {
     background-color: var(--pwr-dark);
 }

.btn-dark {
     background-color: #0f172a;
     color: #ffffff;
 }

.btn-dark:hover {
     background-color: #1e293b;
 }

.btn-icon-only {
     width: auto;
     padding: 0.625rem;
     background-color: transparent;
     color: var(--text-muted);
     border-radius: var(--radius-md);
 }

.btn-icon-only:hover {
     background-color: #f1f5f9;
     color: var(--text-main);
 }

/* Stopka */
 footer {
     background-color: var(--bg-card);
     border-top: 1px solid var(--border-color);
     padding: 1.5rem 0;
     margin-top: 2rem;
     font-size: 0.75rem;
     color: var(--text-muted);
 }

.footer-content {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: space-between;
     gap: 0.75rem;
 }

@media (min-width: 640px) {
     .footer-content {
         flex-direction: row;
     }
 }

.footer-info {
     display: flex;
     align-items: center;
     gap: 0.5rem;
 }

/* Modal do udostępniania */
 .modal-overlay {
     position: fixed;
     inset: 0;
     background-color: rgba(15, 23, 42, 0.4);
     backdrop-filter: blur(4px);
     display: none;
     align-items: center;
     justify-content: center;
     padding: 1rem;
     z-index: 50;
 }

.modal-overlay.active {
     display: flex;
 }

.modal-card {
     background-color: var(--bg-card);
     border-radius: var(--radius-lg);
     max-width: 380px;
     width: 100%;
     padding: 1.5rem;
     box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
     border: 1px solid var(--border-color);
     transform: scale(0.95);
     opacity: 0;
     transition: var(--transition);
 }

.modal-overlay.active .modal-card {
     transform: scale(1);
     opacity: 1;
 }

.modal-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 0.75rem;
 }

.modal-header h3 {
     font-size: 0.9375rem;
     font-weight: 700;
 }

.modal-close {
     background: none;
     border: none;
     color: var(--text-muted);
     cursor: pointer;
     padding: 0.25rem;
 }

.modal-body p {
     font-size: 0.75rem;
     color: var(--text-muted);
     margin-bottom: 1rem;
 }

.input-group {
     display: flex;
     gap: 0.5rem;
     margin-bottom: 0.75rem;
 }

.input-group input {
     width: 100%;
     font-size: 0.75rem;
     background-color: #f1f5f9;
     border: 1px solid var(--border-color);
     border-radius: var(--radius-sm);
     padding: 0.5rem 0.75rem;
     color: #334155;
     outline: none;
 }

.toast {
     display: none;
     font-size: 0.6875rem;
     color: #16a34a;
     font-weight: 500;
     text-align: center;
 }

.toast.visible {
     display: block;
 }