
/* =========================================================
   SELLNEX CLEAN PERFORMANCE CSS
   Rebuilt from scratch to remove duplicated legacy rules
========================================================= */

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

:root {
    --bg: #050a0a;
    --surface: #0b1413;
    --surface-2: #101b19;
    --text: #f4f6f5;
    --muted: #98a19e;
    --line: rgba(255,255,255,.08);
    --purple: #7d6dff;
    --green: #42d6a0;
    --amber: #f3b63f;
    --radius-xl: 38px;
    --radius-lg: 28px;
    --radius-md: 20px;
}

html {
    scroll-behavior: smooth;
    background: var(--bg);
}

body {
    margin: 0;
    overflow-x: hidden;
    background: var(--bg);
    color: var(--text);
    font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: inherit;
    text-decoration: none;
}

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

button,
input,
textarea,
select {
    font: inherit;
}

.container {
    width: min(calc(100% - 48px), 1420px);
    margin-inline: auto;
}

/* =========================
   HEADER
========================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #050a0a;
    border-bottom: 1px solid rgba(255,255,255,.05);
}

.header-inner {
    min-height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.brand-mark {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: #fff;
    color: #111;
    font-size: 18px;
    font-weight: 800;
}

.brand-copy {
    display: grid;
}

.brand-copy strong {
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
}

.brand-copy small {
    margin-top: 5px;
    color: var(--muted);
    font-size: 8px;
}

.desktop-nav {
    display: flex;
    align-items: center;
    gap: 36px;
}

.desktop-nav a {
    color: #d4d8d6;
    font-size: 13px;
    font-weight: 600;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-login {
    font-size: 13px;
    color: #d4d8d6;
}

.header-button {
    min-height: 48px;
    padding: 0 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #111;
    font-size: 12px;
    font-weight: 750;
}

.sellnex-menu-toggle,
.sellnex-mobile-menu {
    display: none;
}

/* =========================
   SHARED
========================= */

.sx-home {
    background: var(--bg);
}

.sx-kicker {
    color: #8e9794;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.sx-btn {
    min-height: 56px;
    padding: 0 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    font-size: 13px;
    font-weight: 700;
}

.sx-btn-light {
    background: #fff;
    color: #111;
}

.sx-btn-ghost {
    border: 1px solid var(--line);
    background: rgba(255,255,255,.03);
}

.sx-btn-dark {
    background: #111514;
    color: #fff;
}

.sx-section {
    padding: 110px 0;
}

/* =========================
   HERO
========================= */

.sx-hero {
    position: relative;
    overflow: hidden;
    padding: 108px 0 88px;
    background:
        radial-gradient(circle at 12% 38%, rgba(39,189,134,.14), transparent 34%),
        radial-gradient(circle at 78% 18%, rgba(92,82,255,.18), transparent 32%),
        linear-gradient(135deg, #050a0a 0%, #071110 42%, #08131a 100%);
}

.sx-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 55%, rgba(41,214,154,.08), transparent 30%),
        radial-gradient(circle at 68% 30%, rgba(92,82,255,.10), transparent 28%),
        radial-gradient(circle at 88% 12%, rgba(125,109,255,.08), transparent 22%);
}

.sx-hero > .container {
    position: relative;
    z-index: 1;
}

.sx-hero-copy {
    max-width: 1260px;
}

.sx-hero h1 {
    margin: 28px 0 0;
    font-size: clamp(72px,7vw,120px);
    line-height: .91;
    letter-spacing: -.06em;
    font-weight: 430;
}

.sx-hero h1 span {
    color: #747b79;
}

.sx-hero-copy > p {
    max-width: 780px;
    margin: 34px 0 0;
    color: #9ca4a1;
    font-size: 20px;
    line-height: 1.6;
}

.sx-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 32px;
}

/* =========================
   HERO TOOLS
========================= */

.sx-hero-tools-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 24px;
    margin-top: 84px;
}

.sx-tool-card {
    min-width: 0;
}

.sx-tool-visual {
    min-height: 348px;
    padding: 34px;
    border-radius: 26px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.06);
    background:
        radial-gradient(circle at 80% 10%, rgba(116,91,255,.14), transparent 26%),
        radial-gradient(circle at 15% 20%, rgba(46,201,145,.10), transparent 24%),
        linear-gradient(150deg,#111917,#0d1514);
}

.sx-tool-copy {
    padding: 22px 2px 0;
}

.sx-tool-copy h3 {
    margin: 0;
    font-size: 30px;
    line-height: 1.04;
    letter-spacing: -.04em;
    font-weight: 500;
}

.sx-tool-copy p {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.5;
}

.sx-tool-copy a {
    display: inline-block;
    margin-top: 20px;
    font-size: 14px;
    font-weight: 650;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.sx-glass-panel {
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.08);
}

.sx-glass-orb {
    display: none;
}

.sx-tool-dashboard,
.sx-tool-orders,
.sx-tool-stock {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sx-tool-window,
.sx-order-ticket,
.sx-stock-glass {
    width: min(100%, 390px);
    padding: 20px;
    border-radius: 24px;
    color: #fff;
}

.sx-tool-window-top {
    display: flex;
    gap: 6px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,.10);
}

.sx-tool-window-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,.45);
}

.sx-tool-revenue {
    padding: 28px 6px 24px;
}

.sx-tool-revenue small,
.sx-tool-revenue strong,
.sx-tool-revenue span {
    display: block;
}

.sx-tool-revenue small {
    color: rgba(255,255,255,.55);
    font-size: 9px;
    text-transform: uppercase;
}

.sx-tool-revenue strong {
    margin-top: 8px;
    font-size: 54px;
    line-height: .95;
    letter-spacing: -.055em;
}

.sx-tool-revenue span {
    margin-top: 7px;
    color: #72e8b9;
    font-size: 11px;
}

.sx-tool-mini-row {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 7px;
}

.sx-tool-mini-row > div {
    padding: 12px;
    border-radius: 15px;
    background: rgba(255,255,255,.06);
}

.sx-tool-mini-row small,
.sx-tool-mini-row strong {
    display: block;
}

.sx-tool-mini-row small {
    color: rgba(255,255,255,.50);
    font-size: 8px;
}

.sx-tool-mini-row strong {
    margin-top: 5px;
    font-size: 17px;
}

.sx-order-stack {
    position: relative;
    width: min(100%,340px);
    height: 235px;
}

.sx-order-ticket {
    position: absolute;
    inset: 0;
}

.sx-order-ticket-back {
    transform: translate(18px,18px) rotate(4deg);
    opacity: .28;
}

.sx-order-ticket-badge {
    float: right;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(151,124,255,.22);
    color: #d6cbff;
    font-size: 8px;
}

.sx-order-ticket > small {
    color: rgba(255,255,255,.55);
    font-size: 9px;
    text-transform: uppercase;
}

.sx-order-ticket > strong {
    display: block;
    margin-top: 9px;
    font-size: 30px;
}

.sx-order-ticket p {
    margin: 46px 0 0;
    color: rgba(255,255,255,.80);
    font-size: 12px;
}

.sx-order-ticket-footer {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 18px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.10);
    display: flex;
    justify-content: space-between;
    color: rgba(255,255,255,.52);
    font-size: 9px;
}

.sx-stock-glass-top,
.sx-stock-glass-bottom {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.sx-stock-glass-top small,
.sx-stock-glass-bottom small {
    color: rgba(255,255,255,.52);
    font-size: 9px;
}

.sx-stock-glass-top span {
    padding: 7px 9px;
    border-radius: 999px;
    background: rgba(255,198,72,.14);
    color: #ffd579;
    font-size: 8px;
}

.sx-stock-big-number {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin-top: 30px;
}

.sx-stock-big-number strong {
    font-size: 82px;
    line-height: .78;
    letter-spacing: -.06em;
}

.sx-stock-big-number span {
    padding-bottom: 5px;
    color: rgba(255,255,255,.58);
    font-size: 11px;
}

.sx-stock-glass h4 {
    margin: 28px 0 0;
    font-size: 17px;
}

.sx-stock-glass-meter {
    height: 10px;
    margin-top: 28px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255,255,255,.09);
}

.sx-stock-glass-meter span {
    display: block;
    width: 20%;
    height: 100%;
    background: linear-gradient(90deg,#efb53e,#ffd36a);
}

/* =========================
   INTEGRATIONS
========================= */

.sx-integrations {
    padding: 18px 0 26px;
}

.sx-integration-row {
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.sx-integration-row > span {
    font-size: 14px;
    color: #dfe3e2;
}

.sx-integration-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 9px;
}

.sx-integration-pills span {
    padding: 10px 15px;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: #b8c0bd;
    font-size: 12px;
}

/* =========================
   CONTROL SECTION
========================= */

.sx-control-section {
    padding-top: 88px;
}

.sx-control-heading {
    display: grid;
    grid-template-columns: 1.3fr .7fr;
    gap: 70px;
    align-items: end;
    margin-bottom: 50px;
}

.sx-control-heading h2 {
    max-width: 980px;
    margin: 18px 0 0;
    font-size: clamp(58px,6vw,96px);
    line-height: .95;
    letter-spacing: -.06em;
    font-weight: 450;
}

.sx-control-heading > p {
    margin: 0;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.55;
}

.sx-control-stage {
    position: relative;
    padding: 58px;
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255,255,255,.06);
    background:
        radial-gradient(circle at 84% 8%, rgba(117,83,255,.14), transparent 28%),
        linear-gradient(145deg,#0a1715,#08110f);
}

.sx-control-aura {
    display: none;
}

.sx-control-shell {
    width: min(1080px,86%);
    margin: auto;
    padding: 20px;
    border-radius: 28px;
    color: #fff;
}

.sx-control-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,.09);
}

.sx-window-brand {
    display: flex;
    align-items: center;
    gap: 11px;
}

.sx-window-brand > span {
    width: 40px;
    height: 40px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: #fff;
    color: #111;
    font-weight: 800;
}

.sx-window-brand div {
    display: grid;
}

.sx-window-brand small {
    margin-top: 3px;
    color: rgba(255,255,255,.48);
    font-size: 8px;
}

.sx-control-live {
    padding: 8px 11px;
    border-radius: 999px;
    background: rgba(55,205,151,.09);
    color: #8cebc7;
    font-size: 9px;
}

.sx-control-live i {
    display: none;
}

.sx-control-dashboard {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 14px;
    margin-top: 16px;
}

.sx-control-main {
    min-height: 470px;
    padding: 30px;
    border-radius: 24px;
    background: rgba(5,10,9,.52);
    border: 1px solid rgba(255,255,255,.055);
}

.sx-control-label {
    color: rgba(255,255,255,.48);
    font-size: 9px;
    text-transform: uppercase;
}

.sx-control-number-row {
    margin-top: 12px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.sx-control-number-row strong {
    font-size: 76px;
    line-height: .88;
    letter-spacing: -.06em;
}

.sx-control-number-row span {
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(55,205,151,.09);
    color: #75e8ba;
    font-size: 9px;
}

.sx-control-chart {
    height: 190px;
    margin-top: 46px;
}

.sx-control-chart svg {
    width: 100%;
    height: 100%;
}

.sx-control-line {
    fill: none;
    stroke: url(#sxControlLine);
    stroke-width: 3;
    stroke-linecap: round;
}

.sx-control-fill {
    fill: url(#sxControlFill);
    opacity: 1;
}

.sx-control-metrics {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px;
    margin-top: 12px;
}

.sx-control-metrics > div {
    padding: 14px;
    border-radius: 15px;
    background: rgba(255,255,255,.04);
}

.sx-control-metrics small,
.sx-control-metrics strong {
    display: block;
}

.sx-control-metrics small {
    color: rgba(255,255,255,.45);
    font-size: 8px;
}

.sx-control-metrics strong {
    margin-top: 6px;
    font-size: 17px;
}

.sx-control-side {
    display: grid;
    gap: 10px;
}

.sx-control-side-card {
    min-height: 145px;
    padding: 18px;
    border-radius: 20px;
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 13px;
    align-items: center;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.06);
}

.sx-control-side-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
}

.sx-control-side-icon-purple { background: rgba(125,94,255,.14); color: #c6baff; }
.sx-control-side-icon-amber { background: rgba(245,184,61,.13); color: #ffd477; }
.sx-control-side-icon-green { background: rgba(48,210,151,.12); color: #7ae7bb; }

.sx-control-side-card small,
.sx-control-side-card strong,
.sx-control-side-card span {
    display: block;
}

.sx-control-side-card small {
    color: rgba(255,255,255,.45);
    font-size: 8px;
}

.sx-control-side-card strong {
    margin-top: 5px;
    font-size: 20px;
}

.sx-control-side-card span {
    margin-top: 5px;
    color: rgba(255,255,255,.52);
    font-size: 9px;
}

.sx-control-float {
    display: none;
}

/* =========================
   BUILD SECTION
========================= */

.sx-build-section {
    padding-top: 12px;
}

.sx-build-stage {
    padding: 58px 58px 38px;
    border-radius: 40px;
    border: 1px solid rgba(255,255,255,.055);
    background:
        radial-gradient(circle at 86% 8%, rgba(78,94,255,.08), transparent 26%),
        linear-gradient(180deg,#081111,#06100e);
}

.sx-build-aura,
.sx-process-aura {
    display: none;
}

.sx-build-header {
    margin-bottom: 42px;
    text-align: center;
}

.sx-build-header h2 {
    max-width: 940px;
    margin: auto;
    font-size: clamp(54px,6vw,90px);
    line-height: .96;
    letter-spacing: -.055em;
    font-weight: 430;
}

.sx-build-main {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 44px;
    align-items: center;
}

.sx-build-copy h3 {
    margin: 0;
    font-size: clamp(36px,3vw,52px);
    line-height: 1.02;
    letter-spacing: -.045em;
    font-weight: 430;
}

.sx-build-copy > p {
    margin: 22px 0 0;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.6;
}

.sx-build-stats {
    display: grid;
    gap: 12px;
    margin-top: 30px;
}

.sx-build-stat {
    padding: 18px 20px;
    border-radius: 20px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.055);
}

.sx-build-stat small,
.sx-build-stat strong,
.sx-build-stat span {
    display: block;
}

.sx-build-stat small {
    color: #8f9a96;
    font-size: 10px;
}

.sx-build-stat strong {
    margin-top: 8px;
    font-size: 22px;
}

.sx-build-stat span {
    margin-top: 6px;
    color: #8f9a96;
    font-size: 14px;
}

.sx-build-visual {
    position: relative;
    min-height: 540px;
}

.sx-build-product,
.sx-build-float {
    display: none;
}

.sx-build-checkout {
    position: absolute;
    right: 14px;
    bottom: 28px;
    width: min(540px,100%);
    padding: 22px;
    border-radius: 30px;
}

.sx-build-checkout-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
}

.sx-build-checkout-brand,
.sx-build-checkout-status {
    padding: 9px 14px;
    border-radius: 999px;
    font-size: 12px;
}

.sx-build-checkout-brand {
    background: rgba(16,24,27,.52);
}

.sx-build-checkout-status {
    background: rgba(67,214,160,.10);
    color: #8be9c7;
}

.sx-build-checkout-body {
    margin-top: 20px;
    padding: 18px;
    border-radius: 22px;
    background: #f5f6f4;
    color: #111617;
}

.sx-build-payments {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.sx-build-payments span {
    padding: 8px 11px;
    border-radius: 999px;
    background: #e9edeb;
    font-size: 12px;
}

.sx-build-orderline,
.sx-build-total {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 0;
    border-top: 1px solid rgba(17,22,23,.09);
}

.sx-build-orderline strong,
.sx-build-orderline small {
    display: block;
}

.sx-build-orderline small {
    margin-top: 4px;
    color: #66716d;
    font-size: 13px;
}

.sx-build-metrics {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 14px;
    margin-top: 28px;
}

.sx-build-metric {
    padding: 20px 22px;
    border-radius: 22px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.05);
}

.sx-build-metric small,
.sx-build-metric strong {
    display: block;
}

.sx-build-metric small {
    color: #87908d;
    font-size: 11px;
}

.sx-build-metric strong {
    margin-top: 12px;
    font-size: 22px;
}

/* =========================
   WORKFLOW
========================= */

.sx-process-board {
    margin-top: 34px;
    padding: 30px;
    border-radius: 30px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.055);
}

.sx-process-intro {
    margin-bottom: 24px;
}

.sx-process-intro h3 {
    margin: 10px 0 0;
    font-size: clamp(34px,3vw,52px);
    line-height: 1.04;
    letter-spacing: -.045em;
    font-weight: 430;
}

.sx-process-intro p {
    max-width: 620px;
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.55;
}

.sx-process-flow {
    display: grid;
    grid-template-columns: 1fr 40px 1fr 40px 1fr 40px 1fr;
    gap: 12px;
    align-items: center;
}

.sx-process-step {
    min-height: 225px;
    padding: 25px;
    border-radius: 28px;
    background: rgba(255,255,255,.07);
    color: #fff;
    border: 1px solid rgba(255,255,255,.09);
}

.sx-process-step.is-featured {
    background:
        radial-gradient(circle at 84% 4%, rgba(126,109,255,.16), transparent 36%),
        rgba(255,255,255,.08);
    border-color: rgba(126,109,255,.22);
}

.sx-process-number {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    background: rgba(255,255,255,.06);
    color: #aab3af;
    font-size: 15px;
}

.sx-process-step.is-featured .sx-process-number {
    background: linear-gradient(135deg,#7264ff,#988bff);
    color: #fff;
}

.sx-process-step strong,
.sx-process-step small,
.sx-process-step em {
    display: block;
}

.sx-process-step strong {
    margin-top: 34px;
    font-size: 36px;
    line-height: 1.04;
    letter-spacing: -.04em;
}

.sx-process-step small {
    margin-top: 8px;
    color: #9da6a2;
    font-size: 15px;
}

.sx-process-step em {
    margin-top: 22px;
    padding: 11px 13px;
    border-radius: 14px;
    background: rgba(255,255,255,.04);
    color: #c0c7c4;
    font-size: 12px;
    font-style: normal;
}

.sx-process-line {
    height: 1px;
    background: rgba(255,255,255,.14);
}

.sx-process-line i {
    display: none;
}

/* =========================
   PURPLE
========================= */

.sx-purple-section {
    padding: 100px 0;
    background:
        radial-gradient(circle at 16% 85%, rgba(168,134,255,.30), transparent 34%),
        linear-gradient(145deg,#2d0b94,#4515c4 52%,#260977);
}

.sx-purple-grid {
    display: grid;
    grid-template-columns: 1fr .7fr;
    gap: 70px;
    align-items: center;
}

.sx-purple-copy h2 {
    margin: 22px 0 0;
    font-size: clamp(60px,7vw,105px);
    line-height: .92;
    letter-spacing: -.06em;
    font-weight: 480;
}

.sx-purple-copy p {
    margin: 28px 0 0;
    color: rgba(255,255,255,.70);
    font-size: 19px;
    line-height: 1.55;
}

.sx-purple-copy .sx-btn {
    margin-top: 28px;
}

.sx-phone {
    width: min(100%,390px);
    margin-inline: auto;
    padding: 22px;
    border-radius: 34px;
    background: #f4f3f1;
    color: #111514;
}

.sx-phone-top {
    display: flex;
    gap: 10px;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(17,21,20,.08);
}

.sx-phone-top > span {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: #111514;
    color: #fff;
}

.sx-phone-top div {
    display: grid;
}

.sx-phone-top small {
    color: #7d8481;
    font-size: 8px;
}

.sx-message {
    margin-top: 14px;
    padding: 18px;
    border-radius: 20px;
    background: #e9e4ff;
}

.sx-message-warning {
    background: #fff0bd;
}

.sx-message small,
.sx-message strong,
.sx-message span {
    display: block;
}

.sx-message p {
    margin: 6px 0 0;
    color: #646b68;
    font-size: 11px;
}

/* =========================
   STATS
========================= */

.sx-section-heading {
    margin-bottom: 46px;
}

.sx-heading-split {
    display: grid;
    grid-template-columns: 1.3fr .7fr;
    gap: 70px;
    align-items: end;
}

.sx-section-heading h2 {
    margin: 0;
    font-size: clamp(56px,6vw,92px);
    line-height: .98;
    letter-spacing: -.055em;
    font-weight: 450;
}

.sx-section-heading p {
    margin: 0;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.55;
}

.sx-number-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.sx-number-grid > div {
    min-height: 210px;
    padding: 32px 24px;
    border-right: 1px solid var(--line);
}

.sx-number-grid > div:last-child {
    border-right: 0;
}

.sx-number-grid small,
.sx-number-grid strong {
    display: block;
}

.sx-number-grid small {
    color: var(--muted);
    font-size: 11px;
}

.sx-number-grid strong {
    margin-top: 58px;
    font-size: clamp(48px,5vw,70px);
    letter-spacing: -.05em;
    font-weight: 450;
}

/* =========================
   AI
========================= */

.sx-ai-section {
    padding: 30px 0 105px;
}

.sx-ai-card {
    padding: 64px;
    border-radius: var(--radius-xl);
    background:
        radial-gradient(circle at 12% 90%, rgba(155,121,255,.48), transparent 35%),
        linear-gradient(145deg,#240772,#38109d 55%,#201064);
}

.sx-ai-card > h2 {
    margin: 22px 0 0;
    font-size: clamp(58px,6.3vw,98px);
    line-height: .94;
    letter-spacing: -.055em;
    font-weight: 480;
}

.sx-ai-card > p {
    max-width: 680px;
    margin: 26px 0 0;
    color: rgba(255,255,255,.70);
    font-size: 18px;
    line-height: 1.55;
}

.sx-ai-grid {
    display: grid;
    grid-template-columns: 1.3fr .7fr;
    gap: 16px;
    margin-top: 56px;
}

.sx-ai-demo,
.sx-ai-stats {
    min-height: 280px;
    padding: 24px;
    border-radius: 26px;
    background: rgba(6,8,8,.46);
    border: 1px solid rgba(255,255,255,.08);
}

.sx-ai-query {
    padding: 18px;
    border-radius: 16px;
    background: #f2f1ef;
    color: #111514;
    font-size: 13px;
}

.sx-ai-answer {
    margin-top: 14px;
    padding: 22px;
    border-radius: 18px;
    background: rgba(255,255,255,.08);
}

.sx-ai-answer strong,
.sx-ai-answer span {
    display: block;
}

.sx-ai-answer span {
    margin-top: 10px;
    color: rgba(255,255,255,.66);
    font-size: 12px;
}

.sx-ai-stats {
    display: grid;
    gap: 10px;
}

.sx-ai-stats > div {
    padding: 18px;
    border-radius: 18px;
    background: rgba(255,255,255,.07);
}

.sx-ai-stats small,
.sx-ai-stats strong {
    display: block;
}

.sx-ai-stats small {
    color: rgba(255,255,255,.58);
    font-size: 10px;
}

.sx-ai-stats strong {
    margin-top: 7px;
    font-size: 30px;
}

/* =========================
   FINAL
========================= */

.sx-final {
    padding: 0 0 100px;
}

.sx-final-card {
    min-height: 440px;
    padding: 56px;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    background: #f3f4f1;
    color: #111514;
}

.sx-final-card h2 {
    margin: 18px 0 0;
    font-size: clamp(58px,6vw,98px);
    line-height: .93;
    letter-spacing: -.055em;
    font-weight: 470;
}

.sx-final-card p {
    margin: 24px 0 0;
    color: #727976;
    font-size: 17px;
}

/* =========================
   FOOTER
========================= */

.site-footer {
    padding: 70px 0 34px;
    background: #07100f;
    border-top: 1px solid rgba(255,255,255,.05);
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1100px) {
    .sx-hero-tools-grid,
    .sx-build-main,
    .sx-purple-grid,
    .sx-control-heading,
    .sx-heading-split,
    .sx-ai-grid {
        grid-template-columns: 1fr;
    }

    .sx-control-shell {
        width: 100%;
    }

    .sx-control-dashboard {
        grid-template-columns: 1fr;
    }

    .sx-control-side {
        grid-template-columns: repeat(3,1fr);
    }

    .sx-build-visual {
        min-height: 500px;
    }

    .sx-build-checkout {
        position: relative;
        right: auto;
        bottom: auto;
        margin: 100px auto 0;
    }

    .sx-build-metrics {
        grid-template-columns: 1fr;
    }

    .sx-process-flow {
        grid-template-columns: repeat(2,1fr);
    }

    .sx-process-line {
        display: none;
    }

    .sx-number-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media (max-width: 900px) {
    .desktop-nav,
    .header-login {
        display: none;
    }

    .sellnex-menu-toggle {
        display: flex;
        width: 42px;
        height: 42px;
        padding: 0;
        border: 1px solid var(--line);
        border-radius: 50%;
        background: rgba(255,255,255,.04);
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 5px;
    }

    .sellnex-menu-toggle span {
        width: 16px;
        height: 2px;
        background: #fff;
    }

    .sellnex-mobile-menu {
        position: fixed;
        inset: 82px 0 0;
        z-index: 999;
        padding: 18px;
        background: #050a0a;
    }

    .sellnex-mobile-menu.open {
        display: block;
    }

    .sellnex-mobile-nav {
        display: grid;
        gap: 8px;
    }

    .sellnex-mobile-nav a {
        padding: 16px;
        border: 1px solid var(--line);
        border-radius: 18px;
        background: var(--surface);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .sellnex-mobile-nav-copy {
        display: grid;
        gap: 4px;
    }

    .sellnex-mobile-nav-title {
        font-weight: 700;
    }

    .sellnex-mobile-nav-description {
        color: var(--muted);
        font-size: 10px;
    }

    .sellnex-mobile-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 16px;
    }
}

@media (max-width: 720px) {
    .container {
        width: calc(100% - 28px);
    }

    .header-inner {
        min-height: 70px;
    }

    .header-button {
        min-height: 40px;
        padding: 0 14px;
    }

    .sx-section {
        padding: 74px 0;
    }

    .sx-hero {
        padding: 56px 0 62px;
    }

    .sx-hero h1 {
        font-size: clamp(50px,14vw,70px);
    }

    .sx-hero-copy > p {
        font-size: 16px;
    }

    .sx-hero-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .sx-btn {
        width: 100%;
        justify-content: space-between;
    }

    .sx-hero-tools-grid {
        margin-top: 54px;
        gap: 36px;
    }

    .sx-tool-visual {
        min-height: 320px;
        padding: 20px;
    }

    .sx-control-stage,
    .sx-build-stage,
    .sx-ai-card,
    .sx-final-card {
        padding: 18px;
        border-radius: 28px;
    }

    .sx-control-heading h2,
    .sx-build-header h2,
    .sx-purple-copy h2,
    .sx-section-heading h2,
    .sx-ai-card > h2,
    .sx-final-card h2 {
        font-size: clamp(45px,12vw,62px);
    }

    .sx-control-side {
        grid-template-columns: 1fr;
    }

    .sx-control-main {
        min-height: 380px;
        padding: 20px;
    }

    .sx-control-number-row strong {
        font-size: 54px;
    }

    .sx-control-chart {
        height: 140px;
    }

    .sx-control-metrics {
        grid-template-columns: 1fr;
    }

    .sx-build-checkout {
        margin-top: 30px;
    }

    .sx-process-flow {
        grid-template-columns: 1fr;
    }

    .sx-process-step {
        min-height: 0;
    }

    .sx-process-step strong {
        margin-top: 22px;
        font-size: 32px;
    }

    .sx-purple-section {
        padding: 80px 0;
    }

    .sx-number-grid {
        grid-template-columns: 1fr;
    }

    .sx-number-grid > div {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .sx-final-card {
        min-height: 380px;
        align-items: flex-start;
        flex-direction: column;
        justify-content: space-between;
    }
}


/* =========================================================
   HERO GRID LINES — V15
   Subtle "streepjes" back, without scroll lag
========================================================= */

.sx-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .34;
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.026) 1px,
            transparent 1px
        ),
        linear-gradient(
            180deg,
            rgba(255,255,255,.022) 1px,
            transparent 1px
        );
    background-size: 72px 72px;
    -webkit-mask-image: linear-gradient(
        to bottom,
        rgba(0,0,0,.88) 0%,
        rgba(0,0,0,.48) 58%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        rgba(0,0,0,.88) 0%,
        rgba(0,0,0,.48) 58%,
        transparent 100%
    );
}

.sx-hero > .container {
    position: relative;
    z-index: 2;
}

/* a few wider horizontal accents so the grid doesn't feel too technical */
.sx-hero-copy::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: min(980px, 82vw);
    height: 1px;
    pointer-events: none;
    z-index: -1;
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0),
            rgba(255,255,255,.035) 25%,
            rgba(111,93,255,.055) 62%,
            rgba(255,255,255,0)
        );
    transform: translateY(115px);
}

@media (max-width: 720px) {
    .sx-hero::after {
        opacity: .22;
        background-size: 52px 52px;
    }

    .sx-hero-copy::after {
        display: none;
    }
}


/* =========================================================
   V16 — SHOPIFY-STYLE BLACK OVERLAP
   ONLY the black integrations/control transition is changed.
   No purple section changes.
========================================================= */

.sx-integrations {
    position: relative;
    z-index: 5;

    /* Pull the black section upward ON TOP of the green section */
    margin-top: -48px;

    /* Internal spacing, not external gap */
    padding: 48px 0 26px;

    /* Shopify-style rounded top edge */
    border-radius: 48px 48px 0 0;

    /* Same black as the following section */
    background: #050a0a;

    /* No border / no boxed-card look */
    border: 0;
    box-shadow: none;
}

/* Make the next section continue seamlessly in the same black */
.sx-control-section {
    background: #050a0a;
}

@media (max-width: 900px) {
    .sx-integrations {
        margin-top: -36px;
        padding-top: 36px;
        border-radius: 36px 36px 0 0;
    }
}

@media (max-width: 640px) {
    .sx-integrations {
        margin-top: -26px;
        padding-top: 28px;
        border-radius: 28px 28px 0 0;
    }
}


/* =========================================================
   V16D — LESS SPACE ABOVE BLACK OVERLAP
   Only reduces the gap after "Bekijk dashboard / Open orders / Bekijk voorraad".
========================================================= */

.sx-hero {
    padding-bottom: 82px;
}

@media (max-width: 640px) {
    .sx-hero {
        padding-bottom: 54px;
    }
}


/* =========================================================
   V16F — LIQUID / GLOSS HEADER
   Only the header appearance is changed.
========================================================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;

    background:
        linear-gradient(
            180deg,
            rgba(8,14,14,.88) 0%,
            rgba(5,10,10,.93) 58%,
            rgba(4,8,8,.97) 100%
        );

    border-bottom: 1px solid rgba(255,255,255,.07);

    box-shadow:
        0 10px 30px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.055);

    backdrop-filter: blur(14px) saturate(135%);
    -webkit-backdrop-filter: blur(14px) saturate(135%);
}

/* subtle liquid sheen */
.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;

    background:
        radial-gradient(circle at 14% 0%, rgba(79,214,162,.09), transparent 25%),
        radial-gradient(circle at 78% -10%, rgba(116,91,255,.11), transparent 28%),
        linear-gradient(
            110deg,
            transparent 0%,
            rgba(255,255,255,.025) 30%,
            rgba(255,255,255,.055) 44%,
            transparent 58%
        );
}

