@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@700&family=Inter:wght@400;500;600;700&display=swap');

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

:root{
  --bg-base:#0a0a12;
  --bg-surface:#14141e;
  --bg-raised:#1c1c28;
  --border:#66669d;
  --brand:#e8ff00;
  --brand-dim:rgba(232,255,0,0.08);
  --brand-hover:#d4ea00;
  --purple:#a855f7;
  --purple-dim:rgba(168,85,247,0.10);
  --purple-glow:rgba(168,85,247,0.25);
  --text-primary:#f0f0f5;
  --text-secondary:#8888a8;
  --text-inverse:#0a0a12;
  --font-display:'Rajdhani',system-ui,sans-serif;
  --font-sans:'Inter',system-ui,sans-serif;
  --text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;
  --text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;
  --text-3xl:1.875rem;--text-4xl:2.25rem;--text-5xl:3rem;--text-6xl:3.75rem;
  --sp1:.25rem;--sp2:.5rem;--sp3:.75rem;--sp4:1rem;--sp5:1.25rem;
  --sp6:1.5rem;--sp8:2rem;--sp10:2.5rem;--sp12:3rem;--sp16:4rem;
  --sp20:5rem;--sp24:6rem;
  --container-max:1140px;
  --container-pad:clamp(1rem,5vw,2rem);
  --r-sm:4px;--r-md:10px;--r-lg:16px;--r-xl:20px;
  --ease:cubic-bezier(.16,1,.3,1);
  --fast:120ms;--base:220ms;
}

html{scroll-behavior:smooth}
body{font-family:var(--font-sans);background:var(--bg-base);color:var(--text-primary);font-size:var(--text-base);line-height:1.65;-webkit-font-smoothing:antialiased}

.container{max-width:var(--container-max);margin:0 auto;padding:0 var(--container-pad)}

/* ── NOTICE BAR (no stripe — distinct from polskie.com) ── */
.notice-bar{
  background:var(--bg-surface);
  color:var(--text-secondary);
  border-bottom:1px solid var(--border);
  font-size:var(--text-xs);font-weight:500;
  text-align:center;padding:var(--sp2) var(--sp4);
  letter-spacing:.02em;
}

/* ── HEADER ── */
.site-header{position:sticky;top:0;z-index:100;background:transparent;
  border-bottom:1px solid transparent;
  transition:background var(--base) var(--ease),border-color var(--base) var(--ease)}
.site-header.scrolled{background:rgba(10,10,18,.96);backdrop-filter:blur(12px);border-color:var(--border)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;text-decoration:none}
.logo svg{height:20px;width:auto;display:block}

.site-nav{display:flex;align-items:center;gap:0}
.site-nav a{color:var(--text-secondary);text-decoration:none;font-size:var(--text-sm);
  font-weight:500;padding:var(--sp2) var(--sp3);border-radius:var(--r-sm);
  position:relative;transition:color var(--fast)}
.site-nav a:hover{color:var(--text-primary)}
.site-nav a.active{color:var(--text-primary)}
.site-nav a.active::after{content:'';position:absolute;bottom:-1px;left:var(--sp3);
  right:var(--sp3);height:2px;background:var(--brand)}

.header-cta{}

.nav-toggle{display:none;background:none;border:1px solid var(--border);
  border-radius:var(--r-sm);padding:var(--sp2);cursor:pointer;flex-direction:column;gap:5px}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--text-primary);
  transition:transform var(--base) var(--ease),opacity var(--fast)}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-nav{display:none;flex-direction:column;
  background:var(--bg-surface);border-bottom:1px solid var(--border);
  padding:var(--sp4) var(--container-pad);gap:var(--sp1)}
.mobile-nav.open{display:flex}
.mobile-nav a{color:var(--text-secondary);text-decoration:none;font-size:var(--text-base);
  font-weight:500;padding:var(--sp3) var(--sp4);border-radius:var(--r-sm);
  transition:color var(--fast),background var(--fast)}
.mobile-nav a:hover{color:var(--text-primary);background:var(--brand-dim)}
.mobile-cta{margin-top:var(--sp3)}

