:root {
  --noovi-ds-version: "premium-v1-2026-05-28";
  --noovi-space-1: 6px;
  --noovi-space-2: 10px;
  --noovi-space-3: 14px;
  --noovi-space-4: 18px;
  --noovi-space-5: 24px;
  --noovi-space-6: 32px;
  --noovi-space-7: 48px;
  --noovi-space-8: 72px;
  --noovi-section-y: clamp(64px, 8vw, 112px);
  --noovi-section-y-tight: clamp(42px, 6vw, 76px);
  --noovi-layout-max: 1180px;
  --noovi-content-max: 720px;
  --noovi-font-body: var(--font-sans, var(--font-body, "Segoe UI", system-ui, sans-serif));
  --noovi-font-display: var(--font-display, var(--font-heading, "Segoe UI", system-ui, sans-serif));
  --noovi-text-hero: clamp(2.65rem, 7vw, 5.9rem);
  --noovi-text-section: clamp(2rem, 4.5vw, 4rem);
  --noovi-text-card: clamp(1.15rem, 2vw, 1.45rem);
  --noovi-text-body: 1rem;
  --noovi-line-tight: 1.05;
  --noovi-line-body: 1.6;
  --noovi-radius-card: 8px;
  --noovi-radius-media: 8px;
  --noovi-border-soft: 1px solid var(--premium-line, var(--card-border, rgba(255, 255, 255, 0.14)));
  --noovi-border-warm: 1px solid rgba(214, 175, 98, 0.26);
  --noovi-shadow-card: 0 18px 48px rgba(5, 8, 14, 0.18);
  --noovi-shadow-panel: 0 30px 90px rgba(5, 8, 14, 0.28);
  --noovi-shadow-soft: 0 14px 34px rgba(31, 24, 16, 0.1);
  --noovi-surface: var(--card-bg, rgba(255, 255, 255, 0.78));
  --noovi-surface-strong: var(--surface, rgba(255, 255, 255, 0.92));
  --noovi-surface-dark: var(--premium-panel, rgba(10, 16, 24, 0.82));
  --noovi-warm: #c9a84c;
  --noovi-ink: var(--text, #171717);
  --noovi-muted: var(--muted, rgba(255, 255, 255, 0.72));
  --noovi-motion-fast: 160ms;
  --noovi-motion-med: 260ms;
  --noovi-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.noovi-premium-product-page,
.noovi-premium-template-page {
  font-family: var(--noovi-font-body);
  text-rendering: optimizeLegibility;
}

.noovi-ds-section,
.noovi-premium-product-page .section,
.noovi-premium-template-page .section {
  padding-top: var(--noovi-section-y);
  padding-bottom: var(--noovi-section-y);
}

.noovi-ds-section-tight {
  padding-top: var(--noovi-section-y-tight);
  padding-bottom: var(--noovi-section-y-tight);
}

.noovi-ds-hero {
  min-height: min(900px, calc(100svh - 20px));
  display: grid;
  align-items: center;
}

.noovi-ds-hero h1 {
  max-width: 12ch;
  font-family: var(--noovi-font-display);
  font-size: var(--noovi-text-hero);
  line-height: var(--noovi-line-tight);
  letter-spacing: 0;
  text-wrap: balance;
}

.noovi-ds-hero p {
  max-width: 64ch;
}

.noovi-premium-card,
.noovi-ds-service-card,
.noovi-ds-pricing-card,
.noovi-ds-review-card,
.noovi-ds-proof-card,
.noovi-ds-faq-item {
  border: var(--noovi-border-soft);
  border-radius: var(--noovi-radius-card);
  box-shadow: var(--noovi-shadow-card);
}

.noovi-ds-service-card,
.noovi-ds-pricing-card,
.noovi-ds-review-card,
.noovi-ds-proof-card {
  transition:
    border-color var(--noovi-motion-med) var(--noovi-ease),
    box-shadow var(--noovi-motion-med) var(--noovi-ease),
    transform var(--noovi-motion-med) var(--noovi-ease);
}

.noovi-ds-service-card:hover,
.noovi-ds-pricing-card:hover,
.noovi-ds-review-card:hover,
.noovi-ds-proof-card:hover {
  border-color: rgba(201, 168, 76, 0.38);
  box-shadow: var(--noovi-shadow-panel);
  transform: translateY(-2px);
}

.noovi-ds-phone-preview,
.noovi-ds-laptop-preview,
.noovi-ds-tablet-preview {
  border: var(--noovi-border-soft);
  border-radius: var(--noovi-radius-card);
  box-shadow: var(--noovi-shadow-panel);
  overflow: hidden;
}

.noovi-ds-phone-preview {
  aspect-ratio: 10 / 18;
}

.noovi-ds-laptop-preview {
  aspect-ratio: 16 / 10;
}

.noovi-ds-tablet-preview {
  aspect-ratio: 4 / 3;
}

.noovi-ds-proof-panel,
.noovi-ds-trust-section {
  border: var(--noovi-border-warm);
  border-radius: var(--noovi-radius-card);
  box-shadow: var(--noovi-shadow-soft);
}

.noovi-ds-before-after {
  display: grid;
  grid-template-columns: minmax(220px, 0.75fr) minmax(0, 1.25fr);
  gap: var(--noovi-space-5);
  align-items: stretch;
}

.noovi-ds-image-treatment,
.noovi-ds-image-treatment img {
  border-radius: var(--noovi-radius-media);
}

.noovi-ds-image-treatment img,
img.noovi-ds-image-treatment {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.noovi-ds-cta-band {
  position: relative;
  isolation: isolate;
}

.noovi-ds-cta-band .button,
.noovi-ds-cta-band .btn,
.noovi-ds-hero .button,
.noovi-ds-hero .btn {
  min-height: 48px;
}

.noovi-ds-faq-item summary {
  cursor: pointer;
  min-height: 54px;
}

@media (max-width: 860px) {
  :root {
    --noovi-section-y: clamp(48px, 12vw, 76px);
    --noovi-section-y-tight: clamp(34px, 10vw, 58px);
  }

  .noovi-ds-hero {
    min-height: auto;
    align-items: start;
  }

  .noovi-ds-hero h1 {
    max-width: 11ch;
  }

  .noovi-ds-before-after {
    grid-template-columns: 1fr;
  }

  .noovi-ds-phone-preview,
  .noovi-ds-laptop-preview,
  .noovi-ds-tablet-preview {
    max-width: min(100%, 420px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .noovi-ds-service-card,
  .noovi-ds-pricing-card,
  .noovi-ds-review-card,
  .noovi-ds-proof-card {
    transition: none;
  }

  .noovi-ds-service-card:hover,
  .noovi-ds-pricing-card:hover,
  .noovi-ds-review-card:hover,
  .noovi-ds-proof-card:hover {
    transform: none;
  }
}