/* ===== BatoForges Base Foundation ===== */

/* ---------- Design Tokens ---------- */
:root {
  /* Colors */
  --color-mint-arena: #E9FFF4;
  --color-ink-navy: #263451;
  --color-electric-violet: #7549DB;
  --color-tropical-turquoise: #28C6B7;
  --color-coral-red: #F16D74;
  --color-sunny-yellow: #FFD45C;
  --color-white-mint: #FFFFFF;
  --color-violet-soft: #F0EBFF;
  --color-turquoise-soft: #E4FBF8;

  /* Semantic Color Aliases */
  --color-bg-page: var(--color-mint-arena);
  --color-bg-surface: var(--color-white-mint);
  --color-bg-surface-alt: var(--color-violet-soft);
  --color-bg-surface-accent: var(--color-turquoise-soft);
  --color-bg-dark: var(--color-ink-navy);
  --color-text-primary: var(--color-ink-navy);
  --color-text-on-dark: var(--color-mint-arena);
  --color-text-on-accent: var(--color-white-mint);
  --color-text-link: var(--color-electric-violet);
  --color-text-link-hover: var(--color-electric-violet);
  --color-border-light: rgba(38, 52, 81, 0.12);
  --color-border-input: rgba(38, 52, 81, 0.2);
  --color-border-dark: rgba(233, 255, 244, 0.2);
  --color-border-accent: rgba(117, 73, 219, 0.2);
  --color-focus-ring: var(--color-electric-violet);
  --color-success: var(--color-tropical-turquoise);
  --color-warning: var(--color-sunny-yellow);
  --color-danger: var(--color-coral-red);

  /* Typography */
  --font-heading: "Nunito", sans-serif;
  --font-body: "Source Sans 3", sans-serif;

  --text-display-size: clamp(2.75rem, 6vw, 4.5rem);
  --text-display-line-height: 1.05;
  --text-display-weight: 800;

  --text-h1-size: clamp(2.25rem, 4.5vw, 3.25rem);
  --text-h1-line-height: 1.1;
  --text-h1-weight: 800;

  --text-h2-size: clamp(1.75rem, 3vw, 2.25rem);
  --text-h2-line-height: 1.2;
  --text-h2-weight: 700;

  --text-h3-size: clamp(1.25rem, 2vw, 1.5rem);
  --text-h3-line-height: 1.3;
  --text-h3-weight: 700;

  --text-h4-size: 1.125rem;
  --text-h4-line-height: 1.4;
  --text-h4-weight: 700;

  --text-body-lg-size: 1.125rem;
  --text-body-lg-line-height: 1.65;
  --text-body-lg-weight: 400;

  --text-body-size: 1rem;
  --text-body-line-height: 1.65;
  --text-body-weight: 400;

  --text-body-sm-size: 0.875rem;
  --text-body-sm-line-height: 1.55;
  --text-body-sm-weight: 400;

  --text-caption-size: 0.75rem;
  --text-caption-line-height: 1.4;
  --text-caption-weight: 600;
  --text-caption-letter-spacing: 0.06em;

  /* Spacing */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 128px;

  /* Containers */
  --container-max-width: 1200px;
  --container-padding-mobile: 24px;
  --container-padding-desktop: 40px;
  --container-wide-max-width: 1440px;

  /* Surfaces & Borders */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  --border-light: 1px solid var(--color-border-light);
  --border-dark: 1px solid var(--color-border-dark);
  --border-input: 1px solid var(--color-border-input);

  --shadow-elevated: 0 8px 24px rgba(38, 52, 81, 0.12);
  --shadow-hover: 0 4px 12px rgba(38, 52, 81, 0.08);

  /* Transitions */
  --transition-fast: 200ms ease-out;
  --transition-base: 300ms ease-out;
}

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

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  font-weight: var(--text-body-weight);
  line-height: var(--text-body-line-height);
  color: var(--color-text-primary);
  background-color: var(--color-bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

a {
  color: var(--color-text-link);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-text-link-hover);
}

ul,
ol {
  list-style-position: inside;
}

/* ---------- Document Typography ---------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  color: var(--color-text-primary);
  font-weight: var(--text-h1-weight);
  line-height: var(--text-h1-line-height);
  margin-block-end: var(--space-md);
  text-wrap: balance;
}

h1 {
  font-size: var(--text-h1-size);
  font-weight: var(--text-h1-weight);
  line-height: var(--text-h1-line-height);
}

h2 {
  font-size: var(--text-h2-size);
  font-weight: var(--text-h2-weight);
  line-height: var(--text-h2-line-height);
  margin-block-end: var(--space-lg);
}

h3 {
  font-size: var(--text-h3-size);
  font-weight: var(--text-h3-weight);
  line-height: var(--text-h3-line-height);
  margin-block-end: var(--space-md);
}

h4 {
  font-size: var(--text-h4-size);
  font-weight: var(--text-h4-weight);
  line-height: var(--text-h4-line-height);
  margin-block-end: var(--space-sm);
}

h5,
h6 {
  font-size: var(--text-body-size);
  font-weight: var(--text-h4-weight);
  line-height: var(--text-body-line-height);
  margin-block-end: var(--space-xs);
}

p {
  margin-block-end: var(--space-md);
  line-height: var(--text-body-line-height);
}

blockquote {
  margin-block-end: var(--space-md);
  padding-inline-start: var(--space-md);
  border-inline-start: 3px solid var(--color-tropical-turquoise);
  color: var(--color-text-primary);
  font-style: italic;
}

ul,
ol {
  margin-block-end: var(--space-md);
  padding-inline-start: var(--space-lg);
}

li {
  margin-block-end: var(--space-xs);
}

li:last-child {
  margin-block-end: 0;
}

/* Scoped list spacing for content lists only */
:is(article, main, section, .content) > ul > li,
:is(article, main, section, .content) > ol > li {
  margin-block-end: var(--space-xs);
}

:is(article, main, section, .content) > ul > li:last-child,
:is(article, main, section, .content) > ol > li:last-child {
  margin-block-end: 0;
}

/* ---------- Media Defaults ---------- */
figure {
  margin-block-end: var(--space-md);
}

figcaption {
  font-size: var(--text-caption-size);
  font-weight: var(--text-caption-weight);
  letter-spacing: var(--text-caption-letter-spacing);
  text-transform: uppercase;
  color: var(--color-text-primary);
  opacity: 0.7;
  margin-block-start: var(--space-xs);
}

/* ---------- Form Defaults ---------- */
label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-body-sm-size);
  font-weight: 600;
  margin-block-end: var(--space-xs);
  color: var(--color-text-primary);
}

input,
textarea,
select {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line-height);
  color: var(--color-text-primary);
  background-color: var(--color-bg-surface);
  border: var(--border-input);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-focus-ring);
  box-shadow: 0 0 0 2px var(--color-focus-ring);
}

textarea {
  min-height: 120px;
  resize: vertical;
}

select {
  appearance: auto;
}

/* ---------- Containers ---------- */
.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
}

.container-wide {
  width: 100%;
  max-width: var(--container-wide-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
}

@media (min-width: 768px) {
  .container,
  .container-wide {
    padding-inline: var(--container-padding-desktop);
  }
}

/* ---------- Reusable Primitives ---------- */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-heading);
  font-size: var(--text-body-size);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
  white-space: nowrap;
  min-height: 44px;
}

.btn:active {
  transform: translateY(1px);
}

.btn:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.btn-primary {
  background-color: var(--color-electric-violet);
  color: var(--color-text-on-accent);
  border: 1px solid var(--color-electric-violet);
}

.btn-primary:hover {
  background-color: #5E3BB8;
  border-color: #5E3BB8;
  color: var(--color-text-on-accent);
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-electric-violet);
  border: 1px solid var(--color-electric-violet);
}

.btn-secondary:hover {
  background-color: var(--color-violet-soft);
  color: var(--color-electric-violet);
}

/* Cards */
.card {
  background-color: var(--color-bg-surface);
  border: var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

/* Tags */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-sm);
  font-size: var(--text-caption-size);
  font-weight: var(--text-caption-weight);
  letter-spacing: var(--text-caption-letter-spacing);
  text-transform: uppercase;
  color: var(--color-text-primary);
  background-color: var(--color-violet-soft);
  border-radius: var(--radius-sm);
  line-height: var(--text-caption-line-height);
}

.tag--turquoise {
  background-color: var(--color-turquoise-soft);
}

/* Focus visible */
:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* Header component styles */
.site-header {
  background-color: var(--color-mint-arena);
  border-bottom: 1px solid var(--color-border-accent);
  position: relative;
  z-index: 100;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding: var(--space-sm) var(--container-padding-mobile);
  min-height: 72px;
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
  text-decoration: none;
  color: var(--color-text-primary);
}

.site-header__logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
}

.site-header__brand-text {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-navy);
  white-space: nowrap;
}

.site-header__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.site-header__toggle:hover {
  background-color: var(--color-violet-soft);
}

.site-header__toggle:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.site-header__toggle-line {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--color-ink-navy);
  border-radius: 1px;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-line:nth-child(2) {
  opacity: 0;
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.site-header__nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.site-header__nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header__nav-item {
  margin: 0;
  padding: 0;
}

.site-header__nav-link {
  display: inline-block;
  padding: var(--space-xs) var(--space-2xs);
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-ink-navy);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  transition: color var(--transition-fast);
}

.site-header__nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background-color: var(--color-electric-violet);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-fast);
}

.site-header__nav-link:hover {
  color: var(--color-electric-violet);
}

.site-header__nav-link:hover::after,
.site-header__nav-link:focus-visible::after {
  transform: scaleX(1);
}

.site-header__nav-link:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.site-header__cta {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Mobile breakpoint */
@media (max-width: 1023px) {
  .site-header__inner {
    flex-wrap: wrap;
    padding: var(--space-sm) var(--container-padding-mobile);
  }

  .site-header__brand {
    order: 1;
  }

  .site-header__toggle {
    display: flex;
    order: 2;
  }

  .site-header__nav {
    order: 3;
    flex-basis: 100%;
    display: none;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
    background-color: var(--color-mint-arena);
    border-top: 1px solid var(--color-border-accent);
    padding: var(--space-md) 0;
  }

  .site-header__nav.is-open {
    display: block;
  }

  .site-header__nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }

  .site-header__nav-item {
    width: 100%;
  }

  .site-header__nav-link {
    display: block;
    padding: var(--space-md) var(--container-padding-mobile);
    font-size: 1.125rem;
    border-bottom: 1px solid var(--color-border-light);
  }

  .site-header__nav-link::after {
    display: none;
  }

  .site-header__cta {
    order: 4;
    flex-basis: 100%;
    margin-top: var(--space-sm);
    text-align: center;
  }
}

@media (max-width: 767px) {
  .site-header__logo {
    width: 36px;
    height: 36px;
  }

  .site-header__brand-text {
    font-size: 1rem;
  }

  .site-header__inner {
    min-height: 64px;
  }

  .site-header__nav {
    max-height: calc(100vh - 64px);
  }
}


/* Footer and cookie consent styles */
.site-footer {
  background-color: var(--color-bg-dark);
  color: var(--color-text-on-dark);
  padding: var(--space-3xl) 0 var(--space-xl);
}

.site-footer__inner {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-2xl);
}

.site-footer__logo {
  width: 52px;
  height: 52px;
  object-fit: contain;
  display: block;
}

.site-footer__brand-text {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-mint-arena);
}

.site-footer__columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2xl);
  margin-bottom: var(--space-2xl);
}

.site-footer__heading {
  font-family: var(--font-heading);
  font-size: var(--text-h4-size);
  font-weight: 700;
  color: var(--color-tropical-turquoise);
  margin-bottom: var(--space-md);
}

.site-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__list li {
  margin-bottom: var(--space-xs);
}

.site-footer__list li:last-child {
  margin-bottom: 0;
}

.site-footer__link {
  color: var(--color-mint-arena);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.site-footer__link:hover {
  color: var(--color-tropical-turquoise);
}

.site-footer__address {
  font-style: normal;
}

.site-footer__address-line {
  margin-bottom: var(--space-xs);
  color: var(--color-mint-arena);
  line-height: var(--text-body-line-height);
}

.site-footer__address-line:last-child {
  margin-bottom: 0;
}

.site-footer__disclaimer {
  border-top: 1px solid var(--color-border-dark);
  padding-top: var(--space-lg);
  margin-bottom: var(--space-lg);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line-height);
  color: var(--color-mint-arena);
  opacity: 0.8;
}

.site-footer__bottom {
  border-top: 1px solid var(--color-border-dark);
  padding-top: var(--space-md);
  text-align: center;
}

.site-footer__copyright {
  font-size: var(--text-caption-size);
  letter-spacing: var(--text-caption-letter-spacing);
  text-transform: uppercase;
  color: var(--color-mint-arena);
  opacity: 0.7;
  margin: 0;
}

/* Responsive footer */
@media (max-width: 767px) {
  .site-footer {
    padding: var(--space-2xl) 0 var(--space-lg);
  }

  .site-footer__brand {
    justify-content: center;
    margin-bottom: var(--space-xl);
  }

  .site-footer__columns {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .site-footer__heading {
    text-align: center;
  }

  .site-footer__list {
    text-align: center;
  }

  .site-footer__address {
    text-align: center;
  }

  .site-footer__disclaimer {
    text-align: center;
  }
}

/* Cookie consent */
.cookie-consent {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: var(--color-bg-surface);
  border-top: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-elevated);
  padding: var(--space-md) var(--container-padding-mobile);
  display: none;
}

.cookie-consent.is-visible {
  display: block;
}

.cookie-consent__content {
  max-width: var(--container-max-width);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}

.cookie-consent__text {
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line-height);
  color: var(--color-text-primary);
  margin: 0;
}

.cookie-consent__link {
  color: var(--color-electric-violet);
  text-decoration: underline;
}

.cookie-consent__link:hover {
  color: var(--color-electric-violet);
}

.cookie-consent__actions {
  display: flex;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.cookie-consent__button {
  min-height: 44px;
}

@media (max-width: 767px) {
  .cookie-consent__content {
    flex-direction: column;
    align-items: stretch;
  }

  .cookie-consent__actions {
    justify-content: center;
  }
}


/* ===== BatoForges Kontakt Page Styles ===== */

.kontakt-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
  padding-block: var(--space-3xl) var(--space-4xl);
}

.kontakt-section-title {
  margin-block-end: var(--space-lg);
}

.kontakt-section-title--center {
  text-align: center;
}

/* ---------- Hero kontaktowy ---------- */
.kontakt-hero {
  background-color: var(--color-mint-arena);
  padding-block: var(--space-2xl) var(--space-3xl);
}

.kontakt-hero__inner {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: center;
}

.kontakt-hero__content {
  max-width: 68ch;
  min-width: 0;
}

.kontakt-hero__eyebrow {
  font-family: var(--font-heading);
  font-size: var(--text-caption-size);
  font-weight: var(--text-caption-weight);
  letter-spacing: var(--text-caption-letter-spacing);
  text-transform: uppercase;
  color: var(--color-electric-violet);
  margin-block-end: var(--space-sm);
}

.kontakt-hero__title {
  margin-block-end: var(--space-md);
  position: relative;
  padding-block-end: var(--space-md);
}

.kontakt-hero__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 80px;
  height: 3px;
  background-color: var(--color-electric-violet);
  border-radius: var(--radius-sm);
}

.kontakt-hero__lead {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line-height);
  margin-block-end: var(--space-lg);
}

.kontakt-hero__facts {
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.kontakt-hero__facts li {
  position: relative;
  padding-inline-start: var(--space-lg);
  color: var(--color-ink-navy);
}

.kontakt-hero__facts li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-electric-violet);
  font-weight: 700;
}

.kontakt-hero__decoration {
  display: none;
}

@media (min-width: 768px) {
  .kontakt-hero__inner {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    padding-inline: var(--container-padding-desktop);
  }

  .kontakt-hero__decoration {
    display: block;
    min-width: 0;
    height: 100%;
    min-height: 280px;
    background-color: var(--color-violet-soft);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border-accent);
    position: relative;
    overflow: hidden;
  }

  .kontakt-hero__decoration::before {
    content: "";
    position: absolute;
    top: 20%;
    left: 15%;
    width: 70%;
    height: 60%;
    background-color: rgba(117, 73, 219, 0.08);
    border-radius: 50%;
  }

  .kontakt-hero__decoration::after {
    content: "";
    position: absolute;
    bottom: 10%;
    right: 10%;
    width: 40%;
    height: 40%;
    background-color: rgba(40, 198, 183, 0.12);
    border-radius: 50%;
  }
}

/* ---------- Dane kontaktowe ---------- */
.kontakt-dane {
  background-color: var(--color-mint-arena);
}

.kontakt-dane__inner {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
}

.kontakt-dane__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
}

.kontakt-dane__card {
  background-color: var(--color-bg-surface);
  border: var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-lg);
  position: relative;
  overflow: hidden;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.kontakt-dane__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background-color: var(--color-electric-violet);
}

.kontakt-dane__icon {
  font-size: 2rem;
  line-height: 1;
  margin-block-end: var(--space-xs);
}

.kontakt-dane__card-title {
  margin-block-end: var(--space-xs);
}

.kontakt-dane__value {
  font-style: normal;
  font-weight: 700;
  color: var(--color-ink-navy);
  margin-block-end: var(--space-xs);
  line-height: 1.5;
}

.kontakt-dane__value--link {
  color: var(--color-electric-violet);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.kontakt-dane__value--link:hover {
  color: #5E3BB8;
}

.kontakt-dane__note {
  font-size: var(--text-body-sm-size);
  color: var(--color-ink-navy);
  opacity: 0.8;
  margin-block-end: 0;
}

@media (min-width: 768px) {
  .kontakt-dane__inner {
    padding-inline: var(--container-padding-desktop);
  }

  .kontakt-dane__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
  }
}