/* thin gloss line along the top */
.site-header::after {
    content: "";
    position: absolute;
    left: 22px;
    right: 22px;
    top: 0;
    height: 1px;
    pointer-events: none;
    z-index: 1;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.10) 20%,
            rgba(255,255,255,.18) 50%,
            rgba(255,255,255,.10) 80%,
            transparent
        );
}

.site-header .header-inner {
    position: relative;
    z-index: 2;
}

/* slightly more polished logo block */
.brand-mark {
    box-shadow:
        0 8px 20px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.72);
}

/* glossy app button */
.header-button {
    background:
        linear-gradient(180deg, #ffffff 0%, #f4f5f3 100%);

    box-shadow:
        0 10px 24px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.95);
}

/* refined nav hover */
.desktop-nav a,
.header-login {
    transition:
        color .2s ease,
        opacity .2s ease;
}

.desktop-nav a:hover,
.header-login:hover {
    color: #ffffff;
}

/* keep the blur lighter on small screens */
@media (max-width: 900px) {
    .site-header {
        backdrop-filter: blur(10px) saturate(125%);
        -webkit-backdrop-filter: blur(10px) saturate(125%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .desktop-nav a,
    .header-login {
        transition: none;
    }
}


/* =========================================================
   V16G — MODERN FINAL CTA
   Replaces only the old white final CTA visually.
========================================================= */

.sellnex-final-cta {
    position: relative;
    padding: 44px 0 96px;
    background: #050a0a;
}

.sellnex-final-cta-shell {
    position: relative;
    overflow: hidden;
    padding: 64px;
    border-radius: 38px;

    background:
        radial-gradient(circle at 8% 8%, rgba(53, 205, 151, .10), transparent 28%),
        radial-gradient(circle at 92% 92%, rgba(112, 91, 255, .18), transparent 34%),
        linear-gradient(
            140deg,
            rgba(10, 16, 16, .99) 0%,
            rgba(7, 12, 14, .99) 54%,
            rgba(10, 10, 20, .99) 100%
        );

    border: 1px solid rgba(255,255,255,.075);

    box-shadow:
        0 30px 90px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.035);
}

.sellnex-final-cta-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.026) 1px,
            transparent 1px
        ),
        linear-gradient(
            180deg,
            rgba(255,255,255,.022) 1px,
            transparent 1px
        );

    background-size: 68px 68px;
    opacity: .20;

    -webkit-mask-image:
        linear-gradient(to bottom, rgba(0,0,0,.72), rgba(0,0,0,.18));
    mask-image:
        linear-gradient(to bottom, rgba(0,0,0,.72), rgba(0,0,0,.18));
}

.sellnex-final-cta-glow {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(38px);
    opacity: .75;
}

.sellnex-final-cta-glow-left {
    width: 320px;
    height: 320px;
    left: -100px;
    top: -90px;
    background:
        radial-gradient(circle, rgba(53,205,151,.22), transparent 68%);
}

.sellnex-final-cta-glow-right {
    width: 420px;
    height: 420px;
    right: -150px;
    bottom: -160px;
    background:
        radial-gradient(circle, rgba(112,91,255,.30), transparent 70%);
}

.sellnex-final-cta-grid {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(340px, 470px);

    gap: 56px;
    align-items: center;
}

.sellnex-final-cta-copy {
    max-width: 860px;
}

.sellnex-final-cta-eyebrow {
    display: inline-block;
    margin-bottom: 20px;

    color: #909a96;

    font-size: 11px;
    font-weight: 750;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.sellnex-final-cta-copy h2 {
    max-width: 900px;
    margin: 0;

    color: #f6f7f6;

    font-size: clamp(56px, 6.2vw, 96px);
    line-height: .94;
    letter-spacing: -.055em;
    font-weight: 450;
}

.sellnex-final-cta-copy p {
    max-width: 730px;
    margin: 26px 0 0;

    color: #9ba4a1;

    font-size: 18px;
    line-height: 1.62;
}

.sellnex-final-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 34px;
}

.sellnex-final-cta-button {
    min-height: 58px;
    padding: 0 22px;

    border-radius: 999px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;

    font-size: 13px;
    font-weight: 700;

    transition:
        transform .2s ease,
        background .2s ease,
        border-color .2s ease;
}

.sellnex-final-cta-button:hover {
    transform: translateY(-2px);
}

.sellnex-final-cta-button-primary {
    background:
        linear-gradient(180deg, #ffffff, #f3f4f2);
    color: #0f1413;

    box-shadow:
        0 12px 30px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.95);
}

.sellnex-final-cta-button-secondary {
    color: #f2f4f3;

    background: rgba(255,255,255,.045);

    border: 1px solid rgba(255,255,255,.105);
}

.sellnex-final-cta-button-secondary:hover {
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.16);
}

.sellnex-final-cta-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;

    margin-top: 28px;
}

.sellnex-final-cta-meta span {
    min-height: 38px;
    padding: 0 14px;

    border-radius: 999px;

    display: inline-flex;
    align-items: center;

    background: rgba(255,255,255,.035);

    border: 1px solid rgba(255,255,255,.065);

    color: #a8b0ad;

    font-size: 11px;
    font-weight: 600;
}

.sellnex-final-cta-side {
    display: flex;
    justify-content: flex-end;
}

.sellnex-final-cta-card {
    position: relative;
    width: 100%;
    max-width: 470px;

    padding: 25px;

    border-radius: 29px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.105),
            rgba(255,255,255,.045)
        );

    border: 1px solid rgba(255,255,255,.12);

    box-shadow:
        0 26px 70px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.12);

    backdrop-filter: blur(12px) saturate(125%);
    -webkit-backdrop-filter: blur(12px) saturate(125%);
}

.sellnex-final-cta-card::after {
    content: "";
    position: absolute;
    inset: 0;

    pointer-events: none;

    border-radius: inherit;

    background:
        linear-gradient(
            125deg,
            rgba(255,255,255,.07),
            transparent 28%,
            transparent 72%,
            rgba(116,91,255,.05)
        );
}

.sellnex-final-cta-card-top {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    padding-bottom: 20px;

    border-bottom: 1px solid rgba(255,255,255,.08);
}

.sellnex-final-cta-card-brand {
    display: flex;
    align-items: center;
    gap: 13px;
}

.sellnex-final-cta-card-icon {
    width: 50px;
    height: 50px;

    border-radius: 15px;

    display: grid;
    place-items: center;

    background:
        linear-gradient(145deg, #101515, #080c0c);

    border: 1px solid rgba(255,255,255,.08);

    color: #ffffff;

    font-size: 18px;
    font-weight: 800;
}

.sellnex-final-cta-card-brand strong,
.sellnex-final-cta-card-brand small {
    display: block;
}

.sellnex-final-cta-card-brand strong {
    color: #ffffff;

    font-size: 17px;
    line-height: 1;
}

.sellnex-final-cta-card-brand small {
    margin-top: 5px;

    color: rgba(255,255,255,.48);

    font-size: 9px;
}

.sellnex-final-cta-card-badge {
    min-height: 34px;
    padding: 0 12px;

    border-radius: 999px;

    display: inline-flex;
    align-items: center;

    background: rgba(120,101,255,.13);

    border: 1px solid rgba(154,137,255,.14);

    color: #c9c0ff;

    font-size: 9px;
    font-weight: 700;
}

.sellnex-final-cta-stats {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;

    margin-top: 18px;
}

.sellnex-final-cta-stat {
    min-height: 116px;

    padding: 17px;

    border-radius: 19px;

    background: rgba(255,255,255,.045);

    border: 1px solid rgba(255,255,255,.055);
}

.sellnex-final-cta-stat:first-child {
    grid-column: 1 / -1;

    background:
        radial-gradient(circle at 90% 5%, rgba(119,93,255,.10), transparent 32%),
        rgba(255,255,255,.05);
}

.sellnex-final-cta-stat small,
.sellnex-final-cta-stat strong {
    display: block;
}

.sellnex-final-cta-stat small {
    color: rgba(255,255,255,.48);

    font-size: 9px;
}

.sellnex-final-cta-stat strong {
    margin-top: 15px;

    color: #ffffff;

    font-size: 33px;
    line-height: 1;
    letter-spacing: -.045em;
}

.sellnex-final-cta-note {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    gap: 10px;

    margin-top: 16px;

    padding: 13px 14px;

    border-radius: 15px;

    background: rgba(255,255,255,.035);

    color: #aab2af;

    font-size: 10px;
    line-height: 1.45;
}

.sellnex-final-cta-dot {
    width: 8px;
    height: 8px;

    flex: 0 0 8px;

    border-radius: 50%;

    background: #46d5a0;

    box-shadow: 0 0 14px rgba(70,213,160,.42);
}

@media (max-width: 1100px) {
    .sellnex-final-cta-shell {
        padding: 48px 42px;
    }

    .sellnex-final-cta-grid {
        grid-template-columns: 1fr;
    }

    .sellnex-final-cta-side {
        justify-content: flex-start;
    }

    .sellnex-final-cta-card {
        max-width: 620px;
    }
}

@media (max-width: 720px) {
    .sellnex-final-cta {
        padding: 30px 0 68px;
    }

    .sellnex-final-cta-shell {
        padding: 32px 20px;

        border-radius: 28px;
    }

    .sellnex-final-cta-grid {
        gap: 40px;
    }

    .sellnex-final-cta-copy h2 {
        font-size: clamp(46px, 12vw, 62px);
    }

    .sellnex-final-cta-copy p {
        font-size: 15px;
    }

    .sellnex-final-cta-actions {
        display: grid;
    }

    .sellnex-final-cta-button {
        width: 100%;
        justify-content: space-between;
    }

    .sellnex-final-cta-stats {
        grid-template-columns: 1fr;
    }

    .sellnex-final-cta-stat:first-child {
        grid-column: auto;
    }

    .sellnex-final-cta-meta {
        gap: 7px;
    }
}


/* =========================================================
   V16H — PERFORMANCE MOTION / FINAL TOUCH
   Motion is limited to transform + opacity where possible.
   No large continuous blur animations.
========================================================= */

/* ---------- reveal system ---------- */

.sx-motion-ready .sx-reveal {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition:
        opacity .72s cubic-bezier(.2,.7,.2,1),
        transform .72s cubic-bezier(.2,.7,.2,1);
    transition-delay: var(--sx-delay, 0ms);
}

.sx-motion-ready .sx-reveal.sx-in-view {
    opacity: 1;
    transform: translate3d(0,0,0);
}

/* slightly softer reveal for large blocks */
.sx-motion-ready .sx-reveal-soft {
    opacity: 0;
    transform: translate3d(0, 12px, 0) scale(.992);
    transition:
        opacity .82s cubic-bezier(.2,.7,.2,1),
        transform .82s cubic-bezier(.2,.7,.2,1);
    transition-delay: var(--sx-delay, 0ms);
}

.sx-motion-ready .sx-reveal-soft.sx-in-view {
    opacity: 1;
    transform: translate3d(0,0,0) scale(1);
}

/* ---------- hover polish ---------- */

@media (hover:hover) and (pointer:fine) {

    .sx-tool-card .sx-tool-visual,
    .sx-build-stat,
    .sx-process-step,
    .sx-control-side-card,
    .sellnex-final-cta-card,
    .sellnex-final-cta-stat {
        transition:
            transform .28s cubic-bezier(.2,.7,.2,1),
            border-color .28s ease,
            background-color .28s ease,
            box-shadow .28s ease;
    }

    .sx-tool-card:hover .sx-tool-visual {
        transform: translate3d(0,-6px,0);
        border-color: rgba(255,255,255,.11);
    }

    .sx-build-stat:hover,
    .sx-control-side-card:hover,
    .sellnex-final-cta-stat:hover {
        transform: translate3d(0,-4px,0);
        border-color: rgba(255,255,255,.11);
    }

    .sx-process-step:hover {
        transform: translate3d(0,-5px,0);
        border-color: rgba(255,255,255,.14);
    }

    .sx-process-step.is-featured:hover {
        transform: translate3d(0,-7px,0);
    }

    .sellnex-final-cta-card:hover {
        transform: translate3d(0,-6px,0);
        border-color: rgba(255,255,255,.16);
        box-shadow:
            0 32px 78px rgba(0,0,0,.28),
            inset 0 1px 0 rgba(255,255,255,.14);
    }

    .sx-btn span:last-child,
    .sellnex-final-cta-button span:last-child {
        transition: transform .2s ease;
    }

    .sx-btn:hover span:last-child,
    .sellnex-final-cta-button:hover span:last-child {
        transform: translate3d(4px,0,0);
    }

    .sx-integration-pills span {
        transition:
            transform .2s ease,
            background .2s ease,
            border-color .2s ease,
            color .2s ease;
    }

    .sx-integration-pills span:hover {
        transform: translate3d(0,-2px,0);
        background: rgba(255,255,255,.05);
        border-color: rgba(255,255,255,.13);
        color: #f2f4f3;
    }
}

/* ---------- dashboard graph draw ---------- */

.sx-motion-ready .sx-control-line {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
}

.sx-motion-ready .sx-control-chart.sx-chart-live .sx-control-line {
    animation: sxGraphDraw 1.55s cubic-bezier(.2,.75,.25,1) forwards;
}

.sx-motion-ready .sx-control-fill {
    opacity: 0;
}

.sx-motion-ready .sx-control-chart.sx-chart-live .sx-control-fill {
    animation: sxGraphFill .8s ease .72s forwards;
}

@keyframes sxGraphDraw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes sxGraphFill {
    to {
        opacity: 1;
    }
}

/* ---------- stock / progress bars ---------- */

.sx-motion-ready .sx-stock-glass-meter span,
.sx-motion-ready .sx-control-stage .sx-stock-glass-meter span {
    transform-origin: left center;
    transform: scaleX(0);
}

.sx-motion-ready .sx-stock-glass-meter.sx-meter-live span,
.sx-motion-ready .sx-control-stage .sx-stock-glass-meter.sx-meter-live span {
    animation: sxMeterGrow .85s cubic-bezier(.2,.75,.25,1) forwards;
}

@keyframes sxMeterGrow {
    to {
        transform: scaleX(1);
    }
}

/* ---------- CTA micro motion ---------- */

.sellnex-final-cta-dot {
    animation: sxDotPulse 2.8s ease-in-out infinite;
}

@keyframes sxDotPulse {
    0%,100% {
        opacity: .72;
        box-shadow: 0 0 10px rgba(70,213,160,.28);
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 17px rgba(70,213,160,.52);
    }
}

/* ---------- header interaction ---------- */

@media (hover:hover) and (pointer:fine) {
    .brand,
    .header-button {
        transition: transform .2s ease;
    }

    .brand:hover {
        transform: translate3d(0,-1px,0);
    }

    .header-button:hover {
        transform: translate3d(0,-2px,0);
    }
}

/* ---------- performance safeguards ---------- */

.sx-reveal,
.sx-reveal-soft,
.sx-tool-card .sx-tool-visual,
.sx-build-stat,
.sx-process-step,
.sx-control-side-card,
.sellnex-final-cta-card,
.sellnex-final-cta-stat {
    backface-visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .sx-motion-ready .sx-reveal,
    .sx-motion-ready .sx-reveal-soft {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .sx-motion-ready .sx-control-line {
        stroke-dasharray: none !important;
        stroke-dashoffset: 0 !important;
        animation: none !important;
    }

    .sx-motion-ready .sx-control-fill {
        opacity: 1 !important;
        animation: none !important;
    }

    .sx-motion-ready .sx-stock-glass-meter span {
        transform: none !important;
        animation: none !important;
    }

    .sellnex-final-cta-dot {
        animation: none !important;
    }
}


/* =========================================================
   V16I — THREE FINAL HOMEPAGE ADDITIONS
   1. Live activity
   2. Order-to-delivery journey
   3. Platform status row
========================================================= */

/* =========================
   LIVE ACTIVITY STRIP
========================= */

.sx-live-activity {
    padding: 22px 0 42px;
    background: #050a0a;
}

.sx-live-activity-shell {
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,.065);
    background:
        radial-gradient(circle at 8% 20%, rgba(53,205,151,.055), transparent 25%),
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.018));
}

.sx-live-activity-head {
    min-height: 66px;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid rgba(255,255,255,.055);
}

.sx-live-activity-live {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #e8ecea;
    font-size: 12px;
    font-weight: 700;
}

.sx-live-activity-live i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #46d5a0;
    box-shadow: 0 0 12px rgba(70,213,160,.42);
}

.sx-live-activity-caption {
    color: #77817d;
    font-size: 11px;
}

.sx-live-activity-viewport {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent 0%,
        #000 7%,
        #000 93%,
        transparent 100%
    );
    mask-image: linear-gradient(
        90deg,
        transparent 0%,
        #000 7%,
        #000 93%,
        transparent 100%
    );
}

.sx-live-activity-track {
    width: max-content;
    display: flex;
    gap: 10px;
    padding: 15px 10px;
    animation: sxActivityTicker 30s linear infinite;
    will-change: transform;
}

.sx-live-activity-shell:hover .sx-live-activity-track {
    animation-play-state: paused;
}

