:root {
  --clr-bg: #f4f2f8;
  --clr-bg-alt: #eeeaf6;
  --clr-surface: #ffffff;
  --clr-surface-tint: #f9f7ff;
  --clr-surface-mid: #f0ecfa;
  --clr-primary: #5b3fd4;
  --clr-primary-dark: #4128b0;
  --clr-primary-light: #7c65df;
  --clr-secondary: #2ec4b6;
  --clr-secondary-dark: #1fa99d;
  --clr-accent: #ff6b6b;
  --clr-accent-warm: #ffb347;
  --clr-text: #1e1a2e;
  --clr-text-muted: #6b6480;
  --clr-text-light: #9891aa;
  --clr-border: #e2ddef;
  --clr-border-light: #ede9f8;

  --shadow-xs: 0 1px 3px rgba(91,63,212,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 2px 8px rgba(91,63,212,0.08), 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 20px rgba(91,63,212,0.10), 0 2px 8px rgba(0,0,0,0.06);
  --shadow-lg: 0 8px 40px rgba(91,63,212,0.12), 0 4px 16px rgba(0,0,0,0.08);
  --shadow-xl: 0 16px 60px rgba(91,63,212,0.15), 0 8px 24px rgba(0,0,0,0.10);

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 36px;
  --radius-full: 9999px;

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;

  --font-heading: 'Bricolage Grotesque', sans-serif;
  --font-body: 'Inter', sans-serif;

  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  --nav-height: 72px;
}

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

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

body {
  font-family: var(--font-body);
  background-color: var(--clr-bg);
  color: var(--clr-text);
  line-height: 1.7;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

main {
  flex: 1;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--clr-primary);
  text-decoration: none;
  transition: color var(--transition-base);
}

ul {
  list-style: none;
}

address {
  font-style: normal;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.2;
  color: var(--clr-text);
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.5rem); font-weight: 700; }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.4rem); font-weight: 600; }
h4 { font-size: 1.05rem; font-weight: 600; }

p { color: var(--clr-text-muted); line-height: 1.75; }

section { position: relative; overflow: hidden; }

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* ========================
   GLOBAL HEADER
======================== */
.global-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  height: var(--nav-height);
  transition: background var(--transition-slow), backdrop-filter var(--transition-slow), border-color var(--transition-slow), box-shadow var(--transition-slow);
  border-bottom: 1px solid transparent;

  & .global-header__nav {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-md);
    height: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-lg);
  }

  & .global-header__logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }

  & .global-header__links {
    display: none;
    align-items: center;
    gap: var(--space-sm);
    margin-left: auto;

    & li a {
      font-size: 0.9rem;
      font-weight: 500;
      color: var(--clr-text);
      padding: 0.4rem 0.75rem;
      border-radius: var(--radius-full);
      transition: color var(--transition-base), background var(--transition-base);

      &:hover {
        color: var(--clr-primary);
        background: rgba(91,63,212,0.06);
      }

      &.active {
        color: var(--clr-primary);
        background: rgba(91,63,212,0.08);
      }
    }
  }

  & .global-header__hamburger {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    align-items: center;
    border-radius: var(--radius-sm);
    transition: background var(--transition-base);

    &:hover { background: rgba(91,63,212,0.06); }

    & span {
      display: block;
      width: 22px;
      height: 2px;
      background: var(--clr-text);
      border-radius: 2px;
      transition: transform var(--transition-base), opacity var(--transition-base);
    }
  }
}

.global-header--scrolled {
  background: rgba(244,242,248,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom-color: var(--clr-border);
  box-shadow: 0 2px 20px rgba(91,63,212,0.08);
}

.global-header--solid {
  background: var(--clr-bg);
  border-bottom-color: var(--clr-border);
}

@media (min-width: 900px) {
  .global-header {
    & .global-header__links { display: flex; }
    & .global-header__hamburger { display: none; }
  }
}

/* ========================
   MOBILE OVERLAY + PANEL
======================== */
.global-mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30,26,46,0.5);
  backdrop-filter: blur(4px);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-slow);

  &.is-open {
    opacity: 1;
    pointer-events: all;
  }
}

.global-mobile-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(360px, 90vw);
  background: var(--clr-surface);
  z-index: 1001;
  transform: translateX(100%);
  transition: transform var(--transition-slow) cubic-bezier(0.4,0,0.2,1);
  display: flex;
  flex-direction: column;
  padding: var(--space-lg) var(--space-md);
  box-shadow: var(--shadow-xl);

  &.is-open { transform: translateX(0); }

  & .global-mobile-panel__close {
    align-self: flex-end;
    background: var(--clr-bg-alt);
    border: none;
    cursor: pointer;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--clr-text);
    transition: background var(--transition-base), color var(--transition-base);
    margin-bottom: var(--space-lg);

    &:hover {
      background: var(--clr-primary);
      color: #fff;
    }
  }

  & .global-mobile-panel__nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;

    & a {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.875rem var(--space-sm);
      border-radius: var(--radius-md);
      font-size: 1rem;
      font-weight: 500;
      color: var(--clr-text);
      transition: background var(--transition-base), color var(--transition-base);

      &:hover {
        background: rgba(91,63,212,0.06);
        color: var(--clr-primary);
      }

      & i {
        width: 20px;
        color: var(--clr-primary-light);
      }
    }
  }

  & .global-mobile-panel__contact {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: var(--space-md);
    border-top: 1px solid var(--clr-border);

    & a {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.875rem;
      color: var(--clr-text-muted);
      padding: 0.5rem;
      border-radius: var(--radius-sm);
      transition: color var(--transition-base);

      &:hover { color: var(--clr-primary); }
      & i { color: var(--clr-primary); width: 16px; }
    }
  }
}

/* ========================
   BOTTOM NAV (MOBILE)
======================== */
.global-bottom-nav {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--clr-border);
  z-index: 800;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -4px 20px rgba(91,63,212,0.08);

  & a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 0.25rem;
    min-height: 56px;
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--clr-text-light);
    transition: color var(--transition-base);
    gap: 3px;

    &:hover, &.active { color: var(--clr-primary); }

    & i { font-size: 1.1rem; }
    & span { font-size: 0.6rem; }
  }
}

@media (min-width: 900px) {
  .global-bottom-nav { display: none; }
}

