:root {
  --bg: #0c1530;
  --card: #0f1b3d;
  --accent: #6cf2c2;
  --accent-2: #7aa2ff;
  --text: #e6ecff;
  --muted: #9aa7c7;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1200px circle at 10% 10%, #1b2a6b 0%, transparent 45%),
    radial-gradient(900px circle at 90% 20%, #0b5cff 0%, transparent 35%),
    linear-gradient(180deg, #0a0f2a, #060a16 70%);
  color: var(--text);
  font-family:
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Arial,
    sans-serif;
}

/* Hero Header */
.hero {
  background: linear-gradient(
    135deg,
    rgba(108, 242, 194, 0.2),
    rgba(122, 162, 255, 0.2)
  );
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
}

/* เพิ่ม contrast ของข้อความ */
.hero h2 {
  font-weight: 900;
  font-size: 2rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.hero p {
  color: #cfe3ff; /* จาก muted -> ขาวขึ้น */
  font-size: 1rem;
}

/* ทำให้การ์ดเด่นจากพื้นหลังมากขึ้น */
.card {
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    rgba(20, 30, 70, 0.98),
    rgba(10, 16, 40, 0.98)
  );
  border: 1px solid rgba(140, 180, 255, 0.25);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* หัวข้อ Card */
.card-title {
  font-weight: 800;
  color: #7df2ff;
  text-shadow: 0 0 6px rgba(125, 242, 255, 0.35);
}

/* ตัวเนื้อหาในการ์ด */
.card-text {
  color: #e0e6ff; /* จาก muted -> สว่างขึ้น */
  line-height: 1.6;
}

/* แถบคำอธิบายด้านล่างภาพ */
.card .badge,
.card-footer {
  background: rgba(0, 0, 0, 0.35);
  color: #bfe8ff;
}

/* ทำให้ขอบ container ชัดขึ้น */
.container {
  border: 1px solid rgba(140, 180, 255, 0.25);
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Footer */
footer {
  opacity: 0.7;
  letter-spacing: 0.3px;
}