@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Inter:wght@400;500;600&family=Plus+Jakarta+Sans:wght@700;800&display=swap');

/* --- DESIGN SYSTEM --- */
:root {
  --primary-blue: #158DFF;
  --accent-cyan: #1EEAD4;
  --deep-navy: #0B1F36;
  --main-bg: #081A2F;
  --bg-dark-start: #081A2F;
  --bg-dark-end: #0B1F36;
  --white: #FFFFFF;
  --light-gray: #EEF3F8;
  --secondary-text: rgba(255, 255, 255, 0.82);

  --font-headings: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Inter', sans-serif;

  --gradient-primary: linear-gradient(135deg, #1DE0C6 0%, #2091D8 50%, #0F64E8 100%);
  --gradient-dark: linear-gradient(180deg, var(--bg-dark-start) 0%, var(--bg-dark-end) 100%);
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-shadow: rgba(0, 0, 0, 0.4);
  --glass-glow: 0 8px 32px 0 rgba(21, 141, 255, 0.15);

  --section-padding-desktop: 120px 0;
  --section-padding-tablet: 80px 0;
  --section-padding-mobile: 60px 0;
}

/* --- RESET & BASIC STYLES --- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  background-color: var(--white);
  color: var(--deep-navy);
  line-height: 1.6;
  overflow-x: hidden;
}

/* --- TYPOGRAPHY --- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-headings);
  font-weight: 800;
  line-height: 1.2;
}

p {
  font-size: 1.1rem;
  font-weight: 400;
  color: rgba(7, 28, 51, 0.75);
}

.text-center {
  text-align: center !important;
}

/* ==========================================================================
   MASTER UNIFIED TYPOGRAPHY SYSTEM
   ========================================================================== */

/* --- 1. EYEBROWS & SECTION TAGS --- */
.section-tag,
.about-tag,
.why-tag,
.format-tag,
.experience-tag,
.why-tag-new,
.dist-eyebrow,
.producer-eyebrow,
.process-eyebrow-tag,
.faq-eyebrow-tag,
.cta-eyebrow-tag,
.luxury-label-blue,
.op-eyebrow {
  display: inline-block !important;
  font-family: var(--font-headings) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  background: var(--gradient-primary) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  margin-bottom: 18px !important;
  line-height: 1.4 !important;
}

/* --- 2. MASTER H1 HEADINGS --- */
.hero-title {
  font-family: var(--font-headings) !important;
  font-size: clamp(34px, 3.2vw, 48px) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.8px !important;
  word-spacing: normal !important;
  color: #FFFFFF !important;
  margin-bottom: 24px !important;
  text-transform: uppercase;
}

.hero-title .hero-title-line {
  display: block;
}

@media (min-width: 992px) {
  .hero-title .hero-title-line {
    white-space: nowrap;
  }
}

.thankyou-title {
  font-family: var(--font-headings) !important;
  font-size: clamp(42px, 4.2vw, 54px) !important;
  font-weight: 800 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.8px !important;
  word-spacing: normal !important;
  color: #FFFFFF !important;
  margin-bottom: 24px !important;
}

/* --- 3. MASTER H2 SECTION HEADINGS --- */
.section-heading,
.about-heading,
.why-heading,
.why-heading-new,
.format-heading,
.experience-heading,
.luxury-heading-main,
.luxury-work-heading,
.luxury-work-title,
.producer-heading,
.process-main-heading,
.faq-main-heading,
.cta-main-heading,
.op-title,
.premium-process-section .process-main-heading,
.premium-faq-section .faq-main-heading,
.premium-cta-section .cta-main-heading {
  font-family: var(--font-headings) !important;
  font-size: clamp(34px, 3.8vw, 46px) !important;
  font-weight: 800 !important;
  line-height: 1.16 !important;
  letter-spacing: -0.5px !important;
  word-spacing: normal !important;
  margin-bottom: 24px !important;
}

/* Heading color hierarchy */
.dark-section .section-heading,
.dark-section .why-heading,
.why-heading,
.experience-heading,
.producer-heading,
.premium-faq-section .faq-main-heading {
  color: #FFFFFF !important;
}

.about-heading,
.why-heading-new,
.format-heading,
.luxury-heading-main,
.luxury-work-heading,
.luxury-work-title,
.premium-process-section .process-main-heading,
.premium-cta-section .cta-main-heading,
.op-title {
  color: #071C33 !important;
}

/* Universal gradient highlight spans inside headings */
.text-gradient,
.about-heading-accent,
.why-heading-gradient,
.format-heading-gradient,
.text-gradient-episode,
.text-gradient-participate,
.luxury-text-gradient,
.producer-text-gradient,
.process-text-gradient,
.faq-heading-gradient,
.cta-heading-gradient {
  display: inline !important;
  background: var(--gradient-primary) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  letter-spacing: inherit !important;
  word-spacing: inherit !important;
}

.producer-text-gradient,
.faq-heading-gradient,
.process-text-gradient {
  background: linear-gradient(135deg, #21D4FD 0%, #2D7FF9 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.cta-heading-gradient,
.text-gradient-episode {
  background: linear-gradient(135deg, #00f0ff 0%, #0072ff 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* --- 4. MASTER H3 CARD & FEATURE TITLES --- */
.about-pillar-title,
.journey-title,
.feat-title,
.poster-title-text,
.op-card-title,
.step-card-title,
.card-specialty-title,
.faq-question-title,
.step-title {
  font-family: var(--font-headings) !important;
  font-weight: 700 !important;
  letter-spacing: -0.2px !important;
  line-height: 1.25 !important;
  word-spacing: normal !important;
}

.about-pillar-title {
  font-size: 16px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #071C33 !important;
  margin-bottom: 8px !important;
}

.journey-title,
.feat-title,
.poster-title-text,
.op-card-title,
.step-card-title {
  font-size: 20px !important;
  color: #071C33 !important;
  margin-bottom: 8px !important;
}

.feat-item:hover .feat-title,
.op-card:hover .op-card-title {
  color: #0F64E8 !important;
}

/* --- 5. MASTER H4 SMALL HEADINGS --- */
.info-node-text h4,
.faq-cta-title {
  font-family: var(--font-headings) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  margin-bottom: 6px !important;
}

/* --- 6. MASTER SECTION SUBTITLES --- */
.hero-desc,
.why-desc,
.format-subtitle,
.experience-subtitle,
.luxury-work-subtitle,
.process-subtitle,
.faq-subtitle,
.cta-description,
.op-subtitle,
.thankyou-desc {
  font-family: var(--font-body) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  word-spacing: normal !important;
  margin-bottom: 36px !important;
}

.dark-section .hero-desc,
.dark-section .why-desc,
.experience-subtitle,
.faq-subtitle,
.thankyou-desc {
  color: rgba(255, 255, 255, 0.85) !important;
}

.about-description p,
.format-subtitle,
.luxury-work-subtitle,
.process-subtitle,
.cta-description,
.op-subtitle {
  color: #475569 !important;
}

/* --- SECTIONS --- */
section {
  position: relative;
  overflow: hidden;
}

.dark-section {
  background: var(--gradient-dark);
  color: var(--white);
}

.dark-section p {
  color: rgb(255, 255, 255);
}

/* --- GLOBAL MASTER CONTAINER SYSTEM (ALIGNED TO IMAGE 1 REFERENCE) --- */
.container,
.about-container,
.why-grid,
.experience-container,
.participate-container,
.dist-container,
.luxury-container,
.producer-container,
.process-max-container,
.faq-max-container,
.cta-max-container,
.footer-container,
.footer-max-container {
  width: 92%;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}



/* --- BUTTONS --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  text-decoration: none;
  gap: 10px;
}

.btn-primary {
  background: var(--gradient-primary);
  color: #000;
  font-weight: 700;
  box-shadow: 0 4px 15px rgba(30, 234, 212, 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(30, 234, 212, 0.5);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--glass-border);
  color: var(--white);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

.btn-outline-dark {
  background: transparent;
  border: 2px solid var(--deep-navy);
  color: var(--deep-navy);
}

.btn-outline-dark:hover {
  background: var(--deep-navy);
  color: var(--white);
  transform: translateY(-2px);
}

/* --- HEADER & NAVIGATION --- */
header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  transition: background-color 0.4s ease, backdrop-filter 0.4s ease;
}

header.scrolled {
  position: fixed;
  background-color: rgba(7, 28, 51, 0.85);
  backdrop-filter: blur(15px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

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

.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.logo-img {
  height: 60px;
  /* Premium height */
  width: auto;
  display: block;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.logo-img:hover {
  transform: scale(1.02);
}

.logo-digikore-img {
  height: 26px;
  width: auto;
  display: block;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.logo-digikore-img:hover {
  transform: scale(1.02);
}

.nav-menu {
  display: flex;
  list-style: none;
  gap: 40px;
  /* Increased horizontal spacing */
}

.mobile-only-logo-item {
  display: none;
}

.nav-link {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 400;
  /* Reduced font weight slightly */
  transition: color 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
  color: var(--accent-cyan);
}

#header-cta {
  background: var(--gradient-primary);
  color: #04101F;
  font-weight: 700;
  padding: 14px 32px;
  /* Made larger */
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(21, 141, 255, 0.35);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

#header-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(21, 141, 255, 0.5);
}

.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
}

.mobile-menu-btn span {
  display: block;
  width: 25px;
  height: 2px;
  background-color: var(--white);
  margin: 5px 0;
  transition: 0.4s;
  transform-origin: center;
}

.mobile-menu-btn.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.mobile-menu-btn.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-btn.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --- HERO SECTION --- */
#hero {
  position: relative;
  padding: 130px 0 110px 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background:
    linear-gradient(rgba(5, 18, 35, 0.78), rgba(5, 18, 35, 0.78)),
    url('assets/hero_background.jpg') no-repeat center center/cover;
  box-shadow: inset 0 0 150px rgba(0, 0, 0, 0.9);
  /* Vignette */
  overflow: hidden;
}

/* Subtle radial glow behind text content */
.hero-radial-glow {
  position: absolute;
  top: 15%;
  left: -10%;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(21, 141, 255, 0.16) 0%, rgba(30, 234, 212, 0.06) 50%, rgba(0, 0, 0, 0) 80%);
  pointer-events: none;
  z-index: 1;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 50px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.hero-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.hero-title {
  font-family: var(--font-headings);
  font-size: clamp(34px, 3.2vw, 48px);
  font-weight: 800;
  line-height: 1.15;
  color: var(--white);
  text-transform: uppercase;
  margin-bottom: 24px;
  letter-spacing: -1.2px;
}

.hero-subtitle {
  font-family: var(--font-headings);
  font-size: clamp(34px, 3.4vw, 38px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--white);
  margin-bottom: 30px;
  letter-spacing: -1.5px;
}

.hero-desc {
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.6;
  max-width: 540px;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 28px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid #19D6E8;
  padding: 0 20px;
  height: 52px;
  border-radius: 30px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--white);
  letter-spacing: 0.5px;
  margin-bottom: 0;
  white-space: nowrap;
  flex-shrink: 0;
}

.hero-badge .glow-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: var(--accent-cyan);
  border-radius: 50%;
  margin-left: 10px;
  box-shadow: 0 0 10px var(--accent-cyan);
  animation: pulse 2s infinite;
}

.hero-ctas {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: 16px;
  width: 100%;
}

/* Custom Hero Button overrides */
#hero-primary-cta {
  background: var(--gradient-primary);
  color: #04101F;
  font-weight: 700;
  height: 52px;
  padding: 0 28px;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(21, 141, 255, 0.35);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}

#hero-primary-cta:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 14px 35px rgba(21, 141, 255, 0.55);
}

#hero-play-cta {
  background: transparent;
  border: 1.5px solid var(--white);
  color: var(--white);
  height: 62px;
  padding: 0 36px;
  border-radius: 14px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

#hero-play-cta:hover {
  background: rgba(255, 255, 255, 0.08);
  /* glass hover effect */
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-3px) scale(1.03);
}

.hero-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.video-frame-container {
  width: 100%;
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(21, 141, 255, 0.15);
  aspect-ratio: 16/9;
  border: 1.5px solid rgba(255, 255, 255, 0.395);
  /* Thin metallic outer outline */
  background: rgba(255, 255, 255, 0.03);
  /* Glass container backing */
  padding: 8px;
  /* Creates the inset design layout gap */
  animation: float 6s ease-in-out infinite;
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.4s ease;
}

.video-frame-container:hover {
  transform: translateY(-6px) scale(1.01);
  border-color: rgba(255, 255, 255, 0.212);
}

.video-frame-container.playing {
  animation: none;
}

.video-frame-container img,
.video-frame-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 18px;
  background: #04101F;
}

.video-overlay {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 8px;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  background: rgba(4, 16, 31, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  cursor: pointer;
  transition: opacity 0.35s ease, visibility 0.35s ease, background 0.3s ease;
}

.video-frame-container.playing .video-overlay {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.video-frame-container:hover .video-overlay {
  background: rgba(4, 16, 31, 0.2);
}

/* Frosted glass play button styled exactly like reference */
.play-btn-circle {
  width: 100px;
  height: 100px;
  background: rgba(255, 255, 255, 0.05);
  /* Transparent glass */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.85);
  /* Thin clean white circle outline */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  color: var(--white);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.play-svg {
  width: 36px;
  height: 36px;
  transform: translateX(4px);
  /* Visually center triangle arrow */
}

.video-frame-container:hover .play-btn-circle {
  transform: scale(1.1);
  background: var(--gradient-primary);
  border-color: transparent;
  color: #04101F;
  box-shadow: 0 0 35px var(--accent-cyan);
}

/* Streaming section styling */
.streaming-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 40px;
  /* Increased spacing */
  margin-bottom: 30px;
}

.streaming-label {
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 8px;
}

.jio-logo-container {
  display: flex;
  justify-content: center;
}

.jiohotstar-logo {
  height: 58px;
  width: auto;
  display: block;
  object-fit: contain;
  border-radius: 10PX;
}

/* Statistics cards list */
.stats-banner-section {

  /* Sleek dark navy bg */
  margin-top: -60px;
  margin-bottom: -60px;


  position: relative;
  z-index: 10;
}

.stats-banner-container {
  max-width: 1280px;
  margin: 0 auto;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%;
}

.stat-card {
  width: 100%;
  max-width: 320px;
  height: 110px;
  margin: 0 auto;
  /* Increased height */
  background: #06172D;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  /* Rounded corners */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  padding: 20px;
  /* More padding */
  gap: 4px;
}

.stat-card:hover {
  transform: translateY(-4px);
  border-color: #1EEAD4;
  background: #FFFFFF;
  box-shadow: 0 18px 40px rgba(30, 234, 212, 0.25);
}

.stat-card:hover .stat-num {
  color: #071C33;
}

.stat-card:hover .stat-label {
  color: #556B82;
}

.stat-icon,
.stat-icon-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
}

.stat-num {
  font-family: var(--font-headings);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1;
}

.stat-label {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 500;
}

/* --- ABOUT SHOW (MATCHING DESIGN SPECIFICATION) --- */
#about.about-section {
  position: relative;
  background: linear-gradient(180deg, #F4F8FD 0%, #EBF4FC 100%);
  padding: 90px 0;
  overflow: hidden;
}

.about-watermark-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.about-bg-svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-container {
  position: relative;
  z-index: 2;
  width: 92%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0;
}

/* Top Row: Left Text & Right Bento Collage */
.about-top-row {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 48px;
}

@media (max-width: 1024px) {
  .about-top-row {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }

  .about-text-col {
    align-items: center;
    text-align: center;
  }

  .about-eyebrow {
    align-items: center;
    margin-left: auto;
    margin-right: auto;
  }

  .about-eyebrow-line {
    margin-left: auto;
    margin-right: auto;
  }

  .about-collage-wrapper {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Left Column Styling */
.about-text-col {
  display: flex;
  flex-direction: column;
}

.about-eyebrow {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 18px;
}

.about-eyebrow span {
  font-family: var(--font-headings, 'Outfit', sans-serif);
  font-size: 13px;
  font-weight: 800;
  color: #0F64E8;
  letter-spacing: 2.5px;
  word-spacing: 4px;
  text-transform: uppercase;
}

.about-eyebrow-line {
  width: 32px;
  height: 3px;
  background: #0F64E8;
  border-radius: 2px;
  margin-top: 6px;
}

.about-heading {
  font-size: clamp(28px, 2.9vw, 42px) !important;
  line-height: 1.18 !important;
  margin-bottom: 24px !important;
}

.about-heading-br {
  display: block;
}

.about-heading-accent {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
  display: inline-block;
}

.about-description {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.about-description p {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 15px;
  line-height: 1.65;
  color: #475569;
  margin: 0;
}

/* Right Column: Composite Collage Image */
.about-collage-wrapper {
  position: relative;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.about-collage-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 15px 35px rgba(15, 30, 60, 0.12));
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.about-collage-img:hover {
  transform: translateY(-4px) scale(1.01);
}

/* Bottom Row: 4 Feature Pillars Floating Card */
.about-pillars-card {
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: 0 12px 35px rgba(8, 26, 47, 0.06);
  border: 1px solid rgba(226, 232, 240, 0.9);
  padding: 24px 32px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: center;
}

.about-pillar-item {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  text-align: left;
}

/* Vertical divider lines between items on desktop */
.about-pillar-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -10px;
  top: 15%;
  height: 70%;
  width: 1px;
  background: #E2E8F0;
}

.about-pillar-icon-box {
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 50%;
  background: #E0F2FE;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0284C7;
  flex-shrink: 0;
}

.about-pillar-icon-box svg {
  width: 22px;
  height: 22px;
}

.about-pillar-text {
  display: flex;
  flex-direction: column;
  text-align: left;
  align-items: flex-start;
}

.about-pillar-title {
  font-family: var(--font-headings, 'Outfit', sans-serif);
  font-size: 13px;
  font-weight: 800;
  color: #0076FF;
  letter-spacing: 0.5px;
  margin: 0 0 3px 0;
  text-transform: uppercase;
  text-align: left;
}

.about-pillar-desc {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 12.5px;
  line-height: 1.4;
  color: #64748B;
  margin: 0;
  text-align: left;
}

/* Tablet (1024px & 768px) */
@media (max-width: 1024px) {
  .about-pillars-card {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 28px !important;
    padding: 28px 32px !important;
  }

  .about-pillar-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px !important;
    text-align: left !important;
  }

  .about-pillar-item:not(:last-child)::after {
    display: none !important;
  }

  .about-pillar-text {
    text-align: left !important;
    align-items: flex-start !important;
  }

  .about-pillar-title {
    text-align: left !important;
    margin-bottom: 4px !important;
  }

  .about-pillar-desc {
    text-align: left !important;
  }
}

@media (max-width: 600px) {
  .about-pillars-card {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 24px 20px !important;
  }
}


/* --- WHY THIS SERIES --- */
#why-series {
  position: relative;
  background-color: #071c3375;
  padding: 90px 0;
  min-height: auto;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.why-grid {
  position: relative;
  z-index: 5;
  width: 92%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(480px, 540px) 1fr;
  gap: 50px;
  align-items: center;
}

/* --- BLUEPRINT BACKGROUND SYSTEM --- */
.blueprint-bg-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  background-color: #030D18;
  /* Darker navy base */
  pointer-events: none;
}

/* Background blueprint image with brightness/contrast adjustment */
.blueprint-bg-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('assets/why_bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(1.2) contrast(1.1);
  z-index: 1;
  animation: bpBreathe 10s ease-in-out infinite;
}

/* Vignette overlay */
.blueprint-bg-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, transparent 30%, rgba(3, 13, 24, 0.95) 95%);
  z-index: 3;
}

/* Fine noise texture */
.blueprint-noise {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.02;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  z-index: 1;
}

/* Lighting glows */
.blueprint-glow-left {
  position: absolute;
  top: 50%;
  left: 21%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(15, 100, 232, 0.08) 0%, transparent 65%);
  z-index: 2;
}

.blueprint-glow-center {
  position: absolute;
  top: 50%;
  left: 71%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(29, 224, 198, 0.18) 0%, rgba(32, 145, 216, 0.10) 35%, transparent 72%);
  z-index: 2;
}

@keyframes bpBreathe {
  0% {
    opacity: 0.38;
  }

  50% {
    opacity: 0.55;
  }

  100% {
    opacity: 0.38;
  }
}

/* Floating particles */
.blueprint-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.bp-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(30, 234, 212, 0.35);
  box-shadow: 0 0 10px rgba(30, 234, 212, 0.8);
  animation: floatDrift 20s linear infinite;
}

.p1 {
  top: 20%;
  left: 10%;
  animation-duration: 25s;
}

.p2 {
  top: 80%;
  left: 30%;
  animation-duration: 18s;
  animation-delay: -5s;
}

.p3 {
  top: 40%;
  left: 80%;
  animation-duration: 22s;
  animation-delay: -10s;
}

.p4 {
  top: 15%;
  left: 90%;
  animation-duration: 30s;
  animation-delay: -15s;
}

@keyframes floatDrift {
  0% {
    transform: translateY(0) translateX(0) scale(0.8);
    opacity: 0;
  }

  10% {
    opacity: 0.3;
  }

  90% {
    opacity: 0.3;
  }

  100% {
    transform: translateY(-80px) translateX(30px) scale(1.2);
    opacity: 0;
  }
}

.why-content {
  display: flex;
  flex-direction: column;
}

.why-divider {
  width: 45px;
  height: 3px;
  background-color: #1DE0C6;
  border-radius: 99px;
  margin-bottom: 18px;
}

.why-heading {
  margin-bottom: 24px;
}

.why-heading-gradient {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.why-desc {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.55;
  color: rgb(255, 255, 255);
  max-width: 480px;
  width: 100%;
  margin-bottom: 30px;
}

.why-desc:last-of-type {
  margin-bottom: 0;
}

/* Right Side: Interactive Circular Infographic */
.why-right {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
}

.why-infographic-container {
  position: relative;
  width: min(100%, 360px);
  height: 360px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  transform: scale(0.86);
  transform-origin: center center;
}

/* Ambient glow */
.ambient-glow {
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(29, 224, 198, 0.18) 0%, rgba(32, 145, 216, 0.10) 35%, transparent 72%);
  z-index: 0;
  pointer-events: none;
}

/* Connection lines */
.svg-connections-static {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.conn-line {
  stroke: rgba(34, 217, 214, 0.45);
  stroke-width: 2px;
}

/* Main Orbit Ring (Diameter 360px) */
.main-orbit-ring {
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.18);
  z-index: 2;
  pointer-events: none;
  animation: orbit 18s linear infinite;
}

/* Secondary Ring (Diameter 280px) */
.secondary-ring {
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  border: 2px solid rgba(34, 217, 214, 0.45);
  z-index: 2;
  pointer-events: none;
}

@keyframes orbit {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Orbit Dots (12px, glowing) */
.orbit-dot {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1DE0C6 0%, #2091D8 100%);
  box-shadow: 0 0 14px rgba(29, 224, 198, 0.7);
  animation: dotPulse 3s ease-in-out infinite;
}

.dot-top {
  top: 0;
  left: 180px;
}

.dot-right {
  top: 180px;
  left: 360px;
}

.dot-bottom {
  top: 360px;
  left: 180px;
}

.dot-left {
  top: 180px;
  left: 0;
}

@keyframes dotPulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    transform: translate(-50%, -50%) scale(1.12);
    box-shadow: 0 0 24px rgba(29, 224, 198, 0.95);
  }

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

/* Fixed Center Image (Diameter 200px) */
.info-center {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  border: 5px solid #22D9D6;
  box-shadow: 0 0 25px rgba(34, 217, 214, 0.35), 0 0 70px rgba(34, 217, 214, 0.12);
  z-index: 3;
  animation: floatImage 6s ease-in-out infinite;
  cursor: pointer;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

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

.info-center:hover {
  transform: scale(1.02);
  box-shadow: 0 0 40px rgba(34, 217, 214, 0.55), 0 0 90px rgba(34, 217, 214, 0.22);
}

@keyframes floatImage {
  0% {
    transform: translateY(0);
  }

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

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

/* Fixed Info Nodes (Aligned on the 360px ring coordinate centers) */
.info-node {
  position: absolute;
  width: 0;
  height: 0;
  z-index: 4;
}

.node-top {
  top: 0;
  left: 180px;
}

.node-right {
  top: 180px;
  left: 360px;
}

.node-bottom {
  top: 360px;
  left: 180px;
}

.node-left {
  top: 180px;
  left: 0;
}

/* Icon Outlined Circle (Size 56px) */
.info-node-icon {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  background: #071C33;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  box-shadow: 0 0 15px rgba(29, 224, 198, 0.1);
  cursor: pointer;
  transition: all 0.35s ease;
  z-index: 5;
}

.info-node-icon svg {
  width: 24px;
  height: 24px;
}

/* Text styles */
.info-node-text {
  position: absolute;
  width: 220px;
  padding: 12px 18px;
  background: rgba(7, 28, 51, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 3px;
  z-index: 4;
  transition: all 0.35s ease;
}

.node-top .info-node-text,
.node-right .info-node-text,
.node-bottom .info-node-text {
  left: 20px;
  top: 0;
  transform: translateY(-50%);
  padding-left: 44px;
  text-align: left;
}

.node-left .info-node-text {
  right: 20px;
  top: 0;
  transform: translateY(-50%);
  padding-right: 44px;
  text-align: right;
}

.info-node-text h4 {
  font-family: var(--font-headings);
  font-size: 16px;
  font-weight: 700;
  color: var(--white);
  margin: 0;
  transition: color 0.35s ease;
}

.info-node-text p {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
}

/* Node Hover Interactions */
.info-node:hover .info-node-icon {
  transform: translate(-50%, -50%) scale(1.08);
  border-color: #1DE0C6;
  box-shadow: 0 0 25px rgba(29, 224, 198, 0.6);
}

.info-node:hover .info-node-text {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(34, 217, 214, 0.35);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35), 0 0 15px rgba(34, 217, 214, 0.15);
}

.info-node:hover .info-node-text h4 {
  color: var(--white);
}

#format {
  position: relative;
  padding: 90px 0;
  background-color: #FFFFFF;
  overflow: hidden;
}

.format-medical-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

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

.format-tag {
  display: table;
  margin: 0 auto 8px auto;
  font-family: var(--font-headings);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 4px;
  background: linear-gradient(135deg, #2091D8 0%, #0F64E8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.format-divider {
  width: 45px;
  height: 1.5px;
  background: linear-gradient(90deg, #1DE0C6 0%, #0F64E8 100%);
  margin: 0 auto 18px auto;
  border-radius: 99px;
}

.format-heading {
  margin-bottom: 24px;
  text-align: center;
}

.format-heading-gradient {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.format-subtitle {
  font-family: var(--font-body) !important;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.6;
  color: #5E6C84;
  max-width: 800px;
  margin: 0 auto 70px auto;
  text-align: center;
}

.carousel-outer {
  position: relative;
  margin: 0 auto;
  max-width: 1600px;
  padding: 0 40px;
}

.carousel-container {
  overflow-x: auto;
  scroll-behavior: smooth;
  display: flex;
  gap: 28px;
  padding: 30px 10px 40px 10px;
  scrollbar-width: none;
  position: relative;
  z-index: 2;
}

.carousel-container::-webkit-scrollbar {
  display: none;
}

.carousel-card {
  flex: 0 0 240px;
  width: 240px;
  height: 360px;
  background: #FFFFFF;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(8, 27, 60, 0.05);
  border: 1px solid rgba(15, 100, 232, 0.15);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  position: relative;
}

.carousel-card:hover {
  transform: translateY(-12px);
  border-color: rgba(15, 100, 232, 0.45);
  box-shadow: 0 25px 55px rgba(8, 27, 60, 0.18), 0 0 20px rgba(15, 100, 232, 0.08);
}

.card-img-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 22px;
  overflow: hidden;
  z-index: 1;
}

.carousel-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  filter: brightness(0.9) contrast(1.05);
}

.carousel-card:hover img {
  transform: scale(1.05);
}

.card-bottom-panel {
  position: absolute;
  bottom: 14px;
  left: 14px;
  right: 14px;
  height: 60px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(8, 27, 60, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  z-index: 2;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.carousel-card:hover .card-bottom-panel {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 12px 35px rgba(8, 27, 60, 0.12);
}

.card-specialty-title {
  font-family: var(--font-headings);
  font-weight: 700;
  font-size: 0.95rem;
  color: #081B3C;
  text-align: center;
  margin-top: 0;
  transition: color 0.4s ease;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  background: #FFFFFF;
  border: 1px solid rgba(15, 100, 232, 0.12);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(8, 27, 60, 0.08);
  z-index: 10;
  color: #0F64E8;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.carousel-btn svg {
  width: 24px;
  height: 24px;
  transition: transform 0.4s ease, color 0.4s ease;
}

.carousel-btn:hover {
  background: linear-gradient(135deg, #1DE0C6 0%, #2091D8 45%, #0F64E8 100%);
  color: #FFFFFF;
  border-color: transparent;
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 12px 30px rgba(15, 100, 232, 0.35);
}

.carousel-btn.prev {
  left: -20px;
}

.carousel-btn.next {
  right: -20px;
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 40px;
}

.carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #D9E2EC;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.carousel-dot.active {
  background: linear-gradient(135deg, #1DE0C6 0%, #2091D8 45%, #0F64E8 100%);
  transform: scale(1.3);
  box-shadow: 0 0 15px rgba(32, 145, 216, 0.6), 0 0 5px rgba(29, 224, 198, 0.4);
}

.bottom-specialty-pill-container {
  margin-top: 80px;
  display: flex;
  justify-content: center;
  width: 100%;
  position: relative;
  z-index: 2;
  padding: 0 40px;
}

.bottom-specialty-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 24px;
  border: 1px solid rgba(15, 100, 232, 0.15);
  box-shadow: 0 15px 45px rgba(8, 27, 60, 0.06);
  padding: 24px 48px;
  max-width: 1000px;
  transition: all 0.4s ease;
}

.bottom-specialty-pill:hover {
  box-shadow: 0 20px 55px rgba(8, 27, 60, 0.1);
  border-color: rgba(15, 100, 232, 0.25);
  transform: translateY(-2px);
}

.format-desc-text {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
  color: #081B3C;
  margin: 0;
  text-align: center;
}

#experience {
  position: relative;
  padding: 90px 0;
  background: transparent;
  overflow: hidden;
  border-top: 1px solid rgba(0, 255, 255, 0.1);
  border-bottom: 1px solid rgba(0, 255, 255, 0.1);
}

.experience-bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  background-color: #030D18;
  /* Dark navy base */
  overflow: hidden;
}

.experience-bg-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('assets/why_bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(1.2) contrast(1.1);
  z-index: 1;
  opacity: 0.45;
  animation: bpBreathe 10s ease-in-out infinite;
}

.hud-radial-glow-1 {
  position: absolute;
  top: 15%;
  left: 15%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 240, 255, 0.05) 0%, transparent 70%);
  filter: blur(40px);
}

