/* ==================================
   Swap.io Landing Page Customization
   Theme: Green + Blue | White Base
   ================================== */

/* ---------- Brand Variables ---------- */
:root {
  --swap-green: #22c55e;
  --swap-blue: #0ea5e9;
  --swap-dark-blue: #0f3d57;
  --swap-light-bg: #f8fafc;
  --swap-border: #e5e7eb;
  --swap-text: #1f2933;
}

/* ---------- Global ---------- */
body {
  background-color: #ffffff;
  color: var(--swap-text);
  font-family: "Inter", "Segoe UI", sans-serif;
}

/* ---------- Header / Hero Section ---------- */
#ad-header {
  background: linear-gradient(
    135deg,
    #ffffff 0%,
    #f0fdfa 100%
  );
  border-bottom: 1px solid var(--swap-border);
  padding: 48px 0;
}

/* Header title */
#ad-header h1,
#ad-header h2 {
  color: var(--swap-dark-blue);
  font-weight: 700;
}

/* Header subtitle */
#ad-header p {
  color: #475569;
  max-width: 720px;
}

/* ---------- About / Features Section ---------- */
#ad-about-wrapper {
  background-color: var(--swap-light-bg) !important;
  padding: 56px 0;
}

/* Feature cards */
#ad-about-wrapper .card,
#ad-about-wrapper .feature-box {
  background-color: #ffffff;
  border: 1px solid var(--swap-border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 61, 87, 0.06);
}

/* Feature titles */
#ad-about-wrapper h3 {
  color: var(--swap-dark-blue);
  font-weight: 600;
}

/* Feature text */
#ad-about-wrapper p {
  color: #475569;
}

/* ---------- Call To Action Buttons ---------- */
.ad-btn {
  background: linear-gradient(
    90deg,
    var(--swap-green),
    var(--swap-blue)
  );
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 12px 22px;
  font-weight: 600;
  transition: all 0.25s ease;
}

.ad-btn:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

/* Secondary CTA (if available) */
.ad-btn-outline {
  background-color: #ffffff;
  color: var(--swap-dark-blue);
  border: 1px solid var(--swap-border);
  border-radius: 8px;
}

/* ---------- Signup / Invite Section ---------- */
#ad-signup,
.ad-signup-wrapper {
  background-color: #ffffff;
  border-top: 1px solid var(--swap-border);
  padding: 56px 0;
}

/* Form fields */
#ad-signup input,
#ad-signup select {
  background-color: #ffffff;
  border: 1px solid var(--swap-border);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--swap-text);
}

#ad-signup input:focus,
#ad-signup select:focus {
  border-color: var(--swap-green);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
  outline: none;
}

/* ---------- Footer ---------- */
#ad-footer {
  background-color: #ffffff;
  border-top: 1px solid var(--swap-border);
  color: #64748b;
  padding: 24px 0;
}

/* Footer links */
#ad-footer a {
  color: var(--swap-blue);
  text-decoration: none;
}

#ad-footer a:hover {
  text-decoration: underline;
}