/*
 * SolanaBlender — Shared Informational Pages Design
 * Version 1.0 — October 2026
 *
 * Applies to How It Works, Pricing, FAQ and Blog.
 * Does not affect the homepage or transaction engine.
 */

:root {
  --sb-bg: #080d18;
  --sb-panel: #111b2b;
  --sb-panel-soft: #152236;
  --sb-text: #edf4fa;
  --sb-muted: #a5b5c7;
  --sb-accent: #00e6a0;
  --sb-border: rgba(135, 170, 195, .18);
  --sb-radius: 16px;
}

html {
  color-scheme: dark;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: 'DM Sans', Arial, sans-serif !important;
  font-size: 16px;
  line-height: 1.65;
  color: var(--sb-text);
  background:
    radial-gradient(
      ellipse at 50% 0%,
      rgba(0, 230, 160, .065),
      transparent 55%
    ),
    var(--sb-bg);
  background-attachment: fixed;
}

*, *::before, *::after {
  box-sizing: border-box;
}

h1, h2, h3, h4 {
  font-family: 'DM Sans', Arial, sans-serif;
  letter-spacing: -.025em;
  line-height: 1.25;
}

h1 {
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  font-weight: 800;
}

h2 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
}

p {
  line-height: 1.75;
}

a {
  color: var(--sb-accent);
}

a:hover {
  color: #72ffd1;
}

/* Navigation */

body > header {
  background: rgba(8, 13, 24, .96) !important;
  border-bottom: 1px solid var(--sb-border);
  min-height: 72px;
}

body > header nav a {
  color: var(--sb-muted);
  font-weight: 600;
  transition: color .2s ease;
}

body > header nav a:hover {
  color: var(--sb-accent);
}

body > header .brand {
  color: var(--sb-text);
  font-weight: 800;
}

/* Main content */

main {
  width: min(100%, 1120px);
  margin-inline: auto;
}

main p,
main li {
  color: var(--sb-muted);
}

/* Cards */

.card,
.blog-entry,
.step,
.qa,
.faq details,
details {
  background: var(--sb-panel);
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius);
}

.blog-entry,
.card {
  transition:
    border-color .2s ease,
    transform .2s ease;
}

.blog-entry:hover,
.card:hover {
  border-color: rgba(0, 230, 160, .35);
}

/* Buttons */

.button,
.btn,
.cta a,
a.button,
button {
  font-family: 'DM Sans', Arial, sans-serif;
}

.button,
.btn-primary,
a.button {
  border-radius: 10px;
}

/* Footer */

body > footer {
  background: #080d18;
  border-top: 1px solid var(--sb-border);
  color: var(--sb-muted);
}

body > footer a {
  color: var(--sb-muted);
}

body > footer a:hover {
  color: var(--sb-accent);
}

/* Mobile */

@media (max-width: 768px) {
  body > header {
    padding: 1rem !important;
  }

  main {
    width: 100%;
    padding-inline: 1.25rem;
  }

  h1 {
    font-size: 2rem;
  }

  .blog-entry,
  .card {
    padding: 1.4rem;
  }
}

/* =====================================================
   SOLANABLENDER — PROFESSIONAL BUTTON DESIGN V2
   ===================================================== */

a.button,
button.button,
.btn-primary,
a.btn-primary,
a.cta,
button.cta,
.cta a:not(.secondary):not(.btn-ghost),
a.primary,
button.primary {
    background: #00e6a0 !important;
    background-image: none !important;
    color: #07120f !important;
    border: 1px solid #00e6a0 !important;
    border-radius: 10px !important;
    font-family: 'DM Sans', Arial, sans-serif !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition:
        background-color .2s ease,
        border-color .2s ease,
        transform .2s ease !important;
}

a.button:hover,
button.button:hover,
.btn-primary:hover,
a.btn-primary:hover,
a.cta:hover,
button.cta:hover,
.cta a:not(.secondary):not(.btn-ghost):hover,
a.primary:hover,
button.primary:hover {
    background: #4af5bd !important;
    background-image: none !important;
    border-color: #4af5bd !important;
    color: #07120f !important;
    transform: translateY(-1px);
}

/* Secondary buttons */

a.secondary,
button.secondary,
.btn-ghost,
a.btn-ghost {
    background: #152236 !important;
    background-image: none !important;
    color: #eaf4fa !important;
    border: 1px solid rgba(135,170,195,.3) !important;
    box-shadow: none !important;
}

a.secondary:hover,
button.secondary:hover,
.btn-ghost:hover {
    background: #1c3049 !important;
    color: #ffffff !important;
}


/* =====================================================
   SOLANABLENDER — UNIFIED BUTTONS V3
   Remove legacy rainbow gradients from CTAs
   ===================================================== */

a.button,
button.button,
a.large-button,
button.large-button,
a.cta,
button.cta,
a.btn-primary,
button.btn-primary,
.buttons .primary,
a.primary,
button.primary,
.cta a:not(.secondary):not(.btn-ghost) {
    background: #00e6a0 !important;
    background-image: none !important;
    color: #07120f !important;
    border: 1px solid #00e6a0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    transition:
        background-color .2s ease,
        transform .2s ease !important;
}

