:root {
    --gold: #D4A017;
    --gold-lt: #F5C842;
    --black: #1A1A1A;
    --white: #FFFFFF;
    --cream: #FDF8F0;
    --gray: #6B6B6B;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--white);
    color: var(--black);
    overflow-x: hidden;
}

/* ─── NAVBAR ─────────────────────────────────────────── */
.navbar-soleil {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(212, 160, 23, .15);
    padding: 10px 0;
    transition: box-shadow .3s;
}

.navbar-soleil.scrolled {
    box-shadow: 0 4px 24px rgba(0, 0, 0, .08);
}

.nav-logo {
    height: 52px;
}

.nav-link-sol {
    font-weight: 500;
    font-size: .85rem;
    letter-spacing: .04em;
    color: var(--black) !important;
    text-transform: uppercase;
    padding: 6px 14px !important;
    transition: color .2s;
}

.nav-link-sol:hover {
    color: var(--gold) !important;
}

.btn-nav-cta {
    background: var(--gold);
    color: var(--white) !important;
    border-radius: 50px;
    padding: 8px 22px !important;
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: .05em;
    transition: background .2s, transform .2s;
}

.btn-nav-cta:hover {
    background: var(--gold-lt);
    transform: translateY(-1px);
}

/* ─── HERO ────────────────────────────────────────────── */
.hero {
    min-height: 100vh;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding-top: 80px;
}

/* Sunburst background */
.hero-sunburst {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(700px, 110vw);
    height: min(700px, 110vw);
    background: conic-gradient(from 0deg,
            transparent 0deg 10deg,
            rgba(212, 160, 23, .06) 10deg 20deg,
            transparent 20deg 30deg,
            rgba(212, 160, 23, .06) 30deg 40deg,
            transparent 40deg 50deg,
            rgba(212, 160, 23, .06) 50deg 60deg,
            transparent 60deg 70deg,
            rgba(212, 160, 23, .06) 70deg 80deg,
            transparent 80deg 90deg,
            rgba(212, 160, 23, .06) 90deg 100deg,
            transparent 100deg 110deg,
            rgba(212, 160, 23, .06) 110deg 120deg,
            transparent 120deg 130deg,
            rgba(212, 160, 23, .06) 130deg 140deg,
            transparent 140deg 150deg,
            rgba(212, 160, 23, .06) 150deg 160deg,
            transparent 160deg 170deg,
            rgba(212, 160, 23, .06) 170deg 180deg,
            transparent 180deg 190deg,
            rgba(212, 160, 23, .06) 190deg 200deg,
            transparent 200deg 210deg,
            rgba(212, 160, 23, .06) 210deg 220deg,
            transparent 220deg 230deg,
            rgba(212, 160, 23, .06) 230deg 240deg,
            transparent 240deg 250deg,
            rgba(212, 160, 23, .06) 250deg 260deg,
            transparent 260deg 270deg,
            rgba(212, 160, 23, .06) 270deg 280deg,
            transparent 280deg 290deg,
            rgba(212, 160, 23, .06) 290deg 300deg,
            transparent 300deg 310deg,
            rgba(212, 160, 23, .06) 310deg 320deg,
            transparent 320deg 330deg,
            rgba(212, 160, 23, .06) 330deg 340deg,
            transparent 340deg 350deg,
            rgba(212, 160, 23, .06) 350deg 360deg);
    border-radius: 50%;
    animation: rotateSun 40s linear infinite;
    pointer-events: none;
}

@keyframes rotateSun {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Gold particles */
.particle {
    position: absolute;
    border-radius: 50%;
    background: var(--gold-lt);
    pointer-events: none;
    animation: floatParticle linear infinite;
    opacity: 0;
}

@keyframes floatParticle {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0;
    }

    20% {
        opacity: .7;
    }

    80% {
        opacity: .4;
    }

    100% {
        transform: translateY(-120px) scale(0);
        opacity: 0;
    }
}

