/* MetaSalon public luxe visual layer. */

/*
 * MetaSalon Luxe Glass Theme
 * Visual-only layer shared by the public website, customer panel, and admin panel.
 * Business markup, routes, validation, authorization, and financial behavior stay unchanged.
 */


body {
  background:
    radial-gradient(circle at 7% 4%, color-mix(in srgb, var(--ms-color-coral-500) 10%, transparent), transparent 25rem),
    radial-gradient(circle at 92% 7%, color-mix(in srgb, var(--ms-color-violet-500) 12%, transparent), transparent 30rem),
    var(--ms-surface-soft);
}

::selection {
  color: var(--ms-color-white);
  background: var(--ms-primary);
}

/* --------------------------------------------------------------------------
   Public glass navigation
   -------------------------------------------------------------------------- */

.site-header {
  inset-block-start: 0;
  padding: 0.8rem clamp(0.65rem, 2vw, 1.5rem) 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.site-header::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--ms-surface-soft) 88%, transparent), transparent);
  content: "";
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--ms-duration-fast) var(--ms-ease-standard);
}

.site-header.is-scrolled::before {
  opacity: 1;
}

.site-navigation__inner {
  min-height: 4.65rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--ms-glass-border);
  border-radius: var(--ms-radius-2xl);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--ms-color-white) 12%, transparent), transparent 54%),
    var(--ms-glass-surface);
  box-shadow:
    0 18px 55px color-mix(in srgb, var(--ms-color-ink-950) 9%, transparent),
    inset 0 1px color-mix(in srgb, var(--ms-color-white) 70%, transparent);
  backdrop-filter: blur(22px) saturate(155%);
  -webkit-backdrop-filter: blur(22px) saturate(155%);
}

html[data-theme="dark"] .site-navigation__inner {
  box-shadow: 0 22px 70px color-mix(in srgb, var(--ms-color-black) 32%, transparent), inset 0 1px color-mix(in srgb, var(--ms-color-white) 8%, transparent);
}

.site-brand {
  padding-inline: 0.35rem;
  gap: 0.7rem;
}

.site-brand__mark {
  width: 3rem;
  height: 3rem;
  border-color: color-mix(in srgb, var(--ms-color-white) 35%, transparent);
  border-radius: var(--ms-radius-lg);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--ms-color-white) 20%, transparent), transparent 54%),
    var(--ms-gradient-brand);
  box-shadow:
    0 14px 34px color-mix(in srgb, var(--ms-color-fuchsia-500) 28%, transparent),
    inset 0 1px color-mix(in srgb, var(--ms-color-white) 34%, transparent);
  transition: transform var(--ms-duration-normal) var(--ms-ease-standard), box-shadow var(--ms-duration-normal) var(--ms-ease-standard);
}

.site-brand:hover .site-brand__mark {
  box-shadow: 0 18px 42px color-mix(in srgb, var(--ms-color-violet-500) 35%, transparent), inset 0 1px color-mix(in srgb, var(--ms-color-white) 34%, transparent);
  transform: rotate(5deg) scale(1.04);
}

.site-brand__mark::after {
  display: none;
}

.site-brand strong {
  font-size: 1.08rem;
}

.site-brand small {
  color: color-mix(in srgb, var(--ms-ink-muted) 86%, transparent);
}

.site-navigation__links {
  padding: 0.3rem;
  border: 1px solid color-mix(in srgb, var(--ms-border) 75%, transparent);
  border-radius: var(--ms-radius-lg);
  background: color-mix(in srgb, var(--ms-surface) 54%, transparent);
  gap: 0.1rem;
}

.site-navigation__link {
  min-height: 2.5rem;
  padding-inline: 0.82rem;
  border-radius: var(--ms-radius-sm);
  font-weight: 700;
}

.site-navigation__link::after {
  display: none;
}

.site-navigation__link:hover,
.site-navigation__link.is-active {
  color: var(--ms-secondary-strong);
  background: linear-gradient(135deg, color-mix(in srgb, var(--ms-color-coral-500) 10%, transparent), color-mix(in srgb, var(--ms-color-fuchsia-500) 10%, transparent), color-mix(in srgb, var(--ms-color-violet-500) 12%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ms-color-violet-500) 10%, transparent);
}

