:root {
      --bg: #070a10;
      --bg2: #0b1120;
      --text: rgb(255, 255, 255);
      --muted: rgba(255, 255, 255, 0.72);
      --muted2: rgba(255, 255, 255, 0.55);
      --line: rgba(255, 255, 255, 0.10);
      --shadow: 0 18px 60px rgba(0, 0, 0, 0.62);
      --shadow2: 0 10px 30px rgba(0, 0, 0, 0.38);
      --radius: 18px;
      --radius2: 14px;
      --max: 1120px;
      /*
        --primaryText: #041007;
      --primary: #28ff5c;
      */
      --primary: rgba(93, 93, 93, 0.1);
      --primaryText: #ffffff;
      

      --danger: #ff4d4d;
      --ok: #28ff5c;


      --glow: rgba(185, 185, 185, 0.16);
      --glow2: rgba(203, 203, 203, 0.1);
    }
    :root {
      --od-scrollbar-track: #1a1a1a;
      --od-scrollbar-thumb-1: #6b6b6b;
      --od-scrollbar-thumb-2: #3f3f3f;
      --od-scrollbar-thumb-hover-1: #8a8a8a;
      --od-scrollbar-thumb-hover-2: #555555;
      --od-scrollbar-width: 10px;
      --od-scrollbar-radius: 10px;
      --od-scrollbar-border: 2px;
    }

    * {
      scrollbar-width: thin;
      scrollbar-color: var(--od-scrollbar-thumb-1) var(--od-scrollbar-track);
    }

    *::-webkit-scrollbar {
      width: var(--od-scrollbar-width);
      height: var(--od-scrollbar-width);
    }

    *::-webkit-scrollbar-track {
      background: var(--od-scrollbar-track);
      border-radius: var(--od-scrollbar-radius);
    }

    *::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, var(--od-scrollbar-thumb-1), var(--od-scrollbar-thumb-2));
      border-radius: var(--od-scrollbar-radius);
      border: var(--od-scrollbar-border) solid var(--od-scrollbar-track);
    }

    *::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(180deg, var(--od-scrollbar-thumb-hover-1), var(--od-scrollbar-thumb-hover-2));
    }

    *::-webkit-scrollbar-corner {
      background: var(--od-scrollbar-track);
    }

    html.no-smooth,
    html.no-smooth body {
      scroll-behavior: auto !important;
    }
    * { box-sizing: border-box; }
    html, body { height: 100%; scroll-behavior: smooth; }

    body {
      margin: 0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
      color: var(--text);
      background: #090D18;
      overflow-x: hidden;
      position: relative;
    }

    body::before {
      content: "";
      position: fixed;
      right: -320px;
      bottom: -320px;
      width: 1020px;
      height: 1020px;
      border-radius: 999px;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 62%);
      pointer-events: none;
      z-index: 0;
    }

    body > * {
      position: relative;
      z-index: 1;
    }


    a { color: inherit; text-decoration: none; }
    .container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 20px; }

    .topbar {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 50;
      backdrop-filter: blur(14px);
      background: rgba(7, 10, 16, 0.42);
      border-bottom: 1px solid rgba(255,255,255,0.10);
      transition: background 180ms ease, box-shadow 180ms ease;
    }
    .topbar.is-scrolled {
      background: rgba(7, 10, 16, 0.86);
      box-shadow: 0 14px 40px rgba(0,0,0,0.45);
    }
    .topbar-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 14px 0;
    }

    .brand { display: flex; align-items: center; gap: 12px; min-width: 190px; }
    .brand-mark {
      width: 60px; height: 60px; border-radius: 12px;
      background: var(--primary);
      box-shadow: 0 14px 40px rgba(232, 232, 232, 0.2);
      display: grid; place-items: center;
      font-weight: 1000; letter-spacing: 0.8px;
      color: var(--primaryText);
    }
    .brand-text { display: flex; flex-direction: column; line-height: 1.1; }
    .brand-text strong { font-size: 14px; letter-spacing: 0.8px; text-transform: uppercase; }
    .brand-text span { font-size: 12px; color: rgba(255,255,255,0.65); }

    .nav { display: flex; align-items: center; gap: 18px; }
    .nav a {
      font-size: 13px;
      color: rgba(255,255,255,0.78);
      padding: 10px 10px;
      border-radius: 10px;
      transition: background 180ms ease, color 180ms ease, transform 140ms ease, border-color 180ms ease;
      border: 1px solid transparent;
    }
    .nav a:hover {
      background: rgba(219, 219, 219, 0.06);
      border-color: rgba(198, 198, 198, 0.18);
      color: rgba(255,255,255,0.92);
      transform: translateY(-1px);
    }

    .cta { display: flex; gap: 10px; align-items: center; justify-content: flex-end; min-width: 190px; }

    .btn {
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(255, 255, 255, 0.04);
      color: var(--text);
      padding: 10px 14px;
      border-radius: 12px;
      font-size: 13px;
      font-weight: 900;
      transition: transform 140ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
    }
    .btn:hover {
      transform: translateY(-1px);
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(255, 255, 255, 0.18);
    }

    .btn-primary {
      border-color: rgba(114, 114, 114, 0.35);
      background: var(--primary);
      color: var(--primaryText);
      box-shadow: 0 6px 34px rgba(255, 255, 255, 0.14);
      white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .btn-primary:hover {
        /*
      border-color: rgba(40, 255, 92, 0.62);
      background: #3bff6b;
      box-shadow: 0 18px 42px rgba(40, 255, 92, 0.18);
      */
    }

    .btn-ghost {
      border-color: rgba(212, 212, 212, 0.22);
      background: rgba(93, 93, 93, 0.1);
      color: rgba(255,255,255,0.92);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .btn-ghost:hover {
      border-color: rgba(153, 153, 153, 0.393);
      background: rgba(93, 93, 93, 0.1);
    }

    .menu-btn {
      display: none;
      border: 1px solid rgba(255, 255, 255, 0.12);
      background: rgba(255, 255, 255, 0.04);
      color: var(--text);
      padding: 10px 12px;
      border-radius: 12px;
      font-weight: 1000;
      cursor: pointer;
    }
    /*
    .hero-video__poster {
      display: none;
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.75)),
        url("../hero-poster.png");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      background-position: center;

    }*/
    .hero-video__poster {
  display: none;
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.75)),
    url("../hero-poster.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

@media (max-width: 760px) {
  .hero-video__media { display: none; }
  .hero-video__poster { display: block; }
  .hero-video__overlay { display: none; }
}

/* Movie slideshow layers */
.hero-video__poster::before,
.hero-video__poster::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Film grain */
.hero-video__poster::before {
  opacity: 0.18;
  mix-blend-mode: overlay;
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.05),
      rgba(255,255,255,0.05) 1px,
      rgba(0,0,0,0.05) 2px,
      rgba(0,0,0,0.05) 3px
    );
  animation: odGrain 1.2s steps(2) infinite;
}