/* ---------- Formularz kontaktowy ---------- */
.kontakt-formularz {
  background-color: var(--color-mint-arena);
}

.kontakt-formularz__inner {
  max-width: 600px;
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
}

.kontakt-formularz__intro {
  text-align: center;
  margin-block-end: var(--space-xl);
}

.kontakt-form {
  background-color: var(--color-bg-surface);
  border: var(--border-light);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.kontakt-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
}

.kontakt-form__field label {
  font-weight: 600;
}

.kontakt-form__required {
  color: var(--color-coral-red);
  font-weight: 700;
}

.kontakt-form__optional {
  font-weight: 400;
  font-size: var(--text-body-sm-size);
  color: var(--color-ink-navy);
  opacity: 0.7;
}

.kontakt-form__error {
  color: var(--color-coral-red);
  font-size: var(--text-body-sm-size);
  margin-block-end: 0;
}

.kontakt-form__consent {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
}

.kontakt-form__consent label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-weight: 400;
  margin-block-end: 0;
  cursor: pointer;
}

.kontakt-form__consent input[type="checkbox"] {
  width: auto;
  min-width: 18px;
  min-height: 18px;
  margin-block-start: 4px;
  accent-color: var(--color-electric-violet);
}

.kontakt-form__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.kontakt-form__submit {
  width: 100%;
  min-height: 48px;
  position: relative;
}

.kontakt-form__spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: kontakt-spin 0.8s linear infinite;
}

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

.kontakt-form__success {
  background-color: var(--color-turquoise-soft);
  border: 1px solid var(--color-tropical-turquoise);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  color: var(--color-ink-navy);
  font-weight: 600;
  margin-block-end: 0;
}

@media (min-width: 768px) {
  .kontakt-formularz__inner {
    padding-inline: var(--container-padding-desktop);
  }
}

/* ---------- Czas odpowiedzi i zakres tematów ---------- */
.kontakt-oczekiwania {
  background-color: var(--color-mint-arena);
}

.kontakt-oczekiwania__inner {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
}

.kontakt-oczekiwania__panel {
  background-color: var(--color-turquoise-soft);
  border: 1px solid var(--color-border-light);
  border-left: 4px solid var(--color-tropical-turquoise);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  max-width: 70%;
  min-width: 0;
}

.kontakt-oczekiwania__lead {
  margin-block-end: var(--space-lg);
}

.kontakt-oczekiwania__list {
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.kontakt-oczekiwania__list li {
  position: relative;
  padding-inline-start: var(--space-lg);
}

.kontakt-oczekiwania__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-tropical-turquoise);
  font-weight: 700;
}

@media (min-width: 768px) {
  .kontakt-oczekiwania__inner {
    padding-inline: var(--container-padding-desktop);
  }
}

@media (max-width: 767px) {
  .kontakt-oczekiwania__panel {
    max-width: 100%;
  }
}

/* ---------- Zgoda RODO i prywatność ---------- */
.kontakt-rodo-info {
  background-color: var(--color-mint-arena);
}

.kontakt-rodo-info__inner {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
}

.kontakt-rodo-info__text {
  max-width: 68ch;
  min-width: 0;
}

.kontakt-rodo-info__text p {
  margin-block-end: var(--space-md);
}

.kontakt-rodo-info__text a {
  color: var(--color-electric-violet);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.kontakt-rodo-info__text a:hover {
  color: #5E3BB8;
}

.kontakt-rodo-info__list {
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.kontakt-rodo-info__list li {
  position: relative;
  padding-inline-start: var(--space-lg);
}

.kontakt-rodo-info__list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-electric-violet);
  font-weight: 700;
}

@media (min-width: 768px) {
  .kontakt-rodo-info__inner {
    padding-inline: var(--container-padding-desktop);
  }
}

/* ---------- Informacja o niezależności ---------- */
.kontakt-niezaleznosc {
  background-color: var(--color-mint-arena);
}

.kontakt-niezaleznosc__inner {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
}

.kontakt-niezaleznosc__panel {
  background-color: var(--color-violet-soft);
  border: 1px solid var(--color-border-light);
  border-left: 4px solid var(--color-coral-red);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  max-width: 70%;
  min-width: 0;
}

.kontakt-niezaleznosc__lead {
  margin-block-end: var(--space-lg);
}

.kontakt-niezaleznosc__list {
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.kontakt-niezaleznosc__list li {
  position: relative;
  padding-inline-start: var(--space-lg);
}

.kontakt-niezaleznosc__list li::before {
  content: "!";
  position: absolute;
  left: 0;
  color: var(--color-coral-red);
  font-weight: 700;
}

@media (min-width: 768px) {
  .kontakt-niezaleznosc__inner {
    padding-inline: var(--container-padding-desktop);
  }
}

@media (max-width: 767px) {
  .kontakt-niezaleznosc__panel {
    max-width: 100%;
  }
}

/* ---------- Responsywne odstępy ---------- */
@media (max-width: 767px) {
  .kontakt-main {
    gap: var(--space-2xl);
    padding-block: var(--space-2xl) var(--space-3xl);
  }

  .kontakt-hero {
    padding-block: var(--space-xl) var(--space-2xl);
  }

  .kontakt-form {
    padding: var(--space-lg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kontakt-form__spinner {
    animation-duration: 1.5s;
  }
}


/* Polityka Cookies — page-owned styles */

.cookies-page {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
}

.cookies-hero {
  padding-block: var(--space-3xl) var(--space-2xl);
  border-bottom: 1px solid rgba(117, 73, 219, 0.2);
}

.cookies-hero__inner {
  max-width: 720px;
  margin-inline: auto;
  text-align: left;
}

.cookies-hero__eyebrow {
  font-size: var(--text-caption-size);
  font-weight: var(--text-caption-weight);
  letter-spacing: var(--text-caption-letter-spacing);
  text-transform: uppercase;
  color: var(--color-electric-violet);
  margin-block-end: var(--space-sm);
}

.cookies-hero h1 {
  margin-block-end: var(--space-md);
}

.cookies-hero__date {
  display: inline-block;
  background-color: var(--color-sunny-yellow);
  color: var(--color-ink-navy);
  font-size: var(--text-caption-size);
  font-weight: var(--text-caption-weight);
  letter-spacing: var(--text-caption-letter-spacing);
  text-transform: uppercase;
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-sm);
  margin-block-end: var(--space-lg);
}

.cookies-hero__lead {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line-height);
}

.cookies-section {
  padding-block: var(--space-2xl);
}

.cookies-section--definition {
  background-color: var(--color-mint-arena);
}

.cookies-section--manage {
  background-color: var(--color-turquoise-soft);
}

.cookies-section--legal {
  background-color: var(--color-violet-soft);
}

.cookies-section__inner {
  max-width: 720px;
  margin-inline: auto;
  text-align: left;
}

.cookies-section__inner--wide {
  max-width: 100%;
}

.cookies-section h2 {
  margin-block-end: var(--space-lg);
}

.cookies-section__lead {
  margin-block-end: var(--space-lg);
}

.cookies-list,
.cookies-steps,
.cookies-rights-list {
  margin-block-end: var(--space-md);
  padding-inline-start: var(--space-lg);
}

.cookies-list li,
.cookies-steps li,
.cookies-rights-list li {
  margin-block-end: var(--space-xs);
}

.cookies-list li:last-child,
.cookies-steps li:last-child,
.cookies-rights-list li:last-child {
  margin-block-end: 0;
}

.cookies-steps {
  list-style-type: decimal;
}

.cookies-rights-list {
  list-style-type: none;
  padding-inline-start: 0;
}

.cookies-rights-list li {
  position: relative;
  padding-inline-start: var(--space-xl);
  margin-block-end: var(--space-sm);
}

.cookies-rights-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-tropical-turquoise);
  font-weight: 700;
}

.cookies-table {
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-bg-surface);
}

.cookies-table__header,
.cookies-table__row {
  display: grid;
  grid-template-columns: 20% 40% 25% 15%;
  gap: var(--space-sm);
  padding: var(--space-md);
  align-items: start;
}

.cookies-table__header {
  background-color: var(--color-violet-soft);
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-ink-navy);
}

.cookies-table__row {
  border-top: 1px solid var(--color-border-light);
}

.cookies-table__row:nth-child(even) {
  background-color: var(--color-mint-arena);
}

.cookies-table__cell {
  min-width: 0;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}

.cookies-contact-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-block-start: var(--space-md);
}

.cookies-contact-card__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
}

.cookies-contact-card__icon {
  flex-shrink: 0;
  font-size: 1.25rem;
  color: var(--color-electric-violet);
}

.cookies-contact-card__item a {
  color: var(--color-text-link);
  text-decoration: none;
  overflow-wrap: break-word;
  word-break: break-word;
}

.cookies-contact-card__item a:hover {
  color: var(--color-text-link-hover);
}

@media (min-width: 768px) {
  .cookies-page {
    padding-inline: var(--container-padding-desktop);
  }

  .cookies-hero {
    padding-block: var(--space-4xl) var(--space-3xl);
  }

  .cookies-section {
    padding-block: var(--space-3xl);
  }
}

@media (max-width: 767px) {
  .cookies-table__header {
    display: none;
  }

  .cookies-table__row {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-md);
  }

  .cookies-table__cell {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
  }

  .cookies-table__cell::before {
    content: attr(data-label);
    font-weight: 700;
    font-family: var(--font-heading);
    color: var(--color-electric-violet);
    font-size: var(--text-caption-size);
    letter-spacing: var(--text-caption-letter-spacing);
    text-transform: uppercase;
  }

  .cookies-contact-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 390px) {
  .cookies-page {
    padding-inline: var(--space-md);
  }

  .cookies-hero__inner,
  .cookies-section__inner {
    max-width: 100%;
  }

  .cookies-hero h1 {
    font-size: var(--text-h1-size);
  }

  .cookies-contact-card {
    padding: var(--space-md);
  }
}


/* ===== Regulamin Page Styles ===== */

.regulamin-page {
  background-color: var(--color-mint-arena);
  padding-block: var(--space-3xl);
}

.regulamin-container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
}

@media (min-width: 768px) {
  .regulamin-container {
    padding-inline: var(--container-padding-desktop);
    gap: var(--space-4xl);
  }
}

/* Hero */
.regulamin-hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding-block-start: var(--space-2xl);
}

.regulamin-kicker {
  font-size: var(--text-caption-size);
  font-weight: var(--text-caption-weight);
  letter-spacing: var(--text-caption-letter-spacing);
  text-transform: uppercase;
  color: var(--color-electric-violet);
  margin: 0;
}

.regulamin-title {
  font-size: var(--text-h1-size);
  font-weight: var(--text-h1-weight);
  line-height: var(--text-h1-line-height);
  color: var(--color-ink-navy);
  margin: 0;
  max-width: 100%;
}

.regulamin-lead {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line-height);
  color: var(--color-ink-navy);
  margin: 0;
  max-width: 68ch;
}

.regulamin-date {
  font-size: var(--text-caption-size);
  font-weight: var(--text-caption-weight);
  letter-spacing: var(--text-caption-letter-spacing);
  text-transform: uppercase;
  color: var(--color-ink-navy);
  margin: 0;
  max-width: 68ch;
}

/* Table of contents */
.regulamin-toc {
  background-color: var(--color-bg-surface);
  border: var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.regulamin-toc-title {
  font-size: var(--text-h3-size);
  font-weight: var(--text-h3-weight);
  line-height: var(--text-h3-line-height);
  color: var(--color-ink-navy);
  margin: 0;
}

.regulamin-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.regulamin-toc-list a {
  color: var(--color-electric-violet);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.regulamin-toc-list a:hover {
  color: #5E3BB8;
  text-decoration: underline;
}

/* Sections */
.regulamin-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding-block-end: var(--space-2xl);
  border-block-end: 1px solid rgba(117, 73, 219, 0.2);
}

.regulamin-section:last-child {
  border-block-end: none;
  padding-block-end: 0;
}

.regulamin-section--card {
  background-color: var(--color-bg-surface);
  border: var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  border-block-end: var(--border-light);
}

.regulamin-section-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
}

.regulamin-section-number {
  font-family: var(--font-heading);
  font-size: var(--text-h3-size);
  font-weight: 800;
  color: var(--color-electric-violet);
  line-height: 1;
}

.regulamin-section-title {
  font-size: var(--text-h2-size);
  font-weight: var(--text-h2-weight);
  line-height: var(--text-h2-line-height);
  color: var(--color-ink-navy);
  margin: 0;
}

.regulamin-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.regulamin-copy p {
  margin: 0;
}

.regulamin-subtitle {
  font-size: var(--text-h3-size);
  font-weight: var(--text-h3-weight);
  line-height: var(--text-h3-line-height);
  color: var(--color-ink-navy);
  margin: 0;
  margin-block-start: var(--space-sm);
}

.regulamin-subtitle:first-child {
  margin-block-start: 0;
}

.regulamin-list,
.regulamin-definition-list {
  list-style: none;
  margin: 0;
  padding-inline-start: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.regulamin-list li,
.regulamin-definition-list li {
  position: relative;
  padding-inline-start: var(--space-md);
  max-width: 68ch;
}

.regulamin-list li::before,
.regulamin-definition-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-electric-violet);
}

.regulamin-definition-list strong {
  font-weight: 700;
  color: var(--color-ink-navy);
}

/* Callout */
.regulamin-callout {
  background-color: var(--color-turquoise-soft);
  border-inline-start: 3px solid var(--color-tropical-turquoise);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.regulamin-callout p {
  margin: 0;
}

/* Contact block */
.regulamin-contact-block {
  background-color: var(--color-violet-soft);
  border: var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.regulamin-contact-block p {
  margin: 0;
}

.regulamin-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.regulamin-contact-list a {
  color: var(--color-electric-violet);
  font-weight: 600;
  text-decoration: none;
}

.regulamin-contact-list a:hover {
  text-decoration: underline;
}

/* Responsive adjustments */
@media (max-width: 767px) {
  .regulamin-page {
    padding-block: var(--space-2xl);
  }

  .regulamin-container {
    gap: var(--space-2xl);
  }

  .regulamin-hero {
    gap: var(--space-md);
    padding-block-start: var(--space-xl);
  }

  .regulamin-section {
    gap: var(--space-md);
    padding-block-end: var(--space-xl);
  }

  .regulamin-section--card {
    padding: var(--space-md);
  }

  .regulamin-copy {
    gap: var(--space-sm);
  }

  .regulamin-list,
  .regulamin-definition-list {
    padding-inline-start: var(--space-md);
  }

  .regulamin-list li,
  .regulamin-definition-list li {
    padding-inline-start: var(--space-sm);
  }
}


/* ===== BatoForges Polityka Prywatności Page CSS ===== */

.privacy-page {
  background-color: var(--color-bg-page);
  padding-block: var(--space-3xl) var(--space-4xl);
}

.privacy-page__container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
}

@media (min-width: 768px) {
  .privacy-page__container {
    padding-inline: var(--container-padding-desktop);
  }
}

/* Hero */
.privacy-hero {
  margin-block-end: var(--space-3xl);
  padding-block-end: var(--space-2xl);
  border-block-end: 1px solid rgba(117, 73, 219, 0.2);
}

.privacy-hero__eyebrow {
  font-size: var(--text-caption-size);
  font-weight: var(--text-caption-weight);
  letter-spacing: var(--text-caption-letter-spacing);
  text-transform: uppercase;
  color: var(--color-electric-violet);
  margin-block-end: var(--space-sm);
}

.privacy-hero__title {
  color: var(--color-ink-navy);
  margin-block-end: var(--space-md);
}

.privacy-hero__lead {
  max-width: 68ch;
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line-height);
  color: var(--color-text-primary);
  margin-block-end: var(--space-xl);
}

/* Table of contents */
.privacy-toc {
  background-color: var(--color-bg-surface);
  border: var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.privacy-toc__title {
  font-size: var(--text-h3-size);
  margin-block-end: var(--space-md);
}

.privacy-toc__list {
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}

.privacy-toc__list li {
  margin-block-end: 0;
}

.privacy-toc__list a {
  color: var(--color-electric-violet);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--transition-fast);
}

.privacy-toc__list a:hover {
  color: var(--color-ink-navy);
  text-decoration: underline;
}

@media (min-width: 768px) {
  .privacy-toc__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm) var(--space-lg);
  }
}

/* Sections */
.privacy-section {
  padding-block: var(--space-2xl);
  border-block-end: 1px solid rgba(117, 73, 219, 0.2);
}

.privacy-section:last-of-type {
  border-block-end: none;
  padding-block-end: 0;
}

.privacy-section__title {
  color: var(--color-ink-navy);
  margin-block-end: var(--space-lg);
}

.privacy-section__lead {
  max-width: 68ch;
  margin-block-end: var(--space-lg);
}

/* Section 1: Introduction */
.privacy-intro-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin-block-end: var(--space-xl);
}

.privacy-intro-copy {
  min-width: 0;
}

.privacy-intro-copy__title {
  margin-block-end: var(--space-sm);
}

.privacy-intro-copy__text {
  max-width: 68ch;
  margin-block-end: 0;
}

