@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@600;700;800&display=swap');

:root {
    --sb-bg: #f3f7fc;
    --sb-surface: #ffffff;
    --sb-text: #0f172a;
    --sb-muted: #475569;
    --sb-border: #d7e1ed;
    --sb-accent: #95e222;
    --sb-accent-strong: #6cb900;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    color: var(--sb-text);
    font-family: 'Manrope', sans-serif;
    background: radial-gradient(circle at top right, rgba(149, 226, 34, 0.2), transparent 30%),
        radial-gradient(circle at bottom left, rgba(59, 130, 246, 0.1), transparent 28%), var(--sb-bg);
}

h1, h2, h3, h4, h5, h6 { font-family: 'Sora', sans-serif; }
a { color: inherit; text-decoration: none; }

.sb-container { max-width: 1120px; margin: 0 auto; padding: 0 1.1rem; }
.sb-section { padding: 1.7rem 0; }

.sb-nav {
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 1px solid #1f2937;
    backdrop-filter: blur(8px);
    background: rgba(10, 14, 24, 0.97);
}

.sb-nav-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .85rem 0; }
.sb-brand { display: inline-flex; align-items: center; }
.sb-brand img { height: 52px; width: auto; display: block; }
.sb-nav-links { display: flex; align-items: center; gap: .8rem; }