@keyframes odGrain {
  0% { transform: translate3d(0,0,0); }
  25% { transform: translate3d(-2px, 1px,0); }
  50% { transform: translate3d(2px, -1px,0); }
  75% { transform: translate3d(-1px, -2px,0); }
  100% { transform: translate3d(0,0,0); }
}

/* Flash layer (JS toggles opacity) */
.hero-video__poster::after {
  opacity: 0;
  background:
    radial-gradient(circle at 40% 30%, rgba(255,255,255,0.95), rgba(255,255,255,0) 55%),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,0.65), rgba(255,255,255,0) 60%),
    rgba(255,255,255,0.10);
  transition: opacity 90ms ease;
  mix-blend-mode: screen;
}

/* When a flash happens */
.hero-video__poster.is-flash::after {
  opacity: 1;
}

/* Subtle handheld shake (only during flash) */
@keyframes odShake {
  0% { transform: translate3d(0,0,0) scale(1.02); }
  20% { transform: translate3d(-2px, 1px,0) scale(1.03); }
  40% { transform: translate3d(2px, -1px,0) scale(1.03); }
  60% { transform: translate3d(-1px, -2px,0) scale(1.03); }
  80% { transform: translate3d(1px, 2px,0) scale(1.03); }
  100% { transform: translate3d(0,0,0) scale(1.02); }
}

.hero-video__poster.is-shake {
  animation: odShake 180ms linear 1;
}

/* Optional: slightly “cooler” cinematic look */
@media (max-width: 760px) {
  .hero-video__poster {
    filter: contrast(1.08) saturate(1.06);
  }
}

    

    @media (max-width: 760px) {
      .hero-video__media {
        display: none;
      }

      .hero-video__poster {
        display: block;
      }

      .hero-video__overlay {
        display: none;
      }
    }
    .hero-video {
      position: relative;
      height: 100vh;
      min-height: 680px;
      overflow: hidden;
      display: grid;
      align-items: end;
      border-bottom: 1px solid rgba(255,255,255,0.10);
      background: #05070d;
    }
    .hero-video__media {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      transform: scale(1.035);
      filter: saturate(1.05) contrast(1.08);
    }
    .hero-video__overlay {
      position: absolute; inset: 0;
      background:
        radial-gradient(900px 520px at 18% 18%, rgba(0, 0, 0, 0.14), transparent 60%),
        radial-gradient(900px 520px at 80% 20%, rgba(0, 0, 0, 0.08), transparent 62%),
        linear-gradient(180deg, rgba(0,0,0,0.20), rgba(0,0,0,0.84));
    }

    .hero-video__content {
      position: relative; z-index: 2;
      padding: 120px 0 84px 0;
      display: grid;
      gap: 14px;
      align-content: end;
    }
    .hero-video__badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 9px 12px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      background: rgba(0, 0, 0, 0.26);
      font-size: 12px;
      color: rgba(255,255,255,0.82);
      width: fit-content;
      backdrop-filter: blur(10px);
      transform: translateY(10px);
      opacity: 0;
      animation: heroIn 900ms ease forwards 180ms;
    }
.hero-video__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #19c34a;
  box-shadow: 0 0 0 0 rgba(25, 195, 74, 0.35);
  animation: heroDotPulse 1.35s ease-out infinite;
}