/* ========================
   GLOBAL FOOTER
======================== */
.global-footer {
  background: var(--clr-text);
  color: rgba(255,255,255,0.75);
  position: relative;
  overflow: hidden;
  padding-bottom: 0;

  & .global-footer__blobs {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;

    & .global-footer__blob--1 {
      position: absolute;
      width: 400px;
      height: 400px;
      background: radial-gradient(circle, rgba(91,63,212,0.25) 0%, transparent 70%);
      top: -100px;
      left: -100px;
      filter: blur(80px);
    }
    & .global-footer__blob--2 {
      position: absolute;
      width: 350px;
      height: 350px;
      background: radial-gradient(circle, rgba(46,196,182,0.2) 0%, transparent 70%);
      bottom: -80px;
      right: -60px;
      filter: blur(90px);
    }
  }

  & .global-footer__container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-3xl) var(--space-md) var(--space-xl);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);

    @media (min-width: 600px) {
      grid-template-columns: 1fr 1fr;
    }
    @media (min-width: 1000px) {
      grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    }
  }

  & .global-footer__brand {
    & img { margin-bottom: var(--space-sm); filter: brightness(0) invert(1); opacity: 0.9; }
    & p { font-size: 0.875rem; line-height: 1.6; color: rgba(255,255,255,0.6); margin-bottom: var(--space-sm); }
    & address { font-size: 0.8rem; color: rgba(255,255,255,0.5); line-height: 1.6; }
  }

  & .global-footer__nav-group {
    & h4 {
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: rgba(255,255,255,0.5);
      margin-bottom: var(--space-sm);
      font-family: var(--font-body);
    }

    & ul {
      display: flex;
      flex-direction: column;
      gap: 0.4rem;

      & li a {
        font-size: 0.875rem;
        color: rgba(255,255,255,0.7);
        transition: color var(--transition-base);

        &:hover { color: #fff; }
      }
    }
  }

  & .global-footer__contact {
    & h4 {
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: rgba(255,255,255,0.5);
      margin-bottom: var(--space-sm);
      font-family: var(--font-body);
    }

    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    & a {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.875rem;
      color: rgba(255,255,255,0.7);
      transition: color var(--transition-base);

      &:hover { color: #fff; }
      & i { color: var(--clr-secondary); width: 16px; }
    }
  }

  & .global-footer__bottom {
    position: relative;
    border-top: 1px solid rgba(255,255,255,0.08);
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-md) var(--space-md);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);

    & p { font-size: 0.8rem; color: rgba(255,255,255,0.4); }

    & .global-footer__legal-links {
      display: flex;
      gap: var(--space-sm);

      & a {
        font-size: 0.8rem;
        color: rgba(255,255,255,0.4);
        transition: color var(--transition-base);
        &:hover { color: rgba(255,255,255,0.8); }
      }
    }
  }
}

/* ========================
   SHARED LABELS / BADGES
======================== */
.home-hero__badge,
.home-intro__label,
.home-guides-grid__label,
.home-how-it-works__label,
.home-carousel-section__label,
.home-cta-split__label,
.home-location__label,
.home-zigzag__label,
.odkud-hero__label,
.odkud-story__label,
.odkud-principles__label,
.pojmy-hero__label,
.pojmy-glossary__label,
.faq-hero__label,
.faq-section__label,
.contact-hero__label,
.contact-area-section__label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--clr-primary);
  background: rgba(91,63,212,0.08);
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-sm);
}

/* ========================
   HOME HERO
======================== */
.home-hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--nav-height) + var(--space-xl)) var(--space-md) calc(var(--space-xl) + 80px);
  position: relative;

  & .home-hero__blobs {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;

    & .home-hero__blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(100px);
    }
    & .home-hero__blob--1 {
      width: 500px; height: 500px;
      background: radial-gradient(circle, rgba(91,63,212,0.28) 0%, transparent 70%);
      top: -100px; left: -150px;
    }
    & .home-hero__blob--2 {
      width: 450px; height: 450px;
      background: radial-gradient(circle, rgba(46,196,182,0.22) 0%, transparent 70%);
      top: 50px; right: -100px;
    }
    & .home-hero__blob--3 {
      width: 350px; height: 350px;
      background: radial-gradient(circle, rgba(255,107,107,0.18) 0%, transparent 70%);
      bottom: 100px; left: 20%;
    }
    & .home-hero__blob--4 {
      width: 300px; height: 300px;
      background: radial-gradient(circle, rgba(255,179,71,0.15) 0%, transparent 70%);
      bottom: -50px; right: 10%;
    }
  }

  & .home-hero__content {
    position: relative;
    max-width: 780px;
    margin: 0 auto;
    z-index: 2;
  }

  & .home-hero__heading {
    font-size: clamp(2.4rem, 6vw, 4.5rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: var(--space-md);
    color: var(--clr-text);

    & span {
      background: linear-gradient(135deg, var(--clr-primary), var(--clr-secondary));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
  }

  & .home-hero__lead {
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: var(--clr-text-muted);
    max-width: 560px;
    margin: 0 auto var(--space-lg);
    line-height: 1.7;
  }

  & .home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: center;
  }

  & .home-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, var(--clr-primary), var(--clr-primary-dark));
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.875rem 1.75rem;
    border-radius: var(--radius-full);
    box-shadow: 0 4px 20px rgba(91,63,212,0.3), 0 2px 6px rgba(0,0,0,0.1);
    transition: transform var(--transition-base), box-shadow var(--transition-base);

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 30px rgba(91,63,212,0.4), 0 4px 12px rgba(0,0,0,0.12);
      color: #fff;
    }
  }

  & .home-hero__secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(91,63,212,0.08);
    color: var(--clr-primary);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.875rem 1.75rem;
    border-radius: var(--radius-full);
    border: 1px solid rgba(91,63,212,0.15);
    transition: background var(--transition-base), transform var(--transition-base);

    &:hover {
      background: rgba(91,63,212,0.14);
      transform: translateY(-2px);
    }
  }

  & .home-hero__float {
    position: absolute;
    background: var(--clr-surface);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--clr-text);
    border: 1px solid var(--clr-border-light);
    z-index: 3;
    white-space: nowrap;

    & i {
      color: var(--clr-primary);
      font-size: 1rem;
    }

    &.home-hero__float--tl { top: 25%; left: max(1rem, 5%); }
    &.home-hero__float--tr { top: 30%; right: max(1rem, 5%); }
    &.home-hero__float--bl { bottom: 22%; left: max(1rem, 5%); }
    &.home-hero__float--br { bottom: 22%; right: max(1rem, 5%); }
  }

  @media (max-width: 700px) {
    & .home-hero__float { display: none; }
  }
}

/* ========================
   HOME INTRO
======================== */
.home-intro {
  padding: var(--space-3xl) var(--space-md);
  background: var(--clr-surface);

  & .home-intro__container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    align-items: center;

    @media (min-width: 768px) {
      grid-template-columns: 1fr 1fr;
    }
  }

  & .home-intro__text {
    & h2 { margin-bottom: var(--space-sm); }
    & p { margin-bottom: var(--space-sm); }
  }

  & .home-intro__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--clr-primary);
    margin-top: var(--space-sm);
    padding: 0.5rem 0;
    border-bottom: 2px solid rgba(91,63,212,0.2);
    transition: border-color var(--transition-base), gap var(--transition-base);

    &:hover {
      border-color: var(--clr-primary);
      gap: 0.7rem;
    }
  }

  & .home-intro__image {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);

    & img {
      width: 100%;
      height: 400px;
      object-fit: cover;
      display: block;
    }

    & .home-intro__image-badge {
      position: absolute;
      bottom: 1rem;
      left: 1rem;
      background: rgba(255,255,255,0.92);
      backdrop-filter: blur(10px);
      border-radius: var(--radius-full);
      padding: 0.4rem 0.875rem;
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--clr-text);
      display: flex;
      align-items: center;
      gap: 0.4rem;
      box-shadow: var(--shadow-sm);

      & i { color: var(--clr-primary); }
    }
  }
}