.hero-logo {
    width: min(450px, 88vw);
    animation: logoPulse 6s ease-in-out infinite;
    position: relative;
    z-index: 2;
}

@keyframes logoPulse {

    0%,
    100% {
        filter: drop-shadow(0 0 0px rgba(212, 160, 23, 0));
    }

    50% {
        filter: drop-shadow(0 0 18px rgba(212, 160, 23, .55));
    }
}

.hero-eyebrow {
    font-size: .75rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 600;
    animation: fadeUp .8s .2s both;
}

.hero-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.2rem, 6vw, 4rem);
    font-weight: 900;
    line-height: 1.1;
    color: var(--black);
    animation: fadeUp .8s .35s both;
}

.hero-title span {
    color: var(--gold);
}

.hero-tagline {
    font-size: clamp(.95rem, 2.2vw, 1.15rem);
    color: var(--gray);
    line-height: 1.7;
    max-width: 500px;
    animation: fadeUp .8s .5s both;
}

.hero-cta {
    animation: fadeUp .8s .65s both;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Buttons */
.btn-sol-primary {
    background: var(--black);
    color: var(--white);
    border: none;
    border-radius: 50px;
    padding: 14px 36px;
    font-weight: 600;
    font-size: .9rem;
    letter-spacing: .05em;
    transition: all .25s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-sol-primary:hover {
    background: var(--gold);
    color: var(--white);
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(212, 160, 23, .35);
}

.btn-sol-outline {
    background: transparent;
    color: var(--black);
    border: 2px solid var(--black);
    border-radius: 50px;
    padding: 12px 32px;
    font-weight: 600;
    font-size: .9rem;
    letter-spacing: .05em;
    transition: all .25s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-sol-outline:hover {
    background: var(--black);
    color: var(--white);
    transform: translateY(-3px);
}

.btn-whatsapp {
    background: #25D366;
    color: var(--white);
    border: none;
    border-radius: 50px;
    padding: 14px 36px;
    font-weight: 600;
    font-size: .95rem;
    letter-spacing: .04em;
    transition: all .25s;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.btn-whatsapp:hover {
    background: #1ebe5d;
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(37, 211, 102, .35);
}

.btn-gold {
    background: var(--gold);
    color: var(--white);
    border: none;
    border-radius: 50px;
    padding: 14px 36px;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .04em;
    transition: all .25s;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.btn-gold:hover {
    background: var(--gold-lt);
    color: var(--white);
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(212, 160, 23, .4);
}

/* Scroll indicator */
.scroll-indicator {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    animation: bounce 2s infinite;
}

.scroll-indicator span {
    font-size: .68rem;
    letter-spacing: .12em;
    color: var(--gray);
    text-transform: uppercase;
}

.scroll-indicator i {
    font-size: 1.2rem;
    color: var(--gold);
}

@keyframes bounce {

    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(6px);
    }
}

/* ─── SECTION COMMON ────────────────────────────────── */
section {
    padding: 90px 0;
}

.section-eyebrow {
    display: inline-block;
    font-size: .72rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 700;
    border-bottom: 2px solid var(--gold);
    padding-bottom: 4px;
    margin-bottom: 14px;
}

.section-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 700;
    color: var(--black);
    line-height: 1.2;
}

.section-title span {
    color: var(--gold);
}

.section-sub {
    color: var(--gray);
    font-size: 1rem;
    line-height: 1.7;
    max-width: 560px;
}

/* ─── BENEFITS SECTION ────────────────────────────────── */
.benefits-section {
    background: var(--cream);
}

.benefit-card {
    background: var(--white);
    border-radius: 20px;
    padding: 36px 30px;
    border: 1px solid rgba(212, 160, 23, .12);
    transition: all .3s;
    height: 100%;
}

.benefit-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .08);
    border-color: var(--gold);
}

.benefit-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(212, 160, 23, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: var(--gold);
    margin-bottom: 18px;
}

.benefit-card h5 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.15rem;
    margin-bottom: 10px;
}