.theme-toggle,
.site-navigation__toggle,
.site-account-link {
  border-color: color-mix(in srgb, var(--ms-border) 78%, transparent);
  background: color-mix(in srgb, var(--ms-surface) 68%, transparent);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--ms-color-ink-950) 6%, transparent), inset 0 1px color-mix(in srgb, var(--ms-color-white) 65%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.site-account-link--primary {
  border-color: transparent;
  color: var(--ms-color-white);
  background: var(--ms-gradient-brand);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--ms-color-fuchsia-500) 24%, transparent);
}

.site-account-link--primary:hover {
  color: var(--ms-color-white);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--ms-color-violet-500) 30%, transparent);
  transform: translateY(-2px) scale(1.02);
}

/* --------------------------------------------------------------------------
   Public landing page: vibrant luxury palette and depth
   -------------------------------------------------------------------------- */

.landing-hero {
  min-height: calc(100svh - 1rem);
  padding-block: clamp(5.5rem, 10vw, 9rem) clamp(5rem, 8vw, 7.5rem);
  background:
    radial-gradient(circle at 12% 16%, color-mix(in srgb, var(--ms-color-coral-500) 20%, transparent), transparent 26rem),
    radial-gradient(circle at 86% 18%, color-mix(in srgb, var(--ms-color-fuchsia-500) 16%, transparent), transparent 27rem),
    radial-gradient(circle at 68% 84%, color-mix(in srgb, var(--ms-color-violet-500) 16%, transparent), transparent 28rem),
    linear-gradient(180deg, color-mix(in srgb, var(--ms-surface) 88%, transparent), var(--ms-surface-soft));
}

.landing-hero::before {
  background-image:
    linear-gradient(color-mix(in srgb, var(--ms-color-violet-500) 6.5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ms-color-violet-500) 6.5%, transparent) 1px, transparent 1px);
  background-size: 2.7rem 2.7rem;
  opacity: 0.7;
}

.landing-hero__ambient span:nth-child(1) {
  border-color: color-mix(in srgb, var(--ms-color-coral-500) 22%, transparent);
  box-shadow: inset 0 0 5rem color-mix(in srgb, var(--ms-color-coral-500) 8%, transparent), 0 0 5rem color-mix(in srgb, var(--ms-color-coral-500) 8%, transparent);
}

.landing-hero__ambient span:nth-child(2) {
  background: color-mix(in srgb, var(--ms-color-violet-500) 12%, transparent);
  box-shadow: 0 0 4rem color-mix(in srgb, var(--ms-color-violet-500) 14%, transparent);
}

.landing-hero__ambient span:nth-child(3) {
  background: var(--ms-primary);
  box-shadow: 0 0 2.2rem color-mix(in srgb, var(--ms-color-fuchsia-500) 72%, transparent);
}

.landing-kicker {
  border-color: color-mix(in srgb, var(--ms-color-fuchsia-500) 20%, transparent);
  color: var(--ms-primary);
  background: color-mix(in srgb, var(--ms-color-white) 58%, transparent);
  box-shadow: 0 10px 32px color-mix(in srgb, var(--ms-color-ink-950) 6%, transparent), inset 0 1px color-mix(in srgb, var(--ms-color-white) 85%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

html[data-theme="dark"] .landing-kicker {
  background: color-mix(in srgb, var(--ms-color-white) 7%, transparent);
}

.landing-kicker__dot {
  background: var(--ms-primary);
  box-shadow: 0 0 0 0.3rem color-mix(in srgb, var(--ms-color-fuchsia-500) 14%, transparent), 0 0 1.4rem color-mix(in srgb, var(--ms-color-fuchsia-500) 50%, transparent);
}

.landing-hero h1 {
  max-width: 14ch;
  font-size: clamp(2.7rem, 5.7vw, 5.65rem);
  line-height: 1.16;
  letter-spacing: -0.06em;
}

.landing-hero h1 span {
  background: var(--ms-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
}

.landing-hero__lead {
  color: color-mix(in srgb, var(--ms-ink-muted) 94%, transparent);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
}

.landing-button {
  min-height: 3.35rem;
  padding-inline: 1.35rem;
  border-radius: var(--ms-radius-pill);
}

.landing-button--primary {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--ms-color-white) 14%, transparent), transparent 54%),
    var(--ms-gradient-brand);
  box-shadow: 0 18px 42px color-mix(in srgb, var(--ms-color-fuchsia-500) 25%, transparent), inset 0 1px color-mix(in srgb, var(--ms-color-white) 32%, transparent);
}

