body {
      margin: 0;
      color: var(--ink);
      background:
        radial-gradient(circle at 12% 8%, rgba(103, 232, 249, .18), transparent 28rem),
        radial-gradient(circle at 86% 12%, rgba(255, 111, 189, .14), transparent 32rem),
        linear-gradient(135deg, #05070d 0%, #0b1020 48%, #11131f 100%);
      min-height: 100vh;
    }

.hero-actions, .card-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.paypal-box { margin-top: 14px; padding-top: 14px; border-top: 1px dashed rgba(255, 255, 255, .14); }

.paypal-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.paypal-amount {
      flex: 1 1 100px;
      min-width: 90px;
      min-height: 44px;
      border-radius: 10px;
      padding: 10px 12px;
      border: 1px solid rgba(255, 255, 255, .16);
      background: rgba(255, 255, 255, .05);
      color: var(--ink);
    }

.paypal-amount::placeholder { color: var(--muted); }

.btn-paypal {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 44px;
      border-radius: 10px;
      padding: 12px 16px;
      border: 0;
      background: #ffc439;
      color: #05101a;
      font-weight: 900;
      cursor: pointer;
      transition: transform .18s ease;
    }

.btn-paypal:hover { transform: translateY(-2px); }

.btn-whatsapp {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      min-height: 44px;
      border-radius: 10px;
      padding: 12px 16px;
      border: 0;
      background: #25d366;
      color: #05230f;
      font-weight: 900;
      cursor: pointer;
      transition: transform .18s ease;
    }

.btn-whatsapp:hover { transform: translateY(-2px); }

.whatsapp-box { margin-top: 10px; }

.paypal-note { display: block; margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.4; }

.card-img { width: 100%; height: 230px; object-fit: cover; object-position: top; border-radius: 10px; margin-bottom: 16px; display: block; border: 1px solid rgba(255,255,255,.1); cursor: zoom-in; }

.ruler-videos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }

.ruler-videos video {
      display: block;
      width: 100%;
      aspect-ratio: 9 / 16;
      object-fit: cover;
      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, .1);
      background: #02060d;
    }

.ruler-videos-label { grid-column: 1 / -1; margin: 4px 0 0; color: var(--muted); font-size: 12px; }

.img-modal {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(4, 6, 12, .88);
      backdrop-filter: blur(6px);
      padding: 24px;
    }

.img-modal.open { display: flex; }

.img-modal img {
      max-width: min(94vw, 720px);
      max-height: 90vh;
      width: auto;
      height: auto;
      object-fit: contain;
      border-radius: 12px;
      box-shadow: 0 24px 80px rgba(0, 0, 0, .5);
    }

.img-modal-close {
      position: fixed;
      top: 18px;
      right: 22px;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, .25);
      background: rgba(255, 255, 255, .1);
      color: var(--ink);
      font-size: 22px;
      line-height: 1;
      display: grid;
      place-items: center;
      cursor: pointer;
    }

.img-modal-close:hover { background: rgba(255, 255, 255, .2); }

.bubble-cta { display: inline-flex; margin-top: 10px; padding: 8px 14px; min-height: auto; font-size: 13px; }