.privacy-contact-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-block-end: 0;
  background-color: var(--color-bg-surface);
  border: var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.privacy-contact-list__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.privacy-contact-list__item dt {
  font-weight: 700;
  color: var(--color-ink-navy);
  font-size: var(--text-body-sm-size);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.privacy-contact-list__item dd {
  margin-inline-start: 0;
  color: var(--color-text-primary);
  word-break: break-word;
}

.privacy-contact-list__item a {
  color: var(--color-electric-violet);
}

.privacy-date-block {
  background-color: var(--color-violet-soft);
  border-inline-start: 4px solid var(--color-electric-violet);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}

.privacy-date-block__label {
  font-size: var(--text-caption-size);
  font-weight: var(--text-caption-weight);
  letter-spacing: var(--text-caption-letter-spacing);
  text-transform: uppercase;
  color: var(--color-electric-violet);
  margin-block-end: var(--space-xs);
}

.privacy-date-block__value {
  font-family: var(--font-heading);
  font-size: var(--text-h3-size);
  font-weight: 700;
  color: var(--color-ink-navy);
  margin-block-end: var(--space-sm);
}

.privacy-date-block__text {
  max-width: 68ch;
  margin-block-end: 0;
}

@media (min-width: 768px) {
  .privacy-intro-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }

  .privacy-contact-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Section 2: Data scope */
.privacy-data-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.privacy-data-card {
  background-color: var(--color-bg-surface);
  border: var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  min-width: 0;
}

.privacy-data-card--voluntary {
  border-block-start: 4px solid var(--color-tropical-turquoise);
}

.privacy-data-card--automatic {
  border-block-start: 4px solid var(--color-electric-violet);
}

.privacy-data-card__title {
  margin-block-end: var(--space-sm);
}

.privacy-data-card__intro {
  margin-block-end: var(--space-md);
}

.privacy-data-card__list {
  margin-block-end: 0;
  padding-inline-start: var(--space-lg);
}

.privacy-data-card__list li {
  margin-block-end: var(--space-xs);
}

@media (min-width: 768px) {
  .privacy-data-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Tables */
.privacy-table-wrap {
  overflow-x: auto;
  margin-block-start: var(--space-lg);
  border: var(--border-light);
  border-radius: var(--radius-lg);
  background-color: var(--color-bg-surface);
}

.privacy-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}

.privacy-table th,
.privacy-table td {
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  vertical-align: top;
  border-block-end: 1px solid var(--color-border-light);
}

.privacy-table th {
  background-color: var(--color-ink-navy);
  color: var(--color-text-on-dark);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-body-sm-size);
  letter-spacing: 0.02em;
}

.privacy-table tbody tr:nth-child(even) {
  background-color: var(--color-mint-arena);
}

.privacy-table tbody tr:nth-child(odd) {
  background-color: var(--color-white-mint);
}

.privacy-table--cookies {
  min-width: 500px;
}

.privacy-table--retention {
  min-width: 500px;
}

@media (max-width: 767px) {
  .privacy-table-wrap {
    border: none;
    border-radius: 0;
    background-color: transparent;
    overflow-x: visible;
  }

  .privacy-table {
    min-width: 0;
    display: block;
  }

  .privacy-table thead {
    display: none;
  }

  .privacy-table tbody {
    display: grid;
    gap: var(--space-md);
  }

  .privacy-table tr {
    display: block;
    background-color: var(--color-bg-surface);
    border: var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
  }

  .privacy-table td {
    display: block;
    padding: var(--space-xs) 0;
    border: none;
  }

  .privacy-table td::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    color: var(--color-ink-navy);
    margin-block-end: var(--space-2xs);
    font-size: var(--text-body-sm-size);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
}

/* Section 4: Cookies */
.privacy-cookies-copy {
  max-width: 68ch;
  margin-block-end: var(--space-lg);
}

.privacy-cookies-copy__title {
  margin-block-end: var(--space-sm);
}

.privacy-cookies-copy__text {
  margin-block-end: var(--space-md);
}

.privacy-cookies-copy__list {
  margin-block-end: 0;
  padding-inline-start: var(--space-lg);
}

/* Section 5: Recipients */
.privacy-recipients-copy {
  max-width: 68ch;
  margin-block-end: var(--space-lg);
}

.privacy-recipients-copy__text {
  margin-block-end: var(--space-md);
}

.privacy-recipients-copy__list {
  margin-block-end: 0;
  padding-inline-start: var(--space-lg);
}

.privacy-callout {
  background-color: var(--color-turquoise-soft);
  border-inline-start: 4px solid var(--color-tropical-turquoise);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  max-width: 68ch;
}

.privacy-callout__text {
  margin-block-end: 0;
}

/* Section 7: Rights */
.privacy-rights-list {
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}

.privacy-rights-list li {
  margin-block-end: 0;
  padding-inline-start: var(--space-lg);
  position: relative;
}

.privacy-rights-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-electric-violet);
}

@media (min-width: 768px) {
  .privacy-rights-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm) var(--space-xl);
  }
}

/* Section 8: Security */
.privacy-section--security {
  background-color: var(--color-turquoise-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin-block: var(--space-2xl);
}

.privacy-security-copy {
  max-width: 68ch;
}

.privacy-security-copy__text {
  margin-block-end: var(--space-md);
}

.privacy-security-copy__list {
  margin-block-end: 0;
  padding-inline-start: var(--space-lg);
}

/* Section 9: Changes */
.privacy-changes-copy {
  max-width: 68ch;
}

.privacy-changes-copy__text {
  margin-block-end: var(--space-md);
}

.privacy-changes-copy__list {
  margin-block-end: var(--space-md);
  padding-inline-start: var(--space-lg);
}

.privacy-changes-copy__date {
  font-weight: 700;
  color: var(--color-electric-violet);
  margin-block-end: 0;
}

/* Section 10: Contact */
.privacy-section--contact {
  background-color: var(--color-violet-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin-block-start: var(--space-2xl);
}

.privacy-contact-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-block-start: var(--space-lg);
}

.privacy-contact-card {
  background-color: var(--color-bg-surface);
  border: var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  min-width: 0;
}

.privacy-contact-card__title {
  margin-block-end: var(--space-sm);
}

.privacy-contact-card__text {
  margin-block-end: 0;
  word-break: break-word;
}

.privacy-contact-card__text a {
  color: var(--color-electric-violet);
}

@media (min-width: 768px) {
  .privacy-contact-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Focus visible */
.privacy-page a:focus-visible,
.privacy-page button:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .privacy-page *,
  .privacy-page *::before,
  .privacy-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ===== Rozwój Batomonów — page styles ===== */

#rozwoj-batomonow {
  --rozwoj-section-space: var(--space-3xl);
  --rozwoj-card-gap: var(--space-lg);
  --rozwoj-card-radius: var(--radius-lg);
  --rozwoj-card-border: var(--border-light);
  --rozwoj-card-shadow-hover: var(--shadow-hover);
  --rozwoj-media-radius: var(--radius-xl);
  --rozwoj-media-shadow: 0 8px 24px rgba(40, 198, 183, 0.18);
}

/* ---------- Hero ---------- */
.rozwoj-hero {
  background-color: var(--color-bg-page);
  padding-block: var(--space-3xl);
}

.rozwoj-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: center;
}

.rozwoj-hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 68ch;
  min-width: 0;
}

.rozwoj-hero__eyebrow {
  font-size: var(--text-caption-size);
  font-weight: var(--text-caption-weight);
  letter-spacing: var(--text-caption-letter-spacing);
  text-transform: uppercase;
  color: var(--color-electric-violet);
  margin: 0;
}

.rozwoj-hero__title {
  font-size: clamp(2rem, 8vw, 3.25rem);
  line-height: 1.1;
  font-weight: 800;
  color: var(--color-ink-navy);
  margin: 0;
}

.rozwoj-hero__lead {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line-height);
  color: var(--color-ink-navy);
  margin: 0;
}

.rozwoj-hero__fact {
  font-size: var(--text-body-sm-size);
  color: var(--color-electric-violet);
  margin: 0;
}

.rozwoj-hero__cta {
  align-self: flex-start;
  margin-top: var(--space-xs);
}

.rozwoj-hero__media {
  width: 100%;
  min-width: 0;
}

.rozwoj-hero__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--rozwoj-media-shadow);
}

/* ---------- Section base ---------- */
.rozwoj-section {
  padding-block: var(--rozwoj-section-space);
}

.rozwoj-section__number {
  font-size: var(--text-caption-size);
  font-weight: var(--text-caption-weight);
  letter-spacing: var(--text-caption-letter-spacing);
  text-transform: uppercase;
  color: var(--color-electric-violet);
  margin-block-end: var(--space-xs);
}

.rozwoj-section__title {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-line-height);
  font-weight: var(--text-h2-weight);
  color: var(--color-ink-navy);
  margin-block-end: var(--space-md);
}

.rozwoj-section__lead {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line-height);
  color: var(--color-ink-navy);
  max-width: 68ch;
  margin-block-end: var(--space-xl);
}

/* ---------- Intro ---------- */
.rozwoj-section--intro {
  background-color: var(--color-bg-page);
}

.rozwoj-intro__content {
  max-width: 720px;
  margin-inline: auto;
}

.rozwoj-intro__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.rozwoj-intro__body p {
  margin: 0;
}

.rozwoj-intro__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: 0;
  padding-inline-start: var(--space-lg);
}

.rozwoj-intro__list li {
  margin: 0;
}

/* ---------- Card grids ---------- */
.rozwoj-card-grid {
  display: grid;
  gap: var(--rozwoj-card-gap);
}

.rozwoj-card-grid--3 {
  grid-template-columns: 1fr;
}

.rozwoj-card {
  background-color: var(--color-bg-surface);
  border: var(--rozwoj-card-border);
  border-radius: var(--rozwoj-card-radius);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-width: 0;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.rozwoj-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--rozwoj-card-shadow-hover);
}

.rozwoj-card h3 {
  margin: 0;
  color: var(--color-ink-navy);
}

.rozwoj-card p {
  margin: 0;
}

.rozwoj-card ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: 0;
  padding-inline-start: var(--space-lg);
}

.rozwoj-card li {
  margin: 0;
}

.rozwoj-card__note {
  font-size: var(--text-body-sm-size);
  color: var(--color-electric-violet);
  background-color: var(--color-violet-soft);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
}

.rozwoj-tip {
  background-color: var(--color-turquoise-soft);
  border-inline-start: 3px solid var(--color-tropical-turquoise);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.rozwoj-tip p {
  margin: 0;
}

/* Table inside card */
.rozwoj-table-wrap {
  display: flex;
  flex-direction: column;
  border: var(--rozwoj-card-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.rozwoj-table-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-bg-surface);
}

.rozwoj-table-row:nth-child(even) {
  background-color: var(--color-mint-arena);
}

.rozwoj-table-row--head {
  background-color: var(--color-ink-navy);
  color: var(--color-text-on-dark);
  font-weight: 700;
}

.rozwoj-table-row--head span {
  color: var(--color-text-on-dark);
}

/* ---------- Boosting ---------- */
.rozwoj-section--boosting {
  background-color: var(--color-violet-soft);
}

.rozwoj-boost-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: start;
}

.rozwoj-boost__copy,
.rozwoj-boost__items {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-width: 0;
}

.rozwoj-boost__copy h3,
.rozwoj-boost__items h3 {
  margin: 0;
}

.rozwoj-boost__copy p,
.rozwoj-boost__items p {
  margin: 0;
}

.rozwoj-boost__copy ul,
.rozwoj-item-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: 0;
  padding-inline-start: var(--space-lg);
}

.rozwoj-boost__copy li,
.rozwoj-item-list li {
  margin: 0;
}

.rozwoj-boost__note,
.rozwoj-items__note {
  font-size: var(--text-body-sm-size);
  color: var(--color-electric-violet);
}

/* ---------- Evolution ---------- */
.rozwoj-section--evolution {
  background-color: var(--color-bg-page);
}

.rozwoj-evolution-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: start;
}

.rozwoj-evolution__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-width: 0;
}

.rozwoj-evolution__copy h3 {
  margin: 0;
}

.rozwoj-evolution__copy p {
  margin: 0;
}

.rozwoj-evolution__copy ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: 0;
  padding-inline-start: var(--space-lg);
}

.rozwoj-evolution__copy li {
  margin: 0;
}

.rozwoj-evolution__note {
  font-size: var(--text-body-sm-size);
  color: var(--color-electric-violet);
  background-color: var(--color-violet-soft);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
}

.rozwoj-evolution__media {
  width: 100%;
  min-width: 0;
}

.rozwoj-evolution__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--rozwoj-media-shadow);
}

/* ---------- Skills ---------- */
.rozwoj-section--skills {
  background-color: var(--color-bg-surface);
}

/* ---------- Items ---------- */
.rozwoj-section--items {
  background-color: var(--color-turquoise-soft);
}

.rozwoj-items-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: start;
}

.rozwoj-items__column {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-width: 0;
}

.rozwoj-items__column h3 {
  margin: 0;
}

.rozwoj-items__column p {
  margin: 0;
}

/* ---------- Advanced ---------- */
.rozwoj-section--advanced {
  background-color: var(--color-bg-page);
}

/* ---------- FAQ ---------- */
.rozwoj-section--faq {
  background-color: var(--color-bg-surface);
}

.rozwoj-faq {
  max-width: 720px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.rozwoj-faq__item {
  background-color: var(--color-bg-surface);
  border: var(--rozwoj-card-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.rozwoj-faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  font-family: var(--font-heading);
  font-size: var(--text-h4-size);
  font-weight: 700;
  color: var(--color-ink-navy);
  background-color: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  min-height: 48px;
}

.rozwoj-faq__question:hover {
  background-color: var(--color-violet-soft);
}

.rozwoj-faq__question:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: -2px;
}

.rozwoj-faq__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  transition: transform var(--transition-fast);
}

.rozwoj-faq__icon::before,
.rozwoj-faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  background-color: var(--color-electric-violet);
  transform: translate(-50%, -50%);
  transition: transform var(--transition-fast);
}

.rozwoj-faq__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.rozwoj-faq__item.is-open .rozwoj-faq__icon {
  transform: rotate(180deg);
}

.rozwoj-faq__item.is-open .rozwoj-faq__icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.rozwoj-faq__answer {
  padding: 0 var(--space-lg) var(--space-lg);
}

.rozwoj-faq__answer p {
  margin: 0;
  color: var(--color-ink-navy);
}

/* ---------- CTA ---------- */
.rozwoj-section--cta {
  background-color: var(--color-violet-soft);
}

.rozwoj-cta {
  max-width: 68ch;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: center;
}

.rozwoj-cta h2 {
  margin: 0;
}

.rozwoj-cta p {
  margin: 0;
}

/* ---------- Responsive ---------- */
@media (min-width: 640px) {
  .rozwoj-hero__media img {
    aspect-ratio: 1 / 1;
  }
}

@media (min-width: 768px) {
  #rozwoj-batomonow {
    --rozwoj-section-space: var(--space-4xl);
  }

  .rozwoj-card-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .rozwoj-boost-grid {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-2xl);
  }

  .rozwoj-evolution-grid {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-2xl);
  }

  .rozwoj-items-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2xl);
  }
}

@media (min-width: 1024px) {
  .rozwoj-hero__inner {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-2xl);
  }

  .rozwoj-hero__media img {
    border-radius: var(--rozwoj-media-radius);
  }
}

@media (max-width: 767px) {
  .rozwoj-hero {
    padding-block: var(--space-2xl);
  }

  .rozwoj-hero__inner {
    gap: var(--space-xl);
  }

  .rozwoj-hero__copy {
    max-width: 100%;
  }

  .rozwoj-hero__title {
    font-size: clamp(2rem, 8vw, 2.5rem);
  }

  .rozwoj-section__lead {
    margin-block-end: var(--space-lg);
  }

  .rozwoj-card-grid--3 {
    grid-template-columns: 1fr;
  }

  .rozwoj-boost-grid,
  .rozwoj-evolution-grid,
  .rozwoj-items-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rozwoj-card,
  .rozwoj-faq__icon,
  .rozwoj-faq__icon::before,
  .rozwoj-faq__icon::after {
    transition: none;
  }

  .rozwoj-card:hover {
    transform: none;
    box-shadow: none;
  }
}


/* ===== Batomony Page Styles ===== */

/* Scoped to page main content only */
main {
  --batomony-section-gap: var(--space-3xl);
}

/* ---------- Section Heading ---------- */
.batomony-section-heading {
  margin-block-end: var(--space-xl);
}

.batomony-section-heading__number {
  font-size: var(--text-caption-size);
  font-weight: var(--text-caption-weight);
  letter-spacing: var(--text-caption-letter-spacing);
  text-transform: uppercase;
  color: var(--color-electric-violet);
  margin-block-end: var(--space-xs);
}

.batomony-section-heading h2 {
  margin-block-end: var(--space-sm);
}

.batomony-section-heading__lead {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line-height);
  max-width: 68ch;
  margin-block-end: 0;
}

/* ---------- Hero ---------- */
.batomony-hero {
  background-color: var(--color-mint-arena);
  padding-block: var(--space-4xl) var(--space-2xl);
  position: relative;
  overflow: hidden;
}

.batomony-hero::before {
  content: "";
  position: absolute;
  top: -20%;
  right: -10%;
  width: 300px;
  height: 300px;
  background: var(--color-sunny-yellow);
  border-radius: 50%;
  opacity: 0.15;
  pointer-events: none;
}

.batomony-hero__inner {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  align-items: center;
}

.batomony-hero__content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: flex-start;
}

.batomony-hero__eyebrow {
  font-size: var(--text-caption-size);
  font-weight: var(--text-caption-weight);
  letter-spacing: var(--text-caption-letter-spacing);
  text-transform: uppercase;
  color: var(--color-electric-violet);
  margin-block-end: 0;
}

.batomony-hero h1 {
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-line-height);
  font-weight: var(--text-h1-weight);
  color: var(--color-ink-navy);
  margin-block-end: 0;
}