.sx-activity-event {
    width: 320px;
    min-height: 76px;
    flex: 0 0 320px;
    padding: 14px;
    border-radius: 17px;
    display: grid;
    grid-template-columns: 38px 1fr auto;
    gap: 11px;
    align-items: center;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.05);
}

.sx-activity-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 800;
}

.sx-activity-icon-purple {
    background: rgba(123,103,255,.13);
    color: #c9c0ff;
}

.sx-activity-icon-green {
    background: rgba(70,213,160,.11);
    color: #7de3bc;
}

.sx-activity-icon-amber {
    background: rgba(243,182,63,.11);
    color: #ffd370;
}

.sx-activity-icon-blue {
    background: rgba(75,145,255,.11);
    color: #a6c8ff;
}

.sx-activity-event div {
    min-width: 0;
}

.sx-activity-event strong,
.sx-activity-event small {
    display: block;
}

.sx-activity-event strong {
    color: #eef1ef;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sx-activity-event small {
    margin-top: 5px;
    color: #7e8985;
    font-size: 9px;
}

.sx-activity-event time {
    color: #626d69;
    font-size: 9px;
}

@keyframes sxActivityTicker {
    from {
        transform: translate3d(0,0,0);
    }
    to {
        transform: translate3d(calc(-50% - 5px),0,0);
    }
}

/* =========================
   ORDER TO DELIVERY
========================= */

.sx-journey-section {
    padding: 105px 0 30px;
    background: #050a0a;
}

.sx-journey-shell {
    padding: 54px;
    border-radius: 36px;
    border: 1px solid rgba(255,255,255,.06);
    background:
        radial-gradient(circle at 90% 8%, rgba(114,91,255,.10), transparent 27%),
        radial-gradient(circle at 5% 100%, rgba(53,205,151,.07), transparent 28%),
        linear-gradient(145deg,#0a1412,#07100f);
}

.sx-journey-copy {
    max-width: 840px;
}

.sx-journey-copy h2 {
    margin: 16px 0 0;
    color: #f4f6f5;
    font-size: clamp(50px,5.4vw,82px);
    line-height: .95;
    letter-spacing: -.055em;
    font-weight: 445;
}

.sx-journey-copy p {
    max-width: 660px;
    margin: 22px 0 0;
    color: #929d99;
    font-size: 17px;
    line-height: 1.6;
}

.sx-journey-flow {
    margin-top: 46px;
    display: grid;
    grid-template-columns: 1fr 56px 1fr 56px 1fr 56px 1fr;
    gap: 12px;
    align-items: center;
}

.sx-journey-step {
    min-height: 224px;
    padding: 22px;
    border-radius: 25px;
    position: relative;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.065);
    transition:
        transform .26s ease,
        border-color .26s ease,
        background .26s ease;
}

.sx-journey-step-featured {
    background:
        radial-gradient(circle at 85% 5%, rgba(124,104,255,.16), transparent 34%),
        rgba(255,255,255,.055);
    border-color: rgba(131,111,255,.18);
}

.sx-journey-number {
    color: #606c68;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
}

.sx-journey-icon {
    width: 48px;
    height: 48px;
    margin-top: 34px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.065);
    color: #f5f6f5;
    font-size: 14px;
    font-weight: 800;
}

.sx-journey-step-featured .sx-journey-icon {
    background: linear-gradient(135deg,#7365ff,#978bff);
    border-color: rgba(255,255,255,.10);
    box-shadow: 0 12px 28px rgba(105,88,255,.22);
}

.sx-journey-step strong,
.sx-journey-step small {
    display: block;
}

.sx-journey-step strong {
    margin-top: 18px;
    color: #f4f6f5;
    font-size: 22px;
    letter-spacing: -.025em;
}

.sx-journey-step small {
    margin-top: 7px;
    color: #838e8a;
    font-size: 11px;
    line-height: 1.45;
}

.sx-journey-connector {
    position: relative;
    height: 2px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.09);
}

.sx-journey-connector span {
    position: absolute;
    top: 0;
    left: -36%;
    width: 34%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        rgba(70,213,160,0),
        rgba(70,213,160,.9),
        rgba(128,108,255,.92),
        rgba(128,108,255,0)
    );
    animation: sxJourneyPulse 3.6s linear infinite;
}

.sx-journey-connector:nth-of-type(4) span {
    animation-delay: .45s;
}

.sx-journey-connector:nth-of-type(6) span {
    animation-delay: .9s;
}

@keyframes sxJourneyPulse {
    to {
        transform: translate3d(400%,0,0);
    }
}

@media (hover:hover) and (pointer:fine) {
    .sx-journey-step:hover {
        transform: translate3d(0,-4px,0);
        border-color: rgba(255,255,255,.12);
        background-color: rgba(255,255,255,.055);
    }
}

/* =========================
   PLATFORM STATUS ROW
========================= */

.sx-platform-status {
    padding: 14px 0 34px;
    background: #050a0a;
}

.sx-platform-status-row {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    border-top: 1px solid rgba(255,255,255,.07);
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.sx-platform-status-item {
    min-height: 116px;
    padding: 22px;
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 13px;
    align-items: center;
    border-right: 1px solid rgba(255,255,255,.07);
    transition: background .2s ease;
}

.sx-platform-status-item:last-child {
    border-right: 0;
}

.sx-platform-status-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.06);
    color: #d9deda;
    font-size: 12px;
    font-weight: 800;
}

.sx-platform-status-item strong,
.sx-platform-status-item small {
    display: block;
}

.sx-platform-status-item strong {
    color: #f1f3f2;
    font-size: 13px;
}

.sx-platform-status-item small {
    margin-top: 5px;
    color: #78827e;
    font-size: 9px;
    line-height: 1.45;
}

@media (hover:hover) and (pointer:fine) {
    .sx-platform-status-item:hover {
        background: rgba(255,255,255,.025);
    }
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1100px) {
    .sx-journey-flow {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .sx-journey-connector {
        display: none;
    }

    .sx-platform-status-row {
        grid-template-columns: 1fr 1fr;
    }

    .sx-platform-status-item:nth-child(2) {
        border-right: 0;
    }

    .sx-platform-status-item:nth-child(-n+2) {
        border-bottom: 1px solid rgba(255,255,255,.07);
    }
}

@media (max-width: 720px) {
    .sx-live-activity {
        padding: 16px 0 32px;
    }

    .sx-live-activity-head {
        min-height: 62px;
        padding: 0 16px;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
        gap: 5px;
    }

    .sx-live-activity-caption {
        font-size: 9px;
    }

    .sx-activity-event {
        width: 280px;
        flex-basis: 280px;
    }

    .sx-journey-section {
        padding: 72px 0 20px;
    }

    .sx-journey-shell {
        padding: 28px 18px;
        border-radius: 28px;
    }

    .sx-journey-copy h2 {
        font-size: clamp(44px,12vw,60px);
    }

    .sx-journey-copy p {
        font-size: 15px;
    }

    .sx-journey-flow {
        grid-template-columns: 1fr;
        margin-top: 32px;
    }

    .sx-journey-step {
        min-height: 0;
    }

    .sx-journey-icon {
        margin-top: 22px;
    }

    .sx-platform-status-row {
        grid-template-columns: 1fr;
    }

    .sx-platform-status-item {
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.07);
    }

    .sx-platform-status-item:last-child {
        border-bottom: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sx-live-activity-track,
    .sx-journey-connector span {
        animation: none !important;
    }
}


/* =========================================================
   V18 — MOGELIJKHEDEN REDESIGN
   Uses the same visual language as the homepage hero.
========================================================= */

.features-new {
    background:#050a0a;
    color:#f4f6f5;
}

.features-new-kicker {
    color:#77827e;
    font-size:11px;
    font-weight:760;
    letter-spacing:.18em;
    text-transform:uppercase;
}

/* HERO */

.features-new-hero {
    position:relative;
    overflow:hidden;
    padding:108px 0 88px;

    background:
        radial-gradient(circle at 12% 38%,rgba(39,189,134,.14),transparent 34%),
        radial-gradient(circle at 78% 18%,rgba(92,82,255,.18),transparent 32%),
        linear-gradient(135deg,#050a0a 0%,#071110 42%,#08131a 100%);
}

.features-new-hero::before {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;

    background:
        radial-gradient(circle at 18% 55%,rgba(41,214,154,.08),transparent 30%),
        radial-gradient(circle at 68% 30%,rgba(92,82,255,.10),transparent 28%),
        radial-gradient(circle at 88% 12%,rgba(125,109,255,.08),transparent 22%);
}

.features-new-hero::after {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.34;

    background:
        linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px),
        linear-gradient(180deg,rgba(255,255,255,.022) 1px,transparent 1px);

    background-size:72px 72px;

    -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.88),rgba(0,0,0,.48) 58%,transparent 100%);
    mask-image:linear-gradient(to bottom,rgba(0,0,0,.88),rgba(0,0,0,.48) 58%,transparent 100%);
}

.features-new-hero > .container {
    position:relative;
    z-index:2;
}

.features-new-hero-copy {
    max-width:1000px;
}

.features-new-hero h1 {
    margin:22px 0 0;
    max-width:1050px;

    color:#f4f6f5;
    font-size:clamp(70px,8vw,122px);
    line-height:.86;
    letter-spacing:-.074em;
    font-weight:440;
}

.features-new-hero h1 span {
    background:linear-gradient(90deg,#f5f6f5 0%,#a8a1ff 48%,#65d7aa 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.features-new-hero-copy > p {
    max-width:760px;
    margin:32px 0 0;

    color:#96a09c;
    font-size:18px;
    line-height:1.62;
}

.features-new-actions {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:34px;
}

.features-new-hero-grid {
    margin-top:72px;

    display:grid;
    grid-template-columns:1.45fr .775fr .775fr;
    gap:14px;
}

.features-new-hero-card {
    min-height:350px;
    padding:26px;

    display:flex;
    flex-direction:column;

    overflow:hidden;
    border-radius:27px;

    background:
        radial-gradient(circle at 86% 5%,rgba(116,91,255,.13),transparent 30%),
        radial-gradient(circle at 12% 18%,rgba(46,201,145,.08),transparent 26%),
        linear-gradient(150deg,#111917,#0d1514);

    border:1px solid rgba(255,255,255,.065);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03),
        0 26px 70px rgba(0,0,0,.16);

    transition:
        transform .28s cubic-bezier(.2,.7,.2,1),
        border-color .28s ease;
}

.features-new-hero-card-large {
    min-height:430px;
}

.features-new-card-top {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
}

.features-new-card-top > div {
    display:grid;
}

.features-new-card-top small,
.features-new-revenue small {
    color:#707b77;
    font-size:9px;
}

.features-new-card-top strong {
    margin-top:5px;
    color:#eef1ef;
    font-size:17px;
}

.features-new-live,
.features-new-pill {
    min-height:32px;
    padding:0 11px;
    border-radius:999px;

    display:inline-flex;
    align-items:center;
    gap:7px;

    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.06);

    color:#9ea8a4;
    font-size:9px;
    font-weight:700;
}

.features-new-live i {
    width:7px;
    height:7px;
    border-radius:50%;
    background:#42d6a0;
    box-shadow:0 0 12px rgba(66,214,160,.42);
}

.features-new-pill-purple {
    background:rgba(125,109,255,.11);
    border-color:rgba(125,109,255,.14);
    color:#c5bcff;
}

.features-new-revenue {
    margin-top:35px;
}

.features-new-revenue strong {
    display:block;
    margin-top:7px;

    color:#fff;
    font-size:50px;
    letter-spacing:-.055em;
}

.features-new-chart {
    height:145px;
    margin-top:24px;
}

.features-new-chart svg {
    width:100%;
    height:100%;
}

.features-new-chart-line {
    stroke-dasharray:1200;
    stroke-dashoffset:1200;
}

.features-new-chart.is-live .features-new-chart-line {
    animation:featuresNewDraw 1.4s cubic-bezier(.2,.75,.25,1) forwards;
}

.features-new-chart-fill {
    opacity:0;
}

.features-new-chart.is-live .features-new-chart-fill {
    animation:featuresNewFill .7s ease .65s forwards;
}

@keyframes featuresNewDraw {
    to { stroke-dashoffset:0; }
}

@keyframes featuresNewFill {
    to { opacity:1; }
}

.features-new-metrics {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:9px;
    margin-top:auto;
}

.features-new-metrics > div {
    padding:13px;
    border-radius:15px;

    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.045);
}

.features-new-metrics small,
.features-new-metrics strong {
    display:block;
}

.features-new-metrics small {
    color:#6f7a76;
    font-size:8px;
}

.features-new-metrics strong {
    margin-top:5px;
    color:#f1f3f2;
    font-size:18px;
}

.features-new-product {
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:54px;
}

.features-new-product-icon {
    width:45px;
    height:45px;
    border-radius:14px;

    display:grid;
    place-items:center;

    background:#111817;
    border:1px solid rgba(255,255,255,.06);

    font-weight:800;
}

.features-new-product > div {
    display:grid;
}

.features-new-product strong {
    font-size:13px;
}

.features-new-product small {
    margin-top:5px;
    color:#76817d;
    font-size:9px;
}

.features-new-meter {
    height:8px;
    margin-top:20px;

    overflow:hidden;
    border-radius:999px;
    background:rgba(255,255,255,.07);
}

.features-new-meter span {
    display:block;
    height:100%;
    border-radius:inherit;

    background:linear-gradient(90deg,#f3b63f,#ffcf68);
}

.features-new-message {
    margin-top:52px;
    padding:16px;

    border-radius:18px;

    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.055);
}

.features-new-message small,
.features-new-message strong {
    display:block;
}

.features-new-message small {
    color:#aaa1ff;
    font-size:8px;
    font-weight:700;
    text-transform:uppercase;
}

.features-new-message strong {
    margin-top:7px;
    font-size:15px;
}

.features-new-message p {
    margin:6px 0 0;
    color:#78837f;
    font-size:10px;
}

.features-new-hero-card > a {
    margin-top:auto;
    padding-top:24px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    color:#d9dddb;
    font-size:11px;
    font-weight:650;
}

/* OVERVIEW */

.features-new-overview {
    padding:120px 0;
    background:#050a0a;
}

.features-new-section-head {
    max-width:900px;
    margin:0 auto;
    text-align:center;
}

.features-new-section-head-left {
    margin:0;
    text-align:left;
}

.features-new-section-head h2 {
    margin:17px 0 0;

    color:#f4f6f5;
    font-size:clamp(52px,6.8vw,92px);
    line-height:.94;
    letter-spacing:-.062em;
    font-weight:445;
}

.features-new-section-head p {
    max-width:720px;
    margin:28px auto 0;

    color:#8f9995;
    font-size:17px;
    line-height:1.62;
}

.features-new-section-head-left p {
    margin-left:0;
}

.features-new-overview-grid {
    margin-top:62px;

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
}

.features-new-feature-card {
    min-height:390px;
    padding:26px;

    display:flex;
    flex-direction:column;

    border-radius:28px;

    background:
        linear-gradient(180deg,rgba(255,255,255,.047),rgba(255,255,255,.022));

    border:1px solid rgba(255,255,255,.06);

    transition:
        transform .26s ease,
        border-color .26s ease;
}

.features-new-number {
    color:#5e6965;
    font-size:10px;
    font-weight:700;
    letter-spacing:.08em;
}

.features-new-feature-card h3 {
    margin:34px 0 0;

    color:#f3f5f4;
    font-size:34px;
    line-height:1;
    letter-spacing:-.04em;
    font-weight:500;
}

.features-new-feature-card > p {
    margin:17px 0 0;

    color:#818c88;
    font-size:14px;
    line-height:1.58;
}

.features-new-mini-ui {
    margin-top:auto;

    display:grid;
    gap:8px;
}

.features-new-mini-ui > div {
    padding:13px;
    border-radius:14px;

    display:flex;
    justify-content:space-between;
    gap:12px;

    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.045);
}

.features-new-mini-ui span {
    color:#78837f;
    font-size:9px;
}

.features-new-mini-ui strong {
    color:#f1f3f2;
    font-size:10px;
}

.features-new-bars {
    height:105px;
    margin-top:auto;

    display:flex;
    align-items:flex-end;
    gap:7px;
}

.features-new-bars i {
    flex:1;
    min-height:12px;

    border-radius:999px 999px 5px 5px;
    background:rgba(255,255,255,.10);

    transform-origin:bottom;
}

.features-new-bars i:nth-last-child(1),
.features-new-bars i:nth-last-child(2) {
    background:linear-gradient(#9489ff,#7567ff);
}

.features-new-motion .features-new-bars i {
    transform:scaleY(0);
}

.features-new-motion .features-new-bars.is-live i {
    animation:featuresNewBar .65s cubic-bezier(.2,.75,.25,1) forwards;
}

.features-new-motion .features-new-bars.is-live i:nth-child(2){animation-delay:.05s}
.features-new-motion .features-new-bars.is-live i:nth-child(3){animation-delay:.10s}
.features-new-motion .features-new-bars.is-live i:nth-child(4){animation-delay:.15s}
.features-new-motion .features-new-bars.is-live i:nth-child(5){animation-delay:.20s}
.features-new-motion .features-new-bars.is-live i:nth-child(6){animation-delay:.25s}
.features-new-motion .features-new-bars.is-live i:nth-child(7){animation-delay:.30s}

@keyframes featuresNewBar {
    to { transform:scaleY(1); }
}

/* WORKSPACE */

.features-new-workspace {
    padding:20px 0 120px;
    background:#050a0a;
}

.features-new-workspace-shell {
    padding:62px;
    border-radius:38px;

    display:grid;
    grid-template-columns:.82fr 1.18fr;
    gap:60px;
    align-items:center;

    background:
        radial-gradient(circle at 88% 10%,rgba(114,91,255,.12),transparent 28%),
        radial-gradient(circle at 8% 90%,rgba(53,205,151,.06),transparent 30%),
        linear-gradient(145deg,#081311,#0b1014);

    border:1px solid rgba(255,255,255,.06);
}

.features-new-workspace-copy h2 {
    margin:18px 0 0;

    font-size:clamp(52px,5vw,78px);
    line-height:.95;
    letter-spacing:-.058em;
    font-weight:445;
}

.features-new-workspace-copy > p {
    margin:24px 0 0;

    color:#8a9591;
    font-size:16px;
    line-height:1.6;
}

.features-new-checks {
    margin-top:30px;

    display:grid;
    gap:12px;
}

.features-new-checks span {
    padding-bottom:12px;

    border-bottom:1px solid rgba(255,255,255,.065);

    color:#c8cecb;
    font-size:12px;
}

.features-new-checks span::before {
    content:"✓";
    margin-right:10px;
    color:#76dfb7;
}

.features-new-dashboard {
    padding:18px;
    border-radius:30px;

    background:
        linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035));

    border:1px solid rgba(255,255,255,.09);

    box-shadow:
        0 28px 80px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.08);
}

.features-new-dashboard-top {
    min-height:54px;
    padding:0 5px 14px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    border-bottom:1px solid rgba(255,255,255,.065);
}

.features-new-dashboard-brand {
    display:flex;
    align-items:center;
    gap:11px;
}

.features-new-dashboard-brand > span {
    width:38px;
    height:38px;
    border-radius:13px;

    display:grid;
    place-items:center;

    background:#111817;
    border:1px solid rgba(255,255,255,.065);

    font-weight:800;
}

.features-new-dashboard-brand > div {
    display:grid;
}

.features-new-dashboard-brand strong {
    font-size:12px;
}

.features-new-dashboard-brand small {
    margin-top:3px;
    color:#6f7a76;
    font-size:8px;
}

.features-new-dashboard-main {
    display:grid;
    grid-template-columns:1.35fr .65fr;
    gap:10px;
    padding-top:13px;
}

.features-new-dashboard-revenue {
    min-height:340px;
    padding:27px;

    border-radius:23px;

    background:
        radial-gradient(circle at 90% 5%,rgba(116,91,255,.12),transparent 30%),
        #0b1312;

    border:1px solid rgba(255,255,255,.045);
}

.features-new-dashboard-revenue small {
    color:#77817d;
    font-size:9px;
}

.features-new-dashboard-revenue > strong {
    display:block;
    margin-top:8px;

    font-size:52px;
    letter-spacing:-.055em;
}

.features-new-bars-large {
    height:145px;
    margin-top:62px;
}

.features-new-dashboard-side {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.features-new-dashboard-side > div {
    padding:16px;

    display:flex;
    flex-direction:column;
    justify-content:flex-end;

    border-radius:19px;

    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.05);
}

.features-new-dashboard-side > div.warning {
    background:rgba(243,182,63,.07);
    border-color:rgba(243,182,63,.10);
}

.features-new-dashboard-side > div.purple {
    background:rgba(125,109,255,.08);
    border-color:rgba(125,109,255,.12);
}

.features-new-dashboard-side small {
    color:#79837f;
    font-size:8px;
}

.features-new-dashboard-side strong {
    margin-top:6px;
    font-size:24px;
}

/* TELEGRAM */

.features-new-telegram {
    padding:120px 0;

    background:
        radial-gradient(circle at 12% 88%,rgba(92,67,255,.52),transparent 38%),
        radial-gradient(circle at 90% 15%,rgba(119,99,255,.18),transparent 35%),
        linear-gradient(140deg,#0b0b14,#11101c 55%,#1d1239);
}

.features-new-telegram-shell {
    display:grid;
    grid-template-columns:1fr .8fr;
    gap:80px;
    align-items:center;
}

.features-new-telegram-copy h2 {
    margin:18px 0 0;

    max-width:800px;

    font-size:clamp(58px,6vw,92px);
    line-height:.94;
    letter-spacing:-.065em;
    font-weight:445;
}

.features-new-telegram-copy p {
    max-width:650px;
    margin:28px 0 0;

    color:#aaa8b4;
    font-size:17px;
    line-height:1.62;
}

.features-new-phone {
    width:min(100%,440px);
    margin-left:auto;
    padding:22px;

    border-radius:38px;

    background:
        linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.045));

    border:1px solid rgba(255,255,255,.12);

    box-shadow:
        0 32px 80px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.10);
}

.features-new-phone-bar {
    width:72px;
    height:5px;
    margin:0 auto 24px;

    border-radius:999px;
    background:rgba(255,255,255,.12);
}

.features-new-phone-head {
    display:flex;
    align-items:center;
    gap:11px;
    padding-bottom:18px;

    border-bottom:1px solid rgba(255,255,255,.07);
}

.features-new-phone-logo {
    width:40px;
    height:40px;
    border-radius:13px;

    display:grid;
    place-items:center;

    background:#111817;
    font-weight:800;
}

.features-new-phone-head > div {
    display:grid;
}

.features-new-phone-head strong {
    font-size:12px;
}

.features-new-phone-head small {
    margin-top:3px;
    color:#777f8a;
    font-size:8px;
}

.features-new-notification {
    margin-top:12px;
    padding:16px;

    border-radius:18px;

    background:rgba(255,255,255,.055);
    border:1px solid rgba(255,255,255,.065);
}

.features-new-notification small,
.features-new-notification strong,
.features-new-notification span {
    display:block;
}

.features-new-notification small {
    color:#bdb5ff;
    font-size:8px;
    font-weight:700;
    text-transform:uppercase;
}

.features-new-notification strong {
    margin-top:6px;
    font-size:14px;
}

.features-new-notification p {
    margin:5px 0 0;
    color:#858d96;
    font-size:10px;
}

.features-new-notification span {
    margin-top:11px;
    color:#676f78;
    font-size:8px;
}

/* PROCESS */

.features-new-process {
    padding:120px 0;
    background:#050a0a;
}

.features-new-process-grid {
    margin-top:58px;

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
}

.features-new-process-grid article {
    min-height:310px;
    padding:24px;

    border-radius:26px;

    background:
        linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.022));

    border:1px solid rgba(255,255,255,.06);

    transition:
        transform .26s ease,
        border-color .26s ease;
}

.features-new-process-grid article.featured {
    background:
        radial-gradient(circle at 85% 5%,rgba(125,109,255,.15),transparent 34%),
        rgba(255,255,255,.04);

    border-color:rgba(125,109,255,.15);
}

.features-new-process-grid article > span {
    color:#606b67;
    font-size:10px;
    font-weight:700;
}

