/* ==========================================================================
   WARREN GRANGE — HERO & HEADER ARCHITECTURAL GRID WITH ENTRY ANIMATIONS
   ========================================================================== */

/* Google Web Fonts (Inter) */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* CSS Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* Core Brand Color Tokens */
  --color-noir-profond: #0A0A0A;
  --color-blanc-casse: #F7F7F2;
  --color-gris-graphite: #6B7075;
  --color-gris-dark: #1A1D20;
  --color-gris-border: #2A2E33;
  --color-bleu-iceberg: #8FD8F8;
  --color-vert-menthe: #9BE7C4;
  --gradient-primary: linear-gradient(90deg, #8FD8F8 0%, #9BE7C4 100%);
  --gradient-primary-hover: linear-gradient(90deg, #9BE7C4 0%, #8FD8F8 100%);

  /* Brand Typography Variables */
  --font-display: "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-title: "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-accent: "Canela", "Canela Text", Georgia, "Times New Roman", serif;
  --font-serif-accent: "Canela", "Canela Text", Georgia, "Times New Roman", serif;
  --font-mono: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --grid-line-color: rgba(255, 255, 255, 0.16);
  --header-height: 72px;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --glass-pill-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 50%, rgba(143, 216, 248, 0.06) 100%);
  --glass-pill-border: rgba(255, 255, 255, 0.22);
  --glass-pill-text: rgba(247, 247, 242, 0.85);
  --glass-pill-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 1.5px rgba(255, 255, 255, 0.4), inset 0 -1px 2px rgba(0, 0, 0, 0.2);
  --slider-vignette: linear-gradient(90deg, rgba(10, 10, 10, 0.85) 0%, rgba(10, 10, 10, 0.35) 45%, rgba(10, 10, 10, 0.8) 100%), linear-gradient(180deg, rgba(10, 10, 10, 0.5) 0%, rgba(10, 10, 10, 0.1) 50%, rgba(10, 10, 10, 0.75) 100%);
  --grid-card-overlay: linear-gradient(180deg, rgba(10, 10, 10, 0.05) 0%, rgba(10, 10, 10, 0.25) 50%, rgba(10, 10, 10, 0.88) 100%);
  --grid-card-overlay-hover: linear-gradient(180deg, rgba(10, 10, 10, 0.02) 0%, rgba(10, 10, 10, 0.2) 40%, rgba(10, 10, 10, 0.92) 100%);
}

body {
  background-color: var(--color-noir-profond);
  color: var(--color-blanc-casse);
  font-family: var(--font-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Brand Headings Typography System */
h1, h2, h3, h4, h5, h6,
.hero-title, .section-title, .cta-card-title,
.story-heading, .next-title, .archive-title {
  font-family: var(--font-title);
  letter-spacing: -0.02em;
}

/* Brand Accent / Quotations Typography System (Canela — Always Lowercase) */
.accent-gradient-word,
.serif-italic,
.quote-text,
.cat-serif,
.detail-serif-accent,
.cta-serif-italic,
.title-serif,
.hero-serif,
.stat-serif,
.section-serif,
.badge-serif,
[class*="serif-accent"],
[class*="cat-serif"] {
  font-family: var(--font-accent) !important;
  font-style: italic !important;
  text-transform: lowercase !important;
}

/* ── Global Accent Gradient: ALL Canela italic elements get gradient color ── */
.accent-gradient-word,
.serif-italic,
.quote-text,
.cat-serif,
.detail-serif-accent,
.cta-serif-italic,
.title-serif,
.hero-serif,
.stat-serif,
.section-serif,
.badge-serif,
[class*="serif-accent"],
[class*="cat-serif"] {
  background: linear-gradient(135deg, #F7F7F2 0%, var(--color-bleu-iceberg) 55%, var(--color-vert-menthe) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.accent-gradient-word,
.serif-italic,
.quote-text {
  font-weight: 500;
}

/* Custom High-Fashion Sleek Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #0A0A0A;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 3px;
  transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-bleu-iceberg);
}

::-webkit-scrollbar-corner {
  background: #0A0A0A;
}

html, body, div {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) #0A0A0A;
}

/* ==========================================================================
   OUTER PAGE GRID WRAPPER (100% FULL WIDTH EDGE-TO-EDGE)
   ========================================================================== */
.grid-page-wrapper {
  width: 100%;
  max-width: 100%;
  margin: 0;
  border-top: 1px solid var(--grid-line-color);
  border-bottom: 1px solid var(--grid-line-color);
  background-color: var(--color-noir-profond);
  position: relative;
  min-height: 100vh;
}

/* ==========================================================================
   1. SITE HEADER (CONVERTED NAVIGATION MENU HEADER)
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  width: 100%;
  border-bottom: 1px solid var(--grid-line-color);
  background-color: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  z-index: 1000;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
}

.site-header.header-hidden {
  transform: translateY(-100%);
}

.header-grid {
  display: grid;
  grid-template-columns: 68% 32%;
  min-height: var(--header-height);
  width: 100%;
}

.header-col {
  display: flex;
  align-items: center;
  padding: 16px 40px;
}

.header-left {
  border-right: 1px solid var(--grid-line-color);
  justify-content: space-between;
}

.header-right {
  justify-content: flex-end;
}

/* Brand Logo */
.brand-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.brand-logo:hover {
  opacity: 0.85;
}

.brand-logo-img {
  height: 44px;
  width: auto;
  object-fit: contain;
  display: block;
}

/* Category & View Toggle Segmented Switch (Liquid Glass Pill Capsule Design) */
.view-segmented-switch,
.category-segmented-switch {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding: 4px;
  background: rgba(15, 15, 15, 0.75);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 30px;
  box-shadow: var(--glass-pill-shadow);
  gap: 2px;
}

.switch-segment {
  position: relative;
  z-index: 2;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(247, 247, 242, 0.55);
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 24px;
  cursor: pointer;
  transition: color 0.35s ease, background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
  user-select: none;
  outline: none;
}

.switch-segment:hover {
  color: var(--color-blanc-casse);
  background: rgba(255, 255, 255, 0.05);
}

.switch-segment.active {
  color: #0A0A0D !important;
  background: #FFFFFF !important;
  border: 1px solid #FFFFFF !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-weight: 800 !important;
}

.switch-segment.active svg,
.switch-segment.active .pill-icon-svg {
  stroke: #0A0A0D !important;
  color: #0A0A0D !important;
}

.category-segmented-switch .archive-filter-btn {
  position: relative;
  z-index: 2;
  border: 1px solid transparent !important;
  background: transparent;
  box-shadow: none;
  transition: color 0.25s ease,
              background 0.25s ease,
              border-color 0.25s ease !important;
}

.category-segmented-switch .archive-filter-btn:hover {
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, 0.08) !important;
  transform: none;
}

.category-segmented-switch .archive-filter-btn:active {
  transform: none !important;
}

.category-segmented-switch .archive-filter-btn.active {
  color: #0A0A0D !important;
  background: #FFFFFF !important;
  border: 1px solid #FFFFFF !important;
  box-shadow: none !important;
  transform: none !important;
  text-shadow: none !important;
  font-weight: 800 !important;
}

.category-segmented-switch .archive-filter-btn.active .pill-icon-svg {
  stroke: #0A0A0D !important;
  color: #0A0A0D !important;
  opacity: 1 !important;
}

/* Converted Header Navigation Menu (2 Items Only) */
.header-nav {
  display: flex;
  align-items: center;
}

.nav-menu.header-two-items {
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.8vw, 30px);
  list-style: none;
}

.nav-link.nav-cta-link {
  font-family: var(--font-title);
  font-size: clamp(11px, 0.82vw, 13px);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-blanc-casse);
  text-decoration: none;
  position: relative;
  padding: 6px 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  transition: color 0.3s ease, opacity 0.3s ease;
}

.cta-arrow-svg {
  color: var(--color-bleu-iceberg);
  stroke: currentColor;
  fill: none;
  background: transparent !important;
  background-color: transparent !important;
  transition: transform 0.3s var(--ease-out-expo), color 0.3s ease, stroke 0.3s ease;
}

.nav-link.nav-cta-link:hover {
  color: var(--color-bleu-iceberg);
  opacity: 1;
}

.nav-link.nav-cta-link:hover .cta-arrow-svg {
  transform: translate(2px, -2px);
}

.nav-link.nav-cta-link::after {
  display: none !important;
}



/* Header Right Actions Wrap (Search & Menu Pills) */
.header-actions-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-action-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #E2E8F0;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.header-action-pill:hover,
.header-action-pill.active {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.28);
  color: #FFFFFF;
  box-shadow: none;
  transform: none;
}

.search-btn,
.burger-btn,
.header-action-pill.icon-only {
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  border-radius: 50%;
  justify-content: center;
  gap: 0;
}

.search-btn .pill-text,
.burger-btn .pill-text {
  display: none;
}

.search-btn svg,
.burger-btn .burger-icon-lines {
  transition: color 0.25s ease, stroke 0.25s ease;
}

.header-action-pill svg {
  background: transparent !important;
  background-color: transparent !important;
  transition: color 0.25s ease, stroke 0.25s ease, transform 0.25s ease;
}

.header-action-pill:hover svg {
  color: #FFFFFF;
  stroke: #FFFFFF;
  background: transparent !important;
  background-color: transparent !important;
}

.header-action-pill:hover .burger-line {
  background-color: #FFFFFF;
}

.header-action-pill.icon-only.back-top-btn:hover svg {
  transform: translateY(-2px);
}

.pill-text {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Simple Clean Minimalist Notification Badge (No Glow) */
.pill-badge-free {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  padding: 2.5px 6px;
  border-radius: 999px;
  background: #9BE7C4;
  color: #0A0A0D;
  margin-left: 2px;
  box-shadow: none;
  border: none;
  text-transform: uppercase;
  flex-shrink: 0;
}

.header-action-pill:hover .pill-badge-free {
  transform: none;
  box-shadow: none;
}

.burger-icon-lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.burger-line {
  display: block;
  width: 14px;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.3s ease;
}



/* High-Fashion Full-Screen 4-Row Editorial Mega Menu */
.header-megamenu-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: calc(70vh - var(--header-height, 72px));
  min-height: calc(70vh - var(--header-height, 72px));
  max-height: calc(70vh - var(--header-height, 72px));
  background: var(--color-noir-profond);
  border-top: 1px solid var(--grid-line-color);
  border-bottom: 1px solid var(--grid-line-color);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.4s var(--ease-out-expo), transform 0.4s var(--ease-out-expo), visibility 0.4s ease;
  z-index: 95;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.95);
  display: flex;
  flex-direction: column;
}

/* Open Mega Menu on Hover over SEE MY WORK link or Mega Menu Panel */
.header-megamenu-dropdown.is-open,
.header-megamenu-dropdown:hover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* Body Content Blur & Dimming when Mega Menu is Open */
body.megamenu-active main,
body.megamenu-active .hero-container,
body.megamenu-active #portfolioArchive,
body.megamenu-active .project-detail-main,
body.megamenu-active footer,
body.megamenu-active .grid-page-wrapper > :not(.site-header) {
  filter: blur(14px) brightness(0.5);
  pointer-events: none;
}

.hero-container,
#portfolioArchive,
.project-detail-main,
footer,
.grid-page-wrapper > :not(.site-header) {
  transition: filter 0.4s var(--ease-out-expo);
}

/* Minimalist Split Column Layout (68% Left Navigation / 32% Right Pinned Preview) */
.megamenu-split-grid {
  display: grid;
  grid-template-columns: 68% 32%;
  height: 100%;
  width: 100%;
  background: #0A0A0A;
}

.megamenu-left-col {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--grid-line-color);
  height: 100%;
}

.megamenu-cat-list {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.megamenu-cat-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  border-bottom: 1px solid var(--grid-line-color);
  text-decoration: none;
  background: #0A0A0A;
  transition: background 0.35s ease, border-color 0.35s ease, padding 0.35s var(--ease-out-expo);
  position: relative;
}

.megamenu-cat-item:last-child {
  border-bottom: none;
}

.megamenu-cat-item:hover,
.megamenu-cat-item.active {
  background: rgba(255, 255, 255, 0.03);
  padding-left: 48px;
}

.cat-num {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  min-width: 64px;
}

.cat-text-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.cat-tag {
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.cat-name {
  font-family: var(--font-title);
  font-size: clamp(1.4rem, 2.2vw, 2.6rem);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-blanc-casse);
  margin: 0;
  line-height: 1.05;
}

.cat-serif {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  display: inline-block; /* required for gradient text */
}

.cat-arrow {
  color: rgba(247, 247, 242, 0.4);
  transform: translateX(-8px);
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.35s var(--ease-out-expo), color 0.35s ease;
}

.megamenu-cat-item:hover .cat-arrow,
.megamenu-cat-item.active .cat-arrow {
  opacity: 1;
  transform: translateX(0);
  color: var(--color-blanc-casse);
}

/* Category Specific Brand Colors */
/* Cat 01: Court métrage — Bleu Iceberg gradient */
.megamenu-cat-item:nth-child(1) .cat-num,
.megamenu-cat-item:nth-child(1) .cat-tag {
  color: var(--color-bleu-iceberg);
}
.megamenu-cat-item:nth-child(1) .cat-serif {
  background: linear-gradient(135deg, #8FD8F8 0%, #BDEEFB 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Cat 02: Pub — Vert Menthe gradient */
.megamenu-cat-item:nth-child(2) .cat-num,
.megamenu-cat-item:nth-child(2) .cat-tag {
  color: var(--color-vert-menthe);
}
.megamenu-cat-item:nth-child(2) .cat-serif {
  background: linear-gradient(135deg, #9BE7C4 0%, #D4F5E7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Cat 03: Réseaux sociaux — Primary gradient */
.megamenu-cat-item:nth-child(3) .cat-num,
.megamenu-cat-item:nth-child(3) .cat-tag {
  color: var(--color-bleu-iceberg);
}
.megamenu-cat-item:nth-child(3) .cat-serif {
  background: linear-gradient(135deg, #8FD8F8 0%, #9BE7C4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Cat 04: Demoreel — Iceberg gradient */
.megamenu-cat-item:nth-child(4) .cat-num {
  color: var(--color-gris-graphite);
}
.megamenu-cat-item:nth-child(4) .cat-tag {
  color: var(--color-bleu-iceberg);
}
.megamenu-cat-item:nth-child(4) .cat-serif {
  background: linear-gradient(135deg, #8FD8F8 0%, #F7F7F2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Formations Mega Menu uses the same global nth-child accent rules as workMegaMenu — no overrides needed */


/* Right Column: Pinned Live Video Preview Theater (32% width) */
.megamenu-right-col {
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #070707;
  height: 100%;
}

.megamenu-preview-card {
  position: relative;
  width: 100%;
  height: 100%;
  border: 1px solid var(--grid-line-color);
  background: #0A0A0A;
  overflow: hidden;
}

.preview-video-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

.megamenu-preview-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  filter: brightness(1.15) contrast(1.05);
  transition: opacity 0.4s var(--ease-out-expo);
  pointer-events: none;
  z-index: 1;
}

.megamenu-preview-video.active {
  opacity: 1;
}

.preview-vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.1) 0%, rgba(10, 10, 10, 0.4) 40%, rgba(10, 10, 10, 0.95) 100%);
  pointer-events: none;
  z-index: 2;
}

.preview-info-box {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: none;
  background: transparent;
  z-index: 10;
}

.preview-sub-tag {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-bleu-iceberg);
}

.preview-title {
  font-family: var(--font-title);
  font-size: clamp(1.4rem, 2.2vw, 2.2rem);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-blanc-casse);
  margin: 0;
  line-height: 1;
}

.preview-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  padding: 10px 22px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 50%, rgba(143, 216, 248, 0.06) 100%);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--color-blanc-casse);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 30px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 1.5px rgba(255, 255, 255, 0.4), inset 0 -1px 2px rgba(0, 0, 0, 0.2);
  transition: all 0.35s var(--ease-out-expo);
  width: max-content;
}

.preview-cta-btn:hover {
  background: rgba(143, 216, 248, 0.18);
  border-color: rgba(143, 216, 248, 0.6);
  color: var(--color-bleu-iceberg);
  transform: translateY(-1px);
}

/* ==========================================================================
   FORMATIONS MEGA MENU (BLURRED BACKGROUND VIDEO & CENTERED PRO CONTENT)
   ========================================================================== */
#formationsMegaMenu .megamenu-preview-video,
#formationsMegaMenu .megamenu-preview-card:hover .megamenu-preview-video,
#formationsMegaMenu .megamenu-preview-card:hover video,
#formationsMegaMenu:hover .megamenu-preview-video,
#formationsMegaMenu:hover video {
  filter: blur(18px) brightness(0.45) saturate(140%) !important;
  transform: scale(1.2) !important;
  transition: opacity 0.4s var(--ease-out-expo) !important;
}

#formationsMegaMenu .preview-vignette,
#formationsMegaMenu .megamenu-preview-card:hover .preview-vignette,
#formationsMegaMenu:hover .preview-vignette {
  opacity: 1 !important;
  background: radial-gradient(circle at center, rgba(10, 10, 10, 0.35) 0%, rgba(6, 8, 12, 0.85) 100%) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

#formationsMegaMenu .preview-info-box {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 24px;
  gap: 12px;
  z-index: 10;
}

.formations-preview-lottie-badge {
  width: 76px;
  height: 76px;
  min-width: 76px;
  min-height: 76px;
  border-radius: 50%;
  background: rgba(143, 216, 248, 0.08);
  border: 1px solid rgba(143, 216, 248, 0.35);
  box-shadow: 0 0 35px rgba(143, 216, 248, 0.25), inset 0 1px 1.5px rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}

.formations-preview-lottie-badge:hover {
  transform: scale(1.06);
  box-shadow: 0 0 45px rgba(143, 216, 248, 0.45);
}

.formations-lottie-icon-canvas {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#formationsMegaMenu .preview-sub-tag {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.16em;
}

#formationsMegaMenu .preview-title {
  text-align: center;
  font-size: clamp(1.45rem, 2.1vw, 2.05rem);
  line-height: 1.15;
  max-width: 320px;
  margin: 0 auto;
}

#formationsMegaMenu .preview-cta-btn {
  align-self: center;
  margin: 8px auto 0 auto;
}

/* ==========================================================================
   INTERACTIVE PORTFOLIO ARCHIVE SLIDER (VELORA MINIMALIST DESIGN)
   ========================================================================== */
.portfolio-archive-section {
  position: relative;
  width: 100%;
  min-height: calc(100vh - var(--header-height, 72px));
  background: var(--color-noir-profond);
  border-top: 1px solid var(--grid-line-color);
  display: flex;
  flex-direction: column;
}

/* Editorial Section Heading Header */
.archive-header-bar {
  display: flex;
  flex-direction: column;
  padding: 44px 44px 28px 44px;
  background: var(--color-noir-profond);
  border-bottom: 1px solid var(--grid-line-color);
}

.archive-title-meta-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.archive-section-tag {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-bleu-iceberg);
}

.archive-section-title {
  font-family: var(--font-title);
  font-size: clamp(2.6rem, 5.5vw, 5.5rem);
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-blanc-casse);
  margin: 0;
  line-height: 0.95;
}

/* High-Fashion Metallic Iceberg/Mint Gradient Accent Word Engine */
.accent-gradient-word {
  font-family: var(--font-accent) !important;
  font-style: italic !important;
  font-weight: 600 !important;
  background: linear-gradient(135deg, #8FD8F8 0%, #9BE7C4 55%, #FFFFFF 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline-block;
  padding-right: 0.08em;
}

/* Sticky Category Filter Bar (1:1 Floating Glass Centering with Transparent Background) */
.archive-sticky-filter-bar {
  position: sticky;
  top: var(--header-height, 72px);
  z-index: 90;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 8px 24px !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  pointer-events: none;
}

.archive-filter-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 1720px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  box-sizing: border-box !important;
  gap: 16px !important;
}

.category-segmented-switch {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 4px !important;
  border-radius: 30px !important;
  background: rgba(18, 18, 18, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

.archive-view-toggle,
.archive-filter-btn {
  background: var(--glass-pill-bg);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  border: 1px solid var(--glass-pill-border);
  color: var(--glass-pill-text);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.15em;
  padding: 9px 20px;
  cursor: pointer;
  border-radius: 30px;
  box-shadow: var(--glass-pill-shadow);
  transition: all 0.4s var(--ease-out-expo);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-transform: uppercase;
}

.archive-filter-btn .pill-icon-svg {
  flex-shrink: 0;
  opacity: 0.85;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.archive-view-toggle:hover,
.archive-filter-btn:hover {
  background: var(--glass-pill-bg);
  border-color: var(--color-bleu-iceberg);
  color: var(--color-blanc-casse);
  transform: none;
}

.archive-filter-btn:hover .pill-icon-svg {
  transform: scale(1.1);
  opacity: 1;
}

.archive-view-toggle.active,
.archive-filter-btn.active {
  background: #FFFFFF !important;
  border-color: #FFFFFF !important;
  color: #0A0A0D !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
  font-weight: 800 !important;
}

.archive-filter-btn.active .pill-icon-svg,
.archive-view-toggle.active svg {
  stroke: #0A0A0D !important;
  color: #0A0A0D !important;
  opacity: 1 !important;
}

/* View Panels (Slider vs Grid) */
.archive-view-panel {
  display: none;
  width: 100%;
}

.archive-view-panel.active {
  display: flex;
  flex-direction: column;
  flex: 1;
}

#picksSliderView.archive-view-panel.active {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--header-height, 72px) - 90px);
  min-height: 720px;
  position: relative;
  overflow: hidden;
}

#allGridView.archive-view-panel.active {
  display: block;
  min-height: 100vh;
  padding: 44px;
}

/* Editorial Sub-Section Header Banner inside Resources & Portfolio Grid */
.grid-editorial-header {
  display: grid;
  grid-template-columns: 1fr 440px;
  gap: 48px;
  align-items: center;
  margin: 0 !important;
  margin-bottom: 0 !important;
  padding: 36px 44px;
  border-bottom: 1px solid var(--grid-line-color);
  box-sizing: border-box;
}

@media (max-width: 1024px) {
  .grid-editorial-header {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 24px 20px;
  }
}

.grid-header-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.grid-header-tag {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-bleu-iceberg);
}

.grid-header-title {
  font-family: var(--font-title);
  font-size: clamp(2.2rem, 3.6vw, 3.4rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--color-blanc-casse);
  margin: 0;
  line-height: 1.1;
}

.grid-header-desc {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(247, 247, 242, 0.7);
  max-width: 580px;
  margin-top: 4px;
}

/* Right Column: AI Tools & Providers Marquee Ticker */
.grid-header-right-ticker {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-sizing: border-box;
}

.ticker-header-tag {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 8px !important;
  font-family: var(--font-accent) !important;
  font-size: 13px !important;
  font-style: italic !important;
  letter-spacing: 0.08em !important;
  text-transform: none !important;
  color: #8FD8F8 !important;
  -webkit-text-fill-color: #8FD8F8 !important;
  background: none !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  -webkit-filter: none !important;
  text-shadow: none !important;
  margin: 0 auto 12px auto !important;
  line-height: 1.2 !important;
  width: 100% !important;
}

.ticker-header-tag::before {
  display: none !important;
}

.brand-ticker-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 4px 0;
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.brand-ticker-track {
  display: flex;
  align-items: center;
  gap: 36px;
  width: max-content;
}

.track-left {
  animation: tickerSlideLeft 32s linear infinite;
}

.track-right {
  animation: tickerSlideRight 32s linear infinite;
}

.brand-ticker-wrap:hover .brand-ticker-track {
  animation-play-state: paused;
}

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

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

/* Typewriter Cursor Indicator */
.typewriter-cursor {
  display: inline-block;
  color: var(--color-bleu-iceberg);
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  margin-left: 4px;
  animation: cursorBlink 0.85s infinite;
}

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

/* All Our Work High-Fashion Editorial Masonry Grid Layout (16:9 & 9:16 Mixed Rhythms) */
.archive-grid-container {
  column-count: 3;
  column-gap: 28px;
  width: 100%;
  max-width: 1720px;
  margin: 0 auto;
  padding: 16px 44px 80px 44px;
  box-sizing: border-box;
}

@media (max-width: 1200px) {
  .archive-grid-container {
    column-count: 2;
    column-gap: 24px;
    padding: 16px 28px 60px 28px;
  }
}

@media (max-width: 768px) {
  .archive-grid-container {
    column-count: 1;
    column-gap: 20px;
    padding: 12px 16px 40px 16px;
  }
}

.archive-grid-card {
  position: relative;
  break-inside: avoid;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 28px;
  background: var(--color-noir-profond);
  border: 1px solid var(--grid-line-color);
  border-radius: 12px;
  overflow: hidden;
  display: block;
  cursor: pointer;
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo), border-color 0.35s ease, box-shadow 0.35s ease;
  width: 100%;
  box-sizing: border-box;
}

.archive-grid-card.is-in-view {
  opacity: 1;
  transform: translateY(0);
}

.archive-grid-card.is-in-view:hover {
  border-color: var(--color-bleu-iceberg);
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), 0 0 30px rgba(143, 216, 248, 0.18);
}

/* Ratio Indicator Badge (Top Right) */
.card-ratio-badge {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 6;
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(247, 247, 242, 0.75);
  background: rgba(10, 10, 14, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 4px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  pointer-events: none;
  transition: all 0.3s ease;
}

.archive-grid-card:hover .card-ratio-badge {
  color: var(--color-bleu-iceberg);
  border-color: rgba(143, 216, 248, 0.4);
  background: rgba(10, 10, 14, 0.9);
}

/* Vertical 9:16 Card Customization */
.archive-grid-card.is-vertical-card .grid-card-title {
  font-size: clamp(1.6rem, 2.4vw, 2.4rem);
}

.archive-grid-card.is-vertical-card .grid-card-info {
  padding: 28px 24px 24px 24px;
}

.grid-card-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
  transform: scale(1.01) translateZ(0);
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.archive-grid-card:hover .grid-card-video {
  transform: scale(1.06) translateZ(0);
}

.grid-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.25) 0%, rgba(10, 10, 10, 0.82) 100%);
  z-index: 2;
  transition: opacity 0.35s ease;
}

.archive-grid-card:hover .grid-card-overlay {
  opacity: 0.45;
}

/* Clean Floating Luxury Client Brand Emblem (No Background) */
.card-client-badge {
  position: absolute;
  top: 24px;
  left: 28px;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  pointer-events: none;
  transition: transform 0.4s var(--ease-out-expo);
}

.card-client-badge-logo {
  height: 96px;
  width: auto;
  max-width: 320px;
  object-fit: contain;
  filter: brightness(0) invert(1) opacity(0.92) drop-shadow(0 4px 14px rgba(0, 0, 0, 0.85));
  transition: filter 0.35s ease, transform 0.35s ease, opacity 0.35s ease;
}

.archive-grid-card:hover .card-client-badge {
  transform: translateY(-2px);
}

.archive-grid-card:hover .card-client-badge-logo {
  filter: brightness(0) invert(1) opacity(1) drop-shadow(0 0 18px rgba(143, 216, 248, 0.95)) drop-shadow(0 4px 14px rgba(0, 0, 0, 0.85));
  transform: scale(1.06);
}

.grid-card-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transform: translateY(12px);
  opacity: 0;
  transition: transform 0.4s var(--ease-out-expo), opacity 0.35s ease;
  pointer-events: none;
}

.archive-grid-card:hover .grid-card-info {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.grid-card-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}

.grid-card-cat {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-bleu-iceberg);
}

.grid-card-meta-sep {
  color: rgba(255, 255, 255, 0.35);
  font-size: 10px;
}

.grid-card-client-highlight {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-blanc-casse);
}

.grid-card-subtitle {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(247, 247, 242, 0.7);
  margin-bottom: 4px;
}

.grid-card-title {
  font-family: var(--font-title);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0;
  color: var(--color-blanc-casse);
  line-height: 0.95;
}

.grid-card-client {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(247, 247, 242, 0.7);
  margin-bottom: 6px;
}

.grid-card-cta-wrap {
  margin-top: 4px;
}

.grid-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 50%, rgba(143, 216, 248, 0.06) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--color-blanc-casse);
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 30px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  transition: all 0.3s ease;
}

.grid-card-cta:hover {
  background: rgba(143, 216, 248, 0.18);
  border-color: rgba(143, 216, 248, 0.6);
  color: var(--color-bleu-iceberg);
}

.grid-card-cta .cta-arrow-svg {
  width: 12px;
  height: 12px;
  color: var(--color-bleu-iceberg);
  transition: transform 0.3s ease;
}

.grid-card-cta:hover .cta-arrow-svg {
  transform: translate(3px, -3px);
}

/* Full-Bleed Background Video Stage Architecture */
.archive-bg-video-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

#archiveVideo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(1.14) contrast(1.05);
}

.archive-bg-vignette {
  position: absolute;
  inset: 0;
  background: var(--slider-vignette);
  pointer-events: none;
  z-index: 2;
}

.archive-stage {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 60px;
  height: 100%;
  overflow: hidden;
  z-index: 5;
}

.archive-cat-badge {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-bleu-iceberg);
  margin-bottom: 4px;
  display: block;
}

/* Giant Hairline Outlined Stroke Number (Positioned Right Side of Stage) */
.archive-giant-num {
  position: absolute;
  top: 50%;
  left: 76%;
  transform: translate(-50%, -50%);
  font-family: var(--font-title);
  font-size: clamp(20rem, 42vw, 55rem);
  font-weight: 900;
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: var(--giant-num-stroke);
  pointer-events: none;
  z-index: 3;
  transition: transform 0.5s var(--ease-out-expo), opacity 0.5s ease;
}

.archive-info-col {
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 760px;
  gap: 16px;
}

.archive-title {
  font-family: var(--font-title);
  font-size: clamp(3.2rem, 7vw, 8rem);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-blanc-casse);
  margin: 0;
  line-height: 0.92;
  text-shadow: 0 10px 40px rgba(0, 0, 0, 0.85);
}

.archive-meta-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(247, 247, 242, 0.7);
}

.archive-client {
  color: var(--color-bleu-iceberg);
}

.meta-separator {
  color: rgba(255, 255, 255, 0.2);
}

/* Explore Project CTA Button */
.archive-cta-wrap {
  margin-top: 10px;
}

/* Explore Project High-Fashion Liquid Glass CTA Button */
.archive-cta-btn,
.archive-explore-btn,
#archiveExploreBtn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 13px 28px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 50%, rgba(143, 216, 248, 0.08) 100%);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #F7F7F2 !important;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 30px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 1.5px rgba(255, 255, 255, 0.5), inset 0 -1px 2px rgba(0, 0, 0, 0.2);
  transition: all 0.35s var(--ease-out-expo);
  width: max-content;
}

.archive-cta-btn:hover,
.archive-explore-btn:hover,
#archiveExploreBtn:hover {
  background: rgba(143, 216, 248, 0.2);
  border-color: rgba(143, 216, 248, 0.7);
  color: var(--color-bleu-iceberg) !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(143, 216, 248, 0.25), inset 0 1px 1.5px rgba(255, 255, 255, 0.6);
}

.archive-cta-btn .cta-arrow-svg,
.archive-explore-btn .cta-arrow-svg,
#archiveExploreBtn .cta-arrow-svg {
  width: 14px;
  height: 14px;
  color: var(--color-bleu-iceberg);
  transition: transform 0.3s var(--ease-out-expo);
}

.archive-cta-btn:hover .cta-arrow-svg,
.archive-explore-btn:hover .cta-arrow-svg,
#archiveExploreBtn:hover .cta-arrow-svg {
  transform: translate(3px, -3px);
}

.archive-title,
.archive-cat-badge,
.archive-meta-wrap {
  opacity: 1;
  transform: translateY(0);
  filter: none;
}

.archive-media-col {
  z-index: 3;
  display: flex;
  justify-content: flex-end;
  height: 100%;
  width: 100%;
}

.archive-video-frame {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 100%;
  overflow: hidden;
  border-left: 1px solid var(--grid-line-color);
  background: #000;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.95);
  clip-path: inset(0% 0% 0% 0%);
  transform: scale(1);
  transition: transform 0.6s var(--ease-out-expo), opacity 0.5s ease, clip-path 0.6s var(--ease-out-expo);
}

.archive-video-frame.is-animating {
  opacity: 0.2;
  transform: scale(0.96);
  clip-path: inset(5% 0% 5% 0%);
}

#archiveVideo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.archive-video-vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.1) 0%, rgba(10,10,10,0.5) 100%);
  pointer-events: none;
}

/* Bottom Interactive Timeline Progress Bar */
.archive-timeline-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 24px 44px;
  border-top: 1px solid var(--grid-line-color);
  z-index: 10;
}

.timeline-num-start,
.timeline-num-end {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--color-bleu-iceberg);
}

.timeline-track-wrap {
  position: relative;
  width: 240px;
  height: 2px;
  background: rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: center;
}

.timeline-progress-line {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--gradient-primary);
  transition: width 0.4s var(--ease-out-expo);
}

.timeline-dots-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.timeline-dot-btn {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.timeline-dot-btn:hover,
.timeline-dot-btn.active {
  background: var(--color-blanc-casse);
  transform: scale(1.4);
  box-shadow: 0 0 10px var(--color-bleu-iceberg);
}

/* Full-Page Overlay Menu */
.full-page-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(10, 10, 10, 0.96);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease-out-expo);
}

.full-page-menu-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.menu-close-btn {
  position: absolute;
  top: 32px;
  right: 36px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--color-blanc-casse);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.menu-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
  transform: rotate(90deg);
}

.full-menu-container {
  text-align: center;
  max-width: 600px;
  padding: 0 24px;
}

.full-menu-tag {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--color-bleu-iceberg);
  display: block;
  margin-bottom: 12px;
}

.full-menu-title {
  font-family: var(--font-title);
  font-size: clamp(2rem, 4vw, 3.6rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  color: var(--color-blanc-casse);
}

.nav-menu-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nav-menu-link:hover {
  color: var(--color-bleu-iceberg);
  transform: translateX(2px);
}

.nav-menu-link.highlight-contact {
  color: var(--color-bleu-iceberg);
}

/* ==========================================================================
   2. HERO GRID SECTION (3-ROW EDITORIAL & RIGHT VIDEO SHOWCASE)
   ========================================================================== */
.hero-grid-section {
  width: 100%;
  background-color: var(--color-noir-profond);
  position: relative;
}

.hero-container {
  display: grid;
  grid-template-columns: 68% 32%;
  width: 100%;
  min-height: calc(100vh - var(--header-height));
}

.hero-col {
  position: relative;
}

/* Left Column: 3 Stacked Horizontal Rows */
.hero-left {
  border-right: 1px solid var(--grid-line-color);
  display: flex;
  flex-direction: column;
}

.editorial-row {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 36px 48px;
  border-bottom: 1px solid var(--grid-line-color);
  min-height: 200px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

/* Background Video Frame on Hover */
.row-bg-video-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease-out-expo), transform 0.6s var(--ease-out-expo);
  transform: scale(1.05);
}

.row-bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(1.15) contrast(1.08);
}

.row-bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.2) 0%, rgba(10, 10, 10, 0.55) 100%);
}

.editorial-row:hover .row-bg-video-wrap {
  opacity: 1;
  transform: scale(1);
}

.editorial-row.row-design {
  border-bottom: none;
  justify-content: flex-end;
  padding-bottom: 44px;
}

.editorial-row.row-design .text-reveal-wrap {
  display: flex;
  justify-content: flex-end;
  overflow: visible;
  padding-bottom: 0.25em;
}

/* Text Mask Wrapper for Clip Reveal */
.text-reveal-wrap {
  overflow: visible;
  display: block;
  position: relative;
  z-index: 2;
  transition: transform 0.4s var(--ease-out-expo);
  padding-bottom: 0.2em;
}

.editorial-row:hover .text-reveal-wrap {
  transform: translateX(12px);
}

.editorial-row.row-design:hover .text-reveal-wrap {
  transform: translateX(-12px);
}

/* Typography in Each Row */
.title-text {
  font-family: var(--font-title);
  font-weight: 900;
  font-size: clamp(4.2rem, 9.8vw, 11.5rem);
  line-height: 1.05;
  letter-spacing: -0.045em;
  color: var(--color-blanc-casse);
  text-transform: uppercase;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.25em;
  will-change: transform, opacity;
  padding-bottom: 0.15em;
}

.plus-symbol {
  font-family: var(--font-body);
  font-weight: 900;
  color: var(--color-blanc-casse);
}

.serif-italic {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 600;
  text-transform: lowercase !important;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #F7F7F2 0%, var(--color-bleu-iceberg) 60%, var(--color-vert-menthe) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  padding-bottom: 0.2em;
  padding-right: 0.08em;
}

/* Right Column: Full-Cell Background Video Container */
.hero-right {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
  background: var(--color-noir-profond);
  min-height: 500px;
}

.right-bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.right-bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.25) 0%, rgba(10, 10, 10, 0.65) 100%);
  pointer-events: none;
}

/* Pure Typographic Floating Hover Overlay (Staggered Cinema Entrance Animation) */
.typographic-hover-cta {
  position: absolute;
  bottom: 28px;
  left: 28px;
  top: auto;
  z-index: 20;
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  gap: 10px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  transition: opacity 0.4s var(--ease-out-expo);
  white-space: nowrap;
  filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.85));
}

.cta-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: baseline;
}

.cta-word > span {
  display: inline-block;
  transform: translateY(120%);
  opacity: 0;
  transition: transform 0.65s var(--ease-out-expo), opacity 0.65s var(--ease-out-expo);
}

.hero-right:hover .typographic-hover-cta,
.hero-right.header-hover-active .typographic-hover-cta {
  opacity: 1;
  pointer-events: auto;
  animation: ctaGentleFloat 3.5s ease-in-out 0.7s infinite alternate;
}

.hero-right:hover .cta-word-1 > span,
.hero-right.header-hover-active .cta-word-1 > span {
  transform: translateY(0);
  opacity: 1;
  transition-delay: 0.05s;
}

.hero-right:hover .cta-word-2 > span,
.hero-right.header-hover-active .cta-word-2 > span {
  transform: translateY(0);
  opacity: 1;
  transition-delay: 0.14s;
}

.hero-right:hover .cta-word-3 > span,
.hero-right.header-hover-active .cta-word-3 > span {
  transform: translateY(0);
  opacity: 1;
  transition-delay: 0.22s;
}

@keyframes ctaGentleFloat {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-8px);
  }
}

.typographic-hover-cta .cta-sans-caps {
  font-family: var(--font-title);
  font-size: clamp(1.05rem, 1.55vw, 1.75rem);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-blanc-casse);
}

.typographic-hover-cta .cta-serif-italic {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.8rem, 2.7vw, 3.2rem);
  line-height: 1.15;
  display: inline-block;
  padding-bottom: 0.15em;
  color: var(--color-blanc-casse);
  background: linear-gradient(135deg, #F7F7F2 0%, var(--color-bleu-iceberg) 60%, var(--color-vert-menthe) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.typographic-hover-cta .cta-arrow-icon {
  font-family: var(--font-body);
  font-size: clamp(1.4rem, 2.0vw, 2.2rem);
  font-weight: 700;
  color: var(--color-bleu-iceberg);
  transition: transform 0.3s var(--ease-out-expo), color 0.3s ease;
}

.typographic-hover-cta:hover .cta-arrow-icon {
  transform: translate(6px, -6px);
  color: var(--color-vert-menthe);
}

/* Bio Description Text */
.hero-description-wrap {
  padding-top: 4px;
}

.position-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 5px 12px;
  background: rgba(143, 216, 248, 0.08);
  border: 1px solid rgba(143, 216, 248, 0.2);
  border-radius: var(--border-radius-pill);
}

.tag-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--color-bleu-iceberg);
  box-shadow: 0 0 6px var(--color-bleu-iceberg);
}

.tag-text {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-bleu-iceberg);
}

.description-text {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(247, 247, 242, 0.75);
  font-weight: var(--weight-regular);
  letter-spacing: 0.01em;
}

/* Video Hover Actions Container (CTAs + Track Controls) */
.video-hover-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  transform: translateY(8px);
  transition: transform 0.4s var(--ease-out-expo);
}

.video-card-frame:hover .video-hover-actions {
  transform: translateY(0);
}

/* Dual Hero Action CTAs Overlay */
.hero-actions-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.hero-btn {
  padding: 10px 18px;
  font-size: 11px;
  letter-spacing: 0.08em;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 0;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.3s var(--ease-out-expo);
}

.hero-btn svg {
  transition: transform 0.25s ease;
}

.hero-btn:hover svg {
  transform: translateX(3px);
}

.btn-secondary.hero-btn:hover svg {
  transform: translate(2px, -2px);
}

/* ==========================================================================
   3. ENTRANCE ANIMATIONS (STAGGERED PAGE ENTRY)
   ========================================================================== */

/* Keyframe Definitions */
@keyframes keyframeFadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes keyframeFadeInUp {
  0% {
    opacity: 0;
    transform: translateY(35px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes keyframeTextReveal {
  0% {
    opacity: 0;
    transform: translateY(105%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes keyframeScaleUpFade {
  0% {
    opacity: 0;
    transform: scale(0.94) translateY(15px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes keyframeBorderDraw {
  0% {
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
  }
  100% {
    opacity: 1;
    transform: scaleX(1);
    transform-origin: left;
  }
}

/* Animation Trigger Classes */
.animate-header .animate-item {
  animation: keyframeFadeInDown 0.8s var(--ease-out-expo) var(--delay, 0s) backwards;
}

.animate-text {
  animation: keyframeTextReveal 1s var(--ease-out-expo) var(--delay, 0.2s) backwards;
}

.animate-row {
  animation: keyframeFadeInUp 0.8s var(--ease-out-expo) var(--delay, 0.2s) backwards;
}

.animate-card {
  animation: keyframeScaleUpFade 1s var(--ease-out-expo) var(--delay, 0.5s) backwards;
}

.animate-badge {
  animation: keyframeFadeInDown 0.6s var(--ease-out-expo) var(--delay, 0.8s) backwards;
}

.animate-controls {
  animation: keyframeFadeInUp 0.6s var(--ease-out-expo) var(--delay, 0.9s) backwards;
}

.animate-bio {
  animation: keyframeFadeInUp 0.8s var(--ease-out-expo) var(--delay, 0.75s) backwards;
}

/* ==========================================================================
   4. RESPONSIVE BREAKPOINTS
   ========================================================================== */
@media (max-width: 1024px) {
  .header-grid {
    grid-template-columns: 1fr 1fr;
  }

  .header-center {
    display: none;
  }

  .hero-container {
    grid-template-columns: 1fr;
  }

  .hero-left {
    border-right: none;
  }

  .hero-right {
    border-top: 1px solid var(--grid-line-color);
    padding: 40px 28px;
  }
}

@media (max-width: 640px) {
  .header-col {
    padding: 14px 18px;
  }

  .brand-logo-img {
    height: 28px;
  }

  .editorial-row {
    padding: 24px 20px;
    min-height: 120px;
  }

  .title-text {
    font-size: clamp(2.8rem, 13vw, 4.8rem);
  }

  .hero-right {
    padding: 28px 20px;
  }
}

/* ==========================================================================
   SINGLE PROJECT DETAIL PAGE ARCHITECTURE (project-detail.html)
   ========================================================================== */
.page-project-detail {
  background: var(--color-noir-profond);
}

.project-detail-main {
  width: 100%;
  min-height: 100vh;
  position: relative;
}

/* Sticky Breadcrumb Navigation Bar */
.detail-nav-bar {
  position: sticky;
  top: var(--header-height, 72px);
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 44px;
  background: rgba(10, 10, 10, 0.88);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border-bottom: 1px solid var(--grid-line-color);
}

.detail-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-blanc-casse);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.3s ease, transform 0.3s var(--ease-out-expo);
}

.detail-back-btn:hover {
  color: var(--color-bleu-iceberg);
  transform: translateX(-4px);
}

.detail-back-btn svg {
  color: var(--color-bleu-iceberg);
}

.detail-nav-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(247, 247, 242, 0.6);
}

.detail-top-cat {
  color: var(--color-bleu-iceberg);
}

/* Hero Section & Cinema Video Theater Stage (Full Viewport Theater Stage) */
.page-project-detail .detail-hero-section,
.project-detail-main .detail-hero-section,
.detail-hero-section {
  position: relative !important;
  width: 100% !important;
  height: calc(100vh - var(--header-height, 72px) - 52px) !important;
  min-height: calc(100vh - 124px) !important;
  background: #000 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.page-project-detail .detail-video-theater,
.detail-video-theater {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
}

.page-project-detail .detail-main-video,
.detail-main-video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  filter: brightness(1.15) contrast(1.04) !important;
}

.page-project-detail .detail-video-vignette,
.detail-video-vignette {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(180deg, rgba(10,10,10,0.4) 0%, rgba(10,10,10,0.1) 40%, rgba(10,10,10,0.85) 100%) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* Cinema Player Custom Controls & Client Logo Badge (Fixed Pinned Capsule on Scroll) */
.detail-player-controls {
  position: fixed !important;
  bottom: 32px !important;
  right: 40px !important;
  z-index: 999 !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px;
  padding: 8px 22px 8px 16px;
  background: rgba(10, 10, 10, 0.88);
  backdrop-filter: blur(32px) saturate(200%);
  -webkit-backdrop-filter: blur(32px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.7);
}

.hero-client-logo-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px 0 8px;
  height: 56px;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
}

.hero-client-logo-img {
  height: 54px;
  max-width: 220px;
  object-fit: contain;
  filter: brightness(0) invert(1) opacity(0.96) drop-shadow(0 2px 12px rgba(143, 216, 248, 0.45));
  transition: transform 0.35s var(--ease-out-expo), filter 0.35s ease;
}

.hero-client-logo-img:hover {
  transform: scale(1.08);
  filter: brightness(0) invert(1) opacity(1) drop-shadow(0 0 22px rgba(143, 216, 248, 0.95));
}

.player-ctrl-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--color-blanc-casse);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
}

.player-ctrl-btn:hover {
  background: rgba(143, 216, 248, 0.25);
  border-color: rgba(143, 216, 248, 0.7);
  color: var(--color-bleu-iceberg);
  transform: scale(1.08);
}

.ctrl-icon.is-hidden {
  display: none !important;
}

/* Project Hero Header Overlay */
.detail-header-overlay {
  position: absolute;
  bottom: 44px;
  left: 44px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 800px;
}

.detail-cat-badge {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-bleu-iceberg);
}

.detail-project-title {
  font-family: var(--font-title);
  font-size: clamp(3.2rem, 7vw, 7.5rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-blanc-casse);
  margin: 0;
  line-height: 0.95;
  text-shadow: 0 10px 40px rgba(0, 0, 0, 0.85);
}

.detail-sub-header {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(247, 247, 242, 0.7);
}

.detail-client {
  color: var(--color-bleu-iceberg);
}

/* Editorial Story & Concept Narrative Section (2-Column Architectural Grid) */
.detail-story-section {
  width: 100%;
  padding: 88px 44px;
  background: var(--color-noir-profond);
  border-bottom: 1px solid var(--grid-line-color);
}

.detail-story-grid {
  display: flex;
  gap: 56px;
  max-width: 1600px;
  margin: 0 auto;
}

/* Left Column (64% Width: Story Narrative) */
.detail-main-story {
  flex: 1 1 64%;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.story-block {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.story-tag {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-bleu-iceberg);
}

.story-heading {
  font-family: var(--font-title);
  font-size: clamp(2.2rem, 3.8vw, 4rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--color-blanc-casse);
  margin: 0;
  line-height: 1.08;
}

.story-text {
  font-family: var(--font-body);
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.8;
  color: rgba(247, 247, 242, 0.85);
  margin: 0;
}

/* Right Column (36% Width: Specs & AI Tech Stack Sidebar - NO GLASS CONTAINER) */
.detail-sidebar-specs {
  flex: 0 0 36%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

/* Solid Bleu Iceberg (#8FD8F8) Floating Specifications Card (NO GLASS EFFECT) */
.specs-card-solid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 28px;
  background: #8FD8F8 !important;
  background: linear-gradient(135deg, #A0E6FF 0%, #8FD8F8 50%, #6ECCF5 100%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 6px 25px rgba(143, 216, 248, 0.35);
  color: #0A0A0A !important;
  transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s ease;
  animation: specCardFloat 6s ease-in-out infinite;
}

@keyframes specCardFloat {
  0%, 100% {
    transform: translateY(0);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 6px 25px rgba(143, 216, 248, 0.35);
  }
  50% {
    transform: translateY(-10px);
    box-shadow: 0 38px 80px rgba(0, 0, 0, 0.65), 0 12px 38px rgba(143, 216, 248, 0.5);
  }
}

.specs-card-solid:hover {
  animation-play-state: paused;
  transform: translateY(-12px) scale(1.01);
  box-shadow: 0 44px 90px rgba(0, 0, 0, 0.7), 0 16px 48px rgba(143, 216, 248, 0.6);
}

.specs-card-solid .spec-client-row {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(10, 10, 10, 0.16);
}

.specs-card-solid .spec-client-brand-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  margin: 0;
}

.specs-card-solid .spec-client-logo-img {
  height: 92px;
  max-width: 270px;
  object-fit: contain;
  filter: brightness(0) !important;
  transition: transform 0.4s var(--ease-out-expo);
  margin: 0;
}

.specs-card-solid .spec-client-logo-img:hover {
  transform: scale(1.06);
}

.specs-grid-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(10, 10, 10, 0.14);
}

.spec-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.specs-card-solid .spec-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 0;
  border-bottom: none;
}

.specs-card-solid .spec-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(10, 10, 10, 0.65) !important;
}

.specs-card-solid .spec-value {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #0A0A0A !important;
}

/* ==========================================================================
   STAGGERED ENTRY ANIMATION SYSTEM FOR STORY & SPECIFICATIONS SECTION
   ========================================================================== */

.detail-story-section .story-tag,
.detail-story-section .story-heading,
.detail-story-section .story-text,
.detail-story-section .specs-card-solid {
  opacity: 0;
  will-change: opacity, transform, filter;
  transition: opacity 1.0s var(--ease-out-expo), transform 1.0s var(--ease-out-expo), filter 0.9s var(--ease-out-expo) !important;
}

.detail-story-section .story-tag {
  transform: translateY(-24px);
  filter: blur(8px);
}

.detail-story-section .story-heading {
  transform: translateY(45px) scale(0.96);
  filter: blur(14px);
}

.detail-story-section .story-text {
  transform: translateY(32px);
  filter: blur(10px);
}

.detail-story-section .specs-card-solid {
  transform: translateX(50px) scale(0.94);
  filter: blur(16px);
}

/* Animated State (.is-animated) */
.detail-story-section.is-animated .story-tag {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition-delay: 0.1s !important;
}

.detail-story-section.is-animated .story-heading {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  transition-delay: 0.25s !important;
}

.detail-story-section.is-animated #detailStoryP1 {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition-delay: 0.4s !important;
}

.detail-story-section.is-animated #detailStoryP2 {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition-delay: 0.52s !important;
}

.detail-story-section.is-animated .specs-card-solid {
  opacity: 1;
  transform: translateX(0) scale(1);
  filter: blur(0);
  transition-delay: 0.3s !important;
}

.spec-value {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-blanc-casse);
}

/* AI Generative Tech Stack Section (No Glass Container) */
.tech-stack-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px 0 0 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-top: 1px solid var(--grid-line-color);
  border-radius: 0;
  box-shadow: none;
}

.tech-stack-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-bleu-iceberg);
}

.tech-tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tech-tag-badge {
  padding: 8px 18px;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--color-blanc-casse);
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  backdrop-filter: none;
  transition: all 0.3s ease;
}

.tech-tag-badge:hover {
  background: rgba(143, 216, 248, 0.12);
  border-color: var(--color-bleu-iceberg);
  color: var(--color-bleu-iceberg);
  transform: translateY(-2px);
}

.tech-tag-badge:hover {
  background: rgba(143, 216, 248, 0.2);
  border-color: rgba(143, 216, 248, 0.7);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(143, 216, 248, 0.2);
}

.director-quote-card {
  padding: 44px 38px;
  background: linear-gradient(135deg, rgba(143, 216, 248, 0.07) 0%, rgba(155, 231, 196, 0.03) 100%);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-left: 4px solid var(--color-bleu-iceberg);
  border-radius: 0 20px 20px 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

.quote-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.quote-mark {
  font-family: var(--font-accent);
  font-size: 52px;
  line-height: 0.6;
  color: var(--color-bleu-iceberg);
}

.quote-tag {
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-bleu-iceberg);
}

.quote-text {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--color-blanc-casse);
  margin: 0;
}

.quote-author-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 4px;
}

.quote-author-name {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-blanc-casse);
}

.quote-author-title {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(143, 216, 248, 0.8);
}

/* 3. High-Fashion Inline Editorial Video Section (Inspired by User Screenshot) */
.inline-editorial-section {
  position: relative;
  overflow: hidden;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 130px 44px;
  background: var(--color-noir-profond);
  border-top: 1px solid var(--grid-line-color);
  border-bottom: 1px solid var(--grid-line-color);
  margin-top: 64px;
}

.inline-editorial-bg-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  background: #000000;
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.inline-editorial-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.06);
  filter: brightness(0.85) contrast(1.1);
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1), filter 0.85s ease;
}

.inline-editorial-bg-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0.15) 0%, rgba(6, 8, 10, 0.7) 100%);
}

.inline-editorial-container {
  position: relative;
  z-index: 1;
  max-width: 1500px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* On hover over the centered small video: background video reveals and ALL text disappears */
.inline-editorial-section:has(.inline-video-frame:hover) .inline-editorial-bg-wrap,
.inline-editorial-section.is-video-hovered .inline-editorial-bg-wrap {
  opacity: 1;
}

.inline-editorial-section:has(.inline-video-frame:hover) .inline-editorial-bg-video,
.inline-editorial-section.is-video-hovered .inline-editorial-bg-video {
  transform: scale(1);
}

.inline-editorial-section:has(.inline-video-frame:hover) .inline-section-tag,
.inline-editorial-section:has(.inline-video-frame:hover) .headline-word-main,
.inline-editorial-section:has(.inline-video-frame:hover) .headline-word-sub,
.inline-editorial-section:has(.inline-video-frame:hover) .inline-monospace-desc,
.inline-editorial-section:has(.inline-video-frame:hover) .headline-creativity-wrap,
.inline-editorial-section.is-video-hovered .inline-section-tag,
.inline-editorial-section.is-video-hovered .headline-word-main,
.inline-editorial-section.is-video-hovered .headline-word-sub,
.inline-editorial-section.is-video-hovered .inline-monospace-desc,
.inline-editorial-section.is-video-hovered .headline-creativity-wrap {
  opacity: 0 !important;
  transform: scale(0.94) translateY(16px) !important;
  filter: blur(16px) !important;
  pointer-events: none !important;
  transition: opacity 0.4s ease, transform 0.5s ease, filter 0.4s ease !important;
}

.inline-section-tag {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(247, 247, 242, 0.7);
  margin-bottom: 56px;
  transition: opacity 0.5s ease, transform 0.5s ease, filter 0.5s ease;
}

.inline-editorial-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  align-items: center;
}

/* Line 1: Powered [VIDEO FRAME] ai */
.inline-headline-row.line-1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  font-size: clamp(3.8rem, 8.5vw, 9.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-blanc-casse);
}

.headline-word-main {
  font-family: var(--font-title);
  color: var(--color-blanc-casse);
  transition: opacity 0.5s ease, transform 0.5s ease, filter 0.5s ease;
}

.inline-video-frame {
  position: relative;
  width: clamp(140px, 18vw, 240px);
  height: clamp(110px, 14vw, 190px);
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
  display: inline-flex;
  vertical-align: middle;
  transition: transform 0.55s var(--ease-out-expo), border-color 0.4s ease, box-shadow 0.55s ease;
  z-index: 10;
}

.inline-video-frame:hover {
  transform: scale(1.12);
  border-color: var(--color-bleu-iceberg);
  box-shadow: 0 0 50px rgba(143, 216, 248, 0.5), 0 25px 60px rgba(0, 0, 0, 0.9);
}

.inline-frame-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.inline-frame-badge {
  position: absolute;
  top: 10px;
  right: 12px;
  font-family: var(--font-body);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--color-bleu-iceberg);
  padding: 3px 8px;
  background: rgba(10, 10, 10, 0.75);
  backdrop-filter: blur(8px);
  border-radius: 6px;
}

.headline-word-sub {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  background: linear-gradient(135deg, #F7F7F2 0%, var(--color-bleu-iceberg) 55%, var(--color-vert-menthe) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Line 2: Monospace Desc (Left) + Creativity (Right) */
.inline-headline-row.line-2 {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 44px;
  width: 100%;
  max-width: 1280px;
  align-items: center;
  margin-top: 12px;
}

.inline-monospace-desc {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.65;
  letter-spacing: 0.04em;
  color: rgba(247, 247, 242, 0.65);
  text-align: left;
  margin: 0;
}

.headline-creativity-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
}

.headline-creativity-text {
  font-family: var(--font-title);
  font-size: clamp(3.4rem, 8.5vw, 9.5rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--color-blanc-casse);
  margin: 0;
  line-height: 0.95;
}

.headline-creativity-text .title-serif-accent {
  font-family: var(--font-serif-accent);
  font-style: italic;
  font-weight: 300;
  background: linear-gradient(135deg, #F7F7F2 0%, var(--color-bleu-iceberg) 55%, var(--color-vert-menthe) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  display: inline;
}

.brand-registered-icon {
  width: clamp(28px, 2.8vw, 44px);
  height: clamp(28px, 2.8vw, 44px);
  min-width: 28px;
  color: var(--color-bleu-iceberg);
  margin-top: 4px;
  flex-shrink: 0;
  transition: transform 0.4s var(--ease-out-expo);
}

/* Home Section Overrides for Seamless Integration */
.home-editorial-statement {
  margin-top: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: none;
  padding: clamp(90px, 12vh, 160px) clamp(24px, 4vw, 64px);
}

.home-editorial-statement .headline-word-main {
  font-size: clamp(2.8rem, 6.5vw, 7.5rem);
  white-space: nowrap;
}

.home-editorial-statement .headline-word-sub {
  font-size: clamp(3rem, 7vw, 8rem);
}

.home-editorial-statement .headline-creativity-text {
  font-size: clamp(2.8rem, 6.8vw, 7.8rem);
  white-space: nowrap;
}

.home-editorial-statement .inline-monospace-desc {
  max-width: 400px;
  font-size: 13.5px;
  line-height: 1.68;
  color: rgba(247, 247, 242, 0.72);
}

@media (max-width: 900px) {
  .inline-headline-row.line-2 {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .inline-monospace-desc {
    text-align: center;
  }
  .headline-creativity-wrap {
    justify-content: center;
  }
  .home-editorial-statement .headline-word-main,
  .home-editorial-statement .headline-creativity-text {
    white-space: normal;
  }
}

/* Scroll Reveal Entrance Animations for Inline Editorial Section */
.inline-editorial-section .inline-section-tag,
.inline-editorial-section .line-1 .headline-word-main,
.inline-editorial-section .line-1 .headline-word-sub,
.inline-editorial-section .inline-video-frame,
.inline-editorial-section .inline-monospace-desc,
.inline-editorial-section .headline-creativity-wrap {
  opacity: 0;
  transition: opacity 1.0s var(--ease-out-expo), transform 1.1s var(--ease-out-expo), filter 0.9s var(--ease-out-expo);
  will-change: opacity, transform, filter;
}

.inline-editorial-section .inline-section-tag {
  transform: translateY(-24px);
  filter: blur(6px);
}

.inline-editorial-section .line-1 .headline-word-main {
  transform: translateX(-50px) translateY(30px);
  filter: blur(10px);
}

.inline-editorial-section .line-1 .headline-word-sub {
  transform: translateX(50px) translateY(30px);
  filter: blur(10px);
}

.inline-editorial-section .inline-video-frame {
  transform: scale(0.6) rotate(-4deg);
  filter: blur(16px);
}

.inline-editorial-section .inline-monospace-desc {
  transform: translateX(-40px) translateY(20px);
  filter: blur(8px);
}

.inline-editorial-section .headline-creativity-wrap {
  transform: translateY(50px) scale(0.94);
  filter: blur(12px);
}

/* Revealed State (.is-in-view) */
.inline-editorial-section.is-in-view .inline-section-tag {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition-delay: 0.1s;
}

.inline-editorial-section.is-in-view .line-1 .headline-word-main {
  opacity: 1;
  transform: translateX(0) translateY(0);
  filter: blur(0);
  transition-delay: 0.25s;
}

.inline-editorial-section.is-in-view .inline-video-frame {
  opacity: 1;
  transform: scale(1) rotate(0deg);
  filter: blur(0);
  transition-delay: 0.38s;
}

.inline-editorial-section.is-in-view .line-1 .headline-word-sub {
  opacity: 1;
  transform: translateX(0) translateY(0);
  filter: blur(0);
  transition-delay: 0.48s;
}

.inline-editorial-section.is-in-view .inline-monospace-desc {
  opacity: 1;
  transform: translateX(0) translateY(0);
  filter: blur(0);
  transition-delay: 0.6s;
}

.inline-editorial-section.is-in-view .headline-creativity-wrap {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  transition-delay: 0.72s;
}

/* 4. Production Deliverables Checklist Strip (Minimalist Line Divider - NO GLASS CARD) */
.detail-deliverables-strip {
  max-width: 1600px;
  margin: 64px auto 0 auto;
  padding: 32px 0 0 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-top: 1px solid var(--grid-line-color);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.deliverables-label {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-bleu-iceberg);
  white-space: nowrap;
}

.deliverables-pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.deliverable-pill {
  padding: 8px 18px;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-blanc-casse);
  transition: all 0.3s ease;
}

.deliverable-pill:hover {
  background: rgba(143, 216, 248, 0.12);
  border-color: var(--color-bleu-iceberg);
  color: var(--color-bleu-iceberg);
  transform: translateY(-2px);
}

@media (max-width: 1100px) {
  .detail-specs-bar {
    grid-template-columns: repeat(2, 1fr);
  }
  .film-strip-grid {
    grid-template-columns: 1fr;
  }
  .still-portrait {
    max-height: 400px;
  }
  .detail-deliverables-strip {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Director Statement Quote Card */
.director-quote-card {
  padding: 32px;
  background: rgba(143, 216, 248, 0.04);
  border-left: 3px solid var(--color-bleu-iceberg);
  border-radius: 0 16px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.quote-mark {
  font-family: var(--font-accent);
  font-size: 44px;
  line-height: 0.8;
  color: var(--color-bleu-iceberg);
}

.quote-text {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-blanc-casse);
  margin: 0;
}

.quote-author {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-bleu-iceberg);
}

/* Dual Call To Action Section (Full-Bleed 50/50 Architectural Split - Full Height Line) */
.detail-cta-banner-section {
  width: 100%;
  padding: 0;
  background: var(--color-noir-profond);
  border-top: 1px solid var(--grid-line-color);
  border-bottom: 1px solid var(--grid-line-color);
  position: relative;
}

.cta-banner-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  max-width: 100%;
  margin: 0;
  min-height: 480px;
}

.dual-cta-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 8%;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  position: relative;
  overflow: hidden;
  height: 100%;
  transition: background 0.4s ease;
}

.dual-cta-card.cta-business {
  border-right: 1px solid var(--grid-line-color);
}

/* Tinted Background Video Wrapper */
.cta-bg-video-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
  transform: scale(1.05);
}

.cta-bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(12px) brightness(0.92) contrast(1.05);
  transform: scale(1.08);
}

.cta-bg-vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.68) 0%, rgba(10, 10, 10, 0.88) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 2;
}

/* Portfolio Editorial Header Section (Full-Height 100% Architectural 2-Column Split) */
.grid-editorial-header {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  background: var(--color-noir-profond);
  border-bottom: 1px solid var(--grid-line-color);
  box-sizing: border-box !important;
}

.grid-header-left {
  flex: 0 0 68% !important;
  width: 68% !important;
  max-width: 68% !important;
  padding: 48px 44px 44px 44px !important;
  box-sizing: border-box !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.grid-header-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-bleu-iceberg);
  margin-bottom: 14px;
}

.grid-header-title {
  font-family: var(--font-title);
  font-size: clamp(2.2rem, 4vw, 3.8rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--color-blanc-casse);
  margin-bottom: 16px;
}

.grid-header-desc {
  font-family: var(--font-body);
  font-size: clamp(14.5px, 1.2vw, 16.5px);
  font-weight: 400;
  line-height: 1.65;
  color: rgba(247, 247, 242, 0.72);
  max-width: 100%;
}

/* Right Column: Modern Asynchronous 2-Row Brand Ticker (100% Full Height Split) */
.grid-header-right-ticker {
  flex: 0 0 35% !important;
  width: 35% !important;
  max-width: 35% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  padding: 44px 36px 44px 36px !important;
  border-left: 1px solid var(--grid-line-color) !important;
  box-sizing: border-box !important;
  align-self: stretch !important;
}

.ticker-header-tag {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 8px !important;
  font-family: var(--font-accent) !important;
  font-size: 13px !important;
  font-style: italic !important;
  letter-spacing: 0.08em !important;
  text-transform: none !important;
  color: #8FD8F8 !important;
  -webkit-text-fill-color: #8FD8F8 !important;
  background: none !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
  margin: 0 auto 12px auto !important;
  line-height: 1.2 !important;
  width: 100% !important;
}

.brand-ticker-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.brand-ticker-track {
  display: flex;
  align-items: center;
  gap: 44px;
  white-space: nowrap;
  width: max-content;
  will-change: transform;
}

.brand-ticker-track.track-left {
  animation: marqueeLeft 28s linear infinite;
}

.brand-ticker-track.track-right {
  animation: marqueeRight 32s linear infinite;
}

.brand-ticker-track:hover {
  animation-play-state: paused;
}

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

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

.brand-ticker-img {
  height: 38px;
  width: auto;
  max-width: 125px;
  object-fit: contain;
  filter: brightness(0) invert(1) opacity(0.65);
  transition: filter 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
  cursor: pointer;
}

.brand-ticker-img:hover {
  filter: brightness(0) invert(1) opacity(1) drop-shadow(0 0 14px var(--color-bleu-iceberg));
  transform: scale(1.1);
}

.brand-logo-bullet {
  color: rgba(143, 216, 248, 0.4);
  font-size: 11px;
}



.dual-cta-card:hover .cta-bg-video-wrap {
  opacity: 1;
  transform: scale(1);
}

.cta-card-content {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cta-card-tag {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-bleu-iceberg);
}

.cta-card-title {
  font-family: var(--font-title);
  font-size: clamp(2.2rem, 3.2vw, 3.4rem);
  font-weight: 900;
  letter-spacing: 0.01em;
  color: var(--color-blanc-casse);
  margin: 0;
  line-height: 1.05;
}

.cta-card-desc {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(247, 247, 242, 0.75);
  margin: 0;
  max-height: 0;
  opacity: 0;
  transform: translateY(12px);
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.dual-cta-card:hover .cta-card-desc {
  max-height: 140px;
  opacity: 1;
  transform: translateY(0);
  margin-top: 6px;
  margin-bottom: 6px;
}

.cta-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  align-self: flex-start;
  padding: 16px 36px;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--color-blanc-casse);
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.4s var(--ease-out-expo);
  width: max-content;
}

.cta-action-btn:hover {
  background: var(--color-bleu-iceberg);
  border-color: var(--color-bleu-iceberg);
  color: #0A0A0A !important;
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(143, 216, 248, 0.3);
}

.cta-action-btn .cta-arrow-svg {
  width: 14px;
  height: 14px;
  color: currentColor;
  transition: transform 0.3s var(--ease-out-expo);
}

.cta-action-btn:hover .cta-arrow-svg {
  transform: translate(3px, -3px);
  color: #0A0A0A;
}

/* Scroll Reveal Entrance Animations for Dual CTA Section */
.detail-cta-banner-section .dual-cta-card {
  opacity: 0;
  transition: opacity 1.0s var(--ease-out-expo), transform 1.1s var(--ease-out-expo), filter 0.9s var(--ease-out-expo);
  will-change: opacity, transform, filter;
}

.detail-cta-banner-section .dual-cta-card.cta-business {
  transform: translateX(-40px) translateY(20px);
  filter: blur(10px);
}

.detail-cta-banner-section .dual-cta-card.cta-education {
  transform: translateX(40px) translateY(20px);
  filter: blur(10px);
}

/* Revealed State (.is-in-view) */
.detail-cta-banner-section.is-in-view .dual-cta-card.cta-business {
  opacity: 1;
  transform: translateX(0) translateY(0);
  filter: blur(0);
  transition-delay: 0.15s;
}

.detail-cta-banner-section.is-in-view .dual-cta-card.cta-education {
  opacity: 1;
  transform: translateX(0) translateY(0);
  filter: blur(0);
  transition-delay: 0.35s;
}

/* ==========================================================================
   THEY TRUSTED ME / CLIENT & PARTNERS BRAND SECTION
   ========================================================================== */

.trusted-partners-section {
  width: 100%;
  padding: 88px 44px;
  background: var(--color-noir-profond);
  border-top: 1px solid var(--grid-line-color);
  border-bottom: 1px solid var(--grid-line-color);
}

.trusted-partners-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 52px;
}

.trusted-header {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.trusted-tag {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-bleu-iceberg);
}

.trusted-heading {
  font-family: var(--font-title);
  font-size: clamp(2rem, 3.4vw, 3.2rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--color-blanc-casse);
  margin: 0;
  line-height: 1.12;
}

.trusted-paragraph {
  font-family: var(--font-body);
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.75;
  color: rgba(247, 247, 242, 0.75);
  margin: 0;
}

/* Infinite Sliding Marquee Ticker (No Card Boxes, Seamless Logo Slide) */
.trusted-ticker-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  padding: 16px 0;
}

.trusted-ticker-track {
  display: flex;
  align-items: center;
  gap: 72px;
  width: max-content;
  animation: trustedLogoSlide 32s linear infinite;
  will-change: transform;
}

.trusted-ticker-wrapper:hover .trusted-ticker-track {
  animation-play-state: paused;
}

@keyframes trustedLogoSlide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-50% - 36px));
  }
}

.ticker-logo-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  flex-shrink: 0;
  cursor: pointer;
}

.partner-logo-img {
  height: 50px;
  max-width: 190px;
  object-fit: contain;
  filter: brightness(0) invert(1) opacity(0.85) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
  transition: transform 0.4s var(--ease-out-expo), filter 0.4s ease;
}

.ticker-logo-slide:hover .partner-logo-img {
  transform: scale(1.12);
  filter: brightness(0) invert(1) opacity(1) drop-shadow(0 0 20px rgba(143, 216, 248, 0.9));
}

@media (max-width: 640px) {
  .trusted-partners-section {
    padding: 60px 24px;
  }
  .trusted-ticker-track {
    gap: 48px;
  }
  .partner-logo-img {
    height: 38px;
    max-width: 140px;
  }
}

/* Floating Next Project Cinema Footer Stage */
.next-project-section {
  width: 100%;
  height: 380px;
  position: relative;
  overflow: hidden;
  background: #000;
}

.next-project-card {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  overflow: hidden;
}

.next-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.9) contrast(1.05);
  transition: transform 0.8s var(--ease-out-expo), filter 0.5s ease;
}

.next-project-card:hover .next-bg-video {
  transform: scale(1.05);
  filter: brightness(1.15) contrast(1.08);
}

.next-vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.6) 0%, rgba(10,10,10,0.3) 50%, rgba(10,10,10,0.85) 100%);
  pointer-events: none;
  z-index: 2;
}

.next-info-box {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

.next-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-bleu-iceberg);
}

.next-label .cta-arrow-svg {
  width: 14px;
  height: 14px;
  color: var(--color-bleu-iceberg);
  transition: transform 0.35s var(--ease-out-expo);
}

.next-project-card:hover .next-label .cta-arrow-svg {
  transform: translate(3px, -3px);
}

.next-title {
  font-family: var(--font-title);
  font-size: clamp(2.8rem, 6vw, 6rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-blanc-casse);
  margin: 0;
  line-height: 0.95;
  text-shadow: 0 10px 40px rgba(0,0,0,0.85);
}

.next-meta {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(247, 247, 242, 0.7);
}

@media (max-width: 1024px) {
  .detail-story-grid {
    flex-direction: column;
  }
  .detail-sidebar-specs {
    max-width: 100%;
  }
  .cta-banner-container {
    flex-direction: column;
  }
}

/* ==========================================================================
   HIGH-FASHION EDITORIAL SITE FOOTER (MIRRORED HEADER DESIGN)
   ========================================================================== */
.site-footer {
  width: 100%;
  background-color: #0A0A0A;
  border-top: 1px solid var(--grid-line-color);
  position: relative;
  z-index: 10;
  box-sizing: border-box;
}

.footer-grid {
  display: grid;
  grid-template-columns: 68% 32%;
  min-height: var(--header-height);
  width: 100%;
}

.footer-col {
  display: flex;
  align-items: center;
  padding: 16px 40px;
  box-sizing: border-box;
}

.footer-left {
  border-right: 1px solid var(--grid-line-color);
  justify-content: space-between;
}

.footer-right {
  justify-content: flex-end;
}

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

.footer-nav .nav-menu {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 26px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-nav .nav-link.nav-cta-link {
  font-size: clamp(11.5px, 0.82vw, 13px);
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.footer-sub-bar {
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  background-color: #050505;
  padding: 12px 40px;
  box-sizing: border-box;
}

.footer-sub-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-copy-text {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
}

.footer-coords-text {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.28);
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .footer-left {
    border-right: none;
    border-bottom: 1px solid var(--grid-line-color);
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 24px;
  }
  .footer-nav .nav-menu {
    flex-wrap: wrap;
    gap: 20px;
  }
  .footer-right {
    justify-content: flex-start;
    padding: 20px 24px;
  }
  .footer-sub-bar {
    padding: 12px 24px;
  }
  .footer-coords-text {
    display: none;
  }
}

/* ==========================================================================
   UNIVERSAL SITE-WIDE NO-TINT VIDEO HOVER ARCHITECTURE
   ========================================================================== */
.archive-grid-card:hover .card-bg-overlay,
.picks-slide-card:hover .picks-bg-overlay,
.film-card:hover .still-vignette,
.film-item:hover .still-vignette,
.hero-right:hover .right-bg-overlay,
.editorial-row:hover .row-bg-overlay,
#workMegaMenu .megamenu-preview-card:hover .preview-vignette,
.next-project-card:hover .next-vignette,
.detail-hero-section:hover .detail-video-vignette {
  opacity: 0 !important;
  transition: opacity 0.4s ease !important;
}

.archive-grid-card:hover video,
.archive-grid-card:hover .archive-card-video,
.picks-slide-card:hover video,
.picks-slide-card:hover .picks-bg-video,
.film-card:hover video,
.film-card:hover .still-video,
.film-item:hover video,
.film-item:hover .still-video,
.hero-right:hover video,
.hero-right:hover .right-bg-video,
.editorial-row:hover video,
.editorial-row:hover .row-bg-video,
#workMegaMenu .megamenu-preview-card:hover video,
#workMegaMenu .megamenu-preview-card:hover .megamenu-preview-video,
.next-project-card:hover video,
.next-project-card:hover .next-bg-video,
.detail-hero-section:hover video,
.detail-hero-section:hover .detail-main-video {
  filter: brightness(1.08) contrast(1.02) saturate(105%) !important;
  transition: filter 0.4s ease, transform 0.6s var(--ease-out-expo) !important;
}

/* ==========================================================================
   FLOATING GLASS PICTURE-IN-PICTURE (PIP) VIDEO PLAYER (BOTTOM LEFT CORNER)
   ========================================================================== */
.detail-pip-window {
  position: fixed;
  bottom: 28px;
  left: 36px;
  width: 310px;
  border-radius: 12px;
  background: rgba(10, 10, 10, 0.94);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.08);
  overflow: hidden;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transform: translateY(60px) scale(0.92);
  transition: opacity 0.5s var(--ease-out-expo), transform 0.5s var(--ease-out-expo);
}

.detail-pip-window.is-pip-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.pip-video-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}

.pip-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pip-glass-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.92) 0%, rgba(10, 10, 10, 0) 100%);
  z-index: 4;
}

.pip-live-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pip-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-vert-menthe);
  box-shadow: 0 0 8px var(--color-vert-menthe);
  animation: pipPulse 1.8s infinite ease-in-out;
}

@keyframes pipPulse {
  0%, 100% { opacity: 0.3; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.2); }
}

.pip-badge-text {
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-blanc-casse);
}

.pip-controls-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pip-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--color-blanc-casse);
  cursor: pointer;
  transition: all 0.25s ease;
}

.pip-btn:hover {
  background: var(--color-bleu-iceberg);
  color: #0A0A0A;
  border-color: var(--color-bleu-iceberg);
}

.pip-jump-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  cursor: pointer;
}

/* ==========================================================================
   MOBILE & TABLET RESPONSIVE ENGINE (SUPER MOBILE FRIENDLY DESIGN SYSTEM)
   ========================================================================== */

/* Tablet & Medium Screen Optimization (max-width: 1024px) */
@media screen and (max-width: 1024px) {
  .header-grid {
    grid-template-columns: 1fr auto !important;
  }
  
  .header-col {
    padding: 20px 24px !important;
  }

  /* Editorial Grid Header (2 Columns -> Stack Vertically) */
  .grid-editorial-header {
    flex-direction: column !important;
  }

  .grid-header-left {
    flex: 0 0 100% !important;
    width: 100% !important;
    padding: 36px 28px !important;
  }

  .grid-header-right-ticker {
    flex: 0 0 100% !important;
    width: 100% !important;
    border-left: none !important;
    border-top: 1px solid var(--grid-line-color) !important;
    padding: 32px 24px !important;
  }

  /* Hero Section Grid Layout */
  .hero-container {
    flex-direction: column !important;
  }

  .hero-col {
    width: 100% !important;
  }

  .hero-right {
    height: 420px !important;
    min-height: 420px !important;
  }

  /* Archive Grid Container (3 Columns -> 2 Columns Masonry) */
  .archive-grid-container {
    column-count: 2 !important;
    column-gap: 24px !important;
    padding: 24px 28px !important;
  }
}

/* Mobile Devices & Smartphones (max-width: 768px) */
@media screen and (max-width: 768px) {
  /* Header Bar Mobile Styling */
  .site-header {
    height: auto !important;
  }

  .header-grid {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 16px !important;
  }

  .header-col {
    padding: 0 !important;
    border: none !important;
  }

  .brand-logo-img {
    height: 28px !important;
  }

  .nav-cta-link span {
    display: none !important;
  }

  .nav-cta-link {
    padding: 8px 12px !important;
  }

  /* Hero Section & Headline Scaling */
  .editorial-title {
    font-size: clamp(2rem, 8vw, 3.2rem) !important;
  }

  .editorial-subtitle {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }

  .hero-right {
    height: 320px !important;
    min-height: 320px !important;
  }

  /* Brand Logo Marquee Ticker Scaling */
  .ticker-header-tag {
    font-size: 9px !important;
    margin-bottom: 16px !important;
  }

  .brand-ticker-img {
    height: 44px !important;
    max-width: 130px !important;
    margin: 0 16px !important;
  }

  /* Sticky Category Filter Bar (Mobile Touch Momentum Scroll) */
  .archive-sticky-filter-bar {
    top: 0 !important;
    height: auto !important;
    min-height: 52px !important;
    padding: 8px 12px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    justify-content: flex-start !important;
  }

  .archive-sticky-filter-bar::-webkit-scrollbar {
    display: none !important;
  }

  .archive-filter-nav {
    width: max-content !important;
  }

  .category-segmented-switch {
    width: max-content !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    padding: 3px !important;
    overflow-x: auto !important;
  }

  .archive-filter-btn {
    height: 32px !important;
    padding: 0 14px !important;
    font-size: 9px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Archive Grid Container (1 Single Column on Mobile) */
  .archive-grid-container {
    column-count: 1 !important;
    column-gap: 20px !important;
    padding: 24px 16px !important;
  }

  .archive-grid-card {
    border-radius: 12px !important;
  }

  .card-media-wrap {
    aspect-ratio: 16 / 9 !important;
  }

  .card-title {
    font-size: 1.6rem !important;
  }

  .card-sub {
    font-size: 10px !important;
  }

  /* Project Detail Page Mobile Optimization */
  .detail-hero-section {
    padding: 24px 16px !important;
  }

  .detail-header-meta {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .detail-title {
    font-size: clamp(2rem, 8vw, 3.4rem) !important;
  }

  .detail-story-grid {
    flex-direction: column !important;
    padding: 24px 16px !important;
    gap: 32px !important;
  }

  .detail-story-col,
  .detail-sidebar-specs {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Floating PIP Video Player Mobile Responsive Dock */
  .detail-pip-window {
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
  }

  /* Footer Grid Mobile Stacking */
  .footer-grid {
    grid-template-columns: 1fr !important;
  }

  .footer-left {
    border-right: none !important;
    border-bottom: 1px solid var(--grid-line-color) !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 24px 16px !important;
  }

  .footer-right {
    justify-content: flex-start !important;
    padding: 20px 16px !important;
  }
}

/* Small Smartphone Devices (max-width: 480px) */
@media screen and (max-width: 480px) {
  .editorial-title {
    font-size: 1.8rem !important;
  }

  .archive-sticky-filter-bar {
    padding: 6px 8px !important;
  }

  .archive-filter-btn {
    padding: 0 10px !important;
    font-size: 8.5px !important;
  }
}

/* ==========================================================================
   VERSION 2 (PROJECT-DETAILV2.HTML) HIGH-FASHION MINIMALIST DESIGN
   ========================================================================== */

.page-project-detail-v2 {
  background-color: var(--color-noir-profond);
  color: var(--color-blanc-casse);
}

.v2-project-detail-main {
  width: 100%;
  padding-top: 0 !important;
}

.page-project-detail-v2 .detail-nav-bar {
  position: relative;
  top: 0;
  padding: 16px 48px;
  border-bottom: 1px solid var(--grid-line-color);
  background: var(--color-noir-profond);
}

.v2-hero-header {
  width: 100%;
  padding: 36px 48px 24px 48px;
  border-bottom: 1px solid var(--grid-line-color);
  background: var(--color-noir-profond);
  overflow: hidden;
}

.v2-marquee-wrap {
  width: 100%;
  overflow: hidden;
}

.v2-marquee-title {
  font-family: var(--font-title);
  font-size: clamp(3.6rem, 9.5vw, 11rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: #FFFFFF;
  margin: 0;
  line-height: 0.95;
  white-space: nowrap;
}

.v2-marquee-title .accent-gradient-word {
  font-family: var(--font-title);
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(135deg, #8FD8F8 0%, #BBE7FD 50%, #9FE4C9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-right: 0.08em;
}

.v2-main-grid-section {
  width: 100%;
  padding: 64px 48px 120px 48px;
  background: var(--color-noir-profond);
}

.v2-grid-container {
  max-width: 1600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 42% 54%;
  gap: 4%;
  align-items: start;
  position: relative;
}

/* 100% Full Height Section Vertical Divider Line */
.v2-grid-container::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 44%;
  width: 1px;
  background: var(--grid-line-color);
  z-index: 1;
}

.v2-left-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 24px;
  padding-right: 48px;
  border-right: none;
  position: sticky;
  top: 100px;
  align-self: start;
  z-index: 2;
}

.v2-date-subhead {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.01em;
}

.v2-narrative-block {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.v2-narrative-block p {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.75;
  color: rgba(247, 247, 242, 0.78);
  margin: 0;
}

.v2-specs-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 12px;
}

.v2-spec-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.v2-client-hero-brand {
  width: 100%;
  padding-bottom: 0;
  margin-bottom: -6px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.v2-client-logo-large {
  height: 95px;
  max-width: 280px;
  object-fit: contain;
  object-position: left center;
  filter: brightness(0) invert(1) opacity(0.98);
  transition: transform 0.4s var(--ease-out-expo);
}

.v2-client-logo-large:hover {
  transform: scale(1.05);
}

/* Solid Bleu Iceberg (#8FD8F8) Specifications Card (Matching Second Screenshot!) */
.v2-specs-card-solid {
  width: 100%;
  padding: 32px 36px;
  background: linear-gradient(135deg, #A0E6FF 0%, #8FD8F8 50%, #6ECCF5 100%) !important;
  border-radius: 28px;
  color: #0A0A0A !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 6px 25px rgba(143, 216, 248, 0.35);
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s ease;
  animation: v2SpecCardFloat 6s ease-in-out infinite;
}

@keyframes v2SpecCardFloat {
  0%, 100% {
    transform: translateY(0);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 6px 25px rgba(143, 216, 248, 0.35);
  }
  50% {
    transform: translateY(-8px);
    box-shadow: 0 36px 75px rgba(0, 0, 0, 0.65), 0 12px 35px rgba(143, 216, 248, 0.5);
  }
}

.v2-specs-card-solid:hover {
  animation-play-state: paused;
  transform: translateY(-10px) scale(1.01);
}

.v2-solid-card-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-bottom: 6px;
}

.v2-solid-card-logo {
  height: 52px;
  max-width: 220px;
  object-fit: contain;
  filter: brightness(0);
}

.v2-solid-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.v2-solid-card-col, .v2-solid-card-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.v2-solid-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(10, 10, 10, 0.65) !important;
}

.v2-solid-val {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #0A0A0A !important;
  text-transform: uppercase;
}

.v2-solid-card-divider {
  width: 100%;
  height: 1px;
  background: rgba(10, 10, 10, 0.15);
}

.v2-cta-wrap {
  margin-top: 16px;
}

/* Solid Bleu Iceberg (#8FD8F8) High-Impact CTA Button (No Line, No Glass Effect) */
.v2-signature-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 40px;
  background: var(--color-bleu-iceberg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #0A0A0A !important;
  box-shadow: 0 10px 30px rgba(143, 216, 248, 0.35);
  transition: transform 0.4s var(--ease-out-expo), background 0.4s ease, box-shadow 0.4s ease;
}

.v2-signature-btn:hover {
  background: #A0E6FF !important;
  color: #000000 !important;
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 16px 45px rgba(143, 216, 248, 0.55);
}

.v2-signature-btn .cta-arrow-svg {
  stroke: #0A0A0A !important;
  transition: transform 0.4s var(--ease-out-expo);
}

.v2-signature-btn:hover .cta-arrow-svg {
  transform: translate(3px, -3px);
}

.v2-right-col {
  width: 100%;
  position: relative;
}

.v2-media-stack {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
}

.v2-media-stage {
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #0D0E10;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65);
}

.v2-stage-16-9 {
  aspect-ratio: 16 / 9 !important;
}

.v2-stage-9-16 {
  aspect-ratio: 9 / 16 !important;
  max-height: 75vh !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 auto;
}

.v2-video-player {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.v2-media-vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.35) 100%);
  pointer-events: none;
}

.v2-player-toolbar {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  pointer-events: auto;
}

/* Floating Glass Player Toolbar Pill (Exact Match of Reference Screenshot) */
.v2-floating-control-pill {
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 8px 14px 8px 24px;
  background: rgba(14, 14, 16, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.6);
  pointer-events: auto;
}

.v2-pill-client-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 4px;
}

.v2-pill-logo-img {
  height: 32px;
  max-width: 150px;
  object-fit: contain;
  filter: brightness(0) invert(1) opacity(0.98);
}

.v2-pill-divider {
  width: 1px;
  height: 34px;
  background: rgba(255, 255, 255, 0.22);
}

.v2-pill-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.v2-pill-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.v2-pill-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.08);
  color: #FFFFFF;
}

.v2-pill-btn:active {
  transform: scale(0.95);
}

.v2-player-control-btn {
  position: relative;
  bottom: auto;
  left: auto;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 28px;
  background: rgba(10, 10, 10, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  transition: transform 0.35s var(--ease-out-expo), background 0.35s ease, border-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
}

.v2-player-control-btn:hover {
  background: var(--color-bleu-iceberg);
  border-color: var(--color-bleu-iceberg);
  color: #0A0A0A;
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 12px 35px rgba(143, 216, 248, 0.45);
}

.v2-icon-only-btn {
  width: 48px !important;
  height: 48px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.v2-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Partner & Client Logo Display System (Clean Inverted White Monotonic Glow) */
.partner-logo-img {
  height: 38px;
  max-width: 140px;
  object-fit: contain;
  filter: brightness(0) invert(1) opacity(0.85);
  transition: filter 0.35s ease, transform 0.35s ease;
}

.partner-logo-img:hover {
  filter: brightness(0) invert(1) opacity(1);
  transform: scale(1.08);
}


@media (max-width: 1024px) {
  .v2-hero-header {
    padding: 80px 24px 20px 24px;
  }
  .v2-main-grid-section {
    padding: 40px 24px 80px 24px;
  }
  .v2-grid-container {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .v2-left-col {
    border-right: none;
    padding-right: 0;
  }
  .v2-right-col {
    position: relative;
    top: 0;
  }
  .v2-media-stage {
    aspect-ratio: 16 / 9;
  }
}

/* High-Fashion Modern & Sophisticated Entry Reveal Animations */
@keyframes v2FadeDown {
  from {
    opacity: 0;
    transform: translateY(-24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes v2FadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes v2ScaleReveal {
  from {
    opacity: 0;
    transform: translateY(35px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes v2PillPop {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.85);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.v2-animate-nav {
  animation: v2FadeDown 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

.v2-animate-hero-title {
  animation: v2FadeUp 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
}

.v2-animate-brand-logo {
  animation: v2FadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}

.v2-animate-desc-1 {
  animation: v2FadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.52s both;
}

.v2-animate-desc-2 {
  animation: v2FadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.64s both;
}

.v2-animate-specs-card {
  animation: v2ScaleReveal 1s cubic-bezier(0.16, 1, 0.3, 1) 0.78s both;
}

.v2-media-stage:nth-child(1) {
  animation: v2ScaleReveal 1s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both;
}

.v2-media-stage:nth-child(2) {
  animation: v2ScaleReveal 1s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both;
}

.v2-media-stage:nth-child(3) {
  animation: v2ScaleReveal 1s cubic-bezier(0.16, 1, 0.3, 1) 0.75s both;
}

.v2-floating-control-pill {
  animation: v2PillPop 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.85s both;
}

/* Scroll-triggered reveal classes for lower sections */
.v2-scroll-reveal {
  opacity: 0;
  transform: translateY(45px);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.v2-scroll-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   RESOURCES & KNOWLEDGE HUB SYSTEM (RESOURCES.HTML)
   ========================================================================== */

.resources-page-body {
  background-color: var(--color-noir-profond);
  color: var(--color-blanc-casse);
}

.resources-main-section {
  width: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Hero Section Split (68% Left / 32% Right) */
.resources-hero-split {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  border-bottom: 1px solid var(--grid-line-color);
  background: var(--color-noir-profond);
  box-sizing: border-box;
}

.resources-hero-left {
  flex: 0 0 68%;
  width: 68%;
  padding: 56px 52px;
  border-right: 1px solid var(--grid-line-color);
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}

.resources-hero-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.resources-badge-pill {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-bleu-iceberg);
  background: rgba(143, 216, 248, 0.08);
  border: 1px solid rgba(143, 216, 248, 0.24);
  padding: 6px 14px;
  border-radius: 20px;
}

.resources-count-tag {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(247, 247, 242, 0.65);
}

.resources-hero-title {
  font-family: var(--font-title);
  font-size: clamp(2.8rem, 5.2vw, 5.2rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--color-blanc-casse);
  line-height: 1.02;
  margin: 0 0 20px 0;
  text-transform: uppercase;
}

.serif-italic-accent {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 600;
  background: linear-gradient(135deg, #F7F7F2 0%, var(--color-bleu-iceberg) 60%, var(--color-vert-menthe) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.resources-hero-desc {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1.68;
  color: rgba(247, 247, 242, 0.72);
  max-width: 820px;
  margin: 0 0 32px 0;
}

/* Real-Time Interactive Search Capsule */
.resources-search-capsule {
  width: 100%;
  max-width: 680px;
}

.search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 40px;
  padding: 4px 18px;
  transition: all 0.35s var(--ease-out-expo);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

.search-input-wrap:focus-within {
  background: rgba(255, 255, 255, 0.09);
  border-color: var(--color-bleu-iceberg);
  box-shadow: 0 0 24px rgba(143, 216, 248, 0.2), inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

.search-icon-svg {
  color: var(--color-bleu-iceberg);
  margin-right: 12px;
  flex-shrink: 0;
}

.resource-search-field {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--color-blanc-casse);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 12px 0;
}

.resource-search-field::placeholder {
  color: rgba(247, 247, 242, 0.42);
}

.clear-search-btn {
  background: transparent;
  border: none;
  color: rgba(247, 247, 242, 0.6);
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  transition: color 0.2s ease;
}

.clear-search-btn:hover {
  color: var(--color-blanc-casse);
}

/* Right Column: Featured Resource Card (32%) */
.resources-hero-right {
  flex: 0 0 32%;
  width: 32%;
  padding: 40px 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(20, 20, 24, 0.6) 0%, rgba(10, 10, 12, 0.95) 100%);
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

.featured-resource-box {
  position: relative;
  width: 100%;
  padding: 32px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(143, 216, 248, 0.04) 50%, rgba(10, 10, 10, 0.8) 100%);
  border: 1px solid rgba(143, 216, 248, 0.35);
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.3);
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 2;
}

.featured-bg-glow {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(143, 216, 248, 0.35) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

.featured-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.featured-star-pill {
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-bleu-iceberg);
  background: rgba(143, 216, 248, 0.14);
  padding: 4px 10px;
  border-radius: 12px;
}

.featured-version-tag {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: rgba(247, 247, 242, 0.7);
}

.featured-card-title {
  font-family: var(--font-title);
  font-size: clamp(1.4rem, 1.8vw, 1.9rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-blanc-casse);
  line-height: 1.15;
  margin: 0;
}

.featured-card-desc {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(247, 247, 242, 0.75);
  margin: 0;
}

.featured-stats-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 8px 0;
}

.stat-pill {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 8px 6px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stat-num {
  font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
  font-size: 14px;
  font-weight: 900;
  color: var(--color-bleu-iceberg);
}

.stat-lbl {
  font-family: var(--font-body);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(247, 247, 242, 0.55);
}

.featured-read-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 13px 20px;
  background: linear-gradient(135deg, rgba(143, 216, 248, 0.3) 0%, rgba(143, 216, 248, 0.1) 100%);
  border: 1px solid rgba(143, 216, 248, 0.6);
  border-radius: 30px;
  color: var(--color-blanc-casse);
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s var(--ease-out-expo);
  box-shadow: 0 8px 24px rgba(143, 216, 248, 0.18);
}

.featured-read-btn:hover {
  background: rgba(143, 216, 248, 0.45);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(143, 216, 248, 0.35);
}

/* Category Filter Bar */
.resources-filter-bar {
  padding: 24px 52px;
  border-bottom: 1px solid var(--grid-line-color);
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(16px);
  position: sticky;
  top: 0;
  z-index: 20;
}

.resource-categories-switch {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.resource-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 30px;
  color: rgba(247, 247, 242, 0.7);
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s ease;
}

.resource-filter-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-blanc-casse);
  border-color: rgba(255, 255, 255, 0.3);
}

.resource-filter-btn.active {
  background: #FFFFFF !important;
  border-color: #FFFFFF !important;
  color: #0A0A0D !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-weight: 800 !important;
}

.resource-filter-btn.active svg {
  stroke: #0A0A0D !important;
  color: #0A0A0D !important;
}

/* ==========================================================================
   PORTFOLIO & ARCHIVE STICKY FILTER BAR (EXPANDED EDITORIAL CONTROLS)
   ========================================================================== */
.archive-sticky-filter-bar {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  padding: 8px 24px !important;
  box-sizing: border-box !important;
  position: sticky !important;
  top: 72px !important;
  z-index: 40 !important;
  background: rgba(6, 6, 8, 0.92) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.archive-filter-nav {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 1560px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

/* Center portfolio page filter pills */
.portfolio-archive-section .archive-filter-nav,
#portfolioArchive .archive-filter-nav {
  justify-content: center !important;
}

/* 1. Category Switcher */
.category-segmented-switch {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 40px !important;
  padding: 4px !important;
  gap: 4px !important;
  box-shadow: none !important;
  margin: 0 !important;
}

.switch-segment.archive-filter-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 8px 18px !important;
  border-radius: 30px !important;
  border: none !important;
  background: transparent !important;
  color: rgba(247, 247, 242, 0.7) !important;
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  white-space: nowrap !important;
}

.switch-segment.archive-filter-btn:hover {
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.switch-segment.archive-filter-btn.active {
  background: #FFFFFF !important;
  color: #0A0A0D !important;
  font-weight: 800 !important;
  border: 1px solid #FFFFFF !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
}

.switch-segment.archive-filter-btn.active svg,
.switch-segment.archive-filter-btn.active .pill-icon-svg {
  stroke: #0A0A0D !important;
  color: #0A0A0D !important;
  opacity: 1 !important;
}

/* 2. Integrated Search Capsule (Identical Pill Style to Category Filter) */
.archive-search-capsule {
  display: inline-flex !important;
  align-items: center !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 40px !important;
  padding: 0 16px !important;
  height: 42px !important;
  gap: 10px !important;
  min-width: 260px !important;
  max-width: 380px !important;
  flex: 1 1 auto !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
}

.archive-search-capsule:focus-within,
.archive-search-capsule:hover {
  border-color: rgba(255, 255, 255, 0.28) !important;
  background: rgba(255, 255, 255, 0.07) !important;
}

.archive-search-capsule .search-mini-icon {
  color: rgba(247, 247, 242, 0.5) !important;
  stroke: rgba(247, 247, 242, 0.5) !important;
  flex-shrink: 0 !important;
}

.archive-search-input {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: #FFFFFF !important;
  font-family: var(--font-body) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.03em !important;
  width: 100% !important;
  padding: 0 !important;
}

.archive-search-input::placeholder {
  color: rgba(247, 247, 242, 0.45) !important;
  font-family: var(--font-body) !important;
}

.archive-clear-btn {
  background: transparent !important;
  border: none !important;
  color: rgba(247, 247, 242, 0.6) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  padding: 0 2px !important;
  transition: color 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
}

.archive-clear-btn:hover {
  color: #FFFFFF !important;
}

/* 3. Layout Segmented Switch */
.layout-segmented-switch {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px !important;
  border-radius: 40px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
  margin: 0 !important;
}

.layout-view-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 16px !important;
  border-radius: 30px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: rgba(247, 247, 242, 0.7) !important;
  font-family: var(--font-body) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.layout-view-btn:hover {
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.layout-view-btn.active {
  background: #FFFFFF !important;
  border-color: #FFFFFF !important;
  color: #0A0A0D !important;
  font-weight: 800 !important;
}

.layout-view-btn.active svg {
  stroke: #0A0A0D !important;
  color: #0A0A0D !important;
}

/* ==========================================================================
   RESOURCES EDITORIAL HEADER & BRAND TICKER SYSTEM
   ========================================================================== */
.grid-editorial-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin: 0 !important;
  margin-bottom: 0 !important;
  padding: 36px 52px 8px 52px;
  align-items: center;
  box-sizing: border-box;
}

.grid-header-left {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.grid-header-tag {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-bleu-iceberg);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.grid-header-title {
  font-family: var(--font-title);
  font-size: clamp(2.4rem, 3.8vw, 3.4rem);
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.12;
  margin: 0;
  letter-spacing: -0.02em;
}

.grid-header-desc {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(247, 247, 242, 0.72);
  max-width: 540px;
  margin: 0;
}

.grid-header-right-ticker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.ticker-header-tag {
  font-family: var(--font-accent) !important;
  font-size: 13px !important;
  font-style: italic !important;
  letter-spacing: 0.08em !important;
  text-transform: none !important;
  color: #8FD8F8 !important;
  -webkit-text-fill-color: #8FD8F8 !important;
  background: none !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 8px !important;
  margin: 0 auto 12px auto !important;
  line-height: 1.2 !important;
  width: 100% !important;
}

.ticker-header-tag::before {
  display: none !important;
}

/* ==========================================================================
   AI PROVIDERS & TOOLS BRAND TICKER (MINIMAL LOGOS & TYPOGRAPHY - NO PILLS/BG)
   ========================================================================== */
.ai-ticker-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 4px 6px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: rgba(247, 247, 242, 0.85) !important;
  transition: all 0.25s ease !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  cursor: default !important;
}

.ai-ticker-item:hover {
  color: var(--color-bleu-iceberg) !important;
  transform: translateY(-2px) !important;
}

.ai-ticker-icon {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
  filter: brightness(0) invert(1) !important;
  opacity: 0.85 !important;
  transition: opacity 0.25s ease, transform 0.25s ease !important;
  display: block !important;
}

.ai-ticker-item:hover .ai-ticker-icon {
  opacity: 1 !important;
  transform: scale(1.12) !important;
}

.ai-ticker-name {
  font-family: var(--font-body) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  color: inherit !important;
  line-height: 1 !important;
}

/* ==========================================================================
   STATE-OF-THE-ART MODERN SEARCH BAR SYSTEM (MINIMAL LUXURY)
   ========================================================================== */
.modern-search-container {
  width: 100%;
  max-width: 460px;
  margin-top: 18px;
}

.modern-search-capsule {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 30px;
  padding: 3px 14px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
}

.modern-search-capsule:focus-within {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--color-bleu-iceberg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 20px rgba(143, 216, 248, 0.18);
  transform: translateY(-1px);
}

.search-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  color: var(--color-bleu-iceberg);
  flex-shrink: 0;
  opacity: 0.85;
}

.modern-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--color-blanc-casse);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  padding: 9px 0;
  letter-spacing: 0.01em;
}

.modern-search-input::placeholder {
  color: rgba(247, 247, 242, 0.4);
}

.modern-clear-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: rgba(247, 247, 242, 0.65);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.modern-clear-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
  transform: scale(1.1);
}
.resources-grid-section {
  padding: 40px 44px 80px 44px;
  width: 100%;
  box-sizing: border-box;
}

.resources-grid-section.is-list-mode {
  padding: 40px 0 80px 0 !important;
}

.resources-grid-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1720px;
  margin: 0 auto;
  gap: 36px;
  width: 100%;
  box-sizing: border-box;
  padding: 0 44px;
}

@media (max-width: 1200px) {
  .resources-grid-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    padding: 0 28px;
  }
}

@media (max-width: 768px) {
  .resources-grid-container {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 0 20px;
  }
}

/* ==========================================================================
   HIGH-FASHION SWISS MINIMALIST EDITORIAL RESOURCE CARD
   (CONCEPTUAL PRODUCT PREVIEWS + TEXT-FORWARD DETAIL VIEW ON HOVER)
   ========================================================================== */
.luxury-resource-card {
  position: relative;
  width: 100%;
  height: 380px;
  background: #060608;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  box-shadow: none !important;
  transition: border-color 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0;
  transform: translateY(20px);
  animation: cardElevate 0.5s var(--ease-out-expo) forwards;
  animation-delay: var(--card-delay, 0s);
  box-sizing: border-box;
}

.luxury-resource-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.25);
  background: #000000 !important;
}

/* Background Media & Conceptual Artwork Layers */
.card-media-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  background: #060608;
  transition: opacity 0.35s ease;
}

.luxury-resource-card:hover .card-media-wrap {
  opacity: 0 !important;
}

.card-media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.0);
  filter: brightness(0.85) contrast(1.05);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}

.luxury-resource-card:hover .card-media-img {
  transform: scale(1.03);
  filter: brightness(0.22) contrast(1.15);
}

.card-media-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 6, 8, 0.35) 0%, rgba(6, 6, 8, 0.1) 40%, rgba(6, 6, 8, 0.75) 75%, rgba(6, 6, 8, 0.98) 100%);
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 2;
}

/* Subtle Aperture / Matte Black Texture Overlay */
.card-aperture-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at center,
    rgba(6, 6, 8, 0.75) 0%,
    rgba(6, 6, 8, 0.92) 65%,
    #060608 100%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 3;
}

.luxury-resource-card:hover .card-aperture-overlay {
  opacity: 1;
}

/* 1. Default Card State (Resting View) */
.card-default-state {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 26px 24px;
  box-sizing: border-box;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: auto;
}

.luxury-resource-card:hover .card-default-state {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

.card-default-state .card-top-floating-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
}

.card-default-state .card-tag-num {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.card-default-state .card-tool-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.card-default-state .card-tool-icon {
  width: 13px;
  height: 13px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.card-default-state .card-tool-emoji {
  font-size: 13px;
  line-height: 1;
}

.card-default-state .card-bottom-editorial {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card-default-state .card-main-title {
  font-family: var(--font-title);
  font-size: clamp(1.4rem, 2vw, 1.65rem);
  font-weight: 900;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: #FFFFFF;
  line-height: 1.15;
  margin: 0;
}

.card-default-state .card-default-subtitle {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 400;
  color: rgba(247, 247, 242, 0.7);
  margin: 0;
  line-height: 1.45;
}

/* 2. Text-Forward Detail View (Full-Card Editorial Hover View) */
.card-hover-editorial-view {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 30px 28px;
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  background: #000000 !important;
}

.luxury-resource-card:hover .card-hover-editorial-view {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  background: #000000 !important;
}

/* Branding First Header */
.card-hover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  width: 100%;
}

.card-hover-brand {
  display: flex;
  align-items: center;
  gap: 9px;
}

.card-hover-logo-img {
  height: 16px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.card-hover-logo-emoji {
  font-size: 15px;
  line-height: 1;
}

.card-hover-model-tag {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FFFFFF;
}

.card-hover-time-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

/* Central Editorial Body */
.card-hover-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: auto 0;
  text-align: left;
}

.card-hover-eyebrow {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.card-hover-title {
  font-family: var(--font-title);
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: #FFFFFF;
  margin: 0;
}

.card-hover-desc {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  color: rgba(247, 247, 242, 0.72);
  margin: 0;
}

/* Integrated Horizontal Minimalist Data Array */
.card-hover-data-array {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 14px;
  margin-top: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.data-array-item {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}

.data-array-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  flex-shrink: 0;
}

.data-array-text {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Integrated Matte-Black Content-Block CTA Button */
.card-hover-footer {
  width: 100%;
  padding-top: 14px;
}

.card-integrated-cta-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 20px;
  background: #0D0D11;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 4px;
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  box-sizing: border-box;
}

.card-integrated-cta-btn:hover {
  background: #FFFFFF;
  color: #060608;
  border-color: #FFFFFF;
  transform: translateY(-1px);
}

.card-integrated-cta-btn .cta-arrow-svg {
  transition: transform 0.2s ease;
}

.card-integrated-cta-btn:hover .cta-arrow-svg {
  transform: translate(2px, -2px);
}

.list-tool-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
}

.list-tool-icon {
  width: 13px;
  height: 13px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.8;
  display: inline-block;
}

/* Layout Mode Segmented Switch (Cards vs List) */
.layout-segmented-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 30px;
  background: rgba(18, 18, 18, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.layout-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 24px;
  background: transparent;
  border: 1px solid transparent;
  color: rgba(247, 247, 242, 0.6);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.25s ease;
  text-transform: uppercase;
}

.layout-view-btn:hover {
  color: var(--color-blanc-casse);
}

.layout-view-btn.active {
  background: #FFFFFF !important;
  border-color: #FFFFFF !important;
  color: #0A0A0D !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-weight: 800 !important;
}

.layout-view-btn.active svg {
  stroke: #0A0A0D !important;
  color: #0A0A0D !important;
}

/* ==========================================================================
   EDITORIAL LIST VIEW SYSTEM (FULL-WIDTH LUXURY ARCHIVE)
   ========================================================================== */
.resources-grid-container.view-mode-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
}

.luxury-resource-list-row {
  display: grid;
  grid-template-columns: 240px 1fr 360px 180px;
  gap: 36px;
  align-items: center;
  padding: 28px 48px;
  width: 100%;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.2s ease, padding 0.3s ease;
  position: relative;
  opacity: 0;
  transform: translateY(16px);
  animation: rowFadeIn 0.5s var(--ease-out-expo) forwards;
  animation-delay: var(--row-delay, 0s);
}

@keyframes rowFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.luxury-resource-list-row:hover {
  background: rgba(255, 255, 255, 0.035);
  border-bottom-color: rgba(143, 216, 248, 0.4);
  padding-left: 56px;
  padding-right: 56px;
}

.list-col-discipline {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.list-tag-num {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.list-read-time {
  font-family: var(--font-body);
  font-size: 10px;
  color: rgba(247, 247, 242, 0.45);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.list-col-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.list-row-title {
  font-family: var(--font-title);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--color-blanc-casse);
  margin: 0;
  transition: color 0.3s ease;
}

.luxury-resource-list-row:hover .list-row-title {
  color: var(--color-bleu-iceberg);
}

.list-row-subtitle {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  color: rgba(247, 247, 242, 0.65);
  margin: 0;
  line-height: 1.4;
}

.list-col-metrics {
  display: flex;
  align-items: center;
}

.list-metrics-text {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(247, 247, 242, 0.7);
  line-height: 1.45;
}

.list-col-cta {
  display: flex;
  justify-content: flex-end;
}

.list-unlock-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 24px;
  color: var(--color-blanc-casse);
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s var(--ease-out-expo);
  width: 100%;
}

.luxury-resource-list-row:hover .list-unlock-btn {
  background: var(--color-bleu-iceberg);
  border-color: var(--color-bleu-iceberg);
  color: #0A0A0A;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(143, 216, 248, 0.3);
}

/* ==========================================================================
   MAGNETIC FLOATING THUMBNAIL HOVER PREVIEW
   ========================================================================== */
.floating-hover-preview {
  position: fixed;
  top: 0;
  left: 0;
  width: 320px;
  height: 200px;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s;
  will-change: transform, opacity;
}

.floating-hover-preview.is-active {
  opacity: 1;
  visibility: visible;
}

.floating-preview-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(143, 216, 248, 0.45);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.95), 0 0 35px rgba(143, 216, 248, 0.25);
  background: #0B0B0E;
  transform: scale(0.9);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.floating-hover-preview.is-active .floating-preview-inner {
  transform: scale(1);
}

.floating-preview-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.floating-preview-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.05) 0%, rgba(10, 10, 10, 0.65) 100%);
  pointer-events: none;
}

.floating-preview-badge {
  position: absolute;
  bottom: 10px;
  left: 12px;
  font-family: var(--font-body);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-bleu-iceberg);
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  padding: 3px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Responsive Cards & List Layout */
@media (max-width: 900px) {
  .resources-grid-container {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .luxury-resource-list-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .floating-hover-preview {
    display: none !important;
  }
  .resources-grid-section {
    padding: 32px 20px 60px 20px;
  }
}

/* ==========================================================================
   LEAD MAGNET EMAIL CAPTURE MODAL
   ========================================================================== */
.lead-magnet-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease-out-expo);
}

.lead-magnet-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.lead-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.lead-modal-box {
  position: relative;
  width: 92%;
  max-width: 560px;
  background: linear-gradient(180deg, #16161D 0%, #0E0E12 100%);
  border: 1px solid rgba(143, 216, 248, 0.4);
  border-radius: 24px;
  padding: 40px 36px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.9), 0 0 50px rgba(143, 216, 248, 0.2);
  display: flex;
  flex-direction: column;
  gap: 24px;
  z-index: 2;
  transform: scale(0.95) translateY(20px);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.lead-magnet-modal.is-open .lead-modal-box {
  transform: scale(1) translateY(0);
}

.lead-modal-glow {
  position: absolute;
  top: -30px;
  right: -30px;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(143, 216, 248, 0.35) 0%, transparent 70%);
  pointer-events: none;
}

.lead-modal-close-btn {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--color-blanc-casse);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.lead-modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(90deg);
}

.lead-modal-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lead-modal-category {
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-bleu-iceberg);
}

.lead-modal-title {
  font-family: var(--font-title);
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  font-weight: 900;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--color-blanc-casse);
  line-height: 1.15;
  margin: 0;
}

.lead-modal-subtitle {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(247, 247, 242, 0.7);
  margin: 0;
}

.lead-modal-perks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 16px;
}

.lead-perk-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(247, 247, 242, 0.88);
}

.perk-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(143, 216, 248, 0.18);
  color: var(--color-bleu-iceberg);
  font-size: 11px;
  font-weight: 900;
}

.lead-capture-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lead-input-group {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 30px;
  padding: 4px 18px;
  transition: all 0.3s ease;
}

.lead-input-group:focus-within {
  border-color: var(--color-bleu-iceberg);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 20px rgba(143, 216, 248, 0.25);
}

.lead-mail-icon {
  color: var(--color-bleu-iceberg);
  margin-right: 12px;
  flex-shrink: 0;
}

.lead-email-field {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--color-blanc-casse);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 12px 0;
}

.lead-email-field::placeholder {
  color: rgba(247, 247, 242, 0.45);
}

.lead-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px 24px;
  background: var(--color-bleu-iceberg);
  border: none;
  border-radius: 30px;
  color: #0A0A0A;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s var(--ease-out-expo);
  box-shadow: 0 8px 24px rgba(143, 216, 248, 0.35);
}

.lead-submit-btn:hover {
  background: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(255, 255, 255, 0.4);
}

.lead-privacy-note {
  text-align: center;
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(247, 247, 242, 0.45);
}

/* Responsive Cards Layout */
@media (max-width: 1100px) {
  .resources-grid-container {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .resources-grid-section {
    padding: 40px 24px;
  }
}

/* No Results Fallback Box */
.no-results-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 24px;
  gap: 16px;
  width: 100%;
}

.no-results-icon {
  font-size: 40px;
}

.no-results-box h3 {
  font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--color-blanc-casse);
  margin: 0;
}

.no-results-box p {
  color: rgba(247, 247, 242, 0.65);
  max-width: 500px;
  margin: 0;
  font-size: 14px;
}

.reset-filter-btn {
  padding: 10px 24px;
  background: var(--color-bleu-iceberg);
  border: none;
  border-radius: 20px;
  color: #0A0A0A;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 8px;
}

/* ==========================================================================
   INTERACTIVE FULL-DRAWER / MODAL RESOURCE READER
   ========================================================================== */
.resource-reader-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  justify-content: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-out-expo);
}

.resource-reader-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.reader-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.reader-drawer-container {
  position: relative;
  width: 100%;
  max-width: 1080px;
  height: 100vh;
  background: #0E0E11;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: -20px 0 80px rgba(0, 0, 0, 0.9);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 2;
}

.resource-reader-modal.is-open .reader-drawer-container {
  transform: translateX(0);
}

.reader-drawer-header {
  padding: 24px 36px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: #0E0E11;
  flex-shrink: 0;
}

.drawer-header-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.drawer-cat-badge {
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-bleu-iceberg);
}

.drawer-header-title {
  font-family: var(--font-title);
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--color-blanc-casse);
  margin: 0;
}

.drawer-header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.drawer-action-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: rgba(143, 216, 248, 0.14);
  border: 1px solid rgba(143, 216, 248, 0.4);
  border-radius: 20px;
  color: var(--color-blanc-casse);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s ease;
}

.drawer-action-pill:hover,
.drawer-action-pill.copied {
  background: var(--color-bleu-iceberg);
  color: #0A0A0A;
}

.drawer-close-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--color-blanc-casse);
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}

.drawer-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(90deg);
}

.reader-drawer-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.reader-toc-sidebar {
  flex: 0 0 260px;
  width: 260px;
  padding: 32px 24px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: rgba(10, 10, 12, 0.5);
}

.toc-sidebar-title {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-bleu-iceberg);
}

.drawer-toc-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.toc-nav-item {
  background: transparent;
  border: none;
  text-align: left;
  color: rgba(247, 247, 242, 0.65);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.4;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.toc-nav-item:hover {
  color: var(--color-blanc-casse);
  background: rgba(255, 255, 255, 0.06);
  transform: translateX(3px);
}

.toc-h1 { font-weight: 800; color: rgba(247, 247, 242, 0.9); }
.toc-h2 { padding-left: 12px; font-size: 11.5px; }
.toc-h3 { padding-left: 20px; font-size: 11px; opacity: 0.8; }

.reader-article-content {
  flex: 1;
  padding: 44px 52px;
  overflow-y: auto;
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.75;
  color: rgba(247, 247, 242, 0.88);
}

/* Article Markdown Rich Typography */
.doc-h1 {
  font-family: var(--font-title);
  font-size: clamp(2rem, 3vw, 2.8rem);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--color-blanc-casse);
  margin: 40px 0 20px 0;
  line-height: 1.1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: 12px;
}

.doc-h1:first-child { margin-top: 0; }

.doc-h2 {
  font-family: var(--font-title);
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-bleu-iceberg);
  margin: 32px 0 16px 0;
  line-height: 1.2;
}

.doc-h3 {
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-blanc-casse);
  margin: 24px 0 12px 0;
}

.doc-paragraph {
  margin: 0 0 16px 0;
}

.doc-quote {
  border-left: 3px solid var(--color-bleu-iceberg);
  background: rgba(143, 216, 248, 0.06);
  padding: 14px 20px;
  margin: 20px 0;
  border-radius: 0 8px 8px 0;
  font-size: 14.5px;
  color: rgba(247, 247, 242, 0.95);
}

.doc-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin: 36px 0;
}

.doc-li-bullet, .doc-li-numbered {
  margin-bottom: 8px;
  padding-left: 6px;
}

/* Prompt Code Block */
.code-block-wrapper {
  background: #070709;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  overflow: hidden;
  margin: 24px 0;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
}

.code-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.code-lang-tag {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-bleu-iceberg);
}

.copy-code-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  color: var(--color-blanc-casse);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
}

.copy-code-btn:hover,
.copy-code-btn.copied {
  background: var(--color-bleu-iceberg);
  color: #0A0A0A;
}

.code-block-wrapper pre {
  margin: 0;
  padding: 18px;
  overflow-x: auto;
}

.code-block-wrapper code {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.6;
  color: #E6EDF3;
}

.inline-code {
  font-family: var(--font-body);
  font-size: 12.5px;
  background: rgba(143, 216, 248, 0.12);
  color: var(--color-bleu-iceberg);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Article Image Display */
.article-image-container {
  margin: 28px 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: #000;
}

.article-doc-image {
  width: 100%;
  height: auto;
  max-height: 540px;
  object-fit: contain;
  display: block;
}

.article-image-caption {
  display: block;
  padding: 10px 16px;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-style: italic;
  color: rgba(247, 247, 242, 0.6);
  background: rgba(10, 10, 12, 0.8);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.reader-loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120px 24px;
  gap: 20px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--color-bleu-iceberg);
}

.spinner-arc {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid rgba(143, 216, 248, 0.2);
  border-top-color: var(--color-bleu-iceberg);
  animation: spinnerRotate 0.8s linear infinite;
}

@keyframes spinnerRotate {
  to { transform: rotate(360deg); }
}

/* Mobile & Tablet Responsiveness for Resources */
@media (max-width: 1024px) {
  .resources-hero-split {
    flex-direction: column;
  }
  .resources-hero-left {
    flex: 0 0 100%;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--grid-line-color);
    padding: 40px 24px;
  }
  .resources-hero-right {
    flex: 0 0 100%;
    width: 100%;
    padding: 32px 24px;
  }
  .resources-filter-bar {
    padding: 18px 24px;
  }
  .resources-grid-section {
    padding: 32px 24px;
  }
  .resources-grid-container {
    grid-template-columns: 1fr;
  }
  .reader-toc-sidebar {
    display: none;
  }
  .reader-article-content {
    padding: 24px;
  }
}

/* ==========================================================================
   RESOURCE DETAIL PAGE: NANO BANANA PRO & MASTERCLASS SYSTEM
   ========================================================================== */
.page-resource-detail {
  background: var(--color-noir-absolu);
  color: var(--color-blanc-casse);
  overflow-x: hidden;
}

.resource-detail-main {
  width: 100%;
  position: relative;
}

/* Hero Showcase Section with Ambient Background Video (Resource Guide Pages: NotebookLM, Nano Banana, Seedance) */
.resource-detail-main .detail-hero-section {
  position: relative;
  width: 100%;
  height: auto !important;
  min-height: unset !important;
  padding: 140px 60px 70px 60px;
  background: #060608;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  overflow: visible !important;
}

.detail-hero-bg-video-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.detail-hero-bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.18;
  filter: saturate(1.05) brightness(0.5);
}

.detail-hero-video-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 8, 11, 0.88) 0%, rgba(8, 8, 11, 0.62) 35%, rgba(8, 8, 11, 0.94) 80%, #08080B 100%),
              radial-gradient(circle at 50% 30%, rgba(155, 231, 196, 0.05) 0%, transparent 65%);
}

.detail-hero-container {
  position: relative;
  z-index: 2;
  max-width: 1560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Swiss Minimalist / High-End Editorial Breadcrumbs */
.detail-hero-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.breadcrumb-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(247, 247, 242, 0.45);
  text-decoration: none;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  transition: color 0.2s ease;
}

.breadcrumb-back-link:hover {
  background: transparent;
  border: none;
  color: #FFFFFF;
}

.breadcrumb-arrow-svg {
  width: 14px;
  height: 10px;
  display: inline-block;
  vertical-align: middle;
  stroke: currentColor;
  stroke-width: 1.5px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.breadcrumb-back-link:hover .breadcrumb-arrow-svg {
  transform: translateX(-3px);
}

.breadcrumb-sep {
  color: rgba(255, 255, 255, 0.2);
  margin: 0 2px;
}

.breadcrumb-current {
  color: rgba(247, 247, 242, 0.9);
  font-weight: 600;
}

.detail-hero-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.editorial-vertical-rail {
  position: absolute;
  left: 24px;
  top: 140px;
  bottom: 80px;
  z-index: 10;
  display: flex;
  align-items: center;
  pointer-events: none;
}

.editorial-vertical-rail span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(247, 247, 242, 0.25);
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .editorial-vertical-rail {
    display: none;
  }
}

/* Swiss Minimalist Eyebrow Tag */
.detail-hero-tag {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: rgba(247, 247, 242, 0.85);
  text-transform: uppercase;
  margin-top: 4px;
  text-shadow: none;
}

.detail-tool-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  padding: 5px 10px;
  color: rgba(247, 247, 242, 0.7);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.detail-tool-icon {
  width: 15px;
  height: 15px;
}

.detail-tool-emoji {
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

.vault-tool-emoji {
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.vault-tag-mini-emoji {
  font-size: 11px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

/* Massive Brutalist Headline with Magazine Overlap */
.detail-hero-title-wrapper {
  margin: 4px 0 2px 0;
}

.detail-hero-title {
  font-family: var(--font-title);
  font-size: clamp(3.2rem, 7.5vw, 6.6rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 0.94;
  text-transform: uppercase;
  margin: 0;
  color: #FFFFFF;
  position: relative;
  display: inline-block;
}

.detail-hero-title .detail-serif-accent {
  font-family: var(--font-accent) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  text-transform: lowercase !important;
  font-size: 0.84em;
  background: linear-gradient(135deg, #8FD8F8 0%, #9BE7C4 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline-block;
  margin-left: -0.08em;
  position: relative;
  z-index: 2;
  letter-spacing: -0.02em;
}

.detail-hero-description {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.22vw, 17px);
  line-height: 1.68;
  color: rgba(247, 247, 242, 0.78);
  max-width: 840px;
  margin: 0;
}

.detail-hero-description strong {
  color: #FFFFFF;
  font-weight: 700;
}

/* Minimalist Frictionless Subscription Magnet */
.hero-subscription-magnet-wrap {
  margin: 10px 0 6px 0;
  max-width: 660px;
}

.hero-email-capture-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hero-email-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.hero-email-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-size: clamp(13px, 1.1vw, 15px);
  font-weight: 500;
  padding: 12px 140px 12px 0;
  box-sizing: border-box;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-email-input::placeholder {
  color: rgba(247, 247, 242, 0.42);
  font-family: var(--font-mono);
  font-size: clamp(12px, 1vw, 14px);
}

.hero-email-input:focus {
  outline: none;
  border-bottom-color: #8FD8F8;
  box-shadow: 0 1px 0 #8FD8F8, 0 12px 30px -10px rgba(143, 216, 248, 0.18);
}

.hero-email-submit-btn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  color: #8FD8F8;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 8px 0;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-email-submit-btn:hover {
  color: #9BE7C4;
  transform: translateY(-50%) translateX(3px);
}

.hero-email-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.hero-email-hint {
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(247, 247, 242, 0.4);
  letter-spacing: 0.02em;
}

.hero-email-status-text {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 700;
  color: #9BE7C4;
}

/* ==========================================================================
   PAGE ENTRY & SCROLL REVEAL ANIMATIONS (NOTEBOOKLM & NANO BANANA)
   ========================================================================== */
.page-anim-item {
  opacity: 0;
  transform: translateY(28px);
  animation: pageElementFadeUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: opacity, transform;
}

.detail-hero-nav-row.page-anim-item { animation-delay: 0.04s; }
.detail-hero-tag.page-anim-item { animation-delay: 0.08s; }
.detail-hero-title-wrapper.page-anim-item { animation-delay: 0.14s; }
.detail-hero-description.page-anim-item { animation-delay: 0.20s; }
.hero-subscription-magnet-wrap.page-anim-item { animation-delay: 0.26s; }
.detail-hero-metrics-bar.page-anim-item { animation-delay: 0.32s; }
.detail-method-timeline-stepper.page-anim-item { animation-delay: 0.38s; }
.detail-sticky-nav-bar.page-anim-item { animation-delay: 0.44s; }
.guide-doc-sidebar.page-anim-item { animation-delay: 0.50s; }
.detail-guide-masterclass-section.page-anim-item { animation-delay: 0.56s; }

@keyframes pageElementFadeUp {
  0% {
    opacity: 0;
    transform: translateY(28px) scale(0.99);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Scroll-triggered Section Reveal Animations */
.scroll-reveal-section {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.scroll-reveal-section.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered micro-animations for cards inside revealed sections */
.scroll-reveal-section .masterclass-feature-card,
.scroll-reveal-section .tech-table-wrap,
.scroll-reveal-section .guide-callout-box,
.scroll-reveal-section .livrable-card {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-reveal-section.is-revealed .masterclass-feature-card:nth-child(1) { transition-delay: 0.08s; opacity: 1; transform: translateY(0); }
.scroll-reveal-section.is-revealed .masterclass-feature-card:nth-child(2) { transition-delay: 0.16s; opacity: 1; transform: translateY(0); }
.scroll-reveal-section.is-revealed .masterclass-feature-card:nth-child(3) { transition-delay: 0.24s; opacity: 1; transform: translateY(0); }
.scroll-reveal-section.is-revealed .masterclass-feature-card:nth-child(4) { transition-delay: 0.32s; opacity: 1; transform: translateY(0); }

.scroll-reveal-section.is-revealed .tech-table-wrap,
.scroll-reveal-section.is-revealed .guide-callout-box,
.scroll-reveal-section.is-revealed .livrable-card {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.14s;
}

/* Floating Architectural Negative-Space Metrics Bar */
.detail-hero-metrics-bar,
.detail-hero-metrics-bar.floating-architectural {
  width: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  background: transparent;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  padding: 22px 0;
  margin: 6px 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  gap: 20px;
}

.detail-hero-metrics-bar .hero-metric-item,
.floating-architectural .hero-metric-item {
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  padding: 0 16px;
  gap: 4px;
  display: flex;
  flex-direction: column;
}

.detail-hero-metrics-bar .hero-metric-item:last-child,
.floating-architectural .hero-metric-item:last-child {
  border-right: none;
}

.detail-hero-metrics-bar .metric-val,
.floating-architectural .metric-val {
  font-family: var(--font-title);
  font-size: clamp(2.2rem, 3.4vw, 3rem);
  font-weight: 900;
  color: #FFFFFF;
  line-height: 1;
}

.detail-hero-metrics-bar .metric-lbl,
.floating-architectural .metric-lbl {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(247, 247, 242, 0.5);
}

/* Minimalist Horizontal Timeline Stepper — High-End Editorial Style */
.detail-method-timeline-stepper {
  position: relative;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: radial-gradient(
    650px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(143, 216, 248, 0.12) 0%,
    rgba(155, 231, 196, 0.04) 35%,
    rgba(6, 6, 8, 0.98) 75%
  ), #060608;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 32px 38px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 14px;
  margin-bottom: 24px;
  box-shadow: none !important;
  transition: border-color 0.25s ease;
}

.detail-method-timeline-stepper:hover {
  border-color: rgba(255, 255, 255, 0.15);
}

.timeline-stepper-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  flex-wrap: wrap;
  gap: 12px;
}

.timeline-title-tag {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8FD8F8;
}

.timeline-model-tag {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(247, 247, 242, 0.45);
}

.timeline-steps-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  position: relative;
}

.timeline-step-node {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}

.timeline-step-node:hover {
  transform: translateY(-2px);
}

.step-node-header {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
}

/* Big Brutalist / Editorial Neue Haas Grotesk Numbers */
.step-node-index {
  font-family: var(--font-title);
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: #8FD8F8;
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: inline-block;
  flex-shrink: 0;
  transition: color 0.2s ease, transform 0.2s ease;
}

.timeline-step-node:hover .step-node-index {
  color: #9BE7C4;
  transform: translateY(-1px);
}

.step-node-line {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.09);
  position: relative;
}

.step-node-line.end-dot::after {
  content: "";
  position: absolute;
  right: 0;
  top: -2.5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9BE7C4;
}

.step-node-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.step-node-title {
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.step-node-desc {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(247, 247, 242, 0.72);
  margin: 0;
}

.step-node-desc strong {
  color: rgba(247, 247, 242, 0.95);
  font-weight: 600;
}

.step-node-desc a {
  color: #8FD8F8;
  text-decoration: none;
  border-bottom: 1px solid rgba(143, 216, 248, 0.3);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.step-node-desc a:hover {
  color: #9BE7C4;
  border-color: #9BE7C4;
}

.step-node-desc code {
  background: rgba(143, 216, 248, 0.08);
  color: #8FD8F8;
  border: 1px solid rgba(143, 216, 248, 0.25);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
  font-family: var(--font-body);
}

.step-node-desc a {
  color: #9BE7C4;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.step-text code {
  background: rgba(10, 10, 13, 0.09);
  color: #0A0A0D;
  border: 1px solid rgba(10, 10, 13, 0.14);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11.5px;
  font-family: var(--font-body);
  font-weight: 700;
}

.workflow-step-arrow {
  color: rgba(10, 10, 13, 0.35);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* Sticky Cluster Navigation Bar (Fixed / Sticky on Scroll) */
.detail-sticky-nav-bar {
  position: sticky;
  top: 76px;
  z-index: 95;
  background: rgba(8, 8, 12, 0.94);
  backdrop-filter: blur(24px) saturate(190%);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding: 8px 28px;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  transition: top 0.3s ease, background 0.3s ease;
}

.detail-sticky-nav-inner {
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: nowrap;
}

.detail-cluster-pills-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex: 1;
  min-width: 0;
  padding-bottom: 2px;
}

.detail-cluster-pills-wrap::-webkit-scrollbar {
  display: none;
}

.cluster-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 7px 13px;
  color: rgba(247, 247, 242, 0.7);
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.cluster-pill-btn .pill-icon-svg {
  flex-shrink: 0;
  opacity: 0.85;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.cluster-pill-btn:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
}

.cluster-pill-btn:hover .pill-icon-svg {
  transform: scale(1.1);
  opacity: 1;
}

.cluster-pill-btn.active {
  background: #FFFFFF !important;
  border-color: #FFFFFF !important;
  color: #0A0A0D !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-weight: 800 !important;
}

.cluster-pill-btn.active .pill-icon-svg {
  opacity: 1 !important;
  stroke: #0A0A0D !important;
  color: #0A0A0D !important;
}

/* Special Diamond Guideline & Gems Pill Button */
.cluster-pill-btn.highlight {
  background: linear-gradient(135deg, rgba(143, 216, 248, 0.14) 0%, rgba(155, 231, 196, 0.12) 100%);
  border: 1px solid rgba(143, 216, 248, 0.35);
  color: #8FD8F8;
  font-weight: 800;
  position: relative;
  overflow: hidden;
  animation: gemPillPeriodicPulse 10s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.cluster-pill-btn.highlight .pill-icon-svg {
  color: #9BE7C4;
  stroke: #9BE7C4;
  opacity: 1;
}

.cluster-pill-btn.highlight:hover {
  background: linear-gradient(135deg, rgba(143, 216, 248, 0.22) 0%, rgba(155, 231, 196, 0.2) 100%);
  border-color: #9BE7C4;
  color: #FFFFFF;
  transform: translateY(-1px);
}

.cluster-pill-btn.highlight.active {
  background: #9BE7C4 !important;
  border-color: #9BE7C4 !important;
  color: #0A0A0D !important;
  box-shadow: 0 0 20px rgba(155, 231, 196, 0.4) !important;
  font-weight: 900 !important;
}

.cluster-pill-btn.highlight.active .pill-icon-svg {
  stroke: #0A0A0D !important;
  color: #0A0A0D !important;
}

/* 10-Second Periodic Attention Pulse & Shimmer Animation */
@keyframes gemPillPeriodicPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(143, 216, 248, 0);
    border-color: rgba(143, 216, 248, 0.35);
  }
  2% {
    transform: scale(1.06);
    border-color: #9BE7C4;
    color: #FFFFFF;
    background: linear-gradient(135deg, rgba(143, 216, 248, 0.3) 0%, rgba(155, 231, 196, 0.28) 100%);
    box-shadow: 0 0 16px rgba(155, 231, 196, 0.55), 0 0 28px rgba(143, 216, 248, 0.35);
  }
  4% {
    transform: scale(0.98);
    border-color: #8FD8F8;
    box-shadow: 0 0 8px rgba(143, 216, 248, 0.4);
  }
  6% {
    transform: scale(1.03);
    border-color: #9BE7C4;
    box-shadow: 0 0 14px rgba(155, 231, 196, 0.45);
  }
  8% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(143, 216, 248, 0);
    border-color: rgba(143, 216, 248, 0.35);
    background: linear-gradient(135deg, rgba(143, 216, 248, 0.14) 0%, rgba(155, 231, 196, 0.12) 100%);
    color: #8FD8F8;
  }
  10%, 100% {
    transform: scale(1);
    box-shadow: none;
    border-color: rgba(143, 216, 248, 0.35);
    background: linear-gradient(135deg, rgba(143, 216, 248, 0.14) 0%, rgba(155, 231, 196, 0.12) 100%);
    color: #8FD8F8;
  }
}

/* Prompt Search Input - Wider & Sleek */
.detail-prompt-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 24px;
  padding: 3px 16px;
  width: 380px;
  max-width: 440px;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.detail-prompt-search-wrap:focus-within {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(155, 231, 196, 0.55);
  box-shadow: 0 0 16px rgba(155, 231, 196, 0.15);
  width: 420px;
}

.search-mini-icon {
  color: rgba(247, 247, 242, 0.4);
  margin-right: 8px;
  flex-shrink: 0;
}

.prompt-search-input {
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 12px;
  color: #FFFFFF;
  width: 100%;
  padding: 7px 0;
}

.prompt-search-input::placeholder {
  color: rgba(247, 247, 242, 0.4);
}

.clear-search-btn {
  background: transparent;
  border: none;
  color: rgba(247, 247, 242, 0.5);
  font-size: 14px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}

.clear-search-btn:hover {
  color: #FFFFFF;
}

/* ==========================================================================
   NOTEBOOKLM PROMPT SLIDER / CAROUSEL COMPONENT
   ========================================================================== */
.prompts-slider-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.prompts-slider-controls-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 4px;
}

.slider-indicator-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.slider-counter-badge {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-bleu-iceberg);
  background: rgba(143, 216, 248, 0.1);
  border: 1px solid rgba(143, 216, 248, 0.25);
  padding: 4px 12px;
  border-radius: 20px;
}

.slider-hint-text {
  font-family: var(--font-body);
  font-size: 11.5px;
  color: rgba(247, 247, 242, 0.45);
}

.slider-arrow-btns {
  display: flex;
  align-items: center;
  gap: 8px;
}

.slider-arrow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  cursor: pointer;
  transition: all 0.25s ease;
}

.slider-arrow-btn:hover:not(:disabled) {
  background: rgba(155, 231, 196, 0.2);
  border-color: #9BE7C4;
  color: #9BE7C4;
  transform: scale(1.05);
}

.slider-arrow-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Horizontal Slider Track */
.detail-prompts-slider-track {
  display: flex;
  flex-direction: row;
  gap: 24px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: rgba(155, 231, 196, 0.35) rgba(255, 255, 255, 0.03);
  padding: 4px 4px 16px 4px;
  width: 100%;
  box-sizing: border-box;
}

.detail-prompts-slider-track::-webkit-scrollbar {
  height: 6px;
}

.detail-prompts-slider-track::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
}

.detail-prompts-slider-track::-webkit-scrollbar-thumb {
  background: rgba(155, 231, 196, 0.35);
  border-radius: 6px;
}

.detail-prompts-slider-track::-webkit-scrollbar-thumb:hover {
  background: #9BE7C4;
}

/* Prompt Card inside Horizontal Slider */
.detail-prompts-slider-track .prompt-showcase-card {
  flex: 0 0 380px;
  max-width: 390px;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  height: auto;
}

@media (max-width: 768px) {
  .detail-prompts-slider-track .prompt-showcase-card {
    flex: 0 0 85vw;
    max-width: 85vw;
  }
}

/* ==========================================================================
   PROMPTS GALLERY: NANO BANANA (FULL-HEIGHT MASONRY) VS NOTEBOOKLM (16:9 GRID)
   ========================================================================== */
.detail-prompts-gallery-section {
  padding: 60px 44px 100px 44px;
  width: 100%;
  box-sizing: border-box;
}

/* Default / NotebookLM Grid Layout (3 Columns Horizontal) */
.detail-gallery-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  max-width: 1720px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 1380px) {
  .detail-gallery-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }
}

@media (max-width: 860px) {
  .detail-gallery-container {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .detail-prompts-gallery-section {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Nano Banana Specific: Full Width Cards Section with 5 Columns */
.nano-banana-page .detail-prompts-gallery-section {
  width: 100%;
  padding: 36px 32px 80px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

.nano-banana-page .detail-gallery-container {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  column-count: 5;
  column-gap: 20px;
}

@media (max-width: 1680px) {
  .nano-banana-page .detail-gallery-container {
    column-count: 4;
    column-gap: 18px;
  }
}

@media (max-width: 1300px) {
  .nano-banana-page .detail-gallery-container {
    column-count: 3;
    column-gap: 16px;
  }
}

@media (max-width: 900px) {
  .nano-banana-page .detail-gallery-container {
    column-count: 2;
    column-gap: 14px;
  }
}

@media (max-width: 600px) {
  .nano-banana-page .detail-gallery-container {
    column-count: 1;
    column-gap: 0;
  }
  .nano-banana-page .detail-prompts-gallery-section {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@keyframes cardElevate {
  0% {
    opacity: 0;
    transform: translateY(24px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Prompt Showcase Card */
.prompt-showcase-card {
  position: relative;
  background: #0B0B0E;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
  opacity: 1;
  transform: translateY(0);
  animation: cardElevate 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--card-delay, 0s);
  margin-bottom: 0;
  width: 100%;
  box-sizing: border-box;
}

.nano-banana-page .prompt-showcase-card {
  break-inside: avoid;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 22px;
  height: auto;
}

.prompt-showcase-card:hover {
  transform: translateY(-6px);
  border-color: rgba(155, 231, 196, 0.45);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85), 0 0 30px rgba(155, 231, 196, 0.15);
}

/* Media Wrap: Default 16:9 for NotebookLM / Studio */
.prompt-card-media-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #050507;
  overflow: hidden;
  cursor: zoom-in;
}

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

/* Nano Banana: Full Height Natural Uncropped Infographic Media */
.nano-banana-page .prompt-card-media-wrap {
  aspect-ratio: auto;
  height: auto;
}

.nano-banana-page .prompt-card-img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.prompt-showcase-card:hover .prompt-card-img {
  transform: scale(1.025);
}

/* Media Hover Overlay & Zoom Tag */
.prompt-media-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(8, 8, 11, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: opacity 0.3s ease;
  z-index: 3;
}

.prompt-showcase-card:hover .prompt-media-overlay {
  opacity: 1;
}

.zoom-indicator-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(10, 10, 14, 0.9);
  border: 1px solid rgba(155, 231, 196, 0.45);
  color: #9BE7C4;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
  transform: translateY(8px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.prompt-showcase-card:hover .zoom-indicator-tag {
  transform: translateY(0);
}

.prompt-num-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(10, 10, 14, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 8px;
  z-index: 4;
  letter-spacing: 0.05em;
}

/* ==========================================================================
   INTERACTIVE PROMPT & INFOGRAPHIC DETAIL MODAL (NANO BANANA)
   ========================================================================== */
.prompt-detail-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s ease;
  padding: 24px;
  box-sizing: border-box;
}

.prompt-detail-modal.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.prompt-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(4, 4, 6, 0.88);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}

.prompt-modal-container {
  position: relative;
  z-index: 2;
  background: #0C0C10;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  max-width: 1200px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.9), 0 0 40px rgba(155, 231, 196, 0.08);
  transform: scale(0.96) translateY(16px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.prompt-detail-modal.is-active .prompt-modal-container {
  transform: scale(1) translateY(0);
}

.prompt-modal-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 20;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.prompt-modal-close-btn:hover {
  background: rgba(255, 123, 114, 0.2);
  border-color: #FF7B72;
  color: #FF7B72;
  transform: rotate(90deg);
}

.prompt-modal-grid {
  display: grid;
  grid-template-columns: 46% 54%;
  height: 100%;
  max-height: 90vh;
  overflow: hidden;
}

@media (max-width: 900px) {
  .prompt-modal-grid {
    grid-template-columns: 1fr;
    max-height: 85vh;
    overflow-y: auto;
  }
}

.prompt-modal-image-col {
  background: #060608;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.prompt-modal-img-wrap {
  width: 100%;
  height: 100%;
  max-height: calc(90vh - 56px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-infographic-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7);
}

.prompt-modal-content-col {
  padding: 32px 32px 28px 32px;
  padding-right: 70px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.prompt-modal-meta-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.prompt-modal-cluster-tag {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9BE7C4;
}

.prompt-modal-tool-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(247, 247, 242, 0.45);
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
}

.prompt-modal-title {
  font-family: var(--font-title);
  font-size: 1.45rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.prompt-modal-style {
  font-family: var(--font-body);
  font-size: 13.5px;
  color: rgba(247, 247, 242, 0.75);
  margin: 0;
  line-height: 1.5;
}

.prompt-modal-style span {
  color: #9BE7C4;
  font-weight: 700;
}

.prompt-modal-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: auto;
}

.modal-nav-arrow-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 7px 14px;
  color: rgba(247, 247, 242, 0.85);
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.modal-nav-arrow-btn:hover {
  background: rgba(155, 231, 196, 0.15);
  border-color: #9BE7C4;
  color: #9BE7C4;
}

.modal-prompt-counter {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(247, 247, 242, 0.5);
}

/* ==========================================================================
   LUXURY FROSTED GLASS PAGINATION CONTROLS
   ========================================================================== */
.detail-pagination-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 48px;
  padding: 18px 0;
  width: 100%;
}

.pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--glass-pill-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--glass-pill-border);
  color: var(--glass-pill-text);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 10px 22px;
  border-radius: 30px;
  cursor: pointer;
  box-shadow: var(--glass-pill-shadow);
  transition: all 0.3s var(--ease-out-expo);
}

.pagination-btn:hover:not(:disabled) {
  background: rgba(143, 216, 248, 0.14);
  border-color: var(--color-bleu-iceberg);
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(143, 216, 248, 0.25);
}

.pagination-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  border-color: rgba(255, 255, 255, 0.08);
}

.pagination-pages-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  background: rgba(15, 15, 18, 0.7);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 30px;
}

.pagination-page-num {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: rgba(247, 247, 242, 0.6);
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: all 0.25s ease;
}

.pagination-page-num:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.08);
}

.pagination-page-num.active {
  background: linear-gradient(135deg, rgba(143, 216, 248, 0.3) 0%, rgba(155, 231, 196, 0.3) 100%);
  border-color: rgba(143, 216, 248, 0.6);
  color: #FFFFFF;
  box-shadow: 0 0 16px rgba(143, 216, 248, 0.35);
}

.pagination-info-text {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(247, 247, 242, 0.45);
  text-transform: uppercase;
  margin-left: 8px;
}

.prompt-media-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
}

.prompt-showcase-card:hover .prompt-media-overlay {
  opacity: 1;
}

.zoom-indicator-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 6px 14px;
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.prompt-num-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 4px 9px;
  color: #9BE7C4;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.prompt-card-body,
.prompt-card-content {
  padding: 24px 26px 26px 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  flex: 1;
}

.prompt-meta-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}

.prompt-cluster-tag {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-bleu-iceberg);
}

.prompt-tool-tag {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #9BE7C4;
  text-transform: uppercase;
  opacity: 0.9;
}

.prompt-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.prompt-card-title {
  font-family: var(--font-title);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #FFFFFF;
  margin: 0;
  line-height: 1.25;
}

.prompt-card-style {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.55;
  color: rgba(247, 247, 242, 0.65);
  margin: 0;
}

.prompt-card-style span {
  color: #9BE7C4;
  font-weight: 700;
}

/* Luxury Architectural Prompt Box */
.prompt-lux-box {
  margin-top: 8px;
  background: #0A0A0D;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.prompt-showcase-card:hover .prompt-lux-box {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.prompt-lux-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 18px;
  background: rgba(255, 255, 255, 0.035);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.prompt-lux-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #FFFFFF;
  text-transform: uppercase;
}

.prompt-lux-hint {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(247, 247, 242, 0.45);
  text-transform: uppercase;
}

.prompt-text-scrollbox {
  padding: 18px 20px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.75;
  color: rgba(247, 247, 242, 0.88);
  min-height: 160px;
  max-height: 240px;
  overflow-y: auto;
  user-select: all;
  white-space: pre-wrap;
}

/* Highlighted Variables inside prompt */
.prompt-var-tag {
  color: var(--color-bleu-iceberg);
  font-weight: 700;
  background: rgba(143, 216, 248, 0.12);
  padding: 1px 5px;
  border-radius: 4px;
}

/* Full-Width Tactile Copy Action Pill */
.copy-lux-prompt-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px 16px;
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s ease;
}

.copy-lux-prompt-btn:hover {
  background: #FFFFFF;
  color: #0A0A0D;
}

.copy-lux-prompt-btn.copied {
  background: var(--color-bleu-iceberg);
  color: #0A0A0D;
}

.copy-lux-prompt-btn .arrow-icon-svg {
  transition: transform 0.2s ease;
}

.copy-lux-prompt-btn:hover .arrow-icon-svg {
  transform: translate(2px, -2px);
}

/* ==========================================================================
   LOCKED / MASKED PROMPT & BLURRED PREVIEW STYLES
   ========================================================================== */

/* Masked Prompt Box */
.prompt-lux-box.is-locked-prompt {
  position: relative;
  overflow: hidden;
}

.prompt-text-scrollbox.masked-text {
  filter: blur(5px);
  user-select: none;
  pointer-events: none;
  opacity: 0.5;
  transition: filter 0.4s ease, opacity 0.4s ease;
}

.prompt-locked-action-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 13, 0.25) 0%, rgba(10, 10, 13, 0.88) 50%, #0A0A0D 100%);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 10;
}

.prompt-lock-inner-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  max-width: 280px;
}

.prompt-lock-brand-logo {
  height: 38px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.95));
  opacity: 1;
}

/* High-End Minimalist Luxury Action Pill (Pure Glass / White Tactile) */
.unlock-card-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 28px;
  padding: 11px 20px;
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.unlock-card-cta-btn:hover {
  background: #FFFFFF;
  color: #0A0A0D;
  border-color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(255, 255, 255, 0.25);
}

.unlock-card-cta-btn .arrow-icon-svg {
  transition: transform 0.2s ease;
}

.unlock-card-cta-btn:hover .arrow-icon-svg {
  transform: translate(2px, -2px);
}

/* Blurred Image Preview Lock */
.prompt-card-media-wrap.is-blurred-preview {
  position: relative;
  cursor: pointer;
}

.blurred-media-img {
  filter: blur(14px) saturate(1.2);
  transform: scale(1.08);
  transition: filter 0.4s ease, transform 0.4s ease;
}

.image-blur-lock-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.5) 0%, rgba(5, 5, 8, 0.85) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px;
  text-align: center;
  z-index: 5;
}

.lock-brand-logo-img {
  height: 44px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.95));
  margin-bottom: 2px;
}

.blur-lock-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 5px 12px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--color-bleu-iceberg);
  text-transform: uppercase;
}

.unlock-trigger-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 20px;
  padding: 8px 18px;
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s ease;
}

.unlock-trigger-action-btn:hover {
  background: #FFFFFF;
  color: #000000;
  transform: scale(1.04);
}

/* ==========================================================================
   WARREN GRANGE — LUXURY STUDIO VAULT // ALL-ACCESS MODAL
   ========================================================================== */
.newsletter-brand-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s ease;
}

.newsletter-brand-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.newsletter-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 4, 7, 0.84);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: opacity 0.35s ease;
}

.newsletter-modal-container.vault-modal-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 920px;
  background: #0E0F13;
  border: 1px solid var(--color-gris-border, #2A2E33);
  border-radius: var(--border-radius-card, 4px);
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.96);
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.95) translateY(24px);
  transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
  box-sizing: border-box;
}

.newsletter-brand-modal.is-open .vault-modal-container {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.newsletter-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  background: rgba(15, 16, 20, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.14);
  width: 34px;
  height: 34px;
  border-radius: var(--border-radius-btn, 2px);
  color: rgba(247, 247, 242, 0.7);
  font-size: 19px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  line-height: 1;
}

.newsletter-close-btn:hover {
  background: #FFFFFF;
  color: #0A0A0A;
  border-color: #FFFFFF;
}

/* Vault Modal 2-Column Grid */
.vault-modal-grid {
  display: grid;
  grid-template-columns: 350px 1fr;
  min-height: 530px;
}

/* Left Column: Visual Stack */
.vault-preview-col {
  background: #08080B;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  padding: 34px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
}

.vault-covers-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.vault-cover-card {
  position: relative;
  height: 104px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  overflow: hidden;
  background: #14161A;
  opacity: 0;
  transform: translateY(12px);
}

.newsletter-brand-modal.is-open .vault-cover-card {
  animation: vaultCardReveal 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.newsletter-brand-modal.is-open .vault-cover-card:nth-child(1) { animation-delay: 0.06s; }
.newsletter-brand-modal.is-open .vault-cover-card:nth-child(2) { animation-delay: 0.13s; }
.newsletter-brand-modal.is-open .vault-cover-card:nth-child(3) { animation-delay: 0.20s; }

@keyframes vaultCardReveal {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.vault-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(5px) brightness(0.72) contrast(1.05);
  transform: scale(1.08);
  display: block;
  transition: transform 0.35s ease, filter 0.35s ease;
}

.vault-cover-card:hover .vault-cover-img {
  transform: scale(1.12);
  filter: blur(3.5px) brightness(0.82);
}

.vault-tool-badge {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 2;
  width: 24px;
  height: 24px;
  background: rgba(10, 10, 14, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  box-sizing: border-box;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.vault-cover-card:hover .vault-tool-badge {
  background: rgba(18, 20, 26, 0.95);
  border-color: rgba(255, 255, 255, 0.3);
  transform: scale(1.06);
}

.vault-tool-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.92;
  display: block;
}

.vault-cover-tag {
  position: absolute;
  bottom: 6px;
  left: 6px;
  background: rgba(10, 10, 12, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 3px 8px;
  font-family: var(--font-body);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #FFFFFF;
  text-transform: uppercase;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  z-index: 2;
}

.vault-tag-mini-icon {
  width: 10px;
  height: 10px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.9;
  flex-shrink: 0;
  display: block;
}

.vault-preview-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 16px;
}

.vault-status-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-vert-menthe, #9BE7C4);
  background: rgba(155, 231, 196, 0.08);
  border: 1px solid rgba(155, 231, 196, 0.3);
  padding: 4px 9px;
  border-radius: 2px;
  align-self: flex-start;
}

.vault-stats-line {
  font-family: var(--font-body);
  font-size: 9.5px;
  color: var(--color-gris-graphite, #6B7075);
  font-weight: 600;
  letter-spacing: 0.05em;
  margin: 0;
  line-height: 1.4;
  text-transform: uppercase;
}

/* Right Column: Editorial & Form */
.vault-content-col {
  padding: 40px 42px 36px 38px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}

.vault-content-col .newsletter-brand-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 16px;
  padding-right: 48px;
}

.vault-content-col .newsletter-brand-logo {
  height: 23px;
  width: auto;
  display: block;
}

.vault-content-col .newsletter-tagline {
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gris-graphite, #6B7075);
}

.vault-content-col .newsletter-heading-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vault-content-col .newsletter-modal-title {
  font-family: var(--font-title);
  font-size: clamp(1.55rem, 2.4vw, 1.95rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.22;
  color: #FFFFFF;
  margin: 0;
}

.vault-content-col .newsletter-modal-title .detail-serif-accent,
.newsletter-modal-title .detail-serif-accent {
  display: block !important;
  width: 100% !important;
  font-family: var(--font-accent) !important;
  font-style: italic !important;
  font-weight: 300 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  background: none !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
  text-shadow: none !important;
  margin-top: 6px !important;
  margin-left: 0 !important;
  text-transform: lowercase !important;
}

.vault-content-col .newsletter-modal-desc {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.65;
  color: rgba(247, 247, 242, 0.72);
  margin: 0;
}

/* Subscription Form */
.vault-content-col .newsletter-lead-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 4px;
}

.vault-content-col .form-input-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.vault-content-col .form-label {
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gris-graphite, #6B7075);
}

.vault-content-col .input-with-icon {
  position: relative;
  display: flex;
  align-items: center;
  background: #121417;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--border-radius-btn, 2px);
  padding: 0 16px;
  height: 48px;
  transition: border-color 0.2s ease, background 0.2s ease;
  box-shadow: none;
}

.vault-content-col .input-with-icon:focus-within {
  border-color: var(--color-blanc-casse, #F7F7F2);
  background: #16181D;
  box-shadow: none;
}

.vault-content-col .input-with-icon svg {
  color: var(--color-gris-graphite, #6B7075);
  margin-right: 12px;
  flex-shrink: 0;
}

.vault-content-col .input-with-icon:focus-within svg {
  color: var(--color-blanc-casse, #F7F7F2);
}

.vault-content-col .form-text-input {
  background: transparent;
  border: none;
  outline: none;
  width: 100%;
  padding: 12px 0;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: #FFFFFF;
}

.vault-content-col .form-text-input::placeholder {
  color: rgba(247, 247, 242, 0.3);
}

.vault-content-col .newsletter-submit-btn {
  padding: 15px 24px;
  font-size: 12px;
}

.vault-content-col .form-guarantee-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-gris-graphite, #6B7075);
  line-height: 1.4;
  margin-top: 2px;
}

.vault-content-col .form-guarantee-note svg {
  color: var(--color-gris-graphite, #6B7075);
  flex-shrink: 0;
}

.vault-content-col .newsletter-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: var(--color-blanc-casse, #F7F7F2);
  border: 1px solid var(--color-blanc-casse, #F7F7F2);
  border-radius: var(--border-radius-btn, 2px);
  padding: 13px 22px;
  color: var(--color-noir-profond, #0A0A0A);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: none;
}

.vault-content-col .newsletter-submit-btn:hover {
  background: var(--color-vert-menthe, #9BE7C4);
  border-color: var(--color-vert-menthe, #9BE7C4);
  color: var(--color-noir-profond, #0A0A0A);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.vault-content-col .newsletter-submit-btn .cta-arrow-svg {
  transition: transform 0.2s ease;
}

.vault-content-col .newsletter-submit-btn:hover .cta-arrow-svg {
  transform: translate(3px, -3px);
}

/* ==========================================================================
   SECTION 40: MASTERCLASS GUIDELINE & GEMS INTERACTIVE SYSTEM
   ========================================================================== */
.detail-guide-masterclass-section {
  padding: 100px 32px 130px 32px;
  background: #060608;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.masterclass-container {
  max-width: 1780px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 52px;
}

.masterclass-header {
  text-align: center;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}

.masterclass-title {
  font-family: var(--font-title);
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 14px auto 12px auto;
  color: #FFFFFF;
  width: 100%;
  max-width: 100%;
}

.masterclass-title .detail-serif-accent {
  font-family: var(--font-accent) !important;
  font-style: italic !important;
  font-weight: 300 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  background: none !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
  text-transform: lowercase !important;
  font-size: 1em !important;
}

.masterclass-subtitle {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: rgba(247, 247, 242, 0.7);
  margin: 0;
}

/* Masterclass & Guide Module Feature Cards Grid */
.masterclass-grid-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 16px 0 0 0;
  background: transparent;
  border: none;
}

@media (max-width: 1024px) {
  .masterclass-grid-cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.masterclass-feature-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  position: relative;
  box-sizing: border-box;
}

.masterclass-feature-card:hover {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(143, 216, 248, 0.35);
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5), 0 0 20px rgba(143, 216, 248, 0.08);
}

.feature-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

/* Brutalist Outlined Numbering */
.feature-card-num {
  font-family: var(--font-title);
  font-size: clamp(2.4rem, 3.4vw, 3.6rem);
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(143, 216, 248, 0.5);
  transition: -webkit-text-stroke 0.25s ease;
  display: flex;
  align-items: center;
}

.masterclass-feature-card:hover .feature-card-num {
  -webkit-text-stroke: 1.5px #8FD8F8;
}

.feature-card-title {
  font-family: var(--font-title);
  font-size: 1.25rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* Feature Card Bullet Lists */
.feature-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.6;
  color: rgba(247, 247, 242, 0.75);
}

.feature-card-list li {
  position: relative;
  padding-left: 14px;
}

.feature-card-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-bleu-iceberg);
  font-weight: bold;
}

.feature-card-list li strong {
  color: #FFFFFF;
}

/* Specific Interactive Masterclass Section Table in nano-banana.html */
.detail-guide-masterclass-section .masterclass-grid-cards {
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin: 0;
}

.detail-guide-masterclass-section .masterclass-feature-card.interactive-card {
  background: transparent !important;
  border: none !important;
  border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 0 !important;
  padding: 44px 38px;
  box-shadow: none !important;
}

.detail-guide-masterclass-section .masterclass-feature-card.interactive-card:last-child {
  border-right: none !important;
}

.detail-guide-masterclass-section .masterclass-feature-card.interactive-card:hover {
  background: rgba(255, 255, 255, 0.015) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Card 1: Access Pills & Dynamic Detail Display */
.access-interactive-pills {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.access-pill-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  color: rgba(247, 247, 242, 0.85);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  box-shadow: none !important;
}

.access-pill-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(143, 216, 248, 0.4);
  color: #FFFFFF;
}

/* Flat & Matte Solid Active State */
.access-pill-btn.active {
  background: #9BE7C4 !important;
  border-color: #9BE7C4 !important;
  color: #0A0A0D !important;
  font-weight: 800 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

.access-pill-tag {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 3px;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid currentColor;
}

.access-pill-btn.active .access-pill-tag {
  background: #0A0A0D !important;
  color: #9BE7C4 !important;
  border-color: #0A0A0D !important;
}

.access-pill-btn[data-access="standard"] .access-pill-tag {
  color: #9BE7C4;
  border-color: rgba(155, 231, 196, 0.4);
}

.access-pill-btn[data-access="aistudio"] .access-pill-tag {
  color: #8FD8F8;
  border-color: rgba(143, 216, 248, 0.4);
}

.access-pill-btn[data-access="notebooklm"] .access-pill-tag {
  color: #FFD166;
  border-color: rgba(255, 209, 102, 0.4);
}

.access-detail-display {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
  box-shadow: none !important;
}

.access-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-body);
  font-size: 13px;
  gap: 12px;
}

.access-label {
  color: rgba(247, 247, 242, 0.55);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.access-val {
  color: #8FD8F8;
  font-weight: 700;
  text-align: right;
}

.access-val.code-val {
  font-family: var(--font-body);
  font-size: 12px;
  background: rgba(155, 231, 196, 0.08);
  border: 1px solid rgba(155, 231, 196, 0.3);
  padding: 3px 8px;
  border-radius: 3px;
  color: #9BE7C4;
}

/* Card 2: Interactive Rules Rows */
.interactive-rules-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.rule-chip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(247, 247, 242, 0.85);
  transition: all 0.15s ease;
  box-shadow: none !important;
}

.rule-chip-row:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(143, 216, 248, 0.35);
}

.rule-chip-icon {
  font-size: 11px;
  color: #8FD8F8;
  flex-shrink: 0;
}

.rule-chip-content {
  flex: 1;
}

.rule-chip-content strong {
  color: #FFFFFF;
}

.rule-chip-content code {
  background: rgba(143, 216, 248, 0.08);
  color: #8FD8F8;
  border: 1px solid rgba(143, 216, 248, 0.25);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
  font-family: var(--font-body);
}

.rule-copy-btn {
  background: transparent;
  border: 1px solid rgba(155, 231, 196, 0.35);
  border-radius: 3px;
  color: #9BE7C4;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 10px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
  box-shadow: none !important;
}

.rule-copy-btn:hover {
  background: #9BE7C4;
  border-color: #9BE7C4;
  color: #0A0A0D;
  box-shadow: none !important;
}

.rule-action-link {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8FD8F8;
  flex-shrink: 0;
  transition: color 0.15s ease;
}

.rule-action-link:hover {
  color: #9BE7C4;
}

/* Card 3: Interactive Pillars Grid */
.interactive-pillars-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.pillar-interactive-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  box-shadow: none !important;
}

.pillar-interactive-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(143, 216, 248, 0.35);
}

/* Flat & Matte Solid Iceberg Active State */
.pillar-interactive-btn.active {
  background: #8FD8F8 !important;
  border-color: #8FD8F8 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

.pillar-interactive-btn .pillar-btn-title {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  color: #8FD8F8;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pillar-interactive-btn.active .pillar-btn-title {
  color: #0A0A0D !important;
  font-weight: 900 !important;
}

.pillar-interactive-btn .pillar-btn-sub {
  font-family: var(--font-body);
  font-size: 11.5px;
  color: rgba(247, 247, 242, 0.65);
}

.pillar-interactive-btn.active .pillar-btn-sub {
  color: rgba(10, 10, 13, 0.75) !important;
  font-weight: 700 !important;
}

.pillar-active-hint {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(247, 247, 242, 0.8);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 12px 14px;
  margin-top: auto;
  box-shadow: none !important;
}

@media (max-width: 960px) {
  .masterclass-grid-cards {
    grid-template-columns: 1fr;
  }
  .masterclass-feature-card.interactive-card {
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 28px 20px;
  }
  .masterclass-feature-card.interactive-card:last-child {
    border-bottom: none !important;
  }
}

/* Part B: Gems Automation Workflow Bar */
.gems-automation-visual-bar {
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 42px 48px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  box-shadow: none !important;
}

.gems-workflow-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gems-workflow-tag {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8FD8F8;
}

.gems-workflow-title {
  font-family: var(--font-title);
  font-size: 1.55rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0;
  letter-spacing: -0.01em;
}

.gems-steps-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.gems-step-pill-tab {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 24px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: none !important;
}

.gems-step-pill-tab:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(143, 216, 248, 0.35);
}

.gems-step-pill-tab.active {
  background: #8FD8F8 !important;
  border-color: #8FD8F8 !important;
  box-shadow: none !important;
  border-radius: 4px !important;
}

.gems-step-pill-tab .step-pill-index {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8FD8F8;
}

.gems-step-pill-tab.active .step-pill-index {
  color: rgba(10, 10, 13, 0.75) !important;
}

.gems-step-pill-tab .step-pill-heading {
  font-family: var(--font-title);
  font-size: 15px;
  font-weight: 700;
  color: #FFFFFF;
}

.gems-step-pill-tab.active .step-pill-heading {
  color: #0A0A0D !important;
  font-weight: 800 !important;
}

.gems-step-content-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 24px 32px;
  box-shadow: none !important;
}

.gems-step-desc-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gems-step-sub {
  font-family: var(--font-title);
  font-size: 15.5px;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0;
  line-height: 1.4;
}

.gems-step-text {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(247, 247, 242, 0.88);
  margin: 0;
}

.gems-step-text strong {
  color: #9BE7C4;
}

.gems-step-chip {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9BE7C4;
  background: transparent;
  border: 1px solid rgba(155, 231, 196, 0.4);
  padding: 8px 14px;
  border-radius: 3px;
  white-space: nowrap;
  box-shadow: none !important;
}

/* Part C: Master Prompt Customizer Box */
.master-prompt-template-box {
  background: #060608;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: none !important;
  position: relative;
}

.template-box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 42px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-wrap: wrap;
  gap: 16px;
}

.template-badge {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8FD8F8;
}

.template-title {
  font-family: var(--font-title);
  font-size: 1.55rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 4px 0 0 0;
  letter-spacing: -0.01em;
}

.template-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.template-reset-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 3px;
  padding: 9px 16px;
  color: rgba(247, 247, 242, 0.7);
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: none !important;
}

.template-reset-btn:hover {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.05);
}

.copy-master-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #9BE7C4;
  border: 1px solid #9BE7C4;
  border-radius: 3px;
  padding: 10px 20px;
  color: #0A0A0D;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: none !important;
  transition: all 0.15s ease;
}

.copy-master-btn:hover {
  background: #8FD8F8;
  border-color: #8FD8F8;
  transform: none !important;
}

/* Prompt Live Customizer Controls */
.prompt-customizer-controls {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 28px 42px;
  background: rgba(255, 255, 255, 0.015);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.customizer-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.customizer-label {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8FD8F8;
}

.customizer-btn-row {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.customizer-btn {
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  color: rgba(247, 247, 242, 0.85);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: normal;
  overflow: visible;
  box-shadow: none !important;
}

.customizer-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(143, 216, 248, 0.35);
  color: #FFFFFF;
}

/* Flat & Matte Solid Mint Active State */
.customizer-btn.active {
  background: #9BE7C4 !important;
  border-color: #9BE7C4 !important;
  color: #0A0A0D !important;
  font-weight: 800 !important;
  border-radius: 3px !important;
  box-shadow: none !important;
}

.template-code-view {
  padding: 34px 42px;
  margin: 0;
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(247, 247, 242, 0.9);
  overflow-x: auto;
  white-space: pre-wrap;
  min-height: 280px;
  transition: opacity 0.2s ease;
}

.template-code-view.updating {
  opacity: 0.4;
}

@media (max-width: 1080px) {
  .prompt-customizer-controls {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .detail-guide-masterclass-section {
    padding: 60px 20px 80px 20px;
  }
  .masterclass-grid-cards {
    grid-template-columns: 1fr;
  }
  .gems-steps-container {
    grid-template-columns: 1fr;
  }
  .prompt-customizer-controls {
    grid-template-columns: 1fr;
  }
}

/* Copy Toast Notification */
.copy-toast-notification {
  position: fixed;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  z-index: 999;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #9BE7C4;
  color: #0A0A0D;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 12px 24px;
  border-radius: 30px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.8), 0 0 20px rgba(155, 231, 196, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.copy-toast-notification.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Lightbox Modal */
.image-lightbox-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
}

.image-lightbox-modal.is-active {
  opacity: 1;
  visibility: visible;
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.lightbox-container {
  position: relative;
  z-index: 2;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lightbox-image {
  max-width: 85vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.9);
}

.lightbox-close-btn {
  position: absolute;
  top: -44px;
  right: 0;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.lightbox-close-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

.lightbox-info-bar {
  margin-top: 14px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: rgba(247, 247, 242, 0.8);
  text-align: center;
}

/* ==========================================================================
   2-COLUMN DOCUMENTATION LAYOUT (20% Headings Sidebar + 80% Content)
   ========================================================================== */
.guide-documentation-layout {
  width: 100%;
  box-sizing: border-box;
  background: #060608;
  padding: 40px 0 100px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.guide-doc-container {
  display: grid;
  grid-template-columns: 22% 78%;
  max-width: 1720px;
  margin: 0 auto;
  padding: 0 44px;
  gap: 44px;
  box-sizing: border-box;
  align-items: start;
}

@media (max-width: 1100px) {
  .guide-doc-container {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 0 24px;
  }
}

/* 20% Sidebar Navigation - Solid Bleu Iceberg Luxury Card */
.guide-doc-sidebar {
  position: sticky;
  top: 90px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(10, 10, 13, 0.25) transparent;
  background: linear-gradient(145deg, #A0E6FF 0%, #8FD8F8 50%, #6ECCF5 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 24px;
  padding: 26px 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: #0A0A0D !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 6px 30px rgba(143, 216, 248, 0.45);
}

.guide-sidebar-header {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(10, 10, 13, 0.16);
}

.guide-sidebar-tag {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #0A0A0D;
  opacity: 0.7;
}

.guide-sidebar-title {
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: 900;
  color: #0A0A0D;
  margin: 0;
  letter-spacing: -0.015em;
}

.guide-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.guide-sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  color: rgba(10, 10, 13, 0.78);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid rgba(10, 10, 13, 0.08);
  background: rgba(10, 10, 13, 0.04);
}

.guide-sidebar-link:hover {
  background: rgba(10, 10, 13, 0.12);
  color: #000000;
  transform: translateX(3px);
  border-color: rgba(10, 10, 13, 0.18);
}

.guide-sidebar-link.active-link {
  background: #0A0A0D;
  border-color: #0A0A0D;
  color: #FFFFFF;
  font-weight: 800;
  box-shadow: 0 6px 18px rgba(10, 10, 13, 0.28);
}

.guide-sidebar-num {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 900;
  color: #0A0A0D;
  opacity: 0.65;
  width: 22px;
  flex-shrink: 0;
}

.guide-sidebar-link.active-link .guide-sidebar-num {
  color: #8FD8F8;
  opacity: 1;
}

.guide-sidebar-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: inherit;
}

.guide-sidebar-link.highlight-prompts {
  background: linear-gradient(135deg, #9BE7C4 0%, #8FD8F8 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 4px 14px rgba(10, 10, 13, 0.15), 0 0 12px rgba(155, 231, 196, 0.35);
  color: #0A0A0D !important;
  font-weight: 800;
}

.guide-sidebar-link.highlight-prompts .guide-sidebar-num {
  color: #0A0A0D !important;
  font-weight: 900;
  opacity: 0.85;
}

.guide-sidebar-link.highlight-prompts .guide-sidebar-label {
  color: #0A0A0D !important;
  font-weight: 900;
}

.guide-sidebar-link.highlight-prompts:hover {
  background: linear-gradient(135deg, #A8F0CF 0%, #A2E2FF 100%) !important;
  transform: translateX(4px) scale(1.02);
  box-shadow: 0 6px 18px rgba(10, 10, 13, 0.22), 0 0 16px rgba(155, 231, 196, 0.5);
}

.guide-sidebar-link.highlight-prompts.active-link {
  background: #0A0A0D !important;
  border: 1.5px solid #9BE7C4;
  color: #9BE7C4 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 14px rgba(155, 231, 196, 0.3);
}

.guide-sidebar-link.highlight-prompts.active-link .guide-sidebar-num {
  color: #9BE7C4 !important;
  opacity: 1;
}

.guide-sidebar-link.highlight-prompts.active-link .guide-sidebar-label {
  color: #9BE7C4 !important;
}

/* 80% Content Area */
.guide-doc-content-area {
  min-width: 0; /* Prevents grid breakout */
  display: flex;
  flex-direction: column;
  gap: 50px;
  position: relative;
}

/* ==========================================================================
   NOTEBOOKLM CONTENT LOCKED & BLURRED TEASER STATE
   ========================================================================== */
.guide-doc-content-area.is-locked-content .guide-module-block,
.guide-doc-content-area.is-locked-content .prompts-slider-wrapper {
  filter: blur(14px) saturate(40%) brightness(0.6) !important;
  -webkit-filter: blur(14px) saturate(40%) brightness(0.6) !important;
  user-select: none !important;
  pointer-events: none !important;
  opacity: 0.45 !important;
  transition: filter 0.4s ease, opacity 0.4s ease;
}

/* Floating Sticky VIP Unlock Teaser Banner in the Content Area */
.guide-content-lock-banner {
  display: none;
}

.guide-doc-content-area.is-locked-content .guide-content-lock-banner {
  display: flex !important;
  position: sticky;
  top: 120px;
  z-index: 50;
  width: 92%;
  max-width: 680px;
  margin: 24px auto -240px auto;
  background: linear-gradient(180deg, rgba(16, 16, 22, 0.96) 0%, rgba(9, 9, 13, 0.98) 100%);
  backdrop-filter: blur(32px) saturate(210%);
  -webkit-backdrop-filter: blur(32px) saturate(210%);
  border: 1px solid rgba(143, 216, 248, 0.3);
  border-radius: 28px;
  padding: 40px 36px 36px 36px;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  box-shadow: 0 32px 100px rgba(0, 0, 0, 0.95), 0 0 60px rgba(143, 216, 248, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  pointer-events: auto;
  animation: cardElevate 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ==========================================================================
   NANO BANANA PRO GALLERY BLUR & LOCK OVERLAY SYSTEM
   ========================================================================== */
.prompt-card-media-wrap.is-blurred-preview {
  position: relative !important;
  overflow: hidden !important;
}

.prompt-card-media-wrap.is-blurred-preview .prompt-card-img,
.prompt-card-media-wrap.is-blurred-preview .prompt-card-img.blurred-media-img {
  filter: blur(16px) brightness(0.6) saturate(50%) !important;
  -webkit-filter: blur(16px) brightness(0.6) saturate(50%) !important;
  transform: scale(1.08) !important;
  user-select: none !important;
  pointer-events: none !important;
  transition: filter 0.4s ease, transform 0.4s ease !important;
}

.prompt-card-media-wrap.is-blurred-preview .image-blur-lock-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 10 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  background: rgba(10, 10, 13, 0.55) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  padding: 16px !important;
  text-align: center !important;
}

.prompt-card-media-wrap.is-blurred-preview .lock-brand-logo-img {
  height: 28px !important;
  width: auto !important;
  opacity: 0.9 !important;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.8)) !important;
}

.prompt-card-media-wrap.is-blurred-preview .unlock-trigger-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 18px !important;
  background: linear-gradient(135deg, #9BE7C4 0%, #8FD8F8 100%) !important;
  color: #0A0A0D !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  border-radius: 20px !important;
  font-family: var(--font-body) !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), 0 0 12px rgba(155, 231, 196, 0.35) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.prompt-card-media-wrap.is-blurred-preview .unlock-trigger-action-btn:hover {
  transform: scale(1.06) !important;
  background: linear-gradient(135deg, #A8F0CF 0%, #A2E2FF 100%) !important;
  box-shadow: 0 6px 22px rgba(155, 231, 196, 0.5) !important;
}

/* Prompt Box Masking & Scrim in Detail Modal */
.is-locked-prompt .masked-text {
  filter: blur(8px) !important;
  -webkit-filter: blur(8px) !important;
  user-select: none !important;
  pointer-events: none !important;
  opacity: 0.4 !important;
}

.prompt-locked-action-scrim {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px 0 !important;
  width: 100% !important;
}

.master-template-lock-scrim {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: calc(100% - 130px) !important;
  min-height: 240px !important;
  background: linear-gradient(180deg, rgba(6, 6, 8, 0.45) 0%, rgba(6, 6, 8, 0.94) 38%, #060608 100%) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 30px 20px !important;
  z-index: 10 !important;
  width: 100% !important;
}

.master-template-lock-scrim .prompt-lock-inner-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  margin: 0 auto !important;
  gap: 16px !important;
  max-width: 320px !important;
  width: 100% !important;
}

.master-template-lock-scrim .prompt-lock-brand-logo {
  height: 40px !important;
  width: auto !important;
  display: block !important;
  margin: 0 auto !important;
  object-fit: contain !important;
}

.master-template-lock-scrim .unlock-card-cta-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
  max-width: 260px !important;
  width: 100% !important;
}

.guide-lock-badge-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.guide-lock-brand-logo {
  height: 38px;
  width: auto;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.8));
}

.guide-lock-tagline {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(247, 247, 242, 0.45);
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
}

.guide-lock-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.guide-lock-banner-title {
  font-family: var(--font-title);
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.015em;
}

.guide-lock-banner-desc {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(247, 247, 242, 0.75);
  max-width: 540px;
  margin: 0 auto;
}

.guide-lock-banner-desc strong {
  color: #FFFFFF;
  font-weight: 700;
}

/* Feature Bullet Points (Clean Minimalist Architectural Text) */
.guide-lock-feature-chips {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  margin: 8px 0 4px 0;
}

.lock-chip-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: rgba(247, 247, 242, 0.75);
  letter-spacing: 0.02em;
}

/* Action Wrap */
.guide-lock-action-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 4px;
}

.guide-lock-unlock-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #9BE7C4 0%, #8FD8F8 100%);
  color: #0A0A0D;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 14px 32px;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(155, 231, 196, 0.35);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.guide-lock-unlock-btn:hover {
  transform: translateY(-2px) scale(1.02);
  background: linear-gradient(135deg, #A8F0CF 0%, #A2E2FF 100%);
  box-shadow: 0 14px 40px rgba(155, 231, 196, 0.55);
}

.guide-lock-guarantee-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: rgba(247, 247, 242, 0.45);
}

.guide-module-block {
  background: rgba(12, 12, 16, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 20px;
  padding: 44px 36px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  scroll-margin-top: 100px;
}

.guide-module-block.alt-bg {
  background: rgba(16, 16, 22, 0.45);
  border-color: rgba(255, 255, 255, 0.09);
}

.guide-module-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.guide-module-tag {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(247, 247, 242, 0.85);
}

.guide-module-title {
  font-family: var(--font-title);
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #FFFFFF;
  margin: 0;
  line-height: 1.25;
}

.guide-module-desc {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(247, 247, 242, 0.75);
  margin: 0;
}

/* Technical Data Tables */
.tech-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: #0A0A0E;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
}

.tech-data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-family: var(--font-body);
  font-size: 13.5px;
}

.tech-data-table th {
  background: rgba(255, 255, 255, 0.04);
  padding: 16px 22px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-bleu-iceberg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tech-data-table td {
  padding: 16px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(247, 247, 242, 0.85);
  line-height: 1.6;
}

.tech-data-table tr:last-child td {
  border-bottom: none;
}

.tech-data-table tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

.tech-data-table td strong {
  color: #FFFFFF;
}

/* Custom Geometric SVG Icon Styling (No Emojis) */
.tech-icon-svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-bleu-iceberg);
  flex-shrink: 0;
  vertical-align: middle;
}

.feature-card-num .tech-icon-svg {
  color: #9BE7C4;
  width: 24px;
  height: 24px;
}

.studio-tool-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(143, 216, 248, 0.08);
  border: 1px solid rgba(143, 216, 248, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-bleu-iceberg);
  flex-shrink: 0;
}

.studio-tool-card:hover .studio-tool-icon-wrap {
  background: rgba(143, 216, 248, 0.16);
  border-color: var(--color-bleu-iceberg);
  box-shadow: 0 0 16px rgba(143, 216, 248, 0.3);
}

.rule-header-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Callout Box */
.guide-callout-box {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 26px;
  border-radius: 14px;
  background: rgba(143, 216, 248, 0.05);
  border: 1px solid rgba(143, 216, 248, 0.25);
}

.guide-callout-box.warning {
  background: rgba(255, 123, 114, 0.05);
  border-color: rgba(255, 123, 114, 0.25);
}

.guide-callout-box.success {
  background: rgba(155, 231, 196, 0.05);
  border-color: rgba(155, 231, 196, 0.25);
}

.guide-callout-icon {
  font-size: 20px;
  flex-shrink: 0;
  line-height: 1;
}

.guide-callout-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(247, 247, 242, 0.85);
}

.guide-callout-content strong {
  color: #FFFFFF;
}

/* Studio 8 Tools Interactive Grid */
.studio-tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 1200px) {
  .studio-tools-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .studio-tools-grid {
    grid-template-columns: 1fr;
  }
}

.studio-tool-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.studio-tool-card:hover {
  transform: translateY(-4px);
  border-color: rgba(143, 216, 248, 0.4);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(143, 216, 248, 0.1);
}

.studio-tool-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.studio-tool-icon {
  font-size: 24px;
}

.studio-tool-title {
  font-family: var(--font-title);
  font-size: 1.15rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0;
}

.studio-tool-desc {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.6;
  color: rgba(247, 247, 242, 0.75);
  margin: 0;
}

.studio-tool-list {
  list-style: none;
  padding: 0;
  margin: 4px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12.5px;
  color: rgba(247, 247, 242, 0.7);
}

.studio-tool-list li {
  position: relative;
  padding-left: 14px;
}

.studio-tool-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-bleu-iceberg);
  font-weight: bold;
}

.studio-tool-list li strong {
  color: #FFFFFF;
}



/* ==========================================================================
   SUPER MOBILE RESPONSIVENESS SUITE (RESOURCES, NOTEBOOKLM, NANO BANANA)
   ========================================================================== */

@media (max-width: 900px) {
  /* Prevent Any Horizontal Overflow */
  body, html {
    overflow-x: hidden !important;
    width: 100% !important;
  }

  /* Breadcrumbs & Detail Hero Tops */
  .resource-detail-main .detail-hero-section {
    padding: 100px 16px 28px 16px !important;
  }

  .detail-hero-title {
    font-size: clamp(2rem, 7.5vw, 2.6rem) !important;
    line-height: 1.15 !important;
  }

  .detail-hero-description {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  /* Metrics Bar 2x2 on Mobile */
  .detail-hero-metrics-bar {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px 12px !important;
    padding: 16px 18px !important;
    margin-top: 14px !important;
  }

  .detail-hero-metrics-bar.floating-architectural {
    background: transparent !important;
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 0 !important;
    padding: 18px 0 !important;
    box-shadow: none !important;
  }

  .hero-metric-item {
    border-right: none !important;
    align-items: flex-start !important;
    padding: 0 4px !important;
  }

  .hero-metric-item .metric-val {
    font-size: 26px !important;
  }

  .hero-metric-item .metric-lbl {
    font-size: 10px !important;
  }

  /* High-End 3-Step Workflow Bar on Mobile */
  .detail-method-workflow-bar {
    padding: 20px 18px !important;
    border-radius: 20px !important;
  }

  .workflow-steps-grid {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
  }

  .workflow-step-arrow {
    display: none !important;
  }

  .workflow-step-card {
    background: rgba(10, 10, 13, 0.05) !important;
    border-radius: 14px !important;
    padding: 12px !important;
    border: 1px solid rgba(10, 10, 13, 0.08) !important;
  }

  /* Sticky Navigation & Cluster Filters */
  .detail-sticky-nav-bar {
    top: 60px !important;
    padding: 10px 16px !important;
  }

  .detail-sticky-nav-inner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .detail-cluster-pills-wrap {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 2px !important;
  }

  .detail-prompt-search-wrap {
    width: 100% !important;
    max-width: 100% !important;
  }

  .detail-prompt-search-wrap:focus-within {
    width: 100% !important;
  }

  /* Resources Page Mobile */
  .resources-main-section {
    padding-top: 80px !important;
  }

  .grid-editorial-header {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
    padding: 30px 16px 20px 16px !important;
  }

  .grid-header-title {
    font-size: clamp(2.2rem, 8vw, 3rem) !important;
  }

  .modern-search-container {
    max-width: 100% !important;
  }

  .grid-header-right-ticker {
    width: 100% !important;
    overflow: hidden !important;
    padding: 14px 0 !important;
  }

  .resources-grid-section {
    padding: 20px 16px 60px 16px !important;
  }

  .archive-sticky-filter-bar {
    top: 60px !important;
    padding: 8px 16px !important;
  }

  .category-segmented-switch {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .category-segmented-switch::-webkit-scrollbar {
    display: none !important;
  }

  /* NotebookLM 2-Column Documentation Mobile */
  .guide-documentation-layout {
    padding: 20px 0 60px 0 !important;
  }

  .guide-doc-container {
    grid-template-columns: 1fr !important;
    padding: 0 16px !important;
    gap: 24px !important;
  }

  /* Horizontal swipe Sommaire on Mobile */
  .guide-doc-sidebar {
    position: static !important;
    top: auto !important;
    max-height: none !important;
    padding: 16px 14px !important;
    border-radius: 18px !important;
    gap: 10px !important;
  }

  .guide-sidebar-header {
    padding-bottom: 8px !important;
  }

  .guide-sidebar-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 8px !important;
    padding-bottom: 4px !important;
  }

  .guide-sidebar-nav::-webkit-scrollbar {
    display: none !important;
  }

  .guide-sidebar-link {
    flex: 0 0 auto !important;
    padding: 8px 12px !important;
    font-size: 11.5px !important;
  }

  .guide-doc-content-area {
    gap: 36px !important;
  }

  .guide-module-header {
    gap: 8px !important;
  }

  .guide-module-title {
    font-size: 20px !important;
  }

  .masterclass-grid-cards {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* VIP Lock Banner Mobile */
  .guide-doc-content-area.is-locked-content .guide-content-lock-banner {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 16px 0 !important;
    padding: 28px 18px !important;
    border-radius: 20px !important;
    gap: 16px !important;
  }

  .guide-lock-banner-title {
    font-size: 1.45rem !important;
  }

  .guide-lock-banner-desc {
    font-size: 12.5px !important;
  }

  .guide-lock-feature-chips {
    gap: 6px !important;
  }

  .lock-chip-item {
    font-size: 10.5px !important;
    padding: 5px 10px !important;
  }

  .guide-lock-unlock-btn {
    width: 100% !important;
    padding: 13px 20px !important;
    font-size: 11px !important;
  }

  /* Slider Track on Mobile */
  .detail-prompts-slider-track .prompt-showcase-card {
    flex: 0 0 88vw !important;
    max-width: 88vw !important;
  }

  /* Modals on Mobile */
  .newsletter-brand-modal {
    padding: 12px !important;
  }

  .newsletter-modal-container.vault-modal-container {
    max-width: 95vw !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
    border-radius: 4px !important;
  }

  .vault-modal-grid {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }

  .vault-preview-col {
    padding: 18px 16px 14px !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    gap: 12px !important;
  }

  .vault-covers-stack {
    flex-direction: row !important;
    gap: 8px !important;
  }

  .vault-cover-card {
    height: 64px !important;
    flex: 1 !important;
    margin-bottom: 0 !important;
  }

  .vault-cover-tag {
    font-size: 7px !important;
    padding: 1px 4px !important;
    gap: 3px !important;
  }

  .vault-tag-mini-icon {
    width: 8px !important;
    height: 8px !important;
  }

  .vault-tool-badge {
    width: 18px !important;
    height: 18px !important;
    top: 4px !important;
    right: 4px !important;
    padding: 2.5px !important;
  }

  .vault-preview-footer {
    display: none !important;
  }

  .vault-content-col {
    padding: 22px 18px !important;
    gap: 14px !important;
  }

  .vault-content-col .newsletter-modal-title {
    font-size: 1.25rem !important;
  }

  .prompt-detail-modal {
    padding: 14px !important;
  }

  .prompt-modal-container {
    max-height: 92vh !important;
    overflow-y: auto !important;
    border-radius: 20px !important;
  }

  .prompt-modal-grid {
    grid-template-columns: 1fr !important;
  }

  .prompt-modal-image-col {
    max-height: 320px !important;
  }

  .prompt-modal-content-col {
    padding: 20px 18px !important;
  }
}

@media (max-width: 480px) {
  .detail-hero-metrics-bar {
    grid-template-columns: 1fr 1fr !important;
    padding: 12px 14px !important;
  }

  .hero-metric-item .metric-val {
    font-size: 22px !important;
  }

  .hero-metric-item .metric-lbl {
    font-size: 9px !important;
  }

  .cluster-pill-btn {
    padding: 7px 12px !important;
    font-size: 10.5px !important;
  }

  .newsletter-submit-btn {
    font-size: 11px !important;
    padding: 13px 18px !important;
  }
}

/* ==========================================================================
   SIMPLE MINIMALIST SWITCH TOGGLE (BLUR / UNLOCK TEST SWITCH)
   ========================================================================== */
.simple-switch-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: transparent !important;
  border: none !important;
  padding: 4px 6px !important;
  margin-right: 10px !important;
  cursor: pointer !important;
}

.switch-track {
  position: relative !important;
  width: 36px !important;
  height: 19px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 20px !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.switch-thumb {
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 13px !important;
  height: 13px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s ease !important;
}

/* Active / Unlocked state */
.simple-switch-toggle.is-active .switch-track {
  background: rgba(155, 231, 196, 0.25) !important;
  border-color: #9BE7C4 !important;
}

.simple-switch-toggle.is-active .switch-thumb {
  transform: translateX(17px) !important;
  background: #9BE7C4 !important;
  box-shadow: 0 0 8px rgba(155, 231, 196, 0.8) !important;
}

.switch-label {
  font-family: var(--font-body) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(247, 247, 242, 0.55) !important;
  transition: color 0.25s ease !important;
}

.simple-switch-toggle.is-active .switch-label {
  color: #9BE7C4 !important;
}

/* ==========================================================================
   THE "SPLIT-STAGE" ARCHITECTURE — LA MÉTHODE N.O.V.A. WORKSPACE
   ========================================================================== */
.nova-split-stage-container {
  display: grid;
  grid-template-columns: 40% 1fr;
  gap: 44px;
  align-items: start;
  margin-top: 8px;
}

@media (max-width: 992px) {
  .nova-split-stage-container {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* Left Column: The Interactive Index (Navigation Tabs 40%) */
.nova-interactive-index {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nova-nav-step {
  display: flex;
  align-items: flex-start;
  padding: 16px 20px;
  background: transparent;
  border-left: 2px solid transparent;
  border-radius: 0 6px 6px 0;
  cursor: pointer;
  opacity: 0.40;
  transition: opacity 0.25s ease, background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
  user-select: none;
}

.nova-nav-step:hover {
  opacity: 0.80;
  background: rgba(255, 255, 255, 0.02);
}

.nova-nav-step.active {
  opacity: 1.0 !important;
  background: rgba(255, 255, 255, 0.035);
  border-left-color: #8FD8F8 !important;
}

.nova-step-body {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  width: 100%;
}

/* Brutalist Scaled-Up Numbering */
.nova-step-num {
  font-family: var(--font-title);
  font-size: clamp(2.2rem, 3vw, 3rem);
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(247, 247, 242, 0.4);
  transition: -webkit-text-stroke 0.25s ease;
  flex-shrink: 0;
  margin-top: 2px;
}

.nova-nav-step.active .nova-step-num,
.nova-nav-step:hover .nova-step-num {
  -webkit-text-stroke: 1.5px #FFFFFF;
}

.nova-step-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nova-step-title {
  font-family: var(--font-title);
  font-size: 1.15rem;
  font-weight: 800;
  color: rgba(247, 247, 242, 0.85);
  margin: 0;
  letter-spacing: -0.01em;
  transition: color 0.25s ease;
}

.nova-nav-step.active .nova-step-title {
  color: #FFFFFF;
}

.nova-step-desc {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(247, 247, 242, 0.65);
  margin: 0;
}

.nova-step-desc code {
  background: rgba(255, 255, 255, 0.08);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: #9BE7C4;
}

/* Right Column: The Dynamic Canvas (Content Stage 60%) */
.nova-dynamic-canvas {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.nova-canvas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.nova-detail-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8FD8F8;
  background: rgba(143, 216, 248, 0.08);
  border: 1px solid rgba(143, 216, 248, 0.25);
  padding: 6px 14px;
  border-radius: 4px;
}

.nova-detail-rule {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(247, 247, 242, 0.5);
}

.nova-canvas-desc {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(247, 247, 242, 0.88);
  margin: 0;
}

/* Code Block: Matte Charcoal Background, Crisp Monospace, NO Glowing Text-Shadows */
.nova-canvas-code-block {
  background: #0A0A0E !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 8px;
  padding: 22px 26px;
  overflow-x: auto;
  box-shadow: none !important;
}

.nova-code-view {
  margin: 0;
  font-family: var(--font-body) !important;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(247, 247, 242, 0.9);
  white-space: pre-wrap;
  word-break: break-word;
  text-shadow: none !important;
}

.nova-code-view code {
  font-family: inherit !important;
  font-size: inherit !important;
  color: inherit !important;
  text-shadow: none !important;
}


/* ==========================================================================
   THE SWISS GRID ARCHITECTURE — SECTION "UNE RÉFÉRENCE, UNE MISSION"
   ========================================================================== */
.seedance-multimodal-section {
  padding: 80px clamp(24px, 4vw, 56px) !important;
  max-width: 100% !important;
  margin: 40px 0 60px 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.seedance-multimodal-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 36px !important;
  width: 100% !important;
  max-width: 100% !important;
}

.multimodal-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 48px 0 !important;
  width: 100% !important;
}

@media (max-width: 1200px) {
  .multimodal-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 40px 0 !important;
  }
}

@media (max-width: 680px) {
  .multimodal-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 32px 0 !important;
  }
}

.multimodal-card {
  background: transparent !important;
  border: none !important;
  border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 0 !important;
  padding: 0 clamp(20px, 2.5vw, 40px) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  box-shadow: none !important;
  transition: none !important;
}

.multimodal-card:first-child {
  padding-left: 0 !important;
}

.multimodal-card:last-child {
  border-right: none !important;
}

@media (max-width: 1200px) {
  .multimodal-card:nth-child(2n) {
    border-right: none !important;
  }
  .multimodal-card:nth-child(3),
  .multimodal-card:nth-child(4) {
    padding-top: 24px;
  }
}

@media (max-width: 680px) {
  .multimodal-card {
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 0 0 28px 0 !important;
  }
  .multimodal-card:last-child {
    border-bottom: none !important;
  }
}

.multimodal-card:hover {
  transform: none !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: transparent !important;
}

.multimodal-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.multimodal-tag {
  font-family: var(--font-body) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  color: rgba(255, 255, 255, 0.5) !important;
  text-transform: uppercase !important;
}

/* Matte Flat Printed-Style Metadata Label */
.multimodal-icon-badge {
  font-family: var(--font-body) !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.75) !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border: none !important;
  padding: 4px 10px !important;
  border-radius: 3px !important;
  box-shadow: none !important;
}

/* Punchy Flat Mint Variable Headline */
.multimodal-card-title {
  font-family: var(--font-title) !important;
  font-size: 1.45rem !important;
  font-weight: 900 !important;
  color: #9BE7C4 !important;
  margin: 0 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  text-shadow: none !important;
}

/* Muted Grey Paragraph for High Contrast */
.multimodal-card-desc {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: rgba(247, 247, 242, 0.6) !important;
  margin: 0 !important;
  flex: 1 !important;
}

/* "Naked" Monospace Code Blockquote Indent */
.multimodal-syntax-box {
  background: transparent !important;
  border: none !important;
  border-left: 2px solid rgba(155, 231, 196, 0.5) !important;
  border-radius: 0 !important;
  padding: 4px 0 4px 14px !important;
  margin-top: 8px !important;
}

.multimodal-syntax-box code {
  font-family: var(--font-body) !important;
  font-size: 11.5px !important;
  line-height: 1.55 !important;
  color: rgba(247, 247, 242, 0.85) !important;
  word-break: break-word !important;
  text-shadow: none !important;
}


/* 3. Seedance Prompt Cards */
.seedance-prompt-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.seedance-prompt-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  background: rgba(255, 255, 255, 0.035);
}

.card-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.card-category-tag {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--color-bleu-iceberg);
  text-transform: uppercase;
}

.card-tech-badge {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid currentColor;
}

.seedance-card-title {
  font-family: var(--font-title);
  font-size: 1.35rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.seedance-card-subtitle {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(247, 247, 242, 0.65);
  margin: 0;
}

.seedance-card-meta-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(255, 255, 255, 0.02);
  border-left: 2px solid var(--color-bleu-iceberg);
  padding: 10px 14px;
  border-radius: 0 6px 6px 0;
}

.seedance-card-meta-box .meta-item {
  display: flex;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 11px;
}

.seedance-card-meta-box .meta-label {
  font-weight: 800;
  color: rgba(247, 247, 242, 0.5);
  letter-spacing: 0.06em;
  flex-shrink: 0;
}

.seedance-card-meta-box .meta-val {
  color: rgba(247, 247, 242, 0.9);
  font-weight: 600;
}

.seedance-prompt-code-wrap {
  background: #030305;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 18px 20px;
  max-height: 280px;
  overflow-y: auto;
}

.seedance-code-block {
  margin: 0;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.6;
  color: rgba(247, 247, 242, 0.92);
  white-space: pre-wrap;
  word-break: break-word;
}

.seedance-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: 8px;
}

.seedance-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  color: #0A0A0D;
  border: 1px solid #FFFFFF;
  border-radius: 30px;
  padding: 10px 20px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
}

.seedance-copy-btn:hover {
  background: var(--color-vert-menthe);
  border-color: var(--color-vert-menthe);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(155, 231, 196, 0.35);
}

.seedance-copy-btn.copied {
  background: var(--color-vert-menthe);
  border-color: var(--color-vert-menthe);
}

.seedance-copy-hint {
  font-family: var(--font-body);
  font-size: 10.5px;
  color: rgba(247, 247, 242, 0.4);
}

/* 4. Luxury Swiss Editorial Grammar Table */
.seedance-grammar-section {
  padding: 60px 0 100px 0;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.grammar-table-wrap {
  width: 100%;
  overflow-x: auto;
  background: transparent !important;
  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  margin-top: 40px;
  box-sizing: border-box;
}

.grammar-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 13.5px;
  text-align: left;
  min-width: 760px;
}

.grammar-table th {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.4) !important;
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 18px 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.grammar-table td {
  padding: 20px 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: rgba(247, 247, 242, 0.75) !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
}

.grammar-table tbody tr:last-child td {
  border-bottom: none !important;
}

.grammar-table tbody tr {
  transition: background 0.2s ease;
}

.grammar-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.02) !important;
}

.grammar-table td strong {
  color: #FFFFFF !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  font-size: 14px !important;
}

.grammar-table td:nth-child(4) {
  font-family: var(--font-body) !important;
  color: #9BE7C4 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}

.table-speed {
  display: inline-flex !important;
  align-items: center !important;
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(247, 247, 242, 0.85) !important;
}

.table-speed.very-slow,
.table-speed.slow,
.table-speed.medium,
.table-speed.fast,
.table-speed.snap {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(247, 247, 242, 0.85) !important;
}

/* 5. Copy Toast Notification */
.seedance-copy-toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-vert-menthe);
  color: #0A0A0D;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 12px 24px;
  border-radius: 30px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.8), 0 0 20px rgba(155, 231, 196, 0.4);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.seedance-copy-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}




/* ==========================================================================
   PERPLEXITY AI PAGE — CUSTOMIZER & PROMPT GALLERY GRID SYSTEM
   ========================================================================== */

/* Customizer Workspace Layout */
.customizer-workspace-grid {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 28px;
  background: rgba(13, 13, 18, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 32px;
  backdrop-filter: blur(16px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
  margin-top: 24px;
}

@media (max-width: 1024px) {
  .customizer-workspace-grid {
    grid-template-columns: 1fr;
  }
}

.customizer-header-wrap {
  margin-bottom: 24px;
}

.customizer-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: #8FD8F8;
  text-transform: uppercase;
  display: block;
  margin-bottom: 8px;
}

.customizer-title {
  font-family: var(--font-title);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.1;
  margin-bottom: 8px;
}

.customizer-desc {
  font-size: 14.5px;
  color: rgba(247, 247, 242, 0.7);
  max-width: 720px;
  line-height: 1.5;
}

/* Control Panel */
.customizer-controls-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.control-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.control-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.85);
}

.custom-select-wrap {
  position: relative;
}

.custom-select-input {
  width: 100%;
  appearance: none;
  background: #14141E;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 12px 36px 12px 14px;
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 13.5px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.custom-select-input:focus {
  outline: none;
  border-color: #8FD8F8;
  box-shadow: 0 0 0 2px rgba(143, 216, 248, 0.2);
}

.custom-select-wrap::after {
  content: '▼';
  font-size: 9px;
  color: rgba(255, 255, 255, 0.5);
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* Output Panel */
.customizer-output-panel {
  display: flex;
  flex-direction: column;
  background: #0A0A0E;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  overflow: hidden;
}

.output-box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.output-box-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #8FD8F8;
}

.output-box-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.06em;
}

.output-code-container {
  padding: 20px;
  flex: 1;
  min-height: 220px;
  overflow-y: auto;
}

.output-code-text {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.6;
  color: #E2E8F0;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

.output-actions-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.03);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.copy-prompt-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 10px 18px;
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.2s ease;
}

.copy-prompt-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: #8FD8F8;
  color: #8FD8F8;
}

.try-perplexity-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #8FD8F8 0%, #9BE7C4 100%);
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  color: #0A0A0E;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: all 0.2s ease;
  margin-left: auto;
}

.try-perplexity-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(143, 216, 248, 0.3);
}

/* Operational Prompts Gallery & Sticky Filter Bar */
.prompts-gallery-header-wrap {
  margin-top: 64px;
  margin-bottom: 28px;
}

.gallery-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: #8FD8F8;
  text-transform: uppercase;
  display: block;
  margin-bottom: 8px;
}

.gallery-title {
  font-family: var(--font-title);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 24px;
}

.prompts-filter-bar-sticky {
  position: sticky;
  top: 80px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: rgba(10, 10, 14, 0.92);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 12px 18px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  margin-bottom: 32px;
}

@media (max-width: 860px) {
  .prompts-filter-bar-sticky {
    flex-direction: column;
    align-items: stretch;
  }
}

.filter-pills-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.prompt-filter-pill {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 6px 14px;
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all 0.2s ease;
}

.prompt-filter-pill:hover,
.prompt-filter-pill.active {
  background: rgba(143, 216, 248, 0.12);
  border-color: #8FD8F8;
  color: #8FD8F8;
}

.prompts-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #14141E;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 6px 14px;
  min-width: 260px;
}

.prompts-search-input {
  background: transparent;
  border: none;
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 12.5px;
  width: 100%;
}

.prompts-search-input:focus {
  outline: none;
}

/* Prompts Gallery 3-Column Grid */
.prompts-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 24px;
}

.prompt-item-card {
  display: flex;
  flex-direction: column;
  background: rgba(13, 13, 18, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 24px;
  backdrop-filter: blur(12px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.prompt-item-card:hover {
  transform: translateY(-3px);
  border-color: rgba(143, 216, 248, 0.35);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.card-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.card-cat-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #8FD8F8;
}

.card-id-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
}

.card-title {
  font-family: var(--font-title);
  font-size: 1.2rem;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 8px;
  line-height: 1.25;
}

.card-desc {
  font-size: 13.5px;
  color: rgba(247, 247, 242, 0.65);
  line-height: 1.5;
  margin-bottom: 16px;
}

.card-code-block {
  background: #0A0A0E;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 16px;
  flex: 1;
}

.card-code-block pre {
  margin: 0;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.55;
  color: #CBD5E1;
  white-space: pre-wrap;
  word-break: break-word;
}

.card-footer-actions {
  display: flex;
  justify-content: flex-end;
}

.card-copy-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  padding: 8px 14px;
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.2s ease;
}

.card-copy-btn:hover {
  background: rgba(143, 216, 248, 0.12);
  border-color: #8FD8F8;
  color: #8FD8F8;
}

/* ==========================================================================
   RESOURCES ARCHIVE & HERO BRAND SVG LOGO SYSTEM
   ========================================================================== */

/* Blurred Background Thumbnail Image */
.card-media-img.is-blurred-bg {
  filter: blur(14px) brightness(0.55) contrast(1.1) !important;
  transform: scale(1.14) !important;
  transition: filter 0.4s ease, transform 0.4s ease !important;
}

.resource-card-item:hover .card-media-img.is-blurred-bg {
  filter: blur(8px) brightness(0.7) contrast(1.15) !important;
  transform: scale(1.18) !important;
}

/* Brand Logo Centered Overlay on Thumbnail */
.card-brand-logo-overlay {
  position: absolute;
  top: 44px;
  bottom: 84px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  padding: 12px 32px;
  pointer-events: none;
}

.card-brand-overlay-img {
  max-width: 88%;
  max-height: 135px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.85));
  transition: transform 0.35s var(--ease-out-expo, ease), filter 0.35s ease;
}

.resource-card-item:hover .card-brand-overlay-img {
  max-width: 88%;
  max-height: 135px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.85));
  transition: transform 0.35s var(--ease-out-expo, ease), filter 0.35s ease;
}

/* Hero Section Brand Logo Badge */
.detail-hero-brand-logo-wrap {
  margin-bottom: 22px;
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 12px 24px;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.detail-hero-brand-logo {
  max-height: 44px;
  max-width: 260px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6));
}

/* ==========================================================================
   TOP-RIGHT HERO BRAND LOGO SYSTEM
   ========================================================================== */
.detail-hero-nav-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin-bottom: 24px !important;
  gap: 20px !important;
}

.detail-hero-brand-logo-topright {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

.hero-topright-brand-logo {
  max-height: 52px !important;
  max-width: 260px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.75)) !important;
  transition: transform 0.3s ease, filter 0.3s ease !important;
}

.hero-topright-brand-logo:hover {
  transform: scale(1.05) !important;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.9)) !important;
}


/* ==========================================================================
   UNIVERSAL RESOURCE CONTENT LOCKED & BLURRED TEASER STATE
   ========================================================================== */
.guide-doc-content-area {
  position: relative !important;
  width: 100% !important;
  display: block !important;
}

/* 2-Column documentation layout specific flex */
.guide-doc-container > .guide-doc-content-area {
  display: flex !important;
  flex-direction: column !important;
  gap: 40px !important;
}

/* Blur all content elements when locked */
.guide-doc-content-area.is-locked-content > *:not(.guide-content-lock-banner),
.guide-doc-content-area.is-locked-content .guide-module-block,
.guide-doc-content-area.is-locked-content .prompts-slider-wrapper,
.guide-doc-content-area.is-locked-content .detail-guide-masterclass-section,
.guide-doc-content-area.is-locked-content .customizer-workspace-grid,
.guide-doc-content-area.is-locked-content .prompts-gallery-header-wrap,
.guide-doc-content-area.is-locked-content .detail-prompts-gallery-section,
.guide-doc-content-area.is-locked-content .seedance-multimodal-section,
.guide-doc-content-area.is-locked-content .seedance-clay-section,
.guide-doc-content-area.is-locked-content .detail-method-timeline-stepper,
.guide-doc-content-area.is-locked-content .seedance-grammar-section {
  filter: blur(14px) saturate(40%) brightness(0.6) !important;
  -webkit-filter: blur(14px) saturate(40%) brightness(0.6) !important;
  user-select: none !important;
  pointer-events: none !important;
  opacity: 0.45 !important;
  transition: filter 0.4s ease, opacity 0.4s ease;
}

/* Floating Sticky VIP Unlock Teaser Banner in the Content Area */
.guide-content-lock-banner {
  display: none !important;
}

.guide-doc-content-area.is-locked-content .guide-content-lock-banner {
  display: flex !important;
  position: sticky !important;
  top: 110px !important;
  z-index: 120 !important;
  width: 92% !important;
  max-width: 680px !important;
  margin: 30px auto !important;
  background: linear-gradient(180deg, rgba(16, 16, 22, 0.96) 0%, rgba(9, 9, 13, 0.98) 100%) !important;
  backdrop-filter: blur(32px) saturate(210%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(210%) !important;
  border: 1px solid rgba(143, 216, 248, 0.3) !important;
  border-radius: 28px !important;
  padding: 40px 36px 36px 36px !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 20px !important;
  box-shadow: 0 32px 100px rgba(0, 0, 0, 0.95), 0 0 60px rgba(143, 216, 248, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  pointer-events: auto !important;
  animation: cardElevate 0.6s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

.guide-lock-badge-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.guide-lock-brand-logo {
  height: 22px;
  width: auto;
  opacity: 0.9;
}

.guide-lock-tagline {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: #9BE7C4;
  text-transform: uppercase;
}

.guide-lock-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.guide-lock-banner-title {
  font-family: var(--font-title);
  font-size: 1.65rem;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.25;
  margin: 0;
  text-align: center;
}

.guide-lock-banner-title .detail-serif-accent {
  display: block !important;
  width: 100% !important;
  font-family: var(--font-accent) !important;
  font-style: italic !important;
  font-weight: 300 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  background: none !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
  text-shadow: none !important;
  margin-top: 6px !important;
  text-transform: lowercase !important;
}

.guide-lock-banner-desc {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(247, 247, 242, 0.7);
  margin: 0;
  max-width: 580px;
}

.guide-lock-feature-chips {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 4px 0;
}

.lock-chip-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);
}

.guide-lock-action-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.guide-lock-unlock-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #9BE7C4;
  color: #0A0A0E;
  border: none;
  border-radius: 12px;
  padding: 14px 28px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  cursor: pointer;
  width: 100%;
  max-width: 440px;
  transition: all 0.25s ease;
  box-shadow: 0 10px 30px rgba(155, 231, 196, 0.25);
}

.guide-lock-unlock-btn:hover {
  background: #B4F5D7;
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(155, 231, 196, 0.4);
}

.guide-lock-guarantee-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.45);
}


/* ==========================================================================
   SEEDANCE SECTION PADDINGS & MARGINS
   ========================================================================== */
.detail-method-timeline-stepper {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.seedance-multimodal-section {
  width: 100% !important;
  max-width: 100% !important;
  margin: 40px 0 60px 0 !important;
  padding: 0 clamp(24px, 4vw, 56px) !important;
  box-sizing: border-box !important;
}

.seedance-clay-section {
  width: 100% !important;
  max-width: 1560px !important;
  margin: 40px auto 60px auto !important;
  padding: 0 clamp(20px, 4vw, 56px) !important;
  box-sizing: border-box !important;
}

.detail-prompts-gallery-section {
  width: 100% !important;
  max-width: 1560px !important;
  margin: 40px auto 60px auto !important;
  padding: 0 clamp(20px, 4vw, 56px) !important;
  box-sizing: border-box !important;
}

.seedance-grammar-section {
  width: 100% !important;
  max-width: 1560px !important;
  margin: 40px auto 60px auto !important;
  padding: 0 clamp(20px, 4vw, 56px) !important;
  box-sizing: border-box !important;
}

.detail-gallery-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

#seedanceGridContainer {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}

#seedanceGridContainer .editorial-accordion-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 20px 32px !important;
  align-items: start !important;
  width: 100% !important;
  border-top: none !important;
  border-bottom: none !important;
  margin-top: 0 !important;
}

#seedanceGridContainer .accordion-prompt-row {
  background: rgba(16, 16, 22, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  padding: 0 24px !important;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

#seedanceGridContainer .accordion-prompt-row:hover {
  background: rgba(22, 22, 30, 0.85) !important;
  border-color: rgba(143, 216, 248, 0.25) !important;
}

#seedanceGridContainer .accordion-prompt-row.is-expanded {
  background: rgba(14, 15, 20, 0.96) !important;
  border-color: rgba(155, 231, 196, 0.35) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7) !important;
}

@media (max-width: 960px) {
  #seedanceGridContainer .editorial-accordion-list {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* ==========================================================================
   FULL-WIDTH PROMPT CARDS & STICKY FILTER BAR
   ========================================================================== */
.detail-sticky-nav-bar {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 32px 0 !important;
  padding: 10px clamp(20px, 4vw, 56px) 18px clamp(20px, 4vw, 56px) !important;
  background: rgba(8, 8, 12, 0.94) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
  box-sizing: border-box !important;
}

.detail-sticky-nav-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: 1560px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.detail-cluster-pills-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.detail-cluster-pills-wrap::-webkit-scrollbar {
  display: none !important;
}

.detail-cluster-pills-wrap .cluster-pill-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 38px !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.detail-cluster-pills-wrap .cluster-pill-btn span {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.detail-cluster-pills-wrap .cluster-pill-btn .pill-icon-svg {
  display: inline-block !important;
  vertical-align: middle !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

.detail-prompt-search-wrap {
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  min-width: 280px !important;
  width: 380px !important;
  max-width: 440px !important;
  flex-shrink: 0 !important;
  height: 38px !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

.detail-prompt-search-wrap .search-mini-icon {
  display: inline-block !important;
  vertical-align: middle !important;
  margin: 0 8px 0 0 !important;
  flex-shrink: 0 !important;
}

.detail-prompt-search-wrap .prompt-search-input {
  height: 100% !important;
  line-height: normal !important;
  display: flex !important;
  align-items: center !important;
}

.editorial-accordion-list {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  margin-top: 16px !important;
}

.accordion-prompt-row {
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: background 0.2s ease !important;
  width: 100% !important;
}

.accordion-prompt-row:last-child {
  border-bottom: none !important;
}

.accordion-prompt-row:hover {
  background: rgba(255, 255, 255, 0.015) !important;
}

/* Title-Only Collapsed Header Bar */
.accordion-row-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 24px 0 !important;
  cursor: pointer !important;
  gap: 20px !important;
  user-select: none !important;
  width: 100% !important;
}

.row-title {
  font-family: var(--font-body) !important;
  font-size: 1.15rem !important;
  font-weight: 500 !important;
  color: #FFFFFF !important;
  margin: 0 !important;
  letter-spacing: -0.01em !important;
  flex: 1 !important;
}

.row-accordion-toggle-btn {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  width: 28px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(255, 255, 255, 0.5) !important;
  cursor: pointer !important;
  transition: transform 0.25s ease, color 0.25s ease !important;
  flex-shrink: 0 !important;
}

.accordion-prompt-row:hover .row-accordion-toggle-btn {
  color: #9BE7C4 !important;
}

.accordion-prompt-row.is-expanded .row-accordion-toggle-btn {
  color: #9BE7C4 !important;
  transform: rotate(45deg) !important;
}

/* Expanded Content Body */
.accordion-row-body {
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease !important;
  opacity: 0 !important;
}

.accordion-prompt-row.is-expanded .accordion-row-body {
  max-height: 800px !important;
  opacity: 1 !important;
}

.accordion-body-inner {
  padding: 0 0 28px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.row-desc {
  font-family: var(--font-body) !important;
  font-size: 13.5px !important;
  line-height: 1.65 !important;
  color: rgba(247, 247, 242, 0.65) !important;
  margin: 0 !important;
}

.row-meta-bar {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  flex-wrap: wrap !important;
}

.meta-pill {
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  color: rgba(255, 255, 255, 0.45) !important;
  letter-spacing: 0.06em !important;
}

/* Integrated Naked Monospace Code Block */
.row-code-container {
  background: #07070A !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  margin-top: 4px !important;
}

.row-code-topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 16px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.code-lang-label {
  font-family: var(--font-mono) !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  color: rgba(255, 255, 255, 0.35) !important;
}

.row-inline-copy-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  cursor: pointer !important;
  transition: color 0.2s ease !important;
}

.row-inline-copy-btn:hover {
  color: #9BE7C4 !important;
}

.row-inline-copy-btn.copied {
  color: #9BE7C4 !important;
}

.row-code-text {
  margin: 0 !important;
  padding: 18px 20px !important;
  font-family: var(--font-body) !important;
  font-size: 12.5px !important;
  line-height: 1.65 !important;
  color: #E2E8F0 !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
}

/* ==========================================================================
   SUBHERO: GLOBAL CLIENTS & TRUST SECTION
   ========================================================================== */
/* ==========================================================================
   SUBHERO: GLOBAL CLIENTS & TRUST SECTION (50VH & ULTRA-SMOOTH SLOW MARQUEE)
   ========================================================================== */
.home-subhero-clients-section {
  width: 100%;
  max-width: 100%;
  padding: clamp(32px, 4vh, 48px) 0;
  box-sizing: border-box;
  background: #060608;
  position: relative;
  z-index: 10;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.home-subhero-clients-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.subhero-clients-container {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.subhero-clients-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}

.subhero-header-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #9BE7C4;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}

.subhero-main-title {
  font-family: var(--font-title);
  font-size: clamp(1.2rem, 1.8vw, 1.65rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #FFFFFF;
  line-height: 1.25;
  margin: 0;
  text-align: center;
  width: 100%;
  max-width: 100%;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.25s, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;
}

.subhero-main-title .detail-serif-accent {
  font-family: var(--font-accent) !important;
  font-style: italic !important;
  font-weight: 300 !important;
  background: linear-gradient(135deg, #8FD8F8 0%, #9BE7C4 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  margin-left: 8px;
  text-transform: lowercase;
  display: inline-block;
  white-space: nowrap;
}

.subhero-main-desc {
  font-family: var(--font-body);
  font-size: clamp(13.5px, 0.95vw, 15px);
  line-height: 1.6;
  color: rgba(247, 247, 242, 0.68);
  margin: 0 auto;
  max-width: 980px;
  text-align: center;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.35s, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.35s;
}

.home-subhero-clients-section.is-visible .subhero-header-tag,
.home-subhero-clients-section.is-visible .subhero-main-title,
.home-subhero-clients-section.is-visible .subhero-main-desc {
  opacity: 1;
  transform: translateY(0);
}

/* Continuous Minimalist Floating Logo Marquee Slider (Pure Swiss Luxury) */
.subhero-marquee-viewport {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  display: flex;
  flex-direction: column;
  gap: 28px !important;
  overflow: hidden;
  position: relative;
  padding: 10px 0;
  mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
  opacity: 0;
  transform: translateY(20px) scale(0.99);
  filter: blur(8px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.45s, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.45s, filter 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.45s;
}

.home-subhero-clients-section.is-visible .subhero-marquee-viewport {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.subhero-marquee-track {
  display: flex;
  width: max-content;
  user-select: none;
}

.subhero-marquee-track.marquee-scroll-left {
  animation: subheroMarqueeLeft 75s linear infinite;
}

.subhero-marquee-track.marquee-scroll-right {
  animation: subheroMarqueeRight 75s linear infinite;
}

.subhero-marquee-viewport:hover .subhero-marquee-track {
  animation-play-state: paused;
}

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

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

.subhero-marquee-group {
  display: flex;
  align-items: center;
  gap: clamp(48px, 5.5vw, 84px) !important;
  padding-right: clamp(48px, 5.5vw, 84px) !important;
  flex-shrink: 0;
}

.subhero-logo-slide {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-sizing: border-box;
  padding: 0 !important;
  margin: 0 !important;
}

.subhero-logo-slide .subhero-client-logo {
  height: clamp(40px, 3.5vw, 54px) !important;
  max-height: 54px !important;
  max-width: 170px !important;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.45;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s ease;
  user-select: none;
}

.subhero-logo-slide:hover .subhero-client-logo {
  opacity: 1;
  transform: scale(1.12);
  filter: brightness(0) invert(1) drop-shadow(0 0 20px rgba(255, 255, 255, 0.35));
}

@media (max-width: 900px) {
  .home-subhero-clients-section {
    min-height: auto;
    padding: 24px 0;
  }
  
  .subhero-marquee-viewport {
    gap: 20px !important;
  }
  
  .subhero-marquee-group {
    gap: 36px !important;
    padding-right: 36px !important;
  }
  
  .subhero-logo-slide .subhero-client-logo {
    height: 38px !important;
    max-height: 38px !important;
    max-width: 130px !important;
  }
}

/* ==========================================================================
   SECTION: POUR QUI EST CETTE FORMATION (CENTERED HEADER + HOVER-BLUR CARD SLIDER)
   ========================================================================== */
.home-audience-target-section {
  width: 100%;
  max-width: 100%;
  padding: clamp(64px, 8vh, 100px) 0;
  box-sizing: border-box;
  background: #080A0F;
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.audience-section-container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

/* 2-Column Asymmetric Header Grid */
.audience-showcase-header-grid {
  display: grid;
  grid-template-columns: minmax(360px, max-content) 1fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: flex-start;
  width: 100%;
  max-width: 1540px;
  margin: 0 auto clamp(36px, 5vh, 56px) auto;
  padding: 0 clamp(24px, 5vw, 80px);
  box-sizing: border-box;
}

@media (max-width: 1100px) {
  .audience-showcase-header-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: flex-start;
  }
}

.audience-header-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  width: 100%;
}

.audience-showcase-title {
  font-family: var(--font-title);
  font-size: clamp(20px, 1.6vw, 26px);
  font-weight: 550;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: #FFFFFF;
  margin: 0;
  text-align: left;
  max-width: 100%;
}

.audience-showcase-title .title-serif-accent {
  font-family: var(--font-serif-accent);
  font-style: italic;
  font-weight: 300;
  background: linear-gradient(90deg, #8FD8F8 0%, #9BE7C4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  display: inline;
  margin-left: 4px;
}

.audience-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  gap: 16px;
  max-width: 860px;
  width: 100%;
}

.audience-showcase-sub {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.15vw, 17px);
  font-weight: 400;
  line-height: 1.68;
  color: rgba(247, 247, 242, 0.72);
  margin: 0;
  text-align: left;
}

.audience-header-actions-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  width: 100%;
}

/* Luxury Overline Badge (Bigger with No Background) */
.audience-interactive-pill {
  cursor: default !important;
  pointer-events: auto;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  gap: clamp(14px, 1.6vw, 22px) !important;
  align-items: center;
}

.audience-interactive-pill:hover {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.audience-interactive-pill .resources-cta-icon-box {
  width: clamp(48px, 4vw, 60px);
  height: clamp(48px, 4vw, 60px);
  min-width: clamp(48px, 4vw, 60px);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
}

.audience-badge-text-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 4px;
}

.audience-badge-title-txt {
  font-family: var(--font-title);
  font-size: clamp(26px, 2.4vw, 40px);
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.audience-badge-title-txt .badge-accent-serif {
  font-size: clamp(28px, 2.6vw, 44px);
}

.badge-title-nowrap {
  white-space: nowrap;
  display: inline-block;
}

.audience-badge-sub-txt {
  font-family: var(--font-body);
  font-size: clamp(12px, 0.95vw, 14px);
  font-weight: 600;
  color: rgba(247, 247, 242, 0.65);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.audience-badge-sub-txt .badge-sub-accent {
  font-size: clamp(13px, 1vw, 15px);
}

/* Shared Badge Pill Typography & Accent Serif System */
.badge-accent-serif {
  font-family: var(--font-serif-accent);
  font-style: italic;
  font-weight: 300;
  background: linear-gradient(90deg, #8FD8F8 0%, #9BE7C4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  display: inline-block;
  margin-left: 2px;
}

.badge-sub-accent {
  font-family: var(--font-serif-accent);
  font-style: italic;
  font-weight: 400;
  font-size: 11.5px;
  text-transform: lowercase;
  letter-spacing: 0.01em;
  background: linear-gradient(90deg, #8FD8F8 0%, #9BE7C4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  display: inline-block;
  margin-left: 2px;
}

/* Slider Navigation Controls */
.audience-slider-controls {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.audience-arrow-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.audience-arrow-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-2px);
  color: #9BE7C4;
}

.audience-slider-indicator {
  width: 50px;
  height: 2px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 0 10px rgba(155, 231, 196, 0.2);
}

.audience-slider-indicator .indicator-bar {
  display: block;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, #8FD8F8, #9BE7C4);
  border-radius: 2px;
  animation: indicatorGlider 1.3s infinite ease-in-out alternate;
  box-shadow: 0 0 8px #9BE7C4;
}

@keyframes indicatorGlider {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(150%); }
}

/* Slider Wrapper */
.audience-slider-wrapper {
  width: 100%;
  max-width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
}

.audience-arrow-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #F7F7F2;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.audience-arrow-btn svg {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.audience-arrow-btn:hover {
  background: rgba(155, 231, 196, 0.18);
  border-color: rgba(155, 231, 196, 0.6);
  color: #9BE7C4;
  transform: scale(1.1);
  box-shadow: 0 0 24px rgba(155, 231, 196, 0.35);
}

.audience-arrow-btn.prev:hover svg {
  transform: translateX(-3px);
}

.audience-arrow-btn.next:hover svg {
  transform: translateX(3px);
}

.audience-arrow-btn:active {
  transform: scale(0.94);
}

/* Cards Viewport & Track */
.audience-cards-viewport {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  cursor: grab;
  padding: 16px clamp(24px, 5vw, 60px) 28px clamp(24px, 5vw, 60px);
  box-sizing: border-box;
}

.audience-cards-viewport::-webkit-scrollbar {
  display: none;
}

.audience-cards-viewport:active {
  cursor: grabbing;
}

.audience-cards-track {
  display: flex;
  gap: 24px;
  width: max-content;
  padding: 0;
  will-change: transform;
}

/* Static 3-Card Grid for Formation Pages (No Auto-Slide, No Arrows) */
.audience-static-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 32px);
  width: 100%;
  padding: 0 clamp(24px, 5vw, 60px);
  box-sizing: border-box;
}

.audience-static-grid .audience-profile-card {
  flex: none;
  width: 100%;
  height: clamp(420px, 50vh, 480px);
}

@media (max-width: 960px) {
  .audience-static-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .audience-static-grid .audience-profile-card {
    height: 400px;
  }
}

/* Profile Card */
.audience-profile-card {
  flex: 0 0 clamp(300px, 24vw, 360px);
  height: clamp(380px, 46vh, 430px);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #0E121B;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px 24px;
  box-sizing: border-box;
  cursor: pointer;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 0.4s ease, 
              box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Card Background Thumbnail Layer */
.profile-card-bg-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
}

.profile-card-thumbnail {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), 
              filter 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, filter;
}

.art-bg-1 { 
  background: url('assets/images/audience/audience-creatifs-da.jpg') no-repeat center 65% / cover; 
}
.art-bg-2 { 
  background: url('assets/images/audience/audience-freelance-creator.jpg') no-repeat center 60% / cover; 
}
.art-bg-3 { 
  background: url('assets/images/audience/audience-studios-agences.jpg') no-repeat center 75% / cover; 
}
.art-bg-4 { 
  background: url('assets/images/audience/audience-marketing-com.jpg') no-repeat center 65% / cover; 
}
.art-bg-5 { 
  background: url('assets/images/audience/audience-marques-annonceurs.jpg') no-repeat center 60% / cover; 
}
.art-bg-6 { 
  background: url('assets/images/audience/audience-curieux-ia.jpg') no-repeat center 60% / cover; 
}

.art-bg-commercial-1 { 
  background: url('assets/images/audience/audience-commerciaux-agences.jpg') no-repeat center 65% / cover; 
}
.art-bg-commercial-2 { 
  background: url('assets/images/audience/audience-chefs-de-projet.jpg') no-repeat center 65% / cover; 
}
.art-bg-commercial-3 { 
  background: url('assets/images/audience/audience-dirigeants-qui-vendent.jpg') no-repeat center 65% / cover; 
}

.art-bg-creative-1 { 
  background: url('assets/images/audience/audience-studios-agences.jpg') no-repeat center 75% / cover; 
}
.art-bg-creative-2 { 
  background: url('assets/images/audience/audience-marketing-com.jpg') no-repeat center 65% / cover; 
}
.art-bg-creative-3 { 
  background: url('assets/images/audience/audience-creatifs-da.jpg') no-repeat center 65% / cover; 
}

.thumbnail-art-gradient {
  display: none;
}

/* Seamless Vignette + Blur Fade Overlay - Edge to Edge, Perfect Fit to Card Bottom */
.profile-card-overlay {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: linear-gradient(
    180deg, 
    rgba(0, 0, 0, 0) 0%, 
    rgba(0, 0, 0, 0) 50%, 
    rgba(8, 10, 15, 0.2) 65%, 
    rgba(8, 10, 15, 0.7) 82%,
    rgba(8, 10, 15, 0.95) 100%
  );
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  mask-image: linear-gradient(
    to bottom, 
    transparent 0%, 
    transparent 62%, 
    rgba(0, 0, 0, 0.4) 78%, 
    black 90%, 
    black 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom, 
    transparent 0%, 
    transparent 62%, 
    rgba(0, 0, 0, 0.4) 78%, 
    black 90%, 
    black 100%
  );
  transition: background 0.45s ease, backdrop-filter 0.45s ease;
  z-index: 2;
  pointer-events: none;
}

/* Card Content Layer */
.profile-card-content {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  pointer-events: none;
}

.profile-card-top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}

.profile-card-num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.08em;
  background: rgba(8, 10, 15, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 4px 10px;
  border-radius: 999px;
}

.profile-card-body {
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: gap 0.4s ease;
}

.profile-card-title {
  font-family: var(--font-title);
  font-size: clamp(1.45rem, 1.8vw, 1.75rem);
  font-weight: 500;
  color: #FFFFFF;
  line-height: 1.18;
  margin: 0;
  letter-spacing: -0.015em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
  transition: color 0.35s ease, transform 0.4s ease;
}

.profile-card-title .card-accent-serif {
  font-family: var(--font-accent) !important;
  font-style: italic !important;
  font-weight: 300 !important;
  text-transform: lowercase !important;
  background: linear-gradient(135deg, #8FD8F8 0%, #9BE7C4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline;
}

/* Hover Reveal Component: Hidden by default, only Heading visible */
.profile-card-hover-reveal {
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.profile-card-desc {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(247, 247, 242, 0.95);
  margin: 0;
  padding-top: 8px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

.profile-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  color: #080A0F;
  background: #9BE7C4;
  border: 1px solid #9BE7C4;
  border-radius: 999px;
  padding: 6px 14px;
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;
  margin-top: 6px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 14px rgba(155, 231, 196, 0.3);
}

.profile-card-cta:hover {
  background: #B8F2D8;
  border-color: #B8F2D8;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(155, 231, 196, 0.55);
  color: #080A0F;
}

.profile-card-cta svg {
  transition: transform 0.3s ease;
}

.profile-card-cta:hover svg {
  transform: translateX(3px);
}

/* Card Hover Interactions */
.audience-profile-card:hover {
  transform: translateY(-8px);
  border-color: rgba(155, 231, 196, 0.45);
  box-shadow: 0 28px 65px rgba(0, 0, 0, 0.9), 0 0 35px rgba(155, 231, 196, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Hover: Keep photo clear and sharp, subtle scale only */
.audience-profile-card:hover .profile-card-thumbnail {
  transform: scale(1.05);
  filter: brightness(1.02) contrast(1.03);
}

.audience-profile-card:hover .profile-card-overlay {
  background: linear-gradient(
    180deg, 
    rgba(0, 0, 0, 0) 0%, 
    rgba(0, 0, 0, 0) 25%, 
    rgba(8, 10, 15, 0.25) 45%, 
    rgba(8, 10, 15, 0.72) 70%,
    rgba(8, 10, 15, 0.94) 100%
  );
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  mask-image: linear-gradient(
    to bottom, 
    transparent 0%, 
    transparent 28%, 
    rgba(0, 0, 0, 0.4) 48%, 
    black 70%, 
    black 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom, 
    transparent 0%, 
    transparent 28%, 
    rgba(0, 0, 0, 0.4) 48%, 
    black 70%, 
    black 100%
  );
}

.audience-profile-card:hover .profile-card-body {
  gap: 12px;
}

.audience-profile-card:hover .profile-card-hover-reveal {
  opacity: 1;
  max-height: 200px;
  transform: translateY(0);
  pointer-events: auto;
}

.audience-profile-card:hover .profile-card-title {
  color: #B8F2D8;
}

/* Bottom Note Strip */
.audience-bottom-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 12px;
  padding: 14px 26px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.audience-note-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.15em;
  color: #9BE7C4;
  background: rgba(155, 231, 196, 0.12);
  border: 1px solid rgba(155, 231, 196, 0.3);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.audience-note-text {
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(247, 247, 242, 0.7);
  margin: 0;
}

.audience-note-text em {
  font-family: var(--font-accent);
  font-style: italic;
  color: #FFFFFF;
}

@media (max-width: 768px) {
  .audience-bottom-note {
    flex-direction: column;
    border-radius: 16px;
    text-align: center;
    gap: 8px;
  }
}

/* ==========================================================================
   SECTION: LE VRAI PROBLÈME & L'ANGLE PROPRIÉTAIRE (STICKY COLUMN + SCROLL CARDS)
   ========================================================================== */
.home-problem-angle-section {
  width: 100%;
  max-width: 100%;
  min-height: auto;
  padding: clamp(36px, 4.5vh, 60px) clamp(24px, 5vw, 72px);
  box-sizing: border-box;
  background: #060608;
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.problem-angle-container {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(48px, 6.5vw, 110px);
  max-width: 1560px;
  width: 100%;
  margin: 0 auto;
  align-items: center;
}

/* Left Column: Vertically Centered Anchor */
.problem-left-sticky-col {
  position: relative;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.problem-sticky-inner {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 580px;
}

.problem-tag-mono {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #9BE7C4;
  text-transform: uppercase;
}

.problem-main-headline {
  font-family: var(--font-title);
  font-size: clamp(1.65rem, 2.15vw, 2.35rem);
  font-weight: 900;
  line-height: 1.22;
  color: #FFFFFF;
  letter-spacing: -0.02em;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.headline-line-1 {
  display: block;
}

.headline-line-2 {
  display: block;
}

.problem-main-headline .detail-serif-accent {
  font-family: var(--font-accent) !important;
  font-style: italic !important;
  font-weight: 300 !important;
  background: linear-gradient(135deg, #8FD8F8 0%, #9BE7C4 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  margin-left: 6px;
  text-transform: lowercase;
  display: inline-block;
  min-width: 8px;
}

.problem-main-headline .typewriter-cursor {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 300;
  color: #9BE7C4;
  margin-left: 2px;
  display: inline-block;
  vertical-align: baseline;
  animation: cursorBlink 0.85s infinite;
}

.problem-lead-desc {
  font-family: var(--font-body);
  font-size: clamp(15.5px, 1.15vw, 17.5px);
  line-height: 1.7;
  color: rgba(247, 247, 242, 0.72);
  margin: 0;
}

/* Sticky Action CTAs */
.problem-sticky-ctas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}

.btn-problem-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.btn-problem-primary {
  background: #9BE7C4;
  color: #0A0B0E;
  border: 1px solid #9BE7C4;
  box-shadow: 0 4px 18px rgba(155, 231, 196, 0.25);
}

.btn-problem-primary:hover {
  background: #B4F0D6;
  border-color: #B4F0D6;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(155, 231, 196, 0.4);
  color: #0A0B0E;
}

.btn-problem-secondary {
  background: rgba(255, 255, 255, 0.05);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
}

.btn-problem-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
  color: #FFFFFF;
}

/* Editorial Anchor Scroll Entrance Stagger */
.problem-tag-mono,
.problem-main-headline,
.problem-lead-desc,
.problem-sticky-ctas {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.home-problem-angle-section.is-visible .problem-tag-mono {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.04s;
}

.home-problem-angle-section.is-visible .problem-main-headline {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.16s;
}

.home-problem-angle-section.is-visible .problem-lead-desc {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.30s;
}

.home-problem-angle-section.is-visible .problem-sticky-ctas {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.44s;
}

/* Right Column: Vertical Centered Slider Stage */
.problem-right-cards-col {
  position: relative;
  top: 0;
  height: clamp(480px, 58vh, 560px);
  overflow: hidden;
  border-radius: 20px;
  padding: 0 40px 0 0;
  box-sizing: border-box;
  touch-action: pan-x;
}

/* Cinematic Vignette Shadows at Top & Bottom */
.problem-slider-vignette {
  position: absolute;
  left: 0;
  right: 0;
  height: 50px;
  pointer-events: none;
  z-index: 20;
}

.problem-slider-vignette.vignette-top {
  top: 0;
  background: linear-gradient(to bottom, rgba(6, 6, 8, 0.8) 0%, transparent 100%);
}

.problem-slider-vignette.vignette-bottom {
  bottom: 0;
  background: linear-gradient(to top, rgba(6, 6, 8, 0.8) 0%, transparent 100%);
}

/* Sliding Cards Track */
.problem-cards-track {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% - 40px);
  display: flex;
  flex-direction: column;
  gap: 28px;
  z-index: 10;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.problem-scroll-card {
  width: 100%;
  box-sizing: border-box;
  min-height: 200px;
  padding: clamp(28px, 3.2vw, 38px) clamp(30px, 3.5vw, 42px);
  background: rgba(14, 16, 22, 0.7);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  margin: 0;
  overflow: hidden;
  opacity: 0.58;
  filter: blur(2px);
  transform: scale(0.96);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), 
              filter 0.55s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 0.4s ease, 
              box-shadow 0.4s ease, 
              background 0.4s ease;
  will-change: opacity, filter, transform;
  cursor: pointer;
}

/* Active / Centered Card */
.problem-scroll-card.is-active {
  opacity: 1 !important;
  filter: blur(0px) !important;
  transform: scale(1) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 100%), #0D1017 !important;
  border: 1px solid rgba(155, 231, 196, 0.42) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.9), 0 0 35px rgba(155, 231, 196, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  z-index: 15;
}

.problem-scroll-card .scroll-card-desc {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(247, 247, 242, 0.6);
  margin: 0;
  transition: color 0.3s ease;
}

.problem-scroll-card.is-active .scroll-card-desc {
  color: rgba(247, 247, 242, 0.92) !important;
}

/* Vertical Slider Indicator Dots & Arrow Nav */
.problem-slider-nav {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  z-index: 25;
}

.slider-dots-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.slider-nav-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.slider-nav-dot:hover {
  background: rgba(255, 255, 255, 0.6);
  transform: scale(1.3);
}

.slider-nav-dot.is-active {
  height: 22px;
  background: linear-gradient(180deg, #8FD8F8 0%, #9BE7C4 100%);
  box-shadow: 0 0 12px rgba(155, 231, 196, 0.5);
}

.slider-arrow-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #F7F7F2;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.slider-arrow-btn svg {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.slider-arrow-btn:hover {
  background: rgba(155, 231, 196, 0.18);
  border-color: rgba(155, 231, 196, 0.6);
  color: #9BE7C4;
  transform: scale(1.12);
  box-shadow: 0 0 24px rgba(155, 231, 196, 0.35);
}

.slider-arrow-btn.slider-arrow-prev:hover svg {
  transform: translateY(-3px);
}

.slider-arrow-btn.slider-arrow-next:hover svg {
  transform: translateY(3px);
}

.slider-arrow-btn:active {
  transform: scale(0.94);
}

.slider-arrow-btn.is-disabled {
  opacity: 0.22;
  cursor: not-allowed;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0.05);
  box-shadow: none;
}

.card-inner-grid {
  display: grid;
  grid-template-columns: 1fr 180px;
  gap: clamp(24px, 3vw, 40px);
  align-items: center;
}

.card-content-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.scroll-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}

.scroll-card-num-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
  color: #9BE7C4;
  background: transparent;
  border: none;
  padding: 0;
  letter-spacing: 0.1em;
}

.scroll-card-num-badge::after {
  content: " /";
  color: rgba(255, 255, 255, 0.25);
  margin-left: 6px;
  font-weight: 400;
}

.scroll-card-tag {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.scroll-card-title {
  font-family: var(--font-accent) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(1.6rem, 2.3vw, 2.15rem);
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, #8FD8F8 0%, #9BE7C4 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  display: inline-block;
}

.scroll-card-desc {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(247, 247, 242, 0.72);
  margin: 0;
}

.card-meta-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.card-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  color: rgba(247, 247, 242, 0.75);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 5px 14px;
  letter-spacing: 0.01em;
  transition: all 0.25s ease;
}

.problem-scroll-card:hover .card-chip {
  border-color: rgba(255, 255, 255, 0.28);
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.08);
}

.card-visual-side {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.card-media-frame.card-visual-organic {
  position: relative;
  width: 100%;
  height: 140px;
  max-width: 170px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s ease;
}

.problem-scroll-card:hover .card-media-frame.card-visual-organic {
  border-color: rgba(255, 255, 255, 0.2);
}

.card-visual-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.04) 0%, transparent 70%);
}

.placeholder-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.35);
}

.card-media-frame.lottie-card-frame {
  background: transparent !important;
  border: none !important;
  overflow: visible !important;
}

.lottie-anim-box {
  width: 130px;
  height: 130px;
  max-width: 130px;
  max-height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  overflow: visible !important;
  transform: none !important;
}

.lottie-anim-box svg {
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
  display: block;
}

@media (max-width: 1024px) {
  .home-problem-angle-section {
    padding: 80px 24px 100px 24px;
    min-height: auto;
  }
  
  .problem-angle-container {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  
  .problem-left-sticky-col {
    position: relative;
    top: 0;
  }

  .problem-right-cards-col {
    position: relative;
    top: 0;
    height: 520px;
    padding: 0 32px 0 0;
  }

  .problem-portfolio-faded-strip {
    width: calc(100% + 48px);
    margin-left: -24px;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
  }
  
  .problem-scroll-card {
    padding: 24px 20px;
  }
}

@media (max-width: 768px) {
  .card-inner-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .card-media-frame {
    height: 150px;
  }
}

/* ==========================================================================
   HERO IMMERSIVE VIDEO SECTION (MODERN CINEMA 3D ARCHITECTURE)
   ========================================================================== */
.hero-immersive-section {
  position: relative;
  width: 100%;
  min-height: calc(100vh - var(--header-height, 72px));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  background: #060608;
  box-sizing: border-box;
  --mouse-x: 50%;
  --mouse-y: 45%;
}

/* Fullscreen Backdrop Video */
.hero-video-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

.hero-bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Frosted Blur Layer - Optimized GPU-Isolated Cursor Mask */
.hero-blur-overlay {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(18px) brightness(0.7) saturate(120%);
  -webkit-backdrop-filter: blur(18px) brightness(0.7) saturate(120%);
  -webkit-mask-image: radial-gradient(
    circle 380px at var(--mx, 50%) var(--my, 45%),
    transparent 0%,
    transparent 25%,
    rgba(0, 0, 0, 0.4) 60%,
    rgba(0, 0, 0, 0.85) 82%,
    #000000 100%
  );
  mask-image: radial-gradient(
    circle 380px at var(--mx, 50%) var(--my, 45%),
    transparent 0%,
    transparent 25%,
    rgba(0, 0, 0, 0.4) 60%,
    rgba(0, 0, 0, 0.85) 82%,
    #000000 100%
  );
  pointer-events: none;
  z-index: 2;
  transform: translateZ(0);
  contain: paint layout size;
  will-change: mask-image, -webkit-mask-image;
}

/* Cinematic Contrast Vignette & Gradient Overlays */
.hero-video-overlay {
  position: absolute;
  inset: 0;
  background: 
    linear-gradient(90deg, rgba(6, 6, 8, 0.45) 0%, rgba(6, 6, 8, 0.18) 42%, rgba(6, 6, 8, 0.08) 75%, rgba(6, 6, 8, 0.35) 100%),
    linear-gradient(180deg, rgba(6, 6, 8, 0.25) 0%, transparent 35%, rgba(6, 6, 8, 0.5) 100%);
  pointer-events: none;
  z-index: 3;
}

/* Main Container */
.hero-immersive-container {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  padding: clamp(60px, 8vh, 100px) clamp(24px, 5vw, 72px) clamp(40px, 5vh, 60px) clamp(24px, 5vw, 72px);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: flex-end;
  flex: 1;
}

/* Left Column: Typographic Stack */
.hero-immersive-left {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.2vh, 26px);
  max-width: 760px;
}

/* Top Accent Attribution (Simple Text in Brand Accent Serif) */
.hero-accent-subtitle {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(16px, 1.2vw, 19px);
  font-weight: 300;
  color: rgba(247, 247, 242, 0.88);
  margin: 0;
  padding: 0;
  letter-spacing: 0.01em;
  background: none;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.hero-accent-subtitle .accent-gradient-text {
  background: linear-gradient(135deg, #8FD8F8 0%, #9BE7C4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 400;
  font-style: italic;
}

/* Main Bold Headline */
.hero-immersive-title {
  font-family: var(--font-title);
  font-size: clamp(2.35rem, 4.4vw, 4.2rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: #FFFFFF;
  margin: 0;
  display: flex;
  flex-direction: column;
}

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

.hero-title-accent {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 300;
  background: linear-gradient(135deg, #8FD8F8 0%, #9BE7C4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-left: 4px;
}

.dynamic-typewriter-text {
  display: inline-block;
  min-width: 1ch;
  position: relative;
  transition: opacity 0.2s ease;
}

.typewriter-cursor {
  display: inline-block;
  margin-left: 1px;
  font-family: var(--font-title);
  font-weight: 300;
  font-style: normal;
  color: #9BE7C4;
  animation: typewriterCursorBlink 0.9s infinite;
  opacity: 0.95;
  user-select: none;
}

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

/* Lead Description */
.hero-immersive-desc {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.62;
  color: rgba(247, 247, 242, 0.78);
  margin: 0;
}

/* Dual CTA Cluster */
.hero-immersive-ctas {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.hero-centered-ctas {
  justify-content: center;
}

.btn-hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.015em;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  box-sizing: border-box;
  cursor: pointer;
}

.btn-hero-cta span {
  display: inline-block;
  line-height: 1;
}

.btn-hero-cta .cta-arrow-svg {
  display: inline-block;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.btn-hero-primary {
  background: #9BE7C4;
  color: #0A0B0E !important;
  border: 1px solid #9BE7C4;
  box-shadow: 0 4px 24px rgba(155, 231, 196, 0.28);
}

.btn-hero-primary span {
  color: #0A0B0E !important;
}

.btn-hero-primary .cta-arrow-svg {
  color: #0A0B0E !important;
  stroke: #0A0B0E !important;
}

.btn-hero-primary:hover {
  background: #B4F0D6;
  border-color: #B4F0D6;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(155, 231, 196, 0.45);
  color: #0A0B0E !important;
}

.btn-hero-primary:hover .cta-arrow-svg {
  transform: translate(2px, -2px);
}

.btn-hero-secondary {
  background: rgba(255, 255, 255, 0.07);
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.btn-hero-secondary span {
  color: #FFFFFF !important;
}

.btn-hero-secondary .cta-arrow-svg {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
}

.btn-hero-secondary:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.38);
  transform: translateY(-2px);
  color: #FFFFFF !important;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.35);
}

.btn-hero-secondary:hover .cta-arrow-svg {
  transform: translate(2px, -2px);
}

/* Bottom-Right Floating Corner Showcase (Minimalist Video & Brand Pills) */
.hero-corner-showcase {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.showcase-glass-pill {
  background: rgba(12, 14, 18, 0.68);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  padding: 8px 10px 8px 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: 100%;
}

.showcase-play-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: rgba(143, 216, 248, 0.12);
  border: 1px solid rgba(143, 216, 248, 0.35);
  border-radius: 999px;
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  cursor: pointer;
  text-decoration: none !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.showcase-play-pill:hover {
  background: var(--color-bleu-iceberg);
  border-color: var(--color-bleu-iceberg);
  color: #0A0B0E;
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(143, 216, 248, 0.35);
}

/* Master Showreel Button: Signature Gradient Styling */
.showreel-gradient-pill {
  background: linear-gradient(135deg, #8FD8F8 0%, #9BE7C4 100%) !important;
  color: #0A0B0E !important;
  border: 1px solid #9BE7C4 !important;
  box-shadow: 0 4px 20px rgba(155, 231, 196, 0.38) !important;
  font-weight: 800 !important;
}

.showreel-gradient-pill:hover {
  background: linear-gradient(135deg, #A8E8FF 0%, #B8F4DC 100%) !important;
  border-color: #B8F4DC !important;
  color: #0A0B0E !important;
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 8px 28px rgba(155, 231, 196, 0.55) !important;
}

.showreel-play-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.showcase-divider {
  width: 1px;
  height: 32px;
  background: rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}

.showcase-cards-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Circular Client Brand Logo Pills (Clean frosted capsules) */
.showcase-brand-pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 8px;
  text-decoration: none;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
  box-sizing: border-box;
}

.showcase-brand-pill:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: #9BE7C4;
  transform: translateY(-3px) scale(1.14);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.65), 0 0 16px rgba(155, 231, 196, 0.35);
  z-index: 10;
}

.brand-pill-img {
  max-width: 24px;
  max-height: 16px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.85;
  transition: all 0.3s ease;
  display: block;
}

.showcase-brand-pill:hover .brand-pill-img {
  opacity: 1;
  filter: brightness(0) invert(1) drop-shadow(0 0 6px rgba(255, 255, 255, 0.6));
}

/* Centered Layout Variations */
.hero-centered-section {
  justify-content: center;
  align-items: center;
}

.hero-centered-overlay {
  background: 
    radial-gradient(ellipse 95% 85% at 50% 50%, rgba(6, 6, 8, 0.38) 0%, rgba(6, 6, 8, 0.58) 75%, rgba(6, 6, 8, 0.82) 100%),
    linear-gradient(180deg, rgba(6, 6, 8, 0.32) 0%, transparent 30%, rgba(6, 6, 8, 0.65) 100%);
}

.hero-centered-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  max-width: 1440px !important;
  padding: clamp(70px, 10vh, 120px) clamp(20px, 4vw, 40px) clamp(50px, 7vh, 80px) clamp(20px, 4vw, 40px) !important;
  margin: 0 auto !important;
}

.hero-centered-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(18px, 2.4vh, 28px);
  width: 100%;
  max-width: 1380px;
}

.hero-centered-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 1360px;
  width: 100%;
  font-size: clamp(1.65rem, 2.6vw, 2.85rem);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.025em;
  gap: 6px;
}

.hero-centered-desc {
  text-align: center;
  margin: 0 auto;
  max-width: 820px;
  font-size: clamp(15px, 1.05vw, 16.5px);
  line-height: 1.65;
  color: rgba(247, 247, 242, 0.82);
}

.hero-centered-ctas {
  justify-content: center;
  margin-top: 4px;
}

.hero-switcher-pill-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: clamp(14px, 2.2vh, 24px);
}

/* Cinema Control Action Buttons (Play/Pause, Mute, Fullscreen) */
.hero-cinema-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.showcase-ctrl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
  box-sizing: border-box;
}

.showcase-ctrl-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(155, 231, 196, 0.6);
  transform: translateY(-2px) scale(1.08);
  color: #9BE7C4;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), 0 0 14px rgba(155, 231, 196, 0.25);
}

.showcase-ctrl-btn.active,
.showcase-ctrl-btn.unmuted {
  background: rgba(155, 231, 196, 0.18);
  border-color: #9BE7C4;
  color: #9BE7C4;
  box-shadow: 0 0 14px rgba(155, 231, 196, 0.35);
}

.ctrl-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Video Card Switcher active outline */
.showcase-video-card.is-active-bg,
.showcase-video-card.active {
  border-color: #9BE7C4 !important;
  box-shadow: 0 0 0 2px rgba(155, 231, 196, 0.5), 0 10px 24px rgba(0, 0, 0, 0.8) !important;
  transform: translateY(-3px) scale(1.15) !important;
}

.showcase-play-pill.is-active-bg,
.showcase-play-pill.active {
  background: var(--color-bleu-iceberg);
  border-color: var(--color-bleu-iceberg);
  color: #0A0B0E;
  box-shadow: 0 0 18px rgba(143, 216, 248, 0.4);
}

/* Fullscreen Showreel Modal Lightbox */
.showreel-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.showreel-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.showreel-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 8, 0.88);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.showreel-modal-dialog {
  position: relative;
  z-index: 10;
  width: 90%;
  max-width: 1200px;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.95);
  transform: scale(0.95);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.showreel-modal.is-open .showreel-modal-dialog {
  transform: scale(1);
}

.btn-close-showreel {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 20;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
}

.btn-close-showreel:hover {
  background: #FFFFFF;
  color: #000;
  transform: rotate(90deg);
}

.showreel-video-container {
  position: relative;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
  width: 100%;
}

.showreel-video-container video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Stagger Entrance Animations for Hero (Removed for Maximum Performance) */
.animate-hero-item {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
  .hero-immersive-container {
    grid-template-columns: 1fr;
    padding-top: 40px;
    gap: 40px;
  }
  
  .hero-corner-widget {
    justify-content: flex-start;
  }
  
  .corner-widget-inner {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .hero-immersive-ctas {
    flex-direction: column;
    align-items: stretch;
  }
  
  .btn-hero-cta {
    justify-content: center;
  }
  
  .corner-vcard-item {
    flex: 0 0 100%;
  }
}

/* ==========================================================================
   FORMATIONS & LEARNING SECTION (DUAL PATH: B2C & B2B TABS)
   ========================================================================== */
.formations-section {
  position: relative;
  width: 100%;
  padding: 120px 48px 140px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background-color: var(--color-noir-profond, #0A0A0A);
  overflow: hidden;
}

.formations-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1000px;
  height: 500px;
  background: radial-gradient(ellipse at 50% 0%, rgba(143, 216, 248, 0.06) 0%, rgba(155, 231, 196, 0.02) 40%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.formations-container {
  position: relative;
  z-index: 1;
  max-width: 1360px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* Header Area */
.formations-header-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 20px;
  width: 100%;
}

.formations-header-content {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.formations-overline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(247, 247, 242, 0.85);
  margin-bottom: 16px;
}

.formations-overline .overline-accent-word {
  font-family: var(--font-serif-accent);
  font-style: italic;
  font-weight: 400;
  font-size: 14.5px;
  text-transform: lowercase;
  letter-spacing: 0.01em;
  background: linear-gradient(90deg, #8FD8F8 0%, #9BE7C4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  display: inline-block;
  margin-left: 2px;
}

.formations-title {
  font-family: var(--font-title);
  font-size: clamp(32px, 3.2vw, 52px);
  font-weight: 750;
  line-height: 1.18;
  letter-spacing: -0.03em;
  color: var(--color-blanc-casse);
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.formations-title .title-serif-accent {
  font-family: var(--font-serif-accent);
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(90deg, #8FD8F8 0%, #9BE7C4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

.formations-subtitle {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  color: #9A9FA5;
  max-width: 960px;
  margin: 18px auto 0 auto;
  text-align: center;
}

/* Tabs Controller Navigation */
.formations-tabs-controller-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0 auto;
}

.formations-tabs-nav {
  display: inline-flex;
  align-items: stretch;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%), rgba(12, 14, 18, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 9999px;
  padding: 5px;
  gap: 6px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
}

.formations-tab-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 26px 10px 20px;
  border-radius: 9999px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: rgba(247, 247, 242, 0.65);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: left;
  gap: 12px;
}

.formations-tab-btn:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.06);
}

.formations-tab-btn.active {
  background: #F7F7F2;
  color: #0A0B0E;
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.18);
}

.tab-btn-icon-box {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

#lottieTabB2B.tab-btn-icon-box {
  width: 42px;
  height: 42px;
  transform: scale(1.3);
  margin-right: 2px;
}

#lottieTabCustom.tab-btn-icon-box {
  width: 34px;
  height: 34px;
  transform: scale(1.08);
}

.tab-btn-icon-box svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.formations-tab-btn:hover .tab-btn-icon-box {
  transform: scale(1.12);
}

.formations-tab-btn:hover #lottieTabB2B.tab-btn-icon-box {
  transform: scale(1.42);
}

.formations-tab-btn:hover #lottieTabCustom.tab-btn-icon-box {
  transform: scale(1.18);
}

.formations-tab-btn.active .tab-btn-icon-box {
  filter: invert(1) brightness(0.15) contrast(1.2);
}

.tab-btn-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 2px;
}

.tab-btn-title {
  font-family: var(--font-title);
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.tab-btn-sub {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  opacity: 0.75;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Panels Container */
.formations-panels-wrapper {
  position: relative;
  width: 100%;
}

.formations-tab-panel {
  display: none;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.formations-tab-panel.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
  animation: tabFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes tabFadeIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   TAB 1: COURS EN LIGNE (BESPOKE ARCHITECTURAL MASTERCLASS STUDIO)
   ========================================================================== */
.masterclass-studio-card {
  position: relative;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%), rgba(12, 14, 18, 0.42);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: border-color 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
}

.masterclass-studio-card:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%), rgba(12, 14, 18, 0.62);
  border-color: rgba(143, 216, 248, 0.35);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.82), 0 0 40px rgba(143, 216, 248, 0.08);
}

/* Studio Card Main Grid */
.studio-card-main-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  min-height: 580px;
}

/* Left Column: Editorial & Curriculum Explorer */
.studio-content-col {
  padding: 42px 46px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  justify-content: space-between;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.studio-headline-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.studio-meta-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.studio-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: rgba(247, 247, 242, 0.75);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
  padding: 4px 12px;
  letter-spacing: 0.02em;
}

.studio-hero-title {
  font-family: var(--font-title);
  font-size: clamp(28px, 2.5vw, 38px);
  font-weight: 900;
  line-height: 1.14;
  letter-spacing: -0.025em;
  color: #FFFFFF;
  margin: 0;
}

.studio-hero-title .title-serif-gradient {
  font-family: var(--font-accent) !important;
  font-style: italic !important;
  font-weight: 500 !important;
  background: linear-gradient(135deg, #F7F7F2 0%, var(--color-bleu-iceberg) 55%, var(--color-vert-menthe) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
}

.studio-lead-text {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(247, 247, 242, 0.72);
  margin: 0;
  max-width: 580px;
}

/* Fluid Editorial Curriculum Tracklist */
.studio-curriculum-explorer {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.curriculum-explorer-header {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  margin-bottom: 6px;
}

.explorer-tag-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FFFFFF;
}

/* Progressive Step Steppers Track */
.curriculum-modules-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.curriculum-step-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 18px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(247, 247, 242, 0.85);
  cursor: pointer;
  text-align: left;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.curriculum-step-pill .capsule-prefix {
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: color 0.25s ease;
}

.curriculum-step-pill .capsule-dot {
  opacity: 0.35;
  transition: opacity 0.25s ease, color 0.25s ease;
}

.curriculum-step-pill .capsule-label {
  font-family: var(--font-title);
  font-size: 13px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.01em;
  transition: color 0.25s ease;
}

/* Hover state: background changes to solid off-white and grows */
.curriculum-step-pill:hover {
  background: #F7F7F2;
  border-color: #F7F7F2;
  color: #0A0B0E;
  transform: scale(1.06) translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.15);
  z-index: 2;
}

.curriculum-step-pill:hover .capsule-prefix {
  color: rgba(10, 11, 14, 0.65);
}

.curriculum-step-pill:hover .capsule-dot {
  opacity: 0.45;
  color: #0A0B0E;
}

.curriculum-step-pill:hover .capsule-label {
  color: #0A0B0E;
  font-weight: 800;
}

/* Active State: selected in Masterclass Studio player */
.curriculum-step-pill.active {
  background: #F7F7F2;
  border-color: #F7F7F2;
  color: #0A0B0E;
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.22);
}

.curriculum-step-pill.active .capsule-prefix {
  color: rgba(10, 11, 14, 0.65);
}

.curriculum-step-pill.active .capsule-dot {
  opacity: 0.45;
  color: #0A0B0E;
}

.curriculum-step-pill.active .capsule-label {
  color: #0A0B0E;
  font-weight: 800;
}

/* Action CTA Bottom Cluster with Blue CTA & Launch Price */
.studio-action-cluster {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 4px;
}

.studio-cta-row {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.studio-primary-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 16px 36px;
  background: #8FD8F8;
  color: #0A0B0E;
  border-radius: 9999px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  width: fit-content;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(143, 216, 248, 0.35);
}

.studio-primary-cta:hover {
  background: #AEE2FA;
  border-color: #AEE2FA;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(143, 216, 248, 0.55);
}

.studio-primary-cta .cta-arrow-svg {
  stroke: #0A0B0E !important;
  color: #0A0B0E !important;
  transition: transform 0.25s ease;
}

.studio-primary-cta:hover .cta-arrow-svg {
  transform: translate(3px, -3px);
}

.studio-price-tag {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.studio-price-tag .price-val {
  font-family: var(--font-title);
  font-size: 22px;
  font-weight: 900;
  color: #FFFFFF;
  line-height: 1.1;
  letter-spacing: 0.08em;
  filter: blur(7px);
  user-select: none;
  opacity: 0.55;
  display: inline-block;
  transform: scale(0.95);
}

.studio-price-tag .price-desc {
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(247, 247, 242, 0.55);
}

.studio-cta-perks {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 11.5px;
  color: rgba(247, 247, 242, 0.65);
  flex-wrap: wrap;
}

.perk-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(247, 247, 242, 0.75);
}

.perk-item svg {
  color: var(--color-bleu-iceberg);
}

.perk-dot {
  opacity: 0.3;
}

/* Right Column: Live Cinema Studio Preview Monitor */
.studio-screen-col {
  display: flex;
  flex-direction: column;
}

.studio-cinema-monitor {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.monitor-screen-viewport {
  position: relative;
  flex: 1;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.monitor-active-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
}

.monitor-grade-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 8, 10, 0.1) 0%, rgba(6, 8, 10, 0.3) 40%, rgba(6, 8, 10, 0.92) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Vertical Fluted Glass Blur Overlay */
.monitor-fluted-glass {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.09) 0px,
    rgba(255, 255, 255, 0.09) 1.5px,
    transparent 1.5px,
    transparent 18px
  ),
  repeating-linear-gradient(
    90deg,
    rgba(143, 216, 248, 0.04) 0px,
    rgba(143, 216, 248, 0.04) 9px,
    transparent 9px,
    transparent 18px
  );
  backdrop-filter: blur(16px) saturate(190%);
  -webkit-backdrop-filter: blur(16px) saturate(190%);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), backdrop-filter 0.45s ease;
}

/* Activate Vertical Fluted Blur ONLY when hovering directly on the cinema monitor box */
.studio-cinema-monitor:hover .monitor-fluted-glass {
  opacity: 1;
}

.studio-cinema-monitor:hover .monitor-active-video {
  transform: scale(1.035);
  filter: contrast(1.08) brightness(1.05);
}

.monitor-scanlines {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
  background-size: 100% 3px, 4px 100%;
  pointer-events: none;
  opacity: 0.35;
  z-index: 1;
}

.monitor-hud-bottom {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 24px 26px;
  gap: 16px;
  width: 100%;
  margin-top: auto;
}

.hud-chapter-details {
  max-width: 86%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.hud-chapter-tag {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-bleu-iceberg);
  margin-bottom: 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
}

.hud-chapter-title {
  font-family: var(--font-title);
  font-size: clamp(21px, 1.9vw, 26px);
  font-weight: 900;
  color: #FFFFFF;
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.95);
  transition: font-size 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s ease;
}

.hud-chapter-desc {
  font-family: var(--font-body);
  font-size: 13.5px;
  color: rgba(247, 247, 242, 0.88);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.hud-chapter-extra {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-bleu-iceberg);
  letter-spacing: 0.03em;
  line-height: 1.4;
  max-height: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95);
  margin-top: 0;
}

/* On hover over the cinema monitor: Text grows and extra explanation smoothly reveals */
.studio-cinema-monitor:hover .hud-chapter-title {
  font-size: clamp(25px, 2.3vw, 32px);
  transform: translateY(-2px);
}

.studio-cinema-monitor:hover .hud-chapter-desc {
  font-size: 14.5px;
  color: #FFFFFF;
  -webkit-line-clamp: unset;
}

.studio-cinema-monitor:hover .hud-chapter-extra {
  max-height: 80px;
  opacity: 1;
  transform: translateY(0);
  margin-top: 6px;
}

.hud-interactive-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hud-control-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.hud-control-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: #9BE7C4;
  color: #9BE7C4;
  transform: translateY(-2px) scale(1.08);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), 0 0 14px rgba(155, 231, 196, 0.25);
}

/* Scrubber Timeline Bar with 6 Chapter Ticks */
.monitor-timeline-bar {
  position: relative;
  width: 100%;
  height: 34px;
  background: rgba(10, 12, 15, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  padding: 0 20px;
  z-index: 3;
}

.timeline-track-progress {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background: rgba(155, 231, 196, 0.15);
  border-right: 2px solid #9BE7C4;
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.timeline-ticks-row {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
}

.timeline-tick {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  padding: 4px 6px;
  letter-spacing: 0.1em;
  transition: color 0.2s ease;
}

.timeline-tick.active, .timeline-tick:hover {
  color: #9BE7C4;
}


/* ==========================================================================
   TAB 2: FORMATIONS PRO (3 CARDS + CADRAGE BANNER)
   ========================================================================== */
.b2b-cards-grid {
  display: flex;
  gap: 24px;
  width: 100%;
  align-items: stretch;
}

.b2b-offer-card {
  flex: 1 1 0;
  min-width: 0;
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 30px 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%), rgba(10, 12, 16, 0.85);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: flex 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.b2b-cards-grid:hover .b2b-offer-card {
  flex: 0.92 1 0;
}

.b2b-cards-grid .b2b-offer-card:hover {
  flex: 1.12 1 0;
  transform: translateY(-8px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%), rgba(12, 14, 18, 0.92);
  border-color: rgba(143, 216, 248, 0.45);
  box-shadow: 0 34px 75px rgba(0, 0, 0, 0.85), 0 0 35px rgba(143, 216, 248, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.b2b-card-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
  gap: 22px;
  align-items: center;
  text-align: center;
}

/* Card Top Header */
.b2b-card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  width: 100%;
}

.b2b-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 14px;
  border-radius: 9999px;
  background: rgba(143, 216, 248, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(143, 216, 248, 0.28);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-bleu-iceberg);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  transition: all 0.35s ease;
}

.b2b-card-badge .badge-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #9BE7C4;
  box-shadow: 0 0 8px #9BE7C4;
  display: inline-block;
}

.b2b-offer-card:hover .b2b-card-badge {
  background: rgba(143, 216, 248, 0.16);
  border-color: rgba(143, 216, 248, 0.55);
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(143, 216, 248, 0.25);
}

.b2b-card-title {
  font-family: var(--font-title);
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  line-height: 1.22;
  margin: 0;
  text-align: center;
  width: 100%;
  transition: font-size 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s ease;
}

.b2b-offer-card:hover .b2b-card-title {
  transform: translateY(-1px);
}

.b2b-card-text {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.62;
  color: rgba(247, 247, 242, 0.72);
  margin: 0 auto;
  max-width: 95%;
  text-align: center;
  transition: color 0.4s ease;
}

.b2b-offer-card:hover .b2b-card-text {
  color: rgba(247, 247, 242, 0.92);
}

/* Framed Cinema Monitor */
.b2b-cinema-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.b2b-offer-card:hover .b2b-cinema-frame {
  border-color: rgba(143, 216, 248, 0.4);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.75), 0 0 25px rgba(143, 216, 248, 0.15);
}

.b2b-card-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(0px) brightness(0.92) contrast(1.02);
  transform: scale(1);
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
}

/* Hovered card: video is crisp, bright and focused */
.b2b-offer-card:hover .b2b-card-video {
  transform: scale(1.04);
  filter: blur(0px) brightness(1.08) contrast(1.04);
  opacity: 1;
}

/* When hovering any card, blur the OTHER card's video */
.b2b-cards-grid:hover .b2b-offer-card:not(:hover) .b2b-card-video {
  filter: blur(12px) brightness(0.55) contrast(0.9);
  opacity: 0.6;
  transform: scale(1.04);
}

.b2b-media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, transparent 40%, rgba(10, 12, 16, 0.65) 100%);
  pointer-events: none;
  z-index: 1;
}

.b2b-cinema-hud-tag {
  position: absolute;
  bottom: 10px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.85);
  z-index: 2;
  transition: transform 0.3s ease;
}

.b2b-cinema-hud-tag .hud-live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #9BE7C4;
  box-shadow: 0 0 6px #9BE7C4;
}

.b2b-offer-card:hover .b2b-cinema-hud-tag {
  transform: translateY(-2px);
  background: rgba(0, 0, 0, 0.85);
}

/* Curriculum Section */
.b2b-card-curriculum {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.b2b-curriculum-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

/* Step Stepper Capsules in B2B Cards */
.b2b-card-steps-track {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 7px;
  width: 100%;
  transition: gap 0.4s ease;
}

.b2b-offer-card:hover .b2b-card-steps-track {
  gap: 8px;
}

.b2b-step-capsule {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 13px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(247, 247, 242, 0.85);
  cursor: default;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.b2b-step-capsule .capsule-prefix {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: color 0.25s ease;
}

.b2b-step-capsule .capsule-dot {
  opacity: 0.35;
  transition: opacity 0.25s ease, color 0.25s ease;
}

.b2b-step-capsule .capsule-label {
  font-weight: 600;
  color: #FFFFFF;
  transition: color 0.25s ease;
}

/* Individual point hover: background change and grows */
.b2b-step-capsule:hover {
  background: #F7F7F2 !important;
  border-color: #F7F7F2 !important;
  color: #0A0B0E !important;
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.15);
  z-index: 2;
}

.b2b-step-capsule:hover .capsule-prefix {
  color: rgba(10, 11, 14, 0.65) !important;
}

.b2b-step-capsule:hover .capsule-dot {
  opacity: 0.45;
  color: #0A0B0E !important;
}

.b2b-step-capsule:hover .capsule-label {
  color: #0A0B0E !important;
  font-weight: 700;
}

.b2b-offer-card:hover .b2b-step-capsule {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
}

.b2b-card-footer {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  width: 100%;
  display: flex;
  justify-content: center;
}

.b2b-card-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 13px 24px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.b2b-card-action-btn:hover {
  background: #8FD8F8;
  color: #0A0B0E;
  border-color: #8FD8F8;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(143, 216, 248, 0.35);
}

.b2b-card-action-btn .cta-arrow-svg {
  stroke: currentColor !important;
  color: currentColor !important;
  transition: transform 0.25s ease;
}

.b2b-card-action-btn:hover .cta-arrow-svg {
  stroke: #0A0B0E !important;
  color: #0A0B0E !important;
  transform: translate(3px, -3px);
}

/* B2B Cadrage Action Banner */
.b2b-bottom-banner {
  margin-top: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 34px 42px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%), rgba(12, 14, 18, 0.55);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

.b2b-bottom-banner:hover {
  border-color: rgba(143, 216, 248, 0.35);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.82), 0 0 30px rgba(143, 216, 248, 0.06);
}

.b2b-banner-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 680px;
}

.b2b-banner-eyebrow {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-bleu-iceberg);
}

.b2b-banner-title {
  font-family: var(--font-title);
  font-size: 19px;
  font-weight: 850;
  color: #FFFFFF;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0;
}

.b2b-banner-desc {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: rgba(247, 247, 242, 0.7);
  margin: 0;
}

.btn-b2b-cadrage {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  background: #8FD8F8;
  color: #0A0B0E;
  border-radius: 9999px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 8px 24px rgba(143, 216, 248, 0.35);
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-b2b-cadrage:hover {
  background: #AEE2FA;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(143, 216, 248, 0.55);
}

.btn-b2b-cadrage .cta-arrow-svg {
  stroke: #0A0B0E !important;
  color: #0A0B0E !important;
  transition: transform 0.25s ease;
}

.btn-b2b-cadrage:hover .cta-arrow-svg {
  transform: translate(3px, -3px);
}

/* ==========================================================================
   TAB PANEL 3: AUTOMATISATION IA — STUDIO CARD & FORM
   ========================================================================== */
.consultation-studio-card {
  min-height: auto;
}

/* 3-service offer cards stack */
.automat-offer-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.automat-offer-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(143, 216, 248, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.automat-offer-card:hover {
  border-color: rgba(143, 216, 248, 0.35);
  background: linear-gradient(135deg, rgba(143, 216, 248, 0.07) 0%, rgba(255, 255, 255, 0.03) 100%);
  transform: translateX(4px);
}

.automat-offer-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(143, 216, 248, 0.1);
  border: 1px solid rgba(143, 216, 248, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-bleu-iceberg);
  margin-top: 1px;
}

.automat-offer-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.automat-offer-tag {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-bleu-iceberg);
}

.automat-offer-text {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.55;
  color: rgba(247, 247, 242, 0.78);
  margin: 0;
}

.consultation-left-pane {
  padding: 38px 44px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  justify-content: space-between;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

/* Prominent Warren Profile Feature Card */
.consult-profile-feature {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 22px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(143, 216, 248, 0.03) 100%), rgba(10, 12, 16, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}

.consult-profile-feature:hover {
  border-color: rgba(143, 216, 248, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6), 0 0 25px rgba(143, 216, 248, 0.1);
}

.consult-profile-photo-wrap {
  position: relative;
  width: 82px;
  height: 82px;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(143, 216, 248, 0.25), rgba(155, 231, 196, 0.15));
  border: 1.5px solid rgba(143, 216, 248, 0.5);
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.consult-profile-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transform: scale(1.05);
}

.consult-live-dot {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #22C55E;
  border: 2px solid #0C0E12;
  box-shadow: 0 0 8px #22C55E;
}

.consult-profile-bio {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.consult-bio-badge {
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--color-bleu-iceberg);
  text-transform: uppercase;
}

.consult-bio-name {
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 900;
  color: #FFFFFF;
  letter-spacing: -0.01em;
  margin: 0;
}

.consult-bio-role {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(247, 247, 242, 0.85);
  margin: 0;
}

.consult-bio-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-family: var(--font-body);
  font-size: 11.5px;
  color: #94A3B8;
  margin-top: 4px;
}

/* Right Column: Form Pane */
.consult-form-col {
  padding: 38px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.005) 100%), rgba(8, 10, 14, 0.65);
}

.consult-form-pane-inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}

.consult-form-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}

.consult-top-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-title);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-bleu-iceberg);
}

.pulse-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 8px #22C55E;
}

.consult-top-time {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  color: var(--color-vert-menthe);
  background: rgba(155, 231, 196, 0.1);
  border: 1px solid rgba(155, 231, 196, 0.25);
  padding: 2px 8px;
  border-radius: 100px;
}

.consult-pane-heading {
  font-family: var(--font-title);
  font-size: 22px;
  font-weight: 850;
  color: #FFFFFF;
  margin: 0;
  letter-spacing: -0.01em;
}

.consult-pane-desc {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(247, 247, 242, 0.65);
  margin: 0;
}

.consult-booking-form-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}

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

.consult-field-wrap label {
  font-family: var(--font-title);
  font-size: 11px;
  font-weight: 750;
  color: rgba(255, 255, 255, 0.8);
}

.consult-field-wrap input,
.consult-field-wrap select {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 10px 14px;
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 13px;
  outline: none;
  transition: all 0.25s ease;
  box-sizing: border-box;
}

.consult-field-wrap input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.consult-field-wrap input:focus,
.consult-field-wrap select:focus {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--color-bleu-iceberg);
  box-shadow: 0 0 14px rgba(143, 216, 248, 0.2);
}

.consult-field-wrap select {
  cursor: pointer;
}

.consult-field-wrap select option {
  background: #0C0E12;
  color: #FFFFFF;
}

.consult-submit-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.consult-submit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 13px 24px;
  background: var(--color-bleu-iceberg);
  color: #0A0B0E;
  border: none;
  border-radius: 9999px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(143, 216, 248, 0.35);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.consult-submit-button:hover {
  background: #AEE2FA;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(143, 216, 248, 0.55);
}

.consult-submit-button .cta-arrow-svg {
  stroke: #0A0B0E !important;
  color: #0A0B0E !important;
  transition: transform 0.25s ease;
}

.consult-submit-button:hover .cta-arrow-svg {
  transform: translate(3px, -3px);
}

.consult-guarantee-note {
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
}

.consultation-success-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 24px 12px;
}

.consult-success-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(155, 231, 196, 0.15);
  border: 1.5px solid #9BE7C4;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 18px rgba(155, 231, 196, 0.35);
}

.consult-success-title {
  font-family: var(--font-title);
  font-size: 17px;
  font-weight: 850;
  color: #FFFFFF;
  margin: 0;
}

.consult-success-desc {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.55;
  color: #CBD5E1;
  margin: 0;
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS FOR FORMATIONS SECTION
   ========================================================================== */
@media (max-width: 1080px) {
  .masterclass-studio-card {
    border-radius: 14px;
  }

  .studio-card-main-grid {
    grid-template-columns: 1fr;
  }

  .studio-content-col {
    padding: 32px 28px;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .studio-cinema-monitor {
    min-height: 420px;
  }

  .b2b-cards-grid {
    flex-direction: column;
  }

  .b2b-offer-card,
  .b2b-cards-grid:hover .b2b-offer-card,
  .b2b-cards-grid .b2b-offer-card:hover {
    flex: 1 1 auto;
  }
}

@media (max-width: 768px) {
  .formations-section {
    padding: 80px 20px 100px;
  }

  .studio-card-topbar {
    padding: 12px 18px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .studio-content-col {
    padding: 24px 18px;
    gap: 20px;
  }

  .studio-specs-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .spec-cell:nth-child(2) {
    border-right: none;
  }

  .spec-cell:nth-child(1),
  .spec-cell:nth-child(2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .curriculum-modules-track {
    grid-template-columns: 1fr;
  }

  .studio-cinema-monitor {
    min-height: 380px;
  }

  .monitor-hud-top,
  .monitor-hud-bottom {
    padding: 16px 18px;
  }

  .hud-chapter-title {
    font-size: 16px;
  }

  .formations-tabs-controller-wrap {
    justify-content: stretch;
  }

  .formations-tabs-nav {
    width: 100%;
    flex-direction: column;
    border-radius: 16px;
  }

  .formations-tab-btn {
    width: 100%;
    border-radius: 12px;
  }

  .b2b-cards-grid {
    grid-template-columns: 1fr;
  }

  .b2b-bottom-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 20px;
  }
}

/* ==========================================================================
   FORMATIONS / MASTERCLASS TRANSITIONS & STATES
   ========================================================================== */
.formations-tabs-controller-wrap,
.masterclass-studio-card,
.studio-meta-chips,
.studio-hero-title,
.studio-lead-text,
.curriculum-explorer-header,
.curriculum-step-pill,
.studio-action-cluster,
.studio-cinema-monitor,
.b2b-cards-grid,
.b2b-offer-card,
.b2b-bottom-banner {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ==========================================================================
   KPIS STATS COUNTER STRIP (AUTOMATIC INFINITE NEWS MARQUEE TICKER)
   ========================================================================== */
@keyframes kpi-marquee-loop {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

.kpi-ticker-section {
  position: relative;
  width: 100%;
  background: #0A0A0A;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 36px 0;
  overflow: hidden;
  z-index: 5;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 1) 6%, rgba(0, 0, 0, 1) 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 1) 6%, rgba(0, 0, 0, 1) 94%, transparent 100%);
}

.kpi-ticker-container {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.kpi-ticker-track {
  display: flex;
  width: max-content;
  align-items: center;
  animation: kpi-marquee-loop 28s linear infinite;
  will-change: transform;
}

.kpi-ticker-section:hover .kpi-ticker-track {
  animation-play-state: paused;
}

.kpi-ticker-group {
  display: flex;
  align-items: center;
  gap: 32px;
  padding-right: 32px;
  flex-shrink: 0;
}

/* Same-Line Interactive KPI Stat Card */
.kpi-stat-item {
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  gap: 14px;
  flex-shrink: 0;
  padding: 8px 12px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.kpi-stat-item:hover {
  transform: translateY(-2px);
}

.kpi-number-wrap {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}

/* Accent Font Canela Italic Numbers */
.kpi-number {
  font-family: var(--font-serif-accent);
  font-style: italic;
  font-size: clamp(36px, 3.4vw, 52px);
  font-weight: 400;
  color: #FFFFFF;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.8);
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.kpi-stat-item:hover .kpi-number {
  color: #8FD8F8;
  text-shadow: 0 0 22px rgba(143, 216, 248, 0.45);
}

.kpi-unit {
  font-family: var(--font-serif-accent);
  font-style: italic;
  font-size: clamp(24px, 2.2vw, 34px);
  font-weight: 400;
  background: linear-gradient(90deg, #8FD8F8 0%, #9BE7C4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  line-height: 1;
  margin-left: 2px;
}

/* Same-Line Label */
.kpi-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(247, 247, 242, 0.65);
  line-height: 1.35;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.kpi-stat-item:hover .kpi-label {
  color: #FFFFFF;
}

.kpi-divider {
  width: 1px;
  height: 32px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.18) 50%, rgba(255, 255, 255, 0) 100%);
  flex-shrink: 0;
  align-self: center;
}

/* ==========================================================================
   SECTION: QUI EST WARREN GRANGE (EDITORIAL PRESENTATION & AUTHORITY)
   ========================================================================== */
.warren-presentation-section {
  position: relative;
  width: 100%;
  background-color: var(--color-noir-profond);
  padding: clamp(80px, 8vw, 120px) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  z-index: 5;
}

.warren-presentation-ambient-glow {
  position: absolute;
  top: 15%;
  left: 10%;
  width: 650px;
  height: 650px;
  background: radial-gradient(circle, rgba(143, 216, 248, 0.06) 0%, rgba(155, 231, 196, 0.03) 40%, transparent 70%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 1;
}

.warren-presentation-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 64px);
}

.warren-presentation-grid {
  display: grid;
  grid-template-columns: 460px 1fr;
  gap: clamp(40px, 5.5vw, 90px);
  align-items: center;
}

/* ── Media Column (Portrait Showcase) ── */
.warren-presentation-media-col {
  position: relative;
  width: 100%;
}

@keyframes warrenPortraitFloat {
  0%, 100% {
    transform: translateY(0px);
    box-shadow: 0 24px 50px -12px rgba(0, 0, 0, 0.7);
  }
  50% {
    transform: translateY(-9px);
    box-shadow: 0 36px 64px -12px rgba(0, 0, 0, 0.82), 0 10px 28px -6px rgba(143, 216, 248, 0.12);
  }
}

.warren-portrait-card {
  position: relative;
  width: 100%;
  border-radius: 18px;
  padding: 0;
  background: transparent;
  border: none;
  overflow: hidden;
  box-shadow: 0 24px 50px -12px rgba(0, 0, 0, 0.7);
  animation: warrenPortraitFloat 6s ease-in-out infinite;
  transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s ease;
}

.warren-portrait-card:hover {
  border: none;
  box-shadow: 0 38px 75px -12px rgba(0, 0, 0, 0.9), 0 12px 35px -6px rgba(143, 216, 248, 0.2);
}

.warren-portrait-frame {
  position: relative;
  width: 100%;
  height: 570px;
  border-radius: 18px;
  overflow: hidden;
  background: transparent;
  border: none;
}

.warren-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
  display: block;
  border: none;
  border-radius: 18px;
  transition: transform 0.7s var(--ease-out-expo);
}

.warren-portrait-card:hover .warren-portrait-img {
  transform: scale(1.025);
}

/* ── Content Column ── */
.warren-presentation-content-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(20px, 2.2vw, 26px);
}

.warren-presentation-overline {
  display: inline-flex;
  align-items: center;
  padding: 0;
  background: transparent;
  border: none;
}

.warren-presentation-overline .overline-text {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #FFFFFF;
}

.warren-presentation-overline .overline-accent-word {
  font-family: var(--font-serif-accent);
  font-style: italic;
  text-transform: lowercase;
  background: linear-gradient(135deg, #F7F7F2 0%, var(--color-bleu-iceberg) 55%, var(--color-vert-menthe) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.warren-presentation-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px 16px;
  margin: 0;
}

.presentation-name {
  font-family: var(--font-title);
  font-size: clamp(34px, 3.8vw, 54px);
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.presentation-role-badge {
  font-family: var(--font-serif-accent);
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 400;
  background: linear-gradient(135deg, #F7F7F2 0%, var(--color-bleu-iceberg) 50%, var(--color-vert-menthe) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.2;
}

.presentation-role-badge .role-dash {
  font-style: normal;
  color: rgba(255, 255, 255, 0.4);
  -webkit-text-fill-color: initial;
  margin-right: 4px;
}

.warren-presentation-desc {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.15vw, 17.5px);
  line-height: 1.78;
  color: rgba(247, 247, 242, 0.82);
  font-weight: 400;
  max-width: 860px;
  margin: 0;
}

.bio-brand-accent {
  color: #FFFFFF;
  font-weight: 600;
  border-bottom: 1px solid rgba(143, 216, 248, 0.35);
  padding-bottom: 1px;
}

/* ── Quote Box ── */
.warren-presentation-quote-box {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  width: 100%;
  max-width: 860px;
  padding: 20px 24px;
  background: linear-gradient(135deg, rgba(143, 216, 248, 0.05) 0%, rgba(155, 231, 196, 0.02) 100%);
  border-left: 2px solid var(--color-bleu-iceberg);
  border-radius: 0 10px 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.quote-symbol {
  flex-shrink: 0;
  color: var(--color-bleu-iceberg);
  opacity: 0.9;
  margin-top: 3px;
}

.warren-presentation-quote-text {
  font-family: var(--font-serif-accent);
  font-style: italic;
  font-size: clamp(17px, 1.4vw, 22px);
  line-height: 1.52;
  font-weight: 400;
  background: linear-gradient(135deg, #FFFFFF 0%, #E0F2FA 45%, var(--color-bleu-iceberg) 85%, var(--color-vert-menthe) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
}

/* ── Stats & Metrics Grid ── */
.warren-presentation-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  width: 100%;
  max-width: 860px;
  margin-top: 6px;
}

.warren-stat-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px 14px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  transition: all 0.3s var(--ease-out-expo);
}

.warren-stat-card:hover {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(143, 216, 248, 0.32);
  transform: translateY(-2px);
}

.warren-stat-num-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 6px;
}

.warren-stat-num-row .kpi-number {
  font-family: var(--font-serif-accent);
  font-style: italic;
  font-size: clamp(30px, 2.6vw, 42px);
  font-weight: 400;
  color: #FFFFFF;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.warren-stat-card:hover .kpi-number {
  color: var(--color-bleu-iceberg);
  text-shadow: 0 0 20px rgba(143, 216, 248, 0.4);
}

.warren-stat-num-row .kpi-unit {
  font-family: var(--font-serif-accent);
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 400;
  background: linear-gradient(90deg, #8FD8F8 0%, #9BE7C4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

.warren-stat-label {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(247, 247, 242, 0.62);
  line-height: 1.35;
  transition: color 0.3s ease;
}

.warren-stat-card:hover .warren-stat-label {
  color: rgba(247, 247, 242, 0.95);
}

/* ── CTA Row ── */
.warren-presentation-cta-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: 10px;
}

.warren-presentation-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 9999px;
  background: linear-gradient(90deg, #8FD8F8 0%, #9BE7C4 100%);
  color: #0A0A0A;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(143, 216, 248, 0.25);
  transition: all 0.3s var(--ease-out-expo);
  cursor: pointer;
}

.warren-presentation-cta-btn:hover {
  background: linear-gradient(90deg, #9BE7C4 0%, #8FD8F8 100%);
  box-shadow: 0 12px 36px rgba(143, 216, 248, 0.45);
  transform: translateY(-2px);
  color: #0A0A0A;
}

.warren-presentation-cta-btn .cta-arrow-svg {
  color: #0A0A0A !important;
  stroke: #0A0A0A !important;
  transition: transform 0.3s ease;
}

.warren-presentation-cta-btn:hover .cta-arrow-svg {
  color: #0A0A0A !important;
  stroke: #0A0A0A !important;
  transform: translate(2px, -2px);
}

.warren-presentation-cta-sub {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12.5px;
  color: rgba(247, 247, 242, 0.55);
  letter-spacing: 0.02em;
}

.warren-presentation-cta-sub .cta-sub-dot {
  color: var(--color-vert-menthe);
}

/* ── Responsive Queries ── */
@media (max-width: 1180px) {
  .warren-presentation-grid {
    grid-template-columns: 380px 1fr;
    gap: 36px;
  }
  .warren-portrait-frame {
    height: 490px;
  }
  .warren-presentation-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 880px) {
  .warren-presentation-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .warren-presentation-media-col {
    max-width: 440px;
    margin: 0 auto;
  }
  .warren-portrait-frame {
    height: 450px;
  }
  .warren-presentation-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 540px) {
  .warren-presentation-section {
    padding: 56px 0;
  }
  .warren-portrait-frame {
    height: 380px;
  }
  .presentation-name {
    font-size: 28px;
  }
  .presentation-role-badge {
    font-size: 19px;
  }
  .warren-presentation-stats {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .warren-stat-card {
    padding: 12px 10px;
  }
  .warren-presentation-cta-btn {
    width: 100%;
    justify-content: center;
  }
  .warren-presentation-cta-sub {
    font-size: 11.5px;
  }
}

/* ==========================================================================
   SECTION 4: CINEMATIC SHOWCASE SLIDER (FULL-WIDTH LUXURY COVERFLOW)
   ========================================================================== */
.portfolio-showcase-section {
  position: relative;
  background: transparent;
  padding: 130px 0 120px 0;
  overflow: hidden;
  border: none;
  border-top: none;
  width: 100%;
}

.portfolio-showcase-section::before {
  display: none;
}

/* Header Area - 2 Columns Grand Editorial Layout */
.portfolio-showcase-header {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1560px;
  margin: 0 auto clamp(36px, 5vh, 60px) auto;
  padding: 0 clamp(24px, 4vw, 64px);
  text-align: left;
}

.portfolio-showcase-header-grid {
  display: grid;
  grid-template-columns: 1.55fr 0.95fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* About Page Specific Balanced Editorial Layout */
.about-page .portfolio-showcase-section {
  padding: clamp(50px, 5.5vw, 80px) 0 clamp(36px, 4vw, 56px) 0;
}

.about-page .portfolio-showcase-header {
  max-width: 1400px;
  margin: 0 auto clamp(24px, 3vh, 36px) auto;
}

.about-page .portfolio-showcase-header-grid {
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(36px, 4.5vw, 64px);
  align-items: flex-end;
}

.about-page .portfolio-header-right {
  max-width: 540px;
}

.portfolio-header-overline {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-bleu-iceberg);
  margin-bottom: 12px;
  display: inline-block;
}

.portfolio-industry-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}

.portfolio-industry-tags .ind-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(247, 247, 242, 0.78);
  letter-spacing: 0.02em;
  transition: all 0.3s ease;
}

.portfolio-industry-tags .ind-tag:hover {
  background: rgba(143, 216, 248, 0.08);
  border-color: rgba(143, 216, 248, 0.32);
  color: #FFFFFF;
  transform: translateY(-1px);
}

.portfolio-industry-tags .ind-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-vert-menthe);
  box-shadow: 0 0 6px var(--color-vert-menthe);
  display: inline-block;
}

.portfolio-cta-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.portfolio-cta-note {
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(247, 247, 242, 0.5);
  letter-spacing: 0.02em;
}

@media (max-width: 1100px) {
  .portfolio-showcase-header-grid,
  .about-page .portfolio-showcase-header-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: flex-start;
  }
}

.portfolio-header-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  width: 100%;
}

.portfolio-tag-mono {
  font-family: var(--font-mono);
  font-size: clamp(11px, 0.85vw, 12.5px);
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #9BE7C4;
  text-transform: uppercase;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.portfolio-showcase-title {
  font-family: var(--font-title);
  font-size: clamp(28px, 2.75vw, 44px);
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: #FFFFFF;
  margin: 0;
  text-align: left;
  max-width: 100%;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s,
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
  will-change: opacity, transform;
}

.portfolio-typewriter-phrase {
  display: inline;
  white-space: nowrap;
}

.portfolio-showcase-title .title-serif-accent {
  font-family: var(--font-serif-accent);
  font-style: italic;
  font-weight: 300;
  background: linear-gradient(90deg, #8FD8F8 0%, #9BE7C4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  display: inline;
  margin-left: 4px;
}

.portfolio-typewriter-phrase .typewriter-cursor {
  display: inline-block;
  margin-left: 2px;
  color: #9BE7C4;
  font-weight: 300;
  font-family: var(--font-body);
  animation: typewriterCursorBlink 0.9s infinite;
  opacity: 0.9;
}

.portfolio-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 20px;
  max-width: 520px;
}

.portfolio-showcase-sub {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.15vw, 17px);
  font-weight: 400;
  line-height: 1.68;
  color: rgba(247, 247, 242, 0.72);
  margin: 0;
  text-align: left;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s,
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
  will-change: opacity, transform;
}

/* Luxury Interactive CTA Button to Explore Portfolio */
.portfolio-explore-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 8px 18px 8px 12px;
  border-radius: 9999px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%), rgba(14, 16, 22, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  text-decoration: none;
  cursor: pointer;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.3s,
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.3s,
              border-color 0.35s ease,
              box-shadow 0.35s ease,
              background 0.35s ease;
  will-change: opacity, transform;
}

.portfolio-explore-cta:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%), rgba(20, 24, 32, 0.95);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}

.portfolio-cta-icon-box {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.portfolio-cta-icon-box svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.portfolio-explore-cta:hover .portfolio-cta-icon-box {
  transform: scale(1.12) rotate(-3deg);
}

.portfolio-cta-title {
  font-family: var(--font-title);
  font-size: clamp(14.5px, 1.05vw, 16px);
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.portfolio-cta-title .badge-accent-serif {
  font-family: var(--font-serif-accent);
  font-style: italic;
  font-weight: 400;
  font-size: 1.18em;
  letter-spacing: 0.01em;
  background: linear-gradient(90deg, #8FD8F8 0%, #9BE7C4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  display: inline-block;
  margin-left: 2px;
}

.portfolio-cta-arrow-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9BE7C4;
  margin-left: 4px;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.35s ease,
              color 0.35s ease,
              border-color 0.35s ease;
  flex-shrink: 0;
}

.portfolio-explore-cta:hover .portfolio-cta-arrow-circle {
  transform: translate(3px, -3px);
  background: #9BE7C4;
  color: #080A0F;
  border-color: #9BE7C4;
}

.coverflow-stage-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 20px 0 30px 0;
  min-height: 600px;
  opacity: 1;
  transform: none;
}

.coverflow-bottom-hud {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 10px;
  z-index: 10;
  opacity: 1;
  transform: none;
}

/* In-View Revealed State */
.portfolio-showcase-section.is-in-view .portfolio-tag-mono,
.portfolio-showcase-section.is-in-view .portfolio-showcase-title,
.portfolio-showcase-section.is-in-view .portfolio-showcase-sub,
.portfolio-showcase-section.is-in-view .portfolio-explore-cta,
.portfolio-showcase-section.is-in-view .coverflow-bottom-hud {
  opacity: 1;
  transform: translateY(0);
}

.portfolio-showcase-section.is-in-view .coverflow-stage-wrap {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.coverflow-slider-container {
  position: relative;
  width: 100%;
  height: clamp(480px, 44vw, 680px);
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1600px;
}

.coverflow-track {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Coverflow Slide - Cinematic Proportions */
.coverflow-slide {
  position: absolute;
  width: clamp(750px, 68vw, 1180px);
  height: clamp(420px, 39vw, 650px);
  border-radius: 26px;
  overflow: hidden;
  background: #0E1015;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.85);
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s ease,
              box-shadow 0.4s ease;
  cursor: pointer;
  transform-origin: center center;
  will-change: transform, opacity, filter;
}

/* Slide Positions: Center Active + Blurred/Paused Flanking Slides */
.coverflow-slide.active {
  transform: translateX(0) scale(1);
  opacity: 1;
  z-index: 10;
  filter: brightness(1) blur(0);
  border-color: rgba(143, 216, 248, 0.35);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.95), 0 0 70px rgba(143, 216, 248, 0.12);
  pointer-events: auto;
}

.coverflow-slide.active .slide-video {
  filter: brightness(0.96) contrast(1.05) blur(0);
}

.coverflow-slide.prev {
  transform: translateX(-56%) scale(0.85);
  opacity: 0.55;
  z-index: 5;
  filter: brightness(0.65) blur(1.5px);
  pointer-events: auto;
}

.coverflow-slide.prev .slide-video {
  filter: brightness(0.65) blur(1.5px);
}

.coverflow-slide.next {
  transform: translateX(56%) scale(0.85);
  opacity: 0.55;
  z-index: 5;
  filter: brightness(0.65) blur(1.5px);
  pointer-events: auto;
}

.coverflow-slide.next .slide-video {
  filter: brightness(0.65) blur(1.5px);
}

.coverflow-slide.hidden-left,
.coverflow-slide.hidden-right {
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  filter: brightness(0.2) blur(10px);
}

.coverflow-slide.hidden-left {
  transform: translateX(-120%) scale(0.7);
}

.coverflow-slide.hidden-right {
  transform: translateX(120%) scale(0.7);
}

/* Slide Media */
.slide-media-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000000;
}

.slide-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.92) contrast(1.05);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}

.coverflow-slide.active:hover .slide-video {
  filter: brightness(1.02) contrast(1.08);
  transform: scale(1.02);
}

.slide-media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.35) 70%, rgba(0, 0, 0, 0.85) 100%);
  pointer-events: none;
}

/* Progressive Bottom 25-30% Backdrop Blur Overlay on Hover */
.slide-bottom-blur-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 38%;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.9) 35%, rgba(0, 0, 0, 0.3) 70%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.9) 35%, rgba(0, 0, 0, 0.3) 70%, rgba(0, 0, 0, 0) 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 3;
}

.coverflow-slide.active:hover .slide-bottom-blur-overlay,
.coverflow-slide.active:focus-within .slide-bottom-blur-overlay {
  opacity: 1;
}

@media (hover: none) {
  .coverflow-slide.active .slide-bottom-blur-overlay {
    opacity: 1;
  }
}

/* Slide Badges (Top-Left Client Logo & Top-Right Aspect Ratio) */
.coverflow-slide .card-client-badge {
  position: absolute;
  top: 28px;
  left: 32px;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  pointer-events: none;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}

.coverflow-slide .card-client-badge-logo {
  height: 64px;
  width: auto;
  max-width: 240px;
  object-fit: contain;
  filter: brightness(0) invert(1) opacity(0.9) drop-shadow(0 4px 16px rgba(0, 0, 0, 0.9));
  transition: filter 0.35s ease, transform 0.35s ease, opacity 0.35s ease;
}

.coverflow-slide.active:hover .card-client-badge-logo {
  filter: brightness(0) invert(1) opacity(1) drop-shadow(0 0 20px rgba(143, 216, 248, 0.95)) drop-shadow(0 6px 18px rgba(0, 0, 0, 0.9));
  transform: scale(1.06);
}

.coverflow-slide .card-ratio-badge {
  position: absolute;
  top: 24px;
  right: 28px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
}

/* Floating Overlay Content - Portfolio Signature Style with No Background Box */
.coverflow-slide .slide-floating-card {
  position: absolute;
  bottom: 30px;
  left: 32px;
  right: 32px;
  max-width: min(90%, 800px);
  width: max-content;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0;
  padding: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  display: flex;
  flex-direction: column;
  gap: 7px;
  z-index: 5;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Card only appears on hover of the active slide */
.coverflow-slide.active:hover .slide-floating-card,
.coverflow-slide.active:focus-within .slide-floating-card {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

@media (hover: none) {
  .coverflow-slide.active .slide-floating-card {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}

.coverflow-slide .grid-card-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}

.coverflow-slide .grid-card-cat {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8FD8F8;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}

.coverflow-slide .grid-card-meta-sep {
  color: rgba(255, 255, 255, 0.4);
  font-size: 10px;
}

.coverflow-slide .grid-card-client-highlight {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #F7F7F2;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}

.coverflow-slide .grid-card-title {
  font-family: var(--font-title);
  font-size: clamp(1.35rem, 2.1vw, 2.1rem);
  font-weight: 900;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  margin: 0;
  color: #FFFFFF;
  line-height: 1.05;
  white-space: nowrap;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.95);
}

@media (max-width: 900px) {
  .coverflow-slide .grid-card-title {
    white-space: normal;
  }
}

.coverflow-slide .accent-gradient-word {
  background: linear-gradient(90deg, #8FD8F8 0%, #9BE7C4 50%, #F7F7F2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.coverflow-slide .grid-card-subtitle {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(247, 247, 242, 0.78);
  margin-bottom: 2px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}

.coverflow-slide .slide-card-desc {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
  max-width: 580px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

.coverflow-slide .grid-card-cta-wrap {
  margin-top: 4px;
}

.coverflow-slide .grid-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 50%, rgba(143, 216, 248, 0.08) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #F7F7F2;
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 30px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  align-self: flex-start;
}

.coverflow-slide .grid-card-cta:hover {
  background: rgba(143, 216, 248, 0.2);
  border-color: rgba(143, 216, 248, 0.7);
  color: #8FD8F8;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 20px rgba(143, 216, 248, 0.3);
}

.coverflow-slide .grid-card-cta .cta-arrow-svg {
  width: 12px;
  height: 12px;
  color: #8FD8F8;
  transition: transform 0.3s ease;
}

.coverflow-slide .grid-card-cta:hover .cta-arrow-svg {
  transform: translate(3px, -3px);
}

/* Coverflow Navigation Arrows */
.coverflow-arrow-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 25;
  cursor: pointer;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: all 0.25s ease;
}

.coverflow-arrow-btn.prev {
  left: 40px;
}

.coverflow-arrow-btn.next {
  right: 40px;
}

.coverflow-arrow-btn:hover {
  background: #F7F7F2;
  border-color: #F7F7F2;
  color: #0A0B0E;
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 8px 24px rgba(255, 255, 255, 0.2);
}

/* Bottom HUD: Pagination Dots & Client Logos */
.coverflow-bottom-hud {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1360px;
  margin: 44px auto 0 auto;
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.coverflow-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

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

.coverflow-dot.active {
  width: 28px;
  border-radius: 9999px;
  background: linear-gradient(90deg, #8FD8F8 0%, #9BE7C4 100%);
  box-shadow: 0 0 14px rgba(143, 216, 248, 0.5);
}

.coverflow-client-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 16px 28px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 9999px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.client-logos-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

.client-logos-strip {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.client-logo-img {
  height: 18px;
  width: auto;
  max-width: 80px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.4;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.client-logo-img:hover {
  opacity: 0.9;
  transform: scale(1.08);
}

@media (max-width: 1080px) {
  .coverflow-slide {
    width: 80vw;
    height: 46vw;
  }
  .coverflow-slide.prev {
    transform: translateX(-45%) scale(0.85);
  }
  .coverflow-slide.next {
    transform: translateX(45%) scale(0.85);
  }
}

@media (max-width: 768px) {
  .portfolio-showcase-section {
    padding: 80px 0 60px 0;
  }
  .portfolio-showcase-header {
    padding: 0 20px;
    margin-bottom: 32px;
  }
  .coverflow-stage-wrap {
    min-height: 460px;
  }
  .coverflow-slider-container {
    height: 390px;
  }
  .coverflow-slide {
    width: 92vw;
    height: 370px;
    border-radius: 20px;
  }
  .coverflow-slide.prev {
    transform: translateX(-15%) scale(0.88);
    opacity: 0;
  }
  .coverflow-slide.next {
    transform: translateX(15%) scale(0.88);
    opacity: 0;
  }
  .slide-floating-card {
    bottom: 16px;
    left: 16px;
    right: 16px;
    max-width: none;
    padding: 18px;
  }
  .coverflow-arrow-btn {
    width: 42px;
    height: 42px;
  }
  .coverflow-arrow-btn.prev {
    left: 12px;
  }
  .coverflow-arrow-btn.next {
    right: 12px;
  }
  .coverflow-client-logos {
    border-radius: 20px;
    padding: 16px;
    flex-direction: column;
    gap: 12px;
  }
}

/* ==========================================================================
   MASONRY AUTO-SLIDING SHOWCASE GRID (ALL WORKS)
   ========================================================================== */
.works-masonry-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 45px 0 65px;
  mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
}

.works-masonry-track-wrap {
  display: flex;
  width: 100%;
  overflow: visible;
  padding: 24px 0;
  margin-bottom: 4px;
  position: relative;
  z-index: 1;
}

.works-masonry-track-wrap:hover,
.works-masonry-track-wrap:focus-within {
  z-index: 25;
}

.works-masonry-track-wrap:last-child {
  margin-bottom: 0;
}

.works-masonry-track {
  display: flex;
  gap: 24px;
  will-change: transform;
  width: max-content;
  align-items: center;
  padding: 10px 0;
}

.works-masonry-track.track-slide-left {
  animation: masonryScrollLeft 55s linear infinite;
}

.works-masonry-track.track-slide-right {
  animation: masonryScrollRight 60s linear infinite;
}

/* Pauses track when ANY card in the viewport is active / hovered */
.works-masonry-viewport.is-paused .works-masonry-track {
  animation-play-state: paused !important;
}

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

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

/* Individual Masonry Card */
.masonry-card {
  position: relative;
  height: clamp(260px, 32vh, 360px);
  border-radius: 20px;
  overflow: hidden;
  background: #080C14;
  border: 1.2px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), 
              filter 0.45s cubic-bezier(0.16, 1, 0.3, 1), 
              opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 0.35s ease, 
              box-shadow 0.45s ease;
  will-change: transform, filter, opacity;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
}

/* Masonry Aspect Ratios */
.masonry-card.card-ratio-9-16 {
  aspect-ratio: 9/16;
}

.masonry-card.card-ratio-16-9 {
  aspect-ratio: 16/9;
}

.masonry-card.card-ratio-4-5 {
  aspect-ratio: 4/5;
}

.masonry-card.card-ratio-4-3 {
  aspect-ratio: 4/3;
}

/* Media Wrap */
.masonry-media-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.masonry-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  background: #000;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.masonry-card:hover .masonry-video,
.masonry-card.is-active .masonry-video {
  transform: scale(1.05);
}

/* Dark Scrim - Only appears on hover */
.masonry-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(4, 7, 14, 0.95) 0%, rgba(4, 7, 14, 0.45) 45%, transparent 80%);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.masonry-card:hover .masonry-scrim,
.masonry-card.is-active .masonry-scrim {
  opacity: 1;
}

/* Floating Luxury Client Badge (Top-Left) - ALWAYS VISIBLE */
.masonry-client-badge {
  position: absolute;
  top: 18px;
  left: 20px;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  pointer-events: none;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}

.masonry-client-logo {
  height: 24px;
  width: auto;
  max-width: 90px;
  object-fit: contain;
  filter: brightness(0) invert(1) opacity(0.85) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.9));
  transition: filter 0.35s ease, transform 0.35s ease, opacity 0.35s ease;
}

.masonry-card:hover .masonry-client-logo,
.masonry-card.is-active .masonry-client-logo {
  filter: brightness(0) invert(1) opacity(1) drop-shadow(0 0 16px rgba(143, 216, 248, 0.95)) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.9));
  transform: scale(1.08);
}

/* Content Info Overlay at Bottom - APPEARS ONLY ON HOVER */
.masonry-info-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 18px 20px;
  z-index: 5;
  pointer-events: none;
  text-align: left;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.masonry-card:hover .masonry-info-overlay,
.masonry-card.is-active .masonry-info-overlay {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.masonry-cat-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8FD8F8;
  margin-bottom: 3px;
}

.masonry-title {
  font-family: var(--font-title);
  font-size: clamp(14px, 1.2vw, 19px);
  font-weight: 850;
  color: #FFFFFF;
  margin: 0 0 4px 0;
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

.masonry-title .accent-gradient-word {
  background: linear-gradient(90deg, #8FD8F8 0%, #9BE7C4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.masonry-desc {
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.4;
  color: rgba(247, 247, 242, 0.78);
  margin: 0 0 8px 0;
  max-width: 95%;
  opacity: 0.9;
}

.masonry-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: all 0.25s ease;
  width: fit-content;
}

.masonry-card:hover .masonry-card-cta {
  background: rgba(143, 216, 248, 0.2);
  border-color: #8FD8F8;
  box-shadow: 0 0 12px rgba(143, 216, 248, 0.3);
}

/* ==========================================================================
   INTERACTIVE SIBLING BLUR EFFECT
   ========================================================================== */
.works-masonry-viewport.has-active-card .masonry-card:not(.is-active) {
  filter: blur(8px) brightness(0.4) saturate(65%);
  opacity: 0.35;
  transform: scale(0.96);
  pointer-events: none;
}

.works-masonry-viewport.has-active-card .masonry-card.is-active {
  transform: scale(1.05);
  z-index: 45;
  border-color: #8FD8F8;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.95), 
              0 0 35px rgba(143, 216, 248, 0.35), 
              inset 0 0 1px rgba(255, 255, 255, 0.8);
  filter: blur(0px) brightness(1.05) saturate(110%);
  opacity: 1;
}

/* In Formation Pages context */
.formation-masonry-works-section {
  position: relative;
  width: 100%;
  padding: 80px 0 30px;
  background: radial-gradient(circle at 50% 10%, rgba(143, 216, 248, 0.04) 0%, transparent 60%);
}

.formation-masonry-header {
  max-width: 1380px;
  margin: 0 auto 36px;
  padding: 0 clamp(20px, 4vw, 60px);
  text-align: center;
}

.formation-masonry-title {
  font-family: var(--font-title);
  font-size: clamp(24px, 3.2vw, 44px);
  font-weight: 850;
  color: #FFFFFF;
  margin: 8px 0 12px;
  letter-spacing: -0.02em;
}

.formation-masonry-sub {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.05vw, 17px);
  color: rgba(247, 247, 242, 0.75);
  max-width: 680px;
  margin: 0 auto;
  line-height: 1.55;
}

/* ==========================================================================
   GLOBAL CINEMATIC SECTION ENTRANCE & SCROLL REVEAL SYSTEM
   ========================================================================== */
.portfolio-showcase-section,
.formation-masonry-works-section {
  opacity: 1 !important;
  transform: none !important;
}

section,
.home-subhero-clients-section,
.home-problem-angle-section,
.formations-section,
.kpi-ticker-section,
.section-reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

section.is-revealed,
.home-subhero-clients-section.is-revealed,
.home-problem-angle-section.is-revealed,
.formations-section.is-revealed,
.kpi-ticker-section.is-revealed,
.portfolio-showcase-section.is-revealed,
.section-reveal.is-revealed {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Staggered entrance for key inner section components */
.formations-header-wrapper,
.formations-tabs-controller-wrap,
.masterclass-studio-card,
.b2b-offer-card,
.kpi-ticker-container,
.portfolio-showcase-header,
.coverflow-stage-wrap,
.subhero-clients-container,
.problem-angle-container,
.audience-header-wrapper,
.audience-slider-wrapper {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.is-revealed .formations-header-wrapper,
.is-revealed .subhero-clients-container,
.is-revealed .problem-angle-container,
.is-revealed .portfolio-showcase-header,
.is-revealed .kpi-ticker-container,
.is-revealed .audience-header-wrapper {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.08s;
}

.is-revealed .audience-slider-wrapper {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}

.is-revealed .formations-tabs-controller-wrap {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.18s;
}

.is-revealed .masterclass-studio-card,
.is-revealed .coverflow-stage-wrap {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.26s;
}

.is-revealed .b2b-offer-card:nth-child(1) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.12s;
}

.is-revealed .b2b-offer-card:nth-child(2) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.24s;
}

.is-revealed .b2b-offer-card:nth-child(3) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.36s;
}

/* ==========================================================================
   SECTION: FREE RESOURCES PREVIEW (HOME)
   ========================================================================== */
.home-resources-preview-section {
  position: relative;
  width: 100%;
  padding: clamp(80px, 10vh, 130px) 0 clamp(70px, 9vh, 120px) 0;
  background: #080A0F;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  box-sizing: border-box;
  overflow: hidden;
}

.resources-preview-container {
  width: 100%;
  max-width: 1540px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  gap: clamp(36px, 5vh, 52px);
}

.resources-preview-header {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(14px, 2vh, 20px);
}

.resources-preview-tag-mono {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #9BE7C4;
  text-transform: uppercase;
}

.resources-preview-header {
  margin-bottom: 40px;
  text-align: center;
}

.resources-preview-tag-mono {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #9BE7C4;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: block;
}

.resources-preview-title {
  font-family: var(--font-title);
  font-size: clamp(2.2rem, 3.8vw, 3.5rem);
  font-weight: 400;
  line-height: 1.18;
  color: #FFFFFF;
  letter-spacing: -0.02em;
  max-width: 1300px;
  margin: 0 auto 16px auto;
  text-align: center;
}

.resources-preview-title .title-serif-accent {
  font-family: var(--font-accent) !important;
  font-style: italic !important;
  font-weight: 300 !important;
  background: linear-gradient(135deg, #8FD8F8 0%, #9BE7C4 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  display: inline-block;
  margin-left: 6px;
  text-transform: lowercase;
}

.resources-preview-desc {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.6;
  color: rgba(247, 247, 242, 0.65);
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

/* Luxury Interactive CTA Button to Explore Resources (Matches Screenshot 2) */
.resources-header-cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: 26px;
}

.resources-explore-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 8px 18px 8px 12px;
  border-radius: 9999px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%), rgba(14, 16, 22, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s ease,
              box-shadow 0.35s ease,
              background 0.35s ease;
}

.resources-explore-cta:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%), rgba(20, 24, 32, 0.95);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}

.resources-cta-icon-box {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.resources-cta-icon-box svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.resources-explore-cta:hover .resources-cta-icon-box {
  transform: scale(1.12) rotate(-3deg);
}

.resources-cta-title {
  font-family: var(--font-title);
  font-size: clamp(14.5px, 1.05vw, 16px);
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.resources-cta-title .badge-accent-serif {
  font-family: var(--font-serif-accent);
  font-style: italic;
  font-weight: 400;
  font-size: 1.18em;
  letter-spacing: 0.01em;
  background: linear-gradient(90deg, #8FD8F8 0%, #9BE7C4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  display: inline-block;
  margin-left: 2px;
}

.resources-cta-arrow-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9BE7C4;
  margin-left: 4px;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.35s ease,
              color 0.35s ease,
              border-color 0.35s ease;
  flex-shrink: 0;
}

.resources-explore-cta:hover .resources-cta-arrow-circle {
  transform: translate(3px, -3px);
  background: #9BE7C4;
  color: #080A0F;
  border-color: #9BE7C4;
}

/* 4-Card Luxury Grid */
.resources-preview-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 48px;
}

@media (max-width: 1280px) {
  .resources-preview-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .resources-preview-grid {
    grid-template-columns: 1fr;
  }
}

/* Individual Luxury Card */
.resource-preview-card {
  position: relative;
  height: clamp(300px, 23vw, 340px);
  border-radius: 18px;
  overflow: hidden;
  background: #0D1117;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 0.4s ease;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  box-sizing: border-box;
  width: 100%;
}

.resource-preview-card:hover {
  transform: translateY(-8px) scale(1.03);
  border-color: rgba(155, 231, 196, 0.6);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.95), 0 0 40px rgba(155, 231, 196, 0.2);
  z-index: 10;
}

/* Full Background Artwork (Blurred) */
.resource-card-bg-wrap {
  position: absolute;
  inset: -15px;
  z-index: 1;
  overflow: hidden;
}

.resource-card-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
  filter: blur(5px) brightness(0.68) contrast(1.1);
  transform: scale(1.1);
}

.resource-preview-card:hover .resource-card-bg-img {
  transform: scale(1.16);
  filter: blur(8px) brightness(0.2) contrast(1.15);
}

.resource-card-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 10, 15, 0.2) 0%, rgba(8, 10, 15, 0.35) 45%, rgba(8, 10, 15, 0.9) 100%);
  transition: opacity 0.5s ease, background 0.5s ease;
}

.resource-preview-card:hover .resource-card-scrim {
  background: linear-gradient(180deg, rgba(8, 10, 15, 0.4) 0%, rgba(8, 10, 15, 0.75) 45%, rgba(8, 10, 15, 0.98) 100%);
}

/* Top Floating Row */
.resource-card-top-row {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

/* Animated Free Badge in Resource Cards */
.resource-card-free-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(40px, 3.4vw, 48px);
  height: clamp(40px, 3.4vw, 48px);
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%), rgba(12, 14, 18, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 4px;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s ease,
              box-shadow 0.35s ease;
  pointer-events: none;
}

.resource-preview-card:hover .resource-card-free-badge {
  transform: scale(1.12) rotate(4deg);
  border-color: rgba(255, 255, 255, 0.32);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.resource-lottie-free {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.resource-lottie-free svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.resource-card-free-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #080A0F;
  background: #9BE7C4;
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Resting State: Prominent Tool Logo in Center (No BG Box, No Title) */
.resource-card-resting-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 86%;
  max-width: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  pointer-events: none;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
              opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.resource-brand-logo {
  width: 100%;
  height: auto;
  max-height: 110px;
  object-fit: contain;
  filter: brightness(0) invert(1) drop-shadow(0 6px 25px rgba(0, 0, 0, 0.95));
}

/* Specific scale boost for Nano Banana logo */
.resource-preview-card[data-resource="nano-banana"] .resource-brand-logo {
  transform: scale(1.35);
  transform-origin: center;
}

/* On Card Hover: Logo Shifts Up and fades out smoothly */
.resource-preview-card:hover .resource-card-resting-logo {
  transform: translate(-50%, -100%) scale(0.8);
  opacity: 0;
}

/* Hover State: Structured Editorial Layout */
.resource-card-hover-panel {
  position: absolute;
  inset: 0;
  z-index: 4;
  padding: 16px 15px 15px 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-radius: 0;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: none;
  box-sizing: border-box;
}

.resource-preview-card:hover .resource-card-hover-panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.resource-hover-top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding-right: 56px;
}

.resource-cat-badge {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #9BE7C4;
  text-transform: uppercase;
}

.resource-hover-middle {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.resource-hover-heading {
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.22;
  margin: 0;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95);
}

.resource-hover-summary {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.42;
  color: rgba(247, 247, 242, 0.88);
  margin: 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95);
}

.resource-hover-bottom {
  width: 100%;
}

.resource-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 14px;
  border-radius: 999px;
  background: #9BE7C4;
  border: 1px solid #9BE7C4;
  color: #080A0F;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.02em;
  box-sizing: border-box;
  transition: background 0.25s ease, transform 0.25s ease;
  box-shadow: none;
}

.resource-cta-btn .cta-arrow-svg {
  transition: transform 0.3s ease;
  stroke: currentColor;
}

.resource-preview-card:hover .resource-cta-btn:hover {
  background: #B8F5DA;
  transform: translateY(-1px);
}

.resource-preview-card:hover .resource-cta-btn:hover .cta-arrow-svg {
  transform: translateX(3px) translateY(-1px);
}

/* Bottom Hub Action Button */
.resources-preview-bottom-action {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}

.resources-hub-explore-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #9BE7C4;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(155, 231, 196, 0.4);
  border-radius: 999px;
  padding: 14px 32px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: none;
}

.resources-hub-explore-btn:hover {
  background: #9BE7C4;
  border-color: #9BE7C4;
  color: #080A0F;
  transform: translateY(-2px);
  box-shadow: none;
}

.resources-hub-explore-btn .cta-arrow-svg {
  transition: transform 0.3s ease;
  stroke: currentColor;
}

.resources-hub-explore-btn:hover .cta-arrow-svg {
  transform: translateX(4px);
}

.is-revealed .resources-preview-container {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}

/* ==========================================================================
   AI NEWS & EDITORIAL ARTICLES HUB STYLES
   ========================================================================== */

/* News Grid Cards: Full Uncropped Image, Zero Tint at Rest, Blur & Reveal on Hover */
#newsGridContainer {
  grid-template-columns: repeat(auto-fill, minmax(clamp(340px, 32vw, 560px), 1fr));
  gap: 32px;
}

.news-article-card {
  position: relative;
  background: #080A0F;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  aspect-ratio: 16 / 9;
  width: 100%;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s ease,
              box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  cursor: pointer;
}

.news-article-card:hover {
  transform: translateY(-6px) scale(1.01);
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8), 0 0 30px rgba(143, 216, 248, 0.08);
}

.news-card-media-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #080A0F;
  z-index: 1;
}

.news-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: none;
  opacity: 1;
  transition: filter 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.news-article-card:hover .news-card-img {
  transform: scale(1.08);
  filter: blur(14px) brightness(0.42) saturate(1.25);
}

.news-card-scrim {
  display: none;
}

.news-card-content {
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: clamp(18px, 1.8vw, 24px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(180deg, rgba(8, 10, 15, 0.42) 0%, rgba(8, 10, 15, 0.8) 100%);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.news-article-card:hover .news-card-content {
  opacity: 1;
  pointer-events: auto;
}

/* Staggered Content Animation */
.news-card-top-badges {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  transform: translateY(-6px);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.04s, opacity 0.35s ease 0.04s;
}

.news-article-card:hover .news-card-top-badges {
  transform: translateY(0);
  opacity: 1;
}

.news-source-chip {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 4px 11px;
}

.news-source-chip.mini {
  font-size: 9px;
  padding: 2px 8px;
}

.news-time-chip {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #E2E8F0;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 4px 11px;
}

.news-card-body-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  transform: translateY(8px);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.08s, opacity 0.4s ease 0.08s;
}

.news-article-card:hover .news-card-body-wrap {
  transform: translateY(0);
  opacity: 1;
}

.news-card-meta-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
}

.news-cat-tag {
  color: #8FD8F8;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.news-meta-dot {
  color: rgba(255, 255, 255, 0.3);
}

.news-date-text {
  color: rgba(247, 247, 242, 0.6);
  font-size: 10px;
  letter-spacing: 0.06em;
}

.news-card-title {
  font-family: var(--font-title);
  font-size: clamp(17px, 1.3vw, 21px);
  font-weight: 700;
  line-height: 1.26;
  color: #FFFFFF;
  margin: 0;
  letter-spacing: -0.015em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.news-card-title .serif-italic,
.news-article-card .serif-italic {
  font-family: var(--font-accent) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: -0.01em;
  color: #9BE7C4;
}

.news-card-excerpt {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.55;
  color: rgba(247, 247, 242, 0.85);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

.news-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  gap: 12px;
  transform: translateY(8px);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.12s, opacity 0.4s ease 0.12s;
}

.news-article-card:hover .news-card-footer {
  transform: translateY(0);
  opacity: 1;
}

.news-tags-list {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.news-tag-pill {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 3px 8px;
}

.news-read-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #080A0F;
  background: #FFFFFF;
  border: none;
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  transition: background 0.25s ease, transform 0.25s ease, color 0.25s ease;
}

.news-read-cta:hover {
  background: #9BE7C4;
  color: #080A0F;
  transform: scale(1.05);
}

/* News List View Rows */
.news-list-row {
  display: grid;
  grid-template-columns: 48px 1fr auto auto 44px;
  align-items: center;
  gap: 20px;
  padding: 20px 24px;
  background: rgba(14, 17, 23, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  margin-bottom: 12px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.news-list-row:hover {
  background: rgba(20, 24, 33, 0.9);
  border-color: rgba(143, 216, 248, 0.35);
  transform: translateX(4px);
}

.news-list-col-index {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.3);
}

.news-list-col-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.news-list-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
}

.news-list-title {
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.25s ease;
}

.news-list-row:hover .news-list-title {
  color: #9BE7C4;
}

.news-list-col-tags {
  display: flex;
  align-items: center;
  gap: 6px;
}

.news-list-col-time {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}

.news-list-col-action {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.news-list-arrow-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
}

.news-list-row:hover .news-list-arrow-btn {
  background: #9BE7C4;
  border-color: #9BE7C4;
  color: #080A0F;
  transform: scale(1.1);
}

@media (max-width: 960px) {
  .news-list-row {
    grid-template-columns: 36px 1fr auto;
    padding: 16px;
    gap: 12px;
  }
  .news-list-col-tags,
  .news-list-col-time {
    display: none;
  }
}

/* Home Page AI Radar Showcase Section - Full Width Bleed */
.home-radar-preview-section {
  position: relative;
  width: 100%;
  padding: 100px 0 120px 0;
  background: var(--color-noir-profond, #0A0A0D);
  border-top: 1px solid var(--grid-line-color, rgba(255, 255, 255, 0.07));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(36px, 5vh, 52px);
  box-sizing: border-box;
}

.home-radar-header-wrap {
  width: 100%;
  max-width: 1540px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 64px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.home-radar-bottom-action {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 8px;
}

/* Continuous Infinite Auto-Sliding Single Row Marquee - 100% Full Viewport Width Edge-to-Edge */
.radar-marquee-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  padding: 16px 0 32px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000000 6%, #000000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000000 6%, #000000 94%, transparent 100%);
  box-sizing: border-box;
}

.radar-marquee-track {
  display: flex;
  align-items: center;
  gap: 28px;
  width: max-content;
  animation: radarMarqueeScroll 38s linear infinite;
  will-change: transform;
}

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

.radar-marquee-track .news-article-card {
  flex: 0 0 clamp(380px, 30vw, 560px);
  width: clamp(380px, 30vw, 560px);
  aspect-ratio: 16 / 9;
  min-height: 260px;
  position: relative;
  display: flex;
  cursor: pointer;
}

@keyframes radarMarqueeScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-50% - 14px));
  }
}

@media (max-width: 768px) {
  .home-radar-preview-section {
    padding: 70px 0 90px 0;
    gap: 28px;
  }
  .radar-marquee-container {
    padding: 10px 0 20px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000000 3%, #000000 97%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000000 3%, #000000 97%, transparent 100%);
  }
  .radar-marquee-track {
    gap: 16px;
    animation-duration: 24s;
  }
  .radar-marquee-track .news-article-card {
    flex: 0 0 310px;
    width: 310px;
    min-height: 190px;
  }
  @keyframes radarMarqueeScroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(calc(-50% - 8px));
    }
  }
}

/* Luxury Signature CTA for Resources and Radar Sections */
.home-section-luxury-cta,
.resources-hub-explore-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 36px;
  background: #9BE7C4 !important;
  color: #0A0B0E !important;
  border: 1px solid #9BE7C4 !important;
  border-radius: 9999px !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-shadow: 0 4px 24px rgba(155, 231, 196, 0.28) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer;
}

.home-section-luxury-cta span,
.resources-hub-explore-btn span {
  color: #0A0B0E !important;
  font-weight: 800 !important;
}

.home-section-luxury-cta .cta-arrow-svg,
.resources-hub-explore-btn .cta-arrow-svg {
  color: #0A0B0E !important;
  stroke: #0A0B0E !important;
  transition: transform 0.25s ease !important;
}

.home-section-luxury-cta:hover,
.resources-hub-explore-btn:hover {
  background: #B4F0D6 !important;
  border-color: #B4F0D6 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 32px rgba(155, 231, 196, 0.45) !important;
}

.home-section-luxury-cta:hover .cta-arrow-svg,
.resources-hub-explore-btn:hover .cta-arrow-svg {
  transform: translate(2px, -2px) !important;
}

/* ==========================================================================
   PAGE: FORMATION GEN AI — ÉQUIPES COMMERCIALES (HERO SECTION)
   ========================================================================== */
.formation-page-body {
  background-color: #07080A;
  color: #F7F7F2;
  font-family: var(--font-body);
  overflow-x: hidden;
}

.formation-hero-section {
  position: relative;
  width: 100%;
  height: auto;
  min-height: unset;
  padding: 32px 0 44px;
  overflow: hidden;
  background-color: #07080A;
  display: block;
}

/* Ambient Background Video & Scrim */
.formation-hero-bg-video-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.formation-hero-bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
  filter: saturate(1.15) contrast(1.1) brightness(0.85);
}

.formation-hero-video-scrim {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse at 50% 50%, rgba(7, 8, 10, 0.45) 0%, rgba(7, 8, 10, 0.85) 75%, rgba(7, 8, 10, 0.96) 100%),
    linear-gradient(180deg, rgba(7, 8, 10, 0.7) 0%, transparent 40%, rgba(7, 8, 10, 0.9) 100%);
  pointer-events: none;
  z-index: 3;
}

.formation-hero-glow {
  position: absolute;
  top: 10%;
  left: 25%;
  width: 800px;
  height: 480px;
  background: radial-gradient(ellipse at center, rgba(143, 216, 248, 0.12) 0%, rgba(155, 231, 196, 0.05) 45%, transparent 70%);
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
}

.formation-hero-grid-lines {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%, transparent 75%);
}

.formation-hero-container {
  width: 100%;
  max-width: 100%;
  padding: 0 clamp(24px, 4.5vw, 72px);
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
}

/* Nav Breadcrumbs Row */
.formation-hero-nav-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

.formation-hero-breadcrumbs {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.formation-hero-breadcrumbs .breadcrumb-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(247, 247, 242, 0.6);
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.25s ease;
}

.formation-hero-breadcrumbs .breadcrumb-back-link:hover {
  color: #8FD8F8;
}

.formation-hero-breadcrumbs .breadcrumb-sep {
  color: rgba(255, 255, 255, 0.25);
  font-size: 12px;
}

.formation-hero-breadcrumbs .breadcrumb-current {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #8FD8F8;
  text-transform: uppercase;
}

.formation-hero-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(247, 247, 242, 0.85);
  backdrop-filter: blur(10px);
}

.formation-hero-status-pill .live-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9BE7C4;
  box-shadow: 0 0 8px #9BE7C4;
  animation: pulseGlow 2s infinite;
}

/* Sleek Minimalist Hero Badge */
.formation-hero-pills-group {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 6px;
}

.hero-chip-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(247, 247, 242, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-chip-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(143, 216, 248, 0.35);
  color: #FFFFFF;
}

.hero-chip-pill.hero-chip-rec {
  border-color: rgba(255, 75, 75, 0.35);
  color: #FFFFFF;
}

.hero-chip-pill.hero-chip-rec .rec-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #FF3B30;
  box-shadow: 0 0 8px #FF3B30;
  animation: pulseLiveDot 1.4s infinite ease-in-out;
}

.accent-dot {
  font-family: var(--font-accent) !important;
  font-style: italic !important;
  font-weight: 400;
  color: var(--color-bleu-iceberg) !important;
  font-size: 1.45em;
  line-height: 0;
  vertical-align: -0.05em;
  display: inline-block;
  margin: 0 5px;
  text-shadow: 0 0 8px rgba(143, 216, 248, 0.45);
}

.formation-hero-overline {
  font-family: var(--font-mono);
  font-size: clamp(12px, 0.95vw, 14px);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(143, 216, 248, 0.9);
  margin-top: 6px;
  margin-bottom: 8px;
  text-align: center;
}

.formation-hero-minimal-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 18px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(247, 247, 242, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  margin-bottom: 2px;
  transition: border-color 0.3s ease, background 0.3s ease;
}

.formation-hero-minimal-badge:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(143, 216, 248, 0.3);
}

.formation-hero-minimal-badge .badge-accent-gradient {
  font-family: var(--font-accent) !important;
  font-style: italic !important;
  font-weight: 500;
  text-transform: none !important;
  letter-spacing: 0.02em;
  font-size: 1.25em;
  line-height: 1;
  background: linear-gradient(135deg, #FFFFFF 0%, #8FD8F8 50%, #9BE7C4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  margin-left: 2px;
  vertical-align: baseline;
}

.formation-hero-minimal-badge .badge-sep {
  color: rgba(255, 255, 255, 0.2);
  font-weight: 400;
}

.formation-hero-minimal-badge .badge-highlight {
  color: #8FD8F8;
  font-weight: 800;
}

/* Title Wrap & Typography */
.formation-hero-title-wrap {
  width: 100%;
  max-width: 100%;
  display: flex;
  justify-content: center;
}

.formation-hero-title {
  font-family: var(--font-title);
  font-size: clamp(34px, 4.4vw, 70px);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: #FFFFFF;
  text-transform: uppercase;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}

.formation-title-line {
  display: inline-block;
  text-align: center;
}

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

.formation-hero-title .accent-gradient-word {
  font-size: 0.95em;
}

/* Description */
.formation-hero-desc {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.62;
  color: rgba(247, 247, 242, 0.82);
  max-width: 920px;
  margin: 2px auto 6px;
  text-align: center;
}

.formation-hero-desc strong {
  color: #FFFFFF;
  font-weight: 700;
}

.formation-hero-desc em {
  color: #8FD8F8;
  font-style: normal;
  font-weight: 600;
}

/* CTAs Row */
.formation-hero-ctas-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.formation-hero-primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 34px;
  border-radius: 9999px;
  background: #FFFFFF;
  color: #07080A !important;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid #FFFFFF;
  box-shadow: 0 8px 32px rgba(255, 255, 255, 0.18);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.formation-hero-primary-btn span {
  color: #07080A !important;
  font-weight: 800 !important;
}

.formation-hero-primary-btn .cta-arrow-svg {
  stroke: #07080A !important;
  transition: transform 0.25s ease;
}

.formation-hero-primary-btn:hover {
  background: #8FD8F8;
  border-color: #8FD8F8;
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(143, 216, 248, 0.4);
}

.formation-hero-primary-btn:hover .cta-arrow-svg {
  transform: translate(3px, -3px);
}

.formation-hero-secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #F7F7F2;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  backdrop-filter: blur(12px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.formation-hero-secondary-btn:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}

.formation-hero-secondary-btn:hover .cta-arrow-down-svg {
  transform: translateY(2px);
}

/* Floating Architectural Metrics Ribbon */
.formation-hero-metrics-bar {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  overflow: hidden;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  margin-top: 18px;
}

.formation-metric-item {
  background: rgba(10, 12, 16, 0.85);
  padding: 22px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: background 0.3s ease;
}

.formation-metric-item:hover {
  background: rgba(16, 20, 26, 0.95);
}

.formation-metric-item .metric-num-wrap {
  display: flex;
  align-items: baseline;
}

.formation-metric-item .metric-val {
  font-family: var(--font-title);
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  line-height: 1;
}

.formation-metric-item .metric-suffix {
  color: #8FD8F8;
  font-size: 20px;
  font-weight: 800;
  margin-left: 2px;
}

.formation-metric-item .metric-info-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.formation-metric-item .metric-title {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #8FD8F8;
  text-transform: uppercase;
}

.formation-metric-item .metric-desc {
  font-family: var(--font-body);
  font-size: 11.5px;
  color: rgba(247, 247, 242, 0.65);
  line-height: 1.4;
}

@media (max-width: 1024px) {
  .formation-hero-metrics-bar {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   HERO TRUSTED BY SLIDING LOGOS MARQUEE (PROMINENT LUXURY SIZE)
   ========================================================================== */
.formation-hero-trusted-wrap {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.trusted-by-label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(247, 247, 242, 0.5);
}

.formation-trusted-marquee-viewport {
  width: 100%;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 90%, transparent 100%);
}

.formation-trusted-marquee-track {
  display: flex;
  width: max-content;
  align-items: center;
  animation: trusted-hero-marquee-slide 38s linear infinite;
  will-change: transform;
}

.formation-hero-trusted-wrap:hover .formation-trusted-marquee-track {
  animation-play-state: paused;
}

.formation-trusted-marquee-group {
  display: flex;
  align-items: center;
  gap: clamp(48px, 5.5vw, 84px);
  padding-right: clamp(48px, 5.5vw, 84px);
  flex-shrink: 0;
}

.trusted-logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  opacity: 0.72;
  transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease;
  filter: grayscale(100%) brightness(2.2) contrast(1.1);
}

.trusted-logo-item:hover {
  opacity: 1;
  filter: grayscale(0%) brightness(1.25);
  transform: scale(1.1);
}

.trusted-client-logo {
  max-height: clamp(38px, 3.2vw, 48px);
  max-width: clamp(140px, 11vw, 175px);
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

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

@media (max-width: 640px) {
  .formation-hero-section {
    padding: 24px 0 40px;
  }

  .formation-hero-metrics-bar {
    grid-template-columns: 1fr;
  }
  
  .formation-hero-primary-btn,
  .formation-hero-secondary-btn {
    width: 100%;
  }

  .trusted-logo-item {
    height: 48px;
  }

  .trusted-client-logo {
    max-height: 28px;
    max-width: 110px;
  }
}

/* ==========================================================================
   SECTION 02: VOTRE FORMATEUR — CENTERED STICKY EDITORIAL & 3-ROW MEDIA GRID
   ========================================================================== */
.formation-instructor-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px 0 80px;
  overflow: visible;
  background-color: #07080A;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-sizing: border-box;
}

.instructor-section-glow {
  position: absolute;
  top: 30%;
  right: -5%;
  width: 650px;
  height: 500px;
  background: radial-gradient(ellipse at center, rgba(143, 216, 248, 0.08) 0%, rgba(155, 231, 196, 0.03) 45%, transparent 70%);
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
}

.formation-section-container {
  width: 100%;
  max-width: 100%;
  padding: 0 clamp(24px, 4.5vw, 72px);
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 70px;
}

/* Header Overline */
.formation-section-header {
  display: flex;
  align-items: center;
}

.section-badge-overline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8FD8F8;
  backdrop-filter: blur(10px);
}

.section-badge-overline .overline-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #8FD8F8;
  box-shadow: 0 0 6px #8FD8F8;
}

/* 2-Column Split: Centered Sticky Left Column + Scrolling Media Right Column */
.instructor-split-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5.5vw, 84px);
  align-items: flex-start;
  position: relative;
  width: 100%;
}

/* ==========================================================================
   LEFT COLUMN: CENTERED CONTENT & STICKY ON SCROLL
   ========================================================================== */
.instructor-editorial-col {
  position: -webkit-sticky;
  position: sticky;
  top: calc(50vh - 160px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  gap: 20px;
  padding: 10px 0;
  z-index: 5;
}

/* Eyebrow: Editorial reference typography (Uppercase bold + Canela serif italic) */
.section-eyebrow,
.instructor-eyebrow {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 9px;
  margin-bottom: 2px;
}

.section-eyebrow-lead,
.instructor-eyebrow-lead {
  font-family: var(--font-display, var(--font-title));
  font-size: clamp(12px, 0.85vw, 13.5px);
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #E2E8F0;
}

.section-eyebrow-accent,
.instructor-eyebrow-accent {
  font-family: var(--font-accent) !important;
  font-size: clamp(17px, 1.25vw, 20px);
  font-style: italic !important;
  font-weight: 400;
  text-transform: lowercase !important;
  background: linear-gradient(135deg, #F7F7F2 0%, var(--color-bleu-iceberg) 55%, var(--color-vert-menthe) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Heading - Strictly 2 Lines & Centered */
.instructor-heading {
  font-family: var(--font-title);
  font-size: clamp(21px, 2.05vw, 31px);
  font-weight: 900;
  line-height: 1.24;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  text-align: center;
  margin: 0;
}

.instructor-heading .heading-line {
  display: block;
}

.instructor-heading .heading-line-1 {
  white-space: nowrap;
}

.instructor-heading .heading-line-2 {
  font-size: 0.98em;
  white-space: nowrap;
}

.instructor-heading .accent-gradient-word {
  font-size: 0.96em;
}

/* Bio Text - Centered */
.instructor-bio-text {
  font-family: var(--font-body);
  font-size: clamp(14.5px, 1.02vw, 16.5px);
  line-height: 1.7;
  color: rgba(247, 247, 242, 0.76);
  text-align: center;
  max-width: 520px;
  margin: 0 auto;
}

/* Modules Pills Bar */
.equation-modules-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 6px auto 14px;
  max-width: 520px;
}

.equation-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--font-body);
  font-size: clamp(12.5px, 0.88vw, 14px);
  font-weight: 500;
  color: rgba(247, 247, 242, 0.88);
  letter-spacing: -0.01em;
  transition: all 0.25s ease;
}

.equation-pill:hover {
  background: rgba(143, 216, 248, 0.12);
  border-color: rgba(143, 216, 248, 0.4);
  color: #FFFFFF;
  transform: translateY(-2px);
}

/* Primary Button Wrap - Centered */
.instructor-btn-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 4px;
}

/* ==========================================================================
   SECTION 04: L'AUTRE MOITIÉ DE L'ÉQUATION (MAX 65% SCREEN HEIGHT, CAROUSEL BG, ACHREF DOWN)
   ========================================================================== */
.formation-instructor-section#equation {
  min-height: unset !important;
  height: 65vh !important;
  max-height: 65vh !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.formation-instructor-section#equation .formation-section-container {
  height: 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important; /* TOUCHES LEFT SCREEN EDGE FOR EXACT LEFT RECTANGLE */
  padding-right: clamp(24px, 4vw, 64px) !important;
}

.formation-instructor-section#equation .instructor-split-layout.equation-inverted-layout {
  height: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr) !important;
  gap: clamp(20px, 2.5vw, 46px) !important;
  align-items: center !important;
  position: relative !important;
  width: 100% !important;
}

/* LEFT COLUMN: VISUAL STAGE (SPANS FROM SCREEN LEFT EDGE TO RIGHT RED RECTANGLE) */
.equation-visual-col {
  position: relative;
  display: flex;
  align-items: flex-end; /* ANCHORED AT BOTTOM OF SECTION */
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
}

.equation-visual-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end; /* ANCHORED AT BOTTOM OF SECTION */
  justify-content: center;
  overflow: hidden;
}

/* FADE EFFECT IN AREAS MARKED IN RED RECTANGLES (LEFT SCREEN EDGE & RIGHT BEFORE TEXT) */
.equation-visual-stage::before,
.equation-visual-stage::after {
  content: '';
  position: absolute;
  top: -15%;
  bottom: -15%;
  z-index: 6; /* In front of carousel (z-index: 2), behind Warren (z-index: 10) */
  pointer-events: none;
}

/* Left Red Rectangle: Images finish and fade out cleanly at the left edge of the screen */
.equation-visual-stage::before {
  left: 0;
  width: clamp(70px, 6vw, 120px);
  background: linear-gradient(
    90deg, 
    #07080A 0%, 
    #07080A 20%, 
    rgba(7, 8, 10, 0.88) 55%, 
    transparent 100%
  );
}

/* Right Red Rectangle: Images start and fade in cleanly right before the text */
.equation-visual-stage::after {
  right: 0;
  width: clamp(80px, 7vw, 130px);
  background: linear-gradient(
    270deg, 
    #07080A 0%, 
    #07080A 20%, 
    rgba(7, 8, 10, 0.88) 55%, 
    transparent 100%
  );
}

/* Ambient Backlight Halo Behind Achref */
.equation-achref-ambient-glow {
  position: absolute;
  top: 45%;
  left: 48%;
  transform: translate(-50%, -50%);
  width: clamp(320px, 32vw, 460px);
  height: clamp(320px, 32vw, 460px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(143, 216, 248, 0.22) 0%, rgba(155, 231, 196, 0.08) 50%, transparent 70%);
  filter: blur(55px);
  z-index: 3;
  pointer-events: none;
}

/* CAROUSEL OF AI IMAGES HE GENERATED (START & FINISH AT MARKED RECTANGLES) */
.equation-carousel-wrapper {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-3.5deg);
  width: 100%;
  height: clamp(200px, 22vw, 290px);
  display: flex;
  align-items: center;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
  /* Ultra-smooth progressive fade effect matching the red rectangle areas */
  mask-image: linear-gradient(
    90deg, 
    transparent 0%, 
    rgba(0, 0, 0, 0.1) 2%, 
    rgba(0, 0, 0, 0.85) 6%, 
    black 11%, 
    black 89%, 
    rgba(0, 0, 0, 0.85) 94%, 
    rgba(0, 0, 0, 0.1) 98%, 
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    90deg, 
    transparent 0%, 
    rgba(0, 0, 0, 0.1) 2%, 
    rgba(0, 0, 0, 0.85) 6%, 
    black 11%, 
    black 89%, 
    rgba(0, 0, 0, 0.85) 94%, 
    rgba(0, 0, 0, 0.1) 98%, 
    transparent 100%
  );
}

.equation-carousel-track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: slideEquationCarousel 36s linear infinite;
}

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

.equation-carousel-slide {
  flex-shrink: 0;
  width: clamp(140px, 12.5vw, 185px);
  height: clamp(175px, 16.5vw, 235px);
  border-radius: 16px;
  overflow: hidden;
  border: 1.5px solid rgba(143, 216, 248, 0.32);
  background: #080D14;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.75), 0 0 20px rgba(143, 216, 248, 0.12);
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.equation-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.9) contrast(1.06);
}

/* Cutout Image of Warren Anchored Down at the Bottom of the Section */
.equation-floating-achref-wrap {
  position: absolute;
  bottom: 0;
  left: 48%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  line-height: 0;
  margin: 0;
  padding: 0;
}

.equation-achref-img {
  height: clamp(360px, 60vh, 530px);
  width: auto;
  max-width: 95%;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 -8px 24px rgba(0, 0, 0, 0.85)) 
          drop-shadow(0 0 35px rgba(143, 216, 248, 0.22));
  display: block;
  margin-bottom: 0;
}

/* RIGHT COLUMN: EDITORIAL CONTENT (CENTERED AS REQUESTED) */
.instructor-editorial-col.equation-editorial-right {
  position: relative;
  top: auto;
  display: flex;
  flex-direction: column;
  align-items: center !important; /* CENTERED */
  text-align: center !important; /* CENTERED */
  justify-content: center;
  gap: 16px;
  padding: 0;
  z-index: 5;
}

.instructor-editorial-col.equation-editorial-right .section-eyebrow {
  justify-content: center !important;
  text-align: center !important;
  margin: 0 auto !important;
}

.equation-heading-right {
  text-align: center !important;
  margin: 0 auto !important;
  font-size: clamp(22px, 2.2vw, 34px) !important;
  line-height: 1.2 !important;
  max-width: 580px !important;
}

.equation-bio-right {
  text-align: center !important;
  max-width: 560px !important;
  margin: 0 auto !important;
  font-size: clamp(14px, 1.02vw, 16px) !important;
  line-height: 1.62 !important;
}

.equation-pills-right {
  justify-content: center !important;
  margin: 6px auto 12px auto !important;
  max-width: 100% !important;
  width: 100% !important;
}

.equation-btn-right {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 auto !important;
}

.media-grid-tile:hover {
  filter: blur(0px) brightness(1.08) saturate(105%);
  opacity: 1;
  transform: scale(1.025);
  z-index: 10;
  border-color: rgba(143, 216, 248, 0.65);
  box-shadow: 
    0 20px 45px rgba(0, 0, 0, 0.85),
    0 0 30px rgba(143, 216, 248, 0.25);
}

.media-grid-tile:hover .tile-media-asset {
  transform: scale(1.05);
}

/* ==========================================================================
   BOTTOM AUTHORITY STATS (SAME 4 KPIS AS HOME PAGE)
   ========================================================================== */
.instructor-kpis-banner {
  width: 100%;
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0 20px;
  gap: clamp(14px, 2.2vw, 32px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin: 0;
  flex-wrap: wrap;
}

.instructor-kpis-banner .kpi-divider {
  width: 1px;
  height: 38px;
  background: rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */
@media (max-width: 1024px) {
  .formation-instructor-section {
    height: auto;
    min-height: unset;
    max-height: none;
    padding: 60px 0 40px;
  }

  .formation-instructor-section#equation {
    height: auto !important;
    max-height: none !important;
    min-height: unset !important;
    padding: 60px 0 0 0 !important;
  }
  .formation-instructor-section#equation .equation-visual-col {
    height: 400px !important;
    min-height: 400px !important;
  }
  .formation-instructor-section#equation .equation-achref-img {
    height: 380px !important;
  }

  .instructor-split-layout {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 0;
  }

  .instructor-kpis-banner {
    justify-content: center;
    gap: 28px;
    padding-top: 24px;
  }

  .instructor-kpis-banner .kpi-divider {
    display: none;
  }

  .instructor-heading .heading-line-1,
  .instructor-heading .heading-line-2 {
    white-space: normal;
  }
}

@media (max-width: 640px) {
  .media-row {
    flex-direction: column;
    height: auto;
  }

  .tile-portrait-narrow,
  .tile-video-wide,
  .tile-video-wide-bottom,
  .tile-video-square {
    flex: 1 1 100%;
    height: 190px;
  }

  .instructor-kpis-banner {
    flex-direction: column;
    align-items: flex-start;
    padding-top: 24px;
    gap: 20px;
  }
}

/* ==========================================================================
   SECTION 03: PROGRAMME / MODULES (SLIDING CARDS WITH HOVER REVEAL)
   ========================================================================== */
.formation-curriculum-section {
  position: relative;
  width: 100%;
  padding: 90px 0 36px;
  background-color: #07080A;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-sizing: border-box;
  overflow: hidden;
}

.curriculum-section-glow {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 500px;
  background: radial-gradient(ellipse at center, rgba(143, 216, 248, 0.07) 0%, rgba(155, 231, 196, 0.03) 50%, transparent 75%);
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
}

/* Section Header (Centered) */
.curriculum-header-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  max-width: 880px;
  margin: 0 auto 36px;
  width: 100%;
}

.curriculum-main-title {
  font-family: var(--font-title);
  font-size: clamp(26px, 2.5vw, 38px);
  font-weight: 900;
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin: 0;
  text-align: center;
}

.curriculum-header-cta {
  margin-top: 8px;
  display: flex;
  justify-content: center;
}

/* Slider Track & Viewport */
.curriculum-slider-wrapper {
  width: 100%;
  position: relative;
  margin-bottom: 24px;
}

.curriculum-cards-viewport {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  cursor: grab;
  padding: 12px 2px 24px 2px;
  box-sizing: border-box;
}

.curriculum-cards-viewport::-webkit-scrollbar {
  display: none;
}

.curriculum-cards-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
  box-sizing: border-box;
}

/* 5-Card Slider Specifics for Creative Formation */
.curriculum-sub-lead {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.05vw, 16.5px);
  color: rgba(247, 247, 242, 0.78);
  max-width: 720px;
  margin: 6px auto 18px;
  text-align: center;
  line-height: 1.6;
}

.formation-creatif-page .curriculum-cards-viewport {
  container-type: inline-size;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 16px 2px 28px 2px;
  cursor: grab;
  width: 100%;
}

.formation-creatif-page .curriculum-cards-viewport::-webkit-scrollbar {
  display: none;
}

.formation-creatif-page .curriculum-cards-viewport:active {
  cursor: grabbing;
}

.formation-creatif-page .curriculum-cards-track {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 24px;
  width: max-content;
}

.formation-creatif-page .module-sliding-card {
  flex: 0 0 calc((100cqw - 48px) / 3);
  width: calc((100cqw - 48px) / 3);
  min-width: calc((100cqw - 48px) / 3);
  max-width: calc((100cqw - 48px) / 3);
  min-height: 480px;
  box-sizing: border-box;
}

@container (max-width: 1080px) {
  .formation-creatif-page .module-sliding-card {
    flex: 0 0 calc((100cqw - 24px) / 2);
    width: calc((100cqw - 24px) / 2);
    min-width: calc((100cqw - 24px) / 2);
    max-width: calc((100cqw - 24px) / 2);
  }
}

@container (max-width: 680px) {
  .formation-creatif-page .module-sliding-card {
    flex: 0 0 calc(100cqw - 8px);
    width: calc(100cqw - 8px);
    min-width: calc(100cqw - 8px);
    max-width: calc(100cqw - 8px);
  }
}

.module-card-tag {
  position: absolute;
  top: 26px;
  left: 28px;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-bleu-iceberg);
  background: rgba(143, 216, 248, 0.08);
  padding: 4px 12px;
  border-radius: 9999px;
  border: 1px solid rgba(143, 216, 248, 0.2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 3;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.module-sliding-card:hover .module-card-tag {
  opacity: 0;
  transform: translateY(-8px);
}

.curriculum-slider-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 18px;
}

.curriculum-nav-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
}

.curriculum-nav-arrow:hover {
  background: rgba(143, 216, 248, 0.15);
  border-color: rgba(143, 216, 248, 0.45);
  color: #8FD8F8;
  transform: scale(1.05);
}

.curriculum-slider-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.curriculum-slider-dots .slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  outline: none;
  padding: 0;
  display: inline-block;
  transition: all 0.3s ease;
  cursor: pointer;
}

.curriculum-slider-dots .slider-dot.active {
  width: 24px;
  border-radius: 9999px;
  background: var(--color-bleu-iceberg);
  box-shadow: 0 0 10px rgba(143, 216, 248, 0.5);
}

@media (min-width: 1081px) {
  .curriculum-slider-nav.is-static-desktop {
    display: none !important;
  }
}

@media (max-width: 1080px) {
  .curriculum-slider-nav.is-static-desktop {
    display: flex !important;
  }
}

.curriculum-cards-track.has-slider-track {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 24px;
  width: max-content;
}

.curriculum-cards-track.has-slider-track .module-sliding-card {
  flex: 0 0 calc((100cqw - 48px) / 3);
  width: calc((100cqw - 48px) / 3);
  min-width: calc((100cqw - 48px) / 3);
  max-width: calc((100cqw - 48px) / 3);
  min-height: 480px;
  box-sizing: border-box;
}

/* Sliding Card */
.module-sliding-card {
  position: relative;
  border-radius: 24px;
  background: rgba(12, 16, 23, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.5);
  padding: 40px 32px;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 480px;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s ease,
              background 0.4s ease,
              box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.module-sliding-card:hover {
  transform: translateY(-8px);
  border-color: rgba(143, 216, 248, 0.45);
  background: rgba(15, 20, 30, 0.96);
  box-shadow: 
    0 24px 60px rgba(0, 0, 0, 0.75),
    0 0 35px rgba(143, 216, 248, 0.12);
}

.module-card-bg-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.module-card-ambient-glow {
  position: absolute;
  inset: 0;
  opacity: 0.4;
  transition: opacity 0.5s ease;
}

.glow-1 {
  background: radial-gradient(circle at 50% 30%, rgba(143, 216, 248, 0.15) 0%, transparent 65%);
}

.glow-2 {
  background: radial-gradient(circle at 50% 30%, rgba(155, 231, 196, 0.15) 0%, transparent 65%);
}

.glow-3 {
  background: radial-gradient(circle at 50% 30%, rgba(200, 160, 255, 0.15) 0%, transparent 65%);
}

.module-sliding-card:hover .module-card-ambient-glow {
  opacity: 0.9;
}

.module-card-glass-noise {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
}

/* Module Card Number (Top Right, Disappears on Hover) */
.module-card-number {
  position: absolute;
  top: 26px;
  right: 28px;
  font-family: var(--font-title);
  font-size: 24px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.22);
  line-height: 1;
  letter-spacing: -0.02em;
  pointer-events: none;
  z-index: 3;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.module-sliding-card:hover .module-card-number {
  opacity: 0;
  transform: translateY(-8px);
}

/* Card Content Structure */
.module-card-main-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 100%;
  justify-content: center;
}

/* Center Block (Icon + Title + Lead) */
.module-card-center-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  transform: translateY(0);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              margin 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.module-card-header-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 14px;
  width: 100%;
}

.module-card-lottie-box {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s ease;
}

.module-sliding-card:hover .module-card-lottie-box {
  background: transparent !important;
  border: none !important;
  transform: scale(1.12);
  box-shadow: none !important;
  filter: drop-shadow(0 0 14px rgba(143, 216, 248, 0.55));
}

.module-card-icon-lottie {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.module-card-icon-lottie svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.module-card-title {
  font-family: var(--font-title);
  font-size: clamp(18px, 1.25vw, 21px);
  font-weight: 800;
  line-height: 1.25;
  color: #FFFFFF;
  margin: 0;
  letter-spacing: -0.015em;
  text-align: left;
}

.module-card-lead {
  font-family: var(--font-body);
  font-size: clamp(13.5px, 0.95vw, 15px);
  line-height: 1.55;
  color: rgba(247, 247, 242, 0.68);
  margin: 0 auto;
  max-width: 360px;
  text-align: center;
  transition: opacity 0.35s ease;
}

/* On Hover: Center block glides smoothly upwards to the top */
.module-sliding-card:hover .module-card-center-block {
  transform: translateY(-16px);
}

/* Hover Content Drawer */
.module-card-hover-drawer {
  width: 100%;
  max-height: 0;
  opacity: 0;
  transform: translateY(20px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  margin-top: 0;
  border-top: 1px dashed transparent;
  transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.45s ease,
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              padding 0.4s ease,
              margin 0.4s ease,
              border-color 0.4s ease;
  text-align: left;
}

.module-sliding-card:hover .module-card-hover-drawer {
  max-height: 380px;
  opacity: 1;
  transform: translateY(0);
  padding-top: 16px;
  margin-top: 12px;
  border-top-color: rgba(255, 255, 255, 0.1);
}


/* ==========================================================================
   MINIMALIST EDITORIAL HOVER DRAWER
   ========================================================================== */
.module-editorial-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  text-align: left;
  margin-bottom: 12px;
}

.module-editorial-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.module-editorial-item:last-child {
  border-bottom: none;
}

.editorial-item-mark {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-bleu-iceberg);
  opacity: 0.85;
  line-height: 1.5;
  flex-shrink: 0;
}

.editorial-item-text {
  font-family: var(--font-body);
  font-size: clamp(12px, 0.86vw, 13.5px);
  line-height: 1.48;
  color: rgba(247, 247, 242, 0.74);
  margin: 0;
}

.editorial-item-text strong {
  color: #FFFFFF;
  font-weight: 600;
}

/* Footer Section with Clean Editorial Livrable & Outcome */
.module-editorial-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding-top: 12px;
  margin-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.module-editorial-meta-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  font-family: var(--font-body);
  font-size: clamp(12.5px, 0.88vw, 13.5px);
  line-height: 1.45;
}

.editorial-meta-label {
  font-family: var(--font-display, var(--font-title));
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-bleu-iceberg);
  flex-shrink: 0;
}

.editorial-meta-label.outcome-label {
  color: var(--color-vert-menthe);
}

.editorial-meta-value {
  color: rgba(247, 247, 242, 0.8);
}

.editorial-meta-value.outcome-value {
  color: #FFFFFF;
}

.editorial-meta-value .serif-italic {
  font-family: var(--font-accent) !important;
  font-style: italic !important;
  font-size: clamp(13.5px, 0.95vw, 15px);
  background: linear-gradient(135deg, #F7F7F2 0%, var(--color-bleu-iceberg) 60%, var(--color-vert-menthe) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 400;
}

.module-card-hint-badge {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(143, 216, 248, 0.6);
  opacity: 0.85;
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}

.module-sliding-card:hover .module-card-hint-badge {
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
}



/* Responsive */
@media (max-width: 1080px) {
  .curriculum-header-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .curriculum-cards-track {
    display: flex;
    width: max-content;
    gap: 20px;
  }

  .module-sliding-card {
    flex: 0 0 340px;
  }
}

/* ==========================================================================
   SECTION: CE QUE VOTRE ÉQUIPE SAURA FAIRE (3 RÉFLEXES SLIDING MARQUEE)
   ========================================================================== */
.formation-reflexes-section {
  position: relative;
  padding: 16px 0;
  background: var(--color-bg);
  overflow: visible;
  z-index: 2;
}

.reflexes-section-glow {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  width: 850px;
  height: 380px;
  background: radial-gradient(ellipse at center, rgba(143, 216, 248, 0.05) 0%, rgba(155, 231, 196, 0.02) 50%, transparent 75%);
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
}

/* Centered Header */
.reflexes-header-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  max-width: 860px;
  margin: 0 auto clamp(24px, 2.6vw, 36px);
  width: 100%;
  position: relative;
  z-index: 2;
}

.reflexes-header-centered .section-eyebrow {
  margin-bottom: 0;
}

.reflexes-main-title {
  font-family: var(--font-title);
  font-size: clamp(26px, 2.6vw, 40px);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: #FFFFFF;
  margin: 0;
}

.reflexes-header-cta {
  margin-top: 6px;
  display: flex;
  justify-content: center;
}

/* Continuous Sliding Marquee Viewport */
.reflexes-marquee-viewport {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  position: relative;
  padding: 10px 0 24px;
  mask-image: linear-gradient(to right, transparent 0%, black 7%, black 93%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 7%, black 93%, transparent 100%);
  z-index: 2;
}

.reflexes-marquee-track {
  display: flex;
  width: max-content;
  gap: 24px;
  animation: reflexContinuousSlide 34s linear infinite;
  will-change: transform;
}

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

@keyframes reflexContinuousSlide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-50% - 12px));
  }
}

/* Individual HUD Cyber-Studio Card */
.reflex-hud-card {
  position: relative;
  flex: 0 0 clamp(360px, 26vw, 420px);
  width: clamp(360px, 26vw, 420px);
  background: linear-gradient(165deg, rgba(12, 16, 25, 0.94) 0%, rgba(7, 9, 15, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: clamp(24px, 2vw, 30px);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.12), 0 20px 48px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  text-align: left;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s ease,
              box-shadow 0.35s ease;
}

.hud-top-shine {
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  pointer-events: none;
  opacity: 0.7;
  transition: opacity 0.35s ease;
}

.reflex-hud-card:hover .hud-top-shine {
  opacity: 1;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
}

.reflex-hud-card:hover {
  transform: translateY(-6px);
}

.hud-cyan:hover {
  border-color: rgba(143, 216, 248, 0.4);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.22), 0 24px 55px rgba(0, 0, 0, 0.65), 0 0 32px rgba(143, 216, 248, 0.14);
}

.hud-mint:hover {
  border-color: rgba(155, 231, 196, 0.4);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.22), 0 24px 55px rgba(0, 0, 0, 0.65), 0 0 32px rgba(155, 231, 196, 0.14);
}

/* Ambient glow */
.hud-ambient-glow {
  position: absolute;
  inset: 0;
  opacity: 0.12;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.hud-cyan .hud-ambient-glow {
  background: radial-gradient(circle at 50% 0%, rgba(143, 216, 248, 0.25) 0%, transparent 65%);
}

.hud-mint .hud-ambient-glow {
  background: radial-gradient(circle at 50% 0%, rgba(155, 231, 196, 0.25) 0%, transparent 65%);
}

.reflex-hud-card:hover .hud-ambient-glow {
  opacity: 0.65;
}

/* Card Header */
.hud-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  position: relative;
  z-index: 2;
}

.hud-tag-box {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.hud-tag-code {
  color: rgba(255, 255, 255, 0.35);
  font-weight: 700;
}

.hud-cyan .hud-tag-name { color: var(--color-bleu-iceberg); }
.hud-mint .hud-tag-name { color: var(--color-vert-menthe); }

.hud-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 9px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.65);
  text-transform: uppercase;
}

/* Card Main */
.hud-card-main {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  z-index: 2;
}

.hud-card-title {
  font-family: var(--font-title);
  font-size: clamp(19px, 1.35vw, 22px);
  font-weight: 800;
  line-height: 1.25;
  color: #FFFFFF;
  margin: 0;
  letter-spacing: -0.015em;
}

.hud-card-desc {
  font-family: var(--font-body);
  font-size: clamp(13px, 0.92vw, 14.5px);
  line-height: 1.6;
  color: rgba(247, 247, 242, 0.72);
  margin: 0;
}

/* Card Footer Module */
.hud-card-footer {
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  z-index: 2;
  text-align: left;
}

.hud-footer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hud-output-tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hud-cyan .hud-output-tag { color: var(--color-bleu-iceberg); }
.hud-mint .hud-output-tag { color: var(--color-vert-menthe); }

.hud-glyph {
  font-size: 10px;
  opacity: 0.35;
  color: #FFFFFF;
}

.hud-output-text {
  font-family: var(--font-body);
  font-size: clamp(12.5px, 0.88vw, 13.5px);
  color: rgba(247, 247, 242, 0.9);
  line-height: 1.45;
  font-weight: 500;
  margin: 0;
}

@media (max-width: 640px) {
  .reflex-hud-card {
    flex: 0 0 310px;
    width: 310px;
  }
}

/* ==========================================================================
   REFLEX HERO SPLIT & CENTERED SECTION (Commercial 3 Reflexes Interactive Section)
   ========================================================================== */
/* ==========================================================================
   REFLEX SPLIT POINTS SECTION (Content Left, 3 Reflex Points Right)
   ========================================================================== */
.reflex-hero-split-section,
.reflex-centered-showcase-section,
.reflex-split-points-section {
  position: relative;
  width: 100%;
  padding: clamp(70px, 8.5vh, 110px) 0;
  background: radial-gradient(circle at 82% 48%, rgba(143, 216, 248, 0.07) 0%, transparent 65%),
              radial-gradient(circle at 18% 52%, rgba(155, 231, 196, 0.04) 0%, transparent 60%),
              #05080E;
  overflow: visible;
  z-index: 10;
}

.reflex-split-points-container {
  max-width: 1560px;
  width: 94%;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(40px, 5vw, 84px);
  position: relative;
  z-index: 10;
  box-sizing: border-box;
}

/* Left Content Column */
.reflex-content-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.reflex-content-left .section-eyebrow {
  margin-bottom: 14px;
}

.reflex-content-title {
  font-family: var(--font-title);
  font-size: clamp(30px, 3.5vw, 50px);
  font-weight: 900;
  line-height: 1.14;
  letter-spacing: -0.025em;
  color: #FFFFFF;
  margin: 0 0 18px 0;
}

.reflex-content-desc {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.1vw, 17.5px);
  line-height: 1.62;
  color: rgba(247, 247, 242, 0.72);
  margin: 0 0 34px 0;
  max-width: 620px;
}

.reflex-content-left .reflex-bottom-action-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
}

.reflex-content-left .reflex-action-meta {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(247, 247, 242, 0.6);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.reflex-content-left .reflex-action-meta .meta-dot {
  color: #8FD8F8;
}

/* Right Points Column (SLEEK, BALANCED & CENTERED) */
.reflex-points-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 3.8vh, 44px);
  width: 100%;
  position: relative;
  z-index: 30;
  padding: 16px 0;
}

.reflex-points-right::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 580px;
  height: 580px;
  background: radial-gradient(circle, rgba(143, 216, 248, 0.15) 0%, rgba(155, 231, 196, 0.06) 50%, transparent 70%);
  filter: blur(75px);
  pointer-events: none;
  z-index: -1;
}

/* Staggered Floating Shape (Hugs the content organically) */
.reflex-points-right .reflex-btn-popover-wrap {
  position: relative;
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  z-index: 10;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), z-index 0.2s ease;
}

.reflex-points-right .reflex-btn-popover-wrap[data-reflex="0"] {
  align-self: center;
  margin-left: -55px;
  animation: reflexFloatA 6s ease-in-out infinite;
}

.reflex-points-right .reflex-btn-popover-wrap[data-reflex="1"] {
  align-self: center;
  margin-left: 55px;
  animation: reflexFloatB 7s ease-in-out infinite 0.7s;
}

.reflex-points-right .reflex-btn-popover-wrap[data-reflex="2"] {
  align-self: center;
  margin-left: -10px;
  animation: reflexFloatC 6.5s ease-in-out infinite 1.4s;
}

@keyframes reflexFloatA {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-7px); }
}

@keyframes reflexFloatB {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-9px); }
}

@keyframes reflexFloatC {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
}

/* Elevated Z-Index On Hover Fixes Any Overlap Glitch */
.reflex-points-right .reflex-btn-popover-wrap:hover,
.reflex-points-right .reflex-btn-popover-wrap.is-open {
  animation-play-state: paused;
  z-index: 1000 !important;
}

/* SLEEK, TACTILE Liquid Glass Pill Design (No empty void) */
.reflex-points-right .reflex-dock-pill {
  width: fit-content !important;
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 18px 34px 18px 20px;
  background: rgba(14, 22, 34, 0.8) !important;
  backdrop-filter: blur(24px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
  border: 1.8px solid rgba(143, 216, 248, 0.32) !important;
  border-radius: 9999px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.58), 
              0 0 35px rgba(143, 216, 248, 0.16), 
              inset 0 1px 2px rgba(255, 255, 255, 0.28) !important;
  color: #FFFFFF !important;
  cursor: pointer;
  box-sizing: border-box;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  user-select: none;
  white-space: nowrap;
}

.reflex-points-right .reflex-dock-pill:hover,
.reflex-points-right .reflex-btn-popover-wrap:hover .reflex-dock-pill,
.reflex-points-right .reflex-btn-popover-wrap.is-open .reflex-dock-pill {
  background: rgba(20, 32, 48, 0.95) !important;
  border-color: rgba(155, 231, 196, 0.8) !important;
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.72), 
              0 0 45px rgba(155, 231, 196, 0.38), 
              inset 0 1px 2px rgba(255, 255, 255, 0.42) !important;
}

.reflex-points-right .pill-num-box {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(143, 216, 248, 0.2);
  border: 1.8px solid rgba(143, 216, 248, 0.48);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.reflex-points-right .pill-circle-num {
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 900;
  color: #8FD8F8;
  line-height: 1;
}

.reflex-points-right .reflex-dock-pill:hover .pill-circle-num,
.reflex-points-right .reflex-btn-popover-wrap:hover .pill-circle-num,
.reflex-points-right .reflex-btn-popover-wrap.is-open .pill-circle-num {
  color: #9BE7C4;
}

.reflex-points-right .pill-label {
  font-family: var(--font-body);
  font-size: clamp(22px, 1.6vw, 26px);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #FFFFFF;
}

.reflex-points-right .pill-accent-text {
  font-family: var(--font-serif);
  font-style: italic;
  color: #9BE7C4;
  font-weight: 600;
}

.reflex-points-right .pill-badge-tag {
  margin-left: 14px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1.2px solid rgba(255, 255, 255, 0.2);
  color: rgba(247, 247, 242, 0.88);
  flex-shrink: 0;
}

/* Floating Popover Card Centered Underneath Button */
.reflex-points-right .reflex-popover-card.popover-align-right-col {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(6px) scale(0.98);
  width: clamp(420px, 34vw, 520px);
  max-width: calc(100vw - 40px);
  min-width: 320px;
  z-index: 1001 !important;
  background: rgba(9, 14, 22, 0.98);
  backdrop-filter: blur(32px) saturate(200%);
  -webkit-backdrop-filter: blur(32px) saturate(200%);
  border: 1.8px solid rgba(143, 216, 248, 0.48);
  border-radius: 24px;
  padding: 30px 34px;
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.92), 0 0 45px rgba(143, 216, 248, 0.2);
  opacity: 0;
  visibility: hidden;
  transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  box-sizing: border-box;
}

.reflex-points-right .reflex-btn-popover-wrap::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 20px;
}

.reflex-points-right .reflex-btn-popover-wrap:hover .reflex-popover-card.popover-align-right-col,
.reflex-points-right .reflex-btn-popover-wrap.is-open .reflex-popover-card.popover-align-right-col {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
  pointer-events: auto;
}

@media (max-width: 960px) {
  .reflex-split-points-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .reflex-points-right .reflex-btn-popover-wrap[data-reflex="1"],
  .reflex-points-right .reflex-btn-popover-wrap[data-reflex="2"] {
    margin-left: 0 !important;
  }
  .reflex-points-right {
    align-items: flex-start;
  }
}

@media (max-width: 960px) {
  .reflex-split-points-container {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .reflex-points-right {
    max-width: 100%;
  }
}

.reflex-secondary-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #FFFFFF !important;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-decoration: none;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.reflex-secondary-action-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(143, 216, 248, 0.6);
  color: #8FD8F8 !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45), 0 0 20px rgba(143, 216, 248, 0.2);
}

.reflex-secondary-action-btn .cta-arrow-down-svg {
  transition: transform 0.25s ease;
}

.reflex-secondary-action-btn:hover .cta-arrow-down-svg {
  transform: translateY(2px);
}

.reflex-popover-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8FD8F8;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

.reflex-popover-link:hover {
  color: #9BE7C4;
  transform: translateX(2px);
}

.reflex-split-bg-glow {
  position: absolute;
  top: 15%;
  left: -8%;
  width: 45vw;
  height: 50vh;
  background: radial-gradient(circle, rgba(143, 216, 248, 0.08) 0%, transparent 70%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 1;
}

.reflex-ambient-radial {
  position: absolute;
  right: 5%;
  top: 10%;
  width: 45vw;
  height: 60vh;
  background: radial-gradient(circle, rgba(155, 231, 196, 0.06) 0%, transparent 70%);
  filter: blur(90px);
  pointer-events: none;
  z-index: 1;
}

.reflex-split-container {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(0, 0.84fr);
  align-items: center;
  gap: clamp(36px, 5vw, 70px);
  position: relative;
  z-index: 3;
}

/* Left Column */
.reflex-split-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  position: relative;
  z-index: 20;
}

.reflex-split-left .section-eyebrow {
  margin-bottom: 14px;
}

.reflex-split-title {
  font-family: var(--font-title);
  font-size: clamp(30px, 3.2vw, 48px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: #FFFFFF;
  margin: 0 0 18px 0;
}

.reflex-split-desc {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.12vw, 17.5px);
  line-height: 1.6;
  color: rgba(247, 247, 242, 0.72);
  margin: 0 0 32px 0;
  max-width: 620px;
}

/* 3 Reflex CTAs Dock */
.reflex-ctas-dock {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  position: relative;
  width: 100%;
  margin-bottom: 34px;
  z-index: 30;
}

.reflex-btn-popover-wrap {
  position: relative;
  display: inline-flex;
}

/* Reflex Dock Pill (Liquid Frosted Glass) */
.reflex-dock-pill.reflex-liquid-glass-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px 11px 14px;
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 9999px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.18) !important;
  color: #FFFFFF !important;
  text-decoration: none;
  cursor: pointer;
  z-index: 50;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  white-space: nowrap;
}

.reflex-dock-pill .pill-icon-box {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(143, 216, 248, 0.12);
  border: 1px solid rgba(143, 216, 248, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8FD8F8;
  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  flex-shrink: 0;
}

.reflex-dock-pill .pill-circle-num {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: -0.01em;
  color: #8FD8F8;
  line-height: 1;
  transition: color 0.3s ease;
}

.reflex-btn-popover-wrap:hover .pill-circle-num,
.reflex-btn-popover-wrap.is-open .pill-circle-num {
  color: #9BE7C4;
}

.reflex-dock-pill .pill-text-col {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.reflex-dock-pill .pill-num {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 800;
  color: #8FD8F8;
  letter-spacing: 0.04em;
}

.reflex-dock-pill .pill-label {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 0.01em;
}

.reflex-dock-pill .pill-accent-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: #9BE7C4;
}

.reflex-dock-pill .pill-badge-tag {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(247, 247, 242, 0.7);
  margin-left: 2px;
}

/* Hover State on Pill */
.reflex-dock-pill:hover,
.reflex-btn-popover-wrap:hover .reflex-dock-pill,
.reflex-btn-popover-wrap.is-open .reflex-dock-pill {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(143, 216, 248, 0.7) !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5), 0 0 24px rgba(143, 216, 248, 0.3), inset 0 1px 1.5px rgba(255, 255, 255, 0.35) !important;
  transform: translateY(-2px);
  z-index: 90;
}

.reflex-btn-popover-wrap:hover .pill-icon-box,
.reflex-btn-popover-wrap.is-open .pill-icon-box {
  transform: scale(1.1);
  background: rgba(155, 231, 196, 0.2);
  border-color: #9BE7C4;
  color: #9BE7C4;
}

/* ==========================================================================
   DROPDOWN POPOVER SHOWCASE CARD FOR REFLEXES
   ========================================================================== */
.reflex-popover-card {
  position: absolute;
  top: calc(100% + 12px);
  width: clamp(320px, 24vw, 380px);
  padding: 22px 24px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.12) 0%, rgba(143, 216, 248, 0.05) 30%, rgba(7, 10, 18, 0.97) 100%);
  backdrop-filter: blur(40px) saturate(220%);
  -webkit-backdrop-filter: blur(40px) saturate(220%);
  border: 1.2px solid rgba(255, 255, 255, 0.35);
  border-radius: 20px;
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.95), 
              0 0 35px rgba(143, 216, 248, 0.25), 
              inset 0 1.5px 2px rgba(255, 255, 255, 0.5),
              inset 0 -1.5px 2px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), 
              visibility 0.25s;
  z-index: 1000;
  text-align: left;
  box-sizing: border-box;
}

/* Invisible Hover Bridge */
.reflex-popover-card::before {
  content: '';
  position: absolute;
  top: -16px;
  left: 0;
  width: 100%;
  height: 16px;
}

.reflex-popover-card.popover-align-left {
  left: 0;
  transform: translateY(10px) scale(0.97);
}

.reflex-popover-card.popover-align-center {
  left: 50%;
  transform: translateX(-50%) translateY(10px) scale(0.97);
}

.reflex-popover-card.popover-align-right {
  right: 0;
  left: auto;
  transform: translateY(10px) scale(0.97);
}

/* Hover Reveal on Popover */
.reflex-btn-popover-wrap:hover .reflex-popover-card,
.reflex-btn-popover-wrap.is-open .reflex-popover-card {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.reflex-btn-popover-wrap:hover .reflex-popover-card.popover-align-left,
.reflex-btn-popover-wrap.is-open .reflex-popover-card.popover-align-left,
.reflex-btn-popover-wrap:hover .reflex-popover-card.popover-align-right,
.reflex-btn-popover-wrap.is-open .reflex-popover-card.popover-align-right {
  transform: translateY(0) scale(1) !important;
}

.reflex-btn-popover-wrap:hover .reflex-popover-card.popover-align-center,
.reflex-btn-popover-wrap.is-open .reflex-popover-card.popover-align-center {
  transform: translateX(-50%) translateY(0) scale(1) !important;
}

/* Popover Content Elements */
.reflex-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.reflex-popover-title {
  font-family: var(--font-title);
  font-size: 19px;
  font-weight: 850;
  color: #FFFFFF;
  margin: 0 0 10px 0;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.reflex-popover-desc {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.55;
  color: rgba(247, 247, 242, 0.78);
  margin: 0 0 16px 0;
}

.reflex-popover-acquis {
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(143, 216, 248, 0.07);
  border: 1px solid rgba(143, 216, 248, 0.22);
}

.reflex-popover-acquis .acquis-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.reflex-popover-acquis .acquis-icon {
  color: #8FD8F8;
  font-size: 11px;
}

.reflex-popover-acquis .acquis-tag {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8FD8F8;
}

.reflex-popover-acquis .acquis-text {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.45;
  color: #FFFFFF;
  margin: 0;
  font-weight: 500;
}

/* Bottom Action Row */
.reflex-bottom-action-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
}

.reflex-main-action-btn {
  background: #9BE7C4;
  color: #0A0A0A !important;
  box-shadow: 0 8px 24px rgba(155, 231, 196, 0.35);
  font-weight: 800;
}

.reflex-main-action-btn:hover {
  background: #B4F0D6;
  box-shadow: 0 12px 32px rgba(155, 231, 196, 0.5);
  transform: translateY(-2px);
}

.reflex-action-meta {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(247, 247, 242, 0.6);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.reflex-action-meta .meta-dot {
  color: #8FD8F8;
}

/* ==========================================================================
   RIGHT COLUMN: WARREN PORTRAIT VISUAL STAGE
   ========================================================================== */
.reflex-split-right {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.reflex-warren-stage {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: clamp(480px, 55vh, 620px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.reflex-warren-glow {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(143, 216, 248, 0.3) 0%, rgba(155, 231, 196, 0.15) 45%, transparent 70%);
  filter: blur(50px);
  pointer-events: none;
  z-index: 1;
  transition: all 0.5s ease;
}

.reflex-warren-ring {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  height: 320px;
  border-radius: 50%;
  border: 1.5px solid rgba(143, 216, 248, 0.2);
  box-shadow: 0 0 40px rgba(143, 216, 248, 0.1), inset 0 0 30px rgba(143, 216, 248, 0.08);
  pointer-events: none;
  z-index: 2;
  animation: reflexRingPulse 6s ease-in-out infinite alternate;
}

@keyframes reflexRingPulse {
  0% {
    transform: translateX(-50%) scale(0.98);
    opacity: 0.6;
    border-color: rgba(143, 216, 248, 0.2);
  }
  100% {
    transform: translateX(-50%) scale(1.04);
    opacity: 0.9;
    border-color: rgba(155, 231, 196, 0.35);
  }
}

.reflex-warren-media-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 5;
  overflow: hidden;
  border-radius: 28px;
}

.reflex-warren-img {
  width: auto;
  height: 98%;
  max-height: 580px;
  object-fit: contain;
  object-position: bottom center;
  display: block;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 30px rgba(143, 216, 248, 0.2));
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
  user-select: none;
  pointer-events: none;
}

.reflex-warren-base-vignette {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to top, #05080E 0%, rgba(5, 8, 14, 0.8) 40%, transparent 100%);
  pointer-events: none;
  z-index: 6;
}

/* Floating Glass Badges on Warren */
.reflex-floating-badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-radius: 16px;
  background: rgba(12, 16, 25, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(143, 216, 248, 0.15);
  z-index: 15;
  pointer-events: none;
  animation: reflexBadgeFloat 5s ease-in-out infinite alternate;
}

.reflex-floating-badge.badge-top-left {
  top: 18%;
  left: -20px;
  animation-delay: 0s;
}

.reflex-floating-badge.badge-bottom-right {
  bottom: 12%;
  right: -20px;
  animation-delay: 2.5s;
}

@keyframes reflexBadgeFloat {
  0% { transform: translateY(0); }
  100% { transform: translateY(-8px); }
}

.reflex-floating-badge .badge-icon-sparkle {
  color: #8FD8F8;
  font-size: 15px;
  line-height: 1;
}

.reflex-floating-badge .badge-metric {
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 900;
  color: #9BE7C4;
  line-height: 1;
}

.reflex-floating-badge .badge-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.reflex-floating-badge .badge-title {
  font-family: var(--font-title);
  font-size: 12.5px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.01em;
}

.reflex-floating-badge .badge-sub {
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(247, 247, 242, 0.65);
}

/* Dynamic Reaction when Hovering Reflex Buttons */
.reflex-hero-split-section.reflex-active-0 .reflex-warren-glow {
  background: radial-gradient(circle, rgba(143, 216, 248, 0.45) 0%, transparent 70%);
}

.reflex-hero-split-section.reflex-active-1 .reflex-warren-glow {
  background: radial-gradient(circle, rgba(155, 231, 196, 0.45) 0%, transparent 70%);
}

.reflex-hero-split-section.reflex-active-2 .reflex-warren-glow {
  background: radial-gradient(circle, rgba(143, 216, 248, 0.4) 0%, rgba(155, 231, 196, 0.3) 50%, transparent 70%);
}

/* Responsive Media Queries */
@media (max-width: 1080px) {
  .reflex-split-container {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  
  .reflex-split-left {
    align-items: center;
    text-align: center;
  }

  .reflex-split-desc {
    margin-left: auto;
    margin-right: auto;
  }

  .reflex-ctas-dock {
    justify-content: center;
  }

  .reflex-bottom-action-row {
    justify-content: center;
  }

  .reflex-floating-badge.badge-top-left {
    left: 10px;
  }

  .reflex-floating-badge.badge-bottom-right {
    right: 10px;
  }
}

@media (max-width: 768px) {
  .reflex-ctas-dock {
    flex-direction: column;
    align-items: stretch;
  }

  .reflex-btn-popover-wrap {
    width: 100%;
  }

  .reflex-dock-pill.reflex-liquid-glass-cta {
    width: 100%;
    justify-content: space-between;
  }

  .reflex-popover-card {
    position: static;
    width: 100%;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    margin-top: 10px;
    display: none;
  }

  .reflex-btn-popover-wrap.is-open .reflex-popover-card {
    display: block;
  }
}

/* ==========================================================================
   SECTION: VOTRE FORMATEUR (WARREN GRANGE — SCREENSHOT 2 LAYOUT)
   ========================================================================== */
.formation-meet-trainer-section {
  position: relative;
  padding: clamp(80px, 8.5vw, 135px) 0;
  background: var(--color-bg);
  overflow: hidden;
  z-index: 2;
}

.formation-meet-trainer-section .formation-section-container {
  max-width: 1560px;
  width: 95%;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 40px);
}

.trainer-ambient-glow {
  position: absolute;
  top: 20%;
  left: 2%;
  width: 750px;
  height: 750px;
  background: radial-gradient(circle, rgba(143, 216, 248, 0.16) 0%, rgba(155, 231, 196, 0.08) 45%, transparent 70%);
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
}

.trainer-showcase-grid {
  display: grid;
  grid-template-columns: 50% 50%;
  gap: clamp(32px, 4.5vw, 76px);
  align-items: center;
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
}

/* --- Left Column: Portrait Cutout & Pulsing Halo Rings --- */
.trainer-visual-col {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.trainer-visual-stage {
  position: relative;
  width: 100%;
  max-width: 680px;
  min-height: 720px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Pulsing Concentric Halos */
.trainer-halo-glow {
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(143, 216, 248, 0.35) 0%, rgba(155, 231, 196, 0.16) 48%, transparent 75%);
  filter: blur(40px);
  z-index: 1;
  animation: haloCoreGlow 5s ease-in-out infinite;
}

.trainer-halo-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

.ring-outer {
  width: 650px;
  height: 650px;
  border: 1.5px solid rgba(143, 216, 248, 0.15);
  animation: haloPulseOuter 5s ease-in-out infinite;
}

.ring-middle {
  width: 500px;
  height: 500px;
  border: 1.5px solid rgba(143, 216, 248, 0.24);
  animation: haloPulseMiddle 5s ease-in-out infinite 0.7s;
}

.ring-inner {
  width: 350px;
  height: 350px;
  border: 1.5px solid rgba(155, 231, 196, 0.35);
  animation: haloPulseInner 5s ease-in-out infinite 1.4s;
}

@keyframes haloCoreGlow {
  0%, 100% {
    transform: scale(0.95);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.12);
    opacity: 1;
  }
}

@keyframes haloPulseOuter {
  0%, 100% {
    transform: scale(1);
    opacity: 0.25;
    box-shadow: 0 0 0px rgba(143, 216, 248, 0);
  }
  50% {
    transform: scale(1.06);
    opacity: 0.65;
    box-shadow: 0 0 35px rgba(143, 216, 248, 0.22);
  }
}

@keyframes haloPulseMiddle {
  0%, 100% {
    transform: scale(1);
    opacity: 0.35;
    box-shadow: 0 0 0px rgba(143, 216, 248, 0);
  }
  50% {
    transform: scale(1.08);
    opacity: 0.8;
    box-shadow: 0 0 40px rgba(143, 216, 248, 0.32);
  }
}

@keyframes haloPulseInner {
  0%, 100% {
    transform: scale(1);
    opacity: 0.45;
    box-shadow: 0 0 0px rgba(155, 231, 196, 0);
  }
  50% {
    transform: scale(1.1);
    opacity: 0.95;
    box-shadow: 0 0 45px rgba(155, 231, 196, 0.42);
  }
}

/* Floating Portrait Wrapper & Image */
.trainer-cutout-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 580px;
  display: flex;
  justify-content: center;
  filter: drop-shadow(0 26px 55px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 50px rgba(143, 216, 248, 0.22));
  animation: trainerFloat 6s ease-in-out infinite;
  will-change: transform;
}

.trainer-cutout-img {
  width: 100%;
  height: auto;
  max-height: 740px;
  object-fit: contain;
  display: block;
}

@keyframes trainerFloat {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-14px);
  }
}

/* Floating Stats Badge */
.trainer-floating-badge {
  position: absolute;
  bottom: 50px;
  right: 25px;
  z-index: 4;
  background: linear-gradient(135deg, rgba(143, 216, 248, 0.96) 0%, rgba(155, 231, 196, 0.96) 100%);
  color: #0A0A0A;
  padding: 16px 26px;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(143, 216, 248, 0.4);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  backdrop-filter: blur(10px);
  animation: badgeFloat 6s ease-in-out infinite 0.8s;
  will-change: transform;
}

@keyframes badgeFloat {
  0%, 100% {
    transform: translateY(0px) scale(1);
  }
  50% {
    transform: translateY(-10px) scale(1.02);
  }
}

.floating-badge-value {
  display: flex;
  align-items: baseline;
  gap: 1px;
}

.badge-num {
  font-family: var(--font-title);
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #0A0A0A;
}

.badge-plus {
  font-family: var(--font-title);
  font-size: 26px;
  font-weight: 800;
  color: #0A0A0A;
}

.floating-badge-label {
  font-family: var(--font-display, var(--font-title));
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(10, 10, 10, 0.9);
}

/* Trainer Studio Tag */
.trainer-floating-tag {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(12, 14, 18, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 8px 20px;
  border-radius: 9999px;
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}

.trainer-tag-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-vert-menthe);
  box-shadow: 0 0 8px var(--color-vert-menthe);
}

.trainer-tag-text {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #FFFFFF;
  text-transform: uppercase;
}

/* --- Right Column: Content & Storytelling --- */
.trainer-content-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-align: left;
}

.trainer-editorial-heading {
  font-family: var(--font-title);
  font-size: clamp(26px, 2.6vw, 40px);
  font-weight: 850;
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: #FFFFFF;
  margin: 0;
}

.trainer-editorial-heading .heading-line-1 {
  display: block;
}

.trainer-editorial-heading .heading-line-2 {
  display: block;
  font-size: 0.98em;
}

.trainer-editorial-bio {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.7;
  color: rgba(247, 247, 242, 0.82);
  margin: 0;
}

/* 3 KPI Cards Grid */
.trainer-kpis-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
  margin-top: 4px;
}

.trainer-kpi-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.trainer-kpi-card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(143, 216, 248, 0.35);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.kpi-card-num-wrap {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.kpi-card-num {
  font-family: var(--font-title);
  font-size: clamp(28px, 2.4vw, 38px);
  font-weight: 900;
  color: #FFFFFF;
  letter-spacing: -0.03em;
  line-height: 1;
}

.kpi-card-unit {
  font-family: var(--font-title);
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 800;
  color: var(--color-bleu-iceberg);
}

.kpi-card-label {
  font-family: var(--font-display, var(--font-title));
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: rgba(247, 247, 242, 0.68);
  text-transform: uppercase;
  line-height: 1.3;
}

/* Featured Brands (Fixed Crisp White Visibility & Larger Proportions) */
.trainer-brands-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  padding-top: 6px;
}

.trainer-brands-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(247, 247, 242, 0.55);
}

.trainer-brands-row {
  display: flex;
  align-items: center;
  gap: clamp(24px, 3.2vw, 44px);
  flex-wrap: wrap;
}

.trainer-brand-img {
  height: 32px;
  max-width: 125px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.88;
  transition: all 0.25s ease;
}

.trainer-brand-img:hover {
  opacity: 1;
  transform: scale(1.14);
  filter: brightness(0) invert(1) drop-shadow(0 0 14px rgba(255, 255, 255, 0.65));
}

/* CTA & Trust Badges */
.trainer-cta-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.trainer-trust-pills {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.trainer-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: 12.5px;
  color: rgba(247, 247, 242, 0.78);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 9999px;
  padding: 8px 16px;
}

.pill-glow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-vert-menthe);
  box-shadow: 0 0 7px var(--color-vert-menthe);
}

@media (max-width: 1024px) {
  .trainer-showcase-grid {
    grid-template-columns: 1fr;
    gap: 52px;
  }
  .trainer-visual-stage {
    min-height: 540px;
  }
}

@media (max-width: 640px) {
  .trainer-kpis-grid {
    grid-template-columns: 1fr;
  }
  .trainer-floating-badge {
    bottom: 24px;
    right: 4px;
    padding: 12px 18px;
  }
}

/* ==========================================================================
   SECTION 05: RETOURS D'EXPÉRIENCE & TÉMOIGNAGES (EXACT SCREENSHOT LAYOUT)
   ========================================================================== */
.formation-testimonials-section {
  position: relative;
  padding: clamp(60px, 6vw, 95px) 0 clamp(70px, 7vw, 105px);
  background: var(--color-bg);
  overflow: hidden;
  z-index: 2;
}

/* Centered Header with Brand Typography & Accents */
.testimonials-header-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  max-width: 860px;
  margin: 0 auto clamp(32px, 3.8vw, 52px);
  width: 100%;
  position: relative;
  z-index: 2;
}

.testimonials-main-title {
  font-family: var(--font-title);
  font-size: clamp(32px, 3.8vw, 54px);
  font-weight: 850;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: #FFFFFF;
  margin: 0;
  text-align: center;
}

/* Sliding Viewport & Track */
.testimonials-marquee-viewport {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  position: relative;
  padding: 38px 0 38px;
  mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  z-index: 2;
}

.testimonials-marquee-track {
  display: flex;
  width: max-content;
  gap: 26px;
  animation: testimonialContinuousSlide 40s linear infinite;
  will-change: transform;
  align-items: center;
}

.testimonials-marquee-viewport:hover .testimonials-marquee-track,
.testimonials-marquee-track:hover {
  animation-play-state: paused;
}

@keyframes testimonialContinuousSlide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-50% - 13px));
  }
}

/* Individual Testimonial Card (Default Light Grey #E2E4E8 -> Dark & Bigger on Hover) */
.testimonial-card {
  position: relative;
  flex: 0 0 clamp(320px, 24vw, 380px);
  width: clamp(320px, 24vw, 380px);
  min-height: 390px;
  background: #E2E4E8;
  border: 1.5px solid transparent;
  border-radius: 24px;
  padding: 34px 28px 28px 28px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 26px;
  text-align: left;
  overflow: visible;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.35s ease,
              border-color 0.35s ease,
              box-shadow 0.4s ease;
  cursor: default;
}

/* Hover: Becomes Bigger, Dark (#0F1218), and Glowing */
.testimonial-card:hover {
  transform: translateY(-8px);
  background-color: #0F1218;
  border-color: rgba(143, 216, 248, 0.45);
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.8),
              0 0 28px rgba(143, 216, 248, 0.2),
              0 0 12px rgba(155, 231, 196, 0.12);
  z-index: 10;
}

/* Integrated Rating Badge with Lottie Animation (Inside Top Row between Avatar & Logo) */
.testimonial-hover-badge {
  position: absolute;
  top: 38px;
  left: 50%;
  transform: translateX(-50%) scale(0.85);
  width: 44px;
  height: 44px;
  background: rgba(15, 18, 24, 0.9);
  border: 1.5px solid rgba(143, 216, 248, 0.35);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 14px rgba(143, 216, 248, 0.25);
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 5;
}

.testimonial-card:hover .testimonial-hover-badge {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.testimonial-lottie-icon {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.testimonial-lottie-icon svg {
  width: 100% !important;
  height: 100% !important;
  overflow: visible;
}

/* Top Row (Avatar + Brand Logo) */
.testimonial-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.testimonial-avatar-wrap {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
  border: 1.5px solid transparent;
  transition: all 0.35s ease;
}

.testimonial-card:hover .testimonial-avatar-wrap {
  border-color: var(--color-bleu-iceberg);
  box-shadow: 0 0 16px rgba(143, 216, 248, 0.4);
}

.testimonial-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.testimonial-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  max-width: 145px;
  height: 38px;
}

.testimonial-brand-logo {
  max-height: 36px;
  max-width: 125px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: brightness(0);
  opacity: 0.85;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.testimonial-card:hover .testimonial-brand-logo {
  filter: brightness(0) invert(1);
  opacity: 1;
  transform: scale(1.05);
}

/* Body (The Quote) */
.testimonial-body {
  flex-grow: 1;
  display: flex;
  align-items: flex-start;
}

.testimonial-quote {
  font-family: var(--font-body);
  font-size: clamp(14.5px, 1.02vw, 15.5px);
  line-height: 1.58;
  color: #1A1D20;
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: color 0.35s ease;
}

.testimonial-card:hover .testimonial-quote {
  color: #FFFFFF;
  font-weight: 450;
}

/* Footer (Author Info with Left Line) */
.testimonial-footer {
  display: flex;
  align-items: flex-start;
  width: 100%;
}

.testimonial-author-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-left: 2px solid #CBD5E1;
  padding-left: 12px;
  transition: border-left-color 0.35s ease;
}

.testimonial-card:hover .testimonial-author-meta {
  border-left-color: var(--color-bleu-iceberg);
}

.testimonial-author-name {
  font-family: var(--font-title);
  font-size: 14px;
  font-weight: 750;
  color: #111111;
  letter-spacing: -0.01em;
  line-height: 1.2;
  transition: color 0.35s ease;
}

.testimonial-card:hover .testimonial-author-name {
  color: #FFFFFF;
}

.testimonial-author-role {
  font-family: var(--font-body);
  font-size: 11.5px;
  color: #6E747B;
  font-weight: 400;
  line-height: 1.3;
  transition: color 0.35s ease;
}

.testimonial-card:hover .testimonial-author-role {
  color: rgba(247, 247, 242, 0.7);
}

@media (max-width: 640px) {
  .testimonial-card {
    flex: 0 0 295px;
    width: 295px;
    min-height: 350px;
    padding: 26px 20px 22px 20px;
  }
  .testimonial-logo-wrap {
    max-width: 115px;
    height: 30px;
  }
  .testimonial-brand-logo {
    max-height: 28px;
    max-width: 105px;
  }
  .testimonials-main-title {
    font-size: 32px;
  }
}

/* ==========================================================================
   GLOBAL SEARCH MODAL OVERLAY
   ========================================================================== */
.search-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.search-modal-overlay.active,
.search-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.search-modal-container {
  width: 100%;
  max-width: 680px;
  background: #11141A;
  border: 1px solid rgba(143, 216, 248, 0.25);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85), 0 0 30px rgba(143, 216, 248, 0.15);
}

.search-modal-header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.search-input-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 12px 16px;
}

.search-input-icon {
  color: var(--color-bleu-iceberg);
  flex-shrink: 0;
}

#globalSearchInput {
  background: transparent;
  border: none;
  outline: none;
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 15px;
  width: 100%;
}

#globalSearchInput::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.search-modal-close-btn {
  background: transparent;
  border: none;
  color: #FFFFFF;
  font-size: 28px;
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.search-modal-close-btn:hover {
  opacity: 1;
}

.search-modal-results {
  margin-top: 20px;
  min-height: 120px;
}

.search-empty-state {
  color: rgba(255, 255, 255, 0.45);
  font-family: var(--font-body);
  font-size: 14px;
  text-align: center;
  padding: 30px 0;
}

/* ==========================================================================
   SECTION 07: PASSEZ À L'ACTION (CALENDLY-STYLE BOOKING WIDGET)
   ========================================================================== */
.booking-section {
  position: relative;
  padding: 130px 0 150px;
  background: #0A0A0A;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.booking-section::before {
  content: '';
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 900px;
  height: 500px;
  background: radial-gradient(ellipse at center, rgba(143, 216, 248, 0.08) 0%, rgba(155, 231, 196, 0.04) 40%, transparent 70%);
  filter: blur(50px);
  pointer-events: none;
  z-index: 1;
}

.booking-container {
  position: relative;
  z-index: 2;
  max-width: 1140px;
  width: 92%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Header Area */
.booking-header {
  text-align: center;
  max-width: 780px;
  margin-bottom: 50px;
}

.booking-eyebrow {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-bleu-iceberg);
  display: inline-block;
  margin-bottom: 16px;
}

.booking-main-title {
  font-family: var(--font-title);
  font-size: clamp(34px, 3.8vw, 54px);
  font-weight: 850;
  line-height: 1.14;
  letter-spacing: -0.025em;
  color: #FFFFFF;
  margin: 0 0 18px;
}

.booking-subtitle {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.12vw, 17px);
  color: #94A3B8;
  line-height: 1.6;
  margin: 0 auto;
}

/* Calendly-Style Booking Widget Card */
.booking-widget-card {
  width: 100%;
  max-width: 960px;
  background: #FFFFFF;
  border-radius: 26px;
  padding: 44px 48px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.65), 0 0 40px rgba(143, 216, 248, 0.1);
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  gap: 46px;
  position: relative;
  color: #0F172A;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Left Column: Details */
.booking-card-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid #E2E8F0;
  padding-right: 42px;
}

.booking-host-tag {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748B;
  margin-bottom: 12px;
}

.booking-event-title {
  font-family: var(--font-title);
  font-size: clamp(21px, 1.6vw, 24px);
  font-weight: 800;
  color: #0F172A;
  line-height: 1.25;
  margin: 0 0 14px;
  letter-spacing: -0.015em;
}

.booking-event-desc {
  font-family: var(--font-body);
  font-size: 14.5px;
  color: #475569;
  line-height: 1.55;
  margin: 0 0 32px;
}

.booking-meta-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: auto;
}

.booking-meta-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: #334155;
}

.booking-meta-icon {
  font-size: 17px;
  line-height: 1;
  flex-shrink: 0;
}

/* Right Column: Date, Time & CTA */
.booking-card-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
}

.booking-slots-header {
  margin-bottom: -4px;
}

.booking-right-title {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748B;
  display: block;
}

/* Days Selector */
.booking-days-selector {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  width: 100%;
}

.booking-day-btn {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 14px;
  padding: 12px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  outline: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.booking-day-btn .day-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: #64748B;
  transition: color 0.2s ease;
}

.booking-day-btn .day-number {
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: 750;
  color: #0F172A;
  line-height: 1;
  transition: color 0.2s ease;
}

.booking-day-btn:hover {
  border-color: #94A3B8;
  background: #F8FAFC;
  transform: translateY(-2px);
}

.booking-day-btn.is-selected {
  background: #11141A;
  border-color: #11141A;
  box-shadow: 0 4px 14px rgba(17, 20, 26, 0.25);
}

.booking-day-btn.is-selected .day-label {
  color: #94A3B8;
}

.booking-day-btn.is-selected .day-number {
  color: #FFFFFF;
}

/* Times Grid */
.booking-times-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
}

.booking-time-btn {
  background: #FFFFFF;
  border: 1.5px solid #0F172A;
  border-radius: 12px;
  padding: 13px 8px;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 750;
  color: #0F172A;
  cursor: pointer;
  outline: none;
  text-align: center;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.booking-time-btn:hover {
  background: #F1F5F9;
  border-color: #0F172A;
  transform: translateY(-2px);
}

.booking-time-btn.is-selected {
  background: #11141A;
  color: #FFFFFF;
  border-color: #11141A;
  box-shadow: 0 4px 14px rgba(17, 20, 26, 0.25);
}

/* Confirmation CTA Button */
.booking-confirm-btn {
  width: 100%;
  background: #11141A;
  color: #FFFFFF;
  border: none;
  border-radius: 12px;
  padding: 16px 22px;
  font-family: var(--font-title);
  font-size: 15.5px;
  font-weight: 750;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  outline: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  margin-top: 4px;
}

.booking-confirm-btn .btn-arrow {
  display: inline-block;
  transition: transform 0.25s ease;
  font-size: 16px;
}

.booking-confirm-btn:hover {
  background: #000000;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 25px rgba(143, 216, 248, 0.3);
}

.booking-confirm-btn:hover .btn-arrow {
  transform: translateX(4px);
}

/* ==========================================================================
   BOOKING MODAL / CONTACT DETAILS POPUP
   ========================================================================== */
.booking-form-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.booking-form-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.booking-modal-content {
  background: #11141A;
  border: 1px solid rgba(143, 216, 248, 0.25);
  border-radius: 24px;
  width: 100%;
  max-width: 540px;
  padding: 36px 32px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.85), 0 0 40px rgba(143, 216, 248, 0.15);
  position: relative;
  color: #FFFFFF;
  transform: scale(0.92);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.booking-form-modal.is-open .booking-modal-content {
  transform: scale(1);
}

.booking-modal-close {
  position: absolute;
  top: 18px;
  right: 20px;
  background: transparent;
  border: none;
  color: #94A3B8;
  font-size: 28px;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
  transition: color 0.2s ease;
}

.booking-modal-close:hover {
  color: #FFFFFF;
}

.booking-selected-summary {
  background: rgba(143, 216, 248, 0.08);
  border: 1px solid rgba(143, 216, 248, 0.2);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.summary-badge {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-bleu-iceberg);
}

.summary-slot-info {
  font-family: var(--font-title);
  font-size: 15px;
  font-weight: 750;
  color: #FFFFFF;
  margin: 0;
}

.booking-inputs-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.booking-inputs-grid .form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

.booking-inputs-grid label {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 650;
  color: #CBD5E1;
}

.booking-inputs-grid input,
.booking-inputs-grid select {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 12px 14px;
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.booking-inputs-grid select option {
  background: #11141A;
  color: #FFFFFF;
}

.booking-inputs-grid input:focus,
.booking-inputs-grid select:focus {
  border-color: var(--color-bleu-iceberg);
  box-shadow: 0 0 12px rgba(143, 216, 248, 0.25);
}

.booking-submit-final-btn {
  width: 100%;
  background: linear-gradient(135deg, var(--color-bleu-iceberg), var(--color-vert-menthe));
  color: #0A0A0A;
  border: none;
  border-radius: 12px;
  padding: 15px;
  font-family: var(--font-title);
  font-size: 15px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  margin-top: 10px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.booking-submit-final-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(143, 216, 248, 0.4);
}

/* Success State */
.booking-modal-success {
  text-align: center;
  padding: 20px 0;
}

.success-icon-wrap {
  width: 72px;
  height: 72px;
  background: rgba(155, 231, 196, 0.12);
  border: 1.5px solid var(--color-vert-menthe);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  box-shadow: 0 0 25px rgba(155, 231, 196, 0.3);
}

.success-title {
  font-family: var(--font-title);
  font-size: 22px;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 12px;
}

.success-desc {
  font-family: var(--font-body);
  font-size: 14px;
  color: #94A3B8;
  line-height: 1.6;
  max-width: 420px;
  margin: 0 auto 20px;
}

.success-slot-pill {
  display: inline-block;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 8px 18px;
  border-radius: 20px;
  font-family: var(--font-title);
  font-size: 14px;
  font-weight: 750;
  color: var(--color-bleu-iceberg);
}

/* Responsive */
@media (max-width: 860px) {
  .booking-widget-card {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 34px 24px;
  }
  .booking-card-left {
    border-right: none;
    border-bottom: 1px solid #E2E8F0;
    padding-right: 0;
    padding-bottom: 28px;
  }
  .booking-meta-list {
    margin-top: 20px;
  }
}

/* ==========================================================================
   FLOATING DIRECT MESSAGE WIDGET & CONTACT POPUP
   ========================================================================== */
.floating-contact-widget {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.35s ease;
}

.floating-contact-widget.is-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(30px) scale(0.85) !important;
  visibility: hidden !important;
}

/* Tooltip / Hover Notification Pill */
.floating-contact-tooltip {
  pointer-events: auto;
  margin-right: 14px;
  background: rgba(15, 18, 24, 0.95);
  border: 1px solid rgba(143, 216, 248, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 100px;
  padding: 8px 16px 8px 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65), 0 0 18px rgba(143, 216, 248, 0.2);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(12px) scale(0.94);
  transform-origin: right center;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.floating-contact-tooltip .tooltip-icon {
  font-size: 14px;
  line-height: 1;
}

.floating-contact-tooltip .tooltip-text {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 650;
  color: #FFFFFF;
  letter-spacing: -0.01em;
}

.floating-contact-tooltip .tooltip-hint {
  color: var(--color-bleu-iceberg);
  font-weight: 750;
}

/* Reveal tooltip on hover or when prompted */
.floating-contact-widget:hover .floating-contact-tooltip,
.floating-contact-tooltip.is-revealed {
  opacity: 1;
  transform: translateX(0) scale(1);
}

/* Circular Button Trigger */
.floating-contact-btn {
  pointer-events: auto;
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #0B0E14;
  border: 1.5px solid rgba(143, 216, 248, 0.45);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.75), 0 0 22px rgba(143, 216, 248, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  padding: 0;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s ease,
              border-color 0.3s ease;
}

.floating-contact-btn:hover {
  transform: scale(1.08) translateY(-2px);
  border-color: var(--color-bleu-iceberg);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.85), 0 0 32px rgba(143, 216, 248, 0.55);
}

.floating-contact-logo {
  width: 40px;
  height: auto;
  max-height: 32px;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.floating-contact-btn:hover .floating-contact-logo {
  transform: scale(1.08);
}

/* Online Pulsing Indicator Dot */
.floating-contact-status {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #22C55E;
  border: 2px solid #0B0E14;
  box-shadow: 0 0 10px #22C55E;
}

.floating-contact-status::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.6);
  animation: statusPulse 2s infinite ease-out;
}

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

/* ==========================================================================
   DIRECT CONTACT POPUP MODAL
   ========================================================================== */
.direct-chat-popup {
  position: fixed;
  bottom: 98px;
  right: 28px;
  width: clamp(320px, 92vw, 390px);
  background: #101319;
  border: 1px solid rgba(143, 216, 248, 0.3);
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85), 0 0 35px rgba(143, 216, 248, 0.16);
  z-index: 9999;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(18px) scale(0.94);
  transform-origin: bottom right;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.35s ease;
}

.direct-chat-popup.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* Popup Header */
.direct-chat-header {
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.direct-chat-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.author-avatar-wrap {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  background: #181C24;
  border: 1.5px solid var(--color-bleu-iceberg);
  flex-shrink: 0;
}

.author-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.author-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.author-name {
  font-family: var(--font-title);
  font-size: 15px;
  font-weight: 750;
  color: #FFFFFF;
  line-height: 1.2;
}

.author-status {
  font-family: var(--font-body);
  font-size: 11.5px;
  color: var(--color-bleu-iceberg);
  display: flex;
  align-items: center;
  gap: 5px;
}

.author-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22C55E;
  display: inline-block;
  box-shadow: 0 0 6px #22C55E;
}

.direct-chat-close-btn {
  background: transparent;
  border: none;
  color: #94A3B8;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
  transition: color 0.2s ease;
}

.direct-chat-close-btn:hover {
  color: #FFFFFF;
}

/* Popup Body */
.direct-chat-body {
  padding: 20px;
}

.direct-chat-greeting {
  background: rgba(143, 216, 248, 0.07);
  border: 1px solid rgba(143, 216, 248, 0.18);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 16px;
}

.direct-chat-greeting p {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.5;
  color: #E2E8F0;
  margin: 0;
}

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

.chat-input-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.chat-input-group label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 650;
  color: #94A3B8;
}

.chat-input-group input,
.chat-input-group textarea {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: #FFFFFF;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.chat-input-group textarea {
  min-height: 80px;
  resize: vertical;
}

.chat-input-group input:focus,
.chat-input-group textarea:focus {
  border-color: var(--color-bleu-iceberg);
  box-shadow: 0 0 10px rgba(143, 216, 248, 0.25);
}

.direct-chat-submit-btn {
  width: 100%;
  background: linear-gradient(135deg, var(--color-bleu-iceberg), var(--color-vert-menthe));
  color: #0A0A0A;
  border: none;
  border-radius: 10px;
  padding: 13px 16px;
  font-family: var(--font-title);
  font-size: 14.5px;
  font-weight: 750;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  margin-top: 4px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.direct-chat-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(143, 216, 248, 0.4);
}

/* Success View inside Popup */
.direct-chat-success {
  text-align: center;
  padding: 24px 10px;
}

.direct-chat-success .success-icon {
  width: 52px;
  height: 52px;
  background: rgba(155, 231, 196, 0.12);
  border: 1.5px solid var(--color-vert-menthe);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  color: var(--color-vert-menthe);
}

.direct-chat-success h4 {
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 750;
  color: #FFFFFF;
  margin: 0 0 8px;
}

.direct-chat-success p {
  font-family: var(--font-body);
  font-size: 13.5px;
  color: #94A3B8;
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 640px) {
  .floating-contact-widget {
    bottom: 20px;
    right: 20px;
  }
  .direct-chat-popup {
    bottom: 86px;
    right: 16px;
    width: calc(100vw - 32px);
  }
  .floating-contact-tooltip {
    display: none; /* Keep clean on small mobile screens */
  }
}

/* ==========================================================================
   ARTICLE & NEWSLETTER DETAIL PAGE (GEN AI RADAR & EDITORIAL ARTICLES)
   ========================================================================== */
.article-page-body {
  background-color: #080A0E;
  color: #F7F7F2;
  font-family: var(--font-body);
  overflow-x: hidden;
}

/* Article Hero with Content-Adjusted Height & Background Visual */
.article-hero-section {
  position: relative;
  width: 100%;
  padding: 130px 0 60px;
  overflow: hidden;
  background-color: #080A0E;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.article-hero-bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}

.article-hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: brightness(0.48) contrast(1.1);
  transform: scale(1.01);
}

.article-hero-scrim {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: 
    linear-gradient(180deg, 
      rgba(8, 10, 14, 0.7) 0%, 
      rgba(8, 10, 14, 0.5) 45%, 
      rgba(8, 10, 14, 0.92) 85%, 
      rgba(8, 10, 14, 1) 100%
    ),
    radial-gradient(ellipse at 30% 50%, rgba(143, 216, 248, 0.1) 0%, transparent 60%);
  pointer-events: none;
}

.article-hero-container {
  position: relative;
  z-index: 3;
  max-width: 1600px;
  width: 95%;
  margin: 0 auto;
}

.article-hero-content-wrap {
  max-width: 1240px;
  display: flex;
  flex-direction: column;
}

/* Breadcrumbs */
.article-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.article-breadcrumbs a {
  color: #94A3B8;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s ease;
}

.article-breadcrumbs a:hover {
  color: var(--color-bleu-iceberg);
}

.article-breadcrumbs .breadcrumb-sep {
  color: #475569;
}

.article-breadcrumbs .breadcrumb-current {
  color: var(--color-bleu-iceberg);
}

/* Meta badges row */
.article-meta-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}

.article-badge {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 100px;
  line-height: 1;
}

.article-badge-issue {
  background: rgba(143, 216, 248, 0.15);
  border: 1px solid rgba(143, 216, 248, 0.45);
  color: var(--color-bleu-iceberg);
  backdrop-filter: blur(8px);
}

.article-badge-category {
  background: rgba(155, 231, 196, 0.12);
  border: 1px solid rgba(155, 231, 196, 0.35);
  color: var(--color-vert-menthe);
  backdrop-filter: blur(8px);
}

.article-badge-date,
.article-badge-readtime {
  background: rgba(10, 14, 20, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #CBD5E1;
  backdrop-filter: blur(8px);
}

.article-badge-author {
  background: rgba(10, 14, 20, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(8px);
}

.article-badge-author .author-mini-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22C55E;
}

/* Main Title & Lead */
.article-main-title {
  font-family: var(--font-title);
  font-size: clamp(38px, 4.8vw, 68px);
  font-weight: 850;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: #FFFFFF;
  margin: 0 0 20px;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
}

.article-main-title .serif-italic {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(135deg, var(--color-bleu-iceberg), var(--color-vert-menthe));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.article-lead-desc {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.25vw, 21px);
  line-height: 1.68;
  color: #E2E8F0;
  max-width: 1100px;
  margin: 0 0 24px;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.7);
}

/* Scroll indicator link */
.article-hero-scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-bleu-iceberg);
  text-decoration: none;
  width: fit-content;
  padding: 8px 18px;
  background: rgba(10, 14, 20, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(143, 216, 248, 0.35);
  border-radius: 100px;
  transition: all 0.25s ease;
}

.article-hero-scroll-cue:hover {
  background: rgba(143, 216, 248, 0.2);
  border-color: var(--color-bleu-iceberg);
  transform: translateY(2px);
}

.article-hero-scroll-cue svg {
  animation: bounce-subtle 2s infinite ease-in-out;
}

@keyframes bounce-subtle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* ==========================================================================
   ARTICLE MAIN CONTENT LAYOUT (SPLIT GRID)
   ========================================================================== */
.article-content-section {
  position: relative;
  padding: 70px 0 140px;
  background: #080A0E;
}

.article-content-container {
  max-width: 1600px;
  width: 95%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 64px;
  align-items: flex-start;
}

/* Sticky Sidebar */
.article-sticky-sidebar {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.article-sidebar-card {
  background: rgba(18, 22, 30, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 20px;
  padding: 24px 22px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.sidebar-card-title {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-bleu-iceberg);
  margin-bottom: 16px;
  display: block;
}

.article-toc-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.toc-link {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 550;
  color: #94A3B8;
  text-decoration: none;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.45;
  transition: all 0.2s ease;
  padding: 4px 0;
}

.toc-link:hover,
.toc-link.is-active {
  color: #FFFFFF;
  transform: translateX(4px);
}

.toc-link.is-active {
  color: var(--color-bleu-iceberg);
  font-weight: 700;
}

.toc-link-sub {
  padding-left: 14px;
  font-size: 12.5px;
  color: #64748B;
}

/* Sidebar Actions Box (Copy link, Newsletter) */
.article-sidebar-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sidebar-action-btn {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #E2E8F0;
  border-radius: 12px;
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 650;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
}

.sidebar-action-btn:hover {
  background: rgba(143, 216, 248, 0.1);
  border-color: var(--color-bleu-iceberg);
  color: #FFFFFF;
}

/* ==========================================================================
   EDITORIAL BODY STYLES
   ========================================================================== */
.article-editorial-body {
  max-width: 1140px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.article-section-block {
  scroll-margin-top: 100px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.article-h2 {
  font-family: var(--font-title);
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 800;
  line-height: 1.25;
  color: #FFFFFF;
  letter-spacing: -0.015em;
  margin: 20px 0 6px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.article-h3 {
  font-family: var(--font-title);
  font-size: clamp(19px, 1.6vw, 24px);
  font-weight: 750;
  line-height: 1.3;
  color: #FFFFFF;
  margin: 24px 0 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.article-h3-tag {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(143, 216, 248, 0.15);
  color: var(--color-bleu-iceberg);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.article-editorial-body p {
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.72;
  color: #CBD5E1;
  margin: 0;
}

.article-editorial-body strong {
  color: #FFFFFF;
  font-weight: 700;
}

/* Callout Quote Card */
.article-callout-quote {
  background: linear-gradient(135deg, rgba(143, 216, 248, 0.08) 0%, rgba(155, 231, 196, 0.04) 100%);
  border-left: 3px solid var(--color-bleu-iceberg);
  border-radius: 0 16px 16px 0;
  padding: 24px 28px;
  margin: 12px 0;
  position: relative;
}

.article-callout-quote p {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 18px;
  line-height: 1.6;
  color: #FFFFFF;
}

.article-callout-quote .quote-author {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-vert-menthe);
  display: block;
  margin-top: 10px;
}

/* Feature Bullet List */
.article-feature-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 12px 0;
}

.article-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.6;
  color: #E2E8F0;
}

.feature-item-icon {
  color: var(--color-bleu-iceberg);
  font-size: 14px;
  line-height: 1.6;
  flex-shrink: 0;
}

/* Local Video Player Container */
.article-local-video-card {
  width: 100%;
  background: #0B0E14;
  border: 1px solid rgba(143, 216, 248, 0.25);
  border-radius: 18px;
  overflow: hidden;
  margin: 16px 0;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
}

.article-local-video-header {
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.video-header-title {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-vert-menthe);
  display: flex;
  align-items: center;
  gap: 6px;
}

.article-native-video {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  background: #000000;
  display: block;
}

.article-video-caption {
  font-family: var(--font-body);
  font-size: 13px;
  color: #94A3B8;
  padding: 10px 18px;
  background: rgba(0, 0, 0, 0.4);
  line-height: 1.45;
}

/* YouTube Responsive Embed Card */
.article-yt-embed-card {
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #0A0D14;
  margin: 16px 0;
}

.yt-iframe-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  height: 0;
}

.yt-iframe-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Image Card */
.article-image-card {
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #0A0D14;
  margin: 16px 0;
}

.article-image-card img {
  width: 100%;
  height: auto;
  display: block;
}

/* Source / Resource Link Pills Grid */
.article-links-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 20px;
}

.article-source-pill {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 8px 14px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 650;
  color: #E2E8F0;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.article-source-pill:hover {
  background: rgba(143, 216, 248, 0.12);
  border-color: var(--color-bleu-iceberg);
  color: #FFFFFF;
  transform: translateY(-1px);
}

.article-source-pill .pill-arrow {
  color: var(--color-bleu-iceberg);
  font-size: 14px;
}

/* Author Signature & Bio Card */
.article-author-bio-card {
  background: linear-gradient(135deg, #11151D 0%, #0D1017 100%);
  border: 1px solid rgba(143, 216, 248, 0.25);
  border-radius: 22px;
  padding: 32px;
  margin-top: 40px;
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 24px;
  align-items: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

.author-bio-avatar-frame {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  overflow: hidden;
  background: #181C24;
  border: 2px solid var(--color-bleu-iceberg);
}

.author-bio-avatar-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.author-bio-info h4 {
  font-family: var(--font-title);
  font-size: 20px;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 4px;
}

.author-bio-role {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-bleu-iceberg);
  font-weight: 650;
  display: block;
  margin-bottom: 10px;
}

.author-bio-info p {
  font-family: var(--font-body);
  font-size: 14px;
  color: #94A3B8;
  line-height: 1.55;
  margin: 0 0 16px;
}

.author-bio-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.author-bio-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 8px 14px;
  font-family: var(--font-title);
  font-size: 12.5px;
  font-weight: 750;
  color: #FFFFFF;
  text-decoration: none;
  transition: all 0.2s ease;
}

.author-bio-btn:hover {
  background: var(--color-bleu-iceberg);
  color: #0A0A0A;
}

/* Related Articles Grid */
.article-related-section {
  padding: 60px 0 100px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: #06080B;
}

.related-section-header {
  margin-bottom: 32px;
}

.related-section-tag {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-bleu-iceberg);
  margin-bottom: 8px;
  display: block;
}

.related-section-title {
  font-family: var(--font-title);
  font-size: clamp(24px, 2.5vw, 34px);
  font-weight: 800;
  color: #FFFFFF;
  margin: 0;
}

.related-articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.related-card {
  background: #0E121A;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.related-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-bleu-iceberg);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6), 0 0 20px rgba(143, 216, 248, 0.15);
}

.related-card-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.related-card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 1;
}

.related-card-date {
  font-family: var(--font-body);
  font-size: 11.5px;
  color: var(--color-vert-menthe);
  font-weight: 700;
  text-transform: uppercase;
}

.related-card-title {
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: 750;
  color: #FFFFFF;
  line-height: 1.3;
  margin: 0;
}

/* Responsive */
@media (max-width: 992px) {
  .article-content-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .article-sticky-sidebar {
    position: relative;
    top: 0;
  }
  .related-articles-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .related-articles-grid {
    grid-template-columns: 1fr;
  }
  .article-author-bio-card {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 24px;
  }
  .author-bio-avatar-frame {
    margin: 0 auto;
  }
  .author-bio-actions {
    justify-content: center;
  }
}

/* ==========================================================================
   ARTICLE COURSE CTAS & MASTERCLASS PROMO SECTIONS
   ========================================================================== */

/* 1. In-Feed Video Course Spotlight Card (Between Editorial Sections) */
.article-infeed-course-cta {
  position: relative;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.12) 0%, rgba(143, 216, 248, 0.05) 35%, rgba(6, 11, 20, 0.94) 100%);
  backdrop-filter: blur(40px) saturate(220%);
  -webkit-backdrop-filter: blur(40px) saturate(220%);
  border: 1.3px solid rgba(255, 255, 255, 0.35);
  border-radius: 24px;
  overflow: hidden;
  padding: 30px 34px;
  margin: 44px 0;
  box-shadow: 0 32px 85px rgba(0, 0, 0, 0.92), 
              0 0 35px rgba(143, 216, 248, 0.18), 
              inset 0 1.5px 2px rgba(255, 255, 255, 0.6),
              inset 0 -1.5px 2px rgba(0, 0, 0, 0.5);
}

.article-infeed-course-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(143, 216, 248, 0.8), rgba(155, 231, 196, 0.8), transparent);
  pointer-events: none;
}

.infeed-course-grid {
  display: grid;
  grid-template-columns: 1fr 1.18fr;
  gap: 32px;
  align-items: center;
}

.infeed-video-wrap {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: #000000;
  aspect-ratio: 16 / 11;
  width: 100%;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.65), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

.infeed-video-elem {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.infeed-video-badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(6, 11, 20, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 100px;
  padding: 5px 12px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 750;
  color: #FFFFFF;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 2;
}

.infeed-video-badge .badge-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 8px #22C55E;
  animation: pulse-green 2s infinite ease-in-out;
}

@keyframes pulse-green {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.6; }
}

.infeed-course-info {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.infeed-course-tag {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-bleu-iceberg);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.infeed-course-title {
  font-family: var(--font-title);
  font-size: clamp(20px, 1.85vw, 25px);
  font-weight: 850;
  line-height: 1.24;
  color: #FFFFFF;
  letter-spacing: -0.02em;
  margin: 0;
}

.infeed-course-title .serif-italic {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(135deg, var(--color-bleu-iceberg), var(--color-vert-menthe));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.infeed-course-desc {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.58;
  color: #CBD5E1;
  margin: 0;
}

.infeed-feature-bullets {
  display: flex;
  flex-direction: column;
  gap: 7px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.infeed-feature-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12.5px;
  color: #E2E8F0;
  font-weight: 550;
}

.infeed-feature-item svg {
  color: var(--color-vert-menthe);
  flex-shrink: 0;
}

.infeed-actions-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.infeed-cta-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(143, 216, 248, 0.22) 45%, rgba(155, 231, 196, 0.15) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.2px solid rgba(255, 255, 255, 0.28);
  border-radius: 9999px;
  font-family: var(--font-title);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #FFFFFF;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), inset 0 1px 1.5px rgba(255, 255, 255, 0.4);
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.infeed-cta-btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
  pointer-events: none;
}

.infeed-cta-btn-primary:hover {
  background: linear-gradient(135deg, rgba(143, 216, 248, 0.38) 0%, rgba(155, 231, 196, 0.3) 100%);
  border-color: rgba(143, 216, 248, 0.85);
  color: #FFFFFF;
  box-shadow: 0 10px 30px rgba(143, 216, 248, 0.35), 0 0 20px rgba(143, 216, 248, 0.25), inset 0 1px 2px rgba(255, 255, 255, 0.7);
  transform: translateY(-2px);
}

.infeed-cta-btn-primary:hover::before {
  transform: translateX(100%);
}

.infeed-cta-btn-primary svg {
  width: 14px;
  height: 14px;
  color: #FFFFFF;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.infeed-cta-btn-primary:hover svg {
  transform: translate(3px, -3px);
}

.infeed-cta-btn-secondary {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #CBD5E1;
  border-radius: 9999px;
  padding: 11px 20px;
  font-family: var(--font-title);
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.25s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

.infeed-cta-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(143, 216, 248, 0.5);
  color: #FFFFFF;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45), 0 0 15px rgba(143, 216, 248, 0.15);
  transform: translateY(-1px);
}

/* 2. Grand Architectural Masterclass Banner Section (Full Width Bottom CTA) */
.article-masterclass-banner-section {
  padding: 0 0 100px;
  background: #080A0E;
}

.masterclass-banner-card {
  position: relative;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.12) 0%, rgba(143, 216, 248, 0.05) 35%, rgba(6, 11, 20, 0.94) 100%);
  backdrop-filter: blur(40px) saturate(220%);
  -webkit-backdrop-filter: blur(40px) saturate(220%);
  border: 1.3px solid rgba(255, 255, 255, 0.35);
  border-radius: 28px;
  padding: 56px 64px;
  overflow: hidden;
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.95), 
              0 0 40px rgba(143, 216, 248, 0.2), 
              inset 0 1.5px 2px rgba(255, 255, 255, 0.6),
              inset 0 -1.5px 2px rgba(0, 0, 0, 0.5);
}

.masterclass-banner-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(143, 216, 248, 0.8), rgba(155, 231, 196, 0.8), transparent);
  pointer-events: none;
}

.masterclass-ambient-video-layer {
  position: absolute;
  top: 0;
  right: 0;
  width: 55%;
  height: 100%;
  opacity: 0.22;
  pointer-events: none;
  overflow: hidden;
  mask-image: linear-gradient(to left, black 30%, transparent 95%);
  -webkit-mask-image: linear-gradient(to left, black 30%, transparent 95%);
}

.masterclass-ambient-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.masterclass-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
}

.masterclass-left-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.masterclass-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(143, 216, 248, 0.12);
  border: 1px solid rgba(143, 216, 248, 0.35);
  border-radius: 100px;
  padding: 6px 14px;
  width: fit-content;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--color-bleu-iceberg);
  text-transform: uppercase;
}

.masterclass-title {
  font-family: var(--font-title);
  font-size: clamp(32px, 3.2vw, 48px);
  font-weight: 850;
  line-height: 1.15;
  color: #FFFFFF;
  letter-spacing: -0.025em;
  margin: 0;
}

.masterclass-title .serif-italic {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(135deg, var(--color-bleu-iceberg), var(--color-vert-menthe));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.masterclass-desc {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: #CBD5E1;
  margin: 0;
}

.masterclass-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 18px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.masterclass-stat-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.masterclass-stat-num {
  font-family: var(--font-title);
  font-size: 20px;
  font-weight: 850;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  gap: 4px;
}

.masterclass-stat-num span {
  color: var(--color-vert-menthe);
}

.masterclass-stat-lbl {
  font-family: var(--font-body);
  font-size: 11.5px;
  color: #94A3B8;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
}

.masterclass-right-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.masterclass-card-box {
  position: relative;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.07) 0%, rgba(143, 216, 248, 0.03) 30%, rgba(8, 14, 24, 0.88) 100%);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border: 1.2px solid rgba(255, 255, 255, 0.22);
  border-radius: 24px;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), 
              0 0 30px rgba(143, 216, 248, 0.12),
              inset 0 1.5px 2px rgba(255, 255, 255, 0.4);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.masterclass-card-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(143, 216, 248, 0.6), rgba(155, 231, 196, 0.6), transparent);
  pointer-events: none;
}

/* Card Header */
.masterclass-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.card-header-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-title);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #94A3B8;
  text-transform: uppercase;
}

.card-live-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 8px #22C55E;
  position: relative;
  flex-shrink: 0;
}

.card-live-pulse::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid #22C55E;
  opacity: 0.6;
  animation: pulseLiveDot 2s infinite ease-out;
}

@keyframes pulseLiveDot {
  0% { transform: scale(0.9); opacity: 0.8; }
  70% { transform: scale(1.8); opacity: 0; }
  100% { transform: scale(2); opacity: 0; }
}

.card-header-badge {
  font-family: var(--font-title);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.08em;
  color: var(--color-bleu-iceberg);
  background: rgba(143, 216, 248, 0.1);
  border: 1px solid rgba(143, 216, 248, 0.25);
  padding: 3px 9px;
  border-radius: 100px;
  text-transform: uppercase;
}

/* Interactive Track Cards */
.masterclass-tracks-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.masterclass-track-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  text-decoration: none;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.18);
}

.masterclass-track-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--color-bleu-iceberg), var(--color-vert-menthe));
  opacity: 0;
  transform: scaleY(0.4);
  transition: all 0.28s ease;
}

.masterclass-track-card:hover {
  background: linear-gradient(135deg, rgba(143, 216, 248, 0.15) 0%, rgba(155, 231, 196, 0.08) 100%);
  border-color: rgba(143, 216, 248, 0.6);
  transform: translateX(4px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 25px rgba(143, 216, 248, 0.22), inset 0 1px 1.5px rgba(255, 255, 255, 0.5);
}

.masterclass-track-card:hover::before {
  opacity: 1;
  transform: scaleY(1);
}

.track-card-left {
  flex-shrink: 0;
}

.masterclass-track-card .track-icon-box {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(143, 216, 248, 0.1);
  border: 1px solid rgba(143, 216, 248, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-bleu-iceberg);
  font-family: var(--font-title);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  transition: all 0.25s ease;
}

.masterclass-track-card:hover .track-icon-box {
  background: rgba(143, 216, 248, 0.28);
  border-color: var(--color-bleu-iceberg);
  color: #FFFFFF;
  box-shadow: 0 0 14px rgba(143, 216, 248, 0.4);
}

.track-card-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.track-card-top-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}

.track-pill-tag {
  font-family: var(--font-title);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--color-vert-menthe);
  text-transform: uppercase;
}

.track-pill-status {
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 750;
  letter-spacing: 0.04em;
  padding: 1px 7px;
  border-radius: 100px;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.28);
  color: #4ADE80;
  text-transform: uppercase;
}

.track-card-title {
  font-family: var(--font-title);
  font-size: 13.5px;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0;
  line-height: 1.3;
  letter-spacing: -0.01em;
  transition: color 0.2s ease;
}

.masterclass-track-card:hover .track-card-title {
  color: #FFFFFF;
}

.track-card-desc {
  font-family: var(--font-body);
  font-size: 11.5px;
  color: #94A3B8;
  line-height: 1.4;
  margin: 0;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.track-card-action {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.track-arrow-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748B;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.masterclass-track-card:hover .track-arrow-circle {
  background: rgba(143, 216, 248, 0.22);
  border-color: rgba(143, 216, 248, 0.55);
  color: var(--color-bleu-iceberg);
  transform: translate(2px, -2px);
  box-shadow: 0 0 10px rgba(143, 216, 248, 0.3);
}

/* Card Actions */
.masterclass-card-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 4px;
}

.masterclass-btn-main {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 13px 22px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(143, 216, 248, 0.22) 45%, rgba(155, 231, 196, 0.15) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.2px solid rgba(255, 255, 255, 0.28);
  border-radius: 9999px;
  font-family: var(--font-title);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #FFFFFF;
  text-decoration: none;
  box-sizing: border-box;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), inset 0 1px 1.5px rgba(255, 255, 255, 0.4);
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.masterclass-btn-main::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
  pointer-events: none;
}

.masterclass-btn-main:hover {
  background: linear-gradient(135deg, rgba(143, 216, 248, 0.38) 0%, rgba(155, 231, 196, 0.3) 100%);
  border-color: rgba(143, 216, 248, 0.85);
  color: #FFFFFF;
  box-shadow: 0 10px 30px rgba(143, 216, 248, 0.35), 0 0 20px rgba(143, 216, 248, 0.25), inset 0 1px 2px rgba(255, 255, 255, 0.7);
  transform: translateY(-2px);
}

.masterclass-btn-main:hover::before {
  transform: translateX(100%);
}

.masterclass-btn-main .cta-arrow-svg {
  width: 15px;
  height: 15px;
  color: #FFFFFF;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.masterclass-btn-main:hover .cta-arrow-svg {
  transform: translate(3px, -3px);
  color: #FFFFFF;
}

.masterclass-btn-sub {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #CBD5E1;
  border-radius: 9999px;
  padding: 11px 20px;
  font-family: var(--font-title);
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.25s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

.masterclass-btn-sub svg {
  color: var(--color-bleu-iceberg);
  opacity: 0.8;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.masterclass-btn-sub:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(143, 216, 248, 0.5);
  color: #FFFFFF;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45), 0 0 15px rgba(143, 216, 248, 0.15);
  transform: translateY(-1px);
}

.masterclass-btn-sub:hover svg {
  opacity: 1;
  transform: scale(1.1);
}

/* Sidebar Mini Promo Card */
.sidebar-promo-course-card {
  background: linear-gradient(135deg, rgba(143, 216, 248, 0.1) 0%, rgba(155, 231, 196, 0.05) 100%);
  border: 1px solid rgba(143, 216, 248, 0.3);
  border-radius: 18px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sidebar-promo-course-card h5 {
  font-family: var(--font-title);
  font-size: 14px;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0;
  line-height: 1.3;
}

.sidebar-promo-course-card p {
  font-family: var(--font-body);
  font-size: 12px;
  color: #94A3B8;
  line-height: 1.45;
  margin: 0;
}

.sidebar-promo-course-btn {
  background: var(--color-bleu-iceberg);
  color: #0A0A0A;
  border-radius: 8px;
  padding: 8px 12px;
  font-family: var(--font-title);
  font-size: 11.5px;
  font-weight: 800;
  text-decoration: none;
  text-align: center;
  transition: all 0.2s ease;
}

.sidebar-promo-course-btn:hover {
  background: var(--color-vert-menthe);
}

@media (max-width: 992px) {
  .infeed-course-grid {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .infeed-video-wrap {
    height: auto;
    aspect-ratio: 16 / 10;
    min-height: auto;
  }
  .masterclass-grid {
    grid-template-columns: 1fr;
  }
  .masterclass-ambient-video-layer {
    display: none;
  }
  .masterclass-banner-card {
    padding: 36px 28px;
  }
}

/* ==========================================================================
   HERO INTERACTIVE - EXACT SCREEN FIT (100vh - Header Height)
   ========================================================================== */
.hero-interactive-section {
  position: relative;
  width: 100%;
  height: calc(100vh - var(--header-height, 70px));
  min-height: calc(100vh - var(--header-height, 70px));
  max-height: calc(100vh - var(--header-height, 70px));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background-color: #030407;
  overflow: hidden;
  padding-top: clamp(8px, 1.5vh, 18px);
  padding-bottom: 0;
  box-sizing: border-box;
}

/* Subtly Tinted Cinematic Video Background Layer */
.hero-video-tint-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-tinted-bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.14;
  filter: brightness(0.38) contrast(1.3) saturate(0.85);
  transform: scale(1.05);
}

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

.hero-interactive-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, transparent 25%, rgba(3, 4, 7, 0.72) 80%),
              linear-gradient(to bottom, rgba(3, 4, 7, 0.5) 0%, transparent 20%, transparent 65%, #030407 100%);
  pointer-events: none;
  z-index: 2;
}

.hero-interactive-container {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  max-width: 1380px;
  padding: clamp(54px, 7.8vh, 92px) clamp(20px, 4vw, 60px) 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: space-between;
  overflow: visible;
}

.hero-interactive-editorial {
  max-width: 1440px;
  width: 100%;
  margin: clamp(6px, 1.2vh, 18px) auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(8px, 1.4vh, 16px);
  z-index: 10;
  flex-shrink: 0;
}

.hero-accent-subtitle {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(14px, 1.05vw, 17.5px);
  font-weight: 300;
  color: rgba(247, 247, 242, 0.88);
  margin: 0;
  padding: 0;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-align: center;
}

.hero-accent-subtitle .accent-gradient-text {
  background: linear-gradient(135deg, #8FD8F8 0%, #9BE7C4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 400;
  font-style: italic;
}

.hero-interactive-title {
  font-family: var(--font-title);
  font-size: clamp(14px, 1.52vw, 26px);
  font-weight: 850;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin: 0 auto;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
  width: 100%;
  display: block;
}

@media (max-width: 1024px) {
  .hero-interactive-title {
    white-space: normal;
    font-size: clamp(19px, 3.2vw, 26px);
    max-width: 760px;
    line-height: 1.28;
  }
}

.hero-interactive-desc {
  font-family: var(--font-body);
  font-size: clamp(13.5px, 0.95vw, 16px);
  line-height: 1.55;
  color: rgba(247, 247, 242, 0.82);
  max-width: 680px;
  margin: 4px auto 0;
  text-align: center;
}

.hero-interactive-ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 2px;
  flex-wrap: wrap;
}

.btn-hero-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 9999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-hero-action.primary {
  background: #FFFFFF;
  color: #07080A;
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.9);
}

.btn-hero-action.primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 30px rgba(255, 255, 255, 0.35), 0 0 0 1px #FFFFFF;
  background: #F7F7F2;
}

.btn-hero-action.secondary {
  background: rgba(12, 18, 28, 0.7);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.btn-hero-action.secondary:hover {
  transform: translateY(-2px) scale(1.02);
  border-color: var(--color-bleu-iceberg);
  color: var(--color-bleu-iceberg);
  box-shadow: 0 8px 30px rgba(143, 216, 248, 0.25);
}

.hero-portrait-stage {
  position: relative;
  width: 100%;
  max-width: 920px;
  height: clamp(460px, 58vh, 620px);
  margin-top: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  user-select: none;
  flex-shrink: 1;
  transform: translateY(45px) translateX(0);
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* Position Shift States for Button Popover Hovers */
/* Button 2: Former vos créatifs -> Warren slides RIGHT so popover on left is clear */
.hero-portrait-stage.shift-right,
.hero-portrait-stage.state-creatifs {
  transform: translateY(45px) translateX(clamp(110px, 14vw, 200px));
}

/* Button 3: Former votre équipe commerciale -> Warren slides LEFT so popover on right is clear */
.hero-portrait-stage.shift-left,
.hero-portrait-stage.state-commercial {
  transform: translateY(45px) translateX(clamp(-200px, -14vw, -110px));
}

/* Button 1 (Portfolio) & Button 4 (Custom) -> Warren stays CENTERED */
.hero-portrait-stage.state-center,
.hero-portrait-stage.state-portfolio,
.hero-portrait-stage.state-custom {
  transform: translateY(45px) translateX(0);
}

@media (max-width: 900px) {
  .hero-portrait-stage.shift-right,
  .hero-portrait-stage.state-creatifs {
    transform: translateY(45px) translateX(45px);
  }
  .hero-portrait-stage.shift-left,
  .hero-portrait-stage.state-commercial {
    transform: translateY(45px) translateX(-45px);
  }
}

@media (max-width: 640px) {
  .hero-portrait-stage.shift-right,
  .hero-portrait-stage.shift-left,
  .hero-portrait-stage.state-creatifs,
  .hero-portrait-stage.state-commercial {
    transform: translateY(45px) translateX(0);
  }
}

.hero-portrait-glow {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(143, 216, 248, 0.16) 0%, rgba(155, 231, 196, 0.05) 45%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 1;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

.hero-portrait-img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scale(1.02);
  transform-origin: bottom center;
  z-index: 2;
  height: 100%;
  max-height: 620px;
  width: auto;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.95));
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.45s ease;
  will-change: opacity, transform;
}

.hero-portrait-img.active {
  opacity: 1;
  visibility: visible;
  animation: warrenFloatingEffect 6.5s ease-in-out infinite;
}

.hero-face-canvas {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  max-width: 920px;
  z-index: 3;
  pointer-events: none;
}

.hero-body-trigger {
  position: absolute;
  top: 28%;
  left: 50%;
  transform: translateX(-50%);
  width: 440px;
  height: 72%;
  border-radius: 24px;
  z-index: 4;
  cursor: crosshair;
}

/* ==========================================================================
   LIQUID GLASS INTERACTIVE CTAS (4 SURROUNDING POINTS)
   ========================================================================== */
.hero-floating-pill.hero-liquid-glass-cta {
  position: absolute;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px 10px 14px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.13) 0%, rgba(143, 216, 248, 0.07) 35%, rgba(9, 15, 26, 0.88) 100%);
  border: 1.2px solid rgba(255, 255, 255, 0.32);
  border-radius: 9999px;
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75), 
              0 0 24px rgba(143, 216, 248, 0.20),
              inset 0 1px 1.5px rgba(255, 255, 255, 0.55),
              inset 0 -1px 2px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  pointer-events: auto;
  text-decoration: none;
  transition: box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.35s ease,
              transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* Liquid Sheen Shimmer Reflection */
.hero-floating-pill.hero-liquid-glass-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, 0.35) 45%, rgba(143, 216, 248, 0.4) 55%, transparent 75%);
  background-size: 200% 100%;
  background-position: -150% 0;
  pointer-events: none;
  transition: background-position 0.75s ease;
  z-index: 1;
}

.hero-floating-pill.hero-liquid-glass-cta:hover::before {
  background-position: 150% 0;
}

.hero-floating-pill.hero-liquid-glass-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 22px 10px 12px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(143, 216, 248, 0.12) 30%, rgba(14, 22, 38, 0.94) 100%) !important;
  backdrop-filter: blur(40px) saturate(220%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(220%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: 9999px !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.88), 
              0 0 28px rgba(143, 216, 248, 0.35), 
              inset 0 1.5px 2px rgba(255, 255, 255, 0.85), 
              inset 0 -1.5px 2px rgba(0, 0, 0, 0.6) !important;
  color: #FFFFFF !important;
  text-decoration: none;
  cursor: pointer;
  z-index: 50;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  user-select: none;
  overflow: hidden;
}

.hero-floating-pill.hero-liquid-glass-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.4) 45%, rgba(143, 216, 248, 0.5) 55%, transparent 75%);
  background-size: 200% 100%;
  background-position: -150% 0;
  pointer-events: none;
  transition: background-position 0.7s ease;
  z-index: 1;
}

.hero-floating-pill.hero-liquid-glass-cta:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.32) 0%, rgba(143, 216, 248, 0.22) 40%, rgba(18, 30, 52, 0.98) 100%) !important;
  border-color: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.95), 
              0 0 38px rgba(143, 216, 248, 0.6), 
              inset 0 2px 3px rgba(255, 255, 255, 1) !important;
  transform: scale(1.06) translateY(-2px);
  z-index: 90;
  animation-play-state: paused;
}

.hero-floating-pill.hero-liquid-glass-cta:hover::before {
  background-position: 150% 0;
}

.hero-liquid-glass-cta .pill-icon-box {
  position: relative;
  z-index: 2;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  flex-shrink: 0;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-liquid-glass-cta:hover .pill-icon-box {
  transform: scale(1.15);
}

.hero-liquid-glass-cta .pill-lottie-anim {
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: #FFFFFF;
}

.hero-liquid-glass-cta .pill-lottie-anim svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.hero-liquid-glass-cta .pill-label {
  position: relative;
  z-index: 2;
  font-family: var(--font-title);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  white-space: nowrap;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

/* Position & Floating Orbits */
.pill-pos-1 {
  top: 13%;
  left: 20px;
  animation: floatPill1 6s ease-in-out infinite alternate;
}

.pill-pos-2 {
  top: 9%;
  right: 25px;
  animation: floatPill2 7s ease-in-out infinite alternate;
}

.pill-pos-3 {
  top: 49%;
  left: 8px;
  animation: floatPill3 6.5s ease-in-out infinite alternate;
}

.pill-pos-4 {
  top: 45%;
  right: 12px;
  animation: floatPill4 7.5s ease-in-out infinite alternate;
}

@keyframes floatPill1 {
  0% { transform: translate(0, 0) rotate(-1deg); }
  100% { transform: translate(5px, -10px) rotate(1.5deg); }
}

@keyframes floatPill2 {
  0% { transform: translate(0, 0) rotate(1deg); }
  100% { transform: translate(-6px, -12px) rotate(-1.5deg); }
}

@keyframes floatPill3 {
  0% { transform: translate(0, 0) rotate(-0.5deg); }
  100% { transform: translate(4px, -8px) rotate(1deg); }
}

@keyframes floatPill4 {
  0% { transform: translate(0, 0) rotate(0.8deg); }
  100% { transform: translate(-5px, -9px) rotate(-1deg); }
}

/* ==========================================================================
   HERO SIDE SHOWCASE PANELS (LEFT & RIGHT RED SECTIONS) - LIQUID GLASS
   ========================================================================== */
.hero-side-showcase {
  position: absolute;
  top: 52%;
  width: clamp(330px, 24vw, 410px);
  padding: 24px 26px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.12) 0%, rgba(143, 216, 248, 0.05) 35%, rgba(6, 11, 20, 0.90) 100%);
  backdrop-filter: blur(40px) saturate(220%);
  -webkit-backdrop-filter: blur(40px) saturate(220%);
  border: 1.2px solid rgba(255, 255, 255, 0.35);
  border-radius: 24px;
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.95), 
              0 0 40px rgba(143, 216, 248, 0.25), 
              inset 0 1.5px 2px rgba(255, 255, 255, 0.7),
              inset 0 -1.5px 2px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
              visibility 0.35s;
  z-index: 80;
  text-align: left;
  box-sizing: border-box;
}

.hero-side-showcase.panel-left {
  left: clamp(20px, 3.5vw, 60px);
  transform: translateY(-50%) translateX(-30px) scale(0.96);
}

.hero-side-showcase.panel-right {
  right: clamp(20px, 3.5vw, 60px);
  transform: translateY(-50%) translateX(30px) scale(0.96);
}

.hero-side-showcase.is-active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(-50%) translateX(0) scale(1) !important;
  z-index: 1000 !important;
}

/* Side Panel View Switcher */
.showcase-view {
  display: none !important;
}

.showcase-view.is-visible {
  display: block !important;
  animation: viewFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes viewFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.showcase-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.showcase-badge {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3.5px 9px;
  border-radius: 9999px;
}

.badge-blue {
  background: rgba(143, 216, 248, 0.18);
  color: var(--color-bleu-iceberg);
  border: 1px solid rgba(143, 216, 248, 0.4);
}

.badge-mint {
  background: rgba(155, 231, 196, 0.18);
  color: var(--color-vert-menthe);
  border: 1px solid rgba(155, 231, 196, 0.4);
}

.badge-gold {
  background: rgba(245, 197, 66, 0.18);
  color: #F5C542;
  border: 1px solid rgba(245, 197, 66, 0.4);
}

.badge-purple {
  background: rgba(192, 132, 252, 0.18);
  color: #C084FC;
  border: 1px solid rgba(192, 132, 252, 0.4);
}

.showcase-tag {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 12.5px;
  color: rgba(247, 247, 242, 0.75);
}

.showcase-title {
  font-family: var(--font-title);
  font-size: clamp(18px, 1.4vw, 22px);
  font-weight: 800;
  line-height: 1.25;
  color: #FFFFFF;
  margin: 0 0 10px 0;
  letter-spacing: -0.015em;
}

.showcase-title .serif-italic {
  font-family: var(--font-accent);
  font-weight: 300;
  font-style: italic;
  color: var(--color-bleu-iceberg);
}

.showcase-desc {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(247, 247, 242, 0.78);
  margin: 0 0 16px 0;
}

.showcase-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  margin-bottom: 20px;
}

.showcase-grid-item {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.showcase-grid-item .feat-bullet {
  color: var(--color-bleu-iceberg);
  font-size: 11px;
}

.showcase-cta-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 18px;
  background: linear-gradient(135deg, rgba(143, 216, 248, 0.15) 0%, rgba(155, 231, 196, 0.08) 100%);
  border: 1px solid rgba(143, 216, 248, 0.4);
  border-radius: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #FFFFFF;
  text-decoration: none;
  box-sizing: border-box;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  transition: all 0.25s ease;
}

.showcase-cta-btn:hover {
  background: linear-gradient(135deg, rgba(143, 216, 248, 0.3) 0%, rgba(155, 231, 196, 0.2) 100%);
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 8px 24px rgba(143, 216, 248, 0.35), inset 0 1px 1.5px rgba(255, 255, 255, 0.8);
  transform: translateY(-1px);
}

.showcase-cta-btn .btn-arrow {
  font-size: 14px;
  transition: transform 0.25s ease;
}

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

@media (max-width: 900px) {
  .hero-interactive-title,
  .hero-accent-subtitle {
    white-space: normal;
  }
  .hero-floating-pill {
    padding: 6px 12px;
  }
  .hero-floating-pill .pill-label {
    font-size: 11.5px;
  }
  .pill-pos-1 { top: 8%; left: -5px; }
  .pill-pos-2 { top: 6%; right: -5px; }
  .pill-pos-3 { top: 40%; left: -10px; }
  .pill-pos-4 { top: 38%; right: -10px; }
}

@media (max-width: 680px) {
  .pill-pos-3, .pill-pos-4 { display: none; }
}

.hero-bottom-control-bar {
  position: relative;
  z-index: 6;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 16px;
}

.hero-play-circle-btn {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 50%;
  background: #FFFFFF;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 25px rgba(255, 255, 255, 0.25);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-play-circle-btn:hover {
  transform: scale(1.08);
  background: #8FD8F8;
  box-shadow: 0 10px 30px rgba(143, 216, 248, 0.5);
}

.hero-play-circle-btn svg {
  fill: #07080A;
  margin-left: 2px;
  transition: fill 0.2s ease;
}

.hero-timeline-track {
  flex: 1;
  height: 10px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 9999px;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hero-timeline-progress {
  height: 100%;
  width: 35%;
  background: linear-gradient(90deg, var(--color-bleu-iceberg), #9BE7C4, #FFFFFF);
  border-radius: 9999px;
  position: relative;
  transition: width 0.1s linear;
  box-shadow: 0 0 12px rgba(143, 216, 248, 0.6);
}

.hero-timeline-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
}

/* ==========================================================================
   HERO BUTTONS DOCK (ALIGNED UNDER HEADING IN RED AREA)
   ========================================================================== */
.hero-buttons-dock {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(12px, 1.4vw, 20px);
  margin-top: clamp(16px, 2.2vh, 26px);
  position: relative;
  z-index: 60;
  width: 100%;
  max-width: 1200px;
}

.hero-btn-popover-wrap {
  position: relative;
  display: inline-flex;
}

/* Dock Button Pill (Enlarged + Transparent Blurred Frosted Glass) */
.hero-dock-pill.hero-liquid-glass-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px 12px 18px;
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 9999px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
  text-decoration: none;
  cursor: pointer;
  z-index: 50;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  overflow: hidden;
  white-space: nowrap;
}

.hero-dock-pill.hero-liquid-glass-cta:hover,
.hero-btn-popover-wrap:hover .hero-dock-pill.hero-liquid-glass-cta,
.hero-btn-popover-wrap.is-open .hero-dock-pill.hero-liquid-glass-cta {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(143, 216, 248, 0.6) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 24px rgba(143, 216, 248, 0.25), inset 0 1px 1.5px rgba(255, 255, 255, 0.35) !important;
  transform: translateY(-2px);
  z-index: 90;
}

.hero-dock-pill .pill-icon-box {
  position: relative;
  z-index: 2;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.hero-dock-pill:hover .pill-icon-box,
.hero-btn-popover-wrap:hover .pill-icon-box {
  transform: scale(1.15);
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.hero-dock-pill .pill-lottie-anim {
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: #FFFFFF;
}

.hero-dock-pill .pill-lottie-anim svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.hero-dock-pill .pill-label {
  position: relative;
  z-index: 2;
  font-family: var(--font-title);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.hero-dock-pill .pill-accent-text {
  font-family: var(--font-accent) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em;
  font-size: 1.18em;
  line-height: 1;
  display: inline-block;
  vertical-align: baseline;
  background: linear-gradient(135deg, #F7F7F2 0%, #8FD8F8 55%, #9BE7C4 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ==========================================================================
   DROPDOWN POPOVER SHOWCASE CARD (APPEARS DIRECTLY UNDER EACH BUTTON)
   ========================================================================== */
.hero-popover-card {
  position: absolute;
  top: calc(100% + 14px);
  width: clamp(330px, 24vw, 390px);
  padding: 22px 24px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.14) 0%, rgba(143, 216, 248, 0.06) 35%, rgba(6, 11, 20, 0.96) 100%);
  backdrop-filter: blur(40px) saturate(220%);
  -webkit-backdrop-filter: blur(40px) saturate(220%);
  border: 1.3px solid rgba(255, 255, 255, 0.4);
  border-radius: 22px;
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.95), 
              0 0 40px rgba(143, 216, 248, 0.25), 
              inset 0 1.5px 2px rgba(255, 255, 255, 0.7),
              inset 0 -1.5px 2px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), 
              visibility 0.25s;
  z-index: 1000;
  text-align: left;
  box-sizing: border-box;
}

/* Invisible hover bridge */
.hero-popover-card::before {
  content: '';
  position: absolute;
  top: -16px;
  left: 0;
  width: 100%;
  height: 16px;
}

.hero-popover-card.popover-align-left {
  left: 0;
  transform: translateY(10px) scale(0.97);
}

.hero-popover-card.popover-align-center {
  left: 50%;
  transform: translateX(-50%) translateY(10px) scale(0.97);
}

.hero-popover-card.popover-align-right {
  right: 0;
  left: auto;
  transform: translateY(10px) scale(0.97);
}

/* Hover Reveal */
.hero-btn-popover-wrap:hover .hero-popover-card,
.hero-btn-popover-wrap.is-open .hero-popover-card {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.hero-btn-popover-wrap:hover .hero-popover-card.popover-align-left,
.hero-btn-popover-wrap.is-open .hero-popover-card.popover-align-left,
.hero-btn-popover-wrap:hover .hero-popover-card.popover-align-right,
.hero-btn-popover-wrap.is-open .hero-popover-card.popover-align-right {
  transform: translateY(0) scale(1) !important;
}

.hero-btn-popover-wrap:hover .hero-popover-card.popover-align-center,
.hero-btn-popover-wrap.is-open .hero-popover-card.popover-align-center {
  transform: translateX(-50%) translateY(0) scale(1) !important;
}

.showcase-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 13px 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(143, 216, 248, 0.16) 45%, rgba(155, 231, 196, 0.1) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 9999px;
  font-family: var(--font-title);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #FFFFFF;
  text-decoration: none;
  box-sizing: border-box;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), inset 0 1px 1.5px rgba(255, 255, 255, 0.35);
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.showcase-cta-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
  pointer-events: none;
}

.showcase-cta-btn:hover {
  background: linear-gradient(135deg, rgba(143, 216, 248, 0.35) 0%, rgba(155, 231, 196, 0.28) 100%);
  border-color: rgba(143, 216, 248, 0.8);
  color: #FFFFFF;
  box-shadow: 0 10px 30px rgba(143, 216, 248, 0.35), 0 0 20px rgba(143, 216, 248, 0.25), inset 0 1px 2px rgba(255, 255, 255, 0.7);
  transform: translateY(-2px);
}

.showcase-cta-btn:hover::before {
  transform: translateX(100%);
}

.showcase-cta-btn .cta-arrow-svg {
  width: 15px;
  height: 15px;
  color: #FFFFFF;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.showcase-cta-btn:hover .cta-arrow-svg {
  transform: translate(3px, -3px);
  color: #FFFFFF;
}

/* ==========================================================================
   HERO FULL-WIDTH CLIENTS LOGOS MARQUEE (SLIDES BEHIND WARREN AT BOTTOM)
   ========================================================================== */
.hero-clients-marquee-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px 0 clamp(16px, 2.2vh, 26px);
  z-index: 2; /* Positioned BEHIND Warren's portrait stage (z-index: 5) */
  pointer-events: auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,1) 8%, rgba(0,0,0,1) 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,1) 8%, rgba(0,0,0,1) 92%, transparent 100%);
}

.hero-clients-marquee-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(247, 247, 242, 0.45);
  margin-bottom: 10px;
  text-align: center;
  user-select: none;
}

.hero-clients-marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.hero-clients-marquee-group {
  display: flex;
  align-items: center;
  gap: clamp(48px, 5.5vw, 84px);
  padding-right: clamp(48px, 5.5vw, 84px);
  animation: heroMarqueeScroll 38s linear infinite;
  will-change: transform;
}

.hero-clients-marquee-wrap:hover .hero-clients-marquee-group {
  animation-play-state: paused;
}

@keyframes heroMarqueeScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.hero-client-logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(38px, 4.2vh, 48px);
  opacity: 0.55;
  filter: grayscale(100%) brightness(1.9);
  transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease;
  flex-shrink: 0;
}

.hero-client-logo-item:hover {
  opacity: 1;
  filter: grayscale(0%) brightness(1);
  transform: scale(1.1);
}

.hero-client-logo {
  height: clamp(28px, 3.2vh, 40px);
  max-width: clamp(110px, 10vw, 160px);
  width: auto;
  object-fit: contain;
  display: block;
}

/* ==========================================================================
   CINEMATIC ENTRY ANIMATION SUITE
   ========================================================================== */
@keyframes cinematicFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes cinematicSubtitleReveal {
  0% {
    opacity: 0;
    transform: translateY(-14px);
    filter: blur(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes cinematicTitleReveal {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.96);
    filter: blur(14px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes cinematicDescReveal {
  0% {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes cinematicPillReveal {
  0% {
    opacity: 0;
    transform: translateY(22px) scale(0.92);
    filter: blur(8px);
  }
  70% {
    transform: translateY(-2px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes cinematicWarrenReveal {
  0% {
    opacity: 0;
    transform: translateY(120px) scale(0.94);
    filter: brightness(0.3) blur(12px) drop-shadow(0 0 0 rgba(0, 0, 0, 0));
  }
  65% {
    filter: brightness(1.08) blur(0px);
  }
  100% {
    opacity: 1;
    transform: translateY(45px) scale(1.02);
    filter: brightness(1) blur(0px) drop-shadow(0 25px 50px rgba(0, 0, 0, 0.95));
  }
}

@keyframes cinematicMarqueeReveal {
  0% {
    opacity: 0;
    transform: translateY(24px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cinematicGlowExpand {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.5);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}

/* Assigning Cinematic Entry Delays to Elements */
.hero-interactive-section {
  animation: cinematicFadeIn 0.9s ease-out backwards;
}

.hero-accent-subtitle {
  animation: cinematicSubtitleReveal 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.15s backwards;
}

.hero-interactive-title {
  animation: cinematicTitleReveal 1.05s cubic-bezier(0.16, 1, 0.3, 1) 0.28s backwards;
}

.hero-interactive-desc {
  animation: cinematicDescReveal 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.42s backwards;
}

.hero-buttons-dock .hero-btn-popover-wrap:nth-child(1) {
  animation: cinematicPillReveal 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.56s backwards;
}

.hero-buttons-dock .hero-btn-popover-wrap:nth-child(2) {
  animation: cinematicPillReveal 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.68s backwards;
}

.hero-buttons-dock .hero-btn-popover-wrap:nth-child(3) {
  animation: cinematicPillReveal 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.80s backwards;
}

.hero-buttons-dock .hero-btn-popover-wrap:nth-child(4) {
  animation: cinematicPillReveal 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.92s backwards;
}

.hero-clients-marquee-wrap {
  animation: cinematicMarqueeReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.05s backwards;
}

/* ==========================================================================
   ABOUT ME PAGE ("VOICI WARREN" — CINEMATIC UNDERWATER PIANO VIDEO HERO)
   ========================================================================== */
.about-page {
  background-color: #070709;
  color: var(--color-blanc-casse);
  overflow-x: hidden;
}

.about-hero-piano-section {
  min-height: calc(100vh - var(--header-height, 72px));
  height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  background-color: #05070A;
  border-bottom: 1px solid var(--grid-line-color);
}

/* Cinematic Full-Coverage Video Background Layer */
.about-piano-video-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.about-piano-bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 110%;
  height: 110%;
  min-width: 110%;
  min-height: 110%;
  transform: translate(-50%, -50%) scale(1.1);
  object-fit: cover;
  object-position: center center;
  filter: brightness(0.92) contrast(1.04) saturate(1.1);
}

/* Light, Subtle Vignette - Less Opaque for Crisp Video Visibility */
.about-piano-dark-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 65%, rgba(5, 7, 10, 0.12) 0%, rgba(5, 7, 10, 0.42) 75%, rgba(5, 7, 10, 0.72) 100%);
  z-index: 2;
}

/* Smooth Fade Away to the Top (Header area) */
.about-piano-top-fade {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(160px, 30vh, 340px);
  background: linear-gradient(180deg, rgba(5, 7, 10, 0.88) 0%, rgba(5, 7, 10, 0.5) 45%, transparent 100%);
  z-index: 3;
  pointer-events: none;
}

.about-hero-container-unified {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: flex-end;
  width: 100%;
  max-width: 1380px;
  padding: clamp(120px, 24vh, 320px) clamp(20px, 4vw, 60px) clamp(50px, 8vh, 90px);
  box-sizing: border-box;
  z-index: 5;
  position: relative;
  margin-top: auto;
}

.about-editorial-stack {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 1.8vh, 22px);
  z-index: 10;
  will-change: transform, filter, opacity;
  transform: translate3d(0, 0, 0);
  transition: transform 0.08s ease-out, filter 0.08s ease-out, opacity 0.08s ease-out;
}

.about-hero-main-title {
  font-family: var(--font-title, 'Inter', sans-serif);
  font-size: clamp(3rem, 5.2vw, 5.4rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #FFFFFF;
  margin: 0;
  text-shadow: 0 10px 40px rgba(0, 0, 0, 0.9);
}

.about-manifesto-paragraph {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: clamp(15.5px, 1.15vw, 18px);
  font-weight: 400;
  line-height: 1.72;
  color: rgba(247, 247, 242, 0.92);
  max-width: 1080px;
  margin: 0 auto;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.9);
}

.about-bold-highlight {
  color: #FFFFFF;
  font-weight: 700;
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .about-hero-main-title {
    font-size: 2.7rem;
  }
}

@media (max-width: 640px) {
  .about-hero-main-title {
    font-size: 2.2rem;
  }

  .about-manifesto-paragraph {
    font-size: 14px;
    line-height: 1.6;
  }

  .about-hero-container-unified {
    padding: 60px 20px;
  }
}

/* =============================================================================
   3. ABOUT TIMELINE YEARS SLIDER : LE PARCOURS (02 / REPÈRES)
   ============================================================================= */
.about-timeline-section {
  position: relative;
  background-color: #000000;
  padding: clamp(80px, 10vh, 140px) 0 clamp(90px, 12vh, 150px);
  overflow: hidden;
  border-top: 1px solid var(--grid-line-color);
  border-bottom: 1px solid var(--grid-line-color);
}

.timeline-ambient-glow {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(500px, 60vw, 800px);
  height: clamp(500px, 60vw, 800px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(143, 216, 248, 0.08) 0%, rgba(59, 130, 246, 0.02) 60%, transparent 80%);
  filter: blur(90px);
  pointer-events: none;
  z-index: 1;
}

.timeline-grid-lines {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 1;
}

.timeline-container {
  width: 100%;
  max-width: 100%;
  padding: 0;
  position: relative;
  z-index: 5;
}

/* Section Header */
.timeline-header-block {
  max-width: 1200px;
  margin: 0 auto clamp(36px, 6vh, 60px);
  padding: 0 clamp(20px, 4vw, 60px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.timeline-accent-subtitle {
  margin-bottom: 12px;
}

.timeline-main-title {
  font-family: var(--font-title, 'Inter', sans-serif);
  font-size: clamp(2.6rem, 4.4vw, 4.4rem);
  font-weight: 900;
  letter-spacing: -0.025em;
  color: #FFFFFF;
  margin: 0 0 16px 0;
  line-height: 1.1;
}

.timeline-header-desc {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: clamp(15px, 1.05vw, 17.5px);
  font-weight: 400;
  line-height: 1.65;
  color: rgba(247, 247, 242, 0.75);
  max-width: 720px;
  margin: 0 auto;
}

/* Timeline Slider Stage (Full Width Edge-to-Edge) */
.timeline-slider-stage {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

/* Prev / Next Navigation Arrows */
.timeline-slider-arrow {
  position: absolute;
  top: 48%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(10, 14, 22, 0.88);
  border: 1px solid rgba(143, 216, 248, 0.3);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.7);
  outline: none;
}

.timeline-slider-arrow.prev {
  left: clamp(16px, 4vw, 70px);
}

.timeline-slider-arrow.next {
  right: clamp(16px, 4vw, 70px);
}

.timeline-slider-arrow:hover {
  background: rgba(143, 216, 248, 0.22);
  border-color: rgba(143, 216, 248, 0.7);
  box-shadow: 0 0 25px rgba(143, 216, 248, 0.45);
  transform: translateY(-50%) scale(1.1);
}

.timeline-slider-arrow:active {
  transform: translateY(-50%) scale(0.95);
}

/* Slides Container & Track with Full-Width Peek Overflows */
.timeline-slides-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 20px 0 30px;
  mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
}

.timeline-slides-track {
  display: flex;
  align-items: center;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* Slide Item (Side cards: Full width peek, blurred, scaled down) */
.timeline-slide-item {
  flex: 0 0 clamp(320px, 58vw, 880px);
  margin: 0 clamp(16px, 2.5vw, 36px);
  box-sizing: border-box;
  opacity: 0.35;
  filter: blur(6px);
  transform: scale(0.9);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  user-select: none;
}

.timeline-slide-item.active {
  opacity: 1;
  filter: blur(0px);
  transform: scale(1);
  cursor: default;
}

/* Milestone Content Card */
.milestone-content-card {
  position: relative;
  width: 100%;
  background: rgba(10, 10, 14, 0.78);
  border: 1px solid rgba(143, 216, 248, 0.16);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border-radius: 24px;
  padding: clamp(28px, 4vw, 46px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85);
  text-align: center;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.timeline-slide-item.active .milestone-content-card {
  border-color: rgba(143, 216, 248, 0.45);
  box-shadow: 0 25px 65px rgba(0, 0, 0, 0.95), 0 0 35px rgba(143, 216, 248, 0.12);
}

.milestone-badge-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.milestone-year-pill {
  font-family: var(--font-title, sans-serif);
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #06080C;
  background: linear-gradient(135deg, #8FD8F8 0%, #9BE7C4 100%);
  padding: 4px 12px;
  border-radius: 9999px;
  box-shadow: 0 0 14px rgba(143, 216, 248, 0.55);
}

.milestone-card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 18px;
}

.milestone-role-tag {
  display: inline-block;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--color-bleu-iceberg);
  text-transform: uppercase;
}

.milestone-title {
  font-family: var(--font-title, 'Inter', sans-serif);
  font-size: clamp(1.4rem, 2.1vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin: 0;
  line-height: 1.25;
  text-align: center;
}

.milestone-narrative {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: clamp(14.5px, 1.05vw, 16.5px);
  font-weight: 400;
  line-height: 1.72;
  color: rgba(247, 247, 242, 0.84);
  max-width: 760px;
  margin: 0 auto 24px auto;
  text-align: center;
}

.milestone-narrative strong {
  color: #FFFFFF;
  font-weight: 600;
}

.milestone-narrative em {
  font-family: var(--font-accent, serif);
  font-style: italic;
  color: var(--color-bleu-iceberg);
  font-size: 1.05em;
}

/* Clients / Territories Rail (Centered) */
.milestone-clients-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  width: 100%;
}

.clients-rail-label {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #64748B;
  text-transform: uppercase;
}

/* Strictly One Single Horizontal Line of Logos */
.milestone-logos-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: clamp(16px, 3.2vw, 44px);
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  padding: 8px 0;
  scrollbar-width: none;
}

.milestone-logos-row::-webkit-scrollbar {
  display: none;
}

.milestone-logo-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
  cursor: default;
}

.milestone-logo-chip:hover {
  transform: translateY(-2px);
}

.milestone-logo-img {
  height: clamp(26px, 2.4vw, 38px);
  width: auto;
  max-width: clamp(80px, 7vw, 120px);
  object-fit: contain;
  filter: brightness(0) invert(1) opacity(0.65);
  transition: filter 0.25s ease, transform 0.25s ease;
}

.milestone-logo-img.is-svg {
  height: clamp(24px, 2.2vw, 34px);
}

.milestone-logo-chip:hover .milestone-logo-img {
  filter: brightness(0) invert(1) opacity(1) drop-shadow(0 0 10px rgba(143, 216, 248, 0.85));
  transform: scale(1.08);
}

/* =============================================================================
   TOP HORIZONTAL TIMELINE NAVIGATION (YEARS & PROGRESS BAR)
   ============================================================================= */
.slider-timeline-nav,
.slider-timeline-bottom-nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: clamp(280px, 34vw, 460px);
  margin: 0 auto clamp(24px, 3.8vh, 36px) auto;
  padding: 8px 0;
  z-index: 15;
}

.slider-timeline-line-track {
  position: absolute;
  top: 17px;
  left: 20px;
  right: 20px;
  height: 2px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
  z-index: 1;
}

.slider-timeline-line-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #8FD8F8 0%, #3B82F6 100%);
  box-shadow: 0 0 10px rgba(143, 216, 248, 0.8);
  border-radius: 9999px;
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.slider-timeline-node-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 2;
  outline: none;
  transition: all 0.3s ease;
}

.slider-timeline-node-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #0A0E17;
  border: 2px solid #64748B;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.slider-timeline-node-btn:hover .slider-timeline-node-dot {
  border-color: var(--color-bleu-iceberg);
  background: rgba(143, 216, 248, 0.2);
  transform: scale(1.15);
}

.slider-timeline-node-btn.active .slider-timeline-node-dot {
  background: #FFFFFF;
  border-color: var(--color-bleu-iceberg);
  box-shadow: 0 0 14px var(--color-bleu-iceberg), 0 0 24px rgba(143, 216, 248, 0.7);
  transform: scale(1.3);
}

.slider-timeline-node-year {
  font-family: var(--font-title, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #64748B;
  transition: all 0.3s ease;
}

.slider-timeline-node-btn:hover .slider-timeline-node-year {
  color: #CBD5E1;
}

.slider-timeline-node-btn.active .slider-timeline-node-year {
  color: #FFFFFF;
  font-weight: 900;
  text-shadow: 0 0 12px rgba(143, 216, 248, 0.6);
}

/* Responsive Adjustments */
@media (max-width: 640px) {
  .milestone-content-card {
    padding: 24px 18px;
    border-radius: 18px;
  }
  .timeline-slider-arrow {
    display: none;
  }
  .slider-timeline-bottom-nav {
    width: 280px;
  }
}

/* =============================================================================
   4. ABOUT SERVICES SECTION : CE QUE JE PROPOSE
   ============================================================================= */
.about-services-section {
  position: relative;
  background-color: #000000;
  padding: clamp(90px, 11vh, 150px) 0 clamp(100px, 13vh, 170px);
  overflow: hidden;
  border-top: 1px solid var(--grid-line-color);
}

.about-services-glow {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(500px, 65vw, 900px);
  height: clamp(400px, 50vw, 700px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(143, 216, 248, 0.07) 0%, rgba(59, 130, 246, 0.02) 60%, transparent 80%);
  filter: blur(100px);
  pointer-events: none;
  z-index: 1;
}

.about-services-container {
  width: 100%;
  max-width: 100%;
  padding: 0 clamp(20px, 3.2vw, 56px);
  position: relative;
  z-index: 5;
  box-sizing: border-box;
}

.about-services-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: clamp(40px, 6vh, 64px);
}

.about-services-title {
  font-family: var(--font-title, 'Inter', sans-serif);
  font-size: clamp(2.6rem, 4.4vw, 4.4rem);
  font-weight: 900;
  letter-spacing: -0.025em;
  color: #FFFFFF;
  margin: 0 0 16px 0;
  line-height: 1.1;
}

.about-services-subtitle {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: clamp(15px, 1.05vw, 17.5px);
  font-weight: 400;
  line-height: 1.65;
  color: rgba(247, 247, 242, 0.75);
  max-width: 700px;
  margin: 0 auto;
}

.about-services-grid {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: clamp(12px, 1.3vw, 20px);
  width: 100%;
  box-sizing: border-box;
}

.about-service-card {
  flex: 1 1 0;
  min-width: 0;
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.2vw, 32px) clamp(16px, 1.5vw, 22px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%), rgba(10, 10, 14, 0.85);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
  min-height: 270px;
  box-sizing: border-box;
}

.about-service-card:hover {
  transform: translateY(-8px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%), rgba(12, 14, 18, 0.94);
  border-color: rgba(143, 216, 248, 0.45);
  box-shadow: 0 34px 75px rgba(0, 0, 0, 0.9), 0 0 35px rgba(143, 216, 248, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.about-service-card-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  text-align: center;
}

.about-service-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  width: 100%;
}

/* =============================================================================
   ANIMATED HOVER ICONS (LOTTIE ANIMATIONS FROM ASSETS/ANIMATIONS/)
   ============================================================================= */
.about-service-hover-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 2px;
  opacity: 0;
  transform: translateY(-8px) scale(0.85);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
  pointer-events: none;
  filter: drop-shadow(0 0 10px rgba(143, 216, 248, 0.4));
}

.about-service-hover-icon svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.about-service-card:hover .about-service-hover-icon {
  opacity: 1;
  transform: translateY(0) scale(1.06);
  filter: drop-shadow(0 0 18px rgba(143, 216, 248, 0.75));
}

/* Micro Animations for Card SVGs */
@keyframes iconPulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.15); opacity: 1; filter: drop-shadow(0 0 6px rgba(143, 216, 248, 0.8)); }
}

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

@keyframes iconTwinkle {
  0%, 100% { transform: scale(0.9) rotate(0deg); opacity: 0.8; }
  50% { transform: scale(1.1) rotate(15deg); opacity: 1; filter: drop-shadow(0 0 8px #9BE7C4); }
}

@keyframes iconFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes iconCompass {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-15deg); }
  75% { transform: rotate(15deg); }
}

.anim-svg-pulse {
  transform-origin: center;
  animation: iconPulse 2s ease-in-out infinite;
}

.anim-svg-twinkle {
  transform-origin: center;
  animation: iconTwinkle 2.4s ease-in-out infinite;
}

.anim-svg-twinkle-delay {
  transform-origin: center;
  animation: iconTwinkle 2.4s ease-in-out infinite 1.2s;
}

.anim-svg-rotate {
  transform-origin: center;
  animation: iconRotate 12s linear infinite;
}

.anim-svg-compass {
  transform-origin: center;
  animation: iconCompass 3s ease-in-out infinite;
}

.anim-svg-float {
  animation: iconFloat 2.5s ease-in-out infinite;
}

.about-service-title {
  font-family: var(--font-title, 'Inter', sans-serif);
  font-size: clamp(1.2rem, 1.45vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin: 0;
  line-height: 1.2;
}

.about-service-desc {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  color: rgba(247, 247, 242, 0.75);
  margin: 0;
}

.about-service-footer {
  width: 100%;
  margin-top: auto;
}

.about-service-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 11px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FFFFFF;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.about-service-btn:hover {
  background: rgba(143, 216, 248, 0.18);
  border-color: rgba(143, 216, 248, 0.6);
  color: #FFFFFF;
  box-shadow: 0 0 20px rgba(143, 216, 248, 0.3);
  transform: translateY(-2px);
}

.about-service-btn .cta-arrow-svg {
  transition: transform 0.3s ease;
}

.about-service-btn:hover .cta-arrow-svg {
  transform: translate(2px, -2px);
}

@media (max-width: 860px) {
  .about-services-grid {
    flex-direction: column;
    max-width: 480px;
    margin: 0 auto;
  }
}

/* ==========================================================================
   WARREN GRANGE — LUXURY SITE PRELOADER
   ========================================================================== */
.site-preloader {
  position: fixed;
  inset: 0;
  z-index: 99999999;
  background-color: #0A0A0A;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: all;
  user-select: none;
  -webkit-user-select: none;
}

.site-preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.02);
  pointer-events: none;
}

.preloader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px;
  position: relative;
}

.preloader-lottie-wrap {
  width: 140px;
  height: 140px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 28px rgba(143, 216, 248, 0.4)) drop-shadow(0 0 60px rgba(155, 231, 196, 0.2));
  transition: transform 0.3s ease;
}

.preloader-lottie-wrap svg {
  width: 100% !important;
  height: 100% !important;
}

.preloader-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.preloader-brand .brand-title {
  display: block;
  font-family: var(--font-title, 'Neue Haas Grotesk Display Pro', 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #F7F7F2;
  margin-bottom: 5px;
}

.preloader-brand .brand-sub {
  display: block;
  font-family: var(--font-mono, 'Space Mono', 'Inter', monospace);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6B7075;
}

.preloader-bar-wrap {
  width: 180px;
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  margin: 22px auto 12px;
  overflow: hidden;
  position: relative;
}

.preloader-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #8FD8F8 0%, #9BE7C4 100%);
  box-shadow: 0 0 12px rgba(143, 216, 248, 0.75);
  border-radius: 2px;
  transition: width 0.08s ease-out;
}

.preloader-percent {
  font-family: var(--font-mono, 'Space Mono', 'JetBrains Mono', monospace);
  font-size: 11px;
  font-weight: 600;
  color: #8FD8F8;
  letter-spacing: 0.12em;
}