/* ========================
   HOME GUIDES GRID
======================== */
.home-guides-grid {
  padding: var(--space-3xl) var(--space-md);
  background: var(--clr-bg);
  position: relative;

  & .home-guides-grid__blobs {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;

    & .home-guides-grid__blob--1 {
      position: absolute;
      width: 500px; height: 500px;
      background: radial-gradient(circle, rgba(46,196,182,0.15) 0%, transparent 70%);
      top: -100px; right: -100px;
      filter: blur(100px);
    }
    & .home-guides-grid__blob--2 {
      position: absolute;
      width: 400px; height: 400px;
      background: radial-gradient(circle, rgba(91,63,212,0.12) 0%, transparent 70%);
      bottom: -80px; left: -80px;
      filter: blur(90px);
    }
  }

  & .home-guides-grid__container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
  }

  & .home-guides-grid__header {
    text-align: center;
    margin-bottom: var(--space-xl);
    & h2 { margin-bottom: 0.75rem; }
    & p { max-width: 560px; margin: 0 auto; }
  }

  & .home-guides-grid__items {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);

    @media (min-width: 600px) {
      grid-template-columns: 1fr 1fr;
    }
    @media (min-width: 1000px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  & .home-guides-grid__card {
    background: var(--clr-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--clr-border-light);
    transition: transform var(--transition-base), box-shadow var(--transition-base);

    &:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-xl);
    }

    & .home-guides-grid__card-img {
      position: relative;
      height: 200px;
      overflow: hidden;

      & img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform var(--transition-slow);
      }

      & .home-guides-grid__card-num {
        position: absolute;
        top: 1rem;
        right: 1rem;
        background: rgba(91,63,212,0.85);
        color: #fff;
        font-family: var(--font-heading);
        font-weight: 800;
        font-size: 1.1rem;
        width: 44px;
        height: 44px;
        border-radius: var(--radius-sm);
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(4px);
      }
    }

    &:hover .home-guides-grid__card-img img {
      transform: scale(1.04);
    }

    & .home-guides-grid__card-body {
      padding: var(--space-md);

      & .home-guides-grid__card-icon {
        width: 40px;
        height: 40px;
        background: rgba(91,63,212,0.08);
        border-radius: var(--radius-sm);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0.75rem;
        color: var(--clr-primary);
        font-size: 1rem;
      }

      & h3 { font-size: 1.05rem; margin-bottom: 0.5rem; }
      & p { font-size: 0.875rem; line-height: 1.6; margin-bottom: 0.875rem; }

      & .home-guides-grid__card-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.3rem;

        & li {
          font-size: 0.7rem;
          font-weight: 600;
          color: var(--clr-primary);
          background: rgba(91,63,212,0.07);
          padding: 0.2rem 0.6rem;
          border-radius: var(--radius-full);
        }
      }
    }
  }
}

/* ========================
   HOME HOW IT WORKS
======================== */
.home-how-it-works {
  padding: var(--space-3xl) var(--space-md);
  background: linear-gradient(135deg, var(--clr-surface) 0%, var(--clr-surface-tint) 100%);

  & .home-how-it-works__container {
    max-width: 1100px;
    margin: 0 auto;
  }

  & .home-how-it-works__header {
    text-align: center;
    margin-bottom: var(--space-xl);
    & h2 { margin-bottom: 0.5rem; }
  }

  & .home-how-it-works__steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    align-items: start;

    @media (min-width: 768px) {
      grid-template-columns: 1fr auto 1fr auto 1fr;
      align-items: center;
    }
  }

  & .home-how-it-works__step {
    background: var(--clr-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    text-align: center;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--clr-border-light);
    position: relative;

    & .home-how-it-works__step-num {
      position: absolute;
      top: -14px;
      left: 50%;
      transform: translateX(-50%);
      background: linear-gradient(135deg, var(--clr-primary), var(--clr-primary-dark));
      color: #fff;
      font-family: var(--font-heading);
      font-weight: 800;
      font-size: 0.85rem;
      width: 30px;
      height: 30px;
      border-radius: var(--radius-full);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    & .home-how-it-works__step-icon {
      width: 64px;
      height: 64px;
      background: rgba(91,63,212,0.08);
      border-radius: var(--radius-md);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: var(--space-sm) auto var(--space-sm);
      font-size: 1.5rem;
      color: var(--clr-primary);
    }

    & h3 { margin-bottom: 0.5rem; }
    & p { font-size: 0.875rem; line-height: 1.6; }
  }

  & .home-how-it-works__connector {
    color: var(--clr-border);
    font-size: 1.5rem;
    text-align: center;
    display: none;

    @media (min-width: 768px) { display: block; }
  }
}

/* ========================
   HOME ZIGZAG
======================== */
.home-zigzag {
  padding: var(--space-3xl) var(--space-md);
  background: var(--clr-bg);

  & .home-zigzag__container {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-3xl);
  }

  & .home-zigzag__block {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    align-items: center;

    @media (min-width: 768px) {
      grid-template-columns: 1fr 1fr;
    }
  }

  & .home-zigzag__block--right {
    @media (min-width: 768px) {
      & .home-zigzag__content { order: -1; }
    }
  }

  & .home-zigzag__image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);

    & img {
      width: 100%;
      height: 340px;
      object-fit: cover;
      display: block;
      transition: transform var(--transition-slow);

      &:hover { transform: scale(1.03); }
    }
  }

  & .home-zigzag__content {
    & h2 { margin-bottom: 0.875rem; }
    & p { margin-bottom: var(--space-sm); }
  }

  & .home-zigzag__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--clr-primary);
    margin-top: 0.5rem;
    padding-bottom: 2px;
    border-bottom: 2px solid rgba(91,63,212,0.2);
    transition: border-color var(--transition-base), gap var(--transition-base);

    &:hover {
      border-color: var(--clr-primary);
      gap: 0.7rem;
    }
  }
}

/* ========================
   HOME CAROUSEL
======================== */
.home-carousel-section {
  padding: var(--space-3xl) var(--space-md);
  background: var(--clr-surface);
  position: relative;

  & .home-carousel-section__blobs {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;

    & .home-carousel-section__blob--1 {
      position: absolute;
      width: 450px; height: 450px;
      background: radial-gradient(circle, rgba(255,107,107,0.12) 0%, transparent 70%);
      top: -80px; left: -80px;
      filter: blur(100px);
    }
    & .home-carousel-section__blob--2 {
      position: absolute;
      width: 400px; height: 400px;
      background: radial-gradient(circle, rgba(91,63,212,0.12) 0%, transparent 70%);
      bottom: -60px; right: -60px;
      filter: blur(90px);
    }
  }

  & .home-carousel-section__container {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
  }

  & .home-carousel-section__header {
    text-align: center;
    margin-bottom: var(--space-xl);
    & h2 { margin-bottom: 0.5rem; }
  }

  & .home-carousel-swiper {
    padding-bottom: 60px !important;

    & .home-carousel-swiper__pagination {
      bottom: 8px;
    }
    & .home-carousel-swiper__prev,
    & .home-carousel-swiper__next {
      color: var(--clr-primary);
      &::after { font-size: 1rem; }
    }
  }

  & .home-carousel-section__slide {
    background: var(--clr-surface-tint);
    border: 1px solid var(--clr-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    height: auto;
    box-shadow: var(--shadow-sm);

    & .home-carousel-section__slide-icon {
      width: 52px;
      height: 52px;
      background: rgba(91,63,212,0.08);
      border-radius: var(--radius-md);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.3rem;
      color: var(--clr-primary);
      margin-bottom: var(--space-sm);
    }

    & h4 { margin-bottom: 0.5rem; font-size: 1.05rem; }
    & p { font-size: 0.875rem; line-height: 1.65; }
  }
}

/* ========================
   HOME CTA SPLIT
======================== */
.home-cta-split {
  padding: var(--space-3xl) var(--space-md);
  background: linear-gradient(135deg, rgba(91,63,212,0.06) 0%, rgba(46,196,182,0.06) 100%);
  position: relative;
  overflow: hidden;

  & .home-cta-split__blob--1 {
    position: absolute;
    width: 600px; height: 300px;
    background: radial-gradient(ellipse, rgba(91,63,212,0.15) 0%, transparent 70%);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    filter: blur(80px);
    pointer-events: none;
  }

  & .home-cta-split__container {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    align-items: center;
    position: relative;

    @media (min-width: 768px) {
      grid-template-columns: 1fr 1fr;
    }
  }

  & .home-cta-split__text {
    & h2 { margin-bottom: 0.875rem; }
    & p { font-size: 0.95rem; }
  }

  & .home-cta-split__action {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    align-items: flex-start;

    @media (min-width: 768px) { align-items: flex-start; }
  }

  & .home-cta-split__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, var(--clr-primary), var(--clr-primary-dark));
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.9rem 1.75rem;
    border-radius: var(--radius-full);
    box-shadow: 0 4px 20px rgba(91,63,212,0.3);
    transition: transform var(--transition-base), box-shadow var(--transition-base);

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 30px rgba(91,63,212,0.4);
      color: #fff;
    }
  }

  & .home-cta-split__note {
    font-size: 0.8rem;
    color: var(--clr-text-light);
    line-height: 1.5;
  }
}

