/* ==================== CSS VARIABLES ==================== */
        :root {
            --tiktok-color-gold: #1194d4;
            --tiktok-color-gold-light: #1194d4;
            --tiktok-color-gold-dark: #1194d4;
            --tiktok-color-cream: #f5f0e8;
            --tiktok-color-dark: #0a0a0c;
            --tiktok-color-navy: #071a33;
            --tiktok-color-burgundy: #1c1015;
            --tiktok-color-charcoal: #16161a;
            --tiktok-color-white: #f8f8f8;
            --tiktok-color-white-soft: rgba(248, 248, 248, 0.9);
            --tiktok-color-overlay-dark: rgba(10, 10, 12, 0.55);
            --tiktok-color-overlay-warm: rgba(20, 15, 10, 0.5);
            --tiktok-color-glass-bg: rgba(255, 255, 255, 0.06);
            --tiktok-color-glass-border: rgba(255, 255, 255, 0.14);
            --tiktok-color-glass-bg-dark: rgba(10, 10, 12, 0.4);
            --tiktok-font-heading: 'Poppins', sans-serif;
            --tiktok-font-body: 'Inter', 'Helvetica Neue', 'Segoe UI', sans-serif;
            --tiktok-font-accent: 'Poppins', sans-serif;
            --tiktok-transition-smooth: cubic-bezier(0.65, 0, 0.35, 1);
            --tiktok-transition-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
            --tiktok-transition-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
            --tiktok-slide-duration: 6s;
            --tiktok-curtain-duration: 0.9s;
            --tiktok-text-duration: 0.7s;
            --tiktok-slider-height: 100vh;
            --tiktok-slider-height-mobile: 100svh;
            --tiktok-max-width: 1400px;
            --tiktok-nav-size: 56px;
            --tiktok-progress-height: 3px;
        }

        /* ==================== RESET & BASE ==================== */
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility;
            scroll-behavior: smooth;
        }

        

        /* ==================== HERO SLIDER CONTAINER ==================== */
        .tiktok-hero-slider {
            position: relative;
            width: 100%;
            height: 100vh;
            height: 100svh;
            min-height: 620px;
            overflow: hidden;
            background: var(--tiktok-color-navy);
            user-select: none;
            -webkit-user-select: none;
            -webkit-tap-highlight-color: transparent;
            cursor: default;
        }

        /* ==================== SLIDES WRAPPER ==================== */
        .tiktok-slides {
            position: relative;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        /* ==================== INDIVIDUAL SLIDE ==================== */
        .tiktok-slide {
            position: absolute;
            inset: 0;
            opacity: 0;
            pointer-events: none;
            z-index: 1;
            transition: opacity 0s 1.2s;
        }

        .tiktok-slide.tiktok-active {
            opacity: 1;
            pointer-events: auto;
            z-index: 10;
            transition: opacity 0s 0s;
        }

        .tiktok-slide.tiktok-exiting {
            z-index: 5;
            pointer-events: none;
        }

        /* Slide background image */
        .tiktok-slide-bg {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 42%;
            width: 58%;
            z-index: 1;
            overflow: hidden;
            background: #071a33;
        }

        .tiktok-slide-bg img {
            width: 100%;
            height: 100% !important;
            min-height: 100%;
            object-fit: cover;
            object-position: center center;
            display: block;
            /* Static image: no zoom or scale animation */
        }

        /* Soft navy blend where image meets the content panel */
        .tiktok-slide-bg::after {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: linear-gradient(90deg,
                rgba(7, 26, 51, 0.85) 0%,
                rgba(7, 26, 51, 0.35) 7%,
                rgba(7, 26, 51, 0) 18%);
            z-index: 2;
        }

        /* Overlay gradient */
        .tiktok-slide-overlay {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 42%;
            width: 58%;
            z-index: 2;
            pointer-events: none;
        }

        .tiktok-slide-overlay--dark {
            background: linear-gradient(180deg,
                    rgba(10, 10, 12, 0.35) 0%,
                    rgba(10, 10, 12, 0.25) 40%,
                    rgba(10, 10, 12, 0.6) 80%,
                    rgba(10, 10, 12, 0.85) 100%);
        }

        .tiktok-slide-overlay--warm {
            background: linear-gradient(160deg,
                    rgba(20, 15, 10, 0.3) 0%,
                    rgba(30, 20, 15, 0.25) 35%,
                    rgba(15, 10, 8, 0.55) 70%,
                    rgba(10, 8, 6, 0.8) 100%);
        }

        .tiktok-slide-overlay--navy {
            background: linear-gradient(135deg,
                    rgba(5, 8, 20, 0.3) 0%,
                    rgba(10, 14, 28, 0.35) 50%,
                    rgba(5, 8, 18, 0.7) 100%);
        }

        .tiktok-slide-overlay--burgundy {
            background: linear-gradient(145deg,
                    rgba(20, 8, 12, 0.3) 0%,
                    rgba(28, 12, 18, 0.4) 45%,
                    rgba(15, 6, 10, 0.75) 100%);
        }

        .tiktok-slide-overlay--charcoal {
            /* background: linear-gradient(180deg,
                    rgba(18, 18, 22, 0.3) 0%,
                    rgba(22, 22, 26, 0.4) 50%,
                    rgba(8, 8, 10, 0.8) 100%); */
        }

        /* ==================== SLIDE 1: SPLIT CURTAIN EFFECT ==================== */
        .tiktok-curtain-container {
            position: absolute;
            inset: 0;
            z-index: 3;
            pointer-events: none;
            display: flex;
        }

        .tiktok-curtain {
            flex: 1;
            height: 100%;
            background: var(--tiktok-color-navy);
            transition: transform var(--tiktok-curtain-duration) var(--tiktok-transition-smooth);
            will-change: transform;
        }

        .tiktok-curtain--left {
            transform-origin: left center;
            border-right: 1px solid rgba(255, 255, 255, 0.03);
        }

        .tiktok-curtain--right {
            transform-origin: right center;
            border-left: 1px solid rgba(255, 255, 255, 0.03);
        }

        .tiktok-slide.tiktok-active .tiktok-curtain--left {
            transform: translateX(-100%);
            transition: transform 0.85s var(--tiktok-transition-ease-out);
        }

        .tiktok-slide.tiktok-active .tiktok-curtain--right {
            transform: translateX(100%);
            transition: transform 0.85s var(--tiktok-transition-ease-out) 0.05s;
        }

        /* ==================== SLIDE 2: DIAGONAL REVEAL ==================== */
        .tiktok-diagonal-reveal {
            position: absolute;
            inset: 0;
            z-index: 3;
            background: var(--tiktok-color-navy);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            transition: clip-path 1s var(--tiktok-transition-ease-out);
            pointer-events: none;
        }

        .tiktok-slide.tiktok-active .tiktok-diagonal-reveal {
            clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
            transition: clip-path 1.1s var(--tiktok-transition-ease-out);
        }

        /* ==================== SLIDE 3: MASK REVEAL – CORRECTED ==================== */
        .tiktok-mask-reveal {
            position: absolute;
            inset: 0;
            z-index: 3;
            background: var(--tiktok-color-navy);
            /* Start fully covering the image */
            clip-path: circle(150% at 50% 50%);
            transition: clip-path 1s var(--tiktok-transition-ease-out);
            pointer-events: none;
        }

        .tiktok-slide.tiktok-active .tiktok-mask-reveal {
            /* Shrink to nothing, revealing the image */
            clip-path: circle(0% at 50% 50%);
            transition: clip-path 1.15s var(--tiktok-transition-ease-out);
        }

        /* ==================== SLIDE 4: HORIZONTAL PANELS ==================== */
        .tiktok-panel-container {
            position: absolute;
            inset: 0;
            z-index: 3;
            display: flex;
            pointer-events: none;
        }

        .tiktok-panel {
            flex: 1;
            height: 100%;
            background: var(--tiktok-color-navy);
            transition: transform 0.75s var(--tiktok-transition-smooth);
            will-change: transform;
        }

        .tiktok-panel:nth-child(1) { transition-delay: 0s; }
        .tiktok-panel:nth-child(2) { transition-delay: 0.06s; }
        .tiktok-panel:nth-child(3) { transition-delay: 0.12s; }
        .tiktok-panel:nth-child(4) { transition-delay: 0.18s; }
        .tiktok-panel:nth-child(5) { transition-delay: 0.24s; }

        .tiktok-slide.tiktok-active .tiktok-panel {
            transform: translateY(-100%);
        }

        /* ==================== SLIDE 5: CINEMATIC WIPE ==================== */
        .tiktok-cinematic-wipe {
            position: absolute;
            inset: 0;
            z-index: 3;
            background: var(--tiktok-color-navy);
            transform: scaleY(1);
            transform-origin: top center;
            transition: transform 0.9s var(--tiktok-transition-ease-out);
            pointer-events: none;
        }

        .tiktok-slide.tiktok-active .tiktok-cinematic-wipe {
            transform: scaleY(0);
            transition: transform 1s var(--tiktok-transition-ease-out) 0.05s;
        }

        /* ==================== CONTENT WRAPPER ==================== */
        .tiktok-slide-content {
            position: absolute;
            top: 0;
            left: 0;
            width: 42%;
            height: 100%;
            z-index: 5;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            padding: clamp(2rem, 4.5vw, 5.5rem);
            background: var(--tiktok-color-navy);
            pointer-events: none;
            overflow: hidden;
        }

        .tiktok-slide-content::after {
            content: '';
            position: absolute;
            top: 0;
            right: -1px;
            width: 80px;
            height: 100%;
            background: linear-gradient(90deg,
                rgba(7, 26, 51, 1) 0%,
                rgba(7, 26, 51, 0.85) 25%,
                rgba(7, 26, 51, 0) 100%);
            pointer-events: none;
            z-index: 1;
        }

        .tiktok-slide-content > * {
            position: relative;
            z-index: 2;
            pointer-events: auto;
        }

        /* Content positioning variants */
        .tiktok-slide-content--center {
            align-items: center;
            text-align: center;
        }
        .tiktok-slide-content--left {
            align-items: flex-start;
            text-align: left;
        }
        .tiktok-slide-content--right {
            align-items: flex-end;
            text-align: right;
        }

        /* ==================== TYPOGRAPHY ==================== */
        .tiktok-heading {
            font-family: var(--tiktok-font-heading);
            font-size: clamp(2.5rem, 5.5vw, 5.5rem);
            font-weight: 700;
            line-height: 1.08;
            letter-spacing: -0.02em;
            color: var(--tiktok-color-white);
            margin: 0 0 1.25rem;
            max-width: 800px;
            opacity: 0;
            transform: translateY(40px);
            transition: opacity var(--tiktok-text-duration) var(--tiktok-transition-ease-out),
                        transform var(--tiktok-text-duration) var(--tiktok-transition-ease-out);
        }

        .tiktok-slide.tiktok-active .tiktok-heading {
            opacity: 1;
            transform: translateY(0);
            transition-delay: 0.55s;
        }

        /* Character animation for Slide 2 */
        .tiktok-heading--chars .tiktok-char {
            display: inline-block;
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.45s var(--tiktok-transition-ease-out),
                        transform 0.5s var(--tiktok-transition-spring);
            will-change: transform, opacity;
        }

        .tiktok-slide.tiktok-active .tiktok-heading--chars .tiktok-char {
            opacity: 1;
            transform: translateY(0);
        }

        /* Word stagger for Slide 3 */
        .tiktok-heading--words .tiktok-word {
            display: inline-block;
            opacity: 0;
            transform: translateY(35px);
            transition: opacity 0.55s var(--tiktok-transition-ease-out),
                        transform 0.6s var(--tiktok-transition-spring);
            will-change: transform, opacity;
            margin-right: 0.3em;
        }

        .tiktok-slide.tiktok-active .tiktok-heading--words .tiktok-word {
            opacity: 1;
            transform: translateY(0);
        }

        /* Subheading */
        .tiktok-subheading {
            font-family: var(--tiktok-font-body);
            font-size: clamp(1rem, 1.4vw, 1.25rem);
            font-weight: 400;
            line-height: 1.5;
            letter-spacing: 0.04em;
            color: rgba(248, 248, 248, 0.8);
            max-width: 560px;
            margin: 0 0 2.25rem;
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s var(--tiktok-transition-ease-out),
                        transform 0.65s var(--tiktok-transition-ease-out);
        }

        .tiktok-slide.tiktok-active .tiktok-subheading {
            opacity: 1;
            transform: translateY(0);
            transition-delay: 0.7s;
        }

        /* Accent label */
        .tiktok-accent-label {
            display: inline-block;
            font-family: var(--tiktok-font-body);
            font-size: 0.8rem;
            font-weight: 500;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: #fff;
            margin-bottom: 1rem;
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.5s var(--tiktok-transition-ease-out),
                        transform 0.5s var(--tiktok-transition-ease-out);
        }

        .tiktok-slide.tiktok-active .tiktok-accent-label {
            opacity: 1;
            transform: translateY(0);
            transition-delay: 0.4s;
        }

        /* ==================== BUTTONS ==================== */
        .tiktok-btn-group {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s var(--tiktok-transition-ease-out),
                        transform 0.65s var(--tiktok-transition-ease-out);
        }

        .tiktok-slide.tiktok-active .tiktok-btn-group {
            opacity: 1;
            transform: translateY(0);
            transition-delay: 0.85s;
        }

        .tiktok-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.9rem 2.2rem;
            font-family: var(--tiktok-font-body);
            font-size: 0.9rem;
            font-weight: 500;
            letter-spacing: 0.05em;
            text-decoration: none;
            border: none;
            border-radius: 2px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: all 0.35s var(--tiktok-transition-ease-out);
            will-change: transform;
            outline: none;
            white-space: nowrap;
        }

        .tiktok-btn--primary {
            background: var(--tiktok-color-gold);
            color: #fff;
            font-weight: 600;
        }

        .tiktok-btn--primary::after {
            content: '';
            position: absolute;
            inset: 0;
            background: var(--tiktok-color-gold-light);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .tiktok-btn--primary:hover::after {
            opacity: 1;
        }

        .tiktok-btn--primary:hover {
            box-shadow: 0 8px 32px rgba(201, 169, 110, 0.35);
            transform: translateY(-2px);
        }

        .tiktok-btn--outline {
            background: transparent;
            color: var(--tiktok-color-white);
            border: 1.5px solid rgba(248, 248, 248, 0.5);
        }

        .tiktok-btn--outline:hover {
            border-color: var(--tiktok-color-white);
            background: rgba(255, 255, 255, 0.06);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
            transform: translateY(-2px);
        }

        .tiktok-btn--glass {
            background: var(--tiktok-color-glass-bg);
            color: var(--tiktok-color-white);
            border: 1px solid var(--tiktok-color-glass-border);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }

        .tiktok-btn--glass:hover {
            background: rgba(255, 255, 255, 0.12);
            border-color: rgba(255, 255, 255, 0.3);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
            transform: translateY(-2px);
        }

        .tiktok-btn span {
            position: relative;
            z-index: 2;
        }

        /* ==================== GLASS CARD (Slide 3) ==================== */
        .tiktok-glass-card {
            background: var(--tiktok-color-glass-bg-dark);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 16px;
            padding: clamp(1.5rem, 3vw, 2.5rem);
            max-width: 520px;
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 0.7s var(--tiktok-transition-ease-out),
                        transform 0.75s var(--tiktok-transition-ease-out);
            position: relative;
            overflow: hidden;
        }

        .tiktok-slide.tiktok-active .tiktok-glass-card {
            opacity: 1;
            transform: translateY(0);
            transition-delay: 0.65s;
        }

        /* Glowing border animation for Slide 3 */
        .tiktok-glowing-border {
            position: absolute;
            inset: -1px;
            border-radius: 17px;
            padding: 1px;
            background: conic-gradient(from 0deg,
                    transparent,
                    var(--tiktok-color-gold),
                    transparent,
                    var(--tiktok-color-gold-light),
                    transparent);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            animation: tiktok-rotate-border 8s linear infinite;
            opacity: 0;
            transition: opacity 0.6s ease;
            pointer-events: none;
            z-index: 0;
        }

        .tiktok-slide.tiktok-active .tiktok-glowing-border {
            opacity: 0.7;
            transition-delay: 0.9s;
        }

        @keyframes tiktok-rotate-border {
            to { transform: rotate(360deg); }
        }

        /* ==================== DECORATIVE LINE (Slide 2) ==================== */
        .tiktok-decorative-line {
            width: 0;
            height: 2px;
            background: var(--tiktok-color-gold);
            margin: 0.5rem 0 1.5rem;
            transition: width 0.8s var(--tiktok-transition-ease-out);
            max-width: 120px;
        }

        .tiktok-slide.tiktok-active .tiktok-decorative-line {
            width: 100px;
            transition-delay: 0.6s;
        }

        /* ==================== ROTATING ACCENT SHAPES (Slide 5) ==================== */
        .tiktok-accent-shape {
            position: absolute;
            z-index: 4;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.6s ease;
        }

        .tiktok-slide.tiktok-active .tiktok-accent-shape {
            opacity: 0.5;
            transition-delay: 0.8s;
        }

        .tiktok-accent-shape--diamond {
            width: 40px;
            height: 40px;
            border: 1.5px solid rgba(201, 169, 110, 0.5);
            transform: rotate(45deg);
            animation: tiktok-rotate-slow 12s linear infinite;
        }

        .tiktok-accent-shape--circle {
            width: 30px;
            height: 30px;
            border: 1.5px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            animation: tiktok-float-gentle 7s ease-in-out infinite;
        }

        .tiktok-accent-shape--ring {
            width: 50px;
            height: 50px;
            border: 1.5px solid rgba(201, 169, 110, 0.35);
            border-radius: 50%;
            animation: tiktok-rotate-slow 18s linear infinite reverse;
        }

        @keyframes tiktok-rotate-slow {
            to { transform: rotate(360deg); }
        }

        @keyframes tiktok-float-gentle {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            25%  { transform: translateY(-15px) rotate(90deg); }
            50%  { transform: translateY(-5px) rotate(180deg); }
            75%  { transform: translateY(-20px) rotate(270deg); }
        }

        /* ==================== FLOATING PARTICLES (Pure CSS) ==================== */
        .tiktok-particles-layer {
            position: absolute;
            inset: 0;
            z-index: 4;
            pointer-events: none;
            overflow: hidden;
        }

        .tiktok-particle {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.4);
            animation: tiktok-particle-drift linear infinite;
            will-change: transform, opacity;
        }

        @keyframes tiktok-particle-drift {
            0%   { transform: translateY(0) translateX(0); opacity: 0; }
            10%  { opacity: 0.8; }
            90%  { opacity: 0.3; }
            100% { transform: translateY(-100vh) translateX(60px); opacity: 0; }
        }

        /* ==================== NAVIGATION ARROWS ==================== */
        .tiktok-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 20;
            width: var(--tiktok-nav-size);
            height: var(--tiktok-nav-size);
            border-radius: 50%;
            background: rgba(20, 20, 24, 0);
            border: 1px solid rgba(255, 255, 255, 0.2);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.35s var(--tiktok-transition-ease-out);
            will-change: transform, background;
            -webkit-tap-highlight-color: transparent;
        }

        .tiktok-nav:hover {
            background: rgba(30, 30, 36, 0.85);
            border-color: rgba(255, 255, 255, 0.4);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
            transform: translateY(-50%) scale(1.08);
        }

        .tiktok-nav:active {
            transform: translateY(-50%) scale(0.94);
            transition: transform 0.15s ease;
        }

        .tiktok-nav--prev { left: 10px; }
        .tiktok-nav--next { right: 10px; }

        .tiktok-nav svg {
            width: 20px;
            height: 20px;
            stroke: var(--tiktok-color-white);
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
            transition: transform 0.3s ease;
        }

        .tiktok-nav--prev:hover svg { transform: translateX(-3px); }
        .tiktok-nav--next:hover svg { transform: translateX(3px); }

        /* ==================== PAGINATION DOTS ==================== */
        .tiktok-pagination {
            position: absolute;
            bottom: clamp(20px, 3.5vw, 40px);
            left: 50%;
            transform: translateX(-50%);
            z-index: 20;
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .tiktok-pagination-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.4);
            cursor: pointer;
            transition: all 0.4s var(--tiktok-transition-ease-out);
            border: 2px solid transparent;
            position: relative;
            -webkit-tap-highlight-color: transparent;
        }

        .tiktok-pagination-dot:hover {
            background: rgba(255, 255, 255, 0.7);
            transform: scale(1.2);
        }

        .tiktok-pagination-dot.tiktok-active {
            width: 28px;
            border-radius: 12px;
            background: var(--tiktok-color-gold);
            border-color: var(--tiktok-color-gold);
            box-shadow: 0 0 16px rgba(201, 169, 110, 0.5);
            cursor: default;
        }

        /* ==================== PROGRESS BAR ==================== */
        .tiktok-progress-container {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: var(--tiktok-progress-height);
            z-index: 25;
            background: rgba(255, 255, 255, 0.08);
        }

        .tiktok-progress-bar {
            height: 100%;
            background: var(--tiktok-color-gold);
            width: 0%;
            will-change: width;
            box-shadow: 0 0 8px rgba(201, 169, 110, 0.6);
        }

        .tiktok-progress-bar.tiktok-animating {
            animation: tiktok-progress-fill var(--tiktok-slide-duration) linear forwards;
        }

        @keyframes tiktok-progress-fill {
            from { width: 0%; }
            to { width: 100%; }
        }

        /* ==================== LIGHT STREAK EFFECT ==================== */
        .tiktok-light-streak {
            position: absolute;
            z-index: 4;
            pointer-events: none;
            width: 2px;
            height: 180px;
            background: linear-gradient(to bottom,
                    transparent,
                    rgba(255, 255, 255, 0.15),
                    rgba(201, 169, 110, 0.2),
                    rgba(255, 255, 255, 0.1),
                    transparent);
            opacity: 0;
            transform: rotate(-25deg) translateX(-200px);
            transition: opacity 0.4s ease;
        }

        .tiktok-slide.tiktok-active .tiktok-light-streak {
            opacity: 0.7;
            animation: tiktok-streak-sweep 5s ease-in-out infinite;
        }

        @keyframes tiktok-streak-sweep {
            0%   { transform: rotate(-25deg) translateX(-200px); opacity: 0; }
            30%  { opacity: 0.8; }
            70%  { opacity: 0.5; }
            100% { transform: rotate(-25deg) translateX(calc(100vw + 200px)); opacity: 0; }
        }

        /* ==================== RESPONSIVE BREAKPOINTS ==================== */

        /* Ultra-wide desktop: 1800px+ */
        @media (min-width: 1800px) {
            .tiktok-slide-bg {
                left: 40%;
                width: 60%;
            }

            .tiktok-slide-overlay {
                left: 40%;
                width: 60%;
            }

            .tiktok-slide-content {
                width: 40%;
                padding: 6rem clamp(4rem, 5vw, 8rem);
            }

            .tiktok-heading {
                font-size: clamp(4rem, 4.5vw, 5.8rem);
                max-width: 760px;
            }

            .tiktok-subheading {
                font-size: 1.25rem;
                max-width: 580px;
            }
        }

        /* Large desktop: 1440px - 1799px */
        @media (min-width: 1440px) and (max-width: 1799px) {
            .tiktok-heading {
                font-size: 32px;
                max-width: 650px;
            }

            .tiktok-slide-content {
                padding: 5rem clamp(3.5rem, 4vw, 6rem);
            }
        }

        /* Standard desktop: 1024px - 1439px */
        @media (min-width: 1024px) and (max-width: 1439px) {
            .tiktok-hero-slider {
                min-height: 580px;
            }

            .tiktok-slide-bg {
                left: 43%;
                width: 57%;
            }

            .tiktok-slide-overlay {
                left: 43%;
                width: 57%;
            }

            .tiktok-slide-content {
                width: 43%;
                padding: 4rem clamp(2.5rem, 4vw, 4.5rem);
            }

            .tiktok-heading {
                font-size: clamp(2.8rem, 4.2vw, 4.3rem);
                max-width: 560px;
            }

            .tiktok-subheading {
                font-size: 1rem;
                max-width: 420px;
            }

            .tiktok-btn {
                padding: 0.8rem 1.7rem;
            }
        }

        /* Tablet landscape / portrait: 768px - 1023px */
        @media (min-width: 768px) and (max-width: 1023px) {
            .tiktok-hero-slider {
                height: 82svh;
                min-height: 620px;
            }

            .tiktok-slide-bg {
                left: 40%;
                width: 60%;
            }

            .tiktok-slide-overlay {
                left: 40%;
                width: 60%;
            }

            .tiktok-slide-content {
                width: 40%;
                padding: 2.5rem;
            }

            .tiktok-heading {
                font-size: clamp(2.2rem, 5vw, 3.4rem);
                line-height: 1.08;
                max-width: 420px;
            }

            .tiktok-subheading {
                font-size: 0.95rem;
                max-width: 330px;
                margin-bottom: 1.5rem;
            }

            .tiktok-btn-group {
                gap: 0.6rem;
            }

            .tiktok-btn {
                padding: 0.7rem 1.25rem;
                font-size: 0.8rem;
            }

            .tiktok-nav {
                width: 44px;
                height: 44px;
            }

            .tiktok-nav--prev {
                left: 10px;
            }

            .tiktok-nav--next {
                right: 10px;
            }

            .tiktok-glass-card {
                max-width: 100%;
                padding: 1.25rem;
            }
        }

        /* =========================================================
   MOBILE FIX
   Prevents overlap with following Elementor sections
========================================================= */

