/* ==========================================================================
   Single-service pages (app/Views/includes/service-template.php)
   Loaded only on /service/* pages, after style-custom-purple.css.

   .svp-*  the seven page sections
   .svx-*  the hero visuals (includes/service-visuals.php)

   Square corners throughout, like the rest of the purple theme; buttons stay
   pill-shaped to match the site's other buttons.
   ========================================================================== */

.service-page {
    --svp-purple: #410299;
    --svp-deep: #310271;
    --svp-tang: #FF6B2C;
    --svp-ink: #0c0a12;
    --svp-lilac: #DCCEFA;
    --svp-tint: #F1E9FD;
    --svp-line: rgba(65, 2, 153, 0.16);
    --svp-text: var(--color-paragraph, #666);
}

.svp-sec {position: relative;padding: 110px 0;}
.service-page .bg-gray {background: var(--bg-gray, #efebf3);}

/* shared type ------------------------------------------------------------- */
.svp-eyebrow {display: inline-flex;align-items: center;gap: 9px;font-size: 15px;font-weight: 600;line-height: 1.2;color: var(--svp-ink);}
.svp-eyebrow::before {content: "";flex: none;width: 8px;height: 8px;border-radius: 50%;background: var(--svp-tang);box-shadow: 0 0 0 4px rgba(255, 107, 44, 0.18);}
.svp-title {margin: 14px 0 0;font-size: clamp(30px, 3.1vw, 48px);font-weight: 700;line-height: 1.12;letter-spacing: -0.015em;color: var(--color-heading);}
.svp-title--sm {font-size: clamp(26px, 2.2vw, 34px);}
.svp-head {display: grid;grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);align-items: end;gap: 22px 70px;margin-bottom: 54px;}
.svp-head p {margin: 0;font-size: 17px;line-height: 1.7;color: var(--svp-text);}
.svp-link {display: inline-block;padding-bottom: 3px;border-bottom: 2px solid var(--svp-tang);font-size: 16px;font-weight: 600;line-height: 1.3;color: var(--svp-ink);transition: color 0.25s ease, border-color 0.25s ease;}
.svp-link:hover {color: var(--svp-purple);border-color: var(--svp-purple);}
.service-page ol, .service-page ul {list-style: none;}

.svp-checks {display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 12px 26px;margin: 26px 0 0;padding: 0;}
.svp-checks li {position: relative;padding-left: 30px;font-size: 15.5px;line-height: 1.45;color: var(--color-heading);}
.svp-checks li::before {content: "";position: absolute;left: 0;top: 1px;width: 19px;height: 19px;background: #E9DEFC;}
.svp-checks li::after {content: "";position: absolute;left: 7px;top: 4px;width: 5px;height: 10px;border-right: 2px solid var(--svp-purple);border-bottom: 2px solid var(--svp-purple);transform: rotate(45deg);}

.svp-plus {position: relative;flex: none;width: 26px;height: 26px;border-radius: 50%;background: rgba(65, 2, 153, 0.1);transition: transform 0.3s ease, background 0.3s ease;}
.svp-plus::before, .svp-plus::after {content: "";position: absolute;top: 50%;left: 50%;width: 10px;height: 2px;margin: -1px 0 0 -5px;background: var(--svp-ink);transition: background 0.3s ease;}
.svp-plus::after {transform: rotate(90deg);}

/* 01 hero ------------------------------------------------------------------ */
.svp-hero {position: relative;overflow: hidden;padding: 168px 0 96px;background: linear-gradient(180deg, #F8F5FF 0%, #fff 100%);}
.svp-hero::before {content: "";position: absolute;inset: 0 0 auto auto;width: 46%;height: 100%;background: url("/assets/img/n2b/service-dots.svg") left top repeat;opacity: 0.35;-webkit-mask-image: linear-gradient(200deg, #000 10%, transparent 70%);mask-image: linear-gradient(200deg, #000 10%, transparent 70%);pointer-events: none;}
.svp-hero .container {position: relative;}
.svp-hero__grid {display: grid;grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);align-items: center;gap: 60px;}
.svp-crumbs {display: flex;flex-wrap: wrap;align-items: center;gap: 6px 9px;margin-bottom: 26px;font-size: 14px;font-weight: 500;color: var(--svp-text);}
.svp-crumbs a {color: var(--svp-text);}
.svp-crumbs a:hover {color: var(--svp-purple);}
.svp-crumbs span[aria-hidden] {opacity: 0.45;}
.svp-crumbs [aria-current] {color: var(--svp-ink);}
.svp-kicker {display: inline-block;margin-bottom: 22px;padding: 7px 14px;border: 1px solid rgba(65, 2, 153, 0.28);font-size: 13px;font-weight: 700;letter-spacing: 0.6px;line-height: 1.3;text-transform: uppercase;color: var(--svp-purple);background: #fff;}
.svp-hero__title {margin: 0 0 22px;font-size: clamp(40px, 4.4vw, 66px);font-weight: 700;line-height: 1.04;letter-spacing: -0.025em;color: var(--color-heading);}
.svp-hero__text {max-width: 560px;margin: 0 0 34px;font-size: 18.5px;line-height: 1.65;color: var(--svp-text);}
.svp-hero__actions {display: flex;flex-wrap: wrap;align-items: center;gap: 16px 30px;}
.svp-btn {display: inline-flex;align-items: center;gap: 10px;padding: 16px 30px;border-radius: 50px;font-size: 16px;font-weight: 600;line-height: 1.2;color: #fff !important;background: var(--svp-purple);transition: background 0.25s ease;}
.svp-btn:hover {background: var(--svp-deep);}
.svp-btn i, .svp-cta__btn i {font-size: 13px;transition: transform 0.25s ease;}
.svp-btn:hover i, .svp-cta__btn:hover i {transform: translateX(4px);}
.svp-hero__for {display: flex;align-items: flex-start;gap: 18px;max-width: 600px;margin-top: 42px;padding-top: 22px;border-top: 1px solid var(--svp-line);}
.svp-hero__for > span {flex: none;padding-top: 7px;font-size: 12.5px;font-weight: 700;letter-spacing: 1px;text-transform: uppercase;color: var(--svp-text);}
.svp-hero__for ul {display: flex;flex-wrap: wrap;gap: 8px;margin: 0;padding: 0;}
.svp-hero__for li {padding: 6px 12px;font-size: 14.5px;font-weight: 500;line-height: 1.35;color: var(--color-heading);background: #EAE0FA;}
.svp-hero__visual {min-width: 0;}

/* 02 problem + solution ---------------------------------------------------- */
.svp-path {display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 52px;margin: 0;padding: 0;}
.svp-path__step {position: relative;display: flex;flex-direction: column;padding: 34px 30px 32px;border: 1px solid var(--svp-line);background: #fff;}
.svp-path__step:not(:last-child)::before {content: "";position: absolute;top: 50%;right: -42px;width: 30px;height: 2px;background: var(--svp-purple);}
.svp-path__step:not(:last-child)::after {content: "";position: absolute;top: 50%;right: -42px;width: 10px;height: 10px;margin-top: -4px;border-top: 2px solid var(--svp-purple);border-right: 2px solid var(--svp-purple);transform: rotate(45deg);}
.svp-path__top {display: flex;align-items: center;gap: 14px;}
.svp-path__icon {display: inline-flex;flex: none;align-items: center;justify-content: center;width: 46px;height: 46px;color: var(--svp-purple);background: #E9DEFC;}
.svp-path__icon svg {width: 22px;height: 22px;}
.svp-path__label {font-size: 13px;font-weight: 700;letter-spacing: 0.8px;text-transform: uppercase;color: var(--svp-purple);}
.svp-path__step h3 {margin: 24px 0 10px;font-size: 22px;font-weight: 700;line-height: 1.25;color: var(--color-heading);}
.svp-path__step p {margin: 0;font-size: 15.5px;line-height: 1.65;color: var(--svp-text);}
.svp-path__step ul {margin: 4px 0 0;padding: 0;}
.svp-path__step li {position: relative;margin-top: 10px;padding-left: 24px;font-size: 15.5px;line-height: 1.5;color: var(--color-heading);}
.svp-path__step li::before {content: "";position: absolute;left: 0;top: 10px;width: 12px;height: 2px;background: var(--svp-tang);}
.svp-path__step--problem .svp-path__icon {color: var(--svp-tang);background: #FFEDE4;}
.svp-path__step--problem .svp-path__label {color: var(--svp-tang);}
.svp-path__step--strategy {border-color: rgba(65, 2, 153, 0.45);}
.svp-path__step--outcome {border-color: transparent;color: #fff;background: linear-gradient(140deg, var(--svp-purple) 0%, var(--svp-deep) 100%);}
.svp-path__step--outcome .svp-path__icon {color: #fff;background: rgba(255, 255, 255, 0.16);}
.svp-path__step--outcome .svp-path__label {color: #fff;}
.svp-path__step--outcome h3 {color: #fff;}
.svp-path__step--outcome p, .svp-path__step--outcome li {color: rgba(255, 255, 255, 0.86);}

/* 03 what we deliver: tabs -------------------------------------------------- */
.svp-tabs {display: grid;grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);border: 1px solid var(--svp-line);background: #fff;}
.svp-tabs__list {display: flex;flex-direction: column;border-right: 1px solid var(--svp-line);}
.service-page .svp-tabs__tab {position: relative;display: grid;grid-template-columns: 40px minmax(0, 1fr) 16px;align-items: center;gap: 12px;width: 100%;min-height: 0;margin: 0;padding: 23px 26px;border: 0;border-bottom: 1px solid var(--svp-line);border-radius: 0;font-size: 18px;font-weight: 600;line-height: 1.3;text-align: left;text-transform: none;color: var(--color-heading);background: transparent;cursor: pointer;overflow: visible;transition: background 0.25s ease, color 0.25s ease;}
.service-page .svp-tabs__tab:last-child {border-bottom: 0;}
.service-page .svp-tabs__tab::after, .service-page .svp-tabs__tab::before {content: none !important;display: none !important;}
.svp-tabs__num {font-size: 14px;font-weight: 600;color: var(--svp-text);}
.svp-tabs__tab i {font-size: 13px;color: var(--svp-purple);opacity: 0;transform: translateX(-6px);transition: opacity 0.25s ease, transform 0.25s ease;}
.service-page .svp-tabs__tab:hover {color: var(--svp-purple);}
.service-page .svp-tabs__tab[aria-selected="true"] {color: var(--svp-purple);background: var(--svp-tint);box-shadow: inset 3px 0 0 var(--svp-purple);}
.svp-tabs__tab[aria-selected="true"] .svp-tabs__num {color: var(--svp-purple);}
.svp-tabs__tab[aria-selected="true"] i {opacity: 1;transform: none;}
.service-page .svp-tabs__tab:focus-visible {outline: 2px solid var(--svp-purple);outline-offset: -2px;}
.svp-tabs__panels {position: relative;min-width: 0;overflow: hidden;}
.svp-tabs__panel {position: relative;height: 100%;padding: 46px 50px 50px;}
.svp-tabs__panel[hidden] {display: none;}
.svp-tabs.is-ready .svp-tabs__panel {animation: svp-fade 0.4s ease both;}
.svp-tabs:not(.is-ready) .svp-tabs__panel + .svp-tabs__panel {border-top: 1px solid var(--svp-line);}
.svp-tabs__icon {display: inline-flex;align-items: center;justify-content: center;width: 58px;height: 58px;color: #fff;background: var(--svp-purple);}
.svp-tabs__icon svg {width: 26px;height: 26px;}
.svp-tabs__panel h3 {margin: 26px 0 12px;font-size: 28px;font-weight: 700;line-height: 1.2;color: var(--color-heading);}
.svp-tabs__panel > p {position: relative;max-width: 540px;margin: 0;font-size: 17px;line-height: 1.7;color: var(--svp-text);}
.svp-tabs__panel .svp-checks {position: relative;max-width: 560px;}
.svp-tabs__big {position: absolute;right: 26px;bottom: -34px;font-size: 190px;font-weight: 800;line-height: 1;letter-spacing: -0.04em;color: transparent;-webkit-text-stroke: 1.5px rgba(65, 2, 153, 0.13);pointer-events: none;}
@keyframes svp-fade {from {opacity: 0;transform: translateY(8px);} to {opacity: 1;transform: none;}}

/* 03 what we deliver: expandable list --------------------------------------- */
.svp-deliver__split {display: grid;grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);align-items: start;gap: 40px 80px;}
.svp-deliver__intro p {margin: 18px 0 26px;font-size: 17px;line-height: 1.7;color: var(--svp-text);}
.svp-stack {border-top: 1px solid var(--svp-line);}
.svp-stack__item {border-bottom: 1px solid var(--svp-line);}
.svp-stack__item summary {display: grid;grid-template-columns: 34px 42px minmax(0, 1fr) 26px;align-items: center;gap: 16px;padding: 22px 4px;list-style: none;cursor: pointer;}
.svp-stack__item summary::-webkit-details-marker {display: none;}
.svp-stack__item summary::marker {content: "";}
.svp-stack__num {font-size: 14px;font-weight: 600;color: var(--svp-text);}
.svp-stack__icon {display: inline-flex;align-items: center;justify-content: center;width: 42px;height: 42px;color: var(--svp-purple);background: #E9DEFC;transition: background 0.25s ease, color 0.25s ease;}
.svp-stack__icon svg {width: 20px;height: 20px;}
.svp-stack__title {font-size: 21px;font-weight: 600;line-height: 1.3;color: var(--color-heading);transition: color 0.25s ease;}
.svp-stack__item summary:hover .svp-stack__title, .svp-stack__item[open] .svp-stack__title {color: var(--svp-purple);}
.svp-stack__item[open] .svp-stack__icon {color: #fff;background: var(--svp-purple);}
.svp-stack__item[open] .svp-plus {transform: rotate(45deg);background: var(--svp-purple);}
.svp-stack__item[open] .svp-plus::before, .svp-stack__item[open] .svp-plus::after {background: #fff;}
.svp-stack__body {padding: 0 46px 28px 112px;animation: svp-fade 0.35s ease both;}
.svp-stack__body p {margin: 0;font-size: 16px;line-height: 1.7;color: var(--svp-text);}
.svp-stack__body .svp-checks {margin-top: 18px;}

/* 04 why choose us --------------------------------------------------------- */
.svp-why__grid {display: grid;grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);align-items: center;gap: 50px 70px;}
.svp-why__intro p {margin: 18px 0 0;font-size: 17px;line-height: 1.7;color: var(--svp-text);}
.svp-compare {display: grid;grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);border: 1px solid var(--svp-line);background: #fff;}
.svp-compare__row {display: flex;flex-direction: column;padding: 30px 30px 26px;}
.svp-compare__row > p {margin: auto 0 0;padding-top: 18px;font-size: 14.5px;line-height: 1.55;color: var(--svp-text);}
.svp-compare__row--typical {border-right: 1px solid var(--svp-line);background: #F8F7FB;}
.svp-compare__label {font-size: 13px;font-weight: 700;letter-spacing: 0.8px;text-transform: uppercase;color: var(--svp-text);}
.svp-compare__row--ours .svp-compare__label {color: var(--svp-purple);}
.svp-linear {display: flex;flex: 1;flex-direction: column;align-items: flex-start;justify-content: center;margin: 26px 0 0;padding: 0;}
.svp-linear li {position: relative;padding: 10px 18px;border: 1px dashed #bab2cc;font-size: 15px;font-weight: 600;color: #726984;background: #fff;}
.svp-linear li + li {margin-top: 30px;}
.svp-linear li + li::before {content: "";position: absolute;left: 22px;top: -31px;width: 2px;height: 30px;background: #cdc6dc;}
.svp-linear li:last-child::after {content: "and stops";position: absolute;left: calc(100% + 12px);top: 50%;font-size: 12px;font-weight: 600;font-style: italic;white-space: nowrap;color: #9289a7;transform: translateY(-50%);}
.svp-loop {position: relative;width: 100%;max-width: 330px;aspect-ratio: 1;margin: 18px auto 0;}
.svp-loop__ring {position: absolute;inset: 12%;width: 76%;height: 76%;overflow: visible;}
.svp-loop__ring circle {fill: none;stroke: #D6C5F5;stroke-width: 2;}
.svp-loop__ring .svp-loop__run {stroke: var(--svp-purple);stroke-width: 3;stroke-linecap: round;stroke-dasharray: 16 84;transform-origin: 100px 100px;animation: svp-spin 7s linear infinite;}
@keyframes svp-spin {to {transform: rotate(360deg);}}
.svp-loop__core {position: absolute;top: 50%;left: 50%;display: flex;flex-direction: column;align-items: center;gap: 6px;color: var(--svp-purple);transform: translate(-50%, -50%);}
.svp-loop__core svg {width: 30px;height: 30px;}
.svp-loop__core b {font-size: 13px;font-weight: 700;letter-spacing: 1px;text-transform: uppercase;color: var(--svp-ink);}
.svp-loop__node {position: absolute;display: inline-flex;align-items: center;gap: 7px;padding: 7px 11px 7px 7px;border: 1px solid var(--svp-line);font-size: 14px;font-weight: 600;line-height: 1;white-space: nowrap;color: var(--svp-ink);background: #fff;transform: translate(-50%, -50%);}
.svp-loop__node i {display: inline-flex;align-items: center;justify-content: center;width: 20px;height: 20px;font-size: 11px;font-style: normal;font-weight: 700;color: #fff;background: var(--svp-purple);}
.svp-diffs {display: grid;grid-template-columns: repeat(4, minmax(0, 1fr));margin: 70px 0 0;padding: 0;border-top: 1px solid var(--svp-line);}
.svp-diffs li {padding: 30px 28px 0 0;}
.svp-diffs li + li {padding-left: 28px;border-left: 1px solid var(--svp-line);}
.svp-diffs__num {font-size: 14px;font-weight: 700;color: var(--svp-tang);}
.svp-diffs h3 {margin: 14px 0 10px;font-size: 20px;font-weight: 700;line-height: 1.3;color: var(--color-heading);}
.svp-diffs p {margin: 0;font-size: 15.5px;line-height: 1.65;color: var(--svp-text);}

/* 05 proof ------------------------------------------------------------------ */
.svp-proof {overflow: hidden;}
.svp-proof__grid {display: grid;grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);align-items: center;gap: 50px 70px;}
.svp-figures {display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 1px;margin: 34px 0 0;border: 1px solid var(--svp-line);background: var(--svp-line);}
.svp-figures > div {padding: 24px 26px;background: #fff;}
.svp-figures dt {font-size: clamp(34px, 3.2vw, 46px);font-weight: 700;line-height: 1;letter-spacing: -0.02em;color: var(--svp-purple);}
.svp-figures dd {margin: 10px 0 0;font-size: 15px;line-height: 1.45;color: var(--svp-text);}
.svp-quote {position: relative;margin: 0;padding: 46px 44px 40px;color: #fff;background: linear-gradient(140deg, var(--svp-purple) 0%, var(--svp-deep) 100%);}
.svp-quote::before {content: "\201C";position: absolute;top: 6px;right: 30px;font-family: Georgia, "Times New Roman", serif;font-size: 150px;line-height: 1;color: rgba(255, 255, 255, 0.14);}
.svp-quote__stars {display: flex;gap: 4px;font-size: 13px;color: #FFB08A;}
.svp-quote blockquote {position: relative;margin: 18px 0 28px;padding: 0;border: 0;font-size: 21px;font-weight: 500;line-height: 1.55;color: #fff;background: none;}
.svp-quote figcaption {display: flex;align-items: center;gap: 14px;}
.svp-quote img {width: 52px;height: 52px;border-radius: 50%;object-fit: cover;border: 2px solid rgba(255, 255, 255, 0.4);}
.svp-quote b {display: block;font-size: 17px;font-weight: 700;}
.svp-quote small {display: block;font-size: 14px;color: rgba(255, 255, 255, 0.78);}
.svp-case {display: grid;grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);align-items: center;gap: 30px 50px;margin-top: 40px;padding: 32px 34px;border: 1px solid var(--svp-line);background: var(--svp-tint);}
.svp-case__tag {font-size: 13px;font-weight: 700;letter-spacing: 0.8px;text-transform: uppercase;color: var(--svp-purple);}
.svp-case h3 {margin: 10px 0 16px;font-size: 24px;font-weight: 700;line-height: 1.3;color: var(--color-heading);}
.svp-case__metrics {display: grid;grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));gap: 20px;margin: 0;}
.svp-case__metrics dt {font-size: 40px;font-weight: 700;line-height: 1;color: var(--svp-purple);}
.svp-case__metrics dd {margin: 8px 0 0;font-size: 15px;color: var(--svp-text);}
.svp-logos {margin-top: 70px;}

/* 06 how it works ----------------------------------------------------------- */
.svp-steps__list {display: grid;grid-template-columns: repeat(4, minmax(0, 1fr));gap: 30px;margin: 0;padding: 0;}
.svp-steps__list li {position: relative;padding-top: 28px;border-top: 2px solid #D3C1F3;}
.svp-steps__list li:first-child {border-top-color: var(--svp-purple);}
.svp-steps__list li::before {content: "";position: absolute;top: -7px;left: 0;width: 12px;height: 12px;background: var(--svp-purple);}
.svp-steps__top {display: flex;align-items: center;justify-content: space-between;gap: 10px;}
.svp-steps__num {font-size: 42px;font-weight: 700;line-height: 1;letter-spacing: -0.02em;color: var(--svp-purple);}
.svp-steps__when {padding: 5px 9px;border: 1px solid var(--svp-line);font-size: 12px;font-weight: 700;letter-spacing: 0.6px;text-transform: uppercase;white-space: nowrap;color: var(--svp-ink);background: #fff;}
.svp-steps__list h3 {margin: 22px 0 10px;font-size: 21px;font-weight: 700;line-height: 1.25;color: var(--color-heading);}
.svp-steps__list p {margin: 0;font-size: 15.5px;line-height: 1.65;color: var(--svp-text);}

/* 07 CTA + FAQ -------------------------------------------------------------- */
.svp-close__grid {display: grid;grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);align-items: start;gap: 50px 64px;}
.svp-cta {padding: 50px 46px 44px;color: #fff;background: #0c0a12 url("/assets/img/n2b/pricing-shape.png?v=20261008") right -26px top -26px / calc(100% + 26px) auto no-repeat;}
.svp-cta__eyebrow {display: inline-flex;align-items: center;gap: 9px;font-size: 13px;font-weight: 700;letter-spacing: 1px;text-transform: uppercase;color: #FFB08A;}
.svp-cta__eyebrow::before {content: "";width: 8px;height: 8px;border-radius: 50%;background: var(--svp-tang);}
.svp-cta h2 {margin: 18px 0 16px;font-size: clamp(30px, 2.7vw, 42px);font-weight: 700;line-height: 1.14;letter-spacing: -0.015em;color: #fff;}
.svp-cta h2 .text-accent-purple {color: #BF99FE;}
.svp-cta > p {margin: 0 0 30px;font-size: 16.5px;line-height: 1.65;color: rgba(255, 255, 255, 0.8);}
.svp-cta__btn {display: inline-flex;align-items: center;gap: 10px;padding: 16px 30px;border-radius: 50px;font-size: 16px;font-weight: 600;line-height: 1.2;color: var(--svp-purple) !important;background: #fff;transition: background 0.25s ease, color 0.25s ease;}
.svp-cta__btn:hover {color: #fff !important;background: var(--svp-tang);}
.svp-cta .svp-cta__alt {margin: 22px 0 0;font-size: 14.5px;color: rgba(255, 255, 255, 0.7);}
.svp-cta__alt a {color: #fff;text-decoration: underline;text-underline-offset: 3px;}
.svp-faq .svp-title {margin-bottom: 26px;}
.svp-faq .n2b-faq__item {border-color: var(--svp-line);background: #fff;-webkit-backdrop-filter: none;backdrop-filter: none;}
.svp-faq .n2b-faq__item.is-open {border-color: rgba(65, 2, 153, 0.32);background: #F8F5FF;}

/* ==========================================================================
   Hero visuals (.svx). Everything inside is sized in em off a font-size tied
   to the visual's own width (container query units), so each one scales as
   a single picture from desktop down to a phone.
   ========================================================================== */
.svx {position: relative;width: 100%;max-width: 600px;margin-left: auto;container-type: inline-size;}
.svx__inner {position: relative;width: 100%;aspect-ratio: 1 / 0.9;font-size: clamp(7px, 2.45cqw, 14.5px);line-height: 1.35;color: var(--svp-ink);}
.svx__backdrop {position: absolute;top: 0;right: 2%;width: 76%;height: 84%;background: var(--svp-lilac);}
.svx__backdrop::after {content: "";position: absolute;inset: 0;background: url("/assets/img/n2b/service-dots.svg") left top repeat;opacity: 0.55;}
.svx__panel {position: absolute;top: 9%;left: 0;width: 82%;height: 80%;overflow: hidden;border: 1px solid var(--svp-line);background: #fff;box-shadow: 0 2.4em 4.4em -2.6em rgba(49, 2, 113, 0.38);}
.svx__chip {position: absolute;z-index: 2;padding: 0.9em 1.05em;border: 1px solid var(--svp-line);background: #fff;box-shadow: 0 1.6em 3em -1.8em rgba(49, 2, 113, 0.45);animation: svx-float 6s ease-in-out infinite alternate;}
.svx__chip--a {top: 2%;right: 0;width: 40%;}
.svx__chip--b {bottom: 1.5%;left: 6%;display: flex;align-items: center;gap: 0.7em;max-width: 70%;padding: 0.8em 1.15em 0.8em 0.8em;border-color: var(--svp-ink);color: #fff;background: var(--svp-ink);animation-delay: -3s;}
.svx__chip--b b {font-size: 1.02em;font-weight: 600;line-height: 1.25;}
.svx__chip--b .svx__icon {color: #fff;background: var(--svp-purple);}
.svx__label {display: block;font-size: 0.78em;font-weight: 700;letter-spacing: 0.06em;text-transform: uppercase;color: var(--svp-text);}
.svx__icon {display: inline-flex;flex: none;align-items: center;justify-content: center;width: 2.3em;height: 2.3em;color: var(--svp-purple);background: #E9DEFC;}
.svx__icon svg {width: 1.15em;height: 1.15em;}
.svx-line {display: block;width: var(--w, 80%);height: 0.5em;margin-top: 0.5em;background: #E4DCF4;}
.svx-line--lg {height: 0.95em;background: #C6AFEF;}
@keyframes svx-float {from {transform: translateY(0);} to {transform: translateY(-0.6em);}}
@keyframes svx-in {from {opacity: 0;transform: translateY(0.7em);} to {opacity: 1;transform: none;}}

/* search */
.svx-search {display: flex;flex-direction: column;gap: 1.1em;padding: 1.7em 1.6em;}
.svx-search__bar {display: flex;align-items: center;gap: 0.7em;padding: 0.85em 1em;border: 1px solid var(--svp-line);font-size: 1.05em;font-weight: 500;background: #F9F7FD;}
.svx-search__bar svg {width: 1.2em;height: 1.2em;color: var(--svp-purple);}
.svx-caret {width: 1px;height: 1.1em;margin-left: -0.4em;background: var(--svp-purple);animation: svx-blink 1s steps(1) infinite;}
@keyframes svx-blink {50% {opacity: 0;}}
.svx-search__list {position: relative;margin: 0;padding: 0;}
.svx-search__list li {position: relative;display: grid;grid-template-columns: 1.9em minmax(0, 1fr) auto;align-items: start;gap: 0.85em;padding: 0.85em 0.7em;border-top: 1px solid #EBE4F4;background: #fff;}
.svx-search__list li:first-child {border-top: 0;}
.svx-search__list b {display: block;font-size: 0.95em;font-weight: 600;color: #28213a;}
.svx-search__pos {display: inline-flex;align-items: center;justify-content: center;width: 1.9em;height: 1.9em;font-size: 0.85em;font-weight: 700;color: var(--svp-text);background: #EEE9F7;}
.svx-search__list li.is-you {z-index: 1;box-shadow: inset 3px 0 0 var(--svp-purple), 0 1em 2em -1.4em rgba(49, 2, 113, 0.5);background: var(--svp-tint);animation: svx-climb 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;}
.svx-search__list li.is-you b {color: var(--svp-purple);}
.svx-search__list li.is-you .svx-search__pos {color: #fff;background: var(--svp-purple);}
.svx-search__list li.is-you .svx-line {background: #D2BCF7;}
.svx-search__up {display: inline-flex;align-items: center;justify-content: center;width: 2em;height: 2em;color: #fff;background: var(--svp-tang);}
.svx-search__up svg {width: 1.1em;height: 1.1em;}
.svx-search__list li:not(.is-you) {animation: svx-in 0.6s ease both;}
.svx-search__list li:nth-child(2) {animation-delay: 0.1s;}
.svx-search__list li:nth-child(3) {animation-delay: 0.2s;}
.svx-search__list li:nth-child(4) {animation-delay: 0.3s;}
@keyframes svx-climb {from {transform: translateY(300%);} to {transform: none;}}
.svx-chart svg {display: block;width: 100%;height: 5em;margin-top: 0.7em;overflow: visible;}
.svx-chart__area {fill: rgba(65, 2, 153, 0.12);}
.svx-chart__line {fill: none;stroke: var(--svp-purple);stroke-width: 2.5;stroke-linecap: round;vector-effect: non-scaling-stroke;stroke-dasharray: 400;stroke-dashoffset: 400;animation: svx-draw 2.2s ease 0.6s forwards;}
@keyframes svx-draw {to {stroke-dashoffset: 0;}}
.svx-chart__axis {display: flex;justify-content: space-between;margin-top: 0.5em;font-size: 0.72em;font-style: normal;color: var(--svp-text);}
.svx-chart__axis i {font-style: normal;}

/* funnel */
.svx-funnel {display: flex;flex-direction: column;padding: 1.6em 1.6em 1.4em;}
.svx-funnel__head {display: flex;align-items: center;justify-content: space-between;}
.svx-funnel__live {display: inline-flex;align-items: center;gap: 0.45em;font-size: 0.78em;font-weight: 700;letter-spacing: 0.05em;text-transform: uppercase;color: var(--svp-tang);}
.svx-funnel__live i, .svx-event__live i {width: 0.6em;height: 0.6em;border-radius: 50%;background: var(--svp-tang);animation: svx-pulse 1.6s ease-in-out infinite;}
@keyframes svx-pulse {50% {box-shadow: 0 0 0 0.35em rgba(255, 107, 44, 0.2);}}
.svx-funnel__channels {display: flex;flex-wrap: wrap;gap: 0.45em;margin: 1.1em 0 1.3em;padding: 0;}
.svx-funnel__channels li {padding: 0.35em 0.75em;border: 1px solid var(--svp-line);font-size: 0.82em;font-weight: 600;background: #F9F7FD;}
.svx-funnel__stages {display: flex;flex: 1;flex-direction: column;justify-content: space-between;gap: 0.4em;margin: 0;padding: 0;}
.svx-funnel__stages li {display: flex;flex: 1;align-items: center;justify-content: center;width: var(--w);margin: 0 auto;font-size: 0.95em;font-weight: 700;letter-spacing: 0.02em;clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);animation: svx-in 0.6s ease both;}
.svx-funnel__stages li:nth-child(1) {background: #E3D7F9;}
.svx-funnel__stages li:nth-child(2) {background: #BB96F5;animation-delay: 0.12s;}
.svx-funnel__stages li:nth-child(3) {color: #fff;background: #681ED8;animation-delay: 0.24s;}
.svx-funnel__stages li:nth-child(4) {color: #fff;background: var(--svp-purple);animation-delay: 0.36s;}
.svx-funnel__stages li:nth-child(5) {color: #fff;background: var(--svp-deep);animation-delay: 0.48s;}
.svx-bars__set {display: flex;align-items: flex-end;gap: 0.4em;height: 4.6em;margin-top: 0.8em;}
.svx-bars__set i {flex: 1;height: var(--h);background: #D6C5F5;transform-origin: bottom;animation: svx-grow 1s cubic-bezier(0.22, 1, 0.36, 1) both;}
.svx-bars__set i.is-top {background: var(--svp-tang);animation-delay: 0.4s;}
@keyframes svx-grow {from {transform: scaleY(0.15);}}

/* hub */
.svx-hub__lines {position: absolute;inset: 0;width: 100%;height: 100%;}
.svx-hub__lines line {stroke: var(--svp-purple);stroke-width: 1.5;stroke-dasharray: 3 5;vector-effect: non-scaling-stroke;opacity: 0.5;animation: svx-dash 1.4s linear infinite;}
.svx-hub__lines circle {fill: none;stroke: #D6C5F5;stroke-width: 1.5;vector-effect: non-scaling-stroke;}
@keyframes svx-dash {to {stroke-dashoffset: -16;}}
.svx-hub__core {position: absolute;top: 50%;left: 50%;z-index: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 0.6em;width: 9em;height: 9em;padding: 0.6em;text-align: center;color: #fff;background: linear-gradient(140deg, var(--svp-purple), var(--svp-deep));transform: translate(-50%, -50%);box-shadow: 0 0 0 0.6em rgba(65, 2, 153, 0.12);}
.svx-hub__core .svx__icon {color: var(--svp-purple);background: #fff;}
.svx-hub__core b {font-size: 1.02em;font-weight: 700;line-height: 1.2;}
.svx-hub__node {position: absolute;z-index: 1;display: inline-flex;align-items: center;gap: 0.55em;padding: 0.45em 0.8em 0.45em 0.45em;border: 1px solid var(--svp-line);white-space: nowrap;background: #fff;transform: translate(-50%, -50%);animation: svx-ping 4.2s ease-in-out var(--d, 0s) infinite;}
.svx-hub__node .svx__icon {width: 2em;height: 2em;}
.svx-hub__node b {font-size: 0.9em;font-weight: 600;}
@keyframes svx-ping {0%, 30%, 100% {border-color: var(--svp-line);} 10%, 20% {border-color: var(--svp-tang);box-shadow: 0 0 0 0.3em rgba(255, 107, 44, 0.14);}}

/* browser */
.svx-browser {display: flex;flex-direction: column;}
.svx-browser__chrome {display: flex;flex: none;align-items: center;gap: 0.4em;height: 2.4em;padding: 0 0.9em;border-bottom: 1px solid var(--svp-line);background: #F2EDFB;}
.svx-browser__chrome i {width: 0.65em;height: 0.65em;border-radius: 50%;background: #C8B9E7;}
.svx-browser__chrome span {display: inline-flex;align-items: center;gap: 0.4em;margin-left: 0.9em;padding: 0.25em 0.8em;font-size: 0.78em;font-weight: 500;color: var(--svp-text);background: #fff;}
.svx-browser__chrome span svg {width: 1em;height: 1em;color: #2f9e5b;}
.svx-browser__page {display: flex;flex: 1;flex-direction: column;gap: 1.2em;padding: 1.2em 1.4em;}
.svx-browser__nav {display: flex;align-items: center;gap: 0.9em;}
.svx-browser__nav b {width: 3.2em;height: 0.95em;background: var(--svp-purple);}
.svx-browser__nav i {width: 2.4em;height: 0.45em;background: #DCD3EF;}
.svx-browser__nav em {width: 4em;height: 1.5em;margin-left: auto;background: var(--svp-tang);}
.svx-browser__hero {display: grid;grid-template-columns: 1.05fr 0.95fr;align-items: center;gap: 1.1em;}
.svx-browser__btn {display: inline-block;margin-top: 1em;padding: 0.55em 1em;font-size: 0.75em;font-weight: 700;color: #fff;background: var(--svp-purple);animation: svx-press 4s ease-in-out 1.6s infinite;}
@keyframes svx-press {0%, 40%, 100% {transform: none;} 45% {transform: scale(0.94);} 50% {transform: none;}}
.svx-browser__media {height: 7.6em;background: linear-gradient(135deg, var(--svp-purple) 0%, #a83b72 55%, var(--svp-tang) 100%);}
.svx-browser__cards {display: grid;flex: 1;grid-template-columns: repeat(3, 1fr);gap: 0.7em;}
.svx-browser__cards i {border: 1px solid var(--svp-line);background: #F7F4FE;animation: svx-in 0.6s ease both;}
.svx-browser__cards i:nth-child(2) {animation-delay: 0.15s;}
.svx-browser__cards i:nth-child(3) {animation-delay: 0.3s;}
.svx-browser__cursor {position: absolute;left: 30%;top: 58%;color: var(--svp-ink);animation: svx-cursor 4s ease-in-out infinite;}
.svx-browser__cursor svg {width: 1.7em;height: 1.7em;fill: #fff;}
@keyframes svx-cursor {0% {transform: translate(6em, 3em);} 40%, 55% {transform: translate(0, 0);} 100% {transform: translate(6em, 3em);}}
.svx-vitals__row {display: flex;align-items: center;justify-content: space-between;gap: 0.8em;margin-top: 0.7em;font-size: 0.86em;font-weight: 500;}
.svx-vitals__row em {padding: 0.15em 0.55em;font-size: 0.86em;font-style: normal;font-weight: 700;color: #1A7F43;background: #E5F5EB;}

/* workflow */
.svx-flow__lines {position: absolute;inset: 0;width: 100%;height: 100%;}
.svx-flow__lines path {fill: none;stroke: #CBB6F0;stroke-width: 2;vector-effect: non-scaling-stroke;}
.svx-flow__lines .svx-flow__pulse {vector-effect: none;stroke: var(--svp-purple);stroke-width: 3;stroke-dasharray: 0.12 0.88;stroke-dashoffset: 1;stroke-linecap: round;animation: svx-run 2.4s linear infinite;}
@keyframes svx-run {to {stroke-dashoffset: 0;}}
.svx-flow__node {position: absolute;z-index: 1;display: flex;align-items: center;gap: 0.7em;padding: 0.6em 0.9em 0.6em 0.6em;border: 1px solid var(--svp-line);background: #fff;transform: translate(-50%, -50%);}
.svx-flow__node small {display: block;font-size: 0.7em;font-weight: 700;letter-spacing: 0.08em;text-transform: uppercase;color: var(--svp-text);}
.svx-flow__node b {display: block;font-size: 0.95em;font-weight: 700;line-height: 1.2;}
.svx-flow__node em {display: block;font-size: 0.78em;font-style: normal;color: var(--svp-text);}
.svx-flow__node--trigger {top: 13%;left: 50%;min-width: 52%;}
.svx-flow__node--brain {top: 47.7%;left: 50%;min-width: 56%;border-color: transparent;color: #fff;background: linear-gradient(140deg, var(--svp-purple), var(--svp-deep));box-shadow: 0 0 0 0.55em rgba(65, 2, 153, 0.12);}
.svx-flow__node--brain small, .svx-flow__node--brain em {color: rgba(255, 255, 255, 0.78);}
.svx-flow__node--brain .svx__icon {color: var(--svp-purple);background: #fff;}
.svx-flow__actions .svx-flow__node {top: 85%;flex-direction: column;gap: 0.45em;width: 29%;padding: 0.7em 0.4em;text-align: center;}
.svx-flow__actions .svx-flow__node:nth-child(1) {left: 16.7%;}
.svx-flow__actions .svx-flow__node:nth-child(2) {left: 50%;}
.svx-flow__actions .svx-flow__node:nth-child(3) {left: 83.3%;}
.svx-flow__actions .svx-flow__node b {font-size: 0.82em;font-weight: 600;}
.svx-flow__actions .svx-flow__node .svx__icon {color: #fff;background: var(--svp-tang);}

/* chat */
.svx-chat {display: flex;justify-content: center;border: 0;background: transparent;box-shadow: none;overflow: visible;}
.svx-chat__phone {display: flex;flex-direction: column;width: 60%;height: 100%;overflow: hidden;border: 0.55em solid var(--svp-ink);border-radius: 2.2em;background: #EFE9F9;box-shadow: 0 2.4em 4.4em -2.4em rgba(49, 2, 113, 0.5);}
.svx-chat__top {display: flex;flex: none;align-items: center;gap: 0.6em;padding: 1.3em 0.9em 0.7em;color: #fff;background: var(--svp-ink);}
.svx-chat__avatar {display: inline-flex;flex: none;align-items: center;justify-content: center;width: 2.2em;height: 2.2em;border-radius: 50%;font-weight: 700;background: var(--svp-purple);}
.svx-chat__top b {display: flex;align-items: center;gap: 0.3em;font-size: 0.9em;}
.svx-chat__top small {display: block;font-size: 0.7em;color: rgba(255, 255, 255, 0.65);}
.svx-chat__verified {display: inline-flex;align-items: center;justify-content: center;width: 1.1em;height: 1.1em;border-radius: 50%;background: var(--svp-tang);}
.svx-chat__verified svg {width: 0.7em;height: 0.7em;stroke-width: 2;}
.svx-chat__body {display: flex;flex: 1;flex-direction: column;justify-content: flex-end;gap: 0.55em;padding: 0.9em 0.7em 1.1em;}
.svx-chat__msg {max-width: 86%;padding: 0.55em 0.75em;font-size: 0.8em;line-height: 1.38;background: #fff;animation: svx-in 0.5s ease var(--d, 0s) both;}
.svx-chat__msg--brand {align-self: flex-start;}
.svx-chat__msg--user {position: relative;align-self: flex-end;padding-right: 2.6em;background: #D2BAF8;}
.svx-chat__ticks {position: absolute;right: 0.5em;bottom: 0.45em;display: inline-flex;color: var(--svp-purple);}
.svx-chat__ticks svg {width: 0.95em;height: 0.95em;stroke-width: 2;}
.svx-chat__ticks svg + svg {margin-left: -0.55em;}
.svx-chat__msg--card {align-self: flex-start;padding: 0;}
.svx-chat__media {height: 4.6em;background: linear-gradient(135deg, var(--svp-purple) 0%, #a83b72 55%, var(--svp-tang) 100%);}
.svx-chat__msg--card b {display: block;padding: 0.55em 0.75em 0.45em;font-weight: 700;}
.svx-chat__msg--card span {display: block;padding: 0.45em 0.75em;border-top: 1px solid #E7DEF4;font-weight: 600;text-align: center;color: var(--svp-purple);}
.svx-chat__day {align-self: center;margin-bottom: auto;padding: 0.25em 0.7em;font-size: 0.68em;font-weight: 700;letter-spacing: 0.04em;text-transform: uppercase;color: var(--svp-text);background: rgba(255, 255, 255, 0.85);}
.svx-chat__note {display: flex;align-items: center;gap: 0.4em;align-self: center;max-width: 90%;margin-bottom: 0.4em;padding: 0.4em 0.7em;font-size: 0.66em;line-height: 1.3;text-align: center;color: #5b4e73;background: #FFF4E5;}
.svx-chat__note svg {flex: none;width: 1.2em;height: 1.2em;color: var(--svp-tang);}
.svx-chat--sms .svx-chat__body {background: #fff;}
.svx-chat--sms .svx-chat__day {background: #ECE6F5;}
.svx-chat--sms .svx-chat__msg--brand {background: #ECE6F5;}
.svx-replies__btn {display: block;margin-top: 0.55em;padding: 0.45em 0.7em;border: 1px solid var(--svp-purple);border-radius: 2em;font-size: 0.82em;font-weight: 600;text-align: center;color: var(--svp-purple);}
.svx-replies__btn:first-of-type {margin-top: 0.8em;color: #fff;background: var(--svp-purple);}

/* inbox */
.svx-inbox {display: flex;flex-direction: column;}
.svx-inbox__head {display: flex;align-items: center;gap: 1em;padding: 1em 1.2em;border-bottom: 1px solid var(--svp-line);background: #F5F1FB;}
.svx-inbox__head .svx-line {margin: 0 0 0 auto;}
.svx-inbox__list {display: flex;flex: 1;flex-direction: column;margin: 0;padding: 0;}
.svx-inbox__list li {display: grid;flex: 1;grid-template-columns: 2.3em minmax(0, 1fr);align-items: center;gap: 0.8em;padding: 0.95em 1.2em;border-bottom: 1px solid #EBE4F4;animation: svx-in 0.5s ease both;}
.svx-inbox__list li:nth-child(2) {animation-delay: 0.1s;}
.svx-inbox__list li:nth-child(3) {animation-delay: 0.2s;}
.svx-inbox__list li:nth-child(4) {animation-delay: 0.3s;}
.svx-inbox__avatar {display: inline-flex;align-items: center;justify-content: center;width: 2.3em;height: 2.3em;font-weight: 700;color: var(--svp-purple);background: #E9DEFC;}
.svx-inbox__list b {display: block;font-size: 0.9em;font-weight: 600;color: #4f495f;}
.svx-inbox__list div > span {display: block;overflow: hidden;font-size: 0.82em;white-space: nowrap;text-overflow: ellipsis;color: #827a97;}
.svx-inbox__list li.is-you {box-shadow: inset 3px 0 0 var(--svp-purple);background: var(--svp-tint);}
.svx-inbox__list li.is-you b {color: var(--svp-ink);}
.svx-inbox__list li.is-you span {font-weight: 600;color: var(--svp-ink);}
.svx-inbox__list li.is-you .svx-inbox__avatar {color: #fff;background: var(--svp-purple);}
.svx-inbox__tags {display: flex;gap: 0.35em;margin-top: 0.45em;font-style: normal;}
.svx-inbox__tags i {padding: 0.15em 0.5em;font-size: 0.72em;font-style: normal;font-weight: 700;color: #fff;background: var(--svp-purple);}
.svx-inbox__tags i + i {background: var(--svp-tang);}
.svx-journey ol {position: relative;margin: 0.8em 0 0;padding: 0;}
.svx-journey ol::before {content: "";position: absolute;top: 0.6em;bottom: 0.6em;left: 0.32em;width: 2px;background: #D6C5F5;}
.svx-journey li {position: relative;padding: 0.25em 0 0.25em 1.4em;font-size: 0.88em;font-weight: 600;}
.svx-journey li::before {content: "";position: absolute;left: 0;top: 50%;width: 0.7em;height: 0.7em;margin-top: -0.35em;background: var(--svp-purple);}
.svx-journey li:last-child::before {background: var(--svp-tang);}

/* timeline (video) */
.svx-edit {display: flex;flex-direction: column;padding: 1.2em;}
.svx-edit__screen {position: relative;flex: none;aspect-ratio: 16 / 9;overflow: hidden;background: linear-gradient(140deg, #170b34 0%, var(--svp-ink) 100%);}
.svx-edit__shape {position: absolute;}
.svx-edit__shape--a {left: 8%;top: 18%;width: 34%;aspect-ratio: 1;border-radius: 50%;background: radial-gradient(circle at 35% 35%, #883df8, var(--svp-purple) 60%, transparent 61%);}
.svx-edit__shape--b {right: 10%;bottom: 0;width: 38%;height: 62%;background: linear-gradient(180deg, var(--svp-tang), #c2410c);}
.svx-edit__shape--c {left: 38%;bottom: 18%;width: 30%;height: 0.6em;background: rgba(255, 255, 255, 0.85);box-shadow: 0 -1.2em 0 rgba(255, 255, 255, 0.4);}
.svx-edit__play {position: absolute;top: 50%;left: 50%;display: inline-flex;align-items: center;justify-content: center;width: 3.4em;height: 3.4em;border-radius: 50%;color: var(--svp-purple);background: #fff;transform: translate(-50%, -50%);box-shadow: 0 0 0 0.5em rgba(255, 255, 255, 0.18);}
.svx-edit__play svg {width: 1.5em;height: 1.5em;margin-left: 0.15em;}
.svx-edit__tc {position: absolute;left: 0.8em;bottom: 0.6em;font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;font-size: 0.75em;color: rgba(255, 255, 255, 0.75);}
.svx-edit__rec {position: absolute;left: 0.8em;top: 0.6em;display: inline-flex;align-items: center;gap: 0.4em;font-size: 0.72em;font-weight: 700;letter-spacing: 0.06em;text-transform: uppercase;color: #fff;}
.svx-edit__rec i {width: 0.6em;height: 0.6em;border-radius: 50%;background: var(--svp-tang);animation: svx-pulse 1.6s ease-in-out infinite;}
.svx-edit__tracks {position: relative;display: flex;flex: 1;flex-direction: column;justify-content: center;gap: 0.5em;margin-top: 1em;}
.svx-edit__track {display: grid;grid-template-columns: 4.6em minmax(0, 1fr);align-items: center;gap: 0.5em;}
.svx-edit__track > span {font-size: 0.72em;font-weight: 700;letter-spacing: 0.05em;text-transform: uppercase;color: var(--svp-text);}
.svx-edit__track > div {display: flex;gap: 0.25em;height: 2em;}
.svx-edit__track i {display: flex;flex: 1 1 0;align-items: center;min-width: 0;padding: 0 0.6em;overflow: hidden;font-size: 0.7em;font-style: normal;font-weight: 600;white-space: nowrap;text-overflow: ellipsis;color: #fff;background: var(--svp-purple);}
.svx-edit__track i:nth-child(2) {flex-grow: 1.6;}
.svx-edit__track:nth-child(2) i {color: var(--svp-deep);background: #BB96F5;}
.svx-edit__track:nth-child(3) i {background: var(--svp-tang) repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.28) 0 2px, transparent 2px 5px);}
.svx-edit__head {position: absolute;top: -0.4em;bottom: -0.4em;left: 5.1em;width: 2px;background: var(--svp-ink);animation: svx-scrub 6s linear infinite;}
.svx-edit__head::before {content: "";position: absolute;top: 0;left: -0.35em;width: 0.8em;height: 0.8em;background: var(--svp-ink);clip-path: polygon(0 0, 100% 0, 50% 100%);}
@keyframes svx-scrub {from {left: 5.1em;} to {left: 100%;}}
.svx-edit__reels {display: grid;flex: none;grid-template-columns: 1fr 1.25fr 1fr;align-items: center;gap: 0.8em;padding: 0 1.2em;}
.svx-edit__reel {position: relative;aspect-ratio: 9 / 16;max-height: 15em;overflow: hidden;background: linear-gradient(170deg, #1e0e48 0%, var(--svp-ink) 100%);}
.svx-edit__reel:nth-child(3) {background: linear-gradient(170deg, var(--svp-tang) 0%, #7c2d12 100%);}
.svx-edit__reel.is-active {background: linear-gradient(170deg, var(--svp-purple) 0%, var(--svp-deep) 100%);outline: 2px solid var(--svp-tang);outline-offset: 3px;}
.svx-edit__reel span {position: absolute;left: 0.6em;bottom: 0.6em;font-size: 0.75em;font-weight: 700;color: #fff;}
.svx-edit__reel .svx-edit__play {width: 2.8em;height: 2.8em;}

/* stage3d (CGI, AR/VR) */
.svx-stage {border-color: var(--svp-ink);background: radial-gradient(ellipse at 50% 30%, #190c38 0%, var(--svp-ink) 70%);}
.svx-stage__floor {position: absolute;right: -30%;bottom: -8%;left: -30%;height: 58%;background-image: linear-gradient(rgba(171, 128, 241, 0.22) 1px, transparent 1px), linear-gradient(90deg, rgba(171, 128, 241, 0.22) 1px, transparent 1px);background-size: 2.6em 2.6em;transform: perspective(22em) rotateX(64deg);transform-origin: 50% 100%;-webkit-mask-image: linear-gradient(to top, #000 20%, transparent 95%);mask-image: linear-gradient(to top, #000 20%, transparent 95%);}
.svx-stage__scene {position: absolute;top: 44%;left: 50%;width: 7.4em;height: 7.4em;margin: -3.7em 0 0 -3.7em;perspective: 40em;}
.svx-stage__cube {position: relative;width: 100%;height: 100%;transform-style: preserve-3d;animation: svx-turn 14s linear infinite;}
.svx-stage__cube i {position: absolute;inset: 0;border: 1.5px solid #AB80F1;background: rgba(65, 2, 153, 0.22);}
.svx-stage__cube i:nth-child(1) {transform: translateZ(3.7em);background: rgba(255, 107, 44, 0.32);border-color: #FFB08A;}
.svx-stage__cube i:nth-child(2) {transform: rotateY(90deg) translateZ(3.7em);}
.svx-stage__cube i:nth-child(3) {transform: rotateY(180deg) translateZ(3.7em);}
.svx-stage__cube i:nth-child(4) {transform: rotateY(-90deg) translateZ(3.7em);}
.svx-stage__cube i:nth-child(5) {transform: rotateX(90deg) translateZ(3.7em);background: rgba(171, 128, 241, 0.35);}
.svx-stage__cube i:nth-child(6) {transform: rotateX(-90deg) translateZ(3.7em);}
@keyframes svx-turn {from {transform: rotateX(-22deg) rotateY(0);} to {transform: rotateX(-22deg) rotateY(360deg);}}
.svx-stage__axis {position: absolute;left: 1.2em;bottom: 1.2em;width: 3em;height: 3em;}
.svx-stage__axis i {position: absolute;left: 0;bottom: 0;height: 2px;transform-origin: left center;}
.svx-stage__axis .x {width: 2.6em;background: var(--svp-tang);}
.svx-stage__axis .y {width: 2.6em;background: #AB80F1;transform: rotate(-90deg);}
.svx-stage__axis .z {width: 1.9em;background: #fff;transform: rotate(-40deg);opacity: 0.7;}
.svx-stage__hud {position: absolute;top: 1em;left: 1.1em;font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;font-size: 0.75em;letter-spacing: 0.04em;color: #AB80F1;}
.svx-stage__phone {position: absolute;top: 7%;left: 50%;width: 44%;height: 86%;border: 0.4em solid rgba(255, 255, 255, 0.85);border-radius: 1.8em;transform: translateX(-50%);}
.svx-stage__reticle {position: absolute;top: 44%;left: 50%;width: 11em;height: 11em;margin: -5.5em 0 0 -5.5em;background: linear-gradient(var(--svp-tang), var(--svp-tang)) left top / 1.4em 2px, linear-gradient(var(--svp-tang), var(--svp-tang)) left top / 2px 1.4em, linear-gradient(var(--svp-tang), var(--svp-tang)) right top / 1.4em 2px, linear-gradient(var(--svp-tang), var(--svp-tang)) right top / 2px 1.4em, linear-gradient(var(--svp-tang), var(--svp-tang)) left bottom / 1.4em 2px, linear-gradient(var(--svp-tang), var(--svp-tang)) left bottom / 2px 1.4em, linear-gradient(var(--svp-tang), var(--svp-tang)) right bottom / 1.4em 2px, linear-gradient(var(--svp-tang), var(--svp-tang)) right bottom / 2px 1.4em;background-repeat: no-repeat;}
.svx-stage--ar .svx-stage__reticle {top: 50%;margin-top: -3.4em;}
.svx-stage--ar .svx-stage__scene {top: 52%;}
.svx-passes__row {display: flex;align-items: center;gap: 0.55em;margin-top: 0.6em;font-size: 0.86em;font-weight: 600;color: var(--svp-text);}
.svx-passes__row i {display: inline-flex;align-items: center;justify-content: center;width: 1.35em;height: 1.35em;border: 1.5px solid #C8B9E7;color: transparent;}
.svx-passes__row i svg {width: 0.85em;height: 0.85em;stroke-width: 2;}
.svx-passes__row.is-done {color: var(--svp-ink);}
.svx-passes__row.is-done i {border-color: var(--svp-purple);color: #fff;background: var(--svp-purple);}
.svx-passes__row:not(.is-done) i {border-color: var(--svp-tang);animation: svx-pulse 1.6s ease-in-out infinite;}

/* canvas (design) */
.svx-canvas {display: grid;grid-template-columns: 2.9em minmax(0, 1fr) 7.6em;}
.svx-canvas__tools {display: flex;flex-direction: column;gap: 0.45em;padding: 0.8em 0.45em;border-right: 1px solid var(--svp-line);background: #F5F1FB;}
.svx-canvas__tools i {display: inline-flex;align-items: center;justify-content: center;width: 2em;height: 2em;color: var(--svp-text);}
.svx-canvas__tools i:first-child {color: #fff;background: var(--svp-purple);}
.svx-canvas__tools svg {width: 1.05em;height: 1.05em;}
.svx-canvas__board {position: relative;margin: 1.1em;overflow: hidden;background: #fff radial-gradient(#D9CBEF 1px, transparent 1.2px) 0 0 / 1.1em 1.1em;box-shadow: inset 0 0 0 1px var(--svp-line);}
.svx-canvas__circle {position: absolute;top: 12%;right: 12%;width: 42%;aspect-ratio: 1;border-radius: 50%;background: linear-gradient(140deg, var(--svp-purple), var(--svp-deep));}
.svx-canvas__type {position: absolute;left: 10%;bottom: 26%;font-size: 4.6em;font-weight: 800;line-height: 1;letter-spacing: -0.04em;color: var(--svp-ink);}
.svx-canvas__bar {position: absolute;left: 10%;bottom: 15%;width: 54%;height: 0.7em;background: var(--svp-tang);}
.svx-canvas__bar--short {bottom: 8.5%;width: 32%;background: #BB96F5;}
.svx-canvas__select {position: absolute;top: calc(12% - 0.5em);right: calc(12% - 0.5em);width: calc(42% + 1em);aspect-ratio: 1;border: 1.5px solid var(--svp-tang);animation: svx-pulse-line 3s ease-in-out infinite;}
.svx-canvas__select i {position: absolute;width: 0.7em;height: 0.7em;border: 1.5px solid var(--svp-tang);background: #fff;}
.svx-canvas__select i:nth-child(1) {top: -0.4em;left: -0.4em;}
.svx-canvas__select i:nth-child(2) {top: -0.4em;right: -0.4em;}
.svx-canvas__select i:nth-child(3) {bottom: -0.4em;left: -0.4em;}
.svx-canvas__select i:nth-child(4) {right: -0.4em;bottom: -0.4em;}
@keyframes svx-pulse-line {50% {transform: scale(1.03);}}
.svx-canvas__layers {margin: 0;padding: 0.6em 0;border-left: 1px solid var(--svp-line);background: #F5F1FB;}
.svx-canvas__layers li {padding: 0.55em 0.8em;font-size: 0.78em;font-weight: 600;color: var(--svp-text);}
.svx-canvas__layers li.is-active {color: var(--svp-purple);background: #E6D8FC;box-shadow: inset 2px 0 0 var(--svp-purple);}
.svx--canvas .svx__chip--a {top: auto;right: 0;bottom: 16%;width: 34%;}
.svx-swatch div {display: grid;grid-template-columns: repeat(4, 1fr);gap: 0.4em;margin-top: 0.8em;}
.svx-swatch i {aspect-ratio: 1;background: var(--c);box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);}

/* social */
.svx-social {display: flex;flex-direction: column;}
.svx-social__head {display: flex;align-items: center;gap: 0.6em;padding: 0.8em 1em;}
.svx-social__avatar {display: inline-flex;flex: none;align-items: center;justify-content: center;width: 2.2em;height: 2.2em;border-radius: 50%;font-weight: 700;color: #fff;background: var(--svp-purple);box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--svp-tang);}
.svx-social__head b {display: block;font-size: 0.9em;}
.svx-social__head small {display: block;font-size: 0.72em;color: var(--svp-text);}
.svx-social__more {display: flex;gap: 0.2em;margin-left: auto;}
.svx-social__more i {width: 0.3em;height: 0.3em;border-radius: 50%;background: var(--svp-ink);}
.svx-social__media {position: relative;flex: 1;min-height: 0;background: linear-gradient(140deg, var(--svp-purple) 0%, #a83b72 55%, var(--svp-tang) 100%);}
.svx-social__media::before {content: "";position: absolute;left: 14%;bottom: 0;width: 44%;height: 70%;background: rgba(255, 255, 255, 0.16);clip-path: polygon(0 100%, 50% 0, 100% 100%);}
.svx-social__media::after {content: "";position: absolute;left: 50%;bottom: 0.8em;width: 0.45em;height: 0.45em;margin-left: -1.1em;border-radius: 50%;background: #fff;box-shadow: 0.75em 0 0 rgba(255, 255, 255, 0.5), 1.5em 0 0 rgba(255, 255, 255, 0.5);}
.svx-social__tag {position: absolute;left: 0.8em;top: 0.8em;z-index: 1;padding: 0.25em 0.6em;font-size: 0.75em;font-weight: 700;color: var(--svp-ink);background: #fff;}
.svx-social__heart {position: absolute;top: 50%;left: 50%;z-index: 1;color: #fff;transform: translate(-50%, -50%) scale(0);animation: svx-like 4s ease-in-out 1s infinite;}
.svx-social__heart svg {width: 3.4em;height: 3.4em;fill: #fff;}
@keyframes svx-like {0%, 100% {transform: translate(-50%, -50%) scale(0);opacity: 0;} 10% {transform: translate(-50%, -50%) scale(1.15);opacity: 1;} 18%, 30% {transform: translate(-50%, -50%) scale(1);opacity: 1;} 40% {transform: translate(-50%, -50%) scale(1);opacity: 0;}}
.svx-social__actions {display: flex;gap: 0.9em;padding: 0.7em 1em 0.2em;}
.svx-social__actions span {color: var(--svp-ink);}
.svx-social__actions svg {width: 1.35em;height: 1.35em;}
.svx-social__actions .is-on {color: var(--svp-tang);}
.svx-social__actions .is-on svg {fill: var(--svp-tang);}
.svx-social__save {margin-left: auto;}
.svx-social__caption {padding: 0 1em;}
.svx-social__comment {display: flex;align-items: flex-start;gap: 0.55em;margin: 0.7em 1em 0.9em;padding: 0.6em 0.7em;background: var(--svp-tint);box-shadow: inset 3px 0 0 var(--svp-tang);animation: svx-in 0.6s ease 1.2s both;}
.svx-social__comment > span {display: inline-flex;flex: none;align-items: center;justify-content: center;width: 1.8em;height: 1.8em;border-radius: 50%;font-size: 0.8em;font-weight: 700;color: var(--svp-purple);background: #D2BAF8;}
.svx-social__comment p {margin: 0;font-size: 0.78em;line-height: 1.4;color: var(--svp-ink);}
.svx-cal__grid {display: grid;grid-template-columns: repeat(7, 1fr);gap: 0.3em;margin-top: 0.8em;}
.svx-cal__grid i {aspect-ratio: 1;background: #ECE6F5;}
.svx-cal__grid i.is-p {background: var(--svp-purple);}
.svx-cal__grid i.is-r {background: var(--svp-tang);}
.svx-cal__grid i.is-s {box-shadow: inset 0 0 0 1.5px var(--svp-purple);background: #fff;}

/* press */
.svx-press {padding: 1.4em 1.5em;}
.svx-press__mast {display: flex;align-items: center;justify-content: space-between;padding-bottom: 0.7em;border-bottom: 3px double var(--svp-ink);}
.svx-press__mast b {font-family: Georgia, "Times New Roman", serif;font-size: 1.35em;font-weight: 700;letter-spacing: -0.01em;}
.svx-press__mast .svx-line {margin: 0;}
.svx-press__kicker {display: inline-block;margin-top: 1em;padding: 0.2em 0.55em;font-size: 0.72em;font-weight: 700;letter-spacing: 0.08em;text-transform: uppercase;color: #fff;background: var(--svp-tang);}
.svx-press__headline {margin: 0.55em 0 0.9em;font-family: Georgia, "Times New Roman", serif;font-size: 1.55em;font-weight: 700;line-height: 1.18;color: var(--svp-ink);}
.svx-press__body {display: grid;grid-template-columns: 1fr 1fr;gap: 1.1em;}
.svx-press__body .svx-line:first-child {margin-top: 0.2em;}
.svx-press__body blockquote {margin: 0;padding: 0.2em 0 0 0.9em;border-left: 3px solid var(--svp-purple);font-family: Georgia, "Times New Roman", serif;font-size: 0.98em;font-style: italic;line-height: 1.35;color: var(--svp-purple);background: none;animation: svx-in 0.7s ease 0.6s both;}
.svx-press__body blockquote small {display: block;margin-top: 0.5em;font-family: inherit;font-size: 0.75em;font-style: normal;font-weight: 600;color: var(--svp-text);}

/* ivr */
.svx-ivr {display: flex;flex-direction: column;padding: 1.3em 1.4em;}
.svx-ivr__call {display: flex;align-items: center;gap: 0.75em;padding: 0.8em 0.9em;color: #fff;background: var(--svp-ink);}
.svx-ivr__call .svx__icon {color: #fff;background: var(--svp-tang);animation: svx-pulse 1.6s ease-in-out infinite;}
.svx-ivr__call small {display: block;font-size: 0.72em;color: rgba(255, 255, 255, 0.65);}
.svx-ivr__call b {display: block;font-size: 0.95em;}
.svx-ivr__timer {display: inline-flex;align-items: center;gap: 0.4em;margin-left: auto;font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;font-size: 0.8em;font-style: normal;color: rgba(255, 255, 255, 0.8);}
.svx-ivr__timer i {width: 0.55em;height: 0.55em;border-radius: 50%;background: #3ccf78;}
.svx-ivr__prompt {margin: 0.9em 0 0.8em;font-size: 0.88em;font-style: italic;color: var(--svp-text);}
.svx-ivr__menu {display: flex;flex: 1;flex-direction: column;justify-content: space-between;gap: 0.45em;margin: 0;padding: 0;}
.svx-ivr__menu li {display: grid;flex: 1;grid-template-columns: 2.2em minmax(0, 1fr) auto;align-items: center;gap: 0.75em;padding: 0 0.8em 0 0.45em;border: 1px solid var(--svp-line);background: #fff;animation: svx-route 6s ease-in-out var(--d, 0s) infinite;}
.svx-ivr__menu kbd {display: inline-flex;align-items: center;justify-content: center;width: 1.9em;height: 1.9em;padding: 0;border: 0;border-radius: 0;font-family: inherit;font-size: 0.95em;font-weight: 700;color: var(--svp-purple);background: #E9DEFC;box-shadow: none;}
.svx-ivr__menu span {font-size: 0.88em;font-weight: 600;}
.svx-ivr__menu em {font-size: 0.75em;font-style: normal;font-weight: 600;color: var(--svp-text);}
@keyframes svx-route {0%, 22%, 100% {border-color: var(--svp-line);background: #fff;} 4%, 18% {border-color: var(--svp-purple);background: var(--svp-tint);}}

/* search: paid result tag */
.svx-search__ad {display: inline-block;margin: 0 0.5em 0.2em 0;padding: 0.1em 0.45em;font-size: 0.7em;font-style: normal;font-weight: 700;color: var(--svp-ink);background: #FFE3D3;}
.svx-search__list li.is-you .svx-search__ad + b {display: inline;}

/* reviews (ORM) */
.svx-reviews {display: flex;flex-direction: column;gap: 0.7em;padding: 1.3em 1.4em;}
.svx-reviews__head {display: flex;align-items: center;gap: 0.75em;padding-bottom: 0.8em;border-bottom: 1px solid #EBE4F4;}
.svx-reviews__logo {display: inline-flex;flex: none;align-items: center;justify-content: center;width: 2.5em;height: 2.5em;font-weight: 700;color: #fff;background: var(--svp-purple);}
.svx-reviews__head b {display: block;font-size: 0.98em;}
.svx-reviews__head small {margin-left: auto;font-size: 0.72em;font-weight: 600;color: var(--svp-text);}
.svx-reviews__stars {display: inline-flex;gap: 0.15em;font-size: 0.7em;color: #F5A524;}
.svx-reviews__stars .is-off {color: #D9D2E6;}
.svx-reviews__item {display: grid;grid-template-columns: 2em minmax(0, 1fr);gap: 0.7em;padding: 0.65em 0.7em;border: 1px solid #EBE4F4;animation: svx-in 0.5s ease var(--d, 0s) both;}
.svx-reviews__who {display: inline-flex;align-items: center;justify-content: center;width: 2em;height: 2em;border-radius: 50%;font-size: 0.85em;font-weight: 700;color: var(--svp-purple);background: #E9DEFC;}
.svx-reviews__item b {margin-right: 0.45em;font-size: 0.82em;}
.svx-reviews__item p {margin: 0.25em 0 0;font-size: 0.78em;line-height: 1.35;color: var(--svp-ink);}
.svx-reviews__item .svx-reviews__reply {margin-top: 0.45em;padding: 0.45em 0.6em;color: var(--svp-text);background: var(--svp-tint);box-shadow: inset 2px 0 0 var(--svp-purple);}
.svx-reviews__reply em {display: block;font-size: 0.85em;font-style: normal;font-weight: 700;color: var(--svp-purple);}
.svx-sentiment__row {display: grid;grid-template-columns: 4.6em minmax(0, 1fr);align-items: center;gap: 0.5em;margin-top: 0.6em;font-size: 0.82em;font-weight: 600;}
.svx-sentiment__row i {display: block;width: var(--w);height: 0.6em;background: var(--svp-purple);transform-origin: left;animation: svx-widen 1s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;}
.svx-sentiment__row:nth-child(3) i {background: #BB96F5;}
.svx-sentiment__row.is-neg i {background: var(--svp-tang);}
@keyframes svx-widen {from {transform: scaleX(0.1);}}

/* answer (AEO / GEO) */
.svx-answer {display: flex;flex-direction: column;gap: 0.9em;padding: 1.4em 1.5em;}
.svx-answer__snippet {padding: 1em 1.1em;border: 1px solid var(--svp-line);background: var(--svp-tint);box-shadow: inset 3px 0 0 var(--svp-purple);animation: svx-in 0.6s ease 0.3s both;}
.svx-answer__tag {display: inline-block;margin-bottom: 0.5em;font-size: 0.7em;font-weight: 700;letter-spacing: 0.06em;text-transform: uppercase;color: var(--svp-purple);}
.svx-answer__snippet p {margin: 0;font-size: 0.88em;line-height: 1.45;color: var(--svp-ink);}
.svx-answer__snippet small {display: flex;align-items: center;gap: 0.35em;margin-top: 0.7em;font-size: 0.75em;font-weight: 600;color: var(--svp-purple);}
.svx-answer__snippet small svg {width: 1em;height: 1em;}
.svx-answer__paa {margin-top: 0.2em;}
.svx-answer__paa-list {margin: 0;padding: 0;}
.svx-answer__paa-list li {display: flex;align-items: center;justify-content: space-between;padding: 0.6em 0.2em;border-bottom: 1px solid #EBE4F4;font-size: 0.84em;font-weight: 500;}
.svx-answer__paa-list li i {width: 0.5em;height: 0.5em;margin-top: -0.25em;border-right: 1.5px solid var(--svp-text);border-bottom: 1.5px solid var(--svp-text);transform: rotate(45deg);}
.svx-answer__ask {display: flex;justify-content: flex-end;}
.svx-answer__ask span {max-width: 80%;padding: 0.7em 0.9em;font-size: 0.88em;font-weight: 500;line-height: 1.4;background: #E7DCF9;}
.svx-answer__reply {display: flex;flex: 1;flex-direction: column;padding: 1em 1.1em;border: 1px solid var(--svp-line);animation: svx-in 0.6s ease 0.4s both;}
.svx-answer__bot {display: inline-flex;align-items: center;gap: 0.45em;margin-bottom: 0.7em;font-size: 0.75em;font-weight: 700;letter-spacing: 0.04em;text-transform: uppercase;color: var(--svp-purple);}
.svx-answer__bot svg {width: 1.3em;height: 1.3em;}
.svx-answer__reply p {margin: 0;font-size: 0.9em;line-height: 1.5;color: var(--svp-ink);}
.svx-answer__reply p b {color: var(--svp-purple);}
.svx-answer__reply sup {padding: 0 0.3em;font-size: 0.7em;font-weight: 700;color: #fff;background: var(--svp-purple);}
.svx-answer__list {display: flex;flex-direction: column;gap: 0.45em;margin: 0.9em 0 0;padding: 0;}
.svx-answer__list li {display: flex;align-items: center;gap: 0.6em;padding: 0.55em 0.7em;border: 1px solid #EBE4F4;font-size: 0.82em;font-weight: 500;color: var(--svp-text);animation: svx-in 0.5s ease both;}
.svx-answer__list li:nth-child(2) {animation-delay: 0.6s;}
.svx-answer__list li:nth-child(3) {animation-delay: 0.75s;}
.svx-answer__list li span {display: inline-flex;flex: none;align-items: center;justify-content: center;width: 1.6em;height: 1.6em;font-size: 0.9em;font-weight: 700;color: var(--svp-text);background: #EEE9F7;}
.svx-answer__list li.is-you {border-color: var(--svp-purple);font-weight: 600;color: var(--svp-ink);background: var(--svp-tint);animation-delay: 0.45s;}
.svx-answer__list li.is-you span {color: #fff;background: var(--svp-purple);}
.svx-answer__sources {display: flex;flex-wrap: wrap;align-items: center;gap: 0.4em;margin-top: auto;padding-top: 0.9em;}
.svx-answer__sources small {font-size: 0.7em;font-weight: 700;letter-spacing: 0.05em;text-transform: uppercase;color: var(--svp-text);}
.svx-answer__sources span {padding: 0.25em 0.6em;border: 1px solid var(--svp-line);font-size: 0.74em;font-weight: 600;color: var(--svp-text);}
.svx-answer__sources span.is-you {border-color: var(--svp-purple);color: #fff;background: var(--svp-purple);}

/* doc (SEO copywriting) */
.svx-doc {display: flex;flex-direction: column;}
.svx-doc__bar {display: flex;align-items: center;gap: 0.3em;padding: 0.55em 0.9em;border-bottom: 1px solid var(--svp-line);background: #F5F1FB;}
.svx-doc__bar i {display: inline-flex;align-items: center;justify-content: center;min-width: 1.9em;height: 1.9em;font-size: 0.78em;font-style: normal;font-weight: 700;color: var(--svp-text);}
.svx-doc__bar i:nth-child(3) {color: #fff;background: var(--svp-purple);}
.svx-doc__bar i svg {width: 1.1em;height: 1.1em;}
.svx-doc__bar span {margin-left: auto;font-size: 0.7em;font-weight: 600;color: var(--svp-text);}
.svx-doc__page {display: flex;flex: 1;flex-direction: column;padding: 1.2em 1.5em;}
.svx-doc__kw {display: inline-flex;align-items: center;gap: 0.4em;align-self: flex-start;padding: 0.3em 0.6em;font-size: 0.72em;color: var(--svp-ink);background: #FFF1E8;}
.svx-doc__kw svg {width: 1.1em;height: 1.1em;color: var(--svp-tang);}
.svx-doc__h1 {margin: 0.7em 0 0.3em;font-size: 1.32em;font-weight: 700;line-height: 1.2;color: var(--svp-ink);}
.svx-doc__h2 {margin: 1em 0 0.2em;font-size: 1em;font-weight: 700;color: var(--svp-purple);}
.svx-doc__cta {align-self: flex-start;margin-top: auto;padding: 0.5em 1em;font-size: 0.75em;font-weight: 700;color: #fff;background: var(--svp-purple);}

/* store (e-commerce) */
.svx-store {display: flex;flex-direction: column;padding: 1em 1.2em 1.2em;}
.svx-store__top {display: flex;align-items: center;gap: 0.9em;padding-bottom: 0.9em;border-bottom: 1px solid #EBE4F4;}
.svx-store__top > b {width: 3em;height: 1em;background: var(--svp-purple);}
.svx-store__top span {display: flex;flex: 1;align-items: center;gap: 0.5em;padding: 0.45em 0.7em;border: 1px solid var(--svp-line);}
.svx-store__top span svg {width: 1em;height: 1em;color: var(--svp-text);}
.svx-store__top span .svx-line {margin: 0;}
.svx-store__top em {position: relative;display: inline-flex;color: var(--svp-ink);}
.svx-store__top em svg {width: 1.5em;height: 1.5em;}
.svx-store__top em i {position: absolute;top: -0.5em;right: -0.6em;display: inline-flex;align-items: center;justify-content: center;width: 1.3em;height: 1.3em;border-radius: 50%;font-size: 0.7em;font-style: normal;font-weight: 700;color: #fff;background: var(--svp-tang);animation: svx-pop 3s ease 1.2s infinite;}
@keyframes svx-pop {0%, 20%, 100% {transform: none;} 8% {transform: scale(1.4);}}
.svx-store__grid {display: grid;flex: 1;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 0.8em;margin-top: 1em;}
.svx-store__item {display: flex;flex-direction: column;padding: 0.6em;border: 1px solid var(--svp-line);animation: svx-in 0.5s ease both;}
.svx-store__item:nth-child(2) {animation-delay: 0.12s;}
.svx-store__item:nth-child(3) {animation-delay: 0.24s;}
.svx-store__img {position: relative;flex: 1;min-height: 5em;background: linear-gradient(150deg, #E3D7F9 0%, #BB96F5 100%);}
.svx-store__item:nth-child(2) .svx-store__img {background: linear-gradient(150deg, var(--svp-purple) 0%, #a83b72 60%, var(--svp-tang) 100%);}
.svx-store__img span {position: absolute;top: 0.5em;left: 0.5em;padding: 0.15em 0.45em;font-size: 0.66em;font-weight: 700;color: var(--svp-ink);background: #fff;}
.svx-store__btn {margin-top: 0.7em;padding: 0.45em;font-size: 0.72em;font-weight: 700;text-align: center;color: var(--svp-purple);border: 1px solid var(--svp-purple);}
.svx-store__item.is-added {border-color: var(--svp-purple);}
.svx-store__item.is-added .svx-store__btn {color: #fff;background: var(--svp-purple);}

/* dashboard (web apps) */
.svx-dash {display: grid;grid-template-columns: 3em minmax(0, 1fr);}
.svx-dash__side {display: flex;flex-direction: column;align-items: center;gap: 0.5em;padding: 0.9em 0;background: var(--svp-ink);}
.svx-dash__side b {width: 1.5em;height: 1.5em;margin-bottom: 0.6em;background: var(--svp-tang);}
.svx-dash__side i {display: inline-flex;align-items: center;justify-content: center;width: 2em;height: 2em;color: rgba(255, 255, 255, 0.55);}
.svx-dash__side i.is-on {color: #fff;background: var(--svp-purple);}
.svx-dash__side svg {width: 1.05em;height: 1.05em;}
.svx-dash__main {display: flex;flex-direction: column;gap: 0.8em;padding: 1em 1.2em;background: #F8F6FC;}
.svx-dash__top {display: flex;align-items: center;gap: 0.8em;}
.svx-dash__top span {font-size: 0.95em;font-weight: 700;}
.svx-dash__top .svx-line {margin: 0;}
.svx-dash__top em {display: inline-flex;align-items: center;justify-content: center;width: 1.9em;height: 1.9em;margin-left: auto;border-radius: 50%;font-size: 0.75em;font-style: normal;font-weight: 700;color: #fff;background: var(--svp-purple);}
.svx-dash__kpis {display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 0.6em;}
.svx-dash__kpis > div {padding: 0.6em 0.7em;border: 1px solid var(--svp-line);background: #fff;}
.svx-dash__kpis small {display: block;font-size: 0.7em;font-weight: 700;letter-spacing: 0.04em;text-transform: uppercase;color: var(--svp-text);}
.svx-dash__spark {display: flex;align-items: flex-end;gap: 0.2em;height: 1.8em;margin-top: 0.4em;}
.svx-dash__spark i {flex: 1;background: #BB96F5;}
.svx-dash__spark i:nth-child(1) {height: 30%;} .svx-dash__spark i:nth-child(2) {height: 50%;} .svx-dash__spark i:nth-child(3) {height: 40%;}
.svx-dash__spark i:nth-child(4) {height: 70%;} .svx-dash__spark i:nth-child(5) {height: 60%;} .svx-dash__spark i:nth-child(6) {height: 92%;background: var(--svp-purple);}
.svx-dash__spark[style*="--s:1"] i:nth-child(6) {background: var(--svp-tang);}
.svx-dash__chart {display: flex;flex: 1;align-items: flex-end;gap: 0.45em;min-height: 5em;padding: 0.7em;border: 1px solid var(--svp-line);background: #fff;}
.svx-dash__chart i {flex: 1;height: var(--h);background: #D6C5F5;transform-origin: bottom;animation: svx-grow 1s cubic-bezier(0.22, 1, 0.36, 1) both;}
.svx-dash__chart i:nth-child(6), .svx-dash__chart i:nth-child(8) {background: var(--svp-purple);}
.svx-dash__rows {display: flex;flex-direction: column;gap: 0.4em;}
.svx-dash__rows span {display: flex;align-items: center;gap: 0.6em;padding: 0.45em 0.6em;border: 1px solid var(--svp-line);background: #fff;}
.svx-dash__rows span > i:first-child {width: 0.8em;height: 0.8em;border: 1.5px solid var(--svp-purple);}
.svx-dash__rows .svx-line {flex: none;margin: 0;}
.svx-dash__rows em {margin-left: auto;padding: 0.1em 0.45em;font-size: 0.68em;font-style: normal;font-weight: 700;color: #1A7F43;background: #E5F5EB;}
.svx-dash__rows em.is-wip {color: #B4470F;background: #FFEDE4;}

/* event */
.svx-event {display: flex;flex-direction: column;justify-content: space-between;gap: 1.2em;padding: 1.5em;}
.svx-event__ticket {position: relative;display: grid;grid-template-columns: minmax(0, 1fr) auto;align-items: center;gap: 1.2em;padding: 1.4em 1.4em 1.4em 1.5em;color: #fff;background: linear-gradient(140deg, var(--svp-purple) 0%, var(--svp-deep) 100%);}
.svx-event__ticket::before, .svx-event__ticket::after {content: "";position: absolute;right: 6.2em;width: 1.2em;height: 1.2em;border-radius: 50%;background: #fff;}
.svx-event__ticket::before {top: -0.6em;}
.svx-event__ticket::after {bottom: -0.6em;}
.svx-event__ticket small {display: block;font-size: 0.72em;font-weight: 700;letter-spacing: 0.08em;text-transform: uppercase;color: rgba(255, 255, 255, 0.75);}
.svx-event__ticket b {display: block;margin-top: 0.25em;font-size: 1.5em;font-weight: 700;line-height: 1.15;}
.svx-event__ticket .svx-line {background: rgba(255, 255, 255, 0.3);}
.svx-event__live {display: inline-flex;align-items: center;gap: 0.45em;margin-top: 0.8em;padding: 0.25em 0.6em;font-size: 0.75em;font-style: normal;font-weight: 700;letter-spacing: 0.05em;text-transform: uppercase;color: var(--svp-ink);background: #fff;}
.svx-event__qr {display: inline-flex;align-items: center;justify-content: center;width: 4.4em;height: 4.4em;padding-left: 1.2em;border-left: 2px dashed rgba(255, 255, 255, 0.45);color: #fff;box-sizing: content-box;}
.svx-event__qr svg {width: 3.4em;height: 3.4em;}
.svx-event__guests {display: flex;align-items: center;gap: 0.8em;padding: 0.8em 0.9em;border: 1px solid var(--svp-line);background: #F9F7FD;animation: svx-in 0.6s ease 0.4s both;}
.svx-event__faces {display: flex;}
.svx-event__faces i {display: inline-flex;align-items: center;justify-content: center;width: 2em;height: 2em;margin-left: -0.45em;border: 2px solid #fff;border-radius: 50%;font-size: 0.78em;font-style: normal;font-weight: 700;color: #fff;background: var(--svp-purple);}
.svx-event__faces i:first-child {margin-left: 0;}
.svx-event__faces i:nth-child(2) {background: var(--svp-tang);}
.svx-event__faces i:nth-child(3) {background: var(--svp-deep);}
.svx-event__faces i:nth-child(4) {color: var(--svp-purple);background: #D2BAF8;}
.svx-event__faces i:nth-child(5) {background: var(--svp-ink);}
.svx-event__guests b {font-size: 0.9em;font-weight: 600;}
.svx-event__guests em {display: inline-flex;align-items: center;gap: 0.3em;margin-left: auto;padding: 0.2em 0.55em;font-size: 0.72em;font-style: normal;font-weight: 700;color: #1A7F43;background: #E5F5EB;}
.svx-event__guests em svg {width: 1em;height: 1em;stroke-width: 2;}
.svx-event__phases {display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 1.4em;margin: 0;padding: 0;}
.svx-event__phases li {position: relative;display: flex;flex-direction: column;gap: 0.3em;padding: 1em 0.9em;border: 1px solid var(--svp-line);background: #F9F7FD;animation: svx-in 0.6s ease both;}
.svx-event__phases li:nth-child(2) {border-color: var(--svp-purple);animation-delay: 0.15s;}
.svx-event__phases li:nth-child(3) {animation-delay: 0.3s;}
.svx-event__phases li:not(:last-child)::after {content: "";position: absolute;top: 50%;right: -1.3em;width: 1.2em;height: 2px;background: var(--svp-purple);}
.svx-event__phases b {margin-top: 0.4em;font-size: 0.98em;font-weight: 700;}
.svx-event__phases small {font-size: 0.78em;line-height: 1.35;color: var(--svp-text);}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media only screen and (max-width: 1199px) {
.svp-hero__grid {gap: 40px;}
.svp-path {gap: 40px;}
.svp-path__step:not(:last-child)::before {right: -34px;width: 26px;}
.svp-path__step:not(:last-child)::after {right: -34px;}
.svp-tabs__panel {padding: 40px 36px 44px;}
.svp-why__grid {grid-template-columns: 1fr;}
.svp-diffs li {padding-right: 20px;}
.svp-diffs li + li {padding-left: 20px;}
}

@media only screen and (max-width: 991px) {
.svp-sec {padding: 80px 0;}
.svp-hero {padding: 136px 0 70px;}
.svp-hero__grid {grid-template-columns: 1fr;gap: 50px;}
.svx {margin: 0 auto;}
.svp-head {grid-template-columns: 1fr;margin-bottom: 40px;}
.svp-path {grid-template-columns: 1fr;gap: 44px;}
.svp-path__step:not(:last-child)::before {top: auto;right: auto;bottom: -36px;left: 44px;width: 2px;height: 26px;}
.svp-path__step:not(:last-child)::after {top: auto;right: auto;bottom: -36px;left: 40px;margin: 0;transform: rotate(135deg);}
.svp-tabs {grid-template-columns: 1fr;}
.svp-tabs__list {flex-direction: row;overflow-x: auto;border-right: 0;border-bottom: 1px solid var(--svp-line);scrollbar-width: none;}
.svp-tabs__list::-webkit-scrollbar {display: none;}
.service-page .svp-tabs__tab {flex: none;grid-template-columns: auto auto;width: auto;padding: 16px 20px;border-right: 1px solid var(--svp-line);border-bottom: 0;font-size: 16px;white-space: nowrap;}
.service-page .svp-tabs__tab[aria-selected="true"] {box-shadow: inset 0 -3px 0 var(--svp-purple);}
.svp-tabs__tab i {display: none;}
.svp-deliver__split {grid-template-columns: 1fr;}
.svp-compare {grid-template-columns: 1fr;}
.svp-compare__row--typical {border-right: 0;border-bottom: 1px solid var(--svp-line);}
.svp-linear {flex-direction: row;flex-wrap: wrap;gap: 12px 34px;}
.svp-linear li + li {margin-top: 0;}
.svp-linear li + li::before {left: -32px;top: 50%;width: 30px;height: 2px;}
.svp-linear li:last-child::after {display: none;}
.svp-diffs {grid-template-columns: repeat(2, minmax(0, 1fr));margin-top: 50px;}
.svp-diffs li, .svp-diffs li + li {padding: 26px 22px 26px 0;border-left: 0;}
.svp-diffs li:nth-child(even) {padding-left: 22px;border-left: 1px solid var(--svp-line);}
.svp-diffs li:nth-child(n+3) {border-top: 1px solid var(--svp-line);}
.svp-proof__grid {grid-template-columns: 1fr;}
.svp-case {grid-template-columns: 1fr;}
.svp-steps__list {grid-template-columns: repeat(2, minmax(0, 1fr));gap: 40px 30px;}
.svp-close__grid {grid-template-columns: 1fr;}
}

@media only screen and (max-width: 575px) {
.svp-sec {padding: 64px 0;}
.svp-hero {padding: 120px 0 56px;}
.svp-hero__title {font-size: 38px;}
.svp-hero__text {font-size: 17px;}
.svp-hero__for {flex-direction: column;gap: 10px;}
.svp-hero__for > span {padding-top: 0;}
.svp-title {font-size: 30px;}
.svp-path__step {padding: 28px 22px 26px;}
.svp-tabs__panel {padding: 32px 22px 36px;}
.svp-tabs__panel h3 {font-size: 24px;}
.svp-tabs__big {font-size: 130px;bottom: -24px;}
.svp-checks {grid-template-columns: 1fr;}
.svp-stack__item summary {grid-template-columns: 38px minmax(0, 1fr) 26px;gap: 12px;}
.svp-stack__num {display: none;}
.svp-stack__title {font-size: 18px;}
.svp-stack__body {padding: 0 0 24px;}
.svp-compare__row {padding: 24px 20px 22px;}
.svp-loop__node {padding: 5px 8px 5px 5px;font-size: 12.5px;}
.svp-diffs {grid-template-columns: 1fr;}
.svp-diffs li, .svp-diffs li + li, .svp-diffs li:nth-child(even) {padding: 24px 0;border-left: 0;}
.svp-diffs li + li {border-top: 1px solid var(--svp-line);}
.svp-figures > div {padding: 20px 18px;}
.svp-quote {padding: 34px 24px 30px;}
.svp-quote blockquote {font-size: 18px;}
.svp-steps__list {grid-template-columns: 1fr;}
.svp-cta {padding: 38px 24px 34px;}
}

@media (prefers-reduced-motion: reduce) {
.svx *, .svx *::before, .svx *::after, .svp-loop__run {animation: none !important;}
.svx-chart__line {stroke-dashoffset: 0;}
}

/* Lite mode (html.n2b-lite, see lite-mode.js): the hero visuals' endless
   loops (floating chips, pulses, the spinning loop ring) play once and stop;
   their entrance animations are unchanged. */
.n2b-lite .svx *, .n2b-lite .svx *::before, .n2b-lite .svx *::after, .n2b-lite .svp-loop__run {animation-iteration-count: 1 !important;}