@keyframes heroDotPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(25, 195, 73, 0.438);
    opacity: 1;
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(25, 195, 74, 0.00);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(25, 195, 74, 0.00);
    opacity: 1;
  }
}

    .hero-video__title {
      margin: 0;
      font-size: clamp(38px, 4.6vw, 70px);
      line-height: 0.98;
      letter-spacing: -1.2px;
      transform: translateY(14px);
      opacity: 0;
      animation: heroIn 900ms ease forwards 320ms;
    }
    .hero-video__subtitle {
      margin: 0;
      max-width: 70ch;
      color: rgba(255,255,255,0.78);
      font-size: 15px;
      line-height: 1.7;
      transform: translateY(14px);
      opacity: 0;
      animation: heroIn 900ms ease forwards 460ms;
    }
    .hero-video__actions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 6px;
      transform: translateY(14px);
      opacity: 0;
      animation: heroIn 900ms ease forwards 600ms;
    }

    .hero-facts {
      margin-top: 12px;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      transform: translateY(14px);
      opacity: 0;
      animation: heroIn 900ms ease forwards 720ms;
    }
    .fact {
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(0,0,0,0.22);
      border-radius: 14px;
      padding: 12px;
      backdrop-filter: blur(10px);
      box-shadow: 0 10px 24px rgba(0,0,0,0.32);
    }
    .fact b { display: block; font-size: 12px; color: rgba(255,255,255,0.55); }
    .fact span { display: block; margin-top: 4px; font-size: 14px; font-weight: 1000; letter-spacing: -0.2px; }

    .hero-video__scroll {
      position: absolute;
      left: 50%;
      bottom: 22px;
      transform: translateX(-50%);
      width: 44px;
      height: 44px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.16);
      background: rgba(0,0,0,0.20);
      display: grid;
      place-items: center;
      z-index: 3;
      backdrop-filter: blur(10px);
      box-shadow: 0 10px 24px rgba(0,0,0,0.38);
      transition: transform 150ms ease, background 180ms ease, border-color 180ms ease;
    }
    .hero-video__scroll:hover {
      transform: translateX(-50%) translateY(-2px);
      background: rgba(54, 54, 54, 0.06);
      border-color: rgba(22, 22, 22, 0.22);
    }
    .hero-video__scroll span {
      width: 8px;
      height: 14px;
      border: 2px solid rgba(255,255,255,0.8);
      border-radius: 999px;
      position: relative;
    }
    .hero-video__scroll span::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 3px;
      transform: translateX(-50%);
      width: 2px;
      height: 4px;
      background: rgba(255,255,255,0.85);
      border-radius: 2px;
      animation: wheel 1200ms ease-in-out infinite;
    }
    @keyframes wheel {
      0% { opacity: 0; transform: translateX(-50%) translateY(-2px); }
      30% { opacity: 1; }
      60% { opacity: 1; transform: translateX(-50%) translateY(5px); }
      100% { opacity: 0; transform: translateX(-50%) translateY(8px); }
    }
    @keyframes heroIn { to { opacity: 1; transform: translateY(0); } }

    /** CHANGE BG **/
    .section { padding: 74px 0; }
    .section.has-bg {
      /*
      background: radial-gradient(900px 420px at 12% 18%, rgb(0 0 0 / 8%), #00000000 62%), radial-gradient(900px 520px at 86% 26%, rgb(0 0 0 / 6%), transparent 66%), rgba(255, 255, 255, 0.02);
      border-top: 1px solid rgba(255,255,255,0.08);
      border-bottom: 1px solid rgba(255,255,255,0.08);
      */
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    .section-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 18px;
    }
    .section-title {
      margin: 0;
      font-size: 18px;
      letter-spacing: 0.6px;
      text-transform: uppercase;
      color: rgb(255, 255, 255);
    }
    .section-sub {
      margin: 0;
      color: rgba(255,255,255,0.56);
      font-size: 13px;
      max-width: 74ch;
      line-height: 1.6;
    }

    .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
    .split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

    .card {
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(255, 255, 255, 0.04);
      border-radius: var(--radius2);
      padding: 16px;
      box-shadow: var(--shadow2);
      overflow: hidden;
      position: relative;
    }
    .card h3 { margin: 0 0 8px 0; font-size: 16px; letter-spacing: -0.2px; }
    .card p { margin: 0; color: rgba(255,255,255,0.72); font-size: 13px; line-height: 1.65; }

    .icon {
      width: 42px;
      height: 42px;
      border-radius: 14px;
      background: rgba(158, 158, 158, 0.08);
      border: 1px solid rgba(115, 115, 115, 0.18);
      display: grid;
      place-items: center;
      margin-bottom: 12px;
      font-weight: 1000;
      color: gold;
    }

    .gallery { display: grid; gap: 14px; }
    .gallery-main { display: grid; gap: 14px; }

    .media {
      border-radius: 16px;
      border: 1px solid rgba(255, 255, 255, 0.10);
      background: rgba(255, 255, 255, 0.04);
      min-height: 220px;
      position: relative;
      overflow: hidden;
      display: grid;
      place-items: center;
      box-shadow: var(--shadow2);
    }
    .media::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(800px 320px at 30% 30%, rgba(40, 255, 92, 0.10), transparent 62%),
        radial-gradient(600px 280px at 75% 60%, rgba(0, 190, 255, 0.06), transparent 66%);
      pointer-events: none;
    }
    .gallery-main {
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }

    .gallery-main .media {
      min-height: 300px;
    }

    .gallery-main .media iframe {
      width: 100%;
      height: 100%;
    }


    .media iframe, .media video, .media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border: 0;
      position: absolute;
      inset: 0;
    }
    .media .media-label {
      position: absolute;
      left: 14px;
      bottom: 14px;
      z-index: 2;
      font-size: 12px;
      color: rgba(255,255,255,0.86);
      border: 1px solid rgba(255, 255, 255, 0.14);
      padding: 10px 12px;
      border-radius: 12px;
      background: rgba(0, 0, 0, 0.34);
      backdrop-filter: blur(10px);
    }

    .promo-cards {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 14px;
      margin-top: 14px;
    }
    .promo {
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(0,0,0,0.20);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: var(--shadow2);
    }
    .promo img {
      width: 100%;
      height: 190px;
      object-fit: cover;
      display: block;
      filter: contrast(1.05) saturate(1.03);
    }
    .promo .cap {
      padding: 12px 14px;
      display: grid;
      gap: 6px;
    }
    .promo .cap strong { font-size: 13px; letter-spacing: -0.2px; }
    .promo .cap span { font-size: 12px; color: rgba(255,255,255,0.60); line-height: 1.5; }

    .tickets {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      align-items: start;
    }
    .ticket-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }

    .ticket {
      position: relative;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(0,0,0,0.20);
      border-radius: 16px;
      padding: 16px;
      box-shadow: var(--shadow2);
      overflow: hidden;
      cursor: pointer;
      transition: transform 140ms ease, border-color 180ms ease, background 180ms ease;
      user-select: none;
    }
    .ticket:hover {
      transform: translateY(-2px);
      border-color: rgba(40, 234, 255, 0.26);
      background: rgba(255,255,255,0.05);
    }
    .ticket.is-selected {
      border-color: rgba(40, 255, 241, 0.55);
      background: rgba(40, 244, 255, 0.1);
      transform: translateY(-2px);
    }

    .ticket-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 12px;
    }
    .ticket-name { font-weight: 1100; letter-spacing: -0.2px; font-size: 14px; }
    .ticket-pill {
      font-size: 11px;
      padding: 7px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(0,0,0,0.18);
      color: rgba(255,255,255,0.72);
      white-space: nowrap;
    }
    .ticket-price {
      font-size: 26px;
      font-weight: 1200;
      letter-spacing: -0.6px;
      margin: 8px 0 6px 0;
    }
    .ticket-price small {
      font-size: 12px;
      color: rgba(255,255,255,0.55);
      font-weight: 900;
      margin-left: 6px;
    }
    .ticket-desc { color: rgba(255,255,255,0.65); font-size: 12px; line-height: 1.55; margin: 0; }
    .ticket-bullets { margin-top: 12px; display: grid; gap: 8px; }
    .ticket-bullet {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      color: rgba(255,255,255,0.62);
      font-size: 12px;
      line-height: 1.45;
    }
    .ticket-bullet i {
      width: 18px;
      height: 18px;
      border-radius: 999px;
      border: 1px solid rgba(40, 255, 251, 0.2);
      background: rgba(40, 255, 234, 0.1);
      display: grid;
      place-items: center;
      font-style: normal;
      font-weight: 1200;
      color: var(--primary);
      flex: 0 0 auto;
      margin-top: 1px;
    }


    

    .checkout {
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.04);
      border-radius: var(--radius);
      padding: 18px;
      box-shadow: var(--shadow2);
      position: sticky;
      top: 92px;
    }
    .checkout h3 { margin: 0 0 8px 0; font-size: 16px; }
    .checkout p { margin: 0; color: rgba(255,255,255,0.65); font-size: 12px; line-height: 1.6; }

    .checkout-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid rgba(255,255,255,0.10);
    }

    .qty {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(0,0,0,0.18);
      border-radius: 12px;
      padding: 8px 10px;
    }
    .qty button {
      width: 34px;
      height: 34px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.04);
      color: rgba(255,255,255,0.9);
      cursor: pointer;
      font-weight: 1200;
      transition: transform 120ms ease, background 160ms ease, border-color 160ms ease;
    }
    .qty button:hover {
      transform: translateY(-1px);
      background: rgba(40,255,92,0.06);
      border-color: rgba(40,255,92,0.20);
    }
    .qty span { min-width: 18px; text-align: center; font-weight: 1200; letter-spacing: -0.2px; }

    .total { font-size: 18px; font-weight: 1200; letter-spacing: -0.2px; }
    .checkout-actions { display: grid; gap: 10px; margin-top: 14px; }

    .fineprint {
      margin-top: 10px;
      font-size: 11px;
      color: rgba(255,255,255,0.52);
      line-height: 1.55;
    }

    .contact {
      display: grid;
      grid-template-columns: 0.9fr 1.1fr;
      gap: 14px;
      align-items: start;
    }
    .contact-card {
      border: 1px solid rgba(255, 255, 255, 0.10);
      background: rgba(255, 255, 255, 0.04);
      border-radius: var(--radius);
      padding: 18px;
      box-shadow: var(--shadow2);
    }
    .contact-card h3 { margin: 0 0 10px 0; font-size: 16px; }
    .contact-card p { margin: 0 0 14px 0; color: rgba(255,255,255,0.72); font-size: 13px; line-height: 1.6; }

    .form { display: grid; gap: 10px; }
    .field { display: grid; gap: 7px; }

    .field label { font-size: 12px; color: rgb(255, 255, 255); }
    .field input, .field textarea, .field select {
      width: 100%;
      border-radius: 14px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      background: rgba(0, 0, 0, 0.24);
      color: rgba(255,255,255,0.92);
      padding: 12px 12px;
      outline: none;
      font-size: 13px;
      transition: border-color 160ms ease, background 160ms ease;
    }
    .field input:focus, .field textarea:focus, .field select:focus {
      border-color: rgba(40, 230, 255, 0.45);
      background: rgba(0, 0, 0, 0.30);
    }
    .field textarea { min-height: 120px; resize: vertical; }

    .footer {
      padding: 26px 0 34px 0;
      border-top: 1px solid rgba(255,255,255,0.10);
      color: rgba(255,255,255,0.55);
      font-size: 12px;
    }
    .footer-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }

    .social {
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
    }
    .social a {
      border: 1px solid rgba(255, 255, 255, 0.10);
      background: rgba(255, 255, 255, 0.04);
      padding: 9px 12px;
      border-radius: 12px;
      font-size: 12px;
      color: rgba(255,255,255,0.78);
      transition: background 180ms ease, border-color 180ms ease, transform 140ms ease;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .social a:hover {
      transform: translateY(-1px);
      background: rgba(63, 63, 63, 0.06);
      border-color: rgba(49, 49, 49, 0.2);
      color: rgba(255,255,255,0.92);
    }
    .social svg { width: 16px; height: 16px; display: block; }

    .reveal {
      opacity: 0;
      transform: translateY(18px);
      transition: opacity 720ms ease, transform 720ms ease;
      will-change: opacity, transform;
    }
    .reveal.is-visible { opacity: 1; transform: translateY(0); }
    .reveal.delay-1 { transition-delay: 90ms; }
    .reveal.delay-2 { transition-delay: 160ms; }
    .reveal.delay-3 { transition-delay: 230ms; }

    .modal {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.64);
      backdrop-filter: blur(10px);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 18px;
      z-index: 200;
    }
    .modal.is-open { display: flex; }
    .modal-card {
      width: 100%;
      max-width: 560px;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,0.14);
      background: rgba(7, 10, 16, 0.94);
      box-shadow: var(--shadow);
      overflow: hidden;
    }
    .modal-head {
      padding: 16px 16px;
      border-bottom: 1px solid rgba(255,255,255,0.10);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
    .modal-head strong { font-size: 14px; letter-spacing: -0.2px; }
    .modal-close {
      width: 38px;
      height: 38px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.04);
      color: rgba(255,255,255,0.92);
      cursor: pointer;
      font-weight: 1200;
    }
    .modal-body { padding: 16px; display: grid; gap: 12px; }
    .summary {
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.04);
      border-radius: 16px;
      padding: 14px;
      display: grid;
      gap: 8px;
    }
    .summary-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: rgb(255, 255, 255);
      font-size: 13px;
    }
    .summary-row b { color: rgba(255,255,255,0.92); }

    .grid-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .modal-foot {
      padding: 16px;
      border-top: 1px solid rgba(255,255,255,0.10);
      display: grid;
      gap: 10px;
    }

    @media (max-width: 1080px) {
      .hero-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .ticket-grid { grid-template-columns: 1fr; }
      .tickets { grid-template-columns: 1fr; }
      .checkout { position: relative; top: auto; }
      .promo-cards { grid-template-columns: 1fr; }
    }

    @media (max-width: 960px) {
      .grid-3 { grid-template-columns: 1fr; }
      .split { grid-template-columns: 1fr; }
      .gallery { grid-template-columns: 1fr; }
      .contact { grid-template-columns: 1fr; }
      .hero-video__content { padding: 110px 0 82px 0; }
    }

    @media (max-width: 900px) {
      .nav {
        display: none;
        position: absolute;
        right: 20px;
        top: 64px;
        padding: 10px;
        background: rgba(7,10,16,0.96);
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 14px;
        backdrop-filter: blur(14px);
        flex-direction: column;
        gap: 6px;
        min-width: 180px;
      }

      .nav.is-open {
        display: flex;
      }
      .menu-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
      .cta { min-width: auto; }
      .hero-video__title { letter-spacing: -0.8px; }
      .grid-2 { grid-template-columns: 1fr; }
    }

    @media (prefers-reduced-motion: reduce) {
      html, body { scroll-behavior: auto; }
      .reveal { opacity: 1; transform: none; transition: none; }
      .hero-video__badge, .hero-video__title, .hero-video__subtitle, .hero-video__actions, .hero-facts { animation: none; opacity: 1; transform: none; }
      .hero-video__scroll span::after { animation: none; }
      .btn, .nav a, .social a { transition: none; }
    }




    .sponsors {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.sponsor {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 16px;
  padding: 18px 14px;
  min-height: 76px;
  display: grid;
  place-items: center;
  text-align: center;
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  letter-spacing: 0.2px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
  transition: transform 140ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.sponsor::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: radial-gradient(420px 180px at 50% 30%, rgba(123, 123, 123, 0.12), transparent 62%);
  opacity: 0;
  transition: opacity 180ms ease;
  pointer-events: none;
}

.sponsor:hover {
  transform: translateY(-2px);
  border-color: rgba(177, 177, 177, 0.26);
  background: rgba(81, 81, 81, 0.05);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42);
}

