/* ==========================================================================
   HEROES DOCUMENTARY SERIES — MASTER EDITORIAL STYLESHEET
   Brand Design System & Cinematic Visual Guidelines
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. DESIGN TOKENS & CSS VARIABLES
   -------------------------------------------------------------------------- */
:root {
    /* Primary Color Palette */
    --clr-obsidian: #090807;
    /* Primary Dark: Hero, Cinematic, Footer */
    --clr-espresso: #1A100B;
    /* Secondary Dark: Panels, Overlays, Dark Cards */
    --clr-espresso-deep: #120B07;
    /* Inner Dark Wells */

    --clr-antique-gold: #C79A3B;
    /* Primary Accent: CTAs, Numbers, Dividers, Highlights */
    --clr-champagne: #E6D0A0;
    /* Secondary Gold: Subtle borders, Dark Typography */
    --clr-gold-glow: rgba(199, 154, 59, 0.28);
    --clr-gold-border: rgba(199, 154, 59, 0.35);

    --clr-warm-ivory: #F5EEE3;
    /* Primary Light: Light sections, Information, Ivory Cards */
    --clr-warm-ivory-alt: #ECE3D4;
    --clr-charcoal: #2A2521;
    /* Text Dark: Body text on light backgrounds */
    --clr-charcoal-muted: #574F49;

    /* Typography */
    --font-display: 'Noto Serif Display', Georgia, serif;
    --font-body: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Grid & Layout */
    --container-max: 1280px;
    --section-pad-desktop: 7rem 0;
    --section-pad-mobile: 4.5rem 0;
    --radius-sm: 4px;
    --radius-md: 6px;

    /* Transitions */
    --ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1);
    --transition-base: all 0.35s var(--ease-cinematic);
}

/* --------------------------------------------------------------------------
   02. RESET & GLOBAL STYLES
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--clr-obsidian);
    color: var(--clr-champagne);
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.65;
    background-color: var(--clr-obsidian);
    overflow-x: hidden;
    position: relative;
}

/* Selection */
::selection {
    background-color: var(--clr-antique-gold);
    color: var(--clr-obsidian);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 7px;
}

::-webkit-scrollbar-track {
    background: var(--clr-obsidian);
}

::-webkit-scrollbar-thumb {
    background: var(--clr-antique-gold);
    border-radius: 3px;
}

/* --------------------------------------------------------------------------
   03. TYPOGRAPHY SYSTEM
   -------------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

p {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    /* 17px */
    line-height: 1.7;
}

.eyebrow {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    /* 13px */
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--clr-antique-gold);
    display: inline-block;
}

.eyebrow-dark {
    color: var(--clr-antique-gold);
}

.gold-highlight,
.gold-text-highlight {
    color: var(--clr-antique-gold);
}

.gold-rule {
    width: 60px;
    height: 1.5px;
    background: var(--clr-antique-gold);
    margin-top: 0.5rem;
}

/* Chapter Number Header */
.chapter-header {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.chapter-number {
    font-family: var(--font-display);
    font-size: 4.5rem;
    /* 72px */
    font-weight: 800;
    line-height: 0.85;
    color: var(--clr-antique-gold);
    opacity: 0.85;
    user-select: none;
}

.chapter-meta {
    display: flex;
    flex-direction: column;
    padding-top: 0.4rem;
}

/* Section Containers */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 2.5rem;
}

/* Section Theming Rhythms */
.section-dark {
    background-color: var(--clr-obsidian);
    background-image: radial-gradient(circle at 50% 30%, rgba(9, 8, 7, 0.45) 0%, rgba(9, 8, 7, 0.88) 100%), url('assets/cinematic-dark-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--clr-warm-ivory);
    padding: var(--section-pad-desktop);
    position: relative;
    border-bottom: 1px solid rgba(199, 154, 59, 0.12);
}

.section-light:not(.why-heroes-section),
.format-section,
.more-than-interview-section,
.ecosystem-value-section,
.meet-producers-section,
.original-productions-section,
.faq-section {
    background-color: #FAF6EF !important;
    background-image:
        linear-gradient(rgba(250, 246, 239, 0.72), rgba(250, 246, 239, 0.72)),
        url('assets/heroes-light-bg.png') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    color: var(--clr-charcoal);
    padding: var(--section-pad-desktop);
    position: relative;
    border-bottom: 1px solid rgba(230, 208, 160, 0.4);
}

/* --------------------------------------------------------------------------
   04. BUTTON SYSTEM (With Default Glass Reflection Animation)
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.9rem 1.85rem;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition-base);
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Continuous Glass Light-Sweep Shimmer */
.btn::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -130%;
    width: 70%;
    height: 200%;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.15) 30%,
            rgba(255, 255, 255, 0.5) 50%,
            rgba(255, 255, 255, 0.15) 70%,
            transparent 100%);
    transform: rotate(25deg);
    pointer-events: none;
    z-index: 2;
    animation: btnGlassShimmer 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.btn:hover::before {
    animation: btnGlassShimmerHover 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes btnGlassShimmer {

    0%,
    60% {
        left: -130%;
        opacity: 0;
    }

    68% {
        opacity: 1;
    }

    88%,
    100% {
        left: 170%;
        opacity: 0;
    }
}

@keyframes btnGlassShimmerHover {
    0% {
        left: -130%;
        opacity: 0.9;
    }

    100% {
        left: 170%;
        opacity: 0.9;
    }
}

.btn-arrow {
    transition: transform 0.3s var(--ease-cinematic);
    display: inline-block;
    position: relative;
    z-index: 3;
}

.btn:hover .btn-arrow {
    transform: translateX(5px);
}

.btn-primary {
    background-color: var(--clr-antique-gold);
    color: var(--clr-obsidian);
    border-color: var(--clr-antique-gold);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.45), 0 4px 18px rgba(199, 154, 59, 0.3);
}

.btn-primary:hover {
    background-color: #d8aa49;
    border-color: #d8aa49;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.6), 0 6px 25px rgba(199, 154, 59, 0.5);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: var(--clr-champagne);
    border-color: rgba(230, 208, 160, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15), 0 4px 16px rgba(0, 0, 0, 0.35);
}

.btn-secondary:hover {
    border-color: var(--clr-antique-gold);
    color: #fff;
    background-color: rgba(199, 154, 59, 0.18);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3), 0 0 18px rgba(199, 154, 59, 0.35);
}

.btn-nav {
    padding: 0.65rem 1.35rem;
    font-size: 0.75rem;
}

.btn-large-cta {
    padding: 1.15rem 2.5rem;
    font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   05. SITE HEADER / NAVIGATION
   -------------------------------------------------------------------------- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: rgba(9, 8, 7, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(199, 154, 59, 0.15);
    transition: var(--transition-base);
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100px;
}

.brand-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}

.header-logo-img {
    height: 80px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.8));
    display: block;
}

.brand-name {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: 0.15em;
    color: var(--clr-warm-ivory);
}

.main-nav ul {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 1.85rem;
}

.nav-link {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--clr-champagne);
    opacity: 0.85;
    transition: var(--transition-base);
    position: relative;
    padding: 0.35rem 0;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 1.5px;
    background-color: var(--clr-antique-gold);
    transition: width 0.3s var(--ease-cinematic);
}

.nav-link:hover,
.nav-link.active {
    opacity: 1;
    color: #fff;
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.header-digikore-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.header-digikore-logo {
    height: 44px;
    width: auto;
    max-width: 185px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.7));
    transition: transform 0.25s ease, opacity 0.25s ease, filter 0.25s ease;
    opacity: 0.95;
}

.header-digikore-link:hover .header-digikore-logo {
    opacity: 1;
    transform: scale(1.04);
    filter: drop-shadow(0 4px 14px rgba(200, 154, 58, 0.45));
}

.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
    padding: 5px;
}

.mobile-menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--clr-antique-gold);
    transition: var(--transition-base);
}

/* --------------------------------------------------------------------------
   06. SECTION 01 — HERO (THEATRE / STUDIO INTERVIEW STAGE)
   -------------------------------------------------------------------------- */
.hero-theatre-stage {
    position: relative;
    min-height: 100vh;
    min-height: clamp(800px, 98vh, 1080px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #0c0806;
    padding-top: 95px;
    padding-bottom: 3.5rem;
}

/* LAYER 01: Full-Bleed Symmetrical Theatre Stage Background */
.hero-theatre-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url('assets/hero-theatre-stage-bg.jpg') no-repeat center center;
    background-size: cover;
    filter: brightness(0.85) contrast(1.08);
}

.hero-theatre-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(9, 8, 7, 0.72) 0%, rgba(9, 8, 7, 0.38) 36%, rgba(9, 8, 7, 0.86) 100%),
        radial-gradient(ellipse at 50% 46%, rgba(9, 8, 7, 0.74) 0%, rgba(9, 8, 7, 0.3) 48%, rgba(9, 8, 7, 0.92) 100%),
        rgba(12, 7, 5, 0.35);
    pointer-events: none;
}

/* LAYER 02: Dual Overhead Spotlights & Atmospheric Glow */
.hero-theatre-atmosphere {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* Left Chair Spotlight */
.theatre-spotlight.spotlight-left {
    position: absolute;
    top: -160px;
    left: 8%;
    width: 440px;
    height: 880px;
    background: conic-gradient(from 145deg at 30% 0%,
            rgba(240, 202, 128, 0.32) 0deg,
            rgba(217, 154, 67, 0.18) 18deg,
            transparent 38deg,
            transparent 322deg,
            rgba(217, 154, 67, 0.18) 342deg,
            rgba(240, 202, 128, 0.32) 360deg);
    filter: blur(35px);
    transform: rotate(14deg);
    pointer-events: none;
    animation: spotlightLeftFlicker 6.5s ease-in-out infinite, spotlightLeftSway 9s ease-in-out infinite alternate;
    transform-origin: 30% 0%;
}

/* Right Chair Spotlight */
.theatre-spotlight.spotlight-right {
    position: absolute;
    top: -160px;
    right: 8%;
    width: 440px;
    height: 880px;
    background: conic-gradient(from 215deg at 70% 0%,
            rgba(240, 202, 128, 0.32) 0deg,
            rgba(217, 154, 67, 0.18) 18deg,
            transparent 38deg,
            transparent 322deg,
            rgba(217, 154, 67, 0.18) 342deg,
            rgba(240, 202, 128, 0.32) 360deg);
    filter: blur(35px);
    transform: rotate(-14deg);
    pointer-events: none;
    animation: spotlightRightFlicker 7.5s ease-in-out infinite, spotlightRightSway 10s ease-in-out infinite alternate;
    transform-origin: 70% 0%;
}

@keyframes spotlightLeftFlicker {

    0%,
    100% {
        opacity: 0.85;
        filter: blur(35px);
    }

    18% {
        opacity: 0.95;
    }

    19% {
        opacity: 0.62;
        filter: blur(31px);
    }

    20% {
        opacity: 0.98;
        filter: blur(36px);
    }

    22% {
        opacity: 0.76;
    }

    23% {
        opacity: 1.0;
        filter: blur(34px);
    }

    55% {
        opacity: 0.90;
    }

    56% {
        opacity: 0.68;
    }

    57% {
        opacity: 0.96;
    }

    82% {
        opacity: 0.84;
    }

    83% {
        opacity: 0.64;
    }

    84% {
        opacity: 0.94;
    }
}

@keyframes spotlightRightFlicker {

    0%,
    100% {
        opacity: 0.88;
        filter: blur(35px);
    }

    31% {
        opacity: 0.92;
    }

    32% {
        opacity: 0.64;
        filter: blur(32px);
    }

    33% {
        opacity: 1.0;
        filter: blur(36px);
    }

    35% {
        opacity: 0.78;
    }

    36% {
        opacity: 0.98;
    }

    68% {
        opacity: 0.88;
    }

    69% {
        opacity: 0.60;
    }

    70% {
        opacity: 0.96;
        filter: blur(34px);
    }

    91% {
        opacity: 0.85;
    }

    92% {
        opacity: 0.70;
    }

    93% {
        opacity: 0.96;
    }
}

@keyframes spotlightLeftSway {
    0% {
        transform: rotate(12deg) scaleY(0.96);
    }

    100% {
        transform: rotate(16deg) scaleY(1.04);
    }
}

@keyframes spotlightRightSway {
    0% {
        transform: rotate(-12deg) scaleY(0.96);
    }

    100% {
        transform: rotate(-16deg) scaleY(1.04);
    }
}

.theatre-center-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(200, 121, 37, 0.18) 0%, rgba(138, 63, 18, 0.08) 50%, transparent 75%);
    filter: blur(65px);
}

.hero-flare-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

/* LAYER 03: Central Stage Content Frame (Between The Chairs) */
.hero-theatre-container {
    position: relative;
    z-index: 4;
    width: 100%;
    max-width: 1360px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-theatre-content {
    max-width: 900px;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 1rem;
}

.hero-stage-emblem {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

.hero-stage-logo-img {
    width: 100%;
    max-width: 115px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.92));
    display: block;
}

@media (max-width: 1024px) {
    .site-header .header-container {
        height: 80px;
    }

    .header-logo-img {
        height: 62px;
    }

    .header-digikore-logo {
        height: 32px;
    }

    .hero-theatre-stage {
        padding-top: 130px !important;
        min-height: 100vh;
        min-height: clamp(720px, 95vh, 920px);
    }

    .hero-stage-emblem {
        display: none !important;
    }

    .hero-stage-title {
        margin-top: 0.85rem !important;
        font-size: clamp(2.2rem, 4.4vw, 3.4rem) !important;
    }
}

@media (max-width: 640px) {
    .site-header .header-container {
        height: 72px;
    }

    .header-logo-img {
        height: 52px;
    }

    .header-digikore-logo {
        height: 28px;
    }

    .hero-theatre-stage {
        padding-top: 110px !important;
    }

    .hero-stage-title {
        font-size: clamp(1.95rem, 6.2vw, 2.6rem) !important;
    }
}

.jiohotstar-logo-img {
    height: 40px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(230, 208, 160, 0.5)) drop-shadow(0 2px 10px rgba(0, 0, 0, 0.95));
    display: block;
    transition: var(--transition-base);
    border-radius: 5px;
}

.hero-brand-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.eyebrow {
    font-family: var(--font-body);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--clr-antique-gold);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

.hero-stage-title {
    font-family: var(--font-display);
    font-size: clamp(2.3rem, 3.8vw, 3.8rem);
    font-weight: 800;
    line-height: 1.08;
    color: #F5EEE3;
    margin-bottom: 1.25rem;
    letter-spacing: -0.015em;
    text-align: center;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.95);
}

.gold-highlight {
    color: var(--clr-antique-gold);
}

.hero-stage-lead {
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.55;
    color: #E6D0A0;
    margin: 0 auto 0.65rem;
    font-weight: 400;
    max-width: 500px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
    text-align: center;
}

.hero-stage-sublead {
    font-family: var(--font-body);
    font-size: 0.925rem;
    line-height: 1.5;
    color: rgba(230, 208, 160, 0.8);
    margin: 0 auto 2.2rem;
    max-width: 480px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
    text-align: center;
}

.hero-stage-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.15rem;
    margin-bottom: 2.2rem;
}

.hero-cta {
    background-color: var(--clr-antique-gold);
    color: #090807;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.84rem;
    letter-spacing: 0.1em;
    height: 48px;
    padding: 0 1.85rem;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--clr-antique-gold);
    transition: var(--transition-base);
    box-shadow: 0 4px 18px rgba(199, 154, 59, 0.3);
    text-decoration: none;
}

.hero-cta:hover {
    background-color: #d6a742;
    border-color: #d6a742;
    box-shadow: 0 6px 24px rgba(199, 154, 59, 0.45);
}

.hero-status-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0 1.5rem;
    height: 48px;
    background: rgba(22, 14, 9, 0.72);
    border: 1px solid rgba(199, 154, 59, 0.45);
    border-radius: 4px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.08);
}

.status-pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #E2B84D;
    box-shadow: 0 0 10px #E2B84D;
    animation: statusDotGlow 2s ease-in-out infinite alternate;
}

@keyframes statusDotGlow {
    0% {
        opacity: 0.55;
        transform: scale(0.85);
        box-shadow: 0 0 4px #E2B84D;
    }

    100% {
        opacity: 1;
        transform: scale(1.25);
        box-shadow: 0 0 12px #E2B84D, 0 0 22px rgba(226, 184, 77, 0.75);
    }
}

.status-tag-text {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #F5EFE5;
}

.hero-stage-streaming {
    margin: 0 auto;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.95rem;
    padding: 0.65rem 1.6rem;
    background: rgba(18, 11, 8, 0.88);
    border: 1.2px solid rgba(199, 154, 59, 0.5);
    border-radius: 9999px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15), 0 6px 24px rgba(0, 0, 0, 0.75), 0 0 20px rgba(199, 154, 59, 0.15);
    transition: var(--transition-base);
    text-decoration: none;
}

.streaming-label {
    font-family: var(--font-body);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: #F3C45B;
    text-transform: uppercase;
    margin: 0;
    display: inline-block;
    line-height: 1;
}

.hero-stage-streaming:hover {
    border-color: rgba(243, 196, 91, 0.85);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.25), 0 8px 30px rgba(0, 0, 0, 0.85), 0 0 28px rgba(199, 154, 59, 0.35);
    transform: translateY(-2px);
}

.hero-stage-streaming .jiohotstar-logo-img {
    height: 34px;
    width: auto;
    border-radius: 7px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.7));
}

.hero-stage-streaming:hover .jiohotstar-logo-img {
    transform: scale(1.04);
    box-shadow: 0 4px 16px rgba(224, 32, 128, 0.35), 0 0 14px rgba(0, 140, 255, 0.3);
}

.hero-secondary:hover .btn-arrow {
    transform: translateX(5px);
}

.btn-arrow {
    display: inline-block;
    transition: transform 0.25s var(--ease-cinematic);
    margin-left: 0.35rem;
}

.streaming-label {
    font-family: var(--font-body);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #E6D0A0;
    opacity: 0.95;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.streaming-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-body);
    font-weight: 900;
    color: #fff;
    font-size: 0.92rem;
}

.star-icon {
    color: #0084ff;
    font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
   06B. SECTION — A GLIMPSE OF HEROES (SHOW & BRAND SHOWCASE)
   -------------------------------------------------------------------------- */
.glimpse-section {
    position: relative;
    padding-top: 6.5rem;
    padding-bottom: 6.5rem;
    background-color: #F5EEE3 !important;
    background-image:
        radial-gradient(ellipse at 50% 15%, rgba(255, 255, 255, 0.7) 0%, rgba(245, 238, 227, 0.5) 45%, #F5EEE3 100%),
        radial-gradient(circle at 85% 85%, rgba(230, 208, 160, 0.22) 0%, transparent 60%) !important;
    background-attachment: scroll !important;
    overflow: hidden;
    border-bottom: 1px solid rgba(199, 154, 59, 0.25);
}

.glimpse-ambient-bg {
    display: none;
}

.glimpse-container {
    position: relative;
    z-index: 2;
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Part 1: Brands Featured on Heroes */
.glimpse-brands-block {
    text-align: center;
    margin-bottom: 3.5rem;
    padding-bottom: 3.25rem;
    border-bottom: 1px solid rgba(199, 154, 59, 0.22);
}

.glimpse-brands-title {
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #9C7426;
    margin: 0 0 2.25rem;
}

.glimpse-brands-strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.25rem 1.4rem;
    max-width: 1260px;
    margin: 0 auto;
    width: 100%;
}

.brand-item {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #FFFFFF 0%, #FAF6F0 100%);
    border: 1.2px solid rgba(199, 154, 59, 0.38);
    border-radius: 12px;
    padding: 0.5rem 1rem;
    width: 100%;
    height: 92px;
    box-shadow: 0 8px 22px rgba(36, 20, 13, 0.09), inset 0 1px 1px rgba(255, 255, 255, 0.9);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
    cursor: pointer;
}

.brand-item:hover {
    transform: translateY(-6px);
    border-color: #C79A3B;
    background: #FFFFFF;
    box-shadow: 0 14px 32px rgba(36, 20, 13, 0.16), 0 0 20px rgba(199, 154, 59, 0.25);
}

.brand-strip-logo {
    max-height: 62px;
    width: 88%;
    max-width: 180px;
    object-fit: contain;
    display: block;
    transition: transform 0.3s ease;
}

.brand-item:hover .brand-strip-logo {
    transform: scale(1.08);
}

/* Part 2: Sneak Peek Header */
.glimpse-header {
    text-align: center;
    max-width: 1200px;
    margin: 0 auto 3.25rem;
    padding: 0 1.5rem;
}

.glimpse-eyebrow {
    margin-bottom: 0.75rem;
    display: inline-block;
    color: #9C7426 !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
}

.glimpse-title {
    font-family: var(--font-display);
    font-size: clamp(1.85rem, 2.75vw, 2.75rem);
    font-weight: 800;
    color: #24140D !important;
    line-height: 1.25;
    margin: 0;
    letter-spacing: -0.015em;
    text-shadow: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

.glimpse-title-dark {
    display: block;
    color: #24140D !important;
    white-space: normal;
}

.glimpse-title-gold {
    display: block;
    color: #C79A3B !important;
    white-space: normal;
}

.glimpse-title .gold-highlight {
    color: #C79A3B !important;
}

.glimpse-desc {
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.55;
    color: #6E5F52;
    margin: 0 auto;
}

/* Dual-Row Rotating Cinematic Carousel */
.glimpse-marquee-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.65rem;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
    padding: 0.75rem 0;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 1) 7%, rgba(0, 0, 0, 1) 93%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 1) 7%, rgba(0, 0, 0, 1) 93%, transparent 100%);
}

.glimpse-marquee-row {
    display: flex;
    overflow: hidden;
    user-select: none;
    width: 100%;
}

.glimpse-track {
    display: flex;
    gap: 1.5rem;
    width: max-content;
    will-change: transform;
}

.row-left .glimpse-track {
    animation: glimpseScrollLeft 32s linear infinite;
}

.row-right .glimpse-track {
    animation: glimpseScrollRight 34s linear infinite;
}

.glimpse-marquee-row:hover .glimpse-track {
    animation-play-state: paused;
}

@keyframes glimpseScrollLeft {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-50% - 0.75rem));
    }
}

@keyframes glimpseScrollRight {
    0% {
        transform: translateX(calc(-50% - 0.75rem));
    }

    100% {
        transform: translateX(0);
    }
}

.glimpse-card {
    position: relative;
    flex-shrink: 0;
    width: clamp(420px, 31vw, 540px);
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    background: #000000;
    border: 1.5px solid rgba(199, 154, 59, 0.4);
    box-shadow: 0 14px 34px rgba(36, 20, 13, 0.14), 0 4px 10px rgba(0, 0, 0, 0.08);
    transition: transform 0.4s var(--ease-cinematic), border-color 0.4s var(--ease-cinematic), box-shadow 0.4s var(--ease-cinematic);
    cursor: pointer;
}

.glimpse-card:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: #C79A3B;
    box-shadow: 0 22px 50px rgba(36, 20, 13, 0.24), 0 0 30px rgba(199, 154, 59, 0.35);
    z-index: 5;
}

.glimpse-img-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

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

.glimpse-card:hover .glimpse-img {
    transform: scale(1.08);
}

.glimpse-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(9, 8, 7, 0.45) 0%, rgba(9, 8, 7, 0.05) 40%, rgba(9, 8, 7, 0.6) 100%);
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.glimpse-card:hover .glimpse-overlay {
    opacity: 0.35;
}

/* Card Lower-Third Footer (Name, Designation & Bottom-Right Logo) */
.glimpse-card-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 4;
    padding: 2.25rem 1.45rem 1.25rem;
    background: linear-gradient(0deg, rgba(9, 8, 7, 0.96) 0%, rgba(9, 8, 7, 0.8) 55%, transparent 100%);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    pointer-events: none;
}

.glimpse-card-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    text-align: left;
    max-width: 68%;
}

.glimpse-card-name {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.18;
    margin: 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95);
    letter-spacing: 0.01em;
}