.landing-button--primary:hover {
  box-shadow: 0 24px 58px color-mix(in srgb, var(--ms-color-violet-500) 34%, transparent), inset 0 1px color-mix(in srgb, var(--ms-color-white) 32%, transparent);
  transform: translateY(-3px) scale(1.025);
}

.landing-button--secondary {
  border-color: color-mix(in srgb, var(--ms-color-violet-500) 16%, transparent);
  background: color-mix(in srgb, var(--ms-color-white) 58%, transparent);
  box-shadow: 0 12px 34px color-mix(in srgb, var(--ms-color-ink-950) 7%, transparent), inset 0 1px color-mix(in srgb, var(--ms-color-white) 78%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.product-stage__glow {
  inset: 6% 0 3%;
  background:
    radial-gradient(circle at 62% 36%, color-mix(in srgb, var(--ms-color-fuchsia-500) 38%, transparent), transparent 45%),
    radial-gradient(circle at 35% 72%, color-mix(in srgb, var(--ms-color-violet-500) 30%, transparent), transparent 48%),
    radial-gradient(circle at 20% 25%, color-mix(in srgb, var(--ms-color-coral-500) 20%, transparent), transparent 35%);
  filter: blur(3rem);
}

.product-window {
  border-color: color-mix(in srgb, var(--ms-color-white) 65%, transparent);
  border-radius: var(--ms-radius-3xl);
  background: color-mix(in srgb, var(--ms-color-white) 70%, transparent);
  box-shadow:
    0 38px 110px color-mix(in srgb, var(--ms-color-violet-500) 24%, transparent),
    0 0 0 0.65rem color-mix(in srgb, var(--ms-color-white) 45%, transparent),
    inset 0 1px color-mix(in srgb, var(--ms-color-white) 86%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transform: rotateY(-2deg) rotateX(1deg);
}

html[data-theme="dark"] .product-window {
  border-color: color-mix(in srgb, var(--ms-color-white) 12%, transparent);
  background: color-mix(in srgb, var(--ms-color-ink-950) 88%, transparent);
  box-shadow: 0 40px 120px color-mix(in srgb, var(--ms-color-black) 40%, transparent), 0 0 0 0.55rem color-mix(in srgb, var(--ms-color-white) 4%, transparent);
}

.product-window__chrome {
  border-bottom-color: color-mix(in srgb, var(--ms-color-violet-500) 11%, transparent);
  background: color-mix(in srgb, var(--ms-color-white) 58%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

html[data-theme="dark"] .product-window__chrome {
  background: color-mix(in srgb, var(--ms-color-white) 4.5%, transparent);
}

.product-window__logo,
.product-metric__icon--rose {
  background: var(--ms-gradient-brand);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--ms-color-fuchsia-500) 24%, transparent);
}

.product-sidebar {
  background:
    radial-gradient(circle at 30% 5%, color-mix(in srgb, var(--ms-color-coral-500) 18%, transparent), transparent 12rem),
    radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--ms-color-violet-500) 20%, transparent), transparent 15rem),
    var(--ms-ink-strong);
}

