:root {
        --bg: #030708;
        --bg-2: #070d0f;
        --bg-3: #020405;
        --ink: #010203;
        --teal: #0c3337;
        --teal-glow: #1de0c4;
        --orange: #ff6a1a;
        --orange-bright: #ff8c42;
        --amber: #ffb347;
        --bone: #f5efe2;
        --bone-dim: #a9b5b2;
        --muted: #5f6f6c;
        --line: rgba(255, 106, 26, 0.2);
        --line-cool: rgba(29, 224, 196, 0.16);
        --line-soft: rgba(255, 255, 255, 0.06);
        --maxw: 1220px;
        --font-display: "Outfit", sans-serif;
        --font-sans: "Inter", sans-serif;
      }
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      html {
        -webkit-font-smoothing: antialiased;
      }
      body {
        background: var(--bg);
        color: var(--bone);
        font-family: var(--font-sans);
        font-weight: 300;
        line-height: 1.6;
        letter-spacing: -0.01em;
        overflow-x: hidden;
      }
      ::selection {
        background: var(--orange);
        color: #0a0504;
      }
      img {
        display: block;
        max-width: 100%;
      }
      a {
        color: inherit;
        text-decoration: none;
      }

      body::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 4;
        pointer-events: none;
        opacity: 0.5;
        mix-blend-mode: overlay;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
      }
      body::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 3;
        pointer-events: none;
        opacity: 0.35;
        background: repeating-linear-gradient(
          180deg,
          transparent 0 2px,
          rgba(0, 0, 0, 0.22) 2px 3px
        );
      }

      .wrap {
        max-width: var(--maxw);
        margin: 0 auto;
        padding: 0 30px;
        position: relative;
        z-index: 2;
      }
      .kick {
        font-family: var(--font-sans);
        font-weight: 600;
        letter-spacing: 0.32em;
        text-transform: uppercase;
        font-size: 11px;
        color: var(--orange);
        display: inline-block;
      }
      .kick.cool {
        color: var(--teal-glow);
      }
      .display {
        font-family: var(--font-display);
        font-weight: 800;
        line-height: 0.9;
        letter-spacing: -0.02em;
        text-transform: uppercase;
      }
      h1,
      h2,
      h3 {
        color: var(--bone);
      }
      .or {
        color: var(--orange);
      }
      .cy {
        color: var(--teal-glow);
      }

      /* placeholder visual when media URL not yet filled */
      .ph {
        background:
          repeating-linear-gradient(
            45deg,
            rgba(255, 106, 26, 0.06) 0 12px,
            transparent 12px 24px
          ),
          radial-gradient(80% 80% at 50% 40%, #0d1e22, #060e10 60%, #020405);
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: var(--muted);
        font-family: var(--font-sans);
        font-weight: 500;
        font-size: 13px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }
      .ph small {
        display: block;
        color: var(--orange);
        font-size: 11px;
        letter-spacing: 0.2em;
        margin-bottom: 6px;
      }

      #prog {
        position: fixed;
        top: 0;
        left: 0;
        height: 3px;
        width: 100%;
        transform-origin: left;
        transform: scaleX(0);
        background: linear-gradient(90deg, var(--orange), var(--amber));
        z-index: 120;
        box-shadow: 0 0 14px var(--orange);
        animation: progScroll linear;
        animation-timeline: scroll(root);
      }
      @keyframes progScroll {
        to {
          transform: scaleX(1);
        }
      }
      .bars {
        position: fixed;
        left: 0;
        right: 0;
        height: 26px;
        background: #000;
        z-index: 60;
        pointer-events: none;
        transition: opacity 0.6s;
      }
      .bars.top {
        top: 0;
      }
      .bars.bot {
        bottom: 0;
      }
      body.scrolled .bars {
        opacity: 0;
      }

      nav {
        position: fixed;
        top: 26px;
        left: 0;
        right: 0;
        z-index: 70;
        padding: 15px 0;
        transition:
          top 0.5s,
          background 0.4s,
          padding 0.4s;
      }
      body.scrolled nav {
        top: 0;
        background: rgba(3, 7, 8, 0.72);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--line-soft);
        padding: 10px 0;
      }
      .navrow {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
      }
      .logo b {
        font-family: "Syne", sans-serif;
        font-weight: 700;
        font-size: 20px;
        display: block;
        line-height: 1;
        letter-spacing: -0.04em;
        font-stretch: normal;
      }
      .logo span {
        font-family: var(--font-sans);
        font-weight: 500;
        font-size: 9px;
        letter-spacing: 0.32em;
        color: var(--orange);
        text-transform: uppercase;
        margin-top: 5px;
        display: block;
      }
      /* Fluxora-style centered pill nav */
      .nav-links {
        display: flex;
        align-items: center;
        gap: 2px;
        background: rgba(255, 255, 255, 0.04);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 30px;
        padding: 5px 6px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
      }
      .nav-links a {
        font-family: var(--font-sans);
        font-weight: 500;
        font-size: 13px;
        color: rgba(255, 255, 255, 0.55);
        padding: 8px 18px;
        border-radius: 22px;
        text-decoration: none;
        letter-spacing: 0.02em;
        transition:
          background 0.2s,
          color 0.2s;
        white-space: nowrap;
      }
      .nav-links a:hover {
        background: rgba(255, 255, 255, 0.08);
        color: var(--bone);
      }
      @media (max-width: 860px) {
        .nav-links {
          display: none;
        }
      }

      .nav-cta {
        font-family: var(--font-sans);
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        font-size: 12px;
        border: 1px solid rgba(255, 255, 255, 0.18);
        color: var(--bg);
        padding: 11px 26px;
        border-radius: 30px;
        cursor: pointer;
        background: var(--bone);
        transition: all 0.25s ease;
      }
      .nav-cta:hover {
        background: var(--orange);
        border-color: var(--orange);
        color: #fff;
        box-shadow: 0 0 28px rgba(255, 106, 26, 0.45);
      }
      @media (max-width: 680px) {
        .logo span {
          display: none;
        }
      }

      .cta {
        display: inline-flex;
        align-items: center;
        gap: 11px;
        cursor: pointer;
        border: none;
        font-family: var(--font-sans);
        font-weight: 600;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        font-size: 16px;
        color: #fff;
        background: linear-gradient(
          180deg,
          var(--amber),
          var(--orange) 55%,
          #e0531a
        );
        padding: 16px 36px;
        border-radius: 40px;
        position: relative;
        overflow: hidden;
        box-shadow:
          0 16px 40px -12px rgba(255, 106, 26, 0.5),
          inset 0 1px 0 rgba(255, 255, 255, 0.3);
        transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
      }
      .cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 26px 54px -12px rgba(255, 106, 26, 0.7);
      }
      .cta::after {
        content: "";
        position: absolute;
        top: 0;
        left: -120%;
        width: 55%;
        height: 100%;
        background: linear-gradient(
          100deg,
          transparent,
          rgba(255, 255, 255, 0.4),
          transparent
        );
        transform: skewX(-18deg);
        animation: sheen 5s ease-in-out infinite;
      }
      @keyframes sheen {
        0%,
        60% {
          left: -120%;
        }
        85%,
        100% {
          left: 170%;
        }
      }
      .cta.big {
        font-size: 18px;
        padding: 18px 46px;
      }

      /* ============ HERO with VIDEO BACKGROUND + FORM ============ */
      #hero {
        position: relative;
        min-height: 100vh;
        overflow: hidden;
        display: flex;
        align-items: center;
        padding: 46px 0 60px;
      }
      #hero .heroMedia {
        position: absolute;
        inset: 0;
        z-index: 0;
        overflow: hidden;
      }
      #hero video,
      #hero .heroFallback {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      #hero .heroFallback {
        background:
          radial-gradient(
            70% 60% at 75% 30%,
            rgba(255, 106, 26, 0.25),
            transparent 60%
          ),
          radial-gradient(
            60% 70% at 12% 90%,
            rgba(29, 224, 196, 0.16),
            transparent 62%
          ),
          linear-gradient(180deg, #0a1416, #070d0e 55%, #040809);
      }
      #hero .heroTint {
        position: absolute;
        inset: 0;
        z-index: 1;
        background:
          /* left column stays dark so text is legible */
          linear-gradient(
            105deg,
            rgba(4, 8, 9, 0.75) 0%,
            rgba(4, 8, 9, 0.48) 28%,
            rgba(4, 8, 9, 0.22) 58%,
            rgba(4, 8, 9, 0.06) 100%
          ),
          /* subtle orange warmth where video is visible */
          radial-gradient(
              ellipse 80% 60% at 75% 45%,
              rgba(255, 106, 26, 0.1),
              transparent 65%
            ),
          /* top & bottom edge fade */
          linear-gradient(
              180deg,
              rgba(4, 8, 9, 0.55) 0%,
              transparent 25%,
              transparent 72%,
              rgba(4, 8, 9, 0.85) 100%
            );
      }
      .hero-grid {
        position: relative;
        z-index: 5;
        display: grid;
        grid-template-columns: 1.08fr 0.92fr;
        gap: 46px;
        align-items: center;
        width: 100%;
      }
      .hero-pre {
        display: flex;
        align-items: center;
        gap: 13px;
        margin-bottom: 16px;
        flex-wrap: wrap;
      }
      .hero-pre .dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--orange);
        box-shadow: 0 0 14px var(--orange);
        animation: pulse 2s infinite;
      }
      @keyframes pulse {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0.3;
        }
      }
      .hero-h1 {
        font-family: var(--font-display);
        font-weight: 800;
        text-transform: uppercase;
        line-height: 0.84;
        letter-spacing: -0.03em;
        font-size: clamp(54px, 8vw, 124px);
        text-shadow: 0 2px 40px rgba(0, 0, 0, 0.5);
      }
      .hero-h1 .l2 {
        display: block;
      }
      /* Fluxora-style: bold sans lines 1-2, then elegant serif italic accent */
      .hero-h1 .three {
        display: block;
        margin-top: 0.03em;
        text-shadow: 0 0 60px rgba(255, 106, 26, 0.4);
      }
      .hero-h1 .three em {
        font-family: Georgia, "Times New Roman", serif;
        font-style: italic;
        font-weight: normal;
        color: var(--orange);
        font-size: 1.06em;
        letter-spacing: -0.01em;
        text-transform: none;
      }

      /* social proof row (avatar circles + count) */
      .hero-proof {
        display: flex;
        align-items: center;
        gap: 0;
        margin-top: 14px;
      }
      .hp-faces {
        display: flex;
        margin-right: 14px;
      }
      .hpf {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-sans);
        font-weight: 700;
        font-size: 13px;
        color: #fff;
        border: 2px solid #030708;
        margin-right: -9px;
        flex-shrink: 0;
      }
      .hp-text {
        font-family: var(--font-sans);
        font-size: 13px;
        color: rgba(200, 188, 168, 0.7);
        letter-spacing: 0.02em;
        margin-left: 6px;
      }
      .hp-text b {
        color: var(--bone);
      }
      .hp-dot {
        display: inline-block;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #22c55e;
        box-shadow: 0 0 8px rgba(34, 197, 94, 0.7);
        margin-right: 7px;
        vertical-align: middle;
      }
      .hero-tag {
        font-family: "Syne", sans-serif;
        font-weight: 700;
        font-size: clamp(14px, 1.8vw, 20px);
        color: var(--teal-glow);
        margin-top: 10px;
        letter-spacing: -0.01em;
      }
      .hero-rule {
        width: 52px;
        height: 3px;
        background: var(--orange);
        margin: 14px 0 14px;
        box-shadow: 0 0 16px rgba(255, 106, 26, 0.6);
      }
      /* mobile-only in-flow photo — hidden on desktop, shown at its own
         natural size (no cropping/zooming possible) inside the mobile
         media query below */
      .hero-mobile-photo {
        display: none;
      }
      .hero-sub {
        font-family: var(--font-sans);
        font-weight: 300;
        font-size: 16px;
        line-height: 1.55;
        color: var(--bone-dim);
        max-width: 520px;
      }
      .hero-sub b {
        color: var(--bone);
        font-weight: 600;
      }
      .hero-cred {
        margin-top: 14px;
        display: flex;
        align-items: center;
        gap: 13px;
      }
      .hero-cred .star {
        color: var(--amber);
        font-size: 12px;
        letter-spacing: 0.15em;
      }
      .hero-cred p {
        font-family: var(--font-sans);
        font-size: 12px;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        color: var(--bone-dim);
        line-height: 1.5;
        font-weight: 400;
      }
      .hero-cred p b {
        color: var(--orange);
        font-weight: 600;
      }

      /* ---- hero stat cards (Fluxora-style floating metrics) ---- */
      .hero-stats {
        display: flex;
        gap: 8px;
        margin-top: 18px;
        flex-wrap: wrap;
      }
      .hstat {
        background: rgba(6, 12, 14, 0.45);
        backdrop-filter: blur(20px) saturate(140%);
        -webkit-backdrop-filter: blur(20px) saturate(140%);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 14px;
        padding: 12px 18px;
        min-width: 96px;
        position: relative;
        overflow: hidden;
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
      }
      .hstat::before {
        content: "";
        position: absolute;
        top: 0;
        left: 15%;
        right: 15%;
        height: 1px;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 106, 26, 0.35),
          transparent
        );
      }
      .hstat:hover {
        border-color: rgba(255, 106, 26, 0.25);
        transform: translateY(-3px);
        background: rgba(6, 12, 14, 0.65);
      }
      .hstat .hn {
        font-family: var(--font-display);
        font-weight: 800;
        font-size: 30px;
        color: var(--bone);
        line-height: 1;
        text-shadow: 0 0 20px rgba(255, 106, 26, 0.15);
      }
      .hstat .hn span {
        color: var(--orange);
      }
      .hstat .hl {
        font-family: var(--font-sans);
        font-size: 9px;
        color: rgba(255, 255, 255, 0.38);
        letter-spacing: 0.15em;
        text-transform: uppercase;
        margin-top: 5px;
        font-weight: 500;
      }

      /* HERO FORM CARD — solid glass, fully visible */
      .hero-form {
        background: rgba(5, 10, 12, 0.65);
        backdrop-filter: blur(32px) saturate(150%);
        -webkit-backdrop-filter: blur(32px) saturate(150%);
        border: 1px solid rgba(255, 106, 26, 0.18);
        border-radius: 24px;
        padding: 34px 32px;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.09),
          inset 0 0 0 1px rgba(255, 106, 26, 0.06),
          0 40px 90px -20px rgba(0, 0, 0, 0.85),
          0 0 80px -16px rgba(255, 106, 26, 0.18);
        position: relative;
        overflow: hidden;
      }
      /* Subtle top shimmer line on the glass card */
      .hero-form::before {
        content: "";
        position: absolute;
        top: 0;
        left: 10%;
        right: 10%;
        height: 1px;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, 0.15),
          transparent
        );
      }
      /* Orange glow corner accent */
      .hero-form::after {
        content: "";
        position: absolute;
        top: -60px;
        right: -60px;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(255, 106, 26, 0.08),
          transparent 70%
        );
        pointer-events: none;
      }
      .hero-form .hf-top {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        margin-bottom: 4px;
        gap: 10px;
      }
      .hero-form .hf-title {
        font-family: var(--font-display);
        font-weight: 800;
        font-size: 28px;
        line-height: 0.95;
        text-transform: uppercase;
        letter-spacing: -0.01em;
      }
      .hero-form .hf-free {
        font-family: var(--font-sans);
        font-weight: 600;
        font-size: 11px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: #1de0c4;
        border: 1px solid rgba(29, 224, 196, 0.25);
        border-radius: 30px;
        padding: 5px 12px;
        background: rgba(29, 224, 196, 0.08);
      }
      .hero-form .hf-when {
        font-family: var(--font-sans);
        font-size: 13px;
        color: rgba(200, 188, 168, 0.65);
        margin-bottom: 20px;
        font-weight: 400;
      }
      .hero-form .hf-when b {
        color: var(--orange);
        font-weight: 600;
      }
      .field {
        margin-bottom: 13px;
      }
      .field input {
        width: 100%;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        padding: 14px 16px;
        color: var(--bone);
        font-family: var(--font-sans);
        font-size: 15px;
        transition: all 0.25s ease;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
      }
      .field input:focus {
        outline: none;
        border-color: rgba(255, 106, 26, 0.5);
        background: rgba(255, 255, 255, 0.06);
        box-shadow: 0 0 0 3px rgba(255, 106, 26, 0.12);
      }
      .field input::placeholder {
        color: rgba(255, 255, 255, 0.25);
      }
      .hero-form .cta {
        width: 100%;
        justify-content: center;
        margin-top: 6px;
      }
      .hf-foot {
        text-align: center;
        font-family: var(--font-sans);
        font-size: 11.5px;
        color: var(--muted);
        margin-top: 13px;
        letter-spacing: 0.01em;
        font-weight: 400;
      }
      .hf-seats {
        font-family: var(--font-sans);
        font-size: 12px;
        color: var(--amber);
        text-align: center;
        margin-top: 10px;
        letter-spacing: 0.02em;
        font-weight: 500;
      }
      .hf-trust-row {
        text-align: center;
        font-family: var(--font-sans);
        font-size: 11px;
        color: var(--bone-dim);
        margin-top: 11px;
        line-height: 1.6;
      }
      .hf-cred-strip {
        text-align: center;
        font-family: var(--font-sans);
        font-size: 10px;
        color: var(--amber);
        letter-spacing: 0.09em;
        text-transform: uppercase;
        font-weight: 600;
        margin-top: 7px;
        opacity: 0.85;
      }

      /* ---- countdown boxes ---- */
      .hf-countdown {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin: 18px 0 20px;
      }
      .hf-cd-unit {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        flex: 1;
      }
      .hf-cd-n {
        display: block;
        font-family: var(--font-display);
        font-weight: 800;
        font-size: clamp(26px, 5vw, 36px);
        line-height: 1;
        color: var(--bone);
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 106, 26, 0.2);
        border-radius: 10px;
        width: 100%;
        text-align: center;
        padding: 10px 4px 8px;
        letter-spacing: -0.02em;
        box-shadow:
          0 0 20px rgba(255, 106, 26, 0.06),
          inset 0 1px 0 rgba(255, 255, 255, 0.06);
        transition:
          border-color 0.3s,
          box-shadow 0.3s;
      }
      .hf-cd-unit:hover .hf-cd-n {
        border-color: rgba(255, 106, 26, 0.45);
        box-shadow:
          0 0 28px rgba(255, 106, 26, 0.18),
          inset 0 1px 0 rgba(255, 255, 255, 0.08);
      }
      .hf-cd-l {
        display: block;
        font-family: var(--font-sans);
        font-size: 9px;
        font-weight: 600;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.3);
      }
      .hf-cd-sep {
        font-family: var(--font-display);
        font-size: 28px;
        font-weight: 800;
        color: var(--orange);
        opacity: 0.55;
        padding-bottom: 18px;
        line-height: 1;
        flex-shrink: 0;
      }
      /* countdown label row */
      .hf-cd-label {
        display: flex;
        align-items: center;
        gap: 7px;
        font-family: var(--font-sans);
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.08em;
        color: rgba(255, 106, 26, 0.8);
        text-transform: uppercase;
        margin-bottom: 4px;
      }
      .hf-cd-label::before {
        content: "";
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--orange);
        box-shadow: 0 0 8px var(--orange);
        animation: pulse 1.5s infinite;
      }
      /* seats progress bar */
      .hf-seats-bar-wrap {
        margin-top: 14px;
      }
      .hf-seats-meta {
        display: flex;
        justify-content: space-between;
        font-family: var(--font-sans);
        font-size: 11px;
        color: rgba(255, 255, 255, 0.35);
        margin-bottom: 7px;
        font-weight: 500;
        letter-spacing: 0.02em;
      }
      .hf-seats-meta b {
        color: var(--amber);
      }
      .hf-seats-track {
        height: 5px;
        background: rgba(255, 255, 255, 0.06);
        border-radius: 99px;
        overflow: hidden;
      }
      .hf-seats-fill {
        height: 100%;
        width: 73%;
        background: linear-gradient(90deg, var(--orange), #ff9a4d);
        border-radius: 99px;
        box-shadow: 0 0 12px rgba(255, 106, 26, 0.5);
        transition: width 1s cubic-bezier(0.22, 0.61, 0.36, 1);
      }
      /* urgency badge on left */
      .hero-urgency {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(255, 106, 26, 0.08);
        border: 1px solid rgba(255, 106, 26, 0.22);
        border-radius: 30px;
        padding: 6px 14px;
        font-family: var(--font-sans);
        font-size: 12px;
        font-weight: 600;
        color: var(--orange);
        letter-spacing: 0.04em;
        margin-top: 12px;
      }
      .hero-urgency::before {
        content: "⚡";
        font-size: 13px;
      }
      .hero-success {
        display: none;
        text-align: center;
        padding: 24px 6px;
      }
      .hero-success.show {
        display: block;
      }
      .hero-success .ico {
        font-size: 42px;
        margin-bottom: 12px;
      }
      .hero-success .hf-title {
        color: var(--orange);
        margin-bottom: 8px;
      }
      .hero-success p {
        font-family: var(--font-sans);
        font-weight: 300;
        color: var(--bone-dim);
        font-size: 14px;
      }

      /* ===== THANK YOU FULL-SCREEN PAGE ===== */
      #ty-page {
        position: fixed;
        inset: 0;
        z-index: 9999;
        background: var(--bg);
        display: none; /* shown via JS after submit */
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 32px 24px;
        opacity: 0;
        transition: opacity 0.55s ease;
        overflow: hidden;
      }
      #ty-page.visible {
        opacity: 1;
      }
      /* film-grain overlay matching rest of page */
      #ty-page::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
        pointer-events: none;
        z-index: 0;
      }
      /* ambient glow behind the card */
      #ty-page::after {
        content: "";
        position: absolute;
        width: 600px;
        height: 600px;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(255, 106, 26, 0.1) 0%,
          transparent 70%
        );
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        pointer-events: none;
        z-index: 0;
      }
      .ty-card {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: 520px;
        background: linear-gradient(
          160deg,
          rgba(18, 32, 38, 0.95),
          rgba(8, 14, 16, 0.98)
        );
        border: 1px solid rgba(255, 106, 26, 0.22);
        border-radius: 28px;
        padding: 48px 40px 44px;
        text-align: center;
        box-shadow:
          0 0 80px rgba(255, 106, 26, 0.12),
          0 32px 80px rgba(0, 0, 0, 0.65);
      }
      /* animated tick circle */
      .ty-tick {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: linear-gradient(
          135deg,
          rgba(255, 106, 26, 0.18),
          rgba(255, 170, 80, 0.1)
        );
        border: 2px solid rgba(255, 106, 26, 0.45);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 28px;
        animation: ty-pulse 2.4s ease-in-out infinite;
      }
      @keyframes ty-pulse {
        0%,
        100% {
          box-shadow: 0 0 0 0 rgba(255, 106, 26, 0.25);
        }
        50% {
          box-shadow: 0 0 0 18px rgba(255, 106, 26, 0);
        }
      }
      .ty-tick svg {
        width: 36px;
        height: 36px;
      }
      .ty-eyebrow {
        font-family: var(--font-sans);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--orange);
        margin-bottom: 10px;
      }
      .ty-h {
        font-family: var(--font-display);
        font-size: clamp(26px, 5vw, 38px);
        font-weight: 800;
        color: var(--bone);
        line-height: 1.15;
        margin-bottom: 12px;
      }
      .ty-h em {
        font-style: normal;
        color: var(--orange);
      }
      .ty-sub {
        font-family: var(--font-sans);
        font-size: 14px;
        color: rgba(200, 188, 168, 0.6);
        line-height: 1.65;
        margin-bottom: 36px;
      }
      /* divider */
      .ty-div {
        width: 48px;
        height: 2px;
        background: linear-gradient(90deg, var(--orange), var(--amber));
        border-radius: 99px;
        margin: 0 auto 32px;
      }
      /* WhatsApp button */
      .ty-wa {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: linear-gradient(135deg, #1fbe53, #128c3e);
        color: #fff;
        font-family: var(--font-sans);
        font-size: 15px;
        font-weight: 700;
        text-decoration: none;
        border-radius: 50px;
        padding: 16px 32px;
        box-shadow: 0 8px 28px rgba(18, 140, 62, 0.38);
        transition:
          transform 0.2s ease,
          box-shadow 0.2s ease;
        letter-spacing: 0.01em;
        margin-bottom: 16px;
        width: 100%;
        justify-content: center;
      }
      .ty-wa:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 36px rgba(18, 140, 62, 0.5);
      }
      .ty-wa svg {
        flex-shrink: 0;
      }
      .ty-note {
        font-family: var(--font-sans);
        font-size: 11px;
        color: rgba(200, 188, 168, 0.35);
        letter-spacing: 0.04em;
        margin-top: 4px;
      }
      /* film-strip deco at top of page */
      .ty-strip {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 6px;
        background: repeating-linear-gradient(
          90deg,
          var(--orange) 0px,
          var(--orange) 24px,
          transparent 24px,
          transparent 36px
        );
        opacity: 0.5;
        z-index: 1;
      }
      @media (max-width: 480px) {
        .ty-card {
          padding: 36px 22px 32px;
          border-radius: 20px;
        }
        .ty-wa {
          font-size: 14px;
          padding: 14px 24px;
        }
      }
      .scrollcue {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 6;
        font-family: var(--font-sans);
        font-weight: 500;
        font-size: 10px;
        letter-spacing: 0.3em;
        color: var(--muted);
        text-transform: uppercase;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
      }
      .scrollcue .bar {
        width: 1px;
        height: 38px;
        background: linear-gradient(var(--orange), transparent);
      }
      @media (max-width: 920px) {
        .hero-grid {
          grid-template-columns: 1fr;
          gap: 34px;
        }
        .hero-form {
          max-width: 460px;
        }
        .scrollcue {
          display: none;
        }
        .hero-stats {
          gap: 8px;
        }
        .hstat {
          padding: 12px 16px;
          min-width: 90px;
        }
        .hstat .hn {
          font-size: 30px;
        }
      }

      /* ============ 3D SCROLL SEQUENCE ============ */
      #seq {
        position: relative;
        height: 700vh;
        background: #020405;
      }
      .seq-sticky {
        position: sticky;
        top: 0;
        height: 100vh;
        width: 100%;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #020405;
      }
      #seqCanvas {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: block;
        z-index: 1;
      }
      .seq-fallback {
        position: absolute;
        inset: 0;
        z-index: 1;
      }
      .seq-vignette {
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        background:
          radial-gradient(
            120% 100% at 50% 45%,
            transparent 40%,
            rgba(2, 4, 5, 0.55) 85%,
            rgba(2, 4, 5, 0.9)
          ),
          linear-gradient(
            180deg,
            rgba(2, 4, 5, 0.5),
            transparent 22%,
            transparent 70%,
            rgba(2, 4, 5, 0.75)
          );
      }
      .seq-cap {
        position: absolute;
        z-index: 4;
        left: 0;
        right: 0;
        bottom: 13%;
        padding: 0 6vw;
        opacity: 0;
        transform: translateY(40px);
        pointer-events: none;
        max-width: none;
        box-sizing: border-box;
      }
      .seq-cap .pk {
        font-family: var(--font-sans);
        font-weight: 600;
        letter-spacing: 0.36em;
        text-transform: uppercase;
        font-size: 12px;
        color: var(--orange);
        margin-bottom: 16px;
        display: block;
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
      }
      .seq-cap .huge {
        font-family: var(--font-display);
        font-weight: 800;
        text-transform: uppercase;
        font-size: clamp(42px, 8vw, 120px);
        line-height: 0.88;
        color: #fff;
        text-shadow: 0 8px 50px rgba(0, 0, 0, 0.85);
      }
      .seq-cap .huge .glow {
        color: var(--orange);
        text-shadow: 0 0 50px rgba(255, 106, 26, 0.5);
      }
      .seq-cap .lede {
        font-family: var(--font-sans);
        font-weight: 300;
        max-width: 480px;
        margin-top: 18px;
        font-size: 16px;
        color: #f3f0ea;
        text-shadow: 0 2px 16px rgba(0, 0, 0, 0.95);
      }
      .seq-cap .lede b {
        color: #fff;
        font-weight: 600;
      }
      .seq-progress {
        position: absolute;
        z-index: 5;
        left: 8vw;
        right: 8vw;
        bottom: 7%;
        height: 2px;
        background: rgba(255, 255, 255, 0.18);
        border-radius: 2px;
        overflow: hidden;
      }
      .seq-progress span {
        display: block;
        height: 100%;
        width: 0;
        background: linear-gradient(90deg, var(--orange), var(--amber));
        box-shadow: 0 0 12px var(--orange);
      }
      .seq-hint {
        position: absolute;
        z-index: 5;
        top: 22px;
        left: 50%;
        transform: translateX(-50%);
        font-family: var(--font-sans);
        font-weight: 500;
        font-size: 11px;
        letter-spacing: 0.3em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.55);
        animation: seqhint 2s ease-in-out infinite;
      }
      @keyframes seqhint {
        0%,
        100% {
          opacity: 0.4;
          transform: translateX(-50%);
        }
        50% {
          opacity: 1;
          transform: translateX(-50%) translateY(4px);
        }
      }
      @media (max-width: 680px) {
        .seq-cap {
          bottom: 16%;
          padding: 0 24px;
        }
        .seq-cap .lede {
          font-size: 14px;
        }
      }

      .sec {
        padding: 120px 0;
        position: relative;
      }
      .sec-head {
        text-align: center;
        max-width: 840px;
        margin: 0 auto 60px;
      }
      .sec-head .big {
        font-family: var(--font-display);
        font-weight: 800;
        text-transform: uppercase;
        font-size: clamp(40px, 6.5vw, 80px);
        line-height: 0.86;
        margin-top: 14px;
        letter-spacing: -0.02em;
      }
      .sec-head .sk {
        margin-top: 18px;
        color: var(--bone-dim);
        font-size: 17px;
        font-family: var(--font-sans);
        font-weight: 300;
      }

      /* WHO */
      #who {
        position: relative;
        background: linear-gradient(180deg, var(--bg-3), var(--bg));
      }
      .who-list {
        max-width: 920px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 12px;
        counter-reset: who-counter;
      }
      .who-item {
        counter-increment: who-counter;
        position: relative;
        overflow: hidden;
        display: flex;
        gap: 20px;
        align-items: flex-start;
        padding: 24px 26px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.05);
        background: rgba(255, 255, 255, 0.01);
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        opacity: 0;
        transform: translateY(28px);
      }
      .who-item.in {
        opacity: 1;
        transform: translateY(0);
        transition:
          opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
          transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
          background 0.3s,
          border-color 0.3s;
      }
      .who-item::after {
        content: counter(who-counter, decimal-leading-zero);
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        font-family: var(--font-display);
        font-weight: 800;
        font-size: 72px;
        line-height: 1;
        color: rgba(255, 255, 255, 0.09);
        pointer-events: none;
        z-index: 0;
      }
      .who-item > * {
        position: relative;
        z-index: 1;
      }
      .who-item:hover {
        background: rgba(255, 255, 255, 0.03);
        border-color: rgba(255, 106, 26, 0.2);
        transform: translateY(-2px);
      }
      .who-item.in:hover {
        transform: translateY(-2px);
      }
      .who-mark {
        flex: none;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-size: 14px;
        font-weight: 700;
        margin-top: 2px;
      }
      .who-mark.yes {
        background: rgba(255, 106, 26, 0.16);
        color: var(--orange);
        border: 1px solid var(--line);
        box-shadow: 0 0 16px rgba(255, 106, 26, 0.35);
      }
      .who-mark.no {
        background: rgba(29, 224, 196, 0.12);
        color: var(--teal-glow);
        border: 1px solid var(--line-cool);
        box-shadow: 0 0 16px rgba(29, 224, 196, 0.3);
      }
      .who-item p {
        font-size: 17px;
        line-height: 1.7;
        color: var(--bone-dim);
        font-family: var(--font-sans);
        font-weight: 300;
      }
      .who-item p b {
        color: var(--bone);
        font-weight: 600;
      }

      /* PAIN */
      #pain {
        position: relative;
        background: linear-gradient(180deg, var(--bg), var(--bg-3));
      }
      .pain-list {
        max-width: 920px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 14px;
        counter-reset: pain-counter;
      }
      .pain-item {
        counter-increment: pain-counter;
        position: relative;
        overflow: hidden;
        display: flex;
        gap: 20px;
        align-items: flex-start;
        padding: 24px 26px;
        border-radius: 12px;
        border: 1px solid rgba(220, 38, 38, 0.15);
        background: rgba(220, 38, 38, 0.03);
        transition: all 0.3s ease;
        opacity: 0;
        transform: translateY(28px);
      }
      .pain-item.in {
        opacity: 1;
        transform: translateY(0);
        transition:
          opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
          transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
          background 0.3s,
          border-color 0.3s;
      }
      .pain-item::after {
        content: counter(pain-counter, decimal-leading-zero);
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        font-family: var(--font-display);
        font-weight: 800;
        font-size: 72px;
        line-height: 1;
        color: rgba(220, 38, 38, 0.16);
        pointer-events: none;
        z-index: 0;
      }
      .pain-item > * {
        position: relative;
        z-index: 1;
      }
      .pain-item:hover {
        background: rgba(220, 38, 38, 0.07);
        border-color: rgba(220, 38, 38, 0.25);
        transform: translateY(-2px);
      }
      .pain-icon {
        flex: none;
        font-size: 20px;
        margin-top: 3px;
        line-height: 1;
        filter: drop-shadow(0 0 8px rgba(220, 38, 38, 0.6));
      }
      .pain-item p {
        font-size: 17px;
        line-height: 1.7;
        color: var(--bone-dim);
        font-family: var(--font-sans);
        font-weight: 300;
        margin: 0;
      }
      .pain-item p b {
        color: var(--bone);
        font-weight: 600;
      }
      /* mobile: 2-up grid (pairs: 1&2, 3&4...) instead of one long stack,
         with smaller/tighter cards so the whole list scrolls much less */
      @media (max-width: 760px) {
        .who-list,
        .pain-list {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 8px;
        }
        .who-item,
        .pain-item {
          flex-direction: column;
          align-items: flex-start;
          gap: 8px;
          padding: 14px 14px;
          border-radius: 10px;
        }
        .who-item p,
        .pain-item p {
          font-size: 12.5px;
          line-height: 1.45;
        }
        .who-mark {
          width: 24px;
          height: 24px;
          font-size: 11px;
          margin-top: 0;
        }
        .pain-icon {
          font-size: 16px;
          margin-top: 0;
        }
        .who-item::after,
        .pain-item::after {
          font-size: 34px;
          right: 8px;
        }
        /* PAIN has an odd number of items (5) — let the last one span the
           full width instead of leaving an empty gap beside it. The WHO
           section's last item is the contrasting "NOT for you" callout.
           WHO has 4 items: the first 2 pair up, then items 3 and 4 each
           get their own full-width row below (no orphaned half-empty row). */
        .pain-item:last-child,
        .who-item:nth-child(3),
        .who-item:nth-child(4) {
          grid-column: 1 / -1;
        }
      }
      .pain-bridge {
        max-width: 920px;
        margin: 36px auto 0;
        text-align: center;
        font-family: var(--font-sans);
        font-size: 18px;
        font-weight: 500;
        color: var(--amber);
        font-style: italic;
        padding: 28px 30px;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 0 0 12px 12px;
      }

      /* OUTCOMES */
      .outcomes {
        max-width: 980px;
        margin: 40px auto 0;
      }
      .outcomes-title {
        text-align: center;
        font-family: var(--font-sans);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--amber);
        margin-bottom: 22px;
      }
      .outcomes-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
      }
      .outcome-item {
        display: flex;
        gap: 14px;
        align-items: flex-start;
        padding: 20px 22px;
        border-radius: 10px;
        border: 1px solid rgba(29, 224, 196, 0.12);
        background: rgba(29, 224, 196, 0.03);
        transition: all 0.3s ease;
      }
      .outcome-item:hover {
        background: rgba(29, 224, 196, 0.06);
        border-color: rgba(29, 224, 196, 0.22);
      }
      .outcome-check {
        flex: none;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: rgba(29, 224, 196, 0.14);
        display: grid;
        place-items: center;
        font-size: 11px;
        font-weight: 700;
        color: var(--teal-glow);
        margin-top: 2px;
      }
      .outcome-item p {
        font-size: 15px;
        line-height: 1.65;
        color: var(--bone-dim);
        font-family: var(--font-sans);
        font-weight: 300;
        margin: 0;
      }
      .outcome-item p b {
        color: var(--bone);
        font-weight: 600;
      }
      @media (max-width: 680px) {
        .outcomes-grid {
          grid-template-columns: 1fr;
        }
      }

      /* VFX SHOWCASE GALLERY */
      #showcase {
        background: var(--bg-3);
      }
      .show-grid {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-auto-rows: 150px;
        gap: 12px;
        max-width: 1180px;
        margin: 0 auto;
      }
      .show-tile {
        position: relative;
        overflow: hidden;
        border-radius: 8px;
        border: 1px solid var(--line-soft);
        background: #060b0c;
      }
      .show-tile .ph {
        position: absolute;
        inset: 0;
      }
      .show-tile img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.7s ease;
        filter: saturate(1.1) contrast(1.04);
      }
      .show-tile:hover img {
        transform: scale(1.08);
      }
      .show-tile::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          180deg,
          transparent 55%,
          rgba(2, 4, 5, 0.7)
        );
        opacity: 0.7;
      }
      .show-tile .tlabel {
        position: absolute;
        z-index: 2;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 16px;
        font-family: var(--font-sans);
        font-size: 11px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--bone);
        font-weight: 500;
      }
      .show-tile .tlabel b {
        color: var(--orange);
        display: block;
        font-family: "Syne";
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0;
        text-transform: none;
        margin-top: 2px;
      }
      .t-a {
        grid-column: span 6;
        grid-row: span 2;
      }
      .t-b {
        grid-column: span 3;
        grid-row: span 1;
      }
      .t-c {
        grid-column: span 3;
        grid-row: span 1;
      }
      .t-d {
        grid-column: span 3;
        grid-row: span 2;
      }
      .t-e {
        grid-column: span 3;
        grid-row: span 2;
      }
      .t-f {
        grid-column: span 6;
        grid-row: span 1;
      }
      @media (max-width: 760px) {
        .show-grid {
          grid-template-columns: repeat(2, 1fr);
          grid-auto-rows: 130px;
        }
        .t-a,
        .t-b,
        .t-c,
        .t-d,
        .t-e,
        .t-f {
          grid-column: span 1;
          grid-row: span 1;
        }
        .t-a {
          grid-column: span 2;
        }
      }

      /* REELS / LEARN */
      #learn {
        background: linear-gradient(180deg, var(--bg-3), var(--bg));
      }
      .reels {
        max-width: 980px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 20px;
      }
      .reel {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 30px;
        align-items: center;
        padding: 32px 36px;
        border: 1px solid var(--line-soft);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.02);
        position: relative;
        overflow: hidden;
        transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
      }
      .reel::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: var(--orange);
        transform: scaleY(0);
        transform-origin: top;
        transition: transform 0.5s;
        box-shadow: 0 0 16px var(--orange);
      }
      .reel:hover::before {
        transform: scaleY(1);
      }
      .reel:hover {
        border-color: rgba(255, 106, 26, 0.22);
        background: rgba(255, 255, 255, 0.04);
      }
      .reel-tag {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        min-width: 96px;
      }
      .reel-tag .lab {
        font-family: var(--font-sans);
        font-size: 11px;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: var(--teal-glow);
        font-weight: 600;
      }
      .reel-tag .big {
        font-family: var(--font-display);
        font-size: 72px;
        color: var(--orange);
        line-height: 0.8;
        text-shadow: 0 0 30px rgba(255, 106, 26, 0.3);
        font-weight: 800;
      }
      .reel h3 {
        font-family: "Syne", sans-serif;
        font-weight: 700;
        font-size: 23px;
        margin-bottom: 9px;
        color: var(--bone);
      }
      .reel p {
        font-size: 16px;
        line-height: 1.7;
        color: var(--bone-dim);
        font-family: var(--font-sans);
        font-weight: 300;
      }
      .reel p span {
        color: var(--amber);
        font-weight: 500;
      }
      .reel.special {
        background: linear-gradient(
          115deg,
          rgba(255, 106, 26, 0.08),
          rgba(255, 255, 255, 0.02)
        );
        border-color: rgba(255, 106, 26, 0.25);
      }
      .reel.special .big {
        font-size: 40px;
      }
      .bonus {
        max-width: 980px;
        margin: 26px auto 0;
        text-align: center;
        padding: 26px 30px;
        border: 1px dashed rgba(255, 106, 26, 0.35);
        border-radius: 12px;
        background: rgba(255, 106, 26, 0.03);
        font-family: var(--font-sans);
        font-weight: 300;
      }
      .bonus b {
        color: var(--orange);
      }
      @media (max-width: 680px) {
        .reel {
          grid-template-columns: 1fr;
          gap: 12px;
        }
        .reel-tag {
          flex-direction: row;
        }
      }

      /* HOST */
      #host {
        background: var(--bg-3);
      }
      .host-grid {
        display: grid;
        grid-template-columns: 0.82fr 1.18fr;
        gap: 58px;
        align-items: center;
        max-width: 1120px;
        margin: 0 auto;
      }
      .host-photo {
        position: relative;
      }
      .frame {
        position: relative;
        border-radius: 3px;
        overflow: hidden;
        background: #000;
        box-shadow:
          0 44px 100px -34px rgba(0, 0, 0, 0.9),
          0 0 0 1px rgba(255, 106, 26, 0.3),
          0 0 60px -10px rgba(255, 106, 26, 0.25);
      }
      .frame img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .host-photo .frame {
        aspect-ratio: auto;
      }
      .host-photo .frame img {
        width: 100%;
        height: auto;
        object-fit: contain;
        display: block;
      }
      .corner {
        position: absolute;
        width: 20px;
        height: 20px;
        border: 1.5px solid var(--orange);
        z-index: 4;
        opacity: 0.85;
      }
      .corner.tl {
        top: 11px;
        left: 11px;
        border-right: 0;
        border-bottom: 0;
      }
      .corner.tr {
        top: 11px;
        right: 11px;
        border-left: 0;
        border-bottom: 0;
      }
      .corner.bl {
        bottom: 11px;
        left: 11px;
        border-right: 0;
        border-top: 0;
      }
      .corner.br {
        bottom: 11px;
        right: 11px;
        border-left: 0;
        border-top: 0;
      }
      .host-photo .stamp {
        position: absolute;
        bottom: -16px;
        right: -12px;
        z-index: 6;
        background: var(--orange);
        color: #fff;
        font-family: var(--font-sans);
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        font-size: 11px;
        padding: 12px 18px;
        border-radius: 4px;
        text-align: center;
        line-height: 1.4;
        box-shadow: 0 18px 44px -16px rgba(255, 106, 26, 0.6);
      }
      .host-body .big {
        font-family: var(--font-display);
        font-weight: 800;
        text-transform: uppercase;
        font-size: clamp(40px, 5.5vw, 72px);
        line-height: 0.86;
        margin-bottom: 6px;
        letter-spacing: -0.02em;
      }
      .host-body p {
        font-size: 16.5px;
        line-height: 1.75;
        color: var(--bone-dim);
        margin-bottom: 18px;
        max-width: 620px;
        font-family: var(--font-sans);
        font-weight: 300;
      }
      .host-body p b {
        color: var(--bone);
        font-weight: 600;
      }
      .host-body .film {
        color: var(--amber);
        font-weight: 500;
      }
      .credbar {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 24px;
      }
      .credbar span {
        font-family: var(--font-sans);
        font-size: 11px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--orange);
        border: 1px solid var(--line);
        border-radius: 6px;
        padding: 8px 14px;
        background: rgba(255, 106, 26, 0.06);
        font-weight: 500;
      }
      @media (max-width: 880px) {
        .host-grid {
          grid-template-columns: 1fr;
          gap: 50px;
        }
        .host-photo {
          max-width: 380px;
          margin: 0 auto;
        }
      }

      /* FILMS */
      #films {
        background: var(--bg);
        padding: 64px 0;
        border-top: 1px solid var(--line-soft);
        border-bottom: 1px solid var(--line-soft);
        overflow: hidden;
      }
      .films-label {
        text-align: center;
        margin-bottom: 36px;
      }
      /* ── dual-row marquee shared ── */
      .films-rows {
        display: flex;
        flex-direction: column;
        gap: 18px;
      }
      @media (max-width: 760px) {
        #films {
          padding: 48px 0;
        }
        .films-rows {
          gap: 14px;
        }
        .fcard {
          width: 185px;
        }
        .fcard-thumb {
          height: 140px;
        }
        .fcard-title {
          font-size: 13px;
        }
        .film-track.go-left {
          animation-duration: 38s;
        }
        .film-track.go-right {
          animation-duration: 32s;
        }
      }
      .film-row {
        display: flex;
        overflow: hidden;
        mask-image: linear-gradient(
          90deg,
          transparent,
          #000 6%,
          #000 94%,
          transparent
        );
        -webkit-mask-image: linear-gradient(
          90deg,
          transparent,
          #000 6%,
          #000 94%,
          transparent
        );
      }
      @keyframes mq-left {
        from {
          transform: translateX(0);
        }
        to {
          transform: translateX(-50%);
        }
      }
      @keyframes mq-right {
        from {
          transform: translateX(-50%);
        }
        to {
          transform: translateX(0);
        }
      }
      .film-track {
        display: flex;
        gap: 18px;
        flex-shrink: 0;
      }
      .film-track.go-left {
        animation: mq-left 55s linear infinite;
      }
      .film-track.go-right {
        animation: mq-right 50s linear infinite;
      }
      .film-track:hover {
        animation-play-state: paused;
      }
      /* ── film card ── */
      .fcard {
        flex: none;
        width: 220px;
        border-radius: 16px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(12, 24, 28, 0.85);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
        transition:
          transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
          box-shadow 0.3s;
        cursor: default;
        position: relative;
      }
      .fcard:hover {
        transform: translateY(-6px) scale(1.03);
        box-shadow:
          0 20px 56px rgba(0, 0, 0, 0.7),
          0 0 28px rgba(255, 106, 26, 0.15);
        border-color: rgba(255, 106, 26, 0.3);
      }
      .fcard-thumb {
        height: 160px;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: flex-end;
        padding: 10px 12px;
      }
      /* dark scrim so badge stays readable over any poster */
      .fcard-thumb::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          180deg,
          transparent 40%,
          rgba(4, 8, 9, 0.72) 100%
        );
        z-index: 1;
        pointer-events: none;
      }
      .fcard-badge {
        font-family: var(--font-sans);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        padding: 4px 10px;
        border-radius: 20px;
        color: #000;
        background: var(--orange);
        position: relative;
        z-index: 2;
        white-space: nowrap;
      }
      .fcard-badge.teal {
        background: var(--teal-glow);
      }
      .fcard-badge.gold {
        background: var(--amber);
      }
      .fcard-body {
        padding: 12px 14px 14px;
      }
      .fcard-title {
        font-family: var(--font-display);
        font-weight: 800;
        font-size: 15px;
        line-height: 1.15;
        letter-spacing: -0.02em;
        color: var(--bone);
        margin-bottom: 5px;
      }
      .fcard-meta {
        font-family: var(--font-sans);
        font-size: 11px;
        color: rgba(200, 188, 168, 0.55);
        font-weight: 500;
        letter-spacing: 0.04em;
      }
      .fcard-year {
        font-size: 10px;
        color: var(--orange);
        font-weight: 600;
        font-family: var(--font-sans);
        margin-top: 4px;
        letter-spacing: 0.06em;
      }
      /* thumb — real poster images */
      .ft-lifeofpi {
        background: url("https://assets.cdn.filesafe.space/gRRqLerdwVopVBdf43H0/media/6a587b979c9b37b5fdffcb26.jpg") center/cover
          no-repeat;
      }
      .ft-compass {
        background: url("https://assets.cdn.filesafe.space/gRRqLerdwVopVBdf43H0/media/6a587b92baf5f6da40834161.jpg") center/cover
          no-repeat;
      }
      .ft-museum {
        background: url("https://assets.cdn.filesafe.space/gRRqLerdwVopVBdf43H0/media/6a587b9a524a3ec4c60187ae.jpg") top
          center / cover no-repeat;
      }
      .ft-superman {
        background: url("https://assets.cdn.filesafe.space/gRRqLerdwVopVBdf43H0/media/6a587b9e9c9b37b5fdffcbcd.jpg") center/cover
          no-repeat;
      }
      .ft-mummy {
        background: url("https://assets.cdn.filesafe.space/gRRqLerdwVopVBdf43H0/media/6a587ba4524a3ec4c6018900.jpg") center/cover
          no-repeat;
      }
      .ft-fast {
        background: url("https://assets.cdn.filesafe.space/gRRqLerdwVopVBdf43H0/media/6a587b8e524a3ec4c60186b8.png") center/cover
          no-repeat;
      }
      .ft-evan {
        background: url("https://assets.cdn.filesafe.space/gRRqLerdwVopVBdf43H0/media/6a587b8d1a0f04805085cd98.png") center/cover
          no-repeat;
      }
      .ft-cirque {
        background: url("https://assets.cdn.filesafe.space/gRRqLerdwVopVBdf43H0/media/6a587b8b9c9b37b5fdffc9cc.jpg") center/cover
          no-repeat;
      }
      .ft-land {
        background: url("https://assets.cdn.filesafe.space/gRRqLerdwVopVBdf43H0/media/6a587b96524a3ec4c601875a.png") top
          center / cover no-repeat;
      }
      .ft-siege {
        background: url("https://assets.cdn.filesafe.space/gRRqLerdwVopVBdf43H0/media/6a587ba09c9b37b5fdffcc28.png") center/cover
          no-repeat;
      }
      .ft-ateam {
        background: url("https://assets.cdn.filesafe.space/gRRqLerdwVopVBdf43H0/media/6a587b8d524a3ec4c60186a6.png") center/cover
          no-repeat;
      }
      .ft-museum2 {
        background: url("https://assets.cdn.filesafe.space/gRRqLerdwVopVBdf43H0/media/6a587b981097b81195464e4e.png") center/cover
          no-repeat;
      }
      .ft-aliens {
        background: url("https://assets.cdn.filesafe.space/gRRqLerdwVopVBdf43H0/media/6a587b941097b81195464ddc.png") center/cover
          no-repeat;
      }
      .ft-hulk {
        background: url("https://assets.cdn.filesafe.space/gRRqLerdwVopVBdf43H0/media/6a587b931a0f04805085ce02.png") top center / cover
          no-repeat;
      }
      .ft-alvin {
        background: url("https://assets.cdn.filesafe.space/gRRqLerdwVopVBdf43H0/media/6a587b861097b81195464cd0.png") top
          center / cover no-repeat;
      }
      .ft-kingdom {
        background: url("https://assets.cdn.filesafe.space/gRRqLerdwVopVBdf43H0/media/6a587ba49c9b37b5fdffcc90.jpg") center/cover
          no-repeat;
      }
      .ft-garfield {
        background: url("https://assets.cdn.filesafe.space/gRRqLerdwVopVBdf43H0/media/6a587b93baf5f6da4083416f.png") center/cover
          no-repeat;
      }
      .ft-satya {
        background: url("movies%20poster/Satyashodhak.webp") center/cover
          no-repeat;
      }
      .ft-malin {
        background: url("movies%20poster/Ek%20Hota%20Malin%20.png") center/cover
          no-repeat;
      }
      .ft-shyam {
        background: linear-gradient(160deg, #001830, #003878, #001040);
      }
      .ft-pahile {
        background: url("movies%20poster/Pahile%20Na%20Mi%20Tula.png") top
          center / cover no-repeat;
      }
      .ft-rudan {
        background: url("movies%20poster/Rudan.png") top center / cover
          no-repeat;
      }
      .ft-onemiss {
        background: url("movies%20poster/One%20Miss%20Call.png") center/cover
          no-repeat;
      }
      .ft-sawali {
        background: url("movies%20poster/Sawali.png") top center / cover
          no-repeat;
      }
      .ft-pori {
        background: url("movies%20poster/Pori.png") top center / cover no-repeat;
      }
      .ft-rubberband {
        background: url("movies%20poster/Kahani%20Rubberband%20Ki.png") top
          center / cover no-repeat;
      }
      /* cinematic grain texture overlay on thumb */
      .fcard-thumb::after {
        content: "";
        position: absolute;
        inset: 0;
        background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E")
          center/200px;
        opacity: 0.35;
        pointer-events: none;
        z-index: 1;
        mix-blend-mode: overlay;
      }
      /* ── testi marquee (same dual-row pattern) ── */
      .testi-rows {
        display: flex;
        flex-direction: column;
        gap: 18px;
        margin-top: 36px;
      }
      .testi-row {
        display: flex;
        overflow: hidden;
        mask-image: linear-gradient(
          90deg,
          transparent,
          #000 5%,
          #000 95%,
          transparent
        );
        -webkit-mask-image: linear-gradient(
          90deg,
          transparent,
          #000 5%,
          #000 95%,
          transparent
        );
      }
      .testi-track {
        display: flex;
        gap: 18px;
        flex-shrink: 0;
        will-change: transform;
      }
      .testi-track.go-left {
        animation: mq-left 45s linear infinite;
      }
      .testi-track.go-right {
        animation: mq-right 40s linear infinite;
      }
      .testi-track:hover {
        animation-play-state: paused;
      }
      /* marquee card (review) */
      .mcard {
        flex: none;
        width: 300px;
        border-radius: 18px;
        background: linear-gradient(
          148deg,
          rgba(16, 32, 38, 0.9),
          rgba(8, 16, 20, 0.95)
        );
        border: 1px solid rgba(255, 106, 26, 0.14);
        box-shadow:
          0 4px 32px rgba(0, 0, 0, 0.6),
          inset 0 1px 0 rgba(255, 255, 255, 0.05);
        padding: 22px 20px 18px;
        transition:
          transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
          box-shadow 0.3s;
        cursor: default;
        position: relative;
        overflow: hidden;
      }
      .mcard:hover {
        transform: translateY(-5px);
        box-shadow:
          0 16px 48px rgba(0, 0, 0, 0.7),
          0 0 20px rgba(255, 106, 26, 0.12);
        border-color: rgba(255, 106, 26, 0.28);
      }
      .mcard::before {
        content: "\201C";
        position: absolute;
        top: -14px;
        left: 14px;
        font-size: 90px;
        font-family: Georgia, serif;
        color: rgba(255, 106, 26, 0.08);
        line-height: 1;
        pointer-events: none;
      }
      .mcard-stars {
        color: var(--amber);
        font-size: 11px;
        letter-spacing: 0.1em;
        margin-bottom: 10px;
      }
      .mcard p {
        font-family: var(--font-sans);
        font-size: 13.5px;
        line-height: 1.65;
        color: rgba(205, 192, 172, 0.82);
        font-weight: 400;
        margin-bottom: 14px;
        position: relative;
        z-index: 1;
      }
      .mcard p b {
        color: var(--bone);
        font-style: normal;
      }
      .mcard-who {
        display: flex;
        align-items: center;
        gap: 10px;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        padding-top: 12px;
        margin-top: auto;
      }
      .mcard-av {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        overflow: hidden;
        flex-shrink: 0;
        border: 1.5px solid rgba(255, 106, 26, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-sans);
        font-weight: 700;
        font-size: 13px;
        color: #fff;
      }
      .mcard-av img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .mcard-nm {
        font-family: var(--font-sans);
        font-weight: 700;
        font-size: 12px;
        color: var(--bone);
      }
      .mcard-rl {
        font-family: var(--font-sans);
        font-size: 10.5px;
        color: rgba(200, 188, 168, 0.45);
        font-weight: 400;
        margin-top: 1px;
      }
      /* film-name legacy (keep for old marquee JS refs) */
      .film-name {
        display: none;
      }
      .marquee,
      .marquee-track {
        display: none;
      }

      /* MID-PAGE CTA — rises as a card over the video's last frame */
      #mid-cta {
        position: relative;
        z-index: 10;
        padding: 100px 0 110px;
        background: var(--bg);
        text-align: center;
        overflow: hidden;
        border-radius: 36px 36px 0 0;
        box-shadow: 0 -40px 100px rgba(2, 4, 5, 0.98);
      }
      .mcta-glow {
        position: absolute;
        inset: 0;
        background: radial-gradient(
          60% 70% at 50% 50%,
          rgba(255, 106, 26, 0.13),
          transparent 70%
        );
        pointer-events: none;
      }
      /* Subtle film-grain texture overlay */
      #mid-cta::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: repeating-linear-gradient(
          0deg,
          transparent,
          transparent 2px,
          rgba(255, 255, 255, 0.012) 2px,
          rgba(255, 255, 255, 0.012) 4px
        );
        pointer-events: none;
      }
      .mcta-inner {
        position: relative;
        z-index: 2;
        max-width: 820px;
        margin: 0 auto;
      }
      .mcta-tag {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        font-family: var(--font-sans);
        font-size: 11px;
        letter-spacing: 0.25em;
        text-transform: uppercase;
        color: var(--orange);
        margin-bottom: 28px;
        border: 1px solid rgba(255, 106, 26, 0.25);
        padding: 7px 16px;
        border-radius: 30px;
        background: rgba(255, 106, 26, 0.06);
        font-weight: 600;
      }
      .mcta-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--orange);
        box-shadow: 0 0 10px var(--orange);
        animation: pulse 1.8s infinite;
      }
      .mcta-h {
        font-family: var(--font-display);
        font-size: clamp(42px, 6.5vw, 80px);
        line-height: 0.88;
        letter-spacing: -0.02em;
        margin-bottom: 28px;
        font-weight: 800;
      }
      .mcta-sub {
        font-family: var(--font-sans);
        font-size: 17px;
        line-height: 1.7;
        color: var(--bone-dim);
        max-width: 640px;
        margin: 0 auto 40px;
        font-weight: 300;
      }
      .mcta-sub b {
        color: var(--amber);
        font-weight: 600;
      }
      .mcta-row {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 28px;
        flex-wrap: wrap;
      }
      .mcta-proof {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
      }
      .mcta-stars {
        color: #e8a020;
        font-size: 13px;
        letter-spacing: 0.25em;
      }
      .mcta-proof span:last-child {
        font-family: var(--font-sans);
        font-size: 12px;
        color: var(--muted);
        letter-spacing: 0.02em;
        font-weight: 400;
      }
      /* Top & bottom border lines */
      #mid-cta::after {
        content: "";
        position: absolute;
        top: 0;
        left: 10%;
        right: 10%;
        height: 1px;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 106, 26, 0.25),
          transparent
        );
      }

      /* DIFF */
      #diff {
        background: linear-gradient(180deg, var(--bg), var(--bg-3));
      }
      .diff-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        max-width: 1120px;
        margin: 0 auto;
      }
      .diff-card {
        border: 1px solid rgba(255, 106, 26, 0.14);
        border-radius: 18px;
        background: rgba(12, 22, 26, 0.9);
        transition:
          transform 0.38s cubic-bezier(0.23, 1, 0.32, 1),
          border-color 0.38s,
          box-shadow 0.38s;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        box-shadow: 0 4px 32px rgba(0, 0, 0, 0.5);
      }
      .diff-card:hover {
        transform: translateY(-8px);
        border-color: rgba(255, 106, 26, 0.32);
        box-shadow:
          0 28px 60px rgba(0, 0, 0, 0.6),
          0 0 40px -16px rgba(255, 106, 26, 0.12);
      }
      /* image sits at the TOP of the card */
      .dc-img {
        width: 100%;
        height: 200px;
        object-fit: cover;
        object-position: center 30%;
        display: block;
        border-radius: 18px 18px 0 0;
        transition: transform 0.5s ease;
      }
      .diff-card:hover .dc-img {
        transform: scale(1.04);
      }
      /* content sits BELOW the image */
      .dc-body {
        padding: 28px 28px 30px;
        flex: 1;
        display: flex;
        flex-direction: column;
      }
      /* keep dc-bg hidden — replaced by dc-img */
      .dc-bg {
        display: none;
        background-size: cover;
        background-position: center;
        z-index: 0;
        transition:
          transform 0.7s ease,
          opacity 0.45s;
        opacity: 0.28;
      }
      .dc-bg::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          155deg,
          rgba(2, 4, 5, 0.72) 0%,
          rgba(2, 4, 5, 0.9) 100%
        );
      }
      .diff-card:hover .dc-bg {
        transform: scale(1.07);
        opacity: 0.42;
      }
      .diff-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, var(--orange), transparent 65%);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
        z-index: 2;
      }
      .diff-ico {
        font-size: 30px;
        margin-bottom: 14px;
      }
      .diff-card h3 {
        font-family: "Syne", sans-serif;
        font-weight: 700;
        font-size: 20px;
        margin-bottom: 12px;
        color: var(--bone);
      }
      .diff-card p {
        font-size: 15.5px;
        line-height: 1.74;
        color: rgba(205, 192, 172, 0.82);
        font-family: var(--font-sans);
        font-weight: 300;
      }
      .diff-card .film {
        color: var(--amber);
        font-weight: 500;
      }
      .diff-badge {
        display: inline-block;
        font-family: var(--font-sans);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--orange);
        border: 1px solid rgba(255, 106, 26, 0.3);
        background: rgba(255, 106, 26, 0.08);
        border-radius: 30px;
        padding: 5px 13px;
        margin-bottom: 14px;
      }
      @media (max-width: 860px) {
        .diff-grid {
          grid-template-columns: 1fr;
          max-width: 520px;
        }
      }

      /* TESTIMONIALS */
      #testi {
        background: linear-gradient(180deg, var(--bg) 0%, var(--bg-3) 100%);
      }
      .testi-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        max-width: 1140px;
        margin: 0 auto;
        justify-items: stretch;
      }
      /* last row: if only 2 cards remain, centre them */
      .testi-grid .testi-card:nth-child(3n + 1):last-child {
        grid-column: 2;
      }
      .testi-card {
        position: relative;
        padding: 40px 34px 36px;
        border: 1px solid rgba(255, 106, 26, 0.14);
        border-radius: 18px;
        background: linear-gradient(
          148deg,
          rgba(16, 32, 38, 0.9),
          rgba(8, 16, 20, 0.95)
        );
        transition: all 0.42s cubic-bezier(0.23, 1, 0.32, 1);
        overflow: hidden;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow:
          0 4px 32px rgba(0, 0, 0, 0.6),
          inset 0 1px 0 rgba(255, 255, 255, 0.05);
      }
      .testi-card::before {
        content: "\201C";
        position: absolute;
        top: -8px;
        left: 26px;
        font-size: 150px;
        font-family: Georgia, "Times New Roman", serif;
        color: var(--orange);
        opacity: 0.055;
        line-height: 1;
        pointer-events: none;
        z-index: 0;
      }
      .testi-card::after {
        content: "";
        position: absolute;
        top: 0;
        left: 15%;
        right: 15%;
        height: 1px;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 106, 26, 0.42),
          transparent
        );
        transition: 0.42s;
        opacity: 0.6;
      }
      .testi-card:hover {
        border-color: rgba(255, 106, 26, 0.24);
        transform: translateY(-10px);
        box-shadow:
          0 36px 72px -24px rgba(0, 0, 0, 0.85),
          0 0 50px -18px rgba(255, 106, 26, 0.12);
      }
      .testi-card:hover::after {
        opacity: 1;
        left: 5%;
        right: 5%;
      }
      .testi-stars {
        color: #e8a020;
        font-size: 12px;
        letter-spacing: 0.38em;
        margin-bottom: 22px;
        position: relative;
        z-index: 1;
      }
      .testi-card p {
        font-family: var(--font-sans);
        font-weight: 300;
        font-size: 16.5px;
        color: rgba(225, 210, 190, 0.82);
        line-height: 1.8;
        margin-bottom: 28px;
        position: relative;
        z-index: 1;
        font-style: italic;
      }
      .testi-who {
        display: flex;
        align-items: center;
        gap: 14px;
        position: relative;
        z-index: 1;
        padding-top: 22px;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
      }
      .testi-who .av {
        width: 54px;
        height: 54px;
        border-radius: 50%;
        overflow: hidden;
        flex: none;
        border: 2px solid rgba(255, 106, 26, 0.38);
        box-shadow:
          0 0 0 3px rgba(255, 106, 26, 0.08),
          0 0 20px rgba(255, 106, 26, 0.18);
        background: #020405;
      }
      .testi-who .av img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .testi-who .nm {
        font-family: "Syne", sans-serif;
        font-weight: 700;
        font-size: 15.5px;
        color: var(--bone);
      }
      .testi-who .rl {
        font-family: var(--font-sans);
        font-size: 11px;
        color: rgba(180, 160, 130, 0.55);
        margin-top: 3px;
        letter-spacing: 0.04em;
        font-weight: 400;
      }
      @media (max-width: 860px) {
        .testi-grid {
          grid-template-columns: 1fr;
          max-width: 480px;
        }
      }

      /* URGENCY */
      #urgency {
        background: var(--bg);
        text-align: center;
        position: relative;
        overflow: hidden;
      }

      /* cinematic gradient background for urgency (no video — faster load) */
      .urg-vid-bg {
        position: absolute;
        inset: 0;
        z-index: 0;
        background:
          radial-gradient(
            ellipse 120% 80% at 60% 40%,
            rgba(255, 106, 26, 0.1) 0%,
            transparent 65%
          ),
          radial-gradient(
            ellipse 80% 60% at 20% 70%,
            rgba(29, 224, 196, 0.06) 0%,
            transparent 55%
          ),
          linear-gradient(160deg, #030d0e 0%, #020608 50%, #030a04 100%);
      }
      /* just a thin edge vignette — no black kill on the video */
      .urg-vid-tint {
        position: absolute;
        inset: 0;
        background: linear-gradient(
          180deg,
          rgba(2, 4, 5, 0.55) 0%,
          rgba(2, 4, 5, 0.08) 20%,
          rgba(2, 4, 5, 0.08) 78%,
          rgba(2, 4, 5, 0.55) 100%
        );
      }

      /* decorative lines flanking the kick tag */
      .urg-deco-row {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        margin-bottom: 22px;
      }
      .urg-deco-line {
        flex: 1;
        max-width: 100px;
        height: 1px;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 106, 26, 0.45)
        );
      }
      .urg-deco-line.r {
        background: linear-gradient(
          90deg,
          rgba(255, 106, 26, 0.45),
          transparent
        );
      }

      /* ——— URGENCY: full-screen two-column ——— */
      #urgency {
        min-height: 100vh;
        display: flex;
        align-items: center;
        padding: 100px 0 !important;
      }
      #urgency .wrap {
        width: 100%;
      }

      /* two-column grid — left: content, right: proof card */
      .urg-2col {
        display: grid;
        grid-template-columns: 1.1fr 0.9fr;
        gap: 52px;
        align-items: center;
      }

      /* LEFT side */
      .urg-left {
        text-align: left;
      }

      /* orange pill badge */
      .urg-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(255, 106, 26, 0.12);
        border: 1px solid rgba(255, 106, 26, 0.38);
        border-radius: 30px;
        padding: 8px 20px;
        font-family: var(--font-sans);
        font-size: 11px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--orange);
        margin-bottom: 20px;
        font-weight: 600;
      }

      /* headline */
      .urg-left .big.display {
        font-size: clamp(44px, 6.5vw, 80px);
        color: var(--bone);
        text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6);
        line-height: 0.82;
      }

      /* feature bullets */
      .urg-features {
        margin: 22px 0 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding-top: 20px;
      }
      .urg-feat {
        font-family: var(--font-sans);
        font-size: 15px;
        color: rgba(200, 188, 168, 0.8);
        letter-spacing: 0.01em;
        display: flex;
        align-items: flex-start;
        gap: 11px;
        font-weight: 300;
      }
      .urg-feat::before {
        content: "✓";
        color: var(--orange);
        font-weight: 700;
        flex-shrink: 0;
        margin-top: 1px;
      }

      /* countdown label */
      .urg-cd-label {
        font-family: var(--font-sans);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--orange);
        margin: 26px 0 14px;
      }

      /* countdown inside left col */
      .urg-left .countdown {
        margin: 0;
        justify-content: flex-start;
        gap: 10px;
      }
      .urg-left .cd-box {
        padding: 16px 20px 12px;
        min-width: 88px;
        border-radius: 14px;
      }
      .urg-left .cd-box .n {
        font-size: 60px;
        font-family: var(--font-display);
        font-weight: 800;
      }

      .urg-note {
        font-size: 13px;
        margin-top: 14px;
        color: rgba(200, 188, 168, 0.6);
        font-family: var(--font-sans);
        font-weight: 400;
      }
      .urg-note b {
        color: var(--bone);
      }

      /* RIGHT: glass proof + CTA card */
      .urg-right-card {
        background: rgba(6, 12, 14, 0.45);
        backdrop-filter: blur(28px) saturate(140%);
        -webkit-backdrop-filter: blur(28px) saturate(140%);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 22px;
        padding: 38px 36px 40px;
        position: relative;
        overflow: hidden;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.06),
          0 24px 70px rgba(0, 0, 0, 0.45);
      }
      .urg-right-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 10%;
        right: 10%;
        height: 1px;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, 0.15),
          transparent
        );
      }

      /* instructor line in right card */
      .urg-host {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 22px;
        padding-bottom: 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      }
      .urg-host-avatar {
        width: 54px;
        height: 54px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--orange), #c44c0c);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-display);
        font-weight: 800;
        font-size: 22px;
        color: #fff;
        flex-shrink: 0;
        border: 2px solid rgba(255, 106, 26, 0.3);
        box-shadow: 0 0 20px rgba(255, 106, 26, 0.2);
      }
      .urg-host-info .name {
        font-family: var(--font-display);
        font-weight: 800;
        font-size: 20px;
        color: var(--bone);
        letter-spacing: -0.01em;
        line-height: 1;
      }
      .urg-host-info .role {
        font-family: var(--font-sans);
        font-size: 11px;
        color: var(--muted);
        letter-spacing: 0.06em;
        margin-top: 4px;
        text-transform: uppercase;
        font-weight: 500;
      }

      /* mini testimonials in right card */
      .urg-testi-list {
        display: flex;
        flex-direction: column;
        gap: 14px;
        margin-bottom: 24px;
      }
      .urg-testi {
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 12px;
        padding: 14px 16px;
      }
      .urg-testi .stars {
        color: var(--amber);
        font-size: 11px;
        letter-spacing: 0.1em;
        margin-bottom: 6px;
      }
      .urg-testi .quote {
        font-family: var(--font-sans);
        font-size: 13.5px;
        color: var(--bone-dim);
        font-weight: 300;
        line-height: 1.5;
        font-style: italic;
      }
      .urg-testi .by {
        font-family: var(--font-sans);
        font-size: 11px;
        color: var(--muted);
        letter-spacing: 0.04em;
        margin-top: 7px;
        text-transform: uppercase;
        font-weight: 400;
      }

      /* CTA in right card */
      .urg-right-card .cta {
        width: 100%;
        justify-content: center;
        border-radius: 50px;
        font-size: 16px;
      }
      .urg-right-card .hf-seats {
        font-family: var(--font-sans);
        font-size: 12px;
        color: var(--amber);
        text-align: center;
        margin-top: 10px;
        letter-spacing: 0.02em;
        font-weight: 500;
      }
      .urg-right-card .privacy {
        font-family: var(--font-sans);
        font-size: 11px;
        color: var(--muted);
        text-align: center;
        margin-top: 8px;
        letter-spacing: 0.02em;
        font-weight: 400;
      }

      @media (max-width: 880px) {
        .urg-2col {
          grid-template-columns: 1fr;
          gap: 36px;
        }
        .urg-left {
          text-align: center;
        }
        .urg-features {
          text-align: left;
          max-width: 500px;
          margin-left: auto;
          margin-right: auto;
        }
        .urg-left .countdown {
          justify-content: center;
        }
      }
      @media (max-width: 480px) {
        .urg-left .cd-box {
          min-width: 68px;
          padding: 12px 10px 9px;
        }
        .urg-left .cd-box .n {
          font-size: 42px;
        }
      }

      /* serif italic treatment for "Miss Mat Karna." */
      .urg-karna {
        display: block;
        font-family: Georgia, "Times New Roman", serif;
        font-style: italic;
        font-weight: normal;
        color: var(--orange);
        text-transform: none;
        font-size: 0.96em;
        letter-spacing: -0.01em;
        text-shadow: none;
      }

      .urg-inner {
        position: relative;
        z-index: 2;
        max-width: 800px;
        margin: 0 auto;
      }
      .urg-inner .big {
        font-family: var(--font-display);
        font-weight: 800;
        text-transform: uppercase;
        font-size: clamp(48px, 7.8vw, 80px);
        line-height: 0.86;
        margin-bottom: 20px;
        letter-spacing: -0.02em;
      }
      .countdown {
        display: flex;
        justify-content: center;
        gap: 18px;
        margin: 40px 0;
      }
      .cd-box {
        background: rgba(8, 16, 18, 0.45);
        backdrop-filter: blur(24px) saturate(130%);
        -webkit-backdrop-filter: blur(24px) saturate(130%);
        border: 1px solid rgba(255, 106, 26, 0.28);
        border-radius: 20px;
        padding: 28px 36px 22px;
        min-width: 136px;
        position: relative;
        overflow: hidden;
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.06),
          0 20px 50px -20px rgba(0, 0, 0, 0.6);
      }
      .cd-box::before {
        content: "";
        position: absolute;
        top: 0;
        left: 15%;
        right: 15%;
        height: 1px;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 106, 26, 0.75),
          transparent
        );
      }
      .cd-box:hover {
        border-color: rgba(255, 106, 26, 0.55);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.08),
          0 0 40px rgba(255, 106, 26, 0.18);
        transform: translateY(-3px);
      }
      .cd-box .n {
        font-family: var(--font-display);
        font-weight: 800;
        font-size: 88px;
        color: var(--orange);
        line-height: 1;
        text-shadow:
          0 0 30px rgba(255, 106, 26, 0.5),
          0 0 80px rgba(255, 106, 26, 0.2);
      }
      .cd-box .l {
        font-family: var(--font-sans);
        font-size: 10px;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.38);
        margin-top: 8px;
        font-weight: 500;
      }
      @keyframes cd-pulse {
        0%,
        100% {
          text-shadow:
            0 0 30px rgba(255, 106, 26, 0.4),
            0 0 80px rgba(255, 106, 26, 0.15);
        }
        50% {
          text-shadow:
            0 0 44px rgba(255, 106, 26, 0.7),
            0 0 100px rgba(255, 106, 26, 0.25);
        }
      }
      #cd .cd-box .n {
        animation: cd-pulse 2s ease-in-out infinite;
      }
      .urg-note {
        font-size: 16px;
        color: var(--bone-dim);
        margin-bottom: 8px;
        font-family: var(--font-sans);
        font-weight: 300;
      }
      .urg-note b {
        color: var(--bone);
        font-weight: 600;
      }
      .privacy {
        font-family: var(--font-sans);
        font-size: 13px;
        color: var(--muted);
        margin-top: 22px;
        font-weight: 300;
      }

      /* FAQ */
      #faq {
        background: var(--bg-3);
      }
      .faq-list {
        max-width: 820px;
        margin: 0 auto;
      }
      .faq {
        border-bottom: 1px solid var(--line-soft);
      }
      .faq-q {
        width: 100%;
        text-align: left;
        background: none;
        border: none;
        cursor: pointer;
        padding: 24px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
        color: var(--bone);
        font-family: "Syne", sans-serif;
        font-weight: 700;
        font-size: 18px;
        transition: color 0.25s;
      }
      .faq-q:hover {
        color: var(--orange);
      }
      .faq-q .plus {
        flex: none;
        width: 24px;
        height: 24px;
        position: relative;
      }
      .faq-q .plus::before,
      .faq-q .plus::after {
        content: "";
        position: absolute;
        background: var(--orange);
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
      .faq-q .plus::before {
        width: 14px;
        height: 2px;
      }
      .faq-q .plus::after {
        width: 2px;
        height: 14px;
        transition: transform 0.3s;
      }
      .faq.open .plus::after {
        transform: translate(-50%, -50%) scaleY(0);
      }
      .faq-a {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease;
      }
      .faq-a-inner {
        padding: 0 0 24px;
        color: var(--bone-dim);
        font-size: 16px;
        line-height: 1.75;
        max-width: 730px;
        font-family: var(--font-sans);
        font-weight: 300;
      }
      .faq-a-inner b {
        color: var(--bone);
        font-weight: 600;
      }
      .faq-a-inner .film {
        color: var(--amber);
        font-weight: 500;
      }

      /* FINAL */
      #final {
        position: relative;
        min-height: 96vh;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        overflow: hidden;
      }
      #final .fbg {
        position: absolute;
        inset: 0;
        z-index: 0;
        overflow: hidden;
      }
      #final .fbg video,
      #final .fbg .ph {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: brightness(0.34) saturate(1.2);
      }
      #final .fscrim {
        position: absolute;
        inset: 0;
        z-index: 1;
        background:
          radial-gradient(
            55% 70% at 50% 36%,
            rgba(255, 106, 26, 0.22),
            transparent 62%
          ),
          linear-gradient(180deg, rgba(4, 8, 9, 0.72), rgba(4, 8, 9, 0.9));
      }
      .frings {
        position: absolute;
        inset: 0;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
      }
      .frings span {
        position: absolute;
        border: 1px solid rgba(255, 106, 26, 0.18);
        border-radius: 50%;
      }
      .frings span:nth-child(1) {
        width: 360px;
        height: 360px;
      }
      .frings span:nth-child(2) {
        width: 560px;
        height: 560px;
        border-color: rgba(29, 224, 196, 0.12);
      }
      .frings span:nth-child(3) {
        width: 780px;
        height: 780px;
        border-color: rgba(255, 106, 26, 0.07);
      }
      .final-inner {
        position: relative;
        z-index: 4;
        max-width: 900px;
        margin: 0 auto;
        padding: 0 30px;
      }
      .final-h {
        font-family: "Bebas Neue", sans-serif;
        font-weight: 400;
        text-transform: uppercase;
        font-size: clamp(56px, 9vw, 80px);
        line-height: 0.78;
        margin-bottom: 22px;
        background: linear-gradient(
          180deg,
          #fff 24%,
          var(--amber) 64%,
          var(--orange)
        );
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: 0 0 70px rgba(255, 106, 26, 0.3);
      }
      .final-sub {
        font-family: "Oswald";
        font-weight: 300;
        font-size: 18px;
        color: #eef0ec;
        margin-bottom: 36px;
      }
      .final-strip {
        display: flex;
        justify-content: center;
        gap: 26px;
        flex-wrap: wrap;
        margin-top: 30px;
        font-family: "Oswald";
        font-size: 13.5px;
        color: var(--bone-dim);
        font-weight: 300;
      }
      .final-strip b {
        color: var(--orange);
      }

      footer {
        background: var(--ink);
        padding: 48px 0;
        border-top: 1px solid var(--line-soft);
        text-align: center;
      }
      footer .logo b {
        font-family: "Syne";
        font-size: 22px;
        font-weight: 700;
        letter-spacing: -0.04em;
      }
      footer .logo span {
        margin-bottom: 14px;
      }
      footer p {
        font-family: "Oswald";
        font-size: 13px;
        color: var(--muted);
        font-weight: 300;
      }
      footer a {
        color: var(--orange);
      }
      footer .legal {
        margin-top: 10px;
        font-size: 12px;
        color: #3f4d4a;
      }

      @media (prefers-reduced-motion: reduce) {
        * {
          animation: none !important;
        }
      }
      @media (max-width: 860px) {
        #mid-cta {
          padding: 72px 0 80px;
          border-radius: 24px 24px 0 0;
        }
        .mcta-row {
          flex-direction: column;
          gap: 20px;
        }
        .mcta-proof {
          align-items: center;
        }
      }
      @media (max-width: 560px) {
        .sec {
          padding: 84px 0;
        }
        .wrap {
          padding: 0 20px;
        }
        .countdown {
          gap: 8px;
        }
        .cd-box {
          min-width: 80px;
          padding: 18px 14px;
          border-radius: 14px;
        }
        .cd-box .n {
          font-size: 54px;
        }
      }

      /* STATS BAND */
      #stats {
        background: linear-gradient(180deg, var(--bg-3), var(--bg));
        border-top: 1px solid var(--line-soft);
        border-bottom: 1px solid var(--line-soft);
      }
      .stats-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
        max-width: 1100px;
        margin: 0 auto;
      }
      .stat {
        text-align: center;
        padding: 18px 20px;
        position: relative;
      }
      .stat + .stat::before {
        content: "";
        position: absolute;
        left: 0;
        top: 22%;
        bottom: 22%;
        width: 1px;
        background: var(--line-soft);
      }
      .stat .n {
        font-family: "Bebas Neue", sans-serif;
        font-size: clamp(48px, 6vw, 76px);
        line-height: 0.9;
        background: linear-gradient(
          180deg,
          #fff,
          var(--amber) 70%,
          var(--orange)
        );
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .stat .l {
        font-family: "Oswald";
        font-weight: 300;
        font-size: 13px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--bone-dim);
        margin-top: 6px;
      }
      @media (max-width: 680px) {
        .stats-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 24px 0;
        }
        .stat + .stat::before {
          display: none;
        }
      }

      /* PLAYING-CARD hover tilt on showcase tiles */
      .show-tile {
        transition:
          transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1),
          box-shadow 0.45s,
          border-color 0.3s;
        transform-style: preserve-3d;
      }
      .show-tile:hover {
        transform: translateY(-8px) rotateZ(-1deg) scale(1.015);
        box-shadow:
          0 40px 80px -34px rgba(0, 0, 0, 0.7),
          0 0 0 1px var(--line),
          0 0 50px -16px rgba(255, 106, 26, 0.35);
        border-color: var(--line);
        z-index: 5;
      }

      /* ===== FRAME DECK (scattered floating cards, like a hand of cards) ===== */
      #deck {
        background: linear-gradient(180deg, var(--bg), var(--bg-3));
        overflow: hidden;
      }
      .deck-stage {
        position: relative;
        max-width: 1000px;
        margin: 40px auto 0;
        height: 440px;
      }
      .deck-card {
        position: absolute;
        width: 188px;
        border-radius: 5px;
        overflow: hidden;
        border: 2px solid #1c2224;
        background: #060809;
        box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.85);
        transition:
          transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1),
          box-shadow 0.5s,
          border-color 0.3s;
        will-change: transform;
      }
      /* ── Film frame image area ── */
      .deck-card .dimg {
        aspect-ratio: 3/4;
        position: relative;
        overflow: hidden;
        background: #000;
      }
      .deck-card .dimg img {
        position: absolute;
        top: 22px;
        bottom: 22px;
        left: 0;
        right: 0;
        width: 100%;
        height: calc(100% - 44px);
        object-fit: cover;
        object-position: center top; /* default: show top of frame (faces/titles) */
      }
      /* ── Film strip bars (top + bottom) ── */
      .fstrip {
        position: absolute;
        left: 0;
        right: 0;
        height: 22px;
        background: #060809;
        z-index: 4;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 5px;
        gap: 3px;
      }
      .fstrip-t {
        top: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      }
      .fstrip-b {
        bottom: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
      }
      /* Sprocket perforations */
      .fstrip .perf {
        flex-shrink: 0;
        width: 9px;
        height: 7px;
        border-radius: 1.5px;
        background: #000;
        border: 1px solid rgba(255, 255, 255, 0.12);
      }
      /* Frame number (orange accent) */
      .fstrip .fnr {
        font-family: "Courier New", Courier, monospace;
        font-size: 6.5px;
        letter-spacing: 0.18em;
        color: var(--orange);
        opacity: 0.55;
        flex: 1;
        text-align: center;
        text-transform: uppercase;
      }
      /* Timecode / label at bottom */
      .fstrip .ftc {
        font-family: "Courier New", Courier, monospace;
        font-size: 6px;
        letter-spacing: 0.14em;
        color: rgba(255, 255, 255, 0.22);
        flex: 1;
        text-align: center;
        text-transform: uppercase;
      }
      /* Vignette over the image */
      .fdim {
        position: absolute;
        inset: 22px 0;
        background: linear-gradient(
          to bottom,
          rgba(0, 0, 0, 0.18) 0%,
          transparent 30%,
          transparent 65%,
          rgba(0, 0, 0, 0.55) 100%
        );
        z-index: 3;
        pointer-events: none;
      }
      /* ── Slate caption below image ── */
      .deck-card .dcap {
        padding: 9px 11px 10px;
        background: #060809;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        font-family: "Courier New", Courier, monospace;
        font-size: 9px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.3);
        display: flex;
        align-items: baseline;
        gap: 7px;
      }
      .deck-card .dcap::before {
        content: "●";
        color: var(--orange);
        opacity: 0.7;
        font-size: 7px;
        flex-shrink: 0;
      }
      .deck-card .dcap b {
        display: inline;
        font-family: "Syne";
        font-weight: 700;
        font-size: 11px;
        color: var(--bone);
        letter-spacing: 0;
        text-transform: none;
        margin-right: 3px;
      }
      .deck-card:hover {
        transform: translate(var(--tx, 0), var(--ty, 0)) rotate(0deg)
          scale(1.06) !important;
        border-color: var(--line);
        box-shadow:
          0 44px 90px -30px rgba(0, 0, 0, 0.8),
          0 0 50px -14px rgba(255, 106, 26, 0.4);
        z-index: 20;
      }
      .deck-center {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 5;
        text-align: center;
        max-width: 360px;
        pointer-events: none;
      }
      .deck-center .big {
        font-family: "Bebas Neue";
        font-size: clamp(34px, 5vw, 58px);
        line-height: 0.9;
        text-transform: uppercase;
      }
      .deck-center p {
        font-family: "Oswald";
        font-weight: 400;
        font-size: 15px;
        color: var(--bone-dim);
        margin-top: 12px;
        line-height: 1.6;
      }
      @media (max-width: 820px) {
        .deck-stage {
          height: auto;
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 14px;
          max-width: 420px;
        }
        .deck-card {
          position: static !important;
          width: 100%;
          /* NOTE: no transform:none here — would block float animations on mobile */
        }
        .deck-center {
          position: static;
          transform: none;
          margin: 0 auto 24px;
          max-width: none;
        }
      }

      /* ===== AI ECONOMY SECTION ===== */
      #economy {
        background: linear-gradient(
          180deg,
          var(--bg) 0%,
          #060c0f 50%,
          var(--bg) 100%
        );
      }
      .eco-intro {
        max-width: 640px;
        margin: 0 auto 56px;
        text-align: center;
        font-size: 17px;
        line-height: 1.75;
        color: rgba(245, 239, 226, 0.7);
      }
      .ytc-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
        margin-bottom: 56px;
      }
      .ytc-card {
        background: rgba(255, 255, 255, 0.035);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 18px;
        padding: 26px 22px 20px;
        position: relative;
        transition:
          transform 0.28s ease,
          border-color 0.28s ease,
          box-shadow 0.28s ease;
      }
      .ytc-card:hover {
        transform: translateY(-5px);
        border-color: rgba(255, 106, 26, 0.28);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
      }
      .ytc-card.featured {
        border-color: rgba(255, 179, 71, 0.35);
        background: rgba(255, 106, 26, 0.05);
      }
      .ytc-top-badge {
        position: absolute;
        top: -13px;
        left: 50%;
        transform: translateX(-50%);
        background: linear-gradient(90deg, var(--orange), #e05500);
        color: #fff;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 0.07em;
        padding: 4px 14px;
        border-radius: 20px;
        white-space: nowrap;
      }
      .ytc-head {
        display: flex;
        align-items: center;
        gap: 13px;
        margin-bottom: 14px;
      }
      .ytc-avatar {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 900;
        font-size: 15px;
        color: #fff;
        flex: none;
        position: relative;
        border: 2px solid rgba(255, 255, 255, 0.14);
        box-shadow:
          0 4px 14px rgba(0, 0, 0, 0.45),
          inset 0 1px 0 rgba(255, 255, 255, 0.2);
      }
      .ytc-avatar-badge {
        position: absolute;
        right: -3px;
        bottom: -3px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #ff0000;
        border: 2px solid var(--bg-3);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 8px;
        color: #fff;
      }
      .ytc-fact {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        font-size: 12px;
        line-height: 1.5;
        color: rgba(245, 239, 226, 0.7);
        background: rgba(255, 106, 26, 0.05);
        border: 1px solid rgba(255, 106, 26, 0.14);
        border-radius: 8px;
        padding: 8px 10px;
        margin-bottom: 14px;
      }
      .ytc-fact b {
        color: var(--amber);
        font-weight: 600;
      }
      .ytc-name {
        font-weight: 700;
        font-size: 16px;
        color: var(--bone);
        line-height: 1.2;
      }
      .ytc-handle {
        font-size: 11.5px;
        color: rgba(245, 239, 226, 0.45);
        margin-top: 3px;
      }
      .ytc-yt {
        margin-left: auto;
        color: #ff2222;
        font-size: 22px;
        flex: none;
      }
      .ytc-desc {
        font-size: 13px;
        color: rgba(245, 239, 226, 0.6);
        line-height: 1.65;
        margin-bottom: 18px;
        min-height: 52px;
      }
      .ytc-nums {
        display: flex;
        gap: 10px;
        margin-bottom: 14px;
      }
      .ytc-num {
        flex: 1;
        background: rgba(0, 0, 0, 0.28);
        border-radius: 10px;
        padding: 10px 6px;
        text-align: center;
      }
      .ytc-num-n {
        font-family: var(--font-display);
        font-size: 17px;
        font-weight: 800;
        color: var(--amber);
        display: block;
        line-height: 1;
        margin-bottom: 4px;
      }
      .ytc-num-l {
        font-size: 9.5px;
        letter-spacing: 0.07em;
        color: rgba(245, 239, 226, 0.45);
        text-transform: uppercase;
        display: block;
      }
      .ytc-footer {
        font-size: 11px;
        color: rgba(245, 239, 226, 0.3);
        text-align: center;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        padding-top: 12px;
      }
      /* market stats strip */
      .eco-stats-strip {
        display: flex;
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 16px;
        overflow: hidden;
        margin-bottom: 48px;
      }
      .eco-stat {
        flex: 1;
        text-align: center;
        padding: 30px 16px;
        border-right: 1px solid rgba(255, 255, 255, 0.07);
      }
      .eco-stat:last-child {
        border-right: none;
      }
      .eco-stat-n {
        font-family: var(--font-display);
        font-size: 38px;
        font-weight: 900;
        color: var(--orange);
        line-height: 1;
        margin-bottom: 8px;
      }
      .eco-stat-l {
        font-size: 12.5px;
        color: rgba(245, 239, 226, 0.5);
        line-height: 1.4;
      }
      .eco-punchline {
        max-width: 700px;
        margin: 0 auto 40px;
        text-align: center;
        font-size: 17.5px;
        line-height: 1.8;
        color: rgba(245, 239, 226, 0.72);
      }
      .eco-punchline strong {
        color: var(--bone);
      }
      .eco-punchline em {
        color: var(--teal-glow);
        font-style: normal;
        font-weight: 600;
      }
      .eco-disclaimer {
        text-align: center;
        font-size: 11px;
        color: rgba(245, 239, 226, 0.25);
        margin-top: 20px;
      }
      @media (max-width: 760px) {
        .ytc-grid {
          grid-template-columns: 1fr;
          gap: 28px;
        }
        .eco-stats-strip {
          flex-direction: column;
        }
        .eco-stat {
          border-right: none;
          border-bottom: 1px solid rgba(255, 255, 255, 0.07);
          padding: 22px 16px;
        }
        .eco-stat:last-child {
          border-bottom: none;
        }
        .eco-stat-n {
          font-size: 30px;
        }
      }

      /* ===== AI TOOLS card row ===== */
      /* ---- Tools 3D scroll carousel ---- */
      #tools {
        position: relative;
        overflow: hidden;
        background:
          linear-gradient(
            180deg,
            rgba(3, 7, 8, 0.87) 0%,
            rgba(3, 7, 8, 0.78) 50%,
            rgba(3, 7, 8, 0.92) 100%
          ),
          url("https://assets.cdn.filesafe.space/gRRqLerdwVopVBdf43H0/media/6a587ba9524a3ec4c6018971.jpg") center 40% / cover no-repeat;
        background-attachment: fixed;
      }
      @media (max-width: 760px) {
        #tools {
          background-attachment: scroll;
        }
      }
      #tools .wrap {
        padding-bottom: 0;
      }
      .tools-3d-wrap {
        position: relative;
        width: 100%;
        margin-top: 48px;
      }
      .tools-3d-track {
        display: flex;
        gap: 20px;
        overflow-x: scroll;

        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 48px calc(50vw - 140px) 56px;
        cursor: grab;
        user-select: none;
        -webkit-overflow-scrolling: touch;
      }
      .tools-3d-track::-webkit-scrollbar {
        display: none;
      }
      .tools-3d-track.is-dragging {
        cursor: grabbing;
      }
      /* cards */
      .tool-card {
        flex: none;
        width: 280px;
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 20px;
        background: linear-gradient(
          160deg,
          rgba(14, 28, 34, 0.92),
          rgba(6, 12, 14, 0.97)
        );
        overflow: hidden;
        text-align: left;
        position: relative;
      }
      .tool-card.tc-active {
        border-color: rgba(255, 106, 26, 0.38);
      }
      /* progress strip */
      .tools-3d-foot {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 14px;
        padding: 0 0 32px;
      }
      .tools-3d-prog {
        width: 200px;
        height: 2px;
        background: rgba(255, 255, 255, 0.07);
        border-radius: 99px;
        overflow: hidden;
      }
      .tools-3d-fill {
        height: 100%;
        width: 0%;
        background: linear-gradient(90deg, var(--orange), #ff9a4d);
        border-radius: 99px;
        transition: width 0.1s linear;
      }
      .tools-3d-ct {
        font-family: var(--font-sans);
        font-size: 11px;
        color: rgba(255, 255, 255, 0.2);
        font-weight: 600;
        letter-spacing: 0.08em;
        min-width: 40px;
      }
      /* colored logo band */
      .tc-logo {
        height: 110px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-display);
        font-weight: 900;
        font-size: 38px;
        letter-spacing: -0.03em;
        color: rgba(255, 255, 255, 0.92);
        position: relative;
        overflow: hidden;
        border-radius: 20px 20px 0 0;
        text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6);
      }
      .tc-logo::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          180deg,
          transparent 35%,
          rgba(6, 12, 14, 0.65) 100%
        );
      }
      .tc-logo span {
        position: relative;
        z-index: 1;
      }
      /* real brand logo image inside tc-logo band */
      .tc-logo-img {
        width: 68px;
        height: 68px;
        object-fit: contain;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.1);
        padding: 10px;
        position: relative;
        z-index: 1;
        box-shadow:
          0 4px 24px rgba(0, 0, 0, 0.45),
          inset 0 1px 0 rgba(255, 255, 255, 0.14);
        border: 1px solid rgba(255, 255, 255, 0.12);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
      }
      /* brand gradients */
      .tc-runway {
        background: linear-gradient(135deg, #0d0d0d, #1a1a2e, #16213e);
      }
      .tc-sora {
        background: linear-gradient(135deg, #000000, #1a0530, #0d0020);
      }
      .tc-kling {
        background: linear-gradient(135deg, #001a2e, #003a5c, #00588a);
      }
      .tc-pika {
        background: linear-gradient(135deg, #1a0800, #5a1800, #c43400);
      }
      .tc-luma {
        background: linear-gradient(135deg, #001a10, #003d22, #00603a);
      }
      .tc-mj {
        background: linear-gradient(135deg, #0a0030, #220060, #3a00a0);
      }
      .tc-comfy {
        background: linear-gradient(135deg, #1a1000, #4a3000, #9a6000);
      }
      .tc-magnific {
        background: linear-gradient(135deg, #001a08, #004018, #007830);
      }
      .tc-topaz {
        background: linear-gradient(135deg, #0a001a, #200050, #3c0090);
      }
      .tc-eleven {
        background: linear-gradient(135deg, #001818, #003a3a, #006060);
      }
      .tc-suno {
        background: linear-gradient(135deg, #1a0015, #500040, #a00080);
      }
      .tc-hedra {
        background: linear-gradient(135deg, #1a0800, #6a2000, #d04000);
      }
      /* card body */
      .tc-body {
        padding: 16px 18px 20px;
      }
      .tc-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8px;
        gap: 6px;
      }
      .tool-card h4 {
        font-family: "Syne", sans-serif;
        font-weight: 700;
        font-size: 16px;
        color: var(--bone);
        margin: 0;
        white-space: nowrap;
      }
      .tc-cat {
        font-family: var(--font-sans);
        font-size: 8px;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        padding: 3px 8px;
        border-radius: 20px;
        white-space: nowrap;
        flex-shrink: 0;
      }
      .tc-cat.video {
        background: rgba(255, 106, 26, 0.15);
        color: var(--orange);
        border: 1px solid rgba(255, 106, 26, 0.25);
      }
      .tc-cat.image {
        background: rgba(29, 224, 196, 0.1);
        color: var(--teal-glow);
        border: 1px solid rgba(29, 224, 196, 0.2);
      }
      .tc-cat.audio {
        background: rgba(200, 100, 255, 0.12);
        color: #c87dff;
        border: 1px solid rgba(200, 100, 255, 0.2);
      }
      .tc-cat.vfx {
        background: rgba(255, 214, 0, 0.1);
        color: var(--amber);
        border: 1px solid rgba(255, 214, 0, 0.2);
      }
      .tc-cat.edit {
        background: rgba(100, 200, 255, 0.1);
        color: #7dd6ff;
        border: 1px solid rgba(100, 200, 255, 0.2);
      }
      .tool-card p {
        font-family: var(--font-sans);
        font-size: 12.5px;
        color: rgba(200, 188, 168, 0.5);
        line-height: 1.55;
        margin: 0;
      }
      .tc-gem {
        font-family: var(--font-sans);
        font-size: 8px;
        font-weight: 700;
        letter-spacing: 0.1em;
        color: var(--amber);
        background: rgba(255, 214, 0, 0.07);
        border: 1px solid rgba(255, 214, 0, 0.16);
        border-radius: 20px;
        padding: 2px 8px;
        margin-top: 10px;
        display: block;
        width: fit-content;
      }
      /* drag hint arrows */
      .tools-3d-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.09);
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        color: rgba(255, 255, 255, 0.35);
        font-size: 16px;
        opacity: 0;
        transition: opacity 0.35s;
        z-index: 2;
      }
      .tools-3d-wrap:hover .tools-3d-arrow {
        opacity: 1;
      }
      .tools-3d-arrow.left {
        left: 20px;
      }
      .tools-3d-arrow.right {
        right: 20px;
      }
      @media (max-width: 640px) {
        /* ── Mobile coverflow: wrap clips, track is visible so rotateY isn't cut off ── */
        #tools .tools-3d-wrap {
          margin-top: 32px;
          margin-left: -18px;
          margin-right: -18px;
          width: calc(100% + 36px);
          overflow: hidden;
        }
        .tools-3d-track {
          overflow: visible;
          padding: 28px 0 44px;
          gap: 12px;
          touch-action: pan-y;
          user-select: none;
          -webkit-user-select: none;
          cursor: grab;
        }
        .tools-3d-track.is-dragging {
          cursor: grabbing;
        }
        #tools .tool-card {
          width: 62vw !important;
          max-width: 280px;
          touch-action: pan-y;
        }
        #tools .tool-card * {
          touch-action: pan-y;
        }
        .tc-logo {
          height: 96px;
        }
        .tc-logo-img {
          width: 54px;
          height: 54px;
        }
        .tools-3d-arrow {
          display: none;
        }
        /* edge fade overlays on the clip container */
        .tools-3d-wrap::before,
        .tools-3d-wrap::after {
          content: "";
          position: absolute;
          top: 0;
          bottom: 44px;
          width: 32px;
          z-index: 2;
          pointer-events: none;
        }
        .tools-3d-wrap::before {
          left: 0;
          background: linear-gradient(90deg, var(--bg-3), transparent);
        }
        .tools-3d-wrap::after {
          right: 0;
          background: linear-gradient(270deg, var(--bg-3), transparent);
        }
      }

      /* ============ COMPREHENSIVE MOBILE PASS ============ */
      @media (max-width: 760px) {
        .wrap {
          padding: 0 18px;
        }
        .sec {
          padding: 64px 0;
        }
        .sec-head {
          margin-bottom: 40px;
        }
        .sec-head .big {
          font-size: clamp(32px, 11vw, 52px);
        }
        /* hero: form below copy, comfortable spacing */
        #hero {
          padding: 40px 0 56px;
          min-height: auto;
        }
        /* the old absolute full-bleed background photo is switched off on
           mobile entirely — replaced by the plain in-flow .hero-mobile-photo
           below, which can't be cropped or mispositioned since it's a real
           block-level image at its own natural size, not a forced overlay */
        #hero .heroMedia,
        #hero .heroTint {
          display: none;
        }
        .hero-mobile-photo {
          display: block;
          width: 100%;
          height: auto;
          border-radius: 14px;
          margin: 4px 0 18px;
          box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.7);
        }
        .hero-grid {
          gap: 28px;
        }
        .hero-h1 {
          font-size: clamp(44px, 13vw, 72px);
        }
        .hero-tag {
          font-size: 16px;
        }
        .hero-sub {
          font-size: 16px;
        }
        .hero-form {
          padding: 26px 22px;
          max-width: 100%;
        }
        .hero-form .hf-title {
          font-size: 26px;
        }
        /* nav */
        nav {
          padding: 12px 0;
        }
        body.scrolled nav {
          padding: 9px 0;
        }
        .nav-cta {
          padding: 9px 14px;
          font-size: 11px;
          letter-spacing: 0.08em;
        }
        .logo b {
          font-size: 17px;
        }
        /* mobile seq: frame scroll-scrub at 200vh — canvas visible, no video */
        #seq {
          height: 200vh;
        }
        .seq-sticky {
          position: sticky;
          top: 0;
          height: 100vh;
        }
        #seqCanvas {
          display: block !important;
        }
        #seq-mobile-video {
          display: none !important;
        }
        /* captions fade in/out on scroll same as desktop — no more
           forcing only the last caption to stay permanently visible */
        #seqBar,
        .seq-counter {
          display: none;
        }
        .seq-cap .huge {
          font-size: clamp(36px, 12vw, 68px);
        }
        .seq-cap {
          bottom: 14%;
          padding: 0 22px;
        }
        .seq-cap .lede {
          font-size: 14px;
        }
        /* showcase: single column, taller tiles */
        .show-grid {
          grid-template-columns: repeat(6, 1fr);
          grid-auto-rows: 80px;
          gap: 8px;
        }
        .t-a {
          grid-column: span 6;
          grid-row: span 2;
        }
        .t-b {
          grid-column: span 3;
          grid-row: span 1;
        }
        .t-c {
          grid-column: span 3;
          grid-row: span 1;
        }
        .t-d {
          grid-column: span 3;
          grid-row: span 2;
        }
        .t-e {
          grid-column: span 3;
          grid-row: span 2;
        }
        .t-f {
          grid-column: span 6;
          grid-row: span 1;
        }
        .show-tile {
          aspect-ratio: unset;
        }
        /* reels: stack tag above text */
        .reel {
          grid-template-columns: 1fr;
          gap: 10px;
          padding: 24px 22px;
        }
        .reel-tag {
          flex-direction: row;
          justify-content: flex-start;
          gap: 14px;
          min-width: 0;
        }
        .reel-tag .big {
          font-size: 46px;
        }
        .reel h3 {
          font-size: 20px;
        }
        /* host: photo on top, full width */
        .host-grid {
          gap: 36px;
        }
        .host-photo {
          max-width: 100%;
        }
        .host-body .big {
          font-size: clamp(34px, 10vw, 56px);
        }
        .host-body p {
          font-size: 15.5px;
        }
        .credbar {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 8px;
        }
        .credbar span {
          font-size: 11px;
          padding: 7px 11px;
          text-align: center;
        }
        /* films marquee smaller */
        .film-name {
          font-size: 26px;
        }
        /* diff + testimonials single col */
        .diff-grid {
          grid-template-columns: 1fr;
          max-width: 100%;
          gap: 16px;
        }
        .testi-grid {
          grid-template-columns: 1fr;
          max-width: 100%;
          gap: 16px;
        }
        .diff-card,
        .testi-card {
          padding: 28px 24px;
        }
        /* stats: 2x2 */
        .stats-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 28px 0;
        }
        .stat + .stat::before {
          display: none;
        }
        .stat .n {
          font-size: clamp(44px, 14vw, 64px);
        }
        /* urgency countdown wraps nicely */
        .countdown {
          gap: 8px;
          flex-wrap: wrap;
        }
        .cd-box {
          min-width: 72px;
          padding: 14px 10px;
          border-radius: 12px;
        }
        .cd-box .n {
          font-size: 44px;
        }
        .urg-inner .big {
          font-size: clamp(34px, 11vw, 56px);
        }
        /* faq */
        .faq-q {
          font-size: 16px;
          padding: 20px 0;
        }
        /* final */
        #final {
          min-height: 80vh;
        }
        .final-h {
          font-size: clamp(56px, 20vw, 120px);
        }
        .final-sub {
          font-size: 16px;
        }
        .final-strip {
          gap: 14px;
          font-size: 12.5px;
        }
        /* CTA full width on mobile for thumb reach */
        .cta {
          width: 100%;
          justify-content: center;
        }
        .hero-cred {
          align-items: flex-start;
        }
      }
      @media (max-width: 420px) {
        .hero-h1 {
          font-size: clamp(40px, 13vw, 58px);
        }
        .sec-head .big {
          font-size: clamp(28px, 11vw, 42px);
        }
        .stats-grid {
          grid-template-columns: 1fr;
          gap: 22px;
        }
        .cd-box {
          min-width: 62px;
        }
        .cd-box .n {
          font-size: 36px;
        }
      }

      /* ===== RICHER GALLERY ATMOSPHERE ===== */
      body {
        background:
          radial-gradient(
            120% 80% at 80% -10%,
            rgba(255, 106, 26, 0.06),
            transparent 55%
          ),
          radial-gradient(
            100% 70% at 0% 100%,
            rgba(29, 224, 196, 0.05),
            transparent 50%
          ),
          linear-gradient(180deg, #0b1213, #070d0e 42%, #060b0c) !important;
        background-attachment: fixed;
      }
      .sec {
        border-top: 1px solid rgba(255, 255, 255, 0.04);
      }
      .sec::before {
        content: "";
        position: absolute;
        top: -1px;
        left: 50%;
        transform: translateX(-50%);
        width: 170px;
        height: 1px;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 106, 26, 0.55),
          transparent
        );
        opacity: 0.6;
      }
      .sec-head {
        position: relative;
      }
      .sec-head::after {
        content: "";
        position: absolute;
        top: -46px;
        left: 50%;
        transform: translateX(-50%);
        width: 360px;
        height: 210px;
        background: radial-gradient(
          closest-side,
          rgba(255, 106, 26, 0.09),
          transparent
        );
        pointer-events: none;
        z-index: 0;
      }
      .sec-head > * {
        position: relative;
        z-index: 1;
      }

      /* ===== FRAME DECK locked layout ===== */
      /* ---- Deck: floating constellation — scales same on every screen ---- */
      @keyframes floatA {
        0%,
        100% {
          transform: rotate(-14deg) translateY(0);
        }
        50% {
          transform: rotate(-14deg) translateY(-13px);
        }
      }
      @keyframes floatB {
        0%,
        100% {
          transform: rotate(12deg) translateY(-5px);
        }
        50% {
          transform: rotate(12deg) translateY(9px);
        }
      }
      @keyframes floatC {
        0%,
        100% {
          transform: rotate(8deg) translateY(0);
        }
        50% {
          transform: rotate(8deg) translateY(-11px);
        }
      }
      @keyframes floatD {
        0%,
        100% {
          transform: rotate(-10deg) translateY(-4px);
        }
        50% {
          transform: rotate(-10deg) translateY(7px);
        }
      }
      @keyframes floatBadge {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-9px);
        }
      }

      #deck {
        overflow: hidden;
      }
      #deck .wrap {
        padding-bottom: 0;
      }

      /* orbit scales height proportional to width so everything fits */
      .deck-orbit {
        position: relative;
        width: min(1100px, 100%);
        height: clamp(300px, 56vw, 610px);
        margin: clamp(32px, 5vw, 60px) auto 0;
      }
      /* wrappers transparent to layout on desktop — only activate on mobile */
      .deck-cards,
      .deck-badges {
        display: contents;
      }
      /* ambient glow — % sized so it scales */
      .deck-glow {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 55%;
        height: 75%;
        background: radial-gradient(
          ellipse at 50% 50%,
          rgba(255, 106, 26, 0.26) 0%,
          rgba(29, 224, 196, 0.12) 44%,
          transparent 72%
        );
        filter: blur(70px);
        pointer-events: none;
        z-index: 0;
      }
      /* central glass hub */
      .deck-hub {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: clamp(180px, 22vw, 268px);
        background: rgba(10, 22, 26, 0.88);
        backdrop-filter: blur(28px) saturate(1.4);
        -webkit-backdrop-filter: blur(28px) saturate(1.4);
        border: 1px solid rgba(255, 106, 26, 0.22);
        border-radius: clamp(18px, 2.5vw, 28px);
        padding: clamp(20px, 3vw, 36px) clamp(16px, 2.5vw, 28px)
          clamp(18px, 2.8vw, 30px);
        text-align: center;
        z-index: 10;
        box-shadow:
          0 16px 64px rgba(0, 0, 0, 0.8),
          0 0 80px rgba(255, 106, 26, 0.1),
          inset 0 1px 0 rgba(255, 255, 255, 0.06);
      }
      .deck-hub-icon {
        width: clamp(40px, 5vw, 58px);
        height: clamp(40px, 5vw, 58px);
        border-radius: 50%;
        background: linear-gradient(
          145deg,
          rgba(255, 106, 26, 0.22),
          rgba(255, 106, 26, 0.06)
        );
        border: 1px solid rgba(255, 106, 26, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto clamp(12px, 2vw, 20px);
        font-size: clamp(16px, 2.2vw, 24px);
        box-shadow: 0 0 24px rgba(255, 106, 26, 0.18);
      }
      .deck-hub-title {
        font-family: var(--font-display);
        font-weight: 800;
        font-size: clamp(18px, 2.6vw, 32px);
        line-height: 0.95;
        text-transform: uppercase;
        margin-bottom: clamp(8px, 1.2vw, 12px);
      }
      .deck-hub p {
        font-family: var(--font-sans);
        font-size: clamp(10px, 1.1vw, 12.5px);
        color: rgba(200, 188, 168, 0.48);
        line-height: 1.65;
        margin: 0;
      }
      /* film frame cards — % positions so they scale with orbit */
      #deck .deck-card {
        position: absolute !important;
        width: clamp(100px, 14vw, 158px);
        transition:
          box-shadow 0.4s,
          border-color 0.3s;
      }
      /* corners as % of orbit size */
      #deck .dc-tl {
        top: 5.6%;
        left: 5.1%;
        animation: floatA 5s ease-in-out infinite;
        z-index: 5;
      }
      #deck .dc-tr {
        top: 3%;
        right: 4.2%;
        animation: floatB 4.6s ease-in-out infinite 0.8s;
        z-index: 5;
      }
      #deck .dc-bl {
        bottom: 5.2%;
        left: 3.5%;
        animation: floatC 5.5s ease-in-out infinite 1.2s;
        z-index: 5;
      }
      #deck .dc-br {
        bottom: 3%;
        right: 5.1%;
        animation: floatD 4.9s ease-in-out infinite 0.4s;
        z-index: 5;
      }
      #deck .deck-card:hover {
        animation-play-state: paused;
        transform: rotate(0deg) translateY(-14px) scale(1.08) !important;
        z-index: 30;
        box-shadow:
          0 52px 96px -28px rgba(0, 0, 0, 0.88),
          0 0 64px -12px rgba(255, 106, 26, 0.48);
        border-color: var(--line);
      }
      /* stat badge mini-cards */
      .deck-badge {
        position: absolute;
        display: flex;
        align-items: center;
        gap: clamp(8px, 1vw, 12px);
        background: rgba(8, 18, 22, 0.92);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border: 1px solid rgba(255, 255, 255, 0.09);
        border-radius: clamp(12px, 1.8vw, 18px);
        padding: clamp(9px, 1.3vw, 13px) clamp(12px, 1.6vw, 18px);
        box-shadow:
          0 6px 32px rgba(0, 0, 0, 0.65),
          inset 0 1px 0 rgba(255, 255, 255, 0.04);
        white-space: nowrap;
        z-index: 8;
      }
      .deck-badge .db-ic {
        font-size: clamp(16px, 2vw, 24px);
        line-height: 1;
        flex-shrink: 0;
      }
      .deck-badge .db-info {
        display: flex;
        flex-direction: column;
        gap: 2px;
      }
      .deck-badge .db-info strong {
        font-family: var(--font-display);
        font-weight: 800;
        font-size: clamp(14px, 1.8vw, 20px);
        color: var(--bone);
        line-height: 1;
      }
      .deck-badge .db-info span {
        font-family: var(--font-sans);
        font-size: clamp(7px, 0.8vw, 8.5px);
        font-weight: 700;
        letter-spacing: 0.13em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.28);
      }
      /* badge % positions — centered between cards and hub */
      .db-1 {
        top: 42%;
        left: 22.4%;
        animation: floatBadge 5.3s ease-in-out infinite 0.6s;
      }
      .db-2 {
        top: 37%;
        right: 21.6%;
        animation: floatBadge 4.9s ease-in-out infinite 1.5s;
      }
      .db-3 {
        bottom: 20.7%;
        left: 28.2%;
        animation: floatBadge 6.1s ease-in-out infinite;
      }

      /* ── DECK MOBILE (≤760px): exact desktop constellation + forward-lean 3D tilt ── */
      @media (max-width: 760px) {
        .deck-orbit {
          height: 145vw !important;
        }
        .deck-glow {
          display: block !important;
        }

        .deck-hub {
          position: absolute !important;
          left: 50% !important;
          top: 50% !important;
          transform: translate(-50%, -50%) !important;
          width: min(190px, 44vw) !important;
          padding: 16px 14px 14px !important;
        }
        .deck-hub-icon {
          width: 34px !important;
          height: 34px !important;
          font-size: 14px !important;
          margin-bottom: 8px !important;
        }
        .deck-hub-title {
          font-size: 15px !important;
          line-height: 1 !important;
          margin-bottom: 6px !important;
        }
        .deck-hub p {
          font-size: 9px !important;
        }

        .deck-cards {
          display: contents !important;
        }

        #deck .deck-card {
          position: absolute !important;
          width: 22vw !important;
        }

        @keyframes floatA {
          0%,
          100% {
            transform: perspective(500px) rotateX(20deg) rotate(-14deg)
              translateY(0);
          }
          50% {
            transform: perspective(500px) rotateX(20deg) rotate(-14deg)
              translateY(-10px);
          }
        }
        @keyframes floatB {
          0%,
          100% {
            transform: perspective(500px) rotateX(20deg) rotate(12deg)
              translateY(-4px);
          }
          50% {
            transform: perspective(500px) rotateX(20deg) rotate(12deg)
              translateY(7px);
          }
        }
        @keyframes floatC {
          0%,
          100% {
            transform: perspective(500px) rotateX(20deg) rotate(8deg)
              translateY(0);
          }
          50% {
            transform: perspective(500px) rotateX(20deg) rotate(8deg)
              translateY(-9px);
          }
        }
        @keyframes floatD {
          0%,
          100% {
            transform: perspective(500px) rotateX(20deg) rotate(-10deg)
              translateY(-3px);
          }
          50% {
            transform: perspective(500px) rotateX(20deg) rotate(-10deg)
              translateY(6px);
          }
        }

        .deck-badges {
          display: contents !important;
        }
        .deck-badge {
          position: absolute !important;
          animation: floatBadge 5s ease-in-out infinite !important;
        }
        .db-1 {
          top: 42%;
          left: 22%;
          bottom: auto !important;
          animation-delay: 0.6s !important;
        }
        .db-2 {
          top: 37%;
          right: 20%;
          bottom: auto !important;
          animation-delay: 1.5s !important;
        }
        .db-3 {
          bottom: 21%;
          left: 27%;
          top: auto !important;
        }
      }

      /* ===== JOURNEY / FILMOGRAPHY ===== */
      #journey {
        position: relative;
      }
      .jour-intro {
        max-width: 880px;
        margin: 0 auto 56px;
        text-align: center;
      }
      .jour-intro p {
        font-family: "Oswald";
        font-weight: 400;
        font-size: 17px;
        line-height: 1.8;
        color: var(--bone-dim);
        margin-top: 18px;
      }
      .jour-intro p b {
        color: var(--bone);
        font-weight: 500;
      }
      .jour-intro .film {
        color: var(--amber);
      }
      /* chapter chips */
      .jour-chapters {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        max-width: 760px;
        margin: 26px auto 0;
      }
      .jour-chapters span {
        font-family: "Oswald";
        font-size: 12px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--teal-glow);
        border: 1px solid var(--line-cool);
        border-radius: 40px;
        padding: 8px 16px;
        background: rgba(29, 224, 196, 0.04);
      }
      /* poster wall */
      .wall-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        max-width: 1180px;
        margin: 80px auto 26px;
        gap: 16px;
        flex-wrap: wrap;
      }
      .wall-head h3 {
        font-family: "Bebas Neue";
        font-size: clamp(28px, 4vw, 46px);
        text-transform: uppercase;
        line-height: 0.9;
      }
      .wall-head .tag {
        font-family: "Oswald";
        font-size: 12px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--muted);
      }
      .poster-wall {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 14px;
        max-width: 1180px;
        margin: 0 auto;
      }
      .poster img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
        z-index: 0;
      }
      .poster {
        position: relative;
        aspect-ratio: 2/3;
        border-radius: 8px;
        overflow: hidden;
        border: 1px solid var(--line-soft);
        background: linear-gradient(160deg, #13262a, #0a1618);
        cursor: default;
        transition:
          transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1),
          box-shadow 0.4s,
          border-color 0.3s;
      }
      .poster::before {
        content: "";
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient(
          45deg,
          rgba(255, 255, 255, 0.015) 0 10px,
          transparent 10px 20px
        );
        opacity: 0.6;
      }
      .poster::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          180deg,
          transparent 28%,
          rgba(4, 8, 9, 0.55) 55%,
          rgba(4, 8, 9, 0.95) 100%
        );
        z-index: 1;
      }
      .poster:hover {
        transform: translateY(-7px) scale(1.02);
        border-color: var(--line);
        box-shadow:
          0 36px 70px -30px rgba(0, 0, 0, 0.8),
          0 0 44px -16px rgba(255, 106, 26, 0.4);
        z-index: 5;
      }
      .poster .pinfo {
        position: absolute;
        z-index: 2;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 20px 14px 14px;
      }
      .poster .pinfo .yr {
        font-family: "Oswald";
        font-size: 11px;
        letter-spacing: 0.1em;
        color: var(--orange);
        display: block;
        margin-bottom: 4px;
      }
      .poster .pinfo .tt {
        font-family: "Syne";
        font-weight: 700;
        font-size: 14px;
        color: var(--bone);
        line-height: 1.18;
      }
      .poster .pinfo .rl {
        font-family: "Oswald";
        font-size: 10px;
        letter-spacing: 0.06em;
        color: rgba(200, 188, 168, 0.6);
        margin-top: 5px;
        display: block;
      }
      .poster .badge {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 2;
        font-family: "Oswald";
        font-size: 9px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--amber);
        border: 1px solid rgba(255, 179, 71, 0.4);
        border-radius: 30px;
        padding: 4px 9px;
        background: rgba(4, 8, 9, 0.6);
        backdrop-filter: blur(4px);
      }
      .poster .num {
        position: absolute;
        top: 12px;
        right: 14px;
        z-index: 2;
        font-family: "Bebas Neue";
        font-size: 26px;
        color: rgba(255, 255, 255, 0.14);
      }
      @media (max-width: 960px) {
        .poster-wall {
          grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
          gap: 12px;
        }
      }
      @media (max-width: 760px) {
        .poster-wall {
          grid-template-columns: repeat(3, 1fr);
          gap: 10px;
        }
        .wall-head {
          margin: 48px auto 16px;
        }
        .poster .pinfo .tt {
          font-size: 12px;
        }
        .poster .pinfo .yr {
          font-size: 10px;
        }
        .poster .badge {
          font-size: 8px;
          padding: 3px 7px;
        }
        .poster .num {
          font-size: 20px;
        }
      }
      @media (max-width: 480px) {
        .poster-wall {
          grid-template-columns: repeat(2, 1fr);
          gap: 9px;
        }
        .poster .pinfo {
          padding: 14px 10px 10px;
        }
        .poster .pinfo .rl {
          display: none;
        }
      }

      /* ===== POSTER WALL — cinematic reveal + cursor 3D tilt ===== */
      .poster-wall {
        perspective: 1400px;
      }
      .poster {
        opacity: 0;
        transform: translateY(54px) scale(0.92) rotateX(10deg);
        filter: blur(14px);
      }
      .poster.in {
        opacity: 1;
        transform: translateY(0) scale(1) rotateX(0);
        filter: blur(0);
        transition:
          opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
          transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
          filter 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
      }
      .poster .pshine {
        position: absolute;
        inset: 0;
        z-index: 3;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.3s;
        background: radial-gradient(
          220px 220px at var(--mx, 50%) var(--my, 40%),
          rgba(255, 138, 66, 0.22),
          transparent 60%
        );
      }
      .poster:hover .pshine {
        opacity: 1;
      }
      .poster.tilt:hover {
        box-shadow:
          0 46px 90px -30px rgba(0, 0, 0, 0.85),
          0 0 60px -14px rgba(255, 106, 26, 0.5);
        border-color: var(--line);
        z-index: 6;
      }
      @media (prefers-reduced-motion: reduce) {
        .poster {
          opacity: 1;
          transform: none;
          filter: none;
        }
      }
    
/* Custom lead form only; inherits the existing hero card visual language. */
.lead-form{display:grid;gap:10px;margin-top:16px}.lead-form input{box-sizing:border-box;width:100%;height:47px;padding:0 14px;border-radius:8px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);color:#fff;font:500 14px Inter,Arial,sans-serif}.lead-form input::placeholder{color:rgba(255,255,255,.55)}.lead-form .hp{position:absolute!important;left:-9999px!important}.lead-form .form-error{display:none;color:#ffb4b4;font-size:12px}.lead-form .form-error.show{display:block}.lead-form button[disabled]{opacity:.7;cursor:wait}

.lead-form select{box-sizing:border-box;width:100%;height:47px;padding:0 14px;border-radius:8px;border:1px solid rgba(255,255,255,.18);background:rgba(22,22,31,.96);color:#fff;font:500 13px Inter,Arial,sans-serif}.lead-form select:invalid{color:rgba(255,255,255,.55)}