/* ================================================================
   SceneView — M3 Flagship Design Layer
   Premium visual enhancements inspired by m3.material.io
   Layered on top of extra.css, m3-enhancements.css, m3-expressive.css
   ================================================================ */

/* ── 1. Animated Floating Blob Background for Hero ──────────── */
@keyframes blob-float-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(80px, -40px) scale(1.15); }
  50% { transform: translate(-20px, 60px) scale(0.9); }
  75% { transform: translate(-60px, -20px) scale(1.08); }
}

@keyframes blob-float-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(-70px, 50px) scale(1.1); }
  50% { transform: translate(40px, -30px) scale(0.95); }
  75% { transform: translate(60px, 40px) scale(1.12); }
}

@keyframes blob-float-3 {
  0%, 100% { transform: translate(0, 0) scale(1.05); }
  33% { transform: translate(50px, 70px) scale(0.92); }
  66% { transform: translate(-80px, -10px) scale(1.1); }
}

.hero-section::before,
.hero-section::after,
.bottom-cta::before {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
  pointer-events: none;
  will-change: transform;
}

.hero-section::before {
  width: 420px;
  height: 420px;
  background: var(--sv-primary-container);
  top: -10%;
  right: -5%;
  animation: blob-float-1 18s ease-in-out infinite;
}

