/*
 * StarFlow public marketing system.
 * Scoped to .sf-marketing-surface so existing public/profile surfaces remain
 * independent while the approved marketing pages share one visual language.
 */
.sf-marketing-surface {
    --sfm-bg: #05060d;
    --sfm-bg-soft: #090c18;
    --sfm-panel: rgba(16, 20, 38, .78);
    --sfm-panel-strong: #11172a;
    --sfm-panel-soft: #0b1020;
    --sfm-text: #f7f8ff;
    --sfm-muted: #9ba7c4;
    --sfm-faint: #697590;
    --sfm-line: rgba(157, 172, 221, .16);
    --sfm-line-strong: rgba(160, 140, 255, .34);
    --sfm-violet: #9a68ff;
    --sfm-blue: #4e8dff;
    --sfm-cyan: #65d9ff;
    --sfm-radius: 24px;
    --sfm-shell: 1180px;
    background: var(--sfm-bg);
    color: var(--sfm-text);
}

.sf-marketing-surface,
.sf-marketing-surface main,
.sf-marketing-surface #main-content {
    background: var(--sfm-bg);
    color: var(--sfm-text);
}

.sf-marketing-surface .stx-public-header {
    height: 68px;
    border-bottom: 1px solid rgba(160, 170, 220, .12);
    background: rgba(5, 6, 13, .72);
    box-shadow: 0 10px 34px rgba(0, 0, 0, .18);
    backdrop-filter: blur(18px);
}

.sf-marketing-surface .stx-desktop-header,
.sf-marketing-surface .stx-desktop-header__top { height: 68px; }

.sf-marketing-surface .stx-desktop-header__top {
    width: min(calc(100% - 48px), 1240px);
    max-width: 1240px;
}

.sf-marketing-surface .stx-desktop-logo img,
.sf-marketing-surface .stx-mobile-logo img {
    filter: drop-shadow(0 0 16px rgba(126, 91, 255, .2));
}

.sf-marketing-surface .stx-main-nav__item > a {
    min-height: 68px;
    color: #c5cbe0;
    font-size: .82rem;
}

.sf-marketing-surface .stx-main-nav__item > a:hover,
.sf-marketing-surface .stx-main-nav__item:focus-within > a {
    color: #fff;
    background: rgba(255, 255, 255, .045);
}

