:root {
    --incossify-950: #160021;
    --incossify-900: #250038;
    --incossify-850: #310249;
    --incossify-800: #43045f;
    --incossify-700: #65058b;
    --incossify-600: #8d0fb7;
    --incossify-500: #c02fe5;
    --incossify-blue: #168ee8;
    --incossify-cyan: #3ac7ff;
    --lavender: #eadcff;
    --ink: #24162a;
    --muted: #706775;
    --surface: #ffffff;
    --surface-soft: #f7f3fa;
    --border: rgba(91, 33, 111, 0.13);
    --shadow: 0 18px 45px rgba(39, 0, 59, 0.16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--ink);
    background:
        radial-gradient(circle at 15% 0%, rgba(192, 47, 229, 0.15), transparent 28rem),
        linear-gradient(180deg, #f3eafa 0, #fbf9fc 34rem, #f6f2f8 100%);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    line-height: 1.5;
    padding-bottom: 76px;
}

img { max-width: 100%; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.skip-link {
    position: fixed;
    left: 12px;
    top: -60px;
    z-index: 3000;
    background: #fff;
    color: var(--incossify-900);
    padding: 10px 14px;
    border-radius: 10px;
    font-weight: 800;
}
.skip-link:focus { top: 12px; }

.site-shell {
    width: min(100%, 760px);
    margin: 0 auto;
    overflow: hidden;
    background: var(--surface);
    box-shadow: 0 0 70px rgba(34, 0, 51, 0.12);
    min-height: 100vh;
}

.brand-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--incossify-950);
}
.brand-hero::after {
    content: "";
    position: absolute;
    inset: auto -15% -25% -15%;
    height: 48%;
    background: linear-gradient(180deg, transparent, rgba(18, 0, 27, 0.95));
    z-index: 1;
    pointer-events: none;
}
.brand-hero__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.brand-hero__overlay {
    position: absolute;
    z-index: 2;
    inset: auto 22px 24px;
    color: #fff;
    text-shadow: 0 2px 16px rgba(0,0,0,.28);
}
.brand-kicker,
.eyebrow {
    display: inline-block;
    color: var(--incossify-cyan);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.brand-hero h1 {
    margin: 7px 0 6px;
    font-size: clamp(1.8rem, 6vw, 3rem);
    line-height: 1.04;
    letter-spacing: -.035em;
}
.brand-hero p {
    margin: 0;
    max-width: 560px;
    font-size: .95rem;
    color: rgba(255,255,255,.9);
}
.hero-cta {
    display: inline-flex;
    margin-top: 15px;
    padding: 10px 16px;
    border-radius: 999px;
    background: #fff;
    color: var(--incossify-850);
    text-decoration: none;
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .05em;
    box-shadow: 0 10px 25px rgba(0,0,0,.2);
}

.trust-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(255,255,255,.08);
    border-bottom: 1px solid var(--border);
}
.trust-strip div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 7px;
    background: linear-gradient(180deg, #fff, #faf7fc);
    text-align: center;
}
.trust-strip strong {
    color: var(--incossify-700);
    font-size: 1.12rem;
}
.trust-strip span {
    color: var(--muted);
    font-size: .67rem;
    font-weight: 700;
}