.sb-link { color: #e2e8f0; font-weight: 700; }
.sb-link:hover { color: var(--sb-accent-strong); }

.sb-btn-primary, .sb-btn-secondary, .sb-offer-cta {
    border-radius: 12px;
    padding: .72rem 1rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.sb-btn-primary {
    border: 1px solid #7cc81d;
    background: linear-gradient(180deg, #bbf95c, var(--sb-accent));
    color: #111827;
}
.sb-btn-primary:hover { box-shadow: 0 10px 22px rgba(149, 226, 34, 0.35); transform: translateY(-1px); }

.sb-btn-secondary {
    border: 1px solid #c4d3e7;
    background: #fff;
    color: #0f172a;
}

.sb-offer { margin-top: 1rem; border: 1px solid #b9dd70; border-radius: 14px; background: linear-gradient(90deg, #d9ff9e, #bcf452); }
.sb-offer-inner { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .65rem .8rem; font-size: .9rem; font-weight: 700; color: #243107; }
.sb-offer-cta { border: 1px solid #9fcd47; background: #fff; color: #1f2937; border-radius: 999px; padding: .35rem .8rem; font-size: .78rem; }

.sb-hero { padding: 1.8rem 0 1rem; }
.sb-hero-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: center; }
.sb-pill { display: inline-flex; border: 1px solid #c9d7ea; background: #f6f9fe; color: #334155; border-radius: 999px; padding: .22rem .65rem; font-size: .78rem; font-weight: 700; }
.sb-headline { font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.02; margin: .8rem 0 .6rem; }
.sb-highlight {
    background: #dcfca6;
    border-radius: .35em;
    padding: .02em .24em .08em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}
.sb-subhead { color: var(--sb-muted); max-width: 680px; font-size: 1.02rem; }
.sb-checklist { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .45rem; }
.sb-checklist li { display: flex; gap: .45rem; align-items: center; font-weight: 600; }
.sb-checklist li::before {
    content: '✓';
    width: 20px;
    height: 20px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #dcfca3;
    color: #166534;
    font-size: .76rem;
    font-weight: 800;
}
.sb-cta-row { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1rem; }
.sb-disclaimer { color: #64748b; font-size: .82rem; font-weight: 600; margin-top: .7rem; }
.sb-disclaimer-pop {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: linear-gradient(90deg, #f3ffe1, #e5f7ff);
    border: 1px solid #c8e39d;
    border-radius: 999px;
    padding: .34rem .72rem;
    color: #243107;
    font-weight: 800;
}
.sb-disclaimer-pop::before {
    content: '✓';
    width: 18px;
    height: 18px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #95e222;
    color: #1f2937;
    font-size: .72rem;
}

.sb-card {
    border: 1px solid var(--sb-border);
    border-radius: 16px;
    background: linear-gradient(180deg, #fff, #f8fbff);
    box-shadow: 0 12px 25px rgba(15, 23, 42, 0.08);
}
.sb-hero-card { padding: 1rem; }
.sb-mini-list { margin-top: .7rem; display: grid; gap: .55rem; }
.sb-mini-list div {
    border: 1px solid #d9e4f2;
    border-radius: 12px;
    background: #f7fbff;
    padding: .62rem .72rem;
    display: flex;
    justify-content: space-between;
    font-weight: 700;
}

.sb-vsl-card { padding: 1rem; }
.sb-vsl-frame {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #d8e3f1;
    background: #000;
}
.sb-vsl-video {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: block;
    background: #000;
}
.sb-vsl-note {
    margin-top: .55rem;
    color: #64748b;
    font-size: .78rem;
    line-height: 1.4;
}
.sb-vsl-note code {
    display: inline-flex;
    margin-top: .2rem;
    background: #fff;
    border: 1px solid #d8e3f1;
    border-radius: 8px;
    padding: .2rem .35rem;
    word-break: break-all;
}
.sb-vsl-cta { margin-top: .8rem; width: 100%; }

.sb-style-intro {
    text-align: center;
    max-width: 780px;
    margin: 0 auto 1rem;
}
.sb-style-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .24rem .64rem;
    border-radius: 999px;
    border: 1px solid #bfd98d;
    background: #f4ffe4;
    color: #3d5f17;
    font-weight: 800;
    font-size: .74rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.sb-style-headline {
    margin: .48rem 0 .28rem;
    font-size: clamp(1.75rem, 3.8vw, 2.55rem);
    line-height: 1.03;
    letter-spacing: .01em;
    color: #0b1220;
    text-wrap: balance;
    text-shadow: 0 8px 26px rgba(12, 18, 32, 0.13);
}
.sb-style-subhead {
    margin: 0 auto;
    max-width: 640px;
    font-size: clamp(1rem, 1.8vw, 1.14rem);
    font-weight: 700;
    color: #334155;
    background: linear-gradient(90deg, rgba(149, 226, 34, 0.12), rgba(59, 130, 246, 0.08));
    border: 1px solid #d9e7bd;
    border-radius: 999px;
    padding: .42rem .9rem;
    display: inline-block;
}
.sb-style-headline::after {
    content: '';
    display: block;
    width: 170px;
    max-width: 45%;
    height: 5px;
    margin: .58rem auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #95e222, #6cb900);
    box-shadow: 0 0 0 0 rgba(149, 226, 34, 0.35);
    animation: sb-style-pop 2.2s ease-in-out infinite;
}

.sb-style-grid { display: grid; grid-template-columns: 1fr; gap: .85rem; margin-top: .8rem; }
.sb-style-card { border: 1px solid #d8e3f1; border-radius: 14px; background: #fff; padding: .9rem; }
.sb-style-tag { margin-top: .55rem; display: inline-flex; border: 1px solid #c8e39d; background: #f6ffe7; color: #4d6921; border-radius: 999px; padding: .22rem .55rem; font-size: .74rem; font-weight: 800; }
.sb-style-preview {
    border: 1px solid #d8e3f1;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: .7rem;
    background:
        linear-gradient(45deg, #eef3fb 25%, transparent 25%) 0 0 / 14px 14px,
        linear-gradient(-45deg, #eef3fb 25%, transparent 25%) 0 7px / 14px 14px,
        linear-gradient(45deg, transparent 75%, #eef3fb 75%) 7px -7px / 14px 14px,
        linear-gradient(-45deg, transparent 75%, #eef3fb 75%) -7px 0 / 14px 14px,
        #f8fbff;
}
.sb-style-preview-image {
    width: 100%;
    height: 180px;
    object-fit: contain;
    display: block;
    transition: opacity .35s ease;
}
.sb-style-preview-image.is-fading {
    opacity: .25;
}
.sb-style-cta {
    margin-top: .75rem;
    width: 100%;
}

.sb-faq-grid {
    margin-top: 1.05rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
.sb-faq-card {
    position: relative;
    border: 1px solid #cfdded;
    border-top: 4px solid #95e222;
    border-radius: 18px;
    background: linear-gradient(165deg, #ffffff, #f4faff);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.09);
    padding: 1.05rem 1rem 1rem;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.sb-faq-card:nth-child(even) {
    border-top-color: #7cc81d;
    background: linear-gradient(165deg, #ffffff, #f7fbff);
}
.sb-faq-card:hover {
    transform: translateY(-2px);
    border-color: #b6d57c;
    box-shadow: 0 18px 30px rgba(15, 23, 42, 0.12);
}
.sb-faq-card h3 {
    margin: 0 0 .58rem;
    font-size: 1.02rem;
    line-height: 1.28;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.sb-faq-card h3::before {
    content: '?';
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    font-weight: 900;
    color: #223009;
    background: #d9f9a1;
    border: 1px solid #a8d356;
}
.sb-faq-card p {
    margin: 0 0 .55rem;
    color: #3f4f63;
    line-height: 1.5;
}
.sb-faq-card p:last-child {
    margin-bottom: 0;
}
.sb-faq-card strong {
    color: #1f2937;
}
.sb-faq-section {
    position: relative;
    border: 1px solid #d5e2f0;
    border-radius: 24px;
    background:
        radial-gradient(circle at 12% 10%, rgba(149, 226, 34, 0.16), transparent 34%),
        radial-gradient(circle at 85% 12%, rgba(59, 130, 246, 0.08), transparent 30%),
        linear-gradient(180deg, #f9fcff, #f4f9ff);
    padding: 1.35rem .9rem;
    overflow: hidden;
}
.sb-faq-section::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.45), transparent 55%);
}
.sb-faq-intro {
    position: relative;
    z-index: 1;
}
.sb-faq-intro .sb-style-kicker {
    background: #0f172a;
    border-color: #0f172a;
    color: #e5e7eb;
}
.sb-faq-intro .sb-style-subhead {
    background: linear-gradient(90deg, rgba(148, 163, 184, 0.15), rgba(148, 163, 184, 0.06));
    border-color: #c8d6e6;
}

.sb-live-marquees {
    margin-top: 1rem;
    display: grid;
    gap: .75rem;
}
.sb-logo-marquee {
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.sb-logo-track {
    display: flex;
    align-items: stretch;
    gap: .75rem;
    width: max-content;
    animation: sb-marquee 42s linear infinite;
}
.sb-logo-marquee.is-reverse .sb-logo-track {
    animation-name: sb-marquee-reverse;
}
.sb-live-card {
    min-width: 250px;
    max-width: 250px;
    border: 1px solid #d8e3f1;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
}
.sb-live-card img {
    width: 100%;
    height: 130px;
    object-fit: contain;
    display: block;
    border-bottom: 1px solid #d8e3f1;
    background:
        linear-gradient(45deg, #eef3fb 25%, transparent 25%) 0 0 / 14px 14px,
        linear-gradient(-45deg, #eef3fb 25%, transparent 25%) 0 7px / 14px 14px,
        linear-gradient(45deg, transparent 75%, #eef3fb 75%) 7px -7px / 14px 14px,
        linear-gradient(-45deg, transparent 75%, #eef3fb 75%) -7px 0 / 14px 14px,
        #f8fbff;
}
.sb-live-copy { padding: .7rem .75rem .8rem; }
.sb-live-line { font-weight: 800; color: #1e293b; font-size: .86rem; line-height: 1.25; }
.sb-live-meta { margin-top: .3rem; color: #64748b; font-size: .78rem; font-weight: 600; }

@keyframes sb-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-50% - .375rem)); }
}
@keyframes sb-marquee-reverse {
    from { transform: translateX(calc(-50% - .375rem)); }
    to { transform: translateX(0); }
}
@keyframes sb-style-pop {
    0% { transform: scaleX(1); box-shadow: 0 0 0 0 rgba(149, 226, 34, 0.36); }
    50% { transform: scaleX(1.06); box-shadow: 0 0 0 10px rgba(149, 226, 34, 0); }
    100% { transform: scaleX(1); box-shadow: 0 0 0 0 rgba(149, 226, 34, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .sb-logo-track { animation: none; }
    .sb-style-headline::after { animation: none; }
}

.sb-final-cta {
    border: 1px solid #d8e3f1;
    border-radius: 18px;
    background: linear-gradient(160deg, #ffffff, #f4f9ff);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
    padding: 1.25rem;
    text-align: center;
}

.sb-grid { display: grid; gap: 1rem; }
.sb-grid-2 { grid-template-columns: 1fr; }

label { display: block; margin-bottom: .35rem; font-weight: 700; color: #334155; }
input, select, textarea {
    width: 100%;
    border: 1px solid #c9d8ea;
    border-radius: 12px;
    padding: .68rem .75rem;
    background: #fff;
    color: #0f172a;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--sb-accent-strong); box-shadow: 0 0 0 3px rgba(149, 226, 34, 0.22); }

.sb-choice-grid { display: grid; grid-template-columns: 1fr; gap: .55rem; }
.sb-choice {
    width: 100%;
    border-radius: 12px;
    border: 1px solid #c9d8ea;
    background: #fff;
    color: #0f172a;
    text-align: left;
    padding: .64rem .75rem;
    cursor: pointer;
    transition: border-color .15s ease, transform .15s ease;
}
.sb-choice:hover { border-color: #8fb0d4; transform: translateY(-1px); }
.sb-choice.is-active { border-color: #80c31c; background: #f3ffe1; color: #39591f; }

.wizard-step { display: none; }
.wizard-step.is-active { display: block; }
.wizard-nav { margin-top: 1rem; display: flex; gap: .7rem; flex-wrap: wrap; }
[data-submit] { display: none; }
.wizard-final [data-submit] { display: inline-flex; }
.wizard-final [data-next] { display: none; }
[data-prev] { display: none; }
.wizard-can-prev [data-prev] { display: inline-flex; }

.sb-success, .sb-error {
    border-radius: 10px;
    padding: .62rem .75rem;
}
.sb-success { border: 1px solid #84cc16; background: #f7fee7; color: #365314; }
.sb-error { border: 1px solid #ef4444; background: #fef2f2; color: #7f1d1d; }

@media (min-width: 768px) {
    .sb-hero-grid { grid-template-columns: 1.2fr .8fr; }
    .sb-style-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sb-faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sb-faq-section { padding: 1.45rem 1.15rem; }
    .sb-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sb-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .sb-nav-links a.sb-link { display: none; }
    .sb-offer-inner { flex-direction: column; align-items: flex-start; }
    .sb-brand img { height: 42px; }
    .sb-live-card { min-width: 220px; max-width: 220px; }
    .sb-style-subhead { border-radius: 16px; }
    .sb-disclaimer-pop { border-radius: 16px; }
}