/* ===== Theme Variables ===== */
:root {
  --bg-dark: #141414;
  --bg-soft: #1b1b1b;
  --card-bg: rgba(24, 24, 24, 0.88);
  --gold: #c9a24d;
  --gold-soft: #e2c98f;
  --text-main: #eaeaea;
  --text-muted: #b5b5b5;
}

/* ===== Base ===== */
* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg-dark);
  color: var(--text-main);
  overflow: hidden;
}

/* ===== Marble Background ===== */
.background {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at top, rgba(255,255,255,0.05), transparent 60%),
    linear-gradient(135deg, var(--bg-dark), var(--bg-soft)),
    url("https://www.transparenttextures.com/patterns/marble.png");
  opacity: 0.25;
  animation: slow-drift 60s linear infinite;
}

/* ===== Layout ===== */
.container {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.card {
  background: var(--card-bg);
  border: 1px solid rgba(201,162,77,0.35);
  border-radius: 14px;
  padding: 3.5rem 4rem;
  max-width: 760px;
  width: 100%;
  text-align: center;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  animation: fade-up 1.2s ease forwards;
}

/* ===== Typography ===== */
h1 {
  margin: 0;
  font-size: 2.9rem;
  letter-spacing: 0.08em;
  color: var(--gold);
}

.lead {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: 2rem;
}

.divider {
  width: 90px;
  height: 2px;
  margin: 1.6rem auto 2.2rem;
  background: linear-gradient(
    to right,
    transparent,
    var(--gold),
    transparent
  );
}

/* ===== Feature List ===== */
.features {
  list-style: none;
  padding: 0;
  margin: 0 0 2.8rem;
  text-align: left;
}

.features li {
  margin-bottom: 0.8rem;
  padding-left: 1.2rem;
  position: relative;
  color: var(--text-main);
}

.features li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--gold);
}

/* ===== Footer ===== */
footer {
  font-size: 0.75rem;
  opacity: 0.6;
}

footer a {
  color: var(--gold-soft);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

footer a:hover {
  opacity: 1;
}

/* ===== Animations ===== */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(25px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slow-drift {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 400px 400px;
  }
}