.hud-radial-glow-2 {
  position: absolute;
  bottom: 15%;
  right: 15%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 240, 255, 0.04) 0%, transparent 70%);
  filter: blur(40px);
}

/* Background HUD Decorations */
.hud-bg-decorations {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.decor-dna {
  position: absolute;
  left: 3%;
  top: 15%;
  width: 90px;
  height: auto;
  opacity: 0.08;
  animation: float-slow 12s ease-in-out infinite alternate;
}

.decor-ecg {
  position: absolute;
  right: 3%;
  top: 25%;
  width: 250px;
  opacity: 0.08;
}

.decor-hexagons {
  position: absolute;
  right: 4%;
  bottom: 8%;
  width: 160px;
  opacity: 0.05;
  animation: float-slow 18s ease-in-out infinite alternate;
}

.decor-crosses-left {
  position: absolute;
  left: 8%;
  bottom: 15%;
  opacity: 0.08;
}

.decor-crosses-right {
  position: absolute;
  right: 10%;
  top: 10%;
  opacity: 0.08;
}

@keyframes float-slow {
  0% {
    transform: translateY(0) rotate(0deg);
  }

  100% {
    transform: translateY(-15px) rotate(3deg);
  }
}

.experience-container {
  width: 92%;
  max-width: 1600px;
  padding: 0;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.experience-container .text-center {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.experience-tag {
  display: inline-block;
  font-family: var(--font-headings);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 3px;
  color: #00f0ff;
  margin-bottom: 20px;
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.35);
}

.experience-heading {
  margin-bottom: 20px;
}

.text-gradient-episode {
  background: linear-gradient(135deg, #00f0ff 0%, #0072ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline;
}

.experience-subtitle {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.65);
  max-width: 700px;
  margin: 0 auto 70px auto;
  text-align: center;
}

.journey-box-outer {
  display: flex;
  justify-content: center;
  width: 100%;
}

.journey-box {
  width: 100%;
  background: linear-gradient(180deg, #071A2D 0%, #0B2340 100%);
  border: 1px solid rgba(0, 255, 255, 0.18);
  border-radius: 32px;
  box-shadow: inset 0 0 40px rgba(0, 255, 255, 0.08), 0 30px 70px rgba(0, 0, 0, 0.55);
  padding: 80px 60px 100px 60px;
  position: relative;
  overflow: hidden;
}

.journey-line-svg-wrapper {
  display: none;
}

.journey-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.journey-base-path {
  stroke: rgba(0, 240, 255, 0.15);
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 3px rgba(0, 240, 255, 0.2));
}

.journey-pulse-path {
  stroke: url(#journey-pulse-grad);
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 160 1200;
  stroke-dashoffset: 1360;
  animation: travel-line 7s linear infinite;
  filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.7)) drop-shadow(0 0 3px rgba(0, 240, 255, 0.4));
}

@keyframes travel-line {
  0% {
    stroke-dashoffset: 1360;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

.path-node {
  filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.8)) drop-shadow(0 0 3px rgba(0, 240, 255, 0.4));
  animation: pulse-node 2s infinite alternate;
}

@keyframes pulse-node {
  0% {
    r: 4.5;
    opacity: 0.7;
  }

  100% {
    r: 6.5;
    opacity: 1;
  }
}

.hud-chevron path {
  filter: drop-shadow(0 0 4px rgba(0, 240, 255, 0.6));
  animation: pulse-chevron 1.5s infinite alternate;
}

@keyframes pulse-chevron {
  0% {
    opacity: 0.4;
  }

  100% {
    opacity: 1;
  }
}

.journey-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 240px 240px;
  /* fixed row heights to match SVG coordinate mapping */
  grid-row-gap: 40px;
  grid-column-gap: 40px;
  position: relative;
  z-index: 2;
}

.journey-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.journey-icon-circle-wrapper {
  width: 88px;
  height: 88px;
  margin-bottom: 24px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hud-rings {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

.hud-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px dashed rgba(0, 240, 255, 0.2);
  transition: all 0.4s ease;
}

.ring-1 {
  width: 100px;
  height: 100px;
  border-style: solid;
  border-color: rgba(0, 240, 255, 0.15);
  animation: rotate-clockwise 20s linear infinite;
}

.ring-2 {
  width: 112px;
  height: 112px;
  border-color: rgba(0, 240, 255, 0.08);
  animation: rotate-counter 30s linear infinite;
}

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

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

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

  100% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
}

.journey-icon-circle {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: #071A2D;
  border: 1px solid rgba(0, 240, 255, 0.4);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.15), inset 0 0 12px rgba(0, 240, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  animation: sequential-glow 4s ease-in-out infinite;
}

/* Sequential delay for circle glowing one-by-one */
.journey-item.item-row1.col1 .journey-icon-circle {
  animation-delay: 0s;
}

.journey-item.item-row1.col2 .journey-icon-circle {
  animation-delay: 0.5s;
}

.journey-item.item-row1.col3 .journey-icon-circle {
  animation-delay: 1s;
}

.journey-item.item-row1.col4 .journey-icon-circle {
  animation-delay: 1.5s;
}

.journey-item.item-row2.col1 .journey-icon-circle {
  animation-delay: 2s;
}

.journey-item.item-row2.col2 .journey-icon-circle {
  animation-delay: 2.5s;
}

.journey-item.item-row2.col3 .journey-icon-circle {
  animation-delay: 3s;
}

.journey-item.item-row2.col4 .journey-icon-circle {
  animation-delay: 3.5s;
}

@keyframes sequential-glow {

  0%,
  100% {
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.15), inset 0 0 10px rgba(0, 240, 255, 0.05);
    border-color: rgba(0, 240, 255, 0.3);
    transform: scale(1);
  }

  12.5% {
    box-shadow: 0 0 25px rgba(0, 240, 255, 0.65), inset 0 0 15px rgba(0, 240, 255, 0.25);
    border-color: rgba(0, 240, 255, 0.85);
    transform: scale(1.05);
  }

  25%,
  87.5% {
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.15), inset 0 0 10px rgba(0, 240, 255, 0.05);
    border-color: rgba(0, 240, 255, 0.3);
    transform: scale(1);
  }
}

.hud-png-icon {
  width: 80px;
  height: 80px;
  object-fit: contain;
  filter: drop-shadow(0 0 5px rgba(0, 240, 255, 0.4));
  transition: all 0.3s ease;
  position: relative;
  z-index: 3;
}

.journey-item:hover .hud-png-icon {
  transform: scale(1.08);
  filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.85));
}

.journey-number {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  background: #071A2D;
  border: 1px solid rgba(0, 240, 255, 0.5);
  color: #00f0ff;
  font-family: var(--font-headings);
  font-size: 10px;
  font-weight: 700;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.3);
  transition: all 0.3s ease;
}

/* Hover Effects */
.journey-item:hover .journey-icon-circle {
  transform: scale(1.06);
  border-color: #00f0ff;
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.55), inset 0 0 18px rgba(0, 240, 255, 0.25);
}

.journey-item:hover .ring-1 {
  border-color: rgba(0, 240, 255, 0.35);
  width: 104px;
  height: 104px;
}

.journey-item:hover .ring-2 {
  border-color: rgba(0, 240, 255, 0.2);
  width: 118px;
  height: 118px;
}

.journey-item:hover .svg-hud-icon {
  transform: scale(1.08);
  filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.8));
}

.journey-item:hover .journey-number {
  border-color: #00f0ff;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.6);
  background: #0b2340;
}

.journey-card {
  width: 100%;
  max-width: 230px;
  background: rgba(7, 26, 45, 0.45);
  border: 1px solid rgba(0, 240, 255, 0.15);
  border-radius: 16px;
  padding: 36px 20px 24px 20px;
  margin-top: -36px;
  /* overlap with node */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(0, 240, 255, 0.05);
  transition: all 0.4s ease;
  min-height: 145px;
}

.journey-item:hover .journey-card {
  border-color: rgba(0, 240, 255, 0.4);
  background: rgba(7, 26, 45, 0.65);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(0, 240, 255, 0.1);
  transform: translateY(-2px);
}

.journey-card-glow-bar {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 2px;
  background: #00f0ff;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.8);
  border-radius: 2px;
  opacity: 0.7;
  transition: all 0.4s ease;
}

.journey-item:hover .journey-card-glow-bar {
  width: 48px;
  opacity: 1;
  box-shadow: 0 0 12px rgba(0, 240, 255, 1);
}

.journey-title {
  font-family: var(--font-headings);
  font-size: 17px;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 8px;
  letter-spacing: 0.3px;
  transition: color 0.3s ease;
  line-height: 1.3;
}

.journey-item:hover .journey-title {
  color: #00f0ff;
}

.journey-desc {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  max-width: 100%;
}

/* --- WHY PARTICIPATE --- */
#why-participate {
  position: relative;
  background-color: #FCFDFF;
  padding: 90px 0;
  overflow: hidden;
  display: block;
}

.why-tech-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.8;
}

.participate-container {
  max-width: 1560px;
  width: 92%;
  margin: 0 auto;
  background: #FFFFFF;
  border: 1px solid rgba(41, 120, 255, 0.15);
  border-radius: 32px;
  box-shadow: 0 40px 100px rgba(20, 70, 160, 0.08);
  padding: 80px 60px 100px 60px;
  position: relative;
  z-index: 2;
  overflow: hidden;
}

.participate-header {
  text-align: center;
  margin-bottom: 20px;
}

.why-tag-new {
  display: inline-block;
  font-family: var(--font-headings);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 12px;
  background: linear-gradient(90deg, #1DE0C6 0%, #2091D8 45%, #0F64E8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: uppercase;
}

.why-heading-new {
  margin-bottom: 20px;
  text-align: center;
}

.text-gradient-participate {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline;
}

.format-line-1,
.format-line-2,
.experience-line-1,
.experience-line-2,
.faq-heading-line-1,
.faq-heading-line-2 {
  display: inline;
}

.format-line-3,
.experience-line-3 {
  display: block;
}

.format-br-mobile,
.why-heading-mobile-br,
.participate-heading-br,
.format-heading-br,
.experience-heading-br {
  display: none;
}

.ecg-divider-container {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.ecg-divider-svg {
  width: 120px;
  height: 24px;
}

.participate-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  gap: 50px;
  align-items: center;
  margin-top: 10px;
  position: relative;
  min-height: 600px;
}

.feat-item {
  display: flex;
  align-items: center;
  margin-bottom: 60px;
  transition: all 0.4s ease;
  position: relative;
  z-index: 3;
}

.feat-item:last-child {
  margin-bottom: 0;
}

.feat-item[data-side="left"] {
  flex-direction: row-reverse;
}

.feat-item[data-side="right"] {
  flex-direction: row;
}

.feat-icon-wrapper {
  width: 75px;
  height: 75px;
  min-width: 75px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid rgba(29, 224, 198, 0.35);
  box-shadow: 0 15px 35px rgba(20, 70, 160, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0F64E8;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  z-index: 5;
}

.feat-svg-icon {
  width: 30px;
  height: 30px;
}

.feat-item:hover .feat-icon-wrapper {
  border-color: #1DE0C6;
  box-shadow: 0 25px 60px rgba(29, 224, 198, 0.3), inset 0 0 15px rgba(29, 224, 198, 0.1);
  transform: translateY(-2px) scale(1.05);
}

.feat-text {
  max-width: 290px;
  width: 100%;
  padding: 16px 20px;
  background: #FFFFFF;
  border: 1px solid rgba(41, 120, 255, 0.15);
  border-radius: 18px;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  box-shadow: 0 15px 35px rgba(20, 70, 160, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 4;
  transition: all 0.35s ease;
}

.feat-item[data-side="left"] .feat-text {
  margin-right: -30px;
  padding-right: 45px;
  text-align: right;
}

.feat-item[data-side="right"] .feat-text {
  margin-left: -30px;
  padding-left: 45px;
  text-align: left;
}

.feat-item:hover .feat-text {
  border-color: rgba(29, 224, 198, 0.4);
  box-shadow: 0 20px 45px rgba(20, 70, 160, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transform: translateY(-2px);
}

.feat-title {
  font-family: var(--font-headings);
  font-size: 20px;
  font-weight: 700;
  color: #0F4BB8;
  margin-bottom: 2px;
  transition: color 0.3s ease;
}

.feat-desc {
  font-family: var(--font-body);
  font-size: 14px;
  color: #42536D;
  margin: 0;
  line-height: 1.6;
}

.feat-item:hover .feat-title {
  color: #0F64E8;
}

/* Center Column & Hospital Animations */
.participate-center {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.hospital-wrapper {
  position: relative;
  width: 100%;
  max-width: 700px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 480px;
  margin: 0 auto;
}

.hospital-img {
  width: 95%;
  height: auto;
  max-width: 580px;
  position: relative;
  z-index: 3;
  filter: drop-shadow(0 40px 80px rgba(15, 100, 232, 0.12));
  animation: hospital-pulse-new 8s ease-in-out infinite;
}

@keyframes hospital-pulse-new {

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

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

.holo-rings-container {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translate(-50%, 0) rotateX(75deg);
  width: 680px;
  height: 680px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  pointer-events: none;
}

.holo-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(29, 224, 198, 0.25);
  box-shadow: 0 0 15px rgba(29, 224, 198, 0.05), inset 0 0 15px rgba(29, 224, 198, 0.05);
  animation: ring-pulse 6s infinite linear;
}

.holo-ring.r1 {
  width: 180px;
  height: 180px;
  animation-delay: 0s;
}

.holo-ring.r2 {
  width: 340px;
  height: 340px;
  animation-delay: 1.5s;
}

.holo-ring.r3 {
  width: 500px;
  height: 500px;
  animation-delay: 3s;
}

.holo-ring.r4 {
  width: 680px;
  height: 680px;
  animation-delay: 4.5s;
}

@keyframes ring-pulse {
  0% {
    transform: scale(0.85);
    opacity: 0.1;
    border-color: rgba(29, 224, 198, 0.15);
  }

  50% {
    opacity: 0.8;
    border-color: rgba(15, 100, 232, 0.5);
    box-shadow: 0 0 20px rgba(15, 100, 232, 0.25), inset 0 0 20px rgba(15, 100, 232, 0.25);
  }

  100% {
    transform: scale(1.15);
    opacity: 0;
    border-color: rgba(29, 224, 198, 0);
  }
}

/* Blueprint Connections Wrapper */
.connections-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
}

.connections-svg {
  width: 100%;
  height: 100%;
}

.conn-path {
  fill: none;
  stroke-dasharray: 12 28;
  stroke-dashoffset: 400;
  animation: energy-pulse 8s infinite linear;
  transition: stroke-width 0.3s ease;
}

@keyframes energy-pulse {
  0% {
    stroke-dashoffset: 400;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

/* Node Points at ends of paths */
.node-glow {
  display: none;
  position: absolute;
  width: 8px;
  height: 8px;
  background: #1DE0C6;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(29, 224, 198, 0.6);
  z-index: 4;
  animation: node-pulse 2s infinite alternate;
  pointer-events: none;
}

@keyframes node-pulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }

  100% {
    transform: scale(1.4);
    opacity: 1;
    box-shadow: 0 0 15px #0F64E8;
  }
}

.node-l1 {
  left: 440px;
  top: 100px;
  transform: translate(-50%, -50%);
}

.node-l2 {
  left: 440px;
  top: 300px;
  transform: translate(-50%, -50%);
}

.node-l3 {
  left: 440px;
  top: 500px;
  transform: translate(-50%, -50%);
}

.node-r1 {
  left: 1160px;
  top: 100px;
  transform: translate(-50%, -50%);
}

.node-r2 {
  left: 1160px;
  top: 300px;
  transform: translate(-50%, -50%);
}

.node-r3 {
  left: 1160px;
  top: 500px;
  transform: translate(-50%, -50%);
}

/* Feature hover connector path animation interaction */
.feat-item.item-l1:hover~.connections-wrapper .path-l1,
.feat-item.item-l2:hover~.connections-wrapper .path-l2,
.feat-item.item-l3:hover~.connections-wrapper .path-l3,
.feat-item.item-r1:hover~.connections-wrapper .path-r1,
.feat-item.item-r2:hover~.connections-wrapper .path-r2,
.feat-item.item-r3:hover~.connections-wrapper .path-r3 {
  stroke-width: 3.5px;
}

/* --- DISTRIBUTION --- */
#distribution {
  position: relative;
  width: 100%;
  padding: 90px 0;
  background: transparent;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dist-bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  background-color: #030D18;
  overflow: hidden;
}

.dist-bg-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('assets/why_bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(1.2) contrast(1.1);
  z-index: 1;
  opacity: 0.45;
  animation: bpBreathe 10s ease-in-out infinite;
}

.dist-dashboard-container {
  max-width: 1400px;
  width: 92%;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.dist-dashboard-inner {
  background: rgba(6, 21, 38, 0.45);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(24, 233, 245, 0.18);
  border-radius: 28px;
  padding: 40px 48px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), inset 0 0 30px rgba(24, 233, 245, 0.05);
}

.dist-dashboard-split {
  display: grid;
  grid-template-columns: 55fr 45fr;
  align-items: center;
  gap: 40px;
  margin-bottom: 28px;
}

.dist-split-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.dist-eyebrow-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.dist-eyebrow {
  font-family: var(--font-headings);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: #16E6E6;
}

.dist-accent-line {
  width: 40px;
  height: 2px;
  background-color: #16E6E6;
  box-shadow: 0 0 8px #16E6E6;
}

.dist-subtitle-hero {
  font-family: var(--font-headings);
  font-size: 18px;
  font-weight: 700;
  color: #B8C6D6;
  letter-spacing: 3px;
  margin-bottom: 12px;
}

.dist-brand-hero {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

.dist-brand-logo-main {
  height: 70px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 20px rgba(24, 233, 245, 0.25));
  border-radius: 10px;
}

.dist-views-hero {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dist-views-num {
  font-family: var(--font-headings);
  font-size: 40px;
  font-weight: 800;
  line-height: 1.1;
  background: linear-gradient(90deg, #18E9F5 0%, #2E8BFF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dist-views-label {
  font-family: var(--font-headings);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #B8C6D6;
}

.dist-split-right {
  position: relative;
  height: 290px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hud-concentric-rings {
  position: absolute;
  width: 300px;
  height: 300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
  opacity: 0.15;
}

.hud-ring {
  position: absolute;
  border: 1px solid #18E9F5;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.ring-outer {
  width: 300px;
  height: 300px;
  border-style: dashed;
  animation: rotatePlatform1 30s linear infinite;
}

.ring-middle {
  width: 210px;
  height: 210px;
  border-color: rgba(24, 233, 245, 0.4);
  animation: rotatePlatform2 20s linear infinite;
}

.ring-inner {
  width: 120px;
  height: 120px;
  border-style: dotted;
  animation: rotatePlatform1 15s linear infinite;
}

.hud-grid-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(rgba(24, 233, 245, 0.08) 1px, transparent 1px);
  background-size: 20px 20px;
  z-index: 1;
  pointer-events: none;
}

.dist-map-container {
  position: relative;
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  aspect-ratio: 1024 / 682;
  z-index: 2;
  filter: drop-shadow(0 0 20px rgba(24, 233, 245, 0.2));
}

.dist-map-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: brightness(1.5) contrast(1.1) drop-shadow(0 0 10px rgba(24, 233, 245, 0.35));
  opacity: 0.95;
}

/* Pulsing HTML Nodes styling */
.map-pulse-node {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.pulse-dot {
  width: 6px;
  height: 6px;
  background-color: #17E5F3;
  border-radius: 50%;
  box-shadow: 0 0 10px #17E5F3;
  z-index: 2;
  animation: dotPulse 2s infinite ease-in-out;
}

.pulse-ring {
  position: absolute;
  width: 24px;
  height: 24px;
  border: 1px solid #17E5F3;
  border-radius: 50%;
  z-index: 1;
  opacity: 0;
  animation: ringPulseHTML 2s infinite cubic-bezier(0.25, 0, 0, 1);
}

/* Delay pulsing animations slightly for organic rhythm */
.node-delhi .pulse-dot,
.node-delhi .pulse-ring {
  animation-delay: 0s;
}

.node-mumbai .pulse-dot,
.node-mumbai .pulse-ring {
  animation-delay: 0.4s;
}

.node-bangalore .pulse-dot,
.node-bangalore .pulse-ring {
  animation-delay: 0.8s;
}

.node-hyderabad .pulse-dot,
.node-hyderabad .pulse-ring {
  animation-delay: 1.2s;
}

.node-kolkata .pulse-dot,
.node-kolkata .pulse-ring {
  animation-delay: 1.6s;
}

@keyframes dotPulse {

  0%,
  100% {
    transform: scale(0.9);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.2);
    opacity: 1;
    box-shadow: 0 0 15px #17E5F3;
  }
}

@keyframes ringPulseHTML {
  0% {
    transform: scale(0.4);
    opacity: 0.8;
  }

  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

/* Standalone 100+ Global Streaming Platforms Hero USP Highlight Card */
.dist-global-usp-highlight {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
  padding: 16px 24px;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.12) 0%, rgba(13, 36, 61, 0.85) 100%);
  border: 1.5px solid rgba(0, 240, 255, 0.4);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 25px rgba(0, 240, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, box-shadow 0.4s ease;
  width: fit-content;
}

.dist-global-usp-highlight:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(0, 240, 255, 0.8);
  box-shadow: 0 15px 40px rgba(0, 240, 255, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.global-usp-icon-badge {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: rgba(0, 240, 255, 0.15);
  border: 1px solid rgba(0, 240, 255, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.25);
  transition: transform 0.3s ease, background 0.3s ease;
}

.dist-global-usp-highlight:hover .global-usp-icon-badge {
  transform: scale(1.08) rotate(5deg);
  background: rgba(0, 240, 255, 0.25);
}

.global-usp-icon-badge svg {
  width: 26px;
  height: 26px;
  stroke: #00f0ff;
  filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.6));
}

.global-usp-text {
  display: flex;
  flex-direction: column;
}

.global-usp-stat {
  font-family: var(--font-headings);
  font-size: 22px;
  font-weight: 800;
  color: #00f0ff;
  letter-spacing: 1px;
  line-height: 1.1;
  text-shadow: 0 0 12px rgba(0, 240, 255, 0.5);
}

.global-usp-label {
  font-family: var(--font-headings);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #C6D6EA;
  margin-top: 3px;
}

.dist-platform-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

@media (max-width: 1200px) {
  .dist-platform-row {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
  }
}

@media (max-width: 768px) {
  .dist-platform-row {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
}

@media (max-width: 480px) {
  .dist-platform-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

.dist-platform-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 16px;
  background: rgba(13, 36, 61, 0.4);
  border: 1px solid rgba(24, 233, 245, 0.12);
  border-radius: 16px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.dist-platform-card-global {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.08) 0%, rgba(13, 36, 61, 0.5) 100%);
  border: 1px solid rgba(0, 240, 255, 0.3);
}

.dist-platform-card:hover {
  transform: translateY(-5px);
  border-color: rgba(24, 233, 245, 0.5);
  background: rgba(13, 36, 61, 0.65);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 0 20px rgba(24, 233, 245, 0.2);
}

.text-cyan-glow {
  color: #00f0ff;
  font-weight: 700;
  text-shadow: 0 0 12px rgba(0, 240, 255, 0.4);
}

.platform-icon-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(24, 233, 245, 0.08);
  border: 1px solid rgba(24, 233, 245, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 10px rgba(24, 233, 245, 0.08);
}

.platform-card-img-solo {
  width: 80px;
  height: 80px;
  object-fit: contain;
  filter: drop-shadow(0 0 5px rgba(24, 233, 245, 0.4));
}

.platform-logo-insta,
.platform-logo-fb {
  width: 50px;
  height: 50px;
}

/* Luxury Platform Badge Card (Digikore Section) */
.luxury-platform-badge-card {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  padding: 16px 24px;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.08) 0%, rgba(8, 26, 47, 0.6) 100%);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), 0 0 15px rgba(0, 240, 255, 0.1);
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.luxury-platform-badge-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 240, 255, 0.5);
}

.platform-badge-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 240, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00f0ff;
}

.platform-badge-text {
  display: flex;
  flex-direction: column;
}

.badge-number {
  font-family: var(--font-headings, 'Outfit', sans-serif);
  font-size: 24px;
  font-weight: 800;
  color: #00f0ff;
  line-height: 1.1;
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
}

.badge-label {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

/* Stat Card inside Carousel Track */
.logo-stat-card {
  min-width: 170px;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.12) 0%, rgba(10, 30, 60, 0.8) 100%);
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.stat-card-num {
  font-family: var(--font-headings, 'Outfit', sans-serif);
  font-size: 26px;
  font-weight: 800;
  color: #00f0ff;
  text-shadow: 0 0 12px rgba(0, 240, 255, 0.5);
  line-height: 1.1;
}

.stat-card-label {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 12px;
  color: #FFFFFF;
  font-weight: 600;
  text-align: center;
  margin-top: 4px;
}

.fb-wrapper {
  background: #FFFFFF !important;
}

.dist-star-icon {
  width: 32px;
  height: 32px;
  filter: drop-shadow(0 0 5px rgba(24, 233, 245, 0.5));
}

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

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

.platform-name {
  font-family: var(--font-headings);
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
}

.platform-sub {
  font-family: var(--font-body);
  font-size: 11px;
  color: #B8C6D6;
}



.luxury-text-gradient {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   DIGIKORE ORIGINALS BLOCK (MEDICAL GURUS CYAN THEME)
   ========================================================================== */
.mg-digikore-originals-block {
  margin-top: 40px;
  padding-top: 36px;
  border-top: 1px solid rgba(24, 233, 245, 0.15);
  display: grid;
  grid-template-columns: 1.3fr 0.85fr;
  gap: 36px;
  align-items: center;
  position: relative;
  z-index: 2;
  width: 100%;
}

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

.mg-digikore-header {
  margin-bottom: 20px;
}

.mg-digikore-eyebrow-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 12px;
}