.glimpse-card-role {
    font-family: var(--font-body);
    font-size: 0.84rem;
    font-weight: 600;
    color: #E2B84D;
    line-height: 1.3;
    margin: 0;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.95);
    letter-spacing: 0.02em;
}

.glimpse-card-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border-radius: 9px;
    padding: 0.35rem 0.95rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.9);
    flex-shrink: 0;
    max-width: 38%;
    height: 52px;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.glimpse-card-logo-wrap .glimpse-brand-logo {
    max-height: 38px;
    width: auto;
    max-width: 125px;
    object-fit: contain;
    filter: none;
    display: block;
}

.glimpse-card:hover .glimpse-card-logo-wrap {
    transform: scale(1.06);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
}

@media (max-width: 992px) {
    .glimpse-brands-strip {
        grid-template-columns: repeat(5, 1fr);
        gap: 0.85rem;
    }

    .brand-item {
        height: 68px;
        padding: 0.6rem 0.85rem;
    }

    .brand-strip-logo {
        max-height: 38px;
        max-width: 110px;
    }

    .glimpse-card {
        width: clamp(380px, 48vw, 480px);
    }

    .glimpse-marquee-wrapper {
        gap: 1.35rem;
    }

    .glimpse-track {
        gap: 1.35rem;
    }

    .glimpse-card-name {
        font-size: 1.05rem;
    }

    .glimpse-card-role {
        font-size: 0.78rem;
    }

    .glimpse-card-logo-wrap {
        height: 44px;
        padding: 0.3rem 0.7rem;
    }

    .glimpse-card-logo-wrap .glimpse-brand-logo {
        max-height: 30px;
        max-width: 100px;
    }
}

@media (max-width: 768px) {
    .glimpse-section {
        padding-top: 3.8rem !important;
        padding-bottom: 4rem !important;
    }

    .glimpse-container {
        padding: 0 1rem !important;
    }

    .glimpse-brands-block {
        margin-bottom: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .glimpse-brands-strip {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }

    .brand-item {
        height: 56px !important;
        padding: 0.5rem 0.85rem !important;
        border-radius: 8px !important;
    }

    .brand-strip-logo {
        max-height: 28px !important;
        max-width: 100px !important;
    }

    .glimpse-header {
        margin-bottom: 1.75rem !important;
    }

    .glimpse-title {
        font-size: 1.65rem !important;
        line-height: 1.2 !important;
    }

    /* DISABLE CAROUSEL & HIDE ARROWS ON MOBILE */
    .glimpse-row-arrow {
        display: none !important;
    }

    /* UNIFIED 2-CARDS-PER-ROW CONTINUOUS GRID */
    .glimpse-marquee-wrapper {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.85rem !important;
        width: 100% !important;
        position: static !important;
        left: auto !important;
        right: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
        overflow: visible !important;
    }

    .glimpse-carousel-row-container,
    .glimpse-marquee-row,
    .glimpse-track {
        display: contents !important;
    }

    /* Hide Infinite Loop Clone Cards on Mobile */
    .glimpse-card[aria-hidden="true"] {
        display: none !important;
    }

    /* PREMIUM CARD STRUCTURE: IMAGE ON TOP, CONTENT BELOW */
    .glimpse-card {
        width: 100% !important;
        aspect-ratio: auto !important;
        display: flex !important;
        flex-direction: column !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        background: #FAF7F2 !important;
        border: 1.2px solid rgba(199, 154, 59, 0.35) !important;
        box-shadow: 0 4px 16px rgba(45, 30, 15, 0.07) !important;
        cursor: pointer;
        position: relative !important;
        transition: transform 0.25s ease, box-shadow 0.25s ease !important;
    }

    .glimpse-img-wrap {
        position: relative !important;
        width: 100% !important;
        aspect-ratio: 16 / 10.5 !important;
        height: auto !important;
        overflow: hidden !important;
        background: #110B07 !important;
    }

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

    .glimpse-overlay {
        display: none !important;
    }

    /* BELOW-IMAGE CONTENT CONTAINER */
    .glimpse-card-footer {
        position: static !important;
        padding: 0.85rem 0.75rem 0.95rem !important;
        background: #FAF7F2 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 0.5rem !important;
        flex: 1 !important;
        border-top: 1px solid rgba(199, 154, 59, 0.2) !important;
        min-height: 118px !important;
        pointer-events: auto !important;
    }

    .glimpse-card-info {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        gap: 0.2rem !important;
    }

    .glimpse-card-name {
        font-family: var(--font-body) !important;
        font-size: 0.82rem !important;
        font-weight: 800 !important;
        color: #1A1009 !important;
        letter-spacing: 0.02em !important;
        line-height: 1.25 !important;
        margin: 0 !important;
        text-align: left !important;
        text-transform: uppercase !important;
        text-shadow: none !important;
        -webkit-font-smoothing: antialiased !important;
    }

    .glimpse-card-role {
        font-family: var(--font-body) !important;
        font-size: 0.7rem !important;
        color: #8C6D38 !important;
        line-height: 1.35 !important;
        margin: 0 !important;
        font-weight: 600 !important;
        text-align: left !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-shadow: none !important;
        -webkit-font-smoothing: antialiased !important;
    }

    /* CENTERED & BIGGER BRAND LOGO BADGE */
    .glimpse-card-logo-wrap {
        height: 38px !important;
        width: 100% !important;
        max-width: 135px !important;
        padding: 0.35rem 0.85rem !important;
        background: #FFFFFF !important;
        border: 1.2px solid rgba(199, 154, 59, 0.38) !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: center !important;
        margin: 0.65rem auto 0 !important;
        box-shadow: 0 2px 8px rgba(45, 30, 15, 0.08) !important;
    }

    .glimpse-card-logo-wrap .glimpse-brand-logo {
        max-height: 26px !important;
        max-width: 105px !important;
        width: auto !important;
        object-fit: contain !important;
    }
}

/* Glimpse Cinematic Modal Popup */
.glimpse-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s ease;
}

.glimpse-modal.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.glimpse-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(9, 8, 7, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.glimpse-modal-dialog {
    position: relative;
    z-index: 2;
    max-width: 960px;
    width: 92%;
    border-radius: 18px;
    overflow: hidden;
    background: #140E0A;
    border: 1.5px solid rgba(199, 154, 59, 0.5);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.95), 0 0 45px rgba(199, 154, 59, 0.25);
    transform: scale(0.92) translateY(20px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.glimpse-modal.active .glimpse-modal-dialog {
    transform: scale(1) translateY(0);
}

.glimpse-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(9, 8, 7, 0.75);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(199, 154, 59, 0.4);
    color: #FFFFFF;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.glimpse-modal-close:hover {
    background: rgba(199, 154, 59, 0.25);
    border-color: #C79A3B;
    transform: scale(1.1);
}

.glimpse-modal-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000000;
}

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

.glimpse-modal-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    background: linear-gradient(0deg, rgba(9, 8, 7, 0.96) 0%, rgba(9, 8, 7, 0.75) 60%, transparent 100%);
    padding: 2.5rem 2rem 1.5rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    pointer-events: none;
}

.glimpse-modal-info {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    text-align: left;
    max-width: 65%;
}

.glimpse-modal-name {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.2;
    margin: 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95);
}

.glimpse-modal-role {
    font-family: var(--font-body);
    font-size: 0.98rem;
    font-weight: 600;
    color: #E2B84D;
    line-height: 1.35;
    margin: 0;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.95);
}

.glimpse-modal-logo-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border-radius: 12px;
    padding: 0.6rem 1.25rem;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
    border: 1.5px solid rgba(255, 255, 255, 0.95);
    flex-shrink: 0;
    max-width: 32%;
    height: 60px;
}

.glimpse-modal-logo {
    max-height: 44px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
    filter: none;
    display: block;
}

@media (max-width: 768px) {
    .glimpse-modal-dialog {
        width: 90%;
        max-width: 420px;
        border-radius: 16px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: #140E0A;
        border: 1.5px solid rgba(199, 154, 59, 0.45);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.95);
    }

    .glimpse-modal-media {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 10.5;
        height: auto;
        background: #000000;
        overflow: hidden;
    }

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

    .glimpse-modal-footer {
        position: static !important;
        width: 100% !important;
        background: #18110B !important;
        border-top: 1.5px solid rgba(199, 154, 59, 0.25) !important;
        padding: 1rem 1.15rem 1.15rem !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.65rem !important;
        pointer-events: auto !important;
    }

    .glimpse-modal-info {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        gap: 0.2rem !important;
    }

    .glimpse-modal-name {
        font-family: var(--font-body) !important;
        font-size: 0.95rem !important;
        font-weight: 800 !important;
        color: #FFFFFF !important;
        letter-spacing: 0.02em !important;
        text-align: left !important;
        text-shadow: none !important;
        margin: 0 !important;
        line-height: 1.25 !important;
        text-transform: uppercase !important;
    }

    .glimpse-modal-role {
        font-family: var(--font-body) !important;
        font-size: 0.78rem !important;
        font-weight: 600 !important;
        color: #D4A843 !important;
        text-align: left !important;
        text-shadow: none !important;
        margin: 0 !important;
        line-height: 1.35 !important;
    }

    .glimpse-modal-logo-badge {
        height: 38px !important;
        width: 100% !important;
        max-width: 135px !important;
        padding: 0.35rem 0.85rem !important;
        background: #FFFFFF !important;
        border: 1.2px solid rgba(199, 154, 59, 0.38) !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: center !important;
        margin: 0.25rem auto 0 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
    }

    .glimpse-modal-logo {
        max-height: 26px !important;
        max-width: 105px !important;
        width: auto !important;
        object-fit: contain !important;
        display: block !important;
    }

    .glimpse-modal-close {
        top: 10px !important;
        right: 10px !important;
        width: 34px !important;
        height: 34px !important;
        font-size: 0.95rem !important;
        background: rgba(14, 9, 6, 0.85) !important;
        border: 1px solid rgba(199, 154, 59, 0.45) !important;
        color: #FFFFFF !important;
    }
}

/* --------------------------------------------------------------------------
   07. SECTION 02 — WHY HEROES? (Editorial Documentary Redesign)
   -------------------------------------------------------------------------- */
.why-heroes-section {
    background-color: #F5EEE3 !important;
    background-image:
        radial-gradient(ellipse at 90% 20%, rgba(230, 208, 160, 0.12) 0%, transparent 60%),
        radial-gradient(circle at 10% 80%, rgba(245, 238, 227, 0.6) 0%, #F5EEE3 100%) !important;
    background-attachment: scroll !important;
    color: #24140D;
    padding: 7rem 0 7.5rem;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(199, 154, 59, 0.22);
}

/* Subtle HEROES Emblem Watermark on Far Left */
.why-watermark {
    position: absolute;
    top: 5%;
    left: -40px;
    width: 320px;
    height: 320px;
    opacity: 0.038;
    pointer-events: none;
    z-index: 0;
    filter: grayscale(100%) contrast(140%);
    transform: rotate(-8deg);
}

.why-watermark-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Full-Bleed Cinematic Backdrop for Right Half of Section (Edge to Edge) */
.why-cinematic-backdrop {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 55%;
    min-width: 620px;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.why-backdrop-image {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right;
    display: block;
    filter: contrast(1.06) brightness(0.98) saturate(1.04);
    -webkit-mask-image: linear-gradient(to right,
            transparent 0%,
            rgba(0, 0, 0, 0.02) 4%,
            rgba(0, 0, 0, 0.12) 12%,
            rgba(0, 0, 0, 0.38) 22%,
            rgba(0, 0, 0, 0.72) 34%,
            rgba(0, 0, 0, 0.94) 46%,
            #000000 58%);
    mask-image: linear-gradient(to right,
            transparent 0%,
            rgba(0, 0, 0, 0.02) 4%,
            rgba(0, 0, 0, 0.12) 12%,
            rgba(0, 0, 0, 0.38) 22%,
            rgba(0, 0, 0, 0.72) 34%,
            rgba(0, 0, 0, 0.94) 46%,
            #000000 58%);
}

.why-backdrop-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background:
        /* 1. Deep Espresso Bottom Gradient for Ultra-Crisp Quote Contrast */
        linear-gradient(180deg,
            transparent 0%,
            transparent 32%,
            rgba(26, 16, 11, 0.38) 50%,
            rgba(18, 11, 7, 0.82) 65%,
            rgba(11, 7, 4, 0.96) 80%,
            #080503 100%),
        /* 2. Soft Warm Cream & Subtle Warm Beige Transition on Left */
        linear-gradient(to right,
            #F5EEE3 0%,
            rgba(245, 238, 227, 0.96) 8%,
            rgba(245, 238, 227, 0.65) 20%,
            rgba(240, 230, 215, 0.2) 32%,
            transparent 48%),
        /* 3. Subtle Warm Amber Glow Behind Subject */
        radial-gradient(circle at 74% 38%,
            rgba(220, 165, 65, 0.18) 0%,
            rgba(180, 105, 25, 0.08) 42%,
            transparent 68%);
    -webkit-mask-image: linear-gradient(to right,
            transparent 0%,
            rgba(0, 0, 0, 0.05) 5%,
            rgba(0, 0, 0, 0.35) 16%,
            rgba(0, 0, 0, 0.85) 30%,
            #000000 45%);
    mask-image: linear-gradient(to right,
            transparent 0%,
            rgba(0, 0, 0, 0.05) 5%,
            rgba(0, 0, 0, 0.35) 16%,
            rgba(0, 0, 0, 0.85) 30%,
            #000000 45%);
}

.why-heroes-container {
    max-width: 1360px;
    position: relative;
    z-index: 3;
}

.why-heroes-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 3.5rem;
    align-items: stretch;
    min-height: 600px;
}

/* Left Content Column */
.why-left-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 4;
}

/* Section Heading: 02 WHY HEROES? */
.why-section-header {
    margin-bottom: 2rem;
}

/* Grand Editorial Headline (Matching Section 03 / 2nd Image Style) */
.why-editorial-headline {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 3.8vw, 3.8rem);
    font-weight: 700;
    line-height: 1.1;
    color: #17100C;
    letter-spacing: -0.01em;
    margin: 0 0 1.5rem;
    text-align: left;
}

.why-title-gold {
    color: var(--clr-antique-gold);
    text-shadow: 0 0 25px rgba(199, 154, 59, 0.4);
}

/* Main Editorial Statement / Intro Description */
.why-editorial-statement {
    font-family: var(--font-display);
    font-size: clamp(1.65rem, 2vw, 2.15rem);
    font-weight: 700;
    line-height: 1.22;
    color: #17100C;
    letter-spacing: -0.012em;
    margin-bottom: 1.45rem;
    max-width: 640px;
}

.why-gold-italic {
    font-style: italic;
    color: var(--clr-antique-gold);
    font-weight: 700;
}

/* Introduction Lead Text */
.why-intro-text {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.5;
    color: #5B4A3D;
    margin-bottom: 2.25rem;
    font-weight: 500;
}

/* Benefit Cards 3x2 Grid */
.why-benefit-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.15rem;
}

.why-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.96) 0%, rgba(253, 248, 240, 0.88) 45%, rgba(245, 234, 216, 0.76) 100%);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1.2px solid rgba(199, 154, 59, 0.38);
    border-radius: 8px;
    padding: 1.5rem 1.35rem 1.4rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 158px;
    transition: transform 0.35s var(--ease-cinematic), border-color 0.35s var(--ease-cinematic), box-shadow 0.35s var(--ease-cinematic), background 0.35s var(--ease-cinematic);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.95), 0 6px 20px rgba(36, 20, 13, 0.05), 0 0 1px rgba(199, 154, 59, 0.2);
    position: relative;
    overflow: hidden;
}

/* Continuous Glass Light-Sweep Shimmer Animation */
.why-card::before {
    content: '';
    position: absolute;
    top: -60%;
    left: -140%;
    width: 80%;
    height: 220%;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.1) 25%,
            rgba(255, 255, 255, 0.6) 50%,
            rgba(255, 255, 255, 0.1) 75%,
            transparent 100%);
    transform: rotate(25deg);
    pointer-events: none;
    z-index: 2;
    animation: whyCardGlassSweep 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Staggered Shimmer Delays Across Cards */
.why-card:nth-child(1)::before {
    animation-delay: 0s;
}

.why-card:nth-child(2)::before {
    animation-delay: 0.8s;
}

.why-card:nth-child(3)::before {
    animation-delay: 1.6s;
}

.why-card:nth-child(4)::before {
    animation-delay: 2.4s;
}

.why-card:nth-child(5)::before {
    animation-delay: 3.2s;
}

.why-card:nth-child(6)::before {
    animation-delay: 4.0s;
}

.why-card:hover {
    transform: translateY(-5px);
    background: linear-gradient(145deg, #FFFFFF 0%, rgba(255, 251, 244, 0.96) 40%, rgba(248, 236, 218, 0.94) 100%);
    border-color: rgba(199, 154, 59, 0.85);
    box-shadow: inset 0 1px 3px rgba(255, 255, 255, 1), 0 14px 32px rgba(36, 20, 13, 0.1), 0 0 20px rgba(199, 154, 59, 0.22);
}

.why-card:hover::before {
    animation: whyCardGlassHover 1.1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes whyCardGlassSweep {

    0%,
    65% {
        left: -140%;
        opacity: 0;
    }

    72% {
        opacity: 0.85;
    }

    88%,
    100% {
        left: 170%;
        opacity: 0;
    }
}

@keyframes whyCardGlassHover {
    0% {
        left: -140%;
        opacity: 0.9;
    }

    100% {
        left: 170%;
        opacity: 0.9;
    }
}

.why-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.1rem;
    position: relative;
    z-index: 3;
}

.why-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-antique-gold);
    transition: transform 0.35s var(--ease-cinematic), filter 0.35s var(--ease-cinematic);
    position: relative;
    z-index: 3;
}

.why-card-icon svg {
    display: block;
}

.why-card:hover .why-card-icon {
    transform: scale(1.12);
    filter: drop-shadow(0 2px 8px rgba(199, 154, 59, 0.45));
}

.why-card-num {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--clr-antique-gold);
    line-height: 1;
    letter-spacing: -0.02em;
    position: relative;
    z-index: 3;
}

.why-card-text {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.48;
    color: #24140D;
    font-weight: 600;
    margin: 0;
    position: relative;
    z-index: 3;
}

/* RIGHT COLUMN: Quote Overlay aligned in dark area */
.why-right-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    width: 100%;
    padding-bottom: 0.5rem;
    z-index: 4;
}

.why-quote-overlay {
    position: relative;
    z-index: 5;
    padding: 0 0 1.5rem 1.5rem;
    width: 100%;
    max-width: 540px;
}

.why-quote-mark {
    font-family: var(--font-display);
    font-size: clamp(3.8rem, 5vw, 5rem);
    line-height: 0.7;
    color: #D4A545;
    display: block;
    margin-bottom: 0.95rem;
    user-select: none;
    opacity: 0.98;
    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.9);
}

.why-quote-text {
    font-family: var(--font-display);
    font-size: clamp(1.65rem, 2.3vw, 2.25rem);
    line-height: 1.26;
    color: #FFFFFF;
    font-weight: 600;
    margin: 0 0 1.45rem;
    letter-spacing: -0.015em;
    text-shadow: 0 3px 20px rgba(0, 0, 0, 0.95), 0 1px 6px rgba(0, 0, 0, 0.9);
}

.why-quote-accent {
    color: #E5BA58;
    font-style: italic;
    font-weight: 700;
    text-shadow: 0 0 20px rgba(229, 186, 88, 0.55), 0 2px 10px rgba(0, 0, 0, 0.95);
}

.why-quote-footer {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.why-quote-line {
    width: 56px;
    height: 2px;
    background: #D4A545;
    box-shadow: 0 1px 8px rgba(212, 165, 69, 0.5);
}

.why-series-label {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #D4A545;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95);
}

/* Responsive Adaptations for Section 02 */
@media (max-width: 1140px) {
    .why-heroes-grid {
        grid-template-columns: 1.05fr 0.95fr;
        gap: 2.5rem;
    }

    .why-benefit-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .why-cinematic-backdrop {
        width: 52%;
        min-width: 480px;
    }

    .why-quote-overlay {
        padding: 0 0 1rem 1rem;
    }
}

@media (max-width: 992px) {
    .why-heroes-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .why-cinematic-backdrop,
    .why-right-visual {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .why-heroes-section {
        padding: 5rem 0 5.5rem;
    }

    .why-section-num {
        font-size: 3.2rem;
    }

    .why-section-title {
        font-size: 1.6rem;
    }

    .why-editorial-statement {
        font-size: 1.5rem;
    }

    .why-benefit-cards {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .why-card {
        min-height: auto;
        padding: 1.25rem 1.15rem;
    }
}

/* --------------------------------------------------------------------------
   08. SECTION 03 — WHAT IS HEROES? (Cinematic Title Sequence Design)
   -------------------------------------------------------------------------- */
.what-is-heroes-section {
    background-color: #090706;
    background-image:
        radial-gradient(ellipse at 75% 35%, rgba(36, 19, 11, 0.6) 0%, transparent 60%),
        radial-gradient(circle at 25% 65%, rgba(22, 13, 9, 0.7) 0%, #090706 85%);
    color: #F3E9D2;
    padding: 7.5rem 0 8rem;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(201, 154, 50, 0.18);
}

.what-atmosphere-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.what-cinematic-backdrop {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.what-ambient-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
}

.what-glow-center {
    top: 40%;
    left: 30%;
    transform: translate(-50%, -50%);
    width: 700px;
    height: 500px;
    background: radial-gradient(ellipse, rgba(36, 19, 11, 0.65) 0%, rgba(18, 10, 7, 0.35) 45%, transparent 75%);
}

.what-glow-emblem {
    top: 35%;
    right: 15%;
    transform: translate(50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(201, 154, 50, 0.25) 0%, rgba(120, 70, 20, 0.1) 45%, transparent 75%);
}

.what-vignette-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(9, 7, 6, 0.9) 95%);
}

.what-container {
    max-width: 1380px;
    position: relative;
    z-index: 2;
}

/* TOP TWO-COLUMN COMPOSITION */
.what-top-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 3.5rem;
    align-items: center;
    margin-bottom: 5rem;
}

/* LEFT COLUMN: Section Header, Grand Headline & Paragraphs */
.what-left-editorial {
    display: flex;
    flex-direction: column;
    max-width: 680px;
}

.what-section-header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.what-section-num {
    font-family: var(--font-display);
    font-size: clamp(3.8rem, 5vw, 4.8rem);
    font-weight: 800;
    line-height: 0.85;
    color: #C99A32;
    letter-spacing: -0.02em;
    text-shadow: 0 0 24px rgba(201, 154, 50, 0.35);
}

.what-header-divider {
    width: 1.5px;
    height: 44px;
    background: rgba(201, 154, 50, 0.35);
}

.what-title-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.what-eyebrow-label {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #C99A32;
}

.what-heading-rule {
    width: 48px;
    height: 1.5px;
    background: #C99A32;
    margin-top: 0.45rem;
}

.what-editorial-title {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 2.8vw, 3.2rem);
    font-weight: 700;
    line-height: 1.15;
    color: #F3E9D2;
    letter-spacing: -0.01em;
    margin: 0 0 1.25rem;
    text-align: left;
    white-space: nowrap;
    text-shadow: 0 4px 25px rgba(0, 0, 0, 0.85);
}

.what-title-gold {
    color: #E0B64F;
    text-shadow: 0 0 25px rgba(224, 182, 79, 0.45);
}

.what-intro-p {
    font-family: var(--font-body);
    font-size: 1.08rem;
    line-height: 1.65;
    color: #F3E9D2;
    margin: 0 0 1.25rem;
    max-width: 580px;
}

.what-sub-p {
    font-family: var(--font-body);
    font-size: 1.02rem;
    line-height: 1.6;
    color: #CFC1AA;
    margin: 0;
    max-width: 580px;
}

.gold-text-accent {
    color: #C99A32;
    font-style: italic;
    font-weight: 600;
}

.what-intro-accent-rule {
    width: 44px;
    height: 1.5px;
    background: #C99A32;
    margin-top: 1.5rem;
}

