:root {
  --terracotta: #C0562B;
  --savanna: #E8A33D;
  --leaf: #3E7C4A;
  --charcoal: #2B2320;
  --cream: #FBF3E7;
  --white: #ffffff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: var(--cream);
  color: var(--charcoal);
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--charcoal);
  padding: 14px 32px;
}

nav .brand {
  color: var(--savanna);
  font-size: 1.4rem;
  font-weight: 700;
  text-decoration: none;
}

nav .links a {
  color: var(--cream);
  text-decoration: none;
  margin-left: 22px;
  font-size: 0.95rem;
}

nav .links a:hover { color: var(--savanna); }

.container { max-width: 1080px; margin: 0 auto; padding: 32px 20px; }

.hero {
  background: linear-gradient(135deg, var(--terracotta), var(--savanna));
  color: var(--white);
  padding: 60px 32px;
  text-align: center;
}

.hero h1 { font-size: 2.4rem; margin-bottom: 10px; }
.hero p { font-size: 1.1rem; opacity: 0.95; }

.btn {
  display: inline-block;
  background: var(--terracotta);
  color: var(--white);
  padding: 10px 22px;
  border-radius: 6px;
  text-decoration: none;
  border: none;
  font-size: 0.95rem;
  cursor: pointer;
}

.btn:hover { background: #a3471f; }
.btn.secondary { background: var(--leaf); }
.btn.secondary:hover { background: #2f6238; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.card {
  background: var(--white);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
}

.card img { width: 100%; height: 160px; object-fit: cover; background: #ddd; }
.card .body { padding: 16px; flex: 1; display: flex; flex-direction: column; }
.card h3 { margin: 0 0 6px; }
.card .tag { font-size: 0.75rem; color: var(--leaf); font-weight: 600; text-transform: uppercase; }
.card p { flex: 1; color: #555; font-size: 0.9rem; }

form.form-box {
  max-width: 420px;
  margin: 20px auto;
  background: var(--white);
  padding: 28px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

form.form-box label { display: block; margin-top: 14px; font-size: 0.9rem; font-weight: 600; }
form.form-box input, form.form-box select {
  width: 100%;
  padding: 9px;
  margin-top: 4px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 20px; }
.plan-card { background: var(--white); border-radius: 10px; padding: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); text-align: center; }
.plan-card .price { font-size: 2rem; font-weight: 700; color: var(--terracotta); margin: 10px 0; }
.plan-card ul { text-align: left; padding-left: 20px; color: #555; font-size: 0.9rem; }

.flash { background: #eaf6ec; border: 1px solid var(--leaf); color: #235228; padding: 12px 16px; border-radius: 8px; margin-bottom: 18px; }
.error { background: #fbeae7; border: 1px solid var(--terracotta); color: #7a2c11; padding: 12px 16px; border-radius: 8px; margin-bottom: 18px; }

table { width: 100%; border-collapse: collapse; margin-top: 12px; background: var(--white); border-radius: 8px; overflow: hidden; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #eee; font-size: 0.9rem; }
th { background: #f4ede2; }

footer { text-align: center; padding: 24px; color: #888; font-size: 0.85rem; }