/*
 * Social Boost Asia — Homepage V3
 * Creator Sketchbook × Spatial Glass
 * This stylesheet is intentionally standalone and fully namespaced.
 */

:root {
    --sbv3-paper: #fffaf5;
    --sbv3-paper-deep: #f8f0e7;
    --sbv3-pearl: #f7f5ff;
    --sbv3-white: #ffffff;
    --sbv3-ink: #11153b;
    --sbv3-muted: #4b526e;
    --sbv3-line: rgba(17, 21, 59, 0.14);
    --sbv3-violet: #5b36e8;
    --sbv3-violet-dark: #4421c7;
    --sbv3-cobalt: #0b5ed7;
    --sbv3-coral: #cf3827;
    --sbv3-pink: #f653a6;
    --sbv3-yellow: #ffd166;
    --sbv3-sky: #75c8ff;
    --sbv3-ease: cubic-bezier(.22, 1, .36, 1);
    --sbv3-shadow-sm: 0 14px 36px rgba(45, 32, 95, 0.09);
    --sbv3-shadow-md: 0 30px 80px rgba(48, 31, 104, 0.14);
    --sbv3-radius-sm: 18px;
    --sbv3-radius-md: 28px;
    --sbv3-radius-lg: 42px;
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 88px;
    background: var(--sbv3-paper);
}

body.sbv3-body {
    margin: 0;
    min-width: 0;
    overflow-x: clip;
    background: var(--sbv3-paper);
    color: var(--sbv3-ink);
    font-family: "Be Vietnam Pro", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.65;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.sbv3-body img {
    display: block;
    max-width: 100%;
}

.sbv3-body a {
    color: inherit;
    text-decoration: none;
}

.sbv3-body button,
.sbv3-body a {
    -webkit-tap-highlight-color: transparent;
}

.sbv3-body button,
.sbv3-body input,
.sbv3-body textarea,
.sbv3-body select {
    font: inherit;
}

.sbv3-body :focus-visible {
    outline: 3px solid var(--sbv3-cobalt);
    outline-offset: 4px;
}

.sbv3-skip {
    position: fixed;
    z-index: 999;
    left: 20px;
    top: 12px;
    transform: translateY(-160%);
    padding: 12px 18px;
    border-radius: 12px;
    background: var(--sbv3-ink);
    color: #fff !important;
    font-weight: 800;
    transition: transform .2s ease;
}

.sbv3-skip:focus {
    transform: translateY(0);
}

.sbv3-shell {
    width: min(100% - clamp(36px, 6vw, 96px), 1360px);
    margin-inline: auto;
}

.sbv3-page {
    width: 100%;
    max-width: none;
    overflow-x: clip;
    background:
        radial-gradient(circle at 5% 6%, rgba(246, 83, 166, .07), transparent 24rem),
        var(--sbv3-paper);
}

.sbv3-section {
    position: relative;
    padding-block: clamp(76px, 7.5vw, 112px);
}

.sbv3-kicker {
    margin: 0 0 14px;
    color: var(--sbv3-coral);
    font-size: .77rem;
    font-weight: 800;
    letter-spacing: .14em;
    line-height: 1.4;
    text-transform: uppercase;
}

.sbv3-section-head {
    max-width: 850px;
    margin-bottom: clamp(42px, 6vw, 76px);
}

.sbv3-section-head--split {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr);
    gap: clamp(32px, 6vw, 84px);
    max-width: none;
    align-items: end;
}

.sbv3-section-head h2,
.sbv3-demo__copy h3,
.sbv3-trust__copy h2,
.sbv3-faq__intro h2,
.sbv3-cta h2 {
    margin: 0;
    color: var(--sbv3-ink);
    font-size: clamp(2.15rem, 4.3vw, 4rem);
    font-weight: 800;
    letter-spacing: -.055em;
    line-height: 1.05;
}

.sbv3-section-head p:last-child,
.sbv3-demo__copy > p:not(.sbv3-kicker),
.sbv3-trust__copy > p,
.sbv3-faq__intro > p,
.sbv3-cta__inner > p {
    max-width: 64ch;
    margin: 22px 0 0;
    color: var(--sbv3-muted);
    font-size: clamp(1rem, 1.35vw, 1.14rem);
}

.sbv3-hand {
    position: relative;
    display: inline-block;
    color: var(--sbv3-cobalt);
    font-family: "Dancing Script", "Segoe Script", "Segoe Print", cursive;
    font-size: .9em;
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: .98;
    margin-inline: .04em;
    vertical-align: .08em;
    white-space: nowrap;
    text-decoration: none;
}

.sbv3-hand::after {
    position: absolute;
    right: -.04em;
    bottom: -.09em;
    left: -.03em;
    height: .12em;
    border-radius: 70% 30% 65% 35%;
    background: var(--sbv3-coral);
    content: "";
    opacity: .9;
    transform: rotate(-1.5deg) skewX(-14deg);
}

.sbv3-no-break { white-space: nowrap; }