.hero-section::after {
  width: 350px;
  height: 350px;
  background: var(--sv-tertiary-container, #FFD8E4);
  bottom: -8%;
  left: 5%;
  animation: blob-float-2 22s ease-in-out infinite;
}

.bottom-cta {
  position: relative;
  overflow: hidden;
}

.bottom-cta::before {
  width: 300px;
  height: 300px;
  background: var(--sv-secondary-container, #E8DEF8);
  top: -20%;
  left: 50%;
  animation: blob-float-3 20s ease-in-out infinite;
}

[data-md-color-scheme="slate"] .hero-section::before {
  background: rgba(103, 80, 164, 0.25);
}

[data-md-color-scheme="slate"] .hero-section::after {
  background: rgba(125, 82, 96, 0.2);
}

/* ── 2. Scroll-Triggered Reveal Animations ──────────────────── */
@keyframes flagship-reveal-up {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.grid.cards > ul > li,
.device-section,
.industry-card,
.visual-card,
.platform-card,
.prompt-showcase,
.demo-container {
  animation: flagship-reveal-up 0.7s cubic-bezier(0.05, 0.7, 0.1, 1) both;
  animation-timeline: view();
  animation-range: entry 0% entry 40%;
}

/* ── 3. M3 Expressive Spring Physics Micro-interactions ─────── */
.md-typeset .md-button {
  transition: all 0.35s cubic-bezier(0.35, 1.7, 0.5, 0.97);
}

.md-typeset .md-button:hover {
  transform: translateY(-2px) scale(1.03);
}

.md-typeset .md-button:active {
  transform: translateY(0) scale(0.97);
  transition-duration: 0.12s;
}

.platform-badge {
  transition: all 0.35s cubic-bezier(0.35, 1.7, 0.5, 0.97) !important;
}

.platform-badge:active {
  transform: scale(0.94) !important;
  transition-duration: 0.1s !important;
}

.tech-logo {
  transition: all 0.3s cubic-bezier(0.35, 1.7, 0.5, 0.97) !important;
}

.tech-logo:hover {
  transform: translateY(-3px) scale(1.06) !important;
}

/* ── 4. Display-Level Bold Typography with Fluid Sizing ─────── */
.md-typeset h1 {
  font-size: clamp(2rem, 5vw + 0.5rem, 3.5rem) !important;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.hero-section h1,
.md-typeset .hero-section h1 {
  font-size: clamp(2.2rem, 6vw + 0.5rem, 4rem) !important;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05 !important;
}

.md-typeset h2 {
  font-size: clamp(1.4rem, 3vw + 0.3rem, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.md-typeset h3 {
  font-size: clamp(1.1rem, 2vw + 0.2rem, 1.5rem);
  font-weight: 700;
}

.hero-tagline {
  font-size: clamp(1rem, 2.5vw + 0.2rem, 1.45rem) !important;
}

.bottom-cta h2 {
  font-size: clamp(1.6rem, 4vw + 0.4rem, 2.8rem) !important;
}

.bottom-cta p {
  font-size: clamp(0.95rem, 1.5vw + 0.3rem, 1.2rem);
}

/* ── 5. Tonal Surface Coloring ──────────────────────────────── */
.md-content {
  background: color-mix(in srgb, var(--sv-primary) 2%, var(--sv-surface)) !important;
}

.md-sidebar {
  background: color-mix(in srgb, var(--sv-primary) 1.5%, var(--sv-surface));
}

.md-footer {
  background: color-mix(in srgb, var(--sv-primary) 4%, var(--sv-surface-container)) !important;
}

[data-md-color-scheme="slate"] .md-content {
  background: color-mix(in srgb, var(--sv-primary) 3%, var(--sv-surface)) !important;
}

[data-md-color-scheme="slate"] .md-sidebar {
  background: color-mix(in srgb, var(--sv-primary) 2%, var(--sv-surface));
}

/* ── 6. Interactive M3 State Layers (Ripple Hover Overlays) ─── */
.grid.cards > ul > li,
.platform-card,
.device-section,
.industry-card,
.showcase-item {
  position: relative;
  overflow: hidden;
}

.grid.cards > ul > li::after,
.platform-card::after,
.device-section--clickable::after,
.industry-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(103, 80, 164, 0.08) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  border-radius: inherit;
}

.grid.cards > ul > li:hover::after,
.platform-card:hover::after,
.device-section--clickable:hover::after,
.industry-card:hover::after {
  opacity: 1;
}

[data-md-color-scheme="slate"] .grid.cards > ul > li::after,
[data-md-color-scheme="slate"] .platform-card::after,
[data-md-color-scheme="slate"] .industry-card::after {
  background: radial-gradient(
    circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(167, 139, 250, 0.1) 0%,
    transparent 70%
  );
}

/* ── 7. Gradient Text for Hero Headlines ────────────────────── */
.hero-section h1,
.md-typeset .hero-section h1 {
  background: linear-gradient(
    135deg,
    var(--sv-on-surface) 0%,
    var(--sv-primary) 45%,
    var(--sv-tertiary, #7D5260) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-md-color-scheme="slate"] .hero-section h1,
[data-md-color-scheme="slate"] .md-typeset .hero-section h1 {
  background: linear-gradient(
    135deg,
    #E6E0E9 0%,
    #D0BCFF 40%,
    #EFB8C8 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bottom-cta h2 {
  background: linear-gradient(135deg, var(--sv-on-surface) 0%, var(--sv-primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-md-color-scheme="slate"] .bottom-cta h2 {
  background: linear-gradient(135deg, #E6E0E9 0%, #D0BCFF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── 8. Card Hover Microanimations ──────────────────────────── */
.grid.cards > ul > li {
  transition: transform 0.4s cubic-bezier(0.35, 1.7, 0.5, 0.97),
              box-shadow 0.4s cubic-bezier(0.05, 0.7, 0.1, 1),
              border-color 0.3s ease !important;
}

.grid.cards > ul > li:hover {
  transform: translateY(-6px) scale(1.015) !important;
  box-shadow: 0 8px 32px rgba(103, 80, 164, 0.12),
              0 2px 8px rgba(103, 80, 164, 0.08),
              0 0 0 1px rgba(103, 80, 164, 0.1) !important;
  border-color: color-mix(in srgb, var(--sv-primary) 40%, transparent) !important;
}

[data-md-color-scheme="slate"] .grid.cards > ul > li:hover {
  box-shadow: 0 8px 32px rgba(167, 139, 250, 0.15),
              0 2px 8px rgba(167, 139, 250, 0.1),
              0 0 0 1px rgba(167, 139, 250, 0.15) !important;
}

.industry-card {
  transition: transform 0.4s cubic-bezier(0.35, 1.7, 0.5, 0.97),
              box-shadow 0.4s ease,
              border-color 0.3s ease !important;
}

.industry-card:hover {
  transform: translateY(-6px) scale(1.01) !important;
  box-shadow: 0 12px 40px rgba(103, 80, 164, 0.14),
              0 0 0 1px rgba(103, 80, 164, 0.08) !important;
}

.platform-card {
  transition: transform 0.4s cubic-bezier(0.35, 1.7, 0.5, 0.97),
              box-shadow 0.4s ease,
              border-color 0.3s ease !important;
}

.platform-card:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: 0 8px 28px rgba(103, 80, 164, 0.1),
              0 0 0 1px rgba(103, 80, 164, 0.08) !important;
}

/* ── 9. Glass-Morphism Floating Header ──────────────────────── */
.md-header {
  background: color-mix(in srgb, var(--sv-surface) 78%, transparent) !important;
  backdrop-filter: blur(24px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.8) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--sv-outline) 30%, transparent) !important;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04) !important;
}

[data-md-color-scheme="slate"] .md-header {
  background: color-mix(in srgb, var(--sv-surface) 82%, transparent) !important;
  border-bottom-color: color-mix(in srgb, var(--sv-outline) 20%, transparent) !important;
  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.15) !important;
}

.md-tabs {
  background: transparent !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

/* ── 10. Enhanced Showcase — Snap Scroll Gallery ────────────── */
.showcase-gallery {
  scroll-snap-type: x mandatory !important;
  scroll-padding: 0 24px;
  gap: 1.5rem !important;
  padding: 1.5rem 24px 2rem !important;
  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%
  );
}

.showcase-item {
  scroll-snap-align: center !important;
  flex: 0 0 240px !important;
  transition: transform 0.4s cubic-bezier(0.35, 1.7, 0.5, 0.97) !important;
}

.showcase-item:hover {
  transform: translateY(-8px) scale(1.04) !important;
}

.showcase-item__img {
  transition: box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.05, 0.7, 0.1, 1) !important;
}

.showcase-item:hover .showcase-item__img {
  box-shadow: 0 24px 64px rgba(103, 80, 164, 0.22),
              0 0 0 2px rgba(103, 80, 164, 0.15) !important;
}

/* ── 11. Animated Stat Badges with Pulse ────────────────────── */
@keyframes flagship-stat-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(103, 80, 164, 0.15); }
  50% { box-shadow: 0 0 0 6px rgba(103, 80, 164, 0); }
}

.stat-pill strong {
  display: inline-block;
  animation: flagship-stat-pulse 3s ease-in-out infinite;
  border-radius: var(--sv-shape-full);
  padding: 0 2px;
}

.stat-pill:nth-child(1) strong { animation-delay: 0s; }
.stat-pill:nth-child(2) strong { animation-delay: 0.5s; }
.stat-pill:nth-child(3) strong { animation-delay: 1s; }
.stat-pill:nth-child(4) strong { animation-delay: 1.5s; }

.stat-pill {
  transition: transform 0.35s cubic-bezier(0.35, 1.7, 0.5, 0.97),
              box-shadow 0.3s ease,
              background 0.3s ease !important;
}

.stat-pill:hover {
  transform: translateY(-3px) scale(1.04) !important;
  box-shadow: 0 4px 16px rgba(103, 80, 164, 0.12) !important;
  background: color-mix(in srgb, var(--sv-primary) 6%, var(--sv-surface-container)) !important;
}

/* ── 12. Cross-Fade Page Transitions ────────────────────────── */
@keyframes flagship-page-enter {
  from {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

.md-content__inner {
  animation: flagship-page-enter 0.5s cubic-bezier(0.05, 0.7, 0.1, 1) both !important;
}

@supports (view-transition-name: auto) {
  ::view-transition-old(root) {
    animation: 0.3s ease-out both fade-out;
  }
  ::view-transition-new(root) {
    animation: 0.3s ease-in both fade-in;
  }
  @keyframes fade-out {
    to { opacity: 0; transform: scale(0.98); }
  }
  @keyframes fade-in {
    from { opacity: 0; transform: scale(1.02); }
  }
}

/* ── 13. Rich Dark Mode Tonal Palette ───────────────────────── */
[data-md-color-scheme="slate"] {
  --sv-surface-tint: color-mix(in srgb, var(--sv-primary) 8%, var(--sv-surface));
}

[data-md-color-scheme="slate"] .md-main {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--sv-primary) 4%, var(--sv-surface)) 0%,
    var(--sv-surface) 40%
  );
}

[data-md-color-scheme="slate"] .hero-section {
  border: 1px solid color-mix(in srgb, var(--sv-primary) 12%, transparent);
}

[data-md-color-scheme="slate"] .grid.cards > ul > li {
  background: color-mix(in srgb, var(--sv-primary) 4%, var(--sv-surface-container));
  border-color: color-mix(in srgb, var(--sv-primary) 8%, var(--sv-outline));
}

[data-md-color-scheme="slate"] .device-section {
  background: color-mix(in srgb, var(--sv-primary) 3%, var(--sv-surface-container));
  border-color: color-mix(in srgb, var(--sv-primary) 6%, var(--sv-outline-variant));
}

[data-md-color-scheme="slate"] .bottom-cta {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--sv-primary) 12%, var(--sv-surface)) 0%,
    color-mix(in srgb, var(--sv-tertiary, #7D5260) 10%, var(--sv-surface)) 100%
  );
  border-color: color-mix(in srgb, var(--sv-primary) 15%, transparent);
}

[data-md-color-scheme="slate"] .stat-pill {
  background: color-mix(in srgb, var(--sv-primary) 5%, var(--sv-surface-container));
}

[data-md-color-scheme="slate"] .platform-badge {
  background: color-mix(in srgb, var(--sv-primary) 6%, var(--sv-surface-container));
}

/* ── 15. Better Mobile Experience ───────────────────────────── */
@media screen and (max-width: 76.1875em) {
  .md-nav__link {
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    padding: 8px 16px !important;
  }

  .md-tabs__link {
    min-height: 44px;
    padding: 8px 16px !important;
  }

  .md-tabs {
    position: sticky;
    top: 0;
    z-index: 3;
    background: color-mix(in srgb, var(--sv-surface) 90%, transparent) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
  }

  .hero-section {
    border-radius: 0 0 var(--sv-shape-xl) var(--sv-shape-xl) !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
  }

  .md-typeset .md-button {
    min-height: 48px;
    padding: 0.75rem 2rem !important;
    font-size: 0.95rem;
  }

  .platform-badge {
    min-height: 44px;
    padding: 0.5rem 1.2rem !important;
  }

  .showcase-item {
    flex: 0 0 200px !important;
  }

  .grid.cards > ul > li {
    padding: 1.75rem !important;
  }

  .stat-row {
    gap: 0.6rem;
  }

  .stat-pill {
    flex: 1 1 auto;
    min-width: 120px;
    justify-content: center;
    text-align: center;
  }
}

@media screen and (max-width: 36em) {
  .platform-badges {
    gap: 0.4rem;
  }

  .platform-badge {
    font-size: 0.78rem;
    padding: 0.4rem 0.9rem !important;
    min-height: 40px;
  }

  .showcase-item {
    flex: 0 0 170px !important;
  }

  .bottom-cta {
    padding: 2.5rem 1.25rem !important;
  }
}

/* ── Bonus: Animated Underline for Active Nav Tab ───────────── */
.md-tabs__link--active {
  position: relative;
}

.md-tabs__link--active::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  border-radius: var(--sv-shape-full);
  background: var(--sv-primary);
  animation: flagship-tab-indicator 0.35s cubic-bezier(0.35, 1.7, 0.5, 0.97) both;
}

@keyframes flagship-tab-indicator {
  from { width: 0; opacity: 0; }
  to { width: 24px; opacity: 1; }
}

/* ── Bonus: Smooth Icon Spin on Card Hover ──────────────────── */
.grid.cards > ul > li:hover .twemoji svg {
  transition: transform 0.5s cubic-bezier(0.35, 1.7, 0.5, 0.97);
  transform: rotate(-8deg) scale(1.15);
}

/* ── Reduced Motion — Respect User Preferences ──────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-section::before,
  .hero-section::after,
  .bottom-cta::before {
    animation: none !important;
  }

  .stat-pill strong {
    animation: none !important;
  }

  .grid.cards > ul > li,
  .device-section,
  .industry-card,
  .visual-card,
  .platform-card {
    animation: none !important;
  }

  .md-content__inner {
    animation: none !important;
  }

  .md-typeset .md-button:hover {
    transform: none;
  }

  .grid.cards > ul > li:hover {
    transform: none !important;
  }

  .showcase-item:hover {
    transform: none !important;
  }
}

/* ── Print — Clean Output ───────────────────────────────────── */
@media print {
  .hero-section::before,
  .hero-section::after,
  .bottom-cta::before {
    display: none !important;
  }

  .hero-section h1 {
    -webkit-text-fill-color: var(--sv-on-surface) !important;
    background: none !important;
  }

  .bottom-cta h2 {
    -webkit-text-fill-color: var(--sv-on-surface) !important;
    background: none !important;
  }
}

/* ================================================================
   M3 FLAGSHIP ENHANCEMENTS — March 2026
   Additional premium styles inspired by m3.material.io
   ================================================================ */

/* ── 16. M3-Style Chip Navigation (Tab Links as Filter Chips) ── */
.md-tabs__link {
  border-radius: var(--sv-shape-full) !important;
  background: color-mix(in srgb, var(--sv-on-surface) 5%, transparent);
  border: none !important;
  padding: 6px 20px !important;
  margin: 4px 3px;
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  color: var(--sv-on-surface-variant);
  transition: all 0.25s cubic-bezier(0.2, 0, 0, 1);
  display: inline-flex;
  align-items: center;
}

.md-tabs__link:hover {
  background: color-mix(in srgb, var(--sv-primary) 12%, transparent);
  color: var(--sv-primary);
}

.md-tabs__link--active {
  background: var(--sv-primary-container) !important;
  color: var(--sv-primary) !important;
  font-weight: 600;
}

.md-tabs__link--active::after {
  display: none !important;
}

[data-md-color-scheme="slate"] .md-tabs__link {
  background: color-mix(in srgb, var(--sv-on-surface) 8%, transparent);
}

[data-md-color-scheme="slate"] .md-tabs__link:hover {
  background: color-mix(in srgb, var(--sv-primary) 18%, transparent);
}

[data-md-color-scheme="slate"] .md-tabs__link--active {
  background: color-mix(in srgb, var(--sv-primary) 22%, var(--sv-surface-container)) !important;
  color: var(--sv-primary) !important;
}

/* ── 17. Gradient Text Fallback (Accessibility) ────────────────── */
@supports not (background-clip: text) {
  .hero-section h1,
  .md-typeset .hero-section h1 {
    color: var(--sv-primary) !important;
    -webkit-text-fill-color: initial;
  }
}

/* ── 18. Glass-Morphism Fallback ───────────────────────────────── */
@supports not (backdrop-filter: blur(1px)) {
  .md-header {
    background: var(--sv-surface) !important;
  }
}

/* ── 19. M3 Focus Visible States ───────────────────────────────── */
.md-typeset .md-button:focus-visible {
  outline: 3px solid var(--sv-primary);
  outline-offset: 3px;
  border-radius: var(--sv-shape-full);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--sv-primary) 15%, transparent);
}

