/* ===========================
   BASE (GLOBAL) STYLES
   =========================== */

/* Variables */
:root {
  --tiffany: #8BD7D2;
  --green-yellow: #ABFF4F;
  --tangerine: #FF934F;
  --puce: #C98CA7;

  --bg: #f7fcfb;
  --panel: #ffffff;
  --card: #ffffff;
  --text: #1b262c;
  --muted: #6a7d86;

  --brand: var(--tiffany);
  --brand-2: var(--green-yellow);
  --accent-warm: var(--tangerine);
  --accent-soft: var(--puce);

  --radius: 18px;
  --shadow: 0 8px 24px rgba(0,0,0,.12);

  --bg-gradient: 
    radial-gradient(1000px 600px at 12% -10%, rgba(139,215,210,.35), transparent 60%),
    radial-gradient(900px 600px at 85% -10%, rgba(255,147,79,.25), transparent 60%),
    linear-gradient(180deg, #f7fcfb, #fff7f1);
}

/* Reset & Base */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: var(--bg-gradient);
}
.container { max-width: 1160px; margin: 0 auto; padding: 28px; }

h1,h2,h3 { line-height: 1.3; letter-spacing: .3px; }
p { line-height: 1.6; }

/* Cards */
.card {
  background: var(--card);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.15); }

/* Buttons */
.btn {
  appearance: none; border: 0; border-radius: 14px;
  padding: 12px 20px; font-weight: 600; cursor: pointer;
  background: linear-gradient(135deg, var(--tiffany), var(--green-yellow));
  color: #052021; box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .25s ease, filter .2s ease;
}
.btn:hover { filter: brightness(1.15); transform: translateY(-2px); }

/* Footer */
footer.site {
  width: 100%;
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
  padding: 16px 8px;
  margin-top: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
footer.site p { margin: 0; }

/* Animations */
.fade-in { opacity: 0; transform: translateY(8px); animation: fade .5s ease .05s forwards; }
@keyframes fade { to { opacity: 1; transform: translateY(0); } }

/* Dark Theme */
:root[data-theme="dark"] {
  --bg: #0a0f14;
  --panel: #0f1720;
  --card: #121a24;
  --text: #e6eef6;
  --muted: #9eb3c7;
  --brand: #7bd3ff;
  --brand-2: #b7f0d3;
  --tangerine: #ff9aa2;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
  --bg-gradient: linear-gradient(180deg,#0b0f14,#0e1724);
}
.card .content {
  padding: 2rem; /* more breathing room */
}

/* On smaller screens reduce padding slightly */
@media (max-width: 700px) {
  .card .content {
    padding: 1.2rem;
  }
}