/* ── BUTTONS ── */
.btn-primary{display:inline-flex;align-items:center;gap:var(--sp2);
  background:var(--brand);color:var(--text-inverse);font-size:var(--text-sm);
  font-weight:700;padding:12px 24px;border-radius:var(--r-md);
  text-decoration:none;transition:background var(--fast);
  letter-spacing:.04em;text-transform:uppercase}
.btn-primary:hover{background:var(--brand-hover)}
.btn-ghost{display:inline-flex;align-items:center;gap:var(--sp2);
  background:transparent;color:var(--text-secondary);font-size:var(--text-sm);
  font-weight:600;padding:12px 20px;border-radius:var(--r-md);
  text-decoration:none;border:1px solid var(--border);
  transition:color var(--fast),border-color var(--fast)}
.btn-ghost:hover{color:var(--text-primary);border-color:var(--brand)}

/* ── HERO (homepage) ── */
.hero{padding:var(--sp24) 0 var(--sp16);position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 80% at 80% 50%,rgba(168,85,247,.07) 0%,transparent 70%);
  pointer-events:none}
.hero-bg--photo{background-image:linear-gradient(100deg,rgba(10,10,18,.94) 0%,rgba(10,10,18,.82) 35%,rgba(10,10,18,.55) 65%,rgba(10,10,18,.85) 100%),
  radial-gradient(ellipse 60% 80% at 80% 50%,rgba(168,85,247,.1) 0%,transparent 70%),
  var(--hero-photo);
  background-size:cover;background-position:center}
.hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp16);
  align-items:center;position:relative;z-index:1}
.hero-text{}
.eyebrow{display:inline-block;font-size:var(--text-xs);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--brand);margin-bottom:var(--sp5)}
.hero-text h1{font-family:var(--font-display);font-size:clamp(2.5rem,5.5vw,5rem);
  font-weight:700;line-height:1.05;letter-spacing:.01em;margin-bottom:var(--sp6)}
.hero-text h1 .accent{color:var(--brand)}
.hero-sub{font-size:var(--text-lg);color:var(--text-secondary);
  line-height:1.65;margin-bottom:var(--sp8);max-width:480px}

/* ── CATEGORY CARDS (hero element — unique to wpolsce.com) ── */
.cat-cards{display:flex;flex-direction:column;gap:var(--sp4)}
.cat-card{background:var(--bg-raised);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--sp6);
  display:flex;align-items:center;gap:var(--sp5);text-decoration:none;
  transition:border-color var(--base) var(--ease),box-shadow var(--base) var(--ease),
    transform var(--base) var(--ease)}
.cat-card:hover{border-color:var(--purple);
  box-shadow:0 0 20px var(--purple-glow);transform:translateX(4px)}
.cat-card--live{border-color:rgba(168,85,247,.35);background:var(--purple-dim)}
.cat-card--live:hover{border-color:var(--purple)}
.cat-icon{width:48px;height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:var(--bg-base);border-radius:var(--r-md)}
.cat-icon svg{width:28px;height:28px}
.cat-info{}
.cat-name{font-family:var(--font-display);font-size:var(--text-xl);font-weight:700;
  color:var(--text-primary);display:block;margin-bottom:2px}
.cat-desc{font-size:var(--text-sm);color:var(--text-secondary);line-height:1.4}

/* ── SECTIONS ── */
section{padding:var(--sp24) 0}
.section-label{font-size:var(--text-xs);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--brand);margin-bottom:var(--sp3)}
.section-title{font-family:var(--font-display);font-size:clamp(1.8rem,3.5vw,2.8rem);
  font-weight:700;letter-spacing:.01em;line-height:1.1;margin-bottom:var(--sp4)}
.section-desc{font-size:var(--text-lg);color:var(--text-secondary);
  max-width:560px;line-height:1.65;margin-bottom:var(--sp12)}
.section-divider{height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent)}
.section-alt{background:var(--bg-surface)}

/* ── GRIDS ── */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp6)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp8)}

/* ── FEATURE CARD ── */
.feature-card{background:var(--bg-raised);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--sp8);
  transition:border-color var(--base) var(--ease),box-shadow var(--base) var(--ease)}