.sponsor:hover::before {
  opacity: 1;
}

.sponsor {
  position: relative;
  overflow: hidden;
}

.sponsor img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none;
  max-height: none;

  display: block;
  filter: grayscale(1) brightness(1.02);
  opacity: 0.88;
  transform: scale(1.02);
  transition: filter 180ms ease, opacity 180ms ease, transform 220ms ease;
}

.sponsor:hover img {
  filter: grayscale(0) brightness(1.05);
  opacity: 1;
  transform: scale(1.06);
}

@media (max-width: 960px) {
  .sponsors {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

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

}

@media (prefers-reduced-motion: reduce) {
  .sponsor,
  .sponsor::before,
  .sponsor img {
    transition: none;
  }
}


.nav-sponsor {
  display: none;
}

@media (max-width: 900px) {
  .cta-sponsor {
    display: none;
  }

  .nav-sponsor {
    display: block;
  }

  .menu-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

  .menu-btn span {
    width: 18px;
    height: 2px;
    background: rgba(255,255,255,0.9);
    border-radius: 2px;
    display: block;
  }
}



/*********************/
.odg-wrap {
  margin-top: 18px;
}

.odg-inner {
  max-width: 1080px;
  margin: 50px auto 0;
}

.odg-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.odg-card {
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  border-radius: 16px;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  position: relative;
  box-shadow: 0 10px 26px rgba(0,0,0,0.30);
  transition: transform 140ms ease, border-color 180ms ease, background 180ms ease;
  aspect-ratio: 4 / 3;
}

.odg-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.04);
}

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

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

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

