@import url("https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700&family=Instrument+Sans:wght@300;400;500&display=swap");

:root {
  --vm-font-display: "Syne", system-ui, sans-serif;
  --vm-font-body: "Instrument Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --vm-bg: #ffffff;
  --vm-surface: #f7faf9;
  --vm-thumb-1: #eef6f4;
  --vm-thumb-2: #e7f0ee;
  --vm-thumb-3: #dce9e6;
  --vm-border: #dfe8e5;
  --vm-border-2: #cfdcd8;
  --vm-violet: #1f6f6b;
  --vm-violet-dark: #153f42;
  --vm-body: #465f5d;
  --vm-secondary: #607672;
  --vm-muted: #8b9b98;
  --vm-nav: #4e6461;
  --vm-title: #142323;
  --vm-gold: #b8904b;
  --vm-gold-dark: #715727;
  --vm-gold-light: #d8bd78;
  --vm-gold-bg: rgba(184, 144, 75, 0.1);
  --vm-gold-border: rgba(184, 144, 75, 0.3);
  --vm-shadow: 0 18px 54px rgba(21, 63, 66, 0.1);
  --vm-shadow-deep: 0 26px 86px rgba(21, 63, 66, 0.14);
}

html {
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(circle at 50% -10%, rgba(31, 111, 107, 0.08), transparent 32rem),
    linear-gradient(180deg, #ffffff 0%, #f8fbfa 100%) !important;
  color: var(--vm-title) !important;
  font-family: var(--vm-font-body) !important;
  font-size: 13.5px !important;
  letter-spacing: 0 !important;
}

body,
p,
li,
a,
button,
input,
select,
textarea,
.hero-sub,
.sec-sub,
.card-desc,
.product-copy,
.stat-l,
.nav a,
.small,
.muted,
.lead,
.demo-note {
  font-family: var(--vm-font-body) !important;
  font-size: 13.5px !important;
  letter-spacing: 0 !important;
}

h1,
h2,
h3,
h4,
.brand,
.brand-name,
.nav-brand,
.logo,
.btn,
.nav-cta,
.hero-badge,
.section-badge,
.sec-eyebrow,
.card-title,
.product-title,
.product-kicker,
.metric-value,
.metric-card,
.panel-title,
.sidebar-title,
.menu-item,
.pill,
.chip,
.tag,
.badge,
.product-tags span,
.btn-primary,
.btn-ghost,
.btn-white {
  font-family: var(--vm-font-display) !important;
  letter-spacing: 0 !important;
}

h1,
.hero h1 {
  color: var(--vm-title) !important;
  font-size: clamp(2.25rem, 4.4vw, 3rem) !important;
  font-weight: 700 !important;
  line-height: 1.14 !important;
  letter-spacing: 0 !important;
  word-spacing: 0.06em !important;
  text-wrap: balance;
}

h1 em,
.hero h1 em {
  color: var(--vm-violet) !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
  margin-inline: 0.08em;
}

h2 {
  color: var(--vm-title) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-wrap: balance;
}

h3 {
  color: var(--vm-title) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

p,
.hero-sub,
.sec-sub {
  color: var(--vm-body) !important;
  font-weight: 300 !important;
  line-height: 1.72 !important;
}

header,
nav,
.topbar,
.site-header {
  background: rgba(255, 255, 255, 0.9) !important;
  border-bottom: 1px solid var(--vm-border) !important;
  backdrop-filter: blur(16px);
}

nav a,
.nav a {
  color: var(--vm-nav) !important;
  font-weight: 400 !important;
}

nav a:hover,
.nav a:hover {
  color: var(--vm-violet-dark) !important;
}

.brand,
.brand-name,
.logo {
  color: var(--vm-title) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

.hero,
.hero-section,
.hero-wrap {
  background:
    radial-gradient(circle at 78% 12%, rgba(31, 111, 107, 0.075), transparent 26rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 250, 0.96)) !important;
}

.hero-badge,
.section-badge,
.sec-eyebrow,
.eyebrow,
.pill,
.chip,
.badge {
  background: var(--vm-gold-bg) !important;
  border: 1px solid var(--vm-gold-border) !important;
  border-radius: 40px !important;
  color: var(--vm-gold-dark) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase;
}

.hero-badge-dot,
.dot {
  background: var(--vm-gold) !important;
}

.btn,
.btn-primary,
.btn-cta,
.nav-cta,
button[type="submit"] {
  background: linear-gradient(135deg, var(--vm-violet-dark), var(--vm-violet)) !important;
  border: 1px solid rgba(21, 63, 66, 0.18) !important;
  border-radius: 14px !important;
  font-family: var(--vm-font-display) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  box-shadow: 0 16px 36px rgba(21, 63, 66, 0.2) !important;
  color: #fff !important;
  font-weight: 600 !important;
}

.btn:hover,
.btn-primary:hover,
.btn-cta:hover,
.nav-cta:hover,
button[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 42px rgba(21, 63, 66, 0.25) !important;
}

.btn-ghost,
.btn-white,
.secondary,
.outline,
.product-cta.secondary {
  background: #fff !important;
  border: 1px solid var(--vm-border-2) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  color: var(--vm-violet-dark) !important;
}

.card,
.material-card,
.product-card,
.feature-card,
.metric-card,
.panel-card,
.demo-card,
.bridge-card,
.pricing-card,
.faq-item,
.form-card,
.insight-card,
.patient-row,
.app-card,
.mockup,
.demo-shell,
.product-mock,
.mini-screen,
.install-bar {
  background: rgba(247, 250, 249, 0.88) !important;
  border: 1px solid var(--vm-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--vm-shadow) !important;
}

.cards-grid,
.products-grid,
.feature-grid,
.materials-grid,
.benefits-grid,
.steps-grid {
  gap: clamp(1rem, 2vw, 1.35rem) !important;
}

.card,
.material-card,
.product-card,
.feature-card,
.metric-card,
.panel-card,
.demo-card,
.bridge-card,
.pricing-card {
  position: relative;
  overflow: hidden;
}

.card::before,
.material-card::before,
.product-card::before,
.feature-card::before,
.metric-card::before,
.panel-card::before,
.demo-card::before,
.bridge-card::before,
.pricing-card::before {
  background: linear-gradient(90deg, var(--vm-gold), var(--vm-gold-light)) !important;
  content: "";
  height: 3px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.material-card:hover,
.product-card:hover,
.feature-card:hover,
.metric-card:hover,
.bridge-card:hover,
.pricing-card:hover {
  border-color: rgba(31, 111, 107, 0.28) !important;
  box-shadow: 0 24px 70px rgba(21, 63, 66, 0.12) !important;
  transform: translateY(-2px);
}

.card-featured,
.material-card.featured,
.hero-card,
.product-card.primary,
.product-card.featured {
  background:
    radial-gradient(circle at 88% 0%, rgba(31, 111, 107, 0.08), transparent 12rem),
    linear-gradient(135deg, #ffffff 0%, var(--vm-surface) 100%) !important;
  border-color: rgba(31, 111, 107, 0.22) !important;
  box-shadow: var(--vm-shadow-deep) !important;
}

.card-thumb,
.material-thumb,
.thumbnail,
.icon-box,
.icon,
.demo-sidebar,
.mock-sidebar {
  background:
    radial-gradient(circle at 24% 16%, rgba(255, 255, 255, 0.55), transparent 1.4rem),
    linear-gradient(135deg, var(--vm-thumb-1), var(--vm-thumb-3)) !important;
  border: 1px solid var(--vm-border-2) !important;
  border-radius: 14px !important;
  color: var(--vm-violet) !important;
}

.card-thumb-active,
.material-thumb-active,
.thumb-featured {
  background:
    linear-gradient(135deg, rgba(31, 111, 107, 0.12), rgba(184, 144, 75, 0.12)),
    var(--vm-thumb-1) !important;
  border-bottom: 1px solid var(--vm-border-2) !important;
}

.card-thumb-label,
.label-rose,
.product-flag,
.material-label {
  background: var(--vm-gold-bg) !important;
  border: 1px solid var(--vm-gold-border) !important;
  border-radius: 40px !important;
  color: var(--vm-gold-dark) !important;
  font-family: var(--vm-font-display) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

.card-title,
.material-title,
.product-title,
.app-banner-title {
  color: var(--vm-title) !important;
  font-family: var(--vm-font-display) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.35 !important;
}

.product-title,
.hero-card h2,
.card-featured h2,
.material-card.featured h2 {
  font-size: 18px !important;
  line-height: 1.35 !important;
}

.card-desc,
.material-desc,
.product-copy,
.app-banner-desc {
  color: var(--vm-body) !important;
  font-size: 13.5px !important;
  line-height: 1.65 !important;
}

.card-cta,
.product-cta,
.app-banner-arrow {
  color: var(--vm-violet-dark) !important;
  font-family: var(--vm-font-display) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

.reference,
.material-ref,
.card-ref,
cite {
  font-family: var(--vm-font-body) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
}

.metric-value,
.stat-value,
.number {
  font-family: var(--vm-font-display) !important;
  letter-spacing: 0 !important;
}

.product-card.featured {
  background:
    radial-gradient(circle at 88% 6%, rgba(31, 111, 107, 0.08), transparent 13rem),
    linear-gradient(135deg, #ffffff, var(--vm-surface)) !important;
  border-color: rgba(31, 111, 107, 0.22) !important;
}

.app-banner,
.platform-bridge,
.product-bridge,
.clinical-bridge,
.cta-band {
  background:
    radial-gradient(circle at 88% 14%, rgba(31, 111, 107, 0.08), transparent 11rem),
    linear-gradient(135deg, #ffffff, var(--vm-surface)) !important;
  border: 1px solid var(--vm-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--vm-shadow) !important;
  overflow: hidden;
  position: relative;
}

.app-banner::before,
.platform-bridge::before,
.product-bridge::before,
.clinical-bridge::before,
.cta-band::before {
  background: linear-gradient(90deg, var(--vm-gold), var(--vm-gold-light)) !important;
  content: "";
  height: 3px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.app-banner-icon,
.product-icon,
.material-icon {
  background: linear-gradient(135deg, var(--vm-violet-dark), var(--vm-violet)) !important;
  border-radius: 14px !important;
  box-shadow: 0 14px 34px rgba(21, 63, 66, 0.18) !important;
}

.product-card.featured .product-title,
.product-card.featured h3 {
  color: var(--vm-title) !important;
}

.product-tags span,
.tag,
.badge-soft {
  background: rgba(31, 111, 107, 0.08) !important;
  border: 1px solid rgba(31, 111, 107, 0.14) !important;
  border-radius: 40px !important;
  color: var(--vm-violet-dark) !important;
}

.product-card.featured .product-tags span:nth-child(odd),
.gold-chip {
  background: var(--vm-gold-bg) !important;
  border-color: var(--vm-gold-border) !important;
  color: var(--vm-gold-dark) !important;
}

.demo-shell,
.product-mock,
.mock-window {
  background: #fff !important;
  border-color: var(--vm-border-2) !important;
  border-radius: 18px !important;
  box-shadow: 0 28px 90px rgba(21, 63, 66, 0.14) !important;
}

.demo-shell::after,
.product-mock::after,
.mock-window::after {
  display: none !important;
  content: none !important;
}

.demo-topbar,
.mock-topbar,
.window-bar {
  background: linear-gradient(90deg, var(--vm-violet-dark), #1f6f6b) !important;
  color: rgba(255, 255, 255, 0.78) !important;
}

.metric-card,
.demo-metric,
.mock-card {
  background: #fff !important;
  border-color: var(--vm-border) !important;
}

.metric-value,
.stat-n,
.demo-number {
  color: var(--vm-title) !important;
}

.chart-bar,
.bar,
.progress-bar,
.progress-fill {
  background: linear-gradient(90deg, var(--vm-violet-dark), var(--vm-violet)) !important;
}

.alert,
.insight,
.notice,
.callout {
  background: rgba(201, 168, 76, 0.1) !important;
  border: 1px solid rgba(201, 168, 76, 0.28) !important;
  border-radius: 14px !important;
  color: var(--vm-gold-dark) !important;
}

table,
.table,
.list,
.row {
  border-color: var(--vm-border) !important;
}

input,
select,
textarea {
  background: #fff !important;
  border: 1px solid var(--vm-border-2) !important;
  border-radius: 14px !important;
  color: var(--vm-title) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(31, 111, 107, 0.42) !important;
  box-shadow: 0 0 0 4px rgba(31, 111, 107, 0.1) !important;
  outline: none !important;
}

.sidebar,
aside {
  background: #fff !important;
  border-color: var(--vm-border) !important;
}

.menu-item,
.sidebar a,
aside a {
  border-radius: 14px !important;
  color: var(--vm-body) !important;
}

.menu-item.active,
.sidebar a.active,
aside a.active,
.active {
  background: rgba(31, 111, 107, 0.1) !important;
  color: var(--vm-violet-dark) !important;
}

footer {
  background:
    radial-gradient(circle at 14% 16%, rgba(31, 111, 107, 0.16), transparent 18rem),
    #132526 !important;
  color: rgba(255, 255, 255, 0.74) !important;
}

footer a {
  color: #fff !important;
}

@media (max-width: 820px) {
  h1,
  .hero h1 {
    font-size: clamp(2rem, 9.8vw, 2.65rem) !important;
    line-height: 1.16 !important;
    letter-spacing: 0 !important;
    word-spacing: 0.04em !important;
  }

  .hero,
  .hero-section,
  .hero-wrap {
    padding-top: 5.5rem !important;
  }

  .card,
  .material-card,
  .product-card,
  .feature-card,
  .metric-card,
  .panel-card,
  .demo-card,
  .bridge-card,
  .pricing-card,
  .product-mock,
  .demo-shell {
    border-radius: 14px !important;
  }

  .nav,
  nav {
    gap: 0.55rem !important;
  }

  .btn,
  .btn-primary,
  .btn-cta,
  .btn-ghost,
  .btn-white,
  .nav-cta {
    min-height: 44px;
  }
}

/* Ajuste final de direção visual: clínico, claro e sem ruído roxo/vinho. */
:root {
  --vm-accent: #1f6f6b;
  --vm-accent-dark: #153f42;
  --vm-accent-soft: #eef6f4;
  --vm-accent-line: #cfdcd8;
}

body {
  background:
    radial-gradient(circle at 50% -8%, rgba(31, 111, 107, 0.07), transparent 34rem),
    linear-gradient(180deg, #ffffff 0%, #f8faf9 100%) !important;
}

.hero,
.hero-section,
.hero-wrap,
.landing-hero {
  background:
    radial-gradient(circle at 78% 10%, rgba(31, 111, 107, 0.06), transparent 30rem),
    linear-gradient(180deg, #ffffff 0%, #f8faf9 100%) !important;
}

h1,
.hero h1,
.headline,
.display-title {
  color: #152323 !important;
  letter-spacing: 0 !important;
}

h1 em,
.hero h1 em,
.accent,
.highlight {
  color: var(--vm-accent) !important;
}

.btn,
.btn-primary,
.btn-cta,
.nav-cta,
button[type="submit"],
.button-primary {
  background: linear-gradient(135deg, var(--vm-accent-dark), var(--vm-accent)) !important;
  border-color: rgba(21, 63, 66, 0.18) !important;
  box-shadow: 0 16px 34px rgba(21, 63, 66, 0.18) !important;
}

.btn:hover,
.btn-primary:hover,
.btn-cta:hover,
.nav-cta:hover {
  box-shadow: 0 18px 42px rgba(21, 63, 66, 0.24) !important;
}

.btn-ghost,
.btn-white,
.secondary,
.outline,
.product-cta.secondary {
  background: #ffffff !important;
  color: var(--vm-accent-dark) !important;
  border-color: var(--vm-border-2) !important;
}

.card,
.material-card,
.product-card,
.feature-card,
.metric-card,
.panel-card,
.demo-card,
.bridge-card,
.pricing-card,
.faq-item,
.form-card,
.insight-card,
.patient-row,
.app-card,
.mockup,
.demo-shell,
.product-mock,
.mini-screen,
.install-bar,
.platform-preview,
.panel-preview,
.browser-mockup {
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: var(--vm-border) !important;
  color: var(--vm-title) !important;
}

.card-thumb,
.material-thumb,
.thumbnail,
.icon-box,
.icon,
.app-banner-icon,
.product-icon,
.material-icon {
  background: #ffffff !important;
  border: 1px solid var(--vm-border-2) !important;
  box-shadow: none !important;
  color: var(--vm-accent-dark) !important;
}

.card-thumb svg,
.material-thumb svg,
.thumbnail svg,
.icon-box svg,
.icon svg,
.app-banner-icon svg,
.product-icon svg,
.material-icon svg {
  color: var(--vm-accent-dark) !important;
  stroke: currentColor !important;
}

.demo-sidebar,
.mock-sidebar,
.sidebar-preview,
.side-preview {
  background: #f8faf9 !important;
  color: var(--vm-title) !important;
  border-right: 1px solid var(--vm-border) !important;
}

.demo-sidebar *,
.mock-sidebar *,
.sidebar-preview *,
.side-preview *,
.demo-shell *,
.product-mock *,
.mock-window *,
.mini-screen *,
.platform-preview *,
.panel-preview *,
.browser-mockup * {
  color: var(--vm-title) !important;
  text-shadow: none !important;
}

.demo-shell .muted,
.product-mock .muted,
.mock-window .muted,
.mini-screen .muted,
.platform-preview .muted,
.panel-preview .muted,
.demo-shell small,
.product-mock small,
.mock-window small {
  color: var(--vm-secondary) !important;
}

.demo-topbar,
.mock-topbar,
.window-bar {
  background: linear-gradient(90deg, var(--vm-accent-dark), var(--vm-accent)) !important;
}

.demo-topbar *,
.mock-topbar *,
.window-bar * {
  color: rgba(255, 255, 255, 0.88) !important;
}

.chart-bar,
.bar,
.progress-bar,
.progress-fill,
.switch-on,
.toggle-on {
  background: linear-gradient(90deg, var(--vm-accent-dark), var(--vm-accent)) !important;
}

.hero::before,
.hero::after,
.hero-section::before,
.hero-section::after,
.hero-wrap::before,
.hero-wrap::after,
.demo-shell::after,
.product-mock::after,
.mock-window::after,
.decorative-icon,
.floating-icon,
.hero-orb,
.orb,
.bubble,
.blob,
.install-prompt,
.pwa-install,
#installPrompt {
  display: none !important;
  content: none !important;
}

.product-tags span,
.tag,
.badge-soft,
.pill,
.chip {
  background: rgba(31, 111, 107, 0.08) !important;
  border-color: rgba(31, 111, 107, 0.16) !important;
  color: var(--vm-accent-dark) !important;
}

.hero-badge,
.section-badge,
.sec-eyebrow,
.eyebrow {
  background: var(--vm-gold-bg) !important;
  border-color: var(--vm-gold-border) !important;
  color: var(--vm-gold-dark) !important;
}

footer {
  background: #153f42 !important;
}