.feature-card:hover{border-color:var(--brand);box-shadow:0 0 16px var(--brand-dim)}
.card-icon{width:48px;height:48px;background:var(--brand-dim);border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;margin-bottom:var(--sp5)}
.card-icon svg{width:24px;height:24px;color:var(--brand)}
.feature-card h3{font-family:var(--font-display);font-size:var(--text-xl);
  font-weight:700;margin-bottom:var(--sp3);line-height:1.2}
.feature-card p{font-size:var(--text-sm);color:var(--text-secondary);line-height:1.65}

/* ── CALLOUT BLOCK ── */
.callout{background:var(--brand-dim);border:1px solid rgba(232,255,0,.15);
  border-left:3px solid var(--brand);border-radius:var(--r-md);
  padding:var(--sp5) var(--sp6);margin:var(--sp8) 0}
.callout p{color:var(--text-primary);font-size:var(--text-sm);line-height:1.7;margin:0}
.callout--purple{background:var(--purple-dim);border-color:rgba(168,85,247,.2);
  border-left-color:var(--purple)}

/* ── PAYMENT GRID ── */
.payment-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp4);
  margin-bottom:var(--sp8)}
.payment-item{display:flex;flex-direction:column;align-items:center;gap:var(--sp3);
  background:var(--bg-raised);border:1px solid var(--border);
  border-radius:var(--r-md);padding:var(--sp5) var(--sp4);text-align:center;
  transition:border-color var(--fast)}
.payment-item:hover{border-color:var(--brand)}
.payment-icon{font-size:1.6rem;line-height:1}
.payment-name{font-size:var(--text-sm);font-weight:600;color:var(--text-primary)}
.payment-time{font-size:var(--text-xs);color:var(--text-secondary)}

/* ── RG TILES ── */
.rg-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp5);margin-bottom:var(--sp8)}
.rg-tile{background:var(--bg-surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--sp6)}
.rg-icon{width:44px;height:44px;background:var(--brand-dim);border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;margin-bottom:var(--sp4)}
.rg-icon svg{width:22px;height:22px;color:var(--brand)}
.rg-tile h3{font-size:var(--text-lg);font-weight:700;margin-bottom:var(--sp2)}
.rg-tile p{font-size:var(--text-sm);color:var(--text-secondary);line-height:1.6}
.rg-links{display:flex;gap:var(--sp4);margin-top:var(--sp4)}
.rg-links a{font-size:var(--text-sm);color:var(--brand);text-decoration:none;font-weight:600;
  border-bottom:1px solid transparent;transition:border-color var(--fast)}
.rg-links a:hover{border-color:var(--brand)}

/* ── TABLES ── */
table{width:100%;border-collapse:collapse;margin:var(--sp6) 0}
thead tr{background:var(--bg-raised)}
th{font-family:var(--font-display);font-size:var(--text-base);font-weight:700;
  padding:var(--sp3) var(--sp4);text-align:left;color:var(--text-primary)}
td{padding:var(--sp3) var(--sp4);border-bottom:1px solid var(--border);
  color:var(--text-secondary);font-size:var(--text-sm)}
tr:nth-child(even) td{background:rgba(255,255,255,.02)}
.table-wrap{overflow-x:auto}

/* ── STEPS LIST ── */
.steps-list{list-style:none;display:flex;flex-direction:column;gap:var(--sp5);max-width:640px}
.steps-list li{display:flex;gap:var(--sp4);align-items:flex-start}
.step-num{width:32px;height:32px;background:var(--brand-dim);border:1px solid var(--brand);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:var(--text-sm);font-weight:700;
  color:var(--brand);flex-shrink:0}
.step-text{font-size:var(--text-sm);color:var(--text-secondary);line-height:1.65;padding-top:6px}

/* ── FAQ ── */
.faq-list{max-width:760px}
.faq-item{border-bottom:1px solid var(--border)}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:var(--sp4);
  width:100%;background:none;border:none;color:var(--text-primary);
  font-family:var(--font-sans);font-size:var(--text-base);font-weight:600;
  text-align:left;padding:var(--sp5) 0;cursor:pointer;transition:color var(--fast)}