.package-section { background: var(--surface); }
.package-section--second { margin-top: 24px; }
.package-flyer {
    display: block;
    width: 100%;
    height: auto;
}
.section-heading {
    padding: 17px 18px;
    color: #fff;
    background:
        linear-gradient(90deg, rgba(255,255,255,.08), transparent 45%),
        linear-gradient(135deg, var(--incossify-900), var(--incossify-700));
    text-align: center;
    font-size: clamp(1rem, 4vw, 1.28rem);
    font-weight: 950;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.section-heading--apex {
    background: linear-gradient(135deg, #21002f, #790a9b 70%, #168ee8);
}

.earning-card {
    padding: 22px 18px 28px;
    background: var(--surface);
}
.package-summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 17px;
}
.package-summary h2 {
    margin: 4px 0 0;
    color: var(--incossify-900);
    font-size: clamp(1.28rem, 5vw, 1.75rem);
    line-height: 1.15;
    letter-spacing: -.025em;
}
.package-badge {
    flex: 0 0 auto;
    margin-top: 3px;
    padding: 6px 9px;
    border: 1px solid rgba(22, 142, 232, .24);
    border-radius: 999px;
    background: rgba(22, 142, 232, .08);
    color: #0878ca;
    font-size: .62rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.package-badge--apex {
    border-color: rgba(192,47,229,.25);
    background: rgba(192,47,229,.09);
    color: var(--incossify-700);
}

.btn-incossify {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 51px;
    margin: 0 0 24px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--incossify-blue), #0667ba);
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .82rem;
    font-weight: 950;
    box-shadow: 0 12px 26px rgba(22, 142, 232, .26);
    transition: transform .2s ease, box-shadow .2s ease;
}
.btn-incossify--apex {
    background: linear-gradient(135deg, var(--incossify-700), var(--incossify-500));
    box-shadow: 0 12px 26px rgba(141, 15, 183, .25);
}
.btn-incossify:hover,
.btn-incossify:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(64, 0, 88, .25);
}
.btn-incossify:active { transform: scale(.99); }