/* ========================
   HOME LOCATION
======================== */
.home-location {
  padding: var(--space-3xl) var(--space-md);
  background: var(--clr-surface);

  & .home-location__container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    align-items: start;

    @media (min-width: 900px) {
      grid-template-columns: 1fr 1.4fr;
    }
  }

  & .home-location__info {
    & h2 { margin-bottom: var(--space-md); }
  }

  & .home-location__details {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  & .home-location__detail {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: var(--space-sm);
    background: var(--clr-surface-tint);
    border-radius: var(--radius-md);
    border: 1px solid var(--clr-border-light);

    & i {
      color: var(--clr-primary);
      font-size: 1rem;
      margin-top: 2px;
      flex-shrink: 0;
    }

    & div {
      display: flex;
      flex-direction: column;
      gap: 0.15rem;
    }

    & strong {
      font-size: 0.78rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--clr-text-light);
      font-family: var(--font-body);
    }

    & span, & a {
      font-size: 0.9rem;
      color: var(--clr-text-muted);
    }

    & a:hover { color: var(--clr-primary); }
  }

  & .home-location__map {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--clr-border-light);

    & iframe { display: block; }
  }
}

/* ========================
   ODKUD HERO
======================== */
.odkud-hero {
  padding: calc(var(--nav-height) + var(--space-xl)) var(--space-md) var(--space-xl);
  text-align: center;
  position: relative;

  & .odkud-hero__blobs {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;

    & .odkud-hero__blob--1 {
      position: absolute; width: 400px; height: 400px;
      background: radial-gradient(circle, rgba(91,63,212,0.2) 0%, transparent 70%);
      top: -50px; left: -100px; filter: blur(90px);
    }
    & .odkud-hero__blob--2 {
      position: absolute; width: 350px; height: 350px;
      background: radial-gradient(circle, rgba(46,196,182,0.18) 0%, transparent 70%);
      top: 30px; right: -80px; filter: blur(80px);
    }
    & .odkud-hero__blob--3 {
      position: absolute; width: 250px; height: 250px;
      background: radial-gradient(circle, rgba(255,107,107,0.12) 0%, transparent 70%);
      bottom: 0; left: 40%; filter: blur(70px);
    }
  }

  & .odkud-hero__content {
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    & h1 { margin-bottom: 0.875rem; }
    & p { font-size: 1.05rem; }
  }
}

/* ========================
   ODKUD STORY
======================== */
.odkud-story {
  padding: var(--space-3xl) var(--space-md);
  background: var(--clr-surface);

  & .odkud-story__container {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-3xl);
  }

  & .odkud-story__block {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    align-items: center;

    @media (min-width: 768px) {
      grid-template-columns: 1fr 1fr;
    }
  }

  & .odkud-story__block--right {
    @media (min-width: 768px) {
      & .odkud-story__content { order: -1; }
    }
  }

  & .odkud-story__image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);

    & img {
      width: 100%;
      height: 320px;
      object-fit: cover;
    }
  }

  & .odkud-story__content {
    & h2 { margin-bottom: 0.875rem; }
    & p { margin-bottom: var(--space-sm); }
  }
}

/* ========================
   ODKUD PRINCIPLES
======================== */
.odkud-principles {
  padding: var(--space-3xl) var(--space-md);
  background: var(--clr-bg);
  position: relative;

  & .odkud-principles__blobs {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;

    & .odkud-principles__blob--1 {
      position: absolute; width: 450px; height: 450px;
      background: radial-gradient(circle, rgba(91,63,212,0.12) 0%, transparent 70%);
      top: -80px; right: -80px; filter: blur(100px);
    }
    & .odkud-principles__blob--2 {
      position: absolute; width: 350px; height: 350px;
      background: radial-gradient(circle, rgba(46,196,182,0.12) 0%, transparent 70%);
      bottom: -60px; left: -60px; filter: blur(90px);
    }
  }

  & .odkud-principles__container {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
  }

  & .odkud-principles__header {
    text-align: center;
    margin-bottom: var(--space-xl);
    & h2 { margin-bottom: 0.5rem; }
  }

  & .odkud-principles__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);

    @media (min-width: 600px) { grid-template-columns: 1fr 1fr; }
    @media (min-width: 900px) { grid-template-columns: repeat(4, 1fr); }
  }

  & .odkud-principles__card {
    background: var(--clr-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--clr-border-light);
    transition: transform var(--transition-base), box-shadow var(--transition-base);

    &:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-xl);
    }

    & .odkud-principles__card-icon {
      width: 52px; height: 52px;
      background: rgba(91,63,212,0.08);
      border-radius: var(--radius-md);
      display: flex; align-items: center; justify-content: center;
      font-size: 1.3rem;
      color: var(--clr-primary);
      margin-bottom: var(--space-sm);
    }

    & h3 { margin-bottom: 0.5rem; font-size: 1rem; }
    & p { font-size: 0.875rem; line-height: 1.65; }
  }
}

/* ========================
   ODKUD CTA
======================== */
.odkud-cta {
  padding: var(--space-3xl) var(--space-md);
  background: var(--clr-surface);

  & .odkud-cta__container {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;

    & h2 { margin-bottom: 0.875rem; }
    & p { margin-bottom: var(--space-lg); }
  }

  & .odkud-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, var(--clr-primary), var(--clr-primary-dark));
    color: #fff;
    font-weight: 600;
    padding: 0.9rem 2rem;
    border-radius: var(--radius-full);
    box-shadow: 0 4px 20px rgba(91,63,212,0.3);
    transition: transform var(--transition-base), box-shadow var(--transition-base);

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 30px rgba(91,63,212,0.4);
      color: #fff;
    }
  }
}

