:root {
  --table-row: color-mix(in srgb, var(--surface-primary) 84%, transparent);
}

.nav {
  background: var(--bg-nav);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-bottom: 1px solid transparent;
}

.nav.scrolled {
  background: color-mix(in srgb, var(--bg-nav) 92%, transparent);
  border-bottom-color: var(--glass-border);
  box-shadow: var(--shadow-sm);
}

.nav-inner {
  max-width: 1320px;
}

.nav-links a,
.nav-drawer-links a {
  position: relative;
  color: var(--fg-muted);
  transition: color var(--transition), background var(--transition), transform var(--transition-fast);
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0.8rem;
  right: 0.8rem;
  bottom: 0.2rem;
  height: 2px;
  border-radius: 999px;
  background: var(--gradient-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--transition-fast);
}

.nav-links a:hover,
.nav-links a.active,
.nav-drawer-links a:hover,
.nav-drawer-links a.active {
  color: var(--fg);
  background: color-mix(in srgb, var(--accent-blue) 8%, transparent);
}

.nav-links a:hover::after,
.nav-links a.active::after {
  transform: scaleX(1);
}

.nav-cta,
.btn {
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.nav-cta {
  color: var(--button-primary-fg);
  background: var(--button-primary-bg);
  border: 1px solid transparent;
  box-shadow: var(--glow-primary);
}

.btn {
  min-height: 52px;
  box-shadow: var(--shadow-sm);
}

.btn::before,
.nav-cta::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 42%);
  opacity: 0.9;
  pointer-events: none;
}

.btn-primary {
  color: var(--button-primary-fg);
  background: var(--button-primary-bg);
  box-shadow: var(--glow-primary);
}

.btn-primary:hover,
.nav-cta:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: var(--glow-accent);
}

.btn-primary:active,
.btn-secondary:active,
.nav-cta:active {
  transform: translateY(0) scale(0.985);
}

.btn-secondary,
.btn-ghost {
  color: var(--button-secondary-fg);
  background: var(--button-secondary-bg);
  border: 1px solid var(--button-secondary-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.btn-secondary:hover,
.btn-ghost:hover {
  transform: translateY(-2px) scale(1.02);
  background: color-mix(in srgb, var(--accent-cyan) 7%, var(--button-secondary-bg));
  border-color: color-mix(in srgb, var(--accent-cyan) 22%, var(--button-secondary-border));
  box-shadow: var(--shadow-md);
}

.theme-toggle,
.nav-toggle,
.back-to-top {
  background: var(--surface-primary);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.glass-card,
.workflow-step-content,
.health-score,
.showcase-visual,
.chart-mockup,
.comparison-table,
.sync-workflow,
.footer-contact-block,
.report-category,
.industry-card,
.integration-item,
.module-chip,
.problem-item {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, transparent 24%),
    var(--surface-primary);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}

.glass-card {
  position: relative;
  overflow: hidden;
}

.glass-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.24);
  opacity: 0.4;
  pointer-events: none;
}

.glass-card:hover,
.workflow-step-content:hover,
.integration-item:hover,
.industry-card:hover,
.module-chip:hover,
.problem-item:hover,
.report-category:hover {
  transform: translateY(-6px) scale(1.01);
  border-color: color-mix(in srgb, var(--accent-cyan) 22%, var(--glass-border));
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(79, 212, 255, 0.1);
}

.hero-trust-badges,
.footer-tags,
.product-benefits,
.export-badges {
  gap: 0.75rem;
}

.trust-badge,
.footer-tag,
.product-benefit,
.export-badge,
.ai-badge {
  background: color-mix(in srgb, var(--surface-secondary) 92%, transparent);
  border: 1px solid var(--glass-border);
  color: var(--fg-muted);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.hero-title,
.section-title {
  color: var(--fg);
}

.hero-desc,
.section-desc {
  color: var(--fg-muted);
}

.section-label {
  color: var(--accent-cyan);
}

.icon-wrap,
.overview-card-icon,
.security-card-icon,
.feature-card-icon,
.product-card-icon,
.report-category-icon,
.monitor-card-icon,
.counter-icon,
.ai-card-icon,
.journey-step-num {
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent), var(--brand-teal-muted);
  color: var(--icon-teal);
  border: 1px solid color-mix(in srgb, var(--icon-teal) 18%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 12px 26px rgba(15, 96, 118, 0.12);
}

.icon-wrap--brown,
.journey-step-num,
.industry-card-icon,
.security-card-icon,
.product-card-icon,
.report-category-icon {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent), var(--brand-brown-muted);
  color: var(--icon-brown);
  border-color: color-mix(in srgb, var(--icon-brown) 16%, transparent);
}

.module-chip {
  padding: 1rem 0.9rem;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.module-chip-icon {
  color: var(--accent-cyan);
}

.module-chip-icon .cafet-icon {
  width: 22px;
  height: 22px;
}

.chart-mockup {
  position: relative;
  overflow: hidden;
}

.chart-mockup::after {
  content: "";
  position: absolute;
  inset: auto 10% 0;
  height: 56%;
  background: radial-gradient(circle at center, rgba(79, 212, 255, 0.12), transparent 68%);
  filter: blur(28px);
  pointer-events: none;
}

.chart-bar {
  border-radius: 999px 999px 12px 12px;
  background: linear-gradient(180deg, var(--accent-cyan) 0%, var(--accent-blue) 100%);
  box-shadow: 0 14px 28px rgba(21, 149, 199, 0.2);
}

.comparison-table {
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
}

.comparison-table th,
.comparison-table td {
  border-bottom-color: var(--border-soft);
}

.comparison-table th {
  background: color-mix(in srgb, var(--surface-tertiary) 92%, transparent);
}

.comparison-table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--table-row) 92%, transparent);
}

.comparison-table .highlight-col {
  background: color-mix(in srgb, var(--accent-blue) 9%, transparent);
}

.check {
  color: var(--status-success);
}

.cross {
  color: var(--status-danger);
}

.nav-links {
  background: var(--bg-nav);
}

.nav-drawer-header,
.nav-drawer-footer {
  border-color: var(--glass-border);
}

.health-score {
  background:
    radial-gradient(circle at top right, rgba(41, 197, 155, 0.16), transparent 30%),
    radial-gradient(circle at bottom left, rgba(76, 135, 255, 0.16), transparent 32%),
    var(--surface-primary);
}

.monitor-status {
  box-shadow: 0 0 18px rgba(41, 197, 155, 0.42);
}

.monitor-status.warning {
  box-shadow: 0 0 18px rgba(240, 178, 74, 0.42);
}

.footer {
  background:
    radial-gradient(circle at 16% 0%, rgba(79, 212, 255, 0.1), transparent 25%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-secondary) 88%, transparent) 0%, var(--bg) 100%);
  border-top: 1px solid var(--glass-border);
}

input,
textarea,
select {
  background: var(--surface-primary);
  color: var(--fg);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.cafet-icon,
.lucide {
  stroke-width: 1.9;
}