.modern-theme {
    --modern-ink: #201a39;
    --modern-muted: #5e5870;
    --modern-surface: #fff;
    --modern-bg: #f8f7fc;
    --modern-line: #e4dff0;
    --modern-accent: #5838bd;
    --modern-tint: #eee8ff;
    --bs-primary: #5838bd;
    --bs-primary-rgb: 88, 56, 189;
    --bs-link-color-rgb: 88, 56, 189;
    --bs-link-hover-color-rgb: 67, 43, 150;
    color: var(--modern-ink);
    background-color: var(--modern-bg);
}

[data-bs-theme="dark"] .modern-theme {
    --modern-ink: #f3efff;
    --modern-muted: #c5bdd7;
    --modern-surface: #211b32;
    --modern-bg: #171323;
    --modern-line: #3e3453;
    --modern-accent: #c1adff;
    --modern-tint: #34274e;
    --bs-primary-rgb: 193, 173, 255;
    --bs-link-color-rgb: 193, 173, 255;
    --bs-link-hover-color-rgb: 222, 209, 255;
}

.modern-theme .header-menu {
    position: relative;
    background-color: var(--modern-surface);
    border-bottom: 1px solid var(--modern-line);
}

.modern-theme .header-menu .navbar {
    padding-block: .75rem;
}

.modern-theme .header-menu .navbar-brand img {
    display: block;
    max-width: clamp(85px, 33vw, 170px);
    object-fit: contain;
}

.modern-theme .header-menu .text-dark.nav-link {
    color: var(--modern-ink) !important;
}

.modern-theme .header-menu .text-dark.nav-link:hover {
    color: var(--modern-accent) !important;
}

.modern-theme .modern-nav-control,
.modern-theme .header-menu .btn-outline-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    color: var(--modern-accent);
    background: var(--modern-tint);
    border: 1px solid var(--modern-line);
}

.modern-theme .btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #5838bd;
    --bs-btn-border-color: #5838bd;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #432b96;
    --bs-btn-hover-border-color: #432b96;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #38227e;
    --bs-btn-active-border-color: #38227e;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #5838bd;
    --bs-btn-disabled-border-color: #5838bd;
    --bs-btn-focus-shadow-rgb: 139, 110, 241;
    border-radius: .75rem;
}

.modern-theme :focus-visible {
    outline: 2px solid var(--modern-accent);
    outline-offset: 3px;
}

.modern-theme .modern-hero {
    padding-block: clamp(3rem, 8vw, 7.5rem);
    border-bottom: 1px solid var(--modern-line);
    background: radial-gradient(ellipse at 85% 25%, var(--modern-tint), transparent 58%), var(--modern-bg);
}

.modern-hero-grid {
    display: grid;
    gap: clamp(2rem, 6vw, 6rem);
    align-items: center;
}

.modern-hero-copy {
    min-width: 0;
}