.list-title {
    margin: 0 0 6px;
    color: var(--incossify-850);
    font-size: .78rem;
    font-weight: 950;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.list-title--spaced { margin-top: 24px; }
.earning-list {
    margin: 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
    list-style: none;
    box-shadow: 0 8px 26px rgba(43, 0, 65, .05);
}
.earning-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 13px;
    border-bottom: 1px solid rgba(86, 39, 99, .09);
    font-size: .86rem;
}
.earning-list li:last-child { border-bottom: 0; }
.earning-list span { color: #554c58; }
.earning-list strong {
    color: var(--incossify-700);
    text-align: right;
    white-space: nowrap;
    font-size: .84rem;
}
.earning-list .total-row {
    background: linear-gradient(135deg, #f9f3ff, #eef7ff);
}
.earning-list .total-row span,
.earning-list .total-row strong {
    color: var(--incossify-900);
    font-weight: 950;
}

.features-section {
    padding: 30px 16px 34px;
    background:
        radial-gradient(circle at 100% 0, rgba(58,199,255,.18), transparent 22rem),
        linear-gradient(145deg, var(--incossify-950), #31034c 58%, #501078);
    color: #fff;
}
.features-intro { padding: 0 3px 17px; }
.features-intro h2,
.final-cta h2 {
    margin: 5px 0 7px;
    font-size: clamp(1.45rem, 5vw, 2rem);
    line-height: 1.12;
    letter-spacing: -.025em;
}
.features-intro p { margin: 0; color: rgba(255,255,255,.74); font-size: .9rem; }

.carousel {
    position: relative;
    overflow: hidden;
    border-radius: 19px;
    background: rgba(255,255,255,.08);
    box-shadow: 0 18px 48px rgba(0,0,0,.28);
    touch-action: pan-y;
}
.carousel-track {
    display: flex;
    transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.carousel-slide {
    position: relative;
    min-width: 100%;
    margin: 0;
    padding: 16px;
    background: #160021;
}
.carousel-slide img {
    display: block;
    width: min(100%, 512px);
    max-width: 512px;
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    object-fit: contain;
    background: #160021;
}
.carousel-slide figcaption {
    position: absolute;
    left: 14px;
    bottom: 14px;
    padding: 7px 10px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 999px;
    background: rgba(18,0,27,.72);
    backdrop-filter: blur(7px);
    color: #fff;
    font-size: .7rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.carousel-button {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 50%;
    background: rgba(29,0,43,.66);
    color: #fff;
    font-size: 1.65rem;
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
    backdrop-filter: blur(6px);
}
.carousel-button--prev { left: 10px; }
.carousel-button--next { right: 10px; }
.carousel-dots {
    position: absolute;
    right: 12px;
    bottom: 14px;
    z-index: 2;
    display: flex;
    gap: 6px;
}
.carousel-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.45);
    cursor: pointer;
}
.carousel-dot.is-active { width: 21px; border-radius: 999px; background: #fff; }

.final-cta {
    position: relative;
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 14px;
    padding: 26px 18px 30px;
    overflow: hidden;
    background: linear-gradient(135deg, #f8efff, #f0f8ff);
    border-top: 1px solid var(--border);
}
.final-cta::before {
    content: "";
    position: absolute;
    right: -70px;
    top: -90px;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: rgba(192,47,229,.08);
}
.final-cta__logo {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(64,0,88,.18);
}
.final-cta h2 { color: var(--incossify-900); }
.final-cta p { margin: 0; color: var(--muted); font-size: .88rem; }
.final-cta__actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 4px;
}
.cta-secondary,
.cta-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    border-radius: 12px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .75rem;
    font-weight: 950;
}
.cta-secondary {
    border: 1px solid rgba(22,142,232,.22);
    background: #fff;
    color: #0674c7;
}
.cta-primary {
    background: linear-gradient(135deg, var(--incossify-700), var(--incossify-500));
    color: #fff;
    box-shadow: 0 10px 24px rgba(141,15,183,.2);
}

.site-footer {
    padding: 26px 20px 92px;
    background: #fff;
    text-align: center;
    border-top: 1px solid var(--border);
}
.site-footer img { border-radius: 12px; }
.site-footer p { margin: 8px 0 0; color: #6d6471; font-size: .78rem; }
.site-footer .disclaimer { max-width: 610px; margin: 12px auto 0; color: #8a818d; font-size: .68rem; }

.sticky-package-bar {
    position: fixed;
    z-index: 2000;
    left: 50%;
    bottom: max(10px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 8px;
    width: min(calc(100% - 20px), 720px);
    min-height: 56px;
    padding: 8px 9px 8px 14px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 17px;
    background: rgba(31, 0, 47, .93);
    color: #fff;
    box-shadow: 0 16px 36px rgba(20,0,30,.35);
    backdrop-filter: blur(12px);
    transform: translateX(-50%);
}
.sticky-package-bar span { font-size: .76rem; font-weight: 850; }
.sticky-package-bar a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 12px;
    border-radius: 10px;
    text-decoration: none;
    font-size: .67rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.sticky-package-bar a:first-of-type { background: #fff; color: #0878ca; }
.sticky-package-bar a:last-of-type { background: linear-gradient(135deg, var(--incossify-600), var(--incossify-500)); color: #fff; }

@media (min-width: 600px) {
    body { padding: 20px 0 90px; }
    .site-shell { border-radius: 24px; }
    .brand-hero__overlay { inset: auto 34px 34px; }
    .earning-card { padding: 28px 30px 34px; }
    .features-section { padding: 38px 28px 42px; }
    .final-cta { padding: 32px 30px 36px; }
    .earning-list li { padding: 13px 15px; font-size: .9rem; }
    .earning-list strong { font-size: .88rem; }
}

@media (max-width: 390px) {
    .brand-hero__overlay { inset: auto 17px 18px; }
    .brand-hero p { font-size: .82rem; }
    .trust-strip span { font-size: .61rem; }
    .package-summary { display: block; }
    .package-badge { display: inline-flex; margin-top: 10px; }
    .earning-list li { align-items: flex-start; font-size: .79rem; }
    .earning-list strong { white-space: normal; font-size: .78rem; }
    .sticky-package-bar span { display: none; }
    .sticky-package-bar { grid-template-columns: 1fr 1fr; padding-left: 9px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; }
}