.batomony-hero__lead {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line-height);
  max-width: 60%;
  margin-block-end: 0;
}

.batomony-hero__support {
  font-size: var(--text-body-size);
  line-height: var(--text-body-line-height);
  max-width: 60%;
  margin-block-end: 0;
}

.batomony-hero__cta {
  margin-block-start: var(--space-sm);
}

.batomony-hero__media {
  width: 100%;
  max-width: 300px;
  display: flex;
  justify-content: center;
}

.batomony-hero__media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(38, 52, 81, 0.12);
}

/* ---------- Types Section ---------- */
.batomony-types {
  background-color: var(--color-white-mint);
  padding-block: var(--space-3xl);
}

.batomony-types__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.batomony-types__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}

.batomony-type-card {
  background-color: var(--color-bg-surface);
  border: var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  border-top: 4px solid var(--color-ink-navy);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.batomony-type-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.batomony-type-card h3 {
  margin-block-end: var(--space-xs);
}

.batomony-type-card p {
  margin-block-end: 0;
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line-height);
}

.batomony-type-card--fire { border-top-color: #F16D74; }
.batomony-type-card--water { border-top-color: #28C6B7; }
.batomony-type-card--nature { border-top-color: #6BBF59; }
.batomony-type-card--electric { border-top-color: #FFD45C; }
.batomony-type-card--ice { border-top-color: #A5D8FF; }
.batomony-type-card--psychic { border-top-color: #C77DFF; }
.batomony-type-card--dark { border-top-color: #263451; }
.batomony-type-card--dragon { border-top-color: #7549DB; }
.batomony-type-card--steel { border-top-color: #9AA5B1; }
.batomony-type-card--fairy { border-top-color: #FFB3C6; }

.batomony-types__note {
  background-color: var(--color-turquoise-soft);
  border-left: 4px solid var(--color-tropical-turquoise);
  padding: var(--space-lg);
  border-radius: var(--radius-sm);
}

.batomony-types__note p {
  margin-block-end: 0;
  }

/* ---------- Roles Section ---------- */
.batomony-roles {
  background-color: var(--color-violet-soft);
  padding-block: var(--space-3xl);
}

.batomony-roles__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.batomony-roles__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.batomony-roles__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.batomony-role-card {
  background-color: var(--color-bg-surface);
  border: var(--border-light);
  border-left: 4px solid var(--color-ink-navy);
  border-radius: var(--radius-sm);
  padding: var(--space-md) var(--space-lg);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.batomony-role-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.batomony-role-card h3 {
  margin-block-end: var(--space-2xs);
}

.batomony-role-card p {
  margin-block-end: 0;
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line-height);
}

.batomony-role-card--tank { border-left-color: #28C6B7; }
.batomony-role-card--dps { border-left-color: #F16D74; }
.batomony-role-card--support { border-left-color: #FFD45C; }
.batomony-role-card--controller { border-left-color: #7549DB; }
.batomony-role-card--initiator { border-left-color: #263451; }

.batomony-roles__examples {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.batomony-roles__examples h3 {
  margin-block-end: 0;
}

.batomony-roles__examples p {
  margin-block-end: 0;
}

.batomony-roles__table {
  display: flex;
  flex-direction: column;
  border: var(--border-light);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.batomony-roles__table-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border-light);
  font-size: var(--text-body-sm-size);
}

.batomony-roles__table-row:last-child {
  border-bottom: none;
}

.batomony-roles__table-row--header {
  background-color: var(--color-violet-soft);
  font-weight: 700;
}

/* ---------- Examples Section ---------- */
.batomony-examples {
  background-color: var(--color-mint-arena);
  padding-block: var(--space-3xl);
}

.batomony-examples__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.batomony-examples__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.batomony-creature-card {
  background-color: var(--color-bg-surface);
  border: var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.batomony-creature-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.batomony-creature-card__media {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--color-mint-arena);
}

.batomony-creature-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.batomony-creature-card__body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex: 1;
}

.batomony-creature-card__body h3 {
  margin-block-end: 0;
}

.batomony-creature-card__meta {
  font-size: var(--text-caption-size);
  font-weight: var(--text-caption-weight);
  letter-spacing: var(--text-caption-letter-spacing);
  text-transform: uppercase;
  color: var(--color-electric-violet);
  margin-block-end: 0;
}

.batomony-creature-card__body p:not(.batomony-creature-card__meta) {
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line-height);
  margin-block-end: 0;
}

.batomony-creature-card__stats {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line-height);
}

.batomony-creature-card__stats li {
  margin: 0;
}

/* ---------- Synergies Section ---------- */
.batomony-synergies {
  background-color: var(--color-turquoise-soft);
  padding-block: var(--space-3xl);
}

.batomony-synergies__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.batomony-synergies__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.batomony-synergies__description {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.batomony-synergies__description h3 {
  margin-block-end: 0;
}

.batomony-synergies__description p {
  margin-block-end: 0;
}

.batomony-synergies__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.batomony-synergy-card {
  background-color: var(--color-bg-surface);
  border: var(--border-light);
  border-left: 4px solid var(--color-tropical-turquoise);
  border-radius: var(--radius-sm);
  padding: var(--space-md) var(--space-lg);
}

.batomony-synergy-card h3 {
  margin-block-end: var(--space-2xs);
}

.batomony-synergy-card p {
  margin-block-end: 0;
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line-height);
}

/* ---------- Progression Section ---------- */
.batomony-progression {
  background-color: var(--color-mint-arena);
  padding-block: var(--space-3xl);
}

.batomony-progression__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.batomony-progression__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.batomony-progression__obtaining,
.batomony-progression__development {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.batomony-progression__obtaining h3,
.batomony-progression__development h3 {
  margin-block-end: 0;
}

.batomony-progression__obtaining ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.batomony-progression__obtaining li {
  margin: 0;
  padding-inline-start: var(--space-md);
  position: relative;
}

.batomony-progression__obtaining li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-electric-violet);
  font-weight: 700;
}

.batomony-progression__development p {
  margin-block-end: 0;
}

/* ---------- Tips Section ---------- */
.batomony-tips {
  background-color: #FFF9E6;
  padding-block: var(--space-3xl);
}

.batomony-tips__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.batomony-tips__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.batomony-tips__list li {
  margin: 0;
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-bg-surface);
  border-left: 4px solid var(--color-sunny-yellow);
  border-radius: var(--radius-sm);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line-height);
}

/* ---------- Next Steps Section ---------- */
.batomony-next {
  background-color: var(--color-white-mint);
  padding-block: var(--space-3xl);
}

.batomony-next__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.batomony-next__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.batomony-next-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-lg);
  background-color: var(--color-bg-surface);
  border: var(--border-light);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--color-text-primary);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
  position: relative;
}

.batomony-next-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: var(--color-electric-violet);
  color: var(--color-text-primary);
}

.batomony-next-card h3 {
  margin-block-end: 0;
  font-size: var(--text-h4-size);
}

.batomony-next-card p {
  margin-block-end: 0;
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line-height);
}

.batomony-next-card__arrow {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  font-size: 1.25rem;
  color: var(--color-electric-violet);
  line-height: 1;
}

/* ---------- Tablet (min-width: 768px) ---------- */
@media (min-width: 768px) {
  .batomony-hero {
    padding-block: var(--space-5xl) var(--space-3xl);
  }

  .batomony-hero__inner {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2xl);
    padding-inline: var(--container-padding-desktop);
  }

  .batomony-hero__content {
    width: 60%;
    flex: 0 0 60%;
  }

  .batomony-hero__media {
    width: 40%;
    flex: 0 0 40%;
    max-width: none;
  }

  .batomony-hero__lead,
  .batomony-hero__support {
    max-width: 100%;
  }

  .batomony-types__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
  }

  .batomony-roles__layout {
    grid-template-columns: 3fr 2fr;
    gap: var(--space-2xl);
  }

  .batomony-examples__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
  }

  .batomony-synergies__layout {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }

  .batomony-progression__layout {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }

  .batomony-next__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
  }
}

/* ---------- Desktop (min-width: 1024px) ---------- */
@media (min-width: 1024px) {
  .batomony-types__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
  }

  .batomony-examples__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-lg);
  }

  .batomony-next__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-lg);
  }

  .batomony-hero__inner {
    gap: var(--space-2xl);
  }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .batomony-type-card,
  .batomony-role-card,
  .batomony-creature-card,
  .batomony-next-card {
    transition: none;
  }
}


/* ===== BatoForges Budowanie Drużyny Page Styles ===== */

.team-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: center;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding: var(--space-3xl) var(--container-padding-mobile);
}

.team-hero__content {
  min-width: 0;
}

.team-hero__eyebrow {
  font-size: var(--text-caption-size);
  font-weight: var(--text-caption-weight);
  letter-spacing: var(--text-caption-letter-spacing);
  text-transform: uppercase;
  color: var(--color-electric-violet);
  margin-block-end: var(--space-sm);
}

.team-hero__lead {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line-height);
  max-width: 68ch;
  margin-block-end: var(--space-lg);
}

.team-hero__media {
  min-width: 0;
  margin: 0;
}

.team-hero__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: 0 8px 24px rgba(38, 52, 81, 0.12);
}

.team-section {
  padding: var(--space-4xl) var(--container-padding-mobile);
}

.team-section__header {
  max-width: var(--container-max-width);
  margin-inline: auto;
  margin-block-end: var(--space-2xl);
}

.team-section__chapter {
  font-size: var(--text-caption-size);
  font-weight: var(--text-caption-weight);
  letter-spacing: var(--text-caption-letter-spacing);
  text-transform: uppercase;
  color: var(--color-electric-violet);
  margin-block-end: var(--space-xs);
}

.team-section__lead {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line-height);
  max-width: 68ch;
  margin-block-end: 0;
}

/* Podstawy budowania drużyny */
.team-section--basics {
  background-color: var(--color-bg-page);
}

.team-basics-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  max-width: var(--container-max-width);
  margin-inline: auto;
}

.team-basics-card {
  background-color: var(--color-bg-surface);
  border: var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  min-width: 0;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.team-basics-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.team-basics-card__icon {
  font-size: 2rem;
  line-height: 1;
  margin-block-end: var(--space-sm);
}

.team-basics-card h3 {
  margin-block-end: var(--space-sm);
}

.team-basics-card p {
  margin-block-end: 0;
}

/* Synergie */
.team-section--synergies {
  background-color: var(--color-turquoise-soft);
}

.team-synergies-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2xl);
  max-width: var(--container-max-width);
  margin-inline: auto;
}

.team-synergies-copy,
.team-synergies-combos {
  min-width: 0;
}

.team-synergies-copy h3,
.team-synergies-combos h3 {
  margin-block-end: var(--space-sm);
}

.team-synergies-copy p {
  }

.team-combo-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-sm);
}

.team-combo-item {
  background-color: var(--color-bg-surface);
  border: var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.team-combo-item__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-md);
  font-family: var(--font-heading);
  font-size: var(--text-body-size);
  font-weight: 700;
  color: var(--color-text-primary);
  text-align: left;
  min-height: 44px;
}

.team-combo-item__trigger:hover {
  background-color: var(--color-violet-soft);
}

.team-combo-item__indicator {
  flex-shrink: 0;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--color-electric-violet);
  transition: transform var(--transition-fast);
}

.team-combo-item__trigger[aria-expanded="true"] .team-combo-item__indicator {
  transform: rotate(45deg);
}

.team-combo-item__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-base);
}

.team-combo-item__panel p {
  padding: 0 var(--space-md) var(--space-md);
  margin: 0;
  }

/* Trenerzy */
.team-section--trainers {
  background-color: var(--color-bg-page);
}

.team-trainers-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  max-width: var(--container-max-width);
  margin-inline: auto;
}

.team-trainer-card {
  background-color: var(--color-bg-surface);
  border: var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  min-width: 0;
  border-top: 4px solid var(--color-electric-violet);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.team-trainer-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.team-trainer-card--offensive {
  border-top-color: var(--color-coral-red);
}

.team-trainer-card--defensive {
  border-top-color: var(--color-tropical-turquoise);
}

.team-trainer-card--support {
  border-top-color: var(--color-sunny-yellow);
}

.team-trainer-card__avatar {
  font-size: 2.5rem;
  line-height: 1;
  margin-block-end: var(--space-sm);
}

.team-trainer-card h3 {
  margin-block-end: var(--space-sm);
}

.team-trainer-card p {
  margin-block-end: 0;
}

/* Przedmioty i trinkety */
.team-section--items {
  background-color: var(--color-violet-soft);
}

.team-items-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--space-2xl);
  max-width: var(--container-max-width);
  margin-inline: auto;
}

.team-items-copy,
.team-items-table-wrap {
  min-width: 0;
}

.team-items-copy h3,
.team-items-table-wrap h3 {
  margin-block-end: var(--space-sm);
}

.team-items-copy p {
  }

.team-items-table {
  background-color: var(--color-bg-surface);
  border: var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.team-items-table__row {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border-light);
}

.team-items-table__row:last-child {
  border-bottom: none;
}

.team-items-table__row--header {
  background-color: var(--color-ink-navy);
  color: var(--color-text-on-dark);
  font-family: var(--font-heading);
  font-weight: 700;
}

.team-items-table__row--header span {
  color: var(--color-text-on-dark);
}

.team-items-table__row:nth-child(even):not(.team-items-table__row--header) {
  background-color: var(--color-mint-arena);
}

/* Przykładowe kompozycje */
.team-section--compositions {
  background-color: var(--color-bg-page);
}

.team-compositions-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  max-width: var(--container-max-width);
  margin-inline: auto;
  margin-block-end: var(--space-2xl);
}

.team-composition-card {
  background-color: var(--color-bg-surface);
  border: var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  min-width: 0;
  border-top: 4px solid var(--color-sunny-yellow);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.team-composition-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.team-composition-card--aggressive {
  border-top-color: var(--color-coral-red);
}

.team-composition-card--defensive {
  border-top-color: var(--color-tropical-turquoise);
}

.team-composition-card h3 {
  margin-block-end: var(--space-sm);
}

.team-composition-card p {
  }

.team-composition-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-sm);
  display: grid;
  gap: var(--space-xs);
}

.team-composition-list li {
  padding-inline-start: var(--space-md);
  position: relative;
}

.team-composition-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-electric-violet);
  font-weight: 700;
}

.team-composition-card__note {
  font-size: var(--text-body-sm-size);
  color: var(--color-text-primary);
  opacity: 0.85;
  margin-block-end: 0;
}

.team-compositions-figure {
  max-width: var(--container-max-width);
  margin-inline: auto;
  margin-block-end: 0;
}

.team-compositions-figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.team-compositions-figure figcaption {
  text-align: left;
}

/* Testowanie i optymalizacja */
.team-section--testing {
  background-color: var(--color-bg-page);
}

.team-testing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  max-width: var(--container-max-width);
  margin-inline: auto;
}

.team-testing-card {
  background-color: var(--color-bg-surface);
  border: var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  min-width: 0;
}

.team-testing-card__icon {
  font-size: 2rem;
  line-height: 1;
  margin-block-end: var(--space-sm);
}

.team-testing-card h3 {
  margin-block-end: var(--space-sm);
}

.team-testing-card p {
  margin-block-end: 0;
}

/* Typowe błędy */
.team-section--mistakes {
  background-color: #FDE8EA;
}

.team-mistakes-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  max-width: var(--container-max-width);
  margin-inline: auto;
}

.team-mistake-card {
  background-color: var(--color-bg-surface);
  border: var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  min-width: 0;
  border-left: 4px solid var(--color-coral-red);
}

.team-mistake-card__icon {
  font-size: 2rem;
  line-height: 1;
  margin-block-end: var(--space-sm);
}

.team-mistake-card h3 {
  margin-block-end: var(--space-sm);
}

.team-mistake-card p {
  margin-block-end: 0;
}

/* FAQ */
.team-section--faq {
  background-color: var(--color-bg-page);
}

.team-faq {
  max-width: 800px;
  margin-inline: auto;
  display: grid;
  gap: var(--space-sm);
}

.team-faq__item {
  background-color: var(--color-bg-surface);
  border: var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.team-faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-md);
  font-family: var(--font-heading);
  font-size: var(--text-body-size);
  font-weight: 700;
  color: var(--color-text-primary);
  text-align: left;
  min-height: 44px;
}

.team-faq__trigger:hover {
  background-color: var(--color-violet-soft);
}

.team-faq__indicator {
  flex-shrink: 0;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--color-electric-violet);
  transition: transform var(--transition-fast);
}

.team-faq__trigger[aria-expanded="true"] .team-faq__indicator {
  transform: rotate(45deg);
}

.team-faq__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-base);
}

.team-faq__panel p {
  padding: 0 var(--space-md) var(--space-md);
  margin: 0;
  }

/* CTA */
.team-cta {
  background-color: var(--color-ink-navy);
  padding: var(--space-4xl) var(--container-padding-mobile);
  text-align: center;
}

.team-cta__content {
  max-width: 600px;
  margin-inline: auto;
  display: grid;
  gap: var(--space-md);
  justify-items: center;
}

.team-cta h2 {
  color: var(--color-text-on-dark);
  margin-block-end: 0;
}

.team-cta p {
  color: var(--color-text-on-dark);
  margin-block-end: 0;
}

.team-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
}

.team-cta__btn-secondary {
  background-color: var(--color-tropical-turquoise);
  color: var(--color-ink-navy);
  border: 1px solid var(--color-tropical-turquoise);
}