.faq-q:hover{color:var(--brand)}
.faq-chevron{width:22px;height:22px;border:1px solid var(--border);border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:transform var(--base) var(--ease),border-color var(--fast)}
.faq-chevron svg{width:10px;height:10px;transition:transform var(--base) var(--ease)}
.faq-item.open .faq-q{color:var(--brand)}
.faq-item.open .faq-chevron{border-color:var(--brand)}
.faq-item.open .faq-chevron svg{transform:rotate(90deg)}
.faq-a{overflow:hidden;max-height:0;opacity:0;
  transition:max-height var(--base) var(--ease),opacity var(--base)}
.faq-item.open .faq-a{opacity:1}
.faq-a p{color:var(--text-secondary);font-size:var(--text-sm);
  line-height:1.75;padding-bottom:var(--sp5)}

/* ── FIGURES ── */
figure{margin:var(--sp8) 0 0}
figure img{width:100%;height:auto;border-radius:var(--r-md);display:block}
figcaption{font-size:var(--text-sm);color:var(--text-secondary);text-align:center;margin-top:var(--sp3)}
.text-center{text-align:center}
.text-muted{color:var(--text-secondary);opacity:.6}
.mt-2{margin-top:var(--sp2)}
.mt-4{margin-top:var(--sp4)}

/* ── INNER PAGE HERO ── */
.page-hero{padding:var(--sp16) 0 var(--sp12);
  border-bottom:1px solid var(--border);background:var(--bg-surface)}
.breadcrumb{font-size:var(--text-sm);color:var(--text-secondary);
  margin-bottom:var(--sp6);display:flex;align-items:center;gap:var(--sp2)}
.breadcrumb a{color:var(--text-secondary);text-decoration:none;transition:color var(--fast)}
.breadcrumb a:hover{color:var(--brand)}
.breadcrumb span{color:var(--border)}
.page-hero h1{font-family:var(--font-display);font-size:clamp(2rem,5vw,3.4rem);
  font-weight:700;line-height:1.05;margin-bottom:var(--sp4)}
.page-hero h1 .accent{color:var(--brand)}
.page-hero .lead{font-size:var(--text-lg);color:var(--text-secondary);
  max-width:620px;line-height:1.65;margin-bottom:var(--sp8)}

/* ── PAGE HERO WITH PHOTO BACKGROUND ── */
.page-hero--photo{position:relative;background-size:cover;background-position:center;
  border-bottom:1px solid var(--border);overflow:hidden}
.page-hero--photo::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,18,.88) 0%,rgba(10,10,18,.82) 45%,rgba(10,10,18,.95) 100%);
  z-index:1}
.page-hero--photo .container{position:relative;z-index:2}

/* ── INNER PAGE CONTENT ── */
.page-content{padding:var(--sp12) 0}
.page-content section{padding:var(--sp10) 0;border-top:1px solid var(--border)}
.page-content section:first-child{border-top:none;padding-top:0}
.page-content h2{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2.2rem);
  font-weight:700;line-height:1.1;margin-bottom:var(--sp4)}
.page-content p{color:var(--text-secondary);line-height:1.75;margin-bottom:var(--sp4)}
.page-content p:last-child{margin-bottom:0}
.page-content ul,.page-content ol{color:var(--text-secondary);padding-left:1.25rem;
  line-height:1.75;margin-bottom:var(--sp6)}
.page-content li{margin-bottom:.35rem}
.page-content a{text-decoration:none;border-bottom:1px solid transparent;
  transition:border-color var(--fast)}
.page-content a:hover{border-color:var(--brand)}
.faq-section{padding:var(--sp12) 0 0!important;border-top:none!important}
.page-cta-block{text-align:center;padding:var(--sp12) 0;border-top:1px solid var(--border);
  margin-top:var(--sp8)}
.page-cta-block p{color:var(--text-secondary);margin-bottom:var(--sp5);
  max-width:520px;margin-left:auto;margin-right:auto}

/* ── FOOTER ── */
.site-footer{background:var(--bg-surface);border-top:1px solid var(--border);
  padding:var(--sp16) 0 var(--sp8)}
.footer-inner{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--sp10);
  margin-bottom:var(--sp12)}