.product-dashboard,
.product-chart-card,
.product-activity-card,
.product-metrics > *,
.product-float {
  border-color: color-mix(in srgb, var(--ms-color-violet-500) 12%, transparent);
  background: color-mix(in srgb, var(--ms-color-white) 72%, transparent);
  box-shadow: 0 18px 50px color-mix(in srgb, var(--ms-color-ink-950) 8%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

html[data-theme="dark"] :is(.product-dashboard, .product-chart-card, .product-activity-card, .product-metrics > *, .product-float) {
  border-color: color-mix(in srgb, var(--ms-color-white) 9%, transparent);
  background: color-mix(in srgb, var(--ms-color-white) 5.5%, transparent);
}

.product-chart__line {
  stroke: var(--ms-primary);
}

.product-chart__area {
  fill: url(#product-chart-gradient);
}

.product-chart__point {
  border-color: var(--ms-color-white);
  background: var(--ms-primary);
  box-shadow: 0 0 0 0.3rem color-mix(in srgb, var(--ms-color-fuchsia-500) 12%, transparent), 0 0 1.2rem color-mix(in srgb, var(--ms-color-fuchsia-500) 35%, transparent);
}

.product-float {
  border-color: color-mix(in srgb, var(--ms-color-white) 70%, transparent);
  box-shadow: 0 24px 65px color-mix(in srgb, var(--ms-color-ink-950) 15%, transparent);
}

.landing-proof__inner,
.landing-problem-card,
.landing-feature,
.commission-visual,
.landing-security__visual,
.faq-list details {
  border-color: color-mix(in srgb, var(--ms-color-violet-500) 11%, transparent);
  background: color-mix(in srgb, var(--ms-surface) 86%, transparent);
  box-shadow: 0 20px 56px color-mix(in srgb, var(--ms-color-ink-950) 7%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.landing-feature,
.landing-problem-card {
  transition: transform var(--ms-duration-normal) var(--ms-ease-standard), border-color var(--ms-duration-normal) var(--ms-ease-standard), box-shadow var(--ms-duration-normal) var(--ms-ease-standard);
}

.landing-feature:hover,
.landing-problem-card:hover {
  border-color: color-mix(in srgb, var(--ms-color-fuchsia-500) 24%, transparent);
  box-shadow: 0 28px 74px color-mix(in srgb, var(--ms-color-violet-500) 12%, transparent);
  transform: translateY(-5px);
}

.landing-feature__icon,
.landing-card__icon {
  background: var(--ms-gradient-brand-soft);
  color: var(--ms-primary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ms-color-fuchsia-500) 8%, transparent);
}

.landing-eyebrow,
.landing-feature__tag,
.landing-card__number {
  color: var(--ms-primary);
}

.landing-eyebrow::before {
  background: var(--ms-gradient-brand);
}

.landing-commission,
.landing-security {
  background:
    radial-gradient(circle at 12% 16%, color-mix(in srgb, var(--ms-color-coral-500) 21%, transparent), transparent 26rem),
    radial-gradient(circle at 88% 74%, color-mix(in srgb, var(--ms-color-violet-500) 30%, transparent), transparent 30rem),
    var(--ms-ink-strong);
}

.landing-final-cta__inner {
  background: var(--ms-gradient-brand);
  box-shadow: 0 34px 100px color-mix(in srgb, var(--ms-color-violet-500) 28%, transparent);
}

.landing-button--light {
  color: var(--ms-primary);
  border-radius: var(--ms-radius-pill);
}

/* --------------------------------------------------------------------------
   Luxe visual treatment for public product-education pages
   -------------------------------------------------------------------------- */

.marketing-hero {
  background:
    linear-gradient(var(--ms-brand-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--ms-brand-line) 1px, transparent 1px),
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--ms-color-coral-500) 12%, transparent), transparent 27rem),
    radial-gradient(circle at 88% 14%, color-mix(in srgb, var(--ms-color-violet-500) 15%, transparent), transparent 32rem),
    var(--ms-surface-soft);
  background-size: 42px 42px, 42px 42px, auto, auto, auto;
}

.marketing-hero::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, transparent 55%, var(--ms-surface-soft));
  content: "";
  pointer-events: none;
}

.marketing-ambient span:nth-child(1) {
  background: color-mix(in srgb, var(--ms-color-coral-400) 26%, transparent);
}

.marketing-ambient span:nth-child(2) {
  background: color-mix(in srgb, var(--ms-color-fuchsia-400) 18%, transparent);
}

.marketing-ambient span:nth-child(3) {
  background: color-mix(in srgb, var(--ms-color-violet-400) 20%, transparent);
}

.marketing-badge {
  color: var(--ms-primary);
  border-color: color-mix(in srgb, var(--ms-primary) 24%, var(--ms-border));
  background: var(--ms-glass-surface);
  box-shadow: var(--ms-shadow-xs);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.marketing-badge > span {
  background: var(--ms-primary);
}

.marketing-badge > span::after {
  background: color-mix(in srgb, var(--ms-primary) 22%, transparent);
  animation: marketing-pulse 2.6s var(--ms-ease-standard) infinite;
}

.marketing-hero h1 em {
  color: transparent;
  background: var(--ms-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
}

.marketing-button--primary {
  color: var(--ms-color-white);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--ms-color-white) 14%, transparent), transparent 55%),
    var(--ms-gradient-brand);
  box-shadow: var(--ms-shadow-lg);
}

.marketing-button--primary:hover {
  color: var(--ms-color-white);
  box-shadow: 0 1.6rem 4rem color-mix(in srgb, var(--ms-secondary) 30%, transparent);
}