.features-new-process-icon {
    width:48px;
    height:48px;
    margin-top:42px;

    border-radius:15px;

    display:grid;
    place-items:center;

    background:rgba(255,255,255,.055);
    border:1px solid rgba(255,255,255,.055);

    font-weight:800;
}

.features-new-process-grid article.featured .features-new-process-icon {
    background:linear-gradient(135deg,#7365ff,#978bff);
    box-shadow:0 12px 28px rgba(105,88,255,.22);
}

.features-new-process-grid h3 {
    margin:20px 0 0;
    font-size:24px;
    letter-spacing:-.035em;
}

.features-new-process-grid p {
    margin:10px 0 0;

    color:#7f8a86;
    font-size:12px;
    line-height:1.5;
}

/* CONNECTED */

.features-new-connected {
    padding:30px 0 120px;
    background:#050a0a;
}

.features-new-connected-grid {
    margin-top:58px;

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
}

.features-new-connected-grid article {
    min-height:260px;
    padding:24px;

    display:flex;
    flex-direction:column;

    border-radius:26px;

    background:
        linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.022));

    border:1px solid rgba(255,255,255,.06);

    transition:
        transform .26s ease,
        border-color .26s ease;
}

.features-new-connected-grid small {
    margin-top:auto;

    color:#65706c;
    font-size:9px;
    font-weight:700;
    text-transform:uppercase;
}

.features-new-connected-grid h3 {
    margin:9px 0 0;

    font-size:27px;
    letter-spacing:-.04em;
}

.features-new-connected-grid p {
    margin:13px 0 0;

    color:#818c88;
    font-size:12px;
    line-height:1.5;
}

/* FINAL */

.features-new-final {
    padding:0 0 96px;
    background:#050a0a;
}

.features-new-final-shell {
    min-height:390px;
    padding:52px;

    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:40px;

    border-radius:38px;

    background:
        radial-gradient(circle at 12% 10%,rgba(53,205,151,.09),transparent 28%),
        radial-gradient(circle at 88% 88%,rgba(112,91,255,.16),transparent 34%),
        linear-gradient(140deg,#0a1010,#0a0d15);

    border:1px solid rgba(255,255,255,.07);

    box-shadow:
        0 30px 90px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.035);
}

.features-new-final-shell h2 {
    max-width:950px;
    margin:18px 0 0;

    font-size:clamp(58px,7vw,100px);
    line-height:.91;
    letter-spacing:-.067em;
    font-weight:445;
}

.features-new-final-shell p {
    margin:22px 0 0;

    color:#89948f;
    font-size:15px;
}

.features-new-final-button {
    min-height:58px;
    padding:0 18px 0 22px;

    flex-shrink:0;

    display:inline-flex;
    align-items:center;
    gap:22px;

    border-radius:999px;

    background:#f4f6f5;
    color:#101514;

    font-size:13px;
    font-weight:700;

    transition:transform .2s ease;
}

.features-new-final-button span {
    width:34px;
    height:34px;
    border-radius:50%;

    display:grid;
    place-items:center;

    background:#101514;
    color:#fff;
}

/* MOTION */

.features-new-motion .features-new-reveal {
    opacity:0;
    transform:translate3d(0,22px,0);

    transition:
        opacity .72s cubic-bezier(.2,.7,.2,1),
        transform .72s cubic-bezier(.2,.7,.2,1);

    transition-delay:var(--delay,0ms);
}

.features-new-motion .features-new-reveal.is-visible {
    opacity:1;
    transform:translate3d(0,0,0);
}

@media (hover:hover) and (pointer:fine) {
    .features-new-hero-card:hover,
    .features-new-feature-card:hover,
    .features-new-process-grid article:hover,
    .features-new-connected-grid article:hover {
        transform:translate3d(0,-5px,0);
        border-color:rgba(255,255,255,.11);
    }

    .features-new-final-button:hover {
        transform:translate3d(0,-2px,0);
    }
}

/* RESPONSIVE */

@media(max-width:1100px) {
    .features-new-hero-grid {
        grid-template-columns:1fr 1fr;
    }

    .features-new-hero-card-large {
        grid-column:1 / -1;
    }

    .features-new-overview-grid,
    .features-new-process-grid,
    .features-new-connected-grid {
        grid-template-columns:1fr 1fr;
    }

    .features-new-workspace-shell,
    .features-new-telegram-shell {
        grid-template-columns:1fr;
    }

    .features-new-phone {
        margin-left:0;
    }
}

@media(max-width:720px) {
    .features-new-hero {
        padding:72px 0 66px;
    }

    .features-new-hero h1 {
        font-size:clamp(52px,14vw,70px);
        line-height:.88;
    }

    .features-new-hero-copy > p {
        font-size:16px;
    }

    .features-new-actions {
        display:grid;
    }

    .features-new-actions .sx-btn {
        width:100%;
        justify-content:space-between;
    }

    .features-new-hero-grid {
        grid-template-columns:1fr;
        margin-top:48px;
    }

    .features-new-hero-card-large {
        grid-column:auto;
        min-height:390px;
    }

    .features-new-overview,
    .features-new-process,
    .features-new-telegram {
        padding:84px 0;
    }

    .features-new-connected {
        padding:20px 0 84px;
    }

    .features-new-workspace {
        padding-bottom:84px;
    }

    .features-new-section-head {
        text-align:left;
    }

    .features-new-section-head h2 {
        font-size:46px;
    }

    .features-new-section-head p {
        margin-left:0;
        font-size:15px;
    }

    .features-new-overview-grid,
    .features-new-process-grid,
    .features-new-connected-grid {
        grid-template-columns:1fr;
    }

    .features-new-feature-card {
        min-height:320px;
    }

    .features-new-workspace-shell {
        padding:28px 18px;
        border-radius:28px;
        gap:40px;
    }

    .features-new-workspace-copy h2 {
        font-size:48px;
    }

    .features-new-dashboard-main {
        grid-template-columns:1fr;
    }

    .features-new-dashboard-revenue {
        min-height:270px;
    }

    .features-new-dashboard-side {
        grid-template-columns:1fr 1fr;
    }

    .features-new-telegram-shell {
        gap:48px;
    }

    .features-new-telegram-copy h2 {
        font-size:50px;
    }

    .features-new-phone {
        width:100%;
    }

    .features-new-final {
        padding-bottom:48px;
    }

    .features-new-final-shell {
        min-height:430px;
        padding:28px 22px;

        flex-direction:column;
        align-items:flex-start;
        justify-content:space-between;

        border-radius:28px;
    }

    .features-new-final-shell h2 {
        font-size:56px;
    }

    .features-new-final-button {
        width:100%;
        justify-content:space-between;
    }
}

@media(prefers-reduced-motion: reduce) {
    .features-new-motion .features-new-reveal {
        opacity:1 !important;
        transform:none !important;
        transition:none !important;
    }

    .features-new-chart-line,
    .features-new-chart-fill,
    .features-new-bars i {
        animation:none !important;
        transform:none !important;
        opacity:1 !important;
        stroke-dashoffset:0 !important;
    }
}

/* =========================================================
   V19 — TELEGRAM REDESIGN
   Same Sellnex master language as homepage + possibilities.
========================================================= */

.telegram-new {
    background:#050a0a;
    color:#f4f6f5;
}

.telegram-new-kicker {
    color:#77827e;
    font-size:11px;
    font-weight:760;
    letter-spacing:.18em;
    text-transform:uppercase;
}

/* HERO */

.telegram-new-hero {
    position:relative;
    overflow:hidden;
    padding:108px 0 88px;

    background:
        radial-gradient(circle at 12% 38%,rgba(39,189,134,.14),transparent 34%),
        radial-gradient(circle at 78% 18%,rgba(92,82,255,.18),transparent 32%),
        linear-gradient(135deg,#050a0a 0%,#071110 42%,#08131a 100%);
}

.telegram-new-hero::before {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;

    background:
        radial-gradient(circle at 18% 55%,rgba(41,214,154,.08),transparent 30%),
        radial-gradient(circle at 68% 30%,rgba(92,82,255,.10),transparent 28%),
        radial-gradient(circle at 88% 12%,rgba(125,109,255,.08),transparent 22%);
}

.telegram-new-hero::after {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.34;

    background:
        linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px),
        linear-gradient(180deg,rgba(255,255,255,.022) 1px,transparent 1px);

    background-size:72px 72px;

    -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.88),rgba(0,0,0,.48) 58%,transparent 100%);
    mask-image:linear-gradient(to bottom,rgba(0,0,0,.88),rgba(0,0,0,.48) 58%,transparent 100%);
}

.telegram-new-hero > .container {
    position:relative;
    z-index:2;
}

.telegram-new-hero-copy {
    max-width:1000px;
}

.telegram-new-hero h1 {
    max-width:1050px;
    margin:22px 0 0;

    color:#f4f6f5;
    font-size:clamp(70px,8vw,122px);
    line-height:.86;
    letter-spacing:-.074em;
    font-weight:440;
}

.telegram-new-hero h1 span {
    background:linear-gradient(90deg,#f5f6f5 0%,#a8a1ff 48%,#65d7aa 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.telegram-new-hero-copy > p {
    max-width:760px;
    margin:32px 0 0;

    color:#96a09c;
    font-size:18px;
    line-height:1.62;
}

.telegram-new-actions {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:34px;
}

.telegram-new-hero-grid {
    margin-top:72px;

    display:grid;
    grid-template-columns:1.45fr .775fr .775fr;
    gap:14px;
}

.telegram-new-card {
    min-height:350px;
    padding:26px;

    display:flex;
    flex-direction:column;

    border-radius:27px;

    background:
        radial-gradient(circle at 86% 5%,rgba(116,91,255,.13),transparent 30%),
        radial-gradient(circle at 12% 18%,rgba(46,201,145,.08),transparent 26%),
        linear-gradient(150deg,#111917,#0d1514);

    border:1px solid rgba(255,255,255,.065);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03),
        0 26px 70px rgba(0,0,0,.16);

    transition:
        transform .28s cubic-bezier(.2,.7,.2,1),
        border-color .28s ease;
}

.telegram-new-card-large {
    min-height:430px;
}

.telegram-new-card-top {
    display:flex;
    justify-content:space-between;
    gap:18px;
}

.telegram-new-card-top > div {
    display:grid;
}

.telegram-new-card-top small {
    color:#707b77;
    font-size:9px;
}

.telegram-new-card-top strong {
    margin-top:5px;
    color:#eef1ef;
    font-size:17px;
}

.telegram-new-live,
.telegram-new-pill {
    min-height:32px;
    padding:0 11px;
    border-radius:999px;

    display:inline-flex;
    align-items:center;
    gap:7px;

    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.06);

    color:#9ea8a4;
    font-size:9px;
    font-weight:700;
}

.telegram-new-live i {
    width:7px;
    height:7px;
    border-radius:50%;

    background:#42d6a0;
    box-shadow:0 0 12px rgba(66,214,160,.42);
}

.telegram-new-pill-purple {
    background:rgba(125,109,255,.11);
    border-color:rgba(125,109,255,.14);
    color:#c5bcff;
}

.telegram-new-chat {
    display:grid;
    gap:10px;
    margin-top:30px;
}

.telegram-new-message {
    width:82%;
    padding:16px;

    border-radius:18px 18px 18px 6px;

    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.05);
}

.telegram-new-message-out {
    margin-left:auto;

    border-radius:18px 18px 6px 18px;

    background:linear-gradient(135deg,#7868ff,#988bff);
    color:#0d1010;
}

.telegram-new-message small,
.telegram-new-message strong,
.telegram-new-message span {
    display:block;
}

.telegram-new-message small {
    color:#aaa1ff;
    font-size:8px;
    font-weight:700;
    text-transform:uppercase;
}

.telegram-new-message-out small {
    color:rgba(13,16,16,.65);
}

.telegram-new-message strong {
    margin-top:6px;
    font-size:14px;
}

.telegram-new-message p {
    margin:5px 0 0;

    color:#7d8783;
    font-size:10px;
}

.telegram-new-message-out p {
    color:rgba(13,16,16,.70);
}

.telegram-new-message span {
    margin-top:10px;

    color:#616c68;
    font-size:8px;
}

.telegram-new-alert {
    margin-top:58px;
    padding:16px;

    display:flex;
    align-items:center;
    gap:12px;

    border-radius:18px;

    background:rgba(243,182,63,.07);
    border:1px solid rgba(243,182,63,.10);
}

.telegram-new-alert > span {
    width:42px;
    height:42px;
    border-radius:13px;

    display:grid;
    place-items:center;

    background:rgba(243,182,63,.12);
    color:#ffd06a;

    font-weight:800;
}

.telegram-new-alert > div {
    display:grid;
}

.telegram-new-alert strong {
    font-size:12px;
}

.telegram-new-alert small {
    margin-top:5px;
    color:#917a48;
    font-size:9px;
}

.telegram-new-miniapp {
    margin-top:50px;
    padding:16px;

    border-radius:19px;

    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.055);
}

.telegram-new-miniapp-head {
    display:flex;
    align-items:center;
    gap:11px;
    padding-bottom:13px;

    border-bottom:1px solid rgba(255,255,255,.055);
}

.telegram-new-miniapp-head > span {
    width:38px;
    height:38px;
    border-radius:12px;

    display:grid;
    place-items:center;

    background:#101716;
    font-weight:800;
}

.telegram-new-miniapp-head > div {
    display:grid;
}

.telegram-new-miniapp-head strong {
    font-size:11px;
}

.telegram-new-miniapp-head small {
    margin-top:3px;
    color:#6f7a76;
    font-size:8px;
}

.telegram-new-miniapp-row {
    padding:12px 0;

    display:flex;
    justify-content:space-between;

    border-bottom:1px solid rgba(255,255,255,.045);
}

.telegram-new-miniapp-row:last-child {
    border-bottom:0;
}

.telegram-new-miniapp-row span {
    color:#78837f;
    font-size:9px;
}

.telegram-new-miniapp-row strong {
    font-size:10px;
}

.telegram-new-card > a {
    margin-top:auto;
    padding-top:24px;

    display:flex;
    justify-content:space-between;

    color:#d9dddb;
    font-size:11px;
    font-weight:650;
}

/* SECTIONS */

.telegram-new-notifications,
.telegram-new-more,
.telegram-new-steps,
.telegram-new-platform,
.telegram-new-final {
    background:#050a0a;
}

.telegram-new-notifications {
    padding:120px 0;
}

.telegram-new-section-head {
    max-width:900px;
    margin:0 auto;
    text-align:center;
}

.telegram-new-section-head-left {
    margin:0;
    text-align:left;
}

.telegram-new-section-head h2 {
    margin:17px 0 0;

    color:#f4f6f5;
    font-size:clamp(52px,6.8vw,92px);
    line-height:.94;
    letter-spacing:-.062em;
    font-weight:445;
}

.telegram-new-section-head p {
    max-width:720px;
    margin:28px auto 0;

    color:#8f9995;
    font-size:17px;
    line-height:1.62;
}

.telegram-new-section-head-left p {
    margin-left:0;
}

.telegram-new-notification-grid {
    margin-top:62px;

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
}

.telegram-new-notification-card {
    min-height:430px;
    padding:26px;

    display:flex;
    flex-direction:column;

    border-radius:28px;

    background:
        linear-gradient(180deg,rgba(255,255,255,.047),rgba(255,255,255,.022));

    border:1px solid rgba(255,255,255,.06);

    transition:
        transform .26s ease,
        border-color .26s ease;
}

.telegram-new-number {
    color:#5e6965;
    font-size:10px;
    font-weight:700;
}

.telegram-new-notification-icon {
    width:50px;
    height:50px;
    margin-top:35px;

    border-radius:15px;

    display:grid;
    place-items:center;

    background:rgba(125,109,255,.10);
    border:1px solid rgba(125,109,255,.12);

    color:#b3a8ff;
    font-weight:800;
}

.telegram-new-notification-card h3 {
    margin:22px 0 0;

    font-size:31px;
    line-height:1;
    letter-spacing:-.045em;
    font-weight:500;
}

.telegram-new-notification-card > p {
    margin:16px 0 0;

    color:#818c88;
    font-size:13px;
    line-height:1.55;
}

.telegram-new-notification-preview {
    margin-top:auto;
    padding:15px;

    border-radius:17px;

    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.045);
}

.telegram-new-notification-preview-amber {
    background:rgba(243,182,63,.06);
    border-color:rgba(243,182,63,.09);
}

.telegram-new-notification-preview-purple {
    background:rgba(125,109,255,.065);
    border-color:rgba(125,109,255,.10);
}

.telegram-new-notification-preview small,
.telegram-new-notification-preview strong,
.telegram-new-notification-preview span {
    display:block;
}

.telegram-new-notification-preview small {
    color:#8d83eb;
    font-size:8px;
    font-weight:700;
    text-transform:uppercase;
}

.telegram-new-notification-preview strong {
    margin-top:6px;
    font-size:13px;
}

.telegram-new-notification-preview span {
    margin-top:5px;
    color:#717c78;
    font-size:9px;
}

/* MINI APP SECTION */

.telegram-new-miniapp-section {
    padding:20px 0 120px;
    background:#050a0a;
}

.telegram-new-miniapp-shell {
    padding:62px;

    display:grid;
    grid-template-columns:.95fr .75fr;
    gap:72px;
    align-items:center;

    border-radius:38px;

    background:
        radial-gradient(circle at 88% 10%,rgba(114,91,255,.13),transparent 28%),
        radial-gradient(circle at 8% 90%,rgba(53,205,151,.06),transparent 30%),
        linear-gradient(145deg,#081311,#0b1014);

    border:1px solid rgba(255,255,255,.06);
}

.telegram-new-miniapp-copy h2 {
    margin:18px 0 0;

    font-size:clamp(54px,5.5vw,82px);
    line-height:.95;
    letter-spacing:-.058em;
    font-weight:445;
}

.telegram-new-miniapp-copy > p {
    margin:25px 0 0;

    color:#8a9591;
    font-size:16px;
    line-height:1.62;
}

.telegram-new-checks {
    margin-top:30px;

    display:grid;
    gap:12px;
}

.telegram-new-checks span {
    padding-bottom:12px;

    border-bottom:1px solid rgba(255,255,255,.065);

    color:#c8cecb;
    font-size:12px;
}

.telegram-new-checks span::before {
    content:"✓";
    margin-right:10px;
    color:#76dfb7;
}

.telegram-new-phone {
    width:min(100%,430px);
    margin-left:auto;
    padding:21px;

    border-radius:38px;

    background:
        linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.038));

    border:1px solid rgba(255,255,255,.11);

    box-shadow:
        0 32px 80px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.09);
}

.telegram-new-phone-notch {
    width:76px;
    height:5px;
    margin:0 auto 23px;

    border-radius:999px;
    background:rgba(255,255,255,.12);
}

.telegram-new-phone-head {
    display:flex;
    align-items:center;
    gap:11px;
    padding-bottom:17px;

    border-bottom:1px solid rgba(255,255,255,.06);
}

.telegram-new-phone-logo {
    width:40px;
    height:40px;
    border-radius:13px;

    display:grid;
    place-items:center;

    background:#111817;
    font-weight:800;
}

.telegram-new-phone-head > div {
    display:grid;
}

.telegram-new-phone-head strong {
    font-size:12px;
}

.telegram-new-phone-head small {
    margin-top:3px;
    color:#707b77;
    font-size:8px;
}

.telegram-new-phone-stats {
    margin-top:14px;
}

.telegram-new-phone-main {
    min-height:230px;
    padding:19px;

    border-radius:20px;

    background:
        radial-gradient(circle at 90% 5%,rgba(116,91,255,.13),transparent 30%),
        #0b1312;

    border:1px solid rgba(255,255,255,.045);
}

.telegram-new-phone-main small {
    color:#77817d;
    font-size:8px;
}

.telegram-new-phone-main > strong {
    display:block;
    margin-top:7px;

    font-size:38px;
    letter-spacing:-.055em;
}

.telegram-new-phone-bars {
    height:95px;
    margin-top:42px;

    display:flex;
    align-items:flex-end;
    gap:6px;
}

.telegram-new-phone-bars i {
    flex:1;
    min-height:10px;

    border-radius:999px 999px 5px 5px;
    background:rgba(255,255,255,.10);

    transform-origin:bottom;
}

.telegram-new-phone-bars i:nth-last-child(1),
.telegram-new-phone-bars i:nth-last-child(2) {
    background:linear-gradient(#9489ff,#7567ff);
}

.telegram-new-motion .telegram-new-phone-bars i {
    transform:scaleY(0);
}

.telegram-new-motion .telegram-new-phone-bars.is-live i {
    animation:telegramNewBars .65s cubic-bezier(.2,.75,.25,1) forwards;
}

.telegram-new-motion .telegram-new-phone-bars.is-live i:nth-child(2){animation-delay:.05s}
.telegram-new-motion .telegram-new-phone-bars.is-live i:nth-child(3){animation-delay:.10s}
.telegram-new-motion .telegram-new-phone-bars.is-live i:nth-child(4){animation-delay:.15s}
.telegram-new-motion .telegram-new-phone-bars.is-live i:nth-child(5){animation-delay:.20s}
.telegram-new-motion .telegram-new-phone-bars.is-live i:nth-child(6){animation-delay:.25s}

@keyframes telegramNewBars {
    to { transform:scaleY(1); }
}

.telegram-new-phone-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-top:9px;
}

.telegram-new-phone-grid > div {
    padding:13px;

    border-radius:15px;

    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.045);
}

.telegram-new-phone-grid small,
.telegram-new-phone-grid strong {
    display:block;
}

.telegram-new-phone-grid small {
    color:#717c78;
    font-size:8px;
}

.telegram-new-phone-grid strong {
    margin-top:5px;
    font-size:16px;
}

/* MORE */

.telegram-new-more {
    padding:120px 0;
}

.telegram-new-more-grid {
    margin-top:58px;

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
}

.telegram-new-more-grid article {
    min-height:320px;
    padding:24px;

    display:flex;
    flex-direction:column;

    border-radius:26px;

    background:
        linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.022));

    border:1px solid rgba(255,255,255,.06);

    transition:
        transform .26s ease,
        border-color .26s ease;
}

.telegram-new-more-icon {
    width:46px;
    height:46px;
    border-radius:14px;

    display:grid;
    place-items:center;

    background:rgba(125,109,255,.10);
    border:1px solid rgba(125,109,255,.12);

    color:#b4a9ff;
}

.telegram-new-more-grid small {
    margin-top:auto;

    color:#66716d;
    font-size:9px;
    font-weight:700;
    text-transform:uppercase;
}

.telegram-new-more-grid h3 {
    margin:9px 0 0;

    font-size:27px;
    letter-spacing:-.04em;
}

.telegram-new-more-grid p {
    margin:13px 0 0;

    color:#818c88;
    font-size:12px;
    line-height:1.5;
}

/* FLOW */

.telegram-new-flow {
    padding:20px 0 120px;
    background:#050a0a;
}

.telegram-new-flow-shell {
    padding:60px;

    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:62px;
    align-items:center;

    border-radius:38px;

    background:
        radial-gradient(circle at 12% 88%,rgba(92,67,255,.35),transparent 38%),
        radial-gradient(circle at 90% 15%,rgba(119,99,255,.14),transparent 35%),
        linear-gradient(140deg,#0b0b14,#11101c 55%,#1d1239);

    border:1px solid rgba(255,255,255,.07);
}

.telegram-new-flow-copy h2 {
    margin:18px 0 0;

    font-size:clamp(54px,5.6vw,82px);
    line-height:.95;
    letter-spacing:-.058em;
    font-weight:445;
}

.telegram-new-flow-copy p {
    margin:25px 0 0;

    color:#a5a3af;
    font-size:16px;
    line-height:1.62;
}

.telegram-new-flow-copy .sx-btn {
    margin-top:30px;
}

.telegram-new-flow-visual {
    display:grid;
    grid-template-columns:1fr 56px 1fr 56px 1fr;
    gap:10px;
    align-items:center;
}

.telegram-new-flow-step {
    min-height:220px;
    padding:20px;

    border-radius:23px;

    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.065);
}

.telegram-new-flow-step-featured {
    background:
        radial-gradient(circle at 86% 5%,rgba(125,109,255,.15),transparent 34%),
        rgba(255,255,255,.05);

    border-color:rgba(125,109,255,.16);
}