.grid.cards > ul > li:focus-visible,
.m3-card:focus-visible,
.md-typeset .grid-card:focus-visible,
.md-typeset .feature-card:focus-visible {
  outline: 3px solid var(--sv-primary);
  outline-offset: 3px;
  border-radius: var(--sv-shape-lg);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--sv-primary) 15%, transparent);
}

.platform-badge:focus-visible,
.m3-badge:focus-visible,
.m3-chip:focus-visible,
.md-typeset .feature-chip:focus-visible {
  outline: 3px solid var(--sv-primary);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--sv-primary) 15%, transparent);
}

.md-tabs__link:focus-visible {
  outline: 3px solid var(--sv-primary);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--sv-primary) 15%, transparent);
}

.stat-pill:focus-visible {
  outline: 3px solid var(--sv-primary);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--sv-primary) 15%, transparent);
}

.industry-card:focus-visible,
.platform-card:focus-visible,
.showcase-item:focus-visible {
  outline: 3px solid var(--sv-primary);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--sv-primary) 15%, transparent);
}

.m3-button-filled:focus-visible,
.m3-button-filled-tonal:focus-visible,
.m3-button-outlined:focus-visible,
.m3-fab:focus-visible {
  outline: 3px solid var(--sv-primary);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--sv-primary) 15%, transparent);
}

