@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

:root {
  --color-bg: #0D1B2A;
  --color-primary: #00B5B5;
  --color-accent: #1FC0D7;
  --color-white: #FFFFFF;
  --color-muted: #6C757D;
  --color-line: #1B2E45;
}

body {
  font-family: 'Poppins', sans-serif;
  background-color: var(--color-bg);
  color: #1F2937;
}


.header-gradient {
  background: var(--color-bg);
  color: var(--color-white);
}

.header-gradient a {
  color: var(--color-white);
}

.header-gradient a:hover {
  color: var(--color-accent);
}

.footer-gradient {
  background: var(--color-bg);
  color: var(--color-white);
}

.footer-gradient a:hover {
  color: var(--color-accent);
}

.cta-button {
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  display: inline-block;
}

.cta-avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
}

.cta-button:hover {
  background-color: var(--color-accent);
}


.accent-text {
  color: var(--color-primary);
}


.accent-secondary {
  color: var(--color-muted);
}

/* FAQ styling */
details.faq-item {
  background-color: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  margin-bottom: 1rem;
}

details.faq-item summary {
  padding: 1rem;
  font-weight: 600;
  cursor: pointer;
}

details.faq-item[open] summary {
  background-color: #f9fafb;
}

details.faq-item > div {
  padding: 0 1rem 1rem;
}

/* Container frame for the FAQ section */
.faq-frame {
  background-color: var(--color-white);
  border: 2px solid var(--color-line);
  border-radius: 0.75rem;
  padding: 2rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.plan-basic { background-color: #e0f7fa; }
.plan-pro { background-color: #fff3e0; }
.plan-premium { background-color: #ede7f6; }
.why-box { background-color: var(--color-white); border-radius: 0.5rem; box-shadow: 0 2px 4px rgba(0,0,0,0.05); padding: 1rem; }
.testimonial-avatar { width: 80px; height: 80px; border-radius: 9999px; margin-bottom: 0.5rem; }