.odl-overlay {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
  background: rgba(0,0,0,0.86);
  backdrop-filter: blur(10px);
}

.odl-overlay.is-open {
  display: block;
}

body.odl-lock {
  overflow: hidden;
}

.odl-top {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  display: flex;
  justify-content: flex-start;
  z-index: 3;
}

.odl-close {
  width: 44px;
  height: 44px;
  top: 0px;
  position: absolute;
  right: 0px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 140ms ease, background 180ms ease, border-color 180ms ease;
}

.odl-close:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.22);
}

.odl-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 70px 18px 120px 18px;
}

.odl-main {
  max-width: min(1200px, 92vw);
  max-height: calc(100vh - 200px);
  width: auto;
  height: auto;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 18px 70px rgba(0,0,0,0.55);
  object-fit: contain;
  background: rgba(255,255,255,0.03);
}

.odl-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
  font-size: 34px;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 3;
  transition: transform 140ms ease, background 180ms ease, border-color 180ms ease;
}

.odl-nav:hover {
  transform: translateY(-50%) translateY(-1px);
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.22);
}

.odl-prev { left: 14px; }
.odl-next { right: 14px; }

.odl-thumbsWrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  display: flex;
  justify-content: center;
  z-index: 4;
  padding: 0 14px;
}

.odl-thumbs {
  max-width: min(920px, 92vw);
  display: flex;
  gap: 5px;
  overflow-x: auto;
  padding: 5px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.38);
  backdrop-filter: blur(10px);
  scroll-behavior: smooth;
}

.odl-thumbs::-webkit-scrollbar {
  height: 8px;
}

.odl-thumbs::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.18);
  border-radius: 999px;
}

.odl-thumb {
  width: 66px;
  height: 50px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  flex: 0 0 auto;
  transition: transform 140ms ease, border-color 180ms ease;
}

.odl-thumb:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.22);
}

.odl-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.05) contrast(1.06);
}

.odl-thumb.is-active {
  border-color: rgba(255,255,255,0.38);
  transform: translateY(-1px);
}

@media (max-width: 700px) {
  .odl-main {
    max-width: 100vw;
    max-height: calc(100vh - 220px);
    position: absolute;
  }
  .odl-thumb {
    width: 58px;
    height: 44px;
  }
}



body.odl-lock .topbar {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
}

body.odl-lock #navbar.is-scrolled {
  box-shadow: none;
  background: transparent;
  backdrop-filter: none;
}
/* 1) Minden kép legyen "blokkszintű", középre igazítva */
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* 2) Lightbox (odl) stage: mobile safe-area + szimmetrikus padding */
.odl-stage {
  padding-left: max(18px, env(safe-area-inset-left));
  padding-right: max(18px, env(safe-area-inset-right));
}

/* 3) Lightbox fő kép: mindig dead-center */
.odl-main {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* 4) Ha a "balra tolás" mobilon látszik: a container padding legyen teljesen szimmetrikus */
@media (max-width: 560px) {
  .container {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
}

.odl-overlay {
  width: 100vw;
}

.btn-login-ico {
  width: 16px;
  height: 16px;
  display: block;
}

@media (max-width: 900px) {
  .btn-login-text {
    display: none;
  }

  .btn-login {
    width: 44px;
    height: 44px;
    padding: 0;
  }

  .btn-login-ico {
    width: 18px;
    height: 18px;
  }

  .nav-login {
    display: block;
  }
}

@media (min-width: 901px) {
  .nav-login {
    display: none;
  }
}




/******/

.od-user {
  position: relative;
}

.od-user-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0);
  background: rgba(255, 255, 255, 0);
  color: rgba(255,255,255,0.92);
  padding: 8px 10px;
  border-radius: 14px;
  cursor: pointer;
  transition: transform 140ms ease, background 180ms ease, border-color 180ms ease;
  height: 40px;
}