/* RIGHT COLUMN: HEROES Brand Emblem Composition */
.what-right-brand {
    display: flex;
    justify-content: center;
    align-items: center;
}

.what-emblem-composition {
    position: relative;
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
}

.emblem-technical-grid {
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 380px;
    height: 380px;
    pointer-events: none;
}

.tech-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(201, 154, 50, 0.14);
}

.tech-circle-1 {
    width: 360px;
    height: 360px;
}

.tech-circle-2 {
    width: 285px;
    height: 285px;
    border-color: rgba(201, 154, 50, 0.18);
}

.tech-circle-3 {
    width: 210px;
    height: 210px;
    border-color: rgba(201, 154, 50, 0.22);
}

.tech-circle-dashed {
    width: 325px;
    height: 325px;
    border: 1px dashed rgba(201, 154, 50, 0.16);
    animation: techRotate 90s linear infinite;
}

.tech-crosshair-h {
    position: absolute;
    top: 50%;
    left: -8%;
    width: 116%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 154, 50, 0.16) 20%, rgba(201, 154, 50, 0.28) 50%, rgba(201, 154, 50, 0.16) 80%, transparent);
}

.tech-crosshair-v {
    position: absolute;
    top: -8%;
    left: 50%;
    width: 1px;
    height: 116%;
    background: linear-gradient(180deg, transparent, rgba(201, 154, 50, 0.16) 20%, rgba(201, 154, 50, 0.28) 50%, rgba(201, 154, 50, 0.16) 80%, transparent);
}

.tech-diagonal {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 154, 50, 0.12) 30%, rgba(201, 154, 50, 0.12) 70%, transparent);
}

.tech-diag-1 {
    transform: rotate(45deg);
}

.tech-diag-2 {
    transform: rotate(-45deg);
}

.tech-orbital-sparkle {
    position: absolute;
    color: #E0B64F;
    font-size: 0.75rem;
    text-shadow: 0 0 8px #E0B64F;
    line-height: 1;
    pointer-events: none;
}

.sparkle-top {
    top: -2%;
    left: 50%;
    transform: translateX(-50%);
}

.sparkle-bottom {
    bottom: -2%;
    left: 50%;
    transform: translateX(-50%);
}

.sparkle-left {
    top: 50%;
    left: -2%;
    transform: translateY(-50%);
}

.sparkle-right {
    top: 50%;
    right: -2%;
    transform: translateY(-50%);
}

@keyframes techRotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.emblem-focal-wrap {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.emblem-glow-behind {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(224, 182, 79, 0.3) 0%, rgba(201, 154, 50, 0.14) 50%, transparent 70%);
    filter: blur(28px);
    pointer-events: none;
}

.what-official-emblem-img {
    width: 100%;
    max-width: 180px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 25px rgba(201, 154, 50, 0.35));
    display: block;
}

.what-brand-typography {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 1.35rem;
}

.what-brand-title {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: #F3E9D2;
    margin: 0;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9);
}

.what-brand-rule {
    width: 38px;
    height: 1.5px;
    background: #C99A32;
    margin: 0.45rem 0 0.55rem;
}

.what-brand-subtitle {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #C99A32;
}

/* TWO-COLUMN SPLIT COMPOSITION */
.what-split-composition {
    display: grid;
    grid-template-columns: 1fr 1.32fr;
    gap: 4.25rem;
    align-items: center;
    position: relative;
    z-index: 3;
}

.what-left-editorial {
    display: flex;
    flex-direction: column;
    max-width: 540px;
}

.what-right-pillars-tray {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.what-chapters-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.15rem 0.85rem;
    background: rgba(22, 14, 10, 0.7);
    border: 1px solid rgba(201, 154, 50, 0.3);
    border-radius: 14px;
    padding: 2rem 1.5rem;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), inset 0 0 24px rgba(201, 154, 50, 0.06);
}

.what-chapters-grid .chapter-item {
    grid-column: span 3;
    /* Top Row: Cards 01, 02, 03, 04 each take 3/12 cols */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.15rem 0.65rem;
    background: rgba(32, 20, 13, 0.6);
    border: 1px solid rgba(201, 154, 50, 0.2);
    border-radius: 8px;
    transition: all 0.35s var(--ease-cinematic);
}

/* Bottom Row: Cards 05, 06, 07 each take 4/12 cols */
.what-chapters-grid .chapter-item:nth-child(5),
.what-chapters-grid .chapter-item:nth-child(6),
.what-chapters-grid .chapter-item:nth-child(7) {
    grid-column: span 4;
}

.what-chapters-grid .chapter-item:hover {
    transform: translateY(-4px);
    border-color: rgba(201, 154, 50, 0.65);
    background: rgba(42, 26, 17, 0.75);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 16px rgba(201, 154, 50, 0.2);
}

.chapter-num {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 2.2vw, 2.35rem);
    font-weight: 800;
    line-height: 1;
    color: #C99A32;
    letter-spacing: -0.02em;
    text-shadow: 0 0 18px rgba(201, 154, 50, 0.35);
}

.chapter-num-underline {
    width: 24px;
    height: 1.5px;
    background: #C99A32;
    margin: 0.35rem auto 0.65rem;
}

.chapter-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #C99A32;
    margin-bottom: 0.75rem;
    transition: transform 0.35s var(--ease-cinematic), filter 0.35s ease;
}

.chapter-icon-wrap svg {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6));
    transition: filter 0.3s ease;
}

.chapter-item:hover .chapter-icon-wrap {
    transform: translateY(-2px) scale(1.12);
}

.chapter-item:hover .chapter-icon-wrap svg {
    filter: drop-shadow(0 0 10px rgba(224, 182, 79, 0.65)) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.8));
}

.chapter-label {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #F3E9D2;
    line-height: 1.4;
    margin: 0;
}

/* EDITORIAL QUOTE BLOCK */
.what-editorial-quote {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding-left: 1.5rem;
    border-left: 1.5px solid #C99A32;
    margin-top: 2.25rem;
    max-width: 680px;
    position: relative;
}

.what-quote-mark {
    font-family: var(--font-display);
    font-size: 3.8rem;
    line-height: 0.7;
    color: #C99A32;
    opacity: 0.95;
    user-select: none;
    margin-top: -0.2rem;
    text-shadow: 0 0 16px rgba(201, 154, 50, 0.4);
}

.what-quote-content {
    display: flex;
    flex-direction: column;
}

.what-quote-lead {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    font-style: italic;
    font-weight: 400;
    color: #F3E9D2;
    margin: 0 0 0.5rem;
    line-height: 1.3;
}

.quote-gold-italic {
    color: #C99A32;
    font-style: italic;
}

.what-quote-accent-rule {
    width: 36px;
    height: 1.5px;
    background: #C99A32;
    margin-bottom: 0.75rem;
}

.what-quote-sub {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: #CFC1AA;
    margin: 0;
    line-height: 1.5;
}

/* RESPONSIVE BREAKPOINTS FOR SECTION 03 */
@media (max-width: 1140px) {
    .what-top-grid {
        grid-template-columns: 1.1fr 0.9fr;
        gap: 2.5rem;
    }

    .what-chapters-row {
        flex-wrap: wrap;
        justify-content: center;
        gap: 2.5rem 1.5rem;
    }

    .chapter-v-divider {
        display: none;
    }

    .chapter-item {
        flex: 0 0 calc(25% - 1.5rem);
        min-width: 150px;
    }
}

@media (max-width: 992px) {
    .what-split-composition {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3rem;
        text-align: center;
        width: 100%;
    }

    .what-left-editorial {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%;
        max-width: 780px;
        margin: 0 auto;
    }

    .what-editorial-title {
        text-align: center;
        margin: 0 auto 1.25rem;
    }

    .what-intro-p,
    .what-sub-p {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        max-width: 680px;
    }

    .what-intro-accent-rule {
        margin: 1.25rem auto 0 !important;
    }

    .what-right-pillars-tray {
        width: 100%;
        max-width: 720px;
        margin: 0 auto;
    }

    .what-chapters-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.15rem;
        padding: 1.75rem 1.25rem;
    }

    .what-chapters-grid .chapter-item,
    .what-chapters-grid .chapter-item:nth-child(5),
    .what-chapters-grid .chapter-item:nth-child(6) {
        grid-column: span 1 !important;
    }

    .what-chapters-grid .chapter-item:nth-child(7),
    .what-chapters-grid .chapter-item-featured {
        grid-column: 1 / -1 !important;
        max-width: 280px;
        margin: 0 auto;
        width: 100%;
    }

    .what-editorial-quote {
        margin: 2rem auto 0;
        text-align: center;
        border-left: none;
        padding-left: 0;
        flex-direction: column;
        align-items: center;
    }

    .what-quote-mark {
        margin: 0 0 0.5rem;
    }
}

@media (max-width: 640px) {
    .what-chapters-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.85rem;
        padding: 1.25rem 0.95rem;
    }

    .what-chapters-grid .chapter-item {
        padding: 0.85rem 0.45rem;
    }

    .what-is-heroes-section {
        padding: 4.5rem 0 4.5rem;
    }

    .what-editorial-title {
        font-size: clamp(1.55rem, 5.5vw, 1.95rem) !important;
        white-space: nowrap !important;
    }

    .chapter-num {
        font-size: 2rem;
    }

    .chapter-label {
        font-size: 0.72rem;
    }
}

/* --------------------------------------------------------------------------
   09. SECTION 04 — THE FORMAT (Warm Luxury Ivory #F5EFE4)
   -------------------------------------------------------------------------- */
.format-section {
    background-color: #F5EFE4;
    background-image:
        radial-gradient(ellipse at 85% 20%, rgba(225, 189, 112, 0.12) 0%, transparent 60%),
        radial-gradient(circle at 10% 80%, rgba(201, 154, 50, 0.06) 0%, transparent 50%),
        linear-gradient(180deg, #F8F3EA 0%, #F5EFE4 50%, #F2EAE0 100%);
    color: #15110E;
    position: relative;
    padding: 7.5rem 0 8rem;
    overflow: hidden;
}

.format-bg-decorations {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.format-bg-arcs {
    position: absolute;
    top: -8%;
    right: -6%;
    width: 680px;
    height: 680px;
    opacity: 0.85;
    pointer-events: none;
}

.format-bg-glow {
    position: absolute;
    top: 30%;
    right: 15%;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(225, 189, 112, 0.18) 0%, transparent 70%);
    filter: blur(40px);
    pointer-events: none;
}

.format-container {
    position: relative;
    z-index: 2;
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 2rem;
}

.format-split-grid {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 4.5rem;
    align-items: center;
}

/* LEFT COLUMN */
.format-left-editorial {
    display: flex;
    flex-direction: column;
    max-width: 580px;
}

.format-section-header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.format-section-num {
    font-family: var(--font-display);
    font-size: clamp(3.6rem, 4.8vw, 4.6rem);
    font-weight: 800;
    line-height: 0.85;
    color: #C99A32;
    letter-spacing: -0.02em;
    user-select: none;
}

.format-header-divider {
    width: 1.5px;
    height: 42px;
    background: rgba(201, 154, 50, 0.35);
}

.format-title-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.format-eyebrow-label {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #C99A32;
}

.format-heading-rule {
    width: 44px;
    height: 1.5px;
    background: #C99A32;
    margin-top: 0.45rem;
}

.format-main-headline {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 4vw, 4.2rem);
    font-weight: 800;
    line-height: 1.06;
    color: #15110E;
    letter-spacing: -0.015em;
    margin: 0 0 1.75rem;
    text-transform: uppercase;
}

.format-title-gold {
    color: #C99A32;
}

.format-lead-p {
    font-family: var(--font-body);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.55;
    color: #15110E;
    margin: 0 0 1rem;
}

.format-gold-bold {
    color: #C99A32;
    font-weight: 700;
}

.format-sub-p {
    font-family: var(--font-body);
    font-size: 0.965rem;
    line-height: 1.65;
    color: #5D554C;
    margin: 0 0 2.25rem;
    max-width: 520px;
}

/* SPOTLIGHT CALLOUT PANEL */
.format-spotlight-box {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: #FAF5EB;
    border: 1px solid rgba(201, 154, 50, 0.22);
    border-left: 3.5px solid #C99A32;
    border-radius: 3px;
    padding: 1.35rem 1.65rem;
    box-shadow: 0 8px 24px rgba(36, 20, 13, 0.035);
    max-width: 540px;
    transition: transform 0.3s var(--ease-cinematic), box-shadow 0.3s ease;
}

.format-spotlight-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(36, 20, 13, 0.06);
}

.spotlight-icon-wrap {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(201, 154, 50, 0.08);
}

.spotlight-text-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.spotlight-line-gold {
    font-family: var(--font-display);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #C99A32;
    margin: 0;
    line-height: 1.35;
}

.spotlight-line-dark {
    font-family: var(--font-display);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #15110E;
    margin: 0;
    line-height: 1.35;
}

/* RIGHT COLUMN: 2x2 FEATURE GRID WITH GLASS SHIMMER ANIMATION */
.format-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
}

.format-feature-panel {
    background:
        radial-gradient(ellipse at 15% 15%, rgba(255, 255, 255, 0.95) 0%, transparent 65%),
        radial-gradient(ellipse at 85% 85%, rgba(225, 189, 112, 0.16) 0%, transparent 70%),
        linear-gradient(140deg, #FFFFFF 0%, #FAF4E9 42%, #F3E7D5 100%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(201, 154, 50, 0.28);
    border-radius: 10px;
    padding: 2.6rem 2.2rem 2.4rem;
    box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.95), inset 0 -2px 6px rgba(201, 154, 50, 0.06), 0 12px 32px rgba(36, 20, 13, 0.04);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: transform 0.35s var(--ease-cinematic), border-color 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
    position: relative;
    overflow: hidden;
}

/* Glass Reflection Sweep */
.format-feature-panel::before {
    content: '';
    position: absolute;
    top: -60%;
    left: -140%;
    width: 80%;
    height: 220%;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.1) 25%,
            rgba(255, 255, 255, 0.65) 50%,
            rgba(255, 255, 255, 0.1) 75%,
            transparent 100%);
    transform: rotate(25deg);
    pointer-events: none;
    z-index: 2;
    animation: formatGlassSweep 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.format-feature-panel:nth-child(1)::before {
    animation-delay: 0s;
}

.format-feature-panel:nth-child(2)::before {
    animation-delay: 1.2s;
}

.format-feature-panel:nth-child(3)::before {
    animation-delay: 2.4s;
}

.format-feature-panel:nth-child(4)::before {
    animation-delay: 3.6s;
}