.marketing-button--secondary {
  color: var(--ms-ink-strong);
  border-color: color-mix(in srgb, var(--ms-secondary) 22%, var(--ms-border));
  background: var(--ms-glass-surface-strong);
  box-shadow: var(--ms-shadow-xs);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.marketing-button--secondary:hover {
  color: var(--ms-primary-strong);
  border-color: color-mix(in srgb, var(--ms-primary) 38%, var(--ms-border));
  background: var(--ms-primary-soft);
}

.marketing-button--light {
  color: var(--ms-primary-strong);
  background: var(--ms-color-white);
  box-shadow: var(--ms-shadow-md);
}

.marketing-button--light:hover {
  color: var(--ms-primary);
  background: var(--ms-color-violet-50);
}

.marketing-button--ghost {
  color: var(--ms-color-white);
  border-color: color-mix(in srgb, var(--ms-color-white) 36%, transparent);
  background: color-mix(in srgb, var(--ms-color-white) 10%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.marketing-button--ghost:hover {
  color: var(--ms-color-white);
  border-color: color-mix(in srgb, var(--ms-color-white) 60%, transparent);
  background: color-mix(in srgb, var(--ms-color-white) 17%, transparent);
}

.marketing-checks span {
  color: var(--ms-success);
  background: var(--ms-color-success-100);
}

.feature-command__glow {
  background: var(--ms-gradient-brand);
  opacity: 0.22;
}

.feature-command__window,
.pricing-trust-card,
.demo-brief {
  border-color: var(--ms-glass-border);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--ms-color-white) 10%, transparent), transparent 55%),
    var(--ms-glass-surface-strong);
  box-shadow: var(--ms-shadow-lg);
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
}

.feature-command__window > header,
.demo-brief > header,
.pricing-trust-card > header {
  border-color: color-mix(in srgb, var(--ms-secondary) 12%, var(--ms-border));
  background: color-mix(in srgb, var(--ms-surface) 72%, transparent);
}

.feature-command__logo,
.demo-brief__icon,
.pricing-trust-card > header > span {
  color: var(--ms-color-white);
  background: var(--ms-gradient-brand);
  box-shadow: 0 0.9rem 2.3rem color-mix(in srgb, var(--ms-primary) 28%, transparent);
}

.feature-command__status {
  border-color: color-mix(in srgb, var(--ms-success) 28%, var(--ms-border));
  background: color-mix(in srgb, var(--ms-color-success-100) 65%, transparent);
}

.feature-command__status i {
  background: var(--ms-success);
  box-shadow: 0 0 0 0.3rem color-mix(in srgb, var(--ms-success) 14%, transparent);
}

.feature-command__content {
  background:
    linear-gradient(var(--ms-brand-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--ms-brand-line) 1px, transparent 1px),
    color-mix(in srgb, var(--ms-surface) 82%, transparent);
  background-size: 30px 30px, 30px 30px, auto;
}

.feature-command__content > aside {
  border-color: color-mix(in srgb, var(--ms-secondary) 13%, var(--ms-border));
  background: color-mix(in srgb, var(--ms-surface) 60%, transparent);
}

.feature-command__content > aside span {
  background: color-mix(in srgb, var(--ms-secondary) 9%, var(--ms-surface));
}

.feature-command__content > aside span.is-active {
  background: var(--ms-gradient-brand);
  box-shadow: 0 0.8rem 1.8rem color-mix(in srgb, var(--ms-primary) 24%, transparent);
}

.feature-command__metrics article,
.feature-command__flow,
.feature-command__notice {
  border-color: color-mix(in srgb, var(--ms-secondary) 13%, var(--ms-border));
  background: color-mix(in srgb, var(--ms-surface) 76%, transparent);
  box-shadow: var(--ms-shadow-xs);
}

.feature-command__metrics article:nth-child(2) {
  background: color-mix(in srgb, var(--ms-primary-soft) 50%, var(--ms-surface));
}

.feature-command__metrics article:nth-child(3) {
  background: color-mix(in srgb, var(--ms-color-success-50) 70%, var(--ms-surface));
}

.feature-command__flow span {
  background: color-mix(in srgb, var(--ms-secondary) 7%, var(--ms-surface));
}

