/* ===================== */
/* VARIABLES             */
/* ===================== */
:root {
   --primary: #17252a;
   --secondary: #2b7a78;
   --accent: #3aafa9;
   --bg-soft: #def2f1;
   --bg-main: #feffff;
   --text-dark: #17252a;
   --text-light: #6b7280;
   --text-muted: rgba(255, 255, 255, 0.7);
   --text-primary: #17252a;
   --text-secondary: #2b7a78;

   --success: #22c55e;
   --success-bg: rgba(34, 197, 94, 0.1);
   --success-border: rgba(34, 197, 94, 0.3);
   --danger: #ef4444;
   --danger-bg: rgba(239, 68, 68, 0.1);
   --danger-border: rgba(239, 68, 68, 0.3);

   --border-color: rgba(58, 175, 169, 0.2);

   --shadow-sm: 0 2px 4px rgba(23, 37, 42, 0.08);
   --shadow-md: 0 4px 12px rgba(23, 37, 42, 0.15);
   --shadow-lg: 0 8px 24px rgba(23, 37, 42, 0.2);

   --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
   --gradient-accent: linear-gradient(135deg, var(--accent) 0%, var(--secondary) 100%);
}

/* ===================== */
/* RESET & BASE STYLES   */
/* ===================== */
* {
   box-sizing: border-box;
   /* transition: color 0.3s ease, background-color 0.3s ease, all 0.3s cubic-bezier(0.4, 0, 0.2, 1); */
}

body {
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   background: linear-gradient(135deg, var(--bg-main) 0%, var(--bg-soft) 100%);
   color: var(--text-dark);
   line-height: 1.6;
   min-height: 100vh;
   overflow-x: hidden;
   position: relative;
   font-size: 1rem;
}

body::before {
   content: "";
   position: fixed;
   inset: 0;
   background: radial-gradient(circle at 20% 80%, rgba(58, 175, 169, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(43, 122, 120, 0.1) 0%, transparent 50%);
   pointer-events: none;
   z-index: -1;
}

/* ===================== */
/* TYPOGRAPHY            */
/* ===================== */
h1,
h2,
h3,
h4,
h5,
h6,
.heading {
   font-family: "Poppins", sans-serif;
   font-weight: 600;
   color: var(--primary);
   margin-bottom: 1rem;
   line-height: 1.3;
}
h1 {
   font-size: clamp(2rem, 4vw, 3rem);
}
h2 {
   font-size: clamp(1.5rem, 3vw, 2.25rem);
}
h3 {
   font-size: clamp(1.25rem, 2.5vw, 1.875rem);
}

p,
.text-body {
   font-family: "Inter", sans-serif;
   color: var(--text-light);
   margin-bottom: 1rem;
}

/* ===================== */
/* CONTAINER             */
/* ===================== */
.container {
   position: relative;
   z-index: 1;
}
main.container {
   /* background: rgba(255, 255, 255, 0.8); */
   /* backdrop-filter: blur(10px); */
   /* border-radius: 24px; */
   /* box-shadow: var(--shadow-lg); */
   /* border: 1px solid var(--border-color); */
   /* padding: 2rem; */
   margin: 2rem auto;
   animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (max-width: 576px) {
   main.container {
      margin-top: 0;
      padding: 0 1.5rem 1.5rem 1.5rem;
      border-radius: 16px;
   }
}

@keyframes fadeInUp {
   from {
      opacity: 0;
      transform: translateY(30px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}