.format-feature-panel:hover {
    transform: translateY(-6px);
    background:
        radial-gradient(ellipse at 15% 15%, #FFFFFF 0%, transparent 70%),
        radial-gradient(ellipse at 85% 85%, rgba(225, 189, 112, 0.25) 0%, transparent 75%),
        linear-gradient(140deg, #FFFFFF 0%, #FDF8EE 38%, #F5E9D8 100%);
    border-color: rgba(201, 154, 50, 0.75);
    box-shadow: inset 0 1px 3px #FFFFFF, 0 18px 42px rgba(36, 20, 13, 0.07), 0 0 24px rgba(201, 154, 50, 0.22);
}

.format-feature-panel:hover::before {
    animation: formatGlassHover 1.1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes formatGlassSweep {

    0%,
    65% {
        left: -140%;
        opacity: 0;
    }

    72% {
        opacity: 0.85;
    }

    88%,
    100% {
        left: 170%;
        opacity: 0;
    }
}

@keyframes formatGlassHover {
    0% {
        left: -140%;
        opacity: 0.9;
    }

    100% {
        left: 170%;
        opacity: 0.9;
    }
}

.feature-icon-badge {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: radial-gradient(circle, #F4E8D2 0%, rgba(244, 232, 210, 0.5) 60%, transparent 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.45rem;
    transition: transform 0.35s var(--ease-cinematic), box-shadow 0.35s ease;
    position: relative;
    z-index: 3;
}

.format-feature-panel:hover .feature-icon-badge {
    transform: scale(1.1);
    box-shadow: 0 0 22px rgba(201, 154, 50, 0.35);
}

.feature-icon-badge svg {
    display: block;
    filter: drop-shadow(0 2px 6px rgba(201, 154, 50, 0.3));
    position: relative;
    z-index: 3;
}

.feature-gold-rule {
    width: 34px;
    height: 1.5px;
    background: #C99A32;
    margin-bottom: 1.15rem;
    transition: width 0.35s ease;
    position: relative;
    z-index: 3;
}

.format-feature-panel:hover .feature-gold-rule {
    width: 48px;
}

.feature-panel-title {
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #15110E;
    margin: 0 0 0.65rem;
    line-height: 1.35;
    position: relative;
    z-index: 3;
}

.feature-panel-desc {
    font-family: var(--font-body);
    font-size: 0.92rem;
    line-height: 1.55;
    color: #4A4036;
    margin: 0;
    position: relative;
    z-index: 3;
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .format-section {
        padding: 6rem 0 5.5rem;
    }

    .format-split-grid {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 3.5rem;
        width: 100%;
    }

    .format-left-editorial {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%;
        max-width: 760px;
        margin: 0 auto;
    }

    .format-section-header {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        margin: 0 auto 1.5rem;
    }

    .format-title-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin: 0 auto;
    }

    .format-eyebrow-label {
        text-align: center;
        margin: 0 auto;
        display: block;
    }

    .format-heading-rule {
        margin: 0.5rem auto 0 !important;
    }

    .format-main-headline {
        text-align: center;
        margin: 0 auto 1.5rem;
    }

    .format-lead-p,
    .format-sub-p {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        max-width: 640px;
    }

    .format-spotlight-box {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: left !important;
        gap: 1.15rem !important;
        width: 100% !important;
        max-width: 520px !important;
        margin: 1.5rem auto 0 !important;
        padding: 1.25rem 1.4rem !important;
        border: 1px solid rgba(201, 154, 50, 0.22) !important;
        border-left: 3.5px solid #C99A32 !important;
        border-radius: 4px !important;
        box-sizing: border-box !important;
    }

    .spotlight-icon-wrap {
        flex-shrink: 0 !important;
        margin: 0 !important;
    }

    .spotlight-text-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
    }

    .spotlight-line-gold,
    .spotlight-line-dark {
        text-align: left !important;
        margin: 0 !important;
    }

    .format-features-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 720px;
        margin: 0 auto;
        width: 100%;
    }

    .format-feature-panel {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
    }

    .feature-icon-badge {
        margin: 0 0 1.25rem 0 !important;
    }

    .feature-gold-rule {
        margin: 0 0 1.15rem 0 !important;
    }

    .feature-panel-title {
        text-align: left !important;
        margin: 0 0 0.65rem !important;
    }

    .feature-panel-desc {
        text-align: left !important;
        margin: 0 !important;
    }
}

@media (max-width: 640px) {
    .format-section {
        padding: 5rem 0 5.5rem;
    }

    .format-features-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .format-feature-panel {
        padding: 1.75rem 1.5rem;
        align-items: flex-start !important;
        text-align: left !important;
    }

    .feature-icon-badge {
        margin: 0 0 1.25rem 0 !important;
    }

    .feature-gold-rule {
        margin: 0 0 1.15rem 0 !important;
    }

    .feature-panel-title {
        text-align: left !important;
        margin: 0 0 0.65rem !important;
    }

    .feature-panel-desc {
        text-align: left !important;
        margin: 0 !important;
    }

    .format-main-headline {
        font-size: 2.35rem;
    }
}

/* --------------------------------------------------------------------------
   09B. SECTION 05 — SHOW PARTICULARS (Warm Luxury Ivory Editorial)
   -------------------------------------------------------------------------- */
.show-particulars-section {
    background-color: #F8F4EC;
    background-image:
        radial-gradient(ellipse at 50% 15%, rgba(225, 189, 112, 0.14) 0%, transparent 60%),
        radial-gradient(circle at 10% 85%, rgba(201, 154, 50, 0.06) 0%, transparent 50%),
        linear-gradient(180deg, #FBF8F2 0%, #F5EFE5 50%, #F8F4EC 100%);
    color: #111827;
    position: relative;
    padding: 7rem 0 7.5rem;
    overflow: hidden;
    border-top: 1px solid rgba(199, 154, 59, 0.16);
    border-bottom: 1px solid rgba(199, 154, 59, 0.16);
}

.show-particulars-container {
    position: relative;
    z-index: 2;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* SECTION HEADER */
.particulars-header {
    text-align: center;
    max-width: 840px;
    margin: 0 auto 3.8rem;
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.particulars-eyebrow-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    margin-bottom: 0.35rem;
}

.particulars-eyebrow-line {
    width: 32px;
    height: 1px;
    background: #C79A3B;
    opacity: 0.7;
}

.particulars-eyebrow-text {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    color: #B88628;
    text-transform: uppercase;
}

.particulars-diamond-accent {
    color: #B88628;
    font-size: 0.75rem;
    margin: 0.2rem 0 0.85rem;
    opacity: 0.85;
}

.particulars-main-headline {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.2vw, 2.95rem);
    font-weight: 800;
    line-height: 1.22;
    color: #0F172A;
    letter-spacing: -0.01em;
    margin: 0 0 1.25rem;
}

.particulars-gold-text {
    color: #B88628;
    display: block;
}

.particulars-divider-line-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    width: 100%;
}

.particulars-divider-line {
    width: 56px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #C79A3B, transparent);
}

.particulars-divider-diamond {
    color: #C79A3B;
    font-size: 0.7rem;
}

/* TIMELINE & STAGES */
.particulars-timeline-wrapper {
    position: relative;
    width: 100%;
    margin-top: 1rem;
}

.particulars-connector-line {
    position: absolute;
    top: 72px;
    left: 10%;
    right: 10%;
    height: 1.5px;
    background: linear-gradient(90deg, rgba(199, 154, 59, 0.2) 0%, #C79A3B 15%, #C79A3B 85%, rgba(199, 154, 59, 0.2) 100%);
    z-index: 1;
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}

.particulars-stages-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.35rem;
    width: 100%;
    max-width: 1220px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.particulars-stage-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.stage-num-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0.65rem;
}

.stage-num-text {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: #B88628;
    line-height: 1;
    letter-spacing: -0.01em;
}

.stage-pointer-triangle {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #B88628;
    margin-top: 4px;
}

.stage-orb-container {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
}

.stage-orb {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(145deg, #FFFFFF 0%, #FAF5EB 100%);
    border: 1.5px solid rgba(199, 154, 59, 0.32);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #B88628;
    box-shadow: 0 8px 22px rgba(45, 30, 15, 0.05), inset 0 2px 4px rgba(255, 255, 255, 0.95);
    position: relative;
    z-index: 2;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.stage-orb svg {
    display: block;
    width: 32px;
    height: 32px;
    transform: scale(0.85);
    filter: drop-shadow(0 2px 6px rgba(184, 134, 40, 0.12));
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s ease;
}

.stage-orb-halo {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    border: 2.5px solid transparent;
    border-top-color: #B88628;
    border-right-color: #E0C178;
    transform: rotate(35deg);
    pointer-events: none;
    z-index: 3;
    transition: all 0.4s ease;
    opacity: 0.9;
}

/* THE TEXT CARD FOR EACH PARTICULAR */
.stage-content {
    background: linear-gradient(180deg, #FFFFFF 0%, #FAF5EB 100%);
    border: 1px solid rgba(199, 154, 59, 0.28);
    border-radius: 12px;
    padding: 1.45rem 1.05rem 1.35rem;
    box-shadow: 0 4px 18px rgba(45, 30, 15, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    min-height: 180px;
    position: relative;
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.stage-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #C79A3B, transparent);
    opacity: 0.7;
    transition: all 0.35s ease;
}

.stage-title {
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 800;
    color: #0F172A;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.32;
    margin: 0 0 0.65rem;
    transition: color 0.3s ease;
}

.stage-desc {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: #524A42;
    line-height: 1.55;
    font-weight: 400;
    margin: 0;
    width: 100%;
}

/* STAGE HOVER */
.particulars-stage-item:hover {
    transform: translateY(-3px);
}

.particulars-stage-item:hover .stage-orb {
    border-color: #B88628;
    box-shadow: 0 12px 28px rgba(184, 134, 40, 0.25), inset 0 2px 4px rgba(255, 255, 255, 0.95);
    transform: scale(1.05);
}

.particulars-stage-item:hover .stage-orb svg {
    filter: drop-shadow(0 2px 10px rgba(184, 134, 40, 0.45));
}

.particulars-stage-item:hover .stage-orb-halo {
    transform: rotate(65deg) scale(1.08);
    border-top-color: #9A6E1E;
    border-right-color: #C79A3B;
}

.particulars-stage-item:hover .stage-content {
    transform: translateY(-4px);
    border-color: rgba(184, 134, 40, 0.7);
    box-shadow: 0 14px 32px rgba(45, 30, 15, 0.09), 0 0 18px rgba(184, 134, 40, 0.16);
}

.particulars-stage-item:hover .stage-content::before {
    opacity: 1;
    height: 3.5px;
    background: linear-gradient(90deg, #B88628, #E6D0A0, #B88628);
}

.particulars-stage-item:hover .stage-title {
    color: #B88628;
}

/* BOTTOM CALLOUT BANNER */
.particulars-bottom-banner {
    background: linear-gradient(180deg, #FFFFFF 0%, #FAF5EB 100%);
    border: 1px solid rgba(199, 154, 59, 0.28);
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(45, 30, 15, 0.04);
    padding: 1.25rem 2.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 980px;
    margin: 3.8rem auto 0;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease 1.1s, transform 0.8s ease 1.1s;
}

.banner-left {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-shrink: 0;
}

.banner-sparkle-orb {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #FAF3E5;
    border: 1px solid rgba(199, 154, 59, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #B88628;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(199, 154, 59, 0.12);
}

.banner-title-line1,
.banner-title-line2 {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 800;
    color: #0F172A;
    letter-spacing: 0.04em;
    line-height: 1.2;
    margin: 0;
}

.banner-divider {
    width: 1.5px;
    height: 42px;
    background: rgba(199, 154, 59, 0.35);
    margin: 0 2rem;
    flex-shrink: 0;
}

.banner-right {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
}

.banner-sub-text {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: #554C43;
    margin: 0;
    font-weight: 500;
}

.banner-gold-highlight {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 700;
    color: #B88628;
    margin: 0;
}

/* ENTRANCE ANIMATION ON SCROLL */
.show-particulars-section.is-visible .particulars-header {
    opacity: 1;
    transform: translateY(0);
}

.show-particulars-section.is-visible .particulars-connector-line {
    transform: scaleX(1);
}

.show-particulars-section.is-visible .particulars-stage-item:nth-child(1) {
    transition-delay: 0.35s;
    opacity: 1;
    transform: translateY(0);
}

.show-particulars-section.is-visible .particulars-stage-item:nth-child(2) {
    transition-delay: 0.48s;
    opacity: 1;
    transform: translateY(0);
}

.show-particulars-section.is-visible .particulars-stage-item:nth-child(3) {
    transition-delay: 0.61s;
    opacity: 1;
    transform: translateY(0);
}

.show-particulars-section.is-visible .particulars-stage-item:nth-child(4) {
    transition-delay: 0.74s;
    opacity: 1;
    transform: translateY(0);
}

.show-particulars-section.is-visible .particulars-stage-item:nth-child(5) {
    transition-delay: 0.87s;
    opacity: 1;
    transform: translateY(0);
}

.show-particulars-section.is-visible .particulars-stage-item:nth-child(6) {
    transition-delay: 1.00s;
    opacity: 1;
    transform: translateY(0);
}

.show-particulars-section.is-visible .particulars-stage-item .stage-orb svg {
    transform: scale(1);
}

.show-particulars-section.is-visible .particulars-bottom-banner {
    opacity: 1;
    transform: translateY(0);
}

/* RESPONSIVE LAYOUT */
@media (max-width: 1140px) {
    .particulars-stages-grid {
        gap: 0.85rem;
    }

    .stage-desc {
        max-width: 155px;
        font-size: 0.75rem;
    }

    .particulars-bottom-banner {
        padding: 1.25rem 1.75rem;
    }
}

@media (max-width: 960px) {
    .particulars-connector-line {
        display: none;
    }

    .particulars-stages-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 2.25rem 1.5rem !important;
        max-width: 860px !important;
        margin: 0 auto !important;
    }

    .particulars-stage-item {
        flex: 0 0 calc(33.333% - 1.25rem) !important;
        min-width: 200px !important;
        max-width: 250px !important;
    }

    .stage-desc {
        max-width: 220px;
    }

    .particulars-bottom-banner {
        flex-direction: column;
        text-align: center;
        gap: 1.25rem;
        padding: 1.5rem;
    }

    .banner-divider {
        width: 60px;
        height: 1px;
        margin: 0 auto;
    }

    .banner-left {
        flex-direction: column;
        gap: 0.65rem;
    }
}

@media (max-width: 780px) and (min-width: 681px) {
    .particulars-stage-item {
        flex: 0 0 calc(50% - 1rem) !important;
        max-width: 260px !important;
    }
}

@media (max-width: 680px) {
    .show-particulars-section {
        padding: 4.25rem 0 4.75rem;
    }

    .particulars-header {
        margin-bottom: 2.25rem;
    }

    .particulars-main-headline {
        font-size: 1.85rem;
    }

    /* Vertical Storytelling Timeline on Mobile */
    .particulars-timeline-wrapper {
        padding-left: 0;
        width: 100%;
    }

    .particulars-stages-grid {
        display: flex;
        flex-direction: column;
        gap: 1.15rem;
        position: relative;
    }

    .particulars-stages-grid::before {
        content: '';
        position: absolute;
        top: 25px;
        bottom: 25px;
        left: 30px;
        width: 1.5px;
        background: linear-gradient(180deg, #C79A3B 0%, rgba(199, 154, 59, 0.2) 100%);
        z-index: 1;
    }

    .particulars-stage-item {
        display: grid;
        grid-template-columns: 60px 1fr;
        column-gap: 0.85rem;
        align-items: center;
        text-align: left;
    }

    .stage-num-badge {
        display: none;
    }

    .stage-orb-container {
        grid-column: 1;
        width: 60px;
        height: 60px;
        margin: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .stage-orb {
        width: 54px;
        height: 54px;
    }

    .stage-orb svg {
        width: 24px;
        height: 24px;
        transform: scale(0.85);
    }

    /* REDUCED COMPACT CARD HEIGHT ON MOBILE */
    .stage-content {
        grid-column: 2;
        min-height: auto !important;
        height: auto !important;
        padding: 0.85rem 1.05rem !important;
        align-items: flex-start !important;
        text-align: left !important;
        border-radius: 10px !important;
        box-shadow: 0 2px 10px rgba(45, 30, 15, 0.05) !important;
    }

    .stage-title {
        font-size: 0.82rem;
        margin-bottom: 0.25rem;
        line-height: 1.25;
        text-align: left;
    }

    .stage-desc {
        max-width: 100%;
        font-size: 0.775rem;
        line-height: 1.4;
        text-align: left;
    }
}

/* ACCESSIBILITY: PREFERS-REDUCED-MOTION */
@media (prefers-reduced-motion: reduce) {

    .particulars-header,
    .particulars-connector-line,
    .particulars-stage-item,
    .particulars-bottom-banner,
    .stage-orb svg {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* --------------------------------------------------------------------------
   10. SECTION 05 — WHAT YOU GET
   -------------------------------------------------------------------------- */
.what-you-get-section {
    background-color: var(--clr-espresso);
}

.section-heading-dark {
    font-size: clamp(1.85rem, 2.8vw, 2.5rem);
    color: var(--clr-warm-ivory);
    margin-bottom: 3rem;
    font-weight: 600;
}

.four-premium-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.75rem;
}

.dark-editorial-card {
    background: var(--clr-espresso-deep);
    border: 1px solid var(--clr-gold-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: var(--transition-base);
}

.dark-editorial-card:hover {
    border-color: var(--clr-antique-gold);
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.card-visual-header {
    height: 140px;
    background: #170E09;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(199, 154, 59, 0.15);
}

.card-badge-num {
    position: absolute;
    top: 10px;
    right: 12px;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--clr-antique-gold);
}

.card-content {
    padding: 1.5rem;
    flex-grow: 1;
}

.card-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--clr-champagne);
    margin-bottom: 0.6rem;
    letter-spacing: 0.05em;
}

.card-desc {
    font-size: 0.925rem;
    color: rgba(245, 238, 227, 0.8);
    line-height: 1.55;
}

.hotstar-emblem {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: #090807;
    border: 1px solid #C79A3B;
    padding: 0.6rem 1.25rem;
    border-radius: 4px;
}

.hotstar-star {
    color: #0084ff;
    font-size: 1.1rem;
}

.hotstar-text {
    font-family: var(--font-body);
    font-weight: 900;
    color: #fff;
}

.social-icons-group {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.social-pill {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.3rem 0.65rem;
    border-radius: 3px;
    color: #fff;
}

.social-pill.yt {
    background: #FF0000;
}

.social-pill.ig {
    background: #E1306C;
}

.social-pill.fb {
    background: #1877F2;
}

/* --------------------------------------------------------------------------
   11. SECTION 06 — WHERE YOUR STORY CAN REACH (Cinematic Landscape)
   -------------------------------------------------------------------------- */
.syndication-landscape-section {
    background-color: #090706;
    background-image:
        radial-gradient(ellipse at 75% 38%, rgba(55, 30, 18, 0.75) 0%, transparent 65%),
        radial-gradient(ellipse at 25% 65%, rgba(26, 14, 9, 0.85) 0%, #090706 85%);
    position: relative;
    padding: 5.5rem 0 4rem;
    overflow: hidden;
    color: #F2EBDD;
    border-bottom: 1px solid rgba(201, 154, 50, 0.16);
}

.syndication-atmosphere-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.syndication-backdrop {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.syndication-ambient-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
}

.glow-center {
    top: 40%;
    left: 65%;
    transform: translate(-50%, -50%);
    width: 850px;
    height: 520px;
    background: radial-gradient(ellipse, rgba(65, 36, 22, 0.75) 0%, rgba(38, 20, 13, 0.45) 45%, transparent 75%);
}

.glow-left {
    top: 25%;
    left: -60px;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(201, 154, 50, 0.08) 0%, rgba(55, 30, 18, 0.35) 50%, transparent 70%);
}

.glow-right {
    bottom: 15%;
    right: -60px;
    width: 550px;
    height: 550px;
    background: radial-gradient(circle, rgba(201, 154, 50, 0.18) 0%, rgba(70, 38, 22, 0.2) 45%, transparent 75%);
}

.syndication-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(7, 5, 4, 0.88) 95%);
    z-index: 2;
}

/* RIGHT-SIDE CINEMATIC WORLD NETWORK MAP BACKGROUND */
.syndication-right-bg-map-wrap {
    position: absolute;
    top: 40%;
    right: 0;
    transform: translateY(-50%);
    width: 66vw;
    max-width: 1100px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    pointer-events: none;
    z-index: 1;
    opacity: 0.95;
}

.syndication-right-bg-map-img {
    width: 100%;
    height: auto;
    display: block;
    filter: brightness(1) contrast(1.15) drop-shadow(0 0 50px rgba(200, 154, 58, 0.4));
}

.syndication-landscape-container {
    position: relative;
    z-index: 3;
    max-width: 1480px;
    width: 100%;
    margin: 0 auto;
    padding: 0 2.5rem;
}

/* TOP LANDSCAPE COMPOSITION: Left Editorial 2x2 Content & Right Map Showcase Column */
.syndication-main-landscape {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 3.5rem;
    align-items: center;
    min-height: auto;
    margin-bottom: 2.25rem;
    position: relative;
    z-index: 3;
    width: 100%;
}

/* LEFT EDITORIAL FLANK */
.syndication-editorial-flank {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 580px;
    z-index: 4;
}

.syndication-eyebrow-row {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.95rem;
}

.syndication-eyebrow-text {
    font-family: var(--font-body);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    color: #C89A3A;
    text-transform: uppercase;
}

.syndication-eyebrow-line {
    width: 32px;
    height: 1.5px;
    background: #C89A3A;
}

.syndication-main-headline {
    font-family: var(--font-display);
    font-size: clamp(2rem, 2.7vw, 3.2rem);
    font-weight: 700;
    color: #F2EBDD;
    line-height: 1.12;
    letter-spacing: -0.01em;
    margin-bottom: 0.65rem;
    white-space: nowrap;
}

.syndication-gold-serif {
    color: #C89A3A;
    font-style: italic;
    font-weight: 400;
    text-shadow: 0 0 28px rgba(200, 154, 58, 0.4);
}

.syndication-lead-copy {
    font-family: var(--font-body);
    font-size: 0.98rem;
    color: rgba(242, 235, 221, 0.75);
    margin: 0 0 1.25rem;
    line-height: 1.5;
    letter-spacing: 0.01em;
}

/* LUXURY 2x2 PLATFORM SHOWCASE GRID */
.syndication-platform-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 0.85rem;
    max-width: 580px;
    width: 100%;
}

/* RIGHT MAP SHOWCASE COLUMN (100% UNOBSTRUCTED & CRYSTAL CLEAR) */
.syndication-map-showcase-column {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: relative;
    z-index: 3;
}

.syndication-map-card {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 0;
}

.syndication-interactive-map-img {
    width: 100%;
    height: auto;
    max-height: 460px;
    object-fit: contain;
    display: block;
    filter: brightness(1.08) contrast(1.18) drop-shadow(0 0 45px rgba(200, 154, 58, 0.4));
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}

.syndication-interactive-map-img:hover {
    transform: scale(1.025);
    filter: brightness(1.15) contrast(1.22) drop-shadow(0 0 60px rgba(200, 154, 58, 0.6));
}

.platform-glass-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, rgba(28, 18, 10, 0.72) 0%, rgba(14, 9, 5, 0.88) 100%);
    border: 1px solid rgba(201, 154, 50, 0.24);
    border-radius: 10px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.06);
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.platform-glass-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(201, 154, 50, 0.12), transparent);
    transition: left 0.65s ease;
    pointer-events: none;
}

.platform-glass-card:hover {
    transform: translateY(-2.5px);
    border-color: rgba(224, 182, 79, 0.6);
    background: linear-gradient(135deg, rgba(38, 24, 13, 0.88) 0%, rgba(20, 13, 7, 0.96) 100%);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), 0 0 22px rgba(201, 154, 50, 0.22), inset 0 1px 1px rgba(255, 255, 255, 0.14);
}

.platform-glass-card:hover::before {
    left: 100%;
}

.platform-icon-orb {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: linear-gradient(135deg, rgba(201, 154, 50, 0.18) 0%, rgba(20, 13, 7, 0.9) 100%);
    border: 1px solid rgba(201, 154, 50, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.14), 0 2px 8px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.platform-glass-card:hover .platform-icon-orb {
    transform: scale(1.08);
    border-color: #E0B64F;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.22), 0 0 14px rgba(201, 154, 50, 0.45);
}

.platform-icon-orb svg {
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
    transition: filter 0.3s ease;
}

.platform-glass-card:hover .platform-icon-orb svg {
    filter: drop-shadow(0 0 8px rgba(224, 182, 79, 0.65));
}

.platform-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.platform-card-jio {
    justify-content: flex-start;
    padding: 0.7rem 1.15rem;
}

.platform-jio-logo-img {
    height: 38px;
    width: auto;
    max-width: 170px;
    object-fit: contain;
    display: block;
    margin: 0;
    border-radius: 7px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.platform-glass-card:hover .platform-jio-logo-img {
    transform: scale(1.05);
    box-shadow: 0 0 16px rgba(0, 140, 255, 0.4), 0 0 16px rgba(224, 32, 128, 0.4);
}

.platform-name {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 700;
    color: #F7EFE4;
    letter-spacing: 0.01em;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.25s ease, text-shadow 0.25s ease;
}

.platform-glass-card:hover .platform-name {
    color: #FFFFFF;
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.55);
}

.platform-role {
    font-family: var(--font-body);
    font-size: 0.70rem;
    font-weight: 600;
    color: rgba(229, 168, 35, 0.92);
    letter-spacing: 0.03em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.25s ease, text-shadow 0.25s ease;
}

.platform-glass-card:hover .platform-role {
    color: #FFD700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.35);
}

/* 04 EXPECTED REACH 2x2 GRID CARD */
.platform-card-reach {
    border: 1px solid rgba(201, 154, 50, 0.35);
    background: linear-gradient(135deg, rgba(34, 22, 12, 0.78) 0%, rgba(16, 10, 5, 0.92) 100%);
}

.platform-card-reach:hover {
    border-color: rgba(224, 182, 79, 0.7);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), 0 0 24px rgba(201, 154, 50, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.16);
}

.platform-icon-orb-reach {
    background: rgba(255, 215, 0, 0.08);
    border-color: rgba(201, 154, 50, 0.4);
}

.platform-info-reach {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.15rem;
}

.platform-reach-tag {
    font-family: var(--font-body);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    color: #C89A3A;
    text-transform: uppercase;
    line-height: 1;
}

.platform-reach-value {
    font-family: var(--font-display);
    font-size: 1.08rem;
    font-weight: 800;
    color: #FFFDF5;
    letter-spacing: 0.02em;
    line-height: 1.15;
    text-shadow: 0 0 14px rgba(200, 154, 58, 0.4);
}

.platform-reach-unit {
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 800;
    color: #C89A3A;
    letter-spacing: 0.12em;
}

/* BOTTOM HORIZONTAL STRIP: SINGLE CONTINUOUS BAR */
.syndication-bottom-partner-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    background: rgba(14, 9, 6, 0.85);
    border: 1px solid rgba(201, 154, 50, 0.32);
    border-radius: 8px;
    padding: 1.1rem 2rem;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08), 0 12px 32px rgba(0, 0, 0, 0.7);
}

.partner-airlines-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    gap: 1.25rem;
}

.partner-airline-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.5rem;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.partner-airline-item:hover {
    transform: translateY(-2px);
}

.partner-airline-logo-img {
    height: 48px;
    width: auto;
    max-width: 175px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6));
    transition: transform 0.3s ease, filter 0.3s ease;
}

.partner-logo-etihad {
    height: 52px;
    max-width: 170px;
}

.partner-logo-emirates {
    height: 58px;
    max-width: 130px;
}

.partner-logo-ba {
    height: 44px;
    max-width: 170px;
}

.partner-logo-kuwait {
    height: 52px;
    max-width: 145px;
}

.partner-logo-gulf {
    height: 56px;
    max-width: 145px;
}

.partner-airline-item:hover .partner-airline-logo-img {
    transform: scale(1.08);
    filter: drop-shadow(0 0 14px rgba(201, 154, 50, 0.5));
}

.partner-strip-divider {
    width: 1px;
    height: 44px;
    background: rgba(201, 154, 50, 0.26);
    flex-shrink: 0;
}

/* EDITORIAL EXPECTED REACH BADGE (POSITIONED BELOW JIOHOTSTAR PLATFORM GRID) */
.syndication-editorial-reach {
    margin-top: 1.5rem;
    display: inline-flex;
    align-items: center;
    width: 100%;
}

.syndication-editorial-reach .partner-reach-block {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.85rem;
    padding: 0.65rem 1.35rem;
    background: linear-gradient(135deg, rgba(28, 18, 10, 0.72) 0%, rgba(14, 9, 5, 0.88) 100%);
    border: 1px solid rgba(201, 154, 50, 0.26);
    border-radius: 9px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.06);
}

.syndication-editorial-reach .partner-reach-label {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: #C89A3A;
    text-transform: uppercase;
    margin-bottom: 0;
}

.syndication-editorial-reach .partner-reach-metric {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 800;
    color: #F2EBDD;
    letter-spacing: 0.03em;
    white-space: nowrap;
    line-height: 1;
    text-shadow: 0 0 16px rgba(200, 154, 58, 0.4);
}

.syndication-editorial-reach .partner-reach-sub {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: #C89A3A;
    text-transform: uppercase;
    margin-top: 0;
    line-height: 1;
}

@media (max-width: 640px) {
    .syndication-editorial-reach {
        justify-content: center;
    }
}

/* DIGIKORE ORIGINALS SECTION (TWO-COLUMN WITH BRAND LOGO CARD ON RIGHT) */
.digikore-originals-block {
    margin-top: 3.25rem;
    padding-top: 2.75rem;
    border-top: 1px solid rgba(201, 154, 50, 0.2);
    display: grid;
    grid-template-columns: 1.35fr 0.85fr;
    gap: 3.5rem;
    align-items: center;
    position: relative;
    z-index: 4;
    width: 100%;
}

.digikore-originals-content-flank {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.digikore-originals-header {
    margin-bottom: 1.35rem;
}

.digikore-originals-title {
    font-family: var(--font-display);
    font-size: clamp(1.85rem, 2.5vw, 2.5rem);
    font-weight: 700;
    color: #F2EBDD;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0 0 0.85rem;
}

.digikore-originals-desc {
    font-family: var(--font-body);
    font-size: 0.98rem;
    color: rgba(242, 235, 221, 0.78);
    line-height: 1.6;
    letter-spacing: 0.01em;
    margin: 0 0 1.25rem;
    max-width: 680px;
}

.digikore-follow-wrap {
    margin-bottom: 0.85rem;
}

.digikore-follow-label {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: #C89A3A;
    text-transform: uppercase;
}

.digikore-originals-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    max-width: 680px;
    width: 100%;
}

/* RIGHT FLANK: BRAND LOGO CARD SHOWCASE */
.digikore-originals-visual-flank {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.digikore-brand-logo-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 2.5rem;
    background: linear-gradient(135deg, rgba(28, 18, 10, 0.78) 0%, rgba(14, 9, 5, 0.94) 100%);
    border: 1px solid rgba(201, 154, 50, 0.35);
    border-radius: 16px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.1);
    max-width: 440px;
    width: 100%;
    transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.digikore-brand-logo-card:hover {
    transform: translateY(-4px);
    border-color: rgba(224, 182, 79, 0.7);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.7), 0 0 30px rgba(201, 154, 50, 0.28), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

.digikore-logo-ambient-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 260px;
    height: 140px;
    background: radial-gradient(ellipse, rgba(201, 154, 50, 0.32) 0%, rgba(201, 154, 50, 0.08) 55%, transparent 70%);
    pointer-events: none;
    filter: blur(20px);
}

.digikore-showcase-logo-img {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 320px;
    height: auto;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 4px 18px rgba(200, 154, 58, 0.45));
    transition: transform 0.35s ease, filter 0.35s ease;
}

.digikore-brand-logo-card:hover .digikore-showcase-logo-img {
    transform: scale(1.04);
    filter: drop-shadow(0 6px 24px rgba(200, 154, 58, 0.65));
}