.od-user-btn:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
}

.od-user-ico {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.92;
}

.od-user-ico svg {
  width: 18px;
  height: 18px;
  display: block;
}

.od-user-initials {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  letter-spacing: 0.6px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.18);
}

.od-user-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 240px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(7, 10, 16, 0.82);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 45px rgba(0,0,0,0.45);
  overflow: hidden;
  display: none;
  z-index: 50;
}

.od-user.is-open .od-user-menu {
  display: block;
}

.od-user-head {
  padding: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.od-user-name {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.2px;
  color: rgba(255,255,255,0.94);
}

.od-user-email {
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255,255,255,0.60);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.od-user-item {
  display: block;
  padding: 11px 12px;
  font-size: 13px;
  color: rgba(255,255,255,0.86);
  text-decoration: none;
  border-top: 1px solid rgba(255,255,255,0.06);
  transition: background 160ms ease, color 160ms ease;
}

.od-user-item:hover {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.96);
}

.od-user-item.is-danger {
  color: rgba(255, 170, 170, 0.95);
}

.od-user-item.is-danger:hover {
  background: rgba(255, 80, 80, 0.12);
}


.contact-status {
  display: none;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 12px;
  color: rgba(255,255,255,0.88);
  font-size: 12px;
  line-height: 1.5;
}

.contact-status.is-open {
  display: block;
}

.contact-status.is-ok {
  border-color: rgba(120,255,190,0.18);
  background: rgba(120,255,190,0.08);
  color: rgba(215,255,235,0.92);
}

.contact-status.is-err {
  border-color: rgba(255,130,130,0.18);
  background: rgba(255,90,90,0.10);
  color: rgba(255,220,220,0.92);
}


/****************************/

.od-news {
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.40);
  overflow: hidden;
}

.od-news__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.od-news__media {
  position: relative;
  background: rgba(0,0,0,0.25);
  border-right: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
}

.od-news__media img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
  object-fit: contain;
  transform: none;
}

.od-news__placeholder {
  height: 100%;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,0.55);
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.od-news__mediaGlow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 280px at 30% 20%, rgba(255,255,255,0.08), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.55));
  pointer-events: none;
}

.od-news__body {
  padding: 18px;
  display: grid;
  gap: 10px;
}

.od-news__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}

.od-news__pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.20);
  color: rgba(255,255,255,0.78);
  font-size: 12px;
  backdrop-filter: blur(10px);
}

.od-news__date {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}

.od-news__title {
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.4px;
  line-height: 1.15;
}
  .od-news__content.is-collapsed {
    position: relative;
    max-height: 7.4em;
    overflow: hidden;
  }
  .od-news__content.is-collapsed::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3.2em;
    background: linear-gradient(to bottom, rgba(7,10,16,0), rgba(7,10,16,0.9));
    pointer-events: none;
  }
.od-news__subtitle {
  margin: 0;
  color: rgba(255,255,255,0.70);
  font-size: 13px;
  line-height: 1.6;
}

.od-news__content {
  color: rgba(255,255,255,0.70);
  font-size: 13px;
  line-height: 1.75;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 12px;
  border-radius: 10px;
}

.od-news__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.od-news__social {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.od-news__btn {
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.86);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform 140ms ease, background 180ms ease, border-color 180ms ease;
  box-shadow: 0 10px 22px rgba(0,0,0,0.22);
}

.od-news__btn:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
}

.od-news__btn b {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.20);
  color: rgba(255,255,255,0.86);
}

.od-news__btn.is-on {
  border-color: rgba(40, 255, 241, 0.40);
  background: rgba(40, 244, 255, 0.10);
}

.od-news__ico {
  width: 35px;
  height: 35px;
  font-size: 25px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.20);
  display: flex;
  justify-content: center;
  align-items: center;
}

.od-news__locked {
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.18);
  border-radius: 12px;
  padding: 10px 12px;
  color: rgba(255,255,255,0.78);
  font-size: 12px;
  height: 57px;
  display: flex;
  align-items: center;
}

.od-news__divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 4px 0;
}

.od-news__comments {
  display: grid;
  gap: 10px;
}

.od-news__commentsHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.od-news__commentsHead strong {
  font-size: 13px;
  letter-spacing: 0.2px;
}

.od-news__commentsHead span {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}

.od-news__form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: start;
}

.od-news__form textarea {
  width: 100%;
  min-height: 46px;
  max-height: 160px;
  resize: vertical;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.24);
  color: rgba(255,255,255,0.92);
  padding: 12px 12px;
  outline: none;
  font-size: 13px;
  line-height: 1.55;
}

.od-news__form textarea:focus {
  border-color: rgba(40, 230, 255, 0.45);
  background: rgba(0, 0, 0, 0.30);
}

.od-news__status {
  display: none;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 12px;
  color: rgba(255,255,255,0.88);
  font-size: 12px;
  line-height: 1.5;
}

.od-news__status.is-open {
  display: block;
}

.od-news__hint {
  color: rgba(255,255,255,0.55);
  font-size: 12px;
}

.od-news__list {
  display: grid;
  gap: 10px;
}

.od-news__comment {
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
  border-radius: 14px;
  padding: 12px;
}

.od-news__cTop {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}

.od-news__cTop b {
  font-size: 12px;
  color: rgba(255,255,255,0.92);
}

.od-news__cTop span {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
}

.od-news__comment p {
  margin: 8px 0 0 0;
  font-size: 12px;
  line-height: 1.65;
  color: rgba(255,255,255,0.72);
}

@media (max-width: 960px) {
  .od-news__grid {
    grid-template-columns: 1fr;
  }

  .od-news__media {
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    min-height: 260px;
  }

  .od-news__form {
    grid-template-columns: 1fr;
  }
}
/******************************/

.od-cart {
  position: relative;
}

.od-cart-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0);
  background: rgba(255, 255, 255, 0);
  color: rgba(255,255,255,0.92);
  padding: 8px 10px;
  border-radius: 14px;
  cursor: pointer;
  transition: transform 140ms ease, background 180ms ease, border-color 180ms ease;
  height: 40px;
}

.od-cart-btn:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
}

