font-family: "Vinila";
      src: url("../fonts/VinilaRegular.woff2") format("woff2");
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: "Vinila";
      src: url("../fonts/VinilaBold.woff2") format("woff2");
      font-weight: 700;
      font-style: normal;
      font-display: swap;
    }

    :root {
      --bg: #f5f7f9;
      --ink: #0d0f18;
      --fg: #f5f7f9;
      --accent: #ffcf24;
      --line: rgba(13, 15, 24, 0.1);
      --section-px: 64px;
      --stage-gap: 28px;
      --stage-radius: 32px;
      --header-top: 28px;
      --header-h: 56px;
      --header-side: 20px;
      --corner-cut: 20px;
      --nav-island-w: auto;
      --button-radius: 18px;
      --button-h: 42px;
      --button-gap: 9px;
      --button-pad-x: 24px;
      --button-hover-bg: #000;
      --button-shadow: none;
      --button-hover-shadow: 0 14px 34px rgba(13, 15, 24, 0.24);
      --button-transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
      --slider-gap: 20px;
      --slider-pad-top: 28px;
      --slider-bleed-top: 34px;
      --slider-bleed-bottom: 64px;
      --slider-pad-end: 120px;
    }

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

    html {
      margin: 0;
      background: var(--bg);
      color: var(--ink);
      font-family: "Vinila", system-ui, sans-serif;
      font-synthesis: none;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    body {
      margin: 0;
      overflow-x: hidden;
      font-synthesis: none;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    a { color: inherit; text-decoration: none; }
    button { font: inherit; cursor: pointer; border: 0; background: none; }

    a,
    button,
    a *,
    button * {
      font-weight: 400;
      font-synthesis: none;
    }

    .site-header {
      position: fixed;
      z-index: 40;
      top: var(--header-top);
      left: 0;
      right: 0;
      color: var(--ink);
      pointer-events: none;
      display: flex;
      justify-content: center;
    }

    .header-inner {
      position: relative;
      width: auto;
      height: var(--header-h);
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 28px;
      background: var(--bg);
      border-radius: 0 0 20px 20px;
      box-shadow: none;
      pointer-events: auto;
    }

    .header-inner::before,
    .header-inner::after {
      content: "";
      position: absolute;
      top: 0;
      width: var(--header-side);
      height: var(--header-side);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      pointer-events: none;
    }

    .header-inner::before {
      right: 100%;
      background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 20C20 8.954 11.046 0 0 0H20V20Z' fill='%23f5f7f9'/%3E%3C/svg%3E");
    }

    .header-inner::after {
      left: 100%;
      background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 20C0 8.954 8.954 0 20 0H0V20Z' fill='%23f5f7f9'/%3E%3C/svg%3E");
    }

    .hero-fixed-brand,
    .brand-mark {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: fit-content;
      height: auto;
      line-height: 0;
    }

    .hero-fixed-brand {
      position: absolute;
      z-index: 45;
      top: 24px;
      left: var(--section-px);
      height: var(--header-h);
      pointer-events: auto;
    }

    .hero-fixed-brand img,
    .brand-mark img {
      display: block;
      width: auto;
      height: 48px;
      filter: brightness(0) invert(1);
    }

    .hero-fixed-cta-wrap {
      position: absolute;
      z-index: 45;
      top: calc((var(--header-h) - 42px) / 2 + 24px);
      right: var(--section-px);
      pointer-events: auto;
    }

    .hero-fixed-cta {
      display: inline-flex;
    }

    /* Event page: logo + CTA pulled inside the hero card edges */
    .site-header--event .hero-fixed-brand {
      left: max(var(--section-px), calc(50% - 640px + 32px));
    }

    .site-header--event .hero-fixed-cta-wrap {
      right: max(var(--section-px), calc(50% - 640px + 32px));
    }

    /* ── Location picker ── */
    .loc-picker {
      position: relative;
      display: inline-flex;
    }

    .loc-panel {
      position: absolute;
      top: calc(100% + 10px);
      right: 0;
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 8px;
      background: #fff;
      border-radius: 20px;
      min-width: 220px;
      box-shadow: 0 12px 40px rgba(13,15,24,0.14);
      clip-path: inset(0 0 100% 0 round 20px);
      transition: clip-path 380ms cubic-bezier(0.22, 1, 0.36, 1);
      pointer-events: none;
      z-index: 10;
    }

    .loc-picker.is-open .loc-panel {
      clip-path: inset(0 0 -2% 0 round 20px);
      pointer-events: all;
    }

    .loc-link {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      height: 40px;
      padding: 0 20px;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 400;
      line-height: 1;
      white-space: nowrap;
      text-decoration: none;
      background: var(--ink);
      color: var(--fg);
      overflow: hidden;
      transition: background 180ms ease, color 180ms ease;
    }

    .loc-link:hover,
    .loc-link:focus-visible {
      background: #000;
    }

    /* hero-card variant: panel aligns left, full width */
    .hero-card .loc-picker {
      width: 100%;
    }
    .hero-card .loc-picker .loc-trigger {
      width: 100%;
    }
    .hero-card .loc-panel {
      right: auto;
      left: 0;
      min-width: 100%;
    }

    .nav-links {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: clamp(18px, 2vw, 32px);
      min-width: 0;
    }

    .nav-links a,
    .nav-trigger {
      font-size: 14px;
      font-weight: 400;
      line-height: 1;
      padding: 4px 0;
      white-space: nowrap;
    }

    .nav-links a:hover,
    .nav-links a:focus-visible,
    .nav-trigger:hover,
    .nav-trigger:focus-visible {
      outline: none;
    }

    .nav-links a,
    .nav-trigger {
      color: var(--ink);
      opacity: 1;
    }

    .link-label {
      position: relative;
      display: inline-block;
      overflow: hidden;
      line-height: 1;
      vertical-align: top;
    }

    .link-label span {
      display: block;
      transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
      will-change: transform;
    }

    .link-label::after {
      content: attr(data-text);
      position: absolute;
      left: 0;
      top: 100%;
      white-space: nowrap;
      transform: translateY(0);
      transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
      will-change: transform;
    }

    .nav-links > a:hover .link-label span,
    .nav-links > a:focus-visible .link-label span,
    .nav-trigger:hover .link-label span,
    .nav-trigger:focus-visible .link-label span,
    .nav-item:hover .nav-trigger .link-label span,
    .nav-item:focus-within .nav-trigger .link-label span {
      transform: translateY(-110%);
    }

    .nav-links > a:hover .link-label::after,
    .nav-links > a:focus-visible .link-label::after,
    .nav-trigger:hover .link-label::after,
    .nav-trigger:focus-visible .link-label::after,
    .nav-item:hover .nav-trigger .link-label::after,
    .nav-item:focus-within .nav-trigger .link-label::after {
      transform: translateY(-100%);
    }

    .nav-links a:hover,
    .nav-links a:focus-visible,
    .nav-trigger:hover,
    .nav-trigger:focus-visible {
      opacity: 1;
    }

    .nav-item {
      position: static;
      display: inline-flex;
    }

    .nav-trigger {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .nav-trigger svg {
      transition: transform 180ms ease;
    }

    .nav-item:hover .nav-trigger svg,
    .nav-item:focus-within .nav-trigger svg,
    .nav-item.is-open .nav-trigger svg {
      transform: rotate(180deg);
    }

    .nav-dropdown {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      column-gap: 48px;
      row-gap: 34px;
      position: absolute;
      top: calc(100% + 14px);
      left: 50%;
      width: min(680px, calc(100vw - 96px));
      min-width: 0;
      margin: 0;
      padding: 34px 44px;
      list-style: none;
      background: #f5f7f9;
      border: 0;
      border-radius: 20px;
      box-shadow: 0 22px 60px rgba(13, 15, 24, 0.14);
      transform: translateX(-50%);
      pointer-events: none;
      clip-path: inset(0 0 100% 0 round 20px);
      transition: clip-path 380ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .nav-dropdown::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: -18px;
      height: 18px;
    }

    .nav-item:hover .nav-dropdown,
    .nav-item:focus-within .nav-dropdown,
    .nav-item.is-open .nav-dropdown {
      clip-path: inset(0 0 -2% 0 round 20px);
      pointer-events: auto;
    }

    .nav-dropdown.is-school {
      width: min(520px, calc(100vw - 96px));
    }

    .nav-dropdown a {
      display: block;
      width: 100%;
      padding: 0;
      border-radius: 0;
      color: var(--ink);
      font-size: 14px;
      line-height: 1.2;
    }

    .nav-dropdown a:hover,
    .nav-dropdown a:focus-visible {
      color: var(--ink);
      background: transparent;
      opacity: 0.62;
    }

    .nav-cta,
    .btn-primary,
    .btn-outline,
    .about-button,
    .news-cta-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--button-gap);
      height: var(--button-h);
      min-height: var(--button-h);
      width: fit-content;
      padding: 0 var(--button-pad-x);
      border-radius: var(--button-radius);
      font-size: 14px;
      font-weight: 400;
      line-height: 1;
      white-space: nowrap;
      overflow: hidden;
      transition: var(--button-transition);
    }

    .icon-arrow {
      width: 18px;
      height: 18px;
      flex: 0 0 18px;
      stroke-width: 1;
      transition: none;
    }

    .button-label {
      position: relative;
      display: inline-block;
      overflow: hidden;
      line-height: 1;
      vertical-align: top;
      white-space: nowrap;
      font-family: inherit;
      font-size: inherit;
      font-weight: 400;
      font-synthesis: none;
      -webkit-font-smoothing: antialiased;
    }

    .button-label span {
      display: block;
      font: inherit;
      font-weight: 400;
      transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
      will-change: transform;
    }

    .button-label::after {
      content: attr(data-text);
      position: absolute;
      left: 0;
      top: 100%;
      white-space: nowrap;
      transform: translateY(0);
      font: inherit;
      font-weight: 400;
      transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
      will-change: transform;
    }

    .nav-cta:hover .button-label span,
    .nav-cta:focus-visible .button-label span,
    .loc-link:hover .button-label span,
    .loc-link:focus-visible .button-label span,
    .btn-primary:hover .button-label span,
    .btn-primary:focus-visible .button-label span,
    .btn-outline:hover .button-label span,
    .btn-outline:focus-visible .button-label span,
    .about-button:hover .button-label span,
    .about-button:focus-visible .button-label span,
    .about-link-button:hover .button-label span,
    .about-link-button:focus-visible .button-label span,
    .news-card-link:hover .button-label span,
    .news-card-link:focus-visible .button-label span,
    .news-cta-wrap a:hover .button-label span,
    .news-cta-wrap a:focus-visible .button-label span,
    .benefits-more:hover .button-label span,
    .benefits-more:focus-visible .button-label span,
    .location-primary:hover .button-label span,
    .location-primary:focus-visible .button-label span,
    .location-link:hover .button-label span,
    .location-link:focus-visible .button-label span {
      transform: translateY(-110%);
    }

    .nav-cta:hover .button-label::after,
    .nav-cta:focus-visible .button-label::after,
    .loc-link:hover .button-label::after,
    .loc-link:focus-visible .button-label::after,
    .btn-primary:hover .button-label::after,
    .btn-primary:focus-visible .button-label::after,
    .btn-outline:hover .button-label::after,
    .btn-outline:focus-visible .button-label::after,
    .about-button:hover .button-label::after,
    .about-button:focus-visible .button-label::after,
    .about-link-button:hover .button-label::after,
    .about-link-button:focus-visible .button-label::after,
    .news-card-link:hover .button-label::after,
    .news-card-link:focus-visible .button-label::after,
    .news-cta-wrap a:hover .button-label::after,
    .news-cta-wrap a:focus-visible .button-label::after,
    .benefits-more:hover .button-label::after,
    .benefits-more:focus-visible .button-label::after,
    .location-primary:hover .button-label::after,
    .location-primary:focus-visible .button-label::after,
    .location-link:hover .button-label::after,
    .location-link:focus-visible .button-label::after {
      transform: translateY(-100%);
    }

    .nav-cta,
    .btn-primary,
    .about-button,
    .news-cta-button {
      background: var(--ink);
      color: var(--fg);
      box-shadow: var(--button-shadow);
    }

    .nav-cta:hover,
    .nav-cta:focus-visible,
    .btn-primary:hover,
    .btn-primary:focus-visible,
    .about-button:hover,
    .about-button:focus-visible,
    .news-cta-button:hover,
    .news-cta-button:focus-visible {
      background: var(--button-hover-bg);
      color: var(--fg);
      box-shadow: var(--button-hover-shadow);
    }

    .btn-outline {
      background: rgba(245, 247, 249, 0.96);
      border: 1.5px solid rgba(245, 247, 249, 0.96);
      color: var(--ink);
    }

    .btn-outline:hover,
    .btn-outline:focus-visible {
      color: var(--fg);
      background: var(--ink);
      border-color: var(--ink);
    }

    .menu-btn {
      display: none;
      width: 44px;
      height: 44px;
      margin-left: auto;
      padding: 12px;
      color: var(--ink);
    }

    .menu-btn i {
      display: block;
      height: 1.5px;
      margin: 5px 0;
      background: currentColor;
      transition: transform 180ms ease, opacity 180ms ease;
    }

    .menu-btn[aria-expanded="true"] i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
    .menu-btn[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
    .menu-btn[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

    .hero {
      position: relative;
      min-height: 480px;
      height: calc(80svh - (var(--stage-gap) * 2));
      margin: var(--stage-gap);
      overflow: hidden;
      color: var(--fg);
      background: var(--ink);
      border-radius: var(--stage-radius);
    }

    .hero-media {
      position: absolute;
      z-index: 0;
      inset: 0;
      overflow: hidden;
    }

    .hero-media video {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
    }

    .hero-content {
      position: relative;
      z-index: 3;
      width: 100%;
      max-width: 1920px;
      height: 100%;
      margin-inline: auto;
      padding: calc(var(--header-top) + var(--header-h) + 56px) var(--section-px) clamp(52px, 9vh, 96px);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      pointer-events: none;
    }

    .title-block {
      max-width: 980px;
      pointer-events: auto;
    }

    .brand-line {
      display: block;
      width: fit-content;
      margin: 0 auto 18px;
      padding: 0;
      font-size: clamp(15px, 1.15vw, 20px);
      font-weight: 400;
      color: var(--fg);
      text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
    }

    .hero-title {
      max-width: 920px;
      margin: 0;
      font-size: clamp(54px, 6.4vw, 118px);
      font-weight: 400;
      line-height: 0.94;
      text-wrap: balance;
      text-shadow: 0 3px 28px rgba(0, 0, 0, 0.42);
    }

    .hero-card {
      pointer-events: auto;
      margin-top: 34px;
      color: var(--fg);
      background: transparent;
      border-radius: 0;
      padding: 0;
      box-shadow: none;
    }

    .hero-card p {
      max-width: 660px;
      margin: 0 auto 24px;
      color: rgba(245, 247, 249, 0.86);
      font-size: clamp(17px, 1.35vw, 22px);
      line-height: 1.26;
      font-weight: 400;
      text-shadow: 0 2px 18px rgba(0, 0, 0, 0.36);
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
    }

    .hero-card .btn-outline {
      color: var(--ink);
      background: var(--fg);
      border-color: var(--fg);
    }

    .hero-card .btn-outline:hover,
    .hero-card .btn-outline:focus-visible {
      color: var(--fg);
      background: var(--ink);
      border-color: var(--ink);
    }

    /* ── Abra Familia ── */
    .marquee-wrap {
      overflow: hidden;
      padding: 72px 0 0;
      user-select: none;
    }
    .marquee-track {
      display: flex;
      width: max-content;
      animation: marquee-run 22s linear infinite;
    }
    .marquee-track:hover { animation-play-state: paused; }
    .marquee-item {
      display: flex;
      align-items: center;
      gap: 0.5em;
      padding-right: 0.5em;
      font-size: clamp(64px, 9vw, 140px);
      font-weight: 400;
      line-height: 1;
      white-space: nowrap;
      color: var(--ink);
      opacity: 0.06;
    }
    .marquee-dot {
      display: inline-block;
      width: 0.22em;
      height: 0.22em;
      background: var(--accent);
      border-radius: 50%;
      opacity: 1;
      flex-shrink: 0;
    }
    @keyframes marquee-run {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
    .familia-section {
      padding: 0 0 96px;
      max-width: 1920px;
      margin: -32px auto 0;
      position: relative;
      z-index: 1;
    }
    .familia-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      align-items: center;
      padding-top: 48px;
      padding-left: var(--section-px);
      padding-right: var(--section-px);
    }

    /* ── Scroll-expand photo ── */
    .familia-photo-wrap {
      margin: 72px auto 0;
      width: 50vw;
      border-radius: 20px;
      overflow: hidden;
      aspect-ratio: 16 / 9;
      will-change: width, border-radius;
      display: block;
    }
    .familia-photo-wrap img,
    .familia-photo-wrap .photo-placeholder {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .familia-photo-wrap .photo-placeholder {
      background: #0d0f18;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(245,247,249,0.25);
      font-size: 14px;
      font-weight: 400;
    }
    @media (max-width: 640px) {
      .familia-photo-wrap { width: 90vw; border-radius: 16px; }
    }
    .familia-card {
      background: var(--ink);
      color: var(--bg);
      border-radius: 28px;
      padding: 44px 40px 40px;
      position: relative;
      overflow: hidden;
      transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                  box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
      cursor: default;
    }
    .familia-card:nth-child(1) { transform: rotate(-4deg) translateY(16px); }
    .familia-card:nth-child(2) {
      transform: rotate(3deg) translateY(-8px);
      background: var(--accent);
      color: var(--ink);
    }
    .familia-card:nth-child(3) { transform: rotate(-2.5deg) translateY(24px); }
    .familia-card:hover {
      transform: rotate(0deg) translateY(0) scale(1.02);
      box-shadow: 0 32px 64px rgba(13, 15, 24, 0.18);
      z-index: 2;
    }
    .card-number {
      position: absolute;
      bottom: -16px;
      right: 12px;
      font-size: 160px;
      font-weight: 400;
      line-height: 1;
      color: rgba(255, 255, 255, 0.06);
      pointer-events: none;
      user-select: none;
    }
    .familia-card:nth-child(2) .card-number { color: rgba(13, 15, 24, 0.07); }
    .card-tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 400;
      opacity: 0.5;
      margin-bottom: 28px;
    }
    .card-tag::before {
      content: '';
      display: block;
      width: 18px;
      height: 1px;
      background: currentColor;
    }
    .familia-card:nth-child(2) .card-tag { opacity: 0.6; }
    .card-h {
      font-size: clamp(20px, 1.8vw, 28px);
      font-weight: 400;
      line-height: 1.15;
      margin: 0 0 20px;
    }
    .card-body {
      font-size: clamp(14px, 1.1vw, 16px);
      font-weight: 400;
      line-height: 1.65;
      opacity: 0.72;
      margin: 0;
    }
    .familia-card:nth-child(2) .card-body { opacity: 0.75; }
    @media (max-width: 1024px) {
      .familia-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        max-width: 560px;
        margin: 0 auto;
      }
      .familia-card:nth-child(1),
      .familia-card:nth-child(2),
      .familia-card:nth-child(3) { transform: rotate(0deg) translateY(0); }
      .familia-card:hover { transform: scale(1.01); }
    }
    @media (max-width: 640px) {
      .marquee-wrap { padding-top: 48px; }
      .familia-section { padding-bottom: 64px; }
      .familia-grid {
        padding-top: 32px;
        gap: 0;
      }
      .card-number { font-size: 100px; }

      /* Sticky stack na mobile */
      .familia-card {
        position: sticky;
        margin-bottom: 18px;
      }
      .familia-card:nth-child(1) { top: 200px; z-index: 1; }
      .familia-card:nth-child(2) { top: 224px; z-index: 2; }
      .familia-card:nth-child(3) { top: 248px; z-index: 3; }
      .familia-card:hover { transform: none; }
    }

    /* ── Benefits stack ── */
    .benefits-section {
      position: relative;
      padding: clamp(80px, 11vw, 136px) var(--section-px);
      background: var(--bg);
      color: var(--ink);
      overflow: clip;
    }

    .benefits-shell {
      position: relative;
      max-width: 1920px;
      margin: 0 auto;
      display: block;
    }

    .benefits-copy {
      max-width: 820px;
      margin: 0 auto;
      text-align: center;
    }

    .benefits-eyebrow {
      display: block;
      margin-bottom: 12px;
      color: rgba(13, 15, 24, 0.42);
      font-size: 11px;
      font-weight: 400;
    }

    .benefits-title {
      margin: 0;
      color: var(--ink);
      font-size: clamp(32px, 4vw, 56px);
      font-weight: 400;
      line-height: 0.94;
      text-wrap: balance;
    }

    .benefits-lead {
      margin: 24px auto 0;
      max-width: 640px;
      color: rgba(13, 15, 24, 0.58);
      font-size: clamp(16px, 1.2vw, 20px);
      font-weight: 400;
      line-height: 1.45;
    }

    .benefits-stage {
      position: relative;
      width: 100%;
      height: 760px;
      margin-top: 96px;
    }

    .benefits-card {
      position: absolute;
      left: 50%;
      top: 50%;
      width: min(560px, calc((100vw - var(--section-px) * 2 - 28px) / 2));
      min-height: 158px;
      padding: 24px 24px 26px;
      border-radius: 20px;
      background: #ffffff;
      color: var(--ink);
      box-shadow:
        0 28px 34px -24px rgba(13, 15, 24, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.48);
      transform:
        translate(calc(-50% + var(--benefit-x, 0px)), calc(-50% + var(--benefit-y, 0px)))
        rotate(var(--benefit-hover-r, var(--benefit-r, 0deg)));
      transform-origin: 50% 58%;
      will-change: transform, opacity;
      transition:
        transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 420ms cubic-bezier(0.22, 1, 0.36, 1),
        background 420ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .benefits-card:hover {
      --benefit-hover-r: 0deg;
      box-shadow:
        0 34px 38px -26px rgba(13, 15, 24, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.56);
    }

    .benefits-card:nth-child(2),
    .benefits-card:nth-child(5) {
      background: var(--accent);
    }

    .benefits-card:nth-child(3),
    .benefits-card:nth-child(7) {
      background: var(--ink);
      color: var(--bg);
    }

    .benefits-card-kicker {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 30px;
      height: 24px;
      margin-bottom: 18px;
      border-radius: 999px;
      background: rgba(13, 15, 24, 0.08);
      color: currentColor;
      font-size: 11px;
      font-weight: 400;
      line-height: 1;
    }

    .benefits-card:nth-child(3) .benefits-card-kicker,
    .benefits-card:nth-child(7) .benefits-card-kicker {
      background: rgba(245, 247, 249, 0.12);
    }

    .benefits-card h3 {
      margin: 0;
      font-size: clamp(18px, 1.55vw, 24px);
      font-weight: 400;
      line-height: 1.16;
      text-wrap: balance;
    }

    .benefits-more {
      display: inline-flex;
      align-items: center;
      flex-wrap: nowrap;
      gap: 8px;
      margin-top: 22px;
      border: 0;
      padding: 0;
      background: transparent;
      color: currentColor;
      font: inherit;
      font-size: 14px;
      font-weight: 400;
      line-height: 1;
      cursor: pointer;
      opacity: 0.72;
      overflow: hidden;
      white-space: nowrap;
      transition: opacity 180ms ease;
    }

    .benefits-more:hover {
      opacity: 1;
    }

    .benefits-more:hover .button-label span,
    .benefits-more:focus-visible .button-label span {
      transform: translateY(-110%);
    }

    .benefits-more:hover .button-label::after,
    .benefits-more:focus-visible .button-label::after {
      transform: translateY(-100%);
    }

    .benefits-more .icon-arrow {
      width: 17px;
      height: 17px;
      flex: 0 0 17px;
    }

    .benefits-modal {
      position: fixed;
      inset: 0;
      z-index: 80;
      display: grid;
      place-items: center;
      padding: 24px;
      background: transparent;
      backdrop-filter: none;
      opacity: 0;
      pointer-events: none;
      transition: opacity 260ms ease;
    }

    .benefits-modal.is-open {
      opacity: 1;
      pointer-events: auto;
    }

    .benefits-dialog {
      position: relative;
      width: min(620px, 100%);
      border: 1px solid rgba(255, 255, 255, 0.42);
      border-radius: 28px;
      padding: clamp(28px, 4vw, 46px);
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.42));
      box-shadow:
        0 34px 80px -36px rgba(13, 15, 24, 0.62),
        inset 0 1px 0 rgba(255, 255, 255, 0.62);
      color: var(--ink);
      backdrop-filter: blur(26px) saturate(1.18);
      transform: translateY(18px) scale(0.98);
      transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .benefits-modal.is-open .benefits-dialog {
      transform: translateY(0) scale(1);
    }

    .benefits-modal-kicker {
      display: block;
      margin-bottom: 16px;
      color: rgba(13, 15, 24, 0.52);
      font-size: 11px;
      font-weight: 400;
    }

    .benefits-modal h3 {
      margin: 0;
      max-width: 520px;
      font-size: clamp(22px, 2.4vw, 32px);
      font-weight: 400;
      line-height: 1.08;
      text-wrap: balance;
    }

    .benefits-modal p {
      margin: 22px 0 0;
      color: rgba(13, 15, 24, 0.86);
      font-size: clamp(15px, 1.05vw, 17px);
      font-weight: 400;
      line-height: 1.48;
    }

    .benefits-modal-close {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 40px;
      height: 40px;
      border: 1px solid rgba(13, 15, 24, 0.12);
      border-radius: 999px;
      background: rgba(245, 247, 249, 0.52);
      color: var(--ink);
      font-size: 22px;
      line-height: 1;
      cursor: pointer;
    }

    @media (max-width: 1180px) {
      .benefits-section {
        min-height: auto;
      }

      .benefits-shell {
        position: relative;
        top: auto;
        min-height: 0;
      }

      .benefits-copy {
        max-width: 680px;
      }

      .benefits-stage {
        height: auto;
        min-height: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
      }

      .benefits-card {
        position: relative;
        left: auto;
        top: auto;
        width: auto;
        min-height: 150px;
        transform: none !important;
      }
    }

    @media (max-width: 640px) {
      .benefits-section {
        padding-top: 64px;
        padding-bottom: 64px;
      }

      .benefits-stage {
        grid-template-columns: 1fr;
        gap: 0;
      }

      /* Sticky stack na mobile */
      .benefits-card {
        position: sticky !important;
        margin-bottom: 18px;
        transform: none !important;
      }
      .benefits-stage .benefits-card:nth-child(1) { top: 200px; z-index: 1; }
      .benefits-stage .benefits-card:nth-child(2) { top: 224px; z-index: 2; }
      .benefits-stage .benefits-card:nth-child(3) { top: 248px; z-index: 3; }
      .benefits-stage .benefits-card:nth-child(4) { top: 272px; z-index: 4; }
      .benefits-stage .benefits-card:nth-child(5) { top: 296px; z-index: 5; }
      .benefits-stage .benefits-card:nth-child(6) { top: 320px; z-index: 6; }
      .benefits-card:hover { transform: none !important; }
    }

    .below {
      padding: clamp(56px, 8vh, 96px) var(--section-px);
      background: var(--bg);
      color: var(--ink);
    }

    .below p {
      max-width: 780px;
      margin: 0;
      font-size: clamp(24px, 3vw, 48px);
      line-height: 1.04;
      font-weight: 400;
    }

    @media (max-width: 1180px) {
      :root {
        --section-px: 32px;
        --header-h: 52px;
        --header-side: 20px;
        --corner-cut: 20px;
      }

      .header-inner {
        width: auto;
        padding: 0 22px;
        border-radius: 0 0 20px 20px;
      }

      .header-inner::before,
      .header-inner::after {
        width: var(--header-side);
        height: var(--header-side);
      }

      .nav-links { display: none; }
      .hero-fixed-cta-wrap { display: none; }
      .menu-btn {
        display: block;
      }

      .nav-links.is-open {
        display: flex;
        position: fixed;
        top: calc(var(--header-h) + 8px);
        left: var(--section-px);
        right: var(--section-px);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 12px 16px 18px;
        background: rgba(245, 247, 249, 0.98);
        border: 1px solid rgba(13, 15, 24, 0.08);
        border-radius: 18px;
        box-shadow: 0 18px 50px rgba(13, 15, 24, 0.16);
        backdrop-filter: blur(18px);
      }

      .nav-links.is-open a,
      .nav-links.is-open .nav-trigger {
        width: 100%;
        justify-content: space-between;
        padding: 7px 0;
        border-bottom: 1px solid rgba(13, 15, 24, 0.08);
        font-size: 16px;
      }

      .nav-links.is-open .nav-item {
        display: block;
        width: 100%;
      }

      .nav-links.is-open .nav-dropdown {
        position: static;
        display: none;
        min-width: 0;
        width: 100%;
        margin: 0;
        padding: 0 0 8px 14px;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        transform: none;
        backdrop-filter: none;
        clip-path: none;
        transition: none;
        pointer-events: auto;
      }

      .nav-links.is-open .nav-item.is-open .nav-dropdown {
        display: block;
      }

      .nav-links.is-open .nav-dropdown::before { display: none; }

      .nav-links.is-open .nav-dropdown a {
        padding: 10px 0;
        font-size: 14px;
        color: var(--ink);
        border-bottom: 0;
      }

      .hero-content {
        grid-template-columns: 1fr;
        align-content: end;
      }

      .hero-card {
        max-width: 520px;
      }
    }

    @media (max-width: 640px) {
      :root {
        --section-px: 16px;
        --header-h: 50px;
        --header-top: 16px;
        --header-side: 20px;
      }

      .header-inner {
        padding: 0 14px;
        border-radius: 0 0 20px 20px;
      }

      .header-inner::before,
      .header-inner::after {
        display: none;
      }

      .hero-fixed-brand {
        top: 0;
        left: var(--section-px);
        height: var(--header-h);
      }

      .hero-fixed-brand img { height: 44px; }

      .hero {
        min-height: 620px;
      }

      .hero-stage {
        margin: 16px;
      }

      .hero-content {
        padding-top: calc(var(--header-top) + var(--header-h) + 24px);
        padding-bottom: 18px;
      }

      .brand-line {
        font-size: 17px;
      }

      .hero-title {
        font-size: clamp(42px, 13vw, 70px);
      }

      .hero-card {
        padding: 14px;
        border-radius: 18px;
      }

      .hero-card p {
        font-size: 20px;
      }

      .hero-actions {
        flex-direction: column;
      }

      .btn-primary,
      .btn-outline {
        width: 100%;
      }
    }

    /* ── News slider ── */
    .news-section {
      padding: clamp(72px, 10vw, 120px) 0 clamp(72px, 10vw, 120px) 0;
      overflow-x: clip;
      overflow-y: visible;
    }

    .news-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      padding: 0 var(--section-px);
      margin-bottom: 40px;
    }

    .news-head-left {}

    .news-eyebrow {
      display: block;
      font-size: 11px;
      font-weight: 400;
      color: var(--ink);
      opacity: 0.4;
      margin-bottom: 10px;
    }

    .news-heading {
      margin: 0;
      font-size: clamp(30px, 3.4vw, 48px);
      font-weight: 400;
      line-height: 1;
      color: var(--ink);
    }

    .slider-arrows {
      display: flex;
      gap: 8px;
      flex-shrink: 0;
    }

    .slider-arrow {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--ink);
      color: var(--bg);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background 0.22s, opacity 0.22s;
      flex-shrink: 0;
    }

    .slider-arrow-icon {
      width: 20px;
      height: 20px;
      stroke-width: 1;
    }

    .slider-arrow:hover { background: #2a2d3f; }
    .slider-arrow:disabled { opacity: 0.25; cursor: default; }

    .slider-outer {
      position: relative;
      cursor: grab;
      touch-action: pan-y;
      overflow-x: auto;
      overflow-y: visible;
      padding: var(--slider-bleed-top) 0 var(--slider-bleed-bottom);
      margin: calc(var(--slider-bleed-top) * -1) 0 calc(var(--slider-bleed-bottom) * -1);
      scrollbar-width: none;
      user-select: none;
    }

    .slider-outer::-webkit-scrollbar { display: none; }

    .slider-outer.is-dragging { cursor: grabbing; }

    .slider-track {
      display: flex;
      gap: var(--slider-gap);
      width: max-content;
      padding-top: var(--slider-pad-top);
      padding-left: var(--section-px);
      padding-right: var(--slider-pad-end);
    }

    .news-card {
      flex: 0 0 clamp(280px, 28vw, 400px);
      background: transparent;
      border-radius: 0;
      overflow: visible;
      display: flex;
      flex-direction: column;
      gap: 12px;
      color: var(--ink);
    }

    .news-card-img {
      width: 100%;
      aspect-ratio: 4/3;
      object-fit: cover;
      flex-shrink: 0;
      display: block;
      border-radius: 20px;
    }

    .news-image-wrap {
      position: relative;
      flex-shrink: 0;
      overflow: visible;
    }

    .news-card-img-placeholder {
      width: 100%;
      aspect-ratio: 4/3;
      flex-shrink: 0;
      border-radius: 20px;
      display: block;
      object-fit: cover;
      box-shadow:
        0 22px 28px -18px rgba(13, 15, 24, 0.28),
        0 8px 12px -10px rgba(13, 15, 24, 0.14);
      transform-origin: 50% 65%;
      transition:
        transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 420ms cubic-bezier(0.22, 1, 0.36, 1);
      will-change: transform;
    }

    .news-label {
      position: absolute;
      z-index: 2;
      top: 14px;
      left: 14px;
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      padding: 0 10px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 400;
      line-height: 1;
      text-transform: capitalize;
      color: var(--ink);
      background: var(--accent);
      box-shadow: 0 10px 18px -14px rgba(13, 15, 24, 0.38);
      transform-origin: 50% 50%;
      transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
      will-change: transform;
    }

    .news-card:nth-child(6n + 1) .news-label { background: #ffcf24; }
    .news-card:nth-child(6n + 2) .news-label { background: #dff5ff; }
    .news-card:nth-child(6n + 3) .news-label { background: #d9ffd8; }
    .news-card:nth-child(6n + 4) .news-label { background: #ffe0ef; }
    .news-card:nth-child(6n + 5) .news-label { background: #eee4ff; }
    .news-card:nth-child(6n) .news-label { background: #fff0bf; }

    .news-card:nth-child(6n + 1):hover .news-card-img-placeholder { transform: rotate(-3deg); }
    .news-card:nth-child(6n + 2):hover .news-card-img-placeholder { transform: rotate(2.5deg); }
    .news-card:nth-child(6n + 3):hover .news-card-img-placeholder { transform: rotate(-2deg); }
    .news-card:nth-child(6n + 4):hover .news-card-img-placeholder { transform: rotate(3.5deg); }
    .news-card:nth-child(6n + 5):hover .news-card-img-placeholder { transform: rotate(-4deg); }
    .news-card:nth-child(6n):hover .news-card-img-placeholder { transform: rotate(2deg); }

    .news-card:nth-child(6n + 1):hover .news-label { transform: rotate(3deg); }
    .news-card:nth-child(6n + 2):hover .news-label { transform: rotate(-2.5deg); }
    .news-card:nth-child(6n + 3):hover .news-label { transform: rotate(2deg); }
    .news-card:nth-child(6n + 4):hover .news-label { transform: rotate(-3.5deg); }
    .news-card:nth-child(6n + 5):hover .news-label { transform: rotate(4deg); }
    .news-card:nth-child(6n):hover .news-label { transform: rotate(-2deg); }

    .news-card:hover .news-card-img-placeholder {
      box-shadow:
        0 28px 34px -20px rgba(13, 15, 24, 0.32),
        0 10px 14px -11px rgba(13, 15, 24, 0.16);
    }

    .news-card-body {
      padding: 24px 24px 28px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex: 1;
      background: rgba(13, 15, 24, 0.035);
      border: 1px solid rgba(13, 15, 24, 0.06);
      border-radius: 24px;
      box-shadow:
        0 22px 26px -22px rgba(13, 15, 24, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    }

    .news-card-title {
      margin: 0;
      font-size: 20px;
      font-weight: 400;
      line-height: 1.25;
      color: var(--ink);
    }

    .news-card-excerpt {
      margin: 0;
      font-size: 14px;
      line-height: 1.55;
      color: rgba(13,15,24,0.6);
    }

    .news-card-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 400;
      color: var(--ink);
      margin-top: auto;
      text-decoration: none;
      overflow: hidden;
      transition: color 180ms ease;
    }

    .news-card-link:hover .button-label span,
    .news-card-link:focus-visible .button-label span,
    .news-cta-wrap a:hover .button-label span,
    .news-cta-wrap a:focus-visible .button-label span {
      transform: translateY(-110%);
    }

    .news-card-link:hover .button-label::after,
    .news-card-link:focus-visible .button-label::after,
    .news-cta-wrap a:hover .button-label::after,
    .news-cta-wrap a:focus-visible .button-label::after {
      transform: translateY(-100%);
    }

    .news-cta-wrap {
      padding: 40px var(--section-px) 0;
      display: flex;
      justify-content: center;
    }

    .news-cta-button {
      text-decoration: none;
    }

    /* ── Special classes slider ── */
    .special-section {
      padding: clamp(72px, 10vw, 120px) 0 clamp(72px, 10vw, 120px);
      overflow-x: clip;
      overflow-y: visible;
    }

    .special-head {
      flex-direction: row;
      align-items: flex-end;
      justify-content: space-between;
      text-align: left;
      gap: 32px;
    }

    .special-head .news-head-left {
      max-width: 760px;
    }

    .special-card {
      flex-basis: clamp(260px, 24vw, 360px);
    }

    .special-card .news-card-img-placeholder {
      aspect-ratio: 3 / 4;
    }

    .special-card .news-card-title {
      min-height: 2.5em;
    }

    .events-section {
      padding-top: clamp(72px, 9vw, 112px);
    }

    .events-card .news-label {
      background: #ffcf24;
      color: var(--ink);
    }

    /* ── Reviews marquee ── */
    .reviews-section {
      position: relative;
      padding: clamp(80px, 10vw, 128px) 0;
      background: var(--bg);
      color: var(--ink);
      overflow: hidden;
    }

    .reviews-head {
      max-width: 1920px;
      margin: 0 auto clamp(42px, 5vw, 72px);
      padding: 0 var(--section-px);
      text-align: left;
    }

    .reviews-eyebrow {
      display: block;
      margin-bottom: 12px;
      color: rgba(13, 15, 24, 0.42);
      font-size: 11px;
      font-weight: 400;
    }

    .reviews-heading {
      margin: 0;
      color: var(--ink);
      font-size: clamp(30px, 3.4vw, 48px);
      font-weight: 400;
      line-height: 1;
      text-wrap: balance;
    }

    .reviews-marquee {
      position: relative;
      display: grid;
      gap: 18px;
      overflow: hidden;
    }

    .reviews-marquee::before,
    .reviews-marquee::after {
      content: "";
      position: absolute;
      top: -16px;
      bottom: -16px;
      z-index: 3;
      width: clamp(88px, 14vw, 240px);
      pointer-events: none;
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      background: rgba(245, 247, 249, 0.08);
    }

    .reviews-marquee::before {
      left: 0;
      mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.88) 32%, transparent 100%);
      -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.88) 32%, transparent 100%);
    }

    .reviews-marquee::after {
      right: 0;
      mask-image: linear-gradient(270deg, #000 0%, rgba(0, 0, 0, 0.88) 32%, transparent 100%);
      -webkit-mask-image: linear-gradient(270deg, #000 0%, rgba(0, 0, 0, 0.88) 32%, transparent 100%);
    }

    .reviews-row {
      display: flex;
      width: max-content;
      gap: 18px;
      padding-left: var(--section-px);
      animation: reviews-marquee-left 34s linear infinite;
      will-change: transform;
    }

    .reviews-row:nth-child(2) {
      margin-left: -180px;
      animation-duration: 42s;
    }

    .reviews-marquee:hover .reviews-row {
      animation-play-state: paused;
    }

    @keyframes reviews-marquee-left {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }

    .review-card {
      flex: 0 0 clamp(280px, 25vw, 380px);
      min-height: 190px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 26px;
      padding: 24px;
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.58);
      box-shadow:
        0 26px 30px -24px rgba(13, 15, 24, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    }

    .review-card.is-dark {
      background: var(--ink);
      color: var(--bg);
    }

    .review-card.is-yellow {
      background: var(--accent);
      color: var(--ink);
    }

    .review-text {
      margin: 0;
      font-size: clamp(16px, 1.25vw, 19px);
      font-weight: 400;
      line-height: 1.36;
      text-wrap: pretty;
    }

    .review-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      color: currentColor;
      opacity: 0.62;
      font-size: 12px;
      font-weight: 400;
      line-height: 1;
    }

    .review-stars {
      display: inline-flex;
      gap: 2px;
      color: var(--accent);
    }

    .review-card.is-yellow .review-stars {
      color: var(--ink);
    }

    .review-card.is-dark .review-stars {
      color: var(--accent);
    }

    /* ── Social video triptych ── */
    .social-section {
      position: relative;
      padding: clamp(84px, 10vw, 132px) 0 clamp(96px, 12vw, 150px);
      background: var(--bg);
      color: var(--ink);
      overflow: hidden;
    }

    .social-head {
      max-width: 1920px;
      margin: 0 auto clamp(36px, 5vw, 72px);
      padding: 0 var(--section-px);
      text-align: center;
    }

    .social-cta-wrap {
      display: flex;
      justify-content: center;
      margin-top: clamp(36px, 4vw, 56px);
    }

    .social-eyebrow {
      display: block;
      margin-bottom: 12px;
      color: rgba(13, 15, 24, 0.42);
      font-size: 11px;
      font-weight: 400;
    }

    .social-heading {
      margin: 0;
      color: var(--ink);
      font-size: clamp(30px, 3.4vw, 48px);
      font-weight: 400;
      line-height: 1;
      text-wrap: balance;
    }

    .social-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      height: 42px;
      padding: 0 24px;
      border-radius: 18px;
      background: var(--ink);
      color: var(--bg);
      font-size: 14px;
      font-weight: 400;
      line-height: 1;
      text-decoration: none;
      overflow: hidden;
      box-shadow: 0 18px 28px -20px rgba(13, 15, 24, 0.48);
      transition: background 0.22s ease, box-shadow 0.22s ease;
    }

    .social-link:hover {
      background: #232638;
      box-shadow: 0 22px 32px -20px rgba(13, 15, 24, 0.56);
    }

    .social-link:hover .button-label span,
    .social-link:focus-visible .button-label span {
      transform: translateY(-110%);
    }

    .social-link:hover .button-label::after,
    .social-link:focus-visible .button-label::after {
      transform: translateY(-100%);
    }

    .social-nav {
      display: none;
    }

    .social-stage {
      position: relative;
      max-width: 1920px;
      margin: 0 auto;
      padding: 0 var(--section-px);
      min-height: clamp(540px, 53vw, 820px);
      display: grid;
      place-items: center;
      isolation: isolate;
    }

    .social-stage::before,
    .social-stage::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      z-index: 4;
      width: clamp(72px, 11vw, 190px);
      pointer-events: none;
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      background: rgba(245, 247, 249, 0.1);
    }

    .social-stage::before {
      left: 0;
      mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.82) 34%, transparent 100%);
      -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.82) 34%, transparent 100%);
    }

    .social-stage::after {
      right: 0;
      mask-image: linear-gradient(270deg, #000 0%, rgba(0, 0, 0, 0.82) 34%, transparent 100%);
      -webkit-mask-image: linear-gradient(270deg, #000 0%, rgba(0, 0, 0, 0.82) 34%, transparent 100%);
    }

    .social-video-card {
      position: absolute;
      width: clamp(250px, 27vw, 420px);
      aspect-ratio: 9 / 16;
      border-radius: 32px;
      overflow: hidden;
      background: var(--ink);
      box-shadow:
        0 42px 52px -34px rgba(13, 15, 24, 0.42),
        0 18px 26px -24px rgba(13, 15, 24, 0.28);
      transform-origin: 50% 80%;
      transition:
        transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 520ms cubic-bezier(0.22, 1, 0.36, 1);
      will-change: transform;
    }

    .social-video-card video {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      filter: saturate(1.02) contrast(1.02);
    }

    .social-video-card::after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: 42%;
      background: linear-gradient(180deg, transparent 0%, rgba(13, 15, 24, 0.58) 100%);
      pointer-events: none;
    }

    .social-video-card.is-left {
      z-index: 1;
      transform: translateX(clamp(-300px, -26vw, -190px)) translateY(26px) rotate(-4deg) scale(0.94);
    }

    .social-video-card.is-center {
      z-index: 3;
      transform: translateY(-26px) rotate(1deg) scale(1.03);
    }

    .social-video-card.is-right {
      z-index: 2;
      transform: translateX(clamp(190px, 26vw, 300px)) translateY(24px) rotate(3.5deg) scale(0.94);
    }

    .social-video-card:hover {
      z-index: 5;
    }

    .social-stage:hover .social-video-card.is-left {
      transform: translateX(clamp(-314px, -27vw, -200px)) translateY(12px) rotate(-2deg) scale(0.97);
    }

    .social-stage:hover .social-video-card.is-center {
      transform: translateY(-34px) rotate(0deg) scale(1.06);
      box-shadow:
        0 52px 62px -36px rgba(13, 15, 24, 0.46),
        0 22px 30px -24px rgba(13, 15, 24, 0.3);
    }

    .social-stage:hover .social-video-card.is-right {
      transform: translateX(clamp(200px, 27vw, 314px)) translateY(10px) rotate(2deg) scale(0.97);
    }

    .social-card-meta {
      position: absolute;
      z-index: 2;
      left: 22px;
      right: 22px;
      bottom: 22px;
      display: flex;
      align-items: center;
      gap: 10px;
      color: #fff;
      font-size: clamp(15px, 1.2vw, 18px);
      font-weight: 400;
      line-height: 1;
      text-shadow: 0 8px 22px rgba(0, 0, 0, 0.36);
    }

    .social-avatar {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      flex: 0 0 auto;
      background:
        radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.2) 34%, transparent 35%),
        linear-gradient(135deg, var(--accent), #fff0bf);
      border: 2px solid rgba(255, 255, 255, 0.72);
      box-shadow: 0 12px 20px -16px rgba(0, 0, 0, 0.65);
    }

    .social-verify {
      width: 18px;
      height: 18px;
      color: #4da3ff;
      flex: 0 0 auto;
      filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.25));
    }

    @media (max-width: 640px) {
      .news-card { flex: 0 0 min(80vw, 320px); }
      .slider-track { padding-right: 60px; }
      .news-head { flex-direction: column; align-items: flex-start; gap: 20px; }
      .special-head { align-items: flex-start; text-align: left; }
      .reviews-marquee::before,
      .reviews-marquee::after { width: 64px; }
      .reviews-row { gap: 12px; }
      .review-card { flex-basis: 280px; }
      .social-section { padding-top: 76px; }
      .social-head { flex-direction: column; align-items: flex-start; gap: 22px; }
      .social-stage {
        min-height: auto;
        display: flex;
        justify-content: flex-start;
        gap: 14px;
        overflow-x: auto;
        padding: 36px 0 40px clamp(16px, 4vw, 24px);
        scroll-snap-type: x mandatory;
      }
      .social-stage::before,
      .social-stage::after { display: none; }
      .social-video-card {
        position: relative;
        width: min(78vw, 320px);
        flex: 0 0 min(78vw, 320px);
        border-radius: 24px;
        scroll-snap-align: center;
        transform: none !important;
      }

      /* Event page: pełny bleed + strzałki, większy peek */
      .event-social .social-nav {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        padding: 0 16px;
        margin-bottom: 14px;
      }

      .event-social .social-stage {
        width: 100vw;
        margin-left: 50%;
        transform: translateX(-50%);
        padding: 14px 0 38px 16px;
        scroll-padding-left: 16px;
      }

      .event-social .social-video-card {
        width: min(80vw, 360px);
        flex-basis: min(80vw, 360px);
        scroll-snap-align: start;
      }
    }

    /* ── Grafik section ── */
    .grafik-section {
      position: relative;
      padding: clamp(80px, 10vw, 128px) 0 clamp(96px, 12vw, 150px);
      background: var(--bg);
      color: var(--ink);
    }

    .grafik-inner {
      max-width: 1920px;
      margin: 0 auto;
      padding: 0 var(--section-px);
    }

    .grafik-head {
      max-width: 760px;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: clamp(36px, 4vw, 56px);
      text-align: center;
    }

    .grafik-eyebrow {
      display: block;
      margin-bottom: 12px;
      color: rgba(13, 15, 24, 0.42);
      font-size: 11px;
      font-weight: 400;
    }

    .grafik-heading {
      margin: 0;
      color: var(--ink);
      font-size: clamp(30px, 3.4vw, 48px);
      font-weight: 400;
      line-height: 1;
    }

    /* location toggle */
    .grafik-loc-toggle {
      --toggle-pad: 4px;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      width: min(480px, 100%);
      margin-inline: auto;
      background: rgba(13, 15, 24, 0.035);
      border: 1px solid rgba(13, 15, 24, 0.06);
      border-radius: 24px;
      padding: var(--toggle-pad);
      margin-bottom: clamp(28px, 3.5vw, 48px);
      position: relative;
      box-shadow:
        0 24px 28px -24px rgba(13, 15, 24, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.62);
    }

    .grafik-loc-indicator {
      position: absolute;
      top: var(--toggle-pad);
      left: var(--toggle-pad);
      width: calc((100% - (var(--toggle-pad) * 2)) / 2);
      height: calc(100% - (var(--toggle-pad) * 2));
      border-radius: 18px;
      background: var(--ink);
      transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
      pointer-events: none;
    }

    .grafik-loc-btn {
      position: relative;
      z-index: 1;
      padding: 12px 26px;
      border-radius: 18px;
      border: none;
      background: transparent;
      color: rgba(13, 15, 24, 0.5);
      font-size: clamp(14px, 1.1vw, 16px);
      font-weight: 400;
      font-family: inherit;
      cursor: pointer;
      transition: color 300ms ease;
      white-space: nowrap;
    }

    .grafik-loc-btn.is-active {
      color: #f5f7f9;
    }

    .grafik-section--single-location .grafik-days {
      margin-top: 0;
    }

    /* day tabs */
    .grafik-days {
      display: flex;
      justify-content: center;
      gap: 6px;
      flex-wrap: wrap;
      margin-bottom: clamp(20px, 2.5vw, 32px);
      margin-inline: auto;
      padding: 4px;
      width: fit-content;
      max-width: 100%;
      border-radius: 24px;
      background: rgba(13, 15, 24, 0.035);
      border: 1px solid rgba(13, 15, 24, 0.06);
      box-shadow:
        0 24px 28px -24px rgba(13, 15, 24, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.62);
    }

    .grafik-day-tab {
      padding: 10px 18px;
      border-radius: 16px;
      background: transparent;
      color: rgba(13, 15, 24, 0.54);
      font-size: 13px;
      font-weight: 400;
      font-family: inherit;
      cursor: pointer;
      transition: background 220ms ease, color 220ms ease;
    }

    .grafik-day-tab.is-active {
      background: var(--accent);
      color: var(--ink);
      box-shadow: 0 16px 20px -18px rgba(13, 15, 24, 0.28);
    }

    .grafik-day-tab:not(.is-active):hover {
      color: var(--ink);
      background: rgba(13, 15, 24, 0.05);
    }

    /* filters */
    .grafik-filters {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      max-width: 980px;
      margin: 0 auto 38px;
      padding: 0;
      background: transparent;
      border-radius: 0;
      border: 0;
    }

    .grafik-filter-wrap {
      position: relative;
      z-index: 8;
    }

    .grafik-filter-group {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 7px;
      min-height: 38px;
      min-width: 122px;
      max-width: 210px;
      padding: 0 14px;
      border-radius: 18px;
      border: 1px solid rgba(13, 15, 24, 0.06);
      cursor: pointer;
      transition: color 200ms ease, background 200ms ease, box-shadow 200ms ease;
      background: rgba(13, 15, 24, 0.035);
      box-shadow:
        0 16px 22px -22px rgba(13, 15, 24, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.62);
      font-family: inherit;
      font-size: 12px;
      font-weight: 400;
      color: rgba(13, 15, 24, 0.68);
    }

    .grafik-filter-label {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .grafik-filter-group:hover,
    .grafik-filter-group.is-active,
    .grafik-filter-wrap.is-open .grafik-filter-group {
      color: var(--ink);
      background: rgba(13, 15, 24, 0.05);
      box-shadow:
        0 20px 26px -22px rgba(13, 15, 24, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
    }

    .grafik-filter-group svg {
      flex-shrink: 0;
      opacity: 0.5;
      transition: transform 220ms ease;
    }

    .grafik-filter-wrap.is-open .grafik-filter-group svg {
      transform: rotate(180deg);
    }

    .grafik-filter-menu {
      position: absolute;
      top: calc(100% + 8px);
      left: 50%;
      z-index: 20;
      display: grid;
      gap: 4px;
      width: max-content;
      min-width: 190px;
      max-width: min(280px, calc(100vw - 32px));
      max-height: 280px;
      padding: 6px;
      border-radius: 18px;
      border: 1px solid rgba(13, 15, 24, 0.08);
      background: rgba(245, 247, 249, 0.96);
      box-shadow:
        0 28px 48px -34px rgba(13, 15, 24, 0.46),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
      opacity: 0;
      pointer-events: none;
      overflow: auto;
      transform: translate(-50%, -4px);
      transition:
        opacity 180ms ease,
        transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .grafik-filter-wrap.is-open .grafik-filter-menu {
      opacity: 1;
      pointer-events: auto;
      transform: translate(-50%, 0);
    }

    .grafik-filter-option {
      width: 100%;
      min-height: 34px;
      padding: 0 12px;
      border: 0;
      border-radius: 12px;
      background: transparent;
      color: rgba(13, 15, 24, 0.66);
      font-family: inherit;
      font-size: 12px;
      font-weight: 400;
      line-height: 1.15;
      text-align: left;
      cursor: pointer;
      transition: background 160ms ease, color 160ms ease;
    }

    .grafik-filter-option:hover,
    .grafik-filter-option:focus-visible,
    .grafik-filter-option[aria-selected="true"] {
      background: rgba(13, 15, 24, 0.07);
      color: var(--ink);
    }

    /* classes list */
    .grafik-classes {
      display: flex;
      flex-direction: column;
      gap: 24px;
      max-width: 1320px;
      margin: 0 auto;
    }

    .grafik-class-row {
      position: relative;
      display: grid;
      grid-template-columns: minmax(340px, 1.15fr) repeat(4, minmax(100px, 0.42fr)) auto;
      align-items: center;
      gap: 18px;
      padding: 18px;
      background: rgba(13, 15, 24, 0.035);
      border-radius: 24px;
      border: 1px solid rgba(13, 15, 24, 0.06);
      box-shadow:
        0 24px 28px -24px rgba(13, 15, 24, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.62);
      transition:
        background 220ms ease,
        box-shadow 220ms ease;
    }

    .grafik-class-row[hidden] {
      display: none !important;
    }

    .grafik-class-row:hover,
    .grafik-class-row.is-open {
      background: rgba(13, 15, 24, 0.05);
      box-shadow:
        0 30px 34px -26px rgba(13, 15, 24, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
    }

    .grafik-class-main {
      min-width: 0;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      align-items: start;
      gap: 5px;
    }

    .grafik-class-badge {
      display: inline-flex;
      align-items: center;
      position: absolute;
      top: -12px;
      left: 20px;
      z-index: 2;
      width: fit-content;
      margin-bottom: 0;
      min-height: 24px;
      padding: 0 10px;
      border-radius: 999px;
      background: var(--accent);
      color: var(--ink);
      font-size: 10px;
      font-weight: 400;
      line-height: 1;
      text-transform: capitalize;
      box-shadow: 0 10px 18px -14px rgba(13, 15, 24, 0.38);
      transform-origin: 50% 50%;
      transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
      will-change: transform;
    }

    .grafik-class-time {
      grid-column: auto;
      grid-row: auto;
      min-height: 0;
      padding: 0;
      border-radius: 0;
      background: transparent;
      color: rgba(13, 15, 24, 0.58);
      font-size: 12px;
      margin-bottom: 0;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 8px;
    }

    .grafik-class-time svg {
      display: none;
    }

    .grafik-class-name {
      grid-column: auto;
      grid-row: auto;
      font-size: clamp(15px, 1.2vw, 18px);
      font-weight: 400;
      color: var(--ink);
      line-height: 1.15;
    }

    .grafik-meta-col {
      display: flex;
      flex-direction: column;
      gap: 3px;
      min-width: 80px;
      padding-left: 14px;
      border-left: 1.5px solid rgba(13, 15, 24, 0.07);
    }

    .grafik-meta-label {
      font-size: 10px;
      color: rgba(13, 15, 24, 0.38);
      font-weight: 400;
    }

    .grafik-meta-val {
      font-size: 13px;
      color: var(--ink);
      font-weight: 400;
    }

    .grafik-class-actions {
      display: flex;
      gap: 16px;
      flex-shrink: 0;
    }

    .grafik-btn-signup {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 38px;
      padding: 0 18px;
      border-radius: 18px;
      font-size: 13px;
      font-weight: 400;
      line-height: 1;
      font-family: inherit;
      cursor: pointer;
      overflow: hidden;
    }

    .grafik-btn-details {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: 92px;
      justify-content: flex-start;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--ink);
      font-size: 13px;
      line-height: 1;
      text-decoration: none;
      font-weight: 400;
      font-family: inherit;
      overflow: hidden;
      cursor: pointer;
    }

    .grafik-btn-details .icon-arrow {
      width: 18px;
      height: 18px;
      flex: 0 0 auto;
      transition: transform 220ms ease;
      transform-origin: center;
    }

    .grafik-btn-signup {
      border: 0;
      background: var(--ink);
      color: #f5f7f9;
      transition: background 200ms ease, color 200ms ease;
    }

    .grafik-btn-signup:hover {
      background: #232638;
    }

    .grafik-btn-details:hover .button-label span,
    .grafik-btn-details:focus-visible .button-label span,
    .grafik-btn-signup:hover .button-label span,
    .grafik-btn-signup:focus-visible .button-label span {
      transform: translateY(-110%);
    }

    .grafik-btn-details:hover .button-label::after,
    .grafik-btn-details:focus-visible .button-label::after,
    .grafik-btn-signup:hover .button-label::after,
    .grafik-btn-signup:focus-visible .button-label::after {
      transform: translateY(-100%);
    }

    .grafik-btn-details:hover .icon-arrow,
    .grafik-btn-details:focus-visible .icon-arrow {
      transform: rotate(135deg);
    }

    .grafik-class-row.is-open .grafik-btn-details .icon-arrow {
      transform: rotate(-45deg);
    }

    .grafik-class-panel {
      grid-column: 1 / -1;
      max-width: 840px;
      height: 0;
      overflow: hidden;
      opacity: 0;
      transition:
        height 420ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 240ms ease;
      will-change: height;
    }

    .grafik-class-row.is-open .grafik-class-panel {
      opacity: 1;
    }

    .grafik-class-panel-inner {
      padding: 2px 0 4px;
      color: #0d0f18;
      font-size: 14px;
      font-weight: 400;
      line-height: 1.55;
    }

    .grafik-class-panel-inner > :first-child { margin-top: 0; }
    .grafik-class-panel-inner > :last-child { margin-bottom: 0; }

    .grafik-class-panel-inner p,
    .grafik-class-panel-inner div {
      margin: 0 0 10px;
    }

    .grafik-class-panel-inner span {
      color: inherit !important;
      font-size: inherit !important;
    }

    .grafik-class-panel-inner b,
    .grafik-class-panel-inner strong {
      font-weight: 500;
      color: var(--ink);
    }

    body .grafik-section .abra-sch-modal {
      z-index: 100000;
      padding: 20px;
      align-items: center;
      justify-content: center;
    }

    body .grafik-section .abra-sch-modal__backdrop {
      background: rgba(13, 15, 24, 0.38);
      backdrop-filter: blur(18px);
    }

    body .grafik-section .abra-sch-modal__dialog {
      width: min(680px, calc(100vw - 32px));
      max-width: 680px;
      max-height: min(88vh, 860px);
      border-radius: 32px;
      background: #f5f7f9;
      color: var(--ink);
      border: 1px solid rgba(13, 15, 24, 0.08);
      box-shadow:
        0 34px 70px -44px rgba(13, 15, 24, 0.68),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
      overflow: auto;
    }

    body .grafik-section .abra-sch-modal__inner {
      padding: clamp(28px, 5vw, 48px) !important;
    }

    body .grafik-section .abra-sch-modal__close {
      top: 18px;
      right: 18px;
      width: 42px;
      height: 42px;
      border-radius: 999px;
      background: rgba(13, 15, 24, 0.06);
      color: var(--ink);
      font-size: 28px;
      font-weight: 400;
      transition: background 180ms ease, transform 180ms ease;
    }

    body .grafik-section .abra-sch-modal__close:hover,
    body .grafik-section .abra-sch-modal__close:focus-visible {
      background: rgba(13, 15, 24, 0.1);
      transform: rotate(6deg);
      opacity: 1;
    }

    body .grafik-section .abra-sch-modal__title {
      margin: 0 48px 8px 0;
      color: rgba(13, 15, 24, 0.52);
      font-size: 12px;
      font-weight: 400;
      line-height: 1.1;
      text-transform: uppercase;
      letter-spacing: 0;
    }

    body .grafik-section .abra-sch-modal__class-name {
      margin: 0 48px 28px 0;
      color: var(--ink);
      font-size: clamp(24px, 3vw, 34px);
      font-weight: 400;
      line-height: 1.04;
      text-transform: none;
      letter-spacing: 0;
    }

    body .grafik-section .abra-sch-modal__feedback {
      margin: 0 0 18px;
      padding: 14px 16px;
      border-radius: 18px;
      font-size: 14px;
      font-weight: 400;
      line-height: 1.35;
      border: 1px solid transparent;
    }

    body .grafik-section .abra-sch-modal__feedback--error {
      background: rgba(198, 40, 40, 0.08);
      color: #7f1d1d;
      border-color: rgba(198, 40, 40, 0.16);
    }

    body .grafik-section .abra-sch-modal__feedback--ok {
      background: rgba(25, 135, 84, 0.1);
      color: #165c3b;
      border-color: rgba(25, 135, 84, 0.18);
    }

    body .grafik-section .abra-sch-modal__form {
      display: grid;
      gap: 16px;
    }

    body .grafik-section .abra-sch-modal__field {
      margin-bottom: 0;
    }

    body .grafik-section .abra-sch-modal__row {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
      margin-bottom: 0;
    }

    body .grafik-section .abra-sch-modal__row .abra-sch-modal__field:first-of-type,
    body .grafik-section .abra-sch-modal__row .abra-sch-modal__field:last-of-type {
      margin: 0;
    }

    body .grafik-section .abra-sch-modal__field label {
      margin-bottom: 8px !important;
      color: rgba(13, 15, 24, 0.58) !important;
      font-size: 12px !important;
      font-weight: 400 !important;
      line-height: 1.2 !important;
    }

    body .grafik-section .abra-sch-modal__field input,
    body .grafik-section .abra-sch-modal__field textarea {
      min-height: 50px !important;
      padding: 14px 18px !important;
      border: 1px solid rgba(13, 15, 24, 0.1) !important;
      border-radius: 18px !important;
      background: rgba(255, 255, 255, 0.72) !important;
      color: var(--ink) !important;
      font-family: inherit !important;
      font-size: 15px !important;
      font-weight: 400 !important;
      line-height: 1.35 !important;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
      transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease !important;
    }

    body .grafik-section .abra-sch-modal__field textarea {
      min-height: 110px !important;
      resize: vertical;
    }

    body .grafik-section .abra-sch-modal__field input:focus,
    body .grafik-section .abra-sch-modal__field textarea:focus {
      border-color: rgba(13, 15, 24, 0.28) !important;
      background: #fff !important;
      box-shadow:
        0 0 0 4px rgba(13, 15, 24, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    }

    body .grafik-section .abra-sch-modal__checks {
      margin: 4px 0 0;
      padding: 0;
      gap: 10px;
    }

    body .grafik-section .abra-sch-modal__check {
      gap: 10px;
      color: rgba(13, 15, 24, 0.72);
      font-size: 11px;
      font-weight: 400;
      line-height: 1.35;
      cursor: pointer;
    }

    body .grafik-section .abra-sch-modal__check input[type='checkbox'] {
      width: 16px !important;
      height: 16px !important;
      min-width: 16px !important;
      margin-top: 1px;
      accent-color: var(--ink);
    }

    body .grafik-section .abra-sch-modal__check-text a {
      color: var(--ink);
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    body .grafik-section .abra-sch-modal__actions {
      margin-top: 4px;
    }

    body .grafik-section .abra-sch-modal__submit {
      width: 100%;
      min-height: 54px;
      padding: 0 22px !important;
      border: 0 !important;
      border-radius: 22px !important;
      background: var(--ink) !important;
      color: #f5f7f9 !important;
      font-family: inherit !important;
      font-size: 15px !important;
      font-weight: 400 !important;
      line-height: 1 !important;
      cursor: pointer;
      transition: background 200ms ease, transform 200ms ease, opacity 200ms ease;
    }

    body .grafik-section .abra-sch-modal__submit:hover:not(:disabled),
    body .grafik-section .abra-sch-modal__submit:focus-visible:not(:disabled) {
      background: #232638 !important;
      transform: translateY(-1px);
      filter: none;
    }

    body .grafik-section .abra-sch-modal__submit:disabled {
      opacity: 0.68;
      cursor: wait;
    }

    .grafik-btn-signup:disabled {
      opacity: 0.42;
      cursor: not-allowed;
    }

    .grafik-empty {
      padding: 56px 24px;
      text-align: center;
      color: rgba(13, 15, 24, 0.38);
      font-size: 15px;
      background: rgba(255, 255, 255, 0.66);
      border-radius: 24px;
      border: 0;
    }

    @media (max-width: 1024px) {
      .grafik-class-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 16px;
      }
      .grafik-meta-col {
        min-width: 0;
        padding: 12px 14px;
        border-left: 0;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.52);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
      }
      .grafik-meta-col:nth-of-type(2),
      .grafik-meta-col:nth-of-type(3),
      .grafik-meta-col:nth-of-type(4),
      .grafik-meta-col:nth-of-type(5) {
        grid-column: auto;
      }
      .grafik-class-main {
        grid-column: 1 / 2;
      }
      .grafik-class-actions {
        grid-column: 2 / 3;
        grid-row: 1;
        align-self: center;
      }
      .grafik-meta-col {
        grid-column: span 1;
      }
      .grafik-class-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .grafik-class-main,
      .grafik-class-actions,
      .grafik-class-panel {
        grid-column: 1 / -1;
      }
      .grafik-class-actions {
        grid-row: auto;
      }
    }

    @media (max-width: 640px) {
      .grafik-loc-btn { padding: 12px 18px; font-size: 13px; }
      .grafik-loc-toggle {
        width: 100%;
      }
      .grafik-days {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        width: fit-content;
      }
      .grafik-day-tab { flex: 0 0 auto; }
      .grafik-class-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        padding: 16px;
        border-radius: 22px;
      }
      .grafik-class-main {
        grid-template-columns: 1fr;
      }
      .grafik-class-badge,
      .grafik-class-time,
      .grafik-class-name {
        grid-column: auto;
      }
      .grafik-class-name {
        grid-row: 1;
      }
      .grafik-class-time {
        grid-row: 2;
      }
      .grafik-class-badge {
        left: 18px;
      }
      .grafik-meta-col {
        grid-column: auto;
        padding: 11px 12px;
        border-radius: 14px;
        background: transparent;
        box-shadow: none;
      }
      .grafik-meta-label {
        font-size: 9px;
      }
      .grafik-meta-val {
        font-size: 13px;
        line-height: 1.25;
      }
      .grafik-class-actions {
        justify-content: flex-start;
        gap: 12px;
        flex-wrap: wrap;
      }
      .grafik-btn-details {
        width: 92px;
      }
      .grafik-btn-signup {
        min-height: 38px;
      }
      body .grafik-section .abra-sch-modal {
        padding: 16px;
      }
      body .grafik-section .abra-sch-modal__dialog {
        width: calc(100vw - 32px);
        border-radius: 26px;
      }
      body .grafik-section .abra-sch-modal__inner {
        padding: 28px 20px 22px !important;
      }
      body .grafik-section .abra-sch-modal__row {
        grid-template-columns: 1fr;
      }
      body .grafik-section .abra-sch-modal__class-name {
        font-size: 24px;
      }
    }

    @media (max-width: 360px) {
      .grafik-class-row {
        grid-template-columns: 1fr;
      }
      .grafik-meta-col {
        grid-column: 1 / -1;
      }
    }

    .locations-alt-section {
      padding: 0 var(--section-px) clamp(92px, 10vw, 164px);
      background: var(--bg);
      overflow: hidden;
    }

    .locations-alt-inner {
      max-width: var(--max-page);
      margin: 0 auto;
      display: grid;
      gap: clamp(34px, 5vw, 80px);
    }

    .locations-alt-intro {
      max-width: 760px;
      margin: 0 auto;
      text-align: center;
    }

    .locations-alt-kicker {
      display: block;
      margin-bottom: 14px;
      color: rgba(13, 15, 24, 0.54);
      font-size: 12px;
      line-height: 1;
    }

    .locations-alt-title {
      margin: 0;
      color: var(--ink);
      font-size: clamp(30px, 3.4vw, 48px);
      line-height: 0.98;
      font-weight: 400;
    }

    .location-concept {
      display: grid;
      gap: 18px;
    }

    .location-meta {
      display: inline-flex;
      align-items: center;
      width: fit-content;
      min-height: 24px;
      padding: 0 10px;
      border-radius: 999px;
      background: #ffcf24;
      color: #0d0f18;
      font-size: 10px;
      line-height: 1;
      text-transform: capitalize;
      box-shadow: 0 12px 18px -16px rgba(13, 15, 24, 0.34);
    }

    .location-actions {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
      margin-top: auto;
    }

    .location-primary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      height: 42px;
      padding: 0 24px;
      border-radius: 18px;
      background: var(--ink);
      color: var(--fg);
      font-size: 14px;
      line-height: 1;
      text-decoration: none;
      transition: background-color 180ms ease, box-shadow 180ms ease;
    }

    .location-primary:hover,
    .location-primary:focus-visible {
      background: #000;
      box-shadow: 0 14px 34px rgba(13, 15, 24, 0.24);
    }

    .location-link {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: var(--ink);
      font-size: 14px;
      line-height: 1;
      text-decoration: none;
    }

    .location-primary:hover .button-label span,
    .location-primary:focus-visible .button-label span,
    .location-link:hover .button-label span,
    .location-link:focus-visible .button-label span {
      transform: translateY(-110%);
    }

    .location-primary:hover .button-label::after,
    .location-primary:focus-visible .button-label::after,
    .location-link:hover .button-label::after,
    .location-link:focus-visible .button-label::after {
      transform: translateY(-100%);
    }

    .location-path-item h3 {
      margin: 0;
      color: var(--ink);
      font-size: clamp(22px, 2.2vw, 34px);
      line-height: 1.04;
      font-weight: 400;
    }

    .location-path-item p {
      margin: 0;
      color: rgba(13, 15, 24, 0.66);
      font-size: 15px;
      line-height: 1.45;
    }

    .location-path {
      display: grid;
      gap: clamp(128px, 12vw, 220px);
    }

    .location-path-row {
      min-height: clamp(360px, 30vw, 470px);
      display: grid;
      grid-template-columns: minmax(330px, 0.78fr) minmax(560px, 1.22fr);
      gap: clamp(18px, 2.4vw, 36px);
      align-items: stretch;
    }

    .location-path-row.is-reverse {
      grid-template-columns: minmax(560px, 1.22fr) minmax(330px, 0.78fr);
    }

    .location-path-item {
      position: relative;
      min-height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      gap: 12px;
      padding: 18px;
      border-radius: 24px;
      background: rgba(13, 15, 24, 0.035);
      border: 1px solid rgba(13, 15, 24, 0.06);
      box-shadow: 0 22px 32px -30px rgba(13, 15, 24, 0.36);
      transition: box-shadow 520ms cubic-bezier(0.22, 1, 0.36, 1), background 520ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .location-path-row:hover .location-path-item {
      background: rgba(13, 15, 24, 0.045);
      box-shadow: 0 28px 42px -34px rgba(13, 15, 24, 0.42);
    }

    .location-path-stage {
      position: relative;
      min-height: clamp(320px, 25vw, 420px);
      isolation: isolate;
    }

    .location-path-image {
      position: absolute;
      overflow: hidden;
      width: min(78%, 720px);
      aspect-ratio: 8 / 6;
      border-radius: 24px;
      box-shadow: 0 28px 44px -34px rgba(13, 15, 24, 0.46);
      transition:
        width 620ms cubic-bezier(0.22, 1, 0.36, 1),
        left 620ms cubic-bezier(0.22, 1, 0.36, 1),
        right 620ms cubic-bezier(0.22, 1, 0.36, 1),
        top 620ms cubic-bezier(0.22, 1, 0.36, 1),
        bottom 620ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 520ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 520ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .location-path-image img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      transform: scale(1.03);
    }

    .location-path-image:first-child {
      z-index: 1;
      left: 0;
      top: 18px;
      width: min(84%, 760px);
      transform: rotate(1.4deg) scale(0.985);
      filter: saturate(0.92);
    }

    .location-path-image:last-child {
      z-index: 2;
      right: 0;
      bottom: 10%;
      width: min(58%, 520px);
      transform: rotate(-2.4deg);
      filter: saturate(1.03);
    }

    .location-path-row.is-reverse .location-path-image:first-child {
      left: auto;
      right: 0;
      transform: rotate(-1.4deg) scale(0.985);
    }

    .location-path-row.is-reverse .location-path-image:last-child {
      right: auto;
      left: 0;
      transform: rotate(2.4deg);
    }

    .location-path-image:hover {
      z-index: 7;
      transform: rotate(0deg) scale(1.025);
      filter: saturate(1.04);
      box-shadow: 0 34px 52px -32px rgba(13, 15, 24, 0.52);
    }

    .location-path-row.is-reverse .location-path-image:hover {
      transform: rotate(0deg) scale(1.025);
    }

    .location-path-stage.is-primary-active .location-path-image:first-child {
      z-index: 7;
      left: 8%;
      top: 7%;
      width: min(62%, 560px);
      transform: rotate(0deg) scale(1.025);
      filter: saturate(1.04);
    }

    .location-path-stage.is-primary-active .location-path-image:last-child {
      z-index: 1;
      right: 0;
      bottom: 0;
      width: min(82%, 740px);
      transform: rotate(-1.2deg) scale(0.985);
      filter: saturate(0.92);
    }

    .location-path-stage.is-secondary-active .location-path-image:last-child {
      z-index: 7;
      transform: rotate(0deg) scale(1.025);
      filter: saturate(1.04);
    }

    .location-path-stage.is-secondary-active .location-path-image:first-child {
      z-index: 1;
      transform: rotate(1.2deg) scale(0.985);
      filter: saturate(0.92);
    }

    .location-path-row.is-reverse .location-path-stage.is-primary-active .location-path-image:first-child {
      left: auto;
      right: 8%;
      transform: rotate(0deg) scale(1.025);
    }

    .location-path-row.is-reverse .location-path-stage.is-primary-active .location-path-image:last-child {
      right: auto;
      left: 0;
      transform: rotate(1.2deg) scale(0.985);
    }

    .location-path-row.is-reverse .location-path-stage.is-secondary-active .location-path-image:first-child {
      transform: rotate(-1.2deg) scale(0.985);
    }

    .location-path-row.is-reverse .location-path-stage.is-secondary-active .location-path-image:last-child {
      transform: rotate(0deg) scale(1.025);
    }

    .location-mini-map {
      position: relative;
      min-height: 150px;
      margin-top: auto;
      overflow: hidden;
      border-radius: 20px;
      background:
        linear-gradient(90deg, rgba(13, 15, 24, 0.08) 1px, transparent 1px),
        linear-gradient(0deg, rgba(13, 15, 24, 0.08) 1px, transparent 1px),
        rgba(255, 255, 255, 0.54);
      background-size: 34px 34px;
      border: 1px solid rgba(13, 15, 24, 0.06);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
    }

    .location-mini-map::before,
    .location-mini-map::after {
      content: "";
      position: absolute;
      border-radius: 999px;
      background: rgba(13, 15, 24, 0.11);
      transform: rotate(-18deg);
    }

    .location-mini-map::before {
      width: 78%;
      height: 18px;
      left: -12%;
      top: 42%;
    }

    .location-mini-map::after {
      width: 58%;
      height: 14px;
      right: -8%;
      top: 24%;
      transform: rotate(23deg);
    }

    .location-map-pin {
      position: absolute;
      left: 50%;
      top: 45%;
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 999px 999px 999px 6px;
      background: var(--accent);
      color: var(--ink);
      box-shadow: 0 18px 24px -18px rgba(13, 15, 24, 0.46);
      transform: translate(-50%, -50%) rotate(-45deg);
    }

    .location-map-pin span {
      width: 11px;
      height: 11px;
      border-radius: 999px;
      background: var(--ink);
    }

    .location-map-caption {
      position: absolute;
      left: 16px;
      right: 16px;
      bottom: 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 12px 14px;
      border-radius: 16px;
      background: rgba(245, 247, 249, 0.82);
      color: rgba(13, 15, 24, 0.72);
      font-size: 13px;
      line-height: 1.25;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    .location-map-caption strong {
      color: var(--ink);
      font-weight: 400;
    }

    @media (max-width: 900px) {
      .location-path-row,
      .location-path-row.is-reverse {
        display: grid;
        grid-template-columns: 1fr;
      }

      .location-path-image {
        position: relative;
        inset: auto;
        width: 100%;
        height: auto;
        aspect-ratio: 8 / 6;
        transform: rotate(0deg);
        filter: none;
      }

      .location-path-item,
      .location-path-row.is-reverse .location-path-item {
        min-height: auto;
        transform: rotate(0deg);
      }

      .location-path-stage {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        min-height: auto;
      }

      .location-path-row.is-reverse .location-path-stage {
        grid-template-columns: 1fr;
        order: 2;
      }

      .location-path-row.is-reverse .location-path-item {
        order: 1;
      }

      .location-path-image img,
      .location-path-image:last-child,
      .location-path-row.is-reverse .location-path-image:first-child,
      .location-path-row.is-reverse .location-path-image:last-child {
        height: 100%;
        min-height: 0;
        width: 100%;
        inset: auto;
        transform: rotate(0deg);
        filter: none;
      }

      .location-path-stage.is-primary-active .location-path-image:first-child,
      .location-path-stage.is-primary-active .location-path-image:last-child,
      .location-path-stage.is-secondary-active .location-path-image:first-child,
      .location-path-stage.is-secondary-active .location-path-image:last-child,
      .location-path-row.is-reverse .location-path-stage.is-primary-active .location-path-image:first-child,
      .location-path-row.is-reverse .location-path-stage.is-primary-active .location-path-image:last-child,
      .location-path-row.is-reverse .location-path-stage.is-secondary-active .location-path-image:first-child,
      .location-path-row.is-reverse .location-path-stage.is-secondary-active .location-path-image:last-child {
        width: 100%;
        inset: auto;
        transform: rotate(0deg);
        filter: none;
      }

      .location-mini-map {
        min-height: 190px;
      }

    }

    .locations-feature-section {
      margin: var(--stage-gap);
      padding: clamp(64px, 8vw, 112px) clamp(22px, 4vw, 72px) clamp(22px, 4vw, 72px);
      border-radius: var(--stage-radius);
      background: #13151e;
      color: var(--fg);
      overflow: hidden;
    }

    .locations-feature-inner {
      display: grid;
      gap: clamp(34px, 5vw, 64px);
      width: 100%;
      max-width: 1920px;
      margin: 0 auto;
    }

    .locations-feature-intro {
      display: grid;
      justify-items: center;
      gap: 14px;
      max-width: 760px;
      color: var(--fg);
    }

    .locations-feature-intro .locations-alt-kicker {
      margin: 0;
      color: rgba(245, 247, 249, 0.54);
    }

    .locations-feature-intro .locations-alt-title {
      color: var(--fg);
    }

    .locations-feature-intro p {
      max-width: 640px;
      margin: 0;
      color: rgba(245, 247, 249, 0.68);
      font-size: clamp(16px, 1.2vw, 19px);
      line-height: 1.45;
      text-align: center;
    }

    .locations-feature-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: clamp(12px, 1.6vw, 22px);
      height: clamp(440px, 44vw, 680px);
      transition: grid-template-columns 620ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .locations-feature-card {
      position: relative;
      min-width: 0;
      overflow: hidden;
      display: block;
      border-radius: clamp(24px, 2.4vw, 36px);
      background: rgba(245, 247, 249, 0.05);
      color: var(--fg);
      isolation: isolate;
      transition: opacity 280ms ease;
    }

    .locations-feature-grid:has(.locations-feature-card:first-child:hover),
    .locations-feature-grid:has(.locations-feature-card:first-child:focus-visible) {
      grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    }

    .locations-feature-grid:has(.locations-feature-card:last-child:hover),
    .locations-feature-grid:has(.locations-feature-card:last-child:focus-visible) {
      grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    }

    .locations-feature-card img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
    }

    .locations-feature-card::before {
      content: "";
      position: absolute;
      inset: auto 0 0;
      z-index: 1;
      height: min(46%, 360px);
      background: rgba(245, 247, 249, 0.04);
      backdrop-filter: blur(18px) saturate(1.06);
      -webkit-backdrop-filter: blur(18px) saturate(1.06);
      mask-image: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.88) 48%, transparent 100%);
      -webkit-mask-image: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.88) 48%, transparent 100%);
      opacity: 1;
      transition: opacity 300ms ease;
      pointer-events: none;
    }

    .locations-feature-card::after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      z-index: 1;
      height: 46%;
      background: linear-gradient(180deg, rgba(19, 21, 30, 0), rgba(19, 21, 30, 0.52));
      opacity: 1;
      transition: opacity 300ms ease;
      pointer-events: none;
    }

    .locations-feature-copy {
      position: absolute;
      left: clamp(22px, 3vw, 46px);
      right: clamp(22px, 3vw, 46px);
      bottom: clamp(24px, 3.2vw, 52px);
      z-index: 2;
      display: grid;
      gap: 10px;
      color: var(--fg);
      transition: opacity 300ms ease, transform 300ms ease;
    }

    .locations-feature-copy span {
      color: rgba(245, 247, 249, 0.7);
      font-size: 12px;
      line-height: 1;
      text-transform: uppercase;
      letter-spacing: 0.14em;
    }

    .locations-feature-copy h3 {
      margin: 0;
      max-width: 520px;
      color: var(--fg);
      font-size: clamp(28px, 2.8vw, 42px);
      line-height: 1;
      font-weight: 400;
    }

    .locations-feature-copy p {
      margin: 0;
      color: rgba(245, 247, 249, 0.72);
      font-size: clamp(15px, 1.2vw, 18px);
      line-height: 1.35;
    }

    .locations-feature-grid:has(.locations-feature-card:hover) .locations-feature-card:not(:hover)::before,
    .locations-feature-grid:has(.locations-feature-card:hover) .locations-feature-card:not(:hover)::after,
    .locations-feature-grid:has(.locations-feature-card:hover) .locations-feature-card:not(:hover) .locations-feature-copy,
    .locations-feature-grid:has(.locations-feature-card:focus-visible) .locations-feature-card:not(:focus-visible)::before,
    .locations-feature-grid:has(.locations-feature-card:focus-visible) .locations-feature-card:not(:focus-visible)::after,
    .locations-feature-grid:has(.locations-feature-card:focus-visible) .locations-feature-card:not(:focus-visible) .locations-feature-copy {
      opacity: 0;
    }

    .locations-feature-grid:has(.locations-feature-card:hover) .locations-feature-card:not(:hover) .locations-feature-copy,
    .locations-feature-grid:has(.locations-feature-card:focus-visible) .locations-feature-card:not(:focus-visible) .locations-feature-copy {
      transform: translateY(16px);
    }

    @media (max-width: 900px) {
      .locations-feature-section {
        margin: 16px;
        padding: 56px 16px 16px;
        border-radius: 24px;
      }

      .locations-feature-grid,
      .locations-feature-grid:hover {
        display: grid;
        grid-template-columns: 1fr;
        height: auto;
        min-height: 0;
      }

      .locations-feature-grid:has(.locations-feature-card:first-child:hover),
      .locations-feature-grid:has(.locations-feature-card:first-child:focus-visible),
      .locations-feature-grid:has(.locations-feature-card:last-child:hover),
      .locations-feature-grid:has(.locations-feature-card:last-child:focus-visible) {
        grid-template-columns: 1fr;
      }

      .locations-feature-card,
      .locations-feature-grid:hover .locations-feature-card,
      .locations-feature-grid:hover .locations-feature-card:hover {
        flex: none;
        min-height: 420px;
      }

      .locations-feature-grid:hover .locations-feature-card:not(:hover)::before,
      .locations-feature-grid:hover .locations-feature-card:not(:hover)::after,
      .locations-feature-grid:hover .locations-feature-card:not(:hover) .locations-feature-copy {
        opacity: 1;
      }

      .locations-feature-grid:hover .locations-feature-card:not(:hover) .locations-feature-copy {
        transform: none;
      }
    }

    .faq-section {
      padding: clamp(88px, 10vw, 160px) var(--section-px) clamp(96px, 11vw, 180px);
      background: var(--bg);
    }

    .faq-inner {
      max-width: 920px;
      margin: 0 auto;
    }

    .faq-head {
      max-width: 760px;
      margin: 0 auto clamp(24px, 4vw, 44px);
      text-align: center;
    }

    .faq-eyebrow {
      display: block;
      margin-bottom: 14px;
      color: rgba(13, 15, 24, 0.54);
      font-size: 12px;
      line-height: 1;
    }

    .faq-heading {
      margin: 0;
      color: var(--ink);
      font-size: clamp(30px, 3.4vw, 48px);
      line-height: 0.98;
      font-weight: 400;
    }

    .faq-tabs {
      display: flex;
      width: fit-content;
      max-width: 100%;
      margin: 0 auto clamp(28px, 4vw, 52px);
      padding: 4px;
      gap: 4px;
      border: 1px solid rgba(13, 15, 24, 0.06);
      border-radius: 24px;
      background: rgba(13, 15, 24, 0.035);
      box-shadow: 0 22px 42px -34px rgba(13, 15, 24, 0.32);
      overflow-x: auto;
    }

    .faq-tab {
      min-height: 42px;
      padding: 0 20px;
      border: 0;
      border-radius: 18px;
      background: transparent;
      color: rgba(13, 15, 24, 0.68);
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 400;
      white-space: nowrap;
      cursor: pointer;
      transition: color 220ms ease, background 220ms ease;
    }

    .faq-tab.is-active {
      background: #0d0f18;
      color: #f5f7f9;
    }

    .faq-panel {
      max-width: 860px;
      margin: 0 auto;
    }

    .faq-list {
      display: grid;
      gap: 14px;
    }

    .faq-item {
      border: 0;
      border-radius: 24px;
      background: rgba(13, 15, 24, 0.035);
      border: 1px solid rgba(13, 15, 24, 0.06);
      box-shadow:
        0 24px 28px -24px rgba(13, 15, 24, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.62);
      overflow: hidden;
      transition:
        background 220ms ease,
        box-shadow 220ms ease;
    }

    .faq-item[hidden] {
      display: none;
    }

    .faq-item.is-open {
      background: rgba(13, 15, 24, 0.05);
      box-shadow:
        0 30px 34px -26px rgba(13, 15, 24, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
    }

    .faq-question {
      display: grid;
      width: 100%;
      grid-template-columns: 1fr 30px;
      gap: 16px;
      align-items: center;
      min-height: 64px;
      padding: 16px 16px 16px 22px;
      border: 0;
      background: transparent;
      color: var(--ink);
      font-family: var(--font-body);
      font-size: clamp(15px, 1.05vw, 18px);
      line-height: 1.15;
      font-weight: 400;
      text-align: left;
      cursor: pointer;
    }

    .faq-icon {
      position: relative;
      width: 30px;
      height: 30px;
      border-radius: 12px;
      background: transparent;
      color: #0d0f18;
      flex: 0 0 auto;
    }

    .faq-icon::before,
    .faq-icon::after {
      content: "";
      position: absolute;
      inset: 50% auto auto 50%;
      width: 12px;
      height: 1px;
      background: currentColor;
      transform: translate(-50%, -50%);
      transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
    }

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

    .faq-item.is-open .faq-icon::after {
      transform: translate(-50%, -50%) rotate(0deg);
    }

    .faq-answer {
      height: 0;
      overflow: hidden;
      transition: height 340ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .faq-answer-inner {
      padding: 0 22px 20px;
      color: rgba(13, 15, 24, 0.68);
      font-size: clamp(14px, 0.95vw, 16px);
      line-height: 1.55;
    }

    .faq-answer-inner p {
      margin: 0;
    }

    @media (max-width: 640px) {
      .faq-tabs {
        width: 100%;
        justify-content: flex-start;
      }

      .faq-tab {
        padding: 0 16px;
        font-size: 13px;
      }

      .faq-question {
        grid-template-columns: 1fr 34px;
        min-height: 62px;
        padding: 15px 14px 15px 18px;
      }

      .faq-answer-inner {
        padding: 0 18px 20px;
      }
    }

    /* Zajęcia specjalne: shortcode weekendowy jako akordeon w stylu FAQ ze strony głównej */
    .page-subpage-zajecia-specjalne .abra-schedule--weekend {
      --abra-sch-card-bg: transparent;
      --abra-sch-tabs-bg: transparent;
      max-width: 920px;
      margin: 0 auto;
    }

    .page-subpage-zajecia-specjalne .abra-schedule--weekend .weekend-accordion {
      display: grid;
      gap: 14px;
      margin: 0;
      padding: 0;
      background: transparent;
      border-radius: 0;
    }

    .page-subpage-zajecia-specjalne .abra-schedule--weekend .weekend-accordion-item {
      border: 1px solid rgba(13, 15, 24, 0.06);
      border-radius: 24px;
      background: rgba(13, 15, 24, 0.035);
      box-shadow:
        0 24px 28px -24px rgba(13, 15, 24, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.62);
      overflow: hidden;
      transition: background 220ms ease, box-shadow 220ms ease;
    }

    .page-subpage-zajecia-specjalne .abra-schedule--weekend .weekend-accordion-item.open {
      background: rgba(13, 15, 24, 0.05);
      box-shadow:
        0 30px 34px -26px rgba(13, 15, 24, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
    }

    .page-subpage-zajecia-specjalne .abra-schedule--weekend .weekend-accordion-summary {
      display: grid;
      grid-template-columns: 1fr 30px;
      gap: 16px;
      align-items: center;
      min-height: 64px;
      width: 100%;
      margin: 0;
      padding: 16px 16px 16px 22px;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      color: var(--ink);
      font-family: var(--font-body);
      font-size: clamp(15px, 1.05vw, 18px);
      line-height: 1.15;
      font-weight: 400;
      letter-spacing: 0;
      text-transform: none;
      text-align: left;
    }

    .page-subpage-zajecia-specjalne .abra-schedule--weekend .weekend-accordion-summary:hover,
    .page-subpage-zajecia-specjalne .abra-schedule--weekend .weekend-accordion-item.open > .weekend-accordion-summary,
    .page-subpage-zajecia-specjalne .abra-schedule--weekend .weekend-accordion-item.open > .weekend-accordion-summary:hover {
      background: transparent;
      box-shadow: none;
      font-weight: 400;
    }

    .page-subpage-zajecia-specjalne .abra-schedule--weekend .weekend-accordion-summary::after {
      content: "";
      position: static;
      justify-self: center;
      align-self: center;
      width: 12px;
      height: 1px;
      margin: 0;
      border: 0;
      background: currentColor;
      opacity: 1;
      transform: none;
    }

    .page-subpage-zajecia-specjalne .abra-schedule--weekend .weekend-accordion-summary::before {
      content: "";
      position: absolute;
      right: 25px;
      top: 50%;
      width: 1px;
      height: 12px;
      background: currentColor;
      transform: translateY(-50%);
      transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .page-subpage-zajecia-specjalne .abra-schedule--weekend .weekend-accordion-item.open > .weekend-accordion-summary::before {
      transform: translateY(-50%) rotate(90deg);
    }

    .page-subpage-zajecia-specjalne .abra-schedule--weekend .weekend-accordion-item.open > .weekend-accordion-summary::after {
      transform: none;
      margin: 0;
      opacity: 1;
    }

    .page-subpage-zajecia-specjalne .abra-schedule--weekend .weekend-accordion-panel {
      transition: max-height 340ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .page-subpage-zajecia-specjalne .abra-schedule--weekend .weekend-accordion-panel-inner {
      padding: 0 22px 20px;
      border-radius: 0;
      background: transparent;
      color: rgba(13, 15, 24, 0.68);
      font-size: clamp(14px, 0.95vw, 16px);
      line-height: 1.55;
    }

    .page-subpage-zajecia-specjalne .abra-schedule--weekend .weekend-accordion .weekend-classes .weekend-class-item {
      padding: 14px 0;
      border-top: 1px solid rgba(13, 15, 24, 0.06);
      background: transparent;
    }

    .page-subpage-zajecia-specjalne .abra-schedule--weekend .weekend-accordion .weekend-classes .weekend-class-item:first-child {
      border-top: 0;
    }

    .page-subpage-zajecia-specjalne .abra-schedule--weekend .weekend-accordion .weekend-classes .weekend-class-item:nth-child(odd),
    .page-subpage-zajecia-specjalne .abra-schedule--weekend .weekend-accordion .weekend-classes .weekend-class-item:nth-child(even) {
      background: transparent;
    }

    .page-subpage-zajecia-specjalne .abra-schedule--weekend .weekend-class-title {
      color: var(--ink);
      font-size: clamp(15px, 1.05vw, 18px);
      line-height: 1.2;
      font-weight: 400;
      letter-spacing: 0;
      text-transform: none;
    }

    .page-subpage-zajecia-specjalne .abra-schedule--weekend .weekend-class-meta,
    .page-subpage-zajecia-specjalne .abra-schedule--weekend .weekend-class-location,
    .page-subpage-zajecia-specjalne .abra-schedule--weekend .weekend-class-instructor {
      color: rgba(13, 15, 24, 0.62);
      font-size: 13px;
      line-height: 1.35;
      letter-spacing: 0;
      text-transform: none;
    }

    @media (max-width: 640px) {
      .page-subpage-zajecia-specjalne .abra-schedule--weekend .weekend-accordion-summary {
        grid-template-columns: 1fr 34px;
        min-height: 62px;
        padding: 15px 14px 15px 18px;
      }

      .page-subpage-zajecia-specjalne .abra-schedule--weekend .weekend-accordion-summary::before {
        right: 30px;
      }

      .page-subpage-zajecia-specjalne .abra-schedule--weekend .weekend-accordion-panel-inner {
        padding: 0 18px 20px;
      }
    }

    .site-footer {
      padding: clamp(48px, 6vw, 88px) var(--section-px) 28px;
      background: var(--yellow);
      color: var(--ink);
      overflow: hidden;
    }

    .footer-inner {
      width: 100%;
      max-width: 1920px;
      margin: 0 auto;
      padding: 0;
      background: transparent;
      border-radius: 0;
      color: var(--ink);
    }

    .footer-wordmark {
      display: block;
      margin: 0 0 clamp(28px, 4vw, 64px);
      color: var(--ink);
      font-family: var(--font-display);
      font-size: clamp(72px, 16vw, 278px);
      font-weight: 400;
      line-height: 0.78;
      text-decoration: none;
      white-space: nowrap;
    }

    .footer-top {
      display: block;
    }

    .footer-brand {
      display: none;
    }

    .footer-columns {
      display: grid;
      grid-template-columns: repeat(4, minmax(128px, 1fr));
      gap: clamp(28px, 5vw, 96px);
      align-items: start;
    }

    .footer-column-title {
      margin: 0 0 22px;
      color: var(--ink);
      font-size: 16px;
      line-height: 1;
      font-weight: 400;
    }

    .footer-list {
      display: grid;
      gap: 14px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .footer-link {
      display: inline-flex;
      width: fit-content;
      align-items: center;
      gap: 7px;
      color: var(--ink);
      font-size: 16px;
      line-height: 1.2;
      text-decoration: none;
    }

    .footer-link:hover .link-label span,
    .footer-link:focus-visible .link-label span {
      transform: translateY(-110%);
    }

    .footer-link:hover .link-label::after,
    .footer-link:focus-visible .link-label::after {
      transform: translateY(-100%);
    }

    .footer-bottom {
      display: flex;
      justify-content: space-between;
      gap: 24px;
      margin-top: clamp(28px, 4vw, 56px);
      padding-top: 0;
      color: rgba(13, 15, 24, 0.72);
      font-size: 13px;
      line-height: 1.4;
    }

    .footer-bottom-links {
      display: flex;
      gap: 18px;
      flex-wrap: wrap;
    }

    .footer-bottom a {
      color: rgba(13, 15, 24, 0.72);
      text-decoration: none;
      transition: color 180ms ease;
    }

    .footer-bottom a:hover,
    .footer-bottom a:focus-visible {
      color: var(--ink);
    }

    @media (max-width: 980px) {
      .footer-top {
        grid-template-columns: 1fr;
      }

      .footer-columns {
        grid-template-columns: repeat(2, minmax(160px, 1fr));
      }

      .footer-wordmark {
        white-space: normal;
        line-height: 0.86;
      }
    }

    @media (max-width: 640px) {
      .site-footer {
        padding-bottom: 24px;
      }

      .footer-columns {
        grid-template-columns: 1fr;
        gap: 28px;
      }

      .footer-bottom {
        flex-direction: column;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
      }

      .link-label span,
      .link-label::after,
      .button-label span,
      .button-label::after {
        transform: none !important;
      }
    }

    /* O nas */
    .about-page {
      background: var(--bg);
      color: var(--ink);
      font-family: "Vinila", system-ui, sans-serif;
      font-weight: 400;
      letter-spacing: 0;
      padding-top: 0;
    }

    .about-page *,
    .about-page *::before,
    .about-page *::after {
      font-weight: 400;
      letter-spacing: 0;
      font-synthesis: none;
    }

    .about-section {
      width: 100%;
      padding-inline: var(--section-px);
    }

    .about-hero {
      position: relative;
      width: auto;
      margin: var(--stage-gap);
      padding: 0;
      color: var(--fg);
    }

    .about-section {
      margin-top: clamp(72px, 9vw, 120px);
    }

    .about-hero-stage {
      position: relative;
      min-height: 480px;
      height: calc(80svh - (var(--stage-gap) * 2));
      overflow: hidden;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding: clamp(16px, 3vw, 32px);
      border-radius: var(--stage-radius);
      background: var(--ink);
    }

    .about-hero-stage::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(13, 15, 24, 0.04), rgba(13, 15, 24, 0.36));
      pointer-events: none;
    }

    .about-hero--blur-mask .about-hero-stage {
      padding: 0;
    }

    .about-hero--blur-mask .about-hero-stage::after {
      inset: auto 0 0;
      z-index: 1;
      height: min(calc(48% + 100px), 460px);
      background: rgba(245, 247, 249, 0.04);
      backdrop-filter: blur(18px) saturate(1.06);
      -webkit-backdrop-filter: blur(18px) saturate(1.06);
      mask-image: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.88) 48%, transparent 100%);
      -webkit-mask-image: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.88) 48%, transparent 100%);
    }

    .about-media-img,
    .about-hero-image {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .about-hero-image {
      position: absolute;
      inset: 0;
    }

    .about-hero-panel {
      position: relative;
      z-index: 1;
      display: grid;
      justify-items: center;
      gap: 16px;
      width: min(780px, 100%);
      padding: clamp(24px, 3vw, 44px);
      text-align: center;
      border: 1px solid rgba(255, 255, 255, 0.72);
      border-radius: 24px;
      background: rgba(245, 247, 249, 0.92);
      box-shadow:
        0 18px 28px -26px rgba(13, 15, 24, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    }

    .about-hero--blur-mask .about-hero-panel {
      z-index: 2;
      width: min(920px, calc(100% - 48px));
      margin-bottom: clamp(26px, 4vw, 58px);
      padding: clamp(20px, 3vw, 40px);
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    .about-hero--blur-mask .about-hero-panel h1 {
      color: var(--fg);
      text-shadow: 0 18px 44px rgba(13, 15, 24, 0.42);
    }

    .about-hero--blur-mask .about-hero-panel p {
      max-width: 620px;
      color: rgba(245, 247, 249, 0.86);
      font-weight: 400;
      font-synthesis: none;
      text-shadow: 0 6px 18px rgba(13, 15, 24, 0.22);
    }

    .about-hero-panel h1,
    .about-story-card h2,
    .about-final h2 {
      margin: 0;
      color: var(--ink);
      line-height: 1.02;
    }

    .about-hero-panel h1 {
      font-size: clamp(54px, 7vw, 118px);
    }

    .about-hero-panel p,
    .about-card p,
    .about-story-card p,
    .about-final p {
      margin: 0;
      color: rgba(13, 15, 24, 0.72);
      font-size: 16px;
      line-height: 1.45;
    }

    .about-pill {
      display: inline-flex;
      align-items: center;
      width: fit-content;
      min-height: 24px;
      padding: 0 10px;
      border-radius: 999px;
      background: var(--accent);
      color: var(--ink);
      font-size: 10px;
      line-height: 1;
      text-transform: capitalize;
      box-shadow: 0 12px 20px -18px rgba(13, 15, 24, 0.42);
    }

    .about-button,
    .about-link-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--button-gap);
      font-size: 14px;
      line-height: 1;
      white-space: nowrap;
      overflow: hidden;
    }

    .about-link-button {
      min-height: 32px;
      padding-inline: 0;
      color: var(--ink);
      background: transparent;
      transition: color 180ms ease;
    }

    .about-link-button:hover,
    .about-link-button:focus-visible {
      color: rgba(13, 15, 24, 0.62);
    }

    .about-button .icon-arrow,
    .about-link-button .icon-arrow {
      width: 18px;
      height: 18px;
      stroke-width: 1;
      flex: 0 0 auto;
    }

    .about-section > .news-head {
      padding: 0;
      margin-bottom: 40px;
    }

    .about-story-card h2,
    .about-final h2 {
      font-size: clamp(30px, 3.4vw, 48px);
    }

    .about-feature-grid,
    .about-offer-grid,
    .about-stats-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }

    .about-card {
      border: 1px solid rgba(13, 15, 24, 0.06);
      border-radius: 24px;
      background: rgba(13, 15, 24, 0.035);
      box-shadow:
        0 18px 28px -26px rgba(13, 15, 24, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    }

    .about-feature-card,
    .about-offer-card,
    .about-story-card,
    .about-location-copy,
    .about-stat-card {
      display: grid;
      align-content: start;
      gap: 18px;
      padding: clamp(22px, 2vw, 32px);
    }

    .about-feature-card {
      min-height: 280px;
      align-content: space-between;
      transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .about-feature-card:nth-child(2) {
      transform: rotate(0.8deg);
    }

    .about-feature-card:nth-child(3) {
      transform: rotate(-0.7deg);
    }

    .about-feature-card:hover {
      transform: rotate(0deg) translateY(-2px);
    }

    .about-card h3 {
      margin: 0;
      color: var(--ink);
      font-size: 24px;
      line-height: 1.08;
    }

    .about-card-index {
      color: rgba(13, 15, 24, 0.42);
      font-size: 13px;
    }

    .about-split {
      display: grid;
      grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
      gap: 16px;
      align-items: stretch;
    }

    .about-media {
      overflow: hidden;
      min-height: 100%;
      border-radius: 20px;
      background: rgba(13, 15, 24, 0.04);
      transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .about-media:hover {
      transform: rotate(-1.2deg);
    }

    .about-story-card {
      justify-content: center;
    }

    .about-location-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
    }

    .about-location-card {
      display: grid;
      grid-template-rows: minmax(280px, 1fr) auto;
      gap: 12px;
      transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .about-location-card:first-child {
      transform: rotate(-0.7deg);
    }

    .about-location-card:last-child {
      transform: rotate(0.7deg);
    }

    .about-location-card:hover {
      transform: rotate(0deg);
    }

    .about-actions {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
    }

    .about-team-section {
      padding-inline: 0;
    }

    .about-team-section > .news-head {
      padding: 0 var(--section-px);
    }

    .about-team-card {
      position: relative;
      flex: 0 0 clamp(280px, 28vw, 400px);
      aspect-ratio: 4 / 5;
      min-height: 0;
      border-radius: 34px;
      color: var(--fg);
      outline: none;
      isolation: isolate;
    }

    .about-team-card::after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      z-index: 1;
      height: min(48%, 320px);
      background: rgba(245, 247, 249, 0.04);
      backdrop-filter: blur(18px) saturate(1.06);
      -webkit-backdrop-filter: blur(18px) saturate(1.06);
      mask-image: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.88) 48%, transparent 100%);
      -webkit-mask-image: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.88) 48%, transparent 100%);
      opacity: 0;
      transition: opacity 280ms ease;
      pointer-events: none;
    }

    .about-team-card .about-team-image {
      transition: filter 280ms ease;
    }

    .about-team-overlay {
      position: absolute;
      inset: auto 0 0;
      z-index: 2;
      display: grid;
      gap: 14px;
      padding: 0 clamp(22px, 2.4vw, 34px) clamp(28px, 3vw, 42px);
      text-align: center;
      opacity: 0;
      transform: translateY(18px);
      transition: opacity 280ms ease, transform 280ms ease;
      pointer-events: none;
    }

    .about-team-overlay span {
      color: rgba(245, 247, 249, 0.76);
      font-size: 12px;
      line-height: 1;
      text-transform: uppercase;
      letter-spacing: 0.16em;
    }

    .about-team-overlay p {
      margin: 0;
      color: var(--fg);
      font-size: clamp(15px, 1.15vw, 18px);
      line-height: 1.32;
    }

    .about-team-card:hover::after,
    .about-team-card:focus::after,
    .about-team-card:focus-visible::after {
      opacity: 1;
    }

    .about-team-card:hover .about-team-image,
    .about-team-card:focus .about-team-image,
    .about-team-card:focus-visible .about-team-image {
      filter: brightness(0.82) saturate(0.96);
    }

    .about-team-card:hover .about-team-overlay,
    .about-team-card:focus .about-team-overlay,
    .about-team-card:focus-visible .about-team-overlay {
      opacity: 1;
      transform: translateY(0);
    }

    .about-centered-action {
      display: flex;
      justify-content: center;
      margin-top: 24px;
    }

    .about-stat-card {
      min-height: 210px;
      justify-content: space-between;
    }

    .about-stat-card h3 span {
      display: block;
      margin-bottom: 8px;
      color: var(--ink);
      font-size: clamp(42px, 5vw, 78px);
      line-height: 0.9;
    }

    .about-final-section {
      margin-bottom: clamp(72px, 10vw, 120px);
    }

    .about-final {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) auto;
      gap: 24px;
      align-items: center;
      padding: clamp(36px, 5vw, 72px);
      border-radius: 32px;
      background: var(--accent);
    }

    .about-final > div:first-child {
      display: grid;
      gap: 16px;
    }

    @media (max-width: 980px) {
      .about-section {
        padding-inline: 32px;
      }

      .about-feature-grid,
      .about-offer-grid,
      .about-stats-grid,
      .about-split,
      .about-location-grid,
      .about-final {
        grid-template-columns: 1fr;
      }

      .about-feature-card,
      .about-feature-card:nth-child(2),
      .about-feature-card:nth-child(3),
      .about-location-card:first-child,
      .about-location-card:last-child {
        transform: none;
      }

      .about-hero-stage {
        min-height: 520px;
        border-radius: 24px;
      }
    }

    @media (max-width: 640px) {
      .about-section {
        padding-inline: 16px;
      }

      .about-hero {
        margin: 16px;
      }

      .about-hero-stage {
        padding: 16px;
      }

      .about-hero-panel {
        padding: 22px;
      }

      .about-actions {
        align-items: stretch;
        flex-direction: column;
      }

      .about-actions .about-button,
      .about-actions .about-link-button,
      .about-hero-panel .about-button {
        width: 100%;
      }

    }

    /* ── Generic subpages ── */
    .page-subpage {
      padding-top: 0;
    }

    .page-subhero-stage {
      min-height: 440px;
      height: calc(72svh - (var(--stage-gap) * 2));
    }

    .page-copy-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(320px, 0.78fr);
      gap: 16px;
      align-items: stretch;
    }

    .page-copy-grid.is-single {
      grid-template-columns: 1fr;
    }

    .page-rich-text,
    .page-shortcode-card,
    .page-contact-card {
      padding: clamp(24px, 3vw, 40px);
    }

    .page-rich-text {
      color: rgba(13, 15, 24, 0.76);
      font-size: clamp(17px, 1.25vw, 21px);
      line-height: 1.48;
    }

    .page-rich-text > *:first-child {
      margin-top: 0;
    }

    .page-rich-text > *:last-child {
      margin-bottom: 0;
    }

    .page-mini-grid,
    .page-card-grid {
      display: grid;
      gap: 16px;
    }

    .page-mini-card {
      display: grid;
      gap: 14px;
      padding: clamp(22px, 2vw, 30px);
    }

    .page-mini-card p {
      margin: 0;
    }

    .page-section-lead {
      max-width: 720px;
      margin: -18px 0 32px;
      color: rgba(13, 15, 24, 0.64);
      font-size: 18px;
      line-height: 1.45;
    }

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

    .page-query-card {
      overflow: hidden;
      display: grid;
      grid-template-rows: minmax(220px, auto) 1fr;
    }

    .page-query-media {
      min-height: 220px;
      border-radius: 0;
    }

    .page-query-media:hover {
      transform: none;
    }

    .page-query-copy {
      display: grid;
      align-content: start;
      gap: 14px;
      padding: 24px;
    }

    .page-query-copy h3 {
      margin: 0;
      font-size: clamp(22px, 2vw, 30px);
      line-height: 1.04;
    }

    .page-query-copy h3 a {
      color: inherit;
    }

    .page-query-copy p,
    .page-empty-state {
      margin: 0;
      color: rgba(13, 15, 24, 0.68);
      font-size: 16px;
      line-height: 1.44;
    }

    .page-empty-state {
      padding: 28px;
    }

    .page-shortcode-card {
      overflow: hidden;
    }

    .page-news-list {
      margin-top: clamp(72px, 9vw, 120px);
    }

    .page-news-track {
      padding-right: var(--section-px);
    }

    .page-contact-form {
      display: grid;
      gap: 12px;
      margin-top: 18px;
    }

    .page-contact-form input,
    .page-contact-form textarea {
      width: 100%;
      border: 1px solid rgba(13, 15, 24, 0.08);
      border-radius: 18px;
      padding: 15px 16px;
      background: rgba(255, 255, 255, 0.76);
      color: var(--ink);
      font: inherit;
    }

    .page-contact-form textarea {
      min-height: 150px;
      resize: vertical;
    }

    .page-contact-form label {
      color: rgba(13, 15, 24, 0.62);
      font-size: 14px;
      line-height: 1.35;
    }

    .page-legal-text {
      max-width: 980px;
      margin-inline: auto;
    }

    @media (max-width: 1100px) {
      .page-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 860px) {
      .page-copy-grid,
      .page-card-grid {
        grid-template-columns: 1fr;
      }

      .page-subhero-stage {
        height: auto;
        min-height: 520px;
      }
    }

    /* Style guide */
    .style-guide-page {
      padding: calc(var(--header-top) + var(--header-h) + 56px) var(--section-px) clamp(80px, 10vw, 140px);
      background: var(--bg);
      color: var(--ink);
    }

    .style-guide-hero {
      display: grid;
      gap: 16px;
      max-width: 980px;
      margin: 0 0 clamp(72px, 9vw, 120px);
    }

    .style-guide-hero h1 {
      margin: 0;
      font-size: clamp(54px, 8vw, 132px);
      line-height: 0.88;
      font-weight: 400;
    }

    .style-guide-hero p,
    .style-guide-section p {
      margin: 0;
      color: rgba(13, 15, 24, 0.68);
      font-size: clamp(16px, 1.15vw, 19px);
      line-height: 1.45;
    }

    .style-guide-section {
      display: grid;
      gap: 28px;
      margin-top: clamp(56px, 8vw, 96px);
    }

    .style-guide-head {
      display: grid;
      gap: 10px;
    }

    .style-guide-swatches,
    .style-guide-token-grid,
    .style-guide-type,
    .style-guide-card-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }

    .style-guide-swatches {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .style-guide-swatch,
    .style-guide-token-card,
    .style-guide-type > div,
    .style-guide-form,
    .style-guide-code-list {
      display: grid;
      gap: 14px;
      padding: clamp(18px, 2vw, 28px);
      border: 1px solid rgba(13, 15, 24, 0.06);
      border-radius: 24px;
      background: rgba(255, 255, 255, 0.52);
      box-shadow:
        0 18px 28px -26px rgba(13, 15, 24, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
    }

    .style-guide-swatch span {
      display: block;
      aspect-ratio: 1;
      border-radius: 18px;
      border: 1px solid rgba(13, 15, 24, 0.08);
    }

    .style-guide-swatch strong,
    .style-guide-token-card h3 {
      margin: 0;
      font-size: 18px;
      line-height: 1.1;
      font-weight: 400;
    }

    .style-guide-page code {
      width: fit-content;
      padding: 4px 7px;
      border-radius: 8px;
      background: rgba(13, 15, 24, 0.07);
      color: rgba(13, 15, 24, 0.78);
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 12px;
      line-height: 1.2;
    }

    .style-guide-token-card ul {
      display: grid;
      gap: 10px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .style-guide-token-card li {
      display: grid;
      grid-template-columns: minmax(130px, 0.8fr) minmax(120px, 0.7fr) minmax(0, 1fr);
      gap: 12px;
      align-items: baseline;
      color: rgba(13, 15, 24, 0.66);
      font-size: 14px;
      line-height: 1.3;
    }

    .style-guide-token-card em {
      font-style: normal;
    }

    .style-guide-display {
      margin: 0;
      font-size: clamp(48px, 7vw, 112px);
      line-height: 0.9;
      font-weight: 400;
    }

    .style-guide-type-scale {
      display: grid;
      gap: 12px;
    }

    .style-guide-type-scale article {
      display: grid;
      grid-template-columns: minmax(120px, 0.28fr) minmax(0, 1fr) auto;
      gap: clamp(16px, 2vw, 28px);
      align-items: baseline;
      padding: 22px 0;
      border-top: 1px solid rgba(13, 15, 24, 0.08);
    }

    .style-guide-type-scale article:last-child {
      border-bottom: 1px solid rgba(13, 15, 24, 0.08);
    }

    .style-guide-type-scale h1,
    .style-guide-type-scale h2,
    .style-guide-type-scale h3,
    .style-guide-type-scale h4,
    .style-guide-type-scale h5,
    .style-guide-type-scale h6,
    .style-guide-type-scale p {
      margin: 0;
      max-width: 860px;
      font-weight: 400;
    }

    .style-guide-type-scale h1 {
      font-size: clamp(54px, 7vw, 118px);
      line-height: 0.9;
    }

    .style-guide-type-scale h2 {
      font-size: clamp(30px, 3.4vw, 48px);
      line-height: 1;
    }

    .style-guide-type-scale h3 {
      font-size: clamp(24px, 2.4vw, 34px);
      line-height: 1.06;
    }

    .style-guide-type-scale h4 {
      font-size: clamp(20px, 1.8vw, 28px);
      line-height: 1.1;
    }

    .style-guide-type-scale h5 {
      font-size: clamp(17px, 1.4vw, 22px);
      line-height: 1.18;
    }

    .style-guide-type-scale h6 {
      color: rgba(13, 15, 24, 0.62);
      font-size: 13px;
      line-height: 1.1;
      text-transform: uppercase;
      letter-spacing: 0.12em;
    }

    .style-guide-type-scale p {
      color: rgba(13, 15, 24, 0.68);
      font-size: 16px;
      line-height: 1.45;
    }

    .style-guide-type-scale .style-guide-lead {
      font-size: clamp(18px, 1.4vw, 22px);
      line-height: 1.38;
    }

    .style-guide-type-scale .style-guide-small {
      font-size: 13px;
      line-height: 1.35;
    }

    .style-guide-component-row,
    .style-guide-code-list {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
    }

    .style-guide-form {
      max-width: 720px;
    }

    .style-guide-dark {
      margin-inline: calc(var(--section-px) * -1);
      padding: clamp(56px, 7vw, 92px) var(--section-px);
      background: #13151e;
      color: var(--fg);
    }

    .style-guide-dark .news-heading,
    .style-guide-dark .news-card-title {
      color: var(--fg);
    }

    .style-guide-dark .news-eyebrow,
    .style-guide-dark p {
      color: rgba(245, 247, 249, 0.68);
    }

    .style-guide-card-grid {
      align-items: start;
    }

    .style-guide-card-grid .about-team-card {
      width: min(360px, 100%);
      flex: none;
    }

    @media (max-width: 980px) {
      .style-guide-swatches,
      .style-guide-token-grid,
      .style-guide-type,
      .style-guide-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .style-guide-token-card li {
        grid-template-columns: 1fr;
      }

      .style-guide-type-scale article {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 640px) {
      .style-guide-page {
        padding-inline: 16px;
      }

      .style-guide-swatches,
      .style-guide-token-grid,
      .style-guide-type,
      .style-guide-card-grid {
        grid-template-columns: 1fr;
      }

      .style-guide-dark {
        margin-inline: -16px;
        padding-inline: 16px;
      }
    }

    /* Event page: La Vibra Cubana */
    .event-page {
      padding: var(--header-top) 0 clamp(80px, 10vw, 140px);
      background: var(--bg);
      color: #111318;
      overflow-x: clip;
    }

    .ticket-landing {
      --ticket-green: #17241e;
      --ticket-green-2: #26352c;
      --ticket-cream: #fff8e8;
      --ticket-line: rgba(25, 21, 14, 0.16);
      --ticket-yellow: #ffc716;
      --ticket-yellow-2: #f7b80b;
      --ticket-red: #cf1f22;
      position: relative;
      isolation: isolate;
      width: min(1280px, calc(100% - (var(--stage-gap) * 2)));
      margin: 0 auto;
    }

    .ticket-deco {
      position: absolute;
      z-index: -1;
      pointer-events: none;
      user-select: none;
      filter: drop-shadow(0 24px 28px rgba(28, 36, 25, 0.2));
    }

    .ticket-deco--palm-left {
      width: min(360px, 28vw);
      left: -150px;
      bottom: 3%;
      transform: rotate(-8deg);
    }

    .ticket-deco--palm-right {
      width: min(440px, 30vw);
      right: -90px;
      top: 20%;
      transform: rotate(9deg) scaleX(-1);
    }

    .ticket-deco--drum {
      width: min(190px, 15vw);
      left: -98px;
      bottom: 15%;
      transform: rotate(-12deg);
    }

    .ticket-deco--flower {
      width: min(150px, 18vw);
      left: -104px;
      bottom: -18px;
      transform: rotate(10deg);
    }

    .ticket-card {
      position: relative;
      display: block;
      overflow: visible;
      border-radius: var(--stage-radius);
      background: transparent;
    }

    .ticket-hero {
      position: relative;
      height: min(80svh, 820px);
      min-height: 560px;
      overflow: hidden;
      border-radius: inherit;
      background:
        linear-gradient(180deg, rgba(13, 18, 16, 0.08), rgba(13, 18, 16, 0.22)),
        var(--ticket-green);
      box-shadow: 0 40px 80px -28px rgba(31, 27, 18, 0.22);
    }

    .ticket-hero::after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: 34%;
      background: linear-gradient(180deg, transparent, rgba(23, 36, 30, 0.72));
      pointer-events: none;
    }

    .ticket-hero-image {
      position: absolute;
      inset: 0;
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 28%;
    }

    .ticket-panel {
      position: relative;
      z-index: 2;
      width: min(1040px, calc(100% - 48px));
      margin: -100px auto 0;
      padding: clamp(30px, 4vw, 54px);
      border-radius: clamp(26px, 3vw, 40px);
      background: #ebeff1;
      border: 1px solid rgba(13, 15, 24, 0.1);
      box-shadow:
        0 28px 38px -24px rgba(13, 15, 24, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
      text-align: center;
    }

    .ticket-panel + .ticket-panel {
      margin-top: clamp(18px, 2.6vw, 28px);
    }

    .event-lead + .ticket-panel {
      margin-top: clamp(36px, 5vw, 64px);
    }

    .event-lead {
      margin: 200px auto clamp(28px, 4vw, 44px);
      padding: 0 clamp(20px, 4vw, 48px);
      max-width: 900px;
      text-align: center;
    }

    .event-about-kicker {
      margin: 0 0 clamp(14px, 1.8vw, 20px);
      color: rgba(13, 15, 24, 0.5);
      font-size: clamp(12px, 1.2vw, 14px);
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .event-promise {
      max-width: 760px;
      margin: 0 auto;
      color: var(--ink);
      font-size: clamp(24px, 3.2vw, 44px);
      line-height: 1.08;
      font-weight: 400;
    }

    .event-about {
      width: min(1040px, calc(100% - 48px));
      margin: 200px auto 0;
      text-align: center;
    }

    .event-subtitle {
      margin: 0 0 clamp(20px, 2.6vw, 30px);
      color: var(--ink);
      font-size: clamp(22px, 2.8vw, 34px);
      line-height: 1;
      font-weight: 400;
    }

    .event-about .event-subtitle + .event-subtitle,
    .event-audience + .event-subtitle {
      margin-top: clamp(36px, 5vw, 56px);
    }

    .event-audience {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: clamp(16px, 2.2vw, 26px);
      text-align: left;
    }

    .event-audience-card {
      display: flex;
      flex-direction: column;
      min-height: 230px;
      padding: clamp(28px, 3vw, 38px) clamp(24px, 2.6vw, 32px);
    }

    .event-audience-card .card-h {
      margin: auto 0 0;
    }

    .program-stage {
      position: relative;
      display: flex;
      justify-content: center;
      margin: 200px 0;
      padding: 0;
    }

    .program-graphic {
      position: relative;
      width: 68%;
      min-width: 300px;
      max-width: 700px;
      aspect-ratio: 4 / 5;
      border-radius: clamp(20px, 2.4vw, 32px);
      overflow: hidden;
      border: 1px solid rgba(13, 15, 24, 0.1);
      background: var(--ticket-green);
      box-shadow: 0 40px 70px -34px rgba(13, 15, 24, 0.5);
    }

    .program-graphic img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .program-chips {
      position: absolute;
      inset: 0;
      margin: 0;
      padding: 0;
      list-style: none;
      pointer-events: none;
    }

    .program-chip {
      position: absolute;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 18px;
      border-radius: 999px;
      background: #fff;
      color: var(--ink);
      font-size: clamp(13px, 1.35vw, 16px);
      font-weight: 700;
      line-height: 1;
      white-space: nowrap;
      box-shadow: 0 16px 30px -16px rgba(13, 15, 24, 0.42);
      font-size: 20px;
      pointer-events: auto;
      transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 260ms ease;
    }

    .program-chip span {
      font-size: 1.15em;
      line-height: 1;
    }

    .program-chip--1 { top: 8%;  left: 8%;  transform: rotate(-4deg); }
    .program-chip--2 { top: 19%; right: 6%; transform: rotate(3deg); }
    .program-chip--3 { top: 42%; left: 4%;  transform: rotate(-3deg); }
    .program-chip--4 { top: 54%; right: 4%; transform: rotate(4deg); }
    .program-chip--5 { top: 73%; left: 7%;  transform: rotate(-2deg); }
    .program-chip--6 { bottom: 7%; right: 8%; transform: rotate(3deg); }

    .program-chip:hover {
      transform: rotate(0deg) scale(1.04);
      box-shadow: 0 22px 38px -16px rgba(13, 15, 24, 0.5);
    }

    @media (max-width: 760px) {
      .event-lead {
        margin-top: 100px;
      }

      .event-about {
        margin-top: 100px;
      }

      .event-promise {
        font-size: clamp(28px, 6.4vw, 40px);
      }

      .program-stage {
        width: 100vw;
        margin: 100px 0;
        margin-left: 50%;
        transform: translateX(-50%);
        overflow: visible;
        padding: 0;
      }

      .program-graphic {
        width: calc(100vw - 64px);
        min-width: 0;
        max-width: none;
      }

      .program-chip {
        padding: 7px 13px;
        font-size: 14px;
        box-shadow: 0 10px 22px -12px rgba(13, 15, 24, 0.42);
      }

      .program-chip--1 { top: 4%;  left: 16px; right: auto; }
      .program-chip--2 { top: 18%; right: 16px; left: auto; }
      .program-chip--3 { top: 38%; left: 16px; right: auto; }
      .program-chip--4 { top: 54%; right: 16px; left: auto; }
      .program-chip--5 { top: 72%; left: 16px; right: auto; bottom: auto; }
      .program-chip--6 { top: 88%; right: 16px; left: auto; bottom: auto; }

      .ticket-stepper {
        grid-template-columns: 40px 40px 40px;
      }

      .ticket-buy-row {
        gap: 10px;
      }

      .ticket-buy-button {
        gap: 10px;
        padding: 0 16px;
        font-size: clamp(16px, 4.4vw, 22px);
      }
    }

    .event-social {
      margin-top: clamp(44px, 6vw, 84px);
    }

    @media (max-width: 680px) {
      .event-audience {
        grid-template-columns: 1fr;
        gap: 0;
      }

      .event-audience-card {
        position: sticky;
        margin-bottom: 18px;
      }

      .event-audience-card:nth-child(1) { top: 200px; z-index: 1; }
      .event-audience-card:nth-child(2) { top: 224px; z-index: 2; }
      .event-audience-card:nth-child(3) { top: 248px; z-index: 3; }

      .familia-card.event-audience-card:nth-child(1),
      .familia-card.event-audience-card:nth-child(2),
      .familia-card.event-audience-card:nth-child(3) {
        transform: none;
      }
    }

    /* ── Artyści / prowadzący (sekcja powtarzalna) ── */
    .event-artists {
      margin-top: clamp(56px, 8vw, 110px);
      text-align: center;
    }

    .event-artists-title {
      margin: 0;
      color: var(--ink);
      font-size: clamp(40px, 6vw, 96px);
      line-height: 0.96;
      font-weight: 400;
    }

    .event-artists-lead {
      max-width: 560px;
      margin: clamp(12px, 1.6vw, 18px) auto clamp(36px, 5vw, 64px);
      color: rgba(13, 15, 24, 0.66);
      font-size: clamp(15px, 1.5vw, 19px);
      line-height: 1.4;
    }

    .artist-list {
      display: grid;
      gap: clamp(32px, 5vw, 72px);
    }

    .artist {
      display: grid;
      grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
      gap: clamp(24px, 4vw, 56px);
      align-items: center;
      text-align: left;
    }

    .artist:nth-child(even) .artist-media {
      order: 2;
    }

    .artist-media {
      position: relative;
      aspect-ratio: 4 / 5;
      overflow: hidden;
      border-radius: clamp(20px, 2.4vw, 32px);
      background: var(--ticket-green);
      border: 1px solid rgba(13, 15, 24, 0.1);
      box-shadow: 0 34px 64px -30px rgba(31, 27, 18, 0.45);
    }

    .artist-media-asset {
      position: absolute;
      inset: 0;
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .artist-tagline {
      margin: 0 0 10px;
      color: var(--ticket-green-2);
      font-size: clamp(13px, 1.3vw, 15px);
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .artist-name {
      margin: 0 0 clamp(16px, 2vw, 24px);
      color: var(--ink);
      font-size: clamp(32px, 4vw, 56px);
      line-height: 0.98;
      font-weight: 400;
    }

    .artist-text {
      max-width: 56ch;
      margin: 0 0 14px;
      color: rgba(13, 15, 24, 0.74);
      font-size: clamp(15px, 1.4vw, 18px);
      line-height: 1.5;
    }

    .artist-text:last-child {
      margin-bottom: 0;
    }

    .artist-media--teaser {
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px dashed rgba(13, 15, 24, 0.18);
      background: #ebeff1;
    }

    .artist-media--teaser span {
      color: rgba(13, 15, 24, 0.4);
      font-size: clamp(20px, 2.4vw, 30px);
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .event-artists + .ticket-panel {
      margin-top: clamp(48px, 7vw, 96px);
    }

    @media (max-width: 760px) {
      .artist {
        grid-template-columns: 1fr;
        text-align: center;
      }

      .artist:nth-child(even) .artist-media {
        order: 0;
      }

      .artist-media {
        width: 100%;
        max-width: 340px;
        margin-inline: auto;
      }

      .artist-text {
        margin-inline: auto;
      }
    }

    .ticket-tags {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin: 0 0 clamp(16px, 2vw, 24px);
    }

    .ticket-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin: 0;
      padding: 8px 16px 8px 12px;
      border-radius: 999px;
      background: #41433a;
      color: var(--ticket-cream);
      font-size: 15px;
      font-weight: 700;
      line-height: 1;
    }

    .ticket-pill-icon {
      display: inline-flex;
      flex: 0 0 auto;
      color: var(--ticket-yellow);
    }

    .ticket-pill-icon svg {
      width: 18px;
      height: 18px;
    }

    .ticket-title {
      width: 100%;
      margin: 0 0 clamp(16px, 2.2vw, 26px);
      color: #111318;
      font-size: clamp(40px, 5vw, 72px);
      line-height: 0.96;
      font-weight: 400;
      white-space: nowrap;
    }

    .ticket-intro {
      max-width: 620px;
      margin: clamp(24px, 4vw, 38px) auto 0;
      color: #191b20;
      font-size: clamp(15px, 1.45vw, 18px);
      line-height: 1.44;
      text-align: center;
    }

    .ticket-picker h2 {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      margin: 0 0 clamp(24px, 4vw, 38px);
      color: #191b20;
      font-size: clamp(25px, 4vw, 34px);
      line-height: 1;
      font-weight: 700;
      text-align: center;
    }

    .ticket-picker h2 span {
      color: rgba(13, 15, 24, 0.5);
      font-size: 18px;
    }

    .ticket-options {
      display: grid;
      gap: 14px;
    }

    .ticket-option {
      position: relative;
      display: grid;
      grid-template-columns: minmax(108px, 0.42fr) minmax(0, 1fr) auto 28px;
      gap: clamp(14px, 2.6vw, 24px);
      align-items: center;
      width: 100%;
      min-height: 128px;
      padding: 18px 22px;
      border: 1.5px solid rgba(13, 15, 24, 0.1);
      border-radius: 18px;
      background: rgba(13, 15, 24, 0.022);
      color: var(--ink);
      text-align: left;
      cursor: pointer;
      transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease, background 180ms ease;
    }

    .ticket-option::before {
      display: none;
    }

    .ticket-option:hover,
    .ticket-option:focus-visible {
      transform: translateY(-2px);
      border-color: rgba(13, 15, 24, 0.28);
      box-shadow: 0 18px 34px -22px rgba(13, 15, 24, 0.32);
      outline: none;
    }

    .ticket-option.is-active {
      border-color: var(--ink);
      background: rgba(13, 15, 24, 0.045);
      box-shadow: 0 22px 40px -24px rgba(13, 15, 24, 0.32);
    }

    .ticket-option > * {
      position: relative;
      z-index: 1;
    }

    .ticket-option-name {
      color: #111318;
      font-size: clamp(17px, 1.8vw, 21px);
      line-height: 1.04;
      font-weight: 700;
    }

    .ticket-option-benefits {
      display: grid;
      gap: 7px;
      color: #202225;
      font-size: clamp(13px, 1.35vw, 15px);
      line-height: 1.25;
    }

    .ticket-option-benefits span::before {
      content: "✓";
      margin-right: 8px;
      color: var(--ink);
      font-weight: 700;
    }

    .ticket-option-price {
      color: #16181c;
      font-size: clamp(20px, 2.4vw, 26px);
      line-height: 1;
      font-weight: 700;
      white-space: nowrap;
    }

    .ticket-radio {
      width: 28px;
      height: 28px;
      border: 3px solid rgba(13, 15, 24, 0.22);
      border-radius: 50%;
      background: #fff;
      box-shadow: inset 0 0 0 5px #fff;
    }

    .ticket-option.is-active .ticket-radio {
      border-color: var(--ink);
      background: var(--ink);
    }

    .ticket-buy-row {
      display: flex;
      align-items: stretch;
      gap: 14px;
      width: min(560px, 100%);
      margin: clamp(22px, 4vw, 36px) auto 0;
    }

    @media (max-width: 600px) {
      .ticket-buy-row {
        flex-direction: column;
      }

      .ticket-buy-row .ticket-stepper {
        justify-content: center;
        min-height: 56px;
      }

      .ticket-buy-row .ticket-buy-button {
        width: 100%;
        min-height: 60px;
      }
    }

    .ticket-stepper {
      display: grid;
      grid-template-columns: 52px 56px 52px;
      align-items: center;
      flex: 0 0 auto;
      min-height: 68px;
      border: 1.5px solid rgba(13, 15, 24, 0.12);
      border-radius: var(--button-radius);
      background: rgba(13, 15, 24, 0.03);
    }

    .ticket-stepper strong {
      color: #111318;
      font-size: 18px;
      line-height: 1;
      font-weight: 700;
      text-align: center;
    }

    .ticket-stepper-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      border: 0;
      border-radius: 999px;
      background: transparent;
      color: #111318;
      font-size: 28px;
      line-height: 1;
      cursor: pointer;
      transition: background 180ms ease;
    }

    .ticket-stepper-btn:hover,
    .ticket-stepper-btn:focus-visible {
      background: rgba(13, 15, 24, 0.06);
      outline: none;
    }

    .ticket-buy-button {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      flex: 1 1 auto;
      min-height: 68px;
      margin: 0;
      padding: 0 28px;
      border-radius: var(--button-radius);
      background: var(--ink);
      color: var(--fg);
      font-size: clamp(20px, 2.6vw, 26px);
      line-height: 1;
      font-weight: 400;
      overflow: hidden;
      transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
    }

    .ticket-buy-button small {
      font-size: 14px;
      line-height: 1;
      font-weight: 400;
      color: rgba(245, 247, 249, 0.66);
      white-space: nowrap;
    }

    .ticket-buy-button:hover,
    .ticket-buy-button:focus-visible {
      transform: translateY(-2px);
      background: var(--button-hover-bg);
      box-shadow: var(--button-hover-shadow);
      outline: none;
    }

    .ticket-buy-button:hover .button-label span,
    .ticket-buy-button:focus-visible .button-label span {
      transform: translateY(-110%);
    }

    .ticket-buy-button:hover .button-label::after,
    .ticket-buy-button:focus-visible .button-label::after {
      transform: translateY(-100%);
    }

    .ticket-benefits {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
      margin-top: clamp(30px, 5vw, 48px);
    }

    .ticket-benefits div {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      color: #111318;
      font-size: clamp(13px, 1.9vw, 16px);
      line-height: 1.05;
      font-weight: 700;
    }

    .ticket-benefits svg {
      flex: 0 0 auto;
      width: 30px;
      height: 30px;
    }

    @media (max-width: 980px) {
      .event-page {
        padding-top: var(--stage-gap);
      }

      .ticket-landing {
        width: min(100% - (var(--stage-gap) * 2), 1280px);
      }

      .ticket-deco--palm-left,
      .ticket-deco--palm-right {
        opacity: 0.72;
      }

      .ticket-deco--drum,
      .ticket-deco--flower {
        display: none;
      }

      .ticket-hero {
        height: 76svh;
        min-height: 520px;
      }

      .ticket-date {
        flex-wrap: wrap;
      }

      .ticket-option {
        grid-template-columns: 1fr auto;
        gap: 8px 14px;
        min-height: 0;
        padding: 18px 18px 20px;
      }

      .ticket-option-name {
        grid-column: 1 / 2;
        grid-row: 1;
        align-self: center;
      }

      .ticket-option-price {
        grid-column: 2 / 3;
        grid-row: 1;
        align-self: center;
      }

      .ticket-option-benefits {
        grid-column: 1 / -1;
        grid-row: 2;
        padding-right: 44px;
      }

      .ticket-radio {
        position: absolute;
        right: 18px;
        bottom: 18px;
      }

      .ticket-buy-button {
        min-height: 66px;
      }

      .ticket-benefits {
        gap: 12px;
      }
    }

    @media (max-width: 520px) {
      .ticket-buy-row {
        flex-wrap: wrap;
      }

      .ticket-buy-row .ticket-stepper {
        flex: 1 1 100%;
        justify-content: center;
      }

      .ticket-buy-row .ticket-buy-button {
        flex: 1 1 100%;
      }

      .ticket-card {
        border-radius: 28px;
      }

      .ticket-panel {
        width: calc(100% - 24px);
        margin-top: -72px;
        padding-inline: 18px;
      }

      .ticket-intro {
        text-align: left;
      }

      .ticket-picker h2 {
        gap: 8px;
      }

      .ticket-benefits {
        grid-template-columns: 1fr;
      }

      .ticket-benefits div {
        justify-content: flex-start;
      }
    }

    /* ── Checkout modal (quick-buy) ── */
    .checkout-modal {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .checkout-modal[hidden] { display: none; }

    .checkout-modal-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(13, 15, 24, 0.55);
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px);
    }

    .checkout-modal-dialog {
      position: relative;
      width: min(760px, calc(100% - 32px));
      height: min(88vh, 920px);
      background: #fff;
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 40px 90px -30px rgba(13, 15, 24, 0.6);
    }

    .checkout-modal-frame {
      width: 100%;
      height: 100%;
      border: 0;
      display: block;
    }

    .checkout-modal-close {
      position: absolute;
      top: 14px;
      right: 14px;
      z-index: 2;
      width: 40px;
      height: 40px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 0;
      border-radius: 999px;
      background: #fff;
      color: var(--ink);
      box-shadow: 0 10px 24px -10px rgba(13, 15, 24, 0.45);
      cursor: pointer;
    }

    .checkout-modal-close svg { width: 20px; height: 20px; }

    .checkout-modal-loader {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(13, 15, 24, 0.5);
      font-weight: 700;
      pointer-events: none;
    }

    /* Embedded checkout (w iframe) — bez chrome motywu */
    body.embedded-checkout .site-header,
    body.embedded-checkout .site-footer,
    body.embedded-checkout footer {
      display: none !important;
    }

    body.embedded-checkout,
    body.embedded-checkout main {
      padding-top: 0 !important;
      margin-top: 0 !important;
    }

    body.embedded-checkout main { padding: clamp(20px, 4vw, 40px) !important; }

    /* ── Marginesy boczne sekcji eventu na mobile ── */
    @media (max-width: 600px) {
      /* Hero / cała sekcja: 16px od krawędzi ekranu */
      .ticket-landing {
        width: calc(100% - 32px);
      }

      /* Karta info: 24px od krawędzi (8px wcięcia w karcie) */
      .ticket-card > .ticket-panel:not(.ticket-picker) {
        width: calc(100% - 16px);
        margin-left: auto;
        margin-right: auto;
      }

      /* Kolejne sekcje: 16px od krawędzi (pełna szerokość karty) */
      .ticket-card > .ticket-picker {
        width: 100%;
      }

      .event-about {
        width: 100%;
      }

      .event-lead {
        padding-left: 0;
        padding-right: 0;
      }
    }