/* RESPONSIVE MEDIA QUERIES FOR SYNDICATION SECTION */
@media (max-width: 992px) {
    .digikore-originals-block {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        text-align: center;
        align-items: center;
        margin-top: 2.75rem;
        padding-top: 2.5rem;
    }

    .digikore-originals-content-flank {
        align-items: center;
    }

    .digikore-originals-desc {
        margin: 0 auto 1.25rem;
    }

    .digikore-originals-grid {
        margin: 0 auto;
    }

    .digikore-brand-logo-card {
        margin: 0 auto;
        padding: 2.25rem 2rem;
    }

    .syndication-landscape-section {
        padding: 5.5rem 0 4.5rem;
    }

    .syndication-main-landscape {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        min-height: auto;
        padding-bottom: 2rem;
        width: 100%;
    }

    .syndication-editorial-flank {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%;
        max-width: 820px;
        margin: 0 auto;
    }

    .syndication-eyebrow-row {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin: 0 auto 1.25rem;
    }

    .syndication-eyebrow-line {
        margin: 0.5rem auto 0;
    }

    .syndication-main-headline {
        text-align: center;
        margin: 0 auto 0.75rem;
        white-space: nowrap !important;
        font-size: clamp(1.85rem, 4.5vw, 2.75rem) !important;
    }

    .syndication-lead-copy {
        text-align: center;
        margin: 0 auto 2.25rem;
    }

    .syndication-platform-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 620px;
        width: 100%;
        margin: 0 auto 1.5rem;
        gap: 0.85rem;
    }

    .syndication-map-showcase-column {
        width: 100%;
        max-width: 680px;
        margin: 1.5rem auto 0;
    }

    .platform-glass-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: left !important;
        gap: 0.85rem !important;
        padding: 0.75rem 1rem !important;
    }

    .platform-icon-orb {
        flex-shrink: 0 !important;
        margin: 0 !important;
    }

    .platform-info {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        flex-grow: 1 !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .platform-name {
        text-align: left !important;
        margin: 0 !important;
        display: block !important;
        width: 100% !important;
    }

    .platform-role {
        text-align: left !important;
        margin: 0 !important;
        display: block !important;
        width: 100% !important;
    }

    .platform-info-jio {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        text-align: left !important;
    }

    .platform-jio-logo-img {
        margin: 0 !important;
        display: block !important;
    }

    .syndication-bottom-partner-strip {
        flex-direction: column;
        gap: 1.5rem;
        padding: 1.5rem;
        max-width: 760px;
        width: 100%;
        margin: 0 auto;
    }

    .partner-airlines-group {
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.5rem 2rem;
    }

    .partner-strip-divider-accent {
        width: 80%;
        height: 1px;
        margin: 0 auto;
    }

    .partner-reach-block {
        align-items: center;
        text-align: center;
        padding-left: 0;
    }
}

@media (max-width: 640px) {
    .syndication-landscape-section {
        padding: 4.5rem 0 3.5rem;
    }

    .syndication-platform-grid {
        grid-template-columns: 1fr;
        max-width: 380px;
        margin: 0 auto 2rem;
    }

    .platform-glass-card {
        padding: 0.8rem 1rem !important;
        gap: 0.85rem !important;
        justify-content: flex-start !important;
        text-align: left !important;
    }

    .platform-info {
        align-items: flex-start !important;
        text-align: left !important;
    }

    .platform-name,
    .platform-role {
        text-align: left !important;
    }

    .partner-airlines-group {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }

    .partner-strip-divider {
        display: none;
    }

    .partner-reach-metric {
        font-size: 1.25rem;
    }
}

/* --------------------------------------------------------------------------
   12. SECTION 07 — MORE THAN AN INTERVIEW (Warm Ivory Editorial)
   -------------------------------------------------------------------------- */
.more-than-interview-section {
    position: relative;
    background-color: #FAF7F2;
    background-image:
        radial-gradient(rgba(184, 134, 40, 0.08) 1px, transparent 1px),
        linear-gradient(180deg, #FAF7F2 0%, #F5EFE6 50%, #FAF7F2 100%);
    background-size: 24px 24px, 100% 100%;
    padding: 5.5rem 0 5.5rem;
    overflow: hidden;
    color: #1A130D;
}

/* Subtle champagne gold concentric circles in the upper-right */
.interview-bg-circles {
    position: absolute;
    top: -140px;
    right: -120px;
    width: 780px;
    height: 780px;
    pointer-events: none;
    z-index: 1;
}

.interview-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(184, 134, 40, 0.15);
}

.ring-1 {
    width: 320px;
    height: 320px;
}

.ring-2 {
    width: 480px;
    height: 480px;
}

.ring-3 {
    width: 650px;
    height: 650px;
}

.ring-4 {
    width: 820px;
    height: 820px;
}

.interview-section-container {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2.5rem;
}

/* TOP COMPOSITION: Two columns (Editorial Flank + Hero Image) */
.interview-top-composition {
    display: grid;
    grid-template-columns: 1.15fr 0.95fr;
    gap: 3.5rem;
    align-items: center;
    margin-bottom: 3.5rem;
}

.interview-editorial-flank {
    display: flex;
    flex-direction: column;
    max-width: 620px;
}

.interview-chapter-header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.4rem;
}

.interview-chapter-number {
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 5vw, 4.6rem);
    font-weight: 700;
    color: #B88628;
    line-height: 0.9;
    letter-spacing: -0.02em;
}

.interview-chapter-divider {
    width: 1.5px;
    height: 44px;
    background: rgba(184, 134, 40, 0.42);
}

.interview-chapter-meta {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.interview-eyebrow-text {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    color: #B88628;
    text-transform: uppercase;
}

.interview-eyebrow-line {
    width: 36px;
    height: 1.5px;
    background: #B88628;
}

.interview-main-headline {
    font-family: var(--font-display);
    font-size: clamp(1.85rem, 2.45vw, 2.55rem);
    font-weight: 700;
    color: #1A130D;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0 0 0.85rem;
}

.interview-gold-subheadline {
    font-family: var(--font-display);
    font-size: clamp(1.65rem, 2.25vw, 2.3rem);
    font-weight: 600;
    color: #B88628;
    line-height: 1.25;
    margin: 0;
}

/* UPPER-RIGHT CINEMATIC INTERVIEW FRAME */
.interview-hero-frame {
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 16px 36px rgba(45, 30, 15, 0.12), 0 2px 10px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(184, 134, 40, 0.22);
    background: #140E0A;
}

.interview-hero-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 16 / 9;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.interview-hero-frame:hover .interview-hero-img {
    transform: scale(1.025);
}

/* BOTTOM SIX STORY CARDS IN ONE HORIZONTAL ROW (IMAGELESS EDITORIAL LUXURY DESIGN) */
.six-story-cards-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    width: 100%;
    margin-top: 1.5rem;
}

.story-doc-card {
    background: linear-gradient(180deg, #FFFFFF 0%, #FAF6EE 100%);
    border: 1px solid rgba(184, 134, 40, 0.24);
    border-radius: 8px;
    padding: 1.65rem 1.15rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-shadow: 0 4px 16px rgba(45, 30, 15, 0.04);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.story-doc-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #C79A3B, transparent);
    opacity: 0.65;
    transition: all 0.35s ease;
}

.story-doc-card:hover {
    transform: translateY(-6px);
    border-color: rgba(184, 134, 40, 0.65);
    box-shadow: 0 14px 28px rgba(45, 30, 15, 0.08), 0 0 18px rgba(184, 134, 40, 0.14);
}

.story-doc-card:hover::before {
    opacity: 1;
    height: 3px;
    background: linear-gradient(90deg, #B88628, #E6D0A0, #B88628);
}

.story-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    width: 100%;
}

.story-card-number {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: #B88628;
    line-height: 1;
    letter-spacing: -0.01em;
}

.story-card-icon-wrap {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #FAF3E5;
    border: 1px solid rgba(184, 134, 40, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #B88628;
    box-shadow: 0 2px 6px rgba(45, 30, 15, 0.04);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.story-card-icon-wrap svg {
    display: block;
    transition: transform 0.35s ease;
}

.story-doc-card:hover .story-card-icon-wrap {
    background: linear-gradient(135deg, #B88628 0%, #D4A843 100%);
    color: #FFFFFF;
    border-color: #B88628;
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(184, 134, 40, 0.35);
}

.story-card-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    flex: 1;
    background: transparent;
    padding: 0;
}

.story-card-title {
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 800;
    color: #1A130D;
    letter-spacing: 0.07em;
    margin: 0 0 0.45rem;
    text-transform: uppercase;
    line-height: 1.25;
}

.story-title-line {
    width: 22px;
    height: 1.5px;
    background: #B88628;
    margin: 0 0 0.75rem;
    transition: width 0.35s ease, background-color 0.35s ease;
}

.story-doc-card:hover .story-title-line {
    width: 36px;
    background: #B88628;
}

.story-card-text {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: #554C43;
    line-height: 1.52;
    margin: 0;
}

/* RESPONSIVE LAYOUT */
@media (max-width: 1180px) {
    .six-story-cards-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
    }
}

@media (max-width: 900px) {
    .interview-top-composition {
        grid-template-columns: 1fr;
        gap: 2.25rem;
    }

    .interview-editorial-flank {
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    .more-than-interview-section {
        padding: 4.5rem 0 4rem;
    }

    .six-story-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.9rem;
    }

    .interview-section-container {
        padding: 0 1.25rem;
    }
}

@media (max-width: 420px) {
    .six-story-cards-grid {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   13. SECTION 08 — WHY THIS APPROACH WORKS
   -------------------------------------------------------------------------- */
.six-benefit-columns {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.5rem;
    margin-top: 3rem;
}

.benefit-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1rem;
    background: #FAF6EF;
    border: 1px solid rgba(199, 154, 59, 0.25);
    border-radius: var(--radius-sm);
    transition: var(--transition-base);
}

.benefit-col:hover {
    border-color: var(--clr-antique-gold);
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(42, 37, 33, 0.06);
}

.benefit-icon {
    margin-bottom: 1.25rem;
}

.benefit-title {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--clr-charcoal);
    line-height: 1.4;
}

/* --------------------------------------------------------------------------
   14. SECTION 09 — WHY HEROES? (Editorial 5 Blocks + Center Emblem)
   -------------------------------------------------------------------------- */
.five-story-blocks-container {
    display: grid;
    grid-template-columns: 1fr 1fr auto 1fr 1fr;
    gap: 1.5rem;
    align-items: center;
}

.editorial-story-block {
    background: var(--clr-espresso);
    border: 1px solid var(--clr-gold-border);
    padding: 1.5rem;
    border-radius: var(--radius-sm);
    transition: var(--transition-base);
}

.editorial-story-block:hover {
    border-color: var(--clr-antique-gold);
    transform: translateY(-3px);
}

.story-block-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.block-num {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--clr-antique-gold);
}

.story-block-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--clr-champagne);
    margin-bottom: 0.5rem;
}

.story-block-desc {
    font-size: 0.85rem;
    color: rgba(245, 238, 227, 0.75);
    line-height: 1.5;
}

.central-glow-emblem-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 0.5rem;
}

.central-glow-logo {
    width: 100%;
    max-width: 130px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 18px rgba(199, 154, 59, 0.45));
    display: block;
    animation: logoFloat 7s ease-in-out infinite alternate;
}

/* --------------------------------------------------------------------------
   15. SECTION 10 — WHO WE FEATURE (Cinematic Dark Obsidian & Gold)
   -------------------------------------------------------------------------- */
.built-for-founders-section {
    position: relative;
    background-color: #090706;
    background-image:
        radial-gradient(circle at 65% 50%, rgba(35, 20, 12, 0.75) 0%, rgba(13, 9, 7, 0.95) 60%, #090706 100%),
        radial-gradient(rgba(201, 154, 50, 0.08) 1px, transparent 1px);
    background-size: 100% 100%, 28px 28px;
    padding: 6.5rem 0 6.5rem;
    overflow: hidden;
    color: #F4EBDD;
}

.founders-atmosphere-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.founders-ambient-glow {
    position: absolute;
    top: 30%;
    right: 15%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(201, 154, 50, 0.12) 0%, rgba(184, 90, 20, 0.05) 50%, transparent 70%);
    filter: blur(60px);
    pointer-events: none;
    z-index: 1;
}

.founders-section-container {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2.5rem;
}

.split-founders-layout {
    display: grid;
    grid-template-columns: 1.15fr 0.9fr;
    gap: 3.8rem;
    align-items: center;
}

.founders-left {
    display: flex;
    flex-direction: column;
}

.founders-chapter-header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.founders-chapter-number {
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 5vw, 4.6rem);
    font-weight: 700;
    color: #C99A32;
    line-height: 0.9;
    letter-spacing: -0.02em;
}

.founders-chapter-divider {
    width: 1.5px;
    height: 44px;
    background: rgba(201, 154, 50, 0.45);
}

.founders-chapter-meta {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.founders-eyebrow-text {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    color: #C99A32;
    text-transform: uppercase;
}

.founders-eyebrow-line {
    width: 36px;
    height: 1.5px;
    background: #C99A32;
}

.founders-main-headline {
    font-family: var(--font-display);
    font-size: clamp(2rem, 2.85vw, 2.95rem);
    font-weight: 700;
    color: #F4EBDD;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0 0 1.15rem;
}

.founders-gold-accent {
    color: #C99A32;
    font-weight: 700;
}

.founders-subheading {
    font-family: var(--font-body);
    font-size: 1.05rem;
    color: #C8BDAA;
    margin-bottom: 1.85rem;
}

/* 2x2 Feature Cards Grid */
.four-founder-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.founder-editorial-card {
    background: rgba(22, 14, 10, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(201, 154, 50, 0.22);
    border-radius: 4px;
    padding: 1.5rem 1.4rem 1.35rem;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.founder-editorial-card:hover {
    transform: translateY(-4px);
    border-color: rgba(201, 154, 50, 0.65);
    background: rgba(30, 18, 12, 0.75);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6), 0 0 18px rgba(201, 154, 50, 0.15);
}

.founder-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.9rem;
}

.founder-card-num-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.founder-card-num {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: #C99A32;
    line-height: 1;
}

.founder-num-bar {
    width: 22px;
    height: 1px;
    background: rgba(201, 154, 50, 0.5);
}

.founder-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
    transition: transform 0.3s ease;
}

.founder-editorial-card:hover .founder-card-icon {
    transform: scale(1.1);
}

.founder-card-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: #F4EBDD;
    margin: 0 0 0.45rem;
    line-height: 1.2;
}

.founder-card-desc {
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: #C8BDAA;
    line-height: 1.45;
    margin: 0;
    padding-right: 1.5rem;
}

.founder-card-arrow {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    opacity: 0.75;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.founder-editorial-card:hover .founder-card-arrow {
    transform: translateX(3px);
    opacity: 1;
}

/* RIGHT COLUMN: Real Bajaj Capital Featured Frame */
.bajaj-featured-panel-wrap {
    position: relative;
    width: 100%;
}

.bajaj-panel-glow {
    position: absolute;
    inset: -15px;
    background: radial-gradient(circle at 50% 60%, rgba(201, 154, 50, 0.25) 0%, rgba(184, 90, 20, 0.1) 45%, transparent 70%);
    filter: blur(25px);
    pointer-events: none;
    z-index: 1;
}

.bajaj-featured-frame {
    position: relative;
    z-index: 2;
    width: 100%;
    border-radius: 12px;
    border: 1px solid rgba(201, 154, 50, 0.4);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.75), 0 0 25px rgba(201, 154, 50, 0.15);
    overflow: hidden;
    background: #0D0907;
}

.bajaj-featured-photo {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.bajaj-featured-frame:hover .bajaj-featured-photo {
    transform: scale(1.02);
}

/* --------------------------------------------------------------------------
   16. SECTION 11 — ECOSYSTEM VALUE (Warm Ivory Editorial #F5EFE5)
   -------------------------------------------------------------------------- */
.ecosystem-value-section {
    position: relative;
    background-color: #F5EFE5;
    background-image:
        radial-gradient(rgba(199, 154, 59, 0.08) 1px, transparent 1px),
        linear-gradient(180deg, #F5EFE5 0%, #EEE5D7 50%, #F5EFE5 100%);
    background-size: 24px 24px, 100% 100%;
    padding: 6.5rem 0 6.5rem;
    overflow: hidden;
    color: #1A120B;
}

.ecosystem-section-container {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2.5rem;
}

.split-ecosystem-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.8rem;
    align-items: center;
}

.ecosystem-left {
    display: flex;
    flex-direction: column;
}

.ecosystem-chapter-header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.ecosystem-chapter-number {
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 5vw, 4.6rem);
    font-weight: 700;
    color: #C79A3B;
    line-height: 0.9;
    letter-spacing: -0.02em;
}

.ecosystem-chapter-divider {
    width: 1.5px;
    height: 44px;
    background: rgba(199, 154, 59, 0.45);
}

.ecosystem-chapter-meta {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.ecosystem-eyebrow-text {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    color: #C79A3B;
    text-transform: uppercase;
}

.ecosystem-eyebrow-line {
    width: 36px;
    height: 1.5px;
    background: #C79A3B;
}

.ecosystem-main-headline {
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 3vw, 3.1rem);
    font-weight: 700;
    color: #1A120B;
    line-height: 1.18;
    letter-spacing: -0.01em;
    margin: 0 0 1.25rem;
}

.ecosystem-gold-accent {
    color: #C79A3B;
    font-weight: 700;
}

.ecosystem-lead-desc {
    font-family: var(--font-body);
    font-size: 0.96rem;
    color: #4A3E35;
    line-height: 1.55;
    margin-bottom: 1.85rem;
}

/* 3x3 Refined Horizontal Tile Grid */
.ecosystem-tiles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1rem;
    margin-bottom: 2.5rem;
}

.eco-tile {
    background: #FAF7F2;
    border: 1px solid rgba(199, 154, 59, 0.28);
    border-radius: 10px;
    padding: 1.15rem 1.1rem;
    min-height: 72px;
    display: flex;
    align-items: center;
    gap: 0.95rem;
    box-shadow: 0 4px 14px rgba(45, 30, 15, 0.04);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.eco-tile:hover {
    transform: translateY(-3px);
    border-color: rgba(199, 154, 59, 0.65);
    background: #FFFFFF;
    box-shadow: 0 10px 24px rgba(45, 30, 15, 0.09), 0 0 14px rgba(199, 154, 59, 0.12);
}

.eco-tile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    transition: transform 0.3s ease;
}

.eco-tile:hover .eco-tile-icon {
    transform: scale(1.08);
}

.eco-tile-label {
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 700;
    color: #1A120B;
    line-height: 1.25;
}

/* Bottom Concluding Statement */
.ecosystem-statement-wrap {
    display: flex;
    align-items: center;
    gap: 1.15rem;
}

.ecosystem-statement-bar {
    width: 32px;
    height: 2px;
    background: #C79A3B;
    flex-shrink: 0;
}

.ecosystem-statement-text {
    font-family: var(--font-display);
    font-size: clamp(0.95rem, 1.25vw, 1.12rem);
    font-weight: 800;
    letter-spacing: 0.03em;
    color: #1A120B;
    line-height: 1.35;
    margin: 0;
}

.statement-gold {
    color: #C79A3B;
}

/* RIGHT COLUMN: Featured Media Panel */
.ecosystem-featured-panel {
    position: relative;
    background: #FAF7F2;
    border: 1px solid rgba(199, 154, 59, 0.25);
    border-radius: 12px;
    padding: 1.6rem 1.6rem 1.45rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 16px 40px rgba(45, 30, 15, 0.07);
    overflow: hidden;
}

.ecosystem-concentric-circles {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
}

.eco-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(199, 154, 59, 0.12);
}

.eco-ring-1 {
    width: 340px;
    height: 340px;
}

.eco-ring-2 {
    width: 520px;
    height: 520px;
}

.eco-ring-3 {
    width: 720px;
    height: 720px;
}

/* 16:9 Video Frame */
.ecosystem-trailer-video-frame {
    position: relative;
    z-index: 2;
    width: 100%;
    aspect-ratio: 16 / 9.5;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.25);
    background: #000;
    cursor: pointer;
}

.ecosystem-trailer-player {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    background: #000;
}

.trailer-gold-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(20, 14, 10, 0.72);
    border: 1.5px solid #C79A3B;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 20px rgba(199, 154, 59, 0.35);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, opacity 0.3s ease;
    z-index: 4;
}

.trailer-gold-play-btn svg {
    margin-left: 3px;
}

.trailer-play-pulse {
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    border: 1.5px solid rgba(199, 154, 59, 0.45);
    animation: goldPulse 2.2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.ecosystem-trailer-video-frame:hover .trailer-gold-play-btn {
    transform: translate(-50%, -50%) scale(1.1);
    background: rgba(30, 20, 12, 0.9);
}

.trailer-gold-play-btn.is-hidden {
    opacity: 0;
    pointer-events: none;
}

/* Editorial Information Bar & JioHotstar CTA */
.ecosystem-trailer-footer {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.25rem;
    margin-top: 1.25rem;
    padding: 0 0.15rem;
}

.trailer-footer-left {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.trailer-sub-label {
    font-family: var(--font-body);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: #C79A3B;
    text-transform: uppercase;
}

.trailer-headline {
    font-family: var(--font-display);
    font-size: 1.32rem;
    font-weight: 700;
    color: #1A120B;
    line-height: 1.25;
    margin: 0;
}

.trailer-desc {
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: #5A4E45;
    line-height: 1.42;
    margin: 0;
    max-width: 320px;
}

.trailer-footer-right {
    flex-shrink: 0;
}

.jiohotstar-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background: linear-gradient(135deg, #C79A3B 0%, #B88628 100%);
    color: #1A120B;
    padding: 0.8rem 1.25rem;
    border-radius: 4px;
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 6px 18px rgba(199, 154, 59, 0.35);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.jiohotstar-cta-btn:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #D8B45A 0%, #C79A3B 100%);
    box-shadow: 0 10px 24px rgba(199, 154, 59, 0.45);
    color: #1A120B;
}

.jio-star-icon {
    flex-shrink: 0;
}

.jio-arrow-icon {
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.jiohotstar-cta-btn:hover .jio-arrow-icon {
    transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   17. SECTION 12 — PRODUCTION WORKFLOW (HOW HEROES WORKS)
   -------------------------------------------------------------------------- */
.how-heroes-works-section {
    position: relative;
    background-color: #090706;
    background-image:
        radial-gradient(circle at 50% 50%, rgba(38, 22, 14, 0.85) 0%, rgba(13, 9, 7, 0.96) 60%, #090706 100%),
        radial-gradient(rgba(201, 154, 50, 0.08) 1px, transparent 1px);
    background-size: 100% 100%, 28px 28px;
    padding: 7.5rem 0 8.5rem;
    overflow: hidden;
    color: #F4EBDD;
}

.workflow-atmosphere-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.workflow-ambient-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 900px;
    height: 600px;
    background: radial-gradient(ellipse, rgba(201, 154, 50, 0.12) 0%, rgba(184, 90, 20, 0.05) 50%, transparent 70%);
    filter: blur(60px);
    pointer-events: none;
    z-index: 1;
}

.container.workflow-section-container,
.workflow-section-container {
    position: relative;
    z-index: 2;
    max-width: 1560px !important;
    width: 95% !important;
    padding: 0 1.25rem !important;
    margin: 0 auto;
}

/* Chapter Header: Centered "12 | PRODUCTION WORKFLOW" */
.workflow-chapter-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.15rem;
}

.workflow-chapter-number {
    font-family: var(--font-display);
    font-size: 2.75rem;
    font-weight: 700;
    color: #C79A3B;
    line-height: 1;
    letter-spacing: -0.02em;
}

.workflow-chapter-divider {
    width: 1.5px;
    height: 38px;
    background: linear-gradient(180deg, rgba(199, 154, 59, 0.8) 0%, rgba(199, 154, 59, 0.2) 100%);
}

.workflow-chapter-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

.workflow-eyebrow-text {
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    color: #C79A3B;
    text-transform: uppercase;
}

.workflow-eyebrow-line {
    width: 36px;
    height: 1.5px;
    background: #C79A3B;
    margin: 0 auto;
}

.workflow-title-wrap {
    text-align: center;
    margin-bottom: 3.5rem;
}

.workflow-main-headline {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 3.8vw, 3.4rem);
    font-weight: 700;
    color: #F4EBDD;
    letter-spacing: 0.02em;
    line-height: 1.15;
    margin: 0 auto;
    text-align: center;
}

.workflow-gold-accent {
    color: #C79A3B;
}

/* Horizontal Timeline Layout with Central Horizontal Track */
.workflow-horizontal-timeline {
    position: relative;
    width: 100%;
    margin-top: 1rem;
    padding: 1.5rem 0 2rem;
}

.workflow-central-track {
    position: absolute;
    top: 215px;
    left: 0;
    right: 0;
    width: 100%;
    height: 2px;
    transform: translateY(-50%);
    z-index: 1;
}

.track-glow-line {
    position: absolute;
    inset: -3px 0;
    height: 8px;
    background: linear-gradient(90deg, transparent 0%, rgba(201, 154, 46, 0.4) 15%, rgba(201, 154, 46, 0.95) 50%, rgba(201, 154, 46, 0.4) 85%, transparent 100%);
    filter: blur(4px);
}

.track-solid-line {
    position: absolute;
    inset: 0;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(201, 154, 46, 0.6) 10%, #C99A2E 50%, rgba(201, 154, 46, 0.85) 85%, rgba(201, 154, 46, 0.5) 100%);
}

.workflow-timeline-grid-2row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 200px 220px;
    gap: 0 1.25rem;
    width: 100%;
    position: relative;
    z-index: 2;
}

/* Slot Alignment (Row 1 vs Row 2) */
.timeline-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 100%;
}