.mg-digikore-eyebrow-text {
  font-family: var(--font-headings);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mg-digikore-eyebrow-line {
  width: 32px;
  height: 2px;
  background: var(--gradient-primary);
  margin-top: 6px;
  border-radius: 2px;
}

.mg-digikore-title {
  font-family: var(--font-headings);
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin: 0 0 14px;
}

.mg-digikore-title-gradient {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-left: 2px;
}

.mg-digikore-desc {
  font-family: var(--font-body);
  font-size: 15.5px;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.65;
  margin: 0 0 20px;
  max-width: 620px;
}

.mg-digikore-follow-wrap {
  margin-bottom: 12px;
}

.mg-digikore-follow-label {
  display: inline-block;
  font-family: var(--font-headings);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--accent-cyan);
}

.mg-digikore-social-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 620px;
  width: 100%;
}

.mg-social-glass-link {
  text-decoration: none;
  cursor: pointer;
  color: #ffffff;
  padding: 16px 14px;
}

.mg-social-glass-link:hover {
  color: #ffffff;
}

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

.mg-digikore-logo-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 44px 32px;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.08) 0%, rgba(8, 26, 47, 0.85) 100%);
  border: 1.5px solid rgba(0, 240, 255, 0.35);
  border-radius: 18px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: none;
  max-width: 420px;
  width: 100%;
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.mg-digikore-logo-card:hover {
  transform: translateY(-5px);
  border-color: rgba(0, 240, 255, 0.75);
  box-shadow: none;
}

.mg-digikore-logo-glow {
  display: none;
}

.mg-digikore-logo-img {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 290px;
  height: auto;
  object-fit: contain;
  display: block;
  filter: none;
  transition: transform 0.35s ease, filter 0.35s ease;
}

.mg-digikore-logo-card:hover .mg-digikore-logo-img {
  transform: scale(1.04);
  filter: none;
}

@media (max-width: 991px) {
  .mg-digikore-originals-block {
    grid-template-columns: 1fr;
    gap: 30px;
    text-align: center;
    margin-top: 32px;
    padding-top: 30px;
  }

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

  .mg-digikore-eyebrow-row {
    align-items: center;
  }

  .mg-digikore-desc {
    margin: 0 auto 20px;
  }

  .mg-digikore-social-grid {
    margin: 0 auto;
  }

  .mg-digikore-logo-card {
    margin: 0 auto;
    padding: 32px 24px;
  }
}

@media (max-width: 576px) {
  .mg-digikore-social-grid {
    grid-template-columns: 1fr;
    max-width: 320px;
  }
}

/* --- ABOUT DIGIKORE STUDIOS --- */
.luxury-keynote-section {
  padding: 90px 0;
  background: #FFFFFF;
  position: relative;
  overflow: hidden;
}

.luxury-section-glow {
  position: absolute;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(21, 141, 255, 0.04) 0%, rgba(30, 234, 212, 0) 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
}

.luxury-container {
  max-width: 1600px;
  width: 92%;
  margin: 0 auto;
  background: #FFFFFF;
  border: 1px solid #E8EEF8;
  border-radius: 32px;
  padding: 80px;
  box-shadow: 0 40px 100px rgba(18, 38, 63, 0.06);
  position: relative;
  z-index: 2;
}

.luxury-studios-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

.luxury-studios-section .luxury-blue-divider {
  margin: 0 auto 36px auto;
}

.studios-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  width: 100%;
}

.studios-grid .logo-card {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 120px !important;
  flex: none !important;
  background: #FFFFFF !important;
  border: 1px solid #E8EEF8 !important;
  border-radius: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 10px 30px rgba(18, 38, 63, 0.02) !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  padding: 16px 22px !important;
  box-sizing: border-box !important;
}

.studios-grid .logo-card:hover {
  transform: translateY(-6px) !important;
  border-color: var(--primary-blue) !important;
  box-shadow: 0 20px 45px rgba(21, 141, 255, 0.12) !important;
}

.studios-grid .logo-card .logo-card-img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  transition: all 0.3s ease !important;
  display: block !important;
}

.studios-grid .logo-card:hover .logo-card-img {
  transform: scale(1.06) !important;
}

@media (max-width: 992px) {
  .studios-grid {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 14px !important;
  }

  .studios-grid .logo-card {
    height: 105px !important;
    padding: 12px 14px !important;
  }
}

@media (max-width: 786px) {
  .studios-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
  }

  .studios-grid .logo-card {
    height: 95px !important;
    padding: 12px 14px !important;
  }
}

@media (max-width: 480px) {
  .studios-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .studios-grid .logo-card {
    height: 85px !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
  }
}

.luxury-section-split {
  display: grid;
  grid-template-columns: minmax(0, 48fr) minmax(0, 52fr);
  gap: 50px;
  align-items: center;
}

.luxury-split-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.luxury-label-blue {
  font-family: var(--font-headings);
  font-size: 14px;
  font-weight: 700;
  color: var(--primary-blue);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.luxury-label-orange {
  font-family: var(--font-headings);
  font-size: 14px;
  font-weight: 700;
  color: #FF7A00;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.luxury-heading-main {
  font-family: var(--font-headings);
  font-size: clamp(32px, 3.4vw, 44px);
  font-weight: 800;
  color: var(--deep-navy);
  line-height: 1.15;
  margin-bottom: 24px;
  letter-spacing: -1px;
}

.luxury-heading-main .luxury-text-gradient {
  white-space: nowrap;
}

.luxury-blue-divider {
  width: 60px;
  height: 3px;
  background: var(--gradient-primary);
  margin-bottom: 28px;
  border-radius: 2px;
}

.luxury-desc-text {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  color: #5F6C85;
}

.luxury-split-right {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: flex-end;
}

.logo-carousel-viewport {
  overflow: hidden;
  width: calc(100% - 100px);
  min-width: 0;
}

.logo-carousel-track {
  display: flex;
  gap: 20px;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.logo-card {
  width: 180px;
  height: 210px;
  flex-shrink: 0;
  background: #FFFFFF;
  border: 1px solid #E8EEF8;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(18, 38, 63, 0.02);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  padding: 20px;
}

.logo-card:hover {
  transform: translateY(-8px);
  border-color: var(--primary-blue);
  box-shadow: 0 20px 45px rgba(21, 141, 255, 0.12);
}

.logo-card-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: all 0.3s ease;
}

.logo-card:hover .logo-card-img {
  transform: scale(1.05);
}

.logo-card-wordmark {
  font-family: var(--font-headings);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.5px;
  transition: transform 0.3s ease;
}

.logo-card:hover .logo-card-wordmark {
  transform: scale(1.05);
}

.netflix-color {
  color: #E50914;
}

.prime-color {
  color: #00A8E1;
}

.prime-color .video-word {
  color: #5F6C85;
  font-weight: 300;
}

.sonyliv-wordmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.sony-part {
  font-size: 14px;
  font-weight: 800;
  color: #000000;
  letter-spacing: 1px;
}

.liv-part {
  font-size: 20px;
  font-weight: 900;
  color: #FF2525;
  text-transform: uppercase;
  font-style: italic;
  background: linear-gradient(90deg, #F9D423 0%, #FF4E50 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.zee5-wordmark {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}

.zee-part {
  font-family: var(--font-headings);
  font-size: 15px;
  font-weight: 800;
  color: #FFFFFF;
}

.carousel-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid #E8EEF8;
  box-shadow: 0 5px 15px rgba(18, 38, 63, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-blue);
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
  z-index: 10;
}

.carousel-arrow:hover {
  background: var(--primary-blue);
  color: #FFFFFF;
  border-color: var(--primary-blue);
  box-shadow: 0 5px 15px rgba(21, 141, 255, 0.3);
}

.carousel-arrow svg {
  width: 18px;
  height: 18px;
}

.luxury-middle-separator {
  width: 100%;
  height: 1px;
  background-color: #E8EEF8;
  margin: 50px 0;
}

.luxury-work-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.luxury-work-heading,
.luxury-work-title {
  margin-bottom: 24px;
}

.luxury-work-heading .luxury-work-team {
  display: block;
}

.luxury-work-heading .luxury-work-worked {
  display: inline;
}

.luxury-work-heading .luxury-work-on {
  display: inline;
}

.luxury-work-subtitle {
  font-family: var(--font-body);
  font-size: 20px;
  color: #5F6C85;
  margin-bottom: 40px;
}

.luxury-posters-showcase {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
  width: 100%;
  margin-bottom: 0;
  text-align: left;
}

.luxury-poster-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  cursor: pointer;
}

.poster-image-wrapper {
  width: 100%;
  aspect-ratio: 2/3;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 12px 35px rgba(18, 38, 63, 0.04);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.poster-image-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.luxury-poster-card:hover .poster-image-wrapper {
  transform: translateY(-10px) scale(1.04);
  box-shadow: 0 20px 45px rgba(21, 141, 255, 0.12), 0 0 25px rgba(30, 234, 212, 0.12);
}

.luxury-poster-card:hover .poster-image-img {
  transform: scale(1.06);
}

.poster-info-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  text-align: center;
}

.poster-title-text {
  font-family: var(--font-headings);
  font-size: 24px;
  font-weight: 700;
  color: var(--deep-navy);
}

.poster-category-text {
  font-family: var(--font-body);
  font-size: 14px;
  color: #5F6C85;
}

.luxury-portfolio-btn-wrap {
  margin-top: 20px;
}

.luxury-portfolio-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 36px;
  border-radius: 28px;
  border: 2px solid var(--primary-blue);
  background: #FFFFFF;
  font-family: var(--font-headings);
  font-size: 16px;
  font-weight: 700;
  color: var(--primary-blue);
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 12px rgba(21, 141, 255, 0.04);
}

.luxury-portfolio-btn:hover {
  background: var(--primary-blue);
  color: #FFFFFF;
  box-shadow: 0 8px 20px rgba(21, 141, 255, 0.25);
  transform: translateY(-2px);
}

.dot-pattern {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  opacity: 0.85;
}

.dot-pattern-left {
  bottom: 24px;
  left: 24px;
}

.dot-pattern-right {
  bottom: 24px;
  right: 24px;
}



/* --- MEET THE PRODUCER SECTION --- */
.producer-section {
  padding: 90px 0;
  background: #07182C;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.hud-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.hud-background::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('assets/why_bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(1.2) contrast(1.1);
  z-index: 1;
  opacity: 0.45;
  animation: bpBreathe 10s ease-in-out infinite;
}

.hud-grid {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(rgba(33, 212, 253, 0.15) 1px, transparent 1px);
  background-size: 30px 30px;
}

.hud-dots {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle, rgba(33, 212, 253, 0.2) 2px, transparent 2px);
  background-size: 80px 80px;
}

