:root {
      --gold: #c9a84c;
      --gold-light: #e8c86e;
      --gold-dim: #8a6c28;
      --red: #d42020;
    }

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

    html {
      scroll-behavior: auto;
      overflow-x: hidden;
      width: 100%;
      /* iPhones enlarge small text when turned to landscape unless told not to, which made
         the small red error message (and other small text) bigger and wrapped it more. */
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }

    body {
      background-color: #2a1a0b;
      color: #fff;
      font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
      overflow-x: hidden;
      width: 100%;
      max-width: 100%;
      background-image: url('../assets/img/bg-body.png');
      background-size: 100% auto;
      background-position: top center;
      background-repeat: no-repeat;
      /* background-blend-mode: overlay; */
    }


    /* ── BACKGROUND PARTICLES CANVAS ── */
    #bg-canvas {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
    }

    nav,
    .hero,
    .video-section,
    /* .scroll-section, OLD SCROLL1 */
    .gold-divider,
    footer {
      position: relative;
      z-index: 1;
    }

    #cursor-glow {
      display: none;
    }

    /* ─────────────────────────────────────
       SCROLL REVEAL
    ───────────────────────────────────── */
    .reveal {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.95s cubic-bezier(.22, 1, .36, 1),
        transform 0.95s cubic-bezier(.22, 1, .36, 1);
    }

    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .d1 {
      transition-delay: 0.13s;
    }

    .d2 {
      transition-delay: 0.26s;
    }

    .d3 {
      transition-delay: 0.39s;
    }

    /* ─────────────────────────────────────
       NAVIGATION
       — transparent with tall gradient
       — links LEFT, logo RIGHT
    ───────────────────────────────────── */
    nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 300;
      padding: 22px 52px 18px;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      width: 100%;
      box-sizing: border-box;
      overflow: visible;
    }



    /* tall gradient pseudo-element */
    nav::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 130px;
      background: linear-gradient(to bottom,
          rgba(0, 0, 0, 0.88) 0%,
          rgba(0, 0, 0, 0.3) 55%,
          transparent 70%);
      z-index: -1;
      pointer-events: none;
      transition: opacity 0.4s;
    }

    nav.scrolled {
      background: rgba(6, 6, 6, 0.96);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      /* padding: 13px 52px; */
      box-shadow: none;
    }

    /* ABOUT BUTTON — RIGHT */
    .nav-action {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }

    .nav-about-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 28px;
      padding: 0 22px;
      background: linear-gradient(135deg, #c9a84c, #8a6c28);
      color: #000;
      font-family: 'Inter', sans-serif;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      text-decoration: none;
      border: none;
      cursor: pointer;
      white-space: nowrap;
      transition: opacity 0.22s, transform 0.22s;
    }

    .nav-about-btn:hover {
      opacity: 0.85;
      transform: scale(1.04);
    }

    nav.scrolled::before {
      opacity: 0;
    }

    /* LINKS — CENTER */
    .nav-links {
      display: flex;
      align-items: center;
      justify-content: center;
      list-style: none;
      position: static;
      background: none;
      flex-direction: row;
      padding: 0;
      border: none;
      max-height: none;
      overflow: visible;
    }

    .nav-sep {
      color: var(--red);
      font-size: 12px;
      font-weight: 300;
      padding: 0 13px;
      opacity: 0.9;
      user-select: none;
    }

    .nav-links a {
      position: relative;
      color: rgba(255, 255, 255, 0.84);
      text-decoration: none;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      padding: 4px 0;
      transition: color 0.25s;
    }

    .nav-links a::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      right: 0;
      height: 1px;
      background: var(--gold);
      transform: scaleX(0);
      transform-origin: right;
      transition: transform 0.32s cubic-bezier(.22, 1, .36, 1);
    }

    .nav-links a:hover {
      color: var(--gold-light);
    }

    .nav-links a:hover::after {
      transform: scaleX(1);
      transform-origin: left;
    }

    /* LOGO — RIGHT */
    .nav-logo img {
      height: 30px;
      display: block;
      margin-top: 5px;
      margin-left: 32px;
    }

    /* ─────────────────────────────────────
       HERO
    ───────────────────────────────────── */
    .hero {
      height: 62vh;
      min-height: 260px;
      position: relative;
      overflow: hidden;
    }

    .hero-fade {
      display: none;
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      will-change: transform;
    }

    .hero-rays {
      display: none;
    }

    .ray {
      position: absolute;
      top: -40px;
      transform-origin: top center;
      filter: blur(22px);
      border-radius: 50%;
      opacity: 0;
    }

    .ray-1 {
      left: 28%;
      width: 120px;
      height: 65%;
      background: linear-gradient(to bottom, rgba(201, 168, 76, 0.22) 0%, transparent 80%);
      animation: rayPulse 7s ease-in-out infinite;
    }

    .ray-2 {
      left: 50%;
      width: 80px;
      height: 55%;
      background: linear-gradient(to bottom, rgba(201, 168, 76, 0.14) 0%, transparent 80%);
      animation: rayPulse 9s ease-in-out infinite 2.5s;
    }

    .ray-3 {
      left: 68%;
      width: 60px;
      height: 45%;
      background: linear-gradient(to bottom, rgba(201, 168, 76, 0.18) 0%, transparent 80%);
      animation: rayPulse 8s ease-in-out infinite 1.2s;
    }

    @keyframes rayPulse {

      0%,
      100% {
        opacity: 0;
        transform: skewX(-8deg) scaleY(0.9);
      }

      40%,
      60% {
        opacity: 1;
        transform: skewX(6deg) scaleY(1.1);
      }
    }

    #particles-canvas {
      display: none;
    }

    .hero-vignette {
      display: none;
    }

    /* scroll hint */
    .scroll-hint {
      position: absolute;
      bottom: 55px;
      left: 50%;
      z-index: 5;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      animation: hintBounce 2.2s ease-in-out infinite;
    }

    .scroll-hint span {
      font-size: 8px;
      letter-spacing: 3.5px;
      text-transform: uppercase;
      color: var(--gold);
      opacity: 0.65;
    }

    .hint-arrow {
      width: 10px;
      height: 10px;
      border-right: 1.5px solid var(--gold);
      border-bottom: 1.5px solid var(--gold);
      transform: rotate(45deg);
      opacity: 0.55;
    }

    @keyframes hintBounce {

      0%,
      100% {
        transform: translateX(-50%) translateY(0);
      }

      50% {
        transform: translateX(-50%) translateY(7px);
      }
    }

    /* ─────────────────────────────────────
       VIDEO + TITLE  (section 2)
    ───────────────────────────────────── */
    .video-section {
      background: transparent;
      padding: 0px 60px 44px;
      box-sizing: border-box;
      width: 100%;
    }

    .video-inner {
      max-width: 1080px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      gap: 56px;
    }

    .video-wrapper {
      position: relative;
      flex: 0 0 440px;
      cursor: pointer;
      overflow: hidden;
      transform-style: preserve-3d;
      transition: box-shadow 0.4s;
      border: 3px solid var(--gold);
      border-radius: 14px;
    }

    .video-wrapper:hover {
      box-shadow: none;
    }

    .video-wrapper img.video-thumb {
      width: 100%;
      transform: scale(1);
      display: block;
      transition: transform 0.55s cubic-bezier(.22, 1, .36, 1);
    }

    .video-wrapper:hover img.video-thumb {
      transform: scale(1.0);
    }

    .video-wrapper::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 1;
      background: rgba(0, 0, 0, 0.18);
      transition: background 0.3s;
    }

    .video-wrapper:hover::after {
      background: rgba(0, 0, 0, 0.04);
    }

    /* gold shimmer sweep on hover */
    .video-wrapper::before {
      content: '';
      position: absolute;
      inset: 0;
      margin: auto;
      z-index: 2;
      background: linear-gradient(110deg,
          transparent 20%, rgba(201, 168, 76, 0.18) 50%, transparent 80%);
      transform: translateX(-100%);
      transition: transform 0s;
    }

    .video-wrapper:hover::before {
      transform: translateX(100%);
      transition: transform 0.7s ease;
    }

    .play-circle {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 3;
      transform: translate(-50%, -50%);
      width: 64px;
      height: 64px;
      background: rgba(201, 168, 76, 0.35);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      border: 1px solid rgba(255, 255, 255, 0.55);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s,
        transform 0.32s cubic-bezier(.22, 1, .36, 1),
        box-shadow 0.32s;
    }

    .video-wrapper:hover .play-circle {
      background: rgba(201, 168, 76, 0.5);
      transform: translate(-50%, -50%) scale(1.14);
      box-shadow: 0 0 0 10px rgba(201, 168, 76, 0.14),
        0 0 0 22px rgba(201, 168, 76, 0.05);
    }

    .play-circle svg {
      margin-left: 2px;
    }

    .play-circle svg polygon {
      fill: #fff;
    }

    .title-wrapper {
      flex: 1;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* pulsing gold glow behind the logo */
    .title-wrapper::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 130%;
      height: 130%;
      background: radial-gradient(ellipse at center,
          rgba(201, 168, 76, 0.22) 0%,
          rgba(201, 168, 76, 0.08) 40%,
          transparent 70%);
      pointer-events: none;
      z-index: 0;
      animation: bgGlow 4s ease-in-out infinite;
    }

    @keyframes bgGlow {

      0%,
      100% {
        opacity: 0.45;
        transform: translate(-50%, -50%) scale(0.92);
      }

      50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.08);
      }
    }

    .title-wrapper img {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 440px;
      animation: logoGlow 3.8s ease-in-out infinite;
    }

    @keyframes logoGlow {

      0%,
      100% {
        filter: drop-shadow(0 0 16px rgba(201, 168, 76, 0.12));
      }

      50% {
        filter: drop-shadow(0 0 42px rgba(201, 168, 76, 0.4));
      }
    }

    /* ─────────────────────────────────────
       PARCHMENT SCROLL  (section 3 — now above arrow)
    ───────────────────────────────────── */
    /* OLD SCROLL1 — .scroll-section */
    /* .scroll-section {
      background: transparent;
      padding: 20px 20px 20px;
      display: flex;
      justify-content: center;
      box-sizing: border-box;
      width: 100%;
      overflow: hidden;
    } */

    /* OLD SCROLL1 — .scroll-container (Plack-bg.png 1376x675, ratio 2.039) */
    /* .scroll-container {
      position: relative;
      width: 950px;
      max-width: 96vw;
      transform-style: preserve-3d;
      transition: transform 0.18s ease-out;
      cursor: none;
      box-sizing: border-box;
      margin: 0 auto;
    } */

    /* OLD SCROLL1 — .scroll-bg */
    /* .scroll-bg {
      width: 100%;
      display: block;
      pointer-events: none;
      user-select: none;
    } */

    /* warm glow that follows the cursor inside the scroll */
    .scroll-light {
      position: absolute;
      inset: 0;
      z-index: 10;
      pointer-events: none;
      border-radius: 6px;
      background: radial-gradient(ellipse 220px 140px at var(--lx, 50%) var(--ly, 50%),
          rgba(201, 168, 76, 0.13) 0%,
          transparent 65%);
      opacity: 0;
      transition: opacity 0.35s;
    }

    /* OLD SCROLL1 — .scroll-container:hover .scroll-light */
    /* .scroll-container:hover .scroll-light {
      opacity: 1;
    } */

    /* OLD SCROLL1 — .scroll-scan */
    /* .scroll-scan {
      display: none;
    } */

    /* smoke fog on parchment hover */
    .scroll-smoke {
      position: absolute;
      inset: 0;
      z-index: 8;
      pointer-events: none;
      overflow: hidden;
      opacity: 0;
      transition: opacity 1.4s ease;
    }

    /* OLD SCROLL1 — .scroll-container:hover .scroll-smoke */
    /* .scroll-container:hover .scroll-smoke {
      opacity: 1;
    } */

    .smoke-blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(22px);
    }

    .smoke-blob:nth-child(1) {
      width: 200px;
      height: 80px;
      background: rgba(190, 155, 80, 0.07);
      bottom: 10%;
      left: 6%;
      animation: smokeA 6s ease-in-out infinite;
    }

    .smoke-blob:nth-child(2) {
      width: 160px;
      height: 65px;
      background: rgba(160, 130, 60, 0.05);
      bottom: 5%;
      right: 10%;
      animation: smokeB 7s ease-in-out infinite 1.5s;
    }

    .smoke-blob:nth-child(3) {
      width: 120px;
      height: 55px;
      background: rgba(210, 170, 80, 0.04);
      bottom: 20%;
      left: 38%;
      animation: smokeA 8s ease-in-out infinite 3s;
    }

    @keyframes smokeA {

      0%,
      100% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0.5;
      }

      40% {
        transform: translateY(-16px) translateX(10px) scale(1.12);
        opacity: 1;
      }

      70% {
        transform: translateY(-8px) translateX(-4px) scale(0.96);
        opacity: 0.7;
      }
    }

    @keyframes smokeB {

      0%,
      100% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0.4;
      }

      35% {
        transform: translateY(-20px) translateX(-8px) scale(1.1);
        opacity: 0.9;
      }

      65% {
        transform: translateY(-10px) translateX(6px) scale(0.94);
        opacity: 0.6;
      }
    }

    /* OLD SCROLL1 — content, text, sound, actions, play button */
    /* .scroll-content {
      position: absolute;
      top: 10%;
      bottom: 10%;
      left: 8%;
      right: 8%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      padding: 0;
      gap: 12px;
    }

    .scroll-main-text {
      width: 100%;
      display: flex;
      justify-content: center;
      flex-shrink: 0;
    }

    .scroll-main-text img {
      width: 95%;
      display: block;
      max-height: 100px;
    }

    .scroll-sound {
      width: 90%;
      flex-shrink: 0;
    }

    .scroll-sound img {
      width: 100%;
      display: block;
      max-height: 50px;
    }

    .scroll-actions {
      position: relative;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 40px;
      flex-wrap: nowrap;
      flex-shrink: 0;
    }

    .btn-play-wrap {
      flex-shrink: 0;
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
      line-height: 0;
      animation: playPulse 2.4s ease-in-out infinite;
      transition: transform 0.25s cubic-bezier(.22, 1, .36, 1);
    }

    .btn-play-wrap img {
      display: block;
      width: 220px;
    }

    .btn-play-wrap:hover {
      transform: scale(1.07);
      animation-play-state: paused;
    }

    .btn-play-wrap:active {
      transform: scale(0.96);
    } */

    @keyframes playPulse {

      0%,
      100% {
        filter: drop-shadow(0 0 2px rgba(60, 130, 35, 0.2));
      }

      50% {
        filter: drop-shadow(0 0 8px rgba(60, 130, 35, 0.5));
      }
    }

    /* OLD SCROLL1 — code-side, input-row, input-wrap, actual-input, btn-go-wrap */
    /* .code-side {
      display: flex;
      flex-direction: column;
      gap: 2px;
      align-items: flex-start;
      flex-wrap: nowrap;
    }

    .code-side img.returning-label {
      display: block;
      width: 195px;
      height: 16px;
      flex-shrink: 0;
      object-fit: contain;
    }

    .input-row {
      display: flex;
      align-items: flex-end;
      gap: 6px;
      flex-shrink: 0;
    }

    .input-wrap {
      position: relative;
      width: 181px;
      height: 55px;
      flex-shrink: 0;
    }

    .input-wrap img.fill-bg {
      display: block;
      width: 181px;
      height: 55px;
      object-fit: fill;
    }

    .actual-input {
      position: absolute;
      inset: 0;
      background: transparent;
      border: none;
      outline: none;
      padding: 0 8px;
      font-family: 'Inter', sans-serif;
      font-size: 10px;
      color: #3c1e08;
    }

    .btn-go-wrap {
      flex-shrink: 0;
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
      width: 55px;
      height: 55px;
      transition: filter 0.2s, transform 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .btn-go-wrap img {
      display: block;
      width: 55px;
      height: 55px;
      object-fit: fill;
    }

    .btn-go-wrap:hover {
      filter: brightness(1.22);
      transform: scale(1.07);
    }

    .btn-go-wrap:active {
      transform: scale(0.95);
    } */

    /* ─────────────────────────────────────
       NEW SCROLL SECTION 2
    ───────────────────────────────────── */
    .scroll2-section {
      display: flex;
      justify-content: center;
      padding: 50px 20px 110px;
      background: transparent;
      position: relative;
      z-index: 1;
    }

    .scroll2-container {
      position: relative;
      width: min(950px, 96vw);
    }

    .scroll2-bg {
      width: 100%;
      display: block;
      user-select: none;
      pointer-events: none;
    }

    .scroll2-content {
      position: absolute;
      top: 4.5%;
      bottom: 1%;
      left: 5%;
      right: 5%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      gap: 7.5%;
    }

    .scroll2-title {
      width: 100%;
      flex-shrink: 0;
      display: flex;
      justify-content: center;
      padding-top: 65px;
      /* padding-left: 2%;
      padding-right: 2%; */
    }

    .scroll2-title-text {
      width: 100%;
      margin: 0;
      font-family: 'Spectral', Georgia, serif;
      font-weight: 900;
      color: #3c1e08;
      text-align: center;
      line-height: 1.2;
      /* Sized with headroom (recomputed for the 800 weight, which is wider
         per character than 700) so "The Fate of Prague and of Czechia"
         always stays on one line before the forced <br>. */
      font-size: clamp(20px, 3.65vw, 40px);
    }

    /* Inert by default (desktop keeps its natural wrap); forces the specific 4-line
       break requested for mobile ("The fate of Prague / and of Czechia / hinges on
       what you / uncover next.") instead of leaving it to natural word-wrap, which
       shifts unpredictably with exact viewport width. */
    .mobile-break {
      display: none;
    }

    .scroll2-sound {
      width: 100%;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;

      gap: 10px;
    }

    .scroll2-sound-icon {
      width: clamp(19px, 2.4vw, 30px);
      height: clamp(19px, 2.4vw, 30px);
      display: block;
      flex-shrink: 0;
      object-fit: contain;
    }

    .scroll2-sound-text {
      margin: 0;
      white-space: nowrap;
      font-family: 'Spectral', Georgia, serif;
      font-weight: 800;
      color: #3c1e08;
      /* Headroom-checked (800 weight) so this stays on one line at every
         width from tablet through desktop — same fix as the title. */
      font-size: clamp(11px, 2.15vw, 25px);
    }

   .scroll2-actions {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 44px;
      flex-shrink: 0;
      padding-left: 0%;
      padding-right: 3%;
    }

    .scroll2-play {
      flex-shrink: 0;
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
      line-height: 0;
      animation: playPulse 2.4s ease-in-out infinite;
      transition: transform 0.25s;
    }

    .scroll2-play:hover {
      transform: scale(1.07);
      animation-play-state: paused;
    }

    .scroll2-play:active {
      transform: scale(0.96);
    }

    .scroll2-play img {
      width: 220px;
      display: block;
    }

    .scroll2-code {
      display: flex;
      flex-direction: column;
      gap: 4px;
      align-items: flex-start;
      flex-shrink: 0;
      width: 242px;
    }

    .scroll2-label {
      width: 100%;
    }

    /* Label spans the exact width of the input+Go row below it: "R" lines
       up with the input's left edge, "here:" lines up with Go's right edge. */
    .scroll2-label-text {
      width: 100%;
      margin: 0;
      white-space: normal;
      text-align: justify;
      text-align-last: justify;
      font-family: 'Spectral', Georgia, serif;
      font-weight: 700;
      color: #3c1e08;
      font-size: 12px;
    }

    .scroll2-input-row {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .scroll2-error {
      margin: 4px 0 0;
      min-height: 14px;
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      color: #b3261e;
      opacity: 0;
      transition: opacity 0.2s;
    }

    .scroll2-error.visible {
      opacity: 1;
    }

    .scroll2-input-wrap.shake {
      animation: resumeCodeShake 0.35s;
    }

    @keyframes resumeCodeShake {
      25% { transform: translateX(-4px); }
      75% { transform: translateX(4px); }
    }

    .scroll2-input-wrap {
      position: relative;
      width: 181px;
      height: 55px;
      flex-shrink: 0;
    }

    .scroll2-input-wrap img.scroll2-fill {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: fill;
    }

    .scroll2-input-wrap input {
      position: absolute;
      inset: 0;
      background: transparent;
      border: none;
      outline: none;
      padding: 0 10px;
      font-size: 22px;
      text-align: center;
      font-family: 'Inter', sans-serif;
      color: #3c1e08;
      /* Explicit, high-contrast caret - feedback was that the default caret (which
         varies by browser/OS, and can render faint against this cream background)
         wasn't visibly showing focus after clicking the field. */
      caret-color: var(--red);
    }

    .scroll2-go {
      width: 55px;
      height: 55px;
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
      flex-shrink: 0;
      transition: filter 0.2s, transform 0.2s;
    }

    .scroll2-go:hover {
      filter: brightness(1.2);
      transform: scale(1.07);
    }

    .scroll2-go:active {
      transform: scale(0.95);
    }

    .scroll2-go img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: fill;
    }

    /* Tablet 900px */
    @media (max-width: 900px) {
      .scroll2-section {
        padding: 40px 20px 20px;
      }

      .scroll2-play img {
        width: 170px;
      }

      .scroll2-code {
        width: 189px;
      }

      .scroll2-label-text {
        font-size: 9.5px;
      }

      .scroll2-input-wrap {
        width: 140px;
        height: 43px;
      }

      .scroll2-input-wrap input {
        font-size: 16px;
      }

      .scroll2-go {
        width: 43px;
        height: 43px;
      }

      .scroll2-actions {
        gap: 20px;
      }
    }

    /* Side-by-side layout (phones in landscape, tablets, desktop): the error message must not
       change the layout. In flow it wrapped to 3 lines in the narrow code column, which made the
       column about 28px taller, so the Play button (centred on the column) dropped ~16px below the
       input row, and the text ran down onto the paper's torn bottom edge.
       Now the message is out of the flow, centred under the input and wide enough for 2 lines.
       The 18px it used to reserve stays as padding, so Play stays aligned with the input row. */
    @media (min-width: 561px) {
      .scroll2-code {
        position: relative;
        padding-bottom: 18px;
      }

      .scroll2-error {
        position: absolute;
        left: 50%;
        top: calc(100% - 14px);
        transform: translateX(-50%);
        width: 230px;
        margin: 0;
        min-height: 0;
        line-height: 1.25;
        text-align: center;
        pointer-events: none;
      }
    }

    /* Landscape phone / tablet width: the desktop 3% right padding shifted the Play + code group
       about 11px left of the scroll's centre. */
    @media (min-width: 561px) and (max-width: 900px) {
      .scroll2-actions {
        padding-right: 0;
      }
    }

    /* Mobile 560px — scroll goes vertical: Play stacks above the code entry
       instead of squeezing both into one row. */
    @media (max-width: 560px) {
      /* Bottom padding was 10px, which left the scroll almost touching the footer. */
      .scroll2-section {
        padding: 40px 5px 60px;
      }

      /* The desktop rule pushes the heading down 65px, which on a phone left about twice
         as much empty paper above the heading (83px) as below the last control (42px).
         24px makes both gaps equal (42px) so the content sits centred on the scroll. */
      .scroll2-title {
        padding-top: 24px;
      }

      /* Real-device testing showed no aspect-ratio-locked box + object-fit:cover
         approach works reliably: the box's height must match content exactly (to
         avoid uneven leftover-slack padding, which varied by device font metrics),
         but that makes the box's proportions diverge from the source image's native
         ratio, so `cover` crops progressively further inward as content height
         changes - on some devices/content-lengths this crop line lands mid-roll,
         showing a torn edge instead of the intended smooth cylinder.
         Fix: border-image (9-slice) instead of a background image entirely. The
         source (parchment-bg-vertical.png, pre-rotated - rotating via CSS transform
         is what caused the crop-ratio problem in the first place) is sliced into a
         fixed-height top cap, a fixed-height bottom cap, and a stretchy middle. The
         caps NEVER get cropped or distorted regardless of container height, because
         9-slice is specifically designed for exactly this "fixed ends, flexible
         middle" case - box proportions become irrelevant. slice values (130px of
         the source's 1376px height, top and bottom) were measured directly off the
         asset: that's where the roll cylinder's shading ends and the flat mottled
         paper texture begins. */
      .scroll2-container {
        position: relative;
        width: min(380px, 90vw);
        box-sizing: border-box;
        border-style: solid;
        border-width: 48px 0;
        border-image-source: url('../assets/img/parchment-bg-vertical.png');
        border-image-slice: 128 0 128 0 fill;
        border-image-width: 48px 0;
        border-image-repeat: stretch;
      }

      /* The rotated <img> approach is replaced by .scroll2-container's own
         border-image above - hide the old element rather than removing it from the
         markup (it's shared with the desktop, non-mobile layout). */
      .scroll2-bg {
        display: none;
      }

      .scroll2-content {
        position: relative;
        /* neutralize the desktop rule's absolute-positioning offsets (top/bottom/
           left/right: they'd otherwise apply as relative-positioning offsets now) */
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        /* Vertical padding is small on purpose - the border-image caps above
           already reserve 48px top/bottom for the roll graphic itself; this is
           just breathing room between the roll and the text. */
        padding: 18px 10% 18px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 25px;
      }

      .scroll2-title-text {
        font-size: 25px;
        line-height: 1.2;
      }

      .mobile-break {
        display: block;
      }

      .scroll2-sound {
        flex-direction: column;
        gap: 6px;
      }

      .scroll2-sound-icon {
        width: 24px;
        height: 24px;
      }

      .scroll2-sound-text {
        font-size: 16px;
        padding-left: 10px;
        padding-right: 10px;
        white-space: normal;
        text-align: center;
      }

      .scroll2-actions {
        flex-direction: column;
        gap: 16px;
        padding-right: 0;
      }

      .scroll2-play img {
        width: 180px;
        padding-top: 0;
      }

      .scroll2-code {
        align-items: center;
        gap: 6px;
        width: 243px;
      }

      .scroll2-input-wrap {
        width: 185px;
        height: 46px;
      }

      .scroll2-input-wrap input {
        font-size: 16px;
      }

      .scroll2-go {
        width: 46px;
        height: 46px;
      }

      .scroll2-label-text {
        font-size: 12px;
      }
    }

    .gold-divider {
      display: none;
    }

    /* ─────────────────────────────────────
       FOOTER — compact dark band
    ───────────────────────────────────── */
    /* footer {
      background: transparent;
      padding: 32px 52px 20px;
      margin-top: 0;
      width: 100%;
      border-top: 1px solid rgba(201, 168, 76, 0.25);
    }

    footer::before {
      display: none;
      content: none;
    }

    .footer-inner {
      max-width: 1200px;
      margin: 0 auto;
      */

    .footer-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 40px;
      margin-bottom: 24px;
    }

    .footer-col h4 {
      color: var(--gold-light);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: none;
      margin-bottom: 12px;
      padding-bottom: 0;
      position: relative;
    }

    .footer-col h4::after {
      display: none;
    }

    .footer-col ul {
      list-style: none;
    }

    .footer-col ul li {
      margin-bottom: 6px;
    }

    .footer-col ul li a {
      color: rgba(255, 255, 255, 0.45);
      text-decoration: none;
      font-size: 11px;
      line-height: 1.5;
      transition: color 0.25s, transform 0.25s;
      display: inline-block;
    }

    .footer-col ul li a:hover {
      color: var(--gold-light);
      transform: translateX(2px);
    }

    footer {
      position: relative;
      padding: 32px 52px 20px;
      width: 100%;
      margin-top: 0;
      border-top: none;
      overflow: hidden;
      box-sizing: border-box;
    }

    /* top gold line */
    footer::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 1px;
      /* opacity: 0.5; */
      background: linear-gradient(to right,
          transparent,
          rgba(201, 168, 76, 0.7),
          transparent);
    }


    /*transpernt gradiant */


    footer {
      position: relative;
      background-image:
        linear-gradient(to bottom,
          /* #2a1a0b 5%, */
          #050302 50%,
          #050302 100%);
      opacity: 0.8;
      background-blend-mode: overlay;
    }

    .app-badges {
      display: relative;
      flex-direction: column;
      gap: 8px;
    }

    .app-badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      border: 1px solid rgba(201, 168, 76, 0.2);
      border-radius: 6px;
      padding: 6px 11px;
      text-decoration: none;
      background: rgba(201, 168, 76, 0.06);
      transition: background 0.25s, border-color 0.25s, transform 0.25s;
    }

    .app-badge:hover {
      background: rgba(201, 168, 76, 0.12);
      border-color: rgba(201, 168, 76, 0.35);
      transform: translateY(-2px);
    }

    .badge-text {
      display: flex;
      flex-direction: column;
      line-height: 1.4;
    }

    .badge-sm {
      font-size: 8px;
      color: rgba(255, 255, 255, 0.45);
    }

    .badge-lg {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.85);
      font-weight: 600;
    }

    .social-row {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 4px;
    }

    .social-icon {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 1.5px solid rgba(201, 168, 76, 0.25);
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      background: rgba(201, 168, 76, 0.08);
      transition: border-color 0.25s, background 0.25s, transform 0.25s;
    }

    .social-icon:hover {
      border-color: rgba(201, 168, 76, 0.5);
      background: rgba(201, 168, 76, 0.18);
      transform: translateY(-3px);
    }

    .social-icon svg {
      fill: rgba(255, 255, 255, 0.55);
      display: block;
      transition: fill 0.25s;
    }

    .social-icon:hover svg {
      fill: var(--gold-light);
    }

    .footer-bottom {
      border-top: 1px solid rgba(201, 168, 76, 0.12);
      padding: 16px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
    }

    .footer-bottom p {
      color: rgba(255, 255, 255, 0.35);
      font-size: 10px;
      letter-spacing: 0.5px;
    }

    .footer-legal {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
    }

    .footer-legal a {
      color: rgba(255, 255, 255, 0.35);
      font-size: 10px;
      text-decoration: none;
      transition: color 0.25s;
    }

    .footer-legal a:hover {
      color: var(--gold-light);
    }

    .footer-legal span {
      color: rgba(255, 255, 255, 0.2);
      font-size: 10px;
    }

    /* ─────────────────────────────────────
       MODALS
    ───────────────────────────────────── */
    .modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 9000;
      background: rgba(0, 0, 0, 0.82);
      backdrop-filter: blur(6px);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Video modal */
    .video-modal-box {
      position: relative;
      width: 90vw;
      max-width: 900px;
    }

    .video-modal-box .modal-close {
      position: absolute;
      top: -38px;
      right: 0;
      background: none;
      border: none;
      cursor: pointer;
      color: rgba(255, 255, 255, 0.6);
      font-size: 28px;
      line-height: 1;
      transition: color 0.2s;
    }

    .video-modal-box .modal-close:hover {
      color: #fff;
    }

    .video-modal-box video {
      display: block;
      width: 100%;
      aspect-ratio: 16/9;
      border: none;
      border: 1px solid rgba(201, 168, 76, 0.25);
      background: #000;
    }

    /* About modal */
    .about-modal-box {
      background: linear-gradient(160deg, #0e0c08 0%, #1a1508 100%);
      border: 1px solid rgba(201, 168, 76, 0.3);
      padding: 52px 56px 44px;
      max-width: 520px;
      width: 90vw;
      position: relative;
      text-align: center;
    }

    .about-modal-box .modal-close {
      position: absolute;
      top: 16px;
      right: 20px;
      background: none;
      border: none;
      cursor: pointer;
      color: rgba(255, 255, 255, 0.4);
      font-size: 24px;
      line-height: 1;
      transition: color 0.2s;
    }

    .about-modal-box .modal-close:hover {
      color: var(--gold);
    }

    .about-modal-box h2 {
      color: var(--gold);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
      margin-bottom: 20px;
    }

    .about-modal-box p {
      color: rgba(255, 255, 255, 0.62);
      font-size: 13.5px;
      line-height: 1.8;
      margin-bottom: 32px;
    }

    .btn-accept {
      display: inline-block;
      background: linear-gradient(135deg, #c9a84c, #8a6c28);
      color: #000;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      border: none;
      cursor: pointer;
      padding: 13px 38px;
      transition: opacity 0.22s, transform 0.22s;
    }

    .btn-accept:hover {
      opacity: 0.85;
      transform: scale(1.04);
    }

    /* ─────────────────────────────────────
       RIPPLE — gold burst on click
    ───────────────────────────────────── */
    .ripple-host {
      position: relative;
      overflow: hidden;
    }

    .ripple {
      position: absolute;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(201, 168, 76, 0.55) 0%, rgba(201, 168, 76, 0) 70%);
      transform: scale(0);
      animation: rippleOut 0.65s ease-out;
      pointer-events: none;
    }

    @keyframes rippleOut {
      to {
        transform: scale(5);
        opacity: 0;
      }
    }

    /* btn press micro-bounce */
    .btn-bounce:active {
      animation: btnBounce 0.22s ease;
    }

    @keyframes btnBounce {
      0% {
        transform: scale(1);
      }

      40% {
        transform: scale(0.93);
      }

      80% {
        transform: scale(1.04);
      }

      100% {
        transform: scale(1);
      }
    }

    /* ─────────────────────────────────────
       MODAL ANIMATIONS
    ───────────────────────────────────── */
    .modal-overlay {
      visibility: hidden;
      opacity: 0;
      transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .modal-overlay.open {
      visibility: visible;
      opacity: 1;
    }

    .video-modal-box,
    .about-modal-box {
      transform: scale(0.9) translateY(18px);
      transition: transform 0.38s cubic-bezier(.22, 1, .36, 1);
    }

    .modal-overlay.open .video-modal-box,
    .modal-overlay.open .about-modal-box {
      transform: scale(1) translateY(0);
    }

    /* ─────────────────────────────────────
       RESPONSIVE
    ───────────────────────────────────── */
    /* .nav-toggle {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      padding: 8px;
      z-index: 400;
    }

    .nav-toggle span {
      display: block;
      width: 20px;
      height: 2px;
      background: rgba(255, 255, 255, 0.84);
      margin: 5px 0;
      transition: all 0.3s ease;
    }

    .nav-toggle.active span:nth-child(1) {
      transform: rotate(45deg) translate(8px, 8px);
    }

    .nav-toggle.active span:nth-child(2) {
      opacity: 0;
    }

    .nav-toggle.active span:nth-child(3) {
      transform: rotate(-45deg) translate(7px, -7px);
    } */

    .nav-toggle {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      width: 40px;
      height: 40px;
      position: relative;
      z-index: 400;
    }

    .nav-toggle span {
      position: absolute;
      left: 50%;
      width: 25px;
      height: 4px;
      background: rgba(255, 255, 255, 0.84);
      transform: translateX(-50%);
      transition: all 0.3s ease;
    }

    /* position lines */
    .nav-toggle span:nth-child(1) {
      top: 8px;
    }

    .nav-toggle span:nth-child(2) {
      top: 19px;
    }

    .nav-toggle span:nth-child(3) {
      top: 30px;
    }

    /* transform into centered X */
    .nav-toggle.active span:nth-child(1) {
      top: 18px;
      transform: translateX(-50%) rotate(45deg);
    }

    .nav-toggle.active span:nth-child(2) {
      opacity: 0;
    }

    .nav-toggle.active span:nth-child(3) {
      top: 18px;
      transform: translateX(-50%) rotate(-45deg);
    }




    @media (max-width: 1240px) {
      nav {
        padding: 14px 22px;
        grid-template-columns: auto 1fr auto;
      }

      .nav-about-btn {
        height: 28px;
        padding: 0 14px;
        font-size: 9px;
        letter-spacing: 2px;
        margin-right: 8px;
      }

      .nav-toggle {
        display: block;
        order: 2;
        height: 28px;
        width: 28px;
        /* margin-right: 10px; */
      }

      .nav-toggle span:nth-child(1) { top: 2px; }
      .nav-toggle span:nth-child(2) { top: 13px; }
      .nav-toggle span:nth-child(3) { top: 23px; }
      .nav-toggle.active span:nth-child(1) { top: 12px; }
      .nav-toggle.active span:nth-child(3) { top: 12px; }

      .nav-links {
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        background: rgba(6, 6, 6, 0.98);
        backdrop-filter: blur(18px);
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
        gap: 16px;
        display: none !important;
        z-index: 350;
        border-bottom: 1px solid rgba(201, 168, 76, 0.25);
        max-height: calc(100vh - 60px);
        overflow-y: auto;
      }

      .nav-links.active {
        display: flex !important;
      }

      .nav-links a,
      .nav-sep {
        font-size: 13px;
        padding: 8px 0;
      }

      .nav-sep {
        display: none;
      }

      .video-section {
        padding: 18px 22px 32px;
      }

      .video-inner {
        flex-direction: column;
        align-items: center;
        gap: 24px;
      }

      .video-wrapper {
        flex: none;
        width: 100%;
        max-width: 480px;
      }

      .title-wrapper img {
        max-width: 300px;
      }

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

      footer {
        padding: 28px 28px 16px;
      }

      .hero {
        height: 44vh;
        min-height: 260px;
      }

      /* OLD SCROLL1 — 900px breakpoint overrides */
      /* .scroll-actions { gap: 20px; }
      .btn-play-wrap img { width: 170px; }
      .input-wrap { width: 140px; height: 43px; }
      .input-wrap img.fill-bg { width: 140px; height: 43px; }
      .btn-go-wrap { width: 43px; height: 43px; }
      .btn-go-wrap img { width: 43px; height: 43px; }
      .code-side img.returning-label { width: 160px; height: 14px; } */
    }

    @media (max-width: 560px) {
      /* OLD SCROLL1 — 560px breakpoint */
      /* .scroll-container { width: 100%; max-width: 100%; }
      .scroll-content { top: 8%; bottom: 12%; left: 5%; right: 5%; padding: 0; gap: 2px; justify-content: space-evenly; }
      .scroll-main-text img { max-height: 50px; width: 100%; }
      .scroll-sound img { max-height: 22px; width: 90%; } */

      nav {
        padding: 12px 16px;
      }

      .nav-logo img {
        height: 22px;
      }

      .nav-action img {
        height: 28px;
      }

      /* background fills full mobile width */
      body {
        background-size: cover;
        background-position: top center;
        width: 100%;
        overflow-x: hidden;
      }

      .hero {
        height: 34vh;
        min-height: 200px;
        width: 100%;
      }

      /* title above video — full width, no side constraints */
      .video-inner {
        flex-direction: column;
        align-items: center;
        gap: 16px;
        width: 100%;
      }

      .title-wrapper {
        order: -1;
        width: 100%;
        max-width: 100%;
        padding: 0 12px;
      }

      .title-wrapper img {
        width: 65%;
        max-width: 65%;
        display: block;
        margin: 0 auto;
      }

      .video-wrapper {
        width: 100%;
        max-width: 100%;
        flex: none;
      }

      .video-section {
        padding: 0 0 24px;
        width: 100%;
      }

      /* OLD SCROLL1 — .scroll-section, .scroll-container (560px) */
      /* .scroll-section { padding: 10px 5px; position: relative; overflow: hidden; }
      .scroll-container { width: 100%; max-width: 100%; } */

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

      .footer-col h4 {
        font-size: 12px;
        letter-spacing: 0.5px;
        margin-bottom: 10px;
      }

      .footer-col ul li a {
        font-size: 10px;
      }

      .app-badges {
        gap: 6px;
      }

      .app-badge {
        padding: 5px 8px;
        gap: 6px;
      }

      .badge-sm {
        font-size: 7px;
      }

      .badge-lg {
        font-size: 10px;
      }

      .social-row {
        gap: 8px;
      }

      .social-icon {
        width: 28px;
        height: 28px;
      }

      .footer-bottom {
        flex-direction: column;
        gap: 12px;
        text-align: center;
        padding: 12px 0;
      }

      .footer-bottom p {
        font-size: 9px;
      }

      .footer-legal {
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px;
      }

      .footer-legal a {
        font-size: 9px;
      }

      .footer-legal span {
        font-size: 8px;
      }

      footer {
        padding: 20px 16px 14px;
        margin-top: 0;
        width: 100%;
        background-size: cover;
        background-position: top center;
      }

      /* OLD SCROLL1 — remaining 560px overrides */
      /* .scroll-section { padding-bottom: 0; }
      .scroll-actions { padding-left: 5px !important; padding-right: 5px !important; flex-direction: row; gap: 4px; flex-wrap: nowrap; justify-content: space-around; }
      .btn-play-wrap img { width: 120px; }
      .code-side { width: auto; flex-shrink: 1; gap: 1px; display: flex; flex-direction: column; }
      .input-wrap { width: 100px; height: 28px; }
      .input-wrap img.fill-bg { width: 100px; height: 28px; }
      .actual-input { font-size: 8px; padding: 0 4px; }
      .btn-go-wrap { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; }
      .btn-go-wrap img { width: 28px; height: 28px; object-fit: fill; }
      .returning-label { font-size: 8px; margin-bottom: 2px; }
      .input-row { gap: 2px; } */

      .about-modal-box {
        padding: 36px 24px 32px;
      }

      .video-modal-box {
        width: 96vw;
      }
    }