.timeline-slot.slot-top {
    grid-row: 1;
    justify-content: flex-end;
}

.timeline-slot.slot-bottom {
    grid-row: 2;
    justify-content: flex-start;
}

.timeline-slot.col-1 {
    grid-column: 1;
}

.timeline-slot.col-2 {
    grid-column: 2;
}

.timeline-slot.col-3 {
    grid-column: 3;
}

.timeline-slot.col-4 {
    grid-column: 4;
}

.timeline-slot.col-5 {
    grid-column: 5;
}

/* Stem Connection Box */
.workflow-stem-box {
    height: 38px;
    width: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex-shrink: 0;
}

.workflow-vertical-stem {
    width: 1.5px;
    height: 100%;
    background: linear-gradient(180deg, #E2B84D 0%, rgba(201, 154, 46, 0.7) 100%);
    box-shadow: 0 0 8px rgba(201, 154, 46, 0.6);
}

/* Glowing Circular Track Nodes (Centered directly on the track line) */
.workflow-track-node {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: radial-gradient(circle, #E6BF65 0%, #B88924 70%);
    border: 2px solid #FFFFFF;
    box-shadow: 0 0 12px rgba(226, 184, 77, 0.9), 0 0 20px rgba(201, 154, 46, 0.5);
    position: absolute;
    left: 50%;
    z-index: 5;
}

.stem-down .workflow-track-node {
    bottom: -9px;
    transform: translateX(-50%);
}

.stem-up .workflow-track-node {
    top: -9px;
    transform: translateX(-50%);
}

.workflow-track-node::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #F4EBDD;
    box-shadow: 0 0 6px #FFFFFF;
}

/* Refined Landscape Pill Card matching close-up mockup */
.workflow-card {
    width: 100%;
    min-width: 0;
    background: rgba(14, 9, 6, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1.5px solid rgba(212, 160, 50, 0.55);
    border-radius: 24px;
    padding: 1.25rem 1.35rem 1.25rem 1.15rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.1rem;
    text-align: left;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.7), 0 0 22px rgba(212, 160, 50, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
}

.slot-top .workflow-card:hover {
    transform: translateY(-6px);
    border-color: rgba(226, 184, 77, 0.9);
    background: rgba(24, 15, 10, 0.96);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.85), 0 0 30px rgba(212, 160, 50, 0.28);
}

.slot-bottom .workflow-card:hover {
    transform: translateY(6px);
    border-color: rgba(226, 184, 77, 0.9);
    background: rgba(24, 15, 10, 0.96);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.85), 0 0 30px rgba(212, 160, 50, 0.28);
}

/* Metallic Gold Coin Icon Disc */
.workflow-gold-coin {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #E6BF65 0%, #C49733 60%, #966E1D 100%);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.workflow-card:hover .workflow-gold-coin {
    transform: scale(1.06);
}

.workflow-card-text {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 0;
    text-align: left !important;
}

.workflow-step-header {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    margin-bottom: 0.35rem;
    text-align: left !important;
}

.workflow-step-num {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 800;
    color: #E2B84D;
    line-height: 1;
    margin: 0;
    flex-shrink: 0;
}

.workflow-step-name {
    font-family: var(--font-body);
    font-size: 1.02rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.25;
    margin: 0;
    white-space: normal;
    text-align: left !important;
}

.workflow-step-desc {
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: #CFC5B8;
    line-height: 1.4;
    margin: 0;
    text-align: left !important;
}

/* Badge Slot (Row 1 & 2 Center) */
.timeline-badge-slot {
    grid-column: 6;
    grid-row: 1 / span 2;
    align-self: center;
    padding: 0 0 0 0.75rem;
    z-index: 3;
}

.workflow-end-badge {
    padding: 1.05rem 1.85rem;
    border: 1.5px solid rgba(201, 154, 46, 0.75);
    background: rgba(14, 9, 6, 0.94);
    backdrop-filter: blur(16px);
    border-radius: 4px;
    box-shadow: 0 0 28px rgba(201, 154, 46, 0.25), inset 0 0 14px rgba(201, 154, 46, 0.12);
    white-space: nowrap;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.workflow-end-badge:hover {
    transform: scale(1.04);
    border-color: #E2B84D;
    box-shadow: 0 0 36px rgba(201, 154, 46, 0.4), inset 0 0 18px rgba(201, 154, 46, 0.2);
}

.badge-heroes-text {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.35em;
    color: #F4EBDD;
}

/* --------------------------------------------------------------------------
   18. SECTION 13 — MEET THE PRODUCERS (Light Editorial Cream & Gold)
   -------------------------------------------------------------------------- */
.meet-producers-section {
    position: relative;
    padding: 6.5rem 0 6rem;
    overflow: hidden;
}

.producers-container {
    position: relative;
    z-index: 2;
    max-width: 1440px;
    width: 92%;
    margin: 0 auto;
}

/* Chapter Header: Top-Left "13 | MEET THE PRODUCERS" */
.producers-chapter-header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.producers-chapter-number {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 700;
    color: #C79A3B;
    line-height: 1;
    letter-spacing: -0.02em;
}

.producers-chapter-divider {
    width: 1.5px;
    height: 40px;
    background: linear-gradient(180deg, rgba(199, 154, 59, 0.8) 0%, rgba(199, 154, 59, 0.2) 100%);
}

.producers-chapter-meta {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.producers-eyebrow-text {
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    color: #C79A3B;
    text-transform: uppercase;
}

.producers-eyebrow-line {
    width: 44px;
    height: 1.5px;
    background: #C79A3B;
}

/* Editorial Grid */
.producers-editorial-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 4.5rem;
    align-items: center;
    margin-bottom: 2rem;
}

.producers-left-col {
    display: flex;
    flex-direction: column;
}

.producers-main-headline {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 4.2vw, 3.8rem);
    font-weight: 800;
    color: #16110D;
    letter-spacing: 0.01em;
    line-height: 1.12;
    margin: 0 0 1.25rem;
}

.producers-headline-gold {
    color: #C79A3B;
}

.producers-star-rule {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 1.65rem;
}

.star-rule-line {
    width: 54px;
    height: 1.5px;
    background: #C79A3B;
}

.star-rule-icon {
    color: #C79A3B;
    font-size: 0.95rem;
    line-height: 1;
}

.producers-lead-desc {
    font-family: var(--font-body);
    font-size: 1.05rem;
    color: #383028;
    line-height: 1.7;
    max-width: 560px;
    margin: 0;
}

/* 4-Stat Modular Cards 2x2 Matrix (2 Up, 2 Down) */
.producers-stats-matrix {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.35rem;
    max-width: 520px;
    width: 100%;
    justify-self: end;
}

.producer-stat-tile {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1.2px solid rgba(199, 154, 59, 0.45);
    border-radius: 14px;
    padding: 2.1rem 1.4rem 1.9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 10px 24px rgba(199, 154, 59, 0.08), 0 2px 6px rgba(0, 0, 0, 0.03);
    transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.producer-stat-tile:hover {
    transform: translateY(-5px);
    border-color: #C79A3B;
    box-shadow: 0 16px 36px rgba(199, 154, 59, 0.16), 0 4px 12px rgba(0, 0, 0, 0.05);
}

.stat-big-number {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 700;
    color: #C79A3B;
    line-height: 1;
    margin-bottom: 0.85rem;
}

.stat-gold-dash {
    width: 24px;
    height: 1.5px;
    background: rgba(199, 154, 59, 0.6);
    margin-bottom: 1.1rem;
}

.stat-unit-label {
    display: flex;
    flex-direction: column;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #1A1410;
    line-height: 1.35;
    text-transform: uppercase;
}

/* Full-Width Credentials Panel */
.producers-credits-panel {
    display: flex;
    align-items: center;
    gap: 2.2rem;
    background: rgba(255, 255, 255, 0.68);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1.2px solid rgba(199, 154, 59, 0.45);
    border-radius: 14px;
    padding: 1.6rem 2.4rem;
    box-shadow: 0 12px 30px rgba(199, 154, 59, 0.08);
}

.credits-clapper-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.credits-vertical-bar {
    width: 1.5px;
    height: 48px;
    background: rgba(199, 154, 59, 0.4);
    flex-shrink: 0;
}

.credits-text-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.credits-lead-text {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: #4A4035;
    margin: 0;
    line-height: 1.4;
}

.credits-titles-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #16110D;
    text-transform: uppercase;
}

.credit-bullet {
    color: #C79A3B;
    font-size: 0.95rem;
    line-height: 1;
}

/* --------------------------------------------------------------------------
   19. SECTION 14 — GLOBAL CREDENTIALS & PRODUCTIONS (Light Editorial Luxury)
   -------------------------------------------------------------------------- */
.productions-credentials-section {
    position: relative;
    padding: 7rem 0 6.5rem;
    overflow: hidden;
}

.prod-showcase-container {
    max-width: 1400px;
    width: 92%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 6rem;
}

.prod-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}

.prod-block-header {
    margin-bottom: 2.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
}

.prod-block-eyebrow {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.24em;
    color: #C79A3B;
    text-transform: uppercase;
}

.prod-block-title {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 3.5vw, 3.2rem);
    font-weight: 800;
    color: #16110D;
    margin: 0;
    line-height: 1.15;
    text-align: center;
}

.prod-title-gold {
    color: #C79A3B;
}

.prod-block-desc {
    font-family: var(--font-body);
    font-size: 1rem;
    color: #4A4035;
    max-width: 760px;
    margin: 0.75rem auto 0;
    line-height: 1.6;
}

/* 1. Global Studios Grid */
.studios-logo-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.25rem;
    width: 100%;
}

.studio-logo-card {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1.2px solid rgba(199, 154, 59, 0.38);
    border-radius: 12px;
    height: 86px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.25rem;
    box-shadow: 0 6px 18px rgba(199, 154, 59, 0.06);
    transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.studio-logo-card:hover {
    transform: translateY(-4px);
    border-color: #C79A3B;
    box-shadow: 0 12px 28px rgba(199, 154, 59, 0.16);
}

.studio-img-logo {
    max-height: 44px;
    max-width: 82%;
    object-fit: contain;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.06));
    transition: transform 0.3s ease;
}

.studio-logo-card:hover .studio-img-logo {
    transform: scale(1.05);
}

/* 2. Hollywood VFX Film Posters Grid */
.hollywood-posters-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.25rem;
    width: 100%;
}

.hollywood-poster-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.85rem;
    cursor: pointer;
}

.poster-art-wrapper {
    width: 100%;
    aspect-ratio: 2 / 3;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    border: 1.2px solid rgba(199, 154, 59, 0.4);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.14);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}

.hollywood-poster-card:hover .poster-art-wrapper {
    transform: translateY(-8px) scale(1.03);
    border-color: #E2B84D;
    box-shadow: 0 20px 42px rgba(199, 154, 59, 0.3);
}

.poster-actual-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.4s ease;
}

.hollywood-poster-card:hover .poster-actual-img {
    transform: scale(1.04);
}

.poster-visual {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.1rem 0.85rem;
    position: relative;
}

.visual-jumanji {
    background: radial-gradient(circle at 50% 20%, #4A3A1A 0%, #1A1208 70%, #0D0804 100%);
}

.poster-cinema-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.15) 0%, transparent 60%);
    pointer-events: none;
}

.poster-badge-top {
    align-self: flex-start;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    color: #E8BF60;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 0.22rem 0.55rem;
    border-radius: 4px;
    border: 1px solid rgba(232, 191, 96, 0.35);
    position: relative;
    z-index: 2;
}

.poster-art-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #FFFFFF;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
    margin: 0;
    line-height: 1.2;
    position: relative;
    z-index: 2;
}

.poster-meta-bottom {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.poster-meta-name {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 800;
    color: #16110D;
    margin: 0;
}

.poster-meta-type {
    font-size: 0.78rem;
    color: #7A6F62;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* 3. Original Productions (2 Wide Cards) */
.original-shows-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    width: 100%;
    max-width: 1100px;
}

.original-show-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1.2px solid rgba(199, 154, 59, 0.45);
    border-radius: 16px;
    padding: 2.2rem 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 12px 30px rgba(199, 154, 59, 0.09);
    transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
    text-align: left;
}

.original-show-card:hover {
    transform: translateY(-5px);
    border-color: #C79A3B;
    box-shadow: 0 18px 40px rgba(199, 154, 59, 0.18);
}

.show-card-title {
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 800;
    color: #16110D;
    margin: 0 0 1.25rem;
}

.show-partner-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: #8A7A68;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
    display: block;
}

.show-partner-badge {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
}

.partner-mini-logo {
    height: 36px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    display: block;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.show-partner-badge:hover .partner-mini-logo {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}

.show-brand-emblem {
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.heroes-badge-img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(199, 154, 59, 0.35));
}

.kbh-badge-img {
    width: 150px;
    height: 150px;
    object-fit: contain;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.15));
}

/* 4. Brands Grid (6 Corporate Logos) */
.brands-logo-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.2rem;
    width: 100%;
}

.brand-logo-card {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1.2px solid rgba(199, 154, 59, 0.35);
    border-radius: 12px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.75rem 1rem;
    box-shadow: 0 6px 18px rgba(199, 154, 59, 0.06);
    transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.brand-logo-card:hover {
    transform: translateY(-4px);
    border-color: #C79A3B;
    box-shadow: 0 12px 28px rgba(199, 154, 59, 0.16);
}

.brand-img-logo {
    max-height: 48px;
    max-width: 82%;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.06));
    transition: transform 0.3s ease;
}

.brand-logo-card:hover .brand-img-logo {
    transform: scale(1.05);
}

/* --------------------------------------------------------------------------
   20. SECTION 15 — YOUR MOMENT: CTA & FAQ (Cinematic Dark Luxury)
   -------------------------------------------------------------------------- */
.your-moment-section {
    position: relative;
    overflow: hidden;
    background-color: #080605;
    background-image:
        linear-gradient(rgba(8, 6, 5, 0.72), rgba(8, 6, 5, 0.72)),
        url('assets/your-moment-bg.png');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: #FAF6EF;
    padding: 7rem 0 6.5rem;
    border-top: 1px solid rgba(199, 154, 59, 0.2);
    border-bottom: 1px solid rgba(199, 154, 59, 0.2);
}

.moment-main-container {
    position: relative;
    z-index: 2;
    max-width: 1320px;
}

.moment-three-part-layout {
    display: grid;
    grid-template-columns: 1.15fr 0.9fr 1.25fr;
    gap: 2.5rem;
    align-items: center;
}

/* 1. Left Column (CTA Content) */
.moment-col-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.moment-chapter-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.chapter-number-gold {
    font-family: var(--font-display);
    font-size: 2.6rem;
    font-weight: 800;
    color: #C79A3B;
    line-height: 1;
}

.chapter-divider-gold {
    width: 1px;
    height: 26px;
    background: rgba(199, 154, 59, 0.4);
}

.chapter-eyebrow-text {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    color: #B3A492;
    text-transform: uppercase;
}

.moment-main-headline {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3vw, 2.85rem);
    font-weight: 800;
    line-height: 1.15;
    color: #F5EEE3;
    margin: 0 0 1.25rem;
    letter-spacing: 0.02em;
}

.headline-line-1,
.headline-line-2 {
    display: inline-block;
    white-space: nowrap;
}

.text-gold-story {
    color: #D4AF37;
    background: linear-gradient(135deg, #F0D58C 0%, #C79A3B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.moment-support-copy {
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.6;
    color: rgba(245, 238, 227, 0.75);
    margin: 0 0 1.25rem;
}

.moment-gold-separator {
    width: 36px;
    height: 1.5px;
    background: #C79A3B;
    margin-bottom: 1.25rem;
    opacity: 0.85;
}

.moment-sub-hero {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 700;
    color: #C79A3B;
    font-style: italic;
    margin: 0 0 1.75rem;
}

.moment-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, #C79A3B 0%, #9E7322 100%);
    color: #160E04;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-decoration: none;
    padding: 1.05rem 1.85rem;
    border-radius: 6px;
    box-shadow: 0 10px 28px rgba(199, 154, 59, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.35);
    transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
}

.moment-cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 38px rgba(199, 154, 59, 0.42);
    background: linear-gradient(135deg, #D4AF37 0%, #B8860B 100%);
    color: #0E0802;
}

.moment-btn-arrow {
    font-size: 1.15rem;
    transition: transform 0.3s ease;
}

.moment-cta-button:hover .moment-btn-arrow {
    transform: translateX(4px);
}

/* 2. Center Column (Natural Architectural Arch Space) */
.moment-col-center {
    min-height: 480px;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

/* 3. Right Column (FAQ Panel) */
.moment-col-faq {
    display: flex;
    flex-direction: column;
}

.faq-compact-header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.faq-compact-title {
    font-family: var(--font-display);
    font-size: 1.85rem;
    font-weight: 800;
    color: #FAF6EF;
    letter-spacing: 0.04em;
    margin: 0;
}

.faq-compact-rule {
    flex-grow: 1;
    height: 1px;
    background: rgba(199, 154, 59, 0.28);
}

.faq-luxury-accordion-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.faq-luxury-accordion-list .accordion-item {
    border: 1px solid rgba(199, 154, 59, 0.25);
    border-radius: 6px;
    background: rgba(18, 12, 8, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    padding-bottom: 0;
}

.faq-luxury-accordion-list .accordion-item:hover {
    border-color: rgba(199, 154, 59, 0.45);
    background: rgba(26, 17, 11, 0.7);
}

.faq-luxury-accordion-list .accordion-item.active {
    border-color: rgba(199, 154, 59, 0.6);
    background: rgba(26, 17, 11, 0.85);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.faq-luxury-accordion-list .accordion-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 1.1rem;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    gap: 0.85rem;
}

.faq-num {
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 700;
    color: #A39686;
    flex-shrink: 0;
    letter-spacing: 0.05em;
}

.faq-q-text {
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 600;
    color: #F5EEE3;
    flex-grow: 1;
    line-height: 1.35;
}

.faq-icon-cross {
    font-size: 1.15rem;
    color: #C79A3B;
    flex-shrink: 0;
    font-weight: 400;
    transition: transform 0.3s ease;
    line-height: 1;
    display: inline-block;
}

.faq-luxury-accordion-list .accordion-item.active .faq-icon-cross {
    transform: rotate(45deg);
}

.faq-luxury-accordion-list .accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), padding 0.35s ease;
    padding: 0 1.1rem;
}

.faq-luxury-accordion-list .accordion-item.active .accordion-body {
    max-height: 220px;
    padding: 0 1.1rem 0.9rem;
}

.faq-luxury-accordion-list .accordion-body p {
    font-family: var(--font-body);
    font-size: 0.84rem;
    line-height: 1.6;
    color: rgba(245, 238, 227, 0.78);
    margin: 0;
}

/* --------------------------------------------------------------------------
   22. SECTION 17 — TELL US YOUR STORY (Application Form)
   -------------------------------------------------------------------------- */
.section-editorial-form {
    background: linear-gradient(180deg, var(--clr-warm-ivory) 0%, #E9DFCFA8 60%, var(--clr-obsidian) 100%);
    padding: var(--section-pad-desktop);
}

.form-section-split {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 3.5rem;
}

.form-title-serif {
    font-size: clamp(2.4rem, 4vw, 3.5rem);
    color: var(--clr-charcoal);
    line-height: 1.05;
    margin-bottom: 1.5rem;
    font-weight: 900;
}

.form-lead-statement .bold-callout {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--clr-charcoal);
    margin-bottom: 0.5rem;
}

.form-lead-statement .sub-callout {
    font-size: 1.05rem;
    color: var(--clr-charcoal-muted);
}

.form-wrapper-card {
    background: #FAF6EF;
    border: 1px solid rgba(199, 154, 59, 0.35);
    padding: 2.5rem;
    border-radius: var(--radius-sm);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

.form-step-group {
    margin-bottom: 2rem;
}

.form-group-title {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    color: var(--clr-antique-gold);
    margin-bottom: 1.25rem;
    border-bottom: 1px solid rgba(199, 154, 59, 0.2);
    padding-bottom: 0.4rem;
}

.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
}

.form-field label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--clr-charcoal);
}

.form-field label .req {
    color: var(--clr-antique-gold);
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    background: #FFFDF9;
    border: 1px solid rgba(199, 154, 59, 0.35);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--clr-charcoal);
    transition: var(--transition-base);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--clr-antique-gold);
    box-shadow: 0 0 0 3px rgba(199, 154, 59, 0.15);
}

.form-submit-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}

.btn-submit {
    width: 100%;
    padding: 1.15rem;
    font-size: 0.95rem;
}

.submit-disclaimer {
    font-size: 0.85rem;
    color: var(--clr-charcoal-muted);
    text-align: center;
}

.form-success-alert {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #140C08;
    border: 1px solid var(--clr-antique-gold);
    padding: 1.25rem;
    border-radius: var(--radius-sm);
    margin-top: 1.5rem;
}

.form-success-alert.hidden {
    display: none;
}

.alert-star {
    font-size: 1.5rem;
    color: var(--clr-antique-gold);
}

.alert-content strong {
    color: var(--clr-champagne);
    display: block;
    margin-bottom: 0.2rem;
}

.alert-content p {
    font-size: 0.85rem;
    color: rgba(245, 238, 227, 0.8);
}

/* --------------------------------------------------------------------------
   23. SECTION 18 — CLOSING FINALE
   -------------------------------------------------------------------------- */
.closing-section {
    background-color: var(--clr-obsidian);
    padding: 8rem 0 6rem 0;
}

.closing-grand-layout {
    display: grid;
    grid-template-columns: 1.1fr auto 1fr;
    gap: 3.5rem;
    align-items: center;
}

.closing-main-title {
    font-size: clamp(2.4rem, 4vw, 3.8rem);
    color: var(--clr-warm-ivory);
    line-height: 1.05;
    margin-bottom: 1.5rem;
    font-weight: 900;
}

.closing-copy-block p {
    font-size: 1.2rem;
    color: var(--clr-champagne);
    line-height: 1.6;
}

.closing-callout-gold {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--clr-antique-gold);
    margin-top: 1.25rem;
}

.closing-center-crest {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.closing-radial-glow {
    position: absolute;
    inset: -20px;
    background: radial-gradient(circle, rgba(199, 154, 59, 0.28) 0%, transparent 70%);
    filter: blur(28px);
}

.closing-official-logo {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 220px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 12px 35px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 25px rgba(199, 154, 59, 0.5));
    display: block;
    animation: logoFloat 8s ease-in-out infinite alternate;
}

/* --------------------------------------------------------------------------
   24. FOOTER (Digikore Originals & Enterprise Credentials)
   -------------------------------------------------------------------------- */
.site-footer {
    background-color: #080605;
    border-top: 1px solid rgba(199, 154, 59, 0.22);
    padding: 3.2rem 0 3rem;
    color: #FAF6EF;
    position: relative;
    z-index: 10;
}

.footer-layout-grid {
    display: grid;
    grid-template-columns: 1fr 1.6fr 1fr;
    gap: 2.5rem;
    align-items: center;
}

.footer-col-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.footer-digikore-link {
    display: inline-block;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.footer-digikore-link:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

.footer-digikore-logo {
    height: 38px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6));
    display: block;
}

.footer-col-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.45rem;
}

.footer-contact-email {
    font-family: var(--font-body);
    font-size: 0.98rem;
    font-weight: 700;
    color: #D4AF37;
    text-decoration: none;
    letter-spacing: 0.03em;
    transition: color 0.3s ease;
}

.footer-contact-email:hover {
    color: #F0D58C;
    text-decoration: underline;
}

.footer-address-text {
    font-family: var(--font-body);
    font-size: 0.82rem;
    line-height: 1.5;
    color: #9E9182;
    margin: 0;
}