.hud-hexagon {
  position: absolute;
  border: 1.5px solid #21D4FD;
  opacity: 0.5;
  width: 250px;
  height: 250px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.hud-hex-1 {
  top: 5%;
  left: 5%;
  transform: rotate(15deg);
}

.hud-hex-2 {
  bottom: 10%;
  right: 5%;
  transform: rotate(-25deg);
}

.hud-circle {
  position: absolute;
  border: 1px dashed #21D4FD;
  border-radius: 50%;
  opacity: 0.4;
}

.hud-circ-1 {
  width: 350px;
  height: 350px;
  top: 20%;
  right: 10%;
  animation: spin 60s linear infinite;
}

.hud-circ-2 {
  width: 180px;
  height: 180px;
  bottom: 15%;
  left: 15%;
  animation: spin-reverse 45s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes spin-reverse {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }
}

.producer-container {
  max-width: 1600px;
  width: 92%;
  margin: 0 auto;
  padding: 0;
  position: relative;
  z-index: 2;
}

.producer-split {
  display: grid;
  grid-template-columns: 52fr 48fr;
  gap: 50px;
  align-items: center;
  margin-bottom: 40px;
}

.producer-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.producer-eyebrow {
  font-family: var(--font-headings);
  font-size: 13px;
  font-weight: 700;
  color: #21D4FD;
  letter-spacing: 3px;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 0;
}

.producer-divider {
  width: 45px;
  height: 3px;
  background: linear-gradient(90deg, #21D4FD 0%, #2D7FF9 100%);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(33, 212, 253, 0.4);
  margin: 10px 0 16px 0;
}

.producer-heading {
  margin-top: 0;
  margin-bottom: 24px;
}

.producer-text-gradient {
  background: linear-gradient(135deg, #21D4FD 0%, #2D7FF9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline;
}

.producer-cards-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.producer-info-card {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 24px;
  background: #0D223D;
  border: 1.5px solid rgba(30, 79, 134, 0.25);
  border-radius: 18px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  box-shadow: 0 8px 30px rgba(7, 24, 44, 0.3);
}

.producer-info-card:hover {
  transform: translateY(-4px);
  border-color: #21D4FD;
  box-shadow: 0 15px 40px rgba(33, 212, 253, 0.08);
}

.producer-icon-wrap {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1.5px solid rgba(33, 212, 253, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #21D4FD;
  flex-shrink: 0;
  background: rgba(33, 212, 253, 0.05);
  transition: all 0.3s ease;
}

.producer-info-card:hover .producer-icon-wrap {
  background: #21D4FD;
  color: #07182C;
  box-shadow: 0 0 15px rgba(33, 212, 253, 0.4);
  transform: scale(1.05);
}

.producer-icon-wrap svg,
.producer-icon-wrap img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.producer-description {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  margin-top: 4px;
}

.producer-desc {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
}

.producer-info-text p {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.6;
  color: #C6D6EA;
  margin: 0;
}

.producer-right {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.producer-image-wrapper {
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: 24px;
  overflow: hidden;
  border: 1.5px solid rgba(30, 79, 134, 0.25);
  box-shadow: 0 25px 60px rgba(7, 24, 44, 0.4);
}

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

.producer-right:hover .producer-image {
  transform: scale(1.04);
}

.producer-usp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  width: 100%;
}

.producer-usp-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(8, 26, 47, 0.85) 0%, rgba(4, 16, 30, 0.95) 100%);
  border: 1px solid rgba(0, 240, 255, 0.28);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

.producer-usp-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 240, 255, 0.65);
  box-shadow: 0 15px 35px rgba(0, 240, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.usp-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.12);
  transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.producer-usp-card:hover .usp-icon-box {
  transform: scale(1.08);
  background: rgba(0, 240, 255, 0.16);
  border-color: rgba(0, 240, 255, 0.65);
}

.usp-icon-box img,
.usp-icon-box svg {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.usp-card-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.usp-num-row {
  display: flex;
  align-items: baseline;
  gap: 1px;
}

.prod-stat-number {
  font-family: var(--font-headings);
  font-size: 24px;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.1;
  transition: text-shadow 0.3s ease;
}

.producer-usp-card:hover .prod-stat-number {
  text-shadow: 0 0 12px rgba(0, 240, 255, 0.45);
}

.prod-stat-plus {
  font-family: var(--font-headings);
  font-size: 20px;
  font-weight: 800;
  color: #00f0ff;
  margin-left: 1px;
}

.usp-label-text {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  color: #94A3B8;
  margin-top: 3px;
  line-height: 1.35;
}

/* Entrance Animations for Meet the Producer */
.producer-section .producer-info-card {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.producer-section.fade-up-active .producer-info-card {
  opacity: 1;
  transform: translateY(0);
}

.producer-section.fade-up-active .producer-info-card:nth-child(1) {
  transition-delay: 0.1s;
}

.producer-section.fade-up-active .producer-info-card:nth-child(2) {
  transition-delay: 0.25s;
}

.producer-section.fade-up-active .producer-info-card:nth-child(3) {
  transition-delay: 0.4s;
}

.producer-section.fade-up-active .producer-info-card:nth-child(4) {
  transition-delay: 0.55s;
}

.producer-section .producer-image-wrapper {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.producer-section.fade-up-active .producer-image-wrapper {
  opacity: 1;
  transform: scale(1);
}



/* --- PREMIUM PRODUCTION PROCESS REDESIGN --- */
.premium-process-section {
  padding: 90px 0;
  background: #FFFFFF;
  position: relative;
  overflow: hidden;
  font-family: 'Poppins', sans-serif !important;
}

/* Poppins overrides for section typography */
.premium-process-section h2,
.premium-process-section h3,
.premium-process-section h4,
.premium-process-section p,
.premium-process-section span {
  font-family: 'Poppins', sans-serif !important;
}

.premium-process-section .process-decorations {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.premium-process-section .decor-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.04;
  /* Keep opacity under 6% */
}

.premium-process-section .decor-blob-1 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, #00D8FF 0%, #2563FF 100%);
  top: -10%;
  left: -10%;
}

.premium-process-section .decor-blob-2 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, #2563FF 0%, #00D8FF 100%);
  bottom: -10%;
  right: -10%;
}

.premium-process-section .decor-dots {
  position: absolute;
  width: 150px;
  height: 150px;
  background-image: radial-gradient(rgba(37, 99, 255, 0.15) 1.5px, transparent 1.5px);
  background-size: 15px 15px;
  opacity: 0.35;
}

.premium-process-section .decor-dots-1 {
  top: 15%;
  right: 8%;
}

.premium-process-section .decor-dots-2 {
  bottom: 15%;
  left: 8%;
}

.premium-process-section .container-premium {
  max-width: 1720px;
  width: 94%;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.premium-process-section .process-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 80px auto;
}

.premium-process-section .process-eyebrow-tag {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  background: linear-gradient(90deg, #00D8FF, #2563FF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 18px;
}

.premium-process-section .process-main-heading {
  margin-bottom: 20px;
}

.premium-process-section .process-text-gradient {
  background: linear-gradient(135deg, #21D4FD 0%, #2D7FF9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline;
}

.premium-process-section .process-subtitle {
  font-size: 1.15rem;
  color: #4A5B6E;
  font-weight: 400;
  line-height: 1.6;
}

.premium-process-section .process-timeline-container {
  position: relative;
  width: 100%;
}

/* Connecting Line */
.premium-process-section .timeline-connecting-line {
  position: absolute;
  top: 36px;
  /* center of 72px circles */
  left: 10%;
  right: 10%;
  height: 4px;
  background: linear-gradient(90deg, #00D8FF, #2563FF);
  border-radius: 4px;
  z-index: 1;
}

/* Timeline Pulse Dot Animation */
.premium-process-section .timeline-pulse-dot {
  position: absolute;
  top: 50%;
  left: 0;
  width: 12px;
  height: 12px;
  background: #00D8FF;
  border-radius: 50%;
  transform: translateY(-50%);
  box-shadow: 0 0 15px #00D8FF, 0 0 30px #2563FF;
  animation: pulseDotProgress 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes pulseDotProgress {
  0% {
    left: 0%;
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  95% {
    opacity: 1;
  }

  100% {
    left: 100%;
    opacity: 0;
  }
}

.premium-process-section .process-grid {
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 2;
  gap: 30px;
}

.premium-process-section .process-node-card-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Timeline Connector Group (Circle + Line to Card) */
.premium-process-section .timeline-connector-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  position: relative;
}

.premium-process-section .timeline-circle {
  width: 72px;
  height: 72px;
  background: #FFFFFF;
  border: 4px solid #FFFFFF;
  outline: 2px solid #2563FF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  color: #2563FF;
  box-shadow: 0 8px 24px rgba(37, 99, 255, 0.12);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  z-index: 3;
}

.premium-process-section .process-node-card-wrap:hover .timeline-circle {
  outline-color: #00D8FF;
  box-shadow: 0 8px 30px rgba(0, 216, 255, 0.3);
  transform: translateY(-2px);
}

.premium-process-section .vertical-connector-line {
  width: 2px;
  height: 60px;
  background: linear-gradient(180deg, #2563FF, rgba(37, 99, 255, 0.2));
  position: relative;
  z-index: 2;
}

.premium-process-section .vertical-connector-dot {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  width: 8px;
  height: 8px;
  background: #2563FF;
  border-radius: 50%;
  border: 2px solid #FFFFFF;
  box-shadow: 0 0 8px rgba(37, 99, 255, 0.4);
}

.premium-process-section .process-node-card-wrap:hover .vertical-connector-line {
  background: linear-gradient(180deg, #00D8FF, rgba(0, 216, 255, 0.3));
}

.premium-process-section .process-node-card-wrap:hover .vertical-connector-dot {
  background: #00D8FF;
  box-shadow: 0 0 10px rgba(0, 216, 255, 0.8);
}

/* Premium Step Card */
.premium-process-section .premium-step-card {
  width: 100%;
  max-width: 320px;
  min-height: 270px;
  background: #FFFFFF;
  border-radius: 24px;
  padding: 35px 28px;
  box-shadow: 0 10px 30px rgba(7, 28, 51, 0.04);
  position: relative;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 1px solid rgba(7, 28, 51, 0.03);
  overflow: hidden;
  margin-top: 15px;
}

/* Subtle Gradient Glow inside Card */
.premium-process-section .step-card-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0, 216, 255, 0.02) 0%, rgba(37, 99, 255, 0.02) 100%);
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 1;
}

/* Hover glow borders */
.premium-process-section .premium-step-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  padding: 1.5px;
  background: linear-gradient(135deg, #00D8FF, #2563FF);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  z-index: 3;
}

.premium-process-section .premium-step-card>* {
  position: relative;
  z-index: 2;
}

.premium-process-section .process-node-card-wrap:hover .premium-step-card {
  transform: translateY(-12px);
  box-shadow: 0 20px 45px rgba(37, 99, 255, 0.1);
  border-color: transparent;
}

.premium-process-section .process-node-card-wrap:hover .premium-step-card::after {
  opacity: 1;
}

.premium-process-section .process-node-card-wrap:hover .step-card-glow {
  opacity: 1;
}

/* Premium Icon Styles */
.premium-process-section .step-icon-outer-container {
  position: relative;
  width: 72px;
  height: 72px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.premium-process-section .step-icon-glow {
  position: absolute;
  inset: -4px;
  background: radial-gradient(circle, rgba(0, 216, 255, 0.25) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.5s ease;
  border-radius: 50%;
}

.premium-process-section .step-icon-wrapper-circle {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(37, 99, 255, 0.04);
  border: 1px solid rgba(37, 99, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2563FF;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.premium-process-section .process-node-card-wrap:hover .step-icon-wrapper-circle {
  background: linear-gradient(135deg, rgba(0, 216, 255, 0.1), rgba(37, 99, 255, 0.1));
  border-color: rgba(37, 99, 255, 0.25);
  color: #2563FF;
  transform: rotate(6deg) scale(1.05);
}

.premium-process-section .process-node-card-wrap:hover .step-icon-glow {
  opacity: 1;
}

.premium-process-section .premium-outlined-icon {
  width: 32px;
  height: 32px;
  stroke: url(#step-gradient-id) !important;
  /* Dynamic svg stroke gradient support */
}

.premium-process-section .premium-step-icon {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

/* Step Card Title */
.premium-process-section .step-card-title {
  font-size: 19px;
  font-weight: 700;
  color: #071C33;
  margin-bottom: 6px;
}

/* Expanding Underline */
.premium-process-section .step-card-underline-wrapper {
  width: 40px;
  height: 3px;
  background: rgba(37, 99, 255, 0.1);
  margin-bottom: 16px;
  border-radius: 2px;
  overflow: hidden;
  transition: width 0.4s ease;
}

.premium-process-section .step-card-underline-bar {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #00D8FF, #2563FF);
  transform: translateX(-100%);
  transition: transform 0.4s ease;
}

.premium-process-section .process-node-card-wrap:hover .step-card-underline-wrapper {
  width: 70px;
}

.premium-process-section .process-node-card-wrap:hover .step-card-underline-bar {
  transform: translateX(0);
}

/* Card Description */
.premium-process-section .step-card-desc {
  font-size: 14px;
  color: #647589;
  line-height: 1.55;
  font-weight: 400;
}

/* Entrance Animations - cascade delays */
.premium-process-section .animate-on-scroll.fade-up-active .step-1-delay {
  transition-delay: 0.1s;
}

.premium-process-section .animate-on-scroll.fade-up-active .step-2-delay {
  transition-delay: 0.25s;
}

.premium-process-section .animate-on-scroll.fade-up-active .step-3-delay {
  transition-delay: 0.4s;
}

.premium-process-section .animate-on-scroll.fade-up-active .step-4-delay {
  transition-delay: 0.55s;
}

.premium-process-section .animate-on-scroll.fade-up-active .step-5-delay {
  transition-delay: 0.7s;
}



/* --- FAQ SECTION --- */
.premium-faq-section {
  position: relative;
  background-color: #07182C;
  padding: 90px 0;
  overflow: hidden;
  z-index: 1;
}

/* Container */
.premium-faq-section .faq-max-container {
  width: 92%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0;
  position: relative;
  z-index: 2;
}

/* Header */
.premium-faq-section .faq-header {
  text-align: center;
  margin-bottom: 35px;
}

.premium-faq-section .faq-eyebrow-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-bottom: 20px;
}

.premium-faq-section .faq-eyebrow-line {
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 216, 255, 0.4));
}

.premium-faq-section .faq-eyebrow-wrapper .faq-eyebrow-line:last-child {
  background: linear-gradient(90deg, rgba(0, 216, 255, 0.4), transparent);
}

.premium-faq-section .faq-eyebrow-tag {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 4px;
  background: linear-gradient(90deg, #00D8FF, #2563FF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.premium-faq-section .faq-main-heading {
  margin-bottom: 20px;
}

.premium-faq-section .faq-heading-gradient {
  background: linear-gradient(135deg, #21D4FD 0%, #2D7FF9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline;
}

.premium-faq-section .faq-subtitle {
  font-size: 1.15rem;
  color: #B7C3D2;
  font-weight: 400;
  line-height: 1.6;
}

/* FAQ Grid */
.premium-faq-section .faq-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 60px;
}

.premium-faq-section .faq-card {
  background: linear-gradient(135deg, #0B2142 0%, #08182E 100%);
  border: 1px solid rgba(0, 216, 255, 0.15);
  border-radius: 20px;
  padding: 16px 24px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow:
    0 10px 30px rgba(7, 25, 47, 0.4),
    inset 0 1px 1px rgba(255, 255, 255, 0.05);
}

.premium-faq-section .faq-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 10% 20%, rgba(33, 212, 253, 0.03) 0%, transparent 60%);
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.premium-faq-section .faq-card:hover {
  border-color: rgba(0, 216, 255, 0.8);
  transform: translateY(-6px);
  box-shadow:
    0 15px 35px rgba(0, 216, 255, 0.15),
    inset 0 1px 1px rgba(255, 255, 255, 0.1);
  background: linear-gradient(135deg, #0f2c56 0%, #0b203d 100%);
}

.premium-faq-section .faq-card-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.premium-faq-section .faq-question-text {
  font-size: 20px;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.25;
  transition: color 0.3s ease;
  pointer-events: none;
}

.premium-faq-section .faq-plus-btn {
  width: 26px;
  height: 26px;
  border: 1px solid rgba(0, 216, 255, 0.4);
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.premium-faq-section .plus-line {
  position: absolute;
  background-color: rgba(0, 216, 255, 0.9);
  transition: transform 0.3s ease;
  pointer-events: none;
}

.premium-faq-section .plus-line.horizontal {
  width: 10px;
  height: 1.5px;
}

.premium-faq-section .plus-line.vertical {
  width: 1.5px;
  height: 10px;
}

.premium-faq-section .faq-card:hover .faq-plus-btn {
  border-color: rgba(0, 216, 255, 1);
  box-shadow: 0 0 10px rgba(0, 216, 255, 0.5);
  transform: scale(1.1);
}

/* Accordion Open Styling */
.premium-faq-section .faq-card.active .faq-plus-btn {
  transform: rotate(45deg);
  border-color: rgba(0, 216, 255, 0.8);
}

.premium-faq-section .faq-card.active .faq-question-text {
  color: rgba(0, 216, 255, 1);
}

.premium-faq-section .faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.premium-faq-section .faq-answer-inner {
  padding-top: 12px;
  font-size: 15px;
  color: #B7C3D2;
  line-height: 1.8;
}

/* Scroll Delay Animations */
.premium-faq-section .animate-on-scroll.fade-up-active .faq-card:nth-child(1) {
  transition-delay: 0.1s;
}

.premium-faq-section .animate-on-scroll.fade-up-active .faq-card:nth-child(2) {
  transition-delay: 0.2s;
}

.premium-faq-section .animate-on-scroll.fade-up-active .faq-card:nth-child(3) {
  transition-delay: 0.3s;
}

.premium-faq-section .animate-on-scroll.fade-up-active .faq-card:nth-child(4) {
  transition-delay: 0.4s;
}

.premium-faq-section .animate-on-scroll.fade-up-active .faq-card:nth-child(5) {
  transition-delay: 0.5s;
}

.premium-faq-section .animate-on-scroll.fade-up-active .faq-card:nth-child(6) {
  transition-delay: 0.6s;
}

/* Bottom CTA Panel */
.premium-faq-section .faq-cta-panel {
  background: rgba(11, 33, 66, 0.35);
  border: 1px solid rgba(0, 216, 255, 0.15);
  border-radius: 20px;
  padding: 30px 45px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.2),
    inset 0 1px 1px rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
}

.premium-faq-section .faq-cta-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.premium-faq-section .faq-cta-accent-line {
  width: 3px;
  height: 40px;
  background: linear-gradient(180deg, #21D4FD 0%, #2D7FF9 100%);
  border-radius: 2px;
}

.premium-faq-section .faq-cta-title {
  font-size: 24px;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 4px;
}

.premium-faq-section .faq-cta-subtitle {
  font-size: 16px;
  color: #B7C3D2;
  margin: 0;
}

.premium-faq-section .faq-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #00D8FF 0%, #2563FF 100%);
  color: #FFFFFF;
  font-weight: 600;
  font-size: 16px;
  padding: 16px 32px;
  border-radius: 16px;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(37, 99, 255, 0.3);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.premium-faq-section .faq-cta-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(37, 99, 255, 0.5);
  background: linear-gradient(135deg, #0ae0ff 0%, #3b74ff 100%);
}

.premium-faq-section .faq-btn-arrow {
  transition: transform 0.3s ease;
}

.premium-faq-section .faq-cta-btn:hover .faq-btn-arrow {
  transform: translateX(4px);
}



/* --- PREMIUM CTA SECTION --- */
.premium-cta-section {
  position: relative;
  background-color: #FFFFFF;
  min-height: auto;
  padding: 90px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 1;
}

/* Background decorations */
.premium-cta-section .cta-bg-decorations {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.premium-cta-section .cta-glow-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 900px;
  height: 600px;
  background: radial-gradient(circle, rgba(0, 216, 255, 0.12) 0%, transparent 70%);
  z-index: 1;
}

.premium-cta-section .cta-dots-matrix {
  position: absolute;
  width: 140px;
  height: 140px;
  background-image: radial-gradient(rgba(0, 216, 255, 0.08) 1.5px, transparent 1.5px);
  background-size: 16px 16px;
  z-index: 1;
}

.premium-cta-section .matrix-left {
  bottom: 10%;
  left: 5%;
}

.premium-cta-section .matrix-right {
  top: 10%;
  right: 5%;
}

.premium-cta-section .cta-hud-circle {
  position: absolute;
  border: 1px dashed rgba(0, 216, 255, 0.04);
  border-radius: 50%;
  z-index: 1;
}

.premium-cta-section .circ-left {
  width: 450px;
  height: 450px;
  top: -100px;
  left: -150px;
}

.premium-cta-section .circ-right {
  width: 550px;
  height: 550px;
  bottom: -150px;
  right: -150px;
  border-style: solid;
}

.premium-cta-section .cta-medical-grid {
  position: absolute;
  inset: 0;
  background-size: 80px 80px;
  background-image:
    linear-gradient(to right, rgba(0, 216, 255, 0.01) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 216, 255, 0.01) 1px, transparent 1px);
  z-index: 1;
}

.premium-cta-section .cta-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.premium-cta-section .cta-particles .cta-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background-color: rgba(33, 212, 253, 0.25);
  border-radius: 50%;
  animation: ctaFloatParticle 20s infinite linear;
}

.premium-cta-section .cp-1 {
  top: 25%;
  left: 20%;
  animation-delay: 0s;
}

.premium-cta-section .cp-2 {
  top: 75%;
  left: 15%;
  animation-delay: -4s;
  width: 6px;
  height: 6px;
}

.premium-cta-section .cp-3 {
  top: 30%;
  right: 15%;
  animation-delay: -8s;
}

.premium-cta-section .cp-4 {
  top: 70%;
  right: 25%;
  animation-delay: -12s;
}

.premium-cta-section .cp-5 {
  top: 15%;
  left: 45%;
  animation-delay: -2s;
}

@keyframes ctaFloatParticle {
  0% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0;
  }

  10% {
    opacity: 0.7;
  }

  90% {
    opacity: 0.7;
  }

  100% {
    transform: translateY(-80px) translateX(40px) scale(0.8);
    opacity: 0;
  }
}

.premium-cta-section .cta-ecg-wrapper {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8%;
  height: 100px;
  z-index: 1;
}

.premium-cta-section .cta-ecg-svg {
  width: 100%;
  height: 100%;
}

.premium-cta-section .cta-dna-wrapper {
  position: absolute;
  left: 4%;
  top: 15%;
  width: 120px;
  height: 240px;
  z-index: 1;
  opacity: 0.8;
}

.premium-cta-section .cta-dna-svg {
  width: 100%;
  height: 100%;
}



/* Container */
.premium-cta-section .cta-max-container {
  width: 92%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0;
  position: relative;
  z-index: 2;
}

/* Glass Panel */
.premium-cta-section .cta-main-glass-panel {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid #D9EBFF;
  border-radius: 36px;
  padding: 80px;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    0 30px 60px rgba(11, 35, 70, 0.04),
    inset 0 1px 2px rgba(255, 255, 255, 0.95);
  display: grid;
  grid-template-columns: 60fr 40fr;
  gap: 80px;
  align-items: center;
}

/* Blended Right Side Image */
.premium-cta-section .cta-right-column {
  position: absolute;
  top: 0;
  right: 0;
  width: 45%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}

.premium-cta-section .cta-glass-bg-image {
  position: absolute;
  inset: 0;
  background-image: url('assets/hospital_consultation.jpg');
  background-size: cover;
  background-position: right center;
  border-radius: 0 36px 36px 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 0) 100%);
}

/* Content Inner */
.premium-cta-section .cta-content-inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

/* Heading Area */
.premium-cta-section .cta-eyebrow-wrapper {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 24px;
}

.premium-cta-section .cta-eyebrow-line {
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 216, 255, 0.5));
}

.premium-cta-section .cta-eyebrow-wrapper .cta-eyebrow-line:last-child {
  background: linear-gradient(90deg, rgba(0, 216, 255, 0.5), transparent);
}

.premium-cta-section .cta-eyebrow-tag {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 4px;
  background: linear-gradient(90deg, #00D8FF, #2563FF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.premium-cta-section .cta-main-heading {
  margin-bottom: 24px;
}

.premium-cta-section .cta-heading-gradient {
  background: linear-gradient(135deg, #00D9FF 0%, #2563FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline;
}

.premium-cta-section .cta-description {
  max-width: 560px;
  width: 100%;
  font-size: 20px;
  color: #7A8B9E;
  line-height: 1.8;
  margin-bottom: 45px;
  font-weight: 400;
}

/* CTA Buttons */
.premium-cta-section .cta-buttons-wrap {
  display: flex;
  justify-content: flex-start;
  gap: 24px;
  margin-bottom: 70px;
  flex-wrap: wrap;
}

.premium-cta-section .cta-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #00D9FF 0%, #2563FF 100%);
  color: #FFFFFF;
  font-weight: 600;
  font-size: 16px;
  padding: 16px 36px;
  border-radius: 99px;
  text-decoration: none;
  box-shadow: 0 8px 25px rgba(37, 99, 255, 0.25);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.premium-cta-section .cta-btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #2563FF 0%, #00D9FF 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
  border-radius: 99px;
}

.premium-cta-section .cta-btn-primary>* {
  position: relative;
  z-index: 2;
}

.premium-cta-section .cta-btn-primary:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 35px rgba(0, 216, 255, 0.4);
}

.premium-cta-section .cta-btn-primary:hover::before {
  opacity: 1;
}

.premium-cta-section .cta-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(90deg, #00d2ff 0%, #0066ff 100%);
  border: 2px solid rgba(255, 255, 255, 0.45);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 16.5px;
  padding: 16px 36px;
  border-radius: 99px;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 8px 25px rgba(0, 114, 255, 0.4), 0 0 15px rgba(0, 212, 255, 0.25);
  cursor: pointer;
}

.premium-cta-section .cta-btn-secondary:hover {
  transform: translateY(-4px);
  background: linear-gradient(90deg, #00e0ff 0%, #0052e6 100%);
  border-color: rgba(255, 255, 255, 0.75);
  box-shadow: 0 12px 35px rgba(0, 114, 255, 0.6), 0 0 25px rgba(0, 212, 255, 0.45);
}

/* Trust Metrics Row */
.premium-cta-section .cta-metrics-row {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid rgba(37, 99, 255, 0.1);
  width: 100%;
  max-width: 560px;
}

.premium-cta-section .metric-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.premium-cta-section .metric-num {
  font-size: 24px;
  font-weight: 800;
  color: #2563FF;
  line-height: 1.2;
}

.premium-cta-section .metric-lbl {
  font-size: 12px;
  font-weight: 600;
  color: #7A8B9E;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 2px;
}

.premium-cta-section .metric-sep {
  font-size: 24px;
  color: rgba(37, 99, 255, 0.15);
  font-weight: 300;
}

.premium-cta-section .btn-arrow {
  transition: transform 0.3s ease;
}

.premium-cta-section .cta-btn-primary:hover .btn-arrow,
.premium-cta-section .cta-btn-secondary:hover .btn-arrow {
  transform: translateX(5px);
}

/* Bottom Information Panel Wrapper */
.premium-cta-section .cta-info-panel-wrapper {
  margin-top: -50px;
  position: relative;
  z-index: 10;
  width: 100%;
  padding: 0 40px;
}

.premium-cta-section .cta-info-panel {
  background: #FFFFFF;
  border: 1px solid #D9EBFF;
  border-radius: 28px;
  padding: 35px 45px;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  box-shadow: 0 20px 50px rgba(11, 35, 70, 0.06);
}

.premium-cta-section .cta-info-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 0 10px;
}

.premium-cta-section .info-title {
  font-size: 18px;
  font-weight: 700;
  color: #0B2346;
}

.premium-cta-section .info-underline {
  width: 30px;
  height: 2px;
  background: #2563FF;
  border-radius: 2px;
  display: block;
}

.premium-cta-section .info-subtitle {
  font-size: 14px;
  color: #7A8B9E;
  line-height: 1.5;
}

.premium-cta-section .cta-info-divider {
  width: 1px;
  height: 50px;
  background: #E1EAF5;
}

/* Delay Animations for scroll entrance */
.premium-cta-section .animate-on-scroll.fade-up-active .cta-eyebrow-wrapper {
  transition-delay: 0.1s;
}

.premium-cta-section .animate-on-scroll.fade-up-active .cta-main-heading {
  transition-delay: 0.2s;
}

.premium-cta-section .animate-on-scroll.fade-up-active .cta-description {
  transition-delay: 0.3s;
}

.premium-cta-section .animate-on-scroll.fade-up-active .cta-buttons-wrap {
  transition-delay: 0.4s;
}

.premium-cta-section .animate-on-scroll.fade-up-active .cta-info-panel {
  transition-delay: 0.5s;
}



/* --- LUXURY FOOTER --- */
/* --- LUXURY FOOTER --- */
.luxury-footer {
  position: relative;
  background-color: #030f21;
  padding: 35px 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  z-index: 10;
}

.footer-new-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Top Section */
.footer-logos-col {
  display: flex;
  align-items: center;
  gap: 20px;
}

.footer-brand-logo {
  height: 28px;
  width: auto;
  object-fit: contain;
}

.footer-logo-divider {
  width: 1px;
  height: 20px;
  background-color: rgba(255, 255, 255, 0.15);
}

.footer-info-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}

.footer-email-link {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: #f59e0b;
  /* Orange/Gold email link */
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-email-link:hover {
  color: #fbbf24;
}

.footer-address-text {
  font-family: var(--font-body);
  font-size: 11px;
  color: #64748b;
  margin: 0;
  letter-spacing: 0.2px;
}

.footer-copyright-text {
  font-family: var(--font-body);
  font-size: 11px;
  color: #475569;
  margin: 0;
}

.footer-nse-col {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nse-badge-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
  border-radius: 6px;
  padding: 4px 10px;
  width: 70px;
  height: 26px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.nse-badge-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

.nse-text-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
}



/* --- PULSE & FADE ANIMATIONS --- */
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(30, 234, 212, 0.4);
  }

  70% {
    transform: scale(1);
    opacity: 0.8;
    box-shadow: 0 0 0 10px rgba(30, 234, 212, 0);
  }

  100% {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(30, 234, 212, 0);
  }
}

.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.animate-on-scroll.fade-up-active {
  opacity: 1;
  transform: translateY(0);
}

.animate-on-scroll.fade-left {
  transform: translateX(-40px);
}

.animate-on-scroll.fade-left-active {
  opacity: 1;
  transform: translateX(0);
}

.animate-on-scroll.fade-right {
  transform: translateX(40px);
}

.animate-on-scroll.fade-right-active {
  opacity: 1;
  transform: translateX(0);
}

.animate-on-scroll.scale {
  transform: scale(0.95);
}

.animate-on-scroll.scale-active {
  opacity: 1;
  transform: scale(1);
}



/* ==========================================================================
   RESPONSIVE DESIGN SYSTEM (STRICT 4-BREAKPOINT ARCHITECTURE)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SMALLER DESKTOP / LAPTOP (MAX-WIDTH: 1440px)
   -------------------------------------------------------------------------- */
@media (max-width: 1440px) {
  :root {
    --section-padding-desktop: 80px 0;
  }

  .container {
    padding: 0 40px;
    max-width: 1200px;
  }

  /* Typography reductions */
  .hero-title {
    font-size: clamp(32px, 3vw, 44px) !important;
  }

  .section-heading,
  .producer-heading,
  .about-heading,
  .why-heading,
  .format-heading,
  .experience-heading,
  .why-heading-new,
  .luxury-heading-main,
  .luxury-work-heading,
  .luxury-work-title,
  .process-main-heading,
  .faq-main-heading,
  .cta-main-heading,
  .op-title,
  .premium-process-section .process-main-heading,
  .premium-faq-section .faq-main-heading,
  .premium-cta-section .cta-main-heading {
    font-size: 42px !important;
    line-height: 1.16 !important;
  }

  /* Structural fixes */
  .hero-grid {
    gap: 40px;
  }

  .about-new-layout {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 30px;
  }

  .about-feature-item {
    width: 100% !important;
    max-width: 360px;
    padding: 16px 20px !important;
    gap: 16px !important;
  }

  .about-icon-circle {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }

  .about-item-content h3 {
    font-size: 18px !important;
  }

  .about-item-content p {
    font-size: 14px !important;
  }

  .about-p,
  .why-desc,
  .journey-desc,
  .dist-feature-desc,
  .step-card-desc,
  .faq-answer,
  .luxury-desc-text {
    font-size: 16px !important;
  }

  .section-subheading,
  .producer-eyebrow {
    font-size: 14px !important;
  }

  .why-grid {
    grid-template-columns: 40fr 60fr;
    gap: 40px;
  }

  .why-desc {
    max-width: 420px;
  }

  .why-infographic-container {
    width: 320px !important;
    height: 320px !important;
  }

  .main-orbit-ring,
  .ambient-glow {
    width: 320px !important;
    height: 320px !important;
  }

  .secondary-ring {
    width: 240px !important;
    height: 240px !important;
  }

  .info-center {
    width: 160px !important;
    height: 160px !important;
  }

  .dot-top,
  .node-top {
    top: 0 !important;
    left: 160px !important;
  }

  .dot-right,
  .node-right {
    top: 160px !important;
    left: 320px !important;
  }

  .dot-bottom,
  .node-bottom {
    top: 320px !important;
    left: 160px !important;
  }

  .dot-left,
  .node-left {
    top: 160px !important;
    left: 0 !important;
  }

  .info-node-text {
    width: 190px !important;
    padding: 10px 12px !important;
  }

  .luxury-section-split {
    grid-template-columns: minmax(0, 48fr) minmax(0, 52fr) !important;
    gap: 40px !important;
  }

  .luxury-split-right {
    min-width: 0;
  }
}

/* --------------------------------------------------------------------------
   2. LAPTOP / TABLET (MAX-WIDTH: 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root {
    --section-padding-desktop: 60px 0;
  }

  .container {
    padding: 0 32px;
  }

  /* Typography - Substantial Reductions */
  .hero-title {
    font-size: clamp(28px, 3.5vw, 38px) !important;
    line-height: 1.15;
    letter-spacing: -0.8px;
  }

  .hero-subtitle {
    font-size: 22px !important;
  }

  .hero-desc {
    font-size: 16px !important;
    max-width: 100%;
  }

  .section-heading,
  .producer-heading {
    font-size: 34px !important;
  }

  .section-subheading,
  .producer-eyebrow {
    font-size: 14px !important;
  }

  .about-p,
  .why-desc,
  .journey-desc,
  .dist-feature-desc,
  .step-card-desc,
  .faq-answer {
    font-size: 15px !important;
    line-height: 1.6;
  }

  .stat-num {
    font-size: 32px !important;
  }

  .prod-stat-number {
    font-size: 28px !important;
  }

  /* Navigation & Logos */
  .logo-digikore-img {
    height: 26px !important;
  }

  .nav-menu {
    gap: 20px;
  }

  .nav-link {
    font-size: 14px !important;
  }

  #hero-primary-cta,
  #hero-play-cta {
    padding: 14px 24px !important;
    font-size: 14px !important;
  }

  /* Image & Card Resizing */
  .producer-image {
    max-width: 400px;
    height: auto;
  }

  .about-feature-item {
    padding: 20px;
    width: 100%;
    max-width: 320px;
    height: auto;
  }

  .dist-platform-card {
    padding: 16px;
    height: auto;
  }

  .producer-info-card {
    padding: 16px;
    gap: 12px;
  }

  .step-card-title {
    font-size: 16px !important;
  }

  .premium-step-card {
    padding: 20px;
    height: auto;
  }

  /* Layout conversions */
  .hero-grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }

  .about-new-layout {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }

  .about-col-right {
    grid-column: span 2;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .luxury-posters-showcase {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  .dist-platform-row {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
  }

  .producer-split {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }

  /* Infographic Aggressive Scale Down */
  .why-grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }

  .why-infographic-container {
    width: 300px !important;
    height: 300px !important;
  }

  .main-orbit-ring,
  .ambient-glow {
    width: 300px !important;
    height: 300px !important;
  }

  .secondary-ring {
    width: 220px !important;
    height: 220px !important;
  }

  .info-center {
    width: 140px !important;
    height: 140px !important;
    border-width: 4px;
  }

  .orbit-dot {
    width: 10px !important;
    height: 10px !important;
  }

  /* Nodes offset */
  .node-top {
    top: 0 !important;
    left: 150px !important;
  }

  .node-right {
    top: 150px !important;
    left: 300px !important;
  }

  .node-bottom {
    top: 300px !important;
    left: 150px !important;
  }

  .node-left {
    top: 150px !important;
    left: 0 !important;
  }

  .info-node-icon {
    width: 44px !important;
    height: 44px !important;
  }

  .info-node-icon svg {
    width: 20px !important;
    height: 20px !important;
  }

  .info-node-text {
    width: 180px !important;
    padding: 8px 12px !important;
  }

  .info-node-text h4 {
    font-size: 13px !important;
  }

  .info-node-text p {
    font-size: 10px !important;
  }

  .node-top .info-node-text,
  .node-right .info-node-text,
  .node-bottom .info-node-text {
    left: 15px !important;
    padding-left: 28px !important;
  }

  .node-left .info-node-text {
    right: 15px !important;
    padding-right: 28px !important;
  }
}

/* --------------------------------------------------------------------------
   3. MOBILE (MAX-WIDTH: 767px)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  :root {
    --section-padding-desktop: 50px 0;
  }

  .container,
  #format .container {
    padding: 0 20px !important;
  }

  #why-series {
    padding: 60px 20px !important;
  }

  #about {
    padding: 60px 0 !important;
  }

  /* Header / Hamburger */
  .nav-menu {
    display: none;
  }

  .mobile-menu-btn {
    display: block;
    position: relative;
    z-index: 1000;
  }

  .nav-menu.active {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(8, 26, 47, 0.98);
    backdrop-filter: blur(20px);
    justify-content: center;
    align-items: center;
    z-index: 999;
  }

  .nav-menu.active .nav-link {
    font-size: 24px !important;
  }

  .mobile-only-logo-item {
    display: block !important;
    margin-top: 40px;
    width: 100%;
    text-align: center;
  }

  .mobile-nav-logo-img {
    height: 24px;
    width: auto;
    display: block;
    margin: 0 auto;
    object-fit: contain;
    opacity: 0.8;
  }

  /* Drastic Typography Reduction */
  .hero-title {
    font-size: 38px !important;
    text-align: center;
  }

  .hero-subtitle {
    font-size: 18px !important;
    text-align: center;
  }

  .hero-desc {
    font-size: 15px !important;
    text-align: center;
    margin-bottom: 24px;
  }

  .hero-ctas {
    justify-content: center;
  }

  .section-heading,
  .producer-heading {
    font-size: 28px !important;
    line-height: 1.2;
    text-align: center;
    margin-bottom: 20px;
  }

  .section-subheading,
  .producer-eyebrow {
    text-align: center;
    display: block;
    margin: 0 auto 10px;
  }

  .about-p,
  .why-desc,
  .journey-desc {
    text-align: center;
    font-size: 14px !important;
  }

  .producer-heading-line {
    margin: 0 auto 30px;
  }

  .dist-dashboard-heading,
  .dist-dashboard-sub {
    text-align: center;
  }

  /* Force One Column on EVERYTHING */
  .hero-grid,
  .about-new-layout,
  .why-grid,
  .dist-dashboard-split,
  .luxury-section-split,
  .producer-split,
  .participate-grid,
  .cta-main-glass-panel,
  .footer-nav-columns {
    grid-template-columns: 1fr !important;
    gap: 30px;
  }

  .about-col-right {
    grid-column: 1 !important;
    flex-direction: column;
  }

  .about-feature-item {
    width: 100% !important;
    max-width: 100%;
    display: flex;
    flex-direction: row;
    text-align: left;
    align-items: center;
    gap: 16px;
  }

  .participate-left,
  .participate-right {
    grid-template-columns: 1fr;
    grid-column: span 1;
  }

  .participate-center {
    grid-column: span 1;
    order: -1;
  }

  .hospital-wrapper {
    min-height: 280px !important;
  }

  .holo-rings-container {
    width: 320px !important;
    height: 320px !important;
    bottom: -20px !important;
  }

  .holo-ring.r1 {
    width: 100px !important;
    height: 100px !important;
  }

  .holo-ring.r2 {
    width: 180px !important;
    height: 180px !important;
  }

  .holo-ring.r3 {
    width: 250px !important;
    height: 250px !important;
  }

  .holo-ring.r4 {
    width: 320px !important;
    height: 320px !important;
  }

  /* Stats / Grids */
  .hero-stats {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .stat-card {
    height: auto;
    padding: 15px;
  }

  .producer-image {
    max-width: 100%;
  }

  .dist-platform-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .luxury-posters-showcase {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .premium-process-section .process-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .premium-faq-section .faq-cards-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Infographic: Kill Absolute Positioning */
  .why-infographic-container {
    width: 100% !important;
    height: auto !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    background: none;
  }

  .main-orbit-ring,
  .secondary-ring,
  .ambient-glow,
  .svg-connections-static,
  .orbit-dot {
    display: none !important;
  }

  .info-center {
    position: relative;
    margin-bottom: 20px;
    animation: none;
  }

  .info-node {
    position: relative !important;
    width: 100% !important;
    max-width: 400px;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
  }

  .info-node-icon {
    display: none !important;
  }

  .info-node-text {
    position: relative !important;
    width: 100% !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    padding: 16px !important;
    text-align: left !important;
  }
}

/* --------------------------------------------------------------------------
   4. MOBILE (MAX-WIDTH: 425px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  :root {
    --section-padding-desktop: 40px 0;
  }

  .container,
  #format .container {
    padding: 0 16px !important;
  }

  #why-series {
    padding: 40px 16px !important;
  }

  #about {
    padding: 40px 0 !important;
  }

  /* Mobile Headings & Text */
  .hero-title {
    word-spacing: 1px !important;
    letter-spacing: 0.5px !important;
    font-size: 22px !important;
    line-height: 1.25 !important;
  }

  .hero-subtitle {
    font-size: 16px !important;
  }

  .section-heading,
  .producer-heading {
    word-spacing: 1px !important;
    letter-spacing: 0.5px !important;
    font-size: 22px !important;
    line-height: 1.25 !important;
  }

  .about-p,
  .why-desc,
  .journey-desc {
    word-spacing: 1.5px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  /* Full Width Buttons */
  .hero-ctas {
    flex-direction: column;
    width: 100%;
  }

  #hero-primary-cta,
  #hero-play-cta {
    width: 100%;
    justify-content: center;
    padding: 16px !important;
    font-size: 15px !important;
  }

  /* Compact Padding & Cards */
  .journey-box {
    padding: 24px 16px;
  }

  .cta-main-glass-panel {
    padding: 20px 16px;
  }

  .about-feature-item {
    flex-direction: column;
    text-align: center;
    padding: 16px;
  }

  .dist-dashboard-inner {
    padding: 16px;
  }

  /* Grids to 1 Column */
  .dist-platform-row {
    grid-template-columns: 1fr;
  }

  .luxury-posters-showcase {
    grid-template-columns: 1fr;
  }

  .premium-process-section .process-grid {
    grid-template-columns: 1fr;
  }

  .producer-stats-bar {
    flex-direction: column;
    padding: 16px;
    gap: 16px;
  }

  .logo-digikore-img {
    height: 22px !important;
  }

  .cta-input-group {
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }

  #cta-email,
  #cta-submit {
    width: 100%;
    border-radius: 8px;
    padding: 14px;
  }
}

/* --------------------------------------------------------------------------
   ADDITIONAL CAROUSEL & LOGO SCALING (Enforced by Script V3)
   -------------------------------------------------------------------------- */

@media (max-width: 1440px) {
  .logo-card {
    width: 140px !important;
    padding: 15px !important;
  }

  .logo-card img {
    max-width: 80% !important;
  }

  .carousel-card {
    max-width: 380px !important;
    padding: 25px !important;
  }
}