@media (max-width: 767px) {

    .tiktok-hero-slider {
        position: relative !important;
        display: block !important;

        width: 100% !important;

        /* IMPORTANT:
           Do NOT use aspect-ratio here.
           Elementor + absolute slides can calculate it incorrectly.
        */
        height: clamp(620px, 145vw, 760px) !important;
        min-height: 620px !important;

        max-height: none !important;

        overflow: hidden !important;

        background: #071a33 !important;
    }

    /* Slides must stay completely inside hero */
    .tiktok-slides {
        position: absolute !important;
        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        overflow: hidden !important;
    }

    .tiktok-slide {
        position: absolute !important;
        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        min-height: 0 !important;
        max-height: none !important;

        overflow: hidden !important;
    }


    /* =====================================================
       IMAGE
    ===================================================== */

    .tiktok-slide-bg {
        position: absolute !important;

        top: 0 !important;
        left: 0 !important;
        right: 0 !important;

        bottom: auto !important;

        width: 100% !important;
        height: 56% !important;

        min-height: 0 !important;

        overflow: hidden !important;

        background: #071a33 !important;
    }

    .tiktok-slide-bg img {
        display: block !important;

        width: 100% !important;
        height: 100% !important;

        min-height: 0 !important;

        object-fit: cover !important;
        object-position: center center !important;
    }


    /* Image-to-navy transition */
    .tiktok-slide-bg::after {
        content: "" !important;

        position: absolute !important;
        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        background: linear-gradient(
            to bottom,
            rgba(7, 26, 51, 0) 50%,
            rgba(7, 26, 51, 0.25) 65%,
            rgba(7, 26, 51, 0.75) 88%,
            #071a33 100%
        ) !important;

        pointer-events: none !important;
    }


    /* =====================================================
       IMAGE OVERLAY
    ===================================================== */

    .tiktok-slide-overlay {
        position: absolute !important;

        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: auto !important;

        width: 100% !important;
        height: 56% !important;

        pointer-events: none !important;
    }


    /* =====================================================
       NAVY CONTENT PANEL
    ===================================================== */

    .tiktok-slide-content {
        position: absolute !important;

        top: 56% !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        width: 100% !important;
        height: 44% !important;

        min-height: 0 !important;
        max-height: none !important;

        padding:
            1.25rem
            clamp(1rem, 5vw, 1.5rem)
            3.5rem !important;

        margin: 0 !important;

        display: flex !important;

        flex-direction: column !important;

        justify-content: center !important;
        align-items: flex-start !important;

        text-align: left !important;

        background: #071a33 !important;

        overflow: hidden !important;

        z-index: 10 !important;
    }


    /* Remove the old floating gradient that was extending
       outside the content panel */
    .tiktok-slide-content::after {
        display: none !important;
    }


    /* =====================================================
       CONTENT ALIGNMENT
    ===================================================== */

    .tiktok-slide-content--center {
        align-items: center !important;
        text-align: center !important;
    }

    .tiktok-slide-content--left {
        align-items: flex-start !important;
        text-align: left !important;
    }

    .tiktok-slide-content--right {
        align-items: flex-start !important;
        text-align: left !important;
    }


    /* =====================================================
       HEADING
    ===================================================== */

    .tiktok-heading {
        width: 100% !important;

        max-width: 100% !important;

        font-size: clamp(
            1.7rem,
            7vw,
            2.5rem
        ) !important;

        line-height: 1.08 !important;

        margin: 0 0 0.7rem !important;
    }


    /* =====================================================
       DESCRIPTION
    ===================================================== */

    .tiktok-subheading {
        width: 100% !important;

        max-width: 100% !important;

        font-size: clamp(
            0.78rem,
            2.5vw,
            0.95rem
        ) !important;

        line-height: 1.45 !important;

        margin: 0 0 1rem !important;
    }


    /* =====================================================
       LABEL
    ===================================================== */

    .tiktok-accent-label {
        font-size: 0.65rem !important;

        line-height: 1.3 !important;

        margin-bottom: 0.55rem !important;
    }


    /* =====================================================
       BUTTONS
    ===================================================== */

    .tiktok-btn-group {
        display: flex !important;

        width: 100% !important;

        gap: 0.55rem !important;

        flex-wrap: wrap !important;
    }

    .tiktok-btn {
        min-height: 38px !important;

        padding:
            0.6rem
            1rem !important;

        font-size: 0.72rem !important;

        line-height: 1 !important;
    }


    /* =====================================================
       NAVIGATION
    ===================================================== */

    .tiktok-nav {
        width: 38px !important;
        height: 38px !important;

        z-index: 50 !important;
    }

    .tiktok-nav--prev {
        top: 28% !important;
        left: 8px !important;
    }

    .tiktok-nav--next {
        top: 28% !important;
        right: 8px !important;
    }

    .tiktok-nav svg {
        width: 15px !important;
        height: 15px !important;
    }


    /* =====================================================
       PAGINATION
    ===================================================== */

    .tiktok-pagination {
        bottom: 12px !important;

        z-index: 60 !important;

        gap: 7px !important;
    }

    .tiktok-pagination-dot {
        width: 8px !important;
        height: 8px !important;
    }

    .tiktok-pagination-dot.tiktok-active {
        width: 22px !important;
    }


    /* =====================================================
       REMOVE DECORATIVE ELEMENTS ON SMALL SCREEN
    ===================================================== */

    .tiktok-accent-shape,
    .tiktok-light-streak {
        display: none !important;
    }


    /* =====================================================
       CURTAIN / REVEAL ELEMENTS
       MUST NOT CREATE EXTRA CONTENT
    ===================================================== */

    .tiktok-curtain-container,
    .tiktok-diagonal-reveal,
    .tiktok-mask-reveal,
    .tiktok-panel-container,
    .tiktok-cinematic-wipe {
        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        max-height: 100% !important;

        overflow: hidden !important;
    }


    /* =====================================================
       GLASS CARD
    ===================================================== */

    .tiktok-glass-card {
        width: 100% !important;

        max-width: 100% !important;

        padding: 0.9rem !important;

        border-radius: 10px !important;
    }
}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 479px) {

    .tiktok-hero-slider {
        height: clamp(600px, 155vw, 700px) !important;

        min-height: 600px !important;
    }

    .tiktok-slide-bg {
        height: 55% !important;
    }

    .tiktok-slide-overlay {
        height: 55% !important;
    }

    .tiktok-slide-content {
        top: 55% !important;

        height: 45% !important;

        padding:
            1.1rem
            1rem
            3.2rem !important;
    }

    .tiktok-heading {
        font-size: clamp(
            1.5rem,
            7.5vw,
            2.05rem
        ) !important;

        line-height: 1.08 !important;
    }

    .tiktok-subheading {
        font-size: 0.78rem !important;

        line-height: 1.4 !important;

        margin-bottom: 0.8rem !important;
    }

    .tiktok-accent-label {
        font-size: 0.6rem !important;
    }

    .tiktok-btn {
        min-height: 36px !important;

        padding:
            0.55rem
            0.8rem !important;

        font-size: 0.68rem !important;
    }
}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 360px) {

    .tiktok-hero-slider {
        height: 620px !important;

        min-height: 620px !important;
    }

    .tiktok-slide-bg {
        height: 53% !important;
    }

    .tiktok-slide-overlay {
        height: 53% !important;
    }

    .tiktok-slide-content {
        top: 53% !important;

        height: 47% !important;

        padding:
            1rem
            0.85rem
            3rem !important;
    }

    .tiktok-heading {
        font-size: 1.4rem !important;
    }

    .tiktok-subheading {
        font-size: 0.74rem !important;
    }

    .tiktok-btn-group {
        flex-direction: column !important;

        width: 100% !important;
    }

    .tiktok-btn {
        width: 100% !important;
    }
}