.od-cart-ico {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.92;
}

.od-cart-count {
  min-width: 26px;
  height: 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  letter-spacing: 0.3px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.18);
  font-size: 12px;
  padding: 0 8px;
}

.od-cart-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 320px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.201);
  background: rgb(7, 10, 16);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 45px rgba(0,0,0,0.45);
  overflow: hidden;
  display: none;
  z-index: 60;
}

.od-cart.is-open .od-cart-menu {
  display: block;
}

.od-cart-head {
  padding: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.od-cart-title {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.2px;
  color: rgba(255,255,255,0.94);
}

.od-cart-sub {
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255,255,255,0.60);
}

/*
.od-cart-list {
  max-height: 320px;
  overflow: auto;
  padding: 10px;
  display: grid;
  gap: 10px;
}
*/
.od-cart-list {
    max-height: 320px;
    overflow: auto;
    padding: 10px;
    display: grid;
    gap: 10px;

    scrollbar-width: thin; 
    scrollbar-color: #6b6b6b #1a1a1a;
}

.od-cart-list::-webkit-scrollbar {
    width: 10px;
}

.od-cart-list::-webkit-scrollbar-track {
    background: #1a1a1a;
    border-radius: 10px;
}

.od-cart-list::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #6b6b6b, #3f3f3f);
    border-radius: 10px;
    border: 2px solid #1a1a1a;
}

.od-cart-list::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #8a8a8a, #555555);
}

.od-cart-list::-webkit-scrollbar-corner {
    background: #1a1a1a;
}



.od-cart-empty {
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
  border-radius: 14px;
  padding: 12px;
  color: rgba(255,255,255,0.70);
  font-size: 12px;
  line-height: 1.6;
}

.od-cart-row {
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0, 0, 0, 0.452);
  border-radius: 14px;
  padding: 12px;
  display: grid;
  gap: 10px;
}

.od-cart-rowTop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.od-cart-rowTop b {
  font-size: 12px;
  color: rgba(255,255,255,0.92);
  line-height: 1.35;
}

.od-cart-remove {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.92);
  cursor: pointer;
  font-weight: 1200;
}

.od-cart-rowBot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.od-cart-qty {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.18);
  border-radius: 12px;
  padding: 6px 8px;
}

.od-cart-q {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.9);
  cursor: pointer;
  font-weight: 1200;
}

.od-cart-qv {
  min-width: 18px;
  text-align: center;
  font-weight: 1200;
  font-size: 12px;
}

.od-cart-price {
  font-size: 12px;
  font-weight: 1000;
  color: rgba(255,255,255,0.88);
}

.od-cart-foot {
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,0.10);
  display: grid;
  gap: 10px;
}

.grid-3 .card{
  width: 350px;
  margin: 0 auto;
}
/******/
.shop-main {
  padding-top: 92px;
}

.shop-card {
  margin-bottom: 14px;
}

.shop-card-title {
  margin: 0 0 8px 0;
  font-size: 16px;
  letter-spacing: -0.2px;
}

.shop-card-sub {
  margin: 0;
  color: rgba(255,255,255,0.72);
  font-size: 13px;
  line-height: 1.65;
}

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

.shop-ticket .shop-buyrow {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
}

.shop-ticket .shop-buyrow .shop-qty {
  padding: 6px 8px;
}

.shop-ticket .shop-buyrow .shopAdd {
  flex: 1;
}

.shop-merch-head {
  margin-top: 18px;
}

.shop-merch-grid {
  margin-top: 14px;
}

.shop-product-title {
  margin: 12px 0 6px 0;
  font-size: 16px;
  letter-spacing: -0.2px;
}

.shop-product-desc {
  margin: 0 0 10px 0;
  color: rgba(255,255,255,0.70);
  font-size: 13px;
  line-height: 1.6;
}

.shop-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}

.shop-price {
  font-size: 18px;
  font-weight: 1200;
  letter-spacing: -0.2px;
}

.shop-actions {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

.shop-media {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
  aspect-ratio: 1 / 1;
  width: 100%;
  display: grid;
  place-items: center;
}

.shop-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.shop-media-ph {
  color: rgba(255,255,255,0.55);
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 12px;
}

@media (max-width: 1080px) {
  .shop-ticket-grid {
    grid-template-columns: 1fr;
  }
}


/******/

.od-checkout-grid{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap:16px;
  margin-top:14px;
}

@media (max-width: 900px){
  .od-checkout-grid{
    grid-template-columns: 1fr;
  }
}

.od-checkout-card{
  padding:16px;
}

.od-checkout-h3{
  margin:0 0 10px 0;
}

.od-checkout-items{
  display:grid;
  gap:10px;
  margin-top:10px;
}

.od-checkout-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:14px;
  background: rgba(0,0,0,0.18);
}

.od-checkout-rowL{
  display:grid;
  gap:2px;
}

.od-checkout-rowL span{
  color: rgba(255,255,255,0.65);
  font-size: 12px;
}

.od-checkout-rowR{
  font-weight: 900;
}

.od-checkout-total{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,0.10);
}

.od-checkout-total span{
  color: rgba(255,255,255,0.70);
}

.od-checkout-form{
  display:grid;
  gap:12px;
  margin-top:10px;
}

.od-checkout-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}

@media (max-width: 520px){
  .od-checkout-2{
    grid-template-columns: 1fr;
  }
}

.od-checkout-status{
  display:none;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
  font-size: 13px;
  line-height:1.6;
}

.od-checkout-status.is-open{
  display:block;
}

.od-checkout-status.is-ok{
  border-color: rgba(120,255,190,0.18);
  background: rgba(120,255,190,0.08);
  color: rgba(215,255,235,0.92);
}

.od-checkout-status.is-err{
  border-color: rgba(255,130,130,0.18);
  background: rgba(255,90,90,0.10);
  color: rgba(255,220,220,0.92);
}

.od-checkout-fine{
  font-size:12px;
  color: rgba(255,255,255,0.55);
  line-height:1.6;
}

.od-checkout-result{
  padding:18px;
}

.od-checkout-meta{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  margin-top:14px;
}

@media (max-width: 720px){
  .od-checkout-meta{
    grid-template-columns: 1fr;
  }
}

.od-checkout-meta div{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:14px;
  background: rgba(0,0,0,0.18);
}

