/* Landing-wide visual language derived from the public hero. */
:root {
    --hero-ink: #020a14;
    --hero-surface: #091827;
    --hero-surface-raised: #0c2230;
    --hero-text: #effff8;
    --hero-muted: #9ab8bb;
    --hero-mint: #82f4bf;
    --hero-emerald: #37d5aa;
    --hero-line: rgba(145, 242, 198, .25);
    --hero-glow: rgba(40, 207, 153, .22);
    --hero-ease: cubic-bezier(.23, 1, .32, 1);
}

.sx-public {
    color: var(--hero-text);
    font-family: "Manrope", "Plus Jakarta Sans", system-ui, sans-serif;
    background: var(--hero-ink);
}

/* Navigation stays visually connected to the opening hero. */
.sx-public #main-nav .glass-nav {
    border-color: rgba(145, 242, 198, .17) !important;
    background: linear-gradient(120deg, rgba(3, 13, 24, .9), rgba(7, 30, 37, .78)) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(239, 255, 248, .06) !important;
    backdrop-filter: blur(18px);
}

.sx-public #main-nav a,
.sx-public #main-nav button {
    font-family: "Manrope", sans-serif;
}

.sx-public #main-nav a {
    color: #a9c5c4;
    transition: color 180ms ease, letter-spacing 180ms ease;
}

.sx-public #main-nav a:hover,
.sx-public #main-nav a:focus-visible { color: var(--hero-text); }

.sx-public #main-nav button[class*="bg-gradient"] {
    background: linear-gradient(110deg, #abffd5, #59ebb0 52%, #28cf99) !important;
    color: #042a22 !important;
    box-shadow: 0 10px 26px rgba(40, 207, 153, .22) !important;
}

/* Shared editorial hierarchy: the hero's strong display face and soft supporting copy. */
.sx-public .atlas-section-heading h2,
.sx-public .atlas-network h2,
.sx-public .atlas-journey h2,
.sx-public .atlas-history h2,
.sx-public .atlas-testimonials h2,
.sx-public .atlas-footer h3,
.sx-public .atlas-footer strong,
.sx-public .atlas-benefits h3,
.sx-public .atlas-history-heading h2 {
    color: var(--hero-text);
    font-family: "Manrope", "Plus Jakarta Sans", sans-serif;
    font-weight: 800;
    letter-spacing: -.055em;
    line-height: 1.02;
}

body.sx-public #commercial-title span,
body.sx-public #atlas-network h2 span,
body.sx-public #guide-atlas h2 span,
body.sx-public #history-atlas h2 span,
body.sx-public #testimonials-atlas h2 span {
    display: inline !important;
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    color: #63e5ae !important;
    -webkit-text-fill-color: #63e5ae !important;
    filter: none !important;
}

.sx-public .atlas-kicker,
.sx-public .atlas-section-heading > p {
    color: var(--hero-mint);
    font-family: "Manrope", sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .18em;
}

.sx-public .atlas-lead,
.sx-public .atlas-section-heading > div,
.sx-public .atlas-benefits p,
.sx-public .atlas-footer p,
.sx-public .atlas-quote blockquote,
.sx-public .atlas-operation,
.sx-public .atlas-wallet,
.sx-public .atlas-wallet-heading {
    color: var(--hero-muted);
    font-family: "Manrope", sans-serif;
    font-weight: 500;
}

/* Hero-derived navy surfaces keep the long-form sections visually continuous. */
.sx-public #atlas-landing,
.sx-public #guide-atlas,
.sx-public #history-atlas,
.sx-public #testimonials-atlas,
.sx-public .atlas-footer {
    background-color: var(--hero-ink) !important;
}

.sx-public #guide-atlas,
.sx-public #history-atlas,
.sx-public #testimonials-atlas {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(ellipse 58% 48% at 85% 20%, rgba(21, 181, 145, .11), transparent 68%),
        radial-gradient(ellipse 48% 46% at 12% 100%, rgba(17, 117, 131, .11), transparent 72%),
        linear-gradient(145deg, #020a14 0%, #061924 55%, #03131b 100%) !important;
}

.sx-public #guide-atlas::before,
.sx-public #history-atlas::before,
.sx-public #testimonials-atlas::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .42;
    background:
        radial-gradient(circle at 13% 24%, rgba(130, 244, 191, .44) 0 1px, transparent 1.6px),
        radial-gradient(circle at 86% 68%, rgba(55, 213, 170, .36) 0 1px, transparent 1.6px);
    background-size: 84px 84px, 112px 112px;
    mask-image: linear-gradient(to bottom, transparent, #000 17%, #000 83%, transparent);
}

.sx-public #atlas-network {
    background-color: var(--hero-ink) !important;
}