/* ========================
   POJMY HERO
======================== */
.pojmy-hero {
  padding: calc(var(--nav-height) + var(--space-xl)) var(--space-md) var(--space-xl);
  text-align: center;
  position: relative;

  & .pojmy-hero__blobs {
    position: absolute; inset: 0; pointer-events: none; overflow: hidden;
    & .pojmy-hero__blob--1 { position: absolute; width: 400px; height: 400px; background: radial-gradient(circle, rgba(255,179,71,0.15) 0%, transparent 70%); top: -50px;
Continuing exactly from where the CSS stopped:

left: -100px; filter: blur(90px); }
    & .pojmy-hero__blob--2 { position: absolute; width: 350px; height: 350px; background: radial-gradient(circle, rgba(91,63,212,0.18) 0%, transparent 70%); top: 20px; right: -80px; filter: blur(80px); }
    & .pojmy-hero__blob--3 { position: absolute; width: 250px; height: 250px; background: radial-gradient(circle, rgba(46,196,182,0.15) 0%, transparent 70%); bottom: 0; right: 30%; filter: blur(70px); }
  }

  & .pojmy-hero__content {
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    & h1 { margin-bottom: 0.875rem; }
    & p { font-size: 1.05rem; }
  }
}

/* ========================
   POJMY IMAGE SECTION
======================== */
.pojmy-image-section {
  padding: 0 var(--space-md) var(--space-xl);
  background: var(--clr-bg);

  & .pojmy-image-section__container {
    max-width: 900px;
    margin: 0 auto;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--clr-border-light);
    position: relative;

    & img {
      width: 100%;
      height: 420px;
      object-fit: cover;
      display: block;
    }
  }

  & .pojmy-image-section__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(30,26,46,0.8) 0%, transparent 100%);
    color: rgba(255,255,255,0.9);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 2rem 1.25rem 1rem;
    text-align: center;
  }
}

/* ========================
   POJMY GLOSSARY
======================== */
.pojmy-glossary {
  padding: var(--space-xl) var(--space-md) var(--space-3xl);
  background: var(--clr-bg);
  position: relative;

  & .pojmy-glossary__blobs {
    position: absolute; inset: 0; pointer-events: none; overflow: hidden;
    & .pojmy-glossary__blob--1 { position: absolute; width: 500px; height: 500px; background: radial-gradient(circle, rgba(91,63,212,0.10) 0%, transparent 70%); top: 10%; right: -100px; filter: blur(110px); }
    & .pojmy-glossary__blob--2 { position: absolute; width: 400px; height: 400px; background: radial-gradient(circle, rgba(46,196,182,0.10) 0%, transparent 70%); bottom: 10%; left: -80px; filter: blur(100px); }
  }

  & .pojmy-glossary__container {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
  }

  & .pojmy-glossary__header {
    text-align: center;
    margin-bottom: var(--space-xl);
    & h2 { margin-bottom: 0.5rem; }
  }

  & .pojmy-glossary__grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
  }

  & .pojmy-glossary__group {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: var(--space-md);
    align-items: start;

    @media (max-width: 500px) {
      grid-template-columns: 1fr;
    }
  }

  & .pojmy-glossary__group-letter {
    font-family: var(--font-heading);
    font-size: 3rem;
    font-weight: 800;
    color: rgba(91,63,212,0.15);
    line-height: 1;
    padding-top: 0.5rem;

    @media (max-width: 500px) {
      font-size: 2rem;
    }
  }

  & .pojmy-glossary__terms {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  & .pojmy-glossary__term {
    background: var(--clr-surface);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--clr-border-light);
    transition: box-shadow var(--transition-base), transform var(--transition-base);

    &:hover {
      box-shadow: var(--shadow-md);
      transform: translateX(4px);
    }

    & h3 {
      font-size: 1rem;
      margin-bottom: 0.5rem;
      color: var(--clr-text);
    }

    & .pojmy-glossary__also {
      font-size: 0.8rem;
      font-weight: 400;
      color: var(--clr-text-light);
    }

    & p { font-size: 0.875rem; line-height: 1.65; }
  }
}

/* ========================
   POJMY CTA
======================== */
.pojmy-cta {
  padding: var(--space-3xl) var(--space-md);
  background: linear-gradient(135deg, rgba(91,63,212,0.05) 0%, rgba(46,196,182,0.05) 100%);

  & .pojmy-cta__container {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;

    & h2 { margin-bottom: 0.875rem; }
    & p { margin-bottom: var(--space-lg); }
  }

  & .pojmy-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, var(--clr-primary), var(--clr-primary-dark));
    color: #fff;
    font-weight: 600;
    padding: 0.9rem 2rem;
    border-radius: var(--radius-full);
    box-shadow: 0 4px 20px rgba(91,63,212,0.3);
    transition: transform var(--transition-base), box-shadow var(--transition-base);

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 30px rgba(91,63,212,0.4);
      color: #fff;
    }
  }
}

/* ========================
   FAQ HERO
======================== */
.faq-hero {
  padding: calc(var(--nav-height) + var(--space-xl)) var(--space-md) var(--space-xl);
  text-align: center;
  position: relative;

  & .faq-hero__blobs {
    position: absolute; inset: 0; pointer-events: none; overflow: hidden;
    & .faq-hero__blob--1 { position: absolute; width: 450px; height: 450px; background: radial-gradient(circle, rgba(91,63,212,0.18) 0%, transparent 70%); top: -80px; left: -100px; filter: blur(90px); }
    & .faq-hero__blob--2 { position: absolute; width: 380px; height: 380px; background: radial-gradient(circle, rgba(46,196,182,0.16) 0%, transparent 70%); top: 0; right: -80px; filter: blur(80px); }
    & .faq-hero__blob--3 { position: absolute; width: 280px; height: 280px; background: radial-gradient(circle, rgba(255,179,71,0.12) 0%, transparent 70%); bottom: 0; left: 35%; filter: blur(70px); }
  }

  & .faq-hero__content {
    max-width: 700px;
    margin: 0 auto var(--space-lg);
    position: relative;
    & h1 { margin-bottom: 0.875rem; }
    & p { font-size: 1.05rem; }
  }

  & .faq-hero__nav-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    position: relative;
  }

  & .faq-hero__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--clr-surface);
    color: var(--clr-text);
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--clr-border);
    box-shadow: var(--shadow-xs);
    transition: background var(--transition-base), color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);

    &:hover {
      background: var(--clr-primary);
      color: #fff;
      box-shadow: 0 4px 16px rgba(91,63,212,0.25);
      transform: translateY(-2px);
    }

    & i { color: var(--clr-primary); transition: color var(--transition-base); }
    &:hover i { color: rgba(255,255,255,0.85); }
  }
}