.telegram-new-flow-step > span {
    color:#626c68;
    font-size:9px;
    font-weight:700;
}

.telegram-new-flow-step strong,
.telegram-new-flow-step small {
    display:block;
}

.telegram-new-flow-step strong {
    margin-top:80px;
    font-size:20px;
}

.telegram-new-flow-step small {
    margin-top:6px;

    color:#7c8682;
    font-size:9px;
    line-height:1.45;
}

.telegram-new-flow-line {
    position:relative;
    height:2px;

    overflow:hidden;
    border-radius:999px;

    background:rgba(255,255,255,.08);
}

.telegram-new-flow-line i {
    position:absolute;
    top:0;
    left:-40%;

    width:40%;
    height:100%;

    background:linear-gradient(90deg,transparent,#42d6a0,#8f80ff,transparent);

    animation:telegramNewFlow 3.4s linear infinite;
}

.telegram-new-flow-line:nth-of-type(4) i {
    animation-delay:.6s;
}

@keyframes telegramNewFlow {
    to { transform:translate3d(360%,0,0); }
}

/* STEPS */

.telegram-new-steps {
    padding:120px 0;
}

.telegram-new-steps-grid {
    margin-top:58px;

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
}

.telegram-new-steps-grid article {
    min-height:330px;
    padding:25px;

    border-radius:26px;

    background:
        linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.022));

    border:1px solid rgba(255,255,255,.06);

    transition:
        transform .26s ease,
        border-color .26s ease;
}

.telegram-new-steps-grid article.featured {
    background:
        radial-gradient(circle at 86% 5%,rgba(125,109,255,.15),transparent 34%),
        rgba(255,255,255,.04);

    border-color:rgba(125,109,255,.15);
}

.telegram-new-steps-grid article > span {
    color:#606b67;
    font-size:10px;
    font-weight:700;
}

.telegram-new-step-icon {
    width:48px;
    height:48px;
    margin-top:42px;

    border-radius:15px;

    display:grid;
    place-items:center;

    background:rgba(255,255,255,.055);
    border:1px solid rgba(255,255,255,.055);

    font-weight:800;
}

.telegram-new-steps-grid article.featured .telegram-new-step-icon {
    background:linear-gradient(135deg,#7365ff,#978bff);
    box-shadow:0 12px 28px rgba(105,88,255,.22);
}

.telegram-new-steps-grid h3 {
    margin:20px 0 0;

    font-size:25px;
    letter-spacing:-.035em;
}

.telegram-new-steps-grid p {
    margin:10px 0 0;

    color:#7f8a86;
    font-size:12px;
    line-height:1.5;
}

/* PLATFORM */

.telegram-new-platform {
    padding:20px 0 120px;
}

.telegram-new-platform-shell {
    padding:58px;

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;

    border-radius:38px;

    background:
        radial-gradient(circle at 88% 8%,rgba(112,91,255,.10),transparent 28%),
        linear-gradient(145deg,#081311,#0b1014);

    border:1px solid rgba(255,255,255,.06);
}

.telegram-new-platform-copy h2 {
    margin:18px 0 0;

    font-size:clamp(52px,5vw,76px);
    line-height:.96;
    letter-spacing:-.058em;
    font-weight:445;
}

.telegram-new-platform-copy p {
    margin:24px 0 0;

    color:#89948f;
    font-size:15px;
    line-height:1.62;
}

.telegram-new-platform-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.telegram-new-platform-grid article {
    min-height:300px;
    padding:24px;

    display:flex;
    flex-direction:column;

    border-radius:25px;

    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.055);

    transition:
        transform .26s ease,
        border-color .26s ease;
}

.telegram-new-platform-grid small {
    margin-top:auto;

    color:#66716d;
    font-size:9px;
    font-weight:700;
    text-transform:uppercase;
}

.telegram-new-platform-grid h3 {
    margin:9px 0 0;

    font-size:26px;
    letter-spacing:-.04em;
}

.telegram-new-platform-grid p {
    margin:13px 0 0;

    color:#818c88;
    font-size:12px;
    line-height:1.5;
}

/* FINAL */

.telegram-new-final {
    padding:0 0 96px;
}

.telegram-new-final-shell {
    min-height:390px;
    padding:52px;

    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:40px;

    border-radius:38px;

    background:
        radial-gradient(circle at 12% 10%,rgba(53,205,151,.09),transparent 28%),
        radial-gradient(circle at 88% 88%,rgba(112,91,255,.16),transparent 34%),
        linear-gradient(140deg,#0a1010,#0a0d15);

    border:1px solid rgba(255,255,255,.07);

    box-shadow:
        0 30px 90px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.035);
}

.telegram-new-final-shell h2 {
    max-width:950px;
    margin:18px 0 0;

    font-size:clamp(58px,7vw,100px);
    line-height:.91;
    letter-spacing:-.067em;
    font-weight:445;
}

.telegram-new-final-shell p {
    margin:22px 0 0;

    color:#89948f;
    font-size:15px;
}

.telegram-new-final-button {
    min-height:58px;
    padding:0 18px 0 22px;

    flex-shrink:0;

    display:inline-flex;
    align-items:center;
    gap:22px;

    border-radius:999px;

    background:#f4f6f5;
    color:#101514;

    font-size:13px;
    font-weight:700;

    transition:transform .2s ease;
}

.telegram-new-final-button span {
    width:34px;
    height:34px;
    border-radius:50%;

    display:grid;
    place-items:center;

    background:#101514;
    color:#fff;
}

/* MOTION */

.telegram-new-motion .telegram-new-reveal {
    opacity:0;
    transform:translate3d(0,22px,0);

    transition:
        opacity .72s cubic-bezier(.2,.7,.2,1),
        transform .72s cubic-bezier(.2,.7,.2,1);

    transition-delay:var(--tg-delay,0ms);
}

.telegram-new-motion .telegram-new-reveal.is-visible {
    opacity:1;
    transform:translate3d(0,0,0);
}

@media (hover:hover) and (pointer:fine) {
    .telegram-new-card:hover,
    .telegram-new-notification-card:hover,
    .telegram-new-more-grid article:hover,
    .telegram-new-steps-grid article:hover,
    .telegram-new-platform-grid article:hover {
        transform:translate3d(0,-5px,0);
        border-color:rgba(255,255,255,.11);
    }

    .telegram-new-final-button:hover {
        transform:translate3d(0,-2px,0);
    }
}

/* RESPONSIVE */

@media(max-width:1100px) {
    .telegram-new-hero-grid {
        grid-template-columns:1fr 1fr;
    }

    .telegram-new-card-large {
        grid-column:1 / -1;
    }

    .telegram-new-more-grid {
        grid-template-columns:1fr 1fr;
    }

    .telegram-new-miniapp-shell,
    .telegram-new-flow-shell,
    .telegram-new-platform-shell {
        grid-template-columns:1fr;
    }

    .telegram-new-phone {
        margin-left:0;
    }
}

@media(max-width:720px) {
    .telegram-new-hero {
        padding:72px 0 66px;
    }

    .telegram-new-hero h1 {
        font-size:clamp(52px,14vw,70px);
        line-height:.88;
    }

    .telegram-new-hero-copy > p {
        font-size:16px;
    }

    .telegram-new-actions {
        display:grid;
    }

    .telegram-new-actions .sx-btn {
        width:100%;
        justify-content:space-between;
    }

    .telegram-new-hero-grid {
        grid-template-columns:1fr;
        margin-top:48px;
    }

    .telegram-new-card-large {
        grid-column:auto;
        min-height:390px;
    }

    .telegram-new-notifications,
    .telegram-new-more,
    .telegram-new-steps {
        padding:84px 0;
    }

    .telegram-new-miniapp-section,
    .telegram-new-flow,
    .telegram-new-platform {
        padding:20px 0 84px;
    }

    .telegram-new-section-head {
        text-align:left;
    }

    .telegram-new-section-head h2 {
        font-size:46px;
    }

    .telegram-new-section-head p {
        margin-left:0;
        font-size:15px;
    }

    .telegram-new-notification-grid,
    .telegram-new-more-grid,
    .telegram-new-steps-grid {
        grid-template-columns:1fr;
    }

    .telegram-new-miniapp-shell,
    .telegram-new-flow-shell,
    .telegram-new-platform-shell {
        padding:28px 18px;
        border-radius:28px;
        gap:40px;
    }

    .telegram-new-miniapp-copy h2,
    .telegram-new-flow-copy h2,
    .telegram-new-platform-copy h2 {
        font-size:48px;
    }

    .telegram-new-phone {
        width:100%;
    }

    .telegram-new-flow-visual {
        grid-template-columns:1fr;
    }

    .telegram-new-flow-line {
        width:2px;
        height:36px;
        margin:0 auto;
    }

    .telegram-new-flow-line i {
        width:100%;
        height:40%;
        top:-40%;
        left:0;

        background:linear-gradient(180deg,transparent,#42d6a0,#8f80ff,transparent);

        animation:telegramNewFlowMobile 3s linear infinite;
    }

    @keyframes telegramNewFlowMobile {
        to { transform:translate3d(0,360%,0); }
    }

    .telegram-new-flow-step {
        min-height:170px;
    }

    .telegram-new-flow-step strong {
        margin-top:45px;
    }

    .telegram-new-platform-grid {
        grid-template-columns:1fr;
    }

    .telegram-new-platform-grid article {
        min-height:220px;
    }

    .telegram-new-final {
        padding-bottom:48px;
    }

    .telegram-new-final-shell {
        min-height:430px;
        padding:28px 22px;

        flex-direction:column;
        align-items:flex-start;
        justify-content:space-between;

        border-radius:28px;
    }

    .telegram-new-final-shell h2 {
        font-size:56px;
    }

    .telegram-new-final-button {
        width:100%;
        justify-content:space-between;
    }
}

@media(prefers-reduced-motion: reduce) {
    .telegram-new-motion .telegram-new-reveal {
        opacity:1 !important;
        transform:none !important;
        transition:none !important;
    }

    .telegram-new-phone-bars i,
    .telegram-new-flow-line i {
        animation:none !important;
        transform:none !important;
    }
}

/* =========================================================
   V21 — INTEGRATIONS REDESIGN
   Same Sellnex master language as homepage / features / Telegram.
========================================================= */

.integrations-new {
    background:#050a0a;
    color:#f4f6f5;
}

.integrations-new-kicker {
    color:#77827e;
    font-size:11px;
    font-weight:760;
    letter-spacing:.18em;
    text-transform:uppercase;
}

/* HERO */

.integrations-new-hero {
    position:relative;
    overflow:hidden;
    padding:108px 0 88px;

    background:
        radial-gradient(circle at 12% 38%,rgba(39,189,134,.14),transparent 34%),
        radial-gradient(circle at 78% 18%,rgba(92,82,255,.18),transparent 32%),
        linear-gradient(135deg,#050a0a 0%,#071110 42%,#08131a 100%);
}

.integrations-new-hero::before {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;

    background:
        radial-gradient(circle at 18% 55%,rgba(41,214,154,.08),transparent 30%),
        radial-gradient(circle at 68% 30%,rgba(92,82,255,.10),transparent 28%),
        radial-gradient(circle at 88% 12%,rgba(125,109,255,.08),transparent 22%);
}

.integrations-new-hero::after {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.34;

    background:
        linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px),
        linear-gradient(180deg,rgba(255,255,255,.022) 1px,transparent 1px);

    background-size:72px 72px;

    -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.88),rgba(0,0,0,.48) 58%,transparent 100%);
    mask-image:linear-gradient(to bottom,rgba(0,0,0,.88),rgba(0,0,0,.48) 58%,transparent 100%);
}

.integrations-new-hero > .container {
    position:relative;
    z-index:2;
}

.integrations-new-hero-copy {
    max-width:1040px;
}

.integrations-new-hero h1 {
    max-width:1120px;
    margin:22px 0 0;

    color:#f4f6f5;
    font-size:clamp(70px,8vw,122px);
    line-height:.86;
    letter-spacing:-.074em;
    font-weight:440;
}

.integrations-new-hero h1 span {
    background:linear-gradient(90deg,#f5f6f5 0%,#a8a1ff 48%,#65d7aa 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.integrations-new-hero-copy > p {
    max-width:760px;
    margin:32px 0 0;

    color:#96a09c;
    font-size:18px;
    line-height:1.62;
}

.integrations-new-actions {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:34px;
}

.integrations-new-hero-grid {
    margin-top:72px;

    display:grid;
    grid-template-columns:1.45fr .775fr .775fr;
    gap:14px;
}

.integrations-new-card {
    min-height:350px;
    padding:26px;

    display:flex;
    flex-direction:column;

    overflow:hidden;
    border-radius:27px;

    background:
        radial-gradient(circle at 86% 5%,rgba(116,91,255,.13),transparent 30%),
        radial-gradient(circle at 12% 18%,rgba(46,201,145,.08),transparent 26%),
        linear-gradient(150deg,#111917,#0d1514);

    border:1px solid rgba(255,255,255,.065);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03),
        0 26px 70px rgba(0,0,0,.16);

    transition:
        transform .28s cubic-bezier(.2,.7,.2,1),
        border-color .28s ease;
}

.integrations-new-card-large {
    min-height:430px;
}

.integrations-new-card-top {
    display:flex;
    justify-content:space-between;
    gap:18px;
}

.integrations-new-card-top > div {
    display:grid;
}

.integrations-new-card-top small {
    color:#707b77;
    font-size:9px;
}

.integrations-new-card-top strong {
    margin-top:5px;
    color:#eef1ef;
    font-size:17px;
}

.integrations-new-live,
.integrations-new-pill {
    min-height:32px;
    padding:0 11px;
    border-radius:999px;

    display:inline-flex;
    align-items:center;
    gap:7px;

    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.06);

    color:#9ea8a4;
    font-size:9px;
    font-weight:700;
}

.integrations-new-live i {
    width:7px;
    height:7px;
    border-radius:50%;
    background:#42d6a0;
    box-shadow:0 0 12px rgba(66,214,160,.42);
}

.integrations-new-pill-purple {
    background:rgba(125,109,255,.11);
    border-color:rgba(125,109,255,.14);
    color:#c5bcff;
}

.integrations-new-network {
    position:relative;
    min-height:330px;
    margin-top:18px;
}

.integrations-new-node {
    position:absolute;
    z-index:2;

    min-width:132px;
    padding:13px;

    border-radius:16px;

    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.055);

    box-shadow:0 12px 28px rgba(0,0,0,.14);
}

.integrations-new-node > span {
    width:34px;
    height:34px;
    border-radius:11px;

    display:grid;
    place-items:center;

    background:#101716;
    border:1px solid rgba(255,255,255,.055);

    font-size:10px;
    font-weight:800;
}

.integrations-new-node strong,
.integrations-new-node small {
    display:block;
}

.integrations-new-node strong {
    margin-top:10px;
    font-size:11px;
}

.integrations-new-node small {
    margin-top:4px;
    color:#6e7975;
    font-size:8px;
}

.integrations-new-node-center {
    left:50%;
    top:50%;

    min-width:160px;

    transform:translate(-50%,-50%);

    background:
        radial-gradient(circle at 85% 5%,rgba(125,109,255,.16),transparent 40%),
        rgba(255,255,255,.06);

    border-color:rgba(125,109,255,.14);
}

.integrations-new-node-center > span {
    background:linear-gradient(135deg,#7365ff,#978bff);
}

.integrations-new-node-a {
    left:3%;
    top:4%;
}

.integrations-new-node-b {
    right:3%;
    top:4%;
}

.integrations-new-node-c {
    left:3%;
    bottom:2%;
}

.integrations-new-node-d {
    right:3%;
    bottom:2%;
}

.integrations-new-network-lines {
    position:absolute;
    inset:0;
    z-index:1;

    width:100%;
    height:100%;
}

.integrations-new-network-lines path {
    fill:none;
    stroke:rgba(255,255,255,.11);
    stroke-width:2;

    stroke-dasharray:8 9;

    animation:integrationsNewDash 18s linear infinite;
}

@keyframes integrationsNewDash {
    to { stroke-dashoffset:-180; }
}

.integrations-new-status {
    margin-top:58px;
    padding:16px;

    display:flex;
    align-items:center;
    gap:12px;

    border-radius:18px;

    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.055);
}

.integrations-new-status-icon {
    width:42px;
    height:42px;
    border-radius:13px;

    display:grid;
    place-items:center;

    background:rgba(125,109,255,.10);
    color:#b5aaff;

    font-weight:800;
}

.integrations-new-status-icon-green {
    background:rgba(66,214,160,.08);
    color:#79dfb7;
}

.integrations-new-status > div {
    display:grid;
}

.integrations-new-status strong {
    font-size:12px;
}

.integrations-new-status small {
    margin-top:5px;
    color:#747f7b;
    font-size:9px;
}

.integrations-new-card > a {
    margin-top:auto;
    padding-top:24px;

    display:flex;
    justify-content:space-between;

    color:#d9dddb;
    font-size:11px;
    font-weight:650;
}

/* COMMON */

.integrations-new-current,
.integrations-new-workflow,
.integrations-new-modular,
.integrations-new-final {
    background:#050a0a;
}

.integrations-new-current {
    padding:120px 0;
}

.integrations-new-section-head {
    max-width:900px;
    margin:0 auto;
    text-align:center;
}

.integrations-new-section-head-left {
    margin:0;
    text-align:left;
}

.integrations-new-section-head h2 {
    margin:17px 0 0;

    color:#f4f6f5;
    font-size:clamp(52px,6.8vw,92px);
    line-height:.94;
    letter-spacing:-.062em;
    font-weight:445;
}

.integrations-new-section-head p {
    max-width:720px;
    margin:28px auto 0;

    color:#8f9995;
    font-size:17px;
    line-height:1.62;
}

.integrations-new-section-head-left p {
    margin-left:0;
}

/* CURRENT */

.integrations-new-current-grid {
    margin-top:62px;

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
}

.integrations-new-integration-card {
    min-height:390px;
    padding:26px;

    display:flex;
    flex-direction:column;

    border-radius:28px;

    background:
        linear-gradient(180deg,rgba(255,255,255,.047),rgba(255,255,255,.022));

    border:1px solid rgba(255,255,255,.06);

    transition:
        transform .26s ease,
        border-color .26s ease;
}

.integrations-new-index {
    color:#5e6965;
    font-size:10px;
    font-weight:700;
}

.integrations-new-brand-icon {
    width:50px;
    height:50px;
    margin-top:34px;

    border-radius:15px;

    display:grid;
    place-items:center;

    background:rgba(125,109,255,.10);
    border:1px solid rgba(125,109,255,.12);

    color:#b3a8ff;
    font-size:13px;
    font-weight:800;
}

.integrations-new-integration-card h3 {
    margin:22px 0 0;

    font-size:31px;
    line-height:1;
    letter-spacing:-.045em;
    font-weight:500;
}

.integrations-new-integration-card > p {
    margin:16px 0 0;

    color:#818c88;
    font-size:13px;
    line-height:1.55;
}

.integrations-new-chip-row {
    margin-top:auto;

    display:flex;
    flex-wrap:wrap;
    gap:7px;
}

.integrations-new-chip-row span {
    min-height:34px;
    padding:0 11px;

    border-radius:999px;

    display:inline-flex;
    align-items:center;

    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.045);

    color:#7f8985;
    font-size:8px;
    font-weight:650;
}

/* CENTRAL LAYER */

.integrations-new-layer {
    padding:20px 0 120px;
    background:#050a0a;
}

.integrations-new-layer-shell {
    padding:62px;

    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:68px;
    align-items:center;

    border-radius:38px;

    background:
        radial-gradient(circle at 88% 10%,rgba(114,91,255,.13),transparent 28%),
        radial-gradient(circle at 8% 90%,rgba(53,205,151,.06),transparent 30%),
        linear-gradient(145deg,#081311,#0b1014);

    border:1px solid rgba(255,255,255,.06);
}

.integrations-new-layer-copy h2 {
    margin:18px 0 0;

    font-size:clamp(54px,5.5vw,82px);
    line-height:.95;
    letter-spacing:-.058em;
    font-weight:445;
}

.integrations-new-layer-copy > p {
    margin:25px 0 0;

    color:#8a9591;
    font-size:16px;
    line-height:1.62;
}

.integrations-new-checks {
    margin-top:30px;
    display:grid;
    gap:12px;
}

.integrations-new-checks span {
    padding-bottom:12px;

    border-bottom:1px solid rgba(255,255,255,.065);

    color:#c8cecb;
    font-size:12px;
}

.integrations-new-checks span::before {
    content:"✓";
    margin-right:10px;
    color:#76dfb7;
}

.integrations-new-layer-visual {
    padding:18px;

    border-radius:30px;

    background:
        linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035));

    border:1px solid rgba(255,255,255,.09);

    box-shadow:
        0 28px 80px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.08);
}

.integrations-new-layer-top {
    min-height:54px;
    padding:0 5px 14px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    border-bottom:1px solid rgba(255,255,255,.065);
}

.integrations-new-layer-brand {
    display:flex;
    align-items:center;
    gap:11px;
}

.integrations-new-layer-brand > span {
    width:38px;
    height:38px;
    border-radius:13px;

    display:grid;
    place-items:center;

    background:#111817;
    border:1px solid rgba(255,255,255,.065);

    font-weight:800;
}

.integrations-new-layer-brand > div {
    display:grid;
}

.integrations-new-layer-brand strong {
    font-size:12px;
}

.integrations-new-layer-brand small {
    margin-top:3px;
    color:#6f7a76;
    font-size:8px;
}

.integrations-new-layer-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    padding-top:13px;
}

.integrations-new-layer-grid > div {
    min-height:150px;
    padding:18px;

    display:flex;
    flex-direction:column;
    justify-content:flex-end;

    border-radius:19px;

    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.05);
}

.integrations-new-layer-grid small,
.integrations-new-layer-grid strong,
.integrations-new-layer-grid span {
    display:block;
}

.integrations-new-layer-grid small {
    color:#717c78;
    font-size:8px;
}

.integrations-new-layer-grid strong {
    margin-top:8px;
    font-size:20px;
}

.integrations-new-layer-grid span {
    margin-top:6px;
    color:#7a8581;
    font-size:9px;
}

/* ACTION */

.integrations-new-action {
    padding:120px 0;
    background:
        radial-gradient(circle at 12% 88%,rgba(92,67,255,.38),transparent 38%),
        radial-gradient(circle at 90% 15%,rgba(119,99,255,.14),transparent 35%),
        linear-gradient(140deg,#0b0b14,#11101c 55%,#1d1239);
}

.integrations-new-action-shell {
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:62px;
    align-items:center;
}

.integrations-new-action-copy h2 {
    margin:18px 0 0;

    font-size:clamp(54px,5.6vw,82px);
    line-height:.95;
    letter-spacing:-.058em;
    font-weight:445;
}

.integrations-new-action-copy p {
    margin:25px 0 0;

    color:#a5a3af;
    font-size:16px;
    line-height:1.62;
}

.integrations-new-action-flow {
    display:grid;
    grid-template-columns:1fr 56px 1fr 56px 1fr;
    gap:10px;
    align-items:center;
}

.integrations-new-action-flow article {
    min-height:220px;
    padding:20px;

    border-radius:23px;

    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.065);
}

.integrations-new-action-flow article.featured {
    background:
        radial-gradient(circle at 86% 5%,rgba(125,109,255,.15),transparent 34%),
        rgba(255,255,255,.05);

    border-color:rgba(125,109,255,.16);
}

.integrations-new-action-flow article > span {
    color:#626c68;
    font-size:9px;
    font-weight:700;
}

.integrations-new-action-flow strong,
.integrations-new-action-flow small {
    display:block;
}

.integrations-new-action-flow strong {
    margin-top:80px;
    font-size:20px;
}

.integrations-new-action-flow small {
    margin-top:6px;

    color:#7c8682;
    font-size:9px;
    line-height:1.45;
}

.integrations-new-action-line {
    position:relative;
    height:2px;

    overflow:hidden;
    border-radius:999px;

    background:rgba(255,255,255,.08);
}