/* A single surface recipe for informative components. */
.sx-public .atlas-pillars > div,
.sx-public .atlas-benefits article,
.sx-public .atlas-wallet-bar,
.sx-public .atlas-operations,
.sx-public .atlas-quote,
.sx-public .atlas-history-heading > span {
    border-color: var(--hero-line) !important;
    background:
        radial-gradient(ellipse at 0% 0%, rgba(102, 241, 190, .09), transparent 48%),
        linear-gradient(145deg, rgba(12, 34, 46, .93), rgba(4, 18, 29, .92)) !important;
    box-shadow: inset 0 1px 0 rgba(239, 255, 248, .06), 0 18px 38px rgba(0, 0, 0, .18) !important;
}

.sx-public .atlas-pillars i,
.sx-public .atlas-benefits > article > i,
.sx-public .atlas-step-icon,
.sx-public .atlas-status,
.sx-public .atlas-operation i {
    color: var(--hero-mint) !important;
}

.sx-public .atlas-steps li::before,
.sx-public .atlas-steps li::after,
.sx-public .atlas-operation--head {
    border-color: rgba(130, 244, 191, .18) !important;
}

.sx-public .atlas-operation--head {
    color: #bfe8dc !important;
    background: rgba(130, 244, 191, .055) !important;
    font-family: "Manrope", sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .13em;
}

.sx-public .atlas-operation {
    border-bottom-color: rgba(130, 244, 191, .1) !important;
}

.sx-public .atlas-quote {
    border-color: rgba(130, 244, 191, .22) !important;
}

.sx-public .atlas-quote blockquote { color: #e8fff6; }
.sx-public .atlas-quote cite,
.sx-public .atlas-footer-links a,
.sx-public .atlas-footer-links > span { color: #9dbdbe; }

.sx-public .atlas-footer {
    border-top: 1px solid rgba(130, 244, 191, .15);
    background:
        radial-gradient(ellipse 42% 80% at 92% 0%, rgba(19, 170, 139, .12), transparent 72%),
        linear-gradient(160deg, #020a14, #061922) !important;
}

.sx-public .atlas-footer-brand strong { color: var(--hero-text); }
.sx-public .atlas-footer-brand small { color: var(--hero-mint); }
.sx-public .atlas-footer-links a { transition: color 180ms ease, transform 180ms var(--hero-ease); }
.sx-public .atlas-footer-links a:hover { color: var(--hero-mint); transform: translateX(3px); }

/* Primary actions receive the hero's bright but measured treatment. */
.sx-public .atlas-whatsapp,
.sx-public .availability-card__action {
    background: linear-gradient(110deg, #abffd5, #59ebb0 52%, #28cf99) !important;
    color: #042a22 !important;
    border-color: rgba(192, 255, 223, .65) !important;
    box-shadow: 0 10px 28px rgba(40, 207, 153, .24), inset 0 1px 0 rgba(239, 255, 248, .78) !important;
    font-family: "Manrope", sans-serif;
    font-weight: 800;
    transition: transform 180ms var(--hero-ease), box-shadow 180ms ease, filter 180ms ease;
}

.sx-public .availability-card,
.sx-public .availability-card__title,
.sx-public .availability-card__code,
.sx-public .availability-card__status,
.sx-public .availability-card__action {
    font-family: "Manrope", "Plus Jakarta Sans", sans-serif;
}

.sx-public .availability-card__title {
    font-weight: 800;
    letter-spacing: -.045em;
}

.sx-public .availability-card__code,
.sx-public .availability-card__status {
    font-weight: 700;
    letter-spacing: .08em;
}

@media (hover: hover) and (pointer: fine) {
    .sx-public .atlas-pillars > div,
    .sx-public .atlas-benefits article,
    .sx-public .atlas-quote,
    .sx-public .availability-card {
        transition: transform 220ms var(--hero-ease), border-color 220ms ease, box-shadow 220ms ease;
    }

    .sx-public .atlas-pillars > div:hover,
    .sx-public .atlas-benefits article:hover,
    .sx-public .atlas-quote:hover {
        transform: translateY(-4px);
        border-color: rgba(130, 244, 191, .46) !important;
        box-shadow: inset 0 1px 0 rgba(239, 255, 248, .1), 0 20px 42px rgba(0, 0, 0, .24), 0 0 28px rgba(40, 207, 153, .11) !important;
    }

    .sx-public .atlas-whatsapp:hover,
    .sx-public .availability-card__action:hover {
        transform: translateY(-2px);
        box-shadow: 0 15px 32px rgba(40, 207, 153, .34), inset 0 1px 0 rgba(239, 255, 248, .85) !important;
        filter: brightness(1.05);
    }
}

.sx-public .atlas-whatsapp:active,
.sx-public .availability-card:active,
.sx-public .availability-card__action:active,
.sx-public #main-nav button:active { transform: scale(.97); }

.sx-public :focus-visible {
    outline: 2px solid var(--hero-mint);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .sx-public .atlas-footer-links a,
    .sx-public .atlas-pillars > div,
    .sx-public .atlas-benefits article,
    .sx-public .atlas-quote,
    .sx-public .availability-card,
    .sx-public .atlas-whatsapp,
    .sx-public .availability-card__action { transition: none !important; }
}