/* =========================================================
   MOBILE LANDSCAPE
========================================================= */

@media
(max-width: 900px)
and (max-height: 600px)
and (orientation: landscape) {

    .tiktok-hero-slider {
        height: 100svh !important;

        min-height: 430px !important;

        max-height: none !important;
    }

    .tiktok-slide-bg {
        top: 0 !important;
        left: 48% !important;

        width: 52% !important;
        height: 100% !important;
    }

    .tiktok-slide-overlay {
        top: 0 !important;
        left: 48% !important;

        width: 52% !important;
        height: 100% !important;
    }

    .tiktok-slide-content {
        top: 0 !important;
        left: 0 !important;

        width: 48% !important;
        height: 100% !important;

        padding:
            1.25rem
            1.5rem !important;

        justify-content: center !important;
    }

    .tiktok-heading {
        font-size: clamp(
            1.6rem,
            5vw,
            2.5rem
        ) !important;
    }

    .tiktok-subheading {
        font-size: 0.75rem !important;

        margin-bottom: 0.7rem !important;
    }

    .tiktok-btn {
        padding:
            0.5rem
            0.8rem !important;

        font-size: 0.68rem !important;
    }

    .tiktok-nav--prev,
    .tiktok-nav--next {
        top: 50% !important;
    }
}