.feature-command__flow span:not(:last-child)::after {
  background: color-mix(in srgb, var(--ms-secondary) 28%, transparent);
}

.feature-command__flow i {
  background: var(--ms-gradient-brand);
  box-shadow: 0 0 0 0.28rem color-mix(in srgb, var(--ms-primary) 10%, transparent);
}

.feature-command__notice {
  color: var(--ms-success);
  border-color: color-mix(in srgb, var(--ms-success) 22%, var(--ms-border));
  background: color-mix(in srgb, var(--ms-color-success-50) 70%, var(--ms-surface));
}

.marketing-proof__inner,
.feature-card,
.marketing-steps li,
.marketing-state,
.pricing-card,
.pricing-help,
.demo-preparation article,
.marketing-faq details {
  border-color: color-mix(in srgb, var(--ms-secondary) 11%, var(--ms-border));
  background: color-mix(in srgb, var(--ms-surface) 86%, transparent);
  box-shadow: var(--ms-shadow-sm);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.marketing-proof__inner {
  box-shadow: var(--ms-shadow-md);
}

.marketing-proof span {
  border-color: color-mix(in srgb, var(--ms-secondary) 13%, var(--ms-border));
  background: color-mix(in srgb, var(--ms-secondary) 5%, var(--ms-surface));
}

.marketing-eyebrow::before {
  background: var(--ms-gradient-brand);
}

.marketing-eyebrow--light::before {
  background: color-mix(in srgb, var(--ms-color-white) 70%, transparent);
}

.feature-card:hover,
.pricing-card:hover,
.demo-preparation article:hover {
  border-color: color-mix(in srgb, var(--ms-primary) 30%, var(--ms-border));
  box-shadow: 0 1.8rem 4.5rem color-mix(in srgb, var(--ms-secondary) 14%, transparent);
}

.feature-card__icon,
.marketing-steps li > span,
.demo-preparation article > span,
.pricing-card__device > span,
.marketing-state > span {
  color: var(--ms-primary);
  background: var(--ms-gradient-brand-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ms-primary) 10%, transparent);
}

.feature-card li::before {
  background: var(--ms-gradient-brand);
}

.feature-spotlight,
.pricing-rules,
.demo-path {
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--ms-color-coral-500) 20%, transparent), transparent 28rem),
    radial-gradient(circle at 88% 76%, color-mix(in srgb, var(--ms-color-violet-500) 30%, transparent), transparent 34rem),
    var(--ms-color-ink-950);
}

.feature-spotlight::before,
.pricing-rules::before,
.demo-path::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(color-mix(in srgb, var(--ms-color-white) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ms-color-white) 4%, transparent) 1px, transparent 1px);
  background-size: 34px 34px;
  content: "";
  pointer-events: none;
}

.feature-spotlight__grid,
.pricing-rules__grid,
.demo-path__grid {
  position: relative;
}