/* ── 20. Smooth Gradient Background Animation for Hero ─────────── */
@keyframes flagship-hero-gradient-drift {
  0% {
    background-position: 0% 50%;
    background-size: 200% 200%;
  }
  25% {
    background-position: 100% 25%;
    background-size: 220% 220%;
  }
  50% {
    background-position: 50% 100%;
    background-size: 200% 200%;
  }
  75% {
    background-position: 0% 75%;
    background-size: 210% 210%;
  }
  100% {
    background-position: 0% 50%;
    background-size: 200% 200%;
  }
}

.hero-section {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--sv-primary-container) 60%, var(--sv-surface)) 0%,
    color-mix(in srgb, var(--sv-tertiary-container, #FFD8E4) 40%, var(--sv-surface)) 30%,
    color-mix(in srgb, var(--sv-secondary-container) 50%, var(--sv-surface)) 60%,
    color-mix(in srgb, var(--sv-primary-container) 55%, var(--sv-surface)) 100%
  ) !important;
  background-size: 200% 200%;
  animation: flagship-hero-gradient-drift 16s ease-in-out infinite !important;
}

[data-md-color-scheme="slate"] .hero-section {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--sv-primary) 10%, var(--sv-surface)) 0%,
    color-mix(in srgb, var(--sv-tertiary, #7D5260) 8%, var(--sv-surface)) 35%,
    color-mix(in srgb, var(--sv-secondary) 6%, var(--sv-surface)) 65%,
    color-mix(in srgb, var(--sv-primary) 12%, var(--sv-surface)) 100%
  ) !important;
  background-size: 200% 200%;
  animation: flagship-hero-gradient-drift 16s ease-in-out infinite !important;
}

