:root {
  --bg-body: #f8fafc;
  --bg-card: #ffffff;
  --text-main: #1e293b;
  --text-muted: #64748b;
  --accent: #0ea5e9;
  --border-color: #e2e8f0;
}

body { 
  background: var(--bg-body); 
  color: var(--text-main); 
  min-height: 100vh; 
  scroll-behavior: smooth;
}

.plan-card { 
  background: var(--bg-card); 
  border: 1px solid var(--border-color); 
  border-radius: 24px; 
  transition: all 0.3s ease; 
  height: 100%; 
  display: flex; 
  flex-direction: column;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.plan-card:hover { 
  transform: translateY(-5px); 
  border-color: var(--accent); 
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); 
}

.plan-title { font-size: 1.5rem; font-weight: 700; color: #0f172a; }
.badge-step { font-size: 0.75rem; padding: 6px 12px; border-radius: 999px; font-weight: 700; }

.step-arrow { 
  font-size: 2.5rem; 
  color: #cbd5e1; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
}

ul { list-style: none; padding: 0; flex-grow: 1; }
li { margin-bottom: 12px; font-size: 0.95rem; color: var(--text-muted); }

.btn-custom { border-radius: 14px; padding: 12px; font-weight: 700; transition: 0.2s; }

.guide-box { 
  background: #f1f5f9; 
  border: 1px solid var(--border-color); 
  border-radius: 24px; 
  padding: 40px; 
  margin-top: 60px; 
}

.inner-box {
  background: white;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 20px;
}

footer { 
  padding: 40px; 
  text-align: center; 
  color: var(--text-muted); 
  font-size: 0.9rem;
  border-top: 1px solid var(--border-color);
}