/* ========================
   FAQ SECTION
======================== */
.faq-section {
  padding: var(--space-3xl) var(--space-md);
  background: var(--clr-bg);
  position: relative;

  &.faq-section--alt {
    background: var(--clr-surface);
  }

  & .faq-section__blobs {
    position: absolute; inset: 0; pointer-events: none; overflow: hidden;

    & .faq-section__blob--1 { position: absolute; width: 400px; height: 400px; background: radial-gradient(circle, rgba(91,63,212,0.10) 0%, transparent 70%); top: -60px; right: -60px; filter: blur(100px); }
    & .faq-section__blob--2 { position: absolute; width: 400px; height: 400px; background: radial-gradient(circle, rgba(46,196,182,0.10) 0%, transparent 70%); bottom: -60px; left: -60px; filter: blur(100px); }
    & .faq-section__blob--3 { position: absolute; width: 380px; height: 380px; background: radial-gradient(circle, rgba(255,107,107,0.09) 0%, transparent 70%); top: 50%; right: -60px; filter: blur(100px); }
    & .faq-section__blob--4 { position: absolute; width: 350px; height: 350px; background: radial-gradient(circle, rgba(255,179,71,0.10) 0%, transparent 70%); top: -40px; left: -40px; filter: blur(90px); }
  }

  & .faq-section__container {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
  }

  & .faq-section__header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
  }

  & .faq-section__icon {
    width: 60px;
    height: 60px;
    background: rgba(91,63,212,0.10);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--clr-primary);
    flex-shrink: 0;

    &.faq-section__icon--b { background: rgba(46,196,182,0.10); color: var(--clr-secondary); }
    &.faq-section__icon--c { background: rgba(255,179,71,0.12); color: var(--clr-accent-warm); }
    &.faq-section__icon--d { background: rgba(255,107,107,0.10); color: var(--clr-accent); }
  }

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

    @media (min-width: 768px) {
      grid-template-columns: 1fr 1fr;
    }

    &.faq-section__content--rev {
      @media (min-width: 768px) {
        & .faq-section__faqs { order: 0; }
        & .faq-section__image { order: 1; }
      }
    }
  }

  & .faq-section__image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    position: sticky;
    top: calc(var(--nav-height) + 1rem);

    & img {
      width: 100%;
      height: 360px;
      object-fit: cover;
      display: block;
    }
  }

  & .faq-section__faqs {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  & .faq-section__item {
    background: var(--clr-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--clr-border-light);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--transition-base);

    &:hover { box-shadow: var(--shadow-sm); }
  }

  & .faq-section__question {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--clr-text);
    min-height: 56px;
    transition: background var(--transition-base);

    &:hover { background: rgba(91,63,212,0.03); }

    & i {
      color: var(--clr-primary);
      font-size: 0.8rem;
      flex-shrink: 0;
      transition: transform var(--transition-base);
    }

    &[aria-expanded="true"] i { transform: rotate(180deg); }
  }

  & .faq-section__answer {
    padding: 0 var(--space-md) var(--space-sm);
    display: none;

    &.is-open { display: block; }

    & p {
      font-size: 0.875rem;
      line-height: 1.7;
    }
  }
}

/* ========================
   CONTACT HERO
======================== */
.contact-hero {
  padding: calc(var(--nav-height) + var(--space-xl)) var(--space-md) var(--space-xl);
  text-align: center;
  position: relative;

  & .contact-hero__blobs {
    position: absolute; inset: 0; pointer-events: none; overflow: hidden;
    & .contact-hero__blob--1 { position: absolute; width: 420px; height: 420px; background: radial-gradient(circle, rgba(91,63,212,0.20) 0%, transparent 70%); top: -60px; left: -100px; filter: blur(90px); }
    & .contact-hero__blob--2 { position: absolute; width: 360px; height: 360px; background: radial-gradient(circle, rgba(46,196,182,0.16) 0%, transparent 70%); top: 20px; right: -80px; filter: blur(80px); }
    & .contact-hero__blob--3 { position: absolute; width: 280px; height: 280px; background: radial-gradient(circle, rgba(255,107,107,0.10) 0%, transparent 70%); bottom: 0; left: 40%; filter: blur(70px); }
  }

  & .contact-hero__content {
    max-width: 650px;
    margin: 0 auto;
    position: relative;
    & h1 { margin-bottom: 0.875rem; }
    & p { font-size: 1.05rem; }
  }
}

/* ========================
   CONTACT FORM SECTION
======================== */
.contact-form-section {
  padding: var(--space-xl) var(--space-md) var(--space-3xl);
  background: var(--clr-surface);

  & .contact-form-section__container {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    align-items: start;

    @media (min-width: 900px) {
      grid-template-columns: 1fr 1.5fr;
    }
  }

  & .contact-form-section__info {
    & h2 { margin-bottom: var(--space-md); }
  }

  & .contact-form-section__details {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: var(--space-md);
  }

  & .contact-form-section__detail {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;

    & .contact-form-section__detail-icon {
      width: 40px;
      height: 40px;
      background: rgba(91,63,212,0.08);
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--clr-primary);
      font-size: 0.95rem;
      flex-shrink: 0;
    }

    & div {
      display: flex;
      flex-direction: column;
      gap: 0.1rem;
    }

    & strong {
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--clr-text-light);
      font-family: var(--font-body);
    }

    & span, & a {
      font-size: 0.9rem;
      color: var(--clr-text-muted);
      line-height: 1.5;
    }

    & a:hover { color: var(--clr-primary); }
  }

  & .contact-form-section__note {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: rgba(91,63,212,0.05);
    border: 1px solid rgba(91,63,212,0.12);
    border-radius: var(--radius-md);
    padding: var(--space-sm);

    & i { color: var(--clr-primary); margin-top: 2px; flex-shrink: 0; }
    & p { font-size: 0.82rem; line-height: 1.55; }
  }

  & .contact-form-section__form-wrap {
    background: var(--clr-surface-tint);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--clr-border-light);
  }

  & .contact-form-section__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  & .contact-form-section__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm);

    @media (min-width: 600px) {
      grid-template-columns: 1fr 1fr;
    }
  }

  & .contact-form-section__field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;

    & label {
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--clr-text);

      & span { color: var(--clr-accent); }
    }

    & input, & textarea {
      width: 100%;
      padding: 0.75rem 1rem;
      background: var(--clr-surface);
      border: 1.5px solid var(--clr-border);
      border-radius: var(--radius-sm);
      font-family: var(--font-body);
      font-size: 0.9rem;
      color: var(--clr-text);
      transition: border-color var(--transition-base), box-shadow var(--transition-base);
      outline: none;
      min-height: 44px;

      &::placeholder { color: var(--clr-text-light); }

      &:focus {
        border-color: var(--clr-primary);
        box-shadow: 0 0 0 3px rgba(91,63,212,0.10);
      }

      &:invalid:not(:placeholder-shown) {
        border-color: var(--clr-accent);
      }
    }

    & textarea {
      resize: vertical;
      min-height: 130px;
      line-height: 1.6;
    }
  }

  & .contact-form-section__privacy {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;

    & input[type="checkbox"] {
      width: 18px;
      height: 18px;
      min-height: 18px;
      flex-shrink: 0;
      margin-top: 2px;
      accent-color: var(--clr-primary);
      cursor: pointer;
    }

    & label {
      font-size: 0.82rem;
      color: var(--clr-text-muted);
      line-height: 1.55;
      cursor: pointer;

      & a { color: var(--clr-primary); text-decoration: underline; }
      & span { color: var(--clr-accent); }
    }
  }

  & .contact-form-section__submit-row {
    padding-top: 0.25rem;
  }

  & .contact-form-section__submit {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, var(--clr-primary), var(--clr-primary-dark));
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0.875rem 1.75rem;
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(91,63,212,0.3);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    min-height: 48px;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 30px rgba(91,63,212,0.4);
    }

    &:active { transform: translateY(0); }
  }
}

/* ========================
   CONTACT MAP SECTION
======================== */
.contact-map-section {
  padding: var(--space-xl) var(--space-md) var(--space-3xl);
  background: var(--clr-bg);

  & .contact-map-section__container {
    max-width: 1100px;
    margin: 0 auto;
  }

  & .contact-map-section__header {
    margin-bottom: var(--space-lg);
    & h2 { margin-bottom: 0.5rem; }
    & p { font-size: 0.95rem; }
  }

  & .contact-map-section__map {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--clr-border-light);

    & iframe { display: block; }
  }
}