.team-cta__btn-secondary:hover {
  background-color: #1FB8A9;
  border-color: #1FB8A9;
  color: var(--color-ink-navy);
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .team-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
    padding: var(--space-2xl) var(--container-padding-desktop);
  }

  .team-hero__media {
    order: -1;
  }

  .team-hero__media img {
    max-width: 480px;
    margin-inline: auto;
  }

  .team-basics-grid,
  .team-trainers-grid,
  .team-compositions-grid,
  .team-testing-grid,
  .team-mistakes-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .team-synergies-layout,
  .team-items-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .team-section {
    padding: var(--space-3xl) var(--container-padding-desktop);
  }
}

/* Mobile */
@media (max-width: 767px) {
  .team-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
    padding: var(--space-2xl) var(--container-padding-mobile);
  }

  .team-hero__media {
    order: -1;
  }

  .team-hero__media img {
    border-radius: var(--radius-lg);
  }

  .team-hero__lead {
    font-size: var(--text-body-size);
  }

  .team-section {
    padding: var(--space-3xl) var(--container-padding-mobile);
  }

  .team-section__lead {
    font-size: var(--text-body-size);
  }

  .team-basics-grid,
  .team-trainers-grid,
  .team-compositions-grid,
  .team-testing-grid,
  .team-mistakes-grid,
  .team-synergies-layout,
  .team-items-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .team-items-table__row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2xs);
  }

  .team-items-table__row--header {
    display: none;
  }

  .team-items-table__row span[data-label]::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    font-size: var(--text-caption-size);
    text-transform: uppercase;
    letter-spacing: var(--text-caption-letter-spacing);
    color: var(--color-electric-violet);
    margin-block-end: var(--space-2xs);
  }

  .team-cta__actions {
    flex-direction: column;
    width: 100%;
  }

  .team-cta__actions .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .team-combo-item__panel,
  .team-faq__panel {
    transition: none;
  }
}


/* ===== BatoForges Trenerzy Page Styles ===== */

/* ---------- Hero ---------- */
.trenerzy-hero {
  background-color: var(--color-bg-page);
  padding-block: var(--space-3xl) var(--space-2xl);
}

.trenerzy-hero__inner {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

.trenerzy-hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  min-width: 0;
}

.trenerzy-hero__kicker {
  font-size: var(--text-caption-size);
  font-weight: var(--text-caption-weight);
  letter-spacing: var(--text-caption-letter-spacing);
  text-transform: uppercase;
  color: var(--color-electric-violet);
  margin-block-end: 0;
}

.trenerzy-hero__content h1 {
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-line-height);
  font-weight: var(--text-h1-weight);
  color: var(--color-ink-navy);
  margin-block-end: 0;
  max-width: 18ch;
}

.trenerzy-hero__lead {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line-height);
  color: var(--color-ink-navy);
  max-width: 62ch;
  margin-block-end: 0;
}

.trenerzy-hero__facts {
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.trenerzy-hero__facts li {
  position: relative;
  padding-inline-start: var(--space-lg);
  color: var(--color-ink-navy);
  margin-block-end: 0;
}

.trenerzy-hero__facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-sunny-yellow);
}

.trenerzy-hero__media {
  min-width: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: var(--border-light);
  background-color: var(--color-bg-surface);
}

.trenerzy-hero__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-fast);
}

.trenerzy-hero__media:hover img {
  transform: scale(1.02);
}

/* ---------- Shared Section Shell ---------- */
.trenerzy-section {
  padding-block: var(--space-3xl);
}

.trenerzy-section--white {
  background-color: var(--color-bg-surface);
}

.trenerzy-section--mint {
  background-color: var(--color-bg-page);
}

.trenerzy-section--violet {
  background-color: var(--color-bg-surface-alt);
}

.trenerzy-section--turquoise {
  background-color: var(--color-bg-surface-accent);
}

.trenerzy-section__inner {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
}

.trenerzy-section__header {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  margin-block-end: var(--space-xl);
  flex-wrap: wrap;
}

.trenerzy-section__number {
  font-family: var(--font-heading);
  font-size: var(--text-h4-size);
  font-weight: 800;
  color: var(--color-electric-violet);
  margin-block-end: 0;
  flex-shrink: 0;
}

.trenerzy-section__header h2 {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-line-height);
  font-weight: var(--text-h2-weight);
  color: var(--color-ink-navy);
  margin-block-end: 0;
}

.trenerzy-section__body {
  min-width: 0;
}

.trenerzy-copy {
  max-width: 800px;
}

.trenerzy-copy h3 {
  margin-block-end: var(--space-md);
}

.trenerzy-copy p {
  margin-block-end: var(--space-md);
}

.trenerzy-copy ul,
.trenerzy-copy ol {
  margin-block-end: var(--space-lg);
  padding-inline-start: var(--space-lg);
}

.trenerzy-copy li {
  margin-block-end: var(--space-xs);
}

.trenerzy-copy li:last-child {
  margin-block-end: 0;
}

/* ---------- Archetypes Grid ---------- */
.trenerzy-archetypes-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.trenerzy-archetype-card {
  background-color: var(--color-bg-surface);
  border: var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-width: 0;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.trenerzy-archetype-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.trenerzy-archetype-card__bar {
  height: 4px;
  border-radius: var(--radius-sm);
  margin-block-end: var(--space-xs);
}

.trenerzy-archetype-card--insect .trenerzy-archetype-card__bar {
  background-color: var(--color-tropical-turquoise);
}

.trenerzy-archetype-card--dragon .trenerzy-archetype-card__bar {
  background-color: var(--color-electric-violet);
}

.trenerzy-archetype-card--chef .trenerzy-archetype-card__bar {
  background-color: var(--color-coral-red);
}

.trenerzy-archetype-card h3 {
  margin-block-end: 0;
}

.trenerzy-archetype-card p {
  margin-block-end: 0;
}

.trenerzy-archetype-card ul {
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.trenerzy-archetype-card li {
  position: relative;
  padding-inline-start: var(--space-md);
  margin-block-end: 0;
}

.trenerzy-archetype-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-electric-violet);
  opacity: 0.5;
}

/* ---------- Profiles Grid ---------- */
.trenerzy-profiles-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.trenerzy-profile-card {
  background-color: var(--color-bg-surface);
  border: var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.trenerzy-profile-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.trenerzy-profile-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.trenerzy-profile-card__body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.trenerzy-profile-card__body h3 {
  margin-block-end: 0;
}

.trenerzy-profile-card__body p {
  margin-block-end: 0;
}

.trenerzy-profile-card__body ul {
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.trenerzy-profile-card__body li {
  position: relative;
  padding-inline-start: var(--space-md);
  margin-block-end: 0;
}

.trenerzy-profile-card__body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-tropical-turquoise);
}

/* ---------- Synergy Table ---------- */
.trenerzy-synergy-table-wrapper {
  overflow-x: auto;
  margin-block-end: var(--space-lg);
  border: var(--border-light);
  border-radius: var(--radius-lg);
}

.trenerzy-synergy-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}

.trenerzy-synergy-table th,
.trenerzy-synergy-table td {
  padding: var(--space-md);
  text-align: left;
  border-block-end: var(--border-light);
}

.trenerzy-synergy-table th {
  font-family: var(--font-heading);
  font-size: var(--text-body-sm-size);
  font-weight: 700;
  color: var(--color-ink-navy);
  background-color: var(--color-bg-surface-alt);
}

.trenerzy-synergy-table tbody tr:nth-child(odd) {
  background-color: var(--color-bg-page);
}

.trenerzy-synergy-table tbody tr:nth-child(even) {
  background-color: var(--color-bg-surface);
}

.trenerzy-synergy-table tbody tr:hover {
  background-color: var(--color-violet-soft);
}

/* ---------- Mistakes ---------- */
.trenerzy-mistakes ul {
  list-style: none;
  padding-inline-start: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.trenerzy-mistakes li {
  position: relative;
  padding-inline-start: var(--space-xl);
  margin-block-end: 0;
}

.trenerzy-mistakes li::before {
  content: "!";
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--color-coral-red);
  color: var(--color-white-mint);
  font-weight: 700;
  font-size: 0.75rem;
}

/* ---------- FAQ ---------- */
.trenerzy-faq {
  max-width: 800px;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.trenerzy-faq__item {
  background-color: var(--color-bg-surface);
  border: var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.trenerzy-faq__item h3 {
  margin-block-end: 0;
}

.trenerzy-faq__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg);
  font-family: var(--font-heading);
  font-size: var(--text-h4-size);
  font-weight: 700;
  line-height: var(--text-h4-line-height);
  color: var(--color-ink-navy);
  text-align: left;
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.trenerzy-faq__trigger:hover {
  background-color: var(--color-violet-soft);
}

.trenerzy-faq__trigger:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: -2px;
}

.trenerzy-faq__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
}

.trenerzy-faq__icon::before,
.trenerzy-faq__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  background-color: var(--color-electric-violet);
  transform: translate(-50%, -50%);
  transition: transform var(--transition-fast);
}

.trenerzy-faq__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.trenerzy-faq__trigger[aria-expanded="true"] .trenerzy-faq__icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.trenerzy-faq__panel {
  padding-inline: var(--space-lg);
  padding-block-end: var(--space-lg);
}

.trenerzy-faq__panel p {
  margin-block-end: var(--space-md);
}

.trenerzy-faq__panel ul {
  margin-block-end: 0;
  padding-inline-start: var(--space-lg);
}

.trenerzy-faq__panel li {
  margin-block-end: var(--space-xs);
}

.trenerzy-faq__panel li:last-child {
  margin-block-end: 0;
}

/* ---------- Editorial ---------- */
.trenerzy-editorial blockquote {
  margin-block-end: var(--space-lg);
  padding-inline-start: var(--space-md);
  border-inline-start: 3px solid var(--color-sunny-yellow);
  font-style: italic;
}

.trenerzy-editorial blockquote p {
  margin-block-end: 0;
}

.trenerzy-editorial__note {
  font-size: var(--text-body-sm-size);
  color: var(--color-ink-navy);
  opacity: 0.7;
  margin-block-end: 0;
}

/* ---------- Related ---------- */
.trenerzy-related-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.trenerzy-related-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  background-color: var(--color-bg-surface);
  border: var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  color: var(--color-ink-navy);
  text-decoration: none;
  min-width: 0;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.trenerzy-related-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: var(--color-electric-violet);
  color: var(--color-ink-navy);
}

.trenerzy-related-card h3 {
  margin-block-end: 0;
  font-size: var(--text-h3-size);
}

.trenerzy-related-card p {
  margin-block-end: 0;
}

/* ---------- CTA ---------- */
.trenerzy-cta {
  background-color: var(--color-bg-dark);
  padding-block: var(--space-4xl);
}

.trenerzy-cta__inner {
  max-width: 600px;
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  text-align: center;
}

.trenerzy-cta__inner h2 {
  color: var(--color-text-on-dark);
  margin-block-end: 0;
}

.trenerzy-cta__inner p {
  color: var(--color-text-on-dark);
  margin-block-end: 0;
}

.trenerzy-cta__inner ul {
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.trenerzy-cta__inner li {
  color: var(--color-text-on-dark);
  margin-block-end: 0;
}

.trenerzy-cta__inner .btn {
  margin-block-start: var(--space-sm);
}

/* ---------- Tablet ---------- */
@media (min-width: 640px) {
  .trenerzy-hero__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }

  .trenerzy-hero__content {
    gap: var(--space-lg);
  }

  .trenerzy-archetypes-grid,
  .trenerzy-profiles-grid,
  .trenerzy-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- Desktop ---------- */
@media (min-width: 960px) {
  .trenerzy-hero__inner {
    grid-template-columns: 60% 40%;
    gap: var(--space-2xl);
  }

  .trenerzy-archetypes-grid,
  .trenerzy-profiles-grid,
  .trenerzy-related-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .trenerzy-section {
    padding-block: var(--space-4xl);
  }

  .trenerzy-cta {
    padding-block: var(--space-5xl);
  }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .trenerzy-hero__media img,
  .trenerzy-archetype-card,
  .trenerzy-profile-card,
  .trenerzy-related-card,
  .trenerzy-faq__trigger,
  .trenerzy-faq__icon::before,
  .trenerzy-faq__icon::after {
    transition: none;
  }
}


/* ===== System Walki Page Styles ===== */

.system-walki-page {
  --sw-text-measure: 68ch;
  --sw-text-measure-wide: 72ch;
}

/* Section base */
.sw-section {
  padding-block: var(--space-3xl);
}

.sw-section--mint {
  background-color: var(--color-mint-arena);
}

.sw-section--white {
  background-color: var(--color-white-mint);
}

.sw-section--violet {
  background-color: var(--color-violet-soft);
}

.sw-section--turquoise {
  background-color: var(--color-turquoise-soft);
}

.sw-section--navy {
  background-color: var(--color-bg-dark);
  color: var(--color-text-on-dark);
}

.sw-section__inner {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
}

.sw-section__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-block-end: var(--space-lg);
}

.sw-section__number {
  font-size: var(--text-caption-size);
  font-weight: var(--text-caption-weight);
  letter-spacing: var(--text-caption-letter-spacing);
  text-transform: uppercase;
  color: var(--color-electric-violet);
}

.sw-section__title {
  color: var(--color-text-primary);
  margin-block-end: 0;
}

.sw-section__heading--on-dark .sw-section__number--on-dark {
  color: var(--color-tropical-turquoise);
}

.sw-section__title--on-dark {
  color: var(--color-text-on-dark);
}

/* Hero */
.sw-hero {
  background-color: var(--color-mint-arena);
  padding-block: var(--space-3xl);
}

.sw-hero__inner {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.sw-hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: var(--sw-text-measure);
}

.sw-hero__eyebrow {
  font-size: var(--text-caption-size);
  font-weight: var(--text-caption-weight);
  letter-spacing: var(--text-caption-letter-spacing);
  text-transform: uppercase;
  color: var(--color-electric-violet);
  margin-block-end: 0;
}

.sw-hero__title {
  margin-block-end: 0;
}

.sw-hero__lead {
  margin-block-end: 0;
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line-height);
}

.sw-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-block-start: var(--space-xs);
}

.sw-hero__media {
  width: 100%;
  min-width: 0;
}

.sw-hero__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: var(--border-light);
}

/* Auto battler */
.sw-auto-battler__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.sw-auto-battler__main {
  min-width: 0;
}

.sw-auto-battler__main h3 {
  margin-block-start: var(--space-lg);
}

.sw-auto-battler__main h3:first-child {
  margin-block-start: 0;
}

.sw-auto-battler__main p {
  }

.sw-auto-battler__aside {
  min-width: 0;
}

.sw-tip {
  background-color: var(--color-turquoise-soft);
  border-inline-start: 4px solid var(--color-tropical-turquoise);
  border-radius: var(--radius-sm);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.sw-tip__label {
  font-size: var(--text-caption-size);
  font-weight: var(--text-caption-weight);
  letter-spacing: var(--text-caption-letter-spacing);
  text-transform: uppercase;
  color: var(--color-tropical-turquoise);
  margin-block-end: 0;
}

.sw-tip p:last-child {
  margin-block-end: 0;
}

/* Fazy bitwy */
.sw-fazy__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: start;
}

.sw-fazy__text {
  min-width: 0;
}

.sw-fazy__text h3 {
  color: var(--color-text-on-dark);
  margin-block-start: var(--space-lg);
}

.sw-fazy__text h3:first-child {
  margin-block-start: 0;
}

.sw-fazy__text p {
  color: var(--color-text-on-dark);
  }

.sw-fazy__media {
  width: 100%;
  min-width: 0;
}

.sw-fazy__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: var(--border-dark);
}

/* Inicjatywa */
.sw-inicjatywa__content {
  min-width: 0;
}

.sw-inicjatywa__content h3 {
  margin-block-start: var(--space-lg);
}

.sw-inicjatywa__content h3:first-child {
  margin-block-start: 0;
}

.sw-inicjatywa__content p {
  }

.sw-table-wrap {
  width: 100%;
  overflow-x: auto;
  margin-block-start: var(--space-md);
  margin-block-end: var(--space-lg);
}

.sw-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 480px;
}

.sw-table th,
.sw-table td {
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  border-block-end: var(--border-light);
}

.sw-table th {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-text-primary);
  background-color: var(--color-mint-arena);
}

.sw-table tbody tr:nth-child(even) {
  background-color: var(--color-mint-arena);
}

.sw-table tbody tr:nth-child(odd) {
  background-color: var(--color-white-mint);
}

/* Energia */
.sw-energia__content {
  min-width: 0;
}

.sw-energia__content h3 {
  margin-block-start: var(--space-lg);
}

.sw-energia__content h3:first-child {
  margin-block-start: 0;
}

.sw-energia__content p {
  }

.sw-energia__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-block-start: var(--space-lg);
}

.sw-ability-card {
  background-color: var(--color-white-mint);
  border: var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-width: 0;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.sw-ability-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.sw-ability-card__bar {
  height: 4px;
  width: 100%;
  background-color: var(--color-electric-violet);
  border-radius: var(--radius-sm);
  margin-block-end: var(--space-xs);
}

.sw-ability-card__bar--turquoise {
  background-color: var(--color-tropical-turquoise);
}

.sw-ability-card h4 {
  margin-block-end: 0;
}

.sw-ability-card p {
  margin-block-end: 0;
  }

/* Efekty statusowe */
.sw-efekty__content {
  min-width: 0;
}

.sw-efekty__content h3 {
  margin-block-start: var(--space-lg);
}

.sw-efekty__content h3:first-child {
  margin-block-start: 0;
}

.sw-efekty__content p {
  }

.sw-efekty__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-block-start: var(--space-lg);
  margin-block-end: var(--space-lg);
}

.sw-effect-item {
  background-color: var(--color-white-mint);
  border: var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
}