.footer-copyright-note {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: #6E6356;
    margin: 0.15rem 0 0;
}

.footer-col-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.footer-nse-card {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.nse-badge-pill {
    background: #FFFFFF;
    border-radius: 6px;
    padding: 0.32rem 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.nse-pill-icon {
    height: 18px;
    width: auto;
    object-fit: contain;
    display: block;
}

.nse-pill-label {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 700;
    color: #FAF6EF;
    letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   25. RESPONSIVE DESIGN (Breakpoints)
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
    .four-premium-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .six-story-cards-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .six-benefit-columns {
        grid-template-columns: repeat(3, 1fr);
    }

    .five-story-blocks-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .central-glow-emblem-wrap {
        grid-column: span 2;
    }

    .workflow-timeline-grid-2row {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto;
        gap: 1.5rem;
    }

    .timeline-slot.slot-top,
    .timeline-slot.slot-bottom {
        grid-row: auto;
        grid-column: auto;
    }

    .timeline-badge-slot {
        grid-column: 1 / -1;
        grid-row: auto;
        justify-self: center;
        margin-top: 1.5rem;
    }

    .workflow-central-track,
    .workflow-stem-box {
        display: none;
    }

    .hollywood-posters-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .brands-logo-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .hero-theatre-stage {
        min-height: 90vh;
        padding-top: 110px;
        padding-bottom: 3.5rem;
    }

    .hero-theatre-container {
        padding: 0 1.5rem;
    }

    .hero-theatre-content {
        max-width: 520px;
    }

    .hero-stage-title {
        font-size: 3.2rem;
    }

    .theatre-spotlight.spotlight-left {
        left: 0%;
        width: 320px;
    }

    .theatre-spotlight.spotlight-right {
        right: 0%;
        width: 320px;
    }

    .split-editorial-layout,
    .split-what-layout,
    .split-one-layout,
    .reach-three-col-layout,
    .split-founders-layout,
    .split-ecosystem-layout,
    .producers-editorial-grid,
    .split-productions-header,
    .moment-three-part-layout,
    .form-section-split,
    .closing-grand-layout,
    .footer-container {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .moment-col-cta {
        align-items: center;
        text-align: center;
    }

    .moment-gold-separator {
        margin: 0 auto 1.5rem;
    }

    .producers-stats-matrix {
        grid-template-columns: repeat(2, 1fr);
    }

    .studios-logo-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .main-nav {
        position: fixed;
        top: 76px;
        left: 0;
        width: 100%;
        background: rgba(9, 8, 7, 0.98);
        border-bottom: 1px solid var(--clr-antique-gold);
        padding: 2rem 2.5rem;
        transform: translateY(-150%);
        transition: transform 0.4s var(--ease-cinematic);
    }

    .main-nav.active {
        transform: translateY(0);
    }

    .main-nav ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .editorial-right,
    .what-right-emblem,
    .producers-right {
        display: none;
    }

    /* ==========================================================================
       UNIVERSAL TABLET CENTERING (768px / 992px) — All Section Headers & Descs
       ========================================================================== */
    .chapter-header,
    .workflow-chapter-header,
    .interview-chapter-header,
    .moment-chapter-badge,
    .credentials-chapter-header,
    .producers-chapter-header,
    .syndication-eyebrow-row,
    [class*="-chapter-header"],
    [class*="-chapter-badge"] {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 1.85rem !important;
        width: 100% !important;
    }

    .chapter-meta,
    .workflow-chapter-meta,
    .interview-chapter-meta,
    .credentials-chapter-meta,
    [class*="-chapter-meta"] {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        margin: 0 auto !important;
    }

    .gold-rule,
    .gold-rule-left,
    .eyebrow-line,
    .workflow-eyebrow-line,
    .interview-eyebrow-line,
    .syndication-eyebrow-line,
    .credentials-eyebrow-line,
    .moment-gold-separator,
    .why-quote-line,
    [class*="-eyebrow-line"] {
        margin: 0.5rem auto 1.25rem !important;
        align-self: center !important;
    }

    .eyebrow,
    .eyebrow-dark,
    .workflow-eyebrow-text,
    .interview-eyebrow-text,
    .syndication-eyebrow-text,
    .chapter-eyebrow-text,
    .credentials-eyebrow-text,
    [class*="-eyebrow-text"] {
        text-align: center !important;
        margin: 0 auto !important;
        display: block !important;
    }

    /* All Section Titles & Headlines */
    h1,
    h2,
    h3,
    .editorial-headline,
    .editorial-title-serif,
    .editorial-title-clean,
    .stage-grand-title,
    .what-title-serif,
    .what-editorial-title,
    .one-title-serif,
    .shows-main-title,
    .reach-main-title,
    .producers-main-title,
    .productions-main-title,
    .section-title,
    .section-title-serif,
    .workflow-main-headline,
    .moment-main-headline,
    .why-editorial-headline,
    .why-founders-title,
    .ecosystem-main-title,
    .interview-main-headline,
    .interview-gold-subheadline,
    .form-title-serif,
    .closing-main-title,
    .headline-line-1,
    .headline-line-2 {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* All Section Lead Descriptions & Statements */
    p,
    .editorial-lead-statement,
    .editorial-statement,
    .editorial-lead-copy,
    .editorial-desc,
    .what-statement-serif,
    .what-desc-para,
    .what-intro-p,
    .what-sub-p,
    .one-statement-serif,
    .one-sub-statement,
    .one-desc-para,
    .reach-lead-copy,
    .shows-lead-desc,
    .producers-lead-desc,
    .producers-company-sub,
    .productions-sub-heading,
    .lead-statement,
    .why-editorial-statement,
    .why-intro-text,
    .moment-support-copy,
    .moment-sub-hero,
    .bold-callout,
    .sub-callout,
    .closing-copy-block {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* All Section Left/Flank Containers Centered */
    .editorial-left,
    .the-show-editorial,
    .what-left-editorial,
    .what-left-content,
    .one-left-text,
    .reach-left-content,
    .founders-left-content,
    .ecosystem-left-content,
    .producers-left-content,
    .productions-header-left,
    .productions-header-top,
    .interview-editorial-flank,
    .interview-top-composition,
    .moment-col-cta,
    .form-intro-col,
    .closing-left-text,
    .workflow-title-wrap {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 820px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Section CTAs & Buttons Centered */
    .watch-film-cta-wrap,
    .moment-cta-button,
    .producers-credentials-link,
    .closing-right-cta {
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    /* ==========================================================================
       UNIFORM SECTION & HEADING SPACING ON TABLET (768px / 992px)
       ========================================================================== */
    section {
        padding-top: 5.5rem !important;
        padding-bottom: 5.5rem !important;
    }

    .chapter-header,
    .workflow-chapter-header,
    .interview-chapter-header,
    .moment-chapter-badge,
    .credentials-chapter-header,
    .producers-chapter-header,
    .syndication-eyebrow-row,
    .ecosystem-chapter-header,
    .format-section-header,
    [class*="-chapter-header"],
    [class*="-chapter-badge"] {
        margin-bottom: 1.25rem !important;
    }

    h2,
    .editorial-headline,
    .editorial-title-serif,
    .editorial-title-clean,
    .stage-grand-title,
    .what-title-serif,
    .what-editorial-title,
    .one-title-serif,
    .shows-main-title,
    .reach-main-title,
    .producers-main-title,
    .productions-main-title,
    .section-title,
    .section-title-serif,
    .workflow-main-headline,
    .moment-main-headline,
    .why-editorial-headline,
    .why-founders-title,
    .ecosystem-main-title,
    .interview-main-headline,
    .format-main-headline {
        margin-top: 0 !important;
        margin-bottom: 1.25rem !important;
    }

    p,
    .editorial-lead-statement,
    .editorial-statement,
    .editorial-lead-copy,
    .editorial-desc,
    .what-statement-serif,
    .what-desc-para,
    .what-intro-p,
    .what-sub-p,
    .one-statement-serif,
    .one-sub-statement,
    .one-desc-para,
    .reach-lead-copy,
    .shows-lead-desc,
    .producers-lead-desc,
    .producers-company-sub,
    .productions-sub-heading,
    .lead-statement,
    .why-editorial-statement,
    .why-intro-text,
    .moment-support-copy,
    .moment-sub-hero,
    .ecosystem-lead-desc,
    .format-lead-p,
    .format-sub-p {
        margin-bottom: 2rem !important;
    }

    /* Section 02 (Why Heroes) Tablet Layout */
    .why-heroes-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .why-benefit-cards {
        grid-template-columns: repeat(2, 1fr);
        max-width: 760px;
        margin: 0 auto;
        width: 100%;
        gap: 1.25rem;
    }

    .why-card {
        text-align: left !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .why-card-top {
        display: flex !important;
        width: 100% !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    .why-card-text {
        text-align: left !important;
        margin: 0 !important;
        width: 100% !important;
    }

    .why-cinematic-backdrop,
    .why-right-visual {
        display: none !important;
    }

    /* Section 12 (Production Workflow) Tablet Layout */
    .workflow-chapter-header {
        margin-bottom: 0.75rem !important;
    }

    .workflow-eyebrow-line {
        margin: 0.35rem auto 0.65rem !important;
    }

    .workflow-title-wrap {
        margin-bottom: 1.25rem !important;
    }

    .workflow-horizontal-timeline {
        padding: 0 !important;
        margin-top: 0 !important;
        overflow: visible !important;
    }

    .workflow-central-track,
    .workflow-stem-box {
        display: none !important;
    }

    .workflow-timeline-grid-2row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: auto !important;
        gap: 1.25rem !important;
        max-width: 780px !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 auto !important;
    }

    .timeline-slot {
        width: 100% !important;
        grid-column: auto !important;
        grid-row: auto !important;
        justify-content: stretch !important;
    }

    .timeline-slot.col-5 {
        grid-column: 1 / -1 !important;
        max-width: calc(50% - 0.75rem) !important;
        margin: 0 auto !important;
        width: 100% !important;
    }

    .workflow-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 1.15rem !important;
        padding: 1.25rem 1.35rem !important;
        text-align: left !important;
    }

    .workflow-card-text {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        flex-grow: 1 !important;
        min-width: 0 !important;
    }

    .workflow-step-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: baseline !important;
        justify-content: flex-start !important;
        gap: 0.65rem !important;
        margin-bottom: 0.35rem !important;
        width: 100% !important;
        text-align: left !important;
    }

    .workflow-step-num {
        font-family: var(--font-display) !important;
        font-size: 1.25rem !important;
        font-weight: 800 !important;
        color: #E2B84D !important;
        line-height: 1 !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
        text-align: left !important;
    }

    .workflow-step-name {
        font-family: var(--font-body) !important;
        font-size: 1.02rem !important;
        font-weight: 700 !important;
        color: #FFFFFF !important;
        line-height: 1.25 !important;
        margin: 0 !important;
        flex: 0 1 auto !important;
        text-align: left !important;
        white-space: normal !important;
    }

    .workflow-step-desc {
        font-family: var(--font-body) !important;
        font-size: 0.82rem !important;
        color: #CFC5B8 !important;
        line-height: 1.4 !important;
        margin: 0 !important;
        text-align: left !important;
    }

    /* Section 13 (Meet The Producers) Tablet Layout */
    .producers-editorial-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
        gap: 3rem !important;
    }

    .producers-left-col {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 760px !important;
        margin: 0 auto !important;
    }

    .producers-star-rule {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 auto 1.65rem !important;
    }

    .producers-stats-matrix {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
        max-width: 520px !important;
        width: 100% !important;
        margin: 0 auto !important;
        justify-self: center !important;
    }

    /* Section 15 (Your Moment / CTA & FAQ) Tablet Layout */
    .moment-col-center {
        display: none !important;
    }

    .moment-three-part-layout {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 3.5rem !important;
        max-width: 760px !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

    .moment-col-cta {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 680px !important;
        margin: 0 auto !important;
    }

    .moment-col-faq {
        width: 100% !important;
        max-width: 720px !important;
        margin: 0 auto !important;
    }

    /* Section 11 (Ecosystem Value) Tablet Layout */
    .ecosystem-value-section {
        overflow: hidden !important;
    }

    .ecosystem-section-container {
        padding: 0 1.25rem !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .split-ecosystem-layout {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
        gap: 3rem !important;
    }

    .ecosystem-left {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 720px !important;
        margin: 0 auto !important;
    }

    .ecosystem-tiles-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.85rem !important;
        width: 100% !important;
        max-width: 580px !important;
        margin: 0 auto 2.5rem !important;
    }

    .eco-tile {
        min-width: 0 !important;
        width: 100% !important;
        padding: 0.95rem 0.85rem !important;
    }

    .eco-tile-label {
        white-space: normal !important;
        word-break: break-word !important;
        font-size: 0.82rem !important;
    }

    .ecosystem-statement-wrap {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 0.65rem !important;
        margin: 0 auto !important;
        max-width: 100% !important;
    }

    .ecosystem-statement-bar {
        margin: 0 auto !important;
    }

    .ecosystem-featured-panel {
        width: 100% !important;
        max-width: 580px !important;
        padding: 1.25rem !important;
        margin: 0 auto !important;
    }

    .ecosystem-concentric-circles {
        display: none !important;
    }

    .footer-layout-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }

    .footer-col-left,
    .footer-col-right {
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .container {
        padding: 0 1.25rem;
    }

    .header-container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 76px !important;
        padding: 0 1.25rem !important;
        box-sizing: border-box !important;
    }

    .brand-logo {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
    }

    .header-logo-img {
        height: 52px !important;
        width: auto !important;
        max-width: 95px !important;
        object-fit: contain !important;
    }

    .header-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        margin-left: auto !important;
        flex-shrink: 0 !important;
    }

    .header-digikore-logo {
        height: 26px !important;
        width: auto !important;
        max-width: 120px !important;
        object-fit: contain !important;
    }

    /* Uniform Mobile Section Spacing */
    section {
        padding-top: 4.25rem !important;
        padding-bottom: 4.25rem !important;
    }

    /* Mobile Heading Scale Reductions */
    h1,
    .stage-grand-title,
    .hero-stage-title {
        font-size: clamp(2.1rem, 7vw, 2.65rem) !important;
        line-height: 1.1 !important;
    }

    h2,
    .workflow-main-headline,
    .producers-main-headline,
    .format-main-headline,
    .what-editorial-title,
    .syndication-main-headline,
    .interview-main-headline,
    .why-editorial-headline,
    .productions-main-title,
    .reach-main-title,
    .ecosystem-main-title,
    .why-founders-title,
    .moment-main-headline,
    .section-title,
    .section-title-serif {
        font-size: clamp(1.6rem, 5.5vw, 2.1rem) !important;
        line-height: 1.18 !important;
        letter-spacing: -0.01em !important;
        margin-top: 0 !important;
        margin-bottom: 1.15rem !important;
    }

    .editorial-lead-statement,
    .what-intro-p,
    .why-editorial-statement,
    .interview-gold-subheadline {
        font-size: 1.05rem !important;
        line-height: 1.45 !important;
    }

    p,
    .editorial-lead-statement,
    .editorial-statement,
    .editorial-lead-copy,
    .editorial-desc,
    .what-statement-serif,
    .what-desc-para,
    .what-intro-p,
    .what-sub-p,
    .one-statement-serif,
    .one-sub-statement,
    .one-desc-para,
    .reach-lead-copy,
    .shows-lead-desc,
    .producers-lead-desc,
    .producers-company-sub,
    .productions-sub-heading,
    .lead-statement,
    .why-editorial-statement,
    .why-intro-text,
    .moment-support-copy,
    .moment-sub-hero,
    .ecosystem-lead-desc,
    .format-lead-p,
    .format-sub-p {
        margin-bottom: 1.65rem !important;
    }

    .hero-theatre-stage {
        height: 600px !important;
        min-height: 600px !important;
        max-height: 600px !important;
        padding-top: 76px !important;
        padding-bottom: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .hero-theatre-container {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 0 1.25rem !important;
        box-sizing: border-box !important;
    }

    .hero-theatre-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 380px !important;
        padding: 0 !important;
        margin: 0 auto !important;
    }

    .hero-stage-emblem {
        display: none !important;
    }

    .hero-stage-title {
        font-size: 1.42rem !important;
        line-height: 1.15 !important;
        margin-top: 0 !important;
        margin-bottom: 0.55rem !important;
        text-align: center !important;
    }

    .hero-stage-lead {
        font-size: 0.84rem !important;
        line-height: 1.38 !important;
        margin-bottom: 0.95rem !important;
        text-align: center !important;
        max-width: 320px !important;
    }

    .hero-stage-actions {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 290px !important;
        gap: 0.45rem !important;
        margin-bottom: 0.85rem !important;
    }

    .hero-stage-actions .hero-cta,
    .hero-stage-actions .hero-status-tag {
        width: 100% !important;
        padding: 0.62rem 1rem !important;
        font-size: 0.78rem !important;
        height: auto !important;
        justify-content: center !important;
    }

    .streaming-pill.hero-stage-streaming {
        margin: 0 auto !important;
        padding: 0.5rem 1.25rem !important;
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.75rem !important;
        border-radius: 9999px !important;
    }

    .streaming-pill.hero-stage-streaming .jiohotstar-logo-img {
        height: 26px !important;
    }

    .jiohotstar-logo-img {
        height: 28px !important;
    }

    .moment-cta-button {
        width: 100%;
    }

    .theatre-spotlight {
        opacity: 0.55;
        filter: blur(25px);
    }

    .ecosystem-tiles-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.65rem !important;
        max-width: 100% !important;
    }

    .eco-tile {
        padding: 0.8rem 0.65rem !important;
        gap: 0.65rem !important;
        min-height: 62px !important;
    }

    .ecosystem-trailer-footer {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 1rem !important;
    }

    .trailer-footer-left {
        align-items: center !important;
        text-align: center !important;
    }

    .trailer-headline {
        text-align: center !important;
    }

    .trailer-desc {
        text-align: center !important;
        max-width: 100% !important;
    }

    .jiohotstar-cta-btn {
        width: 100% !important;
        justify-content: center !important;
    }

    .hero-stage-actions {
        flex-direction: column;
        width: 100%;
        gap: 0.75rem;
    }

    .hero-stage-actions .hero-cta,
    .hero-stage-actions .hero-secondary {
        width: 100%;
    }

    .workflow-chapter-header {
        margin-bottom: 0.5rem !important;
    }

    .workflow-eyebrow-line {
        margin: 0.25rem auto 0.5rem !important;
    }

    .workflow-title-wrap {
        margin-bottom: 1rem !important;
    }

    .workflow-horizontal-timeline {
        margin-top: 0 !important;
        padding: 0 !important;
    }

    .workflow-timeline-grid-2row {
        grid-template-columns: 1fr !important;
        gap: 0.85rem !important;
        max-width: 440px !important;
        margin: 0 auto !important;
    }

    .timeline-slot.col-5 {
        grid-column: auto !important;
        max-width: 100% !important;
    }

    .workflow-card {
        padding: 1.15rem 1.25rem !important;
        gap: 1rem !important;
        text-align: left !important;
    }

    .workflow-card-text {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        flex-grow: 1 !important;
        min-width: 0 !important;
    }

    .workflow-step-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: baseline !important;
        justify-content: flex-start !important;
        gap: 0.65rem !important;
        margin-bottom: 0.3rem !important;
        width: 100% !important;
        text-align: left !important;
    }

    .workflow-step-num {
        font-family: var(--font-display) !important;
        font-size: 1.2rem !important;
        font-weight: 800 !important;
        color: #E2B84D !important;
        line-height: 1 !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
        text-align: left !important;
    }

    .workflow-step-name {
        font-family: var(--font-body) !important;
        font-size: 1rem !important;
        font-weight: 700 !important;
        color: #FFFFFF !important;
        line-height: 1.25 !important;
        margin: 0 !important;
        flex: 0 1 auto !important;
        text-align: left !important;
        white-space: normal !important;
    }

    .workflow-step-desc {
        font-family: var(--font-body) !important;
        font-size: 0.82rem !important;
        color: #CFC5B8 !important;
        line-height: 1.4 !important;
        margin: 0 !important;
        text-align: left !important;
    }

    .format-spotlight-box {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: left !important;
        gap: 1.15rem !important;
        width: 100% !important;
        max-width: 520px !important;
        margin: 1.5rem auto 0 !important;
        padding: 1.25rem 1.4rem !important;
        border: 1px solid rgba(201, 154, 50, 0.22) !important;
        border-left: 3.5px solid #C99A32 !important;
        border-radius: 4px !important;
        box-sizing: border-box !important;
    }

    .spotlight-icon-wrap {
        flex-shrink: 0 !important;
        margin: 0 !important;
    }

    .spotlight-text-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
    }

    .spotlight-line-gold,
    .spotlight-line-dark {
        text-align: left !important;
        margin: 0 !important;
    }

    .format-feature-panel {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        padding: 1.75rem 1.5rem !important;
    }

    .feature-icon-badge {
        margin: 0 0 1.25rem 0 !important;
    }

    .feature-gold-rule {
        margin: 0 0 1.15rem 0 !important;
    }

    .feature-panel-title {
        text-align: left !important;
        margin: 0 0 0.65rem !important;
    }

    .feature-panel-desc {
        text-align: left !important;
        margin: 0 !important;
    }

    .syndication-platform-grid {
        grid-template-columns: 1fr !important;
        max-width: 380px !important;
        margin: 0 auto 2rem !important;
    }

    .platform-glass-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: left !important;
        gap: 0.85rem !important;
        padding: 0.8rem 1rem !important;
    }

    .platform-icon-orb {
        flex-shrink: 0 !important;
        margin: 0 !important;
    }

    .platform-info {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        flex-grow: 1 !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .platform-name {
        text-align: left !important;
        margin: 0 !important;
        display: block !important;
        width: 100% !important;
    }

    .platform-role {
        text-align: left !important;
        margin: 0 !important;
        display: block !important;
        width: 100% !important;
    }

    .platform-info-jio {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        text-align: left !important;
    }

    .platform-jio-logo-img {
        margin: 0 !important;
        display: block !important;
    }

    .prod-block-title {
        font-size: clamp(1.6rem, 5.5vw, 2.1rem) !important;
        white-space: normal !important;
        text-align: center !important;
        line-height: 1.2 !important;
    }

    .block-studios .prod-title-gold,
    .block-works .prod-title-gold {
        display: block !important;
        margin-top: 0.15rem !important;
        color: #C79A3B !important;
    }

    .block-brands .prod-title-gold,
    .block-original-shows .prod-title-gold {
        display: inline !important;
        margin-top: 0 !important;
        color: #C79A3B !important;
    }

    .block-brands .prod-block-title {
        white-space: nowrap !important;
        font-size: clamp(1.35rem, 4.8vw, 2.1rem) !important;
    }

    .features-six-grid,
    .one-right-grid,
    .four-founder-cards,
    .two-ott-posters-grid,
    .six-story-cards-grid,
    .six-benefit-columns,
    .producers-stats-matrix,
    .original-shows-grid,
    .four-stats-grid,
    .ecosystem-nodes-grid,
    .form-row-2 {
        grid-template-columns: 1fr;
    }

    .four-founder-cards {
        grid-template-columns: 1fr !important;
        max-width: 440px !important;
        margin: 0 auto !important;
        gap: 1.15rem !important;
    }

    .founder-editorial-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        padding: 1.4rem 1.35rem !important;
    }

    .founder-card-top {
        display: flex !important;
        width: 100% !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        margin-bottom: 0.85rem !important;
    }

    .founder-card-num-wrap {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        margin: 0 !important;
    }

    .founder-card-num {
        text-align: left !important;
        margin: 0 !important;
    }

    .founder-num-bar {
        margin: 0.25rem 0 0 0 !important;
    }

    .founder-card-title {
        text-align: left !important;
        margin: 0 0 0.45rem 0 !important;
        width: 100% !important;
    }

    .founder-card-desc {
        text-align: left !important;
        margin: 0 !important;
        padding-right: 1.5rem !important;
        width: 100% !important;
    }

    .why-card {
        text-align: left !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .why-card-top {
        display: flex !important;
        width: 100% !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    .why-card-text {
        text-align: left !important;
        margin: 0 !important;
        width: 100% !important;
    }

    .original-shows-grid {
        grid-template-columns: 1fr !important;
        max-width: 480px !important;
        margin: 0 auto !important;
        gap: 1.25rem !important;
    }

    .original-show-card {
        padding: 1.5rem 1.6rem !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        text-align: left !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .show-card-left {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        flex: 1 !important;
        min-width: 0 !important;
    }

    .show-card-title {
        font-family: var(--font-display) !important;
        font-size: clamp(1.3rem, 4.8vw, 1.65rem) !important;
        font-weight: 800 !important;
        color: #16110D !important;
        margin: 0 0 1rem 0 !important;
        white-space: nowrap !important;
        text-align: left !important;
    }

    .show-partner-block {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        margin: 0 !important;
    }

    .show-partner-label {
        font-size: 0.68rem !important;
        font-weight: 800 !important;
        letter-spacing: 0.14em !important;
        color: #8A7A68 !important;
        text-transform: uppercase !important;
        margin-bottom: 0.35rem !important;
        text-align: left !important;
        display: block !important;
    }

    .show-partner-badge {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        margin: 0 !important;
    }

    .partner-mini-logo {
        height: 32px !important;
        width: auto !important;
        max-width: 140px !important;
        display: block !important;
    }

    .show-card-right {
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-left: 1rem !important;
    }

    .show-brand-emblem {
        width: 85px !important;
        height: 85px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .kbh-badge-img {
        width: 105px !important;
        height: 105px !important;
        max-width: 100% !important;
        object-fit: contain !important;
    }

    .heroes-badge-img {
        width: 72px !important;
        height: 72px !important;
        max-width: 100% !important;
        object-fit: contain !important;
    }

    .studios-logo-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hollywood-posters-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .brands-logo-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .producers-credits-panel {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
        padding: 1.5rem 1.4rem;
    }

    .credits-vertical-bar {
        display: none;
    }

    .chapter-number {
        font-size: 3.2rem;
    }

    .footer-bottom-flex {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
    }
}

/* --------------------------------------------------------------------------
   THANK YOU PAGE (Cinematic Dark Luxury Aesthetic)
   -------------------------------------------------------------------------- */
.thank-you-body {
    background-color: #090807;
    color: #F5EFE5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

.thank-you-main {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 100px);
    padding: 130px 1.5rem 5rem;
    overflow: hidden;
    background-color: #090807;
    background-image:
        radial-gradient(ellipse at 50% 35%, rgba(45, 26, 15, 0.85) 0%, rgba(14, 9, 6, 0.95) 55%, #090807 100%),
        radial-gradient(rgba(201, 154, 50, 0.06) 1px, transparent 1px);
    background-size: 100% 100%, 28px 28px;
}

.thank-you-bg-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 40%, transparent 35%, rgba(9, 8, 7, 0.82) 90%);
    pointer-events: none;
    z-index: 1;
}

.thank-you-ambient-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 1;
}

.thank-you-ambient-glow.glow-top {
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 350px;
    background: radial-gradient(ellipse, rgba(201, 154, 50, 0.16) 0%, rgba(138, 63, 18, 0.08) 50%, transparent 75%);
}

.thank-you-ambient-glow.glow-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 750px;
    height: 480px;
    background: radial-gradient(ellipse, rgba(226, 184, 77, 0.12) 0%, rgba(35, 20, 12, 0.4) 45%, transparent 75%);
}

.thank-you-container {
    position: relative;
    z-index: 3;
    max-width: 820px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.thank-you-card {
    background: rgba(18, 12, 8, 0.88);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1.5px solid rgba(201, 154, 50, 0.45);
    border-radius: 20px;
    padding: 3.5rem 3.25rem 3.25rem;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8), 0 0 35px rgba(201, 154, 50, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.12);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 740px;
    position: relative;
    overflow: hidden;
    animation: thankYouCardEntrance 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.thank-you-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #E2B84D, #C99A32, transparent);
}

@keyframes thankYouCardEntrance {
    0% {
        opacity: 0;
        transform: translateY(24px) scale(0.98);
    }

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

/* Glowing Checkmark Icon Disc with Concentric Aura */
.thank-you-icon-wrapper {
    position: relative;
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.75rem;
}

.thank-you-ring-pulse {
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    border: 1.5px solid rgba(201, 154, 50, 0.35);
    animation: thankYouPulse 3s ease-in-out infinite;
    pointer-events: none;
}

.thank-you-ring-outer {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px dashed rgba(226, 184, 77, 0.55);
    animation: thankYouRotate 20s linear infinite;
    pointer-events: none;
}

@keyframes thankYouPulse {

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

    50% {
        transform: scale(1.12);
        opacity: 0.85;
    }
}

@keyframes thankYouRotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.thank-you-check-orb {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #F5D77F 0%, #C99A32 55%, #8B6514 100%);
    border: 2px solid #FFFFFF;
    box-shadow: 0 8px 24px rgba(201, 154, 50, 0.55), 0 0 35px rgba(201, 154, 50, 0.35), inset 0 2px 4px rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.thank-you-check-svg {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: checkmarkDraw 0.8s ease forwards 0.3s;
}

@keyframes checkmarkDraw {
    to {
        stroke-dashoffset: 0;
    }
}

.thank-you-eyebrow {
    font-family: var(--font-body);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.24em;
    color: #C99A32;
    text-transform: uppercase;
    margin-bottom: 0.65rem;
    display: block;
}

.thank-you-title {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 4.5vw, 3.2rem);
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: -0.01em;
    line-height: 1.15;
    margin: 0 0 1rem;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}

.thank-you-desc {
    font-family: var(--font-body);
    font-size: 1.08rem;
    color: #C8BDAA;
    line-height: 1.6;
    max-width: 540px;
    margin: 0 auto 1.75rem;
    text-align: center;
}

.thank-you-gold-rule {
    width: 60px;
    height: 1.5px;
    background: #C99A32;
    margin: 0 auto 1.85rem;
}

/* Feature Badges */
.thank-you-pill-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 2.25rem;
    max-width: 620px;
}

.thank-you-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: rgba(28, 18, 11, 0.85);
    border: 1px solid rgba(201, 154, 50, 0.32);
    border-radius: 24px;
    padding: 0.45rem 1rem;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    color: #F5EFE5;
    letter-spacing: 0.02em;
}