.calendar-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 24px 0; }
.calendar-facts article { padding: 20px; border: 1px solid rgba(255,255,255,.11); border-radius: 15px; background: rgba(255,255,255,.045); }
.calendar-facts strong { display: block; color: var(--cyan); font-size: 24px; }
.calendar-facts span { display: block; margin-top: 6px; color: var(--muted); line-height: 1.4; }
.daily-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 22px 0 28px; }
.daily-slots a, .daily-slots button { padding: 13px 10px; border: 1px solid rgba(103,232,249,.28); border-radius: 999px; color: var(--ink); background: rgba(103,232,249,.07); font: inherit; font-weight: 800; text-align: center; cursor: pointer; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.daily-slots a:hover, .daily-slots a:focus-visible, .daily-slots button:hover, .daily-slots button:focus-visible { transform: translateY(-2px); border-color: var(--cyan); background: rgba(103,232,249,.15); outline: none; }
.daily-slots button.is-selected { border-color: var(--cyan); color: #07111d; background: linear-gradient(135deg, var(--cyan), var(--lime)); box-shadow: 0 12px 32px rgba(103,232,249,.2); }
.booking-policy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.booking-policy-grid h3 { margin-top: 0; }
.calendar-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.schedule-picker-actions { margin-top: 24px; }
.picker-heading { display: flex; align-items: center; gap: 10px; margin: 22px 0 12px; }
.picker-heading span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #07111d; background: var(--cyan); font-weight: 900; }
.picker-heading h3 { margin: 0; font-size: 19px; }
.workshop-options { display: flex; flex-wrap: wrap; gap: 12px; }
.workshop-options .is-selected { color: #07111d; background: linear-gradient(135deg, var(--cyan), var(--lime)); box-shadow: 0 12px 32px rgba(103,232,249,.2); }
.availability-button { margin-top: 2px; }
.availability-button:disabled { opacity: .42; cursor: not-allowed; filter: grayscale(.35); }
.picker-status { min-height: 24px; margin: 12px 0 0; color: var(--muted); font-weight: 700; }

.real-classes { overflow: hidden; }
.real-classes-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.real-classes-head > div { max-width: 780px; }
.real-videos-toggle { flex: 0 0 auto; min-height: 44px; padding: 11px 17px; border: 1px solid rgba(103,232,249,.35); border-radius: 999px; background: rgba(103,232,249,.09); color: var(--ink); font: inherit; font-weight: 850; cursor: pointer; }
.real-videos-toggle:hover, .real-videos-toggle:focus-visible { border-color: var(--cyan); background: rgba(103,232,249,.17); outline: 3px solid rgba(103,232,249,.18); outline-offset: 3px; }
.real-video-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 26px; }
.real-video-card { position: relative; min-width: 0; margin: 0; overflow: hidden; aspect-ratio: 9 / 16; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: #02060d; box-shadow: 0 16px 40px rgba(0,0,0,.22); }
.real-video-card video { width: 100%; height: 100%; display: block; object-fit: cover; pointer-events: none; }
.real-video-card::after { content: ""; position: absolute; inset: auto 0 0; height: 34%; background: linear-gradient(transparent, rgba(2,6,13,.88)); pointer-events: none; }
.real-video-card figcaption { position: absolute; z-index: 1; left: 12px; right: 12px; bottom: 11px; color: #fff; font-size: .88rem; font-weight: 850; line-height: 1.25; text-shadow: 0 2px 8px rgba(0,0,0,.75); }
.real-videos-note { margin: 14px 0 0; color: var(--muted); font-size: .9rem; }

.alt-flag:hover,
    .alt-flag:focus-visible {
      width: 180px;
      box-shadow: 0 22px 55px rgba(199, 255, 107, .28);
    }

.alt-flag:hover .call-flag-text,
    .alt-flag:focus-visible .call-flag-text {
      flex-basis: 108px;
      width: 108px;
      white-space: normal;
      line-height: 1.15;
    }

.store-flag {
      top: calc(48% + 148px);
      background: linear-gradient(135deg, var(--cyan), #c9fff5);
    }

.store-flag:hover,
    .store-flag:focus-visible {
      width: 154px;
      box-shadow: 0 22px 55px rgba(103, 232, 249, .28);
    }

.store-flag:hover .call-flag-text,
    .store-flag:focus-visible .call-flag-text {
      flex-basis: 82px;
      width: 82px;
      white-space: normal;
      line-height: 1.15;
    }

.calendar-flag {
      --flag-delay: 3.45s;
      top: calc(48% + 222px);
      border: 0;
      background: linear-gradient(135deg, #f6b6dc, #fff1a8);
      cursor: pointer;
      font: inherit;
    }

.calendar-flag:hover,
    .calendar-flag:focus-visible,
    .calendar-flag.is-open {
      width: 180px;
      padding: 12px 14px;
      justify-content: flex-start;
      box-shadow: 0 22px 55px rgba(246, 182, 220, .3);
    }

.calendar-flag:hover .call-flag-text,
    .calendar-flag:focus-visible .call-flag-text,
    .calendar-flag.is-open .call-flag-text {
      flex-basis: 108px;
      width: 108px;
      opacity: 1;
      visibility: visible;
      transform: translateX(0);
      white-space: normal;
    }

.calendar-flag-icon { display: grid; place-items: center; font-size: 31px; }

.class-booking-flyout {
      position: fixed;
      z-index: 90;
      right: 72px;
      top: 50%;
      width: min(390px, calc(100vw - 100px));
      max-height: min(720px, calc(100vh - 30px));
      overflow-y: auto;
      transform: translateY(-50%);
      padding: 25px;
      border: 1px solid rgba(103, 232, 249, .35);
      border-radius: 22px;
      background: rgba(8, 15, 29, .98);
      box-shadow: 0 28px 70px rgba(0, 0, 0, .55);
    }

.class-booking-flyout[hidden] { display: none; }
.class-booking-flyout h2 { margin: 8px 38px 8px 0; font-size: 1.8rem; line-height: 1.05; }
.class-booking-flyout > p { margin: 0 0 17px; color: var(--muted); line-height: 1.45; }
.class-booking-flyout form { display: grid; gap: 12px; }
.class-booking-flyout label { display: grid; gap: 6px; color: var(--ink); font-weight: 850; }
.class-booking-flyout label small { color: var(--muted); font-weight: 600; }
.class-booking-flyout input,
    .class-booking-flyout select {
      width: 100%;
      min-height: 48px;
      padding: 10px 12px;
      border: 1px solid rgba(148, 181, 219, .45);
      border-radius: 12px;
      background: #121d31;
      color: #fff;
      font: inherit;
    }
.class-booking-flyout input:focus,
    .class-booking-flyout select:focus { outline: 3px solid rgba(103, 232, 249, .25); border-color: var(--cyan); }
.class-booking-flyout .btn { margin-top: 4px; width: 100%; }
.class-booking-flyout .booking-flyout-note { margin: 14px 0 0; color: #a8f4c8; font-size: .9rem; font-weight: 800; }
.booking-flyout-close { position: absolute; top: 12px; right: 13px; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; background: rgba(255,255,255,.07); color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer; }

@media (max-width: 960px) {
      .hero-grid, .split, .assistant, .seo-grid { grid-template-columns: 1fr; }
      .calendar-facts, .daily-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .booking-policy-grid { grid-template-columns: 1fr; }
      .real-video-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }

@media (max-width: 640px) {
      .calendar-facts, .daily-slots { grid-template-columns: 1fr; }
      .real-classes-head { display: block; }
      .real-videos-toggle { margin-top: 16px; }
      .real-video-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
      .real-video-card:last-child:nth-child(odd) { grid-column: 1 / -1; width: calc(50% - 4px); justify-self: center; }
      .call-flag {
        top: auto;
        right: 0;
        bottom: 16px;
        width: 58px;
        min-height: 58px;
        padding: 0;
        justify-content: center;
        gap: 8px;
        border-radius: 999px;
        border-right: 1px solid rgba(255, 255, 255, .35);
        transform: none;
        transition: width .2s ease, padding .2s ease, border-radius .2s ease;
      }
      .call-flag .call-flag-text {
        display: none;
        flex: 0 0 auto;
        width: auto;
        opacity: 0;
        visibility: hidden;
        transform: none;
        white-space: nowrap;
      }
      .call-flag.is-open {
        width: auto;
        padding: 10px 14px;
        justify-content: flex-start;
        border-radius: 999px 0 0 999px;
      }
      .call-flag.is-open .call-flag-text {
        display: block;
        opacity: 1;
        visibility: visible;
      }
      .alt-flag {
        top: auto;
        bottom: 82px;
      }
      .alt-flag.is-open {
        bottom: 76px;
      }
      .store-flag {
        top: auto;
        bottom: 148px;
      }
      .store-flag.is-open {
        bottom: 142px;
      }
      .store-flag .call-flag-text {
        white-space: normal;
        max-width: 130px;
        line-height: 1.15;
      }
      .calendar-flag {
        top: auto;
        bottom: 214px;
      }
      .calendar-flag.is-open { bottom: 208px; }
      .class-booking-flyout {
        right: 11px;
        top: 12px;
        width: calc(100vw - 22px);
        max-height: calc(100vh - 24px);
        transform: none;
        padding: 22px 18px;
      }
    }