.benefit-card p {
    color: var(--gray);
    font-size: .9rem;
    line-height: 1.6;
    margin: 0;
}

.cta-banner {
    background: var(--black);
    border-radius: 24px;
    padding: 40px 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.cta-banner p {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    color: var(--white);
    margin: 0;
    font-weight: 600;
}

.cta-banner p span {
    color: var(--gold-lt);
}

/* ─── AGENDA SECTION ───────────────────────────────── */
.agenda-section {
    background: var(--white);
}

.agenda-card {
    background: var(--black);
    color: var(--white);
    border-radius: 28px;
    padding: 60px 50px;
    position: relative;
    overflow: hidden;
}

.agenda-card::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 160, 23, .25), transparent 70%);
}

.agenda-label {
    font-size: .72rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold-lt);
    font-weight: 700;
    margin-bottom: 14px;
}

.agenda-card h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.9rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 18px;
}

.agenda-card p {
    color: rgba(255, 255, 255, .7);
    line-height: 1.7;
    margin-bottom: 32px;
}

.step-list {
    list-style: none;
    padding: 0;
    margin-bottom: 36px;
}

.step-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 14px;
    font-size: .92rem;
    color: rgba(255, 255, 255, .85);
}

.step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--white);
    font-weight: 700;
    font-size: .78rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ─── LOCATION SECTION ─────────────────────────────── */
.location-section {
    background: var(--cream);
}

.map-wrapper {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .1);
    border: 3px solid rgba(212, 160, 23, .2);
    height: 420px;
}

.map-wrapper iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.location-info {
    padding: 20px 0;
}

.location-info h4 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.3rem;
    margin-bottom: 14px;
}

.location-detail {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    font-size: .9rem;
    color: var(--gray);
}

.location-detail i {
    color: var(--gold);
    font-size: 1.1rem;
    margin-top: 2px;
    flex-shrink: 0;
}

/* ─── REFERRAL SECTION ─────────────────────────────── */
.referral-section {
    background: var(--white);
}

.referral-inner {
    background: linear-gradient(135deg, var(--gold) 0%, #b8860b 100%);
    border-radius: 28px;
    padding: 70px 50px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.referral-inner::before {
    content: '💰';
    position: absolute;
    font-size: 12rem;
    opacity: .06;
    top: -20px;
    right: -20px;
    line-height: 1;
    pointer-events: none;
}

.referral-inner h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    font-weight: 900;
    color: var(--white);
    line-height: 1.1;
    margin-bottom: 16px;
}

.referral-inner p {
    color: rgba(255, 255, 255, .85);
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 34px;
}

.referral-steps {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.r-step {
    background: rgba(255, 255, 255, .15);
    backdrop-filter: blur(4px);
    border-radius: 16px;
    padding: 24px 28px;
    max-width: 180px;
    text-align: center;
}

.r-step .r-icon {
    font-size: 2rem;
    margin-bottom: 8px;
}

.r-step p {
    color: var(--white);
    font-size: .85rem;
    margin: 0;
    font-weight: 500;
}

.btn-referral {
    background: var(--white);
    color: var(--gold);
    border: none;
    border-radius: 50px;
    padding: 16px 42px;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: .04em;
    transition: all .25s;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.btn-referral:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .2);
}

/* ─── REVIEWS SECTION ──────────────────────────────── */
.reviews-section {
    background: var(--cream);
}

.stars-big {
    font-size: 3rem;
    letter-spacing: .05em;
    line-height: 1;
    margin-bottom: 10px;
}

.rating-num {
    font-family: 'Playfair Display', serif;
    font-size: 5rem;
    font-weight: 900;
    color: var(--black);
    line-height: 1;
}

.rating-label {
    color: var(--gray);
    font-size: .88rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.review-card {
    background: var(--white);
    border-radius: 20px;
    padding: 28px 26px;
    border: 1px solid rgba(212, 160, 23, .15);
    height: 100%;
    transition: transform .3s, box-shadow .3s;
}

.review-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .07);
}