@media (max-width: 1024px) {
  .luxury-split-right {
    width: 100% !important;
    max-width: 860px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
  }

  .logo-carousel-viewport {
    width: calc(100% - 110px) !important;
    max-width: 720px !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 10px 0 !important;
  }

  .logo-carousel-track {
    display: flex !important;
    gap: 16px !important;
    align-items: center !important;
  }

  .logo-card {
    width: 155px !important;
    height: 185px !important;
    flex-shrink: 0 !important;
    padding: 16px !important;
    border-radius: 18px !important;
  }

  .logo-card img {
    max-width: 80% !important;
  }

  .carousel-arrow {
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  .carousel-arrow svg {
    width: 20px !important;
    height: 20px !important;
  }

  .carousel-card {
    width: 320px !important;
    max-width: 100% !important;
    padding: 20px !important;
  }

  .carousel-card h4 {
    font-size: 18px !important;
  }

  .carousel-card p {
    font-size: 14px !important;
  }

  .carousel-btn {
    width: 44px !important;
    height: 44px !important;
  }
}

@media (max-width: 768px) {
  .logo-carousel-viewport {
    max-width: 400px !important;
  }

  .logo-track {
    gap: 15px !important;
  }

  .logo-card {
    width: 90px !important;
    padding: 8px !important;
  }

  .carousel-card {
    width: 280px !important;
    min-width: 280px !important;
    padding: 16px !important;
  }

  .carousel-card h4 {
    font-size: 16px !important;
  }

  .carousel-card p {
    font-size: 13px !important;
  }

  .carousel-btn {
    width: 38px !important;
    height: 38px !important;
  }

  .carousel-btn.prev {
    left: 10px !important;
  }

  .carousel-btn.next {
    right: 10px !important;
  }

  .carousel-dots {
    gap: 6px !important;
  }

  .carousel-dot {
    width: 8px !important;
    height: 8px !important;
  }

  .trusted-split {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .trusted-left {
    text-align: center;
  }

  .trusted-left p {
    margin: 0 auto;
    text-align: center;
  }
}

@media (max-width: 480px) {

  .logo-carousel-viewport {
    max-width: 260px !important;
  }

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

  .logo-card {
    width: 80px !important;
    padding: 6px !important;
  }

  .carousel-arrow {
    width: 30px !important;
    height: 30px !important;
    display: none !important;
    /* Hide arrows on mobile to save space */
  }

  .logo-carousel-viewport {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .logo-track {
    width: max-content !important;
    padding-bottom: 10px !important;
  }

  .carousel-card {
    flex: 0 0 calc(50% - 5px) !important;
    width: calc(50% - 5px) !important;
    min-width: calc(50% - 5px) !important;
    max-width: calc(50% - 5px) !important;
    height: 230px !important;
    padding: 0 !important;
  }

  .carousel-outer {
    padding: 0 !important;
  }

  .carousel-container {
    padding: 8px 0 14px 0 !important;
    gap: 10px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    width: 100% !important;
  }

  .carousel-btn {
    display: flex !important;
    width: 32px !important;
    height: 32px !important;
  }

  .carousel-btn.prev {
    left: -4px !important;
  }

  .carousel-btn.next {
    right: -4px !important;
  }

  .carousel-btn svg {
    width: 15px !important;
    height: 15px !important;
  }
}

/* ==========================================================================
   STRICT NON-OVERLAPPING INFOGRAPHIC & SECTION FIXES
   ========================================================================== */

/* LAPTOP / TABLET LANDSCAPE (MAX-WIDTH: 1024px) */
@media (max-width: 1024px) {
  .why-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 30px !important;
  }

  .why-infographic-container {
    width: min(100%, 300px) !important;
    height: 300px !important;
  }

  .ambient-glow,
  .main-orbit-ring {
    width: 300px !important;
    height: 300px !important;
  }

  .secondary-ring {
    width: 220px !important;
    height: 220px !important;
  }

  .info-center {
    width: 150px !important;
    height: 150px !important;
  }

  .dot-top {
    top: 0 !important;
    left: 150px !important;
  }

  .dot-right {
    top: 150px !important;
    left: 300px !important;
  }

  .dot-bottom {
    top: 300px !important;
    left: 150px !important;
  }

  .dot-left {
    top: 150px !important;
    left: 0 !important;
  }

  .node-top {
    top: 0 !important;
    left: 150px !important;
  }

  .node-right {
    top: 150px !important;
    left: 300px !important;
  }

  .node-bottom {
    top: 300px !important;
    left: 150px !important;
  }

  .node-left {
    top: 150px !important;
    left: 0 !important;
  }

  .info-node-icon {
    width: 44px !important;
    height: 44px !important;
  }

  .info-node-icon svg {
    width: 20px !important;
    height: 20px !important;
  }

  .info-node-text {
    width: 170px !important;
    padding: 8px 10px !important;
  }

  .info-node-text h4 {
    font-size: 13px !important;
  }

  .info-node-text p {
    font-size: 10.5px !important;
  }

  .node-top .info-node-text,
  .node-right .info-node-text,
  .node-bottom .info-node-text {
    left: 10px !important;
    padding-left: 26px !important;
  }

  .node-left .info-node-text {
    right: 10px !important;
    padding-right: 26px !important;
  }
}

/* TABLET PORTRAIT & MOBILE (MAX-WIDTH: 768px) */
@media (max-width: 768px) {
  .why-grid {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }

  .why-content {
    text-align: center !important;
    align-items: center !important;
  }

  .why-divider {
    margin: 0 auto 20px auto !important;
  }

  .why-desc {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
  }

  .why-right {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  .why-infographic-container {
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
    position: relative !important;
  }

  .main-orbit-ring,
  .secondary-ring,
  .ambient-glow,
  .svg-connections-static,
  .orbit-dot,
  .info-node-icon {
    display: none !important;
  }

  .info-center {
    position: relative !important;
    width: 160px !important;
    height: 160px !important;
    margin: 0 auto 10px auto !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    animation: none !important;
  }

  .info-node {
    position: relative !important;
    width: 100% !important;
    max-width: 420px !important;
    height: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
  }

  .info-node-text,
  .node-top .info-node-text,
  .node-right .info-node-text,
  .node-bottom .info-node-text,
  .node-left .info-node-text {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    padding: 16px 20px !important;
    text-align: left !important;
    margin: 0 auto !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 14px !important;
  }

  .info-node-text h4 {
    font-size: 16px !important;
  }

  .info-node-text p {
    font-size: 13px !important;
  }
}

/* MOBILE SMALL (MAX-WIDTH: 425px) */
@media (max-width: 425px) {
  .info-center {
    width: 130px !important;
    height: 130px !important;
  }

  .info-node-text,
  .node-top .info-node-text,
  .node-right .info-node-text,
  .node-bottom .info-node-text,
  .node-left .info-node-text {
    padding: 14px 16px !important;
  }

  .info-node-text h4 {
    font-size: 15px !important;
  }

  .info-node-text p {
    font-size: 12px !important;
  }
}


/* ==========================================================================
   PERFECT 1024px INFOGRAPHIC & SECTION STACKING FIX
   ========================================================================== */

@media (max-width: 1200px) {

  /* Convert Why Series into 1-Column Stack at 1200px and below */
  #why-series .why-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    text-align: center !important;
  }

  #why-series .why-content {
    align-items: center !important;
    text-align: center !important;
    max-width: 800px !important;
    margin: 0 auto !important;
  }

  #why-series .why-divider {
    margin: 0 auto 20px auto !important;
  }

  #why-series .why-desc {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #why-series .why-right {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin-top: 20px !important;
  }
}

@media (min-width: 1025px) and (max-width: 1200px) {

  /* At 1024px (laptop/tablet range), keep circular orbit graphic centered in 1-column */
  .why-infographic-container {
    width: 360px !important;
    height: 360px !important;
    margin: 0 auto !important;
  }

  .ambient-glow,
  .main-orbit-ring {
    width: 360px !important;
    height: 360px !important;
  }

  .secondary-ring {
    width: 280px !important;
    height: 280px !important;
  }

  .info-center {
    width: 200px !important;
    height: 200px !important;
  }

  .dot-top {
    top: 0 !important;
    left: 180px !important;
  }

  .dot-right {
    top: 180px !important;
    left: 360px !important;
  }

  .dot-bottom {
    top: 360px !important;
    left: 180px !important;
  }

  .dot-left {
    top: 180px !important;
    left: 0 !important;
  }

  .node-top {
    top: 0 !important;
    left: 180px !important;
  }

  .node-right {
    top: 180px !important;
    left: 360px !important;
  }

  .node-bottom {
    top: 360px !important;
    left: 180px !important;
  }

  .node-left {
    top: 180px !important;
    left: 0 !important;
  }

  .info-node-text {
    width: 200px !important;
    padding: 10px 14px !important;
  }
}

@media (min-width: 1201px) {
  #why-series .why-grid {
    grid-template-columns: minmax(480px, 540px) 1fr !important;
    gap: 50px !important;
  }
}

/* ==========================================================================
   RESPONSIVE DESIGN SYSTEM (STRICT 4-BREAKPOINT ARCHITECTURE)
   ========================================================================== */

/* Universal Overrides to Prevent Overflow */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  max-width: 100vw;
  overflow-x: hidden;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

/* 1. DESKTOP (Max-width: 1440px) */
@media (max-width: 1440px) {

  /* Enforce a consistent max-width constraint for ultra-wide monitors */
  .container,
  .about-container,
  .why-grid,
  .experience-container,
  .participate-container,
  .dist-dashboard-container,
  .luxury-container,
  .producer-container,
  .container-premium,
  .faq-max-container,
  .cta-max-container,
  .footer-max-container {
    width: 92%;
    max-width: 1440px;
    padding-left: 50px !important;
    padding-right: 50px !important;
  }

  /* Typography fine-tuning */
  .hero-title {
    font-size: clamp(32px, 3vw, 46px);
  }

  .hero-subtitle {
    font-size: 36px;
  }

  .section-heading,
  .producer-heading,
  .why-heading-new,
  .process-main-heading,
  .faq-main-heading,
  .cta-main-heading,
  .luxury-heading-main {
    font-size: 42px;
  }

  /* Spacing */
  .hero-grid,
  .about-new-layout,
  .why-grid,
  .dist-dashboard-split,
  .luxury-section-split,
  .producer-split {
    gap: 60px;
  }
}