/* ========================
   CONTACT AREA SECTION
======================== */
.contact-area-section {
  padding: var(--space-3xl) var(--space-md);
  background: var(--clr-surface);
  position: relative;

  & .contact-area-section__blobs {
    position: absolute; inset: 0; pointer-events: none; overflow: hidden;
    & .contact-area-section__blob--1 { position: absolute; width: 450px; height: 450px; background: radial-gradient(circle, rgba(91,63,212,0.10) 0%, transparent 70%); top: -80px; right: -80px; filter: blur(100px); }
    & .contact-area-section__blob--2 { position: absolute; width: 380px; height: 380px; background: radial-gradient(circle, rgba(46,196,182,0.10) 0%, transparent 70%); bottom: -60px; left: -60px; filter: blur(90px); }
  }

  & .contact-area-section__container {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    align-items: start;
    position: relative;

    @media (min-width: 768px) {
      grid-template-columns: 1fr 1fr;
    }
  }

  & .contact-area-section__content {
    & h2 { margin-bottom: 0.875rem; }
    & p { margin-bottom: var(--space-sm); }
  }

  & .contact-area-section__map-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  & .contact-area-section__region {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    background: var(--clr-surface-tint);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
    border: 1px solid var(--clr-border-light);
    transition: box-shadow var(--transition-base), transform var(--transition-base);

    &:hover {
      box-shadow: var(--shadow-sm);
      transform: translateX(4px);
    }

    & .contact-area-section__region-icon {
      width: 42px;
      height: 42px;
      background: rgba(91,63,212,0.08);
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--clr-primary);
      font-size: 0.95rem;
      flex-shrink: 0;
    }

    & div {
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
    }

    & strong {
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--clr-text);
    }

    & span {
      font-size: 0.82rem;
      color: var(--clr-text-muted);
      line-height: 1.5;
    }
  }
}

/* ========================
   LEGAL MAIN
======================== */
.legal-main {
  padding-bottom: var(--space-3xl);

  & .legal-main__hero {
    padding: calc(var(--nav-height) + var(--space-xl)) var(--space-md) var(--space-xl);
    text-align: center;
    position: relative;
    overflow: hidden;

    & .legal-main__hero-blob--1 {
      position: absolute; width: 400px; height: 400px;
      background: radial-gradient(circle, rgba(91,63,212,0.18) 0%, transparent 70%);
      top: -80px; left: -100px; filter: blur(90px); pointer-events: none;
    }
    & .legal-main__hero-blob--2 {
      position: absolute; width: 350px; height: 350px;
      background: radial-gradient(circle, rgba(46,196,182,0.15) 0%, transparent 70%);
      top: 0; right: -80px; filter: blur(80px); pointer-events: none;
    }

    & h1 { position: relative; margin-bottom: 0.5rem; }
    & p { position: relative; color: var(--clr-text-muted); font-size: 0.9rem; }
  }

  & .legal-main__body {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 var(--space-md);
  }

  & .legal-main__section {
    margin-bottom: var(--space-xl);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--clr-border-light);
  }

  & .legal-main__summary {
    background: rgba(91,63,212,0.05);
    border-bottom: 1px solid var(--clr-border-light);
    padding: var(--space-sm) var(--space-md);
    font-size: 0.875rem;
    color: var(--clr-text-muted);
    line-height: 1.6;

    & strong {
      display: block;
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--clr-primary);
      margin-bottom: 0.3rem;
      font-family: var(--font-heading);
    }
  }

  & .legal-main__detail {
    background: var(--clr-surface);
    padding: var(--space-md) var(--space-lg);

    & p { font-size: 0.875rem; line-height: 1.75; margin-bottom: 0.75rem; }
    & p:last-child { margin-bottom: 0; }

    & ul {
      list-style: disc;
      padding-left: 1.5rem;
      margin: 0.5rem 0 0.75rem;

      & li {
        font-size: 0.875rem;
        color: var(--clr-text-muted);
        line-height: 1.65;
        margin-bottom: 0.3rem;

        & strong { font-weight: 600; color: var(--clr-text); }
      }
    }

    & a { color: var(--clr-primary); text-decoration: underline; }
  }
}

/* ========================
   LEGAL TERMS SPECIFIC
======================== */
.legal-main--terms {
  & .legal-main__body--terms {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 var(--space-md);
  }

  & .legal-main__terms-intro {
    background: var(--clr-surface);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-xl);
    border: 1px solid var(--clr-border-light);
    box-shadow: var(--shadow-xs);

    & p { font-size: 0.9rem; line-height: 1.7; }
  }

  & .legal-main__terms-section {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
    align-items: start;

    @media (max-width: 500px) {
      grid-template-columns: 1fr;
    }
  }

  & .legal-main__terms-letter {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    font-weight: 800;
    color: rgba(91,63,212,0.12);
    line-height: 1;
    padding-top: 0.5rem;

    @media (max-width: 500px) { font-size: 2.5rem; }
  }

  & .legal-main__terms-content {
    & h2 {
      font-size: 1.2rem;
      margin-bottom: 0.75rem;
    }

    & p { font-size: 0.875rem; line-height: 1.75; margin-bottom: 0.75rem; }
    & p:last-child { margin-bottom: 0; }

    & ul {
      list-style: disc;
      padding-left: 1.5rem;
      margin: 0.5rem 0 0.75rem;

      & li {
        font-size: 0.875rem;
        color: var(--clr-text-muted);
        line-height: 1.65;
        margin-bottom: 0.3rem;
      }
    }
  }

  & .legal-main__terms-summary-box {
    background: rgba(91,63,212,0.06);
    border-left: 3px solid var(--clr-primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--clr-primary);
    margin-bottom: var(--space-sm);
    line-height: 1.5;
  }
}

