/* ==========================================================================
   MEEWAYS UNIVERSAL DESIGN SYSTEM - STRICT TYPOGRAPHY & COLOR HARMONY LOCK
   Universal Plus Jakarta Sans for Text & Headings • Aclonica for Meeways Logo
   ========================================================================== */
:root {
    --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    --font-primary: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    --font-logo: 'Aclonica', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
    
    --bg-dark: #08080a !important;
    --bg-card: #121216 !important;
    --accent-yellow: #ffd23f !important;
    --accent-gold: #ffd23f !important;
    --accent-gold-dark: #d4a017 !important;
    --accent-gold-subtle: rgba(255, 210, 63, 0.12) !important;
    --accent-gold-glow: rgba(255, 210, 63, 0.28) !important;
    --text-primary: #ffffff !important;
    --text-muted: #9ea0ab !important;
    --border-gold: rgba(255, 210, 63, 0.35) !important;
}

/* Universal Typography: Enforces identical 'Plus Jakarta Sans' across all headings & body elements */
html, body,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
p, span, a, li, ul, ol, button, input, textarea, select,
.btn, .badge, .nav-link, .card,
[class*="title"], [class*="heading"], [class*="desc"], [class*="text"],
[class*="hero"], [class*="label"], [class*="price"], [class*="item"],
.section-title, .section-subtitle, .section-eyebrow,
.luxury-nav-capsule, .ftr-contact-console, .site-footer {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Meeways Logo Wordmark strictly preserves Aclonica */
.mw-aclonica-wordmark,
.logo-text-aclonica,
[class*="aclonica"],
.navbar-brand-logo,
.meeways-brand-wordmark {
    font-family: 'Aclonica', cursive, sans-serif !important;
}

/* Icon fonts protection */
.fa, .fas, .far, .fal, .fab, .fa-solid, .fa-regular, .fa-brands,
[class^="fa-"], [class*=" fa-"],
.bi, [class^="bi-"], [class*=" bi-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "FontAwesome", "bootstrap-icons" !important;
}

@import url('https://fonts.googleapis.com/css2?family=Aclonica&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,700&display=swap');
/* ==========================================================================
   MEEWAYS STUDIO - HIGH-PERFORMANCE ROCKET DESIGN SYSTEM
   100% Original Code | Zero Copyright Encumbrance | Hyper-Optimized
   ========================================================================== */

:root {
    --bg-dark: #08080a;
    --bg-card: #121216;
    --bg-surface: #18181d;
    --bg-surface-elevated: #202026;
    --bg-light: #f5f5f7;
    --bg-white: #ffffff;
    
    --accent-yellow: #ffd23f;
    --accent-gold: #ffc72c;
    --accent-gold-dark: #d4a017;
    --accent-gold-subtle: rgba(255, 210, 63, 0.12);
    --accent-gold-glow: rgba(255, 210, 63, 0.28);
    
    --text-primary: #ffffff;
    --text-dark: #08080a;
    --text-muted: #9ea0ab;
    --text-secondary: #65676e;
    --text-body-dark: #202020;
    
    --border-dark: rgba(255, 255, 255, 0.1);
    --border-card: rgba(255, 255, 255, 0.08);
    --border-gold: rgba(255, 210, 63, 0.35);
    
    --font-logo: 'Aclonica', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    
    --transition: all 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-full: 9999px;
    
    --shadow-card: 0 16px 40px -12px rgba(0, 0, 0, 0.6);
    --shadow-gold: 0 14px 32px -8px rgba(255, 210, 63, 0.35);
}

/* Global Reset & Performance Base */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

/* Ultra-Luxury Lenis Momentum Smooth Scroll Engine */
html.lenis, html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-smooth iframe {
    pointer-events: none;
}

html {
    scroll-behavior: smooth;
    overflow-x: clip;
    text-rendering: optimizeLegibility;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    touch-action: manipulation;
}

::selection {
    background: var(--accent-yellow);
    color: var(--text-dark);
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition);
    touch-action: manipulation;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
    content-visibility: auto;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    outline: none;
    touch-action: manipulation;
}

.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

.text-center { text-align: center; }
.text-light { color: var(--text-primary) !important; }
.text-dark { color: var(--text-dark) !important; }

/* Section Common Headings */
.section-eyebrow {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent-yellow);
    background: var(--accent-gold-subtle);
    border: 1px solid var(--border-gold);
    padding: 6px 16px;
    border-radius: var(--radius-full);
    margin-bottom: 14px;
}

.section-title {
    font-family: var(--font-heading);
    font-size: clamp(26px, 4vw, 42px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.5px;
    margin-bottom: 14px;
}

.section-subtitle {
    font-size: 15.5px;
    color: var(--text-muted);
    max-width: 720px;
    margin: 0 auto 40px;
    line-height: 1.65;
}

/* ==========================================================================
   1. TOP ANNOUNCEMENT BAR
   ========================================================================== */
/* ==========================================================================
   1. TOP LUXURY FRAUD ALERT RUNNING MARQUEE STRIP
   ========================================================================== */
.top-bar {
    background: linear-gradient(90deg, #07070a 0%, #151108 50%, #07070a 100%);
    color: #dfdfe6;
    font-size: 12.5px;
    font-weight: 500;
    padding: 7px 0;
    position: relative;
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 210, 63, 0.2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), inset 0 -1px 0 rgba(255, 210, 63, 0.1);
}

.top-bar__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.top-bar__alert {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    overflow: hidden;
}

.alert-badge {
    font-family: var(--font-heading);
    font-weight: 800;
    color: var(--accent-yellow);
    background: linear-gradient(135deg, rgba(255, 210, 63, 0.22) 0%, rgba(255, 184, 28, 0.08) 100%);
    border: 1px solid rgba(255, 210, 63, 0.45);
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 1px;
    padding: 2.5px 9px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 0 12px rgba(255, 210, 63, 0.2);
}

.alert-pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff334b;
    box-shadow: 0 0 6px #ff334b, 0 0 12px rgba(255, 51, 75, 0.8);
    animation: alertPulse 1.4s ease-in-out infinite;
}

@keyframes alertPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.35); opacity: 0.6; }
}

.marquee-wrapper {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    mask-image: linear-gradient(to right, transparent, black 1%, black 97%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 1%, black 97%, transparent);
}

.marquee-content {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    animation: marquee 35s linear infinite;
    will-change: transform;
    font-size: 12px;
    font-weight: 500;
    color: #dfdfe6;
    letter-spacing: 0.2px;
}

.top-bar__alert:hover .marquee-content {
    animation-play-state: paused;
}

.marquee-track {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.marquee-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.marquee-sep {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-yellow);
    padding: 0 32px;
    font-size: 11px;
    opacity: 0.85;
    flex-shrink: 0;
    text-shadow: 0 0 8px rgba(255, 210, 63, 0.4);
}

.marquee-tag {
    margin-left: 8px;
    padding: 2.5px 9px;
    border-radius: var(--radius-full);
    background: rgba(255, 210, 63, 0.12);
    border: 1px solid rgba(255, 210, 63, 0.35);
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: 0.5px;
}

.alert-brand {
    color: #ffffff;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.alert-warn {
    color: #ff7675;
    font-weight: 600;
}

.alert-safe {
    color: var(--accent-yellow);
    font-weight: 700;
}

@keyframes marquee {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}

.top-bar__actions {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-shrink: 0;
}

/* Language Switcher */
.dsm-langsw {
    position: relative;
    display: inline-block;
}

.dsm-langsw__btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    min-height: 26px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #dfdfe6;
    font-size: 11.5px;
    font-weight: 600;
    transition: var(--transition);
}

.dsm-langsw__btn:hover {
    background: rgba(255, 210, 63, 0.12);
    border-color: var(--accent-yellow);
    color: var(--accent-yellow);
}

.dsm-langsw__globe { width: 13px; height: 13px; }
.dsm-langsw__chev { width: 9px; height: 9px; transition: transform 0.2s; }
.dsm-langsw.is-open .dsm-langsw__chev { transform: rotate(180deg); }

.dsm-langsw__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    background: #14141a;
    border: 1px solid rgba(255, 210, 63, 0.25);
    border-radius: var(--radius-sm);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.8);
    padding: 6px;
    display: none;
    z-index: 10000;
    backdrop-filter: blur(12px);
}

.dsm-langsw.is-open .dsm-langsw__menu {
    display: block;
    animation: fadeIn 0.2s ease;
}

.dsm-langsw__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    min-height: 34px;
    border-radius: 6px;
    color: #dfdfe6;
    font-size: 12.5px;
    font-weight: 600;
    transition: var(--transition);
}

.dsm-langsw__item:hover {
    background: rgba(255, 210, 63, 0.15);
    color: var(--accent-yellow);
}

.dsm-langsw__item.active {
    background: var(--accent-yellow);
    color: var(--text-dark);
}

.dsm-langsw__native {
    font-size: 10.5px;
    color: #888;
}

.top-bar__links {
    display: flex;
    align-items: center;
    gap: 16px;
    list-style: none;
}

.top-bar__links a {
    color: #b0b0b8;
    font-size: 12px;
    font-weight: 500;
    transition: var(--transition);
}

.top-bar__links a:hover {
    color: var(--accent-yellow);
}

.top-phone a {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--accent-yellow) !important;
    font-weight: 600;
}

.top-phone svg {
    width: 12px;
    height: 12px;
}

/* ==========================================================================
   2. MAIN HEADER & MEEWAYS LOGO & LUXURY MEGA MENUS
   ========================================================================== */
.main-header {
    background-color: rgba(8, 8, 12, 0.88);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    position: sticky;
    top: 0;
    z-index: 999;
    transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.32s cubic-bezier(0.16, 1, 0.3, 1),
                background-color 0.3s ease,
                box-shadow 0.3s ease;
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    will-change: transform, opacity;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.main-header.is-scrolled {
    background-color: rgba(6, 6, 10, 0.95) !important;
    border-bottom-color: rgba(255, 210, 63, 0.25) !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.9), 0 0 25px rgba(255, 210, 63, 0.12) !important;
}

.main-header.header--hidden {
    transform: translateY(-110%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.main-header .container {
    max-width: 1440px;
    padding: 0 24px;
}

.main-header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 84px;
    gap: 16px;
}

.meeways-logo {
    flex-shrink: 0;
}

.desktop-nav {
    display: flex;
    align-items: center;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Meeways. Golden-Ratio Luxury Brand Identity */
.meeways-logo, .drawer-brand {
    display: flex;
    align-items: center;
    gap: 13px;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.logo-symbol {
    position: relative;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s ease;
    filter: drop-shadow(0 0 16px rgba(255, 210, 63, 0.65));
}

.logo-icon-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.logo-orbit-ring {
    transform-origin: 18px 18px;
    animation: logoOrbitSpin 7s linear infinite;
}

.logo-prism-poly {
    transition: all 0.35s ease;
    transform-origin: 18px 18px;
    animation: prismBreathe 3.5s ease-in-out infinite alternate;
}

.logo-prism-core {
    transform-origin: 18px 18px;
    animation: logoCorePulse 2.2s ease-in-out infinite alternate;
}

.logo-play-arrow {
    transform-origin: 18px 18px;
    transition: transform 0.25s ease;
}

@keyframes logoOrbitSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes prismBreathe {
    0% { stroke: #ffd23f; fill: rgba(255, 210, 63, 0.14); transform: scale(1); }
    100% { stroke: #ffffff; fill: rgba(255, 210, 63, 0.3); transform: scale(1.05); }
}

@keyframes logoCorePulse {
    0% { filter: drop-shadow(0 0 4px #ffd23f); transform: scale(0.92); opacity: 0.85; }
    100% { filter: drop-shadow(0 0 12px #ffffff) drop-shadow(0 0 20px #ffd23f); transform: scale(1.15); opacity: 1; }
}

.brand-name {
    font-family: 'Aclonica', cursive, sans-serif !important;
    font-size: 24px;
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: baseline;
    line-height: 1;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.brand-dot {
    font-family: var(--font-logo);
    color: var(--accent-yellow);
    font-size: 36px;
    line-height: 0.4;
    margin-left: 2px;
    text-shadow: 0 0 14px rgba(255, 210, 63, 1), 0 0 24px rgba(255, 210, 63, 0.7);
    display: inline-block;
    animation: dotBeaconPulse 2s ease-in-out infinite alternate;
}

@keyframes dotBeaconPulse {
    0% { transform: scale(0.95); text-shadow: 0 0 8px rgba(255, 210, 63, 0.7); opacity: 0.9; }
    100% { transform: scale(1.22); text-shadow: 0 0 18px rgba(255, 210, 63, 1), 0 0 30px #ffffff; opacity: 1; }
}

/* Interactive Magnetic Hover Physics */
.meeways-logo:hover, .drawer-brand:hover {
    transform: scale(1.04);
}

.meeways-logo:hover .logo-symbol, .drawer-brand:hover .logo-symbol {
    transform: scale(1.12) rotate(6deg);
    filter: drop-shadow(0 0 26px rgba(255, 210, 63, 0.95));
}

.meeways-logo:hover .brand-name, .drawer-brand:hover .brand-name {
    font-family: 'Aclonica', cursive, sans-serif !important;
    font-size: 24px;
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: baseline;
    line-height: 1;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Navigation Links with Kinetic Magnetic Gliding Pill */
.desktop-nav {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    flex-shrink: 0;
}

.nav-gliding-pill {
    position: absolute;
    top: 50%;
    left: 0;
    height: 36px;
    width: 0;
    border-radius: var(--radius-full);
    background: rgba(255, 210, 63, 0.1);
    border: 1px solid rgba(255, 210, 63, 0.3);
    transform: translateY(-50%) translate3d(0, 0, 0);
    pointer-events: none;
    opacity: 0;
    transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1), width 0.26s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
    box-shadow: 0 0 20px rgba(255, 210, 63, 0.18);
    z-index: 0;
}

.nav-gliding-pill.is-active {
    opacity: 1;
}

.nav-list {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 4px;
    list-style: none;
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0;
}

.nav-item {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    flex-shrink: 0;
}

.nav-link {
    font-family: var(--font-heading);
    font-size: 13.5px;
    font-weight: 600;
    color: #cfcfe0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    border-radius: var(--radius-full);
    transition: color 0.22s ease, transform 0.2s ease;
    text-decoration: none;
    white-space: nowrap !important;
    line-height: 1;
    flex-shrink: 0;
}

.nav-link:hover, .nav-item:hover > .nav-link {
    color: var(--accent-yellow);
}

.nav-link--highlight {
    color: var(--accent-yellow) !important;
    font-weight: 700;
}

.nav-arrow {
    font-size: 11px;
    font-weight: 800;
    color: #ffd23f !important;
    display: inline-block;
    vertical-align: middle;
    margin-left: 4px;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease, filter 0.2s ease;
    filter: drop-shadow(0 0 5px rgba(255, 210, 63, 0.7));
}

.nav-item:hover .nav-arrow {
    transform: rotate(180deg) scale(1.2);
    color: #ffffff !important;
    filter: drop-shadow(0 0 8px #ffffff);
}

/* Standard Dropdown */
.dropdown-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 280px;
    background: rgba(12, 12, 16, 0.98) !important;
    border: 1px solid rgba(255, 210, 63, 0.4) !important;
    border-radius: 14px;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.95), 0 0 35px rgba(255, 210, 63, 0.22) !important;
    padding: 10px;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 10px, 0);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1000;
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
}

.dropdown-panel::before {
    content: '';
    position: absolute;
    top: -16px;
    left: 0;
    right: 0;
    height: 16px;
    background: transparent;
}

.nav-item.has-dropdown:hover .dropdown-panel {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
}

.dropdown-panel li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    font-size: 13px;
    color: #e2e8f0;
    border-radius: 10px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.22s ease;
}

.dropdown-panel li a:hover {
    background: rgba(255, 210, 63, 0.14);
    color: var(--accent-yellow);
    transform: translateX(4px);
}

/* Luxury Service & Work Dropdown Icon Styling */
.drop-icon,
.service-dropdown-luxury .drop-icon,
.work-dropdown-luxury .drop-icon {
    font-size: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    background: radial-gradient(circle at 35% 35%, rgba(255, 210, 63, 0.28) 0%, rgba(255, 210, 63, 0.09) 100%) !important;
    border: 1.5px solid rgba(255, 210, 63, 0.55) !important;
    box-shadow: 0 0 14px rgba(255, 210, 63, 0.35), inset 0 0 8px rgba(255, 210, 63, 0.2) !important;
    flex-shrink: 0 !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.drop-item:hover .drop-icon,
.dropdown-panel li a:hover .drop-icon {
    transform: scale(1.16) rotate(4deg) !important;
    border-color: #ffd23f !important;
    box-shadow: 0 0 22px rgba(255, 210, 63, 0.7), inset 0 0 12px rgba(255, 210, 63, 0.35) !important;
    background: radial-gradient(circle at 35% 35%, rgba(255, 210, 63, 0.45) 0%, rgba(255, 210, 63, 0.18) 100%) !important;
}

.service-dropdown-luxury .drop-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}

.service-dropdown-luxury .drop-text strong {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
    transition: color 0.2s ease;
}

.service-dropdown-luxury .drop-item:hover .drop-text strong {
    color: var(--accent-yellow);
}

.service-dropdown-luxury .drop-text small {
    font-size: 11px;
    color: #8c8ea0;
    line-height: 1.2;
    font-weight: 400;
}

/* Luxury Dark Mega Menus - Perfectly Centered Glass Capsule with 14px Floating Clearance */
.nav-item.has-megamenu {
    position: static;
}

.megamenu-panel {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translate3d(-50%, 10px, 0);
    width: min(1240px, calc(100vw - 48px));
    max-width: 1240px;
    background: rgba(12, 12, 18, 0.98);
    color: #fff;
    box-shadow: 0 35px 90px rgba(0, 0, 0, 0.95), 0 0 50px rgba(255, 210, 63, 0.12);
    border: 1px solid rgba(255, 210, 63, 0.35);
    border-radius: var(--radius-lg);
    opacity: 0;
    visibility: hidden;
    transition: all 0.26s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1000;
    backdrop-filter: blur(32px) saturate(190%);
    -webkit-backdrop-filter: blur(32px) saturate(190%);
    overflow: hidden;
}

.megamenu-panel::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    height: 20px;
    background: transparent;
}

.nav-item.has-megamenu:hover .megamenu-panel {
    opacity: 1;
    visibility: visible;
    transform: translate3d(-50%, 0, 0);
}

.dsm-mega {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    padding: 30px 36px 22px;
    width: 100%;
    box-sizing: border-box;
}

.dsm-mega-col h4 {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent-yellow);
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 210, 63, 0.25);
    white-space: nowrap;
}

.dsm-mega-head {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    width: 100%;
    padding: 6px 0;
    font-size: 13px;
    font-weight: 500;
    color: #cfcfd8;
    cursor: pointer;
    transition: var(--transition);
    line-height: 1.35;
}

.dsm-mega-head:hover {
    color: var(--accent-yellow);
    transform: translateX(4px);
}

.dsm-mega-head--link {
    display: inline-flex;
}

.tag-badge {
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--text-dark);
    background: var(--accent-yellow);
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 4px;
    white-space: nowrap;
    display: inline-block;
    flex-shrink: 0;
}

.badge-hot {
    color: #08080a;
    background: #00e676;
    font-weight: 800;
}

.dsm-mega-foot, .dsm-mind-foot {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 14px;
    font-size: 13px;
    color: #a0a0ab;
}

.dsm-mega-foot-cta, .dsm-mind-foot-cta {
    color: var(--accent-yellow);
    font-weight: 700;
    transition: var(--transition);
}

.dsm-mega-foot-cta:hover, .dsm-mind-foot-cta:hover {
    color: #fff;
    transform: translateX(3px);
}

.dsm-mega-foot-cta, .dsm-mind-foot-cta {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dark);
    background: var(--accent-yellow);
    padding: 9px 20px;
    border-radius: var(--radius-full);
    transition: var(--transition);
}

.dsm-mega-foot-cta:hover, .dsm-mind-foot-cta:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-gold);
}

/* Industry Mega Menu Grid */
.dsm-mind {
    display: grid;
    grid-template-columns: repeat(3, 1fr) 280px;
    gap: 28px;
    padding: 36px 40px 24px;
    max-width: 1320px;
    margin: 0 auto;
}

.dsm-mind-head {
    display: block;
    width: 100%;
    padding: 8px 0;
    font-size: 13.5px;
    font-weight: 600;
    color: #1a1a1a;
}

.dsm-mind-head:hover {
    color: var(--accent-gold-dark);
    transform: translateX(3px);
}

.dsm-mind-tag {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 7px;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    color: #8a6800;
    background: #fff4cc;
    border: 1px solid var(--accent-yellow);
    border-radius: 12px;
}

.dsm-mind-panel {
    position: relative;
    border-radius: var(--radius-md);
    background: #0d0d0d;
    color: #fff;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

.dsm-mind-panel::before {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(255, 210, 63, 0.2), transparent 70%);
    pointer-events: none;
}

.dsm-mind-panel-icon {
    width: 32px; height: 32px;
    color: var(--accent-yellow);
}

.dsm-mind-panel-title {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin: 12px 0 6px;
}

.dsm-mind-panel-sub {
    font-size: 12px;
    color: #b8b8b8;
    line-height: 1.5;
    margin-bottom: 14px;
}

.dsm-mind-panel-stats {
    display: flex;
    gap: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 14px;
}

.dsm-mind-panel-stat b {
    display: block;
    font-size: 17px;
    font-weight: 800;
    color: var(--accent-yellow);
}

.dsm-mind-panel-stat span {
    font-size: 10px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Header Right Area */
.header-right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.header-socials {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.header-socials a {
    color: #cfcfcf;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-socials a:hover {
    background: var(--accent-yellow);
    color: var(--text-dark);
    transform: translateY(-2px);
}

.btn-coffee, .btn-header-cta {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dark) !important;
    background: var(--accent-yellow);
    padding: 9px 18px;
    border-radius: var(--radius-full);
    box-shadow: 0 4px 18px rgba(255, 210, 63, 0.35);
    transition: all 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
    overflow: hidden;
    white-space: nowrap !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
    text-decoration: none;
    line-height: 1.2;
}

.btn-coffee::after, .btn-header-cta::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-25deg);
    animation: buttonShimmer 4s infinite ease-in-out;
}

.btn-coffee:hover, .btn-header-cta:hover {
    background: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 210, 63, 0.5);
}

.hamburger-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 38px;
    height: 38px;
    padding: 6px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 210, 63, 0.25);
    transition: var(--transition);
}

.hamburger-btn:hover {
    background: rgba(255, 210, 63, 0.15);
    border-color: var(--accent-yellow);
}

.hamburger-btn span {
    width: 18px;
    height: 2px;
    background: #ffffff;
    border-radius: 2px;
    transition: transform 0.22s ease, opacity 0.22s ease;
}

.hamburger-btn span:nth-child(2) {
    background: var(--accent-yellow);
    width: 13px;
    margin-left: auto;
}

.mobile-header-cta {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 13px;
    font-family: var(--font-heading);
    font-size: 11.5px;
    font-weight: 700;
    color: #08080a;
    background: var(--accent-yellow);
    border-radius: 999px;
    box-shadow: 0 2px 12px rgba(255, 210, 63, 0.35);
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.mobile-header-cta:hover, .mobile-header-cta:active {
    background: #ffffff;
    transform: scale(0.96);
}

/* ==========================================================================
   2. MOBILE OFF-CANVAS LUXURY DRAWER (Future-Proof Glass Console)
   ========================================================================== */
.mobile-drawer {
    position: fixed;
    inset: 0;
    z-index: 100000;
    pointer-events: none;
    visibility: hidden;
    transition: visibility 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-drawer.is-open {
    pointer-events: auto;
    visibility: visible;
}

.mobile-drawer__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    opacity: 0;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-drawer.is-open .mobile-drawer__overlay {
    opacity: 1;
}

.mobile-drawer__content {
    position: absolute;
    top: 0;
    right: 0;
    width: 90%;
    max-width: 400px;
    height: 100%;
    background: linear-gradient(165deg, rgba(14, 14, 18, 0.97) 0%, rgba(8, 8, 12, 0.99) 100%);
    border-left: 1px solid rgba(255, 210, 63, 0.3);
    backdrop-filter: blur(32px) saturate(190%);
    -webkit-backdrop-filter: blur(32px) saturate(190%);
    padding: 22px 18px 90px;
    overflow-y: auto;
    transform: translate3d(100%, 0, 0);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: -25px 0 70px rgba(0, 0, 0, 0.95), inset 1px 0 0 rgba(255, 255, 255, 0.1);
    box-sizing: border-box;
    scrollbar-width: none;
}

.mobile-drawer__content::-webkit-scrollbar {
    display: none;
}

.mobile-drawer.is-open .mobile-drawer__content {
    transform: translate3d(0, 0, 0);
}

.drawer-glow-orb {
    position: absolute;
    top: -50px;
    right: -50px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(255, 210, 63, 0.16) 0%, transparent 70%);
    filter: blur(50px);
    pointer-events: none;
    z-index: 0;
}

/* Drawer Header */
.mobile-drawer__head {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.drawer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.drawer-logo-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--accent-yellow);
    color: var(--text-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 14px rgba(255, 210, 63, 0.4);
}

.drawer-logo-icon svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.drawer-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #dfdfe6;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
}

.drawer-close:hover, .drawer-close:active {
    background: rgba(255, 210, 63, 0.2);
    border-color: var(--accent-yellow);
    color: var(--accent-yellow);
    transform: rotate(90deg) scale(1.05);
}

/* Quick Action - High-End Luxury Cyber Glass Capsule */
.mobile-drawer__actions {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
}

.btn-drawer-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    min-height: 46px;
    border-radius: var(--radius-full);
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    width: 100%;
}

.btn-drawer-svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.btn-drawer-book--full {
    background: linear-gradient(135deg, #ffd23f 0%, #ffbe0b 50%, #f59e0b 100%) !important;
    color: #08080a !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 4px 20px rgba(255, 210, 63, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

.btn-drawer-book--full .btn-drawer-svg {
    stroke: #08080a !important;
}

.btn-drawer-book--full .btn-arrow-icon {
    font-size: 15px;
    transition: transform 0.25s ease;
}

.btn-drawer-book--full:hover, .btn-drawer-book--full:active {
    background: #ffffff !important;
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 8px 26px rgba(255, 210, 63, 0.6) !important;
}

.btn-drawer-book--full:hover .btn-arrow-icon {
    transform: translateX(4px);
}

/* Navigation List */
.drawer-nav-section-label {
    position: relative;
    z-index: 1;
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #7a7a88;
    margin-top: 8px;
    margin-bottom: 2px;
    padding-left: 4px;
}

.mobile-nav-list {
    position: relative;
    z-index: 1;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0;
    margin: 6px 0 0 0;
}

.mobile-drawer.is-open .mobile-nav-list > li {
    animation: drawerItemIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.mobile-drawer.is-open .mobile-nav-list > li:nth-child(1) { animation-delay: 0.06s; }
.mobile-drawer.is-open .mobile-nav-list > li:nth-child(2) { animation-delay: 0.11s; }
.mobile-drawer.is-open .mobile-nav-list > li:nth-child(3) { animation-delay: 0.16s; }
.mobile-drawer.is-open .mobile-nav-list > li:nth-child(4) { animation-delay: 0.21s; }
.mobile-drawer.is-open .mobile-nav-list > li:nth-child(5) { animation-delay: 0.26s; }
.mobile-drawer.is-open .mobile-nav-list > li:nth-child(6) { animation-delay: 0.31s; }
.mobile-drawer.is-open .mobile-nav-list > li:nth-child(7) { animation-delay: 0.36s; }

@keyframes drawerItemIn {
    0% {
        opacity: 0;
        transform: translate3d(24px, 0, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.mobile-nav-link, .mobile-dropdown-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 11px 13px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 13px;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.mobile-nav-link::before, .mobile-dropdown-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: var(--accent-yellow);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.nav-item-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-icon-badge {
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: rgba(255, 210, 63, 0.08);
    border: 1px solid rgba(255, 210, 63, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
    transition: all 0.25s ease;
}

.nav-item-title {
    font-family: var(--font-heading);
    font-size: 13.5px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
    transition: color 0.2s ease;
}

.nav-arrow-pill, .d-arrow-pill {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #7a7a88;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
}

.mobile-nav-link:hover, .mobile-nav-link:active,
.mobile-dropdown-btn:hover, .mobile-dropdown-btn:active {
    background: linear-gradient(90deg, rgba(255, 210, 63, 0.14) 0%, rgba(255, 255, 255, 0.03) 100%);
    border-color: rgba(255, 210, 63, 0.45);
    transform: translateX(4px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 210, 63, 0.12);
}

.mobile-nav-link:hover::before, .mobile-nav-link:active::before,
.mobile-dropdown-btn:hover::before, .mobile-dropdown-btn:active::before {
    opacity: 1;
}

.mobile-nav-link:hover .nav-icon-badge, .mobile-nav-link:active .nav-icon-badge,
.mobile-dropdown-btn:hover .nav-icon-badge, .mobile-dropdown-btn:active .nav-icon-badge {
    background: rgba(255, 210, 63, 0.2);
    border-color: var(--accent-yellow);
    transform: scale(1.06);
}

.mobile-nav-link:hover .nav-item-title, .mobile-nav-link:active .nav-item-title,
.mobile-dropdown-btn:hover .nav-item-title, .mobile-dropdown-btn:active .nav-item-title {
    color: var(--accent-yellow);
}

.mobile-nav-link:hover .nav-arrow-pill, .mobile-nav-link:active .nav-arrow-pill,
.mobile-dropdown-btn:hover .d-arrow-pill, .mobile-dropdown-btn:active .d-arrow-pill {
    background: var(--accent-yellow);
    border-color: var(--accent-yellow);
    color: #08080a;
    transform: translateX(2px);
    box-shadow: 0 0 10px rgba(255, 210, 63, 0.5);
}

.mobile-nav-dropdown.active .d-arrow-pill {
    transform: rotate(180deg);
    background: var(--accent-yellow);
    color: #08080a;
}

.mobile-nav-dropdown.active .mobile-dropdown-content {
    display: flex;
}

.mobile-dropdown-content {
    display: none;
    padding: 6px 0 6px 16px;
    margin: 4px 0 6px 14px;
    border-left: 2px solid rgba(255, 210, 63, 0.4);
    flex-direction: column;
    gap: 4px;
}

.sub-nav-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 10px;
    font-size: 12.5px;
    font-weight: 500;
    color: #b0b0b8;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.sub-arrow {
    font-size: 12px;
    color: #666;
    opacity: 0;
    transition: all 0.2s ease;
}

.sub-nav-item:hover, .sub-nav-item:active {
    color: var(--accent-yellow);
    background: rgba(255, 210, 63, 0.08);
    padding-left: 14px;
}

.sub-nav-item:hover .sub-arrow, .sub-nav-item:active .sub-arrow {
    opacity: 1;
    color: var(--accent-yellow);
}

/* Producer Hotline Console Card */
.mobile-drawer__footer {
    position: relative;
    z-index: 1;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.drawer-producer-card {
    background: linear-gradient(135deg, rgba(24, 24, 32, 0.9) 0%, rgba(14, 14, 18, 0.95) 100%);
    border: 1.5px solid rgba(255, 210, 63, 0.3);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

.drawer-producer-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: 700;
    color: #cfcfe0;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
}

.drawer-producer-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #00e676;
    box-shadow: 0 0 8px #00e676;
    animation: alertPulse 1.4s ease-in-out infinite;
    flex-shrink: 0;
}

.drawer-phone-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: var(--accent-yellow);
    color: #08080a !important;
    font-family: var(--font-heading);
    font-size: clamp(11.5px, 2.9vw, 12.8px);
    font-weight: 800;
    padding: 10px 14px;
    border-radius: var(--radius-full);
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(255, 210, 63, 0.35);
    transition: all 0.22s ease;
    white-space: nowrap;
}

.drawer-phone-btn:hover, .drawer-phone-btn:active {
    background: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(255, 255, 255, 0.4);
}

/* ==========================================================================
   3. HERO SECTION (Interactive Luxury Multi-Slide Carousel)
   ========================================================================== */
.hero-section {
    position: relative;
    padding: 70px 0 60px;
    background: #060608;
    overflow: hidden;
}

.hero-glow-bg {
    position: absolute;
    top: -120px; left: 50%;
    transform: translateX(-50%);
    width: 1000px; height: 500px;
    background: radial-gradient(ellipse at 50% 30%, rgba(255, 210, 63, 0.12) 0%, rgba(255, 170, 0, 0.04) 45%, transparent 70%);
    filter: blur(50px);
    pointer-events: none;
    animation: auroraBreathe 7s ease-in-out infinite alternate;
}

/* Zero-Layout-Shift Rock-Solid CSS Grid Stacking */
.hero-slider-track {
    display: grid !important;
    grid-template-columns: 100% !important;
    grid-template-rows: auto !important;
    align-items: start !important;
    position: relative;
    width: 100%;
    min-height: 520px;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

.hero-slide {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, 14px, 0);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.6s ease;
    z-index: 1;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

.hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
    z-index: 2;
}

/* Kinetic Slide-Up & Optical Reveal for Active Hero Slide Elements */
.hero-slide.is-active .hero-badge {
    animation: heroBadgeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both;
}

.hero-slide.is-active .hero-title {
    animation: heroTitleIn 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.16s both;
}

.hero-slide.is-active .hero-lead {
    animation: heroLeadIn 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.28s both;
}

.hero-slide.is-active .hero-actions {
    animation: heroActionsIn 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.38s both;
}

.hero-slide.is-active .hero-trust-bar {
    animation: heroTrustIn 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.48s both;
}

.hero-slide.is-active .hero-video-card {
    animation: heroCardIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

@keyframes heroBadgeIn {
    0% {
        opacity: 0;
        transform: translate3d(0, 18px, 0) scale(0.92);
        filter: blur(4px);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
    }
}

@keyframes heroTitleIn {
    0% {
        opacity: 0;
        transform: translate3d(0, 40px, 0) skewY(1.4deg);
        filter: blur(10px);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) skewY(0deg);
        filter: blur(0);
    }
}

@keyframes heroLeadIn {
    0% {
        opacity: 0;
        transform: translate3d(0, 26px, 0);
        filter: blur(5px);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}

@keyframes heroActionsIn {
    0% {
        opacity: 0;
        transform: translate3d(0, 22px, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes heroTrustIn {
    0% {
        opacity: 0;
        transform: translate3d(0, 16px, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes heroCardIn {
    0% {
        opacity: 0;
        transform: translate3d(30px, 20px, 0) scale(0.94);
        filter: blur(12px);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
    }
}

.hero-split {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 44px;
    align-items: center;
}

/* Slide Navigation & Progress Bar Console */
.hero-carousel-nav {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 48px;
    padding-top: 10px;
}

.hero-nav-arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(24, 24, 32, 0.85);
    border: 1.5px solid rgba(255, 210, 63, 0.3);
    color: var(--accent-yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6);
    flex-shrink: 0;
}

.hero-nav-arrow:hover {
    background: var(--accent-yellow);
    color: #08080a;
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(255, 210, 63, 0.5);
}

.hero-nav-tabs {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(16, 16, 22, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 6px 10px;
    border-radius: var(--radius-full);
    backdrop-filter: blur(16px);
}

.hero-nav-tab {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    background: transparent;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: left;
    position: relative;
}

.hero-nav-tab .tab-idx {
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: 800;
    color: #7a7a88;
    letter-spacing: 1px;
}

.hero-nav-tab .tab-title {
    font-family: var(--font-heading);
    font-size: 12.5px;
    font-weight: 700;
    color: #b0b0bc;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.tab-title-short {
    display: none;
}

.hero-nav-tab .tab-progress-bar {
    display: none;
}

.hero-nav-tab.is-active {
    background: linear-gradient(135deg, #ffd23f 0%, #ffc107 100%);
    box-shadow: 0 4px 18px rgba(255, 210, 63, 0.45);
    transform: translateY(-1px);
}

.hero-nav-tab.is-active .tab-idx {
    color: #08080a;
    font-weight: 900;
}

.hero-nav-tab.is-active .tab-title {
    color: #08080a;
    font-weight: 900;
}

.hero-nav-tab:hover:not(.is-active) .tab-title {
    color: var(--accent-yellow);
}

/* Minimalist Luxury Swipe Pagination Dots (Mobile Only) */
.hero-mobile-dots {
    display: none;
}

@media (max-width: 768px) {
    /* Prevent all horizontal shifting and overflow on mobile */
    .hero-section {
        padding: 40px 0 28px !important;
        overflow-x: hidden !important;
        width: 100% !important;
    }

    .hero-container,
    .hero-section .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* Hide the right-side visual card on mobile across all 3 slides */
    .hero-right {
        display: none !important;
    }

    .hero-slider-track {
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        overflow: hidden !important;
    }

    .hero-slide {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .hero-split {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 0 !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    .hero-left {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        margin: 0 auto !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .hero-badge {
        margin: 0 auto 14px !important;
        font-size: 11px !important;
    }

    .hero-title {
        text-align: center !important;
        font-size: 24px !important;
        line-height: 1.22 !important;
        letter-spacing: -0.4px !important;
        margin: 0 auto 14px !important;
        width: 100% !important;
        max-width: 320px !important;
        box-sizing: border-box !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }

    .hero-lead {
        text-align: center !important;
        font-size: 13.5px !important;
        line-height: 1.58 !important;
        margin: 0 auto 20px !important;
        width: 100% !important;
        max-width: 310px !important;
        box-sizing: border-box !important;
        word-wrap: break-word !important;
    }

    .hero-actions {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        margin: 0 auto 16px !important;
        box-sizing: border-box !important;
    }

    .hero-actions a,
    .hero-actions button {
        width: 100% !important;
        max-width: 290px !important;
        justify-content: center !important;
        text-align: center !important;
        box-sizing: border-box !important;
        padding: 13px 20px !important;
        font-size: 14px !important;
    }

    /* Hide social proof rating bar on mobile */
    .hero-trust-pill {
        display: none !important;
    }

    /* Completely hide the bulky tabs & arrows console on mobile */
    .desktop-only-nav {
        display: none !important;
    }

    /* Show sleek glowing pagination dots */
    .hero-mobile-dots {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        margin-top: 18px !important;
        padding: 6px 0 !important;
    }

    .mobile-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.22);
        border: none;
        padding: 0;
        cursor: pointer;
        transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .mobile-dot.is-active {
        width: 26px;
        height: 8px;
        border-radius: 20px;
        background: var(--accent-yellow);
        box-shadow: 0 0 14px rgba(255, 210, 63, 0.7);
    }
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--accent-yellow);
    background: linear-gradient(135deg, rgba(255, 210, 63, 0.15) 0%, rgba(255, 210, 63, 0.05) 100%);
    border: 1px solid rgba(255, 210, 63, 0.4);
    padding: 6px 16px;
    border-radius: var(--radius-full);
    margin-bottom: 20px;
    box-shadow: 0 4px 18px rgba(255, 210, 63, 0.15);
    backdrop-filter: blur(8px);
}

.badge-cyan {
    color: #00e5ff;
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.15) 0%, rgba(0, 229, 255, 0.05) 100%);
    border-color: rgba(0, 229, 255, 0.4);
    box-shadow: 0 4px 18px rgba(0, 229, 255, 0.15);
}

.badge-amber {
    color: #ff9f43;
    background: linear-gradient(135deg, rgba(255, 159, 67, 0.15) 0%, rgba(255, 159, 67, 0.05) 100%);
    border-color: rgba(255, 159, 67, 0.4);
    box-shadow: 0 4px 18px rgba(255, 159, 67, 0.15);
}

.pulse-dot {
    width: 7.5px; height: 7.5px;
    background: #00e676;
    border-radius: 50%;
    box-shadow: 0 0 10px #00e676;
    animation: pulseDot 1.8s infinite;
}

.dot-cyan {
    background: #00e5ff;
    box-shadow: 0 0 10px #00e5ff;
}

.dot-amber {
    background: #ff9f43;
    box-shadow: 0 0 10px #ff9f43;
}

@keyframes pulseDot {
    0% { transform: scale(0.9); opacity: 0.8; }
    50% { transform: scale(1.4); opacity: 1; }
    100% { transform: scale(0.9); opacity: 0.8; }
}

.hero-title {
    font-family: var(--font-heading);
    font-size: clamp(32px, 5.2vw, 56px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -1.2px;
    color: #fff;
    margin-bottom: 22px;
}

.text-gradient {
    background: linear-gradient(135deg, #ffffff 0%, #fff2b2 25%, #ffd23f 50%, #ffb81c 75%, #ffffff 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 18px rgba(255, 210, 63, 0.28));
    animation: textGradientSheen 6s ease-in-out infinite alternate;
}

.text-gradient-cyan {
    background: linear-gradient(135deg, #ffffff 0%, #d4f8ff 25%, #00e5ff 50%, #0088ff 75%, #ffffff 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 18px rgba(0, 229, 255, 0.35));
    animation: textGradientSheen 6s ease-in-out infinite alternate;
}

.text-gradient-amber {
    background: linear-gradient(135deg, #ffffff 0%, #ffeaa7 25%, #ff9f43 50%, #ee5253 75%, #ffffff 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 18px rgba(255, 159, 67, 0.35));
    animation: textGradientSheen 6s ease-in-out infinite alternate;
}

@keyframes textGradientSheen {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Luxury Typewriter Blinking Neon Cursor */
.hero-type-cursor {
    display: inline-block;
    width: 3.5px;
    height: 0.85em;
    margin-left: 4px;
    vertical-align: -0.04em;
    border-radius: 2px;
    animation: typeCursorBlink 0.75s ease-in-out infinite alternate;
}

.hero-type-cursor.gold {
    background: #ffd23f;
    box-shadow: 0 0 10px #ffd23f, 0 0 22px rgba(255, 210, 63, 0.7);
}

.hero-type-cursor.cyan {
    background: #00e5ff;
    box-shadow: 0 0 10px #00e5ff, 0 0 22px rgba(0, 229, 255, 0.7);
}

.hero-type-cursor.amber {
    background: #ff9f43;
    box-shadow: 0 0 10px #ff9f43, 0 0 22px rgba(255, 159, 67, 0.7);
}

@keyframes typeCursorBlink {
    0% { opacity: 1; transform: scaleY(1); }
    50% { opacity: 0.15; transform: scaleY(0.9); }
    100% { opacity: 1; transform: scaleY(1); }
}

.hero-lead {
    font-size: 16px;
    line-height: 1.7;
    color: #b8b8c2;
    margin-bottom: 34px;
    max-width: 580px;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 34px;
    flex-wrap: wrap;
}

.btn-hero-primary {
    position: relative;
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 700;
    color: var(--text-dark);
    background: var(--accent-yellow);
    padding: 15px 32px;
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    transition: var(--transition);
    overflow: hidden;
    box-shadow: 0 12px 32px -6px rgba(255, 210, 63, 0.45);
}

.btn-cyan {
    background: linear-gradient(135deg, #00f0ff 0%, #00a8ff 100%);
    color: #08080a;
    box-shadow: 0 12px 32px -6px rgba(0, 229, 255, 0.45);
}

.btn-amber {
    background: linear-gradient(135deg, #ffb142 0%, #ff5252 100%);
    color: #08080a;
    box-shadow: 0 12px 32px -6px rgba(255, 159, 67, 0.45);
}

/* Liquid Shimmer Sweep */
.btn-hero-primary::after {
    content: "";
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-20deg);
    animation: buttonShimmer 4s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

@keyframes buttonShimmer {
    0% { left: -100%; }
    30% { left: 200%; }
    100% { left: 200%; }
}

.btn-hero-primary:hover {
    background: var(--bg-white);
    color: #08080a;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 16px 40px rgba(255, 255, 255, 0.4);
}

.btn-hero-watch {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-heading);
    font-size: 14.5px;
    font-weight: 600;
    color: #fff;
    padding: 12px 20px;
    min-height: 48px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-dark);
    background: rgba(255, 255, 255, 0.04);
    transition: var(--transition);
}

.btn-hero-watch:hover {
    border-color: var(--accent-yellow);
    background: rgba(255, 210, 63, 0.1);
    transform: translateY(-2px);
}

.btn-watch-cyan:hover {
    border-color: #00e5ff;
    background: rgba(0, 229, 255, 0.1);
}

.btn-watch-amber:hover {
    border-color: #ff9f43;
    background: rgba(255, 159, 67, 0.1);
}

.play-circle {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--accent-yellow);
    color: var(--text-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.circle-cyan {
    background: linear-gradient(135deg, #00e5ff, #0088ff);
    color: #08080a;
    font-weight: 800;
}

.circle-amber {
    background: #ff9f43;
    color: #08080a;
}

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

/* Luxury Floating Trust & Social Proof Pill Console */
.hero-trust-pill {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(18, 18, 24, 0.8);
    border: 1px solid rgba(255, 210, 63, 0.28);
    border-radius: var(--radius-full);
    padding: 8px 18px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: all 0.25s ease;
    margin-top: 4px;
}

.hero-trust-pill:hover {
    border-color: var(--accent-yellow);
    background: rgba(24, 24, 32, 0.95);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7), 0 0 20px rgba(255, 210, 63, 0.2);
}

.trust-stars-gold {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}

.trust-stars-gold svg {
    width: 13.5px;
    height: 13.5px;
    fill: #ffd23f;
    filter: drop-shadow(0 0 5px rgba(255, 210, 63, 0.7));
}

.trust-score-badge {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 800;
    color: #ffd23f;
    background: rgba(255, 210, 63, 0.12);
    border: 1px solid rgba(255, 210, 63, 0.3);
    padding: 3px 9px;
    border-radius: var(--radius-full);
    letter-spacing: 0.5px;
    white-space: nowrap;
    flex-shrink: 0;
}

.trust-sep {
    color: rgba(255, 210, 63, 0.6);
    font-size: 9px;
    flex-shrink: 0;
}

.trust-pill-text {
    font-size: 12.5px;
    color: #b0b0bc;
    margin: 0;
    white-space: nowrap;
}

.trust-pill-text strong {
    color: #ffffff;
    font-weight: 700;
}



/* 4K Hero Video Showreel Card (Luxury Cinema Standard) */
.hero-video-card {
    position: relative;
    border-radius: var(--radius-lg);
    background: #101014;
    border: 1px solid rgba(255, 210, 63, 0.35);
    overflow: hidden;
    box-shadow: var(--shadow-card), 0 0 50px rgba(255, 210, 63, 0.18);
    cursor: pointer;
    transition: var(--transition);
}

.hero-video-card:hover {
    transform: translateY(-6px) scale(1.015);
    border-color: var(--accent-yellow);
    box-shadow: var(--shadow-card), 0 0 70px rgba(255, 210, 63, 0.35);
}

.card-theme-cyan {
    border-color: rgba(0, 229, 255, 0.35);
    box-shadow: var(--shadow-card), 0 0 50px rgba(0, 229, 255, 0.18);
}

.card-theme-cyan:hover {
    border-color: #00e5ff;
    box-shadow: var(--shadow-card), 0 0 70px rgba(0, 229, 255, 0.35);
}

.card-theme-amber {
    border-color: rgba(255, 159, 67, 0.35);
    box-shadow: var(--shadow-card), 0 0 50px rgba(255, 159, 67, 0.18);
}

.card-theme-amber:hover {
    border-color: #ff9f43;
    box-shadow: var(--shadow-card), 0 0 70px rgba(255, 159, 67, 0.35);
}

.video-card-inner {
    position: relative;
    width: 100%;
    height: 440px;
    background: radial-gradient(circle at 50% 40%, #1e1e28 0%, #0a0a0d 100%);
    overflow: hidden;
}

/* ==========================================================================
   Hero Visual Cards High-Tech Animated Graphic Layers
   ========================================================================== */

/* Top HUD Bar */
.card-hud-top {
    position: absolute;
    top: 16px;
    left: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 4;
    pointer-events: none;
}

/* Flashing REC Timecode Pill */
.hud-rec-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.8px;
    color: #ffffff;
    background: rgba(14, 14, 18, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 5px 12px;
    border-radius: var(--radius-full);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

.rec-red-dot {
    width: 6.5px;
    height: 6.5px;
    border-radius: 50%;
    background: #ff4757;
    box-shadow: 0 0 8px #ff4757;
    animation: recBlink 1s infinite alternate;
}

@keyframes recBlink {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0.2; transform: scale(0.8); }
}

/* Live Audio Waveform Equalizer (Cinema Dolby Atmos) */
.hud-cinema-audio {
    position: absolute;
    top: 72px;
    left: 20px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(10, 10, 14, 0.88);
    border: 1.5px solid rgba(255, 210, 63, 0.35);
    padding: 6px 13px;
    border-radius: var(--radius-full);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.7), 0 0 15px rgba(255, 210, 63, 0.15);
    animation: floatMetricA 4.5s ease-in-out infinite alternate;
}

.audio-bar {
    width: 3px;
    height: 14px;
    background: var(--accent-yellow);
    border-radius: 2px;
    transform-origin: bottom;
    animation: audioWave 1.2s ease-in-out infinite alternate;
}

.audio-bar.bar-1 { animation-delay: 0.1s; height: 10px; }
.audio-bar.bar-2 { animation-delay: 0.4s; height: 16px; }
.audio-bar.bar-3 { animation-delay: 0.2s; height: 8px; }
.audio-bar.bar-4 { animation-delay: 0.5s; height: 18px; }
.audio-bar.bar-5 { animation-delay: 0.3s; height: 12px; }
.audio-bar.bar-6 { animation-delay: 0.6s; height: 14px; }

@keyframes audioWave {
    0% { transform: scaleY(0.3); }
    100% { transform: scaleY(1.3); }
}

.audio-label {
    font-family: var(--font-heading);
    font-size: 9.5px;
    font-weight: 800;
    color: #dfdfe6;
    letter-spacing: 0.8px;
    margin-left: 6px;
}

/* Browser Header Bar for Web Slide */
.hud-browser-bar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(14, 14, 18, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 5px 12px;
    border-radius: var(--radius-full);
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

.b-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.b-dot.red { background: #ff5f56; }
.b-dot.yellow { background: #ffbd2e; }
.b-dot.green { background: #27c93f; }

.b-url {
    font-family: monospace;
    font-size: 9.5px;
    color: #a0a0b0;
    margin-left: 4px;
    letter-spacing: 0.2px;
}

/* Floating Anti-Gravity Metric Pills (Web & 3D Slides) */
.hud-floating-metric {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(12, 12, 16, 0.88);
    border: 1.5px solid rgba(255, 210, 63, 0.35);
    padding: 8px 14px;
    border-radius: 12px;
    backdrop-filter: blur(14px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7), 0 0 20px rgba(255, 210, 63, 0.15);
    pointer-events: none;
}

.hud-floating-metric.metric-left {
    top: 75px;
    left: 20px;
    animation: floatMetricA 4.5s ease-in-out infinite alternate;
}

.hud-floating-metric.metric-right {
    bottom: 110px;
    right: 20px;
    animation: floatMetricB 5s ease-in-out infinite alternate;
}

@keyframes floatMetricA {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(0, -10px, 0); }
}

@keyframes floatMetricB {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(0, 10px, 0); }
}

.metric-icon {
    font-size: 16px;
}

.metric-info {
    display: flex;
    flex-direction: column;
}

.metric-info strong {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
}

.metric-info small {
    font-size: 9.5px;
    color: #a0a0b0;
    letter-spacing: 0.3px;
}

/* 3D Wireframe Pill */
.hud-wireframe-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.8px;
    color: #ffffff;
    background: rgba(14, 14, 18, 0.85);
    border: 1px solid rgba(255, 210, 63, 0.3);
    padding: 5px 12px;
    border-radius: var(--radius-full);
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

.wireframe-pulse {
    width: 6.5px;
    height: 6.5px;
    border-radius: 50%;
    background: var(--accent-yellow);
    box-shadow: 0 0 10px var(--accent-yellow);
    animation: pulseDot 1.4s infinite;
}

/* 3D Animated Laser Scanner Line */
.hud-laser-scanner {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 210, 63, 0.85) 50%, transparent 100%);
    box-shadow: 0 0 16px rgba(255, 210, 63, 0.9), 0 0 30px rgba(255, 210, 63, 0.4);
    z-index: 3;
    pointer-events: none;
    animation: laserScan 4.5s ease-in-out infinite alternate;
}

@keyframes laserScan {
    0% { top: 12%; opacity: 0.2; }
    50% { opacity: 1; }
    100% { top: 78%; opacity: 0.2; }
}

/* Card Live Telemetry HUD Chip */
.card-live-chip {
    font-family: var(--font-heading);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.8px;
    padding: 5px 12px;
    border-radius: var(--radius-full);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    text-transform: uppercase;
}

.card-live-chip.gold {
    background: rgba(14, 14, 18, 0.85);
    color: #ffd23f;
    border: 1px solid rgba(255, 210, 63, 0.4);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

.hero-poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.video-card-inner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 8, 12, 0.15) 0%, rgba(8, 8, 12, 0.35) 50%, rgba(8, 8, 12, 0.95) 100%);
    pointer-events: none;
}

.hero-video-card:hover .hero-poster {
    transform: scale(1.06);
}

.hero-play-badge {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 80px; height: 80px;
    border-radius: 50%;
    background: rgba(10, 10, 14, 0.88);
    border: 2px solid var(--accent-yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-yellow);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 0 30px rgba(255, 210, 63, 0.4);
    transition: var(--transition);
    z-index: 2;
}

.badge-play-cyan {
    border-color: #00e5ff;
    background: rgba(0, 229, 255, 0.92);
    color: #08080a;
    box-shadow: 0 0 35px rgba(0, 229, 255, 0.6);
}

.badge-play-amber {
    border-color: #ff9f43;
    background: rgba(255, 159, 67, 0.92);
    color: #08080a;
    box-shadow: 0 0 35px rgba(255, 159, 67, 0.6);
}

.hero-play-badge::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 210, 63, 0.4);
    animation: pulseRing 2.4s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

@keyframes pulseRing {
    0% { transform: scale(0.9); opacity: 0.8; }
    50% { transform: scale(1.35); opacity: 0; }
    100% { transform: scale(0.9); opacity: 0.8; }
}

.hero-play-badge svg {
    width: 32px; height: 32px;
    margin-left: 4px;
}

.hero-video-card:hover .hero-play-badge {
    background: var(--accent-yellow);
    color: var(--text-dark);
    transform: translate(-50%, -50%) scale(1.14);
    box-shadow: 0 0 50px rgba(255, 210, 63, 0.8);
}

.hero-card-meta {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 30px 24px;
    z-index: 2;
}

.meta-tag {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--accent-yellow);
    background: rgba(255, 210, 63, 0.12);
    border: 1px solid rgba(255, 210, 63, 0.3);
    padding: 3px 10px;
    border-radius: var(--radius-full);
    letter-spacing: 1.2px;
    margin-bottom: 8px;
}

.tag-cyan {
    color: #00e5ff;
    background: rgba(0, 229, 255, 0.12);
    border-color: rgba(0, 229, 255, 0.35);
}

.tag-amber {
    color: #ff9f43;
    background: rgba(255, 159, 67, 0.12);
    border-color: rgba(255, 159, 67, 0.35);
}

.hero-card-meta h3 {
    font-family: var(--font-heading);
    font-size: 21px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
    letter-spacing: -0.3px;
}

.hero-card-meta span {
    font-size: 13px;
    color: #b0b0b8;
}

/* ==========================================================================
   4. CLIENT & PARTNER TRUST MARQUEE (100% Clean Typography Badges)
   ========================================================================== */
.trust-marquee-section {
    background-color: #0c0c0f;
    padding: 48px 0 40px;
    border-top: 1px solid var(--border-dark);
    border-bottom: 1px solid var(--border-dark);
}

.trust-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 20px;
}

.trust-title {
    font-family: var(--font-heading);
    font-size: 14.5px;
    font-weight: 400;
    line-height: 1.5;
    color: #92929e;
    margin: 0 auto 20px;
    max-width: 600px;
    letter-spacing: 0.2px;
    text-align: center;
}

@media (max-width: 768px) {
    .trust-title {
        font-size: 13px;
        line-height: 1.45;
        padding: 0 16px;
        margin-bottom: 16px;
    }
}

/* 3-Row Dense Multi-Track Marquee Matrix */
.marquee-multi-rows-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
    padding: 8px 0 !important;
    mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%) !important;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%) !important;
}

.marquee-track-row {
    width: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    white-space: nowrap !important;
}

.marquee-track-inner {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 16px !important;
    width: max-content !important;
    will-change: transform !important;
}

.marquee-track-left .marquee-track-inner {
    animation: multiMarqueeLeft 28s linear infinite !important;
}

.marquee-track-right .marquee-track-inner {
    animation: multiMarqueeRight 30s linear infinite !important;
}

.marquee-track-row:hover .marquee-track-inner {
    animation-play-state: paused !important;
}

@keyframes multiMarqueeLeft {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}

@keyframes multiMarqueeRight {
    0% { transform: translate3d(-50%, 0, 0); }
    100% { transform: translate3d(0, 0, 0); }
}

.auth-brand-logo-card {
    flex-shrink: 0 !important;
    height: 44px !important;
    padding: 6px 16px !important;
    background: rgba(14, 16, 26, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
    transition: all 0.25s ease !important;
}

.auth-brand-logo-card:hover {
    border-color: rgba(255, 210, 63, 0.6) !important;
    background: rgba(24, 26, 38, 0.95) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), 0 0 14px rgba(255, 210, 63, 0.25) !important;
}

.auth-brand-logo-card img.client-brand-png {
    height: 24px !important;
    max-width: 110px !important;
    width: auto !important;
    object-fit: contain !important;
    filter: brightness(0.95) contrast(1.05) !important;
    display: block !important;
}

.auth-brand-logo-card svg.client-brand-svg {
    height: 22px !important;
    max-width: 110px !important;
    width: auto !important;
    display: block !important;
}

@media (max-width: 768px) {
    .marquee-multi-rows-wrapper {
        gap: 9px !important;
    }

    .marquee-track-inner {
        gap: 10px !important;
    }

    .marquee-track-left .marquee-track-inner {
        animation-duration: 20s !important;
    }

    .marquee-track-right .marquee-track-inner {
        animation-duration: 22s !important;
    }

    .auth-brand-logo-card {
        height: 38px !important;
        padding: 5px 12px !important;
        border-radius: 10px !important;
    }

    .auth-brand-logo-card img.client-brand-png {
        height: 19px !important;
        max-width: 85px !important;
    }

    .auth-brand-logo-card svg.client-brand-svg {
        height: 18px !important;
        max-width: 85px !important;
    }
}

/* ==========================================================================
   5. INTERACTIVE VIDEO PORTFOLIO & CATEGORY FILTERS
   ========================================================================== */
.portfolio-section {
    background: #08080a;
    padding: 90px 0;
}

.portfolio-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
    margin-bottom: 32px;
}

.portfolio-header__center {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.portfolio-header__center .section-subtitle {
    margin-bottom: 4px;
}

/* ==========================================================================
   5. LUXURY 4K CINEMA PORTFOLIO SHOWCASE & FLOATING SEGMENTED CONSOLE
   ========================================================================== */
.portfolio-filters-wrap {
    display: flex;
    justify-content: center;
    margin: 16px 0 28px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 4px 4px;
}

.portfolio-filters-wrap::-webkit-scrollbar {
    display: none;
}

.portfolio-filters {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(14, 14, 22, 0.85);
    border: 1.5px solid rgba(255, 210, 63, 0.22);
    padding: 6px 8px;
    border-radius: var(--radius-full);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 600;
    color: #a2a2b6;
    background: transparent;
    border: none;
    padding: 8px 18px;
    min-height: 40px;
    border-radius: var(--radius-full);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    cursor: pointer;
}

.filter-btn .filter-count {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    color: #8c8c9a;
    transition: all 0.3s ease;
}

.filter-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
}

.filter-btn.active {
    background: linear-gradient(135deg, #ffd23f 0%, #f5b700 100%);
    color: #08080a;
    font-weight: 800;
    box-shadow: 0 4px 22px rgba(255, 210, 63, 0.45);
}

.filter-btn.active .filter-count {
    background: rgba(0, 0, 0, 0.22);
    color: #08080a;
}

/* 4K Cinema Video Cards Grid */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

.portfolio-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: #0e0e14;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.7);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.portfolio-card:hover {
    border-color: rgba(255, 210, 63, 0.65);
    transform: translateY(-6px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.9), 0 0 35px rgba(255, 210, 63, 0.18);
}

.pcard-media-wrap {
    position: relative;
    width: 100%;
    height: 290px;
    overflow: hidden;
    background: #14141e;
}

.pcard-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.pcard-media-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, transparent 40%, rgba(0, 0, 0, 0.55) 100%);
    pointer-events: none;
    z-index: 2;
}

.portfolio-card:hover .pcard-poster {
    transform: scale(1.05);
}

/* Top HUD Floating Glass Telemetry Chips */
.pcard-hud-top {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 18px;
}

.pcard-metric-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 800;
    color: #ffd23f;
    background: rgba(10, 10, 16, 0.75);
    border: 1px solid rgba(255, 210, 63, 0.38);
    padding: 5px 13px;
    border-radius: var(--radius-full);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
    letter-spacing: 0.6px;
}

.chip-glow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00e676;
    box-shadow: 0 0 10px #00e676, 0 0 18px rgba(0, 230, 118, 0.6);
    animation: diodePulse 2s infinite ease-in-out;
}

@keyframes diodePulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.25); opacity: 0.75; }
}

.pcard-spec-chip {
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: 700;
    color: #dedee8;
    background: rgba(10, 10, 16, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.14);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    letter-spacing: 0.8px;
}

/* Center Radiant Cinema Play Trigger */
.pcard-play-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

.pcard-play-btn {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: rgba(12, 12, 18, 0.82);
    border: 1.5px solid rgba(255, 210, 63, 0.8);
    color: #ffd23f;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 0 32px rgba(255, 210, 63, 0.35), inset 0 0 16px rgba(255, 210, 63, 0.12);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.pcard-play-btn svg {
    width: 22px;
    height: 22px;
    margin-left: 3px;
}

.pcard-play-hint {
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2px;
    color: #ffffff;
    opacity: 0;
    transform: translateY(6px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 1);
}

.portfolio-card:hover .pcard-play-btn {
    background: var(--accent-yellow);
    color: #08080a;
    transform: scale(1.14);
    box-shadow: 0 0 55px rgba(255, 210, 63, 0.85);
}

.portfolio-card:hover .pcard-play-hint {
    opacity: 1;
    transform: translateY(0);
}

/* Dedicated Cinema Studio Metadata Plate */
.pcard-overlay-meta {
    padding: 22px 24px 20px;
    background: linear-gradient(180deg, #0d0d15 0%, #08080d 100%);
    border-top: 1px solid rgba(255, 210, 63, 0.12);
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1;
    justify-content: space-between;
}

.pcard-cat-badge {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 800;
    color: var(--accent-yellow);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.pcard-title {
    font-family: var(--font-heading);
    font-size: 17.5px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.35;
    margin: 0;
    letter-spacing: -0.3px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 48px;
    transition: color 0.3s ease;
}

.portfolio-card:hover .pcard-title {
    color: var(--accent-yellow);
}

.pcard-meta-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
    padding-top: 13px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    gap: 14px;
}

.pcard-specs {
    font-size: 12px;
    color: #8e8ea2;
    font-weight: 500;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pcard-arrow-link {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-heading);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--accent-yellow);
    background: rgba(255, 210, 63, 0.08);
    border: 1px solid rgba(255, 210, 63, 0.28);
    padding: 5px 13px;
    border-radius: var(--radius-full);
    white-space: nowrap;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.portfolio-card:hover .pcard-arrow-link {
    background: var(--accent-yellow);
    color: #08080a;
    border-color: var(--accent-yellow);
    box-shadow: 0 0 18px rgba(255, 210, 63, 0.5);
    transform: translateY(-2px);
}

/* Mobile Responsiveness for 4K Portfolio Showcase */
@media (max-width: 768px) {
    .portfolio-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .portfolio-filters-wrap {
        display: flex;
        justify-content: center;
        width: 100%;
        margin: 10px 0 22px 0;
        padding: 0;
        overflow: visible;
    }

    .portfolio-filters {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        background: transparent;
        border: none;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        padding: 0;
        gap: 8px 6px;
        width: 100%;
        max-width: 100%;
    }

    .filter-btn {
        flex: 0 0 auto;
        background: rgba(14, 14, 22, 0.92);
        border: 1px solid rgba(255, 210, 63, 0.22);
        padding: 7px 13px;
        font-size: 11.5px;
        min-height: 35px;
        border-radius: var(--radius-full);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    }

    .filter-btn .filter-count {
        font-size: 9.5px;
        padding: 1px 6px;
        border-radius: 8px;
    }

    .filter-btn.active {
        background: linear-gradient(135deg, #ffd23f 0%, #f5b700 100%);
        border-color: #ffd23f;
        color: #08080a;
        box-shadow: 0 4px 16px rgba(255, 210, 63, 0.45);
    }

    .pcard-media-wrap {
        min-height: 200px;
        aspect-ratio: 16 / 9.2;
        height: auto;
    }

    .pcard-hud-top {
        padding: 12px 14px;
    }

    .pcard-metric-chip {
        font-size: 10px;
        padding: 4px 10px;
    }

    .pcard-spec-chip {
        font-size: 9px;
        padding: 3px 9px;
    }

    .pcard-overlay-meta {
        padding: 18px 18px 16px;
        gap: 6px;
    }

    .pcard-cat-badge {
        font-size: 10px;
    }

    .pcard-title {
        font-size: 15.5px;
        line-height: 1.35;
    }

    .pcard-specs {
        font-size: 11px;
        max-width: 58%;
        line-height: 1.3;
    }

    .pcard-arrow-link {
        font-size: 11px;
        padding: 4px 10px;
        white-space: nowrap;
    }
}

/* ==========================================================================
   6. 1-MINUTE VIDEO COST ESTIMATOR (ULTRA-LUXURY STUDIO CONSOLE)
   ========================================================================== */
.calculator-section {
    background: #09090f;
    padding: 95px 0;
    position: relative;
    border-top: 1px solid rgba(255, 215, 0, 0.12);
    content-visibility: auto;
    contain-intrinsic-size: 700px;
}

.calc-box {
    background: #0d0d15;
    border: 1.5px solid rgba(255, 210, 63, 0.22);
    border-radius: 24px;
    padding: 42px 38px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.9), 0 0 45px rgba(255, 210, 63, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.calc-grid {
    display: grid;
    grid-template-columns: 1.28fr 1fr;
    gap: 40px;
    align-items: stretch;
}

.calc-group {
    margin-bottom: 16px;
}

.calc-group:last-child {
    margin-bottom: 0;
}

/* Partition Sub-Cards for 2&3 and 4&5 */
.calc-partition-card {
    background: rgba(14, 14, 22, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 18px 20px;
    margin-bottom: 16px;
    transition: all 0.3s ease;
}

.calc-partition-card:hover {
    border-color: rgba(255, 210, 63, 0.25);
    background: rgba(18, 18, 28, 0.85);
}

.calc-partition-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    align-items: stretch;
}

.calc-partition-grid .calc-group {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
}

.partition-v-divider {
    width: 1px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 210, 63, 0.3) 50%, rgba(255, 255, 255, 0.04) 100%);
    margin: 0 4px;
}

@media (max-width: 900px) {
    .calc-partition-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .partition-v-divider {
        display: none;
    }
}

.calc-step-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
    color: #ffffff;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 20px;
    border-radius: 5px;
    background: rgba(255, 210, 63, 0.12);
    border: 1px solid rgba(255, 210, 63, 0.4);
    color: #ffd23f;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(255, 210, 63, 0.15);
}

.calc-btn-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.calc-pill {
    position: relative;
    background: linear-gradient(155deg, rgba(26, 26, 38, 0.88) 0%, rgba(14, 14, 22, 0.96) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 16px;
    padding: 14px 16px;
    min-height: 74px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.calc-pill-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #ffd23f;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.calc-pill:hover .calc-pill-icon {
    transform: scale(1.08);
    border-color: rgba(255, 210, 63, 0.5);
    background: rgba(255, 210, 63, 0.15);
    color: #ffd23f;
    box-shadow: 0 0 16px rgba(255, 210, 63, 0.3);
}

.calc-pill.active .calc-pill-icon {
    background: linear-gradient(135deg, rgba(255, 210, 63, 0.3) 0%, rgba(255, 210, 63, 0.1) 100%);
    border-color: #ffd23f;
    color: #ffd23f;
    box-shadow: 0 0 18px rgba(255, 210, 63, 0.5);
    transform: scale(1.05);
}

.calc-pill-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex-grow: 1;
}

.calc-pill-text strong {
    font-family: var(--font-heading);
    font-size: 13.5px;
    color: #ffffff;
    font-weight: 700;
    line-height: 1.3;
    transition: color 0.3s ease;
}

.calc-pill-text span {
    font-size: 11px;
    color: #9292a4;
    line-height: 1.35;
}

.calc-pill-radio {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

.calc-pill:hover {
    border-color: rgba(255, 210, 63, 0.5);
    background: linear-gradient(155deg, rgba(32, 32, 48, 0.95) 0%, rgba(18, 18, 28, 0.98) 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 16px rgba(255, 210, 63, 0.15);
}

.calc-pill.active {
    background: linear-gradient(135deg, rgba(255, 210, 63, 0.18) 0%, rgba(255, 210, 63, 0.04) 100%);
    border: 1.5px solid #ffd23f;
    box-shadow: 0 8px 28px rgba(255, 210, 63, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

.calc-pill.active .calc-pill-text strong {
    color: #ffd23f;
}

.calc-pill.active .calc-pill-radio {
    border-color: #ffd23f;
    background: #ffd23f;
    box-shadow: 0 0 12px rgba(255, 210, 63, 0.7);
    transform: scale(1.1);
}

.calc-pill.active .calc-pill-radio::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: #08080a;
}

.calc-btn-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.calc-chip {
    background: rgba(18, 18, 26, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-full);
    padding: 8px 14px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    font-family: var(--font-heading);
    font-size: 11.5px;
    font-weight: 600;
    color: #d0d0dc;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
}

.calc-chip:hover {
    background: rgba(28, 28, 42, 0.95);
    border-color: rgba(255, 210, 63, 0.4);
    color: #ffffff;
    transform: translateY(-1px);
}

.calc-chip.active {
    background: linear-gradient(135deg, #ffd23f 0%, #f5b700 100%);
    border-color: #ffd23f;
    color: #08080a;
    font-weight: 800;
    box-shadow: 0 4px 20px rgba(255, 210, 63, 0.45);
    transform: translateY(-1px);
}

.calc-chip-badge {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 10px;
    background: rgba(255, 210, 63, 0.2);
    color: #ffd23f;
    margin-left: 6px;
    letter-spacing: 0.3px;
    transition: all 0.3s ease;
}

.calc-chip.active .calc-chip-badge {
    background: #08080a;
    color: #ffd23f;
}

.calc-note-sub {
    font-size: 12px;
    color: #9e9eb0;
    margin-top: 4px;
    font-weight: 500;
}

/* Result Card */
.calc-result-card {
    background: linear-gradient(170deg, #12121a 0%, #0a0a0f 100%);
    border: 1.5px solid rgba(255, 210, 63, 0.35);
    border-radius: 20px;
    padding: 34px 28px;
    box-shadow: 0 25px 65px rgba(0, 0, 0, 0.85), 0 0 35px rgba(255, 210, 63, 0.12);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.result-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.est-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-heading);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #ffd23f;
    background: rgba(255, 210, 63, 0.1);
    border: 1px solid rgba(255, 210, 63, 0.3);
    padding: 5px 12px;
    border-radius: var(--radius-full);
    margin-bottom: 12px;
    width: fit-content;
}

/* Meeways Scope Blueprint & Roadmap Specific Styles */
.blueprint-headline-box {
    margin-bottom: 12px;
}

.blueprint-kicker {
    font-family: var(--font-heading);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 1.6px;
    color: #8c8ea0;
    text-transform: uppercase;
    display: block;
    margin-bottom: 3px;
}

.blueprint-track-title {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.4px;
    margin: 0;
    line-height: 1.25;
}

.est-timeline {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #d0d0dc;
    margin-bottom: 18px;
    padding: 10px 14px;
    background: rgba(255, 210, 63, 0.08);
    border: 1px solid rgba(255, 210, 63, 0.25);
    border-radius: 10px;
}

.est-timeline strong {
    color: var(--accent-yellow);
    font-weight: 800;
}

.est-timeline svg {
    color: #ffd23f;
    flex-shrink: 0;
}

/* Live Dynamic Scope Matrix */
.est-summary-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    gap: 8px;
}

.sum-label {
    color: #8e8e9e;
    font-weight: 500;
}

.sum-val {
    color: #ffffff;
    font-weight: 700;
    text-align: right;
}

.sum-val.text-gold {
    color: #ffd23f;
}

.est-includes h4 {
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.8px;
    color: #ffffff;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.est-features-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 12.5px;
    color: #c4c4d4;
    margin-bottom: 20px;
    padding: 0;
}

.est-features-list li {
    display: flex;
    align-items: center;
    gap: 9px;
    line-height: 1.35;
}

.feat-check {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: rgba(0, 230, 118, 0.15);
    border: 1px solid rgba(0, 230, 118, 0.4);
    color: #00e676;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* High-End Executive Deliverable Badges (Modern & Visual) */
.est-deliverables-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 22px;
}

.deliv-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 9px 12px;
    transition: all 0.25s ease;
}

.deliv-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 210, 63, 0.3);
    transform: translateX(3px);
}

.deliv-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 210, 63, 0.12);
    border: 1px solid rgba(255, 210, 63, 0.3);
    color: #ffd23f;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.deliv-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.deliv-info strong {
    font-family: var(--font-heading);
    font-size: 12px;
    color: #ffffff;
    font-weight: 700;
    line-height: 1.25;
}

.deliv-info span {
    font-size: 10.5px;
    color: #9494a6;
    line-height: 1.25;
}

.btn-lock-est {
    position: relative;
    overflow: hidden;
    font-family: var(--font-heading);
    font-size: 14.5px;
    font-weight: 900;
    letter-spacing: 0.3px;
    color: #08080a;
    background: linear-gradient(135deg, #ffd23f 0%, #f5a623 50%, #ffd23f 100%);
    background-size: 200% auto;
    padding: 15px 26px;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: var(--radius-full);
    text-align: center;
    text-decoration: none;
    box-shadow: 0 8px 30px rgba(255, 210, 63, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-top: auto;
}

.btn-lock-est::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -60%;
    width: 35%;
    height: 200%;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.7) 50%, transparent 100%);
    transform: rotate(25deg);
    animation: btnShimmerSweep 3.2s infinite;
}

@keyframes btnShimmerSweep {
    0% { left: -60%; opacity: 0; }
    20% { opacity: 1; }
    60% { left: 140%; opacity: 0; }
    100% { left: 140%; opacity: 0; }
}

.btn-lock-est:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 14px 44px rgba(255, 210, 63, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    background-position: right center;
    color: #08080a;
}

.est-note {
    display: block;
    text-align: center;
    font-size: 11.5px;
    color: #9e9eb2;
    font-weight: 500;
    margin-top: 12px;
    letter-spacing: 0.3px;
}

@media (max-width: 992px) {
    .calc-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .calc-box {
        padding: 24px 18px;
    }
}

@media (max-width: 768px) {
    .calc-section {
        padding: 55px 0 45px;
    }

    .calc-box {
        padding: 16px 12px;
        border-radius: 16px;
    }

    .calc-group {
        margin-bottom: 12px;
    }

    .calc-step-label {
        font-size: 10px;
        letter-spacing: 1px;
        margin-bottom: 8px;
        gap: 6px;
    }

    .step-num {
        width: 22px;
        height: 18px;
        font-size: 9px;
    }

    /* 2x2 Compact Cards on Mobile */
    .calc-btn-group {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .calc-pill {
        padding: 10px 10px;
        min-height: 56px;
        border-radius: 12px;
        gap: 8px;
    }

    .calc-pill-icon {
        width: 28px;
        height: 28px;
        border-radius: 8px;
    }

    .calc-pill-icon svg {
        width: 15px;
        height: 15px;
    }

    .calc-pill-text strong {
        font-size: 11.5px;
        line-height: 1.25;
    }

    .calc-pill-text span {
        display: none; /* Hide verbose text on mobile for ultra-compact UI */
    }

    .calc-pill-radio {
        width: 14px;
        height: 14px;
    }

    /* Compact Partitions on Mobile */
    .calc-partition-card {
        padding: 14px 12px;
        border-radius: 14px;
        margin-bottom: 12px;
    }

    .calc-partition-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .partition-v-divider {
        display: block;
        width: 100%;
        height: 1px;
        min-height: 1px;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 210, 63, 0.2) 50%, rgba(255, 255, 255, 0.04) 100%);
        margin: 2px 0;
    }

    .calc-btn-row {
        gap: 6px;
    }

    .calc-chip {
        padding: 6px 11px;
        min-height: 32px;
        font-size: 10.5px;
        border-radius: 20px;
    }

    .calc-chip-badge {
        font-size: 8.5px;
        padding: 1px 4px;
        margin-left: 3px;
    }

    /* Compact Result Card on Mobile */
    .calc-result-card {
        padding: 18px 14px;
        border-radius: 16px;
    }

    .est-tag {
        font-size: 9.5px;
        padding: 4px 9px;
        margin-bottom: 8px;
    }

    .est-price {
        font-size: 24px;
        margin-bottom: 8px;
    }

    .est-timeline {
        padding: 7px 10px;
        font-size: 11px;
        margin-bottom: 14px;
    }

    .est-summary-box {
        padding: 10px 12px;
        gap: 6px;
        margin-bottom: 14px;
        border-radius: 10px;
    }

    .summary-row {
        font-size: 11px;
    }

    .est-guarantee-badge {
        padding: 10px 10px;
        margin-bottom: 16px;
        border-radius: 10px;
    }

    .est-guarantee-icon {
        font-size: 16px;
    }

    .est-guarantee-text strong {
        font-size: 10.5px;
    }

    .est-guarantee-text span {
        font-size: 10px;
    }

    .g-pill {
        font-size: 9.5px;
        padding: 2px 6px;
    }

    .btn-lock-est {
        min-height: 44px;
        padding: 11px 18px;
        font-size: 13px;
    }

    .est-note {
        font-size: 10.5px;
        letter-spacing: 0.1px;
        white-space: nowrap;
        margin-top: 10px;
    }
}

/* ==========================================================================
   7. 10/10 INTERACTIVE CINEMA PRODUCTION HUD CONSOLE
   ========================================================================== */
.process-section {
    background: #06060a;
    padding: 100px 0 90px;
    content-visibility: auto;
    contain-intrinsic-size: 600px;
    border-top: 1px solid rgba(255, 215, 0, 0.12);
    position: relative;
    overflow: hidden;
}

/* Mobile Tap & Swipe Pill Bar */
.pipeline-mobile-pills {
    display: none;
}

/* Split 2-Column Luxury Console */
.pipeline-console {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 26px;
    align-items: stretch;
    margin-top: 48px;
    position: relative;
    z-index: 2;
}

/* Left Column: Stage Selector Timeline Deck */
.pipeline-nav {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pnav-item {
    background: rgba(14, 14, 22, 0.75);
    border: 1.5px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    padding: 18px 20px;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.pnav-item:hover {
    background: rgba(22, 22, 34, 0.9);
    border-color: rgba(255, 210, 63, 0.35);
    transform: translateX(4px);
}

.pnav-item.active {
    background: linear-gradient(135deg, rgba(28, 28, 44, 0.95) 0%, rgba(16, 16, 26, 0.98) 100%);
    border-color: #ffd23f;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 25px rgba(255, 210, 63, 0.15), inset 0 1px 0 rgba(255, 215, 0, 0.3);
    transform: translateX(6px);
}

.pnav-top {
    display: flex;
    align-items: center;
    gap: 14px;
}

.pnav-badge {
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 900;
    color: #ffd23f;
    background: rgba(255, 210, 63, 0.12);
    border: 1px solid rgba(255, 210, 63, 0.3);
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.pnav-item.active .pnav-badge {
    background: #ffd23f;
    color: #08080a;
    box-shadow: 0 0 15px rgba(255, 210, 63, 0.6);
}

.pnav-meta {
    flex: 1;
    min-width: 0;
}

.pnav-title {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 2px;
    transition: color 0.3s ease;
}

.pnav-item.active .pnav-title {
    color: #ffd23f;
}

.pnav-sub {
    font-size: 11.5px;
    color: #8e8e9e;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pnav-dot {
    font-size: 12px;
    color: #00e676;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.pnav-item.active .pnav-dot {
    opacity: 1;
}

.pnav-progress {
    height: 2px;
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    margin-top: 14px;
    border-radius: 2px;
    overflow: hidden;
}

.pnav-bar {
    height: 100%;
    width: 0%;
    background: #ffd23f;
    transition: width 0.1s linear;
}

/* Right Column: Cinema Master Screen HUD */
.pipeline-screen {
    background: linear-gradient(175deg, rgba(18, 18, 28, 0.9) 0%, rgba(10, 10, 16, 0.98) 100%);
    border: 1.5px solid rgba(255, 210, 63, 0.22);
    border-radius: 24px;
    padding: 34px 36px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    position: relative;
    min-height: 480px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stage-panel {
    display: none;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.stage-panel.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.panel-hud-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 14px;
    flex-wrap: wrap;
    gap: 10px;
}

.hud-tag {
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.hud-live {
    color: #00e676;
    background: rgba(0, 230, 118, 0.1);
    border: 1px solid rgba(0, 230, 118, 0.3);
}

.live-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00e676;
    box-shadow: 0 0 8px #00e676;
    animation: livePulse 1.5s infinite;
}

@keyframes livePulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.6; }
}

.hud-spec {
    color: #ffd23f;
    background: rgba(255, 210, 63, 0.08);
    border: 1px solid rgba(255, 210, 63, 0.25);
}

.panel-hero {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 16px;
}

.panel-icon-box {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: radial-gradient(circle at 35% 35%, #242436 0%, #0d0d14 100%);
    border: 1.5px solid #ffd23f;
    color: #ffd23f;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 25px rgba(255, 210, 63, 0.35);
    flex-shrink: 0;
}

.panel-eyebrow {
    font-family: var(--font-heading);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #ffd23f;
    text-transform: uppercase;
    display: block;
    margin-bottom: 2px;
}

.panel-title {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.4px;
    line-height: 1.25;
}

.panel-desc {
    font-size: 14.5px;
    color: #b4b4c8;
    line-height: 1.65;
    margin-bottom: 26px;
    max-width: 680px;
}

.pdeliv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 28px;
}

.pdeliv-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px 14px;
    transition: all 0.3s ease;
}

.pdeliv-card:hover {
    background: rgba(255, 210, 63, 0.06);
    border-color: rgba(255, 210, 63, 0.3);
    transform: translateY(-2px);
}

.pdeliv-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-heading);
    font-size: 12px;
    color: #ffffff;
    margin-bottom: 6px;
}

.pdeliv-badge {
    color: #ffd23f;
    font-size: 12px;
}

.pdeliv-text {
    font-size: 11.5px;
    color: #8e8e9e;
    line-height: 1.45;
    margin: 0;
}

.panel-footer-guarantee {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(14, 14, 18, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px 18px;
    margin-top: auto;
    gap: 14px;
}

.pfoot-left {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    line-height: 1.4;
    color: #c0c0cc;
}

.pfoot-check-badge {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0, 230, 118, 0.14);
    border: 1px solid rgba(0, 230, 118, 0.4);
    color: #00e676;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pfoot-text {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.pfoot-left strong {
    color: #ffffff;
    font-weight: 700;
}

.pfoot-highlight {
    color: #00e676;
    font-weight: 600;
}

.pfoot-btn-next {
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 700;
    color: #08080a;
    background: #ffd23f;
    border: none;
    border-radius: var(--radius-full);
    padding: 8px 18px;
    cursor: pointer;
    transition: all 0.25s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.pfoot-btn-next:hover {
    background: #ffffff;
    transform: scale(1.04);
    box-shadow: 0 0 15px rgba(255, 210, 63, 0.6);
}

/* Studio Assurance Strip */
.process-trust-strip {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: rgba(14, 14, 20, 0.95);
    border: 1.5px solid rgba(255, 210, 63, 0.25);
    border-radius: var(--radius-full);
    padding: 16px 28px;
    margin-top: 48px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8), 0 0 30px rgba(255, 210, 63, 0.08);
    flex-wrap: wrap;
    gap: 16px;
    position: relative;
    z-index: 2;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #d0d0dc;
}

.trust-icon-box {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 210, 63, 0.12);
    border: 1px solid rgba(255, 210, 63, 0.35);
    color: #ffd23f;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.trust-item strong {
    color: #ffffff;
    font-weight: 700;
}

@media (max-width: 1024px) {
    .pipeline-console {
        grid-template-columns: 300px 1fr;
        gap: 20px;
    }

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

    .process-trust-strip {
        border-radius: 16px;
        justify-content: center;
        gap: 20px;
    }
}

@media (max-width: 900px) {
    .process-section {
        padding: 65px 0 55px;
    }

    .process-head {
        margin-bottom: 24px;
    }

    .pipeline-mobile-pills {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 6px;
        background: rgba(14, 14, 22, 0.95);
        border: 1px solid rgba(255, 210, 63, 0.22);
        border-radius: 16px;
        padding: 6px;
        margin: 0 0 20px 0;
        width: 100%;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
    }

    .mpill {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 9px 2px;
        border-radius: 11px;
        background: transparent;
        border: 1px solid transparent;
        color: #8e8e9e;
        cursor: pointer;
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        width: 100%;
        min-width: 0;
        text-align: center;
    }

    .mpill:hover {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.04);
    }

    .mpill.active {
        background: #ffd23f;
        color: #08080a;
        font-weight: 800;
        border-color: #ffd23f;
        box-shadow: 0 4px 16px rgba(255, 210, 63, 0.5);
        transform: translateY(-1px);
    }

    .mpill-num {
        font-family: var(--font-heading);
        font-size: 13px;
        font-weight: 900;
        line-height: 1;
        display: block;
    }

    .mpill-text {
        font-family: var(--font-heading);
        font-size: 9.5px;
        font-weight: 700;
        line-height: 1.1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        display: block;
    }

    .mpill.active .mpill-text {
        color: #08080a;
        font-weight: 800;
    }

    .pipeline-console {
        grid-template-columns: 1fr;
        gap: 0;
        margin-top: 0;
    }

    .pipeline-nav {
        display: none;
    }

    .pipeline-screen {
        padding: 24px 20px;
        border-radius: 20px;
        min-height: auto;
        background: linear-gradient(175deg, rgba(18, 18, 28, 0.95) 0%, rgba(10, 10, 16, 0.98) 100%);
        border: 1.5px solid rgba(255, 210, 63, 0.28);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.9), 0 0 20px rgba(255, 210, 63, 0.08);
    }

    .panel-hud-bar {
        margin-bottom: 16px;
        padding-bottom: 10px;
    }

    .panel-hero {
        gap: 14px;
        margin-bottom: 12px;
    }

    .panel-icon-box {
        width: 48px;
        height: 48px;
        border-radius: 12px;
    }

    .panel-icon-box svg {
        width: 24px;
        height: 24px;
    }

    .panel-title {
        font-size: 18px;
    }

    .panel-desc {
        font-size: 13px;
        line-height: 1.55;
        margin-bottom: 20px;
    }

    .pdeliv-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 20px;
    }

    .pdeliv-card {
        padding: 12px 14px;
    }

    .panel-footer-guarantee {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 12px 14px;
    }

    .pfoot-btn-next {
        width: 100%;
        justify-content: center;
        padding: 10px;
    }

    .process-trust-strip {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        padding: 16px 14px;
        border-radius: 16px;
        margin-top: 28px;
    }

    .trust-item {
        font-size: 11.5px;
        gap: 8px;
    }

    .trust-icon-box {
        width: 26px;
        height: 26px;
    }
}

/* ==========================================================================
   8. EXPERTISE TABBED SHOWCASE
   ========================================================================== */
.expertise-section {
    background: #0a0a0d;
    padding: 90px 0;
    content-visibility: auto;
    contain-intrinsic-size: 600px;
}

.dsm-exp {
    background: linear-gradient(175deg, rgba(14, 14, 22, 0.95) 0%, rgba(8, 8, 12, 0.98) 100%);
    border: 1.5px solid rgba(255, 210, 63, 0.18);
    border-radius: 28px;
    padding: 48px 36px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(20px);
}

.dsm-exp__head {
    max-width: 780px;
    margin: 0 auto 38px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dsm-exp__eyebrow {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #ffd23f;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: inline-block;
    background: rgba(255, 210, 63, 0.08);
    border: 1px solid rgba(255, 210, 63, 0.25);
    padding: 5px 14px;
    border-radius: var(--radius-full);
}

.dsm-exp__title {
    font-family: var(--font-heading);
    font-size: clamp(26px, 3.8vw, 38px);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.22;
    margin-bottom: 12px;
    text-align: center;
}

.dsm-exp__title em {
    color: var(--accent-yellow);
    font-style: normal;
}

.dsm-exp__intro {
    font-size: 15px;
    color: #a4a4b8;
    line-height: 1.65;
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}

.dsm-exp__body {
    display: grid;
    grid-template-columns: 310px 1fr;
    gap: 22px;
    align-items: start;
}

.dsm-exp__tabs {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dsm-exp__tab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 18px;
    background: rgba(22, 22, 30, 0.75);
    border: 1.5px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    color: #fff;
    font-family: var(--font-heading);
    text-align: left;
    transition: all 0.25s ease;
    cursor: pointer;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.dsm-tab-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dsm-exp__tab-label {
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -0.2px;
}

.dsm-tab-sub {
    font-size: 11px;
    font-weight: 500;
    color: #8a8a9a;
    font-family: var(--font-body);
    letter-spacing: 0.1px;
}

.dsm-exp__tab:hover {
    background: rgba(32, 32, 44, 0.9);
    border-color: rgba(255, 210, 63, 0.35);
    transform: translateX(4px);
}

.dsm-exp__tab.active {
    background: var(--accent-yellow);
    border-color: var(--accent-yellow);
    color: var(--text-dark);
    box-shadow: 0 6px 22px rgba(255, 210, 63, 0.4);
    transform: translateX(5px);
}

.dsm-exp__tab.active .dsm-tab-sub {
    color: #2b2608;
    font-weight: 600;
}

.dsm-exp__tab-arrow {
    font-size: 16px;
    transition: transform 0.2s ease;
}

.dsm-exp__tab:hover .dsm-exp__tab-arrow {
    transform: translateX(3px);
}

/* Studio Support & Specs Benchmark Card (Fills Left Gap) */
.dsm-exp__support-card {
    margin-top: 10px;
    background: linear-gradient(145deg, rgba(24, 24, 32, 0.95) 0%, rgba(14, 14, 18, 0.98) 100%);
    border: 1.5px solid rgba(255, 210, 63, 0.25);
    border-radius: var(--radius-md);
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.support-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.support-radar-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #00e676;
    box-shadow: 0 0 8px #00e676;
    animation: alertPulse 1.4s ease-in-out infinite;
}

.support-card-badge {
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--accent-yellow);
}

.support-specs-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.support-specs-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: #c4c4ce;
    line-height: 1.35;
}

.support-specs-list li svg {
    color: var(--accent-yellow);
    flex-shrink: 0;
}

.support-specs-list li strong {
    color: #ffffff;
}

.support-card-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 14px;
    background: rgba(255, 210, 63, 0.1);
    border: 1px solid rgba(255, 210, 63, 0.3);
    border-radius: var(--radius-sm);
    color: var(--accent-yellow) !important;
    font-family: var(--font-heading);
    font-size: 11.5px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.22s ease;
    margin-top: 2px;
}

.support-card-btn:hover, .support-card-btn:active {
    background: var(--accent-yellow);
    color: #08080a !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(255, 210, 63, 0.35);
}

.support-btn-arrow {
    font-size: 14px;
    transition: transform 0.2s ease;
}

.support-card-btn:hover .support-btn-arrow {
    transform: translateX(3px);
}

.dsm-exp__panel {
    display: none;
    animation: fadeIn 0.35s ease;
}

.dsm-exp__panel.active {
    display: block;
}

.dsm-panel-inner {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 22px;
    align-items: stretch;
    background: linear-gradient(145deg, rgba(18, 18, 26, 0.85) 0%, rgba(12, 12, 16, 0.96) 100%);
    border: 1.5px solid rgba(255, 210, 63, 0.22);
    border-radius: var(--radius-lg);
    padding: 24px 26px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    min-height: 470px;
}

.dsm-panel-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
}

.dsm-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.dsm-media-badge {
    color: #ffd23f;
    font-size: 10px;
    font-weight: 800;
    font-family: var(--font-heading);
    letter-spacing: 0.8px;
    background: rgba(255, 210, 63, 0.08);
    border: 1px solid rgba(255, 210, 63, 0.25);
    padding: 4px 10px;
    border-radius: 4px;
}

.dsm-spec-tag {
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #00e676;
    background: rgba(0, 230, 118, 0.08);
    border: 1px solid rgba(0, 230, 118, 0.25);
    padding: 3px 8px;
    border-radius: 4px;
}

.dsm-panel-headline {
    font-family: var(--font-heading);
    font-size: 17.5px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.35;
    letter-spacing: -0.3px;
    margin: 0;
}

.dsm-panel-summary {
    font-size: 13.5px;
    line-height: 1.55;
    color: #b0b0c2;
    margin: 0;
}

.dsm-deliverables-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 2px 0 6px;
}

.dsm-deliv-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-sm);
    padding: 9px 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    transition: all 0.25s ease;
}

.dsm-deliv-item:hover {
    background: rgba(255, 210, 63, 0.05);
    border-color: rgba(255, 210, 63, 0.3);
    transform: translateX(3px);
}

.dsm-deliv-icon {
    font-size: 14px;
    flex-shrink: 0;
    line-height: 1;
    margin-top: 2px;
}

.dsm-deliv-item strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 2px;
}

.dsm-deliv-item p {
    font-size: 11px;
    color: #8e8e9e;
    line-height: 1.35;
    margin: 0;
}

.dsm-panel-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
}

.dsm-panel-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--accent-yellow);
    color: #08080a !important;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 800;
    padding: 8px 18px;
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: all 0.25s ease;
    box-shadow: 0 4px 14px rgba(255, 210, 63, 0.35);
}

.dsm-panel-cta:hover {
    background: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(255, 255, 255, 0.4);
}

.dsm-panel-note {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 700;
    color: #00e676;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.dsm-panel-right {
    display: flex;
    align-items: stretch;
    height: 100%;
}

.dsm-panel-right .dsm-exp__media {
    width: 100%;
    height: 100%;
    min-height: 380px;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8);
}

.dsm-panel-right .dsm-exp__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.dsm-exp__panel:hover .dsm-panel-right .dsm-exp__media img {
    transform: scale(1.04);
}

.dsm-media-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.4) 100%);
    pointer-events: none;
}

/* ==========================================================================
   9. MEEWAYS BRAND GROWTH & FULL-STACK ECOSYSTEM (Awwwards Luxury Standard)
   ========================================================================== */
.ecosystem-section {
    position: relative;
    background: radial-gradient(circle at 50% 10%, rgba(20, 20, 28, 0.9) 0%, #08080a 75%);
    padding: 70px 0 35px;
    overflow: hidden;
    border-top: 1px solid rgba(255, 210, 63, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.eco-aurora-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    pointer-events: none;
    z-index: 0;
}

.eco-orb-1 {
    top: 5%;
    left: 10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255, 210, 63, 0.09) 0%, transparent 70%);
}

.eco-orb-2 {
    bottom: 10%;
    right: 5%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255, 180, 0, 0.06) 0%, transparent 70%);
}

/* 1. Top Milestone Stats Console */
.eco-stats-console {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    background: linear-gradient(135deg, rgba(24, 24, 32, 0.8) 0%, rgba(12, 12, 18, 0.92) 100%);
    border: 1.5px solid rgba(255, 210, 63, 0.25);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    margin-bottom: 20px;
    overflow: hidden;
}

.hero-milestones-console {
    margin-top: 36px;
    margin-bottom: 0;
}

.eco-stat-pod {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    padding: 18px 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.25s ease;
    box-sizing: border-box;
}

.eco-stat-pod:last-child {
    border-right: none;
}

.eco-stat-pod:hover {
    background: rgba(255, 210, 63, 0.06);
}

.stat-pod-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(135deg, #ffd23f 0%, #ffc107 100%);
    border: 1px solid #ffd23f;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #08080a;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(255, 210, 63, 0.4);
    transition: all 0.25s ease;
}

.stat-pod-icon svg {
    color: #08080a;
    stroke: #08080a;
}

.eco-stat-pod:hover .stat-pod-icon {
    transform: scale(1.12);
    box-shadow: 0 0 20px rgba(255, 210, 63, 0.65);
}

.stat-pod-info {
    display: flex;
    flex-direction: column;
}

.stat-pod-num {
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 900;
    color: #ffffff;
    line-height: 1.15;
}

.stat-pod-label {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: #9898a6;
    white-space: nowrap;
}

/* 2. Grand Section Header */
.eco-header {
    position: relative;
    z-index: 1;
    max-width: 840px;
    margin: 0 auto 55px;
}

.eco-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.6px;
    color: var(--accent-yellow);
    background: rgba(255, 210, 63, 0.08);
    border: 1px solid rgba(255, 210, 63, 0.3);
    padding: 6px 16px;
    border-radius: var(--radius-full);
    margin-bottom: 18px;
    box-shadow: 0 0 20px rgba(255, 210, 63, 0.15);
}

.eco-beacon-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-yellow);
    box-shadow: 0 0 8px var(--accent-yellow);
    animation: alertPulse 1.5s infinite;
}

.eco-grand-title {
    font-family: var(--font-heading);
    font-size: clamp(28px, 4.2vw, 44px);
    font-weight: 900;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.5px;
    margin-bottom: 16px;
}

.eco-grand-sub {
    font-size: 15.5px;
    color: #a4a4b4;
    line-height: 1.7;
    max-width: 760px;
    margin: 0 auto;
}

/* 3. 6 Ultra-Luxury Titanium Glass Services Cards */
/* ==========================================================================
   9. MEEWAYS FULL-STACK STUDIO ENGINE (Future-Proof Interactive Matrix)
   ========================================================================== */
.animated-gradient-text {
    background: linear-gradient(90deg, #ffd23f 0%, #ffffff 25%, #ffd23f 50%, #00e676 75%, #ffd23f 100%);
    background-size: 300% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: holoShimmer 5s linear infinite;
}

@keyframes holoShimmer {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

/* 6 Future-Proof Animated Bento Cards */
.eco-bento-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 36px 0 10px;
}

.eco-bento-card {
    background: linear-gradient(165deg, rgba(22, 22, 32, 0.95) 0%, rgba(12, 12, 18, 0.98) 100%);
    border: 1.5px solid rgba(255, 210, 63, 0.12);
    border-radius: 24px;
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

/* Future-Proof Laser Beam Sweeper (Only on Active/Hovered Card) */
.border-laser-beam {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2.5px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 210, 63, 0.95) 50%, transparent 100%);
    opacity: 0;
    pointer-events: none;
    transform: translateX(-100%);
    transition: opacity 0.35s ease;
}

@keyframes laserSweep {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.eco-bento-card.is-active,
.eco-bento-card:hover {
    border-color: rgba(255, 210, 63, 0.55);
    transform: translateY(-6px);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.9), 0 0 35px rgba(255, 210, 63, 0.18);
}

.eco-bento-card.is-active .border-laser-beam,
.eco-bento-card:hover .border-laser-beam {
    opacity: 1;
    animation: laserSweep 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.bento-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.bento-top-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.bento-idx {
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--accent-yellow);
}

.bento-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-heading);
    font-size: 9.5px;
    font-weight: 800;
    color: #e2e4f0;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 2px 7px;
    border-radius: 6px;
    letter-spacing: 0.4px;
}

.live-dot-green {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00e676;
    box-shadow: 0 0 8px #00e676;
}

.eco-bento-card.is-active .live-dot-green,
.eco-bento-card:hover .live-dot-green {
    animation: radarPulse 1.5s infinite;
}

@keyframes radarPulse {
    0% { transform: scale(0.9); opacity: 0.7; box-shadow: 0 0 0 0 rgba(0, 230, 118, 0.7); }
    70% { transform: scale(1.15); opacity: 1; box-shadow: 0 0 0 6px rgba(0, 230, 118, 0); }
    100% { transform: scale(0.9); opacity: 0.7; }
}

.bento-icon-badge {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(255, 210, 63, 0.08);
    border: 1px solid rgba(255, 210, 63, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-yellow);
    transition: all 0.28s ease;
    flex-shrink: 0;
}

.eco-bento-card.is-active .bento-icon-badge,
.eco-bento-card:hover .bento-icon-badge {
    background: var(--accent-yellow);
    color: #08080a;
    transform: scale(1.08) rotate(4deg);
    box-shadow: 0 0 16px rgba(255, 210, 63, 0.4);
}

.bento-title {
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.3px;
    line-height: 1.3;
    margin: 0;
}

.bento-desc {
    font-size: 13px;
    color: #9ea0b2;
    line-height: 1.55;
    margin: 0;
}

/* ==========================================================================
   FUTURE-PROOF ANIMATED BENTO WIDGETS
   ========================================================================== */

/* Widget 1: Browser Console with Blinking Cursor */
.widget-browser-console {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.browser-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.browser-dots {
    display: flex;
    gap: 5px;
}

.dot-red { width: 7px; height: 7px; border-radius: 50%; background: #ff5f56; }
.dot-yellow { width: 7px; height: 7px; border-radius: 50%; background: #ffbd2e; }
.dot-green { width: 7px; height: 7px; border-radius: 50%; background: #27c93f; }

.browser-url {
    font-family: monospace;
    font-size: 11px;
    color: #a4a6ba;
    flex-grow: 1;
    text-align: center;
}

.blink-cursor {
    display: inline-block;
    color: var(--accent-yellow);
    font-weight: 900;
    margin-left: 2px;
    opacity: 0.4;
}

.eco-bento-card.is-active .blink-cursor,
.eco-bento-card:hover .blink-cursor {
    animation: blinkText 0.9s infinite steps(2, start);
    opacity: 1;
}

@keyframes blinkText {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.browser-speed-badge {
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: 800;
    color: #00e676;
    background: rgba(0, 230, 118, 0.1);
    border: 1px solid rgba(0, 230, 118, 0.3);
    padding: 2px 6px;
    border-radius: 4px;
}

.eco-bento-card.is-active .browser-speed-badge,
.eco-bento-card:hover .browser-speed-badge {
    animation: speedPulse 2s infinite ease-in-out;
}

@keyframes speedPulse {
    0%, 100% { box-shadow: 0 0 0 rgba(0, 230, 118, 0); }
    50% { box-shadow: 0 0 10px rgba(0, 230, 118, 0.35); }
}

.browser-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.browser-tags span {
    font-size: 10px;
    color: #ffd23f;
    background: rgba(255, 210, 63, 0.08);
    padding: 2px 7px;
    border-radius: 4px;
    border: 1px solid rgba(255, 210, 63, 0.15);
    transition: all 0.25s ease;
}

.eco-bento-card.is-active .browser-tags span,
.eco-bento-card:hover .browser-tags span {
    border-color: rgba(255, 210, 63, 0.4);
    background: rgba(255, 210, 63, 0.14);
}

/* Widget 2: Google Search Snippet */
.widget-google-rank {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}

.google-query {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #8c8ea0;
    font-family: monospace;
    background: rgba(255, 255, 255, 0.03);
    padding: 4px 8px;
    border-radius: 6px;
}

.google-result {
    display: flex;
    align-items: center;
    gap: 8px;
}

.google-rank-badge {
    font-family: var(--font-heading);
    font-size: 10.5px;
    font-weight: 800;
    color: #ffd23f;
    background: rgba(255, 210, 63, 0.15);
    border: 1px solid rgba(255, 210, 63, 0.3);
    padding: 2px 7px;
    border-radius: 4px;
}

.google-title {
    font-family: var(--font-heading);
    font-size: 11.5px;
    font-weight: 700;
    color: #ffffff;
}

.google-stat {
    font-size: 10.5px;
    color: #00e676;
    font-weight: 700;
}

/* Widget 3: Funnel Flow Nodes */
.widget-funnel-flow {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: 4px;
}

.funnel-node {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 10px;
    color: #c4c6d8;
    text-align: center;
    font-weight: 600;
}

.funnel-node--active {
    background: rgba(255, 210, 63, 0.15);
    border-color: rgba(255, 210, 63, 0.4);
    color: #ffd23f;
    box-shadow: 0 0 10px rgba(255, 210, 63, 0.2);
}

.eco-bento-card.is-active .funnel-node--active,
.eco-bento-card:hover .funnel-node--active {
    animation: activeNodeGlow 2s infinite alternate;
}

@keyframes activeNodeGlow {
    0% { box-shadow: 0 0 5px rgba(255, 210, 63, 0.2); }
    100% { box-shadow: 0 0 15px rgba(255, 210, 63, 0.5); }
}

.funnel-arrow {
    color: rgba(255, 210, 63, 0.6);
    font-size: 12px;
}

.eco-bento-card.is-active .funnel-arrow,
.eco-bento-card:hover .funnel-arrow {
    animation: arrowPulse 1.5s infinite;
}

@keyframes arrowPulse {
    0%, 100% { transform: translateX(0); opacity: 0.6; }
    50% { transform: translateX(3px); opacity: 1; color: var(--accent-yellow); }
}

/* Widget 4: Viral Soundwave Equalizer */
.widget-viral-sound {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 210, 63, 0.15);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
}

.sound-equalizer {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 18px;
}

.eq-bar {
    width: 3px;
    background: var(--accent-yellow);
    border-radius: 2px;
    height: 40%;
}

.bar-1 { height: 40%; }
.bar-2 { height: 70%; }
.bar-3 { height: 50%; }
.bar-4 { height: 80%; }
.bar-5 { height: 45%; }

.eco-bento-card.is-active .eq-bar,
.eco-bento-card:hover .eq-bar {
    animation: eqPulse 1.2s infinite ease-in-out alternate;
}

.eco-bento-card.is-active .bar-1, .eco-bento-card:hover .bar-1 { animation-delay: 0.1s; }
.eco-bento-card.is-active .bar-2, .eco-bento-card:hover .bar-2 { animation-delay: 0.3s; }
.eco-bento-card.is-active .bar-3, .eco-bento-card:hover .bar-3 { animation-delay: 0.5s; }
.eco-bento-card.is-active .bar-4, .eco-bento-card:hover .bar-4 { animation-delay: 0.2s; }
.eco-bento-card.is-active .bar-5, .eco-bento-card:hover .bar-5 { animation-delay: 0.4s; }

@keyframes eqPulse {
    0% { height: 20%; }
    100% { height: 100%; }
}

.viral-views-badge {
    font-family: var(--font-heading);
    font-size: 11.5px;
    font-weight: 800;
    color: #ffffff;
}

.viral-tag {
    font-size: 10px;
    color: #8c8ea0;
}

/* Widget 5: Brand Palette & Typography */
.widget-brand-palette {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 4px;
}

.palette-swatches {
    display: flex;
    gap: 6px;
}

.swatch {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    transition: transform 0.25s ease;
}

.swatch:hover,
.eco-bento-card.is-active .swatch-gold {
    transform: scale(1.2);
}

.swatch-obsidian { background: #08080a; }
.swatch-gold { background: #ffd23f; box-shadow: 0 0 8px rgba(255, 210, 63, 0.4); }
.swatch-platinum { background: #e2e4f0; }

.palette-ratio {
    font-family: var(--font-heading);
    font-size: 10.5px;
    color: #c4c6d8;
    font-weight: 600;
}

/* Widget 6: Climbing Animated ROAS Graph */
.widget-roas-chart {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 210, 63, 0.15);
    border-radius: 12px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
}

.roas-svg-line {
    width: 80px;
    height: 24px;
}

.roas-path-animated {
    stroke-dasharray: 200;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.6s ease;
}

.eco-bento-card.is-active .roas-path-animated,
.eco-bento-card:hover .roas-path-animated {
    animation: drawRoas 2.8s cubic-bezier(0.16, 1, 0.3, 1) infinite alternate;
}

@keyframes drawRoas {
    0% { stroke-dashoffset: 200; }
    100% { stroke-dashoffset: 0; }
}

.roas-node-pulse {
    transition: all 0.3s ease;
}

.eco-bento-card.is-active .roas-node-pulse,
.eco-bento-card:hover .roas-node-pulse {
    animation: nodeGlow 1.5s infinite alternate;
}

@keyframes nodeGlow {
    0% { r: 3; filter: drop-shadow(0 0 2px #00e676); }
    100% { r: 4.5; filter: drop-shadow(0 0 8px #00e676); }
}

.roas-stat {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 800;
    color: #00e676;
}

.bento-foot {
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: auto;
}

.bento-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 800;
    color: var(--accent-yellow);
    text-decoration: none;
    transition: transform 0.22s ease;
}

.bento-link .arrow {
    transition: transform 0.22s ease;
}

.eco-bento-card:hover .bento-link .arrow,
.eco-bento-card.is-active .bento-link .arrow {
    transform: translateX(4px);
}

@media (max-width: 1024px) {
    .eco-bento-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }
}

@media (max-width: 640px) {
    .eco-bento-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .eco-bento-card {
        padding: 20px 18px;
    }
}





/* ==========================================================================
   10. STUDIO CONSOLE: VIP HOTLINE & FAST-TRACK BRIEF LAUNCHER
   ========================================================================== */
.audit-section {
    position: relative;
    background: #060608;
    padding: 45px 0 85px;
    overflow: hidden;
}

.audit-ambient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    z-index: 0;
}

.audit-orb-1 {
    top: 5%;
    left: -10%;
    width: 550px;
    height: 550px;
    background: radial-gradient(circle, rgba(255, 210, 63, 0.14) 0%, transparent 70%);
}

.audit-orb-2 {
    bottom: -5%;
    right: -10%;
    width: 650px;
    height: 650px;
    background: radial-gradient(circle, rgba(255, 184, 28, 0.08) 0%, transparent 70%);
}

.audit-grid-overlay {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: 0.4;
    pointer-events: none;
    z-index: 0;
}

.audit-head {
    margin-bottom: 30px;
}

/* UNIFIED TITANIUM GLASS MASTER CONSOLE */
.studio-console-monolith {
    position: relative;
    z-index: 2;
    background: linear-gradient(145deg, rgba(20, 20, 26, 0.96) 0%, rgba(10, 10, 14, 0.98) 100%);
    border: 1.5px solid rgba(255, 210, 63, 0.32);
    border-radius: 28px;
    padding: 44px 44px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.85), 0 0 50px rgba(255, 210, 63, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    overflow: hidden;
}

.console-laser-beam {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ffd23f, #ffffff, #ffd23f, transparent);
    background-size: 200% 100%;
    animation: laserSweep 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.console-grid-inner {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 48px;
    align-items: flex-start;
}

/* LEFT DESK: Executive Producer Direct Line */
.console-desk-left {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-right: 12px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.desk-slot-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #00e676;
    background: rgba(0, 230, 118, 0.1);
    border: 1px solid rgba(0, 230, 118, 0.3);
    padding: 6px 14px;
    border-radius: var(--radius-full);
    width: fit-content;
}

.slot-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #00e676;
    box-shadow: 0 0 8px #00e676;
    animation: alertPulse 1.4s ease-in-out infinite;
}

.desk-heading {
    font-family: var(--font-heading);
    font-size: clamp(26px, 2.6vw, 34px);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
    letter-spacing: -0.6px;
    margin: 0;
}

.desk-lead-quote {
    font-size: 14px;
    line-height: 1.65;
    color: #a4a4b8;
    font-style: italic;
    padding-left: 14px;
    border-left: 2px solid var(--accent-yellow);
    margin: 0;
}

/* VIP 1-Tap Direct Action Tiles */
.vip-action-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 4px;
}

.vip-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.09);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
}

.vip-tile:hover {
    background: rgba(255, 210, 63, 0.08);
    border-color: rgba(255, 210, 63, 0.45);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.vip-tile-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vip-tile-icon svg {
    width: 20px;
    height: 20px;
}

.wa-icon {
    background: rgba(37, 211, 102, 0.15);
    color: #25d366;
    border: 1px solid rgba(37, 211, 102, 0.3);
}

.call-icon {
    background: rgba(255, 210, 63, 0.15);
    color: #ffd23f;
    border: 1px solid rgba(255, 210, 63, 0.3);
}

.email-icon {
    background: rgba(0, 229, 255, 0.15);
    color: #00e5ff;
    border: 1px solid rgba(0, 229, 255, 0.3);
}

.loc-icon {
    background: rgba(255, 107, 107, 0.15);
    color: #ff6b6b;
    border: 1px solid rgba(255, 107, 107, 0.3);
}

.vip-tile-content {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.vip-tile-tag {
    font-family: var(--font-heading);
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 0.8px;
    color: #8c8ea0;
    text-transform: uppercase;
}

.vip-tile-content strong {
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vip-tile-detail {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent-yellow);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Trust Guarantee Badges */
.console-guarantees {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.guarantee-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 700;
    color: #c4c6d8;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 5px 12px;
    border-radius: var(--radius-full);
}

.guarantee-chip .g-icon {
    font-size: 12px;
}

/* RIGHT FORM: Fast-Track Project Configurator */
.console-form-right, #project-brief-form {
    display: flex;
    flex-direction: column;
    scroll-margin-top: 80px;
}

.form-monolith-header {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.form-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--accent-yellow);
    background: rgba(255, 210, 63, 0.08);
    border: 1px solid rgba(255, 210, 63, 0.45);
    box-shadow: 0 0 14px rgba(255, 210, 63, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    padding: 5px 13px;
    border-radius: var(--radius-full);
    margin-bottom: 6px;
    width: fit-content;
}

.live-dot-gold {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffd23f;
    box-shadow: 0 0 8px #ffd23f;
    animation: alertPulse 1.4s ease-in-out infinite;
    flex-shrink: 0;
}

.form-monolith-title {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.3px;
    margin: 4px 0 2px;
}

.form-monolith-sub {
    font-size: 12.5px;
    color: #8c8ea0;
    margin: 0;
}

/* Interactive Scope Chips */
.interactive-scope-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.scope-chip {
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 700;
    color: #c4c6d8;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 7px 15px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    user-select: none;
}

.scope-chip * {
    pointer-events: none;
}

.scope-chip svg {
    flex-shrink: 0;
    color: #ffd23f;
    stroke: #ffd23f;
    transition: all 0.25s ease;
}

.scope-chip:hover,
.scope-chip.is-selected {
    color: #08080a;
    background: linear-gradient(135deg, #ffd23f 0%, #ffc107 100%);
    border-color: #ffd23f;
    font-weight: 900;
    box-shadow: 0 4px 16px rgba(255, 210, 63, 0.4);
    transform: translateY(-1px);
}

.scope-chip:hover svg,
.scope-chip.is-selected svg {
    color: #08080a;
    stroke: #08080a;
}

.g-icon-svg {
    flex-shrink: 0;
    color: #ffd23f;
    stroke: #ffd23f;
}

.dsm-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-row--2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.form-field label {
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #c4c6d8;
}

.form-field input, .form-field select, .form-field textarea {
    width: 100%;
    padding: 12px 14px;
    min-height: 46px;
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    font-family: var(--font-heading) !important;
    font-size: 13.5px;
    font-weight: 600;
    color: #ffffff;
    outline: none;
    transition: all 0.25s ease;
}

.form-field select {
    background-color: #121217;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffd23f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
    cursor: pointer;
    font-family: var(--font-heading) !important;
    font-weight: 600;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.form-field select option {
    background-color: #121217;
    color: #ffffff;
    font-family: var(--font-heading) !important;
    font-size: 13.5px;
    font-weight: 600;
    padding: 10px;
}

.form-field textarea {
    resize: none;
    font-family: var(--font-heading) !important;
    font-weight: 500;
}

.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
    border-color: #ffd23f;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 16px rgba(255, 210, 63, 0.25);
}

.btn-submit-audit {
    position: relative;
    width: 100%;
    min-height: 52px;
    padding: 11px 18px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: linear-gradient(135deg, #ffd23f 0%, #ffbe0b 50%, #f59e0b 100%);
    box-shadow: 0 8px 24px rgba(255, 210, 63, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    color: #08080a !important;
    font-family: var(--font-heading);
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: 0.4px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-submit-audit::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.6s ease;
}

.btn-submit-audit:hover::before {
    left: 100%;
}

.btn-submit-audit:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(255, 210, 63, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.65);
    border-color: rgba(255, 255, 255, 0.5);
}

.btn-submit-audit:active {
    transform: translateY(0);
    box-shadow: 0 4px 16px rgba(255, 210, 63, 0.4);
}

.cta-spark-beacon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #08080a;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.btn-submit-audit:hover .cta-spark-beacon {
    transform: rotate(20deg) scale(1.1);
}

.cta-text-main {
    flex-grow: 1;
    text-align: center;
    font-weight: 800;
}

.cta-arrow-badge {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #08080a;
    flex-shrink: 0;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease;
}

.btn-submit-audit:hover .cta-arrow-badge {
    transform: translateX(4px);
    background: rgba(0, 0, 0, 0.25);
}

.form-security-seal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--font-heading);
    font-size: clamp(10px, 1.05vw, 11.5px);
    font-weight: 700;
    color: #9294a6;
    margin-top: 8px;
    text-align: center;
    white-space: nowrap;
}

.form-security-seal svg {
    color: #00e676;
    stroke: #00e676;
    flex-shrink: 0;
    width: 13px;
    height: 13px;
    margin-top: -1px;
}

.form-feedback {
    font-size: 13px;
    text-align: center;
    border-radius: 10px;
    padding: 10px;
    display: none;
}

.form-feedback.success {
    display: block;
    background: rgba(0, 230, 118, 0.15);
    color: #00e676;
    border: 1px solid rgba(0, 230, 118, 0.4);
}

@media (max-width: 1024px) {
    .studio-console-monolith {
        padding: 32px 24px;
    }
    .console-grid-inner {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .console-desk-left {
        padding-right: 0;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        padding-bottom: 32px;
    }
}

@media (max-width: 640px) {
    .audit-section {
        padding: 65px 0;
    }
    .studio-console-monolith {
        padding: 24px 18px;
        border-radius: 20px;
    }
    .vip-action-tiles {
        grid-template-columns: 1fr;
    }
    .form-row--2col {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   11. TESTIMONIALS & FAQ ACCORDION
   ========================================================================== */
/* ==========================================================================
   11. CLIENT TESTIMONIALS & CASE STUDIES (Luxury Animated Showcase)
   ========================================================================== */
.testimonials-section {
    position: relative;
    background: #060609;
    padding: 90px 0;
    overflow: hidden;
}

.testi-ambient-aurora {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 360px;
    background: radial-gradient(circle, rgba(255, 210, 63, 0.12) 0%, rgba(255, 170, 0, 0.03) 50%, transparent 70%);
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
    animation: auroraBreathe 7s ease-in-out infinite alternate;
}

@keyframes auroraBreathe {
    0% { transform: translateX(-50%) scale(0.9); opacity: 0.6; }
    100% { transform: translateX(-50%) scale(1.15); opacity: 1; }
}

.testi-carousel-wrapper {
    position: relative;
    max-width: 960px;
    margin: 40px auto 0;
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 1;
}

.testimonial-swiper {
    width: 100%;
    padding: 10px 4px 50px;
    overflow: hidden;
}

.testi-nav-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(22, 22, 30, 0.85);
    border: 1.5px solid rgba(255, 210, 63, 0.3);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(12px);
    z-index: 2;
}

.testi-nav-btn svg {
    width: 20px;
    height: 20px;
    transition: transform 0.2s ease;
}

.testi-nav-btn:hover {
    background: var(--accent-yellow);
    color: var(--text-dark);
    border-color: var(--accent-yellow);
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(255, 210, 63, 0.5);
}

.testi-btn-prev:hover svg {
    transform: translateX(-2px);
}

.testi-btn-next:hover svg {
    transform: translateX(2px);
}

.testi-card {
    position: relative;
    background: linear-gradient(145deg, rgba(22, 22, 30, 0.92) 0%, rgba(12, 12, 16, 0.98) 100%);
    border: 1.5px solid rgba(255, 210, 63, 0.3);
    border-radius: var(--radius-lg);
    padding: 38px 42px;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.85), 0 0 35px rgba(255, 210, 63, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    overflow: hidden;
    transition: var(--transition);
}

.testi-card:hover {
    border-color: var(--accent-yellow);
    box-shadow: 0 30px 70px -10px rgba(0, 0, 0, 0.95), 0 0 45px rgba(255, 210, 63, 0.18);
}

.testi-watermark-quote {
    position: absolute;
    top: -10px;
    right: 24px;
    font-family: Georgia, serif;
    font-size: 130px;
    line-height: 1;
    color: rgba(255, 210, 63, 0.06);
    user-select: none;
    pointer-events: none;
}

.testi-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.testi-stars {
    color: var(--accent-yellow);
    font-size: 19px;
    letter-spacing: 2px;
    filter: drop-shadow(0 0 6px rgba(255, 210, 63, 0.7));
}

.testi-metric-badge {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 700;
    color: #00e676;
    background: rgba(0, 230, 118, 0.1);
    border: 1px solid rgba(0, 230, 118, 0.3);
    padding: 3px 10px;
    border-radius: var(--radius-full);
    letter-spacing: 0.5px;
}

.testi-quote {
    font-size: clamp(15px, 2vw, 17px);
    line-height: 1.7;
    color: #f0f0f5;
    margin-bottom: 26px;
    font-style: italic;
    position: relative;
    z-index: 1;
}

.testi-author-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    z-index: 1;
}

.testi-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.testi-avatar-initials {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 210, 63, 0.25) 0%, rgba(255, 170, 0, 0.1) 100%);
    border: 1.5px solid rgba(255, 210, 63, 0.5);
    color: var(--accent-yellow);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 14px rgba(255, 210, 63, 0.2);
}

.testi-avatar-verified {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #00e676;
    color: #08080a;
    font-size: 9.5px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #141418;
    box-shadow: 0 0 6px #00e676;
}

.testi-author strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 15.5px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.testi-author span {
    display: block;
    font-size: 12.5px;
    color: var(--accent-yellow);
    line-height: 1.3;
}

.testi-company-tag {
    margin-left: auto;
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #8c8c98;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
}

.testi-pagination {
    bottom: 10px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.testi-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.25);
    opacity: 1;
    border-radius: var(--radius-full);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    margin: 0 !important;
}

.testi-pagination .swiper-pagination-bullet-active {
    width: 28px;
    background: var(--accent-yellow) !important;
    box-shadow: 0 0 12px rgba(255, 210, 63, 0.6);
}

/* Studio Proof Metrics Ribbon */
.testi-proof-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-width: 960px;
    margin: 32px auto 0;
    position: relative;
    z-index: 1;
}

.testi-proof-item {
    background: linear-gradient(135deg, rgba(24, 24, 30, 0.7) 0%, rgba(14, 14, 18, 0.9) 100%);
    border: 1px solid rgba(255, 210, 63, 0.2);
    border-radius: var(--radius-md);
    padding: 20px 16px;
    text-align: center;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
    transition: var(--transition);
}

.testi-proof-item:hover {
    border-color: var(--accent-yellow);
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.7), 0 0 24px rgba(255, 210, 63, 0.12);
}

.proof-num {
    font-family: var(--font-heading);
    font-size: clamp(22px, 2.5vw, 28px);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 4px;
    background: linear-gradient(135deg, #ffffff 0%, var(--accent-yellow) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.proof-label {
    font-size: 11px;
    font-weight: 600;
    color: #9e9ea8;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.faq-section {
    background: #0a0a0d;
    padding: 80px 0;
    content-visibility: auto;
    contain-intrinsic-size: 600px;
}

.faq-accordion {
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-item {
    background: #141418;
    border: 1px solid #242428;
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: var(--transition);
}

.faq-item.active {
    border-color: var(--accent-yellow);
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 18px 20px;
    min-height: 54px;
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    text-align: left;
}

.faq-icon {
    font-size: 22px;
    color: var(--accent-yellow);
    margin-left: 12px;
    flex-shrink: 0;
}

.faq-answer {
    padding: 0 20px 20px;
    font-size: 14px;
    color: #a9a9b2;
    line-height: 1.7;
    display: none;
}

.faq-item.active .faq-answer {
    display: block;
    animation: fadeIn 0.2s ease;
}

/* ==========================================================================
   12. ULTRA-LUXURY CREATIVE STUDIO MEGA FOOTER
   ========================================================================== */
.studio-footer {
    position: relative;
    background: #060608;
    padding: 48px 0 24px;
    border-top: 1px solid rgba(255, 210, 63, 0.18);
    overflow: hidden;
}

.f-ambient-glow {
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 800px; height: 280px;
    background: radial-gradient(ellipse at 50% 0%, rgba(255, 210, 63, 0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Part 1: Monumental Agency Statement & Direct Trigger */
.f-hero-cta {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 36px;
    align-items: center;
    background: linear-gradient(135deg, rgba(24, 24, 30, 0.75) 0%, rgba(12, 12, 16, 0.95) 100%);
    border: 1px solid rgba(255, 210, 63, 0.25);
    border-radius: var(--radius-lg);
    padding: 34px 36px;
    margin-bottom: 30px;
    box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.8), 0 0 35px rgba(255, 210, 63, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.f-availability-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--accent-yellow);
    background: var(--accent-gold-subtle);
    border: 1px solid var(--border-gold);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    margin-bottom: 12px;
}

.f-live-pulse {
    width: 7px; height: 7px;
    background: #00e676;
    border-radius: 50%;
    box-shadow: 0 0 10px #00e676;
    animation: pulseLive 1.8s infinite;
}

@keyframes pulseLive {
    0% { transform: scale(0.9); opacity: 0.7; }
    50% { transform: scale(1.3); opacity: 1; }
    100% { transform: scale(0.9); opacity: 0.7; }
}

.f-cta-headline {
    font-family: var(--font-heading);
    font-size: clamp(24px, 3.2vw, 36px);
    font-weight: 800;
    color: #fff;
    line-height: 1.18;
    letter-spacing: -0.5px;
    margin-bottom: 10px;
}

.f-cta-sub {
    font-size: 13.5px;
    color: #b0b0b8;
    line-height: 1.55;
    max-width: 500px;
}

.f-cta-right {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.f-dispatch-card {
    width: 100%;
    max-width: 440px;
    background: linear-gradient(135deg, rgba(28, 28, 36, 0.95) 0%, rgba(16, 16, 22, 0.98) 100%);
    border: 1.5px solid rgba(255, 210, 63, 0.35);
    border-radius: var(--radius-md);
    padding: 22px 20px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7), 0 0 30px rgba(255, 210, 63, 0.08);
    display: flex;
    flex-direction: column;
    gap: 12px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: var(--transition);
    box-sizing: border-box;
    overflow: hidden;
}

.f-dispatch-card:hover {
    border-color: var(--accent-yellow);
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.8), 0 0 40px rgba(255, 210, 63, 0.16);
    transform: translateY(-2px);
}

.f-dispatch-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-sizing: border-box;
    width: 100%;
}

.f-producer-avatar {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 210, 63, 0.15);
    border: 1.5px solid rgba(255, 210, 63, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-yellow);
    flex-shrink: 0;
}

.f-avatar-dot {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #00e676;
    border: 1.5px solid #141418;
    box-shadow: 0 0 8px #00e676;
}

.f-dispatch-meta strong {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.f-dispatch-meta span {
    display: block;
    font-size: 11.5px;
    color: #a0a0ab;
    line-height: 1.3;
}

.f-btn-launch {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    background: var(--accent-yellow);
    color: var(--text-dark) !important;
    font-family: var(--font-heading);
    font-size: 13.5px;
    font-weight: 700;
    padding: 12px 14px;
    min-height: 46px;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-gold);
    transition: var(--transition);
    white-space: nowrap;
    box-sizing: border-box;
}

.f-btn-launch span {
    white-space: nowrap;
}

.f-btn-launch:hover {
    background: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(255, 255, 255, 0.35);
}

.f-btn-arrow {
    font-size: 17px;
    transition: transform 0.25s ease;
}

.f-btn-launch:hover .f-btn-arrow {
    transform: translateX(4px);
}

.f-quick-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
}

.f-action-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 9px 4px;
    min-height: 40px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 11px;
    font-weight: 600;
    color: #dfdfe6 !important;
    white-space: nowrap;
    transition: var(--transition);
    box-sizing: border-box;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.f-action-chip span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.f-action-chip:hover {
    background: rgba(255, 210, 63, 0.15);
    border-color: var(--accent-yellow);
    color: #fff !important;
    transform: translateY(-1px);
}

.f-chip-whatsapp {
    color: #25D366 !important;
    border-color: rgba(37, 211, 102, 0.25);
    background: rgba(37, 211, 102, 0.08);
}

.f-chip-whatsapp:hover {
    background: #25D366;
    color: #08080a !important;
    border-color: #25D366;
}

.f-dispatch-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11.5px;
    color: #8e8e98;
    padding-top: 2px;
    flex-wrap: wrap;
    text-align: center;
}

.f-direct-email {
    color: var(--accent-yellow) !important;
    font-weight: 600;
    text-decoration: underline;
    transition: var(--transition);
    white-space: nowrap;
}

.f-direct-email:hover {
    color: #fff !important;
}

/* Part 2: Studio Soundstages & Global Hubs Bar */
.f-hubs-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.f-hub-card {
    background: rgba(18, 18, 22, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    transition: var(--transition);
}

.f-hub-card:hover {
    border-color: rgba(255, 210, 63, 0.35);
    background: rgba(24, 24, 30, 0.9);
    transform: translateY(-2px);
}

.f-hub-badge {
    font-family: var(--font-heading);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: var(--accent-yellow);
    margin-bottom: 4px;
}

.f-hub-card h4 {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2px;
}

.f-hub-card p {
    font-size: 12px;
    color: #8e8e98;
    line-height: 1.45;
    margin-bottom: 6px;
}

.f-hub-tz {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 600;
    color: #ffd23f;
    background: rgba(255, 210, 63, 0.08);
    padding: 2px 7px;
    border-radius: 4px;
}

/* Part 3: Mega Directory 4-Column Grid */
.f-directory-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    margin-bottom: 24px;
}

.f-col-title {
    font-family: var(--font-heading);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.f-col-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
}

.f-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.f-links a, .f-links button, .f-link-btn {
    color: #a8a8b2;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition);
    line-height: 1.4;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.f-links a:hover, .f-links button:hover, .f-link-btn:hover {
    color: var(--accent-yellow);
    transform: translateX(3px);
}

/* Part 4: Subtle Background Watermark Typography */
.f-watermark-wrap {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
    overflow: hidden;
    line-height: 0.85;
    user-select: none;
    pointer-events: none;
    z-index: 0;
    opacity: 0.35;
}

.f-watermark-text {
    font-family: var(--font-heading);
    font-size: clamp(60px, 14vw, 150px);
    font-weight: 900;
    letter-spacing: 6px;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.04);
    display: inline-block;
}

/* Part 5: Ultra-Luxury Bottom Legal & Social Bar */
.f-bottom-bar {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 24px;
    margin-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 12px;
    color: #8c8c9a;
    gap: 20px;
    flex-wrap: wrap;
}

.f-bottom-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.f-copy-text {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 500;
    color: #a2a2b0;
    letter-spacing: 0.2px;
}

.f-copy-text strong {
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.f-rights-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    background: rgba(255, 210, 63, 0.08);
    border: 1px solid rgba(255, 210, 63, 0.22);
    border-radius: var(--radius-full);
    font-size: 10.5px;
    font-weight: 600;
    color: var(--accent-yellow);
    letter-spacing: 0.3px;
}

.f-social-chips {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.f-social-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 13px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--radius-full);
    font-size: 11.5px;
    font-weight: 600;
    color: #c4c4ce !important;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.f-social-chip:hover {
    background: var(--accent-yellow);
    border-color: var(--accent-yellow);
    color: #08080a !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 210, 63, 0.35);
}

.f-bottom-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.f-legal-link {
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 500;
    color: #8c8c9a;
    text-decoration: none;
    transition: color 0.2s ease;
}

.f-legal-link:hover {
    color: var(--accent-yellow);
}

.f-sep {
    color: #4a4a58;
}

.f-back-top {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    font-weight: 600;
}

.f-back-top:hover {
    background: rgba(255, 210, 63, 0.12);
    border-color: rgba(255, 210, 63, 0.35);
    color: var(--accent-yellow);
}

/* Responsive Footer Breakpoints */
@media (max-width: 1024px) {
    .f-hero-cta { grid-template-columns: 1fr; gap: 30px; padding: 36px 30px; }
    .f-hubs-grid { grid-template-columns: 1fr; gap: 14px; }
    .f-directory-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 24px; }
}

@media (max-width: 768px) {
    .studio-footer { padding: 36px 0 25px; }
    .f-hero-cta {
        padding: 20px 14px;
        gap: 20px;
        margin-bottom: 24px;
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }
    .f-cta-headline { font-size: 22px; margin-bottom: 8px; }
    .f-cta-sub { font-size: 13px; }
    .f-cta-right { justify-content: center; width: 100%; }
    .f-dispatch-card {
        width: 100%;
        max-width: 100%;
        padding: 16px 12px;
        gap: 10px;
        box-sizing: border-box;
    }
    .f-btn-launch {
        width: 100%;
        font-size: 13px;
        padding: 11px 10px;
        min-height: 44px;
    }
    .f-quick-actions { gap: 6px; }
    .f-action-chip {
        padding: 8px 3px;
        font-size: 10.5px;
        min-height: 38px;
    }
    .f-quick-contacts { width: 100%; flex-direction: column; align-items: stretch; }
    .f-contact-pill { justify-content: center; width: 100%; }
    .f-hubs-grid { margin-bottom: 24px; padding-bottom: 20px; }
    .f-directory-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; margin-bottom: 20px; }
    .f-bottom-bar { flex-direction: column; text-align: center; gap: 16px; width: 100%; box-sizing: border-box; align-items: center; }
    .f-bottom-left { justify-content: center; text-align: center; gap: 8px; flex-direction: column; }
    .f-social-chips { justify-content: center; flex-wrap: wrap; gap: 6px; width: 100%; max-width: 100%; }
    .f-social-chip { padding: 5px 10px; font-size: 11px; }
    .f-bottom-right { justify-content: center; }
}


/* ==========================================================================
   13. FULL-SCREEN VIDEO LIGHTBOX
   ========================================================================== */
.video-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    padding: 16px;
}

.video-lightbox.is-open {
    opacity: 1;
    visibility: visible;
}

.video-lightbox__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(10px);
}

.video-lightbox__container {
    position: relative;
    width: 100%;
    max-width: 960px;
    background: #000;
    border: 1px solid var(--border-gold);
    border-radius: var(--radius-md);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.8), 0 0 50px rgba(255, 210, 63, 0.2);
    overflow: hidden;
    transform: scale(0.92);
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 10;
}

.video-lightbox.is-open .video-lightbox__container {
    transform: scale(1);
}

.video-lightbox__close {
    position: absolute;
    top: 10px; right: 10px;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    border: 1px solid #444;
}

.video-lightbox__close:hover {
    background: var(--accent-yellow);
    color: var(--text-dark);
}

.video-lightbox__frame-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

.video-lightbox__frame-wrapper iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
}

/* ==========================================================================
   14. MOBILE FLOATING CHAT ICON (Yellow Chat Button from Screenshot)
   ========================================================================== */
.mobile-chat-fab {
    position: fixed;
    right: 20px;
    bottom: 84px;
    z-index: 1050;
    display: none;
}

.mobile-chat-fab a {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--accent-yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(255, 210, 63, 0.45);
    transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.mobile-chat-fab a:hover, .mobile-chat-fab a:active {
    transform: scale(1.08);
}

/* ==========================================================================
   15. MOBILE BOTTOM STICKY CAPSULE DOCK WITH EXACT LASER BEAM
   ========================================================================== */
.mobile-bottom-dock {
    display: none;
    position: fixed;
    bottom: 14px;
    left: 16px;
    right: 16px;
    max-width: 380px;
    margin: 0 auto;
    z-index: 1100;
    border-radius: 28px;
    box-shadow: 0 20px 48px -10px rgba(0, 0, 0, 0.95), 0 0 25px rgba(255, 210, 63, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.dock-laser-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 28px;
    pointer-events: none;
    z-index: 2;
    overflow: visible;
}

.laser-track-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.06);
    stroke-width: 0.7;
}

.laser-beam-line {
    fill: none;
    stroke: url(#exactLaserGrad);
    stroke-width: 0.9;
    stroke-linecap: round;
    stroke-dasharray: 240 570;
    animation: exactLaserGlide 3.8s linear infinite;
    filter: drop-shadow(0 0 2.5px #ffd23f) drop-shadow(0 0 6px rgba(255, 210, 63, 0.55));
}

@keyframes exactLaserGlide {
    0% { stroke-dashoffset: 810; }
    100% { stroke-dashoffset: 0; }
}

.mobile-dock-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: rgba(8, 8, 12, 0.92);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border-radius: 28px;
    padding: 6px 4px;
}

.dock-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: #94949e;
    text-decoration: none;
    font-family: var(--font-heading);
    font-size: 10.5px;
    font-weight: 500;
    padding: 6px 4px;
    border-radius: 18px;
    transition: all 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
}

.dock-item svg {
    width: 19px;
    height: 19px;
    stroke: currentColor;
    transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), stroke 0.22s ease, filter 0.22s ease;
}

.dock-item:hover {
    color: #fff;
}

.dock-item.active {
    color: var(--accent-yellow);
    font-weight: 700;
    background: radial-gradient(circle at 50% 50%, rgba(255, 210, 63, 0.14) 0%, transparent 80%);
}

.dock-item.active svg {
    stroke: var(--accent-yellow);
    filter: drop-shadow(0 0 6px rgba(255, 210, 63, 0.75));
    transform: translateY(-1px) scale(1.08);
}

.dock-item:active {
    transform: scale(0.92);
}

/* Modal Dialog */
.popup-modal {
    position: fixed;
    inset: 0;
    z-index: 1000000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    padding: 16px;
}

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

.popup-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(6px);
}

.popup-modal__content {
    position: relative;
    background: #16161a;
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 520px;
    padding: 34px 26px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.7);
    transform: scale(0.9);
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 10;
    max-height: 90vh;
    overflow-y: auto;
}

.popup-modal.is-open .popup-modal__content {
    transform: scale(1);
}

.popup-close-btn {
    position: absolute;
    top: 14px; right: 14px;
    font-size: 26px;
    color: #fff;
    width: 38px; height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-header h2 {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
}

.popup-header p {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.popup-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.popup-field input, .popup-field textarea {
    width: 100%;
    padding: 12px 14px;
    min-height: 48px;
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-sm);
    color: #fff;
    outline: none;
    font-family: var(--font-heading) !important;
    font-size: 14px;
    font-weight: 600;
}

.popup-field input:focus, .popup-field textarea:focus {
    border-color: var(--accent-yellow);
}

.btn-popup-submit {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    color: var(--text-dark);
    background: var(--accent-yellow);
    padding: 13px 24px;
    min-height: 48px;
    border-radius: var(--radius-full);
    transition: var(--transition);
    margin-top: 6px;
}

.btn-popup-submit:hover {
    background: #fff;
    transform: translateY(-2px);
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translate3d(0, -4px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ==========================================================================
   16. DEDICATED RESPONSIVE BREAKPOINTS
   ========================================================================== */
@media (max-width: 1100px) {
    .dsm-mega { grid-template-columns: repeat(2, 1fr); }
    .dsm-mind { grid-template-columns: repeat(2, 1fr); }
    .dsm-mind-panel { display: none; }
    .process-timeline { grid-template-columns: repeat(2, 1fr); }
    .dsf__top { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991px) {
    .desktop-nav, .header-socials, .btn-coffee, .btn-header-cta { display: none !important; }
    .hamburger-btn { display: flex !important; }
    .top-bar {
        display: block;
        padding: 5px 0;
        background: #050508;
        border-bottom: 1px solid rgba(255, 210, 63, 0.15);
    }
    .top-bar__actions { display: none; }
    .marquee-content { font-size: 11px; animation: marquee 24s linear infinite; }
    .alert-badge { font-size: 9px; padding: 1.5px 6px; }
    .hero-split { grid-template-columns: 1fr; gap: 36px; }
    .video-card-inner { height: 320px; }
    .portfolio-grid { grid-template-columns: 1fr; }
    .calc-grid { grid-template-columns: 1fr; }
    .dsm-exp__body { grid-template-columns: 1fr; }
    .audit-wrapper { grid-template-columns: 1fr; }
    .dsf__top { grid-template-columns: repeat(2, 1fr); }

    /* Testimonials Mobile Optimization */
    .testi-nav-btn { display: none !important; }
    .testi-carousel-wrapper { display: block; width: 100%; max-width: 100%; margin: 24px auto 0; box-sizing: border-box; }
    .testimonial-swiper { width: 100%; max-width: 100%; padding: 0 0 40px; box-sizing: border-box; }
    .testi-card { width: 100%; max-width: 100%; box-sizing: border-box; padding: 22px 16px; }
    .testi-card-top { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 14px; }
    .testi-stars { font-size: 16px; margin-bottom: 0; }
    .testi-metric-badge { font-size: 10px; padding: 2px 8px; }
    .testi-quote { font-size: 13.5px; line-height: 1.6; margin-bottom: 16px; }
    .testi-author-row { flex-wrap: wrap; gap: 10px; padding-top: 14px; }
    .testi-company-tag { display: none; }
    .testi-avatar-initials { width: 36px; height: 36px; font-size: 12px; }
    .testi-author strong { font-size: 13.5px; }
    .testi-author span { font-size: 11.5px; }
    .testi-proof-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; width: 100%; max-width: 100%; box-sizing: border-box; margin: 20px auto 0; }
    .testi-proof-item { padding: 14px 10px; }
    .proof-num { font-size: 20px; }
    .proof-label { font-size: 9.5px; letter-spacing: 0.5px; }
}

@media (max-width: 768px) {
    .mobile-bottom-dock { display: block; }
    .mobile-chat-fab { display: block; }
    body { padding-bottom: 84px; }
    .container { padding: 0 18px; }
    
    /* Sleek Clean Mobile Header */
    .main-header {
        position: sticky;
        top: 0;
        z-index: 1000;
        background: rgba(10, 10, 14, 0.94);
        backdrop-filter: blur(24px) saturate(180%);
        -webkit-backdrop-filter: blur(24px) saturate(180%);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    }
    .main-header__inner {
        height: 58px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .meeways-logo {
        gap: 9px;
    }
    .brand-name {
    font-family: 'Aclonica', cursive, sans-serif !important;
    font-size: 24px;
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: baseline;
    line-height: 1;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
    .brand-dot {
        font-size: 22px;
    }
    .logo-symbol {
        width: 30px;
        height: 30px;
    }
    .hamburger-btn {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 210, 63, 0.2);
    }
    
    /* Compact Mobile Section Spacing - Zero Excessive Blank Space */
    .hero-section { padding: 36px 0 32px; }
    .trust-marquee-section { padding: 28px 0; }
    .portfolio-section { padding: 36px 0; }
    .calculator-section { padding: 36px 0; }
    .process-section { padding: 36px 0; }
    .expertise-section { padding: 36px 0; }
    .press-section { padding: 22px 0; }
    .audit-section { padding: 36px 0; }
    .testimonials-section { padding: 36px 0; }
    .faq-section { padding: 36px 0; }
    .dsf { padding: 36px 0 24px; }

    /* Compact Headings & Subtitles */
    .section-eyebrow { margin-bottom: 8px; font-size: 10px; padding: 4px 12px; }
    .section-title { font-size: clamp(22px, 5.5vw, 28px); margin-bottom: 8px; }
    .section-subtitle { font-size: 13.5px; margin: 0 auto 20px; line-height: 1.55; }
    .portfolio-header { gap: 14px; margin-bottom: 22px; }
    
    .hero-title { font-size: clamp(26px, 7vw, 34px); letter-spacing: -0.5px; margin-bottom: 14px; }
    .hero-lead { font-size: 14.5px; margin-bottom: 18px; line-height: 1.55; }
    
    .hero-actions {
        flex-direction: column;
        width: 100%;
        gap: 10px;
        margin-bottom: 18px;
    }
    
    .btn-hero-primary, .btn-hero-watch {
        width: 100%;
        justify-content: center;
        min-height: 44px;
        padding: 12px 20px;
    }
    
    .hero-trust-bar { padding-top: 14px; gap: 10px; font-size: 12.5px; }
    .stars-badge { font-size: 14px; }
    
    .video-card-inner { height: 230px; }
    .hero-play-badge { width: 54px; height: 54px; }
    .hero-play-badge svg { width: 20px; height: 20px; }
    
    .portfolio-grid { gap: 16px; }
    .card-media { height: 190px; }
    .card-details { padding: 16px 14px; }
    .card-title { font-size: 15.5px; margin-bottom: 6px; }
    
    .calc-box { padding: 18px 14px; }
    .calc-pill { min-height: 56px; padding: 10px 12px; }
    .calc-result-card { padding: 20px 16px; }
    .est-price { font-size: 24px; margin-bottom: 8px; }
    
    .process-timeline {
        grid-template-columns: 1fr;
        gap: 12px;
        position: relative;
        border-left: 2px solid var(--border-gold);
        padding-left: 14px;
        margin-left: 6px;
        margin-top: 18px;
    }
    
    .stage-card { padding: 18px 16px; }
    .stage-num { font-size: 24px; margin-bottom: 6px; }
    .stage-title { font-size: 16px; margin-bottom: 6px; }
    .stage-desc { font-size: 13px; margin-bottom: 10px; }
    
    .dsm-exp { padding: 24px 16px; border-radius: var(--radius-md); }
    .dsm-exp__head { margin-bottom: 20px; }
    .dsm-exp__title { font-size: 22px; margin-bottom: 8px; }
    .dsm-exp__intro { font-size: 13.5px; }
    .dsm-exp__body { grid-template-columns: 1fr; gap: 20px; }
    .dsm-panel-inner { grid-template-columns: 1fr; gap: 16px; padding: 18px 16px; min-height: auto; }
    .dsm-panel-right { order: -1; }
    .dsm-panel-right .dsm-exp__media { min-height: 220px; height: 220px; }
    .dsm-panel-headline { font-size: 16.5px; }
    .dsm-panel-summary { font-size: 13px; }
    .dsm-deliv-item { padding: 8px 10px; }
    .dsm-panel-footer { flex-direction: column; align-items: stretch; gap: 10px; }
    .dsm-panel-cta { justify-content: center; width: 100%; text-align: center; }
    .dsm-panel-note { justify-content: center; font-size: 11px; }
    
    .audit-card { padding: 20px 16px; }
    .form-row--2col { grid-template-columns: 1fr; }
    .dsm-form { gap: 10px; }
    
    .testi-card { padding: 22px 16px; }
    .testi-quote { font-size: 14px; margin-bottom: 14px; }
    
    .faq-question { padding: 14px 16px; font-size: 14px; }
    .faq-answer { padding: 0 16px 14px; font-size: 13.5px; }
    
    .dsf__brand-bar { flex-direction: column; align-items: flex-start; gap: 12px; }
    .dsf__top { grid-template-columns: repeat(2, 1fr); gap: 22px 14px; }
    .dsf__bot { flex-direction: column; gap: 10px; text-align: center; }
}

@media (max-width: 480px) {
    .top-bar__alert { display: none; }
    .top-bar__inner { justify-content: flex-end; }
    .calc-btn-group { grid-template-columns: 1fr; }
    .logo-symbol { width: 36px; height: 36px; }
    .brand-name {
    font-family: 'Aclonica', cursive, sans-serif !important;
    font-size: 24px;
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: baseline;
    line-height: 1;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
    .brand-dot { font-size: 30px; }
    .est-price { font-size: 24px; }
}

/* --- A. SCROLL-DRIVEN SLIDE-DOWN / FADE-UP REVEAL SYSTEM --- */
[data-reveal] {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.js-loaded [data-reveal]:not(.is-revealed) {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
}

[data-reveal].is-revealed {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
}

[data-reveal-delay="100"] { transition-delay: 0.1s; }
[data-reveal-delay="150"] { transition-delay: 0.15s; }
[data-reveal-delay="200"] { transition-delay: 0.2s; }
[data-reveal-delay="300"] { transition-delay: 0.3s; }
[data-reveal-delay="400"] { transition-delay: 0.4s; }

/* --- B. INTERACTIVE CINEMATIC CUSTOM CURSOR --- */
.cursor-dot {
    position: fixed;
    top: 0; left: 0;
    width: 8px; height: 8px;
    background: #ffd23f;
    border-radius: 50%;
    pointer-events: none;
    z-index: 10000000;
    box-shadow: 0 0 12px #ffd23f, 0 0 20px rgba(255, 210, 63, 0.9);
    opacity: 0;
    will-change: transform;
}

.cursor-ring {
    position: fixed;
    top: 0; left: 0;
    width: 44px; height: 44px;
    border: 1.8px solid rgba(255, 210, 63, 0.7);
    background: rgba(255, 210, 63, 0.05);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    box-shadow: 0 0 16px rgba(255, 210, 63, 0.25);
    transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1), 
                height 0.25s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.25s ease, 
                background 0.25s ease,
                opacity 0.2s ease;
    will-change: transform, width, height;
}

.cursor-badge {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 800;
    color: #08080a;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
    pointer-events: none;
}

/* Hover States for Cursor */
.cursor-ring.is-hovering {
    width: 58px; height: 58px;
    border-color: var(--accent-yellow);
    background: rgba(255, 210, 63, 0.18);
    box-shadow: 0 0 24px rgba(255, 210, 63, 0.45);
}


.cursor-ring.is-drag {
    width: 88px; height: 88px;
    background: rgba(255, 255, 255, 0.94);
    border-color: var(--accent-yellow);
    box-shadow: 0 0 32px rgba(255, 255, 255, 0.5);
}

.cursor-ring.is-drag .cursor-badge {
    opacity: 1;
    transform: scale(1);
    color: #08080a;
}

@media (max-width: 768px) {
    .cursor-dot, .cursor-ring { display: none !important; }
}

/* --- C. 3D CARD PARALLAX TILT & MOUSE SPOTLIGHT BORDER --- */
[data-tilt], .hero-video-card, .eco-bento-card, .portfolio-card, .process-card, .calc-card, .testi-card, .vip-tile, .eco-stat-pod {
    position: relative;
    will-change: transform;
    transform-style: preserve-3d;
}

[data-tilt]::before, .hero-video-card::before, .eco-bento-card::before, .portfolio-card::before, .process-card::before, .testi-card::before, .vip-tile::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: radial-gradient(450px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 210, 63, 0.22), transparent 45%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 3;
}

[data-tilt]:hover::before, .hero-video-card:hover::before, .eco-bento-card:hover::before, .portfolio-card:hover::before, .process-card:hover::before, .testi-card:hover::before, .vip-tile:hover::before {
    opacity: 1;
}

/* --- D. INTERACTIVE CAROUSEL MOUSE PHYSICS --- */
.testimonial-swiper {
    cursor: grab;
    user-select: none;
    padding-bottom: 40px !important;
}

.testimonial-swiper:active {
    cursor: grabbing;
}

.testi-card {
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease;
}

.testi-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7);
}

/* ==========================================================================
   16. LUXURY FLOATING ANIMATED SCROLL DOWN CUE (LEGACY DISABLED)
   ========================================================================== */
.floating-scroll-cue {
    display: none !important;
}

/* Mouse Outline & Animated Wheel */
.scroll-mouse-track {
    width: 17px;
    height: 28px;
    border: 1.8px solid rgba(255, 210, 63, 0.65);
    border-radius: 12px;
    position: relative;
    display: flex;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
}

.scroll-mouse-wheel {
    width: 3.5px;
    height: 6.5px;
    background: var(--accent-yellow);
    border-radius: 3px;
    position: absolute;
    top: 5px;
    box-shadow: 0 0 8px #ffd23f;
    animation: mouseWheelSlide 2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

/* Cascading Animated Glowing Chevrons */
.scroll-arrows-flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -2px;
}

.scroll-svg-arrow {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: var(--accent-yellow);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 4px rgba(255, 210, 63, 0.85));
}

.scroll-svg-arrow.arrow-1 {
    animation: arrowGlide1 1.6s ease-in-out infinite;
}

.scroll-svg-arrow.arrow-2 {
    margin-top: -7px;
    animation: arrowGlide2 1.6s ease-in-out infinite;
}

@keyframes mouseWheelSlide {
    0% {
        opacity: 0;
        transform: translateY(0);
    }
    30% {
        opacity: 1;
    }
    80% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 0;
        transform: translateY(10px);
    }
}

@keyframes arrowGlide1 {
    0%, 100% {
        opacity: 0.3;
        transform: translateY(0);
    }
    50% {
        opacity: 1;
        transform: translateY(4px);
    }
}

@keyframes arrowGlide2 {
    0%, 100% {
        opacity: 0.15;
        transform: translateY(0);
    }
    50% {
        opacity: 0.85;
        transform: translateY(5px);
    }
}

@keyframes scrollCueEntrance {
    0% {
        opacity: 0;
        transform: translateY(calc(-50% - 35px));
    }
    100% {
        opacity: 1;
        transform: translateY(-50%);
    }
}

/* Mobile Responsiveness for Scroll Cue */
@media (max-width: 768px) {
    .floating-scroll-cue {
        right: 14px;
        top: auto;
        bottom: 84px; /* Positioned right above the mobile dock */
        transform: none;
        z-index: 85;
    }
    .floating-scroll-cue.is-scrolled {
        transform: translateY(20px) scale(0.88);
    }

    .scroll-cue-inner {
        padding: 9px 8px 7px;
        gap: 5px;
    }

    .scroll-cue-label {
        font-size: 7.5px;
        letter-spacing: 1.5px;
    }

    .scroll-mouse-track {
        width: 14px;
        height: 22px;
        border-width: 1.5px;
    }

    .scroll-mouse-wheel {
        width: 3px;
        height: 5px;
    }

    .scroll-svg-arrow {
        width: 11px;
        height: 11px;
    }
}

/* ==========================================================================
   SECTION 3.5: DEDICATED 9:16 VERTICAL VIDEO ADS & REELS SHOWCASE
   ========================================================================== */
.vertical-reels-section {
    padding: 100px 0 80px;
    background: radial-gradient(circle at 50% 10%, rgba(255, 210, 63, 0.05) 0%, transparent 60%),
                linear-gradient(180deg, #08080a 0%, #0c0c10 50%, #08080a 100%);
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.vreels-head {
    margin-bottom: 48px;
}

/* 4-Reel Grid */
.vreels-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 48px;
}

/* Individual Vertical Reel Card (Aspect Ratio 9:16) */
.vreel-card {
    position: relative;
    background: rgba(18, 18, 22, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.4s ease,
                box-shadow 0.4s ease;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}

.vreel-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: rgba(255, 210, 63, 0.45);
    box-shadow: 0 20px 40px -10px rgba(255, 210, 63, 0.18),
                0 0 25px rgba(255, 210, 63, 0.12);
}

.vreel-inner {
    position: relative;
    width: 100%;
}

.vreel-media-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    background: #000;
}

.vreel-poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
    display: block;
}

.vreel-card:hover .vreel-poster {
    transform: scale(1.06);
    filter: brightness(1.05);
}

/* Top Floating HUD Chips */
.vreel-hud-top {
    position: absolute;
    top: 14px;
    left: 14px;
    right: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 3;
    pointer-events: none;
}

.vreel-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(8, 8, 10, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.8px;
    color: #ffd23f;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.vreel-red-dot {
    width: 6px;
    height: 6px;
    background: #ff334b;
    border-radius: 50%;
    box-shadow: 0 0 8px #ff334b;
    animation: beaconPulse 1.8s infinite;
}

.vreel-metric-chip {
    font-family: var(--font-mono, monospace);
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: rgba(0, 0, 0, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 4px 9px;
    border-radius: var(--radius-full);
    letter-spacing: 0.4px;
}

/* Center Radiant Play Trigger */
.vreel-play-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 3;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.vreel-play-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(8, 8, 10, 0.85);
    border: 1.5px solid rgba(255, 210, 63, 0.7);
    color: #ffd23f;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 24px rgba(255, 210, 63, 0.35);
    transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.vreel-play-btn svg {
    width: 18px;
    height: 18px;
    margin-left: 2px;
}

.vreel-play-hint {
    font-family: var(--font-heading);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
    opacity: 0.85;
    transition: opacity 0.3s ease;
}

.vreel-card:hover .vreel-play-btn {
    transform: scale(1.15);
    background: #ffd23f;
    color: #08080a;
    box-shadow: 0 0 35px rgba(255, 210, 63, 0.7);
}

.vreel-card:hover .vreel-play-hint {
    opacity: 1;
    color: #ffd23f;
}

/* Bottom Metadata Gradient & Details */
.vreel-overlay-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px 16px 16px;
    background: linear-gradient(180deg, transparent 0%, rgba(8, 8, 10, 0.8) 40%, rgba(8, 8, 10, 0.96) 100%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.vreel-cat-tag {
    font-family: var(--font-mono, monospace);
    font-size: 9px;
    font-weight: 700;
    color: #ffd23f;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.vreel-title {
    font-family: var(--font-heading);
    font-size: 13.5px;
    font-weight: 700;
    color: #f0f0f5;
    line-height: 1.35;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vreel-specs-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.vreel-roas-badge {
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: 800;
    color: #00e676;
}

.vreel-aspect-tag {
    font-family: var(--font-mono, monospace);
    font-size: 9.5px;
    color: #8a8a9a;
}

/* Bottom CTA Strip */
.vreels-cta-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(18, 18, 22, 0.6);
    border: 1px solid rgba(255, 210, 63, 0.2);
    border-radius: 18px;
    padding: 24px 32px;
    margin-top: 12px;
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.vreels-cta-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vreels-cta-pill {
    font-family: var(--font-mono, monospace);
    font-size: 10px;
    font-weight: 700;
    color: #ffd23f;
    letter-spacing: 1px;
}

.vreels-cta-left h3 {
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

/* ==========================================================================
   VERTICAL LIGHTBOX MODAL ENHANCEMENT (9:16 Authentic Phone Frame)
   ========================================================================== */
.video-lightbox.is-vertical .video-lightbox__container {
    max-width: 440px;
    width: 90%;
}

.video-lightbox.is-vertical .video-lightbox__frame-wrapper {
    aspect-ratio: 9 / 16;
    padding-bottom: 0;
    height: 78vh;
    max-height: 780px;
    border-radius: 24px;
    border: 2px solid rgba(255, 210, 63, 0.35);
    box-shadow: 0 0 50px rgba(255, 210, 63, 0.2), 0 20px 60px rgba(0, 0, 0, 0.9);
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS (Mobile 2x2 Grid)
   ========================================================================== */
@media (max-width: 992px) {
    .vreels-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .vreels-cta-banner {
        flex-direction: column;
        text-align: center;
        gap: 18px;
        padding: 20px;
    }
}

@media (max-width: 640px) {
    .vertical-reels-section {
        padding: 60px 0 50px;
    }

    .vreels-head {
        margin-bottom: 28px;
    }

    .vreels-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 30px;
    }

    .vreel-card {
        border-radius: 14px;
    }

    .vreel-hud-top {
        top: 8px;
        left: 8px;
        right: 8px;
    }

    .vreel-live-pill {
        font-size: 8px;
        padding: 2px 6px;
    }

    .vreel-metric-chip {
        font-size: 8px;
        padding: 2px 6px;
    }

    .vreel-play-btn {
        width: 38px;
        height: 38px;
    }

    .vreel-play-btn svg {
        width: 14px;
        height: 14px;
    }

    .vreel-play-hint {
        font-size: 7.5px;
        letter-spacing: 1px;
    }

    .vreel-overlay-bottom {
        padding: 24px 10px 10px;
        gap: 3px;
    }

    .vreel-cat-tag {
        font-size: 7.5px;
    }

    .vreel-title {
        font-size: 11px;
        line-height: 1.25;
    }

    .vreel-specs-row {
        margin-top: 2px;
        padding-top: 4px;
    }

    .vreel-roas-badge {
        font-size: 8.5px;
    }

    .vreel-aspect-tag {
        font-size: 8px;
    }

    .vreels-cta-left h3 {
        font-size: 14px;
    }

    .video-lightbox.is-vertical .video-lightbox__container {
        max-width: 92%;
    }

    .video-lightbox.is-vertical .video-lightbox__frame-wrapper {
        height: 75vh;
        border-radius: 18px;
    }
}

/* ==========================================================================
   17. LUXURY STRATEGY & PROJECT BRIEF MASTER MODAL POPUP
   ========================================================================== */
.strategy-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.strategy-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.strategy-modal__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 5, 8, 0.88);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    cursor: pointer;
}

.strategy-modal__dialog {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1080px;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    transform: scale(0.92) translateY(20px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 28px;
    box-shadow: 0 25px 80px -10px rgba(0, 0, 0, 0.9), 0 0 50px rgba(255, 210, 63, 0.15);
}

.strategy-modal.is-open .strategy-modal__dialog {
    transform: scale(1) translateY(0);
}

.strategy-modal__dialog::-webkit-scrollbar {
    display: none !important;
    width: 0px !important;
    height: 0px !important;
    background: transparent !important;
}
.strategy-modal__dialog::-webkit-scrollbar-thumb {
    display: none !important;
    background: transparent !important;
}
.strategy-modal__dialog::-webkit-scrollbar-track {
    display: none !important;
    background: transparent !important;
}

.strategy-modal__close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(14, 14, 18, 0.9);
    border: 1px solid rgba(255, 210, 63, 0.4);
    color: #ffd23f;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

.strategy-modal__close:hover {
    transform: scale(1.1) rotate(90deg);
    background: #ffd23f;
    color: #08080a;
    box-shadow: 0 0 25px rgba(255, 210, 63, 0.6);
}

.modal-console-instance {
    margin: 0 !important;
}

@media (max-width: 900px) {
    .strategy-modal {
        padding: 12px;
        align-items: flex-end;
    }
    .strategy-modal__dialog {
        max-height: 94vh;
        border-radius: 20px 20px 0 0;
        transform: translateY(100%);
    }
    .strategy-modal.is-open .strategy-modal__dialog {
        transform: translateY(0);
    }
    .strategy-modal__close {
        top: 12px;
        right: 12px;
        width: 36px;
        height: 36px;
    }
}

/* ==========================================================================
   19. MASTER WORK SHOWCASE & PORTFOLIO PITCH ENGINE (work.html)
   ========================================================================== */
.nav-badge-new {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 210, 63, 0.15);
    color: #ffd23f;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid rgba(255, 210, 63, 0.4);
    margin-left: 6px;
    letter-spacing: 0.5px;
}

.btn-share-portfolio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e2e8f0;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-share-portfolio:hover {
    background: rgba(255, 210, 63, 0.12);
    border-color: rgba(255, 210, 63, 0.4);
    color: #ffd23f;
    transform: translateY(-1px);
}

.work-hero-section {
    position: relative;
    padding: 160px 0 60px;
    overflow: hidden;
    background: radial-gradient(circle at 50% 0%, rgba(255, 210, 63, 0.08) 0%, rgba(8, 8, 10, 1) 70%);
}

.work-hero-ambient {
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 350px;
    background: radial-gradient(ellipse, rgba(255, 210, 63, 0.15), transparent 70%);
    filter: blur(80px);
    pointer-events: none;
}

.work-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: rgba(255, 210, 63, 0.08);
    border: 1px solid rgba(255, 210, 63, 0.3);
    border-radius: 999px;
    color: #ffd23f;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    margin-bottom: 24px;
    text-transform: uppercase;
}

.work-pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ffd23f;
    box-shadow: 0 0 10px #ffd23f;
    animation: pulseLiveDot 2s infinite ease-in-out;
}

.work-hero-title {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    font-weight: 800;
    line-height: 1.15;
    color: #f8fafc;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
}

.work-hero-sub {
    font-size: clamp(1rem, 2vw, 1.15rem);
    color: #94a3b8;
    max-width: 740px;
    margin: 0 auto 36px;
    line-height: 1.7;
}

.work-hero-sub strong {
    color: #ffd23f;
}

.work-trust-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 10px;
}

.work-trust-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(18, 18, 24, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    font-size: 12.5px;
    color: #cbd5e1;
    font-weight: 500;
    backdrop-filter: blur(10px);
}

.work-filter-section {
    position: relative !important;
    top: auto !important;
    z-index: 20;
    padding: 16px 0;
    background: rgba(8, 8, 10, 0.88);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.work-filter-scroll-wrap {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 2px;
}

.work-filter-scroll-wrap::-webkit-scrollbar {
    display: none;
}

.work-filter-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: max-content;
}

.w-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    background: rgba(22, 22, 28, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}

.w-filter-btn:hover {
    background: rgba(30, 30, 40, 0.9);
    border-color: rgba(255, 210, 63, 0.3);
    color: #f8fafc;
    transform: translateY(-1px);
}

.w-filter-btn.active {
    background: linear-gradient(135deg, #ffd23f 0%, #ffb703 100%);
    border-color: #ffd23f;
    color: #08080a;
    font-weight: 700;
    box-shadow: 0 4px 18px rgba(255, 210, 63, 0.35);
}

.w-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.25);
    color: inherit;
}

.w-filter-btn.active .w-filter-count {
    background: rgba(0, 0, 0, 0.2);
    color: #08080a;
    font-weight: 800;
}

.work-grid-section {
    padding: 50px 0 100px;
}

.work-showcase-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 36px;
}

.work-item-card {
    background: linear-gradient(175deg, rgba(22, 22, 30, 0.92) 0%, rgba(10, 10, 14, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 26px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, box-shadow 0.4s ease;
    position: relative;
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.work-item-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 210, 63, 0.5), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.work-item-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 210, 63, 0.45);
    box-shadow: 0 30px 70px -15px rgba(0, 0, 0, 0.95), 0 0 50px rgba(255, 210, 63, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.work-item-card:hover::before {
    opacity: 1;
}

.work-item-card.is-hidden {
    display: none !important;
}

.work-card-media-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
    cursor: pointer;
}

.work-card-media-wrap.is-vertical-preview {
    aspect-ratio: 16 / 10;
    background: radial-gradient(ellipse at center, rgba(255, 210, 63, 0.1) 0%, #060609 80%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.work-card-media-wrap.is-vertical-preview .work-poster {
    object-fit: contain;
    max-height: 94%;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.8);
}

.work-poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.7s ease;
}

.work-item-card:hover .work-poster {
    transform: scale(1.05);
}

.work-hud-chips {
    position: absolute;
    top: 14px;
    left: 14px;
    right: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
    z-index: 3;
}

.work-chip-badge {
    background: rgba(10, 10, 14, 0.88);
    border: 1px solid rgba(255, 210, 63, 0.45);
    color: #ffd23f;
    font-size: 10.5px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 999px;
    backdrop-filter: blur(12px);
    letter-spacing: 0.6px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
}

.work-chip-metric {
    background: rgba(10, 10, 14, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #f8fafc;
    font-size: 10.5px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 999px;
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
}

.work-play-trigger {
    position: absolute;
    inset: 0;
    background: rgba(6, 6, 9, 0.35);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    opacity: 0.92;
    transition: all 0.35s ease;
    z-index: 2;
}

.work-card-media-wrap:hover .work-play-trigger {
    opacity: 1;
    background: rgba(6, 6, 9, 0.55);
}

.work-play-circle {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffd23f 0%, #ff9e00 100%);
    color: #08080a;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 35px rgba(255, 210, 63, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
    border: 2px solid rgba(255, 255, 255, 0.6);
}

.work-play-circle svg {
    width: 24px;
    height: 24px;
    margin-left: 3px;
}

.work-card-media-wrap:hover .work-play-circle {
    transform: scale(1.16);
    box-shadow: 0 0 50px rgba(255, 210, 63, 0.95), 0 0 20px #ffffff;
}

.work-play-label {
    font-size: 11px;
    font-weight: 700;
    color: #f8fafc;
    letter-spacing: 1.2px;
    background: rgba(8, 8, 12, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 4px 14px;
    border-radius: 999px;
    backdrop-filter: blur(10px);
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
}

.work-card-body {
    padding: 26px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.work-meta-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.work-industry-tag {
    color: #ffd23f;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.work-ratio-tag {
    color: #94a3b8;
    font-size: 11px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 3px 9px;
    border-radius: 6px;
    letter-spacing: 0.5px;
}

.work-title {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: 1.3rem;
    font-weight: 700;
    color: #f8fafc;
    line-height: 1.35;
    margin-bottom: 12px;
    letter-spacing: -0.01em;
}

.work-desc {
    font-size: 0.92rem;
    color: #94a3b8;
    line-height: 1.65;
    margin-bottom: 22px;
}

.work-specs-matrix {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 16px;
    background: rgba(6, 6, 9, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 24px;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5);
}

.spec-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.spec-k {
    font-size: 10px;
    font-weight: 800;
    color: #64748b;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.spec-v {
    font-size: 12.5px;
    font-weight: 600;
    color: #e2e8f0;
}

.spec-v.text-emerald {
    color: #34d399 !important;
    background: rgba(52, 211, 153, 0.12);
    border: 1px solid rgba(52, 211, 153, 0.3);
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 800 !important;
    display: inline-block;
    width: fit-content;
}

.work-card-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
}

.btn-work-wa {
    flex-grow: 1;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 20px;
    background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
    border: 1px solid rgba(167, 243, 208, 0.45);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    border-radius: 14px;
    text-decoration: none;
    box-shadow: 0 6px 24px rgba(16, 185, 129, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    letter-spacing: 0.2px;
}

.btn-work-wa::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -60%;
    width: 40%;
    height: 200%;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.5) 50%, transparent 100%);
    transform: rotate(25deg);
    animation: waBtnSweep 3.5s infinite;
}

@keyframes waBtnSweep {
    0% { left: -60%; opacity: 0; }
    20% { opacity: 1; }
    60% { left: 140%; opacity: 0; }
    100% { left: 140%; opacity: 0; }
}

.btn-work-wa:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 35px rgba(16, 185, 129, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    color: #ffffff;
}

.btn-work-quote {
    padding: 13px 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #e2e8f0;
    font-size: 13px;
    font-weight: 600;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn-work-quote:hover {
    background: rgba(255, 210, 63, 0.15);
    border-color: rgba(255, 210, 63, 0.6);
    color: #ffd23f;
    box-shadow: 0 0 25px rgba(255, 210, 63, 0.25);
    transform: translateY(-3px);
}

.copy-link-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: rgba(14, 14, 18, 0.95);
    border: 1px solid rgba(255, 210, 63, 0.5);
    color: #ffd23f;
    padding: 14px 24px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 30px rgba(255, 210, 63, 0.2);
    z-index: 9999;
    opacity: 0;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}

.copy-link-toast.is-shown {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.copy-link-toast .toast-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffd23f;
    color: #08080a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 12px;
}

@media (max-width: 992px) {
    .work-showcase-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

@media (max-width: 640px) {
    .work-hero-section {
        padding: 120px 0 40px;
    }
    .work-filter-section {
        top: 68px;
    }
    .work-card-body {
        padding: 20px;
    }
    .work-card-actions {
        flex-direction: column;
    }
    .btn-work-wa, .btn-work-quote {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
    .work-specs-matrix {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}


/* ==========================================================================
   21. AWWWARDS-GRADE MODERN CREATIVE AGENCY VIDEO PORTFOLIO (work.html)
   ========================================================================== */
.aw-hero-section {
    position: relative;
    padding: 70px 0 60px;
    text-align: center;
    overflow: hidden;
    background: radial-gradient(ellipse at 50% 0%, rgba(255, 210, 63, 0.15) 0%, rgba(8, 8, 12, 0) 70%);
}

.aw-hero-ambient-glow {
    position: absolute;
    top: -10%;
    left: 50%;
    transform: translateX(-50%);
    width: 650px;
    height: 380px;
    background: radial-gradient(circle, rgba(255, 210, 63, 0.16) 0%, rgba(245, 158, 11, 0.08) 50%, transparent 70%);
    filter: blur(85px);
    pointer-events: none;
    z-index: 0;
}

.aw-hero-badges-row {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.aw-luxury-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: rgba(14, 14, 20, 0.85);
    border: 1px solid rgba(255, 210, 63, 0.4);
    border-radius: var(--radius-full);
    box-shadow: 0 4px 18px rgba(255, 210, 63, 0.15);
    backdrop-filter: blur(14px);
    transition: all 0.3s ease;
}

.aw-luxury-badge-pill:hover {
    border-color: rgba(255, 210, 63, 0.8);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.7), 0 0 25px rgba(255, 210, 63, 0.3);
    transform: translateY(-2px);
}

.badge-text-gold {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    color: var(--accent-yellow);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.live-dot-green {
    width: 7.5px;
    height: 7.5px;
    border-radius: 50%;
    background: #00e676;
    box-shadow: 0 0 10px #00e676;
    animation: livePulseG 2s infinite ease-in-out;
    flex-shrink: 0;
}

.live-dot-gold {
    width: 7.5px;
    height: 7.5px;
    border-radius: 50%;
    background: #ffd23f;
    box-shadow: 0 0 10px #ffd23f;
    animation: livePulseG 2s infinite ease-in-out;
    flex-shrink: 0;
}

.live-dot-cyan {
    width: 7.5px;
    height: 7.5px;
    border-radius: 50%;
    background: #00e5ff;
    box-shadow: 0 0 10px #00e5ff;
    animation: livePulseG 2s infinite ease-in-out;
    flex-shrink: 0;
}

@keyframes livePulseG {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.75; }
}

.aw-hero-headline {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: clamp(32px, 5.2vw, 56px);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.12;
    letter-spacing: -1.2px;
    max-width: 850px;
    margin: 0 auto 20px;
    text-wrap: balance;
    word-break: keep-all;
    hyphens: none;
    -webkit-hyphens: none;
    position: relative;
    z-index: 1;
}

.aw-hero-lead {
    font-size: 15.5px;
    line-height: 1.68;
    color: #d1d5db;
    font-weight: 400;
    max-width: 680px;
    margin: 0 auto 28px;
    position: relative;
    z-index: 1;
}

.aw-hero-lead strong {
    color: #ffd23f;
    font-weight: 600;
}

.aw-feature-tags-strip {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.aw-ftag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 600;
    backdrop-filter: blur(10px);
}

/* Hero Action Buttons Row */
.aw-hero-actions-row {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 38px;
    flex-wrap: wrap;
}

.aw-btn-order {
    padding: 13px 26px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 22px rgba(255, 210, 63, 0.4) !important;
}

.aw-btn-watch {
    padding: 12px 22px;
    font-size: 13.5px;
    border-radius: 999px;
    background: rgba(18, 18, 24, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    backdrop-filter: blur(12px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
}

.aw-btn-watch:hover {
    border-color: #ffd23f;
    color: #ffd23f;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 210, 63, 0.2);
}

.aw-btn-watch .play-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffd23f 0%, #ffb703 100%);
    color: #08080a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.aw-btn-watch:hover .play-circle {
    transform: scale(1.15);
}

.aw-btn-watch .play-circle svg {
    width: 12px;
    height: 12px;
    margin-left: 2px;
}

.aw-btn-wa {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: rgba(37, 211, 102, 0.12);
    border: 1px solid rgba(37, 211, 102, 0.35);
    border-radius: 999px;
    color: #25d366;
    font-size: 13.5px;
    font-weight: 700;
    backdrop-filter: blur(12px);
    transition: all 0.3s ease;
    text-decoration: none;
}

.aw-btn-wa:hover {
    background: #25d366;
    color: #08080a;
    border-color: #25d366;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.3);
}

/* Master Showreel Spotlight Card (Widescreen Cinema) */
.aw-spotlight-wrapper {
    position: relative;
    z-index: 2;
    max-width: 980px;
    margin: 0 auto 38px;
    perspective: 1000px;
}

@media (max-width: 991px) {
    .aw-spotlight-wrapper {
        display: none !important;
    }
}

.aw-spotlight-card {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    background: #08080c;
    border: 1px solid rgba(255, 210, 63, 0.35);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85), 0 0 45px rgba(255, 210, 63, 0.15);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.aw-spotlight-card:hover {
    border-color: rgba(255, 210, 63, 0.85);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.95), 0 0 60px rgba(255, 210, 63, 0.3);
    transform: translateY(-4px) scale(1.008);
}

.spotlight-media-inner {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.spotlight-poster-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.8s ease;
    filter: brightness(0.92) contrast(1.06);
}

.aw-spotlight-card:hover .spotlight-poster-img {
    transform: scale(1.04);
    filter: brightness(1) contrast(1.08);
}

.spotlight-vignette {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 8, 12, 0.75) 0%, rgba(8, 8, 12, 0.15) 30%, rgba(8, 8, 12, 0.6) 60%, rgba(8, 8, 12, 0.96) 82%, #08080c 100%);
    pointer-events: none;
    z-index: 1;
}

/* Spotlight Top HUD */
.spotlight-hud-top {
    position: absolute;
    top: 18px;
    left: 20px;
    right: 20px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    pointer-events: none;
}

.hud-tag-broadcast {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(10, 10, 15, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    backdrop-filter: blur(10px);
}

.pulse-rec-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff334b;
    box-shadow: 0 0 10px #ff334b;
    animation: livePulseG 1.5s infinite;
}

.hud-tag-badge.gold {
    padding: 6px 14px;
    background: rgba(255, 210, 63, 0.15);
    border: 1px solid rgba(255, 210, 63, 0.45);
    border-radius: 999px;
    color: #ffd23f;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.4px;
    backdrop-filter: blur(10px);
}

/* Spotlight Laser Beam Animation */
.spotlight-laser-beam {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 210, 63, 0.2) 20%, #ffd23f 50%, rgba(255, 210, 63, 0.2) 80%, transparent 100%);
    box-shadow: 0 0 16px #ffd23f;
    opacity: 0.7;
    z-index: 2;
    animation: laserSweepDown 4s infinite ease-in-out;
}

@keyframes laserSweepDown {
    0% { top: 0%; opacity: 0; }
    15% { opacity: 0.85; }
    85% { opacity: 0.85; }
    100% { top: 100%; opacity: 0; }
}

/* Spotlight Center Play Disc */
.spotlight-play-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    pointer-events: none;
}

.spotlight-play-ring {
    position: absolute;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 2px solid rgba(255, 210, 63, 0.4);
    animation: pulseRing 2.2s infinite ease-out;
}

@keyframes pulseRing {
    0% { transform: scale(0.9); opacity: 0.9; }
    100% { transform: scale(1.6); opacity: 0; }
}

.spotlight-play-disc {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffd23f 0%, #ffb703 100%);
    box-shadow: 0 0 35px rgba(255, 210, 63, 0.65), 0 10px 30px rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #08080a;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.aw-spotlight-card:hover .spotlight-play-disc {
    transform: scale(1.14);
    box-shadow: 0 0 50px rgba(255, 210, 63, 0.9), 0 15px 40px rgba(0, 0, 0, 0.9);
}

.spotlight-play-disc svg {
    width: 28px;
    height: 28px;
    margin-left: 4px;
}

.spotlight-play-label {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: 11.5px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: rgba(10, 10, 15, 0.85);
    padding: 5px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 210, 63, 0.3);
    backdrop-filter: blur(10px);
}

/* Spotlight Footer Bar (Clean & Structured - No Text Overlap) */
.spotlight-footer-bar {
    padding: 20px 24px;
    background: #0e0e14;
    border-top: 1px solid rgba(255, 210, 63, 0.22);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    text-align: left;
}

.spotlight-meta-info {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex-grow: 1;
}

.spotlight-tag-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 2px;
}

.spotlight-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    color: #ffd23f;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.spotlight-title {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: clamp(17px, 2.2vw, 22px);
    font-weight: 800;
    color: #ffffff;
    margin: 0;
}

.spotlight-spec {
    font-size: 12.5px;
    color: #cbd5e1;
    margin: 0;
}

.spotlight-action-right {
    flex-shrink: 0;
}

.aw-stats-strip {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 28px;
    padding: 14px 28px;
    background: rgba(14, 14, 20, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    backdrop-filter: blur(16px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    flex-wrap: wrap;
    justify-content: center;
}

.aw-stat-card {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.aw-stat-num {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: 1.5rem;
    font-weight: 800;
    color: #ffd23f;
    line-height: 1;
}

.aw-stat-lbl {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    letter-spacing: 0.4px;
}

.aw-stat-sep {
    color: rgba(255, 255, 255, 0.15);
    font-size: 1.2rem;
    font-weight: 300;
}

/* Filter Navigation Bar (Clean & Static / Non-Sticky) */
#workFilterNav,
.aw-filter-bar-sticky,
.aw-filter-bar-static {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    z-index: 10 !important;
    background: rgba(8, 8, 12, 0.6);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    padding: 16px 0;
    overflow: hidden;
}

.aw-filter-bar-sticky .container {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.aw-filter-pills {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    padding: 4px 20px !important;
    cursor: grab;
}

.aw-filter-pills.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
}

@media (min-width: 1080px) {
    .aw-filter-pills {
        justify-content: center;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        padding: 4px 0 !important;
    }
}

.aw-filter-pills::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

/* Main Showcase Grid */
.aw-showcase-container {
    padding: 30px 0 10px;
}

.aw-section-block {
    margin-bottom: 45px;
}

.aw-section-block:last-child {
    margin-bottom: 0 !important;
}

.aw-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 34px;
    padding: 16px 22px;
    background: linear-gradient(90deg, rgba(255, 210, 63, 0.05) 0%, rgba(14, 14, 20, 0.7) 100%);
    border: 1px solid rgba(255, 210, 63, 0.2);
    border-radius: 18px;
    backdrop-filter: blur(16px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    flex-wrap: wrap;
}

.aw-section-header.green-theme {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.06) 0%, rgba(14, 14, 20, 0.7) 100%);
    border-color: rgba(16, 185, 129, 0.24);
}

.aw-sh-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

.aw-sh-pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    background: rgba(255, 210, 63, 0.12);
    border: 1px solid rgba(255, 210, 63, 0.35);
    border-radius: 999px;
    color: var(--accent-yellow);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.aw-sh-pill-badge.green {
    background: rgba(16, 185, 129, 0.14);
    border-color: rgba(16, 185, 129, 0.4);
    color: #34d399;
}

.aw-pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.aw-pulse-dot.gold {
    background: #ffd23f;
    box-shadow: 0 0 8px #ffd23f;
    animation: livePulseG 1.8s infinite ease-in-out;
}
.aw-pulse-dot.green {
    background: #10b981;
    box-shadow: 0 0 8px #10b981;
    animation: livePulseG 1.8s infinite ease-in-out;
}

.aw-sh-title {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: 1.35rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 0;
}

.aw-sh-right {
    flex-shrink: 0;
}

.aw-sh-badge {
    font-size: 11.5px;
    font-weight: 600;
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 6px 14px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    backdrop-filter: blur(8px);
}
.aw-sh-badge.green {
    color: #a7f3d0;
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.25);
}

/* 16:9 Cinema Master Cards (2-Column Grid) */
.aw-cinema-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 36px;
}

.aw-project-card {
    background: #0f0f15;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, box-shadow 0.4s ease;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
}

.aw-project-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 210, 63, 0.5);
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.9), 0 0 40px rgba(255, 210, 63, 0.14);
}

.aw-media-box {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
    cursor: pointer;
}

.aw-poster-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.aw-project-card:hover .aw-poster-img {
    transform: scale(1.05);
}

.aw-media-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 8, 12, 0.2) 0%, rgba(8, 8, 12, 0.6) 100%);
    opacity: 0.4;
    transition: opacity 0.35s ease;
}

.aw-project-card:hover .aw-media-overlay {
    opacity: 0.7;
}

.aw-top-tags {
    position: absolute;
    top: 14px;
    left: 14px;
    right: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 3;
    pointer-events: none;
}

.aw-pill-tag {
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
}
.aw-pill-tag.aw-gold {
    background: rgba(10, 10, 15, 0.88);
    border: 1px solid rgba(255, 210, 63, 0.45);
    color: #ffd23f;
}
.aw-pill-tag.aw-metric {
    background: rgba(10, 10, 15, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #f1f5f9;
}

.aw-play-trigger {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    z-index: 3;
    opacity: 0.9;
    transition: all 0.3s ease;
}

.aw-project-card:hover .aw-play-trigger {
    opacity: 1;
}

.aw-play-disc {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffd23f 0%, #ff9e00 100%);
    color: #08080a;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 35px rgba(255, 210, 63, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 2px solid rgba(255, 255, 255, 0.6);
}

.aw-play-disc svg {
    width: 24px;
    height: 24px;
    margin-left: 3px;
}

.aw-project-card:hover .aw-play-disc {
    transform: scale(1.15);
    box-shadow: 0 0 50px rgba(255, 210, 63, 0.95);
}

.aw-play-caption {
    font-size: 11px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 1.2px;
    background: rgba(8, 8, 12, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 4px 14px;
    border-radius: 999px;
    backdrop-filter: blur(10px);
}

.aw-info-panel {
    padding: 22px 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background: #0f0f15;
}

.aw-info-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-grow: 1;
}

.aw-cat-label {
    color: #ffd23f;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.aw-card-title {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.25;
}

.aw-card-sub {
    font-size: 0.88rem;
    color: #cbd5e1;
    line-height: 1.45;
}

.aw-info-right {
    flex-shrink: 0;
}

.btn-aw-wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 18px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.16) 0%, rgba(5, 150, 105, 0.28) 100%);
    border: 1.2px solid rgba(52, 211, 153, 0.5);
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 700;
    border-radius: 12px;
    text-decoration: none;
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    position: relative;
}

.btn-aw-wa svg {
    color: #34d399;
    filter: drop-shadow(0 0 6px rgba(52, 211, 153, 0.6));
    transition: transform 0.3s ease;
}

.btn-aw-wa:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.32) 0%, rgba(5, 150, 105, 0.45) 100%);
    border-color: #34d399;
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.45), 0 0 16px rgba(52, 211, 153, 0.35);
    color: #ffffff;
}

.btn-aw-wa:hover svg {
    transform: scale(1.15);
}

/* 9:16 Vertical Reels Smartphone Grid (4-Column) */
.aw-reels-smartphone-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.aw-reel-card {
    background: #0f0f15;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, box-shadow 0.4s ease;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
}

.aw-reel-card:hover {
    transform: translateY(-8px);
    border-color: rgba(16, 185, 129, 0.55);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.85), 0 0 35px rgba(16, 185, 129, 0.2);
}

.aw-reel-screen {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    background: #000;
    overflow: hidden;
    cursor: pointer;
}

.aw-reel-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.aw-reel-card:hover .aw-reel-img {
    transform: scale(1.06);
}

.aw-reel-vignette {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(8, 8, 12, 0.95) 0%, rgba(8, 8, 12, 0.3) 50%, rgba(8, 8, 12, 0.7) 100%);
    pointer-events: none;
    z-index: 2;
}

.aw-reel-header {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 3;
    pointer-events: none;
}

.aw-reel-pill {
    background: rgba(10, 10, 14, 0.88);
    border: 1px solid rgba(255, 210, 63, 0.4);
    color: #ffd23f;
    font-size: 10.5px;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 999px;
    backdrop-filter: blur(8px);
}
.aw-reel-pill.green {
    border-color: rgba(255, 210, 63, 0.4);
    color: #ffd23f;
    background: rgba(255, 210, 63, 0.12);
}

.aw-reel-center-play {
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    pointer-events: none;
    opacity: 0.9;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

.aw-reel-disc {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffd23f 0%, #ff9e00 100%);
    color: #08080a;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 28px rgba(255, 210, 63, 0.7);
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.aw-reel-disc svg {
    width: 22px;
    height: 22px;
    margin-left: 2px;
}

.aw-reel-card:hover .aw-reel-center-play {
    transform: translate(-50%, -50%) scale(1.15);
    opacity: 1;
}

.aw-reel-footer-content {
    position: absolute;
    bottom: 14px;
    left: 14px;
    right: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 3;
    pointer-events: none;
}

.aw-reel-cat {
    color: #ffd23f;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
}

.aw-reel-title {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: 1.12rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
}

.aw-reel-stat-badge {
    color: #ffd23f;
    font-size: 11px;
    font-weight: 800;
    background: rgba(255, 210, 63, 0.14);
    border: 1px solid rgba(255, 210, 63, 0.38);
    padding: 3px 9px;
    border-radius: 6px;
    width: fit-content;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.aw-reel-action-bar {
    padding: 14px;
    background: #0f0f15;
}

.btn-aw-wa.reel-full {
    width: 100%;
    justify-content: center;
    font-size: 12.5px;
    padding: 11px 14px;
}

@media (max-width: 1100px) {
    .aw-reels-smartphone-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 900px) {
    .aw-cinema-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .aw-info-panel {
        flex-direction: column;
        align-items: flex-start;
    }
    .aw-info-right, .btn-aw-wa {
        width: 100%;
        justify-content: center;
    }
}

/* HIGH-DENSITY NATIVE MOBILE RESPONSIVE ENGINE */
@media (max-width: 768px) {
    .aw-hero-section {
        padding: 40px 0 28px !important;
    }
    .btn-share-portfolio {
        display: none !important;
    }
    .aw-hero-badges-row {
        gap: 6px;
        margin: 0 auto 14px !important;
    }
    .aw-luxury-badge-pill {
        padding: 5px 14px !important;
        gap: 6px !important;
    }
    .badge-text-gold {
        font-size: 11px !important;
    }
    .hide-on-tiny {
        display: none !important;
    }
    .aw-hero-headline {
        font-size: 24px !important;
        line-height: 1.22 !important;
        letter-spacing: -0.4px !important;
        margin: 0 auto 14px !important;
        max-width: 320px !important;
        text-wrap: balance;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        hyphens: none;
        -webkit-hyphens: none;
    }
    .aw-hero-lead {
        text-align: center !important;
        font-size: 13px !important;
        line-height: 1.55 !important;
        margin: 0 auto 20px !important;
        max-width: 340px !important;
        color: #d1d5db !important;
        font-weight: 400 !important;
        text-shadow: none !important;
    }
    .aw-hero-lead strong {
        color: #ffd23f !important;
        font-weight: 600 !important;
    }
    .aw-feature-tags-strip {
        gap: 6px;
        margin: 0 auto 22px !important;
        max-width: 340px !important;
    }
    .aw-ftag {
        font-size: 10px !important;
        padding: 4px 10px !important;
    }
    .aw-stats-strip {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 14px;
        border-radius: 14px;
        width: 100%;
        max-width: 340px;
    }
    .aw-stat-sep {
        display: none;
    }
    .aw-stat-num {
        font-size: 1.25rem;
    }
    .aw-stat-lbl {
        font-size: 9.5px;
        line-height: 1.2;
    }

    /* Horizontal Swipeable Filter Bar on Mobile */
    .aw-filter-bar-sticky {
        position: relative !important;
        top: auto !important;
        padding: 12px 0;
    }
    .aw-filter-pills {
        padding: 2px 16px !important;
        gap: 8px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    .aw-filter-pills::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
    .w-filter-btn {
        flex-shrink: 0 !important;
        font-size: 12px;
        padding: 7px 14px;
        white-space: nowrap !important;
    }

    /* Showcase Container */
    .aw-showcase-container {
        padding: 24px 0 10px !important;
    }
    .aw-section-block {
        margin-bottom: 30px !important;
    }
    .aw-section-block:last-child {
        margin-bottom: 0 !important;
    }
    .aw-section-header {
        margin-bottom: 18px;
        padding: 12px 14px !important;
        border-radius: 14px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .aw-sh-left {
        width: 100%;
        gap: 3px;
    }
    .aw-sh-title {
        font-size: clamp(13.5px, 4.2vw, 15.5px) !important;
        letter-spacing: -0.2px !important;
        white-space: nowrap !important;
        line-height: 1.25 !important;
    }
    .aw-sh-pill-badge {
        font-size: 8.5px !important;
        padding: 2px 8px !important;
    }
    .aw-sh-badge {
        font-size: 9.5px !important;
        padding: 3px 9px !important;
    }

    /* 16:9 Cinema Cards Mobile */
    .aw-cinema-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .aw-project-card {
        border-radius: 18px;
    }
    .aw-play-disc {
        width: 48px;
        height: 48px;
    }
    .aw-play-disc svg {
        width: 18px;
        height: 18px;
    }
    .aw-play-caption {
        font-size: 9.5px;
        padding: 3px 10px;
    }
    .aw-info-panel {
        padding: 16px;
        gap: 12px;
    }
    .aw-card-title {
        font-size: 1.15rem;
    }
    .aw-card-sub {
        font-size: 0.85rem;
    }
    .btn-aw-wa {
        font-size: 12.5px;
        padding: 11px 16px;
        width: 100%;
        justify-content: center;
    }

    /* 9:16 Vertical Reels Mobile - 2-Column High-Density Grid (Like Instagram / Shorts) */
    .aw-reels-smartphone-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .aw-reel-card {
        border-radius: 16px;
    }
    .aw-reel-header {
        top: 8px;
        left: 8px;
        right: 8px;
    }
    .aw-reel-pill {
        font-size: 9px;
        padding: 2.5px 6px;
    }
    .aw-reel-disc {
        width: 42px;
        height: 42px;
    }
    .aw-reel-disc svg {
        width: 16px;
        height: 16px;
    }
    .aw-reel-footer-content {
        bottom: 10px;
        left: 10px;
        right: 10px;
        gap: 3px;
    }
    .aw-reel-cat {
        font-size: 8.5px;
    }
    .aw-reel-title {
        font-size: 0.92rem;
        line-height: 1.25;
    }
    .aw-reel-stat-badge {
        font-size: 9.5px !important;
        padding: 2.5px 7px !important;
        color: #ffd23f !important;
        background: rgba(255, 210, 63, 0.14) !important;
        border: 1px solid rgba(255, 210, 63, 0.38) !important;
    }
    .aw-reel-action-bar {
        padding: 8px;
    }
    .btn-aw-wa.reel-full {
        font-size: 11.5px !important;
        padding: 9px 8px !important;
        gap: 5px !important;
        letter-spacing: 0 !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }
    .btn-aw-wa.reel-full svg {
        width: 13px !important;
        height: 13px !important;
        flex-shrink: 0 !important;
    }
}

/* ==========================================================================
   23. ULTRA-LUXURY AWWWARDS BRAND PRELOADER (Global Screen)
   ========================================================================== */
.site-preloader { display: none !important; }

.site-preloader.is-loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(1.03);
}

.preloader-ambient-glow {
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 210, 63, 0.16) 0%, rgba(255, 210, 63, 0.03) 50%, transparent 70%);
    filter: blur(40px);
    pointer-events: none;
    animation: preloaderGlowPulse 2s ease-in-out infinite alternate;
}

.preloader-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.preloader-logo-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preloader-symbol {
    width: 64px !important;
    height: 64px !important;
    filter: drop-shadow(0 0 22px rgba(255, 210, 63, 0.8));
    animation: preloaderLogoFloat 2.4s ease-in-out infinite alternate;
}

.preloader-brand-title {
    font-family: var(--font-logo) !important;
    font-size: 34px;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: #ffffff;
    display: inline-flex;
    align-items: baseline;
    line-height: 1;
    margin-top: 4px;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9), 0 0 24px rgba(255, 210, 63, 0.4);
}

.preloader-brand-title .brand-name {
    font-family: 'Aclonica', cursive, sans-serif !important;
    font-size: 24px;
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: baseline;
    line-height: 1;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.preloader-brand-title .brand-dot {
    font-family: var(--font-logo) !important;
    color: var(--accent-yellow);
    font-size: 42px;
    line-height: 0.4;
    margin-left: 2px;
    text-shadow: 0 0 16px rgba(255, 210, 63, 1), 0 0 28px rgba(255, 210, 63, 0.8);
    display: inline-block;
    animation: dotBeaconPulse 2s ease-in-out infinite alternate;
}

@keyframes preloaderLogoFloat {
    0% { transform: translateY(0) scale(0.98); }
    100% { transform: translateY(-4px) scale(1.02); }
}

.preloader-track {
    width: 160px;
    height: 2.5px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
    margin-top: 2px;
}

.preloader-laser {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 45%;
    background: linear-gradient(90deg, transparent 0%, #ffd23f 50%, #ffffff 100%);
    border-radius: 999px;
    box-shadow: 0 0 10px #ffd23f;
    animation: preloaderLaserSweep 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.preloader-status-text {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 2px;
    color: rgba(255, 210, 63, 0.85);
    text-transform: uppercase;
    margin-top: -4px;
}

@keyframes preloaderOrbitSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes preloaderHexBreath {
    0% { transform: scale(0.96); stroke-width: 1.4; }
    100% { transform: scale(1.04); stroke-width: 2.2; }
}

@keyframes preloaderCoreGlow {
    0% { filter: drop-shadow(0 0 2px #ffd23f); transform: scale(0.92); }
    100% { filter: drop-shadow(0 0 10px #ffd23f); transform: scale(1.1); }
}

@keyframes preloaderGlowPulse {
    0% { opacity: 0.5; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1.15); }
}

@keyframes preloaderLaserSweep {
    0% { left: -50%; width: 30%; }
    50% { left: 35%; width: 55%; }
    100% { left: 110%; width: 30%; }
}

@keyframes preloaderDotBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ==========================================================================
   24. ULTRA-LUXURY SELF-SERVICE PROJECT ORDER & BOOKING PORTAL (order.html)
   ========================================================================== */
.order-page-body {
    background-color: #08080a;
    overflow-x: clip;
}

.order-portal-hero {
    position: relative;
    padding: 140px 0 50px;
    background: radial-gradient(circle at 50% 0%, rgba(255, 210, 63, 0.08) 0%, transparent 65%);
    text-align: center;
    overflow: hidden;
}

.order-hero-glow {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 380px;
    background: radial-gradient(circle, rgba(255, 210, 63, 0.15) 0%, transparent 70%);
    filter: blur(60px);
    pointer-events: none;
}

.order-hero-container {
    position: relative;
    z-index: 2;
    max-width: 920px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.order-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    background: rgba(255, 210, 63, 0.12);
    border: 1px solid rgba(255, 210, 63, 0.35);
    border-radius: 999px;
    color: var(--accent-yellow);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.8px;
    backdrop-filter: blur(8px);
}

.order-hero-title {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: clamp(2.2rem, 4.5vw, 3.4rem);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin: 0;
}

.order-hero-subtitle {
    font-size: clamp(0.95rem, 1.6vw, 1.12rem);
    color: #94a3b8;
    line-height: 1.6;
    max-width: 780px;
    margin: 0 auto;
    font-weight: 400;
}

.order-trust-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.order-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(18, 18, 24, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    backdrop-filter: blur(12px);
    font-size: 12px;
    color: #cbd5e1;
}

.order-trust-item strong {
    color: #ffffff;
}

/* WIZARD 2-COLUMN GRID LAYOUT */
.order-wizard-section {
    padding: 20px 0 90px;
    position: relative;
}

.order-grid-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 36px;
    align-items: start;
}

.order-glass-form {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.order-step-block {
    background: rgba(14, 14, 20, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 28px;
    backdrop-filter: blur(20px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    transition: border-color 0.3s ease;
}

.order-step-block:hover {
    border-color: rgba(255, 210, 63, 0.25);
}

.step-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.step-num-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 210, 63, 0.2) 0%, rgba(255, 210, 63, 0.05) 100%);
    border: 1.2px solid rgba(255, 210, 63, 0.5);
    color: #ffd23f;
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: 15px;
    font-weight: 900;
    flex-shrink: 0;
    box-shadow: 0 0 14px rgba(255, 210, 63, 0.25);
}

.step-title-box {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.step-title {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: 1.35rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    letter-spacing: -0.01em;
}

.step-desc {
    font-size: 12.5px;
    color: #94a3b8;
    margin: 0;
}

/* SERVICE TIER CARDS */
.service-tier-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.tier-card-option {
    position: relative;
    cursor: pointer;
    display: block;
}

.tier-card-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.tier-card-inner {
    height: 100%;
    padding: 20px;
    background: rgba(20, 20, 28, 0.7);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}

.tier-card-option:hover .tier-card-inner {
    background: rgba(26, 26, 36, 0.9);
    border-color: rgba(255, 210, 63, 0.35);
    transform: translateY(-2px);
}

.tier-card-option.selected .tier-card-inner,
.tier-card-option input[type="radio"]:checked + .tier-card-inner {
    background: linear-gradient(135deg, rgba(255, 210, 63, 0.12) 0%, rgba(20, 20, 28, 0.95) 100%);
    border-color: #ffd23f;
    box-shadow: 0 0 25px rgba(255, 210, 63, 0.22), inset 0 0 20px rgba(255, 210, 63, 0.05);
}

.tier-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.tier-icon {
    font-size: 24px;
}

.tier-badge {
    font-size: 9.5px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e2e8f0;
    letter-spacing: 0.3px;
}

.tier-badge.popular {
    background: rgba(255, 210, 63, 0.2);
    border-color: rgba(255, 210, 63, 0.5);
    color: #ffd23f;
}

.tier-badge.high-roas {
    background: rgba(52, 211, 153, 0.2);
    border-color: rgba(52, 211, 153, 0.4);
    color: #34d399;
}

.tier-badge.vip {
    background: linear-gradient(135deg, #ffd23f 0%, #ffb703 100%);
    color: #08080a;
    border: none;
    font-weight: 900;
}

.tier-title {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    line-height: 1.25;
}

.tier-format {
    font-size: 11px;
    font-weight: 700;
    color: #ffd23f;
    letter-spacing: 0.2px;
}

.tier-scope {
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.5;
    margin: 0;
    flex-grow: 1;
}

.tier-pricing {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.tier-price {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: 1.3rem;
    font-weight: 900;
    color: #ffffff;
}

.tier-token-hint {
    font-size: 11px;
    font-weight: 700;
    color: #34d399;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    padding: 2px 7px;
    border-radius: 6px;
}

.tier-card-option.full-span {
    grid-column: 1 / -1;
}

/* FORM FIELDS & INPUTS */
.order-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-lbl {
    font-size: 12px;
    font-weight: 700;
    color: #cbd5e1;
    letter-spacing: 0.2px;
}

.form-lbl .req {
    color: #ff5252;
}

.form-lbl .opt {
    font-size: 11px;
    color: #64748b;
    font-weight: 400;
}

.order-input,
.order-select,
.order-textarea {
    width: 100%;
    background: rgba(22, 22, 30, 0.8);
    border: 1.2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px 14px;
    color: #ffffff;
    font-family: inherit;
    font-size: 13px;
    transition: all 0.25s ease;
    box-sizing: border-box;
    outline: none;
}

.order-input:focus,
.order-select:focus,
.order-textarea:focus {
    border-color: #ffd23f;
    background: rgba(28, 28, 38, 0.95);
    box-shadow: 0 0 15px rgba(255, 210, 63, 0.25);
}

.order-select option {
    background: #121218;
    color: #ffffff;
}

.order-textarea {
    resize: vertical;
    min-height: 85px;
}

/* ADDONS GRID */
.addons-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.addon-card {
    position: relative;
    cursor: pointer;
    display: block;
}

.addon-checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.addon-content {
    padding: 16px;
    background: rgba(20, 20, 28, 0.7);
    border: 1.2px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: all 0.25s ease;
    height: 100%;
    box-sizing: border-box;
}

.addon-card:hover .addon-content {
    border-color: rgba(255, 210, 63, 0.35);
    background: rgba(26, 26, 36, 0.85);
}

.addon-checkbox:checked + .addon-content {
    background: linear-gradient(135deg, rgba(255, 210, 63, 0.12) 0%, rgba(20, 20, 28, 0.95) 100%);
    border-color: #ffd23f;
    box-shadow: 0 0 18px rgba(255, 210, 63, 0.18);
}

.addon-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.addon-icon {
    font-size: 20px;
}

.addon-price {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: 12px;
    font-weight: 800;
    color: #ffd23f;
    background: rgba(255, 210, 63, 0.15);
    border: 1px solid rgba(255, 210, 63, 0.35);
    padding: 2px 7px;
    border-radius: 6px;
}

.addon-title {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: 13.5px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}

.addon-desc {
    font-size: 11.5px;
    color: #94a3b8;
    line-height: 1.4;
    margin: 0;
}

/* RIGHT COLUMN: STICKY ORDER SUMMARY HUD */
.order-summary-column {
    position: -webkit-sticky;
    position: sticky;
    top: 90px;
    align-self: start;
    z-index: 30;
}

.order-summary-hud {
    background: rgba(14, 14, 20, 0.94);
    border: 1.5px solid rgba(255, 210, 63, 0.3);
    border-radius: 24px;
    padding: 24px;
    backdrop-filter: blur(24px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 35px rgba(255, 210, 63, 0.1);
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 210, 63, 0.35) transparent;
}

.order-summary-hud::-webkit-scrollbar {
    width: 4px;
}

.order-summary-hud::-webkit-scrollbar-thumb {
    background: rgba(255, 210, 63, 0.35);
    border-radius: 999px;
}

.hud-top-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    background: rgba(255, 210, 63, 0.12);
    border: 1px solid rgba(255, 210, 63, 0.35);
    border-radius: 999px;
    color: var(--accent-yellow);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.8px;
    width: fit-content;
}

.hud-title {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: 1.3rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    letter-spacing: -0.01em;
}

.hud-line-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hud-item-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    color: #cbd5e1;
}

.hud-item-label {
    color: #94a3b8;
    font-weight: 500;
}

.hud-item-val {
    font-weight: 700;
    color: #ffffff;
}

.hud-addons-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hud-addon-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    color: #94a3b8;
    padding-left: 8px;
    border-left: 2px solid rgba(255, 210, 63, 0.4);
}

.hud-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
}

.hud-total-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.hud-total-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hud-total-label {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: 13.5px;
    font-weight: 700;
    color: #ffffff;
}

.hud-total-note {
    font-size: 10.5px;
    color: #64748b;
}

.hud-total-amount {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: 1.5rem;
    font-weight: 900;
    color: #ffffff;
}

/* TOKEN HIGHLIGHT BOX */
.hud-token-highlight-box {
    background: linear-gradient(135deg, rgba(255, 210, 63, 0.16) 0%, rgba(20, 20, 28, 0.9) 100%);
    border: 1.2px solid rgba(255, 210, 63, 0.5);
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 0 20px rgba(255, 210, 63, 0.15);
}

.token-box-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.token-tag {
    font-size: 10.5px;
    font-weight: 800;
    color: #ffd23f;
    letter-spacing: 0.5px;
}

.token-amount {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: 1.45rem;
    font-weight: 900;
    color: #ffd23f;
    text-shadow: 0 0 12px rgba(255, 210, 63, 0.6);
}

.token-explanation {
    font-size: 11px;
    color: #cbd5e1;
    line-height: 1.4;
    margin: 0;
}

/* HUD CHECKOUT ACTIONS */
.hud-checkout-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn-order-primary {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 14px 18px;
    background: linear-gradient(135deg, #ffd23f 0%, #ffb703 100%);
    border: 1px solid #ffd23f;
    border-radius: 12px;
    color: #08080a;
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 8px 25px rgba(255, 210, 63, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-order-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(255, 210, 63, 0.55);
}

.btn-order-primary .btn-text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 2;
}

.btn-order-secondary {
    width: 100%;
    padding: 11px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    color: #e2e8f0;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: center;
}

.btn-order-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 210, 63, 0.4);
    color: #ffffff;
}

.btn-order-wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 16px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.16) 0%, rgba(5, 150, 105, 0.28) 100%);
    border: 1.2px solid rgba(52, 211, 153, 0.5);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.25s ease;
}

.btn-order-wa:hover {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.3) 0%, rgba(5, 150, 105, 0.45) 100%);
    border-color: #34d399;
}

.hud-security-footer {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.sec-item {
    font-size: 10.5px;
    color: #64748b;
    font-weight: 600;
}

/* SUCCESS CONFIRMATION MODAL */
.order-success-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.order-success-modal.is-open {
    display: flex;
}

.modal-backdrop-blur {
    position: absolute;
    inset: 0;
    background: rgba(6, 6, 8, 0.88);
    backdrop-filter: blur(20px);
}

.order-success-card {
    position: relative;
    z-index: 2;
    background: #0f0f15;
    border: 1.5px solid #ffd23f;
    border-radius: 24px;
    padding: 36px 30px;
    max-width: 520px;
    width: 100%;
    text-align: center;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.8), 0 0 40px rgba(255, 210, 63, 0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.success-glow-orb {
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 250px;
    height: 150px;
    background: radial-gradient(circle, rgba(255, 210, 63, 0.25) 0%, transparent 70%);
    filter: blur(30px);
    pointer-events: none;
}

.success-icon-badge {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffd23f 0%, #ffb703 100%);
    color: #08080a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 900;
    box-shadow: 0 0 25px rgba(255, 210, 63, 0.6);
}

.success-tag {
    font-size: 11px;
    font-weight: 800;
    color: #ffd23f;
    letter-spacing: 1px;
}

.success-title {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: 1.55rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
}

.booking-id-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(255, 210, 63, 0.12);
    border: 1px solid rgba(255, 210, 63, 0.4);
    border-radius: 999px;
    color: #ffffff;
    font-size: 12px;
}

.booking-id-pill strong {
    color: #ffd23f;
    font-size: 13.5px;
    letter-spacing: 0.5px;
}

.success-desc {
    font-size: 12.5px;
    color: #94a3b8;
    line-height: 1.5;
    margin: 0;
}

.success-desc strong {
    color: #ffffff;
}

.success-meta-box {
    width: 100%;
    background: rgba(20, 20, 28, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 12px;
    color: #cbd5e1;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.success-modal-actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

.btn-success-wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 18px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25) 0%, rgba(5, 150, 105, 0.4) 100%);
    border: 1.2px solid #34d399;
    border-radius: 12px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.3);
}

.btn-success-close {
    width: 100%;
    padding: 10px;
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s ease;
}

.btn-success-close:hover {
    color: #ffffff;
}

/* RESPONSIVE MOBILE BREAKPOINTS */
@media (max-width: 1080px) {
    .order-grid-layout {
        grid-template-columns: 1fr;
    }
    .order-summary-column {
        position: static;
    }
}

@media (max-width: 768px) {
    .order-portal-hero {
        padding: 105px 0 35px;
    }
    .order-step-block {
        padding: 18px 16px;
        border-radius: 16px;
    }
    .service-tier-cards-grid {
        grid-template-columns: 1fr;
    }
    .addons-grid {
        grid-template-columns: 1fr;
    }
    .order-form-grid {
        grid-template-columns: 1fr;
    }
    .order-summary-hud {
        padding: 20px 16px;
        border-radius: 18px;
    }
}

/* DURATION SELECTOR STYLING */
.duration-selector-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.duration-lbl {
    font-size: 12px;
    font-weight: 800;
    color: #ffd23f;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.duration-toggle-wrap {
    display: flex;
    align-items: stretch;
    gap: 8px;
    background: rgba(18, 18, 26, 0.95);
    border: 1.5px solid rgba(255, 210, 63, 0.25);
    border-radius: 16px;
    padding: 6px;
    backdrop-filter: blur(16px);
}

.duration-pill-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 10px 8px;
    border-radius: 12px;
    background: transparent;
    border: none;
    color: #94a3b8;
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.duration-pill-btn .pill-hint {
    font-size: 10px;
    font-weight: 500;
    color: #64748b;
    transition: color 0.25s ease;
}

.duration-pill-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
}

.duration-pill-btn.active {
    background: linear-gradient(135deg, #ffd23f 0%, #ffb703 100%);
    color: #08080a;
    font-weight: 900;
    box-shadow: 0 4px 20px rgba(255, 210, 63, 0.4);
}

.duration-pill-btn.active .pill-hint {
    color: #08080a;
    font-weight: 700;
}

@media (max-width: 600px) {
    .duration-toggle-wrap {
        flex-direction: column;
    }
}

/* ==========================================================================
   25. 'CREATE YOUR VIDEO AD IN 2 MINUTES' 1:1 REFERENCE STYLING (order.html)
   ========================================================================== */

.btn-create-my-video {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 22px;
    background: linear-gradient(135deg, #ffd23f 0%, #ffb703 50%, #f59e0b 100%);
    color: #ffffff !important;
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: 13.5px;
    font-weight: 700;
    border-radius: 999px;
    box-shadow: 0 4px 20px rgba(255, 210, 63, 0.45);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
}

.btn-create-my-video:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(255, 210, 63, 0.65);
    color: #ffffff !important;
}

/* HERO SECTION */
.v2-order-hero {
    position: relative;
    padding: 60px 0 40px;
    background: radial-gradient(circle at 50% -10%, rgba(255, 210, 63, 0.15) 0%, transparent 65%), #08080a;
}

.v2-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.95fr;
    gap: 40px;
    align-items: center;
}

.v2-badge-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background: rgba(255, 210, 63, 0.14);
    border: 1px solid rgba(255, 210, 63, 0.35);
    border-radius: 999px;
    color: #ffd23f;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.8px;
    margin-bottom: 16px;
    backdrop-filter: blur(8px);
}

.v2-hero-title {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: clamp(2.3rem, 4.2vw, 3.6rem);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin-bottom: 14px;
}

.text-purple-highlight {
    background: linear-gradient(135deg, #ffffff 0%, #ffd23f 50%, #f59e0b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.v2-hero-sub {
    font-size: 16px;
    color: #94a3b8;
    line-height: 1.6;
    max-width: 540px;
    margin-bottom: 24px;
}

.v2-hero-stats {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.v2-stat-card {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: rgba(18, 18, 26, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    backdrop-filter: blur(12px);
}

.v2-stat-icon {
    font-size: 18px;
}

.v2-stat-text strong {
    display: block;
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: 15px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
}

.v2-stat-text small {
    font-size: 10.5px;
    color: #64748b;
}

.v2-trusted-brands {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 18px;
}

.v2-trusted-lbl {
    display: block;
    font-size: 11px;
    color: #64748b;
    font-weight: 600;
    margin-bottom: 10px;
}

.v2-brands-row {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.v2-brand-name {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: 13px;
    font-weight: 800;
    color: #cbd5e1;
    letter-spacing: 0.5px;
}

.v2-brand-more {
    font-size: 12px;
    color: #64748b;
}

/* RIGHT HERO VIDEO PREVIEW CARD */
.v2-hero-video-card {
    background: rgba(14, 14, 20, 0.85);
    border: 1.5px solid rgba(255, 210, 63, 0.25);
    border-radius: 24px;
    padding: 16px;
    backdrop-filter: blur(20px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(255, 210, 63, 0.15);
}

.v2-video-main-box {
    position: relative;
    width: 100%;
    height: 250px;
    border-radius: 16px;
    overflow: hidden;
    background: #000000;
}

.v2-video-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.v2-video-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, transparent 40%, rgba(0,0,0,0.8) 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 14px;
}

.v2-video-type-badge {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 700;
    backdrop-filter: blur(8px);
}

.v2-hero-play-btn {
    align-self: center;
    margin: auto 0;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    border: 2px solid rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.v2-hero-play-btn:hover {
    transform: scale(1.12);
    background: rgba(255, 210, 63, 0.85);
    border-color: #ffffff;
    box-shadow: 0 10px 35px rgba(255, 210, 63, 0.6);
}

.v2-hero-style-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 14px;
}

.v2-style-tab-item {
    background: rgba(18, 18, 26, 0.9);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.v2-style-tab-item .tab-thumb-wrap {
    position: relative;
    width: 100%;
    height: 50px;
    border-radius: 8px;
    overflow: hidden;
}

.v2-style-tab-item .tab-thumb-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.v2-style-tab-item:hover .tab-thumb-wrap img {
    transform: scale(1.08);
}

.v2-style-tab-item .tab-play-icon {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 20px;
    height: 20px;
    background: rgba(0,0,0,0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 9px;
}

.v2-style-tab-item .tab-title {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    transition: color 0.2s ease;
}

.v2-style-tab-item:hover {
    border-color: rgba(255, 210, 63, 0.4);
}

.v2-style-tab-item.active {
    border-color: #ffd23f;
    background: rgba(255, 210, 63, 0.15);
    box-shadow: 0 0 16px rgba(255, 210, 63, 0.2);
}

.v2-style-tab-item.active .tab-title {
    color: #ffd23f;
    font-weight: 800;
}

/* Auto-Slide Progress Line */
.v2-style-tab-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2.5px;
    width: 0%;
    background: linear-gradient(90deg, #ffd23f, #ffffff);
    transition: width 0.1s linear;
}

.v2-style-tab-item.active.is-animating::after {
    animation: tabSlideProgress 3.8s linear forwards;
}

@keyframes tabSlideProgress {
    0% { width: 0%; }
    100% { width: 100%; }
}

.v2-video-thumb {
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s ease;
}

/* MAIN CONFIGURATOR GRID */
/* Strictly hide #fixButton on all order configurator pages */
.order-page-body #fixButton,
.web-order-page-body #fixButton,
.luxury-cockpit-theme #fixButton,
body.order-page-body .left_fix,
body.web-order-page-body .left_fix,
body.luxury-cockpit-theme .left_fix {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.v2-order-section {
    padding: 20px 0 80px;
    position: relative;
}

.v2-config-grid {
    display: grid;
    grid-template-columns: 1fr 345px;
    gap: 20px;
    align-items: start;
}

.v2-steps-column {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.v2-order-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.v2-step-card {
    background: rgba(14, 14, 20, 0.85);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 26px;
    backdrop-filter: blur(16px);
    transition: border-color 0.3s ease;
}

.v2-step-card:hover {
    border-color: rgba(255, 210, 63, 0.25);
}

.v2-step-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.v2-step-badge {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffd23f 0%, #ffb703 100%);
    color: #ffffff;
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: 14px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(255, 210, 63, 0.4);
    flex-shrink: 0;
}

.v2-step-h {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: 1.25rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
}

.v2-step-p {
    font-size: 12.5px;
    color: #94a3b8;
    margin: 2px 0 0;
}

/* STEP 1: PROMOTING GRID (6 CARDS) */
.v2-promoting-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

.v2-prom-card {
    position: relative;
    cursor: pointer;
}

.v2-prom-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.v2-prom-inner {
    background: rgba(18, 18, 26, 0.85);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 16px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    height: 100%;
}

.v2-prom-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 2px;
}

.v2-prom-icon.purple-bg { background: rgba(255, 210, 63, 0.15); }
.v2-prom-icon.emerald-bg { background: rgba(16, 185, 129, 0.15); }
.v2-prom-icon.orange-bg { background: rgba(249, 115, 22, 0.15); }
.v2-prom-icon.blue-bg { background: rgba(59, 130, 246, 0.15); }
.v2-prom-icon.pink-bg { background: rgba(236, 72, 153, 0.15); }
.v2-prom-icon.gray-bg { background: rgba(148, 163, 184, 0.15); }

.v2-prom-title {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: 13px;
    font-weight: 800;
    color: #ffffff;
}

.v2-prom-sub {
    font-size: 10px;
    color: #64748b;
    line-height: 1.3;
}

.v2-check-mark {
    display: none;
    position: absolute;
    top: 8px;
    right: 8px;
    width: 18px;
    height: 18px;
    background: #ffd23f;
    color: #ffffff;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 800;
    align-items: center;
    justify-content: center;
}

.v2-prom-card:hover .v2-prom-inner {
    border-color: rgba(255, 210, 63, 0.4);
    transform: translateY(-2px);
}

.v2-prom-card.selected .v2-prom-inner {
    background: rgba(255, 210, 63, 0.12);
    border-color: #ffd23f;
    box-shadow: 0 4px 20px rgba(255, 210, 63, 0.25);
}

.v2-prom-card.selected .v2-check-mark {
    display: flex;
}

/* STEP 2: STYLE CARDS (5 CARDS) */
.v2-style-cards-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.v2-style-card {
    position: relative;
    cursor: pointer;
}

.v2-style-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.v2-style-inner {
    background: rgba(18, 18, 26, 0.85);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    height: 100%;
}

.v2-style-thumb-box {
    position: relative;
    width: 100%;
    height: 90px;
    background: #000000;
    overflow: hidden;
}

.v2-style-thumb-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.v2-style-tag.popular {
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 2px 6px;
    background: linear-gradient(135deg, #ffd23f 0%, #ffb703 100%);
    color: #ffffff;
    font-size: 9px;
    font-weight: 800;
    border-radius: 4px;
}

.v2-play-btn-circle {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 26px;
    height: 26px;
    background: rgba(0,0,0,0.65);
    border: 1.5px solid rgba(255,255,255,0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 11px;
}

.v2-not-sure-icon {
    height: 90px;
    background: rgba(148, 163, 184, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #94a3b8;
}

.v2-style-info {
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.v2-style-name {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: 13px;
    font-weight: 800;
    color: #ffffff;
}

.v2-style-desc {
    font-size: 10px;
    color: #64748b;
    line-height: 1.35;
}

.v2-style-card:hover .v2-style-inner {
    border-color: rgba(255, 210, 63, 0.4);
    transform: translateY(-2px);
}

.v2-style-card.selected .v2-style-inner {
    background: rgba(255, 210, 63, 0.12);
    border-color: #ffd23f;
    box-shadow: 0 4px 20px rgba(255, 210, 63, 0.25);
}

.v2-style-card.selected .v2-check-mark {
    display: flex;
}

/* STEP 3: DURATION PILLS (5 PILLS) */
.v2-durations-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.v2-dur-pill {
    position: relative;
    cursor: pointer;
}

.v2-dur-pill input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.v2-dur-inner {
    background: rgba(18, 18, 26, 0.85);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    height: 100%;
}

.v2-dur-badge.popular {
    position: absolute;
    top: -8px;
    background: linear-gradient(135deg, #ffd23f 0%, #ffb703 100%);
    color: #ffffff;
    font-size: 8.5px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 999px;
    letter-spacing: 0.4px;
}

.v2-dur-title {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: 13.5px;
    font-weight: 800;
    color: #ffffff;
}

.v2-dur-hint {
    font-size: 10.5px;
    color: #64748b;
}

.text-purple { color: #ffd23f !important; font-weight: 700; }

.v2-dur-pill:hover .v2-dur-inner {
    border-color: rgba(255, 210, 63, 0.4);
}

.v2-dur-pill.selected .v2-dur-inner {
    background: rgba(255, 210, 63, 0.12);
    border-color: #ffd23f;
    box-shadow: 0 4px 18px rgba(255, 210, 63, 0.25);
}

.v2-dur-pill.selected .v2-check-mark {
    display: flex;
}

.v2-duration-tip-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(255, 210, 63, 0.08);
    border: 1px solid rgba(255, 210, 63, 0.2);
    border-radius: 12px;
    color: #ffd23f;
    font-size: 12px;
    font-weight: 600;
}

/* REASSURANCE / NO SCRIPT CARD */
.v2-reassurance-card {
    background: linear-gradient(135deg, rgba(14, 14, 24, 0.95) 0%, rgba(26, 16, 42, 0.8) 100%);
    border: 1.5px solid rgba(255, 210, 63, 0.3);
    border-radius: 20px;
    padding: 24px;
    display: grid;
    grid-template-columns: 1fr 110px;
    gap: 20px;
    align-items: center;
    backdrop-filter: blur(16px);
}

.v2-reassure-title {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 4px;
}

.v2-reassure-sub {
    font-size: 12.5px;
    color: #94a3b8;
    margin: 0 0 14px;
}

.v2-reassure-pills {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.v2-help-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    font-size: 11.5px;
    color: #cbd5e1;
}

.v2-help-pill strong {
    color: #ffffff;
}

.v2-reassure-avatar-art {
    display: flex;
    justify-content: center;
}

.v2-team-avatar {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ffd23f;
    box-shadow: 0 8px 24px rgba(255, 210, 63, 0.4);
}

/* STEP 4: CONTACT FIELDS */
.v2-form-fields-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.v2-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.v2-field label {
    font-size: 12px;
    font-weight: 700;
    color: #cbd5e1;
}

.v2-input {
    background: rgba(18, 18, 26, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 12px 14px;
    color: #ffffff;
    font-family: var(--font-body);
    font-size: 13.5px;
    outline: none;
    transition: all 0.25s ease;
}

.v2-input:focus {
    border-color: #ffd23f;
    box-shadow: 0 0 0 3px rgba(255, 210, 63, 0.2);
}

/* RIGHT COLUMN: STICKY "YOUR VIDEO AD SUMMARY" HUD */
.v2-summary-column {
    position: -webkit-sticky;
    position: sticky;
    top: 128px;
    align-self: start;
    z-index: 30;
}

.v2-summary-card {
    background: rgba(14, 14, 20, 0.95);
    border: 1.5px solid rgba(255, 210, 63, 0.35);
    border-radius: 24px;
    padding: 22px;
    backdrop-filter: blur(24px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 35px rgba(255, 210, 63, 0.15);
    display: flex;
    flex-direction: column;
    gap: 13px;
    overflow: visible;
}

.v2-sum-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.v2-sum-title {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
}

.v2-sum-edit-link {
    font-size: 12px;
    font-weight: 700;
    color: #ffd23f;
    text-decoration: none;
}

.v2-sum-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.v2-sum-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12.5px;
}

.v2-sum-label {
    color: #94a3b8;
}

.v2-sum-val {
    color: #ffffff;
    font-weight: 700;
}

.v2-sum-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
}

.v2-total-price-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.v2-total-label {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
}

.v2-total-amount {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: 1.85rem;
    font-weight: 900;
    color: #ffffff;
}

/* GREEN 25% ADVANCE TOKEN BOX */
.v2-advance-token-box {
    background: rgba(16, 185, 129, 0.08);
    border: 1.5px solid rgba(16, 185, 129, 0.35);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.v2-token-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.v2-token-tag {
    font-size: 12px;
    font-weight: 700;
    color: #34d399;
}

.v2-token-val {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: 1.7rem;
    font-weight: 900;
    color: #34d399;
}

.v2-token-remaining-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11.5px;
    color: #94a3b8;
}

.v2-token-remaining-row strong {
    color: #cbd5e1;
}

/* TRUST CHECKLIST */
.v2-trust-checklist {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    font-size: 11px;
    color: #94a3b8;
}

.v2-check-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* BUTTONS */
.btn-start-video-now {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #ffd23f 0%, #ffb703 50%, #f59e0b 100%);
    border: none;
    border-radius: 14px;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    box-shadow: 0 8px 25px rgba(255, 210, 63, 0.5);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-start-video-now span {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: 15px;
    font-weight: 800;
}

.btn-start-video-now .btn-sub-lock {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.8);
}

.btn-start-video-now:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(255, 210, 63, 0.7);
}

.btn-offline-invoice {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 8px 10px;
    color: #94a3b8;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.btn-offline-invoice:hover {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.04);
}

.v2-payment-icons-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.v2-we-accept {
    font-size: 10px;
    color: #64748b;
    font-weight: 700;
}

.v2-pay-badges {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pay-badge {
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    font-size: 9px;
    font-weight: 800;
    color: #cbd5e1;
    letter-spacing: 0.4px;
}

/* SOCIAL PROOF 4-GRID */
.v2-social-proof-section {
    padding: 60px 0 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(10, 10, 15, 0.5);
}

.v2-proof-heading {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: 1.4rem;
    font-weight: 800;
    color: #ffffff;
    text-align: center;
    margin-bottom: 30px;
}

.v2-proof-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.v2-proof-item {
    background: rgba(18, 18, 26, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.v2-proof-icon {
    font-size: 24px;
    margin-bottom: 4px;
}

.v2-proof-item strong {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: 14px;
    color: #ffffff;
}

.v2-proof-item p {
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.4;
    margin: 0;
}

/* HOW IT WORKS TIMELINE */
.v2-how-it-works-section {
    padding: 40px 0 80px;
}

.v2-how-title {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: 1.4rem;
    font-weight: 800;
    color: #ffffff;
    text-align: center;
    margin-bottom: 30px;
}

.v2-timeline-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(18, 18, 26, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 24px;
    backdrop-filter: blur(16px);
}

.v2-flow-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}

.flow-icon-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 210, 63, 0.15);
    border: 1px solid rgba(255, 210, 63, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #ffffff;
    margin-bottom: 4px;
}

.v2-flow-step strong {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: 13px;
    color: #ffffff;
}

.v2-flow-step small {
    font-size: 11px;
    color: #94a3b8;
}

.v2-flow-step.highlight .flow-icon-circle {
    background: linear-gradient(135deg, #ffd23f 0%, #ffb703 100%);
    box-shadow: 0 4px 15px rgba(255, 210, 63, 0.5);
}

.flow-arrow {
    color: #64748b;
    font-size: 18px;
    font-weight: 700;
}

/* SUCCESS MODAL V2 */
.v2-success-card {
    max-width: 520px;
}

.v2-btn-wa {
    background: #25D366 !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4) !important;
}

.v2-success-status-box {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 12px;
    padding: 12px 16px;
    margin: 14px 0;
    font-size: 12.5px;
    color: #cbd5e1;
}

.v2-success-team-box {
    background: rgba(18, 18, 26, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 16px;
    text-align: left;
    margin-bottom: 20px;
}

.v2-success-avatar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: #ffffff;
    margin-bottom: 10px;
}

.team-dot-live {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 10px #34d399;
}

.v2-success-perks {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 11.5px;
    color: #94a3b8;
}

.v2-privacy-note {
    font-size: 10.5px;
    color: #64748b;
    margin-top: 12px;
    display: block;
}

/* RESPONSIVE MEDIA QUERIES (Exact for Mobile Flow in media_1788105743732.jpg) */
@media (max-width: 991px) {
    .v2-hero-grid,
    .v2-config-grid {
        grid-template-columns: 1fr;
    }

    .v2-summary-column {
        position: relative;
        top: 0;
    }

    .v2-promoting-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .v2-style-cards-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .v2-durations-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .v2-proof-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .v2-timeline-flow {
        flex-direction: column;
        gap: 14px;
    }

    .flow-arrow {
        transform: rotate(90deg);
    }
}

@media (max-width: 600px) {
    .v2-promoting-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .v2-style-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .v2-durations-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .v2-form-fields-grid {
        grid-template-columns: 1fr;
    }

    .v2-reassurance-card {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .v2-reassure-pills {
        justify-content: center;
    }

    .v2-proof-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   26. SIGNATURE ULTRA-LUXURY GOLD & OBSIDIAN ORDER ENGINE STYLING
   ========================================================================== */

.btn-create-my-video-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 22px;
    background: linear-gradient(135deg, #ffd23f 0%, #ffb703 50%, #f59e0b 100%);
    color: #08080a !important;
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: 13.5px;
    font-weight: 900;
    border-radius: 999px;
    box-shadow: 0 4px 20px rgba(255, 210, 63, 0.45);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
}

.btn-create-my-video-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(255, 210, 63, 0.65);
    color: #08080a !important;
}

.gold-theme-hero {
    background: radial-gradient(circle at 50% -10%, rgba(255, 210, 63, 0.16) 0%, transparent 65%), #08080a !important;
}

.gold-badge-pill {
    background: rgba(255, 210, 63, 0.12) !important;
    border: 1px solid rgba(255, 210, 63, 0.35) !important;
    color: #ffd23f !important;
}

.gold-pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffd23f;
    box-shadow: 0 0 8px #ffd23f;
    display: inline-block;
    animation: goldPulse 2s infinite;
}

@keyframes goldPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}

.text-gold-gradient {
    background: linear-gradient(135deg, #ffffff 0%, #ffd23f 50%, #f59e0b 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    display: inline-block;
}

.text-gold {
    color: #ffd23f !important;
}

.text-gold-header {
    color: #ffd23f !important;
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
}

.text-gold-glow {
    color: #ffffff !important;
    text-shadow: 0 0 20px rgba(255, 210, 63, 0.4);
}

.gold-stat {
    border: 1px solid rgba(255, 210, 63, 0.18) !important;
}

.gold-stat:hover {
    border-color: rgba(255, 210, 63, 0.4) !important;
}

.gold-frame {
    border: 1.5px solid rgba(255, 210, 63, 0.3) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 35px rgba(255, 210, 63, 0.12) !important;
}

.gold-video-badge {
    border-color: rgba(255, 210, 63, 0.35) !important;
    color: #ffd23f !important;
}

.gold-play {
    background: linear-gradient(135deg, #ffd23f 0%, #ffb703 100%) !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 10px 30px rgba(255, 210, 63, 0.5) !important;
}

.gold-play:hover {
    transform: scale(1.12) !important;
    box-shadow: 0 10px 40px rgba(255, 210, 63, 0.8) !important;
}

.gold-tab.active {
    border-color: #ffd23f !important;
    background: rgba(255, 210, 63, 0.12) !important;
}

.gold-tab.active .tab-title {
    color: #ffd23f !important;
}

.gold-step-card:hover {
    border-color: rgba(255, 210, 63, 0.3) !important;
}

.gold-badge-num {
    background: linear-gradient(135deg, #ffffff 0%, #ffd23f 50%, #f59e0b 100%) !important;
    color: #08080a !important;
    font-weight: 900 !important;
    box-shadow: 0 4px 15px rgba(255, 210, 63, 0.4) !important;
}

.gold-icon-bg {
    background: rgba(255, 210, 63, 0.15) !important;
}

.gold-check {
    background: #ffd23f !important;
    color: #08080a !important;
}

.gold-card.selected .v2-prom-inner {
    background: rgba(255, 210, 63, 0.08) !important;
    border-color: #ffd23f !important;
    box-shadow: 0 4px 20px rgba(255, 210, 63, 0.25) !important;
}

.gold-style-card.selected .v2-style-inner {
    background: rgba(255, 210, 63, 0.08) !important;
    border-color: #ffd23f !important;
    box-shadow: 0 4px 20px rgba(255, 210, 63, 0.25) !important;
}

.gold-pop {
    background: linear-gradient(135deg, #ffd23f 0%, #ffb703 100%) !important;
    color: #08080a !important;
    font-weight: 900 !important;
}

.gold-play-sm {
    border-color: rgba(255, 210, 63, 0.7) !important;
    color: #ffd23f !important;
}

.gold-not-sure {
    color: #ffd23f !important;
    background: rgba(255, 210, 63, 0.08) !important;
}

.gold-dur-pill.selected .v2-dur-inner {
    background: rgba(255, 210, 63, 0.08) !important;
    border-color: #ffd23f !important;
    box-shadow: 0 4px 18px rgba(255, 210, 63, 0.25) !important;
}

.gold-ribbon {
    background: linear-gradient(135deg, #ffd23f 0%, #ffb703 100%) !important;
    color: #08080a !important;
    font-weight: 900 !important;
}

.gold-tip-box {
    background: rgba(255, 210, 63, 0.08) !important;
    border: 1px solid rgba(255, 210, 63, 0.25) !important;
    color: #ffd23f !important;
}

.gold-reassurance {
    background: linear-gradient(135deg, rgba(14, 14, 20, 0.95) 0%, rgba(28, 24, 12, 0.85) 100%) !important;
    border: 1.5px solid rgba(255, 210, 63, 0.3) !important;
}

.gold-help-pill {
    border: 1px solid rgba(255, 210, 63, 0.2) !important;
}

.gold-avatar-ring {
    border: 2px solid #ffd23f !important;
    box-shadow: 0 8px 24px rgba(255, 210, 63, 0.35) !important;
}

.gold-input:focus {
    border-color: #ffd23f !important;
    box-shadow: 0 0 0 3px rgba(255, 210, 63, 0.2) !important;
}

.gold-summary-card {
    border: 1.5px solid rgba(255, 210, 63, 0.35) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 35px rgba(255, 210, 63, 0.15) !important;
}

.gold-edit {
    color: #ffd23f !important;
}

.gold-divider {
    background: rgba(255, 210, 63, 0.15) !important;
}

.gold-token-box {
    background: rgba(16, 185, 129, 0.08) !important;
    border: 1.5px solid rgba(16, 185, 129, 0.35) !important;
}

.btn-start-video-gold {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #ffd23f 0%, #ffb703 50%, #f59e0b 100%);
    border: none;
    border-radius: 14px;
    color: #08080a;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    box-shadow: 0 8px 25px rgba(255, 210, 63, 0.5);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-start-video-gold span {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: 15px;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.btn-start-video-gold .btn-sub-lock {
    font-size: 10.5px;
    color: rgba(8, 8, 10, 0.85);
    font-weight: 700;
}

.btn-start-video-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(255, 210, 63, 0.7);
}

.gold-offline:hover {
    border-color: rgba(255, 210, 63, 0.4) !important;
}

.gold-proof-card:hover {
    border-color: rgba(255, 210, 63, 0.3) !important;
}

.gold-flow-circle {
    background: rgba(255, 210, 63, 0.12) !important;
    border: 1px solid rgba(255, 210, 63, 0.3) !important;
    color: #ffd23f !important;
}

.gold-flow-circle-active {
    background: linear-gradient(135deg, #ffd23f 0%, #ffb703 100%) !important;
    color: #08080a !important;
    box-shadow: 0 4px 15px rgba(255, 210, 63, 0.5) !important;
}

.gold-arrow {
    color: rgba(255, 210, 63, 0.4) !important;
}

.gold-modal-card {
    border: 1.5px solid rgba(255, 210, 63, 0.35) !important;
}

.gold-glow {
    background: radial-gradient(circle, rgba(255, 210, 63, 0.2) 0%, transparent 70%) !important;
}

.gold-badge-icon {
    background: linear-gradient(135deg, #ffd23f 0%, #ffb703 100%) !important;
    color: #08080a !important;
}

.gold-success-tag {
    color: #ffd23f !important;
    border-color: rgba(255, 210, 63, 0.3) !important;
}

.gold-booking-pill {
    border-color: rgba(255, 210, 63, 0.35) !important;
}

.gold-booking-pill strong {
    color: #ffd23f !important;
}

.gold-status-box {
    border-color: rgba(255, 210, 63, 0.3) !important;
}

.gold-team-box {
    border-color: rgba(255, 210, 63, 0.2) !important;
}

.gold-dot {
    background: #ffd23f !important;
    box-shadow: 0 0 10px #ffd23f !important;
}

/* GOLD VECTOR SVG ICON STYLING (ZERO EMOJIS) */
.g-svg {
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    color: #ffd23f;
    flex-shrink: 0;
    transition: transform 0.25s ease, filter 0.25s ease;
}

.v2-prom-icon .g-svg {
    width: 22px;
    height: 22px;
}

.v2-stat-icon .g-svg {
    width: 22px;
    height: 22px;
}

.v2-proof-icon .g-svg {
    width: 26px;
    height: 26px;
}

.flow-icon-circle .g-svg {
    width: 22px;
    height: 22px;
}

.v2-sum-label .g-svg {
    width: 15px;
    height: 15px;
    margin-right: 4px;
}

.v2-check-item .g-svg {
    width: 15px;
    height: 15px;
    color: #ffd23f;
}

.pill-icon .g-svg {
    width: 14px;
    height: 14px;
    color: #ffd23f;
}

.tip-bulb .g-svg {
    width: 16px;
    height: 16px;
    color: #ffd23f;
}

.v2-prom-card:hover .g-svg {
    transform: scale(1.1);
    filter: drop-shadow(0 0 6px rgba(255, 210, 63, 0.6));
}

/* ==========================================================================
   27. EXECUTIVE STUDIO TRUST & VIP CONCIERGE STYLING
   ========================================================================== */

.studio-pipeline-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-radius: 999px;
    color: #34d399;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.status-beacon-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 10px #10b981;
    display: inline-block;
    animation: statusPulse 2s infinite;
}

@keyframes statusPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.8); opacity: 0.5; }
}

.exec-trust-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 10px;
}

.exec-stat-card {
    background: rgba(18, 18, 26, 0.75);
    border: 1px solid rgba(255, 210, 63, 0.2);
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    transition: all 0.3s ease;
}

.exec-stat-card:hover {
    border-color: rgba(255, 210, 63, 0.45);
    transform: translateY(-2px);
    background: rgba(255, 210, 63, 0.06);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.exec-stat-num {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: 1.35rem;
    font-weight: 900;
    color: #ffd23f;
    letter-spacing: -0.01em;
}

.exec-stat-lbl {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 600;
}

.btn-wa-concierge-direct {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px;
    background: rgba(37, 211, 102, 0.08);
    border: 1px solid rgba(37, 211, 102, 0.3);
    border-radius: 12px;
    color: #25d366;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.25s ease;
    margin-top: 4px;
}

.btn-wa-concierge-direct:hover {
    background: rgba(37, 211, 102, 0.18);
    border-color: #25d366;
    color: #ffffff;
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .exec-trust-stats-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

/* ==========================================================================
   28. OFFICIAL BRAND & PAYMENT LOGOS STYLING
   ========================================================================== */

.auth-brand-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px 18px;
    margin-top: 10px;
}

.auth-brand-item {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 6px 12px;
    transition: all 0.25s ease;
}

.auth-brand-item:hover {
    background: rgba(255, 210, 63, 0.08);
    border-color: rgba(255, 210, 63, 0.3);
    transform: translateY(-1px);
}

.client-brand-svg {
    height: 20px;
    width: auto;
    max-width: 130px;
    display: block;
}

/* OFFICIAL PAYMENT BADGES */
.v2-pay-header-row {
    font-size: 10px;
    font-weight: 800;
    color: #94a3b8;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
    text-align: center;
}

.auth-pay-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    align-items: center;
    width: 100%;
}

.auth-pay-badge-card {
    background: #ffffff;
    border-radius: 8px;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    transition: all 0.25s ease;
}

.auth-pay-badge-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 210, 63, 0.4);
}

.auth-pay-badge-card:nth-child(3),
.auth-pay-badge-card:nth-child(4) {
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.pay-logo-svg {
    max-height: 20px;
    width: auto;
    display: block;
}

/* PURE STANDALONE BRAND LOGO ICONS (ZERO TEXT) */
.auth-brand-strip.pure-icons-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
}

.auth-brand-item.icon-only {
    width: 44px;
    height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: default;
}

.auth-brand-item.icon-only:hover {
    background: rgba(255, 210, 63, 0.12);
    border-color: #ffd23f;
    transform: translateY(-3px) scale(1.08);
    box-shadow: 0 8px 20px rgba(255, 210, 63, 0.3);
}

.client-brand-svg.icon-mark {
    width: 26px;
    height: 26px;
    max-width: 26px;
    max-height: 26px;
    display: block;
}

/* ==========================================================================
   29. EXACT 3D METALLIC GOLD HEXAGON PLAY LOGO
   ========================================================================== */

.meeways-logo, .drawer-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.25s ease;
}

.meeways-logo:hover, .drawer-brand:hover {
    transform: scale(1.02);
}

.logo-symbol {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.meeways-logo:hover .logo-symbol, .drawer-brand:hover .logo-symbol {
    transform: rotate(6deg) scale(1.08);
}

.brand-name {
    font-family: 'Aclonica', cursive, sans-serif !important;
    font-size: 24px;
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: baseline;
    line-height: 1;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.brand-dot {
    color: #ffd23f;
    font-size: 32px;
    line-height: 0;
    display: inline-block;
    margin-left: 2px;
    text-shadow: 0 0 12px rgba(255, 210, 63, 0.85);
    animation: goldDotPulse 2.5s infinite;
}

@keyframes goldDotPulse {
    0%, 100% { transform: scale(1); text-shadow: 0 0 12px rgba(255, 210, 63, 0.85); }
    50% { transform: scale(1.25); text-shadow: 0 0 22px rgba(255, 210, 63, 1); }
}


/* MEEWAYS BRAND WORDMARK WITH ACLONICA FONT */
.brand-name,
.meeways-logo .brand-name,
.drawer-brand .brand-name,
.preloader-brand-title .brand-name {
    font-family: 'Aclonica', cursive, sans-serif !important;
    font-size: 24px;
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: baseline;
    line-height: 1;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.brand-dot {
    color: #ffd23f;
    font-family: 'Aclonica', cursive, sans-serif !important;
    font-size: 28px;
    line-height: 0;
    display: inline-block;
    margin-left: 2px;
    text-shadow: 0 0 12px rgba(255, 210, 63, 0.85);
    animation: goldDotPulse 2.5s infinite;
}

/* ==========================================================================
   30. EXACT MASTER LOGO IMAGE INTEGRATION (media_1788113336942.png)
   ========================================================================== */

.meeways-logo, .drawer-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}

.meeways-logo:hover, .drawer-brand:hover {
    transform: scale(1.04);
    filter: drop-shadow(0 0 16px rgba(255, 210, 63, 0.45));
}

.meeways-brand-logo-img {
    height: 66px;
    width: auto;
    max-width: 360px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.7));
    transition: transform 0.25s ease;
}

.drawer-logo-img {
    height: 52px;
    max-width: 280px;
}

.preloader-master-logo-img {
    height: 88px;
    width: auto;
    max-width: 440px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 0 30px rgba(255, 210, 63, 0.8));
    animation: preloaderLogoGlow 2s infinite alternate;
}

@keyframes preloaderLogoGlow {
    0% { transform: scale(0.98); filter: drop-shadow(0 0 20px rgba(255, 210, 63, 0.5)); }
    100% { transform: scale(1.03); filter: drop-shadow(0 0 45px rgba(255, 210, 63, 1)); }
}

@media (max-width: 768px) {
    .main-header__inner {
        height: 72px;
    }
    .meeways-brand-logo-img {
        height: 48px;
        max-width: 250px;
    }
}

/* ==========================================================================
   31. FULLY ANIMATED MEEWAYS MASTER LOGO (ACLONICA FONT + 3D ORBIT)
   ========================================================================== */

.meeways-animated-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}

.meeways-animated-logo:hover {
    transform: scale(1.03);
    filter: drop-shadow(0 0 20px rgba(255, 210, 63, 0.5));
}

.mw-logo-monolith {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}

/* 1. LEFT HEXAGON & ORBIT */
.mw-hex-wrap {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.mw-hex-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.mw-orbit-halo {
    transform-origin: 27px 27px;
    animation: mwSpinHalo 12s linear infinite;
}

@keyframes mwSpinHalo {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.meeways-animated-logo:hover .mw-orbit-halo {
    animation-duration: 3.5s;
}

.mw-core-pulse {
    transform-origin: 27px 27px;
    animation: mwCorePulse 2.5s ease-in-out infinite alternate;
}

@keyframes mwCorePulse {
    0% { transform: scale(0.92); filter: drop-shadow(0 0 2px #ffd23f); }
    100% { transform: scale(1.12); filter: drop-shadow(0 0 10px #ffd23f); }
}

/* 2. CENTER WORDMARK (ACLONICA FONT) */
.mw-wordmark-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mw-top-row {
    display: flex;
    align-items: center;
    gap: 2px;
    line-height: 1;
}

.mw-brand-aclonica {
    font-family: 'Aclonica', cursive, sans-serif !important;
    font-size: 27px;
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0.01em;
    display: inline-block;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
    background: linear-gradient(135deg, #ffffff 0%, #ffffff 70%, #ffd23f 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 0.3s ease;
}

.mw-animated-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ffd23f;
    box-shadow: 0 0 10px #ffd23f, 0 0 20px #ffd23f;
    display: inline-block;
    margin-left: 2px;
    margin-right: 6px;
    margin-bottom: 2px;
    align-self: flex-end;
    animation: mwDotPulse 2s ease-in-out infinite;
}

@keyframes mwDotPulse {
    0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 8px #ffd23f; }
    50% { transform: scale(1.35); opacity: 0.85; box-shadow: 0 0 18px #ffd23f; }
}

/* 3. RIGHT 3D 360 & ORBIT ARROW */
.mw-360-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.mw-360-text {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: 26px;
    font-weight: 900;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #fff8db 0%, #ffd23f 50%, #f59e0b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 15px rgba(255, 210, 63, 0.4);
    z-index: 2;
    position: relative;
}

.mw-orbit-360-svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-12deg);
    width: 58px;
    height: 38px;
    pointer-events: none;
    z-index: 3;
    overflow: visible;
    animation: mw360OrbitTilt 4s ease-in-out infinite alternate;
}

@keyframes mw360OrbitTilt {
    0% { transform: translate(-50%, -50%) rotate(-15deg) scale(0.98); }
    100% { transform: translate(-50%, -50%) rotate(-8deg) scale(1.03); }
}

.mw-orbit-path {
    stroke-dasharray: 60 20;
    animation: mwOrbitDash 4s linear infinite;
}

@keyframes mwOrbitDash {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 160; }
}

/* 4. BOTTOM TAGLINE WITH LASER BEAMS */
.mw-tagline-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 1px;
}

.mw-laser-line {
    height: 1px;
    flex-grow: 1;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 210, 63, 0.6) 100%);
}

.mw-laser-line.right {
    background: linear-gradient(90deg, rgba(255, 210, 63, 0.6) 0%, transparent 100%);
}

.mw-tagline-text {
    font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1;
}

.mw-tagline-text .tag-white {
    color: rgba(255, 255, 255, 0.75);
}

.mw-tagline-text .tag-gold {
    color: #ffd23f;
    font-weight: 800;
}

/* MOBILE ADAPTATION */
@media (max-width: 768px) {
    .mw-hex-wrap {
        width: 38px;
        height: 38px;
    }
    .mw-brand-aclonica {
        font-size: 21px;
    }
    .mw-360-text {
        font-size: 20px;
    }
    .mw-orbit-360-svg {
        width: 46px;
        height: 30px;
    }
    .mw-tagline-row {
        display: none; /* Clean fit for mobile header */
    }
}

/* ==========================================================================
   32. 360 DEGREE THEN MEEWAYS. BRAND LOGO ARCHITECTURE
   ========================================================================== */

.mw-360-lead-wrap {
    display: flex;
    align-items: center;
    position: relative;
    padding-right: 2px;
    margin-right: 4px;
}

.mw-360-icon-box {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.mw-360-lead-text {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: 29px;
    font-weight: 900;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #fff8db 0%, #ffd23f 50%, #f59e0b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 15px rgba(255, 210, 63, 0.45);
    z-index: 2;
    position: relative;
    line-height: 1;
}

.mw-degree-symbol {
    font-size: 22px;
    color: #ffd23f;
    -webkit-text-fill-color: #ffd23f;
    vertical-align: super;
}

.mw-orbit-lead-svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-12deg);
    width: 64px;
    height: 44px;
    pointer-events: none;
    z-index: 3;
    overflow: visible;
    animation: mw360LeadOrbitTilt 4s ease-in-out infinite alternate;
}

@keyframes mw360LeadOrbitTilt {
    0% { transform: translate(-50%, -50%) rotate(-15deg) scale(0.98); }
    100% { transform: translate(-50%, -50%) rotate(-8deg) scale(1.04); }
}

.mw-orbit-lead-path {
    stroke-dasharray: 65 20;
    animation: mwLeadOrbitDash 3.5s linear infinite;
}

@keyframes mwLeadOrbitDash {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 170; }
}

@media (max-width: 768px) {
    .mw-360-lead-text {
        font-size: 22px;
    }
    .mw-orbit-lead-svg {
        width: 50px;
        height: 34px;
    }
}

/* ==========================================================================
   33. MASTER ULTRA-LUXURY 3D 360 + ACLONICA MEEWAYS LOGO
   ========================================================================== */

.meeways-premium-master-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}

.meeways-premium-master-logo:hover {
    transform: scale(1.035);
    filter: drop-shadow(0 0 24px rgba(255, 210, 63, 0.6));
}

.mw-luxury-logo-monolith {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
}

/* 1. 3D GOLDEN 360 EMBLEM */
.mw-lead-360-badge {
    width: 78px;
    height: 50px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.mw-lead-360-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 0 14px rgba(255, 210, 63, 0.45));
}

.mw-orbit-front {
    stroke-dasharray: 60 15;
    animation: mwOrbitStream 3.5s linear infinite;
}

.mw-orbit-back {
    stroke-dasharray: 40 15;
    animation: mwOrbitStreamBack 4s linear infinite;
}

@keyframes mwOrbitStream {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 150; }
}

@keyframes mwOrbitStreamBack {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -120; }
}

.mw-kinetic-arrow {
    transform-origin: 75px 24px;
    animation: mwArrowGlow 2.5s ease-in-out infinite alternate;
}

@keyframes mwArrowGlow {
    0% { transform: scale(0.95); filter: drop-shadow(0 0 4px #ffd23f); }
    100% { transform: scale(1.08); filter: drop-shadow(0 0 12px #ffffff); }
}

/* 2. MEEWAYS WORDMARK (ACLONICA) */
.mw-brand-identity-block {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mw-name-row {
    display: flex;
    align-items: center;
    line-height: 1;
}

.mw-aclonica-title {
    font-family: 'Aclonica', cursive, sans-serif !important;
    font-size: 29px;
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0.02em;
    display: inline-block;
    line-height: 1;
    background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 60%, #ffd23f 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.8), 0 0 25px rgba(255, 210, 63, 0.35);
    transition: all 0.3s ease;
}

.mw-gold-orb-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ffffff 0%, #ffd23f 40%, #f59e0b 80%, #d97706 100%);
    box-shadow: 0 0 12px #ffd23f, 0 0 22px rgba(255, 210, 63, 0.85);
    display: inline-block;
    margin-left: 4px;
    margin-bottom: 4px;
    align-self: flex-end;
    animation: mwOrbPulse 2s infinite ease-in-out;
}

@keyframes mwOrbPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 10px #ffd23f, 0 0 20px rgba(255, 210, 63, 0.7); }
    50% { transform: scale(1.35); box-shadow: 0 0 18px #ffffff, 0 0 35px #ffd23f; }
}

/* 3. EXECUTIVE TAGLINE WITH GOLDEN LASER BRACKETS */
.mw-tagline-container {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 1px;
}

.mw-laser-bracket {
    height: 1.5px;
    flex-grow: 1;
    min-width: 14px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 210, 63, 0.7) 100%);
    border-radius: 2px;
}

.mw-laser-bracket.right {
    background: linear-gradient(90deg, rgba(255, 210, 63, 0.7) 0%, transparent 100%);
}

.mw-tagline-text {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1;
}

.mw-tagline-text .tag-silver {
    color: #e2e8f0;
}

.mw-tagline-text .tag-gold-flame {
    background: linear-gradient(135deg, #ffffff 0%, #ffd23f 50%, #f59e0b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900;
    text-shadow: 0 0 10px rgba(255, 210, 63, 0.4);
}

/* MOBILE ADAPTATION */
@media (max-width: 768px) {
    .mw-lead-360-badge {
        width: 60px;
        height: 38px;
    }
    .mw-aclonica-title {
        font-size: 22px;
    }
    .mw-gold-orb-dot {
        width: 7px;
        height: 7px;
    }
    .mw-tagline-container {
        display: none;
    }
}

/* ==========================================================================
   34. 3D SCULPTURED 360 + ACLONICA LOGO WITH SLENDER UNDER-NAME TAGLINE
   ========================================================================== */

.meeways-animated-master-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}

.meeways-animated-master-logo:hover {
    transform: scale(1.03);
    filter: drop-shadow(0 0 20px rgba(255, 210, 63, 0.55));
}

.mw-master-logo-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

/* 1. 3D SCULPTURED 360 WITH STREAMING ORBIT */
.mw-360-sculpted-box {
    width: 80px;
    height: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.mw-360-cinema-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 0 12px rgba(255, 210, 63, 0.45));
}

.mw-orbit-fore {
    stroke-dasharray: 60 18;
    animation: mwOrbitForeFlow 3.5s linear infinite;
}

.mw-orbit-rear {
    stroke-dasharray: 40 18;
    animation: mwOrbitRearFlow 4s linear infinite;
}

@keyframes mwOrbitForeFlow {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 160; }
}

@keyframes mwOrbitRearFlow {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -130; }
}

.mw-360-num-group {
    animation: mw360FloatingDepth 4.5s ease-in-out infinite alternate;
}

@keyframes mw360FloatingDepth {
    0% { transform: translateY(0px) rotate(0deg); }
    100% { transform: translateY(-1.5px) rotate(0.8deg); }
}

.mw-orbit-arrowhead {
    transform-origin: 83px 25px;
    animation: mwArrowHeadPulse 2.5s ease-in-out infinite alternate;
}

@keyframes mwArrowHeadPulse {
    0% { transform: scale(0.95); filter: drop-shadow(0 0 4px #ffd23f); }
    100% { transform: scale(1.08); filter: drop-shadow(0 0 12px #ffffff); }
}

/* 2. MEEWAYS WORDMARK (ACLONICA FONT) */
.mw-identity-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    width: fit-content;
}

.mw-brand-row {
    display: flex;
    align-items: baseline;
    line-height: 1;
}

.mw-aclonica-word {
    font-family: 'Aclonica', cursive, sans-serif !important;
    font-size: 28px;
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0.02em;
    display: inline-block;
    line-height: 1;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 60%, #ffd23f 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.8), 0 0 25px rgba(255, 210, 63, 0.35);
    transition: all 0.3s ease;
}

.mw-glowing-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ffffff 0%, #ffd23f 40%, #f59e0b 80%, #d97706 100%);
    box-shadow: 0 0 10px #ffd23f, 0 0 22px rgba(255, 210, 63, 0.85);
    display: inline-block;
    margin-left: 3px;
    margin-bottom: 3px;
    align-self: flex-end;
    animation: mwDotBreathing 2.2s infinite ease-in-out;
}

@keyframes mwDotBreathing {
    0%, 100% { transform: scale(1); box-shadow: 0 0 8px #ffd23f, 0 0 18px rgba(255, 210, 63, 0.7); }
    50% { transform: scale(1.35); box-shadow: 0 0 16px #ffffff, 0 0 30px #ffd23f; }
}

/* 3. SLENDER COMPACT TAGLINE FITTING EXACTLY UNDER MEEWAYS */
.mw-sub-tagline {
    font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
    font-size: 7.2px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1;
    margin-top: 3px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 4px;
}

.tag-slender-silver {
    color: rgba(255, 255, 255, 0.65);
    font-weight: 500;
}

.tag-slender-gold {
    color: #ffd23f;
    font-weight: 700;
    text-shadow: 0 0 8px rgba(255, 210, 63, 0.4);
}

/* MOBILE ADAPTATION */
@media (max-width: 768px) {
    .mw-360-sculpted-box {
        width: 62px;
        height: 40px;
    }
    .mw-aclonica-word {
        font-size: 21px;
    }
    .mw-glowing-dot {
        width: 6px;
        height: 6px;
    }
    .mw-sub-tagline {
        font-size: 6px;
        letter-spacing: 0.04em;
    }
}

/* ==========================================================================
   35. MASTERPIECE LOGO: AUTHENTIC 3D GOLD 360 + ACLONICA MEEWAYS + SLENDER TAGLINE
   ========================================================================== */

.meeways-masterpiece-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}

.meeways-masterpiece-logo:hover {
    transform: scale(1.035);
    filter: drop-shadow(0 0 22px rgba(255, 210, 63, 0.65));
}

.mw-masterpiece-monolith {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

/* 1. AUTHENTIC 3D GOLD 360 EMBLEM */
.mw-lead-360-visual-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mw-gold-360-img {
    height: 48px;
    width: auto;
    max-width: 96px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 10px rgba(255, 210, 63, 0.45));
    animation: mw360Floating3D 4s ease-in-out infinite alternate;
}

@keyframes mw360Floating3D {
    0% { transform: translateY(0px) rotate(0deg); }
    100% { transform: translateY(-2px) rotate(1deg); }
}

.mw-orbit-ambient-halo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 40px;
    background: radial-gradient(circle, rgba(255, 210, 63, 0.25) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    animation: mwHaloBreathing 3s ease-in-out infinite alternate;
}

@keyframes mwHaloBreathing {
    0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.5; }
    100% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.9; }
}

/* 2. MEEWAYS WORDMARK (ACLONICA FONT) */
.mw-brand-identity-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: fit-content;
}

.mw-brand-name-line {
    display: flex;
    align-items: baseline;
    line-height: 1;
}

.mw-aclonica-word {
    font-family: 'Aclonica', cursive, sans-serif !important;
    font-size: 29px;
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0.02em;
    display: inline-block;
    line-height: 1;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.8), 0 0 25px rgba(255, 210, 63, 0.35);
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 60%, #ffd23f 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.mw-glowing-gold-dot {
    width: 8.5px;
    height: 8.5px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ffffff 0%, #ffd23f 40%, #f59e0b 80%, #d97706 100%);
    box-shadow: 0 0 10px #ffd23f, 0 0 22px rgba(255, 210, 63, 0.9);
    display: inline-block;
    margin-left: 3px;
    margin-bottom: 3px;
    align-self: flex-end;
    animation: mwDotPulseGlow 2.2s infinite ease-in-out;
}

@keyframes mwDotPulseGlow {
    0%, 100% { transform: scale(1); box-shadow: 0 0 8px #ffd23f, 0 0 18px rgba(255, 210, 63, 0.7); }
    50% { transform: scale(1.35); box-shadow: 0 0 16px #ffffff, 0 0 32px #ffd23f; }
}

/* 3. SLENDER TAGLINE FITTING EXACTLY UNDER MEEWAYS */
.mw-under-tagline {
    font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
    font-size: 7.2px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1;
    margin-top: 2px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 4px;
}

.tag-slender-silver {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

.tag-slender-gold {
    color: #ffd23f;
    font-weight: 700;
    text-shadow: 0 0 8px rgba(255, 210, 63, 0.4);
}

/* MOBILE ADAPTATION */
@media (max-width: 768px) {
    .mw-gold-360-img {
        height: 38px;
        max-width: 76px;
    }
    .mw-aclonica-word {
        font-size: 22px;
    }
    .mw-glowing-gold-dot {
        width: 6.5px;
        height: 6.5px;
    }
    .mw-under-tagline {
        font-size: 6px;
        letter-spacing: 0.04em;
    }
}

/* ==========================================================================
   36. PRECISION 3D GOLD + ACLONICA LOGO (ZERO PIXELS / INFINITE DPI)
   ========================================================================== */

.meeways-pro-master-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}

.meeways-pro-master-logo:hover {
    transform: scale(1.035);
    filter: drop-shadow(0 0 24px rgba(255, 210, 63, 0.6));
}

.mw-pro-monolith {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

/* 1. 3D GOLD EMBLEM */
.mw-pro-360-badge {
    width: 82px;
    height: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.mw-pro-360-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 0 14px rgba(255, 210, 63, 0.45));
}

.mw-pro-orbit-front {
    stroke-dasharray: 60 18;
    animation: mwProOrbitFront 3.2s linear infinite;
}

.mw-pro-orbit-back {
    stroke-dasharray: 40 18;
    animation: mwProOrbitBack 3.8s linear infinite;
}

@keyframes mwProOrbitFront {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 160; }
}

@keyframes mwProOrbitBack {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -130; }
}

.mw-pro-numerals {
    animation: mwProFloating 4s ease-in-out infinite alternate;
}

@keyframes mwProFloating {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-1.5px); }
}

.mw-pro-arrowhead {
    transform-origin: 86px 27px;
    animation: mwProArrowPulse 2.5s ease-in-out infinite alternate;
}

@keyframes mwProArrowPulse {
    0% { transform: scale(0.95); filter: drop-shadow(0 0 4px #ffd23f); }
    100% { transform: scale(1.08); filter: drop-shadow(0 0 12px #ffffff); }
}

/* 2. MEEWAYS WORDMARK (ACLONICA FONT) */
.mw-pro-brand-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: fit-content;
}

.mw-pro-name-row {
    display: flex;
    align-items: baseline;
    line-height: 1;
}

.mw-pro-aclonica-text {
    font-family: 'Aclonica', cursive, sans-serif !important;
    font-size: 29px;
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0.02em;
    display: inline-block;
    line-height: 1;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.8), 0 0 25px rgba(255, 210, 63, 0.35);
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 60%, #ffd23f 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 0.3s ease;
}

.mw-pro-gold-dot {
    width: 8.5px;
    height: 8.5px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ffffff 0%, #ffd23f 40%, #f59e0b 80%, #d97706 100%);
    box-shadow: 0 0 10px #ffd23f, 0 0 22px rgba(255, 210, 63, 0.9);
    display: inline-block;
    margin-left: 3px;
    margin-bottom: 3px;
    align-self: flex-end;
    animation: mwProDotGlow 2.2s infinite ease-in-out;
}

@keyframes mwProDotGlow {
    0%, 100% { transform: scale(1); box-shadow: 0 0 8px #ffd23f, 0 0 18px rgba(255, 210, 63, 0.7); }
    50% { transform: scale(1.35); box-shadow: 0 0 16px #ffffff, 0 0 32px #ffd23f; }
}

/* 3. FLUSH SLENDER TAGLINE DIRECTLY UNDER MEEWAYS */
.mw-pro-tagline-wrap {
    font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
    font-size: 7.2px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1;
    margin-top: 2px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 4px;
}

.tag-pro-silver {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

.tag-pro-gold {
    color: #ffd23f;
    font-weight: 700;
    text-shadow: 0 0 8px rgba(255, 210, 63, 0.4);
}

/* MOBILE ADAPTATION */
@media (max-width: 768px) {
    .mw-pro-360-badge {
        width: 64px;
        height: 40px;
    }
    .mw-pro-aclonica-text {
        font-size: 22px;
    }
    .mw-pro-gold-dot {
        width: 6.5px;
        height: 6.5px;
    }
    .mw-pro-tagline-wrap {
        font-size: 6px;
        letter-spacing: 0.04em;
    }
}

/* ==========================================================================
   37. AUTHENTIC 3D STUDIO MASTER LOGO (meeways-360-first-master.png)
   ========================================================================== */

.meeways-studio-master-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}

.meeways-studio-master-logo:hover {
    transform: scale(1.04);
    filter: drop-shadow(0 0 20px rgba(255, 210, 63, 0.65));
}

.mw-studio-master-img {
    height: 52px;
    width: auto;
    max-width: 250px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 10px rgba(255, 210, 63, 0.3));
    animation: mwStudioLogoBreath 4s ease-in-out infinite alternate;
}

@keyframes mwStudioLogoBreath {
    0% { transform: translateY(0px) scale(1); filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 8px rgba(255, 210, 63, 0.25)); }
    100% { transform: translateY(-1.5px) scale(1.015); filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 16px rgba(255, 210, 63, 0.55)); }
}

@media (max-width: 768px) {
    .mw-studio-master-img {
        height: 38px;
        max-width: 190px;
    }
}

/* ==========================================================================
   38. LIVE KINETIC ANIMATIONS FOR 3D STUDIO MASTER LOGO
   ========================================================================== */

.meeways-live-animated-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}

.meeways-live-animated-logo:hover {
    transform: scale(1.04);
    filter: drop-shadow(0 0 24px rgba(255, 210, 63, 0.7));
}

.mw-live-logo-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    overflow: visible;
}

.mw-live-base-img {
    height: 52px;
    width: auto;
    max-width: 250px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 10px rgba(255, 210, 63, 0.35));
    animation: mwLiveLogoFloating 4s ease-in-out infinite alternate;
}

@keyframes mwLiveLogoFloating {
    0% { transform: translateY(0px) rotate(0deg); }
    100% { transform: translateY(-2px) rotate(0.6deg); }
}

/* 2. REVOLVING 3D ORBIT STREAM OVER 360 */
.mw-live-orbit-wrap {
    position: absolute;
    top: 2px;
    left: -2px;
    width: 90px;
    height: 52px;
    pointer-events: none;
    z-index: 3;
    overflow: visible;
}

.mw-live-orbit-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 0 8px rgba(255, 210, 63, 0.8));
}

.mw-live-orbit-ellipse {
    stroke-dasharray: 55 125;
    animation: mwLiveOrbitBeam 2.6s linear infinite;
    transform: rotate(-10deg);
    transform-origin: 48px 32px;
}

@keyframes mwLiveOrbitBeam {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 180; }
}

.meeways-live-animated-logo:hover .mw-live-orbit-ellipse {
    animation-duration: 1.2s;
}

/* 3. ACTIVE PULSING LENS FLARE ON GOLD DOT */
.mw-live-dot-flare {
    position: absolute;
    right: 20px;
    top: 22px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffffff 0%, #ffd23f 40%, rgba(255, 210, 63, 0) 75%);
    box-shadow: 0 0 12px #ffffff, 0 0 25px #ffd23f;
    animation: mwLiveDotFlare 2s ease-in-out infinite;
    pointer-events: none;
    z-index: 4;
}

@keyframes mwLiveDotFlare {
    0%, 100% { transform: scale(0.85); opacity: 0.6; box-shadow: 0 0 8px #ffd23f, 0 0 18px rgba(255, 210, 63, 0.5); }
    50% { transform: scale(1.45); opacity: 1; box-shadow: 0 0 16px #ffffff, 0 0 32px #ffd23f; }
}

/* 4. ACTIVE SHIMMER LIGHT BEAM PASSING OVER MEEWAYS */
.mw-live-shimmer-sweep {
    position: absolute;
    top: 4px;
    left: 88px;
    width: 140px;
    height: 38px;
    background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.5) 45%, rgba(255, 210, 63, 0.7) 52%, transparent 62%);
    background-size: 200% 100%;
    animation: mwLiveShimmerSweep 3.2s infinite ease-in-out;
    pointer-events: none;
    mix-blend-mode: overlay;
    z-index: 3;
}

@keyframes mwLiveShimmerSweep {
    0% { background-position: -200% 0; }
    50%, 100% { background-position: 200% 0; }
}

/* MOBILE ADAPTATION */
@media (max-width: 768px) {
    .mw-live-base-img {
        height: 38px;
        max-width: 185px;
    }
    .mw-live-orbit-wrap {
        width: 66px;
        height: 38px;
    }
    .mw-live-dot-flare {
        right: 14px;
        top: 15px;
        width: 7px;
        height: 7px;
    }
    .mw-live-shimmer-sweep {
        left: 64px;
        width: 105px;
        height: 28px;
    }
}

/* ==========================================================================
   39. EXACT MASTERPIECE LOGO (media_1788116857494.png) + ACTIVE KINETIC LIGHTING
   ========================================================================== */

.meeways-exact-masterpiece-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}

.meeways-exact-masterpiece-logo:hover {
    transform: scale(1.035);
    filter: drop-shadow(0 0 24px rgba(255, 210, 63, 0.75));
}

.mw-exact-logo-monolith {
    position: relative;
    display: inline-flex;
    align-items: center;
    overflow: visible;
}

.mw-exact-master-img {
    height: 56px;
    width: auto;
    max-width: 270px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 10px rgba(255, 210, 63, 0.4));
    animation: mwExactFloating 4s ease-in-out infinite alternate;
}

@keyframes mwExactFloating {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-1.5px); }
}

/* ACTIVE KINETIC ORBIT BEAM PULSE */
.mw-exact-orbit-beam {
    position: absolute;
    top: 35%;
    left: 7%;
    width: 60px;
    height: 25px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(255, 210, 63, 0.4) 0%, transparent 70%);
    animation: mwOrbitBeamPulse 2.8s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes mwOrbitBeamPulse {
    0% { transform: scale(0.85); opacity: 0.4; }
    100% { transform: scale(1.25); opacity: 0.85; filter: drop-shadow(0 0 12px #ffd23f); }
}

/* ACTIVE PULSING DOT FLARE */
.mw-exact-dot-flare {
    position: absolute;
    right: 1.5%;
    top: 48%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffffff 0%, #ffd23f 45%, rgba(255, 210, 63, 0) 75%);
    box-shadow: 0 0 10px #ffffff, 0 0 24px #ffd23f;
    animation: mwDotExactPulse 2s ease-in-out infinite;
    pointer-events: none;
    z-index: 4;
}

@keyframes mwDotExactPulse {
    0%, 100% { transform: scale(0.85); opacity: 0.6; }
    50% { transform: scale(1.4); opacity: 1; box-shadow: 0 0 16px #ffffff, 0 0 35px #ffd23f; }
}

/* ACTIVE SHIMMER LIGHT SHEEN OVER MEEWAYS */
.mw-exact-shimmer-sheen {
    position: absolute;
    top: 5%;
    left: 42%;
    width: 50%;
    height: 60%;
    background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.4) 48%, rgba(255, 210, 63, 0.6) 54%, transparent 65%);
    background-size: 200% 100%;
    animation: mwExactShimmerPass 3.5s infinite ease-in-out;
    pointer-events: none;
    mix-blend-mode: overlay;
    z-index: 3;
}

@keyframes mwExactShimmerPass {
    0% { background-position: -200% 0; }
    50%, 100% { background-position: 200% 0; }
}

/* MOBILE ADAPTATION */
@media (max-width: 768px) {
    .mw-exact-master-img {
        height: 42px;
        max-width: 205px;
    }
    .mw-exact-dot-flare {
        width: 7px;
        height: 7px;
    }
}

/* ==========================================================================
   40. MASTER ACLONICA BRAND LOGO (media_1788117130843.png SPEC)
   ========================================================================== */

.meeways-aclonica-master-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}

.meeways-aclonica-master-logo:hover {
    transform: scale(1.035);
    filter: drop-shadow(0 0 24px rgba(255, 210, 63, 0.7));
}

.mw-aclonica-brand-monolith {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* 1. TOP ROW: MEEWAYS IN ACLONICA */
.mw-aclonica-top-row {
    display: flex;
    align-items: baseline;
    line-height: 1;
    position: relative;
}

.mw-aclonica-brand-text {
    font-family: 'Aclonica', cursive, sans-serif !important;
    font-size: 38px;
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0.02em;
    display: inline-block;
    line-height: 1;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 45%, #e2e8f0 75%, #cbd5e1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 20px rgba(255, 210, 63, 0.35));
    transition: all 0.3s ease;
}

.mw-aclonica-gold-sphere {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ffffff 0%, #ffe17d 25%, #ffd23f 50%, #d97706 80%, #78350f 100%);
    box-shadow: 0 0 12px #ffd23f, 0 0 24px rgba(255, 210, 63, 0.95);
    display: inline-block;
    margin-left: 5px;
    margin-bottom: 4px;
    align-self: flex-end;
    animation: mwAclonicaDotPulse 2.2s infinite ease-in-out;
}

@keyframes mwAclonicaDotPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 10px #ffd23f, 0 0 20px rgba(255, 210, 63, 0.7); }
    50% { transform: scale(1.4); box-shadow: 0 0 18px #ffffff, 0 0 35px #ffd23f; }
}

/* 2. BOTTOM ROW: DUAL LASER FLARES + TAGLINE */
.mw-aclonica-tagline-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 3px;
    width: 100%;
}

.mw-laser-flare-beam {
    height: 1.5px;
    flex-grow: 1;
    min-width: 25px;
    position: relative;
    display: flex;
    align-items: center;
}

.mw-laser-flare-beam.left {
    background: linear-gradient(90deg, transparent 0%, rgba(255, 210, 63, 0.5) 40%, rgba(255, 210, 63, 0.9) 85%, #ffffff 100%);
    justify-content: flex-end;
}

.mw-laser-flare-beam.right {
    background: linear-gradient(90deg, #ffffff 0%, rgba(255, 210, 63, 0.9) 15%, rgba(255, 210, 63, 0.5) 60%, transparent 100%);
    justify-content: flex-start;
}

.mw-flare-spark {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 8px #ffffff, 0 0 16px #ffd23f;
    position: absolute;
    animation: mwSparkFlicker 2s infinite alternate ease-in-out;
}

.mw-laser-flare-beam.left .mw-flare-spark {
    right: 2px;
}

.mw-laser-flare-beam.right .mw-flare-spark {
    left: 2px;
}

@keyframes mwSparkFlicker {
    0% { transform: scale(0.8); opacity: 0.6; }
    100% { transform: scale(1.3); opacity: 1; }
}

.mw-laser-tagline-text {
    font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    white-space: nowrap;
    line-height: 1;
    display: flex;
    align-items: center;
    gap: 4px;
}

.tag-brand-silver {
    color: #ffffff;
    font-weight: 600;
}

.tag-brand-gold {
    color: #ffd23f;
    font-weight: 600;
    text-shadow: 0 0 10px rgba(255, 210, 63, 0.6);
}

/* MOBILE ADAPTATION */
@media (max-width: 768px) {
    .mw-aclonica-brand-text {
        font-size: 26px;
    }
    .mw-aclonica-gold-sphere {
        width: 8px;
        height: 8px;
        margin-left: 3px;
        margin-bottom: 3px;
    }
    .mw-laser-tagline-text {
        font-size: 7.5px;
    }
    .mw-laser-flare-beam {
        min-width: 14px;
    }
}

/* ==========================================================================
   41. EXECUTIVE 3D LUXURY ACLONICA LOGO (media_1788117130843.png PERFECTION)
   ========================================================================== */

.meeways-luxury-monolith-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s ease;
}

.meeways-luxury-monolith-logo:hover {
    transform: scale(1.04) translateY(-1px);
    filter: drop-shadow(0 0 28px rgba(255, 210, 63, 0.75));
}

.mw-luxury-aclonica-monolith {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* 1. 3D CHISELED ACLONICA TEXT */
.mw-luxury-top-brand {
    display: flex;
    align-items: baseline;
    line-height: 1;
    position: relative;
}

.mw-3d-aclonica-text {
    font-family: 'Aclonica', cursive, sans-serif !important;
    font-size: 40px;
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0.025em;
    display: inline-block;
    line-height: 1;
    position: relative;
    
    /* 3D Chiseled Metallic Silver/Platinum Gradient */
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 40%, #e2e8f0 70%, #94a3b8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* Multi-layered Cinema Drop Shadow */
    filter: drop-shadow(0 2px 0px rgba(255, 255, 255, 0.6))
            drop-shadow(0 5px 12px rgba(0, 0, 0, 0.95))
            drop-shadow(0 0 20px rgba(255, 210, 63, 0.35));
    transition: all 0.35s ease;
}

/* 2. 3D PHOTOREALISTIC GOLDEN PEARL / ORB */
.mw-3d-gold-orb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    position: relative;
    display: inline-block;
    margin-left: 6px;
    margin-bottom: 5px;
    align-self: flex-end;
    flex-shrink: 0;
    
    /* 3D Volumetric Amber Gold Sphere */
    background: radial-gradient(circle at 32% 30%, #ffffff 0%, #fff0a8 18%, #ffd23f 45%, #d97706 75%, #78350f 100%);
    box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.6),
                0 0 12px #ffd23f,
                0 0 25px rgba(255, 210, 63, 0.9);
    animation: mwGoldOrbBreathing 2.4s infinite ease-in-out;
}

.mw-orb-specular {
    position: absolute;
    top: 2px;
    left: 3px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 4px #ffffff;
}

.mw-orb-corona {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 210, 63, 0.4) 0%, transparent 70%);
    pointer-events: none;
    animation: mwCoronaPulse 2.4s infinite ease-in-out;
}

@keyframes mwGoldOrbBreathing {
    0%, 100% { transform: scale(1); box-shadow: 0 0 10px #ffd23f, 0 0 20px rgba(255, 210, 63, 0.7); }
    50% { transform: scale(1.3); box-shadow: 0 0 16px #ffffff, 0 0 35px #ffd23f; }
}

@keyframes mwCoronaPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) scale(1.4); opacity: 1; }
}

/* 3. ANAMORPHIC LASER FLARES + EXECUTIVE TAGLINE */
.mw-luxury-laser-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 3px;
    width: 100%;
}

.mw-laser-line-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    flex-grow: 1;
    min-width: 28px;
}

.mw-laser-line-wrapper.left {
    justify-content: flex-end;
}

.mw-laser-line-wrapper.right {
    justify-content: flex-start;
}

.mw-laser-core-line {
    height: 1.5px;
    width: 100%;
    border-radius: 1px;
}

.mw-laser-line-wrapper.left .mw-laser-core-line {
    background: linear-gradient(90deg, transparent 0%, rgba(255, 210, 63, 0.4) 40%, #ffd23f 80%, #ffffff 100%);
    box-shadow: 0 0 8px rgba(255, 210, 63, 0.6);
}

.mw-laser-line-wrapper.right .mw-laser-core-line {
    background: linear-gradient(90deg, #ffffff 0%, #ffd23f 20%, rgba(255, 210, 63, 0.4) 60%, transparent 100%);
    box-shadow: 0 0 8px rgba(255, 210, 63, 0.6);
}

/* Anamorphic Lens Flare Sparks */
.mw-anamorphic-flare {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 8px #ffffff,
                0 0 18px #ffd23f,
                0 0 30px #ffd23f;
    animation: mwAnamorphicSpark 2.2s infinite alternate ease-in-out;
}

.mw-anamorphic-flare.left {
    right: 0px;
}

.mw-anamorphic-flare.right {
    left: 0px;
}

@keyframes mwAnamorphicSpark {
    0% { transform: scale(0.75); opacity: 0.7; box-shadow: 0 0 6px #ffffff, 0 0 12px #ffd23f; }
    100% { transform: scale(1.35); opacity: 1; box-shadow: 0 0 12px #ffffff, 0 0 24px #ffd23f, 0 0 35px #ffffff; }
}

.mw-luxury-tagline-content {
    font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.05em;
    white-space: nowrap;
    line-height: 1;
    display: flex;
    align-items: center;
    gap: 5px;
}

.tag-luxury-white {
    color: #ffffff;
    font-weight: 600;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.tag-luxury-gold {
    color: #ffd23f;
    font-weight: 600;
    text-shadow: 0 0 10px rgba(255, 210, 63, 0.75), 0 2px 8px rgba(0, 0, 0, 0.8);
}

/* MOBILE ADAPTATION */
@media (max-width: 768px) {
    .mw-3d-aclonica-text {
        font-size: 28px;
    }
    .mw-3d-gold-orb {
        width: 9px;
        height: 9px;
        margin-left: 4px;
        margin-bottom: 3px;
    }
    .mw-luxury-tagline-content {
        font-size: 8px;
    }
    .mw-laser-line-wrapper {
        min-width: 16px;
    }
}


/* ==========================================================================
   42. CLEAN ACLONICA LOGO (WHITE SPARKS REMOVED, PURE GOLD LASER LINES)
   ========================================================================== */

.meeways-clean-aclonica-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s ease;
}

.meeways-clean-aclonica-logo:hover {
    transform: scale(1.04) translateY(-1px);
    filter: drop-shadow(0 0 24px rgba(255, 210, 63, 0.7));
}

.mw-clean-brand-monolith {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* 1. MEEWAYS IN ACLONICA FONT */
.mw-clean-top-brand {
    display: flex;
    align-items: baseline;
    line-height: 1;
    position: relative;
}

.mw-aclonica-wordmark {
    font-family: 'Aclonica', cursive, sans-serif !important;
    font-size: 34px;
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0.025em;
    display: inline-block;
    line-height: 1;
    background: linear-gradient(135deg, #ffd23f 0%, #ffffff 25%, #ffd23f 50%, #ffffff 75%, #ffd23f 100%);
    background-size: 250% 250%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: mwGoldWhiteFlow 4s ease-in-out infinite alternate;
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 16px rgba(255, 210, 63, 0.4));
    transition: all 0.35s ease;
}

@keyframes mwGoldWhiteFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 2. 3D GOLD SPHERE DOT */
.mw-gold-sphere-dot {
    width: 9.5px;
    height: 9.5px;
    border-radius: 50%;
    position: relative;
    display: inline-block;
    margin-left: 4px;
    margin-bottom: 4px;
    align-self: flex-end;
    flex-shrink: 0;
    background: radial-gradient(circle at 32% 30%, #ffffff 0%, #fff0a8 18%, #ffd23f 45%, #d97706 75%, #78350f 100%);
    box-shadow: 0 0 10px #ffd23f, 0 0 20px rgba(255, 210, 63, 0.85);
    animation: mwGoldSpherePulse 2.4s infinite ease-in-out;
}

@keyframes mwGoldSpherePulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 8px #ffd23f, 0 0 18px rgba(255, 210, 63, 0.7); }
    50% { transform: scale(1.25); box-shadow: 0 0 14px #ffffff, 0 0 28px #ffd23f; }
}

/* 3. CLEAN SMOOTH GOLD LASER LINES (NO WHITE SPARKS) */
.mw-clean-tagline-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 2px;
    width: 100%;
}

.mw-clean-laser-line {
    height: 1.2px;
    flex-grow: 1;
    min-width: 20px;
    border-radius: 1px;
}

.mw-clean-laser-line.left {
    background: linear-gradient(90deg, transparent 0%, rgba(255, 210, 63, 0.4) 40%, #ffd23f 100%);
    box-shadow: 0 0 6px rgba(255, 210, 63, 0.5);
}

.mw-clean-laser-line.right {
    background: linear-gradient(90deg, #ffd23f 0%, rgba(255, 210, 63, 0.4) 60%, transparent 100%);
    box-shadow: 0 0 6px rgba(255, 210, 63, 0.5);
}

.mw-clean-tagline-text {
    font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    white-space: nowrap;
    line-height: 1;
    display: flex;
    align-items: center;
    gap: 3px;
}

.tag-brand-white {
    color: #ffffff;
    font-weight: 600;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.tag-brand-gold {
    color: #ffd23f;
    font-weight: 600;
    text-shadow: 0 0 10px rgba(255, 210, 63, 0.6), 0 2px 8px rgba(0, 0, 0, 0.8);
}

/* MOBILE ADAPTATION */
@media (max-width: 768px) {
    .mw-aclonica-wordmark {
        font-size: 24px;
    }
    .mw-gold-sphere-dot {
        width: 7.5px;
        height: 7.5px;
        margin-left: 3px;
        margin-bottom: 3px;
    }
    .mw-clean-tagline-text {
        font-size: 7px;
    }
    .mw-clean-laser-line {
        min-width: 12px;
    }
}

/* ==========================================================================
   43. ANIMATED 3D GOLD HEXAGON PLAY EMBLEM + ACLONICA LOGO
   ========================================================================== */

.meeways-emblem-aclonica-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    padding: 3px 6px;
    border-radius: 8px;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s ease;
}

.meeways-emblem-aclonica-logo:hover {
    transform: scale(1.035) translateY(-1px);
    filter: drop-shadow(0 0 24px rgba(255, 210, 63, 0.75));
}

.mw-emblem-brand-monolith {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

/* 1. STARTING 3D ANIMATED EMBLEM */
.mw-lead-animated-emblem {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.mw-emblem-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.mw-halo-ring {
    transform-origin: 22px 22px;
    animation: mwLeadHaloSpin 10s linear infinite;
}

@keyframes mwLeadHaloSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.meeways-emblem-aclonica-logo:hover .mw-halo-ring {
    animation-duration: 3s;
}

.mw-play-spark {
    transform-origin: 22px 22px;
    animation: mwPlaySparkPulse 2.4s ease-in-out infinite alternate;
}

@keyframes mwPlaySparkPulse {
    0% { transform: scale(0.92); opacity: 0.85; filter: drop-shadow(0 0 2px #ffd23f); }
    100% { transform: scale(1.14); opacity: 1; filter: drop-shadow(0 0 8px #ffffff); }
}

/* 2. TEXT STACK */
.mw-emblem-text-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
}

/* MOBILE ADAPTATION */
@media (max-width: 768px) {
    .mw-lead-animated-emblem {
        width: 28px;
        height: 28px;
    }
    .mw-emblem-brand-monolith {
        gap: 7px;
    }
}

/* ==========================================================================
   44. BEST OF THE BEST 3D KINETIC HYPER-PRISM 'M' EMBLEM + ACLONICA LOGO
   ========================================================================== */

.meeways-best-master-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    padding: 3px 6px;
    border-radius: 8px;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s ease;
}

.meeways-best-master-logo:hover {
    transform: scale(1.04) translateY(-1px);
    filter: drop-shadow(0 0 26px rgba(255, 210, 63, 0.8));
}

.mw-best-brand-monolith {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}

/* 1. 3D HYPER-PRISM 'M' EMBLEM */
.mw-best-emblem-box {
    width: 58px;
    height: 58px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.mw-best-emblem-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.mw-gyro-ring {
    transform-origin: 26px 26px;
    transform: rotate(-18deg);
}

.mw-gyro-ring.front {
    stroke-dasharray: 45 100;
    animation: mwGyroSpinFront 3.2s linear infinite;
}

.mw-gyro-ring.back {
    stroke-dasharray: 30 100;
    animation: mwGyroSpinBack 3.8s linear infinite;
}

@keyframes mwGyroSpinFront {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 145; }
}

@keyframes mwGyroSpinBack {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -130; }
}

.meeways-best-master-logo:hover .mw-gyro-ring.front {
    animation-duration: 1.4s;
}

.mw-prism-core-group {
    animation: mwPrismElevation 4s ease-in-out infinite alternate;
}

@keyframes mwPrismElevation {
    0% { transform: translateY(0px) rotate(0deg); }
    100% { transform: translateY(-2px) rotate(1deg); }
}

/* 2. TEXT STACK WITH STRICT FLUSH ALIGNMENT */
.mw-best-text-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: fit-content;
    position: relative;
}

.mw-best-text-stack .mw-clean-top-brand {
    display: flex;
    align-items: baseline;
    line-height: 1;
    width: 100%;
}

.mw-best-text-stack .mw-clean-tagline-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 4px;
    margin-top: 2px;
    box-sizing: border-box;
}

.mw-best-text-stack .mw-clean-tagline-text {
    font-size: 7.8px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    flex-shrink: 0;
}

.mw-best-text-stack .mw-clean-laser-line {
    height: 1px;
    flex-grow: 1;
    min-width: 6px;
    max-width: 20px;
}

/* MOBILE ADAPTATION */
@media (max-width: 768px) {
    .mw-best-emblem-box {
        width: 44px;
        height: 44px;
    }
    .mw-best-brand-monolith {
        gap: 8px;
    }
    .mw-best-text-stack .mw-clean-tagline-text {
        font-size: 6.8px;
    }
}

/* ==========================================================================
   45. PURE STANDALONE ACLONICA LOGO (ICON COMPLETELY REMOVED)
   ========================================================================== */

.meeways-standalone-aclonica-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    padding: 3px 6px;
    border-radius: 8px;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s ease;
}

.meeways-standalone-aclonica-logo:hover {
    transform: scale(1.04) translateY(-1px);
    filter: drop-shadow(0 0 24px rgba(255, 210, 63, 0.75));
}

.mw-standalone-brand-monolith {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* ==========================================================================
   46. PRELOADER & UNIVERSAL LOGO LOCK FOR STANDALONE ACLONICA LOGO
   ========================================================================== */

.preloader-aclonica-monolith {
    transform: scale(1.25);
    filter: drop-shadow(0 0 35px rgba(255, 210, 63, 0.85));
    animation: preloaderAclonicaGlow 2.5s infinite alternate ease-in-out;
}

.preloader-aclonica-wordmark {
    font-size: 42px !important;
}

.preloader-gold-sphere {
    width: 12px !important;
    height: 12px !important;
}

@keyframes preloaderAclonicaGlow {
    0% { transform: scale(1.2); filter: drop-shadow(0 0 20px rgba(255, 210, 63, 0.5)); }
    100% { transform: scale(1.28); filter: drop-shadow(0 0 45px rgba(255, 210, 63, 1)); }
}

.f-watermark-text {
    font-family: 'Aclonica', cursive, sans-serif !important;
    letter-spacing: 0.08em;
}

/* ==========================================================================
   47. OPTION 1 HIGH-CONVERTING STUDIO NAVIGATION MENU
   ========================================================================== */

.nav-item-instant-order {
    margin-left: 4px;
}

.nav-item-instant-order .nav-btn-order-instant {
    color: #ffd23f !important;
    font-weight: 700 !important;
    background: rgba(255, 210, 63, 0.09);
    border: 1px solid rgba(255, 210, 63, 0.35);
    border-radius: 100px;
    padding: 6px 14px !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 0 12px rgba(255, 210, 63, 0.15);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-item-instant-order .nav-btn-order-instant:hover {
    background: rgba(255, 210, 63, 0.2);
    border-color: #ffd23f;
    box-shadow: 0 0 20px rgba(255, 210, 63, 0.45);
    transform: translateY(-1px);
}

.order-bolt {
    color: #ffd23f;
    display: inline-block;
    animation: boltPulseGlow 2s infinite ease-in-out;
}

@keyframes boltPulseGlow {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px #ffd23f); }
    50% { transform: scale(1.3); filter: drop-shadow(0 0 8px #ffffff); }
}

.drawer-instant-order-card {
    background: rgba(255, 210, 63, 0.08) !important;
    border: 1px solid rgba(255, 210, 63, 0.3) !important;
    border-radius: 12px !important;
    margin-top: 6px !important;
}

/* ==========================================================================
   48. WORK MEGA DROPDOWN & HEADER SOCIALS / STRATEGY CTA STYLING
   ========================================================================== */

.work-dropdown-luxury {
    min-width: 290px !important;
}

.work-dropdown-luxury .drop-divider {
    height: 1px;
    background: rgba(255, 210, 63, 0.15);
    margin: 4px 8px;
}

.work-dropdown-luxury .drop-view-all {
    background: rgba(255, 210, 63, 0.08);
    border-radius: 8px;
    border: 1px dashed rgba(255, 210, 63, 0.35);
}

.work-dropdown-luxury .drop-view-all:hover {
    background: rgba(255, 210, 63, 0.16);
    border-color: #ffd23f;
}

.btn-header-cta {
    background: linear-gradient(135deg, #ffd23f 0%, #ffb703 60%, #f59e0b 100%) !important;
    color: #08080a !important;
    font-weight: 800 !important;
    padding: 9px 18px !important;
    border-radius: 100px !important;
    box-shadow: 0 4px 18px rgba(255, 210, 63, 0.35) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-header-cta:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 6px 24px rgba(255, 210, 63, 0.55) !important;
}

/* ==========================================================================
   49. STREAMLINED MASTER NAV WITH VIDEO & ADS, WEB, WORK DROPDOWN & SOCIALS
   ========================================================================== */

.desktop-nav .nav-list {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.desktop-nav .nav-link {
    font-size: 13.5px;
    font-weight: 600;
    color: #cbd5e1;
    padding: 6px 8px;
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.25s ease, transform 0.25s ease;
}

.desktop-nav .nav-link:hover {
    color: #ffffff;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.header-socials {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ==========================================================================
   50. CLICK-TO-OPEN DROPDOWN ACTIVE STATE
   ========================================================================== */
.nav-item.has-dropdown.is-dropdown-active .dropdown-panel {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate3d(0, 0, 0) !important;
    pointer-events: auto !important;
}

.nav-item.has-dropdown.is-dropdown-active .nav-arrow {
    transform: rotate(180deg) scale(1.2) !important;
    color: #ffffff !important;
    filter: drop-shadow(0 0 8px #ffffff) !important;
}

/* ==========================================================================
   51. NON-CLICKABLE NAV DROPDOWN TRIGGER BUTTONS
   ========================================================================== */
button.nav-dropdown-trigger {
    background: transparent !important;
    border: none !important;
    font-family: inherit !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #cbd5e1 !important;
    padding: 6px 8px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
    outline: none !important;
    line-height: inherit !important;
}

button.nav-dropdown-trigger:hover,
.nav-item.has-dropdown:hover button.nav-dropdown-trigger,
.nav-item.has-dropdown.is-dropdown-active button.nav-dropdown-trigger {
    color: #ffffff !important;
}

/* ==========================================================================
   52. ORDER PROJECT INSTANT LUXURY DROPDOWN
   ========================================================================== */
.order-dropdown-luxury {
    min-width: 320px !important;
    right: 0 !important;
    left: auto !important;
    border-color: rgba(255, 210, 63, 0.4) !important;
    box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.95), 0 0 35px rgba(255, 210, 63, 0.15) !important;
}

button.nav-btn-order-instant {
    cursor: pointer !important;
    background: linear-gradient(135deg, rgba(255, 210, 63, 0.14) 0%, rgba(255, 210, 63, 0.05) 100%) !important;
    border: 1px solid rgba(255, 210, 63, 0.45) !important;
    border-radius: 999px !important;
    padding: 7px 16px !important;
    color: #ffd23f !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: 0 0 16px rgba(255, 210, 63, 0.12) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

button.nav-btn-order-instant:hover,
.nav-item-instant-order.is-dropdown-active button.nav-btn-order-instant,
.nav-item-instant-order:hover button.nav-btn-order-instant {
    background: linear-gradient(135deg, rgba(255, 210, 63, 0.25) 0%, rgba(255, 210, 63, 0.1) 100%) !important;
    border-color: #ffd23f !important;
    box-shadow: 0 0 25px rgba(255, 210, 63, 0.35) !important;
    transform: translateY(-1px) !important;
}

/* ==========================================================================
   54. LUXURY CONTACT PAGE STYLES & MOBILE OPTIMIZATIONS
   ========================================================================== */
.contact-vip-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(255, 210, 63, 0.6) !important;
    box-shadow: 0 15px 40px -10px rgba(0, 0, 0, 0.9), 0 0 25px rgba(255, 210, 63, 0.15) !important;
}

.contact-form-monolith input:focus,
.contact-form-monolith select:focus,
.contact-form-monolith textarea:focus {
    border-color: #ffd23f !important;
    box-shadow: 0 0 20px rgba(255, 210, 63, 0.25) !important;
}

@media (max-width: 992px) {
    .contact-console-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
    .contact-hero-banner {
        text-align: left !important;
        margin-bottom: 36px !important;
    }
}

@media (max-width: 600px) {
    .contact-console-grid form > div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    .contact-scope-chips {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    .contact-scope-chips .scope-chip {
        padding: 8px 10px !important;
        font-size: 12px !important;
        justify-content: center !important;
    }
}


/* ==========================================================================
   GOKWIK-INSPIRED CLEAN MODERN LUXURY CHECKOUT ENGINE
   ========================================================================== */
.gokwik-checkout-hud {
    background: #0b0c12 !important;
    border: 1px solid rgba(255, 210, 63, 0.4) !important;
    border-radius: 24px !important;
    padding: 24px !important;
    box-shadow: 0 25px 80px -10px rgba(0, 0, 0, 0.9), 0 0 40px rgba(255, 210, 63, 0.12) !important;
    position: relative;
    overflow: hidden;
}

.gokwik-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.gokwik-badge-fast {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 210, 63, 0.12);
    border: 1px solid rgba(255, 210, 63, 0.35);
    color: #ffd23f;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.gokwik-pulse-green {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #25d366;
    box-shadow: 0 0 8px #25d366;
    animation: alertPulse 1.4s ease-in-out infinite;
}

/* Coupon Box */
.gokwik-coupon-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(255, 210, 63, 0.35);
    border-radius: 14px;
    padding: 12px 14px;
    margin: 14px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gokwik-coupon-input-row {
    display: flex;
    gap: 8px;
}

.gokwik-coupon-input {
    flex: 1;
    background: #141620;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 8px 12px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    outline: none;
}

.gokwik-coupon-input:focus {
    border-color: #ffd23f;
}

.gokwik-coupon-btn {
    background: rgba(255, 210, 63, 0.15);
    border: 1px solid #ffd23f;
    color: #ffd23f;
    font-size: 11.5px;
    font-weight: 800;
    padding: 0 14px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gokwik-coupon-btn:hover {
    background: #ffd23f;
    color: #000000;
}

.gokwik-coupon-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #94a3b8;
    cursor: pointer;
}

.gokwik-coupon-chip span.code-highlight {
    color: #ffd23f;
    font-weight: 800;
    text-decoration: underline;
}

/* Price Breakdown */
.gokwik-price-breakdown {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 13px;
}

.gokwik-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #94a3b8;
}

.gokwik-price-row.discount-row {
    color: #25d366;
    font-weight: 700;
}

.gokwik-price-row.total-row {
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
    padding-top: 4px;
}

/* GoKwik Payment Trust Logos */
.gokwik-trust-footer {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.gokwik-trust-text {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.6px;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
}

.gokwik-cards-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.gokwik-card-badge {
    background: #ffffff;
    border-radius: 6px;
    padding: 4px 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 10.5px;
    color: #0b0c12;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    height: 24px;
}

/* GoKwik Mobile Sticky Bottom Bar */
.gokwik-mobile-bottom-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(10, 10, 15, 0.98);
    border-top: 1.5px solid rgba(255, 210, 63, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 12px 18px;
    z-index: 998;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.9);
}

@media (max-width: 992px) {
    .gokwik-mobile-bottom-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
    }
}


/* ==========================================================================
   FUTURISTIC KINETIC HERO & ANIMATED TEXT ENGINE (AWWWARDS STANDARD)
   ========================================================================== */
.futuristic-radar-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 18px;
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.15) 0%, rgba(255, 210, 63, 0.12) 100%);
    border: 1px solid rgba(16, 185, 129, 0.45);
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    color: #e2e8f0;
    margin-bottom: 20px;
    backdrop-filter: blur(16px);
    box-shadow: 0 0 25px rgba(16, 185, 129, 0.25), inset 0 0 12px rgba(255, 210, 63, 0.1);
    position: relative;
    overflow: hidden;
}

.futuristic-radar-pill::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transform: skewX(-20deg);
    animation: radarSweep 3.5s infinite linear;
}

@keyframes radarSweep {
    0% { left: -100%; }
    50%, 100% { left: 200%; }
}

.cyber-highlight {
    color: #34d399;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-shadow: 0 0 10px rgba(52, 211, 153, 0.6);
}

.slots-live-count {
    color: #ffd23f;
    font-weight: 800;
    text-shadow: 0 0 10px rgba(255, 210, 63, 0.6);
}

/* Kinetic 3D Morphing Headline (Zero Layout Shift Engine) */
.futuristic-kinetic-title,
.v2-hero-title {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif) !important;
    font-size: clamp(1.75rem, 2.8vw, 2.5rem) !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em !important;
    color: #ffffff !important;
    margin-bottom: 16px !important;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.7) !important;
    min-height: 2.6em !important; /* Stable height lock */
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

.kinetic-typewriter-wrap {
    display: inline !important;
    font-weight: 900 !important;
    white-space: normal !important;
    border-bottom: none !important;
}

.type-white-part {
    color: #ffffff !important;
    font-weight: 900 !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.9) !important;
    display: inline !important;
    border-bottom: none !important;
}

.type-gold-part {
    color: #ffd23f !important;
    background: linear-gradient(135deg, #ffffff 0%, #ffd23f 45%, #ffb703 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 0 20px rgba(255, 210, 63, 0.75)) !important;
    font-weight: 900 !important;
    display: inline !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.kinetic-typewriter-cursor {
    color: #ffd23f !important;
    font-weight: 300 !important;
    display: inline-block !important;
    animation: cursorBlink 0.75s infinite ease-in-out !important;
    margin-left: 3px !important;
    vertical-align: baseline !important;
    filter: drop-shadow(0 0 10px rgba(255, 210, 63, 0.9)) !important;
    -webkit-text-fill-color: #ffd23f !important;
    border-bottom: none !important;
}

@keyframes cursorBlink {
    0%, 100% { opacity: 1; transform: scaleY(1); }
    50% { opacity: 0; transform: scaleY(0.8); }
}

@media (max-width: 768px) {
    .futuristic-kinetic-title,
    .v2-hero-title {
        text-align: center !important;
        font-size: clamp(1.35rem, 5.2vw, 1.7rem) !important;
        line-height: 1.28 !important;
        min-height: 2.8em !important;
        margin-bottom: 14px !important;
    }
}


/* ==========================================================================
   FULL CLIENT BRAND LOGO CARDS & PERFECT ALIGNMENT (210+ BRANDS)
   ========================================================================== */
.v2-trusted-brands {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 16px;
    margin-top: 10px;
}

.v2-trusted-lbl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11.5px;
    color: #94a3b8;
    font-weight: 700;
    margin-bottom: 12px;
    letter-spacing: 0.3px;
}

.v2-trusted-lbl strong {
    color: #ffd23f;
    font-weight: 800;
}

.auth-full-brands-track {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.auth-brand-logo-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    backdrop-filter: blur(12px);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
}

.auth-brand-logo-card:hover {
    background: rgba(255, 210, 63, 0.1);
    border-color: rgba(255, 210, 63, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 18px rgba(255, 210, 63, 0.2);
}

.auth-brand-logo-card img.client-brand-png {
    max-height: 26px;
    max-width: 100px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    filter: brightness(1);
    transition: transform 0.25s ease, filter 0.25s ease;
}

.auth-brand-logo-card:hover img.client-brand-png {
    transform: scale(1.05);
    filter: brightness(1.1);
}

.auth-brand-logo-card svg.client-brand-svg {
    max-height: 24px;
    max-width: 85px;
    height: 24px;
    width: auto;
}

@media (max-width: 600px) {
    .auth-full-brands-track {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    .auth-brand-logo-card {
        height: 38px;
        padding: 4px 8px;
    }
    .auth-brand-logo-card img.client-brand-png {
        max-height: 20px;
        max-width: 75px;
    }
}


/* ==========================================================================
   HORIZONTAL HARDWARE-ACCELERATED VIDEO CAROUSEL TRACK (HERO RIGHT)
   ========================================================================== */
.v2-hero-video-card {
    position: relative;
    background: #0d0e15;
    border: 1px solid rgba(255, 210, 63, 0.35);
    border-radius: 24px;
    padding: 16px;
    box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.9), 0 0 35px rgba(255, 210, 63, 0.12);
    overflow: hidden !important;
}

.v2-video-slider-viewport {
    position: relative;
    width: 100%;
    height: 380px;
    border-radius: 18px;
    overflow: hidden !important;
    background: #000000;
}

.v2-video-slider-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.v2-video-slide-item {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.v2-video-slide-item img.v2-video-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.v2-slider-nav-btn {
    position: absolute;
    top: 48%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(10, 10, 16, 0.85);
    border: 1.5px solid rgba(255, 210, 63, 0.5);
    color: #ffd23f;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    backdrop-filter: blur(12px);
    transition: all 0.22s ease;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.8);
}

.v2-slider-nav-btn:hover {
    background: #ffd23f;
    color: #08080a;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 6px 24px rgba(255, 210, 63, 0.6);
}

.v2-slider-nav-btn.prev {
    left: 12px;
}

.v2-slider-nav-btn.next {
    right: 12px;
}

@media (max-width: 768px) {
    .v2-video-slider-viewport {
        height: 260px;
    }
    .v2-slider-nav-btn {
        width: 34px;
        height: 34px;
    }
}


/* ==========================================================================
   GUIDED INTERACTIVE STEP-BY-STEP WORKFLOW ENGINE (APPLE / TYPEFORM STANDARD)
   ========================================================================== */
.v2-step-card {
    position: relative;
    background: #0b0c12;
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 24px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* 1. Active / Focused Step */
.v2-step-card.step--active {
    border-color: #ffd23f !important;
    background: linear-gradient(170deg, rgba(255, 210, 63, 0.07) 0%, #0b0c12 100%) !important;
    box-shadow: 0 0 40px rgba(255, 210, 63, 0.22), 0 20px 50px rgba(0, 0, 0, 0.8) !important;
    animation: stepBreathingGlow 2.5s infinite ease-in-out;
    opacity: 1 !important;
    filter: none !important;
    transform: translateY(-2px);
}

@keyframes stepBreathingGlow {
    0%, 100% {
        border-color: rgba(255, 210, 63, 0.6);
        box-shadow: 0 0 25px rgba(255, 210, 63, 0.18), 0 15px 40px rgba(0, 0, 0, 0.8);
    }
    50% {
        border-color: #ffd23f;
        box-shadow: 0 0 45px rgba(255, 210, 63, 0.38), 0 20px 50px rgba(0, 0, 0, 0.9);
    }
}

.v2-step-card.step--active .gold-badge-num {
    background: #ffd23f !important;
    color: #08080a !important;
    box-shadow: 0 0 20px #ffd23f !important;
    animation: badgePulse 1.5s infinite ease-in-out !important;
}

@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}

/* Step Guide Attention Banner */
.step-guide-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.4px;
    margin-bottom: 6px;
    background: rgba(255, 210, 63, 0.15);
    border: 1px solid rgba(255, 210, 63, 0.45);
    color: #ffd23f;
    animation: guidePillBounce 2s infinite ease-in-out;
}

@keyframes guidePillBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

/* 2. Completed Step */
.v2-step-card.step--completed {
    border-color: rgba(16, 185, 129, 0.45) !important;
    background: #0a0c10 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
    opacity: 1 !important;
    filter: none !important;
}

.v2-step-card.step--completed .gold-badge-num {
    background: #10b981 !important;
    color: #ffffff !important;
    border-color: #10b981 !important;
    box-shadow: 0 0 14px rgba(16, 185, 129, 0.45) !important;
}

/* 3. Waiting Step */
.v2-step-card.step--waiting {
    opacity: 0.65;
    filter: grayscale(0.25);
    cursor: pointer;
}

.v2-step-card.step--waiting:hover {
    opacity: 0.9;
    filter: none;
    border-color: rgba(255, 255, 255, 0.2);
}


/* ==========================================================================
   MORPHING SINGLE-STAGE STEPPER ENGINE (TYPEFORM / APPLE STANDARD)
   ========================================================================== */

/* 1. Breadcrumb Stage Tracker */
.v2-wizard-breadcrumb-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
    overflow-x: auto;
    padding: 4px 2px 8px;
    scrollbar-width: none;
}

.v2-wizard-breadcrumb-bar::-webkit-scrollbar {
    display: none;
}

.wizard-crumb-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 800;
    color: #64748b;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    user-select: none;
}

.wizard-crumb-chip.is-active {
    background: rgba(255, 210, 63, 0.14) !important;
    border-color: #ffd23f !important;
    color: #ffd23f !important;
    box-shadow: 0 0 16px rgba(255, 210, 63, 0.25) !important;
}

.wizard-crumb-chip.is-completed {
    background: rgba(16, 185, 129, 0.12) !important;
    border-color: rgba(16, 185, 129, 0.5) !important;
    color: #34d399 !important;
}

.wizard-crumb-chip.is-locked {
    opacity: 0.45;
    cursor: not-allowed;
}

.wizard-crumb-chip:hover:not(.is-locked) {
    transform: translateY(-1px);
    border-color: rgba(255, 210, 63, 0.5);
}

.wizard-crumb-sep {
    color: rgba(255, 255, 255, 0.2);
    font-size: 11px;
}

/* 2. Step Stage Morphing */
.v2-step-card {
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Collapsed Completed Step Card View (Sleek Compact Summary with Edit Button) */


.v2-step-card.step--collapsed .v2-step-head {
    margin-bottom: 0 !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.v2-step-card.step--collapsed .v2-step-headings {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.v2-step-card.step--collapsed .v2-step-h {
    font-size: 13.5px !important;
    color: #e2e8f0 !important;
    margin: 0 !important;
}

.v2-step-card.step--collapsed .v2-step-p {
    display: none !important;
}

.v2-step-card.step--collapsed .gold-badge-num {
    background: #10b981 !important;
    color: #ffffff !important;
    border-color: #10b981 !important;
    font-size: 11px !important;
    width: 26px !important;
    height: 26px !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.4) !important;
}

.step-collapsed-pill {
    display: none;
}

.v2-step-card.step--collapsed .step-collapsed-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    background: rgba(255, 210, 63, 0.12);
    border: 1px solid rgba(255, 210, 63, 0.45);
    border-radius: 999px;
    color: #ffd23f;
    font-size: 11px;
    font-weight: 800;
}

.step-edit-btn {
    display: none;
}

.v2-step-card.step--collapsed .step-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 800;
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.06);
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: all 0.2s ease;
}

.v2-step-card.step--collapsed:hover .step-edit-btn {
    color: #ffd23f;
    border-color: #ffd23f;
    background: rgba(255, 210, 63, 0.12);
}

.v2-step-card.step--collapsed .v2-promoting-grid,
.v2-step-card.step--collapsed .v2-style-cards-grid,
.v2-step-card.step--collapsed .v2-durations-grid,
.v2-step-card.step--collapsed .v2-duration-tip-box,
.v2-step-card.step--collapsed .v2-form-fields-grid,
.v2-step-card.step--collapsed .v2-reassurance-card {
    display: none !important;
}

/* Hidden / Locked Future Step */


/* Active Step Stage Animation */
.v2-step-card.step--active {
    display: block !important;
    animation: stepSlideInUp 0.38s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes stepSlideInUp {
    0% {
        opacity: 0;
        transform: translate3d(0, 20px, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Step Shake Warning */
.step-shake {
    animation: stepShakeWarning 0.45s ease-in-out !important;
}

@keyframes stepShakeWarning {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-8px); }
    40%, 80% { transform: translateX(8px); }
}

/* Toast Warning Banner */
.step-warning-toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(120px);
    background: #171512;
    border: 1.5px solid #ffd23f;
    border-radius: 999px;
    padding: 11px 24px;
    color: #ffd23f;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.95), 0 0 30px rgba(255, 210, 63, 0.4);
    z-index: 100000;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.step-warning-toast.is-visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}


/* ==========================================================================
   INTERACTIVE ASSET READINESS CHOICES (LOGO & SCRIPT READY / NEEDS ASSISTANCE)
   ========================================================================== */
.v2-reassure-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.v2-help-pill-choice {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 15px;
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px solid rgba(255, 210, 63, 0.28);
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    color: #e2e8f0;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
}

.v2-help-pill-choice:hover {
    background: rgba(255, 210, 63, 0.12);
    border-color: #ffd23f;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(255, 210, 63, 0.22);
}

.v2-help-pill-choice.selected {
    background: rgba(255, 210, 63, 0.2) !important;
    border-color: #ffd23f !important;
    color: #ffffff !important;
    box-shadow: 0 0 18px rgba(255, 210, 63, 0.35) !important;
}

.v2-help-pill-choice.selected .choice-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ffd23f;
    color: #08080a;
    font-size: 9.5px;
    font-weight: 900;
    margin-left: 2px;
}

.v2-help-pill-choice .choice-check {
    display: none;
}


/* Step 4 Producer Note & Avatar */
.v2-reassure-inner-box {
    margin-top: 14px;
}

.v2-reassure-producer-note {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    padding: 12px 16px;
    background: rgba(255, 210, 63, 0.06);
    border: 1px dashed rgba(255, 210, 63, 0.3);
    border-radius: 12px;
    font-size: 12px;
    color: #cbd5e1;
}

.producer-halo-avatar-sm {
    position: relative;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.gold-avatar-ring-sm {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid #ffd23f;
    box-shadow: 0 0 10px rgba(255, 210, 63, 0.5);
}

.avatar-live-beacon-sm {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #00e676;
    border: 1.5px solid #08080a;
    box-shadow: 0 0 6px #00e676;
}


/* ==========================================================================
   CHECKOUT SECTION SPOTLIGHT & STEP 5 PROCEED CTA
   ========================================================================== */
.btn-proceed-to-checkout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 22px;
    padding: 16px 28px;
    border-radius: 14px;
    background: linear-gradient(135deg, #ffd23f 0%, #f59e0b 100%);
    border: none;
    color: #08080a;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.3px;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(255, 210, 63, 0.4), 0 0 20px rgba(255, 210, 63, 0.2);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-proceed-to-checkout:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 14px 40px rgba(255, 210, 63, 0.6), 0 0 30px rgba(255, 210, 63, 0.4);
    background: #ffd23f;
}

.v2-summary-card.checkout-spotlight-active {
    border-color: #ffd23f !important;
    box-shadow: 0 0 50px rgba(255, 210, 63, 0.5), 0 20px 60px rgba(0, 0, 0, 0.95) !important;
    animation: checkoutSpotlightPulse 2s infinite ease-in-out;
}

@keyframes checkoutSpotlightPulse {
    0%, 100% {
        box-shadow: 0 0 35px rgba(255, 210, 63, 0.35), 0 20px 50px rgba(0, 0, 0, 0.9);
        border-color: rgba(255, 210, 63, 0.6);
    }
    50% {
        box-shadow: 0 0 65px rgba(255, 210, 63, 0.7), 0 25px 70px rgba(0, 0, 0, 0.95);
        border-color: #ffd23f;
    }
}


.v2-token-val {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: 1.55rem !important;
    font-weight: 900 !important;
    color: #34d399 !important;
    white-space: nowrap !important;
    line-height: 1.1 !important;
}

.v2-advance-token-box {
    background: rgba(16, 185, 129, 0.08);
    border: 1.5px solid rgba(16, 185, 129, 0.35);
    border-radius: 16px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}


/* ==========================================================================
   PROGRESSIVE VISIBLE 5-STEP GUIDED WORKFLOW (ALL STEPS FULLY VISIBLE)
   ========================================================================== */
.v2-step-card {
    display: block !important;
    position: relative;
    background: #0c0d14;
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 24px;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    opacity: 1;
}

/* 1. Active Focused Step */
.v2-step-card.step--active {
    border-color: #ffd23f !important;
    background: linear-gradient(170deg, rgba(255, 210, 63, 0.06) 0%, #0c0d14 100%) !important;
    box-shadow: 0 0 35px rgba(255, 210, 63, 0.25), 0 15px 40px rgba(0, 0, 0, 0.85) !important;
    animation: activeStepBreathing 2.4s infinite ease-in-out;
    opacity: 1 !important;
    transform: translateY(-2px);
}

@keyframes activeStepBreathing {
    0%, 100% {
        border-color: rgba(255, 210, 63, 0.6);
        box-shadow: 0 0 20px rgba(255, 210, 63, 0.2), 0 12px 35px rgba(0, 0, 0, 0.85);
    }
    50% {
        border-color: #ffd23f;
        box-shadow: 0 0 45px rgba(255, 210, 63, 0.4), 0 18px 45px rgba(0, 0, 0, 0.95);
    }
}

.v2-step-card.step--active .gold-badge-num {
    background: #ffd23f !important;
    color: #08080a !important;
    border-color: #ffd23f !important;
    box-shadow: 0 0 18px #ffd23f !important;
    animation: activeBadgePulse 1.6s infinite ease-in-out !important;
}

@keyframes activeBadgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}

/* 2. Completed Step */
.v2-step-card.step--completed {
    border-color: rgba(16, 185, 129, 0.45) !important;
    background: #0a0b10 !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5) !important;
    opacity: 1 !important;
}

.v2-step-card.step--completed .gold-badge-num {
    background: #10b981 !important;
    color: #ffffff !important;
    border-color: #10b981 !important;
    box-shadow: 0 0 14px rgba(16, 185, 129, 0.4) !important;
}

/* 3. Waiting Step */
.v2-step-card.step--waiting {
    opacity: 0.75;
    border-color: rgba(255, 255, 255, 0.08);
    background: #090a0e;
    cursor: pointer;
}

.v2-step-card.step--waiting:hover {
    opacity: 0.95;
    border-color: rgba(255, 210, 63, 0.3);
}

.v2-step-card.step--locked {
    display: block !important;
    opacity: 0.75;
    background: #090a0e;
}


/* ==========================================================================
   ULTRA-LUXURY STUDIO CARDS & DURATION PILLS (APPLE PRO / LINEAR DESIGN)
   ========================================================================== */

/* --- STEP 1: CATEGORY CARDS --- */
.v2-promoting-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

.v2-prom-inner {
    background: rgba(14, 15, 22, 0.9) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 18px 10px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
    height: 100%;
    position: relative;
}

.v2-prom-card:hover .v2-prom-inner {
    border-color: rgba(255, 210, 63, 0.5) !important;
    transform: translateY(-3px) !important;
    background: rgba(20, 21, 30, 0.95) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 210, 63, 0.15) !important;
}

.v2-prom-card.selected .v2-prom-inner {
    background: linear-gradient(170deg, rgba(255, 210, 63, 0.14) 0%, rgba(14, 15, 22, 0.98) 100%) !important;
    border-color: #ffd23f !important;
    box-shadow: 0 0 25px rgba(255, 210, 63, 0.3), 0 12px 30px rgba(0, 0, 0, 0.8) !important;
    transform: translateY(-2px) !important;
}

.v2-prom-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 210, 63, 0.12);
    border: 1px solid rgba(255, 210, 63, 0.3);
    color: #ffd23f;
    margin-bottom: 4px;
    transition: all 0.25s ease;
}

.v2-prom-card:hover .v2-prom-icon,
.v2-prom-card.selected .v2-prom-icon {
    background: #ffd23f;
    color: #08080a;
    box-shadow: 0 0 16px rgba(255, 210, 63, 0.6);
}

.v2-prom-title {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: 13.5px;
    font-weight: 800;
    color: #ffffff;
}

.v2-prom-sub {
    font-size: 10.5px;
    color: #94a3b8;
}

/* --- STEP 2: VISUAL STYLE CARDS --- */
.v2-style-cards-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}

.v2-style-card {
    position: relative;
    cursor: pointer;
}

.v2-style-inner {
    background: rgba(14, 15, 22, 0.9) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 18px !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
    height: 100%;
    position: relative;
}

.v2-style-card:hover .v2-style-inner {
    border-color: rgba(255, 210, 63, 0.5) !important;
    transform: translateY(-4px) !important;
    background: rgba(20, 21, 30, 0.95) !important;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.7), 0 0 25px rgba(255, 210, 63, 0.2) !important;
}

.v2-style-card.selected .v2-style-inner {
    background: linear-gradient(175deg, rgba(255, 210, 63, 0.12) 0%, rgba(14, 15, 22, 0.98) 100%) !important;
    border-color: #ffd23f !important;
    box-shadow: 0 0 30px rgba(255, 210, 63, 0.35), 0 16px 40px rgba(0, 0, 0, 0.85) !important;
    transform: translateY(-2px) !important;
}

.v2-style-thumb-box {
    position: relative;
    width: 100%;
    height: 110px;
    background: #000000;
    overflow: hidden;
}

.v2-style-thumb-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.v2-style-card:hover .v2-style-thumb-box img {
    transform: scale(1.06);
}

.v2-style-tag.gold-pop {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 8px;
    background: linear-gradient(135deg, #ffd23f 0%, #f59e0b 100%);
    color: #08080a;
    font-size: 9px;
    font-weight: 900;
    border-radius: 999px;
    letter-spacing: 0.4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
    z-index: 5;
}

.v2-play-btn-circle.gold-play-sm {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 32px;
    height: 32px;
    background: rgba(10, 10, 16, 0.8);
    border: 1.5px solid #ffd23f;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffd23f;
    font-size: 11px;
    backdrop-filter: blur(8px);
    transition: all 0.22s ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.8);
    z-index: 6;
}

.v2-style-card:hover .v2-play-btn-circle.gold-play-sm {
    background: #ffd23f;
    color: #08080a;
    transform: scale(1.15);
    box-shadow: 0 0 20px rgba(255, 210, 63, 0.8);
}

.v2-not-sure-icon.gold-not-sure {
    height: 110px;
    background: radial-gradient(circle at center, rgba(255, 210, 63, 0.12) 0%, rgba(14, 15, 22, 0.9) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    color: #ffd23f;
    font-weight: 800;
    text-shadow: 0 0 16px rgba(255, 210, 63, 0.6);
}

.v2-style-info {
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-grow: 1;
}

.v2-style-name {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: 13.5px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.25;
}

.v2-style-desc {
    font-size: 11px;
    color: #94a3b8;
    line-height: 1.4;
}

/* --- STEP 3: DURATION PILLS --- */
.v2-durations-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.v2-dur-pill {
    position: relative;
    cursor: pointer;
}

.v2-dur-inner {
    background: rgba(14, 15, 22, 0.9) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 18px 12px 14px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
    height: 100%;
    position: relative;
}

.v2-dur-pill:hover .v2-dur-inner {
    border-color: rgba(255, 210, 63, 0.5) !important;
    transform: translateY(-3px) !important;
    background: rgba(20, 21, 30, 0.95) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 210, 63, 0.15) !important;
}

.v2-dur-pill.selected .v2-dur-inner {
    background: linear-gradient(170deg, rgba(255, 210, 63, 0.14) 0%, rgba(14, 15, 22, 0.98) 100%) !important;
    border-color: #ffd23f !important;
    box-shadow: 0 0 25px rgba(255, 210, 63, 0.3), 0 12px 30px rgba(0, 0, 0, 0.8) !important;
    transform: translateY(-2px) !important;
}

.v2-dur-badge.gold-ribbon {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #ffd23f 0%, #f59e0b 100%);
    color: #08080a;
    font-size: 8.5px;
    font-weight: 900;
    padding: 3px 10px;
    border-radius: 999px;
    letter-spacing: 0.5px;
    box-shadow: 0 3px 12px rgba(255, 210, 63, 0.5);
    white-space: nowrap;
    z-index: 5;
}

.v2-dur-title {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: 14px;
    font-weight: 800;
    color: #ffffff;
}

.v2-dur-price-tag {
    font-size: 13.5px;
    font-weight: 900;
    color: #ffd23f;
    margin-top: 1px;
}

.v2-dur-hint {
    font-size: 10.5px;
    color: #94a3b8;
}

/* Universal Circular Gold Checkmark (Never Overlaps Text) */
.v2-check-mark.gold-check {
    display: none;
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    background: #ffd23f;
    color: #08080a;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 900;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    z-index: 10;
}

.selected .v2-check-mark.gold-check {
    display: flex !important;
}

@media (max-width: 900px) {
    .v2-promoting-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .v2-style-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .v2-durations-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    .v2-promoting-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .v2-style-cards-grid {
        grid-template-columns: 1fr;
    }
    .v2-durations-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ==========================================================================
   PERFECT PAYMENT TRUST STRIP (RAZORPAY + VISA / MC / UPI / RUPAY)
   ========================================================================== */
.v2-payment-trust-monolith {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 18px;
    padding: 16px 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.v2-trust-label-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.8px;
    color: #94a3b8;
    text-transform: uppercase;
}

.v2-secure-shield-icon {
    font-size: 12px;
}

.v2-secure-text {
    color: #cbd5e1;
}

.v2-trust-badges-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    flex-wrap: nowrap;
}

.v2-trust-badges-grid .auth-pay-badge-card {
    background: #0f1017;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 4px 8px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.22s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    flex: 1;
    min-width: 0;
}

.v2-trust-badges-grid .auth-pay-badge-card:hover {
    border-color: rgba(255, 210, 63, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.7);
}

.v2-trust-badges-grid .pay-logo-svg {
    height: 16px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}


/* ==========================================================================
   MINIMALIST LUXURY CINEMA STYLE POSTERS (APPLE PRO / NETFLIX STANDARD)
   ========================================================================== */
.v2-style-cards-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}

.v2-style-card {
    position: relative;
    cursor: pointer;
}

.v2-style-inner {
    background: #0d0e15 !important;
    border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 18px !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
    height: 100%;
    position: relative;
}

.v2-style-card:hover .v2-style-inner {
    border-color: rgba(255, 210, 63, 0.55) !important;
    transform: translateY(-4px) !important;
    background: #12131c !important;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.8), 0 0 25px rgba(255, 210, 63, 0.2) !important;
}

.v2-style-card.selected .v2-style-inner {
    background: linear-gradient(175deg, rgba(255, 210, 63, 0.12) 0%, #0d0e15 100%) !important;
    border-color: #ffd23f !important;
    box-shadow: 0 0 30px rgba(255, 210, 63, 0.35), 0 16px 40px rgba(0, 0, 0, 0.9) !important;
    transform: translateY(-2px) !important;
}

.v2-style-thumb-box {
    position: relative;
    width: 100%;
    height: 135px;
    background: #000000;
    overflow: hidden;
}

.v2-style-thumb-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.v2-style-card:hover .v2-style-thumb-box img {
    transform: scale(1.08);
}

.v2-thumb-gradient-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(13, 14, 21, 0.8) 0%, transparent 60%);
    pointer-events: none;
}

.v2-style-tag.gold-pop {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 8px;
    background: linear-gradient(135deg, #ffd23f 0%, #f59e0b 100%);
    color: #08080a;
    font-size: 8.5px;
    font-weight: 900;
    border-radius: 999px;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
    z-index: 5;
}

.v2-play-btn-circle.gold-play-sm {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 36px;
    height: 36px;
    background: rgba(10, 10, 16, 0.8);
    border: 1.5px solid #ffd23f;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffd23f;
    font-size: 12px;
    backdrop-filter: blur(8px);
    transition: all 0.22s ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.8);
    z-index: 6;
}

.v2-style-card:hover .v2-play-btn-circle.gold-play-sm {
    background: #ffd23f;
    color: #08080a;
    transform: scale(1.15);
    box-shadow: 0 0 20px rgba(255, 210, 63, 0.8);
}

/* Director's Pick Box */
.v2-not-sure-box {
    background: radial-gradient(circle at center, rgba(255, 210, 63, 0.14) 0%, #0d0e15 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.v2-not-sure-orb {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 210, 63, 0.15);
    border: 1.5px solid #ffd23f;
    color: #ffd23f;
    font-size: 22px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(255, 210, 63, 0.35);
    transition: all 0.25s ease;
}

.v2-style-card:hover .v2-not-sure-orb {
    background: #ffd23f;
    color: #08080a;
    transform: scale(1.1);
    box-shadow: 0 0 25px rgba(255, 210, 63, 0.7);
}

.v2-style-info {
    padding: 12px 10px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    flex-grow: 1;
}

.v2-style-name {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: 13.5px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.25;
    letter-spacing: -0.2px;
}

.v2-style-pill-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    color: #ffd23f;
    letter-spacing: 0.2px;
    opacity: 0.9;
}


/* ==========================================================================
   INFINITE SILKY SMOOTH LUXURY BRAND MARQUEE (FORTUNE 500 / APPLE STANDARD)
   ========================================================================== */
.v2-hero-brands-marquee-wrap {
    margin-top: 22px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.v2-brands-head-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
    text-align: center;
}

.v2-trust-pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ffd23f;
    box-shadow: 0 0 10px #ffd23f;
    animation: goldPulseDot 2s infinite ease-in-out;
}

@keyframes goldPulseDot {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.3); opacity: 1; }
}

.v2-trust-lead-text {
    font-size: 12.5px;
    font-weight: 600;
    color: #94a3b8;
    letter-spacing: 0.2px;
}

.v2-trust-lead-text strong {
    color: #ffd23f;
    font-weight: 800;
}

.v2-marquee-track-viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 6px 0;
    mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.v2-marquee-infinite-track {
    display: flex;
    align-items: center;
    gap: 12px;
    width: max-content;
    animation: luxuryBrandMarquee 26s linear infinite;
    will-change: transform;
}

.v2-marquee-track-viewport:hover .v2-marquee-infinite-track {
    animation-play-state: paused;
}

@keyframes luxuryBrandMarquee {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}

.v2-brand-item-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 16px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    backdrop-filter: blur(10px);
    transition: all 0.22s ease;
    flex-shrink: 0;
}

.v2-brand-item-pill:hover {
    background: rgba(255, 210, 63, 0.12);
    border-color: rgba(255, 210, 63, 0.45);
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7), 0 0 16px rgba(255, 210, 63, 0.25);
}

.v2-brand-item-pill img.client-brand-png {
    max-height: 22px;
    max-width: 90px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.v2-brand-item-pill svg.client-brand-svg {
    max-height: 20px;
    max-width: 85px;
    height: 20px;
    width: auto;
}


/* ==========================================================================
   PERFECT HERO VIDEO VIEWPORT (ZERO BLACK GAP / 16:9 CINEMA COVERAGE)
   ========================================================================== */
.v2-hero-video-card {
    position: relative;
    background: #0d0e15;
    border: 1px solid rgba(255, 210, 63, 0.35);
    border-radius: 22px;
    padding: 14px;
    box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.9), 0 0 35px rgba(255, 210, 63, 0.12);
    overflow: hidden !important;
}

.v2-video-slider-viewport {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9.2 !important;
    height: auto !important;
    max-height: 310px;
    border-radius: 16px;
    overflow: hidden !important;
    background: #000000;
}

.v2-video-slider-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.v2-video-slide-item {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.v2-video-slide-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
}

.v2-hero-style-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 12px !important;
}

@media (max-width: 768px) {
    .v2-video-slider-viewport {
        aspect-ratio: 16 / 9.5 !important;
        max-height: 240px;
    }
}


/* ==========================================================================
   ENLARGED CINEMATIC HERO VIDEO PLAYER (DOMINANT 16:9 THEATRICAL PREVIEW)
   ========================================================================== */
.v2-order-hero {
    position: relative;
    padding: 100px 0 60px;
    background: #08080a;
    overflow: hidden;
}

.v2-hero-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr) !important;
    gap: 48px !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 1360px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
}

.v2-hero-left {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
    z-index: 5;
}

.v2-hero-right {
    min-width: 0 !important;
    max-width: 100% !important;
    display: block !important;
    z-index: 5;
}

.v2-hero-video-card {
    position: relative;
    background: #0c0d14 !important;
    border: 1.5px solid rgba(255, 210, 63, 0.4) !important;
    border-radius: 26px !important;
    padding: 18px !important;
    box-shadow: 0 30px 80px -15px rgba(0, 0, 0, 0.95), 0 0 45px rgba(255, 210, 63, 0.16) !important;
    overflow: hidden !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.v2-hero-video-card:hover {
    border-color: #ffd23f !important;
    box-shadow: 0 35px 90px -15px rgba(0, 0, 0, 0.98), 0 0 55px rgba(255, 210, 63, 0.28) !important;
}

.v2-video-slider-viewport {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9.2 !important;
    height: auto !important;
    max-height: 390px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    background: #000000;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
}

.v2-video-slider-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.v2-video-slide-item {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.v2-video-slide-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
}

.v2-hero-play-btn.gold-play {
    width: 72px !important;
    height: 72px !important;
    background: #ffd23f !important;
    color: #08080a !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 0 35px rgba(255, 210, 63, 0.8), 0 10px 30px rgba(0, 0, 0, 0.7) !important;
}

.v2-hero-play-btn.gold-play:hover {
    transform: scale(1.15) !important;
    box-shadow: 0 0 50px #ffd23f, 0 14px 40px rgba(0, 0, 0, 0.85) !important;
}

.v2-hero-style-tabs {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
    margin-top: 16px !important;
}

.v2-style-tab-item {
    background: rgba(14, 15, 22, 0.95) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px !important;
    padding: 8px !important;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.v2-style-tab-item:hover {
    border-color: rgba(255, 210, 63, 0.5) !important;
    transform: translateY(-2px);
}

.v2-style-tab-item.active {
    border-color: #ffd23f !important;
    background: rgba(255, 210, 63, 0.12) !important;
    box-shadow: 0 0 20px rgba(255, 210, 63, 0.3) !important;
}

.v2-style-tab-item .tab-thumb-wrap {
    width: 100%;
    height: 52px !important;
    border-radius: 10px !important;
    overflow: hidden;
}

.v2-style-tab-item .tab-name {
    font-size: 12.5px !important;
    font-weight: 800 !important;
    color: #ffffff;
}

/* Desktop & Laptop Executive Proportions (min-width: 992px) */
@media (min-width: 992px) {
    .v2-order-hero {
        padding: 95px 0 55px !important;
    }
    .v2-hero-grid {
        display: grid !important;
        grid-template-columns: 1.05fr 0.95fr !important;
        gap: 36px 44px !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 1320px !important;
        margin: 0 auto !important;
        padding: 0 20px !important;
        box-sizing: border-box !important;
    }
    .v2-hero-left {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    .v2-hero-title,
    .futuristic-kinetic-title {
        text-align: left !important;
        font-size: clamp(2rem, 2.7vw, 2.75rem) !important;
        line-height: 1.22 !important;
        letter-spacing: -0.02em !important;
        margin-bottom: 14px !important;
        min-height: auto !important;
        width: 100% !important;
    }
    .v2-hero-sub {
        text-align: left !important;
        font-size: 15px !important;
        line-height: 1.6 !important;
        max-width: 520px !important;
        margin: 0 0 20px 0 !important;
        color: #cbd5e1 !important;
    }
    .exec-trust-stats-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 520px !important;
        margin: 0 0 22px 0 !important;
    }
    .exec-stat-card {
        padding: 10px 12px !important;
        border-radius: 12px !important;
    }
    .exec-stat-num {
        font-size: 20px !important;
        font-weight: 900 !important;
    }
    .exec-stat-lbl {
        font-size: 11px !important;
    }
    .v2-hero-action-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        margin: 0 0 24px 0 !important;
        width: auto !important;
    }
    .v2-hero-btn-primary {
        width: auto !important;
        padding: 12px 22px !important;
        font-size: 13.5px !important;
    }
    .v2-hero-btn-wa {
        width: auto !important;
        padding: 12px 18px !important;
        font-size: 13px !important;
    }
    .v2-hero-brands-marquee-wrap {
        margin: 0 !important;
        width: 100% !important;
        max-width: 520px !important;
    }
    .v2-brands-head-row {
        justify-content: flex-start !important;
        margin-bottom: 8px !important;
    }
    .v2-hero-right {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    .v2-web-hero-card {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 18px !important;
        border: 1.5px solid rgba(255, 210, 63, 0.35) !important;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 35px rgba(255, 210, 63, 0.12) !important;
        overflow: hidden !important;
    }
    .web-hero-screen-wrap {
        aspect-ratio: 16 / 10 !important;
        max-height: 380px !important;
    }
    .web-hero-tabs-row {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 8px !important;
        padding: 10px !important;
    }
    .web-tab-item {
        padding: 6px 4px !important;
    }
    
    /* Configurator Grid on Desktop/Laptops */
    .v2-order-section .container {
        max-width: 1320px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .v2-config-grid {
        display: grid !important;
        grid-template-columns: 1fr 370px !important;
        gap: 28px !important;
        align-items: start !important;
    }
    .v2-summary-column {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 110px !important;
        align-self: start !important;
        z-index: 40 !important;
    }
}

/* Medium Laptops (992px to 1199px) Balance */
@media (min-width: 992px) and (max-width: 1199px) {
    .v2-config-grid {
        grid-template-columns: 1fr 330px !important;
        gap: 20px !important;
    }
    .mw-tier-v3-card {
        padding: 12px 14px !important;
    }
    .tier-v3-name {
        font-size: 14.5px !important;
    }
    .tier-v3-price {
        font-size: 21px !important;
    }
    .tier-v3-specs {
        font-size: 11px !important;
        gap: 3px !important;
    }
    .tier-v3-specs li {
        line-height: 1.25 !important;
    }
}

/* Tablets & Below Collapse (Strictly <= 991px) */
@media (max-width: 991px) {
    .v2-hero-grid {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
    }
    .v2-video-slider-viewport {
        max-height: 340px !important;
    }
}




/* ==========================================================================
   MASTER MOBILE-FIRST LUXURY UX/UI SUITE (320px - 768px OPTIMIZATION)
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Global Viewport & Container Hygiene */
    body {
        overflow-x: hidden !important;
        width: 100vw !important;
        max-width: 100% !important;
    }

    .container {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    /* 2. Hero Section on Mobile */
    .v2-order-hero {
        padding: 85px 0 35px !important;
    }

    .v2-hero-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        padding: 0 12px !important;
    }

    .v2-hero-left {
        align-items: center !important;
        text-align: center !important;
    }

    .studio-pipeline-status {
        font-size: 10.5px !important;
        padding: 5px 12px !important;
        margin-bottom: 12px !important;
        justify-content: center !important;
        text-align: center !important;
        max-width: 100% !important;
        flex-wrap: wrap !important;
    }

    .v2-hero-title,
    .futuristic-kinetic-title {
        font-size: clamp(1.4rem, 5.5vw, 1.8rem) !important;
        line-height: 1.25 !important;
        margin-bottom: 12px !important;
        text-align: center !important;
        white-space: normal !important;
        word-break: normal !important;
    }

    .v2-hero-sub {
        font-size: 13.5px !important;
        line-height: 1.5 !important;
        text-align: center !important;
        margin: 0 auto 16px !important;
        max-width: 100% !important;
    }

    .exec-trust-stats-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
        width: 100% !important;
        margin-bottom: 16px !important;
    }

    .exec-stat-card {
        padding: 10px 4px !important;
        border-radius: 12px !important;
    }

    .exec-stat-num {
        font-size: 16px !important;
    }

    .exec-stat-lbl {
        font-size: 9.5px !important;
        line-height: 1.2 !important;
    }

    .v2-hero-brands-marquee-wrap {
        margin-top: 14px !important;
    }

    .v2-brands-head-row {
        justify-content: center !important;
        font-size: 11px !important;
        margin-bottom: 8px !important;
    }

    .v2-brand-item-pill {
        height: 34px !important;
        padding: 0 12px !important;
    }

    .v2-brand-item-pill img.client-brand-png {
        max-height: 18px !important;
        max-width: 75px !important;
    }

    /* 3. Hero Video Carousel on Mobile */
    .v2-hero-video-card {
        padding: 10px !important;
        border-radius: 18px !important;
    }

    .v2-video-slider-viewport {
        aspect-ratio: 16 / 9.2 !important;
        max-height: 220px !important;
        border-radius: 14px !important;
    }

    .v2-hero-play-btn.gold-play {
        width: 52px !important;
        height: 52px !important;
    }

    .v2-hero-play-btn.gold-play svg {
        width: 22px !important;
        height: 22px !important;
    }

    .v2-slider-nav-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
    }

    .v2-slider-nav-btn.prev { left: 6px !important; }
    .v2-slider-nav-btn.next { right: 6px !important; }

    .v2-hero-style-tabs {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 6px !important;
        margin-top: 10px !important;
    }

    .v2-style-tab-item {
        padding: 4px !important;
        border-radius: 10px !important;
        gap: 4px !important;
    }

    .v2-style-tab-item .tab-thumb-wrap {
        height: 36px !important;
        border-radius: 6px !important;
    }

    .v2-style-tab-item .tab-name {
        font-size: 9.5px !important;
        font-weight: 800 !important;
        white-space: nowrap !important;
    }

    /* 4. Configurator & 5 Steps on Mobile */
    .v2-order-section {
        padding: 30px 0 60px !important;
    }

    .v2-config-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    /* Breadcrumbs Horizontal Touch Scroll */
    .v2-wizard-breadcrumb-bar {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        gap: 6px !important;
        padding: 4px 2px 8px !important;
        flex-wrap: nowrap !important;
    }

    .v2-wizard-breadcrumb-bar::-webkit-scrollbar {
        display: none !important;
    }

    .wizard-crumb-chip {
        flex-shrink: 0 !important;
        padding: 6px 12px !important;
        font-size: 11px !important;
        border-radius: 999px !important;
    }

    .v2-step-card {
        padding: 16px 12px !important;
        border-radius: 18px !important;
        margin-bottom: 18px !important;
    }

    .v2-step-head {
        gap: 10px !important;
        margin-bottom: 14px !important;
    }

    .gold-badge-num {
        width: 30px !important;
        height: 30px !important;
        font-size: 12px !important;
    }

    .v2-step-h {
        font-size: 1.1rem !important;
    }

    .v2-step-p {
        font-size: 11px !important;
    }

    /* Step 1 Cards on Mobile */
    .v2-promoting-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }

    .v2-prom-inner {
        padding: 12px 6px !important;
        border-radius: 14px !important;
    }

    .v2-prom-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 16px !important;
        margin-bottom: 2px !important;
    }

    .v2-prom-title {
        font-size: 11.5px !important;
    }

    .v2-prom-sub {
        font-size: 9px !important;
    }

    /* Step 2 Style Cards on Mobile */
    .v2-style-cards-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .v2-style-card.not-sure-card {
        grid-column: 1 / -1 !important;
    }

    .v2-style-thumb-box {
        height: 95px !important;
    }

    .v2-play-btn-circle.gold-play-sm {
        width: 28px !important;
        height: 28px !important;
        font-size: 10px !important;
    }

    .v2-style-info {
        padding: 10px 8px !important;
    }

    .v2-style-name {
        font-size: 12px !important;
    }

    .v2-style-pill-tag {
        font-size: 9px !important;
    }

    /* Step 3 Duration Pills on Mobile */
    .v2-durations-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }

    .v2-dur-pill:nth-child(4),
    .v2-dur-pill:nth-child(5) {
        grid-column: span 1 !important;
    }

    .v2-dur-inner {
        padding: 14px 6px 10px !important;
        border-radius: 14px !important;
    }

    .v2-dur-title {
        font-size: 12px !important;
    }

    .v2-dur-price-tag {
        font-size: 11.5px !important;
    }

    .v2-dur-hint {
        font-size: 9px !important;
    }

    .v2-dur-badge.gold-ribbon {
        font-size: 7.5px !important;
        padding: 2px 6px !important;
        top: -8px !important;
    }

    /* Step 4 Asset Readiness on Mobile */
    .v2-readiness-choices-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .v2-help-pill-choice {
        padding: 12px 14px !important;
        font-size: 12.5px !important;
        border-radius: 14px !important;
    }

    /* Step 5 Contact Details on Mobile */
    .v2-form-fields-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .v2-input-glass {
        height: 48px !important;
        font-size: 16px !important; /* Prevents iOS zoom */
        border-radius: 12px !important;
        padding: 0 14px !important;
    }

    .btn-proceed-to-checkout {
        height: 52px !important;
        font-size: 14px !important;
        border-radius: 14px !important;
    }

    /* 5. Checkout Summary Column on Mobile */
    .v2-summary-card {
        padding: 18px 14px !important;
        border-radius: 20px !important;
    }

    .v2-advance-token-box {
        padding: 14px 12px !important;
        border-radius: 14px !important;
    }

    .v2-token-val {
        font-size: 1.45rem !important;
    }

    .btn-start-video-gold {
        min-height: 54px !important;
        font-size: 15px !important;
        border-radius: 14px !important;
        padding: 14px 16px !important;
    }

    .btn-sub-lock {
        font-size: 10px !important;
    }

    .btn-wa-concierge-direct {
        height: 46px !important;
        font-size: 13px !important;
        border-radius: 12px !important;
    }

    .v2-payment-trust-monolith {
        padding: 12px 10px !important;
        border-radius: 14px !important;
    }

    .v2-trust-label-row {
        font-size: 10px !important;
    }

    .v2-trust-badges-grid {
        gap: 6px !important;
    }

    .v2-trust-badges-grid .auth-pay-badge-card {
        height: 30px !important;
        padding: 3px 6px !important;
    }
}

/* Extra Compact Devices (iPhone SE, Small Android < 380px) */
@media (max-width: 380px) {
    .v2-promoting-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .v2-durations-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .v2-hero-title {
        font-size: 1.6rem !important;
    }
    .hero-line-2 {
        font-size: 1.4rem !important;
    }
}

/* badgeSingleLineCss */

.studio-pipeline-status {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
}

@media (max-width: 768px) {
    .studio-pipeline-status {
        font-size: 11px !important;
        padding: 5px 12px !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 380px) {
    .studio-pipeline-status {
        font-size: 9.5px !important;
        padding: 4px 10px !important;
        gap: 5px !important;
    }
}


/* ==========================================================================
   PERFECT MOBILE VIEWPORT CONTAINMENT (ZERO HORIZONTAL OVERFLOW / 100% FIT)
   ========================================================================== */

/* Hide generic bottom dock on dedicated order pages to prevent form blocking */


@media (max-width: 768px) {
    /* 1. Root & Viewport Constraints */
    html, body {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        position: relative !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    * {
        box-sizing: border-box !important;
    }

    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    /* 2. Order Section & Config Grid */
    .v2-order-section {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        padding: 24px 0 60px !important;
    }

    .v2-config-grid {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        gap: 20px !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .v2-steps-column,
    .v2-summary-column {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* 3. Breadcrumbs Track */
    .v2-wizard-breadcrumb-bar {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        gap: 6px !important;
        padding: 2px 2px 10px !important;
        margin-bottom: 16px !important;
        box-sizing: border-box !important;
    }

    .v2-wizard-breadcrumb-bar::-webkit-scrollbar {
        display: none !important;
    }

    .wizard-crumb-chip {
        flex-shrink: 0 !important;
        padding: 6px 12px !important;
        font-size: 11px !important;
    }

    /* 4. Step Cards Box-Sizing & Padding */
    .v2-step-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding: 16px 12px !important;
        border-radius: 18px !important;
        margin-bottom: 16px !important;
    }

    /* Step 1 Category: 2-column or 3-column responsive touch grid */
    .v2-promoting-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .v2-prom-inner {
        padding: 14px 8px !important;
        border-radius: 14px !important;
        box-sizing: border-box !important;
    }

    .v2-prom-icon {
        width: 38px !important;
        height: 38px !important;
        font-size: 18px !important;
    }

    .v2-prom-title {
        font-size: 12.5px !important;
    }

    .v2-prom-sub {
        font-size: 10px !important;
    }

    /* Step 2 Style Cards: 2-column */
    .v2-style-cards-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .v2-style-card.not-sure-card {
        grid-column: 1 / -1 !important;
    }

    .v2-style-inner {
        box-sizing: border-box !important;
    }

    .v2-style-thumb-box {
        height: 100px !important;
    }

    /* Step 3 Duration: 2-column */
    .v2-durations-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .v2-dur-pill:last-child {
        grid-column: 1 / -1 !important;
    }

    .v2-dur-inner {
        box-sizing: border-box !important;
        padding: 14px 8px !important;
    }

    /* Step 4 Asset Readiness */
    .v2-readiness-choices-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .v2-help-pill-choice {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 12px 14px !important;
        font-size: 12.5px !important;
    }

    /* Step 5 Form Fields */
    .v2-form-fields-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .v2-input-glass {
        width: 100% !important;
        height: 48px !important;
        font-size: 16px !important;
        box-sizing: border-box !important;
    }

    /* Summary Card */
    .v2-summary-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 18px 14px !important;
    }

    .v2-advance-token-box {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .btn-start-video-gold {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .btn-wa-concierge-direct {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .v2-payment-trust-monolith {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}


/* ==========================================================================
   PERFECT BROWSER AUTOFILL DARK LUXURY OVERRIDE (ZERO WHITE/BLUE BACKGROUND)
   ========================================================================== */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #0e0f16 inset !important;
    box-shadow: 0 0 0 1000px #0e0f16 inset !important;
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
    caret-color: #ffd23f !important;
    border: 1.5px solid rgba(255, 210, 63, 0.4) !important;
    border-radius: 12px !important;
    transition: background-color 5000s ease-in-out 0s !important;
    font-family: inherit !important;
    font-size: 15px !important;
}

input:-webkit-autofill:focus,
textarea:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #13141f inset, 0 0 20px rgba(255, 210, 63, 0.3) !important;
    box-shadow: 0 0 0 1000px #13141f inset, 0 0 20px rgba(255, 210, 63, 0.3) !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #ffd23f !important;
}

/* Base Input styling consistency */
.v2-input-glass {
    background: #0e0f16 !important;
    color: #ffffff !important;
    border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    transition: all 0.25s ease !important;
}

.v2-input-glass:focus {
    background: #13141f !important;
    border-color: #ffd23f !important;
    box-shadow: 0 0 20px rgba(255, 210, 63, 0.3) !important;
    color: #ffffff !important;
}


/* ==========================================================================
   HOMEPAGE-IDENTICAL MOBILE HERO SPACING & TYPOGRAPHY MATCH (PIXEL-PERFECT)
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Exact Homepage Section Padding & Container */
    .v2-order-hero {
        padding: 40px 0 28px !important;
        overflow-x: hidden !important;
        width: 100% !important;
    }

    .v2-hero-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 20px !important;
        margin: 0 auto !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }

    .v2-hero-left {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        margin: 0 auto !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* 2. Exact Homepage Status Badge */
    .studio-pipeline-status {
        margin: 0 auto 14px !important;
        font-size: 11px !important;
        padding: 6px 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        border-radius: 999px !important;
        white-space: nowrap !important;
    }

    /* 3. Exact Order Page Heading Size (Centered) */
    .v2-hero-title,
    .futuristic-kinetic-title {
        text-align: center !important;
        font-size: clamp(1.45rem, 5.5vw, 1.85rem) !important;
        line-height: 1.25 !important;
        letter-spacing: -0.02em !important;
        margin: 0 auto 14px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        min-height: auto !important;
    }

    /* 4. Compact 3-Line Subtitle (Max 4 Lines Guaranteed) */
    .v2-hero-sub {
        text-align: center !important;
        font-size: 13.5px !important;
        line-height: 1.5 !important;
        margin: 0 auto 16px !important;
        width: 100% !important;
        max-width: 480px !important;
        box-sizing: border-box !important;
        word-wrap: break-word !important;
        color: #cbd5e1 !important;
    }

    /* 5. Metrics Grid */
    .exec-trust-stats-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 480px !important;
        margin: 0 auto 16px !important;
    }

    .exec-stat-card {
        padding: 9px 6px !important;
        border-radius: 12px !important;
    }

    .exec-stat-num {
        font-size: 15.5px !important;
    }

    .exec-stat-lbl {
        font-size: 9.5px !important;
        line-height: 1.2 !important;
    }

    /* 6. Marquee Ribbon */
    .v2-hero-brands-marquee-wrap {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 20px !important;
    }

    .v2-brands-head-row {
        justify-content: center !important;
        font-size: 11.5px !important;
        margin-bottom: 8px !important;
    }

    /* 7. Right Hero Platform Card */
    .v2-hero-right {
        width: 100% !important;
        max-width: 520px !important;
        margin: 0 auto !important;
        display: block !important;
    }

    .v2-hero-video-card,
    .v2-web-hero-card {
        padding: 0 !important;
        border-radius: 18px !important;
        overflow: hidden !important;
    }

    .v2-video-slider-viewport {
        aspect-ratio: 16 / 9.2 !important;
        max-height: 200px !important;
        border-radius: 14px !important;
    }
}

@media (max-width: 380px) {
    .v2-hero-title,
    .futuristic-kinetic-title {
        font-size: 1.35rem !important;
        max-width: 100% !important;
        line-height: 1.25 !important;
    }
    .v2-hero-sub {
        font-size: 12.5px !important;
        max-width: 100% !important;
    }
}


.badge-desktop-only {
    display: inline;
}

@media (max-width: 768px) {
    .badge-desktop-only {
        display: none !important;
    }
}


/* ==========================================================================
   PERFECT OPTICAL VERTICAL CENTERING FOR MARQUEE PULSE DOT
   ========================================================================== */
.v2-brands-head-row {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    margin: 0 auto 12px !important;
    line-height: 1 !important;
    width: 100% !important;
    text-align: center !important;
}

.v2-trust-pulse-dot {
    display: inline-block !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #ffd23f !important;
    box-shadow: 0 0 10px #ffd23f !important;
    animation: goldPulseDot 2s infinite ease-in-out !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
    margin: 0 !important;
    transform: translateY(-0.5px) !important; /* Perfect baseline optical balance */
}

.v2-trust-lead-text {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #94a3b8 !important;
    letter-spacing: 0.2px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}

@media (max-width: 768px) {
    .v2-brands-head-row {
        gap: 6px !important;
        margin: 0 auto 10px !important;
        font-size: 11px !important;
    }
    .v2-trust-pulse-dot {
        width: 6px !important;
        height: 6px !important;
        transform: translateY(-0.5px) !important;
    }
    .v2-trust-lead-text {
        font-size: 11px !important;
    }
}


/* ==========================================================================
   HOMEPAGE-MATCHED CRISP WHITE HIGH-CONTRAST TYPOGRAPHY (ZERO DULL GREY)
   ========================================================================== */

/* 1. Hero Text Elements */
.v2-hero-sub {
    color: #e2e8f0 !important;
    font-weight: 500 !important;
    opacity: 0.95 !important;
}

.exec-stat-lbl {
    color: #cbd5e1 !important;
    font-weight: 600 !important;
}

.v2-trust-lead-text {
    color: #f1f5f9 !important;
    font-weight: 600 !important;
}

/* 2. Step Headings & Subtitles */
.v2-step-h {
    color: #ffffff !important;
    font-weight: 800 !important;
}

.v2-step-p {
    color: #e2e8f0 !important;
    font-weight: 500 !important;
    font-size: 13px !important;
}

/* 3. Step 1 Category Cards */
.v2-prom-title {
    color: #ffffff !important;
    font-weight: 800 !important;
}

.v2-prom-sub {
    color: #cbd5e1 !important;
    font-weight: 500 !important;
}

/* 4. Step 2 Visual Style Cards */
.v2-style-name {
    color: #ffffff !important;
    font-weight: 800 !important;
}

.v2-style-desc {
    color: #cbd5e1 !important;
    font-weight: 500 !important;
}

/* 5. Step 3 Duration Pills */
.v2-dur-title {
    color: #ffffff !important;
    font-weight: 800 !important;
}

.v2-dur-hint {
    color: #cbd5e1 !important;
    font-weight: 500 !important;
}

.v2-dur-price-tag {
    color: #ffd23f !important;
    font-weight: 900 !important;
}

/* 6. Step 4 Asset Readiness & Reassurance */
.v2-help-pill-choice {
    color: #f1f5f9 !important;
    font-weight: 600 !important;
}

.v2-reassure-title {
    color: #ffffff !important;
    font-weight: 800 !important;
}

.v2-reassure-sub {
    color: #e2e8f0 !important;
}

/* 7. Step 5 Form Fields & Inputs */
.v2-field label {
    color: #f8fafc !important;
    font-weight: 700 !important;
    font-size: 12.5px !important;
}

.v2-input-glass {
    color: #ffffff !important;
    background: #0e0f16 !important;
}

.v2-input-glass::placeholder {
    color: #64748b !important;
}

/* 8. Summary Cockpit & Trust Elements */
.v2-summary-title {
    color: #ffffff !important;
    font-weight: 800 !important;
}

.v2-summary-item {
    color: #e2e8f0 !important;
    font-weight: 500 !important;
}

.v2-summary-label {
    color: #cbd5e1 !important;
}

.v2-summary-value {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.v2-token-head {
    color: #10b981 !important;
    font-weight: 800 !important;
}

.v2-token-sub {
    color: #cbd5e1 !important;
    font-weight: 500 !important;
}

.v2-check-item span {
    color: #f1f5f9 !important;
    font-weight: 600 !important;
}

.v2-secure-text {
    color: #ffffff !important;
    font-weight: 800 !important;
}

.v2-trust-label-row {
    color: #ffffff !important;
}

.v2-style-tab-item .tab-name {
    color: #ffffff !important;
    font-weight: 800 !important;
}


/* ==========================================================================
   PERFECT VECTOR SVG PLAY ORBS FOR STYLE PREVIEW CARDS
   ========================================================================== */
.v2-play-btn-circle.gold-play-sm {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: rgba(12, 13, 20, 0.85) !important;
    border: 1.5px solid #ffd23f !important;
    color: #ffd23f !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.8), 0 0 10px rgba(255, 210, 63, 0.35) !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    padding: 0 !important;
    line-height: 1 !important;
    z-index: 5 !important;
}

.v2-play-btn-circle.gold-play-sm svg {
    width: 12px !important;
    height: 12px !important;
    fill: currentColor !important;
    transform: translateX(1px) !important;
    pointer-events: none !important;
    display: block !important;
    transition: fill 0.2s ease !important;
}

.v2-style-card:hover .v2-play-btn-circle.gold-play-sm,
.v2-play-btn-circle.gold-play-sm:hover,
.v2-play-btn-circle.gold-play-sm:active {
    background: #ffd23f !important;
    color: #08080a !important;
    border-color: #ffffff !important;
    box-shadow: 0 0 20px rgba(255, 210, 63, 0.9) !important;
    transform: scale(1.12) !important;
}

.v2-style-card:hover .v2-play-btn-circle.gold-play-sm svg,
.v2-play-btn-circle.gold-play-sm:hover svg,
.v2-play-btn-circle.gold-play-sm:active svg {
    fill: #08080a !important;
}


/* ==========================================================================
   PERFECT SINGLE-LINE UNBROKEN MARQUEE TRUST TYPOGRAPHY
   ========================================================================== */
.v2-brands-head-row {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    width: 100% !important;
    text-align: center !important;
    margin: 0 auto 10px !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}

.v2-trust-pulse-dot {
    display: inline-block !important;
    width: 6.5px !important;
    height: 6.5px !important;
    border-radius: 50% !important;
    background: #ffd23f !important;
    box-shadow: 0 0 8px #ffd23f !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
    transform: translateY(-0.5px) !important;
}

.v2-trust-lead-text {
    display: inline !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #f1f5f9 !important;
    white-space: nowrap !important;
    letter-spacing: 0.2px !important;
    line-height: 1 !important;
}

.v2-trust-lead-text strong {
    color: #ffd23f !important;
    font-weight: 800 !important;
}

.brand-sub-desktop-only {
    display: inline;
}

@media (max-width: 768px) {
    .brand-sub-desktop-only {
        display: none !important;
    }

    .v2-brands-head-row {
        gap: 6px !important;
        margin: 0 auto 8px !important;
    }

    .v2-trust-lead-text {
        font-size: 11.5px !important;
        white-space: nowrap !important;
    }
}


/* ==========================================================================
   ANIMATED 4-STEP LUXURY HOW IT WORKS SECTION (MOBILE 2x2 & DESKTOP 4-COL)
   ========================================================================== */
.v2-how-it-works-section {
    padding: 60px 0 80px !important;
    position: relative !important;
}

.v2-how-head-wrap {
    text-align: center !important;
    margin-bottom: 32px !important;
}

.v2-how-pill-tag {
    display: inline-block !important;
    padding: 4px 12px !important;
    background: rgba(255, 210, 63, 0.12) !important;
    border: 1px solid rgba(255, 210, 63, 0.3) !important;
    border-radius: 999px !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    color: #ffd23f !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 10px !important;
}

.v2-how-title {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif) !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin-bottom: 8px !important;
}

.v2-how-lead {
    font-size: 13.5px !important;
    color: #cbd5e1 !important;
    margin: 0 auto !important;
    max-width: 440px !important;
}

.v2-timeline-flow {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.v2-flow-card {
    background: rgba(14, 15, 24, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 18px !important;
    padding: 20px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    backdrop-filter: blur(16px) !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

.v2-flow-card:hover {
    border-color: rgba(255, 210, 63, 0.5) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 210, 63, 0.2) !important;
}

.v2-flow-card.highlight-gold {
    border-color: rgba(255, 210, 63, 0.4) !important;
    background: linear-gradient(180deg, rgba(255, 210, 63, 0.08) 0%, rgba(14, 15, 24, 0.95) 100%) !important;
}

.flow-card-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 6px !important;
}

.flow-step-num {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    color: #64748b !important;
    letter-spacing: 0.5px !important;
}

.flow-step-num.gold-num {
    color: #ffd23f !important;
}

.flow-icon-circle {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: rgba(255, 210, 63, 0.12) !important;
    border: 1px solid rgba(255, 210, 63, 0.3) !important;
    color: #ffd23f !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    animation: flowFloat 3s ease-in-out infinite !important;
}

.flow-icon-circle.gold-flow-circle-active {
    background: linear-gradient(135deg, #ffd23f 0%, #ffb703 100%) !important;
    color: #08080a !important;
    box-shadow: 0 0 16px rgba(255, 210, 63, 0.6) !important;
}

.flow-icon-circle svg {
    width: 18px !important;
    height: 18px !important;
}

@keyframes flowFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.flow-step-title {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif) !important;
    font-size: 14.5px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.2 !important;
}

.flow-step-desc {
    font-size: 11.5px !important;
    line-height: 1.45 !important;
    color: #cbd5e1 !important;
    margin: 0 !important;
}

/* Mobile Responsiveness (2x2 Grid or Clean Stack) */
@media (max-width: 768px) {
    .v2-how-it-works-section {
        padding: 40px 0 50px !important;
    }

    .v2-how-title {
        font-size: 22px !important;
    }

    .v2-how-lead {
        font-size: 12px !important;
    }

    .v2-timeline-flow {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .v2-flow-card {
        padding: 14px 12px !important;
        border-radius: 16px !important;
    }

    .flow-icon-circle {
        width: 32px !important;
        height: 32px !important;
    }

    .flow-icon-circle svg {
        width: 15px !important;
        height: 15px !important;
    }

    .flow-step-title {
        font-size: 13px !important;
    }

    .flow-step-desc {
        font-size: 10.5px !important;
        line-height: 1.35 !important;
    }
}

@media (max-width: 380px) {
    .v2-timeline-flow {
        grid-template-columns: 1fr !important;
    }
}


/* ==========================================================================
   MOBILE FLOATING BOTTOM DOCK WITH ANIMATED LASER GLOW (ORDER PAGE ENABLED)
   ========================================================================== */
@media (max-width: 768px) {
    .mobile-bottom-dock {
        display: block !important;
        position: fixed !important;
        bottom: 12px !important;
        left: 14px !important;
        right: 14px !important;
        max-width: 380px !important;
        margin: 0 auto !important;
        z-index: 9999 !important;
        border-radius: 28px !important;
        box-shadow: 0 16px 40px -6px rgba(0, 0, 0, 0.95), 0 0 25px rgba(255, 210, 63, 0.25) !important;
    }

    body {
        padding-bottom: 90px !important;
    }

    .v2-how-it-works-section {
        margin-bottom: 20px !important;
    }
}


/* ==========================================================================
   INTELLIGENT WHATSAPP NUMBER VALIDATOR & INPUT GROUP STYLING
   ========================================================================== */
.phone-field-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.phone-label-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.phone-feedback-badge {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
    transition: all 0.2s ease !important;
}

.phone-feedback-badge.is-valid {
    color: #34d399 !important;
}

.phone-feedback-badge.is-invalid {
    color: #ff7675 !important;
}

.phone-feedback-badge.is-typing {
    color: #ffd23f !important;
}

.phone-input-group {
    display: flex !important;
    align-items: center !important;
    background: #0e0f16 !important;
    border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    transition: all 0.25s ease !important;
}

.phone-input-group:focus-within {
    border-color: #ffd23f !important;
    box-shadow: 0 0 20px rgba(255, 210, 63, 0.3) !important;
    background: #13141f !important;
}

.phone-prefix-flag {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 12px !important;
    height: 48px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #f1f5f9 !important;
    user-select: none !important;
    flex-shrink: 0 !important;
}

.phone-with-prefix {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    height: 48px !important;
    width: 100% !important;
    padding: 0 14px !important;
    font-size: 16px !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
}

.phone-with-prefix:focus {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.phone-hint-text {
    font-size: 11px !important;
    color: #94a3b8 !important;
    line-height: 1.3 !important;
    margin-top: 2px !important;
    transition: color 0.2s ease !important;
}


/* ==========================================================================
   PERFECT HIGH-CONTRAST GOLD VECTOR ICONS FOR HOW IT WORKS MATRIX
   ========================================================================== */
.flow-icon-circle {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: rgba(14, 15, 24, 0.92) !important;
    border: 1.5px solid #ffd23f !important;
    color: #ffd23f !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7), 0 0 12px rgba(255, 210, 63, 0.35) !important;
    animation: flowFloat 3s ease-in-out infinite !important;
    flex-shrink: 0 !important;
}

.flow-icon-circle svg {
    width: 18px !important;
    height: 18px !important;
    stroke: #ffd23f !important;
    fill: none !important;
    stroke-width: 2 !important;
    display: block !important;
}

.v2-flow-card.highlight-gold .flow-icon-circle,
.flow-icon-circle.gold-flow-circle-active {
    background: rgba(255, 210, 63, 0.18) !important;
    border: 1.5px solid #ffd23f !important;
    box-shadow: 0 0 20px rgba(255, 210, 63, 0.6) !important;
}

.v2-flow-card.highlight-gold .flow-icon-circle svg,
.flow-icon-circle.gold-flow-circle-active svg {
    stroke: #ffd23f !important;
    fill: none !important;
}

@media (max-width: 768px) {
    .flow-icon-circle {
        width: 32px !important;
        height: 32px !important;
    }

    .flow-icon-circle svg {
        width: 15px !important;
        height: 15px !important;
        stroke: #ffd23f !important;
    }
}


/* ==========================================================================
   BULLETPROOF IOS SAFARI & CHROME AUTOFILL + ZERO ZOOM PREVENTION
   ========================================================================== */

/* 1. Eliminate Mobile Keyboard Auto-Zoom (Enforce 16px minimum on all inputs) */
input,
textarea,
select,
.v2-input,
.v2-input-glass,
.gold-input,
.phone-with-prefix {
    font-size: 16px !important;
    touch-action: manipulation !important;
    -webkit-text-size-adjust: 100% !important;
}

/* 2. Universal Dark Luxury Autofill Override (Chrome, iOS Safari, Android, Edge) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active {
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
    -webkit-box-shadow: 0 0 0px 1000px #0e0f16 inset !important;
    box-shadow: 0 0 0px 1000px #0e0f16 inset !important;
    background-color: #0e0f16 !important;
    background-image: none !important;
    caret-color: #ffd23f !important;
    border: 1.5px solid rgba(255, 210, 63, 0.4) !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    transition: background-color 5000000s ease-in-out 0s, -webkit-box-shadow 5000000s ease-in-out 0s !important;
}

/* Special rule for phone input inside prefix container */
.phone-input-group input:-webkit-autofill,
.phone-input-group input:-webkit-autofill:hover,
.phone-input-group input:-webkit-autofill:focus,
.phone-input-group input:-webkit-autofill:active,
.phone-with-prefix:-webkit-autofill,
.phone-with-prefix:-webkit-autofill:hover,
.phone-with-prefix:-webkit-autofill:focus,
.phone-with-prefix:-webkit-autofill:active {
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
    -webkit-box-shadow: 0 0 0px 1000px #0e0f16 inset !important;
    box-shadow: 0 0 0px 1000px #0e0f16 inset !important;
    background-color: #0e0f16 !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 12px 12px 0 !important;
}

input:-webkit-autofill:focus,
textarea:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px #13141f inset, 0 0 20px rgba(255, 210, 63, 0.3) !important;
    box-shadow: 0 0 0px 1000px #13141f inset, 0 0 20px rgba(255, 210, 63, 0.3) !important;
    border-color: #ffd23f !important;
}

/* Explicit ID-Level Dark Autofill Guards */
#v2ClientPhone:-webkit-autofill,
#v2ClientName:-webkit-autofill,
#v2ClientEmail:-webkit-autofill,
#v2BrandName:-webkit-autofill,
#v2ProjectNotes:-webkit-autofill {
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
    -webkit-box-shadow: 0 0 0px 1000px #0e0f16 inset !important;
    box-shadow: 0 0 0px 1000px #0e0f16 inset !important;
    background-color: #0e0f16 !important;
    background-image: none !important;
}

#v2ClientPhone:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #0e0f16 inset !important;
    box-shadow: 0 0 0px 1000px #0e0f16 inset !important;
    background-color: #0e0f16 !important;
    border: none !important;
    border-radius: 0 12px 12px 0 !important;
}


/* ==========================================================================
   OPTION 1: RADIANT 24K GOLD CHECKOUT BUTTON WITH HOLOGRAPHIC LASER SHIMMER
   ========================================================================== */
.btn-proceed-to-checkout {
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    min-height: 56px !important;
    background: linear-gradient(135deg, #ffd23f 0%, #ffb703 100%) !important;
    color: #08080a !important;
    border: none !important;
    border-radius: 14px !important;
    padding: 12px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    cursor: pointer !important;
    box-shadow: 0 10px 28px rgba(255, 210, 63, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    user-select: none !important;
    margin-top: 10px !important;
}

.btn-proceed-to-checkout:hover {
    transform: translateY(-2px) scale(1.01) !important;
    box-shadow: 0 14px 36px rgba(255, 210, 63, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

.btn-proceed-to-checkout:active {
    transform: scale(0.98) !important;
}

.btn-proceed-to-checkout .btn-main-txt {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif) !important;
    font-size: 15.5px !important;
    font-weight: 900 !important;
    color: #08080a !important;
    letter-spacing: 0.2px !important;
    line-height: 1.2 !important;
}

.btn-proceed-to-checkout .btn-micro-trust {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    color: rgba(8, 8, 10, 0.8) !important;
    letter-spacing: 0.2px !important;
    line-height: 1 !important;
}

.btn-shimmer-laser {
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 60% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent) !important;
    transform: skewX(-25deg) !important;
    animation: laserShimmerSweep 3s infinite ease-in-out !important;
    pointer-events: none !important;
}

@keyframes laserShimmerSweep {
    0% { left: -100%; }
    40%, 100% { left: 200%; }
}


/* ==========================================================================
   PERFECT FIT-CONTENT BADGE PILL (ZERO EXTRA EMPTY SPACE ON RIGHT)
   ========================================================================== */
.studio-pipeline-status,
.futuristic-radar-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: fit-content !important;
    max-width: fit-content !important;
    align-self: flex-start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    padding: 6px 16px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

@media (max-width: 768px) {
    .studio-pipeline-status,
    .futuristic-radar-pill {
        align-self: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: fit-content !important;
        max-width: fit-content !important;
        padding: 5px 14px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 380px) {
    .studio-pipeline-status,
    .futuristic-radar-pill {
        padding: 4px 10px !important;
        font-size: 9.5px !important;
    }
}


/* ==========================================================================
   CONFIGURATOR SECTION HEADING MASTHEAD BANNER
   ========================================================================== */
.v2-configurator-masthead {
    text-align: center !important;
    margin-bottom: 28px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

.v2-config-beacon-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 5px 14px !important;
    background: rgba(255, 210, 63, 0.12) !important;
    border: 1px solid rgba(255, 210, 63, 0.35) !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #ffd23f !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 12px !important;
    box-shadow: 0 0 16px rgba(255, 210, 63, 0.15) !important;
}

.pulse-beacon-gold {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #ffd23f !important;
    box-shadow: 0 0 10px #ffd23f !important;
    animation: goldPulseDot 2s infinite ease-in-out !important;
}

.v2-config-section-title {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif) !important;
    font-size: clamp(22px, 3.5vw, 32px) !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.2 !important;
    margin-bottom: 10px !important;
    letter-spacing: -0.4px !important;
    text-align: center !important;
}

.v2-config-section-title .gold-gradient-text {
    background: linear-gradient(135deg, #ffd23f 0%, #ffb703 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.v2-config-section-desc {
    font-size: 14px !important;
    color: #cbd5e1 !important;
    max-width: 580px !important;
    margin: 0 auto !important;
    line-height: 1.55 !important;
    text-align: center !important;
}

@media (max-width: 768px) {
    .v2-configurator-masthead {
        margin-bottom: 20px !important;
        padding: 0 8px !important;
    }

    .v2-config-section-title {
        font-size: 22px !important;
    }

    .v2-config-section-desc {
        font-size: 12.5px !important;
        max-width: 320px !important;
    }
}


/* ==========================================================================
   GENEROUS LUXURY BREATHING ROOM & SPACIOUS CONFIGURATOR MASTHEAD
   ========================================================================== */
.v2-order-section {
    padding: 60px 0 100px !important;
    position: relative !important;
}

.v2-config-section-divider {
    width: 100% !important;
    max-width: 900px !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 210, 63, 0.35) 50%, transparent 100%) !important;
    margin: 0 auto 48px !important;
}

.v2-configurator-masthead {
    text-align: center !important;
    margin-bottom: 44px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 0 16px !important;
}

.v2-config-beacon-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 16px !important;
    background: rgba(255, 210, 63, 0.12) !important;
    border: 1px solid rgba(255, 210, 63, 0.35) !important;
    border-radius: 999px !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    color: #ffd23f !important;
    letter-spacing: 0.6px !important;
    margin-bottom: 16px !important;
    box-shadow: 0 0 18px rgba(255, 210, 63, 0.18) !important;
}

.v2-config-section-title {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif) !important;
    font-size: clamp(24px, 3.8vw, 36px) !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.22 !important;
    margin-bottom: 14px !important;
    letter-spacing: -0.5px !important;
    text-align: center !important;
}

.v2-config-section-title .gold-gradient-text {
    background: linear-gradient(135deg, #ffd23f 0%, #ffb703 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.v2-config-section-desc {
    font-size: 15px !important;
    color: #cbd5e1 !important;
    max-width: 620px !important;
    margin: 0 auto !important;
    line-height: 1.65 !important;
    text-align: center !important;
}

.v2-wizard-breadcrumb-bar {
    margin-bottom: 26px !important;
}

@media (max-width: 768px) {
    .v2-order-section {
        padding: 35px 0 60px !important;
    }

    .v2-config-section-divider {
        margin: 0 auto 28px !important;
        max-width: 320px !important;
    }

    .v2-configurator-masthead {
        margin-bottom: 24px !important;
        padding: 0 8px !important;
    }

    .v2-config-beacon-tag {
        font-size: 10.5px !important;
        padding: 5px 12px !important;
        margin-bottom: 12px !important;
    }

    .v2-config-section-title {
        font-size: 23px !important;
        line-height: 1.25 !important;
        margin-bottom: 10px !important;
    }

    .v2-config-section-desc {
        font-size: 12.5px !important;
        line-height: 1.5 !important;
        max-width: 320px !important;
    }

    .v2-wizard-breadcrumb-bar {
        margin-bottom: 18px !important;
    }
}


/* ==========================================================================
   ULTRA-LUXURY 8K VIP TICKET SUCCESS MODAL STYLING
   ========================================================================== */
.luxury-vip-ticket {
    background: linear-gradient(180deg, #13141f 0%, #090a10 100%) !important;
    border: 1.5px solid rgba(255, 210, 63, 0.45) !important;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.95), 0 0 50px rgba(255, 210, 63, 0.25) !important;
    border-radius: 24px !important;
    padding: 32px 28px !important;
    text-align: center !important;
    position: relative !important;
}

.luxury-success-badge-wrap {
    position: relative !important;
    width: 64px !important;
    height: 64px !important;
    margin: 0 auto 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.luxury-badge-pulse-ring {
    position: absolute !important;
    inset: -6px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255, 210, 63, 0.4) !important;
    animation: goldHaloPulse 2.5s infinite ease-in-out !important;
}

@keyframes goldHaloPulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.15); opacity: 0.2; }
}

.success-icon-badge.gold-badge-icon {
    width: 54px !important;
    height: 54px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #ffd23f 0%, #ffb703 100%) !important;
    color: #08080a !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 0 25px rgba(255, 210, 63, 0.7) !important;
}

.luxury-vip-status-beacon {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 5px 14px !important;
    background: rgba(255, 210, 63, 0.12) !important;
    border: 1px solid rgba(255, 210, 63, 0.35) !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #ffd23f !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 12px !important;
}

.luxury-pass-pill {
    background: rgba(255, 210, 63, 0.08) !important;
    border: 1px dashed rgba(255, 210, 63, 0.4) !important;
    border-radius: 12px !important;
    padding: 10px 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 18px !important;
}

.pass-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    letter-spacing: 0.4px !important;
}

.pass-code {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif) !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    color: #ffd23f !important;
    letter-spacing: 1px !important;
}

.luxury-token-card {
    background: rgba(16, 185, 129, 0.08) !important;
    border: 1.5px solid rgba(16, 185, 129, 0.3) !important;
    border-radius: 16px !important;
    padding: 14px 18px !important;
    margin-bottom: 16px !important;
    text-align: left !important;
}

.token-header-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 6px !important;
}

.token-badge-verified {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #34d399 !important;
    background: rgba(52, 211, 153, 0.15) !important;
    padding: 3px 10px !important;
    border-radius: 999px !important;
}

.token-val-gold {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif) !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    color: #ffd23f !important;
}

.token-reassure-text {
    font-size: 12.5px !important;
    color: #cbd5e1 !important;
    line-height: 1.45 !important;
    margin: 0 !important;
}

.luxury-team-card {
    background: rgba(18, 19, 29, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    padding: 16px 18px !important;
    margin-bottom: 20px !important;
    text-align: left !important;
}

.perk-gold-check {
    color: #ffd23f !important;
    font-weight: 800 !important;
    margin-right: 6px !important;
}

.luxury-wa-btn {
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    min-height: 52px !important;
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
    border-radius: 14px !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    box-shadow: 0 10px 30px rgba(37, 211, 102, 0.45) !important;
    transition: all 0.25s ease !important;
    text-decoration: none !important;
}

.luxury-wa-btn:hover {
    transform: translateY(-2px) scale(1.01) !important;
    box-shadow: 0 14px 40px rgba(37, 211, 102, 0.65) !important;
}

.wa-btn-content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.luxury-close-link {
    background: transparent !important;
    border: none !important;
    color: #94a3b8 !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    padding: 8px 16px !important;
    margin-top: 10px !important;
    transition: color 0.2s ease !important;
}

.luxury-close-link:hover {
    color: #ffffff !important;
    text-decoration: underline !important;
}


/* ==========================================================================
   PERFECT VIEWPORT-FITTING ULTRA-LUXURY 8K VIP MODAL
   ========================================================================== */
.order-success-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
}

.order-success-modal.is-open {
    display: flex !important;
}

.luxury-vip-ticket {
    background: linear-gradient(180deg, #13141f 0%, #090a10 100%) !important;
    border: 1.5px solid rgba(255, 210, 63, 0.45) !important;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.95), 0 0 40px rgba(255, 210, 63, 0.25) !important;
    border-radius: 20px !important;
    padding: 20px 22px 18px !important;
    text-align: center !important;
    position: relative !important;
    width: 100% !important;
    max-width: 460px !important;
    max-height: calc(100vh - 24px) !important;
    overflow-y: auto !important;
    margin: auto !important;
    box-sizing: border-box !important;
}

.luxury-success-badge-wrap {
    position: relative !important;
    width: 46px !important;
    height: 46px !important;
    margin: 0 auto 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.luxury-badge-pulse-ring {
    position: absolute !important;
    inset: -4px !important;
    border-radius: 50% !important;
    border: 1.5px solid rgba(255, 210, 63, 0.4) !important;
    animation: goldHaloPulse 2.5s infinite ease-in-out !important;
}

.success-icon-badge.gold-badge-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #ffd23f 0%, #ffb703 100%) !important;
    color: #08080a !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 0 20px rgba(255, 210, 63, 0.6) !important;
}

.success-icon-badge.gold-badge-icon svg {
    width: 18px !important;
    height: 18px !important;
}

.luxury-vip-status-beacon {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 12px !important;
    background: rgba(255, 210, 63, 0.12) !important;
    border: 1px solid rgba(255, 210, 63, 0.35) !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    color: #ffd23f !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 8px !important;
}

.luxury-vip-ticket .success-title {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif) !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.2 !important;
    margin-bottom: 10px !important;
    letter-spacing: -0.3px !important;
}

.luxury-pass-pill {
    background: rgba(255, 210, 63, 0.08) !important;
    border: 1px dashed rgba(255, 210, 63, 0.4) !important;
    border-radius: 10px !important;
    padding: 6px 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
}

.pass-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    letter-spacing: 0.4px !important;
}

.pass-code {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif) !important;
    font-size: 14.5px !important;
    font-weight: 900 !important;
    color: #ffd23f !important;
    letter-spacing: 0.8px !important;
}

.luxury-token-card {
    background: rgba(16, 185, 129, 0.08) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    margin-bottom: 12px !important;
    text-align: left !important;
}

.token-header-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 4px !important;
}

.token-badge-verified {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #34d399 !important;
    background: rgba(52, 211, 153, 0.15) !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
}

.token-val-gold {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif) !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    color: #ffd23f !important;
}

.token-reassure-text {
    font-size: 11.5px !important;
    color: #cbd5e1 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

.luxury-team-card {
    background: rgba(18, 19, 29, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    margin-bottom: 14px !important;
    text-align: left !important;
}

.v2-success-avatar-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 11.5px !important;
    color: #ffffff !important;
    margin-bottom: 6px !important;
}

.v2-success-perks {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    font-size: 11px !important;
    color: #cbd5e1 !important;
    line-height: 1.35 !important;
}

.perk-gold-check {
    color: #ffd23f !important;
    font-weight: 800 !important;
    margin-right: 4px !important;
}

.luxury-wa-btn {
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    min-height: 46px !important;
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45) !important;
    transition: all 0.25s ease !important;
    text-decoration: none !important;
    padding: 8px 14px !important;
}

.luxury-close-link {
    background: transparent !important;
    border: none !important;
    color: #94a3b8 !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    padding: 4px 10px !important;
    margin-top: 6px !important;
    display: inline-block !important;
}

.v2-privacy-note {
    font-size: 9.5px !important;
    color: #64748b !important;
    margin-top: 6px !important;
    display: block !important;
}


/* ==========================================================================
   SLEEK TOP-RIGHT MODAL CLOSE BUTTON
   ========================================================================== */
.modal-top-close-btn {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #cbd5e1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
    z-index: 10 !important;
    padding: 0 !important;
}

.modal-top-close-btn:hover {
    background: rgba(255, 210, 63, 0.2) !important;
    border-color: #ffd23f !important;
    color: #ffd23f !important;
    transform: rotate(90deg) scale(1.08) !important;
    box-shadow: 0 0 14px rgba(255, 210, 63, 0.4) !important;
}

.modal-top-close-btn:active {
    transform: scale(0.95) !important;
}


/* ==========================================================================
   PHONE INPUT FONT SIZE EQUALIZATION & MULTI-ASSET / VOICE BRIEF STUDIO
   ========================================================================== */

/* 1. Phone Input Font Size Equalization (Exact 15px Match with Full Name & Email) */
.phone-input-group {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    background: rgba(14, 15, 22, 0.95) !important;
    border: 1.5px solid rgba(255, 210, 63, 0.25) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    transition: all 0.25s ease !important;
}

.phone-input-group:focus-within {
    border-color: #ffd23f !important;
    box-shadow: 0 0 16px rgba(255, 210, 63, 0.3) !important;
}

.phone-prefix-flag {
    padding: 0 12px !important;
    font-family: inherit !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    color: #ffd23f !important;
    background: rgba(255, 210, 63, 0.08) !important;
    border-right: 1px solid rgba(255, 210, 63, 0.2) !important;
    display: flex !important;
    align-items: center !important;
    height: 48px !important;
    user-select: none !important;
    flex-shrink: 0 !important;
}

.phone-input-group .phone-with-prefix {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    height: 48px !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    letter-spacing: 0.3px !important;
    color: #ffffff !important;
    padding: 0 14px !important;
    flex-grow: 1 !important;
    box-shadow: none !important;
}

.v2-field input.v2-input {
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    height: 48px !important;
    padding: 0 14px !important;
    color: #ffffff !important;
    background: rgba(14, 15, 22, 0.95) !important;
    border: 1.5px solid rgba(255, 210, 63, 0.25) !important;
    border-radius: 12px !important;
    transition: all 0.25s ease !important;
}

.v2-field input.v2-input:focus {
    border-color: #ffd23f !important;
    box-shadow: 0 0 16px rgba(255, 210, 63, 0.3) !important;
}

/* 2. Multi-Asset Upload Suite Styling */
.v2-asset-upload-suite {
    margin: 20px 0 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    width: 100% !important;
}

.v2-upload-block {
    background: rgba(14, 15, 22, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 16px !important;
}

.v2-upload-label-row {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
}

.v2-upload-heading {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    display: block !important;
    margin-bottom: 2px !important;
}

.v2-upload-sub {
    font-size: 11.5px !important;
    color: #94a3b8 !important;
    display: block !important;
}

.v2-upload-limit-badge {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #ffd23f !important;
    background: rgba(255, 210, 63, 0.12) !important;
    border: 1px solid rgba(255, 210, 63, 0.3) !important;
    padding: 3px 8px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.v2-file-input-hidden {
    display: none !important;
}

.v2-dropzone-box {
    border: 2px dashed rgba(255, 210, 63, 0.35) !important;
    border-radius: 12px !important;
    padding: 20px 16px !important;
    text-align: center !important;
    background: rgba(255, 210, 63, 0.03) !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
}

.v2-dropzone-box:hover,
.v2-dropzone-box.is-dragover {
    border-color: #ffd23f !important;
    background: rgba(255, 210, 63, 0.08) !important;
    box-shadow: 0 0 20px rgba(255, 210, 63, 0.2) !important;
}

.v2-dropzone-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.v2-dropzone-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: rgba(255, 210, 63, 0.12) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.v2-dropzone-text {
    font-size: 13px !important;
    color: #e2e8f0 !important;
    line-height: 1.35 !important;
}

.v2-dropzone-text strong {
    color: #ffd23f !important;
}

.v2-dropzone-text span {
    display: block !important;
    font-size: 11px !important;
    color: #94a3b8 !important;
    margin-top: 2px !important;
}

.v2-uploaded-files-list {
    margin-top: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.v2-file-chip {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 12px !important;
    background: rgba(18, 19, 28, 0.95) !important;
    border: 1px solid rgba(255, 210, 63, 0.25) !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    color: #ffffff !important;
    transition: all 0.2s ease !important;
}

.v2-file-info {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    overflow: hidden !important;
}

.v2-file-name {
    font-weight: 600 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 200px !important;
}

.v2-file-size {
    font-size: 10.5px !important;
    color: #34d399 !important;
    background: rgba(52, 211, 153, 0.12) !important;
    padding: 1px 6px !important;
    border-radius: 4px !important;
}

.v2-btn-remove-file {
    background: transparent !important;
    border: none !important;
    color: #ff7675 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
}

.v2-btn-remove-file:hover {
    background: rgba(255, 118, 117, 0.2) !important;
}

/* ==========================================================================
   NEXT-LEVEL 8K TITANIUM STUDIO ASSET COCKPIT (STEP 4 LUXURY UI/UX)
   ========================================================================== */

/* 1. Readiness 2x2 Tactile Matrix */
.v2-reassure-pills {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
}

@media (min-width: 900px) {
    .v2-reassure-pills {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

.v2-help-pill-choice {
    background: rgba(18, 20, 30, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    padding: 10px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    cursor: pointer !important;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
    user-select: none !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
    position: relative !important;
}

.v2-help-pill-choice:hover {
    border-color: rgba(255, 210, 63, 0.45) !important;
    background: rgba(255, 210, 63, 0.08) !important;
    transform: translateY(-1px) !important;
}

.v2-help-pill-choice.selected,
.v2-help-pill-choice.active {
    background: linear-gradient(135deg, rgba(255, 210, 63, 0.18) 0%, rgba(255, 183, 3, 0.08) 100%) !important;
    border: 1.5px solid #ffd23f !important;
    box-shadow: 0 4px 18px rgba(255, 210, 63, 0.3), inset 0 0 12px rgba(255, 210, 63, 0.12) !important;
}

.v2-help-pill-choice .pill-icon {
    font-size: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.v2-help-pill-choice span:not(.choice-check):not(.pill-icon) {
    font-size: 11.5px !important;
    color: #cbd5e1 !important;
    line-height: 1.25 !important;
    flex-grow: 1 !important;
    text-align: left !important;
}

.v2-help-pill-choice span strong {
    color: #ffffff !important;
    display: block !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.v2-help-pill-choice.selected span strong {
    color: #ffd23f !important;
}

.v2-help-pill-choice .choice-check {
    display: none !important; /* Eliminate ugly dark empty radio circles */
}

.v2-help-pill-choice.selected .choice-check,
.v2-help-pill-choice.active .choice-check {
    display: flex !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    background: #ffd23f !important;
    color: #08080a !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: 0 0 8px rgba(255, 210, 63, 0.8) !important;
}

/* 2. Sleek Creator Asset Hub Container */
.v2-asset-upload-suite {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 10px !important;
    background: rgba(14, 16, 26, 0.75) !important;
    border: 1px solid rgba(255, 210, 63, 0.2) !important;
    border-radius: 16px !important;
    padding: 12px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}

/* 2. Full-Width 1-Tap Brand Asset Dropzone (Zero Overflow Guaranteed) */
.v2-asset-drop-full {
    background: linear-gradient(135deg, rgba(22, 25, 38, 0.9) 0%, rgba(14, 16, 26, 0.95) 100%) !important;
    border: 1.5px dashed rgba(255, 210, 63, 0.35) !important;
    border-radius: 14px !important;
    padding: 12px 14px !important;
    cursor: pointer !important;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
    user-select: none !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.v2-asset-drop-full:hover,
.v2-asset-drop-full.is-dragover {
    border-color: #ffd23f !important;
    background: rgba(255, 210, 63, 0.08) !important;
    box-shadow: 0 0 16px rgba(255, 210, 63, 0.25) !important;
    transform: translateY(-1px) !important;
}

.drop-full-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
}

.drop-full-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(255, 210, 63, 0.15) !important;
    border: 1px solid rgba(255, 210, 63, 0.4) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.drop-full-txt {
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
    flex-grow: 1 !important;
    gap: 1px !important;
    min-width: 0 !important;
}

.drop-full-txt strong {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif) !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.drop-full-txt span {
    font-size: 10.5px !important;
    color: #94a3b8 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.drop-full-badge {
    background: rgba(255, 210, 63, 0.15) !important;
    border: 1px solid rgba(255, 210, 63, 0.4) !important;
    color: #ffd23f !important;
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif) !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

/* 3. Uploaded File Chips */
.v2-uploaded-files-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

.v2-file-chip {
    background: rgba(255, 210, 63, 0.12) !important;
    border: 1px solid rgba(255, 210, 63, 0.35) !important;
    border-radius: 8px !important;
    padding: 4px 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 11px !important;
    color: #ffffff !important;
    max-width: 100% !important;
}

.v2-file-info {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    overflow: hidden !important;
}

.v2-file-name {
    max-width: 130px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-weight: 700 !important;
}

.v2-file-size {
    color: #ffd23f !important;
    font-size: 9.5px !important;
}

.v2-btn-remove-file {
    background: transparent !important;
    border: none !important;
    color: #ff7675 !important;
    font-weight: 900 !important;
    font-size: 11px !important;
    cursor: pointer !important;
    padding: 0 2px !important;
}

/* 4. Conditional Voice Brief Accordion Trigger */
.v2-voice-accordion-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
}

.v2-voice-toggle-btn {
    background: rgba(255, 71, 87, 0.08) !important;
    border: 1px solid rgba(255, 71, 87, 0.28) !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    color: #ffffff !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
}

/* ==========================================================================
   4. PURE 1-BUTTON VOICE INTELLIGENCE (LITERALLY 1 SINGLE BUTTON)
   ========================================================================== */
.v2-voice-single-wrap {
    width: 100% !important;
    box-sizing: border-box !important;
}

.v2-voice-single-wrap audio {
    display: none !important;
}

.v2-omni-voice-btn {
    width: 100% !important;
    min-height: 52px !important;
    box-sizing: border-box !important;
    padding: 10px 14px !important;
    border-radius: 14px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif) !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-touch-callout: none !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* STATE 1: IDLE */
.v2-omni-voice-btn.state-idle {
    background: linear-gradient(135deg, rgba(255, 71, 87, 0.12) 0%, rgba(238, 82, 83, 0.05) 100%) !important;
    border: 1.5px solid rgba(255, 71, 87, 0.35) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}

.v2-omni-voice-btn.state-idle:hover {
    background: rgba(255, 71, 87, 0.2) !important;
    border-color: #ff4757 !important;
    box-shadow: 0 4px 18px rgba(255, 71, 87, 0.3) !important;
    transform: translateY(-1px) !important;
}

.v2-omni-voice-btn.state-idle:active {
    transform: scale(0.98) !important;
}

/* STATE 2: RECORDING (LIVE RED GLOW & PULSE) */
.v2-omni-voice-btn.state-recording {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.25) 0%, rgba(220, 38, 38, 0.15) 100%) !important;
    border: 1.5px solid #ef4444 !important;
    color: #ffffff !important;
    box-shadow: 0 0 24px rgba(239, 68, 68, 0.45) !important;
    animation: omniRecordGlow 1.2s infinite alternate !important;
}

@keyframes omniRecordGlow {
    0% { box-shadow: 0 0 12px rgba(239, 68, 68, 0.3); }
    100% { box-shadow: 0 0 26px rgba(239, 68, 68, 0.65); }
}

/* STATE 3: RECORDED (LUXURY EMERALD PLAY / RE-RECORD) */
.v2-omni-voice-btn.state-recorded {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.16) 0%, rgba(5, 150, 105, 0.08) 100%) !important;
    border: 1.5px solid rgba(16, 185, 129, 0.5) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 18px rgba(16, 185, 129, 0.25) !important;
}

.v2-omni-voice-btn.state-recorded:hover {
    border-color: #10b981 !important;
    box-shadow: 0 4px 22px rgba(16, 185, 129, 0.35) !important;
}

/* Inner elements */
.omni-icon {
    font-size: 18px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

.omni-text {
    flex-grow: 1 !important;
    text-align: left !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.omni-action-pill {
    font-size: 11px !important;
    font-weight: 900 !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
}

.v2-omni-voice-btn.state-idle .omni-action-pill {
    background: rgba(255, 71, 87, 0.25) !important;
    color: #ff7675 !important;
    border: 1px solid rgba(255, 71, 87, 0.4) !important;
}

.v2-omni-voice-btn.state-recording .omni-action-pill {
    background: #ef4444 !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.7) !important;
}

.v2-omni-voice-btn.state-recorded .omni-action-pill {
    background: rgba(255, 71, 87, 0.2) !important;
    color: #ff7675 !important;
    border: 1px solid rgba(255, 71, 87, 0.5) !important;
}

.v2-omni-voice-btn.state-recorded .omni-action-pill:hover {
    background: #ff4757 !important;
    color: #ffffff !important;
}

/* 5. Ultra-Luxury Notes Textarea & Quick Creative Tags */
.v2-notes-field {
    margin-top: 4px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.v2-notes-label-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.v2-notes-label {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif) !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 !important;
}

.notes-label-icon {
    font-size: 14px !important;
}

.notes-optional-pill {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    background: rgba(255, 255, 255, 0.08) !important;
    padding: 2px 7px !important;
    border-radius: 999px !important;
}

.notes-char-hint {
    font-size: 10.5px !important;
    color: #ffd23f !important;
    font-weight: 600 !important;
}

.v2-textarea-wrap {
    position: relative !important;
    width: 100% !important;
}

.v2-textarea {
    width: 100% !important;
    min-height: 64px !important;
    padding: 10px 12px !important;
    font-family: var(--font-sans, 'Plus Jakarta Sans', -apple-system, sans-serif) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    letter-spacing: 0.2px !important;
    color: #f1f5f9 !important;
    background: linear-gradient(135deg, rgba(18, 20, 32, 0.95) 0%, rgba(12, 13, 22, 0.98) 100%) !important;
    border: 1.5px solid rgba(255, 210, 63, 0.28) !important;
    border-radius: 12px !important;
    resize: vertical !important;
    box-sizing: border-box !important;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5) !important;
}

.v2-textarea::placeholder {
    color: #64748b !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
}

.v2-textarea:hover {
    border-color: rgba(255, 210, 63, 0.5) !important;
}

.v2-textarea:focus {
    border-color: #ffd23f !important;
    box-shadow: 0 0 16px rgba(255, 210, 63, 0.3), inset 0 2px 6px rgba(0, 0, 0, 0.6) !important;
    background: rgba(18, 20, 34, 0.98) !important;
    color: #ffffff !important;
}

/* Quick Creative Tag Chips */
.v2-quick-tags-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}

.quick-tag-chip {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    color: #cbd5e1 !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 999px !important;
    padding: 4px 10px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    user-select: none !important;
}

.quick-tag-chip:hover {
    background: rgba(255, 210, 63, 0.15) !important;
    border-color: #ffd23f !important;
    color: #ffd23f !important;
    transform: translateY(-1px) !important;
}

/* 6. Ultra-Luxury Dedicated VIP Producer Guarantee Box */
.v2-reassure-producer-note {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    margin-top: 12px !important;
    background: linear-gradient(135deg, rgba(255, 210, 63, 0.12) 0%, rgba(18, 21, 34, 0.9) 100%) !important;
    border: 1.5px solid rgba(255, 210, 63, 0.35) !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    transition: all 0.25s ease !important;
}

.v2-reassure-producer-note:hover {
    border-color: #ffd23f !important;
    box-shadow: 0 8px 24px rgba(255, 210, 63, 0.25) !important;
}

.producer-avatar-wrap {
    flex-shrink: 0 !important;
}

.producer-halo-avatar-sm {
    position: relative !important;
    width: 38px !important;
    height: 38px !important;
}

.gold-avatar-ring-sm {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    border: 1.5px solid #ffd23f !important;
    object-fit: cover !important;
    box-shadow: 0 0 10px rgba(255, 210, 63, 0.5) !important;
}

.avatar-live-beacon-sm {
    position: absolute !important;
    bottom: -1px !important;
    right: -1px !important;
    width: 9px !important;
    height: 9px !important;
    border-radius: 50% !important;
    background: #10b981 !important;
    border: 1.5px solid #0a0b12 !important;
    box-shadow: 0 0 6px #10b981 !important;
    animation: beaconLivePulse 1.8s infinite !important;
}

@keyframes beaconLivePulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.5; }
}

.producer-copy-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    flex-grow: 1 !important;
    min-width: 0 !important;
    text-align: left !important;
}

.producer-copy-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
}

.producer-role-title {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif) !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    color: #ffd23f !important;
    letter-spacing: 0.2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.producer-status-tag {
    font-size: 10px !important;
    font-weight: 800 !important;
    color: #34d399 !important;
    background: rgba(52, 211, 153, 0.14) !important;
    border: 1px solid rgba(52, 211, 153, 0.3) !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.producer-copy-desc {
    font-size: 11px !important;
    color: #cbd5e1 !important;
    line-height: 1.35 !important;
    margin: 0 !important;
}

/* 7. Mobile Responsive Refinements */
@media (max-width: 640px) {
    .v2-reassure-pills {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }

    .v2-help-pill-choice {
        padding: 8px 8px !important;
        min-height: 42px !important;
    }

    .drop-full-txt strong {
        font-size: 11.5px !important;
    }

    .drop-full-txt span {
        font-size: 9.5px !important;
    }

    .drop-full-badge {
        font-size: 9.5px !important;
        padding: 4px 8px !important;
    }

    .v2-textarea {
        font-size: 13.5px !important;
        min-height: 58px !important;
        padding: 9px 12px !important;
    }

    .producer-role-title {
        font-size: 11.5px !important;
    }

    .producer-copy-desc {
        font-size: 10.5px !important;
    }

    .btn-step4-continue {
        font-size: 12.5px !important;
        min-height: 44px !important;
    }
}

/* 8. Radiant Attention Glow Animation for Brand Assets Dropzone */
.v2-asset-drop-full.glow-highlight-gold {
    border-color: #ffd23f !important;
    background: linear-gradient(135deg, rgba(255, 210, 63, 0.18) 0%, rgba(22, 26, 42, 0.95) 100%) !important;
    animation: goldDropzoneGlowPulse 1.4s infinite alternate ease-in-out !important;
}

@keyframes goldDropzoneGlowPulse {
    0% {
        box-shadow: 0 0 10px rgba(255, 210, 63, 0.35), inset 0 0 6px rgba(255, 210, 63, 0.12);
        border-color: rgba(255, 210, 63, 0.5);
        transform: scale(1);
    }
    100% {
        box-shadow: 0 0 28px rgba(255, 210, 63, 0.8), inset 0 0 16px rgba(255, 210, 63, 0.25);
        border-color: #ffd23f;
        transform: scale(1.015);
    }
}

/* 9. Step 4 Direct Proceed to Step 5 CTA Button */
.btn-step4-continue {
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    min-height: 46px !important;
    background: linear-gradient(135deg, rgba(255, 210, 63, 0.16) 0%, rgba(255, 183, 3, 0.08) 100%) !important;
    border: 1.5px solid #ffd23f !important;
    color: #ffd23f !important;
    border-radius: 12px !important;
    padding: 10px 16px !important;
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif) !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    margin-top: 12px !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.btn-step4-continue:hover {
    background: linear-gradient(135deg, #ffd23f 0%, #ffb703 100%) !important;
    color: #08080a !important;
    box-shadow: 0 8px 26px rgba(255, 210, 63, 0.5) !important;
    transform: translateY(-1px) !important;
}

.btn-step4-continue:active {
    transform: scale(0.98) !important;
}

/* ==========================================================================
   10. ULTRA-LUXURY STUDIO PROOF & 4-STEP TIMELINE ENGINE
   ========================================================================== */
.v2-social-proof-section {
    padding: 70px 0 50px !important;
    position: relative !important;
    background: radial-gradient(ellipse at 50% 0%, rgba(255, 210, 63, 0.05) 0%, transparent 60%) !important;
}

.v2-proof-head-wrap {
    text-align: center !important;
    margin-bottom: 36px !important;
}

.v2-proof-pill-tag {
    display: inline-block !important;
    padding: 4px 14px !important;
    background: rgba(255, 210, 63, 0.12) !important;
    border: 1px solid rgba(255, 210, 63, 0.35) !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #ffd23f !important;
    letter-spacing: 0.8px !important;
    margin-bottom: 12px !important;
}

.v2-proof-heading {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif) !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 0 8px !important;
    letter-spacing: -0.3px !important;
}

.v2-proof-sublead {
    font-size: 13.5px !important;
    color: #cbd5e1 !important;
    margin: 0 auto !important;
    max-width: 500px !important;
    line-height: 1.5 !important;
}

.v2-proof-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
}

.gold-proof-card {
    background: linear-gradient(135deg, rgba(16, 18, 28, 0.95) 0%, rgba(10, 11, 18, 0.98) 100%) !important;
    border: 1.5px solid rgba(255, 210, 63, 0.22) !important;
    border-radius: 20px !important;
    padding: 24px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    backdrop-filter: blur(16px) !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    position: relative !important;
    overflow: hidden !important;
}

.gold-proof-card:hover {
    border-color: #ffd23f !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(255, 210, 63, 0.22) !important;
}

.proof-card-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 4px !important;
}

.v2-proof-icon.gold-glow-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: rgba(255, 210, 63, 0.08) !important;
    border: 1.5px solid rgba(255, 210, 63, 0.35) !important;
    color: #ffd23f !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 0 10px rgba(255, 210, 63, 0.05) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    flex-shrink: 0 !important;
}

.gold-proof-card:hover .gold-glow-icon {
    background: rgba(255, 210, 63, 0.18) !important;
    border-color: #ffd23f !important;
    color: #ffd23f !important;
    box-shadow: 0 0 22px rgba(255, 210, 63, 0.45) !important;
    transform: scale(1.08) !important;
}

.gold-proof-card .g-svg {
    width: 22px !important;
    height: 22px !important;
    stroke: #ffd23f !important;
    fill: none !important;
    stroke-width: 2.2 !important;
    display: block !important;
    transition: all 0.25s ease !important;
}

.gold-proof-card:hover .g-svg {
    filter: drop-shadow(0 0 6px #ffd23f) !important;
}

.proof-micro-badge {
    font-size: 9.5px !important;
    font-weight: 800 !important;
    padding: 3px 9px !important;
    border-radius: 999px !important;
    background: rgba(255, 210, 63, 0.1) !important;
    border: 1px solid rgba(255, 210, 63, 0.28) !important;
    color: #ffd23f !important;
    letter-spacing: 0.6px !important;
}

.proof-title {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.3 !important;
}

.proof-desc {
    font-size: 12px !important;
    line-height: 1.52 !important;
    color: #94a3b8 !important;
    margin: 0 !important;
}

/* How It Works Flow Cards Upgrade */
.v2-flow-card {
    background: linear-gradient(135deg, rgba(16, 18, 28, 0.95) 0%, rgba(10, 11, 18, 0.98) 100%) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    padding: 24px 18px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.v2-flow-card:hover {
    border-color: #ffd23f !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(255, 210, 63, 0.25) !important;
}

.v2-flow-card:hover .flow-icon-circle {
    background: rgba(255, 210, 63, 0.2) !important;
    border-color: #ffd23f !important;
    color: #ffd23f !important;
    box-shadow: 0 0 20px rgba(255, 210, 63, 0.4) !important;
    transform: scale(1.08) !important;
}

.v2-flow-card .g-svg {
    stroke: #ffd23f !important;
    fill: none !important;
    stroke-width: 2.2 !important;
}

.v2-flow-card.highlight-gold {
    border-color: rgba(255, 210, 63, 0.5) !important;
    background: linear-gradient(135deg, rgba(255, 210, 63, 0.12) 0%, rgba(14, 15, 24, 0.98) 100%) !important;
    box-shadow: 0 0 25px rgba(255, 210, 63, 0.18) !important;
}

.flow-step-num {
    font-size: 14px !important;
    font-weight: 900 !important;
    color: #ffd23f !important;
    letter-spacing: 0.5px !important;
}

.flow-step-title {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin-top: 4px !important;
}

.flow-step-desc {
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: #cbd5e1 !important;
}

/* Mobile Responsiveness for Both Sections */
@media (max-width: 900px) {
    .v2-proof-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
}

@media (max-width: 600px) {
    .v2-social-proof-section {
        padding: 45px 0 35px !important;
    }

    .v2-proof-heading {
        font-size: 22px !important;
    }

    .v2-proof-sublead {
        font-size: 12px !important;
    }

    .v2-proof-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .gold-proof-card {
        padding: 16px 14px !important;
        border-radius: 16px !important;
    }

    .proof-title {
        font-size: 14px !important;
    }

    .proof-desc {
        font-size: 11.5px !important;
    }
}

/* ==========================================================================
   11. LUXURY ANIMATED SCROLL INDICATOR CAPSULE (EXACT MATCH TO DESIGN)
   ========================================================================== */
.mw-hero-scroll-wrap {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 18px auto 0 !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Global Floating Right-Edge Side Scroller (Centered, Auto-Fading on Scroll) */
.mw-floating-side-scroller {
    position: fixed !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 9999 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 13px 6px 10px !important;
    width: 28px !important;
    background: rgba(14, 15, 24, 0.94) !important;
    border: 1.5px solid rgba(255, 210, 63, 0.6) !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.8), 0 0 16px rgba(255, 210, 63, 0.25) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s ease, border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease !important;
    animation: sideScrollerPulse 3.2s ease-in-out infinite alternate !important;
    user-select: none !important;
}

.mw-floating-side-scroller.is-scrolled {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(calc(-50% - 24px)) scale(0.85) !important;
}

.mw-floating-side-scroller:hover:not(.is-scrolled) {
    border-color: #ffd23f !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9), 0 0 25px rgba(255, 210, 63, 0.6) !important;
    transform: translateY(-54%) scale(1.06) !important;
    background: rgba(20, 22, 34, 0.98) !important;
}

.mw-floating-side-scroller:active:not(.is-scrolled) {
    transform: translateY(-50%) scale(0.95) !important;
}

.mw-side-scroll-txt {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif) !important;
    font-size: 8px !important;
    font-weight: 900 !important;
    color: #ffd23f !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    writing-mode: vertical-rl !important;
    transform: rotate(180deg) !important;
    line-height: 1 !important;
    margin: 2px 0 2px 0 !important;
}

.mw-side-scroll-mouse {
    width: 13px !important;
    height: 20px !important;
    border-radius: 999px !important;
    border: 1.5px solid #ffd23f !important;
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    padding-top: 3px !important;
    box-sizing: border-box !important;
}

.mw-side-scroll-wheel {
    width: 2.5px !important;
    height: 5px !important;
    background: #ffd23f !important;
    border-radius: 999px !important;
    animation: sideMouseWheel 1.5s ease-in-out infinite !important;
    box-shadow: 0 0 4px #ffd23f !important;
}

.mw-side-scroll-chevrons {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin-top: -2px !important;
}

.mw-side-chevron-svg {
    width: 12px !important;
    height: 12px !important;
    stroke: #ffd23f !important;
    animation: sideChevronBounce 1.5s ease-in-out infinite !important;
}

@keyframes sideScrollerPulse {
    0% { transform: translateY(-50%); }
    100% { transform: translateY(-46%); }
}

@keyframes sideMouseWheel {
    0% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(5px); opacity: 0.6; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes sideChevronBounce {
    0%, 100% { transform: translateY(0); opacity: 0.6; }
    50% { transform: translateY(3px); opacity: 1; }
}

/* Hide any legacy inline scroll pills */
.mw-hero-scroll-wrap, .mw-scroll-indicator-pill, .floating-scroll-cue {
    display: none !important;
}

@media (max-width: 768px) {
    .mw-floating-side-scroller {
        right: 8px !important;
        top: 52% !important;
        transform: translateY(-50%) !important;
        width: 25px !important;
        padding: 11px 4px 8px !important;
        gap: 4px !important;
    }

    .mw-floating-side-scroller.is-scrolled {
        transform: translateY(calc(-50% - 20px)) scale(0.85) !important;
    }

    .mw-side-scroll-txt {
        font-size: 7.5px !important;
        letter-spacing: 1.2px !important;
    }

    .mw-side-scroll-mouse {
        width: 11px !important;
        height: 17px !important;
    }

    .mw-side-chevron-svg {
        width: 10px !important;
        height: 10px !important;
    }
}

/* ==========================================================================
   12. CINEMATIC CHECKOUT NAVIGATION & GLOW SPOTLIGHT ANIMATIONS
   ========================================================================== */
.btn-proceed-to-checkout {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-proceed-to-checkout.is-proceeding {
    background: linear-gradient(135deg, #ffd23f 0%, #ffae00 100%) !important;
    transform: scale(0.98) !important;
    box-shadow: 0 0 30px rgba(255, 210, 63, 0.85) !important;
    pointer-events: none !important;
}

.v2-summary-card.checkout-target-spotlight {
    animation: checkoutSpotlightPulse 2.4s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes checkoutSpotlightPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 210, 63, 0.9), 0 10px 40px rgba(0, 0, 0, 0.9);
        border-color: #ffd23f;
        transform: scale(1.02);
    }
    30% {
        box-shadow: 0 0 45px 12px rgba(255, 210, 63, 0.7), 0 14px 50px rgba(0, 0, 0, 0.95);
        border-color: #ffd23f;
        transform: scale(1.03);
    }
    70% {
        box-shadow: 0 0 30px 6px rgba(255, 210, 63, 0.4), 0 10px 40px rgba(0, 0, 0, 0.85);
        border-color: rgba(255, 210, 63, 0.8);
        transform: scale(1.01);
    }
    100% {
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 15px rgba(255, 210, 63, 0.2);
        border-color: rgba(255, 210, 63, 0.35);
        transform: scale(1);
    }
}

/* ==========================================================================
   CRO ENHANCEMENT #1: 3-ITEM REASSURANCE TRUST CARDS (ZERO HESITATION)
   ========================================================================== */
.v2-post-step5-trust-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.v2-reassure-micro-card {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 12px 14px;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(10px);
}

.v2-reassure-micro-card:hover {
    background: rgba(255, 210, 63, 0.04);
    border-color: rgba(255, 210, 63, 0.25);
    transform: translateY(-2px);
}

.micro-reassure-head {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 5px;
}

.micro-reassure-head .micro-icon {
    font-size: 14px;
}

.micro-reassure-head strong {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: 13px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.01em;
}

.v2-reassure-micro-card p {
    font-size: 11.5px;
    line-height: 1.45;
    color: #94a3b8;
    margin: 0;
}

@media (max-width: 768px) {
    .v2-post-step5-trust-grid {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-top: 16px;
        padding-top: 14px;
    }
    .v2-reassure-micro-card {
        padding: 10px 12px;
    }
}

/* ==========================================================================
   CRO ENHANCEMENT #2: MOBILE FLOATING STICKY CHECKOUT BAR (320px - 768px)
   ========================================================================== */
.mobile-sticky-order-bar {
    display: none;
}

@media (max-width: 768px) {
    .mobile-sticky-order-bar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 10005 !important;
        background: linear-gradient(180deg, rgba(13, 16, 25, 0.96) 0%, rgba(6, 8, 14, 0.99) 100%);
        backdrop-filter: blur(28px) saturate(200%);
        -webkit-backdrop-filter: blur(28px) saturate(200%);
        border-top: 1px solid rgba(255, 210, 63, 0.35);
        box-shadow: 0 -10px 32px rgba(0, 0, 0, 0.9), 0 -1px 0 rgba(255, 255, 255, 0.08) inset;
        padding: 10px 14px max(12px, env(safe-area-inset-bottom, 12px));
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        box-sizing: border-box;
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
    }

    .mobile-sticky-order-bar::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1.5px;
        background: linear-gradient(90deg, transparent 0%, rgba(255, 210, 63, 0.7) 20%, rgba(255, 240, 160, 1) 50%, rgba(255, 210, 63, 0.7) 80%, transparent 100%);
        pointer-events: none;
    }

    .mobile-sticky-order-bar.is-hidden {
        transform: translateY(120%);
        opacity: 0;
        pointer-events: none;
    }

    .mobile-bar-left {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        min-width: 0;
        flex: 1 1 auto;
    }

    .bar-token-label {
        font-size: 9px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #ffd23f;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        background: rgba(255, 210, 63, 0.1);
        border: 1px solid rgba(255, 210, 63, 0.28);
        padding: 1.5px 6px;
        border-radius: 4px;
        width: fit-content;
        margin-bottom: 2px;
        white-space: nowrap;
        line-height: 1.2;
    }

    .bar-token-label::before {
        content: "";
        display: inline-block;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #ffd23f;
        box-shadow: 0 0 8px #ffd23f;
        animation: pulseTokenBeacon 1.8s infinite ease-in-out;
    }

    .bar-price-row {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: nowrap;
        min-width: 0;
    }

    .bar-token-val {
        font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
        font-size: 19px;
        font-weight: 900;
        color: #ffffff;
        letter-spacing: -0.02em;
        line-height: 1;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
        white-space: nowrap;
    }

    .bar-total-val {
        font-size: 10.5px;
        font-weight: 600;
        color: #94a3b8;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.08);
        padding: 2px 6px;
        border-radius: 4px;
        letter-spacing: -0.01em;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        line-height: 1.2;
    }

    .mobile-bar-lock-btn {
        flex-shrink: 0;
        background: linear-gradient(135deg, #FFE169 0%, #F59E0B 50%, #D97706 100%);
        color: #07080b;
        font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
        font-size: 13px;
        font-weight: 900;
        letter-spacing: -0.01em;
        border: 1px solid rgba(255, 240, 160, 0.5);
        border-radius: 10px;
        padding: 9.5px 14px;
        box-shadow: 0 4px 18px rgba(245, 158, 11, 0.42), inset 0 1px 1.5px rgba(255, 255, 255, 0.75), inset 0 -1px 2px rgba(0, 0, 0, 0.2);
        white-space: nowrap;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, filter 0.2s ease;
    }

    .mobile-bar-lock-btn:active {
        transform: scale(0.96);
        filter: brightness(0.95);
        box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.5);
    }

    .mobile-bar-lock-btn .bar-btn-arrow {
        display: inline-block;
        transition: transform 0.2s ease;
    }

    .mobile-bar-lock-btn:hover .bar-btn-arrow,
    .mobile-bar-lock-btn:active .bar-btn-arrow {
        transform: translateX(2px);
    }
}

@media (max-width: 360px) {
    .mobile-sticky-order-bar {
        padding: 8px 10px max(10px, env(safe-area-inset-bottom, 10px));
        gap: 6px;
    }
    .bar-token-val {
        font-size: 17px;
    }
    .bar-total-val {
        font-size: 9.5px;
        padding: 1px 4px;
    }
    .mobile-bar-lock-btn {
        font-size: 12px;
        padding: 8.5px 10px;
        gap: 4px;
    }
}

/* ==========================================================================
   CRO ENHANCEMENT #3: SMOOTH STEP WIZARD AUTO-FOCUS HALO PULSE
   ========================================================================== */
.step-glow-focus {
    animation: stepHaloGlow 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes stepHaloGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 210, 63, 0.7), 0 0 30px rgba(255, 210, 63, 0.3);
        border-color: #ffd23f;
        transform: scale(1.015);
    }
    50% {
        box-shadow: 0 0 35px 4px rgba(255, 210, 63, 0.35), 0 0 15px rgba(255, 210, 63, 0.2);
        border-color: rgba(255, 210, 63, 0.7);
        transform: scale(1.008);
    }
    100% {
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
        border-color: rgba(255, 210, 63, 0.25);
        transform: scale(1);
    }
}

/* ==========================================================================
   22. DEDICATED WEB PLATFORMS & NEXT.JS SHOWCASE ENGINE (web-platforms.html)
   ========================================================================== */
.web-showcase-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    margin-bottom: 40px;
}

.web-card {
    display: flex;
    flex-direction: column;
    background: rgba(14, 14, 20, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 22px;
    overflow: hidden;
    backdrop-filter: blur(16px);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6);
    position: relative;
}

.web-card:hover {
    border-color: rgba(255, 210, 63, 0.45);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 35px rgba(255, 210, 63, 0.15);
    transform: translateY(-4px);
}

/* Realistic Browser Mockup Frame */
.web-browser-frame {
    background: #08080c;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
}

.browser-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: rgba(22, 22, 30, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    gap: 12px;
}

.browser-dots {
    display: flex;
    align-items: center;
    gap: 6px;
}

.browser-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.browser-dot.red { background: #ff5f56; }
.browser-dot.yellow { background: #ffbd2e; }
.browser-dot.green { background: #27c93f; }

.browser-url-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px;
    background: rgba(10, 10, 15, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    color: #94a3b8;
    font-size: 11px;
    font-family: monospace;
    max-width: 280px;
    width: 100%;
    justify-content: center;
}

.browser-ssl-lock {
    width: 10px;
    height: 10px;
    color: #00e676;
    flex-shrink: 0;
}

.browser-live-badge {
    font-size: 10px;
    font-weight: 700;
    color: #ffd23f;
    background: rgba(255, 210, 63, 0.12);
    border: 1px solid rgba(255, 210, 63, 0.3);
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

/* Web Media Box with Parallax Scroll Preview */
.web-media-box {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #000;
}

.web-screenshot-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), filter 0.8s ease;
    filter: brightness(0.94) contrast(1.04);
}

.web-card:hover .web-screenshot-img {
    transform: scale(1.03);
    filter: brightness(1) contrast(1.06);
}

.web-top-metrics-overlay {
    position: absolute;
    top: 14px;
    left: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    pointer-events: none;
    z-index: 2;
}

.web-metric-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: rgba(10, 10, 15, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    backdrop-filter: blur(12px);
}

.web-metric-pill.speed {
    border-color: rgba(0, 230, 118, 0.4);
    color: #00e676;
    background: rgba(0, 230, 118, 0.12);
}

.web-metric-pill.lift {
    border-color: rgba(255, 210, 63, 0.45);
    color: #ffd23f;
    background: rgba(255, 210, 63, 0.14);
}

/* Web Meta Info Panel */
.web-info-panel {
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: #0f0f15;
    flex-grow: 1;
    justify-content: space-between;
}

.web-meta-top {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.web-cat-label {
    color: #ffd23f;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.web-card-title {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: 1.3rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.25;
    margin: 0;
}

.web-card-sub {
    font-size: 0.88rem;
    color: #cbd5e1;
    line-height: 1.5;
    margin: 0;
}

/* Tech Stack Tags */
.web-tech-stack-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.tech-tag-chip {
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 3px 9px;
    border-radius: 6px;
}

/* Web Card Bottom Action Bar */
.web-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    flex-wrap: wrap;
}

.btn-web-order {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    background: linear-gradient(135deg, #ffd23f 0%, #ffb703 100%);
    color: #08080a;
    font-weight: 800;
    font-size: 12.5px;
    border-radius: 999px;
    text-decoration: none;
    transition: all 0.25s ease;
    box-shadow: 0 4px 15px rgba(255, 210, 63, 0.3);
}

.btn-web-order:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 210, 63, 0.45);
    color: #08080a;
}

.btn-web-wa {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(37, 211, 102, 0.1);
    border: 1px solid rgba(37, 211, 102, 0.3);
    color: #25d366;
    font-weight: 700;
    font-size: 12px;
    border-radius: 999px;
    text-decoration: none;
    transition: all 0.25s ease;
}

.btn-web-wa:hover {
    background: #25d366;
    color: #08080a;
    transform: translateY(-2px);
}

/* Comparison Matrix Section */
.web-comparison-section {
    padding: 60px 0 80px;
}

.web-compare-table-wrap {
    background: rgba(14, 14, 20, 0.85);
    border: 1px solid rgba(255, 210, 63, 0.25);
    border-radius: 24px;
    padding: 30px;
    backdrop-filter: blur(20px);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.7);
    overflow-x: auto;
}

.web-compare-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    min-width: 600px;
}

.web-compare-table th,
.web-compare-table td {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 14px;
}

.web-compare-table th {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-weight: 800;
    color: #ffffff;
    font-size: 16px;
}

.web-compare-table th.meeways-col {
    color: #ffd23f;
    background: rgba(255, 210, 63, 0.08);
    border-radius: 12px 12px 0 0;
}

.web-compare-table td.meeways-col {
    background: rgba(255, 210, 63, 0.04);
    font-weight: 700;
    color: #ffffff;
}

.web-compare-table tr:last-child td {
    border-bottom: none;
}

.check-green {
    color: #00e676;
    font-weight: 800;
}

.cross-red {
    color: #ff4757;
}

@media (max-width: 991px) {
    .web-showcase-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    .web-card-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .btn-web-order, .btn-web-wa {
        width: 100%;
        justify-content: center;
    }
}

/* 23. SALESMAN VS WEBSITE COMPARISON MONOLITH */
.salesman-vs-web-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin: 36px 0 20px;
}

.compare-sales-card {
    background: rgba(16, 16, 24, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 24px;
    backdrop-filter: blur(14px);
    position: relative;
    overflow: hidden;
}

.compare-sales-card.traditional {
    border-color: rgba(255, 71, 87, 0.25);
    background: linear-gradient(180deg, rgba(255, 71, 87, 0.04) 0%, rgba(16, 16, 24, 0.8) 100%);
}

.compare-sales-card.meeways-smart {
    border-color: rgba(255, 210, 63, 0.45);
    background: linear-gradient(180deg, rgba(255, 210, 63, 0.08) 0%, rgba(16, 16, 24, 0.9) 100%);
    box-shadow: 0 10px 35px rgba(255, 210, 63, 0.12);
}

.sales-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.sales-card-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sales-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sales-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    color: #cbd5e1;
    line-height: 1.45;
}

.sales-feature-item strong {
    color: #ffffff;
}

.sales-feature-item .icon-bad {
    color: #ff4757;
    font-weight: 800;
    flex-shrink: 0;
}

.sales-feature-item .icon-good {
    color: #00e676;
    font-weight: 800;
    flex-shrink: 0;
}

/* 24. INTERACTIVE ROI CALCULATOR */
.roi-calc-container {
    background: rgba(14, 14, 22, 0.85);
    border: 1px solid rgba(255, 210, 63, 0.35);
    border-radius: 24px;
    padding: 36px;
    backdrop-filter: blur(20px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 40px rgba(255, 210, 63, 0.1);
    margin: 40px 0;
}

.roi-calc-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 36px;
    align-items: center;
}

.roi-slider-group {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.roi-slider-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.roi-slider-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #e2e8f0;
    font-weight: 600;
}

.roi-slider-value {
    color: #ffd23f;
    font-weight: 800;
    font-size: 16px;
    font-family: monospace;
}

.roi-range-input {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    outline: none;
    cursor: pointer;
}

.roi-range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffd23f;
    box-shadow: 0 0 12px rgba(255, 210, 63, 0.8);
    cursor: pointer;
    transition: transform 0.15s ease;
}

.roi-range-input::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.roi-result-card {
    background: linear-gradient(135deg, rgba(255, 210, 63, 0.12) 0%, rgba(20, 20, 30, 0.95) 100%);
    border: 1px solid rgba(255, 210, 63, 0.5);
    border-radius: 20px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
}

.roi-result-num {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    font-weight: 900;
    color: #00e676;
    line-height: 1.1;
    text-shadow: 0 0 25px rgba(0, 230, 118, 0.4);
}

.roi-result-lbl {
    font-size: 13px;
    font-weight: 700;
    color: #ffd23f;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* 25. BUSINESS PACKAGES MATRIX (BEST INDIAN PRICING) */
.pkg-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 40px 0;
}

.pkg-card {
    background: rgba(14, 14, 20, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 22px;
    padding: 32px 26px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.35s ease;
    backdrop-filter: blur(16px);
    position: relative;
}

.pkg-card.featured {
    border-color: rgba(255, 210, 63, 0.6);
    background: linear-gradient(180deg, rgba(255, 210, 63, 0.1) 0%, rgba(14, 14, 20, 0.95) 100%);
    box-shadow: 0 15px 45px rgba(255, 210, 63, 0.18);
    transform: scale(1.03);
}

.pkg-featured-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #ffd23f 0%, #ffb703 100%);
    color: #08080a;
    font-size: 11px;
    font-weight: 900;
    padding: 4px 14px;
    border-radius: 999px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(255, 210, 63, 0.4);
}

.pkg-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 6px;
}

.pkg-desc {
    font-size: 13px;
    color: #94a3b8;
    margin-bottom: 20px;
    line-height: 1.45;
}

.pkg-price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pkg-price {
    font-size: 1.85rem;
    font-weight: 900;
    color: #ffd23f;
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
}

.pkg-price-sub {
    font-size: 12px;
    color: #94a3b8;
}

.pkg-list {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pkg-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #cbd5e1;
}

.pkg-item svg {
    color: #00e676;
    flex-shrink: 0;
}

@media (max-width: 991px) {
    .salesman-vs-web-grid {
        grid-template-columns: 1fr;
    }
    .roi-calc-grid {
        grid-template-columns: 1fr;
    }
    .pkg-cards-grid {
        grid-template-columns: 1fr;
    }
    .pkg-card.featured {
        transform: none;
    }
}

/* 26. ULTRA-LUXURY DUAL DEVICE HERO STAGE */
.hero-dual-device-stage {
    position: relative;
    max-width: 1080px;
    margin: 40px auto 30px;
    perspective: 1000px;
}

.hero-macbook-wrap {
    position: relative;
    background: #0d0e15;
    border: 1px solid rgba(255, 210, 63, 0.35);
    border-radius: 24px;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.9), 0 0 50px rgba(255, 210, 63, 0.12);
    overflow: hidden;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.hero-macbook-wrap:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.95), 0 0 60px rgba(255, 210, 63, 0.2);
}

.hero-device-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: rgba(14, 14, 22, 0.95);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hero-device-screen {
    position: relative;
    aspect-ratio: 16 / 9;
    max-height: 500px;
    overflow: hidden;
    background: #000;
}

.hero-device-screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(0.95);
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-macbook-wrap:hover .hero-device-screen img {
    transform: scale(1.03);
}

/* Floating iPhone Mockup Overlap */
.hero-floating-iphone {
    position: absolute;
    right: -24px;
    bottom: -30px;
    width: 260px;
    background: #08080c;
    border: 3px solid rgba(255, 210, 63, 0.5);
    border-radius: 36px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.95), 0 0 35px rgba(255, 210, 63, 0.25);
    overflow: hidden;
    z-index: 15;
    animation: floatPhone 6s ease-in-out infinite;
}

@keyframes floatPhone {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-12px); }
}

.iphone-dynamic-island {
    width: 90px;
    height: 20px;
    background: #000;
    border-radius: 999px;
    margin: 8px auto 6px;
}

.iphone-screen-media {
    position: relative;
    aspect-ratio: 9 / 16;
    height: 340px;
    overflow: hidden;
}

.iphone-screen-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.iphone-live-toast {
    position: absolute;
    bottom: 14px;
    left: 10px;
    right: 10px;
    background: rgba(14, 14, 22, 0.92);
    border: 1px solid rgba(0, 230, 118, 0.4);
    border-radius: 12px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
}

.iphone-toast-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00e676;
    box-shadow: 0 0 8px #00e676;
    flex-shrink: 0;
}

.iphone-toast-text {
    font-size: 10.5px;
    color: #e2e8f0;
    line-height: 1.25;
}

.iphone-toast-text strong {
    color: #00e676;
}

/* Floating Status Pills on Hero Device */
.hero-floating-badge {
    position: absolute;
    background: rgba(10, 10, 18, 0.88);
    border: 1px solid rgba(255, 210, 63, 0.4);
    border-radius: 999px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 210, 63, 0.15);
    backdrop-filter: blur(14px);
    z-index: 10;
}

.hero-floating-badge.speed {
    top: 24px;
    left: 24px;
    border-color: rgba(0, 230, 118, 0.4);
}

.hero-floating-badge.leads {
    bottom: 24px;
    left: 24px;
    border-color: rgba(255, 210, 63, 0.5);
}

@media (max-width: 991px) {
    .hero-floating-iphone {
        display: none !important;
    }
    .hero-floating-badge {
        position: static;
        margin: 8px;
        display: inline-flex;
    }
    .hero-device-screen {
        aspect-ratio: 16 / 10;
    }
}

/* 27. HUMANIZED DESIGN STYLES */
.human-chat-simulation-card {
    background: rgba(14, 20, 18, 0.95);
    border: 1px solid rgba(0, 230, 118, 0.35);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8), 0 0 30px rgba(0, 230, 118, 0.1);
    max-width: 480px;
    margin: 24px auto 0;
    text-align: left;
}

.chat-sim-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 14px;
}

.chat-sim-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #00e676;
    color: #08080a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 16px;
}

.chat-sim-name {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
}

.chat-sim-status {
    font-size: 11px;
    color: #00e676;
    display: flex;
    align-items: center;
    gap: 4px;
}

.chat-bubble-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chat-bubble {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.4;
}

.chat-bubble.customer {
    background: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}

.chat-bubble.business {
    background: #005c4b;
    color: #ffffff;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}

.chat-time {
    font-size: 10px;
    opacity: 0.7;
    margin-top: 4px;
    display: block;
    text-align: right;
}

/* Founder / Developer Authentic Note */
.human-founder-note {
    background: linear-gradient(135deg, rgba(255, 210, 63, 0.07) 0%, rgba(14, 14, 20, 0.9) 100%);
    border: 1px solid rgba(255, 210, 63, 0.35);
    border-radius: 20px;
    padding: 28px;
    margin: 40px auto;
    max-width: 900px;
    position: relative;
}

.founder-note-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.founder-avatar-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #ffd23f;
    color: #08080a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.founder-title-wrap h4 {
    color: #ffffff;
    font-size: 17px;
    margin: 0 0 2px;
}

.founder-title-wrap span {
    font-size: 12.5px;
    color: #ffd23f;
}

.founder-quote-text {
    font-size: 14.5px;
    line-height: 1.6;
    color: #cbd5e1;
    font-style: italic;
    margin: 0;
}

/* Human Process Steps */
.human-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 36px 0;
}

.human-step-card {
    background: rgba(16, 16, 24, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 24px;
    position: relative;
}

.human-step-num {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: 2.2rem;
    font-weight: 900;
    color: rgba(255, 210, 63, 0.25);
    margin-bottom: 6px;
}

.human-step-card h4 {
    color: #ffffff;
    font-size: 17px;
    margin: 0 0 8px;
}

.human-step-card p {
    color: #94a3b8;
    font-size: 13.5px;
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 768px) {
    .human-steps-grid {
        grid-template-columns: 1fr;
    }
}

/* 28. LIVE DEMO ACTION BUTTON & INTERACTIVE DEMO VIEWER MODAL */
.btn-web-demo {
    background: rgba(0, 229, 255, 0.1);
    border: 1px solid rgba(0, 229, 255, 0.5);
    color: #00e5ff;
    padding: 10px 18px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.25s ease;
    text-decoration: none;
}

.btn-web-demo:hover {
    background: rgba(0, 229, 255, 0.22);
    border-color: #00e5ff;
    box-shadow: 0 0 16px rgba(0, 229, 255, 0.4);
    transform: translateY(-2px);
}

.demo-lightbox-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.demo-lightbox-modal.is-active {
    opacity: 1;
    visibility: visible;
}

.demo-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(5, 6, 10, 0.88);
    backdrop-filter: blur(16px);
}

.demo-modal-container {
    position: relative;
    width: 100%;
    max-width: 1000px;
    height: 85vh;
    background: #0d0f18;
    border: 1px solid rgba(255, 210, 63, 0.4);
    border-radius: 24px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.95), 0 0 50px rgba(255, 210, 63, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 10;
}

.demo-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px;
    background: rgba(14, 16, 24, 0.98);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.demo-modal-title {
    font-size: 14px;
    font-weight: 800;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
}

.demo-view-toggles {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.demo-toggle-btn {
    background: transparent;
    border: none;
    color: #94a3b8;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.demo-toggle-btn.active {
    background: #ffd23f;
    color: #08080a;
}

.demo-modal-close-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.demo-modal-close-btn:hover {
    background: #ff4757;
    border-color: #ff4757;
}

.demo-frame-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #06070a;
    padding: 16px;
    overflow: hidden;
}

.demo-iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 14px;
    background: #090a10;
    transition: max-width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.demo-iframe.is-mobile-view {
    max-width: 390px;
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.9), 0 0 20px rgba(255, 210, 63, 0.2);
    border: 3px solid rgba(255, 210, 63, 0.4);
}

@media (max-width: 768px) {
    .demo-modal-container {
        height: 94vh;
    }
    .demo-view-toggles {
        display: none;
    }
}

/* 29. ULTRA-PREMIUM AMBIENT VIDEO BACKGROUND & CLEAN LUXURY MOTION */
.bg-video-ambient-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.bg-ambient-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.28;
    filter: saturate(1.2) contrast(1.15) brightness(0.9);
}

.bg-video-overlay-gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 30%, rgba(8, 8, 12, 0.4) 0%, rgba(8, 8, 12, 0.95) 85%);
}

.hero-screen-video-loop {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.card-video-overlay-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(14, 16, 24, 0.85);
    border: 1px solid rgba(255, 210, 63, 0.6);
    color: #ffd23f;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 210, 63, 0.3);
    backdrop-filter: blur(8px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0.85;
}

.web-media-box:hover .card-video-overlay-play {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 1;
    background: #ffd23f;
    color: #08080a;
    box-shadow: 0 12px 35px rgba(255, 210, 63, 0.5);
}

/* 30. HYPER-ANIMATED EXCLUSIVE BENTO GRID & LASER SHIELD SYSTEM */
.card-laser-scan {
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 210, 63, 0.25), transparent);
    transform: skewX(-25deg);
    pointer-events: none;
    transition: none;
}

.web-card:hover .card-laser-scan,
.hyper-bento-card:hover .card-laser-scan {
    animation: laserScanSweep 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes laserScanSweep {
    0% { left: -100%; }
    100% { left: 200%; }
}

.hyper-bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
    margin: 40px 0;
}

.hyper-bento-card {
    position: relative;
    background: rgba(13, 15, 24, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    padding: 30px;
    overflow: hidden;
    backdrop-filter: blur(20px);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.hyper-bento-card:hover {
    border-color: rgba(255, 210, 63, 0.4);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(255, 210, 63, 0.1);
    transform: translateY(-4px);
}

.hyper-bento-card.span-7 { grid-column: span 7; }
.hyper-bento-card.span-5 { grid-column: span 5; }
.hyper-bento-card.span-4 { grid-column: span 4; }
.hyper-bento-card.span-8 { grid-column: span 8; }
.hyper-bento-card.span-6 { grid-column: span 6; }
.hyper-bento-card.span-12 { grid-column: span 12; }

@media (max-width: 991px) {
    .hyper-bento-card.span-7,
    .hyper-bento-card.span-5,
    .hyper-bento-card.span-4,
    .hyper-bento-card.span-8,
    .hyper-bento-card.span-6,
    .hyper-bento-card.span-12 {
        grid-column: span 12;
    }
}

.bento-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(255, 210, 63, 0.12);
    border: 1px solid rgba(255, 210, 63, 0.3);
    font-size: 22px;
    margin-bottom: 18px;
}

.bento-card-title {
    font-size: 20px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 8px;
}

.bento-card-desc {
    font-size: 14px;
    color: #94a3b8;
    line-height: 1.55;
    margin: 0 0 20px;
}

.bento-live-meter-wrap {
    background: rgba(8, 8, 14, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 14px 18px;
}

.bento-meter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.bento-meter-title {
    font-size: 12px;
    font-weight: 700;
    color: #cbd5e1;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bento-meter-val {
    font-size: 13px;
    font-weight: 900;
    color: #00e676;
}

.bento-meter-track {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}

.bento-meter-fill {
    height: 100%;
    background: linear-gradient(90deg, #ffd23f, #00e676);
    border-radius: 999px;
    box-shadow: 0 0 12px #00e676;
    animation: meterFillPulse 3s ease-in-out infinite;
}

@keyframes meterFillPulse {
    0%, 100% { width: 92%; }
    50% { width: 99.8%; }
}

/* Floating Metric Hologram Badges */
.floating-hologram-chip {
    position: absolute;
    background: rgba(14, 16, 26, 0.9);
    border: 1px solid rgba(0, 230, 118, 0.4);
    border-radius: 14px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9), 0 0 20px rgba(0, 230, 118, 0.2);
    backdrop-filter: blur(14px);
    z-index: 10;
    animation: floatHolo 5s ease-in-out infinite;
}

@keyframes floatHolo {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

/* ==========================================================================
   31. AWWWARDS CINEMATIC ONE-PAGE DIGITAL STUDIO EXPERIENCE (BESPOKE ENGINE)
   ========================================================================== */

/* Fixed 3D WebGL Canvas Layer */
.webgl-experience-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1;
    display: block;
}

/* Film Grain Overlay */
.exp-film-grain {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* Left Vertical Progress Spine */
.exp-progress-spine {
    position: fixed;
    top: 50%;
    left: 28px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    z-index: 900;
    pointer-events: none;
}

.exp-progress-track {
    width: 2px;
    height: 120px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.exp-progress-bar {
    width: 100%;
    height: 0%;
    background: #ffd23f;
    box-shadow: 0 0 10px #ffd23f;
    transition: height 0.1s linear;
}

.exp-progress-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #64748b;
    text-transform: uppercase;
}

/* 01 — HERO CINEMATIC STAGE */
.exp-hero-wrap {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 130px 0 60px;
    overflow: hidden;
    background: transparent;
    z-index: 2;
}

.exp-hero-ambient {
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 1200px;
    height: 800px;
    background: radial-gradient(circle, rgba(255, 210, 63, 0.08) 0%, rgba(0, 229, 255, 0.04) 40%, transparent 70%);
    pointer-events: none;
    filter: blur(80px);
}

.exp-meta-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 18px;
    margin-bottom: 30px;
}

.exp-meta-tag {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ffd23f;
    display: flex;
    align-items: center;
    gap: 8px;
}

.exp-meta-tag .live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00e676;
    box-shadow: 0 0 8px #00e676;
    animation: livePulseDot 2s infinite;
}

.exp-hero-center {
    margin: auto 0;
}

.hero-giant-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(52px, 9.5vw, 136px);
    font-weight: 900;
    line-height: 0.92;
    letter-spacing: -0.04em;
    color: #ffffff;
    text-transform: uppercase;
    margin: 0 0 35px;
}

.hero-giant-title .title-row {
    display: block;
    overflow: hidden;
}

.hero-giant-title .kinetic-word {
    display: inline-block;
    transform: translateY(0);
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-giant-title .accent-gradient {
    background: linear-gradient(135deg, #ffffff 20%, #ffd23f 75%, #ffb703 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-giant-title .outline-word {
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.35);
    -webkit-text-fill-color: transparent;
    transition: -webkit-text-stroke 0.3s ease;
}

.hero-giant-title .outline-word:hover {
    -webkit-text-stroke: 1.5px #ffd23f;
    -webkit-text-fill-color: rgba(255, 210, 63, 0.1);
}

.exp-hero-sub-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: flex-end;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 30px;
}

@media (max-width: 768px) {
    .exp-hero-sub-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.exp-hero-lead-text {
    font-size: clamp(16px, 1.8vw, 22px);
    font-weight: 400;
    line-height: 1.5;
    color: #cbd5e1;
    margin: 0;
}

.exp-hero-lead-text strong {
    color: #ffffff;
    font-weight: 700;
}

.exp-hero-cta-box {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: flex-end;
}

@media (max-width: 768px) {
    .exp-hero-cta-box {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

.btn-exp-primary {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 32px;
    background: #ffd23f;
    color: #050508;
    border-radius: 999px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 10px 30px rgba(255, 210, 63, 0.25);
}

.btn-exp-primary:hover {
    transform: translateY(-2px) scale(1.03);
    background: #ffffff;
    box-shadow: 0 14px 40px rgba(255, 255, 255, 0.3);
}

.btn-exp-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 28px;
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-exp-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #ffd23f;
    color: #ffd23f;
}

/* 02 — POSITIONING MANIFESTO */
.exp-statement-section {
    padding: 140px 0;
    position: relative;
    background: rgba(7, 8, 14, 0.45);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
    z-index: 2;
}

.statement-laser-line {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #ffd23f, transparent);
    margin-bottom: 50px;
    opacity: 0.4;
}

.statement-giant-quote {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(38px, 6.2vw, 84px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: #ffffff;
    max-width: 1200px;
    margin: 0 0 50px;
}

.statement-giant-quote .dim-word {
    color: #334155;
    transition: color 0.4s ease;
}

.statement-giant-quote:hover .dim-word {
    color: #64748b;
}

.statement-giant-quote .highlight-gold {
    color: #ffd23f;
}

.statement-specs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 40px;
}

@media (max-width: 991px) {
    .statement-specs-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 576px) {
    .statement-specs-grid {
        grid-template-columns: 1fr;
    }
}

.spec-node {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.spec-num {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(28px, 3.5vw, 42px);
    font-weight: 900;
    color: #ffffff;
    letter-spacing: -0.02em;
}

.spec-num .unit {
    color: #00e676;
    font-size: 0.6em;
}

.spec-label {
    font-size: 13px;
    font-weight: 600;
    color: #94a3b8;
    line-height: 1.4;
}

/* 03 — SERVICES KINETIC MORPHING SYSTEM */
.exp-services-section {
    padding: 140px 0;
    background: transparent;
    position: relative;
    z-index: 2;
}

.exp-section-eyebrow {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 3px;
    color: #ffd23f;
    text-transform: uppercase;
    margin-bottom: 20px;
    display: block;
}

.exp-section-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(32px, 4.5vw, 64px);
    font-weight: 900;
    letter-spacing: -0.03em;
    color: #ffffff;
    margin: 0 0 60px;
}

.services-kinetic-matrix {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.service-kinetic-row {
    position: relative;
    background: rgba(13, 15, 24, 0.65);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 40px 48px;
    display: grid;
    grid-template-columns: 80px 1.4fr 1.6fr 180px;
    align-items: center;
    gap: 30px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

@media (max-width: 991px) {
    .service-kinetic-row {
        grid-template-columns: 1fr;
        padding: 30px;
        gap: 20px;
    }
}

.service-kinetic-row:hover {
    background: rgba(20, 24, 38, 0.9);
    border-color: rgba(255, 210, 63, 0.5);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9), 0 0 30px rgba(255, 210, 63, 0.1);
    transform: translateX(8px);
}

.service-idx {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 24px;
    font-weight: 900;
    color: #ffd23f;
    opacity: 0.8;
}

.service-name {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(22px, 2.5vw, 32px);
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    line-height: 1.15;
}

.service-summary {
    font-size: 15px;
    color: #94a3b8;
    line-height: 1.6;
    margin: 0;
}

.service-action-col {
    display: flex;
    justify-content: flex-end;
}

.btn-service-explore {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    background: rgba(255, 210, 63, 0.1);
    border: 1px solid rgba(255, 210, 63, 0.35);
    color: #ffd23f;
    border-radius: 999px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.25s ease;
}

.service-kinetic-row:hover .btn-service-explore {
    background: #ffd23f;
    color: #08080a;
}

/* 04 — PROCESS HORIZONTAL STREAM */
.exp-process-section {
    padding: 140px 0;
    background: rgba(8, 9, 16, 0.45);
    backdrop-filter: blur(8px);
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    z-index: 2;
}

.process-timeline-track {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
    position: relative;
    margin-top: 50px;
}

@media (max-width: 991px) {
    .process-timeline-track {
        grid-template-columns: 1fr;
    }
}

.process-node-card {
    position: relative;
    background: rgba(14, 16, 26, 0.75);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 320px;
    transition: all 0.35s ease;
}

.process-node-card:hover {
    border-color: #ffd23f;
    background: rgba(20, 24, 38, 0.95);
    transform: translateY(-6px);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.8), 0 0 25px rgba(255, 210, 63, 0.12);
}

.process-step-num {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 36px;
    font-weight: 900;
    color: #ffd23f;
}

.process-step-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: #ffffff;
    margin: 14px 0 8px;
}

.process-step-desc {
    font-size: 13.5px;
    color: #94a3b8;
    line-height: 1.5;
    margin: 0;
}

.process-step-tag {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #00e676;
    text-transform: uppercase;
}

/* 05 — SELECTED WORK GALLERY (EDITORIAL MAGAZINE STANDARD) */
.exp-work-section {
    padding: 140px 0;
    background: transparent;
    position: relative;
    z-index: 2;
}

.gallery-editorial-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin-top: 50px;
}

@media (max-width: 991px) {
    .gallery-editorial-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

.editorial-project-card {
    position: relative;
    background: rgba(13, 15, 24, 0.75);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 24px;
    overflow: hidden;
    transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    transform-style: preserve-3d;
}

.editorial-project-card:hover {
    border-color: rgba(255, 210, 63, 0.7);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.95), 0 0 45px rgba(255, 210, 63, 0.25), inset 0 0 20px rgba(255, 210, 63, 0.05);
    transform: translateY(-8px) scale(1.015);
}

.project-browser-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000000;
}

.project-browser-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.editorial-project-card:hover .project-browser-frame img {
    transform: scale(1.05);
}

.project-hover-curtain {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(5, 6, 10, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.editorial-project-card:hover .project-hover-curtain {
    opacity: 1;
}

.btn-curtain-play {
    padding: 14px 28px;
    border-radius: 999px;
    background: #ffd23f;
    color: #08080a;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
    transform: scale(0.9);
    transition: transform 0.25s ease;
}

.editorial-project-card:hover .btn-curtain-play {
    transform: scale(1);
}

.project-meta-box {
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.project-tag-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.project-category-tag {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #ffd23f;
}

.project-stat-pill {
    font-size: 12px;
    font-weight: 800;
    color: #00e676;
    background: rgba(0, 230, 118, 0.12);
    border: 1px solid rgba(0, 230, 118, 0.35);
    padding: 4px 10px;
    border-radius: 999px;
}

.project-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    line-height: 1.25;
}

.project-desc {
    font-size: 14px;
    color: #94a3b8;
    line-height: 1.55;
    margin: 0;
}

.project-actions-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.btn-proj-demo {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 18px;
    background: rgba(0, 229, 255, 0.1);
    border: 1px solid rgba(0, 229, 255, 0.45);
    color: #00e5ff;
    border-radius: 12px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.25s ease;
}

.btn-proj-demo:hover {
    background: rgba(0, 229, 255, 0.25);
    box-shadow: 0 0 16px rgba(0, 229, 255, 0.4);
}

.btn-proj-order {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 18px;
    background: #ffd23f;
    color: #08080a;
    border-radius: 12px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.25s ease;
}

.btn-proj-order:hover {
    background: #ffffff;
    transform: translateY(-1px);
}

/* 06 — CREATIVE STATEMENT INTERLUDE */
.exp-manifesto-section {
    padding: 160px 0;
    background: #07080e;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.manifesto-huge-heading {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(42px, 7.5vw, 110px);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 0.95;
    color: #ffffff;
    text-transform: uppercase;
    max-width: 1400px;
    margin: 0 auto;
}

.manifesto-huge-heading .gold-line {
    background: linear-gradient(135deg, #ffd23f, #ffb703);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 07 — FINAL CLIMAX CTA */
.exp-cta-section {
    padding: 160px 0 120px;
    background: transparent;
    position: relative;
    overflow: hidden;
    text-align: center;
    z-index: 2;
}

.cta-monolith-box {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    background: radial-gradient(circle at 50% 0%, rgba(255, 210, 63, 0.15) 0%, rgba(13, 15, 24, 0.9) 70%);
    border: 1px solid rgba(255, 210, 63, 0.35);
    border-radius: 36px;
    padding: 80px 50px;
    box-shadow: 0 30px 100px rgba(0, 0, 0, 0.9), 0 0 60px rgba(255, 210, 63, 0.1);
}

.cta-monolith-headline {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(38px, 6.2vw, 84px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #ffffff;
    margin: 0 0 24px;
}

.cta-monolith-sub {
    font-size: clamp(16px, 1.8vw, 20px);
    color: #94a3b8;
    max-width: 650px;
    margin: 0 auto 40px;
    line-height: 1.5;
}

.btn-cta-giant {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 22px 54px;
    background: #ffd23f;
    color: #08080a;
    border-radius: 999px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 15px 40px rgba(255, 210, 63, 0.4);
}

.btn-cta-giant:hover {
    transform: translateY(-4px) scale(1.04);
    background: #ffffff;
    box-shadow: 0 20px 60px rgba(255, 255, 255, 0.4);
}

.cta-hotline-text {
    margin-top: 24px;
    font-size: 13px;
    color: #64748b;
}

.cta-hotline-text a {
    color: #ffd23f;
    text-decoration: none;
    font-weight: 700;
}

/* 08 — CINEMATIC FOOTER */
.exp-footer-minimal {
    padding: 80px 0 40px;
    background: #030305;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-film-quote {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(28px, 4vw, 56px);
    font-weight: 900;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.2);
    text-transform: uppercase;
    margin-bottom: 50px;
}







/* ==========================================================================
   32. THE INFINITE DIGITAL SKY — ULTRA-CLEAN WHITE 3D CLOUD WORLD
   ========================================================================== */

/* Sky Mode Body Root */
body.sky-mode {
    background: linear-gradient(180deg, #e0f2fe 0%, #f0f9ff 25%, #ffffff 60%, #f8fafc 100%);
    color: #0f172a;
    font-family: 'Plus Jakarta Sans', sans-serif;
    overflow-x: hidden;
}

/* 3D WebGL Sky Canvas */
.webgl-sky-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1;
    display: block;
}

/* Sky Progress Spine */
.sky-progress-spine {
    position: fixed;
    top: 50%;
    left: 28px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    z-index: 900;
    pointer-events: none;
}

.sky-progress-track {
    width: 2px;
    height: 120px;
    background: rgba(15, 23, 42, 0.1);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.sky-progress-bar {
    width: 100%;
    height: 0%;
    background: #0284c7;
    box-shadow: 0 0 10px #0284c7;
    transition: height 0.1s linear;
}

.sky-progress-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #64748b;
    text-transform: uppercase;
}

/* Header Adjustments for White Sky */
.top-bar-white-sky {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
    color: #334155;
}

.top-bar-white-sky .marquee-item {
    color: #334155;
}

.top-bar-white-sky .alert-badge-sky {
    background: #e0f2fe;
    color: #0369a1;
    border: 1px solid rgba(2, 132, 199, 0.3);
}

.top-bar-white-sky .dsm-langsw__btn {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #0f172a;
}

.top-bar-white-sky .top-bar__links a {
    color: #475569;
}
.top-bar-white-sky .top-bar__links a:hover {
    color: #0284c7;
}

.main-header-white-sky {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(226, 232, 240, 0.85);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.03);
}

.desktop-nav-white .nav-link {
    color: #0f172a;
    font-weight: 700;
}
.desktop-nav-white .nav-link:hover,
.desktop-nav-white .nav-link.active {
    color: #0284c7;
}

.btn-header-cta-sky {
    background: #0f172a;
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 999px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15);
    transition: all 0.3s ease;
}
.btn-header-cta-sky:hover {
    background: #0284c7;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(2, 132, 199, 0.3);
}

.hamburger-btn-dark span {
    background: #0f172a;
}

.mobile-drawer-white {
    background: #ffffff;
    color: #0f172a;
}

/* 01 — SKY HERO STAGE */
.sky-hero-stage {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 140px 0 60px;
    overflow: hidden;
    z-index: 2;
}

.sky-meta-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    padding-bottom: 18px;
    margin-bottom: 30px;
}

.sky-meta-pill {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #0284c7;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sky-meta-pill.text-muted {
    color: #64748b;
}

.sky-meta-pill.text-sky {
    color: #d97706;
}

.sky-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #0284c7;
    box-shadow: 0 0 10px #0284c7;
    animation: livePulseDot 2s infinite;
}

.sky-hero-center {
    margin: auto 0;
}

.sky-giant-headline {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(48px, 8.5vw, 120px);
    font-weight: 900;
    line-height: 0.94;
    letter-spacing: -0.04em;
    color: #0f172a;
    text-transform: uppercase;
    margin: 0 0 35px;
}

.sky-title-row {
    display: block;
}

.text-gradient-sky {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 40%, #0f172a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sky-hero-sub-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: flex-end;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    padding-top: 30px;
}

@media (max-width: 768px) {
    .sky-hero-sub-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.sky-lead-paragraph {
    font-size: clamp(16px, 1.8vw, 20px);
    line-height: 1.6;
    color: #475569;
    margin: 0;
}

.sky-lead-paragraph strong {
    color: #0f172a;
}

.sky-cta-group {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: flex-end;
}

@media (max-width: 768px) {
    .sky-cta-group {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

.btn-sky-primary {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 36px;
    background: #0f172a;
    color: #ffffff;
    border-radius: 999px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-sky-primary:hover {
    transform: translateY(-2px) scale(1.03);
    background: #0284c7;
    box-shadow: 0 14px 40px rgba(2, 132, 199, 0.3);
}

.btn-sky-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 30px;
    background: rgba(255, 255, 255, 0.9);
    color: #0f172a;
    border: 1px solid rgba(15, 23, 42, 0.15);
    border-radius: 999px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.04);
    transition: all 0.3s ease;
}

.btn-sky-secondary:hover {
    background: #ffffff;
    border-color: #0284c7;
    color: #0284c7;
}

/* 02 — PHILOSOPHY STAGE */
.sky-philosophy-stage {
    padding: 140px 0;
    position: relative;
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(226, 232, 240, 0.8);
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
    z-index: 2;
}

.sky-sun-laser-line {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #f59e0b, transparent);
    margin-bottom: 50px;
    opacity: 0.6;
}

.sky-quote-headline {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(38px, 6.2vw, 84px);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: #0f172a;
    max-width: 1200px;
    margin: 0 0 50px;
}

.sky-highlight-amber {
    color: #d97706;
}

.sky-telemetry-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    padding-top: 40px;
}

@media (max-width: 991px) {
    .sky-telemetry-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 576px) {
    .sky-telemetry-grid {
        grid-template-columns: 1fr;
    }
}

.sky-telemetry-card {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    padding: 30px 24px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.03);
    transition: all 0.35s ease;
}

.sky-telemetry-card:hover {
    transform: translateY(-6px);
    background: #ffffff;
    border-color: #0284c7;
    box-shadow: 0 20px 50px rgba(2, 132, 199, 0.12);
}

.sky-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #e0f2fe;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.sky-card-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: 0.5px;
    margin: 0 0 8px;
}

.sky-card-num {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(28px, 3.5vw, 42px);
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.sky-card-unit {
    color: #0284c7;
    font-size: 0.6em;
}

.sky-card-label {
    font-size: 13.5px;
    font-weight: 500;
    color: #64748b;
    line-height: 1.5;
    margin-top: 6px;
}

/* 03 — SERVICES STAGE */
.sky-services-stage {
    padding: 140px 0;
    position: relative;
    z-index: 2;
}

.sky-section-eyebrow {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 3px;
    color: #0284c7;
    text-transform: uppercase;
    margin-bottom: 20px;
    display: block;
}

.sky-section-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(32px, 4.5vw, 64px);
    font-weight: 900;
    letter-spacing: -0.03em;
    color: #0f172a;
    margin: 0 0 60px;
}

.sky-services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

@media (max-width: 991px) {
    .sky-services-grid {
        grid-template-columns: 1fr;
    }
}

.sky-service-card {
    position: relative;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.02);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.sky-service-card:hover {
    transform: translateY(-6px);
    background: #ffffff;
    border-color: #0284c7;
    box-shadow: 0 30px 80px rgba(2, 132, 199, 0.12);
}

.sky-service-num {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 24px;
    font-weight: 900;
    color: #0284c7;
    margin-bottom: 16px;
}

.sky-service-heading {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 12px;
}

.sky-service-desc {
    font-size: 15px;
    color: #64748b;
    line-height: 1.6;
    margin: 0 0 24px;
}

.sky-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    font-weight: 800;
    color: #0284c7;
    text-decoration: none;
    transition: transform 0.25s ease;
}
.sky-service-card:hover .sky-card-link {
    transform: translateX(4px);
    color: #0369a1;
}

/* 04 — PROCESS FLIGHT PATH */
.sky-process-stage {
    padding: 140px 0;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(14px);
    border-top: 1px solid rgba(226, 232, 240, 0.8);
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
    position: relative;
    z-index: 2;
}

.sky-process-track {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-top: 50px;
}

@media (max-width: 991px) {
    .sky-process-track {
        grid-template-columns: 1fr;
    }
}

.sky-process-node {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 30px 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 300px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.03);
    transition: all 0.35s ease;
}

.sky-process-node:hover {
    transform: translateY(-6px);
    border-color: #0284c7;
    box-shadow: 0 20px 50px rgba(2, 132, 199, 0.12);
}

.sky-step-badge {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #0284c7;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.sky-step-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 10px;
}

.sky-step-desc {
    font-size: 13.5px;
    color: #64748b;
    line-height: 1.5;
    margin: 0;
}

/* 05 — WORK GALLERY MONOLITHS */
.sky-work-stage {
    padding: 140px 0;
    position: relative;
    z-index: 2;
}

.sky-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin-top: 50px;
}

@media (max-width: 991px) {
    .sky-gallery-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

.sky-project-monolith {
    position: relative;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 25px 70px rgba(15, 23, 42, 0.06), 0 4px 16px rgba(15, 23, 42, 0.02);
    transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    transform-style: preserve-3d;
}

.sky-project-monolith:hover {
    transform: translateY(-8px) scale(1.015);
    border-color: rgba(2, 132, 199, 0.4);
    box-shadow: 0 35px 90px rgba(2, 132, 199, 0.15), 0 10px 30px rgba(15, 23, 42, 0.04);
}

.sky-project-window {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f1f5f9;
}

.sky-project-window img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.sky-project-monolith:hover .sky-project-window img {
    transform: scale(1.04);
}

.sky-window-hover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sky-project-monolith:hover .sky-window-hover {
    opacity: 1;
}

.btn-sky-play {
    padding: 14px 28px;
    border-radius: 999px;
    background: #ffffff;
    color: #0f172a;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transform: scale(0.9);
    transition: transform 0.25s ease;
}

.sky-project-monolith:hover .btn-sky-play {
    transform: scale(1);
}

.sky-project-info {
    padding: 34px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sky-tag-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sky-cat-pill {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #0284c7;
}

.sky-stat-pill {
    font-size: 12px;
    font-weight: 700;
    color: #059669;
    background: #ecfdf5;
    padding: 4px 10px;
    border-radius: 999px;
}

.sky-project-name {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 800;
    color: #0f172a;
    line-height: 1.25;
    margin: 0;
}

.sky-project-summary {
    font-size: 14.5px;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

.sky-project-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 10px;
}

.btn-action-demo {
    padding: 12px 24px;
    border-radius: 999px;
    background: #0284c7;
    color: #ffffff;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    font-weight: 800;
    border: none;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(2, 132, 199, 0.25);
    transition: all 0.25s ease;
}
.btn-action-demo:hover {
    background: #0369a1;
    transform: translateY(-2px);
}

.btn-action-order {
    padding: 12px 22px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
    color: #0f172a;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.25s ease;
}
.btn-action-order:hover {
    background: #0f172a;
    color: #ffffff;
}

/* 06 — STATEMENT STAGE */
.sky-statement-stage {
    padding: 160px 0;
    text-align: center;
    position: relative;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    z-index: 2;
}

.sky-statement-headline {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(36px, 5.5vw, 76px);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #0f172a;
    max-width: 1100px;
    margin: 0 auto;
}

.sky-sub-statement {
    display: block;
    font-size: 0.5em;
    color: #0284c7;
    letter-spacing: 2px;
    margin-top: 24px;
    text-transform: uppercase;
}

/* 07 — FINAL CTA */
.sky-cta-stage {
    padding: 160px 0 120px;
    position: relative;
    text-align: center;
    z-index: 2;
}

.sky-cta-box {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 1);
    border-radius: 36px;
    padding: 80px 50px;
    box-shadow: 0 35px 100px rgba(15, 23, 42, 0.08), 0 10px 30px rgba(2, 132, 199, 0.08);
}

.sky-cta-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(38px, 6vw, 76px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #0f172a;
    margin: 0 0 24px;
}

.sky-cta-sub {
    font-size: clamp(16px, 1.8vw, 20px);
    color: #64748b;
    max-width: 650px;
    margin: 0 auto 40px;
    line-height: 1.5;
}

.btn-sky-giant {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 22px 54px;
    background: #0f172a;
    color: #ffffff;
    border-radius: 999px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 15px 40px rgba(15, 23, 42, 0.2);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-sky-giant:hover {
    transform: translateY(-4px) scale(1.04);
    background: #0284c7;
    box-shadow: 0 20px 60px rgba(2, 132, 199, 0.4);
}

.sky-hotline-note {
    margin-top: 24px;
    font-size: 13px;
    color: #64748b;
}

.sky-hotline-note a {
    color: #0284c7;
    text-decoration: none;
    font-weight: 700;
}

/* 08 — RETROSPECTIVE FOOTER */
.sky-footer-clean {
    padding: 80px 0 40px;
    background: rgba(255, 255, 255, 0.95);
    border-top: 1px solid rgba(226, 232, 240, 0.9);
}

.sky-footer-quote {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(24px, 3.5vw, 48px);
    font-weight: 900;
    letter-spacing: -0.02em;
    color: rgba(15, 23, 42, 0.15);
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 50px;
}

.sky-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    padding-top: 30px;
}


/* ==========================================================================
   33. WEB PLATFORMS LUXURY DEMO LIGHTBOX & SANDBOX VIEWER
   ========================================================================== */
.demo-lightbox-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.demo-lightbox-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.demo-lightbox-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(3, 4, 8, 0.92);
    backdrop-filter: blur(16px);
}

.demo-lightbox-container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    height: 88vh;
    background: #0d0f18;
    border: 1px solid rgba(255, 210, 63, 0.4);
    border-radius: 24px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.95), 0 0 50px rgba(255, 210, 63, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 10;
}

.demo-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px;
    background: rgba(14, 16, 24, 0.98);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    gap: 15px;
}

.demo-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.demo-dots {
    display: flex;
    align-items: center;
    gap: 6px;
}

.demo-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.demo-dots .dot.red { background: #ff5f56; }
.demo-dots .dot.yellow { background: #ffbd2e; }
.demo-dots .dot.green { background: #27c93f; }

.demo-title-group {
    display: flex;
    flex-direction: column;
}

.demo-badge-live {
    font-size: 10px;
    font-weight: 800;
    color: #00e676;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.demo-project-name {
    font-size: 15px;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
}

.demo-device-switcher {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    gap: 4px;
}

.btn-device-view {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    color: #94a3b8;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-device-view:hover {
    color: #ffffff;
}

.btn-device-view.active {
    background: #ffd23f;
    color: #08080a;
}

.demo-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-modal-order {
    padding: 8px 18px;
    border-radius: 999px;
    background: #ffd23f;
    color: #08080a;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.2s ease;
}
.btn-modal-order:hover {
    background: #ffffff;
}

.btn-modal-close {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-modal-close:hover {
    background: #ff4757;
    border-color: #ff4757;
}

.demo-iframe-viewport {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #06070a;
    padding: 16px;
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.demo-iframe-viewport.desktop-mode iframe {
    width: 100%;
    height: 100%;
    max-width: 100%;
    border: none;
    border-radius: 12px;
    background: #090a10;
}

.demo-iframe-viewport.mobile-mode iframe {
    width: 375px;
    height: 100%;
    max-width: 375px;
    border: 3px solid rgba(255, 210, 63, 0.5);
    border-radius: 36px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.95), 0 0 25px rgba(255, 210, 63, 0.25);
    background: #090a10;
}

.demo-iframe-loader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(6, 7, 10, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: #ffd23f;
    font-size: 13px;
    font-weight: 700;
    z-index: 5;
}

.loader-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255, 210, 63, 0.2);
    border-top-color: #ffd23f;
    border-radius: 50%;
    animation: spinLoader 0.8s linear infinite;
}

@keyframes spinLoader {
    to { transform: rotate(360deg); }
}

@media (max-width: 768px) {
    .demo-lightbox-container {
        height: 94vh;
    }
    .demo-device-switcher {
        display: none;
    }
}


/* ==========================================================================
   34. APPLE MACBOOK PRO & IPHONE 17 PRO DEVICE MOCKUP ARCHITECTURE
   ========================================================================== */

/* Device Mockup Stage inside Showcase Cards */
.apple-device-mockup-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 40%, rgba(30, 32, 45, 0.6) 0%, rgba(5, 6, 10, 0.95) 85%);
    padding: 24px 20px 16px;
    overflow: visible;
    perspective: 1200px;
}

/* 1. APPLE MACBOOK PRO 16" CHASSIS */
.macbook-pro-chassis {
    position: relative;
    width: 86%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    transform: rotateX(2deg);
}

.aw-project-card:hover .macbook-pro-chassis {
    transform: rotateX(0deg) translateY(-4px) scale(1.02);
}

/* MacBook Display Lid */
.macbook-lid {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: #090a10;
    border: 3px solid #262833;
    border-radius: 14px 14px 2px 2px;
    padding: 6px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8), inset 0 0 4px rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* MacBook Notch */
.macbook-notch {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 10px;
    background: #090a10;
    border-radius: 0 0 6px 6px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.macbook-notch .camera-lens {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #1e293b;
    border: 1px solid #0f172a;
    box-shadow: inset 0 0 2px rgba(0, 229, 255, 0.4);
}

/* MacBook Retina Screen */
.macbook-screen {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
    background: #050508;
}

.macbook-screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.aw-project-card:hover .macbook-screen img {
    transform: scale(1.05);
}

.screen-glass-glare {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.2) 100%);
    pointer-events: none;
}

/* MacBook Base / Lip */
.macbook-base {
    position: relative;
    width: 114%;
    height: 12px;
    background: linear-gradient(180deg, #323543 0%, #1c1d25 60%, #121319 100%);
    border-radius: 0 0 16px 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9), inset 0 1px 1px rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.macbook-notch-chin {
    width: 60px;
    height: 4px;
    background: #0b0c10;
    border-radius: 0 0 4px 4px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: none;
}

/* 2. APPLE IPHONE 17 PRO CHASSIS (TITANIUM FRAME) */
.iphone17-pro-chassis {
    position: absolute;
    bottom: -6px;
    right: 12px;
    width: 25%;
    max-width: 130px;
    aspect-ratio: 9 / 19.5;
    z-index: 20;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 15px rgba(255, 210, 63, 0.15));
    transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateY(0px) rotate(-1.5deg);
}

.aw-project-card:hover .iphone17-pro-chassis {
    transform: translateY(-8px) scale(1.06) rotate(0deg);
    filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 1)) drop-shadow(0 0 25px rgba(255, 210, 63, 0.3));
}

.iphone17-outer-rim {
    position: relative;
    width: 100%;
    height: 100%;
    background: #1b1c23;
    border: 2px solid #474a5e;
    border-radius: 22px;
    padding: 4px;
    display: flex;
    flex-direction: column;
    box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.8);
    overflow: hidden;
}

/* Dynamic Island */
.iphone17-dynamic-island {
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 32%;
    height: 9px;
    background: #000000;
    border-radius: 999px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.iphone17-dynamic-island .island-camera {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #090e1a;
    border: 1px solid #1e293b;
}

/* iPhone Screen */
.iphone17-screen {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 18px;
    overflow: hidden;
    background: #050508;
}

.iphone17-screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.aw-project-card:hover .iphone17-screen img {
    transform: scale(1.08);
}

.iphone17-home-bar {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 35%;
    height: 3px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 999px;
    z-index: 10;
}

/* Mobile Responsiveness for Device Mockups */
@media (max-width: 576px) {
    .apple-device-mockup-stage {
        padding: 18px 12px 12px;
    }
    .macbook-pro-chassis {
        width: 82%;
    }
    .iphone17-pro-chassis {
        width: 28%;
        right: 6px;
    }
}


/* ==========================================================================
   35. FRAMELESS APPLE DEVICE SHOWCASE (NO BOXES, NO BORDERS - PURE HARDWARE)
   ========================================================================== */

/* Remove Card Box & Borders completely on Web Platforms Showcase */
.wp-cinema-grid .aw-project-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    padding: 0 0 30px 0 !important;
    margin-bottom: 20px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.wp-cinema-grid .aw-project-card:hover {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: translateY(-8px);
}

.wp-cinema-grid .aw-media-box {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    border-radius: 0 !important;
    aspect-ratio: auto !important;
    position: relative;
}

.wp-cinema-grid .apple-device-mockup-stage {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 24px 0 16px !important;
    overflow: visible !important;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.wp-cinema-grid .aw-media-overlay {
    display: none !important;
}

/* Natural Floor Ambient Drop Shadow directly under the hardware */
.wp-cinema-grid .macbook-pro-chassis {
    filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 30px rgba(255, 210, 63, 0.08));
}

.wp-cinema-grid .iphone17-pro-chassis {
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 20px rgba(255, 210, 63, 0.2));
}

/* Frameless Info Panel beneath the devices */
.wp-cinema-grid .aw-info-panel {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 20px 4px 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.wp-cinema-grid .aw-top-tags {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    margin-bottom: 16px !important;
    padding: 0 4px !important;
}

/* Hero Spotlight: Frameless pure devices */
.wp-spotlight-wrapper {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.wp-spotlight-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
}

.wp-spotlight-card .spotlight-media-inner {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
}

.wp-spotlight-card .spotlight-poster-img {
    filter: drop-shadow(0 30px 70px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 40px rgba(255, 210, 63, 0.15));
    border-radius: 20px;
}

.wp-spotlight-card .spotlight-footer-bar {
    background: transparent !important;
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 24px 4px 0 !important;
}


/* ==========================================================================
   36. CLEAN LUXURY APPLE DEVICE CARDS (NO TOP BADGES, NO SCREEN OVERLAYS)
   ========================================================================== */

/* Completely remove top badges sitting on top of the laptop */
.wp-cinema-grid .aw-top-tags {
    display: none !important;
}

/* Completely remove center overlay play/test button blocking laptop screen */
.wp-cinema-grid .aw-play-trigger {
    display: none !important;
}

.wp-cinema-grid .aw-media-overlay {
    display: none !important;
}

/* Device stage styling: clean, spacious, clickable cursor */
.wp-cinema-grid .apple-device-mockup-stage {
    cursor: pointer;
    padding: 10px 0 20px !important;
    position: relative;
}

/* Clean, Luxury Apple-style Bottom Info Panel */
.wp-card-footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

@media (max-width: 640px) {
    .wp-card-footer {
        flex-direction: column;
        gap: 16px;
    }
}

.wp-card-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wp-niche-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #ffd23f;
}

.wp-niche-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00e676;
    box-shadow: 0 0 8px #00e676;
}

.wp-project-heading {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(20px, 2.2vw, 25px);
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.wp-project-summary {
    font-size: 14px;
    color: #94a3b8;
    line-height: 1.5;
    margin: 0;
}

.wp-card-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    margin-top: 4px;
}

@media (max-width: 640px) {
    .wp-card-actions {
        width: 100%;
    }
    .wp-card-actions a,
    .wp-card-actions button {
        flex: 1;
        justify-content: center;
    }
}

.btn-device-demo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: #ffd23f;
    color: #050508;
    border: none;
    border-radius: 999px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 18px rgba(255, 210, 63, 0.25);
}

.btn-device-demo:hover {
    background: #ffffff;
    color: #050508;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.35);
}

.btn-device-order {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    background: rgba(255, 255, 255, 0.05);
    color: #f1f5f9;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.25s ease;
}

.btn-device-order:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 210, 63, 0.6);
    color: #ffd23f;
    transform: translateY(-2px);
}


/* ==========================================================================
   37. 10/10 ULTRA-LUXURY EDITORIAL APPLE SHOWCASE (ALTERNATING SPLIT ROWS)
   ========================================================================== */

.wp-showcase-container {
    padding: 60px 0 140px;
    background: #050508;
    position: relative;
    z-index: 2;
}

.wp-editorial-stream {
    display: flex;
    flex-direction: column;
    gap: 120px;
    margin-top: 60px;
}

/* Flagship Row Container */
.wp-flagship-row {
    position: relative;
    width: 100%;
    padding: 0;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.wp-flagship-inner {
    display: flex;
    align-items: center;
    gap: 60px;
    position: relative;
}

/* Alternating Rows: Even rows flip visual and editorial */
.wp-flagship-row:nth-child(even) .wp-flagship-inner {
    flex-direction: row-reverse;
}

@media (max-width: 1024px) {
    .wp-flagship-inner,
    .wp-flagship-row:nth-child(even) .wp-flagship-inner {
        flex-direction: column;
        gap: 36px;
    }
}

/* 1. VISUAL CANVAS (APPLE MACBOOK PRO 16 + IPHONE 17 PRO RENDER) */
.wp-flagship-visual {
    flex: 1.25;
    position: relative;
    cursor: pointer;
    border-radius: 24px;
    overflow: hidden;
    background: #07080f;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.95), 0 0 40px rgba(255, 210, 63, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.wp-flagship-visual:hover {
    transform: translateY(-8px) scale(1.015);
    border-color: rgba(255, 210, 63, 0.4);
    box-shadow: 0 35px 90px rgba(0, 0, 0, 1), 0 0 50px rgba(255, 210, 63, 0.18);
}

.wp-visual-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.wp-flagship-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.wp-flagship-visual:hover .wp-flagship-img {
    transform: scale(1.04);
}

.wp-visual-glass-sheen {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.3) 100%);
    pointer-events: none;
}

.wp-visual-hover-pill {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: rgba(5, 5, 8, 0.85);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 210, 63, 0.4);
    border-radius: 999px;
    padding: 10px 22px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12.5px;
    font-weight: 800;
    color: #ffd23f;
    letter-spacing: 0.5px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
    opacity: 0;
    transition: all 0.35s ease;
    pointer-events: none;
    white-space: nowrap;
}

.wp-visual-hover-pill .pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00e676;
    box-shadow: 0 0 8px #00e676;
}

.wp-flagship-visual:hover .wp-visual-hover-pill {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* 2. EDITORIAL LUXURY TYPOGRAPHY & BUSINESS STORY */
.wp-flagship-editorial {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
}

.wp-editorial-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.wp-editorial-index {
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    color: #ffd23f;
    letter-spacing: 1px;
}

.wp-editorial-sep {
    color: rgba(255, 255, 255, 0.2);
    font-size: 13px;
}

.wp-editorial-niche {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #cbd5e1;
}

.wp-editorial-metric-pill {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11px;
    font-weight: 800;
    color: #00e676;
    background: rgba(0, 230, 118, 0.1);
    border: 1px solid rgba(0, 230, 118, 0.3);
    padding: 3px 10px;
    border-radius: 999px;
    letter-spacing: 0.5px;
}

.wp-editorial-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(28px, 3.2vw, 42px);
    font-weight: 900;
    color: #ffffff;
    line-height: 1.15;
    letter-spacing: -0.03em;
    margin: 0;
}

.wp-editorial-lead {
    font-size: clamp(14.5px, 1.2vw, 16px);
    color: #94a3b8;
    line-height: 1.65;
    margin: 0;
}

/* Feature Spec Bullets */
.wp-editorial-specs {
    list-style: none;
    padding: 0;
    margin: 6px 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wp-editorial-specs li {
    font-size: 13.5px;
    color: #cbd5e1;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.5;
}

.wp-editorial-specs .spec-bullet {
    color: #ffd23f;
    font-size: 12px;
    margin-top: 2px;
    flex-shrink: 0;
}

.wp-editorial-specs strong {
    color: #ffffff;
}

/* Action Cluster */
.wp-editorial-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.btn-editorial-demo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: #ffd23f;
    color: #050508;
    border: none;
    border-radius: 999px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.3px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 6px 20px rgba(255, 210, 63, 0.3);
}

.btn-editorial-demo:hover {
    background: #ffffff;
    color: #050508;
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.4);
}

.btn-editorial-order {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 26px;
    background: rgba(255, 255, 255, 0.05);
    color: #f1f5f9;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-editorial-order:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 210, 63, 0.6);
    color: #ffd23f;
    transform: translateY(-3px);
}


/* ==========================================================================
   38. INTERACTIVE SINGLE STAGE SHOWCASE (CLEAN, LUXURY, ZERO CLUTTER)
   ========================================================================== */

.wp-stage-section {
    padding: 80px 0 120px;
    background: #050508;
    position: relative;
    z-index: 2;
}

.wp-stage-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 40px;
}

.wp-stage-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(32px, 4vw, 54px);
    font-weight: 900;
    color: #ffffff;
    letter-spacing: -0.03em;
    margin: 12px 0;
}

.wp-stage-subtitle {
    font-size: clamp(15px, 1.5vw, 18px);
    color: #94a3b8;
    margin: 0;
    line-height: 1.6;
}

/* Horizontal Interactive Tabs */
.wp-stage-nav-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 36px;
    overflow-x: auto;
    padding-bottom: 12px;
    scrollbar-width: none;
}

.wp-stage-nav-wrapper::-webkit-scrollbar {
    display: none;
}

.wp-stage-nav {
    display: inline-flex;
    gap: 8px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    backdrop-filter: blur(16px);
}

.stage-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: #94a3b8;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.stage-tab-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
}

.stage-tab-btn.active {
    background: #ffd23f;
    color: #050508;
    font-weight: 800;
    box-shadow: 0 4px 20px rgba(255, 210, 63, 0.3);
}

/* Monumental Centerpiece Display Box */
.wp-stage-display-card {
    position: relative;
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    background: #080911;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.95), 0 0 50px rgba(255, 210, 63, 0.05);
    transition: border-color 0.4s ease;
}

.wp-stage-display-card:hover {
    border-color: rgba(255, 210, 63, 0.35);
}

/* Master Hardware Canvas */
.wp-stage-screen-box {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #030407;
    overflow: hidden;
    cursor: pointer;
}

.wp-stage-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.35s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 1;
}

.wp-stage-img.is-switching {
    opacity: 0.2;
    transform: scale(0.98);
}

.wp-stage-hover-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(5,5,8,0.7) 100%);
    pointer-events: none;
}

.wp-stage-click-pill {
    position: absolute;
    top: 24px;
    right: 24px;
    background: rgba(5, 5, 8, 0.8);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 210, 63, 0.4);
    border-radius: 999px;
    padding: 8px 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px;
    font-weight: 800;
    color: #ffd23f;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
    pointer-events: none;
    transition: all 0.3s ease;
}

.wp-stage-screen-box:hover .wp-stage-click-pill {
    background: #ffd23f;
    color: #050508;
    box-shadow: 0 4px 25px rgba(255, 210, 63, 0.5);
}

/* Bottom Information & Control Console */
.wp-stage-footer {
    padding: 32px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    background: #080911;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

@media (max-width: 768px) {
    .wp-stage-footer {
        flex-direction: column;
        align-items: flex-start;
        padding: 24px 20px;
    }
}

.wp-stage-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wp-stage-eyebrow-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wp-stage-eyebrow {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #ffd23f;
}

.wp-stage-metric-badge {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11px;
    font-weight: 800;
    color: #00e676;
    background: rgba(0, 230, 118, 0.12);
    border: 1px solid rgba(0, 230, 118, 0.3);
    padding: 3px 10px;
    border-radius: 999px;
}

.wp-stage-heading {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(22px, 2.5vw, 30px);
    font-weight: 900;
    color: #ffffff;
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.wp-stage-description {
    font-size: 14.5px;
    color: #94a3b8;
    margin: 0;
    line-height: 1.6;
    max-width: 680px;
}

.wp-stage-controls {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .wp-stage-controls {
        width: 100%;
        margin-top: 8px;
    }
    .wp-stage-controls button,
    .wp-stage-controls a {
        flex: 1;
        justify-content: center;
    }
}

.btn-stage-demo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: #ffd23f;
    color: #050508;
    border: none;
    border-radius: 999px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 20px rgba(255, 210, 63, 0.25);
}

.btn-stage-demo:hover {
    background: #ffffff;
    color: #050508;
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(255, 255, 255, 0.35);
}

.btn-stage-order {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    background: rgba(255, 255, 255, 0.05);
    color: #f1f5f9;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.25s ease;
}

.btn-stage-order:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 210, 63, 0.6);
    color: #ffd23f;
    transform: translateY(-2px);
}


/* ==========================================================================
   40. 3D COVERFLOW PERSPECTIVE CAROUSEL (EXACT USER REFERENCE MATCH)
   ========================================================================== */

.wp-coverflow-section {
    padding: 100px 0 140px;
    background: radial-gradient(circle at 50% 30%, rgba(255, 210, 63, 0.06) 0%, rgba(5, 5, 8, 1) 75%);
    position: relative;
    overflow: hidden;
    z-index: 2;
}

/* Background Ambient Glow & Giant Watermark Number */
.wp-cf-watermark {
    position: absolute;
    top: 60px;
    right: 5%;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(120px, 18vw, 240px);
    font-weight: 900;
    color: rgba(255, 255, 255, 0.02);
    line-height: 1;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

/* Top Header */
.wp-cf-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 50px;
    position: relative;
    z-index: 2;
}

.wp-cf-badge {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #ffd23f;
    text-transform: uppercase;
    display: block;
    margin-bottom: 12px;
}

.wp-cf-headline {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(32px, 4.5vw, 56px);
    font-weight: 900;
    color: #ffffff;
    line-height: 1.15;
    letter-spacing: -0.03em;
    margin: 0 0 16px;
}

.wp-cf-view-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #cbd5e1;
    text-decoration: none;
    transition: all 0.25s ease;
}

.wp-cf-view-all:hover {
    color: #ffd23f;
    transform: translateX(4px);
}

.wp-cf-counter {
    font-family: 'Space Mono', monospace;
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 700;
    color: #ffd23f;
    letter-spacing: 2px;
}

/* 3D PERSPECTIVE STAGE */
.wp-3d-stage-wrapper {
    position: relative;
    width: 100%;
    min-height: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1400px;
    perspective-origin: 50% 50%;
    margin-bottom: 40px;
    user-select: none;
}

@media (max-width: 768px) {
    .wp-3d-stage-wrapper {
        min-height: 480px;
        perspective: 1000px;
    }
}

.wp-3d-carousel-track {
    position: relative;
    width: 100%;
    height: 540px;
    transform-style: preserve-3d;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .wp-3d-carousel-track {
        height: 460px;
    }
}

/* INDIVIDUAL 3D COVERFLOW CARD */
.wp-cf-card {
    position: absolute;
    width: 90%;
    max-width: 520px;
    height: 500px;
    background: rgba(14, 16, 26, 0.85);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 28px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), 
                opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.65s ease, 
                border-color 0.65s ease,
                filter 0.65s ease;
    transform-origin: center center;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9);
    cursor: pointer;
    overflow: hidden;
}

@media (max-width: 768px) {
    .wp-cf-card {
        max-width: 320px;
        height: 430px;
        padding: 18px;
        border-radius: 22px;
    }
}

/* Card Header */
.wp-cf-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.wp-cf-card-brand-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wp-cf-card-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(22px, 2.2vw, 32px);
    font-weight: 900;
    color: #ffffff;
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.wp-cf-card-sub {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #ffd23f;
    text-transform: uppercase;
}

.wp-cf-metric-tag {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11px;
    font-weight: 800;
    color: #00e676;
    background: rgba(0, 230, 118, 0.12);
    border: 1px solid rgba(0, 230, 118, 0.3);
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
}

/* Card Visual Media Box (Apple MacBook + iPhone Display) */
.wp-cf-card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 16px;
    overflow: hidden;
    background: #05060b;
    margin: 12px 0;
}

.wp-cf-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.wp-cf-card:hover .wp-cf-card-media img {
    transform: scale(1.05);
}

.wp-cf-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.3) 100%);
    pointer-events: none;
}

/* Card Footer / Action Button */
.wp-cf-card-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.btn-cf-view {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    background: #ffd23f;
    color: #050508;
    border: none;
    border-radius: 999px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.5px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.25s ease;
    box-shadow: 0 4px 15px rgba(255, 210, 63, 0.3);
}

.btn-cf-view:hover {
    background: #ffffff;
    color: #050508;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.4);
}

.btn-cf-order-direct {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.2s ease;
}

.btn-cf-order-direct:hover {
    color: #ffd23f;
}

/* 3D POSITIONING STATES */
/* 1. Center Active Card */
.wp-cf-card.is-active {
    transform: translateX(0) translateZ(140px) scale(1.08) rotateY(0deg);
    z-index: 20;
    opacity: 1;
    filter: brightness(1.05);
    border-color: rgba(255, 210, 63, 0.6);
    box-shadow: 0 35px 90px rgba(0, 0, 0, 0.95), 0 0 60px rgba(255, 210, 63, 0.25);
    pointer-events: auto;
}

/* 2. Immediate Left Card */
.wp-cf-card.is-prev {
    transform: translateX(-360px) translateZ(-60px) scale(0.86) rotateY(25deg);
    z-index: 10;
    opacity: 0.75;
    filter: brightness(0.75);
    pointer-events: auto;
}

/* 3. Immediate Right Card */
.wp-cf-card.is-next {
    transform: translateX(360px) translateZ(-60px) scale(0.86) rotateY(-25deg);
    z-index: 10;
    opacity: 0.75;
    filter: brightness(0.75);
    pointer-events: auto;
}

/* 4. Farther Left Card */
.wp-cf-card.is-far-prev {
    transform: translateX(-660px) translateZ(-180px) scale(0.72) rotateY(38deg);
    z-index: 5;
    opacity: 0.4;
    filter: brightness(0.5);
    pointer-events: auto;
}

/* 5. Farther Right Card */
.wp-cf-card.is-far-next {
    transform: translateX(660px) translateZ(-180px) scale(0.72) rotateY(-38deg);
    z-index: 5;
    opacity: 0.4;
    filter: brightness(0.5);
    pointer-events: auto;
}

/* 6. Hidden Cards */
.wp-cf-card.is-hidden {
    transform: translateX(0) translateZ(-350px) scale(0.5);
    z-index: 1;
    opacity: 0;
    pointer-events: none;
}

/* Responsive Overrides for Mobile 3D Track */
@media (max-width: 768px) {
    .wp-cf-card.is-prev {
        transform: translateX(-190px) translateZ(-60px) scale(0.82) rotateY(20deg);
        opacity: 0.65;
    }
    .wp-cf-card.is-next {
        transform: translateX(190px) translateZ(-60px) scale(0.82) rotateY(-20deg);
        opacity: 0.65;
    }
    .wp-cf-card.is-far-prev,
    .wp-cf-card.is-far-next {
        opacity: 0;
        pointer-events: none;
    }
}

/* NAVIGATION ARROWS */
.wp-cf-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(14, 16, 26, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 30;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(14px);
}

.wp-cf-arrow:hover {
    background: #ffd23f;
    color: #050508;
    border-color: #ffd23f;
    box-shadow: 0 10px 30px rgba(255, 210, 63, 0.4);
    transform: translateY(-50%) scale(1.1);
}

.wp-cf-arrow.prev {
    left: 20px;
}

.wp-cf-arrow.next {
    right: 20px;
}

@media (max-width: 768px) {
    .wp-cf-arrow {
        width: 44px;
        height: 44px;
    }
    .wp-cf-arrow.prev {
        left: 4px;
    }
    .wp-cf-arrow.next {
        right: 4px;
    }
}

/* PAGINATION DOTS */
.wp-cf-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    position: relative;
    z-index: 2;
}

.wp-cf-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.25);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.wp-cf-dot:hover {
    background: rgba(255, 210, 63, 0.6);
}

.wp-cf-dot.active {
    width: 28px;
    background: #ffd23f;
    box-shadow: 0 0 12px rgba(255, 210, 63, 0.5);
}



/* ==========================================================================
   USER DIRECTIVE: ALIGN & MOVE SLIGHTLY DOWN WHATSAPP NUMBER IN STEP 5 FORM
   ========================================================================== */
.phone-field-wrap {
    margin-top: 6px !important; /* Moved slightly down as marked in red circle */
}

.phone-label-row {
    min-height: 22px !important;
    margin-bottom: 4px !important;
}

.phone-input-group {
    height: 48px !important;
    margin-top: 2px !important;
}

.phone-feedback-badge {
    margin-top: 2px !important;
}



/* ==========================================================================
   USER DIRECTIVE: MOVE SHOWREEL, Creative Agency, CONTACT, PHONE SLIGHTLY DOWN
   ========================================================================== */






/* ==========================================================================
   USER DIRECTIVE: LOCK SHOWREEL, Creative Agency, CONTACT, PHONE 100% PARALLEL WITH EN
   ========================================================================== */
.top-bar__inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 36px !important;
}

.top-bar__actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.dsm-langsw,
.top-bar__actions .dsm-langsw {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.dsm-langsw__btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 10px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}

.dsm-langsw__label {
    display: inline-block !important;
    line-height: 1 !important;
    transform: translateY(0.5px) !important;
}

.top-bar__links {
    display: inline-flex !important;
    align-items: center !important;
    gap: 16px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 26px !important; /* EXACT SAME HEIGHT AS EN PILL */
}

.top-bar__links li {
    display: inline-flex !important;
    align-items: center !important;
    height: 26px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.top-bar__links a {
    display: inline-flex !important;
    align-items: center !important;
    height: 26px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: #dfdfe6 !important;
    line-height: 1 !important;
    text-decoration: none !important;
}

.top-phone a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 26px !important;
    color: #ffd23f !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

.top-phone a svg {
    width: 12px !important;
    height: 12px !important;
    display: inline-block !important;
    vertical-align: middle !important;
}



/* ==========================================================================
   USER DIRECTIVE: MOVE ENTIRE TOP HEADER SLIGHTLY UP (TIGHT LUXURY FIT)
   ========================================================================== */
.th-master-fixed-header,
header.th-master-fixed-header {
    top: 0 !important;
}

.top-bar,
.th-master-fixed-header .top-bar {
    padding: 3px 0 4px 0 !important; /* Moved entire top header up */
    min-height: 28px !important;
    height: auto !important;
}

.top-bar__inner {
    min-height: 28px !important;
    align-items: center !important;
}



/* ==========================================================================
   USER DIRECTIVE: REMOVE TOP HEADER STRIP ENTIRELY FROM MOBILE VERSION
   ========================================================================== */
@media (max-width: 991px) {
    .top-bar,
    aside.top-bar,
    .th-master-fixed-header .top-bar {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        border: none !important;
    }

    .th-master-fixed-header {
        top: 0 !important;
        padding-top: 8px !important;
    }

    .th-master-fixed-header .th-luxury-navbar,
    .th-luxury-navbar {
        margin-top: 0 !important;
    }

    .th-clean-hero-stage,
    .th-hero-master-stage,
    .th-hero-section {
        padding-top: 110px !important;
    }
}


/* ==========================================================================
   MEEWAYS MASTER LOCKED HEADER STYLESHEET (V5.0 - ULTIMATE LUXURY PERFECTION)
   ========================================================================== */

/* 1. MASTER FIXED HEADER ARCHITECTURE (100% VIEWPORT WIDTH • DEAD CENTER) */
.th-master-fixed-header,
header.th-master-fixed-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    z-index: 10000 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

.th-master-fixed-header > * {
    pointer-events: auto !important;
}

/* 2. TOP ALERT RUNNING MARQUEE STRIP (INFINITE SEAMLESS FLOW) */
.th-master-fixed-header .top-bar,
.top-bar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100vw !important;
    background: #08080a !important;
    border: none !important;
    box-shadow: none !important;
    padding: 3px 0 !important;
    min-height: 30px !important;
    height: auto !important;
    z-index: 10002 !important;
    display: flex !important;
    justify-content: center !important;
}

.top-bar,
.top-bar *,
.th-master-fixed-header .top-bar {
    border-bottom: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.top-bar__inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    min-height: 28px !important;
    width: 100% !important;
    max-width: 1320px !important;
    margin: 0 auto !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
}

.top-bar__alert {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.alert-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(239, 68, 68, 0.18) !important;
    border: 1px solid rgba(239, 68, 68, 0.5) !important;
    color: #ef4444 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    padding: 3px 8px !important;
    border-radius: 999px !important;
    text-transform: uppercase !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
}

.alert-pulse-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #ef4444 !important;
    box-shadow: 0 0 8px #ef4444 !important;
    animation: alertDotPulse 1.5s infinite !important;
}

@keyframes alertDotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.75); }
}

.marquee-wrapper {
    overflow: hidden !important;
    white-space: nowrap !important;
    position: relative !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    mask-image: linear-gradient(to right, transparent 0%, #000 2%, #000 96%, transparent 100%) !important;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 2%, #000 96%, transparent 100%) !important;
}

.marquee-content {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    animation: masterMarqueeScroll 20s linear infinite !important;
    will-change: transform !important;
}

.top-bar__alert:hover .marquee-content,
.marquee-wrapper:hover .marquee-content {
    animation-play-state: paused !important;
}

.marquee-track {
    display: inline-flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex-shrink: 0 !important;
}

@keyframes masterMarqueeScroll {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

.marquee-item {
    font-size: 12px !important;
    color: #dfdfe6 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.marquee-item strong {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.alert-warn {
    color: #fca5a5 !important;
    font-weight: 600 !important;
}

.marquee-tag {
    font-size: 9.5px !important;
    padding: 2px 7px !important;
    border-radius: 999px !important;
    margin-left: 6px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    line-height: 1 !important;
    display: inline-block !important;
}

.marquee-tag.alert-safe {
    background: rgba(255, 210, 63, 0.15) !important;
    color: #ffd23f !important;
    border: 1px solid rgba(255, 210, 63, 0.4) !important;
}

.marquee-sep {
    color: #ffd23f !important;
    font-size: 11px !important;
    padding: 0 14px !important;
    opacity: 0.8 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.top-bar__actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}

.dsm-langsw,
.top-bar__actions .dsm-langsw {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.dsm-langsw__btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 10px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #dfdfe6 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.dsm-langsw__btn:hover {
    background: rgba(255, 210, 63, 0.12) !important;
    border-color: #ffd23f !important;
    color: #ffd23f !important;
}

.dsm-langsw__globe { width: 12px !important; height: 12px !important; }
.dsm-langsw__label { display: inline-block !important; line-height: 1 !important; transform: translateY(0.5px) !important; }
.dsm-langsw__chev { width: 9px !important; height: 9px !important; transition: transform 0.2s !important; }

.dsm-langsw__menu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    min-width: 170px !important;
    background: #121217 !important;
    border: 1px solid rgba(255, 210, 63, 0.3) !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85) !important;
    padding: 6px !important;
    display: none !important;
    z-index: 10005 !important;
    backdrop-filter: blur(16px) !important;
}

.dsm-langsw.is-open .dsm-langsw__menu,
.dsm-langsw:hover .dsm-langsw__menu,
.dsm-langsw:focus-within .dsm-langsw__menu {
    display: block !important;
}

.dsm-langsw__item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 7px 10px !important;
    border-radius: 6px !important;
    color: #dfdfe6 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
}

.dsm-langsw__item:hover {
    background: rgba(255, 210, 63, 0.15) !important;
    color: #ffd23f !important;
}

.dsm-langsw__item.active {
    background: rgba(255, 210, 63, 0.2) !important;
    color: #ffd23f !important;
    font-weight: 700 !important;
}

.dsm-langsw__native { font-size: 10px !important; color: #888899 !important; }

.top-bar__links {
    display: inline-flex !important;
    align-items: center !important;
    gap: 16px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 26px !important;
}

.top-bar__links li {
    display: inline-flex !important;
    align-items: center !important;
    height: 26px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.top-bar__links a {
    display: inline-flex !important;
    align-items: center !important;
    height: 26px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: #dfdfe6 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.top-bar__links a:hover {
    color: #ffd23f !important;
}

.top-phone a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 26px !important;
    color: #ffd23f !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-decoration: none !important;
}

.top-phone a svg {
    width: 12px !important;
    height: 12px !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* 3. LUXURY CAPSULE NAVBAR CONTAINER (100% CONTAINER WIDTH • DEAD CENTER) */
.th-master-fixed-header .th-luxury-navbar,
.th-luxury-navbar {
    position: relative !important;
    top: auto !important;
    margin-top: 2px !important;
    padding: 0 !important;
    background: transparent !important;
    width: 100% !important;
    max-width: 100vw !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.th-luxury-navbar .nav-container,
.th-luxury-navbar .container,
.nav-container {
    width: 100% !important;
    max-width: 1320px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
}

.luxury-nav-capsule,
.nav-menu-container.luxury-nav-capsule {
    background: rgba(10, 10, 14, 0.9) !important;
    border: 1px solid rgba(255, 210, 63, 0.38) !important;
    backdrop-filter: blur(28px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
    border-radius: 999px !important;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.8), 0 0 25px rgba(255, 210, 63, 0.12), inset 0 1px 1px rgba(255, 210, 63, 0.25) !important;
    padding: 6px 10px 6px 22px !important;
    min-height: 58px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: -moz-fit-content !important;
    width: fit-content !important;
    width: max-content !important;
    max-width: calc(100% - 24px) !important;
    box-sizing: border-box !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.luxury-nav-capsule:hover {
    border-color: rgba(255, 210, 63, 0.6) !important;
    box-shadow: 0 14px 45px rgba(0, 0, 0, 0.85), 0 0 35px rgba(255, 210, 63, 0.22), inset 0 1px 1px rgba(255, 210, 63, 0.4) !important;
}

/* 4. BRAND MONOLITH LOGO (FAR LEFT OF CAPSULE) */
.meeways-standalone-aclonica-logo {
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

.mw-standalone-brand-monolith {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    line-height: 1 !important;
}

.mw-clean-top-brand {
    display: flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    line-height: 1 !important;
    background: transparent !important;
}

.mw-aclonica-wordmark {
    font-family: 'Aclonica', cursive, sans-serif !important;
    font-size: 26px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    background: linear-gradient(135deg, #ffd23f 0%, #ffffff 28%, #ffd23f 55%, #fff5c0 80%, #ffd23f 100%) !important;
    background-size: 250% 250% !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: mwGoldWhiteFlow 4s ease-in-out infinite alternate !important;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 14px rgba(255, 210, 63, 0.45)) !important;
    letter-spacing: 0.015em !important;
}

.mw-gold-sphere-dot {
    width: 7.5px !important;
    height: 7.5px !important;
    border-radius: 50% !important;
    margin-left: 3px !important;
    margin-bottom: 2px !important;
    align-self: flex-end !important;
    flex-shrink: 0 !important;
    background: radial-gradient(circle at 35% 30%, #ffffff 0%, #fff0a8 20%, #ffd23f 50%, #d97706 80%, #78350f 100%) !important;
    box-shadow: 0 0 10px #ffd23f, 0 0 18px rgba(255, 210, 63, 0.85) !important;
    animation: mwGoldSpherePulse 2.4s infinite ease-in-out !important;
    display: inline-block !important;
}

@keyframes mwGoldWhiteFlow {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

@keyframes mwGoldSpherePulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 8px #ffd23f, 0 0 16px rgba(255, 210, 63, 0.7); }
    50% { transform: scale(1.18); box-shadow: 0 0 14px #ffd23f, 0 0 24px rgba(255, 210, 63, 0.95); }
}

.mw-clean-tagline-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 5px !important;
    margin-top: 2px !important;
    width: 100% !important;
}

.mw-clean-laser-line {
    height: 1px !important;
    flex-grow: 1 !important;
    min-width: 10px !important;
    border-radius: 1px !important;
}

.mw-clean-laser-line.left {
    background: linear-gradient(90deg, transparent 0%, rgba(255, 210, 63, 0.4) 40%, #ffd23f 100%) !important;
    box-shadow: 0 0 5px rgba(255, 210, 63, 0.45) !important;
}

.mw-clean-laser-line.right {
    background: linear-gradient(90deg, #ffd23f 0%, rgba(255, 210, 63, 0.4) 60%, transparent 100%) !important;
    box-shadow: 0 0 5px rgba(255, 210, 63, 0.45) !important;
}

.mw-clean-tagline-text {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 7px !important;
    font-weight: 600 !important;
    letter-spacing: 0.035em !important;
    text-transform: none !important;
    white-space: nowrap !important;
    display: flex !important;
    gap: 3px !important;
    line-height: 1 !important;
}

.tag-brand-white { color: #ffffff !important; }
.tag-brand-gold { color: #ffd23f !important; }

/* 5. NAVBAR LINKS & CAPSULE ITEMS (DESKTOP - NATURAL SNUG SPACING) */
@media (min-width: 992px) {
    .luxury-nav-capsule .navbar-collapse {
        display: flex !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        justify-content: flex-start !important;
        margin-left: 0 !important;
        height: 100% !important;
    }

    .luxury-nav-capsule .navbar-nav {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 4px !important;
        margin: 0 14px 0 24px !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .luxury-nav-capsule .navbar-nav .nav-item {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
        margin: 0 !important;
    }

    .luxury-nav-capsule .navbar-nav .nav-link {
        display: inline-flex !important;
        align-items: center !important;
        padding: 8px 12px !important;
        font-family: 'Plus Jakarta Sans', sans-serif !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #dfdfe6 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 999px !important;
        text-decoration: none !important;
        transition: color 0.2s ease !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .luxury-nav-capsule .navbar-nav .nav-link:hover,
    .luxury-nav-capsule .navbar-nav .nav-link[aria-expanded="true"] {
        color: #ffd23f !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .luxury-nav-capsule .navbar-nav .nav-link.active {
        color: #ffffff !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        font-weight: 600 !important;
    }

    .luxury-nav-capsule .dropdown-toggle::after {
        display: inline-block !important;
        margin-left: 5px !important;
        vertical-align: 0.15em !important;
        content: "" !important;
        border-top: 0.3em solid !important;
        border-right: 0.3em solid transparent !important;
        border-bottom: 0 !important;
        border-left: 0.3em solid transparent !important;
        opacity: 0.75 !important;
        transition: transform 0.2s ease !important;
    }

    .luxury-nav-capsule .nav-item.dropdown:hover .dropdown-toggle::after {
        transform: rotate(180deg) !important;
        color: #ffd23f !important;
    }

    /* POINT 1: LEARN EXACT COLLINEAR SEEDH MEIN WITH OUR WORK & by Earnix Academy UNDERNEATH (MIXED CASE) */
    .nav-item-learn {
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
        position: relative !important;
    }

    .luxury-nav-capsule .navbar-nav .nav-link-learn {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px 12px !important;
        line-height: 1 !important;
        position: relative !important;
        height: auto !important;
        border-radius: 999px !important;
        text-decoration: none !important;
    }

    /* SPECIFICITY OVERRIDE: Suppress default Bootstrap ::after triangle on Learn */
    .luxury-nav-capsule .dropdown-toggle.nav-link-learn::after,
    .luxury-nav-capsule .nav-link-learn::after {
        display: none !important;
        content: none !important;
        border: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    .learn-top-row {
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        line-height: 1 !important;
        transform: none !important;
    }

    .learn-text-label {
        font-family: 'Plus Jakarta Sans', sans-serif !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #dfdfe6 !important;
        line-height: 1 !important;
        transition: color 0.2s ease !important;
    }

    .nav-link-learn .learn-arrow {
        width: 8px !important;
        height: 5px !important;
        color: #dfdfe6 !important;
        opacity: 0.75 !important;
        transition: transform 0.2s ease, color 0.2s ease !important;
        display: inline-block !important;
    }

    .nav-link-learn:hover .learn-text-label,
    .nav-link-learn[aria-expanded="true"] .learn-text-label {
        color: #ffd23f !important;
    }

    .nav-link-learn:hover .learn-arrow,
    .nav-link-learn[aria-expanded="true"] .learn-arrow {
        transform: rotate(180deg) !important;
        color: #ffd23f !important;
    }

    .nav-learn-sub {
        position: absolute !important;
        bottom: -3px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        font-family: 'Plus Jakarta Sans', sans-serif !important;
        font-size: 6.8px !important;
        font-weight: 600 !important;
        color: #ffd23f !important;
        letter-spacing: 0.2px !important;
        text-transform: none !important; /* NOT CAPITAL LETTERS */
        line-height: 1 !important;
        white-space: nowrap !important;
        pointer-events: none !important;
        margin: 0 !important;
        display: block !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
    }

    /* POINT 2: PROMINENTLY HIGHLIGHTED "ORDER PROJECT INSTANT" MENU BADGE (MATCHING USER REF) */
    .luxury-nav-capsule .navbar-nav .nav-link-instant-order {
        display: inline-flex !important;
        align-items: center !important;
        gap: 7px !important;
        background: rgba(12, 13, 18, 0.95) !important;
        border: 1.2px solid rgba(255, 210, 63, 0.65) !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 210, 63, 0.2) !important;
        padding: 6px 14px 6px 12px !important;
        border-radius: 999px !important;
        color: #ffffff !important;
        font-family: 'Plus Jakarta Sans', sans-serif !important;
        font-size: 13.5px !important;
        font-weight: 600 !important;
        letter-spacing: 0.1px !important;
        text-shadow: none !important;
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .luxury-nav-capsule .navbar-nav .nav-link-instant-order:hover,
    .luxury-nav-capsule .navbar-nav .nav-link-instant-order[aria-expanded="true"] {
        border-color: #ffd23f !important;
        box-shadow: 0 0 18px rgba(255, 210, 63, 0.4), inset 0 1px 2px rgba(255, 210, 63, 0.35) !important;
        color: #ffffff !important;
        background: rgba(20, 20, 28, 0.98) !important;
        transform: translateY(-1px) !important;
    }

    .order-bolt-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #ffaa1d !important;
        font-size: 13px !important;
        filter: drop-shadow(0 0 5px rgba(255, 170, 29, 0.85)) !important;
        animation: boltGlow 2.2s infinite ease-in-out !important;
    }

    .luxury-nav-capsule .nav-link-instant-order.dropdown-toggle::after {
        color: #ffd23f !important;
        margin-left: 6px !important;
        vertical-align: 0.12em !important;
        opacity: 0.9 !important;
    }

    @keyframes boltGlow {
        0%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(255, 170, 29, 0.7)); }
        50% { transform: scale(1.15); filter: drop-shadow(0 0 9px rgba(255, 200, 50, 1)); }
    }
}

/* 6. UNIVERSAL LUXURY CTA BUTTON (SINGLE BUTTON ON FAR RIGHT) */
.nav-cta-wrapper {
    display: flex !important;
    align-items: center !important;
    margin-left: 4px !important;
    flex-shrink: 0 !important;
}

.btn-luxury-header-cta {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 42px !important;
    padding: 0 22px !important;
    background: linear-gradient(135deg, #ffe580 0%, #ffd23f 40%, #e6b800 100%) !important;
    color: #08080a !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    border: 1px solid rgba(255, 240, 160, 0.7) !important;
    box-shadow: 0 6px 20px rgba(255, 210, 63, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.8) !important;
    overflow: hidden !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
}

.btn-luxury-header-cta:hover {
    transform: translateY(-1px) scale(1.02) !important;
    box-shadow: 0 10px 28px rgba(255, 210, 63, 0.55), inset 0 1px 2px #ffffff !important;
    color: #000000 !important;
}

.btn-shimmer-sheen {
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 60% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent) !important;
    transform: skewX(-25deg) !important;
    animation: ctaSheen 4s infinite ease-in-out !important;
    pointer-events: none !important;
}

@keyframes ctaSheen {
    0%, 75% { left: -100%; }
    100% { left: 200%; }
}

.cta-arrow {
    display: inline-block !important;
    transition: transform 0.22s ease !important;
    font-weight: 800 !important;
}

.btn-luxury-header-cta:hover .cta-arrow {
    transform: translateX(4px) !important;
}

/* 6b. RESPONSIVE CONDENSING FOR SCREENS 992px - 1199px */
@media (min-width: 992px) and (max-width: 1199px) {
    .luxury-nav-capsule {
        padding: 5px 8px 5px 16px !important;
    }
    .luxury-nav-capsule .navbar-nav {
        gap: 3px !important;
        margin: 0 8px 0 auto !important;
    }
    .luxury-nav-capsule .navbar-nav .nav-link {
        padding: 6px 8px !important;
        font-size: 13px !important;
    }
    .nav-link-instant-order {
        padding: 6px 10px !important;
        font-size: 12.5px !important;
    }
    .btn-luxury-header-cta {
        padding: 0 16px !important;
        height: 38px !important;
        font-size: 12.5px !important;
    }
    .mw-aclonica-wordmark {
        font-size: 22px !important;
    }
    .mw-clean-tagline-text {
        font-size: 6.2px !important;
    }
}

/* 7. LUXURY DROPDOWN MENUS (DESKTOP) */
@media (min-width: 992px) {
    .luxury-nav-capsule .nav-item.dropdown {
        position: relative !important;
    }

    .mw-luxury-dropdown {
        position: absolute !important;
        top: calc(100% + 14px) !important;
        left: 0 !important;
        transform: translateY(6px) !important;
        min-width: 320px !important;
        background: rgba(12, 12, 16, 0.98) !important;
        border: 1px solid rgba(255, 210, 63, 0.4) !important;
        border-radius: 16px !important;
        box-shadow: 0 25px 70px rgba(0, 0, 0, 0.95), 0 0 35px rgba(255, 210, 63, 0.22) !important;
        padding: 10px !important;
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s ease !important;
        z-index: 9999999 !important;
        list-style: none !important;
        margin: 0 !important;
    }

    .mw-luxury-dropdown::before {
        content: '' !important;
        position: absolute !important;
        top: -18px !important;
        left: 0 !important;
        right: 0 !important;
        height: 20px !important;
        background: transparent !important;
    }

    .luxury-nav-capsule .nav-item.dropdown:last-of-type .mw-luxury-dropdown,
    .order-dropdown-luxury {
        left: auto !important;
        right: 0 !important;
    }

    .luxury-nav-capsule .nav-item.dropdown:hover > .mw-luxury-dropdown,
    .mw-luxury-dropdown.show {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
        pointer-events: auto !important;
    }

    .mw-luxury-dropdown .drop-item {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 10px 12px !important;
        border-radius: 12px !important;
        text-decoration: none !important;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
        border: 1px solid transparent !important;
    }

    .mw-luxury-dropdown .drop-item:hover {
        background: rgba(255, 210, 63, 0.08) !important;
        border-color: rgba(255, 210, 63, 0.3) !important;
        transform: translateX(4px) !important;
    }

    .mw-luxury-dropdown .drop-icon {
        width: 38px !important;
        height: 38px !important;
        border-radius: 10px !important;
        background: radial-gradient(circle at 35% 35%, rgba(255, 210, 63, 0.28) 0%, rgba(255, 210, 63, 0.09) 100%) !important;
        border: 1.5px solid rgba(255, 210, 63, 0.55) !important;
        box-shadow: 0 0 14px rgba(255, 210, 63, 0.35), inset 0 0 8px rgba(255, 210, 63, 0.2) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
    }

    .mw-luxury-dropdown .drop-item:hover .drop-icon {
        transform: scale(1.08) rotate(3deg) !important;
        box-shadow: 0 0 20px rgba(255, 210, 63, 0.6), inset 0 0 10px rgba(255, 210, 63, 0.4) !important;
        border-color: #ffd23f !important;
    }

    .mw-luxury-dropdown .drop-text {
        display: flex !important;
        flex-direction: column !important;
        line-height: 1.3 !important;
    }

    .mw-luxury-dropdown .drop-text strong {
        font-family: 'Plus Jakarta Sans', sans-serif !important;
        font-size: 14.5px !important;
        font-weight: 600 !important;
        color: #ffffff !important;
        transition: color 0.2s ease !important;
    }

    .mw-luxury-dropdown .drop-item:hover .drop-text strong {
        color: #ffd23f !important;
    }

    .mw-luxury-dropdown .drop-text small {
        font-family: 'Plus Jakarta Sans', sans-serif !important;
        font-size: 11.5px !important;
        color: #94a3b8 !important;
        font-weight: 400 !important;
        margin-top: 2px !important;
    }

    .dropdown-divider-luxury {
        height: 1px !important;
        background: linear-gradient(90deg, transparent, rgba(255, 210, 63, 0.25), transparent) !important;
        margin: 6px 0 !important;
        border: none !important;
    }

    .drop-view-all {
        justify-content: center !important;
        text-align: center !important;
        padding: 8px 12px !important;
        background: rgba(255, 210, 63, 0.05) !important;
        border-radius: 8px !important;
        font-weight: 600 !important;
        font-size: 12.5px !important;
        color: #ffd23f !important;
    }

    .drop-view-all:hover {
        background: rgba(255, 210, 63, 0.15) !important;
        color: #ffffff !important;
    }
}

/* 8. MOBILE RESPONSIVENESS (<= 991px) */
@media (max-width: 991px) {
    .top-bar,
    aside.top-bar,
    .th-master-fixed-header .top-bar {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        border: none !important;
    }

    .th-master-fixed-header {
        top: 0 !important;
        padding: 8px 10px 0 10px !important;
    }

    .th-master-fixed-header .th-luxury-navbar,
    .th-luxury-navbar {
        margin-top: 0 !important;
    }

    .luxury-nav-capsule,
    .nav-menu-container.luxury-nav-capsule {
        min-height: 52px !important;
        height: 52px !important;
        padding: 4px 10px 4px 14px !important;
        border-radius: 999px !important;
        width: 100% !important;
        display: flex !important;
    }

    .mw-aclonica-wordmark {
        font-size: 22px !important;
    }

    .mw-clean-tagline-text {
        font-size: 6px !important;
    }

    /* Hamburger Toggler Button */
    .navbar-toggler {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 38px !important;
        height: 38px !important;
        padding: 0 !important;
        border: 1px solid rgba(255, 210, 63, 0.3) !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border-radius: 10px !important;
        cursor: pointer !important;
    }

    .mw-hamburger-box {
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
        width: 18px !important;
    }

    .mw-hamburger-line {
        display: block !important;
        width: 100% !important;
        height: 2px !important;
        background: #ffd23f !important;
        border-radius: 2px !important;
        transition: all 0.25s ease !important;
    }

    /* Mobile Collapse Menu */
    .luxury-nav-capsule .navbar-collapse {
        position: absolute !important;
        top: 58px !important;
        left: 0 !important;
        right: 0 !important;
        background: rgba(12, 15, 24, 0.98) !important;
        backdrop-filter: blur(32px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(32px) saturate(180%) !important;
        border: 1.5px solid rgba(255, 210, 63, 0.4) !important;
        border-radius: 20px !important;
        box-shadow: 0 25px 65px rgba(0, 0, 0, 0.95), 0 0 35px rgba(255, 210, 63, 0.2) !important;
        padding: 14px !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
    }

    .luxury-nav-capsule .navbar-collapse:not(.show) {
        display: none !important;
    }

    .luxury-nav-capsule .navbar-collapse.show {
        display: block !important;
    }

    .luxury-nav-capsule .navbar-nav {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 6px !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    .luxury-nav-capsule .navbar-nav .nav-item {
        width: 100% !important;
        margin: 0 !important;
        display: block !important;
    }

    .luxury-nav-capsule .navbar-nav .nav-link {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 12px 14px !important;
        border-radius: 12px !important;
        background: rgba(255, 255, 255, 0.04) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        font-family: 'Plus Jakarta Sans', sans-serif !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #ffffff !important;
        text-decoration: none !important;
    }

    .luxury-nav-capsule .navbar-nav .nav-link:active,
    .luxury-nav-capsule .navbar-nav .nav-link:hover,
    .luxury-nav-capsule .navbar-nav .nav-link[aria-expanded="true"] {
        background: rgba(255, 210, 63, 0.12) !important;
        border-color: rgba(255, 210, 63, 0.45) !important;
        color: #ffd23f !important;
    }

    .luxury-nav-capsule .nav-cta-wrapper {
        display: block !important;
        width: 100% !important;
        margin-top: 12px !important;
        padding-top: 12px !important;
        border-top: 1px solid rgba(255, 210, 63, 0.2) !important;
        margin-left: 0 !important;
    }

    .luxury-nav-capsule .nav-cta-wrapper .btn-luxury-header-cta {
        width: 100% !important;
        justify-content: center !important;
    }

    .luxury-nav-capsule .mw-luxury-dropdown {
        display: none !important;
        width: 100% !important;
        background: rgba(8, 10, 16, 0.95) !important;
        border: 1px solid rgba(255, 210, 63, 0.3) !important;
        border-radius: 12px !important;
        padding: 6px !important;
        margin-top: 6px !important;
        box-shadow: none !important;
        list-style: none !important;
    }

    .luxury-nav-capsule .mw-luxury-dropdown.show {
        display: block !important;
    }

    .luxury-nav-capsule .mw-luxury-dropdown .drop-item {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 8px 10px !important;
        border-radius: 8px !important;
        text-decoration: none !important;
        color: #ffffff !important;
    }

    .luxury-nav-capsule .mw-luxury-dropdown .drop-icon {
        width: 32px !important;
        height: 32px !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255, 210, 63, 0.15) !important;
        border: 1px solid rgba(255, 210, 63, 0.4) !important;
    }

    .luxury-nav-capsule .mw-luxury-dropdown .drop-text strong {
        font-size: 13.5px !important;
        color: #ffffff !important;
    }

    .luxury-nav-capsule .mw-luxury-dropdown .drop-text small {
        font-size: 11px !important;
        color: #94a3b8 !important;
    }
}

/* 9. UNIVERSAL HERO TOP SPACING FOR ALL PAGES */
.th-clean-hero-stage,
.th-hero-master-stage,
.th-hero-section,
.aw-hero-section,
.v2-order-hero,
.contact-page-wrapper,
.aw-showcase-container,
.legal-page-wrapper,
section.section.py-5:first-of-type,
.hero-section {
    padding-top: 140px !important;
}

@media (max-width: 991px) {
    .th-clean-hero-stage,
    .th-hero-master-stage,
    .th-hero-section,
    .aw-hero-section,
    .contact-page-wrapper,
    .aw-showcase-container,
    .legal-page-wrapper,
    section.section.py-5:first-of-type,
    .hero-section {
        padding-top: 105px !important;
    }

    .v2-order-hero {
        padding-top: calc(88px + env(safe-area-inset-top, 0px) + 48px) !important;
    }

    .v2-order-hero .studio-pipeline-status,
    .v2-hero-left .studio-pipeline-status {
        margin-top: 14px !important;
        margin-bottom: 16px !important;
    }
}

/* Remove Pricing menu item from main navbar */
.navbar-nav .nav-item:has(a[href*="pricing"]),
.navbar-nav a[href*="pricing"].nav-link,
.th-luxury-navbar a[href*="pricing"].nav-link {
    display: none !important;
}

/* ==========================================================================
   TIER CARDS TIGHT LUXURY PROPORTIONS (ELIMINATES DEAD SPACE GAP)
   ========================================================================== */
.v2-tier-card,
.mw-tier-v3-card {
    min-height: auto !important;
    height: auto !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    padding: 10px 12px !important;
}

.v2-tier-card .tier-v3-select-indicator,
.mw-tier-v3-card .tier-v3-select-indicator {
    margin-top: 8px !important;
    padding-top: 6px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.v2-tier-card .tier-v3-specs,
.mw-tier-v3-card .tier-v3-specs {
    margin-top: 4px !important;
    margin-bottom: 0 !important;
    gap: 4px !important;
}


        /* 4-Item Complimentary Strip Perfect 2x2 Mobile Grid */
        @media (max-width: 768px) {
            .mw-inclusions-strip {
                padding: 8px 10px !important;
                margin-top: 8px !important;
                border-radius: 10px !important;
                gap: 6px !important;
            }
            .inc-badge {
                font-size: 8.5px !important;
            }
            .inc-items-row {
                display: grid !important;
                grid-template-columns: 1fr 1fr !important;
                gap: 6px 10px !important;
                font-size: 10.5px !important;
                width: 100% !important;
            }
            .inc-items-row span:not(.inc-sep) {
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                gap: 5px !important;
                white-space: nowrap !important;
            }
            .inc-items-row .inc-sep {
                display: none !important;
            }
        }



                /* Step 3 Luxury Contact Details Form (Spacious & Comfortable) */
        .mw-form-fields-grid {
            display: grid !important;
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 10px 14px !important;
            margin-bottom: 12px !important;
        }
        .mw-field label {
            font-size: 11px !important;
            margin-bottom: 4px !important;
            letter-spacing: 0.5px !important;
            font-weight: 700 !important;
            color: #cbd5e1 !important;
            text-transform: uppercase !important;
            display: block !important;
        }
        .mw-luxury-input,
        .mw-phone-group .phone-input {
            padding: 10px 14px !important;
            font-size: 14px !important;
            border-radius: 9px !important;
            height: 44px !important;
            box-sizing: border-box !important;
        }
        .mw-phone-group {
            border-radius: 9px !important;
            height: 44px !important;
        }
        .mw-phone-group .phone-prefix {
            line-height: 44px !important;
            padding: 0 12px !important;
            font-size: 13px !important;
            font-weight: 700 !important;
        }
        .mw-phone-group .phone-input {
            height: 44px !important;
            font-size: 14px !important;
            padding-left: 10px !important;
        }
        .mw-escrow-reassurance-card {
            padding: 9px 12px !important;
            gap: 10px !important;
            margin-bottom: 10px !important;
            border-radius: 9px !important;
        }
        .escrow-icon-wrap {
            width: 28px !important;
            height: 28px !important;
            min-width: 28px !important;
            font-size: 12px !important;
            border-radius: 7px !important;
        }
        .escrow-title {
            font-size: 12px !important;
            line-height: 1.3 !important;
            display: block !important;
        }
        .escrow-desc {
            font-size: 10px !important;
            line-height: 1.3 !important;
            margin-top: 2px !important;
            margin-bottom: 0 !important;
        }
        @media (max-width: 640px) {
            .mw-form-fields-grid {
                grid-template-columns: 1fr !important;
                gap: 10px !important;
                margin-bottom: 12px !important;
            }
            .mw-field label {
                font-size: 10.5px !important;
                margin-bottom: 4px !important;
            }
            .mw-luxury-input,
            .mw-phone-group .phone-input {
                padding: 10px 14px !important;
                font-size: 14px !important;
                height: 44px !important;
                border-radius: 9px !important;
            }
            .mw-phone-group {
                height: 44px !important;
                border-radius: 9px !important;
            }
            .mw-phone-group .phone-prefix {
                line-height: 44px !important;
                padding: 0 12px !important;
                font-size: 13px !important;
            }
            .btn-mw-lock-sprint {
                padding: 11px 16px !important;
                min-height: 46px !important;
                border-radius: 10px !important;
            }
            .lock-title {
                font-size: 13px !important;
            }
            .lock-sub {
                font-size: 9px !important;
            }
            .btn-mw-wa-sprint {
                padding: 9px 14px !important;
                font-size: 12px !important;
                min-height: 40px !important;
                border-radius: 9px !important;
                margin-top: 6px !important;
            }
            .mw-sprint-proof-pills {
                font-size: 9px !important;
                gap: 3px 8px !important;
                margin-top: 6px !important;
            }
        }



        /* Executive Summary Perfect Responsive & Typography */
        .v2-sum-val.inc-val {
            font-size: 10px !important;
            color: #cbd5e1 !important;
            font-weight: 600 !important;
            max-width: none !important;
            text-align: right !important;
            line-height: 1.3 !important;
        }
        .executive-payment-trust {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 5px !important;
            padding-top: 6px !important;
            border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
            width: 100% !important;
            box-sizing: border-box !important;
            text-align: center !important;
        }
        .trust-micro-note {
            font-size: 9.5px !important;
            color: #94a3b8 !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 4px !important;
            white-space: nowrap !important;
        }
        .trust-icons-strip {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 4px !important;
            flex-wrap: wrap !important;
            width: 100% !important;
        }
        .trust-pill {
            font-size: 8.5px !important;
            font-weight: 800 !important;
            color: #cbd5e1 !important;
            background: rgba(255, 255, 255, 0.05) !important;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
            border-radius: 4px !important;
            padding: 2px 5px !important;
            white-space: nowrap !important;
        }
        .executive-guarantees-grid {
            display: grid !important;
            grid-template-columns: 1fr 1fr !important;
            gap: 4px !important;
            width: 100% !important;
        }
        .exec-guarantee-item {
            padding: 4px 6px !important;
            border-radius: 6px !important;
            background: rgba(255, 255, 255, 0.03) !important;
            border: 1px solid rgba(255, 255, 255, 0.07) !important;
            display: flex !important;
            align-items: center !important;
            gap: 5px !important;
        }
        .exec-guarantee-item span {
            font-size: 9px !important;
            font-weight: 700 !important;
            color: #cbd5e1 !important;
            white-space: nowrap !important;
        }
        .luxury-milestone-box {
            padding: 7px 10px !important;
            gap: 8px !important;
            border-radius: 8px !important;
            background: rgba(255, 210, 63, 0.04) !important;
            border: 1px solid rgba(255, 210, 63, 0.22) !important;
        }
        .milestone-badge {
            font-size: 8px !important;
            letter-spacing: 0.05em !important;
        }
        .milestone-price {
            font-size: 1.05rem !important;
        }
        .milestone-name {
            font-size: 9.5px !important;
        }
        @media (max-width: 991px) {
            .v2-summary-card,
            .executive-summary-card {
                padding: 13px 14px 11px !important;
                gap: 7px !important;
                border-radius: 13px !important;
                margin-top: 12px !important;
                width: 100% !important;
                box-sizing: border-box !important;
            }
            .trust-micro-note {
                font-size: 9px !important;
            }
            .trust-pill {
                font-size: 8px !important;
                padding: 1.5px 4px !important;
            }
        }



/* ==========================================================================
   ULTRA-LUXURY 24K LIQUID GOLD RIBBON (PRESTIGE AWARD SASH)
   ========================================================================== */
.tier-v3-ribbon {
    position: absolute !important;
    top: -10px !important;
    right: 14px !important;
    background: linear-gradient(135deg, #FFF7B8 0%, #FFD23F 30%, #F59E0B 70%, #D97706 100%) !important;
    color: #07080b !important;
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif) !important;
    font-size: 8.5px !important;
    font-weight: 900 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    padding: 3.5px 14px 3.5px 14px !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 14px rgba(255, 210, 63, 0.45)) !important;
    clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 50%, 100% 100%, 0 100%, 6px 50%) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    z-index: 5 !important;
}

.tier-v3-ribbon::before,
.tier-v3-ribbon::after {
    display: none !important;
}