/* ── 21. Enhanced Hero CTA Buttons ─────────────────────────────── */
.hero-section .md-button--primary,
.hero-section .md-typeset .md-button--primary,
.md-typeset .hero-section .md-button--primary {
  padding: 14px 36px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  border-radius: var(--sv-shape-full) !important;
  background: var(--sv-primary) !important;
  color: var(--sv-on-primary) !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(103, 80, 164, 0.35),
              0 1px 5px rgba(103, 80, 164, 0.2) !important;
  letter-spacing: 0.02em;
  transition: all 0.3s cubic-bezier(0.35, 1.7, 0.5, 0.97) !important;
}

.hero-section .md-button--primary:hover,
.md-typeset .hero-section .md-button--primary:hover {
  transform: translateY(-3px) scale(1.04) !important;
  box-shadow: 0 8px 24px rgba(103, 80, 164, 0.4),
              0 2px 8px rgba(103, 80, 164, 0.25) !important;
}

.hero-section .md-button--primary:active,
.md-typeset .hero-section .md-button--primary:active {
  transform: translateY(0) scale(0.97) !important;
  box-shadow: 0 2px 8px rgba(103, 80, 164, 0.25) !important;
  transition-duration: 0.1s !important;
}

/* Tonal variant for secondary CTA */
.hero-section .md-button:not(.md-button--primary),
.md-typeset .hero-section .md-button:not(.md-button--primary) {
  padding: 14px 36px !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  border-radius: var(--sv-shape-full) !important;
  background: var(--sv-primary-container) !important;
  color: var(--sv-primary) !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(103, 80, 164, 0.12),
              0 1px 3px rgba(103, 80, 164, 0.08) !important;
  letter-spacing: 0.02em;
  transition: all 0.3s cubic-bezier(0.35, 1.7, 0.5, 0.97) !important;
}