/* 2. TABLET / SMALL DESKTOP (Max-width: 1024px) */
@media (max-width: 1024px) {

  .container,
  .about-container,
  .why-grid,
  .experience-container,
  .participate-container,
  .dist-dashboard-container,
  .luxury-container,
  .producer-container,
  .container-premium,
  .faq-max-container,
  .cta-max-container,
  .footer-max-container {
    width: 94%;
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  /* Responsive Typography Reduction */
  .hero-title {
    font-size: clamp(28px, 3.5vw, 38px);
    letter-spacing: -0.8px;
    line-height: 1.15;
  }

  .hero-subtitle {
    font-size: 26px;
  }

  .hero-desc,
  .about-p,
  .why-desc,
  .format-desc-text,
  .experience-subtitle,
  .luxury-desc-text,
  .cta-description {
    font-size: 16px;
  }

  .section-heading,
  .about-heading,
  .why-heading,
  .why-heading-new,
  .format-heading,
  .experience-heading,
  .luxury-heading-main,
  .luxury-work-heading,
  .luxury-work-title,
  .producer-heading,
  .process-main-heading,
  .faq-main-heading,
  .cta-main-heading,
  .op-title,
  .premium-process-section .process-main-heading,
  .premium-faq-section .faq-main-heading,
  .premium-cta-section .cta-main-heading {
    font-size: 34px !important;
    line-height: 1.2 !important;
    margin-bottom: 18px !important;
  }

  .luxury-heading-main br,
  .luxury-work-heading br,
  .why-heading br {
    display: none !important;
  }

  .section-tag,
  .about-tag,
  .why-tag,
  .why-tag-new,
  .process-eyebrow-tag,
  .faq-eyebrow-tag,
  .cta-eyebrow-tag,
  .luxury-label-blue,
  .producer-eyebrow {
    font-size: 12px;
  }

  /* Sections: Adjust proportions intelligently to prevent cramped columns */
  .hero-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
  }

  .about-new-layout {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .about-col-right {
    grid-column: span 2;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
  }

  .about-feature-item {
    width: calc(50% - 10px);
    max-width: 100%;
    margin: 0;
  }

  /* ==========================================================================
     DEDICATED TABLET LAYOUT: WHY THIS SERIES (768px - 1024px)
     ========================================================================== */
  #why-series {
    padding: 80px 0 !important;
  }

  #why-series .why-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 46px !important;
    width: 92% !important;
    max-width: 960px !important;
    margin: 0 auto !important;
  }

  #why-series .why-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    max-width: 820px !important;
    width: 100% !important;
    margin: 0 auto !important;
  }

  #why-series .why-tag {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    margin-bottom: 12px !important;
    display: inline-block !important;
  }

  #why-series .why-divider {
    width: 45px !important;
    height: 3px !important;
    background-color: #1DE0C6 !important;
    border-radius: 99px !important;
    margin: 0 auto 20px auto !important;
  }

  #why-series .why-heading {
    font-size: clamp(38px, 4.8vw, 48px) !important;
    line-height: 1.18 !important;
    margin-bottom: 22px !important;
    text-align: center !important;
    color: #FFFFFF !important;
  }

  #why-series .why-desc {
    font-family: var(--font-body) !important;
    font-size: 17.5px !important;
    line-height: 1.65 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    max-width: 780px !important;
    width: 100% !important;
    margin: 0 auto 16px auto !important;
    text-align: center !important;
  }

  #why-series .why-desc:last-of-type {
    margin-bottom: 0 !important;
  }

  /* Infographic Diagram Container */
  #why-series .why-right {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
    margin-top: 10px !important;
    overflow: visible !important;
  }

  #why-series .why-infographic-container {
    position: relative !important;
    width: 880px !important;
    height: 520px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    display: block !important;
    transform: scale(0.85) !important;
    transform-origin: center center !important;
  }

  /* Central Circular Image */
  #why-series .info-center {
    position: absolute !important;
    width: 150px !important;
    height: 150px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    border: 3.5px solid #22D9D6 !important;
    box-shadow: 0 0 30px rgba(34, 217, 214, 0.45), 0 0 70px rgba(34, 217, 214, 0.15) !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 5 !important;
    margin: 0 !important;
    animation: floatImage 6s ease-in-out infinite !important;
  }

  #why-series .info-center img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Ambient Glow & Concentric Rings */
  #why-series .ambient-glow {
    display: block !important;
    position: absolute !important;
    width: 440px !important;
    height: 440px !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(29, 224, 198, 0.16) 0%, rgba(32, 145, 216, 0.08) 40%, transparent 70%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  #why-series .secondary-ring {
    display: block !important;
    position: absolute !important;
    width: 220px !important;
    height: 220px !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 50% !important;
    border: 1.5px solid rgba(34, 217, 214, 0.35) !important;
    z-index: 2 !important;
    pointer-events: none !important;
  }

  #why-series .main-orbit-ring {
    display: block !important;
    position: absolute !important;
    width: 320px !important;
    height: 320px !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 50% !important;
    border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
    z-index: 2 !important;
    pointer-events: none !important;
    animation: orbit 24s linear infinite !important;
  }

  #why-series .orbit-dot {
    display: block !important;
    position: absolute !important;
    width: 9px !important;
    height: 9px !important;
    border-radius: 50% !important;
    background: #1DE0C6 !important;
    box-shadow: 0 0 10px #1DE0C6 !important;
  }

  #why-series .dot-top {
    top: 0 !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  #why-series .dot-right {
    top: 50% !important;
    right: 0 !important;
    transform: translate(50%, -50%) !important;
    left: auto !important;
  }

  #why-series .dot-bottom {
    bottom: 0 !important;
    left: 50% !important;
    top: auto !important;
    transform: translate(-50%, 50%) !important;
  }

  #why-series .dot-left {
    top: 50% !important;
    left: 0 !important;
    transform: translate(-50%, -50%) !important;
  }

  #why-series .svg-connections-static {
    display: none !important;
  }

  /* 4 Surrounding Cards */
  #why-series .info-node {
    position: absolute !important;
    z-index: 6 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    background: rgba(9, 27, 48, 0.88) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(0, 240, 255, 0.22) !important;
    border-radius: 16px !important;
    padding: 12px 18px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 240, 255, 0.08) !important;
    gap: 12px !important;
    box-sizing: border-box !important;
    width: auto !important;
    height: auto !important;
    transition: transform 0.3s ease, border-color 0.3s ease !important;
  }

  #why-series .info-node:hover {
    border-color: rgba(0, 240, 255, 0.5) !important;
    transform: scale(1.02) !important;
  }

  #why-series .info-node-icon {
    position: relative !important;
    transform: none !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 50% !important;
    border: 1.5px solid rgba(0, 240, 255, 0.4) !important;
    background: rgba(0, 240, 255, 0.1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #1DE0C6 !important;
    flex-shrink: 0 !important;
    box-shadow: 0 0 14px rgba(29, 224, 198, 0.25) !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
  }

  #why-series .info-node-icon svg {
    width: 20px !important;
    height: 20px !important;
  }

  #why-series .info-node-text {
    position: relative !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
    align-items: flex-start !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
  }

  #why-series .info-node-text h4 {
    font-family: var(--font-headings) !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    margin: 0 0 2px 0 !important;
    letter-spacing: 0.3px !important;
    white-space: nowrap !important;
  }

  #why-series .info-node-text p {
    font-family: var(--font-body) !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
    color: rgba(255, 255, 255, 0.7) !important;
    margin: 0 !important;
    white-space: normal !important;
  }

  /* Specific Card Positions & Connector Lines */

  /* 1. TOP: AWARENESS */
  #why-series .node-top {
    top: 15px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 235px !important;
  }

  #why-series .node-top::after {
    content: '' !important;
    position: absolute !important;
    bottom: -60px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 1.5px !important;
    height: 60px !important;
    background: rgba(34, 217, 214, 0.45) !important;
    z-index: 1 !important;
  }

  #why-series .node-top::before {
    content: '' !important;
    position: absolute !important;
    bottom: -63px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #1DE0C6 !important;
    box-shadow: 0 0 8px #1DE0C6 !important;
    z-index: 2 !important;
  }

  /* 2. BOTTOM: TRUST */
  #why-series .node-bottom {
    bottom: 15px !important;
    left: 50% !important;
    top: auto !important;
    transform: translateX(-50%) !important;
    width: 235px !important;
  }

  #why-series .node-bottom::after {
    content: '' !important;
    position: absolute !important;
    top: -60px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 1.5px !important;
    height: 60px !important;
    background: rgba(34, 217, 214, 0.45) !important;
    z-index: 1 !important;
  }

  #why-series .node-bottom::before {
    content: '' !important;
    position: absolute !important;
    top: -63px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #1DE0C6 !important;
    box-shadow: 0 0 8px #1DE0C6 !important;
    z-index: 2 !important;
  }

  /* 3. LEFT: ACCESSIBILITY (Text left, Icon right) */
  #why-series .node-left {
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 230px !important;
    flex-direction: row !important;
  }

  #why-series .node-left .info-node-text {
    text-align: right !important;
    align-items: flex-end !important;
  }

  #why-series .node-left::after {
    content: '' !important;
    position: absolute !important;
    right: -60px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 60px !important;
    height: 1.5px !important;
    background: rgba(34, 217, 214, 0.45) !important;
    z-index: 1 !important;
  }

  #why-series .node-left::before {
    content: '' !important;
    position: absolute !important;
    right: -63px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #1DE0C6 !important;
    box-shadow: 0 0 8px #1DE0C6 !important;
    z-index: 2 !important;
  }

  /* 4. RIGHT: EDUCATION (Icon left, Text right) */
  #why-series .node-right {
    right: 10px !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 230px !important;
  }

  #why-series .node-right::after {
    content: '' !important;
    position: absolute !important;
    left: -60px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 60px !important;
    height: 1.5px !important;
    background: rgba(34, 217, 214, 0.45) !important;
    z-index: 1 !important;
  }

  #why-series .node-right::before {
    content: '' !important;
    position: absolute !important;
    left: -63px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #1DE0C6 !important;
    box-shadow: 0 0 8px #1DE0C6 !important;
    z-index: 2 !important;
  }

  @media (max-width: 820px) {
    #why-series .why-infographic-container {
      transform: scale(0.80) !important;
      transform-origin: center center !important;
      margin: -20px auto -50px auto !important;
    }
  }

  /* Experience Journey Cards (2 in a line on tablet) */
  .journey-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-row-gap: 50px !important;
    grid-column-gap: 24px !important;
    grid-template-rows: auto !important;
  }

  .journey-item {
    margin-bottom: 20px;
  }

  .journey-card {
    max-width: 100%;
    min-height: 130px;
    margin-top: -20px;
  }

  .journey-line-svg-wrapper {
    display: none !important;
  }

  /* Hide hardcoded SVG lines */

  /* Participate (Cards on top in 3-card rows, hospital image at the bottom) */
  .participate-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 28px !important;
    width: 100% !important;
    min-height: auto !important;
  }

  .participate-left {
    order: 1 !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
    width: 100% !important;
  }

  .participate-right {
    order: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
    width: 100% !important;
  }

  .participate-center {
    order: 3 !important;
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: auto !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin-top: 10px !important;
  }

  .hospital-wrapper {
    width: 100% !important;
    max-width: 580px !important;
    min-height: 360px !important;
    margin: 0 auto !important;
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .hospital-img {
    width: 100% !important;
    max-width: 460px !important;
    height: auto !important;
  }

  .holo-rings-container {
    width: 560px !important;
    height: 560px !important;
    bottom: -10px !important;
  }

  .connections-wrapper {
    display: none !important;
  }

  .feat-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    margin: 0 !important;
    width: 100% !important;
    position: relative !important;
  }

  .feat-item[data-side="left"],
  .feat-item[data-side="right"] {
    flex-direction: column !important;
  }

  .feat-icon-wrapper {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    margin-bottom: -20px !important;
    position: relative !important;
    z-index: 5 !important;
    box-shadow: 0 8px 24px rgba(20, 70, 160, 0.1) !important;
  }

  .feat-svg-icon {
    width: 22px !important;
    height: 22px !important;
  }

  .feat-text {
    width: 100% !important;
    max-width: 100% !important;
    padding: 26px 10px 14px 10px !important;
    border-radius: 18px !important;
    text-align: center !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
    box-sizing: border-box !important;
    box-shadow: 0 10px 30px rgba(20, 70, 160, 0.06) !important;
  }

  .feat-item[data-side="left"] .feat-text,
  .feat-item[data-side="right"] .feat-text {
    margin: 0 !important;
    padding: 26px 10px 14px 10px !important;
    text-align: center !important;
  }

  .feat-title {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #0B2346 !important;
    margin-bottom: 2px !important;
    white-space: nowrap !important;
  }

  .feat-desc {
    font-size: 10px !important;
    line-height: 1.3 !important;
    color: #556B82 !important;
    margin: 0 !important;
  }

  /* Distribution (Compact side-by-side: text & logos on left, map on right) */
  .dist-dashboard-split {
    display: grid !important;
    grid-template-columns: 1.15fr 0.85fr !important;
    align-items: center !important;
    gap: 20px !important;
    margin-bottom: 24px !important;
    width: 100% !important;
  }

  .dist-split-left {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .dist-eyebrow-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    margin-bottom: 6px !important;
    width: 100% !important;
  }

  .dist-eyebrow {
    font-size: 11.5px !important;
    letter-spacing: 3px !important;
    text-align: left !important;
    margin: 0 !important;
    display: block !important;
    align-self: flex-start !important;
  }

  .dist-accent-line {
    margin-left: 0 !important;
    margin-right: auto !important;
    align-self: flex-start !important;
    display: block !important;
  }

  .dist-subtitle-hero {
    font-size: 14.5px !important;
    letter-spacing: 2px !important;
    margin-bottom: 10px !important;
    text-align: left !important;
    align-self: flex-start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  .dist-brand-hero {
    margin-bottom: 14px !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    align-self: flex-start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  .dist-brand-logo-main {
    height: 48px !important;
    margin-left: 0 !important;
  }

  .dist-views-hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    align-self: flex-start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    gap: 2px !important;
    margin-bottom: 14px !important;
  }

  .dist-views-num {
    font-size: 30px !important;
    line-height: 1.1 !important;
    text-align: left !important;
    align-self: flex-start !important;
    margin-left: 0 !important;
  }

  .dist-views-label {
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
    text-align: left !important;
    align-self: flex-start !important;
    margin-left: 0 !important;
  }

  .dist-global-usp-highlight {
    padding: 10px 14px !important;
    gap: 10px !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    align-self: flex-start !important;
  }

  .global-usp-stat {
    font-size: 13px !important;
    text-align: left !important;
  }

  .global-usp-label {
    font-size: 11px !important;
    text-align: left !important;
  }

  .dist-split-right {
    height: 250px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
  }

  .dist-map-container {
    width: 100% !important;
    max-width: 250px !important;
    height: auto !important;
    position: relative !important;
  }

  .dist-map-img {
    width: 100% !important;
    max-width: 240px !important;
    height: auto !important;
  }

  .hud-concentric-rings {
    width: 240px !important;
    height: 240px !important;
  }

  .dist-platform-row {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
  }

  .luxury-section-split {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  /* Producer */
  .producer-split {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  .producer-cards-stack {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    width: 100% !important;
  }

  .producer-info-card {
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px !important;
    padding: 20px !important;
    height: 100% !important;
    box-sizing: border-box !important;
  }

  .producer-info-text p {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
  }

  .producer-right {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .producer-image-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 16/9 !important;
    height: auto !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    margin: 0 auto !important;
    border: 1.5px solid rgba(30, 79, 134, 0.25) !important;
  }

  .producer-image {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  #producer-section .producer-usp-grid,
  .producer-usp-grid {
    width: 100% !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
    margin-top: 24px !important;
  }

  #producer-section .producer-usp-card,
  .producer-usp-card {
    padding: 14px 18px !important;
    min-height: auto !important;
    gap: 14px !important;
    border-radius: 14px !important;
  }

  #producer-section .usp-icon-box,
  .usp-icon-box {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
  }

  #producer-section .usp-icon-box img,
  #producer-section .usp-icon-box svg,
  .usp-icon-box img,
  .usp-icon-box svg {
    width: 22px !important;
    height: 22px !important;
  }

  #producer-section .prod-stat-number,
  .prod-stat-number {
    font-size: 22px !important;
  }

  #producer-section .prod-stat-plus,
  .prod-stat-plus {
    font-size: 18px !important;
  }

  #producer-section .usp-label-text,
  .usp-label-text {
    font-size: 12.5px !important;
    line-height: 1.3 !important;
    margin-top: 2px !important;
  }

  .producer-stats-bar {
    position: relative;
    margin-top: 30px;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
  }

  .prod-stat-divider {
    display: none;
  }

  .prod-stat-col {
    min-width: 45%;
  }

  /* Process (3 cards in first row, 2 cards in second row) */
  .premium-process-section .process-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 28px 16px !important;
    width: 100% !important;
  }

  .process-node-card-wrap,
  .premium-process-section .process-node-card-wrap {
    flex: 0 0 calc(33.333% - 16px) !important;
    max-width: calc(33.333% - 16px) !important;
    width: calc(33.333% - 16px) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .premium-process-section .premium-step-card {
    padding: 24px 16px !important;
    min-height: 210px !important;
    width: 100% !important;
    border-radius: 20px !important;
    box-sizing: border-box !important;
  }

  .premium-process-section .step-card-title {
    font-size: 15px !important;
    margin-bottom: 8px !important;
  }

  .premium-process-section .step-card-desc {
    font-size: 11.5px !important;
    line-height: 1.4 !important;
  }

  .premium-process-section .timeline-circle {
    width: 54px !important;
    height: 54px !important;
    font-size: 18px !important;
  }

  .premium-process-section .vertical-connector-line {
    height: 24px !important;
  }

  .timeline-connecting-line {
    display: none !important;
  }

  /* CTA & Footer */
  .premium-cta-section .cta-main-glass-panel {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding: 50px 40px;
  }

  .premium-cta-section .cta-info-panel {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
    padding: 28px 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .premium-cta-section .cta-info-column {
    padding: 0 6px !important;
  }

  .premium-cta-section .info-title {
    font-size: 16px !important;
    white-space: nowrap !important;
  }

  .premium-cta-section .info-subtitle {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  .cta-info-divider {
    display: none !important;
  }

  .luxury-footer .footer-top-section {
    flex-direction: column;
    gap: 40px;
  }

  .luxury-footer .footer-left-side,
  .luxury-footer .footer-right-side {
    flex: none;
    width: 100%;
    max-width: 100%;
  }
}

/* 3. MOBILE (Max-width: 767px) */
@media (max-width: 768px) {

  .container,
  .about-container,
  .why-grid,
  .experience-container,
  .participate-container,
  .dist-dashboard-container,
  .luxury-container,
  .producer-container,
  .container-premium,
  .faq-max-container,
  .cta-max-container,
  .footer-max-container {
    padding-left: 20px !important;
    padding-right: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .luxury-work-heading .luxury-work-team {
    display: block !important;
  }

  .luxury-work-heading .luxury-work-worked {
    display: inline !important;
  }

  .luxury-work-heading .luxury-work-on {
    display: inline !important;
  }

  /* Header Branding on Mobile */
  .nav-container {
    height: 70px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
  }

  .logo {
    display: flex !important;
    align-items: center !important;
  }

  .logo-img {
    height: 38px !important;
    width: auto !important;
    max-width: 170px !important;
    object-fit: contain !important;
  }

  #header-digikore-logo {
    display: flex !important;
    align-items: center !important;
  }

  .logo-digikore-img {
    height: 20px !important;
    width: auto !important;
    max-width: 120px !important;
    object-fit: contain !important;
  }

  .nav-menu,
  .mobile-menu-btn {
    display: none !important;
  }

  /* Global Typography - Mobile Scaled */
  #hero {
    padding: 100px 0 50px 0 !important;
    min-height: auto !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  .hero-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 30px !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: center !important;
    text-align: center !important;
  }

  .hero-left {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: center !important;
    text-align: center !important;
  }

  .hero-title {
    font-size: clamp(26px, 6.5vw, 36px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.5px !important;
    text-align: center !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    margin-bottom: 16px !important;
  }

  .hero-subtitle {
    font-size: 20px !important;
    text-align: center !important;
    margin-bottom: 16px !important;
  }

  .hero-desc {
    font-size: 15px !important;
    line-height: 1.55 !important;
    text-align: center !important;
    max-width: 100% !important;
    margin: 0 auto 24px auto !important;
  }

  .hero-ctas {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto !important;
  }

  #hero-primary-cta {
    display: inline-flex !important;
    width: 100% !important;
    height: 50px !important;
    padding: 0 20px !important;
    font-size: 15px !important;
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
    white-space: normal !important;
    border-radius: 14px !important;
  }

  .hero-badge {
    display: inline-flex !important;
    width: 100% !important;
    height: 50px !important;
    padding: 0 16px !important;
    font-size: 13.5px !important;
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    white-space: normal !important;
    border-radius: 14px !important;
  }

  .hero-right {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: center !important;
  }

  .video-frame-container {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 16/9 !important;
    border-radius: 18px !important;
  }

  section h1,
  section h2,
  section h3,
  section h4,
  section h5,
  section h6,
  section p,
  .section-heading,
  .about-heading,
  .why-heading,
  .why-heading-new,
  .producer-heading,
  .process-main-heading,
  .faq-main-heading,
  .cta-main-heading,
  .luxury-heading-main,
  .section-tag,
  .about-tag,
  .why-tag,
  .format-tag,
  .dist-tag,
  .producer-eyebrow,
  .process-eyebrow-tag,
  .faq-eyebrow-tag,
  .cta-eyebrow-tag,
  .luxury-label-blue,
  .about-p,
  .why-desc,
  .format-desc-text,
  .format-subtitle,
  .dist-subtitle,
  .luxury-desc-text,
  .cta-description,
  .journey-desc,
  .prod-stat-desc,
  .stat-label,
  .stat-num,
  .about-item-content h3,
  .about-item-content p {
    text-align: center !important;
  }

  .section-heading,
  .about-heading,
  .why-heading,
  .why-heading-new,
  .format-heading,
  .experience-heading,
  .luxury-heading-main,
  .luxury-work-heading,
  .luxury-work-title,
  .producer-heading,
  .process-main-heading,
  .faq-main-heading,
  .cta-main-heading,
  .op-title,
  .premium-process-section .process-main-heading,
  .premium-faq-section .faq-main-heading,
  .premium-cta-section .cta-main-heading {
    font-size: 28px !important;
    line-height: 1.2 !important;
    text-align: center !important;
    margin-bottom: 18px !important;
  }

  .about-eyebrow span {
    word-spacing: 6px !important;
    letter-spacing: 2.5px !important;
    display: inline-block !important;
  }

  .about-heading {
    word-spacing: 2px !important;
  }

  .about-description p {
    word-spacing: 1px !important;
  }

  .about-text-col,
  .about-eyebrow,
  .about-col-center,
  .why-content,
  .producer-left,
  .journey-step,
  .faq-header,
  .premium-cta-section .cta-content-inner,
  .cta-content-wrapper,
  .stat-card,
  .about-item-content,
  .dist-split-left,
  .luxury-split-left {
    align-items: center !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .why-divider,
  .format-divider,
  .producer-heading-line,
  .dist-accent-line,
  .faq-cta-accent-line,
  .about-eyebrow-line,
  .about-tag,
  .section-tag,
  .why-tag,
  .format-tag,
  .dist-tag,
  .process-eyebrow-tag,
  .faq-eyebrow-tag,
  .cta-eyebrow-tag,
  .luxury-label-blue {
    margin-left: auto !important;
    margin-right: auto !important;
    display: table !important;
  }

  /* Stack All Dual Columns to 1 Column */
  .about-new-layout,
  .why-grid,
  .luxury-section-split,
  .producer-split,
  .premium-cta-section .cta-main-glass-panel {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    width: 100% !important;
  }

  /* Specific Sections Fixes */
  .hero-stats {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .stat-card {
    height: auto !important;
    padding: 16px !important;
  }

  .about-col-right {
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
  }

  .about-feature-item {
    flex-direction: column !important;
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 400px !important;
  }

  /* Disassemble Absolute Infographic on smaller screens */
  .why-infographic-container {
    width: 100% !important;
    max-width: 320px !important;
    height: auto !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .info-node {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 20px !important;
  }

  .info-node-icon {
    position: static !important;
    transform: none !important;
    display: flex !important;
  }

  .info-node-text {
    position: static !important;
    width: 100% !important;
    max-width: 300px !important;
    transform: none !important;
    padding: 16px !important;
    text-align: center !important;
    margin: 0 !important;
  }

  .ambient-glow,
  .main-orbit-ring,
  .secondary-ring,
  .svg-connections-static,
  .orbit-dot {
    display: none !important;
  }

  .info-center {
    position: relative !important;
    margin: 0 auto !important;
    animation: none !important;
    border-width: 3px !important;
  }

  .journey-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-row-gap: 40px !important;
    grid-column-gap: 20px !important;
  }

  .journey-card {
    max-width: 100% !important;
  }

  .participate-center {
    min-height: 250px !important;
    grid-row: auto !important;
  }

  .feat-item {
    flex-direction: column !important;
    text-align: center !important;
    align-items: center !important;
  }

  .feat-text {
    padding: 18px !important;
    text-align: center !important;
  }

  .dist-split-left {
    align-items: flex-start !important;
  }

  .dist-split-right {
    height: 260px !important;
  }

  .hud-concentric-rings {
    width: 240px !important;
    height: 240px !important;
  }

  .dist-views-num {
    font-size: 25px !important;
  }

  .dist-dashboard-inner {
    padding: 24px 16px !important;
  }

  .dist-platform-row {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .dist-platform-card {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 8px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .platform-icon-wrapper {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    flex-shrink: 0 !important;
  }

  .platform-card-img-solo {
    width: 50px !important;
    height: 50px !important;
  }

  .platform-logo-insta,
  .platform-logo-fb {
    width: 30px !important;
    height: 30px !important;
  }

  .platform-info {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .platform-name {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .platform-sub {
    font-size: 10px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: rgba(255, 255, 255, 0.6) !important;
  }

  .luxury-split-right {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
    position: relative !important;
  }

  .carousel-arrow {
    display: flex !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 50% !important;
    background: #FFFFFF !important;
    border: 1.5px solid #DCE6F5 !important;
    color: #158DFF !important;
    box-shadow: 0 6px 18px rgba(21, 141, 255, 0.14) !important;
    cursor: pointer !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    z-index: 10 !important;
    transition: all 0.3s ease !important;
  }

  .carousel-arrow:hover {
    background: #158DFF !important;
    color: #FFFFFF !important;
    border-color: #158DFF !important;
  }

  .carousel-arrow svg {
    width: 20px !important;
    height: 20px !important;
  }

  .logo-carousel-viewport {
    flex: 1 !important;
    width: 100% !important;
    overflow: hidden !important;
    padding: 10px 2px !important;
    margin: 0 !important;
  }

  .logo-carousel-track {
    display: flex !important;
    gap: 16px !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .logo-card {
    flex: 0 0 calc(25% - 12px) !important;
    min-width: 105px !important;
    height: 105px !important;
    padding: 12px !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;
  }

  .luxury-posters-showcase {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  .poster-image-wrapper {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 2/3 !important;
  }

  .producer-left {
    align-items: center !important;
  }

  .producer-stats-bar {
    margin-top: 0 !important;
  }

  @media (max-width: 600px) {
    .process-node-card-wrap {
      flex: 0 0 100% !important;
      width: 100% !important;
      max-width: 400px !important;
      margin: 0 auto !important;
    }
  }

  .faq-cards-grid {
    grid-template-columns: 1fr !important;
  }

  .faq-cta-panel {
    flex-direction: column !important;
    text-align: center !important;
    gap: 16px !important;
  }

  .premium-cta-section .cta-main-glass-panel {
    padding: 30px 20px !important;
  }

  .premium-cta-section .cta-right-column {
    display: none !important;
  }

  @media (max-width: 600px) {
    .premium-cta-section .cta-info-panel {
      grid-template-columns: 1fr !important;
      gap: 20px !important;
    }
  }

  .premium-cta-section .cta-content-inner {
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
  }

  .premium-cta-section .cta-buttons-wrap {
    justify-content: center !important;
    width: 100% !important;
  }

  .luxury-footer .footer-nav-columns {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    text-align: center !important;
  }

  .luxury-footer .footer-nav-col {
    align-items: center !important;
  }

  .luxury-footer .footer-newsletter-card {
    flex-direction: column !important;
    text-align: center !important;
  }

  .luxury-footer .newsletter-form {
    flex-direction: column !important;
    width: 100% !important;
  }

  .luxury-footer .footer-bottom-bar {
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* Original Productions Tablet/Mobile */
  .original-productions-container {
    padding: 40px 20px !important;
  }

  .op-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    width: 100% !important;
  }

  .op-card {
    flex-direction: column-reverse !important;
    gap: 18px !important;
    text-align: center !important;
    align-items: center !important;
    padding: 28px 20px !important;
    border-radius: 20px !important;
  }

  .op-card-title {
    font-size: 22px !important;
  }

  .op-show-logo {
    max-width: 130px !important;
    height: auto !important;
  }

  .op-card-left {
    align-items: center !important;
  }

  .op-partner-logo {
    align-self: center !important;
    max-width: 120px !important;
  }

  .op-card-line {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  @media (max-width: 600px) {
    .op-grid {
      grid-template-columns: 1fr !important;
      gap: 20px !important;
    }
  }
}

/* 4. COMPACT MOBILE (Max-width: 480px) */
@media (max-width: 480px) {

  .container,
  .about-container,
  .why-grid,
  .experience-container,
  .participate-container,
  .dist-dashboard-container,
  .luxury-container,
  .producer-container,
  .container-premium,
  .faq-max-container,
  .cta-max-container,
  .footer-max-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .hero-title {
    font-size: clamp(23px, 6.2vw, 29px) !important;
    line-height: 1.15 !important;
  }

  .hero-subtitle {
    font-size: 17px !important;
  }

  .hero-desc {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  .section-heading,
  .about-heading,
  .why-heading,
  .why-heading-new,
  .format-heading,
  .experience-heading,
  .luxury-heading-main,
  .luxury-work-heading,
  .luxury-work-title,
  .producer-heading,
  .process-main-heading,
  .faq-main-heading,
  .cta-main-heading,
  .op-title,
  .premium-process-section .process-main-heading,
  .premium-faq-section .faq-main-heading,
  .premium-cta-section .cta-main-heading {
    font-size: 24px !important;
    line-height: 1.2 !important;
    text-align: center !important;
    margin-bottom: 16px !important;
  }

  .hero-ctas {
    width: 100% !important;
    max-width: 100% !important;
  }

  #hero-primary-cta,
  #hero-play-cta {
    width: 100% !important;
    padding: 12px 16px !important;
    font-size: 14.5px !important;
  }

  .hero-badge {
    width: 100% !important;
    padding: 12px 14px !important;
    font-size: 13px !important;
  }

  .hero-stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .stat-card {
    padding: 12px 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .stat-icon-img {
    width: 26px !important;
    height: 26px !important;
  }

  .stat-num {
    font-size: 22px !important;
  }

  .stat-label {
    font-size: 10px !important;
    white-space: nowrap !important;
  }

  .dist-platform-row {
    grid-template-columns: 1fr !important;
  }

  .dist-split-right {
    height: 200px !important;
  }

  .hud-concentric-rings {
    width: 180px !important;
    height: 180px !important;
  }

  .dist-views-num {
    font-size: 30px !important;
  }

  .luxury-posters-showcase {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    row-gap: 16px !important;
  }

  .producer-usp-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .premium-cta-section .cta-main-glass-panel {
    padding: 24px 16px !important;
  }

  .premium-cta-section .cta-buttons-wrap {
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .premium-cta-section .cta-btn-primary,
  .premium-cta-section .cta-btn-secondary {
    width: 100% !important;
    justify-content: center !important;
  }

  .carousel-card {
    width: 220px !important;
    height: 320px !important;
  }
}

.original-productions-section {
  position: relative;
  margin-top: 80px;
}

.original-productions-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
}

.original-productions-header {
  text-align: center;
  margin-bottom: 60px;
}

.op-eyebrow {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: #158DFF;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 12px;
}

.op-title {
  margin-bottom: 20px;
}

.op-subtitle {
  font-family: var(--font-body);
  font-size: 16px;
  color: #64748b;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.6;
}

.op-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  width: 100%;
}

.op-card {
  display: flex;
  background: #FFFFFF;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  padding: 45px;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.03);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  gap: 30px;
}

.op-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 30px 60px rgba(15, 23, 42, 0.06);
  border-color: rgba(21, 141, 255, 0.2);
}

.op-card-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.op-card-title {
  font-family: var(--font-headings);
  font-size: 28px;
  font-weight: 800;
  color: #0b2346;
  margin-bottom: 12px;
}

.op-card-line {
  width: 40px;
  height: 3px;
  background-color: #158DFF;
  border-radius: 2px;
  margin-bottom: 24px;
}

.op-partner-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
}

.op-partner-logo {
  height: 36px;
  width: auto;
  object-fit: contain;
  border-radius: 5px;
}

.op-card-right {
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kb-logo-wrapper svg,
.heroes-logo-wrapper svg {
  display: block;
  width: 100%;
  height: 100%;
}

.op-show-logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* --- BRANDS WE'VE WORKED WITH SECTION --- */
.brands-worked-with-section {
  position: relative;
  margin-top: 80px;
}

.brands-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
  width: 100%;
}

.brand-card {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.02);
  height: 110px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.brand-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(15, 23, 42, 0.05);
  border-color: rgba(21, 141, 255, 0.2);
}

.brand-svg-logo {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
}

.brand-logo-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* Brands Responsive Overrides */
@media (max-width: 786px) {
  .brands-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
  }
}

@media (max-width: 480px) {

  .about-eyebrow span,
  .about-eyebrow,
  .section-tag,
  .about-tag,
  .why-tag,
  .why-tag-new,
  .format-tag,
  .experience-tag,
  .dist-eyebrow,
  .producer-eyebrow,
  .process-eyebrow-tag,
  .faq-eyebrow-tag,
  .cta-eyebrow-tag,
  .luxury-label-blue,
  .op-eyebrow {
    word-spacing: 3px !important;
    letter-spacing: 0.5px !important;
    display: inline-block !important;
  }

  h1,
  h2,
  .about-heading,
  .section-heading,
  .why-heading,
  .why-heading-new,
  .format-heading,
  .experience-heading,
  .luxury-heading-main,
  .luxury-work-heading,
  .luxury-work-title,
  .producer-heading,
  .process-main-heading,
  .faq-main-heading,
  .cta-main-heading,
  .op-title,
  .hero-title,
  .thankyou-title,
  .dist-subtitle-hero,
  .premium-process-section .process-main-heading,
  .premium-faq-section .faq-main-heading,
  .premium-cta-section .cta-main-heading {
    word-spacing: 1px !important;
    letter-spacing: 0.5px !important;
    font-size: 22px !important;
    line-height: 1.25 !important;
  }

  .about-description p,
  .about-p,
  .about-pillar-desc,
  .hero-desc,
  .why-desc,
  .format-subtitle,
  .format-desc-text,
  .experience-subtitle,
  .luxury-desc-text,
  .luxury-work-subtitle,
  .process-subtitle,
  .faq-subtitle,
  .faq-cta-subtitle,
  .cta-description,
  .op-subtitle,
  .thankyou-desc,
  .section-desc,
  .dist-desc,
  .producer-bio,
  .producer-bio p,
  .journey-desc,
  .feat-desc,
  .step-card-desc,
  .faq-answer p,
  section p,
  .dark-section p,
  p {
    word-spacing: 1.5px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  .brands-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  .brand-card {
    height: 90px !important;
    padding: 12px !important;
  }

  .process-node-card-wrap {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 400px !important;
    margin: 0 auto !important;
  }

  .participate-grid {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }

  .participate-left,
  .participate-right {
    grid-column: span 1 !important;
  }

  .participate-center {
    grid-column: span 1 !important;
    order: -1 !important;
  }

  .hero-stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  .stat-card {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 12px 4px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .stat-card .stat-icon-img {
    width: 24px !important;
    height: 24px !important;
    margin-bottom: 4px !important;
  }

  .stat-card .stat-num {
    font-size: 19px !important;
    line-height: 1.1 !important;
    margin-bottom: 2px !important;
  }

  .stat-card .stat-label {
    font-size: 9.5px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Footer Mobile overrides */
  .footer-new-container {
    flex-direction: column !important;
    gap: 24px !important;
    text-align: center !important;
  }
}

/* Footer Tablet overrides */
@media (max-width: 768px) {
  .footer-new-container {
    flex-direction: column !important;
    gap: 24px !important;
    text-align: center !important;
  }
}

/* --- RESET & BASICS (Scoped to Section) --- */
.about-section-wrapper * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.about-section-wrapper {
  font-family: var(--about-font-body);
  background-color: var(--about-bg-dark-1);
  color: var(--about-text-primary);
  line-height: 1.6;
  position: relative;
  overflow: hidden;
  padding: 100px 0;
  width: 100%;
}

/* Background Technical Grid & Ambient Glow */
.about-bg-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(to right, rgba(0, 200, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 200, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 1;
}

.about-glow-orb {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--about-cyan-glow) 0%, rgba(0, 0, 0, 0) 70%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 1;
}

.about-orb-1 {
  top: -100px;
  right: -100px;
  opacity: 0.4;
}

.about-orb-2 {
  bottom: -150px;
  left: -100px;
  opacity: 0.3;
}

/* --- LAYOUT CONTAINERS --- */
.about-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 2;
}

/* Header Tagline & Title */
.about-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 60px auto;
}

.about-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: rgba(0, 200, 255, 0.08);
  border: 1px solid var(--about-border-cyan);
  border-radius: 30px;
  font-family: var(--about-font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--about-cyan);
  text-transform: uppercase;
  margin-bottom: 20px;
}

.about-badge-dot {
  width: 8px;
  height: 8px;
  background-color: var(--about-cyan);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--about-cyan);
  animation: aboutPulse 2s infinite;
}

@keyframes aboutPulse {
  0% {
    transform: scale(0.95);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.3);
    opacity: 1;
    box-shadow: 0 0 16px var(--about-cyan);
  }

  100% {
    transform: scale(0.95);
    opacity: 0.8;
  }
}

.about-title {
  font-family: var(--about-font-heading);
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
  color: #ffffff;
}

.about-gradient-text {
  background: linear-gradient(135deg, var(--about-cyan) 0%, var(--about-blue) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.about-subtitle {
  font-size: 1.15rem;
  color: var(--about-text-secondary);
  line-height: 1.7;
}

/* --- STATS COUNTER STRIP --- */
.about-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 70px;
}

.about-stat-card {
  background: var(--about-bg-card);
  border: 1px solid var(--about-border-light);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  transition: var(--about-transition);
}

.about-stat-card:hover {
  transform: translateY(-5px);
  border-color: var(--about-border-cyan);
  box-shadow: var(--about-shadow-glow);
  background: var(--about-bg-card-hover);
}

.about-stat-number {
  font-family: var(--about-font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--about-cyan);
  margin-bottom: 6px;
}

.about-stat-label {
  font-size: 0.9rem;
  color: var(--about-text-secondary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* --- MAIN 2-COLUMN FEATURE AREA --- */
.about-main-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-bottom: 80px;
}

/* Left Content & Interactive Tabs */
.about-tabs-container {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--about-border-light);
  padding-bottom: 12px;
}

.about-tab-btn {
  background: transparent;
  border: none;
  color: var(--about-text-muted);
  font-family: var(--about-font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 8px;
  transition: var(--about-transition);
  position: relative;
}

.about-tab-btn:hover {
  color: var(--about-text-primary);
  background: rgba(255, 255, 255, 0.05);
}

.about-tab-btn.active {
  color: var(--about-cyan);
  background: rgba(0, 200, 255, 0.1);
}

.about-tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -13px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--about-cyan);
  box-shadow: 0 0 8px var(--about-cyan);
}

.about-tab-content {
  display: none;
  animation: aboutFadeIn 0.4s ease forwards;
}

.about-tab-content.active {
  display: block;
}

@keyframes aboutFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.about-content-heading {
  font-family: var(--about-font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 16px;
  color: #ffffff;
}

.about-paragraph {
  font-size: 1.05rem;
  color: var(--about-text-secondary);
  line-height: 1.75;
  margin-bottom: 20px;
}

.about-feature-list {
  list-style: none;
  margin-top: 20px;
}

.about-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 0.98rem;
  color: var(--about-text-primary);
}

.about-check-icon {
  width: 20px;
  height: 20px;
  background: rgba(0, 200, 255, 0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--about-cyan);
  flex-shrink: 0;
  margin-top: 2px;
}

.about-check-icon svg {
  width: 12px;
  height: 12px;
  stroke-width: 3;
}

/* Right Side Visual Frame / Collage */
.about-visual-wrapper {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--about-border-cyan);
  box-shadow: var(--about-shadow-card);
  background: var(--about-bg-dark-2);
}

.about-visual-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.about-visual-wrapper:hover .about-visual-img {
  transform: scale(1.03);
}

.about-visual-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 11, 24, 0.1) 0%, rgba(2, 11, 24, 0.7) 100%);
  pointer-events: none;
}

/* ECG Ambient Waveform inside image */
.about-ecg-svg {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  height: 60px;
  z-index: 3;
  pointer-events: none;
}

.about-ecg-path {
  fill: none;
  stroke: var(--about-cyan);
  stroke-width: 2;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: ecgDash 4s linear infinite;
  opacity: 0.8;
}

@keyframes ecgDash {
  0% {
    stroke-dashoffset: 600;
  }

  50% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: -600;
  }
}

/* Floating Technical Badges */
.about-hud-tag {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(2, 11, 24, 0.85);
  border: 1px solid var(--about-border-cyan);
  backdrop-filter: blur(8px);
  padding: 8px 16px;
  border-radius: 8px;
  font-family: var(--about-font-heading);
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  color: var(--about-cyan);
  text-transform: uppercase;
  z-index: 3;
}

/* --- 4-PILLAR FEATURE CARDS --- */
.about-pillars-title {
  text-align: center;
  font-family: var(--about-font-heading);
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 40px;
}

.about-pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.about-pillar-card {
  background: var(--about-bg-card);
  border: 1px solid var(--about-border-light);
  border-radius: 16px;
  padding: 30px 24px;
  transition: var(--about-transition);
  position: relative;
  overflow: hidden;
}

.about-pillar-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--about-cyan), var(--about-blue));
  opacity: 0;
  transition: var(--about-transition);
}

.about-pillar-card:hover {
  transform: translateY(-8px);
  border-color: var(--about-border-cyan);
  background: var(--about-bg-card-hover);
  box-shadow: var(--about-shadow-glow);
}

.about-pillar-card:hover::before {
  opacity: 1;
}

.about-pillar-icon {
  width: 50px;
  height: 50px;
  background: rgba(0, 200, 255, 0.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--about-cyan);
  margin-bottom: 20px;
  transition: var(--about-transition);
}

.about-pillar-card:hover .about-pillar-icon {
  background: var(--about-cyan);
  color: #020b18;
  transform: scale(1.1);
}

.about-pillar-icon svg {
  width: 26px;
  height: 26px;
  stroke-width: 2;
}

.about-pillar-heading {
  font-family: var(--about-font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: #ffffff;
}

.about-pillar-desc {
  font-size: 0.92rem;
  color: var(--about-text-secondary);
  line-height: 1.6;
}

/* --- BANNER QUOTE CARD --- */
.about-quote-banner {
  margin-top: 80px;
  background: linear-gradient(135deg, rgba(8, 41, 74, 0.8) 0%, rgba(3, 19, 38, 0.9) 100%);
  border: 1px solid var(--about-border-cyan);
  border-radius: 20px;
  padding: 40px 50px;
  text-align: center;
  position: relative;
  backdrop-filter: blur(10px);
}

.about-quote-text {
  font-family: var(--about-font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.5;
  margin-bottom: 16px;
}

.about-quote-author {
  font-size: 0.95rem;
  color: var(--about-cyan);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 600;
}

/* --- RESPONSIVE STYLES --- */
@media (max-width: 1024px) {
  .about-title {
    font-size: 2.25rem;
  }

  .about-main-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .about-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-pillars-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .about-section-wrapper {
    padding: 60px 0;
  }

  .about-title {
    font-size: 1.85rem;
  }

  .about-stats-grid {
    grid-template-columns: 1fr;
  }

  .about-pillars-grid {
    grid-template-columns: 1fr;
  }

  .about-tabs-container {
    flex-wrap: wrap;
  }

  .about-quote-banner {
    padding: 30px 20px;
  }

  .about-quote-text {
    font-size: 1.2rem;
  }
}

/* ==========================================================================
   ZOHO FORM STRATEGY SESSION POPUP MODAL STYLES
   ========================================================================== */
.zoho-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  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);
}

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

.zoho-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(4, 14, 26, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.zoho-modal-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 680px;
  height: 85vh;
  max-height: 740px;
  background: linear-gradient(145deg, #091c33 0%, #051324 100%);
  border: 1.5px solid rgba(0, 240, 255, 0.35);
  border-radius: 20px;
  box-shadow: 0 25px 65px rgba(0, 0, 0, 0.7), 0 0 35px rgba(0, 240, 255, 0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.92) translateY(20px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.zoho-modal-overlay.active .zoho-modal-container {
  transform: scale(1) translateY(0);
}

.zoho-modal-close {
  position: absolute;
  top: 14px;
  right: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: #00f0ff;
  font-size: 24px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.25s ease;
}

.zoho-modal-close:hover {
  background: #00f0ff;
  color: #051324;
  transform: rotate(90deg);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.5);
}

.zoho-modal-header {
  padding: 20px 24px 14px;
  border-bottom: 1px solid rgba(0, 240, 255, 0.15);
  background: rgba(0, 240, 255, 0.03);
}

.zoho-modal-title {
  font-family: var(--font-headings);
  font-size: 22px;
  font-weight: 800;
  background: linear-gradient(90deg, #FFFFFF 0%, #00f0ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0 0 4px;
}

.zoho-modal-subtitle {
  font-family: var(--font-body);
  font-size: 13.5px;
  color: #94A3B8;
  margin: 0;
}

.zoho-iframe-wrapper {
  flex: 1;
  width: 100%;
  height: 100%;
  background: #ffffff;
  position: relative;
  overflow: hidden;
}

.zoho-iframe-wrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* ==========================================================================
   THANK YOU PAGE STYLES (MATCHING IMAGE 1 DESIGN & IMAGE 2 CONTENT)
   ========================================================================== */
.thankyou-page-body {
  background-color: #030D18;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.thankyou-section {
  position: relative;
  width: 100%;
  min-height: calc(100vh - 110px);
  padding: 130px 20px 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: 1;
}

.thankyou-container {
  max-width: 1050px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.thankyou-card {
  background: rgba(6, 21, 38, 0.62);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1.5px solid rgba(24, 233, 245, 0.25);
  border-radius: 28px;
  padding: 50px 45px 45px;
  box-shadow: 0 35px 80px rgba(0, 0, 0, 0.65), 0 0 50px rgba(24, 233, 245, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
  text-align: center;
}

.thankyou-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(24, 233, 245, 0.8) 50%, transparent 100%);
}

/* Top eyebrow */
.thankyou-eyebrow-wrapper {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 26px;
}

.thankyou-eyebrow {
  font-family: var(--font-headings);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3.5px;
  color: #16E6E6;
  display: flex;
  align-items: center;
  gap: 8px;
}

.thankyou-accent-line {
  width: 50px;
  height: 2px;
  background-color: #16E6E6;
  box-shadow: 0 0 10px #16E6E6;
  border-radius: 2px;
}

/* Icon / Circular Badge (Image 2 style with Image 1 high-tech blue glow) */
.thankyou-icon-wrapper {
  position: relative;
  width: 110px;
  height: 110px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.thankyou-icon-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(24, 233, 245, 0.35) 0%, rgba(21, 141, 255, 0.25) 50%, transparent 75%);
  pointer-events: none;
  animation: haloPulse 3s ease-in-out infinite alternate;
}

.thankyou-orbital-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 110px;
  height: 110px;
  border: 1.5px dashed rgba(24, 233, 245, 0.55);
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(24, 233, 245, 0.2);
  animation: rotatePlatform1 20s linear infinite;
}

.thankyou-badge-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(145deg, #18E9F5 0%, #158DFF 55%, #0B5CD5 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(21, 141, 255, 0.55), 0 0 25px rgba(24, 233, 245, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.6);
  position: relative;
  z-index: 2;
  color: #FFFFFF;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.thankyou-badge-circle:hover {
  transform: scale(1.06);
  box-shadow: 0 12px 35px rgba(21, 141, 255, 0.7), 0 0 32px rgba(24, 233, 245, 0.6), inset 0 2px 5px rgba(255, 255, 255, 0.8);
}

.thankyou-check-svg {
  width: 40px;
  height: 40px;
  color: #FFFFFF;
  display: block;
}

.thankyou-check-svg path {
  stroke: #FFFFFF !important;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 6px rgba(4, 20, 44, 0.45));
}

@keyframes haloPulse {
  0% {
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0.6;
  }

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

/* Typography from Image 2 */
.thankyou-title {
  margin-bottom: 16px;
}

.thankyou-desc {
  max-width: 620px;
  margin: 0 auto 34px;
}

/* Status / Next Steps Pipeline */
.thankyou-pipeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 860px;
  margin: 0 auto 34px;
}

.pipeline-step {
  background: rgba(13, 36, 61, 0.55);
  border: 1px solid rgba(24, 233, 245, 0.15);
  border-radius: 16px;
  padding: 18px 16px;
  text-align: left;
  position: relative;
  transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.pipeline-step:hover {
  transform: translateY(-3px);
  border-color: rgba(24, 233, 245, 0.4);
  background: rgba(13, 36, 61, 0.8);
}

.pipeline-step.active-step {
  border-color: rgba(24, 233, 245, 0.45);
  background: linear-gradient(135deg, rgba(24, 233, 245, 0.1) 0%, rgba(13, 36, 61, 0.75) 100%);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.step-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.step-badge {
  font-family: var(--font-headings);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 20px;
}

.step-badge.badge-success {
  background: rgba(30, 234, 212, 0.18);
  color: #1EEAD4;
  border: 1px solid rgba(30, 234, 212, 0.35);
}

.step-badge.badge-progress {
  background: rgba(21, 141, 255, 0.18);
  color: #5bb3ff;
  border: 1px solid rgba(21, 141, 255, 0.35);
}

.step-badge.badge-upcoming {
  background: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.step-num {
  font-family: var(--font-headings);
  font-size: 12px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.4);
}

.step-title {
  font-family: var(--font-headings);
  font-size: 14.5px;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 4px;
}

.step-detail {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: #94A3B8;
  line-height: 1.4;
  margin: 0;
}

/* Action Buttons */
.thankyou-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 40px;
}

.thankyou-btn-home {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
}

.thankyou-btn-explore {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
}

/* Distribution Banner inside Card (Image 1 features) */
.thankyou-dist-banner {
  border-top: 1px solid rgba(24, 233, 245, 0.15);
  padding-top: 30px;
  text-align: left;
}

.thankyou-dist-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 12px;
}

.thankyou-dist-title {
  font-family: var(--font-headings);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #8fa0b5;
}

.thankyou-dist-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(24, 233, 245, 0.08);
  border: 1px solid rgba(24, 233, 245, 0.25);
  border-radius: 20px;
  padding: 4px 12px;
  font-family: var(--font-headings);
  font-size: 11.5px;
  font-weight: 700;
  color: #18E9F5;
}