.integrations-new-action-line i {
    position:absolute;
    top:0;
    left:-40%;

    width:40%;
    height:100%;

    background:linear-gradient(90deg,transparent,#42d6a0,#8f80ff,transparent);

    animation:integrationsNewFlow 3.4s linear infinite;
}

.integrations-new-action-line:nth-of-type(4) i {
    animation-delay:.6s;
}

@keyframes integrationsNewFlow {
    to { transform:translate3d(360%,0,0); }
}

/* WORKFLOW */

.integrations-new-workflow {
    padding:120px 0;
}

.integrations-new-workflow-grid {
    margin-top:58px;

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
}

.integrations-new-workflow-grid article {
    min-height:310px;
    padding:24px;

    border-radius:26px;

    background:
        linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.022));

    border:1px solid rgba(255,255,255,.06);

    transition:
        transform .26s ease,
        border-color .26s ease;
}

.integrations-new-workflow-grid article.featured {
    background:
        radial-gradient(circle at 85% 5%,rgba(125,109,255,.15),transparent 34%),
        rgba(255,255,255,.04);

    border-color:rgba(125,109,255,.15);
}

.integrations-new-workflow-grid article > span {
    color:#606b67;
    font-size:10px;
    font-weight:700;
}

.integrations-new-workflow-icon {
    width:48px;
    height:48px;
    margin-top:42px;

    border-radius:15px;

    display:grid;
    place-items:center;

    background:rgba(255,255,255,.055);
    border:1px solid rgba(255,255,255,.055);

    font-weight:800;
}

.integrations-new-workflow-grid article.featured .integrations-new-workflow-icon {
    background:linear-gradient(135deg,#7365ff,#978bff);
    box-shadow:0 12px 28px rgba(105,88,255,.22);
}

.integrations-new-workflow-grid h3 {
    margin:20px 0 0;

    font-size:24px;
    letter-spacing:-.035em;
}

.integrations-new-workflow-grid p {
    margin:10px 0 0;

    color:#7f8a86;
    font-size:12px;
    line-height:1.5;
}

/* MODULAR */

.integrations-new-modular {
    padding:20px 0 120px;
}

.integrations-new-modular-shell {
    padding:58px;

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;

    border-radius:38px;

    background:
        radial-gradient(circle at 88% 8%,rgba(112,91,255,.10),transparent 28%),
        linear-gradient(145deg,#081311,#0b1014);

    border:1px solid rgba(255,255,255,.06);
}

.integrations-new-modular-copy h2 {
    margin:18px 0 0;

    font-size:clamp(52px,5vw,76px);
    line-height:.96;
    letter-spacing:-.058em;
    font-weight:445;
}

.integrations-new-modular-copy p {
    margin:24px 0 0;

    color:#89948f;
    font-size:15px;
    line-height:1.62;
}

.integrations-new-modular-grid {
    display:grid;
    gap:12px;
}

.integrations-new-modular-grid article {
    min-height:150px;
    padding:22px;

    border-radius:22px;

    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.055);

    transition:
        transform .26s ease,
        border-color .26s ease;
}

.integrations-new-modular-grid small {
    color:#66716d;
    font-size:9px;
    font-weight:700;
    text-transform:uppercase;
}

.integrations-new-modular-grid h3 {
    margin:9px 0 0;
    font-size:23px;
    letter-spacing:-.035em;
}

.integrations-new-modular-grid p {
    margin:10px 0 0;

    color:#818c88;
    font-size:12px;
    line-height:1.5;
}

/* FINAL */

.integrations-new-final {
    padding:0 0 96px;
}

.integrations-new-final-shell {
    min-height:390px;
    padding:52px;

    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:40px;

    border-radius:38px;

    background:
        radial-gradient(circle at 12% 10%,rgba(53,205,151,.09),transparent 28%),
        radial-gradient(circle at 88% 88%,rgba(112,91,255,.16),transparent 34%),
        linear-gradient(140deg,#0a1010,#0a0d15);

    border:1px solid rgba(255,255,255,.07);

    box-shadow:
        0 30px 90px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.035);
}

.integrations-new-final-shell h2 {
    max-width:950px;
    margin:18px 0 0;

    font-size:clamp(58px,7vw,100px);
    line-height:.91;
    letter-spacing:-.067em;
    font-weight:445;
}

.integrations-new-final-shell p {
    margin:22px 0 0;
    color:#89948f;
    font-size:15px;
}

.integrations-new-final-button {
    min-height:58px;
    padding:0 18px 0 22px;

    flex-shrink:0;

    display:inline-flex;
    align-items:center;
    gap:22px;

    border-radius:999px;

    background:#f4f6f5;
    color:#101514;

    font-size:13px;
    font-weight:700;

    transition:transform .2s ease;
}

.integrations-new-final-button span {
    width:34px;
    height:34px;
    border-radius:50%;

    display:grid;
    place-items:center;

    background:#101514;
    color:#fff;
}

/* MOTION */

.integrations-new-motion .integrations-new-reveal {
    opacity:0;
    transform:translate3d(0,22px,0);

    transition:
        opacity .72s cubic-bezier(.2,.7,.2,1),
        transform .72s cubic-bezier(.2,.7,.2,1);

    transition-delay:var(--ig-delay,0ms);
}

.integrations-new-motion .integrations-new-reveal.is-visible {
    opacity:1;
    transform:translate3d(0,0,0);
}

@media (hover:hover) and (pointer:fine) {
    .integrations-new-card:hover,
    .integrations-new-integration-card:hover,
    .integrations-new-workflow-grid article:hover,
    .integrations-new-modular-grid article:hover {
        transform:translate3d(0,-5px,0);
        border-color:rgba(255,255,255,.11);
    }

    .integrations-new-final-button:hover {
        transform:translate3d(0,-2px,0);
    }
}

/* RESPONSIVE */

@media(max-width:1100px) {
    .integrations-new-hero-grid {
        grid-template-columns:1fr 1fr;
    }

    .integrations-new-card-large {
        grid-column:1 / -1;
    }

    .integrations-new-current-grid,
    .integrations-new-workflow-grid {
        grid-template-columns:1fr 1fr;
    }

    .integrations-new-layer-shell,
    .integrations-new-action-shell,
    .integrations-new-modular-shell {
        grid-template-columns:1fr;
    }
}

@media(max-width:720px) {
    .integrations-new-hero {
        padding:72px 0 66px;
    }

    .integrations-new-hero h1 {
        font-size:clamp(52px,14vw,70px);
        line-height:.88;
    }

    .integrations-new-hero-copy > p {
        font-size:16px;
    }

    .integrations-new-actions {
        display:grid;
    }

    .integrations-new-actions .sx-btn {
        width:100%;
        justify-content:space-between;
    }

    .integrations-new-hero-grid {
        grid-template-columns:1fr;
        margin-top:48px;
    }

    .integrations-new-card-large {
        grid-column:auto;
        min-height:430px;
    }

    .integrations-new-network {
        min-height:350px;
    }

    .integrations-new-node {
        min-width:112px;
        padding:10px;
    }

    .integrations-new-node-a,
    .integrations-new-node-c {
        left:0;
    }

    .integrations-new-node-b,
    .integrations-new-node-d {
        right:0;
    }

    .integrations-new-current,
    .integrations-new-workflow,
    .integrations-new-action {
        padding:84px 0;
    }

    .integrations-new-layer,
    .integrations-new-modular {
        padding:20px 0 84px;
    }

    .integrations-new-section-head {
        text-align:left;
    }

    .integrations-new-section-head h2 {
        font-size:46px;
    }

    .integrations-new-section-head p {
        margin-left:0;
        font-size:15px;
    }

    .integrations-new-current-grid,
    .integrations-new-workflow-grid {
        grid-template-columns:1fr;
    }

    .integrations-new-layer-shell,
    .integrations-new-modular-shell {
        padding:28px 18px;
        border-radius:28px;
        gap:40px;
    }

    .integrations-new-layer-copy h2,
    .integrations-new-modular-copy h2,
    .integrations-new-action-copy h2 {
        font-size:48px;
    }

    .integrations-new-action-shell {
        gap:40px;
    }

    .integrations-new-action-flow {
        grid-template-columns:1fr;
    }

    .integrations-new-action-line {
        width:2px;
        height:36px;
        margin:0 auto;
    }

    .integrations-new-action-line i {
        width:100%;
        height:40%;
        top:-40%;
        left:0;

        background:linear-gradient(180deg,transparent,#42d6a0,#8f80ff,transparent);

        animation:integrationsNewFlowMobile 3s linear infinite;
    }

    @keyframes integrationsNewFlowMobile {
        to { transform:translate3d(0,360%,0); }
    }

    .integrations-new-action-flow article {
        min-height:170px;
    }

    .integrations-new-action-flow strong {
        margin-top:45px;
    }

    .integrations-new-final {
        padding-bottom:48px;
    }

    .integrations-new-final-shell {
        min-height:430px;
        padding:28px 22px;

        flex-direction:column;
        align-items:flex-start;
        justify-content:space-between;

        border-radius:28px;
    }

    .integrations-new-final-shell h2 {
        font-size:56px;
    }

    .integrations-new-final-button {
        width:100%;
        justify-content:space-between;
    }
}

@media(prefers-reduced-motion: reduce) {
    .integrations-new-motion .integrations-new-reveal {
        opacity:1 !important;
        transform:none !important;
        transition:none !important;
    }

    .integrations-new-network-lines path,
    .integrations-new-action-line i {
        animation:none !important;
    }
}

/* =========================================================
   V22 — PRICING REDESIGN
   Same Sellnex master language as homepage / features / Telegram / integrations.
========================================================= */

.pricing-new {
    background:#050a0a;
    color:#f4f6f5;
}

.pricing-new-kicker {
    color:#77827e;
    font-size:11px;
    font-weight:760;
    letter-spacing:.18em;
    text-transform:uppercase;
}

/* HERO */

.pricing-new-hero {
    position:relative;
    overflow:hidden;
    padding:108px 0 88px;

    background:
        radial-gradient(circle at 12% 38%,rgba(39,189,134,.14),transparent 34%),
        radial-gradient(circle at 78% 18%,rgba(92,82,255,.18),transparent 32%),
        linear-gradient(135deg,#050a0a 0%,#071110 42%,#08131a 100%);
}

.pricing-new-hero::before {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;

    background:
        radial-gradient(circle at 18% 55%,rgba(41,214,154,.08),transparent 30%),
        radial-gradient(circle at 68% 30%,rgba(92,82,255,.10),transparent 28%),
        radial-gradient(circle at 88% 12%,rgba(125,109,255,.08),transparent 22%);
}

.pricing-new-hero::after {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.34;

    background:
        linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px),
        linear-gradient(180deg,rgba(255,255,255,.022) 1px,transparent 1px);

    background-size:72px 72px;

    -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.88),rgba(0,0,0,.48) 58%,transparent 100%);
    mask-image:linear-gradient(to bottom,rgba(0,0,0,.88),rgba(0,0,0,.48) 58%,transparent 100%);
}

.pricing-new-hero > .container {
    position:relative;
    z-index:2;
}

.pricing-new-hero-copy {
    max-width:1080px;
}

.pricing-new-hero h1 {
    max-width:1120px;
    margin:22px 0 0;

    color:#f4f6f5;
    font-size:clamp(70px,8vw,122px);
    line-height:.86;
    letter-spacing:-.074em;
    font-weight:440;
}

.pricing-new-hero h1 span {
    background:linear-gradient(90deg,#f5f6f5 0%,#a8a1ff 48%,#65d7aa 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.pricing-new-hero-copy > p {
    max-width:760px;
    margin:32px 0 0;

    color:#96a09c;
    font-size:18px;
    line-height:1.62;
}

.pricing-new-actions {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:34px;
}

.pricing-new-hero-grid {
    margin-top:72px;

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
}

.pricing-new-hero-card {
    min-height:350px;
    padding:26px;

    display:flex;
    flex-direction:column;

    border-radius:27px;

    background:
        radial-gradient(circle at 86% 5%,rgba(116,91,255,.10),transparent 30%),
        linear-gradient(150deg,#111917,#0d1514);

    border:1px solid rgba(255,255,255,.065);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03),
        0 26px 70px rgba(0,0,0,.16);

    transition:
        transform .28s cubic-bezier(.2,.7,.2,1),
        border-color .28s ease;
}

.pricing-new-hero-card-featured {
    background:
        radial-gradient(circle at 84% 4%,rgba(145,128,255,.20),transparent 30%),
        linear-gradient(150deg,#17142d,#0f1217);

    border-color:rgba(125,109,255,.18);
}

.pricing-new-plan-top {
    display:flex;
    justify-content:space-between;
    gap:18px;
}

.pricing-new-plan-top > div {
    display:grid;
}

.pricing-new-plan-top small {
    color:#717c78;
    font-size:9px;
    font-weight:700;
    text-transform:uppercase;
}

.pricing-new-plan-top strong {
    margin-top:6px;
    font-size:16px;
}

.pricing-new-plan-pill {
    min-height:32px;
    padding:0 11px;

    display:inline-flex;
    align-items:center;

    border-radius:999px;

    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.06);

    color:#9da7a3;
    font-size:8px;
    font-weight:700;
}

.pricing-new-plan-pill-purple {
    background:rgba(125,109,255,.12);
    border-color:rgba(125,109,255,.15);
    color:#c6bdff;
}

.pricing-new-plan-price {
    margin-top:50px;
}

.pricing-new-plan-price small,
.pricing-new-plan-price strong,
.pricing-new-plan-price span {
    display:block;
}

.pricing-new-plan-price small {
    color:#6f7a76;
    font-size:8px;
    text-transform:uppercase;
}

.pricing-new-plan-price strong {
    margin-top:8px;

    font-size:58px;
    line-height:1;
    letter-spacing:-.06em;
}

.pricing-new-plan-price span {
    margin-top:6px;
    color:#737e7a;
    font-size:9px;
}

.pricing-new-plan-list {
    margin-top:auto;

    display:grid;
    gap:9px;
}

.pricing-new-plan-list span {
    padding-top:9px;
    border-top:1px solid rgba(255,255,255,.055);

    color:#8b9692;
    font-size:10px;
}

/* COMMON */

.pricing-new-plans,
.pricing-new-compare,
.pricing-new-flex,
.pricing-new-faq,
.pricing-new-final {
    background:#050a0a;
}

.pricing-new-plans {
    padding:120px 0;
}

.pricing-new-section-head {
    max-width:900px;
    margin:0 auto;
    text-align:center;
}

.pricing-new-section-head-left {
    margin:0;
    text-align:left;
}

.pricing-new-section-head h2 {
    margin:17px 0 0;

    color:#f4f6f5;
    font-size:clamp(52px,6.8vw,92px);
    line-height:.94;
    letter-spacing:-.062em;
    font-weight:445;
}

.pricing-new-section-head p {
    max-width:720px;
    margin:28px auto 0;

    color:#8f9995;
    font-size:17px;
    line-height:1.62;
}

.pricing-new-section-head-left p {
    margin-left:0;
}

/* PLAN CARDS */

.pricing-new-grid {
    margin-top:62px;

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
}

.pricing-new-card {
    position:relative;
    min-height:640px;
    padding:28px;

    display:flex;
    flex-direction:column;

    border-radius:30px;

    background:
        linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.023));

    border:1px solid rgba(255,255,255,.065);

    transition:
        transform .26s ease,
        border-color .26s ease;
}

.pricing-new-card-featured {
    background:
        radial-gradient(circle at 85% 8%,rgba(125,109,255,.17),transparent 30%),
        linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));

    border-color:rgba(125,109,255,.17);
}

.pricing-new-card-badge {
    position:absolute;
    top:18px;
    right:18px;

    min-height:32px;
    padding:0 11px;

    display:inline-flex;
    align-items:center;

    border-radius:999px;

    background:rgba(125,109,255,.12);
    border:1px solid rgba(125,109,255,.15);

    color:#c6bdff;
    font-size:8px;
    font-weight:700;
}

.pricing-new-card-head {
    display:flex;
    justify-content:space-between;
    gap:18px;
}

.pricing-new-card-head > div {
    max-width:78%;
}

.pricing-new-card-head small {
    color:#68736f;
    font-size:9px;
    font-weight:700;
    text-transform:uppercase;
}

.pricing-new-card-head h3 {
    margin:12px 0 0;

    font-size:38px;
    line-height:.96;
    letter-spacing:-.05em;
    font-weight:480;
}

.pricing-new-card-head > span {
    align-self:flex-start;

    min-height:32px;
    padding:0 11px;

    display:inline-flex;
    align-items:center;

    border-radius:999px;

    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.055);

    color:#8b9692;
    font-size:8px;
    font-weight:700;
}

.pricing-new-card > p {
    margin:20px 0 0;

    color:#818c88;
    font-size:13px;
    line-height:1.58;
}

.pricing-new-price {
    margin-top:28px;
    padding:22px 0;

    border-top:1px solid rgba(255,255,255,.065);
    border-bottom:1px solid rgba(255,255,255,.065);
}

.pricing-new-price > small {
    color:#66716d;
    font-size:8px;
    font-weight:700;
    text-transform:uppercase;
}

.pricing-new-price > div {
    margin-top:8px;

    display:flex;
    align-items:flex-end;
    gap:8px;
}

.pricing-new-price strong {
    font-size:54px;
    line-height:1;
    letter-spacing:-.06em;
}

.pricing-new-price span {
    padding-bottom:7px;

    color:#717c78;
    font-size:9px;
}

.pricing-new-features {
    margin-top:24px;

    display:grid;
    gap:11px;
}

.pricing-new-features span {
    color:#c3c9c6;
    font-size:11px;
    font-weight:600;
}

.pricing-new-features span::before {
    content:"✓";
    margin-right:9px;
    color:#76dfb7;
}

.pricing-new-card > a {
    min-height:54px;
    margin-top:auto;
    padding:0 17px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    border-radius:999px;

    background:rgba(255,255,255,.055);
    border:1px solid rgba(255,255,255,.07);

    color:#f0f2f1;
    font-size:12px;
    font-weight:700;

    transition:
        transform .2s ease,
        background .2s ease;
}

.pricing-new-card-featured > a {
    background:#f4f6f5;
    color:#101514;
}

/* PRINCIPLE */

.pricing-new-principle {
    padding:20px 0 120px;
    background:#050a0a;
}

.pricing-new-principle-shell {
    padding:60px;

    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:62px;
    align-items:center;

    border-radius:38px;

    background:
        radial-gradient(circle at 88% 10%,rgba(114,91,255,.13),transparent 28%),
        radial-gradient(circle at 8% 90%,rgba(53,205,151,.06),transparent 30%),
        linear-gradient(145deg,#081311,#0b1014);

    border:1px solid rgba(255,255,255,.06);
}

.pricing-new-principle-copy h2 {
    margin:18px 0 0;

    font-size:clamp(54px,5.5vw,82px);
    line-height:.95;
    letter-spacing:-.058em;
    font-weight:445;
}

.pricing-new-principle-copy p {
    margin:25px 0 0;

    color:#89948f;
    font-size:16px;
    line-height:1.62;
}

.pricing-new-principle-cards {
    display:grid;
    gap:12px;
}

.pricing-new-principle-cards article {
    min-height:145px;
    padding:22px;

    border-radius:22px;

    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.055);
}

.pricing-new-principle-cards article.featured {
    background:
        radial-gradient(circle at 85% 10%,rgba(125,109,255,.13),transparent 35%),
        rgba(255,255,255,.045);

    border-color:rgba(125,109,255,.14);
}

.pricing-new-principle-cards small,
.pricing-new-principle-cards strong,
.pricing-new-principle-cards span {
    display:block;
}

.pricing-new-principle-cards small {
    color:#66716d;
    font-size:8px;
    font-weight:700;
    text-transform:uppercase;
}

.pricing-new-principle-cards strong {
    margin-top:9px;
    font-size:24px;
}

.pricing-new-principle-cards span {
    margin-top:7px;
    color:#7d8783;
    font-size:10px;
}

/* TABLE */

.pricing-new-compare {
    padding:120px 0;
}

.pricing-new-table-wrap {
    margin-top:58px;

    overflow-x:auto;

    border-radius:30px;

    background:
        linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.022));

    border:1px solid rgba(255,255,255,.065);

    -webkit-overflow-scrolling:touch;
}

.pricing-new-table {
    min-width:780px;
}

.pricing-new-row {
    min-height:66px;
    padding:0 24px;

    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    align-items:center;

    border-bottom:1px solid rgba(255,255,255,.055);

    color:#89938f;
    font-size:10px;
    font-weight:650;
}

.pricing-new-row:last-child {
    border-bottom:0;
}

.pricing-new-row > div:not(:first-child) {
    text-align:center;
}

.pricing-new-row-head {
    min-height:76px;

    background:rgba(255,255,255,.045);

    color:#eef1ef;
    font-size:10px;
    font-weight:800;
}

/* FLEX */

.pricing-new-flex {
    padding:20px 0 120px;
}

.pricing-new-flex-shell {
    padding:58px;

    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:60px;

    border-radius:38px;

    background:
        radial-gradient(circle at 88% 8%,rgba(112,91,255,.10),transparent 28%),
        linear-gradient(145deg,#081311,#0b1014);

    border:1px solid rgba(255,255,255,.06);
}

.pricing-new-flex-copy h2 {
    margin:18px 0 0;

    font-size:clamp(52px,5vw,76px);
    line-height:.96;
    letter-spacing:-.058em;
    font-weight:445;
}

.pricing-new-flex-copy p {
    margin:24px 0 0;

    color:#89948f;
    font-size:15px;
    line-height:1.62;
}

.pricing-new-flex-grid {
    display:grid;
    gap:12px;
}

.pricing-new-flex-grid article {
    min-height:150px;
    padding:22px;

    border-radius:22px;

    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.055);

    transition:
        transform .26s ease,
        border-color .26s ease;
}

.pricing-new-flex-icon {
    width:42px;
    height:42px;

    display:grid;
    place-items:center;

    border-radius:13px;

    background:rgba(125,109,255,.10);
    border:1px solid rgba(125,109,255,.12);

    color:#b4a9ff;
    font-weight:800;
}

.pricing-new-flex-grid small {
    display:block;
    margin-top:18px;

    color:#66716d;
    font-size:8px;
    font-weight:700;
    text-transform:uppercase;
}

.pricing-new-flex-grid h3 {
    margin:8px 0 0;

    font-size:23px;
    letter-spacing:-.035em;
}

.pricing-new-flex-grid p {
    margin:10px 0 0;

    color:#818c88;
    font-size:12px;
    line-height:1.5;
}

/* FAQ */

.pricing-new-faq {
    padding:120px 0;
}

.pricing-new-faq-grid {
    max-width:980px;
    margin:58px auto 0;

    display:grid;
    gap:9px;
}

.pricing-new-faq-item {
    border-radius:22px;

    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.055);

    overflow:hidden;
}

.pricing-new-faq-item summary {
    min-height:72px;
    padding:0 20px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    cursor:pointer;
    list-style:none;

    color:#eef1ef;
    font-size:12px;
    font-weight:700;
}

.pricing-new-faq-item summary::-webkit-details-marker {
    display:none;
}

.pricing-new-faq-item summary i {
    width:32px;
    height:32px;
    flex:0 0 32px;

    display:grid;
    place-items:center;

    border-radius:50%;

    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.055);

    color:#b5aaff;

    font-style:normal;
    font-size:16px;
}

.pricing-new-faq-item p {
    max-width:800px;
    margin:0;
    padding:0 20px 20px;

    color:#808b87;
    font-size:11px;
    line-height:1.6;
}

/* FINAL */

.pricing-new-final {
    padding:0 0 96px;
}

.pricing-new-final-shell {
    min-height:390px;
    padding:52px;

    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:40px;

    border-radius:38px;

    background:
        radial-gradient(circle at 12% 10%,rgba(53,205,151,.09),transparent 28%),
        radial-gradient(circle at 88% 88%,rgba(112,91,255,.16),transparent 34%),
        linear-gradient(140deg,#0a1010,#0a0d15);

    border:1px solid rgba(255,255,255,.07);

    box-shadow:
        0 30px 90px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.035);
}

.pricing-new-final-shell h2 {
    max-width:950px;
    margin:18px 0 0;

    font-size:clamp(58px,7vw,100px);
    line-height:.91;
    letter-spacing:-.067em;
    font-weight:445;
}

.pricing-new-final-shell p {
    margin:22px 0 0;

    color:#89948f;
    font-size:15px;
}