.hero-section .md-button:not(.md-button--primary):hover,
.md-typeset .hero-section .md-button:not(.md-button--primary):hover {
  transform: translateY(-3px) scale(1.04) !important;
  box-shadow: 0 6px 20px rgba(103, 80, 164, 0.18),
              0 2px 6px rgba(103, 80, 164, 0.12) !important;
  background: color-mix(in srgb, var(--sv-primary-container) 85%, var(--sv-primary)) !important;
}

.hero-section .md-button:not(.md-button--primary):active,
.md-typeset .hero-section .md-button:not(.md-button--primary):active {
  transform: translateY(0) scale(0.97) !important;
  transition-duration: 0.1s !important;
}

[data-md-color-scheme="slate"] .hero-section .md-button--primary,
[data-md-color-scheme="slate"] .md-typeset .hero-section .md-button--primary {
  background: var(--sv-primary) !important;
  color: #1C1B1F !important;
  box-shadow: 0 4px 14px rgba(167, 139, 250, 0.35),
              0 1px 5px rgba(167, 139, 250, 0.2) !important;
}

[data-md-color-scheme="slate"] .hero-section .md-button--primary:hover,
[data-md-color-scheme="slate"] .md-typeset .hero-section .md-button--primary:hover {
  box-shadow: 0 8px 24px rgba(167, 139, 250, 0.45),
              0 2px 8px rgba(167, 139, 250, 0.25) !important;
}