.sw-effect-item__tag {
  align-self: flex-start;
  font-size: var(--text-caption-size);
  font-weight: var(--text-caption-weight);
  letter-spacing: var(--text-caption-letter-spacing);
  text-transform: uppercase;
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-sm);
  background-color: var(--color-turquoise-soft);
  color: var(--color-text-primary);
}

.sw-effect-item--negative .sw-effect-item__tag {
  background-color: #FDE7E9;
  color: #B02A37;
}

.sw-effect-item h4 {
  margin-block-end: 0;
}

.sw-effect-item p {
  margin-block-end: 0;
  }

/* Pozycjonowanie */
.sw-pozycjonowanie__content {
  min-width: 0;
}

.sw-pozycjonowanie__content h3 {
  margin-block-start: var(--space-lg);
}

.sw-pozycjonowanie__content h3:first-child {
  margin-block-start: 0;
}

.sw-pozycjonowanie__content p {
  }

/* Synergie */
.sw-synergie__content {
  min-width: 0;
}

.sw-synergie__content h3 {
  margin-block-start: var(--space-lg);
}

.sw-synergie__content h3:first-child {
  margin-block-start: 0;
}

.sw-synergie__content p {
  }

.sw-synergie__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-block-start: var(--space-lg);
  margin-block-end: var(--space-lg);
}

.sw-synergy-card {
  background-color: var(--color-white-mint);
  border: var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-width: 0;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.sw-synergy-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.sw-synergy-card__bar {
  height: 4px;
  width: 100%;
  background-color: var(--color-electric-violet);
  border-radius: var(--radius-sm);
  margin-block-end: var(--space-xs);
}

.sw-synergy-card__bar--coral {
  background-color: var(--color-coral-red);
}

.sw-synergy-card__bar--violet {
  background-color: var(--color-electric-violet);
}

.sw-synergy-card h4 {
  margin-block-end: 0;
}

.sw-synergy-card p {
  margin-block-end: 0;
  }

.sw-synergie__content .btn {
  margin-block-start: var(--space-md);
}

/* Przedmioty */
.sw-przedmioty__content {
  min-width: 0;
}

.sw-przedmioty__content h3 {
  margin-block-start: var(--space-lg);
}

.sw-przedmioty__content h3:first-child {
  margin-block-start: 0;
}

.sw-przedmioty__content p {
  }

.sw-przedmioty__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-block-start: var(--space-lg);
  margin-block-end: var(--space-lg);
}

.sw-item-card {
  background-color: var(--color-white-mint);
  border: var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-width: 0;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.sw-item-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.sw-item-card__bar {
  height: 4px;
  width: 100%;
  background-color: var(--color-electric-violet);
  border-radius: var(--radius-sm);
  margin-block-end: var(--space-xs);
}

.sw-item-card__bar--coral {
  background-color: var(--color-coral-red);
}

.sw-item-card__bar--turquoise {
  background-color: var(--color-tropical-turquoise);
}

.sw-item-card h4 {
  margin-block-end: 0;
}

.sw-item-card p {
  margin-block-end: 0;
  }

.sw-przedmioty__content .btn {
  margin-block-start: var(--space-md);
}

/* Analiza */
.sw-analiza__content {
  min-width: 0;
}

.sw-analiza__content h3 {
  margin-block-start: var(--space-lg);
}

.sw-analiza__content h3:first-child {
  margin-block-start: 0;
}

.sw-analiza__content p {
  }

/* Porady */
.sw-porady__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.sw-porady__tips,
.sw-porady__mistakes {
  min-width: 0;
}

.sw-porady__tips h3,
.sw-porady__mistakes h3 {
  margin-block-end: var(--space-md);
}

.sw-porady__list {
  margin-block-end: var(--space-md);
  padding-inline-start: var(--space-lg);
}

.sw-porady__list li {
  margin-block-end: var(--space-xs);
}

.sw-porady__list--warning li::marker {
  color: var(--color-coral-red);
}

.sw-porady__tips p,
.sw-porady__mistakes p {
  }

/* CTA */
.sw-cta {
  text-align: center;
}

.sw-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.sw-cta__title {
  margin-block-end: 0;
}

.sw-cta__text {
  max-width: var(--sw-text-measure);
  margin-inline: auto;
  margin-block-end: 0;
}

.sw-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
}

/* Tablet and desktop */
@media (min-width: 768px) {
  .sw-section__inner,
  .sw-hero__inner {
    padding-inline: var(--container-padding-desktop);
  }

  .sw-hero__inner {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-2xl);
  }

  .sw-auto-battler__layout {
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    gap: var(--space-2xl);
    align-items: start;
  }

  .sw-fazy__layout {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-2xl);
  }

  .sw-energia__cards,
  .sw-synergie__cards,
  .sw-przedmioty__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sw-efekty__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sw-porady__layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2xl);
  }
}

@media (min-width: 1024px) {
  .sw-hero__copy {
    max-width: var(--sw-text-measure);
  }

  .sw-hero__media img {
    aspect-ratio: 16 / 9;
  }

  .sw-fazy__media img {
    aspect-ratio: 16 / 9;
  }
}

/* Mobile table cards */
@media (max-width: 767px) {
  .sw-table-wrap {
    overflow-x: visible;
  }

  .sw-table {
    min-width: 0;
    display: block;
  }

  .sw-table thead {
    display: none;
  }

  .sw-table tbody,
  .sw-table tr,
  .sw-table td {
    display: block;
    width: 100%;
  }

  .sw-table tr {
    margin-block-end: var(--space-md);
    border: var(--border-light);
    border-radius: var(--radius-lg);
    background-color: var(--color-white-mint);
    padding: var(--space-sm);
  }

  .sw-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-xs) var(--space-sm);
    border-block-end: none;
  }

  .sw-table td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--color-electric-violet);
    flex-shrink: 0;
  }

  .sw-table tbody tr:nth-child(even),
  .sw-table tbody tr:nth-child(odd) {
    background-color: var(--color-white-mint);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sw-ability-card,
  .sw-synergy-card,
  .sw-item-card {
    transition: none;
  }

  .sw-ability-card:hover,
  .sw-synergy-card:hover,
  .sw-item-card:hover {
    transform: none;
    box-shadow: none;
  }
}


/* ===== Page-owned styles for recenzja-batomon-showdown ===== */

#recenzja-batomon-showdown {
  --page-section-gap: var(--space-3xl);
  --page-card-gap: var(--space-lg);
  --page-border-radius: var(--radius-lg);
  --page-border-light: var(--border-light);
  --page-shadow-hover: var(--shadow-hover);
  --page-transition-fast: var(--transition-fast);
}

#recenzja-batomon-showdown section {
  padding-block: var(--page-section-gap);
}

#recenzja-batomon-showdown .section-title {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  margin-block-end: var(--space-lg);
}

#recenzja-batomon-showdown .section-title__number {
  font-family: var(--font-heading);
  font-size: var(--text-caption-size);
  font-weight: 700;
  letter-spacing: var(--text-caption-letter-spacing);
  color: var(--color-electric-violet);
  text-transform: uppercase;
}

/* ---------- Hero recenzji ---------- */
.hero-recenzji {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: center;
  background-color: var(--color-mint-arena);
  padding-block: var(--space-4xl) var(--space-3xl);
}

.hero-recenzji__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  min-width: 0;
}

.hero-recenzji__kicker {
  align-self: flex-start;
}

.hero-recenzji__title {
  margin-block-end: 0;
  max-width: 20ch;
}

.hero-recenzji__lead {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line-height);
  max-width: 60ch;
  margin-block-end: 0;
}

.hero-recenzji__rating {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.hero-recenzji__stars {
  color: var(--color-sunny-yellow);
  font-size: 1.5rem;
  letter-spacing: 0.1em;
}

.hero-recenzji__score {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--text-h3-size);
  color: var(--color-ink-navy);
}

.hero-recenzji__summary {
  font-size: var(--text-body-sm-size);
  color: var(--color-ink-navy);
  opacity: 0.85;
  max-width: 55ch;
  margin-block-end: 0;
}

.hero-recenzji__media {
  margin-block-end: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(38, 52, 81, 0.12);
  transition: transform var(--page-transition-fast);
}

.hero-recenzji__media:hover {
  transform: scale(1.02);
}

.hero-recenzji__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.hero-recenzji__media figcaption {
  padding: var(--space-xs) var(--space-sm);
  background-color: var(--color-white-mint);
  color: var(--color-ink-navy);
  opacity: 0.7;
}

@media (min-width: 768px) {
  .hero-recenzji {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-2xl);
  }

  .hero-recenzji__media img {
    aspect-ratio: 16 / 9;
  }
}

@media (min-width: 1024px) {
  .hero-recenzji {
    gap: var(--space-3xl);
  }
}

/* ---------- Czym jest Batomon Showdown? ---------- */
.czym-jest {
  background-color: var(--color-white-mint);
}

.czym-jest__inner {
  max-width: 800px;
  border-inline-start: 4px solid var(--color-tropical-turquoise);
  padding-inline-start: var(--space-lg);
}

.czym-jest__lead {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line-height);
  max-width: 70ch;
}

.czym-jest__list {
  list-style: none;
  padding-inline-start: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-block-end: 0;
}

.czym-jest__list li {
  margin-block-end: 0;
  padding-inline-start: var(--space-lg);
  position: relative;
}

.czym-jest__list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-tropical-turquoise);
  font-weight: 700;
}

@media (max-width: 767px) {
  .czym-jest__inner {
    border-inline-start: none;
    padding-inline-start: 0;
  }
}

/* ---------- Batonomy — serce kolekcji ---------- */
.batonomy {
  background-color: var(--color-violet-soft);
}

.batonomy__inner {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
}

.batonomy__lead {
  max-width: 70ch;
  margin-block-end: var(--space-xl);
}

.batonomy__cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--page-card-gap);
}

.batonomy-card {
  background-color: var(--color-white-mint);
  border: var(--page-border-light);
  border-radius: var(--page-border-radius);
  padding: var(--space-lg);
  border-top: 4px solid var(--color-electric-violet);
  transition: transform var(--page-transition-fast), box-shadow var(--page-transition-fast);
  min-width: 0;
}

.batonomy-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--page-shadow-hover);
}

.batonomy-card--fire {
  border-top-color: #F16D74;
}

.batonomy-card--water {
  border-top-color: #28C6B7;
}

.batonomy-card--electric {
  border-top-color: #FFD45C;
}

.batonomy-card h3 {
  margin-block-end: var(--space-sm);
}

.batonomy-card p {
  margin-block-end: 0;
  }

@media (min-width: 768px) {
  .batonomy__inner {
    padding-inline: var(--container-padding-desktop);
  }

  .batonomy__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------- Trenerzy — twoi strategiczni partnerzy ---------- */
.trenerzy {
  background-color: var(--color-white-mint);
}

.trenerzy__inner {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
}

.trenerzy__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
}

.trenerzy__opis {
  min-width: 0;
}

.trenerzy__opis p {
  }

.trenerzy__lista {
  display: flex;
  flex-direction: column;
  gap: var(--page-card-gap);
  min-width: 0;
}

.trener-card {
  background-color: var(--color-white-mint);
  border: var(--page-border-light);
  border-radius: var(--page-border-radius);
  padding: var(--space-md);
  border-inline-start: 4px solid var(--color-electric-violet);
  min-width: 0;
}

.trener-card h3 {
  margin-block-end: var(--space-xs);
}

.trener-card p {
  margin-block-end: 0;
  font-size: var(--text-body-sm-size);
}

@media (min-width: 768px) {
  .trenerzy__inner {
    padding-inline: var(--container-padding-desktop);
  }

  .trenerzy__layout {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-2xl);
  }
}

/* ---------- Budowanie drużyny — klucz do zwycięstwa ---------- */
.budowanie-druzyny {
  background-color: var(--color-turquoise-soft);
}

.budowanie-druzyny__inner {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
}

.budowanie-druzyny__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
}

.budowanie-druzyny__opis {
  min-width: 0;
}

.budowanie-druzyny__opis p {
  }

.budowanie-druzyny__list {
  list-style: none;
  padding-inline-start: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-block-end: 0;
}

.budowanie-druzyny__list li {
  margin-block-end: 0;
  padding-inline-start: var(--space-lg);
  position: relative;
}

.budowanie-druzyny__list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-tropical-turquoise);
  font-weight: 700;
}

.budowanie-druzyny__kompozycje {
  display: flex;
  flex-direction: column;
  gap: var(--page-card-gap);
  min-width: 0;
}

.kompozycja-card {
  background-color: var(--color-white-mint);
  border: var(--page-border-light);
  border-radius: var(--page-border-radius);
  padding: var(--space-lg);
  border-top: 4px solid var(--color-electric-violet);
  transition: transform var(--page-transition-fast), box-shadow var(--page-transition-fast);
  min-width: 0;
}

.kompozycja-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--page-shadow-hover);
}

.kompozycja-card h3 {
  margin-block-end: var(--space-sm);
}

.kompozycja-card p {
  margin-block-end: 0;
  }

.budowanie-druzyny__note {
  font-size: var(--text-body-sm-size);
  color: var(--color-ink-navy);
  opacity: 0.75;
  margin-block-end: 0;
}

@media (min-width: 768px) {
  .budowanie-druzyny__inner {
    padding-inline: var(--container-padding-desktop);
  }

  .budowanie-druzyny__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-2xl);
  }
}

/* ---------- System walki — taktyka w czasie rzeczywistym ---------- */
.system-walki {
  background-color: var(--color-white-mint);
}

.system-walki__inner {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
}

.system-walki__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
}

.system-walki__opis {
  min-width: 0;
}

.system-walki__opis p {
  }

.system-walki__fazy {
  display: flex;
  flex-direction: column;
  gap: var(--page-card-gap);
  min-width: 0;
}

.faza-card {
  background-color: var(--color-white-mint);
  border: var(--page-border-light);
  border-radius: var(--page-border-radius);
  padding: var(--space-md);
  border-inline-start: 4px solid var(--color-tropical-turquoise);
  min-width: 0;
}

.faza-card h3 {
  margin-block-end: var(--space-xs);
}

.faza-card p {
  margin-block-end: 0;
  font-size: var(--text-body-sm-size);
}

@media (min-width: 768px) {
  .system-walki__inner {
    padding-inline: var(--container-padding-desktop);
  }

  .system-walki__layout {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-2xl);
  }
}

/* ---------- Multiplayer — rywalizacja bez presji ---------- */
.multiplayer {
  background-color: var(--color-violet-soft);
}

.multiplayer__inner {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
}

.multiplayer__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
}

.multiplayer__tryby,
.multiplayer__ranking {
  min-width: 0;
}

.multiplayer__tryby p,
.multiplayer__ranking p {
  }

.multiplayer__list {
  list-style: none;
  padding-inline-start: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-block-end: 0;
}

.multiplayer__list li {
  margin-block-end: 0;
  padding-inline-start: var(--space-lg);
  position: relative;
}

.multiplayer__list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-electric-violet);
  font-weight: 700;
}

@media (min-width: 768px) {
  .multiplayer__inner {
    padding-inline: var(--container-padding-desktop);
  }

  .multiplayer__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-2xl);
  }
}

/* ---------- Grafika i oprawa audiowizualna ---------- */
.grafika {
  background-color: var(--color-white-mint);
}

.grafika__inner {
  max-width: 800px;
  border-inline-start: 4px solid var(--color-sunny-yellow);
  padding-inline-start: var(--space-lg);
}

.grafika__lead {
  max-width: 70ch;
}

.grafika p {
  }

@media (max-width: 767px) {
  .grafika__inner {
    border-inline-start: none;
    padding-inline-start: 0;
  }
}

/* ---------- Mocne i słabe strony ---------- */
.mocne-slabe {
  background-color: var(--color-mint-arena);
}

.mocne-slabe__inner {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
}

.mocne-slabe__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xl);
}

.mocne-slabe__kolumna {
  min-width: 0;
}

.mocne-slabe__kolumna h3 {
  margin-block-end: var(--space-md);
}

.mocne-slabe__list {
  list-style: none;
  padding-inline-start: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-block-end: 0;
}

.mocne-slabe__list li {
  margin-block-end: 0;
  padding-inline-start: var(--space-lg);
  position: relative;
  max-width: 60ch;
}

.mocne-slabe__list--plus li::before {
  content: "+";
  position: absolute;
  left: 0;
  color: var(--color-tropical-turquoise);
  font-weight: 700;
}

.mocne-slabe__list--minus li::before {
  content: "-";
  position: absolute;
  left: 0;
  color: var(--color-coral-red);
  font-weight: 700;
}

@media (min-width: 768px) {
  .mocne-slabe__inner {
    padding-inline: var(--container-padding-desktop);
  }

  .mocne-slabe__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-2xl);
  }
}

/* ---------- Podsumowanie i rekomendacje ---------- */
.podsumowanie {
  background-color: var(--color-ink-navy);
  color: var(--color-mint-arena);
}

.podsumowanie__inner {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
}

.podsumowanie__title {
  color: var(--color-mint-arena);
}

.podsumowanie__title .section-title__number {
  color: var(--color-sunny-yellow);
}

.podsumowanie__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
}

.podsumowanie__ocena,
.podsumowanie__rekomendacje {
  min-width: 0;
}

.podsumowanie__ocena p,
.podsumowanie__rekomendacje p {
  color: var(--color-mint-arena);
  }

.podsumowanie__ocena-wyrozniona {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--text-h3-size);
  color: var(--color-sunny-yellow);
}

.podsumowanie__list {
  list-style: none;
  padding-inline-start: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-block-end: 0;
}