a.button:hover,
button.button:hover,
a.large-button:hover,
button.large-button:hover,
a.cta:hover,
button.cta:hover,
a.btn-primary:hover,
button.btn-primary:hover,
.buttons .primary:hover,
a.primary:hover,
button.primary:hover,
.cta a:not(.secondary):not(.btn-ghost):hover {
    background: #4af5bd !important;
    background-image: none !important;
    color: #07120f !important;
    border-color: #4af5bd !important;
    transform: translateY(-1px);
}

/* Keep secondary actions understated */

a.secondary,
button.secondary,
.btn-ghost,
a.btn-ghost {
    background: #152236 !important;
    background-image: none !important;
    color: #eaf4fa !important;
    border: 1px solid rgba(135,170,195,.3) !important;
    box-shadow: none !important;
}


/* =====================================================
   SOLANABLENDER — UNIFIED BUTTONS V3
   Remove legacy rainbow gradients from CTAs
   ===================================================== */

a.button,
button.button,
a.large-button,
button.large-button,
a.cta,
button.cta,
a.btn-primary,
button.btn-primary,
.buttons .primary,
a.primary,
button.primary,
.cta a:not(.secondary):not(.btn-ghost) {
    background: #00e6a0 !important;
    background-image: none !important;
    color: #07120f !important;
    border: 1px solid #00e6a0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    transition:
        background-color .2s ease,
        transform .2s ease !important;
}

a.button:hover,
button.button:hover,
a.large-button:hover,
button.large-button:hover,
a.cta:hover,
button.cta:hover,
a.btn-primary:hover,
button.btn-primary:hover,
.buttons .primary:hover,
a.primary:hover,
button.primary:hover,
.cta a:not(.secondary):not(.btn-ghost):hover {
    background: #4af5bd !important;
    background-image: none !important;
    color: #07120f !important;
    border-color: #4af5bd !important;
    transform: translateY(-1px);
}

/* Keep secondary actions understated */

a.secondary,
button.secondary,
.btn-ghost,
a.btn-ghost {
    background: #152236 !important;
    background-image: none !important;
    color: #eaf4fa !important;
    border: 1px solid rgba(135,170,195,.3) !important;
    box-shadow: none !important;
}


/* =====================================================
   SOLANABLENDER — UNIFIED SITE NAVIGATION V5
   ===================================================== */

body > header.sb-unified-header {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    width: 100% !important;
    min-height: 76px !important;
    padding: 14px 28px !important;
    background: #080d18 !important;
    border-bottom: 1px solid rgba(135,170,195,.18) !important;
    z-index: 1000 !important;
}

.sb-unified-header .sb-unified-brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    color: #edf4fa !important;
    font-size: 1.3rem !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    white-space: nowrap;
}

.sb-unified-header .sb-unified-brand img {
    width: 38px !important;
    height: 38px !important;
    object-fit: contain;
}

.sb-unified-header .sb-unified-nav {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

.sb-unified-header .sb-unified-nav a {
    display: inline-block;
    padding: 8px 9px;
    color: #a5b5c7 !important;
    font-size: .92rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-radius: 7px;
    transition: color .2s ease, background .2s ease;
}

.sb-unified-header .sb-unified-nav a:hover {
    color: #00e6a0 !important;
    background: rgba(0,230,160,.07);
}

.sb-unified-header .sb-unified-nav a[aria-current="page"] {
    color: #00e6a0 !important;
}

.sb-unified-header .sb-support-link {
    border: 1px solid rgba(0,230,160,.5);
    color: #00e6a0 !important;
}

.sb-unified-header .sb-menu-button {
    display: none !important;
    background: transparent !important;
    background-image: none !important;
    color: #00e6a0 !important;
    border: 1px solid rgba(0,230,160,.6) !important;
    border-radius: 8px !important;
    font-size: 22px !important;
    line-height: 1 !important;
    padding: 9px 12px !important;
    cursor: pointer;
}

@media (max-width: 1250px) {

    body > header.sb-unified-header {
        padding: 14px 20px !important;
    }

    .sb-unified-header .sb-menu-button {
        display: inline-block !important;
        margin-left: auto;
    }

    .sb-unified-header .sb-unified-nav {
        display: none !important;
        width: 100% !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 4px !important;
        padding: 12px 0 !important;
    }

    .sb-unified-header .sb-unified-nav.sb-open {
        display: flex !important;
    }

    .sb-unified-header .sb-unified-nav a {
        display: block !important;
        padding: 12px 14px !important;
        font-size: 1rem !important;
    }
}

@media (max-width: 480px) {

    .sb-unified-header .sb-unified-brand {
        font-size: 1.08rem !important;
    }

    .sb-unified-header .sb-unified-brand img {
        width: 32px !important;
        height: 32px !important;
    }
}