:root {
  --bg: #0C0A0C;
  --panel: #18121A;
  --panel-2: #1F1620;
  --line: #33202A;
  --text: #F5F0EB;
  --text-2: #C4B5A8;
  --prose: #E8DDD1;
  --accent: #E8B04B;
  --accent-2: #E0344C;
  --on-accent: #0C0A0C;
  --radius: 2px;
}

body {
  background: radial-gradient(ellipse 120% 80% at 50% 0%, #1A0E14 0%, var(--bg) 50%);
}

.hero {
  background: radial-gradient(circle at 30% 40%, rgba(232, 176, 75, 0.08) 0%, transparent 60%),
              radial-gradient(circle at 70% 60%, rgba(224, 52, 76, 0.06) 0%, transparent 50%);
  border-bottom: 1px solid var(--line);
}

.site-header {
  background: linear-gradient(180deg, rgba(24, 18, 26, 0.95) 0%, rgba(24, 18, 26, 0.85) 100%);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.section {
  border-top: 1px solid var(--line);
}

.card {
  background: linear-gradient(135deg, var(--panel) 0%, var(--panel-2) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(232, 176, 75, 0.12);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--accent), inset 0 1px 0 rgba(232, 176, 75, 0.2);
}

.card .icon {
  background: linear-gradient(135deg, var(--accent) 0%, #D19A3A 100%);
  color: var(--on-accent);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(232, 176, 75, 0.4);
}

.feature {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.3s ease;
}

.feature:hover {
  border-color: var(--accent);
}

.btn {
  background: linear-gradient(135deg, var(--accent) 0%, #D19A3A 100%);
  color: var(--on-accent);
  border: none;
  border-radius: var(--radius);
  box-shadow: 0 2px 12px rgba(232, 176, 75, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(232, 176, 75, 0.5);
}

.badge {
  background: var(--accent-2);
  color: var(--text);
  border-radius: var(--radius);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.tab {
  border-bottom: 2px solid transparent;
  transition: border-color 0.3s ease, color 0.3s ease;
  color: var(--text-2);
}

.tab:hover,
.tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.faq-item {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: background 0.3s ease;
}

.faq-item:hover {
  background: var(--panel-2);
}

h1, h2, h3 {
  letter-spacing: 0.03em;
  font-weight: 700;
}

h1 {
  background: linear-gradient(135deg, var(--accent) 0%, #F0C870 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

table {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

th {
  background: var(--panel-2);
  border-bottom: 2px solid var(--accent);
  font-weight: 700;
  letter-spacing: 0.02em;
}

td {
  border-bottom: 1px solid var(--line);
}

tr:hover {
  background: rgba(232, 176, 75, 0.05);
}

.tile {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: background 0.3s ease, border-color 0.3s ease;
}

.tile:hover {
  background: var(--panel-2);
  border-color: var(--accent);
}

footer {
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, transparent 0%, rgba(24, 18, 26, 0.5) 100%);
}

a {
  transition: color 0.3s ease;
}

a:hover {
  color: var(--accent);
}

input, textarea {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  transition: border-color 0.3s ease;
}

input:focus, textarea:focus {
  border-color: var(--accent);
  outline: none;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.card, .feature, .tile {
  animation: fadeIn 0.6s ease forwards;
}