.review-stars {
    color: #FFB800;
    font-size: 1rem;
    letter-spacing: .05em;
    margin-bottom: 12px;
}

.review-text {
    font-size: .88rem;
    color: var(--gray);
    line-height: 1.65;
    margin-bottom: 16px;
    font-style: italic;
}

.review-author {
    font-weight: 700;
    font-size: .85rem;
    color: var(--black);
}

.review-date {
    font-size: .75rem;
    color: #aaa;
}

.google-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--white);
    border: 1px solid #e0e0e0;
    border-radius: 50px;
    padding: 10px 20px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--black);
}

.google-badge img {
    width: 20px;
}

/* ─── SOCIAL SECTION ───────────────────────────────── */
.social-section {
    background: var(--white);
}

.social-card {
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    border: 2px solid transparent;
    transition: all .3s;
    height: 100%;
    background: var(--cream);
}

.social-card:hover {
    transform: translateY(-8px);
    border-color: var(--gold);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .07);
}

.social-icon {
    font-size: 2.6rem;
    margin-bottom: 14px;
    display: block;
    transition: transform .3s;
}

.social-card:hover .social-icon {
    transform: scale(1.15);
}

.social-card h6 {
    font-weight: 700;
    margin-bottom: 6px;
    font-size: .95rem;
}

.social-card p {
    color: var(--gray);
    font-size: .82rem;
    margin: 0;
}

.social-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* ─── TIKTOK VIDEO SECTION ────────────────────────── */
.video-section {
    background: var(--cream);
}

.tiktok-wrapper {
    display: flex;
    justify-content: center;
}

.tiktok-wrapper blockquote {
    max-width: 605px;
    width: 100%;
}

/* ─── FOOTER ───────────────────────────────────────── */
footer {
    background: var(--black);
    color: var(--white);
    padding: 50px 0 30px;
}

.footer-logo {
    height: 48px;
    filter: brightness(10);
    opacity: .85;
    margin-bottom: 16px;
}

.footer-tagline {
    color: rgba(255, 255, 255, .5);
    font-size: .83rem;
    line-height: 1.6;
}

.footer-social a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, .7);
    font-size: 1rem;
    text-decoration: none;
    margin: 0 4px;
    transition: all .25s;
}

.footer-social a:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--white);
}

.footer-divider {
    border-color: rgba(255, 255, 255, .08);
    margin: 30px 0 18px;
}

.footer-copy {
    color: rgba(255, 255, 255, .3);
    font-size: .78rem;
    text-align: center;
}

/* ─── REVEAL ANIMATION ────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity .7s ease, transform .7s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ─── FLOATING WA BUTTON ────────────────────────────── */
.wa-float {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 900;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #25D366;
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(37, 211, 102, .4);
    animation: waPulse 2.5s infinite;
}

.wa-float:hover {
    background: #1ebe5d;
    color: var(--white);
}

@keyframes waPulse {

    0%,
    100% {
        box-shadow: 0 8px 24px rgba(37, 211, 102, .4);
    }

    50% {
        box-shadow: 0 8px 36px rgba(37, 211, 102, .7);
    }
}

/* ─── RESPONSIVE TWEAKS ──────────────────────────── */
@media (max-width: 991px) {
    .agenda-card {
        padding: 40px 30px;
    }

    .referral-inner {
        padding: 50px 30px;
    }

    .cta-banner {
        padding: 30px;
        text-align: center;
        justify-content: center;
    }
}

@media (max-width: 767px) {
    section {
        padding: 60px 0;
    }

    .hero {
        padding-top: 72px;
    }

    .hero-logo {
        width: 310px;
    }

    .cta-banner {
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}