.spotlight-note,
.calculation-card,
.pricing-rules__grid > ul,
.demo-path__grid > ol {
  background: color-mix(in srgb, var(--ms-color-white) 7%, transparent);
  box-shadow: 0 1.8rem 4.8rem color-mix(in srgb, var(--ms-color-black) 22%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.spotlight-list span,
.calculation-card li > span,
.pricing-rules li > span,
.demo-path li > span {
  background: color-mix(in srgb, var(--ms-color-white) 10%, transparent);
}

.calculation-card li {
  background: color-mix(in srgb, var(--ms-color-white) 5%, transparent);
}

.calculation-card li.is-result {
  border-color: color-mix(in srgb, var(--ms-success) 34%, transparent);
  background: color-mix(in srgb, var(--ms-success) 10%, transparent);
}

.calculation-card li.is-result > span {
  color: var(--ms-color-success-200);
  background: color-mix(in srgb, var(--ms-success) 15%, transparent);
}

.marketing-cta__inner {
  background:
    radial-gradient(circle at 14% 20%, color-mix(in srgb, var(--ms-color-white) 16%, transparent), transparent 19rem),
    radial-gradient(circle at 88% 80%, color-mix(in srgb, var(--ms-color-violet-900) 34%, transparent), transparent 25rem),
    var(--ms-gradient-brand);
  box-shadow: 0 2.2rem 6.5rem color-mix(in srgb, var(--ms-secondary) 28%, transparent);
}

.marketing-cta__inner::after {
  position: absolute;
  inset-block-end: -7rem;
  inset-inline-end: -5rem;
  width: 18rem;
  height: 18rem;
  border: 2.8rem solid color-mix(in srgb, var(--ms-color-white) 9%, transparent);
  border-radius: var(--ms-radius-round);
  content: "";
  pointer-events: none;
}

.pricing-trust-card li,
.demo-brief li,
.demo-brief > footer {
  border-color: color-mix(in srgb, var(--ms-secondary) 12%, var(--ms-border));
  background: color-mix(in srgb, var(--ms-secondary) 5%, var(--ms-surface));
}

.pricing-trust-card li > span,
.demo-brief li > span {
  color: var(--ms-primary);
  background: var(--ms-primary-soft);
}

.demo-brief > footer {
  border-color: color-mix(in srgb, var(--ms-success) 20%, var(--ms-border));
  background: color-mix(in srgb, var(--ms-color-success-50) 70%, var(--ms-surface));
}

.demo-brief > footer > span {
  color: var(--ms-success);
  background: var(--ms-color-success-100);
}

.marketing-state--error {
  border-color: color-mix(in srgb, var(--ms-danger) 25%, var(--ms-border));
  background: color-mix(in srgb, var(--ms-color-danger-100) 50%, var(--ms-surface));
}

.marketing-state--error > span {
  color: var(--ms-danger);
  background: var(--ms-color-danger-100);
}

.pricing-card--featured {
  border-color: color-mix(in srgb, var(--ms-primary) 38%, var(--ms-border));
  background:
    linear-gradient(155deg, color-mix(in srgb, var(--ms-primary-soft) 60%, transparent), transparent 44%),
    color-mix(in srgb, var(--ms-surface) 90%, transparent);
  box-shadow: var(--ms-shadow-lg);
}

.pricing-card__badge {
  color: var(--ms-color-white);
  background: var(--ms-gradient-brand);
  box-shadow: var(--ms-shadow-sm);
}

.pricing-card__code {
  background: var(--ms-primary-soft);
}

.pricing-card__device,
.pricing-card__prices li {
  border-color: color-mix(in srgb, var(--ms-secondary) 12%, var(--ms-border));
  background: color-mix(in srgb, var(--ms-secondary) 4%, var(--ms-surface));
}

.pricing-card__restriction {
  color: var(--ms-warning);
}

.pricing-help {
  background:
    radial-gradient(circle at 92% 20%, color-mix(in srgb, var(--ms-primary) 12%, transparent), transparent 18rem),
    color-mix(in srgb, var(--ms-surface) 88%, transparent);
}

.demo-security-note {
  border-color: var(--ms-primary);
}

.marketing-faq details[open] {
  border-color: color-mix(in srgb, var(--ms-primary) 30%, var(--ms-border));
  box-shadow: var(--ms-shadow-md);
}

.marketing-faq summary {
  background: color-mix(in srgb, var(--ms-surface) 80%, transparent);
}

html[data-theme="dark"] .marketing-hero {
  background:
    linear-gradient(var(--ms-brand-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--ms-brand-line) 1px, transparent 1px),
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--ms-color-coral-500) 15%, transparent), transparent 27rem),
    radial-gradient(circle at 88% 14%, color-mix(in srgb, var(--ms-color-violet-500) 20%, transparent), transparent 32rem),
    var(--ms-surface-soft);
  background-size: 42px 42px, 42px 42px, auto, auto, auto;
}

html[data-theme="dark"] .marketing-checks span,
html[data-theme="dark"] .demo-brief > footer > span {
  background: color-mix(in srgb, var(--ms-success) 18%, transparent);
}

html[data-theme="dark"] .feature-command__content,
html[data-theme="dark"] .feature-command__metrics article,
html[data-theme="dark"] .feature-command__flow,
html[data-theme="dark"] .feature-command__notice,
html[data-theme="dark"] .pricing-trust-card li,
html[data-theme="dark"] .demo-brief li,
html[data-theme="dark"] .demo-brief > footer,
html[data-theme="dark"] .pricing-card__device,
html[data-theme="dark"] .pricing-card__prices li {
  background: color-mix(in srgb, var(--ms-surface-elevated) 82%, transparent);
}

@keyframes marketing-pulse {
  0%,
  100% {
    opacity: 0.4;
    transform: scale(0.8);
  }

  50% {
    opacity: 0;
    transform: scale(1.8);
  }
}