.modern-hero h1 {
    margin: 0;
    max-width: 18ch;
    font-size: clamp(2.35rem, 5vw, 4.75rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -.055em;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

.modern-hero h1 span {
    color: var(--modern-accent);
}

.modern-hero p {
    max-width: 47ch;
    margin-block: 1.25rem 0;
    color: var(--modern-muted);
    font-size: clamp(1rem, 1.7vw, 1.2rem);
    line-height: 1.65;
}

.modern-hero p:empty {
    display: none;
}

.modern-hero .btn {
    margin-top: 1.75rem;
    padding: .8rem 1.25rem;
    font-weight: 650;
    box-shadow: 0 10px 24px rgb(57 33 129 / 25%);
}

.modern-hero-art {
    display: grid;
    place-items: center;
    min-width: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: clamp(1.25rem, 3vw, 2rem);
    background: radial-gradient(ellipse at 90% 15%, #4c3688, transparent 66%), #15122b;
    border: 1px solid #6b559c;
    box-shadow: 0 22px 54px rgb(39 21 90 / 20%);
}

.modern-hero-art svg {
    width: 94%;
    height: auto;
}

.modern-hero-art img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.modern-theme .modern-landing > section:not(.modern-hero) {
    padding-block: clamp(2.75rem, 6vw, 5rem) !important;
}

.modern-theme .package-list h2.btn,
.modern-theme .how-it-work h2.btn,
.modern-theme .section-header .above-heading {
    border: 0;
    border-radius: 999px;
    padding: .5rem .9rem;
    background: var(--modern-tint);
    color: var(--modern-accent) !important;
    font-weight: 700;
    letter-spacing: .05em;
    cursor: default;
}

.modern-theme .package-list .tab-content .tab-item,
.modern-theme .why-choose-us .icon-box,
.modern-theme .counts-area .count-box,
.modern-theme .order-form .card {
    background: var(--modern-surface);
    border: 1px solid var(--modern-line);
    border-radius: 1.25rem;
    box-shadow: 0 12px 32px rgb(39 21 90 / 7%);
}

.modern-theme .package-btn-list .buy-package-item .icon-square,
.modern-theme .why-choose-us .icon-box i {
    color: var(--modern-accent);
    background: var(--modern-tint);
}

.modern-theme .what-we-offer {
    background: radial-gradient(ellipse at 100% 0%, #473273, transparent 65%), #1b1532;
}

.modern-theme .footer {
    border-top: 1px solid var(--modern-line);
}

@media (min-width: 992px) {
    .modern-hero-grid {
        grid-template-columns: 1.12fr 1fr;
    }
}

@media (max-width: 575.98px) {
    .modern-theme .header-menu .navbar-brand {
        margin-inline-end: .25rem;
    }

    .modern-theme .header-menu .navbar-toggler {
        min-width: 40px;
        min-height: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .modern-theme [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Folofan storefront */
.modern-theme:has(.folofan-home) {
    --modern-bg: #0b1024;
    --modern-surface: #121a35;
    --modern-ink: #fbf8ff;
    --modern-muted: #ddd8ee;
    --modern-accent: #e28bff;
    --modern-tint: #2b1b48;
    --modern-line: #414364;
    --bs-body-color: #fbf8ff;
    --bs-body-color-rgb: 251, 248, 255;
    --bs-body-bg: #0b1024;
    --bs-body-bg-rgb: 11, 16, 36;
    --bs-tertiary-bg: #151b37;
    --bs-tertiary-bg-rgb: 21, 27, 55;
    --bs-emphasis-color: #fff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: #ddd8ee;
}

.modern-theme:has(.folofan-home) .header-menu { background: #0b1024; color-scheme: dark; }
.modern-theme:has(.folofan-home) .navbar-toggler-icon { filter: brightness(0) invert(1); }
.modern-theme:has(.folofan-home) .offcanvas { --bs-offcanvas-bg: #121a35; --bs-offcanvas-color: #fff; }
.modern-theme:has(.folofan-home) .offcanvas .btn-close { filter: invert(1); }
.modern-theme:has(.folofan-home) .header-menu .dropdown-menu { --bs-dropdown-link-color: #fff; --bs-dropdown-link-hover-color: #fff; --bs-dropdown-link-hover-bg: #332653; }
.folofan-home .modern-hero { background: #0b1024; padding-block: clamp(1.6rem, 4vw, 3rem) .5rem; border: 0; }
.folofan-hero-grid { display: grid; align-items: center; gap: 1rem; }
.folofan-hero-copy { position: relative; z-index: 1; }
.folofan-kicker { display: inline-block; border: 1px solid #bb61f4; border-radius: 2rem; padding: .3rem .75rem; margin-bottom: .75rem; font-weight: 650; font-size: .87rem; }
.folofan-home .modern-hero h1 { max-width: 19ch; font-size: clamp(2.3rem, 4.35vw, 4.25rem); }
.folofan-home .modern-hero h1 strong { color: #ed8aff; background: linear-gradient(90deg,#a876ff,#ff91eb); background-clip: text; -webkit-text-fill-color: transparent; }
.folofan-home .modern-hero p { color: #eee9fa; margin-block: .85rem 0; }
.folofan-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.35rem; }
.folofan-home .btn-primary, .folofan-home .folofan-secondary { border: 1px solid #cc99fa; color: #fff; padding: .7rem 1rem; border-radius: .7rem; font-weight: 700; }
.folofan-home .btn-primary { background: linear-gradient(105deg,#9524d5,#5730de); }
.folofan-home .btn-primary:hover { background: #7023c2; }
.folofan-home .modern-hero .btn { margin: 0; }
.folofan-home .folofan-secondary:hover { background: #2b1b48; color: #fff; }
.folofan-visual { position: relative; overflow: hidden; aspect-ratio: 590 / 440; width: 100%; background: #0b1024; }
.folofan-visual img { position: absolute; max-width: none; width: 203.22%; height: auto; left: -95.76%; top: -13.18%; }
.folofan-visual::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 26px 12px #0b1024; pointer-events: none; }
.modern-theme .folofan-home > .package-list { padding-block: 1.1rem 1.5rem !important; }
.folofan-networks { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%, 185px),1fr)); gap: .8rem; }
.folofan-network { display: flex; flex-direction: column; padding: 1rem; border-radius: 1rem; border: 1px solid var(--network-edge,#737697); background: var(--network-bg,#181c31); color: #fff; }
.folofan-network[data-network="instagram"] { --network-edge: #f16dba; --network-bg: linear-gradient(130deg,#a74238,#8b2867 55%,#481b75); }
.folofan-network[data-network="tiktok"] { --network-edge: #22a7b0; --network-bg: linear-gradient(130deg,#153844,#101b2e); }
.folofan-network[data-network="youtube"] { --network-edge: #f36982; --network-bg: linear-gradient(130deg,#ab1831,#421423); }
.folofan-network[data-network="facebook"] { --network-edge: #499cff; --network-bg: linear-gradient(130deg,#1349a8,#102649); }
.folofan-network img { object-fit: contain; margin-bottom: .55rem; }
.folofan-network h2 { font-size: 1.22rem; margin: 0; font-weight: 800; }
.folofan-network p { margin: .35rem 0 .7rem; overflow-wrap: anywhere; font-size: .88rem; }
.folofan-network details { margin-top: auto; }
.folofan-network summary { display: flex; align-items: center; justify-content: space-between; gap: .5rem; cursor: pointer; padding: .5rem .7rem; border: 1px solid var(--network-edge,#737697); border-radius: .55rem; background: #ffffff13; font-weight: 650; font-size: .85rem; }
.folofan-network ul { margin: .65rem 0 0; padding-inline-start: 1rem; }
.folofan-network a { color: white; text-decoration: underline !important; }
.folofan-benefits { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; padding-block: 1.45rem 0; }
.folofan-benefits span { display: flex; align-items: center; gap: .55rem; font-size: .88rem; font-weight: 650; }
.folofan-benefits i { color: #ed92ff; font-size: 1.45rem; }
.folofan-home .how-it-work { background: #151a36 !important; }
.folofan-home .how-it-work .single_work_step > div { border: 1px solid #45446a; border-radius: .9rem; background: #1b2244; padding: 1rem; height: 100%; }
.folofan-home .how-it-work .row.p-5 { padding: 1.25rem 0 0 !important; row-gap: .8rem; }
.folofan-home .how-it-work .arrow { display: none; }
.folofan-home .how-it-work .step-icon i { color: #e28bff; }
.folofan-home .reviews { background: #0b1024 !important; }
.folofan-final { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: clamp(1rem,3vw,2rem); border: 1px solid #bc78ee; border-radius: 1rem; background: linear-gradient(115deg,#3e1b73,#7430ab); box-shadow: inset 0 8px 28px #d992f749; }
.folofan-final h2 { margin: 0 0 .25rem; font-weight: 800; }
.folofan-final p { margin: 0; }
.folofan-final .btn-primary { color: #301052; background: #fff; }
.folofan-final .btn-primary:hover { color: #301052; background: #f0daff; }
@media (min-width: 992px) {
    .folofan-hero-grid { grid-template-columns: 1fr 1.12fr; }
    .folofan-benefits { grid-template-columns: repeat(4,minmax(0,1fr)); }
}

/* The home navigation stays dark independently of the saved checkout theme. */
.folofan-header { color: #fff; background: #0b1024 !important; border-bottom: 1px solid #292c4a; }
.folofan-nav { min-height: 4.25rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem 1rem; padding-block: .55rem; }
.folofan-nav ul { display: flex; flex-wrap: wrap; align-items: center; list-style: none; gap: .25rem clamp(.7rem, 2.1vw, 1.75rem); padding: 0; margin: 0; }
.folofan-nav a { color: #fff !important; }
.folofan-nav ul a { display: block; padding: .45rem 0; font-size: .88rem; border-bottom: 2px solid transparent; }
.folofan-nav ul a:hover, .folofan-nav [aria-current="page"] { border-color: #cf67ff; }
.folofan-brand { display: inline-flex; align-items: center; gap: .45rem; font-size: 1.55rem; font-weight: 850; letter-spacing: -.05em; }
.folofan-brand svg { width: 2rem; height: 2rem; }
.folofan-track { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .75rem; background: #6630c5; border: 1px solid #ad74ff; border-radius: .6rem; font-size: .85rem; font-weight: 650; }
.folofan-track:hover { background: #7b3ae3; }
.modern-theme .folofan-home .modern-hero .folofan-secondary { background: #141832 !important; color: #fff !important; }
.modern-theme .folofan-home .modern-hero .folofan-secondary:hover { background: #30204b !important; }
.modern-theme .folofan-home > .package-list { padding-top: .25rem !important; }
.folofan-network { min-width: 0; }
.folofan-network p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.folofan-network[data-network="other"] { background: #171e36; }
.folofan-steps { color: #fff; background: #151a36; }
.folofan-steps h2 { text-align: center; font-weight: 800; letter-spacing: -.04em; margin-bottom: 1.2rem; }
.folofan-steps strong { color: #ed92ff; }
.folofan-steps ol { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%, 205px),1fr)); list-style: none; gap: 1rem; padding: 0; margin: 0; }
.folofan-steps li { padding: 1rem; border: 1px solid #414566; border-radius: .9rem; background: #202648; }
.folofan-steps li > i { display: block; text-align: center; font-size: 1.9rem; color: #cc70ff; }
.folofan-steps li div { display: flex; align-items: center; gap: .5rem; }
.folofan-steps b { display: grid; place-items: center; flex: 0 0 1.6rem; height: 1.6rem; border-radius: 50%; background: #7336cf; font-size: .82rem; }
.folofan-steps h3 { margin: 0; font-size: .95rem; font-weight: 750; }
.folofan-steps p { margin: .45rem 0 0; color: #e2ddf4; font-size: .87rem; }
.folofan-review-heading h2 { font-weight: 800; letter-spacing: -.035em; }
.folofan-review-heading p { color: #eee9fa; }
.folofan-review-heading p span { color: #ffcf49; }
.folofan-home #reviews-content > div > div { background: #1b2244 !important; border: 1px solid #414566; color: #fff; }
.folofan-home .accordion-button { background: #1b2244; color: #fff; }
.folofan-home .accordion-button::after { filter: brightness(0) invert(1); }
@media (max-width: 767.98px) {
    .folofan-nav ul { order: 3; width: 100%; }
}