.sf-marketing-surface .stx-main-nav__submenu-indicator { color: rgba(228, 232, 245, .72); font-size: .78rem; }
.sf-marketing-surface .stx-main-nav__dropdown { border-color: rgba(255,255,255,.09); background: rgba(20,22,39,.97); box-shadow: 0 16px 36px rgba(0,0,0,.22); }
.sf-marketing-surface .stx-main-nav__dropdown-item > a { color: #e4e7f0; }
.sf-marketing-surface .stx-main-nav__dropdown-item > a:hover { background: rgba(255,255,255,.055); color: #fff; }

.sf-marketing-surface .stx-action-button--login {
    min-height: 38px;
    border: 1px solid rgba(145, 118, 255, .36);
    border-radius: 999px;
    color: #e8e4ff;
    background: rgba(119, 83, 255, .12);
}

.sf-marketing-surface .stx-action-button--login:hover {
    color: #fff;
    background: linear-gradient(135deg, rgba(125, 80, 255, .85), rgba(52, 120, 255, .88));
}

.sf-marketing-surface .stx-mobile-header {
    border-bottom: 1px solid rgba(160, 170, 220, .12);
    background: rgba(5, 6, 13, .82);
}

.sf-marketing-surface.sv-public-shell .stx-mobile-icon-button {
    border: 1px solid rgba(157, 172, 221, .18) !important;
    border-radius: 11px !important;
    background: rgba(13, 17, 34, .82) !important;
    color: #e9edff !important;
}
.sf-marketing-surface.sv-public-shell .stx-mobile-icon-button:hover,
.sf-marketing-surface.sv-public-shell .stx-mobile-icon-button:focus-visible {
    border-color: rgba(160, 140, 255, .45) !important;
    background: rgba(123, 86, 255, .16) !important;
    color: #fff !important;
}
.sf-marketing-surface .stx-mobile-drawer__panel { background: #090c18; color: var(--sfm-text); }
.sf-marketing-surface .stx-mobile-drawer__head { color: #fff; }
.sf-marketing-surface .stx-mobile-drawer__nav a { color: #cbd2e8; }
.sf-marketing-surface .stx-mobile-drawer__nav a:hover { color: #fff; background: rgba(129, 94, 255, .14); }

.sf-marketing-surface .st-footer {
    margin-top: 0;
    padding: 0 0 28px;
    background: #03040a;
    color: var(--sfm-muted);
}

.sf-marketing-surface .st-footer > .stx-container {
    width: min(calc(100% - 48px), var(--sfm-shell));
}

.sf-marketing-surface .st-footer__benefits { display: none; }

.sf-marketing-surface .st-footer__main {
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid var(--sfm-line);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(16, 20, 39, .92), rgba(7, 9, 18, .96));
    box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
}

.sf-marketing-surface .st-footer__grid { gap: clamp(1rem, 4vw, 3.5rem); }
.sf-marketing-surface .st-footer__about,
.sf-marketing-surface .st-footer__contact,
.sf-marketing-surface .st-footer__menu a { color: var(--sfm-muted); }
.sf-marketing-surface .st-footer__box-title { color: #eef0ff; }
.sf-marketing-surface .st-footer__menu a:hover,
.sf-marketing-surface .st-footer__bottom a { color: var(--sfm-cyan); }
.sf-marketing-surface .st-footer__social,
.sf-marketing-surface .st-footer__bottom { border-color: var(--sfm-line); }
.sf-marketing-surface .st-footer__social a { border-color: var(--sfm-line); color: #cdd4ee; }

.sfm-footer-cta {
    padding: 0 0 4rem;
    background: var(--sfm-bg);
}

.sfm-footer-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: clamp(2rem, 5vw, 3.4rem);
    border: 1px solid rgba(141, 111, 255, .28);
    border-radius: 28px;
    background: radial-gradient(circle at 18% 20%, rgba(67, 140, 255, .18), transparent 44%), linear-gradient(120deg, rgba(42, 26, 96, .72), rgba(15, 27, 63, .8));
}

.sfm-footer-cta h2 {
    margin: .65rem 0 0;
    color: #fff;
    font-size: clamp(1.35rem, 3vw, 2.35rem);
    line-height: 1.45;
}

.sfm-footer {
    padding: 2rem 0 1.5rem;
    background: #03040a;
    color: var(--sfm-muted);
}

.sfm-footer__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.8fr);
    gap: 2rem 5rem;
}

.sfm-footer__logo { display: inline-flex; }
.sfm-footer__logo img { display: block; width: auto; max-width: 150px; max-height: 52px; object-fit: contain; }
.sfm-footer__brand p { max-width: 30ch; margin: 1rem 0 0; color: var(--sfm-faint); font-size: .78rem; line-height: 2; }
.sfm-footer__links { display: flex; flex-wrap: wrap; align-content: start; gap: .7rem 1.5rem; padding-top: .7rem; }
.sfm-footer__links a { color: #b8c2df; font-size: .78rem; }
.sfm-footer__links a:hover { color: var(--sfm-cyan); }
.sfm-footer__meta { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 1rem; padding-top: 1.2rem; border-top: 1px solid var(--sfm-line); color: var(--sfm-faint); font-size: .7rem; }
.sfm-footer__meta a { color: #8bb4ff; }

.sf-marketing-page {
    position: relative;
    isolation: isolate;
    min-height: 70vh;
    overflow: hidden;
    background:
        radial-gradient(ellipse 70% 35% at 50% -8%, rgba(79, 111, 255, .18), transparent 68%),
        radial-gradient(ellipse 35% 25% at 4% 45%, rgba(130, 68, 255, .12), transparent 70%),
        var(--sfm-bg);
}

.sf-marketing-page::before,
.sf-marketing-page::after {
    position: absolute;
    z-index: -1;
    content: '';
    pointer-events: none;
}

.sf-marketing-page::before {
    top: 18rem;
    left: -12rem;
    width: 42rem;
    height: 22rem;
    border: 1px solid rgba(111, 105, 255, .12);
    border-radius: 50%;
    transform: rotate(-17deg);
    box-shadow: 0 0 80px rgba(71, 99, 255, .08);
}

.sf-marketing-page::after {
    right: -14rem;
    bottom: 10rem;
    width: 42rem;
    height: 24rem;
    border: 1px solid rgba(76, 204, 255, .1);
    border-radius: 50%;
    transform: rotate(18deg);
}

.sf-marketing-page__glow {
    position: absolute;
    z-index: -1;
    width: 22rem;
    height: 22rem;
    border-radius: 50%;
    filter: blur(50px);
    pointer-events: none;
}

.sf-marketing-page__glow--top {
    top: 10rem;
    right: 10%;
    background: rgba(104, 67, 255, .12);
}

.sf-marketing-page__glow--side {
    top: 48rem;
    left: 3%;
    background: rgba(38, 143, 255, .08);
}

.sfm-shell {
    width: min(calc(100% - 48px), var(--sfm-shell));
    margin-inline: auto;
}

.sfm-hero {
    position: relative;
    padding: clamp(5.5rem, 10vw, 9rem) 0 clamp(5rem, 9vw, 8rem);
}

.sfm-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
    gap: clamp(2.5rem, 7vw, 7.5rem);
    align-items: center;
}

.sfm-hero__copy { max-width: 590px; }
.sfm-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: #b495ff;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .01em;
}

.sfm-eyebrow::before {
    width: 1.7rem;
    height: 1px;
    content: '';
    background: linear-gradient(90deg, var(--sfm-violet), transparent);
}

.sfm-hero h1 {
    max-width: 12ch;
    margin: 1rem 0 1.25rem;
    color: #fbfbff;
    font-size: clamp(2.65rem, 6vw, 5.8rem);
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -.055em;
}

.sfm-hero h1 span,
.sfm-section-heading h2 span,
.sfm-split__copy h2 span,
.sfm-lead-copy h2 span,
.sfm-payment-copy h2 span {
    color: transparent;
    background: linear-gradient(110deg, #b28cff 8%, #5da7ff 88%);
    background-clip: text;
    -webkit-background-clip: text;
}

.sfm-hero__copy > p {
    max-width: 520px;
    margin: 0;
    color: var(--sfm-muted);
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    line-height: 2.1;
}

.sfm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 2rem;
}

.sfm-button {
    display: inline-flex;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .75rem 1.35rem;
    border: 1px solid transparent;
    border-radius: 13px;
    font-size: .88rem;
    font-weight: 800;
    line-height: 1.4;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.sfm-button:hover { transform: translateY(-2px); }
.sfm-button--primary {
    color: #fff !important;
    background: linear-gradient(110deg, #8f5cff, #3e88ff);
    box-shadow: 0 12px 34px rgba(89, 83, 255, .3);
}
.sfm-button--primary:hover { box-shadow: 0 16px 42px rgba(89, 83, 255, .44); }
.sfm-button--ghost {
    border-color: var(--sfm-line);
    color: #dce2f8 !important;
    background: rgba(255, 255, 255, .025);
}
.sfm-button--ghost:hover { border-color: var(--sfm-line-strong); background: rgba(139, 99, 255, .1); }

.sfm-hero__note {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-top: 1.45rem;
    color: var(--sfm-faint);
    font-size: .75rem;
}

.sfm-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sfm-cyan);
    box-shadow: 0 0 16px rgba(101, 217, 255, .8);
}

.sfm-hero__visual {
    position: relative;
    min-height: 430px;
    display: grid;
    place-items: center;
}

.sfm-hero__visual::before {
    position: absolute;
    width: 78%;
    height: 65%;
    content: '';
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(80, 111, 255, .22), transparent 68%);
    filter: blur(18px);
}

.sfm-dashboard,
.sfm-lead-preview,
.sfm-payment-preview,
.sfm-pricing-preview,
.sfm-profile-preview {
    position: relative;
    z-index: 1;
    width: min(100%, 500px);
    border: 1px solid var(--sfm-line-strong);
    border-radius: 25px;
    background: linear-gradient(145deg, rgba(23, 29, 55, .94), rgba(8, 11, 24, .98));
    box-shadow: 0 28px 80px rgba(0, 0, 0, .42), 0 0 70px rgba(101, 83, 255, .1);
}

.sfm-dashboard { padding: 1rem; transform: rotate(-3deg); }
.sfm-dashboard__top,
.sfm-dashboard__footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sfm-dashboard__top { padding: .4rem .5rem 1rem; color: #f2f4ff; font-size: .75rem; font-weight: 800; }
.sfm-dashboard__top b { color: var(--sfm-faint); font-size: .65rem; font-weight: 500; }
.sfm-dashboard__metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.sfm-dashboard__metrics > div { padding: 1rem; border: 1px solid var(--sfm-line); border-radius: 16px; background: rgba(255,255,255,.035); }
.sfm-dashboard small, .sfm-dashboard em { display: block; color: var(--sfm-faint); font-size: .64rem; font-style: normal; }
.sfm-dashboard strong { display: block; margin: .35rem 0; color: #fff; font-size: 1.45rem; }
.sfm-dashboard em { color: #70dcae; }
.sfm-dashboard__chart { position: relative; height: 145px; margin-top: .75rem; overflow: hidden; border: 1px solid var(--sfm-line); border-radius: 16px; background: linear-gradient(180deg, rgba(72, 123, 255, .12), transparent); }
.sfm-dashboard__chart::before { position: absolute; inset: 0; content: ''; opacity: .3; background: repeating-linear-gradient(0deg, transparent 0 30px, rgba(178, 193, 255, .14) 31px); }
.sfm-chart-line { position: absolute; right: 6%; bottom: 20%; width: 88%; height: 65%; border-top: 2px solid #81a8ff; border-radius: 50% 50% 0 0; transform: skewY(-15deg) rotate(-4deg); box-shadow: 0 -8px 30px rgba(91, 155, 255, .35); }
.sfm-chart-label { position: absolute; right: 1rem; bottom: .8rem; color: #aeb8d9; font-size: .68rem; }
.sfm-dashboard__footer { padding: .85rem .4rem .15rem; color: #aeb8d9; font-size: .65rem; }

.sfm-lead-preview { padding: 1.1rem; transform: rotate(3deg); }
.sfm-lead-preview__brand { display: flex; align-items: center; gap: .65rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--sfm-line); }
.sfm-avatar { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 13px; color: #fff; background: linear-gradient(135deg, #a477ff, #3a8cff); font-weight: 900; }
.sfm-avatar--large { width: 58px; height: 58px; flex-basis: 58px; border: 4px solid #101427; border-radius: 19px; }
.sfm-lead-preview__brand div { display: grid; gap: .15rem; flex: 1; }
.sfm-lead-preview__brand strong { color: #f8f9ff; font-size: .83rem; }
.sfm-lead-preview__brand small { color: var(--sfm-faint); font-size: .64rem; }
.sfm-lead-preview__brand b { color: var(--sfm-faint); letter-spacing: .15em; }
.sfm-lead-preview__hero { display: grid; gap: .5rem; padding: 3rem 1.2rem 2.2rem; text-align: center; }
.sfm-lead-preview__hero span { color: #ac91ff; font-size: .66rem; }
.sfm-lead-preview__hero strong { color: #f4f5ff; font-size: 1.35rem; line-height: 1.65; }
.sfm-lead-preview__fields { display: grid; gap: .6rem; padding: .8rem; border: 1px solid var(--sfm-line); border-radius: 17px; background: rgba(2,4,12,.42); }
.sfm-lead-preview__fields span { padding: .75rem .8rem; border: 1px solid var(--sfm-line); border-radius: 10px; color: var(--sfm-faint); font-size: .7rem; }
.sfm-lead-preview__fields button { min-height: 43px; border: 0; border-radius: 10px; color: #fff; background: linear-gradient(110deg, #8b5cff, #418dff); font: inherit; font-size: .72rem; font-weight: 800; }

.sfm-payment-preview { display: grid; justify-items: center; gap: 1rem; padding: 2rem; text-align: center; transform: rotate(-2deg); }
.sfm-payment-preview__tag { align-self: end; justify-self: end; padding: .4rem .7rem; border: 1px solid var(--sfm-line-strong); border-radius: 999px; color: #c4b4ff; font-size: .66rem; }
.sfm-payment-preview__qr { position: relative; display: grid; width: 190px; height: 190px; place-items: center; border: 10px solid #f6f7ff; border-radius: 12px; background: repeating-linear-gradient(45deg, #0b1022 0 7px, #fff 7px 13px); box-shadow: 0 0 40px rgba(103, 137, 255, .22); }
.sfm-payment-preview__qr::before, .sfm-payment-preview__qr::after { position: absolute; width: 36px; height: 36px; content: ''; border: 8px solid #0b1022; background: #f6f7ff; }
.sfm-payment-preview__qr::before { top: 10px; right: 10px; }
.sfm-payment-preview__qr::after { bottom: 10px; left: 10px; }
.sfm-payment-preview__qr i { position: relative; z-index: 1; display: grid; width: 48px; height: 48px; place-items: center; border-radius: 10px; color: #fff; background: #0b1022; font-size: .75rem; font-style: normal; font-weight: 900; }
.sfm-payment-preview > strong { max-width: 23ch; color: #f4f5ff; font-size: .9rem; line-height: 1.8; }
.sfm-payment-preview__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.sfm-payment-preview__chips span { padding: .38rem .6rem; border: 1px solid var(--sfm-line); border-radius: 999px; color: #9da9c6; font-size: .6rem; }

.sfm-pricing-preview { display: grid; gap: .8rem; width: min(100%, 350px); padding: 1.6rem; transform: rotate(3deg); }
.sfm-pricing-preview > span { color: #a88bff; font-size: .7rem; }
.sfm-pricing-preview > strong { color: #fff; font-size: 1.8rem; }
.sfm-pricing-preview > b { color: #fff; font-size: 2.7rem; }
.sfm-pricing-preview > b small { color: var(--sfm-muted); font-size: .7rem; font-weight: 500; }
.sfm-pricing-preview > div { display: grid; gap: .5rem; padding-block: .8rem; }
.sfm-pricing-preview > div i { display: block; width: 80%; height: 7px; border-radius: 10px; background: rgba(185, 195, 240, .16); }
.sfm-pricing-preview > div i:nth-child(2) { width: 62%; }
.sfm-pricing-preview > div i:nth-child(3) { width: 72%; }
.sfm-pricing-preview > a { padding: .75rem; border-radius: 11px; color: #fff; background: linear-gradient(110deg, #8c5dff, #418dff); font-size: .75rem; font-weight: 800; text-align: center; }

.sfm-profile-preview { overflow: hidden; padding-bottom: 1.25rem; text-align: center; transform: rotate(-3deg); }
.sfm-profile-preview__cover { height: 145px; background: radial-gradient(circle at 25% 30%, rgba(93, 212, 255, .45), transparent 18%), linear-gradient(135deg, #252065, #0d172e 65%, #0c3b61); }
.sfm-profile-preview .sfm-avatar { margin: -28px auto .65rem; }
.sfm-profile-preview strong, .sfm-profile-preview small { display: block; }
.sfm-profile-preview strong { color: #fff; font-size: 1.05rem; }
.sfm-profile-preview small { margin-top: .25rem; color: var(--sfm-muted); font-size: .7rem; }
.sfm-profile-preview__links { display: grid; gap: .45rem; padding: 1.15rem 1.3rem 0; }
.sfm-profile-preview__links span { padding: .65rem; border: 1px solid var(--sfm-line); border-radius: 10px; color: #d4dafa; font-size: .68rem; }

.sfm-home-orbit { position: relative; width: 410px; height: 410px; display: grid; place-items: center; border: 1px solid rgba(111, 129, 255, .2); border-radius: 50%; box-shadow: 0 0 100px rgba(83, 78, 255, .12), inset 0 0 80px rgba(71, 166, 255, .08); }
.sfm-home-orbit::before, .sfm-home-orbit::after { position: absolute; content: ''; border: 1px solid rgba(108, 133, 255, .2); border-radius: 50%; }
.sfm-home-orbit::before { inset: 12%; }
.sfm-home-orbit::after { inset: 25%; }
.sfm-home-orbit__core { position: relative; z-index: 1; display: grid; width: 150px; height: 150px; place-items: center; align-content: center; border: 1px solid rgba(172, 137, 255, .45); border-radius: 42px; background: linear-gradient(145deg, rgba(55, 58, 134, .78), rgba(10, 16, 36, .96)); box-shadow: 0 0 50px rgba(121, 82, 255, .24); }
.sfm-home-orbit__core span { color: #a98cff; font-size: 2.2rem; font-weight: 900; line-height: 1; }
.sfm-home-orbit__core strong { margin-top: .4rem; color: #fff; font-size: .78rem; }
.sfm-home-orbit__core small { color: var(--sfm-faint); font-size: .58rem; }
.sfm-home-orbit i { position: absolute; z-index: 2; padding: .45rem .75rem; border: 1px solid var(--sfm-line-strong); border-radius: 999px; color: #dfe4ff; background: rgba(13, 17, 36, .88); font-size: .65rem; font-style: normal; }
.sfm-home-orbit i:nth-of-type(1) { top: 10%; right: 15%; }
.sfm-home-orbit i:nth-of-type(2) { top: 45%; left: -4%; }
.sfm-home-orbit i:nth-of-type(3) { right: 3%; bottom: 15%; }
.sfm-home-orbit i:nth-of-type(4) { bottom: 5%; left: 29%; }

.sfm-section { position: relative; padding: clamp(4.5rem, 9vw, 8rem) 0; }
.sfm-section--quiet { border-block: 1px solid rgba(155, 168, 220, .08); background: rgba(13, 17, 31, .42); }
.sfm-section--compact { padding-block: 3rem; }
.sfm-section-heading { max-width: 710px; margin: 0 auto 2.8rem; text-align: center; }
.sfm-section-heading h2, .sfm-split__copy h2, .sfm-lead-copy h2, .sfm-payment-copy h2 { margin: .75rem 0 0; color: #f7f8ff; font-size: clamp(1.8rem, 4vw, 3.35rem); font-weight: 900; line-height: 1.4; letter-spacing: -.045em; }
.sfm-section-heading p { margin: .8rem auto 0; color: var(--sfm-muted); line-height: 2; }
.sfm-card-grid { display: grid; gap: 1rem; }
.sfm-card-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sfm-card { min-height: 190px; padding: clamp(1.3rem, 3vw, 2rem); border: 1px solid var(--sfm-line); border-radius: var(--sfm-radius); background: linear-gradient(145deg, rgba(18, 24, 44, .7), rgba(8, 11, 23, .84)); box-shadow: 0 18px 40px rgba(0, 0, 0, .16); }
.sfm-card:hover { border-color: rgba(152, 124, 255, .36); }
.sfm-card__number { display: block; margin-bottom: 1.6rem; color: #a98aff; font-size: .68rem; font-weight: 900; }
.sfm-card strong { display: block; color: #f0f2ff; font-size: 1.05rem; }
.sfm-card p { margin: .75rem 0 0; color: var(--sfm-muted); font-size: .86rem; line-height: 2; }
.sfm-card b { display: block; margin-top: 1.5rem; color: #8fb5ff; font-size: .72rem; }
.sfm-card--feature { min-height: 225px; }
.sfm-card--feature .sfm-card__number { margin-bottom: 2.4rem; }
.sfm-icon { display: grid; width: 42px; height: 42px; place-items: center; margin-bottom: 1.2rem; border: 1px solid var(--sfm-line-strong); border-radius: 13px; color: #a98aff; font-size: 1.2rem; }

.sfm-section--split { border-top: 1px solid rgba(155, 168, 220, .08); }
.sfm-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: clamp(2rem, 9vw, 8rem); }
.sfm-split__copy p, .sfm-lead-copy > p, .sfm-payment-copy > p { max-width: 52ch; margin: 1rem 0 0; color: var(--sfm-muted); line-height: 2.1; }
.sfm-data-list { display: grid; gap: .75rem; }
.sfm-data-list > div { display: grid; grid-template-columns: 45px 1fr auto; gap: 1rem; align-items: center; padding: 1.15rem 0; border-bottom: 1px solid var(--sfm-line); }
.sfm-data-list b { color: #a58aff; font-size: .72rem; }
.sfm-data-list span { color: #d9def1; font-size: .85rem; }
.sfm-data-list small { display: block; margin-top: .3rem; color: var(--sfm-faint); font-size: .7rem; line-height: 1.8; }
.sfm-data-list i { color: #7089d3; font-style: normal; }

.sfm-cta { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: 1rem; margin-bottom: clamp(4rem, 8vw, 7rem); padding: clamp(2rem, 5vw, 3.7rem); overflow: hidden; border: 1px solid rgba(141, 111, 255, .3); border-radius: 28px; background: radial-gradient(circle at 20% 20%, rgba(67, 140, 255, .2), transparent 42%), linear-gradient(120deg, rgba(42, 26, 96, .76), rgba(15, 27, 63, .82)); }
.sfm-cta h2 { margin: .65rem 0 0; color: #fff; font-size: clamp(1.45rem, 3vw, 2.4rem); line-height: 1.4; }
.sfm-cta p { margin: .35rem 0 0; color: #b8c1df; font-size: .86rem; }

.sfm-lead-layout, .sfm-payment-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 8vw, 8rem); align-items: start; }
.sfm-form-card { padding: clamp(1.4rem, 4vw, 2.3rem); border: 1px solid var(--sfm-line-strong); border-radius: 24px; background: linear-gradient(145deg, rgba(24, 29, 54, .82), rgba(8, 11, 23, .95)); box-shadow: 0 24px 65px rgba(0,0,0,.2); }
.sfm-form-card h2 { margin: .75rem 0 .3rem; color: #fff; font-size: 1.45rem; }
.sfm-form-card > p { margin: 0 0 1.5rem; color: var(--sfm-muted); font-size: .82rem; line-height: 2; }
.sfm-form-card form { display: grid; gap: .9rem; }
.sfm-form-card label { display: grid; gap: .4rem; color: #b8c2df; font-size: .72rem; font-weight: 700; }
.sfm-form-card input { width: 100%; min-height: 48px; padding: .7rem .85rem; border: 1px solid var(--sfm-line); border-radius: 11px; outline: 0; color: #fff; background: rgba(5, 7, 16, .64); }
.sfm-form-card input::placeholder { color: #697590; }
.sfm-form-card input:focus { border-color: var(--sfm-line-strong); box-shadow: 0 0 0 3px rgba(140, 102, 255, .12); }
.sfm-form-card .sfm-button { width: 100%; margin-top: .35rem; }
.sfm-lead-copy { padding-top: 1.3rem; }
.sfm-check-list { display: grid; gap: .75rem; padding: 0; margin: 1.8rem 0 0; list-style: none; }
.sfm-check-list li { color: #d6dcf0; font-size: .87rem; }
.sfm-check-list li::before { content: '✓'; display: inline-grid; width: 23px; height: 23px; place-items: center; margin-inline-end: .6rem; border-radius: 50%; color: #8fe6ff; background: rgba(89, 202, 255, .12); font-size: .7rem; }

.sfm-payment-copy { padding-top: 1rem; }
.sfm-payment-copy .sfm-button { margin-top: 1.6rem; }
.sfm-quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; align-self: center; }
.sfm-quick-grid article { display: grid; min-height: 210px; align-content: end; gap: .35rem; padding: 1.2rem; border: 1px solid var(--sfm-line); border-radius: 20px; background: linear-gradient(180deg, rgba(28, 33, 61, .56), rgba(9, 13, 27, .86)); }
.sfm-quick-grid article > span { align-self: start; display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid var(--sfm-line-strong); border-radius: 12px; color: #9f83ff; font-size: .7rem; font-weight: 900; }
.sfm-quick-grid strong { color: #f2f4ff; font-size: .9rem; }
.sfm-quick-grid small { color: var(--sfm-faint); font-size: .68rem; line-height: 1.7; }

.sfm-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; padding: 0; margin: 0; list-style: none; }
.sfm-steps li { min-height: 165px; padding: 1.35rem; border-top: 1px solid var(--sfm-line-strong); background: rgba(15, 19, 37, .55); }
.sfm-steps b { display: block; color: #a48aff; font-size: .7rem; }
.sfm-steps strong { display: block; margin-top: 2.1rem; color: #fff; font-size: .94rem; }
.sfm-steps p { margin: .35rem 0 0; color: var(--sfm-muted); font-size: .76rem; }

.sfm-price-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; max-width: 880px; margin-inline: auto; }
.sfm-price-card { position: relative; display: flex; min-height: 455px; flex-direction: column; padding: clamp(1.4rem, 4vw, 2.3rem); border: 1px solid var(--sfm-line); border-radius: 25px; background: linear-gradient(145deg, rgba(18, 23, 42, .7), rgba(8, 11, 23, .92)); }
.sfm-price-card--featured { border-color: rgba(149, 119, 255, .55); background: radial-gradient(circle at 80% 0, rgba(126, 76, 255, .18), transparent 42%), linear-gradient(145deg, rgba(31, 28, 67, .9), rgba(8, 11, 23, .96)); box-shadow: 0 24px 70px rgba(91, 62, 219, .18); }
.sfm-price-card em { position: absolute; top: 1rem; left: 1rem; padding: .32rem .6rem; border: 1px solid rgba(156, 122, 255, .35); border-radius: 999px; color: #bfabff; font-size: .62rem; font-style: normal; }
.sfm-price-card > span { color: #a58cff; font-size: .72rem; font-weight: 800; }
.sfm-price-card h3 { margin: .5rem 0 .25rem; color: #fff; font-size: 1.7rem; }
.sfm-price-card p { margin: 0; color: var(--sfm-muted); font-size: .78rem; }
.sfm-price-card > strong { margin: 2rem 0 1.4rem; color: #fff; font-size: 2.3rem; }
.sfm-price-card > strong small { color: var(--sfm-muted); font-size: .68rem; font-weight: 500; }
.sfm-price-card ul { display: grid; gap: .65rem; padding: 0; margin: 0 0 1.8rem; list-style: none; color: #c5cce1; font-size: .8rem; }
.sfm-price-card li::before { content: '✓'; margin-inline-end: .5rem; color: #74dfff; }
.sfm-price-card .sfm-button { width: 100%; margin-top: auto; }
.sfm-comparison { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; border: 1px solid var(--sfm-line); border-radius: 18px; background: rgba(15, 19, 37, .7); }
.sfm-comparison span, .sfm-comparison a { color: #a58bff; font-size: .72rem; }
.sfm-comparison strong { color: #e7eaff; font-size: .86rem; }

.sfm-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin-bottom: 2rem; }
.sfm-filter span { padding: .55rem .9rem; border: 1px solid var(--sfm-line); border-radius: 999px; color: var(--sfm-muted); font-size: .72rem; }
.sfm-filter span.is-active { border-color: var(--sfm-line-strong); color: #fff; background: rgba(129, 94, 255, .15); }
.sfm-profile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.sfm-profile-card { overflow: hidden; border: 1px solid var(--sfm-line); border-radius: 22px; background: linear-gradient(145deg, rgba(18, 24, 44, .78), rgba(8, 11, 23, .94)); text-align: center; }
.sfm-profile-card__cover { height: 140px; background: radial-gradient(circle at 20% 30%, rgba(101, 220, 255, .4), transparent 20%), linear-gradient(135deg, #29215e, #0e2039); }
.sfm-profile-card__cover--two { background: radial-gradient(circle at 78% 20%, rgba(255, 161, 117, .36), transparent 18%), linear-gradient(135deg, #3e205b, #112d38); }
.sfm-profile-card__cover--three { background: radial-gradient(circle at 28% 60%, rgba(157, 111, 255, .45), transparent 20%), linear-gradient(135deg, #122a55, #0b1426); }
.sfm-profile-card .sfm-avatar { margin: -28px auto .55rem; }
.sfm-profile-card > strong, .sfm-profile-card > small { display: block; }
.sfm-profile-card > strong { color: #fff; font-size: 1rem; }
.sfm-profile-card > small { margin-top: .2rem; color: var(--sfm-muted); font-size: .68rem; }
.sfm-profile-card > p { min-height: 45px; margin: .8rem 1rem 1.2rem; color: #aeb8d3; font-size: .76rem; line-height: 1.9; }
.sfm-profile-card > a { display: block; padding: .85rem; border-top: 1px solid var(--sfm-line); color: #91b9ff; font-size: .72rem; font-weight: 800; }
.sfm-profile-card > a i { margin-inline-start: .3rem; font-style: normal; }
.sfm-faq-list { display: grid; gap: .75rem; max-width: 900px; margin-inline: auto; }
.sfm-faq-list details { border: 1px solid var(--sfm-line); border-radius: 16px; background: rgba(15, 19, 37, .62); }
.sfm-faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem; cursor: pointer; color: #eef0ff; font-size: .88rem; font-weight: 800; list-style: none; }
.sfm-faq-list summary::-webkit-details-marker { display: none; }
.sfm-faq-list summary span { color: var(--sfm-cyan); font-size: 1.15rem; font-weight: 400; }
.sfm-faq-list details[open] summary span { transform: rotate(45deg); }
.sfm-faq-list details p { margin: 0; padding: 0 1.25rem 1.2rem; color: var(--sfm-muted); font-size: .82rem; line-height: 2; }

@media (max-width: 991.98px) {
    .sfm-hero__grid { grid-template-columns: 1fr; gap: 3rem; }
    .sfm-hero__copy { max-width: 720px; margin-inline: auto; text-align: center; }
    .sfm-hero h1 { max-width: none; }
    .sfm-hero__copy > p { margin-inline: auto; }
    .sfm-actions { justify-content: center; }
    .sfm-hero__note { justify-content: center; }
    .sfm-hero__visual { min-height: 390px; }
    .sfm-split, .sfm-lead-layout, .sfm-payment-layout { grid-template-columns: 1fr; gap: 2.5rem; }
    .sfm-split__copy, .sfm-lead-copy, .sfm-payment-copy { max-width: 700px; margin-inline: auto; text-align: center; }
    .sfm-split__copy p, .sfm-lead-copy > p, .sfm-payment-copy > p { margin-inline: auto; }
    .sfm-check-list { justify-items: center; }
    .sfm-payment-copy .sfm-button { margin-top: 1.3rem; }
}

@media (max-width: 767.98px) {
    .sf-marketing-surface .stx-public-header { height: 58px; }
    .sfm-shell { width: min(calc(100% - 32px), var(--sfm-shell)); }
    .sfm-hero { padding-top: 4.2rem; }
    .sfm-hero h1 { font-size: clamp(2.15rem, 11vw, 3.6rem); }
    .sfm-hero__visual { min-height: 330px; }
    .sfm-dashboard { transform: none; }
    .sfm-lead-preview, .sfm-payment-preview, .sfm-pricing-preview, .sfm-profile-preview { transform: none; }
    .sfm-card-grid--three, .sfm-profile-grid, .sfm-price-grid { grid-template-columns: 1fr; }
    .sfm-card--feature { min-height: 190px; }
    .sfm-card--feature .sfm-card__number { margin-bottom: 1.6rem; }
    .sfm-steps { grid-template-columns: 1fr; }
    .sfm-steps li { min-height: 0; }
    .sfm-steps strong { margin-top: 1rem; }
    .sfm-quick-grid { grid-template-columns: 1fr; }
    .sfm-quick-grid article { min-height: 135px; }
    .sfm-comparison, .sfm-cta { align-items: flex-start; flex-direction: column; }
    .sfm-comparison a, .sfm-cta .sfm-button { width: 100%; text-align: center; }
    .sfm-cta { margin-bottom: 4rem; }
    .sfm-footer-cta__inner { align-items: flex-start; flex-direction: column; }
    .sfm-footer-cta__inner .sfm-button { width: 100%; }
    .sfm-footer__inner { grid-template-columns: 1fr; gap: 1.5rem; }
    .sfm-footer__meta { grid-column: auto; align-items: flex-start; flex-direction: column; }
    .sfm-home-orbit { width: 300px; height: 300px; }
    .sfm-home-orbit__core { width: 120px; height: 120px; border-radius: 34px; }
    .sfm-home-orbit__core span { font-size: 1.7rem; }
    .sfm-home-orbit i:nth-of-type(2) { left: -8%; }
}

@media (max-width: 460px) {
    .sf-marketing-surface .st-footer > .stx-container { width: min(calc(100% - 32px), var(--sfm-shell)); }
    .sfm-actions { display: grid; grid-template-columns: 1fr; }
    .sfm-actions .sfm-button { width: 100%; }
    .sfm-hero__visual { min-height: 295px; }
    .sfm-dashboard, .sfm-lead-preview, .sfm-payment-preview, .sfm-profile-preview { width: 100%; }
    .sfm-payment-preview__qr { width: 155px; height: 155px; }
    .sfm-profile-preview__cover { height: 115px; }
}

@media (prefers-reduced-motion: reduce) {
    .sf-marketing-surface *,
    .sf-marketing-surface *::before,
    .sf-marketing-surface *::after { transition: none !important; }
}