.od-checkout-meta span{
  color: rgba(255,255,255,0.65);
  font-size: 12px;
}

/****/
.od-checkout-itemTop{
  display:flex;
  align-items:center;
  gap:14px;
}

.od-checkout-thumb{
  width:100px;
  height:100px;
  flex:0 0 48px;
  border-radius:14px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,0.10);
  background:linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  box-shadow:0 10px 26px rgba(0,0,0,0.35);
}

.od-checkout-thumb.ph{
  display:grid;
  place-items:center;
  font-size:18px;
  color:rgba(255,255,255,0.85);
}

.od-checkout-meta{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.od-checkout-meta b{
  font-size:14px;
  line-height:1.2;
  letter-spacing:0.2px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.od-checkout-qtyRow{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.od-checkout-stepper{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.05);
  backdrop-filter:blur(8px);
}

.od-checkout-q{
  width:30px;
  height:30px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.92);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:transform 120ms ease, background 160ms ease, border-color 160ms ease;
}

.od-checkout-q:hover{
  background:rgba(255,255,255,0.10);
  border-color:rgba(255,255,255,0.22);
}

.od-checkout-q:active{
  transform:scale(0.96);
}

.od-checkout-qv{
  min-width:18px;
  text-align:center;
  font-size:13px;
  font-weight:700;
  letter-spacing:0.3px;
  color:rgba(255,255,255,0.92);
}

.od-checkout-remove{
  height:32px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(255,90,90,0.28);
  background:rgba(255,90,90,0.08);
  color:rgba(255,255,255,0.92);
  cursor:pointer;
  transition:transform 120ms ease, background 160ms ease, border-color 160ms ease;
}

.od-checkout-remove:hover{
  background:rgba(255,90,90,0.12);
  border-color:rgba(255,90,90,0.40);
}

.od-checkout-remove:active{
  transform:scale(0.98);
}

.od-checkout-mini{
  margin-top:12px;
  font-size:13px;
  line-height:1.3;
  color:rgba(255,255,255,0.68);
  min-height:18px;
}

/*********************************/

.od-cart-rowL{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.od-cart-thumb{
  width:38px;
  height:38px;
  border-radius:12px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  flex:0 0 auto;
}

.od-cart-thumb.ph{
  display:grid;
  place-items:center;
  color: rgba(255,255,255,0.78);
  font-size:14px;
}
.od-cart-thumb{
  width: 42px;
  height: 42px;
  border-radius: 10px;
  object-fit: cover;
  display: block;
  flex: 0 0 42px;
}

.od-news__content iframe {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: 14px;
}

.btn-danger{background:rgba(255,70,70,.12);border:1px solid rgba(255,70,70,.25);color:rgba(255,220,220,.95)}
.btn-danger:hover{background:rgba(255,70,70,.18)}

#odAdminDeleteNewsBtn{
  position: absolute;
  margin-left: 70px;
}

#odAdminEditPostBtn {
  position: absolute;
  margin-left: 155px;
}


.od-adminModal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,0.64);
  backdrop-filter: blur(10px);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, visibility 180ms ease;
}

.od-adminModal.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/*************/

.od-prodTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.od-prodGrid{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap:14px;
  align-items:start;
}

@media (max-width: 960px){
  .od-prodGrid{
    grid-template-columns: 1fr;
  }
}

.od-prodGallery{
  padding:14px;
}

.od-prodStage{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
  aspect-ratio: 1 / 1;
  display:grid;
  place-items:center;
}

.od-prodMainImg{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.od-prodPh{
  color: rgba(255,255,255,0.55);
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 12px;
}

.od-prodNav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:46px;
  height:46px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.35);
  color: rgba(255,255,255,0.92);
  font-size:34px;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition: transform 140ms ease, background 180ms ease, border-color 180ms ease;
  backdrop-filter: blur(10px);
}

.od-prodNav:hover{
  transform:translateY(-50%) translateY(-1px);
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.22);
}

.od-prodPrev{ left:12px; }
.od-prodNext{ right:12px; }

.od-prodThumbs{
  margin-top:10px;
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:8px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
  backdrop-filter: blur(10px);
}

.od-prodThumb{
  width:72px;
  height:58px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  padding:0;
  overflow:hidden;
  cursor:pointer;
  flex:0 0 auto;
  transition: transform 140ms ease, border-color 180ms ease, background 180ms ease;
}

.od-prodThumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter: saturate(1.05) contrast(1.06);
}

.od-prodThumb:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.06);
}

.od-prodThumb.is-active{
  border-color: rgba(40, 244, 255, 0.40);
  background: rgba(40, 244, 255, 0.08);
}

.od-prodInfo{
  padding:18px;
  display:grid;
  gap:12px;
}

.od-prodMetaRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.od-prodPill{
  display:inline-flex;
  align-items:center;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.18);
  color: rgba(255,255,255,0.78);
  font-size:12px;
  white-space:nowrap;
}

.od-prodStock{
  font-size:12px;
  font-weight:900;
  letter-spacing:0.2px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.18);
  color: rgba(255,255,255,0.78);
  white-space:nowrap;
}

.od-prodStock.is-ok{
  border-color: rgba(120,255,190,0.18);
  background: rgba(120,255,190,0.08);
  color: rgba(215,255,235,0.92);
}

.od-prodStock.is-low{
  border-color: rgba(255,130,130,0.18);
  background: rgba(255,90,90,0.10);
  color: rgba(255,220,220,0.92);
}

.od-prodTitle{
  margin:0;
  font-size: clamp(22px, 2.6vw, 34px);
  letter-spacing:-0.6px;
  line-height:1.1;
}

.od-prodPriceRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,0.08);
}

.od-prodPrice{
  font-size:28px;
  font-weight:1200;
  letter-spacing:-0.6px;
}

.od-prodQty{
  padding:6px 8px;
}

.od-prodBuy{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.od-prodDesc{
  border-top:1px solid rgba(255,255,255,0.08);
  padding-top:12px;
  color: rgba(255,255,255,0.74);
  font-size:13px;
  line-height:1.75;
}

.od-prodDesc p{
  margin:0 0 10px 0;
}

.od-prodDesc ul,
.od-prodDesc ol{
  margin: 10px 0 10px 20px;
}

.od-prodDesc a{
  text-decoration: underline;
  text-underline-offset: 3px;
}