.thankyou-dist-stat-pill span {
  color: #FFFFFF;
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .thankyou-pipeline {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .thankyou-card {
    padding: 40px 24px 35px;
  }

  .thankyou-title {
    font-size: 36px;
  }

  .thankyou-desc {
    font-size: 15px;
  }

  .thankyou-actions {
    flex-direction: column;
    width: 100%;
  }

  .thankyou-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   MASTER UNIFIED MOBILE TYPOGRAPHY OVERRIDE (MAX-WIDTH: 425px)
   Applies consistent typography strictly to mobile screens <= 425px
   ========================================================================== */
@media (max-width: 500px) {

  /* 1. All Eyebrows & Section Tags across EVERY section */
  .about-eyebrow,
  .about-eyebrow *,
  .about-eyebrow span,
  .section-tag,
  .section-tag *,
  .about-tag,
  .about-tag *,
  .why-tag,
  .why-tag *,
  span.why-tag,
  .why-tag-new,
  .why-tag-new *,
  .format-tag,
  .format-tag *,
  .experience-tag,
  .experience-tag *,
  .dist-eyebrow,
  .dist-eyebrow *,
  .producer-eyebrow,
  .producer-eyebrow *,
  .process-eyebrow-tag,
  .process-eyebrow-tag *,
  .faq-eyebrow-tag,
  .faq-eyebrow-tag *,
  .cta-eyebrow-tag,
  .cta-eyebrow-tag *,
  .luxury-label-blue,
  .luxury-label-blue *,
  .op-eyebrow,
  .op-eyebrow *,
  #hero .section-tag,
  #about .about-eyebrow,
  #about .about-eyebrow *,
  #about .about-tag,
  #why-series .why-tag,
  #why-series .why-tag *,
  #why-series span.why-tag,
  #why-series .section-tag,
  #format .format-tag,
  #format .section-tag,
  #experience .experience-tag,
  #experience .section-tag,
  #participate .why-tag-new,
  #participate .section-tag,
  #distribution .dist-eyebrow,
  #digikore .luxury-label-blue,
  #producer .producer-eyebrow,
  #process .process-eyebrow-tag,
  #faq .faq-eyebrow-tag,
  #cta .cta-eyebrow-tag,
  section span[class*="tag"],
  section span[class*="eyebrow"],
  section div[class*="eyebrow"],
  section div[class*="eyebrow"] *,
  section .section-tag {
    word-spacing: 3px !important;
    letter-spacing: 0.5px !important;
    display: inline-block !important;
  }

  /* 2. All Headings (Main, Section, H1, H2, Spans) across EVERY section */
  h1,
  h2,
  h1 *,
  h2 *,
  #hero .hero-title,
  #hero .hero-title *,
  #hero h1,
  #hero h1 *,
  #about .about-heading,
  #about .about-heading *,
  #about h2,
  #about h2 *,
  #why-series .why-heading,
  #why-series .why-heading *,
  #why-series h2,
  #why-series h2 *,
  #format .format-heading,
  #format .format-heading *,
  #format h2,
  #format h2 *,
  #experience .experience-heading,
  #experience .experience-heading *,
  #experience h2,
  #experience h2 *,
  #participate .why-heading-new,
  #participate .why-heading-new *,
  #participate h2,
  #participate h2 *,
  #distribution .dist-subtitle-hero,
  #distribution .dist-subtitle-hero *,
  #distribution h2,
  #distribution h2 *,
  #digikore .luxury-heading-main,
  #digikore .luxury-heading-main *,
  #digikore .luxury-work-heading,
  #digikore .luxury-work-heading *,
  #digikore h2,
  #digikore h2 *,
  #producer .producer-heading,
  #producer .producer-heading *,
  #producer h2,
  #producer h2 *,
  #process .process-main-heading,
  #process .process-main-heading *,
  #process h2,
  #process h2 *,
  #faq .faq-main-heading,
  #faq .faq-main-heading *,
  #faq h2,
  #faq h2 *,
  #cta .cta-main-heading,
  #cta .cta-main-heading *,
  #cta h2,
  #cta h2 *,
  #thankyou .thankyou-title,
  #thankyou .thankyou-title *,
  #thankyou h1,
  #thankyou h1 *,
  .about-heading,
  .about-heading *,
  .section-heading,
  .section-heading *,
  .why-heading,
  .why-heading *,
  .why-heading-new,
  .why-heading-new *,
  .format-heading,
  .format-heading *,
  .experience-heading,
  .experience-heading *,
  .luxury-heading-main,
  .luxury-heading-main *,
  .luxury-work-heading,
  .luxury-work-heading *,
  .luxury-work-title,
  .luxury-work-title *,
  .producer-heading,
  .producer-heading *,
  .process-main-heading,
  .process-main-heading *,
  .faq-main-heading,
  .faq-main-heading *,
  .cta-main-heading,
  .cta-main-heading *,
  .op-title,
  .op-title *,
  .hero-title,
  .hero-title *,
  .thankyou-title,
  .thankyou-title *,
  .dist-subtitle-hero,
  .dist-subtitle-hero *,
  .why-heading-gradient,
  .text-gradient,
  .text-gradient-episode,
  .format-heading-gradient,
  .luxury-text-gradient,
  .producer-text-gradient,
  .process-text-gradient,
  .faq-heading-gradient,
  .cta-heading-gradient,
  .premium-process-section .process-main-heading,
  .premium-faq-section .faq-main-heading,
  .premium-cta-section .cta-main-heading,
  section h1,
  section h1 *,
  section h2,
  section h2 * {
    word-spacing: 1px !important;
    letter-spacing: 0.5px !important;
    font-size: 22px !important;
    line-height: 1.25 !important;
  }

  .why-heading-mobile-br,
  .experience-heading-br,
  .participate-heading-br {
    display: block !important;
  }

  .luxury-work-heading .luxury-work-team {
    display: block !important;
  }

  .luxury-work-heading .luxury-work-worked {
    display: inline !important;
  }

  .luxury-work-heading .luxury-work-on {
    display: inline !important;
  }

  .why-heading-line-2 {
    white-space: nowrap !important;
    display: inline-block !important;
  }

  #format .format-line-1,
  #format .format-line-2,
  #format .format-line-3,
  .format-line-1,
  .format-line-2,
  .format-line-3,
  #experience .experience-line-1,
  #experience .experience-line-2,
  #experience .experience-line-3,
  .experience-line-1,
  .experience-line-2,
  .experience-line-3,
  #faq .faq-heading-line-1,
  #faq .faq-heading-line-2,
  .faq-heading-line-1,
  .faq-heading-line-2 {
    display: block !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  /* 3. All Descriptions, Subtitles & Paragraphs across EVERY section */
  #hero .hero-desc,
  #hero p,
  #about .about-description p,
  #about .about-p,
  #about .about-pillar-desc,
  #about p,
  #why-series .why-desc,
  #why-series p,
  #format .format-subtitle,
  #format .format-desc-text,
  #format p,
  #experience .experience-subtitle,
  #experience .journey-desc,
  #experience p,
  #participate .feat-desc,
  #participate .journey-desc,
  #participate p,
  #distribution .dist-desc,
  #distribution p,
  #digikore .luxury-desc-text,
  #digikore .luxury-work-subtitle,
  #digikore p,
  #producer .producer-bio,
  #producer .producer-bio p,
  #producer p,
  #process .process-subtitle,
  #process .step-card-desc,
  #process p,
  #faq .faq-subtitle,
  #faq .faq-answer p,
  #faq .faq-cta-subtitle,
  #faq p,
  #cta .cta-description,
  #cta p,
  #thankyou .thankyou-desc,
  #thankyou p,
  .about-description p,
  .about-p,
  .about-pillar-desc,
  .hero-desc,
  .why-desc,
  .format-subtitle,
  .format-desc-text,
  .experience-subtitle,
  .luxury-desc-text,
  .luxury-work-subtitle,
  .process-subtitle,
  .faq-subtitle,
  .faq-cta-subtitle,
  .cta-description,
  .op-subtitle,
  .thankyou-desc,
  .section-desc,
  .dist-desc,
  .producer-bio,
  .producer-bio p,
  .journey-desc,
  .feat-desc,
  .step-card-desc,
  .faq-answer p,
  section p,
  .dark-section p,
  p {
    word-spacing: 1.5px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  /* 4. Why This Series Infographic Mobile Stack (Fix Overlap at <= 425px) */
  #why-series .why-infographic-container,
  .why-infographic-container {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    position: relative !important;
    transform: none !important;
    margin: 30px auto 0 auto !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
  }

  #why-series .main-orbit-ring,
  #why-series .secondary-ring,
  #why-series .ambient-glow,
  #why-series .svg-connections-static,
  #why-series .orbit-dot,
  .main-orbit-ring,
  .secondary-ring,
  .ambient-glow,
  .svg-connections-static,
  .orbit-dot {
    display: none !important;
  }

  #why-series .info-center,
  .info-center {
    position: relative !important;
    width: 140px !important;
    height: 140px !important;
    margin: 0 auto 16px auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    border-radius: 50% !important;
    border: 3px solid #22D9D6 !important;
    box-shadow: 0 0 25px rgba(34, 217, 214, 0.45) !important;
    overflow: hidden !important;
    display: block !important;
    animation: none !important;
    z-index: 2 !important;
  }

  #why-series .info-center img,
  .info-center img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  #why-series .info-node,
  .info-node {
    position: relative !important;
    width: 100% !important;
    max-width: 360px !important;
    height: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    background: rgba(9, 27, 48, 0.88) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(0, 240, 255, 0.22) !important;
    border-radius: 16px !important;
    padding: 14px 18px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
  }

  #why-series .node-top,
  #why-series .node-bottom,
  #why-series .node-left,
  #why-series .node-right,
  .node-top,
  .node-bottom,
  .node-left,
  .node-right {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 360px !important;
    box-sizing: border-box !important;
  }

  #why-series .node-top::after,
  #why-series .node-top::before,
  #why-series .node-bottom::after,
  #why-series .node-bottom::before,
  #why-series .node-left::after,
  #why-series .node-left::before,
  #why-series .node-right::after,
  #why-series .node-right::before {
    display: none !important;
    content: none !important;
  }

  #why-series .info-node-icon,
  .info-node-icon {
    display: flex !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 50% !important;
    border: 1.5px solid rgba(0, 240, 255, 0.4) !important;
    background: rgba(0, 240, 255, 0.1) !important;
    align-items: center !important;
    justify-content: center !important;
    color: #1DE0C6 !important;
    flex-shrink: 0 !important;
    box-shadow: 0 0 14px rgba(29, 224, 198, 0.25) !important;
    position: relative !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
  }

  #why-series .node-left .info-node-icon {
    order: -1 !important;
  }

  #why-series .info-node-icon svg,
  .info-node-icon svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
  }

  #why-series .info-node-text,
  #why-series .node-left .info-node-text,
  #why-series .node-right .info-node-text,
  #why-series .node-top .info-node-text,
  #why-series .node-bottom .info-node-text,
  .info-node-text {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
  }

  #why-series .info-node-text h4,
  .info-node-text h4 {
    font-family: var(--font-headings) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    margin: 0 0 3px 0 !important;
    letter-spacing: 0.3px !important;
    text-align: left !important;
    white-space: normal !important;
  }

  #why-series .info-node-text p,
  .info-node-text p {
    font-family: var(--font-body) !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    margin: 0 !important;
    text-align: left !important;
    white-space: normal !important;
  }

  /* 5. Master Unified Mobile Spacing System across the Entire Page (<= 425px) */
  /* Section Padding */
  section,
  section[id],
  #about,
  #why-series,
  #format,
  #experience,
  #participate,
  #distribution,
  #digikore,
  #producer,
  #process,
  #faq,
  #cta,
  #thankyou,
  .premium-process-section,
  .premium-faq-section,
  .premium-cta-section {
    padding: 40px 0 !important;
  }

  /* Containers */
  .container,
  .about-container,
  .why-grid,
  .experience-container,
  .participate-container,
  .dist-container,
  .luxury-container,
  .producer-container,
  .process-max-container,
  .faq-max-container,
  .cta-max-container,
  .footer-container,
  .footer-max-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  /* Grid & Flex Layout Gaps */
  .hero-grid,
  .about-new-layout,
  .about-col-right,
  .why-grid,
  .format-grid,
  .experience-grid,
  .journey-grid,
  .participate-grid,
  .dist-grid,
  .dist-dashboard-split,
  .luxury-section-split,
  .luxury-posters-showcase,
  .op-grid,
  .brands-grid,
  .producer-split,
  .producer-stats,
  .process-grid,
  .faq-grid,
  .cta-main-grid {
    gap: 16px !important;
    row-gap: 16px !important;
  }

  /* Content Wrapper Gaps */
  .why-content,
  .about-text-col,
  .dist-split-left,
  .luxury-split-left,
  .producer-left,
  .cta-content-wrapper {
    gap: 0 !important;
  }

  /* Eyebrows & Tags Bottom Margin across ALL sections */
  .about-eyebrow,
  .section-tag,
  .about-tag,
  .why-tag,
  .why-tag-new,
  .format-tag,
  .experience-tag,
  .dist-eyebrow,
  .producer-eyebrow,
  .process-eyebrow-tag,
  .faq-eyebrow-tag,
  .cta-eyebrow-tag,
  .luxury-label-blue,
  .op-eyebrow,
  #hero .section-tag,
  #about .about-eyebrow,
  #why-series .why-tag,
  #format .format-tag,
  #experience .experience-tag,
  #participate .why-tag-new,
  #distribution .dist-eyebrow,
  #digikore .luxury-label-blue,
  #producer .producer-eyebrow,
  #process .process-eyebrow-tag,
  #faq .faq-eyebrow-tag,
  #cta .cta-eyebrow-tag {
    margin-bottom: 12px !important;
  }

  /* Dividers & Accent Lines across ALL sections */
  .why-divider,
  .about-eyebrow-line,
  .luxury-blue-divider,
  .format-divider,
  .producer-heading-line,
  .dist-accent-line,
  .faq-cta-accent-line,
  #why-series .why-divider,
  #format .format-divider {
    width: 38px !important;
    height: 2.5px !important;
    margin: 0 auto 14px auto !important;
  }

  #digikore .luxury-blue-divider,
  #producer .producer-heading-line {
    margin: 0 0 14px 0 !important;
  }

  /* Headings Bottom Margin across ALL sections */
  h1,
  h2,
  .hero-title,
  .about-heading,
  .section-heading,
  .why-heading,
  .why-heading-new,
  .format-heading,
  .experience-heading,
  .luxury-heading-main,
  .luxury-work-heading,
  .producer-heading,
  .process-main-heading,
  .faq-main-heading,
  .cta-main-heading,
  .thankyou-title,
  #hero .hero-title,
  #about .about-heading,
  #why-series .why-heading,
  #format .format-heading,
  #experience .experience-heading,
  #participate .why-heading-new,
  #distribution .dist-subtitle-hero,
  #digikore .luxury-heading-main,
  #producer .producer-heading,
  #process .process-main-heading,
  #faq .faq-main-heading,
  #cta .cta-main-heading {
    margin-bottom: 16px !important;
    line-height: 1.32 !important;
  }

  /* Paragraphs & Descriptions Bottom Margin across ALL sections */
  p,
  .hero-desc,
  .about-description p,
  .about-p,
  .why-desc,
  .format-subtitle,
  .format-desc-text,
  .experience-subtitle,
  .luxury-desc-text,
  .luxury-work-subtitle,
  .process-subtitle,
  .faq-subtitle,
  .cta-description,
  .op-subtitle,
  .thankyou-desc,
  .section-desc,
  .dist-desc,
  .producer-bio,
  .producer-bio p,
  #why-series .why-desc {
    margin-bottom: 12px !important;
    max-width: 100% !important;
    line-height: 1.6 !important;
  }

  /* Section Intro Subtitles before Grids/Cards */
  .hero-desc,
  .format-subtitle,
  .experience-subtitle,
  .process-subtitle,
  .faq-subtitle,
  .cta-description,
  .dist-desc,
  .luxury-desc-text,
  .luxury-work-subtitle,
  .why-desc:last-of-type,
  #hero .hero-desc,
  #format .format-subtitle,
  #experience .experience-subtitle,
  #process .process-subtitle,
  #faq .faq-subtitle,
  #cta .cta-description,
  #why-series .why-desc:last-of-type {
    margin-bottom: 26px !important;
  }

  p br,
  .faq-subtitle br,
  .format-subtitle br,
  .experience-subtitle br,
  .hero-desc br,
  .why-desc br,
  .luxury-desc-text br,
  .luxury-work-subtitle br,
  .cta-description br {
    display: none !important;
  }

  p:last-of-type,
  .about-description p:last-of-type {
    margin-bottom: 0 !important;
  }

  /* Hero Specific Mobile Spacing (Fully Enclosed Dark Background with Zero White Bleed) */
  #hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-top: 110px !important;
    padding-bottom: 50px !important;
    min-height: auto !important;
    height: auto !important;
    background-color: #051223 !important;
    background-image: linear-gradient(rgba(5, 18, 35, 0.88), rgba(5, 18, 35, 0.95)), url('assets/hero_background.jpg') !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: cover !important;
    position: relative !important;
    overflow: hidden !important;
    z-index: 5 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #hero .hero-container,
  #hero .container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    position: relative !important;
    z-index: 2 !important;
  }

  #hero .hero-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    gap: 24px !important;
    margin-bottom: 24px !important;
  }

  #hero .hero-title {
    margin-top: 6px !important;
    margin-bottom: 16px !important;
  }

  #hero .hero-desc {
    margin-bottom: 26px !important;
  }

  #hero .hero-ctas {
    gap: 12px !important;
    margin-bottom: 0 !important;
    width: 100% !important;
  }

  #hero .hero-video-card-wrapper,
  #hero .hero-video-wrapper,
  #hero .hero-right {
    margin-bottom: 0 !important;
    width: 100% !important;
  }

  .stats-banner-section {
    margin-top: -90px !important;
    position: relative !important;
    z-index: 10 !important;
    background: transparent !important;
    border-bottom: none !important;
  }

  #hero .hero-stats,
  .hero-stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    margin: 0 auto !important;
    position: relative !important;
    z-index: 10 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #hero .stat-card,
  .stat-card {
    background: #06172D !important;
    border: 1px solid rgba(0, 240, 255, 0.25) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5) !important;
    border-radius: 16px !important;
    padding: 14px 6px !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #about.about-section,
  #about {
    margin-top: 0 !important;
    padding-top: 40px !important;
    position: relative !important;
    z-index: 1 !important;
    background: linear-gradient(180deg, #F4F8FD 0%, #EBF4FC 100%) !important;
  }

  /* About Feature Pillars Cards (Consistent Card System <= 425px) */
  #about .about-pillars-card,
  .about-pillars-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    margin-top: 18px !important;
  }

  #about .about-pillar-item,
  .about-pillar-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 16px 16px !important;
    border-radius: 16px !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(15, 100, 232, 0.12) !important;
    box-shadow: 0 6px 18px rgba(8, 27, 60, 0.05) !important;
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
  }

  #about .about-pillar-item:not(:last-child)::after,
  .about-pillar-item:not(:last-child)::after {
    display: none !important;
  }

  #about .about-pillar-icon-box,
  .about-pillar-icon-box {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 50% !important;
    background: #FFFFFF !important;
    border: 1.5px solid rgba(15, 100, 232, 0.25) !important;
    box-shadow: 0 4px 14px rgba(15, 100, 232, 0.15) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #0F64E8 !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
  }

  #about .about-pillar-icon-box svg,
  .about-pillar-icon-box svg {
    width: 20px !important;
    height: 20px !important;
  }

  #about .about-pillar-text,
  .about-pillar-text {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  #about .about-pillar-title,
  .about-pillar-title {
    font-family: var(--font-headings) !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #081B3C !important;
    letter-spacing: 0.5px !important;
    word-spacing: 1px !important;
    margin: 0 0 3px 0 !important;
    text-transform: uppercase !important;
    text-align: left !important;
  }

  #about .about-pillar-desc,
  .about-pillar-desc {
    font-family: var(--font-body) !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    color: #556B82 !important;
    margin: 0 !important;
    text-align: left !important;
  }

  /* Why Section Infographic Spacing */
  #why-series .why-right {
    margin-top: 6px !important;
  }

  #why-series .why-infographic-container,
  .why-infographic-container {
    margin: 8px auto 0 auto !important;
    gap: 12px !important;
  }

  #why-series .info-center,
  .info-center {
    width: 110px !important;
    height: 110px !important;
    margin: 0 auto 12px auto !important;
  }

  /* Participate Section Mobile Layout (Perfect 2x3 Grid <= 425px) */
  #why-participate,
  #participate {
    padding: 40px 0 !important;
  }

  #why-participate .ecg-divider-container,
  #participate .ecg-divider-container {
    margin: 0 auto 18px auto !important;
  }

  .participate-heading-br {
    display: block !important;
  }

  #why-participate .connections-wrapper,
  #participate .connections-wrapper,
  .connections-wrapper {
    display: none !important;
  }

  #why-participate .participate-grid,
  #participate .participate-grid,
  .participate-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    column-gap: 12px !important;
    row-gap: 18px !important;
    width: 100% !important;
    margin-top: 6px !important;
    min-height: auto !important;
  }

  #why-participate .participate-center,
  #participate .participate-center,
  .participate-center {
    grid-column: 1 / -1 !important;
    order: -1 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto 6px auto !important;
    min-height: auto !important;
  }

  #why-participate .hospital-wrapper,
  #participate .hospital-wrapper,
  .hospital-wrapper {
    width: 100% !important;
    max-width: 280px !important;
    min-height: 180px !important;
    height: auto !important;
    margin: 0 auto !important;
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  #why-participate .hospital-img,
  #participate .hospital-img,
  .hospital-img {
    width: 100% !important;
    max-width: 220px !important;
    height: auto !important;
    display: block !important;
  }

  #why-participate .holo-rings-container,
  #participate .holo-rings-container,
  .holo-rings-container {
    width: 260px !important;
    height: 260px !important;
    bottom: -15px !important;
  }

  #why-participate .participate-left,
  #why-participate .participate-right,
  #participate .participate-left,
  #participate .participate-right,
  .participate-left,
  .participate-right {
    display: contents !important;
  }

  #why-participate .item-l3,
  #participate .item-l3,
  #why-participate .item-r3,
  #participate .item-r3 {
    grid-column: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    width: 100% !important;
  }

  #why-participate .feat-item,
  #participate .feat-item,
  .feat-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
  }

  #why-participate .feat-item[data-side="left"],
  #why-participate .feat-item[data-side="right"],
  #participate .feat-item[data-side="left"],
  #participate .feat-item[data-side="right"] {
    flex-direction: column !important;
  }

  #why-participate .feat-icon-wrapper,
  #participate .feat-icon-wrapper,
  .feat-icon-wrapper {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    margin-bottom: -18px !important;
    position: relative !important;
    z-index: 5 !important;
    border-radius: 50% !important;
    background: #FFFFFF !important;
    border: 1.5px solid rgba(15, 100, 232, 0.25) !important;
    box-shadow: 0 4px 14px rgba(15, 100, 232, 0.15) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #why-participate .feat-svg-icon,
  #participate .feat-svg-icon,
  .feat-svg-icon {
    width: 20px !important;
    height: 20px !important;
  }

  #why-participate .feat-text,
  #why-participate .feat-item[data-side="left"] .feat-text,
  #why-participate .feat-item[data-side="right"] .feat-text,
  #participate .feat-text,
  #participate .feat-item[data-side="left"] .feat-text,
  #participate .feat-item[data-side="right"] .feat-text,
  .feat-text {
    width: 100% !important;
    max-width: 100% !important;
    padding: 24px 8px 14px 8px !important;
    border-radius: 16px !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(15, 100, 232, 0.12) !important;
    box-shadow: 0 6px 18px rgba(8, 27, 60, 0.05) !important;
    text-align: center !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 100px !important;
    box-sizing: border-box !important;
  }

  #why-participate .feat-title,
  #participate .feat-title,
  .feat-title {
    font-family: var(--font-headings) !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #081B3C !important;
    margin-bottom: 4px !important;
    white-space: normal !important;
    line-height: 1.25 !important;
    text-align: center !important;
  }

  #why-participate .feat-desc,
  #participate .feat-desc,
  .feat-desc {
    font-family: var(--font-body) !important;
    font-size: 10.5px !important;
    line-height: 1.35 !important;
    color: #556B82 !important;
    margin: 0 !important;
    text-align: center !important;
  }

  /* Distribution Dashboard Spacing */
  #distribution .dist-dashboard-inner {
    padding: 24px 16px !important;
    border-radius: 20px !important;
    margin-top: 6px !important;
  }

  /* Section Separators & Digikore Subsections Spacing */
  .luxury-middle-separator {
    margin: 36px auto !important;
    width: 92% !important;
    height: 1px !important;
    background-color: rgba(15, 100, 232, 0.14) !important;
    display: block !important;
  }

  .luxury-work-section,
  .original-productions-section,
  .brands-worked-with-section {
    padding: 10px 0 0 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .luxury-work-section .why-tag-new {
    margin-bottom: 12px !important;
  }

  .luxury-work-section .luxury-work-heading {
    margin-bottom: 16px !important;
    line-height: 1.32 !important;
  }

  .luxury-work-section .luxury-work-subtitle {
    margin-bottom: 26px !important;
    line-height: 1.6 !important;
    display: block !important;
  }

  /* Digikore Posters, Original Productions & Brands Spacing */
  #digikore {
    padding: 45px 0 50px 0 !important;
  }

  .luxury-posters-showcase,
  #digikore .luxury-posters-showcase {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    row-gap: 16px !important;
    width: 100% !important;
    margin-bottom: 6px !important;
  }

  .luxury-poster-card,
  #digikore .luxury-poster-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 14px !important;
  }

  .poster-image-wrapper,
  #digikore .poster-image-wrapper {
    width: 100% !important;
    aspect-ratio: 2 / 3 !important;
    height: auto !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 6px 16px rgba(8, 27, 60, 0.12) !important;
  }

  .poster-image-img,
  #digikore .poster-image-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  .poster-info-block,
  #digikore .poster-info-block {
    padding-top: 8px !important;
    text-align: center !important;
  }

  .poster-title-text,
  #digikore .poster-title-text {
    font-family: var(--font-headings) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #081B3C !important;
    margin-bottom: 2px !important;
    line-height: 1.25 !important;
    text-align: center !important;
  }

  .poster-category-text,
  #digikore .poster-category-text {
    font-family: var(--font-body) !important;
    font-size: 11px !important;
    color: #8C9BAE !important;
    text-align: center !important;
  }

  #digikore .op-grid {
    gap: 16px !important;
    row-gap: 16px !important;
    margin-top: 8px !important;
    margin-bottom: 6px !important;
  }

  #digikore .op-card {
    border-radius: 16px !important;
    margin-bottom: 0 !important;
  }

  #digikore .brands-grid {
    gap: 12px !important;
    row-gap: 12px !important;
    margin-top: 8px !important;
    margin-bottom: 20px !important;
  }

  #digikore .brand-card {
    border-radius: 14px !important;
    margin-bottom: 0 !important;
  }

  /* Producer Section Mobile Layout (Single Column Cards <= 425px) */
  #producer-section,
  #producer,
  .producer-section {
    padding: 40px 0 !important;
  }

  #producer-section .producer-split,
  #producer .producer-split,
  .producer-split {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    width: 100% !important;
  }

  #producer-section .producer-left,
  #producer .producer-left,
  .producer-left {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  #producer-section .producer-eyebrow,
  #producer .producer-eyebrow,
  .producer-eyebrow {
    margin-bottom: 0 !important;
    text-align: center !important;
  }

  #producer-section .producer-divider,
  #producer .producer-divider,
  .producer-divider {
    width: 45px !important;
    height: 3px !important;
    margin: 10px auto 16px auto !important;
    background: linear-gradient(90deg, #21D4FD 0%, #2D7FF9 100%) !important;
  }

  #producer-section .producer-heading,
  #producer .producer-heading,
  .producer-heading {
    margin-bottom: 24px !important;
    text-align: center !important;
  }

  #producer-section .producer-cards-stack,
  #producer .producer-cards-stack,
  .producer-cards-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }

  #producer-section .producer-info-card,
  #producer .producer-info-card,
  .producer-info-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 16px 16px !important;
    border-radius: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: rgba(9, 27, 48, 0.85) !important;
    border: 1px solid rgba(0, 240, 255, 0.22) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
    height: auto !important;
  }

  #producer-section .producer-icon-wrap,
  #producer .producer-icon-wrap,
  .producer-icon-wrap {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 50% !important;
    background: rgba(0, 240, 255, 0.1) !important;
    border: 1.5px solid rgba(0, 240, 255, 0.35) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
  }

  #producer-section .producer-icon-wrap img,
  #producer .producer-icon-wrap img {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
  }

  #producer-section .producer-info-text,
  #producer .producer-info-text,
  .producer-info-text {
    flex: 1 !important;
    text-align: left !important;
  }

  #producer-section .producer-info-text p,
  #producer .producer-info-text p,
  .producer-info-text p {
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    color: rgba(255, 255, 255, 0.88) !important;
    margin: 0 !important;
    text-align: left !important;
    word-spacing: 1px !important;
  }

  #producer-section .producer-right,
  #producer .producer-right,
  .producer-right {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin-top: 8px !important;
  }

  #producer-section .producer-image-wrapper,
  #producer .producer-image-wrapper,
  .producer-image-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 16/9 !important;
    height: auto !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    margin: 0 auto !important;
    border: 1.5px solid rgba(30, 79, 134, 0.35) !important;
  }

  #producer-section .producer-image,
  #producer .producer-image,
  .producer-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  #producer-section .producer-usp-grid,
  #producer .producer-usp-grid,
  .producer-usp-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    margin-top: 14px !important;
    width: 100% !important;
  }

  #producer-section .producer-usp-card,
  #producer .producer-usp-card,
  .producer-usp-card {
    padding: 8px 10px !important;
    min-height: auto !important;
    gap: 8px !important;
    border-radius: 10px !important;
    background: rgba(9, 27, 48, 0.85) !important;
    border: 1px solid rgba(0, 240, 255, 0.2) !important;
  }

  #producer-section .usp-icon-box,
  .usp-icon-box {
    width: 30px !important;
    height: 30px !important;
    border-radius: 8px !important;
  }

  #producer-section .usp-icon-box img,
  #producer-section .usp-icon-box svg,
  .usp-icon-box img,
  .usp-icon-box svg {
    width: 15px !important;
    height: 15px !important;
  }

  #producer-section .prod-stat-number,
  .prod-stat-number {
    font-size: 16px !important;
  }

  #producer-section .prod-stat-plus,
  .prod-stat-plus {
    font-size: 13px !important;
  }

  #producer-section .usp-label-text,
  .usp-label-text {
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  /* Process Section Mobile Layout (Clean Vertical Timeline <= 425px) */
  #process,
  .premium-process-section {
    padding: 40px 0 !important;
  }

  .process-timeline-container {
    width: 100% !important;
    margin-top: 6px !important;
  }

  .timeline-connecting-line {
    display: none !important;
  }

  #process .process-grid,
  .premium-process-section .process-grid,
  .process-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
    row-gap: 16px !important;
    width: 100% !important;
    margin-top: 6px !important;
  }

  #process .process-node-card-wrap,
  .premium-process-section .process-node-card-wrap,
  .process-node-card-wrap {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 360px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  #process .timeline-connector-group,
  .premium-process-section .timeline-connector-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin-bottom: -1px !important;
    z-index: 5 !important;
    position: relative !important;
  }

  #process .timeline-circle,
  .premium-process-section .timeline-circle {
    width: 40px !important;
    height: 40px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #1DE0C6 0%, #2091D8 50%, #0F64E8 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 14px rgba(15, 100, 232, 0.25) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #process .vertical-connector-line,
  .premium-process-section .vertical-connector-line {
    width: 2px !important;
    height: 12px !important;
    background: linear-gradient(to bottom, #2091D8, rgba(15, 100, 232, 0.3)) !important;
  }

  #process .vertical-connector-dot,
  .premium-process-section .vertical-connector-dot {
    width: 4px !important;
    height: 4px !important;
  }

  #process .premium-step-card,
  .premium-process-section .premium-step-card,
  .step-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 22px 18px 20px 18px !important;
    border-radius: 20px !important;
    min-height: auto !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(15, 100, 232, 0.12) !important;
    box-shadow: 0 8px 24px rgba(8, 27, 60, 0.06) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  #process .step-icon-outer-container,
  .premium-process-section .step-icon-outer-container {
    width: 52px !important;
    height: 52px !important;
    margin-bottom: 12px !important;
  }

  #process .step-icon-wrapper-circle,
  .premium-process-section .step-icon-wrapper-circle {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    background: rgba(15, 100, 232, 0.06) !important;
    border: 1px solid rgba(15, 100, 232, 0.18) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #process .premium-step-icon,
  .premium-process-section .premium-step-icon {
    width: 26px !important;
    height: 26px !important;
    object-fit: contain !important;
  }

  #process .step-card-title,
  .premium-process-section .step-card-title {
    font-family: var(--font-headings) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #081B3C !important;
    margin-bottom: 6px !important;
    line-height: 1.3 !important;
    text-align: center !important;
  }

  #process .step-card-underline-wrapper,
  .premium-process-section .step-card-underline-wrapper {
    margin: 0 auto 10px auto !important;
  }

  #process .step-card-underline-bar,
  .premium-process-section .step-card-underline-bar {
    width: 30px !important;
    height: 2px !important;
    background: #1DE0C6 !important;
    border-radius: 2px !important;
  }

  #process .step-card-desc,
  .premium-process-section .step-card-desc {
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    color: #556B82 !important;
    margin: 0 !important;
    text-align: center !important;
    word-spacing: 1px !important;
  }

  /* FAQ Section Spacing */
  #faq .faq-grid {
    gap: 12px !important;
    margin-top: 6px !important;
  }

  #faq .faq-item {
    margin-bottom: 12px !important;
    border-radius: 16px !important;
  }

  #faq .faq-cta-box {
    margin-top: 28px !important;
    padding: 24px 16px !important;
    border-radius: 20px !important;
  }

  /* CTA Section Spacing */
  #cta .cta-main-glass-panel {
    padding: 30px 16px !important;
    border-radius: 24px !important;
  }

  /* 6. Specialty Carousel 2-Card Mobile Layout & Spacing (<= 425px) */
  #format {
    padding: 40px 0 !important;
  }

  #format .format-divider {
    margin: 0 auto 14px auto !important;
  }

  #format .format-heading {
    margin-bottom: 16px !important;
    line-height: 1.32 !important;
  }

  #format .format-subtitle {
    margin-bottom: 26px !important;
  }

  #format .carousel-outer,
  .carousel-outer {
    position: relative !important;
    padding: 0 !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #format .carousel-container,
  .carousel-container {
    display: flex !important;
    gap: 10px !important;
    padding: 6px 0 12px 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
    width: 100% !important;
  }

  #format .carousel-card,
  .carousel-card {
    flex: 0 0 calc(50% - 5px) !important;
    width: calc(50% - 5px) !important;
    min-width: calc(50% - 5px) !important;
    max-width: calc(50% - 5px) !important;
    height: 230px !important;
    border-radius: 16px !important;
    scroll-snap-align: start !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 6px 18px rgba(8, 27, 60, 0.08) !important;
    border: 1px solid rgba(15, 100, 232, 0.15) !important;
  }

  #format .card-img-wrapper,
  .card-img-wrapper {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  #format .carousel-card img,
  .carousel-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  #format .card-bottom-panel,
  .card-bottom-panel {
    position: absolute !important;
    bottom: 8px !important;
    left: 8px !important;
    right: 8px !important;
    height: 38px !important;
    padding: 0 6px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #format .card-specialty-title,
  .card-specialty-title {
    font-family: var(--font-headings) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #081B3C !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
  }

  #format .carousel-btn,
  .carousel-btn {
    width: 32px !important;
    height: 32px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 4px 14px rgba(8, 27, 60, 0.15) !important;
    z-index: 10 !important;
  }

  #format .carousel-btn.prev,
  .carousel-btn.prev {
    left: -4px !important;
  }

  #format .carousel-btn.next,
  .carousel-btn.next {
    right: -4px !important;
  }

  #format .carousel-btn svg,
  .carousel-btn svg {
    width: 15px !important;
    height: 15px !important;
  }

  #format .carousel-dots,
  .carousel-dots {
    display: flex !important;
    justify-content: center !important;
    gap: 6px !important;
    margin-top: 14px !important;
  }

  #format .carousel-dot,
  .carousel-dot {
    width: 6px !important;
    height: 6px !important;
  }

  #format .bottom-specialty-pill-container,
  .bottom-specialty-pill-container {
    margin-top: 22px !important;
    padding: 0 !important;
    width: 100% !important;
  }

  #format .bottom-specialty-pill,
  .bottom-specialty-pill {
    padding: 16px 20px !important;
    border-radius: 16px !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #format .format-desc-text,
  .format-desc-text {
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  /* 7. Experience Journey Cards Spacing & Legibility Fix (<= 425px) */
  #experience .experience-tag,
  .experience-tag {
    margin-bottom: 12px !important;
  }

  #experience .experience-heading,
  .experience-heading {
    margin-bottom: 16px !important;
    line-height: 1.25 !important;
  }

  #experience .experience-line-1,
  #experience .experience-line-2,
  #experience .experience-line-3,
  .experience-line-1,
  .experience-line-2,
  .experience-line-3 {
    display: block !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  #experience .experience-subtitle,
  .experience-subtitle {
    margin-bottom: 26px !important;
    line-height: 1.6 !important;
  }

  #experience .journey-box-outer,
  .journey-box-outer {
    margin-top: 6px !important;
    width: 100% !important;
  }

  #experience .journey-box,
  .journey-box {
    padding: 38px 12px 28px 12px !important;
    border-radius: 24px !important;
    overflow: hidden !important;
  }

  #experience .journey-grid,
  .journey-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: auto !important;
    column-gap: 14px !important;
    row-gap: 28px !important;
    margin-top: 6px !important;
    width: 100% !important;
    height: auto !important;
  }

  #experience .journey-item,
  .journey-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
  }

  #experience .journey-icon-circle-wrapper,
  .journey-icon-circle-wrapper {
    width: 70px !important;
    height: 70px !important;
    margin-bottom: 0 !important;
    z-index: 3 !important;
    position: relative !important;
  }

  #experience .journey-icon-circle,
  .journey-icon-circle {
    width: 70px !important;
    height: 70px !important;
    border: 1px solid rgba(0, 240, 255, 0.45) !important;
    box-shadow: 0 0 14px rgba(0, 240, 255, 0.2) !important;
  }

  #experience .journey-icon-circle .hud-png-icon,
  .journey-icon-circle .hud-png-icon {
    width: 32px !important;
    height: 32px !important;
  }

  #experience .ring-1,
  .ring-1 {
    width: 80px !important;
    height: 80px !important;
  }

  #experience .ring-2,
  .ring-2 {
    width: 90px !important;
    height: 90px !important;
  }

  #experience .journey-card,
  .journey-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: -24px !important;
    padding: 34px 10px 18px 10px !important;
    border-radius: 16px !important;
    min-height: 155px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    box-sizing: border-box !important;
    background: rgba(9, 27, 48, 0.88) !important;
    border: 1px solid rgba(0, 240, 255, 0.25) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
  }

  #experience .journey-title,
  .journey-title {
    color: #FFFFFF !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin-bottom: 6px !important;
    text-align: center !important;
  }

  #experience .journey-desc,
  .journey-desc {
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    margin: 0 0 8px 0 !important;
    text-align: center !important;
  }
}

/* ==========================================================================
   EXTRA SMALL MOBILE (MAX-WIDTH: 360px & MAX-WIDTH: 320px)
   Fine-tuned scaling for compact devices (e.g. 320px - 360px viewports)
   ========================================================================== */
@media (max-width: 360px) {

  /* Global Container Padding & Rhythm */
  .container,
  .about-container,
  .why-grid,
  .experience-container,
  .participate-container,
  .dist-container,
  .luxury-container,
  .producer-container,
  .process-max-container,
  .faq-max-container,
  .cta-max-container,
  .footer-container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  section,
  section[id],
  #about,
  #why-series,
  #format,
  #experience,
  #participate,
  #distribution,
  #digikore,
  #producer,
  #process,
  #faq,
  #cta,
  #thankyou,
  .premium-process-section,
  .premium-faq-section,
  .premium-cta-section {
    padding: 32px 0 !important;
  }

  /* Typography Scaling */
  .about-eyebrow,
  .section-tag,
  .about-tag,
  .why-tag,
  .format-tag,
  .experience-tag,
  .why-tag-new,
  .dist-eyebrow,
  .producer-eyebrow,
  .process-eyebrow-tag,
  .faq-eyebrow-tag,
  .cta-eyebrow-tag,
  .luxury-label-blue,
  .op-eyebrow {
    font-size: 11px !important;
    word-spacing: 1.5px !important;
    letter-spacing: 0.5px !important;
  }

  h1,
  h2,
  h1 *,
  h2 *,
  #hero .hero-title,
  #hero .hero-title *,
  .about-heading,
  .about-heading *,
  .why-heading,
  .why-heading *,
  .why-heading-new,
  .why-heading-new *,
  .format-heading,
  .format-heading *,
  .experience-heading,
  .experience-heading *,
  .dist-heading,
  .dist-heading *,
  .luxury-heading-main,
  .luxury-heading-main *,
  .luxury-work-heading,
  .luxury-work-heading *,
  .producer-heading,
  .producer-heading *,
  .process-main-heading,
  .process-main-heading *,
  .faq-main-heading,
  .faq-main-heading *,
  .cta-main-heading,
  .cta-main-heading * {
    font-size: 18.5px !important;
    line-height: 1.25 !important;
    word-spacing: 0.5px !important;
    letter-spacing: 0.25px !important;
  }

  #format .format-line-1,
  #format .format-line-2,
  #format .format-line-3,
  .format-line-1,
  .format-line-2,
  .format-line-3,
  #experience .experience-line-1,
  #experience .experience-line-2,
  #experience .experience-line-3,
  .experience-line-1,
  .experience-line-2,
  .experience-line-3,
  #faq .faq-heading-line-1,
  #faq .faq-heading-line-2,
  .faq-heading-line-1,
  .faq-heading-line-2 {
    display: block !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  #format .format-heading,
  .format-heading {
    font-size: 18.5px !important;
    line-height: 1.25 !important;
  }

  p,
  .hero-desc,
  .about-description p,
  .why-desc,
  .format-subtitle,
  .experience-subtitle,
  .feat-desc,
  .dist-desc,
  .luxury-desc-text,
  .luxury-work-subtitle,
  .producer-info-text p,
  .process-subtitle,
  .step-card-desc,
  .faq-subtitle,
  .cta-description {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    word-spacing: 0.5px !important;
  }

  /* Header & Navigation */
  .logo-img {
    height: 28px !important;
  }

  .logo-digikore-img {
    height: 15px !important;
  }

  /* Hero Section */
  #hero {
    padding-top: 90px !important;
    padding-bottom: 40px !important;
  }

  #hero-primary-cta,
  #hero-play-cta {
    font-size: 12.5px !important;
    padding: 11px 12px !important;
  }

  .stats-banner-section {
    margin-top: -70px !important;
  }

  .hero-stats {
    gap: 6px !important;
  }

  .stat-card {
    padding: 10px 4px !important;
    border-radius: 12px !important;
  }

  .stat-icon-img {
    width: 22px !important;
    height: 22px !important;
  }

  .stat-num {
    font-size: 17px !important;
  }

  .stat-label {
    font-size: 9px !important;
  }

  /* About Feature Pillars */
  .about-pillar-item {
    padding: 12px 10px !important;
    gap: 10px !important;
    border-radius: 14px !important;
  }

  .about-pillar-icon-box {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
  }

  .about-pillar-icon-box svg {
    width: 17px !important;
    height: 17px !important;
  }

  .about-pillar-title {
    font-size: 12px !important;
  }

  .about-pillar-desc {
    font-size: 11px !important;
    line-height: 1.4 !important;
  }

  /* Why This Series Infographic */
  .info-center {
    width: 85px !important;
    height: 85px !important;
  }

  .info-center-img {
    width: 55px !important;
    height: 55px !important;
  }

  .info-card {
    padding: 10px 8px !important;
  }

  .info-title {
    font-size: 12px !important;
  }

  .info-desc {
    font-size: 10.5px !important;
  }

  /* Show Format Carousel (2 Cards on 320px) */
  .carousel-card {
    flex: 0 0 calc(50% - 4px) !important;
    height: 180px !important;
    border-radius: 14px !important;
  }

  .carousel-container {
    gap: 8px !important;
  }

  .card-specialty-title {
    font-size: 10px !important;
    padding: 6px 4px !important;
  }

  .carousel-btn {
    width: 26px !important;
    height: 26px !important;
  }

  /* What Viewers Experience */
  .journey-box {
    padding: 20px 8px !important;
    border-radius: 14px !important;
  }

  .journey-card {
    padding: 28px 8px 14px 8px !important;
    min-height: 140px !important;
  }

  .journey-card-icon-wrap {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
  }

  .journey-card-icon-wrap img,
  .journey-card-icon-wrap svg {
    width: 17px !important;
    height: 17px !important;
  }

  .journey-title {
    font-size: 13px !important;
  }

  .journey-desc {
    font-size: 10.5px !important;
  }

  /* Why Participate (2 Cards on 320px) */
  .participate-grid {
    column-gap: 6px !important;
    row-gap: 12px !important;
  }

  .hospital-wrapper {
    max-width: 210px !important;
    min-height: 140px !important;
  }

  .hospital-img {
    max-width: 160px !important;
  }

  .holo-rings-container {
    width: 200px !important;
    height: 200px !important;
  }

  .feat-icon-wrapper {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    margin-bottom: -15px !important;
  }

  .feat-svg-icon {
    width: 16px !important;
    height: 16px !important;
  }

  .feat-text {
    padding: 18px 6px 10px 6px !important;
    min-height: 84px !important;
    border-radius: 12px !important;
  }

  .feat-title {
    font-size: 11px !important;
  }

  .feat-desc {
    font-size: 9.5px !important;
    line-height: 1.28 !important;
  }

  /* Distribution Dashboard */
  .dist-dashboard-inner {
    padding: 16px 10px !important;
    border-radius: 14px !important;
  }

  .dist-views-num {
    font-size: 24px !important;
  }

  .hud-badge {
    font-size: 9.5px !important;
    padding: 3px 6px !important;
  }

  /* Digikore Posters (2 Cards on 320px) */
  .luxury-posters-showcase {
    gap: 6px !important;
    row-gap: 10px !important;
  }

  .poster-image-wrapper {
    border-radius: 10px !important;
  }

  .poster-title-text {
    font-size: 11.5px !important;
  }

  .poster-category-text {
    font-size: 9.5px !important;
  }

  .op-card {
    padding: 12px 10px !important;
    border-radius: 12px !important;
  }

  .op-card-title {
    font-size: 13.5px !important;
  }

  .brand-card {
    height: 48px !important;
    padding: 8px 6px !important;
    border-radius: 10px !important;
  }

  /* Producer Section */
  .producer-info-card {
    padding: 12px 10px !important;
    gap: 10px !important;
    border-radius: 12px !important;
  }

  .producer-icon-wrap {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
  }

  .producer-info-text p {
    font-size: 11.5px !important;
    line-height: 1.45 !important;
  }

  .producer-usp-grid {
    gap: 6px !important;
  }

  .producer-usp-card {
    padding: 10px 4px !important;
    border-radius: 10px !important;
  }

  .prod-stat-number {
    font-size: 18px !important;
  }

  .usp-label-text {
    font-size: 9px !important;
  }

  /* Process Section */
  .premium-step-card {
    padding: 16px 10px !important;
    border-radius: 14px !important;
  }

  .timeline-circle {
    width: 32px !important;
    height: 32px !important;
    font-size: 12.5px !important;
  }

  .step-icon-outer-container,
  .step-icon-wrapper-circle {
    width: 44px !important;
    height: 44px !important;
  }

  .premium-step-icon {
    width: 22px !important;
    height: 22px !important;
  }

  .step-card-title {
    font-size: 14px !important;
  }

  .step-card-desc {
    font-size: 11.5px !important;
    line-height: 1.45 !important;
  }

  /* FAQ Section */
  .faq-item {
    padding: 12px 10px !important;
    border-radius: 12px !important;
  }

  .faq-question {
    font-size: 12.5px !important;
  }

  .faq-answer p {
    font-size: 11.5px !important;
  }

  /* CTA Section */
  .cta-main-glass-panel {
    padding: 22px 10px !important;
    border-radius: 16px !important;
  }

  .cta-main-heading {
    font-size: 19px !important;
  }

  .cta-btn-primary,
  .cta-btn-secondary {
    font-size: 12.5px !important;
    padding: 11px 12px !important;
  }
}

/* ==========================================================================
   ULTRA-COMPACT MOBILE BREAKPOINT (MAX-WIDTH: 320px)
   Dedicated overrides for 320px screens
   ========================================================================== */
@media (max-width: 320px) {

  /* Global Containers & Spacing */
  .container,
  .about-container,
  .why-grid,
  .experience-container,
  .participate-container,
  .dist-container,
  .luxury-container,
  .producer-container,
  .process-max-container,
  .faq-max-container,
  .cta-max-container,
  .footer-container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  section,
  section[id],
  #about,
  #why-series,
  #format,
  #experience,
  #participate,
  #distribution,
  #digikore,
  #producer,
  #process,
  #faq,
  #cta,
  #thankyou {
    padding: 28px 0 !important;
  }

  /* Eyebrows & Tags */
  .about-eyebrow,
  .section-tag,
  .about-tag,
  .why-tag,
  .format-tag,
  .experience-tag,
  .why-tag-new,
  .dist-eyebrow,
  .producer-eyebrow,
  .process-eyebrow-tag,
  .faq-eyebrow-tag,
  .cta-eyebrow-tag,
  .luxury-label-blue,
  .op-eyebrow {
    font-size: 10.5px !important;
    word-spacing: 1px !important;
    letter-spacing: 0.5px !important;
  }

  /* Headings */
  h1,
  h2,
  h1 *,
  h2 *,
  #hero .hero-title,
  #hero .hero-title *,
  .about-heading,
  .about-heading *,
  .why-heading,
  .why-heading *,
  .why-heading-new,
  .why-heading-new *,
  .experience-heading,
  .experience-heading *,
  .dist-heading,
  .dist-heading *,
  .luxury-heading-main,
  .luxury-heading-main *,
  .luxury-work-heading,
  .luxury-work-heading *,
  .producer-heading,
  .producer-heading *,
  .process-main-heading,
  .process-main-heading *,
  .faq-main-heading,
  .faq-main-heading *,
  .cta-main-heading,
  .cta-main-heading * {
    font-size: 17.5px !important;
    line-height: 1.25 !important;
  }

  /* Show Format & Experience Specific Heading (3 Separate Lines with Uniform Line Height) */
  #format .format-line-1,
  #format .format-line-2,
  #format .format-line-3,
  .format-line-1,
  .format-line-2,
  .format-line-3,
  #experience .experience-line-1,
  #experience .experience-line-2,
  #experience .experience-line-3,
  .experience-line-1,
  .experience-line-2,
  .experience-line-3,
  #faq .faq-heading-line-1,
  #faq .faq-heading-line-2,
  .faq-heading-line-1,
  .faq-heading-line-2 {
    display: block !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  #format .format-heading,
  .format-heading {
    font-size: 17.5px !important;
    line-height: 1.25 !important;
  }

  /* Descriptions & Paragraphs */
  p,
  .hero-desc,
  .about-description p,
  .why-desc,
  .format-subtitle,
  .experience-subtitle,
  .feat-desc,
  .dist-desc,
  .luxury-desc-text,
  .luxury-work-subtitle,
  .producer-info-text p,
  .process-subtitle,
  .step-card-desc,
  .faq-subtitle,
  .cta-description {
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  /* Hero Section & Stats */
  #hero {
    padding-top: 85px !important;
    padding-bottom: 35px !important;
  }

  #hero-primary-cta,
  #hero-play-cta {
    font-size: 12px !important;
    padding: 10px 10px !important;
  }

  .stats-banner-section {
    margin-top: -65px !important;
  }

  .hero-stats {
    gap: 5px !important;
  }

  .stat-card {
    padding: 8px 3px !important;
    border-radius: 10px !important;
  }

  .stat-icon-img {
    width: 20px !important;
    height: 20px !important;
  }

  .stat-num {
    font-size: 16px !important;
  }

  .stat-label {
    font-size: 8.5px !important;
  }

  /* About Pillars */
  .about-pillar-item {
    padding: 10px 8px !important;
    gap: 8px !important;
  }

  .about-pillar-icon-box {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
  }

  .about-pillar-title {
    font-size: 11.5px !important;
  }

  .about-pillar-desc {
    font-size: 10.5px !important;
  }

  /* Format Carousel */
  .carousel-card {
    flex: 0 0 calc(50% - 4px) !important;
    height: 170px !important;
  }

  .card-specialty-title {
    font-size: 9.5px !important;
    padding: 5px 3px !important;
  }

  /* Why Participate */
  .hospital-wrapper {
    max-width: 190px !important;
    min-height: 130px !important;
  }

  .hospital-img {
    max-width: 150px !important;
  }

  .holo-rings-container {
    width: 180px !important;
    height: 180px !important;
  }

  .feat-text {
    padding: 16px 4px 8px 4px !important;
    min-height: 80px !important;
  }

  .feat-title {
    font-size: 10.5px !important;
  }

  .feat-desc {
    font-size: 9px !important;
    line-height: 1.25 !important;
  }

  /* Posters */
  .luxury-posters-showcase {
    gap: 6px !important;
    row-gap: 8px !important;
  }

  .poster-title-text {
    font-size: 11px !important;
  }

  /* Process */
  .premium-step-card {
    padding: 14px 8px !important;
  }

  .step-card-title {
    font-size: 13.5px !important;
  }

  .step-card-desc {
    font-size: 11px !important;
  }
}