@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --accent: #f59e0b;
  --accent-hover: #d97706;
  --bg: #0b1120;
  --surface: #111827;
  --surface-2: #1f2937;
  --border: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(245, 158, 11, 0.34);
  --text: #f1f5f9;
  --text-2: #94a3b8;
  --text-3: #64748b;
  --success: #10b981;
  --radius: 12px;
}

html, body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: 'Inter', -apple-system, system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

header,
.topbar,
.nav,
.site-nav,
.container,
.shell,
.wrap {
  color: var(--text);
}

.topbar,
header,
.hero,
.hero-main,
.hero-side,
.card,
.deal,
.faq-item,
.product-box,
.quick,
.notice,
.support,
.upsell,
footer,
.foot,
section {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}

.hero,
.hero-main,
.hero-side,
.card,
.deal,
.faq-item,
.product-box,
.quick,
.notice,
.support,
.upsell,
footer,
.foot,
section {
  border-radius: var(--radius);
}

h1, h2, h3, h4, h5, h6,
.logo,
.brand,
.nav-logo {
  color: var(--text) !important;
}

p,
li,
small,
.sub,
.subtitle,
.deal-meta,
.product-desc,
.notice,
.support p {
  color: var(--text-2) !important;
}

.nav a,
.site-nav a,
.topbar a,
footer a,
.foot a {
  color: var(--text-2) !important;
}

.nav a:hover,
.site-nav a:hover,
.topbar a:hover,
footer a:hover,
.foot a:hover {
  color: var(--text) !important;
}

.btn,
.btn-primary,
.header-cta,
.nav-cta,
.download-btn,
.upsell a,
button,
input[type="submit"] {
  background: var(--accent) !important;
  color: #0b1120 !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  transition: all .2s ease !important;
}

.btn:hover,
.btn-primary:hover,
.header-cta:hover,
.nav-cta:hover,
.download-btn:hover,
.upsell a:hover,
button:hover,
input[type="submit"]:hover {
  background: var(--accent-hover) !important;
  transform: translateY(-1px);
}

.btn.alt,
.btn.secondary,
.btn-outline,
a.btn.alt {
  background: transparent !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

input,
select,
textarea {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px;
}

code,
pre {
  background: #0f172a !important;
  color: #e2e8f0 !important;
}

#lang-toggle,
#lang-toggle-success {
  border: 1px solid var(--border) !important;
  color: var(--text-2) !important;
  background: transparent !important;
}

#lang-toggle:hover,
#lang-toggle-success:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}