/* ========================
   LEGAL COOKIES SPECIFIC
======================== */
.legal-main--cookies {
  & .legal-main__body--cookies {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 var(--space-md);
  }

  & .legal-main__cookies-intro {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    background: var(--clr-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--clr-border-light);

    & .legal-main__cookies-intro-icon {
      width: 56px;
      height: 56px;
      background: rgba(91,63,212,0.08);
      border-radius: var(--radius-md);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      color: var(--clr-primary);
      flex-shrink: 0;
    }

    & h2 { font-size: 1.3rem; margin-bottom: 0.5rem; }
    & p { font-size: 0.875rem; line-height: 1.7; }
  }

  & .legal-main__cookies-table-heading {
    font-size: 1.4rem;
    margin-bottom: var(--space-md);
  }

  & .legal-main__cookies-category {
    margin-bottom: var(--space-lg);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--clr-border-light);
  }

  & .legal-main__cookies-category-header {
    padding: var(--space-sm) var(--space-md);
    background: var(--clr-surface-tint);
    border-bottom: 1px solid var(--clr-border-light);

    & p { font-size: 0.82rem; margin-top: 0.4rem; line-height: 1.55; }
  }

  & .legal-main__cookies-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);

    &.legal-main__cookies-badge--necessary {
      background: rgba(91,63,212,0.1);
      color: var(--clr-primary);
    }
    &.legal-main__cookies-badge--analytics {
      background: rgba(46,196,182,0.1);
      color: var(--clr-secondary-dark);
    }
    &.legal-main__cookies-badge--marketing {
      background: rgba(255,107,107,0.1);
      color: #d94f4f;
    }
  }

  & .legal-main__cookies-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--clr-surface);

    & thead tr {
      background: var(--clr-bg-alt);
    }

    & th, & td {
      padding: 0.75rem 1rem;
      text-align: left;
      font-size: 0.82rem;
      border-bottom: 1px solid var(--clr-border-light);
    }

    & th {
      font-weight: 600;
      color: var(--clr-text);
      font-family: var(--font-body);
      white-space: nowrap;
    }

    & td {
      color: var(--clr-text-muted);
      line-height: 1.5;
    }

    & code {
      background: rgba(91,63,212,0.07);
      color: var(--clr-primary);
      padding: 0.15rem 0.4rem;
      border-radius: 4px;
      font-size: 0.8rem;
      font-family: 'Courier New', monospace;
    }

    & tbody tr:last-child td { border-bottom: none; }
    & tbody tr:hover td { background: rgba(91,63,212,0.02); }
  }

  & .legal-main__cookies-manage {
    background: var(--clr-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--clr-border-light);

    & h2 { font-size: 1.3rem; margin-bottom: 0.75rem; }
    & > p { font-size: 0.875rem; margin-bottom: var(--space-md); }
  }

  & .legal-main__cookies-manage-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: var(--space-md);
  }

  & .legal-main__cookies-manage-option {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 0.75rem;
    background: var(--clr-surface-tint);
    border-radius: var(--radius-md);
    border: 1px solid var(--clr-border-light);

    & i {
      color: var(--clr-primary);
      font-size: 1rem;
      margin-top: 2px;
      width: 20px;
      flex-shrink: 0;
    }

    & div { display: flex; flex-direction: column; gap: 0.15rem; }

    & strong { font-size: 0.875rem; color: var(--clr-text); }
    & span { font-size: 0.8rem; color: var(--clr-text-muted); line-height: 1.5; }
  }

  & .legal-main__cookies-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, var(--clr-primary), var(--clr-primary-dark));
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(91,63,212,0.25);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    min-height: 44px;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(91,63,212,0.35);
    }
  }

  & .legal-main__cookies-contact {
    background: var(--clr-surface-tint);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    border: 1px solid var(--clr-border-light);

    & h2 { font-size: 1.3rem; margin-bottom: 0.75rem; }
    & p { font-size: 0.875rem; line-height: 1.7; }
    & a { color: var(--clr-primary); text-decoration: underline; }
  }
}

/* ========================
   THANKS PAGE
======================== */
.thanks-body {
  background: var(--clr-bg);
}

.thanks-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--nav-height) - 200px);
  padding: calc(var(--nav-height) + var(--space-xl)) var(--space-md) var(--space-xl);
  text-align: center;

  & .thanks-main__dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--clr-primary), var(--clr-secondary));
    margin: 0 auto var(--space-lg);
    animation: thanksDot 0.8s cubic-bezier(0.34,1.56,0.64,1) forwards;
    box-shadow: 0 4px 24px rgba(91,63,212,0.35);
  }

  & .thanks-main__heading {
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 800;
    margin-bottom: var(--space-sm);
    opacity: 0;
    animation: thanksFadeIn 0.6s ease forwards 0.7s;
  }

  & .thanks-main__sub {
    font-size: 1rem;
    color: var(--clr-text-muted);
    max-width: 440px;
    margin: 0 auto var(--space-xl);
    opacity: 0;
    animation: thanksFadeIn 0.6s ease forwards 0.9s;
    line-height: 1.6;
  }

  & .thanks-main__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(91,63,212,0.08);
    color: var(--clr-primary);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-full);
    border: 1px solid rgba(91,63,212,0.15);
    opacity: 0;
    animation: thanksFadeIn 0.6s ease forwards 1.2s;
    transition: background var(--transition-base), transform var(--transition-base);

    &:hover {
      background: rgba(91,63,212,0.14);
      transform: translateY(-2px);
    }
  }
}

@keyframes thanksDot {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.4); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes thanksFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ========================
   COOKIE CONSENT
======================== */
.cb-consent {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom) + 1rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  width: min(480px, calc(100vw - 2rem));
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-slow);

  &.is-visible {
    pointer-events: all;
    opacity: 1;
  }

  @media (max-width: 900px) {
    bottom: calc(env(safe-area-inset-bottom) + 72px);
  }
}

.cb-consent__card {
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 40px rgba(30,26,46,0.18), 0 2px 8px rgba(0,0,0,0.08);
  border: 1px solid var(--clr-border);
  overflow: hidden;
  transition: all var(--transition-slow) cubic-bezier(0.4,0,0.2,1);
}

.cb-consent__simple {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 1rem 1.25rem;
  flex-wrap: wrap;

  & p {
    flex: 1;
    font-size: 0.82rem;
    color: var(--clr-text-muted);
    line-height: 1.5;
    min-width: 160px;

    & a { color: var(--clr-primary); text-decoration: underline; }
  }

  & .cb-consent__btns {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
  }
}

.cb-consent__settings {
  padding: 1.25rem;

  & h4 {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--clr-text);
    font-family: var(--font-heading);
  }
}

.cb-consent__btn {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  min-height: 36px;
  transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);

  &:hover { transform: translateY(-1px); }

  &.cb-consent__btn--accept {
    background: linear-gradient(135deg, var(--clr-primary), var(--clr-primary-dark));
    color: #fff;
    box-shadow: 0 2px 10px rgba(91,63,212,0.25);

    &:hover { box-shadow: 0 4px 16px rgba(91,63,212,0.35); }
  }

  &.cb-consent__btn--settings {
    background: var(--clr-bg-alt);
    color: var(--clr-text-muted);

    &:hover { background: var(--clr-border); }
  }
}

.cb-consent__category {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--clr-border-light);

  &:last-of-type { border-bottom: none; }
}

.cb-consent__category-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;

  & strong { font-size: 0.85rem; color: var(--clr-text); }
  & span { font-size: 0.75rem; color: var(--clr-text-light); }
}

.cb-consent__toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;

  & input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
  }

  &.cb-consent__toggle--disabled { cursor: not-allowed; opacity: 0.7; }
}

.cb-consent__slider {
  position: absolute;
  inset: 0;
  background: var(--clr-border);
  border-radius: var(--radius-full);
  transition: background var(--transition-base);

  &::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform var(--transition-base);
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  }
}

.cb-consent__toggle input:checked + .cb-consent__slider {
  background: var(--clr-primary);
}

.cb-consent__toggle input:checked + .cb-consent__slider::before {
  transform: translateX(20px);
}

.cb-consent__settings-btns {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

/* ========================
   SWIPER OVERRIDES
======================== */
.swiper-pagination-bullet-active {
  background: var(--clr-primary) !important;
}

.swiper-button-prev, .swiper-button-next {
  color: var(--clr-primary) !important;
}

/* ========================
   UTILITY
======================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* ========================
   RESPONSIVE OVERFLOW GUARD
======================== */
@media (max-width: 480px) {
  .home-how-it-works__steps {
    gap: var(--space-lg);
  }

  .faq-section__content {
    grid-template-columns: 1fr !important;
  }

  .faq-section__image {
    position: static !important;
  }

  .pojmy-glossary__group {
    grid-template-columns: 1fr;
  }

  .legal-main__cookies-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 360px) {
  :root {
    --space-md: 1.25rem;
    --space-lg: 2rem;
  }
}