/* Header */
.sbv3-header {
    position: sticky;
    z-index: 100;
    top: 0;
    width: 100%;
    border-bottom: 1px solid transparent;
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

.sbv3-header.is-scrolled {
    border-color: rgba(17, 21, 59, .1);
    background: rgba(255, 252, 247, .94);
    box-shadow: 0 8px 30px rgba(17, 21, 59, .06);
}

.sbv3-header__inner {
    display: flex;
    width: min(100% - clamp(30px, 5vw, 72px), 1420px);
    min-height: 72px;
    margin-inline: auto;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.sbv3-logo {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
}

.sbv3-logo img {
    width: 150px;
    height: auto;
}

.sbv3-primary-nav { display: flex; align-items: center; }
.sbv3-primary-nav__list { display: flex; margin: 0; padding: 0; align-items: center; gap: clamp(10px, 1.45vw, 23px); list-style: none; }
.sbv3-nav-group { position: static; }
.sbv3-nav-trigger,
.sbv3-nav-link { display: inline-flex; min-height: 44px; padding: 10px 3px; border: 0; align-items: center; gap: 8px; background: transparent; color: #252a4d; font-size: .79rem; font-weight: 650; white-space: nowrap; cursor: pointer; }
.sbv3-nav-trigger:hover,
.sbv3-nav-link:hover,
.sbv3-nav-trigger[aria-expanded="true"] { color: var(--sbv3-violet); }
.sbv3-chevron { width: 7px; height: 7px; margin-top: -4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; }
.sbv3-nav-trigger[aria-expanded="true"] .sbv3-chevron { margin-top: 4px; transform: rotate(225deg); }
.sbv3-primary-nav__mobile-actions { display: none; }
.sbv3-header .sbv3-primary-nav__mobile-actions { display: none; }

.sbv3-mega {
    position: absolute;
    z-index: 110;
    top: 100%;
    left: 50%;
    width: min(calc(100vw - 32px), 1160px);
    max-height: calc(100dvh - 92px);
    padding: 22px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid rgba(91, 54, 232, .13);
    border-radius: 0 0 28px 28px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 34px 90px rgba(32, 25, 79, .17);
    transform: translateX(-50%);
}
.sbv3-mega[hidden] { display: none; }
.sbv3-mega__heading { display: flex; margin-bottom: 18px; padding: 2px 4px 16px; border-bottom: 1px solid rgba(17, 21, 59, .09); align-items: end; justify-content: space-between; gap: 24px; }
.sbv3-mega__heading > div { display: grid; gap: 4px; }
.sbv3-mega__heading span { color: var(--sbv3-violet); font-size: .7rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.sbv3-mega__heading strong { font-size: 1.07rem; letter-spacing: -.02em; }
.sbv3-mega__heading > a { color: var(--sbv3-cobalt); font-size: .8rem; font-weight: 800; white-space: nowrap; }
.sbv3-service-tabs { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 8px; }
.sbv3-service-tab { display: grid; min-width: 0; min-height: 70px; padding: 9px 6px; border: 1px solid rgba(17, 21, 59, .09); border-radius: 16px; place-items: center; gap: 5px; background: #fbfaff; color: var(--sbv3-ink); cursor: pointer; transition: transform .2s var(--sbv3-ease), border-color .2s ease, background .2s ease; }
.sbv3-service-tab img { width: 28px; height: 28px; object-fit: contain; }
.sbv3-service-tab span { max-width: 100%; overflow: hidden; font-size: .67rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.sbv3-service-tab:hover { transform: translateY(-2px); }
.sbv3-service-tab[aria-selected="true"] { border-color: rgba(91, 54, 232, .38); background: linear-gradient(145deg, #fff, #f4efff 70%, #fff0f8); box-shadow: 0 10px 28px rgba(91, 54, 232, .12); color: var(--sbv3-violet); }
.sbv3-service-panel { padding: 22px 4px 3px; }
.sbv3-service-panel[hidden] { display: none; }
.sbv3-service-panel__head { display: flex; margin-bottom: 15px; align-items: start; justify-content: space-between; gap: 30px; }
.sbv3-service-panel__head > div { max-width: 780px; }
.sbv3-service-panel__head strong { font-size: .98rem; }
.sbv3-service-panel__head p { margin: 5px 0 0; color: var(--sbv3-muted); font-size: .76rem; line-height: 1.55; }
.sbv3-service-panel__head > a { padding-top: 3px; color: var(--sbv3-cobalt); font-size: .77rem; font-weight: 800; white-space: nowrap; }
.sbv3-service-panel__links { display: grid; margin: 0; padding: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px 12px; list-style: none; }
.sbv3-service-panel__links a { display: flex; min-height: 40px; padding: 9px 12px; border: 1px solid rgba(17, 21, 59, .08); border-radius: 11px; align-items: center; gap: 9px; background: #fcfcff; color: #343958; font-size: .73rem; font-weight: 650; }
.sbv3-service-panel__links a:hover { border-color: rgba(91, 54, 232, .3); background: #f7f3ff; color: var(--sbv3-violet); }
.sbv3-service-panel__links a span { color: var(--sbv3-pink); font-weight: 800; }
.sbv3-service-more { display: none; width: 100%; min-height: 44px; margin-top: 9px; padding: 9px 14px; border: 1px solid rgba(91,54,232,.16); border-radius: 12px; background: #f7f3ff; color: var(--sbv3-violet); font-size: .75rem; font-weight: 800; cursor: pointer; }
.sbv3-mega--platforms { max-width: 940px; }
.sbv3-mega-platform-grid { display: grid; margin: 0; padding: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; list-style: none; }
.sbv3-mega-platform-grid a { display: grid; min-height: 76px; padding: 12px 14px; border: 1px solid rgba(91, 54, 232, .11); border-radius: 17px; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(246,244,255,.86)); box-shadow: inset 0 1px #fff; }
.sbv3-mega-platform-grid a:hover { border-color: rgba(91,54,232,.32); transform: translateY(-2px); }
.sbv3-mega-platform-grid img { width: 38px; height: 38px; object-fit: contain; }
.sbv3-mega-platform-grid span { display: grid; }
.sbv3-mega-platform-grid strong { font-size: .84rem; }
.sbv3-mega-platform-grid small { color: var(--sbv3-muted); font-size: .65rem; }
.sbv3-mega-platform-grid b { color: var(--sbv3-violet); font-size: 1.35rem; font-weight: 500; }

.sbv3-header__actions,
.sbv3-hero__actions,
.sbv3-cta__actions,
.sbv3-primary-nav__mobile-actions,
.sbv3-how__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sbv3-btn {
    display: inline-flex;
    min-height: 46px;
    padding: 11px 20px;
    border: 1px solid transparent;
    border-radius: 15px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: .92rem;
    font-weight: 800;
    line-height: 1.2;
    transition: transform .25s var(--sbv3-ease), box-shadow .25s ease, background .25s ease, border-color .25s ease;
}

.sbv3-btn:hover {
    transform: translateY(-3px);
}

.sbv3-btn--primary {
    background: linear-gradient(115deg, #593fe6 5%, #8a4bea 53%, #f45d9e 100%);
    box-shadow: 0 12px 28px rgba(91, 54, 232, .22);
    color: #fff !important;
}

.sbv3-btn--primary:hover {
    background: var(--sbv3-violet-dark);
    box-shadow: 0 17px 34px rgba(91, 54, 232, .3);
}

.sbv3-btn--quiet {
    border-color: rgba(17, 21, 59, .18);
    background: rgba(255, 255, 255, .65);
    color: var(--sbv3-ink) !important;
}

.sbv3-btn--quiet:hover {
    border-color: var(--sbv3-violet);
    background: #fff;
}

.sbv3-btn--large {
    min-height: 57px;
    padding-inline: 28px;
    border-radius: 18px;
    font-size: 1rem;
}

.sbv3-text-link {
    display: inline-flex;
    padding: 10px 4px;
    align-items: center;
    gap: 8px;
    color: var(--sbv3-ink);
    font-weight: 800;
    text-decoration: underline !important;
    text-decoration-color: rgba(11, 94, 215, .45) !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 5px;
}

.sbv3-menu-toggle {
    display: none;
    min-width: 94px;
    min-height: 46px;
    padding: 5px 6px 5px 15px;
    border: 1px solid rgba(91, 54, 232, .16);
    border-radius: 999px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(246, 243, 255, .94));
    box-shadow: 0 9px 24px rgba(48, 31, 104, .09), inset 0 1px #fff;
    color: var(--sbv3-ink);
    cursor: pointer;
    transition: color .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease, transform .25s var(--sbv3-ease);
}

.sbv3-menu-toggle:hover { border-color: rgba(91, 54, 232, .36); transform: translateY(-1px); }
.sbv3-menu-toggle__label { font-size: .74rem; font-weight: 800; letter-spacing: .02em; }
.sbv3-menu-toggle__glyph {
    position: relative;
    display: block;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6747ed, #ec5da7);
    box-shadow: 0 7px 16px rgba(91, 54, 232, .24);
}
.sbv3-menu-toggle__glyph i { position: absolute; top: 50%; left: 50%; width: 14px; height: 1.5px; border-radius: 2px; background: #fff; transform: translate(-50%, calc(-50% - 3px)); transition: transform .28s var(--sbv3-ease); }
.sbv3-menu-toggle__glyph i:last-child { transform: translate(-50%, calc(-50% + 3px)); }
.sbv3-menu-toggle[aria-expanded="true"] { border-color: transparent; background: linear-gradient(115deg, #593fe6, #8a4bea 58%, #f45d9e); box-shadow: 0 14px 30px rgba(91, 54, 232, .25); color: #fff; }
.sbv3-menu-toggle[aria-expanded="true"] .sbv3-menu-toggle__glyph { background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); }
.sbv3-menu-toggle[aria-expanded="true"] .sbv3-menu-toggle__glyph i:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.sbv3-menu-toggle[aria-expanded="true"] .sbv3-menu-toggle__glyph i:last-child { transform: translate(-50%, -50%) rotate(-45deg); }

.sbv3-mobile-nav {
    width: min(100% - 30px, 720px);
    margin: 0 auto 16px;
    padding: 18px;
    border: 1px solid rgba(17, 21, 59, .12);
    border-radius: 24px;
    background: rgba(255, 255, 255, .96);
    box-shadow: var(--sbv3-shadow-md);
}

.sbv3-mobile-nav a:not(.sbv3-btn) {
    display: block;
    padding: 13px 10px;
    border-bottom: 1px solid rgba(17, 21, 59, .08);
    font-weight: 750;
}

.sbv3-mobile-nav__actions {
    margin-top: 16px;
}

.sbv3-mobile-nav__actions .sbv3-btn { flex: 1; }

/* Hero */
.sbv3-hero {
    position: relative;
    display: grid;
    min-height: min(700px, calc(100svh - 72px));
    overflow: clip;
    border-bottom: 1px solid rgba(17, 21, 59, .08);
    align-items: center;
    background:
        radial-gradient(circle at 79% 17%, rgba(117, 200, 255, .2), transparent 25rem),
        radial-gradient(circle at 72% 72%, rgba(246, 83, 166, .15), transparent 27rem),
        linear-gradient(112deg, #fffaf4 0%, #fffdf9 47%, #f6f5ff 100%);
}

.sbv3-hero::before {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(17, 21, 59, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17, 21, 59, .025) 1px, transparent 1px);
    background-size: 48px 48px;
    content: "";
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .3), transparent 76%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .3), transparent 76%);
}

.sbv3-hero__grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(500px, 1.08fr);
    gap: clamp(26px, 4vw, 68px);
    padding-block: 42px 64px;
    align-items: center;
}

.sbv3-hero__copy {
    position: relative;
    z-index: 4;
    max-width: 660px;
}

.sbv3-hero h1 {
    max-width: 650px;
    margin: 0;
    color: var(--sbv3-ink);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1;
}

.sbv3-brush { position: relative; display: block; width: max-content; max-width: 100%; font-family: "Dancing Script", "Segoe Script", "Segoe Print", cursive; font-size: clamp(4.25rem, 6.5vw, 6.55rem); font-weight: 700; letter-spacing: -.045em; line-height: .92; }
.sbv3-brush--ink { color: #071a38; transform: rotate(-1.2deg); }
.sbv3-brush--blue { margin-top: .14em; color: #075ed4; transform: rotate(.4deg); }
.sbv3-brush::after { position: absolute; right: -.03em; bottom: -.065em; left: 39%; height: .038em; border-radius: 80% 20% 70% 30%; background: #ff4e42; box-shadow: 0 .045em 0 rgba(255, 78, 66, .34); content: ""; transform: rotate(-2deg) skewX(-12deg); transform-origin: left; }
.sbv3-brush--blue::after { right: .04em; left: .02em; background: #075ed4; box-shadow: none; transform: rotate(1deg) skewX(-12deg); }
.sbv3-brush-rays,
.sbv3-brush-star { position: absolute; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.sbv3-brush-rays { top: -.08em; right: -.48em; width: .48em; height: .48em; stroke: #ff4e42; stroke-width: 3; }
.sbv3-brush-star { right: -.46em; bottom: .02em; width: .34em; height: .34em; stroke: #075ed4; stroke-width: 1.8; }

.sbv3-hero__lead {
    max-width: 57ch;
    margin: 24px 0 0;
    color: var(--sbv3-muted);
    font-size: clamp(.98rem, 1.12vw, 1.08rem);
    line-height: 1.68;
}
.sbv3-hero__lead strong { color: #172044; font-weight: 800; }

.sbv3-hero__actions {
    margin-top: 27px;
    flex-wrap: wrap;
}

.sbv3-hero__notes {
    display: flex;
    margin: 28px 0 0;
    padding: 0;
    flex-wrap: wrap;
    gap: 11px 24px;
    list-style: none;
    color: #343a59;
    font-size: .9rem;
    font-weight: 650;
}

.sbv3-hero__notes span {
    display: inline-grid;
    width: 21px;
    height: 21px;
    margin-right: 5px;
    border-radius: 50%;
    place-items: center;
    background: rgba(91, 54, 232, .11);
    color: var(--sbv3-violet);
    font-size: .72rem;
}

.sbv3-hero__visual {
    --sbv3-scene-rx: 0deg;
    --sbv3-scene-ry: 0deg;
    --sbv3-scene-shift-x: 0px;
    --sbv3-scene-shift-y: 0px;
    --sbv3-light-x: 62%;
    --sbv3-light-y: 34%;
    position: relative;
    z-index: 2;
    min-height: 550px;
    perspective: 1300px;
    transform: perspective(1300px) rotateX(var(--sbv3-scene-rx)) rotateY(var(--sbv3-scene-ry));
    transform-style: preserve-3d;
    transition: transform .7s var(--sbv3-ease);
    will-change: transform;
}

.sbv3-spatial-stage { position: absolute; inset: 1% -1% 0; transform-style: preserve-3d; transform: translate3d(var(--sbv3-scene-shift-x), var(--sbv3-scene-shift-y), 0) rotateX(2deg) rotateY(-3deg); transition: transform .7s var(--sbv3-ease); }
.sbv3-spatial-stage::before { position: absolute; z-index: -4; inset: 5% -1% 2%; border-radius: 48%; background: radial-gradient(circle at var(--sbv3-light-x) var(--sbv3-light-y), rgba(255,255,255,1) 0 10%, rgba(233,226,255,.76) 30%, rgba(195,222,255,.38) 55%, transparent 73%); content: ""; filter: blur(2px); transition: background .2s linear; }
.sbv3-spatial-stage::after { position: absolute; z-index: -3; inset: 8% 0 7%; border-radius: 45%; background-image: linear-gradient(rgba(108,87,239,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(108,87,239,.055) 1px, transparent 1px); background-size: 34px 34px; content: ""; opacity: .52; -webkit-mask-image: radial-gradient(ellipse, #000 18%, transparent 72%); mask-image: radial-gradient(ellipse, #000 18%, transparent 72%); transform: translateZ(-60px) rotateX(58deg); }
.sbv3-spatial-stage__orbit { position: absolute; z-index: -2; border: 1px solid rgba(99, 75, 238, .25); border-radius: 50%; pointer-events: none; }
.sbv3-spatial-stage__orbit--one { inset: 4% -4% 17% 1%; transform: rotate(-12deg); }
.sbv3-spatial-stage__orbit--two { inset: 14% 2% 9% 11%; border-style: dashed; border-color: rgba(246, 83, 166, .2); transform: rotate(18deg); }
.sbv3-spatial-stage__sphere { position: absolute; z-index: -1; top: 6%; right: 9%; width: 24px; height: 24px; border: 1px solid rgba(255,255,255,.9); border-radius: 50%; background: radial-gradient(circle at 32% 28%, #fff, #d9d0ff 45%, #8267ed 100%); box-shadow: 0 11px 25px rgba(88,64,220,.28); animation: sbv3-sphere-drift 7s ease-in-out 3; }
.sbv3-spatial-stage__ring { position: absolute; z-index: -1; right: 7%; bottom: 6%; left: 5%; height: 25%; border: 1px solid rgba(100, 81, 235, .24); border-radius: 50%; background: radial-gradient(ellipse, rgba(255,255,255,.96) 0 39%, rgba(133,108,250,.18) 42% 48%, rgba(255,255,255,.82) 51% 59%, rgba(135,110,255,.2) 62% 65%, transparent 68%); box-shadow: 0 33px 50px rgba(75,58,170,.18), inset 0 0 25px rgba(255,255,255,.9); transform: rotateX(67deg) translateZ(-30px); }
.sbv3-spatial-stage__base { position: absolute; z-index: -3; right: 7%; bottom: -1%; left: 4%; height: 20%; border-radius: 50%; background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(218,211,255,.68)); box-shadow: 0 25px 42px rgba(66,55,150,.19), inset 0 8px 16px rgba(255,255,255,.92); transform: rotateX(68deg) translateZ(-55px); }
.sbv3-spatial-card { --sbv3-card-rx: 0deg; --sbv3-card-ry: 0deg; --sbv3-card-lift: 0px; position: absolute; display: block; width: 28%; min-height: 92px; padding: 8px; border: 1px solid rgba(255,255,255,.98); border-radius: 16px; background: linear-gradient(150deg, rgba(255,255,255,.88), rgba(240,238,255,.66)); box-shadow: 0 18px 35px rgba(61,44,139,.13), inset 0 0 0 1px rgba(107,83,242,.1), inset 0 1px 0 #fff; color: #101633; transform-style: preserve-3d; transition: transform .48s var(--sbv3-ease), box-shadow .45s ease, border-color .35s ease, background .35s ease; will-change: transform; }
.sbv3-spatial-card::before { position: absolute; inset: 3px; z-index: -1; border: 1px solid rgba(123,101,242,.1); border-radius: 13px; background: linear-gradient(160deg, rgba(255,255,255,.72), rgba(238,235,255,.48)); content: ""; transform: translateZ(-8px); }
.sbv3-spatial-card::after { position: absolute; top: 0; left: -38%; width: 34%; height: 100%; border-radius: inherit; background: linear-gradient(105deg, transparent, rgba(255,255,255,.82), transparent); content: ""; opacity: 0; pointer-events: none; transform: skewX(-18deg); }
.sbv3-spatial-card__face { position: relative; display: grid; min-height: 54px; padding: 9px 10px; border: 1px solid rgba(255,255,255,.96); border-radius: 11px; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; background: rgba(255,255,255,.84); box-shadow: 0 5px 14px rgba(70,53,155,.08), inset 0 1px #fff; transform: translateZ(17px); }
.sbv3-spatial-card img { width: 34px; height: 34px; object-fit: contain; transform: translateZ(9px); }
.sbv3-spatial-card strong { min-width: 0; font-size: .69rem; font-weight: 750; white-space: nowrap; transform: translateZ(7px); }
.sbv3-spatial-card__arrow { color: #7974b0; font-size: 1.35rem; transform: translateZ(6px); }
.sbv3-spatial-card__symbol { position: absolute; right: 12px; bottom: 8px; width: 17px; height: 17px; overflow: visible; fill: none; stroke: #7569f2; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; transform: translateZ(14px); transition: transform .4s var(--sbv3-ease), stroke .3s ease; }
.sbv3-spatial-card--1 { top: 14%; left: 5%; transform: rotateY(8deg) rotateZ(-2deg) translateZ(25px) rotateX(var(--sbv3-card-rx)) rotateY(var(--sbv3-card-ry)) translateY(var(--sbv3-card-lift)); }
.sbv3-spatial-card--2 { top: 10%; left: 36%; transform: translateZ(68px) rotateX(var(--sbv3-card-rx)) rotateY(var(--sbv3-card-ry)) translateY(var(--sbv3-card-lift)); }
.sbv3-spatial-card--3 { top: 14%; right: 3%; transform: rotateY(-8deg) rotateZ(2deg) translateZ(28px) rotateX(var(--sbv3-card-rx)) rotateY(var(--sbv3-card-ry)) translateY(var(--sbv3-card-lift)); }
.sbv3-spatial-card--4 { top: 38%; left: 2%; transform: rotateY(8deg) rotateZ(1deg) translateZ(38px) rotateX(var(--sbv3-card-rx)) rotateY(var(--sbv3-card-ry)) translateY(var(--sbv3-card-lift)); }
.sbv3-spatial-card--5 { top: 35%; left: 35%; transform: translateZ(88px) rotateX(var(--sbv3-card-rx)) rotateY(var(--sbv3-card-ry)) translateY(var(--sbv3-card-lift)); }
.sbv3-spatial-card--6 { top: 39%; right: 2%; transform: rotateY(-8deg) rotateZ(-1deg) translateZ(42px) rotateX(var(--sbv3-card-rx)) rotateY(var(--sbv3-card-ry)) translateY(var(--sbv3-card-lift)); }
.sbv3-spatial-card--7 { top: 62%; left: 6%; transform: rotateY(7deg) rotateZ(-2deg) translateZ(35px) rotateX(var(--sbv3-card-rx)) rotateY(var(--sbv3-card-ry)) translateY(var(--sbv3-card-lift)); }
.sbv3-spatial-card--8 { top: 61%; left: 36%; transform: translateZ(70px) rotateX(var(--sbv3-card-rx)) rotateY(var(--sbv3-card-ry)) translateY(var(--sbv3-card-lift)); }
.sbv3-spatial-card--9 { top: 62%; right: 3%; transform: rotateY(-8deg) rotateZ(2deg) translateZ(32px) rotateX(var(--sbv3-card-rx)) rotateY(var(--sbv3-card-ry)) translateY(var(--sbv3-card-lift)); }

@media (hover: hover) and (pointer: fine) {
    .sbv3-spatial-card:hover { --sbv3-card-lift: -10px; border-color: rgba(130,106,245,.42); background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(239,232,255,.8)); box-shadow: 0 30px 52px rgba(77,55,180,.22), inset 0 0 0 1px rgba(116,91,241,.16), inset 0 1px #fff; }
    .sbv3-spatial-card:hover::after { opacity: .8; animation: sbv3-card-glint .8s var(--sbv3-ease) 1; }
    .sbv3-spatial-card:hover .sbv3-spatial-card__symbol { stroke: #ef4aa0; transform: translateZ(22px) scale(1.16) rotate(-5deg); }
}

.js .sbv3-page .sbv3-hero__visual[data-sbv3-reveal].is-visible {
    transform: perspective(1300px) rotateX(var(--sbv3-scene-rx)) rotateY(var(--sbv3-scene-ry));
}

.js .sbv3-hero__visual.is-visible .sbv3-spatial-card__face {
    animation: sbv3-card-arrive .72s var(--sbv3-ease) both;
}
.js .sbv3-hero__visual.is-visible .sbv3-spatial-card--2 .sbv3-spatial-card__face { animation-delay: 55ms; }
.js .sbv3-hero__visual.is-visible .sbv3-spatial-card--3 .sbv3-spatial-card__face { animation-delay: 110ms; }
.js .sbv3-hero__visual.is-visible .sbv3-spatial-card--4 .sbv3-spatial-card__face { animation-delay: 90ms; }
.js .sbv3-hero__visual.is-visible .sbv3-spatial-card--5 .sbv3-spatial-card__face { animation-delay: 145ms; }
.js .sbv3-hero__visual.is-visible .sbv3-spatial-card--6 .sbv3-spatial-card__face { animation-delay: 200ms; }
.js .sbv3-hero__visual.is-visible .sbv3-spatial-card--7 .sbv3-spatial-card__face { animation-delay: 180ms; }
.js .sbv3-hero__visual.is-visible .sbv3-spatial-card--8 .sbv3-spatial-card__face { animation-delay: 235ms; }
.js .sbv3-hero__visual.is-visible .sbv3-spatial-card--9 .sbv3-spatial-card__face { animation-delay: 290ms; }

.sbv3-hero__art {
    position: absolute;
    z-index: 1;
    right: -16%;
    bottom: -2%;
    width: 124%;
    max-width: none;
    border-radius: 42% 28% 28% 38%;
    opacity: .9;
    filter: saturate(.94) contrast(.98);
    -webkit-mask-image: linear-gradient(110deg, transparent 0%, #000 17%, #000 88%, transparent 100%);
    mask-image: linear-gradient(110deg, transparent 0%, #000 17%, #000 88%, transparent 100%);
    transform: translateZ(-80px) rotateX(2deg) rotateY(-3deg);
}

.sbv3-orbit {
    position: absolute;
    z-index: 3;
    top: 9%;
    right: 5%;
    width: 87%;
    aspect-ratio: 1;
    border: 1px dashed rgba(91, 54, 232, .24);
    border-radius: 50%;
    transform: rotateX(61deg) rotateZ(-12deg) translateZ(70px);
    transform-style: preserve-3d;
}

.sbv3-orbit::before,
.sbv3-orbit::after {
    position: absolute;
    border: 1px solid rgba(246, 83, 166, .2);
    border-radius: inherit;
    content: "";
}

.sbv3-orbit::before { inset: 12%; }
.sbv3-orbit::after { inset: 26%; border-color: rgba(11, 94, 215, .19); }

.sbv3-orbit__item {
    position: absolute;
    display: flex;
    min-width: 122px;
    padding: 11px 14px;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 17px;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 14px 34px rgba(46, 31, 107, .14), inset 0 0 0 1px rgba(91, 54, 232, .08);
    color: var(--sbv3-ink);
    font-size: .76rem;
    font-weight: 800;
    transform: rotateZ(12deg) rotateX(-61deg) translateZ(44px);
}

.sbv3-orbit__item img { width: 30px; height: 30px; object-fit: contain; }
.sbv3-orbit__item--1 { top: -2%; left: 39%; }
.sbv3-orbit__item--2 { top: 13%; right: 0; }
.sbv3-orbit__item--3 { top: 47%; right: 0; }
.sbv3-orbit__item--4 { right: 4%; bottom: 8%; }
.sbv3-orbit__item--5 { right: 33%; bottom: -7%; }
.sbv3-orbit__item--6 { bottom: 2%; left: 8%; }
.sbv3-orbit__item--7 { top: 49%; left: -9%; }
.sbv3-orbit__item--8 { top: 14%; left: -1%; }
.sbv3-orbit__item--9 { top: 36%; left: 38%; }

.sbv3-glass-note {
    position: absolute;
    z-index: 5;
    display: flex;
    padding: 13px 17px;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 18px;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, .76);
    box-shadow: var(--sbv3-shadow-sm);
    color: var(--sbv3-ink);
    font-size: .82rem;
    font-weight: 800;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.sbv3-glass-note__icon {
    display: grid;
    width: 32px;
    height: 32px;
    border-radius: 11px;
    place-items: center;
    background: linear-gradient(135deg, rgba(246, 83, 166, .2), rgba(117, 200, 255, .24));
    color: var(--sbv3-violet);
    font-size: 1.2rem;
}

.sbv3-glass-note--one { left: 3%; bottom: 19%; transform: translateZ(100px) rotate(-3deg); }
.sbv3-glass-note--two { right: 0; bottom: 28%; transform: translateZ(130px) rotate(3deg); }

.sbv3-aurora {
    position: absolute;
    z-index: 1;
    width: 55vw;
    height: 180px;
    border-radius: 50%;
    opacity: .22;
    filter: blur(38px);
    pointer-events: none;
}

.sbv3-aurora--one {
    right: -12%;
    bottom: -5%;
    background: linear-gradient(90deg, var(--sbv3-pink), var(--sbv3-sky), var(--sbv3-violet));
    transform: rotate(-9deg);
}

.sbv3-aurora--two {
    top: 7%;
    left: -31%;
    background: linear-gradient(90deg, var(--sbv3-yellow), var(--sbv3-pink));
    opacity: .12;
    transform: rotate(18deg);
}

.sbv3-scroll-cue {
    position: absolute;
    z-index: 5;
    bottom: 23px;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #666b82;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    transform: translateX(-50%);
}

.sbv3-scroll-cue span {
    display: block;
    width: 22px;
    height: 34px;
    border: 1px solid rgba(17, 21, 59, .32);
    border-radius: 14px;
}

.sbv3-scroll-cue span::after {
    display: block;
    width: 4px;
    height: 7px;
    margin: 7px auto 0;
    border-radius: 4px;
    background: var(--sbv3-coral);
    content: "";
}

.sbv3-platform-dock { position: relative; z-index: 12; height: 0; background: transparent; }
.sbv3-platform-dock__inner { display: grid; min-height: 92px; padding: 12px 20px; border: 1px solid rgba(91,54,232,.13); border-radius: 46px; grid-template-columns: repeat(9, minmax(0, 1fr)); background: rgba(255,255,255,.96); box-shadow: 0 22px 52px rgba(45,38,115,.16), inset 0 1px #fff; transform: translateY(-50%); }
.sbv3-platform-dock a { position: relative; display: grid; min-width: 0; padding: 5px 8px; place-items: center; gap: 3px; color: #202545; font-size: .61rem; font-weight: 650; }
.sbv3-platform-dock a + a::before { position: absolute; top: 15%; bottom: 15%; left: 0; width: 1px; background: rgba(17,21,59,.11); content: ""; }
.sbv3-platform-dock img { width: 38px; height: 38px; object-fit: contain; transition: transform .24s var(--sbv3-ease); }
.sbv3-platform-dock a:hover img { transform: translateY(-4px) scale(1.08); }

/* Goal bento */
.sbv3-goals {
    padding-top: clamp(110px, 9vw, 138px);
    background: #fff;
}

.sbv3-goals__layout { display: grid; grid-template-columns: minmax(230px, .28fr) minmax(0, .72fr); gap: clamp(30px, 4vw, 64px); align-items: start; }
.sbv3-goals .sbv3-section-head { margin: 0; }
.sbv3-goals .sbv3-section-head h2 { font-size: clamp(1.65rem, 2.5vw, 2.55rem); line-height: 1.12; }
.sbv3-goals .sbv3-section-head p:last-child { margin-top: 16px; font-size: .9rem; }

.sbv3-goal-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
}

.sbv3-goal {
    position: relative;
    display: grid;
    min-height: 250px;
    padding: 22px 18px;
    overflow: clip;
    border: 1px solid rgba(17, 21, 59, .11);
    border-radius: var(--sbv3-radius-md);
    grid-template-columns: 1fr;
    gap: 15px;
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 8px 0 rgba(17, 21, 59, .025);
    transition: transform .4s var(--sbv3-ease), box-shadow .4s ease, border-color .3s ease;
}

.sbv3-goal::after {
    position: absolute;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    content: "";
    opacity: .16;
    filter: blur(28px);
    pointer-events: none;
    right: -70px;
    bottom: -90px;
}

.sbv3-goal:hover {
    border-color: rgba(91, 54, 232, .25);
    box-shadow: var(--sbv3-shadow-sm);
    transform: translateY(-7px) rotateX(1deg);
}

.sbv3-goal--like,
.sbv3-goal--view,
.sbv3-goal--follow,
.sbv3-goal--talk { grid-column: auto; }

.sbv3-goal--like::after { background: var(--sbv3-pink); }
.sbv3-goal--follow::after { background: var(--sbv3-yellow); }
.sbv3-goal--view::after { background: var(--sbv3-sky); }
.sbv3-goal--talk::after { background: var(--sbv3-violet); }

.sbv3-goal__mark {
    display: grid;
    width: 47px;
    height: 47px;
    border-radius: 15px;
    place-items: center;
    background: linear-gradient(135deg, rgba(91,54,232,.9), rgba(246,83,166,.75));
    box-shadow: 0 10px 22px rgba(91,54,232,.2);
    color: #fff;
    font-family: "Dancing Script", cursive;
    font-weight: 700;
    font-size: 1.25rem;
    transform: rotate(-3deg);
}

.sbv3-goal h3 {
    max-width: 520px;
    margin: 0 0 9px;
    font-size: clamp(.93rem, 1.2vw, 1.07rem);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.15;
}

.sbv3-goal p {
    max-width: 54ch;
    margin: 0;
    color: var(--sbv3-muted);
    font-size: .74rem;
    line-height: 1.58;
}

.sbv3-goal .sbv3-inline-links { display: none; }

.sbv3-inline-links {
    display: flex;
    margin-top: 22px;
    flex-wrap: wrap;
    gap: 8px;
}

.sbv3-inline-links a,
.sbv3-platform__links a,
.sbv3-policy-links a {
    display: inline-flex;
    min-height: 36px;
    padding: 8px 12px;
    border: 1px solid rgba(17, 21, 59, .13);
    border-radius: 999px;
    align-items: center;
    background: rgba(255, 255, 255, .68);
    color: #252a4d;
    font-size: .78rem;
    font-weight: 750;
    transition: border-color .2s ease, color .2s ease, transform .2s ease, background .2s ease;
}

.sbv3-inline-links a:hover,
.sbv3-platform__links a:hover,
.sbv3-policy-links a:hover {
    border-color: var(--sbv3-cobalt);
    background: #fff;
    color: var(--sbv3-cobalt);
    transform: translateY(-2px);
}

/* Platform service menu */
.sbv3-platforms {
    overflow: clip;
    padding-block: clamp(82px, 8vw, 116px);
    background:
        linear-gradient(180deg, rgba(247, 245, 255, .92), #fff 45%, rgba(255, 249, 242, .76));
}

.sbv3-platforms::before {
    position: absolute;
    inset: 7% 0 auto;
    height: 420px;
    background: radial-gradient(ellipse at center, rgba(246, 83, 166, .1), transparent 66%);
    content: "";
    pointer-events: none;
}

.sbv3-platform-grid { position: relative; display: grid; grid-auto-flow: dense; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: clamp(14px, 1.5vw, 22px); }

.sbv3-platform {
    position: relative;
    min-height: 0;
    padding: 0;
    overflow: clip;
    isolation: isolate;
    border: 1px solid rgba(29, 24, 75, .1);
    border-radius: 26px 26px 26px 10px;
    grid-column: auto;
    background:
        radial-gradient(circle at 94% -5%, color-mix(in srgb, var(--sbv3-platform-color) 11%, transparent), transparent 42%),
        linear-gradient(145deg, rgba(255,255,255,.97), rgba(249,248,255,.9));
    box-shadow: inset 0 1px 0 #fff, 0 16px 42px rgba(50, 36, 100, .065);
    transition: box-shadow .35s ease, border-color .3s ease, transform .35s var(--sbv3-ease);
}

.sbv3-platform::before {
    position: absolute;
    z-index: 0;
    top: -52px;
    right: -36px;
    width: 156px;
    height: 156px;
    border-radius: 48%;
    background: var(--sbv3-platform-color, var(--sbv3-violet));
    content: "";
    opacity: .055;
    filter: blur(20px);
    pointer-events: none;
}

.sbv3-platform::after { position: absolute; z-index: 2; top: 0; left: 23px; width: 58px; height: 3px; border-radius: 99px; background: var(--sbv3-platform-color); content: ""; opacity: .78; transform: rotate(-2deg); transform-origin: left; }
.sbv3-platform.is-open { border-color: color-mix(in srgb, var(--sbv3-platform-color) 30%, rgba(91,54,232,.16)); box-shadow: 0 24px 64px rgba(49,35,111,.12), inset 0 1px #fff; }
.sbv3-platform__summary:focus-visible { outline: none; box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--sbv3-platform-color) 62%, #0b5ed7); border-radius: 23px 23px 12px 8px; }

.sbv3-platform--facebook { --sbv3-platform-color: #1877f2; }
.sbv3-platform--tiktok { --sbv3-platform-color: #ff0050; }
.sbv3-platform--youtube { --sbv3-platform-color: #ff0000; }
.sbv3-platform--instagram { --sbv3-platform-color: #e1306c; }
.sbv3-platform--twitter { --sbv3-platform-color: #111; }
.sbv3-platform--telegram { --sbv3-platform-color: #229ed9; }
.sbv3-platform--threads { --sbv3-platform-color: #111; }
.sbv3-platform--shopee { --sbv3-platform-color: #ee4d2d; }
.sbv3-platform--lazada { --sbv3-platform-color: #5b2ae8; }

.sbv3-platform__heading { position: relative; z-index: 1; margin: 0; }
.sbv3-platform__summary { display: grid; width: 100%; min-height: 138px; padding: 20px; border: 0; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon copy" "icon meta"; align-items: center; gap: 7px 16px; background: transparent; color: var(--sbv3-ink); text-align: left; cursor: pointer; }
.sbv3-platform__icon { display: grid; width: 56px; height: 56px; border: 1px solid rgba(17,21,59,.075); border-radius: 18px; grid-area: icon; place-items: center; background: rgba(255,255,255,.88); box-shadow: inset 0 1px #fff, 0 10px 24px rgba(46,38,94,.09); transition: transform .3s var(--sbv3-ease), box-shadow .3s ease; }
.sbv3-platform__icon img { width: 36px; height: 36px; object-fit: contain; }
.sbv3-platform__copy { display: grid; min-width: 0; grid-area: copy; gap: 4px; }
.sbv3-platform__name { color: var(--sbv3-platform-color); font-size: .75rem; font-weight: 800; letter-spacing: .065em; line-height: 1.3; text-transform: uppercase; }
.sbv3-platform__title { max-width: 36ch; color: var(--sbv3-ink); font-size: clamp(.88rem, .95vw, .98rem); font-weight: 750; letter-spacing: -.026em; line-height: 1.38; }
.sbv3-platform__meta { display: flex; min-width: 0; grid-area: meta; align-items: center; justify-content: space-between; gap: 10px; color: var(--sbv3-muted); }
.sbv3-platform__count { overflow: hidden; font-size: .68rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.sbv3-platform__action { display: inline-flex; min-height: 38px; padding: 4px 5px 4px 12px; border: 1px solid rgba(91,54,232,.14); border-radius: 999px; align-items: center; gap: 8px; background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(242,239,255,.88)); box-shadow: 0 7px 18px rgba(54,39,120,.08), inset 0 1px #fff; color: var(--sbv3-violet); font-size: .68rem; font-weight: 800; white-space: nowrap; transition: color .25s ease, background .25s ease, border-color .25s ease, transform .3s var(--sbv3-ease); }
.sbv3-platform__action svg { width: 27px; height: 27px; padding: 6px; overflow: visible; border-radius: 50%; background: rgba(91,54,232,.1); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .32s var(--sbv3-ease), background .25s ease; }
.sbv3-platform.is-open .sbv3-platform__action { border-color: color-mix(in srgb, var(--sbv3-platform-color) 24%, rgba(91,54,232,.15)); background: color-mix(in srgb, var(--sbv3-platform-color) 7%, white); color: var(--sbv3-platform-color); }
.sbv3-platform.is-open .sbv3-platform__action svg { background: color-mix(in srgb, var(--sbv3-platform-color) 12%, white); transform: rotate(180deg); }
.sbv3-platform__panel { position: relative; z-index: 1; display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: grid-template-rows .38s var(--sbv3-ease), opacity .22s ease, transform .34s var(--sbv3-ease), visibility 0s linear .38s; }
.sbv3-platform.is-open .sbv3-platform__panel { grid-template-rows: 1fr; opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.sbv3-platform__panel-inner { min-height: 0; overflow: hidden; }
.sbv3-platform__panel-inner > p { margin: 0; padding: 0 20px 17px; color: var(--sbv3-muted); font-size: .78rem; line-height: 1.65; }
.sbv3-platform__links {
    display: grid;
    margin: 0;
    padding: 17px 20px;
    border-top: 1px solid rgba(17,21,59,.08);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    list-style: none;
}
.sbv3-platform__links a { display: flex; min-height: 42px; padding: 9px 11px; border: 1px solid rgba(17,21,59,.075); border-radius: 12px; align-items: center; gap: 8px; background: rgba(248,247,252,.88); color: #313651; font-size: .72rem; font-weight: 700; line-height: 1.35; }
.sbv3-platform__links a > span { color: var(--sbv3-platform-color); font-size: .68rem; }
.sbv3-platform__all { display: inline-flex; min-height: 44px; margin: 3px 20px 20px; align-items: center; gap: 8px; color: var(--sbv3-cobalt); font-size: .78rem; font-weight: 800; }

@media (hover: hover) and (pointer: fine) {
    .sbv3-platform:hover { border-color: rgba(91,54,232,.22); box-shadow: 0 24px 60px rgba(48,34,106,.11), inset 0 1px #fff; transform: translateY(-3px); }
    .sbv3-platform__summary:hover .sbv3-platform__icon { box-shadow: inset 0 1px #fff, 0 14px 30px rgba(46,38,94,.14); transform: translateY(-2px) rotate(-2deg); }
    .sbv3-platform__summary:hover .sbv3-platform__action { border-color: rgba(91,54,232,.3); transform: translateY(-1px); }
    .sbv3-platform__summary:hover .sbv3-platform__action svg { transform: translateY(2px); }
    .sbv3-platform.is-open .sbv3-platform__summary:hover .sbv3-platform__action svg { transform: rotate(180deg) translateY(2px); }
}

@media (min-width: 981px) {
    .sbv3-platform.is-open { grid-column: 1 / -1; }
    .sbv3-platform.is-open .sbv3-platform__summary { min-height: 112px; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icon copy meta"; }
    .sbv3-platform.is-open .sbv3-platform__meta { justify-content: flex-end; }
    .sbv3-platform.is-open .sbv3-platform__links { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 701px) and (max-width: 1180px) {
    .sbv3-platform__summary { min-height: 132px; }
    .sbv3-platform__count { display: none; }
    .sbv3-platform__action > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .sbv3-platform__action { min-width: 38px; padding: 4px; justify-content: center; }
}

/* Animated platform experiences */
.sbv3-experience {
    background: var(--sbv3-paper);
}

.sbv3-demo {
    display: grid;
    min-height: 590px;
    padding: clamp(36px, 6vw, 78px);
    overflow: clip;
    border: 1px solid rgba(17, 21, 59, .1);
    border-radius: clamp(28px, 4vw, 48px);
    grid-template-columns: minmax(0, .9fr) minmax(430px, 1.1fr);
    gap: clamp(34px, 6vw, 92px);
    align-items: center;
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 32px 100px rgba(40, 26, 93, .08);
}

.sbv3-demo + .sbv3-demo { margin-top: clamp(26px, 4vw, 48px); }
.sbv3-demo:nth-of-type(even) { grid-template-columns: minmax(430px, 1.1fr) minmax(0, .9fr); }

.sbv3-demo--facebook {
    background:
        radial-gradient(circle at 78% 28%, rgba(24, 119, 242, .16), transparent 23rem),
        linear-gradient(135deg, rgba(255, 255, 255, .82), rgba(239, 246, 255, .88));
}

.sbv3-demo--video {
    background:
        radial-gradient(circle at 24% 42%, rgba(246, 83, 166, .16), transparent 24rem),
        linear-gradient(135deg, #fff8fc, #f8f5ff);
}

.sbv3-demo--community {
    background:
        radial-gradient(circle at 78% 48%, rgba(117, 200, 255, .18), transparent 24rem),
        linear-gradient(135deg, #f6fbff, #fff);
}

.sbv3-demo--commerce {
    background:
        radial-gradient(circle at 20% 58%, rgba(255, 209, 102, .22), transparent 23rem),
        linear-gradient(135deg, #fffaf0, #fff7f1);
}

.sbv3-demo__copy h3 {
    font-size: clamp(2rem, 3.6vw, 3.5rem);
}

.sbv3-demo__logo {
    width: 48px;
    height: 48px;
    margin-bottom: 24px;
}

.sbv3-demo__logos {
    display: flex;
    margin-bottom: 24px;
    gap: 10px;
}

.sbv3-demo__logos img {
    width: 44px;
    height: 44px;
    padding: 8px;
    border: 1px solid rgba(17, 21, 59, .1);
    border-radius: 15px;
    background: rgba(255, 255, 255, .75);
    object-fit: contain;
    box-shadow: var(--sbv3-shadow-sm);
}

/* Facebook phone */
.sbv3-phone-stage {
    position: relative;
    min-height: 520px;
    perspective: 1200px;
}

.sbv3-demo-label {
    position: absolute;
    z-index: 8;
    top: 3%;
    right: 2%;
    padding: 7px 11px;
    border: 1px solid rgba(17, 21, 59, .12);
    border-radius: 999px;
    background: rgba(255, 255, 255, .86);
    color: var(--sbv3-muted);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sbv3-phone {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 52%;
    width: min(286px, 66%);
    aspect-ratio: 9 / 18.4;
    padding: 13px;
    border: 2px solid rgba(255, 255, 255, .95);
    border-radius: 51px;
    background: #10121d;
    box-shadow:
        0 42px 80px rgba(25, 42, 83, .25),
        inset 0 0 0 2px rgba(255, 255, 255, .2),
        10px 0 0 -5px #292c3a;
    transform: translate(-50%, -50%) rotateY(-10deg) rotateX(3deg) rotateZ(2deg);
    transform-style: preserve-3d;
}

.sbv3-phone__island {
    position: absolute;
    z-index: 5;
    top: 21px;
    left: 50%;
    width: 88px;
    height: 24px;
    border-radius: 20px;
    background: #08090e;
    transform: translateX(-50%);
}

.sbv3-phone__screen {
    height: 100%;
    padding-top: 47px;
    overflow: hidden;
    border-radius: 39px;
    background: #fff;
    color: #12131b;
}

.sbv3-post__head {
    display: grid;
    padding: 10px 13px 9px;
    grid-template-columns: auto 1fr auto;
    gap: 9px;
    align-items: center;
    font-family: system-ui, sans-serif;
    font-size: .7rem;
}

.sbv3-post__head small { display: block; margin-top: 2px; color: #777; font-size: .56rem; }
.sbv3-post__avatar { display: grid; width: 34px; height: 34px; border-radius: 50%; place-items: center; background: linear-gradient(135deg, #1877f2, #9ec8ff); color: #fff; font-weight: 800; }
.sbv3-post__copy { margin: 0; padding: 0 13px 11px; font-family: system-ui, sans-serif; font-size: .65rem; line-height: 1.45; }
.sbv3-post__image { width: 100%; aspect-ratio: 1.22; object-fit: cover; }
.sbv3-post__summary { display: grid; padding: 10px 12px; grid-template-columns: auto 1fr auto; gap: 5px; border-bottom: 1px solid #e5e7eb; color: #65676b; font-family: system-ui, sans-serif; font-size: .58rem; }
.sbv3-post__reaction-mini { display: flex; align-items: center; }
.sbv3-post__reaction-mini img { width: 18px; height: 18px; margin-left: -4px; border: 2px solid #fff; border-radius: 50%; }
.sbv3-post__reaction-mini img:first-child { margin-left: 0; }
.sbv3-post__actions { display: flex; padding: 11px 12px; justify-content: space-around; color: #65676b; font-family: system-ui, sans-serif; font-size: .56rem; font-weight: 650; }

.sbv3-reaction-field { position: absolute; z-index: 5; inset: 0; pointer-events: none; }
.sbv3-reaction { position: absolute; width: 42px; height: 42px; opacity: 0; filter: drop-shadow(0 10px 13px rgba(28, 46, 87, .18)); }
.sbv3-reaction--1 { left: 10%; bottom: 22%; }
.sbv3-reaction--2 { left: 22%; bottom: 7%; }
.sbv3-reaction--3 { right: 14%; bottom: 14%; }
.sbv3-reaction--4 { top: 21%; right: 6%; }
.sbv3-reaction--5 { top: 12%; left: 12%; }
.sbv3-reaction--6 { left: 3%; bottom: 46%; }
.sbv3-reaction--7 { top: 39%; right: 0; }
.sbv3-reaction--8 { top: 3%; right: 25%; }

/* Video stack */
.sbv3-video-stack {
    position: relative;
    min-height: 590px;
    perspective: 1300px;
    transform-style: preserve-3d;
}

.sbv3-video-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(286px, 56%);
    aspect-ratio: 9 / 16;
    padding: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .92);
    border-radius: 34px;
    background: #111;
    box-shadow: 0 34px 80px rgba(49, 28, 91, .23);
    transform-style: preserve-3d;
}

.sbv3-video-card > img { width: 100%; height: 100%; border-radius: 25px; object-fit: cover; }
.sbv3-video-card--tiktok { z-index: 3; transform: translate(-50%, -50%) rotateY(-7deg) translateZ(70px); }
.sbv3-video-card--instagram { z-index: 2; transform: translate(-90%, -48%) rotateY(13deg) rotateZ(-5deg) translateZ(-20px); }
.sbv3-video-card--youtube { z-index: 1; transform: translate(-10%, -48%) rotateY(-16deg) rotateZ(5deg) translateZ(-55px); }

.sbv3-video-card__brand,
.sbv3-video-card__metric {
    position: absolute;
    z-index: 4;
    display: flex;
    padding: 8px 10px;
    border-radius: 13px;
    align-items: center;
    gap: 7px;
    background: rgba(18, 19, 30, .72);
    color: #fff;
    font-size: .7rem;
    font-weight: 800;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.sbv3-video-card__brand { top: 22px; left: 22px; }
.sbv3-video-card__brand img { width: 22px; height: 22px; }
.sbv3-video-card__metric { right: 22px; bottom: 38px; }
.sbv3-video-card__bar { position: absolute; z-index: 5; right: 24px; bottom: 22px; left: 24px; height: 4px; border-radius: 4px; background: #fff; transform: scaleX(.14); transform-origin: left; }

/* Community map */
.sbv3-community-map {
    position: relative;
    min-height: 500px;
    overflow: hidden;
    border: 1px solid rgba(117, 200, 255, .28);
    border-radius: 42px;
    background:
        radial-gradient(circle at 50% 50%, rgba(117, 200, 255, .24), transparent 33%),
        rgba(255, 255, 255, .56);
    perspective: 1000px;
}

.sbv3-community-map__lines { position: absolute; inset: 8% 4%; width: 92%; height: 84%; }
.sbv3-community-map__lines path { fill: none; stroke: rgba(11, 94, 215, .35); stroke-width: 2; stroke-dasharray: 10 8; stroke-dashoffset: 400; }
.sbv3-community-node { position: absolute; z-index: 3; display: grid; width: 164px; padding: 18px; border: 1px solid rgba(255, 255, 255, .94); border-radius: 25px; place-items: center; gap: 7px; background: rgba(255, 255, 255, .78); box-shadow: var(--sbv3-shadow-sm); font-weight: 800; text-align: center; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.sbv3-community-node img { width: 46px; height: 46px; object-fit: contain; }
.sbv3-community-node small { color: var(--sbv3-muted); font-size: .67rem; font-weight: 650; }
.sbv3-community-node--telegram { top: 50%; left: 5%; transform: translateY(-50%) rotateY(8deg); }
.sbv3-community-node--threads { top: 50%; left: 50%; transform: translate(-50%, -50%) translateZ(70px); }
.sbv3-community-node--twitter { top: 50%; right: 5%; transform: translateY(-50%) rotateY(-8deg); }
.sbv3-community-pulse { position: absolute; z-index: 2; width: 15px; height: 15px; border: 4px solid #fff; border-radius: 50%; background: var(--sbv3-coral); box-shadow: 0 0 0 10px rgba(246, 83, 166, .12); opacity: 0; }
.sbv3-community-pulse--one { top: 24%; left: 32%; }
.sbv3-community-pulse--two { right: 29%; bottom: 24%; background: var(--sbv3-cobalt); }
.sbv3-community-pulse--three { top: 50%; left: 50%; background: var(--sbv3-violet); }

/* Commerce fold */
.sbv3-commerce-stage {
    position: relative;
    min-height: 530px;
    perspective: 1200px;
    transform-style: preserve-3d;
}

.sbv3-commerce-card {
    position: absolute;
    display: flex;
    width: min(360px, 70%);
    min-height: 310px;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, .92);
    border-radius: 30px;
    flex-direction: column;
    gap: 14px;
    background: rgba(255, 255, 255, .82);
    box-shadow: var(--sbv3-shadow-md);
    transform-origin: bottom center;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.sbv3-commerce-card--shopee { z-index: 3; top: 10%; left: 5%; transform: rotateY(10deg) rotateZ(-4deg) translateZ(50px); }
.sbv3-commerce-card--lazada { z-index: 2; right: 3%; bottom: 3%; transform: rotateY(-11deg) rotateZ(4deg) translateZ(-10px); }
.sbv3-commerce-card__brand { display: flex; margin-bottom: 10px; align-items: center; gap: 12px; font-weight: 800; }
.sbv3-commerce-card__brand img { width: 42px; height: 42px; object-fit: contain; }
.sbv3-commerce-card strong { font-size: 1.35rem; letter-spacing: -.03em; }
.sbv3-commerce-card > span:not(.sbv3-commerce-card__brand) { padding: 10px 14px; border: 1px solid rgba(17, 21, 59, .1); border-radius: 14px; background: rgba(255, 249, 242, .8); color: var(--sbv3-muted); font-size: .82rem; font-weight: 700; }
.sbv3-commerce-box { position: absolute; z-index: 4; right: 8%; top: 6%; display: grid; width: 76px; height: 76px; border-radius: 25px; place-items: center; background: linear-gradient(135deg, var(--sbv3-yellow), #ff9f69); box-shadow: var(--sbv3-shadow-sm); color: var(--sbv3-ink); font-family: "Dancing Script", cursive; font-size: 2rem; font-weight: 700; transform: rotate(7deg) translateZ(90px); }

/* Process */
.sbv3-how {
    overflow: clip;
    background:
        linear-gradient(rgba(11, 94, 215, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(11, 94, 215, .035) 1px, transparent 1px),
        var(--sbv3-paper);
    background-size: 32px 32px;
}

.sbv3-process {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.sbv3-process__line { position: absolute; z-index: 0; top: -30px; left: 1%; width: 98%; height: 180px; overflow: visible; }
.sbv3-process__line path { fill: none; stroke: var(--sbv3-cobalt); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 8 12; stroke-dashoffset: 460; opacity: .45; }
.sbv3-process__step { position: relative; z-index: 2; min-height: 220px; padding: 26px 22px; border: 1px solid rgba(17, 21, 59, .12); border-radius: 27px 27px 27px 7px; background: rgba(255, 255, 255, .84); box-shadow: 8px 8px 0 rgba(11, 94, 215, .06); transform: rotate(-1deg); }
.sbv3-process__step:nth-of-type(even) { margin-top: 50px; border-radius: 27px 7px 27px 27px; transform: rotate(1deg); }
.sbv3-process__step > span { display: inline-flex; margin-bottom: 28px; color: var(--sbv3-coral); font-family: "Dancing Script", cursive; font-size: 1.55rem; font-weight: 700; }
.sbv3-process__step h3 { margin: 0 0 13px; font-size: 1.25rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.25; }
.sbv3-process__step p { margin: 0; color: var(--sbv3-muted); font-size: .9rem; }
.sbv3-how__actions { margin-top: 52px; justify-content: center; flex-wrap: wrap; }

/* Audience */
.sbv3-audience { background: linear-gradient(180deg, #fff, var(--sbv3-pearl)); }
.sbv3-audience-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; perspective: 1200px; }
.sbv3-audience-card { --sbv3-tilt-x: 0deg; --sbv3-tilt-y: 0deg; position: relative; min-height: 310px; padding: 32px; overflow: hidden; border: 1px solid rgba(17, 21, 59, .11); border-radius: 32px; background: rgba(255, 255, 255, .76); box-shadow: inset 0 1px 0 #fff, var(--sbv3-shadow-sm); transform: perspective(1000px) rotateX(var(--sbv3-tilt-x)) rotateY(var(--sbv3-tilt-y)); transition: transform .18s ease-out, box-shadow .3s ease; }
.sbv3-audience-card:hover { box-shadow: var(--sbv3-shadow-md); }
.sbv3-audience-card::after { position: absolute; right: -70px; bottom: -70px; width: 200px; height: 200px; border: 1px dashed rgba(91, 54, 232, .24); border-radius: 50%; content: ""; }
.sbv3-audience-card__num { color: var(--sbv3-coral); font-family: "Dancing Script", cursive; font-size: 1.3rem; font-weight: 700; }
.sbv3-audience-card__icon { display: grid; width: 62px; height: 62px; margin: 32px 0 22px; border-radius: 20px; place-items: center; background: linear-gradient(135deg, rgba(246, 83, 166, .18), rgba(117, 200, 255, .23)); color: var(--sbv3-violet); font-size: 1.8rem; transform: rotate(-4deg); }
.sbv3-audience-card h3 { margin: 0 0 14px; font-size: 1.5rem; font-weight: 800; letter-spacing: -.035em; }
.sbv3-audience-card p { margin: 0 0 25px; color: var(--sbv3-muted); }
.sbv3-audience-card a { color: var(--sbv3-cobalt); font-size: .88rem; font-weight: 800; }

/* Partner pricing */
.sbv3-partner-pricing { overflow: clip; background: linear-gradient(180deg, #fff 0%, #f8f5ff 54%, #fff8f1 100%); }
.sbv3-partner-pricing::before { position: absolute; top: 8%; right: -12%; width: 42vw; height: 42vw; border-radius: 50%; background: radial-gradient(circle, rgba(246,83,166,.11), transparent 68%); content: ""; pointer-events: none; }
.sbv3-pricing-grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.sbv3-price-card { position: relative; display: flex; min-height: 430px; padding: 28px 24px 24px; overflow: clip; border: 1px solid rgba(17,21,59,.11); border-radius: 28px; flex-direction: column; background: rgba(255,255,255,.86); box-shadow: 0 22px 60px rgba(50,36,100,.07), inset 0 1px #fff; transition: transform .35s var(--sbv3-ease), border-color .3s ease, box-shadow .3s ease; }
.sbv3-price-card::after { position: absolute; right: -62px; bottom: -66px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(117,200,255,.2), transparent 67%); content: ""; pointer-events: none; }
.sbv3-price-card--accent { border-color: rgba(91,54,232,.35); background: linear-gradient(155deg, rgba(255,255,255,.96), rgba(244,239,255,.94) 60%, rgba(255,234,246,.82)); box-shadow: 0 28px 72px rgba(91,54,232,.15), inset 0 1px #fff; }
.sbv3-price-card:hover { border-color: rgba(91,54,232,.34); box-shadow: 0 30px 70px rgba(63,44,139,.13), inset 0 1px #fff; transform: translateY(-7px); }
.sbv3-price-card__index { display: inline-flex; width: 44px; height: 44px; margin-bottom: 26px; border: 1px solid rgba(91,54,232,.15); border-radius: 15px; align-items: center; justify-content: center; background: #f8f5ff; color: var(--sbv3-violet); font-family: "Dancing Script", cursive; font-size: 1.15rem; font-weight: 700; }
.sbv3-price-card__type { margin: 0 0 5px; color: var(--sbv3-coral); font-size: .67rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.sbv3-price-card h3 { margin: 0 0 14px; color: var(--sbv3-ink); font-size: clamp(1.3rem, 1.8vw, 1.7rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.1; }
.sbv3-price-card > strong { min-height: 48px; color: var(--sbv3-violet); font-size: .86rem; line-height: 1.45; }
.sbv3-price-card ul { display: grid; margin: 21px 0 24px; padding: 0; gap: 10px; list-style: none; color: var(--sbv3-muted); font-size: .75rem; line-height: 1.5; }
.sbv3-price-card li { position: relative; padding-left: 18px; }
.sbv3-price-card li::before { position: absolute; top: .52em; left: 0; width: 7px; height: 7px; border: 2px solid #7b64ed; border-radius: 50%; content: ""; }
.sbv3-price-card > a { position: relative; z-index: 2; display: inline-flex; min-height: 44px; margin-top: auto; border-top: 1px solid rgba(17,21,59,.09); align-items: end; gap: 8px; color: var(--sbv3-cobalt); font-size: .77rem; font-weight: 800; }
.sbv3-pricing-note { max-width: 1040px; margin: 30px auto 0; padding: 15px 20px; border: 1px solid rgba(91,54,232,.12); border-radius: 17px; background: rgba(255,255,255,.7); color: var(--sbv3-muted); font-size: .76rem; text-align: center; }
.sbv3-pricing-note a { color: var(--sbv3-cobalt); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }

/* Trust and credit */
.sbv3-trust { background: var(--sbv3-ink); color: #fff; }
.sbv3-trust__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr); gap: clamp(50px, 8vw, 120px); align-items: center; }
.sbv3-trust__copy h2 { color: #fff; }
.sbv3-trust__copy .sbv3-hand { color: #bcd8ff; text-decoration-color: #ff8d78; }
.sbv3-trust__copy > p { color: rgba(255, 255, 255, .72); }
.sbv3-policy-links { display: flex; margin-top: 30px; flex-wrap: wrap; gap: 9px; }
.sbv3-policy-links a { border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .07); color: #fff; }
.sbv3-credit { --sbv3-tilt-x: 0deg; --sbv3-tilt-y: 0deg; position: relative; display: flex; min-height: 410px; padding: 42px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .36); border-radius: 38px; flex-direction: column; background: linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(219, 215, 255, .75)); box-shadow: 0 45px 100px rgba(0, 0, 0, .28), inset 0 1px 0 #fff; color: var(--sbv3-ink); transform: perspective(1000px) rotateX(var(--sbv3-tilt-x)) rotateY(var(--sbv3-tilt-y)) rotateZ(2deg); transition: transform .18s ease-out; }
.sbv3-credit::before { position: absolute; inset: auto -30% -55% 12%; height: 300px; border-radius: 50%; background: linear-gradient(90deg, var(--sbv3-pink), var(--sbv3-sky), var(--sbv3-yellow)); content: ""; opacity: .4; filter: blur(40px); }
.sbv3-credit > * { position: relative; z-index: 2; }
.sbv3-credit > img { width: 136px; height: 40px; margin-bottom: auto; }
.sbv3-credit p { margin: 40px 0 4px; color: var(--sbv3-muted); font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.sbv3-credit strong { font-size: clamp(2.2rem, 4vw, 3.7rem); letter-spacing: -.06em; line-height: 1; }
.sbv3-credit > span:not(.sbv3-credit__shine) { position: absolute; top: 38px; right: 38px; color: var(--sbv3-violet); font-family: "Dancing Script", cursive; font-size: 2rem; font-weight: 700; }
.sbv3-credit a { margin-top: 36px; color: var(--sbv3-cobalt); font-weight: 800; }
.sbv3-credit__shine { position: absolute !important; z-index: 1 !important; top: -30%; left: -24%; width: 35%; height: 150%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent); transform: rotate(22deg); opacity: .5; }

/* FAQ */
.sbv3-faq { background: var(--sbv3-paper); }
.sbv3-faq__grid { display: grid; grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr); gap: clamp(46px, 8vw, 116px); align-items: start; }
.sbv3-faq__intro { position: sticky; top: 120px; }
.sbv3-faq__intro .sbv3-btn { margin-top: 30px; }
.sbv3-faq__list { border-top: 1px solid var(--sbv3-line); }
.sbv3-faq-item { border-bottom: 1px solid var(--sbv3-line); }
.sbv3-faq-item summary { display: grid; min-height: 86px; padding: 25px 0; grid-template-columns: 1fr auto; gap: 18px; align-items: center; color: var(--sbv3-ink); font-size: clamp(1rem, 1.4vw, 1.13rem); font-weight: 800; line-height: 1.45; cursor: pointer; list-style: none; }
.sbv3-faq-item summary::-webkit-details-marker { display: none; }
.sbv3-faq-item summary span { display: grid; width: 38px; height: 38px; border: 1px solid rgba(17, 21, 59, .14); border-radius: 14px; place-items: center; font-size: 1.35rem; transition: transform .3s var(--sbv3-ease), background .25s ease; }
.sbv3-faq-item[open] summary span { background: var(--sbv3-violet); color: #fff; transform: rotate(45deg); }
.sbv3-faq-item > div { overflow: hidden; }
.sbv3-faq-item p { margin: -3px 50px 28px 0; color: var(--sbv3-muted); }

/* CTA */
.sbv3-cta { position: relative; overflow: clip; padding-block: clamp(82px, 9vw, 124px); background: linear-gradient(135deg, #faf8ff, #fff9f2); text-align: center; }
.sbv3-cta::before,
.sbv3-cta::after { position: absolute; border: 1px dashed rgba(91, 54, 232, .23); border-radius: 50%; content: ""; pointer-events: none; }
.sbv3-cta::before { width: 600px; height: 600px; top: -370px; left: 50%; transform: translateX(-50%); }
.sbv3-cta::after { width: 880px; height: 880px; right: -490px; bottom: -660px; }
.sbv3-cta__aurora { position: absolute; top: 50%; left: 50%; width: 70vw; height: 190px; border-radius: 50%; background: linear-gradient(90deg, var(--sbv3-pink), var(--sbv3-sky), var(--sbv3-yellow)); opacity: .16; filter: blur(50px); transform: translate(-50%, -50%) rotate(-5deg); }
.sbv3-cta__inner { position: relative; z-index: 2; max-width: 950px; }
.sbv3-cta__inner > p { margin-inline: auto; }
.sbv3-cta__actions { margin-top: 35px; justify-content: center; flex-wrap: wrap; }

/* Footer */
.sbv3-footer { padding: 78px 0 28px; border-top: 1px solid rgba(17, 21, 59, .1); background: #fff; color: var(--sbv3-ink); }
.sbv3-footer__grid { display: grid; grid-template-columns: 1.25fr repeat(3, .75fr); gap: clamp(34px, 6vw, 84px); }
.sbv3-footer__brand img { width: 136px; height: 40px; }
.sbv3-footer__brand p { max-width: 36ch; margin: 24px 0 0; color: var(--sbv3-muted); font-size: .9rem; }
.sbv3-footer h2 { margin: 0 0 20px; font-size: .87rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.sbv3-footer ul { margin: 0; padding: 0; list-style: none; }
.sbv3-footer li + li { margin-top: 10px; }
.sbv3-footer li a { color: var(--sbv3-muted); font-size: .84rem; }
.sbv3-footer li a:hover { color: var(--sbv3-cobalt); text-decoration: underline; text-underline-offset: 4px; }
.sbv3-footer__bottom { display: flex; margin-top: 64px; padding-top: 24px; border-top: 1px solid rgba(17, 21, 59, .1); justify-content: space-between; gap: 20px; color: #6f7489; font-size: .78rem; }

/* Reveal states: content stays visible without JavaScript. */
.js .sbv3-page [data-sbv3-reveal] {
    opacity: 0;
    transition: opacity .82s var(--sbv3-ease), transform .82s var(--sbv3-ease);
}
.js .sbv3-page [data-sbv3-reveal="up"] { transform: translateY(38px); }
.js .sbv3-page [data-sbv3-reveal="left"] { transform: translateX(-45px); }
.js .sbv3-page [data-sbv3-reveal="right"] { transform: translateX(45px); }
.js .sbv3-page [data-sbv3-reveal="fan"] { transform: translateY(34px) rotateX(7deg) rotateZ(-1deg); transform-origin: bottom center; }
.js .sbv3-page [data-sbv3-reveal].is-visible { opacity: 1; transform: none; }

/* Animated final states */
.js .sbv3-demo--facebook.is-active .sbv3-reaction { animation: sbv3-reaction-rise 3.3s var(--sbv3-ease) 3; }
.js .sbv3-demo--facebook.is-active .sbv3-reaction--2 { animation-delay: .35s; }
.js .sbv3-demo--facebook.is-active .sbv3-reaction--3 { animation-delay: .7s; }
.js .sbv3-demo--facebook.is-active .sbv3-reaction--4 { animation-delay: 1.05s; }
.js .sbv3-demo--facebook.is-active .sbv3-reaction--5 { animation-delay: 1.4s; }
.js .sbv3-demo--facebook.is-active .sbv3-reaction--6 { animation-delay: 1.75s; }
.js .sbv3-demo--facebook.is-active .sbv3-reaction--7 { animation-delay: 2.1s; }
.js .sbv3-demo--facebook.is-active .sbv3-reaction--8 { animation-delay: 2.45s; }
.js .sbv3-demo--video.is-active .sbv3-video-card--tiktok { animation: sbv3-video-center 6s ease-in-out 2; }
.js .sbv3-demo--video.is-active .sbv3-video-card--instagram { animation: sbv3-video-left 6s ease-in-out 2; }
.js .sbv3-demo--video.is-active .sbv3-video-card--youtube { animation: sbv3-video-right 6s ease-in-out 2; }
.js .sbv3-demo--video.is-active .sbv3-video-card__bar { animation: sbv3-progress 4s linear 3; }
.js .sbv3-demo--community.is-active .sbv3-community-map__lines path { animation: sbv3-trace 2.2s var(--sbv3-ease) forwards; }
.js .sbv3-demo--community.is-active .sbv3-community-pulse { animation: sbv3-pulse 2.4s var(--sbv3-ease) 4; }
.js .sbv3-demo--community.is-active .sbv3-community-pulse--two { animation-delay: .65s; }
.js .sbv3-demo--community.is-active .sbv3-community-pulse--three { animation-delay: 1.2s; }
.js .sbv3-demo--commerce.is-active .sbv3-commerce-card--shopee { animation: sbv3-fold-shopee 5s ease-in-out 2; }
.js .sbv3-demo--commerce.is-active .sbv3-commerce-card--lazada { animation: sbv3-fold-lazada 5s ease-in-out 2; }
.js [data-sbv3-process].is-active .sbv3-process__line path { animation: sbv3-trace 2.4s var(--sbv3-ease) forwards; }
.js .sbv3-credit.is-visible .sbv3-credit__shine { animation: sbv3-shine 3.6s ease-in-out 1 .5s; }

@keyframes sbv3-reaction-rise {
    0% { opacity: 0; transform: translate3d(0, 24px, 0) scale(.65) rotate(-8deg); }
    18% { opacity: 1; }
    72% { opacity: .95; }
    100% { opacity: 0; transform: translate3d(8px, -92px, 0) scale(1.12) rotate(9deg); }
}

@keyframes sbv3-video-center {
    0%, 100% { transform: translate(-50%, -50%) rotateY(-7deg) translateZ(70px) translateY(0); }
    50% { transform: translate(-50%, -50%) rotateY(-4deg) translateZ(82px) translateY(-8px); }
}

@keyframes sbv3-video-left {
    0%, 100% { transform: translate(-90%, -48%) rotateY(13deg) rotateZ(-5deg) translateZ(-20px); }
    50% { transform: translate(-93%, -49%) rotateY(9deg) rotateZ(-7deg) translateZ(-10px); }
}

@keyframes sbv3-video-right {
    0%, 100% { transform: translate(-10%, -48%) rotateY(-16deg) rotateZ(5deg) translateZ(-55px); }
    50% { transform: translate(-7%, -47%) rotateY(-12deg) rotateZ(7deg) translateZ(-43px); }
}

@keyframes sbv3-progress { from { transform: scaleX(.08); } to { transform: scaleX(1); } }
@keyframes sbv3-trace { from { stroke-dashoffset: 460; } to { stroke-dashoffset: 0; } }
@keyframes sbv3-pulse { 0% { opacity: 0; transform: scale(.4); } 28% { opacity: 1; } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes sbv3-fold-shopee { 0%, 100% { transform: rotateY(10deg) rotateZ(-4deg) translateZ(50px); } 50% { transform: rotateY(6deg) rotateZ(-2deg) translateZ(70px) translateY(-8px); } }
@keyframes sbv3-fold-lazada { 0%, 100% { transform: rotateY(-11deg) rotateZ(4deg) translateZ(-10px); } 50% { transform: rotateY(-7deg) rotateZ(2deg) translateZ(5px) translateY(7px); } }
@keyframes sbv3-shine { 0% { transform: translateX(-40%) rotate(22deg); opacity: 0; } 25% { opacity: .65; } 100% { transform: translateX(430%) rotate(22deg); opacity: 0; } }
@keyframes sbv3-menu-enter { from { opacity: 0; transform: translateY(-10px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes sbv3-card-glint { 0% { left: -38%; opacity: 0; } 24% { opacity: .8; } 100% { left: 112%; opacity: 0; } }
@keyframes sbv3-sphere-drift { 0%, 100% { transform: translate3d(0, 0, 0); } 48% { transform: translate3d(-9px, 12px, 18px); } }
@keyframes sbv3-card-arrive { from { opacity: 0; transform: translate3d(0, 18px, 17px) scale(.94); } to { opacity: 1; transform: translate3d(0, 0, 17px) scale(1); } }

/* Large screens */
@media (min-width: 1600px) {
    .sbv3-hero__grid { grid-template-columns: minmax(0, .92fr) minmax(540px, 1.08fr); }
    .sbv3-hero__visual { min-height: 570px; }
}

/* Laptop / tablet landscape */
@media (max-width: 1180px) {
    .sbv3-primary-nav,
    .sbv3-header__actions { display: none; }
    .sbv3-menu-toggle { display: inline-flex; }
    .sbv3-header.is-mobile-open .sbv3-primary-nav { display: block; }
    .sbv3-header.is-mobile-open .sbv3-primary-nav { animation: sbv3-menu-enter .25s var(--sbv3-ease) both; }
    .sbv3-primary-nav { position: absolute; top: calc(100% + 10px); right: clamp(18px, 3vw, 36px); left: auto; width: min(560px, calc(100vw - 36px)); max-height: calc(100dvh - 94px); padding: 15px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid rgba(91,54,232,.14); border-radius: 26px; background: linear-gradient(155deg, rgba(255,255,255,.99), rgba(248,245,255,.98)); box-shadow: 0 28px 80px rgba(39,29,91,.18), inset 0 1px #fff; }
    .sbv3-primary-nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
    .sbv3-nav-group { width: 100%; }
    .sbv3-nav-trigger,
    .sbv3-nav-link { width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 13px; justify-content: space-between; font-size: .86rem; transition: color .2s ease, background .2s ease; }
    .sbv3-nav-trigger:hover,
    .sbv3-nav-link:hover,
    .sbv3-nav-trigger:focus-visible,
    .sbv3-nav-link:focus-visible,
    .sbv3-nav-trigger[aria-expanded="true"] { background: #f2efff; color: var(--sbv3-violet); }
    .sbv3-mega { position: static; width: 100%; max-height: none; margin-top: 7px; padding: 12px; border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(91,54,232,.07); transform: none; }
    .sbv3-mega__heading { align-items: start; }
    .sbv3-mega__heading > a { display: none; }
    .sbv3-service-tabs { grid-auto-columns: 82px; grid-auto-flow: column; grid-template-columns: none; padding-bottom: 6px; overflow-x: auto; scroll-snap-type: x proximity; }
    .sbv3-service-tab { scroll-snap-align: start; }
    .sbv3-service-panel__head { display: block; }
    .sbv3-service-panel__head > a { display: inline-flex; margin-top: 10px; }
    .sbv3-service-panel__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sbv3-service-panel__links a { min-height: 54px; }
    .sbv3-service-panel__links .sbv3-service-link-item:nth-child(n+9) { display: none; }
    .sbv3-service-panel.is-expanded .sbv3-service-panel__links .sbv3-service-link-item:nth-child(n+9) { display: list-item; }
    .sbv3-service-more { display: block; }
    .sbv3-mega-platform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sbv3-header .sbv3-primary-nav__mobile-actions { display: flex; margin-top: 13px; }
    .sbv3-primary-nav__mobile-actions .sbv3-btn { flex: 1; }
    .sbv3-hero { min-height: auto; }
    .sbv3-hero__grid { grid-template-columns: minmax(0, .92fr) minmax(430px, 1.08fr); }
    .sbv3-hero__visual { min-height: 510px; }
    .sbv3-orbit__item { min-width: auto; padding: 10px; }
    .sbv3-orbit__item span { display: none; }
    .sbv3-goals__layout { grid-template-columns: 1fr; }
    .sbv3-goals .sbv3-section-head { max-width: 700px; }
    .sbv3-goal-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sbv3-platform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sbv3-platform { grid-column: auto; }
    .sbv3-demo,
    .sbv3-demo:nth-of-type(even) { grid-template-columns: minmax(0, .9fr) minmax(390px, 1.1fr); padding: 44px; gap: 36px; }
    .sbv3-demo:nth-of-type(even) > :first-child { order: 2; }
    .sbv3-demo:nth-of-type(even) > :last-child { order: 1; }
    .sbv3-process { gap: 14px; }
    .sbv3-process__step { padding: 25px 21px; }
    .sbv3-audience-card { padding: 30px; }
    .sbv3-pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
    .sbv3-price-card { min-height: 390px; }
}

@media (max-width: 980px) {
    .sbv3-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: 42px 58px; }
    .sbv3-hero__copy { max-width: 850px; }
    .sbv3-brush { font-size: clamp(4.25rem, 10vw, 5.5rem); }
    .sbv3-hero__lead { margin-top: 22px; font-size: 1rem; line-height: 1.6; }
    .sbv3-hero__actions { margin-top: 24px; }
    .sbv3-hero__notes { margin-top: 20px; }
    .sbv3-hero__visual { width: min(100%, 720px); min-height: clamp(390px, 58vw, 480px); justify-self: center; }
    .sbv3-spatial-card { min-height: 76px; padding: 6px; }
    .sbv3-spatial-card__face { min-height: 45px; padding: 7px; }
    .sbv3-spatial-card img { width: 30px; height: 30px; }
    .sbv3-spatial-card strong { font-size: .62rem; }
    .sbv3-spatial-card__symbol { right: 9px; bottom: 5px; width: 14px; height: 14px; }
    .sbv3-platform-dock__inner { width: calc(100% - 30px); }
    .sbv3-goal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sbv3-hero__art { right: -7%; width: 110%; }
    .sbv3-orbit { right: 4%; width: 83%; }
    .sbv3-glass-note--one { left: -4%; }
    .sbv3-glass-note--two { right: 0; }
    .sbv3-goal--like,
    .sbv3-goal--view,
    .sbv3-goal--follow,
    .sbv3-goal--talk { grid-column: span 6; }
    .sbv3-goal { grid-template-columns: 1fr; }
    .sbv3-section-head--split { grid-template-columns: 1fr; gap: 0; }
    .sbv3-demo,
    .sbv3-demo:nth-of-type(even) { min-height: auto; grid-template-columns: 1fr; padding: clamp(30px, 6vw, 54px); }
    .sbv3-demo:nth-of-type(even) > :first-child { order: 1; }
    .sbv3-demo:nth-of-type(even) > :last-child { order: 2; }
    .sbv3-phone-stage,
    .sbv3-video-stack,
    .sbv3-commerce-stage { min-height: 500px; }
    .sbv3-community-map { min-height: 500px; }
    .sbv3-process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sbv3-process__line { display: none; }
    .sbv3-process__step:nth-of-type(even) { margin-top: 0; }
    .sbv3-audience-grid { grid-template-columns: 1fr; }
    .sbv3-audience-card { min-height: 330px; }
    .sbv3-trust__grid,
    .sbv3-faq__grid { grid-template-columns: 1fr; }
    .sbv3-faq__intro { position: static; }
    .sbv3-credit { max-width: 650px; width: 100%; justify-self: center; }
    .sbv3-footer__grid { grid-template-columns: 1.2fr repeat(2, 1fr); }
    .sbv3-footer__grid > div:last-child { grid-column: 2 / -1; }
}

@media (min-width: 701px) and (max-width: 980px) {
    .sbv3-goals { padding-block: 72px; }
    .sbv3-goals__layout { grid-template-columns: minmax(210px, .34fr) minmax(0, .66fr); gap: 28px; }
    .sbv3-goal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sbv3-goal { min-height: 205px; padding: 18px 16px; }
    .sbv3-goal h3 { font-size: .9rem; }
    .sbv3-goal p { font-size: .7rem; }
}

@media (max-width: 700px) {
    html { scroll-padding-top: 72px; }
    .sbv3-header__inner { min-height: 70px; }
    .sbv3-primary-nav { right: 10px; left: 10px; width: auto; max-height: calc(100dvh - 82px); padding: 10px; border-radius: 22px; }
    .sbv3-mega { padding: 10px; }
    .sbv3-mega__heading strong { font-size: .96rem; }
    .sbv3-service-tabs { grid-auto-columns: 72px; }
    .sbv3-service-tabs { scrollbar-width: none; }
    .sbv3-service-tabs::-webkit-scrollbar { display: none; }
    .sbv3-service-tab { min-height: 66px; }
    .sbv3-service-panel { padding-top: 16px; }
    .sbv3-service-panel__head p { display: none; }
    .sbv3-service-panel__links { grid-template-columns: 1fr; gap: 6px; }
    .sbv3-service-panel__links a { min-height: 44px; }
    .sbv3-mega-platform-grid { grid-template-columns: 1fr; }
    .sbv3-shell { width: min(100% - 30px, 1360px); }
    .sbv3-section { padding-block: 54px; }
    .sbv3-hero { min-height: auto; }
    .sbv3-hero__grid {
        grid-template-areas: "title" "lead" "actions" "visual";
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        padding-block: 34px 68px;
    }
    .sbv3-hero__copy { display: contents; }
    .sbv3-hero h1 { grid-area: title; align-self: start; }
    .sbv3-brush { font-size: clamp(3.05rem, 14.7vw, 4.25rem); line-height: .93; }
    .sbv3-hero__visual { grid-area: visual; width: 100%; min-height: 285px; margin-top: 0; }
    .sbv3-hero__lead { grid-area: lead; margin-top: 2px; font-size: .96rem; line-height: 1.62; }
    .sbv3-hero__actions { grid-area: actions; display: grid; grid-template-columns: 1fr auto; margin-top: 5px; align-items: stretch; }
    .sbv3-hero__actions .sbv3-btn { width: auto; min-height: 52px; padding-inline: 18px; }
    .sbv3-hero__actions .sbv3-text-link { justify-content: center; font-size: .78rem; }
    .sbv3-spatial-stage { inset: 0 -5% 0; transform: translate3d(var(--sbv3-scene-shift-x), var(--sbv3-scene-shift-y), 0) rotateX(1deg); }
    .sbv3-spatial-card { width: 30%; min-height: 52px; padding: 6px; border-radius: 11px; gap: 5px; }
    .sbv3-spatial-card__face { min-height: 39px; padding: 5px; border-radius: 8px; gap: 4px; }
    .sbv3-spatial-card img { width: 22px; height: 22px; }
    .sbv3-spatial-card strong { font-size: .49rem; }
    .sbv3-spatial-card__arrow { font-size: 1rem; }
    .sbv3-spatial-card__symbol { display: none; }
    .sbv3-hero__art { inset: 0; width: 100%; height: 100%; border-radius: 32px; object-fit: cover; object-position: 62% 50%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 94%, transparent 100%); transform: none; }
    .sbv3-orbit { top: -7%; right: 2%; width: 66%; }
    .sbv3-orbit__item { display: none; }
    .sbv3-orbit__item--1,
    .sbv3-orbit__item--2,
    .sbv3-orbit__item--3,
    .sbv3-orbit__item--4 { display: flex; padding: 7px; border-radius: 12px; }
    .sbv3-orbit__item img { width: 22px; height: 22px; }
    .sbv3-orbit__item { -webkit-backdrop-filter: none; backdrop-filter: none; }
    .sbv3-glass-note { display: none; }
    .sbv3-scroll-cue { display: none; }
    .sbv3-platform-dock { height: 70px; background: #fff; }
    .sbv3-platform-dock__inner { display: flex; width: calc(100% - 20px); min-height: 78px; padding: 9px 10px; overflow-x: auto; border-radius: 26px; scroll-snap-type: x mandatory; transform: translateY(-37px); scrollbar-width: none; }
    .sbv3-platform-dock__inner::-webkit-scrollbar { display: none; }
    .sbv3-platform-dock a { min-width: 74px; scroll-snap-align: start; }
    .sbv3-platform-dock img { width: 32px; height: 32px; }
    .sbv3-goals { padding-top: 54px; }
    .sbv3-goals__layout { gap: 30px; }
    .sbv3-goal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sbv3-section-head,
    .sbv3-section-head--split { margin-bottom: 38px; }
    .sbv3-section-head h2,
    .sbv3-demo__copy h3,
    .sbv3-trust__copy h2,
    .sbv3-faq__intro h2,
    .sbv3-cta h2 { font-size: clamp(2rem, 9.4vw, 3.1rem); }
    .sbv3-goal--like,
    .sbv3-goal--view,
    .sbv3-goal--follow,
    .sbv3-goal--talk { grid-column: auto; }
    .sbv3-goal { min-height: 230px; padding: 20px 16px; }
    .sbv3-goal__mark { width: 46px; height: 46px; border-radius: 14px; }
    .sbv3-platform-grid { grid-template-columns: 1fr; gap: 12px; }
    .sbv3-platform { grid-column: auto; min-height: auto !important; padding: 0; border-radius: 22px 22px 22px 9px; }
    .sbv3-platform__summary { min-height: 108px; padding: 14px 15px; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icon copy meta"; gap: 10px; }
    .sbv3-platform__icon { width: 50px; height: 50px; border-radius: 16px; }
    .sbv3-platform__icon img { width: 32px; height: 32px; }
    .sbv3-platform__title { font-size: .86rem; }
    .sbv3-platform__count { display: none; }
    .sbv3-platform__meta { justify-content: flex-end; }
    .sbv3-platform__action { min-width: 38px; min-height: 38px; padding: 4px; justify-content: center; }
    .sbv3-platform__action > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .sbv3-platform__links { grid-template-columns: 1fr; padding-inline: 16px; }
    .sbv3-platform__panel-inner > p { padding-inline: 16px; }
    .sbv3-platform__all { margin-inline: 16px; }
    .sbv3-demo { border-radius: 30px; padding: 29px 20px 26px; }
    .sbv3-phone-stage { min-height: 370px; }
    .sbv3-phone { width: min(248px, 72vw); }
    .sbv3-demo-label { top: -4px; right: 0; }
    .sbv3-video-stack { min-height: 390px; }
    .sbv3-video-card { width: 50%; min-width: 190px; }
    .sbv3-community-map { min-height: 390px; }
    .sbv3-community-map__lines { display: none; }
    .sbv3-community-node { width: 145px; }
    .sbv3-community-node--telegram { top: 10%; left: 50%; transform: translateX(-50%); }
    .sbv3-community-node--threads { top: 50%; left: 6%; transform: translateY(-50%); }
    .sbv3-community-node--twitter { top: auto; right: 6%; bottom: 8%; transform: none; }
    .sbv3-commerce-stage { min-height: 390px; }
    .sbv3-commerce-card { width: 82%; padding: 23px; }
    .sbv3-commerce-card--shopee { left: 1%; }
    .sbv3-commerce-card--lazada { right: 1%; }
    .sbv3-process { grid-template-columns: 1fr; }
    .sbv3-process__step { min-height: auto; border-radius: 24px 24px 24px 7px; }
    .sbv3-process__step > span { margin-bottom: 26px; }
    .sbv3-audience-card { min-height: auto; padding: 28px; }
    .sbv3-audience-card__icon { margin-block: 34px 22px; }
    .sbv3-pricing-grid { grid-template-columns: 1fr; }
    .sbv3-price-card { min-height: auto; padding: 26px 23px; }
    .sbv3-price-card > strong { min-height: 0; }
    .sbv3-pricing-note { text-align: left; }
    .sbv3-credit { min-height: 360px; padding: 30px; border-radius: 30px; }
    .sbv3-credit > span:not(.sbv3-credit__shine) { top: 28px; right: 28px; }
    .sbv3-faq-item summary { min-height: 78px; padding-block: 21px; font-size: .95rem; }
    .sbv3-faq-item p { margin-right: 0; }
    .sbv3-footer__grid { grid-template-columns: 1fr 1fr; }
    .sbv3-footer__brand { grid-column: 1 / -1; }
    .sbv3-footer__grid > div:last-child { grid-column: auto; }
    .sbv3-footer__bottom { flex-direction: column; }
}

@media (max-width: 420px) {
    .sbv3-logo img { width: 122px; height: auto; }
    .sbv3-menu-toggle { min-width: 44px; width: 44px; height: 44px; min-height: 44px; padding: 5px; justify-content: center; }
    .sbv3-menu-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .sbv3-brush { font-size: clamp(2.95rem, 14.8vw, 3.85rem); }
    .sbv3-hand { font-size: .82em; }
    .sbv3-hero__visual { min-height: 265px; }
    .sbv3-hero__actions { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 8px; }
    .sbv3-hero__actions .sbv3-btn { padding-inline: 13px; font-size: .81rem; }
    .sbv3-hero__actions .sbv3-text-link { padding-inline: 0; font-size: .68rem; }
    .sbv3-spatial-stage { inset-inline: -7%; }
    .sbv3-spatial-card { min-height: 49px; padding: 5px; }
    .sbv3-spatial-card__face { min-height: 37px; padding: 4px; }
    .sbv3-spatial-card img { width: 22px; height: 22px; }
    .sbv3-spatial-card strong { font-size: .49rem; }
    .sbv3-goal-grid { grid-template-columns: 1fr 1fr; }
    .sbv3-goal { min-height: 218px; }
    .sbv3-glass-note--two { display: none; }
    .sbv3-phone-stage { min-height: 350px; }
    .sbv3-phone { width: min(232px, 72vw); }
    .sbv3-video-stack { min-height: 400px; transform: scale(.86); transform-origin: center; }
    .sbv3-commerce-stage { min-height: 400px; }
    .sbv3-commerce-card { min-height: 285px; }
    .sbv3-commerce-box { width: 62px; height: 62px; }
    .sbv3-footer__grid { grid-template-columns: 1fr; }
    .sbv3-footer__brand,
    .sbv3-footer__grid > div:last-child { grid-column: auto; }
}

@media (max-width: 360px) {
    .sbv3-hero__actions { grid-template-columns: 1fr; }
    .sbv3-hero__actions .sbv3-btn { width: 100%; }
    .sbv3-hero__actions .sbv3-text-link { min-height: 44px; }
    .sbv3-brush-rays { right: -.35em; }
    .sbv3-brush-star { right: -.34em; }
}

@media (hover: none), (pointer: coarse) {
    .sbv3-goal:hover,
    .sbv3-platform:hover,
    .sbv3-btn:hover,
    .sbv3-inline-links a:hover { transform: none; }
    .sbv3-hero__visual,
    .sbv3-spatial-stage { will-change: auto; }
    .sbv3-spatial-card { will-change: auto; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
    .js .sbv3-page [data-sbv3-reveal] { opacity: 1; transform: none; }
    .sbv3-reaction { opacity: .78; }
    .sbv3-video-card__bar { transform: scaleX(.72); }
    .sbv3-community-map__lines path,
    .sbv3-process__line path { stroke-dashoffset: 0; }
    .sbv3-hero__visual,
    .sbv3-spatial-stage,
    .sbv3-spatial-card { transform: none !important; }
    .sbv3-spatial-stage__sphere { animation: none !important; }
}

@media print {
    .sbv3-header,
    .sbv3-scroll-cue,
    .sbv3-menu-toggle,
    .sbv3-reaction-field { display: none !important; }
    .sbv3-page,
    .sbv3-section,
    .sbv3-hero,
    .sbv3-trust,
    .sbv3-footer { background: #fff !important; color: #000 !important; }
    .sbv3-shell { width: 100%; }
    .sbv3-section { break-inside: avoid; padding-block: 30px; }
}