[data-md-color-scheme="slate"] .hero-section .md-button:not(.md-button--primary),
[data-md-color-scheme="slate"] .md-typeset .hero-section .md-button:not(.md-button--primary) {
  background: color-mix(in srgb, var(--sv-primary) 18%, var(--sv-surface-container)) !important;
  color: var(--sv-primary) !important;
  box-shadow: 0 2px 8px rgba(167, 139, 250, 0.15) !important;
}

/* ── 22. Subtle Animated Dot Pattern Background ────────────────── */
@keyframes flagship-dot-drift {
  0% { background-position: 0px 0px; }
  100% { background-position: 40px 40px; }
}

.md-content::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(
    circle,
    color-mix(in srgb, var(--sv-primary) 6%, transparent) 1px,
    transparent 1px
  );
  background-size: 40px 40px;
  animation: flagship-dot-drift 60s linear infinite;
  opacity: 0.45;
}

.md-content > * {
  position: relative;
  z-index: 1;
}

[data-md-color-scheme="slate"] .md-content::before {
  background-image: radial-gradient(
    circle,
    color-mix(in srgb, var(--sv-primary) 8%, transparent) 1px,
    transparent 1px
  );
  opacity: 0.35;
}

/* Prevent dot pattern on hero (it has its own background) */
.hero-section {
  z-index: 2;
  position: relative;
}

/* ── Reduced Motion Overrides for New Enhancements ─────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-section {
    animation: none !important;
  }

  .md-content::before {
    animation: none !important;
  }

  .hero-section .md-button--primary:hover,
  .md-typeset .hero-section .md-button--primary:hover,
  .hero-section .md-button:not(.md-button--primary):hover,
  .md-typeset .hero-section .md-button:not(.md-button--primary):hover {
    transform: none !important;
  }
}

/* ── Print Overrides for New Enhancements ──────────────────────── */
@media print {
  .md-content::before {
    display: none !important;
  }

  .hero-section .md-button--primary,
  .hero-section .md-button:not(.md-button--primary) {
    box-shadow: none !important;
  }
}