.pill-gold-dot {
    color: #E2B84D;
    font-size: 0.75rem;
}

/* Action Buttons */
.thank-you-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    max-width: 460px;
}

.thank-you-btn-home,
.thank-you-btn-trailer {
    flex: 1;
    min-width: 180px;
    padding: 0.85rem 1.4rem;
    font-size: 0.82rem;
    text-align: center;
    justify-content: center;
}

.thank-you-footer {
    border-top: 1px solid rgba(201, 154, 50, 0.16);
    background: #070504;
    padding-top: 3.5rem;
    padding-bottom: 3rem;
}

@media (max-width: 640px) {
    .thank-you-main {
        padding: 110px 1rem 3.5rem;
    }

    .thank-you-card {
        padding: 2.5rem 1.4rem 2rem;
        border-radius: 16px;
    }

    .thank-you-title {
        font-size: 2.15rem !important;
    }

    .thank-you-desc {
        font-size: 0.95rem !important;
        margin-bottom: 1.35rem !important;
    }

    .thank-you-pill-grid {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 1.75rem;
    }

    .thank-you-pill {
        width: 100%;
        max-width: 280px;
        justify-content: center;
        padding: 0.4rem 0.85rem;
    }

    .thank-you-actions {
        flex-direction: column;
        width: 100%;
        gap: 0.75rem;
    }

    .thank-you-btn-home,
    .thank-you-btn-trailer {
        width: 100%;
    }
}

/* ==========================================================================
   STREAMING PARTNER SECTION (CINEMATIC LUXURY OTT SHOWCASE)
   ========================================================================== */
.streaming-partner-section {
    position: relative;
    background: #080604;
    background: radial-gradient(ellipse at 50% 30%, #160E08 0%, #0D0906 50%, #060403 100%);
    padding: 6.5rem 0 7rem;
    overflow: hidden;
    color: #F5F0E8;
}

/* BACKGROUND ATMOSPHERE & CANVAS */
.streaming-atmosphere-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.streaming-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.streaming-ambient-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}

.streaming-ambient-glow.glow-center {
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 400px;
    background: radial-gradient(circle, rgba(200, 148, 50, 0.16) 0%, rgba(26, 16, 9, 0.3) 60%, transparent 80%);
}

.streaming-ambient-glow.glow-left {
    bottom: 10%;
    left: -5%;
    width: 450px;
    height: 350px;
    background: radial-gradient(circle, rgba(200, 148, 50, 0.1) 0%, transparent 70%);
}

.streaming-ambient-glow.glow-right {
    top: 15%;
    right: -5%;
    width: 450px;
    height: 350px;
    background: radial-gradient(circle, rgba(200, 148, 50, 0.1) 0%, transparent 70%);
}

.streaming-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, transparent 40%, rgba(5, 3, 2, 0.85) 100%);
    pointer-events: none;
}

.streaming-bg-orbital-rings {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1200px;
    height: 700px;
    opacity: 0.7;
    pointer-events: none;
}

.streaming-light-trails-svg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 240px;
    pointer-events: none;
    opacity: 0.7;
    mix-blend-mode: screen;
}

/* CONTAINER & SPLIT GRID LAYOUT */
.streaming-container {
    position: relative;
    z-index: 2;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 2rem;
}

.streaming-split-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 3.5rem;
    align-items: center;
    width: 100%;
}

/* LEFT FLANK: EDITORIAL CONTENT */
.streaming-left-flank {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    max-width: 620px;
}

/* EYEBROW */
.streaming-eyebrow-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.85rem;
    margin-bottom: 1.25rem;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.streaming-eyebrow-line {
    width: 34px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #C89432);
}

.streaming-eyebrow-row .streaming-eyebrow-line:last-child {
    background: linear-gradient(90deg, #C89432, transparent);
}

.streaming-eyebrow-diamond {
    color: #C89432;
    font-size: 0.65rem;
    line-height: 1;
}

.streaming-eyebrow-text {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 800;
    color: #C89432;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

/* JIOHOTSTAR LOGO */
.streaming-logo-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 1.6rem;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.8s ease 0.15s,
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}

.streaming-logo-wrap::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 25%;
    transform: translate(-50%, -50%);
    width: 220px;
    height: 70px;
    background: radial-gradient(ellipse, rgba(0, 140, 255, 0.35) 0%, rgba(224, 32, 128, 0.35) 50%, transparent 80%);
    filter: blur(25px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.85;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.streaming-jio-logo-img {
    position: relative;
    z-index: 1;
    height: 74px;
    width: auto;
    max-width: 290px;
    object-fit: contain;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.75),
        0 0 30px rgba(0, 140, 255, 0.35),
        0 0 30px rgba(224, 32, 128, 0.35);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}

.streaming-logo-wrap:hover::before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.15);
}

.streaming-logo-wrap:hover .streaming-jio-logo-img {
    transform: scale(1.05);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.85),
        0 0 45px rgba(0, 140, 255, 0.55),
        0 0 45px rgba(224, 32, 128, 0.55);
}

/* HEADLINE */
.streaming-main-headline {
    font-family: var(--font-display);
    font-size: clamp(1.95rem, 2.7vw, 2.75rem);
    font-weight: 800;
    color: #F5F0E8;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    text-align: left;
    margin: 0 0 1.25rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease 0.3s, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}

.streaming-gold-serif {
    color: #F3C45B;
    background: linear-gradient(135deg, #FFFDF0 0%, #F3C45B 45%, #C89432 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline;
}

/* DECORATIVE DIVIDER */
.streaming-divider-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.85rem;
    width: 100%;
    margin-bottom: 1.25rem;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
    transition: opacity 0.8s ease 0.45s, transform 0.8s ease 0.45s;
}

.streaming-divider-line {
    width: 55px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200, 148, 50, 0.6), transparent);
}

.streaming-divider-diamond {
    color: #C89432;
    font-size: 0.7rem;
    line-height: 1;
}

/* SUPPORTING LEAD COPY */
.streaming-lead-copy {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.68;
    color: #B8B0A5;
    max-width: 500px;
    margin: 0;
    text-align: left;
    font-weight: 400;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.8s ease 0.55s, transform 0.8s ease 0.55s;
}

/* RIGHT FLANK: 2 × 2 STATISTIC CARDS GRID */
.streaming-right-flank {
    width: 100%;
}

.streaming-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    width: 100%;
    margin-top: 0;
}

.streaming-stat-card {
    background: linear-gradient(145deg, rgba(28, 18, 11, 0.88) 0%, rgba(16, 10, 6, 0.94) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1.5px solid rgba(224, 174, 66, 0.42);
    border-radius: 14px;
    padding: 1.75rem 1.6rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.75),
        0 0 24px rgba(200, 148, 50, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
    opacity: 0;
    transform: translateY(25px) scale(0.97);
    transition: opacity 0.75s ease,
        transform 0.75s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.streaming-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, rgba(243, 196, 91, 0.75), transparent);
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.stat-icon-orb {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(243, 196, 91, 0.25) 0%, rgba(22, 14, 8, 0.95) 100%);
    border: 1.8px solid #F3C45B;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 0.25rem;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.6),
        0 0 18px rgba(243, 196, 91, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.stat-icon-orb svg {
    display: block;
    width: 26px;
    height: 26px;
    filter: drop-shadow(0 2px 6px rgba(200, 148, 50, 0.4));
    transition: transform 0.35s ease, filter 0.35s ease;
}

.stat-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.stat-number-wrap {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    margin-bottom: 0.35rem;
    width: 100%;
}

.stat-number {
    font-family: var(--font-display);
    font-size: 2.25rem;
    font-weight: 800;
    color: #F3C45B;
    letter-spacing: -0.01em;
    white-space: nowrap;
    line-height: 1;
    background: linear-gradient(135deg, #FFFFFF 0%, #F8D988 40%, #E5A823 85%, #C89432 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 10px rgba(200, 148, 50, 0.25));
    transition: filter 0.3s ease;
}

.stat-label {
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 600;
    color: #F5EFE6;
    letter-spacing: 0.015em;
    line-height: 1.35;
    transition: color 0.3s ease;
}

/* CARD HOVER STATES */
.streaming-stat-card:hover {
    transform: translateY(-4px) scale(1);
    border-color: rgba(243, 196, 91, 0.85);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.8),
        0 0 35px rgba(243, 196, 91, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.streaming-stat-card:hover::before {
    opacity: 1;
    height: 2px;
}

.streaming-stat-card:hover .stat-icon-orb {
    transform: scale(1.08);
    border-color: #FFFDF0;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.7),
        0 0 26px rgba(243, 196, 91, 0.5);
}

.streaming-stat-card:hover .stat-icon-orb svg {
    filter: drop-shadow(0 2px 10px rgba(243, 196, 91, 0.65));
}

.streaming-stat-card:hover .stat-number {
    filter: drop-shadow(0 0 16px rgba(243, 196, 91, 0.6));
}

.streaming-stat-card:hover .stat-label {
    color: #FFFFFF;
}

/* ENTRANCE ANIMATIONS VIA INTERSECTION OBSERVER */
.streaming-partner-section.is-visible .streaming-eyebrow-row {
    opacity: 1;
    transform: translateY(0);
}

.streaming-partner-section.is-visible .streaming-logo-wrap {
    opacity: 1;
    transform: scale(1);
}

.streaming-partner-section.is-visible .streaming-main-headline {
    opacity: 1;
    transform: translateY(0);
}

.streaming-partner-section.is-visible .streaming-divider-wrap {
    opacity: 1;
    transform: scaleX(1);
}

.streaming-partner-section.is-visible .streaming-lead-copy {
    opacity: 1;
    transform: translateY(0);
}

.streaming-partner-section.is-visible .streaming-stat-card[data-stat="1"] {
    transition-delay: 0.65s;
    opacity: 1;
    transform: translateY(0) scale(1);
}

.streaming-partner-section.is-visible .streaming-stat-card[data-stat="2"] {
    transition-delay: 0.77s;
    opacity: 1;
    transform: translateY(0) scale(1);
}

.streaming-partner-section.is-visible .streaming-stat-card[data-stat="3"] {
    transition-delay: 0.89s;
    opacity: 1;
    transform: translateY(0) scale(1);
}

.streaming-partner-section.is-visible .streaming-stat-card[data-stat="4"] {
    transition-delay: 1.01s;
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* RESPONSIVE DESIGN */
@media (max-width: 1100px) {
    .streaming-split-grid {
        grid-template-columns: 1fr;
        gap: 3.5rem;
        width: 100%;
        max-width: 820px;
        margin: 0 auto;
    }

    .streaming-left-flank {
        align-items: center !important;
        text-align: center !important;
        margin: 0 auto !important;
        width: 100% !important;
        max-width: 780px !important;
    }

    .streaming-left-flank .streaming-eyebrow-row {
        justify-content: center !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .streaming-left-flank .streaming-logo-wrap {
        justify-content: center !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .streaming-left-flank .streaming-logo-wrap::before {
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }

    .streaming-left-flank .streaming-main-headline {
        text-align: center !important;
        font-size: clamp(2rem, 3.5vw, 2.55rem) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
    }

    .streaming-left-flank .streaming-divider-wrap {
        justify-content: center !important;
        transform-origin: center center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
    }

    .streaming-left-flank .streaming-lead-copy {
        text-align: center !important;
        max-width: 680px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
    }

    .streaming-right-flank {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }

    .streaming-right-flank .streaming-stats-grid {
        max-width: 720px !important;
        width: 100% !important;
        margin: 0 auto !important;
    }
}

@media (max-width: 640px) {
    .streaming-partner-section {
        padding: 4.5rem 0 5rem;
    }

    .streaming-container {
        padding: 0 1.25rem;
    }

    .streaming-main-headline {
        font-size: 1.95rem;
    }

    .streaming-logo-wrap {
        margin-bottom: 1.5rem;
    }

    .streaming-jio-logo-img {
        height: 56px;
    }

    .streaming-lead-copy {
        font-size: 0.92rem;
    }

    .streaming-stats-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .streaming-stat-card {
        padding: 1.5rem 1.4rem;
        gap: 0.85rem;
    }

    .stat-icon-orb {
        width: 48px;
        height: 48px;
    }

    .stat-icon-orb svg {
        width: 24px;
        height: 24px;
    }

    .stat-number {
        font-size: 2.1rem;
    }

    .stat-label {
        font-size: 0.92rem;
        color: #F5EFE6;
    }
}

/* ACCESSIBILITY: PREFERS-REDUCED-MOTION */
@media (prefers-reduced-motion: reduce) {

    .streaming-eyebrow-row,
    .streaming-logo-wrap,
    .streaming-main-headline,
    .streaming-divider-wrap,
    .streaming-lead-copy,
    .streaming-stat-card {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   26. STRATEGIC CALL POPUP MODAL (Cinematic Dark Luxury Zoho Form Embed)
   ========================================================================== */

.strategic-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    width: 100dvw;
    height: 100vh;
    height: 100dvh;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    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);
    box-sizing: border-box;
}

.strategic-modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Backdrop with cinematic blur & obsidian vignette */
.strategic-modal-backdrop {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 30%, rgba(26, 22, 16, 0.88) 0%, rgba(6, 5, 4, 0.96) 100%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: 1;
    cursor: pointer;
}

/* Modal Content Container */
.strategic-modal-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 760px;
    max-height: 92vh;
    max-height: 92dvh;
    display: flex;
    flex-direction: column;
}

/* Modal Card */
.strategic-modal-card {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #0E0D0B;
    border: 1px solid rgba(199, 154, 59, 0.35);
    border-radius: 18px;
    box-shadow: 0 35px 80px -15px rgba(0, 0, 0, 0.95),
                0 0 50px -10px rgba(199, 154, 59, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
    overflow: hidden;
    transform: scale(0.94) translateY(16px);
    transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
}

.strategic-modal-overlay.is-open .strategic-modal-card {
    transform: scale(1) translateY(0);
}

/* Modal Header */
.strategic-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.5rem 1.75rem 1.25rem;
    background: linear-gradient(180deg, #181512 0%, #0E0D0B 100%);
    border-bottom: 1px solid rgba(199, 154, 59, 0.22);
    flex-shrink: 0;
}

.strategic-modal-title-group {
    flex: 1;
}

.strategic-modal-badge {
    display: inline-block;
    font-family: 'Lato', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #C79A3B;
    margin-bottom: 0.35rem;
}

.strategic-modal-title {
    font-family: 'Noto Serif Display', Georgia, serif;
    font-size: 1.45rem;
    font-weight: 700;
    color: #F5EFE6;
    margin: 0 0 0.35rem 0;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.strategic-modal-subtitle {
    font-family: 'Lato', sans-serif;
    font-size: 0.88rem;
    color: #A09A90;
    margin: 0;
    line-height: 1.45;
}

/* Close Button */
.strategic-modal-close {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(199, 154, 59, 0.3);
    color: #C79A3B;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
    margin-top: 2px;
    padding: 0;
}

.strategic-modal-close:hover,
.strategic-modal-close:focus-visible {
    background: rgba(199, 154, 59, 0.18);
    border-color: #E6D0A0;
    color: #FFFFFF;
    transform: rotate(90deg) scale(1.08);
    box-shadow: 0 0 15px rgba(199, 154, 59, 0.4);
    outline: none;
}

/* Modal Body */
.strategic-modal-body {
    position: relative;
    width: 100%;
    flex: 1;
    min-height: 520px;
    max-height: calc(88vh - 120px);
    max-height: calc(88dvh - 120px);
    background: #0E0D0B;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Custom Scrollbar for Modal Body */
.strategic-modal-body::-webkit-scrollbar {
    width: 6px;
}

.strategic-modal-body::-webkit-scrollbar-track {
    background: #0E0D0B;
}

.strategic-modal-body::-webkit-scrollbar-thumb {
    background: rgba(199, 154, 59, 0.3);
    border-radius: 9999px;
}

.strategic-modal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(199, 154, 59, 0.55);
}

/* Zoho Form Iframe */
.strategic-iframe {
    width: 100%;
    height: 740px;
    min-height: 600px;
    border: none;
    display: block;
    background: transparent;
    transition: opacity 0.3s ease;
}

/* Modal Loading Indicator */
.strategic-modal-loader {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    background: #0E0D0B;
    z-index: 5;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.strategic-modal-loader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.strategic-spinner {
    width: 44px;
    height: 44px;
    border: 3px solid rgba(199, 154, 59, 0.18);
    border-top-color: #C79A3B;
    border-right-color: #E6D0A0;
    border-radius: 50%;
    animation: strategicSpin 0.9s linear infinite;
    box-shadow: 0 0 20px rgba(199, 154, 59, 0.15);
}

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

.strategic-loader-text {
    font-family: 'Lato', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #C79A3B;
}

/* Responsive Modal Styling */
@media (max-width: 768px) {
    .strategic-modal-overlay {
        padding: 0.75rem;
    }

    .strategic-modal-card {
        border-radius: 14px;
        max-height: 94vh;
        max-height: 94dvh;
    }

    .strategic-modal-header {
        padding: 1.2rem 1.25rem 1rem;
        gap: 0.85rem;
    }

    .strategic-modal-title {
        font-size: 1.25rem;
    }

    .strategic-modal-subtitle {
        font-size: 0.82rem;
    }

    .strategic-modal-body {
        min-height: 450px;
        max-height: calc(94vh - 105px);
        max-height: calc(94dvh - 105px);
    }

    .strategic-iframe {
        height: 700px;
    }
}

@media (max-width: 480px) {
    .strategic-modal-overlay {
        padding: 0.5rem;
    }

    .strategic-modal-header {
        padding: 1rem 1rem 0.85rem;
    }

    .strategic-modal-title {
        font-size: 1.12rem;
    }

    .strategic-modal-close {
        width: 32px;
        height: 32px;
    }

    .strategic-modal-close svg {
        width: 16px;
        height: 16px;
    }
}