.podsumowanie__list li {
  margin-block-end: 0;
  padding-inline-start: var(--space-lg);
  position: relative;
  color: var(--color-mint-arena);
}

.podsumowanie__list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-sunny-yellow);
  font-weight: 700;
}

@media (min-width: 768px) {
  .podsumowanie__inner {
    padding-inline: var(--container-padding-desktop);
  }

  .podsumowanie__layout {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-2xl);
  }
}

/* ---------- Dodatkowe zasoby i porady dla początkujących ---------- */
.zasoby {
  background-color: var(--color-white-mint);
}

.zasoby__inner {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
}

.zasoby__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
}

.zasoby__porady,
.zasoby__linki {
  min-width: 0;
}

.zasoby__porady h3,
.zasoby__linki h3 {
  margin-block-end: var(--space-md);
}

.zasoby__list,
.zasoby__linki-list {
  list-style: none;
  padding-inline-start: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-block-end: 0;
}

.zasoby__list li,
.zasoby__linki-list li {
  margin-block-end: 0;
  padding-inline-start: var(--space-lg);
  position: relative;
  max-width: 70ch;
}

.zasoby__list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-electric-violet);
  font-weight: 700;
}

.zasoby__linki-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--color-electric-violet);
  font-weight: 700;
}

.zasoby__linki-list a {
  color: var(--color-electric-violet);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--page-transition-fast);
}

.zasoby__linki-list a:hover {
  color: var(--color-ink-navy);
}

@media (min-width: 768px) {
  .zasoby__inner {
    padding-inline: var(--container-padding-desktop);
  }

  .zasoby__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-2xl);
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  #recenzja-batomon-showdown .hero-recenzji__media,
  #recenzja-batomon-showdown .batonomy-card,
  #recenzja-batomon-showdown .kompozycja-card {
    transition: none;
  }

  #recenzja-batomon-showdown .hero-recenzji__media:hover {
    transform: none;
  }

  #recenzja-batomon-showdown .batonomy-card:hover,
  #recenzja-batomon-showdown .kompozycja-card:hover {
    transform: none;
    box-shadow: none;
  }
}


/* ===== BatoForges Home Page Styles ===== */

/* ---------- Section Shared ---------- */
#home-main {
  overflow-x: hidden;
}

.home-section__number {
  font-family: var(--font-heading);
  font-size: var(--text-caption-size);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-electric-violet);
  margin-block-end: var(--space-xs);
}

.home-section__lead {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line-height);
  font-weight: 400;
  max-width: 600px;
  margin-block-end: var(--space-xl);
}

/* ---------- Hero ---------- */
.home-hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-ink-navy);
  overflow: hidden;
  padding: var(--space-4xl) var(--container-padding-mobile);
}

.home-hero__background {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.home-hero__background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.home-hero__background::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(38, 52, 81, 0.75) 0%, rgba(38, 52, 81, 0.88) 60%, rgba(38, 52, 81, 0.95) 100%);
}

.home-hero__particles {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.home-hero__particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  opacity: 0.8;
  animation: homeParticleFloat 4s ease-in-out infinite;
}

.home-hero__particle--violet {
  background-color: var(--color-electric-violet);
  top: 20%;
  left: 15%;
  box-shadow: 0 0 12px var(--color-electric-violet);
}

.home-hero__particle--turquoise {
  background-color: var(--color-tropical-turquoise);
  top: 65%;
  left: 25%;
  box-shadow: 0 0 12px var(--color-tropical-turquoise);
  animation-delay: 1s;
}

.home-hero__particle--coral {
  background-color: var(--color-coral-red);
  top: 35%;
  right: 20%;
  box-shadow: 0 0 12px var(--color-coral-red);
  animation-delay: 2s;
}

.home-hero__particle--yellow {
  background-color: var(--color-sunny-yellow);
  top: 75%;
  right: 12%;
  box-shadow: 0 0 12px var(--color-sunny-yellow);
  animation-delay: 3s;
}

@keyframes homeParticleFloat {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-20px);
    opacity: 1;
  }
}

.home-hero__content {
  position: relative;
  z-index: 3;
  max-width: 600px;
  margin-inline: auto;
  text-align: center;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.home-hero__eyebrow {
  font-family: var(--font-heading);
  font-size: var(--text-caption-size);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-sunny-yellow);
  margin-block-end: 0;
}

.home-hero h1 {
  color: var(--color-mint-arena);
  margin-block-end: 0;
  font-size: var(--text-h1-size);
}

.home-hero__lead {
  color: var(--color-white-mint);
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line-height);
  margin-block-end: 0;
}

.home-hero__facts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
}

.home-hero__facts li {
  margin: 0;
  color: var(--color-mint-arena);
  font-size: var(--text-body-sm-size);
  background-color: rgba(233, 255, 244, 0.12);
  border: 1px solid rgba(233, 255, 244, 0.2);
  border-radius: var(--radius-sm);
  padding: var(--space-2xs) var(--space-sm);
}

.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
  margin-block-start: var(--space-xs);
}

.home-hero__secondary {
  color: var(--color-mint-arena);
  border-color: var(--color-mint-arena);
}

.home-hero__secondary:hover {
  background-color: rgba(233, 255, 244, 0.12);
  color: var(--color-mint-arena);
}

/* ---------- Intro ---------- */
.home-intro {
  background-color: var(--color-mint-arena);
  padding-block: var(--space-4xl);
}

.home-intro__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.home-intro__header {
  width: 100%;
}

.home-intro__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
}

.home-intro__column {
  min-width: 0;
}

.home-intro__column--card {
  background-color: var(--color-bg-surface);
  border: var(--border-light);
  border-inline-start: 4px solid var(--color-tropical-turquoise);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.home-intro__column h3 {
  margin-block-end: var(--space-md);
}

.home-intro__column p {
  margin-block-end: var(--space-md);
}

.home-intro__column ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.home-intro__column li {
  margin: 0;
}

/* ---------- Collection ---------- */
.home-collection {
  background-color: var(--color-white-mint);
  padding-block: var(--space-4xl);
}

.home-collection__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.home-collection__header {
  width: 100%;
}

.home-collection__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}

.home-batomon-card {
  min-width: 0;
  background-color: var(--color-bg-surface);
  border: var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.home-batomon-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.home-batomon-card__media {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--color-mint-arena);
}

.home-batomon-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-batomon-card__body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.home-batomon-card__body .tag {
  align-self: flex-start;
}

.home-batomon-card__body h3 {
  margin-block-end: 0;
}

.home-batomon-card__body p {
  margin-block-end: 0;
}

.home-collection__how {
  background-color: var(--color-turquoise-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.home-collection__how h3 {
  margin-block-end: 0;
}

.home-collection__how p {
  margin-block-end: 0;
}

.home-collection__how ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.home-collection__how li {
  margin: 0;
}

/* ---------- Trainers ---------- */
.home-trainers {
  background-color: var(--color-violet-soft);
  padding-block: var(--space-4xl);
}

.home-trainers__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.home-trainers__header {
  width: 100%;
}

.home-trainers__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
}

.home-trainer-card {
  min-width: 0;
  background-color: var(--color-bg-surface);
  border: var(--border-light);
  border-inline-start: 4px solid var(--color-electric-violet);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.home-trainer-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.home-trainer-card__media {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--color-mint-arena);
}

.home-trainer-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-trainer-card__body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.home-trainer-card__body h3 {
  margin-block-end: 0;
}

.home-trainer-card__body p {
  margin-block-end: 0;
}

.home-trainer-card__body ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.home-trainer-card__body li {
  margin: 0;
}

/* ---------- Team Building ---------- */
.home-team-building {
  background-color: var(--color-mint-arena);
  padding-block: var(--space-4xl);
}

.home-team-building__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.home-team-building__header {
  width: 100%;
}

.home-team-building__content {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--space-xl);
  align-items: start;
}

.home-team-building__text {
  min-width: 0;
}

.home-team-building__text h3 {
  margin-block-end: var(--space-md);
}

.home-team-building__text p {
  margin-block-end: var(--space-md);
}

.home-team-building__text ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  counter-reset: team-step;
}

.home-team-building__text li {
  margin: 0;
  counter-increment: team-step;
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
}

.home-team-building__text li::before {
  content: counter(team-step);
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--color-electric-violet);
  min-width: 24px;
}

.home-team-building__diagram {
  min-width: 0;
  display: flex;
  justify-content: center;
}

.home-formation {
  width: 100%;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  background-color: var(--color-bg-surface);
  border: var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.home-formation__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
}

.home-formation__slot {
  min-width: 0;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: var(--text-body-sm-size);
  font-weight: 700;
  text-align: center;
  border-radius: var(--radius-md);
  padding: var(--space-2xs);
}

.home-formation__slot--tank {
  background-color: var(--color-violet-soft);
  color: var(--color-ink-navy);
}

.home-formation__slot--dps {
  background-color: var(--color-coral-red);
  color: var(--color-white-mint);
}

.home-formation__slot--support {
  background-color: var(--color-turquoise-soft);
  color: var(--color-ink-navy);
}

.home-formation__slot--control {
  background-color: var(--color-sunny-yellow);
  color: var(--color-ink-navy);
}

/* ---------- Synergies ---------- */
.home-synergies {
  background-color: var(--color-turquoise-soft);
  padding-block: var(--space-4xl);
}

.home-synergies__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.home-synergies__header {
  width: 100%;
}

.home-synergies__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
}

.home-synergy-card {
  min-width: 0;
  background-color: var(--color-bg-surface);
  border: var(--border-light);
  border-block-start: 4px solid var(--color-tropical-turquoise);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.home-synergy-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.home-synergy-card .tag {
  align-self: flex-start;
}

.home-synergy-card h3 {
  margin-block-end: 0;
}

.home-synergy-card p {
  margin-block-end: 0;
}

.home-synergy-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.home-synergy-card li {
  margin: 0;
}

/* ---------- Combat ---------- */
.home-combat {
  background-color: var(--color-white-mint);
  padding-block: var(--space-4xl);
}

.home-combat__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.home-combat__header {
  width: 100%;
}

.home-combat__content {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: var(--space-xl);
  align-items: start;
}

.home-combat__diagram {
  min-width: 0;
  display: flex;
  justify-content: center;
}

.home-battlefield {
  width: 100%;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  background-color: var(--color-ink-navy);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.home-battlefield__side {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
}

.home-battlefield__unit {
  min-width: 0;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: var(--text-caption-size);
  font-weight: 700;
  text-align: center;
  border-radius: var(--radius-md);
  padding: var(--space-2xs);
  background-color: rgba(233, 255, 244, 0.12);
  color: var(--color-mint-arena);
  border: 1px solid rgba(233, 255, 244, 0.2);
}

.home-battlefield__divider {
  height: 2px;
  background-color: var(--color-electric-violet);
  opacity: 0.6;
}

.home-combat__text {
  min-width: 0;
}

.home-combat__text h3 {
  margin-block-end: var(--space-md);
}

.home-combat__text p {
  margin-block-end: var(--space-md);
}

.home-combat__text ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.home-combat__text li {
  margin: 0;
}

/* ---------- Items ---------- */
.home-items {
  background-color: var(--color-violet-soft);
  padding-block: var(--space-4xl);
}

.home-items__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.home-items__header {
  width: 100%;
}

.home-items__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}

.home-item-card {
  min-width: 0;
  background-color: var(--color-bg-surface);
  border: var(--border-light);
  border-inline-start: 4px solid var(--color-sunny-yellow);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.home-item-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.home-item-card__icon {
  font-size: 2rem;
  line-height: 1;
}

.home-item-card h3 {
  margin-block-end: 0;
}

.home-item-card p {
  margin-block-end: 0;
}

/* ---------- Progression ---------- */
.home-progression {
  background-color: var(--color-mint-arena);
  padding-block: var(--space-4xl);
}

.home-progression__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.home-progression__header {
  width: 100%;
}

.home-progression__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.home-progression__content p {
  margin-block-end: 0;
}

.home-progression__content ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.home-progression__content li {
  margin: 0;
}

.home-timeline {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-block-start: var(--space-md);
  position: relative;
  padding-block-start: var(--space-lg);
}

.home-timeline::before {
  content: "";
  position: absolute;
  top: var(--space-lg);
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--color-electric-violet);
  opacity: 0.3;
}

.home-timeline__step {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  text-align: center;
  position: relative;
  z-index: 1;
}

.home-timeline__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--color-electric-violet);
  border: 2px solid var(--color-mint-arena);
}

.home-timeline__label {
  font-family: var(--font-heading);
  font-size: var(--text-body-sm-size);
  font-weight: 700;
  color: var(--color-ink-navy);
}

/* ---------- Multiplayer ---------- */
.home-multiplayer {
  background-color: var(--color-turquoise-soft);
  padding-block: var(--space-4xl);
}

.home-multiplayer__container {
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
}

.home-multiplayer__icon {
  font-size: 2.5rem;
  line-height: 1;
  flex-shrink: 0;
}

.home-multiplayer__text {
  min-width: 0;
  flex: 1;
}

.home-multiplayer__text h2 {
  margin-block-end: var(--space-md);
}

.home-multiplayer__text p {
  margin-block-end: var(--space-md);
}

.home-multiplayer__text ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.home-multiplayer__text li {
  margin: 0;
}

/* ---------- Strategies ---------- */
.home-strategies {
  background-color: var(--color-white-mint);
  padding-block: var(--space-4xl);
}

.home-strategies__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.home-strategies__header {
  width: 100%;
}

.home-strategies__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}

