:root {
      --font: 'Geist', system-ui, -apple-system, sans-serif;
      --font-display: 'Geist', system-ui, -apple-system, sans-serif;
    }

    /* ============================================================
       NAV PILLS — Osklen real values (verified live DOM)
       Items son <button>: 15px / 400 / -0.3px / h25 / r8 / pad 0 10px
       Brand: 14px / 500 / no tracking
       Search: h30 / r8 / blur(24px)
       ============================================================ */
    .nav__link {
      height: 25px;
      padding: 0 10px;
      font-size: 15px;
      letter-spacing: -0.3px;
      font-weight: 400;
      border-radius: 8px;
    }
    .nav__link.is-current { border-radius: 8px; font-weight: 400; }

    .nav__brand-name {
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0;
    }

    .nav__cta {
      font-size: 15px;
      letter-spacing: -0.3px;
      font-weight: 400;
      height: 30px;
      padding: 0 10px;
      border-radius: 8px;
      gap: 6px;
    }
    .nav__icon-pill {
      height: 30px;
      width: 30px;
      border-radius: 8px;
      font-weight: 400;
    }
    .topbar, .topbar a { font-weight: 400; }

    /* ============================================================
       OSKLEN HERO — verified live DOM (re-confirmed 2026-05-07)
       Shell: bg #F8F8F8, radius b 14px, overflow hidden
       Backdrop: blurred video at z:-10, scale 1.25, blur 56px desktop
       Slides: fills shell, normal flow
       Fade: bg #F5F5F5, blur 20, h 144, bottom 0, l/r -40, z 0
       Dots: bottom 16rem (260px from shell bottom matching Osklen)
       ============================================================ */
    .osk-hero {
      position: relative;
      width: 100%;
      padding: 0;
      margin-top: 0;
      z-index: 1;       /* must be > footer-wrap (z:0) so hero covers footer when scrolled to top */
    }
    .osk-hero__shell {
      position: relative;
      z-index: 0;                    /* create stacking context so z:-10 backdrop renders WITHIN shell */
      width: 100%;
      height: calc(100vh + 10rem);   /* Osklen pattern: h-screen + pb-40 = vh + 10rem */
      padding-bottom: 10rem;
      overflow: hidden;
      border-radius: 0 0 14px 14px;
      background: #F8F8F8;
    }

    /* Blurred backdrop — Osklen pattern:
       - Only 1 viewport tall (w-full h-screen)
       - Visible from start (opacity 1) so the area behind the nav looks like the
         video, not the cream shell bg (which would read as a white band)
       - JS sets opacity to 0 once user scrolls past ~150px (fade out only) */
    .osk-hero__backdrop {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 100vh;
      z-index: -10;
      pointer-events: none;
      transform: scale(1.25);
      background: #737373; /* neutral-500 fallback while video loads — matches Osklen */
      overflow: visible;
      opacity: 1;     /* visible from start; transition only handles scroll fade-out */
      transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .osk-hero__backdrop-video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: blur(30px);
    }
    @media (min-width: 768px) {
      .osk-hero__backdrop-video { filter: blur(56px); }
    }

    /* Bottom fade — Osklen exact: solid #F5F5F5 block + filter:blur(20px) + h:144,
       extending -40px on the sides so the blur diffuses cleanly past the shell edges.
       This is the EXACT receipt Osklen uses (verified via DOM inspection). */
    /* Bottom fade — restored, Osklen exact recipe */
    .osk-hero__fade {
      position: absolute;
      z-index: 0;
      bottom: 0;
      left: 0;
      right: 0;
      height: 360px;
      background: linear-gradient(180deg, rgba(248,248,248,0) 0%, rgba(248,248,248,0.55) 35%, rgba(248,248,248,0.9) 70%, #F8F8F8 100%);
      pointer-events: none;
    }

    /* Slides track — Osklen swiper pattern: flex row, transform translateX moves between slides */
    .osk-hero__slides {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
      z-index: 1;
    }
    .osk-hero__track {
      display: flex;
      width: 100%;
      height: 100%;
      transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
      will-change: transform;
    }
    .osk-hero__slide {
      position: relative;
      width: 100%;
      height: 100%;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 32px 8px;
    }
    @media (min-width: 768px) {
      .osk-hero__slide { padding: 128px 160px; }
    }
    /* Frame: video centered card, like Osklen .heroContent (rounded-32, max 1200x675, aspect 1002/562) */
    .osk-hero__slide-frame {
      position: relative;
      width: 100%;
      height: 100%;
      max-width: 1200px;
      max-height: 675px;
      border-radius: 32px;
      overflow: hidden;
      background: transparent;     /* let backdrop show through during video load */
    }
    @media (min-width: 1280px) {
      .osk-hero__slide-frame { aspect-ratio: 1002 / 562; height: auto; width: 69.6vw; max-height: none; }
    }
    @media (min-width: 1856px) {
      .osk-hero__slide-frame { width: 58vw; height: 32vw; max-height: 675px; }
    }
    @media (min-width: 2560px) {
      .osk-hero__slide-frame { width: 69.6vw; height: 39vw; }
    }
    .osk-hero__slide-video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .osk-hero__slide-content {
      position: absolute;
      z-index: 10;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      pointer-events: none;
      text-align: center;
      width: fit-content;
      height: fit-content;
    }
    @media (min-width: 768px) { .osk-hero__slide-content { gap: 12px; } }

    /* Slide title — Osklen scales with viewport: 20px mobile, 32px wide desktop.
       Letter-spacing slightly positive at the larger size, neutral mobile. */
    .osk-hero__slide-title {
      font-family: 'Geist', sans-serif;
      font-size: clamp(20px, 1.7vw, 32px);
      line-height: 1.1;
      font-weight: 500;
      letter-spacing: 0.01em;
      color: #fff;
      margin: 0;
      max-width: 80vw;
    }
    /* Slide CTA — Osklen verified exact: 20px / 400 / lh 28 / -0.2px / #111 / pad 7-11-8 / radius 17 */
    .osk-hero__slide-cta {
      font-family: 'Geist', sans-serif;
      font-size: clamp(15px, 1.07vw, 20px);
      line-height: 1.4;
      font-weight: 400;
      letter-spacing: -0.2px;
      color: rgb(17, 17, 17);                       /* Osklen #111 (was #3a3a3a) */
      background: rgba(255, 255, 255, 0.5);
      -webkit-backdrop-filter: blur(15px);
      backdrop-filter: blur(15px);
      padding: 7px 11px 8px;                        /* Osklen exact (was 0 11px) */
      border-radius: 17px;                          /* Osklen 17px (was 9999) */
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      pointer-events: auto;
      transition: background 0.2s;
    }
    .osk-hero__slide-cta:hover { background: rgba(255, 255, 255, 0.75); }
    .osk-hero__slide-overlay {
      position: absolute;
      inset: 0;
      z-index: 0;
      font-size: 0;
      color: transparent;
      text-decoration: none;
    }

    /* Pagination — Osklen real: outer wrapper positions; inner pill is the translucent capsule */
    .osk-hero__pagination {
      position: absolute;
      z-index: 10;
      left: 0;
      right: 0;
      bottom: 16.25rem;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 10px;
    }
    @media (max-width: 767px) {
      .osk-hero__pagination { bottom: 7rem; }
    }
    /* Osklen .heroBanner .swiper-pagination — translucent white pill with backdrop blur */
    .osk-hero__pagination-pill {
      display: flex;
      align-items: center;
      width: fit-content;
      height: 26px;
      padding-inline: 10px;
      border-radius: 9999px;
      background: #ffffff7d;                     /* white 49% alpha */
      -webkit-backdrop-filter: blur(25px);
      backdrop-filter: blur(25px);
    }
    .osk-hero__dot {
      position: relative;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.243);
      border: 0;
      padding: 0;
      cursor: pointer;
      transition: width 0.4s, border-radius 0.4s, background 0.2s;
      opacity: 0.7;
      margin: 0 4px;
      overflow: hidden;
      display: inline-flex;
    }
    .osk-hero__dot:hover { background: rgba(0, 0, 0, 0.4); }
    .osk-hero__dot.is-active {
      width: 22px;
      border-radius: 10px;
      background: rgba(0, 0, 0, 0.424);
    }
    /* Progress fill — Osklen swiper-custom-progressbar pattern: width 0→100% during slide duration */
    .osk-hero__dot-progress {
      display: block;
      width: 0;
      height: 100%;
      background: rgba(0, 0, 0, 0.596);
      pointer-events: none;
    }
    .osk-hero__dot.is-active .osk-hero__dot-progress {
      animation: oskDotProgress 6s linear forwards;
    }
    @keyframes oskDotProgress {
      from { width: 0; }
      to   { width: 100%; }
    }

    @media (max-width: 768px) {
      .osk-hero__slide-title { font-size: 18px; }
    }

    /* Nav transparente flotando sobre hero */
    .nav__pill { background: rgba(255,255,255,0.15) !important; -webkit-backdrop-filter: blur(12px) !important; backdrop-filter: blur(12px) !important; }
    .nav__icon-pill, .nav__cta { background: rgba(255,255,255,0.5) !important; -webkit-backdrop-filter: blur(24px) !important; backdrop-filter: blur(24px) !important; }
    .nav { z-index: 100; }