.pricing-new-final-button {
    min-height:58px;
    padding:0 18px 0 22px;

    flex-shrink:0;

    display:inline-flex;
    align-items:center;
    gap:22px;

    border-radius:999px;

    background:#f4f6f5;
    color:#101514;

    font-size:13px;
    font-weight:700;

    transition:transform .2s ease;
}

.pricing-new-final-button span {
    width:34px;
    height:34px;
    border-radius:50%;

    display:grid;
    place-items:center;

    background:#101514;
    color:#fff;
}

/* MOTION */

.pricing-new-motion .pricing-new-reveal {
    opacity:0;
    transform:translate3d(0,22px,0);

    transition:
        opacity .72s cubic-bezier(.2,.7,.2,1),
        transform .72s cubic-bezier(.2,.7,.2,1);

    transition-delay:var(--pr-delay,0ms);
}

.pricing-new-motion .pricing-new-reveal.is-visible {
    opacity:1;
    transform:translate3d(0,0,0);
}

@media (hover:hover) and (pointer:fine) {
    .pricing-new-hero-card:hover,
    .pricing-new-card:hover,
    .pricing-new-flex-grid article:hover {
        transform:translate3d(0,-5px,0);
        border-color:rgba(255,255,255,.11);
    }

    .pricing-new-card > a:hover {
        transform:translate3d(0,-2px,0);
        background:rgba(255,255,255,.08);
    }

    .pricing-new-card-featured > a:hover {
        background:#fff;
    }

    .pricing-new-final-button:hover {
        transform:translate3d(0,-2px,0);
    }
}

/* RESPONSIVE */

@media(max-width:1100px) {
    .pricing-new-grid {
        grid-template-columns:1fr;
    }

    .pricing-new-card {
        min-height:0;
    }

    .pricing-new-principle-shell,
    .pricing-new-flex-shell {
        grid-template-columns:1fr;
    }
}

@media(max-width:820px) {
    .pricing-new-hero-grid {
        grid-template-columns:1fr;
    }
}

@media(max-width:720px) {
    .pricing-new-hero {
        padding:72px 0 66px;
    }

    .pricing-new-hero h1 {
        font-size:clamp(52px,14vw,70px);
        line-height:.88;
    }

    .pricing-new-hero-copy > p {
        font-size:16px;
    }

    .pricing-new-actions {
        display:grid;
    }

    .pricing-new-actions .sx-btn {
        width:100%;
        justify-content:space-between;
    }

    .pricing-new-hero-grid {
        margin-top:48px;
    }

    .pricing-new-hero-card {
        min-height:300px;
    }

    .pricing-new-plans,
    .pricing-new-compare,
    .pricing-new-faq {
        padding:84px 0;
    }

    .pricing-new-principle,
    .pricing-new-flex {
        padding:20px 0 84px;
    }

    .pricing-new-section-head {
        text-align:left;
    }

    .pricing-new-section-head h2 {
        font-size:46px;
    }

    .pricing-new-section-head p {
        margin-left:0;
        font-size:15px;
    }

    .pricing-new-grid {
        margin-top:42px;
    }

    .pricing-new-card {
        padding:22px;
        border-radius:26px;
    }

    .pricing-new-card-head h3 {
        font-size:32px;
    }

    .pricing-new-principle-shell,
    .pricing-new-flex-shell {
        padding:28px 18px;
        border-radius:28px;
        gap:40px;
    }

    .pricing-new-principle-copy h2,
    .pricing-new-flex-copy h2 {
        font-size:48px;
    }

    .pricing-new-table-wrap {
        margin-top:42px;
        border-radius:22px;
    }

    .pricing-new-table {
        min-width:650px;
    }

    .pricing-new-row {
        min-height:54px;
        padding:0 16px;
        font-size:9px;
    }

    .pricing-new-faq-grid {
        margin-top:42px;
    }

    .pricing-new-final {
        padding-bottom:48px;
    }

    .pricing-new-final-shell {
        min-height:430px;
        padding:28px 22px;

        flex-direction:column;
        align-items:flex-start;
        justify-content:space-between;

        border-radius:28px;
    }

    .pricing-new-final-shell h2 {
        font-size:56px;
    }

    .pricing-new-final-button {
        width:100%;
        justify-content:space-between;
    }
}

@media(prefers-reduced-motion: reduce) {
    .pricing-new-motion .pricing-new-reveal {
        opacity:1 !important;
        transform:none !important;
        transition:none !important;
    }
}

/* =========================================================
   V23 — FAQ REDESIGN
   Same Sellnex master language as all previous pages.
========================================================= */

.faq-new {
    background:#050a0a;
    color:#f4f6f5;
}

.faq-new-kicker {
    color:#77827e;
    font-size:11px;
    font-weight:760;
    letter-spacing:.18em;
    text-transform:uppercase;
}

/* HERO */

.faq-new-hero {
    position:relative;
    overflow:hidden;
    padding:108px 0 88px;

    background:
        radial-gradient(circle at 12% 38%,rgba(39,189,134,.14),transparent 34%),
        radial-gradient(circle at 78% 18%,rgba(92,82,255,.18),transparent 32%),
        linear-gradient(135deg,#050a0a 0%,#071110 42%,#08131a 100%);
}

.faq-new-hero::before {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;

    background:
        radial-gradient(circle at 18% 55%,rgba(41,214,154,.08),transparent 30%),
        radial-gradient(circle at 68% 30%,rgba(92,82,255,.10),transparent 28%),
        radial-gradient(circle at 88% 12%,rgba(125,109,255,.08),transparent 22%);
}

.faq-new-hero::after {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.34;

    background:
        linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px),
        linear-gradient(180deg,rgba(255,255,255,.022) 1px,transparent 1px);

    background-size:72px 72px;

    -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.88),rgba(0,0,0,.48) 58%,transparent 100%);
    mask-image:linear-gradient(to bottom,rgba(0,0,0,.88),rgba(0,0,0,.48) 58%,transparent 100%);
}

.faq-new-hero > .container {
    position:relative;
    z-index:2;
}

.faq-new-hero-copy {
    max-width:1080px;
}

.faq-new-hero h1 {
    max-width:1150px;
    margin:22px 0 0;

    color:#f4f6f5;
    font-size:clamp(70px,8vw,122px);
    line-height:.86;
    letter-spacing:-.074em;
    font-weight:440;
}

.faq-new-hero h1 span {
    background:linear-gradient(90deg,#f5f6f5 0%,#a8a1ff 48%,#65d7aa 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.faq-new-hero-copy > p {
    max-width:760px;
    margin:32px 0 0;

    color:#96a09c;
    font-size:18px;
    line-height:1.62;
}

.faq-new-actions {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:34px;
}

.faq-new-hero-grid {
    margin-top:72px;

    display:grid;
    grid-template-columns:1.45fr .775fr .775fr;
    gap:14px;
}

.faq-new-hero-card {
    min-height:350px;
    padding:26px;

    display:flex;
    flex-direction:column;

    border-radius:27px;

    background:
        radial-gradient(circle at 86% 5%,rgba(116,91,255,.13),transparent 30%),
        radial-gradient(circle at 12% 18%,rgba(46,201,145,.08),transparent 26%),
        linear-gradient(150deg,#111917,#0d1514);

    border:1px solid rgba(255,255,255,.065);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03),
        0 26px 70px rgba(0,0,0,.16);

    transition:
        transform .28s cubic-bezier(.2,.7,.2,1),
        border-color .28s ease;
}

.faq-new-hero-card-large {
    min-height:430px;
}

.faq-new-card-top {
    display:flex;
    justify-content:space-between;
    gap:18px;
}

.faq-new-card-top > div {
    display:grid;
}

.faq-new-card-top small {
    color:#707b77;
    font-size:9px;
}

.faq-new-card-top strong {
    margin-top:5px;
    color:#eef1ef;
    font-size:17px;
}

.faq-new-live,
.faq-new-pill {
    min-height:32px;
    padding:0 11px;
    border-radius:999px;

    display:inline-flex;
    align-items:center;
    gap:7px;

    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.06);

    color:#9ea8a4;
    font-size:9px;
    font-weight:700;
}

.faq-new-live i {
    width:7px;
    height:7px;
    border-radius:50%;
    background:#42d6a0;
    box-shadow:0 0 12px rgba(66,214,160,.42);
}

.faq-new-pill-purple {
    background:rgba(125,109,255,.11);
    border-color:rgba(125,109,255,.14);
    color:#c5bcff;
}

.faq-new-search {
    min-height:58px;
    margin-top:30px;
    padding:0 16px;

    display:flex;
    align-items:center;
    gap:13px;

    border-radius:18px;

    background:rgba(255,255,255,.055);
    border:1px solid rgba(255,255,255,.065);
}

.faq-new-search > span {
    color:#8f84ee;
    font-size:19px;
}

.faq-new-search p {
    margin:0;
    color:#929c98;
    font-size:11px;
}

.faq-new-question-list {
    margin-top:13px;
    display:grid;
    gap:8px;
}

.faq-new-question-list > div {
    min-height:58px;
    padding:0 14px;

    display:grid;
    grid-template-columns:34px 1fr auto;
    gap:11px;
    align-items:center;

    border-radius:16px;

    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.045);
}

.faq-new-question-list > div.active {
    background:rgba(125,109,255,.09);
    border-color:rgba(125,109,255,.13);
}

.faq-new-question-list span {
    color:#626d69;
    font-size:8px;
    font-weight:700;
}

.faq-new-question-list strong {
    font-size:11px;
}

.faq-new-question-list i {
    color:#7d8783;
    font-size:11px;
    font-style:normal;
}

.faq-new-topic-cloud {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:54px;
}

.faq-new-topic-cloud span {
    min-height:36px;
    padding:0 12px;

    display:inline-flex;
    align-items:center;

    border-radius:999px;

    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.055);

    color:#89938f;
    font-size:9px;
}

.faq-new-contact-card {
    margin-top:52px;
    padding:16px;

    display:flex;
    align-items:center;
    gap:12px;

    border-radius:18px;

    background:rgba(125,109,255,.07);
    border:1px solid rgba(125,109,255,.10);
}

.faq-new-contact-card > span {
    width:42px;
    height:42px;
    border-radius:13px;

    display:grid;
    place-items:center;

    background:rgba(125,109,255,.12);
    color:#c1b7ff;

    font-weight:800;
}

.faq-new-contact-card > div {
    display:grid;
}

.faq-new-contact-card strong {
    font-size:11px;
}

.faq-new-contact-card small {
    margin-top:5px;
    color:#767f8a;
    font-size:9px;
    line-height:1.4;
}

.faq-new-hero-card > a {
    margin-top:auto;
    padding-top:24px;

    display:flex;
    justify-content:space-between;

    color:#d9dddb;
    font-size:11px;
    font-weight:650;
}

/* COMMON */

.faq-new-section,
.faq-new-account,
.faq-new-connected,
.faq-new-dashboard,
.faq-new-final {
    background:#050a0a;
}

.faq-new-section {
    padding:120px 0;
}

.faq-new-section-head {
    max-width:900px;
    margin:0 auto;
    text-align:center;
}

.faq-new-section-head-left {
    margin:0;
    text-align:left;
}

.faq-new-section-head h2 {
    margin:17px 0 0;

    color:#f4f6f5;
    font-size:clamp(52px,6.8vw,92px);
    line-height:.94;
    letter-spacing:-.062em;
    font-weight:445;
}

.faq-new-section-head p {
    max-width:720px;
    margin:28px auto 0;

    color:#8f9995;
    font-size:17px;
    line-height:1.62;
}

.faq-new-section-head-left p {
    margin-left:0;
}

/* FAQ LIST */

.faq-new-list {
    max-width:980px;
    margin:58px auto 0;

    display:grid;
    gap:9px;
}

.faq-new-item {
    overflow:hidden;

    border-radius:22px;

    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.055);

    transition:
        background .2s ease,
        border-color .2s ease;
}

.faq-new-item[open] {
    background:rgba(255,255,255,.045);
    border-color:rgba(255,255,255,.085);
}

.faq-new-item summary {
    min-height:74px;
    padding:0 20px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    cursor:pointer;
    list-style:none;

    color:#eef1ef;
    font-size:12px;
    font-weight:700;
}

.faq-new-item summary::-webkit-details-marker {
    display:none;
}

.faq-new-item summary i {
    width:32px;
    height:32px;
    flex:0 0 32px;

    display:grid;
    place-items:center;

    border-radius:50%;

    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.055);

    color:#b5aaff;

    font-style:normal;
    font-size:16px;
}

.faq-new-item p {
    max-width:820px;
    margin:0;
    padding:0 20px 22px;

    color:#808b87;
    font-size:11px;
    line-height:1.65;
}

/* HIGHLIGHT */

.faq-new-highlight {
    padding:20px 0 120px;
    background:#050a0a;
}

.faq-new-highlight-shell {
    padding:60px;

    display:grid;
    grid-template-columns:.88fr 1.12fr;
    gap:62px;
    align-items:center;

    border-radius:38px;

    background:
        radial-gradient(circle at 12% 88%,rgba(92,67,255,.35),transparent 38%),
        radial-gradient(circle at 90% 15%,rgba(119,99,255,.14),transparent 35%),
        linear-gradient(140deg,#0b0b14,#11101c 55%,#1d1239);

    border:1px solid rgba(255,255,255,.07);
}

.faq-new-highlight-copy h2 {
    margin:18px 0 0;

    font-size:clamp(54px,5.6vw,82px);
    line-height:.95;
    letter-spacing:-.058em;
    font-weight:445;
}

.faq-new-highlight-copy p {
    margin:25px 0 0;

    color:#a5a3af;
    font-size:16px;
    line-height:1.62;
}

.faq-new-highlight-visual {
    display:grid;
    grid-template-columns:1fr 52px 1fr 52px 1fr;
    gap:10px;
    align-items:center;
}

.faq-new-highlight-visual article {
    min-height:220px;
    padding:20px;

    border-radius:23px;

    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.065);
}

.faq-new-highlight-visual article.featured {
    background:
        radial-gradient(circle at 86% 5%,rgba(125,109,255,.15),transparent 34%),
        rgba(255,255,255,.05);

    border-color:rgba(125,109,255,.16);
}

.faq-new-highlight-visual small,
.faq-new-highlight-visual strong,
.faq-new-highlight-visual span {
    display:block;
}

.faq-new-highlight-visual small {
    color:#626c68;
    font-size:8px;
    text-transform:uppercase;
}

.faq-new-highlight-visual strong {
    margin-top:80px;
    font-size:20px;
}

.faq-new-highlight-visual span {
    margin-top:6px;
    color:#7c8682;
    font-size:9px;
}

.faq-new-highlight-line {
    position:relative;
    height:2px;

    overflow:hidden;
    border-radius:999px;

    background:rgba(255,255,255,.08);
}

.faq-new-highlight-line i {
    position:absolute;
    top:0;
    left:-40%;

    width:40%;
    height:100%;

    background:linear-gradient(90deg,transparent,#42d6a0,#8f80ff,transparent);

    animation:faqNewFlow 3.4s linear infinite;
}

.faq-new-highlight-line:nth-of-type(4) i {
    animation-delay:.6s;
}

@keyframes faqNewFlow {
    to { transform:translate3d(360%,0,0); }
}

/* ACCOUNT CARDS */

.faq-new-account {
    padding:120px 0;
}

.faq-new-account-grid {
    margin-top:58px;

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
}

.faq-new-account-grid article {
    min-height:330px;
    padding:24px;

    border-radius:26px;

    background:
        linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.022));

    border:1px solid rgba(255,255,255,.06);

    transition:
        transform .26s ease,
        border-color .26s ease;
}

.faq-new-index {
    color:#606b67;
    font-size:10px;
    font-weight:700;
}

.faq-new-account-icon {
    width:48px;
    height:48px;
    margin-top:42px;

    display:grid;
    place-items:center;

    border-radius:15px;

    background:rgba(125,109,255,.10);
    border:1px solid rgba(125,109,255,.12);

    color:#b4a9ff;
    font-weight:800;
}

.faq-new-account-grid h3 {
    margin:20px 0 0;

    font-size:24px;
    letter-spacing:-.035em;
}

.faq-new-account-grid p {
    margin:10px 0 0;

    color:#7f8a86;
    font-size:12px;
    line-height:1.5;
}

/* CONNECTED */

.faq-new-connected {
    padding:20px 0 120px;
}

.faq-new-connected-shell {
    padding:58px;

    display:grid;
    grid-template-columns:.92fr 1.08fr;
    gap:60px;

    border-radius:38px;

    background:
        radial-gradient(circle at 88% 8%,rgba(112,91,255,.10),transparent 28%),
        linear-gradient(145deg,#081311,#0b1014);

    border:1px solid rgba(255,255,255,.06);
}

.faq-new-connected-copy h2 {
    margin:18px 0 0;

    font-size:clamp(52px,5vw,76px);
    line-height:.96;
    letter-spacing:-.058em;
    font-weight:445;
}

.faq-new-connected-copy p {
    margin:24px 0 0;

    color:#89948f;
    font-size:15px;
    line-height:1.62;
}

.faq-new-connected-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.faq-new-connected-grid > div {
    min-height:150px;
    padding:19px;

    display:flex;
    flex-direction:column;
    justify-content:flex-end;

    border-radius:20px;

    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.05);
}

.faq-new-connected-grid > div.featured {
    background:rgba(125,109,255,.08);
    border-color:rgba(125,109,255,.12);
}

.faq-new-connected-grid small,
.faq-new-connected-grid strong,
.faq-new-connected-grid span {
    display:block;
}

.faq-new-connected-grid small {
    color:#6d7874;
    font-size:8px;
}

.faq-new-connected-grid strong {
    margin-top:7px;
    font-size:18px;
}

.faq-new-connected-grid span {
    margin-top:6px;
    color:#798480;
    font-size:9px;
}

/* DASHBOARD */

.faq-new-dashboard {
    padding:120px 0;
}

.faq-new-dashboard-grid {
    margin-top:58px;

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
}

.faq-new-dashboard-grid article {
    min-height:360px;
    padding:25px;

    display:flex;
    flex-direction:column;

    border-radius:27px;

    background:
        linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.022));

    border:1px solid rgba(255,255,255,.06);

    transition:
        transform .26s ease,
        border-color .26s ease;
}

.faq-new-dashboard-grid article > small {
    color:#68736f;
    font-size:9px;
    font-weight:700;
    text-transform:uppercase;
}

.faq-new-dashboard-grid h3 {
    margin:18px 0 0;

    font-size:30px;
    line-height:1;
    letter-spacing:-.045em;
}

.faq-new-dashboard-grid p {
    margin:14px 0 0;

    color:#7f8a86;
    font-size:12px;
    line-height:1.52;
}

.faq-new-dashboard-stat {
    margin-top:auto;
    padding:16px;

    border-radius:17px;

    display:flex;
    align-items:flex-end;
    justify-content:space-between;

    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.05);
}

.faq-new-dashboard-stat.warning {
    background:rgba(243,182,63,.06);
    border-color:rgba(243,182,63,.09);
}

.faq-new-dashboard-stat span {
    color:#717c78;
    font-size:9px;
}

.faq-new-dashboard-stat strong {
    font-size:28px;
    letter-spacing:-.04em;
}

.faq-new-bars {
    height:105px;
    margin-top:auto;

    display:flex;
    align-items:flex-end;
    gap:7px;
}

.faq-new-bars i {
    flex:1;
    min-height:12px;

    border-radius:999px 999px 5px 5px;
    background:rgba(255,255,255,.10);

    transform-origin:bottom;
}

.faq-new-bars i:nth-last-child(1),
.faq-new-bars i:nth-last-child(2) {
    background:linear-gradient(#9489ff,#7567ff);
}

.faq-new-motion .faq-new-bars i {
    transform:scaleY(0);
}

.faq-new-motion .faq-new-bars.is-live i {
    animation:faqNewBar .65s cubic-bezier(.2,.75,.25,1) forwards;
}

.faq-new-motion .faq-new-bars.is-live i:nth-child(2){animation-delay:.05s}
.faq-new-motion .faq-new-bars.is-live i:nth-child(3){animation-delay:.10s}
.faq-new-motion .faq-new-bars.is-live i:nth-child(4){animation-delay:.15s}
.faq-new-motion .faq-new-bars.is-live i:nth-child(5){animation-delay:.20s}
.faq-new-motion .faq-new-bars.is-live i:nth-child(6){animation-delay:.25s}

@keyframes faqNewBar {
    to { transform:scaleY(1); }
}

/* FINAL */

.faq-new-final {
    padding:0 0 96px;
}

.faq-new-final-shell {
    min-height:390px;
    padding:52px;

    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:40px;

    border-radius:38px;

    background:
        radial-gradient(circle at 12% 10%,rgba(53,205,151,.09),transparent 28%),
        radial-gradient(circle at 88% 88%,rgba(112,91,255,.16),transparent 34%),
        linear-gradient(140deg,#0a1010,#0a0d15);

    border:1px solid rgba(255,255,255,.07);

    box-shadow:
        0 30px 90px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.035);
}

.faq-new-final-shell h2 {
    max-width:950px;
    margin:18px 0 0;

    font-size:clamp(58px,7vw,100px);
    line-height:.91;
    letter-spacing:-.067em;
    font-weight:445;
}

.faq-new-final-shell p {
    margin:22px 0 0;

    color:#89948f;
    font-size:15px;
}

.faq-new-final-button {
    min-height:58px;
    padding:0 18px 0 22px;

    flex-shrink:0;

    display:inline-flex;
    align-items:center;
    gap:22px;

    border-radius:999px;

    background:#f4f6f5;
    color:#101514;

    font-size:13px;
    font-weight:700;

    transition:transform .2s ease;
}

.faq-new-final-button span {
    width:34px;
    height:34px;
    border-radius:50%;

    display:grid;
    place-items:center;

    background:#101514;
    color:#fff;
}

/* MOTION */

.faq-new-motion .faq-new-reveal {
    opacity:0;
    transform:translate3d(0,22px,0);

    transition:
        opacity .72s cubic-bezier(.2,.7,.2,1),
        transform .72s cubic-bezier(.2,.7,.2,1);

    transition-delay:var(--faq-delay,0ms);
}

.faq-new-motion .faq-new-reveal.is-visible {
    opacity:1;
    transform:translate3d(0,0,0);
}

@media (hover:hover) and (pointer:fine) {
    .faq-new-hero-card:hover,
    .faq-new-account-grid article:hover,
    .faq-new-dashboard-grid article:hover {
        transform:translate3d(0,-5px,0);
        border-color:rgba(255,255,255,.11);
    }

    .faq-new-final-button:hover {
        transform:translate3d(0,-2px,0);
    }
}

/* RESPONSIVE */

@media(max-width:1100px) {
    .faq-new-hero-grid {
        grid-template-columns:1fr 1fr;
    }

    .faq-new-hero-card-large {
        grid-column:1 / -1;
    }

    .faq-new-account-grid {
        grid-template-columns:1fr 1fr;
    }

    .faq-new-highlight-shell,
    .faq-new-connected-shell {
        grid-template-columns:1fr;
    }
}

@media(max-width:720px) {
    .faq-new-hero {
        padding:72px 0 66px;
    }

    .faq-new-hero h1 {
        font-size:clamp(52px,14vw,70px);
        line-height:.88;
    }

    .faq-new-hero-copy > p {
        font-size:16px;
    }

    .faq-new-actions {
        display:grid;
    }

    .faq-new-actions .sx-btn {
        width:100%;
        justify-content:space-between;
    }

    .faq-new-hero-grid {
        grid-template-columns:1fr;
        margin-top:48px;
    }

    .faq-new-hero-card-large {
        grid-column:auto;
        min-height:390px;
    }

    .faq-new-section,
    .faq-new-account,
    .faq-new-dashboard {
        padding:84px 0;
    }

    .faq-new-highlight,
    .faq-new-connected {
        padding:20px 0 84px;
    }

    .faq-new-section-head {
        text-align:left;
    }

    .faq-new-section-head h2 {
        font-size:46px;
    }

    .faq-new-section-head p {
        margin-left:0;
        font-size:15px;
    }

    .faq-new-list {
        margin-top:42px;
    }

    .faq-new-item summary {
        min-height:66px;
        padding:0 16px;
        font-size:11px;
    }

    .faq-new-item p {
        padding:0 16px 18px;
        font-size:10px;
    }

    .faq-new-highlight-shell,
    .faq-new-connected-shell {
        padding:28px 18px;
        border-radius:28px;
        gap:40px;
    }

    .faq-new-highlight-copy h2,
    .faq-new-connected-copy h2 {
        font-size:48px;
    }

    .faq-new-highlight-visual {
        grid-template-columns:1fr;
    }

    .faq-new-highlight-line {
        width:2px;
        height:36px;
        margin:0 auto;
    }

    .faq-new-highlight-line i {
        width:100%;
        height:40%;
        top:-40%;
        left:0;

        background:linear-gradient(180deg,transparent,#42d6a0,#8f80ff,transparent);

        animation:faqNewFlowMobile 3s linear infinite;
    }

    @keyframes faqNewFlowMobile {
        to { transform:translate3d(0,360%,0); }
    }

    .faq-new-highlight-visual article {
        min-height:170px;
    }

    .faq-new-highlight-visual strong {
        margin-top:45px;
    }

    .faq-new-account-grid,
    .faq-new-dashboard-grid {
        grid-template-columns:1fr;
    }

    .faq-new-connected-grid {
        grid-template-columns:1fr;
    }

    .faq-new-final {
        padding-bottom:48px;
    }

    .faq-new-final-shell {
        min-height:430px;
        padding:28px 22px;

        flex-direction:column;
        align-items:flex-start;
        justify-content:space-between;

        border-radius:28px;
    }

    .faq-new-final-shell h2 {
        font-size:56px;
    }

    .faq-new-final-button {
        width:100%;
        justify-content:space-between;
    }
}

@media(prefers-reduced-motion: reduce) {
    .faq-new-motion .faq-new-reveal {
        opacity:1 !important;
        transform:none !important;
        transition:none !important;
    }

    .faq-new-highlight-line i,
    .faq-new-bars i {
        animation:none !important;
        transform:none !important;
    }
}

/* =========================================================
   V24 — CONTACT REDESIGN
   Same Sellnex master language as all previous pages.
========================================================= */

.contact-new {
    background:#050a0a;
    color:#f4f6f5;
}

.contact-new-kicker {
    color:#77827e;
    font-size:11px;
    font-weight:760;
    letter-spacing:.18em;
    text-transform:uppercase;
}

/* HERO */

.contact-new-hero {
    position:relative;
    overflow:hidden;
    padding:108px 0 88px;

    background:
        radial-gradient(circle at 12% 38%,rgba(39,189,134,.14),transparent 34%),
        radial-gradient(circle at 78% 18%,rgba(92,82,255,.18),transparent 32%),
        linear-gradient(135deg,#050a0a 0%,#071110 42%,#08131a 100%);
}

.contact-new-hero::before {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;

    background:
        radial-gradient(circle at 18% 55%,rgba(41,214,154,.08),transparent 30%),
        radial-gradient(circle at 68% 30%,rgba(92,82,255,.10),transparent 28%),
        radial-gradient(circle at 88% 12%,rgba(125,109,255,.08),transparent 22%);
}

.contact-new-hero::after {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.34;

    background:
        linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px),
        linear-gradient(180deg,rgba(255,255,255,.022) 1px,transparent 1px);

    background-size:72px 72px;

    -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.88),rgba(0,0,0,.48) 58%,transparent 100%);
    mask-image:linear-gradient(to bottom,rgba(0,0,0,.88),rgba(0,0,0,.48) 58%,transparent 100%);
}