.home-strategy-card {
  min-width: 0;
  background-color: var(--color-bg-surface);
  border: var(--border-light);
  border-block-start: 4px solid var(--color-electric-violet);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.home-strategy-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.home-strategy-card__icon {
  font-size: 2rem;
  line-height: 1;
}

.home-strategy-card h3 {
  margin-block-end: 0;
}

.home-strategy-card p {
  margin-block-end: 0;
}

/* ---------- Beginner Tips ---------- */
.home-beginner-tips {
  background-color: var(--color-mint-arena);
  padding-block: var(--space-4xl);
}

.home-beginner-tips__container {
  display: flex;
  justify-content: flex-start;
}

.home-beginner-tips__card {
  width: 100%;
  max-width: 600px;
  background-color: var(--color-bg-surface);
  border: var(--border-light);
  border-inline-start: 4px solid var(--color-tropical-turquoise);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.home-beginner-tips__card h2 {
  margin-block-end: 0;
}

.home-beginner-tips__card p {
  margin-block-end: 0;
}

.home-beginner-tips__card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.home-beginner-tips__card li {
  margin: 0;
}

/* ---------- Review ---------- */
.home-review {
  background-color: var(--color-white-mint);
  padding-block: var(--space-4xl);
}

.home-review__container {
  display: flex;
  justify-content: center;
}

.home-review__card {
  width: 100%;
  max-width: 800px;
  background-color: var(--color-bg-surface);
  border: var(--border-light);
  border-inline-start: 4px solid var(--color-coral-red);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.home-review__card h2 {
  margin-block-end: 0;
}

.home-review__card p {
  margin-block-end: 0;
}

.home-review__stars {
  color: var(--color-sunny-yellow);
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: 0.1em;
}

.home-review__card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.home-review__card li {
  margin: 0;
}

/* ---------- Gallery ---------- */
.home-gallery {
  background-color: var(--color-mint-arena);
  padding-block: var(--space-4xl);
}

.home-gallery__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.home-gallery__header {
  width: 100%;
}

.home-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}

.home-gallery__item {
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.home-gallery__link {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background-color: var(--color-ink-navy);
}

.home-gallery__link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}

.home-gallery__link:hover img {
  transform: scale(1.03);
}

.home-gallery__item figcaption {
  margin-block-start: 0;
}

/* ---------- Final CTA ---------- */
.home-final-cta {
  background-color: var(--color-ink-navy);
  padding-block: var(--space-4xl);
  display: flex;
  justify-content: center;
  padding-inline: var(--container-padding-mobile);
}

.home-final-cta__content {
  max-width: 600px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.home-final-cta__content h2 {
  color: var(--color-mint-arena);
  margin-block-end: 0;
}

.home-final-cta__content p {
  color: var(--color-white-mint);
  margin-block-end: 0;
}

.home-final-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
}

.home-final-cta__secondary {
  color: var(--color-mint-arena);
  border-color: var(--color-mint-arena);
}

.home-final-cta__secondary:hover {
  background-color: rgba(233, 255, 244, 0.12);
  color: var(--color-mint-arena);
}

/* ---------- Disclaimer ---------- */
.home-disclaimer {
  background-color: var(--color-mint-arena);
  padding-block: var(--space-xl);
}

.home-disclaimer__container {
  display: flex;
  justify-content: flex-start;
}

.home-disclaimer__bar {
  width: 100%;
  max-width: 600px;
  background-color: var(--color-bg-surface);
  border: var(--border-light);
  border-inline-start: 4px solid var(--color-coral-red);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.home-disclaimer__bar h3 {
  margin-block-end: 0;
  font-size: var(--text-h4-size);
}

.home-disclaimer__bar p {
  margin-block-end: 0;
  font-size: var(--text-body-sm-size);
}

/* ---------- Responsive ---------- */
@media (min-width: 768px) {
  .home-hero {
    padding-inline: var(--container-padding-desktop);
  }

  .home-final-cta {
    padding-inline: var(--container-padding-desktop);
  }
}

@media (max-width: 1023px) {
  .home-intro__columns {
    grid-template-columns: 1fr;
  }

  .home-collection__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-items__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-strategies__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-team-building__content {
    grid-template-columns: 1fr;
  }

  .home-combat__content {
    grid-template-columns: 1fr;
  }

  .home-combat__diagram {
    order: 1;
  }

  .home-combat__text {
    order: 2;
  }
}

@media (max-width: 767px) {
  .home-hero {
    min-height: 70vh;
    padding-block: var(--space-3xl);
  }

  .home-hero h1 {
    font-size: clamp(2rem, 8vw, 2.75rem);
  }

  .home-hero__lead {
    font-size: var(--text-body-size);
  }

  .home-hero__facts {
    flex-direction: column;
    align-items: center;
  }

  .home-collection__grid {
    grid-template-columns: 1fr;
  }

  .home-trainers__grid {
    grid-template-columns: 1fr;
  }

  .home-synergies__grid {
    grid-template-columns: 1fr;
  }

  .home-items__grid {
    grid-template-columns: 1fr;
  }

  .home-strategies__grid {
    grid-template-columns: 1fr;
  }

  .home-gallery__grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-block-end: var(--space-sm);
    gap: var(--space-md);
  }

  .home-gallery__item {
    flex: 0 0 85%;
    scroll-snap-align: start;
  }

  .home-timeline {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-md);
  }

  .home-timeline::before {
    display: none;
  }

  .home-timeline__step {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: var(--space-sm);
  }

  .home-multiplayer__container {
    flex-direction: column;
    align-items: flex-start;
  }

  .home-multiplayer__icon {
    font-size: 2rem;
  }

  .home-beginner-tips__container {
    justify-content: stretch;
  }

  .home-review__card {
    padding: var(--space-lg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero__particle {
    animation: none;
    opacity: 0.8;
  }

  .home-gallery__link img {
    transition: none;
  }

  .home-gallery__link:hover img {
    transform: none;
  }
}


/* ===== Umiejętności i Synergie — page-owned styles ===== */

/* Section base spacing */
.hero-synergie,
.fundamenty-synergie,
.typy-praktyka-synergie,
.mechanika-synergie,
.kombinacje-synergie,
.role-synergie,
.eksperymenty-synergie,
.bledy-synergie,
.studium-synergie,
.faq-synergie,
.cta-synergie {
  width: 100%;
  padding-block: var(--space-3xl);
}

@media (min-width: 768px) {
  .hero-synergie,
  .fundamenty-synergie,
  .typy-praktyka-synergie,
  .mechanika-synergie,
  .kombinacje-synergie,
  .role-synergie,
  .eksperymenty-synergie,
  .bledy-synergie,
  .studium-synergie,
  .faq-synergie,
  .cta-synergie {
    padding-block: var(--space-4xl);
  }
}

/* Section backgrounds */
.hero-synergie {
  background-color: var(--color-mint-arena);
}

.fundamenty-synergie {
  background-color: var(--color-white-mint);
}

.typy-praktyka-synergie {
  background-color: var(--color-violet-soft);
}

.mechanika-synergie {
  background-color: var(--color-white-mint);
}

.kombinacje-synergie {
  background-color: var(--color-turquoise-soft);
}

.role-synergie {
  background-color: var(--color-white-mint);
}

.eksperymenty-synergie {
  background-color: var(--color-violet-soft);
}

.bledy-synergie {
  background-color: var(--color-white-mint);
}

.studium-synergie {
  background-color: var(--color-turquoise-soft);
}

.faq-synergie {
  background-color: var(--color-white-mint);
}

.cta-synergie {
  background-color: var(--color-ink-navy);
}

/* Shared inner container */
.hero-synergie__inner,
.fundamenty-synergie__inner,
.typy-praktyka-synergie__inner,
.mechanika-synergie__inner,
.kombinacje-synergie__inner,
.role-synergie__inner,
.eksperymenty-synergie__inner,
.bledy-synergie__inner,
.studium-synergie__inner,
.faq-synergie__inner,
.cta-synergie__inner {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
}

@media (min-width: 768px) {
  .hero-synergie__inner,
  .fundamenty-synergie__inner,
  .typy-praktyka-synergie__inner,
  .mechanika-synergie__inner,
  .kombinacje-synergie__inner,
  .role-synergie__inner,
  .eksperymenty-synergie__inner,
  .bledy-synergie__inner,
  .studium-synergie__inner,
  .faq-synergie__inner,
  .cta-synergie__inner {
    padding-inline: var(--container-padding-desktop);
  }
}

/* Section heading component */
.section-heading {
  margin-block-end: var(--space-2xl);
  max-width: 68ch;
}

.section-heading__chapter {
  font-size: var(--text-caption-size);
  font-weight: var(--text-caption-weight);
  letter-spacing: var(--text-caption-letter-spacing);
  text-transform: uppercase;
  color: var(--color-electric-violet);
  margin-block-end: var(--space-xs);
}

.section-heading__title {
  margin-block-end: var(--space-md);
}

.section-heading__lead {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line-height);
  color: var(--color-text-primary);
  margin-block-end: 0;
}

/* ===== Hero ===== */
.hero-synergie__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.hero-synergie__content {
  min-width: 0;
  max-width: 68ch;
}

.hero-synergie__eyebrow {
  font-size: var(--text-caption-size);
  font-weight: var(--text-caption-weight);
  letter-spacing: var(--text-caption-letter-spacing);
  text-transform: uppercase;
  color: var(--color-electric-violet);
  margin-block-end: var(--space-sm);
}

.hero-synergie__title {
  margin-block-end: var(--space-lg);
  font-size: clamp(2rem, 5vw, var(--text-h1-size));
  line-height: 1.1;
}

.hero-synergie__lead {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line-height);
  margin-block-end: var(--space-xl);
  max-width: 68ch;
}

.hero-synergie__cta {
  align-self: flex-start;
}

.hero-synergie__media {
  min-width: 0;
  width: 100%;
}

.hero-synergie__image {
  width: 100%;
  height: auto;
  max-height: 300px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  transition: transform var(--transition-fast);
}

.hero-synergie__image:hover {
  transform: scale(1.02);
}

@media (min-width: 768px) {
  .hero-synergie__inner {
    grid-template-columns: 60% 40%;
    gap: var(--space-2xl);
  }

  .hero-synergie__media {
    max-height: none;
  }

  .hero-synergie__image {
    max-height: none;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
}

/* ===== Fundamenty ===== */
.fundamenty-synergie__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-block-end: var(--space-2xl);
}

.fundament-card {
  background-color: var(--color-bg-surface);
  border: var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-width: 0;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.fundament-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.fundament-card__icon {
  font-size: 2rem;
  line-height: 1;
}

.fundament-card__title {
  margin-block-end: 0;
}

.fundament-card__text {
  margin-block-end: 0;
  max-width: 60ch;
}

.fundamenty-synergie__table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.skill-types-table,
.synergy-conditions-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line-height);
  min-width: 600px;
}

.skill-types-table th,
.skill-types-table td,
.synergy-conditions-table th,
.synergy-conditions-table td {
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  border-bottom: 1px solid var(--color-border-light);
  vertical-align: top;
}

.skill-types-table th,
.synergy-conditions-table th {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-text-primary);
  background-color: var(--color-violet-soft);
}

.skill-types-table tbody tr:nth-child(even),
.synergy-conditions-table tbody tr:nth-child(even) {
  background-color: var(--color-mint-arena);
}

.skill-types-table tbody tr:hover,
.synergy-conditions-table tbody tr:hover {
  background-color: var(--color-turquoise-soft);
}

@media (min-width: 768px) {
  .fundamenty-synergie__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
  }
}

@media (max-width: 767px) {
  .skill-types-table,
  .synergy-conditions-table {
    min-width: 0;
  }

  .skill-types-table thead,
  .synergy-conditions-table thead {
    display: none;
  }

  .skill-types-table tbody,
  .skill-types-table tr,
  .skill-types-table td,
  .synergy-conditions-table tbody,
  .synergy-conditions-table tr,
  .synergy-conditions-table td {
    display: block;
    width: 100%;
  }

  .skill-types-table tr,
  .synergy-conditions-table tr {
    margin-block-end: var(--space-md);
    border: var(--border-light);
    border-radius: var(--radius-lg);
    background-color: var(--color-bg-surface);
  }

  .skill-types-table td,
  .synergy-conditions-table td {
    border-bottom: none;
    padding: var(--space-xs) var(--space-md);
    display: flex;
    gap: var(--space-sm);
  }

  .skill-types-table td::before,
  .synergy-conditions-table td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--color-electric-violet);
    flex: 0 0 100px;
  }
}

/* ===== Typy umiejętności w praktyce ===== */
.typy-praktyka-synergie__columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.skill-type-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.skill-type-column__title {
  margin-block-end: 0;
  padding-block-end: var(--space-xs);
  border-bottom: 2px solid var(--color-electric-violet);
}

.skill-type-column--active .skill-type-column__title {
  border-color: var(--color-electric-violet);
}

.skill-type-column--passive .skill-type-column__title {
  border-color: var(--color-tropical-turquoise);
}

.skill-type-column--reactive .skill-type-column__title {
  border-color: var(--color-coral-red);
}

.skill-example-card {
  background-color: var(--color-bg-surface);
  border: var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  min-width: 0;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  border-top: 3px solid var(--color-electric-violet);
}

.skill-type-column--passive .skill-example-card {
  border-top-color: var(--color-tropical-turquoise);
}

.skill-type-column--reactive .skill-example-card {
  border-top-color: var(--color-coral-red);
}

.skill-example-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.skill-example-card__name {
  margin-block-end: var(--space-xs);
}

.skill-example-card__desc {
  margin-block-end: 0;
  max-width: 60ch;
}

@media (min-width: 768px) {
  .typy-praktyka-synergie__columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
  }
}

/* ===== Mechanika synergii ===== */
.mechanika-synergie__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin-block-end: var(--space-2xl);
}

.mechanika-synergie__text,
.mechanika-synergie__table-wrapper {
  min-width: 0;
}

.mechanika-synergie__subtitle {
  margin-block-end: var(--space-sm);
}

.mechanika-synergie__paragraph {
  margin-block-end: var(--space-lg);
  max-width: 68ch;
}

.mechanika-synergie__paragraph:last-child {
  margin-block-end: 0;
}

.mechanika-synergie__scale {
  width: 100%;
  max-width: 68ch;
}

.scale-bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-block-start: var(--space-md);
}

.scale-bar {
  display: grid;
  grid-template-columns: 120px 1fr 120px;
  gap: var(--space-sm);
  align-items: center;
  min-width: 0;
}

.scale-bar__label {
  font-size: var(--text-body-sm-size);
  font-weight: 600;
  color: var(--color-text-primary);
}

.scale-bar__track {
  width: 100%;
  height: 8px;
  background-color: var(--color-violet-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.scale-bar__fill {
  height: 100%;
  background-color: var(--color-electric-violet);
  border-radius: var(--radius-sm);
  transition: width var(--transition-base);
}

.scale-bar__value {
  font-size: var(--text-body-sm-size);
  font-weight: 600;
  color: var(--color-electric-violet);
  text-align: right;
}

@media (min-width: 768px) {
  .mechanika-synergie__grid {
    grid-template-columns: 60% 40%;
    gap: var(--space-2xl);
  }
}

@media (max-width: 767px) {
  .scale-bar {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
  }

  .scale-bar__value {
    text-align: left;
  }
}

/* ===== Kombinacje ===== */
.kombinacje-synergie__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.combo-card {
  background-color: var(--color-bg-surface);
  border: var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  border-left: 4px solid var(--color-electric-violet);
}

.combo-card--fire {
  border-left-color: var(--color-coral-red);
}

.combo-card--ice {
  border-left-color: var(--color-tropical-turquoise);
}

.combo-card--support {
  border-left-color: var(--color-sunny-yellow);
}

.combo-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.combo-card__title {
  margin-block-end: 0;
}

.combo-card__desc {
  margin-block-end: 0;
  max-width: 60ch;
}

.combo-card__list {
  margin-block-end: 0;
  padding-inline-start: var(--space-lg);
  list-style-position: outside;
}

.combo-card__list li {
  margin-block-end: var(--space-xs);
}

.combo-card__note {
  margin-block-end: 0;
  font-size: var(--text-body-sm-size);
  color: var(--color-text-primary);
  background-color: var(--color-turquoise-soft);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  max-width: 60ch;
}

@media (min-width: 768px) {
  .kombinacje-synergie__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
  }
}

/* ===== Role ===== */
.role-synergie__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.role-card {
  background-color: var(--color-bg-surface);
  border: var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  border-top: 3px solid var(--color-tropical-turquoise);
}

.role-card--tank {
  border-top-color: var(--color-tropical-turquoise);
}

.role-card--dps {
  border-top-color: var(--color-coral-red);
}

.role-card--support {
  border-top-color: var(--color-sunny-yellow);
}

.role-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.role-card__title {
  margin-block-end: 0;
}

.role-card__text {
  margin-block-end: 0;
  max-width: 60ch;
}

.role-card__list {
  margin-block-end: 0;
  padding-inline-start: var(--space-lg);
  list-style-position: outside;
}

.role-card__list li {
  margin-block-end: var(--space-xs);
}

.role-card__note {
  margin-block-end: 0;
  font-size: var(--text-body-sm-size);
  color: var(--color-text-primary);
  background-color: var(--color-violet-soft);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  max-width: 60ch;
}

@media (min-width: 768px) {
  .role-synergie__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
  }
}

/* ===== Eksperymenty ===== */
.eksperymenty-synergie__steps {
  margin-block-end: var(--space-2xl);
  padding-inline-start: var(--space-lg);
  list-style-position: outside;
  max-width: 68ch;
}

.eksperymenty-synergie__steps li {
  margin-block-end: var(--space-sm);
}

.eksperymenty-synergie__columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.eksperymenty-synergie__tips,
.eksperymenty-synergie__tools {
  min-width: 0;
}

.eksperymenty-synergie__subtitle {
  margin-block-end: var(--space-sm);
}

.eksperymenty-synergie__list {
  margin-block-end: 0;
  padding-inline-start: var(--space-lg);
  list-style-position: outside;
  max-width: 68ch;
}

.eksperymenty-synergie__list li {
  margin-block-end: var(--space-xs);
}

.eksperymenty-synergie__tool {
  margin-block-end: var(--space-sm);
  max-width: 68ch;
}

.eksperymenty-synergie__tool:last-child {
  margin-block-end: 0;
}

@media (min-width: 768px) {
  .eksperymenty-synergie__columns {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }
}

/* ===== Błędy ===== */
.bledy-synergie__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.error-card {
  background-color: var(--color-bg-surface);
  border: var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  border-left: 4px solid var(--color-coral-red);
}

.error-card--red {
  border-left-color: var(--color-coral-red);
}

.error-card--yellow {
  border-left-color: var(--color-sunny-yellow);
}

.error-card--violet {
  border-left-color: var(--color-electric-violet);
}

.error-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.error-card__title {
  margin-block-end: 0;
}

.error-card__text {
  margin-block-end: 0;
  max-width: 60ch;
}

@media (min-width: 768px) {
  .bledy-synergie__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
  }
}

/* ===== Studium przypadku ===== */
.studium-synergie__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.studium-synergie__team,
.studium-synergie__analysis {
  min-width: 0;
}

.studium-synergie__subtitle {
  margin-block-end: var(--space-sm);
}

.studium-synergie__team-list {
  margin-block-end: 0;
  padding-inline-start: var(--space-lg);
  list-style-position: outside;
  max-width: 68ch;
}

.studium-synergie__team-list li {
  margin-block-end: var(--space-xs);
}

.studium-synergie__paragraph {
  margin-block-end: var(--space-md);
  max-width: 68ch;
}

.studium-synergie__paragraph:last-child {
  margin-block-end: 0;
}

@media (min-width: 768px) {
  .studium-synergie__grid {
    grid-template-columns: 40% 60%;
    gap: var(--space-2xl);
  }
}

/* ===== FAQ ===== */
.faq-synergie__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  max-width: 800px;
}

.faq-item {
  background-color: var(--color-bg-surface);
  border: var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  border-left: 4px solid var(--color-tropical-turquoise);
  min-width: 0;
}

.faq-item__question {
  margin-block-end: var(--space-sm);
}

.faq-item__answer {
  max-width: 68ch;
}

.faq-item__answer p {
  margin-block-end: 0;
}

/* ===== CTA ===== */
.cta-synergie__inner {
  text-align: center;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  align-items: center;
}

.cta-synergie__title {
  color: var(--color-text-on-dark);
  margin-block-end: 0;
  max-width: 60ch;
}

.cta-synergie__text {
  color: var(--color-text-on-dark);
  margin-block-end: 0;
  max-width: 60ch;
}

.cta-synergie__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;
  width: 100%;
}

.cta-synergie__btn {
  min-width: 200px;
}

@media (max-width: 767px) {
  .cta-synergie__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-synergie__btn {
    width: 100%;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-synergie__image,
  .fundament-card,
  .skill-example-card,
  .combo-card,
  .role-card,
  .error-card {
    transition: none;
  }

  .hero-synergie__image:hover {
    transform: none;
  }
}


/* ===== Thank You Page Scoped Styles ===== */

.thank-you {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  padding-block: var(--space-3xl);
  padding-inline: var(--container-padding-mobile);
}

.thank-you__content {
  max-width: 640px;
  text-align: center;
}

.thank-you__title {
  margin-block-end: var(--space-lg);
}

.thank-you__message {
  margin-block-end: var(--space-md);
  color: var(--color-text-primary);
}

.thank-you__next {
  margin-block-end: var(--space-xl);
  color: var(--color-text-primary);
}

.thank-you__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;
}

@media (min-width: 768px) {
  .thank-you {
    padding-inline: var(--container-padding-desktop);
  }
}

@media (prefers-reduced-motion: reduce) {
  .thank-you__actions .btn {
    transition: none;
  }
}