.footer-brand .logo{margin-bottom:var(--sp5);display:inline-flex}
.footer-brand p{font-size:var(--text-sm);color:var(--text-secondary);
  line-height:1.65;max-width:260px}
.footer-col h4{font-size:var(--text-xs);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-secondary);margin-bottom:var(--sp4)}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:var(--sp3)}
.footer-col ul a{color:var(--text-secondary);text-decoration:none;font-size:var(--text-sm);
  transition:color var(--fast)}
.footer-col ul a:hover{color:var(--text-primary)}
.footer-bottom{border-top:1px solid var(--border);padding-top:var(--sp8);
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp6);flex-wrap:wrap}
.footer-legal{font-size:var(--text-xs);color:var(--text-secondary);
  line-height:1.65;max-width:680px;opacity:.65}
.footer-copy{font-size:var(--text-xs);color:var(--text-secondary);opacity:.45;white-space:nowrap}

/* ── HOME SECTIONS ── */
.home-section{padding:var(--sp20) 0}
.home-section__inner{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp12);align-items:center}
.home-section__inner.reverse{direction:rtl}
.home-section__inner.reverse>*{direction:ltr}
.home-section__body{}
.home-section__body h2{font-family:var(--font-display);font-size:clamp(1.8rem,3.5vw,2.8rem);
  font-weight:700;line-height:1.1;margin-bottom:var(--sp4)}
.home-section__body p{color:var(--text-secondary);line-height:1.75;margin-bottom:var(--sp6)}
.home-section__body .btn-primary{margin-top:var(--sp2)}
.home-section__visual{background:var(--bg-raised);border:1px solid var(--border);
  border-radius:var(--r-xl);padding:var(--sp8);min-height:240px;
  display:flex;flex-direction:column;gap:var(--sp4)}
.home-section__visual.purple-glow{border-color:rgba(168,85,247,.3);
  box-shadow:inset 0 0 40px rgba(168,85,247,.04)}

/* ── BADGE / TAG ── */
.badge{display:inline-flex;align-items:center;padding:3px var(--sp3);
  border-radius:var(--r-sm);font-size:var(--text-xs);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase}
.badge--brand{background:var(--brand-dim);color:var(--brand)}
.badge--purple{background:var(--purple-dim);color:var(--purple)}

/* ── GAME ROW (visual component) ── */
.game-row{display:flex;align-items:center;gap:var(--sp4);padding:var(--sp4);
  background:var(--bg-base);border:1px solid var(--border);border-radius:var(--r-md)}
.game-row__icon{width:40px;height:40px;background:var(--bg-raised);
  border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.game-row__icon svg{width:20px;height:20px}
.game-row__name{font-weight:600;font-size:var(--text-sm);flex:1}
.game-row__tag{font-size:var(--text-xs);color:var(--text-secondary)}
.game-row__rtp{font-family:var(--font-display);font-size:var(--text-base);
  font-weight:700;color:var(--brand)}

/* ── RESPONSIVE ── */
@media(max-width:1023px){
  .footer-inner{grid-template-columns:1fr 1fr;gap:var(--sp8)}
  .hero-inner{grid-template-columns:1fr}
  .cat-cards{display:grid;grid-template-columns:1fr;max-width:480px}
  .home-section__inner{grid-template-columns:1fr}
  .home-section__inner.reverse{direction:ltr}
  .home-section__visual{min-height:auto}
}
@media(max-width:767px){
  .site-nav,.header-cta{display:none}
  .nav-toggle{display:flex}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr 1fr}
  .rg-grid{grid-template-columns:1fr}
  .payment-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:479px){
  .footer-inner{grid-template-columns:1fr}
  .cat-cards{max-width:100%}
}


/* Payment method footer strip (mandatory, informational) — markup M5 */
.footer-payments{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:24px;padding-top:20px;border-top:1px solid var(--border)}
.footer-payments .fp-heading{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.footer-payments img{height:28px;width:auto;opacity:.55}

/* Footer trust badges (BeGambleAware / Graj Odpowiedzialnie / Anonimowi Hazardziści) */
.pm-trust-badges{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:14px}
.pm-trust-badges img{opacity:.75;transition:opacity .2s ease}
.pm-trust-badges a:hover img{opacity:1}