.contact-new-hero > .container {
    position:relative;
    z-index:2;
}

.contact-new-hero-copy {
    max-width:1080px;
}

.contact-new-hero h1 {
    max-width:1160px;
    margin:22px 0 0;

    color:#f4f6f5;
    font-size:clamp(70px,8vw,122px);
    line-height:.86;
    letter-spacing:-.074em;
    font-weight:440;
}

.contact-new-hero h1 span {
    background:linear-gradient(90deg,#f5f6f5 0%,#a8a1ff 48%,#65d7aa 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.contact-new-hero-copy > p {
    max-width:760px;
    margin:32px 0 0;

    color:#96a09c;
    font-size:18px;
    line-height:1.62;
}

.contact-new-actions {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:34px;
}

.contact-new-hero-grid {
    margin-top:72px;

    display:grid;
    grid-template-columns:1.45fr .775fr .775fr;
    gap:14px;
}

.contact-new-hero-card {
    min-height:350px;
    padding:26px;

    display:flex;
    flex-direction:column;

    border-radius:27px;

    background:
        radial-gradient(circle at 86% 5%,rgba(116,91,255,.13),transparent 30%),
        radial-gradient(circle at 12% 18%,rgba(46,201,145,.08),transparent 26%),
        linear-gradient(150deg,#111917,#0d1514);

    border:1px solid rgba(255,255,255,.065);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03),
        0 26px 70px rgba(0,0,0,.16);

    transition:
        transform .28s cubic-bezier(.2,.7,.2,1),
        border-color .28s ease;
}

.contact-new-hero-card-large {
    min-height:430px;
}

.contact-new-card-top {
    display:flex;
    justify-content:space-between;
    gap:18px;
}

.contact-new-card-top > div {
    display:grid;
}

.contact-new-card-top small {
    color:#707b77;
    font-size:9px;
}

.contact-new-card-top strong {
    margin-top:5px;
    color:#eef1ef;
    font-size:17px;
}

.contact-new-live,
.contact-new-pill {
    min-height:32px;
    padding:0 11px;
    border-radius:999px;

    display:inline-flex;
    align-items:center;
    gap:7px;

    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.06);

    color:#9ea8a4;
    font-size:9px;
    font-weight:700;
}

.contact-new-live i {
    width:7px;
    height:7px;
    border-radius:50%;
    background:#42d6a0;
    box-shadow:0 0 12px rgba(66,214,160,.42);
}

.contact-new-pill-purple {
    background:rgba(125,109,255,.11);
    border-color:rgba(125,109,255,.14);
    color:#c5bcff;
}

.contact-new-help-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
    margin-top:30px;
}

.contact-new-help-grid > div {
    min-height:130px;
    padding:16px;

    display:flex;
    flex-direction:column;

    border-radius:18px;

    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.045);
}

.contact-new-help-grid > div.active {
    background:
        radial-gradient(circle at 90% 5%,rgba(125,109,255,.13),transparent 38%),
        rgba(255,255,255,.045);

    border-color:rgba(125,109,255,.13);
}

.contact-new-help-grid span {
    color:#626d69;
    font-size:8px;
    font-weight:700;
}

.contact-new-help-grid strong {
    margin-top:auto;
    font-size:13px;
}

.contact-new-help-grid small {
    margin-top:5px;
    color:#747f7b;
    font-size:9px;
}

.contact-new-info-card {
    margin-top:52px;
    padding:16px;

    display:flex;
    align-items:center;
    gap:12px;

    border-radius:18px;

    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.055);
}

.contact-new-info-icon {
    width:42px;
    height:42px;
    border-radius:13px;

    display:grid;
    place-items:center;

    background:rgba(125,109,255,.10);
    color:#b6acff;

    font-weight:800;
}

.contact-new-info-icon-green {
    background:rgba(66,214,160,.08);
    color:#7ae0b8;
}

.contact-new-info-card > div {
    display:grid;
}

.contact-new-info-card strong {
    font-size:11px;
}

.contact-new-info-card small {
    margin-top:5px;
    color:#747f7b;
    font-size:9px;
    line-height:1.4;
}

.contact-new-hero-card > a {
    margin-top:auto;
    padding-top:24px;

    display:flex;
    justify-content:space-between;

    color:#d9dddb;
    font-size:11px;
    font-weight:650;
}

/* MAIN CONTACT */

.contact-new-main {
    padding:120px 0;
    background:#050a0a;
}

.contact-new-main-grid {
    display:grid;
    grid-template-columns:.86fr 1.14fr;
    gap:14px;
    align-items:stretch;
}

.contact-new-intro,
.contact-new-form-shell {
    min-height:720px;
    border-radius:36px;
}

.contact-new-intro {
    padding:40px;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    background:
        radial-gradient(circle at 12% 90%,rgba(53,205,151,.08),transparent 30%),
        linear-gradient(145deg,#0a1412,#0a1012);

    border:1px solid rgba(255,255,255,.06);
}

.contact-new-intro h2 {
    max-width:580px;
    margin:18px 0 0;

    font-size:clamp(50px,5.5vw,76px);
    line-height:.93;
    letter-spacing:-.058em;
    font-weight:445;
}

.contact-new-intro > div:first-child > p {
    max-width:530px;
    margin:24px 0 0;

    color:#89948f;
    font-size:15px;
    line-height:1.62;
}

.contact-new-intro-cards {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:42px;
}

.contact-new-intro-cards article {
    min-height:190px;
    padding:19px;

    display:flex;
    flex-direction:column;

    border-radius:22px;

    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.055);
}

.contact-new-intro-cards article.featured {
    background:
        radial-gradient(circle at 85% 5%,rgba(125,109,255,.16),transparent 36%),
        rgba(255,255,255,.045);

    border-color:rgba(125,109,255,.14);
}

.contact-new-intro-cards small,
.contact-new-intro-cards strong,
.contact-new-intro-cards span {
    display:block;
}

.contact-new-intro-cards small {
    color:#65706c;
    font-size:8px;
    font-weight:700;
    text-transform:uppercase;
}

.contact-new-intro-cards strong {
    margin-top:auto;
    font-size:18px;
}

.contact-new-intro-cards span {
    margin-top:6px;
    color:#77827e;
    font-size:9px;
    line-height:1.4;
}

.contact-new-form-shell {
    padding:12px;

    background:
        radial-gradient(circle at 90% 0%,rgba(125,109,255,.22),transparent 28%),
        linear-gradient(145deg,#16142a,#101518);

    border:1px solid rgba(125,109,255,.14);

    box-shadow:
        0 28px 80px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.06);
}

.contact-new-form {
    height:100%;
    padding:30px;

    display:flex;
    flex-direction:column;
    gap:17px;

    border-radius:28px;

    background:#0b1111;
    border:1px solid rgba(255,255,255,.055);
}

.contact-new-form-head h3 {
    max-width:560px;
    margin:12px 0 0;

    font-size:clamp(42px,5vw,64px);
    line-height:.92;
    letter-spacing:-.055em;
    font-weight:450;
}

.contact-new-form-head p {
    margin:17px 0 0;
    color:#798480;
    font-size:11px;
}

.contact-new-form-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.contact-new-field {
    display:grid;
    gap:8px;
}

.contact-new-field label {
    color:#6c7773;
    font-size:8px;
    font-weight:750;
    letter-spacing:.10em;
    text-transform:uppercase;
}

.contact-new-field input,
.contact-new-field select,
.contact-new-field textarea {
    width:100%;
    padding:14px 15px;

    border-radius:16px;
    border:1px solid rgba(255,255,255,.065);
    outline:0;

    background:rgba(255,255,255,.04);
    color:#eef1ef;

    font:inherit;
    font-size:11px;
    font-weight:600;

    transition:
        border-color .18s ease,
        background .18s ease;
}

.contact-new-field textarea {
    min-height:160px;
    resize:vertical;
}

.contact-new-field input::placeholder,
.contact-new-field textarea::placeholder {
    color:#596460;
}

.contact-new-field select {
    color:#9da7a3;
}

.contact-new-field input:focus,
.contact-new-field select:focus,
.contact-new-field textarea:focus {
    border-color:rgba(125,109,255,.45);
    background:rgba(255,255,255,.055);
}

.contact-new-submit {
    min-height:55px;
    margin-top:2px;
    padding:0 11px 0 20px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    border:0;
    border-radius:999px;

    background:#f4f6f5;
    color:#101514;

    cursor:pointer;

    font:inherit;
    font-size:12px;
    font-weight:700;

    transition:transform .2s ease;
}

.contact-new-submit span {
    width:34px;
    height:34px;
    border-radius:50%;

    display:grid;
    place-items:center;

    background:#101514;
    color:#fff;
}

.contact-new-form-note {
    margin:0;
    color:#65706c;
    font-size:9px;
    line-height:1.5;
}

/* COMMON */

.contact-new-reasons,
.contact-new-self,
.contact-new-webmidox,
.contact-new-final {
    background:#050a0a;
}

.contact-new-reasons {
    padding:120px 0;
}

.contact-new-section-head {
    max-width:900px;
    margin:0 auto;
    text-align:center;
}

.contact-new-section-head-left {
    margin:0;
    text-align:left;
}

.contact-new-section-head h2 {
    margin:17px 0 0;

    color:#f4f6f5;
    font-size:clamp(52px,6.8vw,92px);
    line-height:.94;
    letter-spacing:-.062em;
    font-weight:445;
}

.contact-new-section-head p {
    max-width:720px;
    margin:28px auto 0;

    color:#8f9995;
    font-size:17px;
    line-height:1.62;
}

.contact-new-section-head-left p {
    margin-left:0;
}

/* REASONS */

.contact-new-reasons-grid {
    margin-top:58px;

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
}

.contact-new-reasons-grid article {
    min-height:320px;
    padding:24px;

    border-radius:26px;

    background:
        linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.022));

    border:1px solid rgba(255,255,255,.06);

    transition:
        transform .26s ease,
        border-color .26s ease;
}

.contact-new-index {
    color:#606b67;
    font-size:10px;
    font-weight:700;
}

.contact-new-reason-icon {
    width:48px;
    height:48px;
    margin-top:42px;

    display:grid;
    place-items:center;

    border-radius:15px;

    background:rgba(125,109,255,.10);
    border:1px solid rgba(125,109,255,.12);

    color:#b4a9ff;
    font-weight:800;
}

.contact-new-reasons-grid h3 {
    margin:20px 0 0;

    font-size:24px;
    letter-spacing:-.035em;
}

.contact-new-reasons-grid p {
    margin:10px 0 0;

    color:#7f8a86;
    font-size:12px;
    line-height:1.5;
}

/* HIGHLIGHT */

.contact-new-highlight {
    padding:20px 0 120px;
    background:#050a0a;
}

.contact-new-highlight-shell {
    padding:60px;

    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:62px;
    align-items:center;

    border-radius:38px;

    background:
        radial-gradient(circle at 12% 88%,rgba(92,67,255,.35),transparent 38%),
        radial-gradient(circle at 90% 15%,rgba(119,99,255,.14),transparent 35%),
        linear-gradient(140deg,#0b0b14,#11101c 55%,#1d1239);

    border:1px solid rgba(255,255,255,.07);
}

.contact-new-highlight-copy h2 {
    margin:18px 0 0;

    font-size:clamp(54px,5.6vw,82px);
    line-height:.95;
    letter-spacing:-.058em;
    font-weight:445;
}

.contact-new-highlight-copy p {
    margin:25px 0 0;

    color:#a5a3af;
    font-size:16px;
    line-height:1.62;
}

.contact-new-highlight-copy .sx-btn {
    margin-top:30px;
}

.contact-new-highlight-visual {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.contact-new-highlight-visual article {
    min-height:170px;
    padding:20px;

    display:flex;
    flex-direction:column;
    justify-content:flex-end;

    border-radius:21px;

    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.06);

    transition:
        transform .26s ease,
        border-color .26s ease;
}

.contact-new-highlight-visual article.featured {
    background:
        radial-gradient(circle at 86% 5%,rgba(125,109,255,.15),transparent 35%),
        rgba(255,255,255,.05);

    border-color:rgba(125,109,255,.16);
}

.contact-new-highlight-visual small,
.contact-new-highlight-visual strong,
.contact-new-highlight-visual span {
    display:block;
}

.contact-new-highlight-visual small {
    color:#66716d;
    font-size:8px;
    text-transform:uppercase;
}

.contact-new-highlight-visual strong {
    margin-top:7px;
    font-size:21px;
}

.contact-new-highlight-visual span {
    margin-top:6px;
    color:#798480;
    font-size:9px;
}

/* SELF SERVICE */

.contact-new-self {
    padding:120px 0;
}

.contact-new-self-grid {
    margin-top:58px;

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
}

.contact-new-self-grid article {
    min-height:360px;
    padding:25px;

    display:flex;
    flex-direction:column;

    border-radius:27px;

    background:
        linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.022));

    border:1px solid rgba(255,255,255,.06);

    transition:
        transform .26s ease,
        border-color .26s ease;
}

.contact-new-self-grid small {
    color:#68736f;
    font-size:9px;
    font-weight:700;
    text-transform:uppercase;
}

.contact-new-self-grid h3 {
    margin:20px 0 0;

    font-size:31px;
    line-height:1;
    letter-spacing:-.045em;
}

.contact-new-self-grid p {
    margin:15px 0 0;

    color:#7f8a86;
    font-size:12px;
    line-height:1.52;
}

.contact-new-self-grid a {
    margin-top:auto;

    display:flex;
    align-items:center;
    justify-content:space-between;

    color:#e7ebe8;
    font-size:11px;
    font-weight:650;
}

/* WEBMIDOX */

.contact-new-webmidox {
    padding:20px 0 120px;
}

.contact-new-webmidox-shell {
    min-height:360px;
    padding:52px;

    display:grid;
    grid-template-columns:1.25fr .75fr;
    gap:60px;
    align-items:end;

    border-radius:38px;

    background:
        radial-gradient(circle at 88% 8%,rgba(112,91,255,.10),transparent 28%),
        linear-gradient(145deg,#081311,#0b1014);

    border:1px solid rgba(255,255,255,.06);
}

.contact-new-webmidox-shell h2 {
    max-width:880px;
    margin:18px 0 0;

    font-size:clamp(54px,5.5vw,82px);
    line-height:.94;
    letter-spacing:-.06em;
    font-weight:445;
}

.contact-new-webmidox-side > p {
    margin:0;

    color:#89948f;
    font-size:14px;
    line-height:1.62;
}

.contact-new-webmidox-status {
    margin-top:24px;
    padding:16px;

    border-radius:18px;

    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.055);
}

.contact-new-webmidox-status span,
.contact-new-webmidox-status strong {
    display:block;
}

.contact-new-webmidox-status span {
    color:#77827e;
    font-size:9px;
}

.contact-new-webmidox-status span i {
    display:inline-block;
    width:7px;
    height:7px;
    margin-right:7px;

    border-radius:50%;

    background:#42d6a0;
    box-shadow:0 0 12px rgba(66,214,160,.42);
}

.contact-new-webmidox-status strong {
    margin-top:7px;
    font-size:16px;
}

/* FINAL */

.contact-new-final {
    padding:0 0 96px;
}

.contact-new-final-shell {
    min-height:390px;
    padding:52px;

    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:40px;

    border-radius:38px;

    background:
        radial-gradient(circle at 12% 10%,rgba(53,205,151,.09),transparent 28%),
        radial-gradient(circle at 88% 88%,rgba(112,91,255,.16),transparent 34%),
        linear-gradient(140deg,#0a1010,#0a0d15);

    border:1px solid rgba(255,255,255,.07);

    box-shadow:
        0 30px 90px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.035);
}

.contact-new-final-shell h2 {
    max-width:950px;
    margin:18px 0 0;

    font-size:clamp(58px,7vw,100px);
    line-height:.91;
    letter-spacing:-.067em;
    font-weight:445;
}

.contact-new-final-shell p {
    margin:22px 0 0;

    color:#89948f;
    font-size:15px;
}

.contact-new-final-button {
    min-height:58px;
    padding:0 18px 0 22px;

    flex-shrink:0;

    display:inline-flex;
    align-items:center;
    gap:22px;

    border-radius:999px;

    background:#f4f6f5;
    color:#101514;

    font-size:13px;
    font-weight:700;

    transition:transform .2s ease;
}

.contact-new-final-button span {
    width:34px;
    height:34px;
    border-radius:50%;

    display:grid;
    place-items:center;

    background:#101514;
    color:#fff;
}

/* MOTION */

.contact-new-motion .contact-new-reveal {
    opacity:0;
    transform:translate3d(0,22px,0);

    transition:
        opacity .72s cubic-bezier(.2,.7,.2,1),
        transform .72s cubic-bezier(.2,.7,.2,1);

    transition-delay:var(--ct-delay,0ms);
}

.contact-new-motion .contact-new-reveal.is-visible {
    opacity:1;
    transform:translate3d(0,0,0);
}

@media (hover:hover) and (pointer:fine) {
    .contact-new-hero-card:hover,
    .contact-new-reasons-grid article:hover,
    .contact-new-highlight-visual article:hover,
    .contact-new-self-grid article:hover {
        transform:translate3d(0,-5px,0);
        border-color:rgba(255,255,255,.11);
    }

    .contact-new-submit:hover,
    .contact-new-final-button:hover {
        transform:translate3d(0,-2px,0);
    }
}

/* RESPONSIVE */

@media(max-width:1100px) {
    .contact-new-hero-grid {
        grid-template-columns:1fr 1fr;
    }

    .contact-new-hero-card-large {
        grid-column:1 / -1;
    }

    .contact-new-main-grid,
    .contact-new-highlight-shell,
    .contact-new-webmidox-shell {
        grid-template-columns:1fr;
    }

    .contact-new-reasons-grid {
        grid-template-columns:1fr 1fr;
    }
}

@media(max-width:720px) {
    .contact-new-hero {
        padding:72px 0 66px;
    }

    .contact-new-hero h1 {
        font-size:clamp(52px,14vw,70px);
        line-height:.88;
    }

    .contact-new-hero-copy > p {
        font-size:16px;
    }

    .contact-new-actions {
        display:grid;
    }

    .contact-new-actions .sx-btn {
        width:100%;
        justify-content:space-between;
    }

    .contact-new-hero-grid {
        grid-template-columns:1fr;
        margin-top:48px;
    }

    .contact-new-hero-card-large {
        grid-column:auto;
        min-height:390px;
    }

    .contact-new-help-grid {
        grid-template-columns:1fr;
    }

    .contact-new-main,
    .contact-new-reasons,
    .contact-new-self {
        padding:84px 0;
    }

    .contact-new-highlight,
    .contact-new-webmidox {
        padding:20px 0 84px;
    }

    .contact-new-intro,
    .contact-new-form-shell {
        min-height:0;
        border-radius:28px;
    }

    .contact-new-intro {
        padding:28px 20px;
    }

    .contact-new-intro h2 {
        font-size:48px;
    }

    .contact-new-intro-cards {
        grid-template-columns:1fr;
    }

    .contact-new-form-shell {
        padding:8px;
    }

    .contact-new-form {
        padding:22px 18px;
        border-radius:22px;
    }

    .contact-new-form-head h3 {
        font-size:42px;
    }

    .contact-new-form-grid {
        grid-template-columns:1fr;
    }

    .contact-new-field input,
    .contact-new-field select,
    .contact-new-field textarea {
        font-size:11px;
    }

    .contact-new-field textarea {
        min-height:130px;
    }

    .contact-new-section-head {
        text-align:left;
    }

    .contact-new-section-head h2 {
        font-size:46px;
    }

    .contact-new-section-head p {
        margin-left:0;
        font-size:15px;
    }

    .contact-new-reasons-grid,
    .contact-new-self-grid {
        grid-template-columns:1fr;
    }

    .contact-new-highlight-shell,
    .contact-new-webmidox-shell {
        padding:28px 18px;
        border-radius:28px;
        gap:40px;
    }

    .contact-new-highlight-copy h2,
    .contact-new-webmidox-shell h2 {
        font-size:48px;
    }

    .contact-new-highlight-visual {
        grid-template-columns:1fr;
    }

    .contact-new-self-grid {
        margin-top:42px;
    }

    .contact-new-final {
        padding-bottom:48px;
    }

    .contact-new-final-shell {
        min-height:430px;
        padding:28px 22px;

        flex-direction:column;
        align-items:flex-start;
        justify-content:space-between;

        border-radius:28px;
    }

    .contact-new-final-shell h2 {
        font-size:56px;
    }

    .contact-new-final-button {
        width:100%;
        justify-content:space-between;
    }
}

@media(prefers-reduced-motion: reduce) {
    .contact-new-motion .contact-new-reveal {
        opacity:1